react-grid-layout
Version:
A draggable and resizable grid layout with responsive breakpoints, for React.
1 lines • 78.9 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],e):"object"==typeof exports?exports.ReactGridLayout=e(require("react"),require("react-dom")):t.ReactGridLayout=e(t.React,t.ReactDOM)}(self,(t,e)=>(()=>{var n={12:e=>{"use strict";e.exports=t},27:(t,e,n)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"DraggableCore",{enumerable:!0,get:function(){return c.default}}),e.default=void 0;var r=function(t,e){if(t&&t.__esModule)return t;if(null===t||"object"!=typeof t&&"function"!=typeof t)return{default:t};var n=h(e);if(n&&n.has(t))return n.get(t);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in t)if("default"!==i&&Object.prototype.hasOwnProperty.call(t,i)){var a=o?Object.getOwnPropertyDescriptor(t,i):null;a&&(a.get||a.set)?Object.defineProperty(r,i,a):r[i]=t[i]}return r.default=t,n&&n.set(t,r),r}(n(12)),o=d(n(556)),i=d(n(33)),a=d(n(322)),s=n(89),l=n(726),u=n(56),c=d(n(888)),p=d(n(696));function d(t){return t&&t.__esModule?t:{default:t}}function h(t){if("function"!=typeof WeakMap)return null;var e=new WeakMap,n=new WeakMap;return(h=function(t){return t?n:e})(t)}function f(){return f=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f.apply(this,arguments)}function g(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||null===t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:String(e)}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}class m extends r.Component{static getDerivedStateFromProps(t,e){let{position:n}=t,{prevPropsPosition:r}=e;return!n||r&&n.x===r.x&&n.y===r.y?null:((0,p.default)("Draggable: getDerivedStateFromProps %j",{position:n,prevPropsPosition:r}),{x:n.x,y:n.y,prevPropsPosition:{...n}})}constructor(t){super(t),g(this,"onDragStart",(t,e)=>{if((0,p.default)("Draggable: onDragStart: %j",e),!1===this.props.onStart(t,(0,l.createDraggableData)(this,e)))return!1;this.setState({dragging:!0,dragged:!0})}),g(this,"onDrag",(t,e)=>{if(!this.state.dragging)return!1;(0,p.default)("Draggable: onDrag: %j",e);const n=(0,l.createDraggableData)(this,e),r={x:n.x,y:n.y,slackX:0,slackY:0};if(this.props.bounds){const{x:t,y:e}=r;r.x+=this.state.slackX,r.y+=this.state.slackY;const[o,i]=(0,l.getBoundPosition)(this,r.x,r.y);r.x=o,r.y=i,r.slackX=this.state.slackX+(t-r.x),r.slackY=this.state.slackY+(e-r.y),n.x=r.x,n.y=r.y,n.deltaX=r.x-this.state.x,n.deltaY=r.y-this.state.y}if(!1===this.props.onDrag(t,n))return!1;this.setState(r)}),g(this,"onDragStop",(t,e)=>{if(!this.state.dragging)return!1;if(!1===this.props.onStop(t,(0,l.createDraggableData)(this,e)))return!1;(0,p.default)("Draggable: onDragStop: %j",e);const n={dragging:!1,slackX:0,slackY:0};if(Boolean(this.props.position)){const{x:t,y:e}=this.props.position;n.x=t,n.y=e}this.setState(n)}),this.state={dragging:!1,dragged:!1,x:t.position?t.position.x:t.defaultPosition.x,y:t.position?t.position.y:t.defaultPosition.y,prevPropsPosition:{...t.position},slackX:0,slackY:0,isElementSVG:!1},!t.position||t.onDrag||t.onStop||console.warn("A `position` was applied to this <Draggable>, without drag handlers. This will make this component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the `position` of this element.")}componentDidMount(){void 0!==window.SVGElement&&this.findDOMNode()instanceof window.SVGElement&&this.setState({isElementSVG:!0})}componentWillUnmount(){this.setState({dragging:!1})}findDOMNode(){var t,e;return null!==(t=null===(e=this.props)||void 0===e||null===(e=e.nodeRef)||void 0===e?void 0:e.current)&&void 0!==t?t:i.default.findDOMNode(this)}render(){const{axis:t,bounds:e,children:n,defaultPosition:o,defaultClassName:i,defaultClassNameDragging:u,defaultClassNameDragged:p,position:d,positionOffset:h,scale:g,...m}=this.props;let y={},b=null;const v=!Boolean(d)||this.state.dragging,w=d||o,S={x:(0,l.canDragX)(this)&&v?this.state.x:w.x,y:(0,l.canDragY)(this)&&v?this.state.y:w.y};this.state.isElementSVG?b=(0,s.createSVGTransform)(S,h):y=(0,s.createCSSTransform)(S,h);const O=(0,a.default)(n.props.className||"",i,{[u]:this.state.dragging,[p]:this.state.dragged});return r.createElement(c.default,f({},m,{onStart:this.onDragStart,onDrag:this.onDrag,onStop:this.onDragStop}),r.cloneElement(r.Children.only(n),{className:O,style:{...n.props.style,...y},transform:b}))}}e.default=m,g(m,"displayName","Draggable"),g(m,"propTypes",{...c.default.propTypes,axis:o.default.oneOf(["both","x","y","none"]),bounds:o.default.oneOfType([o.default.shape({left:o.default.number,right:o.default.number,top:o.default.number,bottom:o.default.number}),o.default.string,o.default.oneOf([!1])]),defaultClassName:o.default.string,defaultClassNameDragging:o.default.string,defaultClassNameDragged:o.default.string,defaultPosition:o.default.shape({x:o.default.number,y:o.default.number}),positionOffset:o.default.shape({x:o.default.oneOfType([o.default.number,o.default.string]),y:o.default.oneOfType([o.default.number,o.default.string])}),position:o.default.shape({x:o.default.number,y:o.default.number}),className:u.dontSetMe,style:u.dontSetMe,transform:u.dontSetMe}),g(m,"defaultProps",{...c.default.defaultProps,axis:"both",bounds:!1,defaultClassName:"react-draggable",defaultClassNameDragging:"react-draggable-dragging",defaultClassNameDragged:"react-draggable-dragged",defaultPosition:{x:0,y:0},scale:1})},30:(t,e,n)=>{"use strict";e.__esModule=!0,e.cloneElement=function(t,e){return e.style&&t.props.style&&(e.style=a(a({},t.props.style),e.style)),e.className&&t.props.className&&(e.className=t.props.className+" "+e.className),o.default.cloneElement(t,e)};var r,o=(r=n(12))&&r.__esModule?r:{default:r};function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function a(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?i(Object(n),!0).forEach(function(e){s(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function s(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||null===t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:String(e)}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}},33:t=>{"use strict";t.exports=e},36:(t,e,n)=>{"use strict";t.exports=function(){throw new Error("Don't instantiate Resizable directly! Use require('react-resizable').Resizable")},t.exports.Resizable=n(630).default,t.exports.ResizableBox=n(661).default},56:(t,e)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.dontSetMe=function(t,e,n){if(t[e])return new Error("Invalid prop ".concat(e," passed to ").concat(n," - do not set this, set it on the child."))},e.findInArray=function(t,e){for(let n=0,r=t.length;n<r;n++)if(e.apply(e,[t[n],n,t]))return t[n]},e.int=function(t){return parseInt(t,10)},e.isFunction=function(t){return"function"==typeof t||"[object Function]"===Object.prototype.toString.call(t)},e.isNum=function(t){return"number"==typeof t&&!isNaN(t)}},89:(t,e,n)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.addClassName=u,e.addEvent=function(t,e,n,r){if(!t)return;const o={capture:!0,...r};t.addEventListener?t.addEventListener(e,n,o):t.attachEvent?t.attachEvent("on"+e,n):t["on"+e]=n},e.addUserSelectStyles=function(t){if(!t)return;let e=t.getElementById("react-draggable-style-el");e||(e=t.createElement("style"),e.type="text/css",e.id="react-draggable-style-el",e.innerHTML=".react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n",e.innerHTML+=".react-draggable-transparent-selection *::selection {all: inherit;}\n",t.getElementsByTagName("head")[0].appendChild(e)),t.body&&u(t.body,"react-draggable-transparent-selection")},e.createCSSTransform=function(t,e){const n=l(t,e,"px");return{[(0,o.browserPrefixToKey)("transform",o.default)]:n}},e.createSVGTransform=function(t,e){return l(t,e,"")},e.getTouch=function(t,e){return t.targetTouches&&(0,r.findInArray)(t.targetTouches,t=>e===t.identifier)||t.changedTouches&&(0,r.findInArray)(t.changedTouches,t=>e===t.identifier)},e.getTouchIdentifier=function(t){return t.targetTouches&&t.targetTouches[0]?t.targetTouches[0].identifier:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0].identifier:void 0},e.getTranslation=l,e.innerHeight=function(t){let e=t.clientHeight;const n=t.ownerDocument.defaultView.getComputedStyle(t);return e-=(0,r.int)(n.paddingTop),e-=(0,r.int)(n.paddingBottom),e},e.innerWidth=function(t){let e=t.clientWidth;const n=t.ownerDocument.defaultView.getComputedStyle(t);return e-=(0,r.int)(n.paddingLeft),e-=(0,r.int)(n.paddingRight),e},e.matchesSelector=s,e.matchesSelectorAndParentsTo=function(t,e,n){let r=t;do{if(s(r,e))return!0;if(r===n)return!1;r=r.parentNode}while(r);return!1},e.offsetXYFromParent=function(t,e,n){const r=e===e.ownerDocument.body?{left:0,top:0}:e.getBoundingClientRect();return{x:(t.clientX+e.scrollLeft-r.left)/n,y:(t.clientY+e.scrollTop-r.top)/n}},e.outerHeight=function(t){let e=t.clientHeight;const n=t.ownerDocument.defaultView.getComputedStyle(t);return e+=(0,r.int)(n.borderTopWidth),e+=(0,r.int)(n.borderBottomWidth),e},e.outerWidth=function(t){let e=t.clientWidth;const n=t.ownerDocument.defaultView.getComputedStyle(t);return e+=(0,r.int)(n.borderLeftWidth),e+=(0,r.int)(n.borderRightWidth),e},e.removeClassName=c,e.removeEvent=function(t,e,n,r){if(!t)return;const o={capture:!0,...r};t.removeEventListener?t.removeEventListener(e,n,o):t.detachEvent?t.detachEvent("on"+e,n):t["on"+e]=null},e.removeUserSelectStyles=function(t){if(t)try{if(t.body&&c(t.body,"react-draggable-transparent-selection"),t.selection)t.selection.empty();else{const e=(t.defaultView||window).getSelection();e&&"Caret"!==e.type&&e.removeAllRanges()}}catch(t){}};var r=n(56),o=function(t,e){if(t&&t.__esModule)return t;if(null===t||"object"!=typeof t&&"function"!=typeof t)return{default:t};var n=i(e);if(n&&n.has(t))return n.get(t);var r={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in t)if("default"!==a&&Object.prototype.hasOwnProperty.call(t,a)){var s=o?Object.getOwnPropertyDescriptor(t,a):null;s&&(s.get||s.set)?Object.defineProperty(r,a,s):r[a]=t[a]}return r.default=t,n&&n.set(t,r),r}(n(514));function i(t){if("function"!=typeof WeakMap)return null;var e=new WeakMap,n=new WeakMap;return(i=function(t){return t?n:e})(t)}let a="";function s(t,e){return a||(a=(0,r.findInArray)(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],function(e){return(0,r.isFunction)(t[e])})),!!(0,r.isFunction)(t[a])&&t[a](e)}function l(t,e,n){let{x:r,y:o}=t,i="translate(".concat(r).concat(n,",").concat(o).concat(n,")");if(e){const t="".concat("string"==typeof e.x?e.x:e.x+n),r="".concat("string"==typeof e.y?e.y:e.y+n);i="translate(".concat(t,", ").concat(r,")")+i}return i}function u(t,e){t.classList?t.classList.add(e):t.className.match(new RegExp("(?:^|\\s)".concat(e,"(?!\\S)")))||(t.className+=" ".concat(e))}function c(t,e){t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(?:^|\\s)".concat(e,"(?!\\S)"),"g"),"")}},159:(t,e,n)=>{"use strict";n.d(e,{default:()=>f});var r=n(12),o=n(556),i=n.n(o),a=n(548),s=n(335),l=n(209),u=n(326);function c(){return c=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)({}).hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},c.apply(null,arguments)}function p(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}const d=t=>Object.prototype.toString.call(t);function h(t,e){return null==t?null:Array.isArray(t)?t:t[e]}class f extends r.Component{constructor(){super(...arguments),p(this,"state",this.generateInitialState()),p(this,"onLayoutChange",t=>{this.props.onLayoutChange(t,{...this.props.layouts,[this.state.breakpoint]:t})})}generateInitialState(){const{width:t,breakpoints:e,layouts:n,cols:r}=this.props,o=(0,l.getBreakpointFromWidth)(e,t),i=(0,l.getColsFromBreakpoint)(o,r),a=!1===this.props.verticalCompact?null:this.props.compactType;return{layout:(0,l.findOrGenerateResponsiveLayout)(n,e,o,o,i,a),breakpoint:o,cols:i}}static getDerivedStateFromProps(t,e){if(!(0,a.deepEqual)(t.layouts,e.layouts)){const{breakpoint:n,cols:r}=e;return{layout:(0,l.findOrGenerateResponsiveLayout)(t.layouts,t.breakpoints,n,n,r,t.compactType),layouts:t.layouts}}return null}componentDidUpdate(t){this.props.width==t.width&&this.props.breakpoint===t.breakpoint&&(0,a.deepEqual)(this.props.breakpoints,t.breakpoints)&&(0,a.deepEqual)(this.props.cols,t.cols)||this.onWidthChange(t)}onWidthChange(t){const{breakpoints:e,cols:n,layouts:r,compactType:o}=this.props,i=this.props.breakpoint||(0,l.getBreakpointFromWidth)(this.props.breakpoints,this.props.width),a=this.state.breakpoint,u=(0,l.getColsFromBreakpoint)(i,n),c={...r};if(a!==i||t.breakpoints!==e||t.cols!==n){a in c||(c[a]=(0,s.cloneLayout)(this.state.layout));let t=(0,l.findOrGenerateResponsiveLayout)(c,e,i,a,u,o);t=(0,s.synchronizeLayoutWithChildren)(t,this.props.children,u,o,this.props.allowOverlap),c[i]=t,this.props.onBreakpointChange(i,u),this.props.onLayoutChange(t,c),this.setState({breakpoint:i,layout:t,cols:u})}const p=h(this.props.margin,i),d=h(this.props.containerPadding,i);this.props.onWidthChange(this.props.width,p,u,d)}render(){const{breakpoint:t,breakpoints:e,cols:n,layouts:o,margin:i,containerPadding:a,onBreakpointChange:s,onLayoutChange:l,onWidthChange:p,...d}=this.props;return r.createElement(u.default,c({},d,{margin:h(i,this.state.breakpoint),containerPadding:h(a,this.state.breakpoint),onLayoutChange:this.onLayoutChange,layout:this.state.layout,cols:this.state.cols}))}}p(f,"propTypes",{breakpoint:i().string,breakpoints:i().object,allowOverlap:i().bool,cols:i().object,margin:i().oneOfType([i().array,i().object]),containerPadding:i().oneOfType([i().array,i().object]),layouts(t,e){if("[object Object]"!==d(t[e]))throw new Error("Layout property must be an object. Received: "+d(t[e]));Object.keys(t[e]).forEach(e=>{if(!(e in t.breakpoints))throw new Error("Each key in layouts must align with a key in breakpoints.");(0,s.validateLayout)(t.layouts[e],"layouts."+e)})},width:i().number.isRequired,onBreakpointChange:i().func,onLayoutChange:i().func,onWidthChange:i().func}),p(f,"defaultProps",{breakpoints:{lg:1200,md:996,sm:768,xs:480,xxs:0},cols:{lg:12,md:10,sm:6,xs:4,xxs:2},containerPadding:{lg:null,md:null,sm:null,xs:null,xxs:null},layouts:{},margin:[10,10],allowOverlap:!1,onBreakpointChange:s.noop,onLayoutChange:s.noop,onWidthChange:s.noop})},164:(t,e,n)=>{"use strict";function r(t){var e,n,o="";if("string"==typeof t||"number"==typeof t)o+=t;else if("object"==typeof t)if(Array.isArray(t)){var i=t.length;for(e=0;e<i;e++)t[e]&&(n=r(t[e]))&&(o&&(o+=" "),o+=n)}else for(n in t)t[n]&&(o&&(o+=" "),o+=n);return o}n.d(e,{A:()=>o});const o=function(){for(var t,e,n=0,o="",i=arguments.length;n<i;n++)(t=arguments[n])&&(e=r(t))&&(o&&(o+=" "),o+=e);return o}},209:(t,e,n)=>{"use strict";n.r(e),n.d(e,{findOrGenerateResponsiveLayout:()=>a,getBreakpointFromWidth:()=>o,getColsFromBreakpoint:()=>i,sortBreakpoints:()=>s});var r=n(335);function o(t,e){const n=s(t);let r=n[0];for(let o=1,i=n.length;o<i;o++){const i=n[o];e>t[i]&&(r=i)}return r}function i(t,e){if(!e[t])throw new Error("ResponsiveReactGridLayout: `cols` entry for breakpoint "+t+" is missing!");return e[t]}function a(t,e,n,o,i,a){if(t[n])return(0,r.cloneLayout)(t[n]);let l=t[o];const u=s(e),c=u.slice(u.indexOf(n));for(let e=0,n=c.length;e<n;e++){const n=c[e];if(t[n]){l=t[n];break}}return l=(0,r.cloneLayout)(l||[]),(0,r.compact)((0,r.correctBounds)(l,{cols:i}),a,i)}function s(t){return Object.keys(t).sort(function(e,n){return t[e]-t[n]})}},224:(t,e,n)=>{"use strict";n.d(e,{default:()=>M});var r=n(12),o=n(556),i=n.n(o),a=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var n=-1;return t.some(function(t,r){return t[0]===e&&(n=r,!0)}),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var n=t(this.__entries__,e),r=this.__entries__[n];return r&&r[1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype.delete=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var n=0,r=this.__entries__;n<r.length;n++){var o=r[n];t.call(e,o[1],o[0])}},e}()}(),s="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,l=void 0!==n.g&&n.g.Math===Math?n.g:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),u="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(l):function(t){return setTimeout(function(){return t(Date.now())},1e3/60)},c=["top","right","bottom","left","width","height","size","weight"],p="undefined"!=typeof MutationObserver,d=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t){var e=!1,n=!1,r=0;function o(){e&&(e=!1,t()),n&&a()}function i(){u(o)}function a(){var t=Date.now();if(e){if(t-r<2)return;n=!0}else e=!0,n=!1,setTimeout(i,20);r=t}return a}(this.refresh.bind(this))}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var e=this.observers_,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this.connected_&&this.disconnect_()},t.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},t.prototype.updateObservers_=function(){var t=this.observers_.filter(function(t){return t.gatherActive(),t.hasActive()});return t.forEach(function(t){return t.broadcastActive()}),t.length>0},t.prototype.connect_=function(){s&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),p?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){s&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,n=void 0===e?"":e;c.some(function(t){return!!~n.indexOf(t)})&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),h=function(t,e){for(var n=0,r=Object.keys(e);n<r.length;n++){var o=r[n];Object.defineProperty(t,o,{value:e[o],enumerable:!1,writable:!1,configurable:!0})}return t},f=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||l},g=w(0,0,0,0);function m(t){return parseFloat(t)||0}function y(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return e.reduce(function(e,n){return e+m(t["border-"+n+"-width"])},0)}var b="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof f(t).SVGGraphicsElement}:function(t){return t instanceof f(t).SVGElement&&"function"==typeof t.getBBox};function v(t){return s?b(t)?function(t){var e=t.getBBox();return w(0,0,e.width,e.height)}(t):function(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n)return g;var r=f(t).getComputedStyle(t),o=function(t){for(var e={},n=0,r=["top","right","bottom","left"];n<r.length;n++){var o=r[n],i=t["padding-"+o];e[o]=m(i)}return e}(r),i=o.left+o.right,a=o.top+o.bottom,s=m(r.width),l=m(r.height);if("border-box"===r.boxSizing&&(Math.round(s+i)!==e&&(s-=y(r,"left","right")+i),Math.round(l+a)!==n&&(l-=y(r,"top","bottom")+a)),!function(t){return t===f(t).document.documentElement}(t)){var u=Math.round(s+i)-e,c=Math.round(l+a)-n;1!==Math.abs(u)&&(s-=u),1!==Math.abs(c)&&(l-=c)}return w(o.left,o.top,s,l)}(t):g}function w(t,e,n,r){return{x:t,y:e,width:n,height:r}}var S=function(){function t(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=w(0,0,0,0),this.target=t}return t.prototype.isActive=function(){var t=v(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t}(),O=function(t,e){var n,r,o,i,a,s,l,u=(r=(n=e).x,o=n.y,i=n.width,a=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(s.prototype),h(l,{x:r,y:o,width:i,height:a,top:o,right:r+i,bottom:a+o,left:r}),l);h(this,{target:t,contentRect:u})},x=function(){function t(t,e,n){if(this.activeObservations_=[],this.observations_=new a,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=n}return t.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof f(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new S(t)),this.controller_.addObserver(this),this.controller_.refresh())}},t.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof f(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)&&(e.delete(t),e.size||this.controller_.removeObserver(this))}},t.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},t.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach(function(e){e.isActive()&&t.activeObservations_.push(e)})},t.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map(function(t){return new O(t.target,t.broadcastRect())});this.callback_.call(t,e,t),this.clearActive()}},t.prototype.clearActive=function(){this.activeObservations_.splice(0)},t.prototype.hasActive=function(){return this.activeObservations_.length>0},t}(),D="undefined"!=typeof WeakMap?new WeakMap:new a,R=function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=d.getInstance(),r=new x(e,n,this);D.set(this,r)};["observe","unobserve","disconnect"].forEach(function(t){R.prototype[t]=function(){var e;return(e=D.get(this))[t].apply(e,arguments)}});const P=void 0!==l.ResizeObserver?l.ResizeObserver:R;var E=n(164);function z(){return z=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)({}).hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},z.apply(null,arguments)}function j(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}const C="react-grid-layout";function M(t){var e;return e=class extends r.Component{constructor(){super(...arguments),j(this,"state",{width:1280}),j(this,"elementRef",r.createRef()),j(this,"mounted",!1),j(this,"resizeObserver",void 0)}componentDidMount(){this.mounted=!0,this.resizeObserver=new P(t=>{if(this.elementRef.current instanceof HTMLElement){const e=t[0].contentRect.width;this.setState({width:e})}});const t=this.elementRef.current;t instanceof HTMLElement&&this.resizeObserver.observe(t)}componentWillUnmount(){this.mounted=!1;const t=this.elementRef.current;t instanceof HTMLElement&&this.resizeObserver.unobserve(t),this.resizeObserver.disconnect()}render(){const{measureBeforeMount:e,...n}=this.props;return e&&!this.mounted?r.createElement("div",{className:(0,E.A)(this.props.className,C),style:this.props.style,ref:this.elementRef}):r.createElement(t,z({innerRef:this.elementRef},n,this.state))}},j(e,"defaultProps",{measureBeforeMount:!1}),j(e,"propTypes",{measureBeforeMount:i().bool}),e}},322:(t,e,n)=>{"use strict";function r(t){var e,n,o="";if("string"==typeof t||"number"==typeof t)o+=t;else if("object"==typeof t)if(Array.isArray(t))for(e=0;e<t.length;e++)t[e]&&(n=r(t[e]))&&(o&&(o+=" "),o+=n);else for(e in t)t[e]&&(o&&(o+=" "),o+=e);return o}function o(){for(var t,e,n=0,o="";n<arguments.length;)(t=arguments[n++])&&(e=r(t))&&(o&&(o+=" "),o+=e);return o}n.r(e),n.d(e,{clsx:()=>o,default:()=>i});const i=o},326:(t,e,n)=>{"use strict";n.d(e,{default:()=>O});var r=n(12),o=n.n(r),i=n(548),a=n(164),s=n(335),l=n(417),u=n(33),c=n(556),p=n.n(c),d=n(794),h=n(36);const f=p().arrayOf(p().oneOf(["s","w","e","n","sw","nw","se","ne"])),g=p().oneOfType([p().node,p().func]),m={className:p().string,style:p().object,width:p().number,autoSize:p().bool,cols:p().number,draggableCancel:p().string,draggableHandle:p().string,verticalCompact:function(t){t.verticalCompact},compactType:p().oneOf(["vertical","horizontal"]),layout:function(t){var e=t.layout;void 0!==e&&n(335).validateLayout(e,"layout")},margin:p().arrayOf(p().number),containerPadding:p().arrayOf(p().number),rowHeight:p().number,maxRows:p().number,isBounded:p().bool,isDraggable:p().bool,isResizable:p().bool,allowOverlap:p().bool,preventCollision:p().bool,useCSSTransforms:p().bool,transformScale:p().number,isDroppable:p().bool,resizeHandles:f,resizeHandle:g,onLayoutChange:p().func,onDragStart:p().func,onDrag:p().func,onDragStop:p().func,onResizeStart:p().func,onResize:p().func,onResizeStop:p().func,onDrop:p().func,droppingItem:p().shape({i:p().string.isRequired,w:p().number.isRequired,h:p().number.isRequired}),children:function(t,e){const n=t[e],r={};o().Children.forEach(n,function(t){if(null!=t?.key){if(r[t.key])throw new Error('Duplicate child key "'+t.key+'" found! This will cause problems in ReactGridLayout.');r[t.key]=!0}})},innerRef:p().any};function y(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}class b extends o().Component{constructor(){super(...arguments),y(this,"state",{resizing:null,dragging:null,className:""}),y(this,"elementRef",o().createRef()),y(this,"onDragStart",(t,e)=>{let{node:n}=e;const{onDragStart:r,transformScale:o}=this.props;if(!r)return;const i={top:0,left:0},{offsetParent:a}=n;if(!a)return;const s=a.getBoundingClientRect(),u=n.getBoundingClientRect(),c=u.left/o,p=s.left/o,d=u.top/o,h=s.top/o;i.left=c-p+a.scrollLeft,i.top=d-h+a.scrollTop,this.setState({dragging:i});const{x:f,y:g}=(0,l.calcXY)(this.getPositionParams(),i.top,i.left,this.props.w,this.props.h);return r.call(this,this.props.i,f,g,{e:t,node:n,newPosition:i})}),y(this,"onDrag",(t,e,n)=>{let{node:r,deltaX:o,deltaY:i}=e;const{onDrag:a}=this.props;if(!a)return;if(!this.state.dragging)throw new Error("onDrag called before onDragStart.");let s=this.state.dragging.top+i,c=this.state.dragging.left+o;const{isBounded:p,i:d,w:h,h:f,containerWidth:g}=this.props,m=this.getPositionParams();if(p){const{offsetParent:t}=r;if(t){const{margin:e,rowHeight:n}=this.props,r=t.clientHeight-(0,l.calcGridItemWHPx)(f,n,e[1]);s=(0,l.clamp)(s,0,r);const o=(0,l.calcGridColWidth)(m),i=g-(0,l.calcGridItemWHPx)(h,o,e[0]);c=(0,l.clamp)(c,0,i)}}const y={top:s,left:c};n?this.setState({dragging:y}):(0,u.flushSync)(()=>{this.setState({dragging:y})});const{x:b,y:v}=(0,l.calcXY)(m,s,c,h,f);return a.call(this,d,b,v,{e:t,node:r,newPosition:y})}),y(this,"onDragStop",(t,e)=>{let{node:n}=e;const{onDragStop:r}=this.props;if(!r)return;if(!this.state.dragging)throw new Error("onDragEnd called before onDragStart.");const{w:o,h:i,i:a}=this.props,{left:s,top:u}=this.state.dragging,c={top:u,left:s};this.setState({dragging:null});const{x:p,y:d}=(0,l.calcXY)(this.getPositionParams(),u,s,o,i);return r.call(this,a,p,d,{e:t,node:n,newPosition:c})}),y(this,"onResizeStop",(t,e,n)=>this.onResizeHandler(t,e,n,"onResizeStop")),y(this,"onResizeStart",(t,e,n)=>this.onResizeHandler(t,e,n,"onResizeStart")),y(this,"onResize",(t,e,n)=>this.onResizeHandler(t,e,n,"onResize"))}shouldComponentUpdate(t,e){if(this.props.children!==t.children)return!0;if(this.props.droppingPosition!==t.droppingPosition)return!0;const n=(0,l.calcGridItemPosition)(this.getPositionParams(this.props),this.props.x,this.props.y,this.props.w,this.props.h,this.state),r=(0,l.calcGridItemPosition)(this.getPositionParams(t),t.x,t.y,t.w,t.h,e);return!(0,s.fastPositionEqual)(n,r)||this.props.useCSSTransforms!==t.useCSSTransforms}componentDidMount(){this.moveDroppingItem({})}componentDidUpdate(t){this.moveDroppingItem(t)}moveDroppingItem(t){const{droppingPosition:e}=this.props;if(!e)return;const n=this.elementRef.current;if(!n)return;const r=t.droppingPosition||{left:0,top:0},{dragging:o}=this.state,i=o&&e.left!==r.left||e.top!==r.top;if(o){if(i){const t=e.left-o.left,r=e.top-o.top;this.onDrag(e.e,{node:n,deltaX:t,deltaY:r},!0)}}else this.onDragStart(e.e,{node:n,deltaX:e.left,deltaY:e.top})}getPositionParams(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props;return{cols:t.cols,containerPadding:t.containerPadding,containerWidth:t.containerWidth,margin:t.margin,maxRows:t.maxRows,rowHeight:t.rowHeight}}createStyle(t){const{usePercentages:e,containerWidth:n,useCSSTransforms:r}=this.props;let o;return r?o=(0,s.setTransform)(t):(o=(0,s.setTopLeft)(t),e&&(o.left=(0,s.perc)(t.left/n),o.width=(0,s.perc)(t.width/n))),o}mixinDraggable(t,e){return o().createElement(d.DraggableCore,{disabled:!e,onStart:this.onDragStart,onDrag:this.onDrag,onStop:this.onDragStop,handle:this.props.handle,cancel:".react-resizable-handle"+(this.props.cancel?","+this.props.cancel:""),scale:this.props.transformScale,nodeRef:this.elementRef},t)}curryResizeHandler(t,e){return(n,r)=>e(n,r,t)}mixinResizable(t,e,n){const{cols:r,minW:i,minH:a,maxW:s,maxH:u,transformScale:c,resizeHandles:p,resizeHandle:d}=this.props,f=this.getPositionParams(),g=(0,l.calcGridItemPosition)(f,0,0,r,0).width,m=(0,l.calcGridItemPosition)(f,0,0,i,a),y=(0,l.calcGridItemPosition)(f,0,0,s,u),b=[m.width,m.height],v=[Math.min(y.width,g),Math.min(y.height,1/0)];return o().createElement(h.Resizable,{draggableOpts:{disabled:!n},className:n?void 0:"react-resizable-hide",width:e.width,height:e.height,minConstraints:b,maxConstraints:v,onResizeStop:this.curryResizeHandler(e,this.onResizeStop),onResizeStart:this.curryResizeHandler(e,this.onResizeStart),onResize:this.curryResizeHandler(e,this.onResize),transformScale:c,resizeHandles:p,handle:d},t)}onResizeHandler(t,e,n,r){let{node:o,size:i,handle:a}=e;const c=this.props[r];if(!c)return;const{x:p,y:d,i:h,maxH:f,minH:g,containerWidth:m}=this.props,{minW:y,maxW:b}=this.props;let v=i;o&&(v=(0,s.resizeItemInDirection)(a,n,i,m),(0,u.flushSync)(()=>{this.setState({resizing:"onResizeStop"===r?null:v})}));let{w,h:S}=(0,l.calcWH)(this.getPositionParams(),v.width,v.height,p,d,a);w=(0,l.clamp)(w,Math.max(y,1),b),S=(0,l.clamp)(S,g,f),c.call(this,h,w,S,{e:t,node:o,size:v,handle:a})}render(){const{x:t,y:e,w:n,h:r,isDraggable:i,isResizable:s,droppingPosition:u,useCSSTransforms:c}=this.props,p=(0,l.calcGridItemPosition)(this.getPositionParams(),t,e,n,r,this.state),d=o().Children.only(this.props.children);let h=o().cloneElement(d,{ref:this.elementRef,className:(0,a.A)("react-grid-item",d.props.className,this.props.className,{static:this.props.static,resizing:Boolean(this.state.resizing),"react-draggable":i,"react-draggable-dragging":Boolean(this.state.dragging),dropping:Boolean(u),cssTransforms:c}),style:{...this.props.style,...d.props.style,...this.createStyle(p)}});return h=this.mixinResizable(h,p,s),h=this.mixinDraggable(h,i),h}}function v(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}y(b,"propTypes",{children:p().element,cols:p().number.isRequired,containerWidth:p().number.isRequired,rowHeight:p().number.isRequired,margin:p().array.isRequired,maxRows:p().number.isRequired,containerPadding:p().array.isRequired,x:p().number.isRequired,y:p().number.isRequired,w:p().number.isRequired,h:p().number.isRequired,minW:function(t,e){const n=t[e];return"number"!=typeof n?new Error("minWidth not Number"):n>t.w||n>t.maxW?new Error("minWidth larger than item width/maxWidth"):void 0},maxW:function(t,e){const n=t[e];return"number"!=typeof n?new Error("maxWidth not Number"):n<t.w||n<t.minW?new Error("maxWidth smaller than item width/minWidth"):void 0},minH:function(t,e){const n=t[e];return"number"!=typeof n?new Error("minHeight not Number"):n>t.h||n>t.maxH?new Error("minHeight larger than item height/maxHeight"):void 0},maxH:function(t,e){const n=t[e];return"number"!=typeof n?new Error("maxHeight not Number"):n<t.h||n<t.minH?new Error("maxHeight smaller than item height/minHeight"):void 0},i:p().string.isRequired,resizeHandles:f,resizeHandle:g,onDragStop:p().func,onDragStart:p().func,onDrag:p().func,onResizeStop:p().func,onResizeStart:p().func,onResize:p().func,isDraggable:p().bool.isRequired,isResizable:p().bool.isRequired,isBounded:p().bool.isRequired,static:p().bool,useCSSTransforms:p().bool.isRequired,transformScale:p().number,className:p().string,handle:p().string,cancel:p().string,droppingPosition:p().shape({e:p().object.isRequired,left:p().number.isRequired,top:p().number.isRequired})}),y(b,"defaultProps",{className:"",cancel:"",handle:"",minH:1,minW:1,maxH:1/0,maxW:1/0,transformScale:1});const w="react-grid-layout";let S=!1;try{S=/firefox/i.test(navigator.userAgent)}catch(t){}class O extends r.Component{constructor(){super(...arguments),v(this,"state",{activeDrag:null,layout:(0,s.synchronizeLayoutWithChildren)(this.props.layout,this.props.children,this.props.cols,(0,s.compactType)(this.props),this.props.allowOverlap),mounted:!1,oldDragItem:null,oldLayout:null,oldResizeItem:null,resizing:!1,droppingDOMNode:null,children:[]}),v(this,"dragEnterCounter",0),v(this,"onDragStart",(t,e,n,r)=>{let{e:o,node:i}=r;const{layout:a}=this.state,l=(0,s.getLayoutItem)(a,t);if(!l)return;const u={w:l.w,h:l.h,x:l.x,y:l.y,placeholder:!0,i:t};return this.setState({oldDragItem:(0,s.cloneLayoutItem)(l),oldLayout:a,activeDrag:u}),this.props.onDragStart(a,l,l,null,o,i)}),v(this,"onDrag",(t,e,n,r)=>{let{e:o,node:i}=r;const{oldDragItem:a}=this.state;let{layout:l}=this.state;const{cols:u,allowOverlap:c,preventCollision:p}=this.props,d=(0,s.getLayoutItem)(l,t);if(!d)return;const h={w:d.w,h:d.h,x:d.x,y:d.y,placeholder:!0,i:t};l=(0,s.moveElement)(l,d,e,n,!0,p,(0,s.compactType)(this.props),u,c),this.props.onDrag(l,a,d,h,o,i),this.setState({layout:c?l:(0,s.compact)(l,(0,s.compactType)(this.props),u),activeDrag:h})}),v(this,"onDragStop",(t,e,n,r)=>{let{e:o,node:i}=r;if(!this.state.activeDrag)return;const{oldDragItem:a}=this.state;let{layout:l}=this.state;const{cols:u,preventCollision:c,allowOverlap:p}=this.props,d=(0,s.getLayoutItem)(l,t);if(!d)return;l=(0,s.moveElement)(l,d,e,n,!0,c,(0,s.compactType)(this.props),u,p);const h=p?l:(0,s.compact)(l,(0,s.compactType)(this.props),u);this.props.onDragStop(h,a,d,null,o,i);const{oldLayout:f}=this.state;this.setState({activeDrag:null,layout:h,oldDragItem:null,oldLayout:null}),this.onLayoutMaybeChanged(h,f)}),v(this,"onResizeStart",(t,e,n,r)=>{let{e:o,node:i}=r;const{layout:a}=this.state,l=(0,s.getLayoutItem)(a,t);l&&(this.setState({oldResizeItem:(0,s.cloneLayoutItem)(l),oldLayout:this.state.layout,resizing:!0}),this.props.onResizeStart(a,l,l,null,o,i))}),v(this,"onResize",(t,e,n,r)=>{let{e:o,node:i,size:a,handle:l}=r;const{oldResizeItem:u}=this.state,{layout:c}=this.state,{cols:p,preventCollision:d,allowOverlap:h}=this.props;let f,g,m,y=!1;const[b,v]=(0,s.withLayoutItem)(c,t,t=>{let r;return g=t.x,m=t.y,-1!==["sw","w","nw","n","ne"].indexOf(l)&&(-1!==["sw","nw","w"].indexOf(l)&&(g=t.x+(t.w-e),e=t.x!==g&&g<0?t.w:e,g=g<0?0:g),-1!==["ne","n","nw"].indexOf(l)&&(m=t.y+(t.h-n),n=t.y!==m&&m<0?t.h:n,m=m<0?0:m),y=!0),d&&!h&&(r=(0,s.getAllCollisions)(c,{...t,w:e,h:n,x:g,y:m}).filter(e=>e.i!==t.i).length>0,r&&(m=t.y,n=t.h,g=t.x,e=t.w,y=!1)),t.w=e,t.h=n,t});if(!v)return;if(f=b,y){const t=!0;f=(0,s.moveElement)(b,v,g,m,t,this.props.preventCollision,(0,s.compactType)(this.props),p,h)}const w={w:v.w,h:v.h,x:v.x,y:v.y,static:!0,i:t};this.props.onResize(f,u,v,w,o,i),this.setState({layout:h?f:(0,s.compact)(f,(0,s.compactType)(this.props),p),activeDrag:w})}),v(this,"onResizeStop",(t,e,n,r)=>{let{e:o,node:i}=r;const{layout:a,oldResizeItem:l}=this.state,{cols:u,allowOverlap:c}=this.props,p=(0,s.getLayoutItem)(a,t),d=c?a:(0,s.compact)(a,(0,s.compactType)(this.props),u);this.props.onResizeStop(d,l,p,null,o,i);const{oldLayout:h}=this.state;this.setState({activeDrag:null,layout:d,oldResizeItem:null,oldLayout:null,resizing:!1}),this.onLayoutMaybeChanged(d,h)}),v(this,"onDragOver",t=>{if(t.preventDefault(),t.stopPropagation(),S&&!t.nativeEvent.target?.classList.contains(w))return!1;const{droppingItem:e,onDropDragOver:n,margin:o,cols:i,rowHeight:a,maxRows:s,width:u,containerPadding:c,transformScale:p}=this.props,d=n?.(t);if(!1===d)return this.state.droppingDOMNode&&this.removeDroppingPlaceholder(),!1;const h={...e,...d},{layout:f}=this.state,g=t.currentTarget.getBoundingClientRect(),m=t.clientX-g.left,y=t.clientY-g.top,b={left:m/p,top:y/p,e:t};if(this.state.droppingDOMNode){if(this.state.droppingPosition){const{left:t,top:e}=this.state.droppingPosition;(t!=m||e!=y)&&this.setState({droppingPosition:b})}}else{const t={cols:i,margin:o,maxRows:s,rowHeight:a,containerWidth:u,containerPadding:c||o},e=(0,l.calcXY)(t,y,m,h.w,h.h);this.setState({droppingDOMNode:r.createElement("div",{key:h.i}),droppingPosition:b,layout:[...f,{...h,x:e.x,y:e.y,static:!1,isDraggable:!0}]})}}),v(this,"removeDroppingPlaceholder",()=>{const{droppingItem:t,cols:e}=this.props,{layout:n}=this.state,r=(0,s.compact)(n.filter(e=>e.i!==t.i),(0,s.compactType)(this.props),e,this.props.allowOverlap);this.setState({layout:r,droppingDOMNode:null,activeDrag:null,droppingPosition:void 0})}),v(this,"onDragLeave",t=>{t.preventDefault(),t.stopPropagation(),this.dragEnterCounter--,0===this.dragEnterCounter&&this.removeDroppingPlaceholder()}),v(this,"onDragEnter",t=>{t.preventDefault(),t.stopPropagation(),this.dragEnterCounter++}),v(this,"onDrop",t=>{t.preventDefault(),t.stopPropagation();const{droppingItem:e}=this.props,{layout:n}=this.state,r=n.find(t=>t.i===e.i);this.dragEnterCounter=0,this.removeDroppingPlaceholder(),this.props.onDrop(n,r,t)})}componentDidMount(){this.setState({mounted:!0}),this.onLayoutMaybeChanged(this.state.layout,this.props.layout)}static getDerivedStateFromProps(t,e){let n;return e.activeDrag?null:((0,i.deepEqual)(t.layout,e.propsLayout)&&t.compactType===e.compactType?(0,s.childrenEqual)(t.children,e.children)||(n=e.layout):n=t.layout,n?{layout:(0,s.synchronizeLayoutWithChildren)(n,t.children,t.cols,(0,s.compactType)(t),t.allowOverlap),compactType:t.compactType,children:t.children,propsLayout:t.layout}:null)}shouldComponentUpdate(t,e){return this.props.children!==t.children||!(0,s.fastRGLPropsEqual)(this.props,t,i.deepEqual)||this.state.activeDrag!==e.activeDrag||this.state.mounted!==e.mounted||this.state.droppingPosition!==e.droppingPosition}componentDidUpdate(t,e){if(!this.state.activeDrag){const t=this.state.layout,n=e.layout;this.onLayoutMaybeChanged(t,n)}}containerHeight(){if(!this.props.autoSize)return;const t=(0,s.bottom)(this.state.layout),e=this.props.containerPadding?this.props.containerPadding[1]:this.props.margin[1];return t*this.props.rowHeight+(t-1)*this.props.margin[1]+2*e+"px"}onLayoutMaybeChanged(t,e){e||(e=this.state.layout),(0,i.deepEqual)(e,t)||this.props.onLayoutChange(t)}placeholder(){const{activeDrag:t}=this.state;if(!t)return null;const{width:e,cols:n,margin:o,containerPadding:i,rowHeight:a,maxRows:s,useCSSTransforms:l,transformScale:u}=this.props;return r.createElement(b,{w:t.w,h:t.h,x:t.x,y:t.y,i:t.i,className:"react-grid-placeholder "+(this.state.resizing?"placeholder-resizing":""),containerWidth:e,cols:n,margin:o,containerPadding:i||o,maxRows:s,rowHeight:a,isDraggable:!1,isResizable:!1,isBounded:!1,useCSSTransforms:l,transformScale:u},r.createElement("div",null))}processGridItem(t,e){if(!t||!t.key)return;const n=(0,s.getLayoutItem)(this.state.layout,String(t.key));if(!n)return null;const{width:o,cols:i,margin:a,containerPadding:l,rowHeight:u,maxRows:c,isDraggable:p,isResizable:d,isBounded:h,useCSSTransforms:f,transformScale:g,draggableCancel:m,draggableHandle:y,resizeHandles:v,resizeHandle:w}=this.props,{mounted:S,droppingPosition:O}=this.state,x="boolean"==typeof n.isDraggable?n.isDraggable:!n.static&&p,D="boolean"==typeof n.isResizable?n.isResizable:!n.static&&d,R=n.resizeHandles||v,P=x&&h&&!1!==n.isBounded;return r.createElement(b,{containerWidth:o,cols:i,margin:a,containerPadding:l||a,maxRows:c,rowHeight:u,cancel:m,handle:y,onDragStop:this.onDragStop,onDragStart:this.onDragStart,onDrag:this.onDrag,onResizeStart:this.onResizeStart,onResize:this.onResize,onResizeStop:this.onResizeStop,isDraggable:x,isResizable:D,isBounded:P,useCSSTransforms:f&&S,usePercentages:!S,transformScale:g,w:n.w,h:n.h,x:n.x,y:n.y,i:n.i,minH:n.minH,minW:n.minW,maxH:n.maxH,maxW:n.maxW,static:n.static,droppingPosition:e?O:void 0,resizeHandles:R,resizeHandle:w},t)}render(){const{className:t,style:e,isDroppable:n,innerRef:o}=this.props,i=(0,a.A)(w,t),l={height:this.containerHeight(),...e};return r.createElement("div",{ref:o,className:i,style:l,onDrop:n?this.onDrop:s.noop,onDragLeave:n?this.onDragLeave:s.noop,onDragEnter:n?this.onDragEnter:s.noop,onDragOver:n?this.onDragOver:s.noop},r.Children.map(this.props.children,t=>this.processGridItem(t)),n&&this.state.droppingDOMNode&&this.processGridItem(this.state.droppingDOMNode,!0),this.placeholder())}}v(O,"displayName","ReactGridLayout"),v(O,"propTypes",m),v(O,"defaultProps",{autoSize:!0,cols:12,className:"",style:{},draggableHandle:"",draggableCancel:"",containerPadding:null,rowHeight:150,maxRows:1/0,layout:[],margin:[10,10],isBounded:!1,isDraggable:!0,isResizable:!0,allowOverlap:!1,isDroppable:!1,useCSSTransforms:!0,transformScale:1,verticalCompact:!0,compactType:"vertical",preventCollision:!1,droppingItem:{i:"__dropping-elem__",h:1,w:1},resizeHandles:["se"],onLayoutChange:s.noop,onDragStart:s.noop,onDrag:s.noop,onDragStop:s.noop,onResizeStart:s.noop,onResize:s.noop,onResizeStop:s.noop,onDrop:s.noop,onDropDragOver:s.noop})},329:(t,e,n)=>{"use strict";e.__esModule=!0,e.resizableProps=void 0;var r,o=(r=n(556))&&r.__esModule?r:{default:r};n(794);var i={axis:o.default.oneOf(["both","x","y","none"]),className:o.default.string,children:o.default.element.isRequired,draggableOpts:o.default.shape({allowAnyClick:o.default.bool,cancel:o.default.string,children:o.default.node,disabled:o.default.bool,enableUserSelectHack:o.default.bool,offsetParent:o.default.node,grid:o.default.arrayOf(o.default.number),handle:o.default.string,nodeRef:o.default.object,onStart:o.default.func,onDrag:o.default.func,onStop:o.default.func,onMouseDown:o.default.func,scale:o.default.number}),height:function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];var r,i=e[0];return"both"===i.axis||"y"===i.axis?(r=o.default.number).isRequired.apply(r,e):o.default.number.apply(o.default,e)},handle:o.default.oneOfType([o.default.node,o.default.func]),handleSize:o.default.arrayOf(o.default.number),lockAspectRatio:o.default.bool,maxConstraints:o.default.arrayOf(o.default.number),minConstraints:o.default.arrayOf(o.default.number),onResizeStop:o.default.func,onResizeStart:o.default.func,onResize:o.default.func,resizeHandles:o.default.arrayOf(o.default.oneOf(["s","w","e","n","sw","nw","se","ne"])),transformScale:o.default.number,width:function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];var r,i=e[0];return"both"===i.axis||"x"===i.axis?(r=o.default.number).isRequired.apply(r,e):o.default.number.apply(o.default,e)}};e.resizableProps=i},335:(t,e,n)=>{"use strict";n.r(e),n.d(e,{bottom:()=>l,childrenEqual:()=>h,cloneLayout:()=>u,cloneLayoutItem:()=>d,collides:()=>m,compact:()=>y,compactItem:()=>w,compactType:()=>$,correctBounds:()=>S,fastPositionEqual:()=>g,fastRGLPropsEqual:()=>f,getAllCollisions:()=>D,getFirstCollision:()=>x,getLayoutItem:()=>O,getStatics:()=>R,modifyLayout:()=>c,moveElement:()=>P,moveElementAwayFromCollision:()=>E,noop:()=>F,perc:()=>z,resizeItemInDirection:()=>W,setTopLeft:()=>I,setTransform:()=>q,sortLayoutItems:()=>A,sortLayoutItemsByColRow:()=>G,sortLayoutItemsByRowCol:()=>B,synchronizeLayoutWithChildren:()=>X,validateLayout:()=>Y,withLayoutItem:()=>p});var r=n(548),o=n(12),i=n.n(o);const a=!0,s=!1;function l(t){let e,n=0;for(let r=0,o=t.length;r<o;r++)e=t[r].y+t[r].h,e>n&&(n=e);return n}function u(t){const e=Array(t.length);for(let n=0,r=t.length;n<r;n++)e[n]=d(t[n]);return e}function c(t,e){const n=Array(t.length);for(let r=0,o=t.length;r<o;r++)e.i===t[r].i?n[r]=e:n[r]=t[r];return n}function p(t,e,n){let r=O(t,e);return r?(r=n(d(r)),[t=c(t,r),r]):[t,null]}function d(t){return{w:t.w,h:t.h,x:t.x,y:t.y,i:t.i,minW:t.minW,maxW:t.maxW,minH:t.minH,maxH:t.maxH,moved:Boolean(t.moved),static:Boolean(t.static),isDraggable:t.isDraggable,isResizable:t.isResizable,resizeHandles:t.resizeHandles,isBounded:t.isBounded}}function h(t,e){return(0,r.deepEqual)(i().Children.map(t,t=>t?.key),i().Children.map(e,t=>t?.key))&&(0,r.deepEqual)(i().Children.map(t,t=>t?.props["data-grid"]),i().Children.map(e,t=>t?.props["data-grid"]))}const f=n(407);function g(t,e){return t.left===e.left&&t.top===e.top&&t.width===e.width&&t.height===e.height}function m(t,e){return!(t.i===e.i||t.x+t.w<=e.x||t.x>=e.x+e.w||t.y+t.h<=e.y||t.y>=e.y+e.h)}function y(t,e,n,r){const o=R(t),i=A(t,e),a=Array(t.length);for(let s=0,l=i.length;s<l;s++){let l=d(i[s]);l.static||(l=w(o,l,e,n,i,r),o.push(l)),a[t.indexOf(i[s])]=l,l.moved=!1}return a}const b={x:"w",y:"h"};function v(t,e,n,r){const o=b[r];e[r]+=1;for(let i=t.map(t=>t.i).indexOf(e.i)+1;i<t.length;i++){const a=t[i];if(!a.static){if(a.y>e.y+e.h)break;m(e,a)&&v(t,a,n+e[o],r)}}e[r]=n}function w(t,e,n,r,o,i){const a="horizontal"===n;if("vertical"===n)for(e.y=Math.min(l(t),e.y);e.y>0&&!x(t,e);)e.y--;else if(a)for(;e.x>0&&!x(t,e);)e.x--;let s;for(;(s=x(t,e))&&(null!==n||!i);)if(a?v(o,e,s.x+s.w,"x"):v(o,e,s.y+s.h,"y"),a&&e.x+e.w>r)for(e.x=r-e.w,e.y++;e.x>0&&!x(t,e);)e.x--;return e.y=Math.max(e.y,0),e.x=Math.max(e.x,0),e}function S(t,e){const n=R(t);for(let r=0,o=t.length;r<o;r++){const o=t[r];if(o.x+o.w>e.cols&&(o.x=e.cols-o.w),o.x<0&&(o.x=0,o.w=e.cols),o.static)for(;x(n,o);)o.y++;else n.push(o)}return t}function O(t,e){for(let n=0,r=t.length;n<r;n++)if(t[n].i===e)return t[n]}function x(t,e){for(let n=0,r=t.length;n<r;n++)if(m(t[n],e))return t[n]}function D(t,e){return t.filter(t=>m(t,e))}function R(t){return t.filter(t=>t.static)}function P(t,e,n,r,o,i,a,s,l){if(e.static&&!0!==e.isDraggable)return t;if(e.y===r&&e.x===n)return t;U(`Moving element ${e.i} to [${String(n)},${String(r)}] from [${e.x},${e.y}]`);const c=e.x,p=e.y;"number"==typeof n&&(e.x=n),"number"==typeof r&&(e.y=r),e.moved=!0;let d=A(t,a);("vertical"===a&&"number"==typeof r?p>=r:"horizontal"===a&&"number"==typeof n&&c>=n)&&(d=d.reverse());const h=D(d,e),f=h.length>0;if(f&&l)return u(t);if(f&&i)return U(`Collision prevented on ${e.i}, reverting.`),e.x=c,e.y=p,e.moved=!1,t;for(let n=0,r=h.length;n<r;n++){const r=h[n];U(`Resolving collision between ${e.i} at [${e.x},${e.y}] and ${r.i} at [${r.x},${r.y}]`),r.mov