@react-fabric/data 1.0.0-beta.27 → 1.0.0-beta.29

package/dist/cjs/table/Table.js

@@ -108,8 +108,10 @@ var Table = function Table(_ref) {
       style: {
         gridTemplate: "\"head\" auto \"loader\" auto \"content\" 1fr \"foot\" auto/1fr"
       },
+      "data-ref": "tableScroller",
       ref: scrollerRef,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        "data-ref": "tableHeader",
         className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: wrapperStart,

package/dist/cjs/table/useResizer.js

@@ -44,14 +44,14 @@ var useResizer = function useResizer(colEl, ghostEl, callback) {
   /** ***************** attach handlers *******************/
   var box = colEl.getBoundingClientRect();
   if (colEl.parentElement != null) {
-    var _colEl$parentElement;
-    var parentBox = (_colEl$parentElement = colEl.parentElement) === null || _colEl$parentElement === void 0 ? void 0 : _colEl$parentElement.getBoundingClientRect();
+    var _colEl$closest;
+    var parentBox = (_colEl$closest = colEl.closest("[data-ref='tableScroller']")) === null || _colEl$closest === void 0 ? void 0 : _colEl$closest.getBoundingClientRect();
     if (isRtl) {
       placeholder.style.left = "unset";
-      placeholder.style.right = "".concat(box.right - parentBox.right, "px");
+      placeholder.style.right = "".concat(parentBox.width - box.right, "px");
     } else {
       placeholder.style.right = "unset";
-      placeholder.style.left = "".concat(box.left - parentBox.left, "px");
+      placeholder.style.left = "".concat(box.left, "px");
     }
   }
   placeholder.style.width = "".concat(colEl.offsetWidth, "px");

package/dist/cjs/tree/TreeNode.js

@@ -5,6 +5,7 @@ var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
+var reactI18next = require('react-i18next');
 var jsxRuntime = require('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; }
@@ -24,6 +25,8 @@ var TreeNode = function TreeNode(_ref) {
     children = _ref.children,
     leafClassName = _ref.leafClassName,
     nodeClassName = _ref.nodeClassName;
+  var _useTranslation = reactI18next.useTranslation("data"),
+    t = _useTranslation.t;
   var badgeProps = react.useMemo(function () {
     return core.getBadgeProps(node.badge);
   }, [node.badge]);
@@ -33,7 +36,7 @@ var TreeNode = function TreeNode(_ref) {
         className: classNames("flex-initial self-stretch flex items-center w-6 relative", !noLines && line > 0 && "before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
         children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
           viewBox: "0 0 24 24",
-          className: "fill-tint-200",
+          className: "fill-tint-200 rtl:-scale-x-100",
           children: [line === 0 && /*#__PURE__*/jsxRuntime.jsx("path", {
             d: ""
           }), !noLines && line === 1 && /*#__PURE__*/jsxRuntime.jsx("path", {
@@ -66,7 +69,6 @@ var TreeNode = function TreeNode(_ref) {
     children: [filler, node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        rtlFlip: true,
         icon: core.CoreIcons.spinner,
         className: "animate-spin text-muted"
       })
@@ -89,7 +91,7 @@ var TreeNode = function TreeNode(_ref) {
         icon: node.checked === 2 ? core.CoreIcons.checkboxInt : node.checked === 1 ? core.CoreIcons.checkboxOn : core.CoreIcons.checkboxOff,
         className: classNames(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+    }), !node.empty && /*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
       className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
       "data-selected": node.selected,
@@ -115,6 +117,9 @@ var TreeNode = function TreeNode(_ref) {
       }), !utilities.isEmpty(node.badge) && /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
         className: classNames("me-1 self-center flex-content bg-opacity-50", badgeProps.className)
       }))]
+    }), node.empty && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "text-muted text-sm select-none",
+      children: t("tree.noItems")
     })]
   });
 };

package/dist/cjs/tree/TreePanel.js

@@ -11,7 +11,7 @@ var types = require('./types.js');
 var useTree = require('./useTree.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
 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) {
@@ -33,6 +33,7 @@ var TreePanel = function TreePanel(_ref) {
     expander = _ref$expander === void 0 ? "box" : _ref$expander,
     onChecked = _ref.onChecked,
     onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onClick = _ref.onClick,
     sorter = _ref.sorter,
@@ -50,6 +51,7 @@ var TreePanel = function TreePanel(_ref) {
       matcher: matcher,
       sorter: sorter,
       onLoad: onLoad,
+      onQuery: onQuery,
       onSelect: onSelect,
       onChecked: onChecked,
       defaultExpanded: defaultExpanded,

package/dist/cjs/tree/useTree.js

@@ -22,6 +22,7 @@ var useTree = function useTree(_ref) {
     sorter = _ref.sorter,
     matcher = _ref.matcher,
     onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
@@ -38,7 +39,9 @@ var useTree = function useTree(_ref) {
     }).map(function (node) {
       return node.id;
     });
-    onExpandToggle === null || onExpandToggle === void 0 || onExpandToggle(expandedList);
+    setTimeout(function () {
+      return onExpandToggle === null || onExpandToggle === void 0 ? void 0 : onExpandToggle(expandedList);
+    }, 100);
   }, [onExpandToggle]);
   var loadChildren = react.useCallback(function (node) {
     var _node$children;
@@ -132,9 +135,14 @@ var useTree = function useTree(_ref) {
         return _objectSpread({}, state);
       }
       if (action.type === "filter") {
-        utils.filterTree(state.itemMap, action.query, matcher);
-        state.tree = utils.flattenTree(state.items);
-        return _objectSpread({}, state);
+        if (onQuery) {
+          var _action$query;
+          onQuery((_action$query = action.query) !== null && _action$query !== void 0 ? _action$query : "");
+        } else {
+          utils.filterTree(state.itemMap, action.query, matcher);
+          state.tree = utils.flattenTree(state.items);
+          return _objectSpread({}, state);
+        }
       }
       if (action.type === "select") {
         var _componentEvents$curr, _componentEvents$curr2, _state$itemMap$get;
@@ -190,7 +198,7 @@ var useTree = function useTree(_ref) {
       type: "load",
       items: itemList
     });
-    ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
+    itemList.length && ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
       type: "expand",
       id: intialExpand.current.shift()
     });

package/dist/cjs/tree/utils.js

@@ -40,9 +40,9 @@ var refactorTree = function refactorTree(nodes, _ref) {
   var list = [];
   if (sorter !== false) nodes = nodes.sort(sorter);
   nodes.forEach(function (node) {
+    var _node$children;
     list.push(_objectSpread(_objectSpread({
-      open: false,
-      // defaultExpanded.includes(node.id),
+      open: defaultExpanded.includes(node.id) && !!((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -81,11 +81,17 @@ var flattenTree = function flattenTree(nodes) {
     return !node.filtered;
   });
   filtered.forEach(function (node, idx) {
+    var _node$children2;
     node.lines = [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 2 : 3]);
     list.push(node);
     (node.open || node.childFiltered) && node.children && list.push.apply(list, _toConsumableArray(flattenTree(node.children.filter(function (child) {
       return !child.filtered;
     }), [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1]))));
+    node.open && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) === 0 && list.push({
+      empty: true,
+      leaf: true,
+      lines: [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1, 2])
+    });
   });
   return list;
 };

package/dist/esm/table/Table.js

@@ -108,8 +108,10 @@ var Table = function Table(_ref) {
       style: {
         gridTemplate: "\"head\" auto \"loader\" auto \"content\" 1fr \"foot\" auto/1fr"
       },
+      "data-ref": "tableScroller",
       ref: scrollerRef,
       children: [/*#__PURE__*/jsxs("div", {
+        "data-ref": "tableHeader",
         className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
         children: [/*#__PURE__*/jsxs("div", {
           className: wrapperStart,

package/dist/esm/table/useResizer.js

@@ -44,14 +44,14 @@ var useResizer = function useResizer(colEl, ghostEl, callback) {
   /** ***************** attach handlers *******************/
   var box = colEl.getBoundingClientRect();
   if (colEl.parentElement != null) {
-    var _colEl$parentElement;
-    var parentBox = (_colEl$parentElement = colEl.parentElement) === null || _colEl$parentElement === void 0 ? void 0 : _colEl$parentElement.getBoundingClientRect();
+    var _colEl$closest;
+    var parentBox = (_colEl$closest = colEl.closest("[data-ref='tableScroller']")) === null || _colEl$closest === void 0 ? void 0 : _colEl$closest.getBoundingClientRect();
     if (isRtl) {
       placeholder.style.left = "unset";
-      placeholder.style.right = "".concat(box.right - parentBox.right, "px");
+      placeholder.style.right = "".concat(parentBox.width - box.right, "px");
     } else {
       placeholder.style.right = "unset";
-      placeholder.style.left = "".concat(box.left - parentBox.left, "px");
+      placeholder.style.left = "".concat(box.left, "px");
     }
   }
   placeholder.style.width = "".concat(colEl.offsetWidth, "px");

package/dist/esm/tree/TreeNode.js

@@ -5,6 +5,7 @@ import { getBadgeProps, Icon, CoreIcons, Badge } from '@react-fabric/core';
 import { isString, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, isValidElement } from 'react';
+import { useTranslation } from 'react-i18next';
 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; }
@@ -24,6 +25,8 @@ var TreeNode = function TreeNode(_ref) {
     children = _ref.children,
     leafClassName = _ref.leafClassName,
     nodeClassName = _ref.nodeClassName;
+  var _useTranslation = useTranslation("data"),
+    t = _useTranslation.t;
   var badgeProps = useMemo(function () {
     return getBadgeProps(node.badge);
   }, [node.badge]);
@@ -33,7 +36,7 @@ var TreeNode = function TreeNode(_ref) {
         className: classNames("flex-initial self-stretch flex items-center w-6 relative", !noLines && line > 0 && "before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
         children: /*#__PURE__*/jsxs("svg", {
           viewBox: "0 0 24 24",
-          className: "fill-tint-200",
+          className: "fill-tint-200 rtl:-scale-x-100",
           children: [line === 0 && /*#__PURE__*/jsx("path", {
             d: ""
           }), !noLines && line === 1 && /*#__PURE__*/jsx("path", {
@@ -66,7 +69,6 @@ var TreeNode = function TreeNode(_ref) {
     children: [filler, node.loading && /*#__PURE__*/jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsx(Icon, {
-        rtlFlip: true,
         icon: CoreIcons.spinner,
         className: "animate-spin text-muted"
       })
@@ -89,7 +91,7 @@ var TreeNode = function TreeNode(_ref) {
         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", {
+    }), !node.empty && /*#__PURE__*/jsxs("div", {
       role: "none",
       className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
       "data-selected": node.selected,
@@ -115,6 +117,9 @@ var TreeNode = function TreeNode(_ref) {
       }), !isEmpty(node.badge) && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
         className: classNames("me-1 self-center flex-content bg-opacity-50", badgeProps.className)
       }))]
+    }), node.empty && /*#__PURE__*/jsx("div", {
+      className: "text-muted text-sm select-none",
+      children: t("tree.noItems")
     })]
   });
 };

package/dist/esm/tree/TreePanel.js

@@ -11,7 +11,7 @@ import { iconExpandAll, iconCollapseAll } from './types.js';
 import { useTree } from './useTree.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
 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) {
@@ -33,6 +33,7 @@ var TreePanel = function TreePanel(_ref) {
     expander = _ref$expander === void 0 ? "box" : _ref$expander,
     onChecked = _ref.onChecked,
     onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onClick = _ref.onClick,
     sorter = _ref.sorter,
@@ -50,6 +51,7 @@ var TreePanel = function TreePanel(_ref) {
       matcher: matcher,
       sorter: sorter,
       onLoad: onLoad,
+      onQuery: onQuery,
       onSelect: onSelect,
       onChecked: onChecked,
       defaultExpanded: defaultExpanded,

package/dist/esm/tree/useTree.js

@@ -22,6 +22,7 @@ var useTree = function useTree(_ref) {
     sorter = _ref.sorter,
     matcher = _ref.matcher,
     onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
@@ -38,7 +39,9 @@ var useTree = function useTree(_ref) {
     }).map(function (node) {
       return node.id;
     });
-    onExpandToggle === null || onExpandToggle === void 0 || onExpandToggle(expandedList);
+    setTimeout(function () {
+      return onExpandToggle === null || onExpandToggle === void 0 ? void 0 : onExpandToggle(expandedList);
+    }, 100);
   }, [onExpandToggle]);
   var loadChildren = useCallback(function (node) {
     var _node$children;
@@ -132,9 +135,14 @@ var useTree = function useTree(_ref) {
         return _objectSpread({}, state);
       }
       if (action.type === "filter") {
-        filterTree(state.itemMap, action.query, matcher);
-        state.tree = flattenTree(state.items);
-        return _objectSpread({}, state);
+        if (onQuery) {
+          var _action$query;
+          onQuery((_action$query = action.query) !== null && _action$query !== void 0 ? _action$query : "");
+        } else {
+          filterTree(state.itemMap, action.query, matcher);
+          state.tree = flattenTree(state.items);
+          return _objectSpread({}, state);
+        }
       }
       if (action.type === "select") {
         var _componentEvents$curr, _componentEvents$curr2, _state$itemMap$get;
@@ -190,7 +198,7 @@ var useTree = function useTree(_ref) {
       type: "load",
       items: itemList
     });
-    ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
+    itemList.length && ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
       type: "expand",
       id: intialExpand.current.shift()
     });

package/dist/esm/tree/utils.js

@@ -40,9 +40,9 @@ var refactorTree = function refactorTree(nodes, _ref) {
   var list = [];
   if (sorter !== false) nodes = nodes.sort(sorter);
   nodes.forEach(function (node) {
+    var _node$children;
     list.push(_objectSpread(_objectSpread({
-      open: false,
-      // defaultExpanded.includes(node.id),
+      open: defaultExpanded.includes(node.id) && !!((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -81,11 +81,17 @@ var flattenTree = function flattenTree(nodes) {
     return !node.filtered;
   });
   filtered.forEach(function (node, idx) {
+    var _node$children2;
     node.lines = [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 2 : 3]);
     list.push(node);
     (node.open || node.childFiltered) && node.children && list.push.apply(list, _toConsumableArray(flattenTree(node.children.filter(function (child) {
       return !child.filtered;
     }), [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1]))));
+    node.open && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) === 0 && list.push({
+      empty: true,
+      leaf: true,
+      lines: [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1, 2])
+    });
   });
   return list;
 };

package/dist/types/tree/TreePanel.d.ts

@@ -1,2 +1,2 @@
 import { type TreePanelProps } from "./types";
-export declare const TreePanel: <T extends KeyValue<any>>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onSelect, onClick, sorter, makeLabel, makeIcon, defaultExpanded, onExpandToggle, leafClassName, nodeClassName, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TreePanel: <T extends KeyValue<any>>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onQuery, onSelect, onClick, sorter, makeLabel, makeIcon, defaultExpanded, onExpandToggle, leafClassName, nodeClassName, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/tree/types.d.ts

@@ -125,6 +125,10 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      * callback for lazy loading tree items
      */
     onLoad?: (id: string) => Promise<Array<TreeNodeType<T>> | undefined> | Array<TreeNodeType<T>> | undefined;
+    /**
+     * callback to load tree using search query
+     */
+    onQuery?: (query: string) => void;
     /**
      * callback on click of tree node
      */

package/dist/types/tree/useTree.d.ts

@@ -1,5 +1,5 @@
 import { type InternalNode, type TreePanelProps } from "./types";
-export declare const useTree: <T extends KeyValue<any>>({ items, checked, selected, sorter, matcher, onLoad, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>>) => {
+export declare const useTree: <T extends KeyValue<any>>({ items, checked, selected, sorter, matcher, onLoad, onQuery, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>>) => {
     tree: InternalNode[];
     toggleExpand: (id: string) => void;
     expandAll: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.27",
+  "version": "1.0.0-beta.29",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.27",
-    "@react-fabric/date": "^1.0.0-beta.27",
-    "@react-fabric/form": "^1.0.0-beta.27",
-    "@react-fabric/utilities": "^1.0.0-beta.27",
+    "@react-fabric/core": "^1.0.0-beta.29",
+    "@react-fabric/date": "^1.0.0-beta.29",
+    "@react-fabric/form": "^1.0.0-beta.29",
+    "@react-fabric/utilities": "^1.0.0-beta.29",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -52,5 +52,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "02ddac152718fe86b6003f35ea5e1ef1581168f2"
+  "gitHead": "1011b13034b9f8f28c292468aed602217496da4a"
 }

package/src/table/Table.tsx

@@ -142,9 +142,13 @@ export const Table = <T extends KeyValue = KeyValue>({
         style={{
           gridTemplate: `"head" auto "loader" auto "content" 1fr "foot" auto/1fr`,
         }}
+        data-ref="tableScroller"
         ref={scrollerRef}
       >
-        <div className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2">
+        <div
+          data-ref="tableHeader"
+          className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2"
+        >
           <div className={wrapperStart}>
             {canExpand && <div className="w-6" />}
             {checkableRows && (

package/src/table/useResizer.ts

@@ -47,13 +47,15 @@ export const useResizer = (
   /** ***************** attach handlers *******************/
   const box = colEl.getBoundingClientRect();
   if (colEl.parentElement != null) {
-    const parentBox = colEl.parentElement?.getBoundingClientRect();
+    const parentBox = colEl
+      .closest("[data-ref='tableScroller']")
+      ?.getBoundingClientRect() as unknown as DOMRect;
     if (isRtl) {
       placeholder.style.left = "unset";
-      placeholder.style.right = `${box.right - parentBox.right}px`;
+      placeholder.style.right = `${parentBox.width - box.right}px`;
     } else {
       placeholder.style.right = "unset";
-      placeholder.style.left = `${box.left - parentBox.left}px`;
+      placeholder.style.left = `${box.left}px`;
     }
   }
   placeholder.style.width = `${colEl.offsetWidth}px`;

package/src/tree/TreeNode.tsx

@@ -25,6 +25,7 @@ import { Badge, CoreIcons, getBadgeProps, Icon } from "@react-fabric/core";
 import { isEmpty, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { type TreeNodeProps } from "./types";
 
 export const TreeNode = ({
@@ -43,6 +44,7 @@ export const TreeNode = ({
   leafClassName,
   nodeClassName,
 }: TreeNodeProps) => {
+  const { t } = useTranslation("data");
   const badgeProps = useMemo(() => {
     return getBadgeProps(node.badge);
   }, [node.badge]);
@@ -59,7 +61,7 @@ export const TreeNode = ({
           !noLines && line !== 2 && "before:h-full",
         )}
       >
-        <svg viewBox="0 0 24 24" className="fill-tint-200">
+        <svg viewBox="0 0 24 24" className="fill-tint-200 rtl:-scale-x-100">
           {line === 0 && <path d="" />}
           {!noLines && line === 1 && (
             <path d="M7.45 26.1v-28.2h1.1v28.2h-1.1z" />
@@ -105,11 +107,7 @@ export const TreeNode = ({
       {filler}
       {node.loading && (
         <div className="flex-initial w-6">
-          <Icon
-            rtlFlip
-            icon={CoreIcons.spinner}
-            className="animate-spin text-muted"
-          />
+          <Icon icon={CoreIcons.spinner} className="animate-spin text-muted" />
         </div>
       )}
       {!node.leaf && !node.childFiltered && !node.loading && (
@@ -141,52 +139,59 @@ export const TreeNode = ({
           />
         </div>
       )}
-      <div
-        role="none"
-        className={classNames(
-          "group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
-          node.childSelected && "font-medium",
-          (canSelect || onClick) && "hover:bg-primary-50 cursor-pointer",
-        )}
-        data-selected={node.selected}
-        onClick={() => {
-          onClick?.(node.id, node.data);
-          canSelect
-            ? onSelect(node.id)
-            : canCheck
-              ? onChecked(node.id)
-              : onToggle(node.id);
-        }}
-      >
-        {nodeIcon && (
-          <div className="flex-content w-6 self-center leading-none">
-            {isValidElement(nodeIcon) && nodeIcon}
-            {isString(nodeIcon) && (
-              <Icon
-                icon={nodeIcon}
-                bg={node.iconBg}
-                color={node.iconColor}
-                rtlFlip={node.rtlFlip}
-              />
-            )}
+      {!node.empty && (
+        <div
+          role="none"
+          className={classNames(
+            "group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
+            node.childSelected && "font-medium",
+            (canSelect || onClick) && "hover:bg-primary-50 cursor-pointer",
+          )}
+          data-selected={node.selected}
+          onClick={() => {
+            onClick?.(node.id, node.data);
+            canSelect
+              ? onSelect(node.id)
+              : canCheck
+                ? onChecked(node.id)
+                : onToggle(node.id);
+          }}
+        >
+          {nodeIcon && (
+            <div className="flex-content w-6 self-center leading-none">
+              {isValidElement(nodeIcon) && nodeIcon}
+              {isString(nodeIcon) && (
+                <Icon
+                  icon={nodeIcon}
+                  bg={node.iconBg}
+                  color={node.iconColor}
+                  rtlFlip={node.rtlFlip}
+                />
+              )}
+            </div>
+          )}
+          {node.childSelected && !node.open && (
+            <span className=" flex-content text-primary-500">•</span>
+          )}
+          <div role="none" className="flex-1 truncate">
+            {children}
           </div>
-        )}
-        {node.childSelected && !node.open && (
-          <span className=" flex-content text-primary-500">•</span>
-        )}
-        <div role="none" className="flex-1 truncate">
-          {children}
+          {!isEmpty(node.badge) && (
+            <Badge
+              {...badgeProps}
+              className={classNames(
+                "me-1 self-center flex-content bg-opacity-50",
+                badgeProps.className,
+              )}
+            />
+          )}
         </div>
-        {!isEmpty(node.badge) && (
-          <Badge
-            {...badgeProps}
-            className={classNames(
-              "me-1 self-center flex-content bg-opacity-50",
-              badgeProps.className,
-            )}
-          />
-        )}
-      </div>
+      )}
+      {node.empty && (
+        <div className="text-muted text-sm select-none">
+          {t("tree.noItems")}
+        </div>
+      )}
     </div>
   );
 };

package/src/tree/TreePanel.tsx

@@ -55,6 +55,7 @@ export const TreePanel = <T extends KeyValue>({
   expander = "box",
   onChecked,
   onLoad,
+  onQuery,
   onSelect,
   onClick,
   sorter,
@@ -82,6 +83,7 @@ export const TreePanel = <T extends KeyValue>({
     matcher,
     sorter,
     onLoad,
+    onQuery,
     onSelect,
     onChecked,
     defaultExpanded,

package/src/tree/types.ts

@@ -174,6 +174,10 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
     | Promise<Array<TreeNodeType<T>> | undefined>
     | Array<TreeNodeType<T>>
     | undefined;
+  /**
+   * callback to load tree using search query
+   */
+  onQuery?: (query: string) => void;
   /**
    * callback on click of tree node
    */

package/src/tree/useTree.ts

@@ -98,6 +98,7 @@ export const useTree = <T extends KeyValue>({
   sorter,
   matcher,
   onLoad,
+  onQuery,
   onSelect,
   onChecked,
   defaultExpanded,
@@ -112,7 +113,7 @@ export const useTree = <T extends KeyValue>({
       const expandedList = itemMap
         .filter((node) => node.open)
         .map((node) => node.id);
-      onExpandToggle?.(expandedList);
+      setTimeout(() => onExpandToggle?.(expandedList), 100);
     },
     [onExpandToggle],
   );
@@ -204,9 +205,13 @@ export const useTree = <T extends KeyValue>({
         return { ...state };
       }
       if (action.type === "filter") {
-        filterTree(state.itemMap, action.query, matcher);
-        state.tree = flattenTree(state.items);
-        return { ...state };
+        if (onQuery) {
+          onQuery(action.query ?? "");
+        } else {
+          filterTree(state.itemMap, action.query, matcher);
+          state.tree = flattenTree(state.items);
+          return { ...state };
+        }
       }
       if (action.type === "select") {
         if (state.selected) {
@@ -249,7 +254,8 @@ export const useTree = <T extends KeyValue>({
 
   useEffect(() => {
     dispatch({ type: "load", items: itemList });
-    intialExpand.current?.length > 0 &&
+    itemList.length &&
+      intialExpand.current?.length > 0 &&
       dispatch({
         type: "expand",
         id: intialExpand.current.shift() as unknown as string,

package/src/tree/utils.ts

@@ -58,7 +58,7 @@ export const refactorTree = (
   if (sorter !== false) nodes = nodes.sort(sorter);
   nodes.forEach((node) => {
     list.push({
-      open: false, // defaultExpanded.includes(node.id),
+      open: defaultExpanded.includes(node.id) && !!node.children?.length,
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -114,6 +114,13 @@ export const flattenTree = (
           [...lines, idx === filtered.length - 1 ? 0 : 1],
         ),
       );
+    node.open &&
+      node.children?.length === 0 &&
+      list.push({
+        empty: true,
+        leaf: true,
+        lines: [...lines, idx === filtered.length - 1 ? 0 : 1, 2],
+      } as any);
   });
   return list;
 };