@chromvoid/headless-ui 0.1.0

package/dist/grid/index.js

@@ -0,0 +1,415 @@
+import { action, atom, computed } from '@reatom/core';
+const cellKey = (rowId, colId) => `${rowId}::${colId}`;
+const cellKeyFrom = (cell) => cellKey(cell.rowId, cell.colId);
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export function createGrid(options) {
+    const idBase = options.idBase ?? 'grid';
+    const focusStrategy = options.focusStrategy ?? 'roving-tabindex';
+    const selectionMode = options.selectionMode ?? 'single';
+    const selectionFollowsFocus = options.selectionFollowsFocus ?? false;
+    const pageSize = Math.max(options.pageSize ?? 10, 1);
+    const rows = [...options.rows];
+    const columns = [...options.columns];
+    const rowById = new Map(rows.map((row, index) => [row.id, { row, index }]));
+    const columnById = new Map(columns.map((column, index) => [column.id, { column, index }]));
+    const disabledCellSet = new Set((options.disabledCells ?? []).map((cell) => cellKeyFrom(cell)));
+    const rowCountAtom = computed(() => Math.max(options.totalRowCount ?? rows.length, rows.length), `${idBase}.rowCount`);
+    const columnCountAtom = computed(() => Math.max(options.totalColumnCount ?? columns.length, columns.length), `${idBase}.columnCount`);
+    const getRowIndex = (rowId) => rowById.get(rowId)?.index ?? -1;
+    const getColumnIndex = (colId) => columnById.get(colId)?.index ?? -1;
+    const rowAriaIndex = (rowId) => {
+        const info = rowById.get(rowId);
+        if (!info)
+            return 1;
+        return info.row.index ?? info.index + 1;
+    };
+    const colAriaIndex = (colId) => {
+        const info = columnById.get(colId);
+        if (!info)
+            return 1;
+        return info.column.index ?? info.index + 1;
+    };
+    const isCellDisabled = (rowId, colId) => {
+        const rowInfo = rowById.get(rowId);
+        const columnInfo = columnById.get(colId);
+        if (!rowInfo || !columnInfo)
+            return true;
+        if (rowInfo.row.disabled)
+            return true;
+        if (columnInfo.column.disabled)
+            return true;
+        if (disabledCellSet.has(cellKey(rowId, colId)))
+            return true;
+        return false;
+    };
+    const hasCell = (rowId, colId) => rowById.has(rowId) && columnById.has(colId);
+    const firstEnabledCellInRow = (rowIndex) => {
+        const rowId = rows[rowIndex]?.id;
+        if (!rowId)
+            return null;
+        for (const column of columns) {
+            if (!isCellDisabled(rowId, column.id)) {
+                return { rowId, colId: column.id };
+            }
+        }
+        return null;
+    };
+    const lastEnabledCellInRow = (rowIndex) => {
+        const rowId = rows[rowIndex]?.id;
+        if (!rowId)
+            return null;
+        for (let index = columns.length - 1; index >= 0; index -= 1) {
+            const columnId = columns[index]?.id;
+            if (columnId != null && !isCellDisabled(rowId, columnId)) {
+                return { rowId, colId: columnId };
+            }
+        }
+        return null;
+    };
+    const firstEnabledCellInGrid = () => {
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+            const cell = firstEnabledCellInRow(rowIndex);
+            if (cell)
+                return cell;
+        }
+        return null;
+    };
+    const lastEnabledCellInGrid = () => {
+        for (let rowIndex = rows.length - 1; rowIndex >= 0; rowIndex -= 1) {
+            const cell = lastEnabledCellInRow(rowIndex);
+            if (cell)
+                return cell;
+        }
+        return null;
+    };
+    const normalizeCell = (cell) => {
+        if (cell == null)
+            return firstEnabledCellInGrid();
+        if (!hasCell(cell.rowId, cell.colId))
+            return firstEnabledCellInGrid();
+        if (isCellDisabled(cell.rowId, cell.colId))
+            return firstEnabledCellInGrid();
+        return cell;
+    };
+    const activeCellIdAtom = atom(normalizeCell(options.initialActiveCellId ?? null), `${idBase}.activeCellId`);
+    const selectedCellIdsAtom = atom(new Set((options.initialSelectedCellIds ?? [])
+        .filter((cell) => hasCell(cell.rowId, cell.colId) && !isCellDisabled(cell.rowId, cell.colId))
+        .map((cell) => cellKeyFrom(cell))), `${idBase}.selectedCellIds`);
+    const setSelection = (keys) => {
+        selectedCellIdsAtom.set(new Set(keys));
+    };
+    const setActiveCell = action((cell) => {
+        const normalized = normalizeCell(cell);
+        if (!normalized) {
+            activeCellIdAtom.set(null);
+            return;
+        }
+        activeCellIdAtom.set(normalized);
+        if (selectionFollowsFocus) {
+            setSelection([cellKeyFrom(normalized)]);
+        }
+    }, `${idBase}.setActiveCell`);
+    const tryMoveHorizontal = (direction) => {
+        const current = normalizeCell(activeCellIdAtom());
+        if (!current)
+            return;
+        const rowIndex = getRowIndex(current.rowId);
+        const colIndex = getColumnIndex(current.colId);
+        if (rowIndex < 0 || colIndex < 0)
+            return;
+        for (let nextCol = colIndex + direction; nextCol >= 0 && nextCol < columns.length; nextCol += direction) {
+            const colId = columns[nextCol]?.id;
+            if (colId != null && !isCellDisabled(current.rowId, colId)) {
+                setActiveCell({ rowId: current.rowId, colId });
+                return;
+            }
+        }
+    };
+    const tryMoveVertical = (direction) => {
+        const current = normalizeCell(activeCellIdAtom());
+        if (!current)
+            return;
+        const rowIndex = getRowIndex(current.rowId);
+        if (rowIndex < 0)
+            return;
+        for (let nextRow = rowIndex + direction; nextRow >= 0 && nextRow < rows.length; nextRow += direction) {
+            const rowId = rows[nextRow]?.id;
+            if (rowId != null && !isCellDisabled(rowId, current.colId)) {
+                setActiveCell({ rowId, colId: current.colId });
+                return;
+            }
+        }
+    };
+    const moveUp = action(() => {
+        tryMoveVertical(-1);
+    }, `${idBase}.moveUp`);
+    const moveDown = action(() => {
+        tryMoveVertical(1);
+    }, `${idBase}.moveDown`);
+    const moveLeft = action(() => {
+        tryMoveHorizontal(-1);
+    }, `${idBase}.moveLeft`);
+    const moveRight = action(() => {
+        tryMoveHorizontal(1);
+    }, `${idBase}.moveRight`);
+    const moveRowStart = action(() => {
+        const current = normalizeCell(activeCellIdAtom());
+        if (!current)
+            return;
+        const rowIndex = getRowIndex(current.rowId);
+        if (rowIndex < 0)
+            return;
+        const cell = firstEnabledCellInRow(rowIndex);
+        if (cell) {
+            setActiveCell(cell);
+        }
+    }, `${idBase}.moveRowStart`);
+    const moveRowEnd = action(() => {
+        const current = normalizeCell(activeCellIdAtom());
+        if (!current)
+            return;
+        const rowIndex = getRowIndex(current.rowId);
+        if (rowIndex < 0)
+            return;
+        const cell = lastEnabledCellInRow(rowIndex);
+        if (cell) {
+            setActiveCell(cell);
+        }
+    }, `${idBase}.moveRowEnd`);
+    const moveGridStart = action(() => {
+        const cell = firstEnabledCellInGrid();
+        if (cell) {
+            setActiveCell(cell);
+        }
+    }, `${idBase}.moveGridStart`);
+    const moveGridEnd = action(() => {
+        const cell = lastEnabledCellInGrid();
+        if (cell) {
+            setActiveCell(cell);
+        }
+    }, `${idBase}.moveGridEnd`);
+    const moveByPage = (direction) => {
+        const current = normalizeCell(activeCellIdAtom());
+        if (!current)
+            return;
+        const rowIndex = getRowIndex(current.rowId);
+        if (rowIndex < 0)
+            return;
+        const targetRowIndex = clamp(rowIndex + direction * pageSize, 0, rows.length - 1);
+        for (let nextRow = targetRowIndex; nextRow >= 0 && nextRow < rows.length; nextRow += direction) {
+            const rowId = rows[nextRow]?.id;
+            if (rowId != null && !isCellDisabled(rowId, current.colId)) {
+                setActiveCell({ rowId, colId: current.colId });
+                return;
+            }
+        }
+    };
+    const pageUp = action(() => {
+        moveByPage(-1);
+    }, `${idBase}.pageUp`);
+    const pageDown = action(() => {
+        moveByPage(1);
+    }, `${idBase}.pageDown`);
+    const selectCell = action((cell) => {
+        if (!hasCell(cell.rowId, cell.colId) || isCellDisabled(cell.rowId, cell.colId)) {
+            return;
+        }
+        const key = cellKeyFrom(cell);
+        if (selectionMode === 'multiple') {
+            setSelection([key]);
+            return;
+        }
+        setSelection([key]);
+    }, `${idBase}.selectCell`);
+    const toggleCellSelection = action((cell) => {
+        if (!hasCell(cell.rowId, cell.colId) || isCellDisabled(cell.rowId, cell.colId)) {
+            return;
+        }
+        if (selectionMode !== 'multiple') {
+            selectCell(cell);
+            return;
+        }
+        const key = cellKeyFrom(cell);
+        const next = new Set(selectedCellIdsAtom());
+        if (next.has(key)) {
+            next.delete(key);
+        }
+        else {
+            next.add(key);
+        }
+        selectedCellIdsAtom.set(next);
+    }, `${idBase}.toggleCellSelection`);
+    const selectRow = action((rowId) => {
+        const rowIndex = getRowIndex(rowId);
+        if (rowIndex < 0)
+            return;
+        const keys = columns
+            .map((column) => ({ rowId, colId: column.id }))
+            .filter((cell) => !isCellDisabled(cell.rowId, cell.colId))
+            .map((cell) => cellKeyFrom(cell));
+        if (keys.length === 0)
+            return;
+        if (selectionMode === 'multiple') {
+            setSelection(keys);
+            return;
+        }
+        const firstKey = keys[0];
+        if (firstKey != null) {
+            setSelection([firstKey]);
+        }
+    }, `${idBase}.selectRow`);
+    const selectColumn = action((colId) => {
+        const colIndex = getColumnIndex(colId);
+        if (colIndex < 0)
+            return;
+        const keys = rows
+            .map((row) => ({ rowId: row.id, colId }))
+            .filter((cell) => !isCellDisabled(cell.rowId, cell.colId))
+            .map((cell) => cellKeyFrom(cell));
+        if (keys.length === 0)
+            return;
+        if (selectionMode === 'multiple') {
+            setSelection(keys);
+            return;
+        }
+        const firstKey = keys[0];
+        if (firstKey != null) {
+            setSelection([firstKey]);
+        }
+    }, `${idBase}.selectColumn`);
+    const handleKeyDown = action((event) => {
+        const ctrlOrMeta = event.ctrlKey === true || event.metaKey === true;
+        switch (event.key) {
+            case 'ArrowUp':
+                moveUp();
+                return;
+            case 'ArrowDown':
+                moveDown();
+                return;
+            case 'ArrowLeft':
+                moveLeft();
+                return;
+            case 'ArrowRight':
+                moveRight();
+                return;
+            case 'Home':
+                if (ctrlOrMeta) {
+                    moveGridStart();
+                }
+                else {
+                    moveRowStart();
+                }
+                return;
+            case 'End':
+                if (ctrlOrMeta) {
+                    moveGridEnd();
+                }
+                else {
+                    moveRowEnd();
+                }
+                return;
+            case 'PageUp':
+                pageUp();
+                return;
+            case 'PageDown':
+                pageDown();
+                return;
+            case 'Enter':
+                moveDown();
+                return;
+            case ' ':
+                {
+                    const current = activeCellIdAtom();
+                    if (current) {
+                        if (selectionMode === 'multiple') {
+                            toggleCellSelection(current);
+                        }
+                        else {
+                            selectCell(current);
+                        }
+                    }
+                }
+                return;
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setActiveCell,
+        moveUp,
+        moveDown,
+        moveLeft,
+        moveRight,
+        moveRowStart,
+        moveRowEnd,
+        moveGridStart,
+        moveGridEnd,
+        pageUp,
+        pageDown,
+        selectCell,
+        toggleCellSelection,
+        selectRow,
+        selectColumn,
+        handleKeyDown,
+    };
+    const cellDomId = (rowId, colId) => `${idBase}-cell-${rowId}-${colId}`;
+    const contracts = {
+        getGridProps() {
+            const activeCell = activeCellIdAtom();
+            return {
+                id: `${idBase}-root`,
+                role: 'grid',
+                tabindex: focusStrategy === 'aria-activedescendant' ? '0' : '-1',
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                'aria-multiselectable': selectionMode === 'multiple' ? 'true' : 'false',
+                'aria-colcount': columnCountAtom(),
+                'aria-rowcount': rowCountAtom(),
+                'aria-activedescendant': focusStrategy === 'aria-activedescendant' && activeCell != null
+                    ? cellDomId(activeCell.rowId, activeCell.colId)
+                    : undefined,
+            };
+        },
+        getRowProps(rowId) {
+            if (!rowById.has(rowId)) {
+                throw new Error(`Unknown grid row id: ${rowId}`);
+            }
+            return {
+                id: `${idBase}-row-${rowId}`,
+                role: 'row',
+                'aria-rowindex': rowAriaIndex(rowId),
+            };
+        },
+        getCellProps(rowId, colId) {
+            if (!hasCell(rowId, colId)) {
+                throw new Error(`Unknown grid cell id: ${rowId}:${colId}`);
+            }
+            const key = cellKey(rowId, colId);
+            const activeCell = activeCellIdAtom();
+            const isActive = activeCell?.rowId === rowId && activeCell?.colId === colId;
+            const isDisabled = isCellDisabled(rowId, colId);
+            return {
+                id: cellDomId(rowId, colId),
+                role: 'gridcell',
+                tabindex: focusStrategy === 'roving-tabindex' && isActive && !isDisabled ? '0' : '-1',
+                'aria-colindex': colAriaIndex(colId),
+                'aria-selected': selectedCellIdsAtom().has(key) ? 'true' : 'false',
+                'aria-readonly': options.isReadOnly ? 'true' : undefined,
+                'aria-disabled': isDisabled ? 'true' : undefined,
+                'data-active': isActive ? 'true' : 'false',
+                onFocus: () => setActiveCell({ rowId, colId }),
+            };
+        },
+    };
+    const state = {
+        activeCellId: activeCellIdAtom,
+        selectedCellIds: selectedCellIdsAtom,
+        rowCount: rowCountAtom,
+        columnCount: columnCountAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+export * from './core/index.js';
+export * from './interactions/index.js';
+export * from './a11y-contracts/index.js';
+export * from './adapters/index.js';
+export * from './listbox/index.js';
+export * from './combobox/index.js';
+export * from './date-picker/index.js';
+export * from './menu/index.js';
+export * from './tabs/index.js';
+export * from './treeview/index.js';
+export * from './alert/index.js';
+export * from './breadcrumb/index.js';
+export * from './landmarks/index.js';
+export * from './meter/index.js';
+export * from './link/index.js';
+export * from './table/index.js';
+export * from './button/index.js';
+export * from './checkbox/index.js';
+export * from './switch/index.js';
+export * from './radio-group/index.js';
+export * from './slider/index.js';
+export * from './spinbutton/index.js';
+export * from './slider-multi-thumb/index.js';
+export * from './disclosure/index.js';
+export * from './accordion/index.js';
+export * from './dialog/index.js';
+export * from './alert-dialog/index.js';
+export * from './tooltip/index.js';
+export * from './menu-button/index.js';
+export * from './toolbar/index.js';
+export * from './grid/index.js';
+export * from './treegrid/index.js';
+export * from './feed/index.js';
+export * from './carousel/index.js';
+export * from './window-splitter/index.js';
+export * from './popover/index.js';
+export * from './select/index.js';
+export * from './context-menu/index.js';
+export * from './command-palette/index.js';
+export * from './toast/index.js';
+export * from './progress/index.js';
+export * from './input/index.js';
+export * from './badge/index.js';
+export * from './card/index.js';
+export * from './copy-button/index.js';
+export * from './number/index.js';
+export * from './textarea/index.js';
+export * from './spinner/index.js';
+export * from './drawer/index.js';
+export * from './callout/index.js';
+export * from './sidebar/index.js';

package/dist/index.js

@@ -0,0 +1,51 @@
+export * from './core/index.js';
+export * from './interactions/index.js';
+export * from './a11y-contracts/index.js';
+export * from './adapters/index.js';
+export * from './listbox/index.js';
+export * from './combobox/index.js';
+export * from './date-picker/index.js';
+export * from './menu/index.js';
+export * from './tabs/index.js';
+export * from './treeview/index.js';
+export * from './alert/index.js';
+export * from './breadcrumb/index.js';
+export * from './landmarks/index.js';
+export * from './meter/index.js';
+export * from './link/index.js';
+export * from './table/index.js';
+export * from './button/index.js';
+export * from './checkbox/index.js';
+export * from './switch/index.js';
+export * from './radio-group/index.js';
+export * from './slider/index.js';
+export * from './spinbutton/index.js';
+export * from './slider-multi-thumb/index.js';
+export * from './disclosure/index.js';
+export * from './accordion/index.js';
+export * from './dialog/index.js';
+export * from './alert-dialog/index.js';
+export * from './tooltip/index.js';
+export * from './menu-button/index.js';
+export * from './toolbar/index.js';
+export * from './grid/index.js';
+export * from './treegrid/index.js';
+export * from './feed/index.js';
+export * from './carousel/index.js';
+export * from './window-splitter/index.js';
+export * from './popover/index.js';
+export * from './select/index.js';
+export * from './context-menu/index.js';
+export * from './command-palette/index.js';
+export * from './toast/index.js';
+export * from './progress/index.js';
+export * from './input/index.js';
+export * from './badge/index.js';
+export * from './card/index.js';
+export * from './copy-button/index.js';
+export * from './number/index.js';
+export * from './textarea/index.js';
+export * from './spinner/index.js';
+export * from './drawer/index.js';
+export * from './callout/index.js';
+export * from './sidebar/index.js';

package/dist/input/index.d.ts

@@ -0,0 +1,86 @@
+import { type Atom } from '@reatom/core';
+export type InputType = 'text' | 'password' | 'email' | 'url' | 'tel' | 'search';
+export interface CreateInputOptions {
+    idBase?: string;
+    value?: string;
+    type?: InputType;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    clearable?: boolean;
+    passwordToggle?: boolean;
+    onInput?: (value: string) => void;
+    onClear?: () => void;
+}
+export interface InputState {
+    value: Atom<string>;
+    type: Atom<InputType>;
+    disabled: Atom<boolean>;
+    readonly: Atom<boolean>;
+    required: Atom<boolean>;
+    placeholder: Atom<string>;
+    clearable: Atom<boolean>;
+    passwordToggle: Atom<boolean>;
+    passwordVisible: Atom<boolean>;
+    focused: Atom<boolean>;
+    filled(): boolean;
+    resolvedType(): string;
+    showClearButton(): boolean;
+    showPasswordToggle(): boolean;
+}
+export interface InputActions {
+    setValue(value: string): void;
+    setType(type: InputType): void;
+    setDisabled(disabled: boolean): void;
+    setReadonly(readonly: boolean): void;
+    setRequired(required: boolean): void;
+    setPlaceholder(placeholder: string): void;
+    setClearable(clearable: boolean): void;
+    setPasswordToggle(toggle: boolean): void;
+    togglePasswordVisibility(): void;
+    setFocused(focused: boolean): void;
+    clear(): void;
+    handleInput(value: string): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'> & {
+        preventDefault?: () => void;
+    }): void;
+}
+export interface InputProps {
+    id: string;
+    type: string;
+    'aria-disabled'?: 'true';
+    'aria-readonly'?: 'true';
+    'aria-required'?: 'true';
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    tabindex: '0' | '-1';
+    autocomplete?: 'off';
+}
+export interface ClearButtonProps {
+    role: 'button';
+    'aria-label': string;
+    tabindex: '-1';
+    hidden?: true;
+    'aria-hidden'?: 'true';
+}
+export interface PasswordToggleProps {
+    role: 'button';
+    'aria-label': string;
+    'aria-pressed': 'true' | 'false';
+    tabindex: '0' | '-1';
+    hidden?: true;
+    'aria-hidden'?: 'true';
+}
+export interface InputContracts {
+    getInputProps(): InputProps;
+    getClearButtonProps(): ClearButtonProps;
+    getPasswordToggleProps(): PasswordToggleProps;
+}
+export interface InputModel {
+    readonly state: InputState;
+    readonly actions: InputActions;
+    readonly contracts: InputContracts;
+}
+export declare function createInput(options?: CreateInputOptions): InputModel;