@chromvoid/headless-ui 0.1.0

package/dist/combobox/index.js

@@ -0,0 +1,431 @@
+import { action, atom, computed } from '@reatom/core';
+import { mapListboxKeyboardIntent } from '../interactions/keyboard-intents.js';
+import { advanceTypeaheadState, createInitialTypeaheadState, findTypeaheadMatch, isTypeaheadEvent, normalizeTypeaheadText, } from '../interactions/typeahead.js';
+const normalizeText = (value) => value.trim().toLocaleLowerCase();
+const createDefaultFilter = (matchMode) => (option, inputValue) => {
+    const needle = normalizeText(inputValue);
+    if (needle.length === 0)
+        return true;
+    const haystack = normalizeText(option.label);
+    if (matchMode === 'startsWith') {
+        return haystack.startsWith(needle);
+    }
+    return haystack.includes(needle);
+};
+function isOptionGroup(item) {
+    return 'options' in item && Array.isArray(item.options);
+}
+function flattenOptions(items) {
+    const result = [];
+    for (const item of items) {
+        if (isOptionGroup(item)) {
+            result.push(...item.options);
+        }
+        else {
+            result.push(item);
+        }
+    }
+    return result;
+}
+export function createCombobox(options) {
+    const idBase = options.idBase ?? 'cb';
+    const comboboxType = options.type ?? 'editable';
+    const isMultiple = options.multiple ?? false;
+    const closeOnSelect = options.closeOnSelect ?? (isMultiple ? false : true);
+    const matchMode = options.matchMode ?? 'includes';
+    const filter = options.filter ?? createDefaultFilter(matchMode);
+    const isSelectOnly = comboboxType === 'select-only';
+    const allFlatOptions = flattenOptions(options.options);
+    const optionById = new Map(allFlatOptions.map((option) => [option.id, option]));
+    const groupById = new Map();
+    for (const item of options.options) {
+        if (isOptionGroup(item)) {
+            groupById.set(item.id, item);
+        }
+    }
+    const typeaheadEnabled = options.typeahead !== false &&
+        !(typeof options.typeahead === 'object' && options.typeahead.enabled === false);
+    const typeaheadTimeoutMs = typeof options.typeahead === 'object' && options.typeahead.timeoutMs != null
+        ? Math.max(0, options.typeahead.timeoutMs)
+        : 500;
+    const inputValueAtom = atom(options.initialInputValue ?? '', `${idBase}.inputValue`);
+    const isOpenAtom = atom(options.initialOpen ?? false, `${idBase}.isOpen`);
+    const activeIdAtom = atom(null, `${idBase}.activeId`);
+    const initialSelectedIds = options.initialSelectedIds ?? (options.initialSelectedId ? [options.initialSelectedId] : []);
+    const selectedIdsAtom = atom(initialSelectedIds, `${idBase}.selectedIds`);
+    const selectedIdAtom = atom(initialSelectedIds.length > 0 ? initialSelectedIds[0] : null, `${idBase}.selectedId`);
+    const setSelectedIds = (ids) => {
+        selectedIdsAtom.set(ids);
+        selectedIdAtom.set(ids.length > 0 ? ids[0] : null);
+    };
+    const setSelectedId = (id) => {
+        selectedIdAtom.set(id);
+        selectedIdsAtom.set(id != null ? [id] : []);
+    };
+    const hasSelectionAtom = computed(() => selectedIdsAtom().length > 0, `${idBase}.hasSelection`);
+    const typeAtom = computed(() => comboboxType, `${idBase}.type`);
+    const multipleAtom = computed(() => isMultiple, `${idBase}.multiple`);
+    const inputId = `${idBase}-input`;
+    const listboxId = `${idBase}-listbox`;
+    const optionDomId = (id) => `${idBase}-option-${id}`;
+    const groupDomId = (groupId) => `${idBase}-group-${groupId}`;
+    const groupLabelDomId = (groupId) => `${idBase}-group-label-${groupId}`;
+    let typeaheadState = createInitialTypeaheadState();
+    const resetTypeahead = () => {
+        typeaheadState = createInitialTypeaheadState();
+    };
+    const getFlatVisibleOptions = () => {
+        if (isSelectOnly) {
+            return allFlatOptions;
+        }
+        return allFlatOptions.filter((option) => filter(option, inputValueAtom()));
+    };
+    const getVisibleOptions = () => {
+        const inputValue = inputValueAtom();
+        const hasGroups = options.options.some(isOptionGroup);
+        if (!hasGroups) {
+            if (isSelectOnly) {
+                return [...allFlatOptions];
+            }
+            return allFlatOptions.filter((option) => filter(option, inputValue));
+        }
+        const result = [];
+        for (const item of options.options) {
+            if (isOptionGroup(item)) {
+                const filteredOptions = isSelectOnly
+                    ? item.options
+                    : item.options.filter((opt) => filter(opt, inputValue));
+                if (filteredOptions.length > 0) {
+                    result.push({ id: item.id, label: item.label, options: filteredOptions });
+                }
+            }
+            else {
+                if (isSelectOnly || filter(item, inputValue)) {
+                    result.push(item);
+                }
+            }
+        }
+        return result;
+    };
+    const getEnabledVisibleOptionIds = () => getFlatVisibleOptions()
+        .filter((option) => !option.disabled)
+        .map((option) => option.id);
+    const ensureActiveVisible = () => {
+        const enabledIds = getEnabledVisibleOptionIds();
+        if (enabledIds.length === 0) {
+            activeIdAtom.set(null);
+            return;
+        }
+        const activeId = activeIdAtom();
+        if (activeId != null && enabledIds.includes(activeId)) {
+            return;
+        }
+        activeIdAtom.set(enabledIds[0] ?? null);
+    };
+    const setActive = (id) => {
+        if (id == null) {
+            activeIdAtom.set(null);
+            return;
+        }
+        const option = optionById.get(id);
+        if (!option || option.disabled)
+            return;
+        const visibleIds = getFlatVisibleOptions().map((item) => item.id);
+        if (!visibleIds.includes(id))
+            return;
+        activeIdAtom.set(id);
+    };
+    const move = (direction) => {
+        const enabledIds = getEnabledVisibleOptionIds();
+        if (enabledIds.length === 0) {
+            activeIdAtom.set(null);
+            return;
+        }
+        const activeId = activeIdAtom();
+        if (activeId == null || !enabledIds.includes(activeId)) {
+            activeIdAtom.set(enabledIds[0] ?? null);
+            return;
+        }
+        const currentIndex = enabledIds.indexOf(activeId);
+        if (currentIndex < 0) {
+            activeIdAtom.set(enabledIds[0] ?? null);
+            return;
+        }
+        const nextIndex = (currentIndex + direction + enabledIds.length) % enabledIds.length;
+        activeIdAtom.set(enabledIds[nextIndex] ?? null);
+    };
+    const toggleOptionInternal = (id) => {
+        if (!isMultiple)
+            return;
+        const option = optionById.get(id);
+        if (!option || option.disabled)
+            return;
+        const current = selectedIdsAtom();
+        if (current.includes(id)) {
+            setSelectedIds(current.filter((sid) => sid !== id));
+        }
+        else {
+            setSelectedIds([...current, id]);
+        }
+        activeIdAtom.set(id);
+    };
+    const commitById = (id) => {
+        const option = optionById.get(id);
+        if (!option || option.disabled)
+            return;
+        if (isMultiple) {
+            toggleOptionInternal(id);
+            if (isSelectOnly) {
+                inputValueAtom.set('');
+            }
+        }
+        else {
+            setSelectedId(id);
+            inputValueAtom.set(option.label);
+            activeIdAtom.set(id);
+        }
+        if (closeOnSelect) {
+            isOpenAtom.set(false);
+        }
+    };
+    const handleTypeahead = (event) => {
+        const effectiveTypeaheadEnabled = isSelectOnly || typeaheadEnabled;
+        if (!effectiveTypeaheadEnabled || !isTypeaheadEvent(event))
+            return false;
+        const enabledVisibleOptions = getFlatVisibleOptions().filter((option) => !option.disabled);
+        if (enabledVisibleOptions.length === 0)
+            return true;
+        const typeaheadItems = enabledVisibleOptions.map((option) => ({
+            id: option.id,
+            text: normalizeTypeaheadText(option.label),
+        }));
+        const activeEnabledIndex = activeIdAtom() == null ? -1 : enabledVisibleOptions.findIndex((option) => option.id === activeIdAtom());
+        const startIndex = activeEnabledIndex < 0 ? 0 : (activeEnabledIndex + 1) % enabledVisibleOptions.length;
+        const now = Date.now();
+        const { query, next } = advanceTypeaheadState(typeaheadState, normalizeTypeaheadText(event.key), now, typeaheadTimeoutMs);
+        const matchedId = findTypeaheadMatch(query, typeaheadItems, startIndex);
+        if (matchedId != null) {
+            setActive(matchedId);
+        }
+        typeaheadState = next;
+        return true;
+    };
+    const open = action(() => {
+        isOpenAtom.set(true);
+        resetTypeahead();
+        ensureActiveVisible();
+    }, `${idBase}.open`);
+    const close = action(() => {
+        isOpenAtom.set(false);
+        resetTypeahead();
+    }, `${idBase}.close`);
+    const setInputValue = action((value) => {
+        if (isSelectOnly)
+            return;
+        inputValueAtom.set(value);
+        isOpenAtom.set(true);
+        resetTypeahead();
+        ensureActiveVisible();
+    }, `${idBase}.setInputValue`);
+    const setActiveAction = action((id) => {
+        setActive(id);
+    }, `${idBase}.setActive`);
+    const moveNext = action(() => {
+        isOpenAtom.set(true);
+        move(1);
+    }, `${idBase}.moveNext`);
+    const movePrev = action(() => {
+        isOpenAtom.set(true);
+        move(-1);
+    }, `${idBase}.movePrev`);
+    const moveFirst = action(() => {
+        isOpenAtom.set(true);
+        const first = getEnabledVisibleOptionIds()[0];
+        activeIdAtom.set(first ?? null);
+    }, `${idBase}.moveFirst`);
+    const moveLast = action(() => {
+        isOpenAtom.set(true);
+        const enabledIds = getEnabledVisibleOptionIds();
+        activeIdAtom.set(enabledIds[enabledIds.length - 1] ?? null);
+    }, `${idBase}.moveLast`);
+    const commitActive = action(() => {
+        const activeId = activeIdAtom();
+        if (activeId == null)
+            return;
+        commitById(activeId);
+    }, `${idBase}.commitActive`);
+    const selectAction = action((id) => {
+        commitById(id);
+    }, `${idBase}.select`);
+    const toggleOption = action((id) => {
+        toggleOptionInternal(id);
+    }, `${idBase}.toggleOption`);
+    const removeSelected = action((id) => {
+        const current = selectedIdsAtom();
+        if (!current.includes(id))
+            return;
+        setSelectedIds(current.filter((sid) => sid !== id));
+    }, `${idBase}.removeSelected`);
+    const clearSelection = action(() => {
+        setSelectedIds([]);
+    }, `${idBase}.clearSelection`);
+    const clearAction = action(() => {
+        setSelectedIds([]);
+        inputValueAtom.set('');
+    }, `${idBase}.clear`);
+    const handleKeyDown = action((event) => {
+        if (isSelectOnly && (event.key === ' ' || event.key === 'Spacebar')) {
+            if (!isOpenAtom()) {
+                open();
+            }
+            else {
+                commitActive();
+            }
+            return;
+        }
+        if (isSelectOnly && event.key === 'Enter' && !isOpenAtom()) {
+            open();
+            return;
+        }
+        if (isSelectOnly && handleTypeahead(event)) {
+            return;
+        }
+        if (!isSelectOnly && handleTypeahead(event)) {
+            return;
+        }
+        resetTypeahead();
+        const intent = mapListboxKeyboardIntent(event, {
+            orientation: 'vertical',
+            selectionMode: 'single',
+            rangeSelectionEnabled: false,
+        });
+        if (intent == null)
+            return;
+        switch (intent) {
+            case 'NAV_NEXT':
+                moveNext();
+                return;
+            case 'NAV_PREV':
+                movePrev();
+                return;
+            case 'NAV_FIRST':
+                moveFirst();
+                return;
+            case 'NAV_LAST':
+                moveLast();
+                return;
+            case 'ACTIVATE':
+                commitActive();
+                return;
+            case 'DISMISS':
+                close();
+                return;
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        open,
+        close,
+        setInputValue,
+        setActive: setActiveAction,
+        moveNext,
+        movePrev,
+        moveFirst,
+        moveLast,
+        commitActive,
+        select: selectAction,
+        toggleOption,
+        removeSelected,
+        clearSelection,
+        clear: clearAction,
+        handleKeyDown,
+    };
+    const initialId = selectedIdAtom();
+    if (initialId != null && !isMultiple) {
+        const selected = optionById.get(initialId);
+        if (selected != null) {
+            inputValueAtom.set(selected.label);
+            activeIdAtom.set(selected.id);
+        }
+        else {
+            setSelectedId(null);
+        }
+    }
+    const contracts = {
+        getVisibleOptions,
+        getFlatVisibleOptions,
+        getInputProps() {
+            const activeId = activeIdAtom();
+            const props = {
+                id: inputId,
+                role: 'combobox',
+                tabindex: '0',
+                'aria-haspopup': 'listbox',
+                'aria-expanded': isOpenAtom() ? 'true' : 'false',
+                'aria-controls': listboxId,
+                'aria-activedescendant': isOpenAtom() && activeId != null ? optionDomId(activeId) : undefined,
+                'aria-label': options.ariaLabel,
+            };
+            if (!isSelectOnly) {
+                props['aria-autocomplete'] = 'list';
+            }
+            return props;
+        },
+        getListboxProps() {
+            const props = {
+                id: listboxId,
+                role: 'listbox',
+                tabindex: '-1',
+                'aria-label': options.ariaLabel,
+            };
+            if (isMultiple) {
+                props['aria-multiselectable'] = 'true';
+            }
+            return props;
+        },
+        getOptionProps(id) {
+            const option = optionById.get(id);
+            if (!option) {
+                throw new Error(`Unknown combobox option id: ${id}`);
+            }
+            const currentSelectedIds = selectedIdsAtom();
+            return {
+                id: optionDomId(id),
+                role: 'option',
+                tabindex: '-1',
+                'aria-selected': currentSelectedIds.includes(id) ? 'true' : 'false',
+                'aria-disabled': option.disabled ? 'true' : undefined,
+                'data-active': activeIdAtom() === id ? 'true' : 'false',
+            };
+        },
+        getGroupProps(groupId) {
+            return {
+                id: groupDomId(groupId),
+                role: 'group',
+                'aria-labelledby': groupLabelDomId(groupId),
+            };
+        },
+        getGroupLabelProps(groupId) {
+            return {
+                id: groupLabelDomId(groupId),
+                role: 'presentation',
+            };
+        },
+    };
+    const state = {
+        inputValue: inputValueAtom,
+        isOpen: isOpenAtom,
+        activeId: activeIdAtom,
+        selectedId: selectedIdAtom,
+        selectedIds: selectedIdsAtom,
+        hasSelection: hasSelectionAtom,
+        type: typeAtom,
+        multiple: multipleAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/command-palette/index.d.ts

@@ -0,0 +1,73 @@
+import { type Atom } from '@reatom/core';
+import { type ComboboxInputProps, type ComboboxListboxProps, type ComboboxOption, type ComboboxOptionProps } from '../combobox/index.js';
+export interface CommandPaletteKeyboardEventLike {
+    key: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}
+export interface CreateCommandPaletteOptions {
+    commands: readonly ComboboxOption[];
+    idBase?: string;
+    ariaLabel?: string;
+    initialOpen?: boolean;
+    openShortcutKey?: string;
+    closeOnExecute?: boolean;
+    closeOnOutsidePointer?: boolean;
+    onExecute?: (commandId: string) => void;
+}
+export interface CommandPaletteState {
+    isOpen: Atom<boolean>;
+    inputValue: Atom<string>;
+    activeId: Atom<string | null>;
+    selectedId: Atom<string | null>;
+    lastExecutedId: Atom<string | null>;
+    restoreTargetId: Atom<string | null>;
+}
+export interface CommandPaletteActions {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    execute(id: string): void;
+    setInputValue(value: string): void;
+    handleGlobalKeyDown(event: CommandPaletteKeyboardEventLike): void;
+    handlePaletteKeyDown(event: CommandPaletteKeyboardEventLike): void;
+    handleOutsidePointer(): void;
+}
+export interface CommandPaletteTriggerProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-haspopup': 'dialog';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    onClick: () => void;
+}
+export interface CommandPaletteDialogProps {
+    id: string;
+    role: 'dialog';
+    tabindex: '-1';
+    hidden: boolean;
+    'aria-modal': 'true';
+    'aria-label'?: string;
+    onKeyDown: (event: CommandPaletteKeyboardEventLike) => void;
+    onPointerDownOutside: () => void;
+}
+export interface CommandPaletteOptionProps extends ComboboxOptionProps {
+    onClick: () => void;
+}
+export interface CommandPaletteContracts {
+    getTriggerProps(): CommandPaletteTriggerProps;
+    getDialogProps(): CommandPaletteDialogProps;
+    getInputProps(): ComboboxInputProps;
+    getListboxProps(): ComboboxListboxProps;
+    getOptionProps(id: string): CommandPaletteOptionProps;
+    getVisibleCommands(): readonly ComboboxOption[];
+}
+export interface CommandPaletteModel {
+    readonly state: CommandPaletteState;
+    readonly actions: CommandPaletteActions;
+    readonly contracts: CommandPaletteContracts;
+}
+export declare function createCommandPalette(options: CreateCommandPaletteOptions): CommandPaletteModel;

package/dist/command-palette/index.js

@@ -0,0 +1,147 @@
+import { action, atom } from '@reatom/core';
+import { createCombobox, } from '../combobox/index.js';
+export function createCommandPalette(options) {
+    const idBase = options.idBase ?? 'command-palette';
+    const openShortcutKey = options.openShortcutKey ?? 'k';
+    const closeOnExecute = options.closeOnExecute ?? true;
+    const commandIds = new Set(options.commands.map((command) => command.id));
+    const lastExecutedIdAtom = atom(null, `${idBase}.lastExecutedId`);
+    const restoreTargetIdAtom = atom(null, `${idBase}.restoreTargetId`);
+    const combobox = createCombobox({
+        idBase: `${idBase}.combobox`,
+        options: options.commands,
+        ariaLabel: options.ariaLabel,
+        initialOpen: options.initialOpen ?? false,
+    });
+    const open = action(() => {
+        combobox.actions.open();
+        restoreTargetIdAtom.set(null);
+    }, `${idBase}.open`);
+    const close = action(() => {
+        combobox.actions.close();
+        restoreTargetIdAtom.set(`${idBase}-trigger`);
+    }, `${idBase}.close`);
+    const toggle = action(() => {
+        if (combobox.state.isOpen()) {
+            close();
+            return;
+        }
+        open();
+    }, `${idBase}.toggle`);
+    const execute = action((id) => {
+        if (!commandIds.has(id))
+            return;
+        combobox.state.selectedId.set(id);
+        combobox.state.activeId.set(id);
+        lastExecutedIdAtom.set(id);
+        options.onExecute?.(id);
+        if (closeOnExecute) {
+            close();
+        }
+    }, `${idBase}.execute`);
+    const setInputValue = action((value) => {
+        combobox.actions.setInputValue(value);
+    }, `${idBase}.setInputValue`);
+    const handleGlobalKeyDown = action((event) => {
+        const isShortcut = (event.ctrlKey === true || event.metaKey === true) && event.key.toLowerCase() === openShortcutKey;
+        if (isShortcut) {
+            toggle();
+        }
+    }, `${idBase}.handleGlobalKeyDown`);
+    const handlePaletteKeyDown = action((event) => {
+        if (!combobox.state.isOpen())
+            return;
+        if (event.key === 'Escape') {
+            close();
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            const activeId = combobox.state.activeId() ??
+                combobox.contracts.getFlatVisibleOptions().find((option) => !option.disabled)?.id ??
+                null;
+            if (activeId != null) {
+                execute(activeId);
+            }
+            return;
+        }
+        combobox.actions.handleKeyDown({
+            key: event.key,
+            shiftKey: event.shiftKey ?? false,
+            ctrlKey: event.ctrlKey ?? false,
+            metaKey: event.metaKey ?? false,
+            altKey: event.altKey ?? false,
+        });
+    }, `${idBase}.handlePaletteKeyDown`);
+    const handleOutsidePointer = action(() => {
+        if (options.closeOnOutsidePointer === false)
+            return;
+        close();
+    }, `${idBase}.handleOutsidePointer`);
+    const actions = {
+        open,
+        close,
+        toggle,
+        execute,
+        setInputValue,
+        handleGlobalKeyDown,
+        handlePaletteKeyDown,
+        handleOutsidePointer,
+    };
+    const contracts = {
+        getTriggerProps() {
+            return {
+                id: `${idBase}-trigger`,
+                role: 'button',
+                tabindex: '0',
+                'aria-haspopup': 'dialog',
+                'aria-expanded': combobox.state.isOpen() ? 'true' : 'false',
+                'aria-controls': `${idBase}-dialog`,
+                onClick: toggle,
+            };
+        },
+        getDialogProps() {
+            return {
+                id: `${idBase}-dialog`,
+                role: 'dialog',
+                tabindex: '-1',
+                hidden: !combobox.state.isOpen(),
+                'aria-modal': 'true',
+                'aria-label': options.ariaLabel,
+                onKeyDown: handlePaletteKeyDown,
+                onPointerDownOutside: handleOutsidePointer,
+            };
+        },
+        getInputProps() {
+            return combobox.contracts.getInputProps();
+        },
+        getListboxProps() {
+            return combobox.contracts.getListboxProps();
+        },
+        getOptionProps(id) {
+            const optionProps = combobox.contracts.getOptionProps(id);
+            return {
+                ...optionProps,
+                onClick: () => execute(id),
+            };
+        },
+        getVisibleCommands() {
+            return combobox.contracts.getVisibleOptions();
+        },
+    };
+    const state = {
+        isOpen: combobox.state.isOpen,
+        inputValue: combobox.state.inputValue,
+        activeId: combobox.state.activeId,
+        selectedId: combobox.state.selectedId,
+        lastExecutedId: lastExecutedIdAtom,
+        restoreTargetId: restoreTargetIdAtom,
+    };
+    if (options.initialOpen) {
+        open();
+    }
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}