@sproutsocial/racine 13.7.1 → 14.0.0

package/lib/PartnerLogo/styles.js

@@ -8,15 +8,15 @@ var sizes = {
   large: '32px',
   jumbo: '64px'
 };
+
+// TODO: remove width from stylesForSize
 var stylesForSize = function stylesForSize(height, width, logoSize) {
   return css(["line-height:", ";&,.logo-svg{height:", ";width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : '');
 };
-var Container = styled.span.attrs({
-  className: 'logo'
-}).withConfig({
+var Container = styled('span').withConfig({
   displayName: "styles__Container",
-  componentId: "sc-bc87k3-0"
-})(["display:inline-block;color:inherit;vertical-align:middle;", ";", " ", " ", ""], function (props) {
+  componentId: "sc-hrrn7g-0"
+})(["display:inline-block;color:inherit;vertical-align:middle;", " ", " ", " ", ""], COMMON, FLEXBOX, verticalAlign, function (props) {
   return stylesForSize(props.height, props.width, sizes[props.logoSize]);
-}, COMMON, FLEXBOX, verticalAlign);
+});
 export default Container;

package/lib/Popout/Popout.flow.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/Popout/Popout.js

@@ -0,0 +1,289 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["isOpen", "setIsOpen", "content", "children", "placement", "fullWidth", "zIndex", "focusOnContent", "onOpen", "onClose", "qa", "popperProps", "scheduleUpdateRef", "appendToBody", "focusLockProps", "color"],
+  _excluded2 = ["autoFocus", "returnFocus"],
+  _excluded3 = ["children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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 "../utils/hooks";
+import Portal from "../Portal";
+import Box from "../Box";
+import { TargetWrapper } from "./styles";
+export var placements = {
+  auto: 'auto',
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  'top-start': 'top-start',
+  'right-start': 'right-start',
+  'bottom-start': 'bottom-start',
+  'left-start': 'left-start',
+  'top-end': 'top-end',
+  'right-end': 'right-end',
+  'bottom-end': 'bottom-end',
+  'left-end': 'left-end'
+};
+var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
+  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
+};
+
+// Transition definitions for fading in and out
+var transitionConfig = {
+  from: {
+    opacity: 0
+  },
+  enter: {
+    opacity: 1
+  },
+  leave: {
+    opacity: 0
+  },
+  config: {
+    duration: MOTION_DURATION_FAST * 1000
+  }
+};
+export function Popout(_ref) {
+  var _popoutRef$current;
+  var isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    content = _ref.content,
+    children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
+    _ref$focusOnContent = _ref.focusOnContent,
+    focusOnContent = _ref$focusOnContent === void 0 ? true : _ref$focusOnContent,
+    onOpen = _ref.onOpen,
+    onClose = _ref.onClose,
+    _ref$qa = _ref.qa,
+    qa = _ref$qa === void 0 ? {} : _ref$qa,
+    popperProps = _ref.popperProps,
+    _ref$scheduleUpdateRe = _ref.scheduleUpdateRef,
+    scheduleUpdateRef = _ref$scheduleUpdateRe === void 0 ? function () {} : _ref$scheduleUpdateRe,
+    _ref$appendToBody = _ref.appendToBody,
+    appendToBody = _ref$appendToBody === void 0 ? true : _ref$appendToBody,
+    _ref$focusLockProps = _ref.focusLockProps,
+    focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
+    color = _ref.color,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInternalShown = _useState2[0],
+    setIsInternalShown = _useState2[1];
+  var isControlled = typeof isOpen === 'boolean';
+  var isShown = isControlled ? isOpen : isInternalShown;
+  var setIsShown = useMemo(function () {
+    return isControlled && setIsOpen ? setIsOpen : function (nextIsShown) {
+      return setIsInternalShown(nextIsShown);
+    };
+  }, [isControlled, setIsOpen]);
+  var targetRef = useRef();
+  var popoutRef = useRef();
+  var isFirstRender = useRef(true);
+
+  // This callback will automatically trigger a recalculation of the popout position if the content is changed
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  var scheduleUpdateCallback = useRef(function () {});
+  useMutationObserver((_popoutRef$current = popoutRef.current) !== null && _popoutRef$current !== void 0 ? _popoutRef$current : null, {
+    childList: true,
+    characterData: true,
+    subtree: true
+  }, scheduleUpdateCallback.current);
+  var _focusLockProps$autoF = focusLockProps.autoFocus,
+    autoFocus = _focusLockProps$autoF === void 0 ? true : _focusLockProps$autoF,
+    _focusLockProps$retur = focusLockProps.returnFocus,
+    returnFocus = _focusLockProps$retur === void 0 ? true : _focusLockProps$retur,
+    restFocusLockProps = _objectWithoutProperties(focusLockProps, _excluded2);
+  var isInvalidContent = content === null || content === undefined;
+
+  // Callbacks for showing, hiding, and toggling visibility of the popout
+  // (Not used when isOpen is passed explicitly)
+  var show = useCallback(function () {
+    return setIsShown(true);
+  }, [setIsShown]);
+  var hide = useCallback(function () {
+    return setIsShown(false);
+  }, [setIsShown]);
+  var toggle = useCallback(function () {
+    return setIsShown(!isShown);
+  }, [isShown, setIsShown]);
+  useEffect(function () {
+    var documentBody = document.body;
+    if (isShown && documentBody) {
+      // Callback passed to a click handler attached to document.body,
+      // allowing user to close the popout by clicking outside
+      var bodyClick = function bodyClick(e) {
+        if (doesRefContainEventTarget(targetRef, e) || doesRefContainEventTarget(popoutRef, e)) {
+          return;
+        }
+        setIsShown(false, e);
+      };
+
+      // Callback for allowing user to close by keying "esc"
+      var onEsc = function onEsc(e) {
+        // older browsers use "Esc"
+        if (['Escape', 'Esc'].includes(e.key)) {
+          // stop propagation to avoid interacting with other components when popout is shown
+          // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal
+          e.stopPropagation();
+          setIsShown(false, e);
+        }
+      };
+      documentBody.addEventListener('click', bodyClick, false);
+      documentBody.addEventListener('keydown', onEsc, false);
+      return function () {
+        documentBody.removeEventListener('click', bodyClick, false);
+        documentBody.removeEventListener('keydown', onEsc, false);
+      };
+    }
+  }, [isShown, setIsShown]);
+
+  // Manage onOpen and onClose callbacks
+  useEffect(function () {
+    // Don't fire onClose on the first render
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (!onOpen && !onClose) {
+      return;
+    }
+    if (isShown && onOpen) {
+      onOpen();
+    }
+    if (!isShown && onClose) {
+      onClose();
+    }
+  },
+  // eslint-disable-next-line
+  [isShown]);
+  var transitions = useTransition(isShown, null, transitionConfig);
+  // WAI-Aria properties for the popout trigger
+  var ariaProps = useMemo(function () {
+    return {
+      'aria-expanded': isShown,
+      'aria-haspopup': true
+    };
+  }, [isShown]);
+
+  // In cases where a controlled popout is used (e.g. props.isOpen is true), we need
+  // to wait for the targetRef to receive a value before rendering the popout. Otherwise,
+  // the Popout component renders, but doesn't know how to position itself due the
+  // `refereElement` property being undefined.
+  var _useState3 = 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),
+    _useState4 = _slicedToArray(_useState3, 2),
+    shouldRenderPopout = _useState4[0],
+    setShouldRenderPopout = _useState4[1];
+  var childrenRef = function childrenRef(el) {
+    targetRef.current = el;
+    if (targetRef.current) {
+      setShouldRenderPopout(true);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children({
+    ref: childrenRef,
+    toggle: toggle,
+    show: show,
+    hide: hide,
+    ariaProps: ariaProps
+  }) : /*#__PURE__*/React.createElement(TargetWrapper, _extends({}, qa, rest, {
+    ref: childrenRef
+  }), /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, ariaProps), !isControlled ? {
+    onClick: toggle
+  } : undefined))), shouldRenderPopout && !isInvalidContent && transitions.map(function (_ref2) {
+    var item = _ref2.item,
+      key = _ref2.key,
+      props = _ref2.props;
+    return item && /*#__PURE__*/React.createElement(PopoutComponentWrapper, {
+      key: key
+    }, /*#__PURE__*/React.createElement(Popper, _extends({
+      referenceElement: targetRef.current,
+      placement: placement,
+      modifiers: {
+        preventOverflow: {
+          boundariesElement: 'viewport'
+        }
+      }
+    }, popperProps), function (_ref3) {
+      var ref = _ref3.ref,
+        style = _ref3.style,
+        placement = _ref3.placement,
+        outOfBoundaries = _ref3.outOfBoundaries,
+        scheduleUpdate = _ref3.scheduleUpdate;
+      var interceptRef = function interceptRef(el) {
+        popoutRef.current = el;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ref(el);
+      };
+      scheduleUpdateCallback.current = scheduleUpdate;
+      scheduleUpdateRef(scheduleUpdate);
+      return /*#__PURE__*/React.createElement("div", _extends({
+        ref: interceptRef,
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          zIndex: zIndex,
+          width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : 'initial'
+        }),
+        "data-placement": placement,
+        "data-qa-popout": "",
+        "data-qa-popout-isopen": isOpen === true
+        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ,
+        color: color
+      }, rest), item && !outOfBoundaries && /*#__PURE__*/React.createElement(animated.div, {
+        style: props
+      }, /*#__PURE__*/React.createElement(FocusLock, _extends({
+        autoFocus: autoFocus,
+        returnFocus: returnFocus,
+        disabled: !focusOnContent
+      }, restFocusLockProps), typeof content === 'function' && content({
+        hide: hide
+      }), typeof content !== 'function' && content)));
+    }));
+  }));
+}
+var PopoutContent = function PopoutContent(_ref4) {
+  var children = _ref4.children,
+    rest = _objectWithoutProperties(_ref4, _excluded3);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    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;
+export default Popout;

package/lib/Popout/PopoutTypes.js

@@ -0,0 +1 @@
+export {};

package/lib/Popout/index.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+export * from "./Popout.flow";

package/lib/Popout/index.js

@@ -1,281 +1,4 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["isOpen", "setIsOpen", "content", "children", "placement", "fullWidth", "zIndex", "focusOnContent", "onOpen", "onClose", "qa", "popperProps", "scheduleUpdateRef", "appendToBody", "focusLockProps"],
-  _excluded2 = ["autoFocus", "returnFocus"],
-  _excluded3 = ["children"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-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 "../utils/hooks";
-import Portal from "../Portal";
-import Box from "../Box";
-import { TargetWrapper } from "./styles";
-export var placements = {
-  auto: 'auto',
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-  'top-start': 'top-start',
-  'right-start': 'right-start',
-  'bottom-start': 'bottom-start',
-  'left-start': 'left-start',
-  'top-end': 'top-end',
-  'right-end': 'right-end',
-  'bottom-end': 'bottom-end',
-  'left-end': 'left-end'
-};
-var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
-  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
-};
-
-// Transition definitions for fading in and out
-var transitionConfig = {
-  from: {
-    opacity: 0
-  },
-  enter: {
-    opacity: 1
-  },
-  leave: {
-    opacity: 0
-  },
-  config: {
-    duration: MOTION_DURATION_FAST * 1000
-  }
-};
-export default function Popout(_ref) {
-  var isOpen = _ref.isOpen,
-    setIsOpen = _ref.setIsOpen,
-    content = _ref.content,
-    children = _ref.children,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-    _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
-    _ref$focusOnContent = _ref.focusOnContent,
-    focusOnContent = _ref$focusOnContent === void 0 ? true : _ref$focusOnContent,
-    onOpen = _ref.onOpen,
-    onClose = _ref.onClose,
-    _ref$qa = _ref.qa,
-    qa = _ref$qa === void 0 ? {} : _ref$qa,
-    popperProps = _ref.popperProps,
-    _ref$scheduleUpdateRe = _ref.scheduleUpdateRef,
-    scheduleUpdateRef = _ref$scheduleUpdateRe === void 0 ? function () {} : _ref$scheduleUpdateRe,
-    _ref$appendToBody = _ref.appendToBody,
-    appendToBody = _ref$appendToBody === void 0 ? true : _ref$appendToBody,
-    _ref$focusLockProps = _ref.focusLockProps,
-    focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isInternalShown = _useState2[0],
-    setIsInternalShown = _useState2[1];
-  var isControlled = typeof isOpen === 'boolean';
-  var isShown = isControlled ? isOpen : isInternalShown;
-  var setIsShown = useMemo(function () {
-    return isControlled && setIsOpen ? setIsOpen : function (nextIsShown, e) {
-      return setIsInternalShown(nextIsShown);
-    };
-  }, [isControlled, setIsOpen]);
-  var targetRef = useRef();
-  var popoutRef = useRef();
-  var isFirstRender = useRef(true);
-  // This callback will automatically trigger a recalculation of the popout position if the content is changed
-  var scheduleUpdateCallback = useRef(function () {});
-  useMutationObserver(popoutRef.current, {
-    childList: true,
-    characterData: true,
-    subtree: true
-  }, scheduleUpdateCallback.current);
-  var _focusLockProps$autoF = focusLockProps.autoFocus,
-    autoFocus = _focusLockProps$autoF === void 0 ? true : _focusLockProps$autoF,
-    _focusLockProps$retur = focusLockProps.returnFocus,
-    returnFocus = _focusLockProps$retur === void 0 ? true : _focusLockProps$retur,
-    restFocusLockProps = _objectWithoutProperties(focusLockProps, _excluded2);
-  var isInvalidContent = content === null || content === undefined;
-
-  // Callbacks for showing, hiding, and toggling visibility of the popout
-  // (Not used when isOpen is passed explicitly)
-  var show = useCallback(function () {
-    return setIsShown(true);
-  }, [setIsShown]);
-  var hide = useCallback(function () {
-    return setIsShown(false);
-  }, [setIsShown]);
-  var toggle = useCallback(function () {
-    return setIsShown(!isShown);
-  }, [isShown, setIsShown]);
-  useEffect(function () {
-    var documentBody = document.body;
-    if (isShown && documentBody) {
-      // Callback passed to a click handler attached to document.body,
-      // allowing user to close the popout by clicking outside
-      var bodyClick = function bodyClick(e) {
-        if (doesRefContainEventTarget(targetRef, e) || doesRefContainEventTarget(popoutRef, e)) {
-          return;
-        }
-        setIsShown(false, e);
-      };
-
-      // Callback for allowing user to close by keying "esc"
-      var onEsc = function onEsc(e) {
-        // older browsers use "Esc"
-        if (['Escape', 'Esc'].includes(e.key)) {
-          // stop propagation to avoid interacting with other components when popout is shown
-          // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal
-          e.stopPropagation();
-          setIsShown(false, e);
-        }
-      };
-      documentBody.addEventListener('click', bodyClick, false);
-      documentBody.addEventListener('keydown', onEsc, false);
-      return function () {
-        documentBody.removeEventListener('click', bodyClick, false);
-        documentBody.removeEventListener('keydown', onEsc, false);
-      };
-    }
-  }, [isShown, setIsShown]);
-
-  // Manage onOpen and onClose callbacks
-  useEffect(function () {
-    // Don't fire onClose on the first render
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-    if (!onOpen && !onClose) {
-      return;
-    }
-    if (isShown && onOpen) {
-      onOpen();
-    }
-    if (!isShown && onClose) {
-      onClose();
-    }
-    // eslint-disable-next-line
-  }, [isShown]);
-  var transitions = useTransition(isShown, null, transitionConfig);
-
-  // WAI-Aria properties for the popout trigger
-  var ariaProps = useMemo(function () {
-    return {
-      'aria-expanded': isShown,
-      'aria-haspopup': true
-    };
-  }, [isShown]);
-
-  // In cases where a controlled popout is used (e.g. props.isOpen is true), we need
-  // to wait for the targetRef to receive a value before rendering the popout. Otherwise,
-  // the Popout component renders, but doesn't know how to position itself due the
-  // `refereElement` property being undefined.
-  var _useState3 = 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),
-    _useState4 = _slicedToArray(_useState3, 2),
-    shouldRenderPopout = _useState4[0],
-    setShouldRenderPopout = _useState4[1];
-  var childrenRef = function childrenRef(el) {
-    targetRef.current = el;
-    if (targetRef.current) {
-      setShouldRenderPopout(true);
-    }
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children({
-    ref: childrenRef,
-    toggle: toggle,
-    show: show,
-    hide: hide,
-    ariaProps: ariaProps
-  }) : /*#__PURE__*/React.createElement(TargetWrapper, _extends({}, qa, rest, {
-    ref: childrenRef
-  }), /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, ariaProps), !isControlled ? {
-    onClick: toggle
-  } : undefined))), shouldRenderPopout && !isInvalidContent && transitions.map(function (_ref2) {
-    var item = _ref2.item,
-      key = _ref2.key,
-      props = _ref2.props;
-    return item && /*#__PURE__*/React.createElement(PopoutComponentWrapper, {
-      key: key
-    }, /*#__PURE__*/React.createElement(Popper, _extends({
-      referenceElement: targetRef.current,
-      placement: placement,
-      modifiers: {
-        preventOverflow: {
-          boundariesElement: 'viewport'
-        }
-      }
-    }, popperProps), function (_ref3) {
-      var ref = _ref3.ref,
-        style = _ref3.style,
-        placement = _ref3.placement,
-        outOfBoundaries = _ref3.outOfBoundaries,
-        scheduleUpdate = _ref3.scheduleUpdate;
-      var interceptRef = function interceptRef(el) {
-        popoutRef.current = el;
-        ref(el);
-      };
-      scheduleUpdateCallback.current = scheduleUpdate;
-      scheduleUpdateRef(scheduleUpdate);
-      return (
-        /*#__PURE__*/
-        // $FlowIssue - upgrade v0.112.0
-        React.createElement("div", _extends({
-          ref: interceptRef,
-          style: _objectSpread(_objectSpread({}, style), {}, {
-            zIndex: zIndex,
-            width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : 'initial'
-          }),
-          "data-placement": placement,
-          "data-qa-popout": "",
-          "data-qa-popout-isopen": isOpen === true
-        }, rest), item && !outOfBoundaries && /*#__PURE__*/React.createElement(animated.div, {
-          style: props
-        }, /*#__PURE__*/React.createElement(FocusLock, _extends({
-          autoFocus: autoFocus,
-          returnFocus: returnFocus,
-          disabled: !focusOnContent
-        }, restFocusLockProps), typeof content === 'function' && content({
-          hide: hide
-        }), typeof content !== 'function' && content)))
-      );
-    }));
-  }));
-}
-var PopoutContent = function PopoutContent(_ref4) {
-  var children = _ref4.children,
-    rest = _objectWithoutProperties(_ref4, _excluded3);
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    bg: "container.background.base",
-    color: "text.body",
-    border: 500,
-    borderColor: "container.border.base",
-    borderRadius: "outer",
-    boxShadow: "medium",
-    p: 400,
-    m: 300
-  }, rest), children);
-};
-Popout.Content = PopoutContent;
-Popout.Content.displayName = 'Popout.Content';
+import Popout from "./Popout";
+export default Popout;
+export { Popout };
+export * from "./PopoutTypes";

package/lib/Popout/styles.js

@@ -2,5 +2,5 @@ import styled from 'styled-components';
 import { COMMON, LAYOUT } from "../utils/system-props";
 export var TargetWrapper = styled.div.withConfig({
   displayName: "styles__TargetWrapper",
-  componentId: "sc-qo3sn-0"
+  componentId: "sc-pftzv7-0"
 })(["display:inline-block;", " ", ""], COMMON, LAYOUT);

package/lib/Portal/Portal.flow.js

@@ -0,0 +1 @@
+import * as React from 'react';