@atlaskit/spotlight
Version:
A spotlight introduces users to points of interest, from focused messages to multi-step tours.
187 lines (182 loc) • 7.48 kB
JavaScript
/* legacy.tsx generated by @compiled/babel-plugin v3.0.2 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PopoverContent = void 0;
require("./legacy.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _motion = _interopRequireDefault(require("@atlaskit/motion/entering/motion"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _main = require("@atlaskit/popper/main");
var _context = require("../../controllers/context");
var _useFocusWithin = require("../../utils/use-focus-within");
var _useOnClickOutside = require("../../utils/use-on-click-outside");
var _useOnEscape = require("../../utils/use-on-escape");
var _conditionalExitingPersistence = require("./conditional-exiting-persistence");
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 styles = {
root: "_1pby1fw0"
};
/**
* Taken from `@atlaskit/popper`
*/
/**
* The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
* the caret extending beyond the bounding box (by roughly 2px). So, apply an offset to ensure
* the caret points to the very edge of the target element.
*
* Note: `@atlaskit/popper` maps the offset to the placement, so we only need to define `[0, 2]` and
* the offset will get correctly rotated depending on the placement.
*/
var defaultOffset = [0, 2];
/**
* The Spotlight card can be positioned in many different configurations, but the caret should always point to
* the center of the target element. `@atlaskit/popper` uses `'top' | 'right' | 'bottom' | 'left'` values for
* this center alignment along the respective face. So we translate between the Spotlight position, and the
* Popper position using this map.
*/
var popperPlacementMap = {
'top-start': 'top',
'top-center': 'top',
'top-end': 'top',
'bottom-start': 'bottom',
'bottom-center': 'bottom',
'bottom-end': 'bottom',
'right-start': 'right',
'right-end': 'right',
'left-start': 'left',
'left-end': 'left'
};
var DefaultMotion = function DefaultMotion(_ref) {
var children = _ref.children;
return /*#__PURE__*/React.createElement(_motion.default, {
enteringAnimation: "var(--ds-spotlight-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)",
exitingAnimation: "var(--ds-spotlight-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
}, children);
};
/**
* __PopoverContent__
*
* A `PopoverContent` is the element that is shown as a popover.
*/
var PopoverContent = exports.PopoverContent = function PopoverContent(props) {
var children = props.children,
placement = props.placement,
_props$motion = props.motion,
motion = _props$motion === void 0 ? DefaultMotion : _props$motion,
_props$isVisible = props.isVisible,
isVisible = _props$isVisible === void 0 ? true : _props$isVisible,
_props$shouldDismissO = props.shouldDismissOnClickOutside,
shouldDismissOnClickOutside = _props$shouldDismissO === void 0 ? true : _props$shouldDismissO,
dismiss = props.dismiss,
back = props.back,
testId = props.testId,
_props$offset = props.offset,
offset = _props$offset === void 0 ? defaultOffset : _props$offset,
strategy = props.strategy;
/**
* A user should only be able to pass a `done` or a `next`. Not both.
* The type is set up as a discriminant union. So, we need a typeguard
* here to destructure it properly.
*/
var done = 'done' in props ? props.done : undefined;
var next = 'next' in props ? props.next : undefined;
var updateRef = (0, _react.useRef)(function () {
return new Promise(function () {
return undefined;
});
});
var ref = (0, _react.useRef)(null);
var _useContext = (0, _react.useContext)(_context.SpotlightContext),
heading = _useContext.heading,
popoverContent = _useContext.popoverContent,
card = _useContext.card,
primaryAction = _useContext.primaryAction,
secondaryAction = _useContext.secondaryAction;
var focusWithin = (0, _useFocusWithin.useFocusWithin)(popoverContent.ref);
(0, _react.useEffect)(function () {
popoverContent.setRef(ref);
}, [ref, popoverContent]);
(0, _react.useEffect)(function () {
if (!done && !next) {
return;
}
if (done) {
primaryAction.setAction(done);
return;
} else if (next) {
primaryAction.setAction(next);
return;
}
}, [done, next, primaryAction]);
(0, _react.useEffect)(function () {
popoverContent.setDismiss(dismiss);
}, [dismiss, popoverContent]);
(0, _react.useEffect)(function () {
if (!back) {
return;
}
secondaryAction.setAction(back);
}, [back, secondaryAction]);
(0, _react.useLayoutEffect)(function () {
card.setPlacement(placement);
if (motion) {
card.setMotion(function () {
return motion;
});
}
}, [placement, card, motion]);
(0, _react.useEffect)(function () {
if (updateRef.current) {
popoverContent.setUpdate(function () {
return updateRef.current;
});
}
}, [popoverContent]);
(0, _useOnEscape.useOnEscape)(function (event) {
if (!focusWithin) {
return;
}
popoverContent.dismiss.current(event);
});
(0, _useOnClickOutside.useOnClickOutside)(function (event) {
if (!shouldDismissOnClickOutside) {
return;
}
popoverContent.dismiss.current(event);
});
return /*#__PURE__*/React.createElement(_main.Popper, {
offset: offset,
strategy: strategy,
placement: popperPlacementMap[placement]
}, function (_ref2) {
var localRef = _ref2.ref,
style = _ref2.style,
update = _ref2.update;
if (!isVisible && !(0, _fg.fg)('platform-dst-motion-uplift-spotlight')) {
return;
}
updateRef.current = update;
return (0, _fg.fg)('platform-dst-motion-uplift-spotlight') ? /*#__PURE__*/React.createElement(_conditionalExitingPersistence.ConditionalExitingPersistence, null, isVisible && /*#__PURE__*/React.createElement("div", {
role: "dialog",
"data-testid": testId,
"aria-labelledby": heading.id,
ref: (0, _mergeRefs.default)([ref, localRef]),
style: style,
className: (0, _runtime.ax)([styles.root])
}, children)) : /*#__PURE__*/React.createElement("div", {
role: "dialog",
"data-testid": testId,
"aria-labelledby": heading.id,
ref: (0, _mergeRefs.default)([ref, localRef]),
style: style,
className: (0, _runtime.ax)([styles.root])
}, children);
});
};