@multiplatform.one/table 7.34.4 → 7.36.0

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

@@ -23,7 +23,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var SimpleTable_exports = {};
 __export(SimpleTable_exports, {
   SimpleTable: () => SimpleTable,
-  SimpleTableDesktop: () => SimpleTableDesktop
+  SimpleTableDesktop: () => SimpleTableDesktop,
+  resolveSimpleTableColumns: () => import_columnSizing2.resolveSimpleTableColumns
 });
 module.exports = __toCommonJS(SimpleTable_exports);
 var import_components = require("@multiplatform.one/components");
@@ -31,6 +32,9 @@ 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_columnSizing = require("./columnSizing.cjs");
+var import_ScrollFrame = require("./ScrollFrame.cjs");
+var import_columnSizing2 = require("./columnSizing.cjs");
 var import_table_primitives = require("@multiplatform.one/table-primitives");
 var import_rowPress = require("../../utils/rowPress.cjs");
 var import_withInterp = require("../../utils/withInterp.cjs");
@@ -249,7 +253,7 @@ function SimpleTableMobileCards({
   const tableZebraOn = knobProps.tableZebra === "on";
   const [titleCol, ...detailCols] = columns;
   const typeSize = knobProps.label.fontSize;
-  const motion = (0, import_theme.transitionProps)(knobProps.transition);
+  const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
   if (data.length === 0) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
       flexDirection: "column",
@@ -260,7 +264,7 @@ function SimpleTableMobileCards({
         color: knobProps.textAccentColor,
         children: caption
       }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
-        compact: true,
+        size: "$3",
         "aria-live": "polite",
         title: t("No data available")
       })]
@@ -341,12 +345,13 @@ function SimpleTableMobileCards({
 }
 function SimpleTableDesktop({
   data,
-  columns,
+  columns: columnDefinitions,
   caption,
   onRowPress,
   rowLabel,
   getRowId,
   disabled,
+  onLayout,
   ...props
 }) {
   const {
@@ -355,6 +360,9 @@ function SimpleTableDesktop({
   } = (0, import_theme.useResolvedKnobs)({
     component: "SimpleTable"
   });
+  const [viewportWidth, setViewportWidth] = (0, import_react.useState)(0);
+  const columns = (0, import_columnSizing.resolveSimpleTableColumns)(columnDefinitions, data, viewportWidth, token => Number((0, import_tamagui.getTokenValue)(token, "size")));
+  const tableWidth = columns.reduce((sum, column) => sum + column.width, 0);
   const {
     t
   } = (0, import_react_i18next.useTranslation)();
@@ -371,108 +379,155 @@ function SimpleTableDesktop({
   const tableZebraOn = knobProps.tableZebra === "on";
   const ariaLabel = caption ? void 0 : props["aria-label"];
   const typeSize = knobProps.label.fontSize;
-  const motion = (0, import_theme.transitionProps)(knobProps.transition);
+  const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
   const pad = cellPad(knobProps.gap.gap);
   const frameBorder = knobProps.surface.borderWidth;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
-    ...props,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     minWidth: 0,
-    ...{
-      overflow: "auto",
-      "data-simple-table-frame": "true",
-      "data-border-width": String(frameBorder),
-      "data-animation": knobProps.transition ? "on" : "none"
-    },
-    ...disabledChrome(Boolean(disabled), disabledState),
-    "aria-label": ariaLabel,
-    ...{
-      "aria-rowcount": data.length + 1
+    onLayout: event => {
+      setViewportWidth(Math.max(0, event.nativeEvent.layout.width - frameBorder * 2));
+      onLayout?.(event);
     },
-    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,
+    ...props,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollFrame.ScrollFrame, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
+        displayMode: "flex",
+        width: tableWidth,
+        minWidth: tableWidth,
+        ...{
+          overflow: "visible",
+          "data-simple-table-frame": "true",
+          "data-border-width": String(frameBorder),
+          "data-animation": knobProps.motion.control.transition ? "on" : "none"
+        },
+        ...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,
-            display: "block",
-            width: "100%",
-            textAlign: col.align ?? "left",
-            numberOfLines: 1,
-            ellipsizeMode: "tail",
-            ...(col.align === "right" ? {
-              fontVariant: ["tabular-nums"]
-            } : {}),
-            children: col.header
+            children: caption
           })
-        }, 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, {
+          borderBottomWidth: frameBorder,
+          borderBottomColor: "$borderColor",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+            alignItems: "stretch",
+            children: columns.map((col, colIndex) => {
+              const cell = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+                cellWidth: col.width,
+                flexShrink: 0,
+                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);
+              return colIndex === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollFrame.PinnedCell, {
+                width: col.width,
+                children: cell
+              }, col.accessorKey) : cell;
+            })
           })
-        })
-      }) : 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: (0, import_table_primitives.tableZebraFill)(knobProps.surface.backgroundColor)
-        } : {};
-        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",
-            "data-cell-pad": knobProps.gap.gap,
-            borderRadius: 0,
-            ...pad,
-            ...gridRule(frameBorder, !isLast),
-            children: renderCellContent(col, row, rowIndex, knobProps.body, typeSize)
-          }, col.accessorKey))
-        }, resolveRowId(row, rowIndex, getRowId));
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Body, {
+          overflow: "visible",
+          overflowX: "visible",
+          overflowY: "visible",
+          ...(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, {
+                size: "$3",
+                "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: (0, import_table_primitives.tableZebraFill)(knobProps.surface.backgroundColor)
+            } : {};
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+              rowLocation: rowLocationFor(rowIndex, data.length),
+              alignItems: "stretch",
+              group: "simpleTableRow",
+              backgroundColor: intent ? "$color3" : zebraFill.backgroundColor ?? "$background",
+              ...(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) => {
+                const cell = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+                  cellWidth: col.width,
+                  flexShrink: 0,
+                  ...(colIndex === 0 ? {
+                    backgroundColor: import_tamagui.isWeb ? "inherit" : intent ? "$color3" : zebraFill.backgroundColor ?? "$background",
+                    ...(!import_tamagui.isWeb && !disabled ? {
+                      "$group-simpleTableRow-hover": {
+                        backgroundColor: "$backgroundHover"
+                      },
+                      ...(rowPressActive ? {
+                        "$group-simpleTableRow-press": {
+                          backgroundColor: "$backgroundPress"
+                        }
+                      } : {})
+                    } : {})
+                  } : {}),
+                  justifyContent: alignToFlex(col.align),
+                  cellLocation: cellLocationFor(colIndex, columns.length),
+                  "data-align": col.align ?? "left",
+                  "data-cell-pad": knobProps.gap.gap,
+                  borderRadius: 0,
+                  ...pad,
+                  ...gridRule(frameBorder, !isLast),
+                  children: renderCellContent(col, row, rowIndex, knobProps.body, typeSize)
+                }, col.accessorKey);
+                return colIndex === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollFrame.PinnedCell, {
+                  width: col.width,
+                  children: cell
+                }, col.accessorKey) : cell;
+              })
+            }, resolveRowId(row, rowIndex, getRowId));
+          })
+        })]
       })
-    })]
+    })
   });
 }
 function SimpleTable({
@@ -502,7 +557,7 @@ function SimpleTable({
       ...{
         "data-simple-table-frame": "true",
         "data-border-width": String(knobProps.surface.borderWidth),
-        "data-animation": knobProps.transition ? "on" : "none"
+        "data-animation": knobProps.motion.control.transition ? "on" : "none"
       },
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SimpleTableMobileCards, {
         data,