@sproutsocial/seeds-react-menu 1.11.8 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.11.8",
+  "version": "1.12.0",
   "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

@@ -344,3 +344,30 @@ export const VirtualizedSelectAll: Story = {
     </div>
   ),
 };
+
+export const CustomSearch: Story = {
+  name: "Custom search (title + author)",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search by title or author..."
+            filter={(item, query) => {
+              const book = item as (typeof books)[number];
+              const q = query.toLowerCase();
+              return (
+                book.title.toLowerCase().includes(q) ||
+                book.author.toLowerCase().includes(q)
+              );
+            }}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};

package/src/v3/MultiCombobox.tsx

@@ -65,6 +65,7 @@ interface MultiComboboxBaseProps {
   isLoading?: boolean;
   loadingText?: string;
   disabled?: boolean;
+  filter?: ((item: unknown, query: string) => boolean) | null;
 }
 
 interface MultiComboboxDataProps<T extends DataWithId>
@@ -125,6 +126,7 @@ export function MultiCombobox<T extends DataWithId>(
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
+    filter,
   } = props;
 
   const isChildrenMode = "children" in props && props.children != null;
@@ -378,6 +380,7 @@ export function MultiCombobox<T extends DataWithId>(
         open={open}
         disabled={props.disabled}
         onOpenChange={setOpen}
+        filter={filter}
         onItemHighlighted={
           isVirtualized
             ? (item, { reason, index }) => {

package/src/v3/MultiSearchableSelect.stories.tsx

@@ -412,3 +412,31 @@ export const LoadingWithToggle: Story = {
     );
   },
 };
+
+export const CustomSearch: Story = {
+  name: "Custom search (title + author)",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search by title or author..."
+            filter={(item, query) => {
+              const book = item as (typeof books)[number];
+              const q = query.toLowerCase();
+              return (
+                book.title.toLowerCase().includes(q) ||
+                book.author.toLowerCase().includes(q)
+              );
+            }}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};

package/src/v3/MultiSearchableSelect.tsx

@@ -72,6 +72,7 @@ interface MultiSearchableSelectBaseProps {
   isLoading?: boolean;
   loadingText?: string;
   disabled?: boolean;
+  filter?: ((item: unknown, query: string) => boolean) | null;
 }
 
 interface MultiSearchableSelectDataProps<T extends DataWithId>
@@ -132,6 +133,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
+    filter,
   } = props;
 
   const isChildrenMode = "children" in props && props.children != null;
@@ -365,6 +367,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
         multiple
         id={id}
         virtualized={isVirtualized}
+        filter={filter}
         open={open}
         disabled={props.disabled}
         onOpenChange={setOpen}

package/src/v3/SingleCombobox.stories.tsx

@@ -191,3 +191,30 @@ export const Virtualized: Story = {
     </div>
   ),
 };
+
+export const CustomSearch: Story = {
+  name: "Custom search (title + author)",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search by title or author..."
+            filter={(item, query) => {
+              const book = item as (typeof books)[number];
+              const q = query.toLowerCase();
+              return (
+                book.title.toLowerCase().includes(q) ||
+                book.author.toLowerCase().includes(q)
+              );
+            }}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};

package/src/v3/SingleCombobox.tsx

@@ -30,6 +30,7 @@ interface SingleComboboxBaseProps {
   placeholder?: string;
   emptyText?: string;
   disabled?: boolean;
+  filter?: ((item: unknown, query: string) => boolean) | null;
 }
 
 interface SingleComboboxDataBaseProps<T extends DataWithId>
@@ -86,6 +87,7 @@ export function SingleCombobox<T extends DataWithId>(
     id,
     placeholder = "Search...",
     emptyText = "No results found.",
+    filter,
   } = props;
 
   const isChildrenMode = "children" in props && props.children != null;
@@ -177,6 +179,7 @@ export function SingleCombobox<T extends DataWithId>(
         }
         virtualized={isVirtualized}
         disabled={props.disabled}
+        filter={filter}
         open={open}
         onOpenChange={setOpen}
         onItemHighlighted={

package/src/v3/SingleSearchableSelect.stories.tsx

@@ -303,3 +303,31 @@ export const LoadingWithToggle: Story = {
     );
   },
 };
+
+export const CustomSearch: Story = {
+  name: "Custom search (title + author)",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            searchPlaceholder="Search by title or author..."
+            filter={(item, query) => {
+              const book = item as (typeof books)[number];
+              const q = query.toLowerCase();
+              return (
+                book.title.toLowerCase().includes(q) ||
+                book.author.toLowerCase().includes(q)
+              );
+            }}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};

package/src/v3/SingleSearchableSelect.tsx

@@ -40,6 +40,7 @@ interface SingleSearchableSelectBaseProps {
   isLoading?: boolean;
   loadingText?: string;
   disabled?: boolean;
+  filter?: ((item: unknown, query: string) => boolean) | null;
 }
 
 interface SingleSearchableSelectDataBaseProps<T extends DataWithId>
@@ -103,6 +104,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
+    filter,
   } = props;
 
   const isChildrenMode = "children" in props && props.children != null;
@@ -210,6 +212,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
             : groups ?? (isChildrenMode ? undefined : data)
         }
         virtualized={isVirtualized}
+        filter={filter}
         open={open}
         onOpenChange={setOpen}
         onItemHighlighted={