@sproutsocial/seeds-react-menu 1.12.0 → 1.12.1

package/package.json

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

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