@homebound/beam 3.2.0-alpha.3 → 3.3.0

package/dist/index.cjs

@@ -11295,6 +11295,7 @@ function VirtualizedOptions(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [focusedItem]
   );
+  const key = process.env.NODE_ENV === "test" ? items.length : "virtuoso";
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     import_react_virtuoso.Virtuoso,
     {
@@ -11302,11 +11303,6 @@ function VirtualizedOptions(props) {
       totalListHeightChanged: onListHeightChange,
       totalCount: items.length,
       ...process.env.NODE_ENV === "test" ? {
-        // In tests, we render all rows so assertions can see expands/async-loaded items. However,
-        // the `initialItemCount` (next prop) is only applied on amount, so we set `key={items.length}`
-        // to force a remount when our list changes -- and we only want/need this in tests, b/c otherwise
-        // in production a Virtuoso remount causes visible flashing.
-        key: items.length,
         // We don't really need to set this, but it's handy for tests, which would otherwise render
         // just 1 row. A better way to do this would be to jest.mock out Virtuoso with an impl that
         // just rendered everything, but doing this for now.
@@ -11349,7 +11345,8 @@ function VirtualizedOptions(props) {
       components: !loading ? {} : {
         Footer: typeof loading === "function" ? loading : () => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoadingDots, { contrast })
       }
-    }
+    },
+    key
   );
 }
 
@@ -11476,7 +11473,7 @@ function ListBox(props) {
       boxShadow: "bshBasic h_bshHover"
     } : {}
   }), ref: listBoxRef, ...listBoxProps, children: [
-    isMultiSelect && !isTree && state.selectionManager.selectedKeys.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { className: "p_0 m_0 lis_none pt2 pl2 pb1 pr1 df bbs_solid bbw_1px bcGray200 flexWrap_wrap maxh_50 oa", ref: selectedList, children: selectedOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
+    isMultiSelect && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { className: "p_0 m_0 lis_none pt2 pl2 pb1 pr1 df bbs_solid bbw_1px bcGray200 flexWrap_wrap maxh_50 oa", ref: selectedList, children: selectedOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { className: "p_0 m_0 lis_none fg1", children: hasSections ? [...state.collection].map((section) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       ListBoxSection,
       {
@@ -11627,14 +11624,15 @@ function TreeSelectFieldBase(props) {
       if (!maybeOption) return [];
       return [maybeOption.option];
     });
-    const selectedOptionsLabels = chipDisplay === "root" ? initialOptions.flatMap((o) => getTopLevelSelections(o, selectedKeys, getOptionValue)).map(getOptionLabel) : chipDisplay === "leaf" ? selectedOptions.filter((o) => !o.children || o.children.length === 0).map(getOptionLabel) : selectedOptions.map(getOptionLabel);
+    const selectedChipState = getSelectedChipState(initialOptions, selectedOptions, selectedKeys, chipDisplay, getOptionLabel, getOptionValue);
     return {
       selectedKeys: [...selectedKeys],
       searchValue: void 0,
-      inputValue: selectedOptions.length === 1 ? getOptionLabel([...selectedOptions][0]) : isReadOnly && selectedOptions.length > 0 ? selectedOptionsLabels.join(", ") : selectedOptions.length === 0 ? nothingSelectedText : "",
+      inputValue: selectedOptions.length === 1 ? getOptionLabel([...selectedOptions][0]) : isReadOnly && selectedOptions.length > 0 ? selectedChipState.labels.join(", ") : selectedOptions.length === 0 ? nothingSelectedText : "",
       selectedOptions,
+      selectedChipOptions: selectedChipState.options,
       allOptions: initialOptions,
-      selectedOptionsLabels,
+      selectedOptionsLabels: selectedChipState.labels,
       optionsLoading: false,
       allowCollapsing: true
     };
@@ -11733,7 +11731,9 @@ function TreeSelectFieldBase(props) {
             searchValue: void 0,
             allowCollapsing: true,
             selectedKeys: [],
-            selectedOptions: []
+            selectedOptions: [],
+            selectedChipOptions: [],
+            selectedOptionsLabels: []
           }));
           onSelect({
             all: {
@@ -11800,6 +11800,7 @@ function TreeSelectFieldBase(props) {
         const rootValues = rootOptions.map(getOptionValue);
         const leafOptions = selectedOptions.filter((o) => !o.children || o.children.length === 0);
         const leafValues = leafOptions.map(getOptionValue);
+        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.
@@ -11807,7 +11808,8 @@ function TreeSelectFieldBase(props) {
           searchValue: void 0,
           selectedKeys: [...selectedKeys],
           selectedOptions,
-          selectedOptionsLabels: chipDisplay === "root" ? rootOptions.map(getOptionLabel) : chipDisplay === "leaf" ? leafOptions.map(getOptionLabel) : selectedOptions.map(getOptionLabel)
+          selectedChipOptions: selectedChipState.options,
+          selectedOptionsLabels: selectedChipState.labels
         }));
         onSelect({
           all: {
@@ -11906,7 +11908,7 @@ function TreeSelectFieldBase(props) {
         onClose: () => state.toggle(),
         isOpen: state.isOpen,
         minWidth: 320,
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ListBox, { ...listBoxProps, positionProps, state, listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel, getOptionValue: (o) => valueToKey(getOptionValue(o)), contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ListBox, { ...listBoxProps, positionProps, state, listBoxRef, selectedOptions: fieldState.selectedChipOptions, getOptionLabel, getOptionValue: (o) => valueToKey(getOptionValue(o)), contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true })
       }
     )
   ] });
@@ -11936,6 +11938,25 @@ function isOptionFullySelected(option, selectedKeys, disabledKeys, groupKeys, ge
   if (!option.children || option.children.length === 0) return false;
   return option.children.every((child) => isOptionFullySelected(child, selectedKeys, disabledKeys, groupKeys, getOptionValue));
 }
+function getSelectedChipState(allOptions, selectedOptions, selectedKeys, chipDisplay, getOptionLabel, getOptionValue) {
+  const options = chipDisplay === "root" ? dedupeOptionsByValue(allOptions.flatMap((option) => getTopLevelSelections(option, selectedKeys, getOptionValue)), getOptionValue) : chipDisplay === "leaf" ? selectedOptions.filter(isLeafOption) : selectedOptions;
+  return {
+    options,
+    labels: options.map(getOptionLabel)
+  };
+}
+function dedupeOptionsByValue(options, getOptionValue) {
+  const seen = /* @__PURE__ */ new Set();
+  return options.filter(function filterOption(option) {
+    const key = valueToKey(getOptionValue(option));
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+function isLeafOption(option) {
+  return !option.children || option.children.length === 0;
+}
 
 // src/inputs/internal/ComboBoxInput.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
@@ -11974,7 +11995,6 @@ function ComboBoxInput(props) {
   } = useTreeSelectFieldProvider();
   const [isFocused, setIsFocused] = (0, import_react45.useState)(false);
   const isMultiSelect = state.selectionManager.selectionMode === "multiple";
-  const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
   const showChipSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 0;
   const showFieldDecoration = (!isMultiSelect || isMultiSelect && !isFocused) && fieldDecoration && selectedOptions.length === 1;
   const multilineProps = allowWrap ? {
@@ -11982,6 +12002,8 @@ function ComboBoxInput(props) {
     multiline: true
   } : {};
   const chipLabels = isTree ? selectedOptionsLabels || [] : selectedOptions.map((o) => getOptionLabel(o));
+  const selectedChipCount = chipLabels.length;
+  const showNumSelection = isMultiSelect && selectedChipCount > 1;
   useGrowingTextField({
     // This says: When using a multiselect, then only enable the growing textfield when we are focused on it.
     // Because otherwise, we're not displaying the input element that dictates the height (we're displaying <Chips/>). This would cause incorrect calculations
@@ -11992,7 +12014,7 @@ function ComboBoxInput(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Chips, { compact: otherProps.compact, values: chipLabels, wrap: allowWrap }), inputRef, inputWrapRef, errorMsg, contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? {
     fontWeight: "fw5"
-  } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CountBadge, { count: isTree ? selectedOptionsLabels?.length ?? 0 : state.selectionManager.selectedKeys.size, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...(0, import_runtime40.trussProps)({
+  } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CountBadge, { count: selectedChipCount, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...(0, import_runtime40.trussProps)({
     ...{
       borderRadius: "br4",
       outline: "outline0",