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

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

@@ -0,0 +1,914 @@
+import{j as n}from"./jsx-runtime-eps93zm2.js";import{r as P}from"./index-DhsZuJvc.js";import{S as d}from"./select-78sreKsp.js";import{S as p}from"./spacer-BWoNR27H.js";import{I as D}from"./common-types-Sih75Sav.js";import{I as L}from"./icon-BP4BO6-k.js";import{T as hn}from"./text-B3-TSWok.js";import"./index-Bk2sglWO.js";import"./disabled-context-rmpd7YJS.js";import"./types-UmZ4Y_CR.js";import"./lodash-BHd_uQHh.js";import"./tooltip-C_E_6ym5.js";import"./index-CUZDtIZe.js";import"./index-CEuq6vkz.js";import"./extends-CF3RwP-h.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-DR8r8Ogv.js";import"./memoize-one.esm-CcMeOnPo.js";import"./types-BmbYqTX_.js";import"./actions-Cu_0szZ4.js";import"./button-_0DiND6h.js";import"./spinner-AWUe4xwQ.js";import"./badge-CLQ59MDF.js";import"./select.input-DIKP56UZ.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";const gn=[{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Koalas",value:"leaves"},{label:"Monkeys",value:"bananas",disabled:!0},{label:"Wombats",value:"bark"}],vn=[{label:"Kangaroos",value:"grass",details:"(grass)"},{label:"Monkeys",value:"bananas",details:"(bananas)"},{label:"Possums",value:"slugs",details:"(slugs)"}],mn=[{type:"Heading",label:"Large"},{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{type:"Heading",label:"Small"},{label:"Possums",value:"slugs"}],Sn=[{label:1,value:1},{label:2,value:2},{label:3,value:3},{label:4,value:4}],xn=[{label:"Yes",value:!0},{label:"No",value:!1}],Cn=[{label:"Aardvarks",value:"termites"},{label:"Monkeys",value:"bananas"},{label:"Vampires",value:"blood",icon:n.jsx(L,{icon:D.WARNING,color:"var(--color-text-warning)"})},{label:"Zombies",value:"brains",icon:n.jsx(L,{icon:D.ERROR,color:"var(--color-text-error)"})}],u=[{label:"Delete",icon:"delete",onClick:()=>{}},{label:"Rename",icon:"rename",onClick:()=>{}}],bn=[{label:"Kangaroos",value:"grass",actions:u},{label:"Monkeys",value:"bananas",actions:u},{label:"Possums",value:"slugs",actions:u,details:"(some details)"}],Vn=[{label:"Kangaroos",value:"grass",actions:u,icon:n.jsx(L,{icon:D.WARNING,color:"var(--color-text-warning)"}),details:"(grass)"},{label:"Monkeys",value:"bananas",actions:u,icon:n.jsx(L,{icon:D.WARNING,color:"var(--color-text-warning)"}),details:"(bananas)"},{label:"Possums",value:"slugs",actions:u,icon:n.jsx(L,{icon:D.WARNING,color:"var(--color-text-warning)"}),details:"(slugs)"}],wn=[...Array(1e4).keys()].map((l,s)=>({label:Math.random().toString(36).substring(7),value:s})),jn=["Aardvarks","Kangaroos","Monkeys","Possums"],Jn={title:"Forms/Select",component:d,args:{options:gn,native:!1,multi:!1,disabled:!1,autoLayerWidth:!1,clearable:!1,searchable:!0,right:!1}},e=l=>{const{multi:s,value:H}=l,[r,R]=P.useState(H||(s?[]:void 0)),o=a=>{const{value:t}=a.target;R(s?t:{value:t})};return n.jsxs(n.Fragment,{children:[n.jsx(d,{value:r,onChange:o,placeholder:"Full width",...l}),n.jsx(p,{}),n.jsx(d,{value:r,onChange:o,width:"200px",placeholder:"Fixed width",...l}),n.jsx(p,{}),n.jsx(d,{value:r,onChange:o,width:"auto",placeholder:"Auto width",...l}),n.jsx(p,{}),n.jsx(d,{value:r,onChange:o,width:"auto",placeholder:"Small",small:!0,...l}),n.jsx(p,{}),n.jsx(hn,{small:!0,muted:!0,children:"Avoid auto width for very long lists."})]})},K=e.bind({}),h=e.bind({});h.args={native:!0};const g=e.bind({});g.args={multi:!0,clearable:!0};const v=e.bind({});v.args={options:[]};const m=e.bind({});m.args={clearable:!0};const S=e.bind({});S.args={value:{label:"Vampires",value:"blood"}};const x=e.bind({});x.args={placeholder:"Select the best animal..."};const C=e.bind({});C.args={options:mn};const b=e.bind({});b.args={options:vn};const V=e.bind({});V.args={options:Cn};const w=e.bind({});w.args={options:bn};const j=e.bind({});j.args={options:Vn};const y=e.bind({});y.args={searchable:!1};const f=e.bind({});f.args={right:!0};const i=e.bind({});i.parameters={docs:{description:{story:"Avoid autoLayerWidth for very long lists in custom selects (slow)"}}};i.args={width:"70px",autoLayerWidth:!0};const A=e.bind({});A.args={tooltip:"Some info"};const T=e.bind({});T.args={error:"Some info"};const F=e.bind({});F.args={warning:"Some info"};const W=e.bind({});W.args={disabled:!0};const O=e.bind({});O.args={options:Sn,placeholder:void 0};const N=e.bind({});N.args={options:xn};const k=e.bind({});k.args={options:jn};const c=e.bind({});c.parameters={docs:{description:{story:"Avoid `width: auto` and autoLayerWidth for very long lists in custom selects (slow). Consider checkNonExistentValues={false}."}}};c.args={options:wn};const E=e.bind({});E.args={deprecatedEventHandler:!0};const M=e.bind({});M.args={value:{label:"Vampires",value:"blood"},disabled:!0};const I=()=>{const[l,s]=P.useState([{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{label:"Possums",value:"slugs"}]),[H,r]=P.useState(void 0),[R,o]=P.useState([]);return n.jsxs(n.Fragment,{children:[n.jsx(d,{name:"example",options:l,onChange:a=>r({value:a.target.value}),onCreate:a=>{const t={label:a,value:a};s([...l,t]),r(t)},value:H,clearable:!0}),n.jsx(p,{}),n.jsx(d,{name:"example",options:l,onChange:a=>o(a.target.value),onCreate:a=>{const t={label:a,value:a};s([...l,t]),console.log(a),o([...R,t])},value:R,multi:!0,clearable:!0})]})};I.__docgenInfo={description:"",methods:[],displayName:"OnCreate"};var _,G,B;K.parameters={...K.parameters,docs:{...(_=K.parameters)==null?void 0:_.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(B=(G=K.parameters)==null?void 0:G.docs)==null?void 0:B.source}}};var Y,Z,q;h.parameters={...h.parameters,docs:{...(Y=h.parameters)==null?void 0:Y.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(q=(Z=h.parameters)==null?void 0:Z.docs)==null?void 0:q.source}}};var z,J,Q;g.parameters={...g.parameters,docs:{...(z=g.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(Q=(J=g.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var U,X,$;v.parameters={...v.parameters,docs:{...(U=v.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...($=(X=v.parameters)==null?void 0:X.docs)==null?void 0:$.source}}};var ee,ne,ae;m.parameters={...m.parameters,docs:{...(ee=m.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(ae=(ne=m.parameters)==null?void 0:ne.docs)==null?void 0:ae.source}}};var le,te,se;S.parameters={...S.parameters,docs:{...(le=S.parameters)==null?void 0:le.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(se=(te=S.parameters)==null?void 0:te.docs)==null?void 0:se.source}}};var re,oe,de;x.parameters={...x.parameters,docs:{...(re=x.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(de=(oe=x.parameters)==null?void 0:oe.docs)==null?void 0:de.source}}};var ie,ce,ue;C.parameters={...C.parameters,docs:{...(ie=C.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(ue=(ce=C.parameters)==null?void 0:ce.docs)==null?void 0:ue.source}}};var pe,he,ge;b.parameters={...b.parameters,docs:{...(pe=b.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(ge=(he=b.parameters)==null?void 0:he.docs)==null?void 0:ge.source}}};var ve,me,Se;V.parameters={...V.parameters,docs:{...(ve=V.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(Se=(me=V.parameters)==null?void 0:me.docs)==null?void 0:Se.source}}};var xe,Ce,be;w.parameters={...w.parameters,docs:{...(xe=w.parameters)==null?void 0:xe.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(be=(Ce=w.parameters)==null?void 0:Ce.docs)==null?void 0:be.source}}};var Ve,we,je;j.parameters={...j.parameters,docs:{...(Ve=j.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(je=(we=j.parameters)==null?void 0:we.docs)==null?void 0:je.source}}};var ye,fe,Ae;y.parameters={...y.parameters,docs:{...(ye=y.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(Ae=(fe=y.parameters)==null?void 0:fe.docs)==null?void 0:Ae.source}}};var Te,Fe,We;f.parameters={...f.parameters,docs:{...(Te=f.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(We=(Fe=f.parameters)==null?void 0:Fe.docs)==null?void 0:We.source}}};var Oe,Ne,ke;i.parameters={...i.parameters,docs:{...(Oe=i.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(ke=(Ne=i.parameters)==null?void 0:Ne.docs)==null?void 0:ke.source}}};var Ee,Me,Ie;A.parameters={...A.parameters,docs:{...(Ee=A.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(Ie=(Me=A.parameters)==null?void 0:Me.docs)==null?void 0:Ie.source}}};var De,Le,Re;T.parameters={...T.parameters,docs:{...(De=T.parameters)==null?void 0:De.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(Re=(Le=T.parameters)==null?void 0:Le.docs)==null?void 0:Re.source}}};var Ke,Pe,He;F.parameters={...F.parameters,docs:{...(Ke=F.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(He=(Pe=F.parameters)==null?void 0:Pe.docs)==null?void 0:He.source}}};var _e,Ge,Be;W.parameters={...W.parameters,docs:{...(_e=W.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(Be=(Ge=W.parameters)==null?void 0:Ge.docs)==null?void 0:Be.source}}};var Ye,Ze,qe;O.parameters={...O.parameters,docs:{...(Ye=O.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(qe=(Ze=O.parameters)==null?void 0:Ze.docs)==null?void 0:qe.source}}};var ze,Je,Qe;N.parameters={...N.parameters,docs:{...(ze=N.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(Qe=(Je=N.parameters)==null?void 0:Je.docs)==null?void 0:Qe.source}}};var Ue,Xe,$e;k.parameters={...k.parameters,docs:{...(Ue=k.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...($e=(Xe=k.parameters)==null?void 0:Xe.docs)==null?void 0:$e.source}}};var en,nn,an;c.parameters={...c.parameters,docs:{...(en=c.parameters)==null?void 0:en.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(an=(nn=c.parameters)==null?void 0:nn.docs)==null?void 0:an.source}}};var ln,tn,sn;E.parameters={...E.parameters,docs:{...(ln=E.parameters)==null?void 0:ln.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(sn=(tn=E.parameters)==null?void 0:tn.docs)==null?void 0:sn.source}}};var rn,on,dn;M.parameters={...M.parameters,docs:{...(rn=M.parameters)==null?void 0:rn.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} placeholder="Full width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="200px" placeholder="Fixed width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Auto width"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Select value={selectedValue} onChange={handleChange} width="auto" placeholder="Small" small
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...args} />
+      <Spacer />
+      <Text small muted>
+        Avoid auto width for very long lists.
+      </Text>
+    </>;
+}`,...(dn=(on=M.parameters)==null?void 0:on.docs)==null?void 0:dn.source}}};var cn,un,pn;I.parameters={...I.parameters,docs:{...(cn=I.parameters)==null?void 0:cn.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 />
+    </>;
+}`,...(pn=(un=I.parameters)==null?void 0:un.docs)==null?void 0:pn.source}}};const Qn=["Default","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"];export{i as AutoLayerWidth,N as BooleanOptions,m as Clearable,x as CustomPlaceholder,K as Default,E as DeprecatedEventHandler,W as Disabled,v as Empty,T as Error,g as Multiselect,h as Native,S as NonExistentValue,y as NotSearchable,O as NumericOptions,I as OnCreate,w as OptionsWithActions,b as OptionsWithDetails,j as OptionsWithEverything,C as OptionsWithHeadings,V as OptionsWithIcons,f as RightAligned,k as SimpleOptions,M as TestDisabledNonExistentValue,A as Tooltip,c as VeryLongList,F as Warning,Qn as __namedExportsOrder,Jn as default};