@sproutsocial/seeds-react-menu 1.8.4 → 1.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "@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.24",
+    "@sproutsocial/seeds-react-popout": "^2.4.25",
     "@sproutsocial/seeds-react-radio": "^1.3.12",
     "@sproutsocial/seeds-react-switch": "^1.2.21",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
@@ -51,7 +51,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.6",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.7",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/v2/Autocomplete/MultiAutocomplete.tsx

@@ -72,6 +72,8 @@ export function MultiAutocomplete<T extends DataWithId>({
   stateReducer = defaultReducer,
   menuProps,
   inputType = "checkbox",
+  onPointerDownOutside,
+  onInteractOutside,
 }: MultiAutocompleteProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -379,6 +381,8 @@ export function MultiAutocomplete<T extends DataWithId>({
         // Prevent default auto-focus behavior
         e.preventDefault();
       }}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
       animationConfig={menuAnimationConfig}
       content={
         <ComboboxContent

package/src/v2/Autocomplete/SingleAutocomplete.tsx

@@ -65,6 +65,8 @@ export function SingleAutocomplete<T extends DataWithId>({
   menuProps,
   inputType = "icon",
   includePlaceholderItem = false,
+  onPointerDownOutside,
+  onInteractOutside,
 }: SingleAutocompleteProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -300,6 +302,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/Popout.tsx

@@ -46,6 +46,8 @@ export function Popout({
   onOpenAutoFocus,
   onEscapeKeyDown,
   onCloseAutoFocus,
+  onPointerDownOutside,
+  onInteractOutside,
   ...rest
 }: TypePopoutProps) {
   const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false);
@@ -90,6 +92,8 @@ export function Popout({
           onOpenAutoFocus={onOpenAutoFocus}
           onEscapeKeyDown={onEscapeKeyDown}
           onCloseAutoFocus={onCloseAutoFocus}
+          onPointerDownOutside={onPointerDownOutside}
+          onInteractOutside={onInteractOutside}
           // This only needs added to Popouts used in Menus
           // those do not need the dialog role which radix applies automatically
           role="presentation"

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

@@ -89,4 +89,21 @@ export interface TypePopoutProps
    * Can be used to prevent the default focus return behavior or customize it.
    */
   onCloseAutoFocus?: (event: Event) => void;
+
+  /**
+   * Event handler called when a pointer down event occurs outside the popout content.
+   * Call `event.preventDefault()` to prevent the default dismiss behavior.
+   * Useful when the Popout is nested inside a Radix Dialog (e.g. ModalV2) to
+   * avoid conflicts between nested DismissableLayer instances.
+   */
+  onPointerDownOutside?: (
+    event: CustomEvent<{ originalEvent: PointerEvent }>
+  ) => void;
+
+  /**
+   * Event handler called when an interaction (pointer or focus) occurs outside
+   * the popout content. Call `event.preventDefault()` to prevent the popout
+   * from closing.
+   */
+  onInteractOutside?: (event: CustomEvent<{ originalEvent: Event }>) => void;
 }

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

@@ -18,6 +18,10 @@ 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;
 }
 /**
  * Props common to all single-select components

package/src/v2/SearchableSelect/SearchableMultiSelect.tsx

@@ -76,6 +76,8 @@ export function SearchableMultiSelect<T extends DataWithId>({
   onIsOpenChange,
   stateReducer = defaultReducer,
   triggerButtonProps,
+  onPointerDownOutside,
+  onInteractOutside,
 }: SearchableMultiSelectProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -383,6 +385,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,8 @@ export function SearchableSelect<T extends DataWithId>({
   onIsOpenChange,
   stateReducer = defaultReducer,
   triggerButtonProps,
+  onPointerDownOutside,
+  onInteractOutside,
 }: SearchableSelectProps<T>) {
   const [uncontrolledInputValue, setUncontrolledInputValue] =
     useState<string>("");
@@ -273,6 +275,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,8 @@ export function MultiSelect<T extends DataWithId>({
   menuProps,
   inputType = "checkbox",
   shouldOverflow,
+  onPointerDownOutside,
+  onInteractOutside,
 }: MultiSelectProps<T>) {
   const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] =
     useState<T["id"][]>([]);
@@ -341,6 +343,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,8 @@ export function SingleSelect<T extends DataWithId>({
   menuProps,
   inputType = "icon",
   removePlaceholderItem = false,
+  onPointerDownOutside,
+  onInteractOutside,
 }: SingleSelectProps<T>) {
   const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = useState<
     T["id"] | null
@@ -221,6 +223,8 @@ export function SingleSelect<T extends DataWithId>({
         // Prevent default auto-focus behavior
         e.preventDefault();
       }}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
       content={
         <ComboboxContent
           items={items}