@jotforminc/dnd-builder 3.4.2 → 3.4.5

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [3.4.5](https://github.com/jotform/dnd-builder/compare/v3.4.4...v3.4.5) (2026-02-25)
+
+
+### Bug Fixes
+
+* **dnd-builder:** add ignore events to enhance keyboard event suppression ([392f035](https://github.com/jotform/dnd-builder/commit/392f035865630478f26fdc45660553b7fd075aff))
+
+## [3.4.4](https://github.com/jotform/dnd-builder/compare/v3.4.3...v3.4.4) (2026-02-25)
+
+
+### Bug Fixes
+
+* **context-menu/tool-bar:** update SVG icons and improve toolbar styles for consistency ([68304a3](https://github.com/jotform/dnd-builder/commit/68304a3c9bc16745af349721c3a595beb68ec793))
+* **dnd-builder:** toolbar actions renw ([a6b0ce8](https://github.com/jotform/dnd-builder/commit/a6b0ce8bd6308e0b8b68c6ecd753b9eda6b0296a))
+
+## [3.4.3](https://github.com/jotform/dnd-builder/compare/v3.4.1...v3.4.3) (2026-02-20)
+
 ## [3.4.2](https://github.com/jotform/dnd-builder/compare/v3.4.1...v3.4.2) (2026-02-20)
 
 ## [3.4.1](https://github.com/jotform/dnd-builder/compare/v3.5.0...v3.4.1) (2026-02-19)

package/index.d.ts

@@ -164,6 +164,8 @@ export interface CommonProps {
 export interface BuilderProps extends CommonProps {
   /** Array of strings representing item types that should have disabled interaction */
   disableInteraction?: string[];
+  /** CSS selectors ignored by right panel click-outside logic */
+  clickOutsideIgnoreSelectors?: string[];
   /** Last scroll position */
   lastScrollPosition?: number;
   /** Configuration for the left panel elements */

package/lib/cjs/assets/svg/angle_down.svg.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+var _path;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function SvgAngleDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.293 10.293a1 1 0 011.414 0L12 13.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
+    clipRule: "evenodd"
+  })));
+}
+
+module.exports = SvgAngleDown;
+//# sourceMappingURL=angle_down.svg.js.map

package/lib/cjs/assets/svg/angle_down.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"angle_down.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/assets/svg/angle_left.svg.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+var _path;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function SvgAngleLeft(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M13.707 7.293a1 1 0 010 1.414L10.414 12l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
+    clipRule: "evenodd"
+  })));
+}
+
+module.exports = SvgAngleLeft;
+//# sourceMappingURL=angle_left.svg.js.map

package/lib/cjs/assets/svg/angle_left.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"angle_left.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/assets/svg/angle_right.svg.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+var _path;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function SvgAngleRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10.293 7.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L13.586 12l-3.293-3.293a1 1 0 010-1.414z",
+    clipRule: "evenodd"
+  })));
+}
+
+module.exports = SvgAngleRight;
+//# sourceMappingURL=angle_right.svg.js.map

package/lib/cjs/assets/svg/angle_right.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"angle_right.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/assets/svg/angle_up.svg.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+var _path;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function SvgAngleUp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M11.293 8.293a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L12 10.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4z",
+    clipRule: "evenodd"
+  })));
+}
+
+module.exports = SvgAngleUp;
+//# sourceMappingURL=angle_up.svg.js.map

package/lib/cjs/assets/svg/angle_up.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"angle_up.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/assets/svg/contextmenu/moveToBack.svg.js

@@ -2,30 +2,21 @@
 
 var React = require('react');
 
-var _g;
+var _path;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function SvgMoveToBack(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 15 14"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    viewBox: "0 0 16 16",
     fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#B3C9FF",
-    d: "M5.356 14a.5.5 0 00.354-.854l-3-3A.5.5 0 002.356 10H.5a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h4.856zm9.144 0a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5h-1.865a.5.5 0 00-.353.146l-3 3a.5.5 0 00.353.854z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#4277FF",
-    d: "M.5 4h14a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5H.5a.5.5 0 00-.5.5v3a.5.5 0 00.5.5z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#7A9FFF",
-    d: "M.5 9h5a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5h-5a.5.5 0 00-.5.5v3a.5.5 0 00.5.5zm9 0h5a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5h-5a.5.5 0 00-.5.5v3a.5.5 0 00.5.5z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#4277FF",
-    d: "M7.855 13.148l2.743-2.72a.25.25 0 00-.176-.428H8L8 2H7v8H4.63a.25.25 0 00-.178.426l2.696 2.719a.5.5 0 00.707.003z"
-  }))));
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.471 12.472A.667.667 0 0014 11.334h-1.333V2a.667.667 0 10-1.334 0v9.334H10a.667.667 0 00-.471 1.138l2 2c.26.26.682.26.942 0l2-2zM7.333 3.333v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2a2 2 0 012-2h2a2 2 0 012 2zM6 3.333a.667.667 0 00-.667-.666h-2a.667.667 0 00-.666.667v2c0 .368.298.666.666.666h2A.667.667 0 006 5.333v-2zm1.333 7.334a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2z",
+    fill: "#fff"
+  })));
 }
 
 module.exports = SvgMoveToBack;

package/lib/cjs/assets/svg/contextmenu/moveToBack.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"moveToBack.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"moveToBack.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/assets/svg/contextmenu/moveToBackward.svg.js

@@ -2,30 +2,24 @@
 
 var React = require('react');
 
-var _g;
+var _path, _path2;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function SvgMoveToBackward(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 15 14"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    viewBox: "0 0 16 16",
     fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#B3C9FF",
-    d: "M5.356 9a.5.5 0 00.354-.854l-3-3A.5.5 0 002.356 5H.5a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h4.856zM14.5 9a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5h-1.865a.5.5 0 00-.353.146l-3 3A.5.5 0 009.635 9z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#4277FF",
-    d: "M.5 4h14a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5H.5a.5.5 0 00-.5.5v3a.5.5 0 00.5.5z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#7A9FFF",
-    d: "M.5 14h14a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5H.5a.5.5 0 00-.5.5v3a.5.5 0 00.5.5z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#4277FF",
-    d: "M7.855 8.148l2.743-2.72A.25.25 0 0010.422 5H8L8 2H7v3H4.63a.25.25 0 00-.178.426l2.696 2.719a.5.5 0 00.707.003z"
-  }))));
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.471 3.529A.667.667 0 0114 4.667h-1.333V14a.667.667 0 01-1.334 0V4.667H10a.667.667 0 01-.471-1.138l2-2c.26-.26.682-.26.942 0l2 2z",
+    fill: "#fff"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M6.5 2.663c0-.736-.597-1.333-1.334-1.333H3.833c-.736 0-1.333.597-1.333 1.333v1.334c0 .736.597 1.333 1.333 1.333h1.333c.737 0 1.334-.597 1.334-1.333V2.663zM5.166 5.997c.736 0 1.334.597 1.334 1.334v1.333c0 .736-.598 1.333-1.334 1.333H3.833A1.333 1.333 0 012.5 8.664V7.33c0-.737.597-1.334 1.333-1.334h1.333zm-1.333.888c-.245 0-.444.2-.444.445v1.334c0 .245.199.444.444.444h1.333c.245 0 .445-.2.445-.444V7.33c0-.246-.2-.445-.445-.445H3.833zM5.166 10.663c.736 0 1.334.597 1.334 1.333v1.334c0 .736-.598 1.333-1.334 1.333H3.833A1.333 1.333 0 012.5 13.33v-1.334c0-.736.597-1.333 1.333-1.333h1.333zm-1.333.89a.445.445 0 00-.444.444v1.333c0 .245.199.444.444.444h1.333a.445.445 0 00.445-.444v-1.333c0-.245-.2-.444-.445-.444H3.833z",
+    fill: "#fff"
+  })));
 }
 
 module.exports = SvgMoveToBackward;

package/lib/cjs/assets/svg/contextmenu/moveToBackward.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"moveToBackward.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"moveToBackward.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/assets/svg/contextmenu/moveToForward.svg.js

@@ -2,30 +2,24 @@
 
 var React = require('react');
 
-var _g;
+var _path, _path2;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function SvgMoveToForward(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 15 14"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    viewBox: "0 0 16 16",
     fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#B3C9FF",
-    d: "M5.356 5a.5.5 0 01.354.854l-3 3A.5.5 0 012.356 9H.5a.5.5 0 01-.5-.5v-3A.5.5 0 01.5 5h4.856zM14.5 5a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-1.865a.5.5 0 01-.353-.146l-3-3A.5.5 0 019.635 5z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#4277FF",
-    d: "M.5 10h14a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H.5a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#7A9FFF",
-    d: "M.5 0h14a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H.5a.5.5 0 01-.5-.5v-3A.5.5 0 01.5 0z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#4277FF",
-    d: "M7.855 5.852l2.743 2.72a.25.25 0 01-.176.428H8L8 12H7V9H4.63a.25.25 0 01-.178-.426l2.696-2.719a.5.5 0 01.707-.003z"
-  }))));
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.471 12.472A.667.667 0 0014 11.334h-1.333V2a.667.667 0 00-1.334 0v9.334H10a.667.667 0 00-.471 1.138l2 2c.26.26.682.26.942 0l2-2z",
+    fill: "#fff"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M5.167 1.33c.736 0 1.333.597 1.333 1.333v1.333c0 .736-.597 1.334-1.333 1.334H3.833A1.334 1.334 0 012.5 3.996V2.663c0-.736.597-1.333 1.333-1.333h1.334zm-1.334.889c-.245 0-.444.199-.444.444v1.333c0 .245.199.445.444.445h1.334c.245 0 .444-.2.444-.445V2.663a.445.445 0 00-.444-.444H3.833zM5.167 5.997c.736 0 1.333.596 1.333 1.333v1.334c0 .736-.597 1.332-1.333 1.333H3.833A1.333 1.333 0 012.5 8.664V7.33c0-.737.597-1.333 1.333-1.333h1.334zm-1.334.888c-.245 0-.444.2-.444.445v1.334c0 .245.199.444.444.444h1.334c.245 0 .444-.2.444-.444V7.33c0-.246-.199-.445-.444-.445H3.833zM6.5 11.997c0-.736-.597-1.333-1.333-1.333H3.833c-.736 0-1.333.597-1.333 1.333v1.333c0 .737.597 1.334 1.333 1.334h1.334c.736 0 1.333-.597 1.333-1.334v-1.333z",
+    fill: "#fff"
+  })));
 }
 
 module.exports = SvgMoveToForward;

package/lib/cjs/assets/svg/contextmenu/moveToForward.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"moveToForward.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"moveToForward.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/assets/svg/contextmenu/moveToFront.svg.js

@@ -2,30 +2,21 @@
 
 var React = require('react');
 
-var _g;
+var _path;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function SvgMoveToFront(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 15 14"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    viewBox: "0 0 16 16",
     fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#B3C9FF",
-    d: "M5.356 0a.5.5 0 01.354.854l-3 3A.5.5 0 012.356 4H.5a.5.5 0 01-.5-.5v-3A.5.5 0 01.5 0h4.856zM14.5 0a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-1.865a.5.5 0 01-.353-.146l-3-3A.5.5 0 019.635 0z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#4277FF",
-    d: "M.5 10h14a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H.5a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#7A9FFF",
-    d: "M.5 5h5a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-5a.5.5 0 01-.5-.5v-3A.5.5 0 01.5 5zm9 0h5a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-5a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#4277FF",
-    d: "M7.855.852l2.743 2.72a.25.25 0 01-.176.428H8L8 12H7V4H4.63a.25.25 0 01-.178-.426L7.148.855a.5.5 0 01.707-.003z"
-  }))));
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.471 3.529A.667.667 0 0114 4.667h-1.333V14a.667.667 0 11-1.334 0V4.667H10a.667.667 0 01-.471-1.138l2-2c.26-.26.682-.26.942 0l2 2zm-7.138 9.138v-2a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2zm-1.333 0a.667.667 0 01-.667.667h-2a.667.667 0 01-.666-.667v-2c0-.368.298-.667.666-.667h2c.369 0 .667.299.667.667v2zm1.333-7.333a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2a2 2 0 012-2h2a2 2 0 012 2v2z",
+    fill: "#fff"
+  })));
 }
 
 module.exports = SvgMoveToFront;

package/lib/cjs/assets/svg/contextmenu/moveToFront.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"moveToFront.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"moveToFront.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -42,6 +42,9 @@ Builder.propTypes = {
 
   /** Array of React components to render statically on each page (eg. watermark) */
   additionalPageItems: PropTypes__default['default'].arrayOf(PropTypes__default['default'].node),
+
+  /** CSS selectors ignored by right panel click-outside logic */
+  clickOutsideIgnoreSelectors: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
   disableInteraction: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
 
   /** To pass in extra props to items selectively */

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

@@ -1 +1 @@
-{"version":3,"file":"Builder.js","sources":["../../../../src/components/Builder/Builder.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport DndWrapper from './DndWrapper';\nimport Scene from './Scene';\nimport RightPanel from '../Panels/RightPanel';\nimport LeftPanel from '../Panels/LeftPanel';\nimport SlidesPanel from '../Panels/SlidesPanel';\nimport AllSlidesPanel from '../Panels/AllSlidesPanel';\nimport { leftPanelConfigPropType } from '../../constants/propTypes';\nimport '../../styles/jfReportsBundle.scss';\nimport BuilderWrapper from './BuilderWrapper';\nimport Providers from '../../contexts/Providers';\n\nconst Builder = props => {\n  const { useExperimentalFeatures } = props;\n  return (\n    <Providers\n      mode=\"customize\"\n      {...props}\n    >\n      <BuilderWrapper>\n        <DndWrapper>\n          <LeftPanel />\n          <Scene />\n        </DndWrapper>\n        <RightPanel />\n        <SlidesPanel />\n        {useExperimentalFeatures && (\n          <AllSlidesPanel />\n        )}\n      </BuilderWrapper>\n    </Providers>\n\n  );\n};\n\nBuilder.propTypes = {\n  /** Items for to render in the report */\n  acceptedItems: PropTypes.shape({}),\n  /** Array of React components to render statically on each page (eg. watermark) */\n  additionalPageItems: PropTypes.arrayOf(PropTypes.node),\n  disableInteraction: PropTypes.arrayOf(PropTypes.string),\n  /** To pass in extra props to items selectively */\n  itemAccessor: PropTypes.func,\n  /** Last scroll position */\n  lastScrollPosition: PropTypes.number,\n  leftPanelConfig: leftPanelConfigPropType,\n  /** To track and log user actions */\n  onAnEventTrigger: PropTypes.func,\n  /** Function called upon adding an item */\n  onItemAdd: PropTypes.func,\n  /** Function called upon editing an item */\n  onItemChange: PropTypes.func,\n  /** Function called upon moving an item */\n  onItemMove: PropTypes.func,\n  /** Function called upon removing an item */\n  onItemRemove: PropTypes.func,\n  /** Function called upon resizing an item */\n  onItemResize: PropTypes.func,\n  onItemsMove: PropTypes.func,\n  /** Function called upon adding a page */\n  onPageAdd: PropTypes.func,\n  /** Function called upon editing a page */\n  onPageChange: PropTypes.func,\n  /** Function called upon duplicating a page */\n  onPageDuplicate: PropTypes.func,\n  /** Function called upon reordering pages */\n  onPageOrdersChange: PropTypes.func,\n  /** Function called upon removing a page */\n  onPageRemove: PropTypes.func,\n  /** Function called upon page visibility changed */\n  onPageVisibilityChanged: PropTypes.func,\n  /** Function called when the slides or the right panel is\n   * toggled takes a boolean value to indicate whether or\n   * not the panel is toggled open.\n   */\n  onRightPanelsToggled: PropTypes.func,\n  /** Function called upon selecting items */\n  onSelectedItemsChanged: PropTypes.func,\n  /** Function called upon editing a general report setting */\n  onSettingChange: PropTypes.func,\n  /** Array of pages with their settings and items */\n  pages: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n  /** General report settings such as layout size and background color */\n  settings: PropTypes.shape({}),\n  /** Theme */\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']),\n  useExperimentalFeatures: PropTypes.bool,\n};\n\nexport default Builder;\n"],"names":["Builder","props","useExperimentalFeatures","_jsx","_jsxs","propTypes","acceptedItems","PropTypes","shape","additionalPageItems","arrayOf","node","disableInteraction","string","itemAccessor","func","lastScrollPosition","number","leftPanelConfig","leftPanelConfigPropType","onAnEventTrigger","onItemAdd","onItemChange","onItemMove","onItemRemove","onItemResize","onItemsMove","onPageAdd","onPageChange","onPageDuplicate","onPageOrdersChange","onPageRemove","onPageVisibilityChanged","onRightPanelsToggled","onSelectedItemsChanged","onSettingChange","pages","settings","theme","oneOf","bool"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;IAYMA,OAAO,GAAG,SAAVA,OAAU,CAAAC,KAAK,EAAI;AACvB,MAAQC,uBAAR,GAAoCD,KAApC,CAAQC,uBAAR;AACA,sBACEC,eAAC,SAAD;AACE,IAAA,IAAI,EAAC;AADP,KAEMF,KAFN;AAAA,2BAIEG,gBAAC,cAAD;AAAA,8BACEA,gBAAC,UAAD;AAAA,gCACED,eAAC,SAAD,KADF,eAEEA,eAAC,KAAD,KAFF;AAAA,QADF,eAKEA,eAAC,UAAD,KALF,eAMEA,eAAC,WAAD,KANF,EAOGD,uBAAuB,iBACtBC,eAAC,cAAD,KARJ;AAAA;AAJF,KADF;AAmBD;;AAEDH,OAAO,CAACK,SAAR,GAAoB;AAClB;AACAC,EAAAA,aAAa,EAAEC,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CAFG;;AAGlB;AACAC,EAAAA,mBAAmB,EAAEF,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACI,IAA5B,CAJH;AAKlBC,EAAAA,kBAAkB,EAAEL,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACM,MAA5B,CALF;;AAMlB;AACAC,EAAAA,YAAY,EAAEP,6BAAS,CAACQ,IAPN;;AAQlB;AACAC,EAAAA,kBAAkB,EAAET,6BAAS,CAACU,MATZ;AAUlBC,EAAAA,eAAe,EAAEC,iCAVC;;AAWlB;AACAC,EAAAA,gBAAgB,EAAEb,6BAAS,CAACQ,IAZV;;AAalB;AACAM,EAAAA,SAAS,EAAEd,6BAAS,CAACQ,IAdH;;AAelB;AACAO,EAAAA,YAAY,EAAEf,6BAAS,CAACQ,IAhBN;;AAiBlB;AACAQ,EAAAA,UAAU,EAAEhB,6BAAS,CAACQ,IAlBJ;;AAmBlB;AACAS,EAAAA,YAAY,EAAEjB,6BAAS,CAACQ,IApBN;;AAqBlB;AACAU,EAAAA,YAAY,EAAElB,6BAAS,CAACQ,IAtBN;AAuBlBW,EAAAA,WAAW,EAAEnB,6BAAS,CAACQ,IAvBL;;AAwBlB;AACAY,EAAAA,SAAS,EAAEpB,6BAAS,CAACQ,IAzBH;;AA0BlB;AACAa,EAAAA,YAAY,EAAErB,6BAAS,CAACQ,IA3BN;;AA4BlB;AACAc,EAAAA,eAAe,EAAEtB,6BAAS,CAACQ,IA7BT;;AA8BlB;AACAe,EAAAA,kBAAkB,EAAEvB,6BAAS,CAACQ,IA/BZ;;AAgClB;AACAgB,EAAAA,YAAY,EAAExB,6BAAS,CAACQ,IAjCN;;AAkClB;AACAiB,EAAAA,uBAAuB,EAAEzB,6BAAS,CAACQ,IAnCjB;;AAoClB;AACF;AACA;AACA;AACEkB,EAAAA,oBAAoB,EAAE1B,6BAAS,CAACQ,IAxCd;;AAyClB;AACAmB,EAAAA,sBAAsB,EAAE3B,6BAAS,CAACQ,IA1ChB;;AA2ClB;AACAoB,EAAAA,eAAe,EAAE5B,6BAAS,CAACQ,IA5CT;;AA6ClB;AACAqB,EAAAA,KAAK,EAAE7B,6BAAS,CAACG,OAAV,CACLH,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CADK,CA9CW;;AAiDlB;AACA6B,EAAAA,QAAQ,EAAE9B,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CAlDQ;;AAmDlB;AACA8B,EAAAA,KAAK,EAAE/B,6BAAS,CAACgC,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB,CApDW;AAqDlBrC,EAAAA,uBAAuB,EAAEK,6BAAS,CAACiC;AArDjB,CAApB;;;;"}
+{"version":3,"file":"Builder.js","sources":["../../../../src/components/Builder/Builder.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport DndWrapper from './DndWrapper';\nimport Scene from './Scene';\nimport RightPanel from '../Panels/RightPanel';\nimport LeftPanel from '../Panels/LeftPanel';\nimport SlidesPanel from '../Panels/SlidesPanel';\nimport AllSlidesPanel from '../Panels/AllSlidesPanel';\nimport { leftPanelConfigPropType } from '../../constants/propTypes';\nimport '../../styles/jfReportsBundle.scss';\nimport BuilderWrapper from './BuilderWrapper';\nimport Providers from '../../contexts/Providers';\n\nconst Builder = props => {\n  const { useExperimentalFeatures } = props;\n  return (\n    <Providers\n      mode=\"customize\"\n      {...props}\n    >\n      <BuilderWrapper>\n        <DndWrapper>\n          <LeftPanel />\n          <Scene />\n        </DndWrapper>\n        <RightPanel />\n        <SlidesPanel />\n        {useExperimentalFeatures && (\n          <AllSlidesPanel />\n        )}\n      </BuilderWrapper>\n    </Providers>\n\n  );\n};\n\nBuilder.propTypes = {\n  /** Items for to render in the report */\n  acceptedItems: PropTypes.shape({}),\n  /** Array of React components to render statically on each page (eg. watermark) */\n  additionalPageItems: PropTypes.arrayOf(PropTypes.node),\n  /** CSS selectors ignored by right panel click-outside logic */\n  clickOutsideIgnoreSelectors: PropTypes.arrayOf(PropTypes.string),\n  disableInteraction: PropTypes.arrayOf(PropTypes.string),\n  /** To pass in extra props to items selectively */\n  itemAccessor: PropTypes.func,\n  /** Last scroll position */\n  lastScrollPosition: PropTypes.number,\n  leftPanelConfig: leftPanelConfigPropType,\n  /** To track and log user actions */\n  onAnEventTrigger: PropTypes.func,\n  /** Function called upon adding an item */\n  onItemAdd: PropTypes.func,\n  /** Function called upon editing an item */\n  onItemChange: PropTypes.func,\n  /** Function called upon moving an item */\n  onItemMove: PropTypes.func,\n  /** Function called upon removing an item */\n  onItemRemove: PropTypes.func,\n  /** Function called upon resizing an item */\n  onItemResize: PropTypes.func,\n  onItemsMove: PropTypes.func,\n  /** Function called upon adding a page */\n  onPageAdd: PropTypes.func,\n  /** Function called upon editing a page */\n  onPageChange: PropTypes.func,\n  /** Function called upon duplicating a page */\n  onPageDuplicate: PropTypes.func,\n  /** Function called upon reordering pages */\n  onPageOrdersChange: PropTypes.func,\n  /** Function called upon removing a page */\n  onPageRemove: PropTypes.func,\n  /** Function called upon page visibility changed */\n  onPageVisibilityChanged: PropTypes.func,\n  /** Function called when the slides or the right panel is\n   * toggled takes a boolean value to indicate whether or\n   * not the panel is toggled open.\n   */\n  onRightPanelsToggled: PropTypes.func,\n  /** Function called upon selecting items */\n  onSelectedItemsChanged: PropTypes.func,\n  /** Function called upon editing a general report setting */\n  onSettingChange: PropTypes.func,\n  /** Array of pages with their settings and items */\n  pages: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n  /** General report settings such as layout size and background color */\n  settings: PropTypes.shape({}),\n  /** Theme */\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']),\n  useExperimentalFeatures: PropTypes.bool,\n};\n\nexport default Builder;\n"],"names":["Builder","props","useExperimentalFeatures","_jsx","_jsxs","propTypes","acceptedItems","PropTypes","shape","additionalPageItems","arrayOf","node","clickOutsideIgnoreSelectors","string","disableInteraction","itemAccessor","func","lastScrollPosition","number","leftPanelConfig","leftPanelConfigPropType","onAnEventTrigger","onItemAdd","onItemChange","onItemMove","onItemRemove","onItemResize","onItemsMove","onPageAdd","onPageChange","onPageDuplicate","onPageOrdersChange","onPageRemove","onPageVisibilityChanged","onRightPanelsToggled","onSelectedItemsChanged","onSettingChange","pages","settings","theme","oneOf","bool"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;IAYMA,OAAO,GAAG,SAAVA,OAAU,CAAAC,KAAK,EAAI;AACvB,MAAQC,uBAAR,GAAoCD,KAApC,CAAQC,uBAAR;AACA,sBACEC,eAAC,SAAD;AACE,IAAA,IAAI,EAAC;AADP,KAEMF,KAFN;AAAA,2BAIEG,gBAAC,cAAD;AAAA,8BACEA,gBAAC,UAAD;AAAA,gCACED,eAAC,SAAD,KADF,eAEEA,eAAC,KAAD,KAFF;AAAA,QADF,eAKEA,eAAC,UAAD,KALF,eAMEA,eAAC,WAAD,KANF,EAOGD,uBAAuB,iBACtBC,eAAC,cAAD,KARJ;AAAA;AAJF,KADF;AAmBD;;AAEDH,OAAO,CAACK,SAAR,GAAoB;AAClB;AACAC,EAAAA,aAAa,EAAEC,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CAFG;;AAGlB;AACAC,EAAAA,mBAAmB,EAAEF,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACI,IAA5B,CAJH;;AAKlB;AACAC,EAAAA,2BAA2B,EAAEL,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACM,MAA5B,CANX;AAOlBC,EAAAA,kBAAkB,EAAEP,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACM,MAA5B,CAPF;;AAQlB;AACAE,EAAAA,YAAY,EAAER,6BAAS,CAACS,IATN;;AAUlB;AACAC,EAAAA,kBAAkB,EAAEV,6BAAS,CAACW,MAXZ;AAYlBC,EAAAA,eAAe,EAAEC,iCAZC;;AAalB;AACAC,EAAAA,gBAAgB,EAAEd,6BAAS,CAACS,IAdV;;AAelB;AACAM,EAAAA,SAAS,EAAEf,6BAAS,CAACS,IAhBH;;AAiBlB;AACAO,EAAAA,YAAY,EAAEhB,6BAAS,CAACS,IAlBN;;AAmBlB;AACAQ,EAAAA,UAAU,EAAEjB,6BAAS,CAACS,IApBJ;;AAqBlB;AACAS,EAAAA,YAAY,EAAElB,6BAAS,CAACS,IAtBN;;AAuBlB;AACAU,EAAAA,YAAY,EAAEnB,6BAAS,CAACS,IAxBN;AAyBlBW,EAAAA,WAAW,EAAEpB,6BAAS,CAACS,IAzBL;;AA0BlB;AACAY,EAAAA,SAAS,EAAErB,6BAAS,CAACS,IA3BH;;AA4BlB;AACAa,EAAAA,YAAY,EAAEtB,6BAAS,CAACS,IA7BN;;AA8BlB;AACAc,EAAAA,eAAe,EAAEvB,6BAAS,CAACS,IA/BT;;AAgClB;AACAe,EAAAA,kBAAkB,EAAExB,6BAAS,CAACS,IAjCZ;;AAkClB;AACAgB,EAAAA,YAAY,EAAEzB,6BAAS,CAACS,IAnCN;;AAoClB;AACAiB,EAAAA,uBAAuB,EAAE1B,6BAAS,CAACS,IArCjB;;AAsClB;AACF;AACA;AACA;AACEkB,EAAAA,oBAAoB,EAAE3B,6BAAS,CAACS,IA1Cd;;AA2ClB;AACAmB,EAAAA,sBAAsB,EAAE5B,6BAAS,CAACS,IA5ChB;;AA6ClB;AACAoB,EAAAA,eAAe,EAAE7B,6BAAS,CAACS,IA9CT;;AA+ClB;AACAqB,EAAAA,KAAK,EAAE9B,6BAAS,CAACG,OAAV,CACLH,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CADK,CAhDW;;AAmDlB;AACA8B,EAAAA,QAAQ,EAAE/B,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CApDQ;;AAqDlB;AACA+B,EAAAA,KAAK,EAAEhC,6BAAS,CAACiC,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB,CAtDW;AAuDlBtC,EAAAA,uBAAuB,EAAEK,6BAAS,CAACkC;AAvDjB,CAApB;;;;"}

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

@@ -256,7 +256,7 @@ var ContextMenu = function ContextMenu(_ref) {
       top: positions.y
     },
     children: menuItems.map(function (menuItem) {
-      var btnClass = "contextMenu-button jfReportButton".concat(menuItem.class ? menuItem.class : '');
+      var btnClass = "contextMenu-button ".concat(menuItem.class ? menuItem.class : '');
       return /*#__PURE__*/jsxRuntime.jsxs("button", {
         className: btnClass,
         onClick: menuItem.func,

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../../src/components/Builder/ContextMenu.js"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { useEventListener, useTranslatedTexts } from '../../utils/hooks';\nimport {\n  collisionCheck,\n  getContainerPositions,\n  moveArrayItem,\n} from '../../utils/functions';\nimport * as icons from '../../utils/icons';\n\nimport withClickOutside from '../withClickOutside';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst ContextMenu = ({\n  height = 1,\n  item = {},\n  items = [],\n  onClickOutside = () => {},\n  position = {},\n  width = 1,\n}) => {\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const onItemChange = usePropStore(state => state.onItemChange);\n  const onItemRemove = usePropStore(state => state.onItemRemove);\n  const onPageChange = usePropStore(state => state.onPageChange);\n  const [positions, setPositions] = useState(position);\n  const container = useRef(null);\n  const itemIndex = items.findIndex(_item => _item.id === item.id);\n  // Will be mutated.\n  const orderArray = items.map(_item => _item.id);\n\n  const removeFunc = () => {\n    // TODO :: should listen to scroll event, not wheel\n    onClickOutside();\n  };\n\n  useEventListener('wheel', removeFunc);\n\n  useLayoutEffect(() => {\n    setPositions(prev => {\n      const newPosition = getContainerPositions(container.current, prev);\n      return {\n        ...prev,\n        x: newPosition.x,\n        y: newPosition.y,\n      };\n    });\n  }, []);\n\n  const moveToFront = () => {\n    if (items.length !== itemIndex + 1) {\n      moveArrayItem(orderArray, itemIndex, items.length - 1);\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveToBack = () => {\n    if (itemIndex !== 0) {\n      moveArrayItem(orderArray, itemIndex, 0);\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveForward = () => {\n    if (items.length !== itemIndex + 1) {\n      const colluddedItemIndex = collisionCheck(item, items, itemIndex, 1);\n      if (colluddedItemIndex !== null) {\n        moveArrayItem(orderArray, itemIndex, colluddedItemIndex);\n      } else {\n        moveArrayItem(orderArray, itemIndex, itemIndex + 1);\n      }\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveBackward = () => {\n    if (itemIndex !== 0) {\n      const colluddedItemIndex = collisionCheck(item, items, itemIndex, -1);\n      if (colluddedItemIndex) {\n        moveArrayItem(orderArray, itemIndex, colluddedItemIndex);\n      } else {\n        moveArrayItem(orderArray, itemIndex, itemIndex - 1);\n      }\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n\n    onClickOutside();\n  };\n\n  const deleteItem = () => {\n    onItemRemove(item);\n    onClickOutside();\n    onAnEventTrigger('removeItem', item.itemType);\n  };\n\n  const lockOrUnlockItem = () => {\n    onItemChange({ id: item.id }, { isLocked: item.isLocked ? false : true });\n    onClickOutside();\n  };\n\n  const fitToPage = () => {\n    let _height = height;\n    let _width = width;\n    // Keep image ratio on fit\n    if (item.itemType === 'image') {\n      if (item.height > item.width) {\n        _width = (item.width * _height) / item.height;\n      } else if (item.width > item.height) {\n        _height = (item.height * _width) / item.width;\n      }\n    }\n\n    onItemChange({ id: item.id }, {\n      height: _height,\n      left: 0,\n      top: 0,\n      width: _width,\n    });\n\n    onClickOutside();\n    onAnEventTrigger('fitToPage', item.itemType);\n  };\n\n  const {\n    DELETE, FIT_TO_PAGE, LOCK_ITEM,\n    MOVE_BACKWARDS, MOVE_FORWARDS,\n    MOVE_TO_BACK, MOVE_TO_FRONT, UNLOCK_ITEM,\n  } = useTranslatedTexts();\n\n  const menuItems = [\n    { func: moveToFront, icon: <icons.moveToFront />, text: MOVE_TO_FRONT },\n    { func: moveForward, icon: <icons.moveToForward />, text: MOVE_FORWARDS },\n    { func: moveBackward, icon: <icons.moveToBackward />, text: MOVE_BACKWARDS },\n    { func: moveToBack, icon: <icons.moveToBack />, text: MOVE_TO_BACK },\n    {\n      func: lockOrUnlockItem,\n      icon: item.isLocked ? (\n        <icons.unlock className=\"icon-lock\" />\n      ) : (\n        <icons.lock className=\"icon-lock\" />\n      ),\n      text: item.isLocked ? UNLOCK_ITEM : LOCK_ITEM,\n    },\n    {\n      func: fitToPage, icon: <icons.enterFullscreen className=\"icon-lock\" />, text: FIT_TO_PAGE,\n    },\n    {\n      class: ' isDanger', func: deleteItem, icon: <icons.trash />, text: DELETE,\n    },\n  ];\n\n  return (\n    <div\n      ref={container}\n      className=\"contextMenu-wrapper\"\n      style={{\n        left: positions.x,\n        top: positions.y,\n      }}\n    >\n      {menuItems.map(menuItem => {\n        const btnClass = `contextMenu-button jfReportButton${menuItem.class ? menuItem.class : ''}`;\n        return (\n          <button\n            key={menuItem.text}\n            className={btnClass}\n            onClick={menuItem.func}\n            type=\"button\"\n          >\n            <span className=\"contextMenu-icon\">\n              {menuItem.icon}\n            </span>\n            <span className=\"contextMenu-text\">\n              {menuItem.text}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nContextMenu.propTypes = {\n  height: PropTypes.number,\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    isLocked: PropTypes.bool,\n    itemType: PropTypes.string,\n    left: PropTypes.number,\n    pageID: PropTypes.string,\n    top: PropTypes.number,\n    width: PropTypes.number,\n  }),\n  items: PropTypes.arrayOf(PropTypes.shape({\n    height: PropTypes.number,\n    // id: PropTypes.string,\n    left: PropTypes.number,\n    top: PropTypes.number,\n    width: PropTypes.number,\n  })),\n  onClickOutside: PropTypes.func,\n  position: PropTypes.shape({}),\n  width: PropTypes.number,\n};\n\nconst PortalContext = props => createPortal(<ContextMenu {...props} />, document.body);\n\nexport default withClickOutside(PortalContext);\n"],"names":["ContextMenu","height","item","items","onClickOutside","position","width","onAnEventTrigger","usePropStore","state","onItemChange","onItemRemove","onPageChange","useState","positions","setPositions","container","useRef","itemIndex","findIndex","_item","id","orderArray","map","removeFunc","useEventListener","useLayoutEffect","prev","newPosition","getContainerPositions","current","x","y","moveToFront","length","moveArrayItem","pageID","JSON","stringify","moveToBack","moveForward","colluddedItemIndex","collisionCheck","moveBackward","deleteItem","itemType","lockOrUnlockItem","isLocked","fitToPage","_height","_width","left","top","useTranslatedTexts","DELETE","FIT_TO_PAGE","LOCK_ITEM","MOVE_BACKWARDS","MOVE_FORWARDS","MOVE_TO_BACK","MOVE_TO_FRONT","UNLOCK_ITEM","menuItems","func","icon","_jsx","icons.moveToFront","text","icons.moveToForward","icons.moveToBackward","icons.moveToBack","icons.unlock","icons.lock","icons.enterFullscreen","class","icons.trash","menuItem","btnClass","_jsxs","propTypes","PropTypes","number","shape","string","bool","arrayOf","PortalContext","props","createPortal","document","body","withClickOutside"],"mappings":"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"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../../src/components/Builder/ContextMenu.js"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { useEventListener, useTranslatedTexts } from '../../utils/hooks';\nimport {\n  collisionCheck,\n  getContainerPositions,\n  moveArrayItem,\n} from '../../utils/functions';\nimport * as icons from '../../utils/icons';\n\nimport withClickOutside from '../withClickOutside';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst ContextMenu = ({\n  height = 1,\n  item = {},\n  items = [],\n  onClickOutside = () => {},\n  position = {},\n  width = 1,\n}) => {\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const onItemChange = usePropStore(state => state.onItemChange);\n  const onItemRemove = usePropStore(state => state.onItemRemove);\n  const onPageChange = usePropStore(state => state.onPageChange);\n  const [positions, setPositions] = useState(position);\n  const container = useRef(null);\n  const itemIndex = items.findIndex(_item => _item.id === item.id);\n  // Will be mutated.\n  const orderArray = items.map(_item => _item.id);\n\n  const removeFunc = () => {\n    // TODO :: should listen to scroll event, not wheel\n    onClickOutside();\n  };\n\n  useEventListener('wheel', removeFunc);\n\n  useLayoutEffect(() => {\n    setPositions(prev => {\n      const newPosition = getContainerPositions(container.current, prev);\n      return {\n        ...prev,\n        x: newPosition.x,\n        y: newPosition.y,\n      };\n    });\n  }, []);\n\n  const moveToFront = () => {\n    if (items.length !== itemIndex + 1) {\n      moveArrayItem(orderArray, itemIndex, items.length - 1);\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveToBack = () => {\n    if (itemIndex !== 0) {\n      moveArrayItem(orderArray, itemIndex, 0);\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveForward = () => {\n    if (items.length !== itemIndex + 1) {\n      const colluddedItemIndex = collisionCheck(item, items, itemIndex, 1);\n      if (colluddedItemIndex !== null) {\n        moveArrayItem(orderArray, itemIndex, colluddedItemIndex);\n      } else {\n        moveArrayItem(orderArray, itemIndex, itemIndex + 1);\n      }\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n    onClickOutside();\n  };\n\n  const moveBackward = () => {\n    if (itemIndex !== 0) {\n      const colluddedItemIndex = collisionCheck(item, items, itemIndex, -1);\n      if (colluddedItemIndex) {\n        moveArrayItem(orderArray, itemIndex, colluddedItemIndex);\n      } else {\n        moveArrayItem(orderArray, itemIndex, itemIndex - 1);\n      }\n      onPageChange({\n        id: item.pageID,\n      }, { items: JSON.stringify(orderArray) });\n    }\n\n    onClickOutside();\n  };\n\n  const deleteItem = () => {\n    onItemRemove(item);\n    onClickOutside();\n    onAnEventTrigger('removeItem', item.itemType);\n  };\n\n  const lockOrUnlockItem = () => {\n    onItemChange({ id: item.id }, { isLocked: item.isLocked ? false : true });\n    onClickOutside();\n  };\n\n  const fitToPage = () => {\n    let _height = height;\n    let _width = width;\n    // Keep image ratio on fit\n    if (item.itemType === 'image') {\n      if (item.height > item.width) {\n        _width = (item.width * _height) / item.height;\n      } else if (item.width > item.height) {\n        _height = (item.height * _width) / item.width;\n      }\n    }\n\n    onItemChange({ id: item.id }, {\n      height: _height,\n      left: 0,\n      top: 0,\n      width: _width,\n    });\n\n    onClickOutside();\n    onAnEventTrigger('fitToPage', item.itemType);\n  };\n\n  const {\n    DELETE, FIT_TO_PAGE, LOCK_ITEM,\n    MOVE_BACKWARDS, MOVE_FORWARDS,\n    MOVE_TO_BACK, MOVE_TO_FRONT, UNLOCK_ITEM,\n  } = useTranslatedTexts();\n\n  const menuItems = [\n    { func: moveToFront, icon: <icons.moveToFront />, text: MOVE_TO_FRONT },\n    { func: moveForward, icon: <icons.moveToForward />, text: MOVE_FORWARDS },\n    { func: moveBackward, icon: <icons.moveToBackward />, text: MOVE_BACKWARDS },\n    { func: moveToBack, icon: <icons.moveToBack />, text: MOVE_TO_BACK },\n    {\n      func: lockOrUnlockItem,\n      icon: item.isLocked ? (\n        <icons.unlock className=\"icon-lock\" />\n      ) : (\n        <icons.lock className=\"icon-lock\" />\n      ),\n      text: item.isLocked ? UNLOCK_ITEM : LOCK_ITEM,\n    },\n    {\n      func: fitToPage, icon: <icons.enterFullscreen className=\"icon-lock\" />, text: FIT_TO_PAGE,\n    },\n    {\n      class: ' isDanger', func: deleteItem, icon: <icons.trash />, text: DELETE,\n    },\n  ];\n\n  return (\n    <div\n      ref={container}\n      className=\"contextMenu-wrapper\"\n      style={{\n        left: positions.x,\n        top: positions.y,\n      }}\n    >\n      {menuItems.map(menuItem => {\n        const btnClass = `contextMenu-button ${menuItem.class ? menuItem.class : ''}`;\n        return (\n          <button\n            key={menuItem.text}\n            className={btnClass}\n            onClick={menuItem.func}\n            type=\"button\"\n          >\n            <span className=\"contextMenu-icon\">\n              {menuItem.icon}\n            </span>\n            <span className=\"contextMenu-text\">\n              {menuItem.text}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nContextMenu.propTypes = {\n  height: PropTypes.number,\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    isLocked: PropTypes.bool,\n    itemType: PropTypes.string,\n    left: PropTypes.number,\n    pageID: PropTypes.string,\n    top: PropTypes.number,\n    width: PropTypes.number,\n  }),\n  items: PropTypes.arrayOf(PropTypes.shape({\n    height: PropTypes.number,\n    // id: PropTypes.string,\n    left: PropTypes.number,\n    top: PropTypes.number,\n    width: PropTypes.number,\n  })),\n  onClickOutside: PropTypes.func,\n  position: PropTypes.shape({}),\n  width: PropTypes.number,\n};\n\nconst PortalContext = props => createPortal(<ContextMenu {...props} />, document.body);\n\nexport default withClickOutside(PortalContext);\n"],"names":["ContextMenu","height","item","items","onClickOutside","position","width","onAnEventTrigger","usePropStore","state","onItemChange","onItemRemove","onPageChange","useState","positions","setPositions","container","useRef","itemIndex","findIndex","_item","id","orderArray","map","removeFunc","useEventListener","useLayoutEffect","prev","newPosition","getContainerPositions","current","x","y","moveToFront","length","moveArrayItem","pageID","JSON","stringify","moveToBack","moveForward","colluddedItemIndex","collisionCheck","moveBackward","deleteItem","itemType","lockOrUnlockItem","isLocked","fitToPage","_height","_width","left","top","useTranslatedTexts","DELETE","FIT_TO_PAGE","LOCK_ITEM","MOVE_BACKWARDS","MOVE_FORWARDS","MOVE_TO_BACK","MOVE_TO_FRONT","UNLOCK_ITEM","menuItems","func","icon","_jsx","icons.moveToFront","text","icons.moveToForward","icons.moveToBackward","icons.moveToBack","icons.unlock","icons.lock","icons.enterFullscreen","class","icons.trash","menuItem","btnClass","_jsxs","propTypes","PropTypes","number","shape","string","bool","arrayOf","PortalContext","props","createPortal","document","body","withClickOutside"],"mappings":"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"}

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

@@ -11,8 +11,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var page_settings = require('../../assets/svg/page_settings.svg.js');
 var duplicate = require('../../assets/svg/duplicate.svg.js');
 var trash = require('../../assets/svg/trash.svg.js');
-var arrow_up = require('../../assets/svg/arrow_up.svg.js');
-var arrow_down = require('../../assets/svg/arrow_down.svg.js');
+var angle_up = require('../../assets/svg/angle_up.svg.js');
+var angle_down = require('../../assets/svg/angle_down.svg.js');
 var plus = require('../../assets/svg/plus.svg.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -113,65 +113,65 @@ var PageActions = function PageActions(_ref) {
       className: "pageCounter p-relative d-flex",
       children: "".concat(order)
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "floatingController forPageAction",
+      className: "floatingController page-toolbar",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "floatingController-container hasGroup",
+        className: "floatingController-container",
         children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-          className: "controllerItem pageSettingSideBtn js-pageSetting",
+          className: "controllerItem",
           onClick: pageSettings,
           title: PAGE_SETTINGS,
           type: "button",
           children: /*#__PURE__*/jsxRuntime.jsx(page_settings, {
-            className: "jfReportSVG icon-pageSettings"
+            className: "toolbar-icon"
           })
         }, "Slide Settings"), /*#__PURE__*/jsxRuntime.jsx("button", {
-          className: "controllerItem js-duplicatePage",
+          className: "controllerItem",
           disabled: disableInteraction.indexOf('duplicate') > -1,
           onClick: onPageDuplicateClick,
           title: DUPLICATE_PAGE,
           type: "button",
           children: /*#__PURE__*/jsxRuntime.jsx(duplicate, {
-            className: "jfReportSVG icon-duplicateLine"
+            className: "toolbar-icon"
           })
         }, "Duplicate Page"), /*#__PURE__*/jsxRuntime.jsx("button", {
-          className: "controllerItem isDanger js-removePage",
+          className: "controllerItem error",
           disabled: disableInteraction.indexOf('remove') > -1,
           onClick: onPageRemoveClick,
           title: REMOVE_PAGE,
           type: "button",
           children: /*#__PURE__*/jsxRuntime.jsx(trash, {
-            className: "jfReportSVG icon-trashLine"
+            className: "toolbar-icon"
           })
         }, "Remove Slide")]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "floatingController-container hasGroup",
+        className: "floatingController-container",
         children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-          className: "js-changeOrderUp controllerItem".concat(order === 1 ? ' disabled' : ''),
+          className: "controllerItem".concat(order === 1 ? ' disabled' : ''),
           onClick: changeOrder(-1),
           title: MOVE_PAGE_UPWARDS,
           type: "button",
-          children: /*#__PURE__*/jsxRuntime.jsx(arrow_up, {
-            className: "jfReportSVG icon-arrow isTick"
+          children: /*#__PURE__*/jsxRuntime.jsx(angle_up, {
+            className: "toolbar-icon"
           })
         }, "Move Page Upwards"), /*#__PURE__*/jsxRuntime.jsx("button", {
-          className: "js-changeOrderDown controllerItem".concat(order === pageCount ? ' disabled' : ''),
+          className: "controllerItem".concat(order === pageCount ? ' disabled' : ''),
           onClick: changeOrder(1),
           title: MOVE_PAGE_DOWNWARDS,
           type: "button",
-          children: /*#__PURE__*/jsxRuntime.jsx(arrow_down, {
-            className: "jfReportSVG icon-arrow isTick"
+          children: /*#__PURE__*/jsxRuntime.jsx(angle_down, {
+            className: "toolbar-icon"
           })
         }, "Move Page Downwards")]
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "floatingController-container",
         children: /*#__PURE__*/jsxRuntime.jsx("button", {
-          className: "js-addNewPage controllerItem",
+          className: "controllerItem primary",
           disabled: disableInteraction.indexOf('add') > -1,
           onClick: onPageAddClick,
           title: ADD_NEW_PAGE,
           type: "button",
           children: /*#__PURE__*/jsxRuntime.jsx(plus, {
-            className: "jfReportSVG icon-plus"
+            className: "toolbar-icon"
           })
         }, "Add Slide")
       })]