@bspk/ui 1.3.3 → 1.3.5

package/src/components/ListItemMenu/ListItemMenu.tsx

@@ -1,359 +0,0 @@
-import {
-    AriaAttributes,
-    CSSProperties,
-    HTMLAttributes,
-    ReactNode,
-    useState,
-    KeyboardEvent,
-    MouseEvent,
-    Dispatch,
-    SetStateAction,
-    useMemo,
-} from 'react';
-import { ListItem, ListItemProps } from '-/components/ListItem';
-import { Menu, MenuProps } from '-/components/Menu';
-import { ArrowKeyNavigationCallbackParams, useArrowNavigation } from '-/hooks/useArrowNavigation';
-import { useFloating, UseFloatingProps } from '-/hooks/useFloating';
-import { useId } from '-/hooks/useId';
-import { useOutsideClick } from '-/hooks/useOutsideClick';
-import { CommonProps, SetRef } from '-/types/common';
-import { getElementById } from '-/utils/dom';
-import { handleKeyDown } from '-/utils/handleKeyDown';
-
-export type MenuListItem = CommonProps<'disabled'> &
-    Omit<ListItemProps, 'id'> & {
-        id: string;
-    };
-
-export type ListItemMenuRole = keyof typeof LIST_ITEM_ROLES;
-
-const LIST_ITEM_ROLES = {
-    group: undefined,
-    listbox: 'option',
-    menu: 'menuitem',
-    tree: 'treeitem',
-} as const;
-
-/** Props for the toggle element that opens the ListItemMenu. */
-export type ToggleProps = Pick<
-    AriaAttributes,
-    | 'aria-activedescendant'
-    | 'aria-controls'
-    | 'aria-disabled'
-    | 'aria-errormessage'
-    | 'aria-expanded'
-    | 'aria-haspopup'
-    | 'aria-invalid'
-    | 'aria-owns'
-    | 'aria-readonly'
-> &
-    Pick<HTMLAttributes<HTMLElement>, 'role' | 'tabIndex'> & {
-        /** Event handler for the toggle element that change the menu state. */
-        onClick: (event: MouseEvent<HTMLElement>) => void;
-        /** Event handler for keydown events on the toggle element that change the menu state. */
-        onKeyDownCapture: (event: KeyboardEvent) => void;
-    };
-
-/** Props for internal toggle functionality provided to the children render prop. */
-export type InternalToggleProps = {
-    /**
-     * Sets a ref to the toggle element that opens the ListItemMenu.
-     *
-     * Used in determining the position of the floating menu.
-     *
-     * May also be used to set the menu width if `width="reference"` is provided in the ListItemMenu props.
-     */
-    setRef: SetRef<HTMLElement | null>;
-    /**
-     * Function to toggle the menu open or closed.
-     *
-     * If `force` is provided as a boolean, it will set the menu to that state (true = open, false = closed). If `force`
-     * is not provided, it will toggle the current state.
-     */
-    toggleMenu: (force?: boolean) => void;
-    /** The number of items in the menu. */
-    itemCount: number;
-    /** Whether or not the menu is currently open. */
-    show?: boolean;
-    /** The reference element the menu is anchored to. */
-    reference: HTMLElement | null;
-};
-
-export type ListItemMenuProps = CommonProps<'disabled' | 'readOnly'> &
-    Pick<MenuProps, 'id' | 'label' | 'owner'> &
-    Pick<UseFloatingProps, 'offsetOptions' | 'placement'> & {
-        /**
-         * The children to render inside the menu.
-         *
-         * @required
-         */
-        children: (toggleProps: ToggleProps, internal: InternalToggleProps) => ReactNode;
-        /**
-         * The element that the menu is anchored to.
-         *
-         * @default listbox
-         */
-        role?: ListItemMenuRole;
-        /**
-         * The width of the menu. If 'reference' is provided, the menu will match the width of the useFloating reference
-         * element.
-         *
-         * @default reference
-         */
-        width?: CSSProperties['width'] | 'reference';
-        /**
-         * The items to display in the menu as ListItems.
-         *
-         * If an item does not have an `id` property, one will be generated automatically.
-         *
-         * @required
-         */
-        items: MenuListItem[] | ((params: { show?: boolean }) => MenuListItem[]);
-        /**
-         * Content to display in the floating menu element before the ListItems.
-         *
-         * If provided `scrollLimit` will be ignored.
-         */
-        leading?: ReactNode;
-        /**
-         * Content to display in the floating menu element after the ListItems.
-         *
-         * If provided `scrollLimit` will be ignored.
-         */
-        trailing?: ReactNode;
-        /** The ID of the currently active element. */
-        activeElementId?: string | null;
-        /** Optional callback fired when an item is clicked/selected. */
-        itemOnClick?: (params: {
-            event: MouseEvent;
-            currentId: string;
-            show: boolean;
-            setShow: Dispatch<SetStateAction<boolean>>;
-        }) => void;
-        /**
-         * Optional callback fired when the arrow keys are used for navigation.
-         *
-         * If the callback returns `true`, the change is accepted; if it returns `false`, the change is ignored.
-         */
-        arrowKeyNavigationCallback?: (params: ArrowKeyNavigationCallbackParams) => boolean;
-        /** Optional callback fired when the menu is closed. */
-        onClose?: () => void;
-        /** The maximum number of items to show before scrolling is enabled. */
-        scrollLimit?: number;
-        /** Remove menu from dom when closed for performance and to prevent tabbing to hidden menu items. */
-        hideWhenClosed?: boolean;
-    };
-
-/**
- * A floating list Item menu for displaying additional actions or options presented as ListItems in a Menu.
- *
- * Includes keyboard navigation and accessibility features.
- *
- * The menu is anchored to a reference element provided as a children function with params that include the necessary
- * ARIA attributes and event handlers.
- *
- * @example
- *     import { ListItemMenu } from '@bspk/ui/ListItemMenu';
- *
- *     function Example() {
- *         return (
- *             <ListItemMenu
- *                 items={[{ id: '1', label: 'Item 1' }]}
- *                 label="Example Menu"
- *                 role="menu"
- *                 scrollLimit={5}
- *                 width="200px"
- *             >
- *                 {(toggleProps, { setRef, toggleMenu }) => (
- *                     <button {...toggleProps} onClick={() => toggleMenu()} ref={setRef}>
- *                         Toggle Menu
- *                     </button>
- *                 )}
- *             </ListItemMenu>
- *         );
- *     }
- *
- * @name ListItemMenu
- * @phase Utility
- */
-export function ListItemMenu({
-    activeElementId: activeElementIdProp = null,
-    children,
-    disabled,
-    id: idProp,
-    items: itemsProp,
-    label,
-    leading: menuLeading,
-    offsetOptions = 4,
-    arrowKeyNavigationCallback,
-    itemOnClick,
-    owner,
-    placement = 'bottom',
-    readOnly,
-    role: containerRole = 'listbox',
-    scrollLimit,
-    trailing: menuTrailing,
-    width: menuWidth = 'reference',
-    onClose,
-    hideWhenClosed = false,
-    ...ariaProps
-}: ListItemMenuProps) {
-    const containerId = useId(idProp);
-
-    const [show, setShowBase] = useState(false);
-
-    const items = useMemo(() => (typeof itemsProp === 'function' ? itemsProp({ show }) : itemsProp), [itemsProp, show]);
-
-    const setShow = (next: boolean | ((prev: boolean) => boolean)) => {
-        if (disabled || readOnly) return;
-
-        setShowBase((prev) => {
-            if (prev && !next) {
-                // closing
-                onClose?.();
-            }
-
-            if (typeof next === 'function') return next(prev);
-            return next;
-        });
-    };
-
-    const { floatingStyles, elements, currentPlacement } = useFloating({
-        hide: !show,
-        offsetOptions,
-        placement,
-        refWidth: menuWidth === 'reference',
-        strategy: 'fixed',
-    });
-
-    useOutsideClick({
-        elements: [elements.floating as HTMLElement, elements.reference as HTMLElement],
-        callback: () => setShow(false),
-        disabled: !show,
-    });
-
-    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
-        ids: items.flatMap((item) => (item.disabled ? [] : item.id)),
-        callback: (params) => {
-            if (!show) setShow(true);
-
-            if (typeof arrowKeyNavigationCallback === 'function' && arrowKeyNavigationCallback)
-                return arrowKeyNavigationCallback(params);
-            return true;
-        },
-    });
-
-    const tabEscape = () => {
-        setShow(false);
-        setActiveElementId(null);
-    };
-
-    const enterSpace = (event: KeyboardEvent) => {
-        event.preventDefault();
-        if (!show) {
-            setShow(true);
-            return;
-        }
-        getElementById(activeElementId)?.click();
-    };
-
-    return (
-        <>
-            {children(
-                {
-                    'aria-disabled': disabled || undefined,
-                    'aria-expanded': show,
-                    'aria-haspopup': show && containerRole !== 'group' ? containerRole : undefined,
-                    'aria-controls': containerId,
-                    'aria-readonly': readOnly || undefined,
-                    'aria-owns': containerId,
-
-                    'aria-activedescendant': show ? activeElementId || undefined : undefined,
-                    role: 'combobox',
-                    tabIndex: 0,
-                    onClick: (event) => {
-                        const nextShow = !show;
-                        setShow(nextShow);
-                        setActiveElementId(nextShow ? activeElementIdProp || items[0]?.id || null : null);
-                        event.preventDefault();
-                    },
-                    onKeyDownCapture: handleKeyDown({
-                        ...arrowKeyCallbacks,
-                        Enter: enterSpace,
-                        Space: enterSpace,
-                        Tab: tabEscape,
-                        Escape: tabEscape,
-                    }),
-                },
-                {
-                    setRef: elements.setReference,
-                    toggleMenu: () => setShow(true),
-                    itemCount: items.length,
-                    reference: elements.reference as HTMLElement | null,
-                },
-            )}
-            {(!hideWhenClosed || show) && (
-                <Menu
-                    {...ariaProps}
-                    aria-label={label}
-                    as="ul"
-                    data-placement={currentPlacement}
-                    data-scroll={!!scrollLimit && items.length > scrollLimit}
-                    id={containerId}
-                    innerRef={(node) => {
-                        elements.setFloating(node);
-                    }}
-                    owner={owner}
-                    role={containerRole}
-                    style={{
-                        width: menuWidth !== 'reference' ? menuWidth : undefined,
-                        ...floatingStyles,
-                        ...scrollLimitStyle(scrollLimit, items.length),
-                    }}
-                >
-                    {menuLeading}
-                    {items.map((item, index) => {
-                        return (
-                            <ListItem
-                                as="li"
-                                key={index}
-                                {...item}
-                                active={activeElementId === item.id || undefined}
-                                onClick={(event) => {
-                                    elements.reference?.focus();
-                                    setActiveElementId(item.id);
-                                    item?.onClick?.(event);
-                                    itemOnClick?.({ event, currentId: item.id, show, setShow });
-                                }}
-                                role={item.role || LIST_ITEM_ROLES[containerRole] || undefined}
-                                tabIndex={0}
-                            />
-                        );
-                    })}
-                    {menuTrailing}
-                </Menu>
-            )}
-        </>
-    );
-}
-
-const scrollLimitStyle = (scrollLimitProp: unknown, itemCount: unknown): CSSProperties => {
-    const scrollLimit = Number(scrollLimitProp);
-
-    // Check:
-    // 1. scrollLimit is valid
-    // 2. itemCount is a number
-    // 3. scrollLimit is less than itemCount
-    // If any of these fail, return undefined (no scrolling)
-    if (Number.isNaN(scrollLimit) || scrollLimit <= 0 || typeof itemCount !== 'number' || scrollLimit > itemCount)
-        return {};
-
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        maxHeight: `calc(var(--list-item-height) * ${scrollLimit})`,
-        overflow: 'hidden auto',
-    };
-};
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ListItemMenu/index.tsx

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

package/src/components/MenuButton/MenuButton.tsx

@@ -1,29 +0,0 @@
-import './menu-button.scss';
-import { SvgMenu } from '@bspk/icons/Menu';
-import { ButtonProps } from '-/components/Button';
-import { ElementProps } from '-/types/common';
-
-export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
-
-/**
- * Utility component used within top navigation.
- *
- * @example
- *     import { MenuButton } from '@bspk/ui/MenuButton';
- *
- *     export function Example() {
- *         return <MenuButton />;
- *     }
- *
- * @name MenuButton
- * @phase Utility
- */
-export function MenuButton(props: ElementProps<MenuButtonProps, 'button'>) {
-    return (
-        <button data-bspk="menu-button" {...props}>
-            <SvgMenu />
-        </button>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/MenuButton/index.tsx

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

package/src/components/MenuButton/menu-button.scss

@@ -1,16 +0,0 @@
-[data-bspk='menu-button'] {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    height: 48px;
-    width: auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding-top: var(--spacing-sizing-01);
-    color: var(--foreground-neutral-on-surface-variant-01);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -1,24 +0,0 @@
-import { NumberField } from './NumberField';
-import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
-import { render } from '-/rtl/util';
-
-const TestBed = () => (
-    <NumberField
-        aria-label="Example label"
-        controlId="Example controlId"
-        label="Example label"
-        name="Example name"
-        onChange={() => {}}
-        value={24}
-    />
-);
-
-describe('NumberField (RTL)', () => {
-    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
-
-    it('renders', () => {
-        const { getByLabelText } = render(<TestBed />);
-
-        expect(getByLabelText('Example label')).toBeInTheDocument();
-    });
-});

package/src/components/NumberField/NumberField.tsx

@@ -1,70 +0,0 @@
-import { FormField, FormFieldWrapProps } from '-/components/FormField';
-import { NumberInputProps, NumberInput } from '-/components/NumberInput';
-
-export type NumberFieldProps = FormFieldWrapProps<NumberInputProps>;
-
-/**
- * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
- * pressing the (+) or (-).
- *
- * This component takes properties from the FormField and NumberInput components.
- *
- * @example
- *     import React from 'react';
- *
- *     import { NumberField } from '@bspk/ui/NumberField';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState<number>();
- *
- *         return (
- *             <NumberField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={(nextValue) => setState(nextValue)}
- *                 value={state}
- *             />
- *         );
- *     }
- *
- * @name NumberField
- * @phase UXReview
- */
-export function NumberField({
-    label,
-    errorMessage,
-    disabled,
-    helperText,
-    controlId,
-    labelTrailing,
-    required,
-    invalid,
-    ...inputProps
-}: NumberFieldProps) {
-    return (
-        <FormField
-            controlId={controlId}
-            data-bspk="number-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            invalid={invalid}
-            label={label}
-            labelTrailing={labelTrailing}
-            required={required}
-        >
-            {(fieldProps) => (
-                <NumberInput
-                    {...inputProps}
-                    {...fieldProps}
-                    aria-label={label}
-                    disabled={disabled}
-                    id={controlId}
-                    invalid={invalid}
-                />
-            )}
-        </FormField>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/NumberField/index.tsx

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

package/src/components/NumberInput/index.tsx

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

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

@@ -1,15 +0,0 @@
-import { PasswordInput } from './PasswordInput';
-import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
-import { render } from '-/rtl/util';
-
-const TestBed = () => <PasswordInput aria-label="Password field" name="Example name" onChange={() => {}} value="foo" />;
-
-describe('PasswordInput (RTL)', () => {
-    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
-
-    it('renders', () => {
-        const { getByLabelText } = render(<TestBed />);
-
-        expect(getByLabelText('Password field')).toBeInTheDocument();
-    });
-});

package/src/components/PasswordInput/PasswordInput.tsx

@@ -1,115 +0,0 @@
-import './password-input.scss';
-import { useState } from 'react';
-import { Button } from '-/components/Button';
-import { TextInput, TextInputProps } from '-/components/TextInput';
-
-export type PasswordInputProps = Pick<
-    TextInputProps,
-    | 'aria-describedby'
-    | 'aria-errormessage'
-    | 'aria-label'
-    | 'containerRef'
-    | 'disabled'
-    | 'id'
-    | 'inputProps'
-    | 'inputRef'
-    | 'invalid'
-    | 'name'
-    | 'onChange'
-    | 'readOnly'
-    | 'required'
-    | 'size'
-    | 'value'
->;
-
-/**
- * An input field that is specifically built with a show/hide toggle for entering security passwords.
- *
- * @example
- *     import { PasswordInput } from '@bspk/ui/PasswordInput';
- *     import { useState } from 'react';
- *
- *     function Example() {
- *         const [value, setValue] = useState('');
- *
- *         return <PasswordInput value={value} onChange={setValue} aria-label="password" name="password" />;
- *     }
- *
- * @name PasswordInput
- * @phase UXReview
- */
-export function PasswordInput({
-    disabled,
-    readOnly,
-    size = 'medium',
-    'aria-label': ariaLabel,
-    'aria-describedby': ariaDescribedBy,
-    'aria-errormessage': ariaErrorMessage,
-    inputProps,
-    inputRef,
-    name,
-    onChange,
-    required,
-    value,
-    containerRef,
-    id,
-    invalid,
-    ...props
-}: PasswordInputProps) {
-    const [isShowingPassword, setIsShowingPassword] = useState(false);
-
-    const togglePasswordVisibility = () => {
-        if (disabled || readOnly) return;
-        setIsShowingPassword((prev) => !prev);
-    };
-
-    return (
-        <div {...props} data-bspk="password-input">
-            <TextInput
-                aria-describedby={ariaDescribedBy}
-                aria-errormessage={ariaErrorMessage}
-                aria-label={ariaLabel}
-                autoComplete="off"
-                containerRef={containerRef}
-                disabled={disabled}
-                id={id}
-                inputProps={inputProps}
-                inputRef={inputRef}
-                invalid={invalid}
-                leading={
-                    !isShowingPassword && (
-                        <>
-                            {Array.from({ length: value?.length || 0 }, (_, i) => (
-                                <span key={i} />
-                            ))}
-                        </>
-                    )
-                }
-                name={name}
-                onChange={onChange}
-                onClick={(e) => {
-                    (e.currentTarget as HTMLElement)?.querySelector('input')?.focus();
-                }}
-                owner="password-input"
-                readOnly={readOnly}
-                required={required}
-                showClearButton={false}
-                size={size}
-                trailing={
-                    !disabled &&
-                    !readOnly && (
-                        <Button
-                            label={isShowingPassword ? 'Hide' : 'Show'}
-                            onClick={togglePasswordVisibility}
-                            variant="tertiary"
-                        />
-                    )
-                }
-                type={isShowingPassword ? 'text' : 'password'}
-                value={value}
-            />
-        </div>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PasswordInput/index.tsx

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

package/src/components/PasswordInput/password-input.scss

@@ -1,36 +0,0 @@
-[data-bspk='password-input'] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-
-    [data-bspk='text-input'] {
-        padding-right: 0;
-
-        [data-bspk='button'] {
-            font: var(--button-font);
-            height: 100%;
-        }
-    }
-
-    [data-disabled],
-    [data-readonly] {
-        [data-toggle-visibility-button] {
-            cursor: default;
-        }
-    }
-
-    &[data-size='small'] {
-        --button-font: var(--labels-small);
-    }
-
-    &[data-size='medium'] {
-        --button-font: var(--labels-base);
-    }
-
-    &[data-size='large'] {
-        --button-font: var(--labels-large);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */