@homebound/beam 4.43.0 → 4.44.0

package/dist/index.cjs

@@ -152,6 +152,7 @@ __export(index_exports, {
   Loader: () => Loader,
   LoadingSkeleton: () => LoadingSkeleton,
   MaxLines: () => MaxLines,
+  MenuMultiSelectField: () => MenuMultiSelectField,
   MenuSelectField: () => MenuSelectField,
   ModalBanner: () => ModalBanner,
   ModalBody: () => ModalBody,
@@ -33217,25 +33218,28 @@ function MenuSelectTrigger(props) {
       label,
       ":"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { id: trigger.valueId, className: "df aic fg1 mw0 oh", children: trigger.isReadOnly && showProposal ? /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { className: "fg1 wsnw oh to_ellipsis", children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(ProposedValue, { original: originalText, proposed: proposedText, ...tid.proposedValue }) }) : /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { ...(0, import_runtime176.trussProps)({
-      ...{
-        flexGrow: "fg1",
-        whiteSpace: "wsnw",
-        overflow: "oh",
-        textOverflow: "to_ellipsis",
-        color: ["color_var", {
-          "--color": (0, import_runtime176.maybeCssVar)(trigger.isPlaceholder ? inputPlaceholderColor : void 0)
-        }]
-      },
-      // A placeholder reads as hint text, so it stays at the field's regular weight.
-      ...!trigger.isPlaceholder ? selectedValueCss(labelStyle, trigger.isReadOnly) : {},
-      ...showProposal ? {
-        fontWeight: "fw6",
-        color: ["color_var", {
-          "--color": "var(--b-ai-field-fg)"
-        }]
-      } : {}
-    }), children: trigger.displayText }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { id: trigger.valueId, className: "df aic fg1 mw0 oh", children: trigger.isReadOnly && showProposal ? /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { className: "fg1 wsnw oh to_ellipsis", children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(ProposedValue, { original: originalText, proposed: proposedText, ...tid.proposedValue }) }) : /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(import_jsx_runtime269.Fragment, { children: [
+      trigger.selectedLabels.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(SelectedLabels, { labels: trigger.selectedLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { className: "df aic fs0 mr1", children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(CountBadge, { count: trigger.selectedLabels.length, ...tid.count }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { ...(0, import_runtime176.trussProps)({
+        ...{
+          flexGrow: "fg1",
+          whiteSpace: "wsnw",
+          overflow: "oh",
+          textOverflow: "to_ellipsis",
+          color: ["color_var", {
+            "--color": (0, import_runtime176.maybeCssVar)(trigger.isPlaceholder ? inputPlaceholderColor : void 0)
+          }]
+        },
+        // A placeholder reads as hint text, so it stays at the field's regular weight.
+        ...!trigger.isPlaceholder ? selectedValueCss(labelStyle, trigger.isReadOnly) : {},
+        ...showProposal ? {
+          fontWeight: "fw6",
+          color: ["color_var", {
+            "--color": "var(--b-ai-field-fg)"
+          }]
+        } : {}
+      }), children: trigger.displayText })
+    ] }) }),
     errorInTooltip && errorMsg && showErrorAndHelper && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { className: "df aic fs0 pl1", children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Icon, { icon: "error", color: "--b-danger" /* Danger */, tooltip: errorMsg }) }),
     !trigger.isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { ...(0, import_runtime176.trussProps)({
       display: "df",
@@ -33287,6 +33291,14 @@ function MenuSelectTrigger(props) {
   ] });
 }
 var inputPlaceholderColor = "#9ca3af";
+function SelectedLabels({
+  labels
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("ul", { className: "mt0 mb0 mr0 ml0 pl2", children: labels.map(({
+    key,
+    label
+  }) => /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("li", { children: label }, key)) });
+}
 
 // src/inputs/MenuSelectField/internal/OptionList.tsx
 var import_interactions2 = require("@react-aria/interactions");
@@ -33299,12 +33311,19 @@ var import_react185 = require("react");
 var import_react_aria76 = require("react-aria");
 var import_runtime177 = require("@homebound/truss/runtime");
 var import_jsx_runtime270 = require("react/jsx-runtime");
-function OptionRow(props) {
+function SingleOptionRow(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(BaseOptionRow, { ...props, variant: "check" });
+}
+function MultiOptionRow(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(BaseOptionRow, { ...props, variant: "checkbox" });
+}
+function BaseOptionRow(props) {
   const {
     item,
     state,
     id,
-    disabledReason
+    disabledReason,
+    variant
   } = props;
   const ref = (0, import_react185.useRef)(null);
   const tid = useTestIds(props, "option");
@@ -33350,8 +33369,9 @@ function OptionRow(props) {
         }),
         ...tid.option,
         children: [
+          variant === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(StyledCheckbox, { isSelected, isDisabled }),
           /* @__PURE__ */ (0, import_jsx_runtime270.jsx)("span", { className: "wsnw oh to_ellipsis fg1 mw0", children: item.rendered }),
-          isSelected && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)("span", { className: "df aic fs0", children: /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Icon, { icon: "check", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-selection-indicator" /* SelectionIndicator */ }) })
+          variant === "check" && isSelected && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)("span", { className: "df aic fs0", children: /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Icon, { icon: "check", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-selection-indicator" /* SelectionIndicator */ }) })
         ]
       }
     )
@@ -33393,7 +33413,8 @@ function OptionList(props) {
     listId: id,
     disabledReasons,
     initialIndex,
-    loading
+    loading,
+    rowVariant
   } = menu;
   const tid = useTestIds(props, "optionList");
   const virtuosoRef = (0, import_react186.useRef)(null);
@@ -33432,6 +33453,7 @@ function OptionList(props) {
     const maxTop = Math.max(0, initialCount * menuRowHeight - scroller.clientHeight);
     setScrollTop(scroller, Math.min(initialTop * menuRowHeight, maxTop));
   }, [listRef, syncScroll, initialTop, initialCount]);
+  const Row2 = rowVariant === "checkbox" ? MultiOptionRow : SingleOptionRow;
   const isTest = process.env.NODE_ENV === "test";
   return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)("div", { ...listBoxProps, ...onKeyDown ? {
     onKeyDown,
@@ -33452,7 +33474,7 @@ function OptionList(props) {
     }, itemContent: (index) => {
       const item = items[index];
       if (!item) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(OptionRow, { item, state, id: optionDomId(id, index), disabledReason: disabledReasons[String(item.key)], ...tid });
+      return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Row2, { item, state, id: optionDomId(id, index), disabledReason: disabledReasons[String(item.key)], ...tid });
     } }, isTest ? items.length : "virtuoso"),
     loading && /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(LoadingDots, {})
   ] }) });
@@ -33500,10 +33522,12 @@ function useMenuSelectField(props) {
     readOnly,
     onFocus,
     onBlur,
-    value: propValue,
-    proposedValue,
-    onSelect
+    selectionMode,
+    values: propValues,
+    proposedValues,
+    onCommit
   } = props;
+  const multiple = selectionMode === "multiple";
   const isDisabled = !!disabled;
   const isReadOnly = !!readOnly;
   const fieldId = (0, import_react187.useId)();
@@ -33535,11 +33559,17 @@ function useMenuSelectField(props) {
     // oxlint-disable-next-line react-hooks/exhaustive-deps
     [options]
   );
-  const { effectiveValue: value, proposalProps } = useAiProposal(propValue, proposedValue, (v) => {
-    const option = optionsByKey.get(valueToKey(v));
-    return option === void 0 ? void 0 : getOptionLabel(option);
-  });
-  const selectedKeys = (0, import_react187.useMemo)(() => new Set(value === void 0 ? [] : [valueToKey(value)]), [value]);
+  const { effectiveValue, proposalProps } = useAiProposal(
+    propValues,
+    proposedValues,
+    (vs) => labelsFor(vs, options, getOptionValue, getOptionLabel).join(", ")
+  );
+  const values = (0, import_react187.useMemo)(() => effectiveValue ?? [], [effectiveValue]);
+  const selectedKeys = (0, import_react187.useMemo)(() => new Set(values.map(valueToKey)), [values]);
+  const selectedOptions = (0, import_react187.useMemo)(
+    () => values.map((v) => optionsByKey.get(valueToKey(v))).filter((o) => o !== void 0),
+    [values, optionsByKey]
+  );
   const filteredOptions = (0, import_react187.useMemo)(
     () => search ? options.filter((o) => matchesSearch(o, search, getOptionLabel, getOptionSearchText, contains)) : options,
     // getOptionLabel and getOptionSearchText are typically inline lambdas
@@ -33552,20 +33582,33 @@ function useMenuSelectField(props) {
   }, [disabledOptions]);
   function onSelectionChange(keys) {
     if (keys === "all") return;
-    const [key] = [...keys];
-    if (key === void 0) {
+    if (!multiple) {
+      const [key] = [...keys];
+      if (key === void 0) {
+        close({ restoreFocus: true });
+        return;
+      }
+      const opt = optionsByKey.get(String(key));
+      proposalProps.onUserEdit?.();
+      onCommit(opt === void 0 ? [] : [getOptionValue(opt)], opt === void 0 ? [] : [opt]);
       close({ restoreFocus: true });
       return;
     }
-    const opt = optionsByKey.get(String(key));
+    const next = values.filter((v) => keys.has(valueToKey(v)));
+    for (const k of keys) {
+      const opt = optionsByKey.get(String(k));
+      if (opt !== void 0 && !selectedKeys.has(String(k))) next.push(getOptionValue(opt));
+    }
     proposalProps.onUserEdit?.();
-    onSelect(opt === void 0 ? void 0 : getOptionValue(opt), opt);
-    close({ restoreFocus: true });
+    onCommit(
+      next,
+      next.map((v) => optionsByKey.get(valueToKey(v))).filter((o) => o !== void 0)
+    );
   }
   const state = (0, import_react_stately20.useListState)({
     items: filteredOptions,
     children: (o) => /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(import_react_stately20.Item, { textValue: getOptionLabel(o), children: getOptionMenuLabel ? getOptionMenuLabel(o) : getOptionLabel(o) }, valueToKey(getOptionValue(o))),
-    selectionMode: "single",
+    selectionMode: multiple ? "multiple" : "single",
     selectedKeys,
     disabledKeys,
     onSelectionChange
@@ -33610,8 +33653,8 @@ function useMenuSelectField(props) {
     selectionManager.setFocusedKey(null);
     selectionManager.setFocused(false);
   }, [isOpen2, showSearch]);
-  function onSearchChange(value2) {
-    setSearch(value2);
+  function onSearchChange(value) {
+    setSearch(value);
     selectionManager.setFocusedKey(null);
     selectionManager.setFocused(false);
   }
@@ -33692,10 +33735,10 @@ function useMenuSelectField(props) {
     0,
     filteredOptions.findIndex((o) => selectedKeys.has(valueToKey(getOptionValue(o))))
   );
-  const selectedOption = value === void 0 ? void 0 : optionsByKey.get(valueToKey(value));
-  const selectedText = selectedOption === void 0 ? "" : getOptionLabel(selectedOption);
-  const displayText = selectedText || nothingSelectedText || placeholder || "";
-  const isPlaceholder = !selectedText && !nothingSelectedText && !!placeholder;
+  const selectedText = !multiple && selectedOptions[0] !== void 0 ? getOptionLabel(selectedOptions[0]) : "";
+  const displayText = selectedText || (values.length > 0 ? "" : nothingSelectedText || placeholder || "");
+  const isPlaceholder = !selectedText && values.length === 0 && !nothingSelectedText && !!placeholder;
+  const selectedLabels = multiple ? selectedOptions.map((o) => ({ key: valueToKey(getOptionValue(o)), label: getOptionLabel(o) })) : [];
   const triggerProps = {
     isDisabled,
     isReadOnly,
@@ -33716,6 +33759,7 @@ function useMenuSelectField(props) {
     onBlur: onTriggerBlur,
     displayText,
     isPlaceholder,
+    selectedLabels,
     proposalProps
   };
   const searchProps = {
@@ -33734,11 +33778,16 @@ function useMenuSelectField(props) {
     loading: optionsLoading,
     disabledReasons,
     initialIndex,
+    rowVariant: multiple ? "checkbox" : "check",
     onKeyDown: onMenuKeyDown,
     activeDescendant
   };
   return { triggerRef, trigger: triggerProps, searchRef, search: searchProps, listRef, menu: menuProps };
 }
+function labelsFor(values, options, getOptionValue, getOptionLabel) {
+  const keys = new Set(values.map(valueToKey));
+  return options.filter((option) => keys.has(valueToKey(getOptionValue(option)))).map(getOptionLabel);
+}
 function matchesSearch(option, query, getOptionLabel, getOptionSearchText, contains) {
   if (contains(getOptionLabel(option), query)) return true;
   const extra = getOptionSearchText?.(option);
@@ -33770,7 +33819,15 @@ var MenuSelectKeyboardDelegate = class _MenuSelectKeyboardDelegate extends impor
 // src/inputs/MenuSelectField/internal/BaseMenuSelectField.tsx
 var import_jsx_runtime273 = require("react/jsx-runtime");
 function BaseMenuSelectField(props) {
-  const { label, searchPlaceholder } = props;
+  const {
+    label,
+    searchPlaceholder,
+    selectionMode: _selectionMode,
+    values: _values,
+    proposedValues: _proposedValues,
+    onCommit: _onCommit,
+    ...fieldProps
+  } = props;
   const { triggerRef, trigger, searchRef, search, listRef, menu } = useMenuSelectField(props);
   const tid = useTestIds(props, defaultTestId(label));
   const { sm: isMobile } = useBreakpoint();
@@ -33803,7 +33860,7 @@ function BaseMenuSelectField(props) {
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(import_jsx_runtime273.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(MenuSelectTrigger, { ...props, trigger, triggerRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(MenuSelectTrigger, { ...fieldProps, label, trigger, triggerRef }),
     isMobile ? /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(BottomSheet, { isOpen: menu.isOpen, onClose: () => menu.close({ restoreFocus: true }), label, ...tid, children: panel }) : /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
       AnchoredOverlay,
       {
@@ -33817,18 +33874,38 @@ function BaseMenuSelectField(props) {
   ] });
 }
 
-// src/inputs/MenuSelectField/MenuSelectField.tsx
+// src/inputs/MenuSelectField/MenuMultiSelectField.tsx
 var import_jsx_runtime274 = require("react/jsx-runtime");
+function MenuMultiSelectField(props) {
+  const { onSelect, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(BaseMenuSelectField, { ...rest, selectionMode: "multiple", onCommit: onSelect });
+}
+
+// src/inputs/MenuSelectField/MenuSelectField.tsx
+var import_react188 = require("react");
+var import_jsx_runtime275 = require("react/jsx-runtime");
 function MenuSelectField(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(BaseMenuSelectField, { ...props });
+  const { value, proposedValue, onSelect, ...rest } = props;
+  const values = (0, import_react188.useMemo)(() => value === void 0 ? [] : [value], [value]);
+  const proposedValues = (0, import_react188.useMemo)(() => proposedValue === void 0 ? void 0 : [proposedValue], [proposedValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
+    BaseMenuSelectField,
+    {
+      ...rest,
+      selectionMode: "single",
+      values,
+      proposedValues,
+      onCommit: (next, opts) => onSelect(next[0], opts[0])
+    }
+  );
 }
 
 // src/inputs/ToggleButton.tsx
-var import_react188 = require("react");
+var import_react189 = require("react");
 var import_react_aria79 = require("react-aria");
 var import_react_stately21 = require("react-stately");
 var import_runtime179 = require("@homebound/truss/runtime");
-var import_jsx_runtime275 = require("react/jsx-runtime");
+var import_jsx_runtime276 = require("react/jsx-runtime");
 function ToggleButton(props) {
   const {
     selected: isSelected = false,
@@ -33839,7 +33916,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = (0, import_react188.useState)(false);
+  const [asyncInProgress, setAsyncInProgress] = (0, import_react189.useState)(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -33858,8 +33935,8 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = (0, import_react188.useRef)(null);
-  const ref = (0, import_react188.useRef)(null);
+  const labelRef = (0, import_react189.useRef)(null);
+  const ref = (0, import_react189.useRef)(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,
@@ -33932,10 +34009,10 @@ function ToggleButton(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)("label", { ...labelAttrs, children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(Icon, { icon }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime276.jsxs)("label", { ...labelAttrs, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(Icon, { icon }),
       label,
-      /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(import_react_aria79.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(import_react_aria79.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }
@@ -34076,6 +34153,7 @@ var togglePressStyles = {
   Loader,
   LoadingSkeleton,
   MaxLines,
+  MenuMultiSelectField,
   MenuSelectField,
   ModalBanner,
   ModalBody,