chore(deps): update react-aria to 1.4 (#4191)

* chore(deps): update react-aria * chore(deps): update react-aria to 1.4 * Create warm-ducks-battle.md * fix menu stories * fix overlay stories * fix label width of selectlist in stories * fix --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
marigold-ui · Oct 8, 2024 · 45fb3c4 · 45fb3c4
1 parent f18c8aa
commit 45fb3c4
Show file tree

Hide file tree

Showing 11 changed files with 1,025 additions and 991 deletions.
diff --git a/.changeset/warm-ducks-battle.md b/.changeset/warm-ducks-battle.md
@@ -0,0 +1,7 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+"@marigold/system": patch
+---
+
+chore(deps): update react-aria to 1.4
diff --git a/docs/content/components/collection/selectlist/selectlist.mdx b/docs/content/components/collection/selectlist/selectlist.mdx
@@ -29,12 +29,18 @@ import { SelectList } from '@marigold/components';
 
 This example shows the standard appearance for `SelectList` component.
 
-<ComponentDemo file="./selectlist-basic.demo.tsx" />
+<ComponentDemo disableLabelWidth file="./selectlist-basic.demo.tsx" />
 
 ### SelectList with single selection mode
 
-<ComponentDemo file="./selectlist-single-selection.demo.tsx" />
+<ComponentDemo
+  disableLabelWidth
+  file="./selectlist-single-selection.demo.tsx"
+/>
 
 ### SelectList with multiple selection mode
 
-<ComponentDemo file="./selectlist-multiple-selection.demo.tsx" />
+<ComponentDemo
+  disableLabelWidth
+  file="./selectlist-multiple-selection.demo.tsx"
+/>
diff --git a/docs/package.json b/docs/package.json
@@ -19,7 +19,7 @@
     "@marigold/theme-core": "workspace:*",
     "@marigold/theme-docs": "workspace:*",
     "@marigold/theme-preset": "workspace:*",
-    "@react-aria/i18n": "3.12.2",
+    "@react-aria/i18n": "3.12.3",
     "@tailwindcss/typography": "0.5.15",
     "@tanstack/react-query": "5.56.2",
     "@vercel/analytics": "1.3.1",
@@ -55,7 +55,7 @@
     "zx": "8.1.8"
   },
   "devDependencies": {
-    "@internationalized/date": "3.5.5",
+    "@internationalized/date": "3.5.6",
     "@types/node": "20.16.9",
     "@types/react": "18.3.9",
     "@types/react-dom": "18.3.0",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -23,29 +23,29 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@internationalized/date": "3.5.5",
+    "@internationalized/date": "3.5.6",
     "@marigold/icons": "workspace:*",
     "@marigold/system": "workspace:*",
     "@marigold/types": "workspace:*",
-    "@react-aria/accordion": "3.0.0-alpha.33",
-    "@react-aria/button": "3.9.8",
-    "@react-aria/calendar": "3.5.11",
-    "@react-aria/focus": "3.18.2",
-    "@react-aria/i18n": "3.12.2",
-    "@react-aria/interactions": "3.22.2",
-    "@react-aria/overlays": "3.23.2",
-    "@react-aria/selection": "3.19.3",
-    "@react-aria/ssr": "3.9.5",
-    "@react-aria/table": "3.15.3",
-    "@react-aria/utils": "3.25.2",
-    "@react-aria/visually-hidden": "3.8.15",
-    "@react-stately/collections": "3.10.9",
-    "@react-stately/data": "3.11.6",
-    "@react-stately/table": "3.12.2",
-    "@react-stately/tree": "3.8.4",
-    "@react-types/shared": "3.24.1",
-    "@react-types/table": "3.10.1",
-    "react-aria-components": "1.3.3"
+    "@react-aria/accordion": "3.0.0-alpha.34",
+    "@react-aria/button": "3.10.0",
+    "@react-aria/calendar": "3.5.12",
+    "@react-aria/focus": "3.18.3",
+    "@react-aria/i18n": "3.12.3",
+    "@react-aria/interactions": "3.22.3",
+    "@react-aria/overlays": "3.23.3",
+    "@react-aria/selection": "3.20.0",
+    "@react-aria/ssr": "3.9.6",
+    "@react-aria/table": "3.15.4",
+    "@react-aria/utils": "3.25.3",
+    "@react-aria/visually-hidden": "3.8.16",
+    "@react-stately/collections": "3.11.0",
+    "@react-stately/data": "3.11.7",
+    "@react-stately/table": "3.12.3",
+    "@react-stately/tree": "3.8.5",
+    "@react-types/shared": "3.25.0",
+    "@react-types/table": "3.10.2",
+    "react-aria-components": "1.4.0"
   },
   "peerDependencies": {
     "react": "18.x",

diff --git a/packages/components/src/Button/Button.test.tsx b/packages/components/src/Button/Button.test.tsx
@@ -41,15 +41,9 @@ test('supports base styling classes', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button).toMatchInlineSnapshot(`
-<button
-  class="items-center justify-center gap-[0.5ch] align-center flex disabled:bg-gray-600"
-  data-rac=""
-  type="button"
->
-  button
-</button>
-`);
+  expect(button.className).toMatchInlineSnapshot(
+    `"items-center justify-center gap-[0.5ch] align-center flex disabled:bg-gray-600"`
+  );
 });
 
 test('supports default size', () => {
@@ -72,15 +66,6 @@ test('accepts other variants', () => {
   const button = screen.getByText(/button/);
 
   expect(button).toHaveClass('text-secondary-800');
-  expect(button).toMatchInlineSnapshot(`
-<button
-  class="items-center justify-center gap-[0.5ch] align-center flex disabled:bg-gray-600 text-secondary-800"
-  data-rac=""
-  type="button"
->
-  button
-</button>
-`);
 });
 
 test('renders <button> element', () => {

diff --git a/packages/components/src/Menu/Menu.stories.tsx b/packages/components/src/Menu/Menu.stories.tsx
@@ -119,31 +119,31 @@ export const OnActionMenu: Story = {
 };
 
 export const SingleSelection: Story = {
-  render: args => {
-    const [selectedKeys, setSelected] = useState(new Set());
-    const selected = Array.from(selectedKeys);
+  render: () => {
+    const [selected, setSelected] = useState<Set<'left' | 'center' | 'right'>>(
+      new Set(['center'])
+    );
 
     return (
       <>
         <Menu
           label="Align"
           selectionMode="single"
-          selectedKeys={selectedKeys as Iterable<Key>}
-          onSelectionChange={key => setSelected(new Set(key))}
-          {...args}
+          selectedKeys={selected}
+          onSelectionChange={setSelected as any}
         >
           <Menu.Item id="left">Left</Menu.Item>
           <Menu.Item id="center">Center</Menu.Item>
           <Menu.Item id="right">Right</Menu.Item>
         </Menu>
-        <p>Current selection (controlled): {[selected]}</p>
+        <p>Current selection (controlled): {[...selected].join(', ')}</p>
       </>
     );
   },
 };
 
 export const MultiSelection: Story = {
-  render: args => {
+  render: () => {
     const [selectedKeys, setSelected] = useState(new Set());
     const selected = Array.from(selectedKeys);
 
@@ -154,7 +154,6 @@ export const MultiSelection: Story = {
           selectionMode="multiple"
           selectedKeys={selectedKeys as Iterable<Key>}
           onSelectionChange={key => setSelected(new Set(key))}
-          {...args}
         >
           <Menu.Item id="burger">🍔 Burger</Menu.Item>
           <Menu.Item id="pizza">🍕 Pizza</Menu.Item>

diff --git a/packages/components/src/Overlay/Overlay.stories.tsx b/packages/components/src/Overlay/Overlay.stories.tsx
@@ -19,7 +19,7 @@ const TestTray = forwardRef<HTMLDivElement, { open: boolean }>(
   ({ open }, ref) => {
     return (
       <>
-        <MenuTrigger>
+        <MenuTrigger isOpen={open}>
           <Button>Button</Button>
           <Popover ref={ref}>
             <Menu>

diff --git a/packages/components/src/SelectList/SelectList.stories.tsx b/packages/components/src/SelectList/SelectList.stories.tsx
@@ -5,6 +5,9 @@ import { SelectList } from './SelectList';
 
 const meta = {
   title: 'Components/SelectList',
+  parameters: {
+    disableLabelWidth: true,
+  },
   argTypes: {
     selectionMode: {
       control: {

diff --git a/packages/components/src/SelectList/SelectListItem.tsx b/packages/components/src/SelectList/SelectListItem.tsx
@@ -1,9 +1,8 @@
-import { Ref, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import type RAC from 'react-aria-components';
 import { GridListItem as SelectListItem } from 'react-aria-components';
 import { cn } from '@marigold/system';
 import { Checkbox } from '../Checkbox';
-import { FieldGroup } from '../FieldBase';
 import { useSelectListContext } from './Context';
 
 export interface SelectListItemProps
@@ -22,15 +21,11 @@ const _SelectListItem = forwardRef<HTMLDivElement, SelectListItemProps>(
           'items-center group-data-[layout=grid]/list:flex-row',
           classNames?.option
         )}
-        ref={ref as Ref<HTMLDivElement>}
+        ref={ref}
       >
         {({ selectionMode }) => (
           <>
-            {selectionMode === 'multiple' && (
-              <FieldGroup>
-                <Checkbox slot="selection" />
-              </FieldGroup>
-            )}
+            {selectionMode === 'multiple' && <Checkbox slot="selection" />}
             {children}
           </>
         )}

diff --git a/packages/system/package.json b/packages/system/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@marigold/types": "workspace:*",
-    "@react-aria/i18n": "3.12.2",
+    "@react-aria/i18n": "3.12.3",
     "class-variance-authority": "0.7.0",
     "deepmerge": "4.3.1",
     "react-fast-compare": "3.2.2",