@jotforminc/dnd-builder 3.1.1 → 3.2.1

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

@@ -1,8 +1,5 @@
 '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.includes.js');
 require('core-js/modules/es.array.map.js');
 require('core-js/modules/es.number.constructor.js');
 require('core-js/modules/es.number.is-nan.js');
@@ -16,14 +13,14 @@ var ContextMenu = require('./ContextMenu.js');
 var PageActions = require('./PageActions.js');
 var PageAdder = require('./PageAdder.js');
 var ZoomControls = require('./ZoomControls.js');
+var SelectionBox = require('./SelectionBox.js');
 var BuilderContext = require('../../contexts/BuilderContext.js');
 var PropContext = require('../../contexts/PropContext.js');
 var Page = require('./Page.js');
 var functions = require('../../utils/functions.js');
-var hooks = require('../../utils/hooks.js');
-var generateId = require('../../utils/generateId.js');
-var eventIgnoredRoles = require('../../constants/eventIgnoredRoles.js');
 var DraggableLayer = require('./DraggableLayer.js');
+var useKeyboardActions = require('../../utils/useKeyboardActions.js');
+var useMarqueeSelection = require('../../utils/useMarqueeSelection.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -32,76 +29,45 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var Scene = function Scene() {
   var pages = PropContext.usePropStore(function (state) {
     return state.pages;
   });
-  var onItemAdd = PropContext.usePropStore(function (state) {
-    return state.onItemAdd;
-  });
-  var onItemRemove = PropContext.usePropStore(function (state) {
-    return state.onItemRemove;
-  });
-  var onAnEventTrigger = PropContext.usePropStore(function (state) {
-    return state.onAnEventTrigger;
-  });
   var settings = PropContext.usePropStore(function (state) {
     return state.settings;
   });
-  var onItemChange = PropContext.usePropStore(function (state) {
-    return state.onItemChange;
-  });
-  var activeElement = BuilderContext.useBuilderStore(function (state) {
-    return state.activeElement;
-  });
   var contextMenuProps = BuilderContext.useBuilderStore(function (state) {
     return state.contextMenuProps;
   });
-  var isRightPanelOpen = BuilderContext.useBuilderStore(function (state) {
-    return state.isRightPanelOpen;
-  });
-  var setActiveElement = BuilderContext.useBuilderStore(function (state) {
-    return state.setActiveElement;
-  });
   var setContextMenuProps = BuilderContext.useBuilderStore(function (state) {
     return state.setContextMenuProps;
   });
-  var setIsRightPanelOpen = BuilderContext.useBuilderStore(function (state) {
-    return state.setIsRightPanelOpen;
+  var setGuides = BuilderContext.useBuilderStore(function (state) {
+    return state.setGuides;
   });
   var zoom = BuilderContext.useBuilderStore(function (state) {
     return state.zoom;
   });
-
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      itemToPaste = _useState2[0],
-      setItemToPaste = _useState2[1];
-
   var lastScrollPosition = BuilderContext.useBuilderStore(function (state) {
     return state.lastScrollPosition;
   });
   var pageStyles = React.useRef({});
   var pageContainerStyles = React.useRef({});
   var viewPortRef = React.useRef({});
+  var canvasRef = React.useRef(null);
   /* Page Refs */
 
   var refs = React.useRef(pages.reduce(function (acc, curr) {
     acc[curr.id] = /*#__PURE__*/React.createRef(null);
     return acc;
-  }, {})); // Update refs when new pages are added
+  }, {})); // Custom hooks
+
+  useKeyboardActions();
+
+  var _useMarqueeSelection = useMarqueeSelection(canvasRef),
+      selectionBox = _useMarqueeSelection.selectionBox,
+      selectionPageId = _useMarqueeSelection.selectionPageId; // Update refs when new pages are added
+
 
   React.useEffect(function () {
     pages.forEach(function (page) {
@@ -109,13 +75,10 @@ var Scene = function Scene() {
         refs.current[page.id] = /*#__PURE__*/React.createRef(null);
       }
     });
-  }, [pages]);
-  var isMultipleItemSelected = activeElement !== null && activeElement.length > 1;
-  /* Calculate snap guides */
+  }, [pages]); // Calculate guides for snap functionality
 
-  var keyDownCount = React.useRef(null);
-  var guides = React.useMemo(function () {
-    return pages.reduce(function (acc, page) {
+  React.useEffect(function () {
+    setGuides(pages.reduce(function (acc, page) {
       var _pageGuides = {};
       var pageRef = refs.current[page.id];
 
@@ -150,201 +113,14 @@ var Scene = function Scene() {
 
       acc[page.id] = _pageGuides;
       return acc;
-    }, {});
-  }, [pages, zoom]);
+    }, {}));
+  }, [pages, zoom, setGuides]); // Restore scroll position after mode change
+
   React.useEffect(function () {
     if (viewPortRef.current) {
       viewPortRef.current.scrollTop = lastScrollPosition;
     }
-  }, [lastScrollPosition]); // set last scroll position after changing mode
-
-  var foundItem = functions.findItemById(activeElement === null ? null : activeElement[0], pages);
-  var selectedItems = hooks.useActiveElement();
-
-  var moveItemWithKeyboard = function moveItemWithKeyboard(event, direction, value) {
-    event.preventDefault();
-    selectedItems.forEach(function (item) {
-      if (item.isLocked) {
-        return false;
-      }
-
-      onItemChange({
-        id: item.id
-      }, _objectSpread(_objectSpread({}, item), {}, _defineProperty({}, direction, item[direction] + value)));
-    });
-  };
-
-  var selectNextOrPrevElement = function selectNextOrPrevElement(event, deletedItem) {
-    if (event.preventDefault) event.preventDefault();
-    var referenceItem = deletedItem ? deletedItem : foundItem;
-    var page = pages.find(function (_page) {
-      return _page.id === referenceItem.pageID;
-    });
-    if (!page || page && !page.items.length) return setActiveElement(null);
-    var items = page.items;
-    var currentIndex = items.findIndex(function (item) {
-      return item.id === referenceItem.id;
-    }); // Pages are not updated in time so here is an unnecessary check
-
-    if (items.length === 1 && deletedItem) {
-      return setActiveElement(null);
-    }
-
-    if (event.shiftKey) {
-      if (items[currentIndex - 1]) setActiveElement(items[currentIndex - 1].id);else setActiveElement(items[items.length - 1].id);
-    } else if (items[currentIndex + 1]) {
-      setActiveElement(items[currentIndex + 1].id);
-    } else setActiveElement(items[0].id);
-  };
-
-  var onItemRemoveFromPage = function onItemRemoveFromPage(e) {
-    // Firefox updates browser history on backspace
-    e.preventDefault();
-    if (isMultipleItemSelected) return;
-
-    if (foundItem.isLocked) {
-      return false;
-    }
-
-    setActiveElement(null);
-    onItemRemove(foundItem);
-    selectNextOrPrevElement({
-      shiftKey: false
-    }, foundItem);
-    onAnEventTrigger('removeItem', foundItem.itemType);
-  };
-
-  var handlePaste = function handlePaste() {
-    if (isMultipleItemSelected) return;
-    var itemID = generateId();
-    var pageID = functions.getMostVisiblePage(true);
-    var offset = itemToPaste.pageID === pageID ? 50 : 0;
-
-    var item = _objectSpread(_objectSpread({}, itemToPaste), {}, {
-      id: itemID,
-      left: itemToPaste.left + offset,
-      pageID: pageID,
-      top: itemToPaste.top + offset
-    });
-
-    onItemAdd(item);
-    onAnEventTrigger('pasteItem', itemToPaste.itemType);
-    setActiveElement(itemID); // set as last reference to paste
-
-    setItemToPaste(item);
-  };
-
-  var keyboardActions = function keyboardActions(event) {
-    var key = event.key,
-        metaKey = event.metaKey,
-        shiftKey = event.shiftKey;
-
-    if (metaKey) {
-      if (key === 'l') {
-        // Lock
-        if (isMultipleItemSelected) return;
-        event.preventDefault(); // Dont focus to URL bar
-
-        onAnEventTrigger(foundItem.isLocked ? 'unlockReportItem' : 'lockReportItem', foundItem.itemType);
-        onItemChange({
-          id: foundItem.id
-        }, {
-          isLocked: foundItem.isLocked ? false : true
-        });
-        return;
-      }
-
-      if (key === 'c' || key === 'x') {
-        if (isMultipleItemSelected) return; // Copy or Cut
-
-        if (key === 'x') {
-          onItemRemoveFromPage(event);
-          onAnEventTrigger('cutItem', foundItem.itemType);
-        } else {
-          onAnEventTrigger('copyItem', foundItem.itemType);
-        }
-
-        setItemToPaste(foundItem);
-        return;
-      }
-
-      if (foundItem && key === 'd') {
-        if (isMultipleItemSelected) return; // Duplicate
-
-        event.preventDefault();
-        var itemID = generateId();
-        onItemAdd(_objectSpread(_objectSpread({}, foundItem), {}, {
-          id: itemID,
-          left: foundItem.left + 50,
-          top: foundItem.top + 50
-        }));
-        onAnEventTrigger('duplicateItem', foundItem.itemType);
-        setActiveElement(itemID);
-
-        if (!isRightPanelOpen) {
-          setIsRightPanelOpen(true);
-        }
-
-        return;
-      }
-    }
-
-    keyDownCount.current++;
-    var movementValue = shiftKey ? 10 : 1 + keyDownCount.current; // Others
-
-    switch (key) {
-      case 'Backspace':
-        return onItemRemoveFromPage(event);
-
-      case 'Delete':
-        return onItemRemoveFromPage(event);
-
-      case 'Escape':
-        return setActiveElement(null);
-
-      case 'ArrowLeft':
-        return moveItemWithKeyboard(event, 'left', -movementValue);
-
-      case 'ArrowUp':
-        return moveItemWithKeyboard(event, 'top', -movementValue);
-
-      case 'ArrowRight':
-        return moveItemWithKeyboard(event, 'left', movementValue);
-
-      case 'ArrowDown':
-        return moveItemWithKeyboard(event, 'top', movementValue);
-
-      case 'Tab':
-        return selectNextOrPrevElement(event);
-    }
-  };
-
-  var shouldSuppressKeyboardEvent = function shouldSuppressKeyboardEvent(e) {
-    return eventIgnoredRoles.EVENT_IGNORED_ROLES.some(function (role) {
-      return e.target.closest("[role=".concat(role, "]"));
-    });
-  };
-
-  var handleKeyboardEvent = function handleKeyboardEvent(e) {
-    var shouldPaste = itemToPaste && e.key === 'v' && e.metaKey;
-
-    if (shouldSuppressKeyboardEvent(e)) {
-      return;
-    }
-
-    if (activeElement && !shouldPaste) {
-      var arrowKeyCodes = ['ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowBottom'];
-      if (arrowKeyCodes.includes(e.key)) e.preventDefault();
-      keyboardActions(e);
-    } else if (shouldPaste) {
-      handlePaste();
-    }
-  };
-
-  hooks.useEventListener('keydown', handleKeyboardEvent);
-  hooks.useEventListener('keyup', function () {
-    keyDownCount.current = 0;
-  });
+  }, [lastScrollPosition]);
   var _settings$reportLayou = settings.reportLayoutHeight,
       reportLayoutHeight = _settings$reportLayou === void 0 ? 794 : _settings$reportLayou,
       _settings$reportLayou2 = settings.reportLayoutWidth,
@@ -369,13 +145,13 @@ var Scene = function Scene() {
     // Builder.js
     className: classNames.mainWrapper,
     children: [/*#__PURE__*/jsxRuntime.jsx(DraggableLayer, {
-      guides: guides,
       pageRefs: refs.current
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: viewPortRef,
       className: classNames.viewport,
       "data-zoom": zoom,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        ref: canvasRef,
         className: classNames.canvas,
         children: [pages.map(function (page, index) {
           return (
@@ -385,20 +161,23 @@ var Scene = function Scene() {
               children: [/*#__PURE__*/jsxRuntime.jsx(PageActions, {
                 order: page.order,
                 pageID: page.id
-              }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 ref: refs.current[page.id],
                 className: classNames.page,
                 "data-id": page.id,
                 "data-order": page.order,
                 id: "presentation-page-".concat(page.id.toString()),
-                style: pageStyles.current,
-                children: /*#__PURE__*/jsxRuntime.jsx(Page, {
-                  guides: guides,
+                style: _objectSpread(_objectSpread({}, pageStyles.current), {}, {
+                  position: 'relative'
+                }),
+                children: [/*#__PURE__*/jsxRuntime.jsx(Page, {
                   items: page.items,
                   page: page,
                   pageIndex: index,
                   style: pageContainerStyles.current
-                })
+                }), selectionPageId === page.id && selectionBox && /*#__PURE__*/jsxRuntime.jsx(SelectionBox, {
+                  selectionBox: selectionBox
+                })]
               }, "page_".concat(page.id))]
             }, page.id)
           );

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

@@ -1 +1 @@
-{"version":3,"file":"Scene.js","sources":["../../../../src/components/Builder/Scene.js"],"sourcesContent":["/* eslint-disable complexity */\nimport {\n  createRef,\n  Fragment,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport * as classNames from '../../constants/classNames';\nimport ContextMenu from './ContextMenu';\nimport PageActions from './PageActions';\nimport PageAdder from './PageAdder';\nimport ZoomControls from './ZoomControls';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport Page from './Page';\nimport {\n  calculateGuidePositions,\n  findItemById,\n  findItemsOnPage,\n  getMostVisiblePage,\n} from '../../utils/functions';\nimport { useActiveElement, useEventListener } from '../../utils/hooks';\nimport generateId from '../../utils/generateId';\nimport { EVENT_IGNORED_ROLES } from '../../constants/eventIgnoredRoles';\nimport DraggableLayer from './DraggableLayer';\n\nconst Scene = () => {\n  const pages = usePropStore(state => state.pages);\n  const onItemAdd = usePropStore(state => state.onItemAdd);\n  const onItemRemove = usePropStore(state => state.onItemRemove);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const settings = usePropStore(state => state.settings);\n  const onItemChange = usePropStore(state => state.onItemChange);\n\n  const activeElement = useBuilderStore(state => state.activeElement);\n  const contextMenuProps = useBuilderStore(state => state.contextMenuProps);\n  const isRightPanelOpen = useBuilderStore(state => state.isRightPanelOpen);\n  const setActiveElement = useBuilderStore(state => state.setActiveElement);\n  const setContextMenuProps = useBuilderStore(state => state.setContextMenuProps);\n  const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n  const zoom = useBuilderStore(state => state.zoom);\n\n  const [itemToPaste, setItemToPaste] = useState(null);\n  const lastScrollPosition = useBuilderStore(state => state.lastScrollPosition);\n\n  const pageStyles = useRef({});\n  const pageContainerStyles = useRef({});\n  const viewPortRef = useRef({});\n\n  /* Page Refs */\n  const refs = useRef(pages.reduce((acc, curr) => {\n    acc[curr.id] = createRef(null);\n    return acc;\n  }, {}));\n\n  // Update refs when new pages are added\n  useEffect(() => {\n    pages.forEach(page => {\n      if (!refs.current[page.id]) {\n        refs.current[page.id] = createRef(null);\n      }\n    });\n  }, [pages]);\n\n  const isMultipleItemSelected = activeElement !== null && activeElement.length > 1;\n\n  /* Calculate snap guides */\n  const keyDownCount = useRef(null);\n\n  const guides = useMemo(() => {\n    return pages.reduce((acc, page) => {\n      const _pageGuides = {};\n      const pageRef = refs.current[page.id];\n      if (pageRef && pageRef.current) {\n        const {\n          height, left, top, width,\n        } = pageRef.current.getBoundingClientRect();\n        const boundingBox = {\n          height, left, top, width,\n        };\n        _pageGuides.boundingBox = {\n          x: calculateGuidePositions(boundingBox, 'x').map(value => value - boundingBox.left),\n          y: calculateGuidePositions(boundingBox, 'y').map(value => value - boundingBox.top),\n        };\n        page.items.forEach(item => {\n          _pageGuides[item.id] = {\n            x: calculateGuidePositions(item, 'x', zoom),\n            y: calculateGuidePositions(item, 'y', zoom),\n          };\n        });\n      }\n      acc[page.id] = _pageGuides;\n      return acc;\n    }, {});\n  }, [pages, zoom]);\n\n  useEffect(() => {\n    if (viewPortRef.current) {\n      viewPortRef.current.scrollTop = lastScrollPosition;\n    }\n  }, [lastScrollPosition]); // set last scroll position after changing mode\n\n  const foundItem = findItemById(activeElement === null ? null : activeElement[0], pages);\n\n  const selectedItems = useActiveElement();\n  const moveItemWithKeyboard = (event, direction, value) => {\n    event.preventDefault();\n    selectedItems.forEach(item => {\n      if (item.isLocked) {\n        return false;\n      }\n      onItemChange(\n        { id: item.id },\n        {\n          ...item,\n          [direction]: item[direction] + value,\n        },\n      );\n    });\n  };\n\n  const selectNextOrPrevElement = (event, deletedItem) => {\n    if (event.preventDefault) event.preventDefault();\n    const referenceItem = deletedItem ? deletedItem : foundItem;\n\n    const page = pages.find(_page => _page.id === referenceItem.pageID);\n    if (!page || (page && !page.items.length)) return setActiveElement(null);\n    const { items } = page;\n\n    const currentIndex = items.findIndex(item => item.id === referenceItem.id);\n\n    // Pages are not updated in time so here is an unnecessary check\n    if (items.length === 1 && deletedItem) {\n      return setActiveElement(null);\n    }\n\n    if (event.shiftKey) {\n      if (items[currentIndex - 1]) setActiveElement(items[currentIndex - 1].id);\n      else setActiveElement(items[items.length - 1].id);\n    } else if (items[currentIndex + 1]) {\n      setActiveElement(items[currentIndex + 1].id);\n    } else setActiveElement(items[0].id);\n  };\n\n  const onItemRemoveFromPage = e => {\n    // Firefox updates browser history on backspace\n    e.preventDefault();\n    if (isMultipleItemSelected) return;\n    if (foundItem.isLocked) {\n      return false;\n    }\n    setActiveElement(null);\n    onItemRemove(foundItem);\n    selectNextOrPrevElement({ shiftKey: false }, foundItem);\n    onAnEventTrigger('removeItem', foundItem.itemType);\n  };\n\n  const handlePaste = () => {\n    if (isMultipleItemSelected) return;\n    const itemID = generateId();\n    const pageID = getMostVisiblePage(true);\n    const offset = itemToPaste.pageID === pageID ? 50 : 0;\n\n    const item = {\n      ...itemToPaste,\n      id: itemID,\n      left: itemToPaste.left + offset,\n      pageID,\n      top: itemToPaste.top + offset,\n    };\n\n    onItemAdd(item);\n\n    onAnEventTrigger('pasteItem', itemToPaste.itemType);\n    setActiveElement(itemID);\n    // set as last reference to paste\n    setItemToPaste(item);\n  };\n\n  const keyboardActions = event => {\n    const {\n      key,\n      metaKey,\n      shiftKey,\n    } = event;\n\n    if (metaKey) {\n      if (key === 'l') {\n        // Lock\n        if (isMultipleItemSelected) return;\n        event.preventDefault(); // Dont focus to URL bar\n        onAnEventTrigger(\n          foundItem.isLocked ? 'unlockReportItem' : 'lockReportItem',\n          foundItem.itemType,\n        );\n        onItemChange(\n          { id: foundItem.id },\n          { isLocked: foundItem.isLocked ? false : true },\n        );\n        return;\n      }\n\n      if (key === 'c' || key === 'x') {\n        if (isMultipleItemSelected) return;\n        // Copy or Cut\n        if (key === 'x') {\n          onItemRemoveFromPage(event);\n          onAnEventTrigger('cutItem', foundItem.itemType);\n        } else {\n          onAnEventTrigger('copyItem', foundItem.itemType);\n        }\n\n        setItemToPaste(foundItem);\n        return;\n      }\n\n      if (foundItem && key === 'd') {\n        if (isMultipleItemSelected) return;\n        // Duplicate\n        event.preventDefault();\n        const itemID = generateId();\n        onItemAdd({\n          ...foundItem,\n          id: itemID,\n          left: foundItem.left + 50,\n          top: foundItem.top + 50,\n        });\n        onAnEventTrigger('duplicateItem', foundItem.itemType);\n        setActiveElement(itemID);\n        if (!isRightPanelOpen) {\n          setIsRightPanelOpen(true);\n        }\n        return;\n      }\n    }\n\n    keyDownCount.current++;\n    const movementValue = shiftKey ? 10 : 1 + keyDownCount.current;\n\n    // Others\n    switch (key) {\n    case 'Backspace': return onItemRemoveFromPage(event);\n    case 'Delete': return onItemRemoveFromPage(event);\n    case 'Escape': return setActiveElement(null);\n    case 'ArrowLeft': return moveItemWithKeyboard(event, 'left', -movementValue);\n    case 'ArrowUp': return moveItemWithKeyboard(event, 'top', -movementValue);\n    case 'ArrowRight': return moveItemWithKeyboard(event, 'left', movementValue);\n    case 'ArrowDown': return moveItemWithKeyboard(event, 'top', movementValue);\n    case 'Tab': return selectNextOrPrevElement(event);\n    default:\n    }\n  };\n\n  const shouldSuppressKeyboardEvent = e => (\n    EVENT_IGNORED_ROLES.some(role => e.target.closest(`[role=${role}]`))\n  );\n\n  const handleKeyboardEvent = e => {\n    const shouldPaste = itemToPaste && e.key === 'v' && e.metaKey;\n\n    if (shouldSuppressKeyboardEvent(e)) {\n      return;\n    }\n\n    if (activeElement && !shouldPaste) {\n      const arrowKeyCodes = ['ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowBottom'];\n      if (arrowKeyCodes.includes(e.key)) e.preventDefault();\n      keyboardActions(e);\n    } else if (shouldPaste) {\n      handlePaste();\n    }\n  };\n\n  useEventListener('keydown', handleKeyboardEvent);\n  useEventListener('keyup', () => { keyDownCount.current = 0; });\n\n  const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n\n  // TODO: Some strange shit is going on here on first render\n  let width = parseInt(reportLayoutWidth, 10);\n  let height = parseInt(reportLayoutHeight, 10);\n  width = Number.isNaN(width) ? 1 : width;\n  height = Number.isNaN(height) ? 1 : height;\n  const zoomToUse = Number.isNaN(zoom) ? 1 : zoom;\n\n  pageStyles.current = {\n    height: parseFloat((height * zoomToUse).toFixed(1)),\n    width: parseFloat((width * zoomToUse).toFixed(1)),\n  };\n  pageContainerStyles.current = {\n    height,\n    transform: `scale(${zoomToUse})`,\n    transformOrigin: '0 0',\n    width,\n  };\n\n  return (\n    <main // Builder.js\n      className={classNames.mainWrapper}\n    >\n      <DraggableLayer\n        guides={guides}\n        pageRefs={refs.current}\n      />\n      <div\n        ref={viewPortRef}\n        className={classNames.viewport}\n        data-zoom={zoom}\n      >\n        <div\n          className={classNames.canvas}\n        >\n          {pages.map((page, index) => (\n            // TODO: This part can be moved into a different component\n            <Fragment key={page.id}>\n              <PageActions\n                order={page.order}\n                pageID={page.id}\n              />\n              <div\n                key={`page_${page.id}`}\n                ref={refs.current[page.id]}\n                className={classNames.page}\n                data-id={page.id}\n                data-order={page.order}\n                id={`presentation-page-${page.id.toString()}`}\n                style={pageStyles.current}\n              >\n                <Page\n                  guides={guides}\n                  items={page.items}\n                  page={page}\n                  pageIndex={index}\n                  style={pageContainerStyles.current}\n                />\n              </div>\n            </Fragment>\n          ))}\n          <PageAdder />\n        </div>\n      </div>\n      <ZoomControls />\n      {contextMenuProps\n        && (\n          <ContextMenu\n            exceptionalClasses={['contextMenu-button']}\n            height={height}\n            item={findItemById(contextMenuProps.id, pages)}\n            items={findItemsOnPage(contextMenuProps.pageID, pages)}\n            onClickOutside={() => setContextMenuProps(null)}\n            position={contextMenuProps.position}\n            width={width}\n          />\n        )}\n    </main>\n  );\n};\n\nexport default Scene;\n"],"names":["Scene","pages","usePropStore","state","onItemAdd","onItemRemove","onAnEventTrigger","settings","onItemChange","activeElement","useBuilderStore","contextMenuProps","isRightPanelOpen","setActiveElement","setContextMenuProps","setIsRightPanelOpen","zoom","useState","itemToPaste","setItemToPaste","lastScrollPosition","pageStyles","useRef","pageContainerStyles","viewPortRef","refs","reduce","acc","curr","id","createRef","useEffect","forEach","page","current","isMultipleItemSelected","length","keyDownCount","guides","useMemo","_pageGuides","pageRef","getBoundingClientRect","height","left","top","width","boundingBox","x","calculateGuidePositions","map","value","y","items","item","scrollTop","foundItem","findItemById","selectedItems","useActiveElement","moveItemWithKeyboard","event","direction","preventDefault","isLocked","selectNextOrPrevElement","deletedItem","referenceItem","find","_page","pageID","currentIndex","findIndex","shiftKey","onItemRemoveFromPage","e","itemType","handlePaste","itemID","generateId","getMostVisiblePage","offset","keyboardActions","key","metaKey","movementValue","shouldSuppressKeyboardEvent","EVENT_IGNORED_ROLES","some","role","target","closest","handleKeyboardEvent","shouldPaste","arrowKeyCodes","includes","useEventListener","reportLayoutHeight","reportLayoutWidth","parseInt","Number","isNaN","zoomToUse","parseFloat","toFixed","transform","transformOrigin","_jsxs","classNames","_jsx","index","Fragment","order","toString","findItemsOnPage","position"],"mappings":"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"}
+{"version":3,"file":"Scene.js","sources":["../../../../src/components/Builder/Scene.js"],"sourcesContent":["/* eslint-disable complexity */\nimport {\n  createRef,\n  Fragment,\n  useEffect,\n  useRef,\n} from 'react';\nimport * as classNames from '../../constants/classNames';\nimport ContextMenu from './ContextMenu';\nimport PageActions from './PageActions';\nimport PageAdder from './PageAdder';\nimport ZoomControls from './ZoomControls';\nimport SelectionBox from './SelectionBox';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport Page from './Page';\nimport {\n  calculateGuidePositions,\n  findItemById,\n  findItemsOnPage,\n} from '../../utils/functions';\nimport DraggableLayer from './DraggableLayer';\nimport useKeyboardActions from '../../utils/useKeyboardActions';\nimport useMarqueeSelection from '../../utils/useMarqueeSelection';\n\nconst Scene = () => {\n  const pages = usePropStore(state => state.pages);\n  const settings = usePropStore(state => state.settings);\n  const contextMenuProps = useBuilderStore(state => state.contextMenuProps);\n  const setContextMenuProps = useBuilderStore(state => state.setContextMenuProps);\n  const setGuides = useBuilderStore(state => state.setGuides);\n  const zoom = useBuilderStore(state => state.zoom);\n  const lastScrollPosition = useBuilderStore(state => state.lastScrollPosition);\n\n  const pageStyles = useRef({});\n  const pageContainerStyles = useRef({});\n  const viewPortRef = useRef({});\n  const canvasRef = useRef(null);\n\n  /* Page Refs */\n  const refs = useRef(pages.reduce((acc, curr) => {\n    acc[curr.id] = createRef(null);\n    return acc;\n  }, {}));\n\n  // Custom hooks\n  useKeyboardActions();\n  const { selectionBox, selectionPageId } = useMarqueeSelection(canvasRef);\n\n  // Update refs when new pages are added\n  useEffect(() => {\n    pages.forEach(page => {\n      if (!refs.current[page.id]) {\n        refs.current[page.id] = createRef(null);\n      }\n    });\n  }, [pages]);\n\n  // Calculate guides for snap functionality\n  useEffect(() => {\n    setGuides(pages.reduce((acc, page) => {\n      const _pageGuides = {};\n      const pageRef = refs.current[page.id];\n      if (pageRef && pageRef.current) {\n        const {\n          height, left, top, width,\n        } = pageRef.current.getBoundingClientRect();\n        const boundingBox = {\n          height, left, top, width,\n        };\n        _pageGuides.boundingBox = {\n          x: calculateGuidePositions(boundingBox, 'x').map(value => value - boundingBox.left),\n          y: calculateGuidePositions(boundingBox, 'y').map(value => value - boundingBox.top),\n        };\n        page.items.forEach(item => {\n          _pageGuides[item.id] = {\n            x: calculateGuidePositions(item, 'x', zoom),\n            y: calculateGuidePositions(item, 'y', zoom),\n          };\n        });\n      }\n      acc[page.id] = _pageGuides;\n      return acc;\n    }, {}));\n  }, [pages, zoom, setGuides]);\n\n  // Restore scroll position after mode change\n  useEffect(() => {\n    if (viewPortRef.current) {\n      viewPortRef.current.scrollTop = lastScrollPosition;\n    }\n  }, [lastScrollPosition]);\n\n  const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n\n  // TODO: Some strange shit is going on here on first render\n  let width = parseInt(reportLayoutWidth, 10);\n  let height = parseInt(reportLayoutHeight, 10);\n  width = Number.isNaN(width) ? 1 : width;\n  height = Number.isNaN(height) ? 1 : height;\n  const zoomToUse = Number.isNaN(zoom) ? 1 : zoom;\n\n  pageStyles.current = {\n    height: parseFloat((height * zoomToUse).toFixed(1)),\n    width: parseFloat((width * zoomToUse).toFixed(1)),\n  };\n  pageContainerStyles.current = {\n    height,\n    transform: `scale(${zoomToUse})`,\n    transformOrigin: '0 0',\n    width,\n  };\n\n  return (\n    <main // Builder.js\n      className={classNames.mainWrapper}\n    >\n      <DraggableLayer\n        pageRefs={refs.current}\n      />\n      <div\n        ref={viewPortRef}\n        className={classNames.viewport}\n        data-zoom={zoom}\n      >\n        <div\n          ref={canvasRef}\n          className={classNames.canvas}\n        >\n          {pages.map((page, index) => (\n            // TODO: This part can be moved into a different component\n            <Fragment key={page.id}>\n              <PageActions\n                order={page.order}\n                pageID={page.id}\n              />\n              <div\n                key={`page_${page.id}`}\n                ref={refs.current[page.id]}\n                className={classNames.page}\n                data-id={page.id}\n                data-order={page.order}\n                id={`presentation-page-${page.id.toString()}`}\n                style={{ ...pageStyles.current, position: 'relative' }}\n              >\n                <Page\n                  items={page.items}\n                  page={page}\n                  pageIndex={index}\n                  style={pageContainerStyles.current}\n                />\n                {selectionPageId === page.id && selectionBox && (\n                  <SelectionBox selectionBox={selectionBox} />\n                )}\n              </div>\n            </Fragment>\n          ))}\n          <PageAdder />\n        </div>\n      </div>\n      <ZoomControls />\n      {contextMenuProps\n        && (\n          <ContextMenu\n            exceptionalClasses={['contextMenu-button']}\n            height={height}\n            item={findItemById(contextMenuProps.id, pages)}\n            items={findItemsOnPage(contextMenuProps.pageID, pages)}\n            onClickOutside={() => setContextMenuProps(null)}\n            position={contextMenuProps.position}\n            width={width}\n          />\n        )}\n    </main>\n  );\n};\n\nexport default Scene;\n"],"names":["Scene","pages","usePropStore","state","settings","contextMenuProps","useBuilderStore","setContextMenuProps","setGuides","zoom","lastScrollPosition","pageStyles","useRef","pageContainerStyles","viewPortRef","canvasRef","refs","reduce","acc","curr","id","createRef","useKeyboardActions","useMarqueeSelection","selectionBox","selectionPageId","useEffect","forEach","page","current","_pageGuides","pageRef","getBoundingClientRect","height","left","top","width","boundingBox","x","calculateGuidePositions","map","value","y","items","item","scrollTop","reportLayoutHeight","reportLayoutWidth","parseInt","Number","isNaN","zoomToUse","parseFloat","toFixed","transform","transformOrigin","_jsxs","classNames","_jsx","index","Fragment","order","toString","position","findItemById","findItemsOnPage","pageID"],"mappings":"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"}

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var PropTypes = require('prop-types');
+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 SelectionBox = function SelectionBox(_ref) {
+  var selectionBox = _ref.selectionBox;
+  var endX = selectionBox.endX,
+      endY = selectionBox.endY,
+      startX = selectionBox.startX,
+      startY = selectionBox.startY;
+  var left = Math.min(startX, endX);
+  var top = Math.min(startY, endY);
+  var width = Math.abs(endX - startX);
+  var height = Math.abs(endY - startY);
+  var style = {
+    backgroundColor: '#0099FF4A',
+    border: '2px solid #0066C3',
+    borderRadius: '2px',
+    height: height,
+    left: left,
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: top,
+    width: width,
+    zIndex: 100000
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "selection-box",
+    style: style
+  });
+};
+
+SelectionBox.propTypes = {
+  selectionBox: PropTypes__default['default'].shape({
+    endX: PropTypes__default['default'].number,
+    endY: PropTypes__default['default'].number,
+    startX: PropTypes__default['default'].number,
+    startY: PropTypes__default['default'].number
+  })
+};
+
+module.exports = SelectionBox;
+//# sourceMappingURL=SelectionBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionBox.js","sources":["../../../../src/components/Builder/SelectionBox.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst SelectionBox = ({ selectionBox }) => {\n  const {\n    endX, endY, startX, startY,\n  } = selectionBox;\n\n  const left = Math.min(startX, endX);\n  const top = Math.min(startY, endY);\n  const width = Math.abs(endX - startX);\n  const height = Math.abs(endY - startY);\n\n  const style = {\n    backgroundColor: '#0099FF4A',\n    border: '2px solid #0066C3',\n    borderRadius: '2px',\n    height,\n    left,\n    pointerEvents: 'none',\n    position: 'absolute',\n    top,\n    width,\n    zIndex: 100000,\n  };\n\n  return (\n    <div\n      className=\"selection-box\"\n      style={style}\n    />\n  );\n};\n\nSelectionBox.propTypes = {\n  selectionBox: PropTypes.shape({\n    endX: PropTypes.number,\n    endY: PropTypes.number,\n    startX: PropTypes.number,\n    startY: PropTypes.number,\n  }),\n};\n\nexport default SelectionBox;\n"],"names":["SelectionBox","selectionBox","endX","endY","startX","startY","left","Math","min","top","width","abs","height","style","backgroundColor","border","borderRadius","pointerEvents","position","zIndex","_jsx","propTypes","PropTypes","shape","number"],"mappings":";;;;;;;;;IAEMA,YAAY,GAAG,SAAfA,YAAe,OAAsB;AAAA,MAAnBC,YAAmB,QAAnBA,YAAmB;AACzC,MACEC,IADF,GAEID,YAFJ,CACEC,IADF;AAAA,MACQC,IADR,GAEIF,YAFJ,CACQE,IADR;AAAA,MACcC,MADd,GAEIH,YAFJ,CACcG,MADd;AAAA,MACsBC,MADtB,GAEIJ,YAFJ,CACsBI,MADtB;AAIA,MAAMC,IAAI,GAAGC,IAAI,CAACC,GAAL,CAASJ,MAAT,EAAiBF,IAAjB,CAAb;AACA,MAAMO,GAAG,GAAGF,IAAI,CAACC,GAAL,CAASH,MAAT,EAAiBF,IAAjB,CAAZ;AACA,MAAMO,KAAK,GAAGH,IAAI,CAACI,GAAL,CAAST,IAAI,GAAGE,MAAhB,CAAd;AACA,MAAMQ,MAAM,GAAGL,IAAI,CAACI,GAAL,CAASR,IAAI,GAAGE,MAAhB,CAAf;AAEA,MAAMQ,KAAK,GAAG;AACZC,IAAAA,eAAe,EAAE,WADL;AAEZC,IAAAA,MAAM,EAAE,mBAFI;AAGZC,IAAAA,YAAY,EAAE,KAHF;AAIZJ,IAAAA,MAAM,EAANA,MAJY;AAKZN,IAAAA,IAAI,EAAJA,IALY;AAMZW,IAAAA,aAAa,EAAE,MANH;AAOZC,IAAAA,QAAQ,EAAE,UAPE;AAQZT,IAAAA,GAAG,EAAHA,GARY;AASZC,IAAAA,KAAK,EAALA,KATY;AAUZS,IAAAA,MAAM,EAAE;AAVI,GAAd;AAaA,sBACEC;AACE,IAAA,SAAS,EAAC,eADZ;AAEE,IAAA,KAAK,EAAEP;AAFT,IADF;AAMD;;AAEDb,YAAY,CAACqB,SAAb,GAAyB;AACvBpB,EAAAA,YAAY,EAAEqB,6BAAS,CAACC,KAAV,CAAgB;AAC5BrB,IAAAA,IAAI,EAAEoB,6BAAS,CAACE,MADY;AAE5BrB,IAAAA,IAAI,EAAEmB,6BAAS,CAACE,MAFY;AAG5BpB,IAAAA,MAAM,EAAEkB,6BAAS,CAACE,MAHU;AAI5BnB,IAAAA,MAAM,EAAEiB,6BAAS,CAACE;AAJU,GAAhB;AADS,CAAzB;;;;"}

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

@@ -1,5 +1,6 @@
 'use strict';
 
+require('core-js/modules/es.array.concat.js');
 require('core-js/modules/es.array.map.js');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -18,46 +19,40 @@ var Tabs = function Tabs(_ref) {
   var activeTab = BuilderContext.useBuilderStore(function (state) {
     return state.activeTab;
   });
-  var isLeftPanelOpen = BuilderContext.useBuilderStore(function (state) {
-    return state.isLeftPanelOpen;
-  });
-  var isRightPanelOpen = BuilderContext.useBuilderStore(function (state) {
-    return state.isRightPanelOpen;
-  });
   var setActiveTab = BuilderContext.useBuilderStore(function (state) {
     return state.setActiveTab;
   });
   var onAnEventTrigger = PropContext.usePropStore(function (state) {
     return state.onAnEventTrigger;
   });
-  var setCurrentTab = React.useCallback(function (index, tab) {
-    setActiveTab(panel, index);
-    onAnEventTrigger('settingTabChanged', tab);
-  }, [setActiveTab, onAnEventTrigger, panel]);
+  var setCurrentTab = React.useCallback(function (index) {
+    return function () {
+      setActiveTab(panel, index);
+      onAnEventTrigger('settingTabChanged', tabs[index]);
+    };
+  }, [setActiveTab, onAnEventTrigger, panel, tabs]);
   return tabs.length > 1 && /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "toolTabs d-flex p-relative ".concat(panel),
     "data-tab": tabs.length,
     children: [tabs.map(function (tab, index) {
-      var checked = activeTab[panel] === index && (panel === 'left' && isLeftPanelOpen || panel === 'right' && isRightPanelOpen);
+      var inputId = "tabs-".concat(panel, "-").concat(index);
       return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-          checked: checked,
-          className: "toolTabs-tab",
-          id: tab,
-          name: "tabs",
-          onChange: function onChange() {
-            return setCurrentTab(index, tab);
-          },
+          checked: activeTab[panel] === index,
+          className: "toolTabs-tab ".concat(panel),
+          id: inputId,
+          name: "tabs-".concat(panel),
+          onChange: setCurrentTab(index),
           "tab-count": index,
           type: "radio"
         }), /*#__PURE__*/jsxRuntime.jsx("label", {
           className: "t-normal js-tabLabel",
-          htmlFor: tab,
+          htmlFor: inputId,
           children: /*#__PURE__*/jsxRuntime.jsx("span", {
             children: tab
           })
         })]
-      }, tab);
+      }, inputId);
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "toolTabs-indicator p-absolute",
       "data-tab": tabs.length

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Builder/Tabs.js"],"sourcesContent":["import { Fragment, memo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst Tabs = ({ panel, tabs = [] }) => {\n  const activeTab = useBuilderStore(state => state.activeTab);\n  const isLeftPanelOpen = useBuilderStore(state => state.isLeftPanelOpen);\n  const isRightPanelOpen = useBuilderStore(state => state.isRightPanelOpen);\n  const setActiveTab = useBuilderStore(state => state.setActiveTab);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n\n  const setCurrentTab = useCallback((index, tab) => {\n    setActiveTab(panel, index);\n    onAnEventTrigger('settingTabChanged', tab);\n  }, [setActiveTab, onAnEventTrigger, panel]);\n\n  return (\n    tabs.length > 1 && (\n      <div\n        className={`toolTabs d-flex p-relative ${panel}`}\n        data-tab={tabs.length}\n      >\n        { tabs.map((tab, index) => {\n          const checked = activeTab[panel] === index\n            && ((panel === 'left' && isLeftPanelOpen) || (panel === 'right' && isRightPanelOpen));\n          return (\n            <Fragment key={tab}>\n              <input\n                checked={checked}\n                className=\"toolTabs-tab\"\n                id={tab}\n                name=\"tabs\"\n                onChange={() => setCurrentTab(index, tab)}\n                tab-count={index}\n                type=\"radio\"\n              />\n              <label\n                className=\"t-normal js-tabLabel\"\n                htmlFor={tab}\n              >\n                <span>\n                  {tab}\n                </span>\n              </label>\n            </Fragment>\n          );\n        })}\n        <div\n          className=\"toolTabs-indicator p-absolute\"\n          data-tab={tabs.length}\n        />\n      </div>\n    )\n  );\n};\n\nTabs.propTypes = {\n  panel: PropTypes.string.isRequired,\n  tabs: PropTypes.arrayOf(PropTypes.string),\n};\n\nexport default memo(Tabs);\n"],"names":["Tabs","panel","tabs","activeTab","useBuilderStore","state","isLeftPanelOpen","isRightPanelOpen","setActiveTab","onAnEventTrigger","usePropStore","setCurrentTab","useCallback","index","tab","length","_jsxs","map","checked","Fragment","_jsx","propTypes","PropTypes","string","isRequired","arrayOf","memo"],"mappings":";;;;;;;;;;;;;AAKA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAA0B;AAAA,MAAvBC,KAAuB,QAAvBA,KAAuB;AAAA,uBAAhBC,IAAgB;AAAA,MAAhBA,IAAgB,0BAAT,EAAS;AACrC,MAAMC,SAAS,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,SAAV;AAAA,GAAN,CAAjC;AACA,MAAMG,eAAe,GAAGF,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,eAAV;AAAA,GAAN,CAAvC;AACA,MAAMC,gBAAgB,GAAGH,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACE,gBAAV;AAAA,GAAN,CAAxC;AACA,MAAMC,YAAY,GAAGJ,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACG,YAAV;AAAA,GAAN,CAApC;AACA,MAAMC,gBAAgB,GAAGC,wBAAY,CAAC,UAAAL,KAAK;AAAA,WAAIA,KAAK,CAACI,gBAAV;AAAA,GAAN,CAArC;AAEA,MAAME,aAAa,GAAGC,iBAAW,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAChDN,IAAAA,YAAY,CAACP,KAAD,EAAQY,KAAR,CAAZ;AACAJ,IAAAA,gBAAgB,CAAC,mBAAD,EAAsBK,GAAtB,CAAhB;AACD,GAHgC,EAG9B,CAACN,YAAD,EAAeC,gBAAf,EAAiCR,KAAjC,CAH8B,CAAjC;AAKA,SACEC,IAAI,CAACa,MAAL,GAAc,CAAd,iBACEC;AACE,IAAA,SAAS,uCAAgCf,KAAhC,CADX;AAEE,gBAAUC,IAAI,CAACa,MAFjB;AAAA,eAIIb,IAAI,CAACe,GAAL,CAAS,UAACH,GAAD,EAAMD,KAAN,EAAgB;AACzB,UAAMK,OAAO,GAAGf,SAAS,CAACF,KAAD,CAAT,KAAqBY,KAArB,KACTZ,KAAK,KAAK,MAAV,IAAoBK,eAArB,IAA0CL,KAAK,KAAK,OAAV,IAAqBM,gBADrD,CAAhB;AAEA,0BACES,gBAACG,cAAD;AAAA,gCACEC;AACE,UAAA,OAAO,EAAEF,OADX;AAEE,UAAA,SAAS,EAAC,cAFZ;AAGE,UAAA,EAAE,EAAEJ,GAHN;AAIE,UAAA,IAAI,EAAC,MAJP;AAKE,UAAA,QAAQ,EAAE;AAAA,mBAAMH,aAAa,CAACE,KAAD,EAAQC,GAAR,CAAnB;AAAA,WALZ;AAME,uBAAWD,KANb;AAOE,UAAA,IAAI,EAAC;AAPP,UADF,eAUEO;AACE,UAAA,SAAS,EAAC,sBADZ;AAEE,UAAA,OAAO,EAAEN,GAFX;AAAA,iCAIEM;AAAA,sBACGN;AADH;AAJF,UAVF;AAAA,SAAeA,GAAf,CADF;AAqBD,KAxBC,CAJJ,eA6BEM;AACE,MAAA,SAAS,EAAC,+BADZ;AAEE,kBAAUlB,IAAI,CAACa;AAFjB,MA7BF;AAAA,IAFJ;AAsCD,CAlDD;;AAoDAf,IAAI,CAACqB,SAAL,GAAiB;AACfpB,EAAAA,KAAK,EAAEqB,6BAAS,CAACC,MAAV,CAAiBC,UADT;AAEftB,EAAAA,IAAI,EAAEoB,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACC,MAA5B;AAFS,CAAjB;AAKA,0BAAeG,UAAI,CAAC1B,IAAD,CAAnB;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Builder/Tabs.js"],"sourcesContent":["import { Fragment, memo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst Tabs = ({ panel, tabs = [] }) => {\n  const activeTab = useBuilderStore(state => state.activeTab);\n  const setActiveTab = useBuilderStore(state => state.setActiveTab);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n\n  const setCurrentTab = useCallback(index => () => {\n    setActiveTab(panel, index);\n    onAnEventTrigger('settingTabChanged', tabs[index]);\n  }, [setActiveTab, onAnEventTrigger, panel, tabs]);\n\n  return (\n    tabs.length > 1 && (\n      <div\n        className={`toolTabs d-flex p-relative ${panel}`}\n        data-tab={tabs.length}\n      >\n        {tabs.map((tab, index) => {\n          const inputId = `tabs-${panel}-${index}`;\n          return (\n            <Fragment key={inputId}>\n              <input\n                checked={activeTab[panel] === index}\n                className={`toolTabs-tab ${panel}`}\n                id={inputId}\n                name={`tabs-${panel}`}\n                onChange={setCurrentTab(index)}\n                tab-count={index}\n                type=\"radio\"\n              />\n              <label\n                className=\"t-normal js-tabLabel\"\n                htmlFor={inputId}\n              >\n                <span>\n                  {tab}\n                </span>\n              </label>\n            </Fragment>\n          );\n        })}\n        <div\n          className=\"toolTabs-indicator p-absolute\"\n          data-tab={tabs.length}\n        />\n      </div>\n    )\n  );\n};\n\nTabs.propTypes = {\n  panel: PropTypes.string.isRequired,\n  tabs: PropTypes.arrayOf(PropTypes.string),\n};\n\nexport default memo(Tabs);\n"],"names":["Tabs","panel","tabs","activeTab","useBuilderStore","state","setActiveTab","onAnEventTrigger","usePropStore","setCurrentTab","useCallback","index","length","_jsxs","map","tab","inputId","Fragment","_jsx","propTypes","PropTypes","string","isRequired","arrayOf","memo"],"mappings":";;;;;;;;;;;;;;AAKA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAA0B;AAAA,MAAvBC,KAAuB,QAAvBA,KAAuB;AAAA,uBAAhBC,IAAgB;AAAA,MAAhBA,IAAgB,0BAAT,EAAS;AACrC,MAAMC,SAAS,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,SAAV;AAAA,GAAN,CAAjC;AACA,MAAMG,YAAY,GAAGF,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACC,YAAV;AAAA,GAAN,CAApC;AACA,MAAMC,gBAAgB,GAAGC,wBAAY,CAAC,UAAAH,KAAK;AAAA,WAAIA,KAAK,CAACE,gBAAV;AAAA,GAAN,CAArC;AAEA,MAAME,aAAa,GAAGC,iBAAW,CAAC,UAAAC,KAAK;AAAA,WAAI,YAAM;AAC/CL,MAAAA,YAAY,CAACL,KAAD,EAAQU,KAAR,CAAZ;AACAJ,MAAAA,gBAAgB,CAAC,mBAAD,EAAsBL,IAAI,CAACS,KAAD,CAA1B,CAAhB;AACD,KAHsC;AAAA,GAAN,EAG9B,CAACL,YAAD,EAAeC,gBAAf,EAAiCN,KAAjC,EAAwCC,IAAxC,CAH8B,CAAjC;AAKA,SACEA,IAAI,CAACU,MAAL,GAAc,CAAd,iBACEC;AACE,IAAA,SAAS,uCAAgCZ,KAAhC,CADX;AAEE,gBAAUC,IAAI,CAACU,MAFjB;AAAA,eAIGV,IAAI,CAACY,GAAL,CAAS,UAACC,GAAD,EAAMJ,KAAN,EAAgB;AACxB,UAAMK,OAAO,kBAAWf,KAAX,cAAoBU,KAApB,CAAb;AACA,0BACEE,gBAACI,cAAD;AAAA,gCACEC;AACE,UAAA,OAAO,EAAEf,SAAS,CAACF,KAAD,CAAT,KAAqBU,KADhC;AAEE,UAAA,SAAS,yBAAkBV,KAAlB,CAFX;AAGE,UAAA,EAAE,EAAEe,OAHN;AAIE,UAAA,IAAI,iBAAUf,KAAV,CAJN;AAKE,UAAA,QAAQ,EAAEQ,aAAa,CAACE,KAAD,CALzB;AAME,uBAAWA,KANb;AAOE,UAAA,IAAI,EAAC;AAPP,UADF,eAUEO;AACE,UAAA,SAAS,EAAC,sBADZ;AAEE,UAAA,OAAO,EAAEF,OAFX;AAAA,iCAIEE;AAAA,sBACGH;AADH;AAJF,UAVF;AAAA,SAAeC,OAAf,CADF;AAqBD,KAvBA,CAJH,eA4BEE;AACE,MAAA,SAAS,EAAC,+BADZ;AAEE,kBAAUhB,IAAI,CAACU;AAFjB,MA5BF;AAAA,IAFJ;AAqCD,CA/CD;;AAiDAZ,IAAI,CAACmB,SAAL,GAAiB;AACflB,EAAAA,KAAK,EAAEmB,6BAAS,CAACC,MAAV,CAAiBC,UADT;AAEfpB,EAAAA,IAAI,EAAEkB,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACC,MAA5B;AAFS,CAAjB;AAKA,0BAAeG,UAAI,CAACxB,IAAD,CAAnB;;;;"}