@chromvoid/headless-ui 0.1.0

package/dist/radio-group/index.js

@@ -0,0 +1,150 @@
+import { action, atom } from '@reatom/core';
+import { createCompositeNavigation, } from '../interactions/composite-navigation.js';
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createRadioGroup(options) {
+    const idBase = options.idBase ?? 'radio-group';
+    const orientation = options.orientation ?? 'horizontal';
+    const itemById = new Map(options.items.map((item) => [item.id, item]));
+    const enabledIds = options.items.filter((item) => !item.disabled).map((item) => item.id);
+    const resolveInitialValue = () => {
+        if (options.initialValue != null && enabledIds.includes(options.initialValue)) {
+            return options.initialValue;
+        }
+        return null;
+    };
+    const initialValue = resolveInitialValue();
+    const initialActiveId = initialValue ??
+        (options.initialActiveId != null && enabledIds.includes(options.initialActiveId)
+            ? options.initialActiveId
+            : (enabledIds[0] ?? null));
+    const navigation = createCompositeNavigation({
+        idBase: `${idBase}.nav`,
+        items: options.items,
+        orientation,
+        focusStrategy: 'roving-tabindex',
+        wrapMode: 'wrap',
+        initialActiveId,
+    });
+    const valueAtom = atom(initialValue, `${idBase}.value`);
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    const syncSelectionWithActive = () => {
+        const activeId = navigation.state.activeId();
+        if (activeId != null) {
+            valueAtom.set(activeId);
+        }
+    };
+    const setDisabled = action((value) => {
+        isDisabledAtom.set(value);
+    }, `${idBase}.setDisabled`);
+    const select = action((id) => {
+        if (isDisabledAtom())
+            return;
+        if (!navigation.state.enabledIds().includes(id))
+            return;
+        navigation.actions.setActive(id);
+        valueAtom.set(id);
+    }, `${idBase}.select`);
+    const moveNext = action(() => {
+        if (isDisabledAtom())
+            return;
+        navigation.actions.moveNext();
+        syncSelectionWithActive();
+    }, `${idBase}.moveNext`);
+    const movePrev = action(() => {
+        if (isDisabledAtom())
+            return;
+        navigation.actions.movePrev();
+        syncSelectionWithActive();
+    }, `${idBase}.movePrev`);
+    const moveFirst = action(() => {
+        if (isDisabledAtom())
+            return;
+        navigation.actions.moveFirst();
+        syncSelectionWithActive();
+    }, `${idBase}.moveFirst`);
+    const moveLast = action(() => {
+        if (isDisabledAtom())
+            return;
+        navigation.actions.moveLast();
+        syncSelectionWithActive();
+    }, `${idBase}.moveLast`);
+    const handleKeyDown = action((event) => {
+        if (isDisabledAtom())
+            return;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                moveNext();
+                return;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                movePrev();
+                return;
+            case 'Home':
+                moveFirst();
+                return;
+            case 'End':
+                moveLast();
+                return;
+            default:
+                if (isSpaceKey(event.key)) {
+                    const activeId = navigation.state.activeId();
+                    if (activeId != null) {
+                        select(activeId);
+                    }
+                }
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setDisabled,
+        select,
+        moveNext,
+        movePrev,
+        moveFirst,
+        moveLast,
+        handleKeyDown,
+    };
+    const contracts = {
+        getRootProps() {
+            return {
+                role: 'radiogroup',
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-disabled': isDisabledAtom() ? 'true' : undefined,
+                'aria-orientation': orientation,
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getRadioProps(id) {
+            const item = itemById.get(id);
+            if (!item) {
+                throw new Error(`Unknown radio id: ${id}`);
+            }
+            const activeId = navigation.state.activeId();
+            const checked = valueAtom() === id;
+            const disabled = isDisabledAtom() || item.disabled === true;
+            return {
+                id: `${idBase}-radio-${id}`,
+                role: 'radio',
+                tabindex: activeId === id && !disabled ? '0' : '-1',
+                'aria-checked': checked ? 'true' : 'false',
+                'aria-disabled': disabled ? 'true' : undefined,
+                'aria-describedby': item.describedBy ? `${idBase}-radio-${id}-desc` : undefined,
+                'data-active': activeId === id ? 'true' : 'false',
+                onClick: () => select(id),
+                onKeyDown: handleKeyDown,
+            };
+        },
+    };
+    const state = {
+        value: valueAtom,
+        activeId: navigation.state.activeId,
+        isDisabled: isDisabledAtom,
+        orientation,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/select/index.d.ts

@@ -0,0 +1,92 @@
+import { type Atom, type Computed } from '@reatom/core';
+import { type ListboxOption, type ListboxSelectionMode } from '../listbox/index.js';
+export interface CreateSelectOptions {
+    options: readonly ListboxOption[];
+    idBase?: string;
+    ariaLabel?: string;
+    initialOpen?: boolean;
+    initialSelectedId?: string | null;
+    initialSelectedIds?: string[];
+    selectionMode?: ListboxSelectionMode;
+    closeOnSelect?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    onSelectedIdChange?: (selectedId: string | null) => void;
+}
+export interface SelectState {
+    isOpen: Atom<boolean>;
+    activeId: Atom<string | null>;
+    selectedIds: Atom<string[]>;
+    selectedId: Computed<string | null>;
+    selectedLabel: Computed<string | null>;
+    selectedLabels: Computed<string[]>;
+    restoreTargetId: Atom<string | null>;
+    disabled: Atom<boolean>;
+    required: Atom<boolean>;
+}
+export interface SelectKeyboardEventLike {
+    key: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}
+export interface SelectActions {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    select(id: string): void;
+    clear(): void;
+    setDisabled(value: boolean): void;
+    setRequired(value: boolean): void;
+    handleTriggerKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+    handleListboxKeyDown(event: SelectKeyboardEventLike): void;
+}
+export interface SelectTriggerProps {
+    id: string;
+    role: 'combobox';
+    tabindex: '0';
+    'aria-haspopup': 'listbox';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    'aria-activedescendant'?: string;
+    'aria-label'?: string;
+    'aria-disabled'?: 'true';
+    'aria-required'?: 'true';
+    'data-selected-id'?: string;
+    'data-selected-label'?: string;
+    onClick: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface SelectListboxProps {
+    id: string;
+    role: 'listbox';
+    tabindex: '0' | '-1';
+    'aria-label'?: string;
+    'aria-activedescendant'?: string;
+    'aria-multiselectable'?: 'true';
+    hidden: boolean;
+    onKeyDown: (event: SelectKeyboardEventLike) => void;
+}
+export interface SelectOptionProps {
+    id: string;
+    role: 'option';
+    tabindex: '-1';
+    'aria-selected': 'true' | 'false';
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+    onClick: () => void;
+}
+export interface SelectContracts {
+    getTriggerProps(): SelectTriggerProps;
+    getListboxProps(): SelectListboxProps;
+    getOptionProps(id: string): SelectOptionProps;
+    getValueText(): string;
+}
+export interface SelectModel {
+    readonly state: SelectState;
+    readonly actions: SelectActions;
+    readonly contracts: SelectContracts;
+}
+export declare function createSelect(options: CreateSelectOptions): SelectModel;

package/dist/select/index.js

@@ -0,0 +1,239 @@
+import { action, atom, computed } from '@reatom/core';
+import { createListbox } from '../listbox/index.js';
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createSelect(options) {
+    const idBase = options.idBase ?? 'select';
+    const closeOnSelect = options.closeOnSelect ?? true;
+    const selectionMode = options.selectionMode ?? 'single';
+    const isMultiple = selectionMode === 'multiple';
+    const optionById = new Map(options.options.map((option) => [option.id, option]));
+    const listbox = createListbox({
+        idBase: `${idBase}.listbox`,
+        options: options.options,
+        selectionMode,
+        ariaLabel: options.ariaLabel,
+        initialSelectedIds: options.initialSelectedIds ?? (options.initialSelectedId != null ? [options.initialSelectedId] : []),
+    });
+    const isOpenAtom = atom(options.initialOpen ?? false, `${idBase}.isOpen`);
+    const restoreTargetIdAtom = atom(null, `${idBase}.restoreTargetId`);
+    const disabledAtom = atom(options.disabled ?? false, `${idBase}.disabled`);
+    const requiredAtom = atom(options.required ?? false, `${idBase}.required`);
+    const selectedIdAtom = computed(() => listbox.state.selectedIds()[0] ?? null, `${idBase}.selectedId`);
+    const selectedLabelAtom = computed(() => {
+        const selectedId = selectedIdAtom();
+        if (selectedId == null)
+            return null;
+        const option = optionById.get(selectedId);
+        if (!option)
+            return null;
+        return option.label ?? selectedId;
+    }, `${idBase}.selectedLabel`);
+    const selectedLabelsAtom = computed(() => {
+        return listbox.state
+            .selectedIds()
+            .map((id) => optionById.get(id))
+            .filter((opt) => opt != null)
+            .map((opt) => opt.label ?? opt.id);
+    }, `${idBase}.selectedLabels`);
+    const openWithFocus = (focus) => {
+        if (disabledAtom())
+            return;
+        isOpenAtom.set(true);
+        listbox.actions.open();
+        restoreTargetIdAtom.set(null);
+        switch (focus) {
+            case 'first':
+                listbox.actions.moveFirst();
+                return;
+            case 'last':
+                listbox.actions.moveLast();
+                return;
+            case 'selected': {
+                const selectedId = selectedIdAtom();
+                if (selectedId != null) {
+                    listbox.actions.setActive(selectedId);
+                    return;
+                }
+                listbox.actions.moveFirst();
+            }
+        }
+    };
+    const open = action(() => {
+        openWithFocus('selected');
+    }, `${idBase}.open`);
+    const close = action(() => {
+        isOpenAtom.set(false);
+        listbox.actions.close();
+        restoreTargetIdAtom.set(`${idBase}-trigger`);
+    }, `${idBase}.close`);
+    const toggle = action(() => {
+        if (disabledAtom())
+            return;
+        if (isOpenAtom()) {
+            close();
+            return;
+        }
+        open();
+    }, `${idBase}.toggle`);
+    const select = action((id) => {
+        if (disabledAtom())
+            return;
+        const previous = selectedIdAtom();
+        if (isMultiple) {
+            listbox.actions.toggleSelected(id);
+        }
+        else {
+            listbox.actions.selectOnly(id);
+        }
+        const next = selectedIdAtom();
+        if (previous !== next) {
+            options.onSelectedIdChange?.(next);
+        }
+        if (closeOnSelect) {
+            close();
+        }
+    }, `${idBase}.select`);
+    const clear = action(() => {
+        if (disabledAtom())
+            return;
+        const previous = selectedIdAtom();
+        listbox.actions.clearSelected();
+        const next = selectedIdAtom();
+        if (previous !== next) {
+            options.onSelectedIdChange?.(next);
+        }
+    }, `${idBase}.clear`);
+    const setDisabled = action((value) => {
+        disabledAtom.set(value);
+    }, `${idBase}.setDisabled`);
+    const setRequired = action((value) => {
+        requiredAtom.set(value);
+    }, `${idBase}.setRequired`);
+    const handleTriggerKeyDown = action((event) => {
+        if (disabledAtom())
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'Home') {
+            openWithFocus('first');
+            return;
+        }
+        if (event.key === 'ArrowUp' || event.key === 'End') {
+            openWithFocus('last');
+            return;
+        }
+        if (event.key === 'Enter' || isSpaceKey(event.key)) {
+            toggle();
+        }
+    }, `${idBase}.handleTriggerKeyDown`);
+    const handleListboxKeyDown = action((event) => {
+        if (disabledAtom())
+            return;
+        if (!isOpenAtom())
+            return;
+        if (event.key === 'Escape' || event.key === 'Tab') {
+            close();
+            return;
+        }
+        if (event.key === 'Enter' || isSpaceKey(event.key)) {
+            const activeId = listbox.state.activeId();
+            if (activeId != null) {
+                select(activeId);
+            }
+            return;
+        }
+        listbox.actions.handleKeyDown({
+            key: event.key,
+            shiftKey: event.shiftKey ?? false,
+            ctrlKey: event.ctrlKey ?? false,
+            metaKey: event.metaKey ?? false,
+            altKey: event.altKey ?? false,
+        });
+    }, `${idBase}.handleListboxKeyDown`);
+    const actions = {
+        open,
+        close,
+        toggle,
+        select,
+        clear,
+        setDisabled,
+        setRequired,
+        handleTriggerKeyDown,
+        handleListboxKeyDown,
+    };
+    const contracts = {
+        getTriggerProps() {
+            const isOpen = isOpenAtom();
+            const activeId = listbox.state.activeId();
+            const isDisabled = disabledAtom();
+            const isRequired = requiredAtom();
+            let activedescendant;
+            if (isOpen && activeId != null) {
+                activedescendant = listbox.contracts.getOptionProps(activeId).id;
+            }
+            return {
+                id: `${idBase}-trigger`,
+                role: 'combobox',
+                tabindex: '0',
+                'aria-haspopup': 'listbox',
+                'aria-expanded': isOpen ? 'true' : 'false',
+                'aria-controls': `${idBase}-listbox`,
+                'aria-activedescendant': activedescendant,
+                'aria-label': options.ariaLabel,
+                'aria-disabled': isDisabled ? 'true' : undefined,
+                'aria-required': isRequired ? 'true' : undefined,
+                'data-selected-id': selectedIdAtom() ?? undefined,
+                'data-selected-label': selectedLabelAtom() ?? undefined,
+                onClick: toggle,
+                onKeyDown: handleTriggerKeyDown,
+            };
+        },
+        getListboxProps() {
+            const rootProps = listbox.contracts.getRootProps();
+            return {
+                id: `${idBase}-listbox`,
+                role: 'listbox',
+                tabindex: isOpenAtom() ? '0' : '-1',
+                'aria-label': rootProps['aria-label'],
+                'aria-activedescendant': rootProps['aria-activedescendant'],
+                'aria-multiselectable': isMultiple ? 'true' : undefined,
+                hidden: !isOpenAtom(),
+                onKeyDown: handleListboxKeyDown,
+            };
+        },
+        getOptionProps(id) {
+            const optionProps = listbox.contracts.getOptionProps(id);
+            return {
+                id: optionProps.id,
+                role: 'option',
+                tabindex: '-1',
+                'aria-selected': optionProps['aria-selected'] ?? 'false',
+                'aria-disabled': optionProps['aria-disabled'],
+                'data-active': optionProps['data-active'] ?? 'false',
+                onClick: () => select(id),
+            };
+        },
+        getValueText() {
+            const labels = selectedLabelsAtom();
+            if (labels.length === 0)
+                return options.placeholder ?? '';
+            if (isMultiple)
+                return labels.join(', ');
+            return labels[0] ?? options.placeholder ?? '';
+        },
+    };
+    const state = {
+        isOpen: isOpenAtom,
+        activeId: listbox.state.activeId,
+        selectedIds: listbox.state.selectedIds,
+        selectedId: selectedIdAtom,
+        selectedLabel: selectedLabelAtom,
+        selectedLabels: selectedLabelsAtom,
+        restoreTargetId: restoreTargetIdAtom,
+        disabled: disabledAtom,
+        required: requiredAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/sidebar/index.d.ts

@@ -0,0 +1,74 @@
+import { type Atom, type Computed } from '@reatom/core';
+export interface CreateSidebarOptions {
+    id?: string;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    closeOnEscape?: boolean;
+    closeOnOutsidePointer?: boolean;
+    initialFocusId?: string;
+    ariaLabel?: string;
+}
+export interface SidebarState {
+    expanded: Atom<boolean>;
+    overlayOpen: Atom<boolean>;
+    mobile: Atom<boolean>;
+    isFocusTrapped: Computed<boolean>;
+    shouldLockScroll: Computed<boolean>;
+    restoreTargetId: Atom<string | null>;
+    initialFocusTargetId: Atom<string | null>;
+}
+export interface SidebarActions {
+    toggle(): void;
+    expand(): void;
+    collapse(): void;
+    openOverlay(): void;
+    closeOverlay(intent?: string): void;
+    setMobile(value: boolean): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+    handleOutsidePointer(): void;
+    handleOutsideFocus(): void;
+}
+export interface SidebarProps {
+    id: string;
+    role: 'navigation' | 'dialog';
+    'aria-label': string;
+    'data-collapsed': 'true' | 'false';
+    'data-mobile': 'true' | 'false';
+    'aria-modal'?: 'true';
+    'data-initial-focus'?: string;
+    onKeyDown?: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface SidebarToggleProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    'aria-label': string;
+    onClick: () => void;
+}
+export interface SidebarOverlayProps {
+    id: string;
+    hidden: boolean;
+    'data-open': 'true' | 'false';
+    onPointerDownOutside: () => void;
+    onFocusOutside: () => void;
+}
+export interface SidebarRailProps {
+    id: string;
+    role: 'navigation';
+    'aria-label': string;
+    'data-visible': 'true' | 'false';
+}
+export interface SidebarContracts {
+    getSidebarProps(): SidebarProps;
+    getToggleProps(): SidebarToggleProps;
+    getOverlayProps(): SidebarOverlayProps;
+    getRailProps(): SidebarRailProps;
+}
+export interface SidebarModel {
+    readonly state: SidebarState;
+    readonly actions: SidebarActions;
+    readonly contracts: SidebarContracts;
+}
+export declare function createSidebar(options?: CreateSidebarOptions): SidebarModel;