@sproutsocial/seeds-react-menu 1.11.2 → 1.11.4

package/.turbo/turbo-build.log

@@ -8,28 +8,28 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/v2/index.js           62.63 KB
-ESM dist/esm/index.js              73.57 KB
-ESM dist/esm/v3/index.js           79.98 KB
-ESM dist/esm/chunk-ROQATIB7.js     9.15 KB
-ESM dist/esm/v2/index.js.map       132.57 KB
-ESM dist/esm/index.js.map          156.22 KB
-ESM dist/esm/v3/index.js.map       156.55 KB
-ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
-ESM ⚡️ Build success in 86ms
 CJS dist/index.js        92.62 KB
-CJS dist/v3/index.js     91.02 KB
 CJS dist/v2/index.js     73.18 KB
+CJS dist/v3/index.js     93.61 KB
 CJS dist/index.js.map    180.20 KB
-CJS dist/v3/index.js.map 156.57 KB
 CJS dist/v2/index.js.map 152.19 KB
-CJS ⚡️ Build success in 86ms
+CJS dist/v3/index.js.map 161.54 KB
+CJS ⚡️ Build success in 117ms
+ESM dist/esm/index.js              73.57 KB
+ESM dist/esm/v3/index.js           82.46 KB
+ESM dist/esm/chunk-ROQATIB7.js     9.15 KB
+ESM dist/esm/v2/index.js           62.63 KB
+ESM dist/esm/index.js.map          156.22 KB
+ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
+ESM dist/esm/v3/index.js.map       161.58 KB
+ESM dist/esm/v2/index.js.map       132.57 KB
+ESM ⚡️ Build success in 117ms
 DTS Build start
-DTS ⚡️ Build success in 6472ms
+DTS ⚡️ Build success in 6908ms
 DTS dist/index.d.ts     39.08 KB
 DTS dist/v2/index.d.ts  5.55 KB
-DTS dist/v3/index.d.ts  17.59 KB
+DTS dist/v3/index.d.ts  17.65 KB
 DTS dist/index.d.mts    39.08 KB
 DTS dist/v2/index.d.mts 5.55 KB
-DTS dist/v3/index.d.mts 17.59 KB
-Done in 7.21s.
+DTS dist/v3/index.d.mts 17.65 KB
+Done in 7.71s.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.11.4
+
+### Patch Changes
+
+- 1094671: ADd placeholder for single searchable select
+
+## 1.11.3
+
+### Patch Changes
+
+- fe0d0f9: Include disabled items and placeholder items for all components
+
 ## 1.11.2
 
 ### Patch Changes

package/dist/esm/v3/index.js

@@ -69,6 +69,7 @@ function CheckIcon() {
 function SelectItem({
   value,
   label,
+  disabled,
   inputType = "icon",
   renderItem,
   hidden
@@ -77,6 +78,7 @@ function SelectItem({
     StyledItem,
     {
       value,
+      disabled,
       style: hidden ? { display: "none" } : void 0,
       "data-qa-menu-item": label,
       children: [
@@ -138,6 +140,7 @@ var Field = styled2.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.space[200]};
+  width: 100%;
 `;
 var SelectLabel = styled2(Select2.Label)`
   font-size: ${({ theme }) => theme.typography[200].fontSize};
@@ -359,6 +362,7 @@ function SingleSelect(props) {
                   {
                     value: String(item.id),
                     label: itemToString(item),
+                    disabled: item.disabled,
                     inputType,
                     renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                   },
@@ -366,29 +370,27 @@ function SingleSelect(props) {
                 ))
               ] }),
               index < arr.length - 1 && /* @__PURE__ */ jsx3(SelectSeparator, {})
-            ] }, group.value)) : (
-              // TODO: need to add a placeholder item when includePlaceholderItem is true
-              /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                includePlaceholderItem && /* @__PURE__ */ jsx3(
-                  SelectItem,
-                  {
-                    value: null,
-                    label: placeholder ?? ""
-                  },
-                  "placeholder"
-                ),
-                data.map((item) => /* @__PURE__ */ jsx3(
-                  SelectItem,
-                  {
-                    value: String(item.id),
-                    label: itemToString(item),
-                    inputType,
-                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                  },
-                  item.id
-                ))
-              ] })
-            ) }),
+            ] }, group.value)) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              includePlaceholderItem && /* @__PURE__ */ jsx3(
+                SelectItem,
+                {
+                  value: null,
+                  label: placeholder ?? ""
+                },
+                "placeholder"
+              ),
+              data.map((item) => /* @__PURE__ */ jsx3(
+                SelectItem,
+                {
+                  value: String(item.id),
+                  label: itemToString(item),
+                  disabled: item.disabled,
+                  inputType,
+                  renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                },
+                item.id
+              ))
+            ] }) }),
             /* @__PURE__ */ jsx3(Select3.ScrollDownArrow, {})
           ] }) }) })
         ]
@@ -501,6 +503,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
@@ -514,6 +517,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)
@@ -1012,6 +1016,7 @@ function ComboboxItemInner({
   value,
   itemId,
   label,
+  disabled,
   inputType = "icon",
   renderItem,
   index,
@@ -1026,6 +1031,7 @@ function ComboboxItemInner({
       "data-index": dataIndex,
       style,
       ref,
+      disabled,
       "data-qa-menu-item": label,
       children: [
         inputType === "radio" ? /* @__PURE__ */ jsx6(
@@ -1073,6 +1079,16 @@ var ComboboxItem_default = ComboboxItem2;
 import * as React7 from "react";
 import { Combobox as Combobox2 } from "@base-ui/react/combobox";
 import { useVirtualizer } from "@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
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var ITEM_HEIGHT = 32;
 function isGroupHeaderSentinel(v) {
@@ -1134,7 +1150,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,
@@ -1143,6 +1159,22 @@ function VirtualizedComboboxList({
               transform: `translateY(${virtualItem.start}px)`,
               boxSizing: "border-box"
             };
+            if (isPlaceholderSentinel(row)) {
+              return /* @__PURE__ */ jsx7(
+                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;
@@ -1201,6 +1233,7 @@ function VirtualizedComboboxList({
                 value: item,
                 itemId: String(item.id),
                 label: itemToString(item),
+                disabled: item.disabled,
                 inputType,
                 renderItem: renderItem ? () => renderItem(item) : () => itemToString(item),
                 style: baseStyle,
@@ -1336,6 +1369,7 @@ function SingleCombobox(props) {
                             value: item,
                             itemId: String(item.id),
                             label: itemToString(item),
+                            disabled: item.disabled,
                             inputType,
                             renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                           },
@@ -1349,6 +1383,7 @@ function SingleCombobox(props) {
                         value: item,
                         itemId: String(item.id),
                         label: itemToString(item),
+                        disabled: item.disabled,
                         inputType,
                         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                       },
@@ -1522,6 +1557,7 @@ function MultiCombobox(props) {
         value: item,
         itemId: String(item.id),
         label: itemToString(item),
+        disabled: item.disabled,
         inputType,
         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
       },
@@ -1650,6 +1686,7 @@ function MultiCombobox(props) {
                             value: item,
                             itemId: String(item.id),
                             label: itemToString(item),
+                            disabled: item.disabled,
                             inputType,
                             renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                           },
@@ -1663,6 +1700,7 @@ function MultiCombobox(props) {
                         value: item,
                         itemId: String(item.id),
                         label: itemToString(item),
+                        disabled: item.disabled,
                         inputType,
                         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                       },
@@ -1683,11 +1721,12 @@ function MultiCombobox(props) {
 import * as React10 from "react";
 import { Combobox as Combobox5 } from "@base-ui/react/combobox";
 import "@tanstack/react-virtual";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function SingleSearchableSelect(props) {
   const {
     id,
     placeholder = "Select...",
+    includePlaceholderItem,
     searchPlaceholder = "Search...",
     emptyText = "No results found.",
     isLoading = false,
@@ -1722,9 +1761,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(
@@ -1740,9 +1780,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,
@@ -1761,7 +1806,7 @@ function SingleSearchableSelect(props) {
         } : void 0,
         children: [
           /* @__PURE__ */ jsxs8(SearchableSelectTrigger, { id, children: [
-            /* @__PURE__ */ jsx10(SearchableSelectPlaceholder, { children: /* @__PURE__ */ jsx10(Combobox5.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : null }) }),
+            /* @__PURE__ */ jsx10(SearchableSelectPlaceholder, { children: /* @__PURE__ */ jsx10(Combobox5.Value, { placeholder, children: value ? renderSelection ? renderSelection(value) : itemToString(value) : placeholder }) }),
             /* @__PURE__ */ jsx10(SearchableSelectTriggerIcon, { children: /* @__PURE__ */ jsx10(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx10(ChevronIcon, {}) }) })
           ] }),
           /* @__PURE__ */ jsx10(Combobox5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx10(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs8(
@@ -1810,6 +1855,7 @@ function SingleSearchableSelect(props) {
                             value: item,
                             itemId: String(item.id),
                             label: itemToString(item),
+                            disabled: item.disabled,
                             inputType,
                             renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                           },
@@ -1817,17 +1863,30 @@ function SingleSearchableSelect(props) {
                         ) })
                       ] }),
                       index < groups.length - 1 && /* @__PURE__ */ jsx10(ComboboxSeparator, {})
-                    ] }, group.value) : (item) => /* @__PURE__ */ jsx10(
-                      ComboboxItem_default,
-                      {
-                        value: item,
-                        itemId: String(item.id),
-                        label: itemToString(item),
-                        inputType,
-                        renderItem: renderItem ? () => renderItem(item) : void 0
-                      },
-                      item.id
-                    )
+                    ] }, group.value) : /* @__PURE__ */ jsxs8(Fragment8, { children: [
+                      includePlaceholderItem && /* @__PURE__ */ jsx10(
+                        ComboboxItem_default,
+                        {
+                          value: makePlaceholderSentinel(placeholder),
+                          itemId: "placeholder",
+                          label: placeholder,
+                          inputType
+                        },
+                        "placeholder"
+                      ),
+                      /* @__PURE__ */ jsx10(Combobox5.Collection, { children: (item) => /* @__PURE__ */ jsx10(
+                        ComboboxItem_default,
+                        {
+                          value: item,
+                          itemId: String(item.id),
+                          label: itemToString(item),
+                          disabled: item.disabled,
+                          inputType,
+                          renderItem: renderItem ? () => renderItem(item) : void 0
+                        },
+                        item.id
+                      ) })
+                    ] })
                   }
                 )
               ]
@@ -1998,6 +2057,7 @@ function MultiSearchableSelect(props) {
         value: item,
         itemId: String(item.id),
         label: itemToString(item),
+        disabled: item.disabled,
         inputType,
         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
       },
@@ -2112,6 +2172,7 @@ function MultiSearchableSelect(props) {
                             value: item,
                             itemId: String(item.id),
                             label: itemToString(item),
+                            disabled: item.disabled,
                             inputType,
                             renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                           },
@@ -2125,6 +2186,7 @@ function MultiSearchableSelect(props) {
                         value: item,
                         itemId: String(item.id),
                         label: itemToString(item),
+                        disabled: item.disabled,
                         inputType,
                         renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                       },