@jotforminc/dnd-builder 3.5.6 → 3.6.2

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.6.2](https://github.com/jotform/dnd-builder/compare/v3.6.0...v3.6.2) (2026-04-07)
+
+
+### Bug Fixes
+
+* **dnd-builder:** enable text edit in double click ([78c134b](https://github.com/jotform/dnd-builder/commit/78c134b2b9b9c9730114c55001755560272baced))
+* **dnd-builder:** improve panel management and slide item interactions ([b7366f5](https://github.com/jotform/dnd-builder/commit/b7366f5a73e783bfbacf5989678ecabb8506888a))
+* **dnd-builder:** page actions visibility changes ([2ce60e4](https://github.com/jotform/dnd-builder/commit/2ce60e46ad84c9ae37feb244120055943b276cb2))
+
+## [3.6.1](https://github.com/jotform/dnd-builder/compare/v3.6.0...v3.6.1) (2026-04-07)
+
+
+### Bug Fixes
+
+* **dnd-builder:** enable rich text edit in double click ([78c134b](https://github.com/jotform/dnd-builder/commit/78c134b2b9b9c9730114c55001755560272baced))
+
+## [3.6.0](https://github.com/jotform/dnd-builder/compare/v3.5.6...v3.6.0) (2026-04-06)
+
+
+### Features
+
+* **dnd-builder:** add slide navigator ([c9492c2](https://github.com/jotform/dnd-builder/commit/c9492c2eb5e8a78076025e949297be240c18cfb2))
+* **dnd-builder:** init slide navigator ([95ef9a9](https://github.com/jotform/dnd-builder/commit/95ef9a91ecea8202359fdafa50fc590aee07ae5f))
+
+
+### Bug Fixes
+
+* **dnd-builder:** add behavioral changes ([59931a4](https://github.com/jotform/dnd-builder/commit/59931a4250574b1e6d268f4cf5ff80c3f2da6d62))
+* **dnd-builder:** integrate motion animations and enhance slide navigator functionality ([6f3bcfc](https://github.com/jotform/dnd-builder/commit/6f3bcfc36eeb59c300ea350c8070f6e676e4f73f))
+
 ## [3.5.6](https://github.com/jotform/dnd-builder/compare/v3.5.5...v3.5.6) (2026-03-26)
 
 ## [3.5.4](https://github.com/jotform/dnd-builder/compare/v3.5.3...v3.5.4) (2026-03-26)

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

@@ -6,7 +6,6 @@ var Scene = require('./Scene.js');
 var RightPanel = require('../Panels/RightPanel/RightPanel.js');
 var LeftPanel = require('../Panels/LeftPanel/LeftPanel.js');
 var SlidesPanel = require('../Panels/SlidesPanel/SlidesPanel.js');
-var AllSlidesPanel = require('../Panels/AllSlidesPanel/AllSlidesPanel.js');
 var propTypes = require('../../constants/propTypes.js');
 require('../../styles/jfReportsBundle.scss');
 var BuilderWrapper = require('./BuilderWrapper.js');
@@ -24,14 +23,13 @@ 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 Builder = function Builder(props) {
-  var useExperimentalFeatures = props.useExperimentalFeatures;
   return /*#__PURE__*/jsxRuntime.jsx(Providers, _objectSpread(_objectSpread({
     mode: "customize"
   }, props), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs(BuilderWrapper, {
       children: [/*#__PURE__*/jsxRuntime.jsxs(DndWrapper, {
         children: [/*#__PURE__*/jsxRuntime.jsx(LeftPanel, {}), /*#__PURE__*/jsxRuntime.jsx(Scene, {})]
-      }), /*#__PURE__*/jsxRuntime.jsx(RightPanel, {}), /*#__PURE__*/jsxRuntime.jsx(SlidesPanel, {}), useExperimentalFeatures && /*#__PURE__*/jsxRuntime.jsx(AllSlidesPanel, {})]
+      }), /*#__PURE__*/jsxRuntime.jsx(RightPanel, {}), /*#__PURE__*/jsxRuntime.jsx(SlidesPanel, {})]
     })
   }));
 };

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  /** 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;;;;"}
+{"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 { leftPanelConfigPropType } from '../../constants/propTypes';\nimport '../../styles/jfReportsBundle.scss';\nimport BuilderWrapper from './BuilderWrapper';\nimport Providers from '../../contexts/Providers';\n\nconst Builder = 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      </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","_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","useExperimentalFeatures","bool"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;IAWMA,OAAO,GAAG,SAAVA,OAAU,CAAAC,KAAK,EAAI;AACvB,sBACEC,eAAC,SAAD;AACE,IAAA,IAAI,EAAC;AADP,KAEMD,KAFN;AAAA,2BAIEE,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;AAAA;AAJF,KADF;AAgBD;;AAEDF,OAAO,CAACI,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;AAuDlBC,EAAAA,uBAAuB,EAAElC,6BAAS,CAACmC;AAvDjB,CAApB;;;;"}

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

@@ -9,6 +9,8 @@ var ReportWrapper = require('../ReportWrapper.js');
 var PropContext = require('../../contexts/PropContext.js');
 var BuilderContext = require('../../contexts/BuilderContext.js');
 var hooks = require('../../utils/hooks.js');
+var SlidesNavigator = require('../Panels/SlidesNavigator/SlidesNavigator.js');
+var functions = require('../../utils/functions.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -28,12 +30,18 @@ var BuilderWrapper = function BuilderWrapper(_ref) {
   var isSlidesPanelOpen = BuilderContext.useBuilderStore(function (state) {
     return state.isSlidesPanelOpen;
   });
+  var isSlidesNavigatorOpen = BuilderContext.useBuilderStore(function (state) {
+    return state.isSlidesNavigatorOpen;
+  });
   var setIsLeftPanelOpen = BuilderContext.useBuilderStore(function (state) {
     return state.setIsLeftPanelOpen;
   });
   var setIsSlidesPanelOpen = BuilderContext.useBuilderStore(function (state) {
     return state.setIsSlidesPanelOpen;
   });
+  var setIsSlidesNavigatorOpen = BuilderContext.useBuilderStore(function (state) {
+    return state.setIsSlidesNavigatorOpen;
+  });
   var shouldShowRightPanelInitially = BuilderContext.useBuilderStore(function (state) {
     return state.shouldShowRightPanelInitially;
   });
@@ -43,6 +51,12 @@ var BuilderWrapper = function BuilderWrapper(_ref) {
   var onPageVisibilityChanged = PropContext.usePropStore(function (state) {
     return state.onPageVisibilityChanged;
   });
+  var setVisiblePageOrder = BuilderContext.useBuilderStore(function (state) {
+    return state.setVisiblePageOrder;
+  });
+  var slidesListType = BuilderContext.useBuilderStore(function (state) {
+    return state.slidesListType;
+  });
   var selectedItems = hooks.useSelectedElements();
   var prevSelectedItems = hooks.usePrevious(selectedItems);
   React.useEffect(function () {
@@ -52,9 +66,10 @@ var BuilderWrapper = function BuilderWrapper(_ref) {
   }, [selectedItems, onSelectedItemsChanged, prevSelectedItems]);
   var handlePageVisibility = React.useCallback(function (index) {
     if (index && !Number.isNaN(index)) {
+      setVisiblePageOrder(index);
       onPageVisibilityChanged(index);
     }
-  }, [onPageVisibilityChanged]); // for initial page visibility check and slides panel visibility usage
+  }, [setVisiblePageOrder, onPageVisibilityChanged]); // for initial page visibility check and slides panel visibility usage
 
   var selectedPageIndexReference = isSlidesPanelOpen ? 0 : -1;
   hooks.usePageVisibility(handlePageVisibility, pageCount, selectedPageIndexReference);
@@ -66,21 +81,31 @@ var BuilderWrapper = function BuilderWrapper(_ref) {
           setIsLeftPanelOpen(false);
         }
 
+        if (functions.slidesAsNavigator(slidesListType)) {
+          setIsSlidesNavigatorOpen(true);
+        }
+
         setIsSlidesPanelOpen(shouldShowRightPanelInitially);
       } else {
         if (isSlidesPanelOpen) {
           setIsSlidesPanelOpen(false);
         }
 
+        if (functions.slidesAsNavigator(slidesListType) && isSlidesNavigatorOpen) {
+          setIsSlidesNavigatorOpen(false);
+        }
+
         setIsLeftPanelOpen(true);
       }
 
       decidedWhichPanelToOpen.current = true;
     }
-  }, [pageCount, isLeftPanelOpen, isSlidesPanelOpen, setIsLeftPanelOpen, setIsSlidesPanelOpen, shouldShowRightPanelInitially]);
-  return /*#__PURE__*/jsxRuntime.jsx(ReportWrapper, {
-    mode: "customize",
-    children: children
+  }, [pageCount, isLeftPanelOpen, isSlidesPanelOpen, isSlidesNavigatorOpen, setIsLeftPanelOpen, setIsSlidesPanelOpen, setIsSlidesNavigatorOpen, shouldShowRightPanelInitially, slidesListType]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [functions.slidesAsNavigator(slidesListType) && /*#__PURE__*/jsxRuntime.jsx(SlidesNavigator, {}), /*#__PURE__*/jsxRuntime.jsx(ReportWrapper, {
+      mode: "customize",
+      children: children
+    })]
   });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BuilderWrapper.js","sources":["../../../../src/components/Builder/BuilderWrapper.js"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash.isequal';\nimport ReportWrapper from '../ReportWrapper';\nimport { usePropStore } from '../../contexts/PropContext';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport {\n  useFitZoom, usePageVisibility, usePrevious, useSelectedElements,\n} from '../../utils/hooks';\n\nconst BuilderWrapper = ({ children }) => {\n  const decidedWhichPanelToOpen = useRef(false);\n\n  const pageCount = usePropStore(state => state.pages.length);\n  const isLeftPanelOpen = useBuilderStore(state => state.isLeftPanelOpen);\n  const isSlidesPanelOpen = useBuilderStore(state => state.isSlidesPanelOpen);\n  const setIsLeftPanelOpen = useBuilderStore(state => state.setIsLeftPanelOpen);\n  const setIsSlidesPanelOpen = useBuilderStore(state => state.setIsSlidesPanelOpen);\n  const shouldShowRightPanelInitially = useBuilderStore(state => state.shouldShowRightPanelInitially);\n  const onSelectedItemsChanged = usePropStore(state => state.onSelectedItemsChanged);\n  const onPageVisibilityChanged = usePropStore(state => state.onPageVisibilityChanged);\n  const selectedItems = useSelectedElements();\n  const prevSelectedItems = usePrevious(selectedItems);\n\n  useEffect(() => {\n    if (prevSelectedItems && !isEqual(prevSelectedItems, selectedItems)) {\n      onSelectedItemsChanged(selectedItems);\n    }\n  }, [\n    selectedItems,\n    onSelectedItemsChanged,\n    prevSelectedItems,\n  ]);\n\n  const handlePageVisibility = useCallback(index => {\n    if (index && !Number.isNaN(index)) {\n      onPageVisibilityChanged(index);\n    }\n  }, [onPageVisibilityChanged]);\n\n  // for initial page visibility check and slides panel visibility usage\n  const selectedPageIndexReference = isSlidesPanelOpen ? 0 : -1;\n  usePageVisibility(handlePageVisibility, pageCount, selectedPageIndexReference);\n\n  useFitZoom();\n\n  useEffect(() => {\n    if (!decidedWhichPanelToOpen.current) {\n      if (pageCount > 1) {\n        if (isLeftPanelOpen) {\n          setIsLeftPanelOpen(false);\n        }\n        setIsSlidesPanelOpen(shouldShowRightPanelInitially);\n      } else {\n        if (isSlidesPanelOpen) {\n          setIsSlidesPanelOpen(false);\n        }\n        setIsLeftPanelOpen(true);\n      }\n\n      decidedWhichPanelToOpen.current = true;\n    }\n  }, [\n    pageCount,\n    isLeftPanelOpen,\n    isSlidesPanelOpen,\n    setIsLeftPanelOpen,\n    setIsSlidesPanelOpen,\n    shouldShowRightPanelInitially,\n  ]);\n\n  return (\n    <ReportWrapper mode=\"customize\">\n      {children}\n    </ReportWrapper>\n  );\n};\n\nBuilderWrapper.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default BuilderWrapper;\n"],"names":["BuilderWrapper","children","decidedWhichPanelToOpen","useRef","pageCount","usePropStore","state","pages","length","isLeftPanelOpen","useBuilderStore","isSlidesPanelOpen","setIsLeftPanelOpen","setIsSlidesPanelOpen","shouldShowRightPanelInitially","onSelectedItemsChanged","onPageVisibilityChanged","selectedItems","useSelectedElements","prevSelectedItems","usePrevious","useEffect","isEqual","handlePageVisibility","useCallback","index","Number","isNaN","selectedPageIndexReference","usePageVisibility","useFitZoom","current","_jsx","propTypes","PropTypes","node","isRequired"],"mappings":"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"}
+{"version":3,"file":"BuilderWrapper.js","sources":["../../../../src/components/Builder/BuilderWrapper.js"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash.isequal';\nimport ReportWrapper from '../ReportWrapper';\nimport { usePropStore } from '../../contexts/PropContext';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport {\n  useFitZoom, usePageVisibility, usePrevious, useSelectedElements,\n} from '../../utils/hooks';\nimport SlidesNavigator from '../Panels/SlidesNavigator/SlidesNavigator';\nimport { slidesAsNavigator } from '../../utils/functions';\n\nconst BuilderWrapper = ({ children }) => {\n  const decidedWhichPanelToOpen = useRef(false);\n\n  const pageCount = usePropStore(state => state.pages.length);\n  const isLeftPanelOpen = useBuilderStore(state => state.isLeftPanelOpen);\n  const isSlidesPanelOpen = useBuilderStore(state => state.isSlidesPanelOpen);\n  const isSlidesNavigatorOpen = useBuilderStore(state => state.isSlidesNavigatorOpen);\n  const setIsLeftPanelOpen = useBuilderStore(state => state.setIsLeftPanelOpen);\n  const setIsSlidesPanelOpen = useBuilderStore(state => state.setIsSlidesPanelOpen);\n  const setIsSlidesNavigatorOpen = useBuilderStore(state => state.setIsSlidesNavigatorOpen);\n  const shouldShowRightPanelInitially = useBuilderStore(state => state.shouldShowRightPanelInitially);\n  const onSelectedItemsChanged = usePropStore(state => state.onSelectedItemsChanged);\n  const onPageVisibilityChanged = usePropStore(state => state.onPageVisibilityChanged);\n  const setVisiblePageOrder = useBuilderStore(state => state.setVisiblePageOrder);\n  const slidesListType = useBuilderStore(state => state.slidesListType);\n  const selectedItems = useSelectedElements();\n  const prevSelectedItems = usePrevious(selectedItems);\n\n  useEffect(() => {\n    if (prevSelectedItems && !isEqual(prevSelectedItems, selectedItems)) {\n      onSelectedItemsChanged(selectedItems);\n    }\n  }, [\n    selectedItems,\n    onSelectedItemsChanged,\n    prevSelectedItems,\n  ]);\n\n  const handlePageVisibility = useCallback(index => {\n    if (index && !Number.isNaN(index)) {\n      setVisiblePageOrder(index);\n      onPageVisibilityChanged(index);\n    }\n  }, [setVisiblePageOrder, onPageVisibilityChanged]);\n\n  // for initial page visibility check and slides panel visibility usage\n  const selectedPageIndexReference = isSlidesPanelOpen ? 0 : -1;\n  usePageVisibility(handlePageVisibility, pageCount, selectedPageIndexReference);\n\n  useFitZoom();\n\n  useEffect(() => {\n    if (!decidedWhichPanelToOpen.current) {\n      if (pageCount > 1) {\n        if (isLeftPanelOpen) {\n          setIsLeftPanelOpen(false);\n        }\n        if (slidesAsNavigator(slidesListType)) {\n          setIsSlidesNavigatorOpen(true);\n        }\n        setIsSlidesPanelOpen(shouldShowRightPanelInitially);\n      } else {\n        if (isSlidesPanelOpen) {\n          setIsSlidesPanelOpen(false);\n        }\n        if (slidesAsNavigator(slidesListType) && isSlidesNavigatorOpen) {\n          setIsSlidesNavigatorOpen(false);\n        }\n        setIsLeftPanelOpen(true);\n      }\n\n      decidedWhichPanelToOpen.current = true;\n    }\n  }, [pageCount, isLeftPanelOpen, isSlidesPanelOpen, isSlidesNavigatorOpen, setIsLeftPanelOpen, setIsSlidesPanelOpen, setIsSlidesNavigatorOpen, shouldShowRightPanelInitially, slidesListType]);\n\n  return (\n    <>\n      {slidesAsNavigator(slidesListType) && <SlidesNavigator />}\n      <ReportWrapper mode=\"customize\">\n        {children}\n      </ReportWrapper>\n    </>\n  );\n};\n\nBuilderWrapper.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default BuilderWrapper;\n"],"names":["BuilderWrapper","children","decidedWhichPanelToOpen","useRef","pageCount","usePropStore","state","pages","length","isLeftPanelOpen","useBuilderStore","isSlidesPanelOpen","isSlidesNavigatorOpen","setIsLeftPanelOpen","setIsSlidesPanelOpen","setIsSlidesNavigatorOpen","shouldShowRightPanelInitially","onSelectedItemsChanged","onPageVisibilityChanged","setVisiblePageOrder","slidesListType","selectedItems","useSelectedElements","prevSelectedItems","usePrevious","useEffect","isEqual","handlePageVisibility","useCallback","index","Number","isNaN","selectedPageIndexReference","usePageVisibility","useFitZoom","current","slidesAsNavigator","_jsxs","_jsx","propTypes","PropTypes","node","isRequired"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 'use strict';
 
+require('core-js/modules/es.array.concat.js');
 require('core-js/modules/es.array.find.js');
 require('core-js/modules/es.array.find-index.js');
 var PropTypes = require('prop-types');
@@ -12,14 +13,24 @@ 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 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 }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
+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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var PageActions = function PageActions(_ref) {
   var _ref$order = _ref.order,
       order = _ref$order === void 0 ? 0 : _ref$order,
@@ -28,7 +39,7 @@ var PageActions = function PageActions(_ref) {
   var pages = PropContext.usePropStore(function (state) {
     return state.pages;
   });
-  var pageCount = pages.length;
+  pages.length;
   var onAnEventTrigger = PropContext.usePropStore(function (state) {
     return state.onAnEventTrigger;
   });
@@ -38,7 +49,7 @@ var PageActions = function PageActions(_ref) {
   var onPageDuplicate = PropContext.usePropStore(function (state) {
     return state.onPageDuplicate;
   });
-  var onPageOrdersChange = PropContext.usePropStore(function (state) {
+  PropContext.usePropStore(function (state) {
     return state.onPageOrdersChange;
   });
   var onPageRemove = PropContext.usePropStore(function (state) {
@@ -57,6 +68,24 @@ var PageActions = function PageActions(_ref) {
   var isSelectedItemExists = React.useMemo(function () {
     return (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0;
   }, [selectedItems]);
+  var setOverPage = BuilderContext.useBuilderStore(function (state) {
+    return state.setOverPage;
+  });
+  var setOutPage = BuilderContext.useBuilderStore(function (state) {
+    return state.setOutPage;
+  });
+  var overPageId = BuilderContext.useBuilderStore(function (state) {
+    return state.overedPageId;
+  });
+
+  var _useState = React.useState(isSelectedItemExists),
+      _useState2 = _slicedToArray(_useState, 2),
+      toolbarDisabled = _useState2[0],
+      setToolbarDisabled = _useState2[1];
+
+  React.useEffect(function () {
+    setToolbarDisabled(isSelectedItemExists);
+  }, [isSelectedItemExists]);
 
   var pageSettings = function pageSettings() {
     setEditedElement("p_".concat(pageID));
@@ -75,25 +104,6 @@ var PageActions = function PageActions(_ref) {
     onAnEventTrigger('removePage', pageID);
   };
 
-  var changeOrder = function changeOrder(direction) {
-    return function () {
-      var pageIndex = pages.findIndex(function (page) {
-        return page.id === pageID;
-      });
-      var editedPages = functions.moveItemInArrayFromIndexToIndex(pages, pageIndex, pageIndex + direction);
-      var pageOrders = editedPages.reduce(function (acc, page, index) {
-        var newOrder = index + 1;
-        acc[page.id] = {
-          order: newOrder
-        };
-        return acc;
-      }, {});
-      onPageOrdersChange(pageOrders);
-      functions.scrollToTarget("pageActions-id-".concat(order + direction));
-      onAnEventTrigger('changePageOrder', direction);
-    };
-  };
-
   var onPageDuplicateClick = function onPageDuplicateClick() {
     var foundPage = pages.find(function (page) {
       return page.id === pageID;
@@ -103,22 +113,39 @@ var PageActions = function PageActions(_ref) {
     onAnEventTrigger('duplicatePage', order + 1);
   };
 
+  var isOverPage = React.useMemo(function () {
+    return overPageId === pageID;
+  }, [overPageId, pageID]);
+  var pageToolbarMouseOver = React.useCallback(function () {
+    if (isSelectedItemExists) {
+      setToolbarDisabled(false);
+    }
+
+    setOverPage(pageID);
+  }, [pageID, setToolbarDisabled, setOverPage, isSelectedItemExists]);
+  var pageToolbarMouseOut = React.useCallback(function () {
+    if (isSelectedItemExists) {
+      setToolbarDisabled(true);
+    }
+
+    setOutPage(null);
+  }, [setOutPage, setToolbarDisabled, isSelectedItemExists]);
+
   var _useTranslatedTexts = hooks.useTranslatedTexts(),
       ADD_NEW_PAGE = _useTranslatedTexts.ADD_NEW_PAGE,
-      DUPLICATE_PAGE = _useTranslatedTexts.DUPLICATE_PAGE,
-      MOVE_PAGE_DOWNWARDS = _useTranslatedTexts.MOVE_PAGE_DOWNWARDS,
-      MOVE_PAGE_UPWARDS = _useTranslatedTexts.MOVE_PAGE_UPWARDS,
-      PAGE_SETTINGS = _useTranslatedTexts.PAGE_SETTINGS,
+      DUPLICATE_PAGE = _useTranslatedTexts.DUPLICATE_PAGE;
+      _useTranslatedTexts.MOVE_PAGE_DOWNWARDS;
+      _useTranslatedTexts.MOVE_PAGE_UPWARDS;
+      var PAGE_SETTINGS = _useTranslatedTexts.PAGE_SETTINGS,
       REMOVE_PAGE = _useTranslatedTexts.REMOVE_PAGE;
 
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "jfReport-pageInfo d-flex j-center",
     id: "pageActions-id-".concat(order),
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "pageCounter p-relative d-flex",
-      children: "".concat(order)
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "floatingController page-toolbar".concat(isSelectedItemExists ? ' disabled' : ''),
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "floatingController page-toolbar".concat(toolbarDisabled ? ' disabled' : '').concat(isOverPage ? ' active' : ' inactive'),
+      onMouseOut: pageToolbarMouseOut,
+      onMouseOver: pageToolbarMouseOver,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "floatingController-container",
         children: [/*#__PURE__*/jsxRuntime.jsx("button", {
@@ -148,26 +175,7 @@ var PageActions = function PageActions(_ref) {
             className: "toolbar-icon"
           })
         }, "Remove Slide")]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "floatingController-container",
-        children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-          className: "controllerItem".concat(order === 1 ? ' disabled' : ''),
-          onClick: changeOrder(-1),
-          title: MOVE_PAGE_UPWARDS,
-          type: "button",
-          children: /*#__PURE__*/jsxRuntime.jsx(angle_up, {
-            className: "toolbar-icon"
-          })
-        }, "Move Page Upwards"), /*#__PURE__*/jsxRuntime.jsx("button", {
-          className: "controllerItem".concat(order === pageCount ? ' disabled' : ''),
-          onClick: changeOrder(1),
-          title: MOVE_PAGE_DOWNWARDS,
-          type: "button",
-          children: /*#__PURE__*/jsxRuntime.jsx(angle_down, {
-            className: "toolbar-icon"
-          })
-        }, "Move Page Downwards")]
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      }), false , /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "floatingController-container",
         children: /*#__PURE__*/jsxRuntime.jsx("button", {
           className: "controllerItem primary",
@@ -180,7 +188,7 @@ var PageActions = function PageActions(_ref) {
           })
         }, "Add Slide")
       })]
-    })]
+    })
   });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"PageActions.js","sources":["../../../../src/components/Builder/PageActions.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useMemo } from 'react';\nimport * as icons from '../../utils/icons';\nimport { moveItemInArrayFromIndexToIndex, scrollToTarget } from '../../utils/functions';\nimport { useSelectedElements, useTranslatedTexts } from '../../utils/hooks';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst PageActions = ({\n  order = 0,\n  pageID = '',\n}) => {\n  const pages = usePropStore(state => state.pages);\n  const pageCount = pages.length;\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const onPageAdd = usePropStore(state => state.onPageAdd);\n  const onPageDuplicate = usePropStore(state => state.onPageDuplicate);\n  const onPageOrdersChange = usePropStore(state => state.onPageOrdersChange);\n  const onPageRemove = usePropStore(state => state.onPageRemove);\n  const disableInteraction = usePropStore(state => state.disableInteraction);\n\n  const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n  const setEditedElement = useBuilderStore(state => state.setEditedElement);\n\n  const selectedItems = useSelectedElements();\n  const isSelectedItemExists = useMemo(() => selectedItems?.length > 0, [selectedItems]);\n\n  const pageSettings = () => {\n    setEditedElement(`p_${pageID}`);\n    setIsRightPanelOpen(true);\n  };\n\n  const onPageAddClick = () => {\n    const newPageIndex = order + 1;\n    onPageAdd(newPageIndex);\n    scrollToTarget(`pageActions-id-${newPageIndex}`, 350);\n    onAnEventTrigger('addNewPage', newPageIndex);\n  };\n\n  const onPageRemoveClick = () => {\n    onPageRemove(pageID);\n    onAnEventTrigger('removePage', pageID);\n  };\n\n  const changeOrder = direction => {\n    return () => {\n      const pageIndex = pages.findIndex(page => page.id === pageID);\n      const editedPages = moveItemInArrayFromIndexToIndex(\n        pages,\n        pageIndex,\n        pageIndex + direction,\n      );\n      const pageOrders = editedPages.reduce((acc, page, index) => {\n        const newOrder = index + 1;\n        acc[page.id] = {\n          order: newOrder,\n        };\n        return acc;\n      }, {});\n      onPageOrdersChange(pageOrders);\n      scrollToTarget(`pageActions-id-${order + direction}`);\n      onAnEventTrigger('changePageOrder', direction);\n    };\n  };\n\n  const onPageDuplicateClick = () => {\n    const foundPage = pages.find(page => page.id === pageID);\n    onPageDuplicate(foundPage);\n    scrollToTarget(`pageActions-id-${order + 1}`, 350);\n    onAnEventTrigger('duplicatePage', order + 1);\n  };\n\n  const {\n    ADD_NEW_PAGE, DUPLICATE_PAGE, MOVE_PAGE_DOWNWARDS,\n    MOVE_PAGE_UPWARDS, PAGE_SETTINGS, REMOVE_PAGE,\n  } = useTranslatedTexts();\n  return (\n    <div\n      className=\"jfReport-pageInfo d-flex j-center\"\n      id={`pageActions-id-${order}`}\n    >\n      <div className=\"pageCounter p-relative d-flex\">\n        {`${order}`}\n      </div>\n      <div className={`floatingController page-toolbar${isSelectedItemExists ? ' disabled' : ''}`}>\n        <div className=\"floatingController-container\">\n          <button\n            key=\"Slide Settings\"\n            className=\"controllerItem\"\n            onClick={pageSettings}\n            title={PAGE_SETTINGS}\n            type=\"button\"\n          >\n            <icons.pageSettings className=\"toolbar-icon\" />\n          </button>\n          <button\n            key=\"Duplicate Page\"\n            className=\"controllerItem\"\n            disabled={disableInteraction.indexOf('duplicate') > -1}\n            onClick={onPageDuplicateClick}\n            title={DUPLICATE_PAGE}\n            type=\"button\"\n          >\n            <icons.duplicate className=\"toolbar-icon\" />\n          </button>\n          <button\n            key=\"Remove Slide\"\n            className=\"controllerItem error\"\n            disabled={disableInteraction.indexOf('remove') > -1}\n            onClick={onPageRemoveClick}\n            title={REMOVE_PAGE}\n            type=\"button\"\n          >\n            <icons.trash className=\"toolbar-icon\" />\n          </button>\n        </div>\n        <div className=\"floatingController-container\">\n          <button\n            key=\"Move Page Upwards\"\n            className={`controllerItem${order === 1 ? ' disabled' : ''}`}\n            onClick={changeOrder(-1)}\n            title={MOVE_PAGE_UPWARDS}\n            type=\"button\"\n          >\n            <icons.angleUp className=\"toolbar-icon\" />\n          </button>\n          <button\n            key=\"Move Page Downwards\"\n            className={`controllerItem${order === pageCount ? ' disabled' : ''}`}\n            onClick={changeOrder(1)}\n            title={MOVE_PAGE_DOWNWARDS}\n            type=\"button\"\n          >\n            <icons.angleDown className=\"toolbar-icon\" />\n          </button>\n        </div>\n        <div className=\"floatingController-container\">\n          <button\n            key=\"Add Slide\"\n            className=\"controllerItem primary\"\n            disabled={disableInteraction.indexOf('add') > -1}\n            onClick={onPageAddClick}\n            title={ADD_NEW_PAGE}\n            type=\"button\"\n          >\n            <icons.plus className=\"toolbar-icon\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nPageActions.propTypes = {\n  order: PropTypes.number,\n  pageID: PropTypes.string,\n};\n\nexport default PageActions;\n"],"names":["PageActions","order","pageID","pages","usePropStore","state","pageCount","length","onAnEventTrigger","onPageAdd","onPageDuplicate","onPageOrdersChange","onPageRemove","disableInteraction","setIsRightPanelOpen","useBuilderStore","setEditedElement","selectedItems","useSelectedElements","isSelectedItemExists","useMemo","pageSettings","onPageAddClick","newPageIndex","scrollToTarget","onPageRemoveClick","changeOrder","direction","pageIndex","findIndex","page","id","editedPages","moveItemInArrayFromIndexToIndex","pageOrders","reduce","acc","index","newOrder","onPageDuplicateClick","foundPage","find","useTranslatedTexts","ADD_NEW_PAGE","DUPLICATE_PAGE","MOVE_PAGE_DOWNWARDS","MOVE_PAGE_UPWARDS","PAGE_SETTINGS","REMOVE_PAGE","_jsxs","_jsx","icons.pageSettings","indexOf","icons.duplicate","icons.trash","icons.angleUp","icons.angleDown","icons.plus","propTypes","PropTypes","number","string"],"mappings":"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"}
+{"version":3,"file":"PageActions.js","sources":["../../../../src/components/Builder/PageActions.js"],"sourcesContent":["/* eslint-disable jsx-a11y/mouse-events-have-key-events */\nimport PropTypes from 'prop-types';\nimport {\n  useCallback, useEffect, useMemo, useState,\n} from 'react';\nimport * as icons from '../../utils/icons';\nimport { moveItemInArrayFromIndexToIndex, scrollToTarget } from '../../utils/functions';\nimport { useSelectedElements, useTranslatedTexts } from '../../utils/hooks';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst PageActions = ({\n  order = 0,\n  pageID = '',\n}) => {\n  const pages = usePropStore(state => state.pages);\n  const pageCount = pages.length;\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const onPageAdd = usePropStore(state => state.onPageAdd);\n  const onPageDuplicate = usePropStore(state => state.onPageDuplicate);\n  const onPageOrdersChange = usePropStore(state => state.onPageOrdersChange);\n  const onPageRemove = usePropStore(state => state.onPageRemove);\n  const disableInteraction = usePropStore(state => state.disableInteraction);\n\n  const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n  const setEditedElement = useBuilderStore(state => state.setEditedElement);\n\n  const selectedItems = useSelectedElements();\n  const isSelectedItemExists = useMemo(() => selectedItems?.length > 0, [selectedItems]);\n\n  const setOverPage = useBuilderStore(state => state.setOverPage);\n  const setOutPage = useBuilderStore(state => state.setOutPage);\n  const overPageId = useBuilderStore(state => state.overedPageId);\n\n  const [toolbarDisabled, setToolbarDisabled] = useState(isSelectedItemExists);\n\n  useEffect(() => {\n    setToolbarDisabled(isSelectedItemExists);\n  }, [isSelectedItemExists]);\n\n  const pageSettings = () => {\n    setEditedElement(`p_${pageID}`);\n    setIsRightPanelOpen(true);\n  };\n\n  const onPageAddClick = () => {\n    const newPageIndex = order + 1;\n    onPageAdd(newPageIndex);\n    scrollToTarget(`pageActions-id-${newPageIndex}`, 350);\n    onAnEventTrigger('addNewPage', newPageIndex);\n  };\n\n  const onPageRemoveClick = () => {\n    onPageRemove(pageID);\n    onAnEventTrigger('removePage', pageID);\n  };\n\n  const changeOrder = direction => {\n    return () => {\n      const pageIndex = pages.findIndex(page => page.id === pageID);\n      const editedPages = moveItemInArrayFromIndexToIndex(\n        pages,\n        pageIndex,\n        pageIndex + direction,\n      );\n      const pageOrders = editedPages.reduce((acc, page, index) => {\n        const newOrder = index + 1;\n        acc[page.id] = {\n          order: newOrder,\n        };\n        return acc;\n      }, {});\n      onPageOrdersChange(pageOrders);\n      scrollToTarget(`pageActions-id-${order + direction}`);\n      onAnEventTrigger('changePageOrder', direction);\n    };\n  };\n\n  const onPageDuplicateClick = () => {\n    const foundPage = pages.find(page => page.id === pageID);\n    onPageDuplicate(foundPage);\n    scrollToTarget(`pageActions-id-${order + 1}`, 350);\n    onAnEventTrigger('duplicatePage', order + 1);\n  };\n\n  const isOverPage = useMemo(() => overPageId === pageID, [overPageId, pageID]);\n\n  const pageToolbarMouseOver = useCallback(() => {\n    if (isSelectedItemExists) {\n      setToolbarDisabled(false);\n    }\n    setOverPage(pageID);\n  }, [pageID, setToolbarDisabled, setOverPage, isSelectedItemExists]);\n\n  const pageToolbarMouseOut = useCallback(() => {\n    if (isSelectedItemExists) {\n      setToolbarDisabled(true);\n    }\n    setOutPage(null);\n  }, [setOutPage, setToolbarDisabled, isSelectedItemExists]);\n\n  const {\n    ADD_NEW_PAGE, DUPLICATE_PAGE, MOVE_PAGE_DOWNWARDS,\n    MOVE_PAGE_UPWARDS, PAGE_SETTINGS, REMOVE_PAGE,\n  } = useTranslatedTexts();\n  return (\n    <div\n      className=\"jfReport-pageInfo d-flex j-center\"\n      id={`pageActions-id-${order}`}\n    >\n      <div\n        className={`floatingController page-toolbar${toolbarDisabled ? ' disabled' : ''}${isOverPage ? ' active' : ' inactive'}`}\n        onMouseOut={pageToolbarMouseOut}\n        onMouseOver={pageToolbarMouseOver}\n      >\n        <div className=\"floatingController-container\">\n          <button\n            key=\"Slide Settings\"\n            className=\"controllerItem\"\n            onClick={pageSettings}\n            title={PAGE_SETTINGS}\n            type=\"button\"\n          >\n            <icons.pageSettings className=\"toolbar-icon\" />\n          </button>\n          <button\n            key=\"Duplicate Page\"\n            className=\"controllerItem\"\n            disabled={disableInteraction.indexOf('duplicate') > -1}\n            onClick={onPageDuplicateClick}\n            title={DUPLICATE_PAGE}\n            type=\"button\"\n          >\n            <icons.duplicate className=\"toolbar-icon\" />\n          </button>\n          <button\n            key=\"Remove Slide\"\n            className=\"controllerItem error\"\n            disabled={disableInteraction.indexOf('remove') > -1}\n            onClick={onPageRemoveClick}\n            title={REMOVE_PAGE}\n            type=\"button\"\n          >\n            <icons.trash className=\"toolbar-icon\" />\n          </button>\n        </div>\n        {false && (\n          <div className=\"floatingController-container\">\n            <button\n              key=\"Move Page Upwards\"\n              className={`controllerItem${order === 1 ? ' disabled' : ''}`}\n              onClick={changeOrder(-1)}\n              title={MOVE_PAGE_UPWARDS}\n              type=\"button\"\n            >\n              <icons.angleUp className=\"toolbar-icon\" />\n            </button>\n            <button\n              key=\"Move Page Downwards\"\n              className={`controllerItem${order === pageCount ? ' disabled' : ''}`}\n              onClick={changeOrder(1)}\n              title={MOVE_PAGE_DOWNWARDS}\n              type=\"button\"\n            >\n              <icons.angleDown className=\"toolbar-icon\" />\n            </button>\n          </div>\n        )}\n        <div className=\"floatingController-container\">\n          <button\n            key=\"Add Slide\"\n            className=\"controllerItem primary\"\n            disabled={disableInteraction.indexOf('add') > -1}\n            onClick={onPageAddClick}\n            title={ADD_NEW_PAGE}\n            type=\"button\"\n          >\n            <icons.plus className=\"toolbar-icon\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nPageActions.propTypes = {\n  order: PropTypes.number,\n  pageID: PropTypes.string,\n};\n\nexport default PageActions;\n"],"names":["PageActions","order","pageID","pages","usePropStore","state","length","onAnEventTrigger","onPageAdd","onPageDuplicate","onPageOrdersChange","onPageRemove","disableInteraction","setIsRightPanelOpen","useBuilderStore","setEditedElement","selectedItems","useSelectedElements","isSelectedItemExists","useMemo","setOverPage","setOutPage","overPageId","overedPageId","useState","toolbarDisabled","setToolbarDisabled","useEffect","pageSettings","onPageAddClick","newPageIndex","scrollToTarget","onPageRemoveClick","onPageDuplicateClick","foundPage","find","page","id","isOverPage","pageToolbarMouseOver","useCallback","pageToolbarMouseOut","useTranslatedTexts","ADD_NEW_PAGE","DUPLICATE_PAGE","MOVE_PAGE_DOWNWARDS","MOVE_PAGE_UPWARDS","PAGE_SETTINGS","REMOVE_PAGE","_jsx","_jsxs","icons.pageSettings","indexOf","icons.duplicate","icons.trash","icons.plus","propTypes","PropTypes","number","string"],"mappings":"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"}

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

@@ -21,6 +21,7 @@ var functions = require('../../utils/functions.js');
 var DraggableLayer = require('./DraggableLayer.js');
 var useKeyboardActions = require('../../utils/useKeyboardActions.js');
 var useMarqueeSelection = require('../../utils/useMarqueeSelection.js');
+var SlidesNavigatorToggle = require('./SlidesNavigatorToggle.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 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; }
@@ -51,6 +52,15 @@ var Scene = function Scene() {
   var lastScrollPosition = BuilderContext.useBuilderStore(function (state) {
     return state.lastScrollPosition;
   });
+  var slidesListType = BuilderContext.useBuilderStore(function (state) {
+    return state.slidesListType;
+  });
+  var setOverPage = BuilderContext.useBuilderStore(function (state) {
+    return state.setOverPage;
+  });
+  var setOutPage = BuilderContext.useBuilderStore(function (state) {
+    return state.setOutPage;
+  });
   var pageStyles = React.useRef({});
   var pageContainerStyles = React.useRef({});
   var viewPortRef = React.useRef({});
@@ -142,7 +152,6 @@ var Scene = function Scene() {
     width: width
   };
   return /*#__PURE__*/jsxRuntime.jsxs("main", {
-    // Builder.js
     className: classNames.mainWrapper,
     children: [/*#__PURE__*/jsxRuntime.jsx(DraggableLayer, {
       pageRefs: refs.current
@@ -154,36 +163,41 @@ var Scene = function Scene() {
         ref: canvasRef,
         className: classNames.canvas,
         children: [pages.map(function (page, index) {
-          return (
-            /*#__PURE__*/
-            // TODO: This part can be moved into a different component
-            jsxRuntime.jsxs(React.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.jsx(PageActions, {
-                order: page.order,
-                pageID: page.id
-              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                ref: refs.current[page.id],
-                className: classNames.page,
-                "data-id": page.id,
-                "data-order": page.order,
-                id: "presentation-page-".concat(page.id.toString()),
-                style: _objectSpread(_objectSpread({}, pageStyles.current), {}, {
-                  position: 'relative'
-                }),
-                children: [/*#__PURE__*/jsxRuntime.jsx(Page, {
-                  items: page.items,
-                  page: page,
-                  pageIndex: index,
-                  style: pageContainerStyles.current
-                }), selectionPageId === page.id && selectionBox && /*#__PURE__*/jsxRuntime.jsx(SelectionBox, {
-                  selectionBox: selectionBox
-                })]
-              }, "page_".concat(page.id))]
-            }, page.id)
-          );
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            onMouseOut: function onMouseOut() {
+              return setOutPage(null);
+            },
+            onMouseOver: function onMouseOver() {
+              return setOverPage(page.id);
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(PageActions, {
+              order: page.order,
+              pageID: page.id
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              ref: refs.current[page.id],
+              className: classNames.page,
+              "data-id": page.id,
+              "data-order": page.order,
+              id: "presentation-page-".concat(page.id.toString()),
+              style: _objectSpread(_objectSpread({}, pageStyles.current), {}, {
+                position: 'relative'
+              }),
+              children: [/*#__PURE__*/jsxRuntime.jsx(Page, {
+                items: page.items,
+                page: page,
+                pageIndex: index,
+                style: pageContainerStyles.current
+              }), selectionPageId === page.id && selectionBox && /*#__PURE__*/jsxRuntime.jsx(SelectionBox, {
+                selectionBox: selectionBox
+              })]
+            }, "page_".concat(page.id))]
+          }, page.id);
         }), /*#__PURE__*/jsxRuntime.jsx(PageAdder, {})]
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(ZoomControls, {}), contextMenuProps && /*#__PURE__*/jsxRuntime.jsx(ContextMenu, {
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "bottom-actions-container",
+      children: [functions.slidesAsNavigator(slidesListType) && /*#__PURE__*/jsxRuntime.jsx(SlidesNavigatorToggle, {}), /*#__PURE__*/jsxRuntime.jsx(ZoomControls, {})]
+    }), contextMenuProps && /*#__PURE__*/jsxRuntime.jsx(ContextMenu, {
       exceptionalClasses: ['contextMenu-button'],
       height: height,
       item: functions.findItemById(contextMenuProps.id, pages),