@atlaskit/tag/dist/es2019/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 */
// Measures settled truncation in onStart while useMotion drives each width animation phase.
import "./tag-motion.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
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';
const tagMotionKey = 'atlaskit-tag-motion';
const motionWrapperStyles = {
  root: "_1reo15vq _18m915vq _1e0c1n7u _yv0ei47z",
  entering: "_y44vkz8f",
  exiting: "_y44v1rag",
  reducedMotion: "_1bumglyw"
};
const motionContentStyles = {
  root: "_1rjc1b66 _18zr1b66 _1e0c1txw _1ul9idpf"
};
function TagMotionContent({
  children,
  forwardedRef,
  hasMargin,
  onExitComplete
}) {
  const [motionPhase, setMotionPhase] = useState(null);
  const [hasEllipsis, setHasEllipsis] = useState(null);
  const motionElementRef = useRef(null);
  const {
    ref: motionRef,
    state
  } = useMotion({
    onStart: phase => {
      if (motionElementRef.current) {
        const motionElement = motionElementRef.current;
        const inlineAnimation = motionElement.style.animation;
        motionElement.style.animation = 'none';
        const textElement = motionElement.querySelector('[data-tag-text]');
        setHasEllipsis(Boolean(textElement && textElement.scrollWidth > textElement.clientWidth));
        motionElement.style.animation = inlineAnimation;
      }
      setMotionPhase(phase);
    },
    onFinish: phase => {
      if (phase === 'exiting') {
        onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
      }
    }
  });
  const mergedMotionRef = useMemo(() => mergeRefs([motionElementRef, motionRef]), [motionRef]);
  const onAnimationEnd = useCallback(event => {
    if (event.target === event.currentTarget) {
      setMotionPhase(null);
    }
  }, []);
  const 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,
    isEntering: activeMotionPhase === 'entering',
    isExiting: activeMotionPhase === 'exiting',
    ref: forwardedRef
  })) : children({
    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({
  children,
  forwardedRef,
  hasMargin,
  onExitComplete,
  status
}) {
  const outerPresence = useExitingPersistence();
  const isRemoved = status === TagStatus.Removed || outerPresence.isExiting;
  const shouldAppear = outerPresence.isInsideExitingPersistence && outerPresence.appear && !outerPresence.isExiting;
  const latestExitState = useRef({
    onExitComplete,
    outerPresence,
    status
  });
  latestExitState.current = {
    onExitComplete,
    outerPresence,
    status
  };
  const onMotionExitComplete = useCallback(() => {
    const latest = latestExitState.current;
    if (latest.outerPresence.isExiting) {
      var _latest$outerPresence, _latest$outerPresence2;
      (_latest$outerPresence = (_latest$outerPresence2 = latest.outerPresence).onFinish) === null || _latest$outerPresence === void 0 ? void 0 : _latest$outerPresence.call(_latest$outerPresence2);
    }
    if (latest.status === TagStatus.Removed) {
      var _latest$onExitComplet;
      (_latest$onExitComplet = latest.onExitComplete) === null || _latest$onExitComplet === void 0 ? 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));
}