@react-fabric/data 1.0.0-beta.0

package/dist/esm/table/HeaderCell.js

@@ -0,0 +1,79 @@
+'use client';
+
+import { Icon, Dropdown, CoreIcons, Menu, MenuItem } from '@react-fabric/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var HeaderCell = function HeaderCell(_ref) {
+  var label = _ref.label,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    rtlFlip = _ref.rtlFlip;
+    _ref.actions;
+    _ref.locked;
+    var resizable = _ref.resizable,
+    width = _ref.width,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth;
+  return /*#__PURE__*/jsxs("div", {
+    className: "group font-medium border-e flex flex-nowrap text-start items-center",
+    style: {
+      width: width !== null && width !== void 0 ? width : "12rem",
+      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : "2rem",
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : "32rem"
+    },
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex-1 px-2 py-1 text-sm truncate sticky start-0",
+      children: [icon && /*#__PURE__*/jsx(Icon, {
+        icon: icon,
+        bg: iconBg,
+        color: iconColor,
+        rtlFlip: rtlFlip
+      }), /*#__PURE__*/jsx("span", {
+        children: label !== null && label !== void 0 ? label : " "
+      })]
+    }), /*#__PURE__*/jsxs(Dropdown, {
+      placement: "bottom-start",
+      children: [/*#__PURE__*/jsx(Icon, {
+        icon: CoreIcons.caretDown,
+        className: "outline bg-base me-0.5 flex-content hidden group-hover:inline-block data-[dropdown-open]:inline-block"
+      }), /*#__PURE__*/jsxs(Menu, {
+        className: "text-sm",
+        children: [/*#__PURE__*/jsx(MenuItem, {
+          label: "Sort ascending",
+          icon: CoreIcons.sortAsc
+        }), /*#__PURE__*/jsx(MenuItem, {
+          label: "Sort descending",
+          icon: CoreIcons.sortDesc
+        })]
+      })]
+    }), resizable && /*#__PURE__*/jsx("div", {
+      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch"
+    })]
+  });
+};
+
+export { HeaderCell };

package/dist/esm/table/Table.js

@@ -0,0 +1,133 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useMemo, useCallback } from 'react';
+import { BodyCell } from './BodyCell.js';
+import { HeaderCell } from './HeaderCell.js';
+import { useTableColumns } from './useTableColumns.js';
+import { useVirtualTable } from './useVirtualTable.js';
+import classNames from 'classnames';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Table = function Table(_ref) {
+  var _columnMap$start, _columnMap$cols, _columnMap$end, _items$, _columnMap$start3, _columnMap$cols3, _columnMap$end3, _columnMap$start4, _columnMap$cols4, _columnMap$end4;
+  var data = _ref.data,
+    columns = _ref.columns;
+  var _useTableColumns = useTableColumns(columns),
+    columnMap = _useTableColumns.columnMap;
+  var _useVirtualTable = useVirtualTable(data),
+    scrollerRef = _useVirtualTable.scrollerRef,
+    items = _useVirtualTable.items,
+    getData = _useVirtualTable.getData,
+    totalSize = _useVirtualTable.totalSize,
+    measureElement = _useVirtualTable.measureElement;
+  var wrapperStart = useMemo(function () {
+    return "bg-inherit sticky start-0 flex flex-nowrap z-1";
+  }, []);
+  var wrapperEnd = useMemo(function () {
+    return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
+  }, []);
+  var emptyCol = useCallback(function (col, idc) {
+    var _col$width, _col$minWidth, _col$maxWidth;
+    return /*#__PURE__*/jsx("div", {
+      className: "overflow-hidden border-e",
+      style: {
+        width: (_col$width = col.width) !== null && _col$width !== void 0 ? _col$width : "12rem",
+        minWidth: (_col$minWidth = col.minWidth) !== null && _col$minWidth !== void 0 ? _col$minWidth : "2rem",
+        maxWidth: (_col$maxWidth = col.maxWidth) !== null && _col$maxWidth !== void 0 ? _col$maxWidth : "32rem"
+      }
+    }, "blank:".concat(idc));
+  }, []);
+  return /*#__PURE__*/jsxs("div", {
+    className: "grid area-content overflow-auto relative",
+    style: {
+      gridTemplate: "\"head\" auto \"content\" 1fr \"foot\" auto/1fr"
+    },
+    ref: scrollerRef,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
+      children: [/*#__PURE__*/jsx("div", {
+        className: wrapperStart,
+        children: (_columnMap$start = columnMap.start) === null || _columnMap$start === void 0 ? void 0 : _columnMap$start.map(function (col, idx) {
+          return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
+        })
+      }), (_columnMap$cols = columnMap.cols) === null || _columnMap$cols === void 0 ? void 0 : _columnMap$cols.map(function (col, idx) {
+        return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
+      }), /*#__PURE__*/jsx("div", {
+        className: wrapperEnd,
+        children: (_columnMap$end = columnMap.end) === null || _columnMap$end === void 0 ? void 0 : _columnMap$end.map(function (col, idx) {
+          return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
+        })
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "area-content flex flex-col flex-nowrap",
+      style: {
+        height: totalSize()
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
+        }
+      }), items.map(function (_ref2) {
+        var _columnMap$start2, _columnMap$cols2, _columnMap$end2;
+        var index = _ref2.index,
+          key = _ref2.key;
+        return /*#__PURE__*/jsxs("div", {
+          className: classNames("flex flex-nowrap", index % 2 ? "bg-even" : "bg-odd"),
+          "data-index": index,
+          ref: measureElement,
+          children: [/*#__PURE__*/jsx("div", {
+            className: wrapperStart,
+            children: (_columnMap$start2 = columnMap.start) === null || _columnMap$start2 === void 0 ? void 0 : _columnMap$start2.map(function (col, ids) {
+              return /*#__PURE__*/jsx(BodyCell, {
+                column: col,
+                item: getData(index)
+              }, "".concat(key, ":").concat(ids));
+            })
+          }), (_columnMap$cols2 = columnMap.cols) === null || _columnMap$cols2 === void 0 ? void 0 : _columnMap$cols2.map(function (col, idc) {
+            return /*#__PURE__*/jsx(BodyCell, {
+              column: col,
+              item: getData(index)
+            }, "".concat(key, ":").concat(idc));
+          }), /*#__PURE__*/jsx("div", {
+            className: wrapperEnd,
+            children: (_columnMap$end2 = columnMap.end) === null || _columnMap$end2 === void 0 ? void 0 : _columnMap$end2.map(function (col, ide) {
+              return /*#__PURE__*/jsx(BodyCell, {
+                column: col,
+                item: getData(index)
+              }, "".concat(key, ":").concat(ide));
+            })
+          })]
+        }, key);
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex-1 flex flex-nowrap",
+        children: [/*#__PURE__*/jsx("div", {
+          className: wrapperStart,
+          children: (_columnMap$start3 = columnMap.start) === null || _columnMap$start3 === void 0 ? void 0 : _columnMap$start3.map(emptyCol)
+        }), (_columnMap$cols3 = columnMap.cols) === null || _columnMap$cols3 === void 0 ? void 0 : _columnMap$cols3.map(emptyCol), /*#__PURE__*/jsx("div", {
+          className: wrapperEnd,
+          children: (_columnMap$end3 = columnMap.end) === null || _columnMap$end3 === void 0 ? void 0 : _columnMap$end3.map(emptyCol)
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "area-foot bg-dimmed border-t sticky bottom-0 flex flex-nowrap z-2",
+      children: [/*#__PURE__*/jsx("div", {
+        className: wrapperStart,
+        children: (_columnMap$start4 = columnMap.start) === null || _columnMap$start4 === void 0 ? void 0 : _columnMap$start4.map(function (col, idx) {
+          return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
+        })
+      }), (_columnMap$cols4 = columnMap.cols) === null || _columnMap$cols4 === void 0 ? void 0 : _columnMap$cols4.map(function (col, idx) {
+        return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
+      }), /*#__PURE__*/jsx("div", {
+        className: wrapperEnd,
+        children: (_columnMap$end4 = columnMap.end) === null || _columnMap$end4 === void 0 ? void 0 : _columnMap$end4.map(function (col, idx) {
+          return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
+        })
+      })]
+    })]
+  });
+};
+
+export { Table };

package/dist/esm/table/useTableColumns.js

@@ -0,0 +1,26 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { groupBy } from '@react-fabric/utilities';
+import { useState, useEffect } from 'react';
+
+var useTableColumns = function useTableColumns(columns) {
+  var _useState = useState({
+      start: [],
+      end: [],
+      cols: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    columnMap = _useState2[0],
+    setColumnMap = _useState2[1];
+  useEffect(function () {
+    setColumnMap(groupBy(columns.filter(function (col) {
+      return !(col.hideable && col.hidden);
+    }), "locked", "cols"));
+  }, [columns]);
+  return {
+    columnMap: columnMap
+  };
+};
+
+export { useTableColumns };

package/dist/esm/table/useVirtualTable.js

@@ -0,0 +1,56 @@
+'use client';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef, useCallback } from 'react';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var useVirtualTable = function useVirtualTable(data) {
+  // TODO: refactor data into item list, apply grouping if groupColumn provided
+  // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
+
+  var scrollerRef = useRef(null);
+  var virtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return 24;
+    }
+  });
+  var virtualItems = virtualizer.getVirtualItems();
+  var getData = useCallback(function (index) {
+    return data[index];
+  }, [data]);
+  return {
+    scrollerRef: scrollerRef,
+    items: virtualItems,
+    getData: getData,
+    totalSize: virtualizer.getTotalSize,
+    measureElement: virtualizer.measureElement
+  };
+};
+
+export { useVirtualTable };

package/dist/esm/tree/TreeNode.js

@@ -0,0 +1,107 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { getBadgeProps, Icon, CoreIcons, Badge } from '@react-fabric/core';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TreeNode = function TreeNode(_ref) {
+  var node = _ref.node,
+    noLines = _ref.noLines,
+    expanders = _ref.expanders,
+    checkable = _ref.checkable,
+    selectable = _ref.selectable,
+    defaultLeafIcon = _ref.defaultLeafIcon,
+    defaultNodeIcon = _ref.defaultNodeIcon,
+    onToggle = _ref.onToggle,
+    onSelect = _ref.onSelect,
+    onChecked = _ref.onChecked,
+    children = _ref.children;
+  var badgeProps = useMemo(function () {
+    return getBadgeProps(node.badge);
+  }, [node.badge]);
+  var filler = useMemo(function () {
+    return node.lines.slice(noLines ? 1 : 0).map(function (line, idx) {
+      return /*#__PURE__*/jsxs("svg", {
+        viewBox: "0 0 24 24",
+        className: "flex-initial w-6 fill-tint-200",
+        children: [line === 0 && /*#__PURE__*/jsx("path", {
+          d: ""
+        }), !noLines && line === 1 && /*#__PURE__*/jsx("path", {
+          d: "M7.45 26.1v-28.2h1.1v28.2h-1.1z"
+        }), !noLines && line === 2 && /*#__PURE__*/jsx("path", {
+          d: "M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z"
+        }), !noLines && line === 3 && /*#__PURE__*/jsx("path", {
+          d: "M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z"
+        })]
+      }, idx);
+    });
+  }, [noLines, node.lines]);
+  var nodeIcon = useMemo(function () {
+    if (node.icon) return node.icon;
+    return node.leaf ? defaultLeafIcon : defaultNodeIcon;
+  }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
+  var canCheck = useMemo(function () {
+    return checkable === true || checkable === "leafOnly" && node.leaf;
+  }, [node.leaf, checkable]);
+  var canSelect = useMemo(function () {
+    return !node.disabled && (selectable === true || selectable === "leafOnly" && node.leaf);
+  }, [node.leaf, node.disabled, selectable]);
+  return /*#__PURE__*/jsxs("div", {
+    role: "treeitem",
+    "aria-selected": node.selected,
+    className: "flex flex-nowrap",
+    "data-testid": node["data-testid"],
+    "data-test-value": node["data-test-value"],
+    children: [filler, !node.leaf && !node.childFiltered && /*#__PURE__*/jsx("div", {
+      className: "flex-initial w-6",
+      children: /*#__PURE__*/jsx(Icon, {
+        rtlFlip: true,
+        onClick: function onClick() {
+          return !node.leaf && onToggle(node.id);
+        },
+        icon: node.open ? expanders[1] : expanders[0],
+        className: "text-tint-600 hover:text-primary-600"
+      })
+    }), canCheck && /*#__PURE__*/jsx("div", {
+      className: "flex-initial w-6",
+      children: /*#__PURE__*/jsx(Icon, {
+        onClick: function onClick() {
+          return !node.disabled && onChecked(node.id);
+        },
+        icon: node.checked === 2 ? CoreIcons.checkboxInt : node.checked === 1 ? CoreIcons.checkboxOn : CoreIcons.checkboxOff,
+        className: classNames(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      role: "none",
+      className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 items-center overflow-hidden select-none", node.childSelected && "font-medium", canSelect && "hover:bg-primary-50 cursor-pointer"),
+      "data-selected": node.selected,
+      onClick: function onClick() {
+        return canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
+      },
+      children: [nodeIcon && /*#__PURE__*/jsx("div", {
+        className: "flex-content w-6",
+        children: /*#__PURE__*/jsx(Icon, {
+          icon: nodeIcon,
+          bg: node.iconBg,
+          color: node.iconColor,
+          rtlFlip: node.rtlFlip
+        })
+      }), node.childSelected && !node.open && /*#__PURE__*/jsx("span", {
+        className: " flex-content text-primary-500",
+        children: "\u2022"
+      }), /*#__PURE__*/jsx("div", {
+        role: "none",
+        className: "flex-1 truncate",
+        children: children
+      }), node.badge && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
+        className: classNames("me-1 self-center flex-content bg-opacity-50", badgeProps.className)
+      }))]
+    })]
+  });
+};
+
+export { TreeNode };

package/dist/esm/tree/TreePanel.js

@@ -0,0 +1,136 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { CoreIcons, Section, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
+import { Search } from '@react-fabric/form';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef, useMemo } from 'react';
+import { TreeNode } from './TreeNode.js';
+import { iconExpandAll, iconCollapseAll } from './types.js';
+import { useTree } from './useTree.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TreePanel = function TreePanel(_ref) {
+  var _virtualItems$;
+  var items = _ref.items,
+    selected = _ref.selected,
+    checked = _ref.checked,
+    checkable = _ref.checkable,
+    noLines = _ref.noLines,
+    renderer = _ref.renderer,
+    searchable = _ref.searchable,
+    selectable = _ref.selectable,
+    matcher = _ref.matcher,
+    filterPlaceholder = _ref.filterPlaceholder,
+    defaultLeafIcon = _ref.defaultLeafIcon,
+    defaultNodeIcon = _ref.defaultNodeIcon,
+    _ref$expander = _ref.expander,
+    expander = _ref$expander === void 0 ? "box" : _ref$expander,
+    onChecked = _ref.onChecked;
+    _ref.onLoad;
+    var onSelect = _ref.onSelect,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useTree = useTree({
+      items: items,
+      checked: checked,
+      selected: selected,
+      matcher: matcher,
+      onSelect: onSelect,
+      onChecked: onChecked
+    }),
+    tree = _useTree.tree,
+    toggleExpand = _useTree.toggleExpand,
+    toggleCheck = _useTree.toggleCheck,
+    expandAll = _useTree.expandAll,
+    collapseAll = _useTree.collapseAll,
+    select = _useTree.select,
+    onFilter = _useTree.onFilter;
+  var scrollerRef = useRef(null);
+  var virtualizer = useVirtualizer({
+    count: tree.length,
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return 24;
+    }
+  });
+  var virtualItems = virtualizer.getVirtualItems();
+  var expanders = useMemo(function () {
+    if (expander === "caret") return [CoreIcons.caretRight, CoreIcons.caretDown];
+    if (expander === "chevron") return [CoreIcons.chevronRight, CoreIcons.chevronDown];
+    if (expander === "folder") return [CoreIcons.folderClosed, CoreIcons.folderOpen];
+    return [CoreIcons.expand, CoreIcons.collapse];
+  }, [expander]);
+  return /*#__PURE__*/jsxs(Section, {
+    children: [/*#__PURE__*/jsxs(Header, {
+      flex: true,
+      className: "items-center p-px justify-end overflow-hidden border-b",
+      children: [searchable && /*#__PURE__*/jsx(Search, {
+        onSearch: onFilter,
+        allowClear: true,
+        placeholder: filterPlaceholder,
+        noBorder: true,
+        decorateStart: /*#__PURE__*/jsx(Icon, {
+          icon: CoreIcons.filter,
+          className: "p-1"
+        })
+      }), /*#__PURE__*/jsxs(ButtonGroup, {
+        variant: "link",
+        className: "m-0",
+        children: [/*#__PURE__*/jsx(Button, {
+          size: "sm",
+          "aria-label": "expand all",
+          icon: iconExpandAll,
+          onClick: expandAll
+        }), /*#__PURE__*/jsx(Button, {
+          size: "sm",
+          "aria-label": "collapse all",
+          icon: iconCollapseAll,
+          onClick: collapseAll
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+      ref: scrollerRef,
+      role: "tree",
+      className: "area-content overflow-auto p-1"
+    }, aria), {}, {
+      children: /*#__PURE__*/jsxs("div", {
+        style: {
+          height: virtualizer.getTotalSize()
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            height: (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start
+          }
+        }), virtualItems.map(function (_ref2) {
+          var index = _ref2.index,
+            key = _ref2.key;
+          return /*#__PURE__*/jsx("div", {
+            "data-index": index,
+            ref: virtualizer.measureElement,
+            children: /*#__PURE__*/jsx(TreeNode, {
+              node: tree[index],
+              noLines: noLines,
+              expanders: expanders,
+              checkable: checkable,
+              selectable: selectable,
+              defaultLeafIcon: defaultLeafIcon,
+              defaultNodeIcon: defaultNodeIcon,
+              onToggle: toggleExpand,
+              onChecked: toggleCheck,
+              onSelect: select,
+              children: tree[index].data && (renderer === null || renderer === void 0 ? void 0 : renderer(tree[index].data)) || tree[index].label
+            })
+          }, key);
+        })]
+      })
+    }))]
+  });
+};
+
+export { TreePanel };

package/dist/esm/tree/types.js

@@ -0,0 +1,29 @@
+'use client';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
+var iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";
+
+export { iconCollapseAll, iconExpandAll };