@multiplatform.one/table 6.7.0 → 7.1.0

package/dist/cjs/components/SimpleTable/index.cjs

@@ -28,9 +28,12 @@ __export(SimpleTable_exports, {
 module.exports = __toCommonJS(SimpleTable_exports);
 var import_components = require("@multiplatform.one/components");
 var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
 var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
 var import_table_primitives = require("@multiplatform.one/table-primitives");
+var import_rowPress = require("../../utils/rowPress.cjs");
+var import_withInterp = require("../../utils/withInterp.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function alignToFlex(align) {
   switch (align) {
@@ -42,65 +45,286 @@ function alignToFlex(align) {
       return "flex-start";
   }
 }
+function cellLocationFor(index, count) {
+  if (index === 0) return "first";
+  if (index === count - 1) return "last";
+  return "middle";
+}
+function rowLocationFor(index, count) {
+  if (index === 0) return "first";
+  if (index === count - 1) return "last";
+  return "middle";
+}
+function resolveRowId(row, index, getRowId) {
+  return getRowId?.(row, index) ?? String(index);
+}
+function AlignedCellText({
+  children,
+  align,
+  body,
+  sizeToken,
+  emphasized,
+  muted
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    ...body,
+    fontSize: sizeToken,
+    color: muted ? "$color11" : "$color12",
+    fontWeight: emphasized ? "600" : body.fontWeight,
+    display: "block",
+    width: "100%",
+    textAlign: align ?? "left",
+    numberOfLines: 1,
+    ellipsizeMode: "tail",
+    ...(import_tamagui.isWeb ? {
+      title: String(children)
+    } : {}),
+    ...(align === "right" ? {
+      fontVariant: ["tabular-nums"]
+    } : {}),
+    children
+  });
+}
+function renderCellContent(col, row, rowIndex, colIndex, body, sizeToken) {
+  const raw = row[col.accessorKey];
+  const rendered = col.cell ? col.cell(raw, row, rowIndex) : raw;
+  if (rendered == null || typeof rendered === "string" || typeof rendered === "number") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AlignedCellText, {
+      align: col.align,
+      body,
+      sizeToken,
+      emphasized: colIndex === 0,
+      children: rendered ?? ""
+    });
+  }
+  return rendered;
+}
+function useSimpleTableRowPress({
+  data,
+  columns,
+  onRowPress,
+  rowLabel,
+  disabled
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const isSSR = typeof window === "undefined";
+  const rowPressActive = Boolean(onRowPress) && !disabled;
+  const [rowPressAnchor, setRowPressAnchor] = (0, import_react.useState)(0);
+  const effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(data.length - 1, 0));
+  const deriveRowLabel = (0, import_react.useCallback)((row, rowIndex) => {
+    const fromAccessor = rowLabel?.(row);
+    if (fromAccessor) return fromAccessor;
+    const first = columns[0] ? row[columns[0].accessorKey] : void 0;
+    if (typeof first === "string" && first.length > 0 || typeof first === "number") {
+      return String(first);
+    }
+    return (0, import_withInterp.withInterp)(t("Row {{row}}", {
+      row: rowIndex + 1
+    }), {
+      row: rowIndex + 1
+    });
+  }, [rowLabel, columns, t]);
+  const getRowPressProps = (0, import_react.useCallback)((row, rowIndex, variant = "row") => {
+    if (!rowPressActive) return {};
+    const handlePress = event => {
+      if (event?.defaultPrevented) return;
+      const targetEl = event?.target ?? event?.nativeEvent?.target;
+      if (import_tamagui.isWeb && typeof Element !== "undefined" && targetEl instanceof Element) {
+        const boundary = targetEl.closest('[data-row-press="true"]');
+        if ((0, import_rowPress.isInteractiveInnerTarget)(targetEl, boundary)) return;
+      }
+      onRowPress?.(row, rowIndex);
+    };
+    return {
+      "aria-label": deriveRowLabel(row, rowIndex),
+      onPress: handlePress,
+      cursor: "pointer",
+      pressStyle: {
+        backgroundColor: "$backgroundPress"
+      },
+      ...(variant === "card" ? {
+        role: "button"
+      } : {}),
+      ...(import_tamagui.isWeb && !isSSR ? {
+        tabIndex: rowIndex === effectiveRowPressAnchor ? 0 : -1,
+        // LC-71: inset ring on the row (table/card clip severs an outer
+        // ring). focusVisibleStyle = keyboard-origin only — mouse click
+        // paints fill/press, never a ring. Selected/`_intent` is fill.
+        focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+          outlineOffset: -2
+        }),
+        "data-row-press": "true",
+        onFocus: e => {
+          if (e.target === e.currentTarget) setRowPressAnchor(rowIndex);
+        },
+        onBlur: e => {
+          const next = e.relatedTarget;
+          if (!(next instanceof Element) || !next.closest('[data-row-press="true"]')) {
+            setRowPressAnchor(0);
+          }
+        },
+        onKeyDown: e => {
+          if (e.defaultPrevented) return;
+          if (e.target !== e.currentTarget) return;
+          const key = e.key;
+          if (key === "Enter" || key === " " || key === "Spacebar") {
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.repeat) return;
+            onRowPress?.(row, rowIndex);
+            return;
+          }
+          if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+            e.preventDefault();
+            e.stopPropagation();
+            const rowEl = e.currentTarget;
+            const scope = rowEl.closest('[data-row-press-scope="true"]') ?? rowEl.ownerDocument;
+            const pressRows = Array.from(scope.querySelectorAll('[data-row-press="true"]'));
+            const currentIdx = pressRows.indexOf(rowEl);
+            if (currentIdx < 0) return;
+            const nextIdx = key === "Home" ? 0 : key === "End" ? pressRows.length - 1 : Math.min(Math.max(currentIdx + (key === "ArrowDown" ? 1 : -1), 0), pressRows.length - 1);
+            pressRows[nextIdx]?.focus();
+          }
+        }
+      } : {})
+    };
+  }, [rowPressActive, deriveRowLabel, onRowPress, effectiveRowPressAnchor, isSSR]);
+  return {
+    rowPressActive,
+    getRowPressProps
+  };
+}
 function SimpleTableMobileCards({
   data,
-  columns
+  columns,
+  caption,
+  onRowPress,
+  rowLabel,
+  getRowId,
+  disabled
 }) {
   const {
     t
   } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "SimpleTable"
+  });
+  const {
+    rowPressActive,
+    getRowPressProps
+  } = useSimpleTableRowPress({
+    data,
+    columns,
+    onRowPress,
+    rowLabel,
+    disabled
+  });
+  const tableZebraOn = knobProps.tableZebra === "on";
+  const [titleCol, ...detailCols] = columns;
   if (data.length === 0) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
-      compact: true,
-      backgroundColor: "$color1",
-      borderRadius: "$4",
-      "aria-live": "polite",
-      title: t("No data available")
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      flexDirection: "column",
+      ...knobProps.gap,
+      children: [caption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.label,
+        color: "$color11",
+        children: caption
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+        compact: true,
+        "aria-live": "polite",
+        title: t("No data available")
+      })]
     });
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     flexDirection: "column",
-    gap: "$2",
-    children: data.map((row, rowIndex) => {
+    ...knobProps.gap,
+    ...(rowPressActive ? {
+      "data-row-press-scope": "true"
+    } : {}),
+    children: [caption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.label,
+      color: "$color11",
+      children: caption
+    }) : null, data.map((row, rowIndex) => {
       const intent = row._intent;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        backgroundColor: "$color1",
-        borderRadius: "$4",
-        borderWidth: 1,
-        borderColor: "$color6",
-        padding: "$3",
+      const titleValue = titleCol ? row[titleCol.accessorKey] : void 0;
+      const titleRendered = titleCol?.cell ? titleCol.cell(titleValue, row, rowIndex) : titleValue;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+        testID: "simple-table-card",
+        ...knobProps.surface,
+        ...knobProps.cardSurface,
+        elevation: knobProps.elevation,
+        ...(tableZebraOn && rowIndex % 2 === 1 ? {
+          backgroundColor: "$color2"
+        } : {}),
         ...(intent ? {
-          theme: intent
+          theme: intent,
+          backgroundColor: "$color3"
         } : {}),
-        children: columns.map(col => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+        hoverStyle: {
+          backgroundColor: "$backgroundHover"
+        },
+        ...{
+          animation: "quick"
+        },
+        ...{
+          "data-table-zebra": tableZebraOn ? rowIndex % 2 === 0 ? "even" : "odd" : "off"
+        },
+        ...getRowPressProps(row, rowIndex, "card"),
+        children: [titleCol ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...(detailCols.length > 0 ? {
+            paddingBottom: "$2",
+            marginBottom: "$2",
+            ...import_theme.hairline.bottom,
+            borderBottomColor: "$color6"
+          } : {}),
+          children: typeof titleRendered === "string" || typeof titleRendered === "number" || titleRendered == null ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AlignedCellText, {
+            align: titleCol.align,
+            body: knobProps.body,
+            sizeToken: knobProps.sizeToken,
+            emphasized: true,
+            children: titleRendered ?? ""
+          }) : titleRendered
+        }) : null, detailCols.map((col, detailIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
           flexDirection: "row",
           alignItems: "center",
           paddingVertical: "$1.5",
           gap: "$2",
+          ...(detailIndex < detailCols.length - 1 ? {
+            ...import_theme.hairline.bottom,
+            borderBottomColor: "$color6"
+          } : {}),
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$3",
+            ...knobProps.label,
             color: "$color10",
-            fontWeight: "500",
             width: "40%",
             flexShrink: 0,
+            numberOfLines: 1,
+            ellipsizeMode: "tail",
             children: col.header
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
             flex: 1,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$3",
-              color: "$color12",
-              textAlign: col.align ?? "left",
-              children: String(row[col.accessorKey] ?? "")
-            })
+            minWidth: 0,
+            children: renderCellContent(col, row, rowIndex, detailIndex + 1, knobProps.body, knobProps.sizeToken)
           })]
-        }, col.accessorKey))
-      }, rowIndex);
-    })
+        }, col.accessorKey))]
+      }, resolveRowId(row, rowIndex, getRowId));
+    })]
   });
 }
 function SimpleTableDesktop({
   data,
   columns,
+  caption,
+  onRowPress,
+  rowLabel,
+  getRowId,
+  disabled,
   ...props
 }) {
   const {
@@ -111,32 +335,71 @@ function SimpleTableDesktop({
   const {
     t
   } = (0, import_react_i18next.useTranslation)();
+  const {
+    rowPressActive,
+    getRowPressProps
+  } = useSimpleTableRowPress({
+    data,
+    columns,
+    onRowPress,
+    rowLabel,
+    disabled
+  });
+  const tableZebraOn = knobProps.tableZebra === "on";
+  const ariaLabel = caption ? void 0 : props["aria-label"];
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     ...props,
+    minWidth: 0,
+    ...{
+      overflow: "auto"
+    },
     children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
-      "aria-label": props["aria-label"],
-      ...knobProps.borderRadius,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
+      "aria-label": ariaLabel,
+      ...{
+        "aria-rowcount": data.length + 1
+      },
+      children: [caption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Caption, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          color: "$color11",
+          children: caption
+        })
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
           children: columns.map((col, colIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
             justifyContent: alignToFlex(col.align),
-            cellLocation: colIndex === 0 ? "first" : colIndex === columns.length - 1 ? "last" : "middle",
+            cellLocation: cellLocationFor(colIndex, columns.length),
             "data-align": col.align ?? "left",
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              ...knobProps.body,
+              ...knobProps.label,
+              color: "$color11",
               fontWeight: "600",
-              fontSize: "$3",
               display: "block",
               width: "100%",
               textAlign: col.align ?? "left",
+              numberOfLines: 1,
+              ellipsizeMode: "tail",
+              ...(col.align === "right" ? {
+                fontVariant: ["tabular-nums"]
+              } : {}),
               children: col.header
             })
           }, col.accessorKey))
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Body, {
+        ...(rowPressActive ? {
+          "data-row-press-scope": "true"
+        } : {}),
         children: data.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+            cellWidth: "auto",
+            ...{
+              colSpan: Math.max(columns.length, 1)
+            },
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
               compact: true,
+              "aria-live": "polite",
               title: t("No data available")
             })
           })
@@ -145,23 +408,35 @@ function SimpleTableDesktop({
           const intentProps = intent ? {
             [intent]: true
           } : {};
+          const isLast = rowIndex === data.length - 1;
+          const zebraFill = !intent && tableZebraOn && rowIndex % 2 === 1 ? {
+            backgroundColor: "$color2"
+          } : {};
           return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
-            rowLocation: rowIndex === 0 ? "first" : rowIndex === data.length - 1 ? "last" : "middle",
+            rowLocation: rowLocationFor(rowIndex, data.length),
+            hoverStyle: {
+              backgroundColor: "$backgroundHover"
+            },
+            ...{
+              animation: "quick"
+            },
+            ...zebraFill,
             ...intentProps,
+            ...{
+              "data-table-zebra": tableZebraOn ? rowIndex % 2 === 0 ? "even" : "odd" : "off"
+            },
+            ...getRowPressProps(row, rowIndex),
             children: columns.map((col, colIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
               justifyContent: alignToFlex(col.align),
-              cellLocation: colIndex === 0 ? "first" : colIndex === columns.length - 1 ? "last" : "middle",
+              cellLocation: cellLocationFor(colIndex, columns.length),
               "data-align": col.align ?? "left",
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                fontSize: "$3",
-                color: "$color12",
-                display: "block",
-                width: "100%",
-                textAlign: col.align ?? "left",
-                children: String(row[col.accessorKey] ?? "")
-              })
+              ...(!isLast ? {
+                ...import_theme.hairline.bottom,
+                borderBottomColor: "$color6"
+              } : {}),
+              children: renderCellContent(col, row, rowIndex, colIndex, knobProps.body, knobProps.sizeToken)
             }, col.accessorKey))
-          }, rowIndex);
+          }, resolveRowId(row, rowIndex, getRowId));
         })
       })]
     })
@@ -171,6 +446,11 @@ function SimpleTable({
   data,
   columns,
   layout = "auto",
+  caption,
+  onRowPress,
+  rowLabel,
+  getRowId,
+  disabled,
   ...props
 }) {
   const {
@@ -188,13 +468,23 @@ function SimpleTable({
       testID: "simple-table-cards",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleTableMobileCards, {
         data,
-        columns
+        columns,
+        caption,
+        onRowPress,
+        rowLabel,
+        getRowId,
+        disabled
       })
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleTableDesktop, {
     data,
     columns,
+    caption,
+    onRowPress,
+    rowLabel,
+    getRowId,
+    disabled,
     ...props
   });
 }