@oliasoft-open-source/react-ui-library 3.12.0-beta-21 → 3.12.0-beta-24

package/dist/assets/select.stories.8ecd1d7e.js

@@ -0,0 +1,841 @@
+import{j as n}from"./jsx-runtime.bc0b5389.js";import{r as ln}from"./index.8c7046c4.js";import{S as r}from"./select.0c940187.js";import{S as E}from"./spacer.17f9f9e6.js";import{I as F}from"./icon.86155bc3.js";import{I as W}from"./common-enum.04de2059.js";import{T as tn}from"./text.3e08313f.js";import"./index.55214191.js";import"./tooltip.47b8435e.js";import"./index.cb615f32.js";import"./types.f0417c6d.js";import"./lodash.96de7017.js";import"./disabled-context.47d44ea4.js";import"./index.73b4811b.js";import"./extends.946277fc.js";import"./assertThisInitialized.962dde02.js";import"./inheritsLoose.5387fada.js";import"./memoize-one.esm.7a54f149.js";import"./actions.310c4239.js";import"./button.4d73be0d.js";import"./spinner.f0fdc45e.js";import"./enum.9003e5cc.js";import"./badge.c60b26e4.js";import"./select.input.395daa83.js";const sn=[{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Koalas",value:"leaves"},{label:"Monkeys",value:"bananas",disabled:!0},{label:"Wombats",value:"bark"}],rn=[{label:"Kangaroos",value:"grass",details:"(grass)"},{label:"Monkeys",value:"bananas",details:"(bananas)"},{label:"Possums",value:"slugs",details:"(slugs)"}],on=[{type:"Heading",label:"Large"},{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"},{type:"Heading",label:"Small"},{label:"Possums",value:"slugs"}],dn=[{label:1,value:1},{label:2,value:2},{label:3,value:3},{label:4,value:4}],cn=[{label:"Yes",value:!0},{label:"No",value:!1}],un=[{label:"Aardvarks",value:"termites"},{label:"Monkeys",value:"bananas"},{label:"Vampires",value:"blood",icon:n.exports.jsx(F,{icon:W.WARNING,color:"var(--color-text-warning)"})},{label:"Zombies",value:"brains",icon:n.exports.jsx(F,{icon:W.ERROR,color:"var(--color-text-error)"})}],s=[{label:"Delete",icon:"delete",onClick:()=>{}},{label:"Rename",icon:"rename",onClick:()=>{}}],pn=[{label:"Kangaroos",value:"grass",actions:s},{label:"Monkeys",value:"bananas",actions:s},{label:"Possums",value:"slugs",actions:s,details:"(some details)"}],hn=[{label:"Kangaroos",value:"grass",actions:s,icon:n.exports.jsx(F,{icon:W.WARNING,color:"var(--color-text-warning)"}),details:"(grass)"},{label:"Monkeys",value:"bananas",actions:s,icon:n.exports.jsx(F,{icon:W.WARNING,color:"var(--color-text-warning)"}),details:"(bananas)"},{label:"Possums",value:"slugs",actions:s,icon:n.exports.jsx(F,{icon:W.WARNING,color:"var(--color-text-warning)"}),details:"(slugs)"}],gn=[...Array(1e4).keys()].map((a,N)=>({label:Math.random().toString(36).substring(7),value:N})),vn=["Aardvarks","Kangaroos","Monkeys","Possums"],Kn={title:"Forms/Select",component:r,args:{options:sn,native:!1,multi:!1,disabled:!1,autoLayerWidth:!1,clearable:!1,searchable:!0,right:!1}},e=a=>{const{multi:N,value:en}=a,[O,nn]=ln.exports.useState(en||(N?[]:void 0)),k=an=>{const{value:I}=an.target;nn(N?I:{value:I})};return n.exports.jsxs(n.exports.Fragment,{children:[n.exports.jsx(r,{value:O,onChange:k,placeholder:"Full width",...a}),n.exports.jsx(E,{}),n.exports.jsx(r,{value:O,onChange:k,width:"200px",placeholder:"Fixed width",...a}),n.exports.jsx(E,{}),n.exports.jsx(r,{value:O,onChange:k,width:"auto",placeholder:"Auto width",...a}),n.exports.jsx(E,{}),n.exports.jsx(r,{value:O,onChange:k,width:"auto",placeholder:"Small",small:!0,...a}),n.exports.jsx(E,{}),n.exports.jsx(tn,{small:!0,muted:!0,children:"Avoid auto width for very long lists."})]})},L=e.bind({}),o=e.bind({});o.args={native:!0};const d=e.bind({});d.args={multi:!0,clearable:!0};const i=e.bind({});i.args={options:[]};const c=e.bind({});c.args={clearable:!0};const u=e.bind({});u.args={value:{label:"Vampires",value:"blood"}};const p=e.bind({});p.args={placeholder:"Select the best animal..."};const h=e.bind({});h.args={options:on};const g=e.bind({});g.args={options:rn};const v=e.bind({});v.args={options:un};const m=e.bind({});m.args={options:pn};const x=e.bind({});x.args={options:hn};const S=e.bind({});S.args={searchable:!1};const C=e.bind({});C.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 b=e.bind({});b.args={tooltip:"Some info"};const w=e.bind({});w.args={error:"Some info"};const V=e.bind({});V.args={warning:"Some info"};const j=e.bind({});j.args={disabled:!0};const y=e.bind({});y.args={options:dn,placeholder:void 0};const f=e.bind({});f.args={options:cn};const A=e.bind({});A.args={options:vn};const t=e.bind({});t.parameters={docs:{description:{story:"Avoid `width: auto` and autoLayerWidth for very long lists in custom selects (slow). Consider checkNonExistentValues={false}."}}};t.args={options:gn};const T=e.bind({});T.args={deprecatedEventHandler:!0};var R,D,M;L.parameters={...L.parameters,docs:{...(R=L.parameters)==null?void 0:R.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>
+    </>;
+}`,...(M=(D=L.parameters)==null?void 0:D.docs)==null?void 0:M.source}}};var H,K,P;o.parameters={...o.parameters,docs:{...(H=o.parameters)==null?void 0:H.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>
+    </>;
+}`,...(P=(K=o.parameters)==null?void 0:K.docs)==null?void 0:P.source}}};var G,B,_;d.parameters={...d.parameters,docs:{...(G=d.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} 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=d.parameters)==null?void 0:B.docs)==null?void 0:_.source}}};var Y,Z,q;i.parameters={...i.parameters,docs:{...(Y=i.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=i.parameters)==null?void 0:Z.docs)==null?void 0:q.source}}};var z,J,Q;c.parameters={...c.parameters,docs:{...(z=c.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=c.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var U,X,$;u.parameters={...u.parameters,docs:{...(U=u.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=u.parameters)==null?void 0:X.docs)==null?void 0:$.source}}};var ee,ne,ae;p.parameters={...p.parameters,docs:{...(ee=p.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=p.parameters)==null?void 0:ne.docs)==null?void 0:ae.source}}};var le,te,se;h.parameters={...h.parameters,docs:{...(le=h.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=h.parameters)==null?void 0:te.docs)==null?void 0:se.source}}};var re,oe,de;g.parameters={...g.parameters,docs:{...(re=g.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=g.parameters)==null?void 0:oe.docs)==null?void 0:de.source}}};var ie,ce,ue;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} 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=v.parameters)==null?void 0:ce.docs)==null?void 0:ue.source}}};var pe,he,ge;m.parameters={...m.parameters,docs:{...(pe=m.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=m.parameters)==null?void 0:he.docs)==null?void 0:ge.source}}};var ve,me,xe;x.parameters={...x.parameters,docs:{...(ve=x.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>
+    </>;
+}`,...(xe=(me=x.parameters)==null?void 0:me.docs)==null?void 0:xe.source}}};var Se,Ce,be;S.parameters={...S.parameters,docs:{...(Se=S.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} 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=S.parameters)==null?void 0:Ce.docs)==null?void 0:be.source}}};var we,Ve,je;C.parameters={...C.parameters,docs:{...(we=C.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} 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=(Ve=C.parameters)==null?void 0:Ve.docs)==null?void 0:je.source}}};var ye,fe,Ae;l.parameters={...l.parameters,docs:{...(ye=l.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=l.parameters)==null?void 0:fe.docs)==null?void 0:Ae.source}}};var Te,Fe,We;b.parameters={...b.parameters,docs:{...(Te=b.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=b.parameters)==null?void 0:Fe.docs)==null?void 0:We.source}}};var Ne,Oe,ke;w.parameters={...w.parameters,docs:{...(Ne=w.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} 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=(Oe=w.parameters)==null?void 0:Oe.docs)==null?void 0:ke.source}}};var Ee,Le,Ie;V.parameters={...V.parameters,docs:{...(Ee=V.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=(Le=V.parameters)==null?void 0:Le.docs)==null?void 0:Ie.source}}};var Re,De,Me;j.parameters={...j.parameters,docs:{...(Re=j.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>
+    </>;
+}`,...(Me=(De=j.parameters)==null?void 0:De.docs)==null?void 0:Me.source}}};var He,Ke,Pe;y.parameters={...y.parameters,docs:{...(He=y.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} 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>
+    </>;
+}`,...(Pe=(Ke=y.parameters)==null?void 0:Ke.docs)==null?void 0:Pe.source}}};var Ge,Be,_e;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} 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=(Be=f.parameters)==null?void 0:Be.docs)==null?void 0:_e.source}}};var Ye,Ze,qe;A.parameters={...A.parameters,docs:{...(Ye=A.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=A.parameters)==null?void 0:Ze.docs)==null?void 0:qe.source}}};var ze,Je,Qe;t.parameters={...t.parameters,docs:{...(ze=t.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=t.parameters)==null?void 0:Je.docs)==null?void 0:Qe.source}}};var Ue,Xe,$e;T.parameters={...T.parameters,docs:{...(Ue=T.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=T.parameters)==null?void 0:Xe.docs)==null?void 0:$e.source}}};const Pn=["Default","Native","Multiselect","Empty","Clearable","NonExistentValue","CustomPlaceholder","OptionsWithHeadings","OptionsWithDetails","OptionsWithIcons","OptionsWithActions","OptionsWithEverything","NotSearchable","RightAligned","AutoLayerWidth","Tooltip","Error","Warning","Disabled","NumericOptions","BooleanOptions","SimpleOptions","VeryLongList","DeprecatedEventHandler"];export{l as AutoLayerWidth,f as BooleanOptions,c as Clearable,p as CustomPlaceholder,L as Default,T as DeprecatedEventHandler,j as Disabled,i as Empty,w as Error,d as Multiselect,o as Native,u as NonExistentValue,S as NotSearchable,y as NumericOptions,m as OptionsWithActions,g as OptionsWithDetails,x as OptionsWithEverything,h as OptionsWithHeadings,v as OptionsWithIcons,C as RightAligned,A as SimpleOptions,b as Tooltip,t as VeryLongList,V as Warning,Pn as __namedExportsOrder,Kn as default};