@skygraph/react 0.0.0-placeholder.0 → 0.5.0

package/dist/tree.d.ts

@@ -0,0 +1,348 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { TreeNodeData, TreeKey, TreeFieldNames, TreeEngineOptions, Core, TreeEngine, TreeState } from '@skygraph/core';
+
+/** Payload for `onCheck` describing the toggle and affected nodes. */
+interface CheckInfo {
+    /** Whether the toggled node ended checked. */
+    checked: boolean;
+    /** Node whose checkbox was toggled. */
+    node: TreeNodeData;
+    /** All fully checked nodes after the update. */
+    checkedNodes: TreeNodeData[];
+    /** Keys in indeterminate half-checked state. */
+    halfCheckedKeys: TreeKey[];
+}
+/** Payload for `onSelect` after a selection change. */
+interface SelectInfo {
+    /** Whether the node ended selected. */
+    selected: boolean;
+    /** Node that was clicked for selection. */
+    node: TreeNodeData;
+    /** All selected nodes after the update. */
+    selectedNodes: TreeNodeData[];
+}
+/** Payload for `onExpand` after an expand/collapse. */
+interface ExpandInfo {
+    /** Whether the node ended expanded. */
+    expanded: boolean;
+    /** Node whose expander was toggled. */
+    node: TreeNodeData;
+}
+/** Drag lifecycle event payload with DOM event and node. */
+interface DragInfo {
+    /** Browser drag event. */
+    event: React__default.DragEvent;
+    /** Associated tree node. */
+    node: TreeNodeData;
+}
+/** Drop completion payload including dragged node and position. */
+interface DropInfo {
+    /** Browser drop event. */
+    event: React__default.DragEvent;
+    /** Drop target node. */
+    node: TreeNodeData;
+    /** Node that was dragged. */
+    dragNode: TreeNodeData;
+    /** Insert position relative to the target. */
+    dropPosition: -1 | 0 | 1;
+}
+/** Payload when an inline edit is committed (if editing is used). */
+interface EditInfo {
+    /** Edited node key. */
+    key: TreeKey;
+    /** Edited node. */
+    node: TreeNodeData;
+    /** New title text. */
+    value: string;
+    /** Previous title text. */
+    oldValue: string;
+}
+/** Visual status hint for a node row. */
+type TreeNodeStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
+/** Declarative action button on a tree node row. */
+interface TreeNodeAction {
+    /** Action identifier. */
+    key: string;
+    /** Button icon. */
+    icon?: React__default.ReactNode;
+    /** Tooltip or aria label text. */
+    title?: string;
+    /** Click handler receiving node and key. */
+    onClick: (node: TreeNodeData, key: TreeKey) => void;
+    /** Hides the action for nodes where this returns false. */
+    visible?: (node: TreeNodeData) => boolean;
+    /** Disables the action per node. */
+    disabled?: (node: TreeNodeData) => boolean;
+    /** Destructive styling. */
+    danger?: boolean;
+}
+/** Localizable strings for built-in tree UI. */
+interface TreeLocale {
+    /** Empty tree placeholder. */
+    emptyText?: React__default.ReactNode;
+    /** Async loading label. */
+    loadingText?: string;
+    /** Search field placeholder. */
+    searchPlaceholder?: string;
+    /** Toolbar control to expand all nodes. */
+    expandAllText?: string;
+    /** Toolbar control to collapse all nodes. */
+    collapseAllText?: string;
+    /** Toolbar control to check all checkboxes. */
+    checkAllText?: string;
+    /** Toolbar control to clear all checks. */
+    uncheckAllText?: string;
+    /** Accessible label for the clear-search (×) button. */
+    clearSearch?: string;
+}
+/** Props for the `Tree` component. */
+interface TreeProps {
+    /** Hierarchical data with keys and optional children. */
+    treeData: TreeNodeData[];
+    /** Renames `title`, `key`, `children`, and other field accessors. */
+    fieldNames?: TreeFieldNames;
+    /** Shows checkboxes on nodes. @default false */
+    checkable?: boolean;
+    /** When true, parent and child checks are independent. @default false */
+    checkStrictly?: boolean;
+    /** Controlled checked keys. */
+    checkedKeys?: TreeKey[];
+    /** Initial checked keys in uncontrolled mode. */
+    defaultCheckedKeys?: TreeKey[];
+    /** Fires after check state changes. */
+    onCheck?: (checkedKeys: TreeKey[], info: CheckInfo) => void;
+    /** Allows clicking titles to select nodes. @default true */
+    selectable?: boolean;
+    /** Allows multiple selected nodes. @default false */
+    multiple?: boolean;
+    /** Controlled selected keys. */
+    selectedKeys?: TreeKey[];
+    /** Initial selected keys in uncontrolled mode. */
+    defaultSelectedKeys?: TreeKey[];
+    /** Fires after selection changes. */
+    onSelect?: (selectedKeys: TreeKey[], info: SelectInfo) => void;
+    /** Controlled expanded keys. */
+    expandedKeys?: TreeKey[];
+    /** Initial expanded keys in uncontrolled mode. */
+    defaultExpandedKeys?: TreeKey[];
+    /** Expands every parent on first render when uncontrolled. @default false */
+    defaultExpandAll?: boolean;
+    /** Expands ancestors of the focused or matched node when filtering. @default false */
+    autoExpandParent?: boolean;
+    /** Fires after expand/collapse. */
+    onExpand?: (expandedKeys: TreeKey[], info: ExpandInfo) => void;
+    /** Enables drag handles per node or per node predicate. @default false */
+    draggable?: boolean | ((node: TreeNodeData) => boolean);
+    /** Validates whether a drop is allowed. */
+    allowDrop?: (info: {
+        dragNode: TreeNodeData;
+        dropNode: TreeNodeData;
+        dropPosition: -1 | 0 | 1;
+    }) => boolean;
+    /** Drag start callback. */
+    onDragStart?: (info: DragInfo) => void;
+    /** Drag enter callback. */
+    onDragEnter?: (info: DragInfo) => void;
+    /** Drag over callback. */
+    onDragOver?: (info: DragInfo) => void;
+    /** Drag leave callback. */
+    onDragLeave?: (info: DragInfo) => void;
+    /** Drag end callback. */
+    onDragEnd?: (info: DragInfo) => void;
+    /** Drop callback after a successful internal move. */
+    onDrop?: (info: DropInfo) => void;
+    /** Loads children asynchronously; return promise resolves when data is ready. */
+    loadData?: (node: TreeNodeData) => Promise<void>;
+    /** Keys whose children have finished loading. */
+    loadedKeys?: TreeKey[];
+    /** Renders guide lines between levels or configures leaf icons. @default false */
+    showLine?: boolean | {
+        showLeafIcon?: boolean | React__default.ReactNode;
+    };
+    /** Shows a leading icon column. @default false */
+    showIcon?: boolean;
+    /** Default node icon render or element. */
+    icon?: React__default.ReactNode | ((props: {
+        expanded: boolean;
+        selected: boolean;
+    }) => React__default.ReactNode);
+    /** Custom expand/collapse control. */
+    switcherIcon?: React__default.ReactNode | ((props: {
+        expanded: boolean;
+        loading: boolean;
+        isLeaf: boolean;
+    }) => React__default.ReactNode);
+    /** Makes the whole row clickable for selection. @default false */
+    blockNode?: boolean;
+    /** Fixed viewport height enabling internal virtual scroll. */
+    height?: number;
+    /** Uses windowed rendering when `height` is set and the list is large. @default true */
+    virtual?: boolean;
+    /** Disables all interactions. @default false */
+    disabled?: boolean;
+    /** Horizontal indent per depth level in pixels. @default 24 */
+    indentSize?: number;
+    /** Directory-style selection expands folders on click. @default false */
+    directory?: boolean;
+    /** Context menu handler on node rows. */
+    onRightClick?: (info: {
+        event: React__default.MouseEvent;
+        node: TreeNodeData;
+    }) => void;
+    /** Shows the toolbar search field. @default false */
+    showSearch?: boolean;
+    /** Controlled filter text. */
+    searchValue?: string;
+    /** Initial filter text when uncontrolled. @default '' */
+    defaultSearchValue?: string;
+    /** Emits filter text changes. */
+    onSearch?: (value: string) => void;
+    /** Predicate to include nodes while searching. */
+    filterTreeNode?: (node: TreeNodeData, searchValue: string) => boolean;
+    /** Highlights matched text in titles. @default true */
+    highlightSearch?: boolean;
+    /** Enables built-in keyboard navigation helpers. @default true */
+    keyboard?: boolean;
+    /** Enables inline editing of titles per node or predicate. @default false */
+    editable?: boolean | ((node: TreeNodeData) => boolean);
+    /** Commit handler for inline edits. */
+    onEdit?: (info: EditInfo) => void;
+    /** Cancel handler for inline edits. */
+    onEditCancel?: (key: TreeKey) => void;
+    /** Custom title area render. */
+    titleRender?: (node: TreeNodeData, info: {
+        expanded: boolean;
+        selected: boolean;
+        checked: boolean;
+        halfChecked: boolean;
+    }) => React__default.ReactNode;
+    /** Inline action buttons on node rows. */
+    actions?: TreeNodeAction[];
+    /** Shows toolbar with expand/collapse/check-all controls. @default false */
+    showToolbar?: boolean;
+    /** Extra toolbar nodes after built-ins. */
+    toolbarExtra?: React__default.ReactNode;
+    /** Enables expand/collapse animations. @default true */
+    animated?: boolean;
+    /** Focuses a node on mount when supported. @default false */
+    autoFocus?: boolean;
+    /** Controlled focused node key. */
+    focusedKey?: TreeKey;
+    /** Fires when focus moves to a node. */
+    onFocus?: (key: TreeKey) => void;
+    /** Scrolls the given key into view when it changes. */
+    scrollToKey?: TreeKey;
+    /** Maps a node to a status color variant. */
+    nodeStatus?: (node: TreeNodeData) => TreeNodeStatus;
+    /** Overrides default locale strings. */
+    locale?: TreeLocale;
+    /** Root wrapper class name. */
+    className?: string;
+    /** Root wrapper style. */
+    style?: React__default.CSSProperties;
+    /** Renders semantic tree without Skygraph styles. */
+    unstyled?: boolean;
+}
+
+/**
+ * Hierarchical list with expand/collapse, checkboxes, selection, search, keyboard focus, and optional drag-and-drop.
+ * State is managed by `useTree`; rows are rendered through `TreeNodeRow`.
+ */
+declare function Tree(props: TreeProps): react_jsx_runtime.JSX.Element;
+
+interface UseTreeOptions extends TreeEngineOptions {
+    data?: TreeNodeData[];
+}
+interface UseTreeReturn {
+    core: Core;
+    tree: TreeEngine;
+    treeState: TreeState;
+    flatNodes: ReturnType<TreeEngine['getFlatNodes']>;
+    expand: (key: TreeKey) => void;
+    collapse: (key: TreeKey) => void;
+    toggleExpand: (key: TreeKey) => void;
+    setExpandedKeys: (keys: TreeKey[]) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    expandToLevel: (level: number) => void;
+    check: (key: TreeKey) => void;
+    uncheck: (key: TreeKey) => void;
+    toggleCheck: (key: TreeKey) => void;
+    setCheckedKeys: (keys: TreeKey[]) => void;
+    checkAll: () => void;
+    uncheckAll: () => void;
+    select: (key: TreeKey, multiple?: boolean) => void;
+    deselect: (key: TreeKey) => void;
+    setSelectedKeys: (keys: TreeKey[]) => void;
+    markLoading: (key: TreeKey) => void;
+    markLoaded: (key: TreeKey) => void;
+    addChildren: (parentKey: TreeKey, children: TreeNodeData[]) => void;
+    moveNode: (dragKey: TreeKey, dropKey: TreeKey, position: -1 | 0 | 1) => TreeNodeData[] | null;
+    filterNodes: (predicate: ((node: TreeNodeData) => boolean) | null) => void;
+    getNodePath: (key: TreeKey) => TreeKey[];
+    refresh: () => void;
+}
+declare function useTree(options?: UseTreeOptions): UseTreeReturn;
+
+/** Props for the tree-based dropdown selector. */
+interface TreeSelectProps {
+    /** Tree nodes to show in the dropdown. */
+    treeData: TreeNodeData[];
+    /** Controlled selected key(s). */
+    value?: TreeKey | TreeKey[];
+    /** Initial selected key(s) when uncontrolled. */
+    defaultValue?: TreeKey | TreeKey[];
+    /** Fires when selection changes; value is single key or array when multiple/checkable. */
+    onChange?: (value: TreeKey | TreeKey[], label: React__default.ReactNode[], extra: {
+        triggerNode: TreeNodeData;
+    }) => void;
+    /** Maps custom field names on tree nodes. */
+    fieldNames?: TreeFieldNames;
+    /** Allows selecting more than one leaf without checkboxes. @default false */
+    multiple?: boolean;
+    /** Uses checkboxes and check propagation like `Tree`. @default false */
+    treeCheckable?: boolean;
+    /** Independent parent/child checks when checkable. @default false */
+    treeCheckStrictly?: boolean;
+    /** Expands all nodes initially in the dropdown tree. @default false */
+    treeDefaultExpandAll?: boolean;
+    /** Initial expanded keys in the dropdown tree. */
+    treeDefaultExpandedKeys?: TreeKey[];
+    /** Shows search input in the dropdown. @default false */
+    showSearch?: boolean;
+    /** Filters nodes while searching (defaults to title substring). */
+    filterTreeNode?: (inputValue: string, treeNode: TreeNodeData) => boolean;
+    /** Trigger placeholder when nothing selected. @default 'Please select' */
+    placeholder?: string;
+    /** Shows clear control on the trigger. @default false */
+    allowClear?: boolean;
+    /** Disables opening and editing the value. @default false */
+    disabled?: boolean;
+    /** Selector size token. @default 'middle' */
+    size?: 'small' | 'middle' | 'large';
+    /** Collapses multiple tags to a “+N” rest indicator. */
+    maxTagCount?: number;
+    /** Inline style for the dropdown panel. */
+    dropdownStyle?: React__default.CSSProperties;
+    /** Enables guide lines on the inner `Tree`. @default false */
+    treeLine?: boolean;
+    /** Which checked keys are surfaced to the trigger when checkable. @default 'SHOW_ALL' */
+    showCheckedStrategy?: 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';
+    /** Fires when the search text changes. */
+    onSearch?: (value: string) => void;
+    /** Root wrapper class name. */
+    className?: string;
+    /** Root wrapper style. */
+    style?: React__default.CSSProperties;
+    /** Renders minimal markup without Skygraph selector styles. */
+    unstyled?: boolean;
+}
+
+/**
+ * Dropdown that embeds `Tree` for single or multiple selection, optional checkboxes, and search.
+ * Manages open state, filtering, and tag display for multi-value modes.
+ */
+declare function TreeSelect(props: TreeSelectProps): react_jsx_runtime.JSX.Element;
+
+export { type CheckInfo, type DragInfo, type DropInfo, type EditInfo, type ExpandInfo, type SelectInfo, Tree, type TreeLocale, type TreeNodeAction, type TreeNodeStatus, type TreeProps, TreeSelect, type TreeSelectProps, type UseTreeOptions, type UseTreeReturn, useTree };

package/dist/tree.js

@@ -0,0 +1,13 @@
+import {
+  Tree,
+  TreeSelect,
+  useTree
+} from "./chunk-UO6VJC3C.js";
+import "./chunk-FSV73JI4.js";
+import "./chunk-2OCEO636.js";
+export {
+  Tree,
+  TreeSelect,
+  useTree
+};
+//# sourceMappingURL=tree.js.map

package/dist/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/virtual.cjs

@@ -0,0 +1,145 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/virtual.ts
+var virtual_exports = {};
+__export(virtual_exports, {
+  VirtualList: () => VirtualList,
+  useVirtualScroll: () => useVirtualScroll
+});
+module.exports = __toCommonJS(virtual_exports);
+
+// src/hooks/useVirtualScroll.ts
+var import_react = require("react");
+var import_core = require("@skygraph/core");
+function useVirtualScroll(options) {
+  const containerRef = (0, import_react.useRef)(null);
+  const engineRef = (0, import_react.useRef)(null);
+  if (!engineRef.current) {
+    engineRef.current = (0, import_core.createVirtual)({
+      itemCount: options.itemCount,
+      itemHeight: options.itemHeight,
+      overscan: options.overscan
+    });
+  }
+  const engine = engineRef.current;
+  (0, import_react.useEffect)(() => {
+    engine.setItemCount(options.itemCount);
+  }, [engine, options.itemCount]);
+  (0, import_react.useEffect)(() => {
+    engine.setItemHeight(options.itemHeight);
+  }, [engine, options.itemHeight]);
+  const [range, setRange] = (0, import_react.useState)(
+    () => engine.getRange(0, 0)
+  );
+  const recalc = (0, import_react.useCallback)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setRange(engine.getRange(el.scrollTop, el.clientHeight));
+  }, [engine]);
+  (0, import_react.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    recalc();
+    el.addEventListener("scroll", recalc, { passive: true });
+    const ro = new ResizeObserver(recalc);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", recalc);
+      ro.disconnect();
+    };
+  }, [recalc]);
+  (0, import_react.useEffect)(() => {
+    recalc();
+  }, [options.itemCount, recalc]);
+  const scrollToIndex = (0, import_react.useCallback)(
+    (index, align = "start") => {
+      const el = containerRef.current;
+      if (!el) return;
+      el.scrollTop = engine.scrollToIndex(index, el.clientHeight, align);
+    },
+    [engine]
+  );
+  return (0, import_react.useMemo)(
+    () => ({ range, containerRef, scrollToIndex, engine }),
+    [range, scrollToIndex, engine]
+  );
+}
+
+// src/components/complex/VirtualList/VirtualList.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function VirtualListInner(props, ref) {
+  const {
+    data,
+    itemHeight,
+    overscan,
+    renderItem,
+    className,
+    style,
+    itemKey
+  } = props;
+  const { range, containerRef, scrollToIndex } = useVirtualScroll({
+    itemCount: data.length,
+    itemHeight,
+    overscan
+  });
+  (0, import_react2.useImperativeHandle)(ref, () => ({ scrollToIndex }), [scrollToIndex]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        overflow: "auto",
+        position: "relative",
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: range.totalHeight, position: "relative" }, children: range.visibleItems.map((vi) => {
+        const item = data[vi.index];
+        const key = itemKey ? itemKey(item, vi.index) : vi.index;
+        const itemStyle = {
+          position: "absolute",
+          top: vi.offsetTop,
+          left: 0,
+          right: 0,
+          height: vi.height
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.default.Fragment, { children: renderItem(item, vi.index, itemStyle) }, key);
+      }) })
+    }
+  );
+}
+var VirtualList = (0, import_react2.forwardRef)(VirtualListInner);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VirtualList,
+  useVirtualScroll
+});
+//# sourceMappingURL=virtual.cjs.map

package/dist/virtual.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/virtual.ts","../src/hooks/useVirtualScroll.ts","../src/components/complex/VirtualList/VirtualList.tsx"],"sourcesContent":["export { useVirtualScroll } from './hooks/useVirtualScroll'\nexport type { UseVirtualScrollOptions, UseVirtualScrollReturn } from './hooks/useVirtualScroll'\nexport { VirtualList } from './components/complex/VirtualList/VirtualList'\nexport type { VirtualListProps, VirtualListRef } from './components/complex/VirtualList/VirtualList'\n","import { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport { createVirtual } from '@skygraph/core'\nimport type { VirtualEngine, VirtualRange } from '@skygraph/core'\n\nexport interface UseVirtualScrollOptions {\n  itemCount: number\n  itemHeight: number | ((index: number) => number)\n  overscan?: number\n}\n\nexport interface UseVirtualScrollReturn {\n  range: VirtualRange\n  containerRef: React.RefObject<HTMLElement | null>\n  scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void\n  engine: VirtualEngine\n}\n\nexport function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualScrollReturn {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const engineRef = useRef<VirtualEngine | null>(null)\n\n  if (!engineRef.current) {\n    engineRef.current = createVirtual({\n      itemCount: options.itemCount,\n      itemHeight: options.itemHeight,\n      overscan: options.overscan,\n    })\n  }\n\n  const engine = engineRef.current\n\n  useEffect(() => {\n    engine.setItemCount(options.itemCount)\n  }, [engine, options.itemCount])\n\n  useEffect(() => {\n    engine.setItemHeight(options.itemHeight)\n  }, [engine, options.itemHeight])\n\n  const [range, setRange] = useState<VirtualRange>(() =>\n    engine.getRange(0, 0),\n  )\n\n  const recalc = useCallback(() => {\n    const el = containerRef.current\n    if (!el) return\n    setRange(engine.getRange(el.scrollTop, el.clientHeight))\n  }, [engine])\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n\n    recalc()\n\n    el.addEventListener('scroll', recalc, { passive: true })\n    const ro = new ResizeObserver(recalc)\n    ro.observe(el)\n\n    return () => {\n      el.removeEventListener('scroll', recalc)\n      ro.disconnect()\n    }\n  }, [recalc])\n\n  useEffect(() => {\n    recalc()\n  }, [options.itemCount, recalc])\n\n  const scrollToIndex = useCallback(\n    (index: number, align: 'start' | 'center' | 'end' = 'start') => {\n      const el = containerRef.current\n      if (!el) return\n      el.scrollTop = engine.scrollToIndex(index, el.clientHeight, align)\n    },\n    [engine],\n  )\n\n  return useMemo(\n    () => ({ range, containerRef, scrollToIndex, engine }),\n    [range, scrollToIndex, engine],\n  )\n}\n","import React, { forwardRef, useImperativeHandle } from 'react'\nimport { useVirtualScroll } from '../../../hooks/useVirtualScroll'\nimport type { VirtualItem } from '@skygraph/core'\n\n/** Props for the virtualized fixed-height item list. */\nexport interface VirtualListProps<T = unknown> {\n  /** Full dataset; only visible indices are rendered. */\n  data: T[]\n  /** Fixed row height or per-index height resolver in pixels. */\n  itemHeight: number | ((index: number) => number)\n  /** Extra rows rendered above and below the viewport. */\n  overscan?: number\n  /** Renders one item with absolute positioning styles applied by the list. */\n  renderItem: (item: T, index: number, style: React.CSSProperties) => React.ReactNode\n  /** Scrolling container class name. */\n  className?: string\n  /** Scrolling container inline style. */\n  style?: React.CSSProperties\n  /** Stable React key for each item; defaults to row index. */\n  itemKey?: (item: T, index: number) => React.Key\n}\n\n/** Imperative API for `VirtualList`. */\nexport interface VirtualListRef {\n  /**\n   * Scrolls so the item at `index` is visible.\n   * @param align - Where to place the item in the viewport.\n   */\n  scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void\n}\n\nfunction VirtualListInner<T>(\n  props: VirtualListProps<T>,\n  ref: React.ForwardedRef<VirtualListRef>,\n) {\n  const {\n    data,\n    itemHeight,\n    overscan,\n    renderItem,\n    className,\n    style,\n    itemKey,\n  } = props\n\n  const { range, containerRef, scrollToIndex } = useVirtualScroll({\n    itemCount: data.length,\n    itemHeight,\n    overscan,\n  })\n\n  useImperativeHandle(ref, () => ({ scrollToIndex }), [scrollToIndex])\n\n  return (\n    <div\n      ref={containerRef as React.RefObject<HTMLDivElement>}\n      className={className}\n      style={{\n        overflow: 'auto',\n        position: 'relative',\n        ...style,\n      }}\n    >\n      <div style={{ height: range.totalHeight, position: 'relative' }}>\n        {range.visibleItems.map((vi: VirtualItem) => {\n          const item = data[vi.index]\n          const key = itemKey ? itemKey(item, vi.index) : vi.index\n          const itemStyle: React.CSSProperties = {\n            position: 'absolute',\n            top: vi.offsetTop,\n            left: 0,\n            right: 0,\n            height: vi.height,\n          }\n          return (\n            <React.Fragment key={key}>\n              {renderItem(item, vi.index, itemStyle)}\n            </React.Fragment>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Virtualized scroll container: mounts row content only for items near the viewport.\n * Forwards a ref with `scrollToIndex` for programmatic scrolling.\n */\nexport const VirtualList = forwardRef(VirtualListInner) as <T>(\n  props: VirtualListProps<T> & { ref?: React.Ref<VirtualListRef> },\n) => React.ReactElement\n"],"mappings":"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","names":["import_react","React"]}

package/dist/virtual.d.cts

@@ -0,0 +1,50 @@
+import { VirtualRange, VirtualEngine } from '@skygraph/core';
+import React__default from 'react';
+
+interface UseVirtualScrollOptions {
+    itemCount: number;
+    itemHeight: number | ((index: number) => number);
+    overscan?: number;
+}
+interface UseVirtualScrollReturn {
+    range: VirtualRange;
+    containerRef: React.RefObject<HTMLElement | null>;
+    scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void;
+    engine: VirtualEngine;
+}
+declare function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualScrollReturn;
+
+/** Props for the virtualized fixed-height item list. */
+interface VirtualListProps<T = unknown> {
+    /** Full dataset; only visible indices are rendered. */
+    data: T[];
+    /** Fixed row height or per-index height resolver in pixels. */
+    itemHeight: number | ((index: number) => number);
+    /** Extra rows rendered above and below the viewport. */
+    overscan?: number;
+    /** Renders one item with absolute positioning styles applied by the list. */
+    renderItem: (item: T, index: number, style: React__default.CSSProperties) => React__default.ReactNode;
+    /** Scrolling container class name. */
+    className?: string;
+    /** Scrolling container inline style. */
+    style?: React__default.CSSProperties;
+    /** Stable React key for each item; defaults to row index. */
+    itemKey?: (item: T, index: number) => React__default.Key;
+}
+/** Imperative API for `VirtualList`. */
+interface VirtualListRef {
+    /**
+     * Scrolls so the item at `index` is visible.
+     * @param align - Where to place the item in the viewport.
+     */
+    scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void;
+}
+/**
+ * Virtualized scroll container: mounts row content only for items near the viewport.
+ * Forwards a ref with `scrollToIndex` for programmatic scrolling.
+ */
+declare const VirtualList: <T>(props: VirtualListProps<T> & {
+    ref?: React__default.Ref<VirtualListRef>;
+}) => React__default.ReactElement;
+
+export { type UseVirtualScrollOptions, type UseVirtualScrollReturn, VirtualList, type VirtualListProps, type VirtualListRef, useVirtualScroll };

package/dist/virtual.d.ts

@@ -0,0 +1,50 @@
+import { VirtualRange, VirtualEngine } from '@skygraph/core';
+import React__default from 'react';
+
+interface UseVirtualScrollOptions {
+    itemCount: number;
+    itemHeight: number | ((index: number) => number);
+    overscan?: number;
+}
+interface UseVirtualScrollReturn {
+    range: VirtualRange;
+    containerRef: React.RefObject<HTMLElement | null>;
+    scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void;
+    engine: VirtualEngine;
+}
+declare function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualScrollReturn;
+
+/** Props for the virtualized fixed-height item list. */
+interface VirtualListProps<T = unknown> {
+    /** Full dataset; only visible indices are rendered. */
+    data: T[];
+    /** Fixed row height or per-index height resolver in pixels. */
+    itemHeight: number | ((index: number) => number);
+    /** Extra rows rendered above and below the viewport. */
+    overscan?: number;
+    /** Renders one item with absolute positioning styles applied by the list. */
+    renderItem: (item: T, index: number, style: React__default.CSSProperties) => React__default.ReactNode;
+    /** Scrolling container class name. */
+    className?: string;
+    /** Scrolling container inline style. */
+    style?: React__default.CSSProperties;
+    /** Stable React key for each item; defaults to row index. */
+    itemKey?: (item: T, index: number) => React__default.Key;
+}
+/** Imperative API for `VirtualList`. */
+interface VirtualListRef {
+    /**
+     * Scrolls so the item at `index` is visible.
+     * @param align - Where to place the item in the viewport.
+     */
+    scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void;
+}
+/**
+ * Virtualized scroll container: mounts row content only for items near the viewport.
+ * Forwards a ref with `scrollToIndex` for programmatic scrolling.
+ */
+declare const VirtualList: <T>(props: VirtualListProps<T> & {
+    ref?: React__default.Ref<VirtualListRef>;
+}) => React__default.ReactElement;
+
+export { type UseVirtualScrollOptions, type UseVirtualScrollReturn, VirtualList, type VirtualListProps, type VirtualListRef, useVirtualScroll };

package/dist/virtual.js

@@ -0,0 +1,11 @@
+import {
+  VirtualList
+} from "./chunk-BNMJSYI2.js";
+import {
+  useVirtualScroll
+} from "./chunk-SEQI65CF.js";
+export {
+  VirtualList,
+  useVirtualScroll
+};
+//# sourceMappingURL=virtual.js.map

package/dist/virtual.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}