@react-fabric/data 1.0.0-beta.53 → 1.0.0-beta.55

package/dist/cjs/hooks/useFilteredList.js

@@ -6,15 +6,29 @@ var react = require('react');
 
 var filterList = function filterList(items) {
   var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  var matcher = arguments.length > 2 ? arguments[2] : undefined;
+  var matchAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var matcher = arguments.length > 3 ? arguments[3] : undefined;
   var newList = [];
   items.forEach(function (item) {
     if (matcher) {
       return (matcher === null || matcher === void 0 ? void 0 : matcher(item, query)) && newList.push(item);
     }
-    if (query && utilities.isString(query)) {
-      var _item$label;
-      if (utilities.matchString((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.toString(), query)) {
+    if (query && utilities.isArray(query) && query.length > 0) {
+      if (matchAll && query.every(function (q) {
+        var _item$label;
+        return utilities.matchString((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.toString(), q);
+      })) {
+        return newList.push(item);
+      }
+      if (!matchAll && query.some(function (q) {
+        var _item$label2;
+        return utilities.matchString((_item$label2 = item.label) !== null && _item$label2 !== void 0 ? _item$label2 : item.toString(), q);
+      })) {
+        return newList.push(item);
+      }
+    } else if (query && utilities.isString(query)) {
+      var _item$label3;
+      if (utilities.matchString((_item$label3 = item.label) !== null && _item$label3 !== void 0 ? _item$label3 : item.toString(), query)) {
         return newList.push(item);
       }
     } else {
@@ -24,6 +38,26 @@ var filterList = function filterList(items) {
   return newList;
 };
 
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+
 /**
  * Custom hook to filter a list of items based on a query.
  * It provides a way to search through the items and returns the filtered list.
@@ -43,7 +77,29 @@ var filterList = function filterList(items) {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
  */
-var useFilteredList = function useFilteredList(items, matcher) {
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+
+function useFilteredList(items, matchAll, matcher) {
   var _useState = react.useState(),
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
@@ -57,20 +113,22 @@ var useFilteredList = function useFilteredList(items, matcher) {
     _useTransition2 = _slicedToArray(_useTransition, 2),
     isSearching = _useTransition2[0],
     startTransition = _useTransition2[1];
-  var filterItems = react.useCallback(function (items, query) {
+  var matchingAll = typeof matchAll === "boolean" ? matchAll : true;
+  var matcherFn = typeof matchAll === "function" ? matchAll : matcher;
+  var filterItems = react.useCallback(function (items, query, matchingAll) {
     return startTransition(function () {
-      return setFilteredList(filterList(items, query, matcher));
+      return setFilteredList(filterList(items, query, matchingAll, matcherFn));
     });
   }, []);
   react.useEffect(function () {
-    if (query) filterItems(_items, query);else setFilteredList(items);
-  }, [query, _items]);
+    if (query) filterItems(_items, query, matchingAll);else setFilteredList(items);
+  }, [query, matchingAll, _items]);
   return {
     onSearch: setQuery,
     query: query,
     filteredList: filteredList,
     isSearching: isSearching
   };
-};
+}
 
 exports.useFilteredList = useFilteredList;

package/dist/cjs/table/HeaderCell.js

@@ -11,6 +11,7 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
+    field = _ref.field,
     dataType = _ref.dataType,
     label = _ref.label,
     icon = _ref.icon,
@@ -56,7 +57,7 @@ var HeaderCell = function HeaderCell(_ref) {
           list: filterOptions,
           filter: filter,
           onFilter: function onFilter(value) {
-            return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id, value);
+            return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(field !== null && field !== void 0 ? field : id, value);
           }
         })
       }, "filters"));
@@ -87,7 +88,7 @@ var HeaderCell = function HeaderCell(_ref) {
         list: filterOptions,
         filter: filter,
         onFilter: function onFilter(value) {
-          return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id, value);
+          return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(field !== null && field !== void 0 ? field : id, value);
         }
       }, "filters")];
     }

package/dist/cjs/table/Table.js

@@ -40,7 +40,10 @@ var Table = function Table(_ref) {
     onFilter = _ref.onFilter,
     onScroll = _ref.onScroll,
     onRowClick = _ref.onRowClick,
-    onCheckedChanged = _ref.onCheckedChanged;
+    onCheckedChanged = _ref.onCheckedChanged,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
+    onLoadMore = _ref.onLoadMore;
   var _useTranslation = reactI18next.useTranslation("data"),
     t = _useTranslation.t;
   var fireCheckChanged = core.useDebounce(function (checkedIds) {
@@ -53,6 +56,9 @@ var Table = function Table(_ref) {
       checked: checked,
       keyProperty: keyProperty,
       groupProperty: groupProperty,
+      total: total,
+      loading: loading,
+      onLoadMore: onLoadMore,
       onCheckChanged: fireCheckChanged
     }),
     scrollerRef = _useVirtualTable.scrollerRef,
@@ -126,7 +132,7 @@ var Table = function Table(_ref) {
       ref: scrollerRef,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         "data-ref": "tableHeader",
-        className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-2",
+        className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-3",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: wrapperStart,
           children: [canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -180,7 +186,7 @@ var Table = function Table(_ref) {
           return "__GROUP__" in data ? /*#__PURE__*/jsxRuntime.jsxs("div", {
             ref: measureElement,
             "data-index": index,
-            className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-1", isActiveSticky(index) && "sticky top-8"),
+            className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-2", isActiveSticky(index) && "sticky top-8"),
             role: "none",
             onClick: function onClick() {
               return toggleGroupExpand(data.key);

package/dist/cjs/table/useVirtualTable.js

@@ -137,6 +137,24 @@ var useVirtualTable = function useVirtualTable(data, options) {
       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,

package/dist/cjs/tree/TreeNode.js

@@ -63,7 +63,7 @@ var TreeNode = function TreeNode(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "treeitem",
     "aria-selected": node.selected,
-    className: classNames("flex flex-nowrap items-center", node.className, node.leaf ? leafClassName : nodeClassName),
+    className: classNames("flex flex-nowrap items-center"),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
     children: [filler, node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -93,7 +93,7 @@ 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.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 === null || onClick === void 0 || onClick(node.id, node.data);

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", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
+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"];
 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,7 +22,6 @@ var TreePanel = function TreePanel(_ref) {
     checked = _ref.checked,
     checkable = _ref.checkable,
     noLines = _ref.noLines,
-    renderer = _ref.renderer,
     searchable = _ref.searchable,
     selectable = _ref.selectable,
     matcher = _ref.matcher,
@@ -58,6 +57,7 @@ var TreePanel = function TreePanel(_ref) {
       onExpandToggle: onExpandToggle
     }),
     tree = _useTree.tree,
+    query = _useTree.query,
     toggleExpand = _useTree.toggleExpand,
     toggleCheck = _useTree.toggleCheck,
     expandAll = _useTree.expandAll,
@@ -97,6 +97,7 @@ var TreePanel = function TreePanel(_ref) {
       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,
@@ -134,7 +135,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, _ref4;
+          var _makeIcon, _ref3;
           var index = _ref2.index,
             key = _ref2.key;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -154,7 +155,7 @@ var TreePanel = function TreePanel(_ref) {
               onClick: onClick,
               leafClassName: leafClassName,
               nodeClassName: nodeClassName,
-              children: (_ref3 = (_ref4 = tree[index].data && (renderer === null || renderer === void 0 ? void 0 : renderer(tree[index].data))) !== null && _ref4 !== void 0 ? _ref4 : makeLabel === null || makeLabel === void 0 ? void 0 : makeLabel(tree[index].data)) !== null && _ref3 !== void 0 ? _ref3 : tree[index].label
+              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);
         })]

package/dist/cjs/tree/useTree.js

@@ -78,6 +78,14 @@ 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]);
+  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]);
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "load") {
         state.items = utils.refactorTree(action.items, {
@@ -86,6 +94,9 @@ var useTree = function useTree(_ref) {
         });
         state.itemMap = utils.makeTreeMap(state.items);
         state.tree = utils.flattenTree(state.items);
+        state.selected = undefined;
+        state.checked = undefined;
+        state.query = "";
         return _objectSpread({}, state);
       }
       if (action.type === "toggleExpand") {
@@ -97,10 +108,14 @@ var useTree = function useTree(_ref) {
         }
       }
       if (action.type === "loaded") {
+        var _state$checked;
         state.itemMap = utils.makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
         state.selected && utils.updateSelection(state.itemMap, state.selected, true);
+        (_state$checked = state.checked) === null || _state$checked === void 0 || _state$checked.forEach(function (id) {
+          return utils.updateChecked(state.itemMap, id, 1);
+        });
         return _objectSpread({}, state);
       }
       if (action.type === "expand") {
@@ -141,36 +156,58 @@ var useTree = function useTree(_ref) {
         } else {
           utils.filterTree(state.itemMap, action.query, matcher);
           state.tree = utils.flattenTree(state.items);
-          return _objectSpread({}, state);
         }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          query: action.query
+        });
+      }
+      if (action.type === "toggleSelect") {
+        if (state.selected) {
+          utils.updateSelection(state.itemMap, state.selected);
+        }
+        if (!onSelect) {
+          utils.updateSelection(state.itemMap, action.id, true);
+          state.selected = action.id;
+          state.tree = utils.flattenTree(state.items);
+        } 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);
+        }
+        return _objectSpread({}, state);
       }
       if (action.type === "select") {
-        var _componentEvents$curr, _componentEvents$curr2, _state$itemMap$get;
         if (state.selected) {
           utils.updateSelection(state.itemMap, state.selected);
         }
         utils.updateSelection(state.itemMap, action.id, true);
+        state.selected = action.id;
         state.tree = utils.flattenTree(state.items);
-        (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, action.id, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
-        return _objectSpread(_objectSpread({}, state), {}, {
-          selected: action.id
-        });
+        return _objectSpread({}, state);
       }
       if (action.type === "toggleCheck") {
-        var _componentEvents$curr3, _componentEvents$curr4;
         utils.updateChecked(state.itemMap, action.id);
-        var checkList = [[], []];
+        var checkList = [[], [], []];
         Array.from(state.itemMap.values()).filter(function (node) {
-          return node.checked === 1;
+          return node.checked !== 0;
         }).forEach(function (node) {
-          return checkList[node.leaf ? 0 : 1].push(node.id);
+          return checkList[node.leaf ? 0 : node.checked].push(node.id);
+        });
+        fireChecked(checkList[0],
+        // leafs
+        checkList[1],
+        // nodes
+        checkList[2] // partials
+        );
+        return _objectSpread(_objectSpread({}, state), {}, {
+          checked: checkList[0]
         });
-        (_componentEvents$curr3 = (_componentEvents$curr4 = componentEvents.current).onChecked) === null || _componentEvents$curr3 === void 0 || _componentEvents$curr3.call(_componentEvents$curr4, checkList[0], checkList[1]);
-        return _objectSpread({}, state);
       }
       if (action.type === "checked") {
+        state.itemMap.forEach(function (item) {
+          return item.checked = 0;
+        });
         action.id.forEach(function (id) {
-          return utils.updateChecked(state.itemMap, id);
+          return utils.updateChecked(state.itemMap, id, 1);
         });
         return _objectSpread(_objectSpread({}, state), {}, {
           checked: action.id
@@ -181,7 +218,8 @@ var useTree = function useTree(_ref) {
       itemMap: new Map(),
       items: [],
       tree: [],
-      checked: []
+      checked: [],
+      query: ""
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -202,6 +240,14 @@ var useTree = function useTree(_ref) {
       type: "expand",
       id: intialExpand.current.shift()
     });
+    selected && dispatch({
+      type: "select",
+      id: selected
+    });
+    checked && dispatch({
+      type: "checked",
+      id: checked
+    });
   }, [itemList]);
   react.useEffect(function () {
     selected && dispatch({
@@ -229,7 +275,7 @@ var useTree = function useTree(_ref) {
   }, []);
   var select = react.useCallback(function (id) {
     dispatch({
-      type: "select",
+      type: "toggleSelect",
       id: id
     });
   }, []);
@@ -257,6 +303,7 @@ var useTree = function useTree(_ref) {
   }, [], 300);
   return {
     tree: state.tree,
+    query: state.query,
     toggleExpand: toggleExpand,
     expandAll: expandAll,
     collapseAll: collapseAll,

package/dist/cjs/tree/utils.js

@@ -105,15 +105,15 @@ var updateSelection = function updateSelection(nodes, id, selected) {
     while (parent) {
       var parentNode = nodes.get(parent);
       parentNode && (parentNode.childSelected = selected);
-      selected && parentNode && (parentNode.open = true);
+      // selected && parentNode && (parentNode.open = true);
       parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
     }
   }
 };
-var updateChecked = function updateChecked(list, id) {
+var updateChecked = function updateChecked(list, id, checked) {
   var node = list.get(id);
   if (node) {
-    node.checked = node.checked === 1 ? 0 : 1;
+    node.checked = checked === undefined ? node.checked === 0 ? 1 : 0 : checked;
     // check all children
     node.children && getChildren(node.children).forEach(function (child) {
       return child.checked = node.checked;

package/dist/cjs/virtual/Gallery.js

@@ -92,8 +92,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = react.useRef(0);
   react.useEffect(function () {
-    var _virtualItems$1$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
+    var _virtualItems$2$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = react.useCallback(function () {

package/dist/cjs/virtual/List.js

@@ -68,8 +68,8 @@ var _VirtualList = function _VirtualList(_ref) {
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = react.useRef(0);
   react.useEffect(function () {
-    var _virtualItems$1$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
+    var _virtualItems$2$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = react.useCallback(function () {

package/dist/esm/hooks/useFilteredList.js

@@ -1,20 +1,34 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { isString, matchString } from '@react-fabric/utilities';
+import { isArray, matchString, isString } from '@react-fabric/utilities';
 import { useState, useDeferredValue, useTransition, useCallback, useEffect } from 'react';
 
 var filterList = function filterList(items) {
   var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  var matcher = arguments.length > 2 ? arguments[2] : undefined;
+  var matchAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var matcher = arguments.length > 3 ? arguments[3] : undefined;
   var newList = [];
   items.forEach(function (item) {
     if (matcher) {
       return (matcher === null || matcher === void 0 ? void 0 : matcher(item, query)) && newList.push(item);
     }
-    if (query && isString(query)) {
-      var _item$label;
-      if (matchString((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.toString(), query)) {
+    if (query && isArray(query) && query.length > 0) {
+      if (matchAll && query.every(function (q) {
+        var _item$label;
+        return matchString((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.toString(), q);
+      })) {
+        return newList.push(item);
+      }
+      if (!matchAll && query.some(function (q) {
+        var _item$label2;
+        return matchString((_item$label2 = item.label) !== null && _item$label2 !== void 0 ? _item$label2 : item.toString(), q);
+      })) {
+        return newList.push(item);
+      }
+    } else if (query && isString(query)) {
+      var _item$label3;
+      if (matchString((_item$label3 = item.label) !== null && _item$label3 !== void 0 ? _item$label3 : item.toString(), query)) {
         return newList.push(item);
       }
     } else {
@@ -24,6 +38,26 @@ var filterList = function filterList(items) {
   return newList;
 };
 
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+
 /**
  * Custom hook to filter a list of items based on a query.
  * It provides a way to search through the items and returns the filtered list.
@@ -43,7 +77,29 @@ var filterList = function filterList(items) {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
  */
-var useFilteredList = function useFilteredList(items, matcher) {
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+
+function useFilteredList(items, matchAll, matcher) {
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
@@ -57,20 +113,22 @@ var useFilteredList = function useFilteredList(items, matcher) {
     _useTransition2 = _slicedToArray(_useTransition, 2),
     isSearching = _useTransition2[0],
     startTransition = _useTransition2[1];
-  var filterItems = useCallback(function (items, query) {
+  var matchingAll = typeof matchAll === "boolean" ? matchAll : true;
+  var matcherFn = typeof matchAll === "function" ? matchAll : matcher;
+  var filterItems = useCallback(function (items, query, matchingAll) {
     return startTransition(function () {
-      return setFilteredList(filterList(items, query, matcher));
+      return setFilteredList(filterList(items, query, matchingAll, matcherFn));
     });
   }, []);
   useEffect(function () {
-    if (query) filterItems(_items, query);else setFilteredList(items);
-  }, [query, _items]);
+    if (query) filterItems(_items, query, matchingAll);else setFilteredList(items);
+  }, [query, matchingAll, _items]);
   return {
     onSearch: setQuery,
     query: query,
     filteredList: filteredList,
     isSearching: isSearching
   };
-};
+}
 
 export { useFilteredList };

package/dist/esm/table/HeaderCell.js

@@ -11,6 +11,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 var HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
+    field = _ref.field,
     dataType = _ref.dataType,
     label = _ref.label,
     icon = _ref.icon,
@@ -56,7 +57,7 @@ var HeaderCell = function HeaderCell(_ref) {
           list: filterOptions,
           filter: filter,
           onFilter: function onFilter(value) {
-            return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id, value);
+            return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(field !== null && field !== void 0 ? field : id, value);
           }
         })
       }, "filters"));
@@ -87,7 +88,7 @@ var HeaderCell = function HeaderCell(_ref) {
         list: filterOptions,
         filter: filter,
         onFilter: function onFilter(value) {
-          return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id, value);
+          return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(field !== null && field !== void 0 ? field : id, value);
         }
       }, "filters")];
     }