@bspk/ui 1.1.34 → 1.3.0

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

@@ -1,121 +1,74 @@
-[data-bspk='segmented-control'] {
-    display: flex;
-    flex-direction: row;
-    max-width: 100%;
-    overflow: scroll;
-
-    --outer-height: var(--spacing-sizing-10);
-    --inner-height: var(--spacing-sizing-08);
-    --svg-width: 20px;
+ul[data-bspk='segmented-control'] {
+    background: var(--surface-neutral-t3-low);
+    border-radius: var(--radius-sm);
+    padding: var(--spacing-sizing-01);
 
     &[data-width='fill'] {
-        align-items: stretch;
-        width: 100%;
-
-        --btn-flex-grow: 1;
-
         margin: 0 var(--spacing-sizing-04);
     }
 
-    &[data-width='hug'] {
-        width: fit-content;
-
-        --btn-flex-grow: 0;
-    }
+    --padding: var(--spacing-sizing-04);
 
     &[data-size='small'] {
-        --outer-height: var(--spacing-sizing-08);
-        --inner-height: var(--spacing-sizing-06);
-        --svg-width: 16px;
+        --padding: var(--spacing-sizing-03);
     }
 
-    svg {
-        width: var(--svg-width) !important;
+    &[data-size='large'] {
+        --padding: var(--spacing-sizing-05);
     }
 
-    button {
-        border: 0;
-        cursor: pointer;
-        color: var(--foreground-neutral-on-surface);
-        flex-grow: var(--btn-flex-grow);
-        font: var(--labels-small);
-        margin: 0;
-        height: var(--spacing-sizing-12);
-        background: transparent;
-        position: relative;
-        white-space: nowrap;
+    %active {
+        background: var(--interactions-neutral-hover-opacity);
 
-        [data-focus-ring] {
-            display: none;
+        &[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));
         }
+    }
 
-        [data-outer] {
-            height: var(--outer-height);
-            background: var(--surface-neutral-t3-low);
-            margin: var(--spacing-sizing-01) 0;
-            padding: var(--spacing-sizing-01) 0;
-            display: block;
-        }
+    li {
+        color: var(--foreground-neutral-on-surface);
+        padding: 0 var(--padding);
+        border-radius: var(--radius-sm);
 
-        [data-inner] {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            height: var(--inner-height);
-            border-bottom: 1px solid transparent;
-            justify-content: center;
-            gap: var(--spacing-sizing-01);
-            border-radius: var(--radius-sm);
-            padding: var(--spacing-sizing-02) var(--spacing-sizing-03);
-        }
+        &:has([data-icon]) {
+            // smaller padding for icon-only items
+            padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
 
-        &:first-of-type {
-            [data-outer] {
-                border-top-left-radius: var(--radius-md);
-                border-bottom-left-radius: var(--radius-md);
-                padding-left: var(--spacing-sizing-01);
+            &:has([data-label]) {
+                padding-right: var(--padding);
             }
         }
 
-        &:last-of-type {
-            [data-outer] {
-                border-top-right-radius: var(--radius-md);
-                border-bottom-right-radius: var(--radius-md);
-                padding-right: var(--spacing-sizing-01);
+        &: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);
             }
-        }
 
-        &:not(:disabled) {
             &:hover {
-                [data-inner] {
-                    background: var(--interactions-neutral-hover-opacity);
-                }
+                @extend %active;
             }
 
             &:active {
-                [data-inner] {
-                    background: var(--interactions-neutral-press-opacity);
-                }
-            }
-
-            &[data-selected] {
-                [data-inner] {
-                    background: var(--surface-neutral-t1-base);
-                }
-            }
-
-            &:focus-visible {
-                z-index: 2;
-                outline: solid 2px var(--stroke-neutral-focus);
+                background: var(--interactions-neutral-press-opacity);
             }
         }
 
-        &:disabled {
-            pointer-events: none;
+        &[aria-disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
             cursor: not-allowed;
         }
     }
+
+    &:focus-within {
+        li:not([aria-disabled])[data-active] {
+            @extend %active;
+        }
+    }
 }
 
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+// /** 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();
+    });
+});

package/src/components/Select/Select.tsx

@@ -1,68 +1,73 @@
-import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-import { useMemo } from 'react';
-
-import { CommonProps, ElementProps } from '-';
-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 SelectItem = SelectOption & { id: 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 SelectProps<T extends SelectOption = SelectOption> = CommonProps<'name' | 'size'> &
-    Pick<
-        ComboboxProps<T>,
-        | 'disabled'
-        | 'errorMessage'
-        | 'id'
-        | 'invalid'
-        | 'isMulti'
-        | 'itemDisplayCount'
-        | 'label'
-        | 'onChange'
-        | 'readOnly'
-        | 'selectAll'
-        | 'value'
-    > & {
+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.
+         *
+         * @required
+         */
+        label: string;
+        /**
+         * Placeholder for the select
          *
-         * This is typically used to provide additional context or instructions for the user.
+         * @default Select one
          */
-        description?: string;
+        placeholder?: string;
     };
 
 /**
@@ -80,16 +85,16 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'na
  *                 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"
@@ -99,86 +104,200 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'na
  *     }
  *
  * @name Select
- * @phase DesignReview
+ * @phase Dev
  */
-function Select({
-    options = [],
-    value: selected,
+export function Select({
+    options: optionsProp = [],
+    value = '',
     onChange,
     label,
     placeholder = 'Select one',
     size = 'medium',
-    itemDisplayCount = 5,
     disabled,
-    id: propId,
+    id: idProp,
     invalid,
-    errorMessage,
     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 selectedItem: SelectOption = useMemo(() => {
-        if (isMulti)
-            return {
-                label: `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`,
-                value: selected?.join(', ') || '',
-            };
+    const open = Boolean(activeElementId);
 
-        return options.find((o) => o.value === selected?.[0]) || { label: placeholder, value: '' };
-    }, [isMulti, options, placeholder, selected]);
+    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 (
-        <Combobox
-            description={description || ''}
-            disabled={disabled}
-            errorMessage={errorMessage}
-            header={placeholder || label}
-            id={id}
-            invalid={invalid}
-            isMulti={isMulti}
-            itemDisplayCount={itemDisplayCount}
-            items={options}
-            label={label}
-            onChange={onChange}
-            readOnly={readOnly}
-            selectAll={selectAll}
-            value={selected || []}
-        >
-            {({ setReference, toggleProps }) => (
-                <>
-                    <input defaultValue={selected} name={name} type="hidden" />
-                    <button
-                        aria-label={label || selectedItem?.label || placeholder}
-                        data-bspk="select"
-                        data-empty={selectedItem?.label ? undefined : ''}
-                        data-invalid={invalid || undefined}
-                        data-size={size}
-                        disabled={disabled || readOnly}
-                        id={id}
-                        ref={(node) => {
-                            if (node) setReference(node);
-                        }}
-                        {...props}
-                        {...toggleProps}
-                    >
-                        <ListItem as="span" data-placeholder {...selectedItem} readOnly />
-                        <span data-icon>
-                            <SvgChevronRight />
-                        </span>
-                    </button>
-                </>
+        <>
+            <input name={name} type="hidden" value={value} />
+            {!ariaLabelledBy && (
+                <div data-sr-only id={`${id}-label`}>
+                    {label}
+                </div>
             )}
-        </Combobox>
-    );
-}
+            <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;
+                    }
 
-Select.bspkName = 'Select';
+                    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);
 
-export { Select };
+                    return (
+                        <ListItem
+                            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"
+                            role="option"
+                            tabIndex={-1} //show && isActive ? -1 : 0}
+                            value={undefined}
+                        />
+                    );
+                })}
+            </Menu>
+        </>
+    );
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */