import{j as n}from"./jsx-runtime-Dfk2JFgj.js";import{r as m}from"./index-CWN_QRa1.js";import{g as o}from"./index-DNsi8NHw.js";import"./index-CIVavKlu.js";import"./CheckGroup-BpaEcK_0.js";import"./index-Cj3pldWQ.js";import"./index-DgIb9kCw.js";import"./index-DllfNvuz.js";import"./index-6WYjB5r3.js";import"./DefaultPropsProvider-BPu7lNPC.js";import"./index-Bk93qgka.js";import"./index-DnVHLn3F.js";import"./v4-CtRu48qb.js";import"./tiny-invariant-CopsF_GD.js";import"./iframe-BT4Dhm0c.js";const w={title:"Components/DragAndDrop",component:o},l=()=>{const[s,d]=m.useState([{id:"group1",title:"Group 1",items:[],isDragDisabled:!1,direction:"vertical",isDeletable:!0,cloneItems:!1,className:"",style:{minWidth:250,backgroundColor:"#ddd",padding:8}},{id:"group2",title:"Group 2",isDragDisabled:!1,direction:"vertical",isDeletable:!1,cloneItems:!0,className:"",style:{minWidth:250,backgroundColor:"#ddd",padding:8},items:[{id:"item1",name:"Item 1",type:"TextField",key:""},{id:"item2",name:"Item 2",type:"TextArea",key:""},{id:"item3",name:"Item 3",type:"Checkbox",key:""}]}]);return n.jsx(o,{containers:s,itemRenderer:(e,p,c)=>n.jsxs("div",{style:{width:"100%",backgroundColor:"white",margin:5,padding:8},children:[n.jsx("h3",{style:{margin:0},children:e==null?void 0:e.name}),n.jsx("span",{children:e.type})]}),onDragEnd:e=>{d(e)}})},t=l.bind({});var r,i,a;t.parameters={...t.parameters,docs:{...(r=t.parameters)==null?void 0:r.docs,source:{originalSource:`() => {
  const [containers, setContainers] = useState([{
    id: "group1",
    title: "Group 1",
    items: [],
    isDragDisabled: false,
    direction: "vertical",
    isDeletable: true,
    cloneItems: false,
    className: "",
    style: {
      minWidth: 250,
      backgroundColor: "#ddd",
      padding: 8
    }
  }, {
    id: "group2",
    title: "Group 2",
    isDragDisabled: false,
    direction: "vertical",
    isDeletable: false,
    cloneItems: true,
    className: "",
    style: {
      minWidth: 250,
      backgroundColor: "#ddd",
      padding: 8
    },
    items: [{
      id: "item1",
      name: "Item 1",
      type: "TextField",
      key: ""
    }, {
      id: "item2",
      name: "Item 2",
      type: "TextArea",
      key: ""
    }, {
      id: "item3",
      name: "Item 3",
      type: "Checkbox",
      key: ""
    }]
  }]);
  return <DragAndDrop containers={containers} itemRenderer={(item: any, keyContainer: number, keyItem: number) => {
    return <div style={{
      width: "100%",
      backgroundColor: "white",
      margin: 5,
      padding: 8
    }}>
            <h3 style={{
        margin: 0
      }}>
              {item?.name}
            </h3>
            <span>{item.type}</span>
          </div>;
  }} onDragEnd={(result: any) => {
    setContainers(result);
  }} />;
}`,...(a=(i=t.parameters)==null?void 0:i.docs)==null?void 0:a.source}}};const G=["dragAndDrop"];export{G as __namedExportsOrder,w as default,t as dragAndDrop};
