@sproutsocial/seeds-react-menu 1.11.0 → 1.11.2

package/dist/esm/v3/index.js

@@ -6,6 +6,18 @@ import styled4 from "styled-components";
 // src/v3/SeedsPortal.tsx
 import * as React from "react";
 import { DisablePortalToBodyContext } from "@sproutsocial/seeds-react-portal";
+function useSeedsPortalContainer() {
+  const disablePortalToBody = React.useContext(DisablePortalToBodyContext);
+  const containerRef = React.useRef(null);
+  const [portalContainer, setPortalContainer] = React.useState(void 0);
+  React.useEffect(() => {
+    if (disablePortalToBody && containerRef.current) {
+      const dialogContent = containerRef.current.closest("[role='dialog']");
+      setPortalContainer(dialogContent ?? containerRef.current);
+    }
+  }, [disablePortalToBody]);
+  return { containerRef, portalContainer, disablePortalToBody };
+}
 
 // src/v3/Common/SelectItem.tsx
 import "react";
@@ -51,6 +63,72 @@ var StyledItemIndicator = styled(Select.ItemIndicator)`
   }
 `;
 var StyledItemText = styled(Select.ItemText)``;
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(Icon, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
+}
+function SelectItem({
+  value,
+  label,
+  inputType = "icon",
+  renderItem,
+  hidden
+}) {
+  return /* @__PURE__ */ jsxs(
+    StyledItem,
+    {
+      value,
+      style: hidden ? { display: "none" } : void 0,
+      "data-qa-menu-item": label,
+      children: [
+        inputType === "radio" ? /* @__PURE__ */ jsx(
+          StyledItemIndicator,
+          {
+            keepMounted: true,
+            render: (_props, state) => /* @__PURE__ */ jsx(
+              Radio,
+              {
+                checked: state.selected,
+                onChange: () => {
+                },
+                tabIndex: -1,
+                id: `radio-${value}`,
+                name: "select-item"
+              }
+            )
+          }
+        ) : inputType === "checkbox" ? /* @__PURE__ */ jsx(
+          StyledItemIndicator,
+          {
+            keepMounted: true,
+            render: (_props, state) => /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: state.selected,
+                onChange: () => {
+                },
+                tabIndex: -1,
+                id: `checkbox-${value}`,
+                name: "select-item"
+              }
+            )
+          }
+        ) : inputType === "icon" ? /* @__PURE__ */ jsx(StyledItemIndicator, { keepMounted: true, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) : null,
+        /* @__PURE__ */ jsx(StyledItemText, { children: renderItem ? renderItem() : label })
+      ]
+    }
+  );
+}
+
+// src/v3/Common/groupItems.ts
+function groupItems(data, groupBy) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of data) {
+    const key = groupBy(item);
+    if (!map.has(key)) map.set(key, []);
+    map.get(key).push(item);
+  }
+  return Array.from(map.entries()).map(([value, items]) => ({ value, items }));
+}
 
 // src/v3/Common/SelectStyles.tsx
 import { Select as Select2 } from "@base-ui/react/select";
@@ -96,6 +174,11 @@ var SelectTrigger = styled2(Select2.Trigger)`
   &[data-popup-open] [data-chevron] {
     transform: rotate(-180deg);
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 var SelectValue = styled2(Select2.Value)`
   min-width: 0;
@@ -180,7 +263,13 @@ var StyledChevron = styled3.div`
   transition: transform 0.15s;
   ${({ $isOpen }) => $isOpen && "transform: rotate(-180deg);"}
 `;
-function CheckIcon() {
+function ChevronIcon() {
+  return /* @__PURE__ */ jsx2(Icon2, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true });
+}
+function ClearIcon() {
+  return /* @__PURE__ */ jsx2(Icon2, { name: "circle-x-outline", fixedWidth: true, "aria-hidden": true, size: "mini" });
+}
+function CheckIcon2() {
   return /* @__PURE__ */ jsx2(Icon2, { name: "check-outline", fixedWidth: true, "aria-hidden": true });
 }
 
@@ -197,6 +286,116 @@ var StyledValue = styled4(Select3.Value)`
     color: ${({ theme }) => theme.colors.text.subtext};
   }
 `;
+function SingleSelect(props) {
+  const { id, placeholder, includePlaceholderItem } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const selectedItemId = props.selectedItemId;
+  const defaultSelectedItemId = props.defaultSelectedItemId;
+  const onSelectedItemIdChange = props.onSelectedItemIdChange;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? () => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const inputType = isChildrenMode ? "icon" : props.inputType ?? "icon";
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const groupBy = isChildrenMode ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : props.renderGroupHeading;
+  const children = isChildrenMode ? props.children : void 0;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const items = React4.useMemo(() => {
+    const dataItems = data.map((item) => ({
+      value: String(item.id),
+      label: itemToString(item)
+    }));
+    if (includePlaceholderItem) {
+      return [{ value: null, label: placeholder ?? "" }, ...dataItems];
+    }
+    return dataItems;
+  }, [data, itemToString, includePlaceholderItem, placeholder]);
+  const dataWithPlaceholder = includePlaceholderItem ? [{ id: null, value: null, label: placeholder ?? "" }, ...data] : data;
+  const isControlled = selectedItemId !== void 0;
+  const [internalValue, setInternalValue] = React4.useState(
+    defaultSelectedItemId != null ? String(defaultSelectedItemId) : null
+  );
+  const value = isControlled ? selectedItemId != null ? String(selectedItemId) : null : internalValue;
+  const selectedItem = React4.useMemo(
+    () => value != null ? data.find((d) => String(d.id) === value) ?? null : null,
+    [data, value]
+  );
+  function handleValueChange(newValue) {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    if (onSelectedItemIdChange) {
+      if (newValue == null) {
+        onSelectedItemIdChange(null);
+      } else {
+        const item = data.find((d) => String(d.id) === newValue);
+        onSelectedItemIdChange(item ? item.id : null);
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs2(Field, { children: [
+    /* @__PURE__ */ jsx3("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsxs2(
+      Select3.Root,
+      {
+        items,
+        value,
+        disabled: props.disabled,
+        onValueChange: handleValueChange,
+        id,
+        children: [
+          /* @__PURE__ */ jsxs2(SelectTrigger, { children: [
+            /* @__PURE__ */ jsx3(StyledValue, { placeholder, children: renderSelection && selectedItem ? renderSelection(selectedItem) : void 0 }),
+            /* @__PURE__ */ jsx3(SelectIcon, { children: /* @__PURE__ */ jsx3(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx3(ChevronIcon, {}) }) })
+          ] }),
+          /* @__PURE__ */ jsx3(Select3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx3(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ jsxs2(SelectPopup, { children: [
+            /* @__PURE__ */ jsx3(Select3.ScrollUpArrow, {}),
+            /* @__PURE__ */ jsx3(Select3.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs2(React4.Fragment, { children: [
+              /* @__PURE__ */ jsxs2(SelectGroup, { children: [
+                /* @__PURE__ */ jsx3(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                group.items.map((item) => /* @__PURE__ */ jsx3(
+                  SelectItem,
+                  {
+                    value: String(item.id),
+                    label: itemToString(item),
+                    inputType,
+                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                  },
+                  item.id
+                ))
+              ] }),
+              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
+                ))
+              ] })
+            ) }),
+            /* @__PURE__ */ jsx3(Select3.ScrollDownArrow, {})
+          ] }) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/MultiSelect.tsx
 import * as React5 from "react";
@@ -217,6 +416,117 @@ var Placeholder = styled5.div`
   padding-bottom: 2px;
   margin: 2px 8px 0px 0px;
 `;
+function MultiSelect(props) {
+  const { id, placeholder = "Select..." } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? () => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const customRenderSelections = isChildrenMode ? void 0 : props.customRenderSelections;
+  const maxSelections = isChildrenMode ? void 0 : props.maxSelections;
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const removeSelectedItems = isChildrenMode ? false : props.removeSelectedItems ?? false;
+  const inputType = isChildrenMode ? "checkbox" : removeSelectedItems ? "none" : props.inputType ?? "checkbox";
+  const selectedItemIds = props.selectedItemIds;
+  const defaultSelectedItemIds = props.defaultSelectedItemIds;
+  const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
+  const groupBy = isChildrenMode ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : props.renderGroupHeading;
+  const children = isChildrenMode ? props.children : void 0;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const isControlled = selectedItemIds !== void 0;
+  const [internalValue, setInternalValue] = React5.useState(
+    () => defaultSelectedItemIds?.map(String) ?? []
+  );
+  const value = isControlled ? selectedItemIds.map(String) : internalValue;
+  const items = React5.useMemo(
+    () => data.map((item) => ({
+      value: String(item.id),
+      label: itemToString(item)
+    })),
+    [data, itemToString]
+  );
+  const selectedItems = React5.useMemo(
+    () => value.map((v) => data.find((d) => String(d.id) === v)).filter((d) => d != null),
+    [data, value]
+  );
+  function handleValueChange(newValues) {
+    if (!isControlled) {
+      setInternalValue(newValues);
+    }
+    if (onSelectedItemIdsChange) {
+      const ids = newValues.map((v) => {
+        const item = data.find((d) => String(d.id) === v);
+        return item ? item.id : v;
+      });
+      onSelectedItemIdsChange(ids);
+    }
+  }
+  return /* @__PURE__ */ jsxs3(Field, { children: [
+    /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsxs3(
+      Select4.Root,
+      {
+        multiple: true,
+        items,
+        value,
+        onValueChange: handleValueChange,
+        disabled: props.disabled,
+        id,
+        children: [
+          /* @__PURE__ */ jsxs3(SelectTrigger, { children: [
+            /* @__PURE__ */ jsx4(SelectValue, { children: () => {
+              if (renderSelection) return renderSelection(selectedItems);
+              if (selectedItems.length === 0)
+                return /* @__PURE__ */ jsx4(Placeholder, { children: placeholder });
+              const visibleItems = maxSelections != null ? selectedItems.slice(0, maxSelections) : selectedItems;
+              const overflowCount = maxSelections != null && selectedItems.length > maxSelections ? selectedItems.length - maxSelections : 0;
+              const text = visibleItems.map(
+                (item) => customRenderSelections ? customRenderSelections(item) : itemToString(item)
+              ).join(", ");
+              return /* @__PURE__ */ jsxs3(SelectionText, { children: [
+                text,
+                overflowCount > 0 ? `, +${overflowCount}` : ""
+              ] });
+            } }),
+            /* @__PURE__ */ jsx4(SelectIcon, { children: /* @__PURE__ */ jsx4(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx4(ChevronIcon, {}) }) })
+          ] }),
+          /* @__PURE__ */ jsx4(Select4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx4(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ jsxs3(SelectPopup, { children: [
+            /* @__PURE__ */ jsx4(Select4.ScrollUpArrow, {}),
+            /* @__PURE__ */ jsx4(Select4.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs3(React5.Fragment, { children: [
+              /* @__PURE__ */ jsxs3(SelectGroup, { children: [
+                /* @__PURE__ */ jsx4(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                group.items.map((item) => /* @__PURE__ */ jsx4(
+                  SelectItem,
+                  {
+                    value: String(item.id),
+                    label: itemToString(item),
+                    inputType,
+                    hidden: removeSelectedItems && value.includes(String(item.id)),
+                    renderItem: renderItem ? () => renderItem(item) : void 0
+                  },
+                  item.id
+                ))
+              ] }),
+              index < arr.length - 1 && /* @__PURE__ */ jsx4(SelectSeparator, {})
+            ] }, group.value)) : data.map((item) => /* @__PURE__ */ jsx4(
+              SelectItem,
+              {
+                value: String(item.id),
+                label: itemToString(item),
+                inputType,
+                hidden: removeSelectedItems && value.includes(String(item.id)),
+                renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+              },
+              item.id
+            )) }),
+            /* @__PURE__ */ jsx4(Select4.ScrollDownArrow, {})
+          ] }) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/SingleCombobox.tsx
 import * as React8 from "react";
@@ -255,6 +565,11 @@ var ComboboxInputGroup = styled6(Combobox.InputGroup)`
   &:focus-within {
     ${focusRing2}
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 var ComboboxInput = styled6(Combobox.Input)`
   flex: 1;
@@ -270,6 +585,10 @@ var ComboboxInput = styled6(Combobox.Input)`
   &::placeholder {
     color: ${({ theme }) => theme.colors.text.subtext};
   }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
 var ComboboxTokenInput = styled6(Combobox.Input)`
   flex: 1;
@@ -286,6 +605,10 @@ var ComboboxTokenInput = styled6(Combobox.Input)`
   &::placeholder {
     color: ${({ theme }) => theme.colors.text.subtext};
   }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
 var ComboboxActionButtons = styled6.div`
   display: flex;
@@ -529,6 +852,11 @@ var ComboboxTokenInputGroup = styled6(Combobox.InputGroup)`
   &:focus-within {
     ${focusRing2}
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 var Token = styled6.span`
   display: inline-flex;
@@ -589,6 +917,11 @@ var SearchableSelectTrigger = styled6(Combobox.Trigger)`
   &[data-popup-open] [data-chevron] {
     transform: rotate(-180deg);
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 var SearchableSelectTriggerIcon = styled6(Combobox.Icon)`
   display: flex;
@@ -666,6 +999,11 @@ var SearchableSelectTokenTrigger = styled6(Combobox.Trigger)`
   &[data-popup-open] [data-chevron] {
     transform: rotate(-180deg);
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 
 // src/v3/Common/ComboboxItem.tsx
@@ -688,6 +1026,7 @@ function ComboboxItemInner({
       "data-index": dataIndex,
       style,
       ref,
+      "data-qa-menu-item": label,
       children: [
         inputType === "radio" ? /* @__PURE__ */ jsx6(
           ComboboxItemIndicator,
@@ -721,22 +1060,310 @@ function ComboboxItemInner({
               }
             )
           }
-        ) : inputType === "icon" ? /* @__PURE__ */ jsx6(ComboboxItemIndicator, { keepMounted: true, children: /* @__PURE__ */ jsx6(CheckIcon, {}) }) : null,
+        ) : inputType === "icon" ? /* @__PURE__ */ jsx6(ComboboxItemIndicator, { keepMounted: true, children: /* @__PURE__ */ jsx6(CheckIcon2, {}) }) : null,
         /* @__PURE__ */ jsx6("span", { children: renderItem ? renderItem() : label })
       ]
     }
   );
 }
 var ComboboxItem2 = React6.forwardRef(ComboboxItemInner);
+var ComboboxItem_default = ComboboxItem2;
 
 // src/v3/Common/VirtualizedComboboxList.tsx
 import * as React7 from "react";
 import { Combobox as Combobox2 } from "@base-ui/react/combobox";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ITEM_HEIGHT = 32;
+function isGroupHeaderSentinel(v) {
+  return typeof v === "object" && v !== null && "__groupHeader" in v;
+}
+function isSelectAllSentinel(v) {
+  return typeof v === "object" && v !== null && "__selectAll" in v;
+}
+function VirtualizedComboboxList({
+  open,
+  virtualizerRef,
+  value,
+  groups,
+  data,
+  itemToString,
+  inputType,
+  renderItem,
+  renderGroupHeading
+}) {
+  const filteredItems = Combobox2.useFilteredItems();
+  const scrollElementRef = React7.useRef(null);
+  const virtualizer = useVirtualizer({
+    enabled: open,
+    count: filteredItems.length,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: 20,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingStart: 4,
+    scrollPaddingEnd: 4
+  });
+  React7.useImperativeHandle(virtualizerRef, () => virtualizer);
+  const handleScrollRef = React7.useCallback(
+    (el) => {
+      scrollElementRef.current = el;
+      if (el) virtualizer.measure();
+    },
+    [virtualizer]
+  );
+  if (!filteredItems.length) return null;
+  const selectedArray = Array.isArray(value) ? value : value != null ? [value] : [];
+  const totalSize = virtualizer.getTotalSize();
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      role: "presentation",
+      ref: handleScrollRef,
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        overscrollBehavior: "contain"
+      },
+      children: /* @__PURE__ */ jsx7(
+        "div",
+        {
+          role: "presentation",
+          style: { position: "relative", width: "100%", height: totalSize },
+          children: virtualizer.getVirtualItems().map((virtualItem) => {
+            const row = filteredItems[virtualItem.index];
+            if (!row) return null;
+            const baseStyle = {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              transform: `translateY(${virtualItem.start}px)`,
+              boxSizing: "border-box"
+            };
+            if (isSelectAllSentinel(row)) {
+              const selectedCount = selectedArray.length;
+              const totalCount = data.length;
+              const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
+              return /* @__PURE__ */ jsxs5(
+                ComboboxSelectAllItem,
+                {
+                  index: virtualItem.index,
+                  "data-index": virtualItem.index,
+                  value: row,
+                  style: baseStyle,
+                  ref: virtualizer.measureElement,
+                  children: [
+                    /* @__PURE__ */ jsx7(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+                    "Select all"
+                  ]
+                },
+                virtualItem.key
+              );
+            }
+            if (isGroupHeaderSentinel(row)) {
+              const group = groups?.find((g) => g.value === row.groupName);
+              const groupItems2 = group?.items ?? [];
+              const selectedCount = groupItems2.filter(
+                (item2) => selectedArray.some((s) => s.id === item2.id)
+              ).length;
+              const state = selectedCount === 0 ? "none" : selectedCount === groupItems2.length ? "all" : "partial";
+              return /* @__PURE__ */ jsxs5(
+                ComboboxGroupHeaderItem,
+                {
+                  index: virtualItem.index,
+                  "data-index": virtualItem.index,
+                  value: row,
+                  style: baseStyle,
+                  ref: virtualizer.measureElement,
+                  children: [
+                    /* @__PURE__ */ jsx7(
+                      ComboboxGroupHeaderCheckbox,
+                      {
+                        $state: state,
+                        id: `__header-${row.groupName}`
+                      }
+                    ),
+                    renderGroupHeading ? renderGroupHeading(row.groupName) : row.groupName
+                  ]
+                },
+                virtualItem.key
+              );
+            }
+            const item = row;
+            return /* @__PURE__ */ jsx7(
+              ComboboxItem_default,
+              {
+                index: virtualItem.index,
+                "data-index": virtualItem.index,
+                value: item,
+                itemId: String(item.id),
+                label: itemToString(item),
+                inputType,
+                renderItem: renderItem ? () => renderItem(item) : () => itemToString(item),
+                style: baseStyle,
+                ref: virtualizer.measureElement
+              },
+              virtualItem.key
+            );
+          })
+        }
+      )
+    }
+  );
+}
 
 // src/v3/SingleCombobox.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function SingleCombobox(props) {
+  const {
+    id,
+    placeholder = "Search...",
+    emptyText = "No results found."
+  } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const inputType = isChildrenMode ? "icon" : props.inputType ?? "icon";
+  const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const groupBy = isChildrenMode ? void 0 : isVirtualized ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : isVirtualized ? void 0 : props.renderGroupHeading;
+  const children = isChildrenMode ? props.children : void 0;
+  const selectedItemId = props.selectedItemId;
+  const defaultSelectedItemId = props.defaultSelectedItemId;
+  const onSelectedItemIdChange = props.onSelectedItemIdChange;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React8.useState(false);
+  const virtualizerRef = React8.useRef(null);
+  const isControlled = selectedItemId !== void 0;
+  const idToItem = React8.useCallback(
+    (id2) => {
+      if (id2 == null) return null;
+      return data.find((d) => String(d.id) === String(id2)) ?? null;
+    },
+    [data]
+  );
+  const [internalValue, setInternalValue] = React8.useState(
+    () => idToItem(defaultSelectedItemId)
+  );
+  const value = isControlled ? idToItem(selectedItemId) : internalValue;
+  function handleValueChange(newItem) {
+    if (!isControlled) {
+      setInternalValue(newItem);
+    }
+    if (onSelectedItemIdChange) {
+      onSelectedItemIdChange(newItem ? newItem.id : null);
+    }
+  }
+  const groups = React8.useMemo(
+    () => groupBy ? groupItems(data, groupBy) : null,
+    [data, groupBy]
+  );
+  return /* @__PURE__ */ jsxs6(Field, { children: [
+    /* @__PURE__ */ jsx8("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsxs6(
+      Combobox3.Root,
+      {
+        id,
+        value,
+        onValueChange: handleValueChange,
+        itemToStringLabel: itemToString,
+        isItemEqualToValue: (a, b) => a != null && b != null && a.id === b.id,
+        items: isVirtualized ? data : groups ?? (isChildrenMode ? void 0 : data),
+        virtualized: isVirtualized,
+        disabled: props.disabled,
+        open,
+        onOpenChange: setOpen,
+        onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
+          const virt = virtualizerRef.current;
+          if (!item || !virt) return;
+          const isStart = index === 0;
+          const isEnd = index === virt.options.count - 1;
+          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+            queueMicrotask(() => {
+              virt.scrollToIndex(index, {
+                align: isEnd ? "start" : "end"
+              });
+            });
+          }
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsxs6(ComboboxInputGroup, { children: [
+            /* @__PURE__ */ jsx8(ComboboxInput, { placeholder, id }),
+            /* @__PURE__ */ jsxs6(ComboboxActionButtons, { children: [
+              /* @__PURE__ */ jsx8(ComboboxClear, { "aria-label": "Clear selection", children: /* @__PURE__ */ jsx8(ClearIcon, {}) }),
+              /* @__PURE__ */ jsx8(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ jsx8(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ jsx8(ChevronIcon, {}) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx8(Combobox3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx8(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs6(
+            ComboboxPopup,
+            {
+              style: isVirtualized ? { display: "flex", flexDirection: "column" } : void 0,
+              children: [
+                /* @__PURE__ */ jsx8(ComboboxEmpty, { children: emptyText }),
+                /* @__PURE__ */ jsx8(
+                  ComboboxList,
+                  {
+                    style: isVirtualized ? {
+                      padding: 0,
+                      flex: 1,
+                      minHeight: 0,
+                      display: "flex",
+                      flexDirection: "column"
+                    } : void 0,
+                    children: isVirtualized ? /* @__PURE__ */ jsx8(
+                      VirtualizedComboboxList,
+                      {
+                        open,
+                        virtualizerRef,
+                        value,
+                        groups,
+                        data,
+                        itemToString,
+                        inputType,
+                        renderItem,
+                        renderGroupHeading
+                      }
+                    ) : children ? children : groups ? (group, index) => /* @__PURE__ */ jsxs6(React8.Fragment, { children: [
+                      /* @__PURE__ */ jsxs6(ComboboxGroup, { items: group.items, children: [
+                        /* @__PURE__ */ jsx8(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ jsx8(Combobox3.Collection, { children: (item) => /* @__PURE__ */ jsx8(
+                          ComboboxItem_default,
+                          {
+                            value: item,
+                            itemId: String(item.id),
+                            label: itemToString(item),
+                            inputType,
+                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                          },
+                          item.id
+                        ) })
+                      ] }),
+                      index < groups.length - 1 && /* @__PURE__ */ jsx8(ComboboxSeparator, {})
+                    ] }, group.value) : (item) => /* @__PURE__ */ jsx8(
+                      ComboboxItem_default,
+                      {
+                        value: item,
+                        itemId: String(item.id),
+                        label: itemToString(item),
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                      },
+                      item.id
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/MultiCombobox.tsx
 import * as React9 from "react";
@@ -744,12 +1371,473 @@ import { Combobox as Combobox4 } from "@base-ui/react/combobox";
 import "@tanstack/react-virtual";
 import Icon3 from "@sproutsocial/seeds-react-icon";
 import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function makeGroupHeaderSentinel(groupName) {
+  return { __groupHeader: true, groupName };
+}
+function isGroupHeaderSentinel2(v) {
+  return typeof v === "object" && v !== null && "__groupHeader" in v;
+}
+var SELECT_ALL_SENTINEL = { __selectAll: true };
+function isSelectAllSentinel2(v) {
+  return typeof v === "object" && v !== null && "__selectAll" in v;
+}
+function MultiCombobox(props) {
+  const {
+    id,
+    placeholder = "Search...",
+    emptyText = "No results found.",
+    isLoading = false,
+    loadingText = "Loading..."
+  } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const renderToken = isChildrenMode ? void 0 : props.renderToken;
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const maxTokens = isChildrenMode ? void 0 : props.maxTokens;
+  const removeSelectedItems = isChildrenMode ? false : props.removeSelectedItems ?? false;
+  const inputType = isChildrenMode ? "checkbox" : removeSelectedItems ? "none" : props.inputType ?? "checkbox";
+  const groupBy = isChildrenMode ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : props.renderGroupHeading;
+  const selectHeadings = isChildrenMode ? false : props.selectHeadings ?? false;
+  const selectAll = isChildrenMode ? false : props.selectAll ?? false;
+  const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const children = isChildrenMode ? props.children : void 0;
+  const selectedItemIds = props.selectedItemIds;
+  const defaultSelectedItemIds = props.defaultSelectedItemIds;
+  const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React9.useState(false);
+  const virtualizerRef = React9.useRef(null);
+  const isControlled = selectedItemIds !== void 0;
+  const idsToItems = React9.useCallback(
+    (ids) => ids.map((id2) => data.find((d) => d.id === id2)).filter((d) => d != null),
+    [data]
+  );
+  const [internalValue, setInternalValue] = React9.useState(
+    () => defaultSelectedItemIds ? idsToItems(defaultSelectedItemIds) : []
+  );
+  const value = isControlled ? idsToItems(selectedItemIds) : internalValue;
+  const visibleData = React9.useMemo(
+    () => removeSelectedItems ? data.filter((item) => !value.some((v) => v.id === item.id)) : data,
+    [data, value, removeSelectedItems]
+  );
+  const groups = React9.useMemo(
+    () => groupBy ? groupItems(visibleData, groupBy) : null,
+    [visibleData, groupBy]
+  );
+  const flatItems = React9.useMemo(() => {
+    if (!groups || !selectHeadings && !selectAll) return null;
+    const rows = [];
+    if (selectAll) rows.push(SELECT_ALL_SENTINEL);
+    for (const group of groups) {
+      rows.push(makeGroupHeaderSentinel(group.value));
+      rows.push(...group.items);
+    }
+    return rows;
+  }, [groups, selectHeadings, selectAll]);
+  function setSelectedItems(items) {
+    if (!isControlled) setInternalValue(items);
+    if (onSelectedItemIdsChange)
+      onSelectedItemIdsChange(items.map((item) => item.id));
+  }
+  function handleValueChange(next) {
+    const selectAllClicked = next.filter(isSelectAllSentinel2);
+    const groupSentinels = next.filter(isGroupHeaderSentinel2);
+    const realItems = next.filter(
+      (v) => !isGroupHeaderSentinel2(v) && !isSelectAllSentinel2(v)
+    );
+    if (selectAllClicked.length > 0) {
+      const allSelected = data.every(
+        (d) => realItems.some((s) => s.id === d.id)
+      );
+      setSelectedItems(allSelected ? [] : [...data]);
+      return;
+    }
+    if (groupSentinels.length === 0) {
+      setSelectedItems(realItems);
+      return;
+    }
+    let updated = [...realItems];
+    for (const sentinel of groupSentinels) {
+      const group = groups?.find((g) => g.value === sentinel.groupName);
+      if (!group) continue;
+      const allSelected = group.items.every(
+        (item) => updated.some((s) => s.id === item.id)
+      );
+      if (allSelected) {
+        updated = updated.filter(
+          (s) => !group.items.some((item) => item.id === s.id)
+        );
+      } else {
+        const missing = group.items.filter(
+          (item) => !updated.some((s) => s.id === item.id)
+        );
+        updated = [...updated, ...missing];
+      }
+    }
+    setSelectedItems(updated);
+  }
+  function handleSimpleValueChange(newItems) {
+    setSelectedItems(newItems);
+  }
+  function removeItem(item, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedItems(value.filter((v) => v.id !== item.id));
+  }
+  function renderSentinelRow(row) {
+    if (isSelectAllSentinel2(row)) {
+      const totalCount = data.length;
+      const selectedCount = value.length;
+      const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
+      return /* @__PURE__ */ jsxs7(ComboboxSelectAllItem, { value: row, children: [
+        /* @__PURE__ */ jsx9(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+        "Select all"
+      ] }, "__selectAll");
+    }
+    if (isGroupHeaderSentinel2(row)) {
+      const group = groups?.find((g) => g.value === row.groupName);
+      const groupItemsList = group?.items ?? [];
+      const selectedCount = groupItemsList.filter(
+        (item2) => value.some((s) => s.id === item2.id)
+      ).length;
+      const state = selectedCount === 0 ? "none" : selectedCount === groupItemsList.length ? "all" : "partial";
+      return /* @__PURE__ */ jsxs7(ComboboxGroupHeaderItem, { value: row, children: [
+        /* @__PURE__ */ jsx9(
+          ComboboxGroupHeaderCheckbox,
+          {
+            $state: state,
+            id: `__header-${row.groupName}`
+          }
+        ),
+        renderGroupHeading ? renderGroupHeading(row.groupName) : row.groupName
+      ] }, `__header-${row.groupName}`);
+    }
+    const item = row;
+    return /* @__PURE__ */ jsx9(
+      ComboboxItem_default,
+      {
+        value: item,
+        itemId: String(item.id),
+        label: itemToString(item),
+        inputType,
+        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+      },
+      item.id
+    );
+  }
+  const rootItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  const hasSentinels = selectAll || selectHeadings;
+  const rootValue = hasSentinels ? [...value] : value;
+  return /* @__PURE__ */ jsxs7(Field, { children: [
+    /* @__PURE__ */ jsx9("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsxs7(
+      Combobox4.Root,
+      {
+        multiple: true,
+        id,
+        virtualized: isVirtualized,
+        open,
+        disabled: props.disabled,
+        onOpenChange: setOpen,
+        onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
+          const virt = virtualizerRef.current;
+          if (!item || !virt) return;
+          const isStart = index === 0;
+          const isEnd = index === virt.options.count - 1;
+          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+            queueMicrotask(() => {
+              virt.scrollToIndex(index, {
+                align: isEnd ? "start" : "end"
+              });
+            });
+          }
+        } : void 0,
+        value: rootValue,
+        onValueChange: (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          hasSentinels ? handleValueChange : handleSimpleValueChange
+        ),
+        itemToStringLabel: (item) => {
+          if (!item || isGroupHeaderSentinel2(item) || isSelectAllSentinel2(item))
+            return "";
+          return itemToString(item);
+        },
+        isItemEqualToValue: (a, b) => {
+          if (isGroupHeaderSentinel2(a) && isGroupHeaderSentinel2(b))
+            return a.groupName === b.groupName;
+          if (isSelectAllSentinel2(a) && isSelectAllSentinel2(b)) return true;
+          if (!isGroupHeaderSentinel2(a) && !isSelectAllSentinel2(a) && !isGroupHeaderSentinel2(b) && !isSelectAllSentinel2(b))
+            return a.id === b.id;
+          return false;
+        },
+        items: rootItems,
+        children: [
+          /* @__PURE__ */ jsx9(ComboboxTokenInputGroup, { children: /* @__PURE__ */ jsxs7(ComboboxToken, { children: [
+            renderSelection ? renderSelection(value) : (() => {
+              const visibleTokens = maxTokens != null ? value.slice(0, maxTokens) : value;
+              const overflow = maxTokens != null ? value.length - maxTokens : 0;
+              return /* @__PURE__ */ jsxs7(Fragment6, { children: [
+                visibleTokens.map((item) => /* @__PURE__ */ jsxs7(Token, { children: [
+                  renderToken ? renderToken(item) : itemToString(item),
+                  /* @__PURE__ */ jsx9(
+                    TokenRemove,
+                    {
+                      "aria-label": `Remove ${itemToString(item)}`,
+                      onPointerDown: (e) => e.preventDefault(),
+                      onClick: (e) => removeItem(item, e),
+                      children: /* @__PURE__ */ jsx9(Icon3, { name: "x-outline", size: "mini" })
+                    }
+                  )
+                ] }, item.id)),
+                overflow > 0 && /* @__PURE__ */ jsxs7(Token, { children: [
+                  "+",
+                  overflow
+                ] }, "__overflow")
+              ] });
+            })(),
+            /* @__PURE__ */ jsx9(
+              ComboboxTokenInput,
+              {
+                id,
+                placeholder: value.length > 0 ? "" : placeholder
+              }
+            ),
+            /* @__PURE__ */ jsxs7(ComboboxActionButtons, { children: [
+              /* @__PURE__ */ jsx9(ComboboxClear, { "aria-label": "Clear all", children: /* @__PURE__ */ jsx9(ClearIcon, {}) }),
+              /* @__PURE__ */ jsx9(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ jsx9(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ jsx9(ChevronIcon, {}) }) })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx9(Combobox4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx9(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs7(
+            ComboboxPopup,
+            {
+              "aria-busy": isLoading || void 0,
+              style: isVirtualized ? { display: "flex", flexDirection: "column" } : void 0,
+              children: [
+                /* @__PURE__ */ jsx9(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ jsx9(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ jsx9(
+                  ComboboxList,
+                  {
+                    style: isVirtualized ? {
+                      padding: 0,
+                      flex: 1,
+                      minHeight: 0,
+                      display: "flex",
+                      flexDirection: "column"
+                    } : void 0,
+                    children: isVirtualized ? /* @__PURE__ */ jsx9(
+                      VirtualizedComboboxList,
+                      {
+                        open,
+                        virtualizerRef,
+                        value,
+                        groups,
+                        data: visibleData,
+                        itemToString,
+                        inputType,
+                        renderItem,
+                        renderGroupHeading
+                      }
+                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => /* @__PURE__ */ jsxs7(React9.Fragment, { children: [
+                      /* @__PURE__ */ jsxs7(ComboboxGroup, { items: group.items, children: [
+                        /* @__PURE__ */ jsx9(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ jsx9(Combobox4.Collection, { children: (item) => /* @__PURE__ */ jsx9(
+                          ComboboxItem_default,
+                          {
+                            value: item,
+                            itemId: String(item.id),
+                            label: itemToString(item),
+                            inputType,
+                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                          },
+                          item.id
+                        ) })
+                      ] }),
+                      index < groups.length - 1 && /* @__PURE__ */ jsx9(ComboboxSeparator, {})
+                    ] }, group.value) : (item) => /* @__PURE__ */ jsx9(
+                      ComboboxItem_default,
+                      {
+                        value: item,
+                        itemId: String(item.id),
+                        label: itemToString(item),
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                      },
+                      item.id
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/SingleSearchableSelect.tsx
 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";
+function SingleSearchableSelect(props) {
+  const {
+    id,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    emptyText = "No results found.",
+    isLoading = false,
+    loadingText = "Loading..."
+  } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const inputType = isChildrenMode ? "icon" : props.inputType ?? "icon";
+  const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const groupBy = isChildrenMode ? void 0 : isVirtualized ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : isVirtualized ? void 0 : props.renderGroupHeading;
+  const children = isChildrenMode ? props.children : void 0;
+  const selectedItemId = props.selectedItemId;
+  const defaultSelectedItemId = props.defaultSelectedItemId;
+  const onSelectedItemIdChange = props.onSelectedItemIdChange;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React10.useState(false);
+  const virtualizerRef = React10.useRef(null);
+  const isControlled = selectedItemId !== void 0;
+  const idToItem = React10.useCallback(
+    (id2) => {
+      if (id2 == null) return null;
+      return data.find((d) => String(d.id) === String(id2)) ?? null;
+    },
+    [data]
+  );
+  const [internalValue, setInternalValue] = React10.useState(
+    () => idToItem(defaultSelectedItemId)
+  );
+  const value = isControlled ? idToItem(selectedItemId) : internalValue;
+  function handleValueChange(newItem) {
+    if (!isControlled) setInternalValue(newItem);
+    if (onSelectedItemIdChange) {
+      onSelectedItemIdChange(newItem ? newItem.id : null);
+    }
+  }
+  const groups = React10.useMemo(
+    () => groupBy ? groupItems(data, groupBy) : null,
+    [data, groupBy]
+  );
+  return /* @__PURE__ */ jsxs8(Field, { children: [
+    /* @__PURE__ */ jsx10("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsxs8(
+      Combobox5.Root,
+      {
+        id,
+        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),
+        virtualized: isVirtualized,
+        open,
+        onOpenChange: setOpen,
+        onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
+          const virt = virtualizerRef.current;
+          if (!item || !virt) return;
+          const isStart = index === 0;
+          const isEnd = index === virt.options.count - 1;
+          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+            queueMicrotask(() => {
+              virt.scrollToIndex(index, {
+                align: isEnd ? "start" : "end"
+              });
+            });
+          }
+        } : 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(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(
+            SearchableSelectPopup,
+            {
+              "aria-busy": isLoading || void 0,
+              style: { display: "flex", flexDirection: "column" },
+              children: [
+                /* @__PURE__ */ jsx10(SearchableSelectSearchContainer, { children: /* @__PURE__ */ jsx10(
+                  SearchableSelectInput,
+                  {
+                    placeholder: searchPlaceholder,
+                    autoFocus: true
+                  }
+                ) }),
+                /* @__PURE__ */ jsx10(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ jsx10(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ jsx10(
+                  SearchableSelectList,
+                  {
+                    style: isVirtualized ? {
+                      padding: 0,
+                      flex: 1,
+                      minHeight: 0,
+                      display: "flex",
+                      flexDirection: "column"
+                    } : void 0,
+                    children: isVirtualized ? /* @__PURE__ */ jsx10(
+                      VirtualizedComboboxList,
+                      {
+                        open,
+                        virtualizerRef,
+                        value,
+                        groups: null,
+                        data,
+                        itemToString,
+                        inputType,
+                        renderItem
+                      }
+                    ) : children ? children : groups ? (group, index) => /* @__PURE__ */ jsxs8(React10.Fragment, { children: [
+                      /* @__PURE__ */ jsxs8(ComboboxGroup, { items: group.items, children: [
+                        /* @__PURE__ */ jsx10(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ jsx10(Combobox5.Collection, { children: (item) => /* @__PURE__ */ jsx10(
+                          ComboboxItem_default,
+                          {
+                            value: item,
+                            itemId: String(item.id),
+                            label: itemToString(item),
+                            inputType,
+                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                          },
+                          item.id
+                        ) })
+                      ] }),
+                      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
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/v3/MultiSearchableSelect.tsx
 import * as React11 from "react";
@@ -763,6 +1851,295 @@ var SelectionText2 = styled7.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
+function makeGroupHeaderSentinel2(groupName) {
+  return { __groupHeader: true, groupName };
+}
+function isGroupHeaderSentinel3(v) {
+  return typeof v === "object" && v !== null && "__groupHeader" in v;
+}
+var SELECT_ALL_SENTINEL2 = { __selectAll: true };
+function isSelectAllSentinel3(v) {
+  return typeof v === "object" && v !== null && "__selectAll" in v;
+}
+function MultiSearchableSelect(props) {
+  const {
+    id,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    emptyText = "No results found.",
+    isLoading = false,
+    loadingText = "Loading..."
+  } = props;
+  const isChildrenMode = "children" in props && props.children != null;
+  const data = isChildrenMode ? [] : props.data;
+  const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
+  const renderItem = isChildrenMode ? void 0 : props.renderItem;
+  const customRenderSelections = isChildrenMode ? void 0 : props.customRenderSelections;
+  const maxSelections = isChildrenMode ? void 0 : props.maxSelections;
+  const renderSelection = isChildrenMode ? void 0 : props.renderSelection;
+  const removeSelectedItems = isChildrenMode ? false : props.removeSelectedItems ?? false;
+  const inputType = isChildrenMode ? "checkbox" : removeSelectedItems ? "none" : props.inputType ?? "checkbox";
+  const groupBy = isChildrenMode ? void 0 : props.groupBy;
+  const renderGroupHeading = isChildrenMode ? void 0 : props.renderGroupHeading;
+  const selectHeadings = isChildrenMode ? false : props.selectHeadings ?? false;
+  const selectAll = isChildrenMode ? false : props.selectAll ?? false;
+  const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const children = isChildrenMode ? props.children : void 0;
+  const selectedItemIds = props.selectedItemIds;
+  const defaultSelectedItemIds = props.defaultSelectedItemIds;
+  const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React11.useState(false);
+  const virtualizerRef = React11.useRef(null);
+  const isControlled = selectedItemIds !== void 0;
+  const idsToItems = React11.useCallback(
+    (ids) => ids.map((id2) => data.find((d) => d.id === id2)).filter((d) => d != null),
+    [data]
+  );
+  const [internalValue, setInternalValue] = React11.useState(
+    () => defaultSelectedItemIds ? idsToItems(defaultSelectedItemIds) : []
+  );
+  const value = isControlled ? idsToItems(selectedItemIds) : internalValue;
+  const visibleData = React11.useMemo(
+    () => removeSelectedItems ? data.filter((item) => !value.some((v) => v.id === item.id)) : data,
+    [data, value, removeSelectedItems]
+  );
+  const groups = React11.useMemo(
+    () => groupBy ? groupItems(visibleData, groupBy) : null,
+    [visibleData, groupBy]
+  );
+  const flatItems = React11.useMemo(() => {
+    if (!groups || !selectHeadings && !selectAll) return null;
+    const rows = [];
+    if (selectAll) rows.push(SELECT_ALL_SENTINEL2);
+    for (const group of groups) {
+      rows.push(makeGroupHeaderSentinel2(group.value));
+      rows.push(...group.items);
+    }
+    return rows;
+  }, [groups, selectHeadings, selectAll]);
+  function setSelectedItems(items) {
+    if (!isControlled) setInternalValue(items);
+    if (onSelectedItemIdsChange)
+      onSelectedItemIdsChange(items.map((item) => item.id));
+  }
+  function handleValueChange(next) {
+    const selectAllClicked = next.filter(isSelectAllSentinel3);
+    const groupSentinels = next.filter(isGroupHeaderSentinel3);
+    const realItems = next.filter(
+      (v) => !isGroupHeaderSentinel3(v) && !isSelectAllSentinel3(v)
+    );
+    if (selectAllClicked.length > 0) {
+      const allSelected = data.every(
+        (d) => realItems.some((s) => s.id === d.id)
+      );
+      setSelectedItems(allSelected ? [] : [...data]);
+      return;
+    }
+    if (groupSentinels.length === 0) {
+      setSelectedItems(realItems);
+      return;
+    }
+    let updated = [...realItems];
+    for (const sentinel of groupSentinels) {
+      const group = groups?.find((g) => g.value === sentinel.groupName);
+      if (!group) continue;
+      const allSelected = group.items.every(
+        (item) => updated.some((s) => s.id === item.id)
+      );
+      if (allSelected) {
+        updated = updated.filter(
+          (s) => !group.items.some((item) => item.id === s.id)
+        );
+      } else {
+        const missing = group.items.filter(
+          (item) => !updated.some((s) => s.id === item.id)
+        );
+        updated = [...updated, ...missing];
+      }
+    }
+    setSelectedItems(updated);
+  }
+  function handleSimpleValueChange(newItems) {
+    setSelectedItems(newItems);
+  }
+  function renderSentinelRow(row) {
+    if (isSelectAllSentinel3(row)) {
+      const totalCount = data.length;
+      const selectedCount = value.length;
+      const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
+      return /* @__PURE__ */ jsxs9(ComboboxSelectAllItem, { value: row, children: [
+        /* @__PURE__ */ jsx11(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
+        "Select all"
+      ] }, "__selectAll");
+    }
+    if (isGroupHeaderSentinel3(row)) {
+      const group = groups?.find((g) => g.value === row.groupName);
+      const groupItemsList = group?.items ?? [];
+      const selectedCount = groupItemsList.filter(
+        (item2) => value.some((s) => s.id === item2.id)
+      ).length;
+      const state = selectedCount === 0 ? "none" : selectedCount === groupItemsList.length ? "all" : "partial";
+      return /* @__PURE__ */ jsxs9(ComboboxGroupHeaderItem, { value: row, children: [
+        /* @__PURE__ */ jsx11(
+          ComboboxGroupHeaderCheckbox,
+          {
+            $state: state,
+            id: `__header-${row.groupName}`
+          }
+        ),
+        renderGroupHeading ? renderGroupHeading(row.groupName) : row.groupName
+      ] }, `__header-${row.groupName}`);
+    }
+    const item = row;
+    return /* @__PURE__ */ jsx11(
+      ComboboxItem_default,
+      {
+        value: item,
+        itemId: String(item.id),
+        label: itemToString(item),
+        inputType,
+        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+      },
+      item.id
+    );
+  }
+  const rootItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  const hasSentinels = selectAll || selectHeadings;
+  const rootValue = hasSentinels ? [...value] : value;
+  return /* @__PURE__ */ jsxs9(Field, { children: [
+    /* @__PURE__ */ jsx11("div", { ref: containerRef, style: { position: "relative" } }),
+    /* @__PURE__ */ jsxs9(
+      Combobox6.Root,
+      {
+        multiple: true,
+        id,
+        virtualized: isVirtualized,
+        open,
+        disabled: props.disabled,
+        onOpenChange: setOpen,
+        onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
+          const virt = virtualizerRef.current;
+          if (!item || !virt) return;
+          const isStart = index === 0;
+          const isEnd = index === virt.options.count - 1;
+          if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) {
+            queueMicrotask(() => {
+              virt.scrollToIndex(index, {
+                align: isEnd ? "start" : "end"
+              });
+            });
+          }
+        } : void 0,
+        value: rootValue,
+        onValueChange: (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          hasSentinels ? handleValueChange : handleSimpleValueChange
+        ),
+        itemToStringLabel: (item) => {
+          if (!item || isGroupHeaderSentinel3(item) || isSelectAllSentinel3(item))
+            return "";
+          return itemToString(item);
+        },
+        isItemEqualToValue: (a, b) => {
+          if (isGroupHeaderSentinel3(a) && isGroupHeaderSentinel3(b))
+            return a.groupName === b.groupName;
+          if (isSelectAllSentinel3(a) && isSelectAllSentinel3(b)) return true;
+          if (!isGroupHeaderSentinel3(a) && !isSelectAllSentinel3(a) && !isGroupHeaderSentinel3(b) && !isSelectAllSentinel3(b))
+            return a.id === b.id;
+          return false;
+        },
+        items: rootItems,
+        children: [
+          /* @__PURE__ */ jsxs9(SearchableSelectTokenTrigger, { id, children: [
+            renderSelection ? renderSelection(value) : value.length > 0 ? (() => {
+              const visibleItems = maxSelections != null ? value.slice(0, maxSelections) : value;
+              const overflowCount = maxSelections != null && value.length > maxSelections ? value.length - maxSelections : 0;
+              const text = visibleItems.map(
+                (item) => customRenderSelections ? customRenderSelections(item) : itemToString(item)
+              ).join(", ");
+              return /* @__PURE__ */ jsxs9(SelectionText2, { children: [
+                text,
+                overflowCount > 0 ? `, +${overflowCount}` : ""
+              ] });
+            })() : /* @__PURE__ */ jsx11(SearchableSelectPlaceholder, { children: placeholder }),
+            /* @__PURE__ */ jsx11(SearchableSelectTriggerIcon, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx11(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ jsx11(ChevronIcon, {}) }) })
+          ] }),
+          /* @__PURE__ */ jsx11(Combobox6.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx11(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ jsxs9(
+            SearchableSelectPopup,
+            {
+              "aria-busy": isLoading || void 0,
+              style: { display: "flex", flexDirection: "column" },
+              children: [
+                /* @__PURE__ */ jsx11(SearchableSelectSearchContainer, { children: /* @__PURE__ */ jsx11(
+                  SearchableSelectInput,
+                  {
+                    placeholder: searchPlaceholder,
+                    autoFocus: true
+                  }
+                ) }),
+                /* @__PURE__ */ jsx11(ComboboxStatus, { children: isLoading ? loadingText : null }),
+                /* @__PURE__ */ jsx11(ComboboxEmpty, { children: isLoading ? null : emptyText }),
+                /* @__PURE__ */ jsx11(
+                  SearchableSelectList,
+                  {
+                    style: isVirtualized ? {
+                      padding: 0,
+                      flex: 1,
+                      minHeight: 0,
+                      display: "flex",
+                      flexDirection: "column"
+                    } : void 0,
+                    children: isVirtualized ? /* @__PURE__ */ jsx11(
+                      VirtualizedComboboxList,
+                      {
+                        open,
+                        virtualizerRef,
+                        value,
+                        groups,
+                        data: visibleData,
+                        itemToString,
+                        inputType,
+                        renderItem,
+                        renderGroupHeading
+                      }
+                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => /* @__PURE__ */ jsxs9(React11.Fragment, { children: [
+                      /* @__PURE__ */ jsxs9(ComboboxGroup, { items: group.items, children: [
+                        /* @__PURE__ */ jsx11(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                        /* @__PURE__ */ jsx11(Combobox6.Collection, { children: (item) => /* @__PURE__ */ jsx11(
+                          ComboboxItem_default,
+                          {
+                            value: item,
+                            itemId: String(item.id),
+                            label: itemToString(item),
+                            inputType,
+                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                          },
+                          item.id
+                        ) })
+                      ] }),
+                      index < groups.length - 1 && /* @__PURE__ */ jsx11(ComboboxSeparator, {})
+                    ] }, group.value) : (item) => /* @__PURE__ */ jsx11(
+                      ComboboxItem_default,
+                      {
+                        value: item,
+                        itemId: String(item.id),
+                        label: itemToString(item),
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                      },
+                      item.id
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ]
+      }
+    )
+  ] });
+}
 export {
   ComboboxActionButtons,
   ComboboxClear,
@@ -786,6 +2163,9 @@ export {
   ComboboxTokenInput,
   ComboboxTokenInputGroup,
   ComboboxTrigger,
+  MultiCombobox,
+  MultiSearchableSelect,
+  MultiSelect,
   SearchableSelectInput,
   SearchableSelectList,
   SearchableSelectPlaceholder,
@@ -794,6 +2174,9 @@ export {
   SearchableSelectTokenTrigger,
   SearchableSelectTrigger,
   SearchableSelectTriggerIcon,
+  SingleCombobox,
+  SingleSearchableSelect,
+  SingleSelect,
   Token,
   TokenRemove
 };