@chromvoid/headless-ui 0.1.0

package/dist/tooltip/index.js

@@ -0,0 +1,169 @@
+import { action, atom } from '@reatom/core';
+function parseTriggerModes(trigger) {
+    return new Set(trigger.trim().split(/\s+/).filter(Boolean));
+}
+export function createTooltip(options = {}) {
+    const idBase = options.idBase ?? 'tooltip';
+    const showDelay = Math.max(options.showDelay ?? 0, 0);
+    const hideDelay = Math.max(options.hideDelay ?? 0, 0);
+    const triggerModes = parseTriggerModes(options.trigger ?? 'hover focus');
+    const hasHover = triggerModes.has('hover');
+    const hasFocus = triggerModes.has('focus');
+    const hasClick = triggerModes.has('click');
+    const hasManual = triggerModes.has('manual');
+    const manualOnly = hasManual && !hasHover && !hasFocus && !hasClick;
+    const isOpenAtom = atom(options.initialOpen ?? false, `${idBase}.isOpen`);
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    let showTimer = null;
+    let hideTimer = null;
+    const clearShowTimer = () => {
+        if (showTimer == null)
+            return;
+        clearTimeout(showTimer);
+        showTimer = null;
+    };
+    const clearHideTimer = () => {
+        if (hideTimer == null)
+            return;
+        clearTimeout(hideTimer);
+        hideTimer = null;
+    };
+    const clearTimers = () => {
+        clearShowTimer();
+        clearHideTimer();
+    };
+    const open = action(() => {
+        if (isDisabledAtom())
+            return;
+        clearTimers();
+        isOpenAtom.set(true);
+    }, `${idBase}.open`);
+    const close = action(() => {
+        clearTimers();
+        isOpenAtom.set(false);
+    }, `${idBase}.close`);
+    const setDisabled = action((value) => {
+        isDisabledAtom.set(value);
+        if (value) {
+            close();
+        }
+    }, `${idBase}.setDisabled`);
+    const scheduleOpen = () => {
+        if (isDisabledAtom())
+            return;
+        clearHideTimer();
+        if (showDelay === 0) {
+            open();
+            return;
+        }
+        clearShowTimer();
+        showTimer = setTimeout(() => {
+            showTimer = null;
+            open();
+        }, showDelay);
+    };
+    const scheduleClose = () => {
+        clearShowTimer();
+        if (hideDelay === 0) {
+            close();
+            return;
+        }
+        clearHideTimer();
+        hideTimer = setTimeout(() => {
+            hideTimer = null;
+            close();
+        }, hideDelay);
+    };
+    const show = action(() => {
+        scheduleOpen();
+    }, `${idBase}.show`);
+    const hide = action(() => {
+        scheduleClose();
+    }, `${idBase}.hide`);
+    const handlePointerEnter = action(() => {
+        if (!hasHover || manualOnly)
+            return;
+        scheduleOpen();
+    }, `${idBase}.handlePointerEnter`);
+    const handlePointerLeave = action(() => {
+        if (!hasHover || manualOnly)
+            return;
+        scheduleClose();
+    }, `${idBase}.handlePointerLeave`);
+    const handleFocus = action(() => {
+        if (!hasFocus || manualOnly)
+            return;
+        scheduleOpen();
+    }, `${idBase}.handleFocus`);
+    const handleBlur = action(() => {
+        if (!hasFocus || manualOnly)
+            return;
+        scheduleClose();
+    }, `${idBase}.handleBlur`);
+    const handleClick = action(() => {
+        if (!hasClick || manualOnly)
+            return;
+        if (isDisabledAtom())
+            return;
+        clearTimers();
+        isOpenAtom.set(!isOpenAtom());
+    }, `${idBase}.handleClick`);
+    const handleKeyDown = action((event) => {
+        if (event.key === 'Escape') {
+            close();
+        }
+    }, `${idBase}.handleKeyDown`);
+    const triggerId = `${idBase}-trigger`;
+    const tooltipId = `${idBase}-content`;
+    const actions = {
+        open,
+        close,
+        show,
+        hide,
+        setDisabled,
+        handleKeyDown,
+        handlePointerEnter,
+        handlePointerLeave,
+        handleFocus,
+        handleBlur,
+        handleClick,
+    };
+    const contracts = {
+        getTriggerProps() {
+            const props = {
+                id: triggerId,
+                'aria-describedby': isDisabledAtom() ? undefined : tooltipId,
+                onKeyDown: handleKeyDown,
+            };
+            if (hasHover && !manualOnly) {
+                props.onPointerEnter = handlePointerEnter;
+                props.onPointerLeave = handlePointerLeave;
+            }
+            if (hasFocus && !manualOnly) {
+                props.onFocus = handleFocus;
+                props.onBlur = handleBlur;
+            }
+            if (hasClick && !manualOnly) {
+                props.onClick = handleClick;
+            }
+            return props;
+        },
+        getTooltipProps() {
+            return {
+                id: tooltipId,
+                role: 'tooltip',
+                tabindex: '-1',
+                hidden: !isOpenAtom(),
+            };
+        },
+    };
+    const state = {
+        isOpen: isOpenAtom,
+        isDisabled: isDisabledAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/treegrid/index.d.ts

@@ -0,0 +1,101 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type TreegridSelectionMode = 'single' | 'multiple';
+export type TreegridCellRole = 'gridcell' | 'rowheader' | 'columnheader';
+export interface TreegridRow {
+    id: string;
+    index?: number;
+    disabled?: boolean;
+    children?: readonly TreegridRow[];
+}
+export interface TreegridColumn {
+    id: string;
+    index?: number;
+    disabled?: boolean;
+    cellRole?: TreegridCellRole;
+}
+export interface TreegridCellId {
+    rowId: string;
+    colId: string;
+}
+export interface TreegridKeyboardEventLike {
+    key: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}
+export interface CreateTreegridOptions {
+    rows: readonly TreegridRow[];
+    columns: readonly TreegridColumn[];
+    disabledCells?: readonly TreegridCellId[];
+    idBase?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    selectionMode?: TreegridSelectionMode;
+    initialExpandedRowIds?: readonly string[];
+    initialActiveCellId?: TreegridCellId | null;
+    initialSelectedRowIds?: readonly string[];
+}
+export interface TreegridState {
+    activeCellId: Atom<TreegridCellId | null>;
+    expandedRowIds: Atom<Set<string>>;
+    selectedRowIds: Atom<Set<string>>;
+    rowCount: Computed<number>;
+    columnCount: Computed<number>;
+}
+export interface TreegridActions {
+    moveUp(): void;
+    moveDown(): void;
+    moveLeft(): void;
+    moveRight(): void;
+    moveRowStart(): void;
+    moveRowEnd(): void;
+    expandRow(rowId: string): void;
+    collapseRow(rowId: string): void;
+    toggleRowExpanded(rowId: string): void;
+    selectRow(rowId: string): void;
+    toggleRowSelection(rowId: string): void;
+    handleKeyDown(event: TreegridKeyboardEventLike): void;
+}
+export interface TreegridProps {
+    id: string;
+    role: 'treegrid';
+    tabindex: '-1';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-multiselectable': 'true' | 'false';
+    'aria-rowcount': number;
+    'aria-colcount': number;
+}
+export interface TreegridRowProps {
+    id: string;
+    role: 'row';
+    'aria-level': number;
+    'aria-posinset': number;
+    'aria-setsize': number;
+    'aria-rowindex': number;
+    'aria-expanded'?: 'true' | 'false';
+    'aria-selected': 'true' | 'false';
+    'aria-disabled'?: 'true';
+}
+export interface TreegridCellProps {
+    id: string;
+    role: TreegridCellRole;
+    tabindex: '0' | '-1';
+    'aria-colindex': number;
+    'aria-selected': 'true' | 'false';
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+    onFocus: () => void;
+}
+export interface TreegridContracts {
+    getTreegridProps(): TreegridProps;
+    getRowProps(rowId: string): TreegridRowProps;
+    getCellProps(rowId: string, colId: string): TreegridCellProps;
+}
+export interface TreegridModel {
+    readonly state: TreegridState;
+    readonly actions: TreegridActions;
+    readonly contracts: TreegridContracts;
+}
+export declare function createTreegrid(options: CreateTreegridOptions): TreegridModel;