@sproutsocial/seeds-react-menu 1.8.5 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.8.5",
+  "version": "1.9.2",
   "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/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
@@ -72,7 +72,12 @@ export function MultiAutocomplete<T extends DataWithId>({
   stateReducer = defaultReducer,
   menuProps,
   inputType = "checkbox",
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement,
 }: MultiAutocompleteProps<T>) {
+  const mousedownInPopoverRef = useRef(false);
+
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
   const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] =
@@ -116,6 +121,9 @@ export function MultiAutocomplete<T extends DataWithId>({
   };
 
   const updateIsOpen = (newIsOpen: boolean) => {
+    if (!newIsOpen) {
+      updateInputValue("");
+    }
     if (!isIsOpenControlled) {
       setUncontrolledIsOpen(newIsOpen);
     }
@@ -358,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);
   };
@@ -371,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();
@@ -379,7 +395,15 @@ export function MultiAutocomplete<T extends DataWithId>({
         // Prevent default auto-focus behavior
         e.preventDefault();
       }}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
       animationConfig={menuAnimationConfig}
+      onMouseDown={() => {
+        mousedownInPopoverRef.current = true;
+      }}
+      onMouseUp={() => {
+        mousedownInPopoverRef.current = false;
+      }}
       content={
         <ComboboxContent
           items={items}

package/src/v2/Autocomplete/SingleAutocomplete.tsx

@@ -65,6 +65,9 @@ export function SingleAutocomplete<T extends DataWithId>({
   menuProps,
   inputType = "icon",
   includePlaceholderItem = false,
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement,
 }: SingleAutocompleteProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -291,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
@@ -300,6 +304,8 @@ export function SingleAutocomplete<T extends DataWithId>({
         // Prevent default auto-focus behavior
         e.preventDefault();
       }}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
       content={
         <ComboboxContent
           items={items}

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

@@ -18,6 +18,15 @@ export interface BaseSelectProps<T extends DataWithId> {
   onIsOpenChange?: (isOpen: boolean) => void;
   stateReducer?: any;
   menuProps?: React.HTMLAttributes<HTMLDivElement>;
+  onPointerDownOutside?: (
+    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

@@ -76,6 +76,9 @@ export function SearchableMultiSelect<T extends DataWithId>({
   onIsOpenChange,
   stateReducer = defaultReducer,
   triggerButtonProps,
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement,
 }: SearchableMultiSelectProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -365,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
@@ -383,6 +387,8 @@ export function SearchableMultiSelect<T extends DataWithId>({
         // Prevent default auto-focus behavior
         e.preventDefault();
       }}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
       content={
         <div>
           {/* Input inside the Popout */}

package/src/v2/SearchableSelect/SearchableSelect.tsx

@@ -72,6 +72,9 @@ export function SearchableSelect<T extends DataWithId>({
   onIsOpenChange,
   stateReducer = defaultReducer,
   triggerButtonProps,
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement,
 }: SearchableSelectProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -255,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
@@ -273,6 +277,8 @@ export function SearchableSelect<T extends DataWithId>({
         // Prevent default auto-focus behavior
         e.preventDefault();
       }}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
       content={
         <div>
           {/* Input inside the Popout */}

package/src/v2/Select/MultiSelect.tsx

@@ -77,6 +77,9 @@ export function MultiSelect<T extends DataWithId>({
   menuProps,
   inputType = "checkbox",
   shouldOverflow,
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement,
 }: MultiSelectProps<T>) {
   const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] =
     useState<T["id"][]>([]);
@@ -333,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();
@@ -341,6 +345,8 @@ export function MultiSelect<T extends DataWithId>({
         // Prevent default auto-focus behavior
         e.preventDefault();
       }}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
       animationConfig={menuAnimationConfig}
       content={
         <ComboboxContent

package/src/v2/Select/SingleSelect.tsx

@@ -64,6 +64,9 @@ export function SingleSelect<T extends DataWithId>({
   menuProps,
   inputType = "icon",
   removePlaceholderItem = false,
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement,
 }: SingleSelectProps<T>) {
   const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = useState<
     T["id"] | null
@@ -212,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
@@ -221,6 +225,8 @@ export function SingleSelect<T extends DataWithId>({
         // Prevent default auto-focus behavior
         e.preventDefault();
       }}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
       content={
         <ComboboxContent
           items={items}