@sproutsocial/seeds-react-menu 1.8.6 → 1.9.2

package/dist/v2/index.d.mts

@@ -32,6 +32,11 @@ interface BaseSelectProps<T extends DataWithId> {
     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
@@ -81,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, onPointerDownOutside, onInteractOutside, }: 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, onPointerDownOutside, onInteractOutside, }: 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, onPointerDownOutside, onInteractOutside, }: 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, onPointerDownOutside, onInteractOutside, }: 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

@@ -32,6 +32,11 @@ interface BaseSelectProps<T extends DataWithId> {
     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
@@ -81,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, onPointerDownOutside, onInteractOutside, }: 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, onPointerDownOutside, onInteractOutside, }: 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, onPointerDownOutside, onInteractOutside, }: 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, onPointerDownOutside, onInteractOutside, }: 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",
@@ -1128,7 +1142,8 @@ function SingleSelect({
   inputType = "icon",
   removePlaceholderItem = false,
   onPointerDownOutside,
-  onInteractOutside
+  onInteractOutside,
+  popoutPlacement
 }) {
   const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = (0, import_react8.useState)(null);
   const [uncontrolledIsOpen, setUncontrolledIsOpen] = (0, import_react8.useState)(false);
@@ -1227,6 +1242,7 @@ function SingleSelect({
     {
       open: selectIsOpen,
       onOpenChange: updateIsOpen,
+      side: popoutPlacement,
       animationConfig: menuAnimationConfig,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
@@ -1343,7 +1359,8 @@ function MultiSelect({
   inputType = "checkbox",
   shouldOverflow,
   onPointerDownOutside,
-  onInteractOutside
+  onInteractOutside,
+  popoutPlacement
 }) {
   const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] = (0, import_react9.useState)([]);
   const [uncontrolledIsOpen, setUncontrolledIsOpen] = (0, import_react9.useState)(false);
@@ -1518,6 +1535,7 @@ function MultiSelect({
     {
       open: selectIsOpen,
       onOpenChange: updateIsOpen,
+      side: popoutPlacement,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
       },
@@ -1633,7 +1651,8 @@ function SingleAutocomplete({
   inputType = "icon",
   includePlaceholderItem = false,
   onPointerDownOutside,
-  onInteractOutside
+  onInteractOutside,
+  popoutPlacement
 }) {
   const [uncontrolledInputValue, setUncontrolledInputValue] = (0, import_react10.useState)("");
   const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = (0, import_react10.useState)(null);
@@ -1803,6 +1822,7 @@ function SingleAutocomplete({
     {
       open: comboboxIsOpen,
       onOpenChange: updateIsOpen,
+      side: popoutPlacement,
       animationConfig: menuAnimationConfig,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
@@ -1919,8 +1939,10 @@ function MultiAutocomplete({
   menuProps,
   inputType = "checkbox",
   onPointerDownOutside,
-  onInteractOutside
+  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);
@@ -1947,6 +1969,9 @@ function MultiAutocomplete({
     onInputValueChange?.(newInputValue);
   };
   const updateIsOpen = (newIsOpen) => {
+    if (!newIsOpen) {
+      updateInputValue("");
+    }
     if (!isIsOpenControlled) {
       setUncontrolledIsOpen(newIsOpen);
     }
@@ -2123,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 };
@@ -2132,6 +2162,7 @@ function MultiAutocomplete({
     {
       open: comboboxIsOpen,
       onOpenChange: updateIsOpen,
+      side: popoutPlacement,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
       },
@@ -2141,6 +2172,12 @@ function MultiAutocomplete({
       onPointerDownOutside,
       onInteractOutside,
       animationConfig: menuAnimationConfig,
+      onMouseDown: () => {
+        mousedownInPopoverRef.current = true;
+      },
+      onMouseUp: () => {
+        mousedownInPopoverRef.current = false;
+      },
       content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ComboboxContent,
         {