@react-fabric/data 1.0.0-beta.9 → 1.0.2

package/dist/esm/tree/TreeNode.js

@@ -1,14 +1,15 @@
 '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';
+import { getBadgeProps, Icon, getIconProps, Badge } from '@react-fabric/core';
+import { cn, isTrue, isString, isEmpty } from '@react-fabric/utilities';
+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; }
-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) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+function TreeNode(_ref) {
   var node = _ref.node,
     noLines = _ref.noLines,
     expanders = _ref.expanders,
@@ -17,35 +18,45 @@ var TreeNode = function TreeNode(_ref) {
     defaultLeafIcon = _ref.defaultLeafIcon,
     defaultNodeIcon = _ref.defaultNodeIcon,
     onToggle = _ref.onToggle,
+    onClick = _ref.onClick,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
-    children = _ref.children;
+    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]);
   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"
-        })]
+    return node.lines.slice(1).map(function (line, idx) {
+      return /*#__PURE__*/jsx("div", {
+        className: cn("flex-initial self-stretch flex items-center w-6 relative", !noLines && line > 0 && "before:absolute before:top-0 before:inset-s-[calc(7px)] before:bg-tint-200 before:min-h-[50%] before:w-0.5 before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
+        children: /*#__PURE__*/jsxs("svg", {
+          viewBox: "0 0 24 24",
+          className: "fill-tint-200 rtl:-scale-x-100",
+          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]);
+    return {
+      icon: node.leaf ? defaultLeafIcon : defaultNodeIcon
+    };
+  }, [defaultLeafIcon, defaultNodeIcon, node.icon, node.leaf]);
   var canCheck = useMemo(function () {
-    return checkable === true || checkable === "leafOnly" && node.leaf;
+    return isTrue(checkable) || checkable === "leafOnly" && node.leaf;
   }, [node.leaf, checkable]);
   var canSelect = useMemo(function () {
     return !node.disabled && (selectable === true || selectable === "leafOnly" && node.leaf);
@@ -53,43 +64,49 @@ var TreeNode = function TreeNode(_ref) {
   return /*#__PURE__*/jsxs("div", {
     role: "treeitem",
     "aria-selected": node.selected,
-    className: "flex flex-nowrap",
+    className: cn("flex flex-nowrap items-center"),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
-    children: [filler, !node.leaf && !node.childFiltered && /*#__PURE__*/jsx("div", {
+    "data-id": node.id,
+    children: [filler, node.loading && /*#__PURE__*/jsx("div", {
       className: "flex-initial w-6",
+      children: /*#__PURE__*/jsx(Icon, {
+        icon: "icon-[svg-spinners--eclipse]",
+        className: "text-muted"
+      })
+    }), !node.leaf && !node.childFiltered && !node.loading && /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: "flex-initial w-6",
+      onClick: function onClick() {
+        return !node.leaf && onToggle(node.id);
+      },
       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", {
+    }), canCheck && /*#__PURE__*/jsx("button", {
+      type: "button",
       className: "flex-initial w-6",
+      onClick: function onClick() {
+        return !node.disabled && onChecked(node.id);
+      },
       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")
+        icon: node.checked === 2 ? "icon-[mdi--checkbox-intermediate]" : node.checked === 1 ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]",
+        className: cn(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")
       })
-    }), /*#__PURE__*/jsxs("div", {
+    }), !node.empty && /*#__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"),
+      className: cn("group/tool data-selected:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", node.disabled && "text-muted opacity-65", node.className, node.leaf ? leafClassName : nodeClassName, !node.disabled && (canSelect || onClick) && "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);
+      onClick: node.disabled ? undefined : function (e) {
+        onClick === null || onClick === void 0 || onClick(node.id, node.data);
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        canSelect ? onSelect(node.id, e.shiftKey) : 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
-        })
+      children: [nodeIcon && /*#__PURE__*/jsxs("div", {
+        className: "flex-content max-w-6 me-1 self-center leading-none",
+        children: [/*#__PURE__*/isValidElement(nodeIcon) && nodeIcon, isString(nodeIcon) && /*#__PURE__*/jsx(Icon, _objectSpread({}, getIconProps(nodeIcon)))]
       }), node.childSelected && !node.open && /*#__PURE__*/jsx("span", {
         className: " flex-content text-primary-500",
         children: "\u2022"
@@ -97,11 +114,14 @@ var TreeNode = function TreeNode(_ref) {
         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)
+      }), !isEmpty(node.badge) && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
+        className: cn("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")
     })]
   });
-};
+}
 
 export { TreeNode };

package/dist/esm/tree/TreePanel.js

@@ -2,19 +2,18 @@
 
 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 { Layout, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
 import { Search } from '@react-fabric/form';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef, useMemo, useImperativeHandle } from 'react';
+import { useRef, useMemo, useImperativeHandle, useEffect } 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 = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "searchable", "selectable", "multiple", "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) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+function TreePanel(_ref) {
   var _virtualItems$;
   var ref = _ref.ref,
     items = _ref.items,
@@ -22,33 +21,51 @@ var TreePanel = function TreePanel(_ref) {
     checked = _ref.checked,
     checkable = _ref.checkable,
     noLines = _ref.noLines,
-    renderer = _ref.renderer,
     searchable = _ref.searchable,
     selectable = _ref.selectable,
+    multiple = _ref.multiple,
     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,
+    onChecked = _ref.onChecked,
+    onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
+    onSelect = _ref.onSelect,
+    onClick = _ref.onClick,
+    sorter = _ref.sorter,
+    makeLabel = _ref.makeLabel,
+    makeIcon = _ref.makeIcon,
+    defaultExpanded = _ref.defaultExpanded,
+    onExpandToggle = _ref.onExpandToggle,
+    leafClassName = _ref.leafClassName,
+    nodeClassName = _ref.nodeClassName,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useTree = useTree({
       items: items,
       checked: checked,
       selected: selected,
+      multiple: multiple,
       matcher: matcher,
+      sorter: sorter,
+      onLoad: onLoad,
+      onQuery: onQuery,
       onSelect: onSelect,
-      onChecked: onChecked
+      onChecked: onChecked,
+      defaultExpanded: defaultExpanded,
+      onExpandToggle: onExpandToggle
     }),
     tree = _useTree.tree,
+    query = _useTree.query,
+    currentSelected = _useTree.selected,
     toggleExpand = _useTree.toggleExpand,
     toggleCheck = _useTree.toggleCheck,
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
-    select = _useTree.select,
+    expandAndLoad = _useTree.expandAndLoad,
+    _select = _useTree.select,
     expand = _useTree.expand,
     onFilter = _useTree.onFilter;
   var scrollerRef = useRef(null);
@@ -63,32 +80,47 @@ var TreePanel = function TreePanel(_ref) {
   });
   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];
+    if (expander === "caret") return ["icon-[mdi--menu-right]", "icon-[mdi--menu-down]"];
+    if (expander === "chevron") return ["icon-[mdi--chevron-right]", "icon-[mdi--chevron-down]"];
+    if (expander === "folder") return ["icon-[mdi--folder-outline]", "icon-[mdi--folder-open-outline]"];
+    return ["icon-[mdi--plus-box-outline]", "icon-[mdi--minus-box-outline]"];
   }, [expander]);
   useImperativeHandle(ref, function () {
     return {
       open: function open(id) {
         return expand(id);
       },
+      openAndLoad: function openAndLoad(list) {
+        return expandAndLoad(list);
+      },
       select: function select(id) {
-        return expand(id);
+        return _select(id);
       }
     };
-  }, []);
-  return /*#__PURE__*/jsxs(Section, {
+  },
+  // eslint-disable-next-line @eslint-react/exhaustive-deps
+  []);
+  useEffect(function () {
+    var index = tree.findIndex(function (n) {
+      return n.id === currentSelected;
+    });
+    virtualizer.scrollToIndex(index, {
+      align: "auto"
+    });
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [currentSelected]);
+  return /*#__PURE__*/jsxs(Layout, {
     children: [/*#__PURE__*/jsxs(Header, {
       flex: true,
       className: "items-center p-px justify-end overflow-hidden border-b",
       children: [searchable && /*#__PURE__*/jsx(Search, {
+        value: query,
         onSearch: onFilter,
         allowClear: true,
         placeholder: filterPlaceholder,
         noBorder: true,
         decorateStart: /*#__PURE__*/jsx(Icon, {
-          icon: CoreIcons.filter,
+          icon: "icon-[mdi--filter-variant]",
           className: "p-1"
         })
       }), /*#__PURE__*/jsxs(ButtonGroup, {
@@ -97,12 +129,12 @@ var TreePanel = function TreePanel(_ref) {
         children: [/*#__PURE__*/jsx(Button, {
           size: "sm",
           "aria-label": "expand all",
-          icon: iconExpandAll,
+          icon: "icon-[mdi--arrow-expand-vertical]",
           onClick: expandAll
         }), /*#__PURE__*/jsx(Button, {
           size: "sm",
           "aria-label": "collapse all",
-          icon: iconCollapseAll,
+          icon: "icon-[mdi--arrow-collapse-vertical]",
           onClick: collapseAll
         })]
       })]
@@ -120,6 +152,7 @@ var TreePanel = function TreePanel(_ref) {
             height: (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start
           }
         }), virtualItems.map(function (_ref2) {
+          var _makeIcon, _ref3;
           var index = _ref2.index,
             key = _ref2.key;
           return /*#__PURE__*/jsx("div", {
@@ -132,17 +165,20 @@ var TreePanel = function TreePanel(_ref) {
               checkable: checkable,
               selectable: selectable,
               defaultLeafIcon: defaultLeafIcon,
-              defaultNodeIcon: defaultNodeIcon,
+              defaultNodeIcon: (_makeIcon = makeIcon === null || makeIcon === void 0 ? void 0 : makeIcon(tree[index].data)) !== null && _makeIcon !== void 0 ? _makeIcon : 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
+              onSelect: _select,
+              onClick: onClick,
+              leafClassName: leafClassName,
+              nodeClassName: nodeClassName,
+              children: (_ref3 = tree[index].data && (makeLabel === null || makeLabel === void 0 ? void 0 : makeLabel(tree[index].data))) !== null && _ref3 !== void 0 ? _ref3 : tree[index].label
             })
           }, key);
         })]
       })
     }))]
   });
-};
+}
 
 export { TreePanel };