@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

package/dist/esm/components/core/Table/Table.js

@@ -4,6 +4,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useId, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useLatestRef } from '../../../hooks/useLatestRef.js';
+import { useMediaQuery } from '../../../hooks/useMediaQuery.js';
+import { usePresentation } from '../../../hooks/usePresentation.js';
 import { Plus, RefreshCcw, Save, X, AlertCircle, Search, ChevronUp, ChevronDown, MoreVertical, List } from 'lucide-react';
 import Select from '../Select.js';
 import { DEFAULT_ACTIONS } from './constants.js';
@@ -16,7 +18,7 @@ import TableRow from './TableRow.js';
 import MobileCard from './MobileCard.js';
 import FieldInput from './FieldInput.js';
 
-var _excluded = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "replaceDefaultActions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "showToolbar", "showColumnPicker", "wrapCells", "mobileMaxFields", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent", "interactive", "onSave", "onEdit", "onRowAdd", "onRowDelete", "editKeyBinding", "newRowPosition", "addRowRef", "onInitAddRow", "renderAddRowButton", "renderExternalAddRow"],
+var _excluded = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "replaceDefaultActions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "showToolbar", "showColumnPicker", "wrapCells", "mobileMaxFields", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent", "interactive", "onSave", "onEdit", "onRowAdd", "onRowDelete", "editKeyBinding", "newRowPosition", "addRowRef", "onInitAddRow", "renderAddRowButton", "renderExternalAddRow", "actionMenuPresentation", "defaultMobileView", "mobileFiltersPresentation", "swipeActions", "stickyHeader"],
   _excluded2 = ["_key", "_isNew"];
 var DEFAULT_DATA = [];
 var DEFAULT_COLUMNS = [];
@@ -112,101 +114,113 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     onInitAddRow = _ref.onInitAddRow,
     renderAddRowButton = _ref.renderAddRowButton,
     renderExternalAddRow = _ref.renderExternalAddRow,
+    _ref$actionMenuPresen = _ref.actionMenuPresentation,
+    actionMenuPresentation = _ref$actionMenuPresen === void 0 ? "auto" : _ref$actionMenuPresen,
+    _ref$defaultMobileVie = _ref.defaultMobileView,
+    defaultMobileView = _ref$defaultMobileVie === void 0 ? false : _ref$defaultMobileVie,
+    _ref$mobileFiltersPre = _ref.mobileFiltersPresentation,
+    mobileFiltersPresentation = _ref$mobileFiltersPre === void 0 ? "auto" : _ref$mobileFiltersPre,
+    swipeActions = _ref.swipeActions,
+    _ref$stickyHeader = _ref.stickyHeader,
+    stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
     props = _objectWithoutProperties(_ref, _excluded);
   theme = _objectSpread2(_objectSpread2({}, DEFAULT_THEME), theme);
+  // Card mode follows a media query (SSR-safe): `defaultMobileView` on the
+  // server and while hydrating, then the live match. Same semantics as the old
+  // `window.innerWidth < responsiveBreakpoint` check.
+  var isMobileView = useMediaQuery("not all and (min-width: ".concat(Number(responsiveBreakpoint) || 0, "px)"), {
+    defaultValue: Boolean(defaultMobileView)
+  });
+  var phoneFilters = usePresentation(mobileFiltersPresentation === "sheet" ? "sheet" : mobileFiltersPresentation === "inline" ? "popover" : "auto") === "sheet";
   // State
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isMobileView = _useState2[0],
-    setIsMobileView = _useState2[1];
-  var _useState3 = useState(function () {
+  var _useState = useState(function () {
       return Array.isArray(initialData) ? initialData : [];
     }),
+    _useState2 = _slicedToArray(_useState, 2),
+    tableData = _useState2[0],
+    setTableData = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    tableData = _useState4[0],
-    setTableData = _useState4[1];
-  var _useState5 = useState(false),
+    loading = _useState4[0],
+    _setLoading = _useState4[1];
+  var _useState5 = useState(pageSize),
     _useState6 = _slicedToArray(_useState5, 2),
-    loading = _useState6[0],
-    _setLoading = _useState6[1];
-  var _useState7 = useState(pageSize),
-    _useState8 = _slicedToArray(_useState7, 2),
-    limit = _useState8[0],
-    setLimit = _useState8[1];
-  var _useState9 = useState(function () {
+    limit = _useState6[0],
+    setLimit = _useState6[1];
+  var _useState7 = useState(function () {
       return typeof pageNumber === "number" ? pageNumber : 1;
     }),
-    _useState0 = _slicedToArray(_useState9, 2),
-    currentPage = _useState0[0],
-    setCurrentPage = _useState0[1];
-  var _useState1 = useState(function () {
+    _useState8 = _slicedToArray(_useState7, 2),
+    currentPage = _useState8[0],
+    setCurrentPage = _useState8[1];
+  var _useState9 = useState(function () {
       return Array.isArray(initialColumns) ? initialColumns.map(function (c) {
         return _objectSpread2({}, c);
       }) : [];
     }),
+    _useState0 = _slicedToArray(_useState9, 2),
+    columnsState = _useState0[0],
+    setColumnsState = _useState0[1];
+  var _useState1 = useState(false),
     _useState10 = _slicedToArray(_useState1, 2),
-    columnsState = _useState10[0],
-    setColumnsState = _useState10[1];
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    showColumnMenu = _useState12[0],
-    setShowColumnMenu = _useState12[1];
-  var _useState13 = useState({
+    showColumnMenu = _useState10[0],
+    setShowColumnMenu = _useState10[1];
+  var _useState11 = useState({
       key: null,
       direction: "asc"
     }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    sortConfig = _useState12[0],
+    setSortConfig = _useState12[1];
+  var _useState13 = useState({}),
     _useState14 = _slicedToArray(_useState13, 2),
-    sortConfig = _useState14[0],
-    setSortConfig = _useState14[1];
-  var _useState15 = useState({}),
+    filters = _useState14[0],
+    setFilters = _useState14[1];
+  var _useState15 = useState(""),
     _useState16 = _slicedToArray(_useState15, 2),
-    filters = _useState16[0],
-    setFilters = _useState16[1];
-  var _useState17 = useState(""),
+    searchInput = _useState16[0],
+    setSearchInput = _useState16[1];
+  var _useState17 = useState(function () {
+      return new Set();
+    }),
     _useState18 = _slicedToArray(_useState17, 2),
-    searchInput = _useState18[0],
-    setSearchInput = _useState18[1];
+    selectedRows = _useState18[0],
+    setSelectedRows = _useState18[1];
   var _useState19 = useState(function () {
       return new Set();
     }),
     _useState20 = _slicedToArray(_useState19, 2),
-    selectedRows = _useState20[0],
-    setSelectedRows = _useState20[1];
-  var _useState21 = useState(function () {
-      return new Set();
-    }),
+    expandedRows = _useState20[0],
+    setExpandedRows = _useState20[1];
+  var _useState21 = useState(null),
     _useState22 = _slicedToArray(_useState21, 2),
-    expandedRows = _useState22[0],
-    setExpandedRows = _useState22[1];
-  var _useState23 = useState(null),
+    activeActionRowKey = _useState22[0],
+    setActiveActionRowKey = _useState22[1];
+  var _useState23 = useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    activeActionRowKey = _useState24[0],
-    setActiveActionRowKey = _useState24[1];
-  var _useState25 = useState(false),
-    _useState26 = _slicedToArray(_useState25, 2),
-    showMobileFilters = _useState26[0],
-    setShowMobileFilters = _useState26[1];
+    showMobileFilters = _useState24[0],
+    setShowMobileFilters = _useState24[1];
   // Interactive Mode State
-  var _useState27 = useState({}),
+  var _useState25 = useState({}),
+    _useState26 = _slicedToArray(_useState25, 2),
+    pendingEdits = _useState26[0],
+    setPendingEdits = _useState26[1];
+  var _useState27 = useState([]),
     _useState28 = _slicedToArray(_useState27, 2),
-    pendingEdits = _useState28[0],
-    setPendingEdits = _useState28[1];
-  var _useState29 = useState([]),
+    newRows = _useState28[0],
+    setNewRows = _useState28[1];
+  var _useState29 = useState(null),
     _useState30 = _slicedToArray(_useState29, 2),
-    newRows = _useState30[0],
-    setNewRows = _useState30[1];
+    activeCell = _useState30[0],
+    setActiveCell = _useState30[1];
   var _useState31 = useState(null),
     _useState32 = _slicedToArray(_useState31, 2),
-    activeCell = _useState32[0],
-    setActiveCell = _useState32[1];
-  var _useState33 = useState(null),
+    editingCell = _useState32[0],
+    setEditingCell = _useState32[1];
+  var _useState33 = useState(false),
     _useState34 = _slicedToArray(_useState33, 2),
-    editingCell = _useState34[0],
-    setEditingCell = _useState34[1];
-  var _useState35 = useState(false),
-    _useState36 = _slicedToArray(_useState35, 2),
-    isSaving = _useState36[0],
-    setIsSaving = _useState36[1];
+    isSaving = _useState34[0],
+    setIsSaving = _useState34[1];
   var tableContainerRef = useRef(null);
   // Refs
   var columnMenuRef = useRef(null);
@@ -564,10 +578,10 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   }, [pageSize]);
   // Follow an external `pageNumber` change (adjust-during-render pattern);
   // internal page navigation is left alone while the prop is unchanged.
-  var _useState37 = useState(pageNumber),
-    _useState38 = _slicedToArray(_useState37, 2),
-    prevPageNumber = _useState38[0],
-    setPrevPageNumber = _useState38[1];
+  var _useState35 = useState(pageNumber),
+    _useState36 = _slicedToArray(_useState35, 2),
+    prevPageNumber = _useState36[0],
+    setPrevPageNumber = _useState36[1];
   if (pageNumber !== prevPageNumber) {
     setPrevPageNumber(pageNumber);
     if (typeof pageNumber === "number" && pageNumber !== currentPage) {
@@ -588,16 +602,6 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
       initialDataRef.current = initialData;
     }
   }, [initialData]);
-  useEffect(function () {
-    var checkMobile = function checkMobile() {
-      return setIsMobileView(window.innerWidth < responsiveBreakpoint);
-    };
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return function () {
-      return window.removeEventListener("resize", checkMobile);
-    };
-  }, [responsiveBreakpoint]);
   // Click-outside handlers
   var closeColumnMenu = useCallback(function () {
     return setShowColumnMenu(false);
@@ -608,14 +612,21 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   useClickOutside([columnMenuRef, columnToggleBtnRef], closeColumnMenu, {
     enabled: showColumnMenu
   });
-  useClickOutside([actionMenuRef], closeActionMenu, {
-    enabled: activeActionRowKey !== null
-  });
   // Computed values
   var activeAnchorEl = useMemo(function () {
     if (activeActionRowKey === null) return null;
     return actionButtonRefs.current[activeActionRowKey];
   }, [activeActionRowKey]);
+  // The trigger counts as "inside": a press on it must not close the menu
+  // only for the trigger's own click to re-open it.
+  var activeAnchorRef = useMemo(function () {
+    return {
+      current: activeAnchorEl
+    };
+  }, [activeAnchorEl]);
+  useClickOutside([actionMenuRef, activeAnchorRef], closeActionMenu, {
+    enabled: activeActionRowKey !== null
+  });
   var visibleColumns = useMemo(function () {
     return columnsState.filter(function (col) {
       return col.isVisible !== false;
@@ -937,6 +948,21 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     });
     setCurrentPage(1);
   }, [onFilter, onFilterChange]);
+  // Commits several filters at once (the phone filter sheet's Apply).
+  var applyFilters = useCallback(function (patch) {
+    setFilters(function (prev) {
+      var newFilters = _objectSpread2(_objectSpread2({}, prev), patch);
+      onFilter === null || onFilter === void 0 || onFilter(newFilters);
+      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
+      return newFilters;
+    });
+    setCurrentPage(1);
+  }, [onFilter, onFilterChange]);
+  // One open swipe row at a time: `{ key, side }`.
+  var _useState37 = useState(null),
+    _useState38 = _slicedToArray(_useState37, 2),
+    openSwipe = _useState38[0],
+    setOpenSwipe = _useState38[1];
   var handleSelectAll = useCallback(function () {
     setSelectedRows(function (prev) {
       var newSelection = new Set(prev);
@@ -1133,6 +1159,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     activeAnchorEl: activeAnchorEl,
     registerActionButton: registerActionButton,
     actionMenuRef: actionMenuRef,
+    actionMenuPresentation: actionMenuPresentation,
     toggleExpandRow: toggleExpandRow,
     handleSelectRow: handleSelectRow,
     toggleActions: toggleActions,
@@ -1147,7 +1174,10 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     onCellDoubleClick: handleCellDoubleClick,
     renderInteractiveCellInput: renderInteractiveCellInput,
     invalidCellSet: invalidCellSet,
-    pendingEdits: pendingEdits
+    pendingEdits: pendingEdits,
+    swipeActions: swipeActions,
+    openSwipe: openSwipe,
+    setOpenSwipe: setOpenSwipe
   };
   var showToolbarBar = showToolbar || interactive && (isDirty || !!renderAddRowButton || !!renderExternalAddRow);
   var renderAddRowClickableRow = useCallback(function () {
@@ -1314,7 +1344,9 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
       filterable: filterable,
       visibleColumns: visibleColumns,
       filters: filters,
-      handleFilter: handleFilter
+      handleFilter: handleFilter,
+      applyFilters: applyFilters,
+      presentation: phoneFilters ? "sheet" : "inline"
     }), columnPickerVisible && showColumnMenu && jsx(ColumnMenu, {
       id: columnMenuId,
       columns: columnsState,
@@ -1322,12 +1354,16 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
       menuRef: columnMenuRef,
       theme: safeTheme
     }), !isMobileView && jsx("div", {
-      className: "overflow-x-auto overflow-y-visible",
+      "data-sticky-header": stickyHeader ? "" : undefined,
+      className: cn(stickyHeader ? "overflow-auto overscroll-contain" : "overflow-x-auto overflow-y-visible"),
+      style: stickyHeader && stickyHeader !== true ? {
+        maxHeight: typeof stickyHeader === "number" ? "".concat(stickyHeader, "px") : stickyHeader
+      } : undefined,
       children: jsxs("table", _objectSpread2(_objectSpread2({
         className: cn("min-w-full divide-y divide-line", className)
       }, props), {}, {
         children: [jsxs("thead", {
-          className: safeTheme.accentColor,
+          className: cn(safeTheme.accentColor, stickyHeader && "sticky top-0 z-sticky shadow-[0_1px_0_0] shadow-line"),
           children: [jsxs("tr", {
             children: [hasDetailsColumn && jsx("th", {
               className: "w-8 px-4 py-3"
@@ -1344,33 +1380,44 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
               })
             }), visibleColumns.map(function (column) {
               var _column$rules;
+              var isSortable = sortable && column.sortable !== false;
+              var isSorted = sortConfig.key === column.key;
+              var ariaSort = !isSortable ? undefined : isSorted ? sortConfig.direction === "desc" ? "descending" : "ascending" : "none";
+              var labelContent = jsxs(Fragment, {
+                children: [jsx("span", {
+                  children: column.label
+                }), (column.required || ((_column$rules = column.rules) === null || _column$rules === void 0 ? void 0 : _column$rules.required)) && jsx("span", {
+                  className: "text-error-500 font-bold ml-0.5",
+                  title: "Required field",
+                  children: "*"
+                })]
+              });
               return jsx("th", {
-                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", {
-                  "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800": sortable && column.sortable !== false
-                }),
-                onClick: function onClick() {
-                  return column.sortable !== false && handleSort(column.key);
-                },
-                children: jsxs("div", {
-                  className: "flex items-center gap-1",
-                  children: [jsx("span", {
-                    children: column.label
-                  }), (column.required || ((_column$rules = column.rules) === null || _column$rules === void 0 ? void 0 : _column$rules.required)) && jsx("span", {
-                    className: "text-error-500 font-bold ml-0.5",
-                    title: "Required field",
-                    children: "*"
-                  }), sortable && column.sortable !== false && jsxs("div", {
+                scope: "col",
+                "aria-sort": ariaSort,
+                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", isSortable && "p-0"),
+                children: isSortable ? jsxs("button", {
+                  type: "button",
+                  onClick: function onClick() {
+                    return handleSort(column.key);
+                  },
+                  className: cn("flex w-full items-center gap-1 px-6 py-3 text-left uppercase tracking-wider", "hover:bg-line/50 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500", "transition-colors duration-fast motion-reduce:transition-none"),
+                  children: [labelContent, jsxs("span", {
                     className: "flex flex-col",
+                    "aria-hidden": "true",
                     children: [jsx(ChevronUp, {
                       className: cn("h-3 w-3", {
-                        "text-primary-600": sortConfig.key === column.key && sortConfig.direction === "asc"
+                        "text-primary-600": isSorted && sortConfig.direction === "asc"
                       })
                     }), jsx(ChevronDown, {
                       className: cn("h-3 w-3 -mt-1", {
-                        "text-primary-600": sortConfig.key === column.key && sortConfig.direction === "desc"
+                        "text-primary-600": isSorted && sortConfig.direction === "desc"
                       })
                     })]
                   })]
+                }) : jsx("div", {
+                  className: "flex items-center gap-1",
+                  children: labelContent
                 })
               }, column.key);
             }), columnPickerVisible && jsx("th", {

package/dist/esm/components/core/Table/TableRow.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Trash2, MoreVertical } from 'lucide-react';
 import ActionMenu from './ActionMenu.js';
+import { TOUCH_TARGET } from '../../../utils/touchTarget.js';
 import { getRowKey, resolveActions, rowHasDetails, getActionLabelText, getHoverClass, getStripeProps } from './helpers.js';
 
 /**
@@ -35,6 +36,8 @@ function TableRow(_ref) {
     activeAnchorEl = _ref.activeAnchorEl,
     registerActionButton = _ref.registerActionButton,
     actionMenuRef = _ref.actionMenuRef,
+    _ref$actionMenuPresen = _ref.actionMenuPresentation,
+    actionMenuPresentation = _ref$actionMenuPresen === void 0 ? "auto" : _ref$actionMenuPresen,
     toggleExpandRow = _ref.toggleExpandRow,
     handleSelectRow = _ref.handleSelectRow,
     toggleActions = _ref.toggleActions,
@@ -209,17 +212,21 @@ function TableRow(_ref) {
           }), menuActions.length > 0 && jsxs("div", {
             className: "relative inline-block",
             children: [jsx("button", {
+              type: "button",
               ref: function ref(el) {
                 return registerActionButton === null || registerActionButton === void 0 ? void 0 : registerActionButton(actionCellKey, el);
               },
               onClick: function onClick(e) {
                 return toggleActions(e, actionCellKey, row);
               },
+              "aria-haspopup": "menu",
               "aria-expanded": activeActionRowKey === actionCellKey,
-              className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800",
+              "aria-label": "Actions",
+              className: cn("inline-flex items-center justify-center p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET),
               title: "Actions",
               children: jsx(MoreVertical, {
-                className: "h-4 w-4"
+                className: "h-4 w-4",
+                "aria-hidden": "true"
               })
             }), activeActionRowKey === actionCellKey && jsx(ActionMenu, {
               actions: menuActions,
@@ -230,6 +237,7 @@ function TableRow(_ref) {
               menuRef: actionMenuRef,
               anchorEl: activeAnchorEl,
               onClose: closeActionMenu,
+              presentation: actionMenuPresentation,
               theme: theme
             })]
           })]