@homebound/beam 4.33.0 → 4.34.0

package/dist/index.js

@@ -30435,12 +30435,15 @@ function EnvironmentBannerLayout(props) {
 import { trussProps as trussProps143, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSection.tsx
+import { useCheckboxGroup as useCheckboxGroup4, useRadioGroup as useRadioGroup3 } from "react-aria";
+import { useCheckboxGroupState as useCheckboxGroupState4, useRadioGroupState as useRadioGroupState3 } from "react-stately";
 import { trussProps as trussProps141, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSectionChild.tsx
 import { useRef as useRef72 } from "react";
+import { mergeProps as mergeProps43, useCheckboxGroupItem as useCheckboxGroupItem4, useFocusRing as useFocusRing22, useRadio as useRadio3, VisuallyHidden as VisuallyHidden11 } from "react-aria";
 import { trussProps as trussProps140 } from "@homebound/truss/runtime";
-import { jsx as jsx242, jsxs as jsxs130 } from "react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx242, jsxs as jsxs130 } from "react/jsx-runtime";
 function FormSectionChild(props) {
   const {
     title,
@@ -30448,7 +30451,10 @@ function FormSectionChild(props) {
     actions,
     fields,
     orderField,
-    tag
+    tag,
+    value = title,
+    selection,
+    group
   } = props;
   const tid = useTestIds(props, "formSectionChild");
   const itemRef = useRef72(null);
@@ -30460,6 +30466,7 @@ function FormSectionChild(props) {
     id: props.id ?? title,
     itemRef
   });
+  const control = group?.mode === "single" ? /* @__PURE__ */ jsx242(FormSectionChildRadio, { state: group.state, value, label: title, ...tid.radio }) : group?.mode === "multiple" ? /* @__PURE__ */ jsx242(FormSectionChildCheckbox, { state: group.state, value, label: title, ...tid.checkbox }) : selection ? /* @__PURE__ */ jsx242(BoundCheckboxField, { field: selection.field, label: title, checkboxOnly: true, ...tid.checkbox }) : void 0;
   return /* @__PURE__ */ jsxs130("div", { ...isDraggable ? {
     ...dragItemProps,
     ref: itemRef
@@ -30479,10 +30486,73 @@ function FormSectionChild(props) {
     borderStyle: "lot_bsn",
     borderWidth: "lot_bw_0"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx242(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ jsx242(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable ? /* @__PURE__ */ jsx242(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
+    /* @__PURE__ */ jsx242(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ jsx242(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable || control ? /* @__PURE__ */ jsxs130(Fragment52, { children: [
+      isDraggable && /* @__PURE__ */ jsx242(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }),
+      control
+    ] }) : void 0 }),
     fields
   ] });
 }
+function FormSectionChildRadio(props) {
+  const {
+    state,
+    value,
+    label
+  } = props;
+  const ref = useRef72(null);
+  const {
+    inputProps,
+    isDisabled,
+    isSelected
+  } = useRadio3({
+    value,
+    "aria-label": label
+  }, state, ref);
+  const {
+    focusProps,
+    isFocusVisible
+  } = useFocusRing22();
+  const tid = useTestIds(props);
+  return /* @__PURE__ */ jsx242(StyledRadio, { isDisabled, isSelected, isFocusVisible, inputProps: {
+    ...mergeProps43(inputProps, focusProps),
+    ref,
+    ...tid
+  } });
+}
+function FormSectionChildCheckbox(props) {
+  const {
+    state,
+    value,
+    label
+  } = props;
+  const ref = useRef72(null);
+  const {
+    inputProps,
+    isDisabled,
+    isSelected
+  } = useCheckboxGroupItem4({
+    value,
+    "aria-label": label
+  }, state, ref);
+  const {
+    focusProps,
+    isFocusVisible
+  } = useFocusRing22();
+  const tid = useTestIds(props);
+  return (
+    // `StyledCheckbox` is just the visual box, so the label makes clicking it toggle the hidden input
+    /* @__PURE__ */ jsxs130("label", { ...trussProps140({
+      display: "df",
+      cursor: "cur_pointer",
+      ...isDisabled ? {
+        cursor: "cur_not_allowed"
+      } : {}
+    }), children: [
+      /* @__PURE__ */ jsx242(VisuallyHidden11, { children: /* @__PURE__ */ jsx242("input", { ref, ...mergeProps43(inputProps, focusProps), ...tid }) }),
+      /* @__PURE__ */ jsx242(StyledCheckbox, { isDisabled, isSelected, isFocusVisible })
+    ] })
+  );
+}
 
 // src/forms/FormSection/FormSection.tsx
 import { jsx as jsx243, jsxs as jsxs131 } from "react/jsx-runtime";
@@ -30492,7 +30562,8 @@ function FormSection(props) {
     description,
     actions,
     fields,
-    childSections
+    childSections,
+    selection
   } = props;
   const tid = useTestIds(props, "formSection");
   return /* @__PURE__ */ jsxs131("div", { id: defaultTestId(title), ...trussProps141({
@@ -30505,15 +30576,94 @@ function FormSection(props) {
   }), ...tid.section, children: [
     /* @__PURE__ */ jsx243(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
-    childSections && (isReorderable(childSections) ? /* @__PURE__ */ jsx243(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ jsx243("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ jsx243(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
+    childSections && (selection?.mode === "single" ? /* @__PURE__ */ jsx243(FormSectionRadioGroup, { field: selection.field, label: title, childSections, ...tid }) : selection?.mode === "multiple" ? /* @__PURE__ */ jsx243(FormSectionCheckboxGroup, { field: selection.field, label: title, childSections, ...tid }) : /* @__PURE__ */ jsx243(ChildSectionList, { childSections, ...tid.childSection }))
   ] });
 }
+function FormSectionRadioGroup(props) {
+  const {
+    field,
+    label,
+    childSections
+  } = props;
+  const tid = useTestIds(props);
+  const {
+    value,
+    readOnly
+  } = useComputed(() => ({
+    value: field.value ?? null,
+    readOnly: field.readOnly
+  }), [field]);
+  const state = useRadioGroupState3({
+    value,
+    onChange: (value2) => {
+      field.set(value2);
+      field.maybeAutoSave();
+    },
+    isDisabled: readOnly
+  });
+  const {
+    radioGroupProps
+  } = useRadioGroup3({
+    "aria-label": label,
+    isDisabled: readOnly,
+    onFocus: () => field.focus(),
+    onBlur: () => field.blur()
+  }, state);
+  return /* @__PURE__ */ jsx243("div", { ...radioGroupProps, ...tid.childGroup, children: /* @__PURE__ */ jsx243(ChildSectionList, { childSections, group: {
+    mode: "single",
+    state
+  }, ...tid.childSection }) });
+}
+function FormSectionCheckboxGroup(props) {
+  const {
+    field,
+    label,
+    childSections
+  } = props;
+  const tid = useTestIds(props);
+  const {
+    value,
+    readOnly
+  } = useComputed(() => ({
+    value: field.value ?? [],
+    readOnly: field.readOnly
+  }), [field]);
+  const state = useCheckboxGroupState4({
+    value,
+    onChange: (values) => {
+      field.set(values);
+      field.maybeAutoSave();
+    },
+    isDisabled: readOnly
+  });
+  const {
+    groupProps
+  } = useCheckboxGroup4({
+    "aria-label": label,
+    isDisabled: readOnly,
+    onFocus: () => field.focus(),
+    onBlur: () => field.blur()
+  }, state);
+  return /* @__PURE__ */ jsx243("div", { ...groupProps, ...tid.childGroup, children: /* @__PURE__ */ jsx243(ChildSectionList, { childSections, group: {
+    mode: "multiple",
+    state
+  }, ...tid.childSection }) });
+}
+function ChildSectionList(props) {
+  const {
+    childSections,
+    group,
+    ...tid
+  } = props;
+  return isReorderable(childSections) ? /* @__PURE__ */ jsx243(DraggableChildren, { childSections, group, ...tid }) : /* @__PURE__ */ jsx243("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ jsx243(FormSectionChild, { ...child, group, ...tid }, child.id ?? child.title)) });
+}
 function isReorderable(childSections) {
   return childSections.length > 0 && childSections.every((c) => !!c.orderField);
 }
 function DraggableChildren(props) {
   const {
     childSections,
+    group,
     ...tid
   } = props;
   const sorted = sortByOrderField(childSections);
@@ -30531,7 +30681,7 @@ function DraggableChildren(props) {
   return /* @__PURE__ */ jsx243(DnDGrid, { onReorder: handleReorder, lockAxis: "y", gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
     gap: "g_3"
-  }, children: sorted.map((child) => /* @__PURE__ */ jsx243(FormSectionChild, { ...child, ...tid }, child.id)) });
+  }, children: sorted.map((child) => /* @__PURE__ */ jsx243(FormSectionChild, { ...child, group, ...tid }, child.id)) });
 }
 function sortByOrderField(childSections) {
   return [...childSections].sort((a, b) => (a.orderField.value ?? 0) - (b.orderField.value ?? 0));
@@ -30730,7 +30880,7 @@ function PageBanner(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo59, useRef as useRef74 } from "react";
-import { mergeProps as mergeProps43, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps44, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
 import { useLayoutEffect as useLayoutEffect15, useRef as useRef73, useState as useState64 } from "react";
@@ -30893,18 +31043,18 @@ function NavbarLayout(props) {
     top: autoHideState === "hidden" ? `calc(${bannerTop} - ${navHeight}px)` : bannerTop
   };
   const navbarEl = useMemo59(() => /* @__PURE__ */ jsx247(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx247(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx247(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx247(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs133("div", { ...mergeProps43(void 0, cssVars, {
+  return /* @__PURE__ */ jsx247(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx247(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx247(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs133("div", { ...mergeProps44(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx247("div", { ref: spacerRef, ...mergeProps43(void 0, {
+    /* @__PURE__ */ jsx247("div", { ref: spacerRef, ...mergeProps44(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx247("div", { ref: navMetricsRef, ...mergeProps43(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    }), children: /* @__PURE__ */ jsx247("div", { ref: navMetricsRef, ...mergeProps44(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
     /* @__PURE__ */ jsx247("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
@@ -30989,7 +31139,7 @@ function BaseHeader(props) {
 
 // src/components/Headers/PageHeader.tsx
 import { trussProps as trussProps145 } from "@homebound/truss/runtime";
-import { Fragment as Fragment52, jsx as jsx249, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx249, jsxs as jsxs135 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
     tabs,
@@ -31009,7 +31159,7 @@ function PageHeader2(props) {
     /* @__PURE__ */ jsx249(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlotActions.length > 0 && /* @__PURE__ */ jsx249(HeaderActions, { actions: rightSlotActions, collapseOnSm: true }),
     rightSlot
-  ] }), bottomSlot: (bottomSlotActions.length > 0 || tabs) && /* @__PURE__ */ jsxs135(Fragment52, { children: [
+  ] }), bottomSlot: (bottomSlotActions.length > 0 || tabs) && /* @__PURE__ */ jsxs135(Fragment53, { children: [
     bottomSlotActions.length > 0 && /* @__PURE__ */ jsx249("div", { ...trussProps145({
       ...pageContentPaddingX,
       ...{
@@ -31085,7 +31235,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps44, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps45, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
 import { jsx as jsx252, jsxs as jsxs136 } from "react/jsx-runtime";
 var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -31140,17 +31290,17 @@ function PageHeaderLayout(props) {
     top: autoHideState === "hidden" ? `calc(${outerTop} - ${headerHeight}px)` : outerTop
   };
   const pageHeaderEl = useMemo60(() => /* @__PURE__ */ jsx252(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx252(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs136("div", { ...mergeProps44(void 0, style, {
+  return /* @__PURE__ */ jsx252(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs136("div", { ...mergeProps45(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx252("div", { ref: spacerRef, ...mergeProps44(void 0, {
+    /* @__PURE__ */ jsx252("div", { ref: spacerRef, ...mergeProps45(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx252("div", { ref: headerMetricsRef, ...mergeProps44(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    }), children: /* @__PURE__ */ jsx252("div", { ref: headerMetricsRef, ...mergeProps45(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
     bannerSlot,
     /* @__PURE__ */ jsx252("div", { className: "df fdc fg1 mh0 w100 n_has_data_self_top_spaced_first_child_pt3", ...tid.body, children })
   ] }) });
@@ -31327,7 +31477,7 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps148, mergeProps as mergeProps45, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
+import { trussProps as trussProps148, mergeProps as mergeProps46, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
 import { jsx as jsx257, jsxs as jsxs138 } from "react/jsx-runtime";
 var __maybeInc37 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -31393,12 +31543,12 @@ function WorkflowPageLayout(props) {
     };
   }, [showFooter]);
   return /* @__PURE__ */ jsxs138(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ jsxs138("div", { ...mergeProps45(void 0, style, {
+    /* @__PURE__ */ jsxs138("div", { ...mergeProps46(void 0, style, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ jsx257("div", { ...mergeProps45(void 0, {
+      /* @__PURE__ */ jsx257("div", { ...mergeProps46(void 0, {
         height: headerHeight
       }, {
         flexShrink: "fs0",
@@ -31748,7 +31898,7 @@ function useFilter4({ filterDefs }) {
 import { useCallback as useCallback49, useRef as useRef79 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition6 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
-import { Fragment as Fragment53, jsx as jsx264, jsxs as jsxs141 } from "react/jsx-runtime";
+import { Fragment as Fragment54, jsx as jsx264, jsxs as jsxs141 } from "react/jsx-runtime";
 function Autocomplete(props) {
   const {
     onSelect,
@@ -31819,7 +31969,7 @@ function Autocomplete(props) {
     // Ensures the menu never gets too small.
     minWidth: 200
   };
-  return /* @__PURE__ */ jsxs141(Fragment53, { children: [
+  return /* @__PURE__ */ jsxs141(Fragment54, { children: [
     /* @__PURE__ */ jsx264(
       TextFieldBase,
       {
@@ -31862,7 +32012,7 @@ function Autocomplete(props) {
 
 // src/inputs/ToggleButton.tsx
 import { useRef as useRef80, useState as useState69 } from "react";
-import { useFocusRing as useFocusRing22, useHover as useHover26, usePress as usePress3, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden11 } from "react-aria";
+import { useFocusRing as useFocusRing23, useHover as useHover26, usePress as usePress3, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden12 } from "react-aria";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { trussProps as trussProps151 } from "@homebound/truss/runtime";
 import { jsx as jsx265, jsxs as jsxs142 } from "react/jsx-runtime";
@@ -31911,7 +32061,7 @@ function ToggleButton(props) {
   const {
     isFocusVisible: isFocusVisibleFromEvents,
     focusProps
-  } = useFocusRing22({
+  } = useFocusRing23({
     ...otherProps,
     within: true
   });
@@ -31972,7 +32122,7 @@ function ToggleButton(props) {
     children: /* @__PURE__ */ jsxs142("label", { ...labelAttrs, children: [
       icon && /* @__PURE__ */ jsx265(Icon, { icon }),
       label,
-      /* @__PURE__ */ jsx265(VisuallyHidden11, { children: /* @__PURE__ */ jsx265("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ jsx265(VisuallyHidden12, { children: /* @__PURE__ */ jsx265("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }