@djangocfg/ui-tools 2.1.315 → 2.1.317

package/dist/tree/index.cjs

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var chunkYXBOAGIM_cjs = require('../chunk-YXBOAGIM.cjs');
+var chunk44ZTWYAF_cjs = require('../chunk-44ZTWYAF.cjs');
+require('../chunk-WGEGR3DF.cjs');
+
+
+
+Object.defineProperty(exports, "TreeError", {
+  enumerable: true,
+  get: function () { return chunkYXBOAGIM_cjs.TreeError; }
+});
+Object.defineProperty(exports, "TreeSkeleton", {
+  enumerable: true,
+  get: function () { return chunkYXBOAGIM_cjs.TreeSkeleton; }
+});
+Object.defineProperty(exports, "createDemoTree", {
+  enumerable: true,
+  get: function () { return chunkYXBOAGIM_cjs.createDemoTree; }
+});
+Object.defineProperty(exports, "DEFAULT_TREE_APPEARANCE", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.DEFAULT_TREE_APPEARANCE; }
+});
+Object.defineProperty(exports, "DEFAULT_TREE_LABELS", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.DEFAULT_TREE_LABELS; }
+});
+Object.defineProperty(exports, "Tree", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeRoot; }
+});
+Object.defineProperty(exports, "TreeChevron", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeChevron; }
+});
+Object.defineProperty(exports, "TreeContent", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeContent; }
+});
+Object.defineProperty(exports, "TreeEmpty", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeEmpty; }
+});
+Object.defineProperty(exports, "TreeIcon", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeIcon; }
+});
+Object.defineProperty(exports, "TreeIndentGuides", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeIndentGuides; }
+});
+Object.defineProperty(exports, "TreeLabel", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeLabel; }
+});
+Object.defineProperty(exports, "TreeProvider", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeProvider; }
+});
+Object.defineProperty(exports, "TreeRoot", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeRoot; }
+});
+Object.defineProperty(exports, "TreeRow", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeRow; }
+});
+Object.defineProperty(exports, "TreeSearchInput", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeSearchInput; }
+});
+Object.defineProperty(exports, "appearanceToStyle", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.appearanceToStyle; }
+});
+Object.defineProperty(exports, "clearTreeState", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.clearTreeState; }
+});
+Object.defineProperty(exports, "createChildCache", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.createChildCache; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.TreeRoot_default; }
+});
+Object.defineProperty(exports, "flattenTree", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.flattenTree; }
+});
+Object.defineProperty(exports, "loadTreeState", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.loadTreeState; }
+});
+Object.defineProperty(exports, "resolveAppearance", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.resolveAppearance; }
+});
+Object.defineProperty(exports, "resolveChildren", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.resolveChildren; }
+});
+Object.defineProperty(exports, "saveTreeState", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.saveTreeState; }
+});
+Object.defineProperty(exports, "useTreeActions", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeActions; }
+});
+Object.defineProperty(exports, "useTreeContext", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeContext; }
+});
+Object.defineProperty(exports, "useTreeExpansion", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeExpansion; }
+});
+Object.defineProperty(exports, "useTreeFocus", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeFocus; }
+});
+Object.defineProperty(exports, "useTreeKeyboard", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeKeyboard; }
+});
+Object.defineProperty(exports, "useTreeLabels", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeLabels; }
+});
+Object.defineProperty(exports, "useTreeRows", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeRows; }
+});
+Object.defineProperty(exports, "useTreeSearch", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeSearch; }
+});
+Object.defineProperty(exports, "useTreeSelection", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeSelection; }
+});
+Object.defineProperty(exports, "useTreeTypeAhead", {
+  enumerable: true,
+  get: function () { return chunk44ZTWYAF_cjs.useTreeTypeAhead; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/tree/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/tree/index.d.cts

@@ -0,0 +1,278 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as TreeRootProps, f as TreeItemId, T as TreeNode, F as FlatRow, o as TreeActivateOptions, g as TreeLabels, R as ResolvedAppearance, h as TreeSelectionMode, p as TreeActivationMode, a as TreeRowSlot, e as TreeContextMenuSlot } from '../types-Cclwv4Hl.cjs';
+export { c as DEFAULT_TREE_APPEARANCE, D as DEFAULT_TREE_LABELS, m as TreeAccentIntensity, k as TreeAppearance, l as TreeDensity, j as TreeLoadChildren, n as TreeRadius, i as TreeRowRenderProps, d as appearanceToStyle, r as resolveAppearance } from '../types-Cclwv4Hl.cjs';
+import * as React$1 from 'react';
+
+/**
+ * High-level entry point. Wraps Provider + (optional) search bar + content.
+ *
+ * For full control, compose with <TreeProvider>, <TreeContent>,
+ * <TreeSearchInput>, <TreeRow>, etc. directly from `@djangocfg/ui-tools/tree`.
+ */
+declare function TreeRoot<T>(props: TreeRootProps<T>): react_jsx_runtime.JSX.Element;
+
+type ChildEntryStatus = 'idle' | 'loading' | 'loaded' | 'error';
+interface ChildEntry<T> {
+    status: ChildEntryStatus;
+    children: TreeNode<T>[];
+    error?: string;
+}
+type ChildCache<T> = Map<TreeItemId, ChildEntry<T>>;
+declare const createChildCache: <T>() => ChildCache<T>;
+/**
+ * Resolve a node's children for the current render.
+ *
+ * - If the node carries inline `children`, those win (no async fetch).
+ * - Otherwise we look in the cache.
+ *
+ * Returns `null` when nothing is loaded yet (caller may show a skeleton).
+ */
+declare const resolveChildren: <T>(cache: ChildCache<T>, node: TreeNode<T>) => {
+    children: TreeNode<T>[] | null;
+    status: ChildEntryStatus;
+    error?: string;
+};
+
+interface TreeContextValue<T> {
+    expanded: ReadonlySet<TreeItemId>;
+    selected: ReadonlySet<TreeItemId>;
+    focused: TreeItemId | null;
+    query: string;
+    flatRows: FlatRow<T>[];
+    /** Search-matching node ids (subset of all flatRows). */
+    matchingIds: ReadonlySet<TreeItemId>;
+    expand: (id: TreeItemId) => void;
+    collapse: (id: TreeItemId) => void;
+    toggle: (id: TreeItemId) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    select: (id: TreeItemId) => void;
+    setSelectedIds: (ids: TreeItemId[]) => void;
+    clearSelection: () => void;
+    setFocus: (id: TreeItemId | null) => void;
+    setQuery: (q: string) => void;
+    refresh: (id: TreeItemId) => Promise<void>;
+    refreshAll: () => Promise<void>;
+    activate: (node: TreeNode<T>, opts?: TreeActivateOptions) => void;
+    labels: TreeLabels;
+    /** Resolved cosmetic config — never null. */
+    appearance: ResolvedAppearance;
+    /** Convenience alias for `appearance.indent`. */
+    indent: number;
+    selectionMode: TreeSelectionMode;
+    activationMode: TreeActivationMode;
+    enableSearch: boolean;
+    showIndentGuides: boolean;
+    getItemName: (node: TreeNode<T>) => string;
+    renderIcon?: TreeRowSlot<T>;
+    renderLabel?: TreeRowSlot<T>;
+    renderActions?: TreeRowSlot<T>;
+    renderContextMenu?: TreeContextMenuSlot<T>;
+}
+declare function useTreeContext<T>(): TreeContextValue<T>;
+interface TreeProviderProps<T> extends Pick<TreeRootProps<T>, 'data' | 'getItemName' | 'loadChildren' | 'selectionMode' | 'activationMode' | 'initialExpandedIds' | 'initialSelectedIds' | 'indent' | 'appearance' | 'onSelectionChange' | 'onExpansionChange' | 'onActivate' | 'enableSearch' | 'showIndentGuides' | 'renderIcon' | 'renderLabel' | 'renderActions' | 'renderContextMenu' | 'labels' | 'persistKey' | 'persistSelection'> {
+    children: React$1.ReactNode;
+}
+declare function TreeProvider<T>(props: TreeProviderProps<T>): react_jsx_runtime.JSX.Element;
+
+declare function useTreeLabels(): TreeLabels;
+declare function useTreeRows<T>(): FlatRow<T>[];
+declare function useTreeSelection<T>(): {
+    selectedIds: string[];
+    select: (id: TreeItemId) => void;
+    setSelectedIds: (ids: TreeItemId[]) => void;
+    clear: () => void;
+    isSelected: (id: TreeItemId) => boolean;
+};
+declare function useTreeExpansion<T>(): {
+    expandedIds: string[];
+    expand: (id: TreeItemId) => void;
+    collapse: (id: TreeItemId) => void;
+    toggle: (id: TreeItemId) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    isExpanded: (id: TreeItemId) => boolean;
+};
+declare function useTreeFocus<T>(): {
+    focusedId: string;
+    setFocus: (id: TreeItemId | null) => void;
+};
+declare function useTreeSearch<T>(): {
+    isOpen: boolean;
+    query: string;
+    setQuery: (q: string) => void;
+    matchingIds: ReadonlySet<string>;
+    matchCount: number;
+};
+declare function useTreeActions<T>(): {
+    expand: (id: TreeItemId) => void;
+    collapse: (id: TreeItemId) => void;
+    toggle: (id: TreeItemId) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    refresh: (id: TreeItemId) => Promise<void>;
+    refreshAll: () => Promise<void>;
+    activate: (node: TreeNode<T>, opts?: TreeActivateOptions) => void;
+};
+
+interface UseTreeTypeAheadOptions<T> {
+    /** Visible flat rows in render order. */
+    rows: FlatRow<T>[];
+    /** How to read the displayed name of a node (matched case-insensitively). */
+    getItemName: (node: TreeNode<T>) => string;
+    /** Element receiving keydown events. */
+    containerRef: React.RefObject<HTMLElement | null>;
+    /** Called with the matched node id so the consumer can focus / scroll. */
+    onMatch: (id: string) => void;
+    /** Disable without removing the call site. */
+    enabled?: boolean;
+}
+/**
+ * Type-ahead jump (Finder / VSCode style).
+ *
+ * Builds a rolling buffer of printable keys (within ~600 ms of each other)
+ * and notifies the consumer of the first row whose name starts with that
+ * prefix. Resets on Esc / Enter / navigation keys / timeout.
+ */
+declare function useTreeTypeAhead<T>({ rows, getItemName, containerRef, onMatch, enabled, }: UseTreeTypeAheadOptions<T>): void;
+
+interface UseTreeKeyboardOptions<T> {
+    rows: FlatRow<T>[];
+    focusedId: TreeItemId | null;
+    enabled?: boolean;
+    onFocus: (id: TreeItemId) => void;
+    onSelect: (id: TreeItemId) => void;
+    onActivate: (id: TreeItemId) => void;
+    onExpand: (id: TreeItemId) => void;
+    onCollapse: (id: TreeItemId) => void;
+    onClearSelection: () => void;
+}
+interface UseTreeKeyboardReturn {
+    /** Attach to the tree container. Hotkeys only fire when focus is inside. */
+    ref: (instance: HTMLElement | null) => void;
+}
+/**
+ * Standard tree keyboard navigation, scoped to the container ref.
+ *
+ *  - ↑ / ↓ : prev / next visible row
+ *  - Home / End : first / last visible row
+ *  - → : expand folder; if already expanded, jump to first child
+ *  - ← : collapse folder; if already collapsed (or leaf), jump to parent
+ *  - Enter / Space : activate (folder => toggle, leaf => onActivate)
+ *  - Esc : clear selection
+ *
+ * Built on `useHotkey` (react-hotkeys-hook) — focus gating is automatic; no
+ * manual `addEventListener` or `data-scope` juggling.
+ */
+declare function useTreeKeyboard<T>({ rows, focusedId, enabled, onFocus, onSelect, onActivate, onExpand, onCollapse, onClearSelection, }: UseTreeKeyboardOptions<T>): UseTreeKeyboardReturn;
+
+interface TreeChevronProps {
+    isExpanded: boolean;
+    isFolder: boolean;
+    className?: string;
+}
+declare function TreeChevron({ isExpanded, isFolder, className }: TreeChevronProps): react_jsx_runtime.JSX.Element;
+
+interface TreeIconProps {
+    isFolder: boolean;
+    isExpanded: boolean;
+    className?: string;
+}
+declare function TreeIcon({ isFolder, isExpanded, className }: TreeIconProps): react_jsx_runtime.JSX.Element;
+
+interface TreeLabelProps {
+    children: React.ReactNode;
+    isMatchingSearch?: boolean;
+    className?: string;
+}
+declare function TreeLabel({ children, isMatchingSearch, className }: TreeLabelProps): react_jsx_runtime.JSX.Element;
+
+interface TreeRowProps<T> {
+    row: FlatRow<T>;
+    className?: string;
+}
+declare function TreeRow<T>({ row, className }: TreeRowProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TreeContentProps<T> {
+    /** Custom row renderer; falls back to <TreeRow />. */
+    children?: TreeRowSlot<T>;
+    className?: string;
+    /** Override aria-label for the container. */
+    ariaLabel?: string;
+}
+declare function TreeContent<T>({ children, className, ariaLabel }: TreeContentProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TreeSearchInputProps {
+    className?: string;
+    showMatches?: boolean;
+}
+declare function TreeSearchInput({ className, showMatches }: TreeSearchInputProps): react_jsx_runtime.JSX.Element;
+
+interface TreeEmptyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function TreeEmpty({ children, className }: TreeEmptyProps): react_jsx_runtime.JSX.Element;
+
+interface TreeSkeletonProps {
+    rows?: number;
+    className?: string;
+}
+declare function TreeSkeleton({ rows, className }: TreeSkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface TreeErrorProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function TreeError({ children, className }: TreeErrorProps): react_jsx_runtime.JSX.Element;
+
+interface TreeIndentGuidesProps {
+    level: number;
+    indent: number;
+}
+/**
+ * Vertical guide lines under nested rows. Renders one absolute-positioned
+ * 1px column per ancestor level. Decorative — `aria-hidden` and
+ * pointer-events disabled. Opacity comes from the tree appearance.
+ */
+declare function TreeIndentGuides({ level, indent }: TreeIndentGuidesProps): react_jsx_runtime.JSX.Element;
+
+interface FlattenInput<T> {
+    roots: TreeNode<T>[];
+    expandedIds: ReadonlySet<TreeItemId>;
+    cache: ChildCache<T>;
+}
+/**
+ * Walk the tree top-to-bottom and produce a flat list of visible rows.
+ *
+ * Visibility rule: a child row appears only when every ancestor is in
+ * `expandedIds`. The output is ordered exactly as it should render,
+ * which keeps keyboard navigation (next/prev row) trivial.
+ */
+declare function flattenTree<T>({ roots, expandedIds, cache }: FlattenInput<T>): FlatRow<T>[];
+
+interface PersistedTreeState {
+    expandedItems: TreeItemId[];
+    selectedItems: TreeItemId[];
+}
+declare function loadTreeState(key: string): PersistedTreeState | null;
+declare function saveTreeState(key: string, state: PersistedTreeState): void;
+declare function clearTreeState(key: string): void;
+
+interface DemoNode {
+    name: string;
+}
+/**
+ * Build a deterministic synthetic tree for stories and tests.
+ *
+ * @example
+ *   const data = createDemoTree({ depth: 4, breadth: 3 });
+ *   <TreeRoot data={data} getItemName={(n) => n.data.name} />
+ */
+declare function createDemoTree({ depth, breadth, rootPrefix, }?: {
+    depth?: number;
+    breadth?: number;
+    rootPrefix?: string;
+}): TreeNode<DemoNode>[];
+
+export { type ChildCache, type ChildEntry, type ChildEntryStatus, type DemoNode, FlatRow, type FlattenInput, type PersistedTreeState, ResolvedAppearance, TreeRoot as Tree, TreeActivateOptions, TreeActivationMode, TreeChevron, type TreeChevronProps, TreeContent, type TreeContentProps, TreeContextMenuSlot, type TreeContextValue, TreeEmpty, type TreeEmptyProps, TreeError, type TreeErrorProps, TreeIcon, type TreeIconProps, TreeIndentGuides, type TreeIndentGuidesProps, TreeItemId, TreeLabel, type TreeLabelProps, TreeLabels, TreeNode, TreeProvider, type TreeProviderProps, TreeRoot, TreeRootProps, TreeRow, type TreeRowProps, TreeRowSlot, TreeSearchInput, type TreeSearchInputProps, TreeSelectionMode, TreeSkeleton, type TreeSkeletonProps, type UseTreeKeyboardOptions, type UseTreeTypeAheadOptions, clearTreeState, createChildCache, createDemoTree, TreeRoot as default, flattenTree, loadTreeState, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead };