@homebound/beam 3.62.0 → 3.63.1

package/dist/index.d.cts

@@ -10063,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

@@ -10063,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

@@ -10784,6 +10784,10 @@ function MenuItemImpl(props) {
     isHovered
   } = useHover7({});
   const tid = useTestIds(props);
+  const openInNewTabRef = useRef15(false);
+  function captureModifiers(e) {
+    openInNewTabRef.current = wantsNewTab(e);
+  }
   const {
     menuItemProps
   } = useMenuItem({
@@ -10797,7 +10801,7 @@ function MenuItemImpl(props) {
         onClick
       } = menuItem;
       if (typeof onClick === "string") {
-        if (isAbsoluteUrl(onClick)) {
+        if (isAbsoluteUrl(onClick) || openInNewTabRef.current) {
           window.open(onClick, "_blank").opener = null;
           return;
         }
@@ -10819,55 +10823,68 @@ function MenuItemImpl(props) {
   const isDisabled = Boolean(disabled);
   const isSelected = state.selectionManager.selectedKeys.has(label);
   const isFocused = state.selectionManager.focusedKey === item.key;
-  return /* @__PURE__ */ jsx43("li", { ...menuItemProps, ...hoverProps, ref, ...trussProps27({
-    ...{
-      display: "df",
-      alignItems: "aic",
-      paddingTop: "pt1",
-      paddingBottom: "pb1",
-      paddingLeft: "pl2",
-      paddingRight: "pr2",
-      cursor: "cursorPointer",
-      outline: "outline0",
-      minHeight: "mh_42px",
-      fontWeight: "fw4",
-      fontSize: "fz_14px",
-      lineHeight: "lh_20px"
-    },
-    ...menuItem.hasDivider ? {
-      borderBottomStyle: "bbs_solid",
-      borderBottomWidth: "bbw_1px",
-      borderColor: "bcGray700"
-    } : {},
-    ...!isDisabled && isHovered ? {
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-menu-item-bg-hover)"
-      }]
-    } : {},
-    ...isFocused ? {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": maybeCssVar18(`inset 0 0 0 1px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
-      }]
-    } : {},
-    ...isDisabled ? {
-      color: ["color_var", {
-        "--color": "var(--b-text-disabled)"
-      }],
-      cursor: "cursorNotAllowed"
-    } : {},
-    ...destructive ? {
-      color: ["color_var", {
-        "--color": "var(--b-danger)"
-      }]
-    } : {},
-    ...isSelected ? {
-      fontWeight: "fw5"
-    } : {}
-  }), ...tid[defaultTestId(menuItem.label)], children: maybeTooltip({
-    title: resolveTooltip(disabled),
-    placement: "right",
-    children: renderMenuItem(menuItem, isSelected, isDisabled)
-  }) });
+  return /* @__PURE__ */ jsx43(
+    "li",
+    {
+      ...menuItemProps,
+      ...hoverProps,
+      onPointerDownCapture: captureModifiers,
+      onKeyDownCapture: captureModifiers,
+      onClickCapture: captureModifiers,
+      ref,
+      ...trussProps27({
+        ...{
+          display: "df",
+          alignItems: "aic",
+          paddingTop: "pt1",
+          paddingBottom: "pb1",
+          paddingLeft: "pl2",
+          paddingRight: "pr2",
+          cursor: "cursorPointer",
+          outline: "outline0",
+          minHeight: "mh_42px",
+          fontWeight: "fw4",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px"
+        },
+        ...menuItem.hasDivider ? {
+          borderBottomStyle: "bbs_solid",
+          borderBottomWidth: "bbw_1px",
+          borderColor: "bcGray700"
+        } : {},
+        ...!isDisabled && isHovered ? {
+          backgroundColor: ["bgColor_var", {
+            "--backgroundColor": "var(--b-menu-item-bg-hover)"
+          }]
+        } : {},
+        ...isFocused ? {
+          boxShadow: ["boxShadow_var", {
+            "--boxShadow": maybeCssVar18(`inset 0 0 0 1px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
+          }]
+        } : {},
+        ...isDisabled ? {
+          color: ["color_var", {
+            "--color": "var(--b-text-disabled)"
+          }],
+          cursor: "cursorNotAllowed"
+        } : {},
+        ...destructive ? {
+          color: ["color_var", {
+            "--color": "var(--b-danger)"
+          }]
+        } : {},
+        ...isSelected ? {
+          fontWeight: "fw5"
+        } : {}
+      }),
+      ...tid[defaultTestId(menuItem.label)],
+      children: maybeTooltip({
+        title: resolveTooltip(disabled),
+        placement: "right",
+        children: renderMenuItem(menuItem, isSelected, isDisabled)
+      })
+    }
+  );
 }
 function renderMenuItem(menuItem, isSelected, isDisabled) {
   return /* @__PURE__ */ jsxs27("div", { className: "df w100 aic jcsb gap2", children: [
@@ -10911,6 +10928,9 @@ function maybeWrapInLink(onClick, content, disabled) {
     /* @__PURE__ */ jsx43("span", { className: "fs0 ml2", children: /* @__PURE__ */ jsx43(Icon, { icon: "linkExternal" }) })
   ] }) : /* @__PURE__ */ jsx43(Link3, { className: "navLink", to: onClick, children: content });
 }
+function wantsNewTab(e) {
+  return e.metaKey || e.ctrlKey || e.shiftKey;
+}
 function isIconMenuItem(item) {
   return item && typeof item === "object" && "icon" in item;
 }
@@ -11762,7 +11782,6 @@ function TreeOption(props) {
   const {
     item,
     state,
-    allowCollapsing = true,
     disabledReason
   } = props;
   const leveledOption = item.value;
@@ -11791,7 +11810,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 +11868,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 +11927,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 +11968,6 @@ function VirtualizedOptions(props) {
               {
                 item,
                 state,
-                allowCollapsing,
                 disabledReason: disabledOptionsWithReasons[item.key]
               },
               item.key
@@ -12057,8 +12066,7 @@ function ListBox(props) {
     horizontalLayout = false,
     loading,
     disabledOptionsWithReasons = {},
-    isTree,
-    allowCollapsing
+    isTree
   } = props;
   const {
     listBoxProps
@@ -12136,8 +12144,7 @@ function ListBox(props) {
         scrollOnFocus: props.shouldUseVirtualFocus,
         loading,
         disabledOptionsWithReasons,
-        isTree,
-        allowCollapsing
+        isTree
       }
     ) })
   ] });
@@ -12230,7 +12237,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 +12280,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 +12302,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 +12349,7 @@ function TreeSelectFieldBase(props) {
       setFieldState((prevState) => ({
         ...prevState,
         inputValue: "",
-        searchValue: void 0,
-        allowCollapsing: true
+        searchValue: void 0
       }));
     }
   }
@@ -12366,9 +12384,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 +12459,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 +12493,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 +12563,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 +12581,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));
@@ -25315,6 +25339,7 @@ function FormSectionLayout(props) {
     title,
     description,
     actions,
+    initialFields,
     sections
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
@@ -25333,6 +25358,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)) })
   ] });
 }