dnd-kit-sortable-tree-eshaffer/dist/dnd-kit-sortable-tree-eshaffer.cjs.production.min.js

This is a Tree component extracted from [dndkit](https://github.com/clauderic/dnd-kit) examples and abstracted a bit. Here's how it could look like (visuals are completely customizable via css though) [](https://shaddix.github.io/dnd-ki

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("clsx")),n=require("react"),r=e(n),o=require("react-dom"),i=require("@dnd-kit/core"),l=require("@dnd-kit/sortable"),a=require("@dnd-kit/utilities");function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function c(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(n)return(n=n.call(e)).next.bind(n);if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return u(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(e,void 0):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function p(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}p(".dnd-sortable-tree_simple_wrapper{box-sizing:border-box;list-style:none;margin-bottom:-1px}.dnd-sortable-tree_simple_tree-item{align-items:center;border:1px solid #dedede;box-sizing:border-box;color:#222;display:flex;padding:10px;position:relative}.dnd-sortable-tree_simple_clone{display:inline-block;padding:5px;pointer-events:none}.dnd-sortable-tree_simple_clone>.dnd-sortable-tree_simple_tree-item{border-radius:4px;box-shadow:0 15px 15px 0 rgba(34,33,81,.1);padding-bottom:5px;padding-right:24px;padding-top:5px}.dnd-sortable-tree_simple_ghost{opacity:.5}.dnd-sortable-tree_simple_disable-selection{-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.dnd-sortable-tree_simple_disable-interaction{pointer-events:none}.dnd-sortable-tree_folder_tree-item-collapse_button{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg width='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 41'><path d='M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z' /></svg>\") no-repeat 50%;border:0;transition:transform .25s ease;width:20px}.dnd-sortable-tree_folder_tree-item-collapse_button-collapsed{transform:rotate(-90deg)}.dnd-sortable-tree_simple_handle{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='12'><path d='M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z'></path></svg>\") no-repeat 50%;cursor:pointer;width:20px}.dnd-sortable-tree_simple_tree-item-collapse_button{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg width='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 41'><path d='M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z' /></svg>\") no-repeat 50%;border:0;transition:transform .25s ease;width:20px}.dnd-sortable-tree_folder_simple-item-collapse_button-collapsed{transform:rotate(-90deg)}");var f=["clone","depth","disableSelection","disableInteraction","ghost","handleProps","indentationWidth","indicator","collapsed","onCollapse","onRemove","item","wrapperRef","style"],m=n.forwardRef((function(e,n){var o=e.clone,i=e.depth,l=e.disableSelection,a=e.disableInteraction,u=e.ghost,c=e.handleProps,p=e.indentationWidth,m=e.collapsed,v=e.onCollapse,g=e.wrapperRef,b=e.style,h=s(e,f),_=!!e.disableCollapseOnItemClick;return r.createElement("li",Object.assign({className:t("dnd-sortable-tree_simple_wrapper",o&&"dnd-sortable-tree_simple_clone",u&&"dnd-sortable-tree_simple_ghost",l&&"dnd-sortable-tree_simple_disable-selection",a&&"dnd-sortable-tree_simple_disable-interaction"),ref:g},h,{style:d({},b,{paddingLeft:o?p:p*i})}),r.createElement("div",Object.assign({className:"dnd-sortable-tree_simple_tree-item",ref:n},e.manualDrag?void 0:c,{onClick:_?void 0:e.onCollapse}),!e.disableSorting&&!1!==e.showDragHandle&&r.createElement("div",Object.assign({className:"dnd-sortable-tree_simple_handle"},c)),!e.manualDrag&&!e.hideCollapseButton&&!!v&&!!e.childCount&&r.createElement("button",{onClick:function(e){_&&(e.preventDefault(),null==v||v())},className:t("dnd-sortable-tree_simple_tree-item-collapse_button",m&&"dnd-sortable-tree_folder_simple-item-collapse_button-collapsed")}),e.children))}));p(".dnd-sortable-tree_folder_wrapper{box-sizing:border-box;display:flex;flex-direction:row;list-style:none;margin-bottom:-1px}.dnd-sortable-tree_folder_tree-item{align-items:center;box-sizing:border-box;display:flex;padding:7px 0;position:relative}.dnd-sortable-tree_folder_clone{display:inline-block;padding:5px;pointer-events:none}.dnd-sortable-tree_folder_clone>.dnd-sortable-tree_folder_tree-item{border-radius:4px;padding-bottom:5px;padding-right:24px;padding-top:5px}.dnd-sortable-tree_folder_ghost{opacity:.5}.dnd-sortable-tree_folder_disable-selection{-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.dnd-sortable-tree_folder_disable-interaction{pointer-events:none}.dnd-sortable-tree_folder_line{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='0' x2='50%' y2='100%'/></svg>\");width:20px}.dnd-sortable-tree_folder_line-last{align-self:stretch;width:20px}.dnd-sortable-tree_folder_line-to_self{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='0' x2='50%' y2='100%'/><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='50%' x2='100%' y2='50%'/></svg>\");width:20px}.dnd-sortable-tree_folder_line-to_self-last{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='0' x2='50%' y2='50%'/><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='50%' x2='100%' y2='50%'/></svg>\");width:20px}.dnd-sortable-tree_folder_tree-item-collapse_button{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg width='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 41'><path d='M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z' /></svg>\") no-repeat 50%;border:0;transition:transform .25s ease;width:20px}.dnd-sortable-tree_folder_tree-item-collapse_button-collapsed{transform:rotate(-90deg)}.dnd-sortable-tree_folder_handle{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='12'><path d='M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z'></path></svg>\") no-repeat 50%;cursor:pointer;width:20px}");var v=["clone","depth","disableSelection","disableInteraction","ghost","handleProps","indentationWidth","indicator","collapsed","onCollapse","onRemove","item","wrapperRef","style","isLast","parent"],g=n.forwardRef((function(e,n){var o=e.clone,i=e.disableSelection,l=e.disableInteraction,a=e.ghost,d=e.handleProps,u=e.collapsed,c=e.onCollapse,p=e.wrapperRef,f=e.style,m=e.isLast,g=e.parent,b=s(e,v),h=function e(t){return t?[].concat(e(t.parent),[t]):[]}(g);return r.createElement("li",Object.assign({className:t("dnd-sortable-tree_folder_wrapper",o&&"dnd-sortable-tree_folder_clone",a&&"dnd-sortable-tree_folder_ghost",i&&"dnd-sortable-tree_folder_disable-selection",l&&"dnd-sortable-tree_folder_disable-interaction"),ref:p},b,{style:f}),h.map((function(e){return r.createElement("div",{className:e.isLast?"dnd-sortable-tree_folder_line-last":"dnd-sortable-tree_folder_line"})})),r.createElement("div",{className:m?"dnd-sortable-tree_folder_line-to_self-last":"dnd-sortable-tree_folder_line-to_self"}),e.manualDrag&&e.showDragHandle&&!e.disableSorting&&r.createElement("div",Object.assign({className:"dnd-sortable-tree_folder_handle"},d)),!e.manualDrag&&!e.hideCollapseButton&&!!c&&!!e.childCount&&r.createElement("button",{onClick:function(e){e.preventDefault(),null==c||c()},className:t("dnd-sortable-tree_folder_tree-item-collapse_button",u&&"dnd-sortable-tree_folder_tree-item-collapse_button-collapsed")}),r.createElement("div",Object.assign({className:"dnd-sortable-tree_folder_tree-item",ref:n},e.manualDrag?void 0:d,{onClick:e.disableCollapseOnItemClick?void 0:e.onCollapse}),e.children))})),b=/iPad|iPhone|iPod/.test(navigator.platform),h=function(){};function _(e){return function e(t,n,r,o){return void 0===n&&(n=null),void 0===r&&(r=0),void 0===o&&(o=null),t.reduce((function(i,l,a){var s,u=d({},l,{parentId:n,depth:r,index:a,isLast:t.length===a+1,parent:o});return[].concat(i,[u],e(null!=(s=l.children)?s:[],l.id,r+1,u))}),[])}(e)}function x(e,t){return e.find((function(e){return e.id===t}))}function w(e,t){var n;if(!t)return 0;var r=function e(t,n){for(var r,o=c(t);!(r=o()).done;){var i=r.value,l=i.children;if(i.id===n)return i;if(null!=l&&l.length){var a=e(l,n);if(a)return a}}}(e,t);return r?function e(t,n){return void 0===n&&(n=0),t.reduce((function(t,n){var r=n.children;return null!=r&&r.length?e(r,t+1):t+1}),n)}(null!=(n=r.children)?n:[]):0}var C=["id","depth","isLast","TreeItemComponent","parent","disableSorting"],y=function(e){return!e.isSorting&&!e.isDragging},I=function(e){var t=e.id,o=e.depth,i=e.isLast,u=e.TreeItemComponent,c=e.parent,p=e.disableSorting,f=s(e,C),m=l.useSortable({id:t,animateLayoutChanges:y,disabled:p}),v=m.attributes,g=m.isDragging,h=m.isSorting,_=m.listeners,x=m.setDraggableNodeRef,w=m.setDroppableNodeRef,I=m.transition,S={transform:a.CSS.Translate.toString(m.transform),transition:null!=I?I:void 0},k=n.useMemo((function(){if(f.onCollapse)return function(){return null==f.onCollapse?void 0:f.onCollapse(f.item.id)}}),[f.item.id,f.onCollapse]),D=n.useMemo((function(){if(f.onRemove)return function(){return null==f.onRemove?void 0:f.onRemove(f.item.id)}}),[f.item.id,f.onRemove]);return r.createElement(u,Object.assign({},f,{ref:x,wrapperRef:w,style:S,depth:o,ghost:g,disableSelection:b,disableInteraction:h,isLast:i,parent:c,handleProps:d({},v,_),onCollapse:k,onRemove:D,disableSorting:p}))},S=r.memo(I),k=["items","indicator","indentationWidth","onItemsChanged","TreeItemComponent","pointerSensorOptions","disableSorting"],D=d({},i.defaultDropAnimation),L={activationConstraint:{distance:10}},E=[function(e){var t=e.transform;return d({},t,{y:t.y-25})}];exports.FolderTreeItemWrapper=g,exports.SimpleTreeItemWrapper=m,exports.SortableTree=function(e){var t=e.items,a=e.indicator,u=e.indentationWidth,p=void 0===u?20:u,f=e.onItemsChanged,m=e.TreeItemComponent,v=e.pointerSensorOptions,g=e.disableSorting,b=s(e,k),C=n.useState(null),y=C[0],I=C[1],O=n.useState(null),A=O[0],M=O[1],R=n.useState(0),z=R[0],j=R[1],P=n.useState(null),N=P[0],T=P[1],B=n.useMemo((function(){var e=_(t),n=e.reduce((function(e,t){var n=t.children;return t.collapsed&&null!=n&&n.length?[].concat(e,[t.id]):e}),[]);return function(e,t){var n=[].concat(t);return e.filter((function(e){var t;return!e.parentId||!n.includes(e.parentId)||(null!=(t=e.children)&&t.length&&n.push(e.id),!1)}))}(e,y?[y].concat(n):n)}),[y,t]),W=function(e,t,n,r,o){var i;if(h(),h=function(){},!t||!n)return null;var a=e.findIndex((function(e){return e.id===n})),d=e.findIndex((function(e){return e.id===t})),s=e[d],u=l.arrayMove(e,d,a),c=u[a-1],p=u[a+1],f=function(e,t){return Math.round(e/t)}(r,o),m=s.depth+f,v=function(e){var t=e.previousItem;return t?!1===t.canHaveChildren?t.depth:t.depth+1:0}({previousItem:c}),g=function(e){var t=e.nextItem;return t?t.depth:0}({nextItem:p}),b=m;m>=v?b=v:m<g&&(b=g);for(var _=c,x=null,w=c?c.depth+1:0,C=(null!=(i=null==p?void 0:p.depth)?i:-1)<b;b!==w;){var y,I;w--,x=_,_=null!=(y=null==(I=_)?void 0:I.parent)?y:null}return x&&x.isLast&&(h=function(){x.isLast=!0},x.isLast=!1),{depth:b,maxDepth:v,minDepth:g,parentId:function(){var e;if(0===b||!c)return null;if(b===c.depth)return c.parentId;if(b>c.depth)return c.id;var t=null==(e=u.slice(0,a).reverse().find((function(e){return e.depth===b})))?void 0:e.parentId;return null!=t?t:null}(),parent:_,isLast:C}}(B,y,A,z,p),q=n.useRef({items:B,offset:z}),H=i.useSensors(i.useSensor(i.PointerSensor,null!=v?v:L)),Z=n.useMemo((function(){return B.map((function(e){return e.id}))}),[B]),F=y?B.find((function(e){return e.id===y})):null;n.useEffect((function(){q.current={items:B,offset:z}}),[B,z]);var U=n.useRef(t);U.current=t;var $=n.useCallback((function(e){f(function e(t,n){for(var r,o=[],i=c(t);!(r=i()).done;){var l,a=r.value;a.id!==n&&(null!=(l=a.children)&&l.length&&(a.children=e(a.children,n)),o.push(a))}return o}(U.current,e))}),[f]),G=n.useCallback((function(e){f(function e(t,n,r,o){for(var i,l=c(t);!(i=l()).done;){var a,d=i.value;d.id!==n?null!=(a=d.children)&&a.length&&(d.children=e(d.children,n,r,o)):d[r]=o(d[r])}return[].concat(t)}(U.current,e,"collapsed",(function(e){return!e})))}),[f]),J=n.useMemo((function(){return{onDragStart:function(e){return"Picked up "+e.active.id+"."},onDragMove:function(e){var t=e.over;return Q("onDragMove",e.active.id,null==t?void 0:t.id)},onDragOver:function(e){var t=e.over;return Q("onDragOver",e.active.id,null==t?void 0:t.id)},onDragEnd:function(e){var t=e.over;return Q("onDragEnd",e.active.id,null==t?void 0:t.id)},onDragCancel:function(e){return"Moving was cancelled. "+e.active.id+" was dropped in its original position."}}}),[]);return r.createElement(i.DndContext,{accessibility:{announcements:J},sensors:g?void 0:H,modifiers:a?E:void 0,collisionDetection:i.closestCenter,onDragStart:g?void 0:function(e){var t=e.active.id;I(t),M(t);var n=B.find((function(e){return e.id===t}));n&&T({parentId:n.parentId,overId:t}),document.body.style.setProperty("cursor","grabbing")},onDragMove:g?void 0:function(e){j(e.delta.x)},onDragOver:g?void 0:function(e){var t,n=e.over;M(null!=(t=null==n?void 0:n.id)?t:null)},onDragEnd:g?void 0:function(e){var n=e.active,r=e.over;if(K(),W&&r){var o=W.depth,i=W.parentId,a=_(t),s=a.findIndex((function(e){return e.id===r.id})),u=a.findIndex((function(e){return e.id===n.id}));a[u]=d({},a[u],{depth:o,parentId:i});var p=function(e){for(var t,n,r,o={id:"root",children:[]},i=((t={})[o.id]=o,t),l=e.map((function(e){return d({},e,{children:[]})})),a=c(l);!(r=a()).done;){var s,u,p,f=r.value,m=f.id,v=null!=(s=f.parentId)?s:o.id,g=null!=(u=i[v])?u:x(l,v);i[m]=f,null==g||null==(p=g.children)||p.push(f)}return null!=(n=o.children)?n:[]}(l.arrayMove(a,u,s));f(p)}},onDragCancel:g?void 0:function(){K()}},r.createElement(l.SortableContext,{items:Z,strategy:g?void 0:l.verticalListSortingStrategy},r.createElement(r.Fragment,null,B.map((function(e){var t,n,o;return r.createElement(S,Object.assign({},b,{key:e.id,id:e.id,item:e,childCount:null==(t=e.children)?void 0:t.length,depth:e.id===y&&W?W.depth:e.depth,indentationWidth:p,indicator:a,collapsed:Boolean(e.collapsed&&(null==(n=e.children)?void 0:n.length)),onCollapse:null!=(o=e.children)&&o.length?G:void 0,onRemove:$,isLast:e.id===y&&W?W.isLast:e.isLast,parent:e.id===y&&W?W.parent:e.parent,TreeItemComponent:m,disableSorting:g}))})),o.createPortal(r.createElement(i.DragOverlay,{dropAnimation:D},y&&F?r.createElement(m,Object.assign({},b,{item:F,children:[],depth:F.depth,clone:!0,childCount:w(t,y)+1,indentationWidth:p,isLast:!1,parent:F.parent})):null),document.body))));function K(){M(null),I(null),j(0),T(null),document.body.style.setProperty("cursor","")}function Q(e,n,r){if(r&&W){if("onDragEnd"!==e){if(N&&W.parentId===N.parentId&&r===N.overId)return;T({parentId:W.parentId,overId:r})}var o,i=_(t),a=i.findIndex((function(e){return e.id===r})),d=i.findIndex((function(e){return e.id===n})),s=l.arrayMove(i,d,a),u=s[a-1],c="onDragEnd"===e?"dropped":"moved";if(u)if(W.depth>u.depth)o=n+" was "+("onDragEnd"===e?"dropped":"nested")+" under "+u.id+".";else{for(var p=u,f=function(){var e=p.parentId;p=s.find((function(t){return t.id===e}))};p&&W.depth<p.depth;)f();p&&(o=n+" was "+c+" after "+p.id+".")}else o=n+" was "+c+" before "+s[a+1].id+".";return o}}},exports.flattenTree=_;
//# sourceMappingURL=dnd-kit-sortable-tree-eshaffer.cjs.production.min.js.map