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

package/dist/esm/table/BodyCell.js

@@ -1,6 +1,11 @@
 'use client';
 
+import { DateDisplay } from '@react-fabric/date';
+import { getByPath, isTrue, Format } from '@react-fabric/utilities';
 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,19 +32,55 @@ 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;
   var column = _ref.column,
-    item = _ref.item;
+    item = _ref.item,
+    index = _ref.index;
+  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]);
+  var content = useMemo(function () {
+    var value = getByPath(item, column.id.toString());
+    if (column.renderer != null) {
+      return column.renderer(item[column.id], item, index);
+    }
+    if (column.dataType === "boolean") {
+      var _column$valueMap;
+      var map = (_column$valueMap = column.valueMap) !== null && _column$valueMap !== void 0 ? _column$valueMap : {
+        "true": "Yes",
+        "false": "no"
+      };
+      return map["".concat(isTrue(value) ? "true" : "false")];
+    }
+    if (column.valueMap != null) {
+      if (column.dataType === "string" && value in column.valueMap) {
+        return column.valueMap[value];
+      }
+    }
+    if (column.dataType === "date") {
+      return /*#__PURE__*/jsx(DateDisplay, {
+        date: value,
+        format: column.format
+      });
+    }
+    if (column.dataType === "number") {
+      return Format.number(value, column.format);
+    }
+    return value !== null && value !== void 0 ? value : "";
+  }, [item, 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"),
-      children: (_column$renderer = (_column$renderer2 = column.renderer) === null || _column$renderer2 === void 0 ? void 0 : _column$renderer2.call(column, item[column.id], item)) !== null && _column$renderer !== void 0 ? _column$renderer : item[column.id]
+      children: content
     })
   });
 };

package/dist/esm/table/BodyRow.js

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

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,94 @@ 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 tooltip = _ref.tooltip,
+    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: tooltip !== null && tooltip !== void 0 ? tooltip : label,
+      disabled: !(tooltip !== null && tooltip !== void 0 ? tooltip : 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);
+      }
     })]
   });
 };