@jotforminc/dnd-builder 3.4.3 → 3.4.5

package/lib/cjs/constants/eventIgnoredRoles.js.map

@@ -1 +1 @@
-{"version":3,"file":"eventIgnoredRoles.js","sources":["../../../src/constants/eventIgnoredRoles.js"],"sourcesContent":["/**\n * If an HTML Tag has its role attribute set as one of the\n * members of this array, events that originate from it\n * should be ignored by event handlers.\n */\nexport const EVENT_IGNORED_ROLES = [\n  'dialog',\n];\n"],"names":["EVENT_IGNORED_ROLES"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;IACaA,mBAAmB,GAAG,CACjC,QADiC;;;;"}
+{"version":3,"file":"eventIgnoredRoles.js","sources":["../../../src/constants/eventIgnoredRoles.js"],"sourcesContent":["/**\n * If an HTML Tag has its role attribute set as one of the\n * members of this array, events that originate from it\n * should be ignored by event handlers.\n */\nexport const EVENT_IGNORED_ROLES = [\n  'dialog',\n];\n\nexport const EVENT_IGNORED_FIELDS = [\n  'combobox',\n  'listbox',\n  'input',\n  'textarea',\n  'select',\n  '[contenteditable=\"true\"]',\n  '[role=\"combobox\"]',\n  '[role=\"listbox\"]',\n  '[aria-haspopup=\"listbox\"]',\n  'input[type=\"color\"]',\n  'input[type=\"number\"]',\n];\n"],"names":["EVENT_IGNORED_ROLES","EVENT_IGNORED_FIELDS"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;IACaA,mBAAmB,GAAG,CACjC,QADiC;IAItBC,oBAAoB,GAAG,CAClC,UADkC,EAElC,SAFkC,EAGlC,OAHkC,EAIlC,UAJkC,EAKlC,QALkC,EAMlC,0BANkC,EAOlC,mBAPkC,EAQlC,kBARkC,EASlC,2BATkC,EAUlC,qBAVkC,EAWlC,sBAXkC;;;;;"}

package/lib/cjs/contexts/BuilderContext.js

@@ -46,6 +46,7 @@ var builderStore = function builderStore(props) {
         left: 0,
         right: 0
       },
+      clickOutsideIgnoreSelectors: props.clickOutsideIgnoreSelectors || [],
       contextMenuProps: props.contextMenuProps || false,
       editedElement: props.editedElement || 'l_layout',
       guides: {},

package/lib/cjs/contexts/BuilderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuilderContext.js","sources":["../../../src/contexts/BuilderContext.js"],"sourcesContent":["import { createContext, useContext, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { createStore, useStore } from 'zustand';\n\nconst builderStore = props => {\n  return createStore((set, get) => ({\n    activeElements: props.activeElement || [],\n    activeTab: props.activeTab || { left: 0, right: 0 },\n    contextMenuProps: props.contextMenuProps || false,\n    editedElement: props.editedElement || 'l_layout',\n    guides: {},\n    isAllSlidesPanelOpen: props.isAllSlidesPanelOpen || false,\n    isLeftPanelOpen: props.isLeftPanelOpen || false,\n    isResize: false,\n    isRightPanelOpen: props.isRightPanelOpen || false,\n    isSlidesPanelOpen: props.isSlidesPanelOpen || false,\n    isTextEditorOpen: props.isTextEditorOpen || false,\n    lastScrollPosition: props.lastScrollPosition || 0,\n    matches: {},\n    onRightPanelsToggled: props.onRightPanelsToggled || (() => {}),\n    resetActiveElements: props.resetActiveElements || (() => {\n      set({ activeElements: [], editedElement: 'l_layout' });\n    }),\n    setActiveElements: props.setActiveElements || ((itemID, edit = true, replace = true) => {\n      const { activeElements } = get();\n      set({\n        activeElements: replace ? [itemID] : [...activeElements, itemID],\n        ...edit ? { editedElement: !itemID ? 'l_layout' : `i_${itemID}` } : {},\n      });\n    }),\n    setActiveElementsSelection: props.setActiveElementsSelection || (itemIDs => {\n      if (!itemIDs || itemIDs.length === 0) {\n        set({ activeElements: [], editedElement: 'l_layout' });\n      } else if (itemIDs.length === 1) {\n        set({\n          activeElements: itemIDs,\n          editedElement: `i_${itemIDs[0]}`,\n        });\n      } else {\n        set({ activeElements: itemIDs });\n      }\n    }),\n    setActiveTab: props.setActiveTab || ((panel, tabIndex) => {\n      const { activeTab } = get();\n      set({ activeTab: { ...activeTab, [panel]: tabIndex } });\n    }),\n    setContextMenuProps: status => {\n      set({ contextMenuProps: status });\n    },\n    setEditedElement: id => {\n      set({ editedElement: id });\n    },\n    setGuides: guides => {\n      set({ guides });\n    },\n    setIsAllSlidesPanelOpen: status => {\n      set({ isAllSlidesPanelOpen: status });\n    },\n    setIsLeftPanelOpen: props.setIsLeftPanelOpen || (status => {\n      const { isEnoughCanvasSize } = get();\n      set({\n        isLeftPanelOpen: status,\n        ...status && !isEnoughCanvasSize && { isRightPanelOpen: false },\n      });\n    }),\n    setIsResize: status => {\n      set({ isResize: status });\n    },\n    setIsRightPanelOpen: props.setIsRightPanelOpen || (status => {\n      const { isEnoughCanvasSize, onRightPanelsToggled } = get();\n      set({\n        isRightPanelOpen: status,\n        ...status && !isEnoughCanvasSize && { isLeftPanelOpen: false },\n        ...status && { isSlidesPanelOpen: false },\n      });\n      onRightPanelsToggled(status);\n    }),\n    setIsSlidesPanelOpen: props.setIsSlidesPanelOpen || (status => {\n      const { isEnoughCanvasSize, onRightPanelsToggled } = get();\n      set({\n        isSlidesPanelOpen: status,\n        ...status && !isEnoughCanvasSize && { isLeftPanelOpen: false },\n        ...status && { isRightPanelOpen: false },\n      });\n      onRightPanelsToggled(status);\n    }),\n    setIsTextEditorOpen: status => {\n      set({ isTextEditorOpen: status });\n    },\n    setMatches: matches => {\n      set({ matches });\n    },\n    setZoom: (zoom, layoutWidth) => {\n      set({ zoom });\n      if (layoutWidth) {\n        const { clientWidth: paneWidth } = document.querySelector('.jfReport-pane .toolItemWrapper');\n        const sceneWidth = parseInt(layoutWidth, 10) * zoom;\n        if (window.innerWidth - sceneWidth + 100 > (paneWidth * 2)) {\n          set({ isEnoughCanvasSize: true });\n        } else {\n          set({\n            isEnoughCanvasSize: false,\n            isLeftPanelOpen: false,\n          });\n        }\n      }\n    },\n    shouldShowRightPanelInitially: props.shouldShowRightPanelInitially ?? true,\n    zoom: 1,\n  }));\n};\n\nconst BuilderContext = createContext(null);\n\nexport const BuilderProvider = ({ children, value, ...props }) => {\n  const storeRef = useRef();\n  if (!storeRef.current) {\n    storeRef.current = builderStore(props);\n  }\n\n  return (\n    <BuilderContext.Provider value={storeRef.current}>\n      {children}\n    </BuilderContext.Provider>\n  );\n};\n\nBuilderProvider.propTypes = {\n  children: PropTypes.any,\n  value: PropTypes.object,\n};\n\nexport const BuilderConsumer = BuilderContext.Consumer;\n\nexport const useBuilderStore = selector => {\n  const context = useContext(BuilderContext);\n  if (!context) {\n    throw new Error('useBuilderStore must be used with BuilderProvider!');\n  }\n  return useStore(context, selector);\n};\n"],"names":["builderStore","props","createStore","set","get","activeElements","activeElement","activeTab","left","right","contextMenuProps","editedElement","guides","isAllSlidesPanelOpen","isLeftPanelOpen","isResize","isRightPanelOpen","isSlidesPanelOpen","isTextEditorOpen","lastScrollPosition","matches","onRightPanelsToggled","resetActiveElements","setActiveElements","itemID","edit","replace","setActiveElementsSelection","itemIDs","length","setActiveTab","panel","tabIndex","setContextMenuProps","status","setEditedElement","id","setGuides","setIsAllSlidesPanelOpen","setIsLeftPanelOpen","isEnoughCanvasSize","setIsResize","setIsRightPanelOpen","setIsSlidesPanelOpen","setIsTextEditorOpen","setMatches","setZoom","zoom","layoutWidth","document","querySelector","paneWidth","clientWidth","sceneWidth","parseInt","window","innerWidth","shouldShowRightPanelInitially","BuilderContext","createContext","BuilderProvider","children","value","storeRef","useRef","current","_jsx","propTypes","PropTypes","any","object","Consumer","useBuilderStore","selector","context","useContext","Error","useStore"],"mappings":"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"}
+{"version":3,"file":"BuilderContext.js","sources":["../../../src/contexts/BuilderContext.js"],"sourcesContent":["/* eslint-disable complexity */\nimport { createContext, useContext, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { createStore, useStore } from 'zustand';\n\nconst builderStore = props => {\n  return createStore((set, get) => ({\n    activeElements: props.activeElement || [],\n    activeTab: props.activeTab || { left: 0, right: 0 },\n    clickOutsideIgnoreSelectors: props.clickOutsideIgnoreSelectors || [],\n    contextMenuProps: props.contextMenuProps || false,\n    editedElement: props.editedElement || 'l_layout',\n    guides: {},\n    isAllSlidesPanelOpen: props.isAllSlidesPanelOpen || false,\n    isLeftPanelOpen: props.isLeftPanelOpen || false,\n    isResize: false,\n    isRightPanelOpen: props.isRightPanelOpen || false,\n    isSlidesPanelOpen: props.isSlidesPanelOpen || false,\n    isTextEditorOpen: props.isTextEditorOpen || false,\n    lastScrollPosition: props.lastScrollPosition || 0,\n    matches: {},\n    onRightPanelsToggled: props.onRightPanelsToggled || (() => {}),\n    resetActiveElements: props.resetActiveElements || (() => {\n      set({ activeElements: [], editedElement: 'l_layout' });\n    }),\n    setActiveElements: props.setActiveElements || ((itemID, edit = true, replace = true) => {\n      const { activeElements } = get();\n      set({\n        activeElements: replace ? [itemID] : [...activeElements, itemID],\n        ...edit ? { editedElement: !itemID ? 'l_layout' : `i_${itemID}` } : {},\n      });\n    }),\n    setActiveElementsSelection: props.setActiveElementsSelection || (itemIDs => {\n      if (!itemIDs || itemIDs.length === 0) {\n        set({ activeElements: [], editedElement: 'l_layout' });\n      } else if (itemIDs.length === 1) {\n        set({\n          activeElements: itemIDs,\n          editedElement: `i_${itemIDs[0]}`,\n        });\n      } else {\n        set({ activeElements: itemIDs });\n      }\n    }),\n    setActiveTab: props.setActiveTab || ((panel, tabIndex) => {\n      const { activeTab } = get();\n      set({ activeTab: { ...activeTab, [panel]: tabIndex } });\n    }),\n    setContextMenuProps: status => {\n      set({ contextMenuProps: status });\n    },\n    setEditedElement: id => {\n      set({ editedElement: id });\n    },\n    setGuides: guides => {\n      set({ guides });\n    },\n    setIsAllSlidesPanelOpen: status => {\n      set({ isAllSlidesPanelOpen: status });\n    },\n    setIsLeftPanelOpen: props.setIsLeftPanelOpen || (status => {\n      const { isEnoughCanvasSize } = get();\n      set({\n        isLeftPanelOpen: status,\n        ...status && !isEnoughCanvasSize && { isRightPanelOpen: false },\n      });\n    }),\n    setIsResize: status => {\n      set({ isResize: status });\n    },\n    setIsRightPanelOpen: props.setIsRightPanelOpen || (status => {\n      const { isEnoughCanvasSize, onRightPanelsToggled } = get();\n      set({\n        isRightPanelOpen: status,\n        ...status && !isEnoughCanvasSize && { isLeftPanelOpen: false },\n        ...status && { isSlidesPanelOpen: false },\n      });\n      onRightPanelsToggled(status);\n    }),\n    setIsSlidesPanelOpen: props.setIsSlidesPanelOpen || (status => {\n      const { isEnoughCanvasSize, onRightPanelsToggled } = get();\n      set({\n        isSlidesPanelOpen: status,\n        ...status && !isEnoughCanvasSize && { isLeftPanelOpen: false },\n        ...status && { isRightPanelOpen: false },\n      });\n      onRightPanelsToggled(status);\n    }),\n    setIsTextEditorOpen: status => {\n      set({ isTextEditorOpen: status });\n    },\n    setMatches: matches => {\n      set({ matches });\n    },\n    setZoom: (zoom, layoutWidth) => {\n      set({ zoom });\n      if (layoutWidth) {\n        const { clientWidth: paneWidth } = document.querySelector('.jfReport-pane .toolItemWrapper');\n        const sceneWidth = parseInt(layoutWidth, 10) * zoom;\n        if (window.innerWidth - sceneWidth + 100 > (paneWidth * 2)) {\n          set({ isEnoughCanvasSize: true });\n        } else {\n          set({\n            isEnoughCanvasSize: false,\n            isLeftPanelOpen: false,\n          });\n        }\n      }\n    },\n    shouldShowRightPanelInitially: props.shouldShowRightPanelInitially ?? true,\n    zoom: 1,\n  }));\n};\n\nconst BuilderContext = createContext(null);\n\nexport const BuilderProvider = ({ children, value, ...props }) => {\n  const storeRef = useRef();\n  if (!storeRef.current) {\n    storeRef.current = builderStore(props);\n  }\n\n  return (\n    <BuilderContext.Provider value={storeRef.current}>\n      {children}\n    </BuilderContext.Provider>\n  );\n};\n\nBuilderProvider.propTypes = {\n  children: PropTypes.any,\n  value: PropTypes.object,\n};\n\nexport const BuilderConsumer = BuilderContext.Consumer;\n\nexport const useBuilderStore = selector => {\n  const context = useContext(BuilderContext);\n  if (!context) {\n    throw new Error('useBuilderStore must be used with BuilderProvider!');\n  }\n  return useStore(context, selector);\n};\n"],"names":["builderStore","props","createStore","set","get","activeElements","activeElement","activeTab","left","right","clickOutsideIgnoreSelectors","contextMenuProps","editedElement","guides","isAllSlidesPanelOpen","isLeftPanelOpen","isResize","isRightPanelOpen","isSlidesPanelOpen","isTextEditorOpen","lastScrollPosition","matches","onRightPanelsToggled","resetActiveElements","setActiveElements","itemID","edit","replace","setActiveElementsSelection","itemIDs","length","setActiveTab","panel","tabIndex","setContextMenuProps","status","setEditedElement","id","setGuides","setIsAllSlidesPanelOpen","setIsLeftPanelOpen","isEnoughCanvasSize","setIsResize","setIsRightPanelOpen","setIsSlidesPanelOpen","setIsTextEditorOpen","setMatches","setZoom","zoom","layoutWidth","document","querySelector","paneWidth","clientWidth","sceneWidth","parseInt","window","innerWidth","shouldShowRightPanelInitially","BuilderContext","createContext","BuilderProvider","children","value","storeRef","useRef","current","_jsx","propTypes","PropTypes","any","object","Consumer","useBuilderStore","selector","context","useContext","Error","useStore"],"mappings":"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"}

package/lib/cjs/contexts/Providers.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["children", "lastScrollPosition", "mode", "onRightPanelsToggled", "presentationBarActions", "shouldShowRightPanelInitially", "useFixedPresentationBar"];
+var _excluded = ["children", "clickOutsideIgnoreSelectors", "lastScrollPosition", "mode", "onRightPanelsToggled", "presentationBarActions", "shouldShowRightPanelInitially", "useFixedPresentationBar"];
 
 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; }
 
@@ -24,6 +24,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Providers = function Providers(_ref) {
   var children = _ref.children,
+      clickOutsideIgnoreSelectors = _ref.clickOutsideIgnoreSelectors,
       lastScrollPosition = _ref.lastScrollPosition,
       mode = _ref.mode,
       onRightPanelsToggled = _ref.onRightPanelsToggled,
@@ -33,6 +34,7 @@ var Providers = function Providers(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/jsxRuntime.jsx(BuilderContext.BuilderProvider, {
+    clickOutsideIgnoreSelectors: clickOutsideIgnoreSelectors,
     lastScrollPosition: lastScrollPosition,
     onRightPanelsToggled: onRightPanelsToggled,
     shouldShowRightPanelInitially: shouldShowRightPanelInitially,
@@ -49,6 +51,9 @@ var Providers = function Providers(_ref) {
 Providers.propTypes = {
   children: PropTypes__default['default'].node.isRequired,
 
+  /** CSS selectors ignored by right panel click-outside logic */
+  clickOutsideIgnoreSelectors: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
+
   /** Last scroll position */
   lastScrollPosition: PropTypes__default['default'].number,
 

package/lib/cjs/contexts/Providers.js.map

@@ -1 +1 @@
-{"version":3,"file":"Providers.js","sources":["../../../src/contexts/Providers.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { BuilderProvider } from './BuilderContext';\nimport { PresentationProvider } from './PresentationContext';\nimport { PropProvider } from './PropContext';\n\nconst Providers = ({\n  children,\n  lastScrollPosition,\n  mode,\n  onRightPanelsToggled,\n  presentationBarActions,\n  shouldShowRightPanelInitially,\n  useFixedPresentationBar,\n  ...props\n}) => {\n  return (\n    <BuilderProvider\n      lastScrollPosition={lastScrollPosition}\n      onRightPanelsToggled={onRightPanelsToggled}\n      shouldShowRightPanelInitially={shouldShowRightPanelInitially}\n    >\n      <PropProvider {...props}>\n        {mode === 'customize' ? children : (\n          <PresentationProvider\n            presentationBarActions={presentationBarActions}\n            useFixedPresentationBar={useFixedPresentationBar}\n          >\n            {children}\n          </PresentationProvider>\n        )}\n      </PropProvider>\n    </BuilderProvider>\n  );\n};\n\nProviders.propTypes = {\n  children: PropTypes.node.isRequired,\n  /** Last scroll position */\n  lastScrollPosition: PropTypes.number,\n  /** Mode of the report */\n  mode: PropTypes.oneOf(['customize', 'presentation', 'preview', 'print']),\n  /** Function called when the slides or the right panel is\n   * toggled takes a boolean value to indicate whether or\n   * not the panel is toggled open.\n   */\n  onRightPanelsToggled: PropTypes.func,\n  /** To pass in action definitions that will be rendered as buttons */\n  presentationBarActions: PropTypes.arrayOf(PropTypes.shape({})),\n  /** Flag for fixed action bar */\n  shouldShowRightPanelInitially: PropTypes.bool,\n  /** Flag for whether to show the right panel initially */\n  useFixedPresentationBar: PropTypes.bool,\n};\n\nexport default Providers;\n"],"names":["Providers","children","lastScrollPosition","mode","onRightPanelsToggled","presentationBarActions","shouldShowRightPanelInitially","useFixedPresentationBar","props","_jsx","BuilderProvider","PropProvider","PresentationProvider","propTypes","PropTypes","node","isRequired","number","oneOf","func","arrayOf","shape","bool"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;IAKMA,SAAS,GAAG,SAAZA,SAAY,OASZ;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,kBAOI,QAPJA,kBAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,oBAKI,QALJA,oBAKI;AAAA,MAJJC,sBAII,QAJJA,sBAII;AAAA,MAHJC,6BAGI,QAHJA,6BAGI;AAAA,MAFJC,uBAEI,QAFJA,uBAEI;AAAA,MADDC,KACC;;AACJ,sBACEC,eAACC,8BAAD;AACE,IAAA,kBAAkB,EAAER,kBADtB;AAEE,IAAA,oBAAoB,EAAEE,oBAFxB;AAGE,IAAA,6BAA6B,EAAEE,6BAHjC;AAAA,2BAKEG,eAACE,wBAAD,kCAAkBH,KAAlB;AAAA,gBACGL,IAAI,KAAK,WAAT,GAAuBF,QAAvB,gBACCQ,eAACG,wCAAD;AACE,QAAA,sBAAsB,EAAEP,sBAD1B;AAEE,QAAA,uBAAuB,EAAEE,uBAF3B;AAAA,kBAIGN;AAJH;AAFJ;AALF,IADF;AAkBD;;AAEDD,SAAS,CAACa,SAAV,GAAsB;AACpBZ,EAAAA,QAAQ,EAAEa,6BAAS,CAACC,IAAV,CAAeC,UADL;;AAEpB;AACAd,EAAAA,kBAAkB,EAAEY,6BAAS,CAACG,MAHV;;AAIpB;AACAd,EAAAA,IAAI,EAAEW,6BAAS,CAACI,KAAV,CAAgB,CAAC,WAAD,EAAc,cAAd,EAA8B,SAA9B,EAAyC,OAAzC,CAAhB,CALc;;AAMpB;AACF;AACA;AACA;AACEd,EAAAA,oBAAoB,EAAEU,6BAAS,CAACK,IAVZ;;AAWpB;AACAd,EAAAA,sBAAsB,EAAES,6BAAS,CAACM,OAAV,CAAkBN,6BAAS,CAACO,KAAV,CAAgB,EAAhB,CAAlB,CAZJ;;AAapB;AACAf,EAAAA,6BAA6B,EAAEQ,6BAAS,CAACQ,IAdrB;;AAepB;AACAf,EAAAA,uBAAuB,EAAEO,6BAAS,CAACQ;AAhBf,CAAtB;;;;"}
+{"version":3,"file":"Providers.js","sources":["../../../src/contexts/Providers.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { BuilderProvider } from './BuilderContext';\nimport { PresentationProvider } from './PresentationContext';\nimport { PropProvider } from './PropContext';\n\nconst Providers = ({\n  children,\n  clickOutsideIgnoreSelectors,\n  lastScrollPosition,\n  mode,\n  onRightPanelsToggled,\n  presentationBarActions,\n  shouldShowRightPanelInitially,\n  useFixedPresentationBar,\n  ...props\n}) => {\n  return (\n    <BuilderProvider\n      clickOutsideIgnoreSelectors={clickOutsideIgnoreSelectors}\n      lastScrollPosition={lastScrollPosition}\n      onRightPanelsToggled={onRightPanelsToggled}\n      shouldShowRightPanelInitially={shouldShowRightPanelInitially}\n    >\n      <PropProvider {...props}>\n        {mode === 'customize' ? children : (\n          <PresentationProvider\n            presentationBarActions={presentationBarActions}\n            useFixedPresentationBar={useFixedPresentationBar}\n          >\n            {children}\n          </PresentationProvider>\n        )}\n      </PropProvider>\n    </BuilderProvider>\n  );\n};\n\nProviders.propTypes = {\n  children: PropTypes.node.isRequired,\n  /** CSS selectors ignored by right panel click-outside logic */\n  clickOutsideIgnoreSelectors: PropTypes.arrayOf(PropTypes.string),\n  /** Last scroll position */\n  lastScrollPosition: PropTypes.number,\n  /** Mode of the report */\n  mode: PropTypes.oneOf(['customize', 'presentation', 'preview', 'print']),\n  /** Function called when the slides or the right panel is\n   * toggled takes a boolean value to indicate whether or\n   * not the panel is toggled open.\n   */\n  onRightPanelsToggled: PropTypes.func,\n  /** To pass in action definitions that will be rendered as buttons */\n  presentationBarActions: PropTypes.arrayOf(PropTypes.shape({})),\n  /** Flag for fixed action bar */\n  shouldShowRightPanelInitially: PropTypes.bool,\n  /** Flag for whether to show the right panel initially */\n  useFixedPresentationBar: PropTypes.bool,\n};\n\nexport default Providers;\n"],"names":["Providers","children","clickOutsideIgnoreSelectors","lastScrollPosition","mode","onRightPanelsToggled","presentationBarActions","shouldShowRightPanelInitially","useFixedPresentationBar","props","_jsx","BuilderProvider","PropProvider","PresentationProvider","propTypes","PropTypes","node","isRequired","arrayOf","string","number","oneOf","func","shape","bool"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;IAKMA,SAAS,GAAG,SAAZA,SAAY,OAUZ;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,2BAQI,QARJA,2BAQI;AAAA,MAPJC,kBAOI,QAPJA,kBAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,oBAKI,QALJA,oBAKI;AAAA,MAJJC,sBAII,QAJJA,sBAII;AAAA,MAHJC,6BAGI,QAHJA,6BAGI;AAAA,MAFJC,uBAEI,QAFJA,uBAEI;AAAA,MADDC,KACC;;AACJ,sBACEC,eAACC,8BAAD;AACE,IAAA,2BAA2B,EAAET,2BAD/B;AAEE,IAAA,kBAAkB,EAAEC,kBAFtB;AAGE,IAAA,oBAAoB,EAAEE,oBAHxB;AAIE,IAAA,6BAA6B,EAAEE,6BAJjC;AAAA,2BAMEG,eAACE,wBAAD,kCAAkBH,KAAlB;AAAA,gBACGL,IAAI,KAAK,WAAT,GAAuBH,QAAvB,gBACCS,eAACG,wCAAD;AACE,QAAA,sBAAsB,EAAEP,sBAD1B;AAEE,QAAA,uBAAuB,EAAEE,uBAF3B;AAAA,kBAIGP;AAJH;AAFJ;AANF,IADF;AAmBD;;AAEDD,SAAS,CAACc,SAAV,GAAsB;AACpBb,EAAAA,QAAQ,EAAEc,6BAAS,CAACC,IAAV,CAAeC,UADL;;AAEpB;AACAf,EAAAA,2BAA2B,EAAEa,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACI,MAA5B,CAHT;;AAIpB;AACAhB,EAAAA,kBAAkB,EAAEY,6BAAS,CAACK,MALV;;AAMpB;AACAhB,EAAAA,IAAI,EAAEW,6BAAS,CAACM,KAAV,CAAgB,CAAC,WAAD,EAAc,cAAd,EAA8B,SAA9B,EAAyC,OAAzC,CAAhB,CAPc;;AAQpB;AACF;AACA;AACA;AACEhB,EAAAA,oBAAoB,EAAEU,6BAAS,CAACO,IAZZ;;AAapB;AACAhB,EAAAA,sBAAsB,EAAES,6BAAS,CAACG,OAAV,CAAkBH,6BAAS,CAACQ,KAAV,CAAgB,EAAhB,CAAlB,CAdJ;;AAepB;AACAhB,EAAAA,6BAA6B,EAAEQ,6BAAS,CAACS,IAhBrB;;AAiBpB;AACAhB,EAAAA,uBAAuB,EAAEO,6BAAS,CAACS;AAlBf,CAAtB;;;;"}

package/lib/cjs/styles/_jfReportsFloatings.scss

@@ -151,13 +151,13 @@
       }
     }
 
-    .controllerItem {
+    :where(.controllerItem) {
       background: #343C6A;
       border-radius: 3px;
       border: none;
       transition: $transition;
 
-      &:hover {
+      &:where(:hover) {
         background: rgba(111, 118, 167, 0.6);
       }
     }
@@ -197,6 +197,113 @@
     }
   }
 
+  // Page Toolbar new styles //
+  &.page-toolbar {
+    position: absolute;
+    top: 58px;
+    right: -40px;
+    gap: 4px;
+
+    .controllerItem {
+      max-width: 24px;
+      max-height: 24px;
+      min-width: 24px;
+      min-height: 24px;
+
+      .toolbar-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  // Zoom Toolbar new styles //
+  &.zoom-toolbar {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    gap: 4px;
+    z-index: 2;
+
+    .controllerItem {
+      max-width: 32px;
+      max-height: 32px;
+      min-width: 32px;
+      min-height: 32px;
+
+      .toolbar-icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  &.page-toolbar, &.zoom-toolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    transition: $transition;
+    border-radius: 3px;
+
+    .floatingController-container {
+      display: flex;
+      padding: 4px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      box-shadow: 0 4px 8px 0 rgba(84, 95, 111, 0.15), 0 0 2px 0 rgba(37, 45, 91, 0.1);
+    }
+
+    :where(.floatingController-container + .floatingController-container) {
+      margin-top: 0;
+    }
+
+    .controllerItem {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      padding: 4px;
+      flex-shrink: 0;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-radius: 4px;
+      background-color: #F9F9FF;
+      transition: $transition;
+
+      .toolbar-icon {
+        color: #0A1551;
+        fill: #0A1551;
+        transition: $transition;
+      }
+
+      &:where(:hover) {
+        background-color: #E3E5F5;
+        transition: $transition;
+      }
+
+      &:hover.primary {
+        background-color: #EDF8FF;
+
+        .toolbar-icon {
+          color: #0075E3;
+          fill: #0075E3;
+        }
+      }
+
+      &:hover.error {
+        background-color: #FEF2F2;
+
+        .toolbar-icon {
+          color: #DC2626;
+          fill: #DC2626;
+        }
+      }
+    }
+  }
+
 
   &.forZoom {
     left: 15px;

package/lib/cjs/styles/_jfReportsPages.scss

@@ -153,43 +153,40 @@
 
 
 .contextMenu-wrapper {
-  border-radius: 3px;
-  background: #fff;
-  color: #fff;
-  display: block;
+  display: flex;
+  padding: 4px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
   position: absolute;
   width: 225px;
   z-index: 10;
-  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  background: #252D5B;
+  color: #FFFFFF;
 }
 
 .contextMenu-button {
-  transition: .2s ease-in-out;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   background: none;
   border: none;
-  height: 45px;
+  height: 40px;
   width: 100%;
   font-size: 0.875rem;
-  padding-left: 14px;
+  padding: 0 8px;
   text-align: left;
+  color: #FFFFFF;
+  transition: .2s ease-in-out;
 
   .contextMenu-icon {
+    color: #FFFFFF;
     margin-right: 9px;
-    width: 15px;
-    height: 14px;
-
-    .icon-lock {
-      width: 16px;
-      height: 14px;
-      fill: $blue;
-      stroke: $blue;
-
-      > path { fill: $blue; }
-    }
+    width: 16px;
+    height: 16px;
+    fill: #FFFFFF;
   }
 
   .contextMenu-text {
@@ -200,20 +197,16 @@
   }
 
   &:hover {
-    background: #f0f0f0;
+    background-color: #454E80;
+    transition: all 0.3s ease;
   }
 }
 
 .contextMenu-button.isDanger {
+  color: #DC2626;
 
   .contextMenu-icon {
-    svg {
-      width: 16px;
-      height: 16px;
-    }
+    color: #DC2626;
+    fill: #DC2626;
   }
 }
-
-.contextMenu-button + .contextMenu-button {
-  border-top: 1px solid #F0F0F0;
-}

package/lib/cjs/styles/_jfReportsReportItem.scss

@@ -74,17 +74,16 @@
       content: "";
       position: absolute;
       display: block;
-      background-color: #ddefff;
-      border: 1px solid $blue;
+      background-color: #FFFFFF;
+      border: 3px solid #0099FF;
       transition: .3s ease-in-out;
     }
 
     &:not(.forLine):after {
-      left: 2px;
-      top: 2px;
-      right: 2px;
-      bottom: 2px;
-      border-radius: 2px;
+      inset: 2px;
+      width: 3px;
+      height: 3px;
+      border-radius: 3px;
     }
 
     &.forLine {
@@ -93,26 +92,28 @@
       }
       &:not(.isVertical) {
         &:after {
-          top: 1px;
+          top: -0.5px;
           bottom: 1px;
-          left: calc(50% - 10px);
-          width: 18px;
+          left: calc(50% - 6px);
+          width: 8px;
+          height: 4px;
         }
       }
 
       &.isVertical {
         &:after {
-          top: calc(50% - 10px);
-          left: 1px;
-          right: 1px;
-          height: 18px;
+          top: calc(50% - 6px);
+          left: -0.5px;
+          right: -0.5px;
+          height: 8px;
+          width: 4px;
         }
       }
     }
 
     &:hover {
       &:after {
-        background-color: #B4DCFF;
+        background-color: #FFFFFF;
       }
     }
   }
@@ -123,7 +124,7 @@
     top: -50px;
     padding: 5px;
     background-color: #ddefff;
-    border: 1px solid $blue;
+    border: 2px solid #0099FF;
     border-radius: 50%;
 
     &:before {
@@ -148,8 +149,7 @@
   }
 
   .reportItemResizer {
-    border: 1px solid $blue;
-    box-shadow: 0 0 0 3px rgba(106, 110, 143, 0.15);
+    border: 3px solid #0099FF;
     border-radius: 3px;
 
     &.hideVerticalHandle {
@@ -216,56 +216,82 @@
 }
 
 .jfReport {
-  .reportItemMenu {
+  .report-item-toolbar {
     position: absolute;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
     right: -24px;
-    background-color: $blue;
-    border-radius: 4px;
+    background-color: #FFFFFF;
+    padding: 4px;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     text-align: center;
     pointer-events: all;
+    z-index: 2;
     animation: .2s fadeRight forwards;
+    gap: 4px;
+    box-shadow: 0 4px 8px 0 rgba(84, 95, 111, 0.15), 0 0 2px 0 rgba(37, 45, 91, 0.1);
 
     &-item {
-      display: inline-block;
-      padding: 6px 5px;
-      background-color: transparent;
-
-      svg {
-        width: 14px;
-        height: 14px;
-        backface-visibility: hidden;
-        transition: .3s ease-in-out;
-        transform: translateZ(0);
+      max-width: 24px;
+      max-height: 24px;
+      min-width: 24px;
+      min-height: 24px;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      padding: 4px;
+      flex-shrink: 0;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-radius: 4px;
+      background-color: #F9F9FF;
+      transition: $transition;
+
+      .toolbar-icon {
+        width: 16px;
+        height: 16px;
+        color: #0A1551;
+        fill: #0A1551;
+        transition: $transition;
       }
-    }
 
-    &:not(.forLocked) {
-      padding: 0 4px;
-      .reportItemMenu-item {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 20px;
-        height: 20px;
-        padding: 0;
-        border-radius: 3px;
-        transition: 0.3s ease-in;
+      &:where(:hover) {
+        background-color: #E3E5F5;
+        transition: $transition;
+      }
 
-        + .reportItemMenu-item {
-          margin-top: 4px;
-        }
+      &:hover.primary {
+        background-color: #EDF8FF;
 
-        &:first-child {
-          margin-top: 4px;
+        .toolbar-icon {
+          color: #0075E3;
+          fill: #0075E3;
         }
+      }
+
+      &:hover.error {
+        background-color: #FEF2F2;
 
-        &:last-child {
-          margin-bottom: 4px;
+        .toolbar-icon {
+          color: #DC2626;
+          fill: #DC2626;
         }
+      }
+    }
+
+    &.isLocked.forLocked {
+      background-color: #C8CEED;
+
+      .report-item-toolbar-item {
+        background-color: #C8CEED;
 
         &:hover {
-          background-color: rgba(255, 255, 255, 0.2);
+          background-color: #E3E5F5;
         }
       }
     }
@@ -277,7 +303,7 @@
       opacity: 0;
     }
     100% {
-      right: -35px;
+      right: -38px;
       opacity: 1;
     }
   }

package/lib/cjs/styles/_jfReportsTextEditor.scss

@@ -291,7 +291,7 @@
     }
   }
 
-  .reportItemMenu + .ql-toolbar.ql-snow {
+  .report-item-toolbar + .ql-toolbar.ql-snow {
     .ql-stroke {
       /* stylelint-disable-next-line declaration-no-important */
       stroke: #6F76A7 !important;
@@ -304,6 +304,6 @@
   }
 }
 
-.reportItemMenu + .ql-toolbar.ql-snow .ql-button:hover {
+.report-item-toolbar + .ql-toolbar.ql-snow .ql-button:hover {
   background-color: #F3F3FE;
 }

package/lib/cjs/styles/_jfReportsViewModes.scss

@@ -44,21 +44,21 @@
       fill: $additionalGray;
     }
 
-    .reportItemMenu-item:hover .isWhite {
+    .report-item-toolbar-item:hover .isWhite {
       fill: darken($additionalGray, 10);
       opacity: 1;
     }
   }
 
   .reportItem {
-    outline: 1px solid transparent;
+    outline: 3px solid transparent;
     outline-offset: -1px;
   }
 
   [data-zoom="0.5"] .reportItem,
   [data-zoom="0.6"] .reportItem,
   [data-zoom="0.7"] .reportItem {
-    outline-width: 2px;
+    outline-width: 3px;
   }
 
   .reportItemWrapper.isSelected:hover .isLocked {
@@ -70,6 +70,6 @@
   }
 
   .reportItemWrapper:not(.isSelected) .reportItem:not(.isLocked):hover {
-    outline-color: $blue;
+    outline-color: #0099FF;
   }
 }

package/lib/cjs/utils/icons.js

@@ -52,6 +52,10 @@ var settings = require('../assets/svg/settings.svg.js');
 var arrow_up = require('../assets/svg/arrow_up.svg.js');
 var arrow_left = require('../assets/svg/arrow_left.svg.js');
 var arrow_right = require('../assets/svg/arrow_right.svg.js');
+var angle_down = require('../assets/svg/angle_down.svg.js');
+var angle_up = require('../assets/svg/angle_up.svg.js');
+var angle_left = require('../assets/svg/angle_left.svg.js');
+var angle_right = require('../assets/svg/angle_right.svg.js');
 var duplicate_line = require('../assets/svg/page-actions/duplicate_line.svg.js');
 var plus = require('../assets/svg/plus.svg.js');
 var minus = require('../assets/svg/minus.svg.js');
@@ -135,6 +139,10 @@ exports.settings = settings;
 exports.arrowUp = arrow_up;
 exports.arrowLeft = arrow_left;
 exports.arrowRight = arrow_right;
+exports.angleDown = angle_down;
+exports.angleUp = angle_up;
+exports.angleLeft = angle_left;
+exports.angleRight = angle_right;
 exports.duplicateLine = duplicate_line;
 exports.plus = plus;
 exports.minus = minus;