@bspk/ui 1.1.34 → 1.3.0

package/src/components/SearchBar/SearchBar.tsx

@@ -1,14 +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 './search-bar.scss';
+import { useUIContext } from '-/hooks/useUIContext';
+import { useIds } from '-/utils/useIds';
+
+export type SearchOption = MenuListItem & { value: string };
 
-export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick<ListboxProps<T>, '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;
@@ -30,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.
          *
@@ -51,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
          *
@@ -63,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';
@@ -99,15 +101,14 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
  *     }
  *
  * @name SearchBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function SearchBar({
-    itemDisplayCount: itemCount,
-    items,
+export function SearchBar({
+    items: itemsProp,
     noResultsMessage,
     placeholder = 'Search',
     'aria-label': ariaLabel,
-    id: idProp,
+    value: idProp,
     inputRef,
     name,
     size = 'medium',
@@ -115,94 +116,104 @@ function SearchBar({
     value,
     onChange,
     disabled = false,
+    scrollLimit,
 }: SearchBarProps) {
     const id = useId(idProp);
 
-    const {
-        isOpen,
-        toggleProps: { onClick, onKeyDownCapture, ...triggerProps },
-        menuProps,
-        closeMenu,
-        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)}
-                    onClick={() => {
-                        if (items?.length) onClick();
-                    }}
-                    {...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
-                    innerRef={elements.setFloating}
-                    itemDisplayCount={itemCount}
-                    items={items}
-                    onChange={(selectedValues, event) => {
-                        event?.preventDefault();
-                        const item = items?.find((i) => i.value === selectedValues[0]);
-                        onSelect?.(item);
-                        onChange(item?.label || '');
-                        closeMenu();
+                    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);
                     }}
-                    {...menuProps}
+                    owner="search-bar"
+                    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>
         </>
     );
 }
 
-SearchBar.bspkName = 'SearchBar';
-
-export { SearchBar };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/SearchBar/SearchBarExample.tsx

@@ -1,19 +1,8 @@
-import { ComboboxItemProps } from '-/components/Combobox';
-import { ComponentExample } from '-/utils/demo';
-
 import { SearchBarProps } from '.';
+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} items={props.items || []} />;
+export const SearchBarExample: ComponentExample<SearchBarProps> = {
+    render: ({ props, Component }) => {
+        return <Component {...props} />;
     },
 };

package/src/components/SearchBar/search-bar.scss

@@ -1,7 +1,7 @@
 [data-bspk='search-bar'] {
     display: flex;
     width: 100%;
-    min-width: 300px;
+    min-width: 100px;
 }
 
 [data-bspk='no-items-found'] {

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,90 +1,9 @@
-import { Fragment } from 'react';
-
-import { ElementProps } from '-';
-import { Tooltip } from '-/components/Tooltip';
-import { useOptionIconsInvalid } from '-/hooks/useOptionIconsInvalid';
 import './segmented-control.scss';
+import { TabOption, TabList, TabListProps } from '-/components/TabList';
+import { ElementProps } from '-/types/common';
 
-export type SegmentedControlOption = {
-    /**
-     * The label of the option. This is the text that will be displayed on the option.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /** The value of the option. If not provided, the label will be used as the value. */
-    value?: string;
-    /**
-     * The the icon to display before the label.
-     *
-     * @type BspkIcon
-     */
-    icon?: React.ReactNode;
-    /**
-     * The icon to display before the label when the option is active.
-     *
-     * @type BspkIcon
-     */
-    iconActive?: React.ReactNode;
-};
-
-export type SegmentedControlProps = {
-    /**
-     * The options to display. Each option has a label and an optional leading icon.
-     *
-     * @example
-     *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<SegmentedControlOption>
-     * @required
-     */
-    options: SegmentedControlOption[];
-    /**
-     * The id of the selected option.
-     *
-     * @example
-     *     1;
-     *
-     * @required
-     */
-    value: SegmentedControlOption['value'];
-    /**
-     * The function to call when the option is clicked.
-     *
-     * @required
-     */
-    onChange: (value: SegmentedControlOption['value']) => void;
-    /**
-     * The size of the options.
-     *
-     * @default medium
-     */
-    size?: 'medium' | 'small';
-    /**
-     * The width of the options. If set to 'fill', the options will fill the width of the container. If set to 'hug',
-     * the options will be as wide as their content.
-     *
-     * @default hug
-     */
-    width?: 'fill' | 'hug';
-    /**
-     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
-     * ignored and labels are shown.
-     *
-     * @default true
-     */
-    showLabels?: boolean;
-};
+export type SegmentedControlOption = Omit<TabOption, 'badge'>;
+export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
 
 /**
  * Navigation tool that organizes content across different screens and views.
@@ -110,54 +29,29 @@ export type SegmentedControlProps = {
  *     }
  *
  * @name SegmentedControl
- * @phase DesignReview
+ * @phase UXReview
  */
-function SegmentedControl({
+export function SegmentedControl({
     onChange,
     value,
     size = 'medium',
-    options: optionsProp,
+    options,
     width = 'hug',
-    showLabels: showLabelsProp = true,
+    iconsOnly,
     ...containerProps
-}: ElementProps<SegmentedControlProps, 'div'>) {
-    const options = Array.isArray(optionsProp) ? optionsProp : [];
-    useOptionIconsInvalid(options);
-
-    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
-
+}: ElementProps<SegmentedControlProps, 'ul'>) {
     return (
-        <div {...containerProps} data-bspk="segmented-control" data-size={size} data-width={width}>
-            {options.map((item, index) => {
-                const isActive = item.value === value;
-                return (
-                    <Fragment key={item.value}>
-                        <Tooltip disabled={!hideLabels} label={item.label} placement="top">
-                            <button
-                                aria-label={item.label}
-                                data-first={index === 0 || undefined}
-                                data-last={index === options.length - 1 || undefined}
-                                data-selected={isActive || undefined}
-                                disabled={item.disabled || undefined}
-                                onClick={() => onChange(item.value || item.label)}
-                            >
-                                <span data-outer>
-                                    <span data-inner>
-                                        {(isActive && item.iconActive) || item.icon}
-                                        {!hideLabels && item.label}
-                                    </span>
-                                </span>
-                            </button>
-                        </Tooltip>
-                    </Fragment>
-                );
-            })}
-        </div>
+        <TabList
+            {...containerProps}
+            data-bspk="segmented-control"
+            iconsOnly={iconsOnly}
+            onChange={onChange}
+            options={options}
+            size={size}
+            value={value}
+            width={width}
+        />
     );
 }
 
-SegmentedControl.bspkName = 'SegmentedControl';
-
-export { SegmentedControl };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/SegmentedControl/SegmentedControlExample.tsx

@@ -4,37 +4,68 @@ import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
 import { SvgSquare } from '@bspk/icons/Square';
 import { SvgSquareFill } from '@bspk/icons/SquareFill';
 
-import { ComponentExample } from '-/utils/demo';
+import { SegmentedControlOption, SegmentedControlProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-import { SegmentedControlProps } from '.';
+const PRESET_OPTIONS: SegmentedControlOption[] = [
+    {
+        value: '1',
+        label: 'Option 1',
+        icon: <SvgDiamond />,
+        iconSelected: <SvgDiamondFill />,
+    },
+    {
+        value: '2',
+        label: 'Disabled 2',
+        disabled: true,
+        icon: <SvgCircle />,
+    },
+    {
+        value: '3',
+        label: 'Option 3',
+        icon: <SvgSquare />,
+        iconSelected: <SvgSquareFill />,
+    },
+];
 
-export const SegmentedControlExample: ComponentExample<SegmentedControlProps> = {
-    containerStyle: { width: '100%' },
-    presets: [
-        {
+export const presets: Preset<SegmentedControlProps>[] = [
+    {
+        label: 'With icons',
+        propState: {
+            options: PRESET_OPTIONS,
+            iconsOnly: undefined,
             label: 'With icons',
-            propState: {
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option 1',
-                        icon: <SvgDiamond />,
-                        iconActive: <SvgDiamondFill />,
-                    },
-                    {
-                        value: '2',
-                        label: 'Disabled 2',
-                        disabled: true,
-                        icon: <SvgCircle />,
-                    },
-                    {
-                        value: '3',
-                        label: 'Option 3',
-                        icon: <SvgSquare />,
-                        iconActive: <SvgSquareFill />,
-                    },
-                ],
-            },
+            value: '1',
+        },
+    },
+    {
+        label: 'Icons only',
+        propState: {
+            label: 'Icons only',
+            value: '1',
+            options: PRESET_OPTIONS,
+            iconsOnly: true,
+        },
+    },
+    {
+        label: 'Long label text',
+        propState: {
+            label: 'Long label text',
+            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,
 };