@jotforminc/dnd-builder 3.5.6 → 3.6.0

package/lib/cjs/components/Panels/{AllSlidesPanel/PageItemDragOverlay.js → SlidesNavigator/SlideItemDragOverlay.js}

@@ -2,53 +2,66 @@
 
 var core = require('@dnd-kit/core');
 var PropTypes = require('prop-types');
-var StaticPage = require('../../Preview/StaticPage.js');
+var StaticSlideItem = require('./StaticSlideItem.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var PageItemDragOverlay = function PageItemDragOverlay(_ref) {
+var dropAnimation = {
+  duration: 150,
+  easing: 'ease-out',
+  sideEffects: core.defaultDropAnimationSideEffects({
+    styles: {
+      dragOverlay: {
+        opacity: '0',
+        transform: 'rotate(10deg) scale(1.2)'
+      }
+    }
+  })
+};
+
+var SlideItemDragOverlay = function SlideItemDragOverlay(_ref) {
   var activePageData = _ref.activePageData;
   return /*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
     adjustScale: false,
-    dropAnimation: null,
+    dropAnimation: dropAnimation,
     style: {
       cursor: 'grabbing'
     },
     children: activePageData ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-      // eslint-disable-next-line max-len
-      className: "thumbnailWrapper d-flex dir-col a-center j-center p-relative pageThumbnailHelper forAllSlides",
+      className: "slides-navigator-item",
       style: {
         opacity: 0.5
       },
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "thumbnailOrder",
+        className: "slides-navigator-item-order",
         children: activePageData.page.order
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "thumbnailFrame o-hidden",
-        children: /*#__PURE__*/jsxRuntime.jsx(StaticPage['default'], {
-          isThumbnail: true,
+        className: "slides-navigator-item-content",
+        children: /*#__PURE__*/jsxRuntime.jsx(StaticSlideItem, {
+          backgroundColor: activePageData.page.backgroundColor,
           items: activePageData.page.items,
-          style: activePageData.pageContainerLastStyle
+          reportHeight: activePageData.reportHeight,
+          reportWidth: activePageData.reportWidth
         })
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "thumbnailActions d-flex dir-col f-height j-center"
       })]
     }) : null
   });
 };
 
-PageItemDragOverlay.propTypes = {
+SlideItemDragOverlay.propTypes = {
   activePageData: PropTypes__default['default'].shape({
     page: PropTypes__default['default'].shape({
+      backgroundColor: PropTypes__default['default'].string,
       items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({})),
       order: PropTypes__default['default'].number
     }),
-    pageContainerLastStyle: PropTypes__default['default'].shape({})
+    reportHeight: PropTypes__default['default'].number,
+    reportWidth: PropTypes__default['default'].number
   })
 };
 
-module.exports = PageItemDragOverlay;
-//# sourceMappingURL=PageItemDragOverlay.js.map
+module.exports = SlideItemDragOverlay;
+//# sourceMappingURL=SlideItemDragOverlay.js.map

package/lib/cjs/components/Panels/SlidesNavigator/SlideItemDragOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideItemDragOverlay.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItemDragOverlay.js"],"sourcesContent":["import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\n\nconst dropAnimation = {\n  duration: 150,\n  easing: 'ease-out',\n  sideEffects: defaultDropAnimationSideEffects({\n    styles: { dragOverlay: { opacity: '0', transform: 'rotate(10deg) scale(1.2)' } },\n  }),\n};\n\nconst SlideItemDragOverlay = ({ activePageData }) => {\n  return (\n    <DragOverlay\n      adjustScale={false}\n      dropAnimation={dropAnimation}\n      style={{ cursor: 'grabbing' }}\n    >\n      {activePageData ? (\n        <div\n          className=\"slides-navigator-item\"\n          style={{ opacity: 0.5 }}\n        >\n          <div className=\"slides-navigator-item-order\">{activePageData.page.order}</div>\n          <div className=\"slides-navigator-item-content\">\n            <StaticSlideItem\n              backgroundColor={activePageData.page.backgroundColor}\n              items={activePageData.page.items}\n              reportHeight={activePageData.reportHeight}\n              reportWidth={activePageData.reportWidth}\n            />\n          </div>\n        </div>\n      ) : null}\n    </DragOverlay>\n  );\n};\n\nSlideItemDragOverlay.propTypes = {\n  activePageData: PropTypes.shape({\n    page: PropTypes.shape({\n      backgroundColor: PropTypes.string,\n      items: PropTypes.arrayOf(PropTypes.shape({})),\n      order: PropTypes.number,\n    }),\n    reportHeight: PropTypes.number,\n    reportWidth: PropTypes.number,\n  }),\n};\n\nexport default SlideItemDragOverlay;\n"],"names":["dropAnimation","duration","easing","sideEffects","defaultDropAnimationSideEffects","styles","dragOverlay","opacity","transform","SlideItemDragOverlay","activePageData","_jsx","DragOverlay","cursor","_jsxs","page","order","backgroundColor","items","reportHeight","reportWidth","propTypes","PropTypes","shape","string","arrayOf","number"],"mappings":";;;;;;;;;;;AAIA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,QAAQ,EAAE,GADU;AAEpBC,EAAAA,MAAM,EAAE,UAFY;AAGpBC,EAAAA,WAAW,EAAEC,oCAA+B,CAAC;AAC3CC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,WAAW,EAAE;AAAEC,QAAAA,OAAO,EAAE,GAAX;AAAgBC,QAAAA,SAAS,EAAE;AAA3B;AAAf;AADmC,GAAD;AAHxB,CAAtB;;IAQMC,oBAAoB,GAAG,SAAvBA,oBAAuB,OAAwB;AAAA,MAArBC,cAAqB,QAArBA,cAAqB;AACnD,sBACEC,eAACC,gBAAD;AACE,IAAA,WAAW,EAAE,KADf;AAEE,IAAA,aAAa,EAAEZ,aAFjB;AAGE,IAAA,KAAK,EAAE;AAAEa,MAAAA,MAAM,EAAE;AAAV,KAHT;AAAA,cAKGH,cAAc,gBACbI;AACE,MAAA,SAAS,EAAC,uBADZ;AAEE,MAAA,KAAK,EAAE;AAAEP,QAAAA,OAAO,EAAE;AAAX,OAFT;AAAA,8BAIEI;AAAK,QAAA,SAAS,EAAC,6BAAf;AAAA,kBAA8CD,cAAc,CAACK,IAAf,CAAoBC;AAAlE,QAJF,eAKEL;AAAK,QAAA,SAAS,EAAC,+BAAf;AAAA,+BACEA,eAAC,eAAD;AACE,UAAA,eAAe,EAAED,cAAc,CAACK,IAAf,CAAoBE,eADvC;AAEE,UAAA,KAAK,EAAEP,cAAc,CAACK,IAAf,CAAoBG,KAF7B;AAGE,UAAA,YAAY,EAAER,cAAc,CAACS,YAH/B;AAIE,UAAA,WAAW,EAAET,cAAc,CAACU;AAJ9B;AADF,QALF;AAAA,MADa,GAeX;AApBN,IADF;AAwBD;;AAEDX,oBAAoB,CAACY,SAArB,GAAiC;AAC/BX,EAAAA,cAAc,EAAEY,6BAAS,CAACC,KAAV,CAAgB;AAC9BR,IAAAA,IAAI,EAAEO,6BAAS,CAACC,KAAV,CAAgB;AACpBN,MAAAA,eAAe,EAAEK,6BAAS,CAACE,MADP;AAEpBN,MAAAA,KAAK,EAAEI,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CAAlB,CAFa;AAGpBP,MAAAA,KAAK,EAAEM,6BAAS,CAACI;AAHG,KAAhB,CADwB;AAM9BP,IAAAA,YAAY,EAAEG,6BAAS,CAACI,MANM;AAO9BN,IAAAA,WAAW,EAAEE,6BAAS,CAACI;AAPO,GAAhB;AADe,CAAjC;;;;"}

package/lib/cjs/components/Panels/SlidesNavigator/SlideItemsList.js

@@ -0,0 +1,232 @@
+'use strict';
+
+require('core-js/modules/es.array.find.js');
+require('core-js/modules/es.array.find-index.js');
+require('core-js/modules/es.array.map.js');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var reactVirtuoso = require('react-virtuoso');
+var PropTypes = require('prop-types');
+var PropContext = require('../../../contexts/PropContext.js');
+var functions = require('../../../utils/functions.js');
+var SlideItem = require('./SlideItem.js');
+var SlideItemDragOverlay = require('./SlideItemDragOverlay.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["children", "style"];
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ITEM_HEIGHT = 90.5;
+var slideItemFixedStyle = {
+  height: ITEM_HEIGHT
+};
+var SlidesNavigatorVirtuosoList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    ref: ref,
+    className: "slides-navigator-virtuoso-list",
+    style: style
+  }, rest), {}, {
+    children: children
+  }));
+});
+SlidesNavigatorVirtuosoList.displayName = 'SlidesNavigatorVirtuosoList';
+SlidesNavigatorVirtuosoList.propTypes = {
+  children: PropTypes__default['default'].node,
+  style: PropTypes__default['default'].shape({})
+};
+var virtuosoComponents = {
+  List: SlidesNavigatorVirtuosoList
+};
+
+var SlideItemsList = function SlideItemsList() {
+  var pages = PropContext.usePropStore(function (state) {
+    return state.pages;
+  });
+  var settings = PropContext.usePropStore(function (state) {
+    return state.settings;
+  });
+  var onPageOrdersChange = PropContext.usePropStore(function (state) {
+    return state.onPageOrdersChange;
+  });
+  var onAnEventTrigger = PropContext.usePropStore(function (state) {
+    return state.onAnEventTrigger;
+  });
+  var virtuosoRef = React.useRef(null);
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeId = _useState2[0],
+      setActiveId = _useState2[1];
+
+  var _useState3 = React.useState(pages),
+      _useState4 = _slicedToArray(_useState3, 2),
+      localPages = _useState4[0],
+      setLocalPages = _useState4[1];
+
+  React.useEffect(function () {
+    setLocalPages(pages);
+  }, [pages]);
+  var _settings$reportLayou = settings.reportLayout,
+      reportLayout = _settings$reportLayou === void 0 ? 'A4 Landscape' : _settings$reportLayou,
+      _settings$reportLayou2 = settings.reportLayoutHeight,
+      reportLayoutHeight = _settings$reportLayou2 === void 0 ? 794 : _settings$reportLayou2,
+      _settings$reportLayou3 = settings.reportLayoutWidth,
+      reportLayoutWidth = _settings$reportLayou3 === void 0 ? 1123 : _settings$reportLayou3;
+  var reportWidth = parseInt(reportLayoutWidth, 10);
+  var reportHeight = parseInt(reportLayoutHeight, 10);
+  var sensors = core.useSensors(core.useSensor(core.PointerSensor, {
+    activationConstraint: {
+      delay: 100,
+      distance: 0,
+      tolerance: 0.1
+    }
+  }), core.useSensor(core.KeyboardSensor, {
+    coordinateGetter: sortable.sortableKeyboardCoordinates
+  }));
+  var items = React.useMemo(function () {
+    return localPages.map(function (page) {
+      return page.id;
+    });
+  }, [localPages]);
+  var onPageClick = React.useCallback(function (e) {
+    var order = e.currentTarget.getAttribute('data-order');
+
+    if (order) {
+      functions.scrollToTarget("pageActions-id-".concat(order));
+    }
+  }, []);
+  var handleDragStart = React.useCallback(function (event) {
+    setActiveId(event.active.id);
+  }, []);
+  var handleDragEnd = React.useCallback(function (event) {
+    var active = event.active,
+        over = event.over;
+    setActiveId(null);
+
+    if (over && active.id !== over.id) {
+      var oldIndex = localPages.findIndex(function (p) {
+        return p.id === active.id;
+      });
+      var newIndex = localPages.findIndex(function (p) {
+        return p.id === over.id;
+      });
+      if (oldIndex === -1 || newIndex === -1) return;
+      var reordered = functions.arrayMove(localPages, oldIndex, newIndex);
+      var withOrders = reordered.map(function (page, i) {
+        var nextOrder = i + 1;
+        return page.order === nextOrder ? page : _objectSpread(_objectSpread({}, page), {}, {
+          order: nextOrder
+        });
+      });
+      setLocalPages(withOrders);
+      var newPageOrders = reordered.reduce(function (acc, page, index) {
+        acc[page.id] = {
+          order: index + 1
+        };
+        return acc;
+      }, {});
+      onPageOrdersChange(newPageOrders);
+      onAnEventTrigger('sortPageFromSlides');
+    }
+  }, [localPages, onPageOrdersChange, onAnEventTrigger]);
+  var handleDragCancel = React.useCallback(function () {
+    setActiveId(null);
+  }, []);
+  var activePageData = React.useMemo(function () {
+    if (!activeId) return null;
+    var page = localPages.find(function (p) {
+      return p.id === activeId;
+    });
+    if (!page) return null;
+    return {
+      page: page,
+      reportHeight: reportHeight,
+      reportWidth: reportWidth
+    };
+  }, [activeId, localPages, reportWidth, reportHeight]);
+  var virtuosoStyle = React.useMemo(function () {
+    return {
+      height: '100%',
+      scrollbarWidth: 'none',
+      width: '100%'
+    };
+  }, []);
+  var itemContent = React.useCallback(function (index) {
+    var page = localPages[index];
+    if (!page) return null;
+    return /*#__PURE__*/jsxRuntime.jsx(SlideItem, {
+      id: page.id,
+      onPageClick: onPageClick,
+      order: page.order,
+      page: page,
+      reportHeight: reportHeight,
+      reportWidth: reportWidth,
+      style: slideItemFixedStyle
+    });
+  }, [localPages, onPageClick, reportHeight, reportWidth]);
+  var reportLayoutLowercase = React.useMemo(function () {
+    var _reportLayout$toLocal;
+
+    return (_reportLayout$toLocal = reportLayout === null || reportLayout === void 0 ? void 0 : reportLayout.toLocaleLowerCase()) !== null && _reportLayout$toLocal !== void 0 ? _reportLayout$toLocal : '';
+  }, [reportLayout]);
+  return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+    collisionDetection: core.closestCenter,
+    onDragCancel: handleDragCancel,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    sensors: sensors,
+    children: [/*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, {
+      items: items,
+      strategy: sortable.verticalListSortingStrategy,
+      children: /*#__PURE__*/jsxRuntime.jsx(reactVirtuoso.Virtuoso, {
+        ref: virtuosoRef,
+        className: "slides-navigator-item-list",
+        components: virtuosoComponents,
+        computeItemKey: function computeItemKey(index) {
+          var _localPages$index$id, _localPages$index;
+
+          return (_localPages$index$id = (_localPages$index = localPages[index]) === null || _localPages$index === void 0 ? void 0 : _localPages$index.id) !== null && _localPages$index$id !== void 0 ? _localPages$index$id : index;
+        },
+        "data-report-layout": reportLayoutLowercase,
+        fixedItemHeight: ITEM_HEIGHT,
+        itemContent: itemContent,
+        style: virtuosoStyle,
+        totalCount: localPages.length
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(SlideItemDragOverlay, {
+      activePageData: activePageData
+    })]
+  });
+};
+
+module.exports = SlideItemsList;
+//# sourceMappingURL=SlideItemsList.js.map

package/lib/cjs/components/Panels/SlidesNavigator/SlideItemsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideItemsList.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItemsList.js"],"sourcesContent":["import {\n  forwardRef, useCallback, useEffect, useMemo, useRef, useState,\n} from 'react';\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, verticalListSortingStrategy, sortableKeyboardCoordinates } from '@dnd-kit/sortable';\nimport { Virtuoso } from 'react-virtuoso';\nimport PropTypes from 'prop-types';\nimport { usePropStore } from '../../../contexts/PropContext';\nimport { arrayMove, scrollToTarget } from '../../../utils/functions';\nimport SlideItem from './SlideItem';\nimport SlideItemDragOverlay from './SlideItemDragOverlay';\n\nconst ITEM_HEIGHT = 90.5;\n\nconst slideItemFixedStyle = { height: ITEM_HEIGHT };\n\nconst SlidesNavigatorVirtuosoList = forwardRef(({ children, style, ...rest }, ref) => (\n  <div\n    ref={ref}\n    className=\"slides-navigator-virtuoso-list\"\n    style={style}\n    {...rest}\n  >\n    {children}\n  </div>\n));\n\nSlidesNavigatorVirtuosoList.displayName = 'SlidesNavigatorVirtuosoList';\n\nSlidesNavigatorVirtuosoList.propTypes = {\n  children: PropTypes.node,\n  style: PropTypes.shape({}),\n};\n\nconst virtuosoComponents = { List: SlidesNavigatorVirtuosoList };\n\nconst SlideItemsList = () => {\n  const pages = usePropStore(state => state.pages);\n  const settings = usePropStore(state => state.settings);\n  const onPageOrdersChange = usePropStore(state => state.onPageOrdersChange);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n\n  const virtuosoRef = useRef(null);\n  const [activeId, setActiveId] = useState(null);\n  const [localPages, setLocalPages] = useState(pages);\n\n  useEffect(() => {\n    setLocalPages(pages);\n  }, [pages]);\n\n  const {\n    reportLayout = 'A4 Landscape',\n    reportLayoutHeight = 794,\n    reportLayoutWidth = 1123,\n  } = settings;\n\n  const reportWidth = parseInt(reportLayoutWidth, 10);\n  const reportHeight = parseInt(reportLayoutHeight, 10);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { delay: 100, distance: 0, tolerance: 0.1 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const items = useMemo(() => localPages.map(page => page.id), [localPages]);\n\n  const onPageClick = useCallback(e => {\n    const order = e.currentTarget.getAttribute('data-order');\n    if (order) {\n      scrollToTarget(`pageActions-id-${order}`);\n    }\n  }, []);\n\n  const handleDragStart = useCallback(event => {\n    setActiveId(event.active.id);\n  }, []);\n\n  const handleDragEnd = useCallback(event => {\n    const { active, over } = event;\n    setActiveId(null);\n\n    if (over && active.id !== over.id) {\n      const oldIndex = localPages.findIndex(p => p.id === active.id);\n      const newIndex = localPages.findIndex(p => p.id === over.id);\n      if (oldIndex === -1 || newIndex === -1) return;\n\n      const reordered = arrayMove(localPages, oldIndex, newIndex);\n      const withOrders = reordered.map((page, i) => {\n        const nextOrder = i + 1;\n        return page.order === nextOrder ? page : { ...page, order: nextOrder };\n      });\n\n      setLocalPages(withOrders);\n\n      const newPageOrders = reordered.reduce((acc, page, index) => {\n        acc[page.id] = { order: index + 1 };\n        return acc;\n      }, {});\n\n      onPageOrdersChange(newPageOrders);\n      onAnEventTrigger('sortPageFromSlides');\n    }\n  }, [localPages, onPageOrdersChange, onAnEventTrigger]);\n\n  const handleDragCancel = useCallback(() => {\n    setActiveId(null);\n  }, []);\n\n  const activePageData = useMemo(() => {\n    if (!activeId) return null;\n    const page = localPages.find(p => p.id === activeId);\n    if (!page) return null;\n\n    return { page, reportHeight, reportWidth };\n  }, [activeId, localPages, reportWidth, reportHeight]);\n\n  const virtuosoStyle = useMemo(() => ({\n    height: '100%',\n    scrollbarWidth: 'none',\n    width: '100%',\n  }), []);\n\n  const itemContent = useCallback(index => {\n    const page = localPages[index];\n    if (!page) return null;\n\n    return (\n      <SlideItem\n        id={page.id}\n        onPageClick={onPageClick}\n        order={page.order}\n        page={page}\n        reportHeight={reportHeight}\n        reportWidth={reportWidth}\n        style={slideItemFixedStyle}\n      />\n    );\n  }, [localPages, onPageClick, reportHeight, reportWidth]);\n\n  const reportLayoutLowercase = useMemo(() => reportLayout?.toLocaleLowerCase() ?? '', [reportLayout]);\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      onDragCancel={handleDragCancel}\n      onDragEnd={handleDragEnd}\n      onDragStart={handleDragStart}\n      sensors={sensors}\n    >\n      <SortableContext\n        items={items}\n        strategy={verticalListSortingStrategy}\n      >\n        <Virtuoso\n          ref={virtuosoRef}\n          className=\"slides-navigator-item-list\"\n          components={virtuosoComponents}\n          computeItemKey={index => localPages[index]?.id ?? index}\n          data-report-layout={reportLayoutLowercase}\n          fixedItemHeight={ITEM_HEIGHT}\n          itemContent={itemContent}\n          style={virtuosoStyle}\n          totalCount={localPages.length}\n        />\n      </SortableContext>\n\n      <SlideItemDragOverlay activePageData={activePageData} />\n    </DndContext>\n  );\n};\n\nexport default SlideItemsList;\n"],"names":["ITEM_HEIGHT","slideItemFixedStyle","height","SlidesNavigatorVirtuosoList","forwardRef","ref","children","style","rest","_jsx","displayName","propTypes","PropTypes","node","shape","virtuosoComponents","List","SlideItemsList","pages","usePropStore","state","settings","onPageOrdersChange","onAnEventTrigger","virtuosoRef","useRef","useState","activeId","setActiveId","localPages","setLocalPages","useEffect","reportLayout","reportLayoutHeight","reportLayoutWidth","reportWidth","parseInt","reportHeight","sensors","useSensors","useSensor","PointerSensor","activationConstraint","delay","distance","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","items","useMemo","map","page","id","onPageClick","useCallback","e","order","currentTarget","getAttribute","scrollToTarget","handleDragStart","event","active","handleDragEnd","over","oldIndex","findIndex","p","newIndex","reordered","arrayMove","withOrders","i","nextOrder","newPageOrders","reduce","acc","index","handleDragCancel","activePageData","find","virtuosoStyle","scrollbarWidth","width","itemContent","reportLayoutLowercase","toLocaleLowerCase","_jsxs","DndContext","closestCenter","SortableContext","verticalListSortingStrategy","Virtuoso","length"],"mappings":"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"}

package/lib/cjs/components/Panels/SlidesNavigator/SlidesNavigator.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var BuilderContext = require('../../../contexts/BuilderContext.js');
+var hooks = require('../../../utils/hooks.js');
+var SlideItemsList = require('./SlideItemsList.js');
+var PropContext = require('../../../contexts/PropContext.js');
+var functions = require('../../../utils/functions.js');
+var jsxRuntime = require('react/jsx-runtime');
+var plus = require('../../../assets/svg/plus.svg.js');
+
+var SlidesNavigator = function SlidesNavigator() {
+  var isSlidesNavigatorOpen = BuilderContext.useBuilderStore(function (state) {
+    return state.isSlidesNavigatorOpen;
+  });
+  var visiblePageOrder = BuilderContext.useBuilderStore(function (state) {
+    return state.visiblePageOrder;
+  });
+
+  var _useTranslatedTexts = hooks.useTranslatedTexts(),
+      ADD_SLIDE = _useTranslatedTexts.ADD_SLIDE;
+
+  var onPageAdd = PropContext.usePropStore(function (state) {
+    return state.onPageAdd;
+  });
+
+  var onAddItemClick = function onAddItemClick() {
+    var newPageIndex = visiblePageOrder + 1;
+    onPageAdd(newPageIndex);
+    functions.scrollToTarget("pageActions-id-".concat(newPageIndex), 350);
+  };
+
+  if (!isSlidesNavigatorOpen) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsxs("aside", {
+    className: "slides-navigator",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
+      className: "slides-navigator-add-item",
+      onClick: onAddItemClick,
+      title: ADD_SLIDE,
+      type: "button",
+      children: [/*#__PURE__*/jsxRuntime.jsx(plus, {
+        className: "slides-navigator-add-item-icon"
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "slides-navigator-add-item-text",
+        children: ADD_SLIDE
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(SlideItemsList, {})]
+  });
+};
+
+module.exports = SlidesNavigator;
+//# sourceMappingURL=SlidesNavigator.js.map

package/lib/cjs/components/Panels/SlidesNavigator/SlidesNavigator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlidesNavigator.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlidesNavigator.js"],"sourcesContent":["import { useBuilderStore } from '../../../contexts/BuilderContext';\nimport { useTranslatedTexts } from '../../../utils/hooks';\nimport SlideItemsList from './SlideItemsList';\nimport * as icons from '../../../utils/icons';\nimport { usePropStore } from '../../../contexts/PropContext';\nimport { scrollToTarget } from '../../../utils/functions';\n\nconst SlidesNavigator = () => {\n  const isSlidesNavigatorOpen = useBuilderStore(state => state.isSlidesNavigatorOpen);\n  const visiblePageOrder = useBuilderStore(state => state.visiblePageOrder);\n  const { ADD_SLIDE } = useTranslatedTexts();\n  const onPageAdd = usePropStore(state => state.onPageAdd);\n\n  const onAddItemClick = () => {\n    const newPageIndex = visiblePageOrder + 1;\n    onPageAdd(newPageIndex);\n    scrollToTarget(`pageActions-id-${newPageIndex}`, 350);\n  };\n\n  if (!isSlidesNavigatorOpen) {\n    return null;\n  }\n\n  return (\n    <aside className=\"slides-navigator\">\n      <button\n        className=\"slides-navigator-add-item\"\n        onClick={onAddItemClick}\n        title={ADD_SLIDE}\n        type=\"button\"\n      >\n        <icons.plus className=\"slides-navigator-add-item-icon\" />\n        <span className=\"slides-navigator-add-item-text\">{ADD_SLIDE}</span>\n      </button>\n      <SlideItemsList />\n    </aside>\n  );\n};\n\nexport default SlidesNavigator;\n"],"names":["SlidesNavigator","isSlidesNavigatorOpen","useBuilderStore","state","visiblePageOrder","useTranslatedTexts","ADD_SLIDE","onPageAdd","usePropStore","onAddItemClick","newPageIndex","scrollToTarget","_jsxs","_jsx","icons.plus"],"mappings":";;;;;;;;;;IAOMA,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,MAAMC,qBAAqB,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,qBAAV;AAAA,GAAN,CAA7C;AACA,MAAMG,gBAAgB,GAAGF,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,gBAAV;AAAA,GAAN,CAAxC;;AACA,4BAAsBC,wBAAkB,EAAxC;AAAA,MAAQC,SAAR,uBAAQA,SAAR;;AACA,MAAMC,SAAS,GAAGC,wBAAY,CAAC,UAAAL,KAAK;AAAA,WAAIA,KAAK,CAACI,SAAV;AAAA,GAAN,CAA9B;;AAEA,MAAME,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,QAAMC,YAAY,GAAGN,gBAAgB,GAAG,CAAxC;AACAG,IAAAA,SAAS,CAACG,YAAD,CAAT;AACAC,IAAAA,wBAAc,0BAAmBD,YAAnB,GAAmC,GAAnC,CAAd;AACD,GAJD;;AAMA,MAAI,CAACT,qBAAL,EAA4B;AAC1B,WAAO,IAAP;AACD;;AAED,sBACEW;AAAO,IAAA,SAAS,EAAC,kBAAjB;AAAA,4BACEA;AACE,MAAA,SAAS,EAAC,2BADZ;AAEE,MAAA,OAAO,EAAEH,cAFX;AAGE,MAAA,KAAK,EAAEH,SAHT;AAIE,MAAA,IAAI,EAAC,QAJP;AAAA,8BAMEO,eAACC,IAAD;AAAY,QAAA,SAAS,EAAC;AAAtB,QANF,eAOED;AAAM,QAAA,SAAS,EAAC,gCAAhB;AAAA,kBAAkDP;AAAlD,QAPF;AAAA,MADF,eAUEO,eAAC,cAAD,KAVF;AAAA,IADF;AAcD;;;;"}

package/lib/cjs/components/Panels/SlidesNavigator/StaticSlideItem.js

@@ -0,0 +1,97 @@
+'use strict';
+
+require('core-js/modules/es.array.filter.js');
+require('core-js/modules/es.array.map.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var classNames = require('../../../constants/classNames.js');
+var ReportItemRenderer = require('../../Builder/ReportItemRenderer.js');
+var StaticItem = require('../../Preview/StaticItem.js');
+var ErrorBoundary = require('../../ErrorBoundary/ErrorBoundary.js');
+var PropContext = require('../../../contexts/PropContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var THUMBNAIL_MAX_WIDTH = 128;
+var THUMBNAIL_MAX_HEIGHT = 90.5;
+var wrapperStyle = {
+  height: '100%',
+  overflow: 'hidden',
+  position: 'relative',
+  width: '100%'
+};
+
+var StaticSlideItem = function StaticSlideItem(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      reportHeight = _ref.reportHeight,
+      reportWidth = _ref.reportWidth;
+  var itemAccessor = PropContext.usePropStore(function (state) {
+    return state.itemAccessor;
+  });
+  var additionalPageItems = PropContext.usePropStore(function (state) {
+    return state.additionalPageItems;
+  });
+  var containerStyle = React.useMemo(function () {
+    var scale = Math.min(THUMBNAIL_MAX_WIDTH / reportWidth, THUMBNAIL_MAX_HEIGHT / reportHeight);
+    var scaledWidth = reportWidth * scale;
+    var scaledHeight = reportHeight * scale;
+    return {
+      backgroundColor: backgroundColor || '#fff',
+      borderRadius: '4px',
+      height: reportHeight,
+      left: (THUMBNAIL_MAX_WIDTH - scaledWidth) / 2,
+      position: 'absolute',
+      top: (THUMBNAIL_MAX_HEIGHT - scaledHeight) / 2,
+      transform: "scale(".concat(scale, ")"),
+      transformOrigin: '0 0',
+      width: reportWidth
+    };
+  }, [reportWidth, reportHeight, backgroundColor]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: wrapperStyle,
+    children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+      isStatic: true,
+      level: "page",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames.pageContainer,
+        style: containerStyle,
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "jfReport-hider o-hidden f-all p-relative",
+          children: [items.filter(function (item) {
+            return item.isVisible !== undefined ? item.isVisible : true;
+          }).map(function (item) {
+            return /*#__PURE__*/jsxRuntime.jsx(StaticItem, {
+              item: item,
+              children: /*#__PURE__*/jsxRuntime.jsx(ReportItemRenderer, {
+                item: item,
+                children: function children(ReportItem, mergedItem) {
+                  return /*#__PURE__*/jsxRuntime.jsx(ReportItem, {
+                    isThumbnail: true,
+                    item: mergedItem,
+                    itemAccessor: itemAccessor
+                  });
+                }
+              })
+            }, item.id);
+          }), additionalPageItems]
+        })
+      })
+    })
+  });
+};
+
+StaticSlideItem.propTypes = {
+  backgroundColor: PropTypes__default['default'].string,
+  items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({})),
+  reportHeight: PropTypes__default['default'].number.isRequired,
+  reportWidth: PropTypes__default['default'].number.isRequired
+};
+var StaticSlideItem$1 = /*#__PURE__*/React.memo(StaticSlideItem);
+
+module.exports = StaticSlideItem$1;
+//# sourceMappingURL=StaticSlideItem.js.map

package/lib/cjs/components/Panels/SlidesNavigator/StaticSlideItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticSlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/StaticSlideItem.js"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as classNames from '../../../constants/classNames';\nimport ReportItemRenderer from '../../Builder/ReportItemRenderer';\nimport StaticItem from '../../Preview/StaticItem';\nimport ErrorBoundary from '../../ErrorBoundary/ErrorBoundary';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst THUMBNAIL_MAX_WIDTH = 128;\nconst THUMBNAIL_MAX_HEIGHT = 90.5;\n\nconst wrapperStyle = {\n  height: '100%',\n  overflow: 'hidden',\n  position: 'relative',\n  width: '100%',\n};\n\nconst StaticSlideItem = ({\n  backgroundColor,\n  items = [],\n  reportHeight,\n  reportWidth,\n}) => {\n  const itemAccessor = usePropStore(state => state.itemAccessor);\n  const additionalPageItems = usePropStore(state => state.additionalPageItems);\n\n  const containerStyle = useMemo(() => {\n    const scale = Math.min(\n      THUMBNAIL_MAX_WIDTH / reportWidth,\n      THUMBNAIL_MAX_HEIGHT / reportHeight,\n    );\n\n    const scaledWidth = reportWidth * scale;\n    const scaledHeight = reportHeight * scale;\n\n    return {\n      backgroundColor: backgroundColor || '#fff',\n      borderRadius: '4px',\n      height: reportHeight,\n      left: (THUMBNAIL_MAX_WIDTH - scaledWidth) / 2,\n      position: 'absolute',\n      top: (THUMBNAIL_MAX_HEIGHT - scaledHeight) / 2,\n      transform: `scale(${scale})`,\n      transformOrigin: '0 0',\n      width: reportWidth,\n    };\n  }, [reportWidth, reportHeight, backgroundColor]);\n\n  return (\n    <div style={wrapperStyle}>\n      <ErrorBoundary\n        isStatic={true}\n        level=\"page\"\n      >\n        <div\n          className={classNames.pageContainer}\n          style={containerStyle}\n        >\n          <div className=\"jfReport-hider o-hidden f-all p-relative\">\n            {items.filter(item => (\n              item.isVisible !== undefined\n                ? item.isVisible\n                : true\n            )).map(item => {\n              return (\n                <StaticItem\n                  key={item.id}\n                  item={item}\n                >\n                  <ReportItemRenderer\n                    item={item}\n                  >\n                    {(ReportItem, mergedItem) => (\n                      <ReportItem\n                        isThumbnail\n                        item={mergedItem}\n                        itemAccessor={itemAccessor}\n                      />\n                    )}\n                  </ReportItemRenderer>\n                </StaticItem>\n              );\n            })}\n            {additionalPageItems}\n          </div>\n        </div>\n      </ErrorBoundary>\n    </div>\n  );\n};\n\nStaticSlideItem.propTypes = {\n  backgroundColor: PropTypes.string,\n  items: PropTypes.arrayOf(PropTypes.shape({})),\n  reportHeight: PropTypes.number.isRequired,\n  reportWidth: PropTypes.number.isRequired,\n};\n\nexport default memo(StaticSlideItem);\n"],"names":["THUMBNAIL_MAX_WIDTH","THUMBNAIL_MAX_HEIGHT","wrapperStyle","height","overflow","position","width","StaticSlideItem","backgroundColor","items","reportHeight","reportWidth","itemAccessor","usePropStore","state","additionalPageItems","containerStyle","useMemo","scale","Math","min","scaledWidth","scaledHeight","borderRadius","left","top","transform","transformOrigin","_jsx","classNames","_jsxs","filter","item","isVisible","undefined","map","ReportItem","mergedItem","id","propTypes","PropTypes","string","arrayOf","shape","number","isRequired","memo"],"mappings":"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"}

package/lib/cjs/components/Panels/SlidesPanel/SlidesPanel.js

@@ -10,7 +10,6 @@ var PropContext = require('../../../contexts/PropContext.js');
 var functions = require('../../../utils/functions.js');
 var SlidesPanelToggler = require('./SlidesPanelToggler.js');
 var ListWrapper = require('./ListWrapper.js');
-var Button = require('../../Settings/Button.js');
 var hooks = require('../../../utils/hooks.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -34,15 +33,15 @@ var SlidesPanel = function SlidesPanel() {
   var isRightPanelOpen = BuilderContext.useBuilderStore(function (state) {
     return state.isRightPanelOpen;
   });
-  var setIsAllSlidesPanelOpen = BuilderContext.useBuilderStore(function (state) {
-    return state.setIsAllSlidesPanelOpen;
-  });
   var isSlidesPanelOpen = BuilderContext.useBuilderStore(function (state) {
     return state.isSlidesPanelOpen;
   });
   var setIsSlidesPanelOpen = BuilderContext.useBuilderStore(function (state) {
     return state.setIsSlidesPanelOpen;
   });
+  var slidesListType = BuilderContext.useBuilderStore(function (state) {
+    return state.slidesListType;
+  });
   var pages = PropContext.usePropStore(function (state) {
     return state.pages;
   });
@@ -52,9 +51,6 @@ var SlidesPanel = function SlidesPanel() {
   var onAnEventTrigger = PropContext.usePropStore(function (state) {
     return state.onAnEventTrigger;
   });
-  var useExperimentalFeatures = PropContext.usePropStore(function (state) {
-    return state.useExperimentalFeatures;
-  });
 
   var _useState = React.useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -97,7 +93,7 @@ var SlidesPanel = function SlidesPanel() {
   var _useTranslatedTexts = hooks.useTranslatedTexts(),
       SLIDES = _useTranslatedTexts.SLIDES;
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Panel, {
+  return functions.slidesAsPanel(slidesListType) ? /*#__PURE__*/jsxRuntime.jsxs(Panel, {
     additionalClassName: panelAdditionalClassName,
     onAnimationEnd: onAnimationEnd,
     children: [isRightPanelOpen ? null : /*#__PURE__*/jsxRuntime.jsx(SlidesPanelToggler, {
@@ -105,14 +101,7 @@ var SlidesPanel = function SlidesPanel() {
     }), (isSlidesPanelOpen || !isSlidesPanelOpen && !animationEnd) && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "toolItemWrapper f-height d-flex dir-col",
       children: /*#__PURE__*/jsxRuntime.jsx(Section, {
-        additionalComponent: useExperimentalFeatures ? /*#__PURE__*/jsxRuntime.jsx(Button, {
-          classNames: "jfReportButton isAccent showAll",
-          icon: "allSlides",
-          onClick: function onClick() {
-            return setIsAllSlidesPanelOpen(true);
-          },
-          title: "Show All"
-        }) : null,
+        additionalComponent: null,
         icon: "slides",
         title: SLIDES,
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -125,7 +114,7 @@ var SlidesPanel = function SlidesPanel() {
         })
       })
     })]
-  });
+  }) : null;
 };
 
 module.exports = SlidesPanel;

package/lib/cjs/components/Panels/SlidesPanel/SlidesPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlidesPanel.js","sources":["../../../../../src/components/Panels/SlidesPanel/SlidesPanel.js"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Panel from '../../Builder/Panel';\nimport SortablePageList from './SortablePageList';\nimport Section from '../../Builder/Section';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport { usePropStore } from '../../../contexts/PropContext';\nimport { arrayMove } from '../../../utils/functions';\nimport SlidesPanelToggler from './SlidesPanelToggler';\nimport ListWrapper from './ListWrapper';\nimport Button from '../../Settings/Button';\nimport { useClickOutsideListener, useTranslatedTexts } from '../../../utils/hooks';\n\nconst SlidesPanel = () => {\n  const isRightPanelOpen = useBuilderStore(state => state.isRightPanelOpen);\n  const setIsAllSlidesPanelOpen = useBuilderStore(state => state.setIsAllSlidesPanelOpen);\n  const isSlidesPanelOpen = useBuilderStore(state => state.isSlidesPanelOpen);\n  const setIsSlidesPanelOpen = useBuilderStore(state => state.setIsSlidesPanelOpen);\n\n  const pages = usePropStore(state => state.pages);\n  const onPageOrdersChange = usePropStore(state => state.onPageOrdersChange);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const useExperimentalFeatures = usePropStore(state => state.useExperimentalFeatures);\n\n  const [animationEnd, setAnimationEnd] = useState(true);\n\n  const pageGetter = useCallback(index => {\n    return pages[index];\n  }, [pages]);\n\n  const onPageSort = useCallback(({ newIndex, oldIndex }) => {\n    const newPageOrders = arrayMove(pages, oldIndex, newIndex).reduce((acc, page, index) => {\n      acc[page.id] = { order: index + 1 };\n      return acc;\n    }, {});\n\n    onPageOrdersChange(newPageOrders);\n    onAnEventTrigger('sortPageFromSlides');\n  }, [pages, onPageOrdersChange, onAnEventTrigger]);\n\n  // Panel className\n  const panelAdditionalClassName = classNames(\n    'jfReport-settings forSlides f-height',\n    {\n      isIdle: !isSlidesPanelOpen,\n      otherOpened: isRightPanelOpen,\n    },\n  );\n\n  const onClosePanel = () => {\n    setAnimationEnd(false);\n    setIsSlidesPanelOpen(false);\n  };\n\n  const onAnimationEnd = useCallback(() => {\n    if (!isSlidesPanelOpen) {\n      setAnimationEnd(true);\n    }\n  }, [isSlidesPanelOpen]);\n\n  useClickOutsideListener(\n    ['jfReport-canvas', 'jfReport-viewport', 'jfReport-pageInfo'],\n    isSlidesPanelOpen,\n    onClosePanel,\n  );\n\n  const { SLIDES } = useTranslatedTexts();\n\n  return (\n    <Panel\n      additionalClassName={panelAdditionalClassName}\n      onAnimationEnd={onAnimationEnd}\n    >\n      {isRightPanelOpen\n        ? null\n        : <SlidesPanelToggler onClosePanel={onClosePanel} />}\n      {(isSlidesPanelOpen || (!isSlidesPanelOpen && !animationEnd)) && (\n        <div className=\"toolItemWrapper f-height d-flex dir-col\">\n          <Section\n            additionalComponent={useExperimentalFeatures ? (\n              <Button\n                classNames=\"jfReportButton isAccent showAll\"\n                icon=\"allSlides\"\n                onClick={() => setIsAllSlidesPanelOpen(true)}\n                title=\"Show All\"\n              />\n            ) : null}\n            icon=\"slides\"\n            title={SLIDES}\n          >\n            <div className=\"toolItem-tabContent hasInnerScroll\">\n              <ListWrapper\n                component={SortablePageList()}\n                onSortEnd={onPageSort}\n                pageGetter={pageGetter}\n              />\n            </div>\n          </Section>\n        </div>\n      )}\n    </Panel>\n  );\n};\n\nexport default SlidesPanel;\n"],"names":["SlidesPanel","isRightPanelOpen","useBuilderStore","state","setIsAllSlidesPanelOpen","isSlidesPanelOpen","setIsSlidesPanelOpen","pages","usePropStore","onPageOrdersChange","onAnEventTrigger","useExperimentalFeatures","useState","animationEnd","setAnimationEnd","pageGetter","useCallback","index","onPageSort","newIndex","oldIndex","newPageOrders","arrayMove","reduce","acc","page","id","order","panelAdditionalClassName","classNames","isIdle","otherOpened","onClosePanel","onAnimationEnd","useClickOutsideListener","useTranslatedTexts","SLIDES","_jsxs","_jsx","SortablePageList"],"mappings":"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"}
+{"version":3,"file":"SlidesPanel.js","sources":["../../../../../src/components/Panels/SlidesPanel/SlidesPanel.js"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Panel from '../../Builder/Panel';\nimport SortablePageList from './SortablePageList';\nimport Section from '../../Builder/Section';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport { usePropStore } from '../../../contexts/PropContext';\nimport { arrayMove, slidesAsPanel } from '../../../utils/functions';\nimport SlidesPanelToggler from './SlidesPanelToggler';\nimport ListWrapper from './ListWrapper';\nimport { useClickOutsideListener, useTranslatedTexts } from '../../../utils/hooks';\n\nconst SlidesPanel = () => {\n  const isRightPanelOpen = useBuilderStore(state => state.isRightPanelOpen);\n  const isSlidesPanelOpen = useBuilderStore(state => state.isSlidesPanelOpen);\n  const setIsSlidesPanelOpen = useBuilderStore(state => state.setIsSlidesPanelOpen);\n  const slidesListType = useBuilderStore(state => state.slidesListType);\n\n  const pages = usePropStore(state => state.pages);\n  const onPageOrdersChange = usePropStore(state => state.onPageOrdersChange);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n\n  const [animationEnd, setAnimationEnd] = useState(true);\n\n  const pageGetter = useCallback(index => {\n    return pages[index];\n  }, [pages]);\n\n  const onPageSort = useCallback(({ newIndex, oldIndex }) => {\n    const newPageOrders = arrayMove(pages, oldIndex, newIndex).reduce((acc, page, index) => {\n      acc[page.id] = { order: index + 1 };\n      return acc;\n    }, {});\n\n    onPageOrdersChange(newPageOrders);\n    onAnEventTrigger('sortPageFromSlides');\n  }, [pages, onPageOrdersChange, onAnEventTrigger]);\n\n  // Panel className\n  const panelAdditionalClassName = classNames(\n    'jfReport-settings forSlides f-height',\n    {\n      isIdle: !isSlidesPanelOpen,\n      otherOpened: isRightPanelOpen,\n    },\n  );\n\n  const onClosePanel = () => {\n    setAnimationEnd(false);\n    setIsSlidesPanelOpen(false);\n  };\n\n  const onAnimationEnd = useCallback(() => {\n    if (!isSlidesPanelOpen) {\n      setAnimationEnd(true);\n    }\n  }, [isSlidesPanelOpen]);\n\n  useClickOutsideListener(\n    ['jfReport-canvas', 'jfReport-viewport', 'jfReport-pageInfo'],\n    isSlidesPanelOpen,\n    onClosePanel,\n  );\n\n  const { SLIDES } = useTranslatedTexts();\n  return (\n    slidesAsPanel(slidesListType) ? (\n      <Panel\n        additionalClassName={panelAdditionalClassName}\n        onAnimationEnd={onAnimationEnd}\n      >\n        {isRightPanelOpen\n          ? null\n          : <SlidesPanelToggler onClosePanel={onClosePanel} />}\n        {(isSlidesPanelOpen || (!isSlidesPanelOpen && !animationEnd)) && (\n          <div className=\"toolItemWrapper f-height d-flex dir-col\">\n            <Section\n              additionalComponent={null}\n              icon=\"slides\"\n              title={SLIDES}\n            >\n              <div className=\"toolItem-tabContent hasInnerScroll\">\n                <ListWrapper\n                  component={SortablePageList()}\n                  onSortEnd={onPageSort}\n                  pageGetter={pageGetter}\n                />\n              </div>\n            </Section>\n          </div>\n        )}\n      </Panel>\n    ) : null);\n};\n\nexport default SlidesPanel;\n"],"names":["SlidesPanel","isRightPanelOpen","useBuilderStore","state","isSlidesPanelOpen","setIsSlidesPanelOpen","slidesListType","pages","usePropStore","onPageOrdersChange","onAnEventTrigger","useState","animationEnd","setAnimationEnd","pageGetter","useCallback","index","onPageSort","newIndex","oldIndex","newPageOrders","arrayMove","reduce","acc","page","id","order","panelAdditionalClassName","classNames","isIdle","otherOpened","onClosePanel","onAnimationEnd","useClickOutsideListener","useTranslatedTexts","SLIDES","slidesAsPanel","_jsxs","_jsx","SortablePageList"],"mappings":"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"}