@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.60

package/dist/cjs/table/useVirtualTable.js

@@ -1,49 +1,85 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
 var reactVirtual = require('@tanstack/react-virtual');
 var react = require('react');
 
 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 useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged) {
+var useVirtualTable = function useVirtualTable(data, options) {
   var _virtualizer$range;
   // 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 = react.useRef(null);
-  var virtualizer = reactVirtual.useVirtualizer({
-    count: data.length,
-    getScrollElement: function getScrollElement() {
-      return scrollerRef.current;
-    },
-    estimateSize: function estimateSize() {
-      return 24;
-    }
-  });
   var _useReducer = react.useReducer(function (state, action) {
+      if (action.type === "updateState") {
+        state.checked = action.checked;
+      }
       if (action.type === "expand") {
         if (state.expanded.includes(action.key)) state.expanded.splice(state.expanded.indexOf(action.key), 1);else state.expanded.push(action.key);
       }
       if (action.type === "check") {
+        var _options$onCheckChang;
         if (state.checked.includes(action.key)) state.checked.splice(state.checked.indexOf(action.key), 1);else state.checked.push(action.key);
-        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
+        (_options$onCheckChang = options.onCheckChanged) === null || _options$onCheckChang === void 0 || _options$onCheckChang.call(options, state.checked);
       }
       if (action.type === "checkall") {
+        var _options$onCheckChang2;
         if (state.allChecked !== 0) {
           state.checked = [];
-        } else if (keyProperty) {
-          state.checked = data.map(function (item) {
-            return item[keyProperty];
+        } else if (options.keyProperty) {
+          state.checked = state.data.map(function (item) {
+            return item[options.keyProperty];
+          });
+        }
+        (_options$onCheckChang2 = options.onCheckChanged) === null || _options$onCheckChang2 === void 0 || _options$onCheckChang2.call(options, state.checked);
+      }
+      var checkList = state.data.filter(function (hit) {
+        return state.checked.includes(hit[options.keyProperty]);
+      });
+      if (action.type === "groupExpand") {
+        var group = state.groups.find(function (group) {
+          return group.key === action.key;
+        });
+        if (group) {
+          group.open = !group.open;
+          state.groups = state.groups.slice();
+          state.items = state.groups.map(function (group) {
+            return [group, group.open ? state.grouped[group.key] : undefined];
+          }).flat(2).filter(Boolean);
+        }
+      }
+      if (action.type === "reset") {
+        state.data = action.data;
+        if (action.key) {
+          state.grouped = utilities.groupBy(state.data, action.key);
+          state.groups = Object.keys(state.grouped).sort(utilities.compareValues("asc")).map(function (group) {
+            return {
+              __GROUP__: true,
+              open: true,
+              key: group,
+              items: state.grouped[group],
+              itemCount: state.grouped[group].length
+            };
           });
+          state.items = state.groups.map(function (group) {
+            return [group].concat(_toConsumableArray(state.grouped[group.key]));
+          }).flat();
+        } else {
+          state.items = state.data;
         }
-        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
       }
       return _objectSpread(_objectSpread({}, state), {}, {
-        allChecked: state.checked.length === data.length ? 1 : state.checked.length ? 2 : 0
+        allChecked: checkList.length === state.data.length ? 1 : state.checked.length ? 2 : 0
       });
     }, {
+      data: data,
+      items: [],
+      grouped: {},
+      groups: [],
       checked: [],
       expanded: [],
       allChecked: 0
@@ -51,19 +87,91 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
+  var activeStickyIndexRef = react.useRef(0);
+  var stickyIndexes = react.useMemo(function () {
+    return state.items.map(function (hit, idx) {
+      return "__GROUP__" in hit ? idx : undefined;
+    }).filter(Boolean);
+  }, [state.items]);
+  var isActiveSticky = function isActiveSticky(index) {
+    return activeStickyIndexRef.current === index;
+  };
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasActiveSticky = _useState2[0],
+    setHasActiveSticky = _useState2[1];
+  var scrollerRef = react.useRef(null);
+  var virtualizer = reactVirtual.useVirtualizer({
+    count: state.items.length,
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return 32;
+    },
+    rangeExtractor: react.useCallback(function (range) {
+      var _reverse$find;
+      activeStickyIndexRef.current = (_reverse$find = _toConsumableArray(stickyIndexes).reverse().find(function (index) {
+        return range.startIndex > index;
+      })) !== null && _reverse$find !== void 0 ? _reverse$find : 0;
+      setHasActiveSticky(range.startIndex !== activeStickyIndexRef.current);
+      var next = new Set([activeStickyIndexRef.current].concat(_toConsumableArray(reactVirtual.defaultRangeExtractor(range))));
+      return _toConsumableArray(next);
+    }, [stickyIndexes])
+  });
   var virtualItems = virtualizer.getVirtualItems();
   var getData = react.useCallback(function (index) {
-    return data[index];
-  }, [data]);
+    return state.items[index];
+  }, [state.items]);
+  react.useEffect(function () {
+    dispatch({
+      type: "reset",
+      key: options.groupProperty,
+      data: data
+    });
+  }, [data, options.groupProperty]);
+  react.useEffect(function () {
+    var _options$checked;
+    dispatch({
+      type: "updateState",
+      checked: (_options$checked = options.checked) !== null && _options$checked !== void 0 ? _options$checked : []
+    });
+  }, [options.checked]);
+  react.useEffect(function () {
+    if (options.onLoadMore) {
+      var _virtualItems$, _virtualItems$slice$p;
+      var firstItem = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index;
+      var lastItem = virtualItems === null || virtualItems === void 0 || (_virtualItems$slice$p = virtualItems.slice(-1).pop()) === null || _virtualItems$slice$p === void 0 ? void 0 : _virtualItems$slice$p.index;
+      var canLoadPrevPage = firstItem !== undefined && state.items[firstItem] === null;
+      var canLoadNextPage = lastItem !== undefined && lastItem === state.items.length - 1 && state.items.length < options.total;
+      var db = utilities.debounce(options.onLoadMore);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!options.loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
+      return function () {
+        return db.cancel();
+      };
+    }
+  }, [options.onLoadMore, virtualItems]);
   return {
     scrollerRef: scrollerRef,
     items: virtualItems,
     checkState: state,
     getData: getData,
     virtualizer: virtualizer,
+    hasActiveSticky: hasActiveSticky,
+    isActiveSticky: isActiveSticky,
     top: (_virtualizer$range = virtualizer.range) === null || _virtualizer$range === void 0 ? void 0 : _virtualizer$range.startIndex,
     totalSize: virtualizer.getTotalSize,
     measureElement: virtualizer.measureElement,
+    toggleGroupExpand: function toggleGroupExpand(key) {
+      return dispatch({
+        type: "groupExpand",
+        key: key
+      });
+    },
     toggleExpand: function toggleExpand(key) {
       return dispatch({
         type: "expand",

package/dist/cjs/tree/TreeNode.js

@@ -2,8 +2,10 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 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; }
@@ -17,32 +19,42 @@ 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 = reactI18next.useTranslation("data"),
+    t = _useTranslation.t;
   var badgeProps = react.useMemo(function () {
     return core.getBadgeProps(node.badge);
   }, [node.badge]);
   var filler = react.useMemo(function () {
-    return node.lines.slice(noLines ? 1 : 0).map(function (line, idx) {
-      return /*#__PURE__*/jsxRuntime.jsxs("svg", {
-        viewBox: "0 0 24 24",
-        className: "flex-initial w-6 fill-tint-200",
-        children: [line === 0 && /*#__PURE__*/jsxRuntime.jsx("path", {
-          d: ""
-        }), !noLines && line === 1 && /*#__PURE__*/jsxRuntime.jsx("path", {
-          d: "M7.45 26.1v-28.2h1.1v28.2h-1.1z"
-        }), !noLines && line === 2 && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+        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-0.5 before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
+        children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
+          viewBox: "0 0 24 24",
+          className: "fill-tint-200 rtl:-scale-x-100",
+          children: [line === 0 && /*#__PURE__*/jsxRuntime.jsx("path", {
+            d: ""
+          }), !noLines && line === 1 && /*#__PURE__*/jsxRuntime.jsx("path", {
+            d: "M7.45 26.1v-28.2h1.1v28.2h-1.1z"
+          }), !noLines && line === 2 && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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 = react.useMemo(function () {
     if (node.icon) return node.icon;
-    return node.leaf ? defaultLeafIcon : defaultNodeIcon;
+    return {
+      icon: node.leaf ? defaultLeafIcon : defaultNodeIcon
+    };
   }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
   var canCheck = react.useMemo(function () {
     return checkable === true || checkable === "leafOnly" && node.leaf;
@@ -53,10 +65,17 @@ var TreeNode = function TreeNode(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "treeitem",
     "aria-selected": node.selected,
-    className: "flex flex-nowrap",
+    className: classNames("flex flex-nowrap items-center"),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
-    children: [filler, !node.leaf && !node.childFiltered && /*#__PURE__*/jsxRuntime.jsx("div", {
+    "data-id": node.id,
+    children: [filler, node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-initial w-6",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        icon: core.CoreIcons.spinner,
+        className: "animate-spin text-muted"
+      })
+    }), !node.leaf && !node.childFiltered && !node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         rtlFlip: true,
@@ -75,21 +94,17 @@ 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 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: classNames("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);
+        canSelect ? onSelect(node.id, e.shiftKey) : canCheck ? onChecked(node.id) : onToggle(node.id);
       },
-      children: [nodeIcon && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-content w-6",
-        children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-          icon: nodeIcon,
-          bg: node.iconBg,
-          color: node.iconColor,
-          rtlFlip: node.rtlFlip
-        })
+      children: [nodeIcon && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-content max-w-6 me-1 self-center leading-none",
+        children: [/*#__PURE__*/react.isValidElement(nodeIcon) && nodeIcon, utilities.isString(nodeIcon) && /*#__PURE__*/jsxRuntime.jsx(core.Icon, _objectSpread({}, core.getIconProps(nodeIcon)))]
       }), node.childSelected && !node.open && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: " flex-content text-primary-500",
         children: "\u2022"
@@ -97,9 +112,12 @@ var TreeNode = function TreeNode(_ref) {
         role: "none",
         className: "flex-1 truncate",
         children: children
-      }), node.badge && /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
+      }), !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"];
+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) {
@@ -22,33 +22,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.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 = react.useRef(null);
@@ -73,16 +91,28 @@ var TreePanel = function TreePanel(_ref) {
       open: function open(id) {
         return expand(id);
       },
+      openAndLoad: function openAndLoad(list) {
+        return expandAndLoad(list);
+      },
       select: function select(id) {
-        return expand(id);
+        return _select(id);
       }
     };
   }, []);
+  react.useEffect(function () {
+    var index = tree.findIndex(function (n) {
+      return n.id === currentSelected;
+    });
+    virtualizer.scrollToIndex(index, {
+      align: "auto"
+    });
+  }, [currentSelected]);
   return /*#__PURE__*/jsxRuntime.jsxs(core.Section, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(core.Header, {
       flex: true,
       className: "items-center p-px justify-end overflow-hidden border-b",
       children: [searchable && /*#__PURE__*/jsxRuntime.jsx(form.Search, {
+        value: query,
         onSearch: onFilter,
         allowClear: true,
         placeholder: filterPlaceholder,
@@ -120,6 +150,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__*/jsxRuntime.jsx("div", {
@@ -132,11 +163,14 @@ 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);
         })]