@react-fabric/data 1.0.0-beta.9 → 1.0.1

package/dist/esm/table/CheckboxCell.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon, CoreIcons } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -26,19 +26,20 @@ import { jsx } from 'react/jsx-runtime';
  * 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) {
+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",
+  return /*#__PURE__*/jsx("button", {
+    type: "button",
+    className: "group font-medium border-e w-6 flex flex-nowrap text-start py-1",
+    onClick: function onClick(e) {
+      return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(), e.stopPropagation()];
+    },
     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()];
-      }
+      icon: state === 2 ? "icon-[mdi--checkbox-intermediate]" : state === 1 ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]",
+      className: "p-1 text-tint-700 hover:text-primary-600"
     })
   });
-};
+}
 
 export { CheckboxCell };

package/dist/esm/table/ColumnFilters.js

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

package/dist/esm/table/EmptyCell.js

@@ -1,8 +1,8 @@
 '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 { useTableContext } from './context.js';
+import { COL_MAX_WIDTH, COL_MIN_WIDTH, COL_DEFAULT_WIDTH } from './types.js';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -28,7 +28,7 @@ import { jsx } from 'react/jsx-runtime';
  * 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) {
+function EmptyCell(_ref) {
   var id = _ref.id,
     _width = _ref.width,
     maxWidth = _ref.maxWidth,
@@ -47,6 +47,6 @@ var EmptyCell = function EmptyCell(_ref) {
       maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : COL_MAX_WIDTH
     }
   }, "blank:".concat(id.toString()));
-};
+}
 
 export { EmptyCell };

package/dist/esm/table/HeaderCell.js

@@ -1,51 +1,36 @@
 'use client';
 
-import { MenuItem, CoreIcons, Tooltip, Icon, DropdownTool, Menu } from '@react-fabric/core';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { Menu, MenuItem, Divider, Tooltip, Icon, getIconProps, DropdownTool, Button } from '@react-fabric/core';
+import { isEmpty } from '@react-fabric/utilities';
 import { useMemo, useCallback } from 'react';
-import { useTableContext } from './Context.js';
-import { COL_DEFAULT_WIDTH, COL_MIN_WIDTH, COL_MAX_WIDTH } from './types.js';
+import { ColumnFilters } from './ColumnFilters.js';
+import { useTableContext } from './context.js';
+import { COL_MAX_WIDTH, COL_MIN_WIDTH, COL_DEFAULT_WIDTH } from './types.js';
 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 HeaderCell = function HeaderCell(_ref) {
+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), true).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; }
+function HeaderCell(_ref) {
   var id = _ref.id,
+    field = _ref.field,
+    dataType = _ref.dataType,
     label = _ref.label,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip;
-    _ref.actions;
-    _ref.locked;
-    var tooltip = _ref.tooltip,
+    actions = _ref.actions,
+    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 = useTableContext(),
     startResize = _useTableContext.startResize,
     widths = _useTableContext.widths;
@@ -53,30 +38,68 @@ 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 = useCallback(function () {
-    sortable && (onSort === null || onSort === void 0 ? void 0 : onSort({
+  var handleSort = useCallback(function (order) {
+    if (sortable) onSort === null || onSort === 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]);
+      order: order !== null && order !== void 0 ? order : (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
+    });
+  }, [id, onSort, sort, sortable]);
   var menus = useMemo(function () {
     var ret = [];
+    if (filterable && (dataType !== null && dataType !== void 0 ? dataType : filterOptions)) {
+      ret.push(/*#__PURE__*/jsx(Menu, {
+        label: "Filter",
+        icon: filter ? "icon-[mdi--check]" : "",
+        trigger: "click",
+        children: /*#__PURE__*/jsx(ColumnFilters, {
+          type: dataType,
+          list: filterOptions,
+          filter: filter,
+          onFilter: function onFilter(value) {
+            return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(field !== null && field !== void 0 ? field : id, value);
+          }
+        })
+      }, "filters"));
+    }
     if (sortable) {
-      ret.push( /*#__PURE__*/jsx(MenuItem, {
+      ret.push(/*#__PURE__*/jsx(MenuItem, {
         label: "Sort ascending",
-        icon: CoreIcons.sortAsc
+        icon: "icon-[mdi--sort-ascending]",
+        onClick: function onClick() {
+          return handleSort("asc");
+        }
       }, "sort-asc"), /*#__PURE__*/jsx(MenuItem, {
         label: "Sort descending",
-        icon: CoreIcons.sortDesc
+        icon: "icon-[mdi--sort-descending]",
+        onClick: function onClick() {
+          return handleSort("desc");
+        }
       }, "sort-desc"));
     }
+    if (actions) {
+      var _ret;
+      ret.push(/*#__PURE__*/jsx(Divider, {}, "div"));
+      (_ret = ret).push.apply(_ret, _toConsumableArray(actions));
+    }
+    if (ret.length === 1) {
+      ret = [/*#__PURE__*/jsx(ColumnFilters, {
+        type: dataType,
+        list: filterOptions,
+        filter: filter,
+        onFilter: function onFilter(value) {
+          return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(field !== null && field !== void 0 ? field : id, value);
+        }
+      }, "filters")];
+    }
     return ret;
-  }, [sortable]);
+  }, [filterable, dataType, filterOptions, sortable, actions, filter, _onFilter, field, id, handleSort]);
   return /*#__PURE__*/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 : COL_DEFAULT_WIDTH,
       minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : COL_MIN_WIDTH,
@@ -86,13 +109,8 @@ var HeaderCell = function HeaderCell(_ref) {
       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", {
+        className: "flex-initial px-2 py-1 text-sm truncate sticky inset-s-0",
+        children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({}, getIconProps(icon))), /*#__PURE__*/jsx("span", {
           children: label !== null && label !== void 0 ? label : " "
         })]
       })
@@ -112,14 +130,22 @@ var HeaderCell = function HeaderCell(_ref) {
         className: "text-sm",
         children: menus
       })
+    }), filterable && !isEmpty(filter) && /*#__PURE__*/jsx(Button, {
+      size: "sm",
+      variant: "link",
+      "aria-label": "clear filter",
+      icon: "icon-[mdi--filter-remove]",
+      onClick: function onClick(e) {
+        return e !== null && e !== void 0 && e.stopPropagation(), _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id);
+      }
     }), resizable && /*#__PURE__*/jsx("div", {
       role: "none",
-      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch",
+      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[calc(5px)] self-stretch",
       onMouseDown: function onMouseDown(e) {
         return e.currentTarget.parentElement && startResize(e.currentTarget.parentElement);
       }
     })]
   });
-};
+}
 
 export { HeaderCell };

package/dist/esm/table/HtmlTable.js

@@ -0,0 +1,84 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { getByPath, cn } from '@react-fabric/utilities';
+import { useMemo } from 'react';
+import { usePagination } from '../hooks/usePagination.js';
+import { Pagination } from '../pagination/Pagination.js';
+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), true).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; }
+function HtmlTable(_ref) {
+  var data = _ref.data,
+    columns = _ref.columns,
+    _ref$paginationSize = _ref.paginationSize,
+    paginationSize = _ref$paginationSize === void 0 ? 25 : _ref$paginationSize,
+    className = _ref.className;
+  var paginator = usePagination({
+    totalRecords: data.length,
+    perPage: paginationSize
+  });
+  var startIndex = useMemo(function () {
+    return paginator.page * paginationSize;
+  }, [paginator.page, paginationSize]);
+  var dataPage = useMemo(function () {
+    return paginationSize > 0 ? data.slice(startIndex, startIndex + paginationSize) : data;
+  }, [data, paginationSize, startIndex]);
+  return /*#__PURE__*/jsx("div", {
+    className: className,
+    children: /*#__PURE__*/jsxs("table", {
+      className: "table-fixed border-spacing-1 border-separate w-full text-sm",
+      children: [/*#__PURE__*/jsx("thead", {
+        className: "sticky top-0 z-1 bg-dimmed",
+        children: /*#__PURE__*/jsx("tr", {
+          children: columns.map(function (col, idx) {
+            var _ref2, _col$headRenderer;
+            return /*#__PURE__*/jsx("th", {
+              className: "text-start truncate bg-accent-100 px-2 py-1 font-medium text-accent-800",
+              style: {
+                width: col.width,
+                maxWidth: col.maxWidth
+              },
+              children: (_ref2 = (_col$headRenderer = col.headRenderer) !== null && _col$headRenderer !== void 0 ? _col$headRenderer : col.label) !== null && _ref2 !== void 0 ? _ref2 : " "
+            }, idx);
+          })
+        })
+      }), /*#__PURE__*/jsx("tbody", {
+        className: "bg-alternate",
+        children: dataPage.map(function (row, idx) {
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsx("tr", {
+              children: columns.map(function (col, cidx) {
+                var _col$renderer, _col$renderer2;
+                return /*#__PURE__*/jsx("td", {
+                  className: cn("px-2 py-1 truncate", col.align === "center" && "text-center", col.align === "end" && "text-end", col.className),
+                  style: {
+                    width: col.width,
+                    maxWidth: col.maxWidth
+                  },
+                  children: (_col$renderer = (_col$renderer2 = col.renderer) === null || _col$renderer2 === void 0 ? void 0 : _col$renderer2.call(col, getByPath(row, col.id.toString()), row, startIndex + idx)) !== null && _col$renderer !== void 0 ? _col$renderer : getByPath(row, col.id.toString())
+                }, "".concat(idx, "-").concat(cidx));
+              })
+            }, idx)
+          );
+        })
+      }), paginationSize > 0 && /*#__PURE__*/jsx("tfoot", {
+        className: "sticky bottom-0 bg-dimmed z-1",
+        children: /*#__PURE__*/jsx("tr", {
+          children: /*#__PURE__*/jsx("td", {
+            colSpan: columns.length,
+            className: "text-end py-1",
+            children: /*#__PURE__*/jsx(Pagination, _objectSpread({
+              minimal: true
+            }, paginator))
+          })
+        })
+      })]
+    })
+  });
+}
+
+export { HtmlTable };

package/dist/esm/table/{Context.js → Provider.js}

@@ -1,27 +1,29 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useRef, useState, useCallback, createContext, useContext } from 'react';
-import { useResizer } from './useResizer.js';
+import { useRef, useState, useCallback } from 'react';
+import { TableContext } from './context.js';
+import { startResizer } from './useResizer.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var TableContext = /*#__PURE__*/createContext({});
-var TableProvider = function TableProvider(_ref) {
+function TableProvider(_ref) {
   var children = _ref.children;
   var ghostRef = useRef(null);
-  var _useState = useState(new Map()),
+  var _useState = useState(function () {
+      return 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) {
+      if (ghostRef.current != null) startResizer(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, {
+  return /*#__PURE__*/jsxs(TableContext, {
     value: {
       startResize: startResize,
       widths: widths
@@ -34,9 +36,6 @@ var TableProvider = function TableProvider(_ref) {
       })
     })]
   });
-};
-var useTableContext = function useTableContext() {
-  return useContext(TableContext);
-};
+}
 
-export { TableProvider, useTableContext };
+export { TableProvider };