@react-fabric/data 1.0.0-beta.0 → 1.0.0-beta.11

package/dist/esm/table/Table.js

@@ -1,132 +1,209 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useMemo, useCallback } from 'react';
-import { BodyCell } from './BodyCell.js';
+import { useDebounce, Loading, EmptyContent } from '@react-fabric/core';
+import { debounce } from '@react-fabric/utilities';
+import { useRef, useMemo, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AddColumn } from './AddColumn.js';
+import { BodyRow } from './BodyRow.js';
+import { CheckboxCell } from './CheckboxCell.js';
+import { TableProvider } from './Context.js';
+import { EmptyCell } from './EmptyCell.js';
 import { HeaderCell } from './HeaderCell.js';
 import { useTableColumns } from './useTableColumns.js';
 import { useVirtualTable } from './useVirtualTable.js';
-import classNames from 'classnames';
 import { jsx, jsxs } from '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 Table = function Table(_ref) {
-  var _columnMap$start, _columnMap$cols, _columnMap$end, _items$, _columnMap$start3, _columnMap$cols3, _columnMap$end3, _columnMap$start4, _columnMap$cols4, _columnMap$end4;
-  var data = _ref.data,
-    columns = _ref.columns;
+  var _state$start, _state$cols, _state$end, _items$, _state$start2, _state$cols2, _state$end2;
+  var ref = _ref.ref,
+    data = _ref.data,
+    columns = _ref.columns,
+    keyProperty = _ref.keyProperty,
+    checkableRows = _ref.checkableRows,
+    initialScroll = _ref.initialScroll,
+    hideableColumns = _ref.hideableColumns,
+    sort = _ref.sort,
+    loading = _ref.loading,
+    emptyDisplay = _ref.emptyDisplay,
+    canExpand = _ref.canExpand,
+    children = _ref.children,
+    onSort = _ref.onSort,
+    onScroll = _ref.onScroll,
+    onRowClick = _ref.onRowClick,
+    onCheckedChanged = _ref.onCheckedChanged;
+  var _useTranslation = useTranslation("data"),
+    t = _useTranslation.t;
+  var fireCheckChanged = useDebounce(function (checkedIds) {
+    return onCheckedChanged === null || onCheckedChanged === void 0 ? void 0 : onCheckedChanged(checkedIds);
+  }, []);
   var _useTableColumns = useTableColumns(columns),
-    columnMap = _useTableColumns.columnMap;
-  var _useVirtualTable = useVirtualTable(data),
+    state = _useTableColumns.state,
+    onHide = _useTableColumns.onHide;
+  var _useVirtualTable = useVirtualTable(data, keyProperty, fireCheckChanged),
     scrollerRef = _useVirtualTable.scrollerRef,
     items = _useVirtualTable.items,
+    top = _useVirtualTable.top,
+    checkState = _useVirtualTable.checkState,
+    virtualizer = _useVirtualTable.virtualizer,
+    toggleExpand = _useVirtualTable.toggleExpand,
+    toggleChecked = _useVirtualTable.toggleChecked,
+    toggleAllChecked = _useVirtualTable.toggleAllChecked,
     getData = _useVirtualTable.getData,
     totalSize = _useVirtualTable.totalSize,
     measureElement = _useVirtualTable.measureElement;
+  var refBody = useRef(null);
   var wrapperStart = useMemo(function () {
     return "bg-inherit sticky start-0 flex flex-nowrap z-1";
   }, []);
   var wrapperEnd = useMemo(function () {
     return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
   }, []);
-  var emptyCol = useCallback(function (col, idc) {
-    var _col$width, _col$minWidth, _col$maxWidth;
-    return /*#__PURE__*/jsx("div", {
-      className: "overflow-hidden border-e",
-      style: {
-        width: (_col$width = col.width) !== null && _col$width !== void 0 ? _col$width : "12rem",
-        minWidth: (_col$minWidth = col.minWidth) !== null && _col$minWidth !== void 0 ? _col$minWidth : "2rem",
-        maxWidth: (_col$maxWidth = col.maxWidth) !== null && _col$maxWidth !== void 0 ? _col$maxWidth : "32rem"
+  useLayoutEffect(function () {
+    setTimeout(function () {
+      initialScroll && virtualizer.scrollToIndex(initialScroll, {
+        align: "start"
+      });
+    }, 100);
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      scrollTo: function scrollTo(row) {
+        virtualizer.scrollToIndex(row, {
+          align: "start"
+        });
+      },
+      hilight: function hilight(row) {
+        var _scrollerRef$current;
+        (_scrollerRef$current = scrollerRef.current) === null || _scrollerRef$current === void 0 || (_scrollerRef$current = _scrollerRef$current.querySelector(".hilight")) === null || _scrollerRef$current === void 0 || _scrollerRef$current.classList.remove("hilight", "ring-1");
+        virtualizer.scrollToIndex(Math.floor(row), {
+          align: "start"
+        });
+        setTimeout(function () {
+          var _scrollerRef$current2;
+          (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector("[data-index=\"".concat(row, "\"]"))) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.add("hilight", "ring-1");
+        }, 100);
+      },
+      unhilight: function unhilight() {
+        var _scrollerRef$current3;
+        (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector(".hilight")) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.remove("hilight", "ring-1");
       }
-    }, "blank:".concat(idc));
+    };
   }, []);
-  return /*#__PURE__*/jsxs("div", {
-    className: "grid area-content overflow-auto relative",
-    style: {
-      gridTemplate: "\"head\" auto \"content\" 1fr \"foot\" auto/1fr"
-    },
-    ref: scrollerRef,
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
-      children: [/*#__PURE__*/jsx("div", {
-        className: wrapperStart,
-        children: (_columnMap$start = columnMap.start) === null || _columnMap$start === void 0 ? void 0 : _columnMap$start.map(function (col, idx) {
-          return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
-        })
-      }), (_columnMap$cols = columnMap.cols) === null || _columnMap$cols === void 0 ? void 0 : _columnMap$cols.map(function (col, idx) {
-        return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
-      }), /*#__PURE__*/jsx("div", {
-        className: wrapperEnd,
-        children: (_columnMap$end = columnMap.end) === null || _columnMap$end === void 0 ? void 0 : _columnMap$end.map(function (col, idx) {
-          return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
-        })
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: "area-content flex flex-col flex-nowrap",
+  useEffect(function () {
+    var handle = debounce(function (top) {
+      onScroll === null || onScroll === void 0 || onScroll(top !== null && top !== void 0 ? top : 0);
+    });
+    handle(top);
+    return function () {
+      handle.cancel();
+    };
+  }, [top]);
+  return /*#__PURE__*/jsx(TableProvider, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: "grid area-content overflow-auto relative",
       style: {
-        height: totalSize()
+        gridTemplate: "\"head\" auto \"loader\" auto \"content\" 1fr \"foot\" auto/1fr"
       },
-      children: [/*#__PURE__*/jsx("div", {
+      ref: scrollerRef,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: wrapperStart,
+          children: [canExpand && /*#__PURE__*/jsx("div", {
+            className: "w-6"
+          }), checkableRows && /*#__PURE__*/jsx(CheckboxCell, {
+            state: checkState.allChecked,
+            onClick: toggleAllChecked
+          }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, idx) {
+            return /*#__PURE__*/jsx(HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
+              sort: sort,
+              onSort: onSort
+            }), idx);
+          })]
+        }), (_state$cols = state.cols) === null || _state$cols === void 0 ? void 0 : _state$cols.map(function (col, idx) {
+          return /*#__PURE__*/jsx(HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
+            sort: sort,
+            onSort: onSort
+          }), idx);
+        }), /*#__PURE__*/jsxs("div", {
+          className: wrapperEnd,
+          children: [(_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.map(function (col, idx) {
+            return /*#__PURE__*/jsx(HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
+              sort: sort,
+              onSort: onSort
+            }), idx);
+          }), hideableColumns && /*#__PURE__*/jsx(AddColumn, {
+            onClick: onHide,
+            columns: state.columns.filter(function (col) {
+              return col.hideable !== false;
+            })
+          })]
+        })]
+      }), loading && /*#__PURE__*/jsx(Loading, {}), data.length > 0 && /*#__PURE__*/jsxs("div", {
+        className: "area-content flex flex-col flex-nowrap",
         style: {
-          height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
-        }
-      }), items.map(function (_ref2) {
-        var _columnMap$start2, _columnMap$cols2, _columnMap$end2;
-        var index = _ref2.index,
-          key = _ref2.key;
-        return /*#__PURE__*/jsxs("div", {
-          className: classNames("flex flex-nowrap", index % 2 ? "bg-even" : "bg-odd"),
-          "data-index": index,
-          ref: measureElement,
-          children: [/*#__PURE__*/jsx("div", {
+          height: totalSize()
+        },
+        ref: refBody,
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
+          }
+        }), items.map(function (_ref2) {
+          var index = _ref2.index,
+            key = _ref2.key;
+          var data = getData(index);
+          return /*#__PURE__*/jsx(BodyRow, {
+            rowKey: key,
+            index: index,
+            checkableRows: checkableRows,
+            checked: keyProperty && checkState.checked.includes(data[keyProperty]) ? 1 : 0,
+            expanded: !!keyProperty && checkState.expanded.includes(data[keyProperty]),
+            data: data,
+            hideableColumns: hideableColumns,
+            keyProperty: keyProperty,
+            measureElement: measureElement,
+            onRowClick: onRowClick,
+            state: state,
+            canExpand: canExpand,
+            toggleExpand: toggleExpand,
+            expandRow: children,
+            toggleChecked: toggleChecked,
+            wrapperEnd: wrapperEnd,
+            wrapperStart: wrapperStart
+          }, key);
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex-1 flex flex-nowrap",
+          children: [/*#__PURE__*/jsxs("div", {
             className: wrapperStart,
-            children: (_columnMap$start2 = columnMap.start) === null || _columnMap$start2 === void 0 ? void 0 : _columnMap$start2.map(function (col, ids) {
-              return /*#__PURE__*/jsx(BodyCell, {
-                column: col,
-                item: getData(index)
-              }, "".concat(key, ":").concat(ids));
-            })
-          }), (_columnMap$cols2 = columnMap.cols) === null || _columnMap$cols2 === void 0 ? void 0 : _columnMap$cols2.map(function (col, idc) {
-            return /*#__PURE__*/jsx(BodyCell, {
-              column: col,
-              item: getData(index)
-            }, "".concat(key, ":").concat(idc));
-          }), /*#__PURE__*/jsx("div", {
+            children: [canExpand && /*#__PURE__*/jsx("div", {
+              className: "w-6"
+            }), checkableRows && /*#__PURE__*/jsx("div", {
+              className: "w-6"
+            }), (_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.map(function (col) {
+              return /*#__PURE__*/jsx(EmptyCell, _objectSpread({}, col), String(col.id));
+            })]
+          }), (_state$cols2 = state.cols) === null || _state$cols2 === void 0 ? void 0 : _state$cols2.map(function (col) {
+            return /*#__PURE__*/jsx(EmptyCell, _objectSpread({}, col), String(col.id));
+          }), /*#__PURE__*/jsxs("div", {
             className: wrapperEnd,
-            children: (_columnMap$end2 = columnMap.end) === null || _columnMap$end2 === void 0 ? void 0 : _columnMap$end2.map(function (col, ide) {
-              return /*#__PURE__*/jsx(BodyCell, {
-                column: col,
-                item: getData(index)
-              }, "".concat(key, ":").concat(ide));
-            })
+            children: [(_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.map(function (col) {
+              return /*#__PURE__*/jsx(EmptyCell, _objectSpread({}, col), String(col.id));
+            }), hideableColumns && /*#__PURE__*/jsx("div", {
+              className: "w-6"
+            })]
           })]
-        }, key);
-      }), /*#__PURE__*/jsxs("div", {
-        className: "flex-1 flex flex-nowrap",
-        children: [/*#__PURE__*/jsx("div", {
-          className: wrapperStart,
-          children: (_columnMap$start3 = columnMap.start) === null || _columnMap$start3 === void 0 ? void 0 : _columnMap$start3.map(emptyCol)
-        }), (_columnMap$cols3 = columnMap.cols) === null || _columnMap$cols3 === void 0 ? void 0 : _columnMap$cols3.map(emptyCol), /*#__PURE__*/jsx("div", {
-          className: wrapperEnd,
-          children: (_columnMap$end3 = columnMap.end) === null || _columnMap$end3 === void 0 ? void 0 : _columnMap$end3.map(emptyCol)
         })]
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: "area-foot bg-dimmed border-t sticky bottom-0 flex flex-nowrap z-2",
-      children: [/*#__PURE__*/jsx("div", {
-        className: wrapperStart,
-        children: (_columnMap$start4 = columnMap.start) === null || _columnMap$start4 === void 0 ? void 0 : _columnMap$start4.map(function (col, idx) {
-          return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
-        })
-      }), (_columnMap$cols4 = columnMap.cols) === null || _columnMap$cols4 === void 0 ? void 0 : _columnMap$cols4.map(function (col, idx) {
-        return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
-      }), /*#__PURE__*/jsx("div", {
-        className: wrapperEnd,
-        children: (_columnMap$end4 = columnMap.end) === null || _columnMap$end4 === void 0 ? void 0 : _columnMap$end4.map(function (col, idx) {
-          return /*#__PURE__*/jsx(HeaderCell, _objectSpread({}, col), idx);
-        })
-      })]
-    })]
+      }), !loading && data.length === 0 && (emptyDisplay !== null && emptyDisplay !== void 0 ? emptyDisplay : /*#__PURE__*/jsx(EmptyContent, {
+        size: "sm",
+        className: "bg-dimmed",
+        message: t("datagrid.empty")
+      }))]
+    })
   });
 };
 

package/dist/esm/table/types.js

@@ -0,0 +1,30 @@
+'use client';
+
+/*
+ * 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 COL_MIN_WIDTH = "3rem";
+var COL_MAX_WIDTH = "64rem";
+var COL_DEFAULT_WIDTH = "12rem";
+
+export { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH };

package/dist/esm/table/useResizer.js

@@ -0,0 +1,65 @@
+'use client';
+
+/*
+ * 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 useResizer = function useResizer(colEl, ghostEl, callback) {
+  var placeholder = ghostEl.firstElementChild;
+  var isRtl = getComputedStyle(colEl).direction === "rtl";
+  var onResize = function onResize(evt) {
+    /** ***************** check if reverse enabled of RTL *******************/
+    var box = colEl.getBoundingClientRect();
+    var x = isRtl ? box.left - evt.clientX : evt.clientX - box.right;
+    placeholder.style.width = "".concat(colEl.offsetWidth + x, "px");
+  };
+
+  /** ***************** dettach handlers on mouseup *******************/
+  var onResizeEnd = function onResizeEnd() {
+    callback(placeholder.offsetWidth);
+    ghostEl.style.display = "none";
+    document.removeEventListener("mousemove", onResize);
+    document.removeEventListener("mouseup", onResizeEnd);
+  };
+
+  /** ***************** attach handlers *******************/
+  var box = colEl.getBoundingClientRect();
+  if (colEl.parentElement != null) {
+    var _colEl$parentElement;
+    var parentBox = (_colEl$parentElement = colEl.parentElement) === null || _colEl$parentElement === void 0 ? void 0 : _colEl$parentElement.getBoundingClientRect();
+    if (isRtl) {
+      placeholder.style.left = "unset";
+      placeholder.style.right = "".concat(box.right - parentBox.right, "px");
+    } else {
+      placeholder.style.right = "unset";
+      placeholder.style.left = "".concat(box.left - parentBox.left, "px");
+    }
+  }
+  placeholder.style.width = "".concat(colEl.offsetWidth, "px");
+  placeholder.style.minWidth = colEl.style.minWidth || "48px";
+  placeholder.style.maxWidth = colEl.style.maxWidth || "75vw";
+  ghostEl.style.display = "block";
+  document.addEventListener("mousemove", onResize);
+  document.addEventListener("mouseup", onResizeEnd);
+};
+
+export { useResizer };

package/dist/esm/table/useTableColumns.js

@@ -1,25 +1,62 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { groupBy } from '@react-fabric/utilities';
-import { useState, useEffect } from 'react';
+import { useReducer, useEffect } 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; }
 var useTableColumns = function useTableColumns(columns) {
-  var _useState = useState({
+  var _useReducer = useReducer(function (state, action) {
+      if (action.type === "columns") {
+        state.columns = action.columns;
+      }
+      if (action.type === "hide") {
+        var col = state.columns.find(function (col) {
+          return col.id === action.id;
+        });
+        col && state.columns.splice(state.columns.indexOf(col), 1, _objectSpread(_objectSpread({}, col), {}, {
+          hidden: col.hidden !== true
+        }));
+      }
+      var _groupBy = groupBy(state.columns.filter(function (col) {
+          return col.hidden !== true;
+        }), "locked", "cols"),
+        _groupBy$start = _groupBy.start,
+        start = _groupBy$start === void 0 ? [] : _groupBy$start,
+        _groupBy$end = _groupBy.end,
+        end = _groupBy$end === void 0 ? [] : _groupBy$end,
+        _groupBy$cols = _groupBy.cols,
+        cols = _groupBy$cols === void 0 ? [] : _groupBy$cols;
+      return _objectSpread(_objectSpread({}, state), {}, {
+        start: start,
+        end: end,
+        cols: cols
+      });
+    }, {
+      columns: [],
       start: [],
       end: [],
       cols: []
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    columnMap = _useState2[0],
-    setColumnMap = _useState2[1];
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
   useEffect(function () {
-    setColumnMap(groupBy(columns.filter(function (col) {
-      return !(col.hideable && col.hidden);
-    }), "locked", "cols"));
+    dispatch({
+      type: "columns",
+      columns: columns
+    });
   }, [columns]);
   return {
-    columnMap: columnMap
+    state: state,
+    onHide: function onHide(id) {
+      return dispatch({
+        type: "hide",
+        id: id
+      });
+    }
   };
 };
 

package/dist/esm/table/useVirtualTable.js

@@ -1,32 +1,14 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef, useCallback } from 'react';
+import { useRef, useReducer, useCallback } from 'react';
 
-/*
- * 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 useVirtualTable = function useVirtualTable(data) {
+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 useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged) {
+  var _virtualizer$range;
   // TODO: refactor data into item list, apply grouping if groupColumn provided
   // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
 
@@ -40,6 +22,35 @@ var useVirtualTable = function useVirtualTable(data) {
       return 24;
     }
   });
+  var _useReducer = useReducer(function (state, action) {
+      if (action.type === "expand") {
+        if (state.expanded.includes(action.key)) state.expanded.splice(state.expanded.indexOf(action.key), 1);else state.expanded.push(action.key);
+      }
+      if (action.type === "check") {
+        if (state.checked.includes(action.key)) state.checked.splice(state.checked.indexOf(action.key), 1);else state.checked.push(action.key);
+        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
+      }
+      if (action.type === "checkall") {
+        if (state.allChecked !== 0) {
+          state.checked = [];
+        } else if (keyProperty) {
+          state.checked = data.map(function (item) {
+            return item[keyProperty];
+          });
+        }
+        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
+      }
+      return _objectSpread(_objectSpread({}, state), {}, {
+        allChecked: state.checked.length === data.length ? 1 : state.checked.length ? 2 : 0
+      });
+    }, {
+      checked: [],
+      expanded: [],
+      allChecked: 0
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
   var virtualItems = virtualizer.getVirtualItems();
   var getData = useCallback(function (index) {
     return data[index];
@@ -47,9 +58,29 @@ var useVirtualTable = function useVirtualTable(data) {
   return {
     scrollerRef: scrollerRef,
     items: virtualItems,
+    checkState: state,
     getData: getData,
+    virtualizer: virtualizer,
+    top: (_virtualizer$range = virtualizer.range) === null || _virtualizer$range === void 0 ? void 0 : _virtualizer$range.startIndex,
     totalSize: virtualizer.getTotalSize,
-    measureElement: virtualizer.measureElement
+    measureElement: virtualizer.measureElement,
+    toggleExpand: function toggleExpand(key) {
+      return dispatch({
+        type: "expand",
+        key: key
+      });
+    },
+    toggleChecked: function toggleChecked(key) {
+      return dispatch({
+        type: "check",
+        key: key
+      });
+    },
+    toggleAllChecked: function toggleAllChecked() {
+      return dispatch({
+        type: "checkall"
+      });
+    }
   };
 };
 

package/dist/esm/tree/TreePanel.js

@@ -5,18 +5,19 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { CoreIcons, Section, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
 import { Search } from '@react-fabric/form';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef, useMemo } from 'react';
+import { useRef, useMemo, useImperativeHandle } from 'react';
 import { TreeNode } from './TreeNode.js';
 import { iconExpandAll, iconCollapseAll } from './types.js';
 import { useTree } from './useTree.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
 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 TreePanel = function TreePanel(_ref) {
   var _virtualItems$;
-  var items = _ref.items,
+  var ref = _ref.ref,
+    items = _ref.items,
     selected = _ref.selected,
     checked = _ref.checked,
     checkable = _ref.checkable,
@@ -48,6 +49,7 @@ var TreePanel = function TreePanel(_ref) {
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
     select = _useTree.select,
+    expand = _useTree.expand,
     onFilter = _useTree.onFilter;
   var scrollerRef = useRef(null);
   var virtualizer = useVirtualizer({
@@ -66,6 +68,16 @@ var TreePanel = function TreePanel(_ref) {
     if (expander === "folder") return [CoreIcons.folderClosed, CoreIcons.folderOpen];
     return [CoreIcons.expand, CoreIcons.collapse];
   }, [expander]);
+  useImperativeHandle(ref, function () {
+    return {
+      open: function open(id) {
+        return expand(id);
+      },
+      select: function select(id) {
+        return expand(id);
+      }
+    };
+  }, []);
   return /*#__PURE__*/jsxs(Section, {
     children: [/*#__PURE__*/jsxs(Header, {
       flex: true,

package/dist/esm/tree/useTree.js

@@ -151,6 +151,12 @@ var useTree = function useTree(_ref) {
       id: id
     });
   }, []);
+  var expand = useCallback(function (id) {
+    dispatch({
+      type: "expand",
+      id: id
+    });
+  }, []);
   var expandAll = useCallback(function () {
     dispatch({
       type: "expandAll"
@@ -174,6 +180,7 @@ var useTree = function useTree(_ref) {
     collapseAll: collapseAll,
     toggleCheck: toggleCheck,
     select: select,
+    expand: expand,
     onFilter: onFilter
   };
 };