@homebound/beam 2.383.0 → 2.383.1

package/dist/index.cjs

@@ -11042,13 +11042,15 @@ function CheckboxGroup(props) {
     helperText,
     onBlur,
     onFocus,
-    columns = 1
+    columns = 1,
+    required
   } = props;
   const state = (0, import_react_stately10.useCheckboxGroupState)({ ...props, value: values });
   const { groupProps, labelProps } = (0, import_react_aria30.useCheckboxGroup)(props, state);
   const tid = useTestIds(props);
+  const labelSuffix = useLabelSuffix(required, false);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { ...groupProps, css: Css.if(labelStyle === "left").df.fdr.$, onBlur, onFocus, ...tid, children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { css: Css.if(labelStyle === "left").w50.$, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { label, ...labelProps, ...tid.label }) }),
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { css: Css.if(labelStyle === "left").w50.$, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix }) }),
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { css: Css.dg.gtc(`repeat(${columns}, auto)`).gap2.$, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       CheckboxGroupItem,
       {
@@ -12363,12 +12365,22 @@ var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
 function ToggleChipGroup(props) {
   const { fieldProps } = usePresentationContext();
   const { labelLeftFieldWidth = "50%" } = fieldProps ?? {};
-  const { values, label, labelStyle = fieldProps?.labelStyle ?? "above", options, xss } = props;
+  const { values, label, labelStyle = fieldProps?.labelStyle ?? "above", options, required, xss } = props;
   const state = (0, import_react_stately16.useCheckboxGroupState)({ ...props, value: values });
   const { groupProps, labelProps } = (0, import_react_aria39.useCheckboxGroup)(props, state);
   const tid = useTestIds(props, "toggleChip");
+  const labelSuffix = useLabelSuffix(required, false);
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { ...groupProps, css: Css.relative.df.fdc.if(labelStyle === "left").fdr.gap2.maxw100.jcsb.$, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      Label,
+      {
+        label,
+        ...labelProps,
+        hidden: labelStyle === "hidden",
+        inline: labelStyle !== "above",
+        suffix: labelSuffix
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       "div",
       {
@@ -14362,7 +14374,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-var import_mobx_react20 = require("mobx-react");
+var import_mobx_react21 = require("mobx-react");
 var import_react84 = __toESM(require("react"), 1);
 var import_react_aria43 = require("react-aria");
 
@@ -14430,6 +14442,7 @@ function BoundCheckboxGroupField(props) {
     CheckboxGroup,
     {
       label,
+      required: field.required,
       values: field.value || [],
       onChange: (values) => {
         onChange(values);
@@ -15084,7 +15097,17 @@ var import_jsx_runtime109 = 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_runtime109.jsx)(import_mobx_react18.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ToggleChipGroup, { label, values: field.value || [], onChange, ...testId, ...others }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_mobx_react18.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    ToggleChipGroup,
+    {
+      label,
+      required: field.required,
+      values: field.value || [],
+      onChange,
+      ...testId,
+      ...others
+    }
+  ) });
 }
 
 // src/forms/BoundTreeSelectField.tsx
@@ -15438,21 +15461,26 @@ function StaticField(props) {
 }
 
 // src/forms/SubmitButton.tsx
+var import_mobx_react20 = require("mobx-react");
 var import_jsx_runtime117 = 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]);
+  const state = (0, import_mobx_react20.useLocalObservable)(() => ({ clicked: false }));
+  const canSubmit = useComputed(() => {
+    return form.isNewEntity && !state.clicked ? true : form.dirty && form.valid;
+  }, [form]);
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     Button,
     {
       label,
-      disabled: disabled || !dirty,
+      disabled: disabled || !canSubmit,
       onClick: (e) => {
+        state.clicked = true;
         if (form.canSave()) {
-          void onClick(e);
+          return onClick(e);
         }
       },
       ...others
@@ -15518,7 +15546,7 @@ function PageHeader(props) {
       breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
       /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("h1", { css: Css.xl3Sb.$, ...tids.pageTitle, children: pageTitle })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_mobx_react20.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.df.gap1.$, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_mobx_react21.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.df.gap1.$, children: [
       tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
         Button,
         {