@atlaskit/popup
Version:
A popup displays brief content in an overlay.
248 lines (247 loc) • 10.6 kB
JavaScript
/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./popper-wrapper.compiled.css";
import * as React from 'react';
import { forwardRef, Fragment, useMemo, useState } from 'react';
import { ax, ix } from '@compiled/react/runtime';
import { useLayering } from '@atlaskit/layering';
import { Motion } from '@atlaskit/motion';
import { fg } from '@atlaskit/platform-feature-flags';
import { Popper } from '@atlaskit/popper';
import { RepositionOnUpdate } from './reposition-on-update';
import { useCloseManager } from './use-close-manager';
import { useFocusManager } from './use-focus-manager';
const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
const fullWidthStyles = null;
const wrapperStyles = {
root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
rootT26Shape: "_2rko1mok",
rootLayer: "_1pby1nn1",
fullWidth: "_1bsb1osq"
};
const scrollableStyles = null;
const blanketStyles = null;
const modalStyles = null;
const newModalStyles = null;
const focusRingStyles = {
root: "_mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
};
const 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)"
}
};
const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
const {
shouldRenderToParent,
shouldFitContainer,
children,
appearance,
className,
isReferenceHidden: _isReferenceHidden,
shouldFitViewport,
...htmlAttributes
} = props;
return /*#__PURE__*/React.createElement("div", _extends({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
}, htmlAttributes, {
ref: !fg('platform-dst-motion-uplift') ? ref : undefined
}), children);
});
function PopperWrapper({
xcss,
isOpen,
id,
offset,
testId,
content,
fallbackPlacements,
onClose,
boundary,
rootBoundary,
shouldFlip,
placement = 'auto',
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
popupComponent: PopupContainer = DefaultPopupComponent,
autoFocus = true,
triggerRef,
shouldUseCaptureOnOutsideClick,
shouldRenderToParent,
shouldFitContainer,
shouldDisableFocusLock,
shouldReturnFocus = true,
strategy,
role,
label,
titleId,
modifiers,
shouldFitViewport,
appearance = 'default'
}) {
const [popupRef, setPopupRef] = useState(null);
const [initialFocusRef, setInitialFocusRef] = useState(null);
// We have cases where we need to close the Popup on Tab press, e.g. DropdownMenu
const shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
const shouldDisableFocusTrap = role !== 'dialog';
useFocusManager({
initialFocusRef,
popupRef,
shouldCloseOnTab,
triggerRef,
autoFocus,
shouldDisableFocusTrap,
shouldReturnFocus
});
useCloseManager({
isOpen,
onClose,
popupRef,
triggerRef,
shouldUseCaptureOnOutsideClick,
shouldCloseOnTab,
autoFocus,
shouldDisableFocusTrap,
shouldRenderToParent
});
const {
currentLevel
} = useLayering();
const mergedModifiers = useMemo(() => [{
name: 'flip',
enabled: shouldFlip,
options: {
rootBoundary,
boundary,
fallbackPlacements
}
}, ...(modifiers || [])], [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
return /*#__PURE__*/React.createElement(Popper, {
placement: placement,
offset: offset,
modifiers: mergedModifiers,
strategy: strategy,
shouldFitViewport: shouldFitViewport
}, ({
ref,
style,
placement,
update,
isReferenceHidden
}) => {
const popupContainer = /*#__PURE__*/React.createElement(PopupContainer
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
, {
className: ax([xcss,
// @ts-expect-error: `ax` is not typed correctly
!initialFocusRef && 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: !fg('platform-dst-motion-uplift') ? node => {
if (node) {
if (typeof ref === 'function') {
ref(node);
} else {
ref.current = node;
}
setPopupRef(node);
}
} : undefined
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: 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, {
update: update
}, content({
update,
isOpen,
onClose,
setInitialFocusRef
})));
const 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: node => {
if (node) {
if (typeof ref === 'function') {
ref(node);
} else {
ref.current = node;
}
setPopupRef(node);
}
},
"data-testid": `${testId}--container`,
className: ax([wrapperStyles.rootLayer, shouldFitContainer && wrapperStyles.fullWidth])
}, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
enteringAnimation: placementMap[placement].enter,
exitingAnimation: placementMap[placement].exit
}, popupContainer));
return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
className: ax(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
}));
});
}
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default PopperWrapper;