@sproutsocial/seeds-react-popout 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+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";
+interface TypeFocusLockProps {
+    disabled?: boolean;
+    returnFocus?: boolean | {
+        preventScroll?: boolean;
+    };
+    persistentFocus?: boolean;
+    autoFocus?: boolean;
+    noFocusGuards?: boolean | "tail";
+    group?: string;
+    className?: string;
+    onActivation?: (node: HTMLElement) => void;
+    onDeactivation?: (node: HTMLElement) => void;
+    as?: TypeStyledComponentsCommonProps["as"];
+    lockProps?: any;
+    ref?: any;
+    whiteList?: (activeElement: HTMLElement) => boolean;
+    shards?: Array<any>;
+    children?: React.ReactNode;
+}
+interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, Omit<React.ComponentPropsWithoutRef<"div">, "color" | "children" | "content"> {
+    /**
+     * Whether Popout should automatically add aria-attributes to its wrapped elements
+     */
+    disableWrapperAria?: boolean;
+    /**
+     * 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.
+     */
+    isOpen?: boolean;
+    /**
+     * If you use the isOpen prop you will need to pass a handler to change the state of the popout
+     */
+    setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;
+    /**
+     * The content to be shown in the popout. If there is no content, just the children are rendered
+     */
+    content: (React.ReactElement<any> | null | undefined) | (((opts: {
+        hide: () => void;
+    }) => React.ReactElement<any>) | null | undefined);
+    /**
+     * The content that the popout should be attached to
+     */
+    children: React.ReactElement<any> | ((opts: {
+        ref: (arg0: React.ElementRef<any> | HTMLElement) => void;
+        toggle: () => void;
+        show: () => void;
+        hide: () => void;
+        ariaProps: Record<string, any>;
+    }) => React.ReactNode);
+    /** How the popped-out content should be placed, in relationship to the children */
+    placement?: EnumPlacements;
+    /**
+     * Should the popped-out content inherit its width from the children?
+     * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
+     */
+    fullWidth?: boolean;
+    /**
+     *  When the popout has opened, should we focus on its content?
+     *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.
+     *  Upon closing the popout, focus will be returned to the popout's target.
+     *  If nothing within your popout's content is focusable, this prop will do nothing.
+     */
+    focusOnContent?: boolean;
+    qa?: Record<string, string>;
+    zIndex?: number;
+    /**
+     * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation
+     */
+    popperProps?: Partial<PopperProps>;
+    onClose?: () => void;
+    onOpen?: () => void;
+    /**
+     * And optional callback to receive the scheduleUpdate function.
+     * Use the function to recalculate the popout position in relation to the contents.
+     */
+    scheduleUpdateRef?: (arg0: () => void) => void;
+    /**
+     * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree
+     */
+    appendToBody?: boolean;
+    /**
+     * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api
+     */
+    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 namespace Popout {
+    var Content: {
+        ({ children, ...rest }: TypeBoxProps): React.JSX.Element;
+        displayName: string;
+    };
+}
+
+export { type EnumPlacements, Popout, type TypeFocusLockProps, type TypePopoutProps, Popout as default };

package/dist/index.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+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";
+interface TypeFocusLockProps {
+    disabled?: boolean;
+    returnFocus?: boolean | {
+        preventScroll?: boolean;
+    };
+    persistentFocus?: boolean;
+    autoFocus?: boolean;
+    noFocusGuards?: boolean | "tail";
+    group?: string;
+    className?: string;
+    onActivation?: (node: HTMLElement) => void;
+    onDeactivation?: (node: HTMLElement) => void;
+    as?: TypeStyledComponentsCommonProps["as"];
+    lockProps?: any;
+    ref?: any;
+    whiteList?: (activeElement: HTMLElement) => boolean;
+    shards?: Array<any>;
+    children?: React.ReactNode;
+}
+interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, Omit<React.ComponentPropsWithoutRef<"div">, "color" | "children" | "content"> {
+    /**
+     * Whether Popout should automatically add aria-attributes to its wrapped elements
+     */
+    disableWrapperAria?: boolean;
+    /**
+     * 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.
+     */
+    isOpen?: boolean;
+    /**
+     * If you use the isOpen prop you will need to pass a handler to change the state of the popout
+     */
+    setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;
+    /**
+     * The content to be shown in the popout. If there is no content, just the children are rendered
+     */
+    content: (React.ReactElement<any> | null | undefined) | (((opts: {
+        hide: () => void;
+    }) => React.ReactElement<any>) | null | undefined);
+    /**
+     * The content that the popout should be attached to
+     */
+    children: React.ReactElement<any> | ((opts: {
+        ref: (arg0: React.ElementRef<any> | HTMLElement) => void;
+        toggle: () => void;
+        show: () => void;
+        hide: () => void;
+        ariaProps: Record<string, any>;
+    }) => React.ReactNode);
+    /** How the popped-out content should be placed, in relationship to the children */
+    placement?: EnumPlacements;
+    /**
+     * Should the popped-out content inherit its width from the children?
+     * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
+     */
+    fullWidth?: boolean;
+    /**
+     *  When the popout has opened, should we focus on its content?
+     *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.
+     *  Upon closing the popout, focus will be returned to the popout's target.
+     *  If nothing within your popout's content is focusable, this prop will do nothing.
+     */
+    focusOnContent?: boolean;
+    qa?: Record<string, string>;
+    zIndex?: number;
+    /**
+     * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation
+     */
+    popperProps?: Partial<PopperProps>;
+    onClose?: () => void;
+    onOpen?: () => void;
+    /**
+     * And optional callback to receive the scheduleUpdate function.
+     * Use the function to recalculate the popout position in relation to the contents.
+     */
+    scheduleUpdateRef?: (arg0: () => void) => void;
+    /**
+     * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree
+     */
+    appendToBody?: boolean;
+    /**
+     * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api
+     */
+    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 namespace Popout {
+    var Content: {
+        ({ children, ...rest }: TypeBoxProps): React.JSX.Element;
+        displayName: string;
+    };
+}
+
+export { type EnumPlacements, Popout, type TypeFocusLockProps, type TypePopoutProps, Popout as default };

package/dist/index.js

@@ -0,0 +1,287 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Popout: () => Popout_default,
+  default: () => src_default
+});
+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_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");
+var import_seeds_react_hooks = require("@sproutsocial/seeds-react-hooks");
+var import_seeds_react_portal = __toESM(require("@sproutsocial/seeds-react-portal"));
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var TargetWrapper = import_styled_components.default.div`
+  display: inline-block;
+  ${import_seeds_react_system_props.COMMON}
+  ${import_seeds_react_system_props.LAYOUT}
+`;
+
+// src/Popout.tsx
+var doesRefContainEventTarget = (ref, event) => {
+  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
+};
+var transitionConfig = {
+  from: {
+    opacity: 0
+  },
+  enter: {
+    opacity: 1
+  },
+  leave: {
+    opacity: 0
+  },
+  config: {
+    duration: import_seeds_motion_unitless.MOTION_DURATION_FAST * 1e3
+  }
+};
+function Popout({
+  isOpen,
+  setIsOpen,
+  content,
+  children,
+  placement = "auto",
+  fullWidth = false,
+  zIndex = 7,
+  focusOnContent = true,
+  onOpen,
+  onClose,
+  qa = {},
+  popperProps,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  scheduleUpdateRef = () => {
+  },
+  appendToBody = true,
+  focusLockProps = {},
+  color,
+  "aria-haspopup": ariaHasPopup,
+  disableWrapperAria = false,
+  id,
+  ...rest
+}) {
+  const PopoutComponentWrapper = appendToBody ? import_seeds_react_portal.default : React.Fragment;
+  const [isInternalShown, setIsInternalShown] = (0, import_react.useState)(false);
+  const isControlled = typeof isOpen === "boolean";
+  const isShown = isControlled ? isOpen : isInternalShown;
+  const setIsShown = (0, import_react.useMemo)(
+    () => isControlled && setIsOpen ? setIsOpen : (nextIsShown) => setIsInternalShown(nextIsShown),
+    [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)(
+    popoutRef.current ?? null,
+    {
+      childList: true,
+      characterData: true,
+      subtree: true
+    },
+    scheduleUpdateCallback.current
+  );
+  const {
+    autoFocus = true,
+    returnFocus = true,
+    ...restFocusLockProps
+  } = focusLockProps;
+  const isInvalidContent = content === null || content === void 0;
+  const show = (0, import_react.useCallback)(() => setIsShown(true), [setIsShown]);
+  const hide = (0, import_react.useCallback)(() => setIsShown(false), [setIsShown]);
+  const toggle = (0, import_react.useCallback)(() => setIsShown(!isShown), [isShown, setIsShown]);
+  (0, import_react.useEffect)(() => {
+    const documentBody = document.body;
+    if (isShown && documentBody) {
+      const bodyClick = (e) => {
+        if (doesRefContainEventTarget(targetRef, e) || doesRefContainEventTarget(popoutRef, e)) {
+          return;
+        }
+        setIsShown(false, e);
+      };
+      const onEsc = (e) => {
+        if (["Escape", "Esc"].includes(e.key)) {
+          e.stopPropagation();
+          setIsShown(false, e);
+        }
+      };
+      documentBody.addEventListener("click", bodyClick, false);
+      documentBody.addEventListener("keydown", onEsc, false);
+      return () => {
+        documentBody.removeEventListener("click", bodyClick, false);
+        documentBody.removeEventListener("keydown", onEsc, false);
+      };
+    }
+  }, [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 ariaProps = (0, import_react.useMemo)(
+    () => disableWrapperAria ? {} : {
+      "aria-expanded": isShown,
+      "aria-haspopup": ariaHasPopup ? ariaHasPopup : true
+    },
+    [isShown, ariaHasPopup, disableWrapperAria]
+  );
+  const [shouldRenderPopout, setShouldRenderPopout] = (0, import_react.useState)(
+    // Only trigger this shouldRenderPopout logic when using a controlled component.
+    // The reason for that is because controlled components may render the popout
+    // immediately before the targetRef has a value set to it.
+    !isControlled
+  );
+  const childrenRef = (el) => {
+    targetRef.current = el;
+    if (targetRef.current) {
+      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
+          },
+          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
+          ))
+        );
+      }
+    ))
+  ));
+}
+var PopoutContent = ({ children, ...rest }) => /* @__PURE__ */ React.createElement(
+  import_seeds_react_box.default,
+  {
+    bg: "container.background.base",
+    color: "text.body",
+    border: 500,
+    borderColor: "container.border.base",
+    borderRadius: "outer",
+    boxShadow: "medium",
+    p: 400,
+    m: 300,
+    ...rest
+  },
+  children
+);
+PopoutContent.displayName = "Popout.Content";
+Popout.Content = PopoutContent;
+var Popout_default = Popout;
+
+// src/index.ts
+var src_default = Popout_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popout
+});

package/dist/index.mjs

@@ -0,0 +1,250 @@
+// src/Popout.tsx
+import * as React from "react";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { useTransition, animated } from "react-spring";
+import FocusLock from "react-focus-lock";
+import { Popper } from "react-popper";
+import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
+import { useMutationObserver } from "@sproutsocial/seeds-react-hooks";
+import Portal from "@sproutsocial/seeds-react-portal";
+import Box from "@sproutsocial/seeds-react-box";
+
+// src/styles.ts
+import styled from "styled-components";
+import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
+var TargetWrapper = styled.div`
+  display: inline-block;
+  ${COMMON}
+  ${LAYOUT}
+`;
+
+// src/Popout.tsx
+var doesRefContainEventTarget = (ref, event) => {
+  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
+};
+var transitionConfig = {
+  from: {
+    opacity: 0
+  },
+  enter: {
+    opacity: 1
+  },
+  leave: {
+    opacity: 0
+  },
+  config: {
+    duration: MOTION_DURATION_FAST * 1e3
+  }
+};
+function Popout({
+  isOpen,
+  setIsOpen,
+  content,
+  children,
+  placement = "auto",
+  fullWidth = false,
+  zIndex = 7,
+  focusOnContent = true,
+  onOpen,
+  onClose,
+  qa = {},
+  popperProps,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  scheduleUpdateRef = () => {
+  },
+  appendToBody = true,
+  focusLockProps = {},
+  color,
+  "aria-haspopup": ariaHasPopup,
+  disableWrapperAria = false,
+  id,
+  ...rest
+}) {
+  const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
+  const [isInternalShown, setIsInternalShown] = useState(false);
+  const isControlled = typeof isOpen === "boolean";
+  const isShown = isControlled ? isOpen : isInternalShown;
+  const setIsShown = useMemo(
+    () => isControlled && setIsOpen ? setIsOpen : (nextIsShown) => setIsInternalShown(nextIsShown),
+    [isControlled, setIsOpen]
+  );
+  const targetRef = useRef();
+  const popoutRef = useRef();
+  const isFirstRender = useRef(true);
+  const scheduleUpdateCallback = useRef(() => {
+  });
+  useMutationObserver(
+    popoutRef.current ?? null,
+    {
+      childList: true,
+      characterData: true,
+      subtree: true
+    },
+    scheduleUpdateCallback.current
+  );
+  const {
+    autoFocus = true,
+    returnFocus = true,
+    ...restFocusLockProps
+  } = focusLockProps;
+  const isInvalidContent = content === null || content === void 0;
+  const show = useCallback(() => setIsShown(true), [setIsShown]);
+  const hide = useCallback(() => setIsShown(false), [setIsShown]);
+  const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);
+  useEffect(() => {
+    const documentBody = document.body;
+    if (isShown && documentBody) {
+      const bodyClick = (e) => {
+        if (doesRefContainEventTarget(targetRef, e) || doesRefContainEventTarget(popoutRef, e)) {
+          return;
+        }
+        setIsShown(false, e);
+      };
+      const onEsc = (e) => {
+        if (["Escape", "Esc"].includes(e.key)) {
+          e.stopPropagation();
+          setIsShown(false, e);
+        }
+      };
+      documentBody.addEventListener("click", bodyClick, false);
+      documentBody.addEventListener("keydown", onEsc, false);
+      return () => {
+        documentBody.removeEventListener("click", bodyClick, false);
+        documentBody.removeEventListener("keydown", onEsc, false);
+      };
+    }
+  }, [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 ariaProps = useMemo(
+    () => disableWrapperAria ? {} : {
+      "aria-expanded": isShown,
+      "aria-haspopup": ariaHasPopup ? ariaHasPopup : true
+    },
+    [isShown, ariaHasPopup, disableWrapperAria]
+  );
+  const [shouldRenderPopout, setShouldRenderPopout] = useState(
+    // Only trigger this shouldRenderPopout logic when using a controlled component.
+    // The reason for that is because controlled components may render the popout
+    // immediately before the targetRef has a value set to it.
+    !isControlled
+  );
+  const childrenRef = (el) => {
+    targetRef.current = el;
+    if (targetRef.current) {
+      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
+          },
+          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
+          ))
+        );
+      }
+    ))
+  ));
+}
+var PopoutContent = ({ children, ...rest }) => /* @__PURE__ */ React.createElement(
+  Box,
+  {
+    bg: "container.background.base",
+    color: "text.body",
+    border: 500,
+    borderColor: "container.border.base",
+    borderRadius: "outer",
+    boxShadow: "medium",
+    p: 400,
+    m: 300,
+    ...rest
+  },
+  children
+);
+PopoutContent.displayName = "Popout.Content";
+Popout.Content = PopoutContent;
+var Popout_default = Popout;
+
+// src/index.ts
+var src_default = Popout_default;
+export {
+  Popout_default as Popout,
+  src_default as default
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@sproutsocial/seeds-react-popout",
+  "version": "1.0.0",
+  "description": "Seeds React Popout",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-motion": "^1.6.0",
+    "@sproutsocial/seeds-react-box": "^1.0.0",
+    "@sproutsocial/seeds-react-button": "^1.0.0",
+    "@sproutsocial/seeds-react-hooks": "^2.0.1",
+    "@sproutsocial/seeds-react-portal": "*",
+    "@sproutsocial/seeds-react-system-props": "^2.1.0",
+    "react-focus-lock": "^2.0.3",
+    "react-popper": "^1.3.11",
+    "react-spring": "^8.0.25"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^17.0.2",
+    "styled-components": "^5.2.3",
+    "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}