@sproutsocial/seeds-react-menu 1.11.9 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.11.9",
+  "version": "1.12.1",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/MenuGroup/MenuGroup.tsx

@@ -26,7 +26,7 @@ import { mapMenuItems } from "../hooks/useMenuChildren";
  */
 
 const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
-  titleAs = "h3",
+  titleAs = "div",
   children: childrenProp,
   title,
   color,
@@ -68,7 +68,7 @@ const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
       {...rest}
     >
       {title && (
-        <StyledTitle role="heading" as={titleAs} id={titleId}>
+        <StyledTitle as={titleAs} id={titleId}>
           {title}
         </StyledTitle>
       )}

package/src/MenuGroup/__tests__/MenuGroup.test.tsx

@@ -199,12 +199,12 @@ describe("MenuGroup", () => {
         </SingleSelectMenu>
       );
 
-      // Find associated label for the group. (Menu Group uses aria-labelledby to point to heading element)
+      // The group is labelled via aria-labelledby pointing to the title div.
+      // The title must not carry role="heading" since heading is not an allowed
+      // descendant of listbox/menu (axe: aria-allowed-attr).
       const menuGroup = screen.getByRole("group", { name: menuTitle });
       expect(menuGroup).toBeInTheDocument();
-      expect(
-        screen.queryByRole("heading", { name: menuTitle })
-      ).toBeInTheDocument();
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
     });
 
     it("does not place role=group on an <li> (axe aria-allowed-role)", () => {

package/src/MenuSearchInput/MenuSearchInput.tsx

@@ -26,6 +26,7 @@ export const MenuSearchInput = ({
   getIsItemVisible,
   inputProps,
   onChange,
+  "aria-label": ariaLabel,
   ...restInputProps
 }: TypeMenuSearchInputProps) => {
   const {
@@ -69,8 +70,9 @@ export const MenuSearchInput = ({
       // apply onKeyDown logic for downshift keyboard accessibility support
       onKeyDown={handleKeyDown}
       autoComplete={false}
-      aria-autocomplete="list"
+      ariaLabel={ariaLabel}
       inputProps={{
+        ["aria-autocomplete"]: "list",
         ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
         ["aria-controls"]: toggleButtonProps["aria-controls"],
         ...inputProps,

package/src/SingleSelectMenu/SingleSelectMenu.stories.tsx

@@ -275,6 +275,66 @@ export const SingleSelectMenuWithCustomEmpty: Story = {
   },
 };
 
+const russianBooks = TEST_BOOKS.filter(({ author }) =>
+  [
+    "Leo Tolstoy",
+    "Fyodor Dostoyevsy",
+    "Fyodor Dostoevsky",
+    "Lev Tolstoy",
+  ].includes(author)
+);
+const worldBooks = TEST_BOOKS.filter(
+  ({ author }) =>
+    ![
+      "Leo Tolstoy",
+      "Fyodor Dostoyevsy",
+      "Fyodor Dostoevsky",
+      "Lev Tolstoy",
+    ].includes(author)
+);
+
+export const SingleSelectMenuWithSearchAndGroups: Story = {
+  name: "Single Select Menu with Search and Groups",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) => {
+          if (!item) return "";
+          return TEST_BOOKS.find(({ id }) => id === item.id)?.title ?? "";
+        }}
+        menuToggleElement={<StorybookMenuToggleButton />}
+        onStateChange={(changes) => action("onStateChange")(changes)}
+        {...(args as object)}
+      >
+        <MenuHeader title="Select Book">
+          <MenuSearchInput
+            id="single-select-search-groups"
+            name="search"
+            type="search"
+            aria-label="Search Books"
+          />
+        </MenuHeader>
+        <MenuContent>
+          <MenuGroup id="russian-lit" title="Russian Literature">
+            {russianBooks.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+          <MenuGroup id="world-lit" title="World Literature">
+            {worldBooks.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
 export const SingleSelectMenuSmallSize: Story = {
   name: "Small Size",
   render: ({ inputType, ...args }) => {

package/src/v3/MultiCombobox.stories.tsx

@@ -99,6 +99,7 @@ export const Controlled: Story = {
   name: "Controlled",
   render: () => {
     const [selectedIds, setSelectedIds] = React.useState<string[]>(["book-2"]);
+    const [inputValue, setInputValue] = React.useState("");
     const selected = books.filter((b) => selectedIds.includes(b.id));
     return (
       <div
@@ -119,9 +120,14 @@ export const Controlled: Story = {
               placeholder="Search books..."
               selectedItemIds={selectedIds}
               onSelectedItemIdsChange={(ids: string[]) => setSelectedIds(ids)}
+              inputValue={inputValue}
+              onInputValueChange={setInputValue}
             />
           )}
         </FormField>
+        <div style={{ fontSize: 13 }}>
+          Input: <strong>"{inputValue}"</strong>
+        </div>
         <div style={{ fontSize: 13 }}>
           Selected:{" "}
           <strong>
@@ -130,11 +136,14 @@ export const Controlled: Story = {
               : "none"}
           </strong>
         </div>
-        <div style={{ display: "flex", gap: 8 }}>
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
           <button onClick={() => setSelectedIds([])}>Clear all</button>
           <button onClick={() => setSelectedIds(["book-5", "book-7"])}>
             Select 1984 &amp; Meditations
           </button>
+          <button onClick={() => setInputValue("War")}>
+            Set input to "War"
+          </button>
         </div>
       </div>
     );
@@ -182,6 +191,27 @@ export const SelectableHeadings: Story = {
 
 export const SelectAll: Story = {
   name: "Select all",
+  render: () => (
+    <div style={{ width: "600px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+            selectHeadings
+            selectAll
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const SelectAllWithGrouping: Story = {
+  name: "Select all with grouping",
   render: () => (
     <div style={{ width: "600px" }}>
       <FormField label="Pick books">
@@ -202,6 +232,26 @@ export const SelectAll: Story = {
   ),
 };
 
+export const SelectAllLocalized: Story = {
+  name: "Select all (localized label)",
+  render: () => (
+    <div style={{ width: "600px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+            selectAll="Tout sélectionner"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Virtualized: Story = {
   name: "Virtualized",
   render: () => (

package/src/v3/MultiCombobox.tsx

@@ -66,6 +66,8 @@ interface MultiComboboxBaseProps {
   loadingText?: string;
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
+  inputValue?: string;
+  onInputValueChange?: (value: string) => void;
 }
 
 interface MultiComboboxDataProps<T extends DataWithId>
@@ -82,7 +84,7 @@ interface MultiComboboxDataProps<T extends DataWithId>
   groupBy?: (item: T) => string;
   renderGroupHeading?: (label: string) => React.ReactNode;
   selectHeadings?: boolean;
-  selectAll?: boolean;
+  selectAll?: boolean | string;
   isVirtualized?: boolean;
   removeSelectedItems?: boolean;
   maxTokens?: number;
@@ -127,6 +129,8 @@ export function MultiCombobox<T extends DataWithId>(
     isLoading = false,
     loadingText = "Loading...",
     filter,
+    inputValue,
+    onInputValueChange,
   } = props;
 
   const isChildrenMode = "children" in props && props.children != null;
@@ -166,9 +170,12 @@ export function MultiCombobox<T extends DataWithId>(
   const selectHeadings = isChildrenMode
     ? false
     : (props as MultiComboboxDataProps<T>).selectHeadings ?? false;
-  const selectAll = isChildrenMode
+  const selectAllProp = isChildrenMode
     ? false
     : (props as MultiComboboxDataProps<T>).selectAll ?? false;
+  const selectAll = Boolean(selectAllProp);
+  const selectAllLabel =
+    typeof selectAllProp === "string" ? selectAllProp : "Select all";
   const isVirtualized = isChildrenMode
     ? false
     : (props as MultiComboboxDataProps<T>).isVirtualized ?? false;
@@ -226,15 +233,20 @@ export function MultiCombobox<T extends DataWithId>(
   type FlatRow = T | GroupHeaderSentinel | SelectAllSentinel;
 
   const flatItems = React.useMemo<FlatRow[] | null>(() => {
-    if (!groups || (!selectHeadings && !selectAll)) return null;
+    if (!selectHeadings && !selectAll) return null;
+    if (!groups && !selectAll) return null;
     const rows: FlatRow[] = [];
     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: T[]) {
     if (!isControlled) setInternalValue(items);
@@ -308,7 +320,7 @@ export function MultiCombobox<T extends DataWithId>(
       return (
         <ComboboxSelectAllItem key="__selectAll" value={row}>
           <ComboboxGroupHeaderCheckbox $state={state} id="__selectAll" />
-          Select all
+          {selectAllLabel}
         </ComboboxSelectAllItem>
       );
     }
@@ -379,8 +391,13 @@ export function MultiCombobox<T extends DataWithId>(
         virtualized={isVirtualized}
         open={open}
         disabled={props.disabled}
-        onOpenChange={setOpen}
+        onOpenChange={(nextOpen, eventDetails) => {
+          if (!nextOpen && eventDetails.reason === "item-press") return;
+          setOpen(nextOpen);
+        }}
         filter={filter}
+        inputValue={inputValue}
+        onInputValueChange={onInputValueChange}
         onItemHighlighted={
           isVirtualized
             ? (item, { reason, index }) => {