@bspk/ui 1.3.3 → 1.3.4

package/src/components/DateInput/DateInput.tsx

@@ -1,198 +0,0 @@
-import './date-input.scss';
-import { SvgEvent } from '@bspk/icons/Event';
-import { format, isValid, parse } from 'date-fns';
-import { useEffect, useRef, useState } from 'react';
-import { Button } from '-/components/Button';
-import { CalendarPicker } from '-/components/CalendarPicker';
-import { Portal } from '-/components/Portal';
-import { TextInput, TextInputProps } from '-/components/TextInput';
-import { useFloating } from '-/hooks/useFloating';
-import { useOutsideClick } from '-/hooks/useOutsideClick';
-
-const parsableDate = (dateString: string) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString);
-
-export type DateInputProps = Pick<
-    TextInputProps,
-    'aria-errormessage' | 'aria-label' | 'disabled' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size'
-> & {
-    /** The value of the calendar input */
-    value: Date | undefined;
-    /** Fires when the date changes with the new date */
-    onChange: (newDate: Date | undefined) => void;
-    /**
-     * If the calendar should close when a date is selected.
-     *
-     * @default true
-     */
-    closeCalendarOnChange?: boolean;
-    /**
-     * The placeholder text for the date input field.
-     *
-     * @default mm/dd/yyyy
-     */
-    placeholder?: string;
-};
-
-/**
- * An input that allows a customer to manually type in a specific date or triggers a date picker combobox to select a
- * date.
- *
- * @example
- *     import { DateInput } from '@bspk/ui/DateInput';
- *     import { useState } from 'react';
- *
- *     function Example() {
- *         const [date, setDate] = useState<Date | undefined>(new Date());
- *
- *         return <DateInput name="calendar input" aria-label="calendar input" value={date} onChange={setDate} />;
- *     }
- *
- * @name DateInput
- * @phase Utility
- */
-export function DateInput({
-    value,
-    onChange,
-    disabled,
-    readOnly,
-    closeCalendarOnChange = true,
-    'aria-label': ariaLabel,
-    name,
-    placeholder,
-    invalid,
-    required,
-    size,
-    'aria-errormessage': ariaErrorMessage,
-}: DateInputProps) {
-    const [textValue, setTextValue] = useState(value ? format(value, 'MM/dd/yyyy') : '');
-    const [calendarVisible, setCalendarVisible] = useState(false);
-    const containerRef = useRef<HTMLSpanElement | null>(null);
-
-    useEffect(() => {
-        const formattedValue = value ? format(value, 'MM/dd/yyyy') : '';
-        setTextValue(formattedValue);
-    }, [value]);
-
-    const { elements, floatingStyles } = useFloating({
-        placement: 'bottom',
-        strategy: 'absolute',
-        offsetOptions: 4,
-        refWidth: true,
-    });
-
-    useOutsideClick({
-        elements: [elements.floating, containerRef.current],
-        callback: () => setCalendarVisible(false),
-        disabled: !calendarVisible,
-    });
-
-    const isValidDate = (next: string) => {
-        const parsedDate = parse(next, 'MM/dd/yyyy', new Date());
-        return isValid(parsedDate) ? parsedDate : undefined;
-    };
-
-    const validate = () => {
-        let nextDate: Date | undefined;
-        let nextTextValue = '';
-
-        if (parsableDate(textValue)) {
-            nextDate = isValidDate(textValue);
-            if (nextDate) nextTextValue = format(nextDate, 'MM/dd/yyyy');
-        }
-
-        setTextValue(nextTextValue);
-        onChange(nextDate);
-    };
-
-    const handleTextChange = (nextValue: string) => {
-        // Add slashes as the user types
-        if (/^\d{2}$/.test(nextValue) || /^\d{1,2}\/\d{2}$/.test(nextValue)) nextValue = `${nextValue}/`;
-
-        // Remove extra slashes
-        if (nextValue.endsWith('//')) nextValue = nextValue.slice(0, -1);
-
-        setTextValue(nextValue);
-
-        if (parsableDate(nextValue)) {
-            const next = isValidDate(nextValue);
-            if (next) onChange(next);
-        }
-    };
-
-    return (
-        <span data-bspk="date-input" ref={containerRef}>
-            <div
-                ref={(node) => {
-                    elements.setReference(node);
-                }}
-            >
-                <TextInput
-                    aria-errormessage={ariaErrorMessage || undefined}
-                    aria-label={ariaLabel}
-                    disabled={disabled}
-                    invalid={invalid || undefined}
-                    name={name}
-                    onBlur={() => validate()}
-                    onChange={handleTextChange}
-                    onKeyDown={(event) => {
-                        // allow select all and other keyboard shortcuts
-                        if (event.ctrlKey || event.metaKey) {
-                            return;
-                        }
-
-                        // handle backspace and delete to remove the slash and the number before it
-                        if (event.key === 'Backspace' || (event.key === 'Delete' && textValue.endsWith('/'))) {
-                            event.preventDefault();
-                            setTextValue((prev) => prev.slice(0, -2));
-                        }
-
-                        // if a single key and not a number or forward slash ignore
-                        if (event.key.length === 1 && !/[0-9/]/.test(event.key)) {
-                            event.preventDefault();
-                        }
-                    }}
-                    placeholder={placeholder || 'mm/dd/yyyy'}
-                    readOnly={readOnly}
-                    required={required}
-                    showClearButton={false}
-                    size={size}
-                    trailing={
-                        !disabled &&
-                        !readOnly && (
-                            <Button
-                                icon={<SvgEvent />}
-                                iconOnly
-                                label="Toggle calendar"
-                                onClick={() => setCalendarVisible((prev) => !prev)}
-                                variant="tertiary"
-                            />
-                        )
-                    }
-                    value={textValue}
-                />
-            </div>
-            {calendarVisible && (
-                <Portal>
-                    <div
-                        data-placement="bottom"
-                        ref={(node) => {
-                            elements.setFloating(node);
-                        }}
-                        style={{ ...floatingStyles, zIndex: 'var( --z-index-dropdown)' }}
-                    >
-                        <CalendarPicker
-                            onChange={(next) => {
-                                if (closeCalendarOnChange) setCalendarVisible(false);
-                                onChange(next);
-                            }}
-                            value={value}
-                            variant="elevated"
-                        />
-                    </div>
-                </Portal>
-            )}
-        </span>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DateInput/DateInputExample.tsx

@@ -1,17 +0,0 @@
-import { DateInputProps } from '.';
-import { ComponentExample, Preset } from '-/utils/demo';
-
-export const presets: Preset<DateInputProps>[] = [];
-
-export const DateInputExample: ComponentExample<DateInputProps> = {
-    defaultState: {},
-    disableProps: [],
-    presets,
-    render: ({ props, Component }) => {
-        const { value, ...restProps } = props;
-
-        return <Component {...restProps} value={value?.getDate ? value : undefined} />;
-    },
-    sections: [],
-    variants: false,
-};

package/src/components/DateInput/index.tsx

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

package/src/components/FormField/form-field.scss

@@ -1,19 +0,0 @@
-[data-bspk-utility='form-field'] {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sizing-01);
-
-    header {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-
-        label {
-            flex-grow: 1;
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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/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';