@chromvoid/headless-ui 0.1.0

package/dist/dialog/index.d.ts

@@ -0,0 +1,95 @@
+import { type Atom, type Computed } from '@reatom/core';
+import { type OverlayDismissIntent, type OverlayOpenSource } from '../interactions/overlay-focus.js';
+export interface CreateDialogOptions {
+    idBase?: string;
+    type?: 'dialog' | 'alertdialog';
+    initialOpen?: boolean;
+    isModal?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOutsidePointer?: boolean;
+    closeOnOutsideFocus?: boolean;
+    initialFocusId?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+}
+export interface DialogState {
+    isOpen: Atom<boolean>;
+    isModal: Atom<boolean>;
+    type: Atom<'dialog' | 'alertdialog'>;
+    restoreTargetId: Atom<string | null>;
+    isFocusTrapped: Computed<boolean>;
+    shouldLockScroll: Computed<boolean>;
+    initialFocusTargetId: Atom<string | null>;
+}
+export interface DialogActions {
+    setTriggerId(id: string | null): void;
+    open(source?: OverlayOpenSource): void;
+    close(intent?: OverlayDismissIntent): void;
+    toggle(source?: OverlayOpenSource): void;
+    handleTriggerClick(): void;
+    handleTriggerKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+    handleOutsidePointer(): void;
+    handleOutsideFocus(): void;
+}
+export interface DialogTriggerProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-haspopup': 'dialog';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    onClick: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface DialogOverlayProps {
+    id: string;
+    hidden: boolean;
+    'data-open': 'true' | 'false';
+    onPointerDownOutside: () => void;
+    onFocusOutside: () => void;
+}
+export interface DialogContentProps {
+    id: string;
+    role: 'dialog' | 'alertdialog';
+    tabindex: '-1';
+    'aria-modal': 'true' | 'false';
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'data-initial-focus'?: string;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface DialogTitleProps {
+    id: string;
+}
+export interface DialogDescriptionProps {
+    id: string;
+}
+export interface DialogCloseButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    onClick: () => void;
+}
+export interface DialogHeaderCloseButtonProps {
+    id: string;
+    role: 'button';
+    tabindex: '0';
+    'aria-label': 'Close';
+    onClick: () => void;
+}
+export interface DialogContracts {
+    getTriggerProps(): DialogTriggerProps;
+    getOverlayProps(): DialogOverlayProps;
+    getContentProps(): DialogContentProps;
+    getTitleProps(): DialogTitleProps;
+    getDescriptionProps(): DialogDescriptionProps;
+    getCloseButtonProps(): DialogCloseButtonProps;
+    getHeaderCloseButtonProps(): DialogHeaderCloseButtonProps;
+}
+export interface DialogModel {
+    readonly state: DialogState;
+    readonly actions: DialogActions;
+    readonly contracts: DialogContracts;
+}
+export declare function createDialog(options?: CreateDialogOptions): DialogModel;

package/dist/dialog/index.js

@@ -0,0 +1,153 @@
+import { action, atom, computed } from '@reatom/core';
+import { createOverlayFocus, } from '../interactions/overlay-focus.js';
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createDialog(options = {}) {
+    const idBase = options.idBase ?? 'dialog';
+    const closeOnEscape = options.closeOnEscape ?? true;
+    const closeOnOutsidePointer = options.closeOnOutsidePointer ?? true;
+    const closeOnOutsideFocus = options.closeOnOutsideFocus ?? true;
+    const typeAtom = atom(options.type ?? 'dialog', `${idBase}.type`);
+    const isModalAtom = atom(options.isModal ?? true, `${idBase}.isModal`);
+    const initialFocusTargetIdAtom = atom(options.initialFocusId ?? null, `${idBase}.initialFocusId`);
+    const defaultTriggerId = `${idBase}-trigger`;
+    const contentId = `${idBase}-content`;
+    const titleId = options.ariaLabelledBy ?? `${idBase}-title`;
+    const descriptionId = options.ariaDescribedBy ?? `${idBase}-description`;
+    const overlay = createOverlayFocus({
+        idBase: `${idBase}.overlay`,
+        initialOpen: options.initialOpen,
+        initialTriggerId: defaultTriggerId,
+        trapFocus: isModalAtom(),
+        restoreFocus: true,
+    });
+    const shouldLockScrollAtom = computed(() => overlay.state.isOpen() && isModalAtom(), `${idBase}.shouldLockScroll`);
+    const open = action((source = 'programmatic') => {
+        overlay.actions.open(source, overlay.state.triggerId() ?? defaultTriggerId);
+    }, `${idBase}.open`);
+    const close = action((intent = 'programmatic') => {
+        overlay.actions.close(intent);
+    }, `${idBase}.close`);
+    const toggle = action((source = 'programmatic') => {
+        if (overlay.state.isOpen()) {
+            close('programmatic');
+            return;
+        }
+        open(source);
+    }, `${idBase}.toggle`);
+    const setTriggerId = action((id) => {
+        overlay.actions.setTrigger(id);
+    }, `${idBase}.setTriggerId`);
+    const handleTriggerClick = action(() => {
+        toggle('pointer');
+    }, `${idBase}.handleTriggerClick`);
+    const handleTriggerKeyDown = action((event) => {
+        if (event.key === 'Enter' || isSpaceKey(event.key)) {
+            toggle('keyboard');
+        }
+    }, `${idBase}.handleTriggerKeyDown`);
+    const handleKeyDown = action((event) => {
+        if (!closeOnEscape && event.key === 'Escape') {
+            return;
+        }
+        overlay.actions.handleKeyDown(event);
+    }, `${idBase}.handleContentKeyDown`);
+    const handleOutsidePointer = action(() => {
+        if (!closeOnOutsidePointer) {
+            return;
+        }
+        overlay.actions.handleOutsidePointer();
+    }, `${idBase}.handleOutsidePointer`);
+    const handleOutsideFocus = action(() => {
+        if (!closeOnOutsideFocus) {
+            return;
+        }
+        overlay.actions.handleOutsideFocus();
+    }, `${idBase}.handleOutsideFocus`);
+    const actions = {
+        setTriggerId,
+        open,
+        close,
+        toggle,
+        handleTriggerClick,
+        handleTriggerKeyDown,
+        handleKeyDown,
+        handleOutsidePointer,
+        handleOutsideFocus,
+    };
+    const contracts = {
+        getTriggerProps() {
+            return {
+                id: overlay.state.triggerId() ?? defaultTriggerId,
+                role: 'button',
+                tabindex: '0',
+                'aria-haspopup': 'dialog',
+                'aria-expanded': overlay.state.isOpen() ? 'true' : 'false',
+                'aria-controls': contentId,
+                onClick: handleTriggerClick,
+                onKeyDown: handleTriggerKeyDown,
+            };
+        },
+        getOverlayProps() {
+            return {
+                id: `${idBase}-overlay`,
+                hidden: !overlay.state.isOpen(),
+                'data-open': overlay.state.isOpen() ? 'true' : 'false',
+                onPointerDownOutside: handleOutsidePointer,
+                onFocusOutside: handleOutsideFocus,
+            };
+        },
+        getContentProps() {
+            return {
+                id: contentId,
+                role: typeAtom(),
+                tabindex: '-1',
+                'aria-modal': isModalAtom() ? 'true' : 'false',
+                'aria-labelledby': titleId,
+                'aria-describedby': descriptionId,
+                'data-initial-focus': initialFocusTargetIdAtom() ?? undefined,
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getTitleProps() {
+            return {
+                id: titleId,
+            };
+        },
+        getDescriptionProps() {
+            return {
+                id: descriptionId,
+            };
+        },
+        getCloseButtonProps() {
+            return {
+                id: `${idBase}-close`,
+                role: 'button',
+                tabindex: '0',
+                onClick: () => close('programmatic'),
+            };
+        },
+        getHeaderCloseButtonProps() {
+            return {
+                id: `${idBase}-header-close`,
+                role: 'button',
+                tabindex: '0',
+                'aria-label': 'Close',
+                onClick: () => close('programmatic'),
+            };
+        },
+    };
+    const state = {
+        isOpen: overlay.state.isOpen,
+        isModal: isModalAtom,
+        type: typeAtom,
+        restoreTargetId: overlay.state.restoreTargetId,
+        isFocusTrapped: overlay.state.isFocusTrapped,
+        shouldLockScroll: shouldLockScrollAtom,
+        initialFocusTargetId: initialFocusTargetIdAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/disclosure/index.d.ts

@@ -0,0 +1,52 @@
+import { type Atom } from '@reatom/core';
+export interface CreateDisclosureOptions {
+    idBase?: string;
+    isOpen?: boolean;
+    isDisabled?: boolean;
+    name?: string;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export interface DisclosureState {
+    isOpen: Atom<boolean>;
+    isDisabled: Atom<boolean>;
+    name: Atom<string | null>;
+}
+export interface DisclosureActions {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    setDisabled(value: boolean): void;
+    setName(value: string | null): void;
+    handleClick(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'> & {
+        preventDefault?: () => void;
+    }): void;
+    destroy(): void;
+}
+export interface DisclosureTriggerProps {
+    id: string;
+    role: 'button';
+    tabindex: '0' | '-1';
+    'aria-expanded': 'true' | 'false';
+    'aria-controls': string;
+    'aria-disabled'?: 'true';
+    onClick: () => void;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'> & {
+        preventDefault?: () => void;
+    }) => void;
+}
+export interface DisclosurePanelProps {
+    id: string;
+    'aria-labelledby': string;
+    hidden: boolean;
+}
+export interface DisclosureContracts {
+    getTriggerProps(): DisclosureTriggerProps;
+    getPanelProps(): DisclosurePanelProps;
+}
+export interface DisclosureModel {
+    readonly state: DisclosureState;
+    readonly actions: DisclosureActions;
+    readonly contracts: DisclosureContracts;
+}
+export declare function createDisclosure(options?: CreateDisclosureOptions): DisclosureModel;

package/dist/disclosure/index.js

@@ -0,0 +1,159 @@
+import { action, atom } from '@reatom/core';
+const groupRegistry = new Map();
+function registerInGroup(name, model) {
+    let group = groupRegistry.get(name);
+    if (!group) {
+        group = new Set();
+        groupRegistry.set(name, group);
+    }
+    group.add(model);
+}
+function unregisterFromGroup(name, model) {
+    const group = groupRegistry.get(name);
+    if (!group)
+        return;
+    group.delete(model);
+    if (group.size === 0) {
+        groupRegistry.delete(name);
+    }
+}
+function closeOthersInGroup(name, self) {
+    const group = groupRegistry.get(name);
+    if (!group)
+        return;
+    for (const member of group) {
+        if (member !== self) {
+            member.actions.close();
+        }
+    }
+}
+const isSpaceKey = (key) => key === ' ' || key === 'Spacebar';
+export function createDisclosure(options = {}) {
+    const idBase = options.idBase ?? 'disclosure';
+    const isOpenAtom = atom(options.isOpen ?? false, `${idBase}.isOpen`);
+    const isDisabledAtom = atom(options.isDisabled ?? false, `${idBase}.isDisabled`);
+    const nameAtom = atom(options.name ?? null, `${idBase}.name`);
+    const notifyOpenChange = (next) => {
+        if (isOpenAtom() === next)
+            return;
+        isOpenAtom.set(next);
+        options.onOpenChange?.(next);
+    };
+    let self;
+    const open = action(() => {
+        if (isDisabledAtom())
+            return;
+        notifyOpenChange(true);
+        const currentName = nameAtom();
+        if (currentName != null) {
+            closeOthersInGroup(currentName, self);
+        }
+    }, `${idBase}.open`);
+    const close = action(() => {
+        if (isDisabledAtom())
+            return;
+        notifyOpenChange(false);
+    }, `${idBase}.close`);
+    const toggle = action(() => {
+        if (isDisabledAtom())
+            return;
+        if (isOpenAtom()) {
+            close();
+        }
+        else {
+            open();
+        }
+    }, `${idBase}.toggle`);
+    const setDisabled = action((value) => {
+        isDisabledAtom.set(value);
+    }, `${idBase}.setDisabled`);
+    const setName = action((value) => {
+        const oldName = nameAtom();
+        if (oldName === value)
+            return;
+        if (oldName != null) {
+            unregisterFromGroup(oldName, self);
+        }
+        nameAtom.set(value);
+        if (value != null) {
+            registerInGroup(value, self);
+        }
+    }, `${idBase}.setName`);
+    const handleClick = action(() => {
+        toggle();
+    }, `${idBase}.handleClick`);
+    const handleKeyDown = action((event) => {
+        if (isDisabledAtom())
+            return;
+        if (event.key === 'Enter' || isSpaceKey(event.key)) {
+            event.preventDefault?.();
+            toggle();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+            event.preventDefault?.();
+            open();
+            return;
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+            event.preventDefault?.();
+            close();
+            return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const destroy = action(() => {
+        const currentName = nameAtom();
+        if (currentName != null) {
+            unregisterFromGroup(currentName, self);
+        }
+    }, `${idBase}.destroy`);
+    const triggerId = `${idBase}-trigger`;
+    const panelId = `${idBase}-panel`;
+    const actions = {
+        open,
+        close,
+        toggle,
+        setDisabled,
+        setName,
+        handleClick,
+        handleKeyDown,
+        destroy,
+    };
+    const contracts = {
+        getTriggerProps() {
+            return {
+                id: triggerId,
+                role: 'button',
+                tabindex: isDisabledAtom() ? '-1' : '0',
+                'aria-expanded': isOpenAtom() ? 'true' : 'false',
+                'aria-controls': panelId,
+                'aria-disabled': isDisabledAtom() ? 'true' : undefined,
+                onClick: handleClick,
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getPanelProps() {
+            return {
+                id: panelId,
+                'aria-labelledby': triggerId,
+                hidden: !isOpenAtom(),
+            };
+        },
+    };
+    const state = {
+        isOpen: isOpenAtom,
+        isDisabled: isDisabledAtom,
+        name: nameAtom,
+    };
+    const model = {
+        state,
+        actions,
+        contracts,
+    };
+    self = model;
+    const initialName = nameAtom();
+    if (initialName != null) {
+        registerInGroup(initialName, model);
+    }
+    return model;
+}

package/dist/drawer/index.d.ts

@@ -0,0 +1,30 @@
+import { type Atom } from '@reatom/core';
+import { type CreateDialogOptions, type DialogState, type DialogActions, type DialogTriggerProps, type DialogOverlayProps, type DialogContentProps, type DialogTitleProps, type DialogDescriptionProps, type DialogCloseButtonProps, type DialogHeaderCloseButtonProps } from '../dialog/index.js';
+export type DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
+export interface CreateDrawerOptions extends CreateDialogOptions {
+    placement?: DrawerPlacement;
+}
+export interface DrawerPanelProps extends DialogContentProps {
+    'data-placement': DrawerPlacement;
+}
+export interface DrawerState extends DialogState {
+    placement: Atom<DrawerPlacement>;
+}
+export interface DrawerActions extends DialogActions {
+    setPlacement(placement: DrawerPlacement): void;
+}
+export interface DrawerContracts {
+    getTriggerProps(): DialogTriggerProps;
+    getOverlayProps(): DialogOverlayProps;
+    getPanelProps(): DrawerPanelProps;
+    getTitleProps(): DialogTitleProps;
+    getDescriptionProps(): DialogDescriptionProps;
+    getCloseButtonProps(): DialogCloseButtonProps;
+    getHeaderCloseButtonProps(): DialogHeaderCloseButtonProps;
+}
+export interface DrawerModel {
+    readonly state: DrawerState;
+    readonly actions: DrawerActions;
+    readonly contracts: DrawerContracts;
+}
+export declare function createDrawer(options?: CreateDrawerOptions): DrawerModel;

package/dist/drawer/index.js

@@ -0,0 +1,39 @@
+import { atom } from '@reatom/core';
+import { createDialog, } from '../dialog/index.js';
+export function createDrawer(options = {}) {
+    const idBase = options.idBase ?? 'drawer';
+    const dialog = createDialog({
+        ...options,
+        idBase,
+    });
+    const placementAtom = atom(options.placement ?? 'end', `${idBase}.placement`);
+    const state = {
+        ...dialog.state,
+        placement: placementAtom,
+    };
+    const actions = {
+        ...dialog.actions,
+        setPlacement(placement) {
+            placementAtom.set(placement);
+        },
+    };
+    const contracts = {
+        getTriggerProps: dialog.contracts.getTriggerProps,
+        getOverlayProps: dialog.contracts.getOverlayProps,
+        getPanelProps() {
+            return {
+                ...dialog.contracts.getContentProps(),
+                'data-placement': placementAtom(),
+            };
+        },
+        getTitleProps: dialog.contracts.getTitleProps,
+        getDescriptionProps: dialog.contracts.getDescriptionProps,
+        getCloseButtonProps: dialog.contracts.getCloseButtonProps,
+        getHeaderCloseButtonProps: dialog.contracts.getHeaderCloseButtonProps,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/feed/index.d.ts

@@ -0,0 +1,77 @@
+import { type Atom, type Computed } from '@reatom/core';
+export interface FeedArticle {
+    id: string;
+    disabled?: boolean;
+}
+export interface FeedKeyboardEventLike {
+    key: string;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+}
+export type FeedKeyboardResult = 'next' | 'prev' | 'exit-after' | 'exit-before' | null;
+export interface CreateFeedOptions {
+    articles: readonly FeedArticle[];
+    idBase?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    initialActiveArticleId?: string | null;
+    totalCount?: number;
+    onLoadMore?: () => readonly FeedArticle[] | Promise<readonly FeedArticle[]>;
+    onLoadNewer?: () => readonly FeedArticle[] | Promise<readonly FeedArticle[]>;
+}
+export interface FeedState {
+    articleIds: Computed<string[]>;
+    activeArticleId: Atom<string | null>;
+    isLoading: Atom<boolean>;
+    isBusy: Atom<boolean>;
+    totalCount: Atom<number>;
+    isEmpty: Computed<boolean>;
+    hasError: Computed<boolean>;
+    error: Atom<string | null>;
+    canLoadMore: Computed<boolean>;
+    canLoadNewer: Computed<boolean>;
+}
+export interface FeedActions {
+    focusNextArticle(): void;
+    focusPrevArticle(): void;
+    loadMore(): Promise<void>;
+    loadNewer(): Promise<void>;
+    setArticles(articles: FeedArticle[]): void;
+    appendArticles(articles: FeedArticle[]): void;
+    prependArticles(articles: FeedArticle[]): void;
+    removeArticle(articleId: string): void;
+    setBusy(value: boolean): void;
+    setError(message: string): void;
+    clearError(): void;
+    setTotalCount(count: number): void;
+    handleKeyDown(event: FeedKeyboardEventLike): FeedKeyboardResult;
+}
+export interface FeedProps {
+    id: string;
+    role: 'feed';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-busy': 'true' | 'false';
+}
+export interface FeedArticleProps {
+    id: string;
+    role: 'article';
+    tabindex: '0' | '-1';
+    'aria-posinset': number;
+    'aria-setsize': number;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+    onFocus: () => void;
+}
+export interface FeedContracts {
+    getFeedProps(): FeedProps;
+    getArticleProps(articleId: string): FeedArticleProps;
+}
+export interface FeedModel {
+    readonly state: FeedState;
+    readonly actions: FeedActions;
+    readonly contracts: FeedContracts;
+}
+export declare function createFeed(options: CreateFeedOptions): FeedModel;