@sproutsocial/seeds-react-popout 2.1.1 → 2.3.0

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 // src/Popout.tsx
 import * as React from "react";
-import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import FocusLock from "react-focus-lock";
 import { Popper } from "react-popper";
@@ -28,43 +28,18 @@ var defaultAnimationConfig = {
   animate: { opacity: 1 },
   exit: { opacity: 0 },
   transition: {
+    ease: "circOut",
+    type: "tween",
     duration: process.env.NODE_ENV === "test" ? 0 : MOTION_DURATION_FAST
   }
 };
-var menuAnimationConfig = {
-  initial: {
-    scale: 0,
-    opacity: 0,
-    originX: 0,
-    originY: 0
-  },
-  animate: {
-    opacity: 1,
-    scale: 1,
-    originX: 0,
-    originY: 0,
-    transition: {
-      type: "tween",
-      duration: MOTION_DURATION_FAST,
-      ease: "circOut"
-    }
-  },
-  exit: {
-    opacity: 0,
-    scale: 1,
-    transition: {
-      type: "tween",
-      duration: MOTION_DURATION_FAST,
-      ease: "circIn"
-    }
-  }
-};
 function Popout({
   isOpen,
   setIsOpen,
   content,
   children,
   placement = "auto",
+  lockPlacement = false,
   fullWidth = false,
   zIndex = 7,
   focusOnContent = true,
@@ -72,6 +47,7 @@ function Popout({
   onClose,
   qa = {},
   popperProps,
+  animationConfig = defaultAnimationConfig,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   scheduleUpdateRef = () => {
   },
@@ -81,14 +57,13 @@ function Popout({
   "aria-haspopup": ariaHasPopup,
   disableWrapperAria = false,
   id,
-  menuPopout = false,
   ...rest
 }) {
   const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
   const [isInternalShown, setIsInternalShown] = useState(false);
+  const [lockedPlacement, setLockedPlacement] = useState();
   const isControlled = typeof isOpen === "boolean";
   const isShown = isControlled ? isOpen : isInternalShown;
-  const animationConfig = menuPopout ? menuAnimationConfig : defaultAnimationConfig;
   const setIsShown = useMemo(
     () => isControlled && setIsOpen ? setIsOpen : setIsInternalShown,
     [isControlled, setIsOpen]
@@ -163,6 +138,11 @@ function Popout({
     // immediately before the targetRef has a value set to it.
     !isControlled
   );
+  useEffect(() => {
+    if (!isShown && lockedPlacement) {
+      setLockedPlacement(void 0);
+    }
+  }, [isShown, lockedPlacement]);
   const childrenRef = (el) => {
     targetRef.current = el;
     if (targetRef.current) {
@@ -185,21 +165,31 @@ function Popout({
     shouldRenderPopout && !isInvalidContent && /* @__PURE__ */ jsx(AnimatePresence, { children: isShown && /* @__PURE__ */ jsx(PopoutComponentWrapper, { children: /* @__PURE__ */ jsx(
       Popper,
       {
+        ...popperProps,
         referenceElement: targetRef.current,
-        placement,
+        placement: lockPlacement && lockedPlacement ? lockedPlacement : placement,
         modifiers: {
           preventOverflow: {
             boundariesElement: "viewport"
-          }
+          },
+          // Disable flip after locking when lockPlacement is true
+          flip: { enabled: !(lockPlacement && lockedPlacement) },
+          ...popperProps?.modifiers
         },
-        ...popperProps,
         children: ({
           ref,
           style,
-          placement: placement2,
+          placement: actualPlacement,
           outOfBoundaries,
           scheduleUpdate
         }) => {
+          if (lockPlacement && !lockedPlacement && actualPlacement) {
+            setTimeout(() => {
+              if (lockPlacement && !lockedPlacement && actualPlacement) {
+                setLockedPlacement(actualPlacement);
+              }
+            }, 0);
+          }
           const interceptRef = (el) => {
             popoutRef.current = el;
             ref(el);
@@ -215,7 +205,7 @@ function Popout({
                 zIndex,
                 width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
               },
-              "data-placement": placement2,
+              "data-placement": actualPlacement,
               "data-qa-popout": "",
               "data-qa-popout-isopen": isOpen === true,
               color,
@@ -229,7 +219,8 @@ function Popout({
                   ...restFocusLockProps,
                   children: [
                     typeof content === "function" && content({
-                      hide
+                      hide,
+                      actualPlacement
                     }),
                     typeof content !== "function" && content
                   ]

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popout.tsx","../../src/styles.ts","../../src/PopoutTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps } from \"./PopoutTypes\";\n\nconst doesRefContainEventTarget = (\n  ref: React.MutableRefObject<HTMLDivElement | undefined>,\n  event: MouseEvent,\n) => {\n  return (\n    ref.current &&\n    event.target instanceof Node &&\n    ref.current.contains(event.target)\n  );\n};\n\nconst defaultAnimationConfig = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0 },\n  transition: {\n    duration: process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST,\n  },\n};\n\nconst menuAnimationConfig = {\n  initial: {\n    scale: 0,\n    opacity: 0,\n    originX: 0,\n    originY: 0,\n  },\n  animate: {\n    opacity: 1,\n    scale: 1,\n    originX: 0,\n    originY: 0,\n\n    transition: {\n      type: \"tween\",\n      duration: MOTION_DURATION_FAST,\n      ease: \"circOut\",\n    },\n  },\n  exit: {\n    opacity: 0,\n    scale: 1,\n    transition: {\n      type: \"tween\",\n      duration: MOTION_DURATION_FAST,\n      ease: \"circIn\",\n    },\n  },\n};\n\nexport function Popout({\n  isOpen,\n  setIsOpen,\n  content,\n  children,\n  placement = \"auto\",\n  fullWidth = false,\n  zIndex = 7,\n  focusOnContent = true,\n  onOpen,\n  onClose,\n  qa = {},\n  popperProps,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  scheduleUpdateRef = () => {},\n  appendToBody = true,\n  focusLockProps = {},\n  color,\n  \"aria-haspopup\": ariaHasPopup,\n  disableWrapperAria = false,\n  id,\n  menuPopout = false,\n  ...rest\n}: TypePopoutProps) {\n  const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;\n  const [isInternalShown, setIsInternalShown] = useState<boolean>(false);\n  const isControlled = typeof isOpen === \"boolean\";\n  const isShown = isControlled ? isOpen : isInternalShown;\n  const animationConfig = menuPopout\n    ? menuAnimationConfig\n    : defaultAnimationConfig;\n\n  const setIsShown = useMemo(\n    () => (isControlled && setIsOpen ? setIsOpen : setIsInternalShown),\n    [isControlled, setIsOpen],\n  );\n\n  const targetRef = useRef<HTMLElement | any>();\n  const popoutRef = useRef<HTMLDivElement>();\n\n  // This callback will automatically trigger a recalculation of the popout position if the content is changed\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const scheduleUpdateCallback = useRef(() => {});\n\n  useMutationObserver(\n    popoutRef.current ?? null,\n    {\n      childList: true,\n      characterData: true,\n      subtree: true,\n    },\n    scheduleUpdateCallback.current,\n  );\n\n  const {\n    autoFocus = true,\n    returnFocus = true,\n    ...restFocusLockProps\n  } = focusLockProps;\n\n  const isInvalidContent = content === null || content === undefined;\n\n  // Callbacks for showing, hiding, and toggling visibility of the popout\n  // (Not used when isOpen is passed explicitly)\n  const show = useCallback(() => setIsShown(true), [setIsShown]);\n  const hide = useCallback(() => setIsShown(false), [setIsShown]);\n  const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);\n\n  useEffect(() => {\n    const documentBody = document.body;\n\n    if (isShown && documentBody) {\n      // Callback passed to a click handler attached to document.body,\n      // allowing user to close the popout by clicking outside\n      const bodyClick = (e: MouseEvent): void => {\n        if (\n          doesRefContainEventTarget(targetRef, e) ||\n          doesRefContainEventTarget(popoutRef, e)\n        ) {\n          return;\n        }\n\n        setIsShown(false, e);\n      };\n\n      // Callback for allowing user to close by keying \"esc\"\n      const onEsc = (e: KeyboardEvent): void => {\n        // older browsers use \"Esc\"\n        if ([\"Escape\", \"Esc\"].includes(e.key)) {\n          // stop propagation to avoid interacting with other components when popout is shown\n          // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal\n          e.stopPropagation();\n          setIsShown(false, e);\n        }\n      };\n\n      documentBody.addEventListener(\"click\", bodyClick, { capture: true });\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n      return () => {\n        documentBody.removeEventListener(\"click\", bodyClick, { capture: true });\n        documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      };\n    }\n  }, [isShown, setIsShown]);\n\n  const callbackStateRef = useRef({ calledFor: isShown });\n  useEffect(() => {\n    if (callbackStateRef.current.calledFor === isShown) {\n      return;\n    }\n\n    callbackStateRef.current.calledFor = isShown;\n    if (isShown) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [isShown, onOpen, onClose]);\n\n  // WAI-Aria properties for the popout trigger, disabled if necessary\n  const ariaProps = useMemo(\n    () =>\n      disableWrapperAria\n        ? {}\n        : {\n            \"aria-expanded\": isShown,\n            \"aria-haspopup\": ariaHasPopup ? ariaHasPopup : true,\n          },\n    [isShown, ariaHasPopup, disableWrapperAria],\n  );\n\n  // In cases where a controlled popout is used (e.g. props.isOpen is true), we need\n  // to wait for the targetRef to receive a value before rendering the popout. Otherwise,\n  // the Popout component renders, but doesn't know how to position itself due the\n  // `refereElement` property being undefined.\n  const [shouldRenderPopout, setShouldRenderPopout] = useState<boolean>( // Only trigger this shouldRenderPopout logic when using a controlled component.\n    // The reason for that is because controlled components may render the popout\n    // immediately before the targetRef has a value set to it.\n    !isControlled,\n  );\n\n  const childrenRef = (el: React.ElementRef<any> | HTMLElement) => {\n    targetRef.current = el;\n\n    if (targetRef.current) {\n      setShouldRenderPopout(true);\n    }\n  };\n\n  return (\n    <React.Fragment>\n      {typeof children === \"function\" ? (\n        children({\n          ref: childrenRef,\n          toggle,\n          show,\n          hide,\n          ariaProps,\n        })\n      ) : (\n        <TargetWrapper {...qa} id={id} {...rest} ref={childrenRef}>\n          {React.cloneElement(children, {\n            ...ariaProps,\n            ...(!isControlled\n              ? {\n                  onClick: toggle,\n                }\n              : undefined),\n          })}\n        </TargetWrapper>\n      )}\n      {shouldRenderPopout && !isInvalidContent && (\n        <AnimatePresence>\n          {isShown && (\n            <PopoutComponentWrapper>\n              <Popper\n                referenceElement={targetRef.current}\n                placement={placement}\n                modifiers={{\n                  preventOverflow: {\n                    boundariesElement: \"viewport\",\n                  },\n                }}\n                {...popperProps}\n              >\n                {({\n                  ref,\n                  style,\n                  placement,\n                  outOfBoundaries,\n                  scheduleUpdate,\n                }) => {\n                  const interceptRef = (el: HTMLDivElement | undefined) => {\n                    popoutRef.current = el;\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    ref(el);\n                  };\n\n                  scheduleUpdateCallback.current = scheduleUpdate;\n                  scheduleUpdateRef(scheduleUpdate);\n\n                  return (\n                    <div\n                      ref={interceptRef}\n                      style={{\n                        ...style,\n                        zIndex,\n                        width:\n                          fullWidth && targetRef.current\n                            ? targetRef.current.offsetWidth\n                            : \"initial\",\n                      }}\n                      data-placement={placement}\n                      data-qa-popout=\"\"\n                      data-qa-popout-isopen={isOpen === true}\n                      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                      // @ts-ignore\n                      color={color}\n                      {...rest}\n                    >\n                      {!outOfBoundaries && (\n                        <motion.div {...animationConfig}>\n                          <FocusLock\n                            autoFocus={autoFocus}\n                            returnFocus={returnFocus}\n                            disabled={!focusOnContent}\n                            {...restFocusLockProps}\n                          >\n                            {typeof content === \"function\" &&\n                              content({\n                                hide,\n                              })}\n                            {typeof content !== \"function\" && content}\n                          </FocusLock>\n                        </motion.div>\n                      )}\n                    </div>\n                  );\n                }}\n              </Popper>\n            </PopoutComponentWrapper>\n          )}\n        </AnimatePresence>\n      )}\n    </React.Fragment>\n  );\n}\n\nconst PopoutContent = ({ children, ...rest }: TypeBoxProps) => (\n  <Box\n    bg=\"container.background.base\"\n    color=\"text.body\"\n    border={500}\n    borderColor=\"container.border.base\"\n    borderRadius=\"outer\"\n    boxShadow=\"medium\"\n    p={400}\n    m={300}\n    {...rest}\n  >\n    {children}\n  </Box>\n);\n\nPopoutContent.displayName = \"Popout.Content\";\nPopout.Content = PopoutContent;\n\nexport default Popout;\n","import styled from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const TargetWrapper = styled.div`\n  display: inline-block;\n  ${COMMON}\n  ${LAYOUT}\n`;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from \"react\";\nimport type { PopperProps } from \"react-popper\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type EnumPlacements = Exclude<PopperProps[\"placement\"], undefined>;\n\nexport interface TypeFocusLockProps {\n  disabled?: boolean;\n  returnFocus?:\n    | boolean\n    | FocusOptions\n    | ((returnTo: Element) => boolean | FocusOptions);\n  persistentFocus?: boolean;\n  autoFocus?: boolean;\n  crossFrame?: boolean;\n  noFocusGuards?: boolean | \"tail\";\n  group?: string;\n  className?: string;\n  onActivation?: (node: HTMLElement) => void;\n  onDeactivation?: (node: HTMLElement) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  lockProps?: any;\n  ref?: any;\n  whiteList?: (activeElement: HTMLElement) => boolean;\n  shards?: Array<any>;\n  children?: React.ReactNode;\n}\n\nexport interface TypePopoutProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"div\">,\n      \"color\" | \"children\" | \"content\"\n    > {\n  /**\n   * Whether Popout should automatically add aria-attributes to its wrapped elements\n   */\n  disableWrapperAria?: boolean;\n  /**\n   * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.\n   */\n  isOpen?: boolean;\n\n  /**\n   * If you use the isOpen prop you will need to pass a handler to change the state of the popout\n   */\n  setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;\n\n  /**\n   * The content to be shown in the popout. If there is no content, just the children are rendered\n   */\n  content:\n    | (React.ReactElement<any> | null | undefined)\n    | (\n        | ((opts: { hide: () => void }) => React.ReactElement<any>)\n        | null\n        | undefined\n      );\n\n  /**\n   * The content that the popout should be attached to\n   */\n  children:\n    | React.ReactElement<any>\n    | ((opts: {\n        ref: (arg0: React.ElementRef<any> | HTMLElement) => void;\n        toggle: () => void;\n        show: () => void;\n        hide: () => void;\n        ariaProps: Record<string, any>;\n      }) => React.ReactNode);\n\n  /** How the popped-out content should be placed, in relationship to the children */\n  placement?: EnumPlacements;\n\n  /**\n   * Should the popped-out content inherit its width from the children?\n   * This is useful for typeaheads and other places where a popout needs to match the width of a given element.\n   */\n  fullWidth?: boolean;\n\n  /**\n   *  When the popout has opened, should we focus on its content?\n   *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.\n   *  Upon closing the popout, focus will be returned to the popout's target.\n   *  If nothing within your popout's content is focusable, this prop will do nothing.\n   */\n  focusOnContent?: boolean;\n  qa?: Record<string, string>;\n  zIndex?: number;\n\n  /**\n   * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation\n   */\n  popperProps?: Partial<PopperProps>;\n  onClose?: () => void;\n  onOpen?: () => void;\n\n  /**\n   * And optional callback to receive the scheduleUpdate function.\n   * Use the function to recalculate the popout position in relation to the contents.\n   */\n  scheduleUpdateRef?: (arg0: () => void) => void;\n\n  /**\n   * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree\n   */\n  appendToBody?: boolean;\n\n  /**\n   * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api\n   */\n  focusLockProps?: TypeFocusLockProps;\n  menuPopout?: boolean;\n}\n","import Popout from \"./Popout\";\n\nexport default Popout;\nexport { Popout };\nexport * from \"./PopoutTypes\";\n"],"mappings":"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","names":["placement"]}
+{"version":3,"sources":["../../src/Popout.tsx","../../src/styles.ts","../../src/PopoutTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps } from \"./PopoutTypes\";\n\nconst doesRefContainEventTarget = (\n  ref: React.MutableRefObject<HTMLDivElement | undefined>,\n  event: MouseEvent\n) => {\n  return (\n    ref.current &&\n    event.target instanceof Node &&\n    ref.current.contains(event.target)\n  );\n};\n\nconst defaultAnimationConfig = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0 },\n  transition: {\n    ease: \"circOut\",\n    type: \"tween\",\n    duration: process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST,\n  },\n};\n\nexport function Popout({\n  isOpen,\n  setIsOpen,\n  content,\n  children,\n  placement = \"auto\",\n  lockPlacement = false,\n  fullWidth = false,\n  zIndex = 7,\n  focusOnContent = true,\n  onOpen,\n  onClose,\n  qa = {},\n  popperProps,\n  animationConfig = defaultAnimationConfig,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  scheduleUpdateRef = () => {},\n  appendToBody = true,\n  focusLockProps = {},\n  color,\n  \"aria-haspopup\": ariaHasPopup,\n  disableWrapperAria = false,\n  id,\n  ...rest\n}: TypePopoutProps) {\n  const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;\n  const [isInternalShown, setIsInternalShown] = useState<boolean>(false);\n  const [lockedPlacement, setLockedPlacement] = useState<\n    typeof placement | undefined\n  >();\n  const isControlled = typeof isOpen === \"boolean\";\n  const isShown = isControlled ? isOpen : isInternalShown;\n  const setIsShown = useMemo(\n    () => (isControlled && setIsOpen ? setIsOpen : setIsInternalShown),\n    [isControlled, setIsOpen]\n  );\n\n  const targetRef = useRef<HTMLElement | any>();\n  const popoutRef = useRef<HTMLDivElement>();\n\n  // This callback will automatically trigger a recalculation of the popout position if the content is changed\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const scheduleUpdateCallback = useRef(() => {});\n\n  useMutationObserver(\n    popoutRef.current ?? null,\n    {\n      childList: true,\n      characterData: true,\n      subtree: true,\n    },\n    scheduleUpdateCallback.current\n  );\n\n  const {\n    autoFocus = true,\n    returnFocus = true,\n    ...restFocusLockProps\n  } = focusLockProps;\n\n  const isInvalidContent = content === null || content === undefined;\n\n  // Callbacks for showing, hiding, and toggling visibility of the popout\n  // (Not used when isOpen is passed explicitly)\n  const show = useCallback(() => setIsShown(true), [setIsShown]);\n  const hide = useCallback(() => setIsShown(false), [setIsShown]);\n  const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);\n\n  useEffect(() => {\n    const documentBody = document.body;\n\n    if (isShown && documentBody) {\n      // Callback passed to a click handler attached to document.body,\n      // allowing user to close the popout by clicking outside\n      const bodyClick = (e: MouseEvent): void => {\n        if (\n          doesRefContainEventTarget(targetRef, e) ||\n          doesRefContainEventTarget(popoutRef, e)\n        ) {\n          return;\n        }\n\n        setIsShown(false, e);\n      };\n\n      // Callback for allowing user to close by keying \"esc\"\n      const onEsc = (e: KeyboardEvent): void => {\n        // older browsers use \"Esc\"\n        if ([\"Escape\", \"Esc\"].includes(e.key)) {\n          // stop propagation to avoid interacting with other components when popout is shown\n          // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal\n          e.stopPropagation();\n          setIsShown(false, e);\n        }\n      };\n\n      documentBody.addEventListener(\"click\", bodyClick, { capture: true });\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n      return () => {\n        documentBody.removeEventListener(\"click\", bodyClick, { capture: true });\n        documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      };\n    }\n  }, [isShown, setIsShown]);\n\n  const callbackStateRef = useRef({ calledFor: isShown });\n  useEffect(() => {\n    if (callbackStateRef.current.calledFor === isShown) {\n      return;\n    }\n\n    callbackStateRef.current.calledFor = isShown;\n    if (isShown) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [isShown, onOpen, onClose]);\n\n  // WAI-Aria properties for the popout trigger, disabled if necessary\n  const ariaProps = useMemo(\n    () =>\n      disableWrapperAria\n        ? {}\n        : {\n            \"aria-expanded\": isShown,\n            \"aria-haspopup\": ariaHasPopup ? ariaHasPopup : true,\n          },\n    [isShown, ariaHasPopup, disableWrapperAria]\n  );\n\n  // In cases where a controlled popout is used (e.g. props.isOpen is true), we need\n  // to wait for the targetRef to receive a value before rendering the popout. Otherwise,\n  // the Popout component renders, but doesn't know how to position itself due the\n  // `refereElement` property being undefined.\n  const [shouldRenderPopout, setShouldRenderPopout] = useState<boolean>( // Only trigger this shouldRenderPopout logic when using a controlled component.\n    // The reason for that is because controlled components may render the popout\n    // immediately before the targetRef has a value set to it.\n    !isControlled\n  );\n\n  // Reset the locked placement when the popout is closed\n  useEffect(() => {\n    if (!isShown && lockedPlacement) {\n      setLockedPlacement(undefined);\n    }\n  }, [isShown, lockedPlacement]);\n\n  const childrenRef = (el: React.ElementRef<any> | HTMLElement) => {\n    targetRef.current = el;\n\n    if (targetRef.current) {\n      setShouldRenderPopout(true);\n    }\n  };\n\n  return (\n    <React.Fragment>\n      {typeof children === \"function\" ? (\n        children({\n          ref: childrenRef,\n          toggle,\n          show,\n          hide,\n          ariaProps,\n        })\n      ) : (\n        <TargetWrapper {...qa} id={id} {...rest} ref={childrenRef}>\n          {React.cloneElement(children, {\n            ...ariaProps,\n            ...(!isControlled\n              ? {\n                  onClick: toggle,\n                }\n              : undefined),\n          })}\n        </TargetWrapper>\n      )}\n      {shouldRenderPopout && !isInvalidContent && (\n        <AnimatePresence>\n          {isShown && (\n            <PopoutComponentWrapper>\n              <Popper\n                {...popperProps}\n                referenceElement={targetRef.current}\n                placement={\n                  lockPlacement && lockedPlacement ? lockedPlacement : placement\n                }\n                modifiers={{\n                  preventOverflow: {\n                    boundariesElement: \"viewport\",\n                  },\n                  // Disable flip after locking when lockPlacement is true\n                  flip: { enabled: !(lockPlacement && lockedPlacement) },\n                  ...popperProps?.modifiers,\n                }}\n              >\n                {({\n                  ref,\n                  style,\n                  placement: actualPlacement,\n                  outOfBoundaries,\n                  scheduleUpdate,\n                }) => {\n                  // HACK: We use setTimeout to defer locking the placement until after render,\n                  // because Popper v1 only exposes the computed placement in the render prop,\n                  // and React does not allow setState during render.\n                  if (lockPlacement && !lockedPlacement && actualPlacement) {\n                    setTimeout(() => {\n                      // Check again before setting to avoid a race condition\n                      if (\n                        lockPlacement &&\n                        !lockedPlacement &&\n                        actualPlacement\n                      ) {\n                        setLockedPlacement(actualPlacement);\n                      }\n                    }, 0);\n                  }\n\n                  const interceptRef = (el: HTMLDivElement | undefined) => {\n                    popoutRef.current = el;\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    ref(el);\n                  };\n\n                  scheduleUpdateCallback.current = scheduleUpdate;\n                  scheduleUpdateRef(scheduleUpdate);\n\n                  return (\n                    <div\n                      ref={interceptRef}\n                      style={{\n                        ...style,\n                        zIndex,\n                        width:\n                          fullWidth && targetRef.current\n                            ? targetRef.current.offsetWidth\n                            : \"initial\",\n                      }}\n                      data-placement={actualPlacement}\n                      data-qa-popout=\"\"\n                      data-qa-popout-isopen={isOpen === true}\n                      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                      // @ts-ignore\n                      color={color}\n                      {...rest}\n                    >\n                      {!outOfBoundaries && (\n                        <motion.div {...animationConfig}>\n                          <FocusLock\n                            autoFocus={autoFocus}\n                            returnFocus={returnFocus}\n                            disabled={!focusOnContent}\n                            {...restFocusLockProps}\n                          >\n                            {typeof content === \"function\" &&\n                              content({\n                                hide,\n                                actualPlacement,\n                              })}\n                            {typeof content !== \"function\" && content}\n                          </FocusLock>\n                        </motion.div>\n                      )}\n                    </div>\n                  );\n                }}\n              </Popper>\n            </PopoutComponentWrapper>\n          )}\n        </AnimatePresence>\n      )}\n    </React.Fragment>\n  );\n}\n\nconst PopoutContent = ({ children, ...rest }: TypeBoxProps) => (\n  <Box\n    bg=\"container.background.base\"\n    color=\"text.body\"\n    border={500}\n    borderColor=\"container.border.base\"\n    borderRadius=\"outer\"\n    boxShadow=\"medium\"\n    p={400}\n    m={300}\n    {...rest}\n  >\n    {children}\n  </Box>\n);\n\nPopoutContent.displayName = \"Popout.Content\";\nPopout.Content = PopoutContent;\n\nexport default Popout;\n","import styled from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const TargetWrapper = styled.div`\n  display: inline-block;\n  ${COMMON}\n  ${LAYOUT}\n`;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from \"react\";\nimport type { PopperProps } from \"react-popper\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { HTMLMotionProps } from \"motion/react\";\n\nexport type EnumPlacements = Exclude<PopperProps[\"placement\"], undefined>;\n\nexport interface TypeFocusLockProps {\n  disabled?: boolean;\n  returnFocus?:\n    | boolean\n    | FocusOptions\n    | ((returnTo: Element) => boolean | FocusOptions);\n  persistentFocus?: boolean;\n  autoFocus?: boolean;\n  crossFrame?: boolean;\n  noFocusGuards?: boolean | \"tail\";\n  group?: string;\n  className?: string;\n  onActivation?: (node: HTMLElement) => void;\n  onDeactivation?: (node: HTMLElement) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  lockProps?: any;\n  ref?: any;\n  whiteList?: (activeElement: HTMLElement) => boolean;\n  shards?: Array<any>;\n  children?: React.ReactNode;\n}\n\nexport interface TypePopoutProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"div\">,\n      \"color\" | \"children\" | \"content\"\n    > {\n  /**\n   * Whether Popout should automatically add aria-attributes to its wrapped elements\n   */\n  disableWrapperAria?: boolean;\n  /**\n   * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.\n   */\n  isOpen?: boolean;\n\n  /**\n   * If you use the isOpen prop you will need to pass a handler to change the state of the popout\n   */\n  setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;\n\n  /**\n   * The content to be shown in the popout. If there is no content, just the children are rendered\n   */\n  content:\n    | (React.ReactElement<any> | null | undefined)\n    | (\n        | ((opts: {\n            hide: () => void;\n            actualPlacement: EnumPlacements;\n          }) => React.ReactElement<any>)\n        | null\n        | undefined\n      );\n\n  /**\n   * The content that the popout should be attached to\n   */\n  children:\n    | React.ReactElement<any>\n    | ((opts: {\n        ref: (arg0: React.ElementRef<any> | HTMLElement) => void;\n        toggle: () => void;\n        show: () => void;\n        hide: () => void;\n        ariaProps: Record<string, any>;\n      }) => React.ReactNode);\n\n  /** How the popped-out content should be placed, in relationship to the children */\n  placement?: EnumPlacements;\n\n  /**\n   * Should the popout be locked in place? This will prevent it from moving when the user scrolls or if the height of the popout changes.\n   * This is useful for modals and other places where you want the popout to stay in place\n   * after it has been opened but want to use an auto placement strategy.\n   */\n  lockPlacement?: boolean;\n\n  /**\n   * Should the popped-out content inherit its width from the children?\n   * This is useful for typeaheads and other places where a popout needs to match the width of a given element.\n   */\n  fullWidth?: boolean;\n\n  /**\n   *  When the popout has opened, should we focus on its content?\n   *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.\n   *  Upon closing the popout, focus will be returned to the popout's target.\n   *  If nothing within your popout's content is focusable, this prop will do nothing.\n   */\n  focusOnContent?: boolean;\n  qa?: Record<string, string>;\n  zIndex?: number;\n  /** Used to override the default Popout animations.\n   *  Any props that are valid for use on a Motion div can be passed here as an object.\n   *  See https://motion.dev/docs/react-motion-component#props */\n  animationConfig?: Omit<HTMLMotionProps<\"div\">, \"children\">;\n\n  /**\n   * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation\n   */\n  popperProps?: Partial<PopperProps>;\n  onClose?: () => void;\n  onOpen?: () => void;\n\n  /**\n   * And optional callback to receive the scheduleUpdate function.\n   * Use the function to recalculate the popout position in relation to the contents.\n   */\n  scheduleUpdateRef?: (arg0: () => void) => void;\n\n  /**\n   * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree\n   */\n  appendToBody?: boolean;\n\n  /**\n   * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api\n   */\n  focusLockProps?: TypeFocusLockProps;\n}\n","import Popout from \"./Popout\";\n\nexport default Popout;\nexport { Popout };\nexport * from \"./PopoutTypes\";\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 import * as React from 'react';
 import { PopperProps } from 'react-popper';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps } from '@sproutsocial/seeds-react-system-props';
+import { HTMLMotionProps } from 'motion/react';
 
 type EnumPlacements = Exclude<PopperProps["placement"], undefined>;
 interface TypeFocusLockProps {
@@ -41,6 +42,7 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
      */
     content: (React.ReactElement<any> | null | undefined) | (((opts: {
         hide: () => void;
+        actualPlacement: EnumPlacements;
     }) => React.ReactElement<any>) | null | undefined);
     /**
      * The content that the popout should be attached to
@@ -54,6 +56,12 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     }) => React.ReactNode);
     /** How the popped-out content should be placed, in relationship to the children */
     placement?: EnumPlacements;
+    /**
+     * Should the popout be locked in place? This will prevent it from moving when the user scrolls or if the height of the popout changes.
+     * This is useful for modals and other places where you want the popout to stay in place
+     * after it has been opened but want to use an auto placement strategy.
+     */
+    lockPlacement?: boolean;
     /**
      * Should the popped-out content inherit its width from the children?
      * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
@@ -68,6 +76,10 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     focusOnContent?: boolean;
     qa?: Record<string, string>;
     zIndex?: number;
+    /** Used to override the default Popout animations.
+     *  Any props that are valid for use on a Motion div can be passed here as an object.
+     *  See https://motion.dev/docs/react-motion-component#props */
+    animationConfig?: Omit<HTMLMotionProps<"div">, "children">;
     /**
      * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation
      */
@@ -87,10 +99,9 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
      * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api
      */
     focusLockProps?: TypeFocusLockProps;
-    menuPopout?: boolean;
 }
 
-declare function Popout({ isOpen, setIsOpen, content, children, placement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, menuPopout, ...rest }: TypePopoutProps): react_jsx_runtime.JSX.Element;
+declare function Popout({ isOpen, setIsOpen, content, children, placement, lockPlacement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, animationConfig, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, ...rest }: TypePopoutProps): react_jsx_runtime.JSX.Element;
 declare namespace Popout {
     var Content: {
         ({ children, ...rest }: TypeBoxProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 import * as React from 'react';
 import { PopperProps } from 'react-popper';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps } from '@sproutsocial/seeds-react-system-props';
+import { HTMLMotionProps } from 'motion/react';
 
 type EnumPlacements = Exclude<PopperProps["placement"], undefined>;
 interface TypeFocusLockProps {
@@ -41,6 +42,7 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
      */
     content: (React.ReactElement<any> | null | undefined) | (((opts: {
         hide: () => void;
+        actualPlacement: EnumPlacements;
     }) => React.ReactElement<any>) | null | undefined);
     /**
      * The content that the popout should be attached to
@@ -54,6 +56,12 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     }) => React.ReactNode);
     /** How the popped-out content should be placed, in relationship to the children */
     placement?: EnumPlacements;
+    /**
+     * Should the popout be locked in place? This will prevent it from moving when the user scrolls or if the height of the popout changes.
+     * This is useful for modals and other places where you want the popout to stay in place
+     * after it has been opened but want to use an auto placement strategy.
+     */
+    lockPlacement?: boolean;
     /**
      * Should the popped-out content inherit its width from the children?
      * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
@@ -68,6 +76,10 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     focusOnContent?: boolean;
     qa?: Record<string, string>;
     zIndex?: number;
+    /** Used to override the default Popout animations.
+     *  Any props that are valid for use on a Motion div can be passed here as an object.
+     *  See https://motion.dev/docs/react-motion-component#props */
+    animationConfig?: Omit<HTMLMotionProps<"div">, "children">;
     /**
      * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation
      */
@@ -87,10 +99,9 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
      * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api
      */
     focusLockProps?: TypeFocusLockProps;
-    menuPopout?: boolean;
 }
 
-declare function Popout({ isOpen, setIsOpen, content, children, placement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, menuPopout, ...rest }: TypePopoutProps): react_jsx_runtime.JSX.Element;
+declare function Popout({ isOpen, setIsOpen, content, children, placement, lockPlacement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, animationConfig, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, ...rest }: TypePopoutProps): react_jsx_runtime.JSX.Element;
 declare namespace Popout {
     var Content: {
         ({ children, ...rest }: TypeBoxProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -65,43 +65,18 @@ var defaultAnimationConfig = {
   animate: { opacity: 1 },
   exit: { opacity: 0 },
   transition: {
+    ease: "circOut",
+    type: "tween",
     duration: process.env.NODE_ENV === "test" ? 0 : import_unitless.MOTION_DURATION_FAST
   }
 };
-var menuAnimationConfig = {
-  initial: {
-    scale: 0,
-    opacity: 0,
-    originX: 0,
-    originY: 0
-  },
-  animate: {
-    opacity: 1,
-    scale: 1,
-    originX: 0,
-    originY: 0,
-    transition: {
-      type: "tween",
-      duration: import_unitless.MOTION_DURATION_FAST,
-      ease: "circOut"
-    }
-  },
-  exit: {
-    opacity: 0,
-    scale: 1,
-    transition: {
-      type: "tween",
-      duration: import_unitless.MOTION_DURATION_FAST,
-      ease: "circIn"
-    }
-  }
-};
 function Popout({
   isOpen,
   setIsOpen,
   content,
   children,
   placement = "auto",
+  lockPlacement = false,
   fullWidth = false,
   zIndex = 7,
   focusOnContent = true,
@@ -109,6 +84,7 @@ function Popout({
   onClose,
   qa = {},
   popperProps,
+  animationConfig = defaultAnimationConfig,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   scheduleUpdateRef = () => {
   },
@@ -118,14 +94,13 @@ function Popout({
   "aria-haspopup": ariaHasPopup,
   disableWrapperAria = false,
   id,
-  menuPopout = false,
   ...rest
 }) {
   const PopoutComponentWrapper = appendToBody ? import_seeds_react_portal.default : React.Fragment;
   const [isInternalShown, setIsInternalShown] = (0, import_react.useState)(false);
+  const [lockedPlacement, setLockedPlacement] = (0, import_react.useState)();
   const isControlled = typeof isOpen === "boolean";
   const isShown = isControlled ? isOpen : isInternalShown;
-  const animationConfig = menuPopout ? menuAnimationConfig : defaultAnimationConfig;
   const setIsShown = (0, import_react.useMemo)(
     () => isControlled && setIsOpen ? setIsOpen : setIsInternalShown,
     [isControlled, setIsOpen]
@@ -200,6 +175,11 @@ function Popout({
     // immediately before the targetRef has a value set to it.
     !isControlled
   );
+  (0, import_react.useEffect)(() => {
+    if (!isShown && lockedPlacement) {
+      setLockedPlacement(void 0);
+    }
+  }, [isShown, lockedPlacement]);
   const childrenRef = (el) => {
     targetRef.current = el;
     if (targetRef.current) {
@@ -222,21 +202,31 @@ function Popout({
     shouldRenderPopout && !isInvalidContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: isShown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoutComponentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_popper.Popper,
       {
+        ...popperProps,
         referenceElement: targetRef.current,
-        placement,
+        placement: lockPlacement && lockedPlacement ? lockedPlacement : placement,
         modifiers: {
           preventOverflow: {
             boundariesElement: "viewport"
-          }
+          },
+          // Disable flip after locking when lockPlacement is true
+          flip: { enabled: !(lockPlacement && lockedPlacement) },
+          ...popperProps?.modifiers
         },
-        ...popperProps,
         children: ({
           ref,
           style,
-          placement: placement2,
+          placement: actualPlacement,
           outOfBoundaries,
           scheduleUpdate
         }) => {
+          if (lockPlacement && !lockedPlacement && actualPlacement) {
+            setTimeout(() => {
+              if (lockPlacement && !lockedPlacement && actualPlacement) {
+                setLockedPlacement(actualPlacement);
+              }
+            }, 0);
+          }
           const interceptRef = (el) => {
             popoutRef.current = el;
             ref(el);
@@ -252,7 +242,7 @@ function Popout({
                 zIndex,
                 width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
               },
-              "data-placement": placement2,
+              "data-placement": actualPlacement,
               "data-qa-popout": "",
               "data-qa-popout-isopen": isOpen === true,
               color,
@@ -266,7 +256,8 @@ function Popout({
                   ...restFocusLockProps,
                   children: [
                     typeof content === "function" && content({
-                      hide
+                      hide,
+                      actualPlacement
                     }),
                     typeof content !== "function" && content
                   ]

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Popout.tsx","../src/styles.ts","../src/PopoutTypes.ts"],"sourcesContent":["import Popout from \"./Popout\";\n\nexport default Popout;\nexport { Popout };\nexport * from \"./PopoutTypes\";\n","import * as React from \"react\";\nimport { useState, useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps } from \"./PopoutTypes\";\n\nconst doesRefContainEventTarget = (\n  ref: React.MutableRefObject<HTMLDivElement | undefined>,\n  event: MouseEvent,\n) => {\n  return (\n    ref.current &&\n    event.target instanceof Node &&\n    ref.current.contains(event.target)\n  );\n};\n\nconst defaultAnimationConfig = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0 },\n  transition: {\n    duration: process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST,\n  },\n};\n\nconst menuAnimationConfig = {\n  initial: {\n    scale: 0,\n    opacity: 0,\n    originX: 0,\n    originY: 0,\n  },\n  animate: {\n    opacity: 1,\n    scale: 1,\n    originX: 0,\n    originY: 0,\n\n    transition: {\n      type: \"tween\",\n      duration: MOTION_DURATION_FAST,\n      ease: \"circOut\",\n    },\n  },\n  exit: {\n    opacity: 0,\n    scale: 1,\n    transition: {\n      type: \"tween\",\n      duration: MOTION_DURATION_FAST,\n      ease: \"circIn\",\n    },\n  },\n};\n\nexport function Popout({\n  isOpen,\n  setIsOpen,\n  content,\n  children,\n  placement = \"auto\",\n  fullWidth = false,\n  zIndex = 7,\n  focusOnContent = true,\n  onOpen,\n  onClose,\n  qa = {},\n  popperProps,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  scheduleUpdateRef = () => {},\n  appendToBody = true,\n  focusLockProps = {},\n  color,\n  \"aria-haspopup\": ariaHasPopup,\n  disableWrapperAria = false,\n  id,\n  menuPopout = false,\n  ...rest\n}: TypePopoutProps) {\n  const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;\n  const [isInternalShown, setIsInternalShown] = useState<boolean>(false);\n  const isControlled = typeof isOpen === \"boolean\";\n  const isShown = isControlled ? isOpen : isInternalShown;\n  const animationConfig = menuPopout\n    ? menuAnimationConfig\n    : defaultAnimationConfig;\n\n  const setIsShown = useMemo(\n    () => (isControlled && setIsOpen ? setIsOpen : setIsInternalShown),\n    [isControlled, setIsOpen],\n  );\n\n  const targetRef = useRef<HTMLElement | any>();\n  const popoutRef = useRef<HTMLDivElement>();\n\n  // This callback will automatically trigger a recalculation of the popout position if the content is changed\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const scheduleUpdateCallback = useRef(() => {});\n\n  useMutationObserver(\n    popoutRef.current ?? null,\n    {\n      childList: true,\n      characterData: true,\n      subtree: true,\n    },\n    scheduleUpdateCallback.current,\n  );\n\n  const {\n    autoFocus = true,\n    returnFocus = true,\n    ...restFocusLockProps\n  } = focusLockProps;\n\n  const isInvalidContent = content === null || content === undefined;\n\n  // Callbacks for showing, hiding, and toggling visibility of the popout\n  // (Not used when isOpen is passed explicitly)\n  const show = useCallback(() => setIsShown(true), [setIsShown]);\n  const hide = useCallback(() => setIsShown(false), [setIsShown]);\n  const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);\n\n  useEffect(() => {\n    const documentBody = document.body;\n\n    if (isShown && documentBody) {\n      // Callback passed to a click handler attached to document.body,\n      // allowing user to close the popout by clicking outside\n      const bodyClick = (e: MouseEvent): void => {\n        if (\n          doesRefContainEventTarget(targetRef, e) ||\n          doesRefContainEventTarget(popoutRef, e)\n        ) {\n          return;\n        }\n\n        setIsShown(false, e);\n      };\n\n      // Callback for allowing user to close by keying \"esc\"\n      const onEsc = (e: KeyboardEvent): void => {\n        // older browsers use \"Esc\"\n        if ([\"Escape\", \"Esc\"].includes(e.key)) {\n          // stop propagation to avoid interacting with other components when popout is shown\n          // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal\n          e.stopPropagation();\n          setIsShown(false, e);\n        }\n      };\n\n      documentBody.addEventListener(\"click\", bodyClick, { capture: true });\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n      return () => {\n        documentBody.removeEventListener(\"click\", bodyClick, { capture: true });\n        documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      };\n    }\n  }, [isShown, setIsShown]);\n\n  const callbackStateRef = useRef({ calledFor: isShown });\n  useEffect(() => {\n    if (callbackStateRef.current.calledFor === isShown) {\n      return;\n    }\n\n    callbackStateRef.current.calledFor = isShown;\n    if (isShown) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [isShown, onOpen, onClose]);\n\n  // WAI-Aria properties for the popout trigger, disabled if necessary\n  const ariaProps = useMemo(\n    () =>\n      disableWrapperAria\n        ? {}\n        : {\n            \"aria-expanded\": isShown,\n            \"aria-haspopup\": ariaHasPopup ? ariaHasPopup : true,\n          },\n    [isShown, ariaHasPopup, disableWrapperAria],\n  );\n\n  // In cases where a controlled popout is used (e.g. props.isOpen is true), we need\n  // to wait for the targetRef to receive a value before rendering the popout. Otherwise,\n  // the Popout component renders, but doesn't know how to position itself due the\n  // `refereElement` property being undefined.\n  const [shouldRenderPopout, setShouldRenderPopout] = useState<boolean>( // Only trigger this shouldRenderPopout logic when using a controlled component.\n    // The reason for that is because controlled components may render the popout\n    // immediately before the targetRef has a value set to it.\n    !isControlled,\n  );\n\n  const childrenRef = (el: React.ElementRef<any> | HTMLElement) => {\n    targetRef.current = el;\n\n    if (targetRef.current) {\n      setShouldRenderPopout(true);\n    }\n  };\n\n  return (\n    <React.Fragment>\n      {typeof children === \"function\" ? (\n        children({\n          ref: childrenRef,\n          toggle,\n          show,\n          hide,\n          ariaProps,\n        })\n      ) : (\n        <TargetWrapper {...qa} id={id} {...rest} ref={childrenRef}>\n          {React.cloneElement(children, {\n            ...ariaProps,\n            ...(!isControlled\n              ? {\n                  onClick: toggle,\n                }\n              : undefined),\n          })}\n        </TargetWrapper>\n      )}\n      {shouldRenderPopout && !isInvalidContent && (\n        <AnimatePresence>\n          {isShown && (\n            <PopoutComponentWrapper>\n              <Popper\n                referenceElement={targetRef.current}\n                placement={placement}\n                modifiers={{\n                  preventOverflow: {\n                    boundariesElement: \"viewport\",\n                  },\n                }}\n                {...popperProps}\n              >\n                {({\n                  ref,\n                  style,\n                  placement,\n                  outOfBoundaries,\n                  scheduleUpdate,\n                }) => {\n                  const interceptRef = (el: HTMLDivElement | undefined) => {\n                    popoutRef.current = el;\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    ref(el);\n                  };\n\n                  scheduleUpdateCallback.current = scheduleUpdate;\n                  scheduleUpdateRef(scheduleUpdate);\n\n                  return (\n                    <div\n                      ref={interceptRef}\n                      style={{\n                        ...style,\n                        zIndex,\n                        width:\n                          fullWidth && targetRef.current\n                            ? targetRef.current.offsetWidth\n                            : \"initial\",\n                      }}\n                      data-placement={placement}\n                      data-qa-popout=\"\"\n                      data-qa-popout-isopen={isOpen === true}\n                      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                      // @ts-ignore\n                      color={color}\n                      {...rest}\n                    >\n                      {!outOfBoundaries && (\n                        <motion.div {...animationConfig}>\n                          <FocusLock\n                            autoFocus={autoFocus}\n                            returnFocus={returnFocus}\n                            disabled={!focusOnContent}\n                            {...restFocusLockProps}\n                          >\n                            {typeof content === \"function\" &&\n                              content({\n                                hide,\n                              })}\n                            {typeof content !== \"function\" && content}\n                          </FocusLock>\n                        </motion.div>\n                      )}\n                    </div>\n                  );\n                }}\n              </Popper>\n            </PopoutComponentWrapper>\n          )}\n        </AnimatePresence>\n      )}\n    </React.Fragment>\n  );\n}\n\nconst PopoutContent = ({ children, ...rest }: TypeBoxProps) => (\n  <Box\n    bg=\"container.background.base\"\n    color=\"text.body\"\n    border={500}\n    borderColor=\"container.border.base\"\n    borderRadius=\"outer\"\n    boxShadow=\"medium\"\n    p={400}\n    m={300}\n    {...rest}\n  >\n    {children}\n  </Box>\n);\n\nPopoutContent.displayName = \"Popout.Content\";\nPopout.Content = PopoutContent;\n\nexport default Popout;\n","import styled from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const TargetWrapper = styled.div`\n  display: inline-block;\n  ${COMMON}\n  ${LAYOUT}\n`;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from \"react\";\nimport type { PopperProps } from \"react-popper\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type EnumPlacements = Exclude<PopperProps[\"placement\"], undefined>;\n\nexport interface TypeFocusLockProps {\n  disabled?: boolean;\n  returnFocus?:\n    | boolean\n    | FocusOptions\n    | ((returnTo: Element) => boolean | FocusOptions);\n  persistentFocus?: boolean;\n  autoFocus?: boolean;\n  crossFrame?: boolean;\n  noFocusGuards?: boolean | \"tail\";\n  group?: string;\n  className?: string;\n  onActivation?: (node: HTMLElement) => void;\n  onDeactivation?: (node: HTMLElement) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  lockProps?: any;\n  ref?: any;\n  whiteList?: (activeElement: HTMLElement) => boolean;\n  shards?: Array<any>;\n  children?: React.ReactNode;\n}\n\nexport interface TypePopoutProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"div\">,\n      \"color\" | \"children\" | \"content\"\n    > {\n  /**\n   * Whether Popout should automatically add aria-attributes to its wrapped elements\n   */\n  disableWrapperAria?: boolean;\n  /**\n   * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.\n   */\n  isOpen?: boolean;\n\n  /**\n   * If you use the isOpen prop you will need to pass a handler to change the state of the popout\n   */\n  setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;\n\n  /**\n   * The content to be shown in the popout. If there is no content, just the children are rendered\n   */\n  content:\n    | (React.ReactElement<any> | null | undefined)\n    | (\n        | ((opts: { hide: () => void }) => React.ReactElement<any>)\n        | null\n        | undefined\n      );\n\n  /**\n   * The content that the popout should be attached to\n   */\n  children:\n    | React.ReactElement<any>\n    | ((opts: {\n        ref: (arg0: React.ElementRef<any> | HTMLElement) => void;\n        toggle: () => void;\n        show: () => void;\n        hide: () => void;\n        ariaProps: Record<string, any>;\n      }) => React.ReactNode);\n\n  /** How the popped-out content should be placed, in relationship to the children */\n  placement?: EnumPlacements;\n\n  /**\n   * Should the popped-out content inherit its width from the children?\n   * This is useful for typeaheads and other places where a popout needs to match the width of a given element.\n   */\n  fullWidth?: boolean;\n\n  /**\n   *  When the popout has opened, should we focus on its content?\n   *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.\n   *  Upon closing the popout, focus will be returned to the popout's target.\n   *  If nothing within your popout's content is focusable, this prop will do nothing.\n   */\n  focusOnContent?: boolean;\n  qa?: Record<string, string>;\n  zIndex?: number;\n\n  /**\n   * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation\n   */\n  popperProps?: Partial<PopperProps>;\n  onClose?: () => void;\n  onOpen?: () => void;\n\n  /**\n   * And optional callback to receive the scheduleUpdate function.\n   * Use the function to recalculate the popout position in relation to the contents.\n   */\n  scheduleUpdateRef?: (arg0: () => void) => void;\n\n  /**\n   * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree\n   */\n  appendToBody?: boolean;\n\n  /**\n   * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api\n   */\n  focusLockProps?: TypeFocusLockProps;\n  menuPopout?: boolean;\n}\n"],"mappings":"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","names":["import_react","styled","Portal","placement","FocusLock","Box","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Popout.tsx","../src/styles.ts","../src/PopoutTypes.ts"],"sourcesContent":["import Popout from \"./Popout\";\n\nexport default Popout;\nexport { Popout };\nexport * from \"./PopoutTypes\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps } from \"./PopoutTypes\";\n\nconst doesRefContainEventTarget = (\n  ref: React.MutableRefObject<HTMLDivElement | undefined>,\n  event: MouseEvent\n) => {\n  return (\n    ref.current &&\n    event.target instanceof Node &&\n    ref.current.contains(event.target)\n  );\n};\n\nconst defaultAnimationConfig = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0 },\n  transition: {\n    ease: \"circOut\",\n    type: \"tween\",\n    duration: process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST,\n  },\n};\n\nexport function Popout({\n  isOpen,\n  setIsOpen,\n  content,\n  children,\n  placement = \"auto\",\n  lockPlacement = false,\n  fullWidth = false,\n  zIndex = 7,\n  focusOnContent = true,\n  onOpen,\n  onClose,\n  qa = {},\n  popperProps,\n  animationConfig = defaultAnimationConfig,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  scheduleUpdateRef = () => {},\n  appendToBody = true,\n  focusLockProps = {},\n  color,\n  \"aria-haspopup\": ariaHasPopup,\n  disableWrapperAria = false,\n  id,\n  ...rest\n}: TypePopoutProps) {\n  const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;\n  const [isInternalShown, setIsInternalShown] = useState<boolean>(false);\n  const [lockedPlacement, setLockedPlacement] = useState<\n    typeof placement | undefined\n  >();\n  const isControlled = typeof isOpen === \"boolean\";\n  const isShown = isControlled ? isOpen : isInternalShown;\n  const setIsShown = useMemo(\n    () => (isControlled && setIsOpen ? setIsOpen : setIsInternalShown),\n    [isControlled, setIsOpen]\n  );\n\n  const targetRef = useRef<HTMLElement | any>();\n  const popoutRef = useRef<HTMLDivElement>();\n\n  // This callback will automatically trigger a recalculation of the popout position if the content is changed\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const scheduleUpdateCallback = useRef(() => {});\n\n  useMutationObserver(\n    popoutRef.current ?? null,\n    {\n      childList: true,\n      characterData: true,\n      subtree: true,\n    },\n    scheduleUpdateCallback.current\n  );\n\n  const {\n    autoFocus = true,\n    returnFocus = true,\n    ...restFocusLockProps\n  } = focusLockProps;\n\n  const isInvalidContent = content === null || content === undefined;\n\n  // Callbacks for showing, hiding, and toggling visibility of the popout\n  // (Not used when isOpen is passed explicitly)\n  const show = useCallback(() => setIsShown(true), [setIsShown]);\n  const hide = useCallback(() => setIsShown(false), [setIsShown]);\n  const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);\n\n  useEffect(() => {\n    const documentBody = document.body;\n\n    if (isShown && documentBody) {\n      // Callback passed to a click handler attached to document.body,\n      // allowing user to close the popout by clicking outside\n      const bodyClick = (e: MouseEvent): void => {\n        if (\n          doesRefContainEventTarget(targetRef, e) ||\n          doesRefContainEventTarget(popoutRef, e)\n        ) {\n          return;\n        }\n\n        setIsShown(false, e);\n      };\n\n      // Callback for allowing user to close by keying \"esc\"\n      const onEsc = (e: KeyboardEvent): void => {\n        // older browsers use \"Esc\"\n        if ([\"Escape\", \"Esc\"].includes(e.key)) {\n          // stop propagation to avoid interacting with other components when popout is shown\n          // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal\n          e.stopPropagation();\n          setIsShown(false, e);\n        }\n      };\n\n      documentBody.addEventListener(\"click\", bodyClick, { capture: true });\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n      return () => {\n        documentBody.removeEventListener(\"click\", bodyClick, { capture: true });\n        documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      };\n    }\n  }, [isShown, setIsShown]);\n\n  const callbackStateRef = useRef({ calledFor: isShown });\n  useEffect(() => {\n    if (callbackStateRef.current.calledFor === isShown) {\n      return;\n    }\n\n    callbackStateRef.current.calledFor = isShown;\n    if (isShown) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [isShown, onOpen, onClose]);\n\n  // WAI-Aria properties for the popout trigger, disabled if necessary\n  const ariaProps = useMemo(\n    () =>\n      disableWrapperAria\n        ? {}\n        : {\n            \"aria-expanded\": isShown,\n            \"aria-haspopup\": ariaHasPopup ? ariaHasPopup : true,\n          },\n    [isShown, ariaHasPopup, disableWrapperAria]\n  );\n\n  // In cases where a controlled popout is used (e.g. props.isOpen is true), we need\n  // to wait for the targetRef to receive a value before rendering the popout. Otherwise,\n  // the Popout component renders, but doesn't know how to position itself due the\n  // `refereElement` property being undefined.\n  const [shouldRenderPopout, setShouldRenderPopout] = useState<boolean>( // Only trigger this shouldRenderPopout logic when using a controlled component.\n    // The reason for that is because controlled components may render the popout\n    // immediately before the targetRef has a value set to it.\n    !isControlled\n  );\n\n  // Reset the locked placement when the popout is closed\n  useEffect(() => {\n    if (!isShown && lockedPlacement) {\n      setLockedPlacement(undefined);\n    }\n  }, [isShown, lockedPlacement]);\n\n  const childrenRef = (el: React.ElementRef<any> | HTMLElement) => {\n    targetRef.current = el;\n\n    if (targetRef.current) {\n      setShouldRenderPopout(true);\n    }\n  };\n\n  return (\n    <React.Fragment>\n      {typeof children === \"function\" ? (\n        children({\n          ref: childrenRef,\n          toggle,\n          show,\n          hide,\n          ariaProps,\n        })\n      ) : (\n        <TargetWrapper {...qa} id={id} {...rest} ref={childrenRef}>\n          {React.cloneElement(children, {\n            ...ariaProps,\n            ...(!isControlled\n              ? {\n                  onClick: toggle,\n                }\n              : undefined),\n          })}\n        </TargetWrapper>\n      )}\n      {shouldRenderPopout && !isInvalidContent && (\n        <AnimatePresence>\n          {isShown && (\n            <PopoutComponentWrapper>\n              <Popper\n                {...popperProps}\n                referenceElement={targetRef.current}\n                placement={\n                  lockPlacement && lockedPlacement ? lockedPlacement : placement\n                }\n                modifiers={{\n                  preventOverflow: {\n                    boundariesElement: \"viewport\",\n                  },\n                  // Disable flip after locking when lockPlacement is true\n                  flip: { enabled: !(lockPlacement && lockedPlacement) },\n                  ...popperProps?.modifiers,\n                }}\n              >\n                {({\n                  ref,\n                  style,\n                  placement: actualPlacement,\n                  outOfBoundaries,\n                  scheduleUpdate,\n                }) => {\n                  // HACK: We use setTimeout to defer locking the placement until after render,\n                  // because Popper v1 only exposes the computed placement in the render prop,\n                  // and React does not allow setState during render.\n                  if (lockPlacement && !lockedPlacement && actualPlacement) {\n                    setTimeout(() => {\n                      // Check again before setting to avoid a race condition\n                      if (\n                        lockPlacement &&\n                        !lockedPlacement &&\n                        actualPlacement\n                      ) {\n                        setLockedPlacement(actualPlacement);\n                      }\n                    }, 0);\n                  }\n\n                  const interceptRef = (el: HTMLDivElement | undefined) => {\n                    popoutRef.current = el;\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    ref(el);\n                  };\n\n                  scheduleUpdateCallback.current = scheduleUpdate;\n                  scheduleUpdateRef(scheduleUpdate);\n\n                  return (\n                    <div\n                      ref={interceptRef}\n                      style={{\n                        ...style,\n                        zIndex,\n                        width:\n                          fullWidth && targetRef.current\n                            ? targetRef.current.offsetWidth\n                            : \"initial\",\n                      }}\n                      data-placement={actualPlacement}\n                      data-qa-popout=\"\"\n                      data-qa-popout-isopen={isOpen === true}\n                      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                      // @ts-ignore\n                      color={color}\n                      {...rest}\n                    >\n                      {!outOfBoundaries && (\n                        <motion.div {...animationConfig}>\n                          <FocusLock\n                            autoFocus={autoFocus}\n                            returnFocus={returnFocus}\n                            disabled={!focusOnContent}\n                            {...restFocusLockProps}\n                          >\n                            {typeof content === \"function\" &&\n                              content({\n                                hide,\n                                actualPlacement,\n                              })}\n                            {typeof content !== \"function\" && content}\n                          </FocusLock>\n                        </motion.div>\n                      )}\n                    </div>\n                  );\n                }}\n              </Popper>\n            </PopoutComponentWrapper>\n          )}\n        </AnimatePresence>\n      )}\n    </React.Fragment>\n  );\n}\n\nconst PopoutContent = ({ children, ...rest }: TypeBoxProps) => (\n  <Box\n    bg=\"container.background.base\"\n    color=\"text.body\"\n    border={500}\n    borderColor=\"container.border.base\"\n    borderRadius=\"outer\"\n    boxShadow=\"medium\"\n    p={400}\n    m={300}\n    {...rest}\n  >\n    {children}\n  </Box>\n);\n\nPopoutContent.displayName = \"Popout.Content\";\nPopout.Content = PopoutContent;\n\nexport default Popout;\n","import styled from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const TargetWrapper = styled.div`\n  display: inline-block;\n  ${COMMON}\n  ${LAYOUT}\n`;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from \"react\";\nimport type { PopperProps } from \"react-popper\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { HTMLMotionProps } from \"motion/react\";\n\nexport type EnumPlacements = Exclude<PopperProps[\"placement\"], undefined>;\n\nexport interface TypeFocusLockProps {\n  disabled?: boolean;\n  returnFocus?:\n    | boolean\n    | FocusOptions\n    | ((returnTo: Element) => boolean | FocusOptions);\n  persistentFocus?: boolean;\n  autoFocus?: boolean;\n  crossFrame?: boolean;\n  noFocusGuards?: boolean | \"tail\";\n  group?: string;\n  className?: string;\n  onActivation?: (node: HTMLElement) => void;\n  onDeactivation?: (node: HTMLElement) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  lockProps?: any;\n  ref?: any;\n  whiteList?: (activeElement: HTMLElement) => boolean;\n  shards?: Array<any>;\n  children?: React.ReactNode;\n}\n\nexport interface TypePopoutProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"div\">,\n      \"color\" | \"children\" | \"content\"\n    > {\n  /**\n   * Whether Popout should automatically add aria-attributes to its wrapped elements\n   */\n  disableWrapperAria?: boolean;\n  /**\n   * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.\n   */\n  isOpen?: boolean;\n\n  /**\n   * If you use the isOpen prop you will need to pass a handler to change the state of the popout\n   */\n  setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;\n\n  /**\n   * The content to be shown in the popout. If there is no content, just the children are rendered\n   */\n  content:\n    | (React.ReactElement<any> | null | undefined)\n    | (\n        | ((opts: {\n            hide: () => void;\n            actualPlacement: EnumPlacements;\n          }) => React.ReactElement<any>)\n        | null\n        | undefined\n      );\n\n  /**\n   * The content that the popout should be attached to\n   */\n  children:\n    | React.ReactElement<any>\n    | ((opts: {\n        ref: (arg0: React.ElementRef<any> | HTMLElement) => void;\n        toggle: () => void;\n        show: () => void;\n        hide: () => void;\n        ariaProps: Record<string, any>;\n      }) => React.ReactNode);\n\n  /** How the popped-out content should be placed, in relationship to the children */\n  placement?: EnumPlacements;\n\n  /**\n   * Should the popout be locked in place? This will prevent it from moving when the user scrolls or if the height of the popout changes.\n   * This is useful for modals and other places where you want the popout to stay in place\n   * after it has been opened but want to use an auto placement strategy.\n   */\n  lockPlacement?: boolean;\n\n  /**\n   * Should the popped-out content inherit its width from the children?\n   * This is useful for typeaheads and other places where a popout needs to match the width of a given element.\n   */\n  fullWidth?: boolean;\n\n  /**\n   *  When the popout has opened, should we focus on its content?\n   *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.\n   *  Upon closing the popout, focus will be returned to the popout's target.\n   *  If nothing within your popout's content is focusable, this prop will do nothing.\n   */\n  focusOnContent?: boolean;\n  qa?: Record<string, string>;\n  zIndex?: number;\n  /** Used to override the default Popout animations.\n   *  Any props that are valid for use on a Motion div can be passed here as an object.\n   *  See https://motion.dev/docs/react-motion-component#props */\n  animationConfig?: Omit<HTMLMotionProps<\"div\">, \"children\">;\n\n  /**\n   * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation\n   */\n  popperProps?: Partial<PopperProps>;\n  onClose?: () => void;\n  onOpen?: () => void;\n\n  /**\n   * And optional callback to receive the scheduleUpdate function.\n   * Use the function to recalculate the popout position in relation to the contents.\n   */\n  scheduleUpdateRef?: (arg0: () => void) => void;\n\n  /**\n   * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree\n   */\n  appendToBody?: boolean;\n\n  /**\n   * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api\n   */\n  focusLockProps?: TypeFocusLockProps;\n}\n"],"mappings":"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","names":["import_react","styled","Portal","FocusLock","Box","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-popout",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "Seeds React Popout",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "@sproutsocial/seeds-react-hooks": "^3.0.1",
     "@sproutsocial/seeds-react-portal": "^1.1.0",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "motion": "^11.11.17",
+    "motion": "^12.6.3",
     "react-focus-lock": "^2.0.3",
     "react-popper": "^1.3.11"
   },