@sproutsocial/seeds-react-menu 1.11.3 → 1.11.5

package/dist/v3/index.js

@@ -213,6 +213,7 @@ var Field = import_styled_components2.default.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.space[200]};
+  width: 100%;
 `;
 var SelectLabel = (0, import_styled_components2.default)(import_select2.Select.Label)`
   font-size: ${({ theme }) => theme.typography[200].fontSize};
@@ -1151,6 +1152,16 @@ var ComboboxItem_default = ComboboxItem2;
 var React7 = __toESM(require("react"));
 var import_combobox2 = require("@base-ui/react/combobox");
 var import_react_virtual = require("@tanstack/react-virtual");
+
+// src/v3/Common/sentinels.ts
+function makePlaceholderSentinel(label) {
+  return { __placeholder: true, label };
+}
+function isPlaceholderSentinel(v) {
+  return typeof v === "object" && v !== null && "__placeholder" in v;
+}
+
+// src/v3/Common/VirtualizedComboboxList.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ITEM_HEIGHT = 32;
 function isGroupHeaderSentinel(v) {
@@ -1212,7 +1223,7 @@ function VirtualizedComboboxList({
           style: { position: "relative", width: "100%", height: totalSize },
           children: virtualizer.getVirtualItems().map((virtualItem) => {
             const row = filteredItems[virtualItem.index];
-            if (!row) return null;
+            if (row == null) return null;
             const baseStyle = {
               position: "absolute",
               top: 0,
@@ -1221,6 +1232,22 @@ function VirtualizedComboboxList({
               transform: `translateY(${virtualItem.start}px)`,
               boxSizing: "border-box"
             };
+            if (isPlaceholderSentinel(row)) {
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                ComboboxItem_default,
+                {
+                  index: virtualItem.index,
+                  "data-index": virtualItem.index,
+                  value: row,
+                  itemId: "placeholder",
+                  label: row.label,
+                  inputType,
+                  style: baseStyle,
+                  ref: virtualizer.measureElement
+                },
+                "placeholder"
+              );
+            }
             if (isSelectAllSentinel(row)) {
               const selectedCount = selectedArray.length;
               const totalCount = data.length;
@@ -1279,6 +1306,7 @@ function VirtualizedComboboxList({
                 value: item,
                 itemId: String(item.id),
                 label: itemToString(item),
+                disabled: item.disabled,
                 inputType,
                 renderItem: renderItem ? () => renderItem(item) : () => itemToString(item),
                 style: baseStyle,
@@ -1806,9 +1834,10 @@ function SingleSearchableSelect(props) {
   );
   const value = isControlled ? idToItem(selectedItemId) : internalValue;
   function handleValueChange(newItem) {
-    if (!isControlled) setInternalValue(newItem);
+    const realItem = newItem == null || isPlaceholderSentinel(newItem) ? null : newItem;
+    if (!isControlled) setInternalValue(realItem);
     if (onSelectedItemIdChange) {
-      onSelectedItemIdChange(newItem ? newItem.id : null);
+      onSelectedItemIdChange(realItem ? realItem.id : null);
     }
   }
   const groups = React10.useMemo(
@@ -1824,9 +1853,14 @@ function SingleSearchableSelect(props) {
         value,
         disabled: props.disabled,
         onValueChange: handleValueChange,
-        itemToStringLabel: itemToString,
-        isItemEqualToValue: (a, b) => a != null && b != null && a.id === b.id,
-        items: isVirtualized ? data : groups ?? (isChildrenMode ? void 0 : data),
+        itemToStringLabel: (item) => isPlaceholderSentinel(item) ? item.label : itemToString(item),
+        isItemEqualToValue: (a, b) => {
+          if (isPlaceholderSentinel(a) && isPlaceholderSentinel(b)) return true;
+          if (isPlaceholderSentinel(a)) return b == null;
+          if (isPlaceholderSentinel(b)) return a == null;
+          return a != null && b != null && a.id === b.id;
+        },
+        items: isVirtualized ? includePlaceholderItem ? [makePlaceholderSentinel(placeholder), ...data] : data : groups ?? (isChildrenMode ? void 0 : data),
         virtualized: isVirtualized,
         open,
         onOpenChange: setOpen,
@@ -1845,7 +1879,7 @@ function SingleSearchableSelect(props) {
         } : void 0,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SearchableSelectTrigger, { id, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectPlaceholder, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : null }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectPlaceholder, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : placeholder }) }),
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchableSelectTriggerIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronIcon, {}) }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -1906,9 +1940,10 @@ function SingleSearchableSelect(props) {
                       includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         ComboboxItem_default,
                         {
-                          value: null,
+                          value: makePlaceholderSentinel(placeholder),
                           itemId: "placeholder",
-                          label: placeholder
+                          label: placeholder,
+                          inputType
                         },
                         "placeholder"
                       ),