@oliasoft-open-source/react-ui-library 4.11.0-beta-3 → 4.11.0

package/dist/storybook/assets/select.stories-B9w9ONzj.js

@@ -1,579 +0,0 @@
-import{j as d}from"./jsx-runtime-eps93zm2.js";import{r as b}from"./index-DhsZuJvc.js";import{w as i,e as o,u as c}from"./index-DMAnyMX5.js";import{S as z}from"./select-DnRuRG_N.js";import{S as qa}from"./spacer-BWoNR27H.js";import{I as Z}from"./common-types-Sih75Sav.js";import{I as $}from"./icon-BSFY3vDO.js";import"./index-CF7H4eMJ.js";import"./lodash-c4VUpsOs.js";import"./index-Bk2sglWO.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./index-CEuq6vkz.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./types-BmbYqTX_.js";import"./text-B3-TSWok.js";import"./actions-D-uVCDzk.js";import"./button-DHevvVBE.js";import"./spinner-AWUe4xwQ.js";import"./badge-CLQ59MDF.js";import"./select.input-D0UkAPd9.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";const _a=[{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Koalas",value:"leaves"},{label:"Monkeys",value:"bananas",disabled:!0},{label:"Wombats",value:"bark"}],Fa=[{label:"Kangaroos",value:"grass",details:"(grass)"},{label:"Monkeys",value:"bananas",details:"(bananas)"},{label:"Possums",value:"slugs",details:"(slugs)"}],Ga=[{type:"Heading",label:"Large"},{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{type:"Heading",label:"Small"},{label:"Possums",value:"slugs"}],Ya=[{label:1,value:1},{label:2,value:2},{label:3,value:3},{label:4,value:4}],Za=[{label:"Yes",value:!0},{label:"No",value:!1}],$a=[{label:"Aardvarks",value:"termites"},{label:"Monkeys",value:"bananas"},{label:"Vampires",value:"blood",icon:d.jsx($,{icon:Z.WARNING,color:"var(--color-text-warning)"})},{label:"Zombies",value:"brains",icon:d.jsx($,{icon:Z.ERROR,color:"var(--color-text-error)"})}],y=[{label:"Delete",icon:"delete",onClick:()=>{}},{label:"Rename",icon:"rename",onClick:()=>{}}],za=[{label:"Kangaroos",value:"grass",actions:y},{label:"Monkeys",value:"bananas",actions:y},{label:"Possums",value:"slugs",actions:y,details:"(some details)"}],Ja=[{label:"Kangaroos",value:"grass",actions:y,icon:d.jsx($,{icon:Z.WARNING,color:"var(--color-text-warning)"}),details:"(grass)"},{label:"Monkeys",value:"bananas",actions:y,icon:d.jsx($,{icon:Z.WARNING,color:"var(--color-text-warning)"}),details:"(bananas)"},{label:"Possums",value:"slugs",actions:y,icon:d.jsx($,{icon:Z.WARNING,color:"var(--color-text-warning)"}),details:"(slugs)"}],Qa=[...Array(1e4).keys()].map((t,l)=>({label:Math.random().toString(36).substring(7),value:l})),Ua=["Aardvarks","Kangaroos","Monkeys","Possums"],Tn={title:"Forms/Select",component:z,args:{options:_a,native:!1,multi:!1,disabled:!1,autoLayerWidth:!1,clearable:!1,searchable:!0,right:!1}},a=t=>{const{multi:l,value:e}=t,[s,n]=b.useState(e||(l?[]:void 0)),u=r=>{const{value:g}=r.target;n(l?g:{value:g})};return d.jsx(z,{value:s,onChange:u,...t})},J=a.bind({}),C=a.bind({});C.args={small:!0};const x=a.bind({});x.args={width:"auto"};const I=a.bind({});I.args={width:"200px"};const w=a.bind({});w.args={native:!0};const f=a.bind({});f.args={multi:!0,clearable:!0};const T=a.bind({});T.args={options:[]};const B=a.bind({});B.args={clearable:!0};const j=a.bind({});j.args={value:{label:"Vampires",value:"blood"}};const k=a.bind({});k.args={placeholder:"Select the best animal..."};const W=a.bind({});W.args={options:Ga};const O=a.bind({});O.args={options:Fa};const D=a.bind({});D.args={options:$a};const N=a.bind({});N.args={options:za};const A=a.bind({});A.args={options:Ja};const E=a.bind({});E.args={searchable:!1};const M=a.bind({});M.args={right:!0};const v=a.bind({});v.parameters={docs:{description:{story:"Avoid autoLayerWidth for very long lists in custom selects (slow)"}}};v.args={width:"70px",autoLayerWidth:!0};const L=a.bind({});L.args={tooltip:"Some info"};const K=a.bind({});K.args={error:"Some info"};const R=a.bind({});R.args={warning:"Some info"};const P=a.bind({});P.args={disabled:!0};const H=a.bind({});H.args={options:Ya,placeholder:void 0};const _=a.bind({});_.args={options:Za};const q=a.bind({});q.args={options:Ua};const m=a.bind({});m.parameters={docs:{description:{story:"Avoid `width: auto` and autoLayerWidth for very long lists in custom selects (slow). Consider checkNonExistentValues={false}."}}};m.args={options:Qa};const F=a.bind({});F.args={deprecatedEventHandler:!0};const G=a.bind({});G.args={value:{label:"Vampires",value:"blood"},disabled:!0};const Y=()=>{const[t,l]=b.useState([{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{label:"Possums",value:"slugs"}]),[e,s]=b.useState(void 0),[n,u]=b.useState([]);return d.jsxs(d.Fragment,{children:[d.jsx(z,{name:"example",options:t,onChange:r=>s({value:r.target.value}),onCreate:r=>{const g={label:r,value:r};l([...t,g]),s(g)},value:e,clearable:!0}),d.jsx(qa,{}),d.jsx(z,{name:"example",options:t,onChange:r=>u(r.target.value),onCreate:r=>{const g={label:r,value:r};l([...t,g]),console.log(r),u([...n,g])},value:n,multi:!0,clearable:!0})]})},h=a.bind({});h.args={testId:"testId",clearable:!0};h.play=async({canvasElement:t,step:l})=>{const e=t.parentElement?i(t.parentElement):null;await o(e).toBeTruthy(),e&&(await l("Select item with click",async()=>{const s=e.getByTestId("testId");await c.click(s);const n=e.getByTestId("testId-layer");await o(n).toBeInTheDocument();const u=i(n).getByText("Wombats");await c.click(u);const r=e.getByTestId("testId-value");await o(i(r).getByText("Wombats")).toBeInTheDocument()}),await l("Clear selected value",async()=>{const s=e.getByTestId("testId-clear");await c.click(s);const n=e.queryByTestId("testId-value");await o(n).not.toBeInTheDocument()}))};const S=a.bind({});S.args={testId:"testId",clearable:!0,multi:!0};S.play=async({canvasElement:t,step:l})=>{const e=t.parentElement?i(t.parentElement):null;await o(e).toBeTruthy(),e&&(await l("Select items with click",async()=>{const s=e.getByTestId("testId");await c.click(s);const n=e.getByTestId("testId-layer");await o(n).toBeInTheDocument();const u=i(n).getByText("Wombats");await c.click(u);const r=i(n).getByText("Kangaroos");await c.click(r),await c.click(t),await o(n).not.toBeInTheDocument();const g=e.getByTestId("testId-value");await o(i(g).getByText("Wombats")).toBeInTheDocument(),await o(i(g).getByText("Kangaroos")).toBeInTheDocument()}),await l("Deselect item with click",async()=>{const s=e.getByTestId("testId");await c.click(s);const n=e.getByTestId("testId-layer");await o(n).toBeInTheDocument();const u=i(n).getByText("Wombats");await c.click(u),await c.click(t),await o(n).not.toBeInTheDocument();const r=e.getByTestId("testId-value");await o(i(r).queryByText("Wombats")).not.toBeInTheDocument()}),await l("Clear selected values",async()=>{const s=e.getByTestId("testId-clear");await c.click(s);const n=e.queryByTestId("testId-value");await o(n).not.toBeInTheDocument()}))};const V=a.bind({});V.args={testId:"testId",disabled:!0};V.play=async({canvasElement:t,step:l})=>{const e=i(t);await l("Clicking disabled trigger should not show layer",async()=>{await e.getByTestId("testId").click();const n=e.queryByTestId("testId-layer");await o(n).toBeNull()})};const p=()=>{const[t,l]=b.useState(_a),[e,s]=b.useState(void 0);return d.jsx(z,{testId:"testId",name:"example",options:t,onChange:n=>s({value:n.target.value}),onCreate:n=>{const u={label:n,value:n};l([...t,u]),s(u)},value:e})};p.args={testId:"testId"};p.play=async({canvasElement:t,step:l})=>{const e=t.parentElement?i(t.parentElement):null;await o(e).toBeTruthy(),e&&await l("Create new item",async()=>{const s=e.getByTestId("testId-input");if(o(s).toBeInTheDocument(),!s)return;await c.type(s,"New value");const n=e.getByText('Create "New value"');await c.click(n);const u=e.getByTestId("testId-value");await o(i(u).getByText("New value")).toBeInTheDocument()})};Y.__docgenInfo={description:"",methods:[],displayName:"OnCreate"};p.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestCreate"};var Q,U,X;J.parameters={...J.parameters,docs:{...(Q=J.parameters)==null?void 0:Q.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(X=(U=J.parameters)==null?void 0:U.docs)==null?void 0:X.source}}};var ee,ae,ne;C.parameters={...C.parameters,docs:{...(ee=C.parameters)==null?void 0:ee.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(ne=(ae=C.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var te,se,le;x.parameters={...x.parameters,docs:{...(te=x.parameters)==null?void 0:te.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(le=(se=x.parameters)==null?void 0:se.docs)==null?void 0:le.source}}};var re,oe,ue;I.parameters={...I.parameters,docs:{...(re=I.parameters)==null?void 0:re.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(ue=(oe=I.parameters)==null?void 0:oe.docs)==null?void 0:ue.source}}};var ce,ie,de;w.parameters={...w.parameters,docs:{...(ce=w.parameters)==null?void 0:ce.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(de=(ie=w.parameters)==null?void 0:ie.docs)==null?void 0:de.source}}};var ge,pe,ve;f.parameters={...f.parameters,docs:{...(ge=f.parameters)==null?void 0:ge.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(ve=(pe=f.parameters)==null?void 0:pe.docs)==null?void 0:ve.source}}};var me,he,Se;T.parameters={...T.parameters,docs:{...(me=T.parameters)==null?void 0:me.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Se=(he=T.parameters)==null?void 0:he.docs)==null?void 0:Se.source}}};var Ve,be,ye;B.parameters={...B.parameters,docs:{...(Ve=B.parameters)==null?void 0:Ve.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(ye=(be=B.parameters)==null?void 0:be.docs)==null?void 0:ye.source}}};var Ce,xe,Ie;j.parameters={...j.parameters,docs:{...(Ce=j.parameters)==null?void 0:Ce.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ie=(xe=j.parameters)==null?void 0:xe.docs)==null?void 0:Ie.source}}};var we,fe,Te;k.parameters={...k.parameters,docs:{...(we=k.parameters)==null?void 0:we.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Te=(fe=k.parameters)==null?void 0:fe.docs)==null?void 0:Te.source}}};var Be,je,ke;W.parameters={...W.parameters,docs:{...(Be=W.parameters)==null?void 0:Be.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(ke=(je=W.parameters)==null?void 0:je.docs)==null?void 0:ke.source}}};var We,Oe,De;O.parameters={...O.parameters,docs:{...(We=O.parameters)==null?void 0:We.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(De=(Oe=O.parameters)==null?void 0:Oe.docs)==null?void 0:De.source}}};var Ne,Ae,Ee;D.parameters={...D.parameters,docs:{...(Ne=D.parameters)==null?void 0:Ne.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ee=(Ae=D.parameters)==null?void 0:Ae.docs)==null?void 0:Ee.source}}};var Me,Le,Ke;N.parameters={...N.parameters,docs:{...(Me=N.parameters)==null?void 0:Me.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ke=(Le=N.parameters)==null?void 0:Le.docs)==null?void 0:Ke.source}}};var Re,Pe,He;A.parameters={...A.parameters,docs:{...(Re=A.parameters)==null?void 0:Re.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(He=(Pe=A.parameters)==null?void 0:Pe.docs)==null?void 0:He.source}}};var _e,qe,Fe;E.parameters={...E.parameters,docs:{...(_e=E.parameters)==null?void 0:_e.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Fe=(qe=E.parameters)==null?void 0:qe.docs)==null?void 0:Fe.source}}};var Ge,Ye,Ze;M.parameters={...M.parameters,docs:{...(Ge=M.parameters)==null?void 0:Ge.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ze=(Ye=M.parameters)==null?void 0:Ye.docs)==null?void 0:Ze.source}}};var $e,ze,Je;v.parameters={...v.parameters,docs:{...($e=v.parameters)==null?void 0:$e.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Je=(ze=v.parameters)==null?void 0:ze.docs)==null?void 0:Je.source}}};var Qe,Ue,Xe;L.parameters={...L.parameters,docs:{...(Qe=L.parameters)==null?void 0:Qe.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Xe=(Ue=L.parameters)==null?void 0:Ue.docs)==null?void 0:Xe.source}}};var ea,aa,na;K.parameters={...K.parameters,docs:{...(ea=K.parameters)==null?void 0:ea.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(na=(aa=K.parameters)==null?void 0:aa.docs)==null?void 0:na.source}}};var ta,sa,la;R.parameters={...R.parameters,docs:{...(ta=R.parameters)==null?void 0:ta.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(la=(sa=R.parameters)==null?void 0:sa.docs)==null?void 0:la.source}}};var ra,oa,ua;P.parameters={...P.parameters,docs:{...(ra=P.parameters)==null?void 0:ra.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(ua=(oa=P.parameters)==null?void 0:oa.docs)==null?void 0:ua.source}}};var ca,ia,da;H.parameters={...H.parameters,docs:{...(ca=H.parameters)==null?void 0:ca.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(da=(ia=H.parameters)==null?void 0:ia.docs)==null?void 0:da.source}}};var ga,pa,va;_.parameters={..._.parameters,docs:{...(ga=_.parameters)==null?void 0:ga.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(va=(pa=_.parameters)==null?void 0:pa.docs)==null?void 0:va.source}}};var ma,ha,Sa;q.parameters={...q.parameters,docs:{...(ma=q.parameters)==null?void 0:ma.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Sa=(ha=q.parameters)==null?void 0:ha.docs)==null?void 0:Sa.source}}};var Va,ba,ya;m.parameters={...m.parameters,docs:{...(Va=m.parameters)==null?void 0:Va.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(ya=(ba=m.parameters)==null?void 0:ba.docs)==null?void 0:ya.source}}};var Ca,xa,Ia;F.parameters={...F.parameters,docs:{...(Ca=F.parameters)==null?void 0:Ca.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ia=(xa=F.parameters)==null?void 0:xa.docs)==null?void 0:Ia.source}}};var wa,fa,Ta;G.parameters={...G.parameters,docs:{...(wa=G.parameters)==null?void 0:wa.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ta=(fa=G.parameters)==null?void 0:fa.docs)==null?void 0:Ta.source}}};var Ba,ja,ka;Y.parameters={...Y.parameters,docs:{...(Ba=Y.parameters)==null?void 0:Ba.docs,source:{originalSource:`() => {
-  const [options, setOptions] = useState([{
-    label: 'Aardvarks',
-    value: 'termites'
-  }, {
-    label: 'Kangaroos',
-    value: 'grass'
-  }, {
-    label: 'Monkeys',
-    value: 'bananas'
-  }, {
-    label: 'Possums',
-    value: 'slugs'
-  }]);
-  const [singleValue, setSingleValue] = useState<ISelectSelectedOption | undefined>(undefined);
-  const [multiValue, setMultiValue] = useState<ISelectSelectedOption[]>([]);
-  return <>
-      <Select name="example" options={options} onChange={evt => setSingleValue({
-      value: evt.target.value
-    })} onCreate={value => {
-      const newValue = {
-        label: value,
-        value
-      };
-      setOptions([...options, newValue]);
-      setSingleValue(newValue);
-    }} value={singleValue} clearable />
-      <Spacer />
-      <Select name="example" options={options} onChange={evt => setMultiValue(evt.target.value)} onCreate={value => {
-      const newValue = {
-        label: value,
-        value
-      };
-      setOptions([...options, newValue]);
-      console.log(value);
-      setMultiValue([...multiValue, newValue]);
-    }} value={multiValue} multi clearable />
-    </>;
-}`,...(ka=(ja=Y.parameters)==null?void 0:ja.docs)==null?void 0:ka.source}}};var Wa,Oa,Da;h.parameters={...h.parameters,docs:{...(Wa=h.parameters)==null?void 0:Wa.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Da=(Oa=h.parameters)==null?void 0:Oa.docs)==null?void 0:Da.source}}};var Na,Aa,Ea;S.parameters={...S.parameters,docs:{...(Na=S.parameters)==null?void 0:Na.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ea=(Aa=S.parameters)==null?void 0:Aa.docs)==null?void 0:Ea.source}}};var Ma,La,Ka;V.parameters={...V.parameters,docs:{...(Ma=V.parameters)==null?void 0:Ma.docs,source:{originalSource:`(args: any) => {
-  const {
-    multi,
-    value
-  } = args;
-  const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
-  const handleChange = (evt: any) => {
-    const {
-      value
-    } = evt.target;
-    setSelectedValue(multi ? value : {
-      value
-    });
-  };
-  return <Select value={selectedValue} onChange={handleChange}
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  {...args} />;
-}`,...(Ka=(La=V.parameters)==null?void 0:La.docs)==null?void 0:Ka.source}}};var Ra,Pa,Ha;p.parameters={...p.parameters,docs:{...(Ra=p.parameters)==null?void 0:Ra.docs,source:{originalSource:`() => {
-  const [options, setOptions] = useState(storyData.options);
-  const [singleValue, setSingleValue] = useState<ISelectSelectedOption | undefined>(undefined);
-  return <Select testId="testId" name="example" options={options} onChange={evt => setSingleValue({
-    value: evt.target.value
-  })} onCreate={value => {
-    const newValue = {
-      label: value,
-      value
-    };
-    setOptions([...options, newValue]);
-    setSingleValue(newValue);
-  }} value={singleValue} />;
-}`,...(Ha=(Pa=p.parameters)==null?void 0:Pa.docs)==null?void 0:Ha.source}}};const Bn=["Default","Small","AutoWidth","FixedWidth","Native","Multiselect","Empty","Clearable","NonExistentValue","CustomPlaceholder","OptionsWithHeadings","OptionsWithDetails","OptionsWithIcons","OptionsWithActions","OptionsWithEverything","NotSearchable","RightAligned","AutoLayerWidth","Tooltip","Error","Warning","Disabled","NumericOptions","BooleanOptions","SimpleOptions","VeryLongList","DeprecatedEventHandler","TestDisabledNonExistentValue","OnCreate","Test","TestMulti","TestDisabled","TestCreate"];export{v as AutoLayerWidth,x as AutoWidth,_ as BooleanOptions,B as Clearable,k as CustomPlaceholder,J as Default,F as DeprecatedEventHandler,P as Disabled,T as Empty,K as Error,I as FixedWidth,f as Multiselect,w as Native,j as NonExistentValue,E as NotSearchable,H as NumericOptions,Y as OnCreate,N as OptionsWithActions,O as OptionsWithDetails,A as OptionsWithEverything,W as OptionsWithHeadings,D as OptionsWithIcons,M as RightAligned,q as SimpleOptions,C as Small,h as Test,p as TestCreate,V as TestDisabled,G as TestDisabledNonExistentValue,S as TestMulti,L as Tooltip,m as VeryLongList,R as Warning,Bn as __namedExportsOrder,Tn as default};

package/dist/storybook/assets/tabs.stories-dsXjRHJy.js

@@ -1,30 +0,0 @@
-import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as I}from"./index-DhsZuJvc.js";import{T as b}from"./tabs-C3NG6m9W.js";import"./index-Bk2sglWO.js";import"./disabled-context-rmpd7YJS.js";import"./lodash-c4VUpsOs.js";import"./badge-CLQ59MDF.js";import"./select.input-D0UkAPd9.js";import"./types-BmbYqTX_.js";const Q={title:"Navigation/Tabs",component:b,args:{name:"example",options:[{label:"Tab",value:0},{label:"Tab",value:1},{label:"With Badge",value:2,badge:"3"},{label:"Invalid",value:3,invalid:!0},{label:"Disabled",value:4,disabled:!0},{label:"Hidden tab",value:5,hidden:!0}],value:0}},s=i=>e.jsx(b,{...i}),d=s.bind({}),r=s.bind({});r.args={children:[e.jsx("div",{label:"Tab 0",children:e.jsx("h3",{children:"Tab 0 Content"})}),e.jsx("div",{label:"Tab 1",hidden:!0,children:e.jsx("h3",{children:"Tab 1 Content"})}),e.jsx("div",{label:"Tab 2",disabled:!0,children:e.jsx("h3",{children:"Tab 2 Content"})}),e.jsx("div",{label:"Tab 3",children:e.jsx("h3",{children:"Tab 3 Content"})}),e.jsx("div",{label:"Tab 4",children:e.jsx("h3",{children:"Tab 4 Content"})})]};const l=s.bind({});l.args={margin:!1};const a=s.bind({});a.parameters={layout:"fullscreen",docs:{description:{story:"When you want the divider to fill the edges of its container."}}};a.args={padding:!0};const t=s.bind({});t.args={options:[{label:"Tab 0",value:0},{label:"Tab 1",value:1},{label:"Tab 2",value:2},{label:"Tab 3",value:3,right:!0},{label:"Tab 4",value:4,right:!0}]};const o=()=>{const i=[{label:"Strawberries",value:"strawberries"},{label:"Bananas",value:"bananas"},{label:"Apples",value:"apples",disabled:!0},{label:"Pomegranates",value:"pomegranates"}],[p,D]=I.useState(i[0]);return e.jsxs(e.Fragment,{children:[e.jsx(b,{name:"example",value:p,options:i,onChange:c=>{const{value:H,label:z}=(c==null?void 0:c.target)??{};D({value:H,label:z})}}),e.jsxs("span",{children:["Eating ",p.value,"..."]})]})},n=s.bind({});n.args={options:[{label:"Title Case Label",value:0},{label:"Mixed case label",value:1},{label:"lower case label",value:2}]};o.__docgenInfo={description:"",methods:[],displayName:"Managed"};var u,m,g;d.parameters={...d.parameters,docs:{...(u=d.parameters)==null?void 0:u.docs,source:{originalSource:"args => <Tabs {...args} />",...(g=(m=d.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var T,v,h;r.parameters={...r.parameters,docs:{...(T=r.parameters)==null?void 0:T.docs,source:{originalSource:"args => <Tabs {...args} />",...(h=(v=r.parameters)==null?void 0:v.docs)==null?void 0:h.source}}};var x,j,S;l.parameters={...l.parameters,docs:{...(x=l.parameters)==null?void 0:x.docs,source:{originalSource:"args => <Tabs {...args} />",...(S=(j=l.parameters)==null?void 0:j.docs)==null?void 0:S.source}}};var C,f,w;a.parameters={...a.parameters,docs:{...(C=a.parameters)==null?void 0:C.docs,source:{originalSource:"args => <Tabs {...args} />",...(w=(f=a.parameters)==null?void 0:f.docs)==null?void 0:w.source}}};var M,y,E;t.parameters={...t.parameters,docs:{...(M=t.parameters)==null?void 0:M.docs,source:{originalSource:"args => <Tabs {...args} />",...(E=(y=t.parameters)==null?void 0:y.docs)==null?void 0:E.source}}};var _,A,N;o.parameters={...o.parameters,docs:{...(_=o.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
-  const options = [{
-    label: 'Strawberries',
-    value: 'strawberries'
-  }, {
-    label: 'Bananas',
-    value: 'bananas'
-  }, {
-    label: 'Apples',
-    value: 'apples',
-    disabled: true
-  }, {
-    label: 'Pomegranates',
-    value: 'pomegranates'
-  }];
-  const [selectedTab, setSelectedTab] = useState(options[0]);
-  return <>
-      <Tabs name="example" value={selectedTab} options={options} onChange={evt => {
-      const {
-        value,
-        label
-      } = ((evt?.target ?? {}) as any);
-      setSelectedTab({
-        value,
-        label
-      });
-    }} />
-      <span>Eating {selectedTab.value}...</span>
-    </>;
-}`,...(N=(A=o.parameters)==null?void 0:A.docs)==null?void 0:N.source}}};var P,W,B;n.parameters={...n.parameters,docs:{...(P=n.parameters)==null?void 0:P.docs,source:{originalSource:"args => <Tabs {...args} />",...(B=(W=n.parameters)==null?void 0:W.docs)==null?void 0:B.source}}};const U=["Default","WithChildren","NoMargin","HorizontalPadding","Alignment","Managed","TestTitleCase"];export{t as Alignment,d as Default,a as HorizontalPadding,o as Managed,l as NoMargin,n as TestTitleCase,r as WithChildren,U as __namedExportsOrder,Q as default};