@chromvoid/headless-ui 0.1.0

package/dist/table/index.js

@@ -0,0 +1,377 @@
+import { action, atom, computed } from '@reatom/core';
+const rowIndexById = (rows) => new Map(rows.map((row, index) => [row.id, row.index ?? index + 1]));
+const columnIndexById = (columns) => new Map(columns.map((column, index) => [column.id, column.index ?? index + 1]));
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export function createTable(options) {
+    if (!options.ariaLabel && !options.ariaLabelledBy) {
+        throw new Error('Table requires either ariaLabel or ariaLabelledBy for accessibility');
+    }
+    const idBase = options.idBase ?? 'table';
+    const selectable = options.selectable ?? false;
+    const interactive = options.interactive ?? false;
+    const pageSize = Math.max(options.pageSize ?? 10, 1);
+    const columnIds = new Set(options.columns.map((column) => column.id));
+    const rowIds = new Set(options.rows.map((row) => row.id));
+    const rowIdsList = options.rows.map((row) => row.id);
+    const rowIndexMap = rowIndexById(options.rows);
+    const columnIndexMap = columnIndexById(options.columns);
+    const sortColumnIdAtom = atom(options.initialSortColumnId ?? null, `${idBase}.sortColumnId`);
+    const sortDirectionAtom = atom(options.initialSortDirection ?? 'none', `${idBase}.sortDirection`);
+    const rowCountAtom = computed(() => Math.max(options.totalRowCount ?? options.rows.length, options.rows.length), `${idBase}.rowCount`);
+    const columnCountAtom = computed(() => Math.max(options.totalColumnCount ?? options.columns.length, options.columns.length), `${idBase}.columnCount`);
+    const sortBy = action((columnId, direction) => {
+        if (direction === 'none') {
+            sortColumnIdAtom.set(null);
+            sortDirectionAtom.set('none');
+            return;
+        }
+        if (!columnIds.has(columnId))
+            return;
+        sortColumnIdAtom.set(columnId);
+        sortDirectionAtom.set(direction);
+    }, `${idBase}.sortBy`);
+    const clearSort = action(() => {
+        sortColumnIdAtom.set(null);
+        sortDirectionAtom.set('none');
+    }, `${idBase}.clearSort`);
+    const resolveInitialSelectedRowIds = () => {
+        if (selectable === false)
+            return new Set();
+        const initial = (options.initialSelectedRowIds ?? []).filter((id) => rowIds.has(id));
+        if (selectable === 'single') {
+            return initial.length > 0 ? new Set([initial[0]]) : new Set();
+        }
+        return new Set(initial);
+    };
+    const selectedRowIdsAtom = atom(resolveInitialSelectedRowIds(), `${idBase}.selectedRowIds`);
+    const selectRow = action((rowId) => {
+        if (selectable === false)
+            return;
+        if (!rowIds.has(rowId))
+            return;
+        if (selectable === 'single') {
+            selectedRowIdsAtom.set(new Set([rowId]));
+        }
+        else {
+            const next = new Set(selectedRowIdsAtom());
+            next.add(rowId);
+            selectedRowIdsAtom.set(next);
+        }
+    }, `${idBase}.selectRow`);
+    const deselectRow = action((rowId) => {
+        if (selectable === false)
+            return;
+        const current = selectedRowIdsAtom();
+        if (!current.has(rowId))
+            return;
+        const next = new Set(current);
+        next.delete(rowId);
+        selectedRowIdsAtom.set(next);
+    }, `${idBase}.deselectRow`);
+    const toggleRowSelection = action((rowId) => {
+        if (selectable === false)
+            return;
+        if (!rowIds.has(rowId))
+            return;
+        const current = selectedRowIdsAtom();
+        if (current.has(rowId)) {
+            const next = new Set(current);
+            next.delete(rowId);
+            selectedRowIdsAtom.set(next);
+        }
+        else {
+            if (selectable === 'single') {
+                selectedRowIdsAtom.set(new Set([rowId]));
+            }
+            else {
+                const next = new Set(current);
+                next.add(rowId);
+                selectedRowIdsAtom.set(next);
+            }
+        }
+    }, `${idBase}.toggleRowSelection`);
+    const selectAllRows = action(() => {
+        if (selectable !== 'multi')
+            return;
+        selectedRowIdsAtom.set(new Set(rowIdsList));
+    }, `${idBase}.selectAllRows`);
+    const clearSelection = action(() => {
+        if (selectable === false)
+            return;
+        selectedRowIdsAtom.set(new Set());
+    }, `${idBase}.clearSelection`);
+    const resolveInitialFocus = (index, max) => {
+        if (!interactive)
+            return null;
+        if (index != null)
+            return clamp(index, 0, max);
+        return 0;
+    };
+    const focusedRowIndexAtom = atom(resolveInitialFocus(options.initialFocusedRowIndex, options.rows.length - 1), `${idBase}.focusedRowIndex`);
+    const focusedColumnIndexAtom = atom(resolveInitialFocus(options.initialFocusedColumnIndex, options.columns.length - 1), `${idBase}.focusedColumnIndex`);
+    const moveFocus = action((direction) => {
+        if (!interactive)
+            return;
+        const row = focusedRowIndexAtom();
+        const col = focusedColumnIndexAtom();
+        if (row == null || col == null)
+            return;
+        const maxRow = options.rows.length - 1;
+        const maxCol = options.columns.length - 1;
+        switch (direction) {
+            case 'up':
+                focusedRowIndexAtom.set(Math.max(0, row - 1));
+                break;
+            case 'down':
+                focusedRowIndexAtom.set(Math.min(maxRow, row + 1));
+                break;
+            case 'left':
+                focusedColumnIndexAtom.set(Math.max(0, col - 1));
+                break;
+            case 'right':
+                focusedColumnIndexAtom.set(Math.min(maxCol, col + 1));
+                break;
+        }
+    }, `${idBase}.moveFocus`);
+    const moveFocusToStart = action(() => {
+        if (!interactive)
+            return;
+        focusedRowIndexAtom.set(0);
+        focusedColumnIndexAtom.set(0);
+    }, `${idBase}.moveFocusToStart`);
+    const moveFocusToEnd = action(() => {
+        if (!interactive)
+            return;
+        focusedRowIndexAtom.set(options.rows.length - 1);
+        focusedColumnIndexAtom.set(options.columns.length - 1);
+    }, `${idBase}.moveFocusToEnd`);
+    const moveFocusToRowStart = action(() => {
+        if (!interactive)
+            return;
+        focusedColumnIndexAtom.set(0);
+    }, `${idBase}.moveFocusToRowStart`);
+    const moveFocusToRowEnd = action(() => {
+        if (!interactive)
+            return;
+        focusedColumnIndexAtom.set(options.columns.length - 1);
+    }, `${idBase}.moveFocusToRowEnd`);
+    const setFocusedCell = action((rowIndex, columnIndex) => {
+        if (!interactive)
+            return;
+        focusedRowIndexAtom.set(clamp(rowIndex, 0, options.rows.length - 1));
+        focusedColumnIndexAtom.set(clamp(columnIndex, 0, options.columns.length - 1));
+    }, `${idBase}.setFocusedCell`);
+    const pageUpAction = action(() => {
+        if (!interactive)
+            return;
+        const row = focusedRowIndexAtom();
+        if (row == null)
+            return;
+        focusedRowIndexAtom.set(Math.max(0, row - pageSize));
+    }, `${idBase}.pageUp`);
+    const pageDownAction = action(() => {
+        if (!interactive)
+            return;
+        const row = focusedRowIndexAtom();
+        if (row == null)
+            return;
+        focusedRowIndexAtom.set(Math.min(options.rows.length - 1, row + pageSize));
+    }, `${idBase}.pageDown`);
+    const handleKeyDown = action((event) => {
+        if (!interactive)
+            return;
+        const ctrlOrMeta = event.ctrlKey === true || event.metaKey === true;
+        switch (event.key) {
+            case 'ArrowUp':
+                moveFocus('up');
+                return;
+            case 'ArrowDown':
+                moveFocus('down');
+                return;
+            case 'ArrowLeft':
+                moveFocus('left');
+                return;
+            case 'ArrowRight':
+                moveFocus('right');
+                return;
+            case 'Home':
+                if (ctrlOrMeta) {
+                    moveFocusToStart();
+                }
+                else {
+                    moveFocusToRowStart();
+                }
+                return;
+            case 'End':
+                if (ctrlOrMeta) {
+                    moveFocusToEnd();
+                }
+                else {
+                    moveFocusToRowEnd();
+                }
+                return;
+            case 'PageUp':
+                pageUpAction();
+                return;
+            case 'PageDown':
+                pageDownAction();
+                return;
+            case ' ': {
+                if (selectable === false)
+                    return;
+                const focusedRow = focusedRowIndexAtom();
+                if (focusedRow == null)
+                    return;
+                const rowId = rowIdsList[focusedRow];
+                if (rowId != null) {
+                    toggleRowSelection(rowId);
+                }
+                return;
+            }
+            case 'a': {
+                if (ctrlOrMeta && selectable === 'multi') {
+                    selectAllRows();
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        sortBy,
+        clearSort,
+        selectRow,
+        deselectRow,
+        toggleRowSelection,
+        selectAllRows,
+        clearSelection,
+        moveFocus,
+        moveFocusToStart,
+        moveFocusToEnd,
+        moveFocusToRowStart,
+        moveFocusToRowEnd,
+        setFocusedCell,
+        pageUp: pageUpAction,
+        pageDown: pageDownAction,
+        handleKeyDown,
+    };
+    const getRowPositionalIndex = (rowId) => {
+        const idx = rowIdsList.indexOf(rowId);
+        return idx >= 0 ? idx : -1;
+    };
+    const getColumnPositionalIndex = (columnId) => {
+        for (let i = 0; i < options.columns.length; i++) {
+            if (options.columns[i].id === columnId)
+                return i;
+        }
+        return -1;
+    };
+    const contracts = {
+        getTableProps() {
+            const props = {
+                id: `${idBase}-root`,
+                role: interactive ? 'grid' : 'table',
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-rowcount': rowCountAtom(),
+                'aria-colcount': columnCountAtom(),
+            };
+            if (selectable === 'multi') {
+                props['aria-multiselectable'] = 'true';
+            }
+            if (interactive) {
+                props.tabindex = '0';
+            }
+            return props;
+        },
+        getRowProps(rowId) {
+            if (!rowIds.has(rowId)) {
+                throw new Error(`Unknown table row id: ${rowId}`);
+            }
+            const props = {
+                id: `${idBase}-row-${rowId}`,
+                role: 'row',
+                'aria-rowindex': rowIndexMap.get(rowId) ?? 1,
+            };
+            if (selectable !== false) {
+                props['aria-selected'] = selectedRowIdsAtom().has(rowId) ? 'true' : 'false';
+            }
+            return props;
+        },
+        getCellProps(rowId, columnId, span) {
+            if (!rowIds.has(rowId)) {
+                throw new Error(`Unknown table row id for cell: ${rowId}`);
+            }
+            if (!columnIds.has(columnId)) {
+                throw new Error(`Unknown table column id for cell: ${columnId}`);
+            }
+            const props = {
+                id: `${idBase}-cell-${rowId}-${columnId}`,
+                role: interactive ? 'gridcell' : 'cell',
+                'aria-colindex': columnIndexMap.get(columnId) ?? 1,
+                'aria-colspan': span?.colspan,
+                'aria-rowspan': span?.rowspan,
+            };
+            if (interactive) {
+                const rowPos = getRowPositionalIndex(rowId);
+                const colPos = getColumnPositionalIndex(columnId);
+                const focusedRow = focusedRowIndexAtom();
+                const focusedCol = focusedColumnIndexAtom();
+                const isFocused = rowPos === focusedRow && colPos === focusedCol;
+                props.tabindex = isFocused ? '0' : '-1';
+                props['data-active'] = isFocused ? 'true' : 'false';
+            }
+            return props;
+        },
+        getColumnHeaderProps(columnId) {
+            if (!columnIds.has(columnId)) {
+                throw new Error(`Unknown table column id for header: ${columnId}`);
+            }
+            const isSorted = sortColumnIdAtom() === columnId;
+            const sortDirection = sortDirectionAtom();
+            const props = {
+                id: `${idBase}-column-header-${columnId}`,
+                role: 'columnheader',
+                'aria-colindex': columnIndexMap.get(columnId) ?? 1,
+                'aria-sort': isSorted ? sortDirection : 'none',
+            };
+            if (interactive) {
+                const colPos = getColumnPositionalIndex(columnId);
+                const focusedCol = focusedColumnIndexAtom();
+                props.tabindex = focusedCol === colPos && focusedRowIndexAtom() === null ? '0' : '-1';
+            }
+            return props;
+        },
+        getRowHeaderProps(rowId, columnId) {
+            if (!rowIds.has(rowId)) {
+                throw new Error(`Unknown table row id for row header: ${rowId}`);
+            }
+            if (!columnIds.has(columnId)) {
+                throw new Error(`Unknown table column id for row header: ${columnId}`);
+            }
+            return {
+                id: `${idBase}-row-header-${rowId}-${columnId}`,
+                role: 'rowheader',
+                'aria-rowindex': rowIndexMap.get(rowId) ?? 1,
+                'aria-colindex': columnIndexMap.get(columnId) ?? 1,
+            };
+        },
+    };
+    const state = {
+        rowCount: rowCountAtom,
+        columnCount: columnCountAtom,
+        sortColumnId: sortColumnIdAtom,
+        sortDirection: sortDirectionAtom,
+        selectedRowIds: selectedRowIdsAtom,
+        focusedRowIndex: focusedRowIndexAtom,
+        focusedColumnIndex: focusedColumnIndexAtom,
+        selectable,
+        interactive,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/tabs/index.d.ts

@@ -0,0 +1,63 @@
+import { type Atom } from '@reatom/core';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsActivationMode = 'automatic' | 'manual';
+export interface TabItem {
+    id: string;
+    disabled?: boolean;
+}
+export interface CreateTabsOptions {
+    tabs: readonly TabItem[];
+    idBase?: string;
+    ariaLabel?: string;
+    orientation?: TabsOrientation;
+    activationMode?: TabsActivationMode;
+    initialActiveTabId?: string | null;
+    initialSelectedTabId?: string | null;
+}
+export interface TabsState {
+    activeTabId: Atom<string | null>;
+    selectedTabId: Atom<string | null>;
+}
+export interface TabListProps {
+    id: string;
+    role: 'tablist';
+    'aria-orientation': TabsOrientation;
+    'aria-label'?: string;
+}
+export interface TabProps {
+    id: string;
+    role: 'tab';
+    tabindex: '0' | '-1';
+    'aria-selected': 'true' | 'false';
+    'aria-controls': string;
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+    'data-selected': 'true' | 'false';
+}
+export interface TabPanelProps {
+    id: string;
+    role: 'tabpanel';
+    tabindex: '0' | '-1';
+    'aria-labelledby': string;
+    hidden: boolean;
+}
+export interface TabsActions {
+    setActive(id: string | null): void;
+    select(id: string): void;
+    moveNext(): void;
+    movePrev(): void;
+    moveFirst(): void;
+    moveLast(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key' | 'shiftKey' | 'ctrlKey' | 'metaKey' | 'altKey'>): void;
+}
+export interface TabsContracts {
+    getTabListProps(): TabListProps;
+    getTabProps(id: string): TabProps;
+    getPanelProps(id: string): TabPanelProps;
+}
+export interface TabsModel {
+    readonly state: TabsState;
+    readonly actions: TabsActions;
+    readonly contracts: TabsContracts;
+}
+export declare function createTabs(options: CreateTabsOptions): TabsModel;

package/dist/tabs/index.js

@@ -0,0 +1,174 @@
+import { action, atom } from '@reatom/core';
+import { mapListboxKeyboardIntent } from '../interactions/keyboard-intents.js';
+export function createTabs(options) {
+    const idBase = options.idBase ?? 'tabs';
+    const orientation = options.orientation ?? 'horizontal';
+    const activationMode = options.activationMode ?? 'automatic';
+    const tabById = new Map(options.tabs.map((tab) => [tab.id, tab]));
+    const enabledTabIds = options.tabs.filter((tab) => !tab.disabled).map((tab) => tab.id);
+    const resolveInitial = (candidate) => {
+        if (candidate != null && enabledTabIds.includes(candidate)) {
+            return candidate;
+        }
+        return enabledTabIds[0] ?? null;
+    };
+    const initialSelected = resolveInitial(options.initialSelectedTabId);
+    const initialActive = resolveInitial(options.initialActiveTabId ?? initialSelected);
+    const activeTabIdAtom = atom(initialActive, `${idBase}.activeTabId`);
+    const selectedTabIdAtom = atom(initialSelected, `${idBase}.selectedTabId`);
+    if (selectedTabIdAtom() == null && activeTabIdAtom() != null) {
+        selectedTabIdAtom.set(activeTabIdAtom());
+    }
+    const tabListId = `${idBase}-tablist`;
+    const tabDomId = (id) => `${idBase}-tab-${id}`;
+    const panelDomId = (id) => `${idBase}-panel-${id}`;
+    const applyAutoActivation = () => {
+        if (activationMode === 'automatic' && activeTabIdAtom() != null) {
+            selectedTabIdAtom.set(activeTabIdAtom());
+        }
+    };
+    const move = (direction) => {
+        if (enabledTabIds.length === 0) {
+            activeTabIdAtom.set(null);
+            return;
+        }
+        const activeTabId = activeTabIdAtom();
+        if (activeTabId == null || !enabledTabIds.includes(activeTabId)) {
+            activeTabIdAtom.set(enabledTabIds[0] ?? null);
+            applyAutoActivation();
+            return;
+        }
+        const currentIndex = enabledTabIds.indexOf(activeTabId);
+        const nextIndex = (currentIndex + direction + enabledTabIds.length) % enabledTabIds.length;
+        activeTabIdAtom.set(enabledTabIds[nextIndex] ?? null);
+        applyAutoActivation();
+    };
+    const setActive = action((id) => {
+        if (id == null) {
+            activeTabIdAtom.set(null);
+            return;
+        }
+        if (!enabledTabIds.includes(id))
+            return;
+        activeTabIdAtom.set(id);
+        applyAutoActivation();
+    }, `${idBase}.setActive`);
+    const select = action((id) => {
+        if (!enabledTabIds.includes(id))
+            return;
+        activeTabIdAtom.set(id);
+        selectedTabIdAtom.set(id);
+    }, `${idBase}.select`);
+    const moveNext = action(() => {
+        move(1);
+    }, `${idBase}.moveNext`);
+    const movePrev = action(() => {
+        move(-1);
+    }, `${idBase}.movePrev`);
+    const moveFirst = action(() => {
+        activeTabIdAtom.set(enabledTabIds[0] ?? null);
+        applyAutoActivation();
+    }, `${idBase}.moveFirst`);
+    const moveLast = action(() => {
+        activeTabIdAtom.set(enabledTabIds[enabledTabIds.length - 1] ?? null);
+        applyAutoActivation();
+    }, `${idBase}.moveLast`);
+    const handleKeyDown = action((event) => {
+        const intent = mapListboxKeyboardIntent(event, {
+            orientation,
+            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':
+            case 'TOGGLE_SELECTION': {
+                const activeTabId = activeTabIdAtom();
+                if (activeTabId != null) {
+                    select(activeTabId);
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setActive,
+        select,
+        moveNext,
+        movePrev,
+        moveFirst,
+        moveLast,
+        handleKeyDown,
+    };
+    const contracts = {
+        getTabListProps() {
+            const props = {
+                id: tabListId,
+                role: 'tablist',
+                'aria-orientation': orientation,
+            };
+            if (options.ariaLabel != null) {
+                props['aria-label'] = options.ariaLabel;
+            }
+            return props;
+        },
+        getTabProps(id) {
+            const tab = tabById.get(id);
+            if (!tab) {
+                throw new Error(`Unknown tab id: ${id}`);
+            }
+            const isActive = activeTabIdAtom() === id;
+            const isSelected = selectedTabIdAtom() === id;
+            const props = {
+                id: tabDomId(id),
+                role: 'tab',
+                tabindex: isActive ? '0' : '-1',
+                'aria-selected': isSelected ? 'true' : 'false',
+                'aria-controls': panelDomId(id),
+                'data-active': isActive ? 'true' : 'false',
+                'data-selected': isSelected ? 'true' : 'false',
+            };
+            if (tab.disabled) {
+                props['aria-disabled'] = 'true';
+            }
+            return props;
+        },
+        getPanelProps(id) {
+            if (!tabById.has(id)) {
+                throw new Error(`Unknown tab id for panel: ${id}`);
+            }
+            const isSelected = selectedTabIdAtom() === id;
+            return {
+                id: panelDomId(id),
+                role: 'tabpanel',
+                tabindex: isSelected ? '0' : '-1',
+                'aria-labelledby': tabDomId(id),
+                hidden: !isSelected,
+            };
+        },
+    };
+    const state = {
+        activeTabId: activeTabIdAtom,
+        selectedTabId: selectedTabIdAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/textarea/index.d.ts

@@ -0,0 +1,68 @@
+import { type Atom } from '@reatom/core';
+export type TextareaResize = 'none' | 'vertical';
+export interface CreateTextareaOptions {
+    idBase?: string;
+    value?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    rows?: number;
+    cols?: number;
+    minLength?: number;
+    maxLength?: number;
+    resize?: TextareaResize;
+    onInput?: (value: string) => void;
+}
+export interface TextareaState {
+    value: Atom<string>;
+    disabled: Atom<boolean>;
+    readonly: Atom<boolean>;
+    required: Atom<boolean>;
+    placeholder: Atom<string>;
+    rows: Atom<number>;
+    cols: Atom<number>;
+    minLength: Atom<number | undefined>;
+    maxLength: Atom<number | undefined>;
+    resize: Atom<TextareaResize>;
+    focused: Atom<boolean>;
+    filled(): boolean;
+}
+export interface TextareaActions {
+    setValue(value: string): void;
+    setDisabled(disabled: boolean): void;
+    setReadonly(readonly: boolean): void;
+    setRequired(required: boolean): void;
+    setPlaceholder(placeholder: string): void;
+    setRows(rows: number | undefined): void;
+    setCols(cols: number | undefined): void;
+    setMinLength(minLength: number | undefined): void;
+    setMaxLength(maxLength: number | undefined): void;
+    setResize(resize: TextareaResize): void;
+    setFocused(focused: boolean): void;
+    handleInput(value: string): void;
+}
+export interface TextareaProps {
+    id: string;
+    'aria-disabled'?: 'true';
+    'aria-readonly'?: 'true';
+    'aria-required'?: 'true';
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    tabindex: '0' | '-1';
+    rows: number;
+    cols: number;
+    minlength?: number;
+    maxlength?: number;
+}
+export interface TextareaContracts {
+    getTextareaProps(): TextareaProps;
+}
+export interface TextareaModel {
+    readonly state: TextareaState;
+    readonly actions: TextareaActions;
+    readonly contracts: TextareaContracts;
+}
+export declare function createTextarea(options?: CreateTextareaOptions): TextareaModel;