@lumx/core 4.17.1-alpha.2 → 4.17.1-alpha.3

package/js/components/Combobox/types.d.ts

@@ -1,175 +0,0 @@
-import type { FocusNavigationController } from '../../utils/focusNavigation';
-/** Section visibility state tracked per registration. */
-export interface SectionState {
-    hidden: boolean;
-    'aria-hidden': boolean;
-}
-/** Registration entry for a section element. */
-export interface SectionRegistration {
-    callback: (state: SectionState) => void;
-    last: SectionState;
-}
-/** Registration entry for an option element. */
-export interface OptionRegistration {
-    callback: (isFiltered: boolean) => void;
-    lastFiltered: boolean;
-}
-/** Map of combobox event names to their payload types. */
-export interface ComboboxEventMap {
-    /** Fired when the combobox open state changes. Payload: whether the combobox is open. */
-    open: boolean;
-    /** Fired when the active descendant changes (visual focus). Payload: the option id or null. */
-    activeDescendantChange: string | null;
-    /**
-     * Fired when the visible option count changes.
-     * Payload: the number of visible options plus the current input value.
-     */
-    optionsChange: {
-        optionsLength: number;
-        inputValue?: string;
-    } | undefined;
-    /**
-     * Fired immediately when the aggregate loading state changes (skeleton count transitions
-     * between 0 and >0). Used for empty suppression in ComboboxState and for aria-busy on the listbox.
-     */
-    loadingChange: boolean;
-    /**
-     * Fired after a 500ms debounce when loading persists, or immediately when loading ends.
-     * Used to control the loading message text in the live region (ComboboxState).
-     */
-    loadingAnnouncement: boolean;
-}
-/** Callbacks provided by the consumer (React/Vue) to react to combobox state changes. */
-export interface ComboboxCallbacks {
-    /** Called when an option is selected (click or keyboard). */
-    onSelect?(option: {
-        value: string;
-    }): void;
-}
-/**
- * Behavioral options for input-mode combobox (autocomplete/filter pattern).
- * Shared between the core JSX template props (`ComboboxInputProps`) and the
- * runtime controller options (`SetupComboboxInputOptions`).
- */
-export interface ComboboxInputOptions {
-    /**
-     * Controls how the combobox filters options as the user types.
-     *
-     * - `'auto'` (default) — Options are automatically filtered client-side.
-     * - `'manual'` — Filtering is the consumer's responsibility.
-     * - `'off'` — Like `'manual'`, but the input is rendered as `readOnly`
-     *   and `openOnFocus` defaults to `true`.
-     */
-    filter?: 'auto' | 'manual' | 'off';
-    /**
-     * When true, the combobox opens automatically when the input receives focus.
-     * When false (default, unless `filter` is `'off'`), the combobox only opens
-     * on click, typing, or keyboard navigation.
-     *
-     * @default false (true when filter is 'off')
-     */
-    openOnFocus?: boolean;
-    /**
-     * Controls what happens to the input value when an option is selected.
-     *
-     * - `'fill'` (default) — The input is updated with the selected option value via `onChange`.
-     * - `'keep'` — The input value is left unchanged; `onChange` is not called.
-     *   Useful when the component manages the displayed value independently (e.g. showing
-     *   an option display name rather than the raw option ID). The filter still resets.
-     * - `'clear'` — The input is cleared (empty string) via `onChange` after selection.
-     *   Useful for multi-select patterns where typing starts fresh after each pick.
-     *
-     * @default 'fill'
-     */
-    selectionMode?: 'fill' | 'keep' | 'clear';
-}
-/** Handle returned by `setupCombobox`. Used by framework wrappers and mode controllers. */
-export interface ComboboxHandle {
-    /** Register the trigger element. Returns a cleanup function. */
-    registerTrigger(trigger: HTMLInputElement | HTMLButtonElement): () => void;
-    /** Register the listbox/grid element. Returns a cleanup function. */
-    registerListbox(listbox: HTMLElement): () => void;
-    /** Tear down all listeners and state. */
-    destroy(): void;
-    /** Subscribe to a combobox event. Returns an unsubscribe function. */
-    subscribe<K extends keyof ComboboxEventMap>(event: K, callback: (value: ComboboxEventMap[K]) => void): () => void;
-    /** The current trigger element (may be null before registration). */
-    readonly trigger: HTMLInputElement | HTMLButtonElement | null;
-    /** The current listbox/grid element (may be null before registration). */
-    readonly listbox: HTMLElement | null;
-    /** The focus navigation controller. */
-    readonly focusNav: FocusNavigationController | null;
-    /** Whether the popup is open. */
-    readonly isOpen: boolean;
-    /** Whether multi-select mode. */
-    readonly isMultiSelect: boolean;
-    /** Whether any skeleton placeholders are currently registered (loading). */
-    readonly isLoading: boolean;
-    /** Set the open state, update ARIA, fire callback. */
-    setIsOpen(isOpen: boolean): void;
-    /** Select an option (or null to clear), fire callback. */
-    select(option: HTMLElement | null): void;
-    /**
-     * Replay the pending navigation intent stored on the focus navigation controller via
-     * its `goTo` resolver. Called by the framework wrapper after the option children
-     * commit (keyboard opens from the closed state defer navigation until then). No-op
-     * when nothing is pending.
-     */
-    flushPendingNavigation(): void;
-    /**
-     * Register an option DOM element for filter notifications.
-     * The element's textContent is used as the searchable text.
-     * The callback is invoked immediately with the current filter state,
-     * and again whenever the filter changes.
-     * Returns a cleanup function that unregisters the option.
-     */
-    registerOption(element: HTMLElement, onFilterChange: (isFiltered: boolean) => void): () => void;
-    /**
-     * Set the current filter value and notify all registered options of their match state.
-     * Options whose text does not start with the filter value are notified with isFiltered=true.
-     * An empty filter value clears filtering (all options become visible).
-     */
-    setFilter(filterValue: string): void;
-    /**
-     * Re-evaluate the filter state of a single registered option.
-     * Call this after the option's `data-value` or textContent has been updated
-     * (e.g. after a framework re-render) to ensure its filtered/visible state
-     * is consistent with the current filter value.
-     */
-    refilterOption(element: HTMLElement): void;
-    /**
-     * Register a section DOM element for state notifications.
-     * The callback is invoked immediately with the current state, and again whenever
-     * the state changes after a filter update or option un/registration.
-     *
-     * - `hidden`: true when all registered options are filtered out (keeps children mounted
-     *   but invisible to the user and screen readers).
-     * - `aria-hidden`: true when the section has no registered options at all (skeleton-only).
-     *   The section stays visually rendered but is hidden from assistive technology —
-     *   the live region (`ComboboxState`) handles the loading announcement instead.
-     *
-     * At most one of `hidden` / `aria-hidden` is true at a time.
-     *
-     * Returns a cleanup function that unregisters the section.
-     */
-    registerSection(element: HTMLElement, onChange: (state: {
-        hidden: boolean;
-        'aria-hidden': boolean;
-    }) => void): () => void;
-    /**
-     * Register a skeleton placeholder. Increments the internal skeleton counter.
-     * When the counter transitions from 0 to >0, fires `loadingChange` immediately
-     * and schedules `loadingAnnouncement` after 500ms. Returns a cleanup function
-     * that decrements the counter (and fires the reverse transitions when reaching 0).
-     */
-    registerSkeleton(): () => void;
-}
-/**
- * Callback invoked when the trigger is attached and the abort controller is ready.
- *
- * The callback can optionally return a mode-specific keydown hook. When returned,
- * it is called before the shared keydown handler; return `true` to indicate the
- * event was handled (the caller will call `stopPropagation`/`preventDefault`)
- * and skip the shared logic.
- */
-export type OnTriggerAttach = (handle: ComboboxHandle, signal: AbortSignal) => ((event: KeyboardEvent) => boolean) | void;

package/js/components/Combobox/utils.d.ts

@@ -1,30 +0,0 @@
-import type { OptionRegistration, SectionRegistration } from './types';
-/**
- * Get the value for a combobox option element.
- * Uses `data-value` when set; falls back to the element's trimmed `textContent`.
- *
- * This is the *selection* value , which may differ from the visible label
- */
-export declare function getOptionValue(option: HTMLElement): string;
-/**
- * Get the visible label for a combobox option element (its trimmed `textContent`).
- *
- * Used for typeahead matching: the user types the characters they see, which is the
- * option's label — not its `data-value` (which can be an unrelated id).
- */
-export declare function getOptionLabel(option: HTMLElement): string;
-/** Returns true when an option carries aria-disabled="true". */
-export declare function isOptionDisabled(option: HTMLElement): boolean;
-/** Returns true when the cell is NOT the first gridcell in its row (i.e., it's an action cell). */
-export declare function isActionCell(cell: HTMLElement): boolean;
-export declare const isSelected: (el: Element) => boolean;
-/**
- * Compute the current state of a section and notify when it changed.
- *
- * Section state:
- * - `hidden`: true when the section has registered options but all are filtered out.
- * - `aria-hidden`: true when the section has no registered options at all (skeleton-only).
- *
- * At most one of `hidden` / `aria-hidden` is true at a time.
- */
-export declare function notifySection(sectionElement: HTMLElement, sectionRegistrations: Map<HTMLElement, SectionRegistration>, optionRegistrations: Map<HTMLElement, OptionRegistration>, force?: boolean): void;

package/js/components/Dialog/Stories.d.ts

@@ -1,97 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Core stories for the Dialog component.
- *
- * Dialog is interactive (open/close state, focus trap, etc.) and requires
- * framework-specific rendering for refs and state management.
- * A `render` function is provided per framework to handle this.
- */
-export declare function setup({ component: Dialog, render, decorators: { withChromaticForceScreenSize }, }: SetupStoriesOptions<{
-    decorators: 'withChromaticForceScreenSize';
-}>): {
-    meta: {
-        component: any;
-        render: any;
-        parameters: {
-            chromatic: {
-                pauseAnimationAtEnd: boolean;
-                delay: number;
-            };
-        };
-        decorators: ((story: any, context: any) => any)[];
-        args: Partial<import(".").DialogProps>;
-        argTypes: {
-            size: {
-                control: {
-                    type: "select" | "inline-radio";
-                };
-                options: ("big" | "tiny" | "regular" | "huge")[];
-                mapping: Record<string, "big" | "tiny" | "regular" | "huge"> | undefined;
-            };
-            onVisibilityChange: {
-                action: boolean;
-            };
-            children: {
-                control: boolean;
-            };
-            closeMode: {
-                control: {
-                    type: "inline-radio";
-                };
-                options: string[];
-            };
-        };
-    };
-    Default: {
-        args: {
-            children: string;
-        };
-    };
-    Loading: {
-        args: {
-            isLoading: boolean;
-            children: string;
-        };
-    };
-    WithHeaderFooter: {
-        args: {
-            header: string;
-            footer: string;
-            children: string;
-        };
-    };
-    ForceDivider: {
-        args: {
-            forceFooterDivider: boolean;
-            forceHeaderDivider: boolean;
-            header: string;
-            footer: string;
-            children: string;
-        };
-    };
-    LongContent: {
-        args: {
-            children: string;
-            header: string;
-            footer: string;
-        };
-    };
-    PreventAutoClose: {
-        args: {
-            preventAutoClose: boolean;
-            children: string;
-        };
-    };
-    PreventCloseOnEscape: {
-        args: {
-            preventCloseOnEscape: boolean;
-            children: string;
-        };
-    };
-    PreventCloseOnClick: {
-        args: {
-            preventCloseOnClick: boolean;
-            children: string;
-        };
-    };
-};

package/js/components/Dialog/Tests.d.ts

@@ -1,12 +0,0 @@
-import { SetupOptions } from '../../../testing';
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
-    props: any;
-    dialog: HTMLElement | null;
-    container: HTMLElement | null;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;

package/js/components/Dialog/index.d.ts

@@ -1,99 +0,0 @@
-import type { CommonRef, HasClassName, JSXElement, LumxClassName, GenericProps } from '../../types';
-import { Size } from '../../constants';
-export interface BaseDialogProps {
-    /** Footer content. */
-    footer?: JSXElement;
-    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
-    forceFooterDivider?: boolean;
-    /** Header content. */
-    header?: JSXElement;
-    /** Whether the divider between the dialog content and the header is always displayed (instead of showing it on scroll). */
-    forceHeaderDivider?: boolean;
-    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */
-    isLoading?: boolean;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-}
-/**
- * Defines the props of the component.
- */
-export interface DialogProps extends HasClassName, BaseDialogProps {
-    /** Reference to the root element. */
-    ref?: CommonRef;
-    /** Whether the component is still visible (e.g. during close animation). */
-    isVisible?: boolean;
-    /** Reference to the dialog content element. */
-    contentRef?: CommonRef;
-    /** Size variant. */
-    size?: DialogSizes;
-    /** Z-axis position. */
-    zIndex?: number;
-    /** Additional props for the dialog container element. */
-    dialogProps?: GenericProps;
-    /** On close callback. */
-    handleClose?(): void;
-    /** Whether to prevent closing on click away. */
-    shouldPreventCloseOnClickAway?: boolean;
-    /** Refs used for click-away detection. */
-    clickAwayRefs?: any;
-    /** Ref for the root wrapper element. */
-    rootRef?: CommonRef;
-    /** Ref for the inner section element. */
-    wrapperRef?: CommonRef;
-    /** Whether the header sentinel is out of view (controls header divider). */
-    hasTopIntersection: boolean | null;
-    /** Whether the footer sentinel is out of view (controls footer divider). */
-    hasBottomIntersection: boolean | null;
-    /** Props forwarded from a child <header> element. */
-    headerChildProps?: GenericProps;
-    /** Content extracted from a child <header> element. */
-    headerChildContent?: JSXElement;
-    /** Props forwarded from a child <footer> element. */
-    footerChildProps?: GenericProps;
-    /** Content extracted from a child <footer> element. */
-    footerChildContent?: JSXElement;
-    /** Dialog body content. */
-    content?: JSXElement;
-    /** Ref setter for the top scroll sentinel element. */
-    setSentinelTop?: any;
-    /** Ref setter for the bottom scroll sentinel element. */
-    setSentinelBottom?: any;
-    /** Portal component for rendering outside the DOM hierarchy. */
-    Portal: any;
-    /** HeadingLevelProvider component. */
-    HeadingLevelProvider: any;
-    /** ThemeProvider component. */
-    ThemeProvider: any;
-    /** ClickAwayProvider component. */
-    ClickAwayProvider: any;
-    /** ProgressCircular component */
-    ProgressCircular: any;
-}
-export type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "Dialog";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-export declare const block: {
-    (additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
-    (modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
-}, element: {
-    (elem: string, additionalClasses: import("../../utils/classNames/bem/types").AdditionalClasses): string;
-    (elem: string, modifiers?: import("../../utils/classNames/bem/types").Modifier, additionalClasses?: import("../../utils/classNames/bem/types").AdditionalClasses): string;
-};
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<DialogProps>;
-/**
- * Dialog component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export declare const Dialog: (props: DialogProps) => import("react").JSX.Element;

package/js/components/Divider/Stories.d.ts

@@ -1,21 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup Divider stories for a specific framework (React or Vue).
- * This function creates all the stories with the appropriate decorators.
- * Framework-specific render functions or args can be injected via `overrides`.
- */
-export declare function setup({ component: Divider, }: SetupStoriesOptions<{
-    decorators?: never;
-}>): {
-    meta: {
-        component: any;
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            ref?: import("../../types").CommonRef;
-            theme?: import("../../constants").Theme | undefined;
-            className?: string | undefined;
-        };
-    };
-    /** Default divider */
-    Default: {};
-};

package/js/components/Divider/Tests.d.ts

@@ -1,12 +0,0 @@
-import { SetupOptions } from '../../../testing';
-import { DividerProps } from '.';
-type SetupProps = Partial<DividerProps>;
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<DividerProps>) => {
-    divider: HTMLElement;
-    props: DividerProps;
-};
-declare const _default: (renderOptions: SetupOptions<DividerProps>) => void;
-export default _default;

package/js/components/Divider/index.d.ts

@@ -1,27 +0,0 @@
-import type { LumxClassName, HasTheme, HasClassName, CommonRef } from '../../types';
-/**
- * Defines the props of the component.
- */
-export interface DividerProps extends HasTheme, HasClassName {
-    /** reference to the root element */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "Divider";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<DividerProps>;
-/**
- * Divider component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const Divider: (props: DividerProps) => import("react").JSX.Element;

package/js/components/DragHandle/Stories.d.ts

@@ -1,18 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-export declare function setup({ component: DragHandle, decorators: { withCombinations }, }: SetupStoriesOptions<{
-    decorators: 'withCombinations';
-}>): {
-    meta: {
-        component: any;
-        render: (args: any) => import("react").JSX.Element;
-        args: {
-            ref?: import("../../types").CommonRef;
-            theme?: import("../../constants").Theme | undefined;
-            className?: string | undefined;
-        };
-    };
-    Default: {};
-    AllThemes: {
-        decorators: ((story: any, context: any) => any)[];
-    };
-};

package/js/components/DragHandle/Tests.d.ts

@@ -1,12 +0,0 @@
-import { SetupOptions } from '../../../testing';
-import { DragHandleProps } from '.';
-type SetupProps = Partial<DragHandleProps>;
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-export declare const setup: (propsOverride: SetupProps | undefined, { render, ...options }: SetupOptions<DragHandleProps>) => {
-    handle: HTMLElement;
-    props: DragHandleProps;
-};
-declare const _default: (renderOptions: SetupOptions<DragHandleProps>) => void;
-export default _default;

package/js/components/DragHandle/index.d.ts

@@ -1,27 +0,0 @@
-import type { LumxClassName, HasTheme, HasClassName, CommonRef } from '../../types';
-/**
- * Defines the props of the component.
- */
-export interface DragHandleProps extends HasTheme, HasClassName {
-    /** Reference to the root element */
-    ref?: CommonRef;
-}
-/**
- * Component display name.
- */
-export declare const COMPONENT_NAME = "DragHandle";
-/**
- * Component default class name and class prefix.
- */
-export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
-/**
- * Component default props.
- */
-export declare const DEFAULT_PROPS: Partial<DragHandleProps>;
-/**
- * DragHandle component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-export declare const DragHandle: (props: DragHandleProps) => import("react").JSX.Element;

package/js/components/ExpansionPanel/Stories.d.ts

@@ -1,67 +0,0 @@
-import type { SetupStoriesOptions } from '@lumx/core/stories/types';
-/**
- * Setup ExpansionPanel stories for a specific framework (React or Vue).
- * Framework-specific components (Text, StatefulExpansionPanel, etc.) are injected via `components`.
- * StatefulExpansionPanel is a framework-specific wrapper that manages isOpen state per instance,
- * enabling each panel to toggle independently.
- */
-export declare function setup({ component: ExpansionPanel, components: { Text, StatefulExpansionPanel }, decorators: { withNestedProps }, }: SetupStoriesOptions<{
-    decorators: 'withNestedProps';
-    components: {
-        Text: any;
-        StatefulExpansionPanel: any;
-    };
-}>): {
-    meta: {
-        component: any;
-        render: ({ children, ...args }: any) => import("react").JSX.Element;
-        args: {
-            'toggleButtonProps.label': string;
-            label: string;
-            hasBackground?: boolean | undefined;
-            hasHeaderDivider?: boolean | undefined;
-            isOpen?: boolean | undefined;
-            handleOpen?: ((event: any) => void) | undefined;
-            handleClose?: ((event: any) => void) | undefined;
-            toggleButtonProps?: any;
-            handleToggleOpen?: ((shouldOpen: boolean, event: any) => void) | undefined;
-            children?: import("react").ReactNode;
-            ref?: import("../../types").CommonRef;
-            wrapperRef?: import("../../types").CommonRef;
-            headerProps?: import("../../types").GenericProps | undefined;
-            headerContent?: import("react").ReactNode;
-            dragHandle?: import("react").ReactNode;
-            content?: import("react").ReactNode;
-            footer?: import("react").ReactNode;
-            IconButton?: any;
-            isChildrenVisible?: boolean | undefined;
-            className?: string | undefined;
-            closeMode?: "hide" | "unmount" | undefined;
-            theme?: import("../../constants").Theme | undefined;
-        };
-        decorators: ((story: any, context: any) => any)[];
-    };
-    Default: {};
-    HasBackground: {
-        args: {
-            hasBackground: boolean;
-        };
-    };
-    HasHeaderDivider: {
-        args: {
-            isOpen: boolean;
-            hasBackground: boolean;
-            hasHeaderDivider: boolean;
-        };
-    };
-    Nested: {
-        args: {};
-        render: ({ children, isOpen, ...args }: any) => import("react").JSX.Element;
-    };
-    HideChildren: {
-        args: {
-            hasBackground: boolean;
-            closeMode: string;
-        };
-    };
-};

package/js/components/ExpansionPanel/Tests.d.ts

@@ -1,12 +0,0 @@
-import { SetupOptions } from '../../../testing';
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
-    element: HTMLElement;
-    header: HTMLElement | null;
-    props: any;
-    wrapper: Partial<import("../../../testing").SetupResult>;
-};
-declare const _default: (renderOptions: SetupOptions<any>) => void;
-export default _default;