"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[7762],{"../../node_modules/@mdx-js/react/lib/index.js":function(I,O,n){n.d(O,{BN:function(){return u},RP:function(){return m},gz:function(){return b},xA:function(){return x}});var r=n("../../node_modules/react/index.js");const u=r.createContext({});function b(c){return f;function f(p){const g=m(p.components);return r.createElement(c,{...p,allComponents:g})}}function m(c){const f=r.useContext(u);return r.useMemo(()=>typeof c=="function"?c(f):{...f,...c},[f,c])}const a={};function x({components:c,children:f,disableParentContext:p}){let g;return p?g=typeof c=="function"?c({}):c||a:g=m(c),r.createElement(u.Provider,{value:g},f)}},"./src/components/ToolbarButton/ToolbarButtonRow.story.tsx":function(I,O,n){n.r(O),n.d(O,{Basic:function(){return o},default:function(){return l}});var r=n("../../node_modules/react/index.js"),u=n("./src/utils/storybook/DashboardStoryCanvas.tsx"),b=n("./src/components/ToolbarButton/ToolbarButton.tsx"),m=n("./src/components/ToolbarButton/ToolbarButtonRow.tsx"),a=n("../../node_modules/react/jsx-runtime.js"),x=n("../../node_modules/@mdx-js/react/lib/index.js"),c=n("../../node_modules/@storybook/blocks/dist/index.mjs");function f(t){const e=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",pre:"pre"},(0,x.RP)(),t.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{id:"toolbarbuttonrow",children:"ToolbarButtonRow"}),`
`,(0,a.jsxs)(e.p,{children:["A container for multiple ",(0,a.jsx)(e.code,{children:"ToolbarButton"}),"s. Provides automatic overflow behaviour when the buttons no longer fit in the container."]}),`
`,(0,a.jsx)(e.h2,{id:"usage",children:"Usage"}),`
`,(0,a.jsxs)(e.p,{children:["This example shows how to use several buttons in a ",(0,a.jsx)(e.code,{children:"ToolbarButtonRow"}),"."]}),`
`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-jsx",children:`<ToolbarButtonRow>
  <ToolbarButton variant="default" iconOnly={false} isOpen={false}>
    Last 6 hours
  </ToolbarButton>
  <ButtonGroup>
    <ToolbarButton icon="search-minus" variant="default" />
    <ToolbarButton icon="search-plus" variant="default" />
  </ButtonGroup>
  <ToolbarButton icon="sync" isOpen={false} variant="primary" />
</ToolbarButtonRow>
`})}),`
`,(0,a.jsx)(c.ov,{of:m.U})]})}function p(t={}){const{wrapper:e}=Object.assign({},(0,x.RP)(),t.components);return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var g=p,y=Object.defineProperty,P=Object.defineProperties,E=Object.getOwnPropertyDescriptors,B=Object.getOwnPropertySymbols,D=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,C=(t,e,_)=>e in t?y(t,e,{enumerable:!0,configurable:!0,writable:!0,value:_}):t[e]=_,s=(t,e)=>{for(var _ in e||(e={}))D.call(e,_)&&C(t,_,e[_]);if(B)for(var _ of B(e))w.call(e,_)&&C(t,_,e[_]);return t},d=(t,e)=>P(t,E(e)),i,v,A;const j={title:"Buttons/ToolbarButton/ToolbarButtonRow",component:m.U,parameters:{docs:{page:g},controls:{exclude:["className"]}}},o=t=>r.createElement(u.s,null,r.createElement(m.U,s({},t),r.createElement(b.I,null,"Just text"),r.createElement(b.I,{icon:"sync",tooltip:"Sync"}),r.createElement(b.I,{imgSrc:"./grafana_icon.svg"},"With imgSrc"),r.createElement(b.I,null,"Just text"),r.createElement(b.I,{icon:"sync",tooltip:"Sync"}),r.createElement(b.I,{imgSrc:"./grafana_icon.svg"},"With imgSrc")));var l=j;o.parameters=d(s({},o.parameters),{docs:d(s({},(i=o.parameters)==null?void 0:i.docs),{source:s({originalSource:`args => {
  return <DashboardStoryCanvas>
      <ToolbarButtonRow {...args}>
        <ToolbarButton>Just text</ToolbarButton>
        <ToolbarButton icon="sync" tooltip="Sync" />
        <ToolbarButton imgSrc="./grafana_icon.svg">With imgSrc</ToolbarButton>
        <ToolbarButton>Just text</ToolbarButton>
        <ToolbarButton icon="sync" tooltip="Sync" />
        <ToolbarButton imgSrc="./grafana_icon.svg">With imgSrc</ToolbarButton>
      </ToolbarButtonRow>
    </DashboardStoryCanvas>;
}`},(A=(v=o.parameters)==null?void 0:v.docs)==null?void 0:A.source)})})},"./src/components/ToolbarButton/ToolbarButton.tsx":function(I,O,n){n.d(O,{I:function(){return i}});var r=n("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=n("../../node_modules/react/index.js"),b=n("../grafana-data/src/types/icon.ts"),m=n("../grafana-e2e-selectors/src/selectors/index.ts"),a=n("./src/themes/ThemeContext.tsx"),x=n("./src/themes/mixins.ts"),c=n("./src/components/Button/Button.tsx"),f=n("./src/components/Icon/Icon.tsx"),p=n("./src/components/Tooltip/Tooltip.tsx"),g=Object.defineProperty,y=Object.defineProperties,P=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertySymbols,B=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable,w=(o,l,t)=>l in o?g(o,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[l]=t,C=(o,l)=>{for(var t in l||(l={}))B.call(l,t)&&w(o,t,l[t]);if(E)for(var t of E(l))D.call(l,t)&&w(o,t,l[t]);return o},s=(o,l)=>y(o,P(l)),d=(o,l)=>{var t={};for(var e in o)B.call(o,e)&&l.indexOf(e)<0&&(t[e]=o[e]);if(o!=null&&E)for(var e of E(o))l.indexOf(e)<0&&D.call(o,e)&&(t[e]=o[e]);return t};const i=(0,u.forwardRef)((o,l)=>{var t=o,{tooltip:e,icon:_,iconSize:M,className:H,children:W,imgSrc:N,imgAlt:K,fullWidth:z,isOpen:L,narrow:$,variant:U="default",iconOnly:T,"aria-label":h,isHighlighted:R}=t,F=d(t,["tooltip","icon","iconSize","className","children","imgSrc","imgAlt","fullWidth","isOpen","narrow","variant","iconOnly","aria-label","isHighlighted"]);const S=(0,a.of)(j),V=(0,r.cx)({[S.button]:!0,[S.buttonFullWidth]:z,[S.narrow]:$},S[U],H),X=(0,r.cx)({[S.content]:!0,[S.contentWithIcon]:!!_,[S.contentWithRightIcon]:L!==void 0}),k=u.createElement("button",C({ref:l,className:V,"aria-label":v(h,e),"aria-expanded":L},F),A(_,M),N&&u.createElement("img",{className:S.img,src:N,alt:K??""}),W&&!T&&u.createElement("div",{className:X},W),L===!1&&u.createElement(f.I,{name:"angle-down"}),L===!0&&u.createElement(f.I,{name:"angle-up"}),R&&u.createElement("div",{className:S.highlight}));return e?u.createElement(p.m,{ref:l,content:e,placement:"bottom"},k):k});i.displayName="ToolbarButton";function v(o,l){return o||(l?m.Tp.components.PageToolbar.item(l):void 0)}function A(o,l){return o?(0,b.n6)(o)?u.createElement(f.I,{name:o,size:`${l||"lg"}`}):o:null}const j=o=>{const l=(0,c.U_)(o,"primary","solid"),t=(0,c.U_)(o,"destructive","solid"),e=(0,r.AH)({color:o.colors.text.primary,background:o.colors.secondary.main,"&:hover":{color:o.colors.text.primary,background:o.colors.secondary.shade,border:`1px solid ${o.colors.border.medium}`}});return{button:(0,r.AH)({label:"toolbar-button",position:"relative",display:"flex",alignItems:"center",height:o.spacing(o.components.height.md),padding:o.spacing(0,1),borderRadius:o.shape.radius.default,lineHeight:`${o.components.height.md*o.spacing.gridSize-2}px`,fontWeight:o.typography.fontWeightMedium,border:`1px solid ${o.colors.secondary.border}`,whiteSpace:"nowrap",transition:o.transitions.create(["background","box-shadow","border-color","color"],{duration:o.transitions.duration.short}),"&:focus, &:focus-visible":s(C({},(0,x.Hi)(o)),{zIndex:1}),"&:focus:not(:focus-visible)":(0,x.cr)(o),"&:hover":{boxShadow:o.shadows.z1},"&[disabled], &:disabled":{cursor:"not-allowed",opacity:o.colors.action.disabledOpacity,background:o.colors.action.disabledBackground,boxShadow:"none","&:hover":{color:o.colors.text.disabled,background:o.colors.action.disabledBackground,boxShadow:"none"}}}),default:(0,r.AH)({color:o.colors.text.secondary,background:"transparent",border:"1px solid transparent","&:hover":{color:o.colors.text.primary,background:o.colors.background.secondary}}),canvas:e,active:(0,r.cx)(e,(0,r.AH)({"&::before":{display:"block",content:'" "',position:"absolute",left:0,right:0,height:"2px",bottom:0,borderRadius:o.shape.radius.default,backgroundImage:o.colors.gradients.brandHorizontal}})),primary:(0,r.AH)(l),destructive:(0,r.AH)(t),narrow:(0,r.AH)({padding:o.spacing(0,.5)}),img:(0,r.AH)({width:"16px",height:"16px",marginRight:o.spacing(1)}),buttonFullWidth:(0,r.AH)({flexGrow:1}),content:(0,r.AH)({flexGrow:1}),contentWithIcon:(0,r.AH)({display:"none",paddingLeft:o.spacing(1),[`@media ${x.uT(o.v1.breakpoints.md)}`]:{display:"block"}}),contentWithRightIcon:(0,r.AH)({paddingRight:o.spacing(.5)}),highlight:(0,r.AH)({backgroundColor:o.colors.success.main,borderRadius:o.shape.radius.circle,width:"6px",height:"6px",position:"absolute",top:"-3px",right:"-3px",zIndex:1})}};try{i.displayName="ToolbarButton",i.__docgenInfo={description:"",displayName:"ToolbarButton",props:{icon:{defaultValue:null,description:"Icon name",name:"icon",required:!1,type:{name:"ReactNode"}},iconSize:{defaultValue:null,description:"Icon size",name:"iconSize",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'},{value:'"xxl"'},{value:'"xxxl"'}]}},tooltip:{defaultValue:null,description:"Tooltip",name:"tooltip",required:!1,type:{name:"string"}},imgSrc:{defaultValue:null,description:"For image icons",name:"imgSrc",required:!1,type:{name:"string"}},imgAlt:{defaultValue:null,description:"Alt text for imgSrc",name:"imgAlt",required:!1,type:{name:"string"}},isOpen:{defaultValue:null,description:"if true or false will show angle-down/up",name:"isOpen",required:!1,type:{name:"boolean"}},fullWidth:{defaultValue:null,description:"Controls flex-grow: 1",name:"fullWidth",required:!1,type:{name:"boolean"}},narrow:{defaultValue:null,description:"reduces padding to xs",name:"narrow",required:!1,type:{name:"boolean"}},variant:{defaultValue:{value:"default"},description:"variant",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"destructive"'},{value:'"canvas"'},{value:'"default"'},{value:'"active"'}]}},iconOnly:{defaultValue:null,description:"Hide any children and only show icon",name:"iconOnly",required:!1,type:{name:"boolean"}},isHighlighted:{defaultValue:null,description:"Show highlight dot",name:"isHighlighted",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/ToolbarButton/ToolbarButton.tsx#ToolbarButton"]={docgenInfo:i.__docgenInfo,name:"ToolbarButton",path:"src/components/ToolbarButton/ToolbarButton.tsx#ToolbarButton"})}catch{}},"./src/components/ToolbarButton/ToolbarButtonRow.tsx":function(I,O,n){n.d(O,{U:function(){return w}});var r=n("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=n("../../node_modules/@react-aria/dialog/dist/import.mjs"),b=n("../../node_modules/@react-aria/focus/dist/import.mjs"),m=n("../../node_modules/@react-aria/overlays/dist/import.mjs"),a=n("../../node_modules/react/index.js"),x=n("./src/themes/ThemeContext.tsx"),c=n("./src/components/Portal/Portal.tsx"),f=n("./src/components/ToolbarButton/ToolbarButton.tsx"),p=Object.defineProperty,g=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable,E=(s,d,i)=>d in s?p(s,d,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[d]=i,B=(s,d)=>{for(var i in d||(d={}))y.call(d,i)&&E(s,i,d[i]);if(g)for(var i of g(d))P.call(d,i)&&E(s,i,d[i]);return s},D=(s,d)=>{var i={};for(var v in s)y.call(s,v)&&d.indexOf(v)<0&&(i[v]=s[v]);if(s!=null&&g)for(var v of g(s))d.indexOf(v)<0&&P.call(s,v)&&(i[v]=s[v]);return i};const w=(0,a.forwardRef)((s,d)=>{var i=s,{alignment:v="left",className:A,children:j}=i,o=D(i,["alignment","className","children"]);const l=a.Children.toArray(j).filter(T=>T!=null),[t,e]=(0,a.useState)(Array(l.length).fill(!1)),_=(0,a.useRef)(null),[M,H]=(0,a.useState)(!1),W=(0,a.useRef)(null),N=(0,a.createRef)(),{overlayProps:K}=(0,m.e)({onClose:()=>H(!1),isDismissable:!0,isOpen:M,shouldCloseOnInteractOutside:T=>{var h;const R=(0,c.gF)();return!((h=W.current)!=null&&h.contains(T))&&!R.contains(T)}},N),{dialogProps:z}=(0,u.s)({},N),L=(0,x.$j)(),$=v==="left"?t.indexOf(!1)-1:t.length,U=C(L,$,v);return(0,a.useLayoutEffect)(()=>{const T=new IntersectionObserver(h=>{h.forEach(R=>{if(R.target instanceof HTMLElement&&R.target.parentNode){const F=Array.prototype.indexOf.call(R.target.parentNode.children,R.target);e(S=>{const V=[...S];return V[F]=R.isIntersecting,V})}})},{threshold:1,root:_.current});return _.current&&Array.from(_.current.children).forEach(h=>{h instanceof HTMLElement&&h!==W.current&&T.observe(h)}),()=>T.disconnect()},[j]),a.createElement("div",B({ref:_,className:(0,r.cx)(U.container,A)},o),l.map((T,h)=>a.createElement("div",{key:h,style:{order:h,visibility:t[h]?"visible":"hidden"},className:U.childWrapper},T)),t.includes(!1)&&a.createElement("div",{ref:W,className:U.overflowButton},a.createElement(f.I,{variant:M?"active":"default",tooltip:"Show more items",onClick:()=>H(!M),icon:"ellipsis-v",iconOnly:!0,narrow:!0}),M&&a.createElement(b.n1,{contain:!0,autoFocus:!0},a.createElement("div",B(B({className:U.overflowItems,ref:N},K),z),l.map((T,h)=>!t[h]&&T)))))});w.displayName="ToolbarButtonRow";const C=(s,d,i)=>({overflowButton:(0,r.AH)({order:d}),overflowItems:(0,r.AH)({alignItems:"center",backgroundColor:s.colors.background.primary,borderRadius:s.shape.radius.default,boxShadow:s.shadows.z2,display:"flex",flexWrap:"wrap",gap:s.spacing(1),marginTop:s.spacing(1),maxWidth:"80vw",padding:s.spacing(.5,1),position:"absolute",right:0,top:"100%",width:"max-content",zIndex:s.zIndex.dropdown}),container:(0,r.AH)({alignItems:"center",display:"flex",gap:s.spacing(1),justifyContent:i==="left"?"flex-start":"flex-end",minWidth:0,position:"relative"}),childWrapper:(0,r.AH)({alignItems:"center",display:"flex",gap:s.spacing(1)})});try{w.displayName="ToolbarButtonRow",w.__docgenInfo={description:"",displayName:"ToolbarButtonRow",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},alignment:{defaultValue:{value:"left"},description:"Determine flex-alignment of child buttons. Needed for overflow behaviour.",name:"alignment",required:!1,type:{name:"enum",value:[{value:'"right"'},{value:'"left"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/ToolbarButton/ToolbarButtonRow.tsx#ToolbarButtonRow"]={docgenInfo:w.__docgenInfo,name:"ToolbarButtonRow",path:"src/components/ToolbarButton/ToolbarButtonRow.tsx#ToolbarButtonRow"})}catch{}},"./src/utils/storybook/DashboardStoryCanvas.tsx":function(I,O,n){n.d(O,{s:function(){return m}});var r=n("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),u=n("../../node_modules/react/index.js"),b=n("./src/themes/ThemeContext.tsx");const m=({children:a})=>{const x=(0,b.$j)(),c=(0,r.AH)({width:"100%",height:"100%",padding:"32px",background:x.colors.background.canvas,overflow:"auto"});return u.createElement("div",{className:c},a)};m.displayName="DashboardStoryCanvas";try{m.displayName="DashboardStoryCanvas",m.__docgenInfo={description:"",displayName:"DashboardStoryCanvas",props:{}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/utils/storybook/DashboardStoryCanvas.tsx#DashboardStoryCanvas"]={docgenInfo:m.__docgenInfo,name:"DashboardStoryCanvas",path:"src/utils/storybook/DashboardStoryCanvas.tsx#DashboardStoryCanvas"})}catch{}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(I,O,n){/**
 * @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 r=n("../../node_modules/react/index.js"),u=Symbol.for("react.element"),b=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,a=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,x={key:!0,ref:!0,__self:!0,__source:!0};function c(f,p,g){var y,P={},E=null,B=null;g!==void 0&&(E=""+g),p.key!==void 0&&(E=""+p.key),p.ref!==void 0&&(B=p.ref);for(y in p)m.call(p,y)&&!x.hasOwnProperty(y)&&(P[y]=p[y]);if(f&&f.defaultProps)for(y in p=f.defaultProps,p)P[y]===void 0&&(P[y]=p[y]);return{$$typeof:u,type:f,key:E,ref:B,props:P,_owner:a.current}}O.Fragment=b,O.jsx=c,O.jsxs=c},"../../node_modules/react/jsx-runtime.js":function(I,O,n){I.exports=n("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
