@bigbinary/neeto-molecules 1.7.0-beta.0 → 1.7.0-beta.1

package/dist/Builder.js

@@ -1,11 +1,12 @@
 import React, { useState, useMemo, memo, useRef, useEffect } from 'react';
+import classnames from 'classnames';
 import { noop, isPresent, isNotEmpty, findById, hyphenate } from '@bigbinary/neeto-cist';
+import { useBreakpoints } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { Search, MenuVertical, MenuHorizontal, Flash, Collapse, DownArrow, Close } from '@bigbinary/neeto-icons';
+import { Typography, Button, Input, Dropdown, Tooltip } from '@bigbinary/neetoui';
 import { isEmpty, mergeRight } from 'ramda';
 import { joinHyphenCase, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils/general';
-import { Search, MenuVertical, MenuHorizontal, Flash, DownArrow } from '@bigbinary/neeto-icons';
-import { Typography, Button, Input, Dropdown, Tooltip } from '@bigbinary/neetoui';
 import { useTranslation } from 'react-i18next';
-import classnames from 'classnames';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
@@ -106,18 +107,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ":root{--neeto-molecule-builder-left-sidebar-width:360px;--neeto-molecule-builder-left-sidebar-header-height:70px;--neeto-molecule-builder-left-sidebar-search-height:40px;--neeto-molecule-builder-right-sidebar-width:420px}.neeto-molecules-builder-elements-list-panel{height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:360px;width:var(--neeto-molecule-builder-left-sidebar-width)}.neeto-molecules-builder-questions-list-panel__scroll{height:calc(100% - 70px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height));overflow-y:auto;padding:8px 24px}.neeto-molecules-builder-questions-list-panel__scroll.neeto-molecules-builder-questions-list-panel__scroll--small{height:calc(100% - 110px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height) - var(--neeto-molecule-builder-left-sidebar-search-height))}.neeto-molecules-builder-elements-list{margin-bottom:24px}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper{border-bottom:none}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item{padding:12px 0}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item .neeto-ui-accordion__item-handle{color:rgb(var(--neeto-ui-gray-600));font-size:var(--neeto-ui-text-xs);font-weight:var(--neeto-ui-font-semibold);text-transform:uppercase;transition:var(--neeto-ui-transition)}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item .neeto-ui-accordion__item-toggle-icon{transform:rotate(90deg)!important}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item:hover{background-color:transparent}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item.neeto-ui-accordion__item--open .neeto-ui-accordion__item-handle,.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item:hover .neeto-ui-accordion__item-handle{color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item.neeto-ui-accordion__item--open .neeto-ui-accordion__item-toggle-icon{transform:rotate(270deg)!important}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__drop{padding:0}.neeto-molecules-builder-element-properties-panel{height:100%;min-width:420px;min-width:var(--neeto-molecule-builder-right-sidebar-width);padding-left:24px;padding-top:24px;width:420px;width:var(--neeto-molecule-builder-right-sidebar-width)}.neeto-molecules-builder-element--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}";
-n(css,{});
-
-var Body = function Body(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-builder-questions-list-panel__scroll neeto-molecules-builder-questions-list-panel__scroll--small",
-    "data-testid": props["data-testid"]
-  }, props.children);
-};
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -133,6 +122,51 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ":root{--neeto-molecule-builder-left-sidebar-width:288px;--neeto-molecule-builder-left-sidebar-width-lg:360px;--neeto-molecule-builder-left-sidebar-header-height:70px;--neeto-molecule-builder-left-sidebar-search-height:40px;--neeto-molecule-builder-right-sidebar-width:420px}.neeto-molecules-builder-elements-list-panel__wrapper{height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width-lg);position:relative;transition:all .15s;width:360px;width:var(--neeto-molecule-builder-left-sidebar-width-lg);z-index:101}@media screen and (min-width:768px) and (max-width:1279px){.neeto-molecules-builder-elements-list-panel__wrapper{min-width:288px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:288px;width:var(--neeto-molecule-builder-left-sidebar-width)}}@media screen and (max-width:767px){.neeto-molecules-builder-elements-list-panel__wrapper{left:0;position:fixed;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-builder-elements-list-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{transform:scale(-1)}@media screen and (max-width:767px){.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{top:72px}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{left:8px;right:auto}}.neeto-molecules-builder-elements-list-panel__container{height:100%;overflow:hidden;width:100%}.neeto-molecules-builder-elements-list-panel{height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width-lg);width:360px;width:var(--neeto-molecule-builder-left-sidebar-width-lg)}@media screen and (min-width:768px) and (max-width:1279px){.neeto-molecules-builder-elements-list-panel{min-width:288px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:288px;width:var(--neeto-molecule-builder-left-sidebar-width)}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel{padding-top:24px;width:100%}}.neeto-molecules-builder-elements-list-panel__toggler{flex-shrink:0;left:calc(100% + 8px);position:absolute;top:8px;transition:color .3s ease-in-out}@media screen and (min-width:1024px){.neeto-molecules-builder-elements-list-panel__toggler{opacity:0;pointer-events:none}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__toggler{left:24px}}.neeto-molecules-builder-questions-list-panel__scroll{height:calc(100% - 70px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height));overflow-y:auto;padding:8px 24px;width:100%}.neeto-molecules-builder-questions-list-panel__scroll.neeto-molecules-builder-questions-list-panel__scroll--small{height:calc(100% - 110px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height) - var(--neeto-molecule-builder-left-sidebar-search-height))}.neeto-molecules-builder-element-properties-panel__wrapper{height:100%;min-width:420px;min-width:var(--neeto-molecule-builder-right-sidebar-width);position:relative;transition:all .15s;width:420px;width:var(--neeto-molecule-builder-right-sidebar-width);z-index:101}.neeto-molecules-builder-element-properties-panel__wrapper .neeto-molecules-builder-properties-panel__close{opacity:0;pointer-events:none;position:absolute;right:8px;top:8px}@media screen and (max-width:1279px){.neeto-molecules-builder-element-properties-panel__wrapper .neeto-molecules-builder-properties-panel__close{opacity:1;pointer-events:all}.neeto-molecules-builder-element-properties-panel__wrapper{position:fixed;right:0;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-builder-element-properties-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-builder-element-properties-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-builder-element-properties-panel{display:flex;flex-direction:column;height:100%;min-width:0;overflow-y:auto;padding-left:24px;padding-top:24px;width:100%}.neeto-molecules-builder-element-properties-panel--collapsed{max-width:0;min-width:0;padding:0;width:0}@media screen and (max-width:1279px){.neeto-molecules-builder-element-properties-panel{padding-top:48px}}.neeto-molecules-builder-element--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}.neeto-molecules-builder-panel__backdrop{background-color:rgba(var(--neeto-ui-black),.4);display:none;height:100%;left:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:101}@media screen and (max-width:767px){.neeto-molecules-builder-panel__backdrop{display:block;visibility:visible}}@media screen and (max-width:1279px){.neeto-molecules-builder-panel__backdrop--extended{display:block;visibility:visible}}";
+n(css,{});
+
+var _excluded$4 = ["size"];
+var Body = function Body(_ref) {
+  var size = _ref.size,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: classnames("neeto-molecules-builder-questions-list-panel__scroll", {
+      "neeto-molecules-builder-questions-list-panel__scroll--small": size === "small"
+    })
+  }));
+};
+
 var Element = function Element(_ref) {
   var label = _ref.label,
     Icon = _ref.icon,
@@ -241,9 +275,8 @@ var ElementList = function ElementList(_ref) {
     value: searchString,
     onChange: withEventTargetValue(setSearchString)
   })), /*#__PURE__*/React.createElement(Body, {
-    "data-testid": "elements-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-builder-questions-list-panel__scroll--small"
+    "data-testid": "elements-container",
+    size: "small"
   }, filteredSections.map(function (section) {
     return /*#__PURE__*/React.createElement(Section, {
       onSelect: onSelect,
@@ -252,38 +285,9 @@ var ElementList = function ElementList(_ref) {
       key: section.key,
       title: section.title
     });
-  }))));
+  })));
 };
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
 var MENU_ITEM_TYPES = {
   menuItem: "menuItem",
   divider: "divider"
@@ -402,13 +406,15 @@ var MoreDropdown = function MoreDropdown(_ref) {
   }), menuBottomChildren));
 };
 
-var _excluded = ["element", "isActive", "handleSelectElement", "isSelectable", "errors", "actions"];
+var _excluded = ["element", "isActive", "handleSelectElement", "isSelectable", "index", "returnElementOnSelect", "errors", "actions"];
 var SelectedElement = function SelectedElement(_ref) {
   var element = _ref.element,
     isActive = _ref.isActive,
     handleSelectElement = _ref.handleSelectElement,
     _ref$isSelectable = _ref.isSelectable,
     isSelectable = _ref$isSelectable === void 0 ? true : _ref$isSelectable,
+    index = _ref.index,
+    returnElementOnSelect = _ref.returnElementOnSelect,
     _ref$errors = _ref.errors,
     errors = _ref$errors === void 0 ? [] : _ref$errors,
     _ref$actions = _ref.actions,
@@ -417,7 +423,7 @@ var SelectedElement = function SelectedElement(_ref) {
   var Icon = element.icon;
   var rootElementRef = useRef();
   var onClick = function onClick() {
-    return handleSelectElement(element);
+    return returnElementOnSelect ? handleSelectElement(element) : handleSelectElement(index);
   };
   var shouldShowDropdown = isNotEmpty(actions);
   var menuItems = typeof actions === "function" ? actions(element) : actions.map(function (action) {
@@ -517,16 +523,18 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
     handleSelectElement = _ref.handleSelectElement,
     isDragDisabled = _ref.isDragDisabled,
     isElementVisible = _ref.isElementVisible,
-    selectedElementId = _ref.selectedElementId,
+    selectedElementIndex = _ref.selectedElementIndex,
     selectedElements = _ref.selectedElements,
     setIsElementsListVisible = _ref.setIsElementsListVisible,
+    fixedLastElementIndex = _ref.fixedLastElementIndex,
     fixedLastElement = _ref.fixedLastElement,
     fixedFirstElement = _ref.fixedFirstElement,
     selectedElementActions = _ref.selectedElementActions,
     addAllElements = _ref.addAllElements,
     isAddingAllElements = _ref.isAddingAllElements,
     showElementsFillButton = _ref.showElementsFillButton,
-    isAddingNewElement = _ref.isAddingNewElement;
+    isAddingNewElement = _ref.isAddingNewElement,
+    returnElementOnSelect = _ref.returnElementOnSelect;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleBar, {
     addAllElements: addAllElements,
     isAddingAllElements: isAddingAllElements,
@@ -537,13 +545,14 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
     "data-testid": "selected-elements-container"
   }, isPresent(fixedFirstElement) && /*#__PURE__*/React.createElement(SelectedElement$1, {
     handleSelectElement: handleSelectElement,
+    returnElementOnSelect: returnElementOnSelect,
     isSelectable: true,
     actions: fixedFirstElement.actions,
     "data-cy": "welcome-element",
     "data-testid": "welcome-record",
     element: fixedFirstElement,
     index: 0,
-    isActive: selectedElementId === fixedFirstElement.id
+    isActive: selectedElementIndex === 0
   }), /*#__PURE__*/React.createElement(DragDropContext, {
     onDragEnd: handleDragEnd
   }, /*#__PURE__*/React.createElement(Droppable, {
@@ -576,21 +585,25 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
         }, draggableProps, dragHandleProps), /*#__PURE__*/React.createElement(SelectedElement$1, {
           element: element,
           handleSelectElement: handleSelectElement,
+          index: index,
+          returnElementOnSelect: returnElementOnSelect,
           isSelectable: true,
           actions: selectedElementActions,
-          isActive: selectedElementId === element.id,
+          isActive: index === selectedElementIndex,
           key: (_element$id3 = element.id) !== null && _element$id3 !== void 0 ? _element$id3 : index
         }));
       });
     }), placeholder);
   })), isPresent(fixedLastElement) && /*#__PURE__*/React.createElement(SelectedElement$1, {
     handleSelectElement: handleSelectElement,
+    returnElementOnSelect: returnElementOnSelect,
     isSelectable: true,
     actions: fixedLastElement.actions,
     "data-cy": "submit-button-element",
     "data-testid": "submit-button-record",
     element: fixedLastElement,
-    isActive: selectedElementId === fixedLastElement.id
+    index: fixedLastElementIndex,
+    isActive: selectedElementIndex === fixedLastElementIndex
   })));
 };
 
@@ -607,7 +620,8 @@ var ElementsPanel = function ElementsPanel(_ref) {
     _ref$isDragDisabled = _ref.isDragDisabled,
     isDragDisabled = _ref$isDragDisabled === void 0 ? true : _ref$isDragDisabled,
     handleSelectElement = _ref.handleSelectElement,
-    selectedElementId = _ref.selectedElementId,
+    selectedElementIndex = _ref.selectedElementIndex,
+    fixedLastElementIndex = _ref.fixedLastElementIndex,
     selectedElementActions = _ref.selectedElementActions,
     _ref$addAllElements = _ref.addAllElements,
     addAllElements = _ref$addAllElements === void 0 ? noop : _ref$addAllElements,
@@ -616,18 +630,41 @@ var ElementsPanel = function ElementsPanel(_ref) {
     _ref$showElementsFill = _ref.showElementsFillButton,
     showElementsFillButton = _ref$showElementsFill === void 0 ? false : _ref$showElementsFill,
     _ref$isAddingNewEleme = _ref.isAddingNewElement,
-    isAddingNewElement = _ref$isAddingNewEleme === void 0 ? false : _ref$isAddingNewEleme;
+    isAddingNewElement = _ref$isAddingNewEleme === void 0 ? false : _ref$isAddingNewEleme,
+    _ref$returnElementOnS = _ref.returnElementOnSelect,
+    returnElementOnSelect = _ref$returnElementOnS === void 0 ? false : _ref$returnElementOnS;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isElementsListVisible = _useState2[0],
     setIsElementsListVisible = _useState2[1];
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isLargerScreen = !isSize("mobile");
+  var _useState3 = useState(!isLargerScreen),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isElementsPanelCollapsed = _useState4[0],
+    setIsElementsPanelCollapsed = _useState4[1];
   var isSelectedElementsEmpty = isEmpty(selectedElements);
   var shouldShowElementsList = isSelectedElementsEmpty || isElementsListVisible;
   var handleElementSelect = function handleElementSelect(element) {
     setIsElementsListVisible(false);
     handleAddElement(element);
   };
-  return /*#__PURE__*/React.createElement("div", {
+  useEffect(function () {
+    setIsElementsPanelCollapsed(!isLargerScreen);
+  }, [isLargerScreen]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isElementsPanelCollapsed && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-builder-panel__backdrop",
+    onClick: function onClick() {
+      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classnames("neeto-molecules-builder-elements-list-panel__wrapper", {
+      "neeto-molecules-builder-elements-list-panel__wrapper--collapsed": isElementsPanelCollapsed
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-builder-elements-list-panel__container"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "neeto-molecules-builder-elements-list-panel neeto-ui-bg-gray-100",
     onClick: function onClick(event) {
       return event.stopPropagation();
@@ -641,24 +678,33 @@ var ElementsPanel = function ElementsPanel(_ref) {
     addAllElements: addAllElements,
     fixedFirstElement: fixedFirstElement,
     fixedLastElement: fixedLastElement,
+    fixedLastElementIndex: fixedLastElementIndex,
     handleDragEnd: handleDragEnd,
     handleSelectElement: handleSelectElement,
     isAddingAllElements: isAddingAllElements,
     isAddingNewElement: isAddingNewElement,
     isDragDisabled: isDragDisabled,
     isElementVisible: isElementVisible,
+    returnElementOnSelect: returnElementOnSelect,
     selectedElementActions: selectedElementActions,
-    selectedElementId: selectedElementId,
+    selectedElementIndex: selectedElementIndex,
     selectedElements: selectedElements,
     setIsElementsListVisible: setIsElementsListVisible,
     showElementsFillButton: showElementsFillButton
-  }));
+  }))), /*#__PURE__*/React.createElement(Button, {
+    className: "neeto-molecules-builder-elements-list-panel__toggler",
+    icon: Collapse,
+    style: "secondary",
+    onClick: function onClick() {
+      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
+    }
+  })));
 };
 
 var EmptyProperty = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4 "
+    className: "space-y-4 pr-6 pb-6"
   }, /*#__PURE__*/React.createElement("div", {
     className: "neeto-ui-bg-gray-200 neeto-ui-text-gray-600 neeto-ui-rounded-lg flex w-full flex-col items-center justify-center space-y-2 px-16 py-8"
   }, /*#__PURE__*/React.createElement(Typography, {
@@ -676,7 +722,7 @@ var EmptyProperty = withT(function (_ref) {
 var Skeleton = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4 pr-6"
+    className: "space-y-4 pr-6 pb-6"
   }, /*#__PURE__*/React.createElement("div", {
     className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-12 w-full"
   }), /*#__PURE__*/React.createElement("div", {
@@ -694,10 +740,46 @@ var Skeleton = withT(function (_ref) {
 });
 
 var PropertiesPanel = function PropertiesPanel(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  var id = _ref.id,
+    children = _ref.children,
+    onClose = _ref.onClose;
+  var _useBreakpoints = useBreakpoints(function (window) {
+      return {
+        largeDesktop: window.innerWidth >= 1280
+      };
+    }),
+    isSize = _useBreakpoints.isSize;
+  var isLargerScreen = isSize("largeDesktop");
+  var _useState = useState(!isLargerScreen),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPropertiesPanelCollapsed = _useState2[0],
+    setIsPropertiesPanelCollapsed = _useState2[1];
+  useEffect(function () {
+    setIsPropertiesPanelCollapsed(!isLargerScreen);
+  }, [isLargerScreen]);
+  useEffect(function () {
+    if (!id) return;
+    setIsPropertiesPanelCollapsed(false);
+  }, [id]);
+  var handleCollapsePanel = function handleCollapsePanel() {
+    setIsPropertiesPanelCollapsed(!isPropertiesPanelCollapsed);
+    onClose === null || onClose === void 0 ? void 0 : onClose(id);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isPropertiesPanelCollapsed && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-builder-panel__backdrop neeto-molecules-builder-panel__backdrop--extended",
+    onClick: handleCollapsePanel
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classnames("neeto-molecules-builder-element-properties-panel__wrapper", {
+      "neeto-molecules-builder-element-properties-panel__wrapper--collapsed": isPropertiesPanelCollapsed
+    })
+  }, /*#__PURE__*/React.createElement("div", {
     className: "neeto-molecules-builder-element-properties-panel neeto-ui-bg-gray-100"
-  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(Skeleton, null));
+  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(Skeleton, null)), !isPropertiesPanelCollapsed && /*#__PURE__*/React.createElement(Button, {
+    className: "neeto-molecules-builder-properties-panel__close",
+    icon: Close,
+    style: "secondary",
+    onClick: handleCollapsePanel
+  })));
 };
 PropertiesPanel.EmptyProperty = EmptyProperty;