@bspk/ui 1.2.0 → 1.3.0

package/src/components/SearchBar/SearchBar.tsx

@@ -1,18 +1,16 @@
+import './search-bar.scss';
 import { SvgSearch } from '@bspk/icons/Search';
-import { useRef } from 'react';
-
-import { Listbox, ListboxProps, ListboxItemProps } from '-/components/Listbox';
+import { useEffect, useRef, useState } from 'react';
+import { ListItemMenu, ListItemMenuProps, MenuListItem } from '-/components/ListItemMenu';
 import { TextInputProps, TextInput } from '-/components/TextInput';
 import { Txt } from '-/components/Txt';
-import { useCombobox } from '-/hooks/useCombobox';
 import { useId } from '-/hooks/useId';
+import { useUIContext } from '-/hooks/useUIContext';
+import { useIds } from '-/utils/useIds';
 
-import './search-bar.scss';
+export type SearchOption = MenuListItem & { value: string };
 
-export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick<
-    ListboxProps<T>,
-    'itemCount' | 'itemDisplayCount'
-> &
+export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> &
     Pick<TextInputProps, 'aria-label' | 'disabled' | 'id' | 'inputRef' | 'name' | 'size'> & {
         /** The current value of the search bar. */
         value?: string;
@@ -34,10 +32,10 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
         /*
          * Handler for item selection.
          *
-         * @type (item: MenuItem) => void
+         * @type (item: MenuListItem) => void
          * @required
          */
-        onSelect: (item?: ListboxItemProps) => void;
+        onSelect: (item?: MenuListItem) => void;
         /**
          * Content to display in the menu.
          *
@@ -55,9 +53,9 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
          *         { value: '10', label: 'Jackfruit Pudding' },
          *     ];
          *
-         * @type Array<MenuItem>
+         * @type Array<SearchOption>
          */
-        items?: T[];
+        items?: SearchOption[];
         /**
          * Message to display when no results are found
          *
@@ -67,7 +65,7 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
     };
 
 /**
- * Component description coming soon.
+ * An input field that allows customers to input search queries and retrieve results.
  *
  * @example
  *     import { useState } from 'react';
@@ -106,106 +104,114 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
  * @phase UXReview
  */
 export function SearchBar({
-    items,
+    items: itemsProp,
     noResultsMessage,
     placeholder = 'Search',
     'aria-label': ariaLabel,
-    id: idProp,
+    value: idProp,
     inputRef,
-    itemCount,
-    itemDisplayCount,
     name,
     size = 'medium',
     onSelect,
     value,
     onChange,
     disabled = false,
+    scrollLimit,
 }: SearchBarProps) {
     const id = useId(idProp);
 
-    const {
-        isOpen,
-        toggleProps: { onClick, onKeyDownCapture, ...triggerProps },
-        menuProps,
-        closeMenu,
-        openMenu,
-        elements,
-    } = useCombobox({
-        placement: 'bottom-start',
-    });
+    const items = useIds(`search-bar-${id}`, itemsProp || []);
+
+    const inputElementRef = useRef<HTMLInputElement | null>(null);
+
+    const { sendAriaLiveMessage } = useUIContext();
+
+    useEffect(() => {
+        if (!items.length) sendAriaLiveMessage('No results found', 'assertive');
+    }, [items.length, sendAriaLiveMessage, value]);
+
+    const [textValue, setTextValue] = useState(value || '');
 
-    const inputRefLocal = useRef<HTMLInputElement | null>(null);
-    const containerRefLocal = useRef<HTMLDivElement | null>(null);
+    useEffect(() => {
+        setTextValue(items.find((item) => item.value === value)?.label || '');
+    }, [items, value]);
 
     return (
         <>
             <div data-bspk="search-bar">
-                <TextInput
-                    aria-label={ariaLabel}
-                    autoComplete="off"
-                    containerRef={(node) => {
-                        if (!node) return;
-                        containerRefLocal.current = node;
-                        elements.setReference(node);
+                <ListItemMenu
+                    arrowKeyNavigationCallback={(params) => {
+                        // maintain default behavior for arrow keys left/right
+                        return params.key !== 'ArrowLeft' && params.key !== 'ArrowRight';
                     }}
                     disabled={disabled}
-                    id={id}
-                    inputRef={(node) => {
-                        inputRef?.(node || null);
-                        inputRefLocal.current = node;
+                    itemOnClick={({ currentId, setShow }) => {
+                        const item = items.find((i) => i.id === currentId)!;
+                        onSelect(item);
+                        onChange(item.value);
+                        setTextValue(item.label);
+                        setShow(false);
                     }}
-                    leading={<SvgSearch />}
-                    name={name}
-                    onChange={(str) => {
-                        onChange(str);
-                        if (str.length) openMenu();
+                    items={items.map((item) => {
+                        return {
+                            ...item,
+                            'aria-selected': item.value === value,
+                        };
+                    })}
+                    label="Search bar"
+                    leading={
+                        !!value?.length &&
+                        !items?.length && (
+                            <div data-bspk="no-items-found">
+                                <Txt as="div" variant="heading-h5">
+                                    No results found
+                                </Txt>
+                                {noResultsMessage && (
+                                    <Txt as="div" variant="body-base">
+                                        {noResultsMessage}
+                                    </Txt>
+                                )}
+                            </div>
+                        )
+                    }
+                    onClose={() => {
+                        setTimeout(() => {
+                            if (!inputElementRef.current) return;
+                            inputElementRef.current.focus();
+                            inputElementRef.current.setSelectionRange(0, inputElementRef.current.value.length);
+                        }, 100);
                     }}
-                    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}
-                />
-            </div>
-            {isOpen && (
-                <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();
-                    }}
+                    role="listbox"
+                    scrollLimit={scrollLimit}
                 >
-                    {!!value?.length && !items?.length && (
-                        <div data-bspk="no-items-found">
-                            <Txt as="div" variant="heading-h5">
-                                No results found
-                            </Txt>
-                            {noResultsMessage && (
-                                <Txt as="div" variant="body-base">
-                                    {noResultsMessage}
-                                </Txt>
-                            )}
-                        </div>
+                    {(toggleProps, { setRef, toggleMenu }) => (
+                        <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;
+                                inputRef?.(node);
+                                inputElementRef.current = node;
+                            }}
+                            leading={<SvgSearch />}
+                            name={name}
+                            onChange={(str) => {
+                                setTextValue(str);
+                                if (str.length) toggleMenu(true);
+                            }}
+                            owner="search-bar"
+                            placeholder={placeholder}
+                            size={size}
+                            value={textValue}
+                        />
                     )}
-                </Listbox>
-            )}
+                </ListItemMenu>
+            </div>
         </>
     );
 }

package/src/components/SearchBar/SearchBarExample.tsx

@@ -1,25 +1,8 @@
 import { SearchBarProps } from '.';
-import { ComboboxItemProps } from '-/components/Combobox';
 import { ComponentExample } from '-/utils/demo';
 
-export const SearchBarExample: ComponentExample = {
-    render: ({ props: state, Component }) => {
-        const props = { ...state } as SearchBarProps;
-
-        const searchValue = (props.value as string | undefined)?.trim()?.toLowerCase() || '';
-
-        if (Array.isArray(props.items) && searchValue.length)
-            props.items = props.items?.filter((item: ComboboxItemProps) =>
-                item.label.toLowerCase().includes(searchValue),
-            );
-
-        return (
-            <Component
-                {...props}
-                itemCount={props.items?.length || undefined}
-                itemDisplayCount={props.items && props.items.length <= 7 ? props.items.length : 7}
-                items={props.items || []}
-            />
-        );
+export const SearchBarExample: ComponentExample<SearchBarProps> = {
+    render: ({ props, Component }) => {
+        return <Component {...props} />;
     },
 };

package/src/components/SegmentedControl/SegmentedControl.rtl.test.tsx

@@ -0,0 +1,26 @@
+import { SegmentedControl } from './SegmentedControl';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <SegmentedControl
+        label="Example label"
+        onChange={() => {}}
+        options={[
+            { value: '1', label: 'Option 1' },
+            { value: '2', label: 'Option 2' },
+            { value: '3', label: 'Option 3' },
+        ]}
+        value="1"
+    />
+);
+
+describe('SegmentedControl (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,10 +1,8 @@
+import './segmented-control.scss';
 import { TabOption, TabList, 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>;
 
 /**

package/src/components/SegmentedControl/SegmentedControlExample.tsx

@@ -5,7 +5,7 @@ import { SvgSquare } from '@bspk/icons/Square';
 import { SvgSquareFill } from '@bspk/icons/SquareFill';
 
 import { SegmentedControlOption, SegmentedControlProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
 
 const PRESET_OPTIONS: SegmentedControlOption[] = [
     {
@@ -28,34 +28,44 @@ const PRESET_OPTIONS: SegmentedControlOption[] = [
     },
 ];
 
-export const SegmentedControlExample: ComponentExample<SegmentedControlProps> = {
-    containerStyle: { width: '100%' },
-    defaultState: {
-        options: PRESET_OPTIONS,
-    },
-    presets: [
-        {
+export const presets: Preset<SegmentedControlProps>[] = [
+    {
+        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: ComponentExample<SegmentedControlProps> = {
+    containerStyle: { width: '100%', overflow: 'auto', alignItems: 'start' },
+    defaultState: {
+        options: PRESET_OPTIONS,
+    },
+    presets,
     variants: false,
 };

package/src/components/SegmentedControl/segmented-control.scss

@@ -17,6 +17,16 @@ ul[data-bspk='segmented-control'] {
         --padding: var(--spacing-sizing-05);
     }
 
+    %active {
+        background: var(--interactions-neutral-hover-opacity);
+
+        &[aria-selected='true'] {
+            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));
+        }
+    }
+
     li {
         color: var(--foreground-neutral-on-surface);
         padding: 0 var(--padding);
@@ -32,26 +42,15 @@ ul[data-bspk='segmented-control'] {
         }
 
         &:not([aria-disabled]) {
-            &[aria-selected] {
+            &[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);
             }
 
-            &[data-active],
-            // only show hover effect if no sibling is active
-            &:hover:not(:has(~ [data-active])) {
-                background: var(--interactions-neutral-hover-opacity);
-
-                &[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));
-                }
+            &:hover {
+                @extend %active;
             }
 
             &:active {
@@ -64,6 +63,12 @@ ul[data-bspk='segmented-control'] {
             cursor: not-allowed;
         }
     }
+
+    &:focus-within {
+        li:not([aria-disabled])[data-active] {
+            @extend %active;
+        }
+    }
 }
 
 // /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Select/Select.rtl.test.tsx

@@ -0,0 +1,25 @@
+import { Select } from './Select';
+import { presets } from './SelectExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const nonPresetProps = {
+    name: 'Example name',
+    onChange: () => {},
+    placeholder: 'Select an option',
+};
+
+describe('Select (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<Select {...preset.propState} {...nonPresetProps} />),
+        );
+    });
+
+    it('renders', () => {
+        const { queryByText } = render(<Select {...presets[0].propState} {...nonPresetProps} />);
+
+        expect(queryByText(nonPresetProps.placeholder)).toBeInTheDocument();
+    });
+});