New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-true-resizable

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-true-resizable - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

dist/types/types.d.ts

13

dist/react-true-resizable.cjs.js

@@ -1,12 +0,1 @@

"use strict";var Et=Object.defineProperty;var ht=Object.getOwnPropertySymbols;var St=Object.prototype.hasOwnProperty,zt=Object.prototype.propertyIsEnumerable;var pt=(t,r,e)=>r in t?Et(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,Z=(t,r)=>{for(var e in r||(r={}))St.call(r,e)&&pt(t,e,r[e]);if(ht)for(var e of ht(r))zt.call(r,e)&&pt(t,e,r[e]);return t};var s=require("react"),Ht=require("react-fast-compare"),xt=require("react-dom");function rt(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var U=rt(s),Lt=rt(Ht),_t=rt(xt);const jt=t=>{const r=s.useRef(null);let e=r;return(t==null?void 0:t.ref)&&"current"in t.ref&&(r.current=t.ref.current,e=t.ref),e},vt=()=>{const[,t]=s.useState({});return()=>t({})},M=t=>t===void 0?t:JSON.parse(JSON.stringify(t));function F(t,r){for(const e in r)try{r[e].constructor==Object?t[e]=F(t[e],r[e]):t[e]=r[e]}catch{t[e]=r[e]}return t}const Ct=(t,r)=>{const e={};return r.forEach(l=>{e[l]=t[l]}),e},It=["left","top","right","bottom","width","height"],P=(t,r)=>{const[e,l]=s.useState(null);return s.useLayoutEffect(()=>{if(!t||typeof t!="object"||!("getBoundingClientRect"in t))return;const n=Ct(t.getBoundingClientRect(),It);Lt.default(e,n)||l(n)},r),e};var J={exports:{}},k={};/*
object-assign
(c) Sindre Sorhus
@license MIT
*/var yt=Object.getOwnPropertySymbols,Ft=Object.prototype.hasOwnProperty,kt=Object.prototype.propertyIsEnumerable;function qt(t){if(t==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}function Tt(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de",Object.getOwnPropertyNames(t)[0]==="5")return!1;for(var r={},e=0;e<10;e++)r["_"+String.fromCharCode(e)]=e;var l=Object.getOwnPropertyNames(r).map(function(a){return r[a]});if(l.join("")!=="0123456789")return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(a){n[a]=a}),Object.keys(Object.assign({},n)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}Tt();/** @license React v17.0.2
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var Nt=U.default,bt=60103;k.Fragment=60107;if(typeof Symbol=="function"&&Symbol.for){var wt=Symbol.for;bt=wt("react.element"),k.Fragment=wt("react.fragment")}var Yt=Nt.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Bt=Object.prototype.hasOwnProperty,Xt={key:!0,ref:!0,__self:!0,__source:!0};function mt(t,r,e){var l,n={},a=null,i=null;e!==void 0&&(a=""+e),r.key!==void 0&&(a=""+r.key),r.ref!==void 0&&(i=r.ref);for(l in r)Bt.call(r,l)&&!Xt.hasOwnProperty(l)&&(n[l]=r[l]);if(t&&t.defaultProps)for(l in r=t.defaultProps,r)n[l]===void 0&&(n[l]=r[l]);return{$$typeof:bt,type:t,key:a,ref:i,props:n,_owner:Yt.current}}k.jsx=mt;k.jsxs=mt;J.exports=k;const tt=J.exports.jsx,Mt=J.exports.jsxs,Ut=J.exports.Fragment,Jt=U.default.forwardRef(function({nodeRef:r,nodePosition:e,setCalculatedHeight:l,setCalculatedWidth:n,setCalculatedLeft:a,calculatedHeight:i,calculatedWidth:p,setCalculatedTop:m,HandleStyleFn:w,handlesParentPosition:d,handleOptions:v,handlesOptions:L,ResizableProps:y,setEndDraggingOffsetTop:V,setEndDraggingOffsetLeft:_,endDraggingOffsetTop:f,endDraggingOffsetLeft:z,handleStyle:q},lt){var H,x;vt();const[j,A]=s.useState({height:0,width:0}),[b,W]=s.useState({y:0,x:0}),O=(H=v.allowResize.vertical)==null?void 0:H.reverseDrag,R=(x=v.allowResize.horizontal)==null?void 0:x.reverseDrag,[D,E]=s.useState(!1),[T,$]=s.useState(0),S=s.useRef(null),G=P(S.current),N=u=>{let o=u.clientY-b.y;return y.grid&&(o-=u.clientY%y.grid-b.y%y.grid),o},Y=u=>{let o=u.clientX-b.x;return y.grid&&(o-=u.clientX%y.grid-b.x%y.grid),o},K=u=>{var h,I;E(!0),(h=S.current)==null||h.setPointerCapture(u.pointerId),$(u.pointerId);const o=(I=r==null?void 0:r.current)==null?void 0:I.getBoundingClientRect();A({width:o.width,height:o.height}),W({x:u.clientX,y:u.clientY})},Q=u=>{var o;if((o=S.current)==null||o.releasePointerCapture(T),E(!1),O){let h=N(u)+f;i&&i<0&&(h+=i),V(h)}if(R){let h=Y(u)+z;p&&p<0&&(h+=p),_(h)}},C=u=>{if(D){if("vertical"in v.allowResize){const o=O?-1:1;let h=j.height-(b.y-u.clientY)*o;y.grid&&(h-=(u.clientY%y.grid-b.y%y.grid)*o),y.enableRelativeOffset&&o===-1&&h>0&&m(N(u)+f),l(h)}if("horizontal"in v.allowResize){const o=R?-1:1;let h=j.width-(b.x-u.clientX)*o;y.grid&&(h-=(u.clientX%y.grid-b.x%y.grid)*o),y.enableRelativeOffset&&o===-1&&h>0&&a(Y(u)+z),n(h)}}},B=w({nodePosition:e,handlerPos:G,handlesParentPosition:d,handlerSize:v.size,handlesOptions:L});return tt("div",{ref:S,style:Z(Z({position:"absolute"},B),q),onPointerMove:C,onPointerDown:K,onPointerUp:Q})}),g=(t,r=1)=>{const e=10**r;return Math.round(t*e)/e},dt=(t,r)=>t.filter(e=>!r.includes(e)),Vt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l,handlesOptions:n})=>{var i,p,m,w,d,v;if(!t||!r||!e)return{};let a=t.top-e.top;return{top:g(a),left:g(t.left-e.left+((p=(i=n.left)==null?void 0:i.size)!=null?p:0)),cursor:"ns-resize",width:g((t==null?void 0:t.width)-((w=(m=n.left)==null?void 0:m.size)!=null?w:0)-((v=(d=n.right)==null?void 0:d.size)!=null?v:0)),height:l}},At=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l,handlesOptions:n})=>{var i,p,m,w,d,v;if(!t||!r||!e)return{};let a=t.top+t.height-e.top-l;return{top:g(a),left:g(t.left-e.left+((p=(i=n.left)==null?void 0:i.size)!=null?p:0)),cursor:"ns-resize",width:g((t==null?void 0:t.width)-((w=(m=n.left)==null?void 0:m.size)!=null?w:0)-((v=(d=n.right)==null?void 0:d.size)!=null?v:0)),height:l}},Wt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>!t||!r||!e?{}:{top:t.top-e.top,left:t.left-e.left,cursor:"ew-resize",height:t==null?void 0:t.height,width:l},$t=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>{if(!t||!r||!e)return{};let n=t.width-l-(e.left-t.left);return{top:g(t.top-e.top),left:g(n),cursor:"ew-resize",height:g(t==null?void 0:t.height),width:g(l)}},Gt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>{if(!t||!r||!e)return{};let n=t.width-l-(e.left-t.left);return{top:g(t.top-e.top+t.height-l),left:g(n),cursor:"nwse-resize",height:g(l),width:g(l)}},Kt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>!t||!r||!e?{}:{top:t.height+-l+t.top-e.top,left:t.left-e.left,cursor:"nesw-resize",height:l,width:l},Qt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>{if(!t||!r||!e)return{};let n=t.width-l-(e.left-t.left);return{top:g(t.top-e.top),left:g(n),cursor:"nesw-resize",height:g(l),width:g(l)}},Zt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>!t||!r||!e?{}:{top:g(t.top-e.top),left:g(t.left-e.left),cursor:"nwse-resize",height:g(l),width:g(l)},et={top:Vt,left:Wt,bottom:At,right:$t,bottomRight:Gt,bottomLeft:Kt,topRight:Qt,topLeft:Zt},Ot=U.default.forwardRef(function(r,e){var I,ft,nt,it,st,ct,ut;let{grid:l,children:n,onResizeEffect:a,enabledHandles:i=Object.keys(et),handlerOptions:p={},handlersOptions:m={},disableHeightControl:w=!1,disableWidthControl:d=!1,handleStyle:v={},handlesStyle:L={}}=r,y=F(M(te),m),V=F(M(Pt),p);const _=vt();let f=jt(n);r.nodeRef&&(f=r.nodeRef),e&&typeof e=="object"&&f&&(e.current=f.current);const z=P(f.current),q=s.useRef(null),lt=P(q.current),[j,A]=s.useState(""),[b,W]=s.useState(""),[O,R]=s.useState(void 0),[D,E]=s.useState(void 0),[T,$]=s.useState(0),[S,G]=s.useState(0),[N,Y]=s.useState(0),[K,Q]=s.useState(0);let C={};for(const c of i)c in y&&(C[c]=F(M(V),y[c]));let B={};for(const c of i)B[c]=F(M(v),(I=L==null?void 0:L[c])!=null?I:{});const H=!d&&!!i.find(c=>c.toLowerCase().includes("left")||c.toLowerCase().includes("right")),x=!w&&!!i.find(c=>c.toLowerCase().includes("top")||c.toLowerCase().includes("bottom"));s.useLayoutEffect(()=>{f.current&&!x&&R(null),f.current&&O&&(f.current.style.height=j)},[x]),s.useLayoutEffect(()=>{f.current&&!H&&E(null),f.current&&D&&(f.current.style.width=b)},[H]),s.useImperativeHandle(r.ResizableRef,()=>({restControl:(c=!0,X=!0)=>{f.current&&c&&(R(null),f.current.style.height=j),f.current&&X&&(E(null),f.current.style.width=b)}})),s.useLayoutEffect(()=>(window.addEventListener("resize",_),()=>{window.removeEventListener("resize",_)}),[]),s.useLayoutEffect(()=>{var c,X,at,ot,gt;if(f.current){let{height:Dt,width:Rt}=(at=(X=(c=f.current)==null?void 0:c.getBoundingClientRect)==null?void 0:X.call(c))!=null?at:{};R(Dt),E(Rt),A((ot=f.current)==null?void 0:ot.style.height),W((gt=f.current)==null?void 0:gt.style.width)}},[f.current]),s.useLayoutEffect(()=>{a&&a(z)},[O,D]);const u=x&&(it=O!=null?O:(nt=(ft=f==null?void 0:f.current)==null?void 0:ft.style)==null?void 0:nt.height)!=null?it:void 0,o=H&&(ut=D!=null?D:(ct=(st=f==null?void 0:f.current)==null?void 0:st.style)==null?void 0:ct.width)!=null?ut:void 0;f!=null&&f.current&&(!w&&!!u&&(f.current.style.height=u+"px",r.enableRelativeOffset&&(f.current.style.top=S+"px")),!d&&!!o&&(f.current.style.width=o+"px",r.enableRelativeOffset&&(f.current.style.left=T+"px"))),s.useEffect(()=>{f!=null&&f.current&&(f.current.style.boxSizing="border-box")},[f.current]),s.useEffect(()=>{_()},[r.enabledHandles,w,d]),w&&(i=dt(i,["top","bottom"])),d&&(i=dt(i,["left","right"]));const h=w&&d;return h&&(i=[]),Mt(Ut,{children:[n&&U.default.cloneElement(n,{ref:f,key:"ResizableNode"},n==null?void 0:n.props.children),f.current&&!h&&_t.default.createPortal(tt("div",{style:{position:"absolute"},ref:q,children:z&&i.map(c=>tt(Jt,{nodeRef:f,nodePosition:z,setCalculatedHeight:R,setCalculatedWidth:E,calculatedHeight:O,calculatedWidth:D,setCalculatedLeft:$,setCalculatedTop:G,setEndDraggingOffsetTop:Y,setEndDraggingOffsetLeft:Q,endDraggingOffsetTop:N,endDraggingOffsetLeft:K,calculatedLeft:T,calculatedTop:S,HandleStyleFn:et[c],handlesParentPosition:lt,handleOptions:C[c],handlesOptions:C,handleStyle:B[c],ResizableProps:r},c))},"ResizableHandlerParent"),f.current)]})}),Pt={size:10},te={top:{allowResize:{vertical:{reverseDrag:!0}}},left:{allowResize:{horizontal:{reverseDrag:!0}}},bottom:{allowResize:{vertical:{reverseDrag:!1}}},right:{allowResize:{horizontal:{reverseDrag:!1}}},bottomRight:{allowResize:{horizontal:{reverseDrag:!1},vertical:{reverseDrag:!1}}},bottomLeft:{allowResize:{horizontal:{reverseDrag:!0},vertical:{reverseDrag:!1}}},topRight:{allowResize:{horizontal:{reverseDrag:!1},vertical:{reverseDrag:!0}}},topLeft:{allowResize:{horizontal:{reverseDrag:!0},vertical:{reverseDrag:!0}}}};Ot.defaultProps={enabledHandles:Object.keys(et)};module.exports=Ot;
"use strict";var zt=Object.defineProperty;var ut=Object.getOwnPropertySymbols;var Dt=Object.prototype.hasOwnProperty,mt=Object.prototype.propertyIsEnumerable;var at=(t,l,e)=>l in t?zt(t,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[l]=e,rt=(t,l)=>{for(var e in l||(l={}))Dt.call(l,e)&&at(t,e,l[e]);if(ut)for(var e of ut(l))mt.call(l,e)&&at(t,e,l[e]);return t};var c=require("react"),Ht=require("react-fast-compare"),Et=require("react-dom");function ft(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var p=ft(c),Rt=ft(Ht),St=ft(Et);const Lt=t=>{const l=c.useRef(null);let e=l;return(t==null?void 0:t.ref)&&"current"in t.ref&&(l.current=t.ref.current,e=t.ref),e},gt=()=>{const[,t]=c.useState({});return()=>t({})},Q=t=>t===void 0?t:JSON.parse(JSON.stringify(t));function W(t,l){for(const e in l)try{l[e].constructor==Object?t[e]=W(t[e],l[e]):t[e]=l[e]}catch{t[e]=l[e]}return t}const pt=(t,l)=>{const e={};return l.forEach(f=>{e[f]=t[f]}),e},xt=["left","top","right","bottom","width","height"],lt=(t,l)=>{const[e,f]=c.useState(null);return c.useLayoutEffect(()=>{if(!t||typeof t!="object"||!("getBoundingClientRect"in t))return;const i=pt(t.getBoundingClientRect(),xt);Rt.default(e,i)||f(i)},l),e},st=(t,l)=>{var e,f;return typeof t=="object"?{horizontal:(e=t==null?void 0:t.horizontal)!=null?e:l,vertical:(f=t==null?void 0:t.vertical)!=null?f:l}:{horizontal:t!=null?t:l,vertical:t!=null?t:l}},Ot=p.default.forwardRef(function({nodeRef:l,nodePosition:e,setCalculatedHeight:f,setCalculatedWidth:i,setCalculatedLeft:H,calculatedHeight:s,calculatedWidth:d,setCalculatedTop:D,HandleStyleFn:o,handlesParentPosition:m,handleOptions:h,handlesOptions:C,ResizableProps:r,setEndDraggingOffsetTop:I,setEndDraggingOffsetLeft:M,endDraggingOffsetTop:_,endDraggingOffsetLeft:k,handleStyle:V},Z){var J,$;gt();const[G,E]=c.useState({height:0,width:0}),[v,R]=c.useState({y:0,x:0}),x=(J=h.allowResize.vertical)==null?void 0:J.reverseDrag,q=($=h.allowResize.horizontal)==null?void 0:$.reverseDrag,[j,X]=c.useState(!1),[P,tt]=c.useState(0),F=c.useRef(null),et=lt(F.current),y=st(r.grid),Y=st(r.resizeRatio,wt.resizeRatio),T=u=>{let g=u.clientY-v.y;return y.vertical&&(g-=u.clientY%y.vertical-v.y%y.vertical),g},S=u=>{let g=u.clientX-v.x;return y.horizontal&&(g-=u.clientX%y.horizontal-v.x%y.horizontal),g},O=u=>{var w;X(!0),(w=F.current)==null||w.setPointerCapture(u.pointerId),tt(u.pointerId);const g=e;E({width:g.width,height:g.height}),R({x:u.clientX,y:u.clientY}),typeof(r==null?void 0:r.onResizeStart)=="function"&&r.onResizeStart(e)},B=u=>{var g;if((g=F.current)==null||g.releasePointerCapture(P),X(!1),x){let w=T(u)+_;s&&s<0&&(w+=s),I(w)}if(q){let w=S(u)+k;d&&d<0&&(w+=d),M(w)}typeof(r==null?void 0:r.onResizeEnd)=="function"&&r.onResizeEnd(e)},A=u=>{var g,w,N,U;if(j){const b=x?-1:1;let L=G.height-(v.y-u.clientY)*b*Y.vertical;y.vertical&&(L-=(u.clientY%y.vertical-v.y%y.vertical)*b),r.enableRelativeOffset&&b===-1&&L>0&&D(T(u)+_);const n=q?-1:1;let z=G.width-(v.x-u.clientX)*n*Y.horizontal;y.horizontal&&(z-=(u.clientX%y.horizontal-v.x%y.horizontal)*n),r.enableRelativeOffset&&n===-1&&z>0&&H(S(u)+k),"vertical"in h.allowResize&&(f(L),typeof(r==null?void 0:r.onResize)=="object"&&((w=(g=r.onResize).vertical)==null||w.call(g,{height:L},e))),"horizontal"in h.allowResize&&(i(z),typeof(r==null?void 0:r.onResize)=="object"&&((U=(N=r.onResize).horizontal)==null||U.call(N,{width:z},e))),typeof(r==null?void 0:r.onResize)=="function"&&r.onResize({height:L,width:z},e)}},K=o({nodePosition:e,handlePos:et,handlesParentPosition:m,handleSize:h.size,handlesOptions:C});return p.default.createElement("div",{ref:F,style:rt(rt({position:"absolute"},K),V),onPointerMove:A,onPointerDown:O,onPointerUp:B})}),a=(t,l=1)=>{const e=10**l;return Math.round(t*e)/e},ot=(t,l)=>t.filter(e=>!l.includes(e)),Ct=({nodePosition:t,handlePos:l,handlesParentPosition:e,handleSize:f,handlesOptions:i})=>{var s,d,D,o,m,h;if(!t||!l||!e)return{};let H=t.top-e.top;return{top:a(H),left:a(t.left-e.left+((d=(s=i.left)==null?void 0:s.size)!=null?d:0)),cursor:"ns-resize",width:a((t==null?void 0:t.width)-((o=(D=i.left)==null?void 0:D.size)!=null?o:0)-((h=(m=i.right)==null?void 0:m.size)!=null?h:0)),height:f}},It=({nodePosition:t,handlePos:l,handlesParentPosition:e,handleSize:f,handlesOptions:i})=>{var s,d,D,o,m,h;if(!t||!l||!e)return{};let H=t.top+t.height-e.top-f;return{top:a(H),left:a(t.left-e.left+((d=(s=i.left)==null?void 0:s.size)!=null?d:0)),cursor:"ns-resize",width:a((t==null?void 0:t.width)-((o=(D=i.left)==null?void 0:D.size)!=null?o:0)-((h=(m=i.right)==null?void 0:m.size)!=null?h:0)),height:f}},Ft=({nodePosition:t,handlePos:l,handlesParentPosition:e,handleSize:f})=>!t||!l||!e?{}:{top:t.top-e.top,left:t.left-e.left,cursor:"ew-resize",height:t==null?void 0:t.height,width:f},bt=({nodePosition:t,handlePos:l,handlesParentPosition:e,handleSize:f})=>{if(!t||!l||!e)return{};let i=t.width-f-(e.left-t.left);return{top:a(t.top-e.top),left:a(i),cursor:"ew-resize",height:a(t==null?void 0:t.height),width:a(f)}},Mt=({nodePosition:t,handlePos:l,handlesParentPosition:e,handleSize:f})=>{if(!t||!l||!e)return{};let i=t.width-f-(e.left-t.left);return{top:a(t.top-e.top+t.height-f),left:a(i),cursor:"nwse-resize",height:a(f),width:a(f)}},_t=({nodePosition:t,handlePos:l,handlesParentPosition:e,handleSize:f})=>!t||!l||!e?{}:{top:t.height+-f+t.top-e.top,left:t.left-e.left,cursor:"nesw-resize",height:f,width:f},kt=({nodePosition:t,handlePos:l,handlesParentPosition:e,handleSize:f})=>{if(!t||!l||!e)return{};let i=t.width-f-(e.left-t.left);return{top:a(t.top-e.top),left:a(i),cursor:"nesw-resize",height:a(f),width:a(f)}},qt=({nodePosition:t,handlePos:l,handlesParentPosition:e,handleSize:f})=>!t||!l||!e?{}:{top:a(t.top-e.top),left:a(t.left-e.left),cursor:"nwse-resize",height:a(f),width:a(f)},ht={top:Ct,left:Ft,bottom:It,right:bt,bottomRight:Mt,bottomLeft:_t,topRight:kt,topLeft:qt},yt=p.default.forwardRef(function(l,e){var u,g,w,N,U,b,L;const f=l;let{children:i,onResizeEffect:H,enabledHandles:s,handleOptions:d,handlesOptions:D,disableControl:o,handleStyle:m,handlesStyle:h}=f;const C=gt();let r=Lt(i);f.nodeRef&&(r=f.nodeRef),e&&typeof e=="object"&&r&&(e.current=r.current);const I=lt(r.current),M=c.useRef(null),_=lt(M.current),[k,V]=c.useState(""),[Z,G]=c.useState(""),[E,v]=c.useState(void 0),[R,x]=c.useState(void 0),[q,j]=c.useState(0),[X,P]=c.useState(0),[tt,F]=c.useState(0),[et,y]=c.useState(0),Y=Yt(s,d,D);let T={};for(const n of s)T[n]=W(Q(m),(u=h==null?void 0:h[n])!=null?u:{});const S=typeof o=="boolean"?o:o==null?void 0:o.horizontal,O=typeof o=="boolean"?o:o==null?void 0:o.vertical,B=!S&&!!s.find(n=>n.toLowerCase().includes("left")||n.toLowerCase().includes("right")),A=!O&&!!s.find(n=>n.toLowerCase().includes("top")||n.toLowerCase().includes("bottom"));c.useLayoutEffect(()=>{r.current&&!A&&v(null),r.current&&E&&(r.current.style.height=k)},[A]),c.useLayoutEffect(()=>{r.current&&!B&&x(null),r.current&&R&&(r.current.style.width=Z)},[B]),c.useImperativeHandle(f.ResizableRef,()=>({restControl:(n=!0,z=!0)=>{r.current&&n&&(v(null),r.current.style.height=k),r.current&&z&&(x(null),r.current.style.width=Z)},nodeRef:r,nodePosition:I,handleParentRef:M,handlesParentPosition:_,render:C})),c.useLayoutEffect(()=>(window.addEventListener("resize",C),()=>{window.removeEventListener("resize",C)}),[]),c.useLayoutEffect(()=>{var n,z,it,ct,nt;if(r.current){let{height:vt,width:dt}=(it=(z=(n=r.current)==null?void 0:n.getBoundingClientRect)==null?void 0:z.call(n))!=null?it:{};v(vt),x(dt),V((ct=r.current)==null?void 0:ct.style.height),G((nt=r.current)==null?void 0:nt.style.width)}},[r.current]),c.useLayoutEffect(()=>{H&&H(I)},[E,R]);const K=A&&(N=E!=null?E:(w=(g=r==null?void 0:r.current)==null?void 0:g.style)==null?void 0:w.height)!=null?N:void 0,J=B&&(L=R!=null?R:(b=(U=r==null?void 0:r.current)==null?void 0:U.style)==null?void 0:b.width)!=null?L:void 0;r!=null&&r.current&&(f.height?r.current.style.height=typeof f.height=="number"?`${f.height}px`:f.height:!O&&!!K&&(r.current.style.height=K+"px",f.enableRelativeOffset&&(r.current.style.top=X+"px")),f.width?r.current.style.width=typeof f.width=="number"?`${f.width}px`:f.width:!S&&!!J&&(r.current.style.width=J+"px",f.enableRelativeOffset&&(r.current.style.left=q+"px"))),c.useEffect(()=>{r!=null&&r.current&&(r.current.style.boxSizing="border-box")},[r.current]),c.useEffect(()=>{C()},[f.enabledHandles,O,S]),O&&(s=ot(s,["top","bottom"])),S&&(s=ot(s,["left","right"]));const $=O&&S;return $&&(s=[]),p.default.createElement(p.default.Fragment,null,i&&p.default.cloneElement(i,{ref:r,key:"ResizableNode"},i==null?void 0:i.props.children),r.current&&!$&&St.default.createPortal(p.default.createElement("div",{style:{position:"absolute"},ref:M,key:"ResizableHandleParent"},I&&s.map(n=>p.default.createElement(Ot,{key:n,nodeRef:r,nodePosition:I,setCalculatedHeight:v,setCalculatedWidth:x,calculatedHeight:E,calculatedWidth:R,setCalculatedLeft:j,setCalculatedTop:P,setEndDraggingOffsetTop:F,setEndDraggingOffsetLeft:y,endDraggingOffsetTop:tt,endDraggingOffsetLeft:et,calculatedLeft:q,calculatedTop:X,HandleStyleFn:ht[n],handlesParentPosition:_,handleOptions:Y[n],handlesOptions:Y,handleStyle:T[n],ResizableProps:f}))),r.current))}),wt={enabledHandles:Object.keys(ht),handleOptions:{},handlesOptions:{},disableControl:!1,handleStyle:{},handlesStyle:{},resizeRatio:1};yt.defaultProps=wt;const Xt=(t,l,e)=>{let f={};for(const i of t)i in l&&(f[i]=W(Q(e),l[i]));return f},Yt=(t,l,e)=>{let f=c.useMemo(()=>W(Q(Bt),e),[e]),i=c.useMemo(()=>W(Q(Tt),l),[l]);return c.useMemo(()=>Xt(t,f,i),[t,e,l])},Tt={size:10},Bt={top:{allowResize:{vertical:{reverseDrag:!0}}},left:{allowResize:{horizontal:{reverseDrag:!0}}},bottom:{allowResize:{vertical:{reverseDrag:!1}}},right:{allowResize:{horizontal:{reverseDrag:!1}}},bottomRight:{allowResize:{horizontal:{reverseDrag:!1},vertical:{reverseDrag:!1}}},bottomLeft:{allowResize:{horizontal:{reverseDrag:!0},vertical:{reverseDrag:!1}}},topRight:{allowResize:{horizontal:{reverseDrag:!1},vertical:{reverseDrag:!0}}},topLeft:{allowResize:{horizontal:{reverseDrag:!0},vertical:{reverseDrag:!0}}}};module.exports=yt;

544

dist/react-true-resizable.es.js
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;

@@ -17,3 +19,4 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;

};
import React, { useRef, useState, useLayoutEffect, useImperativeHandle, useEffect } from "react";
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import React, { useRef, useState, useLayoutEffect, useImperativeHandle, useEffect, useMemo } from "react";
import isEqual from "react-fast-compare";

@@ -40,11 +43,11 @@ import ReactDOM from "react-dom";

function mergeRecursive(obj1, obj2) {
for (const p2 in obj2) {
for (const p in obj2) {
try {
if (obj2[p2].constructor == Object) {
obj1[p2] = mergeRecursive(obj1[p2], obj2[p2]);
if (obj2[p].constructor == Object) {
obj1[p] = mergeRecursive(obj1[p], obj2[p]);
} else {
obj1[p2] = obj2[p2];
obj1[p] = obj2[p];
}
} catch (e) {
obj1[p2] = obj2[p2];
obj1[p] = obj2[p];
}

@@ -74,108 +77,10 @@ }

};
var jsxRuntime = { exports: {} };
var reactJsxRuntime_production_min = {};
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
function toObject(val) {
if (val === null || val === void 0) {
throw new TypeError("Object.assign cannot be called with null or undefined");
const parsePossiblyAxis = (prop, defaultValue) => {
var _a, _b;
if (typeof prop === "object") {
return { horizontal: (_a = prop == null ? void 0 : prop.horizontal) != null ? _a : defaultValue, vertical: (_b = prop == null ? void 0 : prop.vertical) != null ? _b : defaultValue };
} else {
return { horizontal: prop != null ? prop : defaultValue, vertical: prop != null ? prop : defaultValue };
}
return Object(val);
}
function shouldUseNative() {
try {
if (!Object.assign) {
return false;
}
var test1 = new String("abc");
test1[5] = "de";
if (Object.getOwnPropertyNames(test1)[0] === "5") {
return false;
}
var test2 = {};
for (var i = 0; i < 10; i++) {
test2["_" + String.fromCharCode(i)] = i;
}
var order2 = Object.getOwnPropertyNames(test2).map(function(n2) {
return test2[n2];
});
if (order2.join("") !== "0123456789") {
return false;
}
var test3 = {};
"abcdefghijklmnopqrst".split("").forEach(function(letter) {
test3[letter] = letter;
});
if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
return false;
}
return true;
} catch (err) {
return false;
}
}
shouldUseNative() ? Object.assign : function(target, source) {
var from;
var to = toObject(target);
var symbols;
for (var s = 1; s < arguments.length; s++) {
from = Object(arguments[s]);
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
if (getOwnPropertySymbols) {
symbols = getOwnPropertySymbols(from);
for (var i = 0; i < symbols.length; i++) {
if (propIsEnumerable.call(from, symbols[i])) {
to[symbols[i]] = from[symbols[i]];
}
}
}
}
return to;
};
/** @license React v17.0.2
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var f = React, g = 60103;
reactJsxRuntime_production_min.Fragment = 60107;
if (typeof Symbol === "function" && Symbol.for) {
var h = Symbol.for;
g = h("react.element");
reactJsxRuntime_production_min.Fragment = h("react.fragment");
}
var m = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, n = Object.prototype.hasOwnProperty, p = { key: true, ref: true, __self: true, __source: true };
function q(c, a, k) {
var b, d = {}, e = null, l = null;
k !== void 0 && (e = "" + k);
a.key !== void 0 && (e = "" + a.key);
a.ref !== void 0 && (l = a.ref);
for (b in a)
n.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
if (c && c.defaultProps)
for (b in a = c.defaultProps, a)
d[b] === void 0 && (d[b] = a[b]);
return { $$typeof: g, type: c, key: e, ref: l, props: d, _owner: m.current };
}
reactJsxRuntime_production_min.jsx = q;
reactJsxRuntime_production_min.jsxs = q;
{
jsxRuntime.exports = reactJsxRuntime_production_min;
}
const jsx = jsxRuntime.exports.jsx;
const jsxs = jsxRuntime.exports.jsxs;
const Fragment = jsxRuntime.exports.Fragment;
const Handle = React.forwardRef(function HandleForward({

@@ -215,8 +120,10 @@ nodeRef,

const [pointerId, setPointerId] = useState(0);
const handlerRef = useRef(null);
const handlerPos = usePosition(handlerRef.current);
const handleRef = useRef(null);
const handlePos = usePosition(handleRef.current);
const grid = parsePossiblyAxis(ResizableProps2.grid);
const resizeRatio = parsePossiblyAxis(ResizableProps2.resizeRatio, ResizableDefaultProps.resizeRatio);
const getEnableRelativeOffsetTop = (event) => {
let top = event.clientY - initialDraggingPointerPos.y;
if (ResizableProps2.grid)
top -= event.clientY % ResizableProps2.grid - initialDraggingPointerPos.y % ResizableProps2.grid;
if (grid.vertical)
top -= event.clientY % grid.vertical - initialDraggingPointerPos.y % grid.vertical;
return top;

@@ -226,12 +133,12 @@ };

let left = event.clientX - initialDraggingPointerPos.x;
if (ResizableProps2.grid)
left -= event.clientX % ResizableProps2.grid - initialDraggingPointerPos.x % ResizableProps2.grid;
if (grid.horizontal)
left -= event.clientX % grid.horizontal - initialDraggingPointerPos.x % grid.horizontal;
return left;
};
const onPointerDown = (event) => {
var _a2, _b2;
var _a2;
setIsDragging(true);
(_a2 = handlerRef.current) == null ? void 0 : _a2.setPointerCapture(event.pointerId);
(_a2 = handleRef.current) == null ? void 0 : _a2.setPointerCapture(event.pointerId);
setPointerId(event.pointerId);
const dims = (_b2 = nodeRef == null ? void 0 : nodeRef.current) == null ? void 0 : _b2.getBoundingClientRect();
const dims = nodePosition;
setInitialDraggingElementSize({

@@ -245,6 +152,8 @@ width: dims.width,

});
if (typeof (ResizableProps2 == null ? void 0 : ResizableProps2.onResizeStart) === "function")
ResizableProps2.onResizeStart(nodePosition);
};
const onPointerUp = (event) => {
var _a2;
(_a2 = handlerRef.current) == null ? void 0 : _a2.releasePointerCapture(pointerId);
(_a2 = handleRef.current) == null ? void 0 : _a2.releasePointerCapture(pointerId);
setIsDragging(false);

@@ -263,27 +172,36 @@ if (reverseVerticalDrag) {

}
if (typeof (ResizableProps2 == null ? void 0 : ResizableProps2.onResizeEnd) === "function")
ResizableProps2.onResizeEnd(nodePosition);
};
const onPointerMove = (event) => {
var _a2, _b2, _c, _d;
if (isDragging) {
const dragDirVertical = reverseVerticalDrag ? -1 : 1;
let height = initialDraggingElementSize.height - (initialDraggingPointerPos.y - event.clientY) * dragDirVertical * resizeRatio.vertical;
if (grid.vertical)
height -= (event.clientY % grid.vertical - initialDraggingPointerPos.y % grid.vertical) * dragDirVertical;
if (ResizableProps2.enableRelativeOffset && dragDirVertical === -1) {
if (height > 0)
setCalculatedTop(getEnableRelativeOffsetTop(event) + endDraggingOffsetTop);
}
const dragDirHorizontal = reverseHorizontalDrag ? -1 : 1;
let width = initialDraggingElementSize.width - (initialDraggingPointerPos.x - event.clientX) * dragDirHorizontal * resizeRatio.horizontal;
if (grid.horizontal)
width -= (event.clientX % grid.horizontal - initialDraggingPointerPos.x % grid.horizontal) * dragDirHorizontal;
if (ResizableProps2.enableRelativeOffset && dragDirHorizontal === -1) {
if (width > 0)
setCalculatedLeft(getEnableRelativeOffsetLeft(event) + endDraggingOffsetLeft);
}
if ("vertical" in handleOptions.allowResize) {
const dragDirVertical = reverseVerticalDrag ? -1 : 1;
let height = initialDraggingElementSize.height - (initialDraggingPointerPos.y - event.clientY) * dragDirVertical;
if (ResizableProps2.grid)
height -= (event.clientY % ResizableProps2.grid - initialDraggingPointerPos.y % ResizableProps2.grid) * dragDirVertical;
if (ResizableProps2.enableRelativeOffset && dragDirVertical === -1) {
if (height > 0)
setCalculatedTop(getEnableRelativeOffsetTop(event) + endDraggingOffsetTop);
}
setCalculatedHeight(height);
if (typeof (ResizableProps2 == null ? void 0 : ResizableProps2.onResize) === "object")
(_b2 = (_a2 = ResizableProps2.onResize).vertical) == null ? void 0 : _b2.call(_a2, { height }, nodePosition);
}
if ("horizontal" in handleOptions.allowResize) {
const dragDirHorizontal = reverseHorizontalDrag ? -1 : 1;
let width = initialDraggingElementSize.width - (initialDraggingPointerPos.x - event.clientX) * dragDirHorizontal;
if (ResizableProps2.grid)
width -= (event.clientX % ResizableProps2.grid - initialDraggingPointerPos.x % ResizableProps2.grid) * dragDirHorizontal;
if (ResizableProps2.enableRelativeOffset && dragDirHorizontal === -1) {
if (width > 0)
setCalculatedLeft(getEnableRelativeOffsetLeft(event) + endDraggingOffsetLeft);
}
setCalculatedWidth(width);
if (typeof (ResizableProps2 == null ? void 0 : ResizableProps2.onResize) === "object")
(_d = (_c = ResizableProps2.onResize).horizontal) == null ? void 0 : _d.call(_c, { width }, nodePosition);
}
if (typeof (ResizableProps2 == null ? void 0 : ResizableProps2.onResize) === "function")
ResizableProps2.onResize({ height, width }, nodePosition);
}

@@ -293,9 +211,9 @@ };

nodePosition,
handlerPos,
handlePos,
handlesParentPosition,
handlerSize: handleOptions.size,
handleSize: handleOptions.size,
handlesOptions
});
return /* @__PURE__ */ jsx("div", {
ref: handlerRef,
return /* @__PURE__ */ React.createElement("div", {
ref: handleRef,
style: __spreadValues(__spreadValues({

@@ -316,11 +234,11 @@ position: "absolute"

};
const topHandlerStyle = ({
const topHandleStyle = ({
nodePosition,
handlerPos,
handlePos,
handlesParentPosition,
handlerSize,
handleSize,
handlesOptions
}) => {
var _a, _b, _c, _d, _e, _f;
if (!nodePosition || !handlerPos || !handlesParentPosition)
if (!nodePosition || !handlePos || !handlesParentPosition)
return {};

@@ -333,16 +251,16 @@ let top = nodePosition.top - handlesParentPosition.top;

width: round((nodePosition == null ? void 0 : nodePosition.width) - ((_d = (_c = handlesOptions.left) == null ? void 0 : _c.size) != null ? _d : 0) - ((_f = (_e = handlesOptions.right) == null ? void 0 : _e.size) != null ? _f : 0)),
height: handlerSize
height: handleSize
};
};
const bottomHandlerStyle = ({
const bottomHandleStyle = ({
nodePosition,
handlerPos,
handlePos,
handlesParentPosition,
handlerSize,
handleSize,
handlesOptions
}) => {
var _a, _b, _c, _d, _e, _f;
if (!nodePosition || !handlerPos || !handlesParentPosition)
if (!nodePosition || !handlePos || !handlesParentPosition)
return {};
let top = nodePosition.top + nodePosition.height - handlesParentPosition.top - handlerSize;
let top = nodePosition.top + nodePosition.height - handlesParentPosition.top - handleSize;
return {

@@ -353,12 +271,7 @@ top: round(top),

width: round((nodePosition == null ? void 0 : nodePosition.width) - ((_d = (_c = handlesOptions.left) == null ? void 0 : _c.size) != null ? _d : 0) - ((_f = (_e = handlesOptions.right) == null ? void 0 : _e.size) != null ? _f : 0)),
height: handlerSize
height: handleSize
};
};
const leftHandlerStyle = ({
nodePosition,
handlerPos,
handlesParentPosition,
handlerSize
}) => {
if (!nodePosition || !handlerPos || !handlesParentPosition)
const leftHandleStyle = ({ nodePosition, handlePos, handlesParentPosition, handleSize }) => {
if (!nodePosition || !handlePos || !handlesParentPosition)
return {};

@@ -370,14 +283,9 @@ return {

height: nodePosition == null ? void 0 : nodePosition.height,
width: handlerSize
width: handleSize
};
};
const rightHandlerStyle = ({
nodePosition,
handlerPos,
handlesParentPosition,
handlerSize
}) => {
if (!nodePosition || !handlerPos || !handlesParentPosition)
const rightHandleStyle = ({ nodePosition, handlePos, handlesParentPosition, handleSize }) => {
if (!nodePosition || !handlePos || !handlesParentPosition)
return {};
let left = nodePosition.width - handlerSize - (handlesParentPosition.left - nodePosition.left);
let left = nodePosition.width - handleSize - (handlesParentPosition.left - nodePosition.left);
return {

@@ -388,47 +296,47 @@ top: round(nodePosition.top - handlesParentPosition.top),

height: round(nodePosition == null ? void 0 : nodePosition.height),
width: round(handlerSize)
width: round(handleSize)
};
};
const bottomRightHandlerStyle = ({
const bottomRightHandleStyle = ({
nodePosition,
handlerPos,
handlePos,
handlesParentPosition,
handlerSize
handleSize
}) => {
if (!nodePosition || !handlerPos || !handlesParentPosition)
if (!nodePosition || !handlePos || !handlesParentPosition)
return {};
let left = nodePosition.width - handlerSize - (handlesParentPosition.left - nodePosition.left);
let left = nodePosition.width - handleSize - (handlesParentPosition.left - nodePosition.left);
return {
top: round(nodePosition.top - handlesParentPosition.top + nodePosition.height - handlerSize),
top: round(nodePosition.top - handlesParentPosition.top + nodePosition.height - handleSize),
left: round(left),
cursor: "nwse-resize",
height: round(handlerSize),
width: round(handlerSize)
height: round(handleSize),
width: round(handleSize)
};
};
const bottomLeftHandlerStyle = ({
const bottomLeftHandleStyle = ({
nodePosition,
handlerPos,
handlePos,
handlesParentPosition,
handlerSize
handleSize
}) => {
if (!nodePosition || !handlerPos || !handlesParentPosition)
if (!nodePosition || !handlePos || !handlesParentPosition)
return {};
return {
top: nodePosition.height + -handlerSize + nodePosition.top - handlesParentPosition.top,
top: nodePosition.height + -handleSize + nodePosition.top - handlesParentPosition.top,
left: nodePosition.left - handlesParentPosition.left,
cursor: "nesw-resize",
height: handlerSize,
width: handlerSize
height: handleSize,
width: handleSize
};
};
const topRightHandlerStyle = ({
const topRightHandleStyle = ({
nodePosition,
handlerPos,
handlePos,
handlesParentPosition,
handlerSize
handleSize
}) => {
if (!nodePosition || !handlerPos || !handlesParentPosition)
if (!nodePosition || !handlePos || !handlesParentPosition)
return {};
let left = nodePosition.width - handlerSize - (handlesParentPosition.left - nodePosition.left);
let left = nodePosition.width - handleSize - (handlesParentPosition.left - nodePosition.left);
return {

@@ -438,13 +346,13 @@ top: round(nodePosition.top - handlesParentPosition.top),

cursor: "nesw-resize",
height: round(handlerSize),
width: round(handlerSize)
height: round(handleSize),
width: round(handleSize)
};
};
const topLeftHandlerStyle = ({
const topLeftHandleStyle = ({
nodePosition,
handlerPos,
handlePos,
handlesParentPosition,
handlerSize
handleSize
}) => {
if (!nodePosition || !handlerPos || !handlesParentPosition)
if (!nodePosition || !handlePos || !handlesParentPosition)
return {};

@@ -455,32 +363,29 @@ return {

cursor: "nwse-resize",
height: round(handlerSize),
width: round(handlerSize)
height: round(handleSize),
width: round(handleSize)
};
};
const defaultHandlersFn = {
top: topHandlerStyle,
left: leftHandlerStyle,
bottom: bottomHandlerStyle,
right: rightHandlerStyle,
bottomRight: bottomRightHandlerStyle,
bottomLeft: bottomLeftHandlerStyle,
topRight: topRightHandlerStyle,
topLeft: topLeftHandlerStyle
const defaultHandlesFn = {
top: topHandleStyle,
left: leftHandleStyle,
bottom: bottomHandleStyle,
right: rightHandleStyle,
bottomRight: bottomRightHandleStyle,
bottomLeft: bottomLeftHandleStyle,
topRight: topRightHandleStyle,
topLeft: topLeftHandleStyle
};
const Resizable = React.forwardRef(function ResizableForward(props, forwardedRef) {
const Resizable = React.forwardRef(function ResizableForward(_props, forwardedRef) {
var _a, _b, _c, _d, _e, _f, _g;
const props = _props;
let {
grid,
children,
onResizeEffect,
enabledHandles = Object.keys(defaultHandlersFn),
handlerOptions = {},
handlersOptions = {},
disableHeightControl = false,
disableWidthControl = false,
handleStyle = {},
handlesStyle = {}
enabledHandles,
handleOptions,
handlesOptions,
disableControl,
handleStyle,
handlesStyle
} = props;
let mergedHandlersOptions = mergeRecursive(cloneDeepNoFunction(defaultHandlersOptions), handlersOptions);
let mergedHandlerOptions = mergeRecursive(cloneDeepNoFunction(defaultHandlerOptions), handlerOptions);
const render = useRerender();

@@ -493,4 +398,4 @@ let nodeRef = usePassRef(children);

const nodePosition = usePosition(nodeRef.current);
const handlerParentRef = useRef(null);
const handlesParentPosition = usePosition(handlerParentRef.current);
const handleParentRef = useRef(null);
const handlesParentPosition = usePosition(handleParentRef.current);
const [initialHeight, setInitialHeight] = useState("");

@@ -504,8 +409,3 @@ const [initialWidth, setInitialWidth] = useState("");

const [endDraggingOffsetLeft, setEndDraggingOffsetLeft] = useState(0);
let finalHandlesOptions = {};
for (const handle of enabledHandles) {
if (handle in mergedHandlersOptions) {
finalHandlesOptions[handle] = mergeRecursive(cloneDeepNoFunction(mergedHandlerOptions), mergedHandlersOptions[handle]);
}
}
const finalHandlesOptions = useFinalHandlesOptions(enabledHandles, handleOptions, handlesOptions);
let finalHandlesStyle = {};

@@ -515,2 +415,4 @@ for (const handle of enabledHandles) {

}
const disableWidthControl = typeof disableControl === "boolean" ? disableControl : disableControl == null ? void 0 : disableControl.horizontal;
const disableHeightControl = typeof disableControl === "boolean" ? disableControl : disableControl == null ? void 0 : disableControl.vertical;
const enableHorizontal = !disableWidthControl && !!enabledHandles.find((h) => h.toLowerCase().includes("left") || h.toLowerCase().includes("right"));

@@ -540,3 +442,8 @@ const enableVertical = !disableHeightControl && !!enabledHandles.find((h) => h.toLowerCase().includes("top") || h.toLowerCase().includes("bottom"));

}
}
},
nodeRef,
nodePosition,
handleParentRef,
handlesParentPosition,
render
}));

@@ -552,6 +459,3 @@ useLayoutEffect(() => {

if (nodeRef.current) {
let {
height: height2,
width: width2
} = (_c2 = (_b2 = (_a2 = nodeRef.current) == null ? void 0 : _a2.getBoundingClientRect) == null ? void 0 : _b2.call(_a2)) != null ? _c2 : {};
let { height: height2, width: width2 } = (_c2 = (_b2 = (_a2 = nodeRef.current) == null ? void 0 : _a2.getBoundingClientRect) == null ? void 0 : _b2.call(_a2)) != null ? _c2 : {};
setCalculatedHeight(height2);

@@ -569,3 +473,5 @@ setCalculatedWidth(width2);

if (nodeRef == null ? void 0 : nodeRef.current) {
if (!disableHeightControl && !!height) {
if (props.height)
nodeRef.current.style.height = typeof props.height === "number" ? `${props.height}px` : props.height;
else if (!disableHeightControl && !!height) {
nodeRef.current.style.height = height + "px";

@@ -575,3 +481,5 @@ if (props.enableRelativeOffset)

}
if (!disableWidthControl && !!width) {
if (props.width)
nodeRef.current.style.width = typeof props.width === "number" ? `${props.width}px` : props.width;
else if (!disableWidthControl && !!width) {
nodeRef.current.style.width = width + "px";

@@ -596,114 +504,76 @@ if (props.enableRelativeOffset)

enabledHandles = [];
return /* @__PURE__ */ jsxs(Fragment, {
children: [children && React.cloneElement(children, {
ref: nodeRef,
key: "ResizableNode"
}, children == null ? void 0 : children.props.children), nodeRef.current && !controlDisabled && ReactDOM.createPortal(/* @__PURE__ */ jsx("div", {
style: {
position: "absolute"
},
ref: handlerParentRef,
children: nodePosition && enabledHandles.map((handlerName) => {
return /* @__PURE__ */ jsx(Handle, {
nodeRef,
nodePosition,
setCalculatedHeight,
setCalculatedWidth,
calculatedHeight,
calculatedWidth,
setCalculatedLeft,
setCalculatedTop,
setEndDraggingOffsetTop,
setEndDraggingOffsetLeft,
endDraggingOffsetTop,
endDraggingOffsetLeft,
calculatedLeft,
calculatedTop,
HandleStyleFn: defaultHandlersFn[handlerName],
handlesParentPosition,
handleOptions: finalHandlesOptions[handlerName],
handlesOptions: finalHandlesOptions,
handleStyle: finalHandlesStyle[handlerName],
ResizableProps: props
}, handlerName);
})
}, "ResizableHandlerParent"), nodeRef.current)]
});
return /* @__PURE__ */ React.createElement(React.Fragment, null, children && React.cloneElement(children, {
ref: nodeRef,
key: "ResizableNode"
}, children == null ? void 0 : children.props.children), nodeRef.current && !controlDisabled && ReactDOM.createPortal(/* @__PURE__ */ React.createElement("div", {
style: { position: "absolute" },
ref: handleParentRef,
key: "ResizableHandleParent"
}, nodePosition && enabledHandles.map((handleName) => {
return /* @__PURE__ */ React.createElement(Handle, __spreadProps(__spreadValues({
key: handleName
}, {
nodeRef,
nodePosition,
setCalculatedHeight,
setCalculatedWidth,
calculatedHeight,
calculatedWidth,
setCalculatedLeft,
setCalculatedTop,
setEndDraggingOffsetTop,
setEndDraggingOffsetLeft,
endDraggingOffsetTop,
endDraggingOffsetLeft,
calculatedLeft,
calculatedTop,
HandleStyleFn: defaultHandlesFn[handleName],
handlesParentPosition,
handleOptions: finalHandlesOptions[handleName],
handlesOptions: finalHandlesOptions,
handleStyle: finalHandlesStyle[handleName]
}), {
ResizableProps: props
}));
})), nodeRef.current));
});
const defaultHandlerOptions = {
size: 10
const ResizableDefaultProps = {
enabledHandles: Object.keys(defaultHandlesFn),
handleOptions: {},
handlesOptions: {},
disableControl: false,
handleStyle: {},
handlesStyle: {},
resizeRatio: 1
};
const defaultHandlersOptions = {
top: {
allowResize: {
vertical: {
reverseDrag: true
}
Resizable.defaultProps = ResizableDefaultProps;
const getFinalHandlesOptions = (enabledHandles, mergedHandlesOptions, mergedHandleOptions) => {
let finalHandlesOptions = {};
for (const handle of enabledHandles) {
if (handle in mergedHandlesOptions) {
finalHandlesOptions[handle] = mergeRecursive(cloneDeepNoFunction(mergedHandleOptions), mergedHandlesOptions[handle]);
}
},
left: {
allowResize: {
horizontal: {
reverseDrag: true
}
}
},
bottom: {
allowResize: {
vertical: {
reverseDrag: false
}
}
},
right: {
allowResize: {
horizontal: {
reverseDrag: false
}
}
},
bottomRight: {
allowResize: {
horizontal: {
reverseDrag: false
},
vertical: {
reverseDrag: false
}
}
},
bottomLeft: {
allowResize: {
horizontal: {
reverseDrag: true
},
vertical: {
reverseDrag: false
}
}
},
topRight: {
allowResize: {
horizontal: {
reverseDrag: false
},
vertical: {
reverseDrag: true
}
}
},
topLeft: {
allowResize: {
horizontal: {
reverseDrag: true
},
vertical: {
reverseDrag: true
}
}
}
return finalHandlesOptions;
};
Resizable.defaultProps = {
enabledHandles: Object.keys(defaultHandlersFn)
const useFinalHandlesOptions = (enabledHandles, handleOptions, handlesOptions) => {
let mergedHandlesOptions = useMemo(() => {
return mergeRecursive(cloneDeepNoFunction(defaultHandlesOptions), handlesOptions);
}, [handlesOptions]);
let mergedHandleOptions = useMemo(() => mergeRecursive(cloneDeepNoFunction(defaultHandleOptions), handleOptions), [handleOptions]);
return useMemo(() => getFinalHandlesOptions(enabledHandles, mergedHandlesOptions, mergedHandleOptions), [enabledHandles, handlesOptions, handleOptions]);
};
const defaultHandleOptions = {
size: 10
};
const defaultHandlesOptions = {
top: { allowResize: { vertical: { reverseDrag: true } } },
left: { allowResize: { horizontal: { reverseDrag: true } } },
bottom: { allowResize: { vertical: { reverseDrag: false } } },
right: { allowResize: { horizontal: { reverseDrag: false } } },
bottomRight: { allowResize: { horizontal: { reverseDrag: false }, vertical: { reverseDrag: false } } },
bottomLeft: { allowResize: { horizontal: { reverseDrag: true }, vertical: { reverseDrag: false } } },
topRight: { allowResize: { horizontal: { reverseDrag: false }, vertical: { reverseDrag: true } } },
topLeft: { allowResize: { horizontal: { reverseDrag: true }, vertical: { reverseDrag: true } } }
};
export { Resizable as default };

9

dist/types/Handle.d.ts
import React from "react";
import { positionType } from "shared/hooks/usePosition";
import { handleNameType, ResizableProps } from "./Resizable";
import { HandleNameType, ResizablePropsDP } from "./Resizable";
import { HandleStyleFnType } from "./HandleFns";

@@ -15,7 +15,7 @@ export declare type allowResizeType = "horizontal" | "vertical";

export declare type handlesOptionsType = {
[key in handleNameType]?: Partial<handleOptionsType>;
[key in HandleNameType]?: Partial<handleOptionsType>;
};
export interface HandleProps {
ResizableProps: ResizableProps;
nodePosition: positionType;
ResizableProps: ResizablePropsDP;
nodePosition: Exclude<positionType, null>;
nodeRef: React.RefObject<any>;

@@ -39,2 +39,1 @@ setCalculatedHeight: React.Dispatch<React.SetStateAction<number | null | undefined>>;

export declare const Handle: React.ForwardRefExoticComponent<HandleProps & React.RefAttributes<unknown>>;
//# sourceMappingURL=Handle.d.ts.map

23

dist/types/HandleFns.d.ts

@@ -6,5 +6,5 @@ import React from "react";

nodePosition: positionType;
handlerPos: positionType;
handlePos: positionType;
handlesParentPosition: positionType;
handlerSize: number;
handleSize: number;
handlesOptions: handlesOptionsType;

@@ -16,11 +16,11 @@ }) => React.CSSProperties | undefined;

***************************************************************/
export declare const topHandlerStyle: HandleStyleFnType;
export declare const bottomHandlerStyle: HandleStyleFnType;
export declare const leftHandlerStyle: HandleStyleFnType;
export declare const rightHandlerStyle: HandleStyleFnType;
export declare const bottomRightHandlerStyle: HandleStyleFnType;
export declare const bottomLeftHandlerStyle: HandleStyleFnType;
export declare const topRightHandlerStyle: HandleStyleFnType;
export declare const topLeftHandlerStyle: HandleStyleFnType;
export declare const defaultHandlersFn: {
export declare const topHandleStyle: HandleStyleFnType;
export declare const bottomHandleStyle: HandleStyleFnType;
export declare const leftHandleStyle: HandleStyleFnType;
export declare const rightHandleStyle: HandleStyleFnType;
export declare const bottomRightHandleStyle: HandleStyleFnType;
export declare const bottomLeftHandleStyle: HandleStyleFnType;
export declare const topRightHandleStyle: HandleStyleFnType;
export declare const topLeftHandleStyle: HandleStyleFnType;
export declare const defaultHandlesFn: {
readonly top: HandleStyleFnType;

@@ -35,2 +35,1 @@ readonly left: HandleStyleFnType;

};
//# sourceMappingURL=HandleFns.d.ts.map

5

dist/types/index.d.ts
import { default as Resizable } from "./Resizable";
import type { ResizableProps, handleNameType } from "./Resizable";
import type { ResizableProps, HandleNameType } from "./Resizable";
import type { handleOptionsType, HandleProps } from "./Handle";
export default Resizable;
export type { ResizableProps, handleNameType, handleOptionsType };
export type { ResizableProps, HandleNameType, handleOptionsType };
export type { HandleProps };
//# sourceMappingURL=index.d.ts.map

109

dist/types/Resizable.d.ts
import React from "react";
import { handleOptionsType } from "./Handle";
import { positionType } from "shared/hooks/usePosition";
import { defaultHandlersFn } from "./HandleFns";
import { defaultHandlesFn } from "./HandleFns";
import type { RespectDefaultProps } from "shared/types";
export declare type SpecifyAxis<T> = {
horizontal?: T;
vertical?: T;
};
export declare type PossiblySpecifyAxis<T> = T | SpecifyAxis<T>;
declare type OnResizeEvent = (newPos: {
height: number;
width: number;
}, prevPos: Exclude<positionType, null>) => void;
declare type OnResizeUpdate<T> = (newPos: T, prevPos: Exclude<positionType, null>) => void;
export interface ResizableProps {

@@ -13,18 +24,31 @@ /** A simple React element(like div) or React forwardRef element(React element which passed down a ref to a DOM element) */

nodeRef?: React.RefObject<any>;
/** Allow resize with respect to a grid */
grid?: number;
/** An array handlers to enable */
enabledHandles?: handleNameType[];
/** Allow resize with respect to a grid
*
* examples:
* - `grid={20}` - allow resize with respect to a grid of 20px (both horizontal and vertical axis)
* - `grid={{horizontal:20}}` - allow resize with respect to a horizontal grid of 20px
* */
grid?: PossiblySpecifyAxis<number>;
/** multiple scale diff by this number
* examples:
* - `resizeRatio={2}` - double the resizing ratio
* - `resizeRatio={{horizontal:2}}` - double the resizing ratio only horizontally
* */
resizeRatio?: PossiblySpecifyAxis<number>;
/** An array handles to enable */
enabledHandles?: HandleNameType[];
/** options that will be passed to all handles */
handlerOptions?: Partial<handleOptionsType>;
/** options that will be passed to specific handles. overrides handlerOptions */
handlersOptions?: {
[key in handleNameType]?: Partial<handleOptionsType>;
handleOptions?: Partial<handleOptionsType>;
/** options that will be passed to specific handles. overrides handleOptions */
handlesOptions?: {
[key in HandleNameType]?: Partial<handleOptionsType>;
};
/** the height of target DOM node won't be controlled
* when set to false, initial height is restored */
disableHeightControl?: boolean;
/** the width of target DOM node won't be controlled
* when set to false, initial width is restored */
disableWidthControl?: boolean;
/** the height/width target DOM node won't be controlled
* when set to false, initial height/width is restored
*
* examples:
* - `disableControl={true}` - will disable the control on height/width of the target DOM node
* - `disableControl={{horizontal: true}}` - will disable the control on height of the target DOM node
* */
disableControl?: PossiblySpecifyAxis<boolean>;
/** style that will be passed to all handles */

@@ -34,8 +58,31 @@ handleStyle?: React.CSSProperties;

handlesStyle?: {
[key in handleNameType]?: React.CSSProperties;
[key in HandleNameType]?: React.CSSProperties;
};
/** controlled height.
* Note! the height won't be controlled by Resizable anymore, but by prop given from parent component
*
* example:
* - `height={100}` - will set the height of the target DOM node to 100px
* - `height={"100px"}` - will set the height of the target DOM node to 100px
* - `height={"50%"}` - will set the height of the target DOM node to 50% of the parent node
* - `height={30vh}` - will set the height of the target DOM node to 30% percent of the viewport height
* */
height?: number | string;
/** controlled width.
* Note! the width won't be controlled by Resizable anymore, but by prop given from parent component */
width?: number | string;
onResizeEnd?: (prevPos: Exclude<positionType, null>) => void;
onResizeStart?: (prevPos: Exclude<positionType, null>) => void;
onResize?: OnResizeEvent | {
horizontal?: OnResizeUpdate<{
width: number;
}>;
vertical?: OnResizeUpdate<{
height: number;
}>;
};
/** a callback that is called after resize ended and the DOM element is updated */
onResizeEffect?: ((dims: positionType) => void) | null;
onResizeEffect?: ((pos: positionType) => void) | null;
/** an imperative ref to Resizable component. ca be used to imperatively trigger actions like height and width control reset */
ResizableRef?: React.RefObject<ResizableHandle>;
ResizableRef?: React.RefObject<ResizableRefHandle>;
/** will offset the element using style.left and style.top to make the resize feel more natural

@@ -46,8 +93,28 @@ * affects left and top handles

}
export interface ResizableHandle {
export interface ResizableRefHandle {
/** function that resets the height/width of the target DOM node to initial state*/
restControl: (resetHeight?: boolean, resetWidth?: boolean) => void;
/** react ref to the target DOM node */
nodeRef: React.RefObject<HTMLElement>;
/** current position of the target DOM node */
nodePosition: positionType;
/** react ref to the handles parent DOM node */
handleParentRef: React.RefObject<HTMLDivElement>;
/** current position of the handles parent DOM node */
handlesParentPosition: positionType;
/** when called re-renders Resizable */
render: () => void;
}
export declare type ResizablePropsDP = RespectDefaultProps<ResizableProps, typeof ResizableDefaultProps>;
declare const Resizable: React.ForwardRefExoticComponent<ResizableProps & React.RefAttributes<HTMLElement>>;
export declare type handleNameType = keyof typeof defaultHandlersFn;
export declare const ResizableDefaultProps: {
enabledHandles: ("left" | "top" | "right" | "bottom" | "bottomRight" | "bottomLeft" | "topRight" | "topLeft")[];
handleOptions: {};
handlesOptions: {};
disableControl: boolean;
handleStyle: {};
handlesStyle: {};
resizeRatio: number;
};
export declare type HandleNameType = keyof typeof defaultHandlesFn;
export default Resizable;
//# sourceMappingURL=Resizable.d.ts.map

1

dist/types/utils.d.ts
export declare const round: (value: number, decimals?: number) => number;
export declare const omitItems: (arr: any[], removeArr: any[]) => any[];
//# sourceMappingURL=utils.d.ts.map

17

package.json
{
"name": "react-true-resizable",
"version": "0.2.2",
"version": "0.3.0",
"description": "",

@@ -10,4 +10,4 @@ "main": "dist/react-true-resizable.cjs.js",

"prepublishOnly": "pnpm run build",
"dev": "concurrently \"tsc -p tsconfig.dev.json -w\" \"vite build --config ./vite.config.watch.ts\" \"vite\"",
"build": "tsc -p tsconfig.build.json && vite build",
"dev": "concurrently \"tsc -w\" \"vite build --config ./vite.config.watch.ts\"",
"build": "tsc -p tsconfig.check.json && vite build && tsc",
"preview": "vite preview"

@@ -18,3 +18,5 @@ },

"dependencies": {
"react-fast-compare": "^3.2.0"
"@rollup/plugin-typescript": "^8.3.3",
"react-fast-compare": "^3.2.0",
"typescript": "^4.7.3"
},

@@ -29,6 +31,11 @@ "peerDependencies": {

"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"lodash": "^4.17.21",
"react-docgen": "^5.4.1",
"react-draggable": "^4.4.5",
"typedoc": "^0.22.17"
"typedoc": "^0.22.17",
"vite": "^2.9.9"
}
}

5

readme.md
# react-true-resizable
![npm](https://img.shields.io/npm/v/react-true-resizable)
![npm](https://img.shields.io/npm/dw/react-true-resizable)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-true-resizable)
![issues](https://img.shields.io/github/issues/Eliav2/react-true-resizable)
A resizable that just work as you would expect!

@@ -4,0 +9,0 @@ 

dist/types/Handle.d.ts.map
dist/types/HandleFns.d.ts.map
dist/types/index.d.ts.map
dist/types/Resizable.d.ts.map
dist/types/src/Handle.d.ts
dist/types/src/HandleFns.d.ts
dist/types/src/index.d.ts
dist/types/src/Resizable.d.ts
dist/types/src/utils.d.ts
dist/types/utils.d.mts
dist/types/utils.d.ts.map
dist/types/vite.config.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc