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

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

@@ -1,18 +1,22 @@
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/es.regexp.to-string.js';
-import { memo, useState, useEffect } from 'react';
+import 'core-js/modules/es.string.includes.js';
+import { memo, useMemo, useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Section from '../../Builder/Section.js';
 import Element from '../../Builder/Element.js';
 import { leftPanelConfigPropType } from '../../../constants/propTypes.js';
 import LeftPanelCloser from './LeftPanelCloser.js';
-import { useBuilderContext } from '../../../utils/builderContext.js';
+import { useBuilderStore } from '../../../contexts/BuilderContext.js';
 import Tabs from '../../Builder/Tabs.js';
 import { getTabsWithElements } from '../../../utils/functions.js';
 import { useTranslatedTexts } from '../../../utils/hooks.js';
 import SearchInput from '../../Builder/SearchInput.js';
+import { usePropStore } from '../../../contexts/PropContext.js';
 import { jsxs, jsx } from '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; }
@@ -33,17 +37,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 = useBuilderContext(),
-      activeTab = _useBuilderContext.activeTab,
-      setActiveElement = _useBuilderContext.setActiveElement,
-      setIsRightPanelOpen = _useBuilderContext.setIsRightPanelOpen,
-      zoom = _useBuilderContext.zoom;
+var Elements = function Elements() {
+  var leftPanelConfig = usePropStore(function (state) {
+    return state.leftPanelConfig;
+  });
+  var activeTab = useBuilderStore(function (state) {
+    return state.activeTab;
+  });
 
   var _useTranslatedTexts = useTranslatedTexts(),
       ADD_ELEMENT = _useTranslatedTexts.ADD_ELEMENT,
@@ -51,30 +51,41 @@ var Elements = function Elements(_ref) {
 
 
   var tabDetails = getTabsWithElements(leftPanelConfig);
-  var tabs = Object.keys(tabDetails);
-
-  var _useState = useState([]),
+  var tabs = useMemo(function () {
+    return Object.keys(tabDetails);
+  }, [tabDetails]);
+
+  var _useMemo = 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 = useMemo(function () {
+    return Array.isArray(elements) ? elements : [];
+  }, [elements]);
+
+  var _useState = useState(elementWillBeUsed),
       _useState2 = _slicedToArray(_useState, 2),
       searchElements = _useState2[0],
       setSearchElements = _useState2[1];
 
-  var _useState3 = useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentTabInfo = _useState4[0],
-      setCurrentTabInfo = _useState4[1];
-
   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 = 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__*/jsxs("div", {
     className: "toolItemWrapper f-height d-flex dir-col o-auto p-relative",
     children: [/*#__PURE__*/jsx(LeftPanelCloser, {}), /*#__PURE__*/jsxs(Section, {
@@ -83,24 +94,15 @@ var Elements = function Elements(_ref) {
         panel: "left",
         tabs: tabs
       }), hasSearch && /*#__PURE__*/jsx(SearchInput, {
-        elements: elements,
-        searchKeys: searchKeys,
-        setElements: setSearchElements
-      }), /*#__PURE__*/jsxs("div", {
+        onSearch: filterElementsBySearch
+      }), /*#__PURE__*/jsx("div", {
         className: "toolItem-tabContent",
-        children: [searchElements === 'noResult' && hasSearch && /*#__PURE__*/jsx("div", {
+        children: searchElements.length > 0 ? searchElements.map(function (element, index) {
+          return /*#__PURE__*/jsx(Element, _objectSpread({}, element), index.toString());
+        }) : /*#__PURE__*/jsx("div", {
           className: "no-search-result-text",
           children: NO_RESULT
-        }), Array.isArray(elementWillBeUsed) && elementWillBeUsed.map(function (element, index) {
-          return /*#__PURE__*/jsx(Element, _objectSpread({
-            acceptedItems: acceptedItems,
-            onAnEventTrigger: onAnEventTrigger,
-            onItemAdd: onItemAdd,
-            setActiveElement: setActiveElement,
-            setIsRightPanelOpen: setIsRightPanelOpen,
-            zoom: zoom
-          }, element), index.toString());
-        })]
+        })
       })]
     })]
   });
@@ -112,12 +114,6 @@ Elements.propTypes = {
   onAnEventTrigger: PropTypes.func,
   onItemAdd: PropTypes.func
 };
-Elements.defaultProps = {
-  acceptedItems: {},
-  leftPanelConfig: [],
-  onAnEventTrigger: function onAnEventTrigger() {},
-  onItemAdd: function onItemAdd() {}
-};
 var Elements$1 = /*#__PURE__*/memo(Elements);
 
 export default Elements$1;

package/lib/esm/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/esm/components/Panels/LeftPanel/LeftPanel.js

@@ -1,52 +1,24 @@
 import { memo } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Panel from '../../Builder/Panel.js';
-import { useBuilderContext } from '../../../utils/builderContext.js';
-import { leftPanelConfigPropType } from '../../../constants/propTypes.js';
+import { useBuilderStore } from '../../../contexts/BuilderContext.js';
 import Elements from './Elements.js';
 import LeftPanelOpener from './LeftPanelOpener.js';
-import { usePropContext } from '../../../utils/propContext.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-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 = usePropContext(),
-      acceptedItems = _usePropContext.acceptedItems,
-      onAnEventTrigger = _usePropContext.onAnEventTrigger;
-
-  var _useBuilderContext = useBuilderContext(),
-      isLeftPanelOpen = _useBuilderContext.isLeftPanelOpen;
-
+var LeftPanel = function LeftPanel() {
+  var isLeftPanelOpen = useBuilderStore(function (state) {
+    return state.isLeftPanelOpen;
+  });
   var panelAdditionalClassName = classNames('jfReport-toolbox f-height', {
     isIdle: !isLeftPanelOpen
   });
   return /*#__PURE__*/jsxs(Panel, {
     additionalClassName: panelAdditionalClassName,
-    children: [/*#__PURE__*/jsx(LeftPanelOpener, {}), /*#__PURE__*/jsx(Elements, {
-      acceptedItems: acceptedItems,
-      leftPanelConfig: leftPanelConfig,
-      onAnEventTrigger: onAnEventTrigger,
-      onItemAdd: onItemAdd
-    })]
+    children: [/*#__PURE__*/jsx(LeftPanelOpener, {}), /*#__PURE__*/jsx(Elements, {})]
   });
 };
 
-LeftPanel.propTypes = {
-  leftPanelConfig: leftPanelConfigPropType,
-  onItemAdd: PropTypes.func
-};
-LeftPanel.defaultProps = {
-  leftPanelConfig: [],
-  onItemAdd: function onItemAdd() {}
-};
 var LeftPanel$1 = /*#__PURE__*/memo(LeftPanel);
 
 export default LeftPanel$1;

package/lib/esm/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,cAAc,EAA1D;AAAA,MAAQC,aAAR,mBAAQA,aAAR;AAAA,MAAuBC,gBAAvB,mBAAuBA,gBAAvB;;AAEA,2BAA4BC,iBAAiB,EAA7C;AAAA,MAAQC,eAAR,sBAAQA,eAAR;;AAEA,MAAMC,wBAAwB,GAAGC,UAAU,CACzC,2BADyC,EAEzC;AACEC,IAAAA,MAAM,EAAE,CAACH;AADX,GAFyC,CAA3C;AAOA,sBACEI,KAAC,KAAD;AAAO,IAAA,mBAAmB,EAAEH,wBAA5B;AAAA,4BACEI,IAAC,eAAD,KADF,eAEEA,IAAC,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,uBADG;AAEpBZ,EAAAA,SAAS,EAAEa,SAAS,CAACC;AAFD,CAAtB;AAKAhB,SAAS,CAACiB,YAAV,GAAyB;AACvBhB,EAAAA,eAAe,EAAE,EADM;AAEvBC,EAAAA,SAAS,EAAE,qBAAM;AAFM,CAAzB;AAKA,+BAAegB,IAAI,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,eAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,eAAV;AAAA,GAAN,CAAvC;AAEA,MAAMG,wBAAwB,GAAGC,UAAU,CACzC,2BADyC,EAEzC;AACEC,IAAAA,MAAM,EAAE,CAACL;AADX,GAFyC,CAA3C;AAOA,sBACEM,KAAC,KAAD;AAAO,IAAA,mBAAmB,EAAEH,wBAA5B;AAAA,4BACEI,IAAC,eAAD,KADF,eAEEA,IAAC,QAAD,KAFF;AAAA,IADF;AAMD,CAhBD;;AAkBA,+BAAeC,IAAI,CAACT,SAAD,CAAnB;;;;"}

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

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

package/lib/esm/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,iBAAiB,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,IAACC,QAAD;AAAa,QAAA,SAAS,EAAC;AAAvB;AALF;AADF,IADF;AAWD,CAbD;;AAeA,mCAAeC,IAAI,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,eAAe,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,IAACC,QAAD;AAAa,QAAA,SAAS,EAAC;AAAvB;AALF;AADF,IADF;AAWD,CAbD;;AAeA,mCAAeC,IAAI,CAACN,gBAAD,CAAnB;;;;"}

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

@@ -1,12 +1,13 @@
 import { memo } from 'react';
-import { useBuilderContext } from '../../../utils/builderContext.js';
+import { useBuilderStore } from '../../../contexts/BuilderContext.js';
 import { useTranslatedTexts } from '../../../utils/hooks.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import SvgPlus from '../../../assets/svg/plus.svg.js';
 
 var LeftPanelToggler = function LeftPanelToggler() {
-  var _useBuilderContext = useBuilderContext(),
-      setIsLeftPanelOpen = _useBuilderContext.setIsLeftPanelOpen;
+  var setIsLeftPanelOpen = useBuilderStore(function (state) {
+    return state.setIsLeftPanelOpen;
+  });
 
   var _useTranslatedTexts = useTranslatedTexts(),
       ADD_ELEMENT = _useTranslatedTexts.ADD_ELEMENT;

package/lib/esm/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,iBAAiB,EAAhD;AAAA,MAAQC,kBAAR,sBAAQA,kBAAR;;AACA,4BAAwBC,kBAAkB,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,IAACE,OAAD;AAAY,QAAA,SAAS,EAAC;AAAtB,QAPF;AAAA;AADF,IADF;AAaD,CAhBD;;AAkBA,mCAAeC,IAAI,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,eAAe,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,kBAAV;AAAA,GAAN,CAA1C;;AACA,4BAAwBG,kBAAkB,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,IAACE,OAAD;AAAY,QAAA,SAAS,EAAC;AAAtB,QAPF;AAAA;AADF,IADF;AAaD,CAhBD;;AAkBA,mCAAeC,IAAI,CAACT,gBAAD,CAAnB;;;;"}