@bigbinary/neeto-molecules 1.4.4 → 1.4.6-beta.1

package/dist/Builder.js

@@ -1,14 +1,14 @@
 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, withT } 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';
-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';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -106,18 +106,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 +121,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:51}@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:51}.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:absolute;top:0;visibility:hidden;width:100%;z-index:51}@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,49 +274,19 @@ 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,
       elements: section.elements,
       isCreatable: section.isCreatable,
       key: section.key,
-      title: section.title,
-      onSelect: onSelect
+      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"
@@ -429,7 +432,8 @@ var SelectedElement = function SelectedElement(_ref) {
       return;
     }
     rootElement.scrollIntoView({
-      block: "center"
+      behavior: "smooth",
+      block: "nearest"
     });
   }, [isActive, rootElementRef]);
   var error = findById(element.id, errors);
@@ -450,17 +454,13 @@ var SelectedElement = function SelectedElement(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, null)), /*#__PURE__*/React.createElement(Typography, {
     className: "truncate leading-snug",
     style: "body2"
-  }, element.label)), shouldShowDropdown && /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement(MoreDropdown, {
+  }, element.label)), shouldShowDropdown && /*#__PURE__*/React.createElement(MoreDropdown, {
     menuItems: menuItems,
     dropdownButtonProps: {
       className: "min-h-0 flex-shrink-0",
       "data-testid": "".concat(hyphenate(element.label), "-more-dropdown")
     }
-  })));
+  }));
 };
 var SelectedElement$1 = /*#__PURE__*/memo(SelectedElement);
 
@@ -626,13 +626,34 @@ var ElementsPanel = function ElementsPanel(_ref) {
     _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();
@@ -659,13 +680,20 @@ var ElementsPanel = function ElementsPanel(_ref) {
     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, {
@@ -683,7 +711,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", {
@@ -701,10 +729,45 @@ 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;
+  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]);
+  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: function onClick() {
+      setIsPropertiesPanelCollapsed(!isPropertiesPanelCollapsed);
+    }
+  }), /*#__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: function onClick() {
+      setIsPropertiesPanelCollapsed(!isPropertiesPanelCollapsed);
+    }
+  })));
 };
 PropertiesPanel.EmptyProperty = EmptyProperty;