@razorpay/blade 8.15.1 → 8.15.2

package/build/components/index.d.ts

@@ -7801,7 +7801,15 @@ declare type CollapsibleBodyProps = {
 declare const CollapsibleBody: ({ children, testID, _width }: CollapsibleBodyProps) => ReactElement;
 
 declare type TooltipProps = {
+    /**
+     * Tooltip content
+     */
     content: string;
+    /**
+     * Placement of tooltip
+     *
+     * @default "top"
+     */
     placement?: Exclude<UseFloatingOptions['placement'], 'left-end' | 'left-start' | 'right-end' | 'right-start'>;
     children: React.ReactElement;
     onOpenChange?: ({ isOpen }: {

package/build/components/index.native.d.ts

@@ -6908,7 +6908,15 @@ declare type CollapsibleBodyProps = {
 declare const CollapsibleBody: ({ children, testID, _width }: CollapsibleBodyProps) => ReactElement;
 
 declare type TooltipProps = {
+    /**
+     * Tooltip content
+     */
     content: string;
+    /**
+     * Placement of tooltip
+     *
+     * @default "top"
+     */
     placement?: Exclude<UseFloatingOptions['placement'], 'left-end' | 'left-start' | 'right-end' | 'right-start'>;
     children: React.ReactElement;
     onOpenChange?: ({ isOpen }: {

package/build/components/index.native.js

@@ -3122,7 +3122,7 @@ var TooltipContent=React__default.forwardRef(function(_ref,ref){var children=_re
 
 var TooltipContext=React__default.createContext(null);var useTooltipContext=function useTooltipContext(){var context=React__default.useContext(TooltipContext);if(!context){throw new Error('[Blade Tooltip]: TooltipInteractiveWrapper must be used within Tooltip');}return context;};
 
-var Tooltip=function Tooltip(_ref){var content=_ref.content,children=_ref.children,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'left':_ref$placement,onOpenChange=_ref.onOpenChange;var _useTheme=useTheme(),theme=_useTheme.theme;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isOpen=_React$useState2[0],setIsOpen=_React$useState2[1];var gap=theme.spacing[2];var _getPlacementParts=getPlacementParts(placement),_getPlacementParts2=_slicedToArray(_getPlacementParts,1),side=_getPlacementParts2[0];var isHorizontal=side==='left'||side==='right';var arrowRef=React__default.useRef();var context=useFloating({sameScrollView:false,placement:placement,middleware:[shift({crossAxis:false,padding:gap}),flip({padding:gap}),offset(gap+ARROW_HEIGHT),arrow({element:arrowRef,padding:isHorizontal?0:ARROW_WIDTH})]});var refs=context.refs,floatingStyles=context.floatingStyles;var handleOpen=React__default.useCallback(function(){setIsOpen(true);onOpenChange==null?void 0:onOpenChange({isOpen:true});},[onOpenChange]);var handleClose=React__default.useCallback(function(){setIsOpen(false);onOpenChange==null?void 0:onOpenChange({isOpen:false});},[onOpenChange]);var _React$useState3=React__default.useState(function(){return isOpen;}),_React$useState4=_slicedToArray(_React$useState3,2),isVisible=_React$useState4[0],setIsVisible=_React$useState4[1];React__default.useEffect(function(){var id=setTimeout(function(){if(!isOpen){setIsVisible(false);}},theme.motion.duration.gentle);if(isOpen){setIsVisible(true);}return function(){return clearTimeout(id);};},[isOpen]);return jsxs(TooltipContext.Provider,{value:true,children:[React__default.cloneElement(children,_extends({},mergeProps({onTouchEnd:children.props.onTouchEnd},{onTouchEnd:handleOpen}),{ref:refs.setReference})),jsx(Modal$1,{accessibilityLabel:content,collapsable:false,transparent:true,visible:isVisible,children:jsx(TouchableOpacity,_extends({style:{flexShrink:0,flex:1},onPress:handleClose,activeOpacity:1,testID:"tooltip-modal-backdrop"},metaAttribute({name:MetaConstants.Tooltip}),{children:jsx(TooltipContent,{isVisible:isOpen,ref:refs.setFloating,side:side,style:_extends({},floatingStyles,{left:floatingStyles.left||-200,top:floatingStyles.top||-200}),arrow:jsx(TooltipArrow,{context:context,ref:arrowRef}),children:content})}))})]});};
+var Tooltip=function Tooltip(_ref){var content=_ref.content,children=_ref.children,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'left':_ref$placement,onOpenChange=_ref.onOpenChange;var _useTheme=useTheme(),theme=_useTheme.theme;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isOpen=_React$useState2[0],setIsOpen=_React$useState2[1];var gap=theme.spacing[2];var _getPlacementParts=getPlacementParts(placement),_getPlacementParts2=_slicedToArray(_getPlacementParts,1),side=_getPlacementParts2[0];var isHorizontal=side==='left'||side==='right';var arrowRef=React__default.useRef();var context=useFloating({sameScrollView:false,placement:placement,middleware:[shift({crossAxis:false,padding:gap}),flip({padding:gap}),offset(gap+ARROW_HEIGHT),arrow({element:arrowRef,padding:isHorizontal?0:ARROW_WIDTH})]});var refs=context.refs,floatingStyles=context.floatingStyles;var handleOpen=React__default.useCallback(function(){setIsOpen(true);onOpenChange==null?void 0:onOpenChange({isOpen:true});},[onOpenChange]);var handleClose=React__default.useCallback(function(){setIsOpen(false);onOpenChange==null?void 0:onOpenChange({isOpen:false});},[onOpenChange]);var _React$useState3=React__default.useState(function(){return isOpen;}),_React$useState4=_slicedToArray(_React$useState3,2),isVisible=_React$useState4[0],setIsVisible=_React$useState4[1];React__default.useEffect(function(){var id=setTimeout(function(){if(!isOpen){setIsVisible(false);}},theme.motion.duration.gentle);if(isOpen){setIsVisible(true);}return function(){return clearTimeout(id);};},[isOpen]);return jsxs(TooltipContext.Provider,{value:true,children:[React__default.cloneElement(children,_extends({},mergeProps({onTouchEnd:children.props.onTouchEnd},{onTouchEnd:handleOpen}),{ref:refs.setReference})),jsx(Modal$1,{accessibilityLabel:content,collapsable:false,transparent:true,visible:isVisible,children:jsx(TouchableOpacity,_extends({style:{flexShrink:0,flex:1},onPress:handleClose,activeOpacity:1,testID:"tooltip-modal-backdrop"},metaAttribute({name:MetaConstants.Tooltip}),{children:jsx(TooltipContent,{isVisible:isOpen,ref:refs.setFloating,side:side,style:_extends({},floatingStyles,{left:floatingStyles.left||-200,top:floatingStyles.top||-200,zIndex:1100}),arrow:jsx(TooltipArrow,{context:context,ref:arrowRef}),children:content})}))})]});};
 
 var StyledPressable=styled(Pressable)(function(){return {alignSelf:'flex-start'};});var TooltipInteractiveWrapper=React__default.forwardRef(function(props,ref){useTooltipContext();return jsx(StyledPressable,_extends({ref:ref,collapsable:false,testID:"tooltip-interactive-wrapper"},props,{children:props.children}));});