"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[6996],{"./src/components/Cascader/Cascader.story.tsx":function(G,v,n){n.r(v),n.d(v,{Simple:function(){return l},WithCustomValue:function(){return c},WithDisplayAllSelectedLevels:function(){return d},WithInitialValue:function(){return i},WithOptionsStateUpdate:function(){return p},default:function(){return B}});var h=n("../../node_modules/react/index.js"),u=n("./src/components/Cascader/Cascader.tsx"),s=n("../../node_modules/react/jsx-runtime.js"),g=n("../../node_modules/@mdx-js/react/lib/index.js"),f=n("../../node_modules/@storybook/blocks/dist/index.mjs");function C(t){const e=Object.assign({h1:"h1",p:"p",code:"code"},(0,g.RP)(),t.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(f.W8,{title:"MDX|Cascader",component:u.v}),`
`,(0,s.jsx)(e.h1,{id:"cascader",children:"Cascader"}),`
`,(0,s.jsxs)(e.p,{children:["The cascader component is a ",(0,s.jsx)(e.code,{children:"Select"})," with a cascading flyout menu. When you have lots of options in your select, they can be hard to navigate from a regular dropdown list. In that case you can use the cascader to organize your options into groups hierarchically. Just like in the ",(0,s.jsx)(e.code,{children:"Select"})," component, the cascader input doubles as a search field to quickly jump to a selection without navigating the list."]}),`
`,(0,s.jsxs)(e.p,{children:["You can either use the ",(0,s.jsx)(e.code,{children:"Simple"})," cascader component for an empty input as default state or use the ",(0,s.jsx)(e.code,{children:"initialValue"})," or ",(0,s.jsx)(e.code,{children:"allowCustomValue"})," fields to pre-fill your cascader. Initial value means that one of the options from your cascaded list is pre-selected. Custom value means that apart from existing options from the list, your users can add custom values to the list by typing them in the ",(0,s.jsx)(e.code,{children:"Select"})," input."]}),`
`,(0,s.jsx)(f.ov,{of:u.v})]})}function R(t={}){const{wrapper:e}=Object.assign({},(0,g.RP)(),t.components);return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(C,t)})):C(t)}var X=R,U=Object.defineProperty,k=Object.defineProperties,z=Object.getOwnPropertyDescriptors,j=Object.getOwnPropertySymbols,J=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable,y=(t,e,r)=>e in t?U(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,a=(t,e)=>{for(var r in e||(e={}))J.call(e,r)&&y(t,r,e[r]);if(j)for(var r of j(e))N.call(e,r)&&y(t,r,e[r]);return t},o=(t,e)=>k(t,z(e)),b,S,x,O,P,_,V,w,W,I,D,L,F,T,E;const M=t=>console.log(t),A=[{label:"First",value:"1",items:[{label:"Second",value:"2"},{label:"Third",value:"3"},{label:"Fourth",value:"4"}]},{label:"FirstFirst",value:"5"}],Y={title:"Forms/Cascader",component:u.v,parameters:{docs:{page:X},controls:{exclude:["placeholder","initialValue","changeOnSelect","onSelect","loadData","onChange","onPopupVisibleChange","formatCreateLabel"]}},args:{onSelect:M,options:A},argTypes:{width:{control:{type:"range",min:0,max:70}}}},m=t=>h.createElement(u.v,a({},t)),l=m.bind({});l.args={separator:""};const i=m.bind({});i.args={initialValue:"3"};const c=m.bind({});c.args={initialValue:"Custom Initial Value",allowCustomValue:!0,formatCreateLabel:t=>"Custom Label"+t};const d=m.bind({});d.args={displayAllSelectedLevels:!0,separator:","};const p=()=>{const[t,e]=h.useState([{label:"Initial state option",value:"initial"}]);return setTimeout(()=>e(A),2e3),h.createElement(u.v,{options:t,onSelect:M})};var B=Y;l.parameters=o(a({},l.parameters),{docs:o(a({},(b=l.parameters)==null?void 0:b.docs),{source:a({originalSource:"args => <Cascader {...args} />"},(x=(S=l.parameters)==null?void 0:S.docs)==null?void 0:x.source)})}),i.parameters=o(a({},i.parameters),{docs:o(a({},(O=i.parameters)==null?void 0:O.docs),{source:a({originalSource:"args => <Cascader {...args} />"},(_=(P=i.parameters)==null?void 0:P.docs)==null?void 0:_.source)})}),c.parameters=o(a({},c.parameters),{docs:o(a({},(V=c.parameters)==null?void 0:V.docs),{source:a({originalSource:"args => <Cascader {...args} />"},(W=(w=c.parameters)==null?void 0:w.docs)==null?void 0:W.source)})}),d.parameters=o(a({},d.parameters),{docs:o(a({},(I=d.parameters)==null?void 0:I.docs),{source:a({originalSource:"args => <Cascader {...args} />"},(L=(D=d.parameters)==null?void 0:D.docs)==null?void 0:L.source)})}),p.parameters=o(a({},p.parameters),{docs:o(a({},(F=p.parameters)==null?void 0:F.docs),{source:a({originalSource:`() => {
  const [updatedOptions, setOptions] = React.useState<CascaderOption[]>([{
    label: 'Initial state option',
    value: 'initial'
  }]);
  setTimeout(() => setOptions(options), 2000);
  return <Cascader options={updatedOptions} onSelect={onSelect} />;
}`},(E=(T=p.parameters)==null?void 0:T.docs)==null?void 0:E.source)})})}}]);
