@bspk/ui 1.2.0 → 1.3.0

package/src/components/Listbox/Listbox.tsx

@@ -1,257 +0,0 @@
-import { ReactNode, useMemo } from 'react';
-
-import { Checkbox } from '-/components/Checkbox';
-import { ListItem, ListItemProps } from '-/components/ListItem';
-import { Menu, MenuProps } from '-/components/Menu';
-import { useId } from '-/hooks/useId';
-import { CommonProps, ElementProps, SetRef } from '-/types/common';
-
-const DEFAULT = {
-    selectAll: 'Select All',
-};
-
-/** The props for the listbox items. */
-export type ListboxItemProps = CommonProps<'disabled'> &
-    ListItemProps & {
-        /** The content to display in the listbox item. */
-        label: string;
-        /** The value of the listbox item. */
-        value: string;
-    };
-
-export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = CommonProps<'disabled' | 'id'> &
-    Pick<MenuProps, 'itemCount' | 'itemDisplayCount' | 'onOutsideClick' | 'owner'> & {
-        /**
-         * Content to display in the listbox.
-         *
-         * @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' },
-         *     ];
-         *
-         * @type Array<MenuItem>
-         */
-        items?: Item[];
-        /** A ref to the inner div element. */
-        innerRef?: SetRef<HTMLDivElement>;
-        /**
-         * The index of the currently highlighted item.
-         *
-         * @default undefined
-         */
-        activeIndex?: number;
-        /** The values of the selected items */
-        selectedValues?: string[];
-        /** A function which returns additional ListItem props to apply to each ListItem. */
-        listItemProps?: (props: { index: number; item: Item; selected: boolean }) => Partial<ListItemProps<'button'>>;
-        /**
-         * Whether the listbox allows multiple selections.
-         *
-         * @default false
-         */
-        isMulti?: boolean;
-        /**
-         * The label for the "Select All" option.
-         *
-         * Ignored if `isMulti` is false.
-         *
-         * If `isMulti` is `true`, defaults to "Select All". If a string, it will be used as the label. If false the
-         * select all option will not be rendered.
-         *
-         * @default false
-         */
-        selectAll?: boolean | string;
-        /**
-         * The function to call when the selected values change.
-         *
-         * @example
-         *     (selectedValues, event) => setState({ selectedValues });
-         */
-        onChange?: (selectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        /**
-         * The children of the listbox added after the items.
-         *
-         * Usually only used for showing no items found.
-         */
-        children?: ReactNode;
-        includeAriaLabel?: boolean;
-    };
-
-/**
- * A utility widget that allows users to select one or more items from a list of choices.
- *
- * @example
- *     import React from 'react';
- *
- *     import { ListBox } from '@bspk/ui/ListBox';
- *
- *     export function Example() {
- *         const [selected, setSelected] = React.useState<string[]>([]);
- *
- *         return (
- *             <ListBox
- *                 items={[
- *                     { 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' },
- *                 ]}
- *                 onChange={(selectedValues: string[]) => setSelected(selectedValues)}
- *                 selectedValues={selected}
- *             />
- *         );
- *     }
- *
- * @name Listbox
- * @phase Utility
- */
-export function Listbox<Item extends ListboxItemProps>({
-    includeAriaLabel,
-    itemDisplayCount,
-    itemCount,
-    items = [],
-    innerRef,
-    onChange,
-    activeIndex,
-    selectedValues = [],
-    disabled,
-    id: idProp,
-    listItemProps,
-    isMulti,
-    selectAll: selectAllProp,
-    children,
-    owner,
-    ...props
-}: ElementProps<ListboxProps<Item>, 'div'>) {
-    const menuId = useId(idProp);
-
-    const selectAll = useMemo(() => {
-        if (!isMulti) return false;
-        if (selectAllProp && typeof selectAllProp === 'string') return selectAllProp;
-        return selectAllProp === true ? DEFAULT.selectAll : false;
-    }, [isMulti, selectAllProp]);
-
-    const allSelected = useMemo(
-        () => !!(items.length && items.every((item) => selectedValues.includes(item.value))),
-        [items, selectedValues],
-    );
-
-    return (
-        <Menu
-            {...props}
-            aria-multiselectable={isMulti || undefined}
-            data-bspk="listbox"
-            data-bspk-owner={owner || undefined}
-            data-disabled={disabled || undefined}
-            data-no-items={!items.length || undefined}
-            id={menuId}
-            innerRef={innerRef}
-            itemCount={itemCount || items.length}
-            itemDisplayCount={itemDisplayCount || items.length}
-            role="listbox"
-        >
-            {isMulti && selectAll && (
-                <ListItem
-                    as="label"
-                    data-selected={allSelected || undefined}
-                    id={`${menuId}-select-all`}
-                    key="select-all"
-                    label={selectAll}
-                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-                        onChange?.(allSelected ? [] : items.map((item) => item.value), event);
-                    }}
-                    role="option"
-                    trailing={
-                        <Checkbox
-                            aria-label={selectAll}
-                            checked={!!allSelected}
-                            indeterminate={!allSelected && selectedValues.length > 0}
-                            name=""
-                            onChange={(checked) => {
-                                onChange?.(checked ? items.map((item) => item.value) : []);
-                            }}
-                            value=""
-                        />
-                    }
-                />
-            )}
-            {items.map((item, index) => {
-                const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
-
-                const renderProps = listItemProps?.({
-                    selected,
-                    index,
-                    item,
-                });
-
-                return (
-                    <ListItem
-                        {...item}
-                        {...renderProps}
-                        active={activeIndex === index || undefined}
-                        aria-disabled={item.disabled || undefined}
-                        aria-selected={selected || undefined}
-                        as={isMulti ? 'label' : 'button'}
-                        disabled={item.disabled || undefined}
-                        id={`${menuId}-item-${index}`}
-                        includeAriaLabel={includeAriaLabel}
-                        key={`${menuId}-item-${index}`}
-                        label={renderProps?.label?.toString() || item.label?.toString()}
-                        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                            if (onChange) {
-                                if (!isMulti) {
-                                    onChange?.([item.value], event);
-                                    return;
-                                }
-                                onChange(
-                                    selected
-                                        ? selectedValues.filter((value) => value !== item.value)
-                                        : [...selectedValues, item.value],
-                                    event,
-                                );
-                            }
-                        }}
-                        role="option"
-                        trailing={
-                            isMulti ? (
-                                <Checkbox
-                                    aria-label={item.label}
-                                    checked={selected}
-                                    name={item.value}
-                                    onChange={(checked) => {
-                                        onChange?.(
-                                            checked
-                                                ? selectedValues.filter((value) => value !== item.value)
-                                                : [...selectedValues, item.value],
-                                        );
-                                    }}
-                                    value={item.value}
-                                />
-                            ) : (
-                                renderProps?.trailing || item.trailing || undefined
-                            )
-                        }
-                    />
-                );
-            })}
-            {children}
-        </Menu>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Listbox/index.tsx

@@ -1 +0,0 @@
-export * from './Listbox';

package/src/hooks/useCombobox.ts

@@ -1,173 +0,0 @@
-import { AriaAttributes, useState } from 'react';
-
-import { useFloating, UseFloatingElements, UseFloatingProps } from './useFloating';
-import { useId } from './useId';
-import { CommonProps } from '-/types/common';
-import { EVENT_KEY } from '-/utils/keyboard';
-import { scrollElementIntoView } from '-/utils/scrollElementIntoView';
-
-export type UseComboboxProps = CommonProps<'disabled' | 'readOnly'> &
-    Pick<UseFloatingProps, 'offsetOptions' | 'placement' | 'refWidth'> & {
-        /**
-         * The element to use for outside click detection.
-         *
-         * If set to true, it will use the floating, and reference elements.
-         *
-         * If set to HTMLElements, it will use those element for outside click detection.
-         *
-         * If set to false, it will not use outside click detection.
-         */
-        refOutsideClick?: HTMLElement[] | boolean;
-    };
-
-export type ComboboxContext = ReturnType<typeof useCombobox>;
-export type ToggleProps = {
-    'aria-errormessage'?: string | undefined;
-    'aria-activedescendant'?: string | undefined;
-    'aria-controls': string;
-    'aria-disabled'?: boolean | undefined;
-    'aria-expanded': boolean;
-    'aria-haspopup': AriaAttributes['aria-haspopup'];
-    'aria-invalid'?: boolean | undefined;
-    'aria-owns': string;
-    'aria-readonly'?: boolean | undefined;
-    role: 'combobox';
-    tabIndex: number;
-    onClick: () => void;
-    onKeyDownCapture: (event: React.KeyboardEvent) => boolean;
-};
-
-function useKeyDownNavigation(containerElement: HTMLElement, setShow: (show: boolean) => void, disabled?: boolean) {
-    const [activeIndex, setActiveIndex] = useState(-1);
-
-    const itemElements = Array.from(containerElement?.children || []) as HTMLElement[];
-    const selectedId = itemElements[activeIndex]?.id;
-
-    const onKeyDownCapture = (event: React.KeyboardEvent): boolean => {
-        if (disabled) return false;
-
-        if (event.key === EVENT_KEY.Tab || event.key === EVENT_KEY.Escape) {
-            setShow(false);
-            return true;
-        }
-
-        if (event.key !== EVENT_KEY.Enter && event.key !== EVENT_KEY[' '] && !event.key.startsWith('Arrow'))
-            return false;
-
-        if (event.key.startsWith('Arrow') && !containerElement) {
-            event.preventDefault();
-            setShow(true);
-            setActiveIndex(0);
-            return true;
-        }
-
-        if (!containerElement?.children.length) return false;
-
-        event.preventDefault();
-
-        if ((event.key === EVENT_KEY[' '] || event.key === EVENT_KEY.Enter) && activeIndex !== -1) {
-            itemElements[activeIndex].click();
-            return true;
-        }
-
-        let next = 0;
-        if (event.key === EVENT_KEY.ArrowUp || event.key === EVENT_KEY.ArrowLeft) next = activeIndex - 1;
-        if (event.key === EVENT_KEY.ArrowDown || event.key === EVENT_KEY.ArrowRight) next = activeIndex + 1;
-        if (next < 0) next = itemElements.length - 1;
-        if (next >= itemElements.length) next = 0;
-
-        itemElements.forEach((el, index) => {
-            if (index === next) el.setAttribute('data-selected', 'true');
-            else el.removeAttribute('data-selected');
-        });
-
-        scrollElementIntoView(itemElements[next], containerElement);
-        setActiveIndex(next);
-
-        return true;
-    };
-
-    return { onKeyDownCapture, selectedId, activeIndex };
-}
-
-/**
- * Utility hook to manage a combobox component.
- *
- * It provides functionality for showing/hiding the menu, handling keyboard navigation, and managing ARIA attributes.
- *
- * @param {UseComboboxProps} props - The properties to configure the combobox.
- * @returns An object containing props for the menu and toggle elements, and a function to close the menu.
- */
-export function useCombobox({
-    placement = 'bottom',
-    refWidth = true,
-    disabled,
-    readOnly,
-    offsetOptions,
-}: UseComboboxProps): {
-    activeIndex: number;
-    menuProps: {
-        'data-placement': string | undefined;
-        id: string;
-        role: 'listbox';
-        style: React.CSSProperties;
-        tabIndex: -1;
-        onOutsideClick: () => void;
-    };
-    toggleProps: ToggleProps;
-    closeMenu: () => void;
-    isOpen: boolean;
-    elements: UseFloatingElements;
-    openMenu: () => void;
-} {
-    const menuId = useId();
-
-    const [show, setShow] = useState(false);
-
-    const { floatingStyles, middlewareData, elements } = useFloating({
-        placement,
-        strategy: 'fixed',
-        offsetOptions,
-        refWidth,
-        hide: !show,
-    });
-
-    const { onKeyDownCapture, activeIndex, selectedId } = useKeyDownNavigation(
-        elements.floating as HTMLElement,
-        setShow,
-        disabled || readOnly,
-    );
-
-    return {
-        activeIndex,
-        menuProps: {
-            'data-placement': middlewareData?.offset?.placement,
-            id: menuId,
-            role: 'listbox',
-            style: floatingStyles,
-            tabIndex: -1,
-            onOutsideClick: () => setShow(false),
-        },
-        toggleProps: {
-            'aria-activedescendant': selectedId || undefined,
-            'aria-controls': menuId,
-            'aria-disabled': disabled || undefined,
-            'aria-expanded': show,
-            'aria-haspopup': 'listbox' as AriaAttributes['aria-haspopup'],
-            'aria-owns': menuId,
-            'aria-readonly': readOnly || undefined,
-            role: 'combobox',
-            tabIndex: 0,
-            onClick: () => {
-                setShow((prev) => !prev);
-            },
-            onKeyDownCapture,
-        },
-        closeMenu: () => setShow(false),
-        openMenu: () => setShow(true),
-        isOpen: show,
-        elements,
-    };
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/hooks/useKeyNavigation.ts

@@ -1,66 +0,0 @@
-import { Dispatch, DOMAttributes, SetStateAction, useRef, useState } from 'react';
-import { useOutsideClick } from './useOutsideClick';
-import { handleKeyDown } from '-/utils/handleKeyDown';
-
-export type UseKeyNavigationProps = {
-    /** The callback function to call when a tab is selected (Enter or Space keys). */
-    onSelect: (activeId?: string) => void;
-};
-
-/**
- * Custom hook to handle keyboard navigation for a list of elements.
- *
- * This hook provides functionality to navigate through elements using arrow keys and select an element with the Enter
- * or Space key, or onClick.
- */
-export function useKeyNavigation<T extends HTMLElement>({
-    onSelect,
-}: UseKeyNavigationProps): {
-    handleKeyDown: DOMAttributes<T>['onKeyDown'];
-    activeElementId: string | null;
-    setElements: (newElements: HTMLElement[]) => void;
-    setActiveElementId: Dispatch<SetStateAction<string | null>>;
-} {
-    const elements = useRef<HTMLElement[]>([]);
-    const setElements = (newElements: HTMLElement[]) => {
-        elements.current = newElements;
-    };
-
-    const [activeElementId, setActiveElementId] = useState<string | null>(null);
-
-    useOutsideClick({
-        elements: elements.current,
-        callback: () => setActiveElementId(null),
-    });
-
-    const handleIncrement = (increment: -1 | 1) => (): void => {
-        let currentElement = elements.current[0];
-        if (activeElementId)
-            currentElement = elements.current.find((el) => el.id === activeElementId) || elements.current[0];
-
-        const activeIndex = elements.current.indexOf(currentElement);
-        const nextindex = (activeIndex + increment + elements.current.length) % elements.current.length;
-        setActiveElementId(elements.current[nextindex].id);
-    };
-
-    const handleSelect = () => () => {
-        if (activeElementId) onSelect(activeElementId);
-    };
-
-    return {
-        setElements,
-        handleKeyDown: handleKeyDown(
-            {
-                ArrowRight: handleIncrement(1),
-                ArrowDown: handleIncrement(1),
-                ArrowUp: handleIncrement(-1),
-                ArrowLeft: handleIncrement(-1),
-                Enter: handleSelect(),
-                Space: handleSelect(),
-            },
-            { preventDefault: true, stopPropagation: true },
-        ),
-        activeElementId,
-        setActiveElementId,
-    };
-}

package/src/utils/placeholder.test.ts

@@ -1,7 +0,0 @@
-describe('placeholder', () => {
-    test('', () => {
-        expect(1).toBe(1);
-    });
-});
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */