@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.60

package/dist/esm/histogram/Histogram.js

@@ -4,23 +4,50 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { EmptyContent, Icon, ActionLabel, Button, CoreIcons } from '@react-fabric/core';
-import { compareValues, Format } from '@react-fabric/utilities';
+import { compareValues, isColor, Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import classes from './Histogram.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var emptyIcon = "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
+/**
+ * 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,
     total = _ref.total,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color,
+    color = _ref$color === void 0 ? "primary-500" : _ref$color,
     _ref$sortBy = _ref.sortBy,
     sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
     emptyTitle = _ref.emptyTitle,
@@ -39,10 +66,10 @@ var Histogram = function Histogram(_ref) {
     return items.sort(compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
   }, [items, sortBy]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classes.histogram
+    className: "fabric-histogram from-0% to-100%"
   }, aria), {}, {
     style: {
-      "--color": "var(--".concat(color, ")")
+      "--color": isColor(color) ? color : "var(--color-".concat(color, ")")
     },
     children: [sorted.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
       icon: /*#__PURE__*/jsx(Icon, {
@@ -52,16 +79,17 @@ var Histogram = function Histogram(_ref) {
       title: emptyTitle,
       message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("histogram.empty")
     }), sorted === null || sorted === void 0 ? void 0 : sorted.map(function (item) {
+      var _item$total;
       return /*#__PURE__*/jsxs("div", {
         role: "none",
         "data-disabled": item.count === 0 || item.disabled,
-        className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", classes.histoLabel, (item.count === 0 || item.disabled) && "pointer-events-none"),
+        className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", "fabric-histoLabel", (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
         "data-testid": item.id,
         onClick: function onClick(e) {
           return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
         },
         children: [/*#__PURE__*/jsx("div", {
-          className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-0% to-100%", classes.histoBar),
+          className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-linear-to-r rtl:bg-linear-to-l", "fabric-histoBar"),
           style: {
             width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
           }
@@ -70,6 +98,7 @@ var Histogram = function Histogram(_ref) {
           actions: [/*#__PURE__*/jsx(Button, {
             color: "danger",
             size: "sm",
+            stopPropagation: true,
             icon: CoreIcons.funnelMinus,
             "aria-label": "Filter Negative",
             onClick: function onClick() {
@@ -78,6 +107,7 @@ var Histogram = function Histogram(_ref) {
           }, "negative"), /*#__PURE__*/jsx(Button, {
             color: "primary",
             size: "sm",
+            stopPropagation: true,
             icon: CoreIcons.funnelPlus,
             "aria-label": "Filter",
             onClick: function onClick() {
@@ -86,7 +116,7 @@ var Histogram = function Histogram(_ref) {
           }, "positive")],
           children: item.label
         }), /*#__PURE__*/jsx("span", {
-          className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", classes.histoBadge),
+          className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", "fabric-histoBadge"),
           children: Format.number(item.count)
         })]
       }, item.id);

package/dist/esm/hooks/useFilteredList.js

@@ -1,20 +1,34 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { isString, matchString } from '@react-fabric/utilities';
+import { isArray, matchString, isString } 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 matchAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var matcher = arguments.length > 3 ? arguments[3] : 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)) {
+    if (query && isArray(query) && query.length > 0) {
+      if (matchAll && query.every(function (q) {
+        var _item$label;
+        return matchString((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.toString(), q);
+      })) {
+        return newList.push(item);
+      }
+      if (!matchAll && query.some(function (q) {
+        var _item$label2;
+        return matchString((_item$label2 = item.label) !== null && _item$label2 !== void 0 ? _item$label2 : item.toString(), q);
+      })) {
+        return newList.push(item);
+      }
+    } else if (query && isString(query)) {
+      var _item$label3;
+      if (matchString((_item$label3 = item.label) !== null && _item$label3 !== void 0 ? _item$label3 : item.toString(), query)) {
         return newList.push(item);
       }
     } else {
@@ -23,7 +37,69 @@ var filterList = function filterList(items) {
   });
   return newList;
 };
-var useFilteredList = function useFilteredList(items, matcher) {
+
+/**
+ * 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 matchAll - Match all phrases in the query list against the items.
+ * @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}
+ */
+
+/**
+ * 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}
+ */
+
+/**
+ * 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 matchAll - Match all phrases in the query list against the items.
+ * @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}
+ */
+
+function useFilteredList(items, matchAll, matcher) {
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
@@ -37,20 +113,22 @@ var useFilteredList = function useFilteredList(items, matcher) {
     _useTransition2 = _slicedToArray(_useTransition, 2),
     isSearching = _useTransition2[0],
     startTransition = _useTransition2[1];
-  var filterItems = useCallback(function (items, query) {
+  var matchingAll = typeof matchAll === "boolean" ? matchAll : true;
+  var matcherFn = typeof matchAll === "function" ? matchAll : matcher;
+  var filterItems = useCallback(function (items, query, matchingAll) {
     return startTransition(function () {
-      return setFilteredList(filterList(items, query, matcher));
+      return setFilteredList(filterList(items, query, matchingAll, matcherFn));
     });
   }, []);
   useEffect(function () {
-    if (query) filterItems(_items, query);else setFilteredList(items);
-  }, [query, _items]);
+    if (query) filterItems(_items, query, matchingAll);else setFilteredList(items);
+  }, [query, matchingAll, _items]);
   return {
     onSearch: setQuery,
     query: query,
     filteredList: filteredList,
     isSearching: isSearching
   };
-};
+}
 
 export { useFilteredList };

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

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 };

package/dist/esm/json/JsonViewer.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { EmptyContent, Text, Meter, ActionLabel, Button, CoreIcons, Icon, Copy } from '@react-fabric/core';
+import { EmptyContent, Text, Meter, Button, CoreIcons, Icon, Copy } from '@react-fabric/core';
 import { isEmpty, isArray, isObject, isNil, Format, isBoolean, isTrue } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, useState, Fragment } from 'react';
@@ -99,6 +99,11 @@ var JsonEntry = function JsonEntry(_ref3) {
         clamp: 3,
         children: ret
       });
+    } else {
+      ret = /*#__PURE__*/jsx("div", {
+        className: "break-words",
+        children: ret
+      });
     }
     return /*#__PURE__*/jsxs(Fragment, {
       children: [ret, isObject(value) && value._score_ > 0 && /*#__PURE__*/jsx(Meter, {
@@ -120,28 +125,30 @@ var JsonEntry = function JsonEntry(_ref3) {
   }, [filters, path, pathWithoutOrdinal]);
   var labelDisplay = useMemo(function () {
     var _labeler;
-    return /*#__PURE__*/jsx(ActionLabel, {
-      className: "text-dimmed text-sm px-2 flex-1 truncate",
-      actions: !canExpand && canFilter ? [/*#__PURE__*/jsx(Button, {
-        color: "danger",
-        size: "sm",
-        variant: "link",
-        icon: CoreIcons.funnelMinus,
-        "aria-label": "Filter Negative",
-        onClick: function onClick() {
-          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
-        }
-      }, "negative"), /*#__PURE__*/jsx(Button, {
-        color: "primary",
-        size: "sm",
-        variant: "link",
-        icon: CoreIcons.funnelPlus,
-        "aria-label": "Filter",
-        onClick: function onClick() {
-          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
-        }
-      }, "positive")] : [],
-      children: (_labeler = labeler === null || labeler === void 0 ? void 0 : labeler(path)) !== null && _labeler !== void 0 ? _labeler : field
+    return /*#__PURE__*/jsxs("div", {
+      className: classNames("text-dimmed text-sm px-2 flex-1 group", inline ? "truncate" : "break-words"),
+      children: [!canExpand && canFilter && /*#__PURE__*/jsxs("div", {
+        className: "hidden pe-1 group-hover:inline-block",
+        children: [/*#__PURE__*/jsx(Button, {
+          color: "danger",
+          size: "xs",
+          variant: "link",
+          icon: CoreIcons.funnelMinus,
+          "aria-label": "Filter Negative",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
+          }
+        }, "negative"), /*#__PURE__*/jsx(Button, {
+          color: "primary",
+          size: "xs",
+          variant: "link",
+          icon: CoreIcons.funnelPlus,
+          "aria-label": "Filter",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
+          }
+        }, "positive")]
+      }), (_labeler = labeler === null || labeler === void 0 ? void 0 : labeler(path)) !== null && _labeler !== void 0 ? _labeler : field]
     });
   }, [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter]);
   return /*#__PURE__*/jsxs(Fragment, {
@@ -164,11 +171,14 @@ var JsonEntry = function JsonEntry(_ref3) {
           icon: expanded ? CoreIcons.chevronDown : CoreIcons.chevronRight
         }), labelDisplay]
       }), display && /*#__PURE__*/jsxs("div", {
-        className: classNames("px-2", inline && "flex-1"),
+        className: classNames("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),
         children: [canCopy && /*#__PURE__*/jsx(Copy, {
           size: "xs",
           text: actualValue
-        }), display]
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex-1",
+          children: display
+        })]
       })]
     }), !showPropertyTree && !children && /*#__PURE__*/jsxs("div", {
       className: classNames("py-2", inline && "flex flex-nowrap items-center"),
@@ -180,11 +190,14 @@ var JsonEntry = function JsonEntry(_ref3) {
         },
         children: labelDisplay
       }), /*#__PURE__*/jsxs("div", {
-        className: classNames("px-2", inline && "flex-1"),
+        className: classNames("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),
         children: [canCopy && /*#__PURE__*/jsx(Copy, {
           size: "xs",
           text: value
-        }), display]
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex-1",
+          children: display
+        })]
       })]
     }), expanded && (children === null || children === void 0 ? void 0 : children.map(function (item) {
       return /*#__PURE__*/jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
@@ -202,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,
@@ -223,7 +263,7 @@ var JsonViewer = function JsonViewer(_ref5) {
     return reduceObject(json);
   }, [json]);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
-    className: classNames(className, "p-4 bg-alternate"),
+    className: classNames(className, "bg-alternate"),
     children: !isEmpty(json) ? list.map(function (item) {
       return /*#__PURE__*/jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
         copy: copy,

package/dist/esm/pagination/Pagination.js

@@ -6,6 +6,16 @@ import classNames from 'classnames';
 import { memo, useMemo, Fragment } from 'react';
 import { jsxs, jsx } from '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__*/memo(function (_ref) {
   var page = _ref.page,
     ranges = _ref.ranges,

package/dist/esm/table/AddColumn.js

@@ -30,7 +30,7 @@ var AddColumn = function AddColumn(_ref) {
   var columns = _ref.columns,
     onClick = _ref.onClick;
   return /*#__PURE__*/jsx("div", {
-    className: "group font-medium w-6 flex flex-nowrap text-start items-end",
+    className: "group font-medium w-6 flex flex-nowrap text-start items-center",
     children: /*#__PURE__*/jsxs(Dropdown, {
       placement: "bottom-end",
       children: [/*#__PURE__*/jsx(Icon, {

package/dist/esm/table/BodyCell.js

@@ -43,9 +43,10 @@ var BodyCell = function BodyCell(_ref) {
     return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
   }, [widths, column]);
   var content = useMemo(function () {
+    var _column$dataType;
     var value = getByPath(item, column.id.toString());
     if (column.renderer != null) {
-      return column.renderer(item[column.id], item, index);
+      return column.renderer(value, item, index);
     }
     if (column.dataType === "boolean") {
       var _column$valueMap;
@@ -60,7 +61,7 @@ var BodyCell = function BodyCell(_ref) {
         return column.valueMap[value];
       }
     }
-    if (column.dataType === "date") {
+    if (["date", "time", "datetime"].includes((_column$dataType = column.dataType) !== null && _column$dataType !== void 0 ? _column$dataType : "")) {
       return /*#__PURE__*/jsx(DateDisplay, {
         date: value,
         format: column.format
@@ -72,14 +73,14 @@ var BodyCell = function BodyCell(_ref) {
     return value !== null && value !== void 0 ? value : "";
   }, [item, column]);
   return /*#__PURE__*/jsx("div", {
-    className: "overflow-hidden bg-inherit start-0",
+    className: "overflow-hidden bg-inherit start-0 border-e group/table-col",
     style: {
       width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,
       minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : COL_MIN_WIDTH,
       maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : COL_MAX_WIDTH
     },
     children: /*#__PURE__*/jsx("div", {
-      className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
+      className: classNames("px-2 py-1", column.className, column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
       children: content
     })
   });

package/dist/esm/table/BodyRow.js

@@ -55,14 +55,14 @@ var BodyRow = function BodyRow(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       role: "none",
       "data-row": index,
-      className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
+      className: classNames("flex flex-nowrap datatable-row data-hilight:outline-1 -outline-offset-1 outline-primary-500 group/table-row", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
       onClick: function onClick() {
         return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
       },
       children: [/*#__PURE__*/jsxs("div", {
         className: wrapperStart,
         children: [!!canExpand && /*#__PURE__*/jsx("div", {
-          className: classNames("group font-medium w-6 flex flex-nowrap text-start items-center", !canExpand(data) && "pointer-events-none opacity-35"),
+          className: classNames("group font-medium w-6 flex flex-nowrap text-start py-1", !canExpand(data) && "pointer-events-none opacity-35"),
           children: /*#__PURE__*/jsx(Icon, {
             className: "p-1 text-tint-700 hover:text-primary-600",
             icon: expanded ? CoreIcons.collapse : CoreIcons.expand,

package/dist/esm/table/CheckboxCell.js

@@ -30,7 +30,7 @@ var CheckboxCell = function CheckboxCell(_ref) {
   var state = _ref.state,
     _onClick = _ref.onClick;
   return /*#__PURE__*/jsx("div", {
-    className: "group font-medium border-e w-6 flex flex-nowrap text-start items-center",
+    className: "group font-medium border-e w-6 flex flex-nowrap text-start py-1",
     children: /*#__PURE__*/jsx(Icon, {
       icon: state === 2 ? CoreIcons.checkboxInt : state === 1 ? CoreIcons.checkboxOn : CoreIcons.checkboxOff,
       className: "p-1 text-tint-700 hover:text-primary-600",