@homebound/beam 2.380.0 → 2.381.0

package/dist/index.js

@@ -8046,8 +8046,9 @@ var BorderHoverParent = "BorderHoverParent";
 var BorderHoverChild = "BorderHoverChild";
 
 // src/forms/labelUtils.ts
-function getLabelSuffix(required) {
+function useLabelSuffix(required, readOnly) {
   const { fieldProps } = usePresentationContext();
+  if (readOnly) return void 0;
   if (required === true) {
     return fieldProps?.labelSuffix?.required;
   } else if (required === false) {
@@ -8117,7 +8118,7 @@ function TextFieldBase(props) {
   const internalProps = props.internalProps || {};
   const { compound = false, forceFocus = false, forceHover = false } = internalProps;
   const errorMessageId = `${inputProps.id}-error`;
-  const labelSuffix = getLabelSuffix(required);
+  const labelSuffix = useLabelSuffix(required, inputProps.readOnly);
   const ElementType = multiline ? "textarea" : "input";
   const tid = useTestIds(props, defaultTestId(label));
   const [isFocused, setIsFocused] = useState11(false);
@@ -16489,6 +16490,9 @@ function BoundDateRangeField(props) {
   ) });
 }
 
+// src/forms/BoundForm.tsx
+import { useMemo as useMemo38 } from "react";
+
 // src/forms/BoundIconCardField.tsx
 import { Observer as Observer6 } from "mobx-react";
 import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
@@ -16817,35 +16821,9 @@ function BoundRichTextField(props) {
   ) });
 }
 
-// src/forms/BoundSelectAndTextField.tsx
-import { jsx as jsx146, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
-function BoundSelectAndTextField(props) {
-  const { selectFieldProps, textFieldProps, compact = true } = props;
-  const tid = useTestIds(props);
-  return /* @__PURE__ */ jsxs73(CompoundField, { children: [
-    /* @__PURE__ */ jsx146(
-      BoundSelectField,
-      {
-        ...tid[defaultTestId(selectFieldProps.label ?? selectFieldProps.field.key)],
-        ...selectFieldProps,
-        sizeToContent: true,
-        compact
-      }
-    ),
-    /* @__PURE__ */ jsx146(
-      BoundTextField,
-      {
-        ...tid[defaultTestId(textFieldProps.label ?? textFieldProps.field.key)],
-        ...textFieldProps,
-        compact
-      }
-    )
-  ] });
-}
-
 // src/forms/BoundSelectField.tsx
 import { Observer as Observer13 } from "mobx-react";
-import { jsx as jsx147 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx146 } from "@emotion/react/jsx-runtime";
 function BoundSelectField(props) {
   const {
     field,
@@ -16860,7 +16838,7 @@ function BoundSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx147(Observer13, { children: () => /* @__PURE__ */ jsx147(
+  return /* @__PURE__ */ jsx146(Observer13, { children: () => /* @__PURE__ */ jsx146(
     SelectField,
     {
       label,
@@ -16891,7 +16869,7 @@ function BoundSelectField(props) {
 
 // src/forms/BoundSwitchField.tsx
 import { Observer as Observer14 } from "mobx-react";
-import { jsx as jsx148 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx147 } from "@emotion/react/jsx-runtime";
 function BoundSwitchField(props) {
   const {
     field,
@@ -16902,7 +16880,7 @@ function BoundSwitchField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx148(Observer14, { children: () => /* @__PURE__ */ jsx148(
+  return /* @__PURE__ */ jsx147(Observer14, { children: () => /* @__PURE__ */ jsx147(
     Switch,
     {
       label,
@@ -16921,7 +16899,7 @@ function BoundSwitchField(props) {
 
 // src/forms/BoundTextAreaField.tsx
 import { Observer as Observer15 } from "mobx-react";
-import { jsx as jsx149 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx148 } from "@emotion/react/jsx-runtime";
 function BoundTextAreaField(props) {
   const {
     field,
@@ -16934,7 +16912,7 @@ function BoundTextAreaField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx149(Observer15, { children: () => /* @__PURE__ */ jsx149(
+  return /* @__PURE__ */ jsx148(Observer15, { children: () => /* @__PURE__ */ jsx148(
     TextAreaField,
     {
       label,
@@ -16963,7 +16941,7 @@ function BoundTextAreaField(props) {
 
 // src/forms/BoundTextField.tsx
 import { Observer as Observer16 } from "mobx-react";
-import { jsx as jsx150 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx149 } from "@emotion/react/jsx-runtime";
 function BoundTextField(props) {
   const {
     field,
@@ -16976,7 +16954,7 @@ function BoundTextField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx150(Observer16, { children: () => /* @__PURE__ */ jsx150(
+  return /* @__PURE__ */ jsx149(Observer16, { children: () => /* @__PURE__ */ jsx149(
     TextField,
     {
       label,
@@ -17005,16 +16983,16 @@ function BoundTextField(props) {
 
 // src/forms/BoundToggleChipGroupField.tsx
 import { Observer as Observer17 } from "mobx-react";
-import { jsx as jsx151 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx150 } from "@emotion/react/jsx-runtime";
 function BoundToggleChipGroupField(props) {
   const { field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx151(Observer17, { children: () => /* @__PURE__ */ jsx151(ToggleChipGroup, { label, values: field.value || [], onChange, ...testId, ...others }) });
+  return /* @__PURE__ */ jsx150(Observer17, { children: () => /* @__PURE__ */ jsx150(ToggleChipGroup, { label, values: field.value || [], onChange, ...testId, ...others }) });
 }
 
 // src/forms/BoundTreeSelectField.tsx
 import { Observer as Observer18 } from "mobx-react";
-import { jsx as jsx152 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx151 } from "@emotion/react/jsx-runtime";
 function BoundTreeSelectField(props) {
   const {
     field,
@@ -17031,7 +17009,7 @@ function BoundTreeSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx152(Observer18, { children: () => /* @__PURE__ */ jsx152(
+  return /* @__PURE__ */ jsx151(Observer18, { children: () => /* @__PURE__ */ jsx151(
     TreeSelectField,
     {
       label,
@@ -17060,29 +17038,9 @@ function BoundTreeSelectField(props) {
   ) });
 }
 
-// src/forms/FormHeading.tsx
-import { jsx as jsx153 } from "@emotion/react/jsx-runtime";
-function FormHeading(props) {
-  const { title, xss, isFirst = false, ...others } = props;
-  return /* @__PURE__ */ jsx153(
-    "h3",
-    {
-      css: {
-        ...Css.baseMd.$,
-        // Add space before the heading, but only if it's not first.
-        ...!isFirst && Css.mt4.$,
-        ...xss
-      },
-      ...others,
-      children: title
-    }
-  );
-}
-FormHeading.isFormHeading = true;
-
 // src/forms/FormLines.tsx
 import { Children, cloneElement as cloneElement3 } from "react";
-import { jsx as jsx154 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx152 } from "@emotion/react/jsx-runtime";
 function FormLines(props) {
   const { inModal } = useModal();
   const {
@@ -17102,7 +17060,7 @@ function FormLines(props) {
     ..."labelLeftFieldWidth" in props ? { labelLeftFieldWidth } : {},
     ...width === "full" ? { fullWidth: true } : {}
   };
-  return /* @__PURE__ */ jsx154(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ jsx154(
+  return /* @__PURE__ */ jsx152(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ jsx152(
     "div",
     {
       css: {
@@ -17124,7 +17082,7 @@ function FormLines(props) {
   ) });
 }
 function FormDivider() {
-  return /* @__PURE__ */ jsx154("div", { css: Css.hPx(1).my2.bgGray200.$ });
+  return /* @__PURE__ */ jsx152("div", { css: Css.hPx(1).my2.bgGray200.$ });
 }
 function FieldGroup(props) {
   const { title, children, widths: widths2 = [] } = props;
@@ -17132,7 +17090,7 @@ function FieldGroup(props) {
     const width = widths2[i] || 1;
     return typeof width === `number` ? `${width}fr` : width;
   }).join(" ");
-  return /* @__PURE__ */ jsx154("div", { css: Css.dg.gap2.gtc(gtc).$, children });
+  return /* @__PURE__ */ jsx152("div", { css: Css.dg.gap2.gtc(gtc).$, children });
 }
 var sizes = {
   full: "100%",
@@ -17141,29 +17099,206 @@ var sizes = {
   sm: "320px"
 };
 
+// src/forms/BoundForm.tsx
+import { jsx as jsx153 } from "@emotion/react/jsx-runtime";
+var reactNodePrefix = "reactNode";
+function BoundForm(props) {
+  const { rows, formState } = props;
+  const tid = useTestIds({}, "boundForm");
+  return /* @__PURE__ */ jsx153("div", { ...tid, children: /* @__PURE__ */ jsx153(FormLines, { labelSuffix: { required: "*" }, width: "full", gap: 4, children: rows.map((row) => /* @__PURE__ */ jsx153(FormRow, { row, formState }, `fieldGroup-${Object.keys(row).join("-")}`)) }) });
+}
+function FormRow({ row, formState }) {
+  const tid = useTestIds({}, "boundFormRow");
+  const componentsWithConfig = useMemo38(() => {
+    return safeEntries(row).map(([key, fieldFnOrCustomNode]) => {
+      if (typeof fieldFnOrCustomNode === "function" && !isCustomReactNodeKey(key)) {
+        const field = formState[key] ?? fail(`Field ${key.toString()} not found in formState`);
+        const fieldFn = fieldFnOrCustomNode ?? fail(`Field function not defined for key ${key.toLocaleString()}`);
+        const { component, minWidth } = fieldFn(field);
+        return { component, key, minWidth };
+      }
+      return { component: fieldFnOrCustomNode, key };
+    });
+  }, [row, formState]);
+  const isLoading = useComputed(() => formState.loading, [formState]);
+  const itemFlexBasis = 100 / componentsWithConfig.length - 3;
+  return /* @__PURE__ */ jsx153("div", { css: Css.df.fww.gap2.$, ...tid, children: componentsWithConfig.map(({ component, key, minWidth }) => /* @__PURE__ */ jsx153("div", { css: Css.mw(minWidth).fb(`${itemFlexBasis}%`).fg1.$, children: isLoading ? /* @__PURE__ */ jsx153(LoadingSkeleton, { size: "lg" }) : component }, key.toString())) });
+}
+function isCustomReactNodeKey(key) {
+  return key.toString().startsWith(reactNodePrefix);
+}
+function boundSelectField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundSelectField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundMultiSelectField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundMultiSelectField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundMultilineSelectField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundMultiLineSelectField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundTextField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundTextField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundTextAreaField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundTextAreaField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundNumberField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundNumberField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundDateField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundDateField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundDateRangeField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundDateRangeField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundCheckboxField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundCheckboxField, { field, ...props }),
+    minWidth: "min-content"
+  });
+}
+function boundCheckboxGroupField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundCheckboxGroupField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundIconCardField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundIconCardField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundIconCardGroupField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundIconCardGroupField, { field, ...props }),
+    minWidth: "100%"
+  });
+}
+function boundRadioGroupField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundRadioGroupField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundRichTextField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundRichTextField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundSwitchField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundSwitchField, { field, labelStyle: "inline", ...props }),
+    minWidth: "min-content"
+  });
+}
+function boundToggleChipGroupField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundToggleChipGroupField, { field, ...props }),
+    minWidth: "100%"
+  });
+}
+function boundTreeSelectField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ jsx153(BoundTreeSelectField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+
+// src/forms/BoundSelectAndTextField.tsx
+import { jsx as jsx154, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+function BoundSelectAndTextField(props) {
+  const { selectFieldProps, textFieldProps, compact = true } = props;
+  const tid = useTestIds(props);
+  return /* @__PURE__ */ jsxs73(CompoundField, { children: [
+    /* @__PURE__ */ jsx154(
+      BoundSelectField,
+      {
+        ...tid[defaultTestId(selectFieldProps.label ?? selectFieldProps.field.key)],
+        ...selectFieldProps,
+        sizeToContent: true,
+        compact
+      }
+    ),
+    /* @__PURE__ */ jsx154(
+      BoundTextField,
+      {
+        ...tid[defaultTestId(textFieldProps.label ?? textFieldProps.field.key)],
+        ...textFieldProps,
+        compact
+      }
+    )
+  ] });
+}
+
+// src/forms/FormHeading.tsx
+import { jsx as jsx155 } from "@emotion/react/jsx-runtime";
+function FormHeading(props) {
+  const { title, xss, isFirst = false, ...others } = props;
+  return /* @__PURE__ */ jsx155(
+    "h3",
+    {
+      css: {
+        ...Css.baseMd.$,
+        // Add space before the heading, but only if it's not first.
+        ...!isFirst && Css.mt4.$,
+        ...xss
+      },
+      ...others,
+      children: title
+    }
+  );
+}
+FormHeading.isFormHeading = true;
+
 // src/forms/StaticField.tsx
 import { useId as useId2 } from "@react-aria/utils";
-import { jsx as jsx155, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx156, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 function StaticField(props) {
   const { fieldProps } = usePresentationContext();
   const { label, labelStyle = fieldProps?.labelStyle ?? "above", value, children } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = useId2();
   return /* @__PURE__ */ jsxs74("div", { css: Css.if(labelStyle === "left").df.jcsb.maxw100.$, ...tid.container, children: [
-    /* @__PURE__ */ jsx155("label", { css: Css.db.sm.gray700.mbPx(4).$, htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ jsx155("div", { id, css: Css.smMd.gray900.df.aic.if(labelStyle === "left").w50.$, ...tid, children: value || children })
+    /* @__PURE__ */ jsx156("label", { css: Css.db.sm.gray700.mbPx(4).$, htmlFor: id, ...tid.label, children: label }),
+    /* @__PURE__ */ jsx156("div", { id, css: Css.smMd.gray900.df.aic.if(labelStyle === "left").w50.$, ...tid, children: value || children })
   ] });
 }
 
 // src/forms/SubmitButton.tsx
-import { jsx as jsx156 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx157 } from "@emotion/react/jsx-runtime";
 function SubmitButton(props) {
   const { form, disabled, onClick, label = "Submit", ...others } = props;
   if (typeof onClick === "string") {
     throw new Error("SubmitButton.onClick doesn't support strings yet");
   }
   const dirty = useComputed(() => form.dirty, [form]);
-  return /* @__PURE__ */ jsx156(
+  return /* @__PURE__ */ jsx157(
     Button,
     {
       label,
@@ -17197,6 +17332,7 @@ export {
   BoundChipSelectField,
   BoundDateField,
   BoundDateRangeField,
+  BoundForm,
   BoundIconCardField,
   BoundIconCardGroupField,
   BoundMultiLineSelectField,
@@ -17315,6 +17451,23 @@ export {
   applyRowFn,
   assignDefaultColumnIds,
   booleanFilter,
+  boundCheckboxField,
+  boundCheckboxGroupField,
+  boundDateField,
+  boundDateRangeField,
+  boundIconCardField,
+  boundIconCardGroupField,
+  boundMultiSelectField,
+  boundMultilineSelectField,
+  boundNumberField,
+  boundRadioGroupField,
+  boundRichTextField,
+  boundSelectField,
+  boundSwitchField,
+  boundTextAreaField,
+  boundTextField,
+  boundToggleChipGroupField,
+  boundTreeSelectField,
   calcColumnSizes,
   cardStyle,
   checkboxFilter,