Merge branch 'main' into refactor/useEventListener

.github/workflows/pkg.pr.new.yaml

@@ -1,13 +1,13 @@
-name: Publish Approved PR
+name: Publish Merged PR
 on:
-  pull_request_review:
-    types: [submitted]
+  pull_request:
+    types: [closed]
     paths:
       - 'packages/**'
 
 jobs:
-  approved:
-    if: github.event.review.state == 'APPROVED'
+  after_merge:
+    if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
 
     steps:

.histoire/package.json

@@ -17,15 +17,15 @@
     "vue": "^3.4.31"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.24.1",
+    "@antfu/eslint-config": "^2.27.3",
     "@floating-ui/dom": "^1.6.7",
     "@floating-ui/vue": "^1.1.0",
     "@histoire/plugin-vue": "^0.17.17",
     "@iconify/vue": "^4.1.2",
     "@radix-ui/colors": "^3.0.0",
     "@rollup/plugin-alias": "^5.1.0",
     "autoprefixer": "^10.4.19",
-    "eslint": "^9.8.0",
+    "eslint": "^9.10.0",
     "histoire": "^0.17.17",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.4",

docs/.vitepress/config.ts

@@ -184,6 +184,10 @@ export default defineConfig({
     editLink: {
       pattern: 'https://github.com/radix-vue/radix-vue/edit/main/docs/content/:path',
     },
+    carbonAds: {
+      code: 'CW7DV27J',
+      placement: 'wwwradix-vuecom',
+    },
   },
   srcDir: 'content',
   appearance: 'dark',

docs/components/demo/Accordion/css/index.vue

@@ -43,6 +43,7 @@ const accordionItems = [
             <Icon
               icon="radix-icons:chevron-down"
               class="AccordionChevron"
+              aria-label="Expand/Collapse"
             />
           </AccordionTrigger>
         </AccordionHeader>

docs/components/demo/Accordion/tailwind/index.vue

@@ -42,6 +42,7 @@ const accordionItems = [
             <Icon
               icon="radix-icons:chevron-down"
               class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
+              aria-label="Expand/Collapse"
             />
           </AccordionTrigger>
         </AccordionHeader>

docs/components/demo/Pagination/tailwind/index.vue

@@ -14,17 +14,17 @@ import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, Pa
       v-slot="{ items }"
       class="flex items-center gap-1 text-white"
     >
-      <PaginationFirst class="w-9 h-9  flex items-center justify-center  disabled:opacity-50  focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
+      <PaginationFirst class="w-9 h-9 flex items-center justify-center disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
         <Icon icon="radix-icons:double-arrow-left" />
       </PaginationFirst>
-      <PaginationPrev class="w-9 h-9  flex items-center justify-center mr-4  disabled:opacity-50  focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
+      <PaginationPrev class="w-9 h-9 flex items-center justify-center mr-4 disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
         <Icon icon="radix-icons:chevron-left" />
       </PaginationPrev>
       <template v-for="(page, index) in items">
         <PaginationListItem
           v-if="page.type === 'page'"
           :key="index"
-          class="w-9 h-9 border rounded  data-[selected]:bg-white data-[selected]:text-blackA11 hover:bg-white/10 transition focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"
+          class="w-9 h-9 border rounded data-[selected]:bg-white data-[selected]:text-blackA11 hover:bg-white/10 transition focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"
           :value="page.value"
         >
           {{ page.value }}
@@ -38,10 +38,10 @@ import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, Pa
           &#8230;
         </PaginationEllipsis>
       </template>
-      <PaginationNext class="w-9 h-9  flex items-center justify-center  ml-4 disabled:opacity-50  focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
+      <PaginationNext class="w-9 h-9 flex items-center justify-center ml-4 disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
         <Icon icon="radix-icons:chevron-right" />
       </PaginationNext>
-      <PaginationLast class="w-9 h-9  flex items-center justify-center disabled:opacity-50  focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
+      <PaginationLast class="w-9 h-9 flex items-center justify-center disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
         <Icon icon="radix-icons:double-arrow-right" />
       </PaginationLast>
     </PaginationList>

docs/content/components/combobox.md

@@ -137,6 +137,12 @@ The button that clears the search term.
 
 <!-- @include: @/meta/ComboboxCancel.md -->
 
+### Empty
+
+Shown when none of the items match the query.
+
+<!-- @include: @/meta/ComboboxEmpty.md -->
+
 ### Portal
 
 When used, portals the content part into the `body`.

docs/content/components/dialog.md

@@ -142,7 +142,7 @@ If you want to hide the title, wrap it inside our Visually Hidden utility like t
 
 An optional accessible description to be announced when the dialog is opened.
 
-If you want to hide the description, wrap it inside our Visually Hidden utility like this `<VisuallyHidden asChild>`. If you want to remove the description entirely, remove this part and pass `aria-describedby="undefined"` to `DialogContent`.
+If you want to hide the description, wrap it inside our Visually Hidden utility like this `<VisuallyHidden asChild>`. If you want to remove the description entirely, remove this part and pass `:aria-describedby="undefined"` to `DialogContent`.
 
 <!-- @include: @/meta/DialogDescription.md -->
 

docs/content/components/popover.md

@@ -3,7 +3,7 @@
 title: Popover
 description: Displays rich content in a portal, triggered by a button.
 name: popover
-aria: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal
+aria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 ---
 
 # Popover
@@ -322,7 +322,7 @@ import { PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPorta
 
 ## Accessibility
 
-Adheres to the [Dialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal).
+Adheres to the [Dialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
 
 ### Keyboard Interactions
 

docs/content/meta/StepperRoot.md

@@ -92,5 +92,15 @@
     'name': 'goToStep',
     'description': '<p>Go to a specific step</p>\n',
     'type': ''
+  },
+  {
+    'name': 'nextStep',
+    'description': '<p>Go to the next step</p>\n',
+    'type': ''
+  },
+  {
+    'name': 'prevStep',
+    'description': '<p>Go to the previous step</p>\n',
+    'type': ''
   }
 ]" />

docs/content/utilities/use-date-formatter.md

@@ -16,7 +16,7 @@ More information on the DateFormatter [here](https://react-spectrum.adobe.com/in
 ```vue
 <script setup lang="ts">
 import { type Ref, ref } from 'vue'
-import { CalendarDate, type DateValue } from '@internationalized/date'
+import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date'
 import { toDate, useDateFormatter } from 'radix-vue'
 
 const value = ref(new CalendarDate(1995, 8, 18)) as Ref<DateValue>

docs/content/utilities/use-id.md

@@ -5,6 +5,10 @@ description: Generate random id
 
 # useId
 
+::: warning Deprecated
+[Vue 3.5](https://blog.vuejs.org/posts/vue-3-5#useid) released an official client-server stable solution for `useId`.
+:::
+
 <Description>
 Generate random id
 </Description>

docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docs",
   "type": "module",
-  "version": "1.9.3",
+  "version": "1.9.6",
   "scripts": {
     "docs:dev": "vitepress dev",
     "docs:build": "vitepress build",

eslint.config.mjs

@@ -20,7 +20,7 @@ export default antfu(
       'no-console': 'warn',
       'import/first': 'off',
       'import/order': 'off',
-      'max-statements-per-line': ['error', { max: 2 }],
+      'style/max-statements-per-line': ['error', { max: 2 }],
       'vue/one-component-per-file': 'off',
       'unicorn/prefer-dom-node-text-content': 'off',
       'unicorn/prefer-number-properties': 'off',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "radix-vue",
-  "version": "1.9.3",
+  "version": "1.9.6",
   "private": true,
   "packageManager": "pnpm@9.4.0",
   "license": "MIT",
@@ -25,12 +25,12 @@
     "pub:release": "cd packages/radix-vue && pnpm pub:release"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.24.1",
+    "@antfu/eslint-config": "^2.27.3",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "bumpp": "^9.4.1",
-    "eslint": "^9.8.0",
-    "lint-staged": "^15.2.8",
+    "eslint": "^9.10.0",
+    "lint-staged": "^15.2.10",
     "pnpm": "^9.4.0",
     "rimraf": "^6.0.1",
     "simple-git-hooks": "^2.11.1",

packages/plugins/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plugins",
   "type": "module",
-  "version": "1.9.3",
+  "version": "1.9.6",
   "description": "Nuxt module for Radix Vue",
   "license": "MIT",
   "keywords": [

packages/radix-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "radix-vue",
   "type": "module",
-  "version": "1.9.3",
+  "version": "1.9.6",
   "description": "Vue port for Radix UI Primitives.",
   "author": "Radix Vue Contributors (https://github.com/radix-vue)",
   "license": "MIT",
@@ -108,20 +108,20 @@
   "devDependencies": {
     "@iconify/vue": "^4.1.2",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/node": "^20.14.9",
-    "@vitejs/plugin-vue": "^5.1.2",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitest/coverage-istanbul": "^2.1.1",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
-    "jsdom": "^24.1.1",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "^3.9.1",
-    "vitest": "^1.6.0",
+    "jsdom": "^25.0.1",
+    "vite": "^5.4.8",
+    "vite-plugin-dts": "^4.2.3",
+    "vitest": "^2.1.1",
     "vitest-axe": "0.1.0",
     "vitest-canvas-mock": "^0.3.3",
     "vue": "3.4.31",

packages/radix-vue/src/Checkbox/CheckboxRoot.vue

@@ -108,7 +108,7 @@ provideCheckboxRootContext({
     v-if="isFormControl"
     type="checkbox"
     tabindex="-1"
-    aria-hidden
+    aria-hidden="true"
     :value="value"
     :checked="!!checked"
     :name="props.name"

packages/radix-vue/src/Combobox/Combobox.test.ts

@@ -294,6 +294,19 @@ describe('given combobox in a form', async () => {
     props: { handleSubmit },
   })
 
+  const valueBox = wrapper.find('input')
+
+  let enterEventBubbledToForm = false
+
+  beforeEach(() => {
+    enterEventBubbledToForm = false
+    wrapper.find('form').element.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        enterEventBubbledToForm = true
+      }
+    })
+  })
+
   it('should have hidden input field', async () => {
     expect(wrapper.find('[type="hidden"]').exists()).toBe(true)
   })
@@ -327,6 +340,21 @@ describe('given combobox in a form', async () => {
       expect(handleSubmit.mock.results[1].value).toStrictEqual({ test: 'Pineapple' })
     })
   })
+
+  describe('after selecting an option via keyboard', () => {
+    beforeEach(async () => {
+      await valueBox.setValue('B')
+      await valueBox.trigger('keydown', { key: 'Enter' })
+    })
+
+    it('should show value correctly', () => {
+      expect((valueBox.element).value).toBe('Banana')
+    })
+
+    it('should bubble up the Enter keydown event to the form', () => {
+      expect(enterEventBubbledToForm).toBe(false)
+    })
+  })
 })
 
 describe('given a Combobox with 1,000 options', async () => {

packages/radix-vue/src/Combobox/ComboboxContentImpl.vue

@@ -59,7 +59,7 @@ const rootContext = injectComboboxRootContext()
 useBodyScrollLock(props.bodyLock)
 
 const { forwardRef, currentElement } = useForwardExpose()
-useHideOthers(currentElement)
+useHideOthers(rootContext.parentElement)
 
 const pickedProps = computed(() => {
   if (props.position === 'popper')

packages/radix-vue/src/Combobox/ComboboxItemIndicator.vue

@@ -20,7 +20,7 @@ const itemContext = injectComboboxItemContext()
 <template>
   <Primitive
     v-if="itemContext.isSelected.value"
-    aria-hidden
+    aria-hidden="true"
     v-bind="props"
   >
     <slot />

packages/radix-vue/src/Combobox/ComboboxRoot.vue

@@ -24,7 +24,7 @@ type ComboboxRootContext<T> = {
   inputElement: Ref<HTMLInputElement | undefined>
   onInputElementChange: (el: HTMLInputElement) => void
   onInputNavigation: (dir: 'up' | 'down' | 'home' | 'end') => void
-  onInputEnter: () => void
+  onInputEnter: (event: InputEvent) => void
   selectedValue: Ref<T | undefined>
   selectedElement: ComputedRef<HTMLElement | undefined>
   onSelectedValueChange: (val: T) => void
@@ -137,6 +137,9 @@ async function onOpenChange(val: boolean) {
       else
         selectedValue.value = modelValue.value as T
     }
+    // selectedElement is a computed value and is not yet fully resolved.
+    // We need to wait for it to finish processing at this point.
+    await nextTick()
     inputElement.value?.focus()
     scrollSelectedValueIntoView()
   }
@@ -233,7 +236,7 @@ function scrollSelectedValueIntoView() {
   // Find the highlighted element and scroll into view
   // We can put this in Item, but we avoid having too many watcher
   if (selectedElement.value instanceof Element)
-    selectedElement.value.scrollIntoView({ block: 'nearest' })
+    selectedElement.value?.scrollIntoView({ block: 'nearest' })
 }
 
 function focusOnSelectedElement() {
@@ -273,14 +276,21 @@ provideComboboxRootContext({
     else
       selectedValue.value = filteredOptions.value[val === 'up' ? index - 1 : index + 1]
 
+    await nextTick()
+    // selectedElement is a computed value and is not yet fully resolved.
+    // We need to wait for it to finish processing at this point.
     scrollSelectedValueIntoView()
     focusOnSelectedElement()
 
     nextTick(() => inputElement.value?.focus({ preventScroll: true }))
   },
-  onInputEnter: async () => {
-    if (filteredOptions.value.length && selectedValue.value && selectedElement.value instanceof Element)
+  onInputEnter: async (event) => {
+    if (filteredOptions.value.length && selectedValue.value && selectedElement.value instanceof Element) {
+      event.preventDefault()
+      event.stopPropagation()
+
       selectedElement.value?.click()
+    }
   },
   selectedValue,
   onSelectedValueChange: val => selectedValue.value = val as T,

packages/radix-vue/src/Combobox/ComboboxSeparator.vue

@@ -15,7 +15,7 @@ useForwardExpose()
 <template>
   <Primitive
     v-bind="props"
-    aria-hidden
+    aria-hidden="true"
   >
     <slot />
   </Primitive>