@multiplatform.one/forms 7.54.1 → 7.56.0

package/dist/cjs/DescriptionList/index.cjs

@@ -24,11 +24,14 @@ var DescriptionList_exports = {};
 __export(DescriptionList_exports, {
   DescriptionList: () => DescriptionList,
   DescriptionListRow: () => DescriptionListRow,
-  PropertyList: () => PropertyList
+  PropertyList: () => PropertyList,
+  middleSplit: () => middleSplit
 });
 module.exports = __toCommonJS(DescriptionList_exports);
 var import_react = require("react");
+var import_platform = require("@multiplatform.one/platform");
 var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("@phosphor-icons/react");
 var import_tamagui = require("tamagui");
 var import_Button = require("../Button/index.cjs");
 var import_FormGrid = require("../FormGrid.cjs");
@@ -59,7 +62,7 @@ function listItemRhythm(sizeToken) {
   };
 }
 function resolvePlacement(prop, knobPlacement) {
-  if (prop === "side" || prop === "top") return prop;
+  if (prop === "side" || prop === "top" || prop === "inline") return prop;
   if (knobPlacement === "top" || knobPlacement === "side") {
     return knobPlacement;
   }
@@ -99,17 +102,19 @@ function ListRule({
   });
 }
 function TermText({
-  children
+  children,
+  inline = false
 }) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
     "data-mpo-description-list-term": "",
-    fontSize: 14,
-    lineHeight: 25,
-    ...knobProps.body,
-    color: "$color11",
+    ...(inline ? {
+      ...knobProps.body,
+      ...knobProps.label,
+      color: "$textMuted"
+    } : knobProps.textRole.label),
     minWidth: 0,
     ...(import_tamagui.isWeb ? {
       style: {
@@ -119,6 +124,41 @@ function TermText({
     children
   });
 }
+function TermLead({
+  row,
+  inline = false
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const ink = (0, import_theme.useGlyphColor)("$textMuted");
+  if (row.icon == null) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermText, {
+    inline,
+    children: row.term
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    minWidth: 0,
+    ...knobProps.gapSm,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      "aria-hidden": true,
+      flexShrink: 0,
+      ...(import_tamagui.isWeb && ink ? {
+        style: {
+          color: ink
+        }
+      } : {}),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.IconSlot, {
+        icon: row.icon,
+        color: ink,
+        size: 16
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermText, {
+      inline,
+      children: row.term
+    })]
+  });
+}
 function ChangeAction({
   onChange,
   label
@@ -135,27 +175,118 @@ function ChangeAction({
     })
   });
 }
+function middleSplit(text) {
+  if (text.length <= 24) return [text, ""];
+  let start = text.length - 12;
+  let from = text.length - 2;
+  for (;;) {
+    const slash = text.lastIndexOf("/", from);
+    if (slash <= 0 || text.length - slash > 20) break;
+    start = slash;
+    from = slash - 1;
+  }
+  return [text.slice(0, start), text.slice(start)];
+}
+const CopyResultContext = (0, import_react.createContext)(void 0);
+function IdentifierValue({
+  text
+}) {
+  const onCopyResult = (0, import_react.useContext)(CopyResultContext);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [head, tail] = middleSplit(text);
+  const ink = {
+    ...knobProps.body,
+    fontFamily: "$mono",
+    color: "$color"
+  };
+  const copy = async () => {
+    const ok = await (0, import_platform.writeToClipboard)(text);
+    onCopyResult?.(ok);
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    "data-mpo-description-list-identifier": "",
+    alignItems: "center",
+    minWidth: 0,
+    width: "100%",
+    ...knobProps.gapSm,
+    children: [import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      flex: 1,
+      minWidth: 0,
+      ...{
+        title: text
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...ink,
+        numberOfLines: 1,
+        flexShrink: 1,
+        minWidth: 0,
+        children: head
+      }), tail ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...ink,
+        numberOfLines: 1,
+        flexShrink: 0,
+        children: tail
+      }) : null]
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...ink,
+      flex: 1,
+      minWidth: 0,
+      numberOfLines: 1,
+      ellipsizeMode: "middle",
+      children: text
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      nested: true,
+      chromeless: true,
+      circular: true,
+      flexShrink: 0,
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CopyIcon, {}),
+      "aria-label": (0, import_t.t)("Copy to clipboard"),
+      onPress: () => void copy()
+    })]
+  });
+}
 function ValueSlot({
-  row
+  row,
+  trailing = false
 }) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     "data-mpo-description-list-value": "",
     minWidth: 0,
     width: "100%",
-    children: row.children != null ? row.children : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FieldDisplay.FieldDisplay, {
-      field: row.field ?? "input",
-      value: row.value,
-      fieldProps: row.fieldProps,
-      linkedValue: row.linkedValue,
-      chromeless: true,
-      align: "left",
-      truncate: row.truncate
+    children: row.children != null ? trailing ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      justifyContent: "flex-end",
+      alignItems: "center",
+      minWidth: 0,
+      width: "100%",
+      children: row.children
+    }) : row.children : row.identifier && row.value != null && row.value !== "" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IdentifierValue, {
+      text: String(row.value)
+    }) :
+    // FieldDisplay grows on flex 1 from a zero basis; in a column with no
+    // height of its own that collapsed it to 0 and the next rule ran
+    // through the value. A row lets it grow across and keep its height.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      minWidth: 0,
+      width: "100%",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FieldDisplay.FieldDisplay, {
+        field: row.field ?? "input",
+        value: row.value,
+        fieldProps: row.fieldProps,
+        linkedValue: row.linkedValue,
+        chromeless: true,
+        align: trailing ? "right" : "left",
+        truncate: trailing || row.truncate
+      })
     })
   });
 }
 function DescriptionListRowView({
   row,
   stacked,
+  inline = false,
   hasActionColumn,
   rhythm,
   showRule,
@@ -167,7 +298,8 @@ function DescriptionListRowView({
   }) : hasActionColumn && import_tamagui.isWeb && !stacked ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     "data-mpo-description-list-action": ""
   }) : null;
-  const rowStyle = import_tamagui.isWeb ? stacked ? {
+  const oneLine = inline && !row.identifier;
+  const rowStyle = oneLine ? void 0 : import_tamagui.isWeb ? stacked ? {
     display: "grid",
     gridTemplateColumns: hasActionColumn ? "minmax(0,1fr) max-content" : "minmax(0,1fr)",
     columnGap: void 0,
@@ -192,11 +324,32 @@ function DescriptionListRowView({
   } : {
     justifySelf: "end"
   } : void 0;
-  const body = stacked ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+  const body = oneLine ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    width: "100%",
+    minWidth: 0,
+    gap: rhythm.columnGap,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flexShrink: 0,
+      maxWidth: "60%",
+      minWidth: 0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermLead, {
+        row,
+        inline: true
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      minWidth: 0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ValueSlot, {
+        row,
+        trailing: true
+      })
+    }), action]
+  }) : stacked ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       style: termStyle,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermText, {
-        children: row.term
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermLead, {
+        row
       })
     }), action ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       style: actionStyle,
@@ -211,8 +364,8 @@ function DescriptionListRowView({
   }) : import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       style: termStyle,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermText, {
-        children: row.term
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermLead, {
+        row
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       style: valueStyle,
@@ -232,8 +385,8 @@ function DescriptionListRowView({
       maxWidth: `${purposeMaxCh()}ch`,
       flexShrink: 0,
       width: `${purposeMaxCh()}ch`,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermText, {
-        children: row.term
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermLead, {
+        row
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flex: 1,
@@ -262,6 +415,7 @@ function DescriptionListRowView({
 function DescriptionListWeb({
   rows,
   stacked,
+  inline,
   hasAction,
   rhythm,
   quiet,
@@ -305,6 +459,7 @@ function DescriptionListWeb({
     children: rows.map((row, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionListRowView, {
       row,
       stacked,
+      inline,
       hasActionColumn: hasAction,
       rhythm,
       showRule: index > 0,
@@ -356,6 +511,7 @@ function DescriptionList({
   maxWidth = import_formSpacing.formReadableMaxWidth,
   labelColumnWidth = import_fieldDefaults.LABEL_COLUMN_WIDTH,
   size,
+  onCopyResult,
   testID
 }) {
   const {
@@ -377,38 +533,44 @@ function DescriptionList({
     wide,
     onLayout
   } = useContainerWide(measureCollapse);
-  const stacked = placement === "top" || placement === "side" && !wide;
-  const list = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FieldDisplay.DescriptionListSlotProvider, {
-    children: import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionListWeb, {
-      rows,
-      stacked,
-      hasAction,
-      rhythm,
-      quiet,
-      labelColumnWidth,
-      sizeToken: knobProps.sizeToken,
-      placement,
-      framed
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      "data-mpo-description-list": "",
-      "data-placement": placement,
-      "data-stacked": stacked ? "true" : "false",
-      "data-rhythm": rhythm.tight ? "tight" : "regular",
-      "data-framed": framed ? "true" : "false",
-      "data-quiet": quiet ? "true" : "false",
-      "data-has-action": hasAction ? "true" : "false",
-      "data-label-column-width": labelColumnWidth,
-      "data-size-token": knobProps.sizeToken,
-      width: "100%",
-      minWidth: 0,
-      children: rows.map((row, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionListRowView, {
-        row,
+  const inline = placement === "inline";
+  const stacked = placement === "top" || inline || placement === "side" && !wide;
+  const list = /* @__PURE__ */(0, import_jsx_runtime.jsx)(CopyResultContext.Provider, {
+    value: onCopyResult,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FieldDisplay.DescriptionListSlotProvider, {
+      children: import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionListWeb, {
+        rows,
         stacked,
-        hasActionColumn: hasAction,
+        inline,
+        hasAction,
         rhythm,
-        showRule: index > 0,
-        quiet
-      }, index))
+        quiet,
+        labelColumnWidth,
+        sizeToken: knobProps.sizeToken,
+        placement,
+        framed
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        "data-mpo-description-list": "",
+        "data-placement": placement,
+        "data-stacked": stacked ? "true" : "false",
+        "data-rhythm": rhythm.tight ? "tight" : "regular",
+        "data-framed": framed ? "true" : "false",
+        "data-quiet": quiet ? "true" : "false",
+        "data-has-action": hasAction ? "true" : "false",
+        "data-label-column-width": labelColumnWidth,
+        "data-size-token": knobProps.sizeToken,
+        width: "100%",
+        minWidth: 0,
+        children: rows.map((row, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionListRowView, {
+          row,
+          stacked,
+          inline,
+          hasActionColumn: hasAction,
+          rhythm,
+          showRule: index > 0,
+          quiet
+        }, index))
+      })
     })
   });
   const widthProps = {