@chromvoid/headless-ui 0.1.0

package/dist/context-menu/index.d.ts

@@ -0,0 +1,111 @@
+import { type Atom } from '@reatom/core';
+export type ContextMenuOpenSource = 'pointer' | 'keyboard' | 'programmatic';
+export type ContextMenuItemType = 'item' | 'separator' | 'group-label' | 'checkbox' | 'radio' | 'submenu';
+export interface ContextMenuItem {
+    id: string;
+    label?: string;
+    disabled?: boolean;
+    type?: ContextMenuItemType;
+    checked?: boolean;
+    group?: string;
+    children?: readonly ContextMenuItem[];
+}
+export interface CreateContextMenuOptions {
+    items: readonly ContextMenuItem[];
+    idBase?: string;
+    ariaLabel?: string;
+    closeOnSelect?: boolean;
+    closeOnOutsidePointer?: boolean;
+    longPressDuration?: number;
+}
+export interface ContextMenuState {
+    isOpen: Atom<boolean>;
+    activeId: Atom<string | null>;
+    anchorX: Atom<number>;
+    anchorY: Atom<number>;
+    openedBy: Atom<ContextMenuOpenSource | null>;
+    restoreTargetId: Atom<string | null>;
+    checkedIds: Atom<ReadonlySet<string>>;
+    openSubmenuId: Atom<string | null>;
+    submenuActiveId: Atom<string | null>;
+}
+export interface ContextMenuKeyboardEventLike {
+    key: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}
+export interface ContextMenuActions {
+    openAt(x: number, y: number, source?: ContextMenuOpenSource): void;
+    close(): void;
+    select(id: string): void;
+    handleTargetKeyDown(event: ContextMenuKeyboardEventLike): void;
+    handleKeyDown(event: ContextMenuKeyboardEventLike): void;
+    handleOutsidePointer(): void;
+    handleTouchStart(point: {
+        clientX: number;
+        clientY: number;
+    }): void;
+    handleTouchMove(): void;
+    handleTouchEnd(): void;
+}
+export interface ContextMenuTargetProps {
+    id: string;
+    onContextMenu: (event: {
+        clientX: number;
+        clientY: number;
+        preventDefault?: () => void;
+    }) => void;
+    onKeyDown: (event: ContextMenuKeyboardEventLike) => void;
+}
+export interface ContextMenuProps {
+    id: string;
+    role: 'menu';
+    tabindex: '-1';
+    hidden: boolean;
+    'aria-label'?: string;
+    'data-anchor-x': string;
+    'data-anchor-y': string;
+    onKeyDown: (event: ContextMenuKeyboardEventLike) => void;
+}
+export interface ContextMenuItemProps {
+    id: string;
+    role: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
+    tabindex: '-1';
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+    'aria-checked'?: 'true' | 'false';
+    'aria-haspopup'?: 'menu';
+    'aria-expanded'?: 'true' | 'false';
+    onClick: () => void;
+}
+export interface ContextMenuSeparatorProps {
+    id: string;
+    role: 'separator';
+}
+export interface ContextMenuGroupLabelProps {
+    id: string;
+    role: 'presentation';
+    'aria-label'?: string;
+}
+export interface ContextMenuSubmenuProps {
+    id: string;
+    role: 'menu';
+    tabindex: '-1';
+    hidden: boolean;
+}
+export interface ContextMenuContracts {
+    getTargetProps(): ContextMenuTargetProps;
+    getMenuProps(): ContextMenuProps;
+    getItemProps(id: string): ContextMenuItemProps;
+    getSeparatorProps(id: string): ContextMenuSeparatorProps;
+    getGroupLabelProps(id: string): ContextMenuGroupLabelProps;
+    getSubmenuProps(id: string): ContextMenuSubmenuProps;
+}
+export interface ContextMenuModel {
+    readonly state: ContextMenuState;
+    readonly actions: ContextMenuActions;
+    readonly contracts: ContextMenuContracts;
+}
+export declare function createContextMenu(options: CreateContextMenuOptions): ContextMenuModel;

package/dist/context-menu/index.js

@@ -0,0 +1,372 @@
+import { action, atom } from '@reatom/core';
+import { isTypeaheadEvent, advanceTypeaheadState, findTypeaheadMatch, createInitialTypeaheadState, normalizeTypeaheadText, } from '../interactions/typeahead.js';
+import { createMenu } from '../menu/index.js';
+const isActionableItem = (item) => item.type == null ||
+    item.type === 'item' ||
+    item.type === 'checkbox' ||
+    item.type === 'radio' ||
+    item.type === 'submenu';
+const buildItemMap = (items) => {
+    const map = new Map();
+    for (const item of items) {
+        map.set(item.id, item);
+        if (item.type === 'submenu' && item.children) {
+            for (const child of item.children) {
+                map.set(child.id, child);
+            }
+        }
+    }
+    return map;
+};
+const TYPEAHEAD_TIMEOUT = 500;
+export function createContextMenu(options) {
+    const idBase = options.idBase ?? 'context-menu';
+    const longPressDuration = options.longPressDuration ?? 500;
+    const allItemMap = buildItemMap(options.items);
+    const actionableItems = options.items
+        .filter(isActionableItem)
+        .map((item) => ({ id: item.id, label: item.label, disabled: item.disabled }));
+    const anchorXAtom = atom(0, `${idBase}.anchorX`);
+    const anchorYAtom = atom(0, `${idBase}.anchorY`);
+    const openedByAtom = atom(null, `${idBase}.openedBy`);
+    const restoreTargetIdAtom = atom(null, `${idBase}.restoreTargetId`);
+    const initialCheckedIds = new Set();
+    for (const item of options.items) {
+        if ((item.type === 'checkbox' || item.type === 'radio') && item.checked) {
+            initialCheckedIds.add(item.id);
+        }
+    }
+    const checkedIdsAtom = atom(initialCheckedIds, `${idBase}.checkedIds`);
+    const openSubmenuIdAtom = atom(null, `${idBase}.openSubmenuId`);
+    const submenuActiveIdAtom = atom(null, `${idBase}.submenuActiveId`);
+    const submenuItems = new Map();
+    for (const item of options.items) {
+        if (item.type === 'submenu' && item.children) {
+            const enabledIds = item.children.filter((c) => !c.disabled).map((c) => c.id);
+            submenuItems.set(item.id, { enabledIds, allChildren: item.children });
+        }
+    }
+    let typeaheadState = createInitialTypeaheadState();
+    const typeaheadItems = actionableItems
+        .filter((item) => !item.disabled && item.label != null)
+        .map((item) => ({ id: item.id, text: normalizeTypeaheadText(item.label) }));
+    let longPressTimer = null;
+    const menu = createMenu({
+        idBase,
+        items: actionableItems,
+        ariaLabel: options.ariaLabel,
+        closeOnSelect: options.closeOnSelect,
+    });
+    const clearLongPressTimer = () => {
+        if (longPressTimer != null) {
+            clearTimeout(longPressTimer);
+            longPressTimer = null;
+        }
+    };
+    const openAt = action((x, y, source = 'programmatic') => {
+        anchorXAtom.set(x);
+        anchorYAtom.set(y);
+        openedByAtom.set(source);
+        restoreTargetIdAtom.set(null);
+        openSubmenuIdAtom.set(null);
+        submenuActiveIdAtom.set(null);
+        menu.actions.open(source);
+    }, `${idBase}.openAt`);
+    const close = action(() => {
+        menu.actions.close();
+        menu.actions.setActive(null);
+        openedByAtom.set(null);
+        restoreTargetIdAtom.set(`${idBase}-target`);
+        openSubmenuIdAtom.set(null);
+        submenuActiveIdAtom.set(null);
+    }, `${idBase}.close`);
+    const closeSubmenu = () => {
+        openSubmenuIdAtom.set(null);
+        submenuActiveIdAtom.set(null);
+    };
+    const handleCheckableSelect = (id) => {
+        const item = allItemMap.get(id);
+        if (!item)
+            return false;
+        if (item.type === 'checkbox') {
+            const current = new Set(checkedIdsAtom());
+            if (current.has(id)) {
+                current.delete(id);
+            }
+            else {
+                current.add(id);
+            }
+            checkedIdsAtom.set(current);
+            return true;
+        }
+        if (item.type === 'radio' && item.group) {
+            const current = new Set(checkedIdsAtom());
+            for (const groupItem of options.items) {
+                if (groupItem.type === 'radio' && groupItem.group === item.group) {
+                    current.delete(groupItem.id);
+                }
+            }
+            current.add(id);
+            checkedIdsAtom.set(current);
+            return true;
+        }
+        return false;
+    };
+    const select = action((id) => {
+        const item = allItemMap.get(id);
+        if (!item || item.disabled)
+            return;
+        if (item.type === 'separator' || item.type === 'group-label')
+            return;
+        handleCheckableSelect(id);
+        const isSubmenuChild = !actionableItems.some((ai) => ai.id === id);
+        if (isSubmenuChild) {
+            const closeOnSelect = options.closeOnSelect ?? true;
+            if (closeOnSelect) {
+                close();
+            }
+            return;
+        }
+        const wasOpen = menu.state.isOpen();
+        menu.actions.select(id);
+        if (wasOpen && !menu.state.isOpen()) {
+            openedByAtom.set(null);
+            restoreTargetIdAtom.set(`${idBase}-target`);
+            openSubmenuIdAtom.set(null);
+            submenuActiveIdAtom.set(null);
+        }
+    }, `${idBase}.select`);
+    const handleTargetKeyDown = action((event) => {
+        const isContextKey = event.key === 'ContextMenu';
+        const isShiftF10 = event.key === 'F10' && event.shiftKey === true;
+        if (isContextKey || isShiftF10) {
+            openAt(anchorXAtom(), anchorYAtom(), 'keyboard');
+        }
+    }, `${idBase}.handleTargetKeyDown`);
+    const handleSubmenuKeyDown = (event) => {
+        const openSubId = openSubmenuIdAtom();
+        if (openSubId == null)
+            return false;
+        const subInfo = submenuItems.get(openSubId);
+        if (!subInfo)
+            return false;
+        if (event.key === 'Escape' || event.key === 'ArrowLeft') {
+            closeSubmenu();
+            return true;
+        }
+        if (event.key === 'ArrowDown') {
+            const activeId = submenuActiveIdAtom();
+            const idx = activeId != null ? subInfo.enabledIds.indexOf(activeId) : -1;
+            const nextIdx = (idx + 1) % subInfo.enabledIds.length;
+            submenuActiveIdAtom.set(subInfo.enabledIds[nextIdx] ?? null);
+            return true;
+        }
+        if (event.key === 'ArrowUp') {
+            const activeId = submenuActiveIdAtom();
+            const idx = activeId != null ? subInfo.enabledIds.indexOf(activeId) : 0;
+            const nextIdx = (idx - 1 + subInfo.enabledIds.length) % subInfo.enabledIds.length;
+            submenuActiveIdAtom.set(subInfo.enabledIds[nextIdx] ?? null);
+            return true;
+        }
+        if (event.key === 'Home') {
+            submenuActiveIdAtom.set(subInfo.enabledIds[0] ?? null);
+            return true;
+        }
+        if (event.key === 'End') {
+            submenuActiveIdAtom.set(subInfo.enabledIds[subInfo.enabledIds.length - 1] ?? null);
+            return true;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            const activeId = submenuActiveIdAtom();
+            if (activeId != null) {
+                select(activeId);
+            }
+            return true;
+        }
+        return false;
+    };
+    const handleKeyDown = action((event) => {
+        if (!menu.state.isOpen())
+            return;
+        const keyEvent = {
+            key: event.key,
+            shiftKey: event.shiftKey ?? false,
+            ctrlKey: event.ctrlKey ?? false,
+            metaKey: event.metaKey ?? false,
+            altKey: event.altKey ?? false,
+        };
+        if (handleSubmenuKeyDown(event))
+            return;
+        if (event.key === 'Escape' || event.key === 'Tab') {
+            close();
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            const activeId = menu.state.activeId();
+            if (activeId != null && submenuItems.has(activeId)) {
+                const subInfo = submenuItems.get(activeId);
+                openSubmenuIdAtom.set(activeId);
+                submenuActiveIdAtom.set(subInfo.enabledIds[0] ?? null);
+                return;
+            }
+        }
+        if (isTypeaheadEvent(keyEvent)) {
+            const { query, next } = advanceTypeaheadState(typeaheadState, event.key, Date.now(), TYPEAHEAD_TIMEOUT);
+            typeaheadState = next;
+            const currentActiveId = menu.state.activeId();
+            const startIndex = currentActiveId != null ? typeaheadItems.findIndex((item) => item.id === currentActiveId) : 0;
+            const matchId = findTypeaheadMatch(query, typeaheadItems, startIndex >= 0 ? startIndex : 0);
+            if (matchId != null) {
+                menu.actions.setActive(matchId);
+            }
+            return;
+        }
+        menu.actions.handleMenuKeyDown(keyEvent);
+    }, `${idBase}.handleKeyDown`);
+    const handleOutsidePointer = action(() => {
+        if (options.closeOnOutsidePointer === false)
+            return;
+        if (!menu.state.isOpen())
+            return;
+        close();
+    }, `${idBase}.handleOutsidePointer`);
+    const handleTouchStart = action((point) => {
+        clearLongPressTimer();
+        longPressTimer = setTimeout(() => {
+            openAt(point.clientX, point.clientY, 'pointer');
+            longPressTimer = null;
+        }, longPressDuration);
+    }, `${idBase}.handleTouchStart`);
+    const handleTouchMove = action(() => {
+        clearLongPressTimer();
+    }, `${idBase}.handleTouchMove`);
+    const handleTouchEnd = action(() => {
+        clearLongPressTimer();
+    }, `${idBase}.handleTouchEnd`);
+    const actions = {
+        openAt,
+        close,
+        select,
+        handleTargetKeyDown,
+        handleKeyDown,
+        handleOutsidePointer,
+        handleTouchStart,
+        handleTouchMove,
+        handleTouchEnd,
+    };
+    const contracts = {
+        getTargetProps() {
+            return {
+                id: `${idBase}-target`,
+                onContextMenu: (event) => {
+                    event.preventDefault?.();
+                    openAt(event.clientX, event.clientY, 'pointer');
+                },
+                onKeyDown: handleTargetKeyDown,
+            };
+        },
+        getMenuProps() {
+            const menuProps = menu.contracts.getMenuProps();
+            return {
+                ...menuProps,
+                hidden: !menu.state.isOpen(),
+                'data-anchor-x': String(anchorXAtom()),
+                'data-anchor-y': String(anchorYAtom()),
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getItemProps(id) {
+            const contextItem = allItemMap.get(id);
+            if (!contextItem) {
+                throw new Error(`Unknown context-menu item id: ${id}`);
+            }
+            const itemType = contextItem.type ?? 'item';
+            if (itemType === 'submenu') {
+                const baseItem = menu.contracts.getItemProps(id);
+                const isSubOpen = openSubmenuIdAtom() === id;
+                return {
+                    ...baseItem,
+                    role: 'menuitem',
+                    'aria-haspopup': 'menu',
+                    'aria-expanded': isSubOpen ? 'true' : 'false',
+                    onClick: () => select(id),
+                };
+            }
+            if (itemType === 'checkbox') {
+                const baseItem = menu.contracts.getItemProps(id);
+                const isChecked = checkedIdsAtom().has(id);
+                return {
+                    ...baseItem,
+                    role: 'menuitemcheckbox',
+                    'aria-checked': isChecked ? 'true' : 'false',
+                    onClick: () => select(id),
+                };
+            }
+            if (itemType === 'radio') {
+                const baseItem = menu.contracts.getItemProps(id);
+                const isChecked = checkedIdsAtom().has(id);
+                return {
+                    ...baseItem,
+                    role: 'menuitemradio',
+                    'aria-checked': isChecked ? 'true' : 'false',
+                    onClick: () => select(id),
+                };
+            }
+            const isInMenu = actionableItems.some((ai) => ai.id === id);
+            if (!isInMenu) {
+                const subActiveId = submenuActiveIdAtom();
+                return {
+                    id: `${idBase}-item-${id}`,
+                    role: 'menuitem',
+                    tabindex: '-1',
+                    'aria-disabled': contextItem.disabled ? 'true' : undefined,
+                    'data-active': (subActiveId === id ? 'true' : 'false'),
+                    onClick: () => select(id),
+                };
+            }
+            const item = menu.contracts.getItemProps(id);
+            return {
+                ...item,
+                onClick: () => select(id),
+            };
+        },
+        getSeparatorProps(id) {
+            return {
+                id: `${idBase}-separator-${id}`,
+                role: 'separator',
+            };
+        },
+        getGroupLabelProps(id) {
+            const item = allItemMap.get(id);
+            return {
+                id: `${idBase}-group-${id}`,
+                role: 'presentation',
+                'aria-label': item?.label,
+            };
+        },
+        getSubmenuProps(id) {
+            return {
+                id: `${idBase}-submenu-${id}`,
+                role: 'menu',
+                tabindex: '-1',
+                hidden: openSubmenuIdAtom() !== id,
+            };
+        },
+    };
+    const state = {
+        isOpen: menu.state.isOpen,
+        activeId: menu.state.activeId,
+        anchorX: anchorXAtom,
+        anchorY: anchorYAtom,
+        openedBy: openedByAtom,
+        restoreTargetId: restoreTargetIdAtom,
+        checkedIds: checkedIdsAtom,
+        openSubmenuId: openSubmenuIdAtom,
+        submenuActiveId: submenuActiveIdAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/copy-button/index.d.ts

@@ -0,0 +1,62 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type CopyButtonStatus = 'idle' | 'success' | 'error';
+export type CopyButtonValue = string | (() => Promise<string>);
+export interface ClipboardAdapter {
+    writeText(text: string): Promise<void>;
+}
+export interface CreateCopyButtonOptions {
+    value?: CopyButtonValue;
+    feedbackDuration?: number;
+    isDisabled?: boolean;
+    ariaLabel?: string;
+    onCopy?: (value: string) => void;
+    onError?: (error: unknown) => void;
+    clipboard?: ClipboardAdapter;
+}
+export interface CopyButtonState {
+    status: Atom<CopyButtonStatus>;
+    isDisabled: Atom<boolean>;
+    isCopying: Atom<boolean>;
+    feedbackDuration: Atom<number>;
+    value: Atom<CopyButtonValue>;
+    isIdle: Computed<boolean>;
+    isSuccess: Computed<boolean>;
+    isError: Computed<boolean>;
+    isUnavailable: Computed<boolean>;
+}
+export interface CopyButtonActions {
+    copy(): Promise<void>;
+    setDisabled(v: boolean): void;
+    setFeedbackDuration(v: number): void;
+    setValue(v: CopyButtonValue): void;
+    reset(): void;
+}
+export interface CopyButtonProps {
+    role: 'button';
+    tabindex: '0' | '-1';
+    'aria-disabled': 'true' | 'false';
+    'aria-label'?: string;
+    onClick: (e: Event) => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+    onKeyUp: (e: KeyboardEvent) => void;
+}
+export interface CopyStatusProps {
+    role: 'status';
+    'aria-live': 'polite';
+    'aria-atomic': 'true';
+}
+export interface CopyIconProps {
+    'aria-hidden': 'true';
+    hidden?: boolean;
+}
+export interface CopyButtonContracts {
+    getButtonProps(): CopyButtonProps;
+    getStatusProps(): CopyStatusProps;
+    getIconContainerProps(which: 'copy' | 'success' | 'error'): CopyIconProps;
+}
+export interface CopyButtonModel {
+    readonly state: CopyButtonState;
+    readonly actions: CopyButtonActions;
+    readonly contracts: CopyButtonContracts;
+}
+export declare function createCopyButton(options?: CreateCopyButtonOptions): CopyButtonModel;