@bspk/ui 1.3.2 → 1.3.4

package/src/components/SearchBar/SearchBar.tsx

@@ -1,19 +1,31 @@
 import './search-bar.scss';
 import { SvgSearch } from '@bspk/icons/Search';
-import { useEffect, useRef, useState } from 'react';
-import { ListItemMenu, ListItemMenuProps, MenuListItem } from '-/components/ListItemMenu';
-import { TextInputProps, TextInput } from '-/components/TextInput';
+import { useEffect, useMemo, useState } from 'react';
+import { InputProps, Input } from '-/components/Input';
+import { ListItem, ListItemProps } from '-/components/ListItem';
+import { Menu } from '-/components/Menu';
 import { Txt } from '-/components/Txt';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { useFloating } from '-/hooks/useFloating';
 import { useId } from '-/hooks/useId';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { useUIContext } from '-/hooks/useUIContext';
+import { FieldControlProps } from '-/types/common';
+import { getElementById } from '-/utils/dom';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
 import { useIds } from '-/utils/useIds';
 
-export type SearchOption = MenuListItem & { value: string };
+/**
+ * An option in a SearchBar component.
+ *
+ * Essentially the props for a ListItem.
+ */
+export type SearchBarOption = Pick<ListItemProps, 'label' | 'leading' | 'trailing'>;
 
-export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> &
-    Pick<TextInputProps, 'aria-label' | 'disabled' | 'id' | 'inputRef' | 'name' | 'size'> & {
-        /** The current value of the search bar. */
-        value?: string;
+export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = FieldControlProps<string, O> &
+    Pick<InputProps, 'inputRef' | 'size'> &
+    ScrollListItemsStyleProps & {
         /**
          * The placeholder of the field.
          *
@@ -22,40 +34,26 @@ export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> &
          * @required
          */
         placeholder: string;
-        /**
-         * Handler for state updates.
-         *
-         * @type (value: String) => void
-         * @required
-         */
-        onChange: (value: string) => void;
-        /*
-         * Handler for item selection.
-         *
-         * @type (item: MenuListItem) => void
-         * @required
-         */
-        onSelect: (item?: MenuListItem) => void;
         /**
          * Content to display in the menu.
          *
          * @example
          *     [
-         *         { value: '1', label: 'Apple Pie' },
-         *         { value: '2', label: 'Banana Split' },
-         *         { value: '3', label: 'Cherry Tart' },
-         *         { value: '4', label: 'Dragonfruit Sorbet' },
-         *         { value: '5', label: 'Elderberry Jam' },
-         *         { value: '6', label: 'Fig Newton' },
-         *         { value: '7', label: 'Grape Soda' },
-         *         { value: '8', label: 'Honeydew Smoothie' },
-         *         { value: '9', label: 'Ice Cream Sandwich' },
-         *         { value: '10', label: 'Jackfruit Pudding' },
+         *         { label: 'Apple Pie' },
+         *         { label: 'Banana Split' },
+         *         { label: 'Cherry Tart' },
+         *         { label: 'Dragonfruit Sorbet' },
+         *         { label: 'Elderberry Jam' },
+         *         { label: 'Fig Newton' },
+         *         { label: 'Grape Soda' },
+         *         { label: 'Honeydew Smoothie' },
+         *         { label: 'Ice Cream Sandwich' },
+         *         { label: 'Jackfruit Pudding' },
          *     ];
          *
-         * @type Array<SearchOption>
+         * @type Array<SearchBarOption>
          */
-        items?: SearchOption[];
+        items?: O[];
         /**
          * Message to display when no results are found
          *
@@ -71,31 +69,28 @@ export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> &
  *     import { useState } from 'react';
  *     import { SearchBar } from '@bspk/ui/SearchBar';
  *
- *     export function Example() {
- *         const [searchText, setSearchText] = useState<string>('');
- *
- *         const handleItemSelect = (item) => console.log('Selected item:', item);
+ *     function Example() {
+ *         const [searchText, setSearchText] = useState('');
  *
  *         return (
  *             <SearchBar
  *                 aria-label="Example aria-label"
  *                 items={[
- *                     { value: '1', label: 'Apple Pie' },
- *                     { value: '2', label: 'Banana Split' },
- *                     { value: '3', label: 'Cherry Tart' },
- *                     { value: '4', label: 'Dragonfruit Sorbet' },
- *                     { value: '5', label: 'Elderberry Jam' },
- *                     { value: '6', label: 'Fig Newton' },
- *                     { value: '7', label: 'Grape Soda' },
- *                     { value: '8', label: 'Honeydew Smoothie' },
- *                     { value: '9', label: 'Ice Cream Sandwich' },
- *                     { value: '10', label: 'Jackfruit Pudding' },
+ *                     { label: 'Apple Pie' },
+ *                     { label: 'Banana Split' },
+ *                     { label: 'Cherry Tart' },
+ *                     { label: 'Dragonfruit Sorbet' },
+ *                     { label: 'Elderberry Jam' },
+ *                     { label: 'Fig Newton' },
+ *                     { label: 'Grape Soda' },
+ *                     { label: 'Honeydew Smoothie' },
+ *                     { label: 'Ice Cream Sandwich' },
+ *                     { label: 'Jackfruit Pudding' },
  *                 ]}
- *                 name="Example name"
+ *                 name="example-name"
  *                 placeholder="Search"
  *                 value={searchText}
  *                 onChange={setSearchText}
- *                 onSelect={handleItemSelect}
  *             />
  *         );
  *     }
@@ -103,26 +98,30 @@ export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> &
  * @name SearchBar
  * @phase UXReview
  */
-export function SearchBar({
+export function SearchBar<O extends SearchBarOption>({
     items: itemsProp,
     noResultsMessage,
     placeholder = 'Search',
-    'aria-label': ariaLabel,
-    value: idProp,
+    id: idProp,
     inputRef,
     name,
     size = 'medium',
-    onSelect,
     value,
     onChange,
     disabled = false,
     scrollLimit,
-}: SearchBarProps) {
+}: SearchBarProps<O>) {
     const id = useId(idProp);
+    const menuId = `${id}-menu`;
 
     const items = useIds(`search-bar-${id}`, itemsProp || []);
 
-    const inputElementRef = useRef<HTMLInputElement | null>(null);
+    const [hasFocus, setHasFocus] = useState(false);
+
+    const filteredItems = useMemo(() => {
+        const valueStr = value?.toString().trim().toLowerCase() || '';
+        return items.filter((item) => !valueStr || item.label.toLowerCase().includes(valueStr));
+    }, [items, value]);
 
     const { sendAriaLiveMessage } = useUIContext();
 
@@ -130,88 +129,153 @@ export function SearchBar({
         if (!items.length) sendAriaLiveMessage('No results found', 'assertive');
     }, [items.length, sendAriaLiveMessage, value]);
 
-    const [textValue, setTextValue] = useState(value || '');
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: filteredItems.map((i) => i.id),
+    });
+
+    const closeMenu = () => setActiveElementId(null);
+    const open = Boolean(activeElementId);
+
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: true,
+    });
+
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: () => {
+            setHasFocus(false);
+            closeMenu();
+        },
+        disabled: !open,
+        handleTabs: true,
+    });
+
+    const spaceEnter = () => {
+        if (!open) {
+            elements.reference?.click();
+            return;
+        }
+        if (activeElementId) getElementById(activeElementId)?.click();
+    };
 
     useEffect(() => {
-        setTextValue(items.find((item) => item.value === value)?.label || '');
-    }, [items, value]);
+        if (!hasFocus) {
+            setActiveElementId(null);
+            return;
+        }
+
+        if (activeElementId) return;
+
+        // If we have focus but no active element, set the first item as active (if there is one)
+        if (filteredItems.length) {
+            setActiveElementId(value?.trim().length ? filteredItems[0].id : null);
+        }
+    }, [hasFocus, filteredItems, activeElementId, setActiveElementId, value]);
 
     return (
         <>
             <div data-bspk="search-bar">
-                <ListItemMenu
-                    arrowKeyNavigationCallback={(params) => {
-                        // maintain default behavior for arrow keys left/right
-                        return params.key !== 'ArrowLeft' && params.key !== 'ArrowRight';
-                    }}
+                <Input
+                    autoComplete="off"
+                    containerRef={elements.setReference}
                     disabled={disabled}
-                    itemOnClick={({ currentId, setShow }) => {
-                        const item = items.find((i) => i.id === currentId)!;
-                        onSelect(item);
-                        onChange(item.value);
-                        setTextValue(item.label);
-                        setShow(false);
+                    id={id}
+                    inputProps={{
+                        'aria-controls': open ? menuId : undefined,
+                        'aria-expanded': open,
+                        'aria-haspopup': 'listbox',
+                        'aria-activedescendant': activeElementId || undefined,
+                        'aria-autocomplete': 'list',
+                        role: 'combobox',
+                        spellCheck: 'false',
                     }}
-                    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);
+                    inputRef={(node) => {
+                        if (!node) return;
+                        inputRef?.(node);
                     }}
+                    leading={<SvgSearch />}
+                    name={name}
+                    onChange={(str) => onChange(str)}
+                    onFocus={() => setHasFocus(true)}
+                    onKeyDown={handleKeyDown(
+                        {
+                            ...arrowKeyCallbacks,
+                            ArrowDown: (event) => {
+                                if (!open) spaceEnter();
+                                arrowKeyCallbacks.ArrowDown?.(event);
+                            },
+                            Space: spaceEnter,
+                            Enter: spaceEnter,
+                            'Ctrl+Option+Space': spaceEnter,
+                        },
+                        { preventDefault: true, stopPropagation: true },
+                    )}
                     owner="search-bar"
-                    role="listbox"
-                    scrollLimit={scrollLimit}
-                >
-                    {(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);
+                    placeholder={placeholder}
+                    size={size}
+                    value={value}
+                />
+            </div>
+            <Menu
+                aria-autocomplete={undefined}
+                as="div"
+                id={menuId}
+                innerRef={elements.setFloating}
+                label="Search results"
+                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}
+            >
+                {!!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>
+                )}
+                {filteredItems.map((item) => {
+                    const isActive = activeElementId === item.id;
+                    const isSelected = value == item.label;
+
+                    return (
+                        <ListItem
+                            key={item.id}
+                            {...item}
+                            active={isActive || undefined}
+                            aria-label={undefined}
+                            aria-selected={isSelected}
+                            as="li"
+                            onClick={() => {
+                                onChange(item.label, item);
+                                closeMenu();
                             }}
-                            owner="search-bar"
-                            placeholder={placeholder}
-                            size={size}
-                            value={textValue}
+                            owner="select"
+                            role="option"
+                            tabIndex={-1} //show && isActive ? -1 : 0}
+                            value={undefined}
                         />
-                    )}
-                </ListItemMenu>
-            </div>
+                    );
+                })}
+            </Menu>
         </>
     );
 }

package/src/components/SearchBar/SearchBarExample.tsx

@@ -1,8 +1,9 @@
 import { SearchBarProps } from '.';
 import { ComponentExample } from '-/utils/demo';
+import { randomString } from '-/utils/random';
 
 export const SearchBarExample: ComponentExample<SearchBarProps> = {
     render: ({ props, Component }) => {
-        return <Component {...props} />;
+        return <Component {...props} id={`search-bar-${randomString(8)}`} />;
     },
 };

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -12,7 +12,7 @@ export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
  *     import { useState } from 'react';
  *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedOption, setSelectedOption] = useState<string>();
  *
  *         return (

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

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