"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[5298],{"../../node_modules/@mdx-js/react/lib/index.js":function(b,y,i){i.d(y,{BN:function(){return m},RP:function(){return e},gz:function(){return d},xA:function(){return x}});var s=i("../../node_modules/react/index.js");const m=s.createContext({});function d(r){return f;function f(u){const g=e(u.components);return s.createElement(r,{...u,allComponents:g})}}function e(r){const f=s.useContext(m);return s.useMemo(()=>typeof r=="function"?r(f):{...f,...r},[f,r])}const p={};function x({components:r,children:f,disableParentContext:u}){let g;return u?g=typeof r=="function"?r({}):r||p:g=e(r),s.createElement(m.Provider,{value:g},f)}},"./src/components/Tooltip/Tooltip.story.tsx":function(b,y,i){i.r(y),i.d(y,{Basic:function(){return E},OverflowViewport:function(){return k},default:function(){return A}});var s=i("../../node_modules/react/index.js"),m=i("./src/components/Button/Button.tsx"),d=i("./src/components/Layout/Stack/Stack.tsx"),e=i("../../node_modules/react/jsx-runtime.js"),p=i("../../node_modules/@mdx-js/react/lib/index.js"),x=i("../../node_modules/@storybook/blocks/dist/index.mjs"),r=i("./src/components/Tooltip/Tooltip.tsx");function f(o){const n=Object.assign({h1:"h1",h2:"h2",p:"p",ul:"ul",li:"li",h3:"h3",code:"code"},(0,p.RP)(),o.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h1,{id:"tooltip",children:"Tooltip"}),`
`,(0,e.jsx)(n.h2,{id:"theme",children:"Theme"}),`
`,(0,e.jsx)(n.p,{children:"There are currently themes available for the Tooltip."}),`
`,(0,e.jsxs)(n.ul,{children:[`
`,(0,e.jsx)(n.li,{children:"Info"}),`
`,(0,e.jsx)(n.li,{children:"Error"}),`
`,(0,e.jsx)(n.li,{children:"Info-alt (alternative)"}),`
`]}),`
`,(0,e.jsx)(n.h3,{id:"info",children:"Info"}),`
`,(0,e.jsx)(n.p,{children:"This is the default theme, usually used in forms to show more information."}),`
`,(0,e.jsx)(n.h3,{id:"error",children:"Error"}),`
`,(0,e.jsx)(n.p,{children:"Tooltip with a red background."}),`
`,(0,e.jsx)(n.h3,{id:"info-alternative",children:"Info alternative"}),`
`,(0,e.jsxs)(n.p,{children:["We added this to be able to add a ",(0,e.jsx)(n.code,{children:"<JSONFormatter />"})," in the tooltip."]}),`
`,(0,e.jsx)(x.ov,{of:r.m})]})}function u(o={}){const{wrapper:n}=Object.assign({},(0,p.RP)(),o.components);return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(f,o)})):f(o)}var g=u,h=Object.defineProperty,j=Object.defineProperties,T=Object.getOwnPropertyDescriptors,t=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,_=(o,n,v)=>n in o?h(o,n,{enumerable:!0,configurable:!0,writable:!0,value:v}):o[n]=v,O=(o,n)=>{for(var v in n||(n={}))c.call(n,v)&&_(o,v,n[v]);if(t)for(var v of t(n))a.call(n,v)&&_(o,v,n[v]);return o},P=(o,n)=>j(o,T(n)),I=(o,n)=>{var v={};for(var S in o)c.call(o,S)&&n.indexOf(S)<0&&(v[S]=o[S]);if(o!=null&&t)for(var S of t(o))n.indexOf(S)<0&&a.call(o,S)&&(v[S]=o[S]);return v},R,w,C,l,B,D;const L={title:"Overlays/Tooltip",component:r.m,parameters:{docs:{page:g},knobs:{disabled:!0}},argTypes:{content:{control:{type:"text"}},theme:{control:{type:"select",options:["info","error"]}},placement:{control:{type:"select",options:["auto","bottom","top","auto-start","auto-end","right","left","top-start","top-end","bottom-start","bottom-end","right-start","right-end","left-start","left-end"]}}}},E=o=>{var n=o,{content:v}=n,S=I(n,["content"]);return s.createElement(r.m,O({content:v},S),s.createElement(m.$n,null,"Hover me for Tooltip "))},k=({})=>{const o=()=>s.createElement("div",null,"A really long tooltip that will overflow the viewport.");return s.createElement(d.B,{justifyContent:"flex-end"},s.createElement(d.B,{direction:"column",alignItems:"flex-end"},s.createElement(r.m,{content:"Static string tooltip",placement:"bottom"},s.createElement(m.$n,null,"Static string tooltip")),s.createElement(r.m,{content:o,placement:"bottom"},s.createElement(m.$n,null,"Lazy content defined in a function"))))};E.args={content:"This is a tooltip",theme:"info",show:void 0,placement:"auto"};var A=L;E.parameters=P(O({},E.parameters),{docs:P(O({},(R=E.parameters)==null?void 0:R.docs),{source:O({originalSource:`({
  content,
  ...args
}) => {
  return <Tooltip content={content} {...args}>
      <Button>Hover me for Tooltip </Button>
    </Tooltip>;
}`},(C=(w=E.parameters)==null?void 0:w.docs)==null?void 0:C.source)})}),k.parameters=P(O({},k.parameters),{docs:P(O({},(l=k.parameters)==null?void 0:l.docs),{source:O({originalSource:`({}) => {
  const content = () => <div>A really long tooltip that will overflow the viewport.</div>;
  return <Stack justifyContent={'flex-end'}>
      <Stack direction="column" alignItems={'flex-end'}>
        <Tooltip content="Static string tooltip" placement="bottom">
          <Button>Static string tooltip</Button>
        </Tooltip>
        <Tooltip content={content} placement="bottom">
          <Button>Lazy content defined in a function</Button>
        </Tooltip>
      </Stack>
    </Stack>;
}`},(D=(B=k.parameters)==null?void 0:B.docs)==null?void 0:D.source)})})},"./src/components/Layout/Stack/Stack.tsx":function(b,y,i){i.d(y,{B:function(){return j}});var s=i("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),m=i("../../node_modules/react/index.js"),d=i("./src/themes/ThemeContext.tsx"),e=i("./src/components/Layout/utils/responsiveness.tsx"),p=Object.defineProperty,x=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,u=(t,c,a)=>c in t?p(t,c,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[c]=a,g=(t,c)=>{for(var a in c||(c={}))r.call(c,a)&&u(t,a,c[a]);if(x)for(var a of x(c))f.call(c,a)&&u(t,a,c[a]);return t},h=(t,c)=>{var a={};for(var _ in t)r.call(t,_)&&c.indexOf(_)<0&&(a[_]=t[_]);if(t!=null&&x)for(var _ of x(t))c.indexOf(_)<0&&f.call(t,_)&&(a[_]=t[_]);return a};const j=m.forwardRef((t,c)=>{const a=t,{gap:_=1,alignItems:O,justifyContent:P,direction:I,wrap:R,children:w,grow:C,shrink:l,basis:B,flex:D}=a,L=h(a,["gap","alignItems","justifyContent","direction","wrap","children","grow","shrink","basis","flex"]),E=(0,d.of)(T,_,O,P,I,R,C,l,B,D);return m.createElement("div",g({ref:c,className:E.flex},L),w)});j.displayName="Stack";const T=(t,c,a,_,O,P,I,R,w,C)=>({flex:(0,s.AH)([{display:"flex"},(0,e.Y)(t,O,l=>({flexDirection:l})),(0,e.Y)(t,P,l=>({flexWrap:l})),(0,e.Y)(t,a,l=>({alignItems:l})),(0,e.Y)(t,_,l=>({justifyContent:l})),(0,e.Y)(t,c,l=>({gap:t.spacing(l)})),(0,e.Y)(t,I,l=>({flexGrow:l})),(0,e.Y)(t,R,l=>({flexShrink:l})),(0,e.Y)(t,w,l=>({flexBasis:l})),(0,e.Y)(t,C,l=>({flex:l}))])});try{j.displayName="Stack",j.__docgenInfo={description:"",displayName:"Stack",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"ResponsiveProp<AlignItems>"}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"ResponsiveProp<JustifyContent>"}},direction:{defaultValue:null,description:"",name:"direction",required:!1,type:{name:"ResponsiveProp<Direction>"}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"ResponsiveProp<Wrap>"}},grow:{defaultValue:null,description:"Sets the property `flex-grow`",name:"grow",required:!1,type:{name:"ResponsiveProp<number>"}},shrink:{defaultValue:null,description:"Sets the property `flex-shrink`",name:"shrink",required:!1,type:{name:"ResponsiveProp<number>"}},basis:{defaultValue:null,description:"Sets the property `flex-basis`",name:"basis",required:!1,type:{name:"ResponsiveProp<FlexBasis>"}},flex:{defaultValue:null,description:"Sets the property `flex`",name:"flex",required:!1,type:{name:"ResponsiveProp<Flex>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Stack/Stack.tsx#Stack"]={docgenInfo:j.__docgenInfo,name:"Stack",path:"src/components/Layout/Stack/Stack.tsx#Stack"})}catch{}},"./src/components/Layout/utils/responsiveness.tsx":function(b,y,i){i.d(y,{Y:function(){return m}});function s(d,e,p,x){const r=e[x];if(r!=null)return{[d.breakpoints.up(x)]:p(r)}}function m(d,e,p){return e==null?null:typeof e!="object"||!("xs"in e)?p(e):[s(d,e,p,"xs"),s(d,e,p,"sm"),s(d,e,p,"md"),s(d,e,p,"lg"),s(d,e,p,"xl"),s(d,e,p,"xxl")]}try{m.displayName="getResponsiveStyle",m.__docgenInfo={description:"Function that converts a ResponsiveProp object into CSS",displayName:"getResponsiveStyle",props:{}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"]={docgenInfo:m.__docgenInfo,name:"getResponsiveStyle",path:"src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"})}catch{}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(b,y,i){/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var s=i("../../node_modules/react/index.js"),m=Symbol.for("react.element"),d=Symbol.for("react.fragment"),e=Object.prototype.hasOwnProperty,p=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,x={key:!0,ref:!0,__self:!0,__source:!0};function r(f,u,g){var h,j={},T=null,t=null;g!==void 0&&(T=""+g),u.key!==void 0&&(T=""+u.key),u.ref!==void 0&&(t=u.ref);for(h in u)e.call(u,h)&&!x.hasOwnProperty(h)&&(j[h]=u[h]);if(f&&f.defaultProps)for(h in u=f.defaultProps,u)j[h]===void 0&&(j[h]=u[h]);return{$$typeof:m,type:f,key:T,ref:t,props:j,_owner:p.current}}y.Fragment=d,y.jsx=r,y.jsxs=r},"../../node_modules/react/jsx-runtime.js":function(b,y,i){b.exports=i("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
