@storybook/components 7.0.0-beta.40 → 7.0.0-beta.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "7.0.0-beta.40",
+  "version": "7.0.0-beta.42",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -48,12 +48,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.0-beta.40",
+    "@storybook/client-logger": "7.0.0-beta.42",
     "@storybook/csf": "next",
     "@storybook/global": "^5.0.0",
-    "@storybook/theming": "7.0.0-beta.40",
-    "@storybook/types": "7.0.0-beta.40",
+    "@storybook/theming": "7.0.0-beta.42",
+    "@storybook/types": "7.0.0-beta.42",
     "memoizerific": "^1.11.3",
+    "use-resize-observer": "^9.1.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
@@ -84,5 +85,5 @@
     ],
     "platform": "neutral"
   },
-  "gitHead": "9c68cc3a66e996e91ccd520d9d0adf0fa7094ad4"
+  "gitHead": "0b8d11c61742ba9283a6889d0bdac9ac5a8a508f"
 }

package/dist/WithTooltip-DY3TAT4Y.mjs

@@ -1,9 +0,0 @@
-import{createPopper}from"./chunk-3EFM6HRY.mjs";import{_extends,_objectWithoutPropertiesLoose}from"./chunk-FD4M6EBV.mjs";import{__commonJS,__toESM}from"./chunk-NNAAFZ4U.mjs";var require_react_fast_compare=__commonJS({"../../node_modules/react-fast-compare/index.js"(exports,module){var hasElementType=typeof Element<"u",hasMap=typeof Map=="function",hasSet=typeof Set=="function",hasArrayBuffer=typeof ArrayBuffer=="function"&&!!ArrayBuffer.isView;function equal(a,b){if(a===b)return!0;if(a&&b&&typeof a=="object"&&typeof b=="object"){if(a.constructor!==b.constructor)return!1;var length,i,keys;if(Array.isArray(a)){if(length=a.length,length!=b.length)return!1;for(i=length;i--!==0;)if(!equal(a[i],b[i]))return!1;return!0}var it;if(hasMap&&a instanceof Map&&b instanceof Map){if(a.size!==b.size)return!1;for(it=a.entries();!(i=it.next()).done;)if(!b.has(i.value[0]))return!1;for(it=a.entries();!(i=it.next()).done;)if(!equal(i.value[1],b.get(i.value[0])))return!1;return!0}if(hasSet&&a instanceof Set&&b instanceof Set){if(a.size!==b.size)return!1;for(it=a.entries();!(i=it.next()).done;)if(!b.has(i.value[0]))return!1;return!0}if(hasArrayBuffer&&ArrayBuffer.isView(a)&&ArrayBuffer.isView(b)){if(length=a.length,length!=b.length)return!1;for(i=length;i--!==0;)if(a[i]!==b[i])return!1;return!0}if(a.constructor===RegExp)return a.source===b.source&&a.flags===b.flags;if(a.valueOf!==Object.prototype.valueOf)return a.valueOf()===b.valueOf();if(a.toString!==Object.prototype.toString)return a.toString()===b.toString();if(keys=Object.keys(a),length=keys.length,length!==Object.keys(b).length)return!1;for(i=length;i--!==0;)if(!Object.prototype.hasOwnProperty.call(b,keys[i]))return!1;if(hasElementType&&a instanceof Element)return!1;for(i=length;i--!==0;)if(!((keys[i]==="_owner"||keys[i]==="__v"||keys[i]==="__o")&&a.$$typeof)&&!equal(a[keys[i]],b[keys[i]]))return!1;return!0}return a!==a&&b!==b}module.exports=function(a,b){try{return equal(a,b)}catch(error){if((error.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw error}}}});import React5,{useCallback as useCallback2,useState as useState3,useEffect as useEffect3}from"react";import ReactDOM2 from"react-dom";import{styled as styled2}from"@storybook/theming";import{global}from"@storybook/global";import*as React3 from"react";import*as React from"react";var fromEntries=function(entries){return entries.reduce(function(acc,_ref){var key=_ref[0],value=_ref[1];return acc[key]=value,acc},{})},useIsomorphicLayoutEffect=typeof window<"u"&&window.document&&window.document.createElement?React.useLayoutEffect:React.useEffect;import*as React2 from"react";import*as ReactDOM from"react-dom";var import_react_fast_compare=__toESM(require_react_fast_compare());var EMPTY_MODIFIERS=[],usePopper=function(referenceElement,popperElement,options){options===void 0&&(options={});var prevOptions=React2.useRef(null),optionsWithDefaults={onFirstUpdate:options.onFirstUpdate,placement:options.placement||"bottom",strategy:options.strategy||"absolute",modifiers:options.modifiers||EMPTY_MODIFIERS},_React$useState=React2.useState({styles:{popper:{position:optionsWithDefaults.strategy,left:"0",top:"0"},arrow:{position:"absolute"}},attributes:{}}),state=_React$useState[0],setState=_React$useState[1],updateStateModifier=React2.useMemo(function(){return{name:"updateState",enabled:!0,phase:"write",fn:function(_ref){var state2=_ref.state,elements=Object.keys(state2.elements);ReactDOM.flushSync(function(){setState({styles:fromEntries(elements.map(function(element){return[element,state2.styles[element]||{}]})),attributes:fromEntries(elements.map(function(element){return[element,state2.attributes[element]]}))})})},requires:["computeStyles"]}},[]),popperOptions=React2.useMemo(function(){var newOptions={onFirstUpdate:optionsWithDefaults.onFirstUpdate,placement:optionsWithDefaults.placement,strategy:optionsWithDefaults.strategy,modifiers:[].concat(optionsWithDefaults.modifiers,[updateStateModifier,{name:"applyStyles",enabled:!1}])};return(0,import_react_fast_compare.default)(prevOptions.current,newOptions)?prevOptions.current||newOptions:(prevOptions.current=newOptions,newOptions)},[optionsWithDefaults.onFirstUpdate,optionsWithDefaults.placement,optionsWithDefaults.strategy,optionsWithDefaults.modifiers,updateStateModifier]),popperInstanceRef=React2.useRef();return useIsomorphicLayoutEffect(function(){popperInstanceRef.current&&popperInstanceRef.current.setOptions(popperOptions)},[popperOptions]),useIsomorphicLayoutEffect(function(){if(!(referenceElement==null||popperElement==null)){var createPopper2=options.createPopper||createPopper,popperInstance=createPopper2(referenceElement,popperElement,popperOptions);return popperInstanceRef.current=popperInstance,function(){popperInstance.destroy(),popperInstanceRef.current=null}}},[referenceElement,popperElement,options.createPopper]),{state:popperInstanceRef.current?popperInstanceRef.current.state:null,styles:state.styles,attributes:state.attributes,update:popperInstanceRef.current?popperInstanceRef.current.update:null,forceUpdate:popperInstanceRef.current?popperInstanceRef.current.forceUpdate:null}};function useGetLatest(val){var ref=React3.useRef(val);return ref.current=val,React3.useCallback(function(){return ref.current},[])}var noop=function(){};function useControlledState(_ref){var initial=_ref.initial,value=_ref.value,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop:_ref$onChange;if(initial===void 0&&value===void 0)throw new TypeError('Either "value" or "initial" variable must be set. Now both are undefined');var _React$useState=React3.useState(initial),state=_React$useState[0],setState=_React$useState[1],getLatest=useGetLatest(state),set=React3.useCallback(function(updater){var state2=getLatest(),updatedState=typeof updater=="function"?updater(state2):updater;typeof updatedState.persist=="function"&&updatedState.persist(),setState(updatedState),typeof onChange=="function"&&onChange(updatedState)},[getLatest,onChange]),isControlled=value!==void 0;return[isControlled?value:state,isControlled?onChange:set]}function generateBoundingClientRect(x,y){return x===void 0&&(x=0),y===void 0&&(y=0),function(){return{width:0,height:0,top:y,right:x,bottom:y,left:x,x:0,y:0,toJSON:function(){return null}}}}var _excluded=["styles","attributes"],virtualElement={getBoundingClientRect:generateBoundingClientRect()},defaultConfig={closeOnOutsideClick:!0,closeOnTriggerHidden:!1,defaultVisible:!1,delayHide:0,delayShow:0,followCursor:!1,interactive:!1,mutationObserverOptions:{attributes:!0,childList:!0,subtree:!0},offset:[0,6],trigger:"hover"};function usePopperTooltip(config,popperOptions){var _popperProps$state,_popperProps$state$mo,_popperProps$state$mo2;config===void 0&&(config={}),popperOptions===void 0&&(popperOptions={});var finalConfig=Object.keys(defaultConfig).reduce(function(config2,key){var _extends2;return _extends({},config2,(_extends2={},_extends2[key]=config2[key]!==void 0?config2[key]:defaultConfig[key],_extends2))},config),defaultModifiers=React3.useMemo(function(){return[{name:"offset",options:{offset:finalConfig.offset}}]},Array.isArray(finalConfig.offset)?finalConfig.offset:[]),finalPopperOptions=_extends({},popperOptions,{placement:popperOptions.placement||finalConfig.placement,modifiers:popperOptions.modifiers||defaultModifiers}),_React$useState=React3.useState(null),triggerRef=_React$useState[0],setTriggerRef=_React$useState[1],_React$useState2=React3.useState(null),tooltipRef=_React$useState2[0],setTooltipRef=_React$useState2[1],_useControlledState=useControlledState({initial:finalConfig.defaultVisible,value:finalConfig.visible,onChange:finalConfig.onVisibleChange}),visible=_useControlledState[0],setVisible=_useControlledState[1],timer=React3.useRef();React3.useEffect(function(){return function(){return clearTimeout(timer.current)}},[]);var _usePopper=usePopper(finalConfig.followCursor?virtualElement:triggerRef,tooltipRef,finalPopperOptions),styles=_usePopper.styles,attributes=_usePopper.attributes,popperProps=_objectWithoutPropertiesLoose(_usePopper,_excluded),update=popperProps.update,getLatest=useGetLatest({visible,triggerRef,tooltipRef,finalConfig}),isTriggeredBy=React3.useCallback(function(trigger){return Array.isArray(finalConfig.trigger)?finalConfig.trigger.includes(trigger):finalConfig.trigger===trigger},Array.isArray(finalConfig.trigger)?finalConfig.trigger:[finalConfig.trigger]),hideTooltip=React3.useCallback(function(){clearTimeout(timer.current),timer.current=window.setTimeout(function(){return setVisible(!1)},finalConfig.delayHide)},[finalConfig.delayHide,setVisible]),showTooltip=React3.useCallback(function(){clearTimeout(timer.current),timer.current=window.setTimeout(function(){return setVisible(!0)},finalConfig.delayShow)},[finalConfig.delayShow,setVisible]),toggleTooltip=React3.useCallback(function(){getLatest().visible?hideTooltip():showTooltip()},[getLatest,hideTooltip,showTooltip]);React3.useEffect(function(){if(getLatest().finalConfig.closeOnOutsideClick){var handleClickOutside=function(event){var _event$composedPath,_getLatest=getLatest(),tooltipRef2=_getLatest.tooltipRef,triggerRef2=_getLatest.triggerRef,target=(event.composedPath==null||(_event$composedPath=event.composedPath())==null?void 0:_event$composedPath[0])||event.target;target instanceof Node&&tooltipRef2!=null&&triggerRef2!=null&&!tooltipRef2.contains(target)&&!triggerRef2.contains(target)&&hideTooltip()};return document.addEventListener("mousedown",handleClickOutside),function(){return document.removeEventListener("mousedown",handleClickOutside)}}},[getLatest,hideTooltip]),React3.useEffect(function(){if(!(triggerRef==null||!isTriggeredBy("click")))return triggerRef.addEventListener("click",toggleTooltip),function(){return triggerRef.removeEventListener("click",toggleTooltip)}},[triggerRef,isTriggeredBy,toggleTooltip]),React3.useEffect(function(){if(!(triggerRef==null||!isTriggeredBy("double-click")))return triggerRef.addEventListener("dblclick",toggleTooltip),function(){return triggerRef.removeEventListener("dblclick",toggleTooltip)}},[triggerRef,isTriggeredBy,toggleTooltip]),React3.useEffect(function(){if(!(triggerRef==null||!isTriggeredBy("right-click"))){var preventDefaultAndToggle=function(event){event.preventDefault(),toggleTooltip()};return triggerRef.addEventListener("contextmenu",preventDefaultAndToggle),function(){return triggerRef.removeEventListener("contextmenu",preventDefaultAndToggle)}}},[triggerRef,isTriggeredBy,toggleTooltip]),React3.useEffect(function(){if(!(triggerRef==null||!isTriggeredBy("focus")))return triggerRef.addEventListener("focus",showTooltip),triggerRef.addEventListener("blur",hideTooltip),function(){triggerRef.removeEventListener("focus",showTooltip),triggerRef.removeEventListener("blur",hideTooltip)}},[triggerRef,isTriggeredBy,showTooltip,hideTooltip]),React3.useEffect(function(){if(!(triggerRef==null||!isTriggeredBy("hover")))return triggerRef.addEventListener("mouseenter",showTooltip),triggerRef.addEventListener("mouseleave",hideTooltip),function(){triggerRef.removeEventListener("mouseenter",showTooltip),triggerRef.removeEventListener("mouseleave",hideTooltip)}},[triggerRef,isTriggeredBy,showTooltip,hideTooltip]),React3.useEffect(function(){if(!(tooltipRef==null||!isTriggeredBy("hover")||!getLatest().finalConfig.interactive))return tooltipRef.addEventListener("mouseenter",showTooltip),tooltipRef.addEventListener("mouseleave",hideTooltip),function(){tooltipRef.removeEventListener("mouseenter",showTooltip),tooltipRef.removeEventListener("mouseleave",hideTooltip)}},[tooltipRef,isTriggeredBy,showTooltip,hideTooltip,getLatest]);var isReferenceHidden=popperProps==null||(_popperProps$state=popperProps.state)==null||(_popperProps$state$mo=_popperProps$state.modifiersData)==null||(_popperProps$state$mo2=_popperProps$state$mo.hide)==null?void 0:_popperProps$state$mo2.isReferenceHidden;React3.useEffect(function(){finalConfig.closeOnTriggerHidden&&isReferenceHidden&&hideTooltip()},[finalConfig.closeOnTriggerHidden,hideTooltip,isReferenceHidden]),React3.useEffect(function(){if(!finalConfig.followCursor||triggerRef==null)return;function setMousePosition(_ref){var clientX=_ref.clientX,clientY=_ref.clientY;virtualElement.getBoundingClientRect=generateBoundingClientRect(clientX,clientY),update?.()}return triggerRef.addEventListener("mousemove",setMousePosition),function(){return triggerRef.removeEventListener("mousemove",setMousePosition)}},[finalConfig.followCursor,triggerRef,update]),React3.useEffect(function(){if(!(tooltipRef==null||update==null||finalConfig.mutationObserverOptions==null)){var observer=new MutationObserver(update);return observer.observe(tooltipRef,finalConfig.mutationObserverOptions),function(){return observer.disconnect()}}},[finalConfig.mutationObserverOptions,tooltipRef,update]);var getTooltipProps=function(args){return args===void 0&&(args={}),_extends({},args,{style:_extends({},args.style,styles.popper)},attributes.popper,{"data-popper-interactive":finalConfig.interactive})},getArrowProps=function(args){return args===void 0&&(args={}),_extends({},args,attributes.arrow,{style:_extends({},args.style,styles.arrow),"data-popper-arrow":!0})};return _extends({getArrowProps,getTooltipProps,setTooltipRef,setTriggerRef,tooltipRef,triggerRef,visible},popperProps)}import React4 from"react";import memoize from"memoizerific";import{styled,lighten}from"@storybook/theming";var match=memoize(1e3)((requests,actual,value,fallback=0)=>actual.split("-")[0]===requests?value:fallback),ArrowSpacing=8,Arrow=styled.div({position:"absolute",borderStyle:"solid"},({placement})=>{let x=0,y=0;switch(!0){case(placement.startsWith("left")||placement.startsWith("right")):{y=8;break}case(placement.startsWith("top")||placement.startsWith("bottom")):{x=8;break}default:}return{transform:`translate3d(${x}px, ${y}px, 0px)`}},({theme,color,placement})=>({bottom:`${match("top",placement,`${ArrowSpacing*-1}px`,"auto")}`,top:`${match("bottom",placement,`${ArrowSpacing*-1}px`,"auto")}`,right:`${match("left",placement,`${ArrowSpacing*-1}px`,"auto")}`,left:`${match("right",placement,`${ArrowSpacing*-1}px`,"auto")}`,borderBottomWidth:`${match("top",placement,"0",ArrowSpacing)}px`,borderTopWidth:`${match("bottom",placement,"0",ArrowSpacing)}px`,borderRightWidth:`${match("left",placement,"0",ArrowSpacing)}px`,borderLeftWidth:`${match("right",placement,"0",ArrowSpacing)}px`,borderTopColor:match("top",placement,theme.color[color]||color||theme.base==="light"?lighten(theme.background.app):theme.background.app,"transparent"),borderBottomColor:match("bottom",placement,theme.color[color]||color||theme.base==="light"?lighten(theme.background.app):theme.background.app,"transparent"),borderLeftColor:match("left",placement,theme.color[color]||color||theme.base==="light"?lighten(theme.background.app):theme.background.app,"transparent"),borderRightColor:match("right",placement,theme.color[color]||color||theme.base==="light"?lighten(theme.background.app):theme.background.app,"transparent")})),Wrapper=styled.div(({hidden})=>({display:hidden?"none":"inline-block",zIndex:2147483647}),({theme,color,hasChrome})=>hasChrome?{background:theme.color[color]||color||theme.base==="light"?lighten(theme.background.app):theme.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:theme.appBorderRadius*2,fontSize:theme.typography.size.s1}:{}),Tooltip=React4.forwardRef(({placement,hasChrome,children,arrowProps,tooltipRef,color,...props},ref)=>React4.createElement(Wrapper,{hasChrome,ref,...props,color},hasChrome&&React4.createElement(Arrow,{placement,...arrowProps,color}),children));Tooltip.displayName="Tooltip";Tooltip.defaultProps={color:void 0,tooltipRef:void 0,hasChrome:!0,placement:"top",arrowProps:{}};var{document:document2}=global,TargetContainer=styled2.div`
-  display: inline-block;
-  cursor: ${props=>props.mode==="hover"?"default":"pointer"};
-`,TargetSvgContainer=styled2.g`
-  cursor: ${props=>props.mode==="hover"?"default":"pointer"};
-`,WithTooltipPure=({svg,trigger,closeOnClick,placement,modifiers,hasChrome,tooltip,children,tooltipShown,onVisibilityChange,...props})=>{let Container=svg?TargetSvgContainer:TargetContainer,{getArrowProps,getTooltipProps,setTooltipRef,setTriggerRef,visible,state}=usePopperTooltip({trigger,placement,defaultVisible:tooltipShown,closeOnOutsideClick:closeOnClick,onVisibleChange:onVisibilityChange},{modifiers});return React5.createElement(React5.Fragment,null,React5.createElement(Container,{mode:trigger,ref:setTriggerRef,...props},children),visible&&ReactDOM2.createPortal(React5.createElement(Tooltip,{placement:state?.placement,ref:setTooltipRef,hasChrome,arrowProps:getArrowProps(),...getTooltipProps()},typeof tooltip=="function"?tooltip({onHide:()=>onVisibilityChange(!1)}):tooltip),document2.body))};WithTooltipPure.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 WithToolTipState=({startOpen=!1,onVisibilityChange:onChange,...rest})=>{let[tooltipShown,setTooltipShown]=useState3(startOpen),onVisibilityChange=useCallback2(visibility=>{onChange&&onChange(visibility)===!1||setTooltipShown(visibility)},[onChange]);return useEffect3(()=>{let hide=()=>onVisibilityChange(!1);document2.addEventListener("keydown",hide,!1);let iframes=Array.from(document2.getElementsByTagName("iframe")),unbinders=[];return iframes.forEach(iframe=>{let bind=()=>{try{iframe.contentWindow.document&&(iframe.contentWindow.document.addEventListener("click",hide),unbinders.push(()=>{try{iframe.contentWindow.document.removeEventListener("click",hide)}catch{}}))}catch{}};bind(),iframe.addEventListener("load",bind),unbinders.push(()=>{iframe.removeEventListener("load",bind)})}),()=>{document2.removeEventListener("keydown",hide),unbinders.forEach(unbind=>{unbind()})}}),React5.createElement(WithTooltipPure,{...rest,tooltipShown,onVisibilityChange})};export{WithToolTipState,WithToolTipState as WithTooltip,WithTooltipPure};