@radix-ui/react-tooltip
Advanced tools
Comparing version 0.1.2-rc.7 to 0.1.2-rc.8
@@ -6,9 +6,6 @@ import * as React from "react"; | ||
export const createTooltipScope: import("@radix-ui/react-context").CreateScope; | ||
export interface TooltipProps { | ||
open?: boolean; | ||
defaultOpen?: boolean; | ||
onOpenChange?: (open: boolean) => void; | ||
interface TooltipProviderProps { | ||
/** | ||
* The duration from when the mouse enters the trigger until the tooltip gets opened. | ||
* (default: 700) | ||
* @defaultValue 700 | ||
*/ | ||
@@ -18,5 +15,18 @@ delayDuration?: number; | ||
* How much time a user has to enter another trigger without incurring a delay again. | ||
* (default: 300) | ||
* @defaultValue 300 | ||
*/ | ||
skipDelayDuration?: number; | ||
children: React.ReactNode; | ||
} | ||
export const TooltipProvider: React.FC<TooltipProviderProps>; | ||
export interface TooltipProps { | ||
open?: boolean; | ||
defaultOpen?: boolean; | ||
onOpenChange?: (open: boolean) => void; | ||
/** | ||
* The duration from when the mouse enters the trigger until the tooltip gets opened. This will | ||
* override the prop with the same name passed to Provider. | ||
* @defaultValue 700 | ||
*/ | ||
delayDuration?: number; | ||
children?: React.ReactNode; | ||
@@ -53,2 +63,3 @@ } | ||
export const TooltipArrow: React.ForwardRefExoticComponent<TooltipArrowProps & React.RefAttributes<SVGSVGElement>>; | ||
export const Provider: React.FC<TooltipProviderProps>; | ||
export const Root: React.FC<TooltipProps>; | ||
@@ -55,0 +66,0 @@ export const Trigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>; |
@@ -1,2 +0,2 @@ | ||
var e,t=require("@radix-ui/react-id").useId,o=require("@radix-ui/react-use-callback-ref").useCallbackRef,n=v({},require("@radix-ui/react-visually-hidden")),r=require("@radix-ui/react-slot").Slottable,i=require("@radix-ui/react-portal").Portal,a=require("@radix-ui/react-popper"),s=v({},a),c=a.createPopperScope,l=require("@radix-ui/react-primitive").Primitive,u=require("@radix-ui/react-presence").Presence,d=require("@radix-ui/react-use-rect").useRect,p=require("@radix-ui/react-use-previous").usePrevious,f=require("@radix-ui/react-use-layout-effect").useLayoutEffect,g=require("@radix-ui/react-use-escape-keydown").useEscapeKeydown,E=require("@radix-ui/react-use-controllable-state").useControllableState,x=require("@radix-ui/react-context").createContextScope,y=require("@radix-ui/react-compose-refs").useComposedRefs,C=require("@radix-ui/primitive").composeEventHandlers,T=v({},require("react")),m=(e=require("@babel/runtime/helpers/extends"))&&e.__esModule?e.default:e;function v(e,t){return Object.keys(t).forEach((function(o){"default"!==o&&"__esModule"!==o&&Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[o]}})})),e}function _(e){return{type:"machine.actions.assign",assign:e}}let b,D;const h=_(((e,t)=>{var o;return{...e,id:null!==(o=t.id)&&void 0!==o?o:e.id}})),q=function(e,{debug:t=!1,warnOnUnknownTransitions:o=!1}={}){let n=e.initial,r=e.context;const i=[],a=s=>{var c,l;const u=e.states[n],d=s.type,p=null===(c=e.on)||void 0===c?void 0:c[d],f=null===(l=u.on)||void 0===l?void 0:l[d],g=null!=p?p:f;if(void 0===g)o&&console.warn(`From state: "${n}", event "${d}" has no transition to any state`);else{const{target:o,actions:c=[],cond:l=(()=>!0)}=g,d=o?e.states[o]:{};if(l(r,s)){const e=(u.exit||[]).concat(c,d.entry||[]);r=function(e,t,o){let n=o;return null==e||e.forEach((e=>{"function"==typeof e?e(n,t,a):"machine.actions.assign"===e.type&&(n=e.assign(n,t))})),n}(e,s,r),o&&(n=o,t&&(console.group("event:",s),console.log("state:",n),console.log("context:",r),console.groupEnd()),i.forEach((e=>e({state:n,context:r}))))}}};return{subscribe:function(e){return i.push(e),()=>{i.splice(i.indexOf(e),1)}},send:a,getContext:function(){return r}}}({initial:"closed",context:{id:null,delayed:!1},on:{FOCUS:{target:"open"}},states:{closed:{entry:[_((e=>({...e,id:null})))],on:{OPEN:{target:"opening"}}},opening:{entry:[(e,t,o)=>{const n=t.delayDuration,r=()=>o({type:"DELAY_TIMER_END"});void 0===n?r():b=window.setTimeout(r,n)},h,_((e=>({...e,delayed:!0})))],exit:[()=>clearTimeout(b)],on:{DELAY_TIMER_END:{target:"open"},CLOSE:{target:"closed"}}},open:{entry:[h],exit:[_((e=>({...e,delayed:!1})))],on:{OPEN:{target:"open"},CLOSE:{target:"closing",cond:(e,t)=>e.id===t.id}}},closing:{entry:[(e,t,o)=>{var n;const r=null!==(n=t.skipDelayDuration)&&void 0!==n?n:300;D=window.setTimeout((()=>o({type:"SKIP_DELAY_TIMER_END"})),r)}],exit:[()=>clearTimeout(D)],on:{OPEN:{target:"open"},SKIP_DELAY_TIMER_END:{target:"closed"}}}}}),[w,O]=x("Tooltip",[c]);exports.createTooltipScope=O;const M=c(),[P,R]=w("Tooltip"),S=e=>{const{__scopeTooltip:n,children:r,open:i,defaultOpen:a=!1,onOpenChange:c,delayDuration:l=700,skipDelayDuration:u=300}=e,d=M(n),[p,g]=T.useState(null),x=t(),[y=!1,C]=E({prop:i,defaultProp:a,onChange:c}),[m,v]=T.useState(i?"instant-open":"closed");T.useEffect((()=>q.subscribe((({state:e,context:t})=>{"open"===e&&t.id===x?C(!0):C(!1)}))),[x,C]),T.useEffect((()=>q.subscribe((({state:e,context:t})=>{t.id===x?v("open"===e?t.delayed?"delayed-open":"instant-open":"closed"):v("closed")}))),[x]);const _=T.useCallback((()=>q.send({type:"FOCUS",id:x})),[x]),b=T.useCallback((()=>q.send({type:"OPEN",id:x,delayDuration:l})),[x,l]),D=o((()=>{q.send({type:"CLOSE",id:x,skipDelayDuration:u})}));return T.useEffect((()=>()=>D()),[D]),f((()=>{!0===i&&q.send({type:"OPEN",id:x})}),[x,i]),/*#__PURE__*/T.createElement(s.Root,d,/*#__PURE__*/T.createElement(P,{scope:n,contentId:x,open:y,stateAttribute:m,trigger:p,onTriggerChange:g,onFocus:_,onOpen:b,onClose:D},r))};exports.Tooltip=S;const k=/*#__PURE__*/T.forwardRef(((e,t)=>{const{__scopeTooltip:o,...n}=e,r=R("TooltipTrigger",o),i=M(o),a=y(t,r.onTriggerChange);/*#__PURE__*/return T.createElement(s.Anchor,m({asChild:!0},i),/*#__PURE__*/T.createElement(l.button,m({"aria-describedby":r.open?r.contentId:void 0,"data-state":r.stateAttribute},n,{ref:a,onMouseEnter:C(e.onMouseEnter,r.onOpen),onMouseLeave:C(e.onMouseLeave,r.onClose),onMouseDown:C(e.onMouseDown,r.onClose),onFocus:C(e.onFocus,r.onFocus),onBlur:C(e.onBlur,r.onClose),onClick:C(e.onClick,r.onClose)})))}));exports.TooltipTrigger=k;const A=/*#__PURE__*/T.forwardRef(((e,t)=>{const{forceMount:o,...n}=e,r=R("TooltipContent",e.__scopeTooltip);/*#__PURE__*/return T.createElement(u,{present:o||r.open},/*#__PURE__*/T.createElement(I,m({ref:t},n)))}));exports.TooltipContent=A;const I=/*#__PURE__*/T.forwardRef(((e,t)=>{const{__scopeTooltip:o,children:a,"aria-label":c,portalled:l=!0,...u}=e,d=R("TooltipContent",o),p=M(o),f=l?i:T.Fragment;return g((()=>d.onClose())),/*#__PURE__*/T.createElement(f,null,/*#__PURE__*/T.createElement(N,{__scopeTooltip:o}),/*#__PURE__*/T.createElement(s.Content,m({"data-state":d.stateAttribute},p,u,{ref:t,style:{...u.style,"--radix-tooltip-content-transform-origin":"var(--radix-popper-transform-origin)"}}),/*#__PURE__*/T.createElement(r,null,a),/*#__PURE__*/T.createElement(n.Root,{id:d.contentId,role:"tooltip"},c||a)))})),L=/*#__PURE__*/T.forwardRef(((e,t)=>{const{__scopeTooltip:o,...n}=e,r=M(o);/*#__PURE__*/return T.createElement(s.Arrow,m({},r,n,{ref:t}))}));/*#__PURE__*/function N(e){const{__scopeTooltip:t}=e,o=R("CheckTriggerMoved",t),n=d(o.trigger),r=null==n?void 0:n.left,i=p(r),a=null==n?void 0:n.top,s=p(a),c=o.onClose;return T.useEffect((()=>{(void 0!==i&&i!==r||void 0!==s&&s!==a)&&c()}),[c,i,s,r,a]),null}exports.TooltipArrow=L;const F=S;exports.Root=F;const Y=k;exports.Trigger=Y;const K=A;exports.Content=K;const U=L;exports.Arrow=U; | ||
var e,o=require("@radix-ui/react-id").useId,t=E({},require("@radix-ui/react-visually-hidden")),r=require("@radix-ui/react-slot").Slottable,n=require("@radix-ui/react-portal").Portal,i=require("@radix-ui/react-popper"),l=E({},i),u=i.createPopperScope,a=require("@radix-ui/react-primitive").Primitive,s=require("@radix-ui/react-presence").Presence,c=require("@radix-ui/react-use-rect").useRect,p=require("@radix-ui/react-use-previous").usePrevious,d=require("@radix-ui/react-use-escape-keydown").useEscapeKeydown,T=require("@radix-ui/react-use-controllable-state").useControllableState,f=require("@radix-ui/react-context").createContextScope,m=require("@radix-ui/react-compose-refs").useComposedRefs,C=require("@radix-ui/primitive").composeEventHandlers,x=E({},require("react")),w=(e=require("@babel/runtime/helpers/extends"))&&e.__esModule?e.default:e;function E(e,o){return Object.keys(o).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return o[t]}})})),e}const[v,g]=f("Tooltip",[u]);exports.createTooltipScope=g;const b=u(),_=700,[y,q]=v("TooltipProvider",{isOpenDelayed:!0,delayDuration:_,onTooltipOpen:()=>{},onTooltipClose:()=>{}}),h=e=>{const{__scopeTooltip:o,delayDuration:t=_,skipDelayDuration:r=300,children:n}=e,[i,l]=x.useState(!0),u=x.useRef(0);return x.useEffect((()=>{const e=u.current;return()=>window.clearTimeout(e)}),[]),/*#__PURE__*/x.createElement(y,{scope:o,isOpenDelayed:i,delayDuration:t,onTooltipOpen:x.useCallback((()=>{window.clearTimeout(u.current),l(!1)}),[]),onTooltipClose:x.useCallback((()=>{window.clearTimeout(u.current),u.current=window.setTimeout((()=>l(!0)),r)}),[r])},n)};exports.TooltipProvider=h;const[D,O]=v("Tooltip"),R=e=>{const{__scopeTooltip:t,children:r,open:n,defaultOpen:i=!1,onOpenChange:u,delayDuration:a}=e,s=q("Tooltip",t),c=b(t),[d,f]=x.useState(null),m=o(),C=x.useRef(0),w=x.useRef(!1),E=null!=a?a:s.delayDuration,v=!w.current&&s.isOpenDelayed?E:0,g=p(Boolean(v)),{onTooltipOpen:_,onTooltipClose:y}=s,[h=!1,O]=T({prop:n,defaultProp:i,onChange:e=>{e?(document.dispatchEvent(new CustomEvent("tooltip.open")),_()):(w.current=!1,y()),null==u||u(e)}}),R=x.useMemo((()=>h?g?"delayed-open":"instant-open":"closed"),[g,h]);return x.useEffect((()=>()=>window.clearTimeout(C.current)),[]),/*#__PURE__*/x.createElement(l.Root,c,/*#__PURE__*/x.createElement(D,{scope:t,contentId:m,open:h,stateAttribute:R,trigger:d,onTriggerChange:f,onFocus:x.useCallback((()=>{w.current=!0,O(!0)}),[O]),onOpen:x.useCallback((()=>{window.clearTimeout(C.current),C.current=window.setTimeout((()=>O(!0)),v)}),[v,O]),onClose:x.useCallback((()=>{window.clearTimeout(C.current),O(!1)}),[O])},r))};exports.Tooltip=R;const k=/*#__PURE__*/x.forwardRef(((e,o)=>{const{__scopeTooltip:t,...r}=e,n=O("TooltipTrigger",t),i=b(t),u=m(o,n.onTriggerChange);/*#__PURE__*/return x.createElement(l.Anchor,w({asChild:!0},i),/*#__PURE__*/x.createElement(a.button,w({"aria-describedby":n.open?n.contentId:void 0,"data-state":n.stateAttribute},r,{ref:u,onMouseEnter:C(e.onMouseEnter,n.onOpen),onMouseLeave:C(e.onMouseLeave,n.onClose),onMouseDown:C(e.onMouseDown,n.onClose),onFocus:C(e.onFocus,n.onFocus),onBlur:C(e.onBlur,n.onClose),onClick:C(e.onClick,n.onClose)})))}));exports.TooltipTrigger=k;const M=/*#__PURE__*/x.forwardRef(((e,o)=>{const{forceMount:t,...r}=e,n=O("TooltipContent",e.__scopeTooltip);/*#__PURE__*/return x.createElement(s,{present:t||n.open},/*#__PURE__*/x.createElement(P,w({ref:o},r)))}));exports.TooltipContent=M;const P=/*#__PURE__*/x.forwardRef(((e,o)=>{const{__scopeTooltip:i,children:u,"aria-label":a,portalled:s=!0,...c}=e,p=O("TooltipContent",i),T=b(i),f=s?n:x.Fragment,{onClose:m}=p;return d((()=>m())),x.useEffect((()=>(document.addEventListener("tooltip.open",m),()=>document.removeEventListener("tooltip.open",m))),[m]),/*#__PURE__*/x.createElement(f,null,/*#__PURE__*/x.createElement(S,{__scopeTooltip:i}),/*#__PURE__*/x.createElement(l.Content,w({"data-state":p.stateAttribute},T,c,{ref:o,style:{...c.style,"--radix-tooltip-content-transform-origin":"var(--radix-popper-transform-origin)"}}),/*#__PURE__*/x.createElement(r,null,u),/*#__PURE__*/x.createElement(t.Root,{id:p.contentId,role:"tooltip"},a||u)))})),A=/*#__PURE__*/x.forwardRef(((e,o)=>{const{__scopeTooltip:t,...r}=e,n=b(t);/*#__PURE__*/return x.createElement(l.Arrow,w({},n,r,{ref:o}))}));/*#__PURE__*/function S(e){const{__scopeTooltip:o}=e,t=O("CheckTriggerMoved",o),r=c(t.trigger),n=null==r?void 0:r.left,i=p(n),l=null==r?void 0:r.top,u=p(l),a=t.onClose;return x.useEffect((()=>{(void 0!==i&&i!==n||void 0!==u&&u!==l)&&a()}),[a,i,u,n,l]),null}exports.TooltipArrow=A;const F=h;exports.Provider=F;const I=R;exports.Root=I;const L=k;exports.Trigger=L;const B=M;exports.Content=B;const j=A;exports.Arrow=j; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
import{useId as e}from"@radix-ui/react-id";import{useCallbackRef as t}from"@radix-ui/react-use-callback-ref";import*as o from"@radix-ui/react-visually-hidden";import{Slottable as n}from"@radix-ui/react-slot";import{Portal as r}from"@radix-ui/react-portal";import*as i from"@radix-ui/react-popper";import{createPopperScope as a}from"@radix-ui/react-popper";import{Primitive as s}from"@radix-ui/react-primitive";import{Presence as l}from"@radix-ui/react-presence";import{useRect as c}from"@radix-ui/react-use-rect";import{usePrevious as p}from"@radix-ui/react-use-previous";import{useLayoutEffect as u}from"@radix-ui/react-use-layout-effect";import{useEscapeKeydown as d}from"@radix-ui/react-use-escape-keydown";import{useControllableState as m}from"@radix-ui/react-use-controllable-state";import{createContextScope as f}from"@radix-ui/react-context";import{useComposedRefs as g}from"@radix-ui/react-compose-refs";import{composeEventHandlers as x}from"@radix-ui/primitive";import*as E from"react";import T from"@babel/runtime/helpers/esm/extends";function y(e){return{type:"machine.actions.assign",assign:e}}let C,v;const _=y(((e,t)=>{var o;return{...e,id:null!==(o=t.id)&&void 0!==o?o:e.id}})),b=function(e,{debug:t=!1,warnOnUnknownTransitions:o=!1}={}){let n=e.initial,r=e.context;const i=[],a=s=>{var l,c;const p=e.states[n],u=s.type,d=null===(l=e.on)||void 0===l?void 0:l[u],m=null===(c=p.on)||void 0===c?void 0:c[u],f=null!=d?d:m;if(void 0===f)o&&console.warn(`From state: "${n}", event "${u}" has no transition to any state`);else{const{target:o,actions:l=[],cond:c=(()=>!0)}=f,u=o?e.states[o]:{};if(c(r,s)){const e=(p.exit||[]).concat(l,u.entry||[]);r=function(e,t,o){let n=o;return null==e||e.forEach((e=>{"function"==typeof e?e(n,t,a):"machine.actions.assign"===e.type&&(n=e.assign(n,t))})),n}(e,s,r),o&&(n=o,t&&(console.group("event:",s),console.log("state:",n),console.log("context:",r),console.groupEnd()),i.forEach((e=>e({state:n,context:r}))))}}};return{subscribe:function(e){return i.push(e),()=>{i.splice(i.indexOf(e),1)}},send:a,getContext:function(){return r}}}({initial:"closed",context:{id:null,delayed:!1},on:{FOCUS:{target:"open"}},states:{closed:{entry:[y((e=>({...e,id:null})))],on:{OPEN:{target:"opening"}}},opening:{entry:[(e,t,o)=>{const n=t.delayDuration,r=()=>o({type:"DELAY_TIMER_END"});void 0===n?r():C=window.setTimeout(r,n)},_,y((e=>({...e,delayed:!0})))],exit:[()=>clearTimeout(C)],on:{DELAY_TIMER_END:{target:"open"},CLOSE:{target:"closed"}}},open:{entry:[_],exit:[y((e=>({...e,delayed:!1})))],on:{OPEN:{target:"open"},CLOSE:{target:"closing",cond:(e,t)=>e.id===t.id}}},closing:{entry:[(e,t,o)=>{var n;const r=null!==(n=t.skipDelayDuration)&&void 0!==n?n:300;v=window.setTimeout((()=>o({type:"SKIP_DELAY_TIMER_END"})),r)}],exit:[()=>clearTimeout(v)],on:{OPEN:{target:"open"},SKIP_DELAY_TIMER_END:{target:"closed"}}}}}),[D,w]=f("Tooltip",[a]);export{w as createTooltipScope};const h=a(),[O,A]=D("Tooltip");export const Tooltip=o=>{const{__scopeTooltip:n,children:r,open:a,defaultOpen:s=!1,onOpenChange:l,delayDuration:c=700,skipDelayDuration:p=300}=o,d=h(n),[f,g]=E.useState(null),x=e(),[T=!1,y]=m({prop:a,defaultProp:s,onChange:l}),[C,v]=E.useState(a?"instant-open":"closed");E.useEffect((()=>b.subscribe((({state:e,context:t})=>{"open"===e&&t.id===x?y(!0):y(!1)}))),[x,y]),E.useEffect((()=>b.subscribe((({state:e,context:t})=>{t.id===x?v("open"===e?t.delayed?"delayed-open":"instant-open":"closed"):v("closed")}))),[x]);const _=E.useCallback((()=>b.send({type:"FOCUS",id:x})),[x]),D=E.useCallback((()=>b.send({type:"OPEN",id:x,delayDuration:c})),[x,c]),w=t((()=>{b.send({type:"CLOSE",id:x,skipDelayDuration:p})}));return E.useEffect((()=>()=>w()),[w]),u((()=>{!0===a&&b.send({type:"OPEN",id:x})}),[x,a]),/*#__PURE__*/E.createElement(i.Root,d,/*#__PURE__*/E.createElement(O,{scope:n,contentId:x,open:T,stateAttribute:C,trigger:f,onTriggerChange:g,onFocus:_,onOpen:D,onClose:w},r))};/*#__PURE__*/export const TooltipTrigger=/*#__PURE__*/E.forwardRef(((e,t)=>{const{__scopeTooltip:o,...n}=e,r=A("TooltipTrigger",o),a=h(o),l=g(t,r.onTriggerChange);/*#__PURE__*/return E.createElement(i.Anchor,T({asChild:!0},a),/*#__PURE__*/E.createElement(s.button,T({"aria-describedby":r.open?r.contentId:void 0,"data-state":r.stateAttribute},n,{ref:l,onMouseEnter:x(e.onMouseEnter,r.onOpen),onMouseLeave:x(e.onMouseLeave,r.onClose),onMouseDown:x(e.onMouseDown,r.onClose),onFocus:x(e.onFocus,r.onFocus),onBlur:x(e.onBlur,r.onClose),onClick:x(e.onClick,r.onClose)})))}));/*#__PURE__*/export const TooltipContent=/*#__PURE__*/E.forwardRef(((e,t)=>{const{forceMount:o,...n}=e,r=A("TooltipContent",e.__scopeTooltip);/*#__PURE__*/return E.createElement(l,{present:o||r.open},/*#__PURE__*/E.createElement(M,T({ref:t},n)))}));const M=/*#__PURE__*/E.forwardRef(((e,t)=>{const{__scopeTooltip:a,children:s,"aria-label":l,portalled:c=!0,...p}=e,u=A("TooltipContent",a),m=h(a),f=c?r:E.Fragment;return d((()=>u.onClose())),/*#__PURE__*/E.createElement(f,null,/*#__PURE__*/E.createElement(k,{__scopeTooltip:a}),/*#__PURE__*/E.createElement(i.Content,T({"data-state":u.stateAttribute},m,p,{ref:t,style:{...p.style,"--radix-tooltip-content-transform-origin":"var(--radix-popper-transform-origin)"}}),/*#__PURE__*/E.createElement(n,null,s),/*#__PURE__*/E.createElement(o.Root,{id:u.contentId,role:"tooltip"},l||s)))}));/*#__PURE__*/export const TooltipArrow=/*#__PURE__*/E.forwardRef(((e,t)=>{const{__scopeTooltip:o,...n}=e,r=h(o);/*#__PURE__*/return E.createElement(i.Arrow,T({},r,n,{ref:t}))}));/*#__PURE__*/function k(e){const{__scopeTooltip:t}=e,o=A("CheckTriggerMoved",t),n=c(o.trigger),r=null==n?void 0:n.left,i=p(r),a=null==n?void 0:n.top,s=p(a),l=o.onClose;return E.useEffect((()=>{(void 0!==i&&i!==r||void 0!==s&&s!==a)&&l()}),[l,i,s,r,a]),null}export const Root=Tooltip;export const Trigger=TooltipTrigger;export const Content=TooltipContent;export const Arrow=TooltipArrow; | ||
import{useId as e}from"@radix-ui/react-id";import*as o from"@radix-ui/react-visually-hidden";import{Slottable as t}from"@radix-ui/react-slot";import{Portal as r}from"@radix-ui/react-portal";import*as n from"@radix-ui/react-popper";import{createPopperScope as i}from"@radix-ui/react-popper";import{Primitive as l}from"@radix-ui/react-primitive";import{Presence as a}from"@radix-ui/react-presence";import{useRect as p}from"@radix-ui/react-use-rect";import{usePrevious as c}from"@radix-ui/react-use-previous";import{useEscapeKeydown as s}from"@radix-ui/react-use-escape-keydown";import{useControllableState as u}from"@radix-ui/react-use-controllable-state";import{createContextScope as d}from"@radix-ui/react-context";import{useComposedRefs as m}from"@radix-ui/react-compose-refs";import{composeEventHandlers as f}from"@radix-ui/primitive";import*as T from"react";import x from"@babel/runtime/helpers/esm/extends";const[C,w]=d("Tooltip",[i]);export{w as createTooltipScope};const g=i(),E=700,[v,_]=C("TooltipProvider",{isOpenDelayed:!0,delayDuration:E,onTooltipOpen:()=>{},onTooltipClose:()=>{}});export const TooltipProvider=e=>{const{__scopeTooltip:o,delayDuration:t=E,skipDelayDuration:r=300,children:n}=e,[i,l]=T.useState(!0),a=T.useRef(0);return T.useEffect((()=>{const e=a.current;return()=>window.clearTimeout(e)}),[]),/*#__PURE__*/T.createElement(v,{scope:o,isOpenDelayed:i,delayDuration:t,onTooltipOpen:T.useCallback((()=>{window.clearTimeout(a.current),l(!1)}),[]),onTooltipClose:T.useCallback((()=>{window.clearTimeout(a.current),a.current=window.setTimeout((()=>l(!0)),r)}),[r])},n)};/*#__PURE__*/const[b,y]=C("Tooltip");export const Tooltip=o=>{const{__scopeTooltip:t,children:r,open:i,defaultOpen:l=!1,onOpenChange:a,delayDuration:p}=o,s=_("Tooltip",t),d=g(t),[m,f]=T.useState(null),x=e(),C=T.useRef(0),w=T.useRef(!1),E=null!=p?p:s.delayDuration,v=!w.current&&s.isOpenDelayed?E:0,y=c(Boolean(v)),{onTooltipOpen:h,onTooltipClose:D}=s,[k=!1,O]=u({prop:i,defaultProp:l,onChange:e=>{e?(document.dispatchEvent(new CustomEvent("tooltip.open")),h()):(w.current=!1,D()),null==a||a(e)}}),R=T.useMemo((()=>k?y?"delayed-open":"instant-open":"closed"),[y,k]);return T.useEffect((()=>()=>window.clearTimeout(C.current)),[]),/*#__PURE__*/T.createElement(n.Root,d,/*#__PURE__*/T.createElement(b,{scope:t,contentId:x,open:k,stateAttribute:R,trigger:m,onTriggerChange:f,onFocus:T.useCallback((()=>{w.current=!0,O(!0)}),[O]),onOpen:T.useCallback((()=>{window.clearTimeout(C.current),C.current=window.setTimeout((()=>O(!0)),v)}),[v,O]),onClose:T.useCallback((()=>{window.clearTimeout(C.current),O(!1)}),[O])},r))};/*#__PURE__*/export const TooltipTrigger=/*#__PURE__*/T.forwardRef(((e,o)=>{const{__scopeTooltip:t,...r}=e,i=y("TooltipTrigger",t),a=g(t),p=m(o,i.onTriggerChange);/*#__PURE__*/return T.createElement(n.Anchor,x({asChild:!0},a),/*#__PURE__*/T.createElement(l.button,x({"aria-describedby":i.open?i.contentId:void 0,"data-state":i.stateAttribute},r,{ref:p,onMouseEnter:f(e.onMouseEnter,i.onOpen),onMouseLeave:f(e.onMouseLeave,i.onClose),onMouseDown:f(e.onMouseDown,i.onClose),onFocus:f(e.onFocus,i.onFocus),onBlur:f(e.onBlur,i.onClose),onClick:f(e.onClick,i.onClose)})))}));/*#__PURE__*/export const TooltipContent=/*#__PURE__*/T.forwardRef(((e,o)=>{const{forceMount:t,...r}=e,n=y("TooltipContent",e.__scopeTooltip);/*#__PURE__*/return T.createElement(a,{present:t||n.open},/*#__PURE__*/T.createElement(h,x({ref:o},r)))}));const h=/*#__PURE__*/T.forwardRef(((e,i)=>{const{__scopeTooltip:l,children:a,"aria-label":p,portalled:c=!0,...u}=e,d=y("TooltipContent",l),m=g(l),f=c?r:T.Fragment,{onClose:C}=d;return s((()=>C())),T.useEffect((()=>(document.addEventListener("tooltip.open",C),()=>document.removeEventListener("tooltip.open",C))),[C]),/*#__PURE__*/T.createElement(f,null,/*#__PURE__*/T.createElement(D,{__scopeTooltip:l}),/*#__PURE__*/T.createElement(n.Content,x({"data-state":d.stateAttribute},m,u,{ref:i,style:{...u.style,"--radix-tooltip-content-transform-origin":"var(--radix-popper-transform-origin)"}}),/*#__PURE__*/T.createElement(t,null,a),/*#__PURE__*/T.createElement(o.Root,{id:d.contentId,role:"tooltip"},p||a)))}));/*#__PURE__*/export const TooltipArrow=/*#__PURE__*/T.forwardRef(((e,o)=>{const{__scopeTooltip:t,...r}=e,i=g(t);/*#__PURE__*/return T.createElement(n.Arrow,x({},i,r,{ref:o}))}));/*#__PURE__*/function D(e){const{__scopeTooltip:o}=e,t=y("CheckTriggerMoved",o),r=p(t.trigger),n=null==r?void 0:r.left,i=c(n),l=null==r?void 0:r.top,a=c(l),s=t.onClose;return T.useEffect((()=>{(void 0!==i&&i!==n||void 0!==a&&a!==l)&&s()}),[s,i,a,n,l]),null}export const Provider=TooltipProvider;export const Root=Tooltip;export const Trigger=TooltipTrigger;export const Content=TooltipContent;export const Arrow=TooltipArrow; | ||
//# sourceMappingURL=index.module.js.map |
{ | ||
"name": "@radix-ui/react-tooltip", | ||
"version": "0.1.2-rc.7", | ||
"version": "0.1.2-rc.8", | ||
"license": "MIT", | ||
@@ -23,15 +23,13 @@ "source": "src/index.ts", | ||
"@radix-ui/react-context": "0.1.1", | ||
"@radix-ui/react-id": "0.1.2-rc.4", | ||
"@radix-ui/react-popper": "0.1.2-rc.3", | ||
"@radix-ui/react-portal": "0.1.2-rc.16", | ||
"@radix-ui/react-id": "0.1.2-rc.5", | ||
"@radix-ui/react-popper": "0.1.2-rc.4", | ||
"@radix-ui/react-portal": "0.1.2-rc.17", | ||
"@radix-ui/react-presence": "0.1.1", | ||
"@radix-ui/react-primitive": "0.1.2-rc.3", | ||
"@radix-ui/react-slot": "0.1.2-rc.3", | ||
"@radix-ui/react-use-callback-ref": "0.1.0", | ||
"@radix-ui/react-primitive": "0.1.2-rc.4", | ||
"@radix-ui/react-slot": "0.1.2-rc.4", | ||
"@radix-ui/react-use-controllable-state": "0.1.0", | ||
"@radix-ui/react-use-escape-keydown": "0.1.0", | ||
"@radix-ui/react-use-layout-effect": "0.1.0", | ||
"@radix-ui/react-use-previous": "0.1.0", | ||
"@radix-ui/react-use-rect": "0.1.1", | ||
"@radix-ui/react-visually-hidden": "0.1.2-rc.3" | ||
"@radix-ui/react-visually-hidden": "0.1.2-rc.4" | ||
}, | ||
@@ -38,0 +36,0 @@ "peerDependencies": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
17
106
58764
+ Added@radix-ui/react-arrow@0.1.2-rc.4(transitive)
+ Added@radix-ui/react-id@0.1.2-rc.5(transitive)
+ Added@radix-ui/react-popper@0.1.2-rc.4(transitive)
+ Added@radix-ui/react-portal@0.1.2-rc.17(transitive)
+ Added@radix-ui/react-primitive@0.1.2-rc.4(transitive)
+ Added@radix-ui/react-slot@0.1.2-rc.4(transitive)
+ Added@radix-ui/react-visually-hidden@0.1.2-rc.4(transitive)
- Removed@radix-ui/react-arrow@0.1.2-rc.3(transitive)
- Removed@radix-ui/react-id@0.1.2-rc.4(transitive)
- Removed@radix-ui/react-popper@0.1.2-rc.3(transitive)
- Removed@radix-ui/react-portal@0.1.2-rc.16(transitive)
- Removed@radix-ui/react-primitive@0.1.2-rc.3(transitive)
- Removed@radix-ui/react-slot@0.1.2-rc.3(transitive)
- Removed@radix-ui/react-visually-hidden@0.1.2-rc.3(transitive)