@zohodesk/components 1.0.0-temp-206.4 → 1.0.0-temp-207

package/lib/ListItem/ListItemWithAvatar.js

@@ -128,9 +128,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText,
-          onAvatarClick = _this$props4.onAvatarClick,
-          avatarSize = _this$props4.avatarSize;
+          needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -173,7 +171,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         className: _ListItemModule["default"].leftAvatar
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
         name: name,
-        size: avatarSize,
+        size: "small",
         src: imgSrc,
         needTitle: needAvatarTitle,
         textPalette: isDarkPalette ? 'white' : '',
@@ -181,18 +179,16 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         customClass: {
           customAvatar: customAvatar,
           customAvatarTeam: customAvatarTeam
-        },
-        onClick: onAvatarClick
+        }
       }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
         name: name,
-        size: avatarSize,
+        size: "small",
         src: imgSrc,
         initial: initial,
         textPalette: isDarkPalette ? 'white' : '',
         needTitle: needAvatarTitle,
         palette: isDarkPalette ? 'info' : avatarPalette,
-        customClass: customAvatar,
-        onClick: onAvatarClick
+        customClass: customAvatar
       })) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/ListItem/props/defaultProps.js

@@ -47,7 +47,6 @@ var ListItemWithAvatarDefaultProps = {
   needTick: false,
   palette: 'default',
   size: 'medium',
-  avatarSize: 'small',
   value: 'List',
   dataId: 'listAvatar',
   needBorder: true,

package/lib/ListItem/props/propTypes.js

@@ -7,8 +7,6 @@ exports.ListItem_Props = exports.ListItemWithRadio_Props = exports.ListItemWithI
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = require("../../Avatar/props/propTypes.js");
-
 var _ListItemWithAvatar_P;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -85,7 +83,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "avatarSize", _propTypes2.propTypes.size), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
@@ -95,7 +93,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customAvatarTeam: _propTypes["default"].string
 })), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object
-})), _defineProperty(_ListItemWithAvatar_P, "onAvatarClick", _propTypes["default"].func), _ListItemWithAvatar_P);
+})), _ListItemWithAvatar_P);
 exports.ListItemWithAvatar_Props = ListItemWithAvatar_Props;
 var ListItemWithCheckBox_Props = {
   active: _propTypes["default"].bool,

package/lib/MultiSelect/Suggestions.js

@@ -70,7 +70,6 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           getRef = _this$props.getRef,
           hoverOption = _this$props.hoverOption,
           onClick = _this$props.onClick,
-          onAvatarClick = _this$props.onAvatarClick,
           onMouseEnter = _this$props.onMouseEnter,
           needTick = _this$props.needTick,
           needBorder = _this$props.needBorder,
@@ -135,7 +134,6 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             key: "".concat(id, "avatarListItem"),
             name: value,
             onClick: onClick,
-            onAvatarClick: onAvatarClick,
             onMouseEnter: onMouseEnter,
             value: value,
             title: value,

package/lib/MultiSelect/props/propTypes.js

@@ -183,7 +183,6 @@ var Suggestions_propTypes = {
   needBorder: _propTypes["default"].bool,
   needTick: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
-  onAvatarClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
   palette: _propTypes["default"].string,
   selectedOptions: _propTypes["default"].array,

package/lib/Responsive/CustomResponsive.js

@@ -62,8 +62,7 @@ function ResponsiveSender(props) {
   // variables
   var children = props.children,
       domRefKey = props.domRefKey,
-      responsiveId = props.responsiveId,
-      elementRef = props.elementRef;
+      responsiveId = props.responsiveId;
 
   function init() {
     var size = {
@@ -93,13 +92,7 @@ function ResponsiveSender(props) {
     var observer = new _ResizeObserver["default"](onResize);
 
     function containerRef(node) {
-      if (!elementRef) {
-        observer.replaceObservationElement(node);
-      }
-    }
-
-    if (elementRef) {
-      observer.replaceObservationElement(elementRef);
+      observer.replaceObservationElement(node);
     }
 
     return {
@@ -108,7 +101,7 @@ function ResponsiveSender(props) {
     };
   }
 
-  var _useMemo = (0, _react.useMemo)(init, [elementRef]),
+  var _useMemo = (0, _react.useMemo)(init, []),
       containerRef = _useMemo.containerRef,
       childContext = _useMemo.childContext;
 

package/lib/Responsive/props/propTypes.js

@@ -12,8 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var CustomResponsiveSender_propTypes = {
   children: _propTypes["default"].any.isRequired,
   domRefKey: _propTypes["default"].string,
-  responsiveId: _propTypes["default"].string,
-  elementRef: _propTypes["default"].element
+  responsiveId: _propTypes["default"].string
 };
 exports.CustomResponsiveSender_propTypes = CustomResponsiveSender_propTypes;
 var CustomResponsiveReceiver_propTypes = {

package/lib/Tab/Tabs.js

@@ -442,7 +442,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "moreTabSelect",
     value: function moreTabSelect(tab, value, index, e) {
-      var onSelect = this.props.onSelect;
+      var _this$props7 = this.props,
+          onSelect = _this$props7.onSelect,
+          closePopupOnly = _this$props7.closePopupOnly;
 
       if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
         (0, _Common.cancelBubblingEffect)(e);
@@ -451,7 +453,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
 
       e.preventDefault();
       onSelect(tab);
-      this.togglePopup();
+      closePopupOnly();
     }
   }, {
     key: "onScroll",
@@ -463,11 +465,11 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "togglePopup",
     value: function togglePopup(e) {
-      var _this$props7 = this.props,
-          boxPosition = _this$props7.boxPosition,
-          togglePopup = _this$props7.togglePopup,
-          align = _this$props7.align,
-          removeClose = _this$props7.removeClose;
+      var _this$props8 = this.props,
+          boxPosition = _this$props8.boxPosition,
+          togglePopup = _this$props8.togglePopup,
+          align = _this$props8.align,
+          removeClose = _this$props8.removeClose;
       removeClose && removeClose(e);
       var popupPosition = align === 'vertical' ? 'bottomLeft' : 'rightTop';
       boxPosition = boxPosition ? boxPosition : popupPosition;
@@ -540,44 +542,43 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         size: "small"
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: _TabsModule["default"].emptyStateTitle
-      }, searchErrorText)); // return <EmptySearch size='small' />;
+      }, searchErrorText));
     }
   }, {
     key: "renderTabs",
     value: function renderTabs(mainTabs, moreTabs, isVirtual) {
       var _this8 = this;
 
-      var _this$props8 = this.props,
-          selectedTab = _this$props8.selectedTab,
-          moreButtonClass = _this$props8.moreButtonClass,
-          moreButtonActiveClass = _this$props8.moreButtonActiveClass,
-          moreBoxClass = _this$props8.moreBoxClass,
-          menuItemClass = _this$props8.menuItemClass,
-          itemClass = _this$props8.itemClass,
-          itemActiveClass = _this$props8.itemActiveClass,
-          iconName = _this$props8.iconName,
-          isPopupReady = _this$props8.isPopupReady,
-          isPopupOpen = _this$props8.isPopupOpen,
-          getContainerRef = _this$props8.getContainerRef,
-          showTitleInMoreOptions = _this$props8.showTitleInMoreOptions,
-          onSelect = _this$props8.onSelect,
-          moreContainerClass = _this$props8.moreContainerClass,
-          align = _this$props8.align,
-          type = _this$props8.type,
-          isAnimate = _this$props8.isAnimate,
-          needTabBorder = _this$props8.needTabBorder,
-          needAppearance = _this$props8.needAppearance,
-          iconSize = _this$props8.iconSize,
-          getTargetRef = _this$props8.getTargetRef,
-          position = _this$props8.position,
-          customProps = _this$props8.customProps,
-          getCustomDropBoxHeaderPlaceHolder = _this$props8.getCustomDropBoxHeaderPlaceHolder,
-          dataSelectorId = _this$props8.dataSelectorId,
-          dataId = _this$props8.dataId,
-          placeHolderText = _this$props8.placeHolderText,
-          searchBoxSize = _this$props8.searchBoxSize,
-          ariaTitleId = _this$props8.ariaTitleId,
-          removeClose = _this$props8.removeClose;
+      var _this$props9 = this.props,
+          selectedTab = _this$props9.selectedTab,
+          moreButtonClass = _this$props9.moreButtonClass,
+          moreButtonActiveClass = _this$props9.moreButtonActiveClass,
+          moreBoxClass = _this$props9.moreBoxClass,
+          menuItemClass = _this$props9.menuItemClass,
+          itemClass = _this$props9.itemClass,
+          itemActiveClass = _this$props9.itemActiveClass,
+          iconName = _this$props9.iconName,
+          isPopupReady = _this$props9.isPopupReady,
+          isPopupOpen = _this$props9.isPopupOpen,
+          getContainerRef = _this$props9.getContainerRef,
+          showTitleInMoreOptions = _this$props9.showTitleInMoreOptions,
+          onSelect = _this$props9.onSelect,
+          moreContainerClass = _this$props9.moreContainerClass,
+          align = _this$props9.align,
+          type = _this$props9.type,
+          isAnimate = _this$props9.isAnimate,
+          needTabBorder = _this$props9.needTabBorder,
+          needAppearance = _this$props9.needAppearance,
+          iconSize = _this$props9.iconSize,
+          getTargetRef = _this$props9.getTargetRef,
+          position = _this$props9.position,
+          customProps = _this$props9.customProps,
+          getCustomDropBoxHeaderPlaceHolder = _this$props9.getCustomDropBoxHeaderPlaceHolder,
+          dataSelectorId = _this$props9.dataSelectorId,
+          dataId = _this$props9.dataId,
+          placeHolderText = _this$props9.placeHolderText,
+          searchBoxSize = _this$props9.searchBoxSize,
+          removeClose = _this$props9.removeClose;
       var searchValue = this.state.searchValue;
       var _customProps$DropBoxP = customProps.DropBoxProps,
           DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
@@ -651,7 +652,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           },
           boxPosition: position,
           getRef: getContainerRef,
-          isBoxPaddingNeed: false,
+          isBoxPaddingNeed: true,
           isArrow: false
         }, DropBoxProps, {
           isResponsivePadding: true,
@@ -672,14 +673,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
               'data-a11y-autofocus': true
             }
           },
-          dataId: "".concat(dataId, "_search"),
-          a11y: {
-            role: 'combobox',
-            ariaOwns: ariaTitleId,
-            ariaAutocomplete: 'list',
-            ariaHaspopup: true,
-            ariaExpanded: true
-          }
+          dataId: "".concat(dataId, "_search")
         }, TextBoxIconProps))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,
@@ -717,21 +711,21 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props9 = this.props,
-          style = _this$props9.style,
-          className = _this$props9.className,
-          dataId = _this$props9.dataId,
-          highlightClass = _this$props9.highlightClass,
-          type = _this$props9.type,
-          isAnimate = _this$props9.isAnimate,
-          needTabBorder = _this$props9.needTabBorder,
-          needBorder = _this$props9.needBorder,
-          needPadding = _this$props9.needPadding,
-          align = _this$props9.align,
-          needAppearance = _this$props9.needAppearance,
-          children = _this$props9.children,
-          containerClass = _this$props9.containerClass,
-          dataSelectorId = _this$props9.dataSelectorId;
+      var _this$props10 = this.props,
+          style = _this$props10.style,
+          className = _this$props10.className,
+          dataId = _this$props10.dataId,
+          highlightClass = _this$props10.highlightClass,
+          type = _this$props10.type,
+          isAnimate = _this$props10.isAnimate,
+          needTabBorder = _this$props10.needTabBorder,
+          needBorder = _this$props10.needBorder,
+          needPadding = _this$props10.needPadding,
+          align = _this$props10.align,
+          needAppearance = _this$props10.needAppearance,
+          children = _this$props10.children,
+          containerClass = _this$props10.containerClass,
+          dataSelectorId = _this$props10.dataSelectorId;
       var _this$state2 = this.state,
           totalDimension = _this$state2.totalDimension,
           tabDimensions = _this$state2.tabDimensions,

package/lib/Tab/Tabs.module.css

@@ -141,7 +141,7 @@
 }
 
 .emptyStateContainer {
-  padding-bottom: var(--zd_size25);
+  padding-bottom: var(--zd_size15) ;
 }
 
 .emptyStateTitle {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding: var(--zd_size10) 0 ;
+  padding-top: var(--zd_size10) ;
 }

package/lib/Tab/props/propTypes.js

@@ -106,8 +106,8 @@ var Tabs_propTypes = {
   dataSelectorId: _propTypes["default"].string,
   placeHolderText: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
-  ariaTitleId: _propTypes["default"].string,
-  searchErrorText: _propTypes["default"].string
+  searchErrorText: _propTypes["default"].string,
+  closePopupOnly: _propTypes["default"].func
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {

package/lib/Tag/Tag.js

@@ -140,8 +140,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           customAttributes = _this$props4.customAttributes,
           a11y = _this$props4.a11y,
           needEffect = _this$props4.needEffect,
-          isReadOnly = _this$props4.isReadOnly,
-          onAvatarClick = _this$props4.onAvatarClick;
+          isReadOnly = _this$props4.isReadOnly;
       var _customClass$customTa = customClass.customTag,
           customTag = _customClass$customTa === void 0 ? '' : _customClass$customTa,
           _customClass$customTa2 = customClass.customTagClose,
@@ -173,8 +172,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         size: "small",
         src: imageURL,
         textPalette: isDarkPalette ? 'white' : '',
-        customClass: customAvatar,
-        onClick: onAvatarClick
+        customClass: customAvatar
       })) : null, iconName ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagModule["default"].icon, " ").concat(customTagIcon),
         "aria-hidden": true

package/lib/Tag/props/propTypes.js

@@ -42,7 +42,6 @@ var propTypes = {
   }),
   needEffect: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  onAvatarClick: _propTypes["default"].func
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;