@homebound/beam 3.61.0 → 3.63.0

package/dist/index.cjs

@@ -12236,7 +12236,6 @@ function TreeOption(props) {
   const {
     item,
     state,
-    allowCollapsing = true,
     disabledReason
   } = props;
   const leveledOption = item.value;
@@ -12265,7 +12264,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]);
@@ -12323,7 +12322,7 @@ function TreeOption(props) {
       ...isFocused && !isGroup ? listItemStyles.focus : {},
       ...isDisabled && !isGroup ? listItemStyles.disabled : {}
     }), children: [
-      allowCollapsing && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { onClick: (e) => {
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         toggleCollapsed();
@@ -12382,16 +12381,7 @@ function isLeveledNode(node) {
 // src/inputs/internal/VirtualizedOptions.tsx
 var import_jsx_runtime53 = require("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 = (0, import_react49.useRef)(null);
   const focusedKey = state.selectionManager.focusedKey;
   const focusedItem = focusedKey != null ? state.collection.getItem(focusedKey) : null;
@@ -12432,7 +12422,6 @@ function VirtualizedOptions(props) {
               {
                 item,
                 state,
-                allowCollapsing,
                 disabledReason: disabledOptionsWithReasons[item.key]
               },
               item.key
@@ -12531,8 +12520,7 @@ function ListBox(props) {
     horizontalLayout = false,
     loading,
     disabledOptionsWithReasons = {},
-    isTree,
-    allowCollapsing
+    isTree
   } = props;
   const {
     listBoxProps
@@ -12610,8 +12598,7 @@ function ListBox(props) {
         scrollOnFocus: props.shouldUseVirtualFocus,
         loading,
         disabledOptionsWithReasons,
-        isTree,
-        allowCollapsing
+        isTree
       }
     ) })
   ] });
@@ -12704,7 +12691,8 @@ function TreeSelectFieldBase(props) {
     sensitivity: "base"
   });
   const {
-    collapsedKeys
+    collapsedKeys,
+    setCollapsedKeys
   } = useTreeSelectFieldProvider();
   const groupKeys = (0, import_react51.useMemo)(() => _groupOptions?.map((option) => valueToKey(option)) ?? [], [_groupOptions]);
   const groupKeySet = (0, import_react51.useMemo)(() => new Set(groupKeys), [groupKeys]);
@@ -12746,8 +12734,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] = (0, import_react51.useState)(() => initTreeFieldState());
@@ -12769,14 +12756,26 @@ function TreeSelectFieldBase(props) {
       setFieldState(initTreeFieldState());
     }
   }, [getOptionValue, initTreeFieldState, values]);
+  const preSearchCollapsedKeys = (0, import_react51.useRef)(void 0);
+  (0, import_react51.useEffect)(() => {
+    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 = (0, import_react51.useMemo)(() => getFilteredOptions(fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue), [fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue]);
   const onInputChange = (0, import_react51.useCallback)((inputValue) => {
     setFieldState((prevState) => {
       return {
         ...prevState,
         inputValue,
-        searchValue: inputValue.length === 0 ? void 0 : inputValue,
-        allowCollapsing: inputValue.length === 0
+        searchValue: inputValue.length === 0 ? void 0 : inputValue
       };
     });
   }, []);
@@ -12804,8 +12803,7 @@ function TreeSelectFieldBase(props) {
       setFieldState((prevState) => ({
         ...prevState,
         inputValue: "",
-        searchValue: void 0,
-        allowCollapsing: true
+        searchValue: void 0
       }));
     }
   }
@@ -12840,9 +12838,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: [],
@@ -12916,9 +12913,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,
@@ -12950,8 +12947,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
       }));
     }
   }
@@ -13021,17 +13017,16 @@ function TreeSelectFieldBase(props) {
         onClose: () => state.toggle(),
         isOpen: state.isOpen,
         minWidth: 320,
-        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(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__ */ (0, import_jsx_runtime57.jsx)(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) {
@@ -13040,7 +13035,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));
@@ -24853,7 +24857,8 @@ function StepperTab(props) {
     completed,
     onClick,
     disabled = false,
-    collapsed = false
+    collapsed = false,
+    __storyState
   } = props;
   const ariaProps = {
     onPress: () => onClick(value),
@@ -24864,13 +24869,15 @@ function StepperTab(props) {
     buttonProps
   } = (0, import_react_aria63.useButton)(ariaProps, ref);
   const {
-    isFocusVisible,
+    isFocusVisible: isFocusVisibleFromEvents,
     focusProps
   } = (0, import_react_aria63.useFocusRing)();
   const {
     hoverProps,
-    isHovered
+    isHovered: isHoveredFromEvents
   } = (0, import_react_aria63.useHover)(ariaProps);
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
   return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("button", { ref, ...(0, import_react_aria63.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime114.trussProps)({
     ...stepperTabStyles.baseStyles,
@@ -24924,7 +24931,7 @@ function getCollapsedStyles(active, completed) {
       paddingTop: "pt0",
       paddingBottom: "pb0"
     },
-    ...completed && !active ? {
+    ...active || completed ? {
       borderColor: "bcBlue600"
     } : {
       borderColor: "bcGray300"
@@ -25778,6 +25785,7 @@ function FormSectionLayout(props) {
     title,
     description,
     actions,
+    initialFields,
     sections
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
@@ -25796,6 +25804,7 @@ function FormSectionLayout(props) {
       ] }),
       actions && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Button, { ...action }, `${action.label}`)) })
     ] }),
+    initialFields,
     /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { className: "df fdc gap6", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
   ] });
 }