@react-fabric/data 1.0.0-beta.5 → 1.0.0-beta.52

package/dist/cjs/table/AddColumn.js

@@ -30,7 +30,7 @@ var AddColumn = function AddColumn(_ref) {
   var columns = _ref.columns,
     onClick = _ref.onClick;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "group font-medium w-6 flex flex-nowrap text-start items-end",
+    className: "group font-medium w-6 flex flex-nowrap text-start items-center",
     children: /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
       placement: "bottom-end",
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {

package/dist/cjs/table/BodyCell.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var date = require('@react-fabric/date');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var Context = require('./Context.js');
@@ -30,25 +32,56 @@ var jsxRuntime = require('react/jsx-runtime');
  */
 
 var BodyCell = function BodyCell(_ref) {
-  var _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 = Context.useTableContext(),
     widths = _useTableContext.widths;
   var width = react.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 = react.useMemo(function () {
+    var _column$dataType;
+    var value = utilities.getByPath(item, column.id.toString());
+    if (column.renderer != null) {
+      return column.renderer(value, 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(utilities.isTrue(value) ? "true" : "false")];
+    }
+    if (column.valueMap != null) {
+      if (column.dataType === "string" && value in column.valueMap) {
+        return column.valueMap[value];
+      }
+    }
+    if (["date", "time", "datetime"].includes((_column$dataType = column.dataType) !== null && _column$dataType !== void 0 ? _column$dataType : "")) {
+      return /*#__PURE__*/jsxRuntime.jsx(date.DateDisplay, {
+        date: value,
+        format: column.format
+      });
+    }
+    if (column.dataType === "number") {
+      return utilities.Format.number(value, column.format);
+    }
+    return value !== null && value !== void 0 ? value : "";
+  }, [item, column]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "overflow-hidden bg-inherit start-0",
+    className: "overflow-hidden bg-inherit start-0 border-e group/table-col",
     style: {
       width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
       minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : types.COL_MIN_WIDTH,
       maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : types.COL_MAX_WIDTH
     },
     children: /*#__PURE__*/jsxRuntime.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]
+      className: classNames("px-2 py-1", column.className, column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
+      children: content
     })
   });
 };

package/dist/cjs/table/BodyRow.js

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

package/dist/cjs/table/CheckboxCell.js

@@ -30,7 +30,7 @@ var CheckboxCell = function CheckboxCell(_ref) {
   var state = _ref.state,
     _onClick = _ref.onClick;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "group font-medium border-e w-6 flex flex-nowrap text-start items-center",
+    className: "group font-medium border-e w-6 flex flex-nowrap text-start py-1",
     children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       icon: state === 2 ? core.CoreIcons.checkboxInt : state === 1 ? core.CoreIcons.checkboxOn : core.CoreIcons.checkboxOff,
       className: "p-1 text-tint-700 hover:text-primary-600",

package/dist/cjs/table/ColumnFilters.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var form = require('@react-fabric/form');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var useFilteredList = require('../hooks/useFilteredList.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ListFilter = function ListFilter(_ref) {
+  var _ref$list = _ref.list,
+    list = _ref$list === void 0 ? utilities.EMPTY_ARRAY : _ref$list,
+    filter = _ref.filter,
+    onFilter = _ref.onFilter;
+  var _useState = react.useState(new Set(filter)),
+    _useState2 = _slicedToArray(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var _useFilteredList = useFilteredList.useFilteredList(list, function (item, query) {
+      var _item$id;
+      return utilities.matchString((_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : item, query);
+    }),
+    filteredList = _useFilteredList.filteredList,
+    query = _useFilteredList.query,
+    onSearch = _useFilteredList.onSearch;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      children: /*#__PURE__*/jsxRuntime.jsx(form.Search, {
+        autoFocus: true,
+        value: query,
+        onSearch: onSearch,
+        searchOnChange: true
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 overflow-auto scroll-thin",
+      children: [filteredList.map(function (v, idx) {
+        var _v$id, _v$label;
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex gap-x-1 text-xs items-center",
+          children: /*#__PURE__*/jsxRuntime.jsx(form.Checkbox, {
+            checked: selected.has((_v$id = v.id) !== null && _v$id !== void 0 ? _v$id : v),
+            onChange: function onChange(b) {
+              var _v$id2, _v$id3;
+              var set = new Set(Array.from(selected.values()));
+              b ? set.add((_v$id2 = v.id) !== null && _v$id2 !== void 0 ? _v$id2 : v) : set["delete"]((_v$id3 = v.id) !== null && _v$id3 !== void 0 ? _v$id3 : v);
+              setSelected(set);
+            },
+            label: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "truncate",
+              children: (_v$label = v.label) !== null && _v$label !== void 0 ? _v$label : v
+            })
+          })
+        }, idx);
+      }), filteredList.length === 0 && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-muted text-xs",
+        children: "No items found"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex justify-end",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.DropdownDismiss, {
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          size: "xs",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(Array.from(selected));
+          },
+          children: "Apply"
+        })
+      })
+    })]
+  });
+};
+var ColumnFilters = function ColumnFilters(_ref2) {
+  var type = _ref2.type,
+    list = _ref2.list,
+    filter = _ref2.filter,
+    onFilter = _ref2.onFilter;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col min-w-[16rem]",
+    children: [list && /*#__PURE__*/jsxRuntime.jsx(ListFilter, {
+      list: list,
+      filter: filter,
+      onFilter: onFilter
+    }), !list && type === "string" && /*#__PURE__*/jsxRuntime.jsx(form.Input, {
+      autoFocus: true,
+      allowClear: true,
+      value: filter,
+      onEnterPressed: function onEnterPressed(e) {
+        var _e$target$value;
+        return onFilter((_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : "");
+      }
+    })]
+  });
+};
+
+exports.ColumnFilters = ColumnFilters;

package/dist/cjs/table/HeaderCell.js

@@ -1,50 +1,36 @@
 'use strict';
 
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
+var ColumnFilters = require('./ColumnFilters.js');
 var Context = require('./Context.js');
 var types = require('./types.js');
 var jsxRuntime = require('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 HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
+    dataType = _ref.dataType,
     label = _ref.label,
     icon = _ref.icon,
     iconBg = _ref.iconBg,
     iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip;
-    _ref.actions;
+    rtlFlip = _ref.rtlFlip,
+    actions = _ref.actions;
     _ref.locked;
-    var sortable = _ref.sortable,
+    var filter = _ref.filter,
+    filterable = _ref.filterable,
+    filterOptions = _ref.filterOptions,
+    tooltip = _ref.tooltip,
+    sortable = _ref.sortable,
     resizable = _ref.resizable,
     _width = _ref.width,
     maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
     sort = _ref.sort,
-    onSort = _ref.onSort;
+    onSort = _ref.onSort,
+    _onFilter = _ref.onFilter;
   var _useTableContext = Context.useTableContext(),
     startResize = _useTableContext.startResize,
     widths = _useTableContext.widths;
@@ -52,38 +38,76 @@ var HeaderCell = function HeaderCell(_ref) {
     var _widths$get;
     return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
   }, [widths, _width, id]);
-  var handleSort = react.useCallback(function () {
+  var handleSort = react.useCallback(function (order) {
     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"
+      order: order !== null && order !== void 0 ? order : (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
     }));
-  }, [onSort, name, sort, sortable]);
+  }, [onSort, sort, sortable]);
   var menus = react.useMemo(function () {
     var ret = [];
+    if (filterable && (dataType !== null && dataType !== void 0 ? dataType : filterOptions)) {
+      ret.push( /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
+        label: "Filter",
+        icon: filter ? core.CoreIcons.tick : "",
+        trigger: "click",
+        children: /*#__PURE__*/jsxRuntime.jsx(ColumnFilters.ColumnFilters, {
+          type: dataType,
+          list: filterOptions,
+          filter: filter,
+          onFilter: function onFilter(value) {
+            return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id, value);
+          }
+        })
+      }, "filters"));
+    }
     if (sortable) {
       ret.push( /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
         label: "Sort ascending",
-        icon: core.CoreIcons.sortAsc
+        icon: core.CoreIcons.sortAsc,
+        onClick: function onClick() {
+          return handleSort("asc");
+        }
       }, "sort-asc"), /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
         label: "Sort descending",
-        icon: core.CoreIcons.sortDesc
+        icon: core.CoreIcons.sortDesc,
+        onClick: function onClick() {
+          return handleSort("desc");
+        }
       }, "sort-desc"));
     }
+    if (actions) {
+      var _ret;
+      ret.push( /*#__PURE__*/jsxRuntime.jsx(core.Divider, {}, "div"));
+      (_ret = ret).push.apply(_ret, _toConsumableArray(actions));
+    }
+    if (ret.length === 1) {
+      ret = [/*#__PURE__*/jsxRuntime.jsx(ColumnFilters.ColumnFilters, {
+        type: dataType,
+        list: filterOptions,
+        filter: filter,
+        onFilter: function onFilter(value) {
+          return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id, value);
+        }
+      }, "filters")];
+    }
     return ret;
-  }, [sortable]);
+  }, [sortable, actions, _onFilter, handleSort]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "none",
     "data-id": id,
-    onClick: handleSort,
-    className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
+    onClick: function onClick() {
+      return handleSort();
+    },
+    className: "group/tool font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
     style: {
       width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
       minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : types.COL_MIN_WIDTH,
       maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : types.COL_MAX_WIDTH
     },
     children: [/*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
-      content: label,
-      disabled: !label,
+      content: tooltip !== null && tooltip !== void 0 ? tooltip : label,
+      disabled: !(tooltip !== null && tooltip !== void 0 ? tooltip : label),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex-initial px-2 py-1 text-sm truncate sticky start-0",
         children: [icon && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
@@ -111,6 +135,15 @@ var HeaderCell = function HeaderCell(_ref) {
         className: "text-sm",
         children: menus
       })
+    }), filterable && !utilities.isEmpty(filter) && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      size: "sm",
+      variant: "link",
+      "aria-label": "clear filter",
+      stopPropagation: true,
+      icon: core.CoreIcons.funnelRemove,
+      onClick: function onClick() {
+        return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id);
+      }
     }), resizable && /*#__PURE__*/jsxRuntime.jsx("div", {
       role: "none",
       className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch",