@jotforminc/dnd-builder 3.6.2 → 3.6.4

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

@@ -1 +1 @@
-{"version":3,"file":"SlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItem.js"],"sourcesContent":["import {\n  memo, useCallback, useMemo, useRef,\n} from 'react';\nimport { motion } from 'framer-motion';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\nimport SlideItemMoreMenu from './MoreMenu/SlideItemMoreMenu';\nimport { emptyFunction } from '../../../utils/functions';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\n\nconst slideRevealTransition = {\n  duration: 0.25,\n  ease: [0.2, 0, 0.2, 1],\n};\n\nconst SlideItem = ({\n  id,\n  onPageClick,\n  order,\n  page,\n  reportHeight,\n  reportWidth,\n  style,\n}) => {\n  const moreMenuRef = useRef(null);\n\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id });\n\n  const selected = useBuilderStore(\n    useCallback(\n      state => state.visiblePageOrder.toString() === order.toString(),\n      [order],\n    ),\n  );\n\n  const itemClickHandler = useCallback(e => {\n    onPageClick?.(e);\n  }, [onPageClick]);\n\n  const handleContextMenu = useCallback(e => {\n    e.preventDefault();\n    moreMenuRef.current?.handleOpenMenu(e);\n  }, []);\n\n  const dragStyle = useMemo(() => {\n    const baseStyle = {\n      opacity: isDragging ? 0.5 : 1,\n      transform: CSS.Transform.toString(transform),\n      transition: transition,\n    };\n\n    return { ...baseStyle, ...style };\n  }, [transform, transition, isDragging, style]);\n\n  return (\n    <div\n      ref={setNodeRef}\n      className={`slides-navigator-item${selected ? ' selected' : ''}`}\n      data-id={page.id}\n      data-order={order}\n      onClick={itemClickHandler}\n      onContextMenu={handleContextMenu}\n      onKeyDown={emptyFunction}\n      style={dragStyle}\n      {...attributes}\n      {...listeners}\n    >\n      <motion.div\n        className=\"slides-navigator-item-motion\"\n        initial={{ opacity: 0.25, scale: 0.95 }}\n        transition={slideRevealTransition}\n        viewport={{ amount: 0.2, once: true }}\n        whileInView={{ opacity: 1, scale: 1 }}\n      >\n        <div className=\"slides-navigator-item-order\">{order}</div>\n        <div\n          className=\"slides-navigator-item-content\"\n        >\n          <StaticSlideItem\n            backgroundColor={page.backgroundColor}\n            items={page.items}\n            reportHeight={reportHeight}\n            reportWidth={reportWidth}\n          />\n        </div>\n        <SlideItemMoreMenu\n          ref={moreMenuRef}\n          order={order}\n          page={page}\n        />\n      </motion.div>\n    </div>\n  );\n};\n\nSlideItem.propTypes = {\n  id: PropTypes.string.isRequired,\n  onPageClick: PropTypes.func,\n  order: PropTypes.number,\n  page: PropTypes.shape({\n    backgroundColor: PropTypes.string,\n    id: PropTypes.string.isRequired,\n    items: PropTypes.arrayOf(PropTypes.shape({})),\n  }),\n  reportHeight: PropTypes.number.isRequired,\n  reportWidth: PropTypes.number.isRequired,\n  style: PropTypes.shape({\n    opacity: PropTypes.number,\n    transform: PropTypes.string,\n    transition: PropTypes.string,\n  }),\n};\n\nfunction slideItemPropsAreEqual(prevProps, nextProps) {\n  return prevProps.id === nextProps.id\n    && prevProps.order === nextProps.order\n    && prevProps.page === nextProps.page\n    && prevProps.reportHeight === nextProps.reportHeight\n    && prevProps.reportWidth === nextProps.reportWidth\n    && prevProps.style === nextProps.style\n    && prevProps.onPageClick === nextProps.onPageClick;\n}\n\nexport default memo(SlideItem, slideItemPropsAreEqual);\n"],"names":["slideRevealTransition","duration","ease","SlideItem","id","onPageClick","order","page","reportHeight","reportWidth","style","moreMenuRef","useRef","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","selected","useBuilderStore","useCallback","state","visiblePageOrder","toString","itemClickHandler","e","handleContextMenu","preventDefault","current","handleOpenMenu","dragStyle","useMemo","baseStyle","opacity","CSS","Transform","_jsx","emptyFunction","_jsxs","motion","scale","amount","once","backgroundColor","items","propTypes","PropTypes","string","isRequired","func","number","shape","arrayOf","slideItemPropsAreEqual","prevProps","nextProps","memo"],"mappings":"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"}
+{"version":3,"file":"SlideItem.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlideItem.js"],"sourcesContent":["import {\n  memo, useCallback, useMemo, useRef,\n} from 'react';\nimport { motion } from 'framer-motion';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport PropTypes from 'prop-types';\nimport StaticSlideItem from './StaticSlideItem';\nimport SlideItemMoreMenu from './MoreMenu/SlideItemMoreMenu';\nimport { emptyFunction } from '../../../utils/functions';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst slideRevealTransition = {\n  duration: 0.25,\n  ease: [0.2, 0, 0.2, 1],\n};\n\nconst SlideItem = ({\n  id,\n  onPageClick,\n  order,\n  page,\n  reportHeight,\n  reportWidth,\n  style,\n}) => {\n  const moreMenuRef = useRef(null);\n  const setVisiblePageOrder = useBuilderStore(state => state.setVisiblePageOrder);\n  const visiblePageOrder = useBuilderStore(state => state.visiblePageOrder);\n  const reportBackgroundColor = usePropStore(state => state.settings?.reportBackgroundColor);\n  const selected = visiblePageOrder === order;\n\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id });\n\n  const itemClickHandler = useCallback(e => {\n    setVisiblePageOrder(order);\n    onPageClick?.(e);\n  }, [onPageClick, setVisiblePageOrder, order]);\n\n  const handleContextMenu = useCallback(e => {\n    e.preventDefault();\n    moreMenuRef.current?.handleOpenMenu(e);\n  }, []);\n\n  const dragStyle = useMemo(() => {\n    const baseStyle = {\n      opacity: isDragging ? 0.5 : 1,\n      transform: CSS.Transform.toString(transform),\n      transition: transition,\n    };\n\n    return { ...baseStyle, ...style };\n  }, [transform, transition, isDragging, style]);\n\n  return (\n    <div\n      ref={setNodeRef}\n      className={`slides-navigator-item${selected ? ' selected' : ''}`}\n      data-id={page.id}\n      data-order={order}\n      onClick={itemClickHandler}\n      onContextMenu={handleContextMenu}\n      onKeyDown={emptyFunction}\n      style={dragStyle}\n      {...attributes}\n      {...listeners}\n    >\n      <motion.div\n        className=\"slides-navigator-item-motion\"\n        initial={{ opacity: 0.25, scale: 0.95 }}\n        transition={slideRevealTransition}\n        viewport={{ amount: 0.2, once: true }}\n        whileInView={{ opacity: 1, scale: 1 }}\n      >\n        <div className=\"slides-navigator-item-order\">{order}</div>\n        <div\n          className=\"slides-navigator-item-content\"\n        >\n          <StaticSlideItem\n            backgroundColor={page.backgroundColor || reportBackgroundColor || '#fff'}\n            items={page.items}\n            reportHeight={reportHeight}\n            reportWidth={reportWidth}\n          />\n        </div>\n        <SlideItemMoreMenu\n          ref={moreMenuRef}\n          order={order}\n          page={page}\n          selected={selected}\n        />\n      </motion.div>\n    </div>\n  );\n};\n\nSlideItem.propTypes = {\n  id: PropTypes.string.isRequired,\n  onPageClick: PropTypes.func,\n  order: PropTypes.number,\n  page: PropTypes.shape({\n    backgroundColor: PropTypes.string,\n    id: PropTypes.string.isRequired,\n    items: PropTypes.arrayOf(PropTypes.shape({})),\n  }),\n  reportHeight: PropTypes.number.isRequired,\n  reportWidth: PropTypes.number.isRequired,\n  style: PropTypes.shape({\n    opacity: PropTypes.number,\n    transform: PropTypes.string,\n    transition: PropTypes.string,\n  }),\n};\n\nfunction slideItemPropsAreEqual(prevProps, nextProps) {\n  return prevProps.id === nextProps.id\n    && prevProps.order === nextProps.order\n    && prevProps.page === nextProps.page\n    && prevProps.reportHeight === nextProps.reportHeight\n    && prevProps.reportWidth === nextProps.reportWidth\n    && prevProps.style === nextProps.style\n    && prevProps.onPageClick === nextProps.onPageClick;\n}\n\nexport default memo(SlideItem, slideItemPropsAreEqual);\n"],"names":["slideRevealTransition","duration","ease","SlideItem","id","onPageClick","order","page","reportHeight","reportWidth","style","moreMenuRef","useRef","setVisiblePageOrder","useBuilderStore","state","visiblePageOrder","reportBackgroundColor","usePropStore","settings","selected","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","itemClickHandler","useCallback","e","handleContextMenu","preventDefault","current","handleOpenMenu","dragStyle","useMemo","baseStyle","opacity","CSS","Transform","toString","_jsx","emptyFunction","_jsxs","motion","scale","amount","once","backgroundColor","items","propTypes","PropTypes","string","isRequired","func","number","shape","arrayOf","slideItemPropsAreEqual","prevProps","nextProps","memo"],"mappings":"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"}

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

@@ -3,6 +3,7 @@
 var core = require('@dnd-kit/core');
 var PropTypes = require('prop-types');
 var StaticSlideItem = require('./StaticSlideItem.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 }; }
@@ -24,6 +25,11 @@ var dropAnimation = {
 
 var SlideItemDragOverlay = function SlideItemDragOverlay(_ref) {
   var activePageData = _ref.activePageData;
+  var reportBackgroundColor = PropContext.usePropStore(function (state) {
+    var _state$settings;
+
+    return (_state$settings = state.settings) === null || _state$settings === void 0 ? void 0 : _state$settings.reportBackgroundColor;
+  });
   return /*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
     adjustScale: false,
     dropAnimation: dropAnimation,
@@ -41,7 +47,7 @@ var SlideItemDragOverlay = function SlideItemDragOverlay(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "slides-navigator-item-content",
         children: /*#__PURE__*/jsxRuntime.jsx(StaticSlideItem, {
-          backgroundColor: activePageData.page.backgroundColor,
+          backgroundColor: activePageData.page.backgroundColor || reportBackgroundColor || '#fff',
           items: activePageData.page.items,
           reportHeight: activePageData.reportHeight,
           reportWidth: activePageData.reportWidth

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

@@ -1 +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;;;;"}
+{"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';\nimport { usePropStore } from '../../../contexts/PropContext';\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  const reportBackgroundColor = usePropStore(state => state.settings?.reportBackgroundColor);\n\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 || reportBackgroundColor || '#fff'}\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","reportBackgroundColor","usePropStore","state","settings","_jsx","DragOverlay","cursor","_jsxs","page","order","backgroundColor","items","reportHeight","reportWidth","propTypes","PropTypes","shape","string","arrayOf","number"],"mappings":";;;;;;;;;;;;AAKA,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,MAAMC,qBAAqB,GAAGC,wBAAY,CAAC,UAAAC,KAAK;AAAA;;AAAA,8BAAIA,KAAK,CAACC,QAAV,oDAAI,gBAAgBH,qBAApB;AAAA,GAAN,CAA1C;AAEA,sBACEI,eAACC,gBAAD;AACE,IAAA,WAAW,EAAE,KADf;AAEE,IAAA,aAAa,EAAEhB,aAFjB;AAGE,IAAA,KAAK,EAAE;AAAEiB,MAAAA,MAAM,EAAE;AAAV,KAHT;AAAA,cAKGP,cAAc,gBACbQ;AACE,MAAA,SAAS,EAAC,uBADZ;AAEE,MAAA,KAAK,EAAE;AAAEX,QAAAA,OAAO,EAAE;AAAX,OAFT;AAAA,8BAIEQ;AAAK,QAAA,SAAS,EAAC,6BAAf;AAAA,kBAA8CL,cAAc,CAACS,IAAf,CAAoBC;AAAlE,QAJF,eAKEL;AAAK,QAAA,SAAS,EAAC,+BAAf;AAAA,+BACEA,eAAC,eAAD;AACE,UAAA,eAAe,EAAEL,cAAc,CAACS,IAAf,CAAoBE,eAApB,IAAuCV,qBAAvC,IAAgE,MADnF;AAEE,UAAA,KAAK,EAAED,cAAc,CAACS,IAAf,CAAoBG,KAF7B;AAGE,UAAA,YAAY,EAAEZ,cAAc,CAACa,YAH/B;AAIE,UAAA,WAAW,EAAEb,cAAc,CAACc;AAJ9B;AADF,QALF;AAAA,MADa,GAeX;AApBN,IADF;AAwBD;;AAEDf,oBAAoB,CAACgB,SAArB,GAAiC;AAC/Bf,EAAAA,cAAc,EAAEgB,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/SlidesNavigator.js

@@ -1,33 +1,14 @@
 '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 AddSlideButton = require('./AddSlideButton.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;
@@ -35,18 +16,7 @@ var SlidesNavigator = function SlidesNavigator() {
 
   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, {})]
+    children: [/*#__PURE__*/jsxRuntime.jsx(AddSlideButton, {}), /*#__PURE__*/jsxRuntime.jsx(SlideItemsList, {})]
   });
 };
 

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

@@ -1 +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;;;;"}
+{"version":3,"file":"SlidesNavigator.js","sources":["../../../../../src/components/Panels/SlidesNavigator/SlidesNavigator.js"],"sourcesContent":["import { useBuilderStore } from '../../../contexts/BuilderContext';\nimport SlideItemsList from './SlideItemsList';\nimport AddSlideButton from './AddSlideButton';\n\nconst SlidesNavigator = () => {\n  const isSlidesNavigatorOpen = useBuilderStore(state => state.isSlidesNavigatorOpen);\n\n  if (!isSlidesNavigatorOpen) {\n    return null;\n  }\n\n  return (\n    <aside className=\"slides-navigator\">\n      <AddSlideButton />\n      <SlideItemsList />\n    </aside>\n  );\n};\n\nexport default SlidesNavigator;\n"],"names":["SlidesNavigator","isSlidesNavigatorOpen","useBuilderStore","state","_jsxs","_jsx"],"mappings":";;;;;;;IAIMA,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,MAAMC,qBAAqB,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,qBAAV;AAAA,GAAN,CAA7C;;AAEA,MAAI,CAACA,qBAAL,EAA4B;AAC1B,WAAO,IAAP;AACD;;AAED,sBACEG;AAAO,IAAA,SAAS,EAAC,kBAAjB;AAAA,4BACEC,eAAC,cAAD,KADF,eAEEA,eAAC,cAAD,KAFF;AAAA,IADF;AAMD;;;;"}

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

@@ -15,8 +15,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var THUMBNAIL_MAX_WIDTH = 128;
-var THUMBNAIL_MAX_HEIGHT = 90.5;
+var THUMBNAIL_MAX_WIDTH = 124;
+var THUMBNAIL_MAX_HEIGHT = 88.5;
 var wrapperStyle = {
   height: '100%',
   overflow: 'hidden',

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

@@ -1 +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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"}
+{"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 = 124;\nconst THUMBNAIL_MAX_HEIGHT = 88.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

@@ -93,7 +93,7 @@ var SlidesPanel = function SlidesPanel() {
   var _useTranslatedTexts = hooks.useTranslatedTexts(),
       SLIDES = _useTranslatedTexts.SLIDES;
 
-  return functions.slidesAsPanel(slidesListType) ? /*#__PURE__*/jsxRuntime.jsxs(Panel, {
+  return functions.isSlidesListType(slidesListType, 'PANEL') ? /*#__PURE__*/jsxRuntime.jsxs(Panel, {
     additionalClassName: panelAdditionalClassName,
     onAnimationEnd: onAnimationEnd,
     children: [isRightPanelOpen ? null : /*#__PURE__*/jsxRuntime.jsx(SlidesPanelToggler, {

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, 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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"}
+{"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, isSlidesListType } 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    isSlidesListType(slidesListType, 'PANEL') ? (\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","isSlidesListType","_jsxs","_jsx","SortablePageList"],"mappings":"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"}

package/lib/cjs/styles/slides-navigator.scss

@@ -76,6 +76,7 @@
   &-item {
     $self: &;
 
+    position: relative;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -211,6 +212,44 @@
         color: #FF0000;
       }
     }
+
+    &-button {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: auto;
+      height: auto;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      padding: 4px 2px;
+      background: #FFFFFF;
+      border: 1px solid #E3E5F5;
+      color: #979dC6;
+      border-radius: 6px;
+      box-shadow: 0 2px 6px 0 rgba(84, 95, 111, 0.12), 0 0 1px 0 rgba(37, 45, 91, 0.04);
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: #F5F5F5;
+        color: #343C6A;
+        border: 1px solid #979DC6;
+        transition: all 0.3s ease;
+      }
+    }
+
+    @keyframes fadeInTop {
+      from {
+        opacity: 0;
+        transform: translateY(100%);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
   }
 
   &-virtuoso-list {

package/lib/cjs/utils/functions.js

@@ -865,11 +865,10 @@ var getDimensions = function getDimensions(_ref5) {
     width: width
   };
 };
-var slidesAsNavigator = function slidesAsNavigator(slidesListType) {
-  return slidesListType === panel.SLIDES_LIST_TYPE_MAP.NAVIGATOR;
-};
-var slidesAsPanel = function slidesAsPanel(slidesListType) {
-  return slidesListType === panel.SLIDES_LIST_TYPE_MAP.PANEL;
+/** @param {'NAVIGATOR' | 'PANEL'} mode */
+
+var isSlidesListType = function isSlidesListType(slidesListType, mode) {
+  return slidesListType === panel.SLIDES_LIST_TYPE_MAP[mode];
 };
 
 exports.arrayMove = arrayMove;
@@ -903,6 +902,7 @@ exports.getZoomValue = getZoomValue;
 exports.imageSizeUpdater = imageSizeUpdater;
 exports.isItemInSelectionBox = isItemInSelectionBox;
 exports.isSelectedItem = isSelectedItem;
+exports.isSlidesListType = isSlidesListType;
 exports.isValidHexColor = isValidHexColor;
 exports.moveArrayItem = moveArrayItem;
 exports.normalizeHexColor = normalizeHexColor;
@@ -913,7 +913,5 @@ exports.roundForDecimalPart = roundForDecimalPart;
 exports.roundPositionValues = roundPositionValues;
 exports.safeJSONParse = safeJSONParse;
 exports.scrollToTarget = scrollToTarget;
-exports.slidesAsNavigator = slidesAsNavigator;
-exports.slidesAsPanel = slidesAsPanel;
 exports.throttle = throttle;
 //# sourceMappingURL=functions.js.map