@react-fabric/data 1.0.0-beta.0

package/dist/cjs/virtual/Gallery.js

@@ -0,0 +1,229 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var reactVirtual = require('@tanstack/react-virtual');
+var classNames = require('classnames');
+var memoizeOne = require('memoize-one');
+var react = require('react');
+var Scroller = require('./Scroller.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var createItemList = memoizeOne(function (items) {
+  return items;
+});
+var _VirtualGallery = function _VirtualGallery(_ref) {
+  var _virtualItems$3;
+  var items = _ref.items,
+    children = _ref.children,
+    columns = _ref.columns,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "md" : _ref$padding,
+    _ref$defaultHeight = _ref.defaultHeight,
+    height = _ref$defaultHeight === void 0 ? 48 : _ref$defaultHeight,
+    _ref$defaultWidth = _ref.defaultWidth,
+    width = _ref$defaultWidth === void 0 ? 48 : _ref$defaultWidth,
+    hideScroller = _ref.hideScroller,
+    initialScroll = _ref.initialScroll,
+    loading = _ref.loading,
+    onLoadMore = _ref.onLoadMore,
+    onScroll = _ref.onScroll,
+    galleryRef = _ref.galleryRef;
+  var count = react.useDeferredValue(items.length);
+  var extraSize = react.useMemo(function () {
+    return onLoadMore ? 64 : 0;
+  }, [onLoadMore]);
+  var itemList = createItemList(items.map(function (item, idx) {
+    return {
+      index: idx,
+      data: item,
+      isLast: idx + 1 === items.length
+    };
+  }));
+  var scrollerRef = react.useRef(null);
+  var _useState = react.useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    columnCount = _useState2[0],
+    setColumnCount = _useState2[1];
+  var columnMap = react.useMemo(function () {
+    return new Array(columnCount).fill(0).map(function (_, idx) {
+      return idx;
+    });
+  }, [columnCount]);
+  core.useEffectDebugger(function () {
+    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 ob = new ResizeObserver(handler);
+      handler();
+      ob.observe(el);
+      return function () {
+        ob.unobserve(el);
+        ob.disconnect();
+      };
+    }
+  }, [scrollerRef.current, columns, width], "virtualGallery recalculate view count");
+  var virtualizer = reactVirtual.useVirtualizer({
+    count: Math.ceil(count / columnCount),
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return height;
+    }
+  });
+  var virtualItems = virtualizer.getVirtualItems();
+  var currentIndex = react.useRef(0);
+  react.useEffect(function () {
+    var _virtualItems$1$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
+    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
+  }, [virtualItems]);
+  var calculateActiveScroll = react.useCallback(function () {
+    var _scrollerRef$current;
+    var _ref2 = (_scrollerRef$current = scrollerRef.current) !== null && _scrollerRef$current !== void 0 ? _scrollerRef$current : {},
+      _ref2$scrollTop = _ref2.scrollTop,
+      scrollTop = _ref2$scrollTop === void 0 ? 0 : _ref2$scrollTop,
+      _ref2$scrollHeight = _ref2.scrollHeight,
+      scrollHeight = _ref2$scrollHeight === void 0 ? 0 : _ref2$scrollHeight,
+      _ref2$offsetHeight = _ref2.offsetHeight,
+      offsetHeight = _ref2$offsetHeight === void 0 ? 0 : _ref2$offsetHeight;
+    if (scrollHeight === offsetHeight) return 0;
+    if (scrollTop === 0) return 1;
+    if (scrollTop >= scrollHeight - offsetHeight - extraSize * 2) return 2;
+    return 3;
+  }, []);
+  var _useState3 = react.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollActive = _useState4[0],
+    setScrollActive = _useState4[1];
+  var fireScrollEvent = core.useDebounce(function (idx) {
+    return onScroll === null || onScroll === void 0 ? void 0 : onScroll(currentIndex.current * idx);
+  }, [onScroll]);
+  var handleScroll = react.useCallback(function () {
+    setScrollActive(calculateActiveScroll());
+    fireScrollEvent(columnCount);
+  }, [columnCount, onLoadMore]);
+  react.useEffect(function () {
+    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) {
+      var db = utilities.debounce(onLoadMore);
+      db(firstItem * columnCount);
+      return function () {
+        return db.cancel();
+      };
+    }
+  }, [onLoadMore, items, columnCount, virtualItems, count]);
+  react.useLayoutEffect(function () {
+    setTimeout(function () {
+      initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+        align: "start"
+      });
+    }, 100);
+  }, [columnCount]);
+  react.useImperativeHandle(galleryRef, function () {
+    return {
+      scrollToItem: function scrollToItem(index) {
+        virtualizer.scrollToIndex(Math.floor(index / columnCount), {
+          align: "start"
+        });
+      },
+      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"
+        });
+        setTimeout(function () {
+          var _scrollerRef$current3;
+          (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector("[data-index=\"".concat(index, "\"]"))) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.add("hilight", "ring-1");
+        }, 100);
+      },
+      unhilight: function unhilight() {
+        var _scrollerRef$current4;
+        (_scrollerRef$current4 = scrollerRef.current) === null || _scrollerRef$current4 === void 0 || (_scrollerRef$current4 = _scrollerRef$current4.querySelector(".hilight")) === null || _scrollerRef$current4 === void 0 || _scrollerRef$current4.classList.remove("hilight", "ring-1");
+      }
+    };
+  }, [virtualizer, columnCount]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: scrollerRef,
+    onScroll: handleScroll,
+    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    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"),
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          style: {
+            height: virtualizer.getTotalSize()
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            style: {
+              height: (_virtualItems$3 = virtualItems[0]) === null || _virtualItems$3 === void 0 ? void 0 : _virtualItems$3.start
+            }
+          }), virtualItems.map(function (_ref3) {
+            var key = _ref3.key,
+              index = _ref3.index,
+              measureElement = _ref3.measureElement;
+            return /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex",
+              "data-index": index,
+              ref: measureElement,
+              children: columnMap.map(function (col) {
+                return /*#__PURE__*/jsxRuntime.jsx("div", {
+                  "data-index": index * columnCount + col,
+                  className: classNames("grid rounded-capped"),
+                  children: itemList[index * columnCount + col] && children(itemList[index * columnCount + col])
+                }, "".concat(key, ":").concat(col));
+              })
+            }, key);
+          }), onLoadMore && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "h-16",
+            children: loading && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
+          })]
+        })
+      }), !hideScroller && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames("self-end sticky bottom-2"),
+        children: /*#__PURE__*/jsxRuntime.jsx(Scroller.Scroller, {
+          vertical: true,
+          scrollActive: scrollActive,
+          onStart: function onStart() {
+            return virtualizer.scrollToIndex(0);
+          },
+          onPrevious: function onPrevious() {
+            return scrollerRef.current && virtualizer.scrollBy(-scrollerRef.current.offsetHeight);
+          },
+          onNext: function onNext() {
+            return scrollerRef.current && virtualizer.scrollBy(scrollerRef.current.offsetHeight);
+          },
+          onEnd: function onEnd() {
+            return virtualizer.scrollToIndex(count - 1);
+          }
+        })
+      })]
+    })
+  });
+};
+_VirtualGallery.displayName = "VirtualGallery";
+var GenericMemo = react.memo;
+var VirtualGallery = GenericMemo(_VirtualGallery);
+
+exports.VirtualGallery = VirtualGallery;

package/dist/cjs/virtual/List.js

@@ -0,0 +1,218 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var reactVirtual = require('@tanstack/react-virtual');
+var classNames = require('classnames');
+var memoizeOne = require('memoize-one');
+var react = require('react');
+var Scroller = require('./Scroller.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var createItemList = memoizeOne(function (items) {
+  return items;
+});
+var _VirtualList = function _VirtualList(_ref) {
+  var _virtualItems$3, _virtualItems$4;
+  var items = _ref.items,
+    children = _ref.children,
+    fullWidth = _ref.fullWidth,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "md" : _ref$padding,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
+    _ref$defaultHeight = _ref.defaultHeight,
+    height = _ref$defaultHeight === void 0 ? 48 : _ref$defaultHeight,
+    _ref$defaultWidth = _ref.defaultWidth,
+    width = _ref$defaultWidth === void 0 ? 48 : _ref$defaultWidth,
+    hideScroller = _ref.hideScroller,
+    initialScroll = _ref.initialScroll,
+    loading = _ref.loading,
+    onLoadMore = _ref.onLoadMore,
+    onScroll = _ref.onScroll,
+    listRef = _ref.listRef;
+  var count = react.useDeferredValue(items.length);
+  var extraSize = react.useMemo(function () {
+    return onLoadMore ? 64 : 0;
+  }, [onLoadMore]);
+  var itemList = createItemList(items.map(function (item, idx) {
+    return {
+      index: idx,
+      data: item,
+      isLast: idx + 1 === items.length
+    };
+  }));
+  var scrollerRef = react.useRef(null);
+  var virtualizer = reactVirtual.useVirtualizer({
+    count: count,
+    horizontal: orientation === "horizontal",
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return orientation === "horizontal" ? width : height;
+    }
+  });
+  var virtualItems = virtualizer.getVirtualItems();
+  var currentIndex = react.useRef(0);
+  react.useEffect(function () {
+    var _virtualItems$1$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
+    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
+  }, [virtualItems]);
+  var calculateActiveScroll = react.useCallback(function () {
+    var _scrollerRef$current;
+    var _ref2 = (_scrollerRef$current = scrollerRef.current) !== null && _scrollerRef$current !== void 0 ? _scrollerRef$current : {},
+      _ref2$scrollTop = _ref2.scrollTop,
+      scrollTop = _ref2$scrollTop === void 0 ? 0 : _ref2$scrollTop,
+      _ref2$scrollLeft = _ref2.scrollLeft,
+      scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
+      _ref2$scrollWidth = _ref2.scrollWidth,
+      scrollWidth = _ref2$scrollWidth === void 0 ? 0 : _ref2$scrollWidth,
+      _ref2$scrollHeight = _ref2.scrollHeight,
+      scrollHeight = _ref2$scrollHeight === void 0 ? 0 : _ref2$scrollHeight,
+      _ref2$offsetWidth = _ref2.offsetWidth,
+      offsetWidth = _ref2$offsetWidth === void 0 ? 0 : _ref2$offsetWidth,
+      _ref2$offsetHeight = _ref2.offsetHeight,
+      offsetHeight = _ref2$offsetHeight === void 0 ? 0 : _ref2$offsetHeight;
+    if (orientation === "vertical") {
+      if (scrollHeight === offsetHeight) return 0;
+      if (scrollTop === 0) return 1;
+      if (scrollTop >= scrollHeight - offsetHeight - extraSize * 2) return 2;
+    }
+    if (orientation === "horizontal") {
+      if (scrollWidth === offsetWidth) return 0;
+      if (Math.abs(scrollLeft) === 0) return 1;
+      if (Math.abs(scrollLeft) >= scrollWidth - offsetWidth - extraSize * 2) return 2;
+    }
+    return 3;
+  }, [orientation]);
+  var _useState = react.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollActive = _useState2[0],
+    setScrollActive = _useState2[1];
+  var fireScrollEvent = core.useDebounce(function () {
+    return onScroll === null || onScroll === void 0 ? void 0 : onScroll(currentIndex.current);
+  }, [onScroll]);
+  var handleScroll = react.useCallback(function () {
+    setScrollActive(calculateActiveScroll());
+    fireScrollEvent();
+  }, [orientation, onLoadMore]);
+  react.useEffect(function () {
+    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) {
+      var db = utilities.debounce(onLoadMore);
+      db(firstItem);
+      return function () {
+        return db.cancel();
+      };
+    }
+  }, [onLoadMore, items, virtualItems, count]);
+  react.useLayoutEffect(function () {
+    setTimeout(function () {
+      initialScroll && virtualizer.scrollToIndex(initialScroll, {
+        align: "start"
+      });
+    }, 100);
+  }, []);
+  react.useImperativeHandle(listRef, function () {
+    return {
+      scrollToItem: function scrollToItem(index) {
+        virtualizer.scrollToIndex(index, {
+          align: "start"
+        });
+      },
+      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"
+        });
+        setTimeout(function () {
+          var _scrollerRef$current3;
+          (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector("[data-index=\"".concat(index, "\"]"))) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.add("hilight", "ring-1");
+        }, 100);
+      },
+      unhilight: function unhilight() {
+        var _scrollerRef$current4;
+        (_scrollerRef$current4 = scrollerRef.current) === null || _scrollerRef$current4 === void 0 || (_scrollerRef$current4 = _scrollerRef$current4.querySelector(".hilight")) === null || _scrollerRef$current4 === void 0 || _scrollerRef$current4.classList.remove("hilight", "ring-1");
+      }
+    };
+  }, [virtualizer]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: scrollerRef,
+    onScroll: handleScroll,
+    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    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"),
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          style: orientation === "vertical" ? {
+            height: virtualizer.getTotalSize()
+          } : {
+            width: virtualizer.getTotalSize()
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            style: orientation === "vertical" ? {
+              height: (_virtualItems$3 = virtualItems[0]) === null || _virtualItems$3 === void 0 ? void 0 : _virtualItems$3.start
+            } : {
+              width: (_virtualItems$4 = virtualItems[0]) === null || _virtualItems$4 === void 0 ? void 0 : _virtualItems$4.start,
+              display: "inline-block"
+            }
+          }), virtualItems.map(function (_ref3) {
+            var key = _ref3.key,
+              index = _ref3.index;
+            return /*#__PURE__*/jsxRuntime.jsx("div", {
+              "data-index": index,
+              ref: virtualizer.measureElement,
+              className: classNames("rounded-capped", orientation === "horizontal" ? "inline-grid" : "grid"),
+              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, {})
+        })]
+      }), !hideScroller && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
+        children: /*#__PURE__*/jsxRuntime.jsx(Scroller.Scroller, {
+          vertical: orientation === "vertical",
+          scrollActive: scrollActive,
+          onStart: function onStart() {
+            return virtualizer.scrollToIndex(0);
+          },
+          onPrevious: function onPrevious() {
+            return scrollerRef.current && virtualizer.scrollBy(-(orientation === "vertical" ? scrollerRef.current.offsetHeight : scrollerRef.current.offsetWidth));
+          },
+          onNext: function onNext() {
+            return scrollerRef.current && virtualizer.scrollBy(orientation === "vertical" ? scrollerRef.current.offsetHeight : scrollerRef.current.offsetWidth);
+          },
+          onEnd: function onEnd() {
+            return virtualizer.scrollToIndex(count - 1);
+          }
+        })
+      })]
+    })
+  });
+};
+_VirtualList.displayName = "VirtualList";
+var GenericMemo = react.memo;
+var VirtualList = GenericMemo(_VirtualList);
+
+exports.VirtualList = VirtualList;

package/dist/cjs/virtual/Scroller.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var core = require('@react-fabric/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var Scroller = function Scroller(_ref) {
+  var _ref$vertical = _ref.vertical,
+    vertical = _ref$vertical === void 0 ? true : _ref$vertical,
+    scrollActive = _ref.scrollActive,
+    onStart = _ref.onStart,
+    onEnd = _ref.onEnd,
+    onPrevious = _ref.onPrevious,
+    onNext = _ref.onNext;
+  return /*#__PURE__*/jsxRuntime.jsxs(core.ButtonGroup, {
+    vertical: vertical,
+    variant: "link",
+    className: "outline",
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "scroll to top",
+      icon: vertical ? core.CoreIcons.chevronsUp : core.CoreIcons.chevronsLeft,
+      disabled: (scrollActive & 2) === 0,
+      onClick: onStart
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "scroll up",
+      icon: vertical ? core.CoreIcons.chevronUp : core.CoreIcons.chevronLeft,
+      disabled: (scrollActive & 2) === 0,
+      onClick: onPrevious
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "scroll down",
+      icon: vertical ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight,
+      disabled: scrollActive % 2 === 0,
+      onClick: onNext
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "scroll to bottom",
+      icon: vertical ? core.CoreIcons.chevronsDown : core.CoreIcons.chevronsRight,
+      disabled: scrollActive % 2 === 0,
+      onClick: onEnd
+    })]
+  });
+};
+
+exports.Scroller = Scroller;

package/dist/esm/histogram/Histogram.js

@@ -0,0 +1,89 @@
+'use client';
+
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { EmptyContent, Icon, ActionLabel, Button, CoreIcons } from '@react-fabric/core';
+import { compareValues, 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 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,
+    _ref$sortBy = _ref.sortBy,
+    sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
+    emptyTitle = _ref.emptyTitle,
+    emptyMessage = _ref.emptyMessage,
+    _onClick = _ref.onClick;
+  var _useTranslation = useTranslation("data"),
+    t = _useTranslation.t;
+  var maxTotal = useMemo(function () {
+    if (total) return total;
+    return Math.max.apply(Math, _toConsumableArray(items.map(function (item) {
+      return item.count;
+    })));
+  }, [total, items]);
+  var sorted = useMemo(function () {
+    return items.sort(compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
+  }, [items, sortBy]);
+  return /*#__PURE__*/jsxs("div", {
+    className: classes.histogram,
+    style: {
+      "--color": "var(--".concat(color, ")")
+    },
+    children: [sorted.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
+      icon: /*#__PURE__*/jsx(Icon, {
+        icon: emptyIcon,
+        size: "2.5rem"
+      }),
+      title: emptyTitle,
+      message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("histogram.empty")
+    }), sorted === null || sorted === void 0 ? void 0 : sorted.map(function (item) {
+      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"),
+        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),
+          style: {
+            width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
+          }
+        }), /*#__PURE__*/jsx(ActionLabel, {
+          className: "flex-1 truncate z-1 text-sm cursor-pointer font-medium",
+          actions: [/*#__PURE__*/jsx(Button, {
+            color: "danger",
+            size: "sm",
+            icon: CoreIcons.funnelMinus,
+            "aria-label": "Filter Negative",
+            onClick: function onClick() {
+              return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id, true);
+            }
+          }, "negative"), /*#__PURE__*/jsx(Button, {
+            color: "primary",
+            size: "sm",
+            icon: CoreIcons.funnelPlus,
+            "aria-label": "Filter",
+            onClick: function onClick() {
+              return _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),
+          children: Format.number(item.count)
+        })]
+      }, item.id);
+    })]
+  });
+};
+
+export { Histogram };

package/dist/esm/histogram/Histogram.module.css

@@ -0,0 +1 @@
+@layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}

package/dist/esm/hooks/useFilteredList.js

@@ -0,0 +1,56 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { isString, matchString } from '@react-fabric/utilities';
+import { useState, useDeferredValue, useTransition, useCallback, useEffect } from 'react';
+
+var filterList = function filterList(items) {
+  var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  var matcher = arguments.length > 2 ? arguments[2] : undefined;
+  var newList = [];
+  items.forEach(function (item) {
+    if (matcher) {
+      return (matcher === null || matcher === void 0 ? void 0 : matcher(item, query)) && newList.push(item);
+    }
+    if (query && isString(query)) {
+      var _item$label;
+      if (matchString((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.toString(), query)) {
+        return newList.push(item);
+      }
+    } else {
+      return newList.push(item);
+    }
+  });
+  return newList;
+};
+var useFilteredList = function useFilteredList(items, 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([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredList = _useState4[0],
+    setFilteredList = _useState4[1];
+  var _useTransition = useTransition(),
+    _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));
+    });
+  }, []);
+  useEffect(function () {
+    if (query) filterItems(_items, query);else setFilteredList(items);
+  }, [query, _items]);
+  return {
+    onSearch: setQuery,
+    query: query,
+    filteredList: filteredList,
+    isSearching: isSearching
+  };
+};
+
+export { useFilteredList };