@sproutsocial/seeds-react-menu 1.11.2 → 1.11.4

package/dist/v3/index.d.mts

@@ -5,6 +5,7 @@ import * as styled_components from 'styled-components';
 
 interface DataWithId {
     id: string | number;
+    disabled?: boolean;
 }
 
 interface SingleSelectBaseProps {
@@ -174,6 +175,7 @@ declare function MultiCombobox<T extends DataWithId>(props: MultiComboboxProps<T
 interface SingleSearchableSelectBaseProps {
     id?: string;
     placeholder?: string;
+    includePlaceholderItem?: boolean;
     searchPlaceholder?: string;
     emptyText?: string;
     isLoading?: boolean;

package/dist/v3/index.d.ts

@@ -5,6 +5,7 @@ import * as styled_components from 'styled-components';
 
 interface DataWithId {
     id: string | number;
+    disabled?: boolean;
 }
 
 interface SingleSelectBaseProps {
@@ -174,6 +175,7 @@ declare function MultiCombobox<T extends DataWithId>(props: MultiComboboxProps<T
 interface SingleSearchableSelectBaseProps {
     id?: string;
     placeholder?: string;
+    includePlaceholderItem?: boolean;
     searchPlaceholder?: string;
     emptyText?: string;
     isLoading?: boolean;

package/dist/v3/index.js

@@ -142,6 +142,7 @@ function CheckIcon() {
 function SelectItem({
   value,
   label,
+  disabled,
   inputType = "icon",
   renderItem,
   hidden
@@ -150,6 +151,7 @@ function SelectItem({
     StyledItem,
     {
       value,
+      disabled,
       style: hidden ? { display: "none" } : void 0,
       "data-qa-menu-item": label,
       children: [
@@ -211,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};
@@ -432,6 +435,7 @@ function SingleSelect(props) {
                   {
                     value: String(item.id),
                     label: itemToString(item),
+                    disabled: item.disabled,
                     inputType,
                     renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                   },
@@ -439,29 +443,27 @@ function SingleSelect(props) {
                 ))
               ] }),
               index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectSeparator, {})
-            ] }, group.value)) : (
-              // TODO: need to add a placeholder item when includePlaceholderItem is true
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  SelectItem,
-                  {
-                    value: null,
-                    label: placeholder ?? ""
-                  },
-                  "placeholder"
-                ),
-                data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  SelectItem,
-                  {
-                    value: String(item.id),
-                    label: itemToString(item),
-                    inputType,
-                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                  },
-                  item.id
-                ))
-              ] })
-            ) }),
+            ] }, group.value)) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                SelectItem,
+                {
+                  value: null,
+                  label: placeholder ?? ""
+                },
+                "placeholder"
+              ),
+              data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                SelectItem,
+                {
+                  value: String(item.id),
+                  label: itemToString(item),
+                  disabled: item.disabled,
+                  inputType,
+                  renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                },
+                item.id
+              ))
+            ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.ScrollDownArrow, {})
           ] }) }) })
         ]
@@ -574,6 +576,7 @@ function MultiSelect(props) {
                   {
                     value: String(item.id),
                     label: itemToString(item),
+                    disabled: item.disabled,
                     inputType,
                     hidden: removeSelectedItems && value.includes(String(item.id)),
                     renderItem: renderItem ? () => renderItem(item) : void 0
@@ -587,6 +590,7 @@ function MultiSelect(props) {
               {
                 value: String(item.id),
                 label: itemToString(item),
+                disabled: item.disabled,
                 inputType,
                 hidden: removeSelectedItems && value.includes(String(item.id)),
                 renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
@@ -1085,6 +1089,7 @@ function ComboboxItemInner({
   value,
   itemId,
   label,
+  disabled,
   inputType = "icon",
   renderItem,
   index,
@@ -1099,6 +1104,7 @@ function ComboboxItemInner({
       "data-index": dataIndex,
       style,
       ref,
+      disabled,
       "data-qa-menu-item": label,
       children: [
         inputType === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1146,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) {
@@ -1207,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,
@@ -1216,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;
@@ -1274,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,
@@ -1409,6 +1442,7 @@ function SingleCombobox(props) {
                             value: item,
                             itemId: String(item.id),
                             label: itemToString(item),
+                            disabled: item.disabled,
                             inputType,
                             renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                           },
@@ -1422,6 +1456,7 @@ function SingleCombobox(props) {
                         value: item,
                         itemId: String(item.id),
                         label: itemToString(item),
+                        disabled: item.disabled,
                         inputType,
                         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                       },
@@ -1595,6 +1630,7 @@ function MultiCombobox(props) {
         value: item,
         itemId: String(item.id),
         label: itemToString(item),
+        disabled: item.disabled,
         inputType,
         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
       },
@@ -1723,6 +1759,7 @@ function MultiCombobox(props) {
                             value: item,
                             itemId: String(item.id),
                             label: itemToString(item),
+                            disabled: item.disabled,
                             inputType,
                             renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                           },
@@ -1736,6 +1773,7 @@ function MultiCombobox(props) {
                         value: item,
                         itemId: String(item.id),
                         label: itemToString(item),
+                        disabled: item.disabled,
                         inputType,
                         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                       },
@@ -1761,6 +1799,7 @@ function SingleSearchableSelect(props) {
   const {
     id,
     placeholder = "Select...",
+    includePlaceholderItem,
     searchPlaceholder = "Search...",
     emptyText = "No results found.",
     isLoading = false,
@@ -1795,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(
@@ -1813,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,
@@ -1834,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)(
@@ -1883,6 +1928,7 @@ function SingleSearchableSelect(props) {
                             value: item,
                             itemId: String(item.id),
                             label: itemToString(item),
+                            disabled: item.disabled,
                             inputType,
                             renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                           },
@@ -1890,17 +1936,30 @@ function SingleSearchableSelect(props) {
                         ) })
                       ] }),
                       index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComboboxSeparator, {})
-                    ] }, group.value) : (item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                      ComboboxItem_default,
-                      {
-                        value: item,
-                        itemId: String(item.id),
-                        label: itemToString(item),
-                        inputType,
-                        renderItem: renderItem ? () => renderItem(item) : void 0
-                      },
-                      item.id
-                    )
+                    ] }, group.value) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                      includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        ComboboxItem_default,
+                        {
+                          value: makePlaceholderSentinel(placeholder),
+                          itemId: "placeholder",
+                          label: placeholder,
+                          inputType
+                        },
+                        "placeholder"
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_combobox5.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        ComboboxItem_default,
+                        {
+                          value: item,
+                          itemId: String(item.id),
+                          label: itemToString(item),
+                          disabled: item.disabled,
+                          inputType,
+                          renderItem: renderItem ? () => renderItem(item) : void 0
+                        },
+                        item.id
+                      ) })
+                    ] })
                   }
                 )
               ]
@@ -2071,6 +2130,7 @@ function MultiSearchableSelect(props) {
         value: item,
         itemId: String(item.id),
         label: itemToString(item),
+        disabled: item.disabled,
         inputType,
         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
       },
@@ -2185,6 +2245,7 @@ function MultiSearchableSelect(props) {
                             value: item,
                             itemId: String(item.id),
                             label: itemToString(item),
+                            disabled: item.disabled,
                             inputType,
                             renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                           },
@@ -2198,6 +2259,7 @@ function MultiSearchableSelect(props) {
                         value: item,
                         itemId: String(item.id),
                         label: itemToString(item),
+                        disabled: item.disabled,
                         inputType,
                         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                       },