@bspk/ui 1.1.34 → 1.3.0

package/src/hooks/useCombobox.ts

@@ -1,176 +0,0 @@
-import { AriaAttributes, useId, useState } from 'react';
-
-import { EVENT_KEY } from '-/utils/keyboard';
-import { scrollElementIntoView } from '-/utils/scrollElementIntoView';
-
-import { CommonProps, InvalidPropsLibrary } from '..';
-
-import { useFloating, UseFloatingElements, UseFloatingProps } from './useFloating';
-
-export type UseComboboxProps = CommonProps<'disabled' | 'readOnly'> &
-    InvalidPropsLibrary &
-    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.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.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,
-    errorMessage,
-    invalid,
-    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;
-} {
-    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-errormessage': errorMessage || undefined,
-            'aria-activedescendant': selectedId || undefined,
-            'aria-controls': menuId,
-            'aria-disabled': disabled || undefined,
-            'aria-expanded': show,
-            'aria-haspopup': 'listbox' as AriaAttributes['aria-haspopup'],
-            'aria-invalid': invalid || undefined,
-            'aria-owns': menuId,
-            'aria-readonly': readOnly || undefined,
-            role: 'combobox',
-            tabIndex: 0,
-            onClick: () => {
-                setShow((prev) => !prev);
-            },
-            onKeyDownCapture,
-        },
-        closeMenu: () => setShow(false),
-        isOpen: show,
-        elements,
-    };
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/hooks/useOptionIconsInvalid.ts

@@ -1,58 +0,0 @@
-import { useMemo } from 'react';
-
-import { isValidIcon } from '-/utils/children';
-import { useErrorLogger } from '-/utils/errors';
-
-/**
- * A utility hook used within navigation components. Returns true if the icons are invalid.
- *
- * @param options [NavOption[]] The options to display. Each option has an optional leading icon.
- * @returns {boolean} True if the icons are invalid.
- */
-export function useOptionIconsInvalid<T extends NavOption>(options: T[] | undefined): boolean {
-    const { logError } = useErrorLogger();
-
-    return useMemo(() => {
-        if (!options || !Array.isArray(options)) return true;
-
-        const iconsInvalid = options.some((o) => o.icon) && !options.every((option) => isValidIcon(option.icon));
-
-        logError(
-            iconsInvalid,
-            'useNavOptions - Every option either must have a valid icon or none at all. All icons removed.',
-        );
-
-        return iconsInvalid;
-    }, [logError, options]);
-}
-
-export type NavOption = {
-    /**
-     * The label of the option. This is the text that will be displayed on the option.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /** The value of the option. If not provided, the label will be used as the value. */
-    value?: string;
-    /**
-     * The the icon to display before the label.
-     *
-     * @type BspkIcon
-     */
-    icon?: React.ReactNode;
-    /**
-     * The icon to display before the label when the option is active.
-     *
-     * @type BspkIcon
-     */
-    iconActive?: React.ReactNode;
-};
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/hooks/useValidChildren.ts

@@ -1,54 +0,0 @@
-import { ReactNode, useMemo } from 'react';
-
-import { getChildrenElements } from '-/utils/children';
-import { useErrorLogger } from '-/utils/errors';
-
-const VALID_CHILDREN = ['Icon', 'string'];
-
-export function useValidChildren(
-    componentNme: string,
-    children: ReactNode,
-    ariaLabel: string | undefined,
-    override?: boolean,
-): {
-    icon?: ReactNode | undefined;
-    label?: ReactNode | undefined;
-} {
-    const { logError } = useErrorLogger();
-
-    return useMemo(() => {
-        if (override) return { icon: undefined, label: undefined };
-
-        let icon: ReactNode | undefined;
-        let label: ReactNode;
-
-        const childrenArray = getChildrenElements(children);
-
-        logError(
-            childrenArray.length > 2,
-            `${componentNme} - component only accepts two children, ${childrenArray.length} were provided`,
-        );
-
-        childrenArray.forEach(({ child, name }) => {
-            const valid = VALID_CHILDREN.includes(name);
-
-            logError(!valid, `${componentNme} -  component only accepts two children, and Icon and string`);
-
-            if (valid) {
-                if (name === 'string') label = child;
-                if (name === 'Icon') icon = child;
-            }
-        });
-
-        logError(!icon && !label, `${componentNme} - component requires at least one child, an icon or a label`);
-
-        logError(
-            !!icon && !label && !ariaLabel,
-            `${componentNme} - component requires the aria-label property when only an icon is provided`,
-        );
-
-        return { icon, label };
-    }, [override, children, logError, componentNme, ariaLabel]);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/utils/children.ts

@@ -1,80 +0,0 @@
-import { ReactNode, Children, Fragment, isValidElement } from 'react';
-
-export function isValidIcon(child: unknown) {
-    return isChildNamed(child, 'Icon');
-}
-
-export function getChildName(child: unknown): string {
-    if (!child) return '';
-
-    const typeChild = typeof child;
-    if (['string', 'number', 'boolean', 'bigint'].includes(typeChild)) return typeChild;
-    return (isValidElement(child) ? (child.type as { bspkName?: string })?.bspkName : '') || '';
-}
-
-export function getChildTypeName(child: unknown): string {
-    if (!child) return '';
-    const typeChild = typeof child;
-
-    if (['string', 'number', 'boolean', 'bigint'].includes(typeChild)) return typeChild;
-
-    if (isValidElement(child)) {
-        if (typeof child.type === 'string') return child.type;
-        return child.type.name || '';
-    }
-
-    return '';
-}
-
-export function isChildNamed(child: unknown, name: string): boolean {
-    return getChildName(child) === name;
-}
-
-export function isReactFragment(node: unknown): node is ReactNode {
-    return isValidElement(node) && node.type === Fragment;
-}
-
-/**
- * Convert children to a flat array of children elements, removing any fragment wrappers in the process.
- *
- * @param children The children to convert to an array.
- * @param ignoreParent If true, ignore parent elements and only return the children
- */
-export function childrenToArray(children: ReactNode): ReactNode[] {
-    return Children.toArray(children).flatMap((child) => {
-        if (isValidElement(child)) {
-            if (isReactFragment(child) && child.props.children) return childrenToArray(child.props.children);
-            return child;
-        }
-        if (Array.isArray(child)) return childrenToArray(child);
-        if (child !== null && child !== undefined) return child;
-        return [];
-    }, []);
-}
-
-export type ChildElement =
-    | {
-          child: ReactNode;
-          name: string;
-      }
-    | {
-          child: string;
-          name: string;
-      };
-
-/**
- * Get the children of a component as an array of objects with the child and the name of the child.
- *
- * Filter out unknown empty strings or non-truthy children other than zeros.
- *
- * @param children The children to get the elements from.
- */
-export function getChildrenElements(children: ReactNode): ChildElement[] {
-    return (Array.isArray(children) ? children : childrenToArray(children))
-        .filter((child) => {
-            return (typeof child === 'string' && child.trim() !== '') || child === 0 || child;
-        })
-        .map((child) => ({ child, name: getChildName(child) }));
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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 */

package/src/utils/srOnly.ts

@@ -1,14 +0,0 @@
-/**
- * This function returns an object with a `data-sr-only` attribute if the `hide` parameter is true.
- *
- * This is useful for hiding content visually but keeping it accessible to screen readers.
- *
- * @param hide
- * @returns An object with a `data-sr-only` attribute if the `hide` parameter is true
- */
-
-export function srOnly(hide: unknown) {
-    return hide ? { 'data-sr-only': true } : {};
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */