@atlaskit/tag/dist/cjs/tag-new/tag-motion.js

A tag labels UI objects for quick recognition and navigation.

/* tag-motion.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.TagMotion = TagMotion;
require("./tag-motion.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _useMotion2 = require("@atlaskit/motion/entering/use-motion");
var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
var _useExitingPersistence = require("@atlaskit/motion/exiting-persistence/use-exiting-persistence");
var _tagStatus = require("./tag-status");
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); }
// Measures settled truncation in onStart while useMotion drives each width animation phase.
var tagMotionKey = 'atlaskit-tag-motion';
var motionWrapperStyles = {
  root: "_1reo15vq _18m915vq _1e0c1n7u _yv0ei47z",
  entering: "_y44vkz8f",
  exiting: "_y44v1rag",
  reducedMotion: "_1bumglyw"
};
var motionContentStyles = {
  root: "_1rjc1b66 _18zr1b66 _1e0c1txw _1ul9idpf"
};
function TagMotionContent(_ref) {
  var children = _ref.children,
    forwardedRef = _ref.forwardedRef,
    hasMargin = _ref.hasMargin,
    onExitComplete = _ref.onExitComplete;
  var _useState = (0, _react.useState)(null),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    motionPhase = _useState2[0],
    setMotionPhase = _useState2[1];
  var _useState3 = (0, _react.useState)(null),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    hasEllipsis = _useState4[0],
    setHasEllipsis = _useState4[1];
  var motionElementRef = (0, _react.useRef)(null);
  var _useMotion = (0, _useMotion2.useMotion)({
      onStart: function onStart(phase) {
        if (motionElementRef.current) {
          var motionElement = motionElementRef.current;
          var inlineAnimation = motionElement.style.animation;
          motionElement.style.animation = 'none';
          var textElement = motionElement.querySelector('[data-tag-text]');
          setHasEllipsis(Boolean(textElement && textElement.scrollWidth > textElement.clientWidth));
          motionElement.style.animation = inlineAnimation;
        }
        setMotionPhase(phase);
      },
      onFinish: function onFinish(phase) {
        if (phase === 'exiting') {
          onExitComplete === null || onExitComplete === void 0 || onExitComplete();
        }
      }
    }),
    motionRef = _useMotion.ref,
    state = _useMotion.state;
  var mergedMotionRef = (0, _react.useMemo)(function () {
    return (0, _mergeRefs.default)([motionElementRef, motionRef]);
  }, [motionRef]);
  var onAnimationEnd = (0, _react.useCallback)(function (event) {
    if (event.target === event.currentTarget) {
      setMotionPhase(null);
    }
  }, []);
  var activeMotionPhase = state === 'entering' || state === 'exiting' ? state : motionPhase;
  return /*#__PURE__*/React.createElement("span", {
    ref: mergedMotionRef,
    onAnimationEnd: onAnimationEnd,
    className: (0, _runtime.ax)([motionWrapperStyles.root, activeMotionPhase === 'entering' && motionWrapperStyles.entering, activeMotionPhase === 'exiting' && motionWrapperStyles.exiting, motionWrapperStyles.reducedMotion])
  }, hasMargin ? /*#__PURE__*/React.createElement("span", {
    className: (0, _runtime.ax)([motionContentStyles.root])
  }, children({
    hasEllipsis: hasEllipsis,
    isEntering: activeMotionPhase === 'entering',
    isExiting: activeMotionPhase === 'exiting',
    ref: forwardedRef
  })) : children({
    hasEllipsis: hasEllipsis,
    isEntering: activeMotionPhase === 'entering',
    isExiting: activeMotionPhase === 'exiting',
    ref: forwardedRef
  }));
}

/**
 * Keeps the presence boundary mounted while applying motion to TagNew's root element.
 * The inline-grid wrapper collapses its track so neighboring tags reflow throughout exit.
 */
function TagMotion(_ref2) {
  var children = _ref2.children,
    forwardedRef = _ref2.forwardedRef,
    hasMargin = _ref2.hasMargin,
    onExitComplete = _ref2.onExitComplete,
    status = _ref2.status;
  var outerPresence = (0, _useExitingPersistence.useExitingPersistence)();
  var isRemoved = status === _tagStatus.TagStatus.Removed || outerPresence.isExiting;
  var shouldAppear = outerPresence.isInsideExitingPersistence && outerPresence.appear && !outerPresence.isExiting;
  var latestExitState = (0, _react.useRef)({
    onExitComplete: onExitComplete,
    outerPresence: outerPresence,
    status: status
  });
  latestExitState.current = {
    onExitComplete: onExitComplete,
    outerPresence: outerPresence,
    status: status
  };
  var onMotionExitComplete = (0, _react.useCallback)(function () {
    var latest = latestExitState.current;
    if (latest.outerPresence.isExiting) {
      var _latest$outerPresence, _latest$outerPresence2;
      (_latest$outerPresence = (_latest$outerPresence2 = latest.outerPresence).onFinish) === null || _latest$outerPresence === void 0 || _latest$outerPresence.call(_latest$outerPresence2);
    }
    if (latest.status === _tagStatus.TagStatus.Removed) {
      var _latest$onExitComplet;
      (_latest$onExitComplet = latest.onExitComplete) === null || _latest$onExitComplet === void 0 || _latest$onExitComplet.call(latest);
    }
  }, []);
  return /*#__PURE__*/React.createElement(_exitingPersistence.default, {
    appear: shouldAppear
  }, !isRemoved && /*#__PURE__*/React.createElement(TagMotionContent, {
    key: tagMotionKey,
    forwardedRef: forwardedRef,
    hasMargin: hasMargin,
    onExitComplete: onMotionExitComplete
  }, children));
}