[components] Fix Select component logic to support items use case

plone · Oct 14, 2024 · 2b9cad9 · 2b9cad9
1 parent a74ec0c
commit 2b9cad9
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 3,059 deletions.
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -18,7 +18,7 @@
     "@tanstack/react-query": "^5.37.1",
     "next": "14.2.2",
     "react": "^18",
-    "react-aria-components": "^1.1.1",
+    "react-aria-components": "^1.4.0",
     "react-dom": "^18"
   },
   "devDependencies": {

diff --git a/apps/vite-ssr/package.json b/apps/vite-ssr/package.json
@@ -25,7 +25,7 @@
     "axios": "^1.6.5",
     "get-port": "^7.0.0",
     "react": "^18.2.0",
-    "react-aria-components": "^1.1.1",
+    "react-aria-components": "^1.4.0",
     "react-dom": "^18.2.0",
     "sirv": "^2.0.4"
   },

diff --git a/apps/vite/package.json b/apps/vite/package.json
@@ -18,7 +18,7 @@
     "@tanstack/react-router": "^1.29.2",
     "axios": "^1.6.5",
     "react": "^18.2.0",
-    "react-aria-components": "^1.2.1",
+    "react-aria-components": "^1.4.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
@@ -51,14 +51,6 @@ export const Default: Story = {
  * Select renders options via render props `(item)=> React.ReactNode`
  */
 export const Items: Story = {
-  render: (args) => (
-    // @ts-ignore I assume this is a storybook bug when passing args
-    <Select {...args}>
-      {(item: SelectItemObject) => (
-        <SelectItem id={item.label}>{item.value}</SelectItem>
-      )}
-    </Select>
-  ),
   args: {
     name: 'field-empty',
     label: 'field 1 title',
@@ -81,14 +73,6 @@ export const Items: Story = {
 };
 
 export const LotsOfItems: Story = {
-  render: (args) => (
-    // @ts-ignore I assume this is a storybook bug when passing args
-    <Select {...args}>
-      {(item: SelectItemObject) => (
-        <SelectItem id={item.label}>{item.value}</SelectItem>
-      )}
-    </Select>
-  ),
   args: {
     name: 'field-empty',
     label: 'field 1 title',

diff --git a/packages/components/src/components/Select/Select.tsx b/packages/components/src/components/Select/Select.tsx
@@ -69,7 +69,15 @@ export function Select<T extends object>({
           {description && <Text slot="description">{description}</Text>}
           <FieldError>{errorMessage}</FieldError>
           <Popover {...popoverProps}>
-            <ListBox items={items}>{children}</ListBox>
+            {children ? (
+              <ListBox items={items}>{children}</ListBox>
+            ) : (
+              <ListBox items={items}>
+                {(item: SelectItemObject) => (
+                  <SelectItem id={item.label}>{item.value}</SelectItem>
+                )}
+              </ListBox>
+            )}
           </Popover>
         </>
       )}