@sproutsocial/seeds-react-menu 1.12.3 → 1.15.10

package/src/v3/ModalStories.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { Button } from "@sproutsocial/seeds-react-button";
 import { Input } from "@sproutsocial/seeds-react-input";
@@ -16,6 +17,13 @@ import { SingleCombobox } from "./SingleCombobox";
 import { MultiCombobox } from "./MultiCombobox";
 import { SingleSearchableSelect } from "./SingleSearchableSelect";
 import { MultiSearchableSelect } from "./MultiSearchableSelect";
+import {
+  ActionMenu,
+  MenuGroup,
+  MenuItem,
+  MenuSub,
+  MenuSubTrigger,
+} from "./ActionMenu";
 import { books, itemToString } from "./storyData";
 
 // ─── Shared content ───────────────────────────────────────────────────────────
@@ -179,3 +187,154 @@ export const V2Modal: Story = {
     </>
   ),
 };
+
+// ─── Action Menu in Modal ─────────────────────────────────────────────────────
+
+export const ActionMenuInV1Modal: Story = {
+  name: "Action Menu in V1 Modal",
+  render: () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    return (
+      <>
+        <Button appearance="primary" onClick={() => setIsOpen(true)}>
+          Open V1 Modal
+        </Button>
+        <ModalV1
+          appElementSelector="#root"
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          closeButtonLabel="Close"
+          label="Action Menu in V1 Modal"
+        >
+          <ModalV1.Header title="" subtitle="" bordered>
+            Actions
+          </ModalV1.Header>
+          <ModalV1.Content>
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              <ActionMenu
+                trigger={<Button appearance="secondary">Basic Menu</Button>}
+              >
+                <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+                <MenuItem onClick={action("View Messages")}>
+                  View Messages
+                </MenuItem>
+                <MenuItem onClick={action("Analyze post")}>
+                  Analyze post
+                </MenuItem>
+              </ActionMenu>
+
+              <ActionMenu
+                trigger={
+                  <Button appearance="secondary">Menu with Groups</Button>
+                }
+              >
+                <MenuGroup label="Actions" showSeparator>
+                  <MenuItem onClick={action("Edit")}>Edit</MenuItem>
+                  <MenuItem onClick={action("Duplicate")}>Duplicate</MenuItem>
+                </MenuGroup>
+                <MenuGroup label="Danger">
+                  <MenuItem onClick={action("Delete")} disabled>
+                    Delete
+                  </MenuItem>
+                </MenuGroup>
+              </ActionMenu>
+
+              <ActionMenu
+                trigger={
+                  <Button appearance="secondary">Menu with Submenu</Button>
+                }
+              >
+                <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+                <MenuSub trigger={<MenuSubTrigger>Share</MenuSubTrigger>}>
+                  <MenuItem onClick={action("Share to Twitter")}>
+                    Twitter
+                  </MenuItem>
+                  <MenuItem onClick={action("Share to LinkedIn")}>
+                    LinkedIn
+                  </MenuItem>
+                  <MenuSub
+                    trigger={<MenuSubTrigger>More platforms</MenuSubTrigger>}
+                  >
+                    <MenuItem onClick={action("Share to Facebook")}>
+                      Facebook
+                    </MenuItem>
+                    <MenuItem onClick={action("Share to Instagram")}>
+                      Instagram
+                    </MenuItem>
+                  </MenuSub>
+                </MenuSub>
+                <MenuItem onClick={action("Delete")} disabled>
+                  Delete
+                </MenuItem>
+              </ActionMenu>
+            </div>
+          </ModalV1.Content>
+          <ModalV1.Footer>Footer</ModalV1.Footer>
+        </ModalV1>
+      </>
+    );
+  },
+};
+
+export const ActionMenuInModal: Story = {
+  name: "Action Menu in V2 Modal",
+  render: () => (
+    <ModalV2
+      title="Actions"
+      modalTrigger={<Button appearance="primary">Open Modal</Button>}
+      closeButtonAriaLabel="Close"
+    >
+      <ModalBody>
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          <ActionMenu
+            trigger={<Button appearance="secondary">Basic Menu</Button>}
+          >
+            <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+            <MenuItem onClick={action("View Messages")}>View Messages</MenuItem>
+            <MenuItem onClick={action("Analyze post")}>Analyze post</MenuItem>
+          </ActionMenu>
+
+          <ActionMenu
+            trigger={<Button appearance="secondary">Menu with Groups</Button>}
+          >
+            <MenuGroup label="Actions" showSeparator>
+              <MenuItem onClick={action("Edit")}>Edit</MenuItem>
+              <MenuItem onClick={action("Duplicate")}>Duplicate</MenuItem>
+            </MenuGroup>
+            <MenuGroup label="Danger">
+              <MenuItem onClick={action("Delete")} disabled>
+                Delete
+              </MenuItem>
+            </MenuGroup>
+          </ActionMenu>
+
+          <ActionMenu
+            trigger={<Button appearance="secondary">Menu with Submenu</Button>}
+          >
+            <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+            <MenuSub trigger={<MenuSubTrigger>Share</MenuSubTrigger>}>
+              <MenuItem onClick={action("Share to Twitter")}>Twitter</MenuItem>
+              <MenuItem onClick={action("Share to LinkedIn")}>
+                LinkedIn
+              </MenuItem>
+              <MenuSub
+                trigger={<MenuSubTrigger>More platforms</MenuSubTrigger>}
+              >
+                <MenuItem onClick={action("Share to Facebook")}>
+                  Facebook
+                </MenuItem>
+                <MenuItem onClick={action("Share to Instagram")}>
+                  Instagram
+                </MenuItem>
+              </MenuSub>
+            </MenuSub>
+            <MenuItem onClick={action("Delete")} disabled>
+              Delete
+            </MenuItem>
+          </ActionMenu>
+        </div>
+      </ModalBody>
+      <ModalFooter cancelButton={<Button>Close</Button>} />
+    </ModalV2>
+  ),
+};

package/src/v3/MultiCombobox.stories.tsx

@@ -1,6 +1,12 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
+import { Button } from "@sproutsocial/seeds-react-button";
+import {
+  ModalV2,
+  ModalBody,
+  ModalFooter,
+} from "@sproutsocial/seeds-react-modal";
 import { MultiCombobox } from "./MultiCombobox";
 import {
   books,
@@ -301,6 +307,28 @@ export const MaxTokens: Story = {
   ),
 };
 
+export const LargeBookSetWithMaxTokens: Story = {
+  name: "Large book set with max tokens",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={largeBookSet}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+            isVirtualized
+            selectAll
+            maxTokens={5}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Loading: Story = {
   name: "Loading",
   render: () => (
@@ -396,6 +424,23 @@ export const VirtualizedSelectAll: Story = {
   ),
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick books">
+      {({ id }) => (
+        <MultiCombobox
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Search books..."
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const CustomSearch: Story = {
   name: "Custom search (title + author)",
   render: () => (
@@ -455,3 +500,115 @@ export const Creatable: Story = {
     );
   },
 };
+
+// Story to help visualize what the combobox component looks like when it's invalid within a FormField component
+export const Invalid: Story = {
+  name: "Invalid",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField
+        label="Pick books"
+        isInvalid
+        error="Please pick at least one book."
+      >
+        {({ id, isInvalid }) => (
+          <MultiCombobox
+            id={id}
+            isInvalid={isInvalid}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+// Story to help visualize what the combobox component looks like when it's required within a FormField component
+export const Required: Story = {
+  name: "Required",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books" required>
+        {({ id, required }) => (
+          <MultiCombobox
+            id={id}
+            required={required}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const LargeBookSetWithMaxTokensInModal: Story = {
+  name: "Large book set with max tokens (in modal)",
+  render: () => (
+    <ModalV2
+      title="Pick some books"
+      modalTrigger={<Button appearance="primary">Open Modal</Button>}
+      closeButtonAriaLabel="Close"
+    >
+      <ModalBody>
+        <div style={{ width: "300px" }}>
+          <FormField label="Pick books">
+            {({ id }) => (
+              <MultiCombobox
+                id={id}
+                data={largeBookSet}
+                itemToString={itemToString}
+                renderItem={renderItem}
+                placeholder="Search books..."
+                isVirtualized
+                selectAll
+                maxTokens={5}
+              />
+            )}
+          </FormField>
+        </div>
+      </ModalBody>
+      <ModalFooter cancelButton={<Button>Cancel</Button>} />
+    </ModalV2>
+  ),
+};
+
+// Verifies the a11y fix for Escape key containment. Open the modal, open the
+// combobox dropdown, then press Escape: the dropdown should close and focus
+// should return to the input — the modal should stay open. Pressing Escape
+// again (with the dropdown closed) should close the modal.
+export const EscapeKeyInModal: Story = {
+  name: "Escape Key in Modal (a11y)",
+  render: () => (
+    <ModalV2
+      title="Pick some books"
+      modalTrigger={<Button appearance="primary">Open Modal</Button>}
+      closeButtonAriaLabel="Close"
+    >
+      <ModalBody>
+        <div style={{ width: "300px", padding: "16px 0" }}>
+          <FormField label="Pick books">
+            {({ id }) => (
+              <MultiCombobox
+                id={id}
+                data={books}
+                itemToString={itemToString}
+                placeholder="Search books..."
+              />
+            )}
+          </FormField>
+          <p style={{ marginTop: 16, fontSize: 14 }}>
+            <strong>To verify:</strong> open the combobox, press{" "}
+            <kbd>Escape</kbd>. The dropdown should close and focus should return
+            to the input. The modal should remain open. Press <kbd>Escape</kbd>{" "}
+            again to close the modal.
+          </p>
+        </div>
+      </ModalBody>
+      <ModalFooter cancelButton={<Button>Cancel</Button>} />
+    </ModalV2>
+  ),
+};

package/src/v3/MultiCombobox.tsx

@@ -3,6 +3,7 @@ import { Combobox } from "@base-ui/react/combobox";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import VirtualizedComboboxList from "./Common/VirtualizedComboboxList";
 import { useSeedsPortalContainer } from "./SeedsPortal";
+import { useSuppressEscapeClear } from "./Common/useSuppressEscapeClear";
 import ComboboxItem from "./Common/ComboboxItem";
 import type { DataWithId } from "./Common/types";
 import { groupItems } from "./Common/groupItems";
@@ -74,6 +75,9 @@ interface MultiComboboxBaseProps {
   inputValue?: string;
   onInputValueChange?: (value: string) => void;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
+  fullWidth?: boolean;
 }
 
 interface MultiComboboxDataProps<T extends DataWithId>
@@ -141,8 +145,10 @@ export function MultiCombobox<T extends DataWithId>(
     filter,
     inputValue,
     onInputValueChange,
+    fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -211,6 +217,9 @@ export function MultiCombobox<T extends DataWithId>(
   const virtualizerRef = React.useRef<ReturnType<
     typeof useVirtualizer<HTMLDivElement, Element>
   > | null>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onInputKeyDownCapture = useSuppressEscapeClear(open);
 
   const isControlled = selectedItemIds !== undefined;
 
@@ -366,6 +375,7 @@ export function MultiCombobox<T extends DataWithId>(
     e.preventDefault();
     e.stopPropagation();
     setSelectedItems(value.filter((v) => v.id !== item.id));
+    inputRef.current?.focus();
   }
 
   // ─── Render sentinel item ─────────────────────────────────────────────────
@@ -481,7 +491,7 @@ export function MultiCombobox<T extends DataWithId>(
     : (value as unknown as T[]);
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Combobox.Root
         multiple
@@ -490,7 +500,10 @@ export function MultiCombobox<T extends DataWithId>(
         open={open}
         disabled={props.disabled}
         onOpenChange={(nextOpen, eventDetails) => {
-          if (!nextOpen && eventDetails.reason === "item-press") return;
+          if (!nextOpen && eventDetails.reason === "item-press") {
+            eventDetails.cancel();
+            return;
+          }
           setOpen(nextOpen);
         }}
         filter={
@@ -535,13 +548,14 @@ export function MultiCombobox<T extends DataWithId>(
                 if (!item || !virt) return;
                 const isStart = index === 0;
                 const isEnd = index === virt.options.count - 1;
-                if (
-                  reason === "none" ||
-                  (reason === "keyboard" && (isStart || isEnd))
-                ) {
+                // Only handle keyboard wrap-around: when navigation loops from
+                // the last item to the first (or vice versa), the wrapped item
+                // is outside the virtualized window and standard scroll-into-
+                // view can't find it.
+                if (reason === "keyboard" && (isStart || isEnd)) {
                   queueMicrotask(() => {
                     virt.scrollToIndex(index, {
-                      align: isEnd ? "start" : "end",
+                      align: isStart ? "start" : "end",
                     });
                   });
                 }
@@ -584,7 +598,10 @@ export function MultiCombobox<T extends DataWithId>(
         }}
         items={rootItems}
       >
-        <ComboboxTokenInputGroup>
+        <ComboboxTokenInputGroup
+          $isInvalid={isInvalid}
+          onKeyDownCapture={onInputKeyDownCapture}
+        >
           <ComboboxToken>
             {renderSelection
               ? renderSelection(value)
@@ -614,9 +631,12 @@ export function MultiCombobox<T extends DataWithId>(
                   );
                 })()}
             <ComboboxTokenInput
+              ref={inputRef}
               id={id}
               placeholder={value.length > 0 ? "" : placeholder}
               aria-describedby={ariaDescribedBy}
+              aria-invalid={isInvalid || undefined}
+              aria-required={props.required || undefined}
             />
             <ComboboxActionButtons>
               <ComboboxClear aria-label="Clear all">

package/src/v3/MultiSearchableSelect.stories.tsx

@@ -37,6 +37,30 @@ export const Basic: Story = {
   ),
 };
 
+export const Invalid: Story = {
+  name: "Invalid",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField
+        label="Pick books"
+        isInvalid
+        error="Please pick at least one book."
+      >
+        {({ id, isInvalid }) => (
+          <MultiSearchableSelect
+            id={id}
+            isInvalid={isInvalid}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const CustomRenderItem: Story = {
   name: "Custom render item",
   render: () => (
@@ -413,6 +437,24 @@ export const LoadingWithToggle: Story = {
   },
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick books">
+      {({ id }) => (
+        <MultiSearchableSelect
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Select books"
+          searchPlaceholder="Search books..."
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const CustomSearch: Story = {
   name: "Custom search (title + author)",
   render: () => (

package/src/v3/MultiSearchableSelect.tsx

@@ -80,6 +80,9 @@ interface MultiSearchableSelectBaseProps {
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
+  fullWidth?: boolean;
 }
 
 interface MultiSearchableSelectDataProps<T extends DataWithId>
@@ -145,8 +148,10 @@ export function MultiSearchableSelect<T extends DataWithId>(
     isLoading = false,
     loadingText = "Loading...",
     filter,
+    fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -461,7 +466,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
     : (value as unknown as T[]);
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Combobox.Root
         multiple
@@ -500,13 +505,10 @@ export function MultiSearchableSelect<T extends DataWithId>(
                 if (!item || !virt) return;
                 const isStart = index === 0;
                 const isEnd = index === virt.options.count - 1;
-                if (
-                  reason === "none" ||
-                  (reason === "keyboard" && (isStart || isEnd))
-                ) {
+                if (reason === "keyboard" && (isStart || isEnd)) {
                   queueMicrotask(() => {
                     virt.scrollToIndex(index, {
-                      align: isEnd ? "start" : "end",
+                      align: isStart ? "start" : "end",
                     });
                   });
                 }
@@ -552,6 +554,9 @@ export function MultiSearchableSelect<T extends DataWithId>(
         <SearchableSelectTokenTrigger
           id={id}
           aria-describedby={ariaDescribedBy}
+          aria-invalid={isInvalid || undefined}
+          aria-required={props.required || undefined}
+          $isInvalid={isInvalid}
         >
           {renderSelection ? (
             renderSelection(value)

package/src/v3/MultiSelect.stories.tsx

@@ -37,6 +37,29 @@ export const Basic: Story = {
   ),
 };
 
+export const Invalid: Story = {
+  name: "Invalid",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField
+        label="Pick books"
+        isInvalid
+        error="Please pick at least one book."
+      >
+        {({ id, isInvalid }) => (
+          <MultiSelect
+            id={id}
+            isInvalid={isInvalid}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const CustomRenderItem: Story = {
   name: "Custom render item",
   render: () => (
@@ -266,6 +289,23 @@ export const RemoveSelectedItems: Story = {
   ),
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick books">
+      {({ id }) => (
+        <MultiSelect
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Select books..."
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const Children: Story = {
   name: "Children API",
   render: () => (

package/src/v3/MultiSelect.tsx

@@ -44,6 +44,9 @@ interface MultiSelectBaseProps {
   placeholder?: string;
   disabled?: boolean;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
+  fullWidth?: boolean;
 }
 
 interface MultiSelectDataProps<T extends DataWithId>
@@ -88,8 +91,9 @@ export type MultiSelectProps<T extends DataWithId> =
 // ─── Component ────────────────────────────────────────────────────────────────
 
 export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
-  const { id, placeholder = "Select..." } = props;
+  const { id, placeholder = "Select...", fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -171,7 +175,7 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
   }
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Select.Root
         multiple
@@ -181,7 +185,12 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
         disabled={props.disabled}
         id={id}
       >
-        <SelectTrigger aria-describedby={ariaDescribedBy}>
+        <SelectTrigger
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={isInvalid || undefined}
+          aria-required={props.required || undefined}
+          $isInvalid={isInvalid}
+        >
           <SelectValue>
             {() => {
               if (renderSelection) return renderSelection(selectedItems);