@sproutsocial/seeds-react-menu 1.11.7 → 1.11.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.11.7",
+  "version": "1.11.9",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -37,17 +37,17 @@
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.2",
     "@sproutsocial/seeds-react-box": "^1.1.16",
-    "@sproutsocial/seeds-react-button": "^2.0.3",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.31",
-    "@sproutsocial/seeds-react-icon": "^2.3.5",
-    "@sproutsocial/seeds-react-input": "^1.5.14",
+    "@sproutsocial/seeds-react-button": "^2.0.4",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.32",
+    "@sproutsocial/seeds-react-icon": "^2.3.6",
+    "@sproutsocial/seeds-react-input": "^1.5.15",
     "@sproutsocial/seeds-react-label": "^1.0.16",
-    "@sproutsocial/seeds-react-popout": "^2.4.36",
+    "@sproutsocial/seeds-react-popout": "^2.4.37",
     "@sproutsocial/seeds-react-radio": "^1.3.16",
-    "@sproutsocial/seeds-react-switch": "^1.2.30",
+    "@sproutsocial/seeds-react-switch": "^1.2.31",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
     "@sproutsocial/seeds-react-theme": "^3.6.2",
-    "@sproutsocial/seeds-react-token-input": "^1.4.36",
+    "@sproutsocial/seeds-react-token-input": "^1.4.37",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "@base-ui/react": "^1.3.0",
     "@tanstack/react-virtual": "^3.13.12",
@@ -57,7 +57,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.18",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.19",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

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={