@sproutsocial/seeds-react-menu 1.8.5 → 1.9.2

package/dist/v2/index.d.mts

@@ -26,6 +26,17 @@ 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
@@ -75,22 +86,22 @@ interface SingleSelectProps<T extends DataWithId> extends BaseSingleSelectProps<
     renderSelection?: (item: T | null) => ReactNode;
     triggerButtonProps?: any;
 }
-declare function SingleSelect<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSelection, renderSelection, renderItem, groupBy, renderGroupHeading, isVirtualized, placeholder, onSelectedItemIdChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, removePlaceholderItem, }: SingleSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function SingleSelect<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSelection, renderSelection, renderItem, groupBy, renderGroupHeading, isVirtualized, placeholder, onSelectedItemIdChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, removePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiSelectProps<T extends DataWithId> extends BaseMultiSelectProps<T> {
     renderSelections?: (items: T[]) => ReactNode;
     triggerButtonProps?: any;
     shouldOverflow?: boolean;
 }
-declare function MultiSelect<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, isOpen: controlledIsOpen, itemToKey, itemToString, renderSelections, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, placeholder, onSelectedItemIdsChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, shouldOverflow, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiSelect<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, isOpen: controlledIsOpen, itemToKey, itemToString, renderSelections, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, placeholder, onSelectedItemIdsChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, shouldOverflow, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface SingleAutocompleteProps<T extends DataWithId> extends BaseSingleAutocompleteProps<T> {
     includePlaceholderItem?: boolean;
 }
-declare function SingleAutocomplete<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, EmptyState, placeholder, onSelectedItemIdChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, includePlaceholderItem, }: SingleAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+declare function SingleAutocomplete<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, EmptyState, placeholder, onSelectedItemIdChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, includePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiAutocompleteProps<T extends DataWithId> extends BaseMultiAutocompleteProps<T> {
 }
-declare function MultiAutocomplete<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, EmptyState, placeholder, onSelectedItemIdsChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, }: MultiAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiAutocomplete<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, EmptyState, placeholder, onSelectedItemIdsChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 
 export { MultiAutocomplete, type MultiAutocompleteProps, MultiSelect, type MultiSelectProps, SingleAutocomplete, type SingleAutocompleteProps, SingleSelect, type SingleSelectProps };

package/dist/v2/index.d.ts

@@ -26,6 +26,17 @@ 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
@@ -75,22 +86,22 @@ interface SingleSelectProps<T extends DataWithId> extends BaseSingleSelectProps<
     renderSelection?: (item: T | null) => ReactNode;
     triggerButtonProps?: any;
 }
-declare function SingleSelect<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSelection, renderSelection, renderItem, groupBy, renderGroupHeading, isVirtualized, placeholder, onSelectedItemIdChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, removePlaceholderItem, }: SingleSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function SingleSelect<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSelection, renderSelection, renderItem, groupBy, renderGroupHeading, isVirtualized, placeholder, onSelectedItemIdChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, removePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiSelectProps<T extends DataWithId> extends BaseMultiSelectProps<T> {
     renderSelections?: (items: T[]) => ReactNode;
     triggerButtonProps?: any;
     shouldOverflow?: boolean;
 }
-declare function MultiSelect<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, isOpen: controlledIsOpen, itemToKey, itemToString, renderSelections, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, placeholder, onSelectedItemIdsChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, shouldOverflow, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiSelect<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, isOpen: controlledIsOpen, itemToKey, itemToString, renderSelections, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, placeholder, onSelectedItemIdsChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, shouldOverflow, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface SingleAutocompleteProps<T extends DataWithId> extends BaseSingleAutocompleteProps<T> {
     includePlaceholderItem?: boolean;
 }
-declare function SingleAutocomplete<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, EmptyState, placeholder, onSelectedItemIdChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, includePlaceholderItem, }: SingleAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+declare function SingleAutocomplete<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, EmptyState, placeholder, onSelectedItemIdChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, includePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiAutocompleteProps<T extends DataWithId> extends BaseMultiAutocompleteProps<T> {
 }
-declare function MultiAutocomplete<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, EmptyState, placeholder, onSelectedItemIdsChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, }: MultiAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiAutocomplete<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, EmptyState, placeholder, onSelectedItemIdsChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 
 export { MultiAutocomplete, type MultiAutocompleteProps, MultiSelect, type MultiSelectProps, SingleAutocomplete, type SingleAutocompleteProps, SingleSelect, type SingleSelectProps };

package/dist/v2/index.js

@@ -248,8 +248,21 @@ function Popout({
   const popoverOnOpenChange = isControlled ? onOpenChange : handleOpenChange;
   const radixRef = React2.useRef(null);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover.Root, { open: popoverOpen, onOpenChange: popoverOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Trigger, { ref: radixRef, asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Anchor, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "1px" }, children: "\xA0" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Trigger, { ref: radixRef, asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Popover.Anchor,
+        {
+          style: {
+            position: "absolute",
+            top: side === "top" ? 0 : "100%",
+            left: 0,
+            right: 0,
+            height: "1px"
+          }
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       StyledContent,
       {
@@ -798,7 +811,8 @@ var VirtualizedComboboxContent = ({
     {
       style: {
         height: `${rowVirtualizer.getTotalSize()}px`,
-        position: "relative"
+        position: "relative",
+        overflow: "hidden"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
@@ -1126,7 +1140,10 @@ function SingleSelect({
   triggerButtonProps,
   menuProps,
   inputType = "icon",
-  removePlaceholderItem = false
+  removePlaceholderItem = false,
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement
 }) {
   const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = (0, import_react8.useState)(null);
   const [uncontrolledIsOpen, setUncontrolledIsOpen] = (0, import_react8.useState)(false);
@@ -1225,6 +1242,7 @@ function SingleSelect({
     {
       open: selectIsOpen,
       onOpenChange: updateIsOpen,
+      side: popoutPlacement,
       animationConfig: menuAnimationConfig,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
@@ -1232,6 +1250,8 @@ function SingleSelect({
       onCloseAutoFocus: (e) => {
         e.preventDefault();
       },
+      onPointerDownOutside,
+      onInteractOutside,
       content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         ComboboxContent,
         {
@@ -1337,7 +1357,10 @@ function MultiSelect({
   triggerButtonProps,
   menuProps,
   inputType = "checkbox",
-  shouldOverflow
+  shouldOverflow,
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement
 }) {
   const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] = (0, import_react9.useState)([]);
   const [uncontrolledIsOpen, setUncontrolledIsOpen] = (0, import_react9.useState)(false);
@@ -1512,12 +1535,15 @@ function MultiSelect({
     {
       open: selectIsOpen,
       onOpenChange: updateIsOpen,
+      side: popoutPlacement,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
       },
       onCloseAutoFocus: (e) => {
         e.preventDefault();
       },
+      onPointerDownOutside,
+      onInteractOutside,
       animationConfig: menuAnimationConfig,
       content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         ComboboxContent,
@@ -1623,7 +1649,10 @@ function SingleAutocomplete({
   stateReducer = defaultReducer3,
   menuProps,
   inputType = "icon",
-  includePlaceholderItem = false
+  includePlaceholderItem = false,
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement
 }) {
   const [uncontrolledInputValue, setUncontrolledInputValue] = (0, import_react10.useState)("");
   const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = (0, import_react10.useState)(null);
@@ -1793,6 +1822,7 @@ function SingleAutocomplete({
     {
       open: comboboxIsOpen,
       onOpenChange: updateIsOpen,
+      side: popoutPlacement,
       animationConfig: menuAnimationConfig,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
@@ -1800,6 +1830,8 @@ function SingleAutocomplete({
       onCloseAutoFocus: (e) => {
         e.preventDefault();
       },
+      onPointerDownOutside,
+      onInteractOutside,
       content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         ComboboxContent,
         {
@@ -1905,8 +1937,12 @@ function MultiAutocomplete({
   onIsOpenChange,
   stateReducer = defaultReducer4,
   menuProps,
-  inputType = "checkbox"
+  inputType = "checkbox",
+  onPointerDownOutside,
+  onInteractOutside,
+  popoutPlacement
 }) {
+  const mousedownInPopoverRef = (0, import_react11.useRef)(false);
   const [uncontrolledInputValue, setUncontrolledInputValue] = (0, import_react11.useState)("");
   const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] = (0, import_react11.useState)([]);
   const [uncontrolledIsOpen, setUncontrolledIsOpen] = (0, import_react11.useState)(false);
@@ -1933,6 +1969,9 @@ function MultiAutocomplete({
     onInputValueChange?.(newInputValue);
   };
   const updateIsOpen = (newIsOpen) => {
+    if (!newIsOpen) {
+      updateInputValue("");
+    }
     if (!isIsOpenControlled) {
       setUncontrolledIsOpen(newIsOpen);
     }
@@ -2109,6 +2148,11 @@ function MultiAutocomplete({
     if (inputProps.onBlur) {
       inputProps.onBlur(e);
     }
+    if (mousedownInPopoverRef.current) {
+      mousedownInPopoverRef.current = false;
+      e.target.focus();
+      return;
+    }
     updateIsOpen(false);
   };
   const inputPropsToSpread = { ...inputProps };
@@ -2118,13 +2162,22 @@ function MultiAutocomplete({
     {
       open: comboboxIsOpen,
       onOpenChange: updateIsOpen,
+      side: popoutPlacement,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
       },
       onCloseAutoFocus: (e) => {
         e.preventDefault();
       },
+      onPointerDownOutside,
+      onInteractOutside,
       animationConfig: menuAnimationConfig,
+      onMouseDown: () => {
+        mousedownInPopoverRef.current = true;
+      },
+      onMouseUp: () => {
+        mousedownInPopoverRef.current = false;
+      },
       content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ComboboxContent,
         {