@razorpay/blade/build/lib/web/development/components/DatePicker/usePopup.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useFloating, shift, flip, offset, autoUpdate, useTransitionStyles, useClick, useDismiss, useRole, useInteractions } from '@floating-ui/react';
import '../../tokens/global/index.js';
import '../../utils/index.js';
import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.js';
import { spacing } from '../../tokens/global/spacing.js';
import useTheme from '../BladeProvider/useTheme.js';
import { size } from '../../tokens/global/size.js';

var usePopup = function usePopup(_ref) {
  var _ref$enabled = _ref.enabled,
    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
    placement = _ref.placement,
    open = _ref.open,
    _onOpenChange = _ref.onOpenChange,
    referenceRef = _ref.referenceRef;
  var GAP = spacing[4];
  var _useTheme = useTheme(),
    theme = _useTheme.theme;
  var _getFloatingPlacement = getFloatingPlacementParts(placement),
    _getFloatingPlacement2 = _slicedToArray(_getFloatingPlacement, 1),
    side = _getFloatingPlacement2[0];
  var isOppositeAxis = side === 'right' || side === 'bottom';
  var _useFloating = useFloating({
      open: open,
      onOpenChange: function onOpenChange(isOpen, event, reason) {
        _onOpenChange === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(isOpen, event, reason);
        if (reason === 'escape-key') {
          var _referenceRef$current;
          (_referenceRef$current = referenceRef.current) === null || _referenceRef$current === void 0 ? void 0 : _referenceRef$current.focus();
        }
      },
      placement: placement,
      strategy: 'fixed',
      elements: {
        reference: referenceRef.current
      },
      middleware: [shift({
        crossAxis: false,
        padding: GAP
      }), flip({
        padding: GAP,
        fallbackAxisSideDirection: 'end'
      }), offset(GAP)],
      whileElementsMounted: function whileElementsMounted(reference, floating, update) {
        return autoUpdate(reference, floating, update, {
          elementResize: false
        });
      }
    }),
    refs = _useFloating.refs,
    floatingStyles = _useFloating.floatingStyles,
    context = _useFloating.context,
    computedPlacement = _useFloating.placement;

  // we need to animate from the offset of the computed placement
  // because placement can change dynamically based on available space
  var _getFloatingPlacement3 = getFloatingPlacementParts(computedPlacement),
    _getFloatingPlacement4 = _slicedToArray(_getFloatingPlacement3, 1),
    computedSide = _getFloatingPlacement4[0];
  var computedIsHorizontal = computedSide === 'left' || computedSide === 'right';
  var animationOffset = isOppositeAxis ? -size[4] : size[4];
  var _useTransitionStyles = useTransitionStyles(context, {
      duration: theme.motion.duration.quick,
      initial: {
        opacity: 0,
        transform: "translate".concat(computedIsHorizontal ? 'X' : 'Y', "(").concat(animationOffset, "px)")
      }
    }),
    isMounted = _useTransitionStyles.isMounted,
    animationStyles = _useTransitionStyles.styles;

  // remove click handler if popover is controlled
  var click = useClick(context);
  var dismiss = useDismiss(context, {
    enabled: enabled
  });
  var role = useRole(context);
  var _useInteractions = useInteractions([click, dismiss, role]),
    getReferenceProps = _useInteractions.getReferenceProps,
    getFloatingProps = _useInteractions.getFloatingProps;
  return {
    refs: refs,
    context: context,
    isMounted: isMounted,
    floatingStyles: floatingStyles,
    animationStyles: animationStyles,
    getReferenceProps: getReferenceProps,
    getFloatingProps: getFloatingProps
  };
};

export { usePopup };
//# sourceMappingURL=usePopup.js.map