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

package/dist/esm/checklist/CheckList.js

@@ -2,77 +2,101 @@
 
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { EmptyContent, Icon, CoreIcons, Badge } from '@react-fabric/core';
-import { isString } from '@react-fabric/utilities';
-import { useState, useEffect, useMemo, createElement, Fragment, isValidElement } from 'react';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { EmptyContent, Icon, Badge } from '@react-fabric/core';
+import { useState, useEffect, useMemo, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelectableList } from '../hooks/useSelectableList.js';
 import { jsxs, jsx } from '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__*/jsxs("div", _objectSpread(_objectSpread({
+    badge = _ref.badge;
+  return /*#__PURE__*/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__*/jsx(Icon, {
       "data-type": "checkbox",
       className: "ax-checkList__checkbox",
       "data-selected": selected === 1,
-      icon: selected ? CoreIcons.checkboxInt : CoreIcons.checkboxOff
+      icon: selected ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]"
     }), allowNegative && /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Icon, {
         "data-type": "multiple",
         className: "ax-checkList__checkbox",
-        icon: selected === 1 ? CoreIcons.expand : selected === -1 ? CoreIcons.collapse : 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__*/jsxs("div", {
         className: "ax-checkList__checkbox",
-        children: [/*#__PURE__*/jsx(Icon, {
-          "data-type": "positive",
+        children: [/*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "size-fit leading-0 cursor-pointer",
           onClick: function onClick(e) {
             return [(_onClick(id, false), e.stopPropagation())];
           },
-          icon: selected === 1 ? CoreIcons.expandActive : CoreIcons.expand,
-          "data-selected": selected === 1
-        }), /*#__PURE__*/jsx(Icon, {
-          "data-type": "negative",
+          children: /*#__PURE__*/jsx(Icon, {
+            "data-type": "positive",
+            icon: selected === 1 ? "icon-[mdi--plus-box]" : "icon-[mdi--plus-box-outline]",
+            "data-selected": selected === 1
+          })
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "size-fit leading-0 cursor-pointer",
           onClick: function onClick(e) {
             return [(_onClick(id, true), e.stopPropagation())];
           },
-          icon: selected === -1 ? CoreIcons.collapseActive : CoreIcons.collapse,
-          "data-selected": selected === -1
+          children: /*#__PURE__*/jsx(Icon, {
+            "data-type": "negative",
+            icon: selected === -1 ? "icon-[mdi--minus-box]" : "icon-[mdi--minus-box-outline]",
+            "data-selected": selected === -1
+          })
         })]
       })]
-    }), /*#__PURE__*/isValidElement(icon) && icon, isString(icon) && /*#__PURE__*/jsx(Icon, {
+    }), icon && /*#__PURE__*/jsx(Icon, {
       icon: icon
     }), /*#__PURE__*/jsx("label", {
       children: label
-    }), /*#__PURE__*/jsx(Badge, _objectSpread({}, badge))]
-  }));
-};
-var CheckList = function CheckList(_ref2) {
+    }), badge && /*#__PURE__*/jsx(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 = useTranslation("data"),
     t = _useTranslation.t;
   var _useSelectableList = useSelectableList({
@@ -102,6 +126,7 @@ var CheckList = function CheckList(_ref2) {
     showMore = _useState2[0],
     setShowMore = _useState2[1];
   useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setShowMore(false);
   }, [items]);
   var listItems = useMemo(function () {
@@ -117,12 +142,13 @@ var CheckList = function CheckList(_ref2) {
   }, [items, selection, maxCount, showMore, sortItems]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
     children: [listItems.map(function (item, index) {
-      return /*#__PURE__*/createElement(CheckItem, _objectSpread(_objectSpread({}, item), {}, {
-        key: index,
+      return /*#__PURE__*/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__*/jsx("div", {
       className: "ax-moreLink",
       children: /*#__PURE__*/jsxs("span", {
@@ -138,6 +164,6 @@ var CheckList = function CheckList(_ref2) {
       message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("checkList.empty")
     })]
   }));
-};
+}
 
 export { CheckList };

package/dist/esm/histogram/Histogram.js

@@ -1,32 +1,48 @@
 'use client';
 
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { EmptyContent, Icon, ActionLabel, Button, CoreIcons } from '@react-fabric/core';
-import { compareValues, Format } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { EmptyContent, Icon, ActionLabel, Button } from '@react-fabric/core';
+import { compareValues, cn, Format } from '@react-fabric/utilities';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import classes from './Histogram.module.css';
+import { getColor } from '../utils/getColor.js';
 import { jsxs, jsx } from '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 = useTranslation("data"),
     t = _useTranslation.t;
   var maxTotal = useMemo(function () {
@@ -38,11 +54,10 @@ var Histogram = function Histogram(_ref) {
   var sorted = useMemo(function () {
     return items.sort(compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
   }, [items, sortBy]);
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classes.histogram
-  }, aria), {}, {
+  return /*#__PURE__*/jsxs("div", {
+    className: "fabric-histogram from-0% to-100%",
     style: {
-      "--color": "var(--".concat(color, ")")
+      "--color": getColor(color)
     },
     children: [sorted.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
       icon: /*#__PURE__*/jsx(Icon, {
@@ -56,13 +71,13 @@ var Histogram = function Histogram(_ref) {
       return /*#__PURE__*/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", classes.histoLabel, (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
+        className: 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__*/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%", classes.histoBar),
+          className: 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__*/jsx(Button, {
             color: "danger",
             size: "sm",
-            icon: 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__*/jsx(Button, {
             color: "primary",
             size: "sm",
-            icon: 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__*/jsx("span", {
-          className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", classes.histoBadge),
+          className: cn("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", "fabric-histoBadge"),
           children: Format.number(item.count)
         })]
       }, item.id);
     })]
-  }));
-};
+  });
+}
 
 export { Histogram };

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) {
+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 && 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 {
@@ -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 = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
   var _items = useDeferredValue(items !== null && items !== void 0 ? items : []);
-  var _useState3 = useState([]),
+  var _useState3 = 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 = 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 = 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
+  []);
   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
   };
-};
+}
 
 export { useFilteredList };

package/dist/esm/hooks/usePagination.js

@@ -7,15 +7,32 @@ import { jsxs } from '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 *******************/
   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 = useMemo(function () {
     return /*#__PURE__*/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
   };
-};
+}
 
 export { usePagination };

package/dist/esm/hooks/useSelectableList.js

@@ -5,15 +5,39 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useRef, useState, useTransition, useEffect, useCallback } from 'react';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useSelectableList = function useSelectableList(_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; }
+/**
+ * Custom hook to manage selection of items in a list.
+ * It allows toggling selection state of items, handling both selected and non-selected states.
+ * The hook maintains a selection state and provides a function to toggle the selection of items.
+ * It also supports callbacks for when the selection changes or when an item is clicked.
+ *
+ * @example
+ * ```jsx
+ * const { selection, toggleSelection } = useSelectableList({
+ *   items: [{ id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }],
+ *   selected: ['1'],
+ *   nonselected: ['2'],
+ *   onChange: (selectedIds, nonSelectedIds) => {
+ *     console.log('Selected:', selectedIds);
+ *     console.log('Non-selected:', nonSelectedIds);
+ *   },
+ *   onClick: (id, isNegative) => {
+ *     console.log(`Item ${id} clicked, isNegative: ${isNegative}`);
+ *   },
+ * });
+ * ```
+ */
+function useSelectableList(_ref) {
   var items = _ref.items,
     selected = _ref.selected,
     nonselected = _ref.nonselected,
     onChange = _ref.onChange,
     onClick = _ref.onClick;
   var selectionRef = useRef({});
-  var _useState = useState({}),
+  var _useState = useState(function () {
+      return {};
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     selection = _useState2[0],
     setSelection = _useState2[1];
@@ -26,6 +50,7 @@ var useSelectableList = function useSelectableList(_ref) {
       var id = _ref2.id;
       return _objectSpread(_objectSpread({}, ret), {}, _defineProperty({}, id, selected !== null && selected !== void 0 && (_selected$includes = selected.includes) !== null && _selected$includes !== void 0 && _selected$includes.call(selected, id) ? 1 : nonselected !== null && nonselected !== void 0 && (_nonselected$includes = nonselected.includes) !== null && _nonselected$includes !== void 0 && _nonselected$includes.call(nonselected, id) ? -1 : 0));
     }, {});
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setSelection(_objectSpread({}, selectionRef.current));
   }, [items, selected, nonselected]);
   var toggleSelection = useCallback(function (id) {
@@ -44,11 +69,11 @@ var useSelectableList = function useSelectableList(_ref) {
       onClick === null || onClick === void 0 || onClick(id, isNegative);
       onChange === null || onChange === void 0 || onChange(change[0], change[1]);
     });
-  }, []);
+  }, [onChange, onClick]);
   return {
     selection: selection,
     toggleSelection: toggleSelection
   };
-};
+}
 
 export { useSelectableList };

package/dist/esm/i18n/{ar.json.js → ar/data.json.js}

@@ -34,6 +34,11 @@ var action = {
 	addFilter: "أضف عامل تصفية",
 	addFilterNot: "إضافة لا تصفية"
 };
+var data = {
+	tree: {
+		noItems: "لا توجد عناصر شجرة متوفرة"
+	}
+};
 var ar = {
 	label: label,
 	tree: tree,
@@ -41,7 +46,8 @@ var ar = {
 	json: json,
 	checkList: checkList,
 	histogram: histogram,
-	action: action
+	action: action,
+	data: data
 };
 
-export { action, checkList, datagrid, ar as default, histogram, json, label, tree };
+export { action, checkList, data, datagrid, ar as default, histogram, json, label, tree };

package/dist/esm/i18n/{en.json.js → en/data.json.js}

@@ -34,6 +34,11 @@ var action = {
 	addFilter: "Add Filter",
 	addFilterNot: "Add not Filter"
 };
+var data = {
+	tree: {
+		noItems: "No tree items available"
+	}
+};
 var en = {
 	label: label,
 	tree: tree,
@@ -41,7 +46,8 @@ var en = {
 	json: json,
 	checkList: checkList,
 	histogram: histogram,
-	action: action
+	action: action,
+	data: data
 };
 
-export { action, checkList, datagrid, en as default, histogram, json, label, tree };
+export { action, checkList, data, datagrid, en as default, histogram, json, label, tree };

package/dist/esm/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import { addTranslationBundle } from '@react-fabric/core';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/data.json.js';
+import en from './en/data.json.js';
 
 /*
  * React Fabric