@jotforminc/dnd-builder 3.0.0-alpha.2 → 3.1.0

package/lib/cjs/components/Builder/Panel.js

@@ -15,10 +15,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var Panel = function Panel(_ref) {
-  var additionalClassName = _ref.additionalClassName,
-      children = _ref.children,
-      innerRef = _ref.innerRef,
-      onAnimationEnd = _ref.onAnimationEnd;
+  var _ref$additionalClassN = _ref.additionalClassName,
+      additionalClassName = _ref$additionalClassN === void 0 ? '' : _ref$additionalClassN,
+      _ref$children = _ref.children,
+      children = _ref$children === void 0 ? null : _ref$children,
+      _ref$innerRef = _ref.innerRef,
+      innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
+      _ref$onAnimationEnd = _ref.onAnimationEnd,
+      onAnimationEnd = _ref$onAnimationEnd === void 0 ? function () {} : _ref$onAnimationEnd;
   return /*#__PURE__*/jsxRuntime.jsx("aside", {
     ref: innerRef,
     className: "jfReport-col jfReport-pane ".concat(additionalClassName),
@@ -35,12 +39,6 @@ Panel.propTypes = {
   })]),
   onAnimationEnd: PropTypes__default['default'].func
 };
-Panel.defaultProps = {
-  additionalClassName: '',
-  children: null,
-  innerRef: null,
-  onAnimationEnd: function onAnimationEnd() {}
-};
 var MemoizedPanel = /*#__PURE__*/React.memo(Panel);
 var Panel$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(MemoizedPanel, _objectSpread({

package/lib/cjs/components/Builder/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../../src/components/Builder/Panel.js"],"sourcesContent":["/* global Element */\nimport { forwardRef, memo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst Panel = ({\n  additionalClassName, children, innerRef, onAnimationEnd,\n}) => {\n  return (\n    <aside\n      ref={innerRef}\n      className={`jfReport-col jfReport-pane ${additionalClassName}`}\n      onAnimationEnd={onAnimationEnd}\n    >\n      {children}\n    </aside>\n  );\n};\n\nPanel.propTypes = {\n  additionalClassName: PropTypes.string,\n  children: PropTypes.any,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  ]),\n  onAnimationEnd: PropTypes.func,\n};\n\nPanel.defaultProps = {\n  additionalClassName: '',\n  children: null,\n  innerRef: null,\n  onAnimationEnd: () => {},\n};\n\nconst MemoizedPanel = memo(Panel);\n\nexport default forwardRef((props, ref) => (\n  <MemoizedPanel\n    innerRef={ref}\n    {...props}\n  />\n));\n"],"names":["Panel","additionalClassName","children","innerRef","onAnimationEnd","_jsx","propTypes","PropTypes","string","any","oneOfType","func","shape","current","instanceOf","Element","defaultProps","MemoizedPanel","memo","forwardRef","props","ref"],"mappings":";;;;;;;;;;;;;;;;AAIA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAER;AAAA,MADJC,mBACI,QADJA,mBACI;AAAA,MADiBC,QACjB,QADiBA,QACjB;AAAA,MAD2BC,QAC3B,QAD2BA,QAC3B;AAAA,MADqCC,cACrC,QADqCA,cACrC;AACJ,sBACEC;AACE,IAAA,GAAG,EAAEF,QADP;AAEE,IAAA,SAAS,uCAAgCF,mBAAhC,CAFX;AAGE,IAAA,cAAc,EAAEG,cAHlB;AAAA,cAKGF;AALH,IADF;AASD,CAZD;;AAcAF,KAAK,CAACM,SAAN,GAAkB;AAChBL,EAAAA,mBAAmB,EAAEM,6BAAS,CAACC,MADf;AAEhBN,EAAAA,QAAQ,EAAEK,6BAAS,CAACE,GAFJ;AAGhBN,EAAAA,QAAQ,EAAEI,6BAAS,CAACG,SAAV,CAAoB,CAC5BH,6BAAS,CAACI,IADkB,EAE5BJ,6BAAS,CAACK,KAAV,CAAgB;AAAEC,IAAAA,OAAO,EAAEN,6BAAS,CAACO,UAAV,CAAqBC,OAArB;AAAX,GAAhB,CAF4B,CAApB,CAHM;AAOhBX,EAAAA,cAAc,EAAEG,6BAAS,CAACI;AAPV,CAAlB;AAUAX,KAAK,CAACgB,YAAN,GAAqB;AACnBf,EAAAA,mBAAmB,EAAE,EADF;AAEnBC,EAAAA,QAAQ,EAAE,IAFS;AAGnBC,EAAAA,QAAQ,EAAE,IAHS;AAInBC,EAAAA,cAAc,EAAE,0BAAM;AAJH,CAArB;AAOA,IAAMa,aAAa,gBAAGC,UAAI,CAAClB,KAAD,CAA1B;AAEA,2BAAemB,gBAAU,CAAC,UAACC,KAAD,EAAQC,GAAR;AAAA,sBACxBhB,eAAC,aAAD;AACE,IAAA,QAAQ,EAAEgB;AADZ,KAEMD,KAFN,EADwB;AAAA,CAAD,CAAzB;;;;"}
+{"version":3,"file":"Panel.js","sources":["../../../../src/components/Builder/Panel.js"],"sourcesContent":["/* global Element */\nimport { forwardRef, memo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst Panel = ({\n  additionalClassName = '',\n  children = null,\n  innerRef = null,\n  onAnimationEnd = () => {},\n}) => {\n  return (\n    <aside\n      ref={innerRef}\n      className={`jfReport-col jfReport-pane ${additionalClassName}`}\n      onAnimationEnd={onAnimationEnd}\n    >\n      {children}\n    </aside>\n  );\n};\n\nPanel.propTypes = {\n  additionalClassName: PropTypes.string,\n  children: PropTypes.any,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n  ]),\n  onAnimationEnd: PropTypes.func,\n};\n\nconst MemoizedPanel = memo(Panel);\n\nexport default forwardRef((props, ref) => (\n  <MemoizedPanel\n    innerRef={ref}\n    {...props}\n  />\n));\n"],"names":["Panel","additionalClassName","children","innerRef","onAnimationEnd","_jsx","propTypes","PropTypes","string","any","oneOfType","func","shape","current","instanceOf","Element","MemoizedPanel","memo","forwardRef","props","ref"],"mappings":";;;;;;;;;;;;;;;;AAIA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAKR;AAAA,mCAJJC,mBAII;AAAA,MAJJA,mBAII,sCAJkB,EAIlB;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,IAGP;AAAA,2BAFJC,QAEI;AAAA,MAFJA,QAEI,8BAFO,IAEP;AAAA,iCADJC,cACI;AAAA,MADJA,cACI,oCADa,YAAM,EACnB;AACJ,sBACEC;AACE,IAAA,GAAG,EAAEF,QADP;AAEE,IAAA,SAAS,uCAAgCF,mBAAhC,CAFX;AAGE,IAAA,cAAc,EAAEG,cAHlB;AAAA,cAKGF;AALH,IADF;AASD,CAfD;;AAiBAF,KAAK,CAACM,SAAN,GAAkB;AAChBL,EAAAA,mBAAmB,EAAEM,6BAAS,CAACC,MADf;AAEhBN,EAAAA,QAAQ,EAAEK,6BAAS,CAACE,GAFJ;AAGhBN,EAAAA,QAAQ,EAAEI,6BAAS,CAACG,SAAV,CAAoB,CAC5BH,6BAAS,CAACI,IADkB,EAE5BJ,6BAAS,CAACK,KAAV,CAAgB;AAAEC,IAAAA,OAAO,EAAEN,6BAAS,CAACO,UAAV,CAAqBC,OAArB;AAAX,GAAhB,CAF4B,CAApB,CAHM;AAOhBX,EAAAA,cAAc,EAAEG,6BAAS,CAACI;AAPV,CAAlB;AAUA,IAAMK,aAAa,gBAAGC,UAAI,CAACjB,KAAD,CAA1B;AAEA,2BAAekB,gBAAU,CAAC,UAACC,KAAD,EAAQC,GAAR;AAAA,sBACxBf,eAAC,aAAD;AACE,IAAA,QAAQ,EAAEe;AADZ,KAEMD,KAFN,EADwB;AAAA,CAAD,CAAzB;;;;"}

package/lib/cjs/components/Builder/ReportItemRenderer.js

@@ -1,7 +1,8 @@
 'use strict';
 
 var React = require('react');
-var propContext = require('../../utils/propContext.js');
+var PropContext = require('../../contexts/PropContext.js');
+var getMergedItem = require('../../utils/getMergedItem.js');
 
 var getItemComponent = function getItemComponent(elementName, Elements) {
   return Elements[elementName] && Elements[elementName].Component ? Elements[elementName].Component : Elements.text.Component;
@@ -10,11 +11,11 @@ var getItemComponent = function getItemComponent(elementName, Elements) {
 var ReportItemRenderer = function ReportItemRenderer(_ref) {
   var children = _ref.children,
       item = _ref.item;
-
-  var _usePropContext = propContext.usePropContext(),
-      acceptedItems = _usePropContext.acceptedItems;
-
-  return children(getItemComponent(item.itemType, acceptedItems), item);
+  var acceptedItems = PropContext.usePropStore(function (state) {
+    return state.acceptedItems;
+  });
+  var mergedItem = getMergedItem(item, acceptedItems);
+  return children(getItemComponent(item.itemType, acceptedItems), mergedItem);
 };
 
 var ReportItemRenderer$1 = /*#__PURE__*/React.memo(ReportItemRenderer);

package/lib/cjs/components/Builder/ReportItemRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReportItemRenderer.js","sources":["../../../../src/components/Builder/ReportItemRenderer.js"],"sourcesContent":["import { memo } from 'react';\nimport { usePropContext } from '../../utils/propContext';\n\nconst getItemComponent = (elementName, Elements) => {\n  return Elements[elementName] && Elements[elementName].Component\n    ? Elements[elementName].Component\n    : Elements.text.Component;\n};\n\nconst ReportItemRenderer = ({\n  children,\n  item,\n}) => {\n  const { acceptedItems } = usePropContext();\n  return children(getItemComponent(item.itemType, acceptedItems), item);\n};\n\nexport default memo(ReportItemRenderer);\n"],"names":["getItemComponent","elementName","Elements","Component","text","ReportItemRenderer","children","item","usePropContext","acceptedItems","itemType","memo"],"mappings":";;;;;AAGA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,WAAD,EAAcC,QAAd,EAA2B;AAClD,SAAOA,QAAQ,CAACD,WAAD,CAAR,IAAyBC,QAAQ,CAACD,WAAD,CAAR,CAAsBE,SAA/C,GACHD,QAAQ,CAACD,WAAD,CAAR,CAAsBE,SADnB,GAEHD,QAAQ,CAACE,IAAT,CAAcD,SAFlB;AAGD,CAJD;;AAMA,IAAME,kBAAkB,GAAG,SAArBA,kBAAqB,OAGrB;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;;AACJ,wBAA0BC,0BAAc,EAAxC;AAAA,MAAQC,aAAR,mBAAQA,aAAR;;AACA,SAAOH,QAAQ,CAACN,gBAAgB,CAACO,IAAI,CAACG,QAAN,EAAgBD,aAAhB,CAAjB,EAAiDF,IAAjD,CAAf;AACD,CAND;;AAQA,wCAAeI,UAAI,CAACN,kBAAD,CAAnB;;;;"}
+{"version":3,"file":"ReportItemRenderer.js","sources":["../../../../src/components/Builder/ReportItemRenderer.js"],"sourcesContent":["import { memo } from 'react';\nimport { usePropStore } from '../../contexts/PropContext';\nimport getMergedItem from '../../utils/getMergedItem';\n\nconst getItemComponent = (elementName, Elements) => {\n  return Elements[elementName] && Elements[elementName].Component\n    ? Elements[elementName].Component\n    : Elements.text.Component;\n};\n\nconst ReportItemRenderer = ({\n  children,\n  item,\n}) => {\n  const acceptedItems = usePropStore(state => state.acceptedItems);\n  const mergedItem = getMergedItem(item, acceptedItems);\n  return children(getItemComponent(item.itemType, acceptedItems), mergedItem);\n};\n\nexport default memo(ReportItemRenderer);\n"],"names":["getItemComponent","elementName","Elements","Component","text","ReportItemRenderer","children","item","acceptedItems","usePropStore","state","mergedItem","getMergedItem","itemType","memo"],"mappings":";;;;;;AAIA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,WAAD,EAAcC,QAAd,EAA2B;AAClD,SAAOA,QAAQ,CAACD,WAAD,CAAR,IAAyBC,QAAQ,CAACD,WAAD,CAAR,CAAsBE,SAA/C,GACHD,QAAQ,CAACD,WAAD,CAAR,CAAsBE,SADnB,GAEHD,QAAQ,CAACE,IAAT,CAAcD,SAFlB;AAGD,CAJD;;AAMA,IAAME,kBAAkB,GAAG,SAArBA,kBAAqB,OAGrB;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AACJ,MAAMC,aAAa,GAAGC,wBAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,aAAV;AAAA,GAAN,CAAlC;AACA,MAAMG,UAAU,GAAGC,aAAa,CAACL,IAAD,EAAOC,aAAP,CAAhC;AACA,SAAOF,QAAQ,CAACN,gBAAgB,CAACO,IAAI,CAACM,QAAN,EAAgBL,aAAhB,CAAjB,EAAiDG,UAAjD,CAAf;AACD,CAPD;;AASA,wCAAeG,UAAI,CAACT,kBAAD,CAAnB;;;;"}

package/lib/cjs/components/Builder/Scene.js

@@ -7,40 +7,31 @@ require('core-js/modules/es.array.map.js');
 require('core-js/modules/es.number.constructor.js');
 require('core-js/modules/es.number.is-nan.js');
 require('core-js/modules/es.number.to-fixed.js');
+require('core-js/modules/es.object.to-string.js');
+require('core-js/modules/es.regexp.to-string.js');
 require('core-js/modules/web.dom-collections.for-each.js');
 var React = require('react');
-var PropTypes = require('prop-types');
 var classNames = require('../../constants/classNames.js');
 var ContextMenu = require('./ContextMenu.js');
 var PageActions = require('./PageActions.js');
 var PageAdder = require('./PageAdder.js');
 var ZoomControls = require('./ZoomControls.js');
-var builderContext = require('../../utils/builderContext.js');
-var propContext = require('../../utils/propContext.js');
-var itemTypes = require('../../constants/itemTypes.js');
+var BuilderContext = require('../../contexts/BuilderContext.js');
+var PropContext = require('../../contexts/PropContext.js');
 var Page = require('./Page.js');
 var functions = require('../../utils/functions.js');
 var hooks = require('../../utils/hooks.js');
 var DraggableItemLayer = require('../DraggableItem/DraggableItemLayer.js');
 var generateId = require('../../utils/generateId.js');
+var eventIgnoredRoles = require('../../constants/eventIgnoredRoles.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var _excluded = ["id", "itemType", "type"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -53,73 +44,82 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Scene = function Scene(_ref) {
-  var additionalPageItems = _ref.additionalPageItems,
-      hashCode = _ref.hashCode,
-      itemAccessor = _ref.itemAccessor,
-      lastScrollPosition = _ref.lastScrollPosition,
-      onItemAdd = _ref.onItemAdd,
-      onItemChange = _ref.onItemChange,
-      onItemMove = _ref.onItemMove,
-      onItemRemove = _ref.onItemRemove,
-      onItemResize = _ref.onItemResize,
-      onItemsMove = _ref.onItemsMove,
-      onPageAdd = _ref.onPageAdd,
-      onPageChange = _ref.onPageChange,
-      onPageDuplicate = _ref.onPageDuplicate,
-      onPageOrdersChange = _ref.onPageOrdersChange,
-      onPageRemove = _ref.onPageRemove,
-      pages = _ref.pages;
-  var pageCount = pages.length;
-  /* Builder Context */
-
-  var _useBuilderContext = builderContext.useBuilderContext(),
-      activeElement = _useBuilderContext.activeElement,
-      contextMenuProps = _useBuilderContext.contextMenuProps,
-      isRightPanelOpen = _useBuilderContext.isRightPanelOpen,
-      setActiveElement = _useBuilderContext.setActiveElement,
-      setContextMenuProps = _useBuilderContext.setContextMenuProps,
-      setEditedElement = _useBuilderContext.setEditedElement,
-      setIsRightPanelOpen = _useBuilderContext.setIsRightPanelOpen,
-      zoom = _useBuilderContext.zoom;
-
-  var _usePropContext = propContext.usePropContext(),
-      acceptedItems = _usePropContext.acceptedItems,
-      disableInteraction = _usePropContext.disableInteraction,
-      onAnEventTrigger = _usePropContext.onAnEventTrigger,
-      settings = _usePropContext.settings;
+var Scene = function Scene() {
+  var pages = PropContext.usePropStore(function (state) {
+    return state.pages;
+  });
+  var onItemAdd = PropContext.usePropStore(function (state) {
+    return state.onItemAdd;
+  });
+  var onItemRemove = PropContext.usePropStore(function (state) {
+    return state.onItemRemove;
+  });
+  var onAnEventTrigger = PropContext.usePropStore(function (state) {
+    return state.onAnEventTrigger;
+  });
+  var settings = PropContext.usePropStore(function (state) {
+    return state.settings;
+  });
+  var onItemChange = PropContext.usePropStore(function (state) {
+    return state.onItemChange;
+  });
+  var activeElement = BuilderContext.useBuilderStore(function (state) {
+    return state.activeElement;
+  });
+  var contextMenuProps = BuilderContext.useBuilderStore(function (state) {
+    return state.contextMenuProps;
+  });
+  var isRightPanelOpen = BuilderContext.useBuilderStore(function (state) {
+    return state.isRightPanelOpen;
+  });
+  var setActiveElement = BuilderContext.useBuilderStore(function (state) {
+    return state.setActiveElement;
+  });
+  var setContextMenuProps = BuilderContext.useBuilderStore(function (state) {
+    return state.setContextMenuProps;
+  });
+  var setIsRightPanelOpen = BuilderContext.useBuilderStore(function (state) {
+    return state.setIsRightPanelOpen;
+  });
+  var zoom = BuilderContext.useBuilderStore(function (state) {
+    return state.zoom;
+  });
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       itemToPaste = _useState2[0],
       setItemToPaste = _useState2[1];
 
-  var isHeaderHidden = React.useRef(false);
+  var lastScrollPosition = BuilderContext.useBuilderStore(function (state) {
+    return state.lastScrollPosition;
+  });
   var pageStyles = React.useRef({});
   var pageContainerStyles = React.useRef({});
   var viewPortRef = React.useRef({});
   /* Page Refs */
 
-  var refs = pages.reduce(function (acc, curr) {
+  var refs = React.useRef(pages.reduce(function (acc, curr) {
     acc[curr.id] = /*#__PURE__*/React.createRef(null);
     return acc;
-  }, {});
+  }, {})); // Update refs when new pages are added
+
+  React.useEffect(function () {
+    pages.forEach(function (page) {
+      if (!refs.current[page.id]) {
+        refs.current[page.id] = /*#__PURE__*/React.createRef(null);
+      }
+    });
+  }, [pages]);
   var isMultipleItemSelected = activeElement !== null && activeElement.length > 1;
   /* Calculate snap guides */
 
-  var _useState3 = React.useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      guides = _useState4[0],
-      setGuides = _useState4[1];
-
   var keyDownCount = React.useRef(null);
-  React.useEffect(function () {
-    var _guides = pages.reduce(function (acc, page) {
+  var guides = React.useMemo(function () {
+    return pages.reduce(function (acc, page) {
       var _pageGuides = {};
+      var pageRef = refs.current[page.id];
 
-      if (refs[page.id]) {
-        var pageRef = refs[page.id];
-
+      if (pageRef && pageRef.current) {
         var _pageRef$current$getB = pageRef.current.getBoundingClientRect(),
             _height = _pageRef$current$getB.height,
             left = _pageRef$current$getB.left,
@@ -151,81 +151,12 @@ var Scene = function Scene(_ref) {
       acc[page.id] = _pageGuides;
       return acc;
     }, {});
-
-    setGuides(_guides);
   }, [pages, zoom]);
-  /* When an item dropped */
-
-  var dropped = React.useCallback(function (pageID, _ref2, monitor, ref) {
-    var id = _ref2.id,
-        itemType = _ref2.itemType,
-        type = _ref2.type,
-        additionalData = _objectWithoutProperties(_ref2, _excluded);
-
-    var pageClient = ref.current.getBoundingClientRect();
-    var coords = functions.getCorrectDroppedOffsetValue(monitor, pageClient, zoom);
-
-    switch (type) {
-      case itemTypes.DROPPABLE_ITEM_TYPE:
-        {
-          var itemID = generateId();
-          onItemAdd(_objectSpread(_objectSpread(_objectSpread({}, acceptedItems[itemType].details), {}, {
-            id: itemID,
-            pageID: pageID
-          }, coords), additionalData));
-          onAnEventTrigger('reportItemAdd', itemType);
-          setActiveElement(itemID);
-          setIsRightPanelOpen(true);
-          break;
-        }
-
-      case itemTypes.DRAGGABLE_ITEM_TYPE:
-        {
-          var dragCoords = functions.getCorrectDroppedOffsetValueBySnap(coords, guides, id, pages, zoom);
-
-          if (isMultipleItemSelected) {
-            var leftDifference = additionalData.left - dragCoords.left;
-            var topDifference = additionalData.top - dragCoords.top;
-            var items = activeElement.reduce(function (acc, curr) {
-              var tempItem = functions.findItemById(curr, pages);
-              acc[curr] = {
-                id: curr,
-                left: tempItem.left - leftDifference,
-                pageID: pageID,
-                top: tempItem.top - topDifference
-              };
-              return acc;
-            }, {});
-            onItemsMove({
-              items: items
-            });
-          } else {
-            onItemMove(_objectSpread({
-              id: id,
-              pageID: pageID
-            }, dragCoords));
-          }
-
-          break;
-        }
-
-      default:
-        {
-          throw new Error('You have to be specify item type');
-        }
-    }
-  }, [pages, guides, zoom, activeElement]);
   React.useEffect(function () {
     if (viewPortRef.current) {
       viewPortRef.current.scrollTop = lastScrollPosition;
     }
-  }, []); // set last scroll position after changing mode
-
-  React.useEffect(function () {
-    if (document.body.classList.contains('hideHeader') && isHeaderHidden) {
-      document.body.classList.remove('hideHeader');
-    }
-  }, []); // reset hideHeader
+  }, [lastScrollPosition]); // set last scroll position after changing mode
 
   var foundItem = functions.findItemById(activeElement === null ? null : activeElement[0], pages);
   var selectedItems = functions.getSelectedItems(activeElement, pages);
@@ -388,23 +319,19 @@ var Scene = function Scene(_ref) {
     }
   };
 
-  var onScroll = function onScroll(e) {
-    var scrollTop = e.currentTarget.scrollTop;
-    var hiddenHeaderHeight = 70;
-    var headerHidingLimit = isHeaderHidden ? 230 : 300;
-
-    if (scrollTop > headerHidingLimit + hiddenHeaderHeight && !isHeaderHidden.current) {
-      isHeaderHidden.current = true;
-      document.body.classList.add('hideHeader');
-    } else if (scrollTop < headerHidingLimit && isHeaderHidden.current) {
-      isHeaderHidden.current = false;
-      document.body.classList.remove('hideHeader');
-    }
+  var shouldSuppressKeyboardEvent = function shouldSuppressKeyboardEvent(e) {
+    return eventIgnoredRoles.EVENT_IGNORED_ROLES.some(function (role) {
+      return e.target.closest("[role=".concat(role, "]"));
+    });
   };
 
   var handleKeyboardEvent = function handleKeyboardEvent(e) {
     var shouldPaste = itemToPaste && e.key === 'v' && e.metaKey;
 
+    if (shouldSuppressKeyboardEvent(e)) {
+      return;
+    }
+
     if (activeElement && !shouldPaste) {
       var arrowKeyCodes = ['ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowBottom'];
       if (arrowKeyCodes.includes(e.key)) e.preventDefault();
@@ -443,14 +370,12 @@ var Scene = function Scene(_ref) {
     className: classNames.mainWrapper,
     children: [/*#__PURE__*/jsxRuntime.jsx(DraggableItemLayer, {
       guides: guides,
-      itemAccessor: itemAccessor,
-      pageRefs: refs,
+      pageRefs: refs.current,
       pages: pages
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: viewPortRef,
       className: classNames.viewport,
       "data-zoom": zoom,
-      onScroll: onScroll,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classNames.canvas,
         children: [pages.map(function (page, index) {
@@ -459,110 +384,40 @@ var Scene = function Scene(_ref) {
             // TODO: This part can be moved into a different component
             jsxRuntime.jsxs(React.Fragment, {
               children: [/*#__PURE__*/jsxRuntime.jsx(PageActions, {
-                disableInteraction: disableInteraction,
-                onAnEventTrigger: onAnEventTrigger,
-                onPageAdd: onPageAdd,
-                onPageDuplicate: onPageDuplicate,
-                onPageOrdersChange: onPageOrdersChange,
-                onPageRemove: onPageRemove,
                 order: page.order,
-                pageCount: pageCount,
-                pageID: page.id,
-                pages: pages,
-                setEditedElement: setEditedElement,
-                setIsRightPanelOpen: setIsRightPanelOpen
+                pageID: page.id
               }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                ref: refs[page.id],
+                ref: refs.current[page.id],
                 className: classNames.page,
                 "data-id": page.id,
                 "data-order": page.order,
+                id: "presentation-page-".concat(page.id.toString()),
                 style: pageStyles.current,
                 children: /*#__PURE__*/jsxRuntime.jsx(Page, {
-                  activeElement: activeElement,
-                  additionalPageItems: additionalPageItems,
-                  guides: guides[page.id],
-                  hashCode: hashCode,
-                  itemAccessor: itemAccessor,
-                  items: page.items // TODO: dont use inline functions
-                  ,
-                  onDrop: function onDrop(item, monitor) {
-                    return dropped(page.id, item, monitor, refs[page.id]);
-                  },
-                  onItemAdd: onItemAdd,
-                  onItemChange: onItemChange,
-                  onItemRemove: onItemRemove,
-                  onItemResize: onItemResize,
+                  guides: guides,
+                  items: page.items,
                   page: page,
                   pageIndex: index,
-                  pageRef: refs[page.id],
                   style: pageContainerStyles.current
                 })
               }, "page_".concat(page.id))]
             }, page.id)
           );
-        }), /*#__PURE__*/jsxRuntime.jsx(PageAdder, {
-          onPageAdd: onPageAdd,
-          pageCount: pageCount
-        })]
+        }), /*#__PURE__*/jsxRuntime.jsx(PageAdder, {})]
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(ZoomControls, {
-      mode: "customize",
-      pages: pages
-    }), contextMenuProps && /*#__PURE__*/jsxRuntime.jsx(ContextMenu, {
+    }), /*#__PURE__*/jsxRuntime.jsx(ZoomControls, {}), contextMenuProps && /*#__PURE__*/jsxRuntime.jsx(ContextMenu, {
       exceptionalClasses: ['contextMenu-button'],
       height: height,
       item: functions.findItemById(contextMenuProps.id, pages),
       items: functions.findItemsOnPage(contextMenuProps.pageID, pages),
-      onAnEventTrigger: onAnEventTrigger,
       onClickOutside: function onClickOutside() {
         return setContextMenuProps(null);
       },
-      onItemChange: onItemChange,
-      onItemRemove: onItemRemove,
-      onPageChange: onPageChange,
       position: contextMenuProps.position,
       width: width
     })]
   });
 };
 
-Scene.propTypes = {
-  additionalPageItems: PropTypes__default['default'].arrayOf(PropTypes__default['default'].node),
-  hashCode: PropTypes__default['default'].string,
-  itemAccessor: PropTypes__default['default'].func,
-  lastScrollPosition: PropTypes__default['default'].number,
-  onItemAdd: PropTypes__default['default'].func,
-  onItemChange: PropTypes__default['default'].func,
-  onItemMove: PropTypes__default['default'].func,
-  onItemRemove: PropTypes__default['default'].func,
-  onItemResize: PropTypes__default['default'].func,
-  onItemsMove: PropTypes__default['default'].func,
-  onPageAdd: PropTypes__default['default'].func,
-  onPageChange: PropTypes__default['default'].func,
-  onPageDuplicate: PropTypes__default['default'].func,
-  onPageOrdersChange: PropTypes__default['default'].func,
-  onPageRemove: PropTypes__default['default'].func,
-  pages: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({}))
-};
-Scene.defaultProps = {
-  additionalPageItems: [],
-  hashCode: '',
-  itemAccessor: function itemAccessor() {},
-  lastScrollPosition: 0,
-  onItemAdd: function onItemAdd() {},
-  onItemChange: function onItemChange() {},
-  onItemMove: function onItemMove() {},
-  onItemRemove: function onItemRemove() {},
-  onItemResize: function onItemResize() {},
-  onItemsMove: function onItemsMove() {},
-  onPageAdd: function onPageAdd() {},
-  onPageChange: function onPageChange() {},
-  onPageDuplicate: function onPageDuplicate() {},
-  onPageOrdersChange: function onPageOrdersChange() {},
-  onPageRemove: function onPageRemove() {},
-  pages: []
-};
-var Scene$1 = /*#__PURE__*/React.memo(Scene);
-
-module.exports = Scene$1;
+module.exports = Scene;
 //# sourceMappingURL=Scene.js.map