deploy: 8730b7a

assets/Basic-DC7Bjgxq.js

@@ -0,0 +1,11 @@
+import{p as c}from"./_-B3UqnfVy.js";import{j as t,u as s}from"./index-CvvxM_JZ.js";import{S as a,t as l}from"./utils-C8c3Vb-c.js";const u=()=>t.jsx(a,{defaultItems:l,height:600,collapsible:!0}),m=`import { SortableTree } from 'dnd-tree-sortable';
+
+import { tree } from '../utils';
+
+const Basic = () => {
+  return <SortableTree defaultItems={tree} height={600} collapsible />;
+};
+
+export default Basic;
+`,d=void 0,f=void 0,p={code:m,title:d,desc:f},b=!0,_=Object.freeze(Object.defineProperty({__proto__:null,default:u,demoMeta:p,isDemo:b},Symbol.toStringTag,{value:"Module"}));function r(e){const o={h1:"h1",...s(),...e.components},{Demo:n}=o;return n||g("Demo"),t.jsxs(t.Fragment,{children:[t.jsx(o.h1,{id:"basic-usage",children:"Basic usage"}),`
+`,t.jsx(n,{..._})]})}function x(e={}){const{wrapper:o}={...s(),...e.components};return o?t.jsx(o,{...e,children:t.jsx(r,{...e})}):r(e)}function g(e,o){throw new Error("Expected component `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}const j=Object.freeze(Object.defineProperty({__proto__:null,default:x},Symbol.toStringTag,{value:"Module"})),i={};i.outlineInfo=c;i.main=j;export{i as default};

assets/CustomComponents-ByWdrm3r.css

@@ -0,0 +1 @@
+._btn_pr6u0_1{background-color:#fff;border:1px solid #ddd;padding:.25rem}._border-none_pr6u0_7{border:none}._grab_pr6u0_11{cursor:grab}

assets/CustomComponents-LHKoI5I-.js

@@ -0,0 +1,53 @@
+import{p as i}from"./_-BrHqT4U0.js";import{j as e,u as a}from"./index-CvvxM_JZ.js";import{S as m,t as c,c as d}from"./utils-C8c3Vb-c.js";const u="_btn_pr6u0_1",p="_grab_pr6u0_11",o={btn:u,"border-none":"_border-none_pr6u0_7",grab:p},h=n=>e.jsx("button",{...n,className:d(o.btn,o["border-none"],o.grab),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"#333",width:24,height:24,children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 0 .075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 0 1 3.15 0V15M6.9 7.575a1.575 1.575 0 1 0-3.15 0v8.175a6.75 6.75 0 0 0 6.75 6.75h2.018a5.25 5.25 0 0 0 3.712-1.538l1.732-1.732a5.25 5.25 0 0 0 1.538-3.712l.003-2.024a.668.668 0 0 1 .198-.471 1.575 1.575 0 1 0-2.228-2.228 3.818 3.818 0 0 0-1.12 2.687M6.9 7.575V12m6.27 4.318A4.49 4.49 0 0 1 16.35 15m.002 0h-.002"})})}),b=n=>e.jsxs("div",{children:[n.id," ",e.jsxs("span",{style:{color:"#1976d2"},children:["(",n.children.length,")"]})]}),f=()=>e.jsx(m,{defaultItems:c,height:600,collapsible:!0,indicator:!0,components:{Handle:h,ItemContent:b}}),g=`import { SortableTree, ActionProps, TreeItem } from 'dnd-tree-sortable';
+
+import { classNames, tree } from '../utils';
+import styles from '../styles.module.css';
+
+const Handle = (props: ActionProps) => {
+  return (
+    <button {...props} className={classNames(styles['btn'], styles['border-none'], styles['grab'])}>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='none'
+        viewBox='0 0 24 24'
+        strokeWidth='1.5'
+        stroke='#333'
+        width={24}
+        height={24}
+      >
+        <path
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          d='M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 0 .075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 0 1 3.15 0V15M6.9 7.575a1.575 1.575 0 1 0-3.15 0v8.175a6.75 6.75 0 0 0 6.75 6.75h2.018a5.25 5.25 0 0 0 3.712-1.538l1.732-1.732a5.25 5.25 0 0 0 1.538-3.712l.003-2.024a.668.668 0 0 1 .198-.471 1.575 1.575 0 1 0-2.228-2.228 3.818 3.818 0 0 0-1.12 2.687M6.9 7.575V12m6.27 4.318A4.49 4.49 0 0 1 16.35 15m.002 0h-.002'
+        />
+      </svg>
+    </button>
+  );
+};
+
+const ItemContent = (props: TreeItem) => {
+  return (
+    <div>
+      {props.id} <span style={{ color: '#1976d2' }}>({props.children.length})</span>
+    </div>
+  );
+};
+
+const CustomComponents = () => {
+  return (
+    <SortableTree
+      defaultItems={tree}
+      height={600}
+      collapsible
+      indicator
+      components={{
+        Handle,
+        ItemContent,
+      }}
+    />
+  );
+};
+
+export default CustomComponents;
+`,_=void 0,x=void 0,v={code:g,title:_,desc:x},j=!0,w=Object.freeze(Object.defineProperty({__proto__:null,default:f,demoMeta:v,isDemo:j},Symbol.toStringTag,{value:"Module"}));function r(n){const t={h1:"h1",...a(),...n.components},{Demo:s}=t;return s||M("Demo"),e.jsxs(e.Fragment,{children:[e.jsx(t.h1,{id:"custom-components",children:"Custom components"}),`
+`,e.jsx(s,{...w})]})}function y(n={}){const{wrapper:t}={...a(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(r,{...n})}):r(n)}function M(n,t){throw new Error("Expected component `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}const C=Object.freeze(Object.defineProperty({__proto__:null,default:y},Symbol.toStringTag,{value:"Module"})),l={};l.outlineInfo=i;l.main=C;export{l as default};

assets/CustomItem-BfW_WG9e.js

@@ -0,0 +1,46 @@
+import{p as m}from"./_-D3YUpm37.js";import{j as n,u as i}from"./index-CvvxM_JZ.js";import{S as p,t as u}from"./utils-C8c3Vb-c.js";const f=({childCount:e,clone:t,depth:o,disableSelection:v,disableInteraction:M,ghost:P,handleProps:R,indentationWidth:a,indicator:T,collapsed:D,onCollapse:w,onRemove:O,style:E,value:r,components:L,wrapperRef:c,...d})=>n.jsxs("li",{ref:c,style:{"--spacing":`${a*o}px`,paddingLeft:"var(--spacing)"},...d,children:[r.id," ",n.jsxs("span",{style:{color:"#1976d2"},children:["(",r.children.length,")"]})]}),h=()=>n.jsx(p,{defaultItems:u,height:600,collapsible:!0,indicator:!0,renderItemContent:f}),g=`import { SortableTree, SortableTreeProps } from 'dnd-tree-sortable';
+
+import { tree } from '../utils';
+
+const ItemContent: SortableTreeProps<{}>['renderItemContent'] = ({
+  childCount,
+  clone,
+  depth,
+  disableSelection,
+  disableInteraction,
+  ghost,
+  handleProps,
+  indentationWidth,
+  indicator,
+  collapsed,
+  onCollapse,
+  onRemove,
+  style,
+  value,
+  components,
+  wrapperRef,
+  ...rest
+}) => {
+  return (
+    <li
+      ref={wrapperRef}
+      style={
+        {
+          '--spacing': \`\${indentationWidth * depth}px\`,
+          paddingLeft: 'var(--spacing)',
+        } as React.CSSProperties
+      }
+      {...rest}
+    >
+      {value.id} <span style={{ color: '#1976d2' }}>({value.children.length})</span>
+    </li>
+  );
+};
+
+const CustomItem = () => {
+  return <SortableTree defaultItems={tree} height={600} collapsible indicator renderItemContent={ItemContent} />;
+};
+
+export default CustomItem;
+`,b=void 0,C=void 0,x={code:g,title:b,desc:C},j=!0,I=Object.freeze(Object.defineProperty({__proto__:null,default:h,demoMeta:x,isDemo:j},Symbol.toStringTag,{value:"Module"}));function s(e){const t={h1:"h1",...i(),...e.components},{Demo:o}=t;return o||_("Demo"),n.jsxs(n.Fragment,{children:[n.jsx(t.h1,{id:"custom-components",children:"Custom components"}),`
+`,n.jsx(o,{...I})]})}function S(e={}){const{wrapper:t}={...i(),...e.components};return t?n.jsx(t,{...e,children:n.jsx(s,{...e})}):s(e)}function _(e,t){throw new Error("Expected component `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}const y=Object.freeze(Object.defineProperty({__proto__:null,default:S},Symbol.toStringTag,{value:"Module"})),l={};l.outlineInfo=m;l.main=y;export{l as default};

assets/CustomItemData-D95OxdaT.js

@@ -0,0 +1,55 @@
+import{p as u}from"./_-CJuvOKf9.js";import{j as n,u as d}from"./index-CvvxM_JZ.js";import{g as p,S as f}from"./utils-C8c3Vb-c.js";const m=(e,t,o,a)=>{const s=[];if(o.toString().split("-").length===t)return[];for(let r=1;r<=(a??e);r++){const l={id:`${o}-${r}`,children:m(p(0,e),t,`${o}-${r}`),text:`${o}-${r}`};s.push(l)}return s},g=m(10,6,"Node",20),h=e=>n.jsxs("div",{children:[e.text," ",n.jsxs("span",{style:{color:"#1976d2"},children:["(",e.children.length,")"]})]}),I=()=>n.jsx(f,{defaultItems:g,height:600,collapsible:!0,indicator:!0,components:{ItemContent:h}}),x=`import { SortableTree, TreeItem as BaseTreeItem } from 'dnd-tree-sortable';
+
+import { getRandomInRange } from '../utils';
+
+type CustomItemType = {
+  text: string;
+};
+
+type TreeItem = BaseTreeItem<CustomItemType>;
+
+const generateTree = (childPerNode: number, deep: number, parentId: TreeItem['id'], totalRoot?: number) => {
+  const nodes: TreeItem[] = [];
+  const currDeep = parentId.toString().split('-').length;
+  if (currDeep === deep) {
+    return [];
+  }
+  for (let i = 1; i <= (totalRoot ?? childPerNode); i++) {
+    const node: TreeItem = {
+      id: \`\${parentId}-\${i}\`,
+      children: generateTree(getRandomInRange(0, childPerNode), deep, \`\${parentId}-\${i}\`),
+      text: \`\${parentId}-\${i}\`,
+    };
+    nodes.push(node);
+  }
+
+  return nodes;
+};
+
+const tree = generateTree(10, 6, 'Node', 20);
+
+const ItemContent = (props: TreeItem) => {
+  return (
+    <div>
+      {props.text} <span style={{ color: '#1976d2' }}>({props.children.length})</span>
+    </div>
+  );
+};
+
+const CustomItemData = () => {
+  return (
+    <SortableTree<CustomItemType>
+      defaultItems={tree}
+      height={600}
+      collapsible
+      indicator
+      components={{
+        ItemContent,
+      }}
+    />
+  );
+};
+
+export default CustomItemData;
+`,T=void 0,b=void 0,j={code:x,title:T,desc:b},y=!0,_=Object.freeze(Object.defineProperty({__proto__:null,default:I,demoMeta:j,isDemo:y},Symbol.toStringTag,{value:"Module"}));function i(e){const t={h1:"h1",...d(),...e.components},{Demo:o}=t;return o||D("Demo"),n.jsxs(n.Fragment,{children:[n.jsx(t.h1,{id:"custom-item-data",children:"Custom item data"}),`
+`,n.jsx(o,{..._})]})}function C(e={}){const{wrapper:t}={...d(),...e.components};return t?n.jsx(t,{...e,children:n.jsx(i,{...e})}):i(e)}function D(e,t){throw new Error("Expected component `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}const $=Object.freeze(Object.defineProperty({__proto__:null,default:C},Symbol.toStringTag,{value:"Module"})),c={};c.outlineInfo=u;c.main=$;export{c as default};

assets/Indicator-BLt8AOj-.js

@@ -0,0 +1,11 @@
+import{p as c}from"./_-FNA1FZbS.js";import{j as t,u as i}from"./index-CvvxM_JZ.js";import{S as d,t as a}from"./utils-C8c3Vb-c.js";const l=()=>t.jsx(d,{defaultItems:a,height:600,collapsible:!0,indicator:!0}),u=`import { SortableTree } from 'dnd-tree-sortable';
+
+import { tree } from '../utils';
+
+const Indicator = () => {
+  return <SortableTree defaultItems={tree} height={600} collapsible indicator />;
+};
+
+export default Indicator;
+`,m=void 0,f=void 0,p={code:u,title:m,desc:f},_=!0,b=Object.freeze(Object.defineProperty({__proto__:null,default:l,demoMeta:p,isDemo:_},Symbol.toStringTag,{value:"Module"}));function r(e){const o={h1:"h1",...i(),...e.components},{Demo:n}=o;return n||j("Demo"),t.jsxs(t.Fragment,{children:[t.jsx(o.h1,{id:"indicator",children:"Indicator"}),`
+`,t.jsx(n,{...b})]})}function x(e={}){const{wrapper:o}={...i(),...e.components};return o?t.jsx(o,{...e,children:t.jsx(r,{...e})}):r(e)}function j(e,o){throw new Error("Expected component `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}const h=Object.freeze(Object.defineProperty({__proto__:null,default:x},Symbol.toStringTag,{value:"Module"})),s={};s.outlineInfo=c;s.main=h;export{s as default};

assets/Removable-cGS3JcZW.js

@@ -0,0 +1,20 @@
+import{p as m}from"./_-CK41x3r9.js";import{j as t,u as i}from"./index-CvvxM_JZ.js";import{S as s,t as a}from"./utils-C8c3Vb-c.js";const d=()=>t.jsx(s,{defaultItems:a,height:600,collapsible:!0,indicator:!0,removable:!0,onRemove:e=>alert(`Remove id: ${e}`)}),c=`import { SortableTree } from 'dnd-tree-sortable';
+
+import { tree } from '../utils';
+
+const Removable = () => {
+  return (
+    <SortableTree
+      defaultItems={tree}
+      height={600}
+      collapsible
+      indicator
+      removable
+      onRemove={(id) => alert(\`Remove id: \${id}\`)}
+    />
+  );
+};
+
+export default Removable;
+`,u=void 0,f=void 0,p={code:c,title:u,desc:f},b=!0,v=Object.freeze(Object.defineProperty({__proto__:null,default:d,demoMeta:p,isDemo:b},Symbol.toStringTag,{value:"Module"}));function r(e){const o={h1:"h1",...i(),...e.components},{Demo:n}=o;return n||x("Demo"),t.jsxs(t.Fragment,{children:[t.jsx(o.h1,{id:"removable",children:"Removable"}),`
+`,t.jsx(n,{...v})]})}function _(e={}){const{wrapper:o}={...i(),...e.components};return o?t.jsx(o,{...e,children:t.jsx(r,{...e})}):r(e)}function x(e,o){throw new Error("Expected component `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}const j=Object.freeze(Object.defineProperty({__proto__:null,default:_},Symbol.toStringTag,{value:"Module"})),l={};l.outlineInfo=m;l.main=j;export{l as default};

assets/_-B3UqnfVy.js

@@ -0,0 +1 @@
+const e=[{depth:1,text:"Basic usage",id:"basic-usage"}];let t;const o=Object.freeze(Object.defineProperty({__proto__:null,onUpdate:t,outline:e},Symbol.toStringTag,{value:"Module"}));export{o as p};

assets/_-BrHqT4U0.js

@@ -0,0 +1 @@
+const e=[{depth:1,text:"Custom components",id:"custom-components"}];let t;const o=Object.freeze(Object.defineProperty({__proto__:null,onUpdate:t,outline:e},Symbol.toStringTag,{value:"Module"}));export{o as p};

assets/_-CJuvOKf9.js

@@ -0,0 +1 @@
+const t=[{depth:1,text:"Custom item data",id:"custom-item-data"}];let e;const o=Object.freeze(Object.defineProperty({__proto__:null,onUpdate:e,outline:t},Symbol.toStringTag,{value:"Module"}));export{o as p};

assets/_-CK41x3r9.js

@@ -0,0 +1 @@
+const e=[{depth:1,text:"Removable",id:"removable"}];let t;const o=Object.freeze(Object.defineProperty({__proto__:null,onUpdate:t,outline:e},Symbol.toStringTag,{value:"Module"}));export{o as p};

assets/_-D3YUpm37.js

@@ -0,0 +1 @@
+const e=[{depth:1,text:"Custom components",id:"custom-components"}];let t;const o=Object.freeze(Object.defineProperty({__proto__:null,onUpdate:t,outline:e},Symbol.toStringTag,{value:"Module"}));export{o as p};

assets/_-FNA1FZbS.js

@@ -0,0 +1 @@
+const e=[{depth:1,text:"Indicator",id:"indicator"}];let t;const o=Object.freeze(Object.defineProperty({__proto__:null,onUpdate:t,outline:e},Symbol.toStringTag,{value:"Module"}));export{o as p};

assets/_-FU1-d8Ot.js

@@ -0,0 +1 @@
+const e=[];let t;const o=Object.freeze(Object.defineProperty({__proto__:null,onUpdate:t,outline:e},Symbol.toStringTag,{value:"Module"}));export{o as p};