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

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

@@ -0,0 +1,498 @@
+import{j as s}from"./jsx-runtime-eps93zm2.js";import{r as _}from"./index-DhsZuJvc.js";import{S as F}from"./select-Cwks-WA0.js";import{S as Sn}from"./spacer-BWoNR27H.js";import{o as Vn,a as Cn,b as bn,c as xn,d as yn,e as fn,f as jn,g as Wn,h as On,i as En}from"./select.stories-data-DxgWKlU6.js";import"./lodash-c4VUpsOs.js";import"./index-Bk2sglWO.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./enum-Bnn40S8Q.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-Bax0KeqM.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./badge-CLQ59MDF.js";import"./select.input-CJed_LLR.js";import"./helpers-JJxzGegQ.js";const na={title:"Forms/Select",component:F,args:{options:Vn,native:!1,multi:!1,disabled:!1,autoLayerWidth:!1,clearable:!1,searchable:!0,right:!1}},e=t=>{const{multi:o,value:P}=t,[M,H]=_.useState(P||(o?[]:void 0)),I=n=>{const{value:a}=n.target;H(o?a:{value:a})};return s.jsx(F,{value:M,onChange:I,...t})},k=e.bind({}),u=e.bind({});u.args={small:!0};const c=e.bind({});c.args={width:"auto"};const i=e.bind({});i.args={width:"200px"};const d=e.bind({});d.args={native:!0};const g=e.bind({});g.args={multi:!0,clearable:!0};const p=e.bind({});p.args={options:[]};const m=e.bind({});m.args={clearable:!0};const v=e.bind({});v.args={value:{label:"Vampires",value:"blood"}};const h=e.bind({});h.args={placeholder:"Select the best animal..."};const S=e.bind({});S.args={options:Cn};const V=e.bind({});V.args={options:bn};const C=e.bind({});C.args={options:xn};const b=e.bind({});b.args={options:yn};const x=e.bind({});x.args={options:fn};const y=e.bind({});y.args={searchable:!1};const f=e.bind({});f.args={right:!0};const l=e.bind({});l.parameters={docs:{description:{story:"Avoid autoLayerWidth for very long lists in custom selects (slow)"}}};l.args={width:"70px",autoLayerWidth:!0};const j=e.bind({});j.args={tooltip:"Some info"};const W=e.bind({});W.args={error:"Some info"};const O=e.bind({});O.args={warning:"Some info"};const E=e.bind({});E.args={disabled:!0};const w=e.bind({});w.args={options:jn,placeholder:void 0};const A=e.bind({});A.args={options:Wn};const L=e.bind({});L.args={options:On};const r=e.bind({});r.parameters={docs:{description:{story:"Avoid `width: auto` and autoLayerWidth for very long lists in custom selects (slow). Consider checkNonExistentValues={false}."}}};r.args={options:En};const N=e.bind({});N.args={deprecatedEventHandler:!0};const D=()=>{const[t,o]=_.useState([{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{label:"Possums",value:"slugs"}]),[P,M]=_.useState(void 0),[H,I]=_.useState([]);return s.jsxs(s.Fragment,{children:[s.jsx(F,{name:"example",options:t,onChange:n=>M({value:n.target.value}),onCreate:n=>{const a={label:n,value:n};o([...t,a]),M(a)},value:P,clearable:!0}),s.jsx(Sn,{}),s.jsx(F,{name:"example",options:t,onChange:n=>I(n.target.value),onCreate:n=>{const a={label:n,value:n};o([...t,a]),console.log(n),I([...H,a])},value:H,multi:!0,clearable:!0})]})};D.__docgenInfo={description:"",methods:[],displayName:"OnCreate"};var B,R,T;k.parameters={...k.parameters,docs:{...(B=k.parameters)==null?void 0:B.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} />;
+}`,...(T=(R=k.parameters)==null?void 0:R.docs)==null?void 0:T.source}}};var K,q,z;u.parameters={...u.parameters,docs:{...(K=u.parameters)==null?void 0:K.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} />;
+}`,...(z=(q=u.parameters)==null?void 0:q.docs)==null?void 0:z.source}}};var G,J,Q;c.parameters={...c.parameters,docs:{...(G=c.parameters)==null?void 0:G.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} />;
+}`,...(Q=(J=c.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var U,X,Y;i.parameters={...i.parameters,docs:{...(U=i.parameters)==null?void 0:U.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} />;
+}`,...(Y=(X=i.parameters)==null?void 0:X.docs)==null?void 0:Y.source}}};var Z,$,ee;d.parameters={...d.parameters,docs:{...(Z=d.parameters)==null?void 0:Z.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=($=d.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var ne,ae,te;g.parameters={...g.parameters,docs:{...(ne=g.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} />;
+}`,...(te=(ae=g.parameters)==null?void 0:ae.docs)==null?void 0:te.source}}};var se,le,re;p.parameters={...p.parameters,docs:{...(se=p.parameters)==null?void 0:se.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} />;
+}`,...(re=(le=p.parameters)==null?void 0:le.docs)==null?void 0:re.source}}};var oe,ue,ce;m.parameters={...m.parameters,docs:{...(oe=m.parameters)==null?void 0:oe.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} />;
+}`,...(ce=(ue=m.parameters)==null?void 0:ue.docs)==null?void 0:ce.source}}};var ie,de,ge;v.parameters={...v.parameters,docs:{...(ie=v.parameters)==null?void 0:ie.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} />;
+}`,...(ge=(de=v.parameters)==null?void 0:de.docs)==null?void 0:ge.source}}};var pe,me,ve;h.parameters={...h.parameters,docs:{...(pe=h.parameters)==null?void 0:pe.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=(me=h.parameters)==null?void 0:me.docs)==null?void 0:ve.source}}};var he,Se,Ve;S.parameters={...S.parameters,docs:{...(he=S.parameters)==null?void 0:he.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=(Se=S.parameters)==null?void 0:Se.docs)==null?void 0:Ve.source}}};var Ce,be,xe;V.parameters={...V.parameters,docs:{...(Ce=V.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} />;
+}`,...(xe=(be=V.parameters)==null?void 0:be.docs)==null?void 0:xe.source}}};var ye,fe,je;C.parameters={...C.parameters,docs:{...(ye=C.parameters)==null?void 0:ye.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=(fe=C.parameters)==null?void 0:fe.docs)==null?void 0:je.source}}};var We,Oe,Ee;b.parameters={...b.parameters,docs:{...(We=b.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} />;
+}`,...(Ee=(Oe=b.parameters)==null?void 0:Oe.docs)==null?void 0:Ee.source}}};var we,Ae,Le;x.parameters={...x.parameters,docs:{...(we=x.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} />;
+}`,...(Le=(Ae=x.parameters)==null?void 0:Ae.docs)==null?void 0:Le.source}}};var Ne,De,Me;y.parameters={...y.parameters,docs:{...(Ne=y.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} />;
+}`,...(Me=(De=y.parameters)==null?void 0:De.docs)==null?void 0:Me.source}}};var He,Ie,ke;f.parameters={...f.parameters,docs:{...(He=f.parameters)==null?void 0:He.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=(Ie=f.parameters)==null?void 0:Ie.docs)==null?void 0:ke.source}}};var _e,Fe,Pe;l.parameters={...l.parameters,docs:{...(_e=l.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} />;
+}`,...(Pe=(Fe=l.parameters)==null?void 0:Fe.docs)==null?void 0:Pe.source}}};var Be,Re,Te;j.parameters={...j.parameters,docs:{...(Be=j.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} />;
+}`,...(Te=(Re=j.parameters)==null?void 0:Re.docs)==null?void 0:Te.source}}};var Ke,qe,ze;W.parameters={...W.parameters,docs:{...(Ke=W.parameters)==null?void 0:Ke.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=(qe=W.parameters)==null?void 0:qe.docs)==null?void 0:ze.source}}};var Ge,Je,Qe;O.parameters={...O.parameters,docs:{...(Ge=O.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} />;
+}`,...(Qe=(Je=O.parameters)==null?void 0:Je.docs)==null?void 0:Qe.source}}};var Ue,Xe,Ye;E.parameters={...E.parameters,docs:{...(Ue=E.parameters)==null?void 0:Ue.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=(Xe=E.parameters)==null?void 0:Xe.docs)==null?void 0:Ye.source}}};var Ze,$e,en;w.parameters={...w.parameters,docs:{...(Ze=w.parameters)==null?void 0:Ze.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} />;
+}`,...(en=($e=w.parameters)==null?void 0:$e.docs)==null?void 0:en.source}}};var nn,an,tn;A.parameters={...A.parameters,docs:{...(nn=A.parameters)==null?void 0:nn.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} />;
+}`,...(tn=(an=A.parameters)==null?void 0:an.docs)==null?void 0:tn.source}}};var sn,ln,rn;L.parameters={...L.parameters,docs:{...(sn=L.parameters)==null?void 0:sn.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} />;
+}`,...(rn=(ln=L.parameters)==null?void 0:ln.docs)==null?void 0:rn.source}}};var on,un,cn;r.parameters={...r.parameters,docs:{...(on=r.parameters)==null?void 0:on.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} />;
+}`,...(cn=(un=r.parameters)==null?void 0:un.docs)==null?void 0:cn.source}}};var dn,gn,pn;N.parameters={...N.parameters,docs:{...(dn=N.parameters)==null?void 0:dn.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} />;
+}`,...(pn=(gn=N.parameters)==null?void 0:gn.docs)==null?void 0:pn.source}}};var mn,vn,hn;D.parameters={...D.parameters,docs:{...(mn=D.parameters)==null?void 0:mn.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 />
+    </>;
+}`,...(hn=(vn=D.parameters)==null?void 0:vn.docs)==null?void 0:hn.source}}};const aa=["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","OnCreate"];export{l as AutoLayerWidth,c as AutoWidth,A as BooleanOptions,m as Clearable,h as CustomPlaceholder,k as Default,N as DeprecatedEventHandler,E as Disabled,p as Empty,W as Error,i as FixedWidth,g as Multiselect,d as Native,v as NonExistentValue,y as NotSearchable,w as NumericOptions,D as OnCreate,b as OptionsWithActions,V as OptionsWithDetails,x as OptionsWithEverything,S as OptionsWithHeadings,C as OptionsWithIcons,f as RightAligned,L as SimpleOptions,u as Small,j as Tooltip,r as VeryLongList,O as Warning,aa as __namedExportsOrder,na as default};

package/dist/storybook/assets/select.stories-data-DxgWKlU6.js

@@ -0,0 +1 @@
+import{j as s}from"./jsx-runtime-eps93zm2.js";import{I as l}from"./common-types-Sih75Sav.js";import{I as e}from"./icon-BSFY3vDO.js";const b=[{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Koalas",value:"leaves"},{label:"Monkeys",value:"bananas",disabled:!0},{label:"Wombats",value:"bark"}],u=[{label:"Kangaroos",value:"grass",details:"(grass)"},{label:"Monkeys",value:"bananas",details:"(bananas)"},{label:"Possums",value:"slugs",details:"(slugs)"}],c=[{type:"Heading",label:"Large"},{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{type:"Heading",label:"Small"},{label:"Possums",value:"slugs"}],v=[{label:1,value:1},{label:2,value:2},{label:3,value:3},{label:4,value:4}],g=[{label:"Yes",value:!0},{label:"No",value:!1}],m=[{label:"Aardvarks",value:"termites"},{label:"Monkeys",value:"bananas"},{label:"Vampires",value:"blood",icon:s.jsx(e,{icon:l.WARNING,color:"var(--color-text-warning)"})},{label:"Zombies",value:"brains",icon:s.jsx(e,{icon:l.ERROR,color:"var(--color-text-error)"})}],a=[{label:"Delete",icon:"delete",onClick:()=>{}},{label:"Rename",icon:"rename",onClick:()=>{}}],d=[{label:"Kangaroos",value:"grass",actions:a},{label:"Monkeys",value:"bananas",actions:a},{label:"Possums",value:"slugs",actions:a,details:"(some details)"}],p=[{label:"Kangaroos",value:"grass",actions:a,icon:s.jsx(e,{icon:l.WARNING,color:"var(--color-text-warning)"}),details:"(grass)"},{label:"Monkeys",value:"bananas",actions:a,icon:s.jsx(e,{icon:l.WARNING,color:"var(--color-text-warning)"}),details:"(bananas)"},{label:"Possums",value:"slugs",actions:a,icon:s.jsx(e,{icon:l.WARNING,color:"var(--color-text-warning)"}),details:"(slugs)"}],k=[...Array(1e4).keys()].map((n,o)=>({label:Math.random().toString(36).substring(7),value:o})),x=["Aardvarks","Kangaroos","Monkeys","Possums"];export{c as a,u as b,m as c,d,p as e,v as f,g,x as h,k as i,b as o};

package/dist/storybook/assets/select.test-case.stories-B6On-PjA.js

@@ -0,0 +1,82 @@
+import{j as _}from"./jsx-runtime-eps93zm2.js";import{r as I}from"./index-DhsZuJvc.js";import{w as r,e as s,u as l}from"./index-DMAnyMX5.js";import{S as T}from"./select-Cwks-WA0.js";import{o as O}from"./select.stories-data-DxgWKlU6.js";import"./index-CF7H4eMJ.js";import"./lodash-c4VUpsOs.js";import"./index-Bk2sglWO.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./enum-Bnn40S8Q.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-Bax0KeqM.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./badge-CLQ59MDF.js";import"./select.input-CJed_LLR.js";import"./helpers-JJxzGegQ.js";const ue={title:"Forms/Select/Test Cases",component:T,args:{options:O},tags:["!autodocs"]},v=n=>{const{multi:o,value:e}=n,[a,t]=I.useState(e||(o?[]:void 0)),i=c=>{const{value:g}=c.target;t(o?g:{value:g})};return _.jsx(T,{value:a,onChange:i,...n})},y=v.bind({});y.args={value:{label:"Vampires",value:"blood"},disabled:!0};const d=v.bind({});d.args={testId:"testId",clearable:!0};d.play=async({canvasElement:n,step:o})=>{const e=n.parentElement?r(n.parentElement):null;await s(e).toBeTruthy(),e&&(await o("Select item with click",async()=>{const a=e.getByTestId("testId");await l.click(a);const t=e.getByTestId("testId-layer");await s(t).toBeInTheDocument();const i=r(t).getByText("Wombats");await l.click(i);const c=e.getByTestId("testId-value");await s(r(c).getByText("Wombats")).toBeInTheDocument()}),await o("Clear selected value",async()=>{const a=e.getByTestId("testId-clear");await l.click(a);const t=e.queryByTestId("testId-value");await s(t).not.toBeInTheDocument()}))};const m=v.bind({});m.args={testId:"testId",clearable:!0,multi:!0};m.play=async({canvasElement:n,step:o})=>{const e=n.parentElement?r(n.parentElement):null;await s(e).toBeTruthy(),e&&(await o("Select items with click",async()=>{const a=e.getByTestId("testId");await l.click(a);const t=e.getByTestId("testId-layer");await s(t).toBeInTheDocument();const i=r(t).getByText("Wombats");await l.click(i);const c=r(t).getByText("Kangaroos");await l.click(c),await l.click(n),await s(t).not.toBeInTheDocument();const g=e.getByTestId("testId-value");await s(r(g).getByText("Wombats")).toBeInTheDocument(),await s(r(g).getByText("Kangaroos")).toBeInTheDocument()}),await o("Deselect item with click",async()=>{const a=e.getByTestId("testId");await l.click(a);const t=e.getByTestId("testId-layer");await s(t).toBeInTheDocument();const i=r(t).getByText("Wombats");await l.click(i),await l.click(n),await s(t).not.toBeInTheDocument();const c=e.getByTestId("testId-value");await s(r(c).queryByText("Wombats")).not.toBeInTheDocument()}),await o("Clear selected values",async()=>{const a=e.getByTestId("testId-clear");await l.click(a);const t=e.queryByTestId("testId-value");await s(t).not.toBeInTheDocument()}))};const p=v.bind({});p.args={testId:"testId",disabled:!0};p.play=async({canvasElement:n,step:o})=>{const e=r(n);await o("Clicking disabled trigger should not show layer",async()=>{await e.getByTestId("testId").click();const t=e.queryByTestId("testId-layer");await s(t).toBeNull()})};const u=()=>{const[n,o]=I.useState(O),[e,a]=I.useState(void 0);return _.jsx(T,{testId:"testId",name:"example",options:n,onChange:t=>a({value:t.target.value}),onCreate:t=>{const i={label:t,value:t};o([...n,i]),a(i)},value:e})};u.args={testId:"testId"};u.play=async({canvasElement:n,step:o})=>{const e=n.parentElement?r(n.parentElement):null;await s(e).toBeTruthy(),e&&await o("Create new item",async()=>{const a=e.getByTestId("testId-input");if(s(a).toBeInTheDocument(),!a)return;await l.type(a,"New value");const t=e.getByText('Create "New value"');await l.click(t);const i=e.getByTestId("testId-value");await s(r(i).getByText("New value")).toBeInTheDocument()})};u.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestCreate"};var w,h,B;y.parameters={...y.parameters,docs:{...(w=y.parameters)==null?void 0:w.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} />;
+}`,...(B=(h=y.parameters)==null?void 0:h.docs)==null?void 0:B.source}}};var S,V,x;d.parameters={...d.parameters,docs:{...(S=d.parameters)==null?void 0:S.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=(V=d.parameters)==null?void 0:V.docs)==null?void 0:x.source}}};var b,C,f;m.parameters={...m.parameters,docs:{...(b=m.parameters)==null?void 0:b.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} />;
+}`,...(f=(C=m.parameters)==null?void 0:C.docs)==null?void 0:f.source}}};var D,k,j;p.parameters={...p.parameters,docs:{...(D=p.parameters)==null?void 0:D.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} />;
+}`,...(j=(k=p.parameters)==null?void 0:k.docs)==null?void 0:j.source}}};var E,N,W;u.parameters={...u.parameters,docs:{...(E=u.parameters)==null?void 0:E.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} />;
+}`,...(W=(N=u.parameters)==null?void 0:N.docs)==null?void 0:W.source}}};const de=["TestDisabledNonExistentValue","Test","TestMulti","TestDisabled","TestCreate"];export{d as Test,u as TestCreate,p as TestDisabled,y as TestDisabledNonExistentValue,m as TestMulti,de as __namedExportsOrder,ue as default};

package/dist/storybook/assets/side-bar-fBbBqyAT.css

@@ -0,0 +1 @@
+._inputInTable_1oy1z_1{background-color:transparent;border-radius:inherit!important;height:var(--size);min-height:100%}._inputInTable_1oy1z_1:not(:hover):not([data-error]):not([data-warning]){border-color:transparent}._inputInTable_1oy1z_1:not(:focus){box-shadow:none}._inputHover_1oy1z_13{position:relative;border-color:var(--color-border-hover);z-index:2}._inputFocus_1oy1z_18{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputError_1oy1z_25,._inputWarning_1oy1z_26{position:relative}._inputError_1oy1z_25{z-index:2;border-color:var(--color-border-error);color:var(--color-text-error)!important;background-color:var(--color-background-error-muted)}._inputError_1oy1z_25:hover{border-color:var(--color-border-error-hover)!important}._inputError_1oy1z_25:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputWarning_1oy1z_26{z-index:1;border-color:var(--color-border-warning);color:var(--color-text-warning)!important;background-color:var(--color-background-warning-muted)}._inputWarning_1oy1z_26:hover{border-color:var(--color-border-warning-hover)!important}._inputWarning_1oy1z_26:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputDisabled_1oy1z_61{pointer-events:none;background-color:var(--color-background-disabled);color:var(--color-text-muted);box-shadow:none}._hideScrollbars_1oy1z_67{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbars_1oy1z_67::-webkit-scrollbar{display:none}:root{--size-sidebar: var(--size-xl);--size-sidebar-icon: var(--size);--color-background-sidebar: black}._sidebar_1oy1z_82{background-color:var(--color-background-sidebar);color:#fff;position:relative;padding:var(--padding) 0}@media print{._sidebar_1oy1z_82{display:none}}._inner_1oy1z_93{scrollbar-width:none;-ms-overflow-style:none}._inner_1oy1z_93::-webkit-scrollbar{display:none}._title_1oy1z_103,._subtitle_1oy1z_104,._label_1oy1z_105{transition:opacity .2s,max-height .2s,margin .2s,color .2s;max-height:50px}._collapsed_1oy1z_109 ._title_1oy1z_103,._collapsed_1oy1z_109 ._subtitle_1oy1z_104,._collapsed_1oy1z_109 ._label_1oy1z_105{opacity:0;max-height:0;margin-bottom:0;margin-top:0}._title_1oy1z_103{overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;margin-top:0;font-size:var(--font-size-xl);padding:0 var(--padding)}._subtitle_1oy1z_104{margin-bottom:var(--padding-xs);white-space:nowrap;font-size:var(--font-size);letter-spacing:var(--letter-spacing-wide);color:var(--color-neutral-700);padding:0 var(--padding)}._list_1oy1z_134{margin-bottom:var(--padding-xl);margin-top:0;position:relative;z-index:1}._item_1oy1z_140{transition:padding .2s,color .2s;font-size:var(--font-size-lg);font-weight:400;display:flex;padding:0 var(--padding-xxs);align-items:center;color:var(--color-neutral-500)}._collapsed_1oy1z_109 ._item_1oy1z_140{padding:0}._item_1oy1z_140:hover{color:var(--color-neutral-200)}._item_1oy1z_140._experimental_1oy1z_155{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.1) 8px,rgba(255,255,255,.1) 16px,transparent 16px,transparent 24px)}._item_1oy1z_140:active,._item_1oy1z_140._active_1oy1z_159{color:var(--color-neutral-0);background-color:var(--color-primary-700)}._icon_1oy1z_163{line-height:0;flex-shrink:0;display:flex;width:var(--size-sidebar);justify-content:center;font-size:var(--size-sidebar-icon);padding:var(--padding-xxs) 0}._icon_1oy1z_163 svg{stroke-width:1}._label_1oy1z_105{white-space:nowrap;overflow:hidden}

package/dist/storybook/assets/side-bar-wpFQ5NEE.js

@@ -0,0 +1,24 @@
+import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as u,R as b}from"./index-DhsZuJvc.js";import{c as d}from"./index-Bk2sglWO.js";import{i as v}from"./index-BI4_Bp97.js";import{B as M,I as h}from"./common-types-Sih75Sav.js";import{D as T}from"./drawer-DaQ1xGjV.js";import{T as f}from"./tooltip-1V7clEnw.js";import{I as x}from"./icon-BSFY3vDO.js";import{B as I}from"./badge-CLQ59MDF.js";import{B as R}from"./button-Cbv7WK6k.js";const j="_inputInTable_1oy1z_1",z="_inputHover_1oy1z_13",L="_inputFocus_1oy1z_18",A="_inputError_1oy1z_25",H="_inputWarning_1oy1z_26",w="_inputDisabled_1oy1z_61",N="_hideScrollbars_1oy1z_67",q="_sidebar_1oy1z_82",C="_inner_1oy1z_93",S="_title_1oy1z_103",k="_subtitle_1oy1z_104",B="_label_1oy1z_105",O="_collapsed_1oy1z_109",F="_list_1oy1z_134",D="_item_1oy1z_140",W="_experimental_1oy1z_155",P="_active_1oy1z_159",V="_icon_1oy1z_163",a={inputInTable:j,inputHover:z,inputFocus:L,inputError:A,inputWarning:H,inputDisabled:w,hideScrollbars:N,sidebar:q,inner:C,title:S,subtitle:k,label:B,collapsed:O,list:F,item:D,experimental:W,active:P,icon:V},$=u.memo(({isOpen:n,label:t,icon:l,invalid:o})=>e.jsxs(e.Fragment,{children:[e.jsx(f,{text:t,enabled:!n,placement:"right-center",possiblePlacements:["right-center"],fontSize:16,padding:"var(--padding-sm)",display:"block",children:e.jsx("span",{className:a.icon,children:e.jsx(I,{small:!0,title:o?"!":void 0,margin:4,children:e.jsx(x,{icon:l})})})}),e.jsx("span",{className:a.label,children:t})]}),(n,t)=>v(n,t)),y=({isOpen:n,items:t,sectionIndex:l,onClick:o,testId:i})=>e.jsx("div",{className:a.list,children:t.map((s,m)=>{const c=`${l}_${m}`;return e.jsx("a",{href:s.value,className:d(a.item,s.isActive?a.active:"",s.isExperimental?a.experimental:""),onClick:r=>o(r,s.value,s.label,s.onClick),"data-testid":i,children:e.jsx($,{label:s.label,icon:s.icon,invalid:s.invalid,isOpen:n},c)},c)})});y.__docgenInfo={description:"",methods:[],displayName:"Link",props:{isOpen:{required:!0,tsType:{name:"boolean"},description:""},items:{required:!0,tsType:{name:"Array",elements:[{name:"IOptionItem"}],raw:"IOptionItem[]"},description:""},sectionIndex:{required:!0,tsType:{name:"number"},description:""},onClick:{required:!0,tsType:{name:"signature",type:"function",raw:`(
+  evt: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+  value: string,
+  label: string | ReactNode,
+  onClickCallback?: (
+    evt: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+  ) => void,
+) => void`,signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLAnchorElement, MouseEvent>",elements:[{name:"HTMLAnchorElement"},{name:"MouseEvent"}]},name:"evt"},{type:{name:"string"},name:"value"},{type:{name:"union",raw:"string | ReactNode",elements:[{name:"string"},{name:"ReactNode"}]},name:"label"},{type:{name:"signature",type:"function",raw:`(
+  evt: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+) => void`,signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLAnchorElement, MouseEvent>",elements:[{name:"HTMLAnchorElement"},{name:"MouseEvent"}]},name:"evt"}],return:{name:"void"}}},name:"onClickCallback"}],return:{name:"void"}}},description:""},testId:{required:!1,tsType:{name:"string"},description:""}}};const _=({isOpen:n,sections:t,onClick:l})=>e.jsx(e.Fragment,{children:t.map((o,i)=>e.jsxs(b.Fragment,{children:[e.jsx("h5",{className:a.subtitle,children:o.heading.toUpperCase()}),e.jsx(y,{isOpen:n,items:o.items,sectionIndex:i,onClick:l,testId:o.testId})]},i))});_.__docgenInfo={description:"",methods:[],displayName:"Sections",props:{isOpen:{required:!0,tsType:{name:"boolean"},description:""},sections:{required:!0,tsType:{name:"Array",elements:[{name:"ISection"}],raw:"ISection[]"},description:""},onClick:{required:!0,tsType:{name:"signature",type:"function",raw:`(
+  evt: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+  value: string,
+  label: string | ReactNode,
+  onClickCallback?: (
+    evt: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+  ) => void,
+) => void`,signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLAnchorElement, MouseEvent>",elements:[{name:"HTMLAnchorElement"},{name:"MouseEvent"}]},name:"evt"},{type:{name:"string"},name:"value"},{type:{name:"union",raw:"string | ReactNode",elements:[{name:"string"},{name:"ReactNode"}]},name:"label"},{type:{name:"signature",type:"function",raw:`(
+  evt: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+) => void`,signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLAnchorElement, MouseEvent>",elements:[{name:"HTMLAnchorElement"},{name:"MouseEvent"}]},name:"evt"}],return:{name:"void"}}},name:"onClickCallback"}],return:{name:"void"}}},description:""}}};const K=u.memo(({options:n,startOpen:t=!1,onShiftClickToggleOpen:l=()=>{},top:o})=>{const[i,s]=u.useState(t),m=(r,E,g,p)=>{r.preventDefault(),typeof p=="function"&&(r.currentTarget.value=E,r.currentTarget.label=g,p(r)),s(!1)},c=n.sections.length>0;return e.jsx(T,{fixed:!0,open:i,top:o,background:"var(--color-background-sidebar)",closedWidth:"var(--size-sidebar)",buttonPosition:M.BOTTOM,buttonAnimate:!0,button:c&&e.jsx(R,{onClick:r=>{r.shiftKey&&l&&l(r),s(!i)},colored:!0,round:!0,icon:h.LEFT}),children:e.jsx("div",{className:d(a.sidebar,i?"":a.collapsed),children:c&&e.jsxs("div",{className:a.inner,children:[e.jsx("h4",{className:a.title,children:n.title}),e.jsx(_,{isOpen:i,sections:n.sections,onClick:m})]})})})},(n,t)=>v(n,t));K.__docgenInfo={description:"",methods:[],displayName:"SideBar",props:{options:{required:!0,tsType:{name:"signature",type:"object",raw:`{
+  title: string;
+  sections: IOptionSection[];
+}`,signature:{properties:[{key:"title",value:{name:"string",required:!0}},{key:"sections",value:{name:"Array",elements:[{name:"IOptionSection"}],raw:"IOptionSection[]",required:!0}}]}},description:""},startOpen:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},onShiftClickToggleOpen:{required:!1,tsType:{name:"signature",type:"function",raw:`(
+  evt: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,
+) => void`,signature:{arguments:[{type:{name:"MouseEvent",elements:[{name:"HTMLButtonElement"},{name:"globalThis.MouseEvent"}],raw:"MouseEvent<HTMLButtonElement, globalThis.MouseEvent>"},name:"evt"}],return:{name:"void"}}},description:"",defaultValue:{value:"() => {}",computed:!1}},top:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""}}};export{K as S};

package/dist/storybook/assets/{side-bar.stories-M6FsuCrQ.js → side-bar.stories-LjClxJcG.js}

@@ -1 +1 @@
-import{j as a}from"./jsx-runtime-eps93zm2.js";import{I as t}from"./common-types-Sih75Sav.js";import{S as m}from"./side-bar-CSx5wI-k.js";import{F as g}from"./flex-EllkLxgO.js";import{B as u}from"./badge-CLQ59MDF.js";import{s as S}from"./icon-custom-Xcl4YkWP.js";import"./index-DhsZuJvc.js";import"./index-Bk2sglWO.js";import"./index-BI4_Bp97.js";import"./drawer-DOWJp9T4.js";import"./lodash-c4VUpsOs.js";import"./index-CEuq6vkz.js";import"./index-CUZDtIZe.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./disabled-context-rmpd7YJS.js";import"./button-DHevvVBE.js";import"./spinner-AWUe4xwQ.js";import"./tooltip-1V7clEnw.js";const h=[{heading:"First Heading",items:[{label:"Section A",value:"/path/to/something",onClick:()=>{},icon:S},{label:a.jsxs(g,{alignItems:"center",gap:"var(--padding-xxs)",children:["Section B",a.jsx(u,{small:!0,title:"BETA"})]}),value:"/path/to/something",onClick:()=>{},icon:t.HELP,isActive:!0},{label:"Section C",value:"/path/to/something",onClick:()=>{},icon:t.EDIT},{label:"Experimental Section",value:"/path/to/something",onClick:()=>{},icon:t.LIBRARY,isExperimental:!0}]},{heading:"Second Heading",items:[{label:"Section 1",value:"/path/to/something",onClick:()=>{},icon:t.SETTINGS},{label:"Section 2",value:"/path/to/something",onClick:()=>{},icon:t.STAR},{label:"Invalid Section",value:"/path/to/something",onClick:()=>{},icon:t.NOTIFICATION,invalid:!0}]}],L={title:"Navigation/SideBar",component:m,parameters:{layout:"fullscreen",docs:{story:{inline:!1,iframeHeight:400}}},args:{options:{title:"Title",sections:h},startOpen:!1},argTypes:{top:{control:{type:"text"}},startOpen:{control:{type:"boolean"}}}},c=d=>a.jsx(m,{...d}),o=c.bind({}),e=c.bind({});e.args={startOpen:!0};var i,r,s;o.parameters={...o.parameters,docs:{...(i=o.parameters)==null?void 0:i.docs,source:{originalSource:"args => <SideBar {...args} />",...(s=(r=o.parameters)==null?void 0:r.docs)==null?void 0:s.source}}};var n,l,p;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:"args => <SideBar {...args} />",...(p=(l=e.parameters)==null?void 0:l.docs)==null?void 0:p.source}}};const G=["Default","StartOpen"];export{o as Default,e as StartOpen,G as __namedExportsOrder,L as default};
+import{j as a}from"./jsx-runtime-eps93zm2.js";import{I as t}from"./common-types-Sih75Sav.js";import{S as m}from"./side-bar-wpFQ5NEE.js";import{F as g}from"./flex-EllkLxgO.js";import{B as u}from"./badge-CLQ59MDF.js";import{s as S}from"./icon-custom-Xcl4YkWP.js";import"./index-DhsZuJvc.js";import"./index-Bk2sglWO.js";import"./index-BI4_Bp97.js";import"./drawer-DaQ1xGjV.js";import"./lodash-c4VUpsOs.js";import"./index-CEuq6vkz.js";import"./index-CUZDtIZe.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./disabled-context-rmpd7YJS.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.js";import"./tooltip-1V7clEnw.js";const h=[{heading:"First Heading",items:[{label:"Section A",value:"/path/to/something",onClick:()=>{},icon:S},{label:a.jsxs(g,{alignItems:"center",gap:"var(--padding-xxs)",children:["Section B",a.jsx(u,{small:!0,title:"BETA"})]}),value:"/path/to/something",onClick:()=>{},icon:t.HELP,isActive:!0},{label:"Section C",value:"/path/to/something",onClick:()=>{},icon:t.EDIT},{label:"Experimental Section",value:"/path/to/something",onClick:()=>{},icon:t.LIBRARY,isExperimental:!0}]},{heading:"Second Heading",items:[{label:"Section 1",value:"/path/to/something",onClick:()=>{},icon:t.SETTINGS},{label:"Section 2",value:"/path/to/something",onClick:()=>{},icon:t.STAR},{label:"Invalid Section",value:"/path/to/something",onClick:()=>{},icon:t.NOTIFICATION,invalid:!0}]}],L={title:"Navigation/SideBar",component:m,parameters:{layout:"fullscreen",docs:{story:{inline:!1,iframeHeight:400}}},args:{options:{title:"Title",sections:h},startOpen:!1},argTypes:{top:{control:{type:"text"}},startOpen:{control:{type:"boolean"}}}},c=d=>a.jsx(m,{...d}),o=c.bind({}),e=c.bind({});e.args={startOpen:!0};var i,r,s;o.parameters={...o.parameters,docs:{...(i=o.parameters)==null?void 0:i.docs,source:{originalSource:"args => <SideBar {...args} />",...(s=(r=o.parameters)==null?void 0:r.docs)==null?void 0:s.source}}};var n,l,p;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:"args => <SideBar {...args} />",...(p=(l=e.parameters)==null?void 0:l.docs)==null?void 0:p.source}}};const G=["Default","StartOpen"];export{o as Default,e as StartOpen,G as __namedExportsOrder,L as default};