@multiplatform.one/table-primitives 7.46.0 → 7.47.0

package/dist/cjs/index.native.js

@@ -26,13 +26,18 @@ var index_exports = {};
 __export(index_exports, {
   Table: () => Table,
   TableCellContext: () => import_tableCellContext2.TableCellContext,
+  TableEdgeCells: () => TableEdgeCells,
+  TableEdgeInset: () => TableEdgeInset,
   getTableCellPadding: () => getTableCellPadding,
   isBareTextChild: () => import_textRidesText2.isBareTextChild,
+  phoneBleedListProps: () => phoneBleedListProps,
+  phoneBleedRowProps: () => phoneBleedRowProps,
   tablePressFill: () => tablePressFill,
   tableZebraFill: () => tableZebraFill,
   tableZebraStripe: () => tableZebraStripe,
   useIsInTableCell: () => import_tableCellContext2.useIsInTableCell,
   useTableCellContext: () => import_tableCellContext2.useTableCellContext,
+  useTableEdgeInset: () => useTableEdgeInset,
   wrapBareTextChildren: () => import_textRidesText2.wrapBareTextChildren
 });
 module.exports = __toCommonJS(index_exports);
@@ -306,6 +311,88 @@ function tablePressFill(restFill) {
   if (step >= 12) return "$color11";
   return `$color${Math.max(step + 1, 4)}`;
 }
+var TableEdgeInsetContext = /* @__PURE__ */(0, import_react.createContext)(null);
+var CellEdgeContext = /* @__PURE__ */(0, import_react.createContext)(void 0);
+function useTableEdgeInset() {
+  return (0, import_react.useContext)(TableEdgeInsetContext);
+}
+function TableEdgeInset(param) {
+  var {
+    inset,
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableEdgeInsetContext.Provider, {
+    value: inset,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.PageGutter, {
+      inset: null,
+      children
+    })
+  });
+}
+function isRtlDocument() {
+  var _document_documentElement;
+  return import_tamagui.isWeb && typeof document !== "undefined" && ((_document_documentElement = document.documentElement) === null || _document_documentElement === void 0 ? void 0 : _document_documentElement.dir) === "rtl";
+}
+function cellEdgePadding(edge, inset, own) {
+  var _own_paddingLeft, _own_paddingRight;
+  var start = edge === "first" || edge === "only";
+  var end = edge === "last" || edge === "only";
+  if (!import_tamagui.isWeb) {
+    return {
+      ...(start ? {
+        paddingStart: inset
+      } : {}),
+      ...(end ? {
+        paddingEnd: inset
+      } : {})
+    };
+  }
+  var rtl = isRtlDocument();
+  var left = rtl ? end : start;
+  var right = rtl ? start : end;
+  return {
+    paddingLeft: left ? inset : (_own_paddingLeft = own.paddingLeft) !== null && _own_paddingLeft !== void 0 ? _own_paddingLeft : own.paddingHorizontal,
+    paddingRight: right ? inset : (_own_paddingRight = own.paddingRight) !== null && _own_paddingRight !== void 0 ? _own_paddingRight : own.paddingHorizontal
+  };
+}
+function markEdgeCells(children) {
+  var cells = flattenChildren(children).filter(import_react.isValidElement);
+  return cells.map(function (cell, index) {
+    var _cell_key;
+    var edge = cells.length === 1 ? "only" : index === 0 ? "first" : index === cells.length - 1 ? "last" : void 0;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellEdgeContext.Provider, {
+      value: edge,
+      children: cell
+    }, (_cell_key = cell.key) !== null && _cell_key !== void 0 ? _cell_key : index);
+  });
+}
+function TableEdgeCells(param) {
+  var {
+    children
+  } = param;
+  var inset = (0, import_react.useContext)(TableEdgeInsetContext);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: inset ? markEdgeCells(children) : children
+  });
+}
+function phoneBleedRowProps(inset) {
+  return {
+    borderRadius: 0,
+    borderWidth: 0,
+    ...import_theme.hairline.bottom,
+    borderColor: "$borderColor",
+    elevation: 0,
+    shadowColor: "transparent",
+    paddingLeft: inset,
+    paddingRight: inset
+  };
+}
+function phoneBleedListProps(bleed) {
+  return {
+    ...(bleed ? bleed.frame : {}),
+    gap: 0
+  };
+}
 var BodyRowIndexContext = /* @__PURE__ */(0, import_react.createContext)(void 0);
 function indexBodyRows(children, counter) {
   return import_react.Children.map(children, function (child) {
@@ -315,6 +402,7 @@ function indexBodyRows(children, counter) {
         children: indexBodyRows(child.props.children, counter)
       });
     }
+    if (child.props["aria-hidden"] === true) return child;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(BodyRowIndexContext.Provider, {
       value: counter.next++,
       children: child
@@ -599,6 +687,8 @@ function extractCardModel(children) {
 function TableCardsList(param) {
   var {
     children,
+    edgeInset,
+    selfBleed,
     ...props
   } = param;
   var {
@@ -628,25 +718,39 @@ function TableCardsList(param) {
       "data-animation": knobProps.motion.control.transition ? "on" : "none"
     },
     ...viewProps,
-    children: [caption != null && (typeof caption === "string" || typeof caption === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-      fontSize: knobProps.sizeToken,
-      color: "$color10",
-      children: caption
-    }) : caption), rows.map(function (row, rowIndex) {
+    ...(edgeInset ? phoneBleedListProps(selfBleed !== null && selfBleed !== void 0 ? selfBleed : null) : {}),
+    ...(edgeInset ? {
+      "data-phone-bleed": "true"
+    } : {}),
+    children: [caption != null &&
+    // LC-146: the caption stays on the page line while the cards bleed.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...(edgeInset ? {
+        paddingHorizontal: edgeInset
+      } : {}),
+      children: typeof caption === "string" || typeof caption === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.SizableText, {
+        fontSize: knobProps.sizeToken,
+        color: "$color10",
+        children: caption
+      }) : caption
+    }), rows.map(function (row, rowIndex) {
       var stripe = tableZebraStripe(knobProps.tableZebra, rowIndex);
       var card = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ThemeableStack, {
         testID: "table-card",
         ...knobProps.surface,
         ...knobProps.cardSurface,
-        elevation: knobProps.elevation,
         ...motion,
-        borderColor: "$color6",
         ...(stripe === "odd" ? {
           backgroundColor: tableZebraFill(knobProps.cardSurface.backgroundColor)
         } : {}),
         ...(row.intent ? {
           backgroundColor: "$color3"
         } : {}),
+        ...(edgeInset ? phoneBleedRowProps(edgeInset) : {
+          elevation: knobProps.elevation,
+          borderColor: (0, import_theme.edgeColorAt)("$color6", knobProps.borderWidthStop)
+        }),
         ...{
           "data-table-zebra": stripe
         },
@@ -657,7 +761,7 @@ function TableCardsList(param) {
             alignItems: "center",
             gap: "$2",
             paddingVertical: "$1.5",
-            children: [label != null && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            children: [label != null && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.SizableText, {
               fontSize: knobProps.sizeToken,
               color: knobProps.textAccentColor,
               width: "40%",
@@ -702,51 +806,89 @@ function ThemedTableComp(param) {
 function ThemedTableFrame(param) {
   var {
     layout = "table",
+    edgeInset,
     ...props
   } = param;
+  var _ref, _props_displayMode;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   var {
     sm
   } = (0, import_tamagui.useMedia)();
+  var bleed = (0, import_theme.usePhoneTableBleed)();
+  var selfBleed = edgeInset === void 0 ? bleed : null;
+  var inset = edgeInset === void 0 ? (_ref = bleed === null || bleed === void 0 ? void 0 : bleed.inset) !== null && _ref !== void 0 ? _ref : null : edgeInset;
   var resolvedBorderWidth = knobProps.surface.borderWidth;
   var showCards = layout === "cards" || layout === "auto" && sm === false;
   if (showCards) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableCardsList, {
-      ...props
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.PageGutter, {
+      inset: null,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableCardsList, {
+        ...props,
+        edgeInset: inset,
+        selfBleed
+      })
     });
   }
   var motion = (0, import_theme.transitionProps)(knobProps.motion.control);
+  var table = /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableComp, {
+    // Table frames are R-OUTER + SF-CARD-tier surface (theme-propagation-spec
+    // `@multiplatform.one/table-primitives`): outer corners follow the capped
+    // outer radius map; like the card list, the fill never takes the
+    // control flip.
+    ...knobProps.surface,
+    ...knobProps.borderRadiusNested,
+    borderWidth: resolvedBorderWidth,
+    elevation: knobProps.elevation,
+    ...motion,
+    // Size knob sets default row height through the table context; consumer
+    // cellHeight (table- or cell-level) still overrides via {...props}.
+    cellHeight: knobProps.sizeToken,
+    ...{
+      "data-animation": knobProps.motion.control.transition ? "on" : "none"
+    },
+    ...props,
+    // A full-bleed table has no side frame: the screen edge is its edge.
+    ...(inset ? {
+      borderLeftWidth: 0,
+      borderRightWidth: 0,
+      borderRadius: 0,
+      ...{
+        "data-phone-bleed": "true"
+      }
+    } : {}),
+    // borderSpacing 0 neutralizes the real <table> UA default (2px gaps
+    // between cells) so the migrated element keeps the div-table look.
+    style: [{
+      tableLayout: "fixed",
+      borderSpacing: 0
+    }, props.style],
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableEdgeInset, {
+      inset,
+      children: props.children
+    })
+  });
   return (
     // A table nested in a body cell must not stripe its rows by the outer index.
     /* @__PURE__ */
     (0, import_jsx_runtime.jsx)(BodyRowIndexContext.Provider, {
       value: void 0,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableComp, {
-        // Table frames are R-OUTER + SF-CARD-tier surface (theme-propagation-spec
-        // `@multiplatform.one/table-primitives`): outer corners follow the capped
-        // outer radius map; like the card list, the fill never takes the
-        // control flip.
-        ...knobProps.surface,
-        ...knobProps.borderRadiusNested,
-        borderWidth: resolvedBorderWidth,
-        elevation: knobProps.elevation,
-        ...motion,
-        // Size knob sets default row height through the table context; consumer
-        // cellHeight (table- or cell-level) still overrides via {...props}.
-        cellHeight: knobProps.sizeToken,
-        ...{
-          "data-animation": knobProps.motion.control.transition ? "on" : "none"
-        },
-        ...props,
-        // borderSpacing 0 neutralizes the real <table> UA default (2px gaps
-        // between cells) so the migrated element keeps the div-table look.
-        style: [{
-          tableLayout: "fixed",
-          borderSpacing: 0
-        }, props.style]
-      })
+      children: selfBleed ?
+      // The table keeps width 100%, which ignores a negative end margin, so
+      // a plain stack takes the bleed and the table fills it.
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        ...selfBleed.frame,
+        alignSelf: "stretch",
+        ...(((_props_displayMode = props.displayMode) !== null && _props_displayMode !== void 0 ? _props_displayMode : import_tamagui.isWeb ? "table" : "flex") === "flex" ? {
+          flexGrow: 1,
+          flexShrink: 1,
+          flexBasis: "auto",
+          minHeight: 0
+        } : {}),
+        children: table
+      }) : table
     })
   );
 }
@@ -781,6 +923,8 @@ function ThemedRow(param) {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   var context = TableContext.useStyledContext();
+  var edgeInset = (0, import_react.useContext)(TableEdgeInsetContext);
+  var children = edgeInset && props.role !== "presentation" ? markEdgeCells(props.children) : props.children;
   var motion = (0, import_theme.transitionProps)(knobProps.motion.control);
   var intent = resolveIntent({
     accent,
@@ -812,7 +956,8 @@ function ThemedRow(param) {
     ...props,
     ...(stripe === "odd" && !intent && props.backgroundColor == null ? {
       backgroundColor: tableZebraFill(knobProps.surface.backgroundColor)
-    } : {})
+    } : {}),
+    children
   });
   if (intent) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
@@ -872,6 +1017,20 @@ function TableCellSurfaceBody(param) {
     }, key);
   });
 }
+function useCellEdgePadding(own, base) {
+  var _own_paddingHorizontal;
+  var inset = (0, import_react.useContext)(TableEdgeInsetContext);
+  var edge = (0, import_react.useContext)(CellEdgeContext);
+  if (!inset || !edge) return null;
+  return {
+    ...cellEdgePadding(edge, inset, {
+      paddingHorizontal: (_own_paddingHorizontal = own.paddingHorizontal) !== null && _own_paddingHorizontal !== void 0 ? _own_paddingHorizontal : base.paddingHorizontal,
+      paddingLeft: own.paddingLeft,
+      paddingRight: own.paddingRight
+    }),
+    "data-cell-edge": edge
+  };
+}
 function ThemedCell(param) {
   var {
     children,
@@ -882,13 +1041,16 @@ function ThemedCell(param) {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   var motion = (0, import_theme.transitionProps)(knobProps.motion.control);
+  var base = getTableCellPadding((0, import_theme.sizeTokenStop)(knobProps.sizeToken));
+  var edgePadding = useCellEdgePadding(props, base);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Cell, {
-    ...getTableCellPadding((0, import_theme.sizeTokenStop)(knobProps.sizeToken)),
+    ...base,
     ...motion,
     ...{
       "data-animation": knobProps.motion.control.transition ? "on" : "none"
     },
     ...props,
+    ...edgePadding,
     // Compose (not replace) the inline style so a consumer style (e.g.
     // sticky pinned cells) keeps the verticalAlign baseline.
     style: [{
@@ -910,13 +1072,16 @@ function ThemedHeaderCell(param) {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   var motion = (0, import_theme.transitionProps)(knobProps.motion.control);
+  var base = getTableCellPadding((0, import_theme.sizeTokenStop)(knobProps.sizeToken));
+  var edgePadding = useCellEdgePadding(props, base);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(HeaderCell, {
-    ...getTableCellPadding((0, import_theme.sizeTokenStop)(knobProps.sizeToken)),
+    ...base,
     ...motion,
     ...{
       "data-animation": knobProps.motion.control.transition ? "on" : "none"
     },
     ...props,
+    ...edgePadding,
     // Compose (not replace) the inline style so consumer styles (sticky
     // pinned headers) keep the real-<th> UA neutralizers (bold/centered).
     style: [{