@sproutsocial/seeds-react-menu 1.12.0 → 1.12.2

package/dist/v3/index.d.mts

@@ -13,6 +13,7 @@ interface SingleSelectBaseProps {
     placeholder?: string;
     includePlaceholderItem?: boolean;
     disabled?: boolean;
+    "aria-describedby"?: string;
 }
 interface SingleSelectDataProps<T extends DataWithId> extends SingleSelectBaseProps {
     data: T[];
@@ -47,6 +48,7 @@ interface MultiSelectBaseProps {
     id?: string;
     placeholder?: string;
     disabled?: boolean;
+    "aria-describedby"?: string;
 }
 interface MultiSelectDataProps<T extends DataWithId> extends MultiSelectBaseProps {
     data: T[];
@@ -89,6 +91,7 @@ interface SingleComboboxBaseProps {
     emptyText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-describedby"?: string;
 }
 interface SingleComboboxDataBaseProps<T extends DataWithId> extends SingleComboboxBaseProps {
     data: T[];
@@ -134,6 +137,9 @@ interface MultiComboboxBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    inputValue?: string;
+    onInputValueChange?: (value: string) => void;
+    "aria-describedby"?: string;
 }
 interface MultiComboboxDataProps<T extends DataWithId> extends MultiComboboxBaseProps {
     data: T[];
@@ -148,10 +154,12 @@ interface MultiComboboxDataProps<T extends DataWithId> extends MultiComboboxBase
     groupBy?: (item: T) => string;
     renderGroupHeading?: (label: string) => react.ReactNode;
     selectHeadings?: boolean;
-    selectAll?: boolean;
+    selectAll?: boolean | string;
     isVirtualized?: boolean;
     removeSelectedItems?: boolean;
     maxTokens?: number;
+    creatable?: boolean;
+    onCreate?: (value: string) => T;
     children?: never;
 }
 interface MultiComboboxChildrenProps extends MultiComboboxBaseProps {
@@ -170,6 +178,8 @@ interface MultiComboboxChildrenProps extends MultiComboboxBaseProps {
     selectHeadings?: never;
     selectAll?: never;
     removeSelectedItems?: never;
+    creatable?: never;
+    onCreate?: never;
 }
 type MultiComboboxProps<T extends DataWithId> = MultiComboboxDataProps<T> | MultiComboboxChildrenProps;
 declare function MultiCombobox<T extends DataWithId>(props: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
@@ -184,6 +194,7 @@ interface SingleSearchableSelectBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-describedby"?: string;
 }
 interface SingleSearchableSelectDataBaseProps<T extends DataWithId> extends SingleSearchableSelectBaseProps {
     data: T[];
@@ -232,6 +243,7 @@ interface MultiSearchableSelectBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-describedby"?: string;
 }
 interface MultiSearchableSelectDataProps<T extends DataWithId> extends MultiSearchableSelectBaseProps {
     data: T[];

package/dist/v3/index.d.ts

@@ -13,6 +13,7 @@ interface SingleSelectBaseProps {
     placeholder?: string;
     includePlaceholderItem?: boolean;
     disabled?: boolean;
+    "aria-describedby"?: string;
 }
 interface SingleSelectDataProps<T extends DataWithId> extends SingleSelectBaseProps {
     data: T[];
@@ -47,6 +48,7 @@ interface MultiSelectBaseProps {
     id?: string;
     placeholder?: string;
     disabled?: boolean;
+    "aria-describedby"?: string;
 }
 interface MultiSelectDataProps<T extends DataWithId> extends MultiSelectBaseProps {
     data: T[];
@@ -89,6 +91,7 @@ interface SingleComboboxBaseProps {
     emptyText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-describedby"?: string;
 }
 interface SingleComboboxDataBaseProps<T extends DataWithId> extends SingleComboboxBaseProps {
     data: T[];
@@ -134,6 +137,9 @@ interface MultiComboboxBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    inputValue?: string;
+    onInputValueChange?: (value: string) => void;
+    "aria-describedby"?: string;
 }
 interface MultiComboboxDataProps<T extends DataWithId> extends MultiComboboxBaseProps {
     data: T[];
@@ -148,10 +154,12 @@ interface MultiComboboxDataProps<T extends DataWithId> extends MultiComboboxBase
     groupBy?: (item: T) => string;
     renderGroupHeading?: (label: string) => react.ReactNode;
     selectHeadings?: boolean;
-    selectAll?: boolean;
+    selectAll?: boolean | string;
     isVirtualized?: boolean;
     removeSelectedItems?: boolean;
     maxTokens?: number;
+    creatable?: boolean;
+    onCreate?: (value: string) => T;
     children?: never;
 }
 interface MultiComboboxChildrenProps extends MultiComboboxBaseProps {
@@ -170,6 +178,8 @@ interface MultiComboboxChildrenProps extends MultiComboboxBaseProps {
     selectHeadings?: never;
     selectAll?: never;
     removeSelectedItems?: never;
+    creatable?: never;
+    onCreate?: never;
 }
 type MultiComboboxProps<T extends DataWithId> = MultiComboboxDataProps<T> | MultiComboboxChildrenProps;
 declare function MultiCombobox<T extends DataWithId>(props: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
@@ -184,6 +194,7 @@ interface SingleSearchableSelectBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-describedby"?: string;
 }
 interface SingleSearchableSelectDataBaseProps<T extends DataWithId> extends SingleSearchableSelectBaseProps {
     data: T[];
@@ -232,6 +243,7 @@ interface MultiSearchableSelectBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-describedby"?: string;
 }
 interface MultiSearchableSelectDataProps<T extends DataWithId> extends MultiSearchableSelectBaseProps {
     data: T[];

package/dist/v3/index.js

@@ -364,6 +364,7 @@ var StyledValue = (0, import_styled_components4.default)(import_select3.Select.V
 `;
 function SingleSelect(props) {
   const { id, placeholder, includePlaceholderItem } = props;
+  const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const selectedItemId = props.selectedItemId;
   const defaultSelectedItemId = props.defaultSelectedItemId;
@@ -421,7 +422,7 @@ function SingleSelect(props) {
         onValueChange: handleValueChange,
         id,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectTrigger, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectTrigger, { "aria-describedby": ariaDescribedBy, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledValue, { placeholder, children: renderSelection && selectedItem ? renderSelection(selectedItem) : void 0 }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronIcon, {}) }) })
           ] }),
@@ -493,6 +494,7 @@ var Placeholder = import_styled_components5.default.div`
 `;
 function MultiSelect(props) {
   const { id, placeholder = "Select..." } = props;
+  const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? () => "" : props.itemToString;
@@ -549,7 +551,7 @@ function MultiSelect(props) {
         disabled: props.disabled,
         id,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectTrigger, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectTrigger, { "aria-describedby": ariaDescribedBy, children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectValue, { children: () => {
               if (renderSelection) return renderSelection(selectedItems);
               if (selectedItems.length === 0)
@@ -1160,6 +1162,12 @@ function makePlaceholderSentinel(label) {
 function isPlaceholderSentinel(v) {
   return typeof v === "object" && v !== null && "__placeholder" in v;
 }
+function makeCreatableSentinel(label) {
+  return { __creatable: true, label };
+}
+function isCreatableSentinel(v) {
+  return typeof v === "object" && v !== null && "__creatable" in v;
+}
 
 // src/v3/Common/VirtualizedComboboxList.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -1179,7 +1187,8 @@ function VirtualizedComboboxList({
   itemToString,
   inputType,
   renderItem,
-  renderGroupHeading
+  renderGroupHeading,
+  renderCreatableItem
 }) {
   const filteredItems = import_combobox2.Combobox.useFilteredItems();
   const scrollElementRef = React7.useRef(null);
@@ -1297,6 +1306,17 @@ function VirtualizedComboboxList({
                 virtualItem.key
               );
             }
+            if (isCreatableSentinel(row)) {
+              if (renderCreatableItem) {
+                return renderCreatableItem(
+                  row,
+                  baseStyle,
+                  virtualItem.index,
+                  virtualizer.measureElement
+                );
+              }
+              return null;
+            }
             const item = row;
             return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               ComboboxItem_default,
@@ -1330,6 +1350,7 @@ function SingleCombobox(props) {
     emptyText = "No results found.",
     filter
   } = props;
+  const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
@@ -1400,7 +1421,14 @@ function SingleCombobox(props) {
         } : void 0,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComboboxInputGroup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxInput, { placeholder, id }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              ComboboxInput,
+              {
+                placeholder,
+                id,
+                "aria-describedby": ariaDescribedBy
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ComboboxActionButtons, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxClear, { "aria-label": "Clear selection", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ClearIcon, {}) }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComboboxTrigger, { "aria-label": "Open popup", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledChevron, { $isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronIcon, {}) }) })
@@ -1498,8 +1526,11 @@ function MultiCombobox(props) {
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
-    filter
+    filter,
+    inputValue,
+    onInputValueChange
   } = props;
+  const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
@@ -1512,14 +1543,20 @@ function MultiCombobox(props) {
   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 selectAllProp = isChildrenMode ? false : props.selectAll ?? false;
+  const selectAll = Boolean(selectAllProp);
+  const selectAllLabel = typeof selectAllProp === "string" ? selectAllProp : "Select all";
   const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const creatableProp = isChildrenMode ? false : props.creatable ?? false;
+  const onCreateProp = isChildrenMode ? void 0 : props.onCreate;
   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 [internalInputValue, setInternalInputValue] = React9.useState("");
+  const skipNextInputChangeRef = React9.useRef(false);
   const virtualizerRef = React9.useRef(null);
   const isControlled = selectedItemIds !== void 0;
   const idsToItems = React9.useCallback(
@@ -1538,22 +1575,51 @@ function MultiCombobox(props) {
     () => groupBy ? groupItems(visibleData, groupBy) : null,
     [visibleData, groupBy]
   );
+  const currentInputValue = inputValue ?? internalInputValue;
+  const creatableSentinel = React9.useMemo(() => {
+    if (!creatableProp) return null;
+    const trimmed = currentInputValue.trim();
+    if (!trimmed) return null;
+    const lowered = trimmed.toLocaleLowerCase();
+    const exactExists = data.some(
+      (d) => itemToString(d).trim().toLocaleLowerCase() === lowered
+    );
+    if (exactExists) return null;
+    return makeCreatableSentinel(trimmed);
+  }, [creatableProp, currentInputValue, data, itemToString]);
   const flatItems = React9.useMemo(() => {
-    if (!groups || !selectHeadings && !selectAll) return null;
+    if (!selectHeadings && !selectAll) return null;
+    if (!groups && !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);
+    if (groups) {
+      for (const group of groups) {
+        rows.push(makeGroupHeaderSentinel(group.value));
+        rows.push(...group.items);
+      }
+    } else {
+      rows.push(...visibleData);
     }
     return rows;
-  }, [groups, selectHeadings, selectAll]);
+  }, [groups, visibleData, selectHeadings, selectAll]);
   function setSelectedItems(items) {
     if (!isControlled) setInternalValue(items);
     if (onSelectedItemIdsChange)
       onSelectedItemIdsChange(items.map((item) => item.id));
   }
   function handleValueChange(next) {
+    const creatableClicked = next.find(isCreatableSentinel);
+    if (creatableClicked) {
+      const newItem = onCreateProp?.(creatableClicked.label);
+      const realItems2 = next.filter(
+        (v) => !isGroupHeaderSentinel2(v) && !isSelectAllSentinel2(v) && !isCreatableSentinel(v)
+      );
+      setSelectedItems(newItem ? [...realItems2, newItem] : realItems2);
+      skipNextInputChangeRef.current = true;
+      setInternalInputValue("");
+      onInputValueChange?.("");
+      return;
+    }
     const selectAllClicked = next.filter(isSelectAllSentinel2);
     const groupSentinels = next.filter(isGroupHeaderSentinel2);
     const realItems = next.filter(
@@ -1591,6 +1657,16 @@ function MultiCombobox(props) {
     setSelectedItems(updated);
   }
   function handleSimpleValueChange(newItems) {
+    const creatableClicked = newItems.find(isCreatableSentinel);
+    if (creatableClicked) {
+      const newItem = onCreateProp?.(creatableClicked.label);
+      const realItems = newItems.filter((v) => !isCreatableSentinel(v));
+      setSelectedItems(newItem ? [...realItems, newItem] : realItems);
+      skipNextInputChangeRef.current = true;
+      setInternalInputValue("");
+      onInputValueChange?.("");
+      return;
+    }
     setSelectedItems(newItems);
   }
   function removeItem(item, e) {
@@ -1605,7 +1681,7 @@ function MultiCombobox(props) {
       const state = selectedCount === 0 ? "none" : selectedCount === totalCount ? "all" : "partial";
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxSelectAllItem, { value: row, children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxGroupHeaderCheckbox, { $state: state, id: "__selectAll" }),
-        "Select all"
+        selectAllLabel
       ] }, "__selectAll");
     }
     if (isGroupHeaderSentinel2(row)) {
@@ -1626,6 +1702,9 @@ function MultiCombobox(props) {
         renderGroupHeading ? renderGroupHeading(row.groupName) : row.groupName
       ] }, `__header-${row.groupName}`);
     }
+    if (isCreatableSentinel(row)) {
+      return renderCreatableItem(row);
+    }
     const item = row;
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ComboboxItem_default,
@@ -1640,7 +1719,28 @@ function MultiCombobox(props) {
       item.id
     );
   }
-  const rootItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  function renderCreatableItem(sentinel, style, index, measureRef) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ComboboxItem_default,
+      {
+        value: sentinel,
+        itemId: "__creatable",
+        label: `Create "${sentinel.label}"`,
+        inputType: "none",
+        renderItem: () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_seeds_react_icon3.default, { name: "plus-outline", size: "mini" }),
+          `Create "${sentinel.label}"`
+        ] }),
+        style,
+        index,
+        "data-index": index,
+        ref: measureRef
+      },
+      "__creatable"
+    );
+  }
+  const baseItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { children: [
@@ -1653,8 +1753,27 @@ function MultiCombobox(props) {
         virtualized: isVirtualized,
         open,
         disabled: props.disabled,
-        onOpenChange: setOpen,
-        filter,
+        onOpenChange: (nextOpen, eventDetails) => {
+          if (!nextOpen && eventDetails.reason === "item-press") return;
+          setOpen(nextOpen);
+        },
+        filter: creatableProp ? (item, query) => {
+          if (isCreatableSentinel(item)) return true;
+          if (filter) return filter(item, query);
+          if (isGroupHeaderSentinel2(item) || isSelectAllSentinel2(item))
+            return true;
+          const label = itemToString(item);
+          return label.toLowerCase().includes(query.toLowerCase());
+        } : filter,
+        inputValue: creatableProp ? currentInputValue : inputValue,
+        onInputValueChange: creatableProp ? (v) => {
+          if (skipNextInputChangeRef.current) {
+            skipNextInputChangeRef.current = false;
+            return;
+          }
+          setInternalInputValue(v);
+          onInputValueChange?.(v);
+        } : onInputValueChange,
         onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
           const virt = virtualizerRef.current;
           if (!item || !virt) return;
@@ -1674,15 +1793,17 @@ function MultiCombobox(props) {
           hasSentinels ? handleValueChange : handleSimpleValueChange
         ),
         itemToStringLabel: (item) => {
-          if (!item || isGroupHeaderSentinel2(item) || isSelectAllSentinel2(item))
+          if (!item || isGroupHeaderSentinel2(item) || isSelectAllSentinel2(item) || isCreatableSentinel(item))
             return "";
           return itemToString(item);
         },
         isItemEqualToValue: (a, b) => {
+          if (isCreatableSentinel(a) && isCreatableSentinel(b))
+            return a.label === b.label;
           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))
+          if (!isGroupHeaderSentinel2(a) && !isSelectAllSentinel2(a) && !isCreatableSentinel(a) && !isGroupHeaderSentinel2(b) && !isSelectAllSentinel2(b) && !isCreatableSentinel(b))
             return a.id === b.id;
           return false;
         },
@@ -1715,7 +1836,8 @@ function MultiCombobox(props) {
               ComboboxTokenInput,
               {
                 id,
-                placeholder: value.length > 0 ? "" : placeholder
+                placeholder: value.length > 0 ? "" : placeholder,
+                "aria-describedby": ariaDescribedBy
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxActionButtons, { children: [
@@ -1752,37 +1874,55 @@ function MultiCombobox(props) {
                         itemToString,
                         inputType,
                         renderItem,
-                        renderGroupHeading
+                        renderGroupHeading,
+                        renderCreatableItem: creatableProp ? (sentinel, style, index, measureRef) => renderCreatableItem(
+                          sentinel,
+                          style,
+                          index,
+                          measureRef
+                        ) : void 0
                       }
-                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React9.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxGroup, { items: group.items, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_combobox4.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                          ComboboxItem_default,
-                          {
-                            value: item,
-                            itemId: String(item.id),
-                            label: itemToString(item),
-                            disabled: item.disabled,
-                            inputType,
-                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                          },
-                          item.id
-                        ) })
-                      ] }),
-                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxSeparator, {})
-                    ] }, group.value) : (item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      ComboboxItem_default,
-                      {
-                        value: item,
-                        itemId: String(item.id),
-                        label: itemToString(item),
-                        disabled: item.disabled,
-                        inputType,
-                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                      },
-                      item.id
-                    )
+                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => {
+                      if (isCreatableSentinel(group)) {
+                        return renderCreatableItem(group);
+                      }
+                      const g = group;
+                      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React9.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ComboboxGroup, { items: g.items, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_combobox4.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            ComboboxItem_default,
+                            {
+                              value: item,
+                              itemId: String(item.id),
+                              label: itemToString(item),
+                              disabled: item.disabled,
+                              inputType,
+                              renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                            },
+                            item.id
+                          ) })
+                        ] }),
+                        index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComboboxSeparator, {})
+                      ] }, g.value);
+                    } : (item) => {
+                      if (isCreatableSentinel(item)) {
+                        return renderCreatableItem(item);
+                      }
+                      const dataItem = item;
+                      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        ComboboxItem_default,
+                        {
+                          value: dataItem,
+                          itemId: String(dataItem.id),
+                          label: itemToString(dataItem),
+                          disabled: dataItem.disabled,
+                          inputType,
+                          renderItem: renderItem ? () => renderItem(dataItem) : () => itemToString(dataItem)
+                        },
+                        dataItem.id
+                      );
+                    }
                   }
                 )
               ]
@@ -1810,6 +1950,7 @@ function SingleSearchableSelect(props) {
     loadingText = "Loading...",
     filter
   } = props;
+  const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
@@ -1884,7 +2025,7 @@ function SingleSearchableSelect(props) {
           }
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SearchableSelectTrigger, { id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SearchableSelectTrigger, { id, "aria-describedby": ariaDescribedBy, 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) : 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, {}) }) })
           ] }),
@@ -2009,6 +2150,7 @@ function MultiSearchableSelect(props) {
     loadingText = "Loading...",
     filter
   } = props;
+  const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
   const itemToString = isChildrenMode ? (_item) => "" : props.itemToString;
@@ -2192,20 +2334,27 @@ function MultiSearchableSelect(props) {
         },
         items: rootItems,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(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__ */ (0, import_jsx_runtime11.jsxs)(SelectionText2, { children: [
-                text,
-                overflowCount > 0 ? `, +${overflowCount}` : ""
-              ] });
-            })() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectPlaceholder, { children: placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectTriggerIcon, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronIcon, {}) }) })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            SearchableSelectTokenTrigger,
+            {
+              id,
+              "aria-describedby": ariaDescribedBy,
+              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__ */ (0, import_jsx_runtime11.jsxs)(SelectionText2, { children: [
+                    text,
+                    overflowCount > 0 ? `, +${overflowCount}` : ""
+                  ] });
+                })() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectPlaceholder, { children: placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchableSelectTriggerIcon, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledChevron, { "data-chevron": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronIcon, {}) }) })
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox6.Combobox.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxPositioner, { sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             SearchableSelectPopup,
             {