@sproutsocial/seeds-react-popout 2.3.0 → 2.4.1

package/dist/esm/index.js

@@ -46,7 +46,7 @@ function Popout({
   onOpen,
   onClose,
   qa = {},
-  popperProps,
+  popperProps: { modifiers: popperModifiers, ...restPopperProps } = {},
   animationConfig = defaultAnimationConfig,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   scheduleUpdateRef = () => {
@@ -165,7 +165,6 @@ function Popout({
     shouldRenderPopout && !isInvalidContent && /* @__PURE__ */ jsx(AnimatePresence, { children: isShown && /* @__PURE__ */ jsx(PopoutComponentWrapper, { children: /* @__PURE__ */ jsx(
       Popper,
       {
-        ...popperProps,
         referenceElement: targetRef.current,
         placement: lockPlacement && lockedPlacement ? lockedPlacement : placement,
         modifiers: {
@@ -174,8 +173,9 @@ function Popout({
           },
           // Disable flip after locking when lockPlacement is true
           flip: { enabled: !(lockPlacement && lockedPlacement) },
-          ...popperProps?.modifiers
+          ...popperModifiers
         },
+        ...restPopperProps,
         children: ({
           ref,
           style,
@@ -210,22 +210,32 @@ function Popout({
               "data-qa-popout-isopen": isOpen === true,
               color,
               ...rest,
-              children: !outOfBoundaries && /* @__PURE__ */ jsx(motion.div, { ...animationConfig, children: /* @__PURE__ */ jsxs(
-                FocusLock,
+              children: !outOfBoundaries && /* @__PURE__ */ jsx(
+                motion.div,
                 {
-                  autoFocus,
-                  returnFocus,
-                  disabled: !focusOnContent,
-                  ...restFocusLockProps,
-                  children: [
-                    typeof content === "function" && content({
-                      hide,
-                      actualPlacement
-                    }),
-                    typeof content !== "function" && content
-                  ]
+                  ...animationConfig,
+                  custom: {
+                    placement: actualPlacement,
+                    ...animationConfig.custom
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    FocusLock,
+                    {
+                      autoFocus,
+                      returnFocus,
+                      disabled: !focusOnContent,
+                      ...restFocusLockProps,
+                      children: [
+                        typeof content === "function" && content({
+                          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 { 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":[]}
+{"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: { modifiers: popperModifiers, ...restPopperProps } = {},\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                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                  ...popperModifiers,\n                }}\n                {...restPopperProps}\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\n                          {...animationConfig}\n                          // pass the placement in the custom prop so it can be used in the animation\n                          custom={{\n                            placement: actualPlacement,\n                            ...animationConfig.custom,\n                          }}\n                        >\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

@@ -101,7 +101,7 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     focusLockProps?: TypeFocusLockProps;
 }
 
-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 function Popout({ isOpen, setIsOpen, content, children, placement, lockPlacement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps: { modifiers: popperModifiers, ...restPopperProps }, 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

@@ -101,7 +101,7 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     focusLockProps?: TypeFocusLockProps;
 }
 
-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 function Popout({ isOpen, setIsOpen, content, children, placement, lockPlacement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps: { modifiers: popperModifiers, ...restPopperProps }, 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

@@ -83,7 +83,7 @@ function Popout({
   onOpen,
   onClose,
   qa = {},
-  popperProps,
+  popperProps: { modifiers: popperModifiers, ...restPopperProps } = {},
   animationConfig = defaultAnimationConfig,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   scheduleUpdateRef = () => {
@@ -202,7 +202,6 @@ 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: lockPlacement && lockedPlacement ? lockedPlacement : placement,
         modifiers: {
@@ -211,8 +210,9 @@ function Popout({
           },
           // Disable flip after locking when lockPlacement is true
           flip: { enabled: !(lockPlacement && lockedPlacement) },
-          ...popperProps?.modifiers
+          ...popperModifiers
         },
+        ...restPopperProps,
         children: ({
           ref,
           style,
@@ -247,22 +247,32 @@ function Popout({
               "data-qa-popout-isopen": isOpen === true,
               color,
               ...rest,
-              children: !outOfBoundaries && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.motion.div, { ...animationConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_react_focus_lock.default,
+              children: !outOfBoundaries && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_react2.motion.div,
                 {
-                  autoFocus,
-                  returnFocus,
-                  disabled: !focusOnContent,
-                  ...restFocusLockProps,
-                  children: [
-                    typeof content === "function" && content({
-                      hide,
-                      actualPlacement
-                    }),
-                    typeof content !== "function" && content
-                  ]
+                  ...animationConfig,
+                  custom: {
+                    placement: actualPlacement,
+                    ...animationConfig.custom
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_react_focus_lock.default,
+                    {
+                      autoFocus,
+                      returnFocus,
+                      disabled: !focusOnContent,
+                      ...restFocusLockProps,
+                      children: [
+                        typeof content === "function" && content({
+                          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 { 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,mBAAkE;AAClE,IAAAA,gBAAwC;AACxC,8BAAsB;AACtB,0BAAuB;AACvB,sBAAqC;AACrC,+BAAoC;AACpC,gCAAmB;AACnB,6BAAuC;;;ACRvC,+BAAmB;AACnB,sCAA+B;AAExB,IAAM,gBAAgB,yBAAAC,QAAO;AAAA;AAAA,IAEhC,sCAAM;AAAA,IACN,sCAAM;AAAA;;;ADmMF;AA7LR,IAAM,4BAA4B,CAChC,KACA,UACG;AACH,SACE,IAAI,WACJ,MAAM,kBAAkB,QACxB,IAAI,QAAQ,SAAS,MAAM,MAAM;AAErC;AAEA,IAAM,yBAAyB;AAAA,EAC7B,SAAS,EAAE,SAAS,EAAE;AAAA,EACtB,SAAS,EAAE,SAAS,EAAE;AAAA,EACtB,MAAM,EAAE,SAAS,EAAE;AAAA,EACnB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,UAAU,QAAQ,IAAI,aAAa,SAAS,IAAI;AAAA,EAClD;AACF;AAEO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,KAAK,CAAC;AAAA,EACN;AAAA,EACA,kBAAkB;AAAA;AAAA,EAElB,oBAAoB,MAAM;AAAA,EAAC;AAAA,EAC3B,eAAe;AAAA,EACf,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,yBAAyB,eAAe,0BAAAC,UAAe;AAC7D,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAkB,KAAK;AACrE,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAE5C;AACF,QAAM,eAAe,OAAO,WAAW;AACvC,QAAM,UAAU,eAAe,SAAS;AACxC,QAAM,iBAAa;AAAA,IACjB,MAAO,gBAAgB,YAAY,YAAY;AAAA,IAC/C,CAAC,cAAc,SAAS;AAAA,EAC1B;AAEA,QAAM,gBAAY,qBAA0B;AAC5C,QAAM,gBAAY,qBAAuB;AAIzC,QAAM,6BAAyB,qBAAO,MAAM;AAAA,EAAC,CAAC;AAE9C;AAAA,IACE,UAAU,WAAW;AAAA,IACrB;AAAA,MACE,WAAW;AAAA,MACX,eAAe;AAAA,MACf,SAAS;AAAA,IACX;AAAA,IACA,uBAAuB;AAAA,EACzB;AAEA,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB,YAAY,QAAQ,YAAY;AAIzD,QAAM,WAAO,0BAAY,MAAM,WAAW,IAAI,GAAG,CAAC,UAAU,CAAC;AAC7D,QAAM,WAAO,0BAAY,MAAM,WAAW,KAAK,GAAG,CAAC,UAAU,CAAC;AAC9D,QAAM,aAAS,0BAAY,MAAM,WAAW,CAAC,OAAO,GAAG,CAAC,SAAS,UAAU,CAAC;AAE5E,8BAAU,MAAM;AACd,UAAM,eAAe,SAAS;AAE9B,QAAI,WAAW,cAAc;AAG3B,YAAM,YAAY,CAAC,MAAwB;AACzC,YACE,0BAA0B,WAAW,CAAC,KACtC,0BAA0B,WAAW,CAAC,GACtC;AACA;AAAA,QACF;AAEA,mBAAW,OAAO,CAAC;AAAA,MACrB;AAGA,YAAM,QAAQ,CAAC,MAA2B;AAExC,YAAI,CAAC,UAAU,KAAK,EAAE,SAAS,EAAE,GAAG,GAAG;AAGrC,YAAE,gBAAgB;AAClB,qBAAW,OAAO,CAAC;AAAA,QACrB;AAAA,MACF;AAEA,mBAAa,iBAAiB,SAAS,WAAW,EAAE,SAAS,KAAK,CAAC;AACnE,mBAAa,iBAAiB,WAAW,OAAO,EAAE,SAAS,KAAK,CAAC;AACjE,aAAO,MAAM;AACX,qBAAa,oBAAoB,SAAS,WAAW,EAAE,SAAS,KAAK,CAAC;AACtE,qBAAa,oBAAoB,WAAW,OAAO,EAAE,SAAS,KAAK,CAAC;AAAA,MACtE;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,QAAM,uBAAmB,qBAAO,EAAE,WAAW,QAAQ,CAAC;AACtD,8BAAU,MAAM;AACd,QAAI,iBAAiB,QAAQ,cAAc,SAAS;AAClD;AAAA,IACF;AAEA,qBAAiB,QAAQ,YAAY;AACrC,QAAI,SAAS;AACX,eAAS;AAAA,IACX,OAAO;AACL,gBAAU;AAAA,IACZ;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,OAAO,CAAC;AAG7B,QAAM,gBAAY;AAAA,IAChB,MACE,qBACI,CAAC,IACD;AAAA,MACE,iBAAiB;AAAA,MACjB,iBAAiB,eAAe,eAAe;AAAA,IACjD;AAAA,IACN,CAAC,SAAS,cAAc,kBAAkB;AAAA,EAC5C;AAMA,QAAM,CAAC,oBAAoB,qBAAqB,QAAI;AAAA;AAAA;AAAA;AAAA,IAGlD,CAAC;AAAA,EACH;AAGA,8BAAU,MAAM;AACd,QAAI,CAAC,WAAW,iBAAiB;AAC/B,yBAAmB,MAAS;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,SAAS,eAAe,CAAC;AAE7B,QAAM,cAAc,CAAC,OAA4C;AAC/D,cAAU,UAAU;AAEpB,QAAI,UAAU,SAAS;AACrB,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EACF;AAEA,SACE,6CAAO,gBAAN,EACE;AAAA,WAAO,aAAa,aACnB,SAAS;AAAA,MACP,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,IAED,4CAAC,iBAAe,GAAG,IAAI,IAAS,GAAG,MAAM,KAAK,aAC3C,UAAM,mBAAa,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,GAAI,CAAC,eACD;AAAA,QACE,SAAS;AAAA,MACX,IACA;AAAA,IACN,CAAC,GACH;AAAA,IAED,sBAAsB,CAAC,oBACtB,4CAAC,iCACE,qBACC,4CAAC,0BACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,kBAAkB,UAAU;AAAA,QAC5B,WACE,iBAAiB,kBAAkB,kBAAkB;AAAA,QAEvD,WAAW;AAAA,UACT,iBAAiB;AAAA,YACf,mBAAmB;AAAA,UACrB;AAAA;AAAA,UAEA,MAAM,EAAE,SAAS,EAAE,iBAAiB,iBAAiB;AAAA,UACrD,GAAG,aAAa;AAAA,QAClB;AAAA,QAEC,WAAC;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,QACF,MAAM;AAIJ,cAAI,iBAAiB,CAAC,mBAAmB,iBAAiB;AACxD,uBAAW,MAAM;AAEf,kBACE,iBACA,CAAC,mBACD,iBACA;AACA,mCAAmB,eAAe;AAAA,cACpC;AAAA,YACF,GAAG,CAAC;AAAA,UACN;AAEA,gBAAM,eAAe,CAAC,OAAmC;AACvD,sBAAU,UAAU;AAGpB,gBAAI,EAAE;AAAA,UACR;AAEA,iCAAuB,UAAU;AACjC,4BAAkB,cAAc;AAEhC,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,GAAG;AAAA,gBACH;AAAA,gBACA,OACE,aAAa,UAAU,UACnB,UAAU,QAAQ,cAClB;AAAA,cACR;AAAA,cACA,kBAAgB;AAAA,cAChB,kBAAe;AAAA,cACf,yBAAuB,WAAW;AAAA,cAIlC;AAAA,cACC,GAAG;AAAA,cAEH,WAAC,mBACA,4CAAC,qBAAO,KAAP,EAAY,GAAG,iBACd;AAAA,gBAAC,wBAAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,UAAU,CAAC;AAAA,kBACV,GAAG;AAAA,kBAEH;AAAA,2BAAO,YAAY,cAClB,QAAQ;AAAA,sBACN;AAAA,sBACA;AAAA,oBACF,CAAC;AAAA,oBACF,OAAO,YAAY,cAAc;AAAA;AAAA;AAAA,cACpC,GACF;AAAA;AAAA,UAEJ;AAAA,QAEJ;AAAA;AAAA,IACF,GACF,GAEJ;AAAA,KAEJ;AAEJ;AAEA,IAAM,gBAAgB,CAAC,EAAE,UAAU,GAAG,KAAK,MACzC;AAAA,EAAC,uBAAAC;AAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,OAAM;AAAA,IACN,QAAQ;AAAA,IACR,aAAY;AAAA,IACZ,cAAa;AAAA,IACb,WAAU;AAAA,IACV,GAAG;AAAA,IACH,GAAG;AAAA,IACF,GAAG;AAAA,IAEH;AAAA;AACH;AAGF,cAAc,cAAc;AAC5B,OAAO,UAAU;AAEjB,IAAO,iBAAQ;;;AE3Uf,IAAAC,SAAuB;;;AHCvB,IAAO,gBAAQ;","names":["import_react","styled","Portal","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: { modifiers: popperModifiers, ...restPopperProps } = {},\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                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                  ...popperModifiers,\n                }}\n                {...restPopperProps}\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\n                          {...animationConfig}\n                          // pass the placement in the custom prop so it can be used in the animation\n                          custom={{\n                            placement: actualPlacement,\n                            ...animationConfig.custom,\n                          }}\n                        >\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.3.0",
+  "version": "2.4.1",
   "description": "Seeds React Popout",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -16,7 +16,9 @@
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
     "@sproutsocial/seeds-motion": "^1.8.0",
@@ -32,6 +34,8 @@
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-testing": "*",
     "@types/react": "^18.0.0",
     "@types/styled-components": "^5.1.26",
     "react": "^18.0.0",
@@ -40,6 +44,7 @@
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.2.3"
   },
   "engines": {