@multiplatform.one/table 7.4.1 → 7.6.0

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

@@ -58,19 +58,42 @@ function rowLocationFor(index, count) {
 function resolveRowId(row, index, getRowId) {
   return getRowId?.(row, index) ?? String(index);
 }
+function gridRule(borderWidth, on) {
+  if (!on || borderWidth === 0) return {};
+  return {
+    borderBottomWidth: borderWidth,
+    borderBottomColor: "$borderColor"
+  };
+}
+function cellPad(gap) {
+  return {
+    paddingHorizontal: gap,
+    paddingVertical: gap
+  };
+}
+function disabledChrome(disabled, disabledState) {
+  if (!disabled) return {};
+  if (disabledState.style === "dimWhole") {
+    return {
+      ...disabledState.assemblyKnobProps,
+      "aria-disabled": true
+    };
+  }
+  return {
+    ...disabledState.surfaceKnobProps,
+    "aria-disabled": true
+  };
+}
 function AlignedCellText({
   children,
   align,
   body,
-  sizeToken,
-  emphasized,
-  muted
+  fontSize
 }) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
     ...body,
-    fontSize: sizeToken,
-    color: muted ? "$color11" : "$color12",
-    fontWeight: emphasized ? "600" : body.fontWeight,
+    fontSize,
+    color: "$color12",
     display: "block",
     width: "100%",
     textAlign: align ?? "left",
@@ -85,15 +108,14 @@ function AlignedCellText({
     children
   });
 }
-function renderCellContent(col, row, rowIndex, colIndex, body, sizeToken) {
+function renderCellContent(col, row, rowIndex, body, fontSize) {
   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,
+      fontSize,
       children: rendered ?? ""
     });
   }
@@ -209,7 +231,8 @@ function SimpleTableMobileCards({
     t
   } = (0, import_react_i18next.useTranslation)();
   const {
-    knobProps
+    knobProps,
+    disabledState
   } = (0, import_theme.useResolvedKnobs)({
     component: "SimpleTable"
   });
@@ -225,13 +248,18 @@ function SimpleTableMobileCards({
   });
   const tableZebraOn = knobProps.tableZebra === "on";
   const [titleCol, ...detailCols] = columns;
+  const typeSize = knobProps.label.fontSize;
+  const motion = knobProps.transition ? {
+    transition: knobProps.transition
+  } : {};
   if (data.length === 0) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
       flexDirection: "column",
       ...knobProps.gap,
+      ...disabledChrome(Boolean(disabled), disabledState),
       children: [caption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         ...knobProps.label,
-        color: "$color11",
+        color: knobProps.textAccentColor,
         children: caption
       }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
         compact: true,
@@ -248,7 +276,7 @@ function SimpleTableMobileCards({
     } : {}),
     children: [caption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       ...knobProps.label,
-      color: "$color11",
+      color: knobProps.textAccentColor,
       children: caption
     }) : null, data.map((row, rowIndex) => {
       const intent = row._intent;
@@ -266,42 +294,38 @@ function SimpleTableMobileCards({
           theme: intent,
           backgroundColor: "$color3"
         } : {}),
-        hoverStyle: {
-          backgroundColor: "$backgroundHover"
-        },
-        ...{
-          animation: "quick"
-        },
+        ...(disabled ? {} : {
+          hoverStyle: {
+            backgroundColor: "$backgroundHover"
+          }
+        }),
+        ...motion,
+        ...disabledChrome(Boolean(disabled), disabledState),
         ...{
           "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"
+            paddingBottom: knobProps.gap.gap,
+            marginBottom: knobProps.gap.gap,
+            ...gridRule(knobProps.surface.borderWidth, true)
           } : {}),
           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,
+            fontSize: typeSize,
             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"
-          } : {}),
+          ...cellPad(knobProps.gap.gap),
+          ...knobProps.gap,
+          ...gridRule(knobProps.surface.borderWidth, detailIndex < detailCols.length - 1),
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
             ...knobProps.label,
-            color: "$color10",
+            color: knobProps.textAccentColor,
             width: "40%",
             flexShrink: 0,
             numberOfLines: 1,
@@ -310,7 +334,7 @@ function SimpleTableMobileCards({
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
             flex: 1,
             minWidth: 0,
-            children: renderCellContent(col, row, rowIndex, detailIndex + 1, knobProps.body, knobProps.sizeToken)
+            children: renderCellContent(col, row, rowIndex, knobProps.body, typeSize)
           })]
         }, col.accessorKey))]
       }, resolveRowId(row, rowIndex, getRowId));
@@ -328,7 +352,8 @@ function SimpleTableDesktop({
   ...props
 }) {
   const {
-    knobProps
+    knobProps,
+    disabledState
   } = (0, import_theme.useResolvedKnobs)({
     component: "SimpleTable"
   });
@@ -347,99 +372,111 @@ function SimpleTableDesktop({
   });
   const tableZebraOn = knobProps.tableZebra === "on";
   const ariaLabel = caption ? void 0 : props["aria-label"];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+  const typeSize = knobProps.label.fontSize;
+  const motion = knobProps.transition ? {
+    transition: knobProps.transition
+  } : {};
+  const pad = cellPad(knobProps.gap.gap);
+  const frameBorder = knobProps.surface.borderWidth;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
     ...props,
     minWidth: 0,
     ...{
-      overflow: "auto"
+      overflow: "auto",
+      "data-simple-table-frame": "true",
+      "data-border-width": String(frameBorder),
+      "data-animation": knobProps.transition ? "on" : "none"
     },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
-      "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
+    ...disabledChrome(Boolean(disabled), disabledState),
+    "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: knobProps.textAccentColor,
+        children: caption
+      })
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
+      borderBottomWidth: frameBorder,
+      borderBottomColor: "$borderColor",
+      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: cellLocationFor(colIndex, columns.length),
+          "data-align": col.align ?? "left",
+          "data-cell-pad": knobProps.gap.gap,
+          borderRadius: 0,
+          ...pad,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            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",
+          borderRadius: 0,
+          ...{
+            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")
+          })
         })
-      }) : 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, {
+      }) : data.map((row, rowIndex) => {
+        const intent = row._intent;
+        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: rowLocationFor(rowIndex, data.length),
+          ...(disabled ? {} : {
+            hoverStyle: {
+              backgroundColor: "$backgroundHover"
+            }
+          }),
+          ...motion,
+          ...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: 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",
-              display: "block",
-              width: "100%",
-              textAlign: col.align ?? "left",
-              numberOfLines: 1,
-              ellipsizeMode: "tail",
-              ...(col.align === "right" ? {
-                fontVariant: ["tabular-nums"]
-              } : {}),
-              children: col.header
-            })
+            "data-cell-pad": knobProps.gap.gap,
+            borderRadius: 0,
+            ...pad,
+            ...gridRule(frameBorder, !isLast),
+            children: renderCellContent(col, row, rowIndex, knobProps.body, typeSize)
           }, 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")
-            })
-          })
-        }) : data.map((row, rowIndex) => {
-          const intent = row._intent;
-          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: 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: cellLocationFor(colIndex, columns.length),
-              "data-align": col.align ?? "left",
-              ...(!isLast ? {
-                ...import_theme.hairline.bottom,
-                borderBottomColor: "$color6"
-              } : {}),
-              children: renderCellContent(col, row, rowIndex, colIndex, knobProps.body, knobProps.sizeToken)
-            }, col.accessorKey))
-          }, resolveRowId(row, rowIndex, getRowId));
-        })
-      })]
-    })
+        }, resolveRowId(row, rowIndex, getRowId));
+      })
+    })]
   });
 }
 function SimpleTable({
@@ -466,6 +503,11 @@ function SimpleTable({
       ...knobProps.containerRadius,
       ...props,
       testID: "simple-table-cards",
+      ...{
+        "data-simple-table-frame": "true",
+        "data-border-width": String(knobProps.surface.borderWidth),
+        "data-animation": knobProps.transition ? "on" : "none"
+      },
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleTableMobileCards, {
         data,
         columns,