@zohodesk/components 1.0.0-temp-202.1 → 1.0.0-temp-203

package/lib/Tab/TabContent.module.css

@@ -1,4 +1,4 @@
-/* $Id$ */
-.container {
-  position: relative;
-}
+/* $Id$ */
+.container {
+  position: relative;
+}

package/lib/Tab/Tabs.js

@@ -195,9 +195,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           tabKeys = _this$state.tabKeys;
 
       if (prevProps.children && children) {
-        /**
-         * To recalculate the dimensions of tabs we are checking the children length.
-         * and also checking the tab id and their order.
+        /**
+         * To recalculate the dimensions of tabs we are checking the children length.
+         * and also checking the tab id and their order.
          */
         var newTabKeys = [];
 
@@ -382,14 +382,14 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         });
 
         if (selectedTabDimension > totalDimension) {
-          /* let { align } = this.props;
-          let newDim = `${remConvert(totalDimension)}rem`;
-          let newTabs;
-          if (align === 'vertical') {
-            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
-          } else {
-            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
-          }
+          /* let { align } = this.props;
+          let newDim = `${remConvert(totalDimension)}rem`;
+          let newTabs;
+          if (align === 'vertical') {
+            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
+          } else {
+            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
+          }
           mainTabs = newTabs; */
           this.setMaxDim(totalDimension);
         }
@@ -573,13 +573,15 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }, DropBoxProps, {
           isResponsivePadding: true,
           needFocusScope: true,
-          onClose: _this8.togglePopup
+          onClose: _this8.togglePopup,
+          dataId: "".concat(dataId, "_dropbox")
         }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this8.props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,
           scroll: "vertical",
           className: "".concat(tabletMode ? '' : _TabsModule["default"].menuBox, " ").concat(moreBoxClass),
-          onScroll: _this8.onScroll
+          onScroll: _this8.onScroll,
+          dataId: "".concat(dataId, "_Tabs")
         }, _react["default"].Children.map(moreTabs, function (child) {
           if (!child) {
             return null;

package/lib/Tag/Tag.js

@@ -51,16 +51,16 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-/*
- * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
- * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
- * 'pureDotted', 'primaryDotted'] }]
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
  */
 
-/*
- * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
- * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
- * 'pureDotted', 'primaryDotted'] }]
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
  */
 var Tag = /*#__PURE__*/function (_PureComponent) {
   _inherits(Tag, _PureComponent);

package/lib/Tooltip/Tooltip.js

@@ -60,9 +60,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
       top: 0,
       arrowLeft: 0,
       isArrowRight: null,
-      isHtml: false,
-      isDragging: false,
-      initialX: 0
+      isHtml: false
     };
     _this.handleOver = _this.handleOver.bind(_assertThisInitialized(_this));
     _this.getToolTipDOM = _this.getToolTipDOM.bind(_assertThisInitialized(_this));
@@ -73,66 +71,11 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
     _this.observer = new _ResizeObserver["default"](_this.onResize);
     _this.isResized = true;
     _this.tooltipContainerClientRect = {};
-    _this.tooltipContainerEl = {}; // draggable methods
-
-    _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
-    _this.onMouseMove = _this.onMouseMove.bind(_assertThisInitialized(_this));
-    _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this));
+    _this.tooltipContainerEl = {};
     return _this;
-  } // mouse button pressed on the element
-
+  }
 
   _createClass(Tooltip, [{
-    key: "onMouseDown",
-    value: function onMouseDown(element) {
-      var _this2 = this;
-
-      return function (event) {
-        var left = _this2.state.left;
-
-        _this2.setState({
-          isDragging: true,
-          initialX: event.clientX - left
-        });
-
-        var mouseMoveHandler = _this2.onMouseMove(element);
-
-        document.addEventListener('mousemove', mouseMoveHandler);
-        document.addEventListener('mouseup', _this2.onMouseUp);
-      };
-    } // mouse moves - dragging progress
-
-  }, {
-    key: "onMouseMove",
-    value: function onMouseMove(element) {
-      var _this3 = this;
-
-      return function () {
-        var _this3$state = _this3.state,
-            isDragging = _this3$state.isDragging,
-            initialX = _this3$state.initialX;
-        var elementLeft = element.getBoundingClientRect().left - initialX;
-
-        if (isDragging) {
-          _this3.setState({
-            left: elementLeft
-          });
-        }
-      };
-    } // mouse button released
-
-  }, {
-    key: "onMouseUp",
-    value: function onMouseUp() {
-      this.setState({
-        isDragging: false,
-        initialX: 0
-      });
-      this.reset();
-      document.removeEventListener('mousemove', this.onMouseMove);
-      document.removeEventListener('mouseup', this.onMouseUp);
-    }
-  }, {
     key: "onResize",
     value: function onResize(sizeOfObservedEl, observedEl) {
       this.isResized = true;
@@ -179,11 +122,9 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "reset",
     value: function reset() {
-      var _this$state = this.state,
-          title = _this$state.title,
-          isDragging = _this$state.isDragging;
+      var title = this.state.title;
 
-      if (title !== null && !isDragging) {
+      if (title !== null) {
         this.setState({
           title: null,
           top: 0,
@@ -248,12 +189,11 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleOver",
     value: function handleOver(e, targetElement) {
-      var _this4 = this;
+      var _this2 = this;
 
       var containerElement = this.tooltipContainerEl;
       var element = e.target;
       var titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
-      var draggable = element.hasAttribute('data-title-draggable') ? true : false;
 
       if (titleDiv) {
         var title = titleDiv.getAttribute('data-title') || titleDiv.getAttribute('title');
@@ -320,7 +260,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
             dataTooltipnoArrow: dataTooltipnoArrow,
             dataTooltipWrap: dataTooltipWrap
           }, function () {
-            var tooltip = _this4.toolTip;
+            var tooltip = _this2.toolTip;
 
             if (tooltip) {
               /* element top, left, height, width */
@@ -391,7 +331,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
                   /* top tooltip left and right corner edge case */
 
 
-                  var values = _this4.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
+                  var values = _this2.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
 
                   tLeft = values.tLeft, toolTipArrowLeft = values.toolTipArrowLeft, thisLeft = values.thisLeft, thisWidth = values.thisWidth, tooltipoffsetWidth = values.tooltipoffsetWidth, bodyWidth = values.bodyWidth, rightEdge = values.rightEdge;
                 } else if (isPosition == 'bottom') {
@@ -423,7 +363,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
                   /* bottom tooltip left and right corner edge case */
 
 
-                  var _values = _this4.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
+                  var _values = _this2.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
 
                   tLeft = _values.tLeft, toolTipArrowLeft = _values.toolTipArrowLeft, thisLeft = _values.thisLeft, thisWidth = _values.thisWidth, tooltipoffsetWidth = _values.tooltipoffsetWidth, bodyWidth = _values.bodyWidth, rightEdge = _values.rightEdge;
                 } else if (isPosition == 'left') {
@@ -460,7 +400,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
                   /* left tooltip top and bottom corner edge case */
 
 
-                  var _values2 = _this4.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
+                  var _values2 = _this2.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
 
                   tTop = _values2.tTop, toolTipArrowTop = _values2.toolTipArrowTop, thisTop = _values2.thisTop, thisHeight = _values2.thisHeight, tooltipoffsetHeight = _values2.tooltipoffsetHeight, bodyHeight = _values2.bodyHeight, bottomEdge = _values2.bottomEdge;
                 } else if (isPosition == 'right') {
@@ -504,12 +444,12 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
                   /* right tooltip left and right corner edge case */
 
 
-                  var _values3 = _this4.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
+                  var _values3 = _this2.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
 
                   tTop = _values3.tTop, toolTipArrowTop = _values3.toolTipArrowTop, thisTop = _values3.thisTop, thisHeight = _values3.thisHeight, tooltipoffsetHeight = _values3.tooltipoffsetHeight, bodyHeight = _values3.bodyHeight, bottomEdge = _values3.bottomEdge;
                 }
 
-                _this4.setState({
+                _this2.setState({
                   top: tTop,
                   left: tLeft,
                   arrowTop: toolTipArrowTop,
@@ -520,7 +460,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
                   width: tWidth
                 });
               } else {
-                _this4.setState({
+                _this2.setState({
                   isArrowRight: null
                 });
 
@@ -555,7 +495,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
                 if (isArrowDown) {
                   var arrowTop = tooltipoffsetHeight - 4;
 
-                  _this4.setState({
+                  _this2.setState({
                     top: tTop,
                     left: tLeft,
                     arrowLeft: tooltipLeft,
@@ -564,7 +504,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
                     isArrowHorizontal: isArrowHorizontal
                   });
                 } else {
-                  _this4.setState({
+                  _this2.setState({
                     top: tTop,
                     left: tLeft,
                     arrowLeft: tooltipLeft,
@@ -579,7 +519,6 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           titleDiv.addEventListener('click', this.reset);
           titleDiv.addEventListener('mouseup', this.reset);
           titleDiv.addEventListener('mouseleave', this.reset);
-          draggable && titleDiv.addEventListener('mousedown', this.onMouseDown(element));
         }
       } else {
         this.reset();
@@ -588,19 +527,19 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state2 = this.state,
-          title = _this$state2.title,
-          left = _this$state2.left,
-          top = _this$state2.top,
-          arrowLeft = _this$state2.arrowLeft,
-          arrowTop = _this$state2.arrowTop,
-          isArrowDown = _this$state2.isArrowDown,
-          isArrowRight = _this$state2.isArrowRight,
-          isArrowHorizontal = _this$state2.isArrowHorizontal,
-          width = _this$state2.width,
-          isHtml = _this$state2.isHtml,
-          dataTooltipnoArrow = _this$state2.dataTooltipnoArrow,
-          dataTooltipWrap = _this$state2.dataTooltipWrap;
+      var _this$state = this.state,
+          title = _this$state.title,
+          left = _this$state.left,
+          top = _this$state.top,
+          arrowLeft = _this$state.arrowLeft,
+          arrowTop = _this$state.arrowTop,
+          isArrowDown = _this$state.isArrowDown,
+          isArrowRight = _this$state.isArrowRight,
+          isArrowHorizontal = _this$state.isArrowHorizontal,
+          width = _this$state.width,
+          isHtml = _this$state.isHtml,
+          dataTooltipnoArrow = _this$state.dataTooltipnoArrow,
+          dataTooltipWrap = _this$state.dataTooltipWrap;
       var _this$props = this.props,
           dataId = _this$props.dataId,
           customClass = _this$props.customClass;

package/lib/Tooltip/Tooltip.module.css

@@ -1,141 +1,141 @@
-.tooltiptext {
-  position: fixed;
-  z-index: 9999999;
-  /*Hook for editor alert*/
-  pointer-events: none;
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  border-radius: var(--zd_size4);
-}[dir=ltr] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}[dir=rtl] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}
-
-.tooltipcont {
-  color: var(--zdt_tooltip_default_text);
-  font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
-  word-break: break-word;
-  max-width: var(--zd_size420) ;
-  line-height: 1.5385;
-  min-height: var(--zd_size24) ;
-  overflow: hidden;
-  background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10) ;
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--zd_size4);
-}
-
-.tooltipWrapCont {
-  white-space: pre-wrap;
-}
-
-.tooltipNormalCont {
-  white-space: normal;
-}
-.tooltiparrow {
-  content: '';
-  position: absolute;
-  top: 0 ;
-  border-top-left-radius: 3px;
-}
-
-.arrowUp,
-.arrowDown {
-  /*  Variable:Ignore  */
-  width: 11px;
-  /*  Variable:Ignore  */
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  z-index: -1;
-}
-
-.arrowDown {
-  /*  Variable:Ignore  */
-  margin-top: -4px !important;
-  /* put important because of '.wms-mainui *' have margin: 0; */
-}
-
-.arrowLeft,
-.arrowRight {
-  /*  Variable:Ignore  */
-  width: 11px;
-  /*  Variable:Ignore  */
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  z-index: -1;
-}
-
-.arrowRight {
-  /*  Variable:Ignore  */
-  margin-left: -2px;
-}
-
-.arrowLeft {
-  /*  Variable:Ignore  */
-  margin-left: 1px;
-}
-
-.arrowUp {
-  transform: rotate(45deg);
-}
-
-.arrowDown {
-  transform: rotate(225deg);
-}
-
-.arrowLeft {
-  transform: rotate(315deg) translateY(-50%);
-}
-
-.arrowRight {
-  transform: rotate(135deg) translateY(50%);
-}
-@keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-moz-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-ms-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+.tooltiptext {
+  position: fixed;
+  z-index: 9999999;
+  /*Hook for editor alert*/
+  pointer-events: none;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  border-radius: var(--zd_size4);
+}[dir=ltr] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}[dir=rtl] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}
+
+.tooltipcont {
+  color: var(--zdt_tooltip_default_text);
+  font-size: var(--zd_font_size13) ;
+  font-family: var(--zd_semibold);
+  word-break: break-word;
+  max-width: var(--zd_size420) ;
+  line-height: 1.5385;
+  min-height: var(--zd_size24) ;
+  overflow: hidden;
+  background-color: var(--zdt_tooltip_default_bg);
+  padding: 0 var(--zd_size10) ;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--zd_size4);
+}
+
+.tooltipWrapCont {
+  white-space: pre-wrap;
+}
+
+.tooltipNormalCont {
+  white-space: normal;
+}
+.tooltiparrow {
+  content: '';
+  position: absolute;
+  top: 0 ;
+  border-top-left-radius: 3px;
+}
+
+.arrowUp,
+.arrowDown {
+  /*  Variable:Ignore  */
+  width: 11px;
+  /*  Variable:Ignore  */
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  z-index: -1;
+}
+
+.arrowDown {
+  /*  Variable:Ignore  */
+  margin-top: -4px !important;
+  /* put important because of '.wms-mainui *' have margin: 0; */
+}
+
+.arrowLeft,
+.arrowRight {
+  /*  Variable:Ignore  */
+  width: 11px;
+  /*  Variable:Ignore  */
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  z-index: -1;
+}
+
+.arrowRight {
+  /*  Variable:Ignore  */
+  margin-left: -2px;
+}
+
+.arrowLeft {
+  /*  Variable:Ignore  */
+  margin-left: 1px;
+}
+
+.arrowUp {
+  transform: rotate(45deg);
+}
+
+.arrowDown {
+  transform: rotate(225deg);
+}
+
+.arrowLeft {
+  transform: rotate(315deg) translateY(-50%);
+}
+
+.arrowRight {
+  transform: rotate(135deg) translateY(50%);
+}
+@keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-ms-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }

package/lib/common/a11y.module.css

@@ -1,4 +1,4 @@
-:root {
-    --lib_a11y_focusScope_focus_border: var(--zdt_a11y_focusScope_focus_border);
-    --lib_a11y_focusScope_focus_bg: var(--zdt_listitem_highlight_bg);
+:root {
+    --lib_a11y_focusScope_focus_border: var(--zdt_a11y_focusScope_focus_border);
+    --lib_a11y_focusScope_focus_bg: var(--zdt_listitem_highlight_bg);
 }