@multiplatform.one/table 7.8.0 → 7.11.0

package/dist/esm/components/DataTable/DataTableMobileCards.native.js

@@ -4,7 +4,7 @@ import { EmptyState } from "@multiplatform.one/components";
 import { Button, Checkbox } from "@multiplatform.one/forms";
 import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback } from "react";
-import { Text, View, XStack } from "tamagui";
+import { Text, View, VisuallyHidden, XStack } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
 import { withInterp } from "../../utils/withInterp.native.js";
@@ -16,6 +16,29 @@ function getColumnLabel(cell) {
   if (typeof metaLabel === "string" && metaLabel) return metaLabel;
   return typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
 }
+var selfNamingFields = /* @__PURE__ */new Set(["checkbox", "switch", "rating", "progress", "image", "signature", "fileupload", "colorpicker", "barcode", "geolocation"]);
+var indicatorIds = /* @__PURE__ */new Set(["status", "priority", "workflow_state", "state"]);
+var dateLike = /^\d{4}-\d{2}-\d{2}([T ]|$)|^\d{1,2}\/\d{1,2}\/\d{2,4}$/;
+var numberLike = /^[+\-−]?[\d,\s]*\d(\.\d+)?%?$/;
+function classifyCardField(cell) {
+  var _cell_column_id;
+  var _def_meta;
+  var def = cell.column.columnDef;
+  var id = String((_cell_column_id = cell.column.id) !== null && _cell_column_id !== void 0 ? _cell_column_id : "");
+  var role = (_def_meta = def.meta) === null || _def_meta === void 0 ? void 0 : _def_meta.role;
+  if (role === "hidden" || role === "skip") return "skip";
+  if (role === "actions" || id.startsWith("_") || def.field && selfNamingFields.has(def.field)) {
+    return "control";
+  }
+  var raw = typeof cell.getValue === "function" ? cell.getValue() : void 0;
+  if (raw == null || typeof raw === "string" && raw.trim() === "") return "skip";
+  if (role === "indicator" || indicatorIds.has(id)) return "bare";
+  if (typeof raw === "string") {
+    var value = raw.trim();
+    return numberLike.test(value) || dateLike.test(value) ? "figure" : "bare";
+  }
+  return "figure";
+}
 function DataTableMobileCards(param) {
   var {
     tableRows,
@@ -47,18 +70,51 @@ function DataTableMobileCards(param) {
     compact
   });
   var tableZebraOn = knobProps.tableZebra === "on";
+  var renderCell = useCallback(function (cell, index, rowData) {
+    return /* @__PURE__ */_jsx(TableCellContext.Provider, {
+      value: {
+        inTableCell: true,
+        isHeader: false
+      },
+      children: renderCellContent(cell, index, rowData)
+    });
+  }, [renderCellContent]);
   var renderMobileCard = useCallback(function (row, index) {
     var _ref;
     var rowData = row.original;
     var visibleCells = row.getVisibleCells();
     var [titleCell, ...detailCells] = visibleCells;
     var showDelete = showDeleteRow && !readOnly;
+    var bare = [];
+    var figures = [];
+    var controls = [];
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = detailCells[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var cell = _step.value;
+        var kind = classifyCardField(cell);
+        if (kind === "bare") bare.push(cell);else if (kind === "figure") figures.push(cell);else if (kind === "control") controls.push(cell);
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    var hasBody = bare.length > 0 || figures.length > 0 || controls.length > 0;
     return /* @__PURE__ */_jsxs(View, {
       testID: "data-table-card",
-      ...knobProps.surface,
       ...knobProps.cardSurface,
-      elevation: knobProps.elevation,
-      borderColor: "$color6",
       ...(tableZebraOn && index % 2 === 1 ? {
         backgroundColor: "$color2"
       } : {}),
@@ -71,7 +127,7 @@ function DataTableMobileCards(param) {
       /* @__PURE__ */_jsxs(XStack, {
         alignItems: "center",
         gap: "$2",
-        ...(detailCells.length > 0 ? {
+        ...(hasBody ? {
           paddingBottom: "$2",
           marginBottom: "$2",
           ...hairline.bottom,
@@ -96,16 +152,11 @@ function DataTableMobileCards(param) {
           flex: 1,
           minWidth: 0,
           "aria-label": getColumnLabel(titleCell),
+          accessibilityLabel: getColumnLabel(titleCell),
           ...{
             "data-card-slot": "title"
           },
-          children: /* @__PURE__ */_jsx(TableCellContext.Provider, {
-            value: {
-              inTableCell: true,
-              isHeader: false
-            },
-            children: renderCellContent(titleCell, index, rowData)
-          })
+          children: renderCell(titleCell, index, rowData)
         }) : /* @__PURE__ */_jsx(View, {
           flex: 1
         }), showRowNumbers && /* @__PURE__ */_jsxs(Text, {
@@ -128,35 +179,83 @@ function DataTableMobileCards(param) {
             row: index + 1
           })
         })]
-      }), /* Field rows: remaining visible columns as label/value pairs */
-      detailCells.map(function (cell) {
-        return /* @__PURE__ */_jsxs(View, {
-          flexDirection: "row",
-          alignItems: "center",
-          paddingVertical: "$1.5",
-          gap: "$2",
-          children: [/* @__PURE__ */_jsx(Text, {
-            fontSize: knobProps.sizeToken,
-            color: "$color10",
-            fontWeight: "500",
-            width: "40%",
-            flexShrink: 0,
-            children: getColumnLabel(cell)
-          }), /* @__PURE__ */_jsx(View, {
-            flex: 1,
+      }),
+      /* Self-naming values, wrapped into one flow. No printed labels:
+      the name goes to assistive tech only, at no layout cost. */
+      bare.length > 0 ? /* @__PURE__ */_jsx(XStack, {
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: "$2",
+        ...{
+          "data-card-slot": "meta"
+        },
+        children: bare.map(function (cell2, i) {
+          return /* @__PURE__ */_jsxs(XStack, {
+            alignItems: "center",
+            gap: "$2",
+            flexShrink: 1,
             minWidth: 0,
-            children: /* @__PURE__ */_jsx(TableCellContext.Provider, {
-              value: {
-                inTableCell: true,
-                isHeader: false
-              },
-              children: renderCellContent(cell, index, rowData)
-            })
-          })]
-        }, cell.id);
+            children: [/* @__PURE__ */_jsx(VisuallyHidden, {
+              children: `${getColumnLabel(cell2)}: `
+            }), /* @__PURE__ */_jsx(View, {
+              flexShrink: 1,
+              minWidth: 0,
+              children: renderCell(cell2, index, rowData)
+            }),
+            /* The separator TRAILS its value, so a line that wraps
+            starts with content instead of a stray dot. */
+            i < bare.length - 1 ? /* @__PURE__ */_jsx(Text, {
+              fontSize: knobProps.sizeToken,
+              color: "$color8",
+              "aria-hidden": true,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              children: "\xB7"
+            }) : null]
+          }, cell2.id);
+        })
+      }) : null, /* Figures keep their name, inline beside the value. */
+      figures.length > 0 ? /* @__PURE__ */_jsx(XStack, {
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: "$3",
+        paddingTop: bare.length > 0 ? "$1.5" : 0,
+        ...{
+          "data-card-slot": "figure"
+        },
+        children: figures.map(function (cell2) {
+          return /* @__PURE__ */_jsxs(XStack, {
+            alignItems: "center",
+            gap: "$1.5",
+            flexShrink: 1,
+            minWidth: 0,
+            children: [/* @__PURE__ */_jsx(Text, {
+              fontSize: knobProps.sizeToken,
+              color: "$color10",
+              fontWeight: "500",
+              children: getColumnLabel(cell2)
+            }), /* @__PURE__ */_jsx(View, {
+              flexShrink: 1,
+              minWidth: 0,
+              children: renderCell(cell2, index, rowData)
+            })]
+          }, cell2.id);
+        })
+      }) : null, /* Controls keep a row of their own — they are tap targets. */
+      controls.map(function (cell2) {
+        return /* @__PURE__ */_jsxs(View, {
+          paddingTop: "$2",
+          minWidth: 0,
+          ...{
+            "data-card-slot": "control"
+          },
+          children: [/* @__PURE__ */_jsx(VisuallyHidden, {
+            children: `${getColumnLabel(cell2)}: `
+          }), renderCell(cell2, index, rowData)]
+        }, cell2.id);
       })]
     }, `${row.id}-${index}`);
-  }, [enableRowSelection, showRowNumbers, showDeleteRow, readOnly, disabled, dataLength, minRows, renderCellContent, onDeleteRow, compact, knobProps, tableZebraOn, t, selectRowLabel, getRowPressProps]);
+  }, [enableRowSelection, showRowNumbers, showDeleteRow, readOnly, disabled, dataLength, minRows, renderCell, onDeleteRow, compact, knobProps, tableZebraOn, t, selectRowLabel, getRowPressProps]);
   return /* @__PURE__ */_jsxs(View, {
     flexDirection: "column",
     ...knobProps.gap,
@@ -198,5 +297,5 @@ function DataTableMobileCards(param) {
     })]
   });
 }
-export { DataTableMobileCards };
+export { DataTableMobileCards, classifyCardField, getColumnLabel };
 //# sourceMappingURL=DataTableMobileCards.native.js.map

package/dist/esm/components/DataTable/DataTableMobileCards.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","TrashIcon","EmptyState","Button","Checkbox","hairline","useResolvedKnobs","useCallback","Text","View","XStack","useTranslation","TableCellContext","withInterp","rowIntentProps","getColumnLabel","cell","_columnDef_meta","columnDef","column","metaLabel","meta","label","header","id","DataTableMobileCards","param","tableRows","enableRowSelection","showRowNumbers","showDeleteRow","readOnly","disabled","dataLength","minRows","hasActiveFilters","renderCellContent","onDeleteRow","selectAllChecked","selectAllIndeterminate","onToggleSelectAll","compact","selectRowLabel","getRowPressProps","queryInFlight","t","knobProps","component","tableZebraOn","tableZebra","renderMobileCard","row","index","_ref","rowData","original","visibleCells","getVisibleCells","titleCell","detailCells","showDelete","testID","surface","cardSurface","elevation","borderColor","backgroundColor","children","alignItems","gap","length","paddingBottom","marginBottom","bottom","borderBottomColor","checked","getIsSelected","onChange","toggleSelected","checkboxProps","flex","minWidth","Provider","value","inTableCell","isHeader","fontSize","sizeToken","color","fontWeight","chromeless","circular","size","icon","onPress","map","flexDirection","paddingVertical","width","flexShrink","shouldSelect","borderRadius","title"],"sources":["../../../../src/components/DataTable/DataTableMobileCards.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","TrashIcon","EmptyState","Button","Checkbox","hairline","useResolvedKnobs","useCallback","Text","View","VisuallyHidden","XStack","useTranslation","TableCellContext","withInterp","rowIntentProps","getColumnLabel","cell","_columnDef_meta","columnDef","column","metaLabel","meta","label","header","id","selfNamingFields","Set","indicatorIds","dateLike","numberLike","classifyCardField","_cell_column_id","_def_meta","def","String","role","startsWith","field","has","raw","getValue","trim","value","test","DataTableMobileCards","param","tableRows","enableRowSelection","showRowNumbers","showDeleteRow","readOnly","disabled","dataLength","minRows","hasActiveFilters","renderCellContent","onDeleteRow","selectAllChecked","selectAllIndeterminate","onToggleSelectAll","compact","selectRowLabel","getRowPressProps","queryInFlight","t","knobProps","component","tableZebraOn","tableZebra","renderCell","index","rowData","Provider","inTableCell","isHeader","children","renderMobileCard","row","_ref","original","visibleCells","getVisibleCells","titleCell","detailCells","showDelete","bare","figures","controls","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Symbol","iterator","_step","next","done","kind","push","err","return","hasBody","length","testID","cardSurface","backgroundColor","alignItems","gap","paddingBottom","marginBottom","bottom","borderBottomColor","checked","getIsSelected","onChange","toggleSelected","checkboxProps","flex","minWidth","accessibilityLabel","fontSize","sizeToken","color","fontWeight","chromeless","circular","size","icon","onPress","flexWrap","map","cell2","i","flexShrink","accessibilityElementsHidden","importantForAccessibility","paddingTop"],"sources":["../../../../src/components/DataTable/DataTableMobileCards.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/DataTable/DataTableRoot.mjs

@@ -12,7 +12,7 @@ import { useDragScroll } from "../../hooks/useDragScroll.mjs";
 import { useDataTableKeyboard } from "../../hooks/useDataTableKeyboard.mjs";
 import { DataTableColumnPinning } from "../DataTableColumnPinning/index.mjs";
 import { DataTablePagination } from "../DataTablePagination/index.mjs";
-import { DataTableToolbar } from "../DataTableToolbar/index.mjs";
+import { DataTableCardToolbar, DataTableToolbar } from "../DataTableToolbar/index.mjs";
 import { DataTableBulkActions } from "../DataTableBulkActions/index.mjs";
 import { DataTableCell } from "../DataTableCell/index.mjs";
 import { ColumnHeaderFilter } from "../ColumnHeaderFilter/index.mjs";
@@ -20,7 +20,7 @@ import { DataTableFilterChips } from "../DataTableFilterChips/index.mjs";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext.mjs";
 import { DataTableStateContext } from "./DataTableStateContext.mjs";
-import { DataTableCardControls } from "./DataTableCardControls.mjs";
+import { DataTableCardControls, DataTableCardSortControl } from "./DataTableCardControls.mjs";
 import { DataTableMobileCards } from "./DataTableMobileCards.mjs";
 import { DataTableDocumentList } from "./DataTableDocumentList.mjs";
 import { DataTableVirtualized } from "./DataTableVirtualized.mjs";
@@ -249,6 +249,7 @@ function DataTableRoot({
         flexBasis: "auto"
       };
     }
+    if (columnLayout === "equal" && !enableColumnResizing) return {};
     if (hasExplicitSize || enableColumnResizing || columnLayout === "scroll") {
       return {
         width: col.getSize()
@@ -332,14 +333,15 @@ function DataTableRoot({
         flexGrow: 0,
         flexShrink: 0,
         flexBasis: "auto",
-        minWidth: 80
+        minWidth: 0
       };
     }
     if (enableColumnResizing) {
       return {
         flexGrow: 0,
         flexShrink: 0,
-        flexBasis: "auto"
+        flexBasis: "auto",
+        minWidth: 0
       };
     }
     return {
@@ -807,6 +809,9 @@ function DataTableRoot({
     selectAllScope,
     filterUi
   }), [table, state, actions, computed, selectAllScope, filterUi]);
+  const hasCardSort = showCards && enableSorting && table.getVisibleLeafColumns().some(column => column.getCanSort());
+  const defaultCardToolbar = showCards && !renderToolbar;
+  const ToolbarComponent = defaultCardToolbar ? DataTableCardToolbar : DataTableToolbar;
   const renderToolbarComponent = () => {
     const activeFilterCount = table.getState().columnFilters?.length || 0;
     if (renderToolbar) {
@@ -823,10 +828,16 @@ function DataTableRoot({
         isFetching: Boolean(state.isFetching)
       });
     }
-    return /* @__PURE__ */jsx(DataTableToolbar, {
+    return /* @__PURE__ */jsx(ToolbarComponent, {
       globalFilter: state.globalFilter || "",
       onGlobalFilterChange: actions.setGlobalFilter,
       onClearFilters: actions.clearFilters,
+      customActions: defaultCardToolbar && hasCardSort ? /* @__PURE__ */jsx(DataTableCardSortControl, {
+        table,
+        compact: isCompact,
+        disabled,
+        contained: true
+      }) : void 0,
       activeFilterCount,
       onSaveView: actions.saveView,
       onLoadView: actions.loadView,
@@ -857,7 +868,7 @@ function DataTableRoot({
     });
   };
   const renderInner = (tableData, effectiveHandleAddRow, effectiveHandleDeleteRow, _effectiveHandleCellChange) => {
-    const hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
+    const hasToolbar = enableGlobalSearch || enableFiltering || enableViews || defaultCardToolbar && hasCardSort;
     const scrollContainerRef = useRef(null);
     const tableBodyRef = useRef(null);
     const [bodyClipped, setBodyClipped] = useState(false);
@@ -964,7 +975,7 @@ function DataTableRoot({
               getRowPressProps
             } : {})
           }) : showCards ? /* @__PURE__ */jsxs(Fragment, {
-            children: [/* @__PURE__ */jsx(DataTableCardControls, {
+            children: [!defaultCardToolbar && /* @__PURE__ */jsx(DataTableCardControls, {
               table,
               enableSorting,
               enableFiltering,
@@ -1459,13 +1470,41 @@ function DataTableRoot({
                   }
                 })]
               }), hasFooter && /* @__PURE__ */jsx(Table.Foot, {
-                children: footerGroups.map(footerGroup => /* @__PURE__ */jsx(Table.Row, {
-                  children: footerGroup.headers.map(header => {
+                children: footerGroups.map(footerGroup => /* @__PURE__ */jsxs(Table.Row, {
+                  children: [enableRowSelection && /* @__PURE__ */jsx(Table.Cell, {
+                    cellWidth: selectionColWidth,
+                    cellHeight,
+                    cellLocation: "first"
+                  }), showRowNumbers && /* @__PURE__ */jsx(Table.Cell, {
+                    cellWidth: chrome.rowNumberCol,
+                    cellHeight,
+                    cellLocation: enableRowSelection ? "middle" : "first"
+                  }), enableRowExpansion && /* @__PURE__ */jsx(Table.Cell, {
+                    cellWidth: chrome.expandCol,
+                    cellHeight,
+                    cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first"
+                  }), footerGroup.headers.map(header => {
+                    const stickyStyle = getStickyStyle(header.column.id);
                     const columnAlign = resolveColumnAlign({
                       ...header.column.columnDef,
                       id: header.column.id
                     });
                     return /* @__PURE__ */jsx(Table.Cell, {
+                      ...cellFlexProps,
+                      ...getColSizeProps(header.column),
+                      ...(isWeb && stickyStyle ? {
+                        style: {
+                          position: "sticky",
+                          ...("insetInlineStart" in stickyStyle && {
+                            insetInlineStart: stickyStyle.insetInlineStart
+                          }),
+                          ...("insetInlineEnd" in stickyStyle && {
+                            insetInlineEnd: stickyStyle.insetInlineEnd
+                          }),
+                          zIndex: 2,
+                          backgroundColor: "var(--color2)"
+                        }
+                      } : {}),
                       justifyContent: alignToFlex(columnAlign),
                       "data-align": columnAlign,
                       children: header.isPlaceholder ? null : /* @__PURE__ */jsx(View, {
@@ -1481,7 +1520,11 @@ function DataTableRoot({
                         children: flexRender(header.column.columnDef.footer, header.getContext())
                       })
                     }, header.id);
-                  })
+                  }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Table.Cell, {
+                    cellWidth: chrome.deleteCol,
+                    cellHeight,
+                    cellLocation: "last"
+                  })]
                 }, footerGroup.id))
               })]
             })