@atlaskit/spotlight/dist/esm/ui/popover-content/top-layer.js

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

/* top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useContext, useEffect, useLayoutEffect, useRef } from 'react';
import Motion from '@atlaskit/motion/entering/motion';
import { createPopoverCloseEvent } from '@atlaskit/top-layer/popover/create-close-event';
import { Popover } from '@atlaskit/top-layer/popover/popover';
import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
import { useSimpleLightDismiss } from '@atlaskit/top-layer/use-simple-light-dismiss';
import { SpotlightContext } from '../../controllers/context';
import { usePositionArea } from '../../utils/use-position-area';
import { getPlacementWithOffset } from './get-placement-with-offset';
var noopUpdate = function noopUpdate() {
  return Promise.resolve();
};
var DefaultMotion = function DefaultMotion(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/React.createElement(Motion, {
    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.
 */
export var 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 = useRef(null);
  var _useContext = useContext(SpotlightContext),
    heading = _useContext.heading,
    popoverContent = _useContext.popoverContent,
    card = _useContext.card,
    primaryAction = _useContext.primaryAction,
    secondaryAction = _useContext.secondaryAction,
    target = _useContext.target;
  useAnchoredPopover({
    anchorRef: target.ref,
    popoverRef: popoverRef,
    placement: getPlacementWithOffset({
      placement: placement,
      offset: offset
    }),
    isOpen: isVisible
  });
  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(createPopoverCloseEvent({
        reason: reason
      }));
    }
  });
  useEffect(function () {
    popoverContent.setRef(popoverRef);
    popoverContent.setUpdate(function () {
      return noopUpdate;
    });
  }, [popoverContent]);
  var positionArea = usePositionArea(popoverRef);
  useEffect(function () {
    popoverContent.setPositionArea(positionArea);
  }, [popoverContent, positionArea]);
  useEffect(function () {
    if (!done && !next) {
      return;
    }
    if (done) {
      primaryAction.setAction(done);
      return;
    } else if (next) {
      primaryAction.setAction(next);
      return;
    }
  }, [done, next, primaryAction]);
  useEffect(function () {
    popoverContent.setDismiss(dismiss);
  }, [dismiss, popoverContent]);
  useEffect(function () {
    if (!back) {
      return;
    }
    secondaryAction.setAction(back);
  }, [back, secondaryAction]);
  useLayoutEffect(function () {
    card.setPlacement(placement);
    if (motion) {
      card.setMotion(function () {
        return motion;
      });
    }
  }, [placement, card, motion]);
  return /*#__PURE__*/React.createElement(Popover, {
    ref: popoverRef,
    isOpen: isVisible,
    mode: "manual",
    role: "dialog",
    labelledBy: heading.id,
    testId: testId
  }, children);
};