@storybook/components 7.0.0-alpha.7 → 7.0.0-alpha.8

package/dist/WithTooltip-3ZGNZXVO.mjs

@@ -0,0 +1,9 @@
+import{a as C,b as ge,d as me}from"./chunk-IONIU25V.mjs";import{a as $e}from"./chunk-7IK3EOFL.mjs";import{c as s,d as W,e as de,f as Z,h as d}from"./chunk-PJYBQ6PQ.mjs";var ve=de((gt,he)=>{d();var Fe=typeof Element<"u",Ye=typeof Map=="function",Ve=typeof Set=="function",Xe=typeof ArrayBuffer=="function"&&!!ArrayBuffer.isView;function z(t,r){if(t===r)return!0;if(t&&r&&typeof t=="object"&&typeof r=="object"){if(t.constructor!==r.constructor)return!1;var o,e,n;if(Array.isArray(t)){if(o=t.length,o!=r.length)return!1;for(e=o;e--!==0;)if(!z(t[e],r[e]))return!1;return!0}var a;if(Ye&&t instanceof Map&&r instanceof Map){if(t.size!==r.size)return!1;for(a=t.entries();!(e=a.next()).done;)if(!r.has(e.value[0]))return!1;for(a=t.entries();!(e=a.next()).done;)if(!z(e.value[1],r.get(e.value[0])))return!1;return!0}if(Ve&&t instanceof Set&&r instanceof Set){if(t.size!==r.size)return!1;for(a=t.entries();!(e=a.next()).done;)if(!r.has(e.value[0]))return!1;return!0}if(Xe&&ArrayBuffer.isView(t)&&ArrayBuffer.isView(r)){if(o=t.length,o!=r.length)return!1;for(e=o;e--!==0;)if(t[e]!==r[e])return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if(n=Object.keys(t),o=n.length,o!==Object.keys(r).length)return!1;for(e=o;e--!==0;)if(!Object.prototype.hasOwnProperty.call(r,n[e]))return!1;if(Fe&&t instanceof Element)return!1;for(e=o;e--!==0;)if(!((n[e]==="_owner"||n[e]==="__v"||n[e]==="__o")&&t.$$typeof)&&!z(t[n[e]],r[n[e]]))return!1;return!0}return t!==t&&r!==r}s(z,"equal");he.exports=s(function(r,o){try{return z(r,o)}catch(e){if((e.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw e}},"isEqual")});var Ce=de((Tt,be)=>{"use strict";d();var Ke=process.env.NODE_ENV!=="production",Te=s(function(){},"warning");Ke&&(Oe=s(function(r,o){var e=arguments.length;o=new Array(e>1?e-1:0);for(var n=1;n<e;n++)o[n-1]=arguments[n];var a=0,u="Warning: "+r.replace(/%s/g,function(){return o[a++]});typeof console<"u"&&console.error(u);try{throw new Error(u)}catch{}},"printWarning"),Te=s(function(t,r,o){var e=arguments.length;o=new Array(e>2?e-2:0);for(var n=2;n<e;n++)o[n-2]=arguments[n];if(r===void 0)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");t||Oe.apply(null,[r].concat(o))},"warning"));var Oe;be.exports=Te});d();var Ue=Z($e());import G,{useCallback as nt,useState as it,useEffect as at}from"react";import{styled as Le}from"@storybook/theming";d();d();d();function D(t,r){return D=Object.setPrototypeOf?Object.setPrototypeOf.bind():s(function(e,n){return e.__proto__=n,e},"_setPrototypeOf"),D(t,r)}s(D,"_setPrototypeOf");function Y(t,r){t.prototype=Object.create(r.prototype),t.prototype.constructor=t,D(t,r)}s(Y,"_inheritsLoose");import B,{Component as Se}from"react";import{createPortal as Qe}from"react-dom";d();d();import*as E from"react";d();import*as v from"react";var _=v.createContext(),ee=v.createContext();function te(t){var r=t.children,o=v.useState(null),e=o[0],n=o[1],a=v.useRef(!1);v.useEffect(function(){return function(){a.current=!0}},[]);var u=v.useCallback(function(i){a.current||n(i)},[]);return v.createElement(_.Provider,{value:e},v.createElement(ee.Provider,{value:u},r))}s(te,"Manager");d();import*as V from"react";var X=s(function(r){return Array.isArray(r)?r[0]:r},"unwrapArray"),re=s(function(r){if(typeof r=="function"){for(var o=arguments.length,e=new Array(o>1?o-1:0),n=1;n<o;n++)e[n-1]=arguments[n];return r.apply(void 0,e)}},"safeInvoke"),N=s(function(r,o){if(typeof r=="function")return re(r,o);r!=null&&(r.current=o)},"setRef"),oe=s(function(r){return r.reduce(function(o,e){var n=e[0],a=e[1];return o[n]=a,o},{})},"fromEntries"),ne=typeof window<"u"&&window.document&&window.document.createElement?V.useLayoutEffect:V.useEffect;d();import*as x from"react";import*as Re from"react-dom";var we=Z(ve());var ze=[],ye=s(function(r,o,e){e===void 0&&(e={});var n=x.useRef(null),a={onFirstUpdate:e.onFirstUpdate,placement:e.placement||"bottom",strategy:e.strategy||"absolute",modifiers:e.modifiers||ze},u=x.useState({styles:{popper:{position:a.strategy,left:"0",top:"0"},arrow:{position:"absolute"}},attributes:{}}),i=u[0],c=u[1],l=x.useMemo(function(){return{name:"updateState",enabled:!0,phase:"write",fn:s(function(h){var w=h.state,y=Object.keys(w.elements);Re.flushSync(function(){c({styles:oe(y.map(function(R){return[R,w.styles[R]||{}]})),attributes:oe(y.map(function(R){return[R,w.attributes[R]]}))})})},"fn"),requires:["computeStyles"]}},[]),p=x.useMemo(function(){var g={onFirstUpdate:a.onFirstUpdate,placement:a.placement,strategy:a.strategy,modifiers:[].concat(a.modifiers,[l,{name:"applyStyles",enabled:!1}])};return(0,we.default)(n.current,g)?n.current||g:(n.current=g,g)},[a.onFirstUpdate,a.placement,a.strategy,a.modifiers,l]),f=x.useRef();return ne(function(){f.current&&f.current.setOptions(p)},[p]),ne(function(){if(!(r==null||o==null)){var g=e.createPopper||me,h=g(r,o,p);return f.current=h,function(){h.destroy(),f.current=null}}},[r,o,e.createPopper]),{state:f.current?f.current.state:null,styles:i.styles,attributes:i.attributes,update:f.current?f.current.update:null,forceUpdate:f.current?f.current.forceUpdate:null}},"usePopper");var qe=s(function(){},"NOOP"),Ge=s(function(){return Promise.resolve(null)},"NOOP_PROMISE"),Je=[];function ie(t){var r=t.placement,o=r===void 0?"bottom":r,e=t.strategy,n=e===void 0?"absolute":e,a=t.modifiers,u=a===void 0?Je:a,i=t.referenceElement,c=t.onFirstUpdate,l=t.innerRef,p=t.children,f=E.useContext(_),g=E.useState(null),h=g[0],w=g[1],y=E.useState(null),R=y[0],H=y[1];E.useEffect(function(){N(l,h)},[l,h]);var L=E.useMemo(function(){return{placement:o,strategy:n,onFirstUpdate:c,modifiers:[].concat(u,[{name:"arrow",enabled:R!=null,options:{element:R}}])}},[o,n,c,u,R]),k=ye(i||f,h,L),m=k.state,S=k.styles,U=k.forceUpdate,F=k.update,J=E.useMemo(function(){return{ref:w,style:S.popper,placement:m?m.placement:o,hasPopperEscaped:m&&m.modifiersData.hide?m.modifiersData.hide.hasPopperEscaped:null,isReferenceHidden:m&&m.modifiersData.hide?m.modifiersData.hide.isReferenceHidden:null,arrowProps:{style:S.arrow,ref:H},forceUpdate:U||qe,update:F||Ge}},[w,H,o,m,S,F,U]);return X(p)(J)}s(ie,"Popper");d();var Ee=Z(Ce());import*as A from"react";function ae(t){var r=t.children,o=t.innerRef,e=A.useContext(ee),n=A.useCallback(function(a){N(o,a),re(e,a)},[o,e]);return A.useEffect(function(){return function(){return N(o,null)}},[]),A.useEffect(function(){(0,Ee.default)(Boolean(e),"`Reference` should not be used outside of a `Manager` component.")},[e]),X(r)({ref:n})}s(ae,"Reference");var xe=B.createContext({}),P=s(function(){for(var r=arguments.length,o=new Array(r),e=0;e<r;e++)o[e]=arguments[e];return function(){for(var n=arguments.length,a=new Array(n),u=0;u<n;u++)a[u]=arguments[u];return o.forEach(function(i){return i&&i.apply(void 0,a)})}},"callAll"),Ze=s(function(){},"noop"),Pe=s(function(){return!!(typeof window<"u"&&window.document&&window.document.createElement)},"canUseDOM"),_e=s(function(r,o){if(typeof r=="function")return r(o);r!=null&&(r.current=o)},"setRef"),Me=function(t){Y(r,t);function r(){for(var e,n=arguments.length,a=new Array(n),u=0;u<n;u++)a[u]=arguments[u];return e=t.call.apply(t,[this].concat(a))||this,e.observer=void 0,e.tooltipRef=void 0,e.handleOutsideClick=function(i){if(e.tooltipRef&&!e.tooltipRef.contains(i.target)){var c=e.context.parentOutsideClickHandler,l=e.props,p=l.hideTooltip,f=l.clearScheduled;f(),p(),c&&c(i)}},e.handleOutsideRightClick=function(i){if(e.tooltipRef&&!e.tooltipRef.contains(i.target)){var c=e.context.parentOutsideRightClickHandler,l=e.props,p=l.hideTooltip,f=l.clearScheduled;f(),p(),c&&c(i)}},e.addOutsideClickHandler=function(){document.body.addEventListener("touchend",e.handleOutsideClick),document.body.addEventListener("click",e.handleOutsideClick)},e.removeOutsideClickHandler=function(){document.body.removeEventListener("touchend",e.handleOutsideClick),document.body.removeEventListener("click",e.handleOutsideClick)},e.addOutsideRightClickHandler=function(){return document.body.addEventListener("contextmenu",e.handleOutsideRightClick)},e.removeOutsideRightClickHandler=function(){return document.body.removeEventListener("contextmenu",e.handleOutsideRightClick)},e.getTooltipRef=function(i){e.tooltipRef=i,_e(e.props.innerRef,i)},e.getArrowProps=function(i){return i===void 0&&(i={}),C({},i,{style:C({},i.style,e.props.arrowProps.style)})},e.getTooltipProps=function(i){return i===void 0&&(i={}),C({},i,e.isTriggeredBy("hover")&&{onMouseEnter:P(e.props.clearScheduled,i.onMouseEnter),onMouseLeave:P(e.props.hideTooltip,i.onMouseLeave)},{style:C({},i.style,e.props.style)})},e.contextValue={isParentNoneTriggered:e.props.trigger==="none",addParentOutsideClickHandler:e.addOutsideClickHandler,addParentOutsideRightClickHandler:e.addOutsideRightClickHandler,parentOutsideClickHandler:e.handleOutsideClick,parentOutsideRightClickHandler:e.handleOutsideRightClick,removeParentOutsideClickHandler:e.removeOutsideClickHandler,removeParentOutsideRightClickHandler:e.removeOutsideRightClickHandler},e}s(r,"Tooltip1");var o=r.prototype;return o.componentDidMount=s(function(){var n=this,a=this.observer=new MutationObserver(function(){n.props.update()});if(a.observe(this.tooltipRef,this.props.mutationObserverOptions),this.isTriggeredBy("hover")||this.isTriggeredBy("click")||this.isTriggeredBy("right-click")){var u=this.context,i=u.removeParentOutsideClickHandler,c=u.removeParentOutsideRightClickHandler;this.addOutsideClickHandler(),this.addOutsideRightClickHandler(),i&&i(),c&&c()}},"componentDidMount"),o.componentDidUpdate=s(function(){this.props.closeOnReferenceHidden&&this.props.isReferenceHidden&&this.props.hideTooltip()},"componentDidUpdate"),o.componentWillUnmount=s(function(){if(this.observer&&this.observer.disconnect(),this.isTriggeredBy("hover")||this.isTriggeredBy("click")||this.isTriggeredBy("right-click")){var n=this.context,a=n.isParentNoneTriggered,u=n.addParentOutsideClickHandler,i=n.addParentOutsideRightClickHandler;this.removeOutsideClickHandler(),this.removeOutsideRightClickHandler(),this.handleOutsideClick=void 0,this.handleOutsideRightClick=void 0,!a&&u&&u(),!a&&i&&i()}},"componentWillUnmount"),o.render=s(function(){var n=this.props,a=n.arrowProps,u=n.placement,i=n.tooltip;return B.createElement(xe.Provider,{value:this.contextValue},i({arrowRef:a.ref,getArrowProps:this.getArrowProps,getTooltipProps:this.getTooltipProps,placement:u,tooltipRef:this.getTooltipRef}))},"render"),o.isTriggeredBy=s(function(n){var a=this.props.trigger;return a===n||Array.isArray(a)&&a.includes(n)},"isTriggeredBy"),r}(Se);Me.contextType=xe;var et={childList:!0,subtree:!0},ke=function(t){Y(r,t);function r(){for(var e,n=arguments.length,a=new Array(n),u=0;u<n;u++)a[u]=arguments[u];return e=t.call.apply(t,[this].concat(a))||this,e.state={tooltipShown:e.props.defaultTooltipShown},e.hideTimeout=void 0,e.showTimeout=void 0,e.popperOffset=void 0,e.setTooltipState=function(i){var c=s(function(){return e.props.onVisibilityChange(i.tooltipShown)},"cb");e.isControlled()?c():e.setState(i,c)},e.clearScheduled=function(){clearTimeout(e.hideTimeout),clearTimeout(e.showTimeout)},e.showTooltip=function(i){var c=i.pageX,l=i.pageY;e.clearScheduled();var p={tooltipShown:!0};e.props.followCursor&&(p=C({},p,{pageX:c,pageY:l})),e.showTimeout=window.setTimeout(function(){return e.setTooltipState(p)},e.props.delayShow)},e.hideTooltip=function(){e.clearScheduled(),e.hideTimeout=window.setTimeout(function(){return e.setTooltipState({tooltipShown:!1})},e.props.delayHide)},e.toggleTooltip=function(i){var c=i.pageX,l=i.pageY,p=e.getState()?"hideTooltip":"showTooltip";e[p]({pageX:c,pageY:l})},e.clickToggle=function(i){i.preventDefault();var c=i.pageX,l=i.pageY,p=e.props.followCursor?"showTooltip":"toggleTooltip";e[p]({pageX:c,pageY:l})},e.contextMenuToggle=function(i){i.preventDefault();var c=i.pageX,l=i.pageY,p=e.props.followCursor?"showTooltip":"toggleTooltip";e[p]({pageX:c,pageY:l})},e.getTriggerProps=function(i){return i===void 0&&(i={}),C({},i,e.isTriggeredBy("click")&&{onClick:P(e.clickToggle,i.onClick),onTouchEnd:P(e.clickToggle,i.onTouchEnd)},e.isTriggeredBy("right-click")&&{onContextMenu:P(e.contextMenuToggle,i.onContextMenu)},e.isTriggeredBy("hover")&&C({onMouseEnter:P(e.showTooltip,i.onMouseEnter),onMouseLeave:P(e.hideTooltip,i.onMouseLeave)},e.props.followCursor&&{onMouseMove:P(e.showTooltip,i.onMouseMove)}),e.isTriggeredBy("focus")&&{onFocus:P(e.showTooltip,i.onFocus),onBlur:P(e.hideTooltip,i.onBlur)})},e}s(r,"TooltipTrigger1");var o=r.prototype;return o.componentWillUnmount=s(function(){this.clearScheduled()},"componentWillUnmount"),o.render=s(function(){var n=this,a=this.props,u=a.children,i=a.tooltip,c=a.placement,l=a.trigger,p=a.getTriggerRef,f=a.modifiers,g=a.closeOnReferenceHidden,h=a.usePortal,w=a.portalContainer,y=a.followCursor,R=a.getTooltipRef,H=a.mutationObserverOptions,L=ge(a,["children","tooltip","placement","trigger","getTriggerRef","modifiers","closeOnReferenceHidden","usePortal","portalContainer","followCursor","getTooltipRef","mutationObserverOptions"]),k=B.createElement(ie,C({innerRef:R,placement:c,modifiers:[{name:"followCursor",enabled:y,phase:"main",fn:s(function(S){n.popperOffset=S.state.rects.popper},"fn")}].concat(f)},L),function(m){var S=m.ref,U=m.style,F=m.placement,J=m.arrowProps,De=m.isReferenceHidden,Ne=m.update;if(y&&n.popperOffset){var ce=n.state,K=ce.pageX,Q=ce.pageY,le=n.popperOffset,pe=le.width,fe=le.height,Ie=K+pe>window.pageXOffset+document.body.offsetWidth?K-pe:K,je=Q+fe>window.pageYOffset+document.body.offsetHeight?Q-fe:Q;U.transform="translate3d("+Ie+"px, "+je+"px, 0"}return B.createElement(Me,C({arrowProps:J,closeOnReferenceHidden:g,isReferenceHidden:De,placement:F,update:Ne,style:U,tooltip:i,trigger:l,mutationObserverOptions:H},{clearScheduled:n.clearScheduled,hideTooltip:n.hideTooltip,innerRef:S}))});return B.createElement(te,null,B.createElement(ae,{innerRef:p},function(m){var S=m.ref;return u({getTriggerProps:n.getTriggerProps,triggerRef:S})}),this.getState()&&(h?Qe(k,w):k))},"render"),o.isControlled=s(function(){return this.props.tooltipShown!==void 0},"isControlled"),o.getState=s(function(){return this.isControlled()?this.props.tooltipShown:this.state.tooltipShown},"getState"),o.isTriggeredBy=s(function(n){var a=this.props.trigger;return a===n||Array.isArray(a)&&a.includes(n)},"isTriggeredBy"),r}(Se);ke.defaultProps={closeOnReferenceHidden:!0,defaultTooltipShown:!1,delayHide:0,delayShow:0,followCursor:!1,onVisibilityChange:Ze,placement:"right",portalContainer:Pe()?document.body:null,trigger:"hover",usePortal:Pe(),mutationObserverOptions:et,modifiers:[]};var Ae=ke;d();import He from"react";import tt from"memoizerific";import{styled as Be,lighten as I,darken as j}from"@storybook/theming";function q(){return q=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var e in o)Object.prototype.hasOwnProperty.call(o,e)&&(t[e]=o[e])}return t},q.apply(this,arguments)}s(q,"_extends");var b=tt(1e3)((t,r,o,e=0)=>r.split("-")[0]===t?o:e),M=8,rt=Be.div({position:"absolute",borderStyle:"solid"},({placement:t})=>{let r=0,o=0;switch(!0){case(t.startsWith("left")||t.startsWith("right")):{o=8;break}case(t.startsWith("top")||t.startsWith("bottom")):{r=8;break}default:}return{transform:`translate3d(${r}px, ${o}px, 0px)`}},({theme:t,color:r,placement:o})=>({bottom:`${b("top",o,M*-1,"auto")}px`,top:`${b("bottom",o,M*-1,"auto")}px`,right:`${b("left",o,M*-1,"auto")}px`,left:`${b("right",o,M*-1,"auto")}px`,borderBottomWidth:`${b("top",o,"0",M)}px`,borderTopWidth:`${b("bottom",o,"0",M)}px`,borderRightWidth:`${b("left",o,"0",M)}px`,borderLeftWidth:`${b("right",o,"0",M)}px`,borderTopColor:b("top",o,t.color[r]||r||t.base==="light"?I(t.background.app):j(t.background.app),"transparent"),borderBottomColor:b("bottom",o,t.color[r]||r||t.base==="light"?I(t.background.app):j(t.background.app),"transparent"),borderLeftColor:b("left",o,t.color[r]||r||t.base==="light"?I(t.background.app):j(t.background.app),"transparent"),borderRightColor:b("right",o,t.color[r]||r||t.base==="light"?I(t.background.app):j(t.background.app),"transparent")})),ot=Be.div(({hidden:t})=>({display:t?"none":"inline-block",zIndex:2147483647}),({theme:t,color:r,hasChrome:o})=>o?{background:t.color[r]||r||t.base==="light"?I(t.background.app):j(t.background.app),filter:`
+            drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
+            drop-shadow(0 1px 3px rgba(0,0,0,0.1))
+          `,borderRadius:t.appBorderRadius*2,fontSize:t.typography.size.s1}:{}),se=s(c=>{var l=c,{placement:t,hasChrome:r,children:o,arrowProps:e,tooltipRef:n,arrowRef:a,color:u}=l,i=W(l,["placement","hasChrome","children","arrowProps","tooltipRef","arrowRef","color"]);return He.createElement(ot,q({hasChrome:r,placement:t,ref:n},i,{color:u}),r&&He.createElement(rt,q({placement:t,ref:a},e,{color:u})),o)},"Tooltip");se.defaultProps={color:void 0,arrowRef:void 0,tooltipRef:void 0,hasChrome:!0,placement:"top",arrowProps:{}};function $(){return $=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var e in o)Object.prototype.hasOwnProperty.call(o,e)&&(t[e]=o[e])}return t},$.apply(this,arguments)}s($,"_extends");var{document:ue}=Ue.default,st=Le.div`
+  display: inline-block;
+  cursor: ${t=>t.mode==="hover"?"default":"pointer"};
+`,ut=Le.g`
+  cursor: ${t=>t.mode==="hover"?"default":"pointer"};
+`,We=s(f=>{var g=f,{svg:t,trigger:r,closeOnClick:o,placement:e,modifiers:n,hasChrome:a,tooltip:u,children:i,tooltipShown:c,onVisibilityChange:l}=g,p=W(g,["svg","trigger","closeOnClick","placement","modifiers","hasChrome","tooltip","children","tooltipShown","onVisibilityChange"]);let h=t?ut:st;return G.createElement(Ae,{placement:e,trigger:r,modifiers:n,tooltipShown:c,onVisibilityChange:l,tooltip:({getTooltipProps:w,getArrowProps:y,tooltipRef:R,arrowRef:H,placement:L})=>G.createElement(se,$({hasChrome:a,placement:L,tooltipRef:R,arrowRef:H,arrowProps:y()},w()),typeof u=="function"?u({onHide:()=>l(!1)}):u)},({getTriggerProps:w,triggerRef:y})=>G.createElement(h,$({ref:y},w(),p),i))},"WithTooltipPure");We.defaultProps={svg:!1,trigger:"hover",closeOnClick:!1,placement:"top",modifiers:[{name:"preventOverflow",options:{padding:8}},{name:"offset",options:{offset:[8,8]}},{name:"arrow",options:{padding:8}}],hasChrome:!0,tooltipShown:!1};var Xt=s(e=>{var n=e,{startOpen:t,onVisibilityChange:r}=n,o=W(n,["startOpen","onVisibilityChange"]);let[a,u]=it(t||!1),i=nt(c=>{r&&r(c)===!1||u(c)},[r]);return at(()=>{let c=s(()=>i(!1),"hide");ue.addEventListener("keydown",c,!1);let l=Array.from(ue.getElementsByTagName("iframe")),p=[];return l.forEach(f=>{let g=s(()=>{try{f.contentWindow.document&&(f.contentWindow.document.addEventListener("click",c),p.push(()=>{try{f.contentWindow.document.removeEventListener("click",c)}catch{}}))}catch{}},"bind");g(),f.addEventListener("load",g),p.push(()=>{f.removeEventListener("load",g)})}),()=>{ue.removeEventListener("keydown",c),p.forEach(f=>{f()})}}),G.createElement(We,$({},o,{tooltipShown:a,onVisibilityChange:i}))},"WithToolTipState");export{Xt as WithToolTipState,Xt as WithTooltip,We as WithTooltipPure};