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

package/dist/cjs/checklist/CheckList.js

@@ -40,12 +40,12 @@ var CheckItem = function CheckItem(_ref) {
       "data-type": "checkbox",
       className: "ax-checkList__checkbox",
       "data-selected": selected === 1,
-      icon: selected ? core.CoreIcons.checkboxInt : core.CoreIcons.checkboxOff
+      icon: selected ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]"
     }), 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,
+        icon: selected === 1 ? "icon-[mdi--plus-box-outline]" : selected === -1 ? "icon-[mdi--minus-box-outline]" : "icon-[mdi--checkbox-blank-outline]",
         "data-selected": selected
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "ax-checkList__checkbox",
@@ -54,14 +54,14 @@ var CheckItem = function CheckItem(_ref) {
           onClick: function onClick(e) {
             return [(_onClick(id, false), e.stopPropagation())];
           },
-          icon: selected === 1 ? core.CoreIcons.expandActive : core.CoreIcons.expand,
+          icon: selected === 1 ? "icon-[mdi--plus-box]" : "icon-[mdi--plus-box-outline]",
           "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,
+          icon: selected === -1 ? "icon-[mdi--minus-box]" : "icon-[mdi--minus-box-outline]",
           "data-selected": selected === -1
         })]
       })]

package/dist/cjs/histogram/Histogram.js

@@ -99,7 +99,7 @@ var Histogram = function Histogram(_ref) {
             color: "danger",
             size: "sm",
             stopPropagation: true,
-            icon: core.CoreIcons.funnelMinus,
+            icon: "icon-[mdi--filter-minus]",
             "aria-label": "Filter Negative",
             onClick: function onClick() {
               return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id, true);
@@ -108,7 +108,7 @@ var Histogram = function Histogram(_ref) {
             color: "primary",
             size: "sm",
             stopPropagation: true,
-            icon: core.CoreIcons.funnelPlus,
+            icon: "icon-[mdi--filter-plus]",
             "aria-label": "Filter",
             onClick: function onClick() {
               return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);

package/dist/cjs/i18n/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@react-fabric/core');
-var ar = require('./ar.json.js');
-var en = require('./en.json.js');
+var data$1 = require('./ar/data.json.js');
+var data = require('./en/data.json.js');
 
 /*
  * React Fabric
@@ -28,6 +28,6 @@ var en = require('./en.json.js');
  */
 
 core.addTranslationBundle("data", {
-  en: en.default,
-  ar: ar.default
+  en: data.default,
+  ar: data$1.default
 });

package/dist/cjs/index.js

@@ -5,6 +5,7 @@ var CheckList = require('./checklist/CheckList.js');
 var Histogram = require('./histogram/Histogram.js');
 var JsonViewer = require('./json/JsonViewer.js');
 var Pagination = require('./pagination/Pagination.js');
+var HtmlTable = require('./table/HtmlTable.js');
 var Table = require('./table/Table.js');
 var TreePanel = require('./tree/TreePanel.js');
 var Gallery = require('./virtual/Gallery.js');
@@ -18,6 +19,7 @@ exports.CheckList = CheckList.CheckList;
 exports.Histogram = Histogram.Histogram;
 exports.JsonViewer = JsonViewer.JsonViewer;
 exports.Pagination = Pagination.Pagination;
+exports.HtmlTable = HtmlTable.HtmlTable;
 exports.Table = Table.Table;
 exports.TreePanel = TreePanel.TreePanel;
 exports.VirtualGallery = Gallery.VirtualGallery;

package/dist/cjs/json/JsonViewer.js

@@ -133,7 +133,7 @@ var JsonEntry = function JsonEntry(_ref3) {
           color: "danger",
           size: "xs",
           variant: "link",
-          icon: core.CoreIcons.funnelMinus,
+          icon: "icon-[mdi--filter-minus]",
           "aria-label": "Filter Negative",
           onClick: function onClick() {
             return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
@@ -142,7 +142,7 @@ var JsonEntry = function JsonEntry(_ref3) {
           color: "primary",
           size: "xs",
           variant: "link",
-          icon: core.CoreIcons.funnelPlus,
+          icon: "icon-[mdi--filter-plus]",
           "aria-label": "Filter",
           onClick: function onClick() {
             return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
@@ -168,7 +168,7 @@ var JsonEntry = function JsonEntry(_ref3) {
         },
         children: [canExpand && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
           rtlFlip: true,
-          icon: expanded ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight
+          icon: expanded ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]"
         }), labelDisplay]
       }), display && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classNames("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),

package/dist/cjs/pagination/Pagination.js

@@ -33,7 +33,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), mid && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -44,7 +44,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), last && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -55,7 +55,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       })]
@@ -67,18 +67,18 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(0);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.chevronsLeft,
+        icon: "icon-[mdi--chevron-double-left]",
         rtlFlip: true
       })
     }), /*#__PURE__*/jsxRuntime.jsx("button", {
       onClick: function onClick() {
         return onPageChange(page - 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.chevronLeft,
+        icon: "icon-[mdi--chevron-left]",
         rtlFlip: true
       })
     }), !minimal && pageBody, minimal && /*#__PURE__*/jsxRuntime.jsxs("label", {
@@ -88,18 +88,18 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(page + 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.chevronRight,
+        icon: "icon-[mdi--chevron-right]",
         rtlFlip: true
       })
     }), /*#__PURE__*/jsxRuntime.jsx("button", {
       onClick: function onClick() {
         return onPageChange(totalPages - 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.chevronsRight,
+        icon: "icon-[mdi--chevron-double-right]",
         rtlFlip: true
       })
     })]

package/dist/cjs/table/AddColumn.js

@@ -34,7 +34,7 @@ var AddColumn = function AddColumn(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
       placement: "bottom-end",
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.insert,
+        icon: "icon-[mdi--plus-circle-outline]",
         className: "p-1 rounded-t rounded-b-none hover:outline"
       }), /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
         className: "text-sm",
@@ -45,7 +45,7 @@ var AddColumn = function AddColumn(_ref) {
             id: String(col.id),
             "data-dropdown-dismiss": "false",
             label: "".concat((_col$label = col.label) !== null && _col$label !== void 0 ? _col$label : String(col.id)),
-            icon: !col.hidden ? core.CoreIcons.tick : ""
+            icon: !col.hidden ? "icon-[mdi--check]" : ""
           }, String(col.id));
         })
       })]

package/dist/cjs/table/BodyCell.js

@@ -43,7 +43,7 @@ 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 = react.useMemo(function () {
-    var _column$dataType;
+    var _column$dataType2;
     var value = utilities.getByPath(item, column.id.toString());
     if (column.renderer != null) {
       return column.renderer(value, item, index);
@@ -52,16 +52,17 @@ var BodyCell = function BodyCell(_ref) {
       var _column$valueMap;
       var map = (_column$valueMap = column.valueMap) !== null && _column$valueMap !== void 0 ? _column$valueMap : {
         "true": "Yes",
-        "false": "no"
+        "false": "No"
       };
       return map["".concat(utilities.isTrue(value) ? "true" : "false")];
     }
     if (column.valueMap != null) {
-      if (column.dataType === "string" && value in column.valueMap) {
+      var _column$dataType;
+      if (["number", "string"].includes((_column$dataType = column.dataType) !== null && _column$dataType !== void 0 ? _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 : "")) {
+    if (["date", "time", "datetime"].includes((_column$dataType2 = column.dataType) !== null && _column$dataType2 !== void 0 ? _column$dataType2 : "")) {
       return /*#__PURE__*/jsxRuntime.jsx(date.DateDisplay, {
         date: value,
         format: column.format
@@ -70,6 +71,12 @@ var BodyCell = function BodyCell(_ref) {
     if (column.dataType === "number") {
       return utilities.Format.number(value, column.format);
     }
+    if (utilities.isObject(value)) {
+      return JSON.stringify(value);
+    }
+    if (utilities.isArray(value)) {
+      return value.join(", ");
+    }
     return value !== null && value !== void 0 ? value : "";
   }, [item, column]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/table/BodyRow.js

@@ -1,9 +1,9 @@
 'use strict';
 
+var core = require('@react-fabric/core');
 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');
 
 /*
@@ -65,7 +65,7 @@ var BodyRow = function BodyRow(_ref) {
           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,
+            icon: expanded ? "icon-[mdi--minus-box]" : "icon-[mdi--plus-box]",
             onClick: function onClick(e) {
               return [keyProperty && toggleExpand(data[keyProperty]), e.stopPropagation()];
             }

package/dist/cjs/table/CheckboxCell.js

@@ -32,7 +32,7 @@ var CheckboxCell = function CheckboxCell(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     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,
+      icon: state === 2 ? "icon-[mdi--checkbox-intermediate]" : state === 1 ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]",
       className: "p-1 text-tint-700 hover:text-primary-600",
       onClick: function onClick(e) {
         return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(), e.stopPropagation()];

package/dist/cjs/table/HeaderCell.js

@@ -50,7 +50,7 @@ var HeaderCell = function HeaderCell(_ref) {
     if (filterable && (dataType !== null && dataType !== void 0 ? dataType : filterOptions)) {
       ret.push( /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
         label: "Filter",
-        icon: filter ? core.CoreIcons.tick : "",
+        icon: filter ? "icon-[mdi--check]" : "",
         trigger: "click",
         children: /*#__PURE__*/jsxRuntime.jsx(ColumnFilters.ColumnFilters, {
           type: dataType,
@@ -65,13 +65,13 @@ var HeaderCell = function HeaderCell(_ref) {
     if (sortable) {
       ret.push( /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
         label: "Sort ascending",
-        icon: core.CoreIcons.sortAsc,
+        icon: "icon-[mdi--sort-ascending]",
         onClick: function onClick() {
           return handleSort("asc");
         }
       }, "sort-asc"), /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
         label: "Sort descending",
-        icon: core.CoreIcons.sortDesc,
+        icon: "icon-[mdi--sort-descending]",
         onClick: function onClick() {
           return handleSort("desc");
         }
@@ -136,7 +136,7 @@ var HeaderCell = function HeaderCell(_ref) {
       variant: "link",
       "aria-label": "clear filter",
       stopPropagation: true,
-      icon: core.CoreIcons.funnelRemove,
+      icon: "icon-[mdi--filter-remove]",
       onClick: function onClick() {
         return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id);
       }

package/dist/cjs/table/HtmlTable.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var usePagination = require('../hooks/usePagination.js');
+var Pagination = require('../pagination/Pagination.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 HtmlTable = function HtmlTable(_ref) {
+  var data = _ref.data,
+    columns = _ref.columns,
+    _ref$paginationSize = _ref.paginationSize,
+    paginationSize = _ref$paginationSize === void 0 ? 25 : _ref$paginationSize,
+    className = _ref.className;
+  var paginator = usePagination.usePagination({
+    totalRecords: data.length,
+    perPage: paginationSize
+  });
+  var startIndex = react.useMemo(function () {
+    return paginator.page * paginationSize;
+  }, [paginator.page, paginationSize]);
+  var dataPage = react.useMemo(function () {
+    return paginationSize > 0 ? data.slice(startIndex, startIndex + paginationSize) : data;
+  }, [data, paginationSize, startIndex]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: className,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("table", {
+      className: "table-fixed border-spacing-1 border-separate w-full text-sm",
+      children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
+        className: "sticky top-0 z-1",
+        children: /*#__PURE__*/jsxRuntime.jsx("tr", {
+          children: columns.map(function (col, idx) {
+            var _ref2, _col$headRenderer;
+            return /*#__PURE__*/jsxRuntime.jsx("th", {
+              className: "text-start truncate bg-accent-100 px-2 py-1 font-medium text-accent-800",
+              style: {
+                width: col.width,
+                maxWidth: col.maxWidth
+              },
+              children: (_ref2 = (_col$headRenderer = col.headRenderer) !== null && _col$headRenderer !== void 0 ? _col$headRenderer : col.label) !== null && _ref2 !== void 0 ? _ref2 : " "
+            }, idx);
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("tbody", {
+        className: "bg-alternate",
+        children: dataPage.map(function (row, idx) {
+          return /*#__PURE__*/jsxRuntime.jsx("tr", {
+            children: columns.map(function (col, cidx) {
+              var _col$renderer, _col$renderer2;
+              return /*#__PURE__*/jsxRuntime.jsx("td", {
+                className: classNames("px-2 py-1 truncate", col.align === "center" && "text-center", col.align === "end" && "text-end", col.className),
+                style: {
+                  width: col.width,
+                  maxWidth: col.maxWidth
+                },
+                children: (_col$renderer = (_col$renderer2 = col.renderer) === null || _col$renderer2 === void 0 ? void 0 : _col$renderer2.call(col, utilities.getByPath(row, col.id.toString()), row, startIndex + idx)) !== null && _col$renderer !== void 0 ? _col$renderer : utilities.getByPath(row, col.id.toString())
+              }, "".concat(idx, "-").concat(cidx));
+            })
+          }, idx);
+        })
+      })]
+    }), paginationSize > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
+      flex: true,
+      justify: "end",
+      className: "px-2 py-1 sticky bottom-0 bg-tint-50",
+      children: /*#__PURE__*/jsxRuntime.jsx(Pagination.Pagination, _objectSpread({
+        minimal: true
+      }, paginator))
+    })]
+  });
+};
+
+exports.HtmlTable = HtmlTable;

package/dist/cjs/table/Table.js

@@ -168,7 +168,7 @@ var Table = function Table(_ref) {
             })
           })]
         })]
-      }), loading && /*#__PURE__*/jsxRuntime.jsx(core.Loading, {}), data.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), loading && /*#__PURE__*/jsxRuntime.jsx(core.LoadingLine, {}), data.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "area-content flex flex-col flex-nowrap min-h-full",
         style: {
           height: totalSize()
@@ -183,26 +183,29 @@ var Table = function Table(_ref) {
           var index = _ref2.index,
             key = _ref2.key;
           var data = getData(index);
-          return "__GROUP__" in data ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+          return "__GROUP__" in data ? /*#__PURE__*/jsxRuntime.jsx("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-2", isActiveSticky(index) && "sticky top-8"),
+            className: classNames("text-md bg-base border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2", isActiveSticky(index) && "sticky top-8"),
             role: "none",
             onClick: function onClick() {
               return toggleGroupExpand(data.key);
             },
-            children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-              rtlFlip: true,
-              icon: data.open ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight
-            }), (_groupRenderer = groupRenderer === null || groupRenderer === void 0 ? void 0 : groupRenderer(data)) !== null && _groupRenderer !== void 0 ? _groupRenderer : /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex gap-1 items-center",
-              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                children: data.key
-              }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-                className: "text-sm",
-                children: ["(", data.itemCount, ")"]
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: classNames("px-2 py-1 flex items-center gap-1 z-2 sticky start-0"),
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+                rtlFlip: true,
+                icon: data.open ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]"
+              }), (_groupRenderer = groupRenderer === null || groupRenderer === void 0 ? void 0 : groupRenderer(data)) !== null && _groupRenderer !== void 0 ? _groupRenderer : /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex gap-1 items-center",
+                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                  children: data.key
+                }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+                  className: "text-sm",
+                  children: ["(", data.itemCount, ")"]
+                })]
               })]
-            })]
+            })
           }, key) : /*#__PURE__*/jsxRuntime.jsx(BodyRow.BodyRow, {
             rowKey: key.toString(),
             index: index,

package/dist/cjs/tree/TreeNode.js

@@ -57,7 +57,7 @@ var TreeNode = function TreeNode(_ref) {
     };
   }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
   var canCheck = react.useMemo(function () {
-    return checkable === true || checkable === "leafOnly" && node.leaf;
+    return utilities.isTrue(checkable) || checkable === "leafOnly" && node.leaf;
   }, [node.leaf, checkable]);
   var canSelect = react.useMemo(function () {
     return !node.disabled && (selectable === true || selectable === "leafOnly" && node.leaf);
@@ -72,8 +72,8 @@ var TreeNode = function TreeNode(_ref) {
     children: [filler, node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.spinner,
-        className: "animate-spin text-muted"
+        icon: "icon-[svg-spinners--eclipse]",
+        className: "text-muted"
       })
     }), !node.leaf && !node.childFiltered && !node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial w-6",
@@ -91,7 +91,7 @@ var TreeNode = function TreeNode(_ref) {
         onClick: function onClick() {
           return !node.disabled && onChecked(node.id);
         },
-        icon: node.checked === 2 ? core.CoreIcons.checkboxInt : node.checked === 1 ? core.CoreIcons.checkboxOn : core.CoreIcons.checkboxOff,
+        icon: node.checked === 2 ? "icon-[mdi--checkbox-intermediate]" : node.checked === 1 ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]",
         className: classNames(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")
       })
     }), !node.empty && /*#__PURE__*/jsxRuntime.jsxs("div", {

package/dist/cjs/tree/TreePanel.js

@@ -7,7 +7,6 @@ var form = require('@react-fabric/form');
 var reactVirtual = require('@tanstack/react-virtual');
 var react = require('react');
 var TreeNode = require('./TreeNode.js');
-var types = require('./types.js');
 var useTree = require('./useTree.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -81,10 +80,10 @@ var TreePanel = function TreePanel(_ref) {
   });
   var virtualItems = virtualizer.getVirtualItems();
   var expanders = react.useMemo(function () {
-    if (expander === "caret") return [core.CoreIcons.caretRight, core.CoreIcons.caretDown];
-    if (expander === "chevron") return [core.CoreIcons.chevronRight, core.CoreIcons.chevronDown];
-    if (expander === "folder") return [core.CoreIcons.folderClosed, core.CoreIcons.folderOpen];
-    return [core.CoreIcons.expand, core.CoreIcons.collapse];
+    if (expander === "caret") return ["icon-[mdi--menu-right]", "icon-[mdi--menu-down]"];
+    if (expander === "chevron") return ["icon-[mdi--chevron-right]", "icon-[mdi--chevron-down]"];
+    if (expander === "folder") return ["icon-[mdi--folder-outline]", "icon-[mdi--folder-open-outline]"];
+    return ["icon-[mdi--plus-box-outline]", "icon-[mdi--minus-box-outline]"];
   }, [expander]);
   react.useImperativeHandle(ref, function () {
     return {
@@ -118,7 +117,7 @@ var TreePanel = function TreePanel(_ref) {
         placeholder: filterPlaceholder,
         noBorder: true,
         decorateStart: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-          icon: core.CoreIcons.filter,
+          icon: "icon-[mdi--filter-variant]",
           className: "p-1"
         })
       }), /*#__PURE__*/jsxRuntime.jsxs(core.ButtonGroup, {
@@ -127,12 +126,12 @@ var TreePanel = function TreePanel(_ref) {
         children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
           size: "sm",
           "aria-label": "expand all",
-          icon: types.iconExpandAll,
+          icon: "icon-[mdi--arrow-expand-vertical]",
           onClick: expandAll
         }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
           size: "sm",
           "aria-label": "collapse all",
-          icon: types.iconCollapseAll,
+          icon: "icon-[mdi--arrow-collapse-vertical]",
           onClick: collapseAll
         })]
       })]

package/dist/cjs/virtual/Scroller.js

@@ -43,7 +43,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll to top",
       icon: {
-        icon: vertical ? core.CoreIcons.chevronsUp : core.CoreIcons.chevronsLeft,
+        icon: vertical ? "icon-[mdi--chevron-double-up]" : "icon-[mdi--chevron-double-left]",
         rtlFlip: true
       },
       disabled: (scrollActive & 2) === 0,
@@ -53,7 +53,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll up",
       icon: {
-        icon: vertical ? core.CoreIcons.chevronUp : core.CoreIcons.chevronLeft,
+        icon: vertical ? "icon-[mdi--chevron-up]" : "icon-[mdi--chevron-left]",
         rtlFlip: true
       },
       disabled: (scrollActive & 2) === 0,
@@ -63,7 +63,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll down",
       icon: {
-        icon: vertical ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight,
+        icon: vertical ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]",
         rtlFlip: true
       },
       disabled: scrollActive % 2 === 0,
@@ -73,7 +73,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll to bottom",
       icon: {
-        icon: vertical ? core.CoreIcons.chevronsDown : core.CoreIcons.chevronsRight,
+        icon: vertical ? "icon-[mdi--chevron-double-down]" : "icon-[mdi--chevron-double-right]",
         rtlFlip: true
       },
       disabled: scrollActive % 2 === 0,

package/dist/esm/checklist/CheckList.js

@@ -4,7 +4,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { EmptyContent, Icon, CoreIcons, Badge } from '@react-fabric/core';
+import { EmptyContent, Icon, Badge } from '@react-fabric/core';
 import { isString } from '@react-fabric/utilities';
 import { useState, useEffect, useMemo, createElement, Fragment, isValidElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -40,12 +40,12 @@ var CheckItem = function CheckItem(_ref) {
       "data-type": "checkbox",
       className: "ax-checkList__checkbox",
       "data-selected": selected === 1,
-      icon: selected ? CoreIcons.checkboxInt : CoreIcons.checkboxOff
+      icon: selected ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]"
     }), allowNegative && /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Icon, {
         "data-type": "multiple",
         className: "ax-checkList__checkbox",
-        icon: selected === 1 ? CoreIcons.expand : selected === -1 ? CoreIcons.collapse : CoreIcons.checkboxOff,
+        icon: selected === 1 ? "icon-[mdi--plus-box-outline]" : selected === -1 ? "icon-[mdi--minus-box-outline]" : "icon-[mdi--checkbox-blank-outline]",
         "data-selected": selected
       }), /*#__PURE__*/jsxs("div", {
         className: "ax-checkList__checkbox",
@@ -54,14 +54,14 @@ var CheckItem = function CheckItem(_ref) {
           onClick: function onClick(e) {
             return [(_onClick(id, false), e.stopPropagation())];
           },
-          icon: selected === 1 ? CoreIcons.expandActive : CoreIcons.expand,
+          icon: selected === 1 ? "icon-[mdi--plus-box]" : "icon-[mdi--plus-box-outline]",
           "data-selected": selected === 1
         }), /*#__PURE__*/jsx(Icon, {
           "data-type": "negative",
           onClick: function onClick(e) {
             return [(_onClick(id, true), e.stopPropagation())];
           },
-          icon: selected === -1 ? CoreIcons.collapseActive : CoreIcons.collapse,
+          icon: selected === -1 ? "icon-[mdi--minus-box]" : "icon-[mdi--minus-box-outline]",
           "data-selected": selected === -1
         })]
       })]

package/dist/esm/histogram/Histogram.js

@@ -3,7 +3,7 @@
 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 { EmptyContent, Icon, ActionLabel, Button } from '@react-fabric/core';
 import { compareValues, isColor, Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
@@ -99,7 +99,7 @@ var Histogram = function Histogram(_ref) {
             color: "danger",
             size: "sm",
             stopPropagation: true,
-            icon: CoreIcons.funnelMinus,
+            icon: "icon-[mdi--filter-minus]",
             "aria-label": "Filter Negative",
             onClick: function onClick() {
               return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id, true);
@@ -108,7 +108,7 @@ var Histogram = function Histogram(_ref) {
             color: "primary",
             size: "sm",
             stopPropagation: true,
-            icon: CoreIcons.funnelPlus,
+            icon: "icon-[mdi--filter-plus]",
             "aria-label": "Filter",
             onClick: function onClick() {
               return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);