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

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);
+      }
     })]
   });
 };