react-optimized-dnd/dist/index.cjs.js

A React package for building performant drag-and-drop interfaces. Provides context provider, hooks, and type definitions for flexible, optimized DnD in React apps.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react");var Z=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},Q={exports:{}},B={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var oe;function ae(){if(oe)return B;oe=1;var r=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function l(c,n,i){var s=null;if(i!==void 0&&(s=""+i),n.key!==void 0&&(s=""+n.key),"key"in n){i={};for(var t in n)t!=="key"&&(i[t]=n[t])}else i=n;return n=i.ref,{$$typeof:r,type:c,key:s,ref:n!==void 0?n:null,props:i}}return B.Fragment=o,B.jsx=l,B.jsxs=l,B}var H={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ce;function ie(){return ce||(ce=1,process.env.NODE_ENV!=="production"&&function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case f:return"Fragment";case b:return"Profiler";case G:return"StrictMode";case a:return"Suspense";case y:return"SuspenseList";case U:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case p:return"Portal";case I:return(e.displayName||"Context")+".Provider";case X:return(e._context.displayName||"Context")+".Consumer";case L:var u=e.render;return e=e.displayName,e||(e=u.displayName||u.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case P:return u=e.displayName||null,u!==null?u:r(e.type)||"Memo";case M:u=e._payload,e=e._init;try{return r(e(u))}catch{}}return null}function o(e){return""+e}function l(e){try{o(e);var u=!1}catch{u=!0}if(u){u=console;var g=u.error,T=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return g.call(u,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",T),o(e)}}function c(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===M)return"<...>";try{var u=r(e);return u?"<"+u+">":"<...>"}catch{return"<...>"}}function n(){var e=D.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function s(e){if(_.call(e,"key")){var u=Object.getOwnPropertyDescriptor(e,"key").get;if(u&&u.isReactWarning)return!1}return e.key!==void 0}function t(e,u){function g(){x||(x=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",u))}g.isReactWarning=!0,Object.defineProperty(e,"key",{get:g,configurable:!0})}function R(){var e=r(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function d(e,u,g,T,W,$,J,S){return g=$.ref,e={$$typeof:O,type:e,key:u,props:$,_owner:W},(g!==void 0?g:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function v(e,u,g,T,W,$,J,S){var E=u.children;if(E!==void 0)if(T)if(C(E)){for(T=0;T<E.length;T++)w(E[T]);Object.freeze&&Object.freeze(E)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(E);if(_.call(u,"key")){E=r(e);var F=Object.keys(u).filter(function(se){return se!=="key"});T=0<F.length?"{key: someKey, "+F.join(": ..., ")+": ...}":"{key: someKey}",q[E+T]||(F=0<F.length?"{"+F.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,T,E,F,E),q[E+T]=!0)}if(E=null,g!==void 0&&(l(g),E=""+g),s(u)&&(l(u.key),E=""+u.key),"key"in u){g={};for(var V in u)V!=="key"&&(g[V]=u[V])}else g=u;return E&&t(g,typeof e=="function"?e.displayName||e.name||"Unknown":e),d(e,E,$,W,n(),g,J,S)}function w(e){typeof e=="object"&&e!==null&&e.$$typeof===O&&e._store&&(e._store.validated=1)}var j=h,O=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),G=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),X=Symbol.for("react.consumer"),I=Symbol.for("react.context"),L=Symbol.for("react.forward_ref"),a=Symbol.for("react.suspense"),y=Symbol.for("react.suspense_list"),P=Symbol.for("react.memo"),M=Symbol.for("react.lazy"),U=Symbol.for("react.activity"),z=Symbol.for("react.client.reference"),D=j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,_=Object.prototype.hasOwnProperty,C=Array.isArray,m=console.createTask?console.createTask:function(){return null};j={"react-stack-bottom-frame":function(e){return e()}};var x,Y={},A=j["react-stack-bottom-frame"].bind(j,i)(),N=m(c(i)),q={};H.Fragment=f,H.jsx=function(e,u,g,T,W){var $=1e4>D.recentlyCreatedOwnerStacks++;return v(e,u,g,!1,T,W,$?Error("react-stack-top-frame"):A,$?m(c(e)):N)},H.jsxs=function(e,u,g,T,W){var $=1e4>D.recentlyCreatedOwnerStacks++;return v(e,u,g,!0,T,W,$?Error("react-stack-top-frame"):A,$?m(c(e)):N)}}()),H}var ue;function de(){return ue||(ue=1,process.env.NODE_ENV==="production"?Q.exports=ae():Q.exports=ie()),Q.exports}var fe=de();const te=h.createContext(null);function ne(){const r=h.useContext(te);if(!r)throw new Error("useReactOptimizedDndContext must be used within a ReactOptimizedDndProvider");return r}function me({children:r,onDragStart:o,onDragEnd:l,onDragOver:c}){const n=h.useRef(null),i=h.useRef({}),s=h.useRef({draggingElement:{ref:null,data:null},overElement:{ref:null,data:null}}),t=()=>{if(!n.current)return;const d=n.current.getBoundingClientRect();let v=null,w=1/0;s.current.overElement.ref=null,s.current.overElement.data=null;const j=Object.keys(i.current);for(let O=0;O<j.length;O++){const p=j[O],f=i.current[p],G=f.isOver;if(!f.ref.current)continue;const b=f.ref.current.getBoundingClientRect(),X=d.x<b.x+b.width&&d.x+d.width>b.x&&d.y<b.y+b.height&&d.y+d.height>b.y,I=d.x-b.x,L=d.y-b.y,a=Math.sqrt(I*I+L*L);a<w&&X&&(w=a,v=f),G&&(f.subscriber({isOver:!1}),i.current[p].isOver=!1)}v&&!v.isOver&&(v.subscriber({isOver:!0}),v.isOver=!0,s.current.overElement.ref=v.ref,s.current.overElement.data=v.data,c==null||c(s.current)),requestAnimationFrame(t)},R=(d,v)=>{if(d)n.current=d.current,s.current.draggingElement.ref=d,s.current.draggingElement.data=v,o==null||o(s.current),requestAnimationFrame(t);else if(n.current){n.current=null;for(const w in i.current)i.current[w].subscriber({isOver:!1}),i.current[w].isOver=!1;l==null||l(s.current),s.current.draggingElement.ref=null,s.current.draggingElement.data=null,s.current.overElement.ref=null,s.current.overElement.data=null}};return fe.jsx(te.Provider,{value:{draggingElementRef:n,droppableElementRefsPool:i,setDraggingElement:R},children:r})}const ge=3,ve=120;function he(r){const{data:o,dragThreshold:l=ge,touchDragDelay:c=ve}=r||{},{draggingElementRef:n,setDraggingElement:i}=ne(),s=h.useRef(null),t=h.useRef({mouseOver:!1,mouseDown:!1,dragging:!1,holdStartedX:0,holdStartedY:0,holdStartedScrollX:0,holdStartedScrollY:0}),R=h.useRef({deltaScrollX:0,deltaScrollY:0,deltaMouseX:0,deltaMouseY:0}),[d,v]=h.useState(!1),w=h.useRef(!1);h.useEffect(()=>{if(!w.current){w.current=!0;return}d?i(s,o):i(null,null)},[d]);const[j,O]=h.useState({x:0,y:0}),p=h.useRef(null),f=h.useRef(!1);return h.useEffect(()=>{var z,D,_,C;if(!s.current)return;const b=()=>{t.current.mouseOver=!0},X=()=>{t.current.mouseOver=!1},I=m=>{t.current.mouseDown=!0,t.current.holdStartedX=m.clientX,t.current.holdStartedY=m.clientY,t.current.holdStartedScrollX=window.scrollX,t.current.holdStartedScrollY=window.scrollY},L=()=>{t.current.mouseDown=!1,t.current.dragging=!1,t.current.holdStartedX=0,t.current.holdStartedY=0,t.current.holdStartedScrollX=0,t.current.holdStartedScrollY=0,v(!1),O({x:0,y:0})},a=m=>{const x=window.scrollX-t.current.holdStartedScrollX,Y=window.scrollY-t.current.holdStartedScrollY,A=m.clientX-t.current.holdStartedX,N=m.clientY-t.current.holdStartedY;R.current.deltaMouseX=A,R.current.deltaMouseY=N,R.current.deltaScrollX=x,R.current.deltaScrollY=Y;const q=A+x,e=N+Y;if(t.current.dragging){O({x:q,y:e});return}!n.current&&(Math.abs(q)>l||Math.abs(e)>l)&&t.current.mouseOver&&t.current.mouseDown&&(t.current.dragging=!0,v(!0))},y=()=>{if(t.current.dragging){R.current.deltaScrollX=window.scrollX-t.current.holdStartedScrollX,R.current.deltaScrollY=window.scrollY-t.current.holdStartedScrollY;const m=R.current.deltaMouseX+R.current.deltaScrollX,x=R.current.deltaMouseY+R.current.deltaScrollY;O({x:m,y:x})}},P=m=>{if(!m.touches||m.touches.length!==1)return;const x=m.touches[0];t.current.mouseDown=!0,t.current.mouseOver=!0,t.current.holdStartedX=x.clientX,t.current.holdStartedY=x.clientY,t.current.holdStartedScrollX=window.scrollX,t.current.holdStartedScrollY=window.scrollY,f.current=!1,p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{f.current=!0,t.current.dragging=!0,v(!0)},c)},M=()=>{t.current.mouseDown=!1,t.current.dragging=!1,t.current.mouseOver=!1,t.current.holdStartedX=0,t.current.holdStartedY=0,t.current.holdStartedScrollX=0,t.current.holdStartedScrollY=0,v(!1),O({x:0,y:0}),p.current&&clearTimeout(p.current),f.current=!1},U=m=>{if(!m.touches||m.touches.length!==1)return;const x=m.touches[0],Y=window.scrollX-t.current.holdStartedScrollX,A=window.scrollY-t.current.holdStartedScrollY,N=x.clientX-t.current.holdStartedX,q=x.clientY-t.current.holdStartedY;R.current.deltaMouseX=N,R.current.deltaMouseY=q,R.current.deltaScrollX=Y,R.current.deltaScrollY=A;const e=N+Y,u=q+A;if(!f.current){(Math.abs(e)>l||Math.abs(u)>l)&&(p.current&&clearTimeout(p.current),f.current=!1);return}if(f.current&&t.current.dragging){O({x:e,y:u}),m.preventDefault();return}};return(z=s.current)==null||z.addEventListener("mouseenter",b),(D=s.current)==null||D.addEventListener("mouseleave",X),(_=s.current)==null||_.addEventListener("mousedown",I),document.addEventListener("mouseup",L),document.addEventListener("mousemove",a),document.addEventListener("scroll",y),(C=s.current)==null||C.addEventListener("touchstart",P,{passive:!1}),document.addEventListener("touchend",M,{passive:!1}),document.addEventListener("touchmove",U,{passive:!1}),()=>{var m,x,Y,A;(m=s.current)==null||m.removeEventListener("mouseenter",b),(x=s.current)==null||x.removeEventListener("mouseleave",X),(Y=s.current)==null||Y.removeEventListener("mousedown",I),document.removeEventListener("mouseup",L),document.removeEventListener("mousemove",a),document.removeEventListener("scroll",y),(A=s.current)==null||A.removeEventListener("touchstart",P),document.removeEventListener("touchend",M),document.removeEventListener("touchmove",U)}},[s,l,c,n]),{handleRef:b=>{s.current=b},deltaPos:j,isDragging:d}}var K,le;function Ee(){if(le)return K;le=1;var r="Expected a function",o=NaN,l="[object Symbol]",c=/^\s+|\s+$/g,n=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,s=/^0o[0-7]+$/i,t=parseInt,R=typeof Z=="object"&&Z&&Z.Object===Object&&Z,d=typeof self=="object"&&self&&self.Object===Object&&self,v=R||d||Function("return this")(),w=Object.prototype,j=w.toString,O=Math.max,p=Math.min,f=function(){return v.Date.now()};function G(a,y,P){var M,U,z,D,_,C,m=0,x=!1,Y=!1,A=!0;if(typeof a!="function")throw new TypeError(r);y=L(y)||0,b(P)&&(x=!!P.leading,Y="maxWait"in P,z=Y?O(L(P.maxWait)||0,y):z,A="trailing"in P?!!P.trailing:A);function N(S){var E=M,F=U;return M=U=void 0,m=S,D=a.apply(F,E),D}function q(S){return m=S,_=setTimeout(g,y),x?N(S):D}function e(S){var E=S-C,F=S-m,V=y-E;return Y?p(V,z-F):V}function u(S){var E=S-C,F=S-m;return C===void 0||E>=y||E<0||Y&&F>=z}function g(){var S=f();if(u(S))return T(S);_=setTimeout(g,e(S))}function T(S){return _=void 0,A&&M?N(S):(M=U=void 0,D)}function W(){_!==void 0&&clearTimeout(_),m=0,M=C=U=_=void 0}function $(){return _===void 0?D:T(f())}function J(){var S=f(),E=u(S);if(M=arguments,U=this,C=S,E){if(_===void 0)return q(C);if(Y)return _=setTimeout(g,y),N(C)}return _===void 0&&(_=setTimeout(g,y)),D}return J.cancel=W,J.flush=$,J}function b(a){var y=typeof a;return!!a&&(y=="object"||y=="function")}function X(a){return!!a&&typeof a=="object"}function I(a){return typeof a=="symbol"||X(a)&&j.call(a)==l}function L(a){if(typeof a=="number")return a;if(I(a))return o;if(b(a)){var y=typeof a.valueOf=="function"?a.valueOf():a;a=b(y)?y+"":y}if(typeof a!="string")return a===0?a:+a;a=a.replace(c,"");var P=i.test(a);return P||s.test(a)?t(a.slice(2),P?2:8):n.test(a)?o:+a}return K=G,K}Ee();function Re({threshold:r=0,root:o=null,rootMargin:l="0%",freezeOnceVisible:c=!1,initialIsIntersecting:n=!1,onChange:i}={}){var s;const[t,R]=h.useState(null),[d,v]=h.useState(()=>({isIntersecting:n,entry:void 0})),w=h.useRef();w.current=i;const j=((s=d.entry)==null?void 0:s.isIntersecting)&&c;h.useEffect(()=>{if(!t||!("IntersectionObserver"in window)||j)return;const f=new IntersectionObserver(G=>{const b=Array.isArray(f.thresholds)?f.thresholds:[f.thresholds];G.forEach(X=>{const I=X.isIntersecting&&b.some(L=>X.intersectionRatio>=L);v({isIntersecting:I,entry:X}),w.current&&w.current(I,X)})},{threshold:r,root:o,rootMargin:l});return f.observe(t),()=>{f.disconnect()}},[t,JSON.stringify(r),o,l,j,c]);const O=h.useRef(null);h.useEffect(()=>{var f;!t&&((f=d.entry)!=null&&f.target)&&!c&&!j&&O.current!==d.entry.target&&(O.current=d.entry.target,v({isIntersecting:n,entry:void 0}))},[t,d.entry,c,j,n]);const p=[R,!!d.isIntersecting,d.entry];return p.ref=p[0],p.isIntersecting=p[1],p.entry=p[2],p}const k=[];for(let r=0;r<256;++r)k.push((r+256).toString(16).slice(1));function Se(r,o=0){return(k[r[o+0]]+k[r[o+1]]+k[r[o+2]]+k[r[o+3]]+"-"+k[r[o+4]]+k[r[o+5]]+"-"+k[r[o+6]]+k[r[o+7]]+"-"+k[r[o+8]]+k[r[o+9]]+"-"+k[r[o+10]]+k[r[o+11]]+k[r[o+12]]+k[r[o+13]]+k[r[o+14]]+k[r[o+15]]).toLowerCase()}let ee;const pe=new Uint8Array(16);function be(){if(!ee){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");ee=crypto.getRandomValues.bind(crypto)}return ee(pe)}const re={};function ye(r,o,l){let c;{const n=Date.now(),i=be();xe(re,n,i),c=Te(i,re.msecs,re.seq,o,l)}return o??Se(c)}function xe(r,o,l){return r.msecs??(r.msecs=-1/0),r.seq??(r.seq=0),o>r.msecs?(r.seq=l[6]<<23|l[7]<<16|l[8]<<8|l[9],r.msecs=o):(r.seq=r.seq+1|0,r.seq===0&&r.msecs++),r}function Te(r,o,l,c,n=0){if(r.length<16)throw new Error("Random bytes length must be >= 16");if(!c)c=new Uint8Array(16),n=0;else if(n<0||n+16>c.length)throw new RangeError(`UUID byte range ${n}:${n+15} is out of buffer bounds`);return o??(o=Date.now()),l??(l=r[6]*127<<24|r[7]<<16|r[8]<<8|r[9]),c[n++]=o/1099511627776&255,c[n++]=o/4294967296&255,c[n++]=o/16777216&255,c[n++]=o/65536&255,c[n++]=o/256&255,c[n++]=o&255,c[n++]=112|l>>>28&15,c[n++]=l>>>20&255,c[n++]=128|l>>>14&63,c[n++]=l>>>6&255,c[n++]=l<<2&255|r[10]&3,c[n++]=r[11],c[n++]=r[12],c[n++]=r[13],c[n++]=r[14],c[n++]=r[15],c}function we(r){const{data:o}=r||{},{droppableElementRefsPool:l}=ne(),c=h.useRef(ye()),n=h.useRef(null),[i,s]=h.useState(!1),{isIntersecting:t,ref:R}=Re({threshold:.01});return h.useEffect(()=>{n.current&&(t?l.current[c.current]?l.current[c.current].data=o:l.current[c.current]={ref:n,subscriber:v=>{s(v.isOver)},data:o||null}:l.current[c.current]&&(delete l.current[c.current],s(!1)))},[t,l,o]),{droppableRef:v=>{n.current=v,R(v)},isOver:i}}exports.ReactOptimizedDndContext=te;exports.ReactOptimizedDndProvider=me;exports.useDraggable=he;exports.useDroppable=we;exports.useReactOptimizedDndContext=ne;