Merge branch 'main' into refactor/checkbox-358

.github/workflows/autofix.yml

@@ -24,6 +24,6 @@ jobs:
 
       - name: Fix lint issues
         run: npm run lint:fix
-      - uses: autofix-ci/action@d3e591514b99d0fca6779455ff8338516663f7cc
+      - uses: autofix-ci/action@bee19d72e71787c12ca0f29de72f2833e437e4c9
         with:
           commit-message: "fix: lint issues"

package.json

@@ -38,7 +38,7 @@
     "update:version": "esno scripts/update-version.ts"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^1.1.0",
+    "@antfu/eslint-config": "^2.1.0",
     "@clack/prompts": "^0.7.0",
     "@egoist/tailwindcss-icons": "^1.4.0",
     "@iconify-json/ph": "^1.1.6",
@@ -81,48 +81,48 @@
     "@oku-ui/use-composable": "workspace:^",
     "@oku-ui/utils": "workspace:^",
     "@oku-ui/visually-hidden": "workspace:^",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.5.2",
-    "@storybook/vue3-vite": "^7.5.2",
-    "@types/node": "^20.8.10",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@storybook/vue3": "^7.5.3",
+    "@storybook/vue3-vite": "^7.5.3",
+    "@types/node": "^20.10.0",
+    "@vitejs/plugin-vue": "^4.5.0",
     "@vitest/coverage-v8": "^0.34.6",
-    "@vue/test-utils": "^2.4.1",
+    "@vue/test-utils": "^2.4.2",
     "autoprefixer": "^10.4.16",
     "changelogen": "^0.5.5",
     "chokidar": "^3.5.3",
-    "chromatic": "^7.6.0",
-    "eslint": "^8.53.0",
+    "chromatic": "^9.1.0",
+    "eslint": "^8.54.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "esno": "^0.17.0",
-    "globby": "^13.2.2",
+    "esno": "^4.0.0",
+    "globby": "^14.0.0",
     "happy-dom": "^12.10.3",
     "jiti": "^1.21.0",
     "jsdom": "^22.1.0",
-    "lint-staged": "^15.0.2",
-    "nx": "^17.0.3",
+    "lint-staged": "^15.1.0",
+    "nx": "^17.1.3",
     "ofetch": "^1.3.3",
     "pathe": "^1.1.1",
     "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "simple-git-hooks": "^2.9.0",
-    "storybook": "^7.5.2",
+    "storybook": "^7.5.3",
     "storybook-dark-mode": "^3.0.1",
     "tailwindcss": "^3.3.5",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.2",
     "unbuild": "^2.0.0",
-    "vite": "4.5.0",
+    "vite": "5.0.2",
     "vite-plugin-dts": "^3.6.3",
     "vitest": "^0.34.6",
     "vitest-axe": "^1.0.0-pre.3",
-    "vue": "3.3.7"
+    "vue": "3.3.9"
   },
   "pnpm": {
     "overrides": {
@@ -165,9 +165,9 @@
       "@oku-ui/use-composable": "workspace:^",
       "@oku-ui/utils": "workspace:^",
       "@oku-ui/visually-hidden": "workspace:^",
-      "@vue/runtime-core": "3.3.7",
-      "vite": "4.5.0",
-      "vue": "3.3.7"
+      "@vue/runtime-core": "3.3.9",
+      "vite": "5.0.2",
+      "vue": "3.3.9"
     }
   },
   "simple-git-hooks": {

packages/components/dialog/src/dialogContentImpl.ts

@@ -122,15 +122,15 @@ const dialogContentImpl = defineComponent({
         }, slots),
       }),
       process.env.NODE_ENV !== 'production'
-        && h(Fragment, [
-          h(OkuDialogTitleWarning, {
-            titleId: inject.titleId.value,
-          }),
-          h(OkuDialogDescriptionWarning, {
-            contentRef: contentRef.value,
-            descriptionId: inject.descriptionId.value,
-          }),
-        ]),
+      && h(Fragment, [
+        h(OkuDialogTitleWarning, {
+          titleId: inject.titleId.value,
+        }),
+        h(OkuDialogDescriptionWarning, {
+          contentRef: contentRef.value,
+          descriptionId: inject.descriptionId.value,
+        }),
+      ]),
     ])
   },
 })

packages/components/switch/src/Switch.ts

@@ -146,7 +146,7 @@ const Switch = defineComponent({
     onMounted(() => {
       isFormControl.value = buttonRef.value
         ? typeof buttonRef.value.closest === 'function'
-          && Boolean(buttonRef.value.closest('form'))
+        && Boolean(buttonRef.value.closest('form'))
         : true
     })
 
@@ -204,16 +204,16 @@ const Switch = defineComponent({
         },
       ),
       isFormControl.value
-        && h(BubbleInput, {
-          control: buttonRef.value,
-          bubbles: !hasConsumerStoppedPropagationRef.value,
-          name: name.value,
-          value: switchValue.value,
-          checked: state.value,
-          required: required.value,
-          disabled: disabled.value,
-          style: { transform: 'translateX(-100%)' },
-        }),
+      && h(BubbleInput, {
+        control: buttonRef.value,
+        bubbles: !hasConsumerStoppedPropagationRef.value,
+        name: name.value,
+        value: switchValue.value,
+        checked: state.value,
+        required: required.value,
+        disabled: disabled.value,
+        style: { transform: 'translateX(-100%)' },
+      }),
     ]
 
     return originalReturn

packages/components/toast/src/toast-impl.ts

@@ -229,15 +229,15 @@ const toastImpl = defineComponent({
 
       return h(Fragment, [
         announceTextContent.value
-          && h(OkuToastAnnounce, {
-            'scope': props.scopeOkuToast,
-            // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
-            'role': 'status',
-            'aria-live': computed(() => type.value === 'foreground' ? 'assertive' : 'polite').value,
-            'aria-atomic': true,
-          }, {
-            default: () => announceTextContent.value,
-          }),
+        && h(OkuToastAnnounce, {
+          'scope': props.scopeOkuToast,
+          // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
+          'role': 'status',
+          'aria-live': computed(() => type.value === 'foreground' ? 'assertive' : 'polite').value,
+          'aria-atomic': true,
+        }, {
+          default: () => announceTextContent.value,
+        }),
 
         h(Teleport, { to: inject.viewport.value }, h(CollectionItemSlot, { scope: props.scopeOkuToast }, {
           default: () => h(OkuDismissableLayer, {

packages/core/arrow/src/arrow.ts

@@ -57,13 +57,13 @@ const arrow = defineComponent({
       height: height.value,
       viewBox: '0 0 30 10',
       preserveAspectRatio: 'none',
-    }, {
-      default: () => props.asChild
+    }, [
+      props.asChild
         ? slots.default?.()
         : h('polygon', {
           points: '0,0 30,0 15,10',
         }),
-    })
+    ])
   },
 })
 

packages/core/collection/src/collection.ts

@@ -117,9 +117,7 @@ export function createCollection<ItemElement extends HTMLElement, T = object>(na
         })
       })
 
-      return () => h(OkuSlot, { ref: composedRefs, ...{ [ITEM_DATA_ATTR]: '' } }, {
-        default: () => slots.default?.(),
-      })
+      return () => h(OkuSlot, { ref: composedRefs, ...{ [ITEM_DATA_ATTR]: '' } }, slots)
     },
   })
 

packages/core/dismissable-layer/src/DismissableLayer.ts

@@ -153,7 +153,7 @@ const DismissableLayer = defineComponent({
       onPointerdownCapture: composeEventHandlers<PointerdownCaptureEvent>((event) => {
         emit('pointerdownCapture', event)
       }, pointerdownOutside.onPointerdownCapture),
-    }, slots)
+    }, slots.default?.())
   },
 })
 

packages/core/dismissable-layer/src/DismissableLayerBranch.ts

@@ -35,7 +35,7 @@ const DismissableLayerBranch = defineComponent({
       ...attrs,
       ref: composedRefs,
       asChild: props.asChild,
-    }, slots)
+    }, slots.default?.())
   },
 })
 

packages/core/focus-scope/src/focus-scope.ts

@@ -290,9 +290,7 @@ const focusScope = defineComponent({
           onKeydown: handleKeydown,
           ref: composedRefs,
         },
-        {
-          default: () => slots.default?.(),
-        },
+        slots.default?.(),
       )
 
     return originalReturn

packages/core/menu/src/menu-anchor.ts

@@ -29,9 +29,7 @@ const menuAnchor = defineComponent({
       ...mergeProps(attrs, otherProps),
       ...popperScope,
       ref: forwardedRef,
-    }, {
-      default: () => slots.default?.(),
-    })
+    }, slots)
   },
 })
 

packages/core/menu/src/menu-group.ts

@@ -23,7 +23,7 @@ const menuGroup = defineComponent({
       ...mergeProps(attrs, otherProps),
       role: 'group',
       ref: forwardedRef,
-    }, slots)
+    }, slots.default?.())
   },
 })
 

packages/core/menu/src/menu-item-impl.ts

@@ -103,7 +103,7 @@ const menuItemImpl = defineComponent({
           'onBlur': composeEventHandlers<MenuItemImplEmits['blur'][0]>((event) => {
             emit('blur', event)
           }, () => isFocused.value = false),
-        }, slots),
+        }, slots.default?.()),
       }),
     })
   },

packages/core/menu/src/menu-item-indicator.ts

@@ -35,7 +35,7 @@ const menuItemIndicator = defineComponent({
         ...mergeProps(attrs, otherProps),
         'ref': forwardedRef,
         'data-state': getCheckedState(indicatorInject.checked.value),
-      }, slots),
+      }, slots.default?.()),
     })
   },
 })

packages/core/menu/src/menu-label.ts

@@ -25,7 +25,7 @@ const menuLabel = defineComponent({
     return () => h(Primitive.div, {
       ...mergeProps(attrs, otherProps),
       ref: forwardedRef,
-    }, slots)
+    }, slots.default?.())
   },
 })
 

packages/core/menu/src/menu-separator.ts

@@ -27,7 +27,7 @@ const menuSeparator = defineComponent({
       'aria-orientation': 'horizontal',
       ...mergeProps(attrs, otherProps),
       'ref': forwardedRef,
-    }, slots)
+    }, slots.default?.())
   },
 })
 

packages/core/popper/src/popperAnchor.ts

@@ -38,7 +38,7 @@ const popperAnchor = defineComponent({
             ...mergeProps(reactiveAnchorProps, attrs),
             ref: composedRefs,
           },
-          slots,
+          slots.default?.(),
         )
   },
 })

packages/core/popper/src/popperArrow.ts

@@ -62,9 +62,7 @@ const popperArrow = defineComponent({
               // ensures the element can be measured correctly (mostly for if SVG)
               display: 'block',
             },
-          }, {
-            default: () => slots.default?.(),
-          }),
+          }, slots),
         ],
       )
     return originalReturn

packages/core/popper/src/popperContent.ts

@@ -176,24 +176,22 @@ const PopperContent = defineComponent({
           ].join(' '),
         } as CSSStyleDeclaration,
         'dir': props.dir,
-      }, {
-        default: () => [
-          h(Primitive.div, {
-            'data-side': placedSide.value,
-            'data-align': placedAlign.value,
-            ...mergeProps(attrs, reactiveContentProps),
-            'ref': composedRefs,
-            'style': {
-              ...attrs.style as any,
-              // if the PopperContent hasn't been placed yet (not all measurements done)
-              // we prevent animations so that users's animation don't kick in too early referring wrong sides
-              animation: !isPositioned.value ? 'none' : undefined,
-              // hide the content if using the hide middleware and should be hidden
-              opacity: middlewareData.value.hide?.referenceHidden ? 0 : undefined,
-            },
-          }, slots),
-        ],
-      })
+      }, [
+        h(Primitive.div, {
+          'data-side': placedSide.value,
+          'data-align': placedAlign.value,
+          ...mergeProps(attrs, reactiveContentProps),
+          'ref': composedRefs,
+          'style': {
+            ...attrs.style as any,
+            // if the PopperContent hasn't been placed yet (not all measurements done)
+            // we prevent animations so that users's animation don't kick in too early referring wrong sides
+            animation: !isPositioned.value ? 'none' : undefined,
+            // hide the content if using the hide middleware and should be hidden
+            opacity: middlewareData.value.hide?.referenceHidden ? 0 : undefined,
+          },
+        }, slots.default?.()),
+      ])
   },
 })