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

package/dist/cjs/table/types.js

@@ -0,0 +1,32 @@
+'use strict';
+
+/*
+ * 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";
+
+exports.COL_DEFAULT_WIDTH = COL_DEFAULT_WIDTH;
+exports.COL_MAX_WIDTH = COL_MAX_WIDTH;
+exports.COL_MIN_WIDTH = COL_MIN_WIDTH;

package/dist/cjs/table/useResizer.js

@@ -0,0 +1,65 @@
+'use strict';
+
+/*
+ * 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);
+};
+
+exports.useResizer = useResizer;

package/dist/cjs/table/useTableColumns.js

@@ -1,25 +1,62 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var utilities = require('@react-fabric/utilities');
 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 useTableColumns = function useTableColumns(columns) {
-  var _useState = react.useState({
+  var _useReducer = react.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 = utilities.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];
   react.useEffect(function () {
-    setColumnMap(utilities.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/cjs/table/useVirtualTable.js

@@ -1,32 +1,13 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var reactVirtual = require('@tanstack/react-virtual');
 var react = require('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) {
   // 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 +21,30 @@ var useVirtualTable = function useVirtualTable(data) {
       return 24;
     }
   });
+  var _useReducer = react.useReducer(function (state, action) {
+      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);
+      }
+      if (action.type === "checkall") {
+        if (state.allChecked !== 0) {
+          state.checked = [];
+        } else {
+          state.checked = data.map(function (item) {
+            return item[keyProperty];
+          });
+        }
+      }
+      onCheckChanged(state.checked);
+      return _objectSpread(_objectSpread({}, state), {}, {
+        allChecked: state.checked.length === data.length ? 1 : state.checked.length ? 2 : 0
+      });
+    }, {
+      checked: [],
+      allChecked: 0
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
   var virtualItems = virtualizer.getVirtualItems();
   var getData = react.useCallback(function (index) {
     return data[index];
@@ -47,9 +52,21 @@ var useVirtualTable = function useVirtualTable(data) {
   return {
     scrollerRef: scrollerRef,
     items: virtualItems,
+    checkState: state,
     getData: getData,
     totalSize: virtualizer.getTotalSize,
-    measureElement: virtualizer.measureElement
+    measureElement: virtualizer.measureElement,
+    toggleChecked: function toggleChecked(key) {
+      return dispatch({
+        type: "check",
+        key: key
+      });
+    },
+    toggleAllChecked: function toggleAllChecked() {
+      return dispatch({
+        type: "checkall"
+      });
+    }
   };
 };
 

package/dist/esm/table/AddColumn.js

@@ -0,0 +1,56 @@
+'use client';
+
+import { Dropdown, Icon, CoreIcons, Menu, MenuItem } from '@react-fabric/core';
+import { jsx, jsxs } from '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 AddColumn = function AddColumn(_ref) {
+  var columns = _ref.columns,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsx("div", {
+    className: "group font-medium w-6 flex flex-nowrap text-start items-end",
+    children: /*#__PURE__*/jsxs(Dropdown, {
+      placement: "bottom-end",
+      children: [/*#__PURE__*/jsx(Icon, {
+        icon: CoreIcons.insert,
+        className: "p-1 rounded-t rounded-b-none hover:outline"
+      }), /*#__PURE__*/jsx(Menu, {
+        className: "text-sm",
+        onClick: onClick,
+        children: columns.map(function (col) {
+          var _col$label;
+          return /*#__PURE__*/jsx(MenuItem, {
+            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 ? CoreIcons.tick : ""
+          }, String(col.id));
+        })
+      })]
+    })
+  });
+};
+
+export { AddColumn };

package/dist/esm/table/BodyCell.js

@@ -1,6 +1,9 @@
 'use client';
 
 import classNames from 'classnames';
+import { useMemo } from 'react';
+import { useTableContext } from './Context.js';
+import { COL_DEFAULT_WIDTH, COL_MIN_WIDTH, COL_MAX_WIDTH } from './types.js';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -27,15 +30,21 @@ import { jsx } from 'react/jsx-runtime';
  */
 
 var BodyCell = function BodyCell(_ref) {
-  var _column$width, _column$minWidth, _column$maxWidth, _column$renderer, _column$renderer2;
+  var _column$minWidth, _column$maxWidth, _column$renderer, _column$renderer2;
   var column = _ref.column,
     item = _ref.item;
+  var _useTableContext = useTableContext(),
+    widths = _useTableContext.widths;
+  var width = useMemo(function () {
+    var _widths$get;
+    return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
+  }, [widths, column]);
   return /*#__PURE__*/jsx("div", {
     className: "overflow-hidden bg-inherit start-0",
     style: {
-      width: (_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : "12rem",
-      minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : "2rem",
-      maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : "32rem"
+      width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,
+      minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : COL_MIN_WIDTH,
+      maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : COL_MAX_WIDTH
     },
     children: /*#__PURE__*/jsx("div", {
       className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),

package/dist/esm/table/CheckboxCell.js

@@ -0,0 +1,44 @@
+'use client';
+
+import { Icon, CoreIcons } from '@react-fabric/core';
+import { jsx } from '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 CheckboxCell = function CheckboxCell(_ref) {
+  var state = _ref.state,
+    _onClick = _ref.onClick;
+  return /*#__PURE__*/jsx("div", {
+    className: "group font-medium border-e w-6 flex flex-nowrap text-start items-center",
+    children: /*#__PURE__*/jsx(Icon, {
+      icon: state === 2 ? CoreIcons.checkboxInt : state === 1 ? CoreIcons.checkboxOn : CoreIcons.checkboxOff,
+      className: "p-1 text-tint-700 hover:text-primary-600",
+      onClick: function onClick(e) {
+        return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(), e.stopPropagation()];
+      }
+    })
+  });
+};
+
+export { CheckboxCell };

package/dist/esm/table/Context.js

@@ -0,0 +1,42 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useState, useCallback, createContext, useContext } from 'react';
+import { useResizer } from './useResizer.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TableContext = /*#__PURE__*/createContext({});
+var TableProvider = function TableProvider(_ref) {
+  var children = _ref.children;
+  var ghostRef = useRef(null);
+  var _useState = useState(new Map()),
+    _useState2 = _slicedToArray(_useState, 2),
+    widths = _useState2[0],
+    setWidths = _useState2[1];
+  var startResize = useCallback(function (col) {
+    if (col) {
+      ghostRef.current != null && useResizer(col, ghostRef.current, function (width) {
+        var _col$dataset$id;
+        setWidths(new Map(widths.set((_col$dataset$id = col.dataset.id) !== null && _col$dataset$id !== void 0 ? _col$dataset$id : "", width)));
+      });
+    }
+  }, [widths]);
+  return /*#__PURE__*/jsxs(TableContext.Provider, {
+    value: {
+      startResize: startResize,
+      widths: widths
+    },
+    children: [children, /*#__PURE__*/jsx("div", {
+      className: "absolute inset-0 hidden z-20 cursor-col-resize",
+      ref: ghostRef,
+      children: /*#__PURE__*/jsx("div", {
+        className: "absolute inset-y-0 bg-muted opacity-50 border-primary border-e-2"
+      })
+    })]
+  });
+};
+var useTableContext = function useTableContext() {
+  return useContext(TableContext);
+};
+
+export { TableProvider, useTableContext };

package/dist/esm/table/EmptyCell.js

@@ -0,0 +1,52 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useTableContext } from './Context.js';
+import { COL_DEFAULT_WIDTH, COL_MIN_WIDTH, COL_MAX_WIDTH } from './types.js';
+import { jsx } from '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 EmptyCell = function EmptyCell(_ref) {
+  var id = _ref.id,
+    _width = _ref.width,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth;
+  var _useTableContext = useTableContext(),
+    widths = _useTableContext.widths;
+  var width = useMemo(function () {
+    var _widths$get;
+    return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
+  }, [widths, id, _width]);
+  return /*#__PURE__*/jsx("div", {
+    className: "overflow-hidden border-e",
+    style: {
+      width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,
+      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : COL_MIN_WIDTH,
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : COL_MAX_WIDTH
+    }
+  }, "blank:".concat(id.toString()));
+};
+
+export { EmptyCell };

package/dist/esm/table/HeaderCell.js

@@ -1,7 +1,10 @@
 'use client';
 
-import { Icon, Dropdown, CoreIcons, Menu, MenuItem } from '@react-fabric/core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { MenuItem, CoreIcons, Tooltip, Icon, DropdownTool, Menu } from '@react-fabric/core';
+import { useMemo, useCallback } from 'react';
+import { useTableContext } from './Context.js';
+import { COL_DEFAULT_WIDTH, COL_MIN_WIDTH, COL_MAX_WIDTH } from './types.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 /*
  * React Fabric
@@ -27,51 +30,93 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  */
 
 var HeaderCell = function HeaderCell(_ref) {
-  var label = _ref.label,
+  var id = _ref.id,
+    label = _ref.label,
     icon = _ref.icon,
     iconBg = _ref.iconBg,
     iconColor = _ref.iconColor,
     rtlFlip = _ref.rtlFlip;
     _ref.actions;
     _ref.locked;
-    var resizable = _ref.resizable,
-    width = _ref.width,
+    var sortable = _ref.sortable,
+    resizable = _ref.resizable,
+    _width = _ref.width,
     maxWidth = _ref.maxWidth,
-    minWidth = _ref.minWidth;
+    minWidth = _ref.minWidth,
+    sort = _ref.sort,
+    onSort = _ref.onSort;
+  var _useTableContext = useTableContext(),
+    startResize = _useTableContext.startResize,
+    widths = _useTableContext.widths;
+  var width = useMemo(function () {
+    var _widths$get;
+    return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
+  }, [widths, _width, id]);
+  var handleSort = useCallback(function () {
+    sortable && (onSort === null || onSort === void 0 ? void 0 : onSort({
+      id: id.toString(),
+      order: (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
+    }));
+  }, [onSort, name, sort, sortable]);
+  var menus = useMemo(function () {
+    var ret = [];
+    if (sortable) {
+      ret.push( /*#__PURE__*/jsx(MenuItem, {
+        label: "Sort ascending",
+        icon: CoreIcons.sortAsc
+      }, "sort-asc"), /*#__PURE__*/jsx(MenuItem, {
+        label: "Sort descending",
+        icon: CoreIcons.sortDesc
+      }, "sort-desc"));
+    }
+    return ret;
+  }, [sortable]);
   return /*#__PURE__*/jsxs("div", {
-    className: "group font-medium border-e flex flex-nowrap text-start items-center",
+    role: "none",
+    "data-id": id,
+    onClick: handleSort,
+    className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
     style: {
-      width: width !== null && width !== void 0 ? width : "12rem",
-      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : "2rem",
-      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : "32rem"
+      width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,
+      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : COL_MIN_WIDTH,
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : COL_MAX_WIDTH
     },
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "flex-1 px-2 py-1 text-sm truncate sticky start-0",
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip
-      }), /*#__PURE__*/jsx("span", {
-        children: label !== null && label !== void 0 ? label : " "
-      })]
-    }), /*#__PURE__*/jsxs(Dropdown, {
-      placement: "bottom-start",
-      children: [/*#__PURE__*/jsx(Icon, {
-        icon: CoreIcons.caretDown,
-        className: "outline bg-base me-0.5 flex-content hidden group-hover:inline-block data-[dropdown-open]:inline-block"
-      }), /*#__PURE__*/jsxs(Menu, {
-        className: "text-sm",
-        children: [/*#__PURE__*/jsx(MenuItem, {
-          label: "Sort ascending",
-          icon: CoreIcons.sortAsc
-        }), /*#__PURE__*/jsx(MenuItem, {
-          label: "Sort descending",
-          icon: CoreIcons.sortDesc
+    children: [/*#__PURE__*/jsx(Tooltip, {
+      content: label,
+      disabled: !label,
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex-initial px-2 py-1 text-sm truncate sticky start-0",
+        children: [icon && /*#__PURE__*/jsx(Icon, {
+          icon: icon,
+          bg: iconBg,
+          color: iconColor,
+          rtlFlip: rtlFlip
+        }), /*#__PURE__*/jsx("span", {
+          children: label !== null && label !== void 0 ? label : " "
         })]
+      })
+    }), sortable && /*#__PURE__*/jsxs("div", {
+      className: "text-sm text-tint-300",
+      children: [(sort === null || sort === void 0 ? void 0 : sort.id) === id && (sort === null || sort === void 0 ? void 0 : sort.order) === "desc" && /*#__PURE__*/jsx("span", {
+        children: "\u25BC"
+      }), (sort === null || sort === void 0 ? void 0 : sort.id) === id && (sort === null || sort === void 0 ? void 0 : sort.order) === "asc" && /*#__PURE__*/jsx("span", {
+        children: "\u25B2"
       })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex-1"
+    }), menus.length > 0 && /*#__PURE__*/jsx(DropdownTool, {
+      groupHover: true,
+      placement: "bottom-end",
+      children: /*#__PURE__*/jsx(Menu, {
+        className: "text-sm",
+        children: menus
+      })
     }), resizable && /*#__PURE__*/jsx("div", {
-      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch"
+      role: "none",
+      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch",
+      onMouseDown: function onMouseDown(e) {
+        return e.currentTarget.parentElement && startResize(e.currentTarget.parentElement);
+      }
     })]
   });
 };