@webority/mobile-ui 0.16.0 → 0.16.1

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tooltip=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePresenceMotion=require("../../hooks/usePresenceMotion.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_corners=require("../../utils/corners.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_placement=require("../../utils/placement.js"),_focusHost=require("../Menu/focusHost.js"),_ModalSafeArea=require("../ModalSafeArea/ModalSafeArea.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_RichTooltipBody=require("./RichTooltipBody.js"),_tooltipPosition=require("./tooltipPosition.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?o:r){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?a(s,t,i):s[t]=e[t]);return s})(e,t)}const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:r,variant:o="plain",title:a,action:i,placement:s="auto",visible:n,onVisibleChange:c,hideOnContentPress:l=!0,maxWidth:u,showArrow:_=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:m,messageStyle:h,closeLabel:g="Close tooltip",testID:v}=e,b="rich"===o,R=e.trigger??(b?"press":"longPress"),x=(0,_index.useTheme)(),y=(0,_usePresenceMotion.usePresenceMotion)(),j=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),[T,A]=(0,_ModalSafeArea.useModalInsets)(),S=(0,_react.useMemo)(()=>({...j,top:T.top,bottom:T.bottom}),[j,T]),w=(0,_reactNative.useWindowDimensions)(),N=(0,_react.useMemo)(()=>buildStyles(x),[x]),P=x.components.tooltip,M=P?.gap??8,E=P?.screenPadding??8,C=P?.pressAutoHideMs??4e3,D=P?.arrowHalfWidth??4,H=P?.arrowHeight??6,L=P?.arrowCornerPadding??12,W=P?.lineHeight??18,O=u??(b?280:P?.maxWidth??240),q="press"===R&&!b,I=(P?.enableScaleAnimation??!1)&&!y.reduced,k=P?.exitDurationMs??150,F="manual"===R||"boolean"==typeof n,[V,U]=(0,_react.useState)(!1),B=F?Boolean(n):V,[z,G]=(0,_react.useState)(null),[X,Y]=(0,_react.useState)({width:0,height:0}),J=(0,_react.useRef)(null),K=(0,_react.useRef)(null),Q=(0,_react.useRef)(null),Z=(0,_react.useRef)(null),$=(0,_react.useRef)(null),ee=(0,_react.useRef)(!1),te=(0,_react.useRef)(!1),re=(0,_react.useRef)((0,_index.createAnimatedValue)(B||!I?1:.85)).current,oe=(0,_react.useRef)((0,_index.createAnimatedValue)(B?1:0)).current,ae=(0,_react.useRef)(null),ie=(0,_react.useRef)(!1),[se,ne]=(0,_react.useState)(B),ce=(0,_react.useCallback)(e=>{F||U(e),c?.(e)},[F,c]),le=(0,_react.useCallback)(()=>{J.current&&J.current.measureInWindow((e,t,r,o)=>{G({x:e,y:t,width:r,height:o})})},[]),ue=(0,_react.useCallback)(e=>{le(),ce(!0)},[le,ce]),de=(0,_react.useCallback)(()=>{ce(!1)},[ce]),fe=(0,_react.useRef)(de);fe.current=de;const pe=(0,_react.useCallback)(()=>{if(!ee.current)return;ee.current=!1;const e=$.current;$.current=null,e?e():b&&(0,_focusHost.focusHost)(K.current??J.current)},[b]);(0,_react.useEffect)(()=>{if(B)return te.current=!0,ee.current=!1,(0,_placement.claimAnchoredSurface)(()=>fe.current());te.current&&(te.current=!1,ee.current=!0)},[B]),(0,_react.useEffect)(()=>{B&&ne(!0)},[B]);const me=(0,_react.useRef)(se);(0,_react.useEffect)(()=>{me.current&&!se&&"ios"!==_reactNative.Platform.OS&&pe(),me.current=se},[se,pe]);const he=(0,_react.useCallback)(()=>{$.current=i?.onPress??null,de()},[i,de]);(0,_react.useEffect)(()=>{if(!ie.current)return ie.current=!0,B&&(le(),q&&(ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{de()},C))),()=>{ae.current&&(clearTimeout(ae.current),ae.current=null)};let e;if(B){le();const t=[_reactNative.Animated.timing(oe,{toValue:1,duration:y.duration("fast"),useNativeDriver:!0})];I?t.push(_reactNative.Animated.spring(re,{toValue:1,damping:x.motion.spring.snappy.damping,stiffness:x.motion.spring.snappy.stiffness,mass:x.motion.spring.snappy.mass,useNativeDriver:!0})):(0,_index.setNativeValue)(re,1),e=_reactNative.Animated.parallel(t),e.start(),q&&(ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{de()},C))}else{const t=[_reactNative.Animated.timing(oe,{toValue:0,duration:y.reduced?y.duration("fast"):k,easing:_reactNative.Easing.bezier(...x.motion.easing.accelerate),useNativeDriver:!0})];I&&t.push(_reactNative.Animated.timing(re,{toValue:.85,duration:k,easing:_reactNative.Easing.bezier(...x.motion.easing.accelerate),useNativeDriver:!0})),e=_reactNative.Animated.parallel(t),e.start(({finished:e})=>{e&&ne(!1)}),ae.current&&(clearTimeout(ae.current),ae.current=null)}return()=>{e?.stop(),ae.current&&(clearTimeout(ae.current),ae.current=null)}},[B]);const handleContentLayout=e=>{const{width:t,height:r}=e.nativeEvent.layout;t===X.width&&r===X.height||Y({width:t,height:r})},ge=(0,_react.useMemo)(()=>(0,_tooltipPosition.resolveTooltipPosition)({anchor:z,size:X,placement:s,rich:b,viewport:{width:w.width,height:w.height,insets:S},maxWidth:O,gap:M,padding:E,arrowCornerPadding:L}),[z,X,s,b,w.width,w.height,S,O,M,E,L]),ve=null!==z&&X.width>0,be=B&&ve;(0,_react.useEffect)(()=>{if(!b||!be)return;const e="web"===_reactNative.Platform.OS?Z:Q,t=setTimeout(()=>(0,_focusHost.focusHost)(e.current),_focusHost.FOCUS_DELAY_MS);return()=>clearTimeout(t)},[b,be]),(0,_react.useEffect)(()=>{!b&&be&&"ios"===_reactNative.Platform.OS&&"string"==typeof t&&(0,_announce.announce)(t)},[b,be,t]);const Re=r.props,xe=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(Re.ref,K),[Re.ref]),ye={};"longPress"!==R||Re.contextMenu?"press"===R&&(ye.onPress=e=>{Re.onPress?.(e),ue(e)}):(ye.onLongPress=ue,ye.accessibilityHint="Long press for more info"),b&&(ye.ref=xe);const je=_react.default.cloneElement(r,ye),Te=d??("string"==typeof t?t:"Tooltip"),Ae=(0,_react.useMemo)(()=>{if(!_)return null;const e=b?x.colors.background.elevated:x.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:D,borderRightWidth:D,borderBottomWidth:H,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===ge.placement?{...t,bottom:-H,left:ge.arrowOffset-D,transform:[{rotate:"180deg"}]}:"bottom"===ge.placement?{...t,top:-H,left:ge.arrowOffset-D}:"left"===ge.placement?{...t,right:-H,top:ge.arrowOffset-D,transform:[{rotate:"90deg"}]}:{...t,left:-H,top:ge.arrowOffset-D,transform:[{rotate:"-90deg"}]}},[_,ge,x,b,D,H]),Se={position:"absolute",top:ge.top,left:ge.left,maxWidth:O,opacity:B&&!ve?0:oe,transform:[{scale:re}]},we=Ae?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[Ae,m],pointerEvents:"none"}):null;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{ref:J,collapsable:!1,onLayout:le,testID:v,children:je}),(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:se,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:de,onDismiss:pe,children:(0,_jsxRuntime.jsxs)(_ModalSafeArea.ModalSafeArea,{onInsets:A,children:[b?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:l?de:void 0,accessibilityLabel:g,accessibilityRole:"button"}),se?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{onLayout:handleContentLayout,style:[Se,f,p],children:[(0,_jsxRuntime.jsx)(_RichTooltipBody.RichTooltipBody,{title:a,content:t,action:i,onAction:he,focusRef:Q,actionRef:Z,messageStyle:h}),we]}):null]}):(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:l?de:void 0,accessibilityLabel:g,accessibilityRole:"button",children:se?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{accessibilityRole:"tooltip",accessibilityLiveRegion:"polite",accessibilityLabel:Te,onLayout:handleContentLayout,style:[Se,f,p],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[N.tooltip,{backgroundColor:x.colors.background.inverse,borderRadius:x.radius.md,..._corners.smoothCorners,paddingHorizontal:x.spacing.md,paddingVertical:x.spacing.sm,...x.shadows.lg,shadowColor:x.shadows.lg.shadowColor}],children:"string"==typeof t?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:x.colors.text.inverse,fontSize:x.typography.fontSize.sm,lineHeight:W},h],children:t}):t}),we]}):null}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})]})};exports.Tooltip=Tooltip;const buildStyles=e=>_reactNative.StyleSheet.create({tooltip:{overflow:"hidden"}});var _default=exports.default=Tooltip;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tooltip=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePresenceMotion=require("../../hooks/usePresenceMotion.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_corners=require("../../utils/corners.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_placement=require("../../utils/placement.js"),_focusHost=require("../Menu/focusHost.js"),_ModalSafeArea=require("../ModalSafeArea/ModalSafeArea.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_RichTooltipBody=require("./RichTooltipBody.js"),_tooltipPosition=require("./tooltipPosition.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?o:r){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?a(s,t,i):s[t]=e[t]);return s})(e,t)}const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:r,variant:o="plain",title:a,action:i,placement:s="auto",visible:n,onVisibleChange:c,hideOnContentPress:l=!0,maxWidth:u,showArrow:_=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:m,messageStyle:h,closeLabel:g="Close tooltip",testID:v}=e,b="rich"===o,R=e.trigger??(b?"press":"longPress"),x=(0,_index.useTheme)(),y=(0,_usePresenceMotion.usePresenceMotion)(),j=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),[T,A]=(0,_ModalSafeArea.useModalInsets)(),S=(0,_react.useMemo)(()=>({...j,top:T.top,bottom:T.bottom}),[j,T]),w=(0,_reactNative.useWindowDimensions)(),N=(0,_react.useMemo)(()=>buildStyles(x),[x]),P=x.components.tooltip,M=P?.gap??8,E=P?.screenPadding??8,C=P?.pressAutoHideMs??4e3,D=P?.arrowHalfWidth??4,H=P?.arrowHeight??6,L=P?.arrowCornerPadding??12,W=P?.lineHeight??18,O=u??(b?280:P?.maxWidth??240),q="press"===R&&!b,I=(P?.enableScaleAnimation??!1)&&!y.reduced,k=P?.exitDurationMs??150,F="manual"===R||"boolean"==typeof n,[V,U]=(0,_react.useState)(!1),B=F?Boolean(n):V,[z,G]=(0,_react.useState)(null),[X,Y]=(0,_react.useState)({width:0,height:0}),J=(0,_react.useRef)(null),K=(0,_react.useRef)(null),Q=(0,_react.useRef)(null),Z=(0,_react.useRef)(null),$=(0,_react.useRef)(null),ee=(0,_react.useRef)(!1),te=(0,_react.useRef)(!1),re=(0,_react.useRef)((0,_index.createAnimatedValue)(B||!I?1:.85)).current,oe=(0,_react.useRef)((0,_index.createAnimatedValue)(B?1:0)).current,ae=(0,_react.useRef)(null),ie=(0,_react.useRef)(!1),[se,ne]=(0,_react.useState)(B),ce=(0,_react.useCallback)(e=>{F||U(e),c?.(e)},[F,c]),le=(0,_react.useCallback)(()=>{J.current&&J.current.measureInWindow((e,t,r,o)=>{G({x:e,y:t,width:r,height:o})})},[]),ue=(0,_react.useCallback)(e=>{le(),ce(!0)},[le,ce]),de=(0,_react.useCallback)(()=>{ce(!1)},[ce]),fe=(0,_react.useRef)(de);fe.current=de;const pe=(0,_react.useCallback)(()=>{if(!ee.current)return;ee.current=!1;const e=$.current;$.current=null,e?e():b&&(0,_focusHost.focusHost)(K.current??J.current)},[b]);(0,_react.useEffect)(()=>{if(B)return te.current=!0,ee.current=!1,(0,_placement.claimAnchoredSurface)(()=>fe.current());te.current&&(te.current=!1,ee.current=!0)},[B]),(0,_react.useEffect)(()=>{B&&ne(!0)},[B]);const me=(0,_react.useRef)(se);(0,_react.useEffect)(()=>{me.current&&!se&&"ios"!==_reactNative.Platform.OS&&pe(),me.current=se},[se,pe]);const he=(0,_react.useCallback)(()=>{$.current=i?.onPress??null,de()},[i,de]);(0,_react.useEffect)(()=>{if(!ie.current)return ie.current=!0,B&&(le(),q&&(ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{de()},C))),()=>{ae.current&&(clearTimeout(ae.current),ae.current=null)};let e;if(B){le();const t=[_reactNative.Animated.timing(oe,{toValue:1,duration:y.duration("fast"),useNativeDriver:!0})];I?t.push(_reactNative.Animated.spring(re,{toValue:1,damping:x.motion.spring.snappy.damping,stiffness:x.motion.spring.snappy.stiffness,mass:x.motion.spring.snappy.mass,useNativeDriver:!0})):(0,_index.setNativeValue)(re,1),e=_reactNative.Animated.parallel(t),e.start(),q&&(ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{de()},C))}else{const t=[_reactNative.Animated.timing(oe,{toValue:0,duration:y.reduced?y.duration("fast"):k,easing:_reactNative.Easing.bezier(...x.motion.easing.accelerate),useNativeDriver:!0})];I&&t.push(_reactNative.Animated.timing(re,{toValue:.85,duration:k,easing:_reactNative.Easing.bezier(...x.motion.easing.accelerate),useNativeDriver:!0})),e=_reactNative.Animated.parallel(t),e.start(({finished:e})=>{e&&ne(!1)}),ae.current&&(clearTimeout(ae.current),ae.current=null)}return()=>{e?.stop(),ae.current&&(clearTimeout(ae.current),ae.current=null)}},[B]);const handleContentLayout=e=>{const{width:t,height:r}=e.nativeEvent.layout;t===X.width&&r===X.height||Y({width:t,height:r})},ge=(0,_react.useMemo)(()=>(0,_tooltipPosition.resolveTooltipPosition)({anchor:z,size:X,placement:s,rich:b,viewport:{width:w.width,height:w.height,insets:S},maxWidth:O,gap:M,padding:E,arrowCornerPadding:L}),[z,X,s,b,w.width,w.height,S,O,M,E,L]),ve=null!==z&&X.width>0,be=B&&ve;(0,_react.useEffect)(()=>{if(!b||!be)return;const e="web"===_reactNative.Platform.OS?Z:Q,t=setTimeout(()=>(0,_focusHost.focusHost)(e.current),_focusHost.FOCUS_DELAY_MS);return()=>clearTimeout(t)},[b,be]),(0,_react.useEffect)(()=>{!b&&be&&"ios"===_reactNative.Platform.OS&&"string"==typeof t&&(0,_announce.announce)(t)},[b,be,t]);const Re=r.props,xe=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(Re.ref,K),[Re.ref]),ye={};"longPress"!==R||Re.contextMenu?"press"===R&&(ye.onPress=e=>{Re.onPress?.(e),ue(e)}):(ye.onLongPress=ue,ye.accessibilityHint="Long press for more info"),b&&(ye.ref=xe);const je=_react.default.cloneElement(r,ye),Te=d??("string"==typeof t?t:"Tooltip"),Ae=(0,_react.useMemo)(()=>{if(!_)return null;const e=b?x.colors.background.elevated:x.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:D,borderRightWidth:D,borderBottomWidth:H,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===ge.placement?{...t,bottom:-H,left:ge.arrowOffset-D,transform:[{rotate:"180deg"}]}:"bottom"===ge.placement?{...t,top:-H,left:ge.arrowOffset-D}:"left"===ge.placement?{...t,right:-H,top:ge.arrowOffset-D,transform:[{rotate:"90deg"}]}:{...t,left:-H,top:ge.arrowOffset-D,transform:[{rotate:"-90deg"}]}},[_,ge,x,b,D,H]),Se={position:"absolute",top:ge.top,left:ge.left,maxWidth:O,opacity:B&&!ve?0:oe,transform:[{scale:re}]},we=Ae?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[Ae,m],pointerEvents:"none"}):null;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{ref:J,collapsable:!1,onLayout:le,testID:v,children:je}),(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:se,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:de,onDismiss:pe,children:(0,_jsxRuntime.jsxs)(_ModalSafeArea.ModalSafeArea,{onInsets:A,children:[b?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:l?de:void 0,accessibilityLabel:g,accessibilityRole:"button"}),se?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{onLayout:handleContentLayout,style:[Se,f,p],children:[(0,_jsxRuntime.jsx)(_RichTooltipBody.RichTooltipBody,{title:a,content:t,action:i,onAction:he,focusRef:Q,actionRef:Z,messageStyle:h}),we]}):null]}):(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:l?de:void 0,accessibilityLabel:g,accessibilityRole:"button",children:se?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{accessibilityRole:"web"===_reactNative.Platform.OS?"tooltip":void 0,accessibilityLiveRegion:"polite",accessibilityLabel:Te,onLayout:handleContentLayout,style:[Se,f,p],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[N.tooltip,{backgroundColor:x.colors.background.inverse,borderRadius:x.radius.md,..._corners.smoothCorners,paddingHorizontal:x.spacing.md,paddingVertical:x.spacing.sm,...x.shadows.lg,shadowColor:x.shadows.lg.shadowColor}],children:"string"==typeof t?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:x.colors.text.inverse,fontSize:x.typography.fontSize.sm,lineHeight:W},h],children:t}):t}),we]}):null}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})]})};exports.Tooltip=Tooltip;const buildStyles=e=>_reactNative.StyleSheet.create({tooltip:{overflow:"hidden"}});var _default=exports.default=Tooltip;

package/lib/module/components/Tooltip/Tooltip.js

@@ -1 +1 @@
-"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{claimAnchoredSurface}from"../../utils/placement.js";import{FOCUS_DELAY_MS,focusHost}from"../Menu/focusHost.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{RichTooltipBody}from"./RichTooltipBody.js";import{resolveTooltipPosition}from"./tooltipPosition.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:o,variant:r="plain",title:s,action:n,placement:i="auto",visible:a,onVisibleChange:l,hideOnContentPress:u=!0,maxWidth:c,showArrow:m=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:h,messageStyle:g,closeLabel:b="Close tooltip",testID:y}=e,T="rich"===r,_=e.trigger??(T?"press":"longPress"),A=useTheme(),S=usePresenceMotion(),R=useSafeAreaInsets(),[w,x]=useModalInsets(),v=useMemo(()=>({...R,top:w.top,bottom:w.bottom}),[R,w]),E=useWindowDimensions(),P=useMemo(()=>buildStyles(A),[A]),j=A.components.tooltip,C=j?.gap??8,D=j?.screenPadding??8,L=j?.pressAutoHideMs??4e3,M=j?.arrowHalfWidth??4,H=j?.arrowHeight??6,I=j?.arrowCornerPadding??12,F=j?.lineHeight??18,W=c??(T?280:j?.maxWidth??240),O="press"===_&&!T,V=(j?.enableScaleAnimation??!1)&&!S.reduced,k=j?.exitDurationMs??150,N="manual"===_||"boolean"==typeof a,[U,B]=useState(!1),z=N?Boolean(a):U,[G,X]=useState(null),[Y,q]=useState({width:0,height:0}),J=useRef(null),K=useRef(null),Q=useRef(null),Z=useRef(null),$=useRef(null),ee=useRef(!1),te=useRef(!1),oe=useRef(createAnimatedValue(z||!V?1:.85)).current,re=useRef(createAnimatedValue(z?1:0)).current,se=useRef(null),ne=useRef(!1),[ie,ae]=useState(z),le=useCallback(e=>{N||B(e),l?.(e)},[N,l]),ue=useCallback(()=>{J.current&&J.current.measureInWindow((e,t,o,r)=>{X({x:e,y:t,width:o,height:r})})},[]),ce=useCallback(e=>{ue(),le(!0)},[ue,le]),me=useCallback(()=>{le(!1)},[le]),de=useRef(me);de.current=me;const fe=useCallback(()=>{if(!ee.current)return;ee.current=!1;const e=$.current;$.current=null,e?e():T&&focusHost(K.current??J.current)},[T]);useEffect(()=>{if(z)return te.current=!0,ee.current=!1,claimAnchoredSurface(()=>de.current());te.current&&(te.current=!1,ee.current=!0)},[z]),useEffect(()=>{z&&ae(!0)},[z]);const pe=useRef(ie);useEffect(()=>{pe.current&&!ie&&"ios"!==Platform.OS&&fe(),pe.current=ie},[ie,fe]);const he=useCallback(()=>{$.current=n?.onPress??null,me()},[n,me]);useEffect(()=>{if(!ne.current)return ne.current=!0,z&&(ue(),O&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},L))),()=>{se.current&&(clearTimeout(se.current),se.current=null)};let e;if(z){ue();const t=[Animated.timing(re,{toValue:1,duration:S.duration("fast"),useNativeDriver:!0})];V?t.push(Animated.spring(oe,{toValue:1,damping:A.motion.spring.snappy.damping,stiffness:A.motion.spring.snappy.stiffness,mass:A.motion.spring.snappy.mass,useNativeDriver:!0})):setNativeValue(oe,1),e=Animated.parallel(t),e.start(),O&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},L))}else{const t=[Animated.timing(re,{toValue:0,duration:S.reduced?S.duration("fast"):k,easing:Easing.bezier(...A.motion.easing.accelerate),useNativeDriver:!0})];V&&t.push(Animated.timing(oe,{toValue:.85,duration:k,easing:Easing.bezier(...A.motion.easing.accelerate),useNativeDriver:!0})),e=Animated.parallel(t),e.start(({finished:e})=>{e&&ae(!1)}),se.current&&(clearTimeout(se.current),se.current=null)}return()=>{e?.stop(),se.current&&(clearTimeout(se.current),se.current=null)}},[z]);const handleContentLayout=e=>{const{width:t,height:o}=e.nativeEvent.layout;t===Y.width&&o===Y.height||q({width:t,height:o})},ge=useMemo(()=>resolveTooltipPosition({anchor:G,size:Y,placement:i,rich:T,viewport:{width:E.width,height:E.height,insets:v},maxWidth:W,gap:C,padding:D,arrowCornerPadding:I}),[G,Y,i,T,E.width,E.height,v,W,C,D,I]),be=null!==G&&Y.width>0,ye=z&&be;useEffect(()=>{if(!T||!ye)return;const e="web"===Platform.OS?Z:Q,t=setTimeout(()=>focusHost(e.current),FOCUS_DELAY_MS);return()=>clearTimeout(t)},[T,ye]),useEffect(()=>{!T&&ye&&"ios"===Platform.OS&&"string"==typeof t&&announce(t)},[T,ye,t]);const Te=o.props,Ae=useMemo(()=>mergeRefs(Te.ref,K),[Te.ref]),Se={};"longPress"!==_||Te.contextMenu?"press"===_&&(Se.onPress=e=>{Te.onPress?.(e),ce(e)}):(Se.onLongPress=ce,Se.accessibilityHint="Long press for more info"),T&&(Se.ref=Ae);const Re=React.cloneElement(o,Se),we=d??("string"==typeof t?t:"Tooltip"),xe=useMemo(()=>{if(!m)return null;const e=T?A.colors.background.elevated:A.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:M,borderRightWidth:M,borderBottomWidth:H,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===ge.placement?{...t,bottom:-H,left:ge.arrowOffset-M,transform:[{rotate:"180deg"}]}:"bottom"===ge.placement?{...t,top:-H,left:ge.arrowOffset-M}:"left"===ge.placement?{...t,right:-H,top:ge.arrowOffset-M,transform:[{rotate:"90deg"}]}:{...t,left:-H,top:ge.arrowOffset-M,transform:[{rotate:"-90deg"}]}},[m,ge,A,T,M,H]),ve={position:"absolute",top:ge.top,left:ge.left,maxWidth:W,opacity:z&&!be?0:re,transform:[{scale:oe}]},Ee=xe?_jsx(View,{style:[xe,h],pointerEvents:"none"}):null;return _jsxs(_Fragment,{children:[_jsx(View,{ref:J,collapsable:!1,onLayout:ue,testID:y,children:Re}),_jsx(Modal,{visible:ie,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:me,onDismiss:fe,children:_jsxs(ModalSafeArea,{onInsets:x,children:[T?_jsxs(_Fragment,{children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button"}),ie?_jsxs(Animated.View,{onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(RichTooltipBody,{title:s,content:t,action:n,onAction:he,focusRef:Q,actionRef:Z,messageStyle:g}),Ee]}):null]}):_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button",children:ie?_jsxs(Animated.View,{accessibilityRole:"tooltip",accessibilityLiveRegion:"polite",accessibilityLabel:we,onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(View,{style:[P.tooltip,{backgroundColor:A.colors.background.inverse,borderRadius:A.radius.md,...smoothCorners,paddingHorizontal:A.spacing.md,paddingVertical:A.spacing.sm,...A.shadows.lg,shadowColor:A.shadows.lg.shadowColor}],children:"string"==typeof t?_jsx(Text,{style:[{color:A.colors.text.inverse,fontSize:A.typography.fontSize.sm,lineHeight:F},g],children:t}):t}),Ee]}):null}),_jsx(ToastHost,{})]})})]})},buildStyles=e=>StyleSheet.create({tooltip:{overflow:"hidden"}});export{Tooltip};export default Tooltip;
+"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{claimAnchoredSurface}from"../../utils/placement.js";import{FOCUS_DELAY_MS,focusHost}from"../Menu/focusHost.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{RichTooltipBody}from"./RichTooltipBody.js";import{resolveTooltipPosition}from"./tooltipPosition.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:o,variant:r="plain",title:s,action:n,placement:i="auto",visible:a,onVisibleChange:l,hideOnContentPress:u=!0,maxWidth:c,showArrow:m=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:h,messageStyle:g,closeLabel:b="Close tooltip",testID:y}=e,T="rich"===r,S=e.trigger??(T?"press":"longPress"),_=useTheme(),A=usePresenceMotion(),R=useSafeAreaInsets(),[w,x]=useModalInsets(),v=useMemo(()=>({...R,top:w.top,bottom:w.bottom}),[R,w]),P=useWindowDimensions(),E=useMemo(()=>buildStyles(_),[_]),j=_.components.tooltip,C=j?.gap??8,D=j?.screenPadding??8,L=j?.pressAutoHideMs??4e3,M=j?.arrowHalfWidth??4,H=j?.arrowHeight??6,I=j?.arrowCornerPadding??12,F=j?.lineHeight??18,O=c??(T?280:j?.maxWidth??240),W="press"===S&&!T,V=(j?.enableScaleAnimation??!1)&&!A.reduced,k=j?.exitDurationMs??150,N="manual"===S||"boolean"==typeof a,[U,B]=useState(!1),z=N?Boolean(a):U,[G,X]=useState(null),[Y,q]=useState({width:0,height:0}),J=useRef(null),K=useRef(null),Q=useRef(null),Z=useRef(null),$=useRef(null),ee=useRef(!1),te=useRef(!1),oe=useRef(createAnimatedValue(z||!V?1:.85)).current,re=useRef(createAnimatedValue(z?1:0)).current,se=useRef(null),ne=useRef(!1),[ie,ae]=useState(z),le=useCallback(e=>{N||B(e),l?.(e)},[N,l]),ue=useCallback(()=>{J.current&&J.current.measureInWindow((e,t,o,r)=>{X({x:e,y:t,width:o,height:r})})},[]),ce=useCallback(e=>{ue(),le(!0)},[ue,le]),me=useCallback(()=>{le(!1)},[le]),de=useRef(me);de.current=me;const fe=useCallback(()=>{if(!ee.current)return;ee.current=!1;const e=$.current;$.current=null,e?e():T&&focusHost(K.current??J.current)},[T]);useEffect(()=>{if(z)return te.current=!0,ee.current=!1,claimAnchoredSurface(()=>de.current());te.current&&(te.current=!1,ee.current=!0)},[z]),useEffect(()=>{z&&ae(!0)},[z]);const pe=useRef(ie);useEffect(()=>{pe.current&&!ie&&"ios"!==Platform.OS&&fe(),pe.current=ie},[ie,fe]);const he=useCallback(()=>{$.current=n?.onPress??null,me()},[n,me]);useEffect(()=>{if(!ne.current)return ne.current=!0,z&&(ue(),W&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},L))),()=>{se.current&&(clearTimeout(se.current),se.current=null)};let e;if(z){ue();const t=[Animated.timing(re,{toValue:1,duration:A.duration("fast"),useNativeDriver:!0})];V?t.push(Animated.spring(oe,{toValue:1,damping:_.motion.spring.snappy.damping,stiffness:_.motion.spring.snappy.stiffness,mass:_.motion.spring.snappy.mass,useNativeDriver:!0})):setNativeValue(oe,1),e=Animated.parallel(t),e.start(),W&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},L))}else{const t=[Animated.timing(re,{toValue:0,duration:A.reduced?A.duration("fast"):k,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!0})];V&&t.push(Animated.timing(oe,{toValue:.85,duration:k,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!0})),e=Animated.parallel(t),e.start(({finished:e})=>{e&&ae(!1)}),se.current&&(clearTimeout(se.current),se.current=null)}return()=>{e?.stop(),se.current&&(clearTimeout(se.current),se.current=null)}},[z]);const handleContentLayout=e=>{const{width:t,height:o}=e.nativeEvent.layout;t===Y.width&&o===Y.height||q({width:t,height:o})},ge=useMemo(()=>resolveTooltipPosition({anchor:G,size:Y,placement:i,rich:T,viewport:{width:P.width,height:P.height,insets:v},maxWidth:O,gap:C,padding:D,arrowCornerPadding:I}),[G,Y,i,T,P.width,P.height,v,O,C,D,I]),be=null!==G&&Y.width>0,ye=z&&be;useEffect(()=>{if(!T||!ye)return;const e="web"===Platform.OS?Z:Q,t=setTimeout(()=>focusHost(e.current),FOCUS_DELAY_MS);return()=>clearTimeout(t)},[T,ye]),useEffect(()=>{!T&&ye&&"ios"===Platform.OS&&"string"==typeof t&&announce(t)},[T,ye,t]);const Te=o.props,Se=useMemo(()=>mergeRefs(Te.ref,K),[Te.ref]),Ae={};"longPress"!==S||Te.contextMenu?"press"===S&&(Ae.onPress=e=>{Te.onPress?.(e),ce(e)}):(Ae.onLongPress=ce,Ae.accessibilityHint="Long press for more info"),T&&(Ae.ref=Se);const Re=React.cloneElement(o,Ae),we=d??("string"==typeof t?t:"Tooltip"),xe=useMemo(()=>{if(!m)return null;const e=T?_.colors.background.elevated:_.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:M,borderRightWidth:M,borderBottomWidth:H,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===ge.placement?{...t,bottom:-H,left:ge.arrowOffset-M,transform:[{rotate:"180deg"}]}:"bottom"===ge.placement?{...t,top:-H,left:ge.arrowOffset-M}:"left"===ge.placement?{...t,right:-H,top:ge.arrowOffset-M,transform:[{rotate:"90deg"}]}:{...t,left:-H,top:ge.arrowOffset-M,transform:[{rotate:"-90deg"}]}},[m,ge,_,T,M,H]),ve={position:"absolute",top:ge.top,left:ge.left,maxWidth:O,opacity:z&&!be?0:re,transform:[{scale:oe}]},Pe=xe?_jsx(View,{style:[xe,h],pointerEvents:"none"}):null;return _jsxs(_Fragment,{children:[_jsx(View,{ref:J,collapsable:!1,onLayout:ue,testID:y,children:Re}),_jsx(Modal,{visible:ie,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:me,onDismiss:fe,children:_jsxs(ModalSafeArea,{onInsets:x,children:[T?_jsxs(_Fragment,{children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button"}),ie?_jsxs(Animated.View,{onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(RichTooltipBody,{title:s,content:t,action:n,onAction:he,focusRef:Q,actionRef:Z,messageStyle:g}),Pe]}):null]}):_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button",children:ie?_jsxs(Animated.View,{accessibilityRole:"web"===Platform.OS?"tooltip":void 0,accessibilityLiveRegion:"polite",accessibilityLabel:we,onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(View,{style:[E.tooltip,{backgroundColor:_.colors.background.inverse,borderRadius:_.radius.md,...smoothCorners,paddingHorizontal:_.spacing.md,paddingVertical:_.spacing.sm,..._.shadows.lg,shadowColor:_.shadows.lg.shadowColor}],children:"string"==typeof t?_jsx(Text,{style:[{color:_.colors.text.inverse,fontSize:_.typography.fontSize.sm,lineHeight:F},g],children:t}):t}),Pe]}):null}),_jsx(ToastHost,{})]})})]})},buildStyles=e=>StyleSheet.create({tooltip:{overflow:"hidden"}});export{Tooltip};export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -107,7 +107,7 @@
     ]
   },
   "devDependencies": {
-    "@webority/mobile-core": "0.16.0"
+    "@webority/mobile-core": "0.16.1"
   },
   "scripts": {
     "build": "bob build && node ../../scripts/minify-lib.mjs",