@enonic/ui 0.26.0 → 0.27.0

package/dist/types/components/tree-list/tree-list.d.ts

@@ -1,141 +1,176 @@
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
 import { IconButtonProps } from '../icon-button';
+import { SelectionMode } from '../../providers/tree-list-provider';
 import { LucideIcon } from '../../types';
-export declare const LOADING_SUFFIX = "__loading__";
-export declare const ROOT_PARENT_ID = "__root__";
-export type TreeData = {
-    id: string;
-    hasChildren: boolean;
-};
-export type TreeItems<TreeData> = {
-    nodes: Record<string, TreeData | undefined>;
-    children: Record<string, string[] | undefined>;
-    hasMore: Record<string, boolean | undefined>;
-};
-export type FlatTreeNode<TData extends TreeData> = {
-    id: string;
-    data: TData;
-    level: number;
-    parentId: string | null;
-    nodeType: 'node' | 'loading' | 'error';
-};
-export type TreeListProps<TData extends TreeData = TreeData> = {
-    className?: string;
-    fetchChildren: (parentId: string | undefined, offset: number) => Promise<{
-        items: TData[];
-        hasMore: boolean;
-    }>;
-    expanded?: ReadonlySet<string>;
-    onExpandedChange?: (expanded: ReadonlySet<string>) => void;
+export declare const treeListRowVariants: (props?: ({
+    active?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    selectable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TreeListRootProps = {
     selection?: ReadonlySet<string>;
+    defaultSelection?: ReadonlySet<string>;
     onSelectionChange?: (selection: ReadonlySet<string>) => void;
-    selectionMode?: 'single' | 'multiple';
-    active?: string | null;
+    selectionMode?: SelectionMode;
+    active?: string;
     defaultActive?: string;
-    setActive?: (active: string | null | undefined) => void;
-    isItemSelectable?: (item: TData) => boolean;
-    items?: TreeItems<TData>;
-    onItemsChange?: (items: TreeItems<TData>) => void;
+    onActiveChange?: (active: string | undefined) => void;
+    loop?: boolean;
+    className?: string;
     children?: ReactNode;
+    onActivate?: (id: string) => void;
+    getParentId?: (id: string) => string | undefined;
+    getFirstChildId?: (id: string) => string | undefined;
+    expanded?: ReadonlySet<string>;
+    onExpandedChange?: (expanded: ReadonlySet<string>) => void;
 } & ComponentPropsWithoutRef<'div'>;
 export type TreeListContainerProps = {
     children?: ReactNode;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
-export type DefaultTreeListLoadingRowViewProps<TData extends TreeData> = {
-    item: FlatTreeNode<TData>;
-} & ComponentPropsWithoutRef<'div'>;
-export type TreeListLoadingRowProps<TData extends TreeData> = {
-    item: FlatTreeNode<TData>;
-    renderLoading?: (item: FlatTreeNode<TData>) => ReactNode;
-    children?: ReactNode;
-    intersectionProps?: IntersectionObserverInit;
-} & ComponentPropsWithoutRef<'div'>;
-export type TreeListErrorRowProps<TData extends TreeData> = {
-    item: FlatTreeNode<TData>;
-    renderError?: (item: FlatTreeNode<TData>) => ReactNode;
+export type TreeListRowProps = {
+    id: string;
+    disabled?: boolean;
+    selectable?: boolean;
+    /** ARIA level for tree hierarchy (1-based, optional for accessibility) */
+    level?: number;
+    /** Whether this node has children (affects aria-expanded) */
+    hasChildren?: boolean;
+    /** Whether this node is expanded (required if hasChildren=true) */
+    expanded?: boolean;
+    /**
+     * Position of this item within its siblings (1-indexed).
+     * Used for `aria-posinset`. Optional - only set if you have this data.
+     */
+    posinset?: number;
+    /**
+     * Total number of siblings at this level.
+     * Used for `aria-setsize`. Optional - only set if you have this data.
+     */
+    setsize?: number;
     className?: string;
-    onRetry?: () => void;
+    children?: ReactNode;
 } & ComponentPropsWithoutRef<'div'>;
-export type TreeListContentProps<TData extends TreeData> = {
-    renderNode: (item: FlatTreeNode<TData>) => ReactNode;
-    renderLoading?: (item: FlatTreeNode<TData>) => ReactNode;
-    renderError?: (item: FlatTreeNode<TData>) => ReactNode;
-};
 export type TreeListRowLeftProps = {
     children?: ReactNode;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
+export declare const TreeListRowLeft: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLeftProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
 export type TreeListRowRightProps = {
     children?: ReactNode;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
+export declare const TreeListRowRight: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowRightProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export type TreeListRowContentProps = {
+    children?: ReactNode;
+    className?: string;
+} & ComponentPropsWithoutRef<'div'>;
+export declare const TreeListRowContent: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowContentProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export type TreeListActionProps = {
+    /** Interactive element to exclude from normal tab order (use F2 action mode) */
+    children: ReactElement;
+};
+/**
+ * Wrapper for interactive elements inside TreeList rows.
+ * Removes the element from normal tab order (tabIndex={-1}) so it's only
+ * accessible via F2 action mode.
+ */
+export declare const TreeListAction: {
+    ({ children }: TreeListActionProps): ReactElement;
+    displayName: string;
+};
 export type TreeListRowLevelSpacerProps = {
     level?: number;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
-export type TreeListRowExpandControlProps<TData extends TreeData> = {
-    data: FlatTreeNode<TData>;
+export declare const TreeListRowLevelSpacer: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLevelSpacerProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export type TreeListRowExpandControlProps = {
+    /** Row ID - if provided, clicking will also set this row as active */
+    rowId?: string;
+    expanded?: boolean;
+    hasChildren?: boolean;
+    onToggle?: () => void;
     icon?: LucideIcon;
-} & Omit<IconButtonProps, 'icon'>;
-export type TreeListRowContentProps = {
-    children?: ReactNode;
+    selected?: boolean;
     className?: string;
-} & ComponentPropsWithoutRef<'div'>;
-export type TreeListRowSelectionControlProps<TData extends TreeData> = {
-    data: FlatTreeNode<TData>;
+} & Omit<IconButtonProps, 'icon' | 'onClick'>;
+export declare const TreeListRowExpandControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowExpandControlProps> & {
+    ref?: import('preact').Ref<HTMLButtonElement> | undefined;
+}>;
+export type TreeListRowSelectionControlProps = {
+    /** Row ID - required for toggle selection to work */
+    rowId: string;
+    /** Override selection state. If not provided, reads from TreeList selection context. */
+    selected?: boolean;
+    selectable?: boolean;
     className?: string;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'onClick'>;
+export declare const TreeListRowSelectionControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowSelectionControlProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export type TreeListRowLoadingProps = {
+    level?: number;
+    className?: string;
+    children?: ReactNode;
 } & ComponentPropsWithoutRef<'div'>;
-export type TreeListRowProps<TData extends TreeData> = {
-    item: FlatTreeNode<TData>;
-    children: ReactNode;
+export declare const TreeListRowLoading: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLoadingProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export type TreeListRowPlaceholderProps = {
+    level?: number;
     className?: string;
+    children?: ReactNode;
 } & ComponentPropsWithoutRef<'div'>;
-export declare const TreeList: (<TData extends TreeData = TreeData>({ className, fetchChildren, selection: controlledSelection, expanded: controlledExpanded, onSelectionChange, onExpandedChange, active: controlledActive, defaultActive, setActive, selectionMode, isItemSelectable, items: controlledItems, onItemsChange, children, ...props }: TreeListProps<TData>) => ReactElement) & {
-    Root: <TData extends TreeData = TreeData>({ className, fetchChildren, selection: controlledSelection, expanded: controlledExpanded, onSelectionChange, onExpandedChange, active: controlledActive, defaultActive, setActive, selectionMode, isItemSelectable, items: controlledItems, onItemsChange, children, ...props }: TreeListProps<TData>) => ReactElement;
-    Container: {
-        ({ children, className, ...props }: TreeListContainerProps): ReactElement<TreeListContainerProps>;
-        displayName: string;
-    };
-    Content: {
-        <TData extends TreeData>({ renderNode, renderLoading, renderError, }: TreeListContentProps<TData>): ReactElement;
-        displayName: string;
-    };
-    Row: {
-        <TData extends TreeData>({ item, children, className, ...props }: TreeListRowProps<TData>): ReactElement;
-        displayName: string;
-    };
-    LoadingRow: {
-        <TData extends TreeData>({ item, renderLoading, className, children, intersectionProps, ...props }: TreeListLoadingRowProps<TData>): ReactElement;
-        displayName: string;
-    };
-    DefaultLoadingRowView: <TData extends TreeData>({ item, className, children, ...props }: DefaultTreeListLoadingRowViewProps<TData>) => ReactElement;
-    ErrorRow: {
-        <TData extends TreeData>({ item, onRetry, renderError, className, ...props }: TreeListErrorRowProps<TData>): ReactElement;
-        displayName: string;
-    };
-    RowLeft: {
-        ({ children, className, ...props }: TreeListRowLeftProps): ReactElement<TreeListRowLeftProps>;
-        displayName: string;
-    };
-    RowRight: {
-        ({ children, className, ...props }: TreeListRowRightProps): ReactElement<TreeListRowRightProps>;
-        displayName: string;
-    };
-    RowLevelSpacer: {
-        ({ level, className, ...props }: TreeListRowLevelSpacerProps): ReactElement<TreeListRowLevelSpacerProps> | null;
-        displayName: string;
-    };
-    RowExpandControl: {
-        <TData extends TreeData>({ data, icon, className, ...props }: TreeListRowExpandControlProps<TData>): ReactElement<TreeListRowExpandControlProps<TData>>;
-        displayName: string;
-    };
-    RowContent: {
-        ({ className, children, ...props }: TreeListRowContentProps): ReactElement<TreeListRowContentProps>;
-        displayName: string;
-    };
-    RowSelectionControl: {
-        <TData extends TreeData>({ data, className, ...props }: TreeListRowSelectionControlProps<TData>): ReactElement;
+export declare const TreeListRowPlaceholder: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowPlaceholderProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export declare const TreeList: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRootProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}> & {
+    Root: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRootProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    Container: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListContainerProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    Row: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowLeft: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLeftProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowRight: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowRightProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowContent: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowContentProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowLevelSpacer: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLevelSpacerProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowExpandControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowExpandControlProps> & {
+        ref?: import('preact').Ref<HTMLButtonElement> | undefined;
+    }>;
+    RowSelectionControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowSelectionControlProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowLoading: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLoadingProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowPlaceholder: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowPlaceholderProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    Action: {
+        ({ children }: TreeListActionProps): ReactElement;
         displayName: string;
     };
 };

package/dist/types/components/virtualized-tree-list/index.d.ts

@@ -0,0 +1,2 @@
+export type { FlatNode, VirtualizedTreeListItemProps, VirtualizedTreeListRenderProps, VirtualizedTreeListRootProps, VirtualizedTreeListRowContentProps, VirtualizedTreeListRowExpandControlProps, VirtualizedTreeListRowLeftProps, VirtualizedTreeListRowLevelSpacerProps, VirtualizedTreeListRowLoadingProps, VirtualizedTreeListRowPlaceholderProps, VirtualizedTreeListRowProps, VirtualizedTreeListRowRightProps, VirtualizedTreeListRowSelectionControlProps, VirtuosoHandle, } from './virtualized-tree-list';
+export { VirtualizedTreeList } from './virtualized-tree-list';

package/dist/types/components/virtualized-tree-list/virtualized-tree-list.d.ts

@@ -0,0 +1,195 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode, RefObject } from 'react';
+import { IconButtonProps } from '../icon-button';
+import { TreeListRowContentProps, TreeListRowLeftProps, TreeListRowLevelSpacerProps, TreeListRowLoadingProps, TreeListRowPlaceholderProps, TreeListRowRightProps } from '../tree-list/tree-list';
+import { LucideIcon } from '../../types';
+/**
+ * Flat node type for virtualized tree list.
+ * This represents a single node in a flattened tree structure.
+ */
+export type FlatNode<TData = unknown> = {
+    /** Unique identifier for the node */
+    id: string;
+    /** User data associated with the node */
+    data: TData;
+    /** Nesting level (1 = root level) */
+    level: number;
+    /** Parent node ID, null for root nodes */
+    parentId: string | null;
+    /** Whether the node has children */
+    hasChildren: boolean;
+    /** Whether the node is currently expanded */
+    isExpanded: boolean;
+    /** Whether the node is in a loading state */
+    isLoading?: boolean;
+};
+/**
+ * Props returned by getItemProps for a row item.
+ */
+export type VirtualizedTreeListItemProps = {
+    id: string;
+    'data-index': number;
+    role: 'treeitem';
+    'aria-selected': boolean | undefined;
+    'aria-expanded': boolean | undefined;
+    'aria-level': number;
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
+    active: boolean;
+    selected: boolean;
+};
+/**
+ * Props passed to the render function.
+ */
+export type VirtualizedTreeListRenderProps<TData> = {
+    /** The flat list of nodes to render */
+    items: readonly FlatNode<TData>[];
+    /** Function to get props for each row item */
+    getItemProps: (index: number, node: FlatNode<TData>) => VirtualizedTreeListItemProps;
+    /** Current active item index */
+    activeIndex: number | null;
+    /** Props to spread on the Virtuoso container for keyboard navigation and ARIA */
+    containerProps: {
+        role: 'tree';
+        'aria-label'?: string;
+        'aria-activedescendant': string | undefined;
+        'aria-multiselectable': boolean | undefined;
+        tabIndex: 0;
+        onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+};
+/**
+ * Virtuoso handle type for scroll operations.
+ * This matches the VirtuosoHandle from react-virtuoso.
+ */
+export type VirtuosoHandle = {
+    scrollToIndex: (location: number | {
+        index: number;
+        align?: 'start' | 'center' | 'end';
+        behavior?: 'auto' | 'smooth';
+    }) => void;
+    scrollIntoView?: (location: {
+        index: number;
+        align?: 'start' | 'center' | 'end';
+        behavior?: 'auto' | 'smooth';
+    }) => void;
+};
+export type VirtualizedTreeListRootProps<TData = unknown> = {
+    /** Flat list of tree nodes to render */
+    items: readonly FlatNode<TData>[];
+    /** Controlled selection state */
+    selection?: ReadonlySet<string>;
+    /** Default selection for uncontrolled mode */
+    defaultSelection?: ReadonlySet<string>;
+    /** Callback when selection changes */
+    onSelectionChange?: (selection: ReadonlySet<string>) => void;
+    /** Selection mode: 'single', 'multiple', or 'none' (navigation only) */
+    selectionMode?: 'single' | 'multiple' | 'none';
+    /** Controlled active item ID (null = no active item in controlled mode) */
+    active?: string | null;
+    /** Default active item ID for uncontrolled mode */
+    defaultActive?: string;
+    /** Callback when active item changes (null = no active item) */
+    onActiveChange?: (active: string | null) => void;
+    /** Callback when a node should be expanded */
+    onExpand?: (id: string) => void;
+    /** Callback when a node should be collapsed */
+    onCollapse?: (id: string) => void;
+    /** Callback when an item is activated (Enter key or double-click) */
+    onActivate?: (id: string) => void;
+    /** Ref to Virtuoso component for scroll operations */
+    virtuosoRef?: RefObject<VirtuosoHandle | null>;
+    /** Whether navigation should loop at start/end */
+    loop?: boolean;
+    /** Accessible label for the tree */
+    'aria-label'?: string;
+    /** Render function that receives items and helper props */
+    children: (props: VirtualizedTreeListRenderProps<TData>) => ReactNode;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
+export type VirtualizedTreeListRowProps = {
+    /** Whether this row is the active (focused) row */
+    active?: boolean;
+    /** Whether this row is selected */
+    selected?: boolean;
+    /** Whether this row is disabled */
+    disabled?: boolean;
+    /** Whether this row is selectable */
+    selectable?: boolean;
+    /** Additional class names */
+    className?: string;
+    /** Row content */
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+export type VirtualizedTreeListActionProps = {
+    /** Interactive element to exclude from normal tab order (use F2 action mode) */
+    children: ReactElement;
+};
+/**
+ * Wrapper for interactive elements inside VirtualizedTreeList rows.
+ * Removes the element from normal tab order (tabIndex={-1}) so it's only
+ * accessible via F2 action mode.
+ */
+export declare const VirtualizedTreeListAction: {
+    ({ children }: VirtualizedTreeListActionProps): ReactElement;
+    displayName: string;
+};
+export type VirtualizedTreeListRowExpandControlProps = {
+    /** Row ID - if provided, clicking will also set this row as active */
+    rowId?: string;
+    expanded?: boolean;
+    hasChildren?: boolean;
+    onToggle?: () => void;
+    icon?: LucideIcon;
+    selected?: boolean;
+    className?: string;
+} & Omit<IconButtonProps, 'icon' | 'onClick'>;
+export declare const VirtualizedTreeListRowExpandControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowExpandControlProps> & {
+    ref?: import('preact').Ref<HTMLButtonElement> | undefined;
+}>;
+export type VirtualizedTreeListRowSelectionControlProps = {
+    /** Row ID - required for toggle selection to work */
+    rowId: string;
+    /** Override selection state. If not provided, reads from VirtualizedTreeList selection context. */
+    selected?: boolean;
+    selectable?: boolean;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'onClick'>;
+export declare const VirtualizedTreeListRowSelectionControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowSelectionControlProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export declare const VirtualizedTreeList: (<TData = unknown>(props: VirtualizedTreeListRootProps<TData> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReactElement) & {
+    Row: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowLeft: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLeftProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowRight: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowRightProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowContent: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowContentProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowLevelSpacer: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLevelSpacerProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowExpandControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowExpandControlProps> & {
+        ref?: import('preact').Ref<HTMLButtonElement> | undefined;
+    }>;
+    RowSelectionControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowSelectionControlProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowLoading: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLoadingProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    RowPlaceholder: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowPlaceholderProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    Action: {
+        ({ children }: VirtualizedTreeListActionProps): ReactElement;
+        displayName: string;
+    };
+};
+export type { TreeListRowContentProps as VirtualizedTreeListRowContentProps, TreeListRowLeftProps as VirtualizedTreeListRowLeftProps, TreeListRowLevelSpacerProps as VirtualizedTreeListRowLevelSpacerProps, TreeListRowLoadingProps as VirtualizedTreeListRowLoadingProps, TreeListRowPlaceholderProps as VirtualizedTreeListRowPlaceholderProps, TreeListRowRightProps as VirtualizedTreeListRowRightProps, };

package/dist/types/hooks/index.d.ts

@@ -13,3 +13,4 @@ export { useScrollLock } from './use-scroll-lock';
 export { type UseSelectorKeyboardConfig, type UseSelectorKeyboardReturn, useSelectorKeyboard, } from './use-selector-keyboard';
 export { useSyncValue } from './use-sync-value';
 export { type UseTypeAheadConfig, type UseTypeAheadReturn, useTypeAhead } from './use-type-ahead';
+export { type FlatNodeBase, type UseVirtualizedKeyboardNavigationReturn, useVirtualizedKeyboardNavigation, type VirtualizedKeyboardNavigationConfig, } from './use-virtualized-keyboard-navigation';

package/dist/types/hooks/use-item-registry.d.ts

@@ -24,6 +24,11 @@ export type UseItemRegistryReturn = {
      * @returns True if the item is disabled
      */
     isItemDisabled: (id: string) => boolean;
+    /**
+     * Version counter that increments when items are registered or unregistered.
+     * Use as a dependency in useEffect to react to item changes.
+     */
+    registryVersion: number;
 };
 /**
  * Hook for managing a registry of items (menu items, listbox options, etc.).

package/dist/types/hooks/use-virtualized-keyboard-navigation.d.ts

@@ -0,0 +1,81 @@
+export type FlatNodeBase = {
+    id: string;
+    level: number;
+    parentId: string | null;
+    hasChildren: boolean;
+    isExpanded: boolean;
+};
+export type VirtualizedKeyboardNavigationConfig<TNode extends FlatNodeBase> = {
+    /**
+     * Flat list of all visible tree nodes
+     */
+    items: readonly TNode[];
+    /**
+     * Currently active item index
+     */
+    activeIndex: number | null;
+    /**
+     * Set the active item index
+     */
+    setActiveIndex: (index: number | null) => void;
+    /**
+     * Scroll to index using virtuoso's scrollToIndex API
+     */
+    scrollToIndex: (index: number) => void;
+    /**
+     * Called when user requests expand (ArrowRight on collapsed node with children)
+     */
+    onExpand?: (id: string) => void;
+    /**
+     * Called when user requests collapse (ArrowLeft on expanded node)
+     */
+    onCollapse?: (id: string) => void;
+    /**
+     * Called when user requests selection (Enter/Space)
+     */
+    onSelect?: (id: string, index: number) => void;
+    /**
+     * Called when user presses Escape
+     */
+    onEscape?: () => void;
+    /**
+     * Whether to loop navigation at start/end
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Check if an item is disabled
+     * @default () => false
+     */
+    isItemDisabled?: (node: TNode) => boolean;
+    /**
+     * Returns the number of items to move for PageUp/PageDown navigation.
+     * If not provided, defaults to 10.
+     */
+    getPageSize?: () => number;
+};
+export type UseVirtualizedKeyboardNavigationReturn = {
+    /**
+     * Move active item by delta (1 for next, -1 for previous)
+     */
+    moveActive: (delta: number) => void;
+    /**
+     * Keyboard event handler to attach to the container
+     */
+    handleKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+};
+/**
+ * Hook for keyboard navigation through a virtualized tree list.
+ * Works with array indices instead of DOM IDs since items may not be in DOM.
+ *
+ * Supports:
+ * - ArrowUp/ArrowDown for moving between items
+ * - ArrowRight for expand or move to first child
+ * - ArrowLeft for collapse or move to parent
+ * - Home/End keys for jumping to first/last
+ * - Enter/Space for selection
+ * - Escape key handling
+ * - Loop navigation (optional)
+ * - Disabled item skipping
+ */
+export declare function useVirtualizedKeyboardNavigation<TNode extends FlatNodeBase>(config: VirtualizedKeyboardNavigationConfig<TNode>): UseVirtualizedKeyboardNavigationReturn;

package/dist/types/icons/circle-disc.d.ts

@@ -0,0 +1,7 @@
+import { LucideIcon } from 'lucide-react';
+/**
+ * A circle with a disc inside.
+ */
+export declare const CircleDisc: LucideIcon;
+/** @alias CircleDisc */
+export declare const CircleDiscIcon: LucideIcon;

package/dist/types/icons/filled-circle-alert.d.ts

@@ -0,0 +1,8 @@
+import { LucideIcon } from 'lucide-react';
+/**
+ * A filled circle with an alert sign inside.
+ * Useful for representing warning states.
+ */
+export declare const FilledCircleAlert: LucideIcon;
+/** @alias FilledCircleAlert */
+export declare const FilledCircleAlertIcon: LucideIcon;

package/dist/types/icons/filled-circle-check.d.ts

@@ -0,0 +1,8 @@
+import { LucideIcon } from 'lucide-react';
+/**
+ * A filled circle with a checkmark sign inside.
+ * Useful for representing success states.
+ */
+export declare const FilledCircleCheck: LucideIcon;
+/** @alias FilledCircleCheck */
+export declare const FilledCircleCheckIcon: LucideIcon;

package/dist/types/icons/filled-circle-info.d.ts

@@ -0,0 +1,8 @@
+import { LucideIcon } from 'lucide-react';
+/**
+ * A filled circle with an info sign inside.
+ * Useful for representing info states.
+ */
+export declare const FilledCircleInfo: LucideIcon;
+/** @alias FilledCircleInfo */
+export declare const FilledCircleInfoIcon: LucideIcon;

package/dist/types/icons/filled-circle-x.d.ts

@@ -0,0 +1,8 @@
+import { LucideIcon } from 'lucide-react';
+/**
+ * A filled circle with an X sign inside.
+ * Useful for representing error states.
+ */
+export declare const FilledCircleX: LucideIcon;
+/** @alias FilledCircleX */
+export declare const FilledCircleXIcon: LucideIcon;

package/dist/types/icons/filled-square-check.d.ts

@@ -0,0 +1,8 @@
+import { LucideIcon } from 'lucide-react';
+/**
+ * A filled square with a checkmark inside.
+ * Useful for representing selected or checked states.
+ */
+export declare const FilledSquareCheck: LucideIcon;
+/** @alias FilledSquareCheck */
+export declare const FilledSquareCheckIcon: LucideIcon;

package/dist/types/icons/filled-square-minus.d.ts

@@ -0,0 +1,8 @@
+import { LucideIcon } from 'lucide-react';
+/**
+ * A filled square with a minus sign inside.
+ * Useful for representing indeterminate or partial selection states.
+ */
+export declare const FilledSquareMinus: LucideIcon;
+/** @alias FilledSquareMinus */
+export declare const FilledSquareMinusIcon: LucideIcon;