@razorpay/blade
Version:
The Design System that powers Razorpay
150 lines (147 loc) • 6.96 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { useFloating, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
import React__default from 'react';
import { TooltipContent } from './TooltipContent.js';
import { ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
import { TooltipContext } from './TooltipContext.js';
import { componentIds } from './componentIds.js';
import '../BladeProvider/index.js';
import '../Box/BaseBox/index.js';
import '../../utils/metaAttribute/index.js';
import '../../tokens/global/index.js';
import { useId } from '../../utils/useId.js';
import '../../utils/makeAccessible/index.js';
import { mergeProps } from '../../utils/mergeProps.js';
import '../PopupArrow/index.js';
import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.js';
import { componentZIndices } from '../../utils/componentZIndices.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import { mergeRefs } from '../../utils/useMergeRefs.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import useTheme from '../BladeProvider/useTheme.js';
import { size } from '../../tokens/global/size.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { PopupArrow } from '../PopupArrow/PopupArrow.web.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["title", "content", "children", "placement", "onOpenChange", "zIndex"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var _Tooltip = function _Tooltip(_ref) {
var title = _ref.title,
content = _ref.content,
children = _ref.children,
_ref$placement = _ref.placement,
placement = _ref$placement === void 0 ? 'top' : _ref$placement,
_onOpenChange = _ref.onOpenChange,
_ref$zIndex = _ref.zIndex,
zIndex = _ref$zIndex === void 0 ? componentZIndices.tooltip : _ref$zIndex,
rest = _objectWithoutProperties(_ref, _excluded);
var _useTheme = useTheme(),
theme = _useTheme.theme;
var id = useId();
var _React$useState = React__default.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isOpen = _React$useState2[0],
setIsOpen = _React$useState2[1];
var arrowRef = React__default.useRef(null);
var GAP = theme.spacing[2];
var _getFloatingPlacement = getFloatingPlacementParts(placement),
_getFloatingPlacement2 = _slicedToArray(_getFloatingPlacement, 1),
side = _getFloatingPlacement2[0];
var isHorizontal = side === 'left' || side === 'right';
var isOppositeAxis = side === 'right' || side === 'bottom';
var _useFloating = useFloating({
placement: placement,
open: isOpen,
strategy: 'fixed',
onOpenChange: function onOpenChange(open) {
setIsOpen(open);
_onOpenChange === null || _onOpenChange === void 0 ? void 0 : _onOpenChange({
isOpen: open
});
},
middleware: [shift({
crossAxis: false,
padding: GAP
}), flip({
padding: GAP
}), offset(GAP + ARROW_HEIGHT), arrow({
element: arrowRef,
padding: isHorizontal ? 0 : ARROW_WIDTH
})],
whileElementsMounted: autoUpdate
}),
refs = _useFloating.refs,
floatingStyles = _useFloating.floatingStyles,
context = _useFloating.context;
var animationOffset = isOppositeAxis ? -size[4] : size[4];
var _useTransitionStyles = useTransitionStyles(context, {
duration: theme.motion.duration.quick,
initial: {
opacity: 0,
transform: "translate".concat(isHorizontal ? 'X' : 'Y', "(").concat(animationOffset, "px)")
}
}),
isMounted = _useTransitionStyles.isMounted,
styles = _useTransitionStyles.styles;
useDelayGroup(context, {
id: id
});
var _useDelayGroupContext = useDelayGroupContext(),
delay = _useDelayGroupContext.delay;
var hover = useHover(context, {
delay: delay,
move: false
});
var focus = useFocus(context);
var role = useRole(context, {
role: 'tooltip'
});
var _useInteractions = useInteractions([role, hover, focus]),
getReferenceProps = _useInteractions.getReferenceProps,
getFloatingProps = _useInteractions.getFloatingProps;
return /*#__PURE__*/jsxs(TooltipContext.Provider, {
value: true,
children: [/*#__PURE__*/React__default.cloneElement(children, _objectSpread(_objectSpread({
// @ts-expect-error: ref does exist on children prop
ref: mergeRefs(refs.setReference, children.ref)
}, makeAccessible({
label: content
})), mergeProps(children.props, getReferenceProps()))), isMounted && /*#__PURE__*/jsx(FloatingPortal, {
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: refs.setFloating,
style: floatingStyles,
pointerEvents: "none",
zIndex: zIndex
}, getFloatingProps()), metaAttribute({
name: MetaConstants.Tooltip
})), makeAnalyticsAttribute(rest)), {}, {
children: /*#__PURE__*/jsx(TooltipContent, {
title: title,
style: styles,
arrow: /*#__PURE__*/jsx(PopupArrow, {
ref: arrowRef,
context: context,
width: ARROW_WIDTH,
height: ARROW_HEIGHT,
fillColor: theme.colors.popup.background.intense,
strokeColor: theme.colors.popup.border.intense
}),
children: content
})
}))
})]
});
};
var Tooltip = /*#__PURE__*/assignWithoutSideEffects(_Tooltip, {
componentId: componentIds.Tooltip
});
export { Tooltip };
//# sourceMappingURL=Tooltip.web.js.map