@atlaskit/spotlight

Version:
A spotlight introduces users to points of interest, from focused messages to multi-step tours.
148 lines (145 loc) • 6.48 kB
JavaScript
/* top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PopoverContent = void 0;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _motion = _interopRequireDefault(require("@atlaskit/motion/entering/motion"));
var _createCloseEvent = require("@atlaskit/top-layer/popover/create-close-event");
var _popover = require("@atlaskit/top-layer/popover/popover");
var _useAnchoredPopover = require("@atlaskit/top-layer/use-anchored-popover");
var _useSimpleLightDismiss = require("@atlaskit/top-layer/use-simple-light-dismiss");
var _context = require("../../controllers/context");
var _usePositionArea = require("../../utils/use-position-area");
var _getPlacementWithOffset = require("./get-placement-with-offset");
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 noopUpdate = function noopUpdate() {
  return Promise.resolve();
};
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) {
  /**
   * This composes the low-level `@atlaskit/top-layer` `Popover` primitive directly
   * (rather than `@atlaskit/popup` or a higher-level wrapper) for two reasons:
   *
   * 1. Spotlight has bespoke positioning, dismiss, and motion requirements that
   *    are coupled to the surrounding `SpotlightContext` (heading id, card
   *    placement, primary/secondary actions, etc.). Building on the primitive
   *    keeps that wiring local to spotlight without leaking into a shared popup.
   * 2. Spotlight's public API exposes a `dismiss(event)` callback that takes a
   *    `KeyboardEvent` / `MouseEvent`, while the top-layer primitive surfaces a
   *    structured `{ reason }`. Bridging that contract here (via
   *    `createPopoverCloseEvent`) preserves backwards compatibility for existing
   *    consumers as we migrate behind the `platform-dst-top-layer-spotlight` gate.
   */
  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,
    offset = props.offset;
  var done = 'done' in props ? props.done : undefined;
  var next = 'next' in props ? props.next : undefined;
  var popoverRef = (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,
    target = _useContext.target;
  (0, _useAnchoredPopover.useAnchoredPopover)({
    anchorRef: target.ref,
    popoverRef: popoverRef,
    placement: (0, _getPlacementWithOffset.getPlacementWithOffset)({
      placement: placement,
      offset: offset
    }),
    isOpen: isVisible
  });
  (0, _useSimpleLightDismiss.useSimpleLightDismiss)({
    popoverRef: popoverRef,
    isOpen: isVisible,
    onClose: function onClose(_ref2) {
      var reason = _ref2.reason;
      if (reason === 'light-dismiss' && !shouldDismissOnClickOutside) {
        return;
      }

      // `createPopoverCloseEvent` is typed as `KeyboardEvent | MouseEvent | Event`
      // for forward-compatibility, but only `escape` / `light-dismiss` are
      // possible here, so the result is always a Keyboard/MouseEvent.
      dismiss((0, _createCloseEvent.createPopoverCloseEvent)({
        reason: reason
      }));
    }
  });
  (0, _react.useEffect)(function () {
    popoverContent.setRef(popoverRef);
    popoverContent.setUpdate(function () {
      return noopUpdate;
    });
  }, [popoverContent]);
  var positionArea = (0, _usePositionArea.usePositionArea)(popoverRef);
  (0, _react.useEffect)(function () {
    popoverContent.setPositionArea(positionArea);
  }, [popoverContent, positionArea]);
  (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]);
  return /*#__PURE__*/React.createElement(_popover.Popover, {
    ref: popoverRef,
    isOpen: isVisible,
    mode: "manual",
    role: "dialog",
    labelledBy: heading.id,
    testId: testId
  }, children);
};