import{j as e}from"./jsx-runtime-Dfk2JFgj.js";import{r as g}from"./index-CWN_QRa1.js";import{z as p,k as S,C as q}from"./index-DNsi8NHw.js";import{B as W,a as k}from"./index-CIVavKlu.js";import{a as m,b as B}from"./MockData-JoECteJq.js";import"./CheckGroup-BpaEcK_0.js";import"./v4-CtRu48qb.js";import"./DefaultPropsProvider-BPu7lNPC.js";import"./index-6WYjB5r3.js";import"./index-Bk93qgka.js";import"./index-DnVHLn3F.js";import"./index-DllfNvuz.js";import"./index-Cj3pldWQ.js";import"./tiny-invariant-CopsF_GD.js";import"./iframe-BT4Dhm0c.js";import"./index-DgIb9kCw.js";const te={title:"Components/Select",component:p,argTypes:{onSelectAll:{table:{disable:!0}}}},x=t=>{const[s,l]=g.useState([]),n=h=>{l(h)},d=()=>{l(t.options)};return e.jsx(p,{...t,value:s,onSelectAll:d,onChange:n})},o=x.bind({});o.parameters={controls:{exclude:["value","onDeleteIcon","onChange","defaultValue","selectedOptions","customOption","customMenu"]}};o.args={name:"StorySelect",label:"test",textField:"title",valueField:"contactId",placeholder:"placeholder_text",isMulti:!0,isClearable:!1,isSearchable:!1,isDisabled:!1,isLoading:!1,isRtl:!1,showSelection:!0,showPillsOutside:!0,options:m,style:{width:"300px"},hideSelectedOptions:!1};const a=x.bind({});a.parameters={controls:{exclude:["value","onDeleteIcon","onChange","defaultValue","selectedOptions","customOption","customMenu"]}};a.args={name:"StorySelect",textField:"name",valueField:"id",placeholder:"placeholder_text",isMulti:!1,isClearable:!1,isSearchable:!0,isDisabled:!1,isLoading:!1,isRtl:!1,showSelection:!0,showPillsOutside:!0,options:B,style:{width:"300px"}};const _=t=>{const{...s}=t;return e.jsx(q.Option,{...t,children:e.jsxs("div",{style:{paddingLeft:"2%",width:"96%",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between"},children:[e.jsxs("div",{children:[s.data.title," "]}),e.jsx("div",{style:{color:"#727272"},children:s.data.type})]})})},i=x.bind({});i.parameters={controls:{exclude:["value","onDeleteIcon","onChange","defaultValue","selectedOptions","customOption","customMenu"]}};i.args={name:"StorySelect",textField:"title",valueField:"contactId",placeholder:"placeholder_text",isMulti:!1,isClearable:!1,isSearchable:!0,isDisabled:!1,isLoading:!1,isRtl:!1,showSelection:!0,showPillsOutside:!0,options:m,style:{width:"300px"},customOption:_};const V=t=>{const[s,l]=g.useState([]),n=u=>{l(u)},d=()=>{l(t.options)},h=u=>e.jsxs(q.Menu,{...u,children:[e.jsx("div",{style:{paddingLeft:"2%",width:"96%",display:"flex",flexDirection:"column",alignItems:"center"},children:e.jsx(W,{variant:"secondary",onClick:d,style:{width:"289px",height:"33px",backgroundColor:"#f1f1f1",margin:"6px 0px 3px 0px"},children:k("select_all")})}),u.children]});return e.jsx(p,{...t,value:s,customMenu:t.isMulti&&h,onSelectAll:d,onChange:n})},r=V.bind({});r.parameters={controls:{exclude:["value","onDeleteIcon","onChange","defaultValue","selectedOptions","customOption","customMenu"]}};r.args={name:"StorySelect",textField:"title",valueField:"contactId",placeholder:"placeholder_text",isMulti:!0,isClearable:!0,isSearchable:!0,isDisabled:!1,isLoading:!1,isRtl:!1,showSelection:!0,showPillsOutside:!0,options:m,style:{width:"300px"}};const c=t=>{const[s,l]=g.useState([]),n=S.useForm();return e.jsxs(S,{ref:n.ref,onSubmit:()=>{},onValidSubmit:()=>{},children:[e.jsx(S.Item,{name:"selectRequired",label:"Select required",rules:[{required:!0,message:"Required"}],children:e.jsx(p,{...t,value:s,onChange:l,isRequiere:!0,options:m,textField:"title",valueField:"contactId",style:{width:"300px"}})}),e.jsx(W,{onClick:()=>n.submit(),children:"Submit"})]})};c.__docgenInfo={description:"",methods:[],displayName:"RequiredWithForm"};var O,f,b;o.parameters={...o.parameters,docs:{...(O=o.parameters)==null?void 0:O.docs,source:{originalSource:`args => {
  const [selectedOptions, setSelectedOptions] = useState<any>([]);
  //const [availableOptions, setAvailableOptions] = useState<any>(selectGroupList)

  const handleChange = selected => {
    setSelectedOptions(selected);
  };
  const handleSelectAll = () => {
    setSelectedOptions(args.options);
  };
  return <Select {...args} value={selectedOptions} onSelectAll={handleSelectAll} onChange={handleChange} />;
}`,...(b=(f=o.parameters)==null?void 0:f.docs)==null?void 0:b.source}}};var C,y,v;a.parameters={...a.parameters,docs:{...(C=a.parameters)==null?void 0:C.docs,source:{originalSource:`args => {
  const [selectedOptions, setSelectedOptions] = useState<any>([]);
  //const [availableOptions, setAvailableOptions] = useState<any>(selectGroupList)

  const handleChange = selected => {
    setSelectedOptions(selected);
  };
  const handleSelectAll = () => {
    setSelectedOptions(args.options);
  };
  return <Select {...args} value={selectedOptions} onSelectAll={handleSelectAll} onChange={handleChange} />;
}`,...(v=(y=a.parameters)==null?void 0:y.docs)==null?void 0:v.source}}};var A,F,M;i.parameters={...i.parameters,docs:{...(A=i.parameters)==null?void 0:A.docs,source:{originalSource:`args => {
  const [selectedOptions, setSelectedOptions] = useState<any>([]);
  //const [availableOptions, setAvailableOptions] = useState<any>(selectGroupList)

  const handleChange = selected => {
    setSelectedOptions(selected);
  };
  const handleSelectAll = () => {
    setSelectedOptions(args.options);
  };
  return <Select {...args} value={selectedOptions} onSelectAll={handleSelectAll} onChange={handleChange} />;
}`,...(M=(F=i.parameters)==null?void 0:F.docs)==null?void 0:M.source}}};var w,L,j;r.parameters={...r.parameters,docs:{...(w=r.parameters)==null?void 0:w.docs,source:{originalSource:`args => {
  const [selectedOptions, setSelectedOptions] = useState<any>([]);
  //const [availableOptions, setAvailableOptions] = useState<any>(selectGroupList)

  const handleChange = selected => {
    setSelectedOptions(selected);
  };
  const handleSelectAll = () => {
    setSelectedOptions(args.options);
  };
  const CustomMenuWithButton = (props: MenuProps<typeof MockSubscribers, true>) => {
    return <components.Menu {...props}>
        <div style={{
        paddingLeft: "2%",
        width: "96%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center"
      }}>
          <Button variant="secondary" onClick={handleSelectAll} style={{
          width: "289px",
          height: "33px",
          backgroundColor: "#f1f1f1",
          margin: "6px 0px 3px 0px"
        }}>{useLocale('select_all')}</Button>
        </div>
        {props.children}
      </components.Menu>;
  };
  return <Select {...args} value={selectedOptions} customMenu={args.isMulti && CustomMenuWithButton} onSelectAll={handleSelectAll} onChange={handleChange} />;
}`,...(j=(L=r.parameters)==null?void 0:L.docs)==null?void 0:j.source}}};var I,D,R;c.parameters={...c.parameters,docs:{...(I=c.parameters)==null?void 0:I.docs,source:{originalSource:`args => {
  const [selectedOptions, setSelectedOptions] = useState<any>([]);
  const form = Form.useForm();
  return <Form ref={form.ref} onSubmit={() => {}} onValidSubmit={() => {}}>
      <Form.Item name="selectRequired" label={"Select required"} rules={[{
      required: true,
      message: "Required"
    }]}>
        <Select {...args} value={selectedOptions} onChange={setSelectedOptions} isRequiere options={MockSubscribers} textField="title" valueField="contactId" style={{
        width: "300px"
      }} />
      </Form.Item>
      <Button onClick={() => form.submit()}>Submit</Button>
    </Form>;
}`,...(R=(D=c.parameters)==null?void 0:D.docs)==null?void 0:R.source}}};const se=["SimpleList","ListWithCategories","ListWithDetails","ListWithSearchAndButton","RequiredWithForm"];export{a as ListWithCategories,i as ListWithDetails,r as ListWithSearchAndButton,c as RequiredWithForm,o as SimpleList,se as __namedExportsOrder,te as default};
