@homebound/beam 2.385.1 → 2.386.0

package/dist/index.cjs

@@ -9552,31 +9552,36 @@ function CheckboxBase(props) {
     errorMsg,
     helperText,
     checkboxOnly = false,
-    withLabelElement = true
+    withLabelElement = true,
+    tooltip
   } = props;
   const ref = (0, import_react39.useRef)(null);
   const { isFocusVisible, focusProps } = (0, import_react_aria21.useFocusRing)(ariaProps);
   const tid = useTestIds(props, defaultTestId(label));
   const Tag2 = withLabelElement ? "label" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-    Tag2,
-    {
-      css: Css.df.cursorPointer.relative.w("max-content").maxw(px(320)).if(description !== void 0).maxw(px(344)).if(isDisabled).cursorNotAllowed.$,
-      "aria-label": label,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria21.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("input", { ref, ...(0, import_react_aria21.mergeProps)(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StyledCheckbox, { ...props, isFocusVisible, ...tid }),
-        !checkboxOnly && // Use a mtPx(-2) to better align the label with the checkbox.
-        // Not using align-items: center as the checkbox would align with all content below, where we really want it to stay only aligned with the label
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { css: Css.ml1.mtPx(-2).$, children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { css: { ...labelStyles, ...isDisabled && disabledColor }, children: label }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { css: { ...descStyles, ...isDisabled && disabledColor }, children: description }),
-          errorMsg && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
-          helperText && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(HelperText, { helperText, ...tid.helperText })
-        ] })
-      ]
-    }
-  );
+  return maybeTooltip({
+    title: tooltip,
+    placement: "top",
+    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      Tag2,
+      {
+        css: Css.df.cursorPointer.relative.w("max-content").maxw(px(320)).if(description !== void 0).maxw(px(344)).if(isDisabled).cursorNotAllowed.$,
+        "aria-label": label,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria21.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("input", { ref, ...(0, import_react_aria21.mergeProps)(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StyledCheckbox, { ...props, isFocusVisible, ...tid }),
+          !checkboxOnly && // Use a mtPx(-2) to better align the label with the checkbox.
+          // Not using align-items: center as the checkbox would align with all content below, where we really want it to stay only aligned with the label
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { css: Css.ml1.mtPx(-2).$, children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { css: { ...labelStyles, ...isDisabled && disabledColor }, children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { css: { ...descStyles, ...isDisabled && disabledColor }, children: description }),
+            errorMsg && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
+            helperText && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(HelperText, { helperText, ...tid.helperText })
+          ] })
+        ]
+      }
+    )
+  });
 }
 var baseStyles2 = Css.hPx(16).mw(px(16)).relative.ba.bcGray300.br4.bgWhite.transition.$;
 var filledBoxStyles = Css.bcBlue700.bgBlue700.$;
@@ -11014,10 +11019,10 @@ var import_react_aria29 = require("react-aria");
 var import_react_stately9 = require("react-stately");
 var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 function Checkbox(props) {
-  const { label, disabled: isDisabled = false, selected, ...otherProps } = props;
+  const { label, disabled = false, selected, ...otherProps } = props;
   const isSelected = selected === true;
   const isIndeterminate = selected === "indeterminate";
-  const ariaProps = { isSelected, isDisabled, isIndeterminate, ...otherProps };
+  const ariaProps = { isSelected, isDisabled: !!disabled, isIndeterminate, ...otherProps };
   const checkboxProps = { ...ariaProps, "aria-label": label };
   const ref = (0, import_react47.useRef)(null);
   const toggleState = (0, import_react_stately9.useToggleState)(ariaProps);
@@ -11026,11 +11031,12 @@ function Checkbox(props) {
     CheckboxBase,
     {
       ariaProps,
-      isDisabled,
+      isDisabled: ariaProps.isDisabled,
       isIndeterminate,
       isSelected,
       inputProps,
       label,
+      tooltip: resolveTooltip(disabled),
       ...otherProps
     }
   );
@@ -14384,7 +14390,6 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-var import_mobx_react21 = require("mobx-react");
 var import_react85 = __toESM(require("react"), 1);
 var import_react_aria43 = require("react-aria");
 
@@ -15240,7 +15245,7 @@ function BoundForm(props) {
 function FormRow({ row, formState }) {
   const tid = useTestIds({}, "boundFormRow");
   const componentsWithConfig = (0, import_react81.useMemo)(() => {
-    return safeEntries(row).map(([key, fieldFnOrCustomNode]) => {
+    return Object.entries(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()}`);
@@ -15606,7 +15611,7 @@ function PageHeader(props) {
       breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
       /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("h1", { css: Css.xl3Sb.$, ...tids.pageTitle, children: pageTitle })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_mobx_react21.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: Css.df.gap1.$, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: Css.df.gap1.$, children: [
       tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         Button,
         {
@@ -15614,8 +15619,7 @@ function PageHeader(props) {
           onClick: tertiaryAction.onClick,
           variant: "tertiary",
           disabled: tertiaryAction.disabled,
-          tooltip: tertiaryAction.tooltip,
-          ...tids.tertiaryAction
+          tooltip: tertiaryAction.tooltip
         }
       ),
       cancelAction && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
@@ -15625,22 +15629,11 @@ function PageHeader(props) {
           onClick: cancelAction.onClick,
           variant: "secondary",
           disabled: cancelAction.disabled,
-          tooltip: cancelAction.tooltip,
-          ...tids.cancelAction
+          tooltip: cancelAction.tooltip
         }
       ),
-      submitAction && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-        Button,
-        {
-          label: submitAction.label,
-          onClick: submitAction.onClick,
-          variant: "primary",
-          disabled: !formState.valid || submitAction.disabled,
-          tooltip: submitAction.tooltip,
-          ...tids.submitAction
-        }
-      )
-    ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(SubmitButton, { form: formState, ...submitAction })
+    ] })
   ] }) });
 }
 function FormSections(props) {