@sproutsocial/seeds-react-menu 1.12.2 → 1.13.0

package/src/v3/ActionMenuStyles.tsx

@@ -0,0 +1,153 @@
+import { Menu } from "@base-ui/react/menu";
+import styled, { css } from "styled-components";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+
+export const ActionMenuTrigger = styled(Menu.Trigger)``;
+
+export const ActionMenuPositioner = styled(Menu.Positioner)`
+  min-width: var(--anchor-width);
+  z-index: 7;
+`;
+
+export const ActionMenuPopup = styled(Menu.Popup)`
+  font-family: ${({ theme }) => theme.fontFamily};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  box-shadow: ${({ theme }) => theme.shadows.low};
+  outline: none;
+  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.space[200]};
+
+  &[data-open] {
+    animation: action-menu-popup-in 120ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: action-menu-popup-out 100ms ease-in;
+  }
+
+  @keyframes action-menu-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes action-menu-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+`;
+
+export const ActionMenuGroup = styled(Menu.Group)`
+  display: block;
+`;
+
+export const ActionMenuGroupLabel = styled(Menu.GroupLabel)`
+  padding: ${({ theme }) =>
+    `${theme.space[300]} ${theme.space[300]} ${theme.space[200]}`};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${({ theme }) => theme.colors.text.subtext};
+`;
+
+export const ActionMenuSeparator = styled(Menu.Separator)`
+  height: 1px;
+  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  background: ${({ theme }) => theme.colors.container.border.base};
+`;
+
+const menuItemStyles = css`
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  background-color: ${({ theme }) => theme.colors.listItem.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  font-family: ${({ theme }) => theme.fontFamily};
+  font-weight: ${({ theme }) => theme.fontWeights.normal};
+  text-align: left;
+  text-decoration: none;
+  padding: ${({ theme }) => theme.space[300]};
+  outline: 0;
+  ${({ theme }) => theme.typography[200]};
+  transition: all ${({ theme }) => theme.duration.fast};
+  cursor: pointer;
+  user-select: none;
+
+  &[data-highlighted] {
+    border-color: ${({ theme }) => theme.colors.listItem.border.base};
+    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+    color: ${({ theme }) => theme.colors.text.body};
+    text-decoration: none;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+`;
+
+export const StyledMenuItem = styled(Menu.Item)`
+  ${menuItemStyles}
+`;
+
+export const StyledCheckboxItem = styled(Menu.CheckboxItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+
+export const StyledRadioItem = styled(Menu.RadioItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+
+export const StyledCheckboxItemIndicator = styled(Menu.CheckboxItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+
+export const StyledRadioItemIndicator = styled(Menu.RadioItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+
+export const StyledSubmenuTrigger = styled(Menu.SubmenuTrigger)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  justify-content: space-between;
+
+  &[data-popup-open] {
+    border-color: ${({ theme }) => theme.colors.listItem.border.base};
+    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+`;
+
+export const StyledLinkItem = styled(Menu.LinkItem)`
+  ${menuItemStyles}
+`;

package/src/v3/Common/SelectStyles.tsx

@@ -2,11 +2,12 @@ import { Select } from "@base-ui/react/select";
 import styled from "styled-components";
 import { focusRing } from "@sproutsocial/seeds-react-mixins";
 
-export const Field = styled.div`
-  display: flex;
+export const Field = styled.div<{ $fullWidth?: boolean }>`
+  display: ${({ $fullWidth }) =>
+    $fullWidth === false ? "inline-flex" : "flex"};
   flex-direction: column;
   gap: ${({ theme }) => theme.space[200]};
-  width: 100%;
+  ${({ $fullWidth }) => $fullWidth !== false && "width: 100%;"}
 `;
 
 export const SelectLabel = styled(Select.Label)`

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

@@ -396,6 +396,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: () => (

package/src/v3/MultiCombobox.tsx

@@ -74,6 +74,7 @@ interface MultiComboboxBaseProps {
   inputValue?: string;
   onInputValueChange?: (value: string) => void;
   "aria-describedby"?: string;
+  fullWidth?: boolean;
 }
 
 interface MultiComboboxDataProps<T extends DataWithId>
@@ -141,6 +142,7 @@ export function MultiCombobox<T extends DataWithId>(
     filter,
     inputValue,
     onInputValueChange,
+    fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
 
@@ -481,7 +483,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
@@ -506,19 +508,28 @@ export function MultiCombobox<T extends DataWithId>(
               }
             : filter
         }
-        inputValue={creatableProp ? currentInputValue : inputValue}
-        onInputValueChange={
-          creatableProp
-            ? (v) => {
-                if (skipNextInputChangeRef.current) {
-                  skipNextInputChangeRef.current = false;
-                  return;
-                }
-                setInternalInputValue(v);
-                onInputValueChange?.(v);
-              }
-            : onInputValueChange
+        inputValue={
+          creatableProp ? currentInputValue : inputValue ?? internalInputValue
         }
+        onInputValueChange={(v, eventDetails) => {
+          // Preserve search query when an item is selected. Base UI fires
+          // 'input-clear' on item-press; ignore it while the popup stays open.
+          if (eventDetails.reason === "input-clear" && open) return;
+
+          if (creatableProp) {
+            if (skipNextInputChangeRef.current) {
+              skipNextInputChangeRef.current = false;
+              return;
+            }
+            setInternalInputValue(v);
+            onInputValueChange?.(v);
+          } else {
+            if (inputValue === undefined) {
+              setInternalInputValue(v);
+            }
+            onInputValueChange?.(v);
+          }
+        }}
         onItemHighlighted={
           isVirtualized
             ? (item, { reason, index }) => {

package/src/v3/MultiSearchableSelect.stories.tsx

@@ -413,6 +413,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: () => (