@multiplatform.one/table-primitives 7.45.1 → 7.47.0

package/dist/cjs/index.cjs

@@ -24,13 +24,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);
@@ -265,6 +270,83 @@ function tablePressFill(restFill) {
   if (step >= 12) return "$color11";
   return `$color${Math.max(step + 1, 4)}`;
 }
+const TableEdgeInsetContext = (0, import_react.createContext)(null);
+const CellEdgeContext = (0, import_react.createContext)(void 0);
+function useTableEdgeInset() {
+  return (0, import_react.useContext)(TableEdgeInsetContext);
+}
+function TableEdgeInset({
+  inset,
+  children
+}) {
+  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() {
+  return import_tamagui.isWeb && typeof document !== "undefined" && document.documentElement?.dir === "rtl";
+}
+function cellEdgePadding(edge, inset, own) {
+  const start = edge === "first" || edge === "only";
+  const end = edge === "last" || edge === "only";
+  if (!import_tamagui.isWeb) {
+    return {
+      ...(start ? {
+        paddingStart: inset
+      } : {}),
+      ...(end ? {
+        paddingEnd: inset
+      } : {})
+    };
+  }
+  const rtl = isRtlDocument();
+  const left = rtl ? end : start;
+  const right = rtl ? start : end;
+  return {
+    paddingLeft: left ? inset : own.paddingLeft ?? own.paddingHorizontal,
+    paddingRight: right ? inset : own.paddingRight ?? own.paddingHorizontal
+  };
+}
+function markEdgeCells(children) {
+  const cells = flattenChildren(children).filter(import_react.isValidElement);
+  return cells.map((cell, index) => {
+    const 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 ?? index);
+  });
+}
+function TableEdgeCells({
+  children
+}) {
+  const 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
+  };
+}
 const BodyRowIndexContext = (0, import_react.createContext)(void 0);
 function indexBodyRows(children, counter) {
   return import_react.Children.map(children, child => {
@@ -274,6 +356,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
@@ -489,6 +572,8 @@ function extractCardModel(children) {
 }
 function TableCardsList({
   children,
+  edgeInset,
+  selfBleed,
   ...props
 }) {
   const {
@@ -518,25 +603,39 @@ function TableCardsList({
       "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((row, rowIndex) => {
+    ...(edgeInset ? phoneBleedListProps(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((row, rowIndex) => {
       const stripe = tableZebraStripe(knobProps.tableZebra, rowIndex);
       const 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
         },
@@ -547,7 +646,7 @@ function TableCardsList({
             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%",
@@ -589,6 +688,7 @@ function ThemedTableComp({
 }
 function ThemedTableFrame({
   layout = "table",
+  edgeInset,
   ...props
 }) {
   const {
@@ -597,35 +697,70 @@ function ThemedTableFrame({
   const {
     sm
   } = (0, import_tamagui.useMedia)();
+  const bleed = (0, import_theme.usePhoneTableBleed)();
+  const selfBleed = edgeInset === void 0 ? bleed : null;
+  const inset = edgeInset === void 0 ? bleed?.inset ?? null : edgeInset;
   const resolvedBorderWidth = knobProps.surface.borderWidth;
   const 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
+      })
     });
   }
   const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
+  const table = /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableComp, {
+    ...knobProps.surface,
+    ...knobProps.borderRadiusNested,
+    borderWidth: resolvedBorderWidth,
+    elevation: knobProps.elevation,
+    ...motion,
+    cellHeight: knobProps.sizeToken,
+    ...{
+      "data-animation": knobProps.motion.control.transition ? "on" : "none"
+    },
+    ...props,
+    ...(inset ? {
+      borderLeftWidth: 0,
+      borderRightWidth: 0,
+      borderRadius: 0,
+      ...{
+        "data-phone-bleed": "true"
+      }
+    } : {}),
+    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, {
-        ...knobProps.surface,
-        ...knobProps.borderRadiusNested,
-        borderWidth: resolvedBorderWidth,
-        elevation: knobProps.elevation,
-        ...motion,
-        cellHeight: knobProps.sizeToken,
-        ...{
-          "data-animation": knobProps.motion.control.transition ? "on" : "none"
-        },
-        ...props,
-        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 ?? (import_tamagui.isWeb ? "table" : "flex")) === "flex" ? {
+          flexGrow: 1,
+          flexShrink: 1,
+          flexBasis: "auto",
+          minHeight: 0
+        } : {}),
+        children: table
+      }) : table
     })
   );
 }
@@ -657,6 +792,8 @@ function ThemedRow({
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const context = TableContext.useStyledContext();
+  const edgeInset = (0, import_react.useContext)(TableEdgeInsetContext);
+  const children = edgeInset && props.role !== "presentation" ? markEdgeCells(props.children) : props.children;
   const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
   const intent = resolveIntent({
     accent,
@@ -688,7 +825,8 @@ function ThemedRow({
     ...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, {
@@ -742,6 +880,19 @@ function TableCellSurfaceBody({
     children: label
   }, key));
 }
+function useCellEdgePadding(own, base) {
+  const inset = (0, import_react.useContext)(TableEdgeInsetContext);
+  const edge = (0, import_react.useContext)(CellEdgeContext);
+  if (!inset || !edge) return null;
+  return {
+    ...cellEdgePadding(edge, inset, {
+      paddingHorizontal: own.paddingHorizontal ?? base.paddingHorizontal,
+      paddingLeft: own.paddingLeft,
+      paddingRight: own.paddingRight
+    }),
+    "data-cell-edge": edge
+  };
+}
 function ThemedCell({
   children,
   style,
@@ -751,13 +902,16 @@ function ThemedCell({
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
+  const base = getTableCellPadding((0, import_theme.sizeTokenStop)(knobProps.sizeToken));
+  const 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,
     style: [{
       verticalAlign: "middle"
     }, style],
@@ -776,13 +930,16 @@ function ThemedHeaderCell({
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
+  const base = getTableCellPadding((0, import_theme.sizeTokenStop)(knobProps.sizeToken));
+  const 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,
     style: [{
       verticalAlign: "middle",
       fontWeight: "normal",