@react-fabric/data 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/cjs/checklist/CheckList.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var useSelectableList = require('../hooks/useSelectableList.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["id", "allowNegative", "selected", "icon", "label", "isDisabled", "onClick", "badge"],
+  _excluded2 = ["items", "maxCount", "allowNegative", "emptyMessage", "sortItems", "selected", "nonselected", "onChange", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CheckItem = function CheckItem(_ref) {
+  var id = _ref.id,
+    allowNegative = _ref.allowNegative,
+    selected = _ref.selected,
+    icon = _ref.icon,
+    label = _ref.label,
+    isDisabled = _ref.isDisabled,
+    _onClick = _ref.onClick,
+    badge = _ref.badge,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    role: "none",
+    className: "ax-checkList__item",
+    "data-disabled": isDisabled,
+    onClick: function onClick() {
+      return _onClick(id, false);
+    },
+    onContextMenu: function onContextMenu(e) {
+      return [allowNegative && _onClick(id, true), e.preventDefault()];
+    }
+  }, aria), {}, {
+    children: [!allowNegative && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      "data-type": "checkbox",
+      className: "ax-checkList__checkbox",
+      "data-selected": selected === 1,
+      icon: selected ? core.CoreIcons.checkboxInt : core.CoreIcons.checkboxOff
+    }), allowNegative && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        "data-type": "multiple",
+        className: "ax-checkList__checkbox",
+        icon: selected === 1 ? core.CoreIcons.expand : selected === -1 ? core.CoreIcons.collapse : core.CoreIcons.checkboxOff,
+        "data-selected": selected
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ax-checkList__checkbox",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+          "data-type": "positive",
+          onClick: function onClick(e) {
+            return [(_onClick(id, false), e.stopPropagation())];
+          },
+          icon: selected === 1 ? core.CoreIcons.expandActive : core.CoreIcons.expand,
+          "data-selected": selected === 1
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+          "data-type": "negative",
+          onClick: function onClick(e) {
+            return [(_onClick(id, true), e.stopPropagation())];
+          },
+          icon: selected === -1 ? core.CoreIcons.collapseActive : core.CoreIcons.collapse,
+          "data-selected": selected === -1
+        })]
+      })]
+    }), /*#__PURE__*/react.isValidElement(icon) && icon, utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      icon: icon
+    }), /*#__PURE__*/jsxRuntime.jsx("label", {
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread({}, badge))]
+  }));
+};
+var CheckList = function CheckList(_ref2) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$maxCount = _ref2.maxCount,
+    maxCount = _ref2$maxCount === void 0 ? 0 : _ref2$maxCount,
+    allowNegative = _ref2.allowNegative,
+    emptyMessage = _ref2.emptyMessage,
+    _ref2$sortItems = _ref2.sortItems,
+    sortItems = _ref2$sortItems === void 0 ? true : _ref2$sortItems,
+    selected = _ref2.selected,
+    nonselected = _ref2.nonselected,
+    onChange = _ref2.onChange,
+    onClick = _ref2.onClick,
+    aria = _objectWithoutProperties(_ref2, _excluded2);
+  var _useTranslation = reactI18next.useTranslation("data"),
+    t = _useTranslation.t;
+  var _useSelectableList = useSelectableList.useSelectableList({
+      items: items,
+      selected: selected,
+      nonselected: nonselected,
+      onChange: onChange,
+      onClick: onClick
+    }),
+    selection = _useSelectableList.selection,
+    toggleSelection = _useSelectableList.toggleSelection;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1];
+  react.useEffect(function () {
+    setShowMore(false);
+  }, [items]);
+  var listItems = react.useMemo(function () {
+    return _toConsumableArray(items).sort(function (a, b) {
+      if (sortItems && selection[a.id] !== selection[b.id]) {
+        if (selection[a.id] === 1) return -1;
+        if (selection[b.id] === 1) return 1;
+        if (selection[a.id] === -1) return -1;
+        if (selection[b.id] === -1) return 1;
+      }
+      return 0;
+    }).slice(0, !showMore && maxCount > 0 ? maxCount : undefined);
+  }, [items, selection, maxCount, showMore, sortItems]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
+    children: [listItems.map(function (item, index) {
+      return /*#__PURE__*/react.createElement(CheckItem, _objectSpread(_objectSpread({}, item), {}, {
+        key: index,
+        onClick: toggleSelection,
+        allowNegative: allowNegative,
+        selected: selection[item.id]
+      }));
+    }), maxCount > 0 && items.length > maxCount && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "ax-moreLink",
+      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        role: "none",
+        className: "link",
+        onClick: function onClick() {
+          return setShowMore(!showMore);
+        },
+        children: ["...", t("core:action.".concat(showMore ? "less" : "more"))]
+      })
+    }), listItems.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
+      className: "text-sm",
+      message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("checkList.empty")
+    })]
+  }));
+};
+
+exports.CheckList = CheckList;

package/dist/cjs/histogram/Histogram.js

@@ -1,6 +1,8 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
@@ -9,6 +11,9 @@ var reactI18next = require('react-i18next');
 var Histogram_module = require('./Histogram.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
+var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var emptyIcon = "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
 var Histogram = function Histogram(_ref) {
   var _ref$items = _ref.items,
@@ -20,7 +25,8 @@ var Histogram = function Histogram(_ref) {
     sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
     emptyTitle = _ref.emptyTitle,
     emptyMessage = _ref.emptyMessage,
-    _onClick = _ref.onClick;
+    _onClick = _ref.onClick,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation("data"),
     t = _useTranslation.t;
   var maxTotal = react.useMemo(function () {
@@ -32,8 +38,9 @@ var Histogram = function Histogram(_ref) {
   var sorted = react.useMemo(function () {
     return items.sort(utilities.compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
   }, [items, sortBy]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: Histogram_module.histogram,
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: Histogram_module.histogram
+  }, aria), {}, {
     style: {
       "--color": "var(--".concat(color, ")")
     },
@@ -45,10 +52,12 @@ var Histogram = function Histogram(_ref) {
       title: emptyTitle,
       message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("histogram.empty")
     }), sorted === null || sorted === void 0 ? void 0 : sorted.map(function (item) {
+      var _item$total;
       return /*#__PURE__*/jsxRuntime.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", Histogram_module.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", Histogram_module.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()];
         },
@@ -62,6 +71,7 @@ var Histogram = function Histogram(_ref) {
           actions: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
             color: "danger",
             size: "sm",
+            stopPropagation: true,
             icon: core.CoreIcons.funnelMinus,
             "aria-label": "Filter Negative",
             onClick: function onClick() {
@@ -70,6 +80,7 @@ var Histogram = function Histogram(_ref) {
           }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
             color: "primary",
             size: "sm",
+            stopPropagation: true,
             icon: core.CoreIcons.funnelPlus,
             "aria-label": "Filter",
             onClick: function onClick() {
@@ -83,7 +94,7 @@ var Histogram = function Histogram(_ref) {
         })]
       }, item.id);
     })]
-  });
+  }));
 };
 
 exports.Histogram = Histogram;

package/dist/cjs/hooks/usePagination.js

@@ -58,9 +58,12 @@ var usePagination = function usePagination(_ref) {
 
   /** ***************** set page *******************/
   react.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 = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
       className: "text-muted",
@@ -72,7 +75,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/cjs/hooks/useSelectableList.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useSelectableList = function useSelectableList(_ref) {
+  var items = _ref.items,
+    selected = _ref.selected,
+    nonselected = _ref.nonselected,
+    onChange = _ref.onChange,
+    onClick = _ref.onClick;
+  var selectionRef = react.useRef({});
+  var _useState = react.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    selection = _useState2[0],
+    setSelection = _useState2[1];
+  var _useTransition = react.useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    startTransition = _useTransition2[1];
+  react.useEffect(function () {
+    selectionRef.current = items.reduce(function (ret, _ref2) {
+      var _selected$includes, _nonselected$includes;
+      var id = _ref2.id;
+      return _objectSpread(_objectSpread({}, ret), {}, _defineProperty({}, id, selected !== null && selected !== void 0 && (_selected$includes = selected.includes) !== null && _selected$includes !== void 0 && _selected$includes.call(selected, id) ? 1 : nonselected !== null && nonselected !== void 0 && (_nonselected$includes = nonselected.includes) !== null && _nonselected$includes !== void 0 && _nonselected$includes.call(nonselected, id) ? -1 : 0));
+    }, {});
+    setSelection(_objectSpread({}, selectionRef.current));
+  }, [items, selected, nonselected]);
+  var toggleSelection = react.useCallback(function (id) {
+    var isNegative = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var check = isNegative ? -1 : 1;
+    if (selectionRef.current[id] !== check) selectionRef.current[id] = check;else if (selectionRef.current[id] === check) selectionRef.current[id] = 0;
+    var change = [[], []];
+    Object.entries(selectionRef.current).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        id = _ref4[0],
+        select = _ref4[1];
+      return select === 1 ? change[0].push(id) : select === -1 ? change[1].push(id) : undefined;
+    });
+    setSelection(_objectSpread({}, selectionRef.current));
+    startTransition(function () {
+      onClick === null || onClick === void 0 || onClick(id, isNegative);
+      onChange === null || onChange === void 0 || onChange(change[0], change[1]);
+    });
+  }, []);
+  return {
+    selection: selection,
+    toggleSelection: toggleSelection
+  };
+};
+
+exports.useSelectableList = useSelectableList;

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 require('./i18n/index.js');
+var CheckList = require('./checklist/CheckList.js');
 var Histogram = require('./histogram/Histogram.js');
 var JsonViewer = require('./json/JsonViewer.js');
 var Pagination = require('./pagination/Pagination.js');
@@ -13,6 +14,7 @@ var usePagination = require('./hooks/usePagination.js');
 
 
 
+exports.CheckList = CheckList.CheckList;
 exports.Histogram = Histogram.Histogram;
 exports.JsonViewer = JsonViewer.JsonViewer;
 exports.Pagination = Pagination.Pagination;

package/dist/cjs/json/JsonViewer.js

@@ -99,6 +99,11 @@ var JsonEntry = function JsonEntry(_ref3) {
         clamp: 3,
         children: ret
       });
+    } else {
+      ret = /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "break-words",
+        children: ret
+      });
     }
     return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [ret, utilities.isObject(value) && value._score_ > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Meter, {
@@ -120,28 +125,30 @@ var JsonEntry = function JsonEntry(_ref3) {
   }, [filters, path, pathWithoutOrdinal]);
   var labelDisplay = react.useMemo(function () {
     var _labeler;
-    return /*#__PURE__*/jsxRuntime.jsx(core.ActionLabel, {
-      className: "text-dimmed text-sm px-2 flex-1 truncate",
-      actions: !canExpand && canFilter ? [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
-        color: "danger",
-        size: "sm",
-        variant: "link",
-        icon: core.CoreIcons.funnelMinus,
-        "aria-label": "Filter Negative",
-        onClick: function onClick() {
-          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
-        }
-      }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-        color: "primary",
-        size: "sm",
-        variant: "link",
-        icon: core.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__*/jsxRuntime.jsxs("div", {
+      className: classNames("text-dimmed text-sm px-2 flex-1 group", inline ? "truncate" : "break-words"),
+      children: [!canExpand && canFilter && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "hidden pe-1 group-hover:inline-block",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          color: "danger",
+          size: "xs",
+          variant: "link",
+          icon: core.CoreIcons.funnelMinus,
+          "aria-label": "Filter Negative",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
+          }
+        }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          color: "primary",
+          size: "xs",
+          variant: "link",
+          icon: core.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__*/jsxRuntime.jsxs(react.Fragment, {
@@ -223,7 +230,7 @@ var JsonViewer = function JsonViewer(_ref5) {
     return reduceObject(json);
   }, [json]);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
-    className: classNames(className, "p-4 bg-alternate"),
+    className: classNames(className, "bg-alternate"),
     children: !utilities.isEmpty(json) ? list.map(function (item) {
       return /*#__PURE__*/jsxRuntime.jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
         copy: copy,

package/dist/cjs/table/BodyCell.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var date = require('@react-fabric/date');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var Context = require('./Context.js');
@@ -30,25 +32,56 @@ var jsxRuntime = require('react/jsx-runtime');
  */
 
 var BodyCell = function BodyCell(_ref) {
-  var _column$minWidth, _column$maxWidth, _column$renderer, _column$renderer2;
+  var _column$minWidth, _column$maxWidth;
   var column = _ref.column,
-    item = _ref.item;
+    item = _ref.item,
+    index = _ref.index;
   var _useTableContext = Context.useTableContext(),
     widths = _useTableContext.widths;
   var width = react.useMemo(function () {
     var _widths$get;
     return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
   }, [widths, column]);
+  var content = react.useMemo(function () {
+    var _column$dataType;
+    var value = utilities.getByPath(item, column.id.toString());
+    if (column.renderer != null) {
+      return column.renderer(item[column.id], item, index);
+    }
+    if (column.dataType === "boolean") {
+      var _column$valueMap;
+      var map = (_column$valueMap = column.valueMap) !== null && _column$valueMap !== void 0 ? _column$valueMap : {
+        "true": "Yes",
+        "false": "no"
+      };
+      return map["".concat(utilities.isTrue(value) ? "true" : "false")];
+    }
+    if (column.valueMap != null) {
+      if (column.dataType === "string" && value in column.valueMap) {
+        return column.valueMap[value];
+      }
+    }
+    if (["date", "time", "datetime"].includes((_column$dataType = column.dataType) !== null && _column$dataType !== void 0 ? _column$dataType : "")) {
+      return /*#__PURE__*/jsxRuntime.jsx(date.DateDisplay, {
+        date: value,
+        format: column.format
+      });
+    }
+    if (column.dataType === "number") {
+      return utilities.Format.number(value, column.format);
+    }
+    return value !== null && value !== void 0 ? value : "";
+  }, [item, column]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "overflow-hidden bg-inherit start-0",
+    className: "overflow-hidden bg-inherit start-0 border-e",
     style: {
       width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
       minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : types.COL_MIN_WIDTH,
       maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : types.COL_MAX_WIDTH
     },
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
-      children: (_column$renderer = (_column$renderer2 = column.renderer) === null || _column$renderer2 === void 0 ? void 0 : _column$renderer2.call(column, item[column.id], item)) !== null && _column$renderer !== void 0 ? _column$renderer : item[column.id]
+      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/cjs/table/BodyRow.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var classNames = require('classnames');
+var BodyCell = require('./BodyCell.js');
+var CheckboxCell = require('./CheckboxCell.js');
+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 BodyRow = function BodyRow(_ref) {
+  var _state$start, _state$cols, _state$end;
+  var rowKey = _ref.rowKey,
+    index = _ref.index,
+    data = _ref.data,
+    keyProperty = _ref.keyProperty,
+    measureElement = _ref.measureElement,
+    state = _ref.state,
+    hideableColumns = _ref.hideableColumns,
+    wrapperStart = _ref.wrapperStart,
+    wrapperEnd = _ref.wrapperEnd,
+    onRowClick = _ref.onRowClick,
+    checkableRows = _ref.checkableRows,
+    checked = _ref.checked,
+    toggleChecked = _ref.toggleChecked,
+    canExpand = _ref.canExpand,
+    expanded = _ref.expanded,
+    toggleExpand = _ref.toggleExpand,
+    expandRow = _ref.expandRow;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: measureElement,
+    "data-index": index,
+    className: index % 2 ? "bg-even" : "bg-odd",
+    children: [/*#__PURE__*/jsxRuntime.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", 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__*/jsxRuntime.jsxs("div", {
+        className: wrapperStart,
+        children: [!!canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classNames("group font-medium w-6 flex flex-nowrap text-start py-1", !canExpand(data) && "pointer-events-none opacity-35"),
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+            className: "p-1 text-tint-700 hover:text-primary-600",
+            icon: expanded ? core.CoreIcons.collapse : core.CoreIcons.expand,
+            onClick: function onClick(e) {
+              return [keyProperty && toggleExpand(data[keyProperty]), e.stopPropagation()];
+            }
+          })
+        }), checkableRows && keyProperty && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
+          onClick: function onClick() {
+            return toggleChecked(data[keyProperty]);
+          },
+          state: checked
+        }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, ids) {
+          return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
+            column: col,
+            item: data,
+            index: ids
+          }, "".concat(String(rowKey), ":").concat(ids));
+        })]
+      }), (_state$cols = state.cols) === null || _state$cols === void 0 ? void 0 : _state$cols.map(function (col, idc) {
+        return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
+          column: col,
+          item: data,
+          index: idc
+        }, "".concat(String(rowKey), ":").concat(idc));
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: wrapperEnd,
+        children: [(_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.map(function (col, ide) {
+          return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
+            column: col,
+            item: data,
+            index: ide
+          }, "".concat(String(rowKey), ":").concat(ide));
+        }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-6"
+        })]
+      })]
+    }), expanded && expandRow(data)]
+  });
+};
+
+exports.BodyRow = BodyRow;

package/dist/cjs/table/CheckboxCell.js

@@ -30,7 +30,7 @@ var CheckboxCell = function CheckboxCell(_ref) {
   var state = _ref.state,
     _onClick = _ref.onClick;
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(core.Icon, {
       icon: state === 2 ? core.CoreIcons.checkboxInt : state === 1 ? core.CoreIcons.checkboxOn : core.CoreIcons.checkboxOff,
       className: "p-1 text-tint-700 hover:text-primary-600",