@razorpay/blade/build/lib/web/production/components/AnimateInteractions/AnimateInteractions.web.js

The Design System that powers Razorpay

import React__default from 'react';
import { useAnimation } from 'framer-motion';
import { AnimateInteractionsContext } from './AnimateInteractionsProvider.js';
import { useFocusWithin } from './useFocusWithin.js';
import '../BaseMotion/index.js';
import { jsx } from 'react/jsx-runtime';
import { BaseMotionEnhancerBox } from '../BaseMotion/BaseMotion.js';

var AnimateInteractions = function AnimateInteractions(_ref) {
  var children = _ref.children,
    _ref$motionTriggers = _ref.motionTriggers,
    motionTriggers = _ref$motionTriggers === void 0 ? ['hover'] : _ref$motionTriggers;
  var baseMotionRef = React__default.useRef(null);
  var controls = useAnimation();
  useFocusWithin(baseMotionRef, {
    onFocusWithin: function onFocusWithin() {
      void controls.start('animate');
    },
    onBlurWithin: function onBlurWithin() {
      void controls.start('exit');
    }
  });
  return /*#__PURE__*/jsx(AnimateInteractionsContext.Provider, {
    value: {
      isInsideAnimateInteractionsContainer: true
    },
    children: /*#__PURE__*/jsx(BaseMotionEnhancerBox, {
      ref: baseMotionRef,
      motionTriggers: motionTriggers,
      animate: controls,
      children: children
    })
  });
};

export { AnimateInteractions };
//# sourceMappingURL=AnimateInteractions.web.js.map