@atlaskit/tag/dist/esm/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 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./tag-motion.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
// Measures settled truncation in onStart while useMotion drives each width animation phase.
import { useCallback, useMemo, useRef, useState } from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import { useMotion } from '@atlaskit/motion/entering/use-motion';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import { useExitingPersistence } from '@atlaskit/motion/exiting-persistence/use-exiting-persistence';
import { TagStatus } from './tag-status';
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 = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    motionPhase = _useState2[0],
    setMotionPhase = _useState2[1];
  var _useState3 = useState(null),
    _useState4 = _slicedToArray(_useState3, 2),
    hasEllipsis = _useState4[0],
    setHasEllipsis = _useState4[1];
  var motionElementRef = useRef(null);
  var _useMotion = 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 = useMemo(function () {
    return mergeRefs([motionElementRef, motionRef]);
  }, [motionRef]);
  var onAnimationEnd = 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: ax([motionWrapperStyles.root, activeMotionPhase === 'entering' && motionWrapperStyles.entering, activeMotionPhase === 'exiting' && motionWrapperStyles.exiting, motionWrapperStyles.reducedMotion])
  }, hasMargin ? /*#__PURE__*/React.createElement("span", {
    className: 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.
 */
export function TagMotion(_ref2) {
  var children = _ref2.children,
    forwardedRef = _ref2.forwardedRef,
    hasMargin = _ref2.hasMargin,
    onExitComplete = _ref2.onExitComplete,
    status = _ref2.status;
  var outerPresence = useExitingPersistence();
  var isRemoved = status === TagStatus.Removed || outerPresence.isExiting;
  var shouldAppear = outerPresence.isInsideExitingPersistence && outerPresence.appear && !outerPresence.isExiting;
  var latestExitState = useRef({
    onExitComplete: onExitComplete,
    outerPresence: outerPresence,
    status: status
  });
  latestExitState.current = {
    onExitComplete: onExitComplete,
    outerPresence: outerPresence,
    status: status
  };
  var onMotionExitComplete = 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.Removed) {
      var _latest$onExitComplet;
      (_latest$onExitComplet = latest.onExitComplete) === null || _latest$onExitComplet === void 0 || _latest$onExitComplet.call(latest);
    }
  }, []);
  return /*#__PURE__*/React.createElement(ExitingPersistence, {
    appear: shouldAppear
  }, !isRemoved && /*#__PURE__*/React.createElement(TagMotionContent, {
    key: tagMotionKey,
    forwardedRef: forwardedRef,
    hasMargin: hasMargin,
    onExitComplete: onMotionExitComplete
  }, children));
}