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

package/dist/cjs/histogram/Histogram.js

@@ -89,7 +89,7 @@ var Histogram = function Histogram(_ref) {
           return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
         },
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l", "fabric-histoBar"),
+          className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-linear-to-r rtl:bg-linear-to-l", "fabric-histoBar"),
           style: {
             width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
           }

package/dist/cjs/table/BodyRow.js

@@ -55,7 +55,7 @@ var BodyRow = function BodyRow(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
       "data-row": index,
-      className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500 group/table-row", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
+      className: classNames("flex flex-nowrap datatable-row data-hilight:outline-1 -outline-offset-1 outline-primary-500 group/table-row", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
       onClick: function onClick() {
         return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
       },

package/dist/cjs/tree/TreeNode.js

@@ -33,7 +33,7 @@ var TreeNode = function TreeNode(_ref) {
   var filler = react.useMemo(function () {
     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-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
+        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",
@@ -96,11 +96,11 @@ var TreeNode = function TreeNode(_ref) {
       })
     }), !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", node.disabled && "text-muted opacity-65", node.className, node.leaf ? leafClassName : nodeClassName, !node.disabled && (canSelect || onClick) && "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: node.disabled ? undefined : function () {
+      onClick: node.disabled ? undefined : function (e) {
         onClick === null || onClick === void 0 || onClick(node.id, node.data);
-        canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
+        canSelect ? onSelect(node.id, e.shiftKey) : canCheck ? onChecked(node.id) : onToggle(node.id);
       },
       children: [nodeIcon && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex-content max-w-6 me-1 self-center leading-none",

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", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
+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) {
@@ -24,6 +24,7 @@ var TreePanel = function TreePanel(_ref) {
     noLines = _ref.noLines,
     searchable = _ref.searchable,
     selectable = _ref.selectable,
+    multiple = _ref.multiple,
     matcher = _ref.matcher,
     filterPlaceholder = _ref.filterPlaceholder,
     defaultLeafIcon = _ref.defaultLeafIcon,
@@ -47,6 +48,7 @@ var TreePanel = function TreePanel(_ref) {
       items: items,
       checked: checked,
       selected: selected,
+      multiple: multiple,
       matcher: matcher,
       sorter: sorter,
       onLoad: onLoad,

package/dist/cjs/tree/useTree.js

@@ -20,6 +20,7 @@ var useTree = function useTree(_ref) {
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? utilities.EMPTY_ARRAY : _ref$checked,
     selected = _ref.selected,
+    multiple = _ref.multiple,
     sorter = _ref.sorter,
     matcher = _ref.matcher,
     onLoad = _ref.onLoad,
@@ -28,9 +29,11 @@ var useTree = function useTree(_ref) {
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
     onExpandToggle = _ref.onExpandToggle;
-  var componentEvents = react.useRef({
-    onSelect: onSelect,
-    onChecked: onChecked
+  var eventSelect = react.useEffectEvent(onSelect !== null && onSelect !== void 0 ? onSelect : function () {
+    return undefined;
+  });
+  var eventChecked = react.useEffectEvent(onChecked !== null && onChecked !== void 0 ? onChecked : function () {
+    return undefined;
   });
   var intialExpand = react.useRef(_toConsumableArray(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : utilities.EMPTY_ARRAY));
   var itemList = createItemList(items);
@@ -83,13 +86,11 @@ var useTree = function useTree(_ref) {
     }
   }, [onLoad]);
   var fireSelected = core.useDebounce(function (nodeId, data) {
-    var _componentEvents$curr, _componentEvents$curr2;
-    (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, nodeId, data);
-  }, [onSelect]);
+    eventSelect(nodeId, data);
+  }, []);
   var fireChecked = core.useDebounce(function (leafs, nodes, partials) {
-    var _componentEvents$curr3, _componentEvents$curr4;
-    (_componentEvents$curr3 = (_componentEvents$curr4 = componentEvents.current).onChecked) === null || _componentEvents$curr3 === void 0 || _componentEvents$curr3.call(_componentEvents$curr4, leafs, nodes, partials);
-  }, [onChecked]);
+    eventChecked(leafs, nodes, partials);
+  }, []);
   var fireQuery = core.useDebounce(function (query) {
     onQuery === null || onQuery === void 0 || onQuery(query);
   }, [onQuery]);
@@ -119,7 +120,12 @@ var useTree = function useTree(_ref) {
         state.itemMap = utils.makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
-        state.selected = utils.updateSelection(state.itemMap, selected, true);
+        state.selected = selected;
+        utils.updateSelection({
+          nodes: state.itemMap,
+          multiple: multiple,
+          selected: selected
+        });
         (_state$checked = state.checked) === null || _state$checked === void 0 || _state$checked.forEach(function (id) {
           return utils.updateChecked(state.itemMap, id, 1);
         });
@@ -174,23 +180,32 @@ var useTree = function useTree(_ref) {
         });
       }
       if (action.type === "toggleSelect") {
-        if (!onSelect) {
-          if (state.selected) {
-            utils.updateSelection(state.itemMap, state.selected);
-          }
-          state.selected = utils.updateSelection(state.itemMap, action.id, true);
-          state.tree = utils.flattenTree(state.items);
+        var _state$itemMap$get;
+        if (multiple) {
+          var _state$selected, _state$selected$filte, _state$selected2, _state$selected3;
+          var isSelected = (_state$selected = state.selected) === null || _state$selected === void 0 ? void 0 : _state$selected.includes(action.id);
+          if (action.shiftKey && isSelected) state.selected = (_state$selected$filte = (_state$selected2 = state.selected) === null || _state$selected2 === void 0 ? void 0 : _state$selected2.filter(function (id) {
+            return id !== action.id;
+          })) !== null && _state$selected$filte !== void 0 ? _state$selected$filte : [];else if (action.shiftKey && !isSelected) state.selected = [].concat(_toConsumableArray((_state$selected3 = state.selected) !== null && _state$selected3 !== void 0 ? _state$selected3 : []), [action.id]);else state.selected = [action.id];
         } else {
-          var _state$itemMap$get;
-          fireSelected(action.id, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
+          state.selected = action.id;
         }
+        utils.updateSelection({
+          nodes: state.itemMap,
+          selected: state.selected,
+          multiple: multiple
+        });
+        state.tree = utils.flattenTree(state.items);
+        fireSelected(state.selected, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
         return _objectSpread({}, state);
       }
       if (action.type === "select") {
-        if (state.selected) {
-          utils.updateSelection(state.itemMap, state.selected);
-        }
-        state.selected = utils.updateSelection(state.itemMap, action.id, true);
+        state.selected = action.id;
+        utils.updateSelection({
+          nodes: state.itemMap,
+          multiple: multiple,
+          selected: action.id
+        });
         state.tree = utils.flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -234,12 +249,6 @@ var useTree = function useTree(_ref) {
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
-  react.useEffect(function () {
-    componentEvents.current = {
-      onSelect: onSelect,
-      onChecked: onChecked
-    };
-  }, [onSelect, onChecked]);
   react.useEffect(function () {
     var _intialExpand$current3;
     dispatch({
@@ -284,9 +293,11 @@ var useTree = function useTree(_ref) {
     });
   }, []);
   var select = react.useCallback(function (id) {
+    var shiftKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     dispatch({
       type: "toggleSelect",
-      id: id
+      id: id,
+      shiftKey: shiftKey
     });
   }, []);
   var expand = react.useCallback(function (id) {

package/dist/cjs/tree/utils.js

@@ -95,26 +95,37 @@ var flattenTree = function flattenTree(nodes) {
   });
   return list;
 };
-var updateSelection = function updateSelection(nodes, id, selected) {
+var selectNode = function selectNode(nodes, id) {
   var node = nodes.get(id !== null && id !== void 0 ? id : "");
   if (node) {
     // change selection
-    node.selected = selected;
+    node.selected = true;
     // update all parent childSelected flag
     var parent = node.parent;
     while (parent) {
       var parentNode = nodes.get(parent);
-      parentNode && (parentNode.childSelected = selected);
+      parentNode && (parentNode.childSelected = true);
       // selected && parentNode && (parentNode.open = true);
       parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
     }
-    return id;
   }
 };
+var updateSelection = function updateSelection(_ref2) {
+  var nodes = _ref2.nodes,
+    multiple = _ref2.multiple,
+    selected = _ref2.selected;
+  nodes.forEach(function (node) {
+    node.selected = undefined;
+    node.childSelected = undefined;
+  });
+  multiple && utilities.isArray(selected) ? selected === null || selected === void 0 ? void 0 : selected.forEach(function (id) {
+    return selectNode(nodes, id);
+  }) : selectNode(nodes, selected);
+};
 var updateChecked = function updateChecked(list, id, checked) {
   var node = list.get(id);
   if (node) {
-    node.checked = checked === undefined ? node.checked === 0 ? 1 : 0 : checked;
+    node.checked = (checked !== null && checked !== void 0 ? checked : node.checked === 0) ? 1 : 0;
     // check all children
     node.children && getChildren(node.children).forEach(function (child) {
       return child.checked = node.checked;

package/dist/cjs/virtual/Gallery.js

@@ -208,7 +208,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               "data-index": index,
               ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
-                var _itemList;
+                var _itemList, _itemList2;
                 return /*#__PURE__*/jsxRuntime.jsx("div", {
                   "data-index": index * columnCount + col,
                   className: classNames("grid rounded-capped"),
@@ -216,7 +216,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
                     minWidth: width,
                     minHeight: height
                   },
-                  children: (_itemList = itemList[index * columnCount + col]) !== null && _itemList !== void 0 && _itemList.item ? children(itemList[index * columnCount + col]) : /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
+                  children: (_itemList = itemList[index * columnCount + col]) !== null && _itemList !== void 0 && _itemList.item ? children(itemList[index * columnCount + col]) : ((_itemList2 = itemList[index * columnCount + col]) === null || _itemList2 === void 0 ? void 0 : _itemList2.item) === null && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
                     className: "p-2"
                   })
                 }, "".concat(key, ":").concat(col));

package/dist/cjs/virtual/List.js

@@ -193,7 +193,7 @@ var _VirtualList = function _VirtualList(_ref) {
               display: "inline-block"
             }
           }), virtualItems.map(function (_ref3) {
-            var _itemList$index;
+            var _itemList$index, _itemList$index2;
             var key = _ref3.key,
               index = _ref3.index;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -204,7 +204,7 @@ var _VirtualList = function _VirtualList(_ref) {
                 minWidth: width,
                 minHeight: height
               },
-              children: (_itemList$index = itemList[index]) !== null && _itemList$index !== void 0 && _itemList$index.item ? children(itemList[index]) : /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
+              children: (_itemList$index = itemList[index]) !== null && _itemList$index !== void 0 && _itemList$index.item ? children(itemList[index]) : ((_itemList$index2 = itemList[index]) === null || _itemList$index2 === void 0 ? void 0 : _itemList$index2.item) === null && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
                 className: "p-2"
               })
             }, key);

package/dist/esm/histogram/Histogram.js

@@ -89,7 +89,7 @@ var Histogram = function Histogram(_ref) {
           return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
         },
         children: [/*#__PURE__*/jsx("div", {
-          className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l", "fabric-histoBar"),
+          className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-linear-to-r rtl:bg-linear-to-l", "fabric-histoBar"),
           style: {
             width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
           }

package/dist/esm/table/BodyRow.js

@@ -55,7 +55,7 @@ var BodyRow = function BodyRow(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       role: "none",
       "data-row": index,
-      className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500 group/table-row", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
+      className: classNames("flex flex-nowrap datatable-row data-hilight:outline-1 -outline-offset-1 outline-primary-500 group/table-row", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
       onClick: function onClick() {
         return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
       },

package/dist/esm/tree/TreeNode.js

@@ -33,7 +33,7 @@ var TreeNode = function TreeNode(_ref) {
   var filler = useMemo(function () {
     return node.lines.slice(1).map(function (line, idx) {
       return /*#__PURE__*/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-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
+        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__*/jsxs("svg", {
           viewBox: "0 0 24 24",
           className: "fill-tint-200 rtl:-scale-x-100",
@@ -96,11 +96,11 @@ var TreeNode = function TreeNode(_ref) {
       })
     }), !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", node.disabled && "text-muted opacity-65", node.className, node.leaf ? leafClassName : nodeClassName, !node.disabled && (canSelect || onClick) && "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: node.disabled ? undefined : function () {
+      onClick: node.disabled ? undefined : function (e) {
         onClick === null || onClick === void 0 || onClick(node.id, node.data);
-        canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
+        canSelect ? onSelect(node.id, e.shiftKey) : canCheck ? onChecked(node.id) : onToggle(node.id);
       },
       children: [nodeIcon && /*#__PURE__*/jsxs("div", {
         className: "flex-content max-w-6 me-1 self-center leading-none",

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", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
+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) {
@@ -24,6 +24,7 @@ var TreePanel = function TreePanel(_ref) {
     noLines = _ref.noLines,
     searchable = _ref.searchable,
     selectable = _ref.selectable,
+    multiple = _ref.multiple,
     matcher = _ref.matcher,
     filterPlaceholder = _ref.filterPlaceholder,
     defaultLeafIcon = _ref.defaultLeafIcon,
@@ -47,6 +48,7 @@ var TreePanel = function TreePanel(_ref) {
       items: items,
       checked: checked,
       selected: selected,
+      multiple: multiple,
       matcher: matcher,
       sorter: sorter,
       onLoad: onLoad,

package/dist/esm/tree/useTree.js

@@ -6,7 +6,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useDebounce } from '@react-fabric/core';
 import { EMPTY_ARRAY, isEmpty } from '@react-fabric/utilities';
 import memoizeOne from 'memoize-one';
-import { useRef, useCallback, useReducer, useEffect } from 'react';
+import { useEffectEvent, useRef, useCallback, useReducer, useEffect } from 'react';
 import { refactorTree, makeTreeMap, flattenTree, updateSelection, updateChecked, filterTree } from './utils.js';
 
 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; }
@@ -20,6 +20,7 @@ var useTree = function useTree(_ref) {
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? EMPTY_ARRAY : _ref$checked,
     selected = _ref.selected,
+    multiple = _ref.multiple,
     sorter = _ref.sorter,
     matcher = _ref.matcher,
     onLoad = _ref.onLoad,
@@ -28,9 +29,11 @@ var useTree = function useTree(_ref) {
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
     onExpandToggle = _ref.onExpandToggle;
-  var componentEvents = useRef({
-    onSelect: onSelect,
-    onChecked: onChecked
+  var eventSelect = useEffectEvent(onSelect !== null && onSelect !== void 0 ? onSelect : function () {
+    return undefined;
+  });
+  var eventChecked = useEffectEvent(onChecked !== null && onChecked !== void 0 ? onChecked : function () {
+    return undefined;
   });
   var intialExpand = useRef(_toConsumableArray(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : EMPTY_ARRAY));
   var itemList = createItemList(items);
@@ -83,13 +86,11 @@ var useTree = function useTree(_ref) {
     }
   }, [onLoad]);
   var fireSelected = useDebounce(function (nodeId, data) {
-    var _componentEvents$curr, _componentEvents$curr2;
-    (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, nodeId, data);
-  }, [onSelect]);
+    eventSelect(nodeId, data);
+  }, []);
   var fireChecked = useDebounce(function (leafs, nodes, partials) {
-    var _componentEvents$curr3, _componentEvents$curr4;
-    (_componentEvents$curr3 = (_componentEvents$curr4 = componentEvents.current).onChecked) === null || _componentEvents$curr3 === void 0 || _componentEvents$curr3.call(_componentEvents$curr4, leafs, nodes, partials);
-  }, [onChecked]);
+    eventChecked(leafs, nodes, partials);
+  }, []);
   var fireQuery = useDebounce(function (query) {
     onQuery === null || onQuery === void 0 || onQuery(query);
   }, [onQuery]);
@@ -119,7 +120,12 @@ var useTree = function useTree(_ref) {
         state.itemMap = makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
-        state.selected = updateSelection(state.itemMap, selected, true);
+        state.selected = selected;
+        updateSelection({
+          nodes: state.itemMap,
+          multiple: multiple,
+          selected: selected
+        });
         (_state$checked = state.checked) === null || _state$checked === void 0 || _state$checked.forEach(function (id) {
           return updateChecked(state.itemMap, id, 1);
         });
@@ -174,23 +180,32 @@ var useTree = function useTree(_ref) {
         });
       }
       if (action.type === "toggleSelect") {
-        if (!onSelect) {
-          if (state.selected) {
-            updateSelection(state.itemMap, state.selected);
-          }
-          state.selected = updateSelection(state.itemMap, action.id, true);
-          state.tree = flattenTree(state.items);
+        var _state$itemMap$get;
+        if (multiple) {
+          var _state$selected, _state$selected$filte, _state$selected2, _state$selected3;
+          var isSelected = (_state$selected = state.selected) === null || _state$selected === void 0 ? void 0 : _state$selected.includes(action.id);
+          if (action.shiftKey && isSelected) state.selected = (_state$selected$filte = (_state$selected2 = state.selected) === null || _state$selected2 === void 0 ? void 0 : _state$selected2.filter(function (id) {
+            return id !== action.id;
+          })) !== null && _state$selected$filte !== void 0 ? _state$selected$filte : [];else if (action.shiftKey && !isSelected) state.selected = [].concat(_toConsumableArray((_state$selected3 = state.selected) !== null && _state$selected3 !== void 0 ? _state$selected3 : []), [action.id]);else state.selected = [action.id];
         } else {
-          var _state$itemMap$get;
-          fireSelected(action.id, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
+          state.selected = action.id;
         }
+        updateSelection({
+          nodes: state.itemMap,
+          selected: state.selected,
+          multiple: multiple
+        });
+        state.tree = flattenTree(state.items);
+        fireSelected(state.selected, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
         return _objectSpread({}, state);
       }
       if (action.type === "select") {
-        if (state.selected) {
-          updateSelection(state.itemMap, state.selected);
-        }
-        state.selected = updateSelection(state.itemMap, action.id, true);
+        state.selected = action.id;
+        updateSelection({
+          nodes: state.itemMap,
+          multiple: multiple,
+          selected: action.id
+        });
         state.tree = flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -234,12 +249,6 @@ var useTree = function useTree(_ref) {
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
-  useEffect(function () {
-    componentEvents.current = {
-      onSelect: onSelect,
-      onChecked: onChecked
-    };
-  }, [onSelect, onChecked]);
   useEffect(function () {
     var _intialExpand$current3;
     dispatch({
@@ -284,9 +293,11 @@ var useTree = function useTree(_ref) {
     });
   }, []);
   var select = useCallback(function (id) {
+    var shiftKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     dispatch({
       type: "toggleSelect",
-      id: id
+      id: id,
+      shiftKey: shiftKey
     });
   }, []);
   var expand = useCallback(function (id) {

package/dist/esm/tree/utils.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { isString, matchString, compareValues } from '@react-fabric/utilities';
+import { isArray, isString, matchString, compareValues } from '@react-fabric/utilities';
 
 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; }
@@ -95,26 +95,37 @@ var flattenTree = function flattenTree(nodes) {
   });
   return list;
 };
-var updateSelection = function updateSelection(nodes, id, selected) {
+var selectNode = function selectNode(nodes, id) {
   var node = nodes.get(id !== null && id !== void 0 ? id : "");
   if (node) {
     // change selection
-    node.selected = selected;
+    node.selected = true;
     // update all parent childSelected flag
     var parent = node.parent;
     while (parent) {
       var parentNode = nodes.get(parent);
-      parentNode && (parentNode.childSelected = selected);
+      parentNode && (parentNode.childSelected = true);
       // selected && parentNode && (parentNode.open = true);
       parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
     }
-    return id;
   }
 };
+var updateSelection = function updateSelection(_ref2) {
+  var nodes = _ref2.nodes,
+    multiple = _ref2.multiple,
+    selected = _ref2.selected;
+  nodes.forEach(function (node) {
+    node.selected = undefined;
+    node.childSelected = undefined;
+  });
+  multiple && isArray(selected) ? selected === null || selected === void 0 ? void 0 : selected.forEach(function (id) {
+    return selectNode(nodes, id);
+  }) : selectNode(nodes, selected);
+};
 var updateChecked = function updateChecked(list, id, checked) {
   var node = list.get(id);
   if (node) {
-    node.checked = checked === undefined ? node.checked === 0 ? 1 : 0 : checked;
+    node.checked = (checked !== null && checked !== void 0 ? checked : node.checked === 0) ? 1 : 0;
     // check all children
     node.children && getChildren(node.children).forEach(function (child) {
       return child.checked = node.checked;

package/dist/esm/virtual/Gallery.js

@@ -208,7 +208,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               "data-index": index,
               ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
-                var _itemList;
+                var _itemList, _itemList2;
                 return /*#__PURE__*/jsx("div", {
                   "data-index": index * columnCount + col,
                   className: classNames("grid rounded-capped"),
@@ -216,7 +216,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
                     minWidth: width,
                     minHeight: height
                   },
-                  children: (_itemList = itemList[index * columnCount + col]) !== null && _itemList !== void 0 && _itemList.item ? children(itemList[index * columnCount + col]) : /*#__PURE__*/jsx(Skeleton, {
+                  children: (_itemList = itemList[index * columnCount + col]) !== null && _itemList !== void 0 && _itemList.item ? children(itemList[index * columnCount + col]) : ((_itemList2 = itemList[index * columnCount + col]) === null || _itemList2 === void 0 ? void 0 : _itemList2.item) === null && /*#__PURE__*/jsx(Skeleton, {
                     className: "p-2"
                   })
                 }, "".concat(key, ":").concat(col));

package/dist/esm/virtual/List.js

@@ -193,7 +193,7 @@ var _VirtualList = function _VirtualList(_ref) {
               display: "inline-block"
             }
           }), virtualItems.map(function (_ref3) {
-            var _itemList$index;
+            var _itemList$index, _itemList$index2;
             var key = _ref3.key,
               index = _ref3.index;
             return /*#__PURE__*/jsx("div", {
@@ -204,7 +204,7 @@ var _VirtualList = function _VirtualList(_ref) {
                 minWidth: width,
                 minHeight: height
               },
-              children: (_itemList$index = itemList[index]) !== null && _itemList$index !== void 0 && _itemList$index.item ? children(itemList[index]) : /*#__PURE__*/jsx(Skeleton, {
+              children: (_itemList$index = itemList[index]) !== null && _itemList$index !== void 0 && _itemList$index.item ? children(itemList[index]) : ((_itemList$index2 = itemList[index]) === null || _itemList$index2 === void 0 ? void 0 : _itemList$index2.item) === null && /*#__PURE__*/jsx(Skeleton, {
                 className: "p-2"
               })
             }, key);

package/dist/types/table/types.d.ts

@@ -1,4 +1,4 @@
-import { IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
 import { type CssProp, type Elements, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
 export declare const COL_MIN_WIDTH = "3rem";

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

@@ -40,4 +40,4 @@ import { type TreePanelProps } from "./types";
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-treepanel--docs}
  */
-export declare const TreePanel: <T extends KeyValue>({ ref, items, selected, checked, checkable, noLines, 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;
+export declare const TreePanel: <T extends KeyValue>({ 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, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
 import { type BadgeType, type ChildProp, type CssProp, type Elements, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 interface TreeBaseNode<T> extends CssProp, TestProps {
     id: string;
@@ -74,7 +74,7 @@ export interface TreeNodeProps extends ChildProp {
     leafClassName?: string;
     nodeClassName?: string;
     onToggle: (id: string) => void;
-    onSelect: (id: string) => void;
+    onSelect: (id: string, shiftKey?: boolean) => void;
     onChecked: (id: string) => void;
     onClick?: (id: string, node: any) => void;
 }
@@ -83,7 +83,34 @@ export interface TreeRef {
     open: (id: string) => void;
     openAndLoad: (list: string[]) => void;
 }
-export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps, RefProp<TreeRef> {
+export type TreePanelProps<T extends KeyValue = KeyValue> = BaseTreePanelProps<T> & ({
+    /**
+     * enable multi select
+     */
+    multiple?: never | false;
+    /**
+     * selected item id
+     */
+    selected?: string;
+    /**
+     * callback on selection of tree node
+     */
+    onSelect?: (id: string, data: T) => void;
+} | {
+    /**
+     * enable multi select
+     */
+    multiple: true;
+    /**
+     * selected item id
+     */
+    selected?: string[];
+    /**
+     * callback on selection of tree node
+     */
+    onSelect?: (id: string[], data: T) => void;
+});
+interface BaseTreePanelProps<T extends KeyValue = KeyValue> extends TestProps, RefProp<TreeRef> {
     items?: Array<TreeNodeType<T>>;
     /**
      * make tree searchable
@@ -98,13 +125,13 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      */
     selectable?: true | "leafOnly";
     /**
-     * enable checkable
+     * enable multi select
      */
-    checkable?: true | "leafOnly";
+    multiple?: boolean;
     /**
-     * selected item id
+     * enable checkable
      */
-    selected?: string;
+    checkable?: true | "leafOnly";
     /**
      * checked items
      */
@@ -137,10 +164,6 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      * callback on click of tree node
      */
     onClick?: (id: string, data: T) => void;
-    /**
-     * callback on selection of tree node
-     */
-    onSelect?: (id: string, data: T) => boolean | undefined;
     /**
      * callback on change of checked list
      * @param leafs - list of checked leaf nodes

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

@@ -1,14 +1,17 @@
 import { type InternalNode, type TreePanelProps } from "./types";
-export declare const useTree: <T extends KeyValue>({ items, checked, selected, sorter, matcher, onLoad, onQuery, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>>) => {
+export declare const useTree: <T extends KeyValue>({ items, checked, selected, multiple, sorter, matcher, onLoad, onQuery, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>> & {
+    selected?: AnyObject;
+    multiple?: boolean;
+}) => {
     tree: InternalNode[];
     query: string | undefined;
-    selected: string | undefined;
+    selected: any;
     toggleExpand: (id: string) => void;
     expandAll: () => void;
     collapseAll: () => void;
     toggleCheck: (id: string) => void;
     expandAndLoad: (expandList: string[]) => void;
-    select: (id: string) => void;
+    select: (id: string, shiftKey?: boolean) => void;
     expand: (id: string) => void;
     onFilter: {
         (...args: AnyObject): void;

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

@@ -8,6 +8,10 @@ export declare const refactorTree: (nodes: TreeNodeType[], { sorter, defaultExpa
 }) => InternalNode[];
 export declare const makeTreeMap: (nodes: InternalNode[], map?: Map<any, any>) => Map<any, any>;
 export declare const flattenTree: (nodes: InternalNode[], lines?: Array<0 | 1 | 2 | 3>) => InternalNode[];
-export declare const updateSelection: (nodes: Map<string, InternalNode>, id?: string, selected?: true) => string | undefined;
+export declare const updateSelection: ({ nodes, multiple, selected, }: {
+    nodes: Map<string, InternalNode>;
+    multiple?: boolean;
+    selected?: string | string[];
+}) => void;
 export declare const updateChecked: (list: Map<string, AnyObject>, id: string, checked?: 0 | 1 | 2) => void;
 export declare const filterTree: (nodes: Map<string, InternalNode>, query?: string, matcher?: AnyObject) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.59",
+  "version": "1.0.0-beta.60",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.59",
-    "@react-fabric/date": "^1.0.0-beta.59",
-    "@react-fabric/form": "^1.0.0-beta.59",
-    "@react-fabric/utilities": "^1.0.0-beta.59",
+    "@react-fabric/core": "^1.0.0-beta.60",
+    "@react-fabric/date": "^1.0.0-beta.60",
+    "@react-fabric/form": "^1.0.0-beta.60",
+    "@react-fabric/utilities": "^1.0.0-beta.60",
     "@tanstack/react-virtual": "~3.13.12",
     "classnames": "~2.5.1",
     "color": "~5.0.2",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "74efd06c9c5ac629b6ef5cdc6d53ecb1c356f2eb"
+  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
 }

package/src/histogram/Histogram.tsx

@@ -163,7 +163,7 @@ export const Histogram = ({
         >
           <div
             className={classNames(
-              "absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l",
+              "absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-linear-to-r rtl:bg-linear-to-l",
               "fabric-histoBar",
             )}
             style={{

package/src/table/BodyRow.tsx

@@ -74,7 +74,7 @@ export const BodyRow = ({
         role="none"
         data-row={index}
         className={classNames(
-          "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500 group/table-row",
+          "flex flex-nowrap datatable-row data-hilight:outline-1 -outline-offset-1 outline-primary-500 group/table-row",
           onRowClick && "hover:bg-primary-50 active:bg-primary-100",
           index % 2 ? "bg-even" : "bg-odd",
         )}

package/src/table/types.ts

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
 import {
   type CssProp,
   type Elements,

package/src/tree/TreeNode.tsx

@@ -63,7 +63,7 @@ export const TreeNode = ({
           "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]",
+            "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",
         )}
       >
@@ -147,7 +147,7 @@ export const TreeNode = ({
         <div
           role="none"
           className={classNames(
-            "group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
+            "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,
@@ -160,10 +160,10 @@ export const TreeNode = ({
           onClick={
             node.disabled
               ? undefined
-              : () => {
+              : (e) => {
                   onClick?.(node.id, node.data);
                   canSelect
-                    ? onSelect(node.id)
+                    ? onSelect(node.id, e.shiftKey)
                     : canCheck
                       ? onChecked(node.id)
                       : onToggle(node.id);

package/src/tree/TreePanel.tsx

@@ -88,6 +88,7 @@ export const TreePanel = <T extends KeyValue>({
   noLines,
   searchable,
   selectable,
+  multiple,
   matcher,
   filterPlaceholder,
   defaultLeafIcon,
@@ -123,6 +124,7 @@ export const TreePanel = <T extends KeyValue>({
     items,
     checked,
     selected,
+    multiple,
     matcher,
     sorter,
     onLoad,
@@ -131,7 +133,7 @@ export const TreePanel = <T extends KeyValue>({
     onChecked,
     defaultExpanded,
     onExpandToggle,
-  });
+  } as any);
 
   const scrollerRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({

package/src/tree/types.ts

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
 import {
   type BadgeType,
   type ChildProp,
@@ -109,7 +109,7 @@ export interface TreeNodeProps extends ChildProp {
   leafClassName?: string;
   nodeClassName?: string;
   onToggle: (id: string) => void;
-  onSelect: (id: string) => void;
+  onSelect: (id: string, shiftKey?: boolean) => void;
   onChecked: (id: string) => void;
   onClick?: (id: string, node: any) => void;
 }
@@ -120,7 +120,40 @@ export interface TreeRef {
   openAndLoad: (list: string[]) => void;
 }
 
-export interface TreePanelProps<T extends KeyValue = KeyValue>
+export type TreePanelProps<T extends KeyValue = KeyValue> =
+  BaseTreePanelProps<T> &
+    (
+      | {
+          /**
+           * enable multi select
+           */
+          multiple?: never | false;
+          /**
+           * selected item id
+           */
+          selected?: string;
+          /**
+           * callback on selection of tree node
+           */
+          onSelect?: (id: string, data: T) => void;
+        }
+      | {
+          /**
+           * enable multi select
+           */
+          multiple: true;
+          /**
+           * selected item id
+           */
+          selected?: string[];
+          /**
+           * callback on selection of tree node
+           */
+          onSelect?: (id: string[], data: T) => void;
+        }
+    );
+
+interface BaseTreePanelProps<T extends KeyValue = KeyValue>
   extends TestProps,
     RefProp<TreeRef> {
   items?: Array<TreeNodeType<T>>;
@@ -137,13 +170,13 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
    */
   selectable?: true | "leafOnly";
   /**
-   * enable checkable
+   * enable multi select
    */
-  checkable?: true | "leafOnly";
+  multiple?: boolean;
   /**
-   * selected item id
+   * enable checkable
    */
-  selected?: string;
+  checkable?: true | "leafOnly";
   /**
    * checked items
    */
@@ -181,10 +214,6 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
    * callback on click of tree node
    */
   onClick?: (id: string, data: T) => void;
-  /**
-   * callback on selection of tree node
-   */
-  onSelect?: (id: string, data: T) => boolean | undefined;
   /**
    * callback on change of checked list
    * @param leafs - list of checked leaf nodes

package/src/tree/useTree.ts

@@ -24,7 +24,13 @@
 import { useDebounce } from "@react-fabric/core";
 import { EMPTY_ARRAY, isEmpty } from "@react-fabric/utilities";
 import memoizeOne from "memoize-one";
-import { useCallback, useEffect, useReducer, useRef } from "react";
+import {
+  useCallback,
+  useEffect,
+  useReducer,
+  useRef,
+  useEffectEvent,
+} from "react";
 import {
   type InternalNode,
   type TreeNodeType,
@@ -59,7 +65,7 @@ type TreeActions =
   /**
    * toggle item select, used as action handler
    */
-  | { type: "toggleSelect"; id: string }
+  | { type: "toggleSelect"; id: string; shiftKey?: boolean }
   /**
    * toggle item check, used as action handler
    */
@@ -90,7 +96,7 @@ interface TreeState {
   itemMap: Map<string, InternalNode>;
   tree: InternalNode[];
   query?: string;
-  selected?: string;
+  selected?: AnyObject;
   checked?: string[];
 }
 
@@ -100,6 +106,7 @@ export const useTree = <T extends KeyValue>({
   items = EMPTY_ARRAY,
   checked = EMPTY_ARRAY,
   selected,
+  multiple,
   sorter,
   matcher,
   onLoad,
@@ -108,8 +115,12 @@ export const useTree = <T extends KeyValue>({
   onChecked,
   defaultExpanded,
   onExpandToggle,
-}: Partial<TreePanelProps<T>>) => {
-  const componentEvents = useRef({ onSelect, onChecked });
+}: Partial<TreePanelProps<T>> & {
+  selected?: AnyObject;
+  multiple?: boolean;
+}) => {
+  const eventSelect = useEffectEvent(onSelect ?? (() => undefined));
+  const eventChecked = useEffectEvent(onChecked ?? (() => undefined));
   const intialExpand = useRef([...(defaultExpanded ?? EMPTY_ARRAY)]);
   const itemList = createItemList(items);
 
@@ -159,18 +170,15 @@ export const useTree = <T extends KeyValue>({
     [onLoad],
   );
 
-  const fireSelected = useDebounce(
-    (nodeId: string, data: T) => {
-      componentEvents.current.onSelect?.(nodeId, data);
-    },
-    [onSelect],
-  );
+  const fireSelected = useDebounce((nodeId: any, data: T) => {
+    eventSelect(nodeId, data);
+  }, []);
 
   const fireChecked = useDebounce(
     (leafs: string[], nodes: string[], partials: string[]) => {
-      componentEvents.current.onChecked?.(leafs, nodes, partials);
+      eventChecked(leafs, nodes, partials);
     },
-    [onChecked],
+    [],
   );
 
   const fireQuery = useDebounce(
@@ -203,7 +211,12 @@ export const useTree = <T extends KeyValue>({
         state.itemMap = makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
-        state.selected = updateSelection(state.itemMap, selected, true);
+        state.selected = selected;
+        updateSelection({
+          nodes: state.itemMap,
+          multiple,
+          selected,
+        });
         state.checked?.forEach((id) => updateChecked(state.itemMap, id, 1));
         return { ...state };
       }
@@ -256,22 +269,33 @@ export const useTree = <T extends KeyValue>({
         return { ...state, query: action.query };
       }
       if (action.type === "toggleSelect") {
-        if (!onSelect) {
-          if (state.selected) {
-            updateSelection(state.itemMap, state.selected);
-          }
-          state.selected = updateSelection(state.itemMap, action.id, true);
-          state.tree = flattenTree(state.items);
+        if (multiple) {
+          const isSelected = state.selected?.includes(action.id);
+          if (action.shiftKey && isSelected)
+            state.selected =
+              state.selected?.filter((id: string) => id !== action.id) ?? [];
+          else if (action.shiftKey && !isSelected)
+            state.selected = [...(state.selected ?? []), action.id];
+          else state.selected = [action.id];
         } else {
-          fireSelected(action.id, state.itemMap.get(action.id)?.data);
+          state.selected = action.id;
         }
+        updateSelection({
+          nodes: state.itemMap,
+          selected: state.selected,
+          multiple,
+        });
+        state.tree = flattenTree(state.items);
+        fireSelected(state.selected, state.itemMap.get(action.id)?.data);
         return { ...state };
       }
       if (action.type === "select") {
-        if (state.selected) {
-          updateSelection(state.itemMap, state.selected);
-        }
-        state.selected = updateSelection(state.itemMap, action.id, true);
+        state.selected = action.id;
+        updateSelection({
+          nodes: state.itemMap,
+          multiple,
+          selected: action.id,
+        });
         state.tree = flattenTree(state.items);
         return { ...state };
       }
@@ -306,10 +330,6 @@ export const useTree = <T extends KeyValue>({
     },
   );
 
-  useEffect(() => {
-    componentEvents.current = { onSelect, onChecked };
-  }, [onSelect, onChecked]);
-
   useEffect(() => {
     dispatch({ type: "load", items: itemList });
     itemList.length &&
@@ -338,8 +358,8 @@ export const useTree = <T extends KeyValue>({
     dispatch({ type: "toggleCheck", id });
   }, []);
 
-  const select = useCallback((id: string) => {
-    dispatch({ type: "toggleSelect", id });
+  const select = useCallback((id: string, shiftKey = false) => {
+    dispatch({ type: "toggleSelect", id, shiftKey });
   }, []);
 
   const expand = useCallback((id: string) => {
@@ -349,7 +369,10 @@ export const useTree = <T extends KeyValue>({
   const expandAndLoad = useCallback((expandList: string[]) => {
     if (expandList.length > 0) {
       intialExpand.current = [...expandList];
-      dispatch({ type: "expand", id: intialExpand.current.shift() as string });
+      dispatch({
+        type: "expand",
+        id: intialExpand.current.shift() as unknown as string,
+      });
     }
   }, []);
 

package/src/tree/utils.ts

@@ -21,7 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { compareValues, isString, matchString } from "@react-fabric/utilities";
+import {
+  compareValues,
+  isArray,
+  isString,
+  matchString,
+} from "@react-fabric/utilities";
 import { type InternalNode, type TreeNodeType } from "./types";
 
 const defaultSorter = (a: TreeNodeType, b: TreeNodeType) => {
@@ -125,27 +130,40 @@ export const flattenTree = (
   return list;
 };
 
-export const updateSelection = (
-  nodes: Map<string, InternalNode>,
-  id?: string,
-  selected?: true,
-) => {
+const selectNode = (nodes: Map<string, InternalNode>, id?: string) => {
   const node = nodes.get(id ?? "");
   if (node) {
     // change selection
-    node.selected = selected;
+    node.selected = true;
     // update all parent childSelected flag
     let parent = node.parent;
     while (parent) {
       const parentNode = nodes.get(parent);
-      parentNode && (parentNode.childSelected = selected);
+      parentNode && (parentNode.childSelected = true);
       // selected && parentNode && (parentNode.open = true);
       parent = parentNode?.parent;
     }
-    return id;
   }
 };
 
+export const updateSelection = ({
+  nodes,
+  multiple,
+  selected,
+}: {
+  nodes: Map<string, InternalNode>;
+  multiple?: boolean;
+  selected?: string | string[];
+}) => {
+  nodes.forEach((node) => {
+    node.selected = undefined;
+    node.childSelected = undefined;
+  });
+  multiple && isArray(selected)
+    ? selected?.forEach((id) => selectNode(nodes, id))
+    : selectNode(nodes, selected as string);
+};
+
 export const updateChecked = (
   list: Map<string, AnyObject>,
   id: string,
@@ -153,8 +171,7 @@ export const updateChecked = (
 ) => {
   const node = list.get(id);
   if (node) {
-    node.checked =
-      checked === undefined ? (node.checked === 0 ? 1 : 0) : checked;
+    node.checked = checked ?? node.checked === 0 ? 1 : 0;
     // check all children
     node.children &&
       getChildren(node.children).forEach(

package/src/virtual/Gallery.tsx

@@ -337,11 +337,13 @@ const _VirtualGallery = <T extends AnyObject>({
                       minHeight: height,
                     }}
                   >
-                    {itemList[index * columnCount + col]?.item ? (
-                      children(itemList[index * columnCount + col] as AnyObject)
-                    ) : (
-                      <Skeleton className="p-2" />
-                    )}
+                    {itemList[index * columnCount + col]?.item
+                      ? children(
+                          itemList[index * columnCount + col] as AnyObject,
+                        )
+                      : itemList[index * columnCount + col]?.item === null && (
+                          <Skeleton className="p-2" />
+                        )}
                   </div>
                 ))}
               </div>

package/src/virtual/List.tsx

@@ -322,11 +322,11 @@ const _VirtualList = <T extends AnyObject>({
                   minHeight: height,
                 }}
               >
-                {itemList[index]?.item ? (
-                  children(itemList[index] as AnyObject)
-                ) : (
-                  <Skeleton className="p-2" />
-                )}
+                {itemList[index]?.item
+                  ? children(itemList[index] as AnyObject)
+                  : itemList[index]?.item === null && (
+                      <Skeleton className="p-2" />
+                    )}
               </div>
             ))}
           </div>