@atlaskit/popup
Version:
A popup displays brief content in an overlay.
268 lines (266 loc) • 14.2 kB
JavaScript
/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./popper-wrapper.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _runtime = require("@compiled/react/runtime");
var _layering = require("@atlaskit/layering");
var _motion = require("@atlaskit/motion");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _popper = require("@atlaskit/popper");
var _repositionOnUpdate = require("./reposition-on-update");
var _useCloseManager = require("./use-close-manager");
var _useFocusManager = require("./use-focus-manager");
var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "className", "isReferenceHidden", "shouldFitViewport"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
var fullWidthStyles = null;
var wrapperStyles = {
root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
rootT26Shape: "_2rko1mok",
rootLayer: "_1pby1nn1",
fullWidth: "_1bsb1osq"
};
var scrollableStyles = null;
var blanketStyles = null;
var modalStyles = null;
var newModalStyles = null;
var focusRingStyles = {
root: "_mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
};
var placementMap = {
'top': {
enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'top-start': {
enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'top-end': {
enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'bottom': {
enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'bottom-start': {
enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'bottom-end': {
enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'left': {
enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'left-start': {
enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'left-end': {
enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'right': {
enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'right-start': {
enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
},
'right-end': {
enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
}
};
var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var shouldRenderToParent = props.shouldRenderToParent,
shouldFitContainer = props.shouldFitContainer,
children = props.children,
appearance = props.appearance,
className = props.className,
_isReferenceHidden = props.isReferenceHidden,
shouldFitViewport = props.shouldFitViewport,
htmlAttributes = (0, _objectWithoutProperties2.default)(props, _excluded);
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
}, htmlAttributes, {
ref: !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? ref : undefined
}), children);
});
function PopperWrapper(_ref) {
var xcss = _ref.xcss,
isOpen = _ref.isOpen,
id = _ref.id,
offset = _ref.offset,
testId = _ref.testId,
content = _ref.content,
fallbackPlacements = _ref.fallbackPlacements,
onClose = _ref.onClose,
boundary = _ref.boundary,
rootBoundary = _ref.rootBoundary,
shouldFlip = _ref.shouldFlip,
_ref$placement = _ref.placement,
placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
_ref$popupComponent = _ref.popupComponent,
PopupContainer = _ref$popupComponent === void 0 ? DefaultPopupComponent : _ref$popupComponent,
_ref$autoFocus = _ref.autoFocus,
autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
triggerRef = _ref.triggerRef,
shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
shouldRenderToParent = _ref.shouldRenderToParent,
shouldFitContainer = _ref.shouldFitContainer,
shouldDisableFocusLock = _ref.shouldDisableFocusLock,
_ref$shouldReturnFocu = _ref.shouldReturnFocus,
shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
strategy = _ref.strategy,
role = _ref.role,
label = _ref.label,
titleId = _ref.titleId,
modifiers = _ref.modifiers,
shouldFitViewport = _ref.shouldFitViewport,
_ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance;
var _useState = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
popupRef = _useState2[0],
setPopupRef = _useState2[1];
var _useState3 = (0, _react.useState)(null),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
initialFocusRef = _useState4[0],
setInitialFocusRef = _useState4[1];
// We have cases where we need to close the Popup on Tab press, e.g. DropdownMenu
var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
var shouldDisableFocusTrap = role !== 'dialog';
(0, _useFocusManager.useFocusManager)({
initialFocusRef: initialFocusRef,
popupRef: popupRef,
shouldCloseOnTab: shouldCloseOnTab,
triggerRef: triggerRef,
autoFocus: autoFocus,
shouldDisableFocusTrap: shouldDisableFocusTrap,
shouldReturnFocus: shouldReturnFocus
});
(0, _useCloseManager.useCloseManager)({
isOpen: isOpen,
onClose: onClose,
popupRef: popupRef,
triggerRef: triggerRef,
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
shouldCloseOnTab: shouldCloseOnTab,
autoFocus: autoFocus,
shouldDisableFocusTrap: shouldDisableFocusTrap,
shouldRenderToParent: shouldRenderToParent
});
var _useLayering = (0, _layering.useLayering)(),
currentLevel = _useLayering.currentLevel;
var mergedModifiers = (0, _react.useMemo)(function () {
return [{
name: 'flip',
enabled: shouldFlip,
options: {
rootBoundary: rootBoundary,
boundary: boundary,
fallbackPlacements: fallbackPlacements
}
}].concat((0, _toConsumableArray2.default)(modifiers || []));
}, [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
return /*#__PURE__*/React.createElement(_popper.Popper, {
placement: placement,
offset: offset,
modifiers: mergedModifiers,
strategy: strategy,
shouldFitViewport: shouldFitViewport
}, function (_ref2) {
var _ref3 = _ref2.ref,
style = _ref2.style,
placement = _ref2.placement,
update = _ref2.update,
isReferenceHidden = _ref2.isReferenceHidden;
var popupContainer = /*#__PURE__*/React.createElement(PopupContainer
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
, {
className: (0, _runtime.ax)([xcss,
// @ts-expect-error: `ax` is not typed correctly
!initialFocusRef && (0, _platformFeatureFlags.fg)('platform-design-system-apply-popup-wrapper-focus') && focusRingStyles.root]),
appearance: appearance,
id: id,
"data-ds--level": currentLevel,
"data-placement": placement,
"data-testid": testId,
role: role,
"aria-label": label,
"aria-labelledby": titleId,
ref: !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? function (node) {
if (node) {
if (typeof _ref3 === 'function') {
_ref3(node);
} else {
_ref3.current = node;
}
setPopupRef(node);
}
} : undefined
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
// using tabIndex={-1} would cause a bug where Safari focuses
// first on the browser address bar when using keyboard
,
tabIndex: autoFocus ? 0 : undefined,
shouldRenderToParent: shouldRenderToParent,
shouldFitContainer: shouldFitContainer,
shouldFitViewport: shouldFitViewport,
isReferenceHidden: isReferenceHidden
}, /*#__PURE__*/React.createElement(_repositionOnUpdate.RepositionOnUpdate, {
update: update
}, content({
update: update,
isOpen: isOpen,
onClose: onClose,
setInitialFocusRef: setInitialFocusRef
})));
var container = /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: style,
// using tabIndex={-1} would cause a bug where Safari focuses
// first on the browser address bar when using keyboard
ref: function ref(node) {
if (node) {
if (typeof _ref3 === 'function') {
_ref3(node);
} else {
_ref3.current = node;
}
setPopupRef(node);
}
},
"data-testid": "".concat(testId, "--container"),
className: (0, _runtime.ax)([wrapperStyles.rootLayer, shouldFitContainer && wrapperStyles.fullWidth])
}, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(_motion.Motion, {
enteringAnimation: placementMap[placement].enter,
exitingAnimation: placementMap[placement].exit
}, popupContainer));
return /*#__PURE__*/React.createElement(_react.Fragment, null, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
}));
});
}
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = PopperWrapper;