@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/cjs/DescriptionList/index.cjs

@@ -0,0 +1,416 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DescriptionList_exports = {};
+__export(DescriptionList_exports, {
+  DescriptionList: () => DescriptionList,
+  DescriptionListRow: () => DescriptionListRow,
+  PropertyList: () => PropertyList
+});
+module.exports = __toCommonJS(DescriptionList_exports);
+var import_react = require("react");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_Button = require("../Button/index.cjs");
+var import_FormGrid = require("../FormGrid.cjs");
+var import_fieldDefaults = require("../fieldDefaults.cjs");
+var import_formSpacing = require("../formSpacing.cjs");
+var import_FieldDisplay = require("../FieldDisplay/index.cjs");
+var import_t = require("../shared/t.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function purposeMaxCh() {
+  return import_fieldDefaults.LABEL_COLUMN_MAX_CH;
+}
+function listItemRhythm(density) {
+  const compact = density === "compact";
+  return {
+    compact,
+    padV: compact ? "$2" : "$2.5",
+    columnGap: compact ? "$2" : "$3",
+    stackGap: compact ? 4 : "$2",
+    minHeight: compact ? 39 : 45
+  };
+}
+function resolvePlacement(prop, knobPlacement) {
+  if (prop === "side" || prop === "top") return prop;
+  if (knobPlacement === "top" || knobPlacement === "side") {
+    return knobPlacement;
+  }
+  return "side";
+}
+function rowHasAction(row) {
+  return typeof row.onChange === "function";
+}
+function itemsFromChildren(children) {
+  if (children == null) return [];
+  return import_react.Children.toArray(children).flatMap(child => {
+    if (!(0, import_react.isValidElement)(child)) return [];
+    const props = child.props;
+    if (props.hidden) return [];
+    if (props.term == null) return [];
+    return [props];
+  });
+}
+function ListRule({
+  quiet
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "separator",
+    "data-mpo-description-list-rule": "",
+    height: 1,
+    backgroundColor: "$borderColor",
+    opacity: quiet ? 0.5 : 1,
+    alignSelf: "stretch",
+    flexGrow: 0,
+    flexShrink: 0,
+    width: "100%",
+    ...(import_tamagui.isWeb ? {
+      style: {
+        gridColumn: "1 / -1"
+      }
+    } : void 0)
+  });
+}
+function TermText({
+  children
+}) {
+  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",
+    minWidth: 0,
+    ...(import_tamagui.isWeb ? {
+      overflowWrap: "break-word"
+    } : void 0),
+    children
+  });
+}
+function ChangeAction({
+  onChange,
+  label
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-mpo-description-list-action": "",
+    alignItems: "flex-start",
+    justifyContent: "flex-end",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      nested: true,
+      outlined: true,
+      onPress: onChange,
+      children: label ?? (0, import_t.t)("Change")
+    })
+  });
+}
+function ValueSlot({
+  row
+}) {
+  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
+    })
+  });
+}
+function DescriptionListRowView({
+  row,
+  stacked,
+  hasActionColumn,
+  rhythm,
+  showRule,
+  quiet
+}) {
+  const action = rowHasAction(row) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChangeAction, {
+    onChange: row.onChange,
+    label: row.changeLabel
+  }) : 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 ? {
+    display: "grid",
+    gridTemplateColumns: hasActionColumn ? "minmax(0,1fr) max-content" : "minmax(0,1fr)",
+    columnGap: void 0,
+    rowGap: void 0
+  } : {
+    display: "grid",
+    gridTemplateColumns: "subgrid",
+    gridColumn: "1 / -1"
+  } : void 0;
+  const termStyle = import_tamagui.isWeb ? stacked ? {
+    gridColumn: "1",
+    gridRow: "1"
+  } : void 0 : void 0;
+  const valueStyle = import_tamagui.isWeb ? stacked ? {
+    gridColumn: "1 / -1",
+    gridRow: "2"
+  } : void 0 : void 0;
+  const actionStyle = import_tamagui.isWeb ? stacked ? {
+    gridColumn: "2",
+    gridRow: "1",
+    justifySelf: "end"
+  } : {
+    justifySelf: "end"
+  } : void 0;
+  const body = 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
+      })
+    }), action ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      style: actionStyle,
+      children: action
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      style: valueStyle,
+      marginTop: rhythm.stackGap,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ValueSlot, {
+        row
+      })
+    })]
+  }) : 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
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      style: valueStyle,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ValueSlot, {
+        row
+      })
+    }), action ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      style: actionStyle,
+      children: action
+    }) : null]
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "flex-start",
+    width: "100%",
+    gap: rhythm.columnGap,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      minWidth: 0,
+      maxWidth: `${purposeMaxCh()}ch`,
+      flexShrink: 0,
+      width: `${purposeMaxCh()}ch`,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TermText, {
+        children: row.term
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      minWidth: 0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ValueSlot, {
+        row
+      })
+    }), action]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [showRule ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ListRule, {
+      quiet
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      "data-mpo-description-list-row": "",
+      "data-has-change": rowHasAction(row) ? "true" : "false",
+      paddingVertical: rhythm.padV,
+      minHeight: rhythm.minHeight,
+      columnGap: rhythm.columnGap,
+      width: "100%",
+      minWidth: 0,
+      style: rowStyle,
+      children: body
+    })]
+  });
+}
+function DescriptionListWeb({
+  rows,
+  stacked,
+  hasAction,
+  rhythm,
+  quiet,
+  labelColumnWidth,
+  density,
+  size,
+  placement,
+  framed
+}) {
+  const style = stacked ? {
+    display: "block",
+    width: "100%"
+  } : {
+    display: "grid",
+    gridTemplateColumns: hasAction ? `${labelColumnWidth} minmax(0, 1fr) max-content` : `${labelColumnWidth} minmax(0, 1fr)`,
+    width: "100%"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-mpo-description-list": "",
+    "data-placement": placement,
+    "data-stacked": stacked ? "true" : "false",
+    "data-compact": rhythm.compact ? "true" : "false",
+    "data-framed": framed ? "true" : "false",
+    "data-quiet": quiet ? "true" : "false",
+    "data-has-action": hasAction ? "true" : "false",
+    "data-label-column-width": labelColumnWidth,
+    "data-density": density,
+    "data-size": size,
+    width: "100%",
+    minWidth: 0,
+    style,
+    children: rows.map((row, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionListRowView, {
+      row,
+      stacked,
+      hasActionColumn: hasAction,
+      rhythm,
+      showRule: index > 0,
+      quiet
+    }, index))
+  });
+}
+function useContainerWide(enabled) {
+  const ref = (0, import_react.useRef)(null);
+  const [wide, setWide] = (0, import_react.useState)(true);
+  (0, import_react.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (!el || !enabled) {
+      setWide(true);
+      return;
+    }
+    const update = width => {
+      setWide(width >= import_FormGrid.FORM_GRID_COLLAPSE_WIDTH);
+    };
+    update(el.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") {
+      const onResize = () => update(el.getBoundingClientRect().width);
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }
+    const ro = new ResizeObserver(entries => {
+      const width = entries[0]?.contentRect.width ?? el.getBoundingClientRect().width;
+      update(width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [enabled]);
+  return {
+    ref,
+    wide
+  };
+}
+function DescriptionList({
+  items,
+  children,
+  placement: placementProp,
+  compact,
+  framed = false,
+  quiet = false,
+  maxWidth = import_formSpacing.formReadableMaxWidth,
+  labelColumnWidth = import_fieldDefaults.LABEL_COLUMN_WIDTH,
+  testID
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)(compact === void 0 ? void 0 : {
+    compact
+  });
+  const placement = resolvePlacement(placementProp, knobProps.fieldLabelPlacement);
+  const rhythm = listItemRhythm(knobProps.density);
+  const rows = (0, import_react.useMemo)(() => {
+    const fromItems = (items ?? []).filter(row => !row.hidden);
+    if (fromItems.length) return fromItems;
+    return itemsFromChildren(children);
+  }, [items, children]);
+  const hasAction = rows.some(rowHasAction);
+  const measureCollapse = placement === "side" && import_tamagui.isWeb;
+  const {
+    ref,
+    wide
+  } = 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,
+      density: knobProps.density,
+      size: knobProps.size,
+      placement,
+      framed
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      "data-mpo-description-list": "",
+      "data-placement": placement,
+      "data-stacked": stacked ? "true" : "false",
+      "data-compact": rhythm.compact ? "true" : "false",
+      "data-framed": framed ? "true" : "false",
+      "data-quiet": quiet ? "true" : "false",
+      "data-has-action": hasAction ? "true" : "false",
+      "data-label-column-width": labelColumnWidth,
+      "data-density": knobProps.density,
+      "data-size": knobProps.size,
+      width: "100%",
+      minWidth: 0,
+      children: rows.map((row, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionListRowView, {
+        row,
+        stacked: true,
+        hasActionColumn: hasAction,
+        rhythm,
+        showRule: index > 0,
+        quiet
+      }, index))
+    })
+  });
+  const widthProps = {
+    width: "100%",
+    maxWidth: maxWidth === "fluid" ? void 0 : maxWidth,
+    alignSelf: maxWidth === "fluid" ? void 0 : "flex-start"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    ref,
+    "data-mpo-description-list-host": "",
+    "data-testid": testID,
+    minWidth: 0,
+    ...widthProps,
+    ...(framed ? {
+      backgroundColor: "$color3",
+      borderWidth: 1,
+      borderColor: "$color5",
+      ...knobProps.containerRadius,
+      ...knobProps.panelPadding
+    } : void 0),
+    children: list
+  });
+}
+function DescriptionListRow(_props) {
+  return null;
+}
+DescriptionList.Row = DescriptionListRow;
+const PropertyList = DescriptionList;