(function(u,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],p):(u=typeof globalThis<"u"?globalThis:u||self,p(u.ReactCrop={},u.React))})(this,function(u,p){"use strict";function S(e){var n,i,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e))for(n=0;n<e.length;n++)e[n]&&(i=S(e[n]))&&(r&&(r+=" "),r+=i);else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function R(){for(var e,n,i=0,r="";i<arguments.length;)(e=arguments[i++])&&(n=S(e))&&(r&&(r+=" "),r+=n);return r}const _={x:0,y:0,width:0,height:0,unit:"px"};function M(e,n,i){return Math.min(Math.max(e,n),i)}function Y(e,n){return e.width===n.width&&e.height===n.height&&e.x===n.x&&e.y===n.y&&e.unit===n.unit}function K(e,n,i,r){const t=C(e,i,r);return e.width&&(t.height=t.width/n),e.height&&(t.width=t.height*n),t.y+t.height>r&&(t.height=r-t.y,t.width=t.height*n),t.x+t.width>i&&(t.width=i-t.x,t.height=t.width/n),e.unit==="%"?y(t,i,r):t}function O(e,n,i){const r=C(e,n,i);return r.x=(n-r.width)/2,r.y=(i-r.height)/2,e.unit==="%"?y(r,n,i):r}function y(e,n,i){return e.unit==="%"?{..._,...e,unit:"%"}:{unit:"%",x:e.x?e.x/n*100:0,y:e.y?e.y/i*100:0,width:e.width?e.width/n*100:0,height:e.height?e.height/i*100:0}}function C(e,n,i){return e.unit?e.unit==="px"?{..._,...e,unit:"px"}:{unit:"px",x:e.x?e.x*n/100:0,y:e.y?e.y*i/100:0,width:e.width?e.width*n/100:0,height:e.height?e.height*i/100:0}:{..._,...e,unit:"px"}}function X(e,n,i,r,t,s=0,w=0,h=r,l=t){const o={...e};let d=Math.min(s,r),c=Math.min(w,t),a=Math.min(h,r),g=Math.min(l,t);n&&(n>1?(d=w?w*n:d,c=d/n,a=h*n):(c=s?s/n:c,d=c*n,g=l/n)),o.y<0&&(o.height=Math.max(o.height+o.y,c),o.y=0),o.x<0&&(o.width=Math.max(o.width+o.x,d),o.x=0);const x=r-(o.x+o.width);x<0&&(o.x=Math.min(o.x,r-d),o.width+=x);const P=t-(o.y+o.height);if(P<0&&(o.y=Math.min(o.y,t-c),o.height+=P),o.width<d&&((i==="sw"||i=="nw")&&(o.x-=d-o.width),o.width=d),o.height<c&&((i==="nw"||i=="ne")&&(o.y-=c-o.height),o.height=c),o.width>a&&((i==="sw"||i=="nw")&&(o.x-=a-o.width),o.width=a),o.height>g&&((i==="nw"||i=="ne")&&(o.y-=g-o.height),o.height=g),n){const f=o.width/o.height;if(f<n){const D=Math.max(o.width/n,c);(i==="nw"||i=="ne")&&(o.y-=D-o.height),o.height=D}else if(f>n){const D=Math.max(o.height*n,d);(i==="sw"||i=="nw")&&(o.x-=D-o.width),o.width=D}}return o}function E(e,n,i,r){const t={...e};return n==="ArrowLeft"?r==="nw"?(t.x-=i,t.y-=i,t.width+=i,t.height+=i):r==="w"?(t.x-=i,t.width+=i):r==="sw"?(t.x-=i,t.width+=i,t.height+=i):r==="ne"?(t.y+=i,t.width-=i,t.height-=i):r==="e"?t.width-=i:r==="se"&&(t.width-=i,t.height-=i):n==="ArrowRight"&&(r==="nw"?(t.x+=i,t.y+=i,t.width-=i,t.height-=i):r==="w"?(t.x+=i,t.width-=i):r==="sw"?(t.x+=i,t.width-=i,t.height-=i):r==="ne"?(t.y-=i,t.width+=i,t.height+=i):r==="e"?t.width+=i:r==="se"&&(t.width+=i,t.height+=i)),n==="ArrowUp"?r==="nw"?(t.x-=i,t.y-=i,t.width+=i,t.height+=i):r==="n"?(t.y-=i,t.height+=i):r==="ne"?(t.y-=i,t.width+=i,t.height+=i):r==="sw"?(t.x+=i,t.width-=i,t.height-=i):r==="s"?t.height-=i:r==="se"&&(t.width-=i,t.height-=i):n==="ArrowDown"&&(r==="nw"?(t.x+=i,t.y+=i,t.width-=i,t.height-=i):r==="n"?(t.y+=i,t.height-=i):r==="ne"?(t.y+=i,t.width-=i,t.height-=i):r==="sw"?(t.x-=i,t.width+=i,t.height+=i):r==="s"?t.height+=i:r==="se"&&(t.width+=i,t.height+=i)),t}const k="",b={capture:!0,passive:!1},m=class extends p.PureComponent{constructor(){super(...arguments),this.docMoveBound=!1,this.mouseDownOnCrop=!1,this.dragStarted=!1,this.evData={startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0},this.componentRef=p.createRef(),this.mediaRef=p.createRef(),this.initChangeCalled=!1,this.state={cropIsActive:!1,newCropIsBeingDrawn:!1},this.onCropPointerDown=e=>{const{crop:n,disabled:i}=this.props,r=this.getBox();if(!n)return;const t=C(n,r.width,r.height);if(i)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const s=e.target.dataset.ord,w=!!s;let h=e.clientX,l=e.clientY,o=t.x,d=t.y;if(s){const c=e.clientX-r.x,a=e.clientY-r.y;let g=0,x=0;s==="ne"||s=="e"?(g=c-(t.x+t.width),x=a-t.y,o=t.x,d=t.y+t.height):s==="se"||s==="s"?(g=c-(t.x+t.width),x=a-(t.y+t.height),o=t.x,d=t.y):s==="sw"||s=="w"?(g=c-t.x,x=a-(t.y+t.height),o=t.x+t.width,d=t.y):(s==="nw"||s=="n")&&(g=c-t.x,x=a-t.y,o=t.x+t.width,d=t.y+t.height),h=o+r.x+g,l=d+r.y+x}this.evData={startClientX:h,startClientY:l,startCropX:o,startCropY:d,clientX:e.clientX,clientY:e.clientY,isResize:w,ord:s},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0})},this.onComponentPointerDown=e=>{const{crop:n,disabled:i,locked:r,keepSelection:t,onChange:s}=this.props,w=this.getBox();if(i||r||t&&n)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const h=e.clientX-w.x,l=e.clientY-w.y,o={unit:"px",x:h,y:l,width:0,height:0};this.evData={startClientX:e.clientX,startClientY:e.clientY,startCropX:h,startCropY:l,clientX:e.clientX,clientY:e.clientY,isResize:!0},this.mouseDownOnCrop=!0,s(C(o,w.width,w.height),y(o,w.width,w.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0})},this.onDocPointerMove=e=>{const{crop:n,disabled:i,onChange:r,onDragStart:t}=this.props,s=this.getBox();if(i||!n||!this.mouseDownOnCrop)return;e.cancelable&&e.preventDefault(),this.dragStarted||(this.dragStarted=!0,t&&t(e));const{evData:w}=this;w.clientX=e.clientX,w.clientY=e.clientY;let h;w.isResize?h=this.resizeCrop():h=this.dragCrop(),Y(n,h)||r(C(h,s.width,s.height),y(h,s.width,s.height))},this.onComponentKeyDown=e=>{const{crop:n,disabled:i,onChange:r,onComplete:t}=this.props,s=this.getBox();if(i)return;const w=e.key;let h=!1;if(!n)return;const l=this.makePixelCrop(),d=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?m.nudgeStepLarge:e.shiftKey?m.nudgeStepMedium:m.nudgeStep;if(w==="ArrowLeft"?(l.x-=d,h=!0):w==="ArrowRight"?(l.x+=d,h=!0):w==="ArrowUp"?(l.y-=d,h=!0):w==="ArrowDown"&&(l.y+=d,h=!0),h){e.cancelable&&e.preventDefault(),l.x=M(l.x,0,s.width-l.width),l.y=M(l.y,0,s.height-l.height);const c=C(l,s.width,s.height),a=y(l,s.width,s.height);r(c,a),t&&t(c,a)}},this.onHandlerKeyDown=(e,n)=>{const{aspect:i=0,crop:r,disabled:t,minWidth:s=0,minHeight:w=0,maxWidth:h,maxHeight:l,onChange:o,onComplete:d}=this.props,c=this.getBox();if(t||!r)return;if(e.key==="ArrowUp"||e.key==="ArrowDown"||e.key==="ArrowLeft"||e.key==="ArrowRight")e.stopPropagation(),e.preventDefault();else return;const g=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?m.nudgeStepLarge:e.shiftKey?m.nudgeStepMedium:m.nudgeStep,x=C(r,c.width,c.height),P=E(x,e.key,g,n),f=X(P,i,n,c.width,c.height,s,w,h,l);if(!Y(r,f)){const D=y(f,c.width,c.height);o(f,D),d&&d(f,D)}},this.onDocPointerDone=e=>{const{crop:n,disabled:i,onComplete:r,onDragEnd:t}=this.props,s=this.getBox();this.unbindDocMove(),!(i||!n)&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,t&&t(e),r&&r(C(n,s.width,s.height),y(n,s.width,s.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}))},this.onDragFocus=e=>{var n;(n=this.componentRef.current)==null||n.scrollTo(0,0)}}get document(){return document}getBox(){const e=this.mediaRef.current;if(!e)return{x:0,y:0,width:0,height:0};const{x:n,y:i,width:r,height:t}=e.getBoundingClientRect();return{x:n,y:i,width:r,height:t}}componentDidUpdate(e){const{crop:n,onComplete:i}=this.props;if(i&&!e.crop&&n){const{width:r,height:t}=this.getBox();r&&t&&i(C(n,r,t),y(n,r,t))}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect()}bindDocMove(){this.docMoveBound||(this.document.addEventListener("pointermove",this.onDocPointerMove,b),this.document.addEventListener("pointerup",this.onDocPointerDone,b),this.document.addEventListener("pointercancel",this.onDocPointerDone,b),this.docMoveBound=!0)}unbindDocMove(){this.docMoveBound&&(this.document.removeEventListener("pointermove",this.onDocPointerMove,b),this.document.removeEventListener("pointerup",this.onDocPointerDone,b),this.document.removeEventListener("pointercancel",this.onDocPointerDone,b),this.docMoveBound=!1)}getCropStyle(){const{crop:e}=this.props;if(e)return{top:`${e.y}${e.unit}`,left:`${e.x}${e.unit}`,width:`${e.width}${e.unit}`,height:`${e.height}${e.unit}`}}dragCrop(){const{evData:e}=this,n=this.getBox(),i=this.makePixelCrop(),r=e.clientX-e.startClientX,t=e.clientY-e.startClientY;return i.x=M(e.startCropX+r,0,n.width-i.width),i.y=M(e.startCropY+t,0,n.height-i.height),i}getPointRegion(e){const{evData:n}=this,i=n.clientX-e.x,t=n.clientY-e.y<n.startCropY;return i<n.startCropX?t?"nw":"sw":t?"ne":"se"}resizeCrop(){const{evData:e}=this,n=this.getBox(),{aspect:i=0,minWidth:r=0,minHeight:t=0,maxWidth:s,maxHeight:w}=this.props,h=this.getPointRegion(n),l=this.makePixelCrop(),o=e.ord?e.ord:h,d=e.clientX-e.startClientX,c=e.clientY-e.startClientY,a={unit:"px",x:0,y:0,width:0,height:0};h==="ne"?(a.x=e.startCropX,a.width=d,i?(a.height=a.width/i,a.y=e.startCropY-a.height):(a.height=Math.abs(c),a.y=e.startCropY-a.height)):h==="se"?(a.x=e.startCropX,a.y=e.startCropY,a.width=d,i?a.height=a.width/i:a.height=c):h==="sw"?(a.x=e.startCropX+d,a.y=e.startCropY,a.width=Math.abs(d),i?a.height=a.width/i:a.height=c):h==="nw"&&(a.x=e.startCropX+d,a.width=Math.abs(d),i?(a.height=a.width/i,a.y=e.startCropY-a.height):(a.height=Math.abs(c),a.y=e.startCropY+c));const g=X(a,i,h,n.width,n.height,r,t,s,w);return i||m.xyOrds.indexOf(o)>-1?(l.x=g.x,l.y=g.y,l.width=g.width,l.height=g.height):m.xOrds.indexOf(o)>-1?(l.x=g.x,l.width=g.width):m.yOrds.indexOf(o)>-1&&(l.y=g.y,l.height=g.height),l}createCropSelection(){const{ariaLabels:e=m.defaultProps.ariaLabels,disabled:n,locked:i,renderSelectionAddon:r,ruleOfThirds:t,crop:s}=this.props,w=this.getCropStyle();if(s)return p.createElement("div",{style:w,className:"ReactCrop__crop-selection",onPointerDown:this.onCropPointerDown,"aria-label":e.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:"group"},!n&&!i&&p.createElement("div",{className:"ReactCrop__drag-elements",onFocus:this.onDragFocus},p.createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),p.createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),p.createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),p.createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),p.createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw",tabIndex:0,"aria-label":e.nwDragHandle,onKeyDown:h=>this.onHandlerKeyDown(h,"nw"),role:"button"}),p.createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n",tabIndex:0,"aria-label":e.nDragHandle,onKeyDown:h=>this.onHandlerKeyDown(h,"n"),role:"button"}),p.createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne",tabIndex:0,"aria-label":e.neDragHandle,onKeyDown:h=>this.onHandlerKeyDown(h,"ne"),role:"button"}),p.createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e",tabIndex:0,"aria-label":e.eDragHandle,onKeyDown:h=>this.onHandlerKeyDown(h,"e"),role:"button"}),p.createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se",tabIndex:0,"aria-label":e.seDragHandle,onKeyDown:h=>this.onHandlerKeyDown(h,"se"),role:"button"}),p.createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s",tabIndex:0,"aria-label":e.sDragHandle,onKeyDown:h=>this.onHandlerKeyDown(h,"s"),role:"button"}),p.createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw",tabIndex:0,"aria-label":e.swDragHandle,onKeyDown:h=>this.onHandlerKeyDown(h,"sw"),role:"button"}),p.createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w",tabIndex:0,"aria-label":e.wDragHandle,onKeyDown:h=>this.onHandlerKeyDown(h,"w"),role:"button"})),r&&p.createElement("div",{className:"ReactCrop__selection-addon",onMouseDown:h=>h.stopPropagation()},r(this.state)),t&&p.createElement(p.Fragment,null,p.createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),p.createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}makePixelCrop(){const e={..._,...this.props.crop||{}},n=this.getBox();return C(e,n.width,n.height)}render(){const{aspect:e,children:n,circularCrop:i,className:r,crop:t,disabled:s,locked:w,style:h,ruleOfThirds:l}=this.props,{cropIsActive:o,newCropIsBeingDrawn:d}=this.state,c=t?this.createCropSelection():null,a=R("ReactCrop",r,{"ReactCrop--active":o,"ReactCrop--disabled":s,"ReactCrop--locked":w,"ReactCrop--new-crop":d,"ReactCrop--fixed-aspect":t&&e,"ReactCrop--circular-crop":t&&i,"ReactCrop--rule-of-thirds":t&&l,"ReactCrop--invisible-crop":!this.dragStarted&&t&&!t.width&&!t.height});return p.createElement("div",{ref:this.componentRef,className:a,style:h},p.createElement("div",{ref:this.mediaRef,className:"ReactCrop__child-wrapper",onPointerDown:this.onComponentPointerDown},n),c)}};let v=m;v.xOrds=["e","w"],v.yOrds=["n","s"],v.xyOrds=["nw","ne","se","sw"],v.nudgeStep=1,v.nudgeStepMedium=10,v.nudgeStepLarge=100,v.defaultProps={ariaLabels:{cropArea:"Use the arrow keys to move the crop selection area",nwDragHandle:"Use the arrow keys to move the north west drag handle to change the crop selection area",nDragHandle:"Use the up and down arrow keys to move the north drag handle to change the crop selection area",neDragHandle:"Use the arrow keys to move the north east drag handle to change the crop selection area",eDragHandle:"Use the up and down arrow keys to move the east drag handle to change the crop selection area",seDragHandle:"Use the arrow keys to move the south east drag handle to change the crop selection area",sDragHandle:"Use the up and down arrow keys to move the south drag handle to change the crop selection area",swDragHandle:"Use the arrow keys to move the south west drag handle to change the crop selection area",wDragHandle:"Use the up and down arrow keys to move the west drag handle to change the crop selection area"}},u.Component=v,u.areCropsEqual=Y,u.centerCrop=O,u.clamp=M,u.containCrop=X,u.convertToPercentCrop=y,u.convertToPixelCrop=C,u.default=v,u.defaultCrop=_,u.makeAspectCrop=K,u.nudgeCrop=E,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});