@react-fabric/data 1.0.0-beta.1 → 1.0.0-beta.12

package/dist/cjs/table/Table.js

@@ -2,11 +2,11 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var core = require('@react-fabric/core');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var reactI18next = require('react-i18next');
 var AddColumn = require('./AddColumn.js');
-var BodyCell = require('./BodyCell.js');
+var BodyRow = require('./BodyRow.js');
 var CheckboxCell = require('./CheckboxCell.js');
 var Context = require('./Context.js');
 var EmptyCell = require('./EmptyCell.js');
@@ -18,15 +18,21 @@ var jsxRuntime = require('react/jsx-runtime');
 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 Table = function Table(_ref) {
-  var _state$start, _state$cols, _state$end, _items$, _state$start3, _state$cols3, _state$end3;
-  var data = _ref.data,
+  var _state$start, _state$cols, _state$end, _items$, _state$start2, _state$cols2, _state$end2;
+  var ref = _ref.ref,
+    data = _ref.data,
     columns = _ref.columns,
     keyProperty = _ref.keyProperty,
     checkableRows = _ref.checkableRows,
+    initialScroll = _ref.initialScroll,
     hideableColumns = _ref.hideableColumns,
     sort = _ref.sort,
     loading = _ref.loading,
+    emptyDisplay = _ref.emptyDisplay,
+    canExpand = _ref.canExpand,
+    children = _ref.children,
     onSort = _ref.onSort,
+    onScroll = _ref.onScroll,
     onRowClick = _ref.onRowClick,
     onCheckedChanged = _ref.onCheckedChanged;
   var _useTranslation = reactI18next.useTranslation("data"),
@@ -40,18 +46,62 @@ var Table = function Table(_ref) {
   var _useVirtualTable = useVirtualTable.useVirtualTable(data, keyProperty, fireCheckChanged),
     scrollerRef = _useVirtualTable.scrollerRef,
     items = _useVirtualTable.items,
+    top = _useVirtualTable.top,
     checkState = _useVirtualTable.checkState,
+    virtualizer = _useVirtualTable.virtualizer,
+    toggleExpand = _useVirtualTable.toggleExpand,
     toggleChecked = _useVirtualTable.toggleChecked,
     toggleAllChecked = _useVirtualTable.toggleAllChecked,
     getData = _useVirtualTable.getData,
     totalSize = _useVirtualTable.totalSize,
     measureElement = _useVirtualTable.measureElement;
+  var refBody = react.useRef(null);
   var wrapperStart = react.useMemo(function () {
     return "bg-inherit sticky start-0 flex flex-nowrap z-1";
   }, []);
   var wrapperEnd = react.useMemo(function () {
     return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
   }, []);
+  react.useLayoutEffect(function () {
+    setTimeout(function () {
+      initialScroll && virtualizer.scrollToIndex(initialScroll, {
+        align: "start"
+      });
+    }, 100);
+  }, []);
+  react.useImperativeHandle(ref, function () {
+    return {
+      scrollTo: function scrollTo(row) {
+        virtualizer.scrollToIndex(row, {
+          align: "start"
+        });
+      },
+      hilight: function hilight(row) {
+        var _scrollerRef$current;
+        (_scrollerRef$current = scrollerRef.current) === null || _scrollerRef$current === void 0 || (_scrollerRef$current = _scrollerRef$current.querySelector(".hilight")) === null || _scrollerRef$current === void 0 || _scrollerRef$current.classList.remove("hilight", "ring-1");
+        virtualizer.scrollToIndex(Math.floor(row), {
+          align: "start"
+        });
+        setTimeout(function () {
+          var _scrollerRef$current2;
+          (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector("[data-index=\"".concat(row, "\"]"))) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.add("hilight", "ring-1");
+        }, 100);
+      },
+      unhilight: function unhilight() {
+        var _scrollerRef$current3;
+        (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector(".hilight")) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.remove("hilight", "ring-1");
+      }
+    };
+  }, []);
+  react.useEffect(function () {
+    var handle = utilities.debounce(function (top) {
+      onScroll === null || onScroll === void 0 || onScroll(top !== null && top !== void 0 ? top : 0);
+    });
+    handle(top);
+    return function () {
+      handle.cancel();
+    };
+  }, [top]);
   return /*#__PURE__*/jsxRuntime.jsx(Context.TableProvider, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "grid area-content overflow-auto relative",
@@ -63,7 +113,9 @@ var Table = function Table(_ref) {
         className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: wrapperStart,
-          children: [checkableRows && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
+          children: [canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "w-6"
+          }), checkableRows && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
             state: checkState.allChecked,
             onClick: toggleAllChecked
           }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, idx) {
@@ -96,78 +148,61 @@ var Table = function Table(_ref) {
         style: {
           height: totalSize()
         },
+        ref: refBody,
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
             height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
           }
         }), items.map(function (_ref2) {
-          var _state$start2, _state$cols2, _state$end2;
           var index = _ref2.index,
             key = _ref2.key;
           var data = getData(index);
-          return /*#__PURE__*/jsxRuntime.jsxs("div", {
-            role: "none",
-            className: classNames("flex flex-nowrap", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
-            onClick: function onClick() {
-              return checkableRows && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
-            },
-            "data-index": index,
-            ref: measureElement,
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: wrapperStart,
-              children: [checkableRows && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
-                onClick: function onClick() {
-                  return toggleChecked(data[keyProperty]);
-                },
-                state: checkState.checked.includes(data[keyProperty]) ? 1 : 0
-              }), (_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.map(function (col, ids) {
-                return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-                  column: col,
-                  item: data
-                }, "".concat(key, ":").concat(ids));
-              })]
-            }), (_state$cols2 = state.cols) === null || _state$cols2 === void 0 ? void 0 : _state$cols2.map(function (col, idc) {
-              return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-                column: col,
-                item: data
-              }, "".concat(key, ":").concat(idc));
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: wrapperEnd,
-              children: [(_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.map(function (col, ide) {
-                return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-                  column: col,
-                  item: data
-                }, "".concat(key, ":").concat(ide));
-              }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "w-6"
-              })]
-            })]
+          return /*#__PURE__*/jsxRuntime.jsx(BodyRow.BodyRow, {
+            rowKey: key,
+            index: index,
+            checkableRows: checkableRows,
+            checked: keyProperty && checkState.checked.includes(data[keyProperty]) ? 1 : 0,
+            expanded: !!keyProperty && checkState.expanded.includes(data[keyProperty]),
+            data: data,
+            hideableColumns: hideableColumns,
+            keyProperty: keyProperty,
+            measureElement: measureElement,
+            onRowClick: onRowClick,
+            state: state,
+            canExpand: canExpand,
+            toggleExpand: toggleExpand,
+            expandRow: children,
+            toggleChecked: toggleChecked,
+            wrapperEnd: wrapperEnd,
+            wrapperStart: wrapperStart
           }, key);
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex-1 flex flex-nowrap",
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: wrapperStart,
-            children: [checkableRows && /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: [canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-6"
+            }), checkableRows && /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "w-6"
-            }), (_state$start3 = state.start) === null || _state$start3 === void 0 ? void 0 : _state$start3.map(function (col) {
+            }), (_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.map(function (col) {
               return /*#__PURE__*/jsxRuntime.jsx(EmptyCell.EmptyCell, _objectSpread({}, col), String(col.id));
             })]
-          }), (_state$cols3 = state.cols) === null || _state$cols3 === void 0 ? void 0 : _state$cols3.map(function (col) {
+          }), (_state$cols2 = state.cols) === null || _state$cols2 === void 0 ? void 0 : _state$cols2.map(function (col) {
             return /*#__PURE__*/jsxRuntime.jsx(EmptyCell.EmptyCell, _objectSpread({}, col), String(col.id));
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: wrapperEnd,
-            children: [(_state$end3 = state.end) === null || _state$end3 === void 0 ? void 0 : _state$end3.map(function (col) {
+            children: [(_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.map(function (col) {
               return /*#__PURE__*/jsxRuntime.jsx(EmptyCell.EmptyCell, _objectSpread({}, col), String(col.id));
             }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "w-6"
             })]
           })]
         })]
-      }), !loading && data.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
+      }), !loading && data.length === 0 && (emptyDisplay !== null && emptyDisplay !== void 0 ? emptyDisplay : /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
         size: "sm",
         className: "bg-dimmed",
         message: t("datagrid.empty")
-      })]
+      }))]
     })
   });
 };

package/dist/cjs/table/useVirtualTable.js

@@ -8,6 +8,7 @@ var react = require('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 useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged) {
+  var _virtualizer$range;
   // TODO: refactor data into item list, apply grouping if groupColumn provided
   // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
 
@@ -22,24 +23,29 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
     }
   });
   var _useReducer = react.useReducer(function (state, action) {
+      if (action.type === "expand") {
+        if (state.expanded.includes(action.key)) state.expanded.splice(state.expanded.indexOf(action.key), 1);else state.expanded.push(action.key);
+      }
       if (action.type === "check") {
         if (state.checked.includes(action.key)) state.checked.splice(state.checked.indexOf(action.key), 1);else state.checked.push(action.key);
+        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
       }
       if (action.type === "checkall") {
         if (state.allChecked !== 0) {
           state.checked = [];
-        } else {
+        } else if (keyProperty) {
           state.checked = data.map(function (item) {
             return item[keyProperty];
           });
         }
+        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
       }
-      onCheckChanged(state.checked);
       return _objectSpread(_objectSpread({}, state), {}, {
         allChecked: state.checked.length === data.length ? 1 : state.checked.length ? 2 : 0
       });
     }, {
       checked: [],
+      expanded: [],
       allChecked: 0
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -54,8 +60,16 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
     items: virtualItems,
     checkState: state,
     getData: getData,
+    virtualizer: virtualizer,
+    top: (_virtualizer$range = virtualizer.range) === null || _virtualizer$range === void 0 ? void 0 : _virtualizer$range.startIndex,
     totalSize: virtualizer.getTotalSize,
     measureElement: virtualizer.measureElement,
+    toggleExpand: function toggleExpand(key) {
+      return dispatch({
+        type: "expand",
+        key: key
+      });
+    },
     toggleChecked: function toggleChecked(key) {
       return dispatch({
         type: "check",

package/dist/cjs/tree/TreePanel.js

@@ -11,12 +11,13 @@ var types = require('./types.js');
 var useTree = require('./useTree.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
 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) {
   var _virtualItems$;
-  var items = _ref.items,
+  var ref = _ref.ref,
+    items = _ref.items,
     selected = _ref.selected,
     checked = _ref.checked,
     checkable = _ref.checkable,
@@ -48,6 +49,7 @@ var TreePanel = function TreePanel(_ref) {
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
     select = _useTree.select,
+    expand = _useTree.expand,
     onFilter = _useTree.onFilter;
   var scrollerRef = react.useRef(null);
   var virtualizer = reactVirtual.useVirtualizer({
@@ -66,6 +68,16 @@ var TreePanel = function TreePanel(_ref) {
     if (expander === "folder") return [core.CoreIcons.folderClosed, core.CoreIcons.folderOpen];
     return [core.CoreIcons.expand, core.CoreIcons.collapse];
   }, [expander]);
+  react.useImperativeHandle(ref, function () {
+    return {
+      open: function open(id) {
+        return expand(id);
+      },
+      select: function select(id) {
+        return expand(id);
+      }
+    };
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsxs(core.Section, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(core.Header, {
       flex: true,

package/dist/cjs/tree/useTree.js

@@ -151,6 +151,12 @@ var useTree = function useTree(_ref) {
       id: id
     });
   }, []);
+  var expand = react.useCallback(function (id) {
+    dispatch({
+      type: "expand",
+      id: id
+    });
+  }, []);
   var expandAll = react.useCallback(function () {
     dispatch({
       type: "expandAll"
@@ -174,6 +180,7 @@ var useTree = function useTree(_ref) {
     collapseAll: collapseAll,
     toggleCheck: toggleCheck,
     select: select,
+    expand: expand,
     onFilter: onFilter
   };
 };

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", "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;
 });
@@ -29,7 +34,8 @@ 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;
@@ -163,10 +169,11 @@ 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 contain-strict")
+  }, 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", {
@@ -220,7 +227,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,6 +12,9 @@ var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+var _excluded = ["items", "children", "fullWidth", "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;
 });
@@ -31,7 +36,8 @@ 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;
@@ -154,10 +160,11 @@ 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 contain-strict")
+  }, 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", {
@@ -209,7 +216,7 @@ var _VirtualList = function _VirtualList(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualList.displayName = "VirtualList";
 var GenericMemo = react.memo;

package/dist/esm/checklist/CheckList.js

@@ -0,0 +1,143 @@
+'use client';
+
+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 { 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"];
+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) {
+  var id = _ref.id,
+    allowNegative = _ref.allowNegative,
+    selected = _ref.selected,
+    icon = _ref.icon,
+    label = _ref.label,
+    isDisabled = _ref.isDisabled,
+    _onClick = _ref.onClick,
+    badge = _ref.badge,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    role: "none",
+    className: "ax-checkList__item",
+    "data-disabled": isDisabled,
+    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
+    }), 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,
+        "data-selected": selected
+      }), /*#__PURE__*/jsxs("div", {
+        className: "ax-checkList__checkbox",
+        children: [/*#__PURE__*/jsx(Icon, {
+          "data-type": "positive",
+          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",
+          onClick: function onClick(e) {
+            return [(_onClick(id, true), e.stopPropagation())];
+          },
+          icon: selected === -1 ? CoreIcons.collapseActive : CoreIcons.collapse,
+          "data-selected": selected === -1
+        })]
+      })]
+    }), /*#__PURE__*/isValidElement(icon) && icon, isString(icon) && /*#__PURE__*/jsx(Icon, {
+      icon: icon
+    }), /*#__PURE__*/jsx("label", {
+      children: label
+    }), /*#__PURE__*/jsx(Badge, _objectSpread({}, badge))]
+  }));
+};
+var CheckList = function CheckList(_ref2) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$maxCount = _ref2.maxCount,
+    maxCount = _ref2$maxCount === void 0 ? 0 : _ref2$maxCount,
+    allowNegative = _ref2.allowNegative,
+    emptyMessage = _ref2.emptyMessage,
+    _ref2$sortItems = _ref2.sortItems,
+    sortItems = _ref2$sortItems === void 0 ? true : _ref2$sortItems,
+    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({
+      items: items,
+      selected: selected,
+      nonselected: nonselected,
+      onChange: onChange,
+      onClick: onClick
+    }),
+    selection = _useSelectableList.selection,
+    toggleSelection = _useSelectableList.toggleSelection;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1];
+  useEffect(function () {
+    setShowMore(false);
+  }, [items]);
+  var listItems = useMemo(function () {
+    return _toConsumableArray(items).sort(function (a, b) {
+      if (sortItems && selection[a.id] !== selection[b.id]) {
+        if (selection[a.id] === 1) return -1;
+        if (selection[b.id] === 1) return 1;
+        if (selection[a.id] === -1) return -1;
+        if (selection[b.id] === -1) return 1;
+      }
+      return 0;
+    }).slice(0, !showMore && maxCount > 0 ? maxCount : undefined);
+  }, [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,
+        onClick: toggleSelection,
+        allowNegative: allowNegative,
+        selected: selection[item.id]
+      }));
+    }), maxCount > 0 && items.length > maxCount && /*#__PURE__*/jsx("div", {
+      className: "ax-moreLink",
+      children: /*#__PURE__*/jsxs("span", {
+        role: "none",
+        className: "link",
+        onClick: function onClick() {
+          return setShowMore(!showMore);
+        },
+        children: ["...", t("core:action.".concat(showMore ? "less" : "more"))]
+      })
+    }), listItems.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
+      className: "text-sm",
+      message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("checkList.empty")
+    })]
+  }));
+};
+
+export { CheckList };

package/dist/esm/histogram/Histogram.js

@@ -1,6 +1,8 @@
 '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';
@@ -9,6 +11,9 @@ 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,
@@ -20,7 +25,8 @@ var Histogram = function Histogram(_ref) {
     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,8 +38,9 @@ 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: classes.histogram
+  }, aria), {}, {
     style: {
       "--color": "var(--".concat(color, ")")
     },
@@ -45,10 +52,12 @@ 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", classes.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()];
         },
@@ -83,7 +92,7 @@ var Histogram = function Histogram(_ref) {
         })]
       }, item.id);
     })]
-  });
+  }));
 };
 
 export { Histogram };