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

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

/* legacy.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./legacy.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useContext, useEffect, useLayoutEffect, useRef } from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import Motion from '@atlaskit/motion/entering/motion';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Popper } from '@atlaskit/popper/main';
import { SpotlightContext } from '../../controllers/context';
import { useFocusWithin } from '../../utils/use-focus-within';
import { useOnClickOutside } from '../../utils/use-on-click-outside';
import { useOnEscape } from '../../utils/use-on-escape';
import { ConditionalExitingPersistence } from './conditional-exiting-persistence';
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, {
    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) {
  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 = useRef(function () {
    return new Promise(function () {
      return undefined;
    });
  });
  var ref = useRef(null);
  var _useContext = useContext(SpotlightContext),
    heading = _useContext.heading,
    popoverContent = _useContext.popoverContent,
    card = _useContext.card,
    primaryAction = _useContext.primaryAction,
    secondaryAction = _useContext.secondaryAction;
  var focusWithin = useFocusWithin(popoverContent.ref);
  useEffect(function () {
    popoverContent.setRef(ref);
  }, [ref, popoverContent]);
  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]);
  useEffect(function () {
    if (updateRef.current) {
      popoverContent.setUpdate(function () {
        return updateRef.current;
      });
    }
  }, [popoverContent]);
  useOnEscape(function (event) {
    if (!focusWithin) {
      return;
    }
    popoverContent.dismiss.current(event);
  });
  useOnClickOutside(function (event) {
    if (!shouldDismissOnClickOutside) {
      return;
    }
    popoverContent.dismiss.current(event);
  });
  return /*#__PURE__*/React.createElement(Popper, {
    offset: offset,
    strategy: strategy,
    placement: popperPlacementMap[placement]
  }, function (_ref2) {
    var localRef = _ref2.ref,
      style = _ref2.style,
      update = _ref2.update;
    if (!isVisible && !fg('platform-dst-motion-uplift-spotlight')) {
      return;
    }
    updateRef.current = update;
    return fg('platform-dst-motion-uplift-spotlight') ? /*#__PURE__*/React.createElement(ConditionalExitingPersistence, null, isVisible && /*#__PURE__*/React.createElement("div", {
      role: "dialog",
      "data-testid": testId,
      "aria-labelledby": heading.id,
      ref: mergeRefs([ref, localRef]),
      style: style,
      className: ax([styles.root])
    }, children)) : /*#__PURE__*/React.createElement("div", {
      role: "dialog",
      "data-testid": testId,
      "aria-labelledby": heading.id,
      ref: mergeRefs([ref, localRef]),
      style: style,
      className: ax([styles.root])
    }, children);
  });
};