@bspk/ui 1.2.0 → 1.3.0

package/src/components/Select/Select.tsx

@@ -1,59 +1,73 @@
-import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-import { useMemo } from 'react';
-
-import { Combobox, ComboboxProps } from '-/components/Combobox';
-import { ListItem } from '-/components/ListItem';
+import './select.scss';
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { useMemo, KeyboardEvent, MouseEvent } from 'react';
+import { ListItem, ListItemProps } from '-/components/ListItem';
+import { Menu } from '-/components/Menu';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { useFloating } from '-/hooks/useFloating';
 import { useId } from '-/hooks/useId';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
+import { getElementById } from '-/utils/dom';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
 
-import './select.scss';
+/**
+ * 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 };
 
-export type SelectOption = Record<string, unknown> & {
-    /** The value of the option. */
-    value: string;
-    /** The label of the option. This is the text that will be displayed on the option. */
-    label: string;
-};
+export type SelectItem = SelectOption & { id: string };
 
-export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'invalid' | 'name' | 'size'> &
+export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> &
     FormFieldControlProps &
-    Pick<
-        ComboboxProps<T>,
-        'disabled' | 'id' | 'isMulti' | 'itemDisplayCount' | 'label' | 'onChange' | 'readOnly' | 'selectAll' | 'value'
-    > & {
+    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
+         */
+        label: string;
+        /**
+         * Placeholder for the select
+         *
+         * @default Select one
          */
-        description?: string;
+        placeholder?: string;
     };
 
 /**
@@ -71,16 +85,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"
@@ -93,83 +107,196 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'in
  * @phase Dev
  */
 export function Select({
-    options = [],
-    value: selected,
+    options: optionsProp = [],
+    value = '',
     onChange,
     label,
     placeholder = 'Select one',
     size = 'medium',
-    itemDisplayCount = 5,
     disabled,
-    id: propId,
+    id: idProp,
     invalid,
     readOnly,
     name,
-    isMulti,
-    selectAll,
-    description,
     'aria-describedby': ariaDescribedBy,
     'aria-errormessage': ariaErrorMessage,
+    'aria-labelledby': ariaLabelledBy,
+    scrollLimit,
     ...props
 }: ElementProps<SelectProps, 'button'>) {
-    const id = useId(propId);
+    const id = useId(idProp);
+    const menuId = useMemo(() => `${id}-menu`, [id]);
+
+    const { items, availableItems } = useMemo(() => {
+        const nextItems = optionsProp.map(
+            (item, index): SelectItem => ({
+                ...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(
+        (): SelectItem | undefined => 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 selectedItem: SelectOption | undefined = useMemo(() => {
-        if (isMulti)
-            return {
-                label: `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`,
-                value: selected?.join(', ') || '',
-            };
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: true,
+    });
 
-        return options.find((o) => o.value === selected?.[0]);
-    }, [isMulti, options, selected]);
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: closeMenu,
+        disabled: !open,
+    });
+
+    const spaceEnter = () => {
+        if (!open) {
+            elements.reference?.click();
+            return;
+        }
+
+        if (activeElementId) getElementById(activeElementId)?.click();
+    };
 
     return (
-        <Combobox
-            description={description || ''}
-            disabled={disabled}
-            id={id}
-            isMulti={isMulti}
-            itemDisplayCount={itemDisplayCount}
-            items={options}
-            label={placeholder || label}
-            onChange={onChange}
-            readOnly={readOnly}
-            selectAll={selectAll}
-            value={selected || []}
-        >
-            {({ setReference, toggleProps }) => (
-                <>
-                    <input defaultValue={selected} name={name} type="hidden" />
-                    <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);
-                        }}
-                    >
+        <>
+            <input name={name} type="hidden" value={value} />
+            {!ariaLabelledBy && (
+                <div data-sr-only id={`${id}-label`}>
+                    {label}
+                </div>
+            )}
+            <button
+                {...props}
+                aria-activedescendant={activeElementId || undefined}
+                aria-autocomplete="list"
+                aria-controls={activeElementId ? menuId : undefined}
+                aria-describedby={ariaDescribedBy || undefined}
+                aria-disabled={disabled || undefined}
+                aria-errormessage={ariaErrorMessage || undefined}
+                aria-expanded={open}
+                aria-haspopup="listbox"
+                aria-labelledby={ariaLabelledBy || `${id}-label`}
+                aria-readonly={readOnly || undefined}
+                data-bspk="select"
+                data-invalid={invalid || undefined}
+                data-open={open || undefined}
+                data-size={size}
+                id={id}
+                onBlur={(event) => {
+                    const targetOutsideOfMenu =
+                        event.relatedTarget && !elements.floating?.contains(event.relatedTarget as Element);
+                    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"
+            >
+                <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}
+                />
+                <SvgKeyboardArrowDown />
+            </button>
+            <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}
+            >
+                {items.map((item) => {
+                    const isActive = activeElementId === item.id;
+                    const isSelected = value.includes(item.value);
+
+                    return (
                         <ListItem
-                            data-bspk-owner="select"
-                            data-placeholder={!selectedItem || undefined}
-                            label={selectedItem?.label || placeholder}
+                            key={item.id}
+                            {...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"
-                            readOnly
+                            role="option"
+                            tabIndex={-1} //show && isActive ? -1 : 0}
+                            value={undefined}
                         />
-                        <span data-icon>
-                            <SvgChevronRight />
-                        </span>
-                    </span>
-                </>
-            )}
-        </Combobox>
+                    );
+                })}
+            </Menu>
+        </>
     );
 }
 

package/src/components/Select/SelectExample.tsx

@@ -2,15 +2,14 @@ import { SelectProps } from '.';
 import { Avatar } from '-/components/Avatar';
 import { Tag } from '-/components/Tag';
 import { Txt } from '-/components/Txt';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-const trailingPrice = (price: number) => (
+const TrailingPrice = ({ price }: { price: number }) => (
     <Txt>{`${new Intl.NumberFormat('en-US', {
         style: 'currency',
         currency: 'USD',
     }).format(price / 100)}`}</Txt>
 );
-
 const DEFAULT_OPTIONS = [
     { value: '1', label: 'Option 1' },
     { value: '2', label: 'Option 2' },
@@ -24,98 +23,119 @@ const DEFAULT_OPTIONS = [
     { value: '10', label: 'Option 10' },
 ];
 
-export const SelectExample: ComponentExample<SelectProps> = {
-    defaultState: {
-        label: 'Demo Select',
-        options: DEFAULT_OPTIONS,
-    },
-    presets: [
-        {
-            label: 'Simple',
-            propState: { isMulti: false },
-        },
-        {
-            label: 'Multi',
-            propState: { isMulti: true },
+export const presets: Preset<SelectProps>[] = [
+    {
+        label: 'Simple',
+        propState: {
+            label: 'Demo Select',
+            options: DEFAULT_OPTIONS,
+
+            name: 'demo-select',
+            value: '',
         },
-        {
-            label: 'Long text',
-            propState: {
-                isMulti: false,
-                options: [
-                    { value: '1', label: 'This is a very long option that should truncate' },
-                    { value: '2', label: 'This is another long option that should truncate' },
-                    { value: '3', label: 'Short option' },
-                    { value: '4', label: 'Another short option' },
-                ],
-            },
+    },
+    {
+        label: 'Long text',
+        propState: {
+            label: 'Demo Select',
+
+            options: [
+                { value: '1', label: 'This is a very long option that should truncate' },
+                { value: '2', label: 'This is another long option that should truncate' },
+                { value: '3', label: 'Short option' },
+                { value: '4', label: 'Another short option' },
+            ],
+            name: 'demo-select-long',
+            value: '',
         },
-        {
-            label: 'Trailing Tags',
-            propState: {
-                isMulti: false,
-                options: [
-                    //
-                    {
-                        value: 'a',
-                        label: 'Package A',
-                        trailing: <Tag color="blue" label="Recommended" size="x-small" />,
-                    },
-                    {
-                        value: 'b',
-                        label: 'Package B',
-                        trailing: <Tag color="green" label="Best Value" size="x-small" />,
-                    },
-                    { value: 'c', label: 'Package C' },
-                    { value: 'd', label: 'Package D' },
-                ],
-            },
+    },
+    {
+        label: 'Trailing Tags',
+        propState: {
+            label: 'Demo Select',
+
+            options: [
+                //
+                {
+                    value: 'a',
+                    label: 'Package A',
+                    trailing: <Tag color="blue" label="Recommended" size="x-small" />,
+                },
+                {
+                    value: 'b',
+                    label: 'Package B',
+                    trailing: <Tag color="green" label="Best Value" size="x-small" />,
+                },
+                { value: 'c', label: 'Package C' },
+                { value: 'd', label: 'Package D' },
+            ],
+            name: 'demo-select-tags',
+            value: 'a',
         },
-        {
-            label: 'Trailing Text',
-            propState: {
-                isMulti: false,
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option A',
-                        trailing: trailingPrice(400),
-                    },
-                    { value: '2', label: 'Option B', trailing: trailingPrice(1000) },
-                    { value: '3', label: 'Option C', trailing: trailingPrice(1600) },
-                    { value: '4', label: 'Option D', trailing: trailingPrice(2000) },
-                ],
-            },
+    },
+    {
+        label: 'Trailing Text',
+        propState: {
+            label: 'Demo Select',
+
+            options: [
+                {
+                    value: '1',
+                    label: 'Option A',
+                    trailing: <TrailingPrice price={400} />,
+                },
+                { value: '2', label: 'Option B', trailing: <TrailingPrice price={1000} /> },
+                { value: '3', label: 'Option C', trailing: <TrailingPrice price={1600} /> },
+                { value: '4', label: 'Option D', trailing: <TrailingPrice price={2000} /> },
+            ],
+            name: 'demo-select-trailing',
+            value: '',
         },
-        {
-            label: 'Leading Avatar',
-            propState: {
-                isMulti: false,
-                options: [
-                    //
-                    {
-                        value: 'Jessica',
-                        label: 'Jessica P.',
-                        leading: <Avatar name="Jessica P." size="small" />,
-                    },
-                    {
-                        value: 'Louis',
-                        label: 'Louis L.',
-                        leading: <Avatar name="Louis L." size="small" />,
-                    },
-                    {
-                        value: 'Harvey',
-                        label: 'Harvey S.',
-                        leading: <Avatar name="Harvey S." size="small" />,
-                    },
-                    {
-                        value: 'Mike',
-                        label: 'Mike R.',
-                        leading: <Avatar name="Mike R." size="small" />,
-                    },
-                ],
-            },
+    },
+    {
+        label: 'Leading Avatar',
+        propState: {
+            label: 'Select user',
+
+            options: [
+                //
+                {
+                    value: 'Jessica',
+                    label: 'Jessica P.',
+                    leading: <Avatar name="Jessica P." size="small" />,
+                },
+                {
+                    value: 'Louis',
+                    label: 'Louis L.',
+                    leading: <Avatar name="Louis L." size="small" />,
+                },
+                {
+                    value: 'Harvey',
+                    label: 'Harvey S.',
+                    leading: <Avatar name="Harvey S." size="small" />,
+                },
+                {
+                    value: 'Mike',
+                    label: 'Mike R.',
+                    leading: <Avatar name="Mike R." size="small" />,
+                },
+            ],
+            name: 'demo-select-avatar',
+            value: '',
         },
-    ],
+    },
+];
+
+export const SelectExample: ComponentExample<SelectProps> = {
+    defaultState: {
+        label: 'Demo Select',
+        options: DEFAULT_OPTIONS,
+        scrollLimit: 5,
+        value: '',
+    },
+    render: ({ props, Component }) => {
+        return <Component {...props} />;
+    },
+    presets,
     variants: false,
 };