@storybook/components 6.5.0-alpha.36 → 6.5.0-alpha.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{Color-f9172c71.js → Color-2b2a4f31.js} +1 -1
- package/dist/cjs/{OverlayScrollbars-25a23dba.js → OverlayScrollbars-5d789924.js} +1 -1
- package/dist/cjs/{WithTooltip-f8cbd284.js → WithTooltip-c525aefa.js} +1 -1
- package/dist/cjs/{index-94a6576b.js → index-47d44c7b.js} +8 -8
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{syntaxhighlighter-9a32bb7f.js → syntaxhighlighter-360eaf97.js} +1 -1
- package/dist/esm/{Color-cd5e6096.js → Color-b91a1b1e.js} +1 -1
- package/dist/esm/{OverlayScrollbars-cd350013.js → OverlayScrollbars-9c02ec46.js} +1 -1
- package/dist/esm/{WithTooltip-36887df8.js → WithTooltip-98721669.js} +1 -1
- package/dist/esm/{index-9e51ef47.js → index-37675b63.js} +8 -8
- package/dist/esm/index.js +1 -1
- package/dist/esm/{syntaxhighlighter-8090749e.js → syntaxhighlighter-9779b0b7.js} +1 -1
- package/dist/modern/{Color-c09e6d5f.js → Color-4e20b6d9.js} +1 -1
- package/dist/modern/{OverlayScrollbars-0a74fa63.js → OverlayScrollbars-36a63f08.js} +1 -1
- package/dist/modern/{WithTooltip-2f5ac03a.js → WithTooltip-37c63930.js} +1 -1
- package/dist/modern/{index-aeeaaa15.js → index-1368aba1.js} +8 -8
- package/dist/modern/index.js +1 -1
- package/dist/modern/{syntaxhighlighter-a91e4aac.js → syntaxhighlighter-7918e0a9.js} +1 -1
- package/package.json +4 -4
|
@@ -294,7 +294,7 @@ var curriedOpacify=/*#__PURE__*/curry/* ::<number | string, string, string> */(o
|
|
|
294
294
|
* background: "rgba(255,0,0,0.3)";
|
|
295
295
|
* }
|
|
296
296
|
*/function transparentize(amount,color){if(color==='transparent')return color;var parsedColor=parseToRgb(color);var alpha=typeof parsedColor.alpha==='number'?parsedColor.alpha:1;var colorWithAlpha=_extends({},parsedColor,{alpha:guard(0,1,+(alpha*100-parseFloat(amount)*100).toFixed(2)/100)});return rgba(colorWithAlpha);}// prettier-ignore
|
|
297
|
-
var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default["default"].createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=theming.styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=theming.styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=theming.styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default["default"].createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=React.lazy(()=>Promise.resolve().then(function(){return require('./syntaxhighlighter-
|
|
297
|
+
var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default["default"].createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=theming.styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=theming.styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=theming.styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default["default"].createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=React.lazy(()=>Promise.resolve().then(function(){return require('./syntaxhighlighter-360eaf97.js');}));const SyntaxHighlighter=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=theming.styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
|
|
298
298
|
fontSize:`${theme.typography.size.s2-1}px`,lineHeight:'19px',margin:'25px 0 40px',borderRadius:theme.appBorderRadius,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0','pre.prismjs':{padding:20,background:'inherit'}}));exports.SourceError=void 0;(function(SourceError){SourceError["NO_STORY"]="There\u2019s no story here.";SourceError["SOURCE_UNAVAILABLE"]="Oh no! The source is not available.";})(exports.SourceError||(exports.SourceError={}));const SourceSkeletonWrapper=theming.styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0',margin:'25px 0 40px',padding:'20px 20px 20px 22px'}));const SourceSkeletonPlaceholder=theming.styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:'60%','&:first-child':{margin:0}}));const SourceSkeleton=()=>React__default["default"].createElement(SourceSkeletonWrapper,null,React__default["default"].createElement(SourceSkeletonPlaceholder,null),React__default["default"].createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}),React__default["default"].createElement(SourceSkeletonPlaceholder,{style:{width:'30%'}}),React__default["default"].createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}));/**
|
|
299
299
|
* Syntax-highlighted source code for a component (or anything!)
|
|
300
300
|
*/const Source=props=>{const{isLoading,error}=props;if(isLoading){return React__default["default"].createElement(SourceSkeleton,null);}if(error){return React__default["default"].createElement(EmptyBlock,null,error);}const _a=props,{language,code,dark,format}=_a,rest=__rest(_a,["language","code","dark","format"]);const syntaxHighlighter=React__default["default"].createElement(StyledSyntaxHighlighter,Object.assign({bordered:true,copyable:true,format:format,language:language,className:"docblock-source"},rest),code);if(typeof dark==='undefined'){return syntaxHighlighter;}const overrideTheme=dark?theming.themes.dark:theming.themes.light;return React__default["default"].createElement(theming.ThemeProvider,{theme:theming.convert(overrideTheme)},syntaxHighlighter);};Source.defaultProps={format:false};const isReactChildString=child=>typeof child==='string';const isInlineCodeRegex=/[\n\r]/g;const DefaultCodeBlock=theming.styled.code(({theme})=>({// from reset
|
|
@@ -310,7 +310,7 @@ const icons={mobile:'M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.7
|
|
|
310
310
|
shapeRendering:'inherit',transform:'translate3d(0,0,0)'},({inline})=>inline?{display:'inline-block'}:{display:'block'});Svg.displayName='Svg';const Path=theming.styled.path({fill:'currentColor'});// TODO: if we can resize the 1024 to 20, we can remove the size attributes
|
|
311
311
|
const Icons=React.memo(_a=>{var{icon,symbol}=_a,props=__rest(_a,["icon","symbol"]);return React__default["default"].createElement(Svg,Object.assign({viewBox:"0 0 1024 1024"},props),symbol?React__default["default"].createElement("use",{xlinkHref:`#icon--${symbol}`}):React__default["default"].createElement(Path,{d:icons[icon]}));});const Symbols=React.memo(({icons:keys=Object.keys(icons)})=>React__default["default"].createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{position:'absolute',width:0,height:0},"data-chromatic":"ignore"},keys.map(key=>React__default["default"].createElement("symbol",{id:`icon--${key}`,key:key},React__default["default"].createElement(Path,{d:icons[key]})))));// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
|
|
312
312
|
const LEFT_BUTTON=0;const isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey;const cancelled=(e,cb)=>{if(isPlainLeftClick(e)){e.preventDefault();cb(e);}};const LinkInner=theming.styled.span(({withArrow})=>withArrow?{'> svg:last-of-type':{height:'0.7em',width:'0.7em',marginRight:0,marginLeft:'0.25em',bottom:'auto',verticalAlign:'inherit'}}:{},({containsIcon})=>containsIcon?{svg:{height:'1em',width:'1em',verticalAlign:'middle',position:'relative',bottom:0,marginRight:0}}:{});const A$1=theming.styled.a(({theme})=>({display:'inline-block',transition:'all 150ms ease-out',textDecoration:'none',color:theme.color.secondary,'&:hover, &:focus':{cursor:'pointer',color:curriedDarken$1(0.07,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.07,theme.color.secondary)}},'&:active':{color:curriedDarken$1(0.1,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.1,theme.color.secondary)}},svg:{display:'inline-block',height:'1em',width:'1em',verticalAlign:'text-top',position:'relative',bottom:'-0.125em',marginRight:'0.4em','& path':{fill:theme.color.secondary}}}),({theme,secondary,tertiary})=>{let colors;if(secondary){colors=[theme.color.mediumdark,theme.color.dark,theme.color.darker];}if(tertiary){colors=[theme.color.dark,theme.color.darkest,theme.color.mediumdark];}return colors?{color:colors[0],'svg path':{fill:colors[0]},'&:hover':{color:colors[1],'svg path':{fill:colors[1]}},'&:active':{color:colors[2],'svg path':{fill:colors[2]}}}:{};},({nochrome})=>nochrome?{color:'inherit','&:hover, &:active':{color:'inherit',textDecoration:'underline'}}:{},({theme,inverse})=>inverse?{color:theme.color.lightest,'svg path':{fill:theme.color.lightest},'&:hover':{color:theme.color.lighter,'svg path':{fill:theme.color.lighter}},'&:active':{color:theme.color.light,'svg path':{fill:theme.color.light}}}:{},({isButton})=>isButton?{border:0,borderRadius:0,background:'none',padding:0,fontSize:'inherit'}:{});const Link=_a=>{var{cancel,children,onClick,withArrow,containsIcon,className}=_a,rest=__rest(_a,["cancel","children","onClick","withArrow","containsIcon","className"]);return React__default["default"].createElement(A$1,Object.assign({},rest,{onClick:onClick&&cancel?e=>cancelled(e,onClick):onClick,className:className}),React__default["default"].createElement(LinkInner,{withArrow:withArrow,containsIcon:containsIcon},children,withArrow&&React__default["default"].createElement(Icons,{icon:"arrowright"})));};Link.defaultProps={cancel:true,className:undefined,style:undefined,onClick:undefined,withArrow:false,containsIcon:false};const DocumentWrapper=theming.styled.div(({theme})=>({fontSize:`${theme.typography.size.s2}px`,lineHeight:'1.6',h1:{fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.black},h2:{fontSize:`${theme.typography.size.m2}px`,borderBottom:`1px solid ${theme.appBorderColor}`},h3:{fontSize:`${theme.typography.size.m1}px`},h4:{fontSize:`${theme.typography.size.s3}px`},h5:{fontSize:`${theme.typography.size.s2}px`},h6:{fontSize:`${theme.typography.size.s2}px`,color:theme.color.dark},'pre:not(.prismjs)':{background:'transparent',border:'none',borderRadius:0,padding:0,margin:0},'pre pre, pre.prismjs':{padding:15,margin:0,whiteSpace:'pre-wrap',color:'inherit',fontSize:'13px',lineHeight:'19px'},'pre pre code, pre.prismjs code':{color:'inherit',fontSize:'inherit'},'pre code':{margin:0,padding:0,whiteSpace:'pre',border:'none',background:'transparent'},'pre code, pre tt':{backgroundColor:'transparent',border:'none'},/* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */'body > *:first-of-type':{marginTop:'0 !important'},'body > *:last-child':{marginBottom:'0 !important'},a:{color:theme.color.secondary,textDecoration:'none'},'a.absent':{color:'#cc0000'},'a.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0},'h1, h2, h3, h4, h5, h6':{margin:'20px 0 10px',padding:0,cursor:'text',position:'relative','&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}},'h1:first-of-type + h2':{marginTop:0,paddingTop:0},'p, blockquote, ul, ol, dl, li, table, pre':{margin:'15px 0'},hr:{border:'0 none',borderTop:`1px solid ${theme.appBorderColor}`,height:4,padding:0},'body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type':{marginTop:0,paddingTop:0},'body > h1:first-of-type + h2':{marginTop:0,paddingTop:0},'a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6':{marginTop:0,paddingTop:0},'h1 p, h2 p, h3 p, h4 p, h5 p, h6 p':{marginTop:0},'li p.first':{display:'inline-block'},'ul, ol':{paddingLeft:30,'& :first-of-type':{marginTop:0},'& :last-child':{marginBottom:0}},dl:{padding:0},'dl dt':{fontSize:'14px',fontWeight:'bold',fontStyle:'italic',margin:'0 0 15px',padding:'0 15px','&:first-of-type':{padding:0},'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}},blockquote:{borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}},table:{padding:0,borderCollapse:'collapse','& tr':{borderTop:`1px solid ${theme.appBorderColor}`,backgroundColor:'white',margin:0,padding:0,'& th':{fontWeight:'bold',border:`1px solid ${theme.appBorderColor}`,textAlign:'left',margin:0,padding:'6px 13px'},'& td':{border:`1px solid ${theme.appBorderColor}`,textAlign:'left',margin:0,padding:'6px 13px'},'&:nth-of-type(2n)':{backgroundColor:theme.color.lighter},'& th :first-of-type, & td :first-of-type':{marginTop:0},'& th :last-child, & td :last-child':{marginBottom:0}}},img:{maxWidth:'100%'},'span.frame':{display:'block',overflow:'hidden','& > span':{border:`1px solid ${theme.color.medium}`,display:'block',float:'left',overflow:'hidden',margin:'13px 0 0',padding:7,width:'auto'},'& span img':{display:'block',float:'left'},'& span span':{clear:'both',color:theme.color.darkest,display:'block',padding:'5px 0 0'}},'span.align-center':{display:'block',overflow:'hidden',clear:'both','& > span':{display:'block',overflow:'hidden',margin:'13px auto 0',textAlign:'center'},'& span img':{margin:'0 auto',textAlign:'center'}},'span.align-right':{display:'block',overflow:'hidden',clear:'both','& > span':{display:'block',overflow:'hidden',margin:'13px 0 0',textAlign:'right'},'& span img':{margin:0,textAlign:'right'}},'span.float-left':{display:'block',marginRight:13,overflow:'hidden',float:'left','& span':{margin:'13px 0 0'}},'span.float-right':{display:'block',marginLeft:13,overflow:'hidden',float:'right','& > span':{display:'block',overflow:'hidden',margin:'13px auto 0',textAlign:'right'}},'code, tt':{margin:'0 2px',padding:'0 5px',whiteSpace:'nowrap',border:`1px solid ${theme.color.mediumlight}`,backgroundColor:theme.color.lighter,borderRadius:3,color:theme.base==='dark'&&theme.color.darkest}}));const Container$1=theming.styled.div(({theme})=>({position:'absolute',bottom:0,right:0,maxWidth:'100%',display:'flex',background:theme.background.content,zIndex:1}));const ActionButton=theming.styled.button(({theme})=>({margin:0,border:'0 none',padding:'4px 10px',cursor:'pointer',display:'flex',alignItems:'center',color:theme.color.defaultText,background:theme.background.content,fontSize:12,lineHeight:'16px',fontFamily:theme.typography.fonts.base,fontWeight:theme.typography.weight.bold,borderTop:`1px solid ${theme.appBorderColor}`,borderLeft:`1px solid ${theme.appBorderColor}`,marginLeft:-1,borderRadius:`4px 0 0 0`,'&:not(:last-child)':{borderRight:`1px solid ${theme.appBorderColor}`},'& + *':{borderLeft:`1px solid ${theme.appBorderColor}`,borderRadius:0},'&:focus':{boxShadow:`${theme.color.secondary} 0 -3px 0 0 inset`,outline:'0 none'}}),({disabled})=>disabled&&{cursor:'not-allowed',opacity:0.5});ActionButton.displayName='ActionButton';const ActionBar=_a=>{var{actionItems}=_a,props=__rest(_a,["actionItems"]);return React__default["default"].createElement(Container$1,Object.assign({},props),actionItems.map(({title,className,onClick,disabled},index)=>// eslint-disable-next-line react/no-array-index-key
|
|
313
|
-
React__default["default"].createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=theming.styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${theming.ignoreSsrWarning}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${theming.ignoreSsrWarning}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){case!!(outer&&col):{return{marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};}case!!(outer&&row):{return{marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};}default:{return{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default["default"].createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=theming.styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=theming.styled.div();const Message$1=theming.styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=React.Children.toArray(children);return React__default["default"].createElement(Message$1,Object.assign({},props),React__default["default"].createElement(Title$3,null,title),desc&&React__default["default"].createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=React.lazy(()=>Promise.resolve().then(function(){return require('./GlobalScrollAreaStyles-ff4bd929.js');}));const OverlayScrollbars=React.lazy(()=>Promise.resolve().then(function(){return require('./OverlayScrollbars-
|
|
313
|
+
React__default["default"].createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=theming.styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${theming.ignoreSsrWarning}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${theming.ignoreSsrWarning}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){case!!(outer&&col):{return{marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};}case!!(outer&&row):{return{marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};}default:{return{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default["default"].createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=theming.styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=theming.styled.div();const Message$1=theming.styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=React.Children.toArray(children);return React__default["default"].createElement(Message$1,Object.assign({},props),React__default["default"].createElement(Title$3,null,title),desc&&React__default["default"].createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=React.lazy(()=>Promise.resolve().then(function(){return require('./GlobalScrollAreaStyles-ff4bd929.js');}));const OverlayScrollbars=React.lazy(()=>Promise.resolve().then(function(){return require('./OverlayScrollbars-5d789924.js');}));const Scroller=_a=>{var props=__rest(_a,["horizontal","vertical"]);return React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",Object.assign({},props))},React__default["default"].createElement(GlobalScrollAreaStyles,null),React__default["default"].createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};const ScrollArea=theming.styled(Scroller)(({vertical})=>!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'},({horizontal})=>!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getAugmentedNamespace(n){if(n.__esModule)return n;var a=Object.defineProperty({},'__esModule',{value:true});Object.keys(n).forEach(function(k){var d=Object.getOwnPropertyDescriptor(n,k);Object.defineProperty(a,k,d.get?d:{enumerable:true,get:function(){return n[k];}});});return a;}function commonjsRequire(path){throw new Error('Could not dynamically require "'+path+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;const{window:globalWindow$2}=window_1;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}const ZoomElementWrapper=theming.styled.div(({scale=1,height})=>browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:`scale(${1/scale})`});function ZoomElement({scale,children}){const componentWrapperRef=React.useRef(null);const[height,setHeight]=React.useState(0);React.useEffect(()=>{if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default["default"].createElement(ZoomElementWrapper,{scale:scale,height:height},React__default["default"].createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}class ZoomIFrame extends React.Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){const{scale,active}=this.props;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
|
|
314
314
|
// never update this component, it will cause the iframe to refresh
|
|
315
315
|
return false;}setIframeInnerZoom(scale){try{if(browserSupportsCssZoom()){Object.assign(this.iframe.contentDocument.body.style,{zoom:1/scale});}else{Object.assign(this.iframe.contentDocument.body.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}}catch(e){this.setIframeZoom(scale);}}setIframeZoom(scale){Object.assign(this.iframe.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}render(){const{children}=this.props;return children;}}const Zoom$1={Element:ZoomElement,IFrame:ZoomIFrame};const ButtonWrapper=theming.styled.button(({small,theme})=>({border:0,borderRadius:'3em',cursor:'pointer',display:'inline-block',overflow:'hidden',padding:small?'8px 16px':'13px 20px',position:'relative',textAlign:'center',textDecoration:'none',transition:'all 150ms ease-out',transform:'translate3d(0,0,0)',verticalAlign:'top',whiteSpace:'nowrap',userSelect:'none',opacity:1,margin:0,background:'transparent',fontSize:`${small?theme.typography.size.s1:theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:'1',svg:{display:'inline-block',height:small?14:16,width:small?14:16,verticalAlign:'top',marginRight:small?4:6,marginTop:small?-1:-2,marginBottom:small?-1:-2,/* Necessary for js mouse events to not glitch out when hovering on svgs */pointerEvents:'none',path:{fill:'currentColor'}}}),({disabled})=>disabled?{cursor:'not-allowed !important',opacity:0.5,'&:hover':{transform:'none'}}:{},({containsIcon,small})=>containsIcon?Object.assign({svg:{display:'block',margin:0}},small?{padding:9}:{padding:12}):{},({theme,primary,secondary,gray})=>{let color;if(gray){color=theme.color.medium;}else if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return color?{background:color,color:gray?theme.color.darkest:theme.color.lightest,'&:hover':{background:curriedDarken$1(0.05,color)},'&:active':{boxShadow:'rgba(0, 0, 0, 0.1) 0 0 0 3em inset'},'&:focus':{boxShadow:`${rgba(color,1)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${rgba(color,0.2)} 0 8px 18px 0px`}}:{};},({theme,tertiary,inForm,small})=>tertiary?Object.assign(Object.assign({background:theme.base==='light'?curriedDarken$1(0.02,theme.input.background):curriedLighten$1(0.02,theme.input.background),color:theme.input.color,boxShadow:`${theme.input.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius},inForm&&small?{padding:'10px 16px'}:{}),{'&:hover':Object.assign({background:theme.base==='light'?curriedDarken$1(0.05,theme.input.background):curriedLighten$1(0.05,theme.input.background)},inForm?{}:{boxShadow:'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'}),'&:active':{background:theme.input.background},'&:focus':{boxShadow:`${rgba(theme.color.secondary,1)} 0 0 0 1px inset`,outline:'none'}}):{},({theme,outline})=>outline?{boxShadow:`${curriedTransparentize$1(0.8,theme.color.defaultText)} 0 0 0 1px inset`,color:curriedTransparentize$1(0.3,theme.color.defaultText),background:'transparent','&:hover, &:focus':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 1px inset`,outline:'none'},'&:active':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 2px inset`,color:curriedTransparentize$1(0,theme.color.defaultText)}}:{},({theme,outline,primary})=>{const color=theme.color.primary;return outline&&primary?{boxShadow:`${color} 0 0 0 1px inset`,color,'svg path':{fill:color},'&:hover':{boxShadow:`${color} 0 0 0 1px inset`,background:'transparent'},'&:active':{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},'&:focus':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};},({theme,outline,primary,secondary})=>{let color;if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return outline&&color?{boxShadow:`${color} 0 0 0 1px inset`,color,'svg path':{fill:color},'&:hover':{boxShadow:`${color} 0 0 0 1px inset`,background:'transparent'},'&:active':{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},'&:focus':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};});const ButtonLink=ButtonWrapper.withComponent('a');const Button$2=Object.assign(React.forwardRef((_a,ref)=>{var{isLink,children}=_a,props=__rest(_a,["isLink","children"]);if(isLink){return React__default["default"].createElement(ButtonLink,Object.assign({},props,{ref:ref}),children);}return React__default["default"].createElement(ButtonWrapper,Object.assign({},props,{ref:ref}),children);}),{defaultProps:{isLink:false}});const Wrapper$7=theming.styled.label(({theme})=>({display:'flex',borderBottom:`1px solid ${theme.appBorderColor}`,margin:'0 15px',padding:'8px 0','&:last-child':{marginBottom:'3rem'}}));const Label$4=theming.styled.span(({theme})=>({minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:'flex',justifyContent:'flex-start',alignItems:'center',lineHeight:'16px'}));const Field=_a=>{var{label,children}=_a,props=__rest(_a,["label","children"]);return React__default["default"].createElement(Wrapper$7,Object.assign({},props),label?React__default["default"].createElement(Label$4,null,React__default["default"].createElement("span",null,label)):null,children);};Field.defaultProps={label:undefined};function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}var index$1=React.useLayoutEffect;var useLatest=function useLatest(value){var ref=React.useRef(value);index$1(function(){ref.current=value;});return ref;};var updateRef=function updateRef(ref,value){if(typeof ref==='function'){ref(value);return;}ref.current=value;};var useComposedRef=function useComposedRef(libRef,userRef){var prevUserRef=React.useRef();return React.useCallback(function(instance){libRef.current=instance;if(prevUserRef.current){updateRef(prevUserRef.current,null);}prevUserRef.current=userRef;if(!userRef){return;}updateRef(userRef,instance);},[userRef]);};var HIDDEN_TEXTAREA_STYLE={'min-height':'0','max-height':'none',height:'0',visibility:'hidden',overflow:'hidden',position:'absolute','z-index':'-1000',top:'0',right:'0'};var forceHiddenStyles=function forceHiddenStyles(node){Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key){node.style.setProperty(key,HIDDEN_TEXTAREA_STYLE[key],'important');});};// export type CalculatedNodeHeights = [height: number, rowHeight: number];
|
|
316
316
|
// https://github.com/microsoft/TypeScript/issues/28259
|
|
@@ -325,7 +325,7 @@ if(boxSizing===''){return null;}// IE (Edge has already correct behaviour) retur
|
|
|
325
325
|
if(isIE&&boxSizing==='border-box'){sizingStyle.width=parseFloat(sizingStyle.width)+parseFloat(sizingStyle.borderRightWidth)+parseFloat(sizingStyle.borderLeftWidth)+parseFloat(sizingStyle.paddingRight)+parseFloat(sizingStyle.paddingLeft)+'px';}var paddingSize=parseFloat(sizingStyle.paddingBottom)+parseFloat(sizingStyle.paddingTop);var borderSize=parseFloat(sizingStyle.borderBottomWidth)+parseFloat(sizingStyle.borderTopWidth);return{sizingStyle:sizingStyle,paddingSize:paddingSize,borderSize:borderSize};};var useWindowResizeListener=function useWindowResizeListener(listener){var latestListener=useLatest(listener);React.useLayoutEffect(function(){var handler=function handler(event){latestListener.current(event);};window.addEventListener('resize',handler);return function(){window.removeEventListener('resize',handler);};},[]);};var TextareaAutosize=function TextareaAutosize(_ref,userRef){var cacheMeasurements=_ref.cacheMeasurements,maxRows=_ref.maxRows,minRows=_ref.minRows,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop$2:_ref$onChange,_ref$onHeightChange=_ref.onHeightChange,onHeightChange=_ref$onHeightChange===void 0?noop$2:_ref$onHeightChange,props=_objectWithoutPropertiesLoose(_ref,["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"]);if(process.env.NODE_ENV!=='production'&&props.style){if('maxHeight'in props.style){throw new Error('Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.');}if('minHeight'in props.style){throw new Error('Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.');}}var isControlled=props.value!==undefined;var libRef=React.useRef(null);var ref=useComposedRef(libRef,userRef);var heightRef=React.useRef(0);var measurementsCacheRef=React.useRef();var resizeTextarea=function resizeTextarea(){var node=libRef.current;var nodeSizingData=cacheMeasurements&&measurementsCacheRef.current?measurementsCacheRef.current:getSizingData(node);if(!nodeSizingData){return;}measurementsCacheRef.current=nodeSizingData;var _calculateNodeHeight=calculateNodeHeight(nodeSizingData,node.value||node.placeholder||'x',minRows,maxRows),height=_calculateNodeHeight[0],rowHeight=_calculateNodeHeight[1];if(heightRef.current!==height){heightRef.current=height;node.style.setProperty('height',height+"px",'important');onHeightChange(height,{rowHeight:rowHeight});}};var handleChange=function handleChange(event){if(!isControlled){resizeTextarea();}onChange(event);};{React.useLayoutEffect(resizeTextarea);useWindowResizeListener(resizeTextarea);}return/*#__PURE__*/React.createElement("textarea",_extends({},props,{onChange:handleChange,ref:ref}));};var index=/* #__PURE__ */React.forwardRef(TextareaAutosize);var TextareaAutoResize=index;const styleResets$1={// resets
|
|
326
326
|
appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};const styles=({theme})=>Object.assign(Object.assign({},styleResets$1),{transition:'box-shadow 200ms ease-out, opacity 200ms ease-out',color:theme.input.color||'inherit',background:theme.input.background,boxShadow:`${theme.input.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius,fontSize:theme.typography.size.s2-1,lineHeight:'20px',padding:'6px 10px','&:focus':{boxShadow:`${theme.color.secondary} 0 0 0 1px inset`,outline:'none'},'&[disabled]':{cursor:'not-allowed',opacity:0.5},'&:-webkit-autofill':{WebkitBoxShadow:`0 0 0 3em ${theme.color.lightest} inset`},'::placeholder':{color:theme.color.mediumdark}});const sizes=({size})=>{switch(size){case'100%':{return{width:'100%'};}case'flex':{return{flex:1};}case'auto':default:{return{display:'inline'};}}};const alignment=({align})=>{switch(align){case'end':{return{textAlign:'right'};}case'center':{return{textAlign:'center'};}case'start':default:{return{textAlign:'left'};}}};const validation=({valid,theme})=>{switch(valid){case'valid':{return{boxShadow:`${theme.color.positive} 0 0 0 1px inset !important`};}case'error':{return{boxShadow:`${theme.color.negative} 0 0 0 1px inset !important`};}case'warn':{return{boxShadow:`${theme.color.warning} 0 0 0 1px inset`};}case undefined:case null:default:{return{};}}};const Input$1=Object.assign(theming.styled(React.forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default["default"].createElement("input",Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:'Input'});const Select=Object.assign(theming.styled(React.forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default["default"].createElement("select",Object.assign({},props,{ref:ref}));}))(styles,sizes,validation,{height:32,userSelect:'none',paddingRight:20,appearance:'menulist'}),{displayName:'Select'});const Textarea=Object.assign(theming.styled(React.forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default["default"].createElement(TextareaAutoResize,Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,({height=400})=>({overflow:'visible',maxHeight:height})),{displayName:'Textarea'});const ButtonStyled=theming.styled(React.forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default["default"].createElement(Button$2,Object.assign({},props,{ref:ref}));}))(sizes,validation,{// Custom styling for color widget nested in buttons
|
|
327
327
|
userSelect:'none',overflow:'visible',zIndex:2,// overrides the default hover from Button
|
|
328
|
-
'&:hover':{transform:'none'}});const Button$1=Object.assign(React.forwardRef((props,ref)=>React__default["default"].createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(theming.styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=React.lazy(()=>Promise.resolve().then(function(){return require('./WithTooltip-
|
|
328
|
+
'&:hover':{transform:'none'}});const Button$1=Object.assign(React.forwardRef((props,ref)=>React__default["default"].createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(theming.styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=React.lazy(()=>Promise.resolve().then(function(){return require('./WithTooltip-c525aefa.js');}).then(mod=>({default:mod.WithTooltip})));const WithTooltip=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazyWithTooltip,Object.assign({},props)));const LazyWithTooltipPure=React.lazy(()=>Promise.resolve().then(function(){return require('./WithTooltip-c525aefa.js');}).then(mod=>({default:mod.WithTooltipPure})));const WithTooltipPure=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazyWithTooltipPure,Object.assign({},props)));const Title$2=theming.styled.div(({theme})=>({fontWeight:theme.typography.weight.black}));const Desc=theming.styled.span();const Links=theming.styled.div(({theme})=>({marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}}));const Message=theming.styled.div(({theme})=>({color:theme.textColor,lineHeight:'18px'}));const MessageWrapper=theming.styled.div({padding:15,width:280,boxSizing:'border-box'});const TooltipMessage=({title,desc,links})=>{return React__default["default"].createElement(MessageWrapper,null,React__default["default"].createElement(Message,null,title&&React__default["default"].createElement(Title$2,null,title),desc&&React__default["default"].createElement(Desc,null,desc)),links&&React__default["default"].createElement(Links,null,links.map(_a=>{var{title:linkTitle}=_a,other=__rest(_a,["title"]);return React__default["default"].createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};const Note=theming.styled.div(({theme})=>({padding:'2px 6px',lineHeight:'16px',fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:'0 0 5px 0 rgba(0, 0, 0, 0.3)',borderRadius:4,whiteSpace:'nowrap',pointerEvents:'none',zIndex:-1,background:theme.base==='light'?'rgba(60, 60, 60, 0.9)':'rgba(20, 20, 20, 0.85)',margin:6}));const TooltipNote=_a=>{var{note}=_a,props=__rest(_a,["note"]);return React__default["default"].createElement(Note,Object.assign({},props),note);};var memoizerific={exports:{}};(function(module,exports){(function(f){{module.exports=f();}})(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof commonjsRequire=="function"&&commonjsRequire;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f;}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e);},l,l.exports,e,t,n,r);}return n[o].exports;}var i=typeof commonjsRequire=="function"&&commonjsRequire;for(var o=0;o<r.length;o++)s(r[o]);return s;}({1:[function(_dereq_,module,exports){module.exports=function(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=_dereq_('./similar');return new Similar();}else{return new Map();}};},{"./similar":2}],2:[function(_dereq_,module,exports){function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
|
|
329
329
|
Similar.prototype.has=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return true;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return true;}return false;};Similar.prototype.forEach=function(callback,thisArg){var i;for(i=0;i<this.size;i++){callback.call(thisArg||this,this.list[i].val,this.list[i].key,this);}};Similar.prototype.indexOf=function(key){var i;for(i=0;i<this.size;i++){if(this.isEqual(this.list[i].key,key)){return i;}}return-1;};// check if the numbers are equal, or whether they are both precisely NaN (isNaN returns true for all non-numbers)
|
|
330
330
|
Similar.prototype.isEqual=function(val1,val2){return val1===val2||val1!==val1&&val2!==val2;};module.exports=Similar;},{}],3:[function(_dereq_,module,exports){var MapOrSimilar=_dereq_('map-or-similar');module.exports=function(limit){var cache=new MapOrSimilar(undefined==='true'),lru=[];return function(fn){var memoizerific=function(){var currentCache=cache,newMap,fnResult,argsLengthMinusOne=arguments.length-1,lruPath=Array(argsLengthMinusOne+1),isMemoized=true,i;if((memoizerific.numArgs||memoizerific.numArgs===0)&&memoizerific.numArgs!==argsLengthMinusOne+1){throw new Error('Memoizerific functions should always be called with the same number of arguments');}// loop through each argument to traverse the map tree
|
|
331
331
|
for(i=0;i<argsLengthMinusOne;i++){lruPath[i]={cacheItem:currentCache,arg:arguments[i]};// climb through the hierarchical map tree until the second-last argument has been found, or an argument is missing.
|
|
@@ -438,8 +438,8 @@ var keys=[];if(parent){// If we aren't using plain objects, optionally prefix ke
|
|
|
438
438
|
if(!options.plainObjects&&has.call(Object.prototype,parent)){if(!options.allowPrototypes){return;}}keys.push(parent);}// Loop through children appending to the array until we hit depth
|
|
439
439
|
var i=0;while(options.depth>0&&(segment=child.exec(key))!==null&&i<options.depth){i+=1;if(!options.plainObjects&&has.call(Object.prototype,segment[1].slice(1,-1))){if(!options.allowPrototypes){return;}}keys.push(segment[1]);}// If there's a remainder, just add whatever is left
|
|
440
440
|
if(segment){keys.push('['+key.slice(segment.index)+']');}return parseObject(keys,val,options,valuesParsed);};var normalizeParseOptions=function normalizeParseOptions(opts){if(!opts){return defaults;}if(opts.decoder!==null&&opts.decoder!==undefined&&typeof opts.decoder!=='function'){throw new TypeError('Decoder has to be a function.');}if(typeof opts.charset!=='undefined'&&opts.charset!=='utf-8'&&opts.charset!=='iso-8859-1'){throw new TypeError('The charset option must be either utf-8, iso-8859-1, or undefined');}var charset=typeof opts.charset==='undefined'?defaults.charset:opts.charset;return{allowDots:typeof opts.allowDots==='undefined'?defaults.allowDots:!!opts.allowDots,allowPrototypes:typeof opts.allowPrototypes==='boolean'?opts.allowPrototypes:defaults.allowPrototypes,allowSparse:typeof opts.allowSparse==='boolean'?opts.allowSparse:defaults.allowSparse,arrayLimit:typeof opts.arrayLimit==='number'?opts.arrayLimit:defaults.arrayLimit,charset:charset,charsetSentinel:typeof opts.charsetSentinel==='boolean'?opts.charsetSentinel:defaults.charsetSentinel,comma:typeof opts.comma==='boolean'?opts.comma:defaults.comma,decoder:typeof opts.decoder==='function'?opts.decoder:defaults.decoder,delimiter:typeof opts.delimiter==='string'||utils.isRegExp(opts.delimiter)?opts.delimiter:defaults.delimiter,// eslint-disable-next-line no-implicit-coercion, no-extra-parens
|
|
441
|
-
depth:typeof opts.depth==='number'||opts.depth===false?+opts.depth:defaults.depth,ignoreQueryPrefix:opts.ignoreQueryPrefix===true,interpretNumericEntities:typeof opts.interpretNumericEntities==='boolean'?opts.interpretNumericEntities:defaults.interpretNumericEntities,parameterLimit:typeof opts.parameterLimit==='number'?opts.parameterLimit:defaults.parameterLimit,parseArrays:opts.parseArrays!==false,plainObjects:typeof opts.plainObjects==='boolean'?opts.plainObjects:defaults.plainObjects,strictNullHandling:typeof opts.strictNullHandling==='boolean'?opts.strictNullHandling:defaults.strictNullHandling};};var parse$
|
|
442
|
-
var keys=Object.keys(tempObj);for(var i=0;i<keys.length;++i){var key=keys[i];var newObj=parseKeys(key,tempObj[key],options,typeof str==='string');obj=utils.merge(obj,newObj,options);}if(options.allowSparse===true){return obj;}return utils.compact(obj);};var stringify=stringify_1;var parse$
|
|
441
|
+
depth:typeof opts.depth==='number'||opts.depth===false?+opts.depth:defaults.depth,ignoreQueryPrefix:opts.ignoreQueryPrefix===true,interpretNumericEntities:typeof opts.interpretNumericEntities==='boolean'?opts.interpretNumericEntities:defaults.interpretNumericEntities,parameterLimit:typeof opts.parameterLimit==='number'?opts.parameterLimit:defaults.parameterLimit,parseArrays:opts.parseArrays!==false,plainObjects:typeof opts.plainObjects==='boolean'?opts.plainObjects:defaults.plainObjects,strictNullHandling:typeof opts.strictNullHandling==='boolean'?opts.strictNullHandling:defaults.strictNullHandling};};var parse$4=function(str,opts){var options=normalizeParseOptions(opts);if(str===''||str===null||typeof str==='undefined'){return options.plainObjects?Object.create(null):{};}var tempObj=typeof str==='string'?parseValues(str,options):str;var obj=options.plainObjects?Object.create(null):{};// Iterate over the keys and setup the new object
|
|
442
|
+
var keys=Object.keys(tempObj);for(var i=0;i<keys.length;++i){var key=keys[i];var newObj=parseKeys(key,tempObj[key],options,typeof str==='string');obj=utils.merge(obj,newObj,options);}if(options.allowSparse===true){return obj;}return utils.compact(obj);};var stringify=stringify_1;var parse$3=parse$4;var formats=formats$3;var lib={formats:formats,parse:parse$3,stringify:stringify};const getStoryHref=(baseUrl,storyId,additionalParams={})=>{const[url,paramsStr]=baseUrl.split('?');const params=paramsStr?Object.assign(Object.assign(Object.assign({},lib.parse(paramsStr)),additionalParams),{id:storyId}):Object.assign(Object.assign({},additionalParams),{id:storyId});return`${url}${lib.stringify(params,{addQueryPrefix:true,encode:false})}`;};const Zoom=({zoom,resetZoom})=>React__default["default"].createElement(React__default["default"].Fragment,null,React__default["default"].createElement(IconButton,{key:"zoomin",onClick:e=>{e.preventDefault();zoom(0.8);},title:"Zoom in"},React__default["default"].createElement(Icons,{icon:"zoom"})),React__default["default"].createElement(IconButton,{key:"zoomout",onClick:e=>{e.preventDefault();zoom(1.25);},title:"Zoom out"},React__default["default"].createElement(Icons,{icon:"zoomout"})),React__default["default"].createElement(IconButton,{key:"zoomreset",onClick:e=>{e.preventDefault();resetZoom();},title:"Reset zoom"},React__default["default"].createElement(Icons,{icon:"zoomreset"})));const Eject=({baseUrl,storyId})=>React__default["default"].createElement(IconButton,{key:"opener",href:getStoryHref(baseUrl,storyId),target:"_blank",title:"Open canvas in new tab"},React__default["default"].createElement(Icons,{icon:"share"}));const Bar=theming.styled(FlexBar)({position:'absolute',left:0,right:0,top:0,transition:'transform .2s linear'});const Toolbar=_a=>{var{isLoading,storyId,baseUrl,zoom,resetZoom}=_a,rest=__rest(_a,["isLoading","storyId","baseUrl","zoom","resetZoom"]);return React__default["default"].createElement(Bar,Object.assign({},rest),React__default["default"].createElement(React.Fragment,{key:"left"},isLoading?[1,2,3].map(key=>React__default["default"].createElement(IconButtonSkeleton,{key:key})):React__default["default"].createElement(Zoom,Object.assign({},{zoom,resetZoom}))),React__default["default"].createElement(React.Fragment,{key:"right"},storyId&&(isLoading?React__default["default"].createElement(IconButtonSkeleton,null):React__default["default"].createElement(Eject,Object.assign({},{storyId,baseUrl})))));};const ZoomContext=React.createContext({scale:1});const{window:globalWindow$1}=window_1;class IFrame extends React.Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{id}=this.props;this.iframe=globalWindow$1.document.getElementById(id);}shouldComponentUpdate(nextProps){const{scale}=nextProps;// eslint-disable-next-line react/destructuring-assignment
|
|
443
443
|
if(scale!==this.props.scale){this.setIframeBodyStyle({width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}return false;}setIframeBodyStyle(style){return Object.assign(this.iframe.contentDocument.body.style,style);}render(){const _a=this.props,{id,title,src,allowFullScreen,scale}=_a,rest=__rest(_a,["id","title","src","allowFullScreen","scale"]);return React__default["default"].createElement("iframe",Object.assign({id:id,title:title,src:src,allowFullScreen:allowFullScreen,// @ts-ignore
|
|
444
444
|
loading:"lazy"},rest));}}const rotate360=theming.keyframes`
|
|
445
445
|
from {
|
|
@@ -466,7 +466,7 @@ if(CONFIG_TYPE!=='DEVELOPMENT'||!EventSource)return undefined;const eventSource=
|
|
|
466
466
|
* items. The preview also shows the source for the component
|
|
467
467
|
* as a drop-down.
|
|
468
468
|
*/const Preview=_a=>{var{isLoading,isColumn,columns,children,withSource,withToolbar=false,isExpanded=false,additionalActions,className}=_a,props=__rest(_a,["isLoading","isColumn","columns","children","withSource","withToolbar","isExpanded","additionalActions","className"]);const[expanded,setExpanded]=React.useState(isExpanded);const{source,actionItem}=getSource(withSource,expanded,setExpanded);const[scale,setScale]=React.useState(1);const previewClasses=[className].concat(['sbdocs','sbdocs-preview']);const defaultActionItems=withSource?[actionItem]:[];const[additionalActionItems,setAdditionalActionItems]=React.useState(additionalActions?[...additionalActions]:[]);const actionItems=[...defaultActionItems,...additionalActionItems];// @ts-ignore
|
|
469
|
-
const layout=getLayout(React.Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=React.useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield Promise.resolve().then(function(){return require('./syntaxhighlighter-
|
|
469
|
+
const layout=getLayout(React.Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=React.useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield Promise.resolve().then(function(){return require('./syntaxhighlighter-360eaf97.js');});createCopyToClipboardFunction();}),[]);const onCopyCapture=e=>{e.preventDefault();if(additionalActionItems.filter(item=>item.title==='Copied').length===0){copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:'Copied',onClick:()=>{}}]);globalWindow.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=='Copied')),1500);});}};return React__default["default"].createElement(PreviewContainer,Object.assign({},{withSource,withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default["default"].createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default["default"].createElement(ZoomContext.Provider,{value:{scale}},React__default["default"].createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default["default"].createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default["default"].createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
|
|
470
470
|
children.map((child,i)=>React__default["default"].createElement("div",{key:i},child)):React__default["default"].createElement("div",null,children))),React__default["default"].createElement(ActionBar,{actionItems:actionItems}))),withSource&&expanded&&source);};const StyledPreview=theming.styled(Preview)(()=>({'.docs-story':{paddingTop:32,paddingBottom:40}}));const PreviewSkeleton=()=>React__default["default"].createElement(StyledPreview,{isLoading:true,withToolbar:true},React__default["default"].createElement(StorySkeleton,null));/**
|
|
471
471
|
* A specialized version of `_.map` for arrays without support for iteratee
|
|
472
472
|
* shorthands.
|
|
@@ -1755,7 +1755,7 @@ const summaryAsString=typeof summary.toString==='function'?summary.toString():su
|
|
|
1755
1755
|
* Removes spaces because spaces are not allowed in ID attributes
|
|
1756
1756
|
* @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
|
|
1757
1757
|
* @example getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
|
|
1758
|
-
*/const getControlSetterButtonId=value=>`set-${value.replace(/\s+/g,'-')}`;const Label$3=theming.styled.label(({theme})=>({lineHeight:'18px',alignItems:'center',marginBottom:8,display:'inline-block',position:'relative',whiteSpace:'nowrap',background:`${curriedOpacify$1(0.05,theme.appBorderColor)}`,borderRadius:'3em',padding:1,input:{appearance:'none',width:'100%',height:'100%',position:'absolute',left:0,top:0,margin:0,padding:0,border:'none',background:'transparent',cursor:'pointer',borderRadius:'3em','&:focus':{outline:'none',boxShadow:`${theme.color.secondary} 0 0 0 1px inset !important`}},span:{textAlign:'center',fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:'1',cursor:'pointer',display:'inline-block',padding:'7px 15px',transition:'all 100ms ease-out',userSelect:'none',borderRadius:'3em',color:curriedTransparentize$1(0.4,theme.color.defaultText),background:'transparent','&:hover':{boxShadow:`${curriedOpacify$1(0.3,theme.appBorderColor)} 0 0 0 1px inset`},'&:active':{boxShadow:`${curriedOpacify$1(0.05,theme.appBorderColor)} 0 0 0 2px inset`,color:curriedOpacify$1(1,theme.appBorderColor)},'&:first-of-type':{paddingRight:8},'&:last-of-type':{paddingLeft:8}},'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type':{background:theme.background.app,boxShadow:`${curriedOpacify$1(0.1,theme.appBorderColor)} 0 0 2px`,color:theme.color.defaultText,padding:'7px 15px'}}));const BooleanControl=({name,value,onChange,onBlur,onFocus})=>{const onSetFalse=React.useCallback(()=>onChange(false),[onChange]);if(value===undefined){return React__default["default"].createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onSetFalse},"Set boolean");}return React__default["default"].createElement(Label$3,{htmlFor:name,title:
|
|
1758
|
+
*/const getControlSetterButtonId=value=>`set-${value.replace(/\s+/g,'-')}`;const Label$3=theming.styled.label(({theme})=>({lineHeight:'18px',alignItems:'center',marginBottom:8,display:'inline-block',position:'relative',whiteSpace:'nowrap',background:`${curriedOpacify$1(0.05,theme.appBorderColor)}`,borderRadius:'3em',padding:1,input:{appearance:'none',width:'100%',height:'100%',position:'absolute',left:0,top:0,margin:0,padding:0,border:'none',background:'transparent',cursor:'pointer',borderRadius:'3em','&:focus':{outline:'none',boxShadow:`${theme.color.secondary} 0 0 0 1px inset !important`}},span:{textAlign:'center',fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:'1',cursor:'pointer',display:'inline-block',padding:'7px 15px',transition:'all 100ms ease-out',userSelect:'none',borderRadius:'3em',color:curriedTransparentize$1(0.4,theme.color.defaultText),background:'transparent','&:hover':{boxShadow:`${curriedOpacify$1(0.3,theme.appBorderColor)} 0 0 0 1px inset`},'&:active':{boxShadow:`${curriedOpacify$1(0.05,theme.appBorderColor)} 0 0 0 2px inset`,color:curriedOpacify$1(1,theme.appBorderColor)},'&:first-of-type':{paddingRight:8},'&:last-of-type':{paddingLeft:8}},'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type':{background:theme.background.app,boxShadow:`${curriedOpacify$1(0.1,theme.appBorderColor)} 0 0 2px`,color:theme.color.defaultText,padding:'7px 15px'}}));const parse$2=value=>value==='true';const BooleanControl=({name,value,onChange,onBlur,onFocus})=>{const onSetFalse=React.useCallback(()=>onChange(false),[onChange]);if(value===undefined){return React__default["default"].createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onSetFalse},"Set boolean");}const parsedValue=typeof value==='string'?parse$2(value):value;return React__default["default"].createElement(Label$3,{htmlFor:name,title:parsedValue?'Change to false':'Change to true'},React__default["default"].createElement("input",Object.assign({id:getControlId(name),type:"checkbox",onChange:e=>onChange(e.target.checked),checked:parsedValue},{name,onBlur,onFocus})),React__default["default"].createElement("span",null,"False"),React__default["default"].createElement("span",null,"True"));};const parseDate=value=>{const[year,month,day]=value.split('-');const result=new Date();result.setFullYear(parseInt(year,10),parseInt(month,10)-1,parseInt(day,10));return result;};const parseTime=value=>{const[hours,minutes]=value.split(':');const result=new Date();result.setHours(parseInt(hours,10));result.setMinutes(parseInt(minutes,10));return result;};const formatDate=value=>{const date=new Date(value);const year=`000${date.getFullYear()}`.slice(-4);const month=`0${date.getMonth()+1}`.slice(-2);const day=`0${date.getDate()}`.slice(-2);return`${year}-${month}-${day}`;};const formatTime=value=>{const date=new Date(value);const hours=`0${date.getHours()}`.slice(-2);const minutes=`0${date.getMinutes()}`.slice(-2);return`${hours}:${minutes}`;};const FlexSpaced=theming.styled.div(({theme})=>({flex:1,display:'flex',input:{marginLeft:10,flex:1,height:32,'&::-webkit-calendar-picker-indicator':{opacity:0.5,height:12,filter:theme.base==='light'?undefined:'invert(1)'}},'input:first-of-type':{marginLeft:0}}));const DateControl=({name,value,onChange,onFocus,onBlur})=>{const[valid,setValid]=React.useState(true);const dateRef=React.useRef();const timeRef=React.useRef();React.useEffect(()=>{if(valid!==false){if(dateRef&&dateRef.current){dateRef.current.value=formatDate(value);}if(timeRef&&timeRef.current){timeRef.current.value=formatTime(value);}}},[value]);const onDateChange=e=>{const parsed=parseDate(e.target.value);const result=new Date(value);result.setFullYear(parsed.getFullYear(),parsed.getMonth(),parsed.getDate());const time=result.getTime();if(time)onChange(time);setValid(!!time);};const onTimeChange=e=>{const parsed=parseTime(e.target.value);const result=new Date(value);result.setHours(parsed.getHours());result.setMinutes(parsed.getMinutes());const time=result.getTime();if(time)onChange(time);setValid(!!time);};const controlId=getControlId(name);return React__default["default"].createElement(FlexSpaced,null,React__default["default"].createElement(Form.Input,Object.assign({type:"date",max:"9999-12-31"// I do this because of a rendering bug in chrome
|
|
1759
1759
|
,ref:dateRef,id:`${controlId}-date`,name:`${controlId}-date`,onChange:onDateChange},{onFocus,onBlur})),React__default["default"].createElement(Form.Input,Object.assign({type:"time",id:`${controlId}-time`,name:`${controlId}-time`,ref:timeRef,onChange:onTimeChange},{onFocus,onBlur})),!valid?React__default["default"].createElement("div",null,"invalid"):null);};const Wrapper$5=theming.styled.label({display:'flex'});const parse$1=value=>{const result=parseFloat(value);return Number.isNaN(result)?undefined:result;};const format=value=>value!=null?String(value):'';const NumberControl=({name,value,onChange,min,max,step,onBlur,onFocus})=>{const[inputValue,setInputValue]=React.useState(typeof value==='number'?value:'');const[forceVisible,setForceVisible]=React.useState(false);const[parseError,setParseError]=React.useState(null);const handleChange=React.useCallback(event=>{setInputValue(event.target.value);const result=parseFloat(event.target.value);if(Number.isNaN(result)){setParseError(new Error(`'${event.target.value}' is not a number`));}else{onChange(result);setParseError(null);}},[onChange,setParseError]);const onForceVisible=React.useCallback(()=>{setInputValue('0');onChange(0);setForceVisible(true);},[setForceVisible]);const htmlElRef=React.useRef(null);React.useEffect(()=>{if(forceVisible&&htmlElRef.current)htmlElRef.current.select();},[forceVisible]);React.useEffect(()=>{const newInputValue=typeof value==='number'?value:'';if(inputValue!==newInputValue){setInputValue(value);}},[value]);if(!forceVisible&&value===undefined){return React__default["default"].createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set number");}return React__default["default"].createElement(Wrapper$5,null,React__default["default"].createElement(Form.Input,Object.assign({ref:htmlElRef,id:getControlId(name),type:"number",onChange:handleChange,size:"flex",placeholder:"Edit number...",value:inputValue,valid:parseError?'error':null,autoFocus:forceVisible},{name,min,max,step,onFocus,onBlur})));};function dedent(templ){var values=[];for(var _i=1;_i<arguments.length;_i++){values[_i-1]=arguments[_i];}var strings=Array.from(typeof templ==='string'?[templ]:templ);strings[strings.length-1]=strings[strings.length-1].replace(/\r?\n([\t ]*)$/,'');var indentLengths=strings.reduce(function(arr,str){var matches=str.match(/\n([\t ]+|(?!\s).)/g);if(matches){return arr.concat(matches.map(function(match){var _a,_b;return(_b=(_a=match.match(/[\t ]/g))===null||_a===void 0?void 0:_a.length)!==null&&_b!==void 0?_b:0;}));}return arr;},[]);if(indentLengths.length){var pattern_1=new RegExp("\n[\t ]{"+Math.min.apply(Math,indentLengths)+"}",'g');strings=strings.map(function(str){return str.replace(pattern_1,'\n');});}strings[0]=strings[0].replace(/^\r?\n/,'');var string=strings[0];values.forEach(function(value,i){var endentations=string.match(/(?:^|\n)( *)$/);var endentation=endentations?endentations[1]:'';var indentedValue=value;if(typeof value==='string'&&value.includes('\n')){indentedValue=String(value).split('\n').map(function(str,i){return i===0?str:""+endentation+str;}).join('\n');}string+=indentedValue+strings[i+1];});return string;}const selectedKey=(value,options)=>{const entry=options&&Object.entries(options).find(([_key,val])=>val===value);return entry?entry[0]:undefined;};const selectedKeys=(value,options)=>value&&options?Object.entries(options).filter(entry=>value.includes(entry[1])).map(entry=>entry[0]):[];const selectedValues=(keys,options)=>keys&&options&&keys.map(key=>options[key]);const Wrapper$4=theming.styled.div(({isInline})=>isInline?{display:'flex',flexWrap:'wrap',alignItems:'flex-start',label:{display:'inline-flex',marginRight:15}}:{label:{display:'flex'}});const Text$1=theming.styled.span({});const Label$2=theming.styled.label({lineHeight:'20px',alignItems:'center',marginBottom:8,'&:last-child':{marginBottom:0},input:{margin:0,marginRight:6}});const CheckboxControl=({name,options,value,onChange,isInline})=>{if(!options){clientLogger.logger.warn(`Checkbox with no options: ${name}`);return React__default["default"].createElement(React__default["default"].Fragment,null,"-");}const initial=selectedKeys(value,options);const[selected,setSelected]=React.useState(initial);const handleChange=e=>{const option=e.target.value;const updated=[...selected];if(updated===null||updated===void 0?void 0:updated.includes(option)){updated.splice(updated.indexOf(option),1);}else{updated.push(option);}onChange(selectedValues(updated,options));setSelected(updated);};const controlId=getControlId(name);return React__default["default"].createElement(Wrapper$4,{isInline:isInline},Object.keys(options).map((key,index)=>{const id=`${controlId}-${index}`;return React__default["default"].createElement(Label$2,{key:id,htmlFor:id},React__default["default"].createElement("input",{type:"checkbox",id:id,name:id,value:key,onChange:handleChange,checked:selected===null||selected===void 0?void 0:selected.includes(key)}),React__default["default"].createElement(Text$1,null,key));}));};const Wrapper$3=theming.styled.div(({isInline})=>isInline?{display:'flex',flexWrap:'wrap',alignItems:'flex-start',label:{display:'inline-flex',marginRight:15}}:{label:{display:'flex'}});theming.styled.fieldset({border:0,padding:0,margin:0});const Text=theming.styled.span({});const Label$1=theming.styled.label({lineHeight:'20px',alignItems:'center',marginBottom:8,'&:last-child':{marginBottom:0},input:{margin:0,marginRight:6}});const RadioControl=({name,options,value,onChange,isInline})=>{if(!options){clientLogger.logger.warn(`Radio with no options: ${name}`);return React__default["default"].createElement(React__default["default"].Fragment,null,"-");}const selection=selectedKey(value,options);const controlId=getControlId(name);return React__default["default"].createElement(Wrapper$3,{isInline:isInline},Object.keys(options).map((key,index)=>{const id=`${controlId}-${index}`;return React__default["default"].createElement(Label$1,{key:id,htmlFor:id},React__default["default"].createElement("input",{type:"radio",id:id,name:id,value:key,onChange:e=>onChange(options[e.currentTarget.value]),checked:key===selection}),React__default["default"].createElement(Text,null,key));}));};const styleResets={// resets
|
|
1760
1760
|
appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};const OptionsSelect=theming.styled.select(({theme})=>Object.assign(Object.assign({},styleResets),{boxSizing:'border-box',position:'relative',padding:'6px 10px',width:'100%',color:theme.input.color||'inherit',background:theme.input.background,borderRadius:theme.input.borderRadius,boxShadow:`${theme.input.border} 0 0 0 1px inset`,fontSize:theme.typography.size.s2-1,lineHeight:'20px','&:focus':{boxShadow:`${theme.color.secondary} 0 0 0 1px inset`,outline:'none'},'&[disabled]':{cursor:'not-allowed',opacity:0.5},'::placeholder':{color:theme.color.mediumdark},'&[multiple]':{overflow:'auto',padding:0,option:{display:'block',padding:'6px 10px',marginLeft:1,marginRight:1}}}));const SelectWrapper=theming.styled.span`
|
|
1761
1761
|
display: inline-block;
|
|
@@ -2100,7 +2100,7 @@ JsonTree.defaultProps={rootName:'root',isCollapsed:(keyPath,deep)=>deep!==-1,get
|
|
|
2100
2100
|
${curriedLighten$1(0.02,theme.input.background)} ${(value-min)/(max-min)*100}%,
|
|
2101
2101
|
${curriedLighten$1(0.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:'transparent',width:'100%',height:'6px',cursor:'pointer'},'&::-ms-fill-lower':{borderRadius:6},'&::-ms-fill-upper':{borderRadius:6},'&::-ms-thumb':{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,0.2)}`,borderRadius:50,cursor:'grab',marginTop:0},'@supports (-ms-ime-align:auto)':{'input[type=range]':{margin:'0'}}}));const RangeLabel=theming.styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:'nowrap',fontFeatureSettings:'tnum',fontVariantNumeric:'tabular-nums'});const RangeWrapper=theming.styled.div({display:'flex',alignItems:'center',width:'100%'});function getNumberOfDecimalPlaces(number){const match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return!match?0:Math.max(0,// Number of digits right of decimal point.
|
|
2102
2102
|
(match[1]?match[1].length:0)-(// Adjust for scientific notation.
|
|
2103
|
-
match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=React.useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default["default"].createElement(RangeWrapper,null,React__default["default"].createElement(RangeLabel,null,min),React__default["default"].createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default["default"].createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=theming.styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=React.useState(false);const onForceVisible=React.useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default["default"].createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default["default"].createElement(Wrapper$1,null,React__default["default"].createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=theming.styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default["default"].createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=React.lazy(()=>Promise.resolve().then(function(){return require('./Color-
|
|
2103
|
+
match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=React.useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default["default"].createElement(RangeWrapper,null,React__default["default"].createElement(RangeLabel,null,min),React__default["default"].createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default["default"].createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=theming.styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=React.useState(false);const onForceVisible=React.useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default["default"].createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default["default"].createElement(Wrapper$1,null,React__default["default"].createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=theming.styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default["default"].createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=React.lazy(()=>Promise.resolve().then(function(){return require('./Color-2b2a4f31.js');}));const ColorControl=props=>React__default["default"].createElement(React.Suspense,{fallback:React__default["default"].createElement("div",null)},React__default["default"].createElement(LazyColorControl,Object.assign({},props)));const Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};const NoControl=()=>React__default["default"].createElement(React__default["default"].Fragment,null,"-");const ArgControl=({row,arg,updateArgs})=>{const{key,control}=row;const[isFocused,setFocused]=React.useState(false);// box because arg can be a fn (e.g. actions) and useState calls fn's
|
|
2104
2104
|
const[boxedValue,setBoxedValue]=React.useState({value:arg});React.useEffect(()=>{if(!isFocused)setBoxedValue({value:arg});},[isFocused,arg]);const onChange=React.useCallback(argVal=>{setBoxedValue({value:argVal});updateArgs({[key]:argVal});return argVal;},[updateArgs,key]);const onBlur=React.useCallback(()=>setFocused(false),[]);const onFocus=React.useCallback(()=>setFocused(true),[]);if(!control||control.disable)return React__default["default"].createElement(NoControl,null);// row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
|
|
2105
2105
|
// row.key is a hash key and therefore a much safer choice
|
|
2106
2106
|
const props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus};const Control=Controls[control.type]||NoControl;return React__default["default"].createElement(Control,Object.assign({},props,control,{controlType:control.type}));};const Name=theming.styled.span({fontWeight:'bold'});const Required=theming.styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:'help'}));const Description=theming.styled.div(({theme})=>({'&&':{p:{margin:'0 0 10px 0'},a:{color:theme.color.secondary}},code:Object.assign(Object.assign({},codeCommon({theme})),{fontSize:12,fontFamily:theme.typography.fonts.mono}),'& code':{margin:0,display:'inline-block'},'& pre > code':{whiteSpace:'pre-wrap'}}));const Type=theming.styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?4:0}));const TypeWithJsDoc=theming.styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12}));const StyledTd$1=theming.styled.td(({theme,expandable})=>({paddingLeft:expandable?'40px !important':'20px !important'}));const ArgRow=props=>{var _a;const{row,updateArgs,compact,expandable,initialExpandedArgs}=props;const{name,description}=row;const table=row.table||{};const type=table.type||row.type;const defaultValue=table.defaultValue||row.defaultValue;const required=(_a=row.type)===null||_a===void 0?void 0:_a.required;const hasDescription=description!=null&&description!=='';return React__default["default"].createElement("tr",null,React__default["default"].createElement(StyledTd$1,{expandable:expandable},React__default["default"].createElement(Name,null,name),required?React__default["default"].createElement(Required,{title:"Required"},"*"):null),compact?null:React__default["default"].createElement("td",null,hasDescription&&React__default["default"].createElement(Description,null,React__default["default"].createElement(Markdown,null,description)),table.jsDocTags!=null?React__default["default"].createElement(React__default["default"].Fragment,null,React__default["default"].createElement(TypeWithJsDoc,{hasDescription:hasDescription},React__default["default"].createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs})),React__default["default"].createElement(ArgJsDoc,{tags:table.jsDocTags})):React__default["default"].createElement(Type,{hasDescription:hasDescription},React__default["default"].createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs}))),compact?null:React__default["default"].createElement("td",null,React__default["default"].createElement(ArgValue,{value:defaultValue,initialExpandedArgs:initialExpandedArgs})),updateArgs?React__default["default"].createElement("td",null,React__default["default"].createElement(ArgControl,Object.assign({},props))):null);};const ExpanderIcon=theming.styled(Icons)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==='light'?curriedTransparentize$1(0.25,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),border:'none',display:'inline-block'}));const FlexWrapper=theming.styled.span(({theme})=>({display:'flex',lineHeight:'20px',alignItems:'center'}));const Section=theming.styled.td(({theme})=>({position:'relative',letterSpacing:'0.35em',textTransform:'uppercase',fontWeight:theme.typography.weight.black,fontSize:theme.typography.size.s1-1,color:theme.base==='light'?curriedTransparentize$1(0.4,theme.color.defaultText):curriedTransparentize$1(0.6,theme.color.defaultText),background:`${theme.background.app} !important`,'& ~ td':{background:`${theme.background.app} !important`}}));const Subsection=theming.styled.td(({theme})=>({position:'relative',fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.content}));const StyledTd=theming.styled.td(({theme})=>({position:'relative'}));const StyledTr=theming.styled.tr(({theme})=>({'&:hover > td':{backgroundColor:`${theme.background.hoverable} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:'row-resize'}}));const ClickIntercept=theming.styled.button(()=>({// reset button style
|
package/dist/cjs/index.js
CHANGED
|
@@ -42,7 +42,7 @@ import "core-js/modules/es.symbol.js";
|
|
|
42
42
|
import "core-js/modules/es.symbol.description.js";
|
|
43
43
|
import "core-js/modules/es.symbol.iterator.js";
|
|
44
44
|
import "core-js/modules/es.array.from.js";
|
|
45
|
-
import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, e as __rest } from './index-
|
|
45
|
+
import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, e as __rest } from './index-37675b63.js';
|
|
46
46
|
import React__default, { useRef, useMemo, useEffect, useState, useCallback, useLayoutEffect } from 'react';
|
|
47
47
|
import { styled } from '@storybook/theming';
|
|
48
48
|
import '@storybook/csf';
|
|
@@ -22,7 +22,7 @@ import "core-js/modules/es.symbol.iterator.js";
|
|
|
22
22
|
import "core-js/modules/es.array.iterator.js";
|
|
23
23
|
import "core-js/modules/es.string.iterator.js";
|
|
24
24
|
import "core-js/modules/web.dom-collections.iterator.js";
|
|
25
|
-
import { c as commonjsGlobal, e as __rest } from './index-
|
|
25
|
+
import { c as commonjsGlobal, e as __rest } from './index-37675b63.js';
|
|
26
26
|
import React__default, { useRef, useEffect } from 'react';
|
|
27
27
|
import '@storybook/theming';
|
|
28
28
|
import '@storybook/csf';
|
|
@@ -51,7 +51,7 @@ import "core-js/modules/es.array.includes.js";
|
|
|
51
51
|
import "core-js/modules/es.string.includes.js";
|
|
52
52
|
import "core-js/modules/es.string.starts-with.js";
|
|
53
53
|
import "core-js/modules/es.array.from.js";
|
|
54
|
-
import { f as basePlacements, t as top, l as left, g as bottom, r as right, h as end, v as viewport, s as start, p as popper, i as clippingParents, j as reference, k as variationPlacements, n as placements, o as auto, q as modifierPhases, u as _inheritsLoose, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoize, e as __rest, w as window_1 } from './index-
|
|
54
|
+
import { f as basePlacements, t as top, l as left, g as bottom, r as right, h as end, v as viewport, s as start, p as popper, i as clippingParents, j as reference, k as variationPlacements, n as placements, o as auto, q as modifierPhases, u as _inheritsLoose, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoize, e as __rest, w as window_1 } from './index-37675b63.js';
|
|
55
55
|
import * as React from 'react';
|
|
56
56
|
import React__default, { Component, useState, useCallback, useEffect } from 'react';
|
|
57
57
|
import { styled, lighten, darken } from '@storybook/theming';
|
|
@@ -294,7 +294,7 @@ var curriedOpacify=/*#__PURE__*/curry/* ::<number | string, string, string> */(o
|
|
|
294
294
|
* background: "rgba(255,0,0,0.3)";
|
|
295
295
|
* }
|
|
296
296
|
*/function transparentize(amount,color){if(color==='transparent')return color;var parsedColor=parseToRgb(color);var alpha=typeof parsedColor.alpha==='number'?parsedColor.alpha:1;var colorWithAlpha=_extends({},parsedColor,{alpha:guard(0,1,+(alpha*100-parseFloat(amount)*100).toFixed(2)/100)});return rgba(colorWithAlpha);}// prettier-ignore
|
|
297
|
-
var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;var headerCommon=function headerCommon(_ref2){var theme=_ref2.theme;return{margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}};};var codeCommon=function codeCommon(_ref3){var theme=_ref3.theme;return{lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?"1px solid ".concat(theme.color.mediumlight):"1px solid ".concat(theme.color.darker),color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border};};var withReset=function withReset(_ref4){var theme=_ref4.theme;return{fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'};};var withMargin={margin:'16px 0'};var Link$1=function Link$1(_a){var input=_a.href,children=_a.children,props=__rest(_a,["href","children"]);var isStorybookPath=/^\//.test(input);var isAnchorUrl=/^#.*/.test(input);var href=isStorybookPath?"?path=".concat(input):input;var target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};var A$2=styled(Link$1)(withReset,function(_ref5){var theme=_ref5.theme;return{fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}};});var Blockquote=styled.blockquote(withReset,withMargin,function(_ref6){var theme=_ref6.theme;return{borderLeft:"4px solid ".concat(theme.color.medium),padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}};});var Wrapper$8=styled.div(withReset,function(_ref7){var theme=_ref7.theme;return{backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:"1px dashed ".concat(theme.appBorderColor),display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2};});var EmptyBlock=function EmptyBlock(props){return React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));};var LazySyntaxHighlighter=lazy(function(){return import('./syntaxhighlighter-
|
|
297
|
+
var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;var headerCommon=function headerCommon(_ref2){var theme=_ref2.theme;return{margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}};};var codeCommon=function codeCommon(_ref3){var theme=_ref3.theme;return{lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?"1px solid ".concat(theme.color.mediumlight):"1px solid ".concat(theme.color.darker),color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border};};var withReset=function withReset(_ref4){var theme=_ref4.theme;return{fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'};};var withMargin={margin:'16px 0'};var Link$1=function Link$1(_a){var input=_a.href,children=_a.children,props=__rest(_a,["href","children"]);var isStorybookPath=/^\//.test(input);var isAnchorUrl=/^#.*/.test(input);var href=isStorybookPath?"?path=".concat(input):input;var target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};var A$2=styled(Link$1)(withReset,function(_ref5){var theme=_ref5.theme;return{fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}};});var Blockquote=styled.blockquote(withReset,withMargin,function(_ref6){var theme=_ref6.theme;return{borderLeft:"4px solid ".concat(theme.color.medium),padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}};});var Wrapper$8=styled.div(withReset,function(_ref7){var theme=_ref7.theme;return{backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:"1px dashed ".concat(theme.appBorderColor),display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2};});var EmptyBlock=function EmptyBlock(props){return React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));};var LazySyntaxHighlighter=lazy(function(){return import('./syntaxhighlighter-9779b0b7.js');});var SyntaxHighlighter=function SyntaxHighlighter(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazySyntaxHighlighter,Object.assign({},props)));};var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(function(_ref8){var theme=_ref8.theme;return{// DocBlocks-specific styling and overrides
|
|
298
298
|
fontSize:"".concat(theme.typography.size.s2-1,"px"),lineHeight:'19px',margin:'25px 0 40px',borderRadius:theme.appBorderRadius,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0','pre.prismjs':{padding:20,background:'inherit'}};});var SourceError;(function(SourceError){SourceError["NO_STORY"]="There\u2019s no story here.";SourceError["SOURCE_UNAVAILABLE"]="Oh no! The source is not available.";})(SourceError||(SourceError={}));var SourceSkeletonWrapper=styled.div(function(_ref9){var theme=_ref9.theme;return{background:theme.background.content,borderRadius:theme.appBorderRadius,border:"1px solid ".concat(theme.appBorderColor),boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0',margin:'25px 0 40px',padding:'20px 20px 20px 22px'};});var SourceSkeletonPlaceholder=styled.div(function(_ref10){var theme=_ref10.theme;return{animation:"".concat(theme.animation.glow," 1.5s ease-in-out infinite"),background:theme.appBorderColor,height:17,marginTop:1,width:'60%','&:first-child':{margin:0}};});var SourceSkeleton=function SourceSkeleton(){return React__default.createElement(SourceSkeletonWrapper,null,React__default.createElement(SourceSkeletonPlaceholder,null),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'30%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}));};/**
|
|
299
299
|
* Syntax-highlighted source code for a component (or anything!)
|
|
300
300
|
*/var Source=function Source(props){var isLoading=props.isLoading,error=props.error;if(isLoading){return React__default.createElement(SourceSkeleton,null);}if(error){return React__default.createElement(EmptyBlock,null,error);}var _a=props,language=_a.language,code=_a.code,dark=_a.dark,format=_a.format,rest=__rest(_a,["language","code","dark","format"]);var syntaxHighlighter=React__default.createElement(StyledSyntaxHighlighter,Object.assign({bordered:true,copyable:true,format:format,language:language,className:"docblock-source"},rest),code);if(typeof dark==='undefined'){return syntaxHighlighter;}var overrideTheme=dark?themes.dark:themes.light;return React__default.createElement(ThemeProvider,{theme:convert(overrideTheme)},syntaxHighlighter);};Source.defaultProps={format:false};var isReactChildString=function isReactChildString(child){return typeof child==='string';};var isInlineCodeRegex=/[\n\r]/g;var DefaultCodeBlock=styled.code(function(_ref11){var theme=_ref11.theme;return{// from reset
|
|
@@ -310,7 +310,7 @@ var icons={mobile:'M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.726
|
|
|
310
310
|
shapeRendering:'inherit',transform:'translate3d(0,0,0)'},function(_ref26){var inline=_ref26.inline;return inline?{display:'inline-block'}:{display:'block'};});Svg.displayName='Svg';var Path=styled.path({fill:'currentColor'});// TODO: if we can resize the 1024 to 20, we can remove the size attributes
|
|
311
311
|
var Icons=memo(function(_a){var icon=_a.icon,symbol=_a.symbol,props=__rest(_a,["icon","symbol"]);return React__default.createElement(Svg,Object.assign({viewBox:"0 0 1024 1024"},props),symbol?React__default.createElement("use",{xlinkHref:"#icon--".concat(symbol)}):React__default.createElement(Path,{d:icons[icon]}));});var Symbols=memo(function(_ref27){var _ref27$icons=_ref27.icons,keys=_ref27$icons===void 0?Object.keys(icons):_ref27$icons;return React__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{position:'absolute',width:0,height:0},"data-chromatic":"ignore"},keys.map(function(key){return React__default.createElement("symbol",{id:"icon--".concat(key),key:key},React__default.createElement(Path,{d:icons[key]}));}));});// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
|
|
312
312
|
var LEFT_BUTTON=0;var isPlainLeftClick=function isPlainLeftClick(e){return e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey;};var cancelled=function cancelled(e,cb){if(isPlainLeftClick(e)){e.preventDefault();cb(e);}};var LinkInner=styled.span(function(_ref28){var withArrow=_ref28.withArrow;return withArrow?{'> svg:last-of-type':{height:'0.7em',width:'0.7em',marginRight:0,marginLeft:'0.25em',bottom:'auto',verticalAlign:'inherit'}}:{};},function(_ref29){var containsIcon=_ref29.containsIcon;return containsIcon?{svg:{height:'1em',width:'1em',verticalAlign:'middle',position:'relative',bottom:0,marginRight:0}}:{};});var A$1=styled.a(function(_ref30){var theme=_ref30.theme;return{display:'inline-block',transition:'all 150ms ease-out',textDecoration:'none',color:theme.color.secondary,'&:hover, &:focus':{cursor:'pointer',color:curriedDarken$1(0.07,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.07,theme.color.secondary)}},'&:active':{color:curriedDarken$1(0.1,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.1,theme.color.secondary)}},svg:{display:'inline-block',height:'1em',width:'1em',verticalAlign:'text-top',position:'relative',bottom:'-0.125em',marginRight:'0.4em','& path':{fill:theme.color.secondary}}};},function(_ref31){var theme=_ref31.theme,secondary=_ref31.secondary,tertiary=_ref31.tertiary;var colors;if(secondary){colors=[theme.color.mediumdark,theme.color.dark,theme.color.darker];}if(tertiary){colors=[theme.color.dark,theme.color.darkest,theme.color.mediumdark];}return colors?{color:colors[0],'svg path':{fill:colors[0]},'&:hover':{color:colors[1],'svg path':{fill:colors[1]}},'&:active':{color:colors[2],'svg path':{fill:colors[2]}}}:{};},function(_ref32){var nochrome=_ref32.nochrome;return nochrome?{color:'inherit','&:hover, &:active':{color:'inherit',textDecoration:'underline'}}:{};},function(_ref33){var theme=_ref33.theme,inverse=_ref33.inverse;return inverse?{color:theme.color.lightest,'svg path':{fill:theme.color.lightest},'&:hover':{color:theme.color.lighter,'svg path':{fill:theme.color.lighter}},'&:active':{color:theme.color.light,'svg path':{fill:theme.color.light}}}:{};},function(_ref34){var isButton=_ref34.isButton;return isButton?{border:0,borderRadius:0,background:'none',padding:0,fontSize:'inherit'}:{};});var Link=function Link(_a){var cancel=_a.cancel,children=_a.children,onClick=_a.onClick,withArrow=_a.withArrow,containsIcon=_a.containsIcon,className=_a.className,rest=__rest(_a,["cancel","children","onClick","withArrow","containsIcon","className"]);return React__default.createElement(A$1,Object.assign({},rest,{onClick:onClick&&cancel?function(e){return cancelled(e,onClick);}:onClick,className:className}),React__default.createElement(LinkInner,{withArrow:withArrow,containsIcon:containsIcon},children,withArrow&&React__default.createElement(Icons,{icon:"arrowright"})));};Link.defaultProps={cancel:true,className:undefined,style:undefined,onClick:undefined,withArrow:false,containsIcon:false};var DocumentWrapper=styled.div(function(_ref35){var theme=_ref35.theme;return{fontSize:"".concat(theme.typography.size.s2,"px"),lineHeight:'1.6',h1:{fontSize:"".concat(theme.typography.size.l1,"px"),fontWeight:theme.typography.weight.black},h2:{fontSize:"".concat(theme.typography.size.m2,"px"),borderBottom:"1px solid ".concat(theme.appBorderColor)},h3:{fontSize:"".concat(theme.typography.size.m1,"px")},h4:{fontSize:"".concat(theme.typography.size.s3,"px")},h5:{fontSize:"".concat(theme.typography.size.s2,"px")},h6:{fontSize:"".concat(theme.typography.size.s2,"px"),color:theme.color.dark},'pre:not(.prismjs)':{background:'transparent',border:'none',borderRadius:0,padding:0,margin:0},'pre pre, pre.prismjs':{padding:15,margin:0,whiteSpace:'pre-wrap',color:'inherit',fontSize:'13px',lineHeight:'19px'},'pre pre code, pre.prismjs code':{color:'inherit',fontSize:'inherit'},'pre code':{margin:0,padding:0,whiteSpace:'pre',border:'none',background:'transparent'},'pre code, pre tt':{backgroundColor:'transparent',border:'none'},/* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */'body > *:first-of-type':{marginTop:'0 !important'},'body > *:last-child':{marginBottom:'0 !important'},a:{color:theme.color.secondary,textDecoration:'none'},'a.absent':{color:'#cc0000'},'a.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0},'h1, h2, h3, h4, h5, h6':{margin:'20px 0 10px',padding:0,cursor:'text',position:'relative','&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}},'h1:first-of-type + h2':{marginTop:0,paddingTop:0},'p, blockquote, ul, ol, dl, li, table, pre':{margin:'15px 0'},hr:{border:'0 none',borderTop:"1px solid ".concat(theme.appBorderColor),height:4,padding:0},'body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type':{marginTop:0,paddingTop:0},'body > h1:first-of-type + h2':{marginTop:0,paddingTop:0},'a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6':{marginTop:0,paddingTop:0},'h1 p, h2 p, h3 p, h4 p, h5 p, h6 p':{marginTop:0},'li p.first':{display:'inline-block'},'ul, ol':{paddingLeft:30,'& :first-of-type':{marginTop:0},'& :last-child':{marginBottom:0}},dl:{padding:0},'dl dt':{fontSize:'14px',fontWeight:'bold',fontStyle:'italic',margin:'0 0 15px',padding:'0 15px','&:first-of-type':{padding:0},'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}},blockquote:{borderLeft:"4px solid ".concat(theme.color.medium),padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}},table:{padding:0,borderCollapse:'collapse','& tr':{borderTop:"1px solid ".concat(theme.appBorderColor),backgroundColor:'white',margin:0,padding:0,'& th':{fontWeight:'bold',border:"1px solid ".concat(theme.appBorderColor),textAlign:'left',margin:0,padding:'6px 13px'},'& td':{border:"1px solid ".concat(theme.appBorderColor),textAlign:'left',margin:0,padding:'6px 13px'},'&:nth-of-type(2n)':{backgroundColor:theme.color.lighter},'& th :first-of-type, & td :first-of-type':{marginTop:0},'& th :last-child, & td :last-child':{marginBottom:0}}},img:{maxWidth:'100%'},'span.frame':{display:'block',overflow:'hidden','& > span':{border:"1px solid ".concat(theme.color.medium),display:'block',float:'left',overflow:'hidden',margin:'13px 0 0',padding:7,width:'auto'},'& span img':{display:'block',float:'left'},'& span span':{clear:'both',color:theme.color.darkest,display:'block',padding:'5px 0 0'}},'span.align-center':{display:'block',overflow:'hidden',clear:'both','& > span':{display:'block',overflow:'hidden',margin:'13px auto 0',textAlign:'center'},'& span img':{margin:'0 auto',textAlign:'center'}},'span.align-right':{display:'block',overflow:'hidden',clear:'both','& > span':{display:'block',overflow:'hidden',margin:'13px 0 0',textAlign:'right'},'& span img':{margin:0,textAlign:'right'}},'span.float-left':{display:'block',marginRight:13,overflow:'hidden',float:'left','& span':{margin:'13px 0 0'}},'span.float-right':{display:'block',marginLeft:13,overflow:'hidden',float:'right','& > span':{display:'block',overflow:'hidden',margin:'13px auto 0',textAlign:'right'}},'code, tt':{margin:'0 2px',padding:'0 5px',whiteSpace:'nowrap',border:"1px solid ".concat(theme.color.mediumlight),backgroundColor:theme.color.lighter,borderRadius:3,color:theme.base==='dark'&&theme.color.darkest}};});var Container$1=styled.div(function(_ref36){var theme=_ref36.theme;return{position:'absolute',bottom:0,right:0,maxWidth:'100%',display:'flex',background:theme.background.content,zIndex:1};});var ActionButton=styled.button(function(_ref37){var theme=_ref37.theme;return{margin:0,border:'0 none',padding:'4px 10px',cursor:'pointer',display:'flex',alignItems:'center',color:theme.color.defaultText,background:theme.background.content,fontSize:12,lineHeight:'16px',fontFamily:theme.typography.fonts.base,fontWeight:theme.typography.weight.bold,borderTop:"1px solid ".concat(theme.appBorderColor),borderLeft:"1px solid ".concat(theme.appBorderColor),marginLeft:-1,borderRadius:"4px 0 0 0",'&:not(:last-child)':{borderRight:"1px solid ".concat(theme.appBorderColor)},'& + *':{borderLeft:"1px solid ".concat(theme.appBorderColor),borderRadius:0},'&:focus':{boxShadow:"".concat(theme.color.secondary," 0 -3px 0 0 inset"),outline:'0 none'}};},function(_ref38){var disabled=_ref38.disabled;return disabled&&{cursor:'not-allowed',opacity:0.5};});ActionButton.displayName='ActionButton';var ActionBar=function ActionBar(_a){var actionItems=_a.actionItems,props=__rest(_a,["actionItems"]);return React__default.createElement(Container$1,Object.assign({},props),actionItems.map(function(_ref39,index){var title=_ref39.title,className=_ref39.className,onClick=_ref39.onClick,disabled=_ref39.disabled;return(// eslint-disable-next-line react/no-array-index-key
|
|
313
|
-
React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title));}));};var toNumber=function toNumber(input){return typeof input==='number'?input:Number(input);};var Container=styled.div(function(_ref40){var theme=_ref40.theme,col=_ref40.col,_ref40$row=_ref40.row,row=_ref40$row===void 0?1:_ref40$row;return col?_defineProperty2({display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'}},"& > *:first-child".concat(ignoreSsrWarning$1),{marginLeft:0}):_defineProperty2({'& > *':{marginTop:row*theme.layoutMargin}},"& > *:first-child".concat(ignoreSsrWarning$1),{marginTop:0});},function(_ref43){var theme=_ref43.theme,outer=_ref43.outer,col=_ref43.col,row=_ref43.row;switch(true){case!!(outer&&col):{return{marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};}case!!(outer&&row):{return{marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};}default:{return{};}}});var Spaced=function Spaced(_a){var col=_a.col,row=_a.row,outer=_a.outer,children=_a.children,rest=__rest(_a,["col","row","outer","children"]);var outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};var Title$3=styled.div(function(_ref44){var theme=_ref44.theme;return{fontWeight:theme.typography.weight.bold};});var Desc$1=styled.div();var Message$1=styled.div(function(_ref45){var theme=_ref45.theme;return{padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1};});var Placeholder=function Placeholder(_a){var children=_a.children,props=__rest(_a,["children"]);var _Children$toArray=Children.toArray(children),_Children$toArray2=_slicedToArray(_Children$toArray,2),title=_Children$toArray2[0],desc=_Children$toArray2[1];return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};var GlobalScrollAreaStyles=lazy(function(){return import('./GlobalScrollAreaStyles-8793ce4a.js');});var OverlayScrollbars=lazy(function(){return import('./OverlayScrollbars-
|
|
313
|
+
React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title));}));};var toNumber=function toNumber(input){return typeof input==='number'?input:Number(input);};var Container=styled.div(function(_ref40){var theme=_ref40.theme,col=_ref40.col,_ref40$row=_ref40.row,row=_ref40$row===void 0?1:_ref40$row;return col?_defineProperty2({display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'}},"& > *:first-child".concat(ignoreSsrWarning$1),{marginLeft:0}):_defineProperty2({'& > *':{marginTop:row*theme.layoutMargin}},"& > *:first-child".concat(ignoreSsrWarning$1),{marginTop:0});},function(_ref43){var theme=_ref43.theme,outer=_ref43.outer,col=_ref43.col,row=_ref43.row;switch(true){case!!(outer&&col):{return{marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};}case!!(outer&&row):{return{marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};}default:{return{};}}});var Spaced=function Spaced(_a){var col=_a.col,row=_a.row,outer=_a.outer,children=_a.children,rest=__rest(_a,["col","row","outer","children"]);var outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};var Title$3=styled.div(function(_ref44){var theme=_ref44.theme;return{fontWeight:theme.typography.weight.bold};});var Desc$1=styled.div();var Message$1=styled.div(function(_ref45){var theme=_ref45.theme;return{padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1};});var Placeholder=function Placeholder(_a){var children=_a.children,props=__rest(_a,["children"]);var _Children$toArray=Children.toArray(children),_Children$toArray2=_slicedToArray(_Children$toArray,2),title=_Children$toArray2[0],desc=_Children$toArray2[1];return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};var GlobalScrollAreaStyles=lazy(function(){return import('./GlobalScrollAreaStyles-8793ce4a.js');});var OverlayScrollbars=lazy(function(){return import('./OverlayScrollbars-9c02ec46.js');});var Scroller=function Scroller(_a){var props=__rest(_a,["horizontal","vertical"]);return React__default.createElement(Suspense,{fallback:React__default.createElement("div",Object.assign({},props))},React__default.createElement(GlobalScrollAreaStyles,null),React__default.createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};var ScrollArea=styled(Scroller)(function(_ref46){var vertical=_ref46.vertical;return!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'};},function(_ref47){var horizontal=_ref47.horizontal;return!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'};});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getAugmentedNamespace(n){if(n.__esModule)return n;var a=Object.defineProperty({},'__esModule',{value:true});Object.keys(n).forEach(function(k){var d=Object.getOwnPropertyDescriptor(n,k);Object.defineProperty(a,k,d.get?d:{enumerable:true,get:function get(){return n[k];}});});return a;}function commonjsRequire(path){throw new Error('Could not dynamically require "'+path+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;var globalWindow$2=window_1.window;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}var ZoomElementWrapper=styled.div(function(_ref48){var _ref48$scale=_ref48.scale,scale=_ref48$scale===void 0?1:_ref48$scale,height=_ref48.height;return browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:"scale(".concat(1/scale,")")};});function ZoomElement(_ref49){var scale=_ref49.scale,children=_ref49.children;var componentWrapperRef=useRef(null);var _useState=useState(0),_useState2=_slicedToArray(_useState,2),height=_useState2[0],setHeight=_useState2[1];useEffect(function(){if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default.createElement(ZoomElementWrapper,{scale:scale,height:height},React__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}var ZoomIFrame=/*#__PURE__*/function(_Component){_inherits(ZoomIFrame,_Component);var _super=_createSuper(ZoomIFrame);function ZoomIFrame(){var _this2;_classCallCheck(this,ZoomIFrame);_this2=_super.apply(this,arguments);_this2.iframe=null;return _this2;}_createClass(ZoomIFrame,[{key:"componentDidMount",value:function componentDidMount(){var iFrameRef=this.props.iFrameRef;this.iframe=iFrameRef.current;}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){var _this$props=this.props,scale=_this$props.scale,active=_this$props.active;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
|
|
314
314
|
// never update this component, it will cause the iframe to refresh
|
|
315
315
|
return false;}},{key:"setIframeInnerZoom",value:function setIframeInnerZoom(scale){try{if(browserSupportsCssZoom()){Object.assign(this.iframe.contentDocument.body.style,{zoom:1/scale});}else{Object.assign(this.iframe.contentDocument.body.style,{width:"".concat(scale*100,"%"),height:"".concat(scale*100,"%"),transform:"scale(".concat(1/scale,")"),transformOrigin:'top left'});}}catch(e){this.setIframeZoom(scale);}}},{key:"setIframeZoom",value:function setIframeZoom(scale){Object.assign(this.iframe.style,{width:"".concat(scale*100,"%"),height:"".concat(scale*100,"%"),transform:"scale(".concat(1/scale,")"),transformOrigin:'top left'});}},{key:"render",value:function render(){var children=this.props.children;return children;}}]);return ZoomIFrame;}(Component);var Zoom$1={Element:ZoomElement,IFrame:ZoomIFrame};var ButtonWrapper=styled.button(function(_ref50){var small=_ref50.small,theme=_ref50.theme;return{border:0,borderRadius:'3em',cursor:'pointer',display:'inline-block',overflow:'hidden',padding:small?'8px 16px':'13px 20px',position:'relative',textAlign:'center',textDecoration:'none',transition:'all 150ms ease-out',transform:'translate3d(0,0,0)',verticalAlign:'top',whiteSpace:'nowrap',userSelect:'none',opacity:1,margin:0,background:'transparent',fontSize:"".concat(small?theme.typography.size.s1:theme.typography.size.s2-1,"px"),fontWeight:theme.typography.weight.bold,lineHeight:'1',svg:{display:'inline-block',height:small?14:16,width:small?14:16,verticalAlign:'top',marginRight:small?4:6,marginTop:small?-1:-2,marginBottom:small?-1:-2,/* Necessary for js mouse events to not glitch out when hovering on svgs */pointerEvents:'none',path:{fill:'currentColor'}}};},function(_ref51){var disabled=_ref51.disabled;return disabled?{cursor:'not-allowed !important',opacity:0.5,'&:hover':{transform:'none'}}:{};},function(_ref52){var containsIcon=_ref52.containsIcon,small=_ref52.small;return containsIcon?Object.assign({svg:{display:'block',margin:0}},small?{padding:9}:{padding:12}):{};},function(_ref53){var theme=_ref53.theme,primary=_ref53.primary,secondary=_ref53.secondary,gray=_ref53.gray;var color;if(gray){color=theme.color.medium;}else if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return color?{background:color,color:gray?theme.color.darkest:theme.color.lightest,'&:hover':{background:curriedDarken$1(0.05,color)},'&:active':{boxShadow:'rgba(0, 0, 0, 0.1) 0 0 0 3em inset'},'&:focus':{boxShadow:"".concat(rgba(color,1)," 0 1px 9px 2px"),outline:'none'},'&:focus:hover':{boxShadow:"".concat(rgba(color,0.2)," 0 8px 18px 0px")}}:{};},function(_ref54){var theme=_ref54.theme,tertiary=_ref54.tertiary,inForm=_ref54.inForm,small=_ref54.small;return tertiary?Object.assign(Object.assign({background:theme.base==='light'?curriedDarken$1(0.02,theme.input.background):curriedLighten$1(0.02,theme.input.background),color:theme.input.color,boxShadow:"".concat(theme.input.border," 0 0 0 1px inset"),borderRadius:theme.input.borderRadius},inForm&&small?{padding:'10px 16px'}:{}),{'&:hover':Object.assign({background:theme.base==='light'?curriedDarken$1(0.05,theme.input.background):curriedLighten$1(0.05,theme.input.background)},inForm?{}:{boxShadow:'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'}),'&:active':{background:theme.input.background},'&:focus':{boxShadow:"".concat(rgba(theme.color.secondary,1)," 0 0 0 1px inset"),outline:'none'}}):{};},function(_ref55){var theme=_ref55.theme,outline=_ref55.outline;return outline?{boxShadow:"".concat(curriedTransparentize$1(0.8,theme.color.defaultText)," 0 0 0 1px inset"),color:curriedTransparentize$1(0.3,theme.color.defaultText),background:'transparent','&:hover, &:focus':{boxShadow:"".concat(curriedTransparentize$1(0.5,theme.color.defaultText)," 0 0 0 1px inset"),outline:'none'},'&:active':{boxShadow:"".concat(curriedTransparentize$1(0.5,theme.color.defaultText)," 0 0 0 2px inset"),color:curriedTransparentize$1(0,theme.color.defaultText)}}:{};},function(_ref56){var theme=_ref56.theme,outline=_ref56.outline,primary=_ref56.primary;var color=theme.color.primary;return outline&&primary?{boxShadow:"".concat(color," 0 0 0 1px inset"),color:color,'svg path':{fill:color},'&:hover':{boxShadow:"".concat(color," 0 0 0 1px inset"),background:'transparent'},'&:active':{background:color,boxShadow:"".concat(color," 0 0 0 1px inset"),color:theme.color.tertiary},'&:focus':{boxShadow:"".concat(color," 0 0 0 1px inset, ").concat(rgba(color,0.4)," 0 1px 9px 2px"),outline:'none'},'&:focus:hover':{boxShadow:"".concat(color," 0 0 0 1px inset, ").concat(rgba(color,0.2)," 0 8px 18px 0px")}}:{};},function(_ref57){var theme=_ref57.theme,outline=_ref57.outline,primary=_ref57.primary,secondary=_ref57.secondary;var color;if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return outline&&color?{boxShadow:"".concat(color," 0 0 0 1px inset"),color:color,'svg path':{fill:color},'&:hover':{boxShadow:"".concat(color," 0 0 0 1px inset"),background:'transparent'},'&:active':{background:color,boxShadow:"".concat(color," 0 0 0 1px inset"),color:theme.color.tertiary},'&:focus':{boxShadow:"".concat(color," 0 0 0 1px inset, ").concat(rgba(color,0.4)," 0 1px 9px 2px"),outline:'none'},'&:focus:hover':{boxShadow:"".concat(color," 0 0 0 1px inset, ").concat(rgba(color,0.2)," 0 8px 18px 0px")}}:{};});var ButtonLink=ButtonWrapper.withComponent('a');var Button$2=Object.assign(forwardRef(function(_a,ref){var isLink=_a.isLink,children=_a.children,props=__rest(_a,["isLink","children"]);if(isLink){return React__default.createElement(ButtonLink,Object.assign({},props,{ref:ref}),children);}return React__default.createElement(ButtonWrapper,Object.assign({},props,{ref:ref}),children);}),{defaultProps:{isLink:false}});var Wrapper$7=styled.label(function(_ref58){var theme=_ref58.theme;return{display:'flex',borderBottom:"1px solid ".concat(theme.appBorderColor),margin:'0 15px',padding:'8px 0','&:last-child':{marginBottom:'3rem'}};});var Label$4=styled.span(function(_ref59){var theme=_ref59.theme;return{minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:'flex',justifyContent:'flex-start',alignItems:'center',lineHeight:'16px'};});var Field=function Field(_a){var label=_a.label,children=_a.children,props=__rest(_a,["label","children"]);return React__default.createElement(Wrapper$7,Object.assign({},props),label?React__default.createElement(Label$4,null,React__default.createElement("span",null,label)):null,children);};Field.defaultProps={label:undefined};function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}var index$1=useLayoutEffect;var useLatest=function useLatest(value){var ref=useRef(value);index$1(function(){ref.current=value;});return ref;};var updateRef=function updateRef(ref,value){if(typeof ref==='function'){ref(value);return;}ref.current=value;};var useComposedRef=function useComposedRef(libRef,userRef){var prevUserRef=useRef();return useCallback(function(instance){libRef.current=instance;if(prevUserRef.current){updateRef(prevUserRef.current,null);}prevUserRef.current=userRef;if(!userRef){return;}updateRef(userRef,instance);},[userRef]);};var HIDDEN_TEXTAREA_STYLE={'min-height':'0','max-height':'none',height:'0',visibility:'hidden',overflow:'hidden',position:'absolute','z-index':'-1000',top:'0',right:'0'};var forceHiddenStyles=function forceHiddenStyles(node){Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key){node.style.setProperty(key,HIDDEN_TEXTAREA_STYLE[key],'important');});};// export type CalculatedNodeHeights = [height: number, rowHeight: number];
|
|
316
316
|
// https://github.com/microsoft/TypeScript/issues/28259
|
|
@@ -325,7 +325,7 @@ if(boxSizing===''){return null;}// IE (Edge has already correct behaviour) retur
|
|
|
325
325
|
if(isIE&&boxSizing==='border-box'){sizingStyle.width=parseFloat(sizingStyle.width)+parseFloat(sizingStyle.borderRightWidth)+parseFloat(sizingStyle.borderLeftWidth)+parseFloat(sizingStyle.paddingRight)+parseFloat(sizingStyle.paddingLeft)+'px';}var paddingSize=parseFloat(sizingStyle.paddingBottom)+parseFloat(sizingStyle.paddingTop);var borderSize=parseFloat(sizingStyle.borderBottomWidth)+parseFloat(sizingStyle.borderTopWidth);return{sizingStyle:sizingStyle,paddingSize:paddingSize,borderSize:borderSize};};var useWindowResizeListener=function useWindowResizeListener(listener){var latestListener=useLatest(listener);useLayoutEffect(function(){var handler=function handler(event){latestListener.current(event);};window.addEventListener('resize',handler);return function(){window.removeEventListener('resize',handler);};},[]);};var TextareaAutosize=function TextareaAutosize(_ref,userRef){var cacheMeasurements=_ref.cacheMeasurements,maxRows=_ref.maxRows,minRows=_ref.minRows,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop$2:_ref$onChange,_ref$onHeightChange=_ref.onHeightChange,onHeightChange=_ref$onHeightChange===void 0?noop$2:_ref$onHeightChange,props=_objectWithoutPropertiesLoose(_ref,["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"]);if(process.env.NODE_ENV!=='production'&&props.style){if('maxHeight'in props.style){throw new Error('Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.');}if('minHeight'in props.style){throw new Error('Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.');}}var isControlled=props.value!==undefined;var libRef=useRef(null);var ref=useComposedRef(libRef,userRef);var heightRef=useRef(0);var measurementsCacheRef=useRef();var resizeTextarea=function resizeTextarea(){var node=libRef.current;var nodeSizingData=cacheMeasurements&&measurementsCacheRef.current?measurementsCacheRef.current:getSizingData(node);if(!nodeSizingData){return;}measurementsCacheRef.current=nodeSizingData;var _calculateNodeHeight=calculateNodeHeight(nodeSizingData,node.value||node.placeholder||'x',minRows,maxRows),height=_calculateNodeHeight[0],rowHeight=_calculateNodeHeight[1];if(heightRef.current!==height){heightRef.current=height;node.style.setProperty('height',height+"px",'important');onHeightChange(height,{rowHeight:rowHeight});}};var handleChange=function handleChange(event){if(!isControlled){resizeTextarea();}onChange(event);};{useLayoutEffect(resizeTextarea);useWindowResizeListener(resizeTextarea);}return/*#__PURE__*/createElement("textarea",_extends({},props,{onChange:handleChange,ref:ref}));};var index=/* #__PURE__ */forwardRef(TextareaAutosize);var TextareaAutoResize=index;var styleResets$1={// resets
|
|
326
326
|
appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};var styles=function styles(_ref60){var theme=_ref60.theme;return Object.assign(Object.assign({},styleResets$1),{transition:'box-shadow 200ms ease-out, opacity 200ms ease-out',color:theme.input.color||'inherit',background:theme.input.background,boxShadow:"".concat(theme.input.border," 0 0 0 1px inset"),borderRadius:theme.input.borderRadius,fontSize:theme.typography.size.s2-1,lineHeight:'20px',padding:'6px 10px','&:focus':{boxShadow:"".concat(theme.color.secondary," 0 0 0 1px inset"),outline:'none'},'&[disabled]':{cursor:'not-allowed',opacity:0.5},'&:-webkit-autofill':{WebkitBoxShadow:"0 0 0 3em ".concat(theme.color.lightest," inset")},'::placeholder':{color:theme.color.mediumdark}});};var sizes=function sizes(_ref61){var size=_ref61.size;switch(size){case'100%':{return{width:'100%'};}case'flex':{return{flex:1};}case'auto':default:{return{display:'inline'};}}};var alignment=function alignment(_ref62){var align=_ref62.align;switch(align){case'end':{return{textAlign:'right'};}case'center':{return{textAlign:'center'};}case'start':default:{return{textAlign:'left'};}}};var validation=function validation(_ref63){var valid=_ref63.valid,theme=_ref63.theme;switch(valid){case'valid':{return{boxShadow:"".concat(theme.color.positive," 0 0 0 1px inset !important")};}case'error':{return{boxShadow:"".concat(theme.color.negative," 0 0 0 1px inset !important")};}case'warn':{return{boxShadow:"".concat(theme.color.warning," 0 0 0 1px inset")};}case undefined:case null:default:{return{};}}};var Input$1=Object.assign(styled(forwardRef(function(_a,ref){var props=__rest(_a,["size","valid","align"]);return React__default.createElement("input",Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:'Input'});var Select=Object.assign(styled(forwardRef(function(_a,ref){var props=__rest(_a,["size","valid","align"]);return React__default.createElement("select",Object.assign({},props,{ref:ref}));}))(styles,sizes,validation,{height:32,userSelect:'none',paddingRight:20,appearance:'menulist'}),{displayName:'Select'});var Textarea=Object.assign(styled(forwardRef(function(_a,ref){var props=__rest(_a,["size","valid","align"]);return React__default.createElement(TextareaAutoResize,Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,function(_ref64){var _ref64$height=_ref64.height,height=_ref64$height===void 0?400:_ref64$height;return{overflow:'visible',maxHeight:height};}),{displayName:'Textarea'});var ButtonStyled=styled(forwardRef(function(_a,ref){var props=__rest(_a,["size","valid","align"]);return React__default.createElement(Button$2,Object.assign({},props,{ref:ref}));}))(sizes,validation,{// Custom styling for color widget nested in buttons
|
|
327
327
|
userSelect:'none',overflow:'visible',zIndex:2,// overrides the default hover from Button
|
|
328
|
-
'&:hover':{transform:'none'}});var Button$1=Object.assign(forwardRef(function(props,ref){return React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}));}),{displayName:'Button'});var Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field:Field,Input:Input$1,Select:Select,Textarea:Textarea,Button:Button$1});var LazyWithTooltip=lazy(function(){return import('./WithTooltip-
|
|
328
|
+
'&:hover':{transform:'none'}});var Button$1=Object.assign(forwardRef(function(props,ref){return React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}));}),{displayName:'Button'});var Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field:Field,Input:Input$1,Select:Select,Textarea:Textarea,Button:Button$1});var LazyWithTooltip=lazy(function(){return import('./WithTooltip-98721669.js').then(function(mod){return{default:mod.WithTooltip};});});var WithTooltip=function WithTooltip(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltip,Object.assign({},props)));};var LazyWithTooltipPure=lazy(function(){return import('./WithTooltip-98721669.js').then(function(mod){return{default:mod.WithTooltipPure};});});var WithTooltipPure=function WithTooltipPure(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltipPure,Object.assign({},props)));};var Title$2=styled.div(function(_ref65){var theme=_ref65.theme;return{fontWeight:theme.typography.weight.black};});var Desc=styled.span();var Links=styled.div(function(_ref66){var theme=_ref66.theme;return{marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}};});var Message=styled.div(function(_ref67){var theme=_ref67.theme;return{color:theme.textColor,lineHeight:'18px'};});var MessageWrapper=styled.div({padding:15,width:280,boxSizing:'border-box'});var TooltipMessage=function TooltipMessage(_ref68){var title=_ref68.title,desc=_ref68.desc,links=_ref68.links;return React__default.createElement(MessageWrapper,null,React__default.createElement(Message,null,title&&React__default.createElement(Title$2,null,title),desc&&React__default.createElement(Desc,null,desc)),links&&React__default.createElement(Links,null,links.map(function(_a){var linkTitle=_a.title,other=__rest(_a,["title"]);return React__default.createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};var Note=styled.div(function(_ref69){var theme=_ref69.theme;return{padding:'2px 6px',lineHeight:'16px',fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:'0 0 5px 0 rgba(0, 0, 0, 0.3)',borderRadius:4,whiteSpace:'nowrap',pointerEvents:'none',zIndex:-1,background:theme.base==='light'?'rgba(60, 60, 60, 0.9)':'rgba(20, 20, 20, 0.85)',margin:6};});var TooltipNote=function TooltipNote(_a){var note=_a.note,props=__rest(_a,["note"]);return React__default.createElement(Note,Object.assign({},props),note);};var memoizerific={exports:{}};(function(module,exports){(function(f){{module.exports=f();}})(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof commonjsRequire=="function"&&commonjsRequire;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f;}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e);},l,l.exports,e,t,n,r);}return n[o].exports;}var i=typeof commonjsRequire=="function"&&commonjsRequire;for(var o=0;o<r.length;o++){s(r[o]);}return s;}({1:[function(_dereq_,module,exports){module.exports=function(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=_dereq_('./similar');return new Similar();}else{return new Map();}};},{"./similar":2}],2:[function(_dereq_,module,exports){function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
|
|
329
329
|
Similar.prototype.has=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return true;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return true;}return false;};Similar.prototype.forEach=function(callback,thisArg){var i;for(i=0;i<this.size;i++){callback.call(thisArg||this,this.list[i].val,this.list[i].key,this);}};Similar.prototype.indexOf=function(key){var i;for(i=0;i<this.size;i++){if(this.isEqual(this.list[i].key,key)){return i;}}return-1;};// check if the numbers are equal, or whether they are both precisely NaN (isNaN returns true for all non-numbers)
|
|
330
330
|
Similar.prototype.isEqual=function(val1,val2){return val1===val2||val1!==val1&&val2!==val2;};module.exports=Similar;},{}],3:[function(_dereq_,module,exports){var MapOrSimilar=_dereq_('map-or-similar');module.exports=function(limit){var cache=new MapOrSimilar(undefined==='true'),lru=[];return function(fn){var memoizerific=function memoizerific(){var currentCache=cache,newMap,fnResult,argsLengthMinusOne=arguments.length-1,lruPath=Array(argsLengthMinusOne+1),isMemoized=true,i;if((memoizerific.numArgs||memoizerific.numArgs===0)&&memoizerific.numArgs!==argsLengthMinusOne+1){throw new Error('Memoizerific functions should always be called with the same number of arguments');}// loop through each argument to traverse the map tree
|
|
331
331
|
for(i=0;i<argsLengthMinusOne;i++){lruPath[i]={cacheItem:currentCache,arg:arguments[i]};// climb through the hierarchical map tree until the second-last argument has been found, or an argument is missing.
|
|
@@ -438,8 +438,8 @@ var keys=[];if(parent){// If we aren't using plain objects, optionally prefix ke
|
|
|
438
438
|
if(!options.plainObjects&&has.call(Object.prototype,parent)){if(!options.allowPrototypes){return;}}keys.push(parent);}// Loop through children appending to the array until we hit depth
|
|
439
439
|
var i=0;while(options.depth>0&&(segment=child.exec(key))!==null&&i<options.depth){i+=1;if(!options.plainObjects&&has.call(Object.prototype,segment[1].slice(1,-1))){if(!options.allowPrototypes){return;}}keys.push(segment[1]);}// If there's a remainder, just add whatever is left
|
|
440
440
|
if(segment){keys.push('['+key.slice(segment.index)+']');}return parseObject(keys,val,options,valuesParsed);};var normalizeParseOptions=function normalizeParseOptions(opts){if(!opts){return defaults;}if(opts.decoder!==null&&opts.decoder!==undefined&&typeof opts.decoder!=='function'){throw new TypeError('Decoder has to be a function.');}if(typeof opts.charset!=='undefined'&&opts.charset!=='utf-8'&&opts.charset!=='iso-8859-1'){throw new TypeError('The charset option must be either utf-8, iso-8859-1, or undefined');}var charset=typeof opts.charset==='undefined'?defaults.charset:opts.charset;return{allowDots:typeof opts.allowDots==='undefined'?defaults.allowDots:!!opts.allowDots,allowPrototypes:typeof opts.allowPrototypes==='boolean'?opts.allowPrototypes:defaults.allowPrototypes,allowSparse:typeof opts.allowSparse==='boolean'?opts.allowSparse:defaults.allowSparse,arrayLimit:typeof opts.arrayLimit==='number'?opts.arrayLimit:defaults.arrayLimit,charset:charset,charsetSentinel:typeof opts.charsetSentinel==='boolean'?opts.charsetSentinel:defaults.charsetSentinel,comma:typeof opts.comma==='boolean'?opts.comma:defaults.comma,decoder:typeof opts.decoder==='function'?opts.decoder:defaults.decoder,delimiter:typeof opts.delimiter==='string'||utils.isRegExp(opts.delimiter)?opts.delimiter:defaults.delimiter,// eslint-disable-next-line no-implicit-coercion, no-extra-parens
|
|
441
|
-
depth:typeof opts.depth==='number'||opts.depth===false?+opts.depth:defaults.depth,ignoreQueryPrefix:opts.ignoreQueryPrefix===true,interpretNumericEntities:typeof opts.interpretNumericEntities==='boolean'?opts.interpretNumericEntities:defaults.interpretNumericEntities,parameterLimit:typeof opts.parameterLimit==='number'?opts.parameterLimit:defaults.parameterLimit,parseArrays:opts.parseArrays!==false,plainObjects:typeof opts.plainObjects==='boolean'?opts.plainObjects:defaults.plainObjects,strictNullHandling:typeof opts.strictNullHandling==='boolean'?opts.strictNullHandling:defaults.strictNullHandling};};var parse$
|
|
442
|
-
var keys=Object.keys(tempObj);for(var i=0;i<keys.length;++i){var key=keys[i];var newObj=parseKeys(key,tempObj[key],options,typeof str==='string');obj=utils.merge(obj,newObj,options);}if(options.allowSparse===true){return obj;}return utils.compact(obj);};var stringify=stringify_1;var parse$
|
|
441
|
+
depth:typeof opts.depth==='number'||opts.depth===false?+opts.depth:defaults.depth,ignoreQueryPrefix:opts.ignoreQueryPrefix===true,interpretNumericEntities:typeof opts.interpretNumericEntities==='boolean'?opts.interpretNumericEntities:defaults.interpretNumericEntities,parameterLimit:typeof opts.parameterLimit==='number'?opts.parameterLimit:defaults.parameterLimit,parseArrays:opts.parseArrays!==false,plainObjects:typeof opts.plainObjects==='boolean'?opts.plainObjects:defaults.plainObjects,strictNullHandling:typeof opts.strictNullHandling==='boolean'?opts.strictNullHandling:defaults.strictNullHandling};};var parse$4=function parse$4(str,opts){var options=normalizeParseOptions(opts);if(str===''||str===null||typeof str==='undefined'){return options.plainObjects?Object.create(null):{};}var tempObj=typeof str==='string'?parseValues(str,options):str;var obj=options.plainObjects?Object.create(null):{};// Iterate over the keys and setup the new object
|
|
442
|
+
var keys=Object.keys(tempObj);for(var i=0;i<keys.length;++i){var key=keys[i];var newObj=parseKeys(key,tempObj[key],options,typeof str==='string');obj=utils.merge(obj,newObj,options);}if(options.allowSparse===true){return obj;}return utils.compact(obj);};var stringify=stringify_1;var parse$3=parse$4;var formats=formats$3;var lib={formats:formats,parse:parse$3,stringify:stringify};var getStoryHref=function getStoryHref(baseUrl,storyId){var additionalParams=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};var _baseUrl$split=baseUrl.split('?'),_baseUrl$split2=_slicedToArray(_baseUrl$split,2),url=_baseUrl$split2[0],paramsStr=_baseUrl$split2[1];var params=paramsStr?Object.assign(Object.assign(Object.assign({},lib.parse(paramsStr)),additionalParams),{id:storyId}):Object.assign(Object.assign({},additionalParams),{id:storyId});return"".concat(url).concat(lib.stringify(params,{addQueryPrefix:true,encode:false}));};var Zoom=function Zoom(_ref117){var zoom=_ref117.zoom,resetZoom=_ref117.resetZoom;return React__default.createElement(React__default.Fragment,null,React__default.createElement(IconButton,{key:"zoomin",onClick:function onClick(e){e.preventDefault();zoom(0.8);},title:"Zoom in"},React__default.createElement(Icons,{icon:"zoom"})),React__default.createElement(IconButton,{key:"zoomout",onClick:function onClick(e){e.preventDefault();zoom(1.25);},title:"Zoom out"},React__default.createElement(Icons,{icon:"zoomout"})),React__default.createElement(IconButton,{key:"zoomreset",onClick:function onClick(e){e.preventDefault();resetZoom();},title:"Reset zoom"},React__default.createElement(Icons,{icon:"zoomreset"})));};var Eject=function Eject(_ref118){var baseUrl=_ref118.baseUrl,storyId=_ref118.storyId;return React__default.createElement(IconButton,{key:"opener",href:getStoryHref(baseUrl,storyId),target:"_blank",title:"Open canvas in new tab"},React__default.createElement(Icons,{icon:"share"}));};var Bar=styled(FlexBar)({position:'absolute',left:0,right:0,top:0,transition:'transform .2s linear'});var Toolbar=function Toolbar(_a){var isLoading=_a.isLoading,storyId=_a.storyId,baseUrl=_a.baseUrl,zoom=_a.zoom,resetZoom=_a.resetZoom,rest=__rest(_a,["isLoading","storyId","baseUrl","zoom","resetZoom"]);return React__default.createElement(Bar,Object.assign({},rest),React__default.createElement(Fragment,{key:"left"},isLoading?[1,2,3].map(function(key){return React__default.createElement(IconButtonSkeleton,{key:key});}):React__default.createElement(Zoom,Object.assign({},{zoom:zoom,resetZoom:resetZoom}))),React__default.createElement(Fragment,{key:"right"},storyId&&(isLoading?React__default.createElement(IconButtonSkeleton,null):React__default.createElement(Eject,Object.assign({},{storyId:storyId,baseUrl:baseUrl})))));};var ZoomContext=createContext({scale:1});var globalWindow$1=window_1.window;var IFrame=/*#__PURE__*/function(_Component3){_inherits(IFrame,_Component3);var _super3=_createSuper(IFrame);function IFrame(){var _this4;_classCallCheck(this,IFrame);_this4=_super3.apply(this,arguments);_this4.iframe=null;return _this4;}_createClass(IFrame,[{key:"componentDidMount",value:function componentDidMount(){var id=this.props.id;this.iframe=globalWindow$1.document.getElementById(id);}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){var scale=nextProps.scale;// eslint-disable-next-line react/destructuring-assignment
|
|
443
443
|
if(scale!==this.props.scale){this.setIframeBodyStyle({width:"".concat(scale*100,"%"),height:"".concat(scale*100,"%"),transform:"scale(".concat(1/scale,")"),transformOrigin:'top left'});}return false;}},{key:"setIframeBodyStyle",value:function setIframeBodyStyle(style){return Object.assign(this.iframe.contentDocument.body.style,style);}},{key:"render",value:function render(){var _a=this.props,id=_a.id,title=_a.title,src=_a.src,allowFullScreen=_a.allowFullScreen,scale=_a.scale,rest=__rest(_a,["id","title","src","allowFullScreen","scale"]);return React__default.createElement("iframe",Object.assign({id:id,title:title,src:src,allowFullScreen:allowFullScreen,// @ts-ignore
|
|
444
444
|
loading:"lazy"},rest));}}]);return IFrame;}(Component);var rotate360=keyframes(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n"])));var EventSource=window_1.EventSource,CONFIG_TYPE=window_1.CONFIG_TYPE;var LoaderWrapper=styled.div(function(_ref119){var _ref119$size=_ref119.size,size=_ref119$size===void 0?32:_ref119$size;return{borderRadius:'50%',cursor:'progress',display:'inline-block',overflow:'hidden',position:'absolute',transition:'all 200ms ease-out',verticalAlign:'top',top:'50%',left:'50%',marginTop:-(size/2),marginLeft:-(size/2),height:size,width:size,zIndex:4,borderWidth:2,borderStyle:'solid',borderColor:'rgba(97, 97, 97, 0.29)',borderTopColor:'rgb(100,100,100)',animation:"".concat(rotate360," 0.7s linear infinite"),mixBlendMode:'difference'};});var ProgressWrapper=styled.div({position:'absolute',display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center',width:'100%',height:'100%'});var ProgressTrack=styled.div(function(_ref120){var theme=_ref120.theme;return{position:'relative',width:'80%',marginBottom:'0.75rem',maxWidth:300,height:5,borderRadius:5,background:curriedTransparentize$1(0.8,theme.color.secondary),overflow:'hidden',cursor:'progress'};});var ProgressBar=styled.div(function(_ref121){var theme=_ref121.theme;return{position:'absolute',top:0,left:0,height:'100%',background:theme.color.secondary};});var ProgressMessage=styled.div(function(_ref122){var theme=_ref122.theme;return{minHeight:'2em',fontSize:"".concat(theme.typography.size.s1,"px"),color:theme.barTextColor};});var ErrorIcon=styled(Icons)(function(_ref123){var theme=_ref123.theme;return{width:20,height:20,marginBottom:'0.5rem',color:theme.color.mediumdark};});var ellipsis=keyframes(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n from { content: \"...\" }\n 33% { content: \".\" }\n 66% { content: \"..\" }\n to { content: \"...\" }\n"])));var Ellipsis=styled.span({'&::after':{content:"'...'",animation:"".concat(ellipsis," 1s linear infinite"),animationDelay:'1s',display:'inline-block',width:'1em',height:'auto'}});var PureLoader=function PureLoader(_a){var progress=_a.progress,error=_a.error,size=_a.size,props=__rest(_a,["progress","error","size"]);if(error){return React__default.createElement(ProgressWrapper,Object.assign({"aria-label":error.toString(),"aria-live":"polite",role:"status"},props),React__default.createElement(ErrorIcon,{icon:"lightningoff"}),React__default.createElement(ProgressMessage,null,error.message));}if(progress){var _value=progress.value,modules=progress.modules;var message=progress.message;if(modules)message+=" ".concat(modules.complete," / ").concat(modules.total," modules");return React__default.createElement(ProgressWrapper,Object.assign({"aria-label":"Content is loading...","aria-live":"polite","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":_value*100,"aria-valuetext":message,role:"progressbar"},props),React__default.createElement(ProgressTrack,null,React__default.createElement(ProgressBar,{style:{width:"".concat(_value*100,"%")}})),React__default.createElement(ProgressMessage,null,message,_value<1&&React__default.createElement(Ellipsis,{key:message})));}return React__default.createElement(LoaderWrapper,Object.assign({"aria-label":"Content is loading...","aria-live":"polite",role:"status",size:size},props));};var Loader=function Loader(props){var _useState3=useState(undefined),_useState4=_slicedToArray(_useState3,2),progress=_useState4[0],setProgress=_useState4[1];var _useState5=useState(undefined),_useState6=_slicedToArray(_useState5,2),error=_useState6[0],setError=_useState6[1];useEffect(function(){// Don't listen for progress updates in static builds
|
|
445
445
|
// Event source is not defined in IE 11
|
|
@@ -454,7 +454,7 @@ if(CONFIG_TYPE!=='DEVELOPMENT'||!EventSource)return undefined;var eventSource=ne
|
|
|
454
454
|
* items. The preview also shows the source for the component
|
|
455
455
|
* as a drop-down.
|
|
456
456
|
*/var Preview=function Preview(_a){var isLoading=_a.isLoading,isColumn=_a.isColumn,columns=_a.columns,children=_a.children,withSource=_a.withSource,_a$withToolbar=_a.withToolbar,withToolbar=_a$withToolbar===void 0?false:_a$withToolbar,_a$isExpanded=_a.isExpanded,isExpanded=_a$isExpanded===void 0?false:_a$isExpanded,additionalActions=_a.additionalActions,className=_a.className,props=__rest(_a,["isLoading","isColumn","columns","children","withSource","withToolbar","isExpanded","additionalActions","className"]);var _useState7=useState(isExpanded),_useState8=_slicedToArray(_useState7,2),expanded=_useState8[0],setExpanded=_useState8[1];var _getSource=getSource(withSource,expanded,setExpanded),source=_getSource.source,actionItem=_getSource.actionItem;var _useState9=useState(1),_useState10=_slicedToArray(_useState9,2),scale=_useState10[0],setScale=_useState10[1];var previewClasses=[className].concat(['sbdocs','sbdocs-preview']);var defaultActionItems=withSource?[actionItem]:[];var _useState11=useState(additionalActions?_toConsumableArray(additionalActions):[]),_useState12=_slicedToArray(_useState11,2),additionalActionItems=_useState12[0],setAdditionalActionItems=_useState12[1];var actionItems=[].concat(defaultActionItems,_toConsumableArray(additionalActionItems));// @ts-ignore
|
|
457
|
-
var layout=getLayout(Children.count(children)===1?[children]:children);var globalWindow=window_1.window;var copyToClipboard=useCallback(function(text){return __awaiter(void 0,void 0,void 0,/*#__PURE__*/regeneratorRuntime.mark(function _callee(){var _yield$import,createCopyToClipboardFunction;return regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.next=2;return import('./syntaxhighlighter-
|
|
457
|
+
var layout=getLayout(Children.count(children)===1?[children]:children);var globalWindow=window_1.window;var copyToClipboard=useCallback(function(text){return __awaiter(void 0,void 0,void 0,/*#__PURE__*/regeneratorRuntime.mark(function _callee(){var _yield$import,createCopyToClipboardFunction;return regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.next=2;return import('./syntaxhighlighter-9779b0b7.js');case 2:_yield$import=_context.sent;createCopyToClipboardFunction=_yield$import.createCopyToClipboardFunction;createCopyToClipboardFunction();case 5:case"end":return _context.stop();}}},_callee);}));},[]);var onCopyCapture=function onCopyCapture(e){e.preventDefault();if(additionalActionItems.filter(function(item){return item.title==='Copied';}).length===0){copyToClipboard(source.props.code).then(function(){setAdditionalActionItems([].concat(_toConsumableArray(additionalActionItems),[{title:'Copied',onClick:function onClick(){}}]));globalWindow.setTimeout(function(){return setAdditionalActionItems(additionalActionItems.filter(function(item){return item.title!=='Copied';}));},1500);});}};return React__default.createElement(PreviewContainer,Object.assign({},{withSource:withSource,withToolbar:withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default.createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:function zoom(z){return setScale(scale*z);},resetZoom:function resetZoom(){return setScale(1);},storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default.createElement(ZoomContext.Provider,{value:{scale:scale}},React__default.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default.createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
|
|
458
458
|
children.map(function(child,i){return React__default.createElement("div",{key:i},child);}):React__default.createElement("div",null,children))),React__default.createElement(ActionBar,{actionItems:actionItems}))),withSource&&expanded&&source);};var StyledPreview=styled(Preview)(function(){return{'.docs-story':{paddingTop:32,paddingBottom:40}};});var PreviewSkeleton=function PreviewSkeleton(){return React__default.createElement(StyledPreview,{isLoading:true,withToolbar:true},React__default.createElement(StorySkeleton,null));};/**
|
|
459
459
|
* A specialized version of `_.map` for arrays without support for iteratee
|
|
460
460
|
* shorthands.
|
|
@@ -1743,7 +1743,7 @@ var summaryAsString=typeof summary.toString==='function'?summary.toString():summ
|
|
|
1743
1743
|
* Removes spaces because spaces are not allowed in ID attributes
|
|
1744
1744
|
* @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
|
|
1745
1745
|
* @example getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
|
|
1746
|
-
*/var getControlSetterButtonId=function getControlSetterButtonId(value){return"set-".concat(value.replace(/\s+/g,'-'));};var Label$3=styled.label(function(_ref144){var theme=_ref144.theme;return{lineHeight:'18px',alignItems:'center',marginBottom:8,display:'inline-block',position:'relative',whiteSpace:'nowrap',background:"".concat(curriedOpacify$1(0.05,theme.appBorderColor)),borderRadius:'3em',padding:1,input:{appearance:'none',width:'100%',height:'100%',position:'absolute',left:0,top:0,margin:0,padding:0,border:'none',background:'transparent',cursor:'pointer',borderRadius:'3em','&:focus':{outline:'none',boxShadow:"".concat(theme.color.secondary," 0 0 0 1px inset !important")}},span:{textAlign:'center',fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:'1',cursor:'pointer',display:'inline-block',padding:'7px 15px',transition:'all 100ms ease-out',userSelect:'none',borderRadius:'3em',color:curriedTransparentize$1(0.4,theme.color.defaultText),background:'transparent','&:hover':{boxShadow:"".concat(curriedOpacify$1(0.3,theme.appBorderColor)," 0 0 0 1px inset")},'&:active':{boxShadow:"".concat(curriedOpacify$1(0.05,theme.appBorderColor)," 0 0 0 2px inset"),color:curriedOpacify$1(1,theme.appBorderColor)},'&:first-of-type':{paddingRight:8},'&:last-of-type':{paddingLeft:8}},'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type':{background:theme.background.app,boxShadow:"".concat(curriedOpacify$1(0.1,theme.appBorderColor)," 0 0 2px"),color:theme.color.defaultText,padding:'7px 15px'}};});var BooleanControl=function BooleanControl(_ref145){var name=_ref145.name,value=_ref145.value,_onChange=_ref145.onChange,onBlur=_ref145.onBlur,onFocus=_ref145.onFocus;var onSetFalse=useCallback(function(){return _onChange(false);},[_onChange]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onSetFalse},"Set boolean");}return React__default.createElement(Label$3,{htmlFor:name,title:
|
|
1746
|
+
*/var getControlSetterButtonId=function getControlSetterButtonId(value){return"set-".concat(value.replace(/\s+/g,'-'));};var Label$3=styled.label(function(_ref144){var theme=_ref144.theme;return{lineHeight:'18px',alignItems:'center',marginBottom:8,display:'inline-block',position:'relative',whiteSpace:'nowrap',background:"".concat(curriedOpacify$1(0.05,theme.appBorderColor)),borderRadius:'3em',padding:1,input:{appearance:'none',width:'100%',height:'100%',position:'absolute',left:0,top:0,margin:0,padding:0,border:'none',background:'transparent',cursor:'pointer',borderRadius:'3em','&:focus':{outline:'none',boxShadow:"".concat(theme.color.secondary," 0 0 0 1px inset !important")}},span:{textAlign:'center',fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:'1',cursor:'pointer',display:'inline-block',padding:'7px 15px',transition:'all 100ms ease-out',userSelect:'none',borderRadius:'3em',color:curriedTransparentize$1(0.4,theme.color.defaultText),background:'transparent','&:hover':{boxShadow:"".concat(curriedOpacify$1(0.3,theme.appBorderColor)," 0 0 0 1px inset")},'&:active':{boxShadow:"".concat(curriedOpacify$1(0.05,theme.appBorderColor)," 0 0 0 2px inset"),color:curriedOpacify$1(1,theme.appBorderColor)},'&:first-of-type':{paddingRight:8},'&:last-of-type':{paddingLeft:8}},'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type':{background:theme.background.app,boxShadow:"".concat(curriedOpacify$1(0.1,theme.appBorderColor)," 0 0 2px"),color:theme.color.defaultText,padding:'7px 15px'}};});var parse$2=function parse$2(value){return value==='true';};var BooleanControl=function BooleanControl(_ref145){var name=_ref145.name,value=_ref145.value,_onChange=_ref145.onChange,onBlur=_ref145.onBlur,onFocus=_ref145.onFocus;var onSetFalse=useCallback(function(){return _onChange(false);},[_onChange]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onSetFalse},"Set boolean");}var parsedValue=typeof value==='string'?parse$2(value):value;return React__default.createElement(Label$3,{htmlFor:name,title:parsedValue?'Change to false':'Change to true'},React__default.createElement("input",Object.assign({id:getControlId(name),type:"checkbox",onChange:function onChange(e){return _onChange(e.target.checked);},checked:parsedValue},{name:name,onBlur:onBlur,onFocus:onFocus})),React__default.createElement("span",null,"False"),React__default.createElement("span",null,"True"));};var parseDate=function parseDate(value){var _value$split=value.split('-'),_value$split2=_slicedToArray(_value$split,3),year=_value$split2[0],month=_value$split2[1],day=_value$split2[2];var result=new Date();result.setFullYear(parseInt(year,10),parseInt(month,10)-1,parseInt(day,10));return result;};var parseTime=function parseTime(value){var _value$split3=value.split(':'),_value$split4=_slicedToArray(_value$split3,2),hours=_value$split4[0],minutes=_value$split4[1];var result=new Date();result.setHours(parseInt(hours,10));result.setMinutes(parseInt(minutes,10));return result;};var formatDate=function formatDate(value){var date=new Date(value);var year="000".concat(date.getFullYear()).slice(-4);var month="0".concat(date.getMonth()+1).slice(-2);var day="0".concat(date.getDate()).slice(-2);return"".concat(year,"-").concat(month,"-").concat(day);};var formatTime=function formatTime(value){var date=new Date(value);var hours="0".concat(date.getHours()).slice(-2);var minutes="0".concat(date.getMinutes()).slice(-2);return"".concat(hours,":").concat(minutes);};var FlexSpaced=styled.div(function(_ref146){var theme=_ref146.theme;return{flex:1,display:'flex',input:{marginLeft:10,flex:1,height:32,'&::-webkit-calendar-picker-indicator':{opacity:0.5,height:12,filter:theme.base==='light'?undefined:'invert(1)'}},'input:first-of-type':{marginLeft:0}};});var DateControl=function DateControl(_ref147){var name=_ref147.name,value=_ref147.value,onChange=_ref147.onChange,onFocus=_ref147.onFocus,onBlur=_ref147.onBlur;var _useState17=useState(true),_useState18=_slicedToArray(_useState17,2),valid=_useState18[0],setValid=_useState18[1];var dateRef=useRef();var timeRef=useRef();useEffect(function(){if(valid!==false){if(dateRef&&dateRef.current){dateRef.current.value=formatDate(value);}if(timeRef&&timeRef.current){timeRef.current.value=formatTime(value);}}},[value]);var onDateChange=function onDateChange(e){var parsed=parseDate(e.target.value);var result=new Date(value);result.setFullYear(parsed.getFullYear(),parsed.getMonth(),parsed.getDate());var time=result.getTime();if(time)onChange(time);setValid(!!time);};var onTimeChange=function onTimeChange(e){var parsed=parseTime(e.target.value);var result=new Date(value);result.setHours(parsed.getHours());result.setMinutes(parsed.getMinutes());var time=result.getTime();if(time)onChange(time);setValid(!!time);};var controlId=getControlId(name);return React__default.createElement(FlexSpaced,null,React__default.createElement(Form.Input,Object.assign({type:"date",max:"9999-12-31"// I do this because of a rendering bug in chrome
|
|
1747
1747
|
,ref:dateRef,id:"".concat(controlId,"-date"),name:"".concat(controlId,"-date"),onChange:onDateChange},{onFocus:onFocus,onBlur:onBlur})),React__default.createElement(Form.Input,Object.assign({type:"time",id:"".concat(controlId,"-time"),name:"".concat(controlId,"-time"),ref:timeRef,onChange:onTimeChange},{onFocus:onFocus,onBlur:onBlur})),!valid?React__default.createElement("div",null,"invalid"):null);};var Wrapper$5=styled.label({display:'flex'});var parse$1=function parse$1(value){var result=parseFloat(value);return Number.isNaN(result)?undefined:result;};var format=function format(value){return value!=null?String(value):'';};var NumberControl=function NumberControl(_ref148){var name=_ref148.name,value=_ref148.value,onChange=_ref148.onChange,min=_ref148.min,max=_ref148.max,step=_ref148.step,onBlur=_ref148.onBlur,onFocus=_ref148.onFocus;var _useState19=useState(typeof value==='number'?value:''),_useState20=_slicedToArray(_useState19,2),inputValue=_useState20[0],setInputValue=_useState20[1];var _useState21=useState(false),_useState22=_slicedToArray(_useState21,2),forceVisible=_useState22[0],setForceVisible=_useState22[1];var _useState23=useState(null),_useState24=_slicedToArray(_useState23,2),parseError=_useState24[0],setParseError=_useState24[1];var handleChange=useCallback(function(event){setInputValue(event.target.value);var result=parseFloat(event.target.value);if(Number.isNaN(result)){setParseError(new Error("'".concat(event.target.value,"' is not a number")));}else{onChange(result);setParseError(null);}},[onChange,setParseError]);var onForceVisible=useCallback(function(){setInputValue('0');onChange(0);setForceVisible(true);},[setForceVisible]);var htmlElRef=useRef(null);useEffect(function(){if(forceVisible&&htmlElRef.current)htmlElRef.current.select();},[forceVisible]);useEffect(function(){var newInputValue=typeof value==='number'?value:'';if(inputValue!==newInputValue){setInputValue(value);}},[value]);if(!forceVisible&&value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set number");}return React__default.createElement(Wrapper$5,null,React__default.createElement(Form.Input,Object.assign({ref:htmlElRef,id:getControlId(name),type:"number",onChange:handleChange,size:"flex",placeholder:"Edit number...",value:inputValue,valid:parseError?'error':null,autoFocus:forceVisible},{name:name,min:min,max:max,step:step,onFocus:onFocus,onBlur:onBlur})));};function dedent(templ){var values=[];for(var _i=1;_i<arguments.length;_i++){values[_i-1]=arguments[_i];}var strings=Array.from(typeof templ==='string'?[templ]:templ);strings[strings.length-1]=strings[strings.length-1].replace(/\r?\n([\t ]*)$/,'');var indentLengths=strings.reduce(function(arr,str){var matches=str.match(/\n([\t ]+|(?!\s).)/g);if(matches){return arr.concat(matches.map(function(match){var _a,_b;return(_b=(_a=match.match(/[\t ]/g))===null||_a===void 0?void 0:_a.length)!==null&&_b!==void 0?_b:0;}));}return arr;},[]);if(indentLengths.length){var pattern_1=new RegExp("\n[\t ]{"+Math.min.apply(Math,indentLengths)+"}",'g');strings=strings.map(function(str){return str.replace(pattern_1,'\n');});}strings[0]=strings[0].replace(/^\r?\n/,'');var string=strings[0];values.forEach(function(value,i){var endentations=string.match(/(?:^|\n)( *)$/);var endentation=endentations?endentations[1]:'';var indentedValue=value;if(typeof value==='string'&&value.includes('\n')){indentedValue=String(value).split('\n').map(function(str,i){return i===0?str:""+endentation+str;}).join('\n');}string+=indentedValue+strings[i+1];});return string;}var selectedKey=function selectedKey(value,options){var entry=options&&Object.entries(options).find(function(_ref149){var _ref150=_slicedToArray(_ref149,2),_key=_ref150[0],val=_ref150[1];return val===value;});return entry?entry[0]:undefined;};var selectedKeys=function selectedKeys(value,options){return value&&options?Object.entries(options).filter(function(entry){return value.includes(entry[1]);}).map(function(entry){return entry[0];}):[];};var selectedValues=function selectedValues(keys,options){return keys&&options&&keys.map(function(key){return options[key];});};var Wrapper$4=styled.div(function(_ref151){var isInline=_ref151.isInline;return isInline?{display:'flex',flexWrap:'wrap',alignItems:'flex-start',label:{display:'inline-flex',marginRight:15}}:{label:{display:'flex'}};});var Text$1=styled.span({});var Label$2=styled.label({lineHeight:'20px',alignItems:'center',marginBottom:8,'&:last-child':{marginBottom:0},input:{margin:0,marginRight:6}});var CheckboxControl=function CheckboxControl(_ref152){var name=_ref152.name,options=_ref152.options,value=_ref152.value,onChange=_ref152.onChange,isInline=_ref152.isInline;if(!options){logger.warn("Checkbox with no options: ".concat(name));return React__default.createElement(React__default.Fragment,null,"-");}var initial=selectedKeys(value,options);var _useState25=useState(initial),_useState26=_slicedToArray(_useState25,2),selected=_useState26[0],setSelected=_useState26[1];var handleChange=function handleChange(e){var option=e.target.value;var updated=_toConsumableArray(selected);if(updated===null||updated===void 0?void 0:updated.includes(option)){updated.splice(updated.indexOf(option),1);}else{updated.push(option);}onChange(selectedValues(updated,options));setSelected(updated);};var controlId=getControlId(name);return React__default.createElement(Wrapper$4,{isInline:isInline},Object.keys(options).map(function(key,index){var id="".concat(controlId,"-").concat(index);return React__default.createElement(Label$2,{key:id,htmlFor:id},React__default.createElement("input",{type:"checkbox",id:id,name:id,value:key,onChange:handleChange,checked:selected===null||selected===void 0?void 0:selected.includes(key)}),React__default.createElement(Text$1,null,key));}));};var Wrapper$3=styled.div(function(_ref153){var isInline=_ref153.isInline;return isInline?{display:'flex',flexWrap:'wrap',alignItems:'flex-start',label:{display:'inline-flex',marginRight:15}}:{label:{display:'flex'}};});styled.fieldset({border:0,padding:0,margin:0});var Text=styled.span({});var Label$1=styled.label({lineHeight:'20px',alignItems:'center',marginBottom:8,'&:last-child':{marginBottom:0},input:{margin:0,marginRight:6}});var RadioControl=function RadioControl(_ref154){var name=_ref154.name,options=_ref154.options,value=_ref154.value,_onChange2=_ref154.onChange,isInline=_ref154.isInline;if(!options){logger.warn("Radio with no options: ".concat(name));return React__default.createElement(React__default.Fragment,null,"-");}var selection=selectedKey(value,options);var controlId=getControlId(name);return React__default.createElement(Wrapper$3,{isInline:isInline},Object.keys(options).map(function(key,index){var id="".concat(controlId,"-").concat(index);return React__default.createElement(Label$1,{key:id,htmlFor:id},React__default.createElement("input",{type:"radio",id:id,name:id,value:key,onChange:function onChange(e){return _onChange2(options[e.currentTarget.value]);},checked:key===selection}),React__default.createElement(Text,null,key));}));};var styleResets={// resets
|
|
1748
1748
|
appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};var OptionsSelect=styled.select(function(_ref155){var theme=_ref155.theme;return Object.assign(Object.assign({},styleResets),{boxSizing:'border-box',position:'relative',padding:'6px 10px',width:'100%',color:theme.input.color||'inherit',background:theme.input.background,borderRadius:theme.input.borderRadius,boxShadow:"".concat(theme.input.border," 0 0 0 1px inset"),fontSize:theme.typography.size.s2-1,lineHeight:'20px','&:focus':{boxShadow:"".concat(theme.color.secondary," 0 0 0 1px inset"),outline:'none'},'&[disabled]':{cursor:'not-allowed',opacity:0.5},'::placeholder':{color:theme.color.mediumdark},'&[multiple]':{overflow:'auto',padding:0,option:{display:'block',padding:'6px 10px',marginLeft:1,marginRight:1}}});});var SelectWrapper=styled.span(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n display: inline-block;\n line-height: normal;\n overflow: hidden;\n position: relative;\n vertical-align: top;\n width: 100%;\n\n svg {\n position: absolute;\n z-index: 1;\n pointer-events: none;\n height: 12px;\n margin-top: -6px;\n right: 12px;\n top: 50%;\n\n path {\n fill: currentColor;\n }\n }\n"])));var NO_SELECTION='Choose option...';var SingleSelect=function SingleSelect(_ref156){var name=_ref156.name,value=_ref156.value,options=_ref156.options,onChange=_ref156.onChange;var handleChange=function handleChange(e){onChange(options[e.currentTarget.value]);};var selection=selectedKey(value,options)||NO_SELECTION;var controlId=getControlId(name);return React__default.createElement(SelectWrapper,null,React__default.createElement(Icons,{icon:"arrowdown"}),React__default.createElement(OptionsSelect,{id:controlId,value:selection,onChange:handleChange},React__default.createElement("option",{key:"no-selection",disabled:true},NO_SELECTION),Object.keys(options).map(function(key){return React__default.createElement("option",{key:key},key);})));};var MultiSelect=function MultiSelect(_ref157){var name=_ref157.name,value=_ref157.value,options=_ref157.options,onChange=_ref157.onChange;var handleChange=function handleChange(e){var selection=Array.from(e.currentTarget.options).filter(function(option){return option.selected;}).map(function(option){return option.value;});onChange(selectedValues(selection,options));};var selection=selectedKeys(value,options);var controlId=getControlId(name);return React__default.createElement(SelectWrapper,null,React__default.createElement(OptionsSelect,{id:controlId,multiple:true,value:selection,onChange:handleChange},Object.keys(options).map(function(key){return React__default.createElement("option",{key:key},key);})));};var SelectControl=function SelectControl(props){var name=props.name,options=props.options;if(!options){logger.warn("Select with no options: ".concat(name));return React__default.createElement(React__default.Fragment,null,"-");}// eslint-disable-next-line react/destructuring-assignment
|
|
1749
1749
|
return props.isMulti?React__default.createElement(MultiSelect,Object.assign({},props)):React__default.createElement(SingleSelect,Object.assign({},props));};/**
|
|
@@ -2045,7 +2045,7 @@ textareaElementFunction=function textareaElementFunction(){return textareaElemen
|
|
|
2045
2045
|
JsonTree.defaultProps={rootName:'root',isCollapsed:function isCollapsed(keyPath,deep){return deep!==-1;},getStyle:function getStyle(keyName,data,keyPath,deep,dataType){switch(dataType){case'Object':case'Error':return object;case'Array':return array;default:return value;}},readOnly:function readOnly(){return false;},onFullyUpdate:function onFullyUpdate(){},onDeltaUpdate:function onDeltaUpdate(){},beforeRemoveAction:function beforeRemoveAction(){return Promise.resolve();},beforeAddAction:function beforeAddAction(){return Promise.resolve();},beforeUpdateAction:function beforeUpdateAction(){return Promise.resolve();},logger:{error:function error(){}},onSubmitValueParser:function onSubmitValueParser(isEditMode,keyPath,deep,name,rawValue){return parse(rawValue);},inputElement:function inputElement(){return React__default.createElement("input",null);},textareaElement:function textareaElement(){return React__default.createElement("textarea",null);},fallback:null};var globalWindow=window_1.window;var Wrapper$2=styled.div(function(_ref162){var theme=_ref162.theme;return{position:'relative',display:'flex','.rejt-tree':{marginLeft:'1rem',fontSize:'13px'},'.rejt-value-node, .rejt-object-node > .rejt-collapsed, .rejt-array-node > .rejt-collapsed, .rejt-object-node > .rejt-not-collapsed, .rejt-array-node > .rejt-not-collapsed':{'& > svg':{opacity:0,transition:'opacity 0.2s'}},'.rejt-value-node:hover, .rejt-object-node:hover > .rejt-collapsed, .rejt-array-node:hover > .rejt-collapsed, .rejt-object-node:hover > .rejt-not-collapsed, .rejt-array-node:hover > .rejt-not-collapsed':{'& > svg':{opacity:1}},'.rejt-edit-form button':{display:'none'},'.rejt-add-form':{marginLeft:10},'.rejt-add-value-node':{display:'inline-flex',alignItems:'center'},'.rejt-name':{lineHeight:'22px'},'.rejt-not-collapsed-delimiter':{lineHeight:'22px'},'.rejt-plus-menu':{marginLeft:5},'.rejt-object-node > span > *':{position:'relative',zIndex:2},'.rejt-object-node, .rejt-array-node':{position:'relative'},'.rejt-object-node > span:first-of-type::after, .rejt-array-node > span:first-of-type::after, .rejt-collapsed::before, .rejt-not-collapsed::before':{content:'""',position:'absolute',top:0,display:'block',width:'100%',marginLeft:'-1rem',padding:'0 4px 0 1rem',height:22},'.rejt-collapsed::before, .rejt-not-collapsed::before':{zIndex:1,background:'transparent',borderRadius:4,transition:'background 0.2s',pointerEvents:'none',opacity:0.1},'.rejt-object-node:hover, .rejt-array-node:hover':{'& > .rejt-collapsed::before, & > .rejt-not-collapsed::before':{background:theme.color.secondary}},'.rejt-collapsed::after, .rejt-not-collapsed::after':{content:'""',position:'absolute',display:'inline-block',pointerEvents:'none',width:0,height:0},'.rejt-collapsed::after':{left:-8,top:8,borderTop:'3px solid transparent',borderBottom:'3px solid transparent',borderLeft:'3px solid rgba(153,153,153,0.6)'},'.rejt-not-collapsed::after':{left:-10,top:10,borderTop:'3px solid rgba(153,153,153,0.6)',borderLeft:'3px solid transparent',borderRight:'3px solid transparent'},'.rejt-value':{display:'inline-block',border:'1px solid transparent',borderRadius:4,margin:'1px 0',padding:'0 4px',cursor:'text',color:theme.color.defaultText},'.rejt-value-node:hover > .rejt-value':{background:theme.background.app,borderColor:theme.color.border}};});var Button=styled.button(function(_ref163){var theme=_ref163.theme,primary=_ref163.primary;return{border:0,height:20,margin:1,borderRadius:4,background:primary?theme.color.secondary:'transparent',color:primary?theme.color.lightest:theme.color.dark,fontWeight:primary?'bold':'normal',cursor:'pointer',order:primary?'initial':9};});var ActionIcon=styled(Icons)(function(_ref164){var theme=_ref164.theme,icon=_ref164.icon,disabled=_ref164.disabled;return{display:'inline-block',verticalAlign:'middle',width:15,height:15,padding:3,marginLeft:5,cursor:disabled?'not-allowed':'pointer',color:theme.color.mediumdark,'&:hover':disabled?{}:{color:icon==='subtract'?theme.color.negative:theme.color.ancillary},'svg + &':{marginLeft:0}};});var Input=styled.input(function(_ref165){var theme=_ref165.theme,placeholder=_ref165.placeholder;return{outline:0,margin:placeholder?1:'1px 0',padding:'3px 4px',color:theme.color.defaultText,background:theme.background.app,border:"1px solid ".concat(theme.color.border),borderRadius:4,lineHeight:'14px',width:placeholder==='Key'?80:120,'&:focus':{border:"1px solid ".concat(theme.color.secondary)}};});var RawButton=styled(IconButton)(function(_ref166){var theme=_ref166.theme;return{position:'absolute',zIndex:2,top:2,right:2,height:21,padding:'0 3px',background:theme.background.bar,border:"1px solid ".concat(theme.color.border),borderRadius:3,color:theme.color.mediumdark,fontSize:'9px',fontWeight:'bold',span:{marginLeft:3,marginTop:1}};});var RawInput=styled(Form.Textarea)(function(_ref167){var theme=_ref167.theme;return{flex:1,padding:'7px 6px',fontFamily:theme.typography.fonts.mono,fontSize:'12px',lineHeight:'18px','&::placeholder':{fontFamily:theme.typography.fonts.base,fontSize:'13px'},'&:placeholder-shown':{padding:'7px 10px'}};});var ENTER_EVENT={bubbles:true,cancelable:true,key:'Enter',code:'Enter',keyCode:13};var dispatchEnterKey=function dispatchEnterKey(event){event.currentTarget.dispatchEvent(new globalWindow.KeyboardEvent('keydown',ENTER_EVENT));};var selectValue=function selectValue(event){event.currentTarget.select();};var getCustomStyleFunction=function getCustomStyleFunction(theme){return function(){return{name:{color:theme.color.secondary},collapsed:{color:theme.color.dark},ul:{listStyle:'none',margin:'0 0 0 1rem',padding:0},li:{outline:0}};};};var ObjectControl=function ObjectControl(_ref168){var name=_ref168.name,value=_ref168.value,onChange=_ref168.onChange;var theme=useTheme();var data=useMemo(function(){return value&&cloneDeep_1(value);},[value]);var hasData=data!==null&&data!==undefined;var _useState27=useState(!hasData),_useState28=_slicedToArray(_useState27,2),showRaw=_useState28[0],setShowRaw=_useState28[1];var _useState29=useState(null),_useState30=_slicedToArray(_useState29,2),parseError=_useState30[0],setParseError=_useState30[1];var updateRaw=useCallback(function(raw){try{if(raw)onChange(JSON.parse(raw));setParseError(undefined);}catch(e){setParseError(e);}},[onChange]);var _useState31=useState(false),_useState32=_slicedToArray(_useState31,2),forceVisible=_useState32[0],setForceVisible=_useState32[1];var onForceVisible=useCallback(function(){onChange({});setForceVisible(true);},[setForceVisible]);var htmlElRef=useRef(null);useEffect(function(){if(forceVisible&&htmlElRef.current)htmlElRef.current.select();},[forceVisible]);if(!hasData){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set object");}var rawJSONForm=React__default.createElement(RawInput,{ref:htmlElRef,id:getControlId(name),name:name,defaultValue:value===null?'':JSON.stringify(value,null,2),onBlur:function onBlur(event){return updateRaw(event.target.value);},placeholder:"Edit JSON string...",autoFocus:forceVisible,valid:parseError?'error':null});return React__default.createElement(Wrapper$2,null,['Object','Array'].includes(getObjectType(data))&&React__default.createElement(RawButton,{onClick:function onClick(){return setShowRaw(function(v){return!v;});}},React__default.createElement(Icons,{icon:showRaw?'eyeclose':'eye'}),React__default.createElement("span",null,"RAW")),!showRaw?React__default.createElement(JsonTree,{data:data,rootName:name,onFullyUpdate:onChange,getStyle:getCustomStyleFunction(theme),cancelButtonElement:React__default.createElement(Button,{type:"button"},"Cancel"),editButtonElement:React__default.createElement(Button,{type:"submit"},"Save"),addButtonElement:React__default.createElement(Button,{type:"submit",primary:true},"Save"),plusMenuElement:React__default.createElement(ActionIcon,{icon:"add"}),minusMenuElement:React__default.createElement(ActionIcon,{icon:"subtract"}),inputElement:function inputElement(_,__,___,key){return key?React__default.createElement(Input,{onFocus:selectValue,onBlur:dispatchEnterKey}):React__default.createElement(Input,null);},fallback:rawJSONForm}):rawJSONForm);};var RangeInput=styled.input(function(_ref169){var theme=_ref169.theme,min=_ref169.min,max=_ref169.max,value=_ref169.value;return{// Resytled using http://danielstern.ca/range.css/#/
|
|
2046
2046
|
'&':{width:'100%',backgroundColor:'transparent',appearance:'none'},'&::-webkit-slider-runnable-track':{background:theme.base==='light'?"linear-gradient(to right, \n ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedDarken$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedDarken$1(0.02,theme.input.background)," 100%)"):"linear-gradient(to right, \n ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedLighten$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedLighten$1(0.02,theme.input.background)," 100%)"),boxShadow:"".concat(theme.appBorderColor," 0 0 0 1px inset"),borderRadius:6,width:'100%',height:6,cursor:'pointer'},'&::-webkit-slider-thumb':{marginTop:'-6px',width:16,height:16,border:"1px solid ".concat(rgba(theme.appBorderColor,0.2)),borderRadius:'50px',boxShadow:"0 1px 3px 0px ".concat(rgba(theme.appBorderColor,0.2)),cursor:'grab',appearance:'none',background:"".concat(theme.input.background),transition:'all 150ms ease-out','&:hover':{background:"".concat(curriedDarken$1(0.05,theme.input.background)),transform:'scale3d(1.1, 1.1, 1.1) translateY(-1px)',transition:'all 50ms ease-out'},'&:active':{background:"".concat(theme.input.background),transform:'scale3d(1, 1, 1) translateY(0px)',cursor:'grabbing'}},'&:focus':{outline:'none','&::-webkit-slider-runnable-track':{borderColor:rgba(theme.color.secondary,0.4)},'&::-webkit-slider-thumb':{borderColor:theme.color.secondary,boxShadow:"0 0px 5px 0px ".concat(theme.color.secondary)}},'&::-moz-range-track':{background:theme.base==='light'?"linear-gradient(to right, \n ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedDarken$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedDarken$1(0.02,theme.input.background)," 100%)"):"linear-gradient(to right, \n ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedLighten$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedLighten$1(0.02,theme.input.background)," 100%)"),boxShadow:"".concat(theme.appBorderColor," 0 0 0 1px inset"),borderRadius:6,width:'100%',height:6,cursor:'pointer',outline:'none'},'&::-moz-range-thumb':{width:16,height:16,border:"1px solid ".concat(rgba(theme.color.border,0.2)),borderRadius:'50px',boxShadow:"0 1px 3px 0px ".concat(rgba(theme.color.border,0.2)),cursor:'grab',background:"".concat(theme.input.background),transition:'all 150ms ease-out','&:hover':{background:"".concat(curriedDarken$1(0.05,theme.input.background)),transform:'scale3d(1.1, 1.1, 1.1) translateY(-1px)',transition:'all 50ms ease-out'},'&:active':{background:"".concat(theme.input.background),transform:'scale3d(1, 1, 1) translateY(0px)',cursor:'grabbing'}},'&::-ms-track':{background:theme.base==='light'?"linear-gradient(to right, \n ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedDarken$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedDarken$1(0.02,theme.input.background)," 100%)"):"linear-gradient(to right, \n ".concat(theme.color.green," 0%, ").concat(theme.color.green," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedLighten$1(0.02,theme.input.background)," ").concat((value-min)/(max-min)*100,"%, \n ").concat(curriedLighten$1(0.02,theme.input.background)," 100%)"),boxShadow:"".concat(theme.appBorderColor," 0 0 0 1px inset"),color:'transparent',width:'100%',height:'6px',cursor:'pointer'},'&::-ms-fill-lower':{borderRadius:6},'&::-ms-fill-upper':{borderRadius:6},'&::-ms-thumb':{width:16,height:16,background:"".concat(theme.input.background),border:"1px solid ".concat(rgba(theme.appBorderColor,0.2)),borderRadius:50,cursor:'grab',marginTop:0},'@supports (-ms-ime-align:auto)':{'input[type=range]':{margin:'0'}}};});var RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:'nowrap',fontFeatureSettings:'tnum',fontVariantNumeric:'tabular-nums'});var RangeWrapper=styled.div({display:'flex',alignItems:'center',width:'100%'});function getNumberOfDecimalPlaces(number){var match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return!match?0:Math.max(0,// Number of digits right of decimal point.
|
|
2047
2047
|
(match[1]?match[1].length:0)-(// Adjust for scientific notation.
|
|
2048
|
-
match[2]?+match[2]:0));}var RangeControl=function RangeControl(_ref170){var name=_ref170.name,value=_ref170.value,onChange=_ref170.onChange,_ref170$min=_ref170.min,min=_ref170$min===void 0?0:_ref170$min,_ref170$max=_ref170.max,max=_ref170$max===void 0?100:_ref170$max,_ref170$step=_ref170.step,step=_ref170$step===void 0?1:_ref170$step,onBlur=_ref170.onBlur,onFocus=_ref170.onFocus;var handleChange=function handleChange(event){onChange(parse$1(event.target.value));};var hasValue=value!==undefined;var numberOFDecimalsPlaces=useMemo(function(){return getNumberOfDecimalPlaces(step);},[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name:name,value:value,min:min,max:max,step:step,onFocus:onFocus,onBlur:onBlur})),React__default.createElement(RangeLabel,null,"".concat(hasValue?value.toFixed(numberOFDecimalsPlaces):'--')," / ",max));};var Wrapper$1=styled.label({display:'flex'});var TextControl=function TextControl(_ref171){var name=_ref171.name,value=_ref171.value,onChange=_ref171.onChange,onFocus=_ref171.onFocus,onBlur=_ref171.onBlur;var handleChange=function handleChange(event){onChange(event.target.value);};var _useState33=useState(false),_useState34=_slicedToArray(_useState33,2),forceVisible=_useState34[0],setForceVisible=_useState34[1];var onForceVisible=useCallback(function(){onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}var isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name:name,value:isValid?value:'',onFocus:onFocus,onBlur:onBlur})));};var FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(function(url){if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}var FilesControl=function FilesControl(_ref172){var onChange=_ref172.onChange,name=_ref172.name,_ref172$accept=_ref172.accept,accept=_ref172$accept===void 0?'image/*':_ref172$accept,value=_ref172.value;function handleFileChange(e){if(!e.target.files){return;}var fileUrls=Array.from(e.target.files).map(function(file){return URL.createObjectURL(file);});onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};var LazyColorControl=lazy(function(){return import('./Color-
|
|
2048
|
+
match[2]?+match[2]:0));}var RangeControl=function RangeControl(_ref170){var name=_ref170.name,value=_ref170.value,onChange=_ref170.onChange,_ref170$min=_ref170.min,min=_ref170$min===void 0?0:_ref170$min,_ref170$max=_ref170.max,max=_ref170$max===void 0?100:_ref170$max,_ref170$step=_ref170.step,step=_ref170$step===void 0?1:_ref170$step,onBlur=_ref170.onBlur,onFocus=_ref170.onFocus;var handleChange=function handleChange(event){onChange(parse$1(event.target.value));};var hasValue=value!==undefined;var numberOFDecimalsPlaces=useMemo(function(){return getNumberOfDecimalPlaces(step);},[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name:name,value:value,min:min,max:max,step:step,onFocus:onFocus,onBlur:onBlur})),React__default.createElement(RangeLabel,null,"".concat(hasValue?value.toFixed(numberOFDecimalsPlaces):'--')," / ",max));};var Wrapper$1=styled.label({display:'flex'});var TextControl=function TextControl(_ref171){var name=_ref171.name,value=_ref171.value,onChange=_ref171.onChange,onFocus=_ref171.onFocus,onBlur=_ref171.onBlur;var handleChange=function handleChange(event){onChange(event.target.value);};var _useState33=useState(false),_useState34=_slicedToArray(_useState33,2),forceVisible=_useState34[0],setForceVisible=_useState34[1];var onForceVisible=useCallback(function(){onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}var isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name:name,value:isValid?value:'',onFocus:onFocus,onBlur:onBlur})));};var FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(function(url){if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}var FilesControl=function FilesControl(_ref172){var onChange=_ref172.onChange,name=_ref172.name,_ref172$accept=_ref172.accept,accept=_ref172$accept===void 0?'image/*':_ref172$accept,value=_ref172.value;function handleFileChange(e){if(!e.target.files){return;}var fileUrls=Array.from(e.target.files).map(function(file){return URL.createObjectURL(file);});onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};var LazyColorControl=lazy(function(){return import('./Color-b91a1b1e.js');});var ColorControl=function ColorControl(props){return React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyColorControl,Object.assign({},props)));};var Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};var NoControl=function NoControl(){return React__default.createElement(React__default.Fragment,null,"-");};var ArgControl=function ArgControl(_ref173){var row=_ref173.row,arg=_ref173.arg,updateArgs=_ref173.updateArgs;var key=row.key,control=row.control;var _useState35=useState(false),_useState36=_slicedToArray(_useState35,2),isFocused=_useState36[0],setFocused=_useState36[1];// box because arg can be a fn (e.g. actions) and useState calls fn's
|
|
2049
2049
|
var _useState37=useState({value:arg}),_useState38=_slicedToArray(_useState37,2),boxedValue=_useState38[0],setBoxedValue=_useState38[1];useEffect(function(){if(!isFocused)setBoxedValue({value:arg});},[isFocused,arg]);var onChange=useCallback(function(argVal){setBoxedValue({value:argVal});updateArgs(_defineProperty2({},key,argVal));return argVal;},[updateArgs,key]);var onBlur=useCallback(function(){return setFocused(false);},[]);var onFocus=useCallback(function(){return setFocused(true);},[]);if(!control||control.disable)return React__default.createElement(NoControl,null);// row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
|
|
2050
2050
|
// row.key is a hash key and therefore a much safer choice
|
|
2051
2051
|
var props={name:key,argType:row,value:boxedValue.value,onChange:onChange,onBlur:onBlur,onFocus:onFocus};var Control=Controls[control.type]||NoControl;return React__default.createElement(Control,Object.assign({},props,control,{controlType:control.type}));};var Name=styled.span({fontWeight:'bold'});var Required=styled.span(function(_ref174){var theme=_ref174.theme;return{color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:'help'};});var Description=styled.div(function(_ref175){var theme=_ref175.theme;return{'&&':{p:{margin:'0 0 10px 0'},a:{color:theme.color.secondary}},code:Object.assign(Object.assign({},codeCommon({theme:theme})),{fontSize:12,fontFamily:theme.typography.fonts.mono}),'& code':{margin:0,display:'inline-block'},'& pre > code':{whiteSpace:'pre-wrap'}};});var Type=styled.div(function(_ref176){var theme=_ref176.theme,hasDescription=_ref176.hasDescription;return{color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?4:0};});var TypeWithJsDoc=styled.div(function(_ref177){var theme=_ref177.theme,hasDescription=_ref177.hasDescription;return{color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12};});var StyledTd$1=styled.td(function(_ref178){var theme=_ref178.theme,expandable=_ref178.expandable;return{paddingLeft:expandable?'40px !important':'20px !important'};});var ArgRow=function ArgRow(props){var _a;var row=props.row,updateArgs=props.updateArgs,compact=props.compact,expandable=props.expandable,initialExpandedArgs=props.initialExpandedArgs;var name=row.name,description=row.description;var table=row.table||{};var type=table.type||row.type;var defaultValue=table.defaultValue||row.defaultValue;var required=(_a=row.type)===null||_a===void 0?void 0:_a.required;var hasDescription=description!=null&&description!=='';return React__default.createElement("tr",null,React__default.createElement(StyledTd$1,{expandable:expandable},React__default.createElement(Name,null,name),required?React__default.createElement(Required,{title:"Required"},"*"):null),compact?null:React__default.createElement("td",null,hasDescription&&React__default.createElement(Description,null,React__default.createElement(Markdown,null,description)),table.jsDocTags!=null?React__default.createElement(React__default.Fragment,null,React__default.createElement(TypeWithJsDoc,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs})),React__default.createElement(ArgJsDoc,{tags:table.jsDocTags})):React__default.createElement(Type,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs}))),compact?null:React__default.createElement("td",null,React__default.createElement(ArgValue,{value:defaultValue,initialExpandedArgs:initialExpandedArgs})),updateArgs?React__default.createElement("td",null,React__default.createElement(ArgControl,Object.assign({},props))):null);};var ExpanderIcon=styled(Icons)(function(_ref179){var theme=_ref179.theme;return{marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==='light'?curriedTransparentize$1(0.25,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),border:'none',display:'inline-block'};});var FlexWrapper=styled.span(function(_ref180){var theme=_ref180.theme;return{display:'flex',lineHeight:'20px',alignItems:'center'};});var Section=styled.td(function(_ref181){var theme=_ref181.theme;return{position:'relative',letterSpacing:'0.35em',textTransform:'uppercase',fontWeight:theme.typography.weight.black,fontSize:theme.typography.size.s1-1,color:theme.base==='light'?curriedTransparentize$1(0.4,theme.color.defaultText):curriedTransparentize$1(0.6,theme.color.defaultText),background:"".concat(theme.background.app," !important"),'& ~ td':{background:"".concat(theme.background.app," !important")}};});var Subsection=styled.td(function(_ref182){var theme=_ref182.theme;return{position:'relative',fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.content};});var StyledTd=styled.td(function(_ref183){var theme=_ref183.theme;return{position:'relative'};});var StyledTr=styled.tr(function(_ref184){var theme=_ref184.theme;return{'&:hover > td':{backgroundColor:"".concat(theme.background.hoverable," !important"),boxShadow:"".concat(theme.color.mediumlight," 0 - 1px 0 0 inset"),cursor:'row-resize'}};});var ClickIntercept=styled.button(function(){return{// reset button style
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, aW as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b2 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, aZ as NumberControl, X as OL, a$ as ObjectControl, a_ as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b0 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b1 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, aY as format, at as getStoryHref, al as interleaveSeparators, b3 as nameSpaceClassNames, aX as parse, D as resetComponents } from './index-
|
|
2
|
+
export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, aW as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b2 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, aZ as NumberControl, X as OL, a$ as ObjectControl, a_ as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b0 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b1 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, aY as format, at as getStoryHref, al as interleaveSeparators, b3 as nameSpaceClassNames, aX as parse, D as resetComponents } from './index-37675b63.js';
|
|
3
3
|
import '@storybook/theming';
|
|
4
4
|
import '@storybook/csf';
|
|
5
5
|
import '@storybook/client-logger';
|
|
@@ -50,7 +50,7 @@ import "core-js/modules/es.set.js";
|
|
|
50
50
|
import "core-js/modules/es.string.trim.js";
|
|
51
51
|
import "core-js/modules/esnext.global-this.js";
|
|
52
52
|
import "core-js/modules/es.object.entries.js";
|
|
53
|
-
import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoize, d as dedent, b as __awaiter, S as ScrollArea, e as __rest, A as ActionBar, w as window_1 } from './index-
|
|
53
|
+
import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoize, d as dedent, b as __awaiter, S as ScrollArea, e as __rest, A as ActionBar, w as window_1 } from './index-37675b63.js';
|
|
54
54
|
import React__default, { useState } from 'react';
|
|
55
55
|
import { logger } from '@storybook/client-logger';
|
|
56
56
|
import { styled } from '@storybook/theming';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, e as __rest } from './index-
|
|
1
|
+
import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, e as __rest } from './index-1368aba1.js';
|
|
2
2
|
import React__default, { useRef, useMemo, useEffect, useState, useCallback, useLayoutEffect } from 'react';
|
|
3
3
|
import { styled } from '@storybook/theming';
|
|
4
4
|
import '@storybook/csf';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { f as basePlacements, t as top, l as left, g as bottom, r as right, h as end, v as viewport, s as start, p as popper, i as clippingParents, j as reference, k as variationPlacements, n as placements, o as auto, q as modifierPhases, u as _inheritsLoose, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoize, e as __rest, w as window_1 } from './index-
|
|
1
|
+
import { f as basePlacements, t as top, l as left, g as bottom, r as right, h as end, v as viewport, s as start, p as popper, i as clippingParents, j as reference, k as variationPlacements, n as placements, o as auto, q as modifierPhases, u as _inheritsLoose, a as _extends, _ as _objectWithoutPropertiesLoose, m as memoize, e as __rest, w as window_1 } from './index-1368aba1.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default, { Component, useState, useCallback, useEffect } from 'react';
|
|
4
4
|
import { styled, lighten, darken } from '@storybook/theming';
|
|
@@ -294,7 +294,7 @@ var curriedOpacify=/*#__PURE__*/curry/* ::<number | string, string, string> */(o
|
|
|
294
294
|
* background: "rgba(255,0,0,0.3)";
|
|
295
295
|
* }
|
|
296
296
|
*/function transparentize(amount,color){if(color==='transparent')return color;var parsedColor=parseToRgb(color);var alpha=typeof parsedColor.alpha==='number'?parsedColor.alpha:1;var colorWithAlpha=_extends({},parsedColor,{alpha:guard(0,1,+(alpha*100-parseFloat(amount)*100).toFixed(2)/100)});return rgba(colorWithAlpha);}// prettier-ignore
|
|
297
|
-
var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=lazy(()=>import('./syntaxhighlighter-
|
|
297
|
+
var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const headerCommon=({theme})=>({margin:'20px 0 8px',padding:0,cursor:'text',position:'relative',color:theme.color.defaultText,'&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}});const codeCommon=({theme})=>({lineHeight:1,margin:'0 2px',padding:'3px 5px',whiteSpace:'nowrap',borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==='light'?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),backgroundColor:theme.base==='light'?theme.color.lighter:theme.color.border});const withReset=({theme})=>({fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',WebkitTapHighlightColor:'rgba(0, 0, 0, 0)',WebkitOverflowScrolling:'touch'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=styled(Link$1)(withReset,({theme})=>({fontSize:'inherit',lineHeight:'24px',color:theme.color.secondary,textDecoration:'none','&.absent':{color:'#cc0000'},'&.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0}}));const Blockquote=styled.blockquote(withReset,withMargin,({theme})=>({borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}}));const Wrapper$8=styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=lazy(()=>import('./syntaxhighlighter-7918e0a9.js'));const SyntaxHighlighter=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
|
|
298
298
|
fontSize:`${theme.typography.size.s2-1}px`,lineHeight:'19px',margin:'25px 0 40px',borderRadius:theme.appBorderRadius,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0','pre.prismjs':{padding:20,background:'inherit'}}));var SourceError;(function(SourceError){SourceError["NO_STORY"]="There\u2019s no story here.";SourceError["SOURCE_UNAVAILABLE"]="Oh no! The source is not available.";})(SourceError||(SourceError={}));const SourceSkeletonWrapper=styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0',margin:'25px 0 40px',padding:'20px 20px 20px 22px'}));const SourceSkeletonPlaceholder=styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:'60%','&:first-child':{margin:0}}));const SourceSkeleton=()=>React__default.createElement(SourceSkeletonWrapper,null,React__default.createElement(SourceSkeletonPlaceholder,null),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'30%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}));/**
|
|
299
299
|
* Syntax-highlighted source code for a component (or anything!)
|
|
300
300
|
*/const Source=props=>{const{isLoading,error}=props;if(isLoading){return React__default.createElement(SourceSkeleton,null);}if(error){return React__default.createElement(EmptyBlock,null,error);}const _a=props,{language,code,dark,format}=_a,rest=__rest(_a,["language","code","dark","format"]);const syntaxHighlighter=React__default.createElement(StyledSyntaxHighlighter,Object.assign({bordered:true,copyable:true,format:format,language:language,className:"docblock-source"},rest),code);if(typeof dark==='undefined'){return syntaxHighlighter;}const overrideTheme=dark?themes.dark:themes.light;return React__default.createElement(ThemeProvider,{theme:convert(overrideTheme)},syntaxHighlighter);};Source.defaultProps={format:false};const isReactChildString=child=>typeof child==='string';const isInlineCodeRegex=/[\n\r]/g;const DefaultCodeBlock=styled.code(({theme})=>({// from reset
|
|
@@ -310,7 +310,7 @@ const icons={mobile:'M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.7
|
|
|
310
310
|
shapeRendering:'inherit',transform:'translate3d(0,0,0)'},({inline})=>inline?{display:'inline-block'}:{display:'block'});Svg.displayName='Svg';const Path=styled.path({fill:'currentColor'});// TODO: if we can resize the 1024 to 20, we can remove the size attributes
|
|
311
311
|
const Icons=memo(_a=>{var{icon,symbol}=_a,props=__rest(_a,["icon","symbol"]);return React__default.createElement(Svg,Object.assign({viewBox:"0 0 1024 1024"},props),symbol?React__default.createElement("use",{xlinkHref:`#icon--${symbol}`}):React__default.createElement(Path,{d:icons[icon]}));});const Symbols=memo(({icons:keys=Object.keys(icons)})=>React__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{position:'absolute',width:0,height:0},"data-chromatic":"ignore"},keys.map(key=>React__default.createElement("symbol",{id:`icon--${key}`,key:key},React__default.createElement(Path,{d:icons[key]})))));// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
|
|
312
312
|
const LEFT_BUTTON=0;const isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey;const cancelled=(e,cb)=>{if(isPlainLeftClick(e)){e.preventDefault();cb(e);}};const LinkInner=styled.span(({withArrow})=>withArrow?{'> svg:last-of-type':{height:'0.7em',width:'0.7em',marginRight:0,marginLeft:'0.25em',bottom:'auto',verticalAlign:'inherit'}}:{},({containsIcon})=>containsIcon?{svg:{height:'1em',width:'1em',verticalAlign:'middle',position:'relative',bottom:0,marginRight:0}}:{});const A$1=styled.a(({theme})=>({display:'inline-block',transition:'all 150ms ease-out',textDecoration:'none',color:theme.color.secondary,'&:hover, &:focus':{cursor:'pointer',color:curriedDarken$1(0.07,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.07,theme.color.secondary)}},'&:active':{color:curriedDarken$1(0.1,theme.color.secondary),'svg path':{fill:curriedDarken$1(0.1,theme.color.secondary)}},svg:{display:'inline-block',height:'1em',width:'1em',verticalAlign:'text-top',position:'relative',bottom:'-0.125em',marginRight:'0.4em','& path':{fill:theme.color.secondary}}}),({theme,secondary,tertiary})=>{let colors;if(secondary){colors=[theme.color.mediumdark,theme.color.dark,theme.color.darker];}if(tertiary){colors=[theme.color.dark,theme.color.darkest,theme.color.mediumdark];}return colors?{color:colors[0],'svg path':{fill:colors[0]},'&:hover':{color:colors[1],'svg path':{fill:colors[1]}},'&:active':{color:colors[2],'svg path':{fill:colors[2]}}}:{};},({nochrome})=>nochrome?{color:'inherit','&:hover, &:active':{color:'inherit',textDecoration:'underline'}}:{},({theme,inverse})=>inverse?{color:theme.color.lightest,'svg path':{fill:theme.color.lightest},'&:hover':{color:theme.color.lighter,'svg path':{fill:theme.color.lighter}},'&:active':{color:theme.color.light,'svg path':{fill:theme.color.light}}}:{},({isButton})=>isButton?{border:0,borderRadius:0,background:'none',padding:0,fontSize:'inherit'}:{});const Link=_a=>{var{cancel,children,onClick,withArrow,containsIcon,className}=_a,rest=__rest(_a,["cancel","children","onClick","withArrow","containsIcon","className"]);return React__default.createElement(A$1,Object.assign({},rest,{onClick:onClick&&cancel?e=>cancelled(e,onClick):onClick,className:className}),React__default.createElement(LinkInner,{withArrow:withArrow,containsIcon:containsIcon},children,withArrow&&React__default.createElement(Icons,{icon:"arrowright"})));};Link.defaultProps={cancel:true,className:undefined,style:undefined,onClick:undefined,withArrow:false,containsIcon:false};const DocumentWrapper=styled.div(({theme})=>({fontSize:`${theme.typography.size.s2}px`,lineHeight:'1.6',h1:{fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.black},h2:{fontSize:`${theme.typography.size.m2}px`,borderBottom:`1px solid ${theme.appBorderColor}`},h3:{fontSize:`${theme.typography.size.m1}px`},h4:{fontSize:`${theme.typography.size.s3}px`},h5:{fontSize:`${theme.typography.size.s2}px`},h6:{fontSize:`${theme.typography.size.s2}px`,color:theme.color.dark},'pre:not(.prismjs)':{background:'transparent',border:'none',borderRadius:0,padding:0,margin:0},'pre pre, pre.prismjs':{padding:15,margin:0,whiteSpace:'pre-wrap',color:'inherit',fontSize:'13px',lineHeight:'19px'},'pre pre code, pre.prismjs code':{color:'inherit',fontSize:'inherit'},'pre code':{margin:0,padding:0,whiteSpace:'pre',border:'none',background:'transparent'},'pre code, pre tt':{backgroundColor:'transparent',border:'none'},/* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */'body > *:first-of-type':{marginTop:'0 !important'},'body > *:last-child':{marginBottom:'0 !important'},a:{color:theme.color.secondary,textDecoration:'none'},'a.absent':{color:'#cc0000'},'a.anchor':{display:'block',paddingLeft:30,marginLeft:-30,cursor:'pointer',position:'absolute',top:0,left:0,bottom:0},'h1, h2, h3, h4, h5, h6':{margin:'20px 0 10px',padding:0,cursor:'text',position:'relative','&:first-of-type':{marginTop:0,paddingTop:0},'&:hover a.anchor':{textDecoration:'none'},'& tt, & code':{fontSize:'inherit'}},'h1:first-of-type + h2':{marginTop:0,paddingTop:0},'p, blockquote, ul, ol, dl, li, table, pre':{margin:'15px 0'},hr:{border:'0 none',borderTop:`1px solid ${theme.appBorderColor}`,height:4,padding:0},'body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type':{marginTop:0,paddingTop:0},'body > h1:first-of-type + h2':{marginTop:0,paddingTop:0},'a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6':{marginTop:0,paddingTop:0},'h1 p, h2 p, h3 p, h4 p, h5 p, h6 p':{marginTop:0},'li p.first':{display:'inline-block'},'ul, ol':{paddingLeft:30,'& :first-of-type':{marginTop:0},'& :last-child':{marginBottom:0}},dl:{padding:0},'dl dt':{fontSize:'14px',fontWeight:'bold',fontStyle:'italic',margin:'0 0 15px',padding:'0 15px','&:first-of-type':{padding:0},'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}},blockquote:{borderLeft:`4px solid ${theme.color.medium}`,padding:'0 15px',color:theme.color.dark,'& > :first-of-type':{marginTop:0},'& > :last-child':{marginBottom:0}},table:{padding:0,borderCollapse:'collapse','& tr':{borderTop:`1px solid ${theme.appBorderColor}`,backgroundColor:'white',margin:0,padding:0,'& th':{fontWeight:'bold',border:`1px solid ${theme.appBorderColor}`,textAlign:'left',margin:0,padding:'6px 13px'},'& td':{border:`1px solid ${theme.appBorderColor}`,textAlign:'left',margin:0,padding:'6px 13px'},'&:nth-of-type(2n)':{backgroundColor:theme.color.lighter},'& th :first-of-type, & td :first-of-type':{marginTop:0},'& th :last-child, & td :last-child':{marginBottom:0}}},img:{maxWidth:'100%'},'span.frame':{display:'block',overflow:'hidden','& > span':{border:`1px solid ${theme.color.medium}`,display:'block',float:'left',overflow:'hidden',margin:'13px 0 0',padding:7,width:'auto'},'& span img':{display:'block',float:'left'},'& span span':{clear:'both',color:theme.color.darkest,display:'block',padding:'5px 0 0'}},'span.align-center':{display:'block',overflow:'hidden',clear:'both','& > span':{display:'block',overflow:'hidden',margin:'13px auto 0',textAlign:'center'},'& span img':{margin:'0 auto',textAlign:'center'}},'span.align-right':{display:'block',overflow:'hidden',clear:'both','& > span':{display:'block',overflow:'hidden',margin:'13px 0 0',textAlign:'right'},'& span img':{margin:0,textAlign:'right'}},'span.float-left':{display:'block',marginRight:13,overflow:'hidden',float:'left','& span':{margin:'13px 0 0'}},'span.float-right':{display:'block',marginLeft:13,overflow:'hidden',float:'right','& > span':{display:'block',overflow:'hidden',margin:'13px auto 0',textAlign:'right'}},'code, tt':{margin:'0 2px',padding:'0 5px',whiteSpace:'nowrap',border:`1px solid ${theme.color.mediumlight}`,backgroundColor:theme.color.lighter,borderRadius:3,color:theme.base==='dark'&&theme.color.darkest}}));const Container$1=styled.div(({theme})=>({position:'absolute',bottom:0,right:0,maxWidth:'100%',display:'flex',background:theme.background.content,zIndex:1}));const ActionButton=styled.button(({theme})=>({margin:0,border:'0 none',padding:'4px 10px',cursor:'pointer',display:'flex',alignItems:'center',color:theme.color.defaultText,background:theme.background.content,fontSize:12,lineHeight:'16px',fontFamily:theme.typography.fonts.base,fontWeight:theme.typography.weight.bold,borderTop:`1px solid ${theme.appBorderColor}`,borderLeft:`1px solid ${theme.appBorderColor}`,marginLeft:-1,borderRadius:`4px 0 0 0`,'&:not(:last-child)':{borderRight:`1px solid ${theme.appBorderColor}`},'& + *':{borderLeft:`1px solid ${theme.appBorderColor}`,borderRadius:0},'&:focus':{boxShadow:`${theme.color.secondary} 0 -3px 0 0 inset`,outline:'0 none'}}),({disabled})=>disabled&&{cursor:'not-allowed',opacity:0.5});ActionButton.displayName='ActionButton';const ActionBar=_a=>{var{actionItems}=_a,props=__rest(_a,["actionItems"]);return React__default.createElement(Container$1,Object.assign({},props),actionItems.map(({title,className,onClick,disabled},index)=>// eslint-disable-next-line react/no-array-index-key
|
|
313
|
-
React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){case!!(outer&&col):{return{marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};}case!!(outer&&row):{return{marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};}default:{return{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=styled.div();const Message$1=styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=Children.toArray(children);return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=lazy(()=>import('./GlobalScrollAreaStyles-8793ce4a.js'));const OverlayScrollbars=lazy(()=>import('./OverlayScrollbars-
|
|
313
|
+
React__default.createElement(ActionButton,{key:index,className:className,onClick:onClick,disabled:disabled},title)));};const toNumber=input=>typeof input==='number'?input:Number(input);const Container=styled.div(({theme,col,row=1})=>col?{display:'inline-block',verticalAlign:'inherit','& > *':{marginLeft:col*theme.layoutMargin,verticalAlign:'inherit'},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginLeft:0}}:{'& > *':{marginTop:row*theme.layoutMargin},[`& > *:first-child${ignoreSsrWarning$1}`]:{marginTop:0}},({theme,outer,col,row})=>{switch(true){case!!(outer&&col):{return{marginLeft:outer*theme.layoutMargin,marginRight:outer*theme.layoutMargin};}case!!(outer&&row):{return{marginTop:outer*theme.layoutMargin,marginBottom:outer*theme.layoutMargin};}default:{return{};}}});const Spaced=_a=>{var{col,row,outer,children}=_a,rest=__rest(_a,["col","row","outer","children"]);const outerAmount=toNumber(typeof outer==='number'||!outer?outer:col||row);return React__default.createElement(Container,Object.assign({col:col,row:row,outer:outerAmount},rest),children);};const Title$3=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold}));const Desc$1=styled.div();const Message$1=styled.div(({theme})=>({padding:30,textAlign:'center',color:theme.color.defaultText,fontSize:theme.typography.size.s2-1}));const Placeholder=_a=>{var{children}=_a,props=__rest(_a,["children"]);const[title,desc]=Children.toArray(children);return React__default.createElement(Message$1,Object.assign({},props),React__default.createElement(Title$3,null,title),desc&&React__default.createElement(Desc$1,null,desc));};const GlobalScrollAreaStyles=lazy(()=>import('./GlobalScrollAreaStyles-8793ce4a.js'));const OverlayScrollbars=lazy(()=>import('./OverlayScrollbars-36a63f08.js'));const Scroller=_a=>{var props=__rest(_a,["horizontal","vertical"]);return React__default.createElement(Suspense,{fallback:React__default.createElement("div",Object.assign({},props))},React__default.createElement(GlobalScrollAreaStyles,null),React__default.createElement(OverlayScrollbars,Object.assign({options:{scrollbars:{autoHide:'leave'}}},props)));};const ScrollArea=styled(Scroller)(({vertical})=>!vertical?{overflowY:'hidden'}:{overflowY:'auto',height:'100%'},({horizontal})=>!horizontal?{overflowX:'hidden'}:{overflowX:'auto',width:'100%'});ScrollArea.defaultProps={horizontal:false,vertical:false};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getAugmentedNamespace(n){if(n.__esModule)return n;var a=Object.defineProperty({},'__esModule',{value:true});Object.keys(n).forEach(function(k){var d=Object.getOwnPropertyDescriptor(n,k);Object.defineProperty(a,k,d.get?d:{enumerable:true,get:function(){return n[k];}});});return a;}function commonjsRequire(path){throw new Error('Could not dynamically require "'+path+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');}var win;if(typeof window!=="undefined"){win=window;}else if(typeof commonjsGlobal!=="undefined"){win=commonjsGlobal;}else if(typeof self!=="undefined"){win=self;}else{win={};}var window_1=win;const{window:globalWindow$2}=window_1;function browserSupportsCssZoom(){try{return globalWindow$2.document.implementation.createHTMLDocument('').body.style.zoom!==undefined;}catch(error){return false;}}const ZoomElementWrapper=styled.div(({scale=1,height})=>browserSupportsCssZoom()?{'> *':{zoom:1/scale}}:{height:height+50,transformOrigin:'top left',transform:`scale(${1/scale})`});function ZoomElement({scale,children}){const componentWrapperRef=useRef(null);const[height,setHeight]=useState(0);useEffect(()=>{if(componentWrapperRef.current){setHeight(componentWrapperRef.current.getBoundingClientRect().height);}},[scale,componentWrapperRef.current]);return React__default.createElement(ZoomElementWrapper,{scale:scale,height:height},React__default.createElement("div",{ref:componentWrapperRef,className:"innerZoomElementWrapper"},children));}class ZoomIFrame extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{iFrameRef}=this.props;this.iframe=iFrameRef.current;}shouldComponentUpdate(nextProps){const{scale,active}=this.props;if(scale!==nextProps.scale){this.setIframeInnerZoom(nextProps.scale);}if(active!==nextProps.active){this.iframe.setAttribute('data-is-storybook',nextProps.active?'true':'false');}// this component renders an iframe, which gets updates via post-messages
|
|
314
314
|
// never update this component, it will cause the iframe to refresh
|
|
315
315
|
return false;}setIframeInnerZoom(scale){try{if(browserSupportsCssZoom()){Object.assign(this.iframe.contentDocument.body.style,{zoom:1/scale});}else{Object.assign(this.iframe.contentDocument.body.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}}catch(e){this.setIframeZoom(scale);}}setIframeZoom(scale){Object.assign(this.iframe.style,{width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}render(){const{children}=this.props;return children;}}const Zoom$1={Element:ZoomElement,IFrame:ZoomIFrame};const ButtonWrapper=styled.button(({small,theme})=>({border:0,borderRadius:'3em',cursor:'pointer',display:'inline-block',overflow:'hidden',padding:small?'8px 16px':'13px 20px',position:'relative',textAlign:'center',textDecoration:'none',transition:'all 150ms ease-out',transform:'translate3d(0,0,0)',verticalAlign:'top',whiteSpace:'nowrap',userSelect:'none',opacity:1,margin:0,background:'transparent',fontSize:`${small?theme.typography.size.s1:theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:'1',svg:{display:'inline-block',height:small?14:16,width:small?14:16,verticalAlign:'top',marginRight:small?4:6,marginTop:small?-1:-2,marginBottom:small?-1:-2,/* Necessary for js mouse events to not glitch out when hovering on svgs */pointerEvents:'none',path:{fill:'currentColor'}}}),({disabled})=>disabled?{cursor:'not-allowed !important',opacity:0.5,'&:hover':{transform:'none'}}:{},({containsIcon,small})=>containsIcon?Object.assign({svg:{display:'block',margin:0}},small?{padding:9}:{padding:12}):{},({theme,primary,secondary,gray})=>{let color;if(gray){color=theme.color.medium;}else if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return color?{background:color,color:gray?theme.color.darkest:theme.color.lightest,'&:hover':{background:curriedDarken$1(0.05,color)},'&:active':{boxShadow:'rgba(0, 0, 0, 0.1) 0 0 0 3em inset'},'&:focus':{boxShadow:`${rgba(color,1)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${rgba(color,0.2)} 0 8px 18px 0px`}}:{};},({theme,tertiary,inForm,small})=>tertiary?Object.assign(Object.assign({background:theme.base==='light'?curriedDarken$1(0.02,theme.input.background):curriedLighten$1(0.02,theme.input.background),color:theme.input.color,boxShadow:`${theme.input.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius},inForm&&small?{padding:'10px 16px'}:{}),{'&:hover':Object.assign({background:theme.base==='light'?curriedDarken$1(0.05,theme.input.background):curriedLighten$1(0.05,theme.input.background)},inForm?{}:{boxShadow:'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'}),'&:active':{background:theme.input.background},'&:focus':{boxShadow:`${rgba(theme.color.secondary,1)} 0 0 0 1px inset`,outline:'none'}}):{},({theme,outline})=>outline?{boxShadow:`${curriedTransparentize$1(0.8,theme.color.defaultText)} 0 0 0 1px inset`,color:curriedTransparentize$1(0.3,theme.color.defaultText),background:'transparent','&:hover, &:focus':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 1px inset`,outline:'none'},'&:active':{boxShadow:`${curriedTransparentize$1(0.5,theme.color.defaultText)} 0 0 0 2px inset`,color:curriedTransparentize$1(0,theme.color.defaultText)}}:{},({theme,outline,primary})=>{const color=theme.color.primary;return outline&&primary?{boxShadow:`${color} 0 0 0 1px inset`,color,'svg path':{fill:color},'&:hover':{boxShadow:`${color} 0 0 0 1px inset`,background:'transparent'},'&:active':{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},'&:focus':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};},({theme,outline,primary,secondary})=>{let color;if(secondary){color=theme.color.secondary;}else if(primary){color=theme.color.primary;}return outline&&color?{boxShadow:`${color} 0 0 0 1px inset`,color,'svg path':{fill:color},'&:hover':{boxShadow:`${color} 0 0 0 1px inset`,background:'transparent'},'&:active':{background:color,boxShadow:`${color} 0 0 0 1px inset`,color:theme.color.tertiary},'&:focus':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.4)} 0 1px 9px 2px`,outline:'none'},'&:focus:hover':{boxShadow:`${color} 0 0 0 1px inset, ${rgba(color,0.2)} 0 8px 18px 0px`}}:{};});const ButtonLink=ButtonWrapper.withComponent('a');const Button$2=Object.assign(forwardRef((_a,ref)=>{var{isLink,children}=_a,props=__rest(_a,["isLink","children"]);if(isLink){return React__default.createElement(ButtonLink,Object.assign({},props,{ref:ref}),children);}return React__default.createElement(ButtonWrapper,Object.assign({},props,{ref:ref}),children);}),{defaultProps:{isLink:false}});const Wrapper$7=styled.label(({theme})=>({display:'flex',borderBottom:`1px solid ${theme.appBorderColor}`,margin:'0 15px',padding:'8px 0','&:last-child':{marginBottom:'3rem'}}));const Label$4=styled.span(({theme})=>({minWidth:100,fontWeight:theme.typography.weight.bold,marginRight:15,display:'flex',justifyContent:'flex-start',alignItems:'center',lineHeight:'16px'}));const Field=_a=>{var{label,children}=_a,props=__rest(_a,["label","children"]);return React__default.createElement(Wrapper$7,Object.assign({},props),label?React__default.createElement(Label$4,null,React__default.createElement("span",null,label)):null,children);};Field.defaultProps={label:undefined};function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}var index$1=useLayoutEffect;var useLatest=function useLatest(value){var ref=useRef(value);index$1(function(){ref.current=value;});return ref;};var updateRef=function updateRef(ref,value){if(typeof ref==='function'){ref(value);return;}ref.current=value;};var useComposedRef=function useComposedRef(libRef,userRef){var prevUserRef=useRef();return useCallback(function(instance){libRef.current=instance;if(prevUserRef.current){updateRef(prevUserRef.current,null);}prevUserRef.current=userRef;if(!userRef){return;}updateRef(userRef,instance);},[userRef]);};var HIDDEN_TEXTAREA_STYLE={'min-height':'0','max-height':'none',height:'0',visibility:'hidden',overflow:'hidden',position:'absolute','z-index':'-1000',top:'0',right:'0'};var forceHiddenStyles=function forceHiddenStyles(node){Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(function(key){node.style.setProperty(key,HIDDEN_TEXTAREA_STYLE[key],'important');});};// export type CalculatedNodeHeights = [height: number, rowHeight: number];
|
|
316
316
|
// https://github.com/microsoft/TypeScript/issues/28259
|
|
@@ -325,7 +325,7 @@ if(boxSizing===''){return null;}// IE (Edge has already correct behaviour) retur
|
|
|
325
325
|
if(isIE&&boxSizing==='border-box'){sizingStyle.width=parseFloat(sizingStyle.width)+parseFloat(sizingStyle.borderRightWidth)+parseFloat(sizingStyle.borderLeftWidth)+parseFloat(sizingStyle.paddingRight)+parseFloat(sizingStyle.paddingLeft)+'px';}var paddingSize=parseFloat(sizingStyle.paddingBottom)+parseFloat(sizingStyle.paddingTop);var borderSize=parseFloat(sizingStyle.borderBottomWidth)+parseFloat(sizingStyle.borderTopWidth);return{sizingStyle:sizingStyle,paddingSize:paddingSize,borderSize:borderSize};};var useWindowResizeListener=function useWindowResizeListener(listener){var latestListener=useLatest(listener);useLayoutEffect(function(){var handler=function handler(event){latestListener.current(event);};window.addEventListener('resize',handler);return function(){window.removeEventListener('resize',handler);};},[]);};var TextareaAutosize=function TextareaAutosize(_ref,userRef){var cacheMeasurements=_ref.cacheMeasurements,maxRows=_ref.maxRows,minRows=_ref.minRows,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?noop$2:_ref$onChange,_ref$onHeightChange=_ref.onHeightChange,onHeightChange=_ref$onHeightChange===void 0?noop$2:_ref$onHeightChange,props=_objectWithoutPropertiesLoose(_ref,["cacheMeasurements","maxRows","minRows","onChange","onHeightChange"]);if(process.env.NODE_ENV!=='production'&&props.style){if('maxHeight'in props.style){throw new Error('Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.');}if('minHeight'in props.style){throw new Error('Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.');}}var isControlled=props.value!==undefined;var libRef=useRef(null);var ref=useComposedRef(libRef,userRef);var heightRef=useRef(0);var measurementsCacheRef=useRef();var resizeTextarea=function resizeTextarea(){var node=libRef.current;var nodeSizingData=cacheMeasurements&&measurementsCacheRef.current?measurementsCacheRef.current:getSizingData(node);if(!nodeSizingData){return;}measurementsCacheRef.current=nodeSizingData;var _calculateNodeHeight=calculateNodeHeight(nodeSizingData,node.value||node.placeholder||'x',minRows,maxRows),height=_calculateNodeHeight[0],rowHeight=_calculateNodeHeight[1];if(heightRef.current!==height){heightRef.current=height;node.style.setProperty('height',height+"px",'important');onHeightChange(height,{rowHeight:rowHeight});}};var handleChange=function handleChange(event){if(!isControlled){resizeTextarea();}onChange(event);};{useLayoutEffect(resizeTextarea);useWindowResizeListener(resizeTextarea);}return/*#__PURE__*/createElement("textarea",_extends({},props,{onChange:handleChange,ref:ref}));};var index=/* #__PURE__ */forwardRef(TextareaAutosize);const TextareaAutoResize=index;const styleResets$1={// resets
|
|
326
326
|
appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};const styles=({theme})=>Object.assign(Object.assign({},styleResets$1),{transition:'box-shadow 200ms ease-out, opacity 200ms ease-out',color:theme.input.color||'inherit',background:theme.input.background,boxShadow:`${theme.input.border} 0 0 0 1px inset`,borderRadius:theme.input.borderRadius,fontSize:theme.typography.size.s2-1,lineHeight:'20px',padding:'6px 10px','&:focus':{boxShadow:`${theme.color.secondary} 0 0 0 1px inset`,outline:'none'},'&[disabled]':{cursor:'not-allowed',opacity:0.5},'&:-webkit-autofill':{WebkitBoxShadow:`0 0 0 3em ${theme.color.lightest} inset`},'::placeholder':{color:theme.color.mediumdark}});const sizes=({size})=>{switch(size){case'100%':{return{width:'100%'};}case'flex':{return{flex:1};}case'auto':default:{return{display:'inline'};}}};const alignment=({align})=>{switch(align){case'end':{return{textAlign:'right'};}case'center':{return{textAlign:'center'};}case'start':default:{return{textAlign:'left'};}}};const validation=({valid,theme})=>{switch(valid){case'valid':{return{boxShadow:`${theme.color.positive} 0 0 0 1px inset !important`};}case'error':{return{boxShadow:`${theme.color.negative} 0 0 0 1px inset !important`};}case'warn':{return{boxShadow:`${theme.color.warning} 0 0 0 1px inset`};}case undefined:case null:default:{return{};}}};const Input$1=Object.assign(styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement("input",Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,{minHeight:32}),{displayName:'Input'});const Select=Object.assign(styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement("select",Object.assign({},props,{ref:ref}));}))(styles,sizes,validation,{height:32,userSelect:'none',paddingRight:20,appearance:'menulist'}),{displayName:'Select'});const Textarea=Object.assign(styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement(TextareaAutoResize,Object.assign({},props,{ref:ref}));}))(styles,sizes,alignment,validation,({height=400})=>({overflow:'visible',maxHeight:height})),{displayName:'Textarea'});const ButtonStyled=styled(forwardRef((_a,ref)=>{var props=__rest(_a,["size","valid","align"]);return React__default.createElement(Button$2,Object.assign({},props,{ref:ref}));}))(sizes,validation,{// Custom styling for color widget nested in buttons
|
|
327
327
|
userSelect:'none',overflow:'visible',zIndex:2,// overrides the default hover from Button
|
|
328
|
-
'&:hover':{transform:'none'}});const Button$1=Object.assign(forwardRef((props,ref)=>React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=lazy(()=>import('./WithTooltip-
|
|
328
|
+
'&:hover':{transform:'none'}});const Button$1=Object.assign(forwardRef((props,ref)=>React__default.createElement(ButtonStyled,Object.assign({},props,{tertiary:true,small:true,inForm:true},{ref:ref}))),{displayName:'Button'});const Form=Object.assign(styled.form({boxSizing:'border-box',width:'100%'}),{Field,Input:Input$1,Select,Textarea,Button:Button$1});const LazyWithTooltip=lazy(()=>import('./WithTooltip-37c63930.js').then(mod=>({default:mod.WithTooltip})));const WithTooltip=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltip,Object.assign({},props)));const LazyWithTooltipPure=lazy(()=>import('./WithTooltip-37c63930.js').then(mod=>({default:mod.WithTooltipPure})));const WithTooltipPure=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyWithTooltipPure,Object.assign({},props)));const Title$2=styled.div(({theme})=>({fontWeight:theme.typography.weight.black}));const Desc=styled.span();const Links=styled.div(({theme})=>({marginTop:8,textAlign:'center','> *':{margin:'0 8px',fontWeight:theme.typography.weight.black}}));const Message=styled.div(({theme})=>({color:theme.textColor,lineHeight:'18px'}));const MessageWrapper=styled.div({padding:15,width:280,boxSizing:'border-box'});const TooltipMessage=({title,desc,links})=>{return React__default.createElement(MessageWrapper,null,React__default.createElement(Message,null,title&&React__default.createElement(Title$2,null,title),desc&&React__default.createElement(Desc,null,desc)),links&&React__default.createElement(Links,null,links.map(_a=>{var{title:linkTitle}=_a,other=__rest(_a,["title"]);return React__default.createElement(Link,Object.assign({},other,{key:linkTitle}),linkTitle);})));};TooltipMessage.defaultProps={title:null,desc:null,links:null};const Note=styled.div(({theme})=>({padding:'2px 6px',lineHeight:'16px',fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:'0 0 5px 0 rgba(0, 0, 0, 0.3)',borderRadius:4,whiteSpace:'nowrap',pointerEvents:'none',zIndex:-1,background:theme.base==='light'?'rgba(60, 60, 60, 0.9)':'rgba(20, 20, 20, 0.85)',margin:6}));const TooltipNote=_a=>{var{note}=_a,props=__rest(_a,["note"]);return React__default.createElement(Note,Object.assign({},props),note);};var memoizerific={exports:{}};(function(module,exports){(function(f){{module.exports=f();}})(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof commonjsRequire=="function"&&commonjsRequire;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f;}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e);},l,l.exports,e,t,n,r);}return n[o].exports;}var i=typeof commonjsRequire=="function"&&commonjsRequire;for(var o=0;o<r.length;o++)s(r[o]);return s;}({1:[function(_dereq_,module,exports){module.exports=function(forceSimilar){if(typeof Map!=='function'||forceSimilar){var Similar=_dereq_('./similar');return new Similar();}else{return new Map();}};},{"./similar":2}],2:[function(_dereq_,module,exports){function Similar(){this.list=[];this.lastItem=undefined;this.size=0;return this;}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return this.lastItem.val;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return this.list[index].val;}return undefined;};Similar.prototype.set=function(key,val){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem.val=val;return this;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];this.list[index].val=val;return this;}this.lastItem={key:key,val:val};this.list.push(this.lastItem);this.size++;return this;};Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){this.lastItem=undefined;}index=this.indexOf(key);if(index>=0){this.size--;return this.list.splice(index,1)[0];}return undefined;};// important that has() doesn't use get() in case an existing key has a falsy value, in which case has() would return false
|
|
329
329
|
Similar.prototype.has=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)){return true;}index=this.indexOf(key);if(index>=0){this.lastItem=this.list[index];return true;}return false;};Similar.prototype.forEach=function(callback,thisArg){var i;for(i=0;i<this.size;i++){callback.call(thisArg||this,this.list[i].val,this.list[i].key,this);}};Similar.prototype.indexOf=function(key){var i;for(i=0;i<this.size;i++){if(this.isEqual(this.list[i].key,key)){return i;}}return-1;};// check if the numbers are equal, or whether they are both precisely NaN (isNaN returns true for all non-numbers)
|
|
330
330
|
Similar.prototype.isEqual=function(val1,val2){return val1===val2||val1!==val1&&val2!==val2;};module.exports=Similar;},{}],3:[function(_dereq_,module,exports){var MapOrSimilar=_dereq_('map-or-similar');module.exports=function(limit){var cache=new MapOrSimilar(undefined==='true'),lru=[];return function(fn){var memoizerific=function(){var currentCache=cache,newMap,fnResult,argsLengthMinusOne=arguments.length-1,lruPath=Array(argsLengthMinusOne+1),isMemoized=true,i;if((memoizerific.numArgs||memoizerific.numArgs===0)&&memoizerific.numArgs!==argsLengthMinusOne+1){throw new Error('Memoizerific functions should always be called with the same number of arguments');}// loop through each argument to traverse the map tree
|
|
331
331
|
for(i=0;i<argsLengthMinusOne;i++){lruPath[i]={cacheItem:currentCache,arg:arguments[i]};// climb through the hierarchical map tree until the second-last argument has been found, or an argument is missing.
|
|
@@ -438,8 +438,8 @@ var keys=[];if(parent){// If we aren't using plain objects, optionally prefix ke
|
|
|
438
438
|
if(!options.plainObjects&&has.call(Object.prototype,parent)){if(!options.allowPrototypes){return;}}keys.push(parent);}// Loop through children appending to the array until we hit depth
|
|
439
439
|
var i=0;while(options.depth>0&&(segment=child.exec(key))!==null&&i<options.depth){i+=1;if(!options.plainObjects&&has.call(Object.prototype,segment[1].slice(1,-1))){if(!options.allowPrototypes){return;}}keys.push(segment[1]);}// If there's a remainder, just add whatever is left
|
|
440
440
|
if(segment){keys.push('['+key.slice(segment.index)+']');}return parseObject(keys,val,options,valuesParsed);};var normalizeParseOptions=function normalizeParseOptions(opts){if(!opts){return defaults;}if(opts.decoder!==null&&opts.decoder!==undefined&&typeof opts.decoder!=='function'){throw new TypeError('Decoder has to be a function.');}if(typeof opts.charset!=='undefined'&&opts.charset!=='utf-8'&&opts.charset!=='iso-8859-1'){throw new TypeError('The charset option must be either utf-8, iso-8859-1, or undefined');}var charset=typeof opts.charset==='undefined'?defaults.charset:opts.charset;return{allowDots:typeof opts.allowDots==='undefined'?defaults.allowDots:!!opts.allowDots,allowPrototypes:typeof opts.allowPrototypes==='boolean'?opts.allowPrototypes:defaults.allowPrototypes,allowSparse:typeof opts.allowSparse==='boolean'?opts.allowSparse:defaults.allowSparse,arrayLimit:typeof opts.arrayLimit==='number'?opts.arrayLimit:defaults.arrayLimit,charset:charset,charsetSentinel:typeof opts.charsetSentinel==='boolean'?opts.charsetSentinel:defaults.charsetSentinel,comma:typeof opts.comma==='boolean'?opts.comma:defaults.comma,decoder:typeof opts.decoder==='function'?opts.decoder:defaults.decoder,delimiter:typeof opts.delimiter==='string'||utils.isRegExp(opts.delimiter)?opts.delimiter:defaults.delimiter,// eslint-disable-next-line no-implicit-coercion, no-extra-parens
|
|
441
|
-
depth:typeof opts.depth==='number'||opts.depth===false?+opts.depth:defaults.depth,ignoreQueryPrefix:opts.ignoreQueryPrefix===true,interpretNumericEntities:typeof opts.interpretNumericEntities==='boolean'?opts.interpretNumericEntities:defaults.interpretNumericEntities,parameterLimit:typeof opts.parameterLimit==='number'?opts.parameterLimit:defaults.parameterLimit,parseArrays:opts.parseArrays!==false,plainObjects:typeof opts.plainObjects==='boolean'?opts.plainObjects:defaults.plainObjects,strictNullHandling:typeof opts.strictNullHandling==='boolean'?opts.strictNullHandling:defaults.strictNullHandling};};var parse$
|
|
442
|
-
var keys=Object.keys(tempObj);for(var i=0;i<keys.length;++i){var key=keys[i];var newObj=parseKeys(key,tempObj[key],options,typeof str==='string');obj=utils.merge(obj,newObj,options);}if(options.allowSparse===true){return obj;}return utils.compact(obj);};var stringify=stringify_1;var parse$
|
|
441
|
+
depth:typeof opts.depth==='number'||opts.depth===false?+opts.depth:defaults.depth,ignoreQueryPrefix:opts.ignoreQueryPrefix===true,interpretNumericEntities:typeof opts.interpretNumericEntities==='boolean'?opts.interpretNumericEntities:defaults.interpretNumericEntities,parameterLimit:typeof opts.parameterLimit==='number'?opts.parameterLimit:defaults.parameterLimit,parseArrays:opts.parseArrays!==false,plainObjects:typeof opts.plainObjects==='boolean'?opts.plainObjects:defaults.plainObjects,strictNullHandling:typeof opts.strictNullHandling==='boolean'?opts.strictNullHandling:defaults.strictNullHandling};};var parse$4=function(str,opts){var options=normalizeParseOptions(opts);if(str===''||str===null||typeof str==='undefined'){return options.plainObjects?Object.create(null):{};}var tempObj=typeof str==='string'?parseValues(str,options):str;var obj=options.plainObjects?Object.create(null):{};// Iterate over the keys and setup the new object
|
|
442
|
+
var keys=Object.keys(tempObj);for(var i=0;i<keys.length;++i){var key=keys[i];var newObj=parseKeys(key,tempObj[key],options,typeof str==='string');obj=utils.merge(obj,newObj,options);}if(options.allowSparse===true){return obj;}return utils.compact(obj);};var stringify=stringify_1;var parse$3=parse$4;var formats=formats$3;var lib={formats:formats,parse:parse$3,stringify:stringify};const getStoryHref=(baseUrl,storyId,additionalParams={})=>{const[url,paramsStr]=baseUrl.split('?');const params=paramsStr?Object.assign(Object.assign(Object.assign({},lib.parse(paramsStr)),additionalParams),{id:storyId}):Object.assign(Object.assign({},additionalParams),{id:storyId});return`${url}${lib.stringify(params,{addQueryPrefix:true,encode:false})}`;};const Zoom=({zoom,resetZoom})=>React__default.createElement(React__default.Fragment,null,React__default.createElement(IconButton,{key:"zoomin",onClick:e=>{e.preventDefault();zoom(0.8);},title:"Zoom in"},React__default.createElement(Icons,{icon:"zoom"})),React__default.createElement(IconButton,{key:"zoomout",onClick:e=>{e.preventDefault();zoom(1.25);},title:"Zoom out"},React__default.createElement(Icons,{icon:"zoomout"})),React__default.createElement(IconButton,{key:"zoomreset",onClick:e=>{e.preventDefault();resetZoom();},title:"Reset zoom"},React__default.createElement(Icons,{icon:"zoomreset"})));const Eject=({baseUrl,storyId})=>React__default.createElement(IconButton,{key:"opener",href:getStoryHref(baseUrl,storyId),target:"_blank",title:"Open canvas in new tab"},React__default.createElement(Icons,{icon:"share"}));const Bar=styled(FlexBar)({position:'absolute',left:0,right:0,top:0,transition:'transform .2s linear'});const Toolbar=_a=>{var{isLoading,storyId,baseUrl,zoom,resetZoom}=_a,rest=__rest(_a,["isLoading","storyId","baseUrl","zoom","resetZoom"]);return React__default.createElement(Bar,Object.assign({},rest),React__default.createElement(Fragment,{key:"left"},isLoading?[1,2,3].map(key=>React__default.createElement(IconButtonSkeleton,{key:key})):React__default.createElement(Zoom,Object.assign({},{zoom,resetZoom}))),React__default.createElement(Fragment,{key:"right"},storyId&&(isLoading?React__default.createElement(IconButtonSkeleton,null):React__default.createElement(Eject,Object.assign({},{storyId,baseUrl})))));};const ZoomContext=createContext({scale:1});const{window:globalWindow$1}=window_1;class IFrame extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){const{id}=this.props;this.iframe=globalWindow$1.document.getElementById(id);}shouldComponentUpdate(nextProps){const{scale}=nextProps;// eslint-disable-next-line react/destructuring-assignment
|
|
443
443
|
if(scale!==this.props.scale){this.setIframeBodyStyle({width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:'top left'});}return false;}setIframeBodyStyle(style){return Object.assign(this.iframe.contentDocument.body.style,style);}render(){const _a=this.props,{id,title,src,allowFullScreen,scale}=_a,rest=__rest(_a,["id","title","src","allowFullScreen","scale"]);return React__default.createElement("iframe",Object.assign({id:id,title:title,src:src,allowFullScreen:allowFullScreen,// @ts-ignore
|
|
444
444
|
loading:"lazy"},rest));}}const rotate360=keyframes`
|
|
445
445
|
from {
|
|
@@ -466,7 +466,7 @@ if(CONFIG_TYPE!=='DEVELOPMENT'||!EventSource)return undefined;const eventSource=
|
|
|
466
466
|
* items. The preview also shows the source for the component
|
|
467
467
|
* as a drop-down.
|
|
468
468
|
*/const Preview=_a=>{var{isLoading,isColumn,columns,children,withSource,withToolbar=false,isExpanded=false,additionalActions,className}=_a,props=__rest(_a,["isLoading","isColumn","columns","children","withSource","withToolbar","isExpanded","additionalActions","className"]);const[expanded,setExpanded]=useState(isExpanded);const{source,actionItem}=getSource(withSource,expanded,setExpanded);const[scale,setScale]=useState(1);const previewClasses=[className].concat(['sbdocs','sbdocs-preview']);const defaultActionItems=withSource?[actionItem]:[];const[additionalActionItems,setAdditionalActionItems]=useState(additionalActions?[...additionalActions]:[]);const actionItems=[...defaultActionItems,...additionalActionItems];// @ts-ignore
|
|
469
|
-
const layout=getLayout(Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield import('./syntaxhighlighter-
|
|
469
|
+
const layout=getLayout(Children.count(children)===1?[children]:children);const{window:globalWindow}=window_1;const copyToClipboard=useCallback(text=>__awaiter(void 0,void 0,void 0,function*(){const{createCopyToClipboardFunction}=yield import('./syntaxhighlighter-7918e0a9.js');createCopyToClipboardFunction();}),[]);const onCopyCapture=e=>{e.preventDefault();if(additionalActionItems.filter(item=>item.title==='Copied').length===0){copyToClipboard(source.props.code).then(()=>{setAdditionalActionItems([...additionalActionItems,{title:'Copied',onClick:()=>{}}]);globalWindow.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=='Copied')),1500);});}};return React__default.createElement(PreviewContainer,Object.assign({},{withSource,withToolbar},props,{className:previewClasses.join(' ')}),withToolbar&&React__default.createElement(PositionedToolbar,{isLoading:isLoading,border:true,zoom:z=>setScale(scale*z),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React__default.createElement(ZoomContext.Provider,{value:{scale}},React__default.createElement(Relative,{className:"docs-story",onCopyCapture:withSource&&onCopyCapture},React__default.createElement(ChildrenContainer,{isColumn:isColumn||!Array.isArray(children),columns:columns,layout:layout},React__default.createElement(Zoom$1.Element,{scale:scale},Array.isArray(children)?// eslint-disable-next-line react/no-array-index-key
|
|
470
470
|
children.map((child,i)=>React__default.createElement("div",{key:i},child)):React__default.createElement("div",null,children))),React__default.createElement(ActionBar,{actionItems:actionItems}))),withSource&&expanded&&source);};const StyledPreview=styled(Preview)(()=>({'.docs-story':{paddingTop:32,paddingBottom:40}}));const PreviewSkeleton=()=>React__default.createElement(StyledPreview,{isLoading:true,withToolbar:true},React__default.createElement(StorySkeleton,null));/**
|
|
471
471
|
* A specialized version of `_.map` for arrays without support for iteratee
|
|
472
472
|
* shorthands.
|
|
@@ -1755,7 +1755,7 @@ const summaryAsString=typeof summary.toString==='function'?summary.toString():su
|
|
|
1755
1755
|
* Removes spaces because spaces are not allowed in ID attributes
|
|
1756
1756
|
* @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
|
|
1757
1757
|
* @example getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
|
|
1758
|
-
*/const getControlSetterButtonId=value=>`set-${value.replace(/\s+/g,'-')}`;const Label$3=styled.label(({theme})=>({lineHeight:'18px',alignItems:'center',marginBottom:8,display:'inline-block',position:'relative',whiteSpace:'nowrap',background:`${curriedOpacify$1(0.05,theme.appBorderColor)}`,borderRadius:'3em',padding:1,input:{appearance:'none',width:'100%',height:'100%',position:'absolute',left:0,top:0,margin:0,padding:0,border:'none',background:'transparent',cursor:'pointer',borderRadius:'3em','&:focus':{outline:'none',boxShadow:`${theme.color.secondary} 0 0 0 1px inset !important`}},span:{textAlign:'center',fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:'1',cursor:'pointer',display:'inline-block',padding:'7px 15px',transition:'all 100ms ease-out',userSelect:'none',borderRadius:'3em',color:curriedTransparentize$1(0.4,theme.color.defaultText),background:'transparent','&:hover':{boxShadow:`${curriedOpacify$1(0.3,theme.appBorderColor)} 0 0 0 1px inset`},'&:active':{boxShadow:`${curriedOpacify$1(0.05,theme.appBorderColor)} 0 0 0 2px inset`,color:curriedOpacify$1(1,theme.appBorderColor)},'&:first-of-type':{paddingRight:8},'&:last-of-type':{paddingLeft:8}},'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type':{background:theme.background.app,boxShadow:`${curriedOpacify$1(0.1,theme.appBorderColor)} 0 0 2px`,color:theme.color.defaultText,padding:'7px 15px'}}));const BooleanControl=({name,value,onChange,onBlur,onFocus})=>{const onSetFalse=useCallback(()=>onChange(false),[onChange]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onSetFalse},"Set boolean");}return React__default.createElement(Label$3,{htmlFor:name,title:
|
|
1758
|
+
*/const getControlSetterButtonId=value=>`set-${value.replace(/\s+/g,'-')}`;const Label$3=styled.label(({theme})=>({lineHeight:'18px',alignItems:'center',marginBottom:8,display:'inline-block',position:'relative',whiteSpace:'nowrap',background:`${curriedOpacify$1(0.05,theme.appBorderColor)}`,borderRadius:'3em',padding:1,input:{appearance:'none',width:'100%',height:'100%',position:'absolute',left:0,top:0,margin:0,padding:0,border:'none',background:'transparent',cursor:'pointer',borderRadius:'3em','&:focus':{outline:'none',boxShadow:`${theme.color.secondary} 0 0 0 1px inset !important`}},span:{textAlign:'center',fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:'1',cursor:'pointer',display:'inline-block',padding:'7px 15px',transition:'all 100ms ease-out',userSelect:'none',borderRadius:'3em',color:curriedTransparentize$1(0.4,theme.color.defaultText),background:'transparent','&:hover':{boxShadow:`${curriedOpacify$1(0.3,theme.appBorderColor)} 0 0 0 1px inset`},'&:active':{boxShadow:`${curriedOpacify$1(0.05,theme.appBorderColor)} 0 0 0 2px inset`,color:curriedOpacify$1(1,theme.appBorderColor)},'&:first-of-type':{paddingRight:8},'&:last-of-type':{paddingLeft:8}},'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type':{background:theme.background.app,boxShadow:`${curriedOpacify$1(0.1,theme.appBorderColor)} 0 0 2px`,color:theme.color.defaultText,padding:'7px 15px'}}));const parse$2=value=>value==='true';const BooleanControl=({name,value,onChange,onBlur,onFocus})=>{const onSetFalse=useCallback(()=>onChange(false),[onChange]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onSetFalse},"Set boolean");}const parsedValue=typeof value==='string'?parse$2(value):value;return React__default.createElement(Label$3,{htmlFor:name,title:parsedValue?'Change to false':'Change to true'},React__default.createElement("input",Object.assign({id:getControlId(name),type:"checkbox",onChange:e=>onChange(e.target.checked),checked:parsedValue},{name,onBlur,onFocus})),React__default.createElement("span",null,"False"),React__default.createElement("span",null,"True"));};const parseDate=value=>{const[year,month,day]=value.split('-');const result=new Date();result.setFullYear(parseInt(year,10),parseInt(month,10)-1,parseInt(day,10));return result;};const parseTime=value=>{const[hours,minutes]=value.split(':');const result=new Date();result.setHours(parseInt(hours,10));result.setMinutes(parseInt(minutes,10));return result;};const formatDate=value=>{const date=new Date(value);const year=`000${date.getFullYear()}`.slice(-4);const month=`0${date.getMonth()+1}`.slice(-2);const day=`0${date.getDate()}`.slice(-2);return`${year}-${month}-${day}`;};const formatTime=value=>{const date=new Date(value);const hours=`0${date.getHours()}`.slice(-2);const minutes=`0${date.getMinutes()}`.slice(-2);return`${hours}:${minutes}`;};const FlexSpaced=styled.div(({theme})=>({flex:1,display:'flex',input:{marginLeft:10,flex:1,height:32,'&::-webkit-calendar-picker-indicator':{opacity:0.5,height:12,filter:theme.base==='light'?undefined:'invert(1)'}},'input:first-of-type':{marginLeft:0}}));const DateControl=({name,value,onChange,onFocus,onBlur})=>{const[valid,setValid]=useState(true);const dateRef=useRef();const timeRef=useRef();useEffect(()=>{if(valid!==false){if(dateRef&&dateRef.current){dateRef.current.value=formatDate(value);}if(timeRef&&timeRef.current){timeRef.current.value=formatTime(value);}}},[value]);const onDateChange=e=>{const parsed=parseDate(e.target.value);const result=new Date(value);result.setFullYear(parsed.getFullYear(),parsed.getMonth(),parsed.getDate());const time=result.getTime();if(time)onChange(time);setValid(!!time);};const onTimeChange=e=>{const parsed=parseTime(e.target.value);const result=new Date(value);result.setHours(parsed.getHours());result.setMinutes(parsed.getMinutes());const time=result.getTime();if(time)onChange(time);setValid(!!time);};const controlId=getControlId(name);return React__default.createElement(FlexSpaced,null,React__default.createElement(Form.Input,Object.assign({type:"date",max:"9999-12-31"// I do this because of a rendering bug in chrome
|
|
1759
1759
|
,ref:dateRef,id:`${controlId}-date`,name:`${controlId}-date`,onChange:onDateChange},{onFocus,onBlur})),React__default.createElement(Form.Input,Object.assign({type:"time",id:`${controlId}-time`,name:`${controlId}-time`,ref:timeRef,onChange:onTimeChange},{onFocus,onBlur})),!valid?React__default.createElement("div",null,"invalid"):null);};const Wrapper$5=styled.label({display:'flex'});const parse$1=value=>{const result=parseFloat(value);return Number.isNaN(result)?undefined:result;};const format=value=>value!=null?String(value):'';const NumberControl=({name,value,onChange,min,max,step,onBlur,onFocus})=>{const[inputValue,setInputValue]=useState(typeof value==='number'?value:'');const[forceVisible,setForceVisible]=useState(false);const[parseError,setParseError]=useState(null);const handleChange=useCallback(event=>{setInputValue(event.target.value);const result=parseFloat(event.target.value);if(Number.isNaN(result)){setParseError(new Error(`'${event.target.value}' is not a number`));}else{onChange(result);setParseError(null);}},[onChange,setParseError]);const onForceVisible=useCallback(()=>{setInputValue('0');onChange(0);setForceVisible(true);},[setForceVisible]);const htmlElRef=useRef(null);useEffect(()=>{if(forceVisible&&htmlElRef.current)htmlElRef.current.select();},[forceVisible]);useEffect(()=>{const newInputValue=typeof value==='number'?value:'';if(inputValue!==newInputValue){setInputValue(value);}},[value]);if(!forceVisible&&value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set number");}return React__default.createElement(Wrapper$5,null,React__default.createElement(Form.Input,Object.assign({ref:htmlElRef,id:getControlId(name),type:"number",onChange:handleChange,size:"flex",placeholder:"Edit number...",value:inputValue,valid:parseError?'error':null,autoFocus:forceVisible},{name,min,max,step,onFocus,onBlur})));};function dedent(templ){var values=[];for(var _i=1;_i<arguments.length;_i++){values[_i-1]=arguments[_i];}var strings=Array.from(typeof templ==='string'?[templ]:templ);strings[strings.length-1]=strings[strings.length-1].replace(/\r?\n([\t ]*)$/,'');var indentLengths=strings.reduce(function(arr,str){var matches=str.match(/\n([\t ]+|(?!\s).)/g);if(matches){return arr.concat(matches.map(function(match){var _a,_b;return(_b=(_a=match.match(/[\t ]/g))===null||_a===void 0?void 0:_a.length)!==null&&_b!==void 0?_b:0;}));}return arr;},[]);if(indentLengths.length){var pattern_1=new RegExp("\n[\t ]{"+Math.min.apply(Math,indentLengths)+"}",'g');strings=strings.map(function(str){return str.replace(pattern_1,'\n');});}strings[0]=strings[0].replace(/^\r?\n/,'');var string=strings[0];values.forEach(function(value,i){var endentations=string.match(/(?:^|\n)( *)$/);var endentation=endentations?endentations[1]:'';var indentedValue=value;if(typeof value==='string'&&value.includes('\n')){indentedValue=String(value).split('\n').map(function(str,i){return i===0?str:""+endentation+str;}).join('\n');}string+=indentedValue+strings[i+1];});return string;}const selectedKey=(value,options)=>{const entry=options&&Object.entries(options).find(([_key,val])=>val===value);return entry?entry[0]:undefined;};const selectedKeys=(value,options)=>value&&options?Object.entries(options).filter(entry=>value.includes(entry[1])).map(entry=>entry[0]):[];const selectedValues=(keys,options)=>keys&&options&&keys.map(key=>options[key]);const Wrapper$4=styled.div(({isInline})=>isInline?{display:'flex',flexWrap:'wrap',alignItems:'flex-start',label:{display:'inline-flex',marginRight:15}}:{label:{display:'flex'}});const Text$1=styled.span({});const Label$2=styled.label({lineHeight:'20px',alignItems:'center',marginBottom:8,'&:last-child':{marginBottom:0},input:{margin:0,marginRight:6}});const CheckboxControl=({name,options,value,onChange,isInline})=>{if(!options){logger.warn(`Checkbox with no options: ${name}`);return React__default.createElement(React__default.Fragment,null,"-");}const initial=selectedKeys(value,options);const[selected,setSelected]=useState(initial);const handleChange=e=>{const option=e.target.value;const updated=[...selected];if(updated===null||updated===void 0?void 0:updated.includes(option)){updated.splice(updated.indexOf(option),1);}else{updated.push(option);}onChange(selectedValues(updated,options));setSelected(updated);};const controlId=getControlId(name);return React__default.createElement(Wrapper$4,{isInline:isInline},Object.keys(options).map((key,index)=>{const id=`${controlId}-${index}`;return React__default.createElement(Label$2,{key:id,htmlFor:id},React__default.createElement("input",{type:"checkbox",id:id,name:id,value:key,onChange:handleChange,checked:selected===null||selected===void 0?void 0:selected.includes(key)}),React__default.createElement(Text$1,null,key));}));};const Wrapper$3=styled.div(({isInline})=>isInline?{display:'flex',flexWrap:'wrap',alignItems:'flex-start',label:{display:'inline-flex',marginRight:15}}:{label:{display:'flex'}});styled.fieldset({border:0,padding:0,margin:0});const Text=styled.span({});const Label$1=styled.label({lineHeight:'20px',alignItems:'center',marginBottom:8,'&:last-child':{marginBottom:0},input:{margin:0,marginRight:6}});const RadioControl=({name,options,value,onChange,isInline})=>{if(!options){logger.warn(`Radio with no options: ${name}`);return React__default.createElement(React__default.Fragment,null,"-");}const selection=selectedKey(value,options);const controlId=getControlId(name);return React__default.createElement(Wrapper$3,{isInline:isInline},Object.keys(options).map((key,index)=>{const id=`${controlId}-${index}`;return React__default.createElement(Label$1,{key:id,htmlFor:id},React__default.createElement("input",{type:"radio",id:id,name:id,value:key,onChange:e=>onChange(options[e.currentTarget.value]),checked:key===selection}),React__default.createElement(Text,null,key));}));};const styleResets={// resets
|
|
1760
1760
|
appearance:'none',border:'0 none',boxSizing:'inherit',display:' block',margin:' 0',background:'transparent',padding:0,fontSize:'inherit',position:'relative'};const OptionsSelect=styled.select(({theme})=>Object.assign(Object.assign({},styleResets),{boxSizing:'border-box',position:'relative',padding:'6px 10px',width:'100%',color:theme.input.color||'inherit',background:theme.input.background,borderRadius:theme.input.borderRadius,boxShadow:`${theme.input.border} 0 0 0 1px inset`,fontSize:theme.typography.size.s2-1,lineHeight:'20px','&:focus':{boxShadow:`${theme.color.secondary} 0 0 0 1px inset`,outline:'none'},'&[disabled]':{cursor:'not-allowed',opacity:0.5},'::placeholder':{color:theme.color.mediumdark},'&[multiple]':{overflow:'auto',padding:0,option:{display:'block',padding:'6px 10px',marginLeft:1,marginRight:1}}}));const SelectWrapper=styled.span`
|
|
1761
1761
|
display: inline-block;
|
|
@@ -2100,7 +2100,7 @@ JsonTree.defaultProps={rootName:'root',isCollapsed:(keyPath,deep)=>deep!==-1,get
|
|
|
2100
2100
|
${curriedLighten$1(0.02,theme.input.background)} ${(value-min)/(max-min)*100}%,
|
|
2101
2101
|
${curriedLighten$1(0.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:'transparent',width:'100%',height:'6px',cursor:'pointer'},'&::-ms-fill-lower':{borderRadius:6},'&::-ms-fill-upper':{borderRadius:6},'&::-ms-thumb':{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,0.2)}`,borderRadius:50,cursor:'grab',marginTop:0},'@supports (-ms-ime-align:auto)':{'input[type=range]':{margin:'0'}}}));const RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:'nowrap',fontFeatureSettings:'tnum',fontVariantNumeric:'tabular-nums'});const RangeWrapper=styled.div({display:'flex',alignItems:'center',width:'100%'});function getNumberOfDecimalPlaces(number){const match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return!match?0:Math.max(0,// Number of digits right of decimal point.
|
|
2102
2102
|
(match[1]?match[1].length:0)-(// Adjust for scientific notation.
|
|
2103
|
-
match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default.createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=useState(false);const onForceVisible=useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=lazy(()=>import('./Color-
|
|
2103
|
+
match[2]?+match[2]:0));}const RangeControl=({name,value,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{const handleChange=event=>{onChange(parse$1(event.target.value));};const hasValue=value!==undefined;const numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React__default.createElement(RangeWrapper,null,React__default.createElement(RangeLabel,null,min),React__default.createElement(RangeInput,Object.assign({id:getControlId(name),type:"range",onChange:handleChange},{name,value,min,max,step,onFocus,onBlur})),React__default.createElement(RangeLabel,null,`${hasValue?value.toFixed(numberOFDecimalsPlaces):'--'}`," / ",max));};const Wrapper$1=styled.label({display:'flex'});const TextControl=({name,value,onChange,onFocus,onBlur})=>{const handleChange=event=>{onChange(event.target.value);};const[forceVisible,setForceVisible]=useState(false);const onForceVisible=useCallback(()=>{onChange('');setForceVisible(true);},[setForceVisible]);if(value===undefined){return React__default.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");}const isValid=typeof value==='string';return React__default.createElement(Wrapper$1,null,React__default.createElement(Form.Textarea,Object.assign({id:getControlId(name),onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:'error'},{name,value:isValid?value:'',onFocus,onBlur})));};const FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{if(url.startsWith('blob:')){URL.revokeObjectURL(url);}});}const FilesControl=({onChange,name,accept='image/*',value})=>{function handleFileChange(e){if(!e.target.files){return;}const fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls);revokeOldUrls(value);}return React__default.createElement(FileInput,{id:getControlId(name),type:"file",name:name,multiple:true,onChange:handleFileChange,accept:accept,size:"flex"});};const LazyColorControl=lazy(()=>import('./Color-4e20b6d9.js'));const ColorControl=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},React__default.createElement(LazyColorControl,Object.assign({},props)));const Controls={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,'inline-check':OptionsControl,radio:OptionsControl,'inline-radio':OptionsControl,select:OptionsControl,'multi-select':OptionsControl,range:RangeControl,text:TextControl,file:FilesControl};const NoControl=()=>React__default.createElement(React__default.Fragment,null,"-");const ArgControl=({row,arg,updateArgs})=>{const{key,control}=row;const[isFocused,setFocused]=useState(false);// box because arg can be a fn (e.g. actions) and useState calls fn's
|
|
2104
2104
|
const[boxedValue,setBoxedValue]=useState({value:arg});useEffect(()=>{if(!isFocused)setBoxedValue({value:arg});},[isFocused,arg]);const onChange=useCallback(argVal=>{setBoxedValue({value:argVal});updateArgs({[key]:argVal});return argVal;},[updateArgs,key]);const onBlur=useCallback(()=>setFocused(false),[]);const onFocus=useCallback(()=>setFocused(true),[]);if(!control||control.disable)return React__default.createElement(NoControl,null);// row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
|
|
2105
2105
|
// row.key is a hash key and therefore a much safer choice
|
|
2106
2106
|
const props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus};const Control=Controls[control.type]||NoControl;return React__default.createElement(Control,Object.assign({},props,control,{controlType:control.type}));};const Name=styled.span({fontWeight:'bold'});const Required=styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:'help'}));const Description=styled.div(({theme})=>({'&&':{p:{margin:'0 0 10px 0'},a:{color:theme.color.secondary}},code:Object.assign(Object.assign({},codeCommon({theme})),{fontSize:12,fontFamily:theme.typography.fonts.mono}),'& code':{margin:0,display:'inline-block'},'& pre > code':{whiteSpace:'pre-wrap'}}));const Type=styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?4:0}));const TypeWithJsDoc=styled.div(({theme,hasDescription})=>({color:theme.base==='light'?curriedTransparentize$1(0.1,theme.color.defaultText):curriedTransparentize$1(0.2,theme.color.defaultText),marginTop:hasDescription?12:0,marginBottom:12}));const StyledTd$1=styled.td(({theme,expandable})=>({paddingLeft:expandable?'40px !important':'20px !important'}));const ArgRow=props=>{var _a;const{row,updateArgs,compact,expandable,initialExpandedArgs}=props;const{name,description}=row;const table=row.table||{};const type=table.type||row.type;const defaultValue=table.defaultValue||row.defaultValue;const required=(_a=row.type)===null||_a===void 0?void 0:_a.required;const hasDescription=description!=null&&description!=='';return React__default.createElement("tr",null,React__default.createElement(StyledTd$1,{expandable:expandable},React__default.createElement(Name,null,name),required?React__default.createElement(Required,{title:"Required"},"*"):null),compact?null:React__default.createElement("td",null,hasDescription&&React__default.createElement(Description,null,React__default.createElement(Markdown,null,description)),table.jsDocTags!=null?React__default.createElement(React__default.Fragment,null,React__default.createElement(TypeWithJsDoc,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs})),React__default.createElement(ArgJsDoc,{tags:table.jsDocTags})):React__default.createElement(Type,{hasDescription:hasDescription},React__default.createElement(ArgValue,{value:type,initialExpandedArgs:initialExpandedArgs}))),compact?null:React__default.createElement("td",null,React__default.createElement(ArgValue,{value:defaultValue,initialExpandedArgs:initialExpandedArgs})),updateArgs?React__default.createElement("td",null,React__default.createElement(ArgControl,Object.assign({},props))):null);};const ExpanderIcon=styled(Icons)(({theme})=>({marginRight:8,marginLeft:-10,marginTop:-2,height:12,width:12,color:theme.base==='light'?curriedTransparentize$1(0.25,theme.color.defaultText):curriedTransparentize$1(0.3,theme.color.defaultText),border:'none',display:'inline-block'}));const FlexWrapper=styled.span(({theme})=>({display:'flex',lineHeight:'20px',alignItems:'center'}));const Section=styled.td(({theme})=>({position:'relative',letterSpacing:'0.35em',textTransform:'uppercase',fontWeight:theme.typography.weight.black,fontSize:theme.typography.size.s1-1,color:theme.base==='light'?curriedTransparentize$1(0.4,theme.color.defaultText):curriedTransparentize$1(0.6,theme.color.defaultText),background:`${theme.background.app} !important`,'& ~ td':{background:`${theme.background.app} !important`}}));const Subsection=styled.td(({theme})=>({position:'relative',fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,background:theme.background.content}));const StyledTd=styled.td(({theme})=>({position:'relative'}));const StyledTr=styled.tr(({theme})=>({'&:hover > td':{backgroundColor:`${theme.background.hoverable} !important`,boxShadow:`${theme.color.mediumlight} 0 - 1px 0 0 inset`,cursor:'row-resize'}}));const ClickIntercept=styled.button(()=>({// reset button style
|
package/dist/modern/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, aW as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b2 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, aZ as NumberControl, X as OL, a$ as ObjectControl, a_ as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b0 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b1 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, aY as format, at as getStoryHref, al as interleaveSeparators, b3 as nameSpaceClassNames, aX as parse, D as resetComponents } from './index-
|
|
2
|
+
export { E as A, A as ActionBar, ao as AddonPanel, aF as ArgsTable, aD as ArgsTableError, a3 as Badge, am as Bar, G as Blockquote, aV as BooleanControl, aa as Button, H as Code, aU as ColorControl, aQ as ColorItem, aR as ColorPalette, K as DL, aW as DateControl, au as Description, J as Div, ax as DocsContent, az as DocsPageWrapper, ay as DocsWrapper, a5 as DocumentWrapper, b2 as FilesControl, an as FlexBar, F as Form, L as H1, M as H2, N as H3, O as H4, P as H5, Q as H6, R as HR, aO as IFrame, ai as IconButton, aT as IconGallery, aS as IconItem, I as Icons, U as Img, V as LI, a4 as Link, as as Loader, aH as NoControlsWarning, aZ as NumberControl, X as OL, a$ as ObjectControl, a_ as OptionsControl, Y as P, a8 as Placeholder, Z as Pre, aA as Preview, aB as PreviewSkeleton, b0 as RangeControl, S as ScrollArea, ak as Separator, aJ as Source, aI as SourceError, a7 as Spaced, $ as Span, aM as Story, aL as StoryError, aN as StorySkeleton, ar as StorybookIcon, aq as StorybookLogo, aK as StyledSyntaxHighlighter, aw as Subtitle, ap as Symbols, a6 as SyntaxHighlighter, a1 as TT, ag as TabBar, aj as TabButton, ah as TabWrapper, aG as TabbedArgsTable, a0 as Table, aC as TableWrapper, ae as Tabs, af as TabsState, b1 as TextControl, av as Title, ad as TooltipLinkList, ac as TooltipMessage, T as TooltipNote, aP as Typeset, a2 as UL, W as WithTooltip, ab as WithTooltipPure, a9 as Zoom, aE as argsTableLoadingData, C as components, aY as format, at as getStoryHref, al as interleaveSeparators, b3 as nameSpaceClassNames, aX as parse, D as resetComponents } from './index-1368aba1.js';
|
|
3
3
|
import '@storybook/theming';
|
|
4
4
|
import '@storybook/csf';
|
|
5
5
|
import '@storybook/client-logger';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoize, d as dedent, b as __awaiter, S as ScrollArea, e as __rest, A as ActionBar, w as window_1 } from './index-
|
|
1
|
+
import { _ as _objectWithoutPropertiesLoose, a as _extends, c as commonjsGlobal, m as memoize, d as dedent, b as __awaiter, S as ScrollArea, e as __rest, A as ActionBar, w as window_1 } from './index-1368aba1.js';
|
|
2
2
|
import React__default, { useState } from 'react';
|
|
3
3
|
import { logger } from '@storybook/client-logger';
|
|
4
4
|
import { styled } from '@storybook/theming';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/components",
|
|
3
|
-
"version": "6.5.0-alpha.
|
|
3
|
+
"version": "6.5.0-alpha.40",
|
|
4
4
|
"description": "Core Storybook Components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"prepare": "ts-node ../../scripts/prebundle.ts"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@storybook/client-logger": "6.5.0-alpha.
|
|
43
|
+
"@storybook/client-logger": "6.5.0-alpha.40",
|
|
44
44
|
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
|
45
|
-
"@storybook/theming": "6.5.0-alpha.
|
|
45
|
+
"@storybook/theming": "6.5.0-alpha.40",
|
|
46
46
|
"core-js": "^3.8.2",
|
|
47
47
|
"regenerator-runtime": "^0.13.7"
|
|
48
48
|
},
|
|
@@ -79,6 +79,6 @@
|
|
|
79
79
|
"access": "public"
|
|
80
80
|
},
|
|
81
81
|
"bundlerEntrypoint": "./src/index.ts",
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "ffb3402ee40562579d45dbcf7870a1a8372ac0dd",
|
|
83
83
|
"sbmodern": "dist/modern/index.js"
|
|
84
84
|
}
|