@homebound/beam 2.385.1 → 2.387.0

package/dist/index.d.cts

@@ -6044,6 +6044,7 @@ interface AccordionProps<X = AccordionXss> {
      * Allows multiple accordions to be expanded simultaneously (enabled by default)
      */
     index?: number;
+    onToggle?: VoidFunction;
     setExpandedIndex?: Dispatch<SetStateAction<number | undefined>>;
     /** Turns the title into a button. If provided, disables expand/collapse on title text */
     titleOnClick?: VoidFunction;
@@ -6463,7 +6464,8 @@ interface CheckboxProps {
     onChange: (selected: boolean) => void;
     /** Additional text displayed below label */
     description?: string;
-    disabled?: boolean;
+    /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
+    disabled?: boolean | ReactNode;
     errorMsg?: string;
     helperText?: string | ReactNode;
     /** Callback fired when focus removes from the component */
@@ -7490,11 +7492,11 @@ type TReactNodePrefix<S extends string> = `${typeof reactNodePrefix}${Capitalize
 type CustomReactNodeKey = `${typeof reactNodePrefix}${string}`;
 type BoundFormRowInputs<F> = Partial<{
     [K in keyof F]: BoundFieldInputFn<F>;
-}> & {
+} & {
     [K in CustomReactNodeKey]: ReactNode;
 } & {
     [K in keyof F as TReactNodePrefix<K & string>]: ReactNode;
-};
+}>;
 type BoundFormInputConfig<F> = BoundFormRowInputs<F>[];
 type BoundFormProps<F> = {
     rows: BoundFormInputConfig<F>;
@@ -7637,7 +7639,7 @@ type FormPageLayoutProps<F> = {
     breadCrumb?: HeaderBreadcrumb | HeaderBreadcrumb[];
     formState: ObjectState<F>;
     formSections: FormSectionConfig<F>;
-    submitAction?: ActionButtonProps;
+    submitAction: ActionButtonProps;
     cancelAction?: ActionButtonProps;
     tertiaryAction?: ActionButtonProps;
     rightSideBar?: SidebarContentProps[];

package/dist/index.d.ts

@@ -6044,6 +6044,7 @@ interface AccordionProps<X = AccordionXss> {
      * Allows multiple accordions to be expanded simultaneously (enabled by default)
      */
     index?: number;
+    onToggle?: VoidFunction;
     setExpandedIndex?: Dispatch<SetStateAction<number | undefined>>;
     /** Turns the title into a button. If provided, disables expand/collapse on title text */
     titleOnClick?: VoidFunction;
@@ -6463,7 +6464,8 @@ interface CheckboxProps {
     onChange: (selected: boolean) => void;
     /** Additional text displayed below label */
     description?: string;
-    disabled?: boolean;
+    /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
+    disabled?: boolean | ReactNode;
     errorMsg?: string;
     helperText?: string | ReactNode;
     /** Callback fired when focus removes from the component */
@@ -7490,11 +7492,11 @@ type TReactNodePrefix<S extends string> = `${typeof reactNodePrefix}${Capitalize
 type CustomReactNodeKey = `${typeof reactNodePrefix}${string}`;
 type BoundFormRowInputs<F> = Partial<{
     [K in keyof F]: BoundFieldInputFn<F>;
-}> & {
+} & {
     [K in CustomReactNodeKey]: ReactNode;
 } & {
     [K in keyof F as TReactNodePrefix<K & string>]: ReactNode;
-};
+}>;
 type BoundFormInputConfig<F> = BoundFormRowInputs<F>[];
 type BoundFormProps<F> = {
     rows: BoundFormInputConfig<F>;
@@ -7637,7 +7639,7 @@ type FormPageLayoutProps<F> = {
     breadCrumb?: HeaderBreadcrumb | HeaderBreadcrumb[];
     formState: ObjectState<F>;
     formSections: FormSectionConfig<F>;
-    submitAction?: ActionButtonProps;
+    submitAction: ActionButtonProps;
     cancelAction?: ActionButtonProps;
     tertiaryAction?: ActionButtonProps;
     rightSideBar?: SidebarContentProps[];

package/dist/index.js

@@ -9198,31 +9198,36 @@ function CheckboxBase(props) {
     errorMsg,
     helperText,
     checkboxOnly = false,
-    withLabelElement = true
+    withLabelElement = true,
+    tooltip
   } = props;
   const ref = useRef17(null);
   const { isFocusVisible, focusProps } = useFocusRing5(ariaProps);
   const tid = useTestIds(props, defaultTestId(label));
   const Tag2 = withLabelElement ? "label" : "div";
-  return /* @__PURE__ */ jsxs27(
-    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__ */ jsx47(VisuallyHidden3, { children: /* @__PURE__ */ jsx47("input", { ref, ...mergeProps6(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }),
-        /* @__PURE__ */ jsx47(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__ */ jsxs27("div", { css: Css.ml1.mtPx(-2).$, children: [
-          label && /* @__PURE__ */ jsx47("div", { css: { ...labelStyles, ...isDisabled && disabledColor }, children: label }),
-          description && /* @__PURE__ */ jsx47("div", { css: { ...descStyles, ...isDisabled && disabledColor }, children: description }),
-          errorMsg && /* @__PURE__ */ jsx47(ErrorMessage, { errorMsg, ...tid.errorMsg }),
-          helperText && /* @__PURE__ */ jsx47(HelperText, { helperText, ...tid.helperText })
-        ] })
-      ]
-    }
-  );
+  return maybeTooltip({
+    title: tooltip,
+    placement: "top",
+    children: /* @__PURE__ */ jsxs27(
+      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__ */ jsx47(VisuallyHidden3, { children: /* @__PURE__ */ jsx47("input", { ref, ...mergeProps6(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }),
+          /* @__PURE__ */ jsx47(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__ */ jsxs27("div", { css: Css.ml1.mtPx(-2).$, children: [
+            label && /* @__PURE__ */ jsx47("div", { css: { ...labelStyles, ...isDisabled && disabledColor }, children: label }),
+            description && /* @__PURE__ */ jsx47("div", { css: { ...descStyles, ...isDisabled && disabledColor }, children: description }),
+            errorMsg && /* @__PURE__ */ jsx47(ErrorMessage, { errorMsg, ...tid.errorMsg }),
+            helperText && /* @__PURE__ */ jsx47(HelperText, { helperText, ...tid.helperText })
+          ] })
+        ]
+      }
+    )
+  });
 }
 var baseStyles2 = Css.hPx(16).mw(px(16)).relative.ba.bcGray300.br4.bgWhite.transition.$;
 var filledBoxStyles = Css.bcBlue700.bgBlue700.$;
@@ -10660,10 +10665,10 @@ import { useCheckbox } from "react-aria";
 import { useToggleState } from "react-stately";
 import { jsx as jsx57 } from "@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 = useRef24(null);
   const toggleState = useToggleState(ariaProps);
@@ -10672,11 +10677,12 @@ function Checkbox(props) {
     CheckboxBase,
     {
       ariaProps,
-      isDisabled,
+      isDisabled: ariaProps.isDisabled,
       isIndeterminate,
       isSelected,
       inputProps,
       label,
+      tooltip: resolveTooltip(disabled),
       ...otherProps
     }
   );
@@ -13488,6 +13494,7 @@ function Accordion(props) {
     index,
     setExpandedIndex,
     titleOnClick,
+    onToggle,
     omitPadding = false,
     xss
   } = props;
@@ -13512,7 +13519,8 @@ function Accordion(props) {
   const toggle = useCallback13(() => {
     setExpanded((prev) => !prev);
     if (setExpandedIndex) setExpandedIndex(index);
-  }, [index, setExpandedIndex]);
+    if (onToggle) onToggle();
+  }, [index, setExpandedIndex, onToggle]);
   const touchableStyle = useMemo22(
     () => ({
       ...Css.df.jcsb.gapPx(12).aic.p2.baseMd.outline("none").onHover.bgGray100.if(!!titleOnClick).baseSb.$,
@@ -14030,7 +14038,6 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import { Observer as Observer19 } from "mobx-react";
 import React13, { createRef, useCallback as useCallback16, useEffect as useEffect21, useMemo as useMemo28, useRef as useRef41, useState as useState32 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing11 } from "react-aria";
 
@@ -14886,7 +14893,7 @@ function BoundForm(props) {
 function FormRow({ row, formState }) {
   const tid = useTestIds({}, "boundFormRow");
   const componentsWithConfig = useMemo27(() => {
-    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()}`);
@@ -15252,7 +15259,7 @@ function PageHeader(props) {
       breadCrumb && /* @__PURE__ */ jsx120(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
       /* @__PURE__ */ jsx120("h1", { css: Css.xl3Sb.$, ...tids.pageTitle, children: pageTitle })
     ] }),
-    /* @__PURE__ */ jsx120(Observer19, { children: () => /* @__PURE__ */ jsxs58("div", { css: Css.df.gap1.$, children: [
+    /* @__PURE__ */ jsxs58("div", { css: Css.df.gap1.$, children: [
       tertiaryAction && /* @__PURE__ */ jsx120(
         Button,
         {
@@ -15260,8 +15267,7 @@ function PageHeader(props) {
           onClick: tertiaryAction.onClick,
           variant: "tertiary",
           disabled: tertiaryAction.disabled,
-          tooltip: tertiaryAction.tooltip,
-          ...tids.tertiaryAction
+          tooltip: tertiaryAction.tooltip
         }
       ),
       cancelAction && /* @__PURE__ */ jsx120(
@@ -15271,22 +15277,11 @@ function PageHeader(props) {
           onClick: cancelAction.onClick,
           variant: "secondary",
           disabled: cancelAction.disabled,
-          tooltip: cancelAction.tooltip,
-          ...tids.cancelAction
+          tooltip: cancelAction.tooltip
         }
       ),
-      submitAction && /* @__PURE__ */ jsx120(
-        Button,
-        {
-          label: submitAction.label,
-          onClick: submitAction.onClick,
-          variant: "primary",
-          disabled: !formState.valid || submitAction.disabled,
-          tooltip: submitAction.tooltip,
-          ...tids.submitAction
-        }
-      )
-    ] }) })
+      /* @__PURE__ */ jsx120(SubmitButton, { form: formState, ...submitAction })
+    ] })
   ] }) });
 }
 function FormSections(props) {