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

package/lib/cjs/components/Panels/LeftPanel/Elements.js

@@ -1,20 +1,24 @@
 'use strict';
 
+require('core-js/modules/es.array.filter.js');
+require('core-js/modules/es.array.includes.js');
 require('core-js/modules/es.array.map.js');
 require('core-js/modules/es.object.keys.js');
 require('core-js/modules/es.object.to-string.js');
 require('core-js/modules/es.regexp.to-string.js');
+require('core-js/modules/es.string.includes.js');
 var React = require('react');
 var PropTypes = require('prop-types');
 var Section = require('../../Builder/Section.js');
 var Element = require('../../Builder/Element.js');
 var propTypes = require('../../../constants/propTypes.js');
 var LeftPanelCloser = require('./LeftPanelCloser.js');
-var builderContext = require('../../../utils/builderContext.js');
+var BuilderContext = require('../../../contexts/BuilderContext.js');
 var Tabs = require('../../Builder/Tabs.js');
 var functions = require('../../../utils/functions.js');
 var hooks = require('../../../utils/hooks.js');
 var SearchInput = require('../../Builder/SearchInput.js');
+var PropContext = require('../../../contexts/PropContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -39,17 +43,13 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Elements = function Elements(_ref) {
-  var acceptedItems = _ref.acceptedItems,
-      leftPanelConfig = _ref.leftPanelConfig,
-      onAnEventTrigger = _ref.onAnEventTrigger,
-      onItemAdd = _ref.onItemAdd;
-
-  var _useBuilderContext = builderContext.useBuilderContext(),
-      activeTab = _useBuilderContext.activeTab,
-      setActiveElement = _useBuilderContext.setActiveElement,
-      setIsRightPanelOpen = _useBuilderContext.setIsRightPanelOpen,
-      zoom = _useBuilderContext.zoom;
+var Elements = function Elements() {
+  var leftPanelConfig = PropContext.usePropStore(function (state) {
+    return state.leftPanelConfig;
+  });
+  var activeTab = BuilderContext.useBuilderStore(function (state) {
+    return state.activeTab;
+  });
 
   var _useTranslatedTexts = hooks.useTranslatedTexts(),
       ADD_ELEMENT = _useTranslatedTexts.ADD_ELEMENT,
@@ -57,30 +57,41 @@ var Elements = function Elements(_ref) {
 
 
   var tabDetails = functions.getTabsWithElements(leftPanelConfig);
-  var tabs = Object.keys(tabDetails);
-
-  var _useState = React.useState([]),
+  var tabs = React.useMemo(function () {
+    return Object.keys(tabDetails);
+  }, [tabDetails]);
+
+  var _useMemo = React.useMemo(function () {
+    return tabDetails[tabs[activeTab.left]] || {};
+  }, [activeTab.left, tabDetails, tabs]),
+      _useMemo$elements = _useMemo.elements,
+      elements = _useMemo$elements === void 0 ? {} : _useMemo$elements,
+      _useMemo$hasSearch = _useMemo.hasSearch,
+      hasSearch = _useMemo$hasSearch === void 0 ? false : _useMemo$hasSearch;
+
+  var elementWillBeUsed = React.useMemo(function () {
+    return Array.isArray(elements) ? elements : [];
+  }, [elements]);
+
+  var _useState = React.useState(elementWillBeUsed),
       _useState2 = _slicedToArray(_useState, 2),
       searchElements = _useState2[0],
       setSearchElements = _useState2[1];
 
-  var _useState3 = React.useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentTabInfo = _useState4[0],
-      setCurrentTabInfo = _useState4[1];
-
   React.useEffect(function () {
-    setCurrentTabInfo(tabDetails[tabs[activeTab.left]]);
-  }, [activeTab.left]);
-
-  var _ref2 = currentTabInfo || {},
-      _ref2$elements = _ref2.elements,
-      elements = _ref2$elements === void 0 ? {} : _ref2$elements,
-      _ref2$hasSearch = _ref2.hasSearch,
-      hasSearch = _ref2$hasSearch === void 0 ? false : _ref2$hasSearch,
-      searchKeys = _ref2.searchKeys;
-
-  var elementWillBeUsed = hasSearch ? searchElements : elements;
+    setSearchElements(elementWillBeUsed);
+  }, [elementWillBeUsed]);
+  var filterElementsBySearch = React.useCallback(function (value) {
+    if (value === '') {
+      setSearchElements(elementWillBeUsed);
+      return;
+    }
+
+    var filteredElements = elementWillBeUsed === null || elementWillBeUsed === void 0 ? void 0 : elementWillBeUsed.filter(function (element) {
+      return element.title.toLowerCase().includes(value.toLowerCase());
+    });
+    setSearchElements(filteredElements);
+  }, [elementWillBeUsed]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "toolItemWrapper f-height d-flex dir-col o-auto p-relative",
     children: [/*#__PURE__*/jsxRuntime.jsx(LeftPanelCloser, {}), /*#__PURE__*/jsxRuntime.jsxs(Section, {
@@ -89,24 +100,15 @@ var Elements = function Elements(_ref) {
         panel: "left",
         tabs: tabs
       }), hasSearch && /*#__PURE__*/jsxRuntime.jsx(SearchInput, {
-        elements: elements,
-        searchKeys: searchKeys,
-        setElements: setSearchElements
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        onSearch: filterElementsBySearch
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "toolItem-tabContent",
-        children: [searchElements === 'noResult' && hasSearch && /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: searchElements.length > 0 ? searchElements.map(function (element, index) {
+          return /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread({}, element), index.toString());
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "no-search-result-text",
           children: NO_RESULT
-        }), Array.isArray(elementWillBeUsed) && elementWillBeUsed.map(function (element, index) {
-          return /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread({
-            acceptedItems: acceptedItems,
-            onAnEventTrigger: onAnEventTrigger,
-            onItemAdd: onItemAdd,
-            setActiveElement: setActiveElement,
-            setIsRightPanelOpen: setIsRightPanelOpen,
-            zoom: zoom
-          }, element), index.toString());
-        })]
+        })
       })]
     })]
   });
@@ -118,12 +120,6 @@ Elements.propTypes = {
   onAnEventTrigger: PropTypes__default['default'].func,
   onItemAdd: PropTypes__default['default'].func
 };
-Elements.defaultProps = {
-  acceptedItems: {},
-  leftPanelConfig: [],
-  onAnEventTrigger: function onAnEventTrigger() {},
-  onItemAdd: function onItemAdd() {}
-};
 var Elements$1 = /*#__PURE__*/React.memo(Elements);
 
 module.exports = Elements$1;

package/lib/cjs/components/Panels/LeftPanel/Elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"Elements.js","sources":["../../../../../src/components/Panels/LeftPanel/Elements.js"],"sourcesContent":["import {\n  memo, useState, useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Section from '../../Builder/Section';\nimport Element from '../../Builder/Element';\nimport { leftPanelConfigPropType } from '../../../constants/propTypes';\nimport LeftPanelCloser from './LeftPanelCloser';\nimport { useBuilderContext } from '../../../utils/builderContext';\nimport Tabs from '../../Builder/Tabs';\nimport { getTabsWithElements } from '../../../utils/functions';\nimport { useTranslatedTexts } from '../../../utils/hooks';\nimport SearchInput from '../../Builder/SearchInput';\n\nconst Elements = ({\n  acceptedItems,\n  leftPanelConfig,\n  onAnEventTrigger,\n  onItemAdd,\n}) => {\n  const {\n    activeTab,\n    setActiveElement,\n    setIsRightPanelOpen,\n    zoom,\n  } = useBuilderContext();\n  const { ADD_ELEMENT, NO_RESULT } = useTranslatedTexts();\n\n  // Tabs\n  const tabDetails = getTabsWithElements(leftPanelConfig);\n  const tabs = Object.keys(tabDetails);\n\n  const [searchElements, setSearchElements] = useState([]);\n  const [currentTabInfo, setCurrentTabInfo] = useState({});\n\n  useEffect(() => {\n    setCurrentTabInfo(tabDetails[tabs[activeTab.left]]);\n  }, [activeTab.left]);\n\n  const {\n    elements = {},\n    hasSearch = false,\n    searchKeys,\n  } = currentTabInfo || {};\n\n  const elementWillBeUsed = hasSearch ? searchElements : elements;\n  return (\n    <div className=\"toolItemWrapper f-height d-flex dir-col o-auto p-relative\">\n      <LeftPanelCloser />\n      <Section\n        title={ADD_ELEMENT}\n      >\n        <Tabs\n          panel=\"left\"\n          tabs={tabs}\n        />\n        {hasSearch && (\n          <SearchInput\n            elements={elements}\n            searchKeys={searchKeys}\n            setElements={setSearchElements}\n          />\n        ) }\n        <div className=\"toolItem-tabContent\">\n          { (searchElements === 'noResult' && hasSearch)\n            && <div className=\"no-search-result-text\">{NO_RESULT}</div>}\n          {Array.isArray(elementWillBeUsed) && elementWillBeUsed.map((element, index) => (\n            <Element\n              key={index.toString()}\n              acceptedItems={acceptedItems}\n              onAnEventTrigger={onAnEventTrigger}\n              onItemAdd={onItemAdd}\n              setActiveElement={setActiveElement}\n              setIsRightPanelOpen={setIsRightPanelOpen}\n              zoom={zoom}\n              {...element}\n            />\n          ))}\n        </div>\n      </Section>\n    </div>\n  );\n};\n\nElements.propTypes = {\n  acceptedItems: PropTypes.shape({}),\n  leftPanelConfig: leftPanelConfigPropType,\n  onAnEventTrigger: PropTypes.func,\n  onItemAdd: PropTypes.func,\n};\n\nElements.defaultProps = {\n  acceptedItems: {},\n  leftPanelConfig: [],\n  onAnEventTrigger: () => { },\n  onItemAdd: () => {},\n};\n\nexport default memo(Elements);\n"],"names":["Elements","acceptedItems","leftPanelConfig","onAnEventTrigger","onItemAdd","useBuilderContext","activeTab","setActiveElement","setIsRightPanelOpen","zoom","useTranslatedTexts","ADD_ELEMENT","NO_RESULT","tabDetails","getTabsWithElements","tabs","Object","keys","useState","searchElements","setSearchElements","currentTabInfo","setCurrentTabInfo","useEffect","left","elements","hasSearch","searchKeys","elementWillBeUsed","_jsxs","_jsx","Array","isArray","map","element","index","toString","propTypes","PropTypes","shape","leftPanelConfigPropType","func","defaultProps","memo"],"mappings":"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"}
+{"version":3,"file":"Elements.js","sources":["../../../../../src/components/Panels/LeftPanel/Elements.js"],"sourcesContent":["import {\n  memo,\n  useState,\n  useMemo,\n  useCallback,\n  useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Section from '../../Builder/Section';\nimport Element from '../../Builder/Element';\nimport { leftPanelConfigPropType } from '../../../constants/propTypes';\nimport LeftPanelCloser from './LeftPanelCloser';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport Tabs from '../../Builder/Tabs';\nimport { getTabsWithElements } from '../../../utils/functions';\nimport { useTranslatedTexts } from '../../../utils/hooks';\nimport SearchInput from '../../Builder/SearchInput';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst Elements = () => {\n  const leftPanelConfig = usePropStore(state => state.leftPanelConfig);\n  const activeTab = useBuilderStore(state => state.activeTab);\n  const { ADD_ELEMENT, NO_RESULT } = useTranslatedTexts();\n\n  // Tabs\n  const tabDetails = getTabsWithElements(leftPanelConfig);\n  const tabs = useMemo(() => {\n    return Object.keys(tabDetails);\n  }, [tabDetails]);\n\n  const {\n    elements = {},\n    hasSearch = false,\n  } = useMemo(() => {\n    return tabDetails[tabs[activeTab.left]] || {};\n  }, [activeTab.left, tabDetails, tabs]);\n\n  const elementWillBeUsed = useMemo(() => {\n    return Array.isArray(elements) ? elements : [];\n  }, [elements]);\n\n  const [searchElements, setSearchElements] = useState(elementWillBeUsed);\n\n  useEffect(() => {\n    setSearchElements(elementWillBeUsed);\n  }, [elementWillBeUsed]);\n\n  const filterElementsBySearch = useCallback(value => {\n    if (value === '') {\n      setSearchElements(elementWillBeUsed);\n      return;\n    }\n    const filteredElements = elementWillBeUsed?.filter(element => element.title.toLowerCase().includes(value.toLowerCase()));\n    setSearchElements(filteredElements);\n  }, [elementWillBeUsed]);\n\n  return (\n    <div className=\"toolItemWrapper f-height d-flex dir-col o-auto p-relative\">\n      <LeftPanelCloser />\n      <Section\n        title={ADD_ELEMENT}\n      >\n        <Tabs\n          panel=\"left\"\n          tabs={tabs}\n        />\n        {hasSearch && (\n          <SearchInput onSearch={filterElementsBySearch} />\n        )}\n        <div className=\"toolItem-tabContent\">\n          {searchElements.length > 0 ? searchElements.map((element, index) => (\n            <Element\n              key={index.toString()}\n              {...element}\n            />\n          )) : (\n            <div className=\"no-search-result-text\">{NO_RESULT}</div>\n          )}\n        </div>\n      </Section>\n    </div>\n  );\n};\n\nElements.propTypes = {\n  acceptedItems: PropTypes.shape({}),\n  leftPanelConfig: leftPanelConfigPropType,\n  onAnEventTrigger: PropTypes.func,\n  onItemAdd: PropTypes.func,\n};\n\nexport default memo(Elements);\n"],"names":["Elements","leftPanelConfig","usePropStore","state","activeTab","useBuilderStore","useTranslatedTexts","ADD_ELEMENT","NO_RESULT","tabDetails","getTabsWithElements","tabs","useMemo","Object","keys","left","elements","hasSearch","elementWillBeUsed","Array","isArray","useState","searchElements","setSearchElements","useEffect","filterElementsBySearch","useCallback","value","filteredElements","filter","element","title","toLowerCase","includes","_jsxs","_jsx","length","map","index","toString","propTypes","acceptedItems","PropTypes","shape","leftPanelConfigPropType","onAnEventTrigger","func","onItemAdd","memo"],"mappings":"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"}

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

@@ -1,59 +1,30 @@
 'use strict';
 
 var React = require('react');
-var PropTypes = require('prop-types');
 var classNames = require('classnames');
 var Panel = require('../../Builder/Panel.js');
-var builderContext = require('../../../utils/builderContext.js');
-var propTypes = require('../../../constants/propTypes.js');
+var BuilderContext = require('../../../contexts/BuilderContext.js');
 var Elements = require('./Elements.js');
 var LeftPanelOpener = require('./LeftPanelOpener.js');
-var propContext = require('../../../utils/propContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
-var LeftPanel = function LeftPanel(_ref) {
-  var leftPanelConfig = _ref.leftPanelConfig,
-      onItemAdd = _ref.onItemAdd;
-
-  /*
-    This context cause additional render but it only renders LeftPanel and Panel components
-    If you see Elements Component is rendered unnecessary,
-      please get these propContext values from prop.
-  */
-  var _usePropContext = propContext.usePropContext(),
-      acceptedItems = _usePropContext.acceptedItems,
-      onAnEventTrigger = _usePropContext.onAnEventTrigger;
-
-  var _useBuilderContext = builderContext.useBuilderContext(),
-      isLeftPanelOpen = _useBuilderContext.isLeftPanelOpen;
-
+var LeftPanel = function LeftPanel() {
+  var isLeftPanelOpen = BuilderContext.useBuilderStore(function (state) {
+    return state.isLeftPanelOpen;
+  });
   var panelAdditionalClassName = classNames__default['default']('jfReport-toolbox f-height', {
     isIdle: !isLeftPanelOpen
   });
   return /*#__PURE__*/jsxRuntime.jsxs(Panel, {
     additionalClassName: panelAdditionalClassName,
-    children: [/*#__PURE__*/jsxRuntime.jsx(LeftPanelOpener, {}), /*#__PURE__*/jsxRuntime.jsx(Elements, {
-      acceptedItems: acceptedItems,
-      leftPanelConfig: leftPanelConfig,
-      onAnEventTrigger: onAnEventTrigger,
-      onItemAdd: onItemAdd
-    })]
+    children: [/*#__PURE__*/jsxRuntime.jsx(LeftPanelOpener, {}), /*#__PURE__*/jsxRuntime.jsx(Elements, {})]
   });
 };
 
-LeftPanel.propTypes = {
-  leftPanelConfig: propTypes.leftPanelConfigPropType,
-  onItemAdd: PropTypes__default['default'].func
-};
-LeftPanel.defaultProps = {
-  leftPanelConfig: [],
-  onItemAdd: function onItemAdd() {}
-};
 var LeftPanel$1 = /*#__PURE__*/React.memo(LeftPanel);
 
 module.exports = LeftPanel$1;

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

@@ -1 +1 @@
-{"version":3,"file":"LeftPanel.js","sources":["../../../../../src/components/Panels/LeftPanel/LeftPanel.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Panel from '../../Builder/Panel';\nimport { useBuilderContext } from '../../../utils/builderContext';\nimport { leftPanelConfigPropType } from '../../../constants/propTypes';\nimport Elements from './Elements';\nimport LeftPanelOpener from './LeftPanelOpener';\nimport { usePropContext } from '../../../utils/propContext';\n\nconst LeftPanel = ({\n  leftPanelConfig,\n  onItemAdd,\n}) => {\n  /*\n    This context cause additional render but it only renders LeftPanel and Panel components\n    If you see Elements Component is rendered unnecessary,\n      please get these propContext values from prop.\n  */\n  const { acceptedItems, onAnEventTrigger } = usePropContext();\n\n  const { isLeftPanelOpen } = useBuilderContext();\n\n  const panelAdditionalClassName = classNames(\n    'jfReport-toolbox f-height',\n    {\n      isIdle: !isLeftPanelOpen,\n    },\n  );\n\n  return (\n    <Panel additionalClassName={panelAdditionalClassName}>\n      <LeftPanelOpener />\n      <Elements\n        acceptedItems={acceptedItems}\n        leftPanelConfig={leftPanelConfig}\n        onAnEventTrigger={onAnEventTrigger}\n        onItemAdd={onItemAdd}\n      />\n    </Panel>\n  );\n};\n\nLeftPanel.propTypes = {\n  leftPanelConfig: leftPanelConfigPropType,\n  onItemAdd: PropTypes.func,\n};\n\nLeftPanel.defaultProps = {\n  leftPanelConfig: [],\n  onItemAdd: () => {},\n};\n\nexport default memo(LeftPanel);\n"],"names":["LeftPanel","leftPanelConfig","onItemAdd","usePropContext","acceptedItems","onAnEventTrigger","useBuilderContext","isLeftPanelOpen","panelAdditionalClassName","classNames","isIdle","_jsxs","_jsx","propTypes","leftPanelConfigPropType","PropTypes","func","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAGZ;AAAA,MAFJC,eAEI,QAFJA,eAEI;AAAA,MADJC,SACI,QADJA,SACI;;AACJ;AACF;AACA;AACA;AACA;AACE,wBAA4CC,0BAAc,EAA1D;AAAA,MAAQC,aAAR,mBAAQA,aAAR;AAAA,MAAuBC,gBAAvB,mBAAuBA,gBAAvB;;AAEA,2BAA4BC,gCAAiB,EAA7C;AAAA,MAAQC,eAAR,sBAAQA,eAAR;;AAEA,MAAMC,wBAAwB,GAAGC,8BAAU,CACzC,2BADyC,EAEzC;AACEC,IAAAA,MAAM,EAAE,CAACH;AADX,GAFyC,CAA3C;AAOA,sBACEI,gBAAC,KAAD;AAAO,IAAA,mBAAmB,EAAEH,wBAA5B;AAAA,4BACEI,eAAC,eAAD,KADF,eAEEA,eAAC,QAAD;AACE,MAAA,aAAa,EAAER,aADjB;AAEE,MAAA,eAAe,EAAEH,eAFnB;AAGE,MAAA,gBAAgB,EAAEI,gBAHpB;AAIE,MAAA,SAAS,EAAEH;AAJb,MAFF;AAAA,IADF;AAWD,CA/BD;;AAiCAF,SAAS,CAACa,SAAV,GAAsB;AACpBZ,EAAAA,eAAe,EAAEa,iCADG;AAEpBZ,EAAAA,SAAS,EAAEa,6BAAS,CAACC;AAFD,CAAtB;AAKAhB,SAAS,CAACiB,YAAV,GAAyB;AACvBhB,EAAAA,eAAe,EAAE,EADM;AAEvBC,EAAAA,SAAS,EAAE,qBAAM;AAFM,CAAzB;AAKA,+BAAegB,UAAI,CAAClB,SAAD,CAAnB;;;;"}
+{"version":3,"file":"LeftPanel.js","sources":["../../../../../src/components/Panels/LeftPanel/LeftPanel.js"],"sourcesContent":["import { memo } from 'react';\nimport classNames from 'classnames';\nimport Panel from '../../Builder/Panel';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport Elements from './Elements';\nimport LeftPanelOpener from './LeftPanelOpener';\n\nconst LeftPanel = () => {\n  const isLeftPanelOpen = useBuilderStore(state => state.isLeftPanelOpen);\n\n  const panelAdditionalClassName = classNames(\n    'jfReport-toolbox f-height',\n    {\n      isIdle: !isLeftPanelOpen,\n    },\n  );\n\n  return (\n    <Panel additionalClassName={panelAdditionalClassName}>\n      <LeftPanelOpener />\n      <Elements />\n    </Panel>\n  );\n};\n\nexport default memo(LeftPanel);\n"],"names":["LeftPanel","isLeftPanelOpen","useBuilderStore","state","panelAdditionalClassName","classNames","isIdle","_jsxs","_jsx","memo"],"mappings":";;;;;;;;;;;;;;AAOA,IAAMA,SAAS,GAAG,SAAZA,SAAY,GAAM;AACtB,MAAMC,eAAe,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,eAAV;AAAA,GAAN,CAAvC;AAEA,MAAMG,wBAAwB,GAAGC,8BAAU,CACzC,2BADyC,EAEzC;AACEC,IAAAA,MAAM,EAAE,CAACL;AADX,GAFyC,CAA3C;AAOA,sBACEM,gBAAC,KAAD;AAAO,IAAA,mBAAmB,EAAEH,wBAA5B;AAAA,4BACEI,eAAC,eAAD,KADF,eAEEA,eAAC,QAAD,KAFF;AAAA,IADF;AAMD,CAhBD;;AAkBA,+BAAeC,UAAI,CAACT,SAAD,CAAnB;;;;"}

package/lib/cjs/components/Panels/LeftPanel/LeftPanelCloser.js

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var builderContext = require('../../../utils/builderContext.js');
+var BuilderContext = require('../../../contexts/BuilderContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 var close = require('../../../assets/svg/close.svg.js');
 
 var LeftPanelToggler = function LeftPanelToggler() {
-  var _useBuilderContext = builderContext.useBuilderContext(),
-      setIsLeftPanelOpen = _useBuilderContext.setIsLeftPanelOpen;
-
+  var setIsLeftPanelOpen = BuilderContext.useBuilderStore(function (state) {
+    return state.setIsLeftPanelOpen;
+  });
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: /*#__PURE__*/jsxRuntime.jsx("button", {
       className: "paneClose p-absolute",

package/lib/cjs/components/Panels/LeftPanel/LeftPanelCloser.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftPanelCloser.js","sources":["../../../../../src/components/Panels/LeftPanel/LeftPanelCloser.js"],"sourcesContent":["import { memo } from 'react';\nimport { useBuilderContext } from '../../../utils/builderContext';\nimport * as icons from '../../../utils/icons';\n\nconst LeftPanelToggler = () => {\n  const { setIsLeftPanelOpen } = useBuilderContext();\n  return (\n    <>\n      <button\n        className=\"paneClose p-absolute\"\n        onClick={() => { setIsLeftPanelOpen(false); }}\n        type=\"button\"\n      >\n        <icons.close className=\"jfReportSVG\" />\n      </button>\n    </>\n  );\n};\n\nexport default memo(LeftPanelToggler);\n"],"names":["LeftPanelToggler","useBuilderContext","setIsLeftPanelOpen","_jsx","icons.close","memo"],"mappings":";;;;;;;AAIA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7B,2BAA+BC,gCAAiB,EAAhD;AAAA,MAAQC,kBAAR,sBAAQA,kBAAR;;AACA,sBACEC;AAAA,2BACEA;AACE,MAAA,SAAS,EAAC,sBADZ;AAEE,MAAA,OAAO,EAAE,mBAAM;AAAED,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AAA4B,OAF/C;AAGE,MAAA,IAAI,EAAC,QAHP;AAAA,6BAKEC,eAACC,KAAD;AAAa,QAAA,SAAS,EAAC;AAAvB;AALF;AADF,IADF;AAWD,CAbD;;AAeA,mCAAeC,UAAI,CAACL,gBAAD,CAAnB;;;;"}
+{"version":3,"file":"LeftPanelCloser.js","sources":["../../../../../src/components/Panels/LeftPanel/LeftPanelCloser.js"],"sourcesContent":["import { memo } from 'react';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport * as icons from '../../../utils/icons';\n\nconst LeftPanelToggler = () => {\n  const setIsLeftPanelOpen = useBuilderStore(state => state.setIsLeftPanelOpen);\n  return (\n    <>\n      <button\n        className=\"paneClose p-absolute\"\n        onClick={() => { setIsLeftPanelOpen(false); }}\n        type=\"button\"\n      >\n        <icons.close className=\"jfReportSVG\" />\n      </button>\n    </>\n  );\n};\n\nexport default memo(LeftPanelToggler);\n"],"names":["LeftPanelToggler","setIsLeftPanelOpen","useBuilderStore","state","_jsx","icons.close","memo"],"mappings":";;;;;;;AAIA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7B,MAAMC,kBAAkB,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,kBAAV;AAAA,GAAN,CAA1C;AACA,sBACEG;AAAA,2BACEA;AACE,MAAA,SAAS,EAAC,sBADZ;AAEE,MAAA,OAAO,EAAE,mBAAM;AAAEH,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AAA4B,OAF/C;AAGE,MAAA,IAAI,EAAC,QAHP;AAAA,6BAKEG,eAACC,KAAD;AAAa,QAAA,SAAS,EAAC;AAAvB;AALF;AADF,IADF;AAWD,CAbD;;AAeA,mCAAeC,UAAI,CAACN,gBAAD,CAAnB;;;;"}

package/lib/cjs/components/Panels/LeftPanel/LeftPanelOpener.js

@@ -1,14 +1,15 @@
 'use strict';
 
 var React = require('react');
-var builderContext = require('../../../utils/builderContext.js');
+var BuilderContext = require('../../../contexts/BuilderContext.js');
 var hooks = require('../../../utils/hooks.js');
 var jsxRuntime = require('react/jsx-runtime');
 var plus = require('../../../assets/svg/plus.svg.js');
 
 var LeftPanelToggler = function LeftPanelToggler() {
-  var _useBuilderContext = builderContext.useBuilderContext(),
-      setIsLeftPanelOpen = _useBuilderContext.setIsLeftPanelOpen;
+  var setIsLeftPanelOpen = BuilderContext.useBuilderStore(function (state) {
+    return state.setIsLeftPanelOpen;
+  });
 
   var _useTranslatedTexts = hooks.useTranslatedTexts(),
       ADD_ELEMENT = _useTranslatedTexts.ADD_ELEMENT;

package/lib/cjs/components/Panels/LeftPanel/LeftPanelOpener.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftPanelOpener.js","sources":["../../../../../src/components/Panels/LeftPanel/LeftPanelOpener.js"],"sourcesContent":["import { memo } from 'react';\nimport { useBuilderContext } from '../../../utils/builderContext';\nimport * as icons from '../../../utils/icons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst LeftPanelToggler = () => {\n  const { setIsLeftPanelOpen } = useBuilderContext();\n  const { ADD_ELEMENT } = useTranslatedTexts();\n  return (\n    <>\n      <button\n        className=\"paneToggler addElementToggle\"\n        onClick={() => { setIsLeftPanelOpen(true); }}\n        title={ADD_ELEMENT}\n        type=\"button\"\n      >\n        <span>{ADD_ELEMENT}</span>\n        <icons.plus className=\"jfReportSVG isWhite\" />\n      </button>\n    </>\n  );\n};\n\nexport default memo(LeftPanelToggler);\n"],"names":["LeftPanelToggler","useBuilderContext","setIsLeftPanelOpen","useTranslatedTexts","ADD_ELEMENT","_jsx","_jsxs","icons.plus","memo"],"mappings":";;;;;;;;AAKA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7B,2BAA+BC,gCAAiB,EAAhD;AAAA,MAAQC,kBAAR,sBAAQA,kBAAR;;AACA,4BAAwBC,wBAAkB,EAA1C;AAAA,MAAQC,WAAR,uBAAQA,WAAR;;AACA,sBACEC;AAAA,2BACEC;AACE,MAAA,SAAS,EAAC,8BADZ;AAEE,MAAA,OAAO,EAAE,mBAAM;AAAEJ,QAAAA,kBAAkB,CAAC,IAAD,CAAlB;AAA2B,OAF9C;AAGE,MAAA,KAAK,EAAEE,WAHT;AAIE,MAAA,IAAI,EAAC,QAJP;AAAA,8BAMEC;AAAA,kBAAOD;AAAP,QANF,eAOEC,eAACE,IAAD;AAAY,QAAA,SAAS,EAAC;AAAtB,QAPF;AAAA;AADF,IADF;AAaD,CAhBD;;AAkBA,mCAAeC,UAAI,CAACR,gBAAD,CAAnB;;;;"}
+{"version":3,"file":"LeftPanelOpener.js","sources":["../../../../../src/components/Panels/LeftPanel/LeftPanelOpener.js"],"sourcesContent":["import { memo } from 'react';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport * as icons from '../../../utils/icons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst LeftPanelToggler = () => {\n  const setIsLeftPanelOpen = useBuilderStore(state => state.setIsLeftPanelOpen);\n  const { ADD_ELEMENT } = useTranslatedTexts();\n  return (\n    <>\n      <button\n        className=\"paneToggler addElementToggle\"\n        onClick={() => { setIsLeftPanelOpen(true); }}\n        title={ADD_ELEMENT}\n        type=\"button\"\n      >\n        <span>{ADD_ELEMENT}</span>\n        <icons.plus className=\"jfReportSVG isWhite\" />\n      </button>\n    </>\n  );\n};\n\nexport default memo(LeftPanelToggler);\n"],"names":["LeftPanelToggler","setIsLeftPanelOpen","useBuilderStore","state","useTranslatedTexts","ADD_ELEMENT","_jsx","_jsxs","icons.plus","memo"],"mappings":";;;;;;;;AAKA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7B,MAAMC,kBAAkB,GAAGC,8BAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,kBAAV;AAAA,GAAN,CAA1C;;AACA,4BAAwBG,wBAAkB,EAA1C;AAAA,MAAQC,WAAR,uBAAQA,WAAR;;AACA,sBACEC;AAAA,2BACEC;AACE,MAAA,SAAS,EAAC,8BADZ;AAEE,MAAA,OAAO,EAAE,mBAAM;AAAEN,QAAAA,kBAAkB,CAAC,IAAD,CAAlB;AAA2B,OAF9C;AAGE,MAAA,KAAK,EAAEI,WAHT;AAIE,MAAA,IAAI,EAAC,QAJP;AAAA,8BAMEC;AAAA,kBAAOD;AAAP,QANF,eAOEC,eAACE,IAAD;AAAY,QAAA,SAAS,EAAC;AAAtB,QAPF;AAAA;AADF,IADF;AAaD,CAhBD;;AAkBA,mCAAeC,UAAI,CAACT,gBAAD,CAAnB;;;;"}