@sproutsocial/seeds-react-popout 1.1.0 → 1.2.0

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 // src/Popout.tsx
 import * as React from "react";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
-import { useTransition, animated } from "react-spring";
+import { useTransition, animated } from "@react-spring/web";
 import FocusLock from "react-focus-lock";
 import { Popper } from "react-popper";
 import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
@@ -19,6 +19,7 @@ var TargetWrapper = styled.div`
 `;
 
 // src/Popout.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 var doesRefContainEventTarget = (ref, event) => {
   return ref.current && event.target instanceof Node && ref.current.contains(event.target);
 };
@@ -33,7 +34,10 @@ var transitionConfig = {
     opacity: 0
   },
   config: {
-    duration: MOTION_DURATION_FAST * 1e3
+    duration: (
+      // skip animation in test environment
+      process.env.NODE_ENV === "test" ? 0 : MOTION_DURATION_FAST * 1e3
+    )
   }
 };
 function Popout({
@@ -65,12 +69,11 @@ function Popout({
   const isControlled = typeof isOpen === "boolean";
   const isShown = isControlled ? isOpen : isInternalShown;
   const setIsShown = useMemo(
-    () => isControlled && setIsOpen ? setIsOpen : (nextIsShown) => setIsInternalShown(nextIsShown),
+    () => isControlled && setIsOpen ? setIsOpen : setIsInternalShown,
     [isControlled, setIsOpen]
   );
   const targetRef = useRef();
   const popoutRef = useRef();
-  const isFirstRender = useRef(true);
   const scheduleUpdateCallback = useRef(() => {
   });
   useMutationObserver(
@@ -114,26 +117,19 @@ function Popout({
       };
     }
   }, [isShown, setIsShown]);
-  useEffect(
-    () => {
-      if (isFirstRender.current) {
-        isFirstRender.current = false;
-        return;
-      }
-      if (!onOpen && !onClose) {
-        return;
-      }
-      if (isShown && onOpen) {
-        onOpen();
-      }
-      if (!isShown && onClose) {
-        onClose();
-      }
-    },
-    // eslint-disable-next-line
-    [isShown]
-  );
-  const transitions = useTransition(isShown, null, transitionConfig);
+  const callbackStateRef = useRef({ calledFor: isShown });
+  useEffect(() => {
+    if (callbackStateRef.current.calledFor === isShown) {
+      return;
+    }
+    callbackStateRef.current.calledFor = isShown;
+    if (isShown) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  }, [isShown, onOpen, onClose]);
+  const transition = useTransition(isShown, transitionConfig);
   const ariaProps = useMemo(
     () => disableWrapperAria ? {} : {
       "aria-expanded": isShown,
@@ -153,77 +149,82 @@ function Popout({
       setShouldRenderPopout(true);
     }
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof children === "function" ? children({
-    ref: childrenRef,
-    toggle,
-    show,
-    hide,
-    ariaProps
-  }) : /* @__PURE__ */ React.createElement(TargetWrapper, { ...qa, id, ...rest, ref: childrenRef }, React.cloneElement(children, {
-    ...ariaProps,
-    ...!isControlled ? {
-      onClick: toggle
-    } : void 0
-  })), shouldRenderPopout && !isInvalidContent && transitions.map(
-    ({ item, key, props }) => item && /* @__PURE__ */ React.createElement(PopoutComponentWrapper, { key }, /* @__PURE__ */ React.createElement(
-      Popper,
-      {
-        referenceElement: targetRef.current,
-        placement,
-        modifiers: {
-          preventOverflow: {
-            boundariesElement: "viewport"
-          }
-        },
-        ...popperProps
-      },
-      ({
-        ref,
-        style,
-        placement: placement2,
-        outOfBoundaries,
-        scheduleUpdate
-      }) => {
-        const interceptRef = (el) => {
-          popoutRef.current = el;
-          ref(el);
-        };
-        scheduleUpdateCallback.current = scheduleUpdate;
-        scheduleUpdateRef(scheduleUpdate);
-        return /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            ref: interceptRef,
-            style: {
-              ...style,
-              zIndex,
-              width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
-            },
-            "data-placement": placement2,
-            "data-qa-popout": "",
-            "data-qa-popout-isopen": isOpen === true,
-            color,
-            ...rest
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    typeof children === "function" ? children({
+      ref: childrenRef,
+      toggle,
+      show,
+      hide,
+      ariaProps
+    }) : /* @__PURE__ */ jsx(TargetWrapper, { ...qa, id, ...rest, ref: childrenRef, children: React.cloneElement(children, {
+      ...ariaProps,
+      ...!isControlled ? {
+        onClick: toggle
+      } : void 0
+    }) }),
+    shouldRenderPopout && !isInvalidContent && transition(
+      (transitionStyle, isVisible, transition2) => isVisible && /* @__PURE__ */ jsx(PopoutComponentWrapper, { children: /* @__PURE__ */ jsx(
+        Popper,
+        {
+          referenceElement: targetRef.current,
+          placement,
+          modifiers: {
+            preventOverflow: {
+              boundariesElement: "viewport"
+            }
           },
-          item && !outOfBoundaries && /* @__PURE__ */ React.createElement(animated.div, { style: props }, /* @__PURE__ */ React.createElement(
-            FocusLock,
-            {
-              autoFocus,
-              returnFocus,
-              disabled: !focusOnContent,
-              ...restFocusLockProps
-            },
-            typeof content === "function" && content({
-              hide
-            }),
-            typeof content !== "function" && content
-          ))
-        );
-      }
-    ))
-  ));
+          ...popperProps,
+          children: ({
+            ref,
+            style,
+            placement: placement2,
+            outOfBoundaries,
+            scheduleUpdate
+          }) => {
+            const interceptRef = (el) => {
+              popoutRef.current = el;
+              ref(el);
+            };
+            scheduleUpdateCallback.current = scheduleUpdate;
+            scheduleUpdateRef(scheduleUpdate);
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: interceptRef,
+                style: {
+                  ...style,
+                  zIndex,
+                  width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
+                },
+                "data-placement": placement2,
+                "data-qa-popout": "",
+                "data-qa-popout-isopen": isOpen === true,
+                color,
+                ...rest,
+                children: isVisible && !outOfBoundaries && /* @__PURE__ */ jsx(animated.div, { style: transitionStyle, children: /* @__PURE__ */ jsxs(
+                  FocusLock,
+                  {
+                    autoFocus,
+                    returnFocus,
+                    disabled: !focusOnContent,
+                    ...restFocusLockProps,
+                    children: [
+                      typeof content === "function" && content({
+                        hide
+                      }),
+                      typeof content !== "function" && content
+                    ]
+                  }
+                ) })
+              }
+            );
+          }
+        }
+      ) }, transition2.key)
+    )
+  ] });
 }
-var PopoutContent = ({ children, ...rest }) => /* @__PURE__ */ React.createElement(
+var PopoutContent = ({ children, ...rest }) => /* @__PURE__ */ jsx(
   Box,
   {
     bg: "container.background.base",
@@ -234,14 +235,17 @@ var PopoutContent = ({ children, ...rest }) => /* @__PURE__ */ React.createEleme
     boxShadow: "medium",
     p: 400,
     m: 300,
-    ...rest
-  },
-  children
+    ...rest,
+    children
+  }
 );
 PopoutContent.displayName = "Popout.Content";
 Popout.Content = PopoutContent;
 var Popout_default = Popout;
 
+// src/PopoutTypes.ts
+import "react";
+
 // src/index.ts
 var src_default = Popout_default;
 export {

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popout.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { useTransition, animated } from \"react-spring\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/dist/seeds-motion-unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps, EnumPlacements } from \"./PopoutTypes\";\n\nexport const placements: { [key: string]: EnumPlacements } = {\n  auto: \"auto\",\n\n  top: \"top\",\n  right: \"right\",\n  bottom: \"bottom\",\n  left: \"left\",\n\n  \"top-start\": \"top-start\",\n  \"right-start\": \"right-start\",\n  \"bottom-start\": \"bottom-start\",\n  \"left-start\": \"left-start\",\n\n  \"top-end\": \"top-end\",\n  \"right-end\": \"right-end\",\n  \"bottom-end\": \"bottom-end\",\n  \"left-end\": \"left-end\",\n};\n\nconst doesRefContainEventTarget = (ref, event) => {\n  return (\n    ref.current &&\n    event.target instanceof Node &&\n    ref.current.contains(event.target)\n  );\n};\n\n// Transition definitions for fading in and out\nconst transitionConfig = {\n  from: {\n    opacity: 0,\n  },\n  enter: {\n    opacity: 1,\n  },\n  leave: {\n    opacity: 0,\n  },\n  config: {\n    duration: MOTION_DURATION_FAST * 1000,\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  ...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\n  const setIsShown = useMemo(\n    () =>\n      isControlled && setIsOpen\n        ? setIsOpen\n        : (nextIsShown) => setIsInternalShown(nextIsShown),\n    [isControlled, setIsOpen]\n  );\n\n  const targetRef = useRef<HTMLDivElement>();\n  const popoutRef = useRef<HTMLDivElement>();\n  const isFirstRender = useRef(true);\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  // Manage onOpen and onClose callbacks\n  useEffect(\n    () => {\n      // Don't fire onClose on the first render\n      if (isFirstRender.current) {\n        isFirstRender.current = false;\n        return;\n      }\n\n      if (!onOpen && !onClose) {\n        return;\n      }\n\n      if (isShown && onOpen) {\n        onOpen();\n      }\n\n      if (!isShown && onClose) {\n        onClose();\n      }\n    },\n    // eslint-disable-next-line\n    [isShown]\n  );\n\n  const transitions = useTransition(isShown, null, transitionConfig);\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) => {\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 &&\n        !isInvalidContent &&\n        transitions.map(\n          ({ item, key, props }) =>\n            item && (\n              <PopoutComponentWrapper key={key}>\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) => {\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                        {item && !outOfBoundaries && (\n                          <animated.div style={props}>\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                          </animated.div>\n                        )}\n                      </div>\n                    );\n                  }}\n                </Popper>\n              </PopoutComponentWrapper>\n            )\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","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 { useState, useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { useTransition, animated } from \"@react-spring/web\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/dist/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\n// Transition definitions for fading in and out\nconst transitionConfig = {\n  from: {\n    opacity: 0,\n  },\n  enter: {\n    opacity: 1,\n  },\n  leave: {\n    opacity: 0,\n  },\n  config: {\n    duration:\n      // skip animation in test environment\n      process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST * 1000,\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  ...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\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  const transition = useTransition(isShown, transitionConfig);\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 &&\n        !isInvalidContent &&\n        transition(\n          (transitionStyle, isVisible, transition) =>\n            isVisible && (\n              <PopoutComponentWrapper key={transition.key}>\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                        {isVisible && !outOfBoundaries && (\n                          <animated.div style={transitionStyle}>\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                          </animated.div>\n                        )}\n                      </div>\n                    );\n                  }}\n                </Popper>\n              </PopoutComponentWrapper>\n            )\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    | {\n        preventScroll?: boolean;\n      };\n  persistentFocus?: boolean;\n  autoFocus?: 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}\n","import Popout from \"./Popout\";\n\nexport default Popout;\nexport { Popout };\nexport * from \"./PopoutTypes\";\n"],"mappings":"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","names":["transition","placement"]}

package/dist/index.d.mts

@@ -1,9 +1,10 @@
-import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 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';
 
-type EnumPlacements = "auto" | "top" | "right" | "bottom" | "left" | "top-start" | "right-start" | "bottom-start" | "left-start" | "top-end" | "right-end" | "bottom-end" | "left-end";
+type EnumPlacements = Exclude<PopperProps["placement"], undefined>;
 interface TypeFocusLockProps {
     disabled?: boolean;
     returnFocus?: boolean | {
@@ -89,10 +90,10 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     focusLockProps?: TypeFocusLockProps;
 }
 
-declare function Popout({ isOpen, setIsOpen, content, children, placement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, ...rest }: TypePopoutProps): React.JSX.Element;
+declare function Popout({ isOpen, setIsOpen, content, children, placement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, 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.Element;
+        ({ children, ...rest }: TypeBoxProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 }

package/dist/index.d.ts

@@ -1,9 +1,10 @@
-import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 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';
 
-type EnumPlacements = "auto" | "top" | "right" | "bottom" | "left" | "top-start" | "right-start" | "bottom-start" | "left-start" | "top-end" | "right-end" | "bottom-end" | "left-end";
+type EnumPlacements = Exclude<PopperProps["placement"], undefined>;
 interface TypeFocusLockProps {
     disabled?: boolean;
     returnFocus?: boolean | {
@@ -89,10 +90,10 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     focusLockProps?: TypeFocusLockProps;
 }
 
-declare function Popout({ isOpen, setIsOpen, content, children, placement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, ...rest }: TypePopoutProps): React.JSX.Element;
+declare function Popout({ isOpen, setIsOpen, content, children, placement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, 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.Element;
+        ({ children, ...rest }: TypeBoxProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 }

package/dist/index.js

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(src_exports);
 // src/Popout.tsx
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_react_spring = require("react-spring");
+var import_web = require("@react-spring/web");
 var import_react_focus_lock = __toESM(require("react-focus-lock"));
 var import_react_popper = require("react-popper");
 var import_seeds_motion_unitless = require("@sproutsocial/seeds-motion/dist/seeds-motion-unitless");
@@ -56,6 +56,7 @@ var TargetWrapper = import_styled_components.default.div`
 `;
 
 // src/Popout.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var doesRefContainEventTarget = (ref, event) => {
   return ref.current && event.target instanceof Node && ref.current.contains(event.target);
 };
@@ -70,7 +71,10 @@ var transitionConfig = {
     opacity: 0
   },
   config: {
-    duration: import_seeds_motion_unitless.MOTION_DURATION_FAST * 1e3
+    duration: (
+      // skip animation in test environment
+      process.env.NODE_ENV === "test" ? 0 : import_seeds_motion_unitless.MOTION_DURATION_FAST * 1e3
+    )
   }
 };
 function Popout({
@@ -102,12 +106,11 @@ function Popout({
   const isControlled = typeof isOpen === "boolean";
   const isShown = isControlled ? isOpen : isInternalShown;
   const setIsShown = (0, import_react.useMemo)(
-    () => isControlled && setIsOpen ? setIsOpen : (nextIsShown) => setIsInternalShown(nextIsShown),
+    () => isControlled && setIsOpen ? setIsOpen : setIsInternalShown,
     [isControlled, setIsOpen]
   );
   const targetRef = (0, import_react.useRef)();
   const popoutRef = (0, import_react.useRef)();
-  const isFirstRender = (0, import_react.useRef)(true);
   const scheduleUpdateCallback = (0, import_react.useRef)(() => {
   });
   (0, import_seeds_react_hooks.useMutationObserver)(
@@ -151,26 +154,19 @@ function Popout({
       };
     }
   }, [isShown, setIsShown]);
-  (0, import_react.useEffect)(
-    () => {
-      if (isFirstRender.current) {
-        isFirstRender.current = false;
-        return;
-      }
-      if (!onOpen && !onClose) {
-        return;
-      }
-      if (isShown && onOpen) {
-        onOpen();
-      }
-      if (!isShown && onClose) {
-        onClose();
-      }
-    },
-    // eslint-disable-next-line
-    [isShown]
-  );
-  const transitions = (0, import_react_spring.useTransition)(isShown, null, transitionConfig);
+  const callbackStateRef = (0, import_react.useRef)({ calledFor: isShown });
+  (0, import_react.useEffect)(() => {
+    if (callbackStateRef.current.calledFor === isShown) {
+      return;
+    }
+    callbackStateRef.current.calledFor = isShown;
+    if (isShown) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  }, [isShown, onOpen, onClose]);
+  const transition = (0, import_web.useTransition)(isShown, transitionConfig);
   const ariaProps = (0, import_react.useMemo)(
     () => disableWrapperAria ? {} : {
       "aria-expanded": isShown,
@@ -190,77 +186,82 @@ function Popout({
       setShouldRenderPopout(true);
     }
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof children === "function" ? children({
-    ref: childrenRef,
-    toggle,
-    show,
-    hide,
-    ariaProps
-  }) : /* @__PURE__ */ React.createElement(TargetWrapper, { ...qa, id, ...rest, ref: childrenRef }, React.cloneElement(children, {
-    ...ariaProps,
-    ...!isControlled ? {
-      onClick: toggle
-    } : void 0
-  })), shouldRenderPopout && !isInvalidContent && transitions.map(
-    ({ item, key, props }) => item && /* @__PURE__ */ React.createElement(PopoutComponentWrapper, { key }, /* @__PURE__ */ React.createElement(
-      import_react_popper.Popper,
-      {
-        referenceElement: targetRef.current,
-        placement,
-        modifiers: {
-          preventOverflow: {
-            boundariesElement: "viewport"
-          }
-        },
-        ...popperProps
-      },
-      ({
-        ref,
-        style,
-        placement: placement2,
-        outOfBoundaries,
-        scheduleUpdate
-      }) => {
-        const interceptRef = (el) => {
-          popoutRef.current = el;
-          ref(el);
-        };
-        scheduleUpdateCallback.current = scheduleUpdate;
-        scheduleUpdateRef(scheduleUpdate);
-        return /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            ref: interceptRef,
-            style: {
-              ...style,
-              zIndex,
-              width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
-            },
-            "data-placement": placement2,
-            "data-qa-popout": "",
-            "data-qa-popout-isopen": isOpen === true,
-            color,
-            ...rest
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React.Fragment, { children: [
+    typeof children === "function" ? children({
+      ref: childrenRef,
+      toggle,
+      show,
+      hide,
+      ariaProps
+    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TargetWrapper, { ...qa, id, ...rest, ref: childrenRef, children: React.cloneElement(children, {
+      ...ariaProps,
+      ...!isControlled ? {
+        onClick: toggle
+      } : void 0
+    }) }),
+    shouldRenderPopout && !isInvalidContent && transition(
+      (transitionStyle, isVisible, transition2) => isVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoutComponentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_popper.Popper,
+        {
+          referenceElement: targetRef.current,
+          placement,
+          modifiers: {
+            preventOverflow: {
+              boundariesElement: "viewport"
+            }
           },
-          item && !outOfBoundaries && /* @__PURE__ */ React.createElement(import_react_spring.animated.div, { style: props }, /* @__PURE__ */ React.createElement(
-            import_react_focus_lock.default,
-            {
-              autoFocus,
-              returnFocus,
-              disabled: !focusOnContent,
-              ...restFocusLockProps
-            },
-            typeof content === "function" && content({
-              hide
-            }),
-            typeof content !== "function" && content
-          ))
-        );
-      }
-    ))
-  ));
+          ...popperProps,
+          children: ({
+            ref,
+            style,
+            placement: placement2,
+            outOfBoundaries,
+            scheduleUpdate
+          }) => {
+            const interceptRef = (el) => {
+              popoutRef.current = el;
+              ref(el);
+            };
+            scheduleUpdateCallback.current = scheduleUpdate;
+            scheduleUpdateRef(scheduleUpdate);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ref: interceptRef,
+                style: {
+                  ...style,
+                  zIndex,
+                  width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
+                },
+                "data-placement": placement2,
+                "data-qa-popout": "",
+                "data-qa-popout-isopen": isOpen === true,
+                color,
+                ...rest,
+                children: isVisible && !outOfBoundaries && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web.animated.div, { style: transitionStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  import_react_focus_lock.default,
+                  {
+                    autoFocus,
+                    returnFocus,
+                    disabled: !focusOnContent,
+                    ...restFocusLockProps,
+                    children: [
+                      typeof content === "function" && content({
+                        hide
+                      }),
+                      typeof content !== "function" && content
+                    ]
+                  }
+                ) })
+              }
+            );
+          }
+        }
+      ) }, transition2.key)
+    )
+  ] });
 }
-var PopoutContent = ({ children, ...rest }) => /* @__PURE__ */ React.createElement(
+var PopoutContent = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_seeds_react_box.default,
   {
     bg: "container.background.base",
@@ -271,14 +272,17 @@ var PopoutContent = ({ children, ...rest }) => /* @__PURE__ */ React.createEleme
     boxShadow: "medium",
     p: 400,
     m: 300,
-    ...rest
-  },
-  children
+    ...rest,
+    children
+  }
 );
 PopoutContent.displayName = "Popout.Content";
 Popout.Content = PopoutContent;
 var Popout_default = Popout;
 
+// src/PopoutTypes.ts
+var React2 = require("react");
+
 // src/index.ts
 var src_default = Popout_default;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Popout.tsx","../src/styles.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 { useTransition, animated } from \"react-spring\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/dist/seeds-motion-unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps, EnumPlacements } from \"./PopoutTypes\";\n\nexport const placements: { [key: string]: EnumPlacements } = {\n  auto: \"auto\",\n\n  top: \"top\",\n  right: \"right\",\n  bottom: \"bottom\",\n  left: \"left\",\n\n  \"top-start\": \"top-start\",\n  \"right-start\": \"right-start\",\n  \"bottom-start\": \"bottom-start\",\n  \"left-start\": \"left-start\",\n\n  \"top-end\": \"top-end\",\n  \"right-end\": \"right-end\",\n  \"bottom-end\": \"bottom-end\",\n  \"left-end\": \"left-end\",\n};\n\nconst doesRefContainEventTarget = (ref, event) => {\n  return (\n    ref.current &&\n    event.target instanceof Node &&\n    ref.current.contains(event.target)\n  );\n};\n\n// Transition definitions for fading in and out\nconst transitionConfig = {\n  from: {\n    opacity: 0,\n  },\n  enter: {\n    opacity: 1,\n  },\n  leave: {\n    opacity: 0,\n  },\n  config: {\n    duration: MOTION_DURATION_FAST * 1000,\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  ...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\n  const setIsShown = useMemo(\n    () =>\n      isControlled && setIsOpen\n        ? setIsOpen\n        : (nextIsShown) => setIsInternalShown(nextIsShown),\n    [isControlled, setIsOpen]\n  );\n\n  const targetRef = useRef<HTMLDivElement>();\n  const popoutRef = useRef<HTMLDivElement>();\n  const isFirstRender = useRef(true);\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  // Manage onOpen and onClose callbacks\n  useEffect(\n    () => {\n      // Don't fire onClose on the first render\n      if (isFirstRender.current) {\n        isFirstRender.current = false;\n        return;\n      }\n\n      if (!onOpen && !onClose) {\n        return;\n      }\n\n      if (isShown && onOpen) {\n        onOpen();\n      }\n\n      if (!isShown && onClose) {\n        onClose();\n      }\n    },\n    // eslint-disable-next-line\n    [isShown]\n  );\n\n  const transitions = useTransition(isShown, null, transitionConfig);\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) => {\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 &&\n        !isInvalidContent &&\n        transitions.map(\n          ({ item, key, props }) =>\n            item && (\n              <PopoutComponentWrapper key={key}>\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) => {\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                        {item && !outOfBoundaries && (\n                          <animated.div style={props}>\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                          </animated.div>\n                        )}\n                      </div>\n                    );\n                  }}\n                </Popper>\n              </PopoutComponentWrapper>\n            )\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"],"mappings":"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","names":["styled","Portal","placement","FocusLock","Box"]}
+{"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 { useTransition, animated } from \"@react-spring/web\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/dist/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\n// Transition definitions for fading in and out\nconst transitionConfig = {\n  from: {\n    opacity: 0,\n  },\n  enter: {\n    opacity: 1,\n  },\n  leave: {\n    opacity: 0,\n  },\n  config: {\n    duration:\n      // skip animation in test environment\n      process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST * 1000,\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  ...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\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  const transition = useTransition(isShown, transitionConfig);\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 &&\n        !isInvalidContent &&\n        transition(\n          (transitionStyle, isVisible, transition) =>\n            isVisible && (\n              <PopoutComponentWrapper key={transition.key}>\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                        {isVisible && !outOfBoundaries && (\n                          <animated.div style={transitionStyle}>\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                          </animated.div>\n                        )}\n                      </div>\n                    );\n                  }}\n                </Popper>\n              </PopoutComponentWrapper>\n            )\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    | {\n        preventScroll?: boolean;\n      };\n  persistentFocus?: boolean;\n  autoFocus?: 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}\n"],"mappings":"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","names":["styled","Portal","transition","placement","FocusLock","Box","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-popout",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Seeds React Popout",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "@sproutsocial/seeds-react-system-props": "^2.2.0",
     "react-focus-lock": "^2.0.3",
     "react-popper": "^1.3.11",
-    "react-spring": "^8.0.25"
+    "@react-spring/web": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -34,7 +34,9 @@
     "@sproutsocial/eslint-config-seeds": "*",
     "react": "^18.0.0",
     "styled-components": "^5.2.3",
-    "typescript": "^5.1.6"
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "tsup": "^8.0.2"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"