@jotforminc/dnd-builder 3.0.0-alpha.1 → 3.0.0

package/lib/esm/components/Panels/SlidesPanel/SlidesPanelToggler.js

@@ -1,16 +1,19 @@
 import PropTypes from 'prop-types';
-import { useBuilderContext } from '../../../utils/builderContext.js';
+import { useBuilderStore } from '../../../contexts/BuilderContext.js';
 import { useTranslatedTexts } from '../../../utils/hooks.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import SvgSlides from '../../../assets/svg/slides.svg.js';
 import SvgClose from '../../../assets/svg/close.svg.js';
 
 var SlidesPanelToggler = function SlidesPanelToggler(_ref) {
-  var onClosePanel = _ref.onClosePanel;
-
-  var _useBuilderContext = useBuilderContext(),
-      setActiveElement = _useBuilderContext.setActiveElement,
-      setIsSlidesPanelOpen = _useBuilderContext.setIsSlidesPanelOpen;
+  var _ref$onClosePanel = _ref.onClosePanel,
+      onClosePanel = _ref$onClosePanel === void 0 ? function () {} : _ref$onClosePanel;
+  var setActiveElement = useBuilderStore(function (state) {
+    return state.setActiveElement;
+  });
+  var setIsSlidesPanelOpen = useBuilderStore(function (state) {
+    return state.setIsSlidesPanelOpen;
+  });
 
   var _useTranslatedTexts = useTranslatedTexts(),
       SLIDES = _useTranslatedTexts.SLIDES;
@@ -41,9 +44,6 @@ var SlidesPanelToggler = function SlidesPanelToggler(_ref) {
 SlidesPanelToggler.propTypes = {
   onClosePanel: PropTypes.func
 };
-SlidesPanelToggler.defaultProps = {
-  onClosePanel: function onClosePanel() {}
-};
 
 export default SlidesPanelToggler;
 //# sourceMappingURL=SlidesPanelToggler.js.map

package/lib/esm/components/Panels/SlidesPanel/SlidesPanelToggler.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlidesPanelToggler.js","sources":["../../../../../src/components/Panels/SlidesPanel/SlidesPanelToggler.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useBuilderContext } from '../../../utils/builderContext';\nimport * as icons from '../../../utils/icons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst SlidesPanelToggler = ({ onClosePanel }) => {\n  const {\n    setActiveElement,\n    setIsSlidesPanelOpen,\n  } = useBuilderContext();\n  const { SLIDES } = useTranslatedTexts();\n\n  return (\n    <>\n      <button\n        className=\"paneToggler settingsToggle\"\n        onClick={() => {\n          setActiveElement(null);\n          setIsSlidesPanelOpen(true);\n        }}\n        title={SLIDES}\n        type=\"button\"\n      >\n        <icons.slides className=\"jfReportSVG isTick\" />\n      </button>\n      <button\n        className=\"paneClose p-absolute\"\n        onClick={onClosePanel}\n        type=\"button\"\n      >\n        <icons.close className=\"jfReportSVG\" />\n      </button>\n    </>\n  );\n};\n\nSlidesPanelToggler.propTypes = {\n  onClosePanel: PropTypes.func,\n};\n\nSlidesPanelToggler.defaultProps = {\n  onClosePanel: () => {},\n};\n\nexport default SlidesPanelToggler;\n"],"names":["SlidesPanelToggler","onClosePanel","useBuilderContext","setActiveElement","setIsSlidesPanelOpen","useTranslatedTexts","SLIDES","_jsxs","_jsx","icons.slides","icons.close","propTypes","PropTypes","func","defaultProps"],"mappings":";;;;;;;IAKMA,kBAAkB,GAAG,SAArBA,kBAAqB,OAAsB;AAAA,MAAnBC,YAAmB,QAAnBA,YAAmB;;AAC/C,2BAGIC,iBAAiB,EAHrB;AAAA,MACEC,gBADF,sBACEA,gBADF;AAAA,MAEEC,oBAFF,sBAEEA,oBAFF;;AAIA,4BAAmBC,kBAAkB,EAArC;AAAA,MAAQC,MAAR,uBAAQA,MAAR;;AAEA,sBACEC;AAAA,4BACEC;AACE,MAAA,SAAS,EAAC,4BADZ;AAEE,MAAA,OAAO,EAAE,mBAAM;AACbL,QAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAC,QAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD,OALH;AAME,MAAA,KAAK,EAAEE,MANT;AAOE,MAAA,IAAI,EAAC,QAPP;AAAA,6BASEE,IAACC,SAAD;AAAc,QAAA,SAAS,EAAC;AAAxB;AATF,MADF,eAYED;AACE,MAAA,SAAS,EAAC,sBADZ;AAEE,MAAA,OAAO,EAAEP,YAFX;AAGE,MAAA,IAAI,EAAC,QAHP;AAAA,6BAKEO,IAACE,QAAD;AAAa,QAAA,SAAS,EAAC;AAAvB;AALF,MAZF;AAAA,IADF;AAsBD;;AAEDV,kBAAkB,CAACW,SAAnB,GAA+B;AAC7BV,EAAAA,YAAY,EAAEW,SAAS,CAACC;AADK,CAA/B;AAIAb,kBAAkB,CAACc,YAAnB,GAAkC;AAChCb,EAAAA,YAAY,EAAE,wBAAM;AADY,CAAlC;;;;"}
+{"version":3,"file":"SlidesPanelToggler.js","sources":["../../../../../src/components/Panels/SlidesPanel/SlidesPanelToggler.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport * as icons from '../../../utils/icons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst SlidesPanelToggler = ({ onClosePanel = () => {} }) => {\n  const setActiveElement = useBuilderStore(state => state.setActiveElement);\n  const setIsSlidesPanelOpen = useBuilderStore(state => state.setIsSlidesPanelOpen);\n  const { SLIDES } = useTranslatedTexts();\n\n  return (\n    <>\n      <button\n        className=\"paneToggler settingsToggle\"\n        onClick={() => {\n          setActiveElement(null);\n          setIsSlidesPanelOpen(true);\n        }}\n        title={SLIDES}\n        type=\"button\"\n      >\n        <icons.slides className=\"jfReportSVG isTick\" />\n      </button>\n      <button\n        className=\"paneClose p-absolute\"\n        onClick={onClosePanel}\n        type=\"button\"\n      >\n        <icons.close className=\"jfReportSVG\" />\n      </button>\n    </>\n  );\n};\n\nSlidesPanelToggler.propTypes = {\n  onClosePanel: PropTypes.func,\n};\n\nexport default SlidesPanelToggler;\n"],"names":["SlidesPanelToggler","onClosePanel","setActiveElement","useBuilderStore","state","setIsSlidesPanelOpen","useTranslatedTexts","SLIDES","_jsxs","_jsx","icons.slides","icons.close","propTypes","PropTypes","func"],"mappings":";;;;;;;IAKMA,kBAAkB,GAAG,SAArBA,kBAAqB,OAAiC;AAAA,+BAA9BC,YAA8B;AAAA,MAA9BA,YAA8B,kCAAf,YAAM,EAAS;AAC1D,MAAMC,gBAAgB,GAAGC,eAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,gBAAV;AAAA,GAAN,CAAxC;AACA,MAAMG,oBAAoB,GAAGF,eAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,oBAAV;AAAA,GAAN,CAA5C;;AACA,4BAAmBC,kBAAkB,EAArC;AAAA,MAAQC,MAAR,uBAAQA,MAAR;;AAEA,sBACEC;AAAA,4BACEC;AACE,MAAA,SAAS,EAAC,4BADZ;AAEE,MAAA,OAAO,EAAE,mBAAM;AACbP,QAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAG,QAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD,OALH;AAME,MAAA,KAAK,EAAEE,MANT;AAOE,MAAA,IAAI,EAAC,QAPP;AAAA,6BASEE,IAACC,SAAD;AAAc,QAAA,SAAS,EAAC;AAAxB;AATF,MADF,eAYED;AACE,MAAA,SAAS,EAAC,sBADZ;AAEE,MAAA,OAAO,EAAER,YAFX;AAGE,MAAA,IAAI,EAAC,QAHP;AAAA,6BAKEQ,IAACE,QAAD;AAAa,QAAA,SAAS,EAAC;AAAvB;AALF,MAZF;AAAA,IADF;AAsBD;;AAEDX,kBAAkB,CAACY,SAAnB,GAA+B;AAC7BX,EAAAA,YAAY,EAAEY,SAAS,CAACC;AADK,CAA/B;;;;"}

package/lib/esm/components/Panels/SlidesPanel/SortablePageItem.js

@@ -1,18 +1,22 @@
-import { memo } from 'react';
-import { SortableElement } from 'react-sortable-hoc';
-import classNames from 'classnames';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import { memo, useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import PropTypes from 'prop-types';
 import StaticPage from '../../Preview/StaticPage.js';
 import PageThumbnailActions from './PageThumbnailActions.js';
+import { emptyFunction } from '../../../utils/functions.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var SortablePageItem = SortableElement(function (_ref) {
-  var acceptedItems = _ref.acceptedItems,
-      additionalPageItems = _ref.additionalPageItems,
-      disableInteraction = _ref.disableInteraction,
-      hashCode = _ref.hashCode,
-      isSelected = _ref.isSelected,
-      itemAccessor = _ref.itemAccessor,
-      onAnEventTrigger = _ref.onAnEventTrigger,
+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; }
+
+var SortablePageItem = function SortablePageItem(_ref) {
+  var id = _ref.id,
       onPageAdd = _ref.onPageAdd,
       onPageClick = _ref.onPageClick,
       onPageDuplicate = _ref.onPageDuplicate,
@@ -22,43 +26,73 @@ var SortablePageItem = SortableElement(function (_ref) {
       pageContainerStyle = _ref.pageContainerStyle,
       style = _ref.style;
 
-  var onKeyDown = function onKeyDown(f) {
-    return f;
-  };
+  var _useSortable = useSortable({
+    id: id
+  }),
+      attributes = _useSortable.attributes,
+      isDragging = _useSortable.isDragging,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
 
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames('thumbnailWrapper d-flex a-center j-between', {
-      isSelected: isSelected
-    }),
+  var dragStyle = useMemo(function () {
+    var baseStyle = {
+      opacity: isDragging ? 0.5 : 1,
+      transform: CSS.Transform.toString(transform),
+      transition: transition
+    };
+    return _objectSpread(_objectSpread({}, baseStyle), style);
+  }, [transform, transition, isDragging, style]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    ref: setNodeRef,
+    className: "thumbnailWrapper d-flex a-center j-between",
     "data-id": page.id,
     "data-order": order,
     onClick: onPageClick,
-    onKeyDown: onKeyDown,
-    style: style,
+    onKeyDown: emptyFunction,
+    style: dragStyle
+  }, attributes), listeners), {}, {
     children: [/*#__PURE__*/jsx("div", {
       className: "thumbnailOrder",
       children: order
     }), /*#__PURE__*/jsx("div", {
       className: "thumbnailFrame o-hidden",
       children: /*#__PURE__*/jsx(StaticPage, {
-        acceptedItems: acceptedItems,
-        additionalPageItems: additionalPageItems,
-        hashCode: hashCode,
-        itemAccessor: itemAccessor,
+        isThumbnail: true,
         items: page.items,
         style: pageContainerStyle
       })
     }), /*#__PURE__*/jsx(PageThumbnailActions, {
-      disableInteraction: disableInteraction,
-      onAnEventTrigger: onAnEventTrigger,
       onPageAdd: onPageAdd,
       onPageDuplicate: onPageDuplicate,
       onPageRemove: onPageRemove,
       order: order,
       page: page
     })]
-  });
-});
+  }));
+};
+
+SortablePageItem.propTypes = {
+  id: PropTypes.string.isRequired,
+  onPageAdd: PropTypes.func,
+  onPageClick: PropTypes.func,
+  onPageDuplicate: PropTypes.func,
+  onPageRemove: PropTypes.func,
+  order: PropTypes.number,
+  page: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({}))
+  }),
+  pageContainerStyle: PropTypes.shape({
+    backgroundColor: PropTypes.string
+  }),
+  style: PropTypes.shape({
+    opacity: PropTypes.number,
+    transform: PropTypes.string,
+    transition: PropTypes.string
+  })
+};
 var SortablePageItem$1 = /*#__PURE__*/memo(SortablePageItem);
 
 export default SortablePageItem$1;

package/lib/esm/components/Panels/SlidesPanel/SortablePageItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortablePageItem.js","sources":["../../../../../src/components/Panels/SlidesPanel/SortablePageItem.js"],"sourcesContent":["import { memo } from 'react';\nimport { SortableElement } from 'react-sortable-hoc';\nimport classNames from 'classnames';\nimport StaticPage from '../../Preview/StaticPage';\nimport PageThumbnailActions from './PageThumbnailActions';\n\nconst SortablePageItem = SortableElement(({\n  acceptedItems,\n  additionalPageItems,\n  disableInteraction,\n  hashCode,\n  isSelected,\n  itemAccessor,\n  onAnEventTrigger,\n  onPageAdd,\n  onPageClick,\n  onPageDuplicate,\n  onPageRemove,\n  order,\n  page,\n  pageContainerStyle,\n  style,\n}) => {\n  const onKeyDown = f => f;\n  return (\n    <div\n      className={classNames('thumbnailWrapper d-flex a-center j-between', { isSelected })}\n      data-id={page.id}\n      data-order={order}\n      onClick={onPageClick}\n      onKeyDown={onKeyDown}\n      style={style}\n    >\n      <div className=\"thumbnailOrder\">{order}</div>\n      <div className=\"thumbnailFrame o-hidden\">\n        <StaticPage\n          acceptedItems={acceptedItems}\n          additionalPageItems={additionalPageItems}\n          hashCode={hashCode}\n          itemAccessor={itemAccessor}\n          items={page.items}\n          style={pageContainerStyle}\n        />\n      </div>\n      <PageThumbnailActions\n        disableInteraction={disableInteraction}\n        onAnEventTrigger={onAnEventTrigger}\n        onPageAdd={onPageAdd}\n        onPageDuplicate={onPageDuplicate}\n        onPageRemove={onPageRemove}\n        order={order}\n        page={page}\n      />\n    </div>\n  );\n});\n\nexport default memo(SortablePageItem);\n"],"names":["SortablePageItem","SortableElement","acceptedItems","additionalPageItems","disableInteraction","hashCode","isSelected","itemAccessor","onAnEventTrigger","onPageAdd","onPageClick","onPageDuplicate","onPageRemove","order","page","pageContainerStyle","style","onKeyDown","f","_jsxs","classNames","id","_jsx","items","memo"],"mappings":";;;;;;;AAMA,IAAMA,gBAAgB,GAAGC,eAAe,CAAC,gBAgBnC;AAAA,MAfJC,aAeI,QAfJA,aAeI;AAAA,MAdJC,mBAcI,QAdJA,mBAcI;AAAA,MAbJC,kBAaI,QAbJA,kBAaI;AAAA,MAZJC,QAYI,QAZJA,QAYI;AAAA,MAXJC,UAWI,QAXJA,UAWI;AAAA,MAVJC,YAUI,QAVJA,YAUI;AAAA,MATJC,gBASI,QATJA,gBASI;AAAA,MARJC,SAQI,QARJA,SAQI;AAAA,MAPJC,WAOI,QAPJA,WAOI;AAAA,MANJC,eAMI,QANJA,eAMI;AAAA,MALJC,YAKI,QALJA,YAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,kBAEI,QAFJA,kBAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,MAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,CAAC;AAAA,WAAIA,CAAJ;AAAA,GAAnB;;AACA,sBACEC;AACE,IAAA,SAAS,EAAEC,UAAU,CAAC,4CAAD,EAA+C;AAAEd,MAAAA,UAAU,EAAVA;AAAF,KAA/C,CADvB;AAEE,eAASQ,IAAI,CAACO,EAFhB;AAGE,kBAAYR,KAHd;AAIE,IAAA,OAAO,EAAEH,WAJX;AAKE,IAAA,SAAS,EAAEO,SALb;AAME,IAAA,KAAK,EAAED,KANT;AAAA,4BAQEM;AAAK,MAAA,SAAS,EAAC,gBAAf;AAAA,gBAAiCT;AAAjC,MARF,eASES;AAAK,MAAA,SAAS,EAAC,yBAAf;AAAA,6BACEA,IAAC,UAAD;AACE,QAAA,aAAa,EAAEpB,aADjB;AAEE,QAAA,mBAAmB,EAAEC,mBAFvB;AAGE,QAAA,QAAQ,EAAEE,QAHZ;AAIE,QAAA,YAAY,EAAEE,YAJhB;AAKE,QAAA,KAAK,EAAEO,IAAI,CAACS,KALd;AAME,QAAA,KAAK,EAAER;AANT;AADF,MATF,eAmBEO,IAAC,oBAAD;AACE,MAAA,kBAAkB,EAAElB,kBADtB;AAEE,MAAA,gBAAgB,EAAEI,gBAFpB;AAGE,MAAA,SAAS,EAAEC,SAHb;AAIE,MAAA,eAAe,EAAEE,eAJnB;AAKE,MAAA,YAAY,EAAEC,YALhB;AAME,MAAA,KAAK,EAAEC,KANT;AAOE,MAAA,IAAI,EAAEC;AAPR,MAnBF;AAAA,IADF;AA+BD,CAjDuC,CAAxC;AAmDA,sCAAeU,IAAI,CAACxB,gBAAD,CAAnB;;;;"}
+{"version":3,"file":"SortablePageItem.js","sources":["../../../../../src/components/Panels/SlidesPanel/SortablePageItem.js"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport PropTypes from 'prop-types';\nimport StaticPage from '../../Preview/StaticPage';\nimport PageThumbnailActions from './PageThumbnailActions';\nimport { emptyFunction } from '../../../utils/functions';\n\nconst SortablePageItem = ({\n  id,\n  onPageAdd,\n  onPageClick,\n  onPageDuplicate,\n  onPageRemove,\n  order,\n  page,\n  pageContainerStyle,\n  style,\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id });\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=\"thumbnailWrapper d-flex a-center j-between\"\n      data-id={page.id}\n      data-order={order}\n      onClick={onPageClick}\n      onKeyDown={emptyFunction}\n      style={dragStyle}\n      {...attributes}\n      {...listeners}\n    >\n      <div className=\"thumbnailOrder\">{order}</div>\n      <div className=\"thumbnailFrame o-hidden\">\n        <StaticPage\n          isThumbnail\n          items={page.items}\n          style={pageContainerStyle}\n        />\n      </div>\n      <PageThumbnailActions\n        onPageAdd={onPageAdd}\n        onPageDuplicate={onPageDuplicate}\n        onPageRemove={onPageRemove}\n        order={order}\n        page={page}\n      />\n    </div>\n  );\n};\n\nSortablePageItem.propTypes = {\n  id: PropTypes.string.isRequired,\n  onPageAdd: PropTypes.func,\n  onPageClick: PropTypes.func,\n  onPageDuplicate: PropTypes.func,\n  onPageRemove: PropTypes.func,\n  order: PropTypes.number,\n  page: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    items: PropTypes.arrayOf(PropTypes.shape({})),\n  }),\n  pageContainerStyle: PropTypes.shape({\n    backgroundColor: PropTypes.string,\n  }),\n  style: PropTypes.shape({\n    opacity: PropTypes.number,\n    transform: PropTypes.string,\n    transition: PropTypes.string,\n  }),\n};\n\nexport default memo(SortablePageItem);\n"],"names":["SortablePageItem","id","onPageAdd","onPageClick","onPageDuplicate","onPageRemove","order","page","pageContainerStyle","style","useSortable","attributes","isDragging","listeners","setNodeRef","transform","transition","dragStyle","useMemo","baseStyle","opacity","CSS","Transform","toString","_jsxs","emptyFunction","_jsx","items","propTypes","PropTypes","string","isRequired","func","number","shape","arrayOf","backgroundColor","memo"],"mappings":"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"}

package/lib/esm/components/Panels/SlidesPanel/SortablePageItemDragOverlay.js

@@ -0,0 +1,48 @@
+import { DragOverlay } from '@dnd-kit/core';
+import PropTypes from 'prop-types';
+import StaticPage from '../../Preview/StaticPage.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SortablePageItemDragOverlay = function SortablePageItemDragOverlay(_ref) {
+  var activePageData = _ref.activePageData;
+  return /*#__PURE__*/jsx(DragOverlay, {
+    adjustScale: false,
+    dropAnimation: null,
+    style: {
+      cursor: 'grabbing'
+    },
+    children: activePageData ? /*#__PURE__*/jsxs("div", {
+      className: "thumbnailWrapper d-flex a-center j-between pageThumbnailHelper",
+      style: {
+        height: 127,
+        opacity: 0.5
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: "thumbnailOrder",
+        children: activePageData.page.order
+      }), /*#__PURE__*/jsx("div", {
+        className: "thumbnailFrame o-hidden",
+        children: /*#__PURE__*/jsx(StaticPage, {
+          isThumbnail: true,
+          items: activePageData.page.items,
+          style: activePageData.pageContainerLastStyle
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "thumbnailActions d-flex dir-col f-height j-center"
+      })]
+    }) : null
+  });
+};
+
+SortablePageItemDragOverlay.propTypes = {
+  activePageData: PropTypes.shape({
+    page: PropTypes.shape({
+      items: PropTypes.arrayOf(PropTypes.shape({})),
+      order: PropTypes.number
+    }),
+    pageContainerLastStyle: PropTypes.shape({})
+  })
+};
+
+export default SortablePageItemDragOverlay;
+//# sourceMappingURL=SortablePageItemDragOverlay.js.map

package/lib/esm/components/Panels/SlidesPanel/SortablePageItemDragOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortablePageItemDragOverlay.js","sources":["../../../../../src/components/Panels/SlidesPanel/SortablePageItemDragOverlay.js"],"sourcesContent":["import { DragOverlay } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport StaticPage from '../../Preview/StaticPage';\n\nconst SortablePageItemDragOverlay = ({\n  activePageData,\n}) => {\n  return (\n    <DragOverlay\n      adjustScale={false}\n      dropAnimation={null}\n      style={{ cursor: 'grabbing' }}\n    >\n      {activePageData ? (\n        <div\n          className=\"thumbnailWrapper d-flex a-center j-between pageThumbnailHelper\"\n          style={{ height: 127, opacity: 0.5 }}\n        >\n          <div className=\"thumbnailOrder\">{activePageData.page.order}</div>\n          <div className=\"thumbnailFrame o-hidden\">\n            <StaticPage\n              isThumbnail\n              items={activePageData.page.items}\n              style={activePageData.pageContainerLastStyle}\n            />\n          </div>\n          <div className=\"thumbnailActions d-flex dir-col f-height j-center\" />\n        </div>\n      ) : null}\n    </DragOverlay>\n  );\n};\n\nSortablePageItemDragOverlay.propTypes = {\n  activePageData: PropTypes.shape({\n    page: PropTypes.shape({\n      items: PropTypes.arrayOf(PropTypes.shape({})),\n      order: PropTypes.number,\n    }),\n    pageContainerLastStyle: PropTypes.shape({}),\n  }),\n};\n\nexport default SortablePageItemDragOverlay;\n"],"names":["SortablePageItemDragOverlay","activePageData","_jsx","cursor","_jsxs","height","opacity","page","order","items","pageContainerLastStyle","propTypes","PropTypes","shape","arrayOf","number"],"mappings":";;;;;IAIMA,2BAA2B,GAAG,SAA9BA,2BAA8B,OAE9B;AAAA,MADJC,cACI,QADJA,cACI;AACJ,sBACEC,IAAC,WAAD;AACE,IAAA,WAAW,EAAE,KADf;AAEE,IAAA,aAAa,EAAE,IAFjB;AAGE,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAHT;AAAA,cAKGF,cAAc,gBACbG;AACE,MAAA,SAAS,EAAC,gEADZ;AAEE,MAAA,KAAK,EAAE;AAAEC,QAAAA,MAAM,EAAE,GAAV;AAAeC,QAAAA,OAAO,EAAE;AAAxB,OAFT;AAAA,8BAIEJ;AAAK,QAAA,SAAS,EAAC,gBAAf;AAAA,kBAAiCD,cAAc,CAACM,IAAf,CAAoBC;AAArD,QAJF,eAKEN;AAAK,QAAA,SAAS,EAAC,yBAAf;AAAA,+BACEA,IAAC,UAAD;AACE,UAAA,WAAW,MADb;AAEE,UAAA,KAAK,EAAED,cAAc,CAACM,IAAf,CAAoBE,KAF7B;AAGE,UAAA,KAAK,EAAER,cAAc,CAACS;AAHxB;AADF,QALF,eAYER;AAAK,QAAA,SAAS,EAAC;AAAf,QAZF;AAAA,MADa,GAeX;AApBN,IADF;AAwBD;;AAEDF,2BAA2B,CAACW,SAA5B,GAAwC;AACtCV,EAAAA,cAAc,EAAEW,SAAS,CAACC,KAAV,CAAgB;AAC9BN,IAAAA,IAAI,EAAEK,SAAS,CAACC,KAAV,CAAgB;AACpBJ,MAAAA,KAAK,EAAEG,SAAS,CAACE,OAAV,CAAkBF,SAAS,CAACC,KAAV,CAAgB,EAAhB,CAAlB,CADa;AAEpBL,MAAAA,KAAK,EAAEI,SAAS,CAACG;AAFG,KAAhB,CADwB;AAK9BL,IAAAA,sBAAsB,EAAEE,SAAS,CAACC,KAAV,CAAgB,EAAhB;AALM,GAAhB;AADsB,CAAxC;;;;"}

package/lib/esm/components/Panels/SlidesPanel/SortablePageItemRenderer.js

@@ -1,11 +1,10 @@
 import 'core-js/modules/es.array.concat.js';
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { areEqual } from 'react-window';
 import SortablePageItem from './SortablePageItem.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["pageContainerStyle", "pageGetter", "selectedPageIndex"];
+var _excluded = ["pageContainerStyle", "pageGetter"];
 
 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; }
 
@@ -18,24 +17,26 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 SortablePageItemRenderer = function SortablePageItemRenderer(_ref) {
-  var data = _ref.data,
+  var _ref$data = _ref.data,
+      data = _ref$data === void 0 ? {} : _ref$data,
+      id = _ref.id,
       index = _ref.index,
       style = _ref.style;
 
   var pageContainerStyle = data.pageContainerStyle,
       pageGetter = data.pageGetter,
-      selectedPageIndex = data.selectedPageIndex,
       otherData = _objectWithoutProperties(data, _excluded);
 
   var page = pageGetter(index);
+  if (!page) return null;
 
   var pageContainerLastStyle = _objectSpread(_objectSpread({}, pageContainerStyle), page.backgroundColor ? {
     backgroundColor: page.backgroundColor
   } : {});
 
   return /*#__PURE__*/jsx(SortablePageItem, _objectSpread({
+    id: id,
     index: index,
-    isSelected: selectedPageIndex === page.order,
     order: page.order,
     page: page,
     pageContainerStyle: pageContainerLastStyle,
@@ -51,15 +52,13 @@ SortablePageItemRenderer.propTypes = {
     pageGetter: PropTypes.func,
     selectedPageIndex: PropTypes.number
   }),
+  id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   style: PropTypes.shape({
     top: PropTypes.number
   }).isRequired
 };
-SortablePageItemRenderer.defaultProps = {
-  data: {}
-};
-var SortablePageItemRenderer$1 = /*#__PURE__*/memo(SortablePageItemRenderer, areEqual);
+var SortablePageItemRenderer$1 = /*#__PURE__*/memo(SortablePageItemRenderer);
 
 export default SortablePageItemRenderer$1;
 //# sourceMappingURL=SortablePageItemRenderer.js.map

package/lib/esm/components/Panels/SlidesPanel/SortablePageItemRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortablePageItemRenderer.js","sources":["../../../../../src/components/Panels/SlidesPanel/SortablePageItemRenderer.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport { areEqual } from 'react-window';\nimport SortablePageItem from './SortablePageItem';\n\nconst SortablePageItemRenderer = ({ data, index, style }) => {\n  const {\n    pageContainerStyle, pageGetter, selectedPageIndex, ...otherData\n  } = data;\n  const page = pageGetter(index);\n  const pageContainerLastStyle = {\n    ...pageContainerStyle,\n    ...page.backgroundColor ? { backgroundColor: page.backgroundColor } : {},\n  };\n  return (\n    <SortablePageItem\n      key={`page-${index}-${page.id}`}\n      index={index}\n      isSelected={selectedPageIndex === page.order}\n      order={page.order}\n      page={page}\n      pageContainerStyle={pageContainerLastStyle}\n      style={style}\n      {...otherData}\n    />\n  );\n};\n\nSortablePageItemRenderer.propTypes = {\n  data: PropTypes.shape({\n    pageContainerStyle: PropTypes.shape({\n      backgroundColor: PropTypes.string,\n    }),\n    pageGetter: PropTypes.func,\n    selectedPageIndex: PropTypes.number,\n  }),\n  index: PropTypes.number.isRequired,\n  style: PropTypes.shape({\n    top: PropTypes.number,\n  }).isRequired,\n};\n\nSortablePageItemRenderer.defaultProps = {\n  data: {},\n};\n\nexport default memo(SortablePageItemRenderer, areEqual);\n"],"names":["SortablePageItemRenderer","data","index","style","pageContainerStyle","pageGetter","selectedPageIndex","otherData","page","pageContainerLastStyle","backgroundColor","_jsx","order","id","propTypes","PropTypes","shape","string","func","number","isRequired","top","defaultProps","memo","areEqual"],"mappings":";;;;;;;;;;;;;;;;;;;AAKA,IAAMA,wBAAwB,GAAG,SAA3BA,wBAA2B,OAA4B;AAAA,MAAzBC,IAAyB,QAAzBA,IAAyB;AAAA,MAAnBC,KAAmB,QAAnBA,KAAmB;AAAA,MAAZC,KAAY,QAAZA,KAAY;;AAC3D,MACEC,kBADF,GAEIH,IAFJ,CACEG,kBADF;AAAA,MACsBC,UADtB,GAEIJ,IAFJ,CACsBI,UADtB;AAAA,MACkCC,iBADlC,GAEIL,IAFJ,CACkCK,iBADlC;AAAA,MACwDC,SADxD,4BAEIN,IAFJ;;AAGA,MAAMO,IAAI,GAAGH,UAAU,CAACH,KAAD,CAAvB;;AACA,MAAMO,sBAAsB,mCACvBL,kBADuB,GAEvBI,IAAI,CAACE,eAAL,GAAuB;AAAEA,IAAAA,eAAe,EAAEF,IAAI,CAACE;AAAxB,GAAvB,GAAmE,EAF5C,CAA5B;;AAIA,sBACEC,IAAC,gBAAD;AAEE,IAAA,KAAK,EAAET,KAFT;AAGE,IAAA,UAAU,EAAEI,iBAAiB,KAAKE,IAAI,CAACI,KAHzC;AAIE,IAAA,KAAK,EAAEJ,IAAI,CAACI,KAJd;AAKE,IAAA,IAAI,EAAEJ,IALR;AAME,IAAA,kBAAkB,EAAEC,sBANtB;AAOE,IAAA,KAAK,EAAEN;AAPT,KAQMI,SARN,kBACeL,KADf,cACwBM,IAAI,CAACK,EAD7B,EADF;AAYD,CArBD;;AAuBAb,wBAAwB,CAACc,SAAzB,GAAqC;AACnCb,EAAAA,IAAI,EAAEc,SAAS,CAACC,KAAV,CAAgB;AACpBZ,IAAAA,kBAAkB,EAAEW,SAAS,CAACC,KAAV,CAAgB;AAClCN,MAAAA,eAAe,EAAEK,SAAS,CAACE;AADO,KAAhB,CADA;AAIpBZ,IAAAA,UAAU,EAAEU,SAAS,CAACG,IAJF;AAKpBZ,IAAAA,iBAAiB,EAAES,SAAS,CAACI;AALT,GAAhB,CAD6B;AAQnCjB,EAAAA,KAAK,EAAEa,SAAS,CAACI,MAAV,CAAiBC,UARW;AASnCjB,EAAAA,KAAK,EAAEY,SAAS,CAACC,KAAV,CAAgB;AACrBK,IAAAA,GAAG,EAAEN,SAAS,CAACI;AADM,GAAhB,EAEJC;AAXgC,CAArC;AAcApB,wBAAwB,CAACsB,YAAzB,GAAwC;AACtCrB,EAAAA,IAAI,EAAE;AADgC,CAAxC;AAIA,8CAAesB,IAAI,CAACvB,wBAAD,EAA2BwB,QAA3B,CAAnB;;;;"}
+{"version":3,"file":"SortablePageItemRenderer.js","sources":["../../../../../src/components/Panels/SlidesPanel/SortablePageItemRenderer.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport SortablePageItem from './SortablePageItem';\n\nconst SortablePageItemRenderer = ({\n  data = {}, id, index, style,\n}) => {\n  const {\n    pageContainerStyle, pageGetter, ...otherData\n  } = data;\n  const page = pageGetter(index);\n  if (!page) return null;\n\n  const pageContainerLastStyle = {\n    ...pageContainerStyle,\n    ...page.backgroundColor ? { backgroundColor: page.backgroundColor } : {},\n  };\n  return (\n    <SortablePageItem\n      key={`page-${index}-${page.id}`}\n      id={id}\n      index={index}\n      order={page.order}\n      page={page}\n      pageContainerStyle={pageContainerLastStyle}\n      style={style}\n      {...otherData}\n    />\n  );\n};\n\nSortablePageItemRenderer.propTypes = {\n  data: PropTypes.shape({\n    pageContainerStyle: PropTypes.shape({\n      backgroundColor: PropTypes.string,\n    }),\n    pageGetter: PropTypes.func,\n    selectedPageIndex: PropTypes.number,\n  }),\n  id: PropTypes.string.isRequired,\n  index: PropTypes.number.isRequired,\n  style: PropTypes.shape({\n    top: PropTypes.number,\n  }).isRequired,\n};\n\nexport default memo(SortablePageItemRenderer);\n"],"names":["SortablePageItemRenderer","data","id","index","style","pageContainerStyle","pageGetter","otherData","page","pageContainerLastStyle","backgroundColor","_jsx","order","propTypes","PropTypes","shape","string","func","selectedPageIndex","number","isRequired","top","memo"],"mappings":";;;;;;;;;;;;;;;;;;AAIA,IAAMA,wBAAwB,GAAG,SAA3BA,wBAA2B,OAE3B;AAAA,uBADJC,IACI;AAAA,MADJA,IACI,0BADG,EACH;AAAA,MADOC,EACP,QADOA,EACP;AAAA,MADWC,KACX,QADWA,KACX;AAAA,MADkBC,KAClB,QADkBA,KAClB;;AACJ,MACEC,kBADF,GAEIJ,IAFJ,CACEI,kBADF;AAAA,MACsBC,UADtB,GAEIL,IAFJ,CACsBK,UADtB;AAAA,MACqCC,SADrC,4BAEIN,IAFJ;;AAGA,MAAMO,IAAI,GAAGF,UAAU,CAACH,KAAD,CAAvB;AACA,MAAI,CAACK,IAAL,EAAW,OAAO,IAAP;;AAEX,MAAMC,sBAAsB,mCACvBJ,kBADuB,GAEvBG,IAAI,CAACE,eAAL,GAAuB;AAAEA,IAAAA,eAAe,EAAEF,IAAI,CAACE;AAAxB,GAAvB,GAAmE,EAF5C,CAA5B;;AAIA,sBACEC,IAAC,gBAAD;AAEE,IAAA,EAAE,EAAET,EAFN;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,KAAK,EAAEK,IAAI,CAACI,KAJd;AAKE,IAAA,IAAI,EAAEJ,IALR;AAME,IAAA,kBAAkB,EAAEC,sBANtB;AAOE,IAAA,KAAK,EAAEL;AAPT,KAQMG,SARN,kBACeJ,KADf,cACwBK,IAAI,CAACN,EAD7B,EADF;AAYD,CAzBD;;AA2BAF,wBAAwB,CAACa,SAAzB,GAAqC;AACnCZ,EAAAA,IAAI,EAAEa,SAAS,CAACC,KAAV,CAAgB;AACpBV,IAAAA,kBAAkB,EAAES,SAAS,CAACC,KAAV,CAAgB;AAClCL,MAAAA,eAAe,EAAEI,SAAS,CAACE;AADO,KAAhB,CADA;AAIpBV,IAAAA,UAAU,EAAEQ,SAAS,CAACG,IAJF;AAKpBC,IAAAA,iBAAiB,EAAEJ,SAAS,CAACK;AALT,GAAhB,CAD6B;AAQnCjB,EAAAA,EAAE,EAAEY,SAAS,CAACE,MAAV,CAAiBI,UARc;AASnCjB,EAAAA,KAAK,EAAEW,SAAS,CAACK,MAAV,CAAiBC,UATW;AAUnChB,EAAAA,KAAK,EAAEU,SAAS,CAACC,KAAV,CAAgB;AACrBM,IAAAA,GAAG,EAAEP,SAAS,CAACK;AADM,GAAhB,EAEJC;AAZgC,CAArC;AAeA,8CAAeE,IAAI,CAACtB,wBAAD,CAAnB;;;;"}