@bspk/ui 1.2.0 → 1.3.0

package/dist/components/SearchBar/SearchBarExample.js

@@ -1,11 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SearchBarExample = {
-    render: ({ props: state, Component }) => {
-        const props = { ...state };
-        const searchValue = props.value?.trim()?.toLowerCase() || '';
-        if (Array.isArray(props.items) && searchValue.length)
-            props.items = props.items?.filter((item) => item.label.toLowerCase().includes(searchValue));
-        return (_jsx(Component, { ...props, itemCount: props.items?.length || undefined, itemDisplayCount: props.items && props.items.length <= 7 ? props.items.length : 7, items: props.items || [] }));
+    render: ({ props, Component }) => {
+        return _jsx(Component, { ...props });
     },
 };
 //# sourceMappingURL=SearchBarExample.js.map

package/dist/components/SearchBar/SearchBarExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarExample.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBarExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,gBAAgB,GAAqB;IAC9C,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,MAAM,KAAK,GAAG,EAAE,GAAG,KAAK,EAAoB,CAAC;QAE7C,MAAM,WAAW,GAAI,KAAK,CAAC,KAA4B,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAErF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM;YAChD,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAuB,EAAE,EAAE,CAC1D,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CACjD,CAAC;QAEN,OAAO,CACH,KAAC,SAAS,OACF,KAAK,EACT,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,IAAI,SAAS,EAC3C,gBAAgB,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EACjF,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GAC1B,CACL,CAAC;IACN,CAAC;CACJ,CAAC"}
+{"version":3,"file":"SearchBarExample.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBarExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;CACJ,CAAC"}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,7 +1,7 @@
+import './segmented-control.scss';
 import { TabOption, TabListProps } from '-/components/TabList';
 import { ElementProps } from '-/types/common';
-import './segmented-control.scss';
-export type SegmentedControlOption = Pick<TabOption, 'disabled' | 'icon' | 'iconSelected' | 'label' | 'value'>;
+export type SegmentedControlOption = Omit<TabOption, 'badge'>;
 export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
 /**
  * Navigation tool that organizes content across different screens and views.

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TabList } from '../TabList';
 import './segmented-control.css.js';
+import { TabList } from '../TabList';
 /**
  * Navigation tool that organizes content across different screens and views.
  *

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAGxE,OAAO,0BAA0B,CAAC;AAMlC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,EACT,GAAG,cAAc,EACuB;IACxC,OAAO,CACH,KAAC,OAAO,OACA,cAAc,eACR,mBAAmB,EAC7B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAa,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAMxE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,EACT,GAAG,cAAc,EACuB;IACxC,OAAO,CACH,KAAC,OAAO,OACA,cAAc,eACR,mBAAmB,EAC7B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC"}

package/dist/components/SegmentedControl/SegmentedControlExample.d.ts

@@ -1,3 +1,4 @@
 import { SegmentedControlProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<SegmentedControlProps>[];
 export declare const SegmentedControlExample: ComponentExample<SegmentedControlProps>;

package/dist/components/SegmentedControl/SegmentedControlExample.js

@@ -24,35 +24,44 @@ const PRESET_OPTIONS = [
         iconSelected: _jsx(SvgSquareFill, {}),
     },
 ];
-export const SegmentedControlExample = {
-    containerStyle: { width: '100%' },
-    defaultState: {
-        options: PRESET_OPTIONS,
-    },
-    presets: [
-        {
+export const presets = [
+    {
+        label: 'With icons',
+        propState: {
+            options: PRESET_OPTIONS,
+            iconsOnly: undefined,
             label: 'With icons',
-            propState: {
-                iconsOnly: undefined,
-            },
+            value: '1',
         },
-        {
+    },
+    {
+        label: 'Icons only',
+        propState: {
             label: 'Icons only',
-            propState: {
-                iconsOnly: true,
-            },
+            value: '1',
+            options: PRESET_OPTIONS,
+            iconsOnly: true,
         },
-        {
+    },
+    {
+        label: 'Long label text',
+        propState: {
             label: 'Long label text',
-            propState: {
-                iconsOnly: undefined,
-                options: PRESET_OPTIONS.map((option) => ({
-                    ...option,
-                    label: `${option.label} with a very long label text that should be truncated if it exceeds the width of the control`,
-                })),
-            },
+            value: '1',
+            iconsOnly: undefined,
+            options: PRESET_OPTIONS.map((option) => ({
+                ...option,
+                label: `${option.label} with a very long label text that should be truncated if it exceeds the width of the control`,
+            })),
         },
-    ],
+    },
+];
+export const SegmentedControlExample = {
+    containerStyle: { width: '100%', overflow: 'auto', alignItems: 'start' },
+    defaultState: {
+        options: PRESET_OPTIONS,
+    },
+    presets,
     variants: false,
 };
 //# sourceMappingURL=SegmentedControlExample.js.map

package/dist/components/SegmentedControl/SegmentedControlExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlExample.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControlExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAKvD,MAAM,cAAc,GAA6B;IAC7C;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,KAAC,UAAU,KAAG;QACpB,YAAY,EAAE,KAAC,cAAc,KAAG;KACnC;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,KAAC,SAAS,KAAG;KACtB;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,KAAC,SAAS,KAAG;QACnB,YAAY,EAAE,KAAC,aAAa,KAAG;KAClC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAA4C;IAC5E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE;QACV,OAAO,EAAE,cAAc;KAC1B;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,SAAS,EAAE,SAAS;aACvB;SACJ;QACD;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,SAAS,EAAE,IAAI;aAClB;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,SAAS,EAAE,SAAS;gBACpB,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;oBACrC,GAAG,MAAM;oBACT,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,8FAA8F;iBACvH,CAAC,CAAC;aACN;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC"}
+{"version":3,"file":"SegmentedControlExample.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControlExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAKvD,MAAM,cAAc,GAA6B;IAC7C;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,KAAC,UAAU,KAAG;QACpB,YAAY,EAAE,KAAC,cAAc,KAAG;KACnC;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,KAAC,SAAS,KAAG;KACtB;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,KAAC,SAAS,KAAG;QACnB,YAAY,EAAE,KAAC,aAAa,KAAG;KAClC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAoC;IACpD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE,SAAS;YACpB,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,GAAG;SACb;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE,IAAI;SAClB;KACJ;IACD;QACI,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE;YACP,KAAK,EAAE,iBAAiB;YACxB,KAAK,EAAE,GAAG;YACV,SAAS,EAAE,SAAS;YACpB,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;gBACrC,GAAG,MAAM;gBACT,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,8FAA8F;aACvH,CAAC,CAAC;SACN;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAA4C;IAC5E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE;IACxE,YAAY,EAAE;QACV,OAAO,EAAE,cAAc;KAC1B;IACD,OAAO;IACP,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/SegmentedControl/segmented-control.css

@@ -13,6 +13,12 @@ ul[data-bspk=segmented-control][data-size=small] {
 ul[data-bspk=segmented-control][data-size=large] {
   --padding: var(--spacing-sizing-05);
 }
+ul[data-bspk=segmented-control]:focus-within li:not([aria-disabled])[data-active], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover {
+  background: var(--interactions-neutral-hover-opacity);
+}
+ul[data-bspk=segmented-control]:focus-within li[aria-selected=true][data-active]:not([aria-disabled]), ul[data-bspk=segmented-control] li[aria-selected=true]:not([aria-disabled]):hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
 ul[data-bspk=segmented-control] li {
   color: var(--foreground-neutral-on-surface);
   padding: 0 var(--padding);
@@ -24,16 +30,10 @@ ul[data-bspk=segmented-control] li:has([data-icon]) {
 ul[data-bspk=segmented-control] li:has([data-icon]):has([data-label]) {
   padding-right: var(--padding);
 }
-ul[data-bspk=segmented-control] li:not([aria-disabled])[aria-selected] {
+ul[data-bspk=segmented-control] li:not([aria-disabled])[aria-selected=true] {
   background: var(--surface-neutral-t1-base);
   box-shadow: 0 0 1px 0 var(--shadow-variant-03), 0 1px 1px 0 var(--shadow-variant-05);
 }
-ul[data-bspk=segmented-control] li:not([aria-disabled])[data-active], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover:not(:has(~ [data-active])) {
-  background: var(--interactions-neutral-hover-opacity);
-}
-ul[data-bspk=segmented-control] li:not([aria-disabled])[data-active][aria-selected], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover:not(:has(~ [data-active]))[aria-selected] {
-  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-}
 ul[data-bspk=segmented-control] li:not([aria-disabled]):active {
   background: var(--interactions-neutral-press-opacity);
 }

package/dist/components/SegmentedControl/segmented-control.css.js

@@ -16,6 +16,12 @@ ul[data-bspk=segmented-control][data-size=small] {
 ul[data-bspk=segmented-control][data-size=large] {
   --padding: var(--spacing-sizing-05);
 }
+ul[data-bspk=segmented-control]:focus-within li:not([aria-disabled])[data-active], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover {
+  background: var(--interactions-neutral-hover-opacity);
+}
+ul[data-bspk=segmented-control]:focus-within li[aria-selected=true][data-active]:not([aria-disabled]), ul[data-bspk=segmented-control] li[aria-selected=true]:not([aria-disabled]):hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
 ul[data-bspk=segmented-control] li {
   color: var(--foreground-neutral-on-surface);
   padding: 0 var(--padding);
@@ -27,16 +33,10 @@ ul[data-bspk=segmented-control] li:has([data-icon]) {
 ul[data-bspk=segmented-control] li:has([data-icon]):has([data-label]) {
   padding-right: var(--padding);
 }
-ul[data-bspk=segmented-control] li:not([aria-disabled])[aria-selected] {
+ul[data-bspk=segmented-control] li:not([aria-disabled])[aria-selected=true] {
   background: var(--surface-neutral-t1-base);
   box-shadow: 0 0 1px 0 var(--shadow-variant-03), 0 1px 1px 0 var(--shadow-variant-05);
 }
-ul[data-bspk=segmented-control] li:not([aria-disabled])[data-active], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover:not(:has(~ [data-active])) {
-  background: var(--interactions-neutral-hover-opacity);
-}
-ul[data-bspk=segmented-control] li:not([aria-disabled])[data-active][aria-selected], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover:not(:has(~ [data-active]))[aria-selected] {
-  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-}
 ul[data-bspk=segmented-control] li:not([aria-disabled]):active {
   background: var(--interactions-neutral-press-opacity);
 }

package/dist/components/Select/Select.d.ts

@@ -1,46 +1,64 @@
-import { ComboboxProps } from '-/components/Combobox';
-import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
 import './select.scss';
-export type SelectOption = Record<string, unknown> & {
-    /** The value of the option. */
+import { KeyboardEvent, MouseEvent } from 'react';
+import { ListItemProps } from '-/components/ListItem';
+import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
+import { ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
+/**
+ * An option in a Select component.
+ *
+ * Essentially the props of ListItemProps. Except for `value` which is required.
+ */
+export type SelectOption = Omit<ListItemProps, 'id' | 'onClick' | 'subText' | 'value'> & {
     value: string;
-    /** The label of the option. This is the text that will be displayed on the option. */
-    label: string;
 };
-export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'invalid' | 'name' | 'size'> & FormFieldControlProps & Pick<ComboboxProps<T>, 'disabled' | 'id' | 'isMulti' | 'itemDisplayCount' | 'label' | 'onChange' | 'readOnly' | 'selectAll' | 'value'> & {
+export type SelectItem = SelectOption & {
+    id: string;
+};
+export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & FormFieldControlProps & ScrollListItemsStyleProps & {
     /**
      * Array of options to display in the select
      *
      * @example
      *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { value: '3', label: 'Option 3' },
-     *         { value: '4', label: 'Option 4' },
-     *         { value: '5', label: 'Option 5' },
-     *         { value: '6', label: 'Option 6' },
-     *         { value: '7', label: 'Option 7' },
-     *         { value: '8', label: 'Option 8' },
-     *         { value: '9', label: 'Option 9' },
-     *         { value: '10', label: 'Option 10' },
+     *         { id: '1', label: 'Option 1' },
+     *         { id: '2', label: 'Option 2' },
+     *         { id: '3', label: 'Option 3' },
+     *         { id: '4', label: 'Option 4' },
+     *         { id: '5', label: 'Option 5' },
+     *         { id: '6', label: 'Option 6' },
+     *         { id: '7', label: 'Option 7' },
+     *         { id: '8', label: 'Option 8' },
+     *         { id: '9', label: 'Option 9' },
+     *         { id: '10', label: 'Option 10' },
      *     ];
      *
      * @type Array<SelectOption>
      * @required
      */
-    options: T[];
+    options: SelectOption[];
+    /** Selected value */
+    value: string;
     /**
-     * Placeholder for the select
+     * The function to call when the selected values change.
      *
-     * @default Select one
+     * @example
+     *     (value, event) => setState({ value });
+     *
+     * @required
      */
-    placeholder?: string;
+    onChange: (value: string, event?: KeyboardEvent | MouseEvent) => void;
     /**
-     * The description for the select.
+     * The label for the select element, used for accessibility, and the dropdown modal header.
      *
-     * This is typically used to provide additional context or instructions for the user.
+     * @required
      */
-    description?: string;
+    label: string;
+    /**
+     * Placeholder for the select
+     *
+     * @default Select one
+     */
+    placeholder?: string;
 };
 /**
  * A field element that allows users to select one option from a list of available choices.
@@ -57,16 +75,16 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'in
  *                 name="example-select"
  *                 onChange={setSelected}
  *                 options={[
- *                     { value: '1', label: 'Option 1' },
- *                     { value: '2', label: 'Option 2' },
- *                     { value: '3', label: 'Option 3' },
- *                     { value: '4', label: 'Option 4' },
- *                     { value: '5', label: 'Option 5' },
- *                     { value: '6', label: 'Option 6' },
- *                     { value: '7', label: 'Option 7' },
- *                     { value: '8', label: 'Option 8' },
- *                     { value: '9', label: 'Option 9' },
- *                     { value: '10', label: 'Option 10' },
+ *                     { id: '1', label: 'Option 1' },
+ *                     { id: '2', label: 'Option 2' },
+ *                     { id: '3', label: 'Option 3' },
+ *                     { id: '4', label: 'Option 4' },
+ *                     { id: '5', label: 'Option 5' },
+ *                     { id: '6', label: 'Option 6' },
+ *                     { id: '7', label: 'Option 7' },
+ *                     { id: '8', label: 'Option 8' },
+ *                     { id: '9', label: 'Option 9' },
+ *                     { id: '10', label: 'Option 10' },
  *                 ]}
  *                 placeholder="Select an option"
  *                 size="medium"
@@ -78,5 +96,5 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'in
  * @name Select
  * @phase Dev
  */
-export declare function Select({ options, value: selected, onChange, label, placeholder, size, itemDisplayCount, disabled, id: propId, invalid, readOnly, name, isMulti, selectAll, description, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ options: optionsProp, value, onChange, label, placeholder, size, disabled, id: idProp, invalid, readOnly, name, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-labelledby': ariaLabelledBy, scrollLimit, ...props }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Select/Select.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import './select.css.js';
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { useMemo } from 'react';
-import { Combobox } from '../Combobox';
 import { ListItem } from '../ListItem';
+import { Menu } from '../Menu';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
+import { useFloating } from '../../hooks/useFloating';
 import { useId } from '../../hooks/useId';
-import './select.css.js';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { getElementById } from '../../utils/dom';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
 /**
  * A field element that allows users to select one option from a list of available choices.
  *
@@ -20,16 +26,16 @@ import './select.css.js';
  *                 name="example-select"
  *                 onChange={setSelected}
  *                 options={[
- *                     { value: '1', label: 'Option 1' },
- *                     { value: '2', label: 'Option 2' },
- *                     { value: '3', label: 'Option 3' },
- *                     { value: '4', label: 'Option 4' },
- *                     { value: '5', label: 'Option 5' },
- *                     { value: '6', label: 'Option 6' },
- *                     { value: '7', label: 'Option 7' },
- *                     { value: '8', label: 'Option 8' },
- *                     { value: '9', label: 'Option 9' },
- *                     { value: '10', label: 'Option 10' },
+ *                     { id: '1', label: 'Option 1' },
+ *                     { id: '2', label: 'Option 2' },
+ *                     { id: '3', label: 'Option 3' },
+ *                     { id: '4', label: 'Option 4' },
+ *                     { id: '5', label: 'Option 5' },
+ *                     { id: '6', label: 'Option 6' },
+ *                     { id: '7', label: 'Option 7' },
+ *                     { id: '8', label: 'Option 8' },
+ *                     { id: '9', label: 'Option 9' },
+ *                     { id: '10', label: 'Option 10' },
  *                 ]}
  *                 placeholder="Select an option"
  *                 size="medium"
@@ -41,19 +47,85 @@ import './select.css.js';
  * @name Select
  * @phase Dev
  */
-export function Select({ options = [], value: selected, onChange, label, placeholder = 'Select one', size = 'medium', itemDisplayCount = 5, disabled, id: propId, invalid, readOnly, name, isMulti, selectAll, description, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }) {
-    const id = useId(propId);
-    const selectedItem = useMemo(() => {
-        if (isMulti)
-            return {
-                label: `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`,
-                value: selected?.join(', ') || '',
-            };
-        return options.find((o) => o.value === selected?.[0]);
-    }, [isMulti, options, selected]);
-    return (_jsx(Combobox, { description: description || '', disabled: disabled, id: id, isMulti: isMulti, itemDisplayCount: itemDisplayCount, items: options, label: placeholder || label, onChange: onChange, readOnly: readOnly, selectAll: selectAll, value: selected || [], children: ({ setReference, toggleProps }) => (_jsxs(_Fragment, { children: [_jsx("input", { defaultValue: selected, name: name, type: "hidden" }), _jsxs("span", { ...props, ...toggleProps, "aria-describedby": ariaDescribedBy || undefined, "aria-disabled": disabled || readOnly, "aria-errormessage": ariaErrorMessage || undefined, "aria-label": label || selectedItem?.label || placeholder, "data-bspk": "select", "data-invalid": invalid || undefined, "data-size": size, id: id, ref: (node) => {
-                        if (node)
-                            setReference(node);
-                    }, children: [_jsx(ListItem, { "data-bspk-owner": "select", "data-placeholder": !selectedItem || undefined, label: selectedItem?.label || placeholder, owner: "select", readOnly: true }), _jsx("span", { "data-icon": true, children: _jsx(SvgChevronRight, {}) })] })] })) }));
+export function Select({ options: optionsProp = [], value = '', onChange, label, placeholder = 'Select one', size = 'medium', disabled, id: idProp, invalid, readOnly, name, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-labelledby': ariaLabelledBy, scrollLimit, ...props }) {
+    const id = useId(idProp);
+    const menuId = useMemo(() => `${id}-menu`, [id]);
+    const { items, availableItems } = useMemo(() => {
+        const nextItems = optionsProp.map((item, index) => ({
+            ...item,
+            id: `${id}-item-${index}`,
+            'aria-label': item.label,
+            'aria-selected': value.includes(item.value),
+        }));
+        return { items: nextItems, availableItems: nextItems.filter((item) => !item.disabled) };
+    }, [optionsProp, id, value]);
+    const closeMenu = () => {
+        setActiveElementId(null);
+    };
+    const selectedItem = useMemo(() => items.find((o) => o.value === value?.[0]), [items, value]);
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: availableItems.map((i) => i.id),
+    });
+    const open = Boolean(activeElementId);
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: true,
+    });
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: closeMenu,
+        disabled: !open,
+    });
+    const spaceEnter = () => {
+        if (!open) {
+            elements.reference?.click();
+            return;
+        }
+        if (activeElementId)
+            getElementById(activeElementId)?.click();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: value }), !ariaLabelledBy && (_jsx("div", { "data-sr-only": true, id: `${id}-label`, children: label })), _jsxs("button", { ...props, "aria-activedescendant": activeElementId || undefined, "aria-autocomplete": "list", "aria-controls": activeElementId ? menuId : undefined, "aria-describedby": ariaDescribedBy || undefined, "aria-disabled": disabled || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-labelledby": ariaLabelledBy || `${id}-label`, "aria-readonly": readOnly || undefined, "data-bspk": "select", "data-invalid": invalid || undefined, "data-open": open || undefined, "data-size": size, id: id, onBlur: (event) => {
+                    const targetOutsideOfMenu = event.relatedTarget && !elements.floating?.contains(event.relatedTarget);
+                    if (targetOutsideOfMenu)
+                        closeMenu();
+                }, onClick: () => {
+                    if (disabled || readOnly || !items.length)
+                        return;
+                    if (!open) {
+                        const nextActiveId = selectedItem?.id || items[0].id;
+                        setActiveElementId(nextActiveId);
+                        return;
+                    }
+                    closeMenu();
+                }, onKeyDown: handleKeyDown({
+                    ...arrowKeyCallbacks,
+                    ArrowDown: (event) => {
+                        if (!open)
+                            spaceEnter();
+                        arrowKeyCallbacks.ArrowDown?.(event);
+                    },
+                    Space: spaceEnter,
+                    Enter: spaceEnter,
+                    'Ctrl+Option+Space': spaceEnter,
+                }, { preventDefault: true, stopPropagation: true }), ref: elements.setReference, role: "combobox", tabIndex: 0, type: "button", children: [_jsx(ListItem, { as: "span", "data-bspk-owner": "select", "data-placeholder": !selectedItem || undefined, id: `${id}-selected-value`, label: selectedItem?.label || placeholder, leading: selectedItem?.leading, onClick: undefined, owner: "select", trailing: selectedItem?.trailing }), _jsx(SvgKeyboardArrowDown, {})] }), _jsx(Menu, { "aria-autocomplete": undefined, "aria-label": label, as: "div", id: menuId, innerRef: elements.setFloating, label: label, onClickCapture: () => {
+                    // Prevent the menu from closing when clicking inside it
+                    // maintain focus on the select control
+                    elements.reference?.focus();
+                }, onFocus: () => {
+                    elements.reference?.focus();
+                }, owner: "select", role: "listbox", style: {
+                    ...(open ? scrollListItemsStyle(scrollLimit, items.length) : {}),
+                    ...floatingStyles,
+                }, tabIndex: -1, children: items.map((item) => {
+                    const isActive = activeElementId === item.id;
+                    const isSelected = value.includes(item.value);
+                    return (_jsx(ListItem, { ...item, active: isActive || undefined, "aria-label": undefined, "aria-selected": isSelected, as: "li", onClick: () => {
+                            if (item.disabled || item.readOnly)
+                                return;
+                            onChange(item.value);
+                            closeMenu();
+                        }, owner: "select", role: "option", tabIndex: -1, value: undefined }, item.id));
+                }) })] }));
 }
 //# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAiB,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,OAAO,eAAe,CAAC;AAkDvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,YAAY,EAC1B,IAAI,GAAG,QAAQ,EACf,gBAAgB,GAAG,CAAC,EACpB,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,WAAW,EACX,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,GAAG,KAAK,EAC0B;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,YAAY,GAA6B,OAAO,CAAC,GAAG,EAAE;QACxD,IAAI,OAAO;YACP,OAAO;gBACH,KAAK,EAAE,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;gBACrF,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;aACpC,CAAC;QAEN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEjC,OAAO,CACH,KAAC,QAAQ,IACL,WAAW,EAAE,WAAW,IAAI,EAAE,EAC9B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,OAAO,EACd,KAAK,EAAE,WAAW,IAAI,KAAK,EAC3B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,QAAQ,IAAI,EAAE,YAEpB,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAChC,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,mBACQ,KAAK,KACL,WAAW,sBACG,eAAe,IAAI,SAAS,mBAC/B,QAAQ,IAAI,QAAQ,uBAChB,gBAAgB,IAAI,SAAS,gBACpC,KAAK,IAAI,YAAY,EAAE,KAAK,IAAI,WAAW,eAC7C,QAAQ,kBACJ,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACV,IAAI,IAAI;4BAAE,YAAY,CAAC,IAAI,CAAC,CAAC;oBACjC,CAAC,aAED,KAAC,QAAQ,uBACW,QAAQ,sBACN,CAAC,YAAY,IAAI,SAAS,EAC5C,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,WAAW,EACzC,KAAK,EAAC,QAAQ,EACd,QAAQ,SACV,EACF,4CACI,KAAC,eAAe,KAAG,GAChB,IACJ,IACR,CACN,GACM,CACd,CAAC;AACN,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/SelectExample.d.ts

@@ -1,3 +1,4 @@
 import { SelectProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<SelectProps>[];
 export declare const SelectExample: ComponentExample<SelectProps>;