@homebound/beam 2.380.1 → 2.381.0

package/dist/index.cjs

@@ -49,6 +49,7 @@ __export(index_exports, {
   BoundChipSelectField: () => BoundChipSelectField,
   BoundDateField: () => BoundDateField,
   BoundDateRangeField: () => BoundDateRangeField,
+  BoundForm: () => BoundForm,
   BoundIconCardField: () => BoundIconCardField,
   BoundIconCardGroupField: () => BoundIconCardGroupField,
   BoundMultiLineSelectField: () => BoundMultiLineSelectField,
@@ -167,6 +168,23 @@ __export(index_exports, {
   applyRowFn: () => applyRowFn,
   assignDefaultColumnIds: () => assignDefaultColumnIds,
   booleanFilter: () => booleanFilter,
+  boundCheckboxField: () => boundCheckboxField,
+  boundCheckboxGroupField: () => boundCheckboxGroupField,
+  boundDateField: () => boundDateField,
+  boundDateRangeField: () => boundDateRangeField,
+  boundIconCardField: () => boundIconCardField,
+  boundIconCardGroupField: () => boundIconCardGroupField,
+  boundMultiSelectField: () => boundMultiSelectField,
+  boundMultilineSelectField: () => boundMultilineSelectField,
+  boundNumberField: () => boundNumberField,
+  boundRadioGroupField: () => boundRadioGroupField,
+  boundRichTextField: () => boundRichTextField,
+  boundSelectField: () => boundSelectField,
+  boundSwitchField: () => boundSwitchField,
+  boundTextAreaField: () => boundTextAreaField,
+  boundTextField: () => boundTextField,
+  boundToggleChipGroupField: () => boundToggleChipGroupField,
+  boundTreeSelectField: () => boundTreeSelectField,
   calcColumnSizes: () => calcColumnSizes,
   cardStyle: () => cardStyle,
   checkboxFilter: () => checkboxFilter,
@@ -16816,6 +16834,9 @@ function BoundDateRangeField(props) {
   ) });
 }
 
+// src/forms/BoundForm.tsx
+var import_react108 = require("react");
+
 // src/forms/BoundIconCardField.tsx
 var import_mobx_react7 = require("mobx-react");
 var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
@@ -17144,35 +17165,9 @@ function BoundRichTextField(props) {
   ) });
 }
 
-// src/forms/BoundSelectAndTextField.tsx
-var import_jsx_runtime146 = require("@emotion/react/jsx-runtime");
-function BoundSelectAndTextField(props) {
-  const { selectFieldProps, textFieldProps, compact = true } = props;
-  const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(CompoundField, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-      BoundSelectField,
-      {
-        ...tid[defaultTestId(selectFieldProps.label ?? selectFieldProps.field.key)],
-        ...selectFieldProps,
-        sizeToContent: true,
-        compact
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-      BoundTextField,
-      {
-        ...tid[defaultTestId(textFieldProps.label ?? textFieldProps.field.key)],
-        ...textFieldProps,
-        compact
-      }
-    )
-  ] });
-}
-
 // src/forms/BoundSelectField.tsx
 var import_mobx_react14 = require("mobx-react");
-var import_jsx_runtime147 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime146 = require("@emotion/react/jsx-runtime");
 function BoundSelectField(props) {
   const {
     field,
@@ -17187,7 +17182,7 @@ function BoundSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_mobx_react14.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_mobx_react14.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     SelectField,
     {
       label,
@@ -17218,7 +17213,7 @@ function BoundSelectField(props) {
 
 // src/forms/BoundSwitchField.tsx
 var import_mobx_react15 = require("mobx-react");
-var import_jsx_runtime148 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime147 = require("@emotion/react/jsx-runtime");
 function BoundSwitchField(props) {
   const {
     field,
@@ -17229,7 +17224,7 @@ function BoundSwitchField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_mobx_react15.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_mobx_react15.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
     Switch,
     {
       label,
@@ -17248,7 +17243,7 @@ function BoundSwitchField(props) {
 
 // src/forms/BoundTextAreaField.tsx
 var import_mobx_react16 = require("mobx-react");
-var import_jsx_runtime149 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime148 = require("@emotion/react/jsx-runtime");
 function BoundTextAreaField(props) {
   const {
     field,
@@ -17261,7 +17256,7 @@ function BoundTextAreaField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(import_mobx_react16.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_mobx_react16.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     TextAreaField,
     {
       label,
@@ -17290,7 +17285,7 @@ function BoundTextAreaField(props) {
 
 // src/forms/BoundTextField.tsx
 var import_mobx_react17 = require("mobx-react");
-var import_jsx_runtime150 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime149 = require("@emotion/react/jsx-runtime");
 function BoundTextField(props) {
   const {
     field,
@@ -17303,7 +17298,7 @@ function BoundTextField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(import_mobx_react17.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(import_mobx_react17.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
     TextField,
     {
       label,
@@ -17332,16 +17327,16 @@ function BoundTextField(props) {
 
 // src/forms/BoundToggleChipGroupField.tsx
 var import_mobx_react18 = require("mobx-react");
-var import_jsx_runtime151 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime150 = require("@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__ */ (0, import_jsx_runtime151.jsx)(import_mobx_react18.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(ToggleChipGroup, { label, values: field.value || [], onChange, ...testId, ...others }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(import_mobx_react18.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(ToggleChipGroup, { label, values: field.value || [], onChange, ...testId, ...others }) });
 }
 
 // src/forms/BoundTreeSelectField.tsx
 var import_mobx_react19 = require("mobx-react");
-var import_jsx_runtime152 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime151 = require("@emotion/react/jsx-runtime");
 function BoundTreeSelectField(props) {
   const {
     field,
@@ -17358,7 +17353,7 @@ function BoundTreeSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_mobx_react19.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(import_mobx_react19.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
     TreeSelectField,
     {
       label,
@@ -17387,29 +17382,9 @@ function BoundTreeSelectField(props) {
   ) });
 }
 
-// src/forms/FormHeading.tsx
-var import_jsx_runtime153 = require("@emotion/react/jsx-runtime");
-function FormHeading(props) {
-  const { title, xss, isFirst = false, ...others } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
-    "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
 var import_react107 = require("react");
-var import_jsx_runtime154 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime152 = require("@emotion/react/jsx-runtime");
 function FormLines(props) {
   const { inModal } = useModal();
   const {
@@ -17429,7 +17404,7 @@ function FormLines(props) {
     ..."labelLeftFieldWidth" in props ? { labelLeftFieldWidth } : {},
     ...width === "full" ? { fullWidth: true } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "div",
     {
       css: {
@@ -17451,7 +17426,7 @@ function FormLines(props) {
   ) });
 }
 function FormDivider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { css: Css.hPx(1).my2.bgGray200.$ });
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { css: Css.hPx(1).my2.bgGray200.$ });
 }
 function FieldGroup(props) {
   const { title, children, widths: widths2 = [] } = props;
@@ -17459,7 +17434,7 @@ function FieldGroup(props) {
     const width = widths2[i] || 1;
     return typeof width === `number` ? `${width}fr` : width;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { css: Css.dg.gap2.gtc(gtc).$, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { css: Css.dg.gap2.gtc(gtc).$, children });
 }
 var sizes = {
   full: "100%",
@@ -17468,29 +17443,206 @@ var sizes = {
   sm: "320px"
 };
 
-// src/forms/StaticField.tsx
-var import_utils119 = require("@react-aria/utils");
+// src/forms/BoundForm.tsx
+var import_jsx_runtime153 = require("@emotion/react/jsx-runtime");
+var reactNodePrefix = "reactNode";
+function BoundForm(props) {
+  const { rows, formState } = props;
+  const tid = useTestIds({}, "boundForm");
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(FormLines, { labelSuffix: { required: "*" }, width: "full", gap: 4, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(FormRow, { row, formState }, `fieldGroup-${Object.keys(row).join("-")}`)) }) });
+}
+function FormRow({ row, formState }) {
+  const tid = useTestIds({}, "boundFormRow");
+  const componentsWithConfig = (0, import_react108.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime153.jsx)("div", { css: Css.df.fww.gap2.$, ...tid, children: componentsWithConfig.map(({ component, key, minWidth }) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { css: Css.mw(minWidth).fb(`${itemFlexBasis}%`).fg1.$, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(LoadingSkeleton, { size: "lg" }) : component }, key.toString())) });
+}
+function isCustomReactNodeKey(key) {
+  return key.toString().startsWith(reactNodePrefix);
+}
+function boundSelectField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundSelectField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundMultiSelectField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundMultiSelectField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundMultilineSelectField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundMultiLineSelectField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundTextField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundTextField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundTextAreaField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundTextAreaField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundNumberField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundNumberField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundDateField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundDateField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundDateRangeField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundDateRangeField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundCheckboxField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundCheckboxField, { field, ...props }),
+    minWidth: "min-content"
+  });
+}
+function boundCheckboxGroupField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundCheckboxGroupField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundIconCardField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundIconCardField, { field, ...props }),
+    minWidth: "150px"
+  });
+}
+function boundIconCardGroupField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundIconCardGroupField, { field, ...props }),
+    minWidth: "100%"
+  });
+}
+function boundRadioGroupField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundRadioGroupField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundRichTextField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundRichTextField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+function boundSwitchField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundSwitchField, { field, labelStyle: "inline", ...props }),
+    minWidth: "min-content"
+  });
+}
+function boundToggleChipGroupField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundToggleChipGroupField, { field, ...props }),
+    minWidth: "100%"
+  });
+}
+function boundTreeSelectField(props) {
+  return (field) => ({
+    component: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(BoundTreeSelectField, { field, ...props }),
+    minWidth: "200px"
+  });
+}
+
+// src/forms/BoundSelectAndTextField.tsx
+var import_jsx_runtime154 = require("@emotion/react/jsx-runtime");
+function BoundSelectAndTextField(props) {
+  const { selectFieldProps, textFieldProps, compact = true } = props;
+  const tid = useTestIds(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(CompoundField, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+      BoundSelectField,
+      {
+        ...tid[defaultTestId(selectFieldProps.label ?? selectFieldProps.field.key)],
+        ...selectFieldProps,
+        sizeToContent: true,
+        compact
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+      BoundTextField,
+      {
+        ...tid[defaultTestId(textFieldProps.label ?? textFieldProps.field.key)],
+        ...textFieldProps,
+        compact
+      }
+    )
+  ] });
+}
+
+// src/forms/FormHeading.tsx
 var import_jsx_runtime155 = require("@emotion/react/jsx-runtime");
+function FormHeading(props) {
+  const { title, xss, isFirst = false, ...others } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+    "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
+var import_utils120 = require("@react-aria/utils");
+var import_jsx_runtime156 = require("@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 = (0, import_utils119.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { css: Css.if(labelStyle === "left").df.jcsb.maxw100.$, ...tid.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("label", { css: Css.db.sm.gray700.mbPx(4).$, htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { id, css: Css.smMd.gray900.df.aic.if(labelStyle === "left").w50.$, ...tid, children: value || children })
+  const id = (0, import_utils120.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { css: Css.if(labelStyle === "left").df.jcsb.maxw100.$, ...tid.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("label", { css: Css.db.sm.gray700.mbPx(4).$, htmlFor: id, ...tid.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { id, css: Css.smMd.gray900.df.aic.if(labelStyle === "left").w50.$, ...tid, children: value || children })
   ] });
 }
 
 // src/forms/SubmitButton.tsx
-var import_jsx_runtime156 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime157 = require("@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__ */ (0, import_jsx_runtime156.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
     Button,
     {
       label,
@@ -17525,6 +17677,7 @@ function SubmitButton(props) {
   BoundChipSelectField,
   BoundDateField,
   BoundDateRangeField,
+  BoundForm,
   BoundIconCardField,
   BoundIconCardGroupField,
   BoundMultiLineSelectField,
@@ -17643,6 +17796,23 @@ function SubmitButton(props) {
   applyRowFn,
   assignDefaultColumnIds,
   booleanFilter,
+  boundCheckboxField,
+  boundCheckboxGroupField,
+  boundDateField,
+  boundDateRangeField,
+  boundIconCardField,
+  boundIconCardGroupField,
+  boundMultiSelectField,
+  boundMultilineSelectField,
+  boundNumberField,
+  boundRadioGroupField,
+  boundRichTextField,
+  boundSelectField,
+  boundSwitchField,
+  boundTextAreaField,
+  boundTextField,
+  boundToggleChipGroupField,
+  boundTreeSelectField,
   calcColumnSizes,
   cardStyle,
   checkboxFilter,