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

package/dist/esm/virtual/Gallery.js

@@ -1,6 +1,8 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useEffectDebugger, useDebounce, Skeleton } from '@react-fabric/core';
 import { debounce } from '@react-fabric/utilities';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -10,6 +12,9 @@ import { useDeferredValue, useMemo, useRef, useState, useEffect, useCallback, us
 import { Scroller } from './Scroller.js';
 import { jsx, jsxs } from '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 = useDeferredValue(items.length);
   var extraSize = 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 = 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 = useRef(0);
@@ -112,26 +125,25 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     setScrollActive(calculateActiveScroll());
   }, [count, calculateActiveScroll]);
   useEffect(function () {
-    var db = 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]);
-  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 = 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]);
   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__*/jsx("div", {
+  return /*#__PURE__*/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__*/jsxs("div", {
-      className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
+      className: classNames("flex flex-nowrap justify-center gap-2 min-h-full"),
       children: [/*#__PURE__*/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__*/jsxs("div", {
           style: {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/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__*/jsx("div", {
               className: "flex",
               "data-index": index,
-              ref: measureElement,
+              ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
                 return /*#__PURE__*/jsx("div", {
                   "data-index": index * columnCount + col,
@@ -220,10 +236,43 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualGallery.displayName = "VirtualGallery";
 var GenericMemo = memo;
+
+/**
+ * VirtualGallery component provides a virtualized gallery view for displaying a large list of items efficiently.
+ * It supports features like fixed columns, loading states, and customizable item rendering.
+ * The component uses virtualization to render only the visible items, improving performance for large datasets.
+ * It also provides a scroller for easy navigation through the items.
+ *
+ * @param {VirtualGalleryProps<T>} props - The properties for the VirtualGallery component.
+ * @returns {JSX.Element} The rendered VirtualGallery component.
+ *
+ * @example
+ * ```jsx
+ * <VirtualGallery
+ *   items={items}
+ *   columns={3}
+ *   defaultHeight={100}
+ *   defaultWidth={100}
+ *   fullWidth={true}
+ *   onLoadMore={(lastIndex) => console.log("Load more items from index:", lastIndex)}
+ *   onScroll={(top) => console.log("Scrolled to top:", top)}
+ * >
+ *   {({ item, index, isLast }) => (
+ *     <div className="gallery-item" key={item.id}>
+ *       <img src={item.image} alt={item.label} />
+ *       <p>{item.label}</p>
+ *     </div>
+ *   )}
+ * </VirtualGallery>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-virtualgallery--docs}
+ * @see {@link https://tanstack.com/docs/react-virtual/latest/overview}
+ */
 var VirtualGallery = GenericMemo(_VirtualGallery);
 
 export { VirtualGallery };

package/dist/esm/virtual/List.js

@@ -1,6 +1,8 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useDebounce, Skeleton } from '@react-fabric/core';
 import { debounce } from '@react-fabric/utilities';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -10,14 +12,21 @@ import { useDeferredValue, useMemo, useRef, useEffect, useCallback, useState, us
 import { Scroller } from './Scroller.js';
 import { jsx, jsxs } from '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 = useDeferredValue(items.length);
   var extraSize = 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 = useRef(null);
   var virtualizer = 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]);
   useEffect(function () {
-    var db = 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]);
-  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 = 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]);
   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__*/jsx("div", {
+  return /*#__PURE__*/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__*/jsxs("div", {
-      className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
+      className: classNames("flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
       children: [/*#__PURE__*/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__*/jsxs("div", {
           style: orientation === "vertical" ? {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           } : {
-            width: virtualizer.getTotalSize()
+            width: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsx("div", {
             style: orientation === "vertical" ? {
@@ -185,9 +198,9 @@ var _VirtualList = function _VirtualList(_ref) {
               children: children(itemList[index])
             }, key);
           })]
-        }), onLoadMore && /*#__PURE__*/jsx("div", {
-          className: orientation === "horizontal" ? "min-w-16" : "h-16",
-          children: loading && /*#__PURE__*/jsx(Skeleton, {})
+        }), loading && /*#__PURE__*/jsx("div", {
+          className: orientation === "horizontal" ? "min-w-16" : "",
+          children: /*#__PURE__*/jsx(Skeleton, {})
         })]
       }), !hideScroller && /*#__PURE__*/jsx("div", {
         className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
@@ -209,10 +222,47 @@ var _VirtualList = function _VirtualList(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualList.displayName = "VirtualList";
 var GenericMemo = memo;
+
+/**
+ * VirtualList component for rendering large lists efficiently using virtualization.
+ * It supports horizontal and vertical orientations, custom item heights and widths,
+ * and provides a scroller for navigating through the list.
+ * It also supports loading more items on scroll and provides a way to hilight items.
+ * It can be used with a ref to control scrolling and hilighting of items.
+ *
+ * @param {VirtualListProps<T>} props - The properties for the VirtualList component.
+ * @returns {JSX.Element} The rendered VirtualList component.
+ * @template T - The type of items in the list, extending AnyObject.
+ *
+ * @example
+ * ```jsx
+ * <VirtualList
+ *   items={items}
+ *   children={({ item, index, isLast }) => (
+ *     <div key={index} className="item">
+ *       {item.label}
+ *     </div>
+ *   )}
+ *   fullWidth={true}
+ *   orientation="vertical"
+ *   defaultHeight={50}
+ *   onLoadMore={(lastIndex) => console.log("Load more items from index:", lastIndex)}
+ *   onScroll={(top) => console.log("Scrolled to top:", top)}
+ *   listRef={virtualListRef}
+ * >
+ *   {({ item, index, isLast }) => (
+ *     <div className="gallery-item" key={item.id}>
+ *       <img src={item.image} alt={item.label} />
+ *       <p>{item.label}</p>
+ *     </div>
+ *   )}
+ * </VirtualList>
+ * ```
+ */
 var VirtualList = GenericMemo(_VirtualList);
 
 export { VirtualList };

package/dist/types/checklist/CheckList.d.ts

@@ -1,4 +1,4 @@
-import { type BadgeType } from "@react-fabric/core/dist/types/types";
+import { type BadgeType, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type FC } from "react";
 import { type SelectableProps } from "../hooks/useSelectableList";
 export interface CheckListItem extends KeyValue {
@@ -8,7 +8,7 @@ export interface CheckListItem extends KeyValue {
     badge?: BadgeType;
     isDisabled?: boolean;
 }
-export interface CheckListProps extends SelectableProps {
+export interface CheckListProps extends SelectableProps, TestProps {
     /**
      * list items
      */
@@ -27,4 +27,26 @@ export interface CheckListProps extends SelectableProps {
     emptyMessage?: string;
     sortItems?: boolean;
 }
+/**
+ * CheckList component to display a list of selectable items with checkboxes.
+ * It supports selection, deselection, and allows for negative selections.
+ *
+ * @param {CheckListProps} props - The properties for the CheckList component.
+ * @returns {JSX.Element} The rendered CheckList component.
+ *
+ * @example
+ * ```jsx
+ * <CheckList
+ *   items={[
+ *     { id: "1", label: "Item 1", icon: "icon1" },
+ *     { id: "2", label: "Item 2", icon: "icon2", badge: { text: "New" } },
+ *   ]}
+ *   maxCount={5}
+ *   allowNegative={true}
+ *   emptyMessage="No items available"
+ *   onChange={(selectedItems) => console.log(selectedItems)}
+ *   onClick={(itemId, isNegative) => console.log(itemId, isNegative)}
+ * />
+ * ```
+ */
 export declare const CheckList: FC<CheckListProps>;

package/dist/types/histogram/Histogram.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type ColorType, type PaletteType } from "@react-fabric/core/dist/types/types";
+import { type ColorType, type PaletteType, type TestProps } from "@react-fabric/core/dist/types/types";
 interface HistogramItem {
     id: string;
     label: string;
@@ -7,7 +6,7 @@ interface HistogramItem {
     total?: number;
     disabled?: boolean;
 }
-export interface HistogramProps {
+export interface HistogramProps extends TestProps {
     /**
      * histogram items list
      */
@@ -37,5 +36,33 @@ export interface HistogramProps {
      */
     onClick?: (id: string, negative?: true) => void;
 }
-export declare const Histogram: ({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Histogram component displays a bar chart of items with counts.
+ * It allows users to visualize the distribution of counts across different items.
+ * The component supports sorting, custom colors, and click handling for each item.
+ * It also provides an empty state when there are no items to display.
+ *
+ * @param {HistogramProps} props - The properties for the Histogram component.
+ * @returns {JSX.Element} - The rendered Histogram component.
+ *
+ * @example
+ * ```jsx
+ * <Histogram
+ *   items={[
+ *     { id: "1", label: "Item 1", count: 10 },
+ *     { id: "2", label: "Item 2", count: 20 },
+ *     { id: "3", label: "Item 3", count: 5, disabled: true },
+ *   ]}
+ *   total={30}
+ *   color="primary-500"
+ *   sortBy="count"
+ *   emptyTitle="No Data Available"
+ *   emptyMessage="Please check back later."
+ *   onClick={(id, negative) => console.log(`Clicked on ${id}`, negative ? "Negative" : "Positive")}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-histogram--docs}
+ */
+export declare const Histogram: ({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, ...aria }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/hooks/useFilteredList.d.ts

@@ -1,5 +1,23 @@
-/// <reference types="react" />
-export declare const useFilteredList: <T extends unknown = KeyValue<any>, Q extends unknown = string>(items: T[], matcher?: (item: T, query: Q) => boolean) => {
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+export declare const useFilteredList: <T extends AnyObject = KeyValue, Q extends AnyObject = string>(items: T[], matcher?: (item: T, query: Q) => boolean) => {
     onSearch: import("react").Dispatch<import("react").SetStateAction<Q | undefined>>;
     query: Q | undefined;
     filteredList: T[];

package/dist/types/hooks/usePagination.d.ts

@@ -16,6 +16,25 @@ export interface PaginationOptions {
      */
     onChange?: (page: number) => void;
 }
+/**
+ * Custom hook to manage pagination state and logic.
+ * It calculates the total number of pages, generates page ranges,
+ * and provides a way to change the current page.
+ * It also handles the transition of page changes to optimize performance.
+ *
+ * @param options - The pagination options including total records, current page, records per page, and change handler.
+ * @returns An object containing the current page, total pages, head label, ranges for pagination pills, and a function to change the page.
+ *
+ * @example
+ * ```jsx
+ * const { page, totalPages, headLabel, ranges, onPageChange } = usePagination({
+ *   totalRecords: 100,
+ *   currentPage: 0,
+ *   perPage: 10,
+ *   onChange: (newPage) => console.log("Page changed to:", newPage),
+ * });
+ * ```
+ */
 export declare const usePagination: ({ totalRecords, currentPage, perPage, onChange, }: PaginationOptions) => {
     page: number;
     totalPages: number;

package/dist/types/hooks/useSelectableList.d.ts

@@ -22,6 +22,35 @@ export interface SelectableProps {
      */
     onClick?: (id: string, isNegative: boolean) => void;
 }
+/**
+ * Custom hook to manage selection of items in a list.
+ * It allows toggling selection state of items, handling both selected and non-selected states.
+ * The hook maintains a selection state and provides a function to toggle the selection of items.
+ * It also supports callbacks for when the selection changes or when an item is clicked.
+ *
+ * @param items - The list of items to manage selection for.
+ * @param selected - An array of item IDs that are currently selected.
+ * @param nonselected - An array of item IDs that are currently non-selected.
+ * @param onChange - Callback function that is called when the selection changes.
+ * @param onClick - Callback function that is called when an item is clicked.
+ * @returns An object containing the current selection state and a function to toggle selection of items.
+ *
+ * @example
+ * ```jsx
+ * const { selection, toggleSelection } = useSelectableList({
+ *   items: [{ id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }],
+ *   selected: ['1'],
+ *   nonselected: ['2'],
+ *   onChange: (selectedIds, nonSelectedIds) => {
+ *     console.log('Selected:', selectedIds);
+ *     console.log('Non-selected:', nonSelectedIds);
+ *   },
+ *   onClick: (id, isNegative) => {
+ *     console.log(`Item ${id} clicked, isNegative: ${isNegative}`);
+ *   },
+ * });
+ * ```
+ */
 export declare const useSelectableList: ({ items, selected, nonselected, onChange, onClick, }: SelectableProps) => {
     selection: KeyValue<number>;
     toggleSelection: (id: string, isNegative?: boolean) => void;

package/dist/types/index.d.ts

@@ -4,7 +4,7 @@ export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
 export { Table } from "./table/Table";
-export { type TableRef } from "./table/types";
+export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";
 export { type TreeNodeType as TreeNode } from "./tree/types";
 export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";

package/dist/types/json/JsonViewer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type CssProp } from "@react-fabric/core/dist/types/types";
 export interface JsonViewProps<T> extends CssProp {
     /**
@@ -56,4 +55,30 @@ export interface JsonViewProps<T> extends CssProp {
      */
     formatter?: (path?: string, value?: AnyObject) => string | JSX.Element | undefined;
 }
-export declare const JsonViewer: <T extends KeyValue<any> = KeyValue<any>>({ className, json, copy, propertyScheme, filters, inline, labelWidth, formatter, labeler, onFilter, emptyMessage, showPropertyTree, ...rest }: JsonViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * JsonViewer component to display JSON data in a structured format.
+ * It supports inline display, property filtering, and custom formatting.
+ * The component can handle nested objects and arrays, displaying them in a tree-like structure.
+ * It also provides options for copying values and filtering properties.
+ *
+ * @param {JsonViewProps<T>} props - The properties for the JsonViewer component.
+ * @returns {JSX.Element} The rendered JsonViewer component.
+ *
+ * @example
+ * ```jsx
+ * <JsonViewer
+ *   json={{ name: "John", age: 30, address: { city: "New York", zip: "10001" } }}
+ *   copy={true}
+ *   filters={true}
+ *   propertyScheme={{ date: ["createdAt"], phone: ["contact"] }}
+ *   inline={true}
+ *   labelWidth="25%"
+ *   formatter={(path, value) => (path === "age" ? `${value} years` : value)}
+ *   labeler={(path) => path.replace(/_/g, " ").toUpperCase()}
+ *   onFilter={(path, value, negate) => console.log(`Filter ${negate ? "negate" : ""} on ${path}:`, value)}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-jsonviewer--docs}
+ */
+export declare const JsonViewer: <T extends KeyValue = KeyValue>({ className, json, copy, propertyScheme, filters, inline, labelWidth, formatter, labeler, onFilter, emptyMessage, showPropertyTree, ...rest }: JsonViewProps<T>) => import("react/jsx-runtime").JSX.Element;