@sproutsocial/seeds-react-menu 1.16.16 → 1.17.0

package/dist/v3/index.d.mts

@@ -15,6 +15,9 @@ interface SingleSelectBaseProps {
     placeholder?: string;
     includePlaceholderItem?: boolean;
     disabled?: boolean;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -53,6 +56,9 @@ interface MultiSelectBaseProps {
     id?: string;
     placeholder?: string;
     disabled?: boolean;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -99,6 +105,9 @@ interface SingleComboboxBaseProps {
     emptyText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -150,6 +159,9 @@ interface MultiComboboxBaseProps {
     filter?: ((item: unknown, query: string) => boolean) | null;
     inputValue?: string;
     onInputValueChange?: (value: string) => void;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -210,6 +222,9 @@ interface SingleSearchableSelectBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -262,6 +277,9 @@ interface MultiSearchableSelectBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;

package/dist/v3/index.d.ts

@@ -15,6 +15,9 @@ interface SingleSelectBaseProps {
     placeholder?: string;
     includePlaceholderItem?: boolean;
     disabled?: boolean;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -53,6 +56,9 @@ interface MultiSelectBaseProps {
     id?: string;
     placeholder?: string;
     disabled?: boolean;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -99,6 +105,9 @@ interface SingleComboboxBaseProps {
     emptyText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -150,6 +159,9 @@ interface MultiComboboxBaseProps {
     filter?: ((item: unknown, query: string) => boolean) | null;
     inputValue?: string;
     onInputValueChange?: (value: string) => void;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -210,6 +222,9 @@ interface SingleSearchableSelectBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;
@@ -262,6 +277,9 @@ interface MultiSearchableSelectBaseProps {
     loadingText?: string;
     disabled?: boolean;
     filter?: ((item: unknown, query: string) => boolean) | null;
+    "aria-label"?: string;
+    /** Id of a visible label. Preferred over `aria-label`. */
+    "aria-labelledby"?: string;
     "aria-describedby"?: string;
     isInvalid?: boolean;
     required?: boolean;

package/dist/v3/index.js

@@ -387,6 +387,8 @@ var StyledValue = (0, import_styled_components4.default)(import_select3.Select.V
 function SingleSelect(props) {
   const { id, placeholder, includePlaceholderItem, fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const selectedItemId = props.selectedItemId;
@@ -460,43 +462,50 @@ function SingleSelect(props) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectPopup, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.ScrollUpArrow, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React4.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectGroup, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  SelectItem,
-                  {
-                    value: String(item.id),
-                    label: itemToString(item),
-                    disabled: item.disabled,
-                    inputType,
-                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                  },
-                  item.id
-                ))
-              ] }),
-              index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectSeparator, {})
-            ] }, group.value)) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                SelectItem,
-                {
-                  value: null,
-                  label: placeholder ?? ""
-                },
-                "placeholder"
-              ),
-              data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                SelectItem,
-                {
-                  value: String(item.id),
-                  label: itemToString(item),
-                  disabled: item.disabled,
-                  inputType,
-                  renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                },
-                item.id
-              ))
-            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_select3.Select.List,
+              {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React4.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectGroup, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                    group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      SelectItem,
+                      {
+                        value: String(item.id),
+                        label: itemToString(item),
+                        disabled: item.disabled,
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                      },
+                      item.id
+                    ))
+                  ] }),
+                  index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectSeparator, {})
+                ] }, group.value)) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                  includePlaceholderItem && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    SelectItem,
+                    {
+                      value: null,
+                      label: placeholder ?? ""
+                    },
+                    "placeholder"
+                  ),
+                  data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    SelectItem,
+                    {
+                      value: String(item.id),
+                      label: itemToString(item),
+                      disabled: item.disabled,
+                      inputType,
+                      renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                    },
+                    item.id
+                  ))
+                ] })
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select3.Select.ScrollDownArrow, {})
           ] }) }) })
         ]
@@ -527,6 +536,8 @@ var Placeholder = import_styled_components5.default.div`
 function MultiSelect(props) {
   const { id, placeholder = "Select...", fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -612,10 +623,29 @@ function MultiSelect(props) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectPopup, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.ScrollUpArrow, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(React5.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectGroup, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_select4.Select.List,
+              {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(React5.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectGroup, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                    group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      SelectItem,
+                      {
+                        value: String(item.id),
+                        label: itemToString(item),
+                        disabled: item.disabled,
+                        inputType,
+                        hidden: removeSelectedItems && value.includes(String(item.id)),
+                        renderItem: renderItem ? () => renderItem(item) : void 0
+                      },
+                      item.id
+                    ))
+                  ] }),
+                  index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectSeparator, {})
+                ] }, group.value)) : data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   SelectItem,
                   {
                     value: String(item.id),
@@ -623,24 +653,12 @@ function MultiSelect(props) {
                     disabled: item.disabled,
                     inputType,
                     hidden: removeSelectedItems && value.includes(String(item.id)),
-                    renderItem: renderItem ? () => renderItem(item) : void 0
+                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                   },
                   item.id
                 ))
-              ] }),
-              index < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectSeparator, {})
-            ] }, group.value)) : data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              SelectItem,
-              {
-                value: String(item.id),
-                label: itemToString(item),
-                disabled: item.disabled,
-                inputType,
-                hidden: removeSelectedItems && value.includes(String(item.id)),
-                renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-              },
-              item.id
-            )) }),
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_select4.Select.ScrollDownArrow, {})
           ] }) }) })
         ]
@@ -1439,6 +1457,8 @@ function SingleCombobox(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -1542,6 +1562,8 @@ function SingleCombobox(props) {
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   ComboboxList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -1631,6 +1653,8 @@ function MultiCombobox(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -1991,6 +2015,8 @@ function MultiCombobox(props) {
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   ComboboxList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -2088,6 +2114,8 @@ function SingleSearchableSelect(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -2195,6 +2223,8 @@ function SingleSearchableSelect(props) {
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   SearchableSelectList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -2301,6 +2331,8 @@ function MultiSearchableSelect(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -2605,6 +2637,8 @@ function MultiSearchableSelect(props) {
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   SearchableSelectList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,