@fluentui/react-northstar
Version:
A themable React component library.
576 lines (564 loc) • 25.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.popupClassName = exports.Popup = void 0;
var _includes2 = _interopRequireDefault(require("lodash/includes"));
var _isArray2 = _interopRequireDefault(require("lodash/isArray"));
var _some2 = _interopRequireDefault(require("lodash/some"));
var _invoke2 = _interopRequireDefault(require("lodash/invoke"));
var _accessibility = require("@fluentui/accessibility");
var _reactBindings = require("@fluentui/react-bindings");
var _reactComponentEventListener = require("@fluentui/react-component-event-listener");
var _reactComponentNestingRegistry = require("@fluentui/react-component-nesting-registry");
var _reactComponentRef = require("@fluentui/react-component-ref");
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _domUtilities = require("@fluentui/dom-utilities");
var _utils = require("../../utils");
var _positioner = require("../../utils/positioner");
var _PopupContent = require("./PopupContent");
var _factories = require("../../utils/factories");
var _isRightClick = require("../../utils/isRightClick");
var _PortalInner = require("../Portal/PortalInner");
var _Animation = require("../Animation/Animation");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function getRealEventProps(element) {
if (element.type === _reactComponentRef.Ref) {
return getRealEventProps(element.props.children);
}
return Object.keys(element.props).reduce(function (acc, propName) {
var _Object$assign;
return propName.startsWith('on') ? Object.assign({}, acc, (_Object$assign = {}, _Object$assign[propName] = element.props[propName], _Object$assign)) : acc;
}, {});
}
var popupClassName = 'ui-popup';
/**
* A Popup displays a non-modal, often rich content, on top of its target element.
*/
exports.popupClassName = popupClassName;
var Popup = function Popup(props) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.useTelemetry)(Popup.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var accessibility = props.accessibility,
align = props.align,
autoFocus = props.autoFocus,
inline = props.inline,
contentRef = props.contentRef,
flipBoundary = props.flipBoundary,
on = props.on,
mountNode = props.mountNode,
mouseLeaveDelay = props.mouseLeaveDelay,
offset = props.offset,
overflowBoundary = props.overflowBoundary,
pointing = props.pointing,
popperRef = props.popperRef,
position = props.position,
positionFixed = props.positionFixed,
renderContent = props.renderContent,
tabbableTrigger = props.tabbableTrigger,
target = props.target,
trapFocus = props.trapFocus,
trigger = props.trigger,
unstable_disableTether = props.unstable_disableTether,
unstable_pinned = props.unstable_pinned,
autoSize = props.autoSize,
closeOnScroll = props.closeOnScroll;
var _useAutoControlled = (0, _reactBindings.useAutoControlled)({
initialValue: false,
defaultValue: props.defaultOpen,
value: props.open
}),
open = _useAutoControlled[0],
setOpen = _useAutoControlled[1];
var _React$useState = React.useState(false),
isOpenedByRightClick = _React$useState[0],
setIsOpenedByRightClick = _React$useState[1];
var closeTimeoutId = React.useRef();
var mouseDownEventRef = React.useRef();
var popupContentRef = React.useRef();
var pointerTargetRef = React.useRef();
var triggerRef = React.useRef();
// focusable element which has triggered Popup, can be either triggerDomElement or the element inside it
var triggerFocusableRef = React.useRef();
var rightClickReferenceObject = React.useRef();
(0, _reactBindings.useOnIFrameFocus)(open, context.target, function (e) {
var iframeInsidePopup = (0, _domUtilities.elementContains)(popupContentRef.current, e.target);
if (iframeInsidePopup) {
return;
}
setOpen(function (__) {
(0, _invoke2.default)(props, 'onOpenChange', e, Object.assign({}, props, {
open: false
}));
return false;
});
});
var getA11yProps = (0, _reactBindings.useAccessibility)(accessibility, {
debugName: Popup.displayName,
actionHandlers: {
closeAndFocusTrigger: function closeAndFocusTrigger(e) {
e.preventDefault();
_close(e, function () {
return (0, _invoke2.default)(triggerFocusableRef.current, 'focus');
});
},
close: function close(e) {
_close(e);
},
toggle: function toggle(e) {
e.preventDefault();
trySetOpen(!open, e);
},
open: function open(e) {
e.preventDefault();
setPopupOpen(true, e);
},
click: function click(e) {
(0, _invoke2.default)(triggerRef.current, 'click');
},
preventScroll: function preventScroll(e) {
e.preventDefault();
},
stopPropagation: function stopPropagation(e) {
e.stopPropagation();
}
},
mapPropsToBehavior: function mapPropsToBehavior() {
return {
isOpenedByRightClick: isOpenedByRightClick,
on: on,
trapFocus: trapFocus,
tabbableTrigger: tabbableTrigger,
trigger: trigger,
inline: inline
};
},
rtl: context.rtl
});
var handleDocumentClick = function handleDocumentClick(getRefs) {
return function (e) {
var currentMouseDownEvent = mouseDownEventRef.current;
mouseDownEventRef.current = null;
if (currentMouseDownEvent && !isOutsidePopupElement(getRefs(), currentMouseDownEvent)) {
return;
}
if (isOpenedByRightClick && isOutsidePopupElement(getRefs(), e)) {
trySetOpen(false, e);
rightClickReferenceObject.current = null;
return;
}
if (isOutsidePopupElementAndOutsideTriggerElement(getRefs(), e)) {
trySetOpen(false, e);
}
};
};
var handleMouseDown = function handleMouseDown(e) {
mouseDownEventRef.current = e;
};
var handleDocumentKeyDown = function handleDocumentKeyDown(getRefs) {
return function (e) {
var keyCode = (0, _accessibility.getCode)(e);
var isMatchingKey = keyCode === _accessibility.keyboardKey.Enter || keyCode === _accessibility.SpacebarKey;
if (isMatchingKey && isOutsidePopupElementAndOutsideTriggerElement(getRefs(), e)) {
trySetOpen(false, e);
}
// if focus was lost from Popup and moved to body, for e.g. when click on popup content
// and ESC is pressed, the last opened Popup should get closed and the trigger should get focus
var lastContentRef = getRefs().pop();
var isLastOpenedPopup = lastContentRef && lastContentRef.current === popupContentRef.current;
var activeDocument = context.target;
var bodyHasFocus = activeDocument.activeElement === activeDocument.body;
if (keyCode === _accessibility.keyboardKey.Escape && bodyHasFocus && isLastOpenedPopup) {
_close(e, function () {
return (0, _invoke2.default)(triggerFocusableRef.current, 'focus');
});
}
};
};
var isOutsidePopupElementAndOutsideTriggerElement = function isOutsidePopupElementAndOutsideTriggerElement(refs, e) {
var isOutsidePopup = isOutsidePopupElement(refs, e);
var isInsideTrigger = triggerRef.current && (0, _utils.doesNodeContainClick)(triggerRef.current, e, context.target);
return isOutsidePopup && !isInsideTrigger;
};
var isOutsidePopupElement = function isOutsidePopupElement(refs, e) {
var isInsideNested = (0, _some2.default)(refs, function (childRef) {
return (0, _utils.doesNodeContainClick)(childRef.current, e, context.target);
});
var isOutsidePopup = popupContentRef.current && !isInsideNested;
return isOutsidePopup;
};
var getTriggerProps = function getTriggerProps(triggerElement) {
var triggerElementEventProps = triggerElement ? getRealEventProps(triggerElement) : {};
var triggerProps = {};
var normalizedOn = (0, _isArray2.default)(on) ? on : [on];
/**
* The focus is adding the focus, blur and click event (always opening on click)
* If focus and context are provided, there is no need to add onClick
*/
if ((0, _includes2.default)(normalizedOn, 'focus')) {
triggerProps.onFocus = function (e) {
if ((0, _utils.isFromKeyboard)()) {
trySetOpen(true, e);
}
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
_invoke2.default.apply(void 0, [triggerElementEventProps, 'onFocus', e].concat(args));
};
triggerProps.onBlur = function (e) {
if (shouldBlurClose(e)) {
trySetOpen(false, e);
}
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
_invoke2.default.apply(void 0, [triggerElementEventProps, 'onBlur', e].concat(args));
};
if (!(0, _includes2.default)(normalizedOn, 'context')) {
triggerProps.onClick = function (e) {
setPopupOpen(true, e);
for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
_invoke2.default.apply(void 0, [triggerElementEventProps, 'onClick', e].concat(args));
};
}
}
/**
* The click is toggling the open state of the popup
*/
if ((0, _includes2.default)(normalizedOn, 'click')) {
triggerProps.onClick = function (e) {
trySetOpen(!open, e);
for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
args[_key4 - 1] = arguments[_key4];
}
_invoke2.default.apply(void 0, [triggerElementEventProps, 'onClick', e].concat(args));
};
}
/**
* The context is opening the popup
*/
if ((0, _includes2.default)(normalizedOn, 'context')) {
triggerProps.onContextMenu = function (e) {
setPopupOpen(!open, e);
for (var _len5 = arguments.length, args = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
args[_key5 - 1] = arguments[_key5];
}
_invoke2.default.apply(void 0, [triggerElementEventProps, 'onContextMenu', e].concat(args));
e.preventDefault();
};
}
/**
* The hover is adding the mouseEnter, mouseLeave, blur and click event (always opening on click)
* If hover and context are provided, there is no need to add onClick
*/
if ((0, _includes2.default)(normalizedOn, 'hover')) {
triggerProps.onMouseEnter = function (e) {
setPopupOpen(true, e);
(0, _utils.setWhatInputSource)(context.target, 'mouse');
for (var _len6 = arguments.length, args = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
args[_key6 - 1] = arguments[_key6];
}
_invoke2.default.apply(void 0, [triggerElementEventProps, 'onMouseEnter', e].concat(args));
};
triggerProps.onMouseLeave = function (e) {
setPopupOpen(false, e);
for (var _len7 = arguments.length, args = new Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
args[_key7 - 1] = arguments[_key7];
}
_invoke2.default.apply(void 0, [triggerElementEventProps, 'onMouseLeave', e].concat(args));
};
if (!(0, _includes2.default)(normalizedOn, 'context')) {
triggerProps.onClick = function (e) {
setPopupOpen(true, e);
for (var _len8 = arguments.length, args = new Array(_len8 > 1 ? _len8 - 1 : 0), _key8 = 1; _key8 < _len8; _key8++) {
args[_key8 - 1] = arguments[_key8];
}
_invoke2.default.apply(void 0, [triggerElementEventProps, 'onClick', e].concat(args));
};
}
triggerProps.onBlur = function (e) {
if (shouldBlurClose(e)) {
trySetOpen(false, e);
}
for (var _len9 = arguments.length, args = new Array(_len9 > 1 ? _len9 - 1 : 0), _key9 = 1; _key9 < _len9; _key9++) {
args[_key9 - 1] = arguments[_key9];
}
_invoke2.default.apply(void 0, [triggerElementEventProps, 'onBlur', e].concat(args));
};
}
return Object.assign({}, triggerElementEventProps, triggerProps);
};
var getContentProps = function getContentProps(predefinedProps) {
var contentHandlerProps = {};
var normalizedOn = (0, _isArray2.default)(on) ? on : [on];
/**
* The focus is adding the focus and blur events on the content
*/
if ((0, _includes2.default)(normalizedOn, 'focus')) {
contentHandlerProps.onFocus = function (e, contentProps) {
trySetOpen(true, e);
predefinedProps && (0, _invoke2.default)(predefinedProps, 'onFocus', e, contentProps);
};
contentHandlerProps.onBlur = function (e, contentProps) {
if (shouldBlurClose(e)) {
trySetOpen(false, e);
}
predefinedProps && (0, _invoke2.default)(predefinedProps, 'onBlur', e, contentProps);
};
}
/**
* The hover is adding the mouseEnter, mouseLeave
*/
if ((0, _includes2.default)(normalizedOn, 'hover')) {
contentHandlerProps.onMouseEnter = function (e, contentProps) {
setPopupOpen(true, e);
predefinedProps && (0, _invoke2.default)(predefinedProps, 'onMouseEnter', e, contentProps);
};
contentHandlerProps.onMouseLeave = function (e, contentProps) {
setPopupOpen(false, e);
predefinedProps && (0, _invoke2.default)(predefinedProps, 'onMouseLeave', e, contentProps);
};
}
return contentHandlerProps;
};
var shouldBlurClose = function shouldBlurClose(e) {
var relatedTarget = e.relatedTarget;
var isInsideContent = (0, _domUtilities.elementContains)(popupContentRef.current, relatedTarget);
var isInsideTarget = (0, _domUtilities.elementContains)(e.currentTarget, relatedTarget);
// When clicking in the popup content that has no tabIndex focus goes to body
// We shouldn't close the popup in this case
return relatedTarget && !(isInsideContent || isInsideTarget);
};
var renderPopperChildren = function renderPopperChildren(classes) {
return function (_ref) {
var placement = _ref.placement,
scheduleUpdate = _ref.scheduleUpdate;
var content = renderContent ? renderContent(scheduleUpdate) : props.content;
var popupContent = Popup.Content.create(content || {}, {
defaultProps: function defaultProps() {
return getA11yProps('popup', Object.assign({}, getContentProps(), {
placement: placement,
pointing: pointing,
pointerRef: pointerTargetRef,
trapFocus: trapFocus,
autoFocus: autoFocus,
autoSize: autoSize,
className: classes
}));
},
overrideProps: getContentProps
});
return /*#__PURE__*/React.createElement(_reactComponentNestingRegistry.Unstable_NestingAuto, null, function (getRefs, nestingRef) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactComponentRef.Ref, {
innerRef: function innerRef(domElement) {
popupContentRef.current = domElement;
(0, _reactComponentRef.handleRef)(contentRef, domElement);
nestingRef.current = domElement;
}
}, popupContent), context.target && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactComponentEventListener.EventListener, {
listener: handleMouseDown,
target: context.target,
type: "mousedown"
}), /*#__PURE__*/React.createElement(_reactComponentEventListener.EventListener, {
listener: handleDocumentClick(getRefs),
target: context.target,
type: "click",
capture: true
}), /*#__PURE__*/React.createElement(_reactComponentEventListener.EventListener, {
listener: handleDocumentClick(getRefs),
target: context.target,
type: "contextmenu",
capture: true
}), /*#__PURE__*/React.createElement(_reactComponentEventListener.EventListener, {
listener: handleDocumentKeyDown(getRefs),
target: context.target,
type: "keydown",
capture: true
}), (isOpenedByRightClick || closeOnScroll) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactComponentEventListener.EventListener, {
listener: dismissOnScroll,
target: context.target,
type: "wheel",
capture: true
}), /*#__PURE__*/React.createElement(_reactComponentEventListener.EventListener, {
listener: dismissOnScroll,
target: context.target,
type: "touchmove",
capture: true
}))));
});
};
};
var dismissOnScroll = function dismissOnScroll(e) {
// we only need to dismiss if the scroll happens outside the popup
if (!(0, _domUtilities.elementContains)(popupContentRef.current, e.target)) {
trySetOpen(false, e);
}
};
var trySetOpen = function trySetOpen(newValue, event) {
var isOpenedByRightClick = newValue && (0, _isRightClick.isRightClick)(event);
// when new state 'open' === 'true', save the last focused element
if (newValue) {
updateTriggerFocusableRef();
updateContextPosition(isOpenedByRightClick && event.nativeEvent);
}
setOpen(newValue);
setIsOpenedByRightClick(isOpenedByRightClick);
(0, _invoke2.default)(props, 'onOpenChange', event, Object.assign({}, props, {
open: newValue
}));
};
var setPopupOpen = function setPopupOpen(newOpen, e) {
clearTimeout(closeTimeoutId.current);
newOpen ? trySetOpen(true, e) : schedulePopupClose(e);
};
var schedulePopupClose = function schedulePopupClose(e) {
closeTimeoutId.current = setTimeout(function () {
trySetOpen(false, e);
}, mouseLeaveDelay);
};
var _close = function _close(e, onClose) {
if (open) {
trySetOpen(false, e);
onClose && onClose();
e.stopPropagation();
}
};
/**
* Save DOM element which had focus before Popup opens.
* Can be either trigger DOM element itself or the element inside it.
*/
var updateTriggerFocusableRef = function updateTriggerFocusableRef() {
var _context$target;
var activeElement = (_context$target = context.target) == null ? void 0 : _context$target.activeElement;
if (activeElement) {
triggerFocusableRef.current = triggerRef.current && (0, _domUtilities.elementContains)(triggerRef.current, activeElement) ? activeElement : triggerRef.current;
}
};
var updateContextPosition = function updateContextPosition(nativeEvent) {
rightClickReferenceObject.current = nativeEvent ? (0, _positioner.createReferenceFromClick)(nativeEvent) : null;
};
if (process.env.NODE_ENV !== 'production') {
// This is fine to violate there conditional rule as environment variables will never change during component
// lifecycle
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(function () {
if (inline && trapFocus) {
// eslint-disable-next-line no-console
console.warn('Using "trapFocus" in inline popup leads to broken behavior for screen reader users.');
}
if (!inline && autoFocus) {
// eslint-disable-next-line no-console
console.warn('Beware, "autoFocus" prop will just grab focus at the moment of mount and will not trap it. As user is able to TAB out from popup, better use "inline" prop to keep correct tab order.');
}
}, [autoFocus, inline, trapFocus]);
}
React.useEffect(function () {
if (open) {
// when new state 'open' === 'true', save the last focused element
updateTriggerFocusableRef();
}
});
var triggerNode = (0, _reactBindings.useTriggerElement)(props);
var triggerProps = getTriggerProps(triggerNode);
React.useEffect(function () {
if (open) {
(0, _domUtilities.setVirtualParent)(popupContentRef.current, triggerRef.current);
}
return function () {
if (open && popupContentRef.current) {
(0, _domUtilities.setVirtualParent)(popupContentRef.current, null);
}
};
}, [open]);
var contentElement = /*#__PURE__*/React.createElement(_Animation.Animation, {
mountOnEnter: true,
unmountOnExit: true,
visible: open,
name: open ? 'popup-show' : 'popup-hide'
}, function (_ref2) {
var classes = _ref2.classes;
var content = /*#__PURE__*/React.createElement(_positioner.Popper, {
pointerTargetRef: pointerTargetRef,
align: align,
flipBoundary: flipBoundary,
popperRef: popperRef,
position: position,
positionFixed: positionFixed,
offset: offset,
overflowBoundary: overflowBoundary,
rtl: context.rtl,
unstable_disableTether: unstable_disableTether,
unstable_pinned: unstable_pinned,
autoSize: autoSize,
targetRef: rightClickReferenceObject.current || target || triggerRef
}, renderPopperChildren(classes));
return inline ? content : /*#__PURE__*/React.createElement(_PortalInner.PortalInner, {
mountNode: mountNode
}, content);
});
var triggerElement = triggerNode && /*#__PURE__*/React.createElement(_reactComponentRef.Ref, {
innerRef: triggerRef
}, /*#__PURE__*/React.cloneElement(triggerNode, getA11yProps('trigger', triggerProps)));
var element = /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement, contentElement);
setEnd();
return element;
};
exports.Popup = Popup;
Popup.displayName = 'Popup';
Popup.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon({
as: false,
content: false
}), {
align: PropTypes.oneOf(_positioner.ALIGNMENTS),
defaultOpen: PropTypes.bool,
inline: PropTypes.bool,
mountNode: customPropTypes.domNode,
mouseLeaveDelay: PropTypes.number,
offset: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.number)]),
popperRef: customPropTypes.ref,
flipBoundary: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.oneOf(['clippingParents', 'window', 'scrollParent'])]),
overflowBoundary: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.oneOf(['clippingParents', 'window', 'scrollParent'])]),
on: PropTypes.oneOfType([PropTypes.oneOf(['hover', 'click', 'focus', 'context']), PropTypes.arrayOf(PropTypes.oneOf(['click', 'focus', 'context'])), PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'context']))]),
open: PropTypes.bool,
onOpenChange: PropTypes.func,
pointing: PropTypes.bool,
position: PropTypes.oneOf(_positioner.POSITIONS),
positionFixed: PropTypes.bool,
renderContent: PropTypes.func,
target: PropTypes.any,
trigger: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.any]),
tabbableTrigger: PropTypes.bool,
unstable_disableTether: PropTypes.oneOf([true, false, 'all']),
unstable_pinned: PropTypes.bool,
autoSize: PropTypes.oneOf(_positioner.AUTOSIZES),
content: customPropTypes.shorthandAllowingChildren,
contentRef: customPropTypes.ref,
trapFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
autoFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
closeOnScroll: PropTypes.bool
});
Popup.defaultProps = {
accessibility: _accessibility.popupBehavior,
align: 'start',
position: 'above',
on: 'click',
mouseLeaveDelay: 500,
tabbableTrigger: true
};
Popup.handledProps = Object.keys(Popup.propTypes);
Popup.Content = _PopupContent.PopupContent;
Popup.create = (0, _factories.createShorthandFactory)({
Component: Popup,
mappedProp: 'content'
});
Popup.shorthandConfig = {
mappedProp: 'content'
};
//# sourceMappingURL=Popup.js.map