@homebound/beam 3.62.0 → 3.63.1

package/dist/index.cjs

@@ -11258,6 +11258,10 @@ function MenuItemImpl(props) {
     isHovered
   } = (0, import_react_aria17.useHover)({});
   const tid = useTestIds(props);
+  const openInNewTabRef = (0, import_react41.useRef)(false);
+  function captureModifiers(e) {
+    openInNewTabRef.current = wantsNewTab(e);
+  }
   const {
     menuItemProps
   } = (0, import_react_aria17.useMenuItem)({
@@ -11271,7 +11275,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;
         }
@@ -11293,55 +11297,68 @@ function MenuItemImpl(props) {
   const isDisabled = Boolean(disabled);
   const isSelected = state.selectionManager.selectedKeys.has(label);
   const isFocused = state.selectionManager.focusedKey === item.key;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { ...menuItemProps, ...hoverProps, ref, ...(0, import_runtime30.trussProps)({
-    ...{
-      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": (0, import_runtime30.maybeCssVar)(`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__ */ (0, import_jsx_runtime43.jsx)(
+    "li",
+    {
+      ...menuItemProps,
+      ...hoverProps,
+      onPointerDownCapture: captureModifiers,
+      onKeyDownCapture: captureModifiers,
+      onClickCapture: captureModifiers,
+      ref,
+      ...(0, import_runtime30.trussProps)({
+        ...{
+          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": (0, import_runtime30.maybeCssVar)(`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__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "df w100 aic jcsb gap2", children: [
@@ -11385,6 +11402,9 @@ function maybeWrapInLink(onClick, content, disabled) {
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fs0 ml2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { icon: "linkExternal" }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_router_dom3.Link, { 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;
 }
@@ -12236,7 +12256,6 @@ function TreeOption(props) {
   const {
     item,
     state,
-    allowCollapsing = true,
     disabledReason
   } = props;
   const leveledOption = item.value;
@@ -12265,7 +12284,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 +12342,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 +12401,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 +12442,6 @@ function VirtualizedOptions(props) {
               {
                 item,
                 state,
-                allowCollapsing,
                 disabledReason: disabledOptionsWithReasons[item.key]
               },
               item.key
@@ -12531,8 +12540,7 @@ function ListBox(props) {
     horizontalLayout = false,
     loading,
     disabledOptionsWithReasons = {},
-    isTree,
-    allowCollapsing
+    isTree
   } = props;
   const {
     listBoxProps
@@ -12610,8 +12618,7 @@ function ListBox(props) {
         scrollOnFocus: props.shouldUseVirtualFocus,
         loading,
         disabledOptionsWithReasons,
-        isTree,
-        allowCollapsing
+        isTree
       }
     ) })
   ] });
@@ -12704,7 +12711,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 +12754,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 +12776,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 +12823,7 @@ function TreeSelectFieldBase(props) {
       setFieldState((prevState) => ({
         ...prevState,
         inputValue: "",
-        searchValue: void 0,
-        allowCollapsing: true
+        searchValue: void 0
       }));
     }
   }
@@ -12840,9 +12858,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 +12933,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 +12967,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 +13037,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 +13055,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));
@@ -25781,6 +25805,7 @@ function FormSectionLayout(props) {
     title,
     description,
     actions,
+    initialFields,
     sections
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
@@ -25799,6 +25824,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)) })
   ] });
 }