@react-fabric/data 1.0.0-beta.5 → 1.0.0-beta.51

package/dist/cjs/virtual/Gallery.js

@@ -1,6 +1,8 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var reactVirtual = require('@tanstack/react-virtual');
@@ -10,6 +12,9 @@ var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "total", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
+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 createItemList = memoizeOne(function (items) {
   return items;
 });
@@ -18,6 +23,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   var items = _ref.items,
     children = _ref.children,
     columns = _ref.columns,
+    fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$defaultHeight = _ref.defaultHeight,
@@ -29,16 +39,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     loading = _ref.loading,
     onLoadMore = _ref.onLoadMore,
     onScroll = _ref.onScroll,
-    galleryRef = _ref.galleryRef;
+    galleryRef = _ref.galleryRef,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var count = react.useDeferredValue(items.length);
   var extraSize = react.useMemo(function () {
-    return onLoadMore ? 64 : 0;
+    return onLoadMore ? 8 : 0;
   }, [onLoadMore]);
-  var itemList = createItemList(items.map(function (item, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = react.useRef(null);
@@ -55,8 +66,9 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     if (scrollerRef.current) {
       var el = scrollerRef.current;
       var handler = function handler() {
-        var _el$offsetWidth;
-        setColumnCount(columns !== null && columns !== void 0 ? columns : Math.max(1, Math.floor((((_el$offsetWidth = el === null || el === void 0 ? void 0 : el.offsetWidth) !== null && _el$offsetWidth !== void 0 ? _el$offsetWidth : 800) - 32) / width)));
+        var _getComputedStyle$pad, _el$firstElementChild, _el$offsetWidth;
+        var pad = parseInt((_getComputedStyle$pad = getComputedStyle((_el$firstElementChild = el.firstElementChild) === null || _el$firstElementChild === void 0 ? void 0 : _el$firstElementChild.firstElementChild).padding) !== null && _getComputedStyle$pad !== void 0 ? _getComputedStyle$pad : 8);
+        setColumnCount(columns !== null && columns !== void 0 ? columns : Math.max(1, Math.floor((((_el$offsetWidth = el === null || el === void 0 ? void 0 : el.offsetWidth) !== null && _el$offsetWidth !== void 0 ? _el$offsetWidth : 800) - 32 - (isNaN(pad) ? 8 : pad) * 2) / width)));
       };
       var ob = new ResizeObserver(handler);
       handler();
@@ -74,7 +86,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     },
     estimateSize: function estimateSize() {
       return height;
-    }
+    },
+    overscan: 2
   });
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = react.useRef(0);
@@ -112,26 +125,25 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     setScrollActive(calculateActiveScroll());
   }, [count, calculateActiveScroll]);
   react.useEffect(function () {
-    var db = utilities.debounce(function () {
-      var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
-      if (lastItem && !loading && lastItem.index * columnCount + columnCount >= count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
-    });
-    db();
-    return function () {
-      return db.cancel();
-    };
-  }, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
-  react.useEffect(function () {
-    var _virtualItems$2;
-    var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
-    if (onLoadMore && firstItem !== undefined && items[firstItem * columnCount] === null) {
+    if (onLoadMore) {
+      var _virtualItems$2, _virtualItems$slice$p;
+      var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.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 firstIndex = firstItem * columnCount;
+      var lastIndex = (lastItem !== null && lastItem !== void 0 ? lastItem : 0) * columnCount + columnCount;
+      var canLoadPrevPage = firstItem !== undefined && items[firstIndex] === null;
+      var canLoadNextPage = lastItem !== undefined && lastIndex >= count - 1 && count < total;
       var db = utilities.debounce(onLoadMore);
-      db(firstItem * columnCount);
+      if (canLoadPrevPage) {
+        db(firstIndex);
+      } else if (!loading && canLoadNextPage) {
+        db(lastIndex + 1);
+      }
       return function () {
         return db.cancel();
       };
     }
-  }, [onLoadMore, items, columnCount, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
   react.useLayoutEffect(function () {
     setTimeout(function () {
       initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
@@ -143,14 +155,14 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
         (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;
@@ -163,17 +175,22 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
       }
     };
   }, [virtualizer, columnCount]);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    className: classNames("area-content bg-base overflow-auto")
+  }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames("box-content", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        className: classNames("box-content", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
           style: {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
@@ -181,12 +198,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
             }
           }), virtualItems.map(function (_ref3) {
             var key = _ref3.key,
-              index = _ref3.index,
-              measureElement = _ref3.measureElement;
+              index = _ref3.index;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex",
+              className: "flex justify-center",
               "data-index": index,
-              ref: measureElement,
+              ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
                 return /*#__PURE__*/jsxRuntime.jsx("div", {
                   "data-index": index * columnCount + col,
@@ -220,7 +236,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualGallery.displayName = "VirtualGallery";
 var GenericMemo = react.memo;

package/dist/cjs/virtual/List.js

@@ -1,6 +1,8 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var reactVirtual = require('@tanstack/react-virtual');
@@ -10,14 +12,21 @@ var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+var _excluded = ["items", "total", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
+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 createItemList = memoizeOne(function (items) {
   return items;
 });
 var _VirtualList = function _VirtualList(_ref) {
   var _virtualItems$3, _virtualItems$4;
   var items = _ref.items,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
     children = _ref.children,
     fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$orientation = _ref.orientation,
@@ -31,21 +40,23 @@ var _VirtualList = function _VirtualList(_ref) {
     loading = _ref.loading,
     onLoadMore = _ref.onLoadMore,
     onScroll = _ref.onScroll,
-    listRef = _ref.listRef;
+    listRef = _ref.listRef,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var count = react.useDeferredValue(items.length);
   var extraSize = react.useMemo(function () {
-    return onLoadMore ? 64 : 0;
+    return onLoadMore ? 8 : 0;
   }, [onLoadMore]);
-  var itemList = createItemList(items.map(function (item, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = react.useRef(null);
   var virtualizer = reactVirtual.useVirtualizer({
     count: count,
+    overscan: 2,
     horizontal: orientation === "horizontal",
     getScrollElement: function getScrollElement() {
       return scrollerRef.current;
@@ -103,26 +114,23 @@ var _VirtualList = function _VirtualList(_ref) {
     setScrollActive(calculateActiveScroll());
   }, [itemList, calculateActiveScroll]);
   react.useEffect(function () {
-    var db = utilities.debounce(function () {
-      var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
-      if (lastItem && !loading && lastItem.index === count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
-    });
-    db();
-    return function () {
-      return db.cancel();
-    };
-  }, [onLoadMore, loading, itemList, virtualItems, count]);
-  react.useEffect(function () {
-    var _virtualItems$2;
-    var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
-    if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
+    if (onLoadMore) {
+      var _virtualItems$2, _virtualItems$slice$p;
+      var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.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 && items[firstItem] === null;
+      var canLoadNextPage = lastItem !== undefined && lastItem === count - 1 && count < total;
       var db = utilities.debounce(onLoadMore);
-      db(firstItem);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
       return function () {
         return db.cancel();
       };
     }
-  }, [onLoadMore, items, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
   react.useLayoutEffect(function () {
     setTimeout(function () {
       initialScroll && virtualizer.scrollToIndex(initialScroll, {
@@ -134,14 +142,14 @@ var _VirtualList = function _VirtualList(_ref) {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(index, {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
         (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start"
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;
@@ -154,19 +162,24 @@ var _VirtualList = function _VirtualList(_ref) {
       }
     };
   }, [virtualizer]);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    className: classNames("area-content bg-base overflow-auto")
+  }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classNames("box-content inline-flex flex-nowrap", orientation === "vertical" && "flex-col", orientation === "horizontal" && "flex-row", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           style: orientation === "vertical" ? {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           } : {
-            width: virtualizer.getTotalSize()
+            width: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             style: orientation === "vertical" ? {
@@ -185,9 +198,9 @@ var _VirtualList = function _VirtualList(_ref) {
               children: children(itemList[index])
             }, key);
           })]
-        }), onLoadMore && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: orientation === "horizontal" ? "min-w-16" : "h-16",
-          children: loading && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
+        }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: orientation === "horizontal" ? "min-w-16" : "",
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
         })]
       }), !hideScroller && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
@@ -209,7 +222,7 @@ var _VirtualList = function _VirtualList(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualList.displayName = "VirtualList";
 var GenericMemo = react.memo;

package/dist/esm/checklist/CheckList.js

@@ -2,19 +2,20 @@
 
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Icon, CoreIcons, Badge, EmptyContent } from '@react-fabric/core';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { EmptyContent, Icon, CoreIcons, Badge } from '@react-fabric/core';
 import { isString } from '@react-fabric/utilities';
-import { memo, Fragment, isValidElement, useState, useEffect, useMemo, createElement } from 'react';
+import { useState, useEffect, useMemo, createElement, Fragment, isValidElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelectableList } from '../hooks/useSelectableList.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["items", "maxCount", "allowNegative", "emptyMessage", "sortItems"];
+var _excluded = ["id", "allowNegative", "selected", "icon", "label", "isDisabled", "onClick", "badge"],
+  _excluded2 = ["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 = /*#__PURE__*/memo(function (_ref) {
+var CheckItem = function CheckItem(_ref) {
   var id = _ref.id,
     allowNegative = _ref.allowNegative,
     selected = _ref.selected,
@@ -22,8 +23,9 @@ var CheckItem = /*#__PURE__*/memo(function (_ref) {
     label = _ref.label,
     isDisabled = _ref.isDisabled,
     _onClick = _ref.onClick,
-    badge = _ref.badge;
-  return /*#__PURE__*/jsxs("div", {
+    badge = _ref.badge,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     role: "none",
     className: "ax-checkList__item",
     "data-disabled": isDisabled,
@@ -32,7 +34,8 @@ var CheckItem = /*#__PURE__*/memo(function (_ref) {
     },
     onContextMenu: function onContextMenu(e) {
       return [allowNegative && _onClick(id, true), e.preventDefault()];
-    },
+    }
+  }, aria), {}, {
     children: [!allowNegative && /*#__PURE__*/jsx(Icon, {
       "data-type": "checkbox",
       className: "ax-checkList__checkbox",
@@ -67,9 +70,8 @@ var CheckItem = /*#__PURE__*/memo(function (_ref) {
     }), /*#__PURE__*/jsx("label", {
       children: label
     }), /*#__PURE__*/jsx(Badge, _objectSpread({}, badge))]
-  });
-});
-CheckItem.displayName = "CheckItem";
+  }));
+};
 var CheckList = function CheckList(_ref2) {
   var _ref2$items = _ref2.items,
     items = _ref2$items === void 0 ? [] : _ref2$items,
@@ -79,12 +81,20 @@ var CheckList = function CheckList(_ref2) {
     emptyMessage = _ref2.emptyMessage,
     _ref2$sortItems = _ref2.sortItems,
     sortItems = _ref2$sortItems === void 0 ? true : _ref2$sortItems,
-    props = _objectWithoutProperties(_ref2, _excluded);
+    selected = _ref2.selected,
+    nonselected = _ref2.nonselected,
+    onChange = _ref2.onChange,
+    onClick = _ref2.onClick,
+    aria = _objectWithoutProperties(_ref2, _excluded2);
   var _useTranslation = useTranslation("data"),
     t = _useTranslation.t;
-  var _useSelectableList = useSelectableList(_objectSpread({
-      items: items
-    }, props)),
+  var _useSelectableList = useSelectableList({
+      items: items,
+      selected: selected,
+      nonselected: nonselected,
+      onChange: onChange,
+      onClick: onClick
+    }),
     selection = _useSelectableList.selection,
     toggleSelection = _useSelectableList.toggleSelection;
   var _useState = useState(false),
@@ -105,8 +115,7 @@ var CheckList = function CheckList(_ref2) {
       return 0;
     }).slice(0, !showMore && maxCount > 0 ? maxCount : undefined);
   }, [items, selection, maxCount, showMore, sortItems]);
-  return /*#__PURE__*/jsxs("div", {
-    className: "ax-checkList",
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
     children: [listItems.map(function (item, index) {
       return /*#__PURE__*/createElement(CheckItem, _objectSpread(_objectSpread({}, item), {}, {
         key: index,
@@ -128,7 +137,7 @@ var CheckList = function CheckList(_ref2) {
       className: "text-sm",
       message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("checkList.empty")
     })]
-  });
+  }));
 };
 
 export { CheckList };

package/dist/esm/histogram/Histogram.js

@@ -1,26 +1,31 @@
 '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 { compareValues, isColor, Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import classes from './Histogram.module.css';
 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) {
   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;
+    _onClick = _ref.onClick,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation("data"),
     t = _useTranslation.t;
   var maxTotal = useMemo(function () {
@@ -32,10 +37,11 @@ var Histogram = function Histogram(_ref) {
   var sorted = useMemo(function () {
     return items.sort(compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
   }, [items, sortBy]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.histogram,
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: "fabric-histogram from-0% to-100%"
+  }, aria), {}, {
     style: {
-      "--color": "var(--".concat(color, ")")
+      "--color": isColor(color) ? color : "var(--color-".concat(color, ")")
     },
     children: [sorted.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
       icon: /*#__PURE__*/jsx(Icon, {
@@ -45,15 +51,17 @@ var Histogram = function Histogram(_ref) {
       title: emptyTitle,
       message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("histogram.empty")
     }), sorted === null || sorted === void 0 ? void 0 : sorted.map(function (item) {
+      var _item$total;
       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.count === 0 || item.disabled) && "pointer-events-none"),
+        className: classNames("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: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l", "fabric-histoBar"),
           style: {
             width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
           }
@@ -62,6 +70,7 @@ var Histogram = function Histogram(_ref) {
           actions: [/*#__PURE__*/jsx(Button, {
             color: "danger",
             size: "sm",
+            stopPropagation: true,
             icon: CoreIcons.funnelMinus,
             "aria-label": "Filter Negative",
             onClick: function onClick() {
@@ -70,6 +79,7 @@ var Histogram = function Histogram(_ref) {
           }, "negative"), /*#__PURE__*/jsx(Button, {
             color: "primary",
             size: "sm",
+            stopPropagation: true,
             icon: CoreIcons.funnelPlus,
             "aria-label": "Filter",
             onClick: function onClick() {
@@ -78,12 +88,12 @@ var Histogram = function Histogram(_ref) {
           }, "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: classNames("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/usePagination.js

@@ -58,9 +58,12 @@ 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);
+      setPage(actual);
+      actual !== currentPage && (onChange === null || onChange === void 0 ? void 0 : onChange(actual));
+    }
+  }, [currentPage, totalRecords, totalPages]);
   var headLabel = useMemo(function () {
     return /*#__PURE__*/jsxs("span", {
       className: "text-muted",
@@ -72,7 +75,7 @@ var usePagination = function usePagination(_ref) {
     startTransition(function () {
       return onChange === null || onChange === void 0 ? void 0 : onChange(page);
     });
-  }, []);
+  }, [onChange]);
   return {
     page: page,
     totalPages: totalPages,