chore(react): add overflow example to select

frameworks/react/src/components/select/examples/overflow.tsx

@@ -0,0 +1,78 @@
+import { Portal, Select } from '../..'
+
+const items = [
+  'Name 1',
+  'Name 2',
+  'Name 3',
+  'Name 4',
+  'Name 5',
+  'Name 6',
+  'Name 7',
+  'Name 8',
+  'Name 9',
+  'Name 10',
+  'Name 11',
+  'Name 12',
+  'Name 13',
+  'Name 14',
+]
+
+export const Overflow = () => {
+  return (
+    <main>
+      <h1>Welcome to Ark UI</h1>
+      <p>Please edit src/App.tsx and save to reload.</p>
+      <Select.Root
+        items={items}
+        positioning={{
+          fitViewport: true,
+          placement: 'bottom-start',
+          sameWidth: true,
+        }}
+      >
+        <Select.Label>Framework</Select.Label>
+        <Select.Control>
+          <Select.Trigger>
+            <Select.ValueText placeholder="Select a Framework" />
+          </Select.Trigger>
+          <Select.ClearTrigger>Clear</Select.ClearTrigger>
+        </Select.Control>
+        <Portal>
+          <Select.Positioner>
+            <Select.Content style={{ maxHeight: '120px', overflow: 'auto' }}>
+              <Select.ItemGroup>
+                <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
+                {items.map((item) => (
+                  <Select.Item
+                    key={item}
+                    item={item}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 2,
+                    }}
+                  >
+                    <Select.ItemContext>
+                      {(itemState) => (
+                        <Select.ItemText
+                          style={{
+                            flex: '1',
+                            fontSize: '16px',
+                            background: itemState.highlighted ? 'blue' : 'white',
+                          }}
+                        >
+                          {item}
+                        </Select.ItemText>
+                      )}
+                    </Select.ItemContext>
+                    <Select.ItemIndicator>✓</Select.ItemIndicator>
+                  </Select.Item>
+                ))}
+              </Select.ItemGroup>
+            </Select.Content>
+          </Select.Positioner>
+        </Portal>
+      </Select.Root>
+    </main>
+  )
+}

frameworks/react/src/components/select/select.stories.tsx

@@ -6,8 +6,9 @@ const meta: Meta = {
 
 export default meta
 
-export { Basic } from './examples/basic'
 export { Advanced } from './examples/advanced'
-export { Multiple } from './examples/multiple'
+export { Basic } from './examples/basic'
 export { Controlled } from './examples/controlled'
 export { FormLibrary } from './examples/form-library'
+export { Multiple } from './examples/multiple'
+export { Overflow } from './examples/overflow'