@storybook/addon-viewport/dist/manager.mjs

import { PARAM_KEY, ADDON_ID, registerShortcuts } from './chunk-32QKCLIG.mjs';
import { MINIMAL_VIEWPORTS } from './chunk-BLYPNILM.mjs';
import * as React from 'react';
import React__default, { memo, useState, useEffect, useRef, Fragment } from 'react';
import { useParameter, useAddonState, useStorybookApi, addons, types } from '@storybook/manager-api';
import memoize from 'memoizerific';
import { styled, withTheme, Global } from '@storybook/theming';
import { IconButton, WithTooltip, TooltipLinkList, Icons } from '@storybook/components';

var toList=memoize(50)(items=>[...baseViewports,...Object.entries(items).map(([id,{name,...rest}])=>({...rest,id,title:name}))]),responsiveViewport={id:"reset",title:"Reset viewport",styles:null,type:"other"},baseViewports=[responsiveViewport],toLinks=memoize(50)((list,active,set,state,close)=>list.map(i=>{switch(i.id){case responsiveViewport.id:if(active.id===i.id)return null;default:return {...i,onClick:()=>{set({...state,selected:i.id}),close();}}}}).filter(Boolean)),wrapperId="storybook-preview-wrapper",flip=({width,height,...styles})=>({...styles,height:width,width:height}),ActiveViewportSize=styled.div(()=>({display:"inline-flex"})),ActiveViewportLabel=styled.div(({theme})=>({display:"inline-block",textDecoration:"none",padding:10,fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,lineHeight:"1",height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent"})),IconButtonWithLabel=styled(IconButton)(()=>({display:"inline-flex",alignItems:"center"})),IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),getStyles=(prevStyles,styles,isRotated)=>{if(styles===null)return null;let result=typeof styles=="function"?styles(prevStyles):styles;return isRotated?flip(result):result},ViewportTool=memo(withTheme(({theme})=>{let{viewports=MINIMAL_VIEWPORTS,defaultOrientation="portrait",defaultViewport=responsiveViewport.id,disable}=useParameter(PARAM_KEY,{}),[state,setState]=useAddonState(ADDON_ID,{selected:defaultViewport,isRotated:defaultOrientation==="landscape"}),list=toList(viewports),api=useStorybookApi(),[isTooltipVisible,setIsTooltipVisible]=useState(!1);list.find(i=>i.id===defaultViewport)||console.warn(`Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`),useEffect(()=>{registerShortcuts(api,setState,Object.keys(viewports));},[viewports]),useEffect(()=>{setState({selected:defaultViewport||(viewports[state.selected]?state.selected:responsiveViewport.id),isRotated:defaultOrientation==="landscape"});},[defaultOrientation,defaultViewport]);let{selected,isRotated}=state,item=list.find(i=>i.id===selected)||list.find(i=>i.id===defaultViewport)||list.find(i=>i.default)||responsiveViewport,ref=useRef(),styles=getStyles(ref.current,item.styles,isRotated);return useEffect(()=>{ref.current=styles;},[item]),disable||Object.entries(viewports).length===0?null:React__default.createElement(Fragment,null,React__default.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>React__default.createElement(TooltipLinkList,{links:toLinks(list,item,setState,state,onHide)}),closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},React__default.createElement(IconButtonWithLabel,{key:"viewport",title:"Change the size of the preview",active:isTooltipVisible||!!styles,onDoubleClick:()=>{setState({...state,selected:responsiveViewport.id});}},React__default.createElement(Icons,{icon:"grow"}),styles?React__default.createElement(IconButtonLabel,null,isRotated?`${item.title} (L)`:`${item.title} (P)`):null)),styles?React__default.createElement(ActiveViewportSize,null,React__default.createElement(Global,{styles:{['iframe[data-is-storybook="true"]']:{margin:"auto",transition:"none",position:"relative",border:"1px solid black",boxShadow:"0 0 100px 100vw rgba(0,0,0,0.5)",...styles},[`#${wrapperId}`]:{padding:theme.layoutMargin,alignContent:"center",alignItems:"center",justifyContent:"center",justifyItems:"center",overflow:"auto",display:"grid",gridTemplateColumns:"100%",gridTemplateRows:"100%"}}}),React__default.createElement(ActiveViewportLabel,{title:"Viewport width"},styles.width.replace("px","")),React__default.createElement(IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{setState({...state,isRotated:!isRotated});}},React__default.createElement(Icons,{icon:"transfer"})),React__default.createElement(ActiveViewportLabel,{title:"Viewport height"},styles.height.replace("px",""))):null)}));addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"viewport / media-queries",id:"viewport",type:types.TOOL,match:({viewMode})=>viewMode==="story",render:()=>React.createElement(ViewportTool,null)});});