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

package/{src/histogram/Histogram.module.css → css/_histogram.css}

@@ -21,14 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .histogram {
-    .histoLabel {
-      --tw-gradient-from: var(--color) var(--tw-gradient-from-position);
-      --tw-gradient-to: color-mix(in lab, var(--color) 20%, var(--fabric-bg))
-        var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-
+@layer components {
+  .fabric-histogram {
+    .fabric-histoLabel {
       background-color: color(from var(--color) srgb r g b / 5%);
 
       &:hover {
@@ -36,21 +31,29 @@
       }
 
       &[data-disabled="true"] {
-        --color: theme(colors.tint.300);
+        --color: var(--color-tint-300);
 
-        color: theme(colors.tint.600);
+        color: var(--color-tint-600);
       }
     }
 
-    .histoBar {
+    .fabric-histoBar {
+      --tw-gradient-stops: var(
+          --tw-gradient-via-stops,
+          var(--tw-gradient-position)
+        ),
+        var(--color) var(--tw-gradient-from-position),
+        color-mix(in lab, var(--color) 20%, var(--fabric-bg))
+          var(--tw-gradient-to-position);
+
       box-shadow: -2px 0 0 var(--color) inset;
 
-      :global([dir="rtl"]) & {
+      @variant rtl {
         box-shadow: 2px 0 0 var(--color) inset;
       }
     }
 
-    .histoBadge {
+    .fabric-histoBadge {
       background-color: color(from var(--color) srgb r g b / 15%);
     }
   }

package/css/styles.css

@@ -0,0 +1,24 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@import "./_histogram.css";

package/dist/cjs/checklist/CheckList.js

@@ -2,77 +2,101 @@
 
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var core = require('@react-fabric/core');
-var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var reactI18next = require('react-i18next');
 var useSelectableList = require('../hooks/useSelectableList.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["id", "allowNegative", "selected", "icon", "label", "isDisabled", "onClick", "badge"],
-  _excluded2 = ["items", "maxCount", "allowNegative", "emptyMessage", "sortItems", "selected", "nonselected", "onChange", "onClick"];
+var _excluded = ["items", "maxCount", "allowNegative", "emptyMessage", "sortItems", "selected", "nonselected", "onChange", "onClick"];
 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 CheckItem = function CheckItem(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function CheckItem(_ref) {
   var id = _ref.id,
     allowNegative = _ref.allowNegative,
     selected = _ref.selected,
     icon = _ref.icon,
     label = _ref.label,
-    isDisabled = _ref.isDisabled,
+    disabled = _ref.disabled,
     _onClick = _ref.onClick,
-    badge = _ref.badge,
-    aria = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    badge = _ref.badge;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "none",
     className: "ax-checkList__item",
-    "data-disabled": isDisabled,
+    "data-disabled": disabled,
     onClick: function onClick() {
       return _onClick(id, false);
     },
     onContextMenu: function onContextMenu(e) {
       return [allowNegative && _onClick(id, true), e.preventDefault()];
-    }
-  }, aria), {}, {
+    },
     children: [!allowNegative && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       "data-type": "checkbox",
       className: "ax-checkList__checkbox",
       "data-selected": selected === 1,
-      icon: selected ? core.CoreIcons.checkboxInt : core.CoreIcons.checkboxOff
+      icon: selected ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]"
     }), allowNegative && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         "data-type": "multiple",
         className: "ax-checkList__checkbox",
-        icon: selected === 1 ? core.CoreIcons.expand : selected === -1 ? core.CoreIcons.collapse : core.CoreIcons.checkboxOff,
+        icon: selected === 1 ? "icon-[mdi--plus-box-outline]" : selected === -1 ? "icon-[mdi--minus-box-outline]" : "icon-[mdi--checkbox-blank-outline]",
         "data-selected": selected
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "ax-checkList__checkbox",
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-          "data-type": "positive",
+        children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          className: "size-fit leading-0 cursor-pointer",
           onClick: function onClick(e) {
             return [(_onClick(id, false), e.stopPropagation())];
           },
-          icon: selected === 1 ? core.CoreIcons.expandActive : core.CoreIcons.expand,
-          "data-selected": selected === 1
-        }), /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-          "data-type": "negative",
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+            "data-type": "positive",
+            icon: selected === 1 ? "icon-[mdi--plus-box]" : "icon-[mdi--plus-box-outline]",
+            "data-selected": selected === 1
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          className: "size-fit leading-0 cursor-pointer",
           onClick: function onClick(e) {
             return [(_onClick(id, true), e.stopPropagation())];
           },
-          icon: selected === -1 ? core.CoreIcons.collapseActive : core.CoreIcons.collapse,
-          "data-selected": selected === -1
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+            "data-type": "negative",
+            icon: selected === -1 ? "icon-[mdi--minus-box]" : "icon-[mdi--minus-box-outline]",
+            "data-selected": selected === -1
+          })
         })]
       })]
-    }), /*#__PURE__*/react.isValidElement(icon) && icon, utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+    }), icon && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       icon: icon
     }), /*#__PURE__*/jsxRuntime.jsx("label", {
       children: label
-    }), /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread({}, badge))]
-  }));
-};
-var CheckList = function CheckList(_ref2) {
+    }), badge && /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread({}, badge))]
+  });
+}
+
+/**
+ * CheckList component to display a list of selectable items with checkboxes.
+ * It supports selection, deselection, and allows for negative selections.
+ *
+ * @example
+ * ```jsx
+ * <CheckList
+ *   items={[
+ *     { id: "1", label: "Item 1", icon: "icon1" },
+ *     { id: "2", label: "Item 2", icon: "icon2", badge: { text: "New" } },
+ *   ]}
+ *   maxCount={5}
+ *   allowNegative={true}
+ *   emptyMessage="No items available"
+ *   onChange={(selectedItems) => console.log(selectedItems)}
+ *   onClick={(itemId, isNegative) => console.log(itemId, isNegative)}
+ * />
+ * ```
+ */
+function CheckList(_ref2) {
   var _ref2$items = _ref2.items,
     items = _ref2$items === void 0 ? [] : _ref2$items,
     _ref2$maxCount = _ref2.maxCount,
@@ -85,7 +109,7 @@ var CheckList = function CheckList(_ref2) {
     nonselected = _ref2.nonselected,
     onChange = _ref2.onChange,
     onClick = _ref2.onClick,
-    aria = _objectWithoutProperties(_ref2, _excluded2);
+    aria = _objectWithoutProperties(_ref2, _excluded);
   var _useTranslation = reactI18next.useTranslation("data"),
     t = _useTranslation.t;
   var _useSelectableList = useSelectableList.useSelectableList({
@@ -102,6 +126,7 @@ var CheckList = function CheckList(_ref2) {
     showMore = _useState2[0],
     setShowMore = _useState2[1];
   react.useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setShowMore(false);
   }, [items]);
   var listItems = react.useMemo(function () {
@@ -117,12 +142,13 @@ var CheckList = function CheckList(_ref2) {
   }, [items, selection, maxCount, showMore, sortItems]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
     children: [listItems.map(function (item, index) {
-      return /*#__PURE__*/react.createElement(CheckItem, _objectSpread(_objectSpread({}, item), {}, {
-        key: index,
+      return /*#__PURE__*/jsxRuntime.jsx(CheckItem
+      // eslint-disable-next-line @eslint-react/no-array-index-key
+      , _objectSpread(_objectSpread({}, item), {}, {
         onClick: toggleSelection,
         allowNegative: allowNegative,
         selected: selection[item.id]
-      }));
+      }), index);
     }), maxCount > 0 && items.length > maxCount && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "ax-moreLink",
       children: /*#__PURE__*/jsxRuntime.jsxs("span", {
@@ -138,6 +164,6 @@ var CheckList = function CheckList(_ref2) {
       message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("checkList.empty")
     })]
   }));
-};
+}
 
 exports.CheckList = CheckList;

package/dist/cjs/histogram/Histogram.js

@@ -1,32 +1,48 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 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 Histogram_module = require('./Histogram.module.css');
+var getColor = require('../utils/getColor.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
-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 emptyIcon = "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
-var Histogram = function Histogram(_ref) {
+/**
+ * Histogram component displays a bar chart of items with counts.
+ * It allows users to visualize the distribution of counts across different items.
+ * The component supports sorting, custom colors, and click handling for each item.
+ * It also provides an empty state when there are no items to display.
+ *
+ * @example
+ * ```jsx
+ * <Histogram
+ *   items={[
+ *     { id: "1", label: "Item 1", count: 10 },
+ *     { id: "2", label: "Item 2", count: 20 },
+ *     { id: "3", label: "Item 3", count: 5, disabled: true },
+ *   ]}
+ *   total={30}
+ *   color="primary-500"
+ *   sortBy="count"
+ *   emptyTitle="No Data Available"
+ *   emptyMessage="Please check back later."
+ *   onClick={(id, negative) => console.log(`Clicked on ${id}`, negative ? "Negative" : "Positive")}
+ * />
+ * ```
+ */
+function Histogram(_ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
     total = _ref.total,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color,
+    color = _ref$color === void 0 ? "primary-500" : _ref$color,
     _ref$sortBy = _ref.sortBy,
     sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
     emptyTitle = _ref.emptyTitle,
     emptyMessage = _ref.emptyMessage,
-    _onClick = _ref.onClick,
-    aria = _objectWithoutProperties(_ref, _excluded);
+    _onClick = _ref.onClick;
   var _useTranslation = reactI18next.useTranslation("data"),
     t = _useTranslation.t;
   var maxTotal = react.useMemo(function () {
@@ -38,11 +54,10 @@ var Histogram = function Histogram(_ref) {
   var sorted = react.useMemo(function () {
     return items.sort(utilities.compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
   }, [items, sortBy]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: Histogram_module.histogram
-  }, aria), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "fabric-histogram from-0% to-100%",
     style: {
-      "--color": "var(--".concat(color, ")")
+      "--color": getColor.getColor(color)
     },
     children: [sorted.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
       icon: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
@@ -56,13 +71,13 @@ var Histogram = function Histogram(_ref) {
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         role: "none",
         "data-disabled": item.count === 0 || item.disabled,
-        className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", Histogram_module.histoLabel, (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
+        className: utilities.cn("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", "fabric-histoLabel", (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
         "data-testid": item.id,
         onClick: function onClick(e) {
           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 from-0% to-100%", Histogram_module.histoBar),
+          className: utilities.cn("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, "%")
           }
@@ -71,28 +86,28 @@ var Histogram = function Histogram(_ref) {
           actions: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
             color: "danger",
             size: "sm",
-            icon: core.CoreIcons.funnelMinus,
+            icon: "icon-[mdi--filter-minus]",
             "aria-label": "Filter Negative",
-            onClick: function onClick() {
-              return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id, true);
+            onClick: function onClick(e) {
+              return e !== null && e !== void 0 && e.stopPropagation(), _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id, true);
             }
           }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
             color: "primary",
             size: "sm",
-            icon: core.CoreIcons.funnelPlus,
+            icon: "icon-[mdi--filter-plus]",
             "aria-label": "Filter",
-            onClick: function onClick() {
-              return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
+            onClick: function onClick(e) {
+              return e !== null && e !== void 0 && e.stopPropagation(), _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
             }
           }, "positive")],
           children: item.label
         }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", Histogram_module.histoBadge),
+          className: utilities.cn("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", "fabric-histoBadge"),
           children: utilities.Format.number(item.count)
         })]
       }, item.id);
     })]
-  }));
-};
+  });
+}
 
 exports.Histogram = Histogram;

package/dist/cjs/hooks/useFilteredList.js

@@ -4,17 +4,31 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var utilities = require('@react-fabric/utilities');
 var react = require('react');
 
-var filterList = function filterList(items) {
+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 (matcher !== null && matcher !== void 0 && matcher(item, query)) return 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 {
@@ -22,14 +36,74 @@ var filterList = function filterList(items) {
     }
   });
   return newList;
-};
-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.
+ * @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.
+ * 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 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);
+ * });
+ * ```
+ */
+
+/**
+ * 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);
+ * });
+ * ```
+ */
+
+function useFilteredList(items, matchAll, matcher) {
   var _useState = react.useState(),
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
   var _items = react.useDeferredValue(items !== null && items !== void 0 ? items : []);
-  var _useState3 = react.useState([]),
+  var _useState3 = react.useState(function () {
+      return [];
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
     filteredList = _useState4[0],
     setFilteredList = _useState4[1];
@@ -37,20 +111,29 @@ var useFilteredList = function useFilteredList(items, matcher) {
     _useTransition2 = _slicedToArray(_useTransition, 2),
     isSearching = _useTransition2[0],
     startTransition = _useTransition2[1];
-  var filterItems = react.useCallback(function (items, query) {
-    return startTransition(function () {
-      return setFilteredList(filterList(items, query, matcher));
-    });
-  }, []);
+  var matchingAll = typeof matchAll === "boolean" ? matchAll : true;
+  var matcherFn = typeof matchAll === "function" ? matchAll : matcher;
+  var filterItems = react.useCallback(function (items, query, matchingAll) {
+    return (
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
+      startTransition(function () {
+        return setFilteredList(filterList(items, query, matchingAll, matcherFn));
+      })
+    );
+  },
+  // eslint-disable-next-line @eslint-react/exhaustive-deps
+  []);
   react.useEffect(function () {
-    if (query) filterItems(_items, query);else setFilteredList(items);
-  }, [query, _items]);
+    if (query) filterItems(_items, query, matchingAll);
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    else setFilteredList(items);
+  }, [query, matchingAll, _items, filterItems, items]);
   return {
     onSearch: setQuery,
     query: query,
     filteredList: filteredList,
     isSearching: isSearching
   };
-};
+}
 
 exports.useFilteredList = useFilteredList;

package/dist/cjs/hooks/usePagination.js

@@ -7,15 +7,32 @@ var jsxRuntime = require('react/jsx-runtime');
 var TOTAL_PILLS = 12;
 var TOTAL_SIBLINGS = 2;
 var TOTAL_MID_SIBLINGS = 3;
-var makeRange = function makeRange(start, end) {
+function makeRange(start, end) {
   var length = end - start;
   return Array.from({
     length: length
   }, function (_, idx) {
     return idx + start;
   });
-};
-var usePagination = function usePagination(_ref) {
+}
+
+/**
+ * Custom hook to manage pagination state and logic.
+ * It calculates the total number of pages, generates page ranges,
+ * and provides a way to change the current page.
+ * It also handles the transition of page changes to optimize performance.
+ *
+ * @example
+ * ```jsx
+ * const { page, totalPages, headLabel, ranges, onPageChange } = usePagination({
+ *   totalRecords: 100,
+ *   currentPage: 0,
+ *   perPage: 10,
+ *   onChange: (newPage) => console.log("Page changed to:", newPage),
+ * });
+ * ```
+ */
+function usePagination(_ref) {
   var totalRecords = _ref.totalRecords,
     _ref$currentPage = _ref.currentPage,
     currentPage = _ref$currentPage === void 0 ? 0 : _ref$currentPage,
@@ -58,9 +75,13 @@ var usePagination = function usePagination(_ref) {
 
   /** ***************** set page *******************/
   react.useEffect(function () {
-    setPage(Math.min(currentPage, totalPages - 1));
-    onChange === null || onChange === void 0 || onChange(Math.min(currentPage, totalPages - 1));
-  }, [currentPage, totalPages]);
+    if (totalRecords > -1) {
+      var actual = Math.min(currentPage, totalPages - 1);
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
+      setPage(actual);
+      if (actual !== currentPage) onChange === null || onChange === void 0 || onChange(actual);
+    }
+  }, [currentPage, totalRecords, totalPages, onChange]);
   var headLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
       className: "text-muted",
@@ -72,7 +93,7 @@ var usePagination = function usePagination(_ref) {
     startTransition(function () {
       return onChange === null || onChange === void 0 ? void 0 : onChange(page);
     });
-  }, []);
+  }, [onChange]);
   return {
     page: page,
     totalPages: totalPages,
@@ -80,6 +101,6 @@ var usePagination = function usePagination(_ref) {
     ranges: ranges,
     onPageChange: onPageChange
   };
-};
+}
 
 exports.usePagination = usePagination;