@sproutsocial/seeds-react-menu 1.8.6 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.8.6",
+  "version": "1.10.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -31,18 +31,18 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.2",
-    "@sproutsocial/seeds-react-box": "^1.1.13",
-    "@sproutsocial/seeds-react-button": "^1.3.18",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.22",
-    "@sproutsocial/seeds-react-icon": "^2.2.4",
-    "@sproutsocial/seeds-react-input": "^1.5.4",
-    "@sproutsocial/seeds-react-label": "^1.0.13",
-    "@sproutsocial/seeds-react-popout": "^2.4.25",
-    "@sproutsocial/seeds-react-radio": "^1.3.12",
-    "@sproutsocial/seeds-react-switch": "^1.2.21",
+    "@sproutsocial/seeds-react-box": "^1.1.14",
+    "@sproutsocial/seeds-react-button": "^1.4.0",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.24",
+    "@sproutsocial/seeds-react-icon": "^2.2.5",
+    "@sproutsocial/seeds-react-input": "^1.5.7",
+    "@sproutsocial/seeds-react-label": "^1.0.14",
+    "@sproutsocial/seeds-react-popout": "^2.4.28",
+    "@sproutsocial/seeds-react-radio": "^1.3.14",
+    "@sproutsocial/seeds-react-switch": "^1.2.23",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
-    "@sproutsocial/seeds-react-theme": "^3.5.1",
-    "@sproutsocial/seeds-react-token-input": "^1.4.25",
+    "@sproutsocial/seeds-react-theme": "^3.6.0",
+    "@sproutsocial/seeds-react-token-input": "^1.4.28",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "@tanstack/react-virtual": "^3.13.12",
     "downshift": "9.0.4",
@@ -51,7 +51,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.7",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.10",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/ListboxToggleButton.tsx

@@ -9,11 +9,49 @@ import { useMenuToggleContext } from "./MenuContext";
 export interface TypeListboxToggleButtonProps
   extends TypeMenuToggleButtonProps {
   invalid?: boolean;
+  size?: "small" | "default" | "large";
 }
 
 export const StyledListboxToggleButton = styled(
   MenuToggleButton
 )<TypeListboxToggleButtonProps>`
+  background-color: ${(props) => props.theme.colors.form.background.base};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
+  border-radius: ${(props) => props.theme.radii[500]};
+  transition: border-color ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in},
+    box-shadow ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in};
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  &:active {
+    transform: none;
+  }
+
+  padding: ${(props) => {
+    switch (props.size) {
+      case "large":
+        return `${props.theme.space[400]} ${props.theme.space[400]} ${props.theme.space[400]} ${props.theme.space[400]}`;
+
+      case "small":
+        return `${props.theme.space[200]} ${props.theme.space[200]} ${props.theme.space[200]} ${props.theme.space[200]}`;
+
+      case "default":
+      default:
+        return `${props.theme.space[300]} ${props.theme.space[300]} ${props.theme.space[300]} ${props.theme.space[300]}`;
+    }
+  }};
+  font-size: ${(props) => {
+    switch (props.size) {
+      case "large":
+        return props.theme.typography[300].fontSize;
+
+      case "small":
+      case "default":
+      default:
+        return props.theme.typography[200].fontSize;
+    }
+  }};
+
   ${(props) =>
     props.invalid &&
     css`
@@ -49,11 +87,16 @@ const StyledInnerButton = styled.div`
 
 export const ListboxToggleButton = ({
   children,
+  size = "default",
   ...buttonProps
 }: TypeListboxToggleButtonProps) => {
   const { isOpen } = useMenuToggleContext();
   return (
-    <StyledListboxToggleButton appearance="secondary" {...buttonProps}>
+    <StyledListboxToggleButton
+      appearance="unstyled"
+      size={size}
+      {...buttonProps}
+    >
       <StyledInnerButton>
         {children}
         <StyledChevron $isOpen={isOpen} invalid={buttonProps.invalid}>

package/src/SingleSelectMenu/SingleSelectMenu.stories.tsx

@@ -274,3 +274,53 @@ export const SingleSelectMenuWithCustomEmpty: Story = {
     );
   },
 };
+
+export const SingleSelectMenuSmallSize: Story = {
+  name: "Small Size",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <StorybookMenuToggleButton buttonProps={{ size: "small" }} />
+        }
+        {...(args as object)}
+      >
+        <MenuContent>
+          <MenuGroup id="books">
+            {TEST_BOOKS.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
+export const SingleSelectMenuLargeSize: Story = {
+  name: "Large Size",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <StorybookMenuToggleButton buttonProps={{ size: "large" }} />
+        }
+        {...(args as object)}
+      >
+        <MenuContent>
+          <MenuGroup id="books">
+            {TEST_BOOKS.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};

package/src/v2/Autocomplete/Autocomplete.stories.tsx

@@ -345,6 +345,8 @@ const TestVirtualizedMulti = () => {
           itemToSearchString={itemToSearchString}
           renderItem={renderItem}
           isVirtualized={true}
+          groupBy={(book) => book.author}
+          selectHeadings={true}
           EmptyState={defaultEmptyState}
           placeholder="Search for books"
           menuProps={{
@@ -607,3 +609,37 @@ export const CustomSearchString: Story = {
     return <TestCustomSearchString />;
   },
 };
+
+// Popout Placement Top
+// Positioned at the bottom of the viewport to demonstrate that the popout
+// opens upward rather than downward when popoutPlacement="top" is set.
+const TestPopoutPlacementTop = () => {
+  return (
+    <FormField label="Pick some books" width="100%">
+      {({ id }) => (
+        <MultiAutocomplete
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          renderItem={renderItem}
+          onSelectedItemIdsChange={(itemIds) => console.log(itemIds)}
+          EmptyState={defaultEmptyState}
+          placeholder="Search for books"
+          popoutPlacement="top"
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const PopoutPlacementTop: Story = {
+  name: "Popout Placement Top",
+  decorators: [
+    (Story) => (
+      <Box display="flex" height="100vh" alignItems="flex-end">
+        <Story />
+      </Box>
+    ),
+  ],
+  render: () => <TestPopoutPlacementTop />,
+};

package/src/v2/Autocomplete/MultiAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef } from "react";
 import { useCombobox, useMultipleSelection } from "downshift";
 import { TokenInput } from "@sproutsocial/seeds-react-token-input";
 // This will eventually be imported from seeds-react-popout
@@ -74,7 +74,10 @@ export function MultiAutocomplete<T extends DataWithId>({
   inputType = "checkbox",
   onPointerDownOutside,
   onInteractOutside,
+  popoutPlacement,
 }: MultiAutocompleteProps<T>) {
+  const mousedownInPopoverRef = useRef(false);
+
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
   const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] =
@@ -118,6 +121,9 @@ export function MultiAutocomplete<T extends DataWithId>({
   };
 
   const updateIsOpen = (newIsOpen: boolean) => {
+    if (!newIsOpen) {
+      updateInputValue("");
+    }
     if (!isIsOpenControlled) {
       setUncontrolledIsOpen(newIsOpen);
     }
@@ -360,6 +366,13 @@ export function MultiAutocomplete<T extends DataWithId>({
     if (inputProps.onBlur) {
       inputProps.onBlur(e);
     }
+    // Don't close if the blur was caused by a mousedown inside the popover (e.g. clicking the scrollbar)
+    // Re-focus the input so future blur events can still close the menu
+    if (mousedownInPopoverRef.current) {
+      mousedownInPopoverRef.current = false;
+      e.target.focus();
+      return;
+    }
     // Need to figure why onblur is getting called when selecting select all item
     updateIsOpen(false);
   };
@@ -373,6 +386,7 @@ export function MultiAutocomplete<T extends DataWithId>({
     <Popout
       open={comboboxIsOpen}
       onOpenChange={updateIsOpen}
+      side={popoutPlacement}
       onOpenAutoFocus={(e) => {
         // Prevent default auto-focus behavior
         e.preventDefault();
@@ -384,6 +398,12 @@ export function MultiAutocomplete<T extends DataWithId>({
       onPointerDownOutside={onPointerDownOutside}
       onInteractOutside={onInteractOutside}
       animationConfig={menuAnimationConfig}
+      onMouseDown={() => {
+        mousedownInPopoverRef.current = true;
+      }}
+      onMouseUp={() => {
+        mousedownInPopoverRef.current = false;
+      }}
       content={
         <ComboboxContent
           items={items}

package/src/v2/Autocomplete/SingleAutocomplete.tsx

@@ -67,6 +67,7 @@ export function SingleAutocomplete<T extends DataWithId>({
   includePlaceholderItem = false,
   onPointerDownOutside,
   onInteractOutside,
+  popoutPlacement,
 }: SingleAutocompleteProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -293,6 +294,7 @@ export function SingleAutocomplete<T extends DataWithId>({
     <Popout
       open={comboboxIsOpen}
       onOpenChange={updateIsOpen}
+      side={popoutPlacement}
       animationConfig={menuAnimationConfig}
       onOpenAutoFocus={(e) => {
         // Prevent default auto-focus behavior

package/src/v2/Common-V2/ComboboxContent.tsx

@@ -86,6 +86,7 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
           style={{
             height: `${rowVirtualizer.getTotalSize()}px`,
             position: "relative",
+            overflow: "hidden",
           }}
         >
           <div

package/src/v2/Common-V2/Popout.tsx

@@ -77,12 +77,28 @@ export function Popout({
   // At the moment, if the popout content is the combobox the onclick gets overridden by the popout
   return (
     <Popover.Root open={popoverOpen} onOpenChange={popoverOnOpenChange}>
-      <Popover.Trigger ref={radixRef} asChild>
-        {children}
-      </Popover.Trigger>
-      <Popover.Anchor>
-        <div style={{ height: "1px" }}>&nbsp;</div>
-      </Popover.Anchor>
+      {/*
+        The Anchor provides the positioning reference for the popout content.
+        We can't rely on Popover.Trigger's ref for positioning because the children
+        (e.g. Input) are class components that don't support forwardRef — Radix's
+        asChild would connect the ref to the class instance rather than the DOM node.
+        The Anchor is absolutely positioned at the top or bottom edge of the wrapper
+        so the popout content appears correctly above or below the trigger.
+      */}
+      <div style={{ position: "relative" }}>
+        <Popover.Trigger ref={radixRef} asChild>
+          {children}
+        </Popover.Trigger>
+        <Popover.Anchor
+          style={{
+            position: "absolute",
+            top: side === "top" ? 0 : "100%",
+            left: 0,
+            right: 0,
+            height: "1px",
+          }}
+        />
+      </div>
       <Popover.Portal>
         <StyledContent
           side={side}

package/src/v2/Common-V2/props.ts

@@ -22,6 +22,11 @@ export interface BaseSelectProps<T extends DataWithId> {
     event: CustomEvent<{ originalEvent: PointerEvent }>
   ) => void;
   onInteractOutside?: (event: CustomEvent<{ originalEvent: Event }>) => void;
+  /**
+   * Controls which side the popout appears relative to the trigger.
+   * @default "bottom"
+   */
+  popoutPlacement?: "top" | "bottom";
 }
 /**
  * Props common to all single-select components

package/src/v2/SearchableSelect/SearchableMultiSelect.tsx

@@ -78,6 +78,7 @@ export function SearchableMultiSelect<T extends DataWithId>({
   triggerButtonProps,
   onPointerDownOutside,
   onInteractOutside,
+  popoutPlacement,
 }: SearchableMultiSelectProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -367,6 +368,7 @@ export function SearchableMultiSelect<T extends DataWithId>({
     <Popout
       open={comboboxIsOpen}
       onOpenChange={updateIsOpen}
+      side={popoutPlacement}
       animationConfig={menuAnimationConfig}
       onOpenAutoFocus={(e) => {
         // Prevent default auto-focus behavior - we'll focus the input manually

package/src/v2/SearchableSelect/SearchableSelect.tsx

@@ -74,6 +74,7 @@ export function SearchableSelect<T extends DataWithId>({
   triggerButtonProps,
   onPointerDownOutside,
   onInteractOutside,
+  popoutPlacement,
 }: SearchableSelectProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -257,6 +258,7 @@ export function SearchableSelect<T extends DataWithId>({
     <Popout
       open={comboboxIsOpen}
       onOpenChange={updateIsOpen}
+      side={popoutPlacement}
       animationConfig={menuAnimationConfig}
       onOpenAutoFocus={(e) => {
         // Prevent default auto-focus behavior - we'll focus the input manually

package/src/v2/Select/MultiSelect.tsx

@@ -79,6 +79,7 @@ export function MultiSelect<T extends DataWithId>({
   shouldOverflow,
   onPointerDownOutside,
   onInteractOutside,
+  popoutPlacement,
 }: MultiSelectProps<T>) {
   const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] =
     useState<T["id"][]>([]);
@@ -335,6 +336,7 @@ export function MultiSelect<T extends DataWithId>({
     <Popout
       open={selectIsOpen}
       onOpenChange={updateIsOpen}
+      side={popoutPlacement}
       onOpenAutoFocus={(e) => {
         // Prevent default auto-focus behavior
         e.preventDefault();

package/src/v2/Select/SingleSelect.tsx

@@ -66,6 +66,7 @@ export function SingleSelect<T extends DataWithId>({
   removePlaceholderItem = false,
   onPointerDownOutside,
   onInteractOutside,
+  popoutPlacement,
 }: SingleSelectProps<T>) {
   const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = useState<
     T["id"] | null
@@ -214,6 +215,7 @@ export function SingleSelect<T extends DataWithId>({
     <Popout
       open={selectIsOpen}
       onOpenChange={updateIsOpen}
+      side={popoutPlacement}
       animationConfig={menuAnimationConfig}
       onOpenAutoFocus={(e) => {
         // Prevent default auto-focus behavior