@bspk/ui 1.2.0 → 1.3.1

package/dist/components/SearchBar/SearchBar.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './search-bar.css.js';
 import { SvgSearch } from '@bspk/icons/Search';
-import { useRef } from 'react';
-import { Listbox } from '../Listbox';
+import { useEffect, useRef, useState } from 'react';
+import { ListItemMenu } from '../ListItemMenu';
 import { TextInput } from '../TextInput';
 import { Txt } from '../Txt';
-import { useCombobox } from '../../hooks/useCombobox';
 import { useId } from '../../hooks/useId';
-import './search-bar.css.js';
+import { useUIContext } from '../../hooks/useUIContext';
+import { useIds } from '../../utils/useIds';
 /**
- * Component description coming soon.
+ * An input field that allows customers to input search queries and retrieve results.
  *
  * @example
  *     import { useState } from 'react';
@@ -46,39 +47,50 @@ import './search-bar.css.js';
  * @name SearchBar
  * @phase UXReview
  */
-export function SearchBar({ items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, itemCount, itemDisplayCount, name, size = 'medium', onSelect, value, onChange, disabled = false, }) {
+export function SearchBar({ items: itemsProp, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, value: idProp, inputRef, name, size = 'medium', onSelect, value, onChange, disabled = false, scrollLimit, }) {
     const id = useId(idProp);
-    const { isOpen, toggleProps: { onClick, onKeyDownCapture, ...triggerProps }, menuProps, closeMenu, openMenu, elements, } = useCombobox({
-        placement: 'bottom-start',
-    });
-    const inputRefLocal = useRef(null);
-    const containerRefLocal = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-bspk": "search-bar", children: _jsx(TextInput, { "aria-label": ariaLabel, autoComplete: "off", containerRef: (node) => {
+    const items = useIds(`search-bar-${id}`, itemsProp || []);
+    const inputElementRef = useRef(null);
+    const { sendAriaLiveMessage } = useUIContext();
+    useEffect(() => {
+        if (!items.length)
+            sendAriaLiveMessage('No results found', 'assertive');
+    }, [items.length, sendAriaLiveMessage, value]);
+    const [textValue, setTextValue] = useState(value || '');
+    useEffect(() => {
+        setTextValue(items.find((item) => item.value === value)?.label || '');
+    }, [items, value]);
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-bspk": "search-bar", children: _jsx(ListItemMenu, { arrowKeyNavigationCallback: (params) => {
+                    // maintain default behavior for arrow keys left/right
+                    return params.key !== 'ArrowLeft' && params.key !== 'ArrowRight';
+                }, disabled: disabled, itemOnClick: ({ currentId, setShow }) => {
+                    const item = items.find((i) => i.id === currentId);
+                    onSelect(item);
+                    onChange(item.value);
+                    setTextValue(item.label);
+                    setShow(false);
+                }, items: items.map((item) => {
+                    return {
+                        ...item,
+                        'aria-selected': item.value === value,
+                    };
+                }), label: "Search bar", leading: !!value?.length &&
+                    !items?.length && (_jsxs("div", { "data-bspk": "no-items-found", children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), noResultsMessage && (_jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage }))] })), onClose: () => {
+                    setTimeout(() => {
+                        if (!inputElementRef.current)
+                            return;
+                        inputElementRef.current.focus();
+                        inputElementRef.current.setSelectionRange(0, inputElementRef.current.value.length);
+                    }, 100);
+                }, owner: "search-bar", role: "listbox", scrollLimit: scrollLimit, children: (toggleProps, { setRef, toggleMenu }) => (_jsx(TextInput, { "aria-label": (items.length === 0 ? 'No results found' : '') + ariaLabel, autoComplete: "off", containerRef: setRef, disabled: disabled, id: id, inputProps: { ...toggleProps }, inputRef: (node) => {
                         if (!node)
                             return;
-                        containerRefLocal.current = node;
-                        elements.setReference(node);
-                    }, disabled: disabled, id: id, inputRef: (node) => {
-                        inputRef?.(node || null);
-                        inputRefLocal.current = node;
+                        inputRef?.(node);
+                        inputElementRef.current = node;
                     }, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => {
-                        onChange(str);
+                        setTextValue(str);
                         if (str.length)
-                            openMenu();
-                    }, onClick: onClick, owner: "search-bar", ...triggerProps, onKeyDownCapture: (event) => {
-                        const handled = onKeyDownCapture(event);
-                        if (handled) {
-                            inputRefLocal.current?.blur();
-                            containerRefLocal.current?.focus();
-                            return;
-                        }
-                        // inputRefLocal.current?.focus();
-                    }, placeholder: placeholder, size: size, value: value }) }), isOpen && (_jsx(Listbox, { ...menuProps, innerRef: elements.setFloating, itemCount: itemCount, itemDisplayCount: itemDisplayCount, items: items, onChange: (selectedValues, event) => {
-                    event?.preventDefault();
-                    const item = items?.find((i) => i.value === selectedValues[0]);
-                    onSelect?.(item);
-                    onChange(item?.label || '');
-                    closeMenu();
-                }, children: !!value?.length && !items?.length && (_jsxs("div", { "data-bspk": "no-items-found", children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), noResultsMessage && (_jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage }))] })) }))] }));
+                            toggleMenu(true);
+                    }, owner: "search-bar", placeholder: placeholder, size: size, value: textValue })) }) }) }));
 }
 //# sourceMappingURL=SearchBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"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"}

package/dist/components/SearchBar/SearchBarExample.d.ts

@@ -1,2 +1,3 @@
+import { SearchBarProps } from '.';
 import { ComponentExample } from '-/utils/demo';
-export declare const SearchBarExample: ComponentExample;
+export declare const SearchBarExample: ComponentExample<SearchBarProps>;

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"
@@ -76,7 +94,7 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'in
  *     }
  *
  * @name Select
- * @phase Dev
+ * @phase UXReview
  */
-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"
@@ -39,21 +45,87 @@ import './select.css.js';
  *     }
  *
  * @name Select
- * @phase Dev
+ * @phase UXReview
  */
-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 || readOnly || 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