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

package/dist/cjs/checklist/CheckList.js

@@ -72,6 +72,29 @@ var CheckItem = function CheckItem(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread({}, badge))]
   }));
 };
+
+/**
+ * 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)}
+ * />
+ * ```
+ */
 var CheckList = function CheckList(_ref2) {
   var _ref2$items = _ref2.items,
     items = _ref2$items === void 0 ? [] : _ref2$items,

package/dist/cjs/histogram/Histogram.js

@@ -14,6 +14,34 @@ var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessag
 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";
+/**
+ * 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}
+ */
 var Histogram = function Histogram(_ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,

package/dist/cjs/hooks/useFilteredList.js

@@ -23,6 +23,26 @@ var filterList = function filterList(items) {
   });
   return newList;
 };
+
+/**
+ * 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}
+ */
 var useFilteredList = function useFilteredList(items, matcher) {
   var _useState = react.useState(),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/cjs/hooks/usePagination.js

@@ -15,6 +15,26 @@ var makeRange = function makeRange(start, end) {
     return idx + start;
   });
 };
+
+/**
+ * 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),
+ * });
+ * ```
+ */
 var usePagination = function usePagination(_ref) {
   var totalRecords = _ref.totalRecords,
     _ref$currentPage = _ref.currentPage,

package/dist/cjs/hooks/useSelectableList.js

@@ -6,6 +6,35 @@ 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; }
+/**
+ * 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}`);
+ *   },
+ * });
+ * ```
+ */
 var useSelectableList = function useSelectableList(_ref) {
   var items = _ref.items,
     selected = _ref.selected,

package/dist/cjs/i18n/ar.json.js

@@ -36,6 +36,11 @@ var action = {
 	addFilter: "أضف عامل تصفية",
 	addFilterNot: "إضافة لا تصفية"
 };
+var data = {
+	tree: {
+		noItems: "لا توجد عناصر شجرة متوفرة"
+	}
+};
 var ar = {
 	label: label,
 	tree: tree,
@@ -43,11 +48,13 @@ var ar = {
 	json: json,
 	checkList: checkList,
 	histogram: histogram,
-	action: action
+	action: action,
+	data: data
 };
 
 exports.action = action;
 exports.checkList = checkList;
+exports.data = data;
 exports.datagrid = datagrid;
 exports.default = ar;
 exports.histogram = histogram;

package/dist/cjs/i18n/en.json.js

@@ -36,6 +36,11 @@ var action = {
 	addFilter: "Add Filter",
 	addFilterNot: "Add not Filter"
 };
+var data = {
+	tree: {
+		noItems: "No tree items available"
+	}
+};
 var en = {
 	label: label,
 	tree: tree,
@@ -43,11 +48,13 @@ var en = {
 	json: json,
 	checkList: checkList,
 	histogram: histogram,
-	action: action
+	action: action,
+	data: data
 };
 
 exports.action = action;
 exports.checkList = checkList;
+exports.data = data;
 exports.datagrid = datagrid;
 exports.default = en;
 exports.histogram = histogram;

package/dist/cjs/json/JsonViewer.js

@@ -215,6 +215,33 @@ var JsonEntry = function JsonEntry(_ref3) {
     }))]
   });
 };
+
+/**
+ * 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}
+ */
 var JsonViewer = function JsonViewer(_ref5) {
   var className = _ref5.className,
     json = _ref5.json,

package/dist/cjs/pagination/Pagination.js

@@ -6,6 +6,16 @@ var classNames = require('classnames');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+/**
+ * Pagination component to navigate through pages of data.
+ * It displays buttons for navigating to the first, previous, next, and last pages,
+ * as well as buttons for specific page numbers based on the provided ranges.
+ * The component supports a minimal view that shows the current page and total pages.
+ * It uses memoization to optimize rendering performance.
+ *
+ * @param {PaginationProps} props - The properties for the Pagination component.
+ * @returns {JSX.Element} The rendered Pagination component.
+ */
 var Pagination = /*#__PURE__*/react.memo(function (_ref) {
   var page = _ref.page,
     ranges = _ref.ranges,

package/dist/cjs/table/Table.js

@@ -126,7 +126,7 @@ var Table = function Table(_ref) {
       ref: scrollerRef,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         "data-ref": "tableHeader",
-        className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-5",
+        className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: wrapperStart,
           children: [canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -180,7 +180,7 @@ var Table = function Table(_ref) {
           return "__GROUP__" in data ? /*#__PURE__*/jsxRuntime.jsxs("div", {
             ref: measureElement,
             "data-index": index,
-            className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-3", isActiveSticky(index) && "sticky top-8"),
+            className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-1", isActiveSticky(index) && "sticky top-8"),
             role: "none",
             onClick: function onClick() {
               return toggleGroupExpand(data.key);

package/dist/cjs/table/types.js

@@ -27,6 +27,35 @@ var COL_MIN_WIDTH = "3rem";
 var COL_MAX_WIDTH = "64rem";
 var COL_DEFAULT_WIDTH = "12rem";
 
+/**
+ * TableColumn interface defines the structure of a column in a table.
+ * It includes properties for column identification, display options, alignment,
+ * visibility, resizing, sorting, filtering, and rendering.
+ *
+ * @template T - The type of data the column will represent, defaulting to KeyValue.
+ * @property {keyof T | string} id - Unique identifier for the column.
+ * @property {"string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown"} [dataType] - Data type of the column values.
+ * @property {string} [label] - Display label for the column header.
+ * @property {string} [tooltip] - Tooltip text for the column header.
+ * @property {string} [format] - Format string for displaying the column values.
+ * @property {"start" | "center" | "end"} [align] - Text alignment within the column.
+ * @property {"start" | "end"} [locked] - Indicates if the column is locked at the start or end.
+ * @property {boolean} [hidden] - Whether the column is hidden.
+ * @property {boolean} [truncate] - Whether to truncate the text in the column.
+ * @property {boolean} [hideable] - Whether the column can be hidden by the user.
+ * @property {boolean} [resizable] - Whether the column can be resized by the user.
+ * @property {boolean} [sortable] - Whether the column can be sorted.
+ * @property {boolean} [filterable] - Whether the column can be filtered.
+ * @property {AnyObject} [filter] - Filter criteria for the column.
+ * @property {ReactElement[]} [actions] - Array of action elements to be displayed in the column.
+ * @property {AnyObject[]} [filterOptions] - Options for filtering the column.
+ * @property {string | number} [width] - Width of the column.
+ * @property {string | number} [minWidth] - Minimum width of the column.
+ * @property {string | number} [maxWidth] - Maximum width of the column.
+ * @property {KeyValue} [valueMap] - Mapping of values for the column.
+ * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
+ */
+
 exports.COL_DEFAULT_WIDTH = COL_DEFAULT_WIDTH;
 exports.COL_MAX_WIDTH = COL_MAX_WIDTH;
 exports.COL_MIN_WIDTH = COL_MIN_WIDTH;

package/dist/cjs/virtual/Gallery.js

@@ -181,7 +181,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     className: classNames("area-content bg-base overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
+      className: classNames("flex flex-nowrap justify-center gap-2 min-h-full"),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: classNames("box-content", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
         style: {
@@ -200,7 +200,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
             var key = _ref3.key,
               index = _ref3.index;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex justify-center",
+              className: "flex",
               "data-index": index,
               ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
@@ -240,6 +240,39 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
 };
 _VirtualGallery.displayName = "VirtualGallery";
 var GenericMemo = react.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);
 
 exports.VirtualGallery = VirtualGallery;

package/dist/cjs/virtual/List.js

@@ -168,7 +168,7 @@ var _VirtualList = function _VirtualList(_ref) {
     className: classNames("area-content bg-base overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
+      className: classNames("flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classNames("box-content inline-flex flex-nowrap", orientation === "vertical" && "flex-col", orientation === "horizontal" && "flex-row", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
         style: {
@@ -226,6 +226,43 @@ var _VirtualList = function _VirtualList(_ref) {
 };
 _VirtualList.displayName = "VirtualList";
 var GenericMemo = react.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);
 
 exports.VirtualList = VirtualList;

package/dist/esm/checklist/CheckList.js

@@ -72,6 +72,29 @@ var CheckItem = function CheckItem(_ref) {
     }), /*#__PURE__*/jsx(Badge, _objectSpread({}, badge))]
   }));
 };
+
+/**
+ * CheckList component to display a list of selectable items with checkboxes.
+ * It supports selection, deselection, and allows for negative selections.
+ *
+ * @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)}
+ * />
+ * ```
+ */
 var CheckList = function CheckList(_ref2) {
   var _ref2$items = _ref2.items,
     items = _ref2$items === void 0 ? [] : _ref2$items,

package/dist/esm/histogram/Histogram.js

@@ -14,6 +14,34 @@ var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessag
 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";
+/**
+ * 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}
+ */
 var Histogram = function Histogram(_ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,

package/dist/esm/hooks/useFilteredList.js

@@ -23,6 +23,26 @@ var filterList = function filterList(items) {
   });
   return newList;
 };
+
+/**
+ * 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}
+ */
 var useFilteredList = function useFilteredList(items, matcher) {
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/esm/hooks/usePagination.js

@@ -15,6 +15,26 @@ var makeRange = function makeRange(start, end) {
     return idx + start;
   });
 };
+
+/**
+ * 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),
+ * });
+ * ```
+ */
 var usePagination = function usePagination(_ref) {
   var totalRecords = _ref.totalRecords,
     _ref$currentPage = _ref.currentPage,

package/dist/esm/hooks/useSelectableList.js

@@ -6,6 +6,35 @@ import { useRef, useState, useTransition, useEffect, useCallback } from 'react';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * 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}`);
+ *   },
+ * });
+ * ```
+ */
 var useSelectableList = function useSelectableList(_ref) {
   var items = _ref.items,
     selected = _ref.selected,

package/dist/esm/i18n/ar.json.js

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

package/dist/esm/i18n/en.json.js

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