@homebound/beam 3.61.0 → 3.63.0

package/dist/index.d.cts

@@ -9854,6 +9854,11 @@ type StepperTabProps = {
     disabled?: boolean;
     /** Collapses the tab down to its colored bottom border only, hiding the label — for the mobile view */
     collapsed?: boolean;
+    /** Storybook-only visual state overrides for snapshotting pseudo-interactions. */
+    __storyState?: {
+        hovered?: boolean;
+        focusVisible?: boolean;
+    };
 };
 declare function StepperTab(props: StepperTabProps): JSX.Element;
 
@@ -10058,6 +10063,8 @@ type FormSectionLayoutProps = {
     description?: ReactNode;
     /** Rendered top-right of the title row, e.g. a "Save draft" button. */
     actions?: ButtonProps[];
+    /** Rendered before form sections. Useful in forms that only need the main form title, or for form fields that shape the context of a form beforehand.  */
+    initialFields?: ReactNode;
     sections: FormSectionProps[];
 };
 /** Centered (720px) width/column shell for a form built out of `FormSection`s — e.g. as a `WorkflowLayoutStep`'s `content`. */

package/dist/index.d.ts

@@ -9854,6 +9854,11 @@ type StepperTabProps = {
     disabled?: boolean;
     /** Collapses the tab down to its colored bottom border only, hiding the label — for the mobile view */
     collapsed?: boolean;
+    /** Storybook-only visual state overrides for snapshotting pseudo-interactions. */
+    __storyState?: {
+        hovered?: boolean;
+        focusVisible?: boolean;
+    };
 };
 declare function StepperTab(props: StepperTabProps): JSX.Element;
 
@@ -10058,6 +10063,8 @@ type FormSectionLayoutProps = {
     description?: ReactNode;
     /** Rendered top-right of the title row, e.g. a "Save draft" button. */
     actions?: ButtonProps[];
+    /** Rendered before form sections. Useful in forms that only need the main form title, or for form fields that shape the context of a form beforehand.  */
+    initialFields?: ReactNode;
     sections: FormSectionProps[];
 };
 /** Centered (720px) width/column shell for a form built out of `FormSection`s — e.g. as a `WorkflowLayoutStep`'s `content`. */

package/dist/index.js

@@ -11762,7 +11762,6 @@ function TreeOption(props) {
   const {
     item,
     state,
-    allowCollapsing = true,
     disabledReason
   } = props;
   const leveledOption = item.value;
@@ -11791,7 +11790,7 @@ function TreeOption(props) {
     shouldFocusOnHover: false
   }, state, ref);
   const isGroup = groupKeys.includes(item.key);
-  const canCollapse = allowCollapsing && !!option.children?.length;
+  const canCollapse = !!option.children?.length;
   function toggleCollapsed() {
     if (!canCollapse) return;
     setCollapsedKeys((prevKeys) => collapsedKeys.includes(item.key) ? prevKeys.filter((k) => k !== item.key) : [...prevKeys, item.key]);
@@ -11849,7 +11848,7 @@ function TreeOption(props) {
       ...isFocused && !isGroup ? listItemStyles.focus : {},
       ...isDisabled && !isGroup ? listItemStyles.disabled : {}
     }), children: [
-      allowCollapsing && /* @__PURE__ */ jsx52("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ jsx52("button", { onClick: (e) => {
+      /* @__PURE__ */ jsx52("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ jsx52("button", { onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         toggleCollapsed();
@@ -11908,16 +11907,7 @@ function isLeveledNode(node) {
 // src/inputs/internal/VirtualizedOptions.tsx
 import { jsx as jsx53 } from "react/jsx-runtime";
 function VirtualizedOptions(props) {
-  const {
-    state,
-    items,
-    onListHeightChange,
-    scrollOnFocus,
-    loading,
-    disabledOptionsWithReasons,
-    isTree,
-    allowCollapsing
-  } = props;
+  const { state, items, onListHeightChange, scrollOnFocus, loading, disabledOptionsWithReasons, isTree } = props;
   const virtuosoRef = useRef21(null);
   const focusedKey = state.selectionManager.focusedKey;
   const focusedItem = focusedKey != null ? state.collection.getItem(focusedKey) : null;
@@ -11958,7 +11948,6 @@ function VirtualizedOptions(props) {
               {
                 item,
                 state,
-                allowCollapsing,
                 disabledReason: disabledOptionsWithReasons[item.key]
               },
               item.key
@@ -12057,8 +12046,7 @@ function ListBox(props) {
     horizontalLayout = false,
     loading,
     disabledOptionsWithReasons = {},
-    isTree,
-    allowCollapsing
+    isTree
   } = props;
   const {
     listBoxProps
@@ -12136,8 +12124,7 @@ function ListBox(props) {
         scrollOnFocus: props.shouldUseVirtualFocus,
         loading,
         disabledOptionsWithReasons,
-        isTree,
-        allowCollapsing
+        isTree
       }
     ) })
   ] });
@@ -12230,7 +12217,8 @@ function TreeSelectFieldBase(props) {
     sensitivity: "base"
   });
   const {
-    collapsedKeys
+    collapsedKeys,
+    setCollapsedKeys
   } = useTreeSelectFieldProvider();
   const groupKeys = useMemo16(() => _groupOptions?.map((option) => valueToKey(option)) ?? [], [_groupOptions]);
   const groupKeySet = useMemo16(() => new Set(groupKeys), [groupKeys]);
@@ -12272,8 +12260,7 @@ function TreeSelectFieldBase(props) {
       selectedChipOptions: selectedChipState.options,
       allOptions: initialOptions,
       selectedOptionsLabels: selectedChipState.labels,
-      optionsLoading: false,
-      allowCollapsing: true
+      optionsLoading: false
     };
   }, [initialOptions, values, chipDisplay, getOptionLabel, isReadOnly, nothingSelectedText, getOptionValue, groupKeySet]);
   const [fieldState, setFieldState] = useState18(() => initTreeFieldState());
@@ -12295,14 +12282,26 @@ function TreeSelectFieldBase(props) {
       setFieldState(initTreeFieldState());
     }
   }, [getOptionValue, initTreeFieldState, values]);
+  const preSearchCollapsedKeys = useRef23(void 0);
+  useEffect13(() => {
+    if (fieldState.searchValue) {
+      if (preSearchCollapsedKeys.current === void 0) {
+        preSearchCollapsedKeys.current = collapsedKeys;
+        if (collapsedKeys.length > 0) setCollapsedKeys([]);
+      }
+    } else if (preSearchCollapsedKeys.current !== void 0) {
+      const keys = preSearchCollapsedKeys.current;
+      preSearchCollapsedKeys.current = void 0;
+      setCollapsedKeys(keys);
+    }
+  }, [fieldState.searchValue, collapsedKeys, setCollapsedKeys]);
   const filteredOptions = useMemo16(() => getFilteredOptions(fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue), [fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue]);
   const onInputChange = useCallback9((inputValue) => {
     setFieldState((prevState) => {
       return {
         ...prevState,
         inputValue,
-        searchValue: inputValue.length === 0 ? void 0 : inputValue,
-        allowCollapsing: inputValue.length === 0
+        searchValue: inputValue.length === 0 ? void 0 : inputValue
       };
     });
   }, []);
@@ -12330,8 +12329,7 @@ function TreeSelectFieldBase(props) {
       setFieldState((prevState) => ({
         ...prevState,
         inputValue: "",
-        searchValue: void 0,
-        allowCollapsing: true
+        searchValue: void 0
       }));
     }
   }
@@ -12366,9 +12364,8 @@ function TreeSelectFieldBase(props) {
         if (newKeys.size === 0) {
           setFieldState((prevState) => ({
             ...prevState,
-            inputValue: nothingSelectedText,
-            searchValue: void 0,
-            allowCollapsing: true,
+            // Unselecting the last option shouldn't drop the search either
+            inputValue: prevState.searchValue ?? nothingSelectedText,
             selectedKeys: [],
             selectedOptions: [],
             selectedChipOptions: [],
@@ -12442,9 +12439,9 @@ function TreeSelectFieldBase(props) {
         const selectedChipState = getSelectedChipState(fieldState.allOptions, selectedOptions, selectedKeys, chipDisplay, getOptionLabel, getOptionValue);
         setFieldState((prevState) => ({
           ...prevState,
-          // Since we reset the list of options upon selection changes, then set the `inputValue` to empty string to reflect that.
-          inputValue: "",
-          searchValue: void 0,
+          // Keep any search in place, so picking several options out of the same filtered list doesn't
+          // make the user retype it; when they're not searching the input stays empty as before.
+          inputValue: prevState.searchValue ?? "",
           selectedKeys: [...selectedKeys],
           selectedOptions,
           selectedChipOptions: selectedChipState.options,
@@ -12476,8 +12473,7 @@ function TreeSelectFieldBase(props) {
       setFieldState((prevState) => ({
         ...prevState,
         inputValue: selectedOptions.length === 1 ? getOptionLabel(selectedOptions[0]) : selectedOptions.length === 0 ? nothingSelectedText : "",
-        searchValue: void 0,
-        allowCollapsing: true
+        searchValue: void 0
       }));
     }
   }
@@ -12547,17 +12543,16 @@ function TreeSelectFieldBase(props) {
         onClose: () => state.toggle(),
         isOpen: state.isOpen,
         minWidth: 320,
-        children: /* @__PURE__ */ jsx57(ListBox, { ...listBoxProps, positionProps, state, listBoxRef, selectedOptions: fieldState.selectedChipOptions, getOptionLabel, getOptionValue: (o) => valueToKey(getOptionValue(o)), horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, disabledOptionsWithReasons, isTree: true })
+        children: /* @__PURE__ */ jsx57(ListBox, { ...listBoxProps, positionProps, state, listBoxRef, selectedOptions: fieldState.selectedChipOptions, getOptionLabel, getOptionValue: (o) => valueToKey(getOptionValue(o)), horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons, isTree: true })
       }
     )
   ] });
 }
-function levelOptions(o, level, filtering, collapsedKeys, getOptionValue) {
-  const actualLevel = filtering ? 0 : level;
+function levelOptions(o, level, collapsedKeys, getOptionValue) {
   return [
-    [o, actualLevel],
-    // Flat map the children if the parent is not collapsed or if we are filtering (for the search results)
-    ...o.children?.length && (!collapsedKeys.includes(valueToKey(getOptionValue(o))) || filtering) ? o.children.flatMap((oc) => levelOptions(oc, actualLevel + 1, filtering, collapsedKeys, getOptionValue)) : []
+    [o, level],
+    // Flat map the children if the parent is not collapsed
+    ...o.children?.length && !collapsedKeys.includes(valueToKey(getOptionValue(o))) ? o.children.flatMap((oc) => levelOptions(oc, level + 1, collapsedKeys, getOptionValue)) : []
   ];
 }
 function getTopLevelSelections(o, selectedKeys, getOptionValue) {
@@ -12566,7 +12561,16 @@ function getTopLevelSelections(o, selectedKeys, getOptionValue) {
   return [];
 }
 function getFilteredOptions(allOptions, searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue) {
-  return allOptions.flatMap((option) => levelOptions(option, 0, !!searchValue, collapsedKeys, getOptionValue).filter(([nestedOption]) => searchValue ? contains(getOptionLabel(nestedOption), searchValue) : true));
+  if (!searchValue) return allOptions.flatMap((option) => levelOptions(option, 0, collapsedKeys, getOptionValue));
+  const search = searchValue;
+  return allOptions.flatMap((option) => matchedOptions(option, 0, false));
+  function matchedOptions(o, level, hasMatchedParent) {
+    const isDirectlyMatched = contains(getOptionLabel(o), search);
+    const children = o.children?.flatMap((oc) => matchedOptions(oc, level + 1, hasMatchedParent || isDirectlyMatched));
+    if (!isDirectlyMatched && !hasMatchedParent && !children?.length) return [];
+    const isCollapsed = collapsedKeys.includes(valueToKey(getOptionValue(o)));
+    return isCollapsed ? [[o, level]] : [[o, level], ...children ?? []];
+  }
 }
 function isOptionFullySelected(option, selectedKeys, disabledKeys, groupKeys, getOptionValue) {
   const key = valueToKey(getOptionValue(option));
@@ -24387,7 +24391,8 @@ function StepperTab(props) {
     completed,
     onClick,
     disabled = false,
-    collapsed = false
+    collapsed = false,
+    __storyState
   } = props;
   const ariaProps = {
     onPress: () => onClick(value),
@@ -24398,13 +24403,15 @@ function StepperTab(props) {
     buttonProps
   } = useButton13(ariaProps, ref);
   const {
-    isFocusVisible,
+    isFocusVisible: isFocusVisibleFromEvents,
     focusProps
   } = useFocusRing18();
   const {
     hoverProps,
-    isHovered
+    isHovered: isHoveredFromEvents
   } = useHover22(ariaProps);
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
   return /* @__PURE__ */ jsxs99("button", { ref, ...mergeProps30(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps104({
     ...stepperTabStyles.baseStyles,
@@ -24458,7 +24465,7 @@ function getCollapsedStyles(active, completed) {
       paddingTop: "pt0",
       paddingBottom: "pb0"
     },
-    ...completed && !active ? {
+    ...active || completed ? {
       borderColor: "bcBlue600"
     } : {
       borderColor: "bcGray300"
@@ -25312,6 +25319,7 @@ function FormSectionLayout(props) {
     title,
     description,
     actions,
+    initialFields,
     sections
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
@@ -25330,6 +25338,7 @@ function FormSectionLayout(props) {
       ] }),
       actions && /* @__PURE__ */ jsx207("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => /* @__PURE__ */ jsx207(Button, { ...action }, `${action.label}`)) })
     ] }),
+    initialFields,
     /* @__PURE__ */ jsx207("div", { className: "df fdc gap6", children: sections.map((section, i) => /* @__PURE__ */ jsx207(FormSection, { ...section }, defaultTestId(section.title) || i)) })
   ] });
 }