@zohodesk/components 1.0.0-temp-48 → 1.0.0-temp-49

package/es/MultiSelect/MultiSelect.js

@@ -23,7 +23,7 @@ import style from './MultiSelect.module.css';
 /**** Methods ****/
 
 import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString } from '../utils/Common.js';
-import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions } from '../utils/dropDownUtils';
+import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -35,7 +35,8 @@ export class MultiSelectComponent extends React.Component {
     this.getNextAriaId = getUniqueId(this);
     this.getFilterSuggestions = makeGetFilterSuggestions();
     this.formatOptions = makeFormatOptions();
-    this.getSelectedOptions = makeGetSelectedOptions(); //Use in AdvancedMultiSelect component
+    this.getSelectedOptions = makeGetSelectedOptions();
+    this.getIsShowClearIcon = makeGetIsShowClearIcon(); //Use in AdvancedMultiSelect component
 
     this.objectConcat = makeObjectConcat();
     this.formatSelectedOptions = makeFormatOptions();
@@ -292,7 +293,7 @@ export class MultiSelectComponent extends React.Component {
     } = this.props;
     const highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27)) {
+    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
       suggestions = this.handleFilterSuggestions();
     }
 
@@ -420,6 +421,13 @@ export class MultiSelectComponent extends React.Component {
         });
       }
     } else if (keyCode === 27) {// this.handlePopupClose(e);
+    } else if (keyCode === 9) {
+      const selectedOption = suggestions[hoverOption] || {};
+      const {
+        id
+      } = selectedOption;
+      isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, e);
+      this.handlePopupClose(e);
     }
   }
 
@@ -863,7 +871,9 @@ export class MultiSelectComponent extends React.Component {
       a11y,
       children,
       customChildrenClass,
-      getFooter
+      getFooter,
+      needEffect,
+      disabledOptions
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -889,9 +899,15 @@ export class MultiSelectComponent extends React.Component {
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
-    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
+    let {
+      isShowClearIcon: isShowClear
+    } = this.getIsShowClearIcon({
+      selectedOptions,
+      disabledOptions
+    });
+    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1095,7 +1111,8 @@ MultiSelectComponent.propTypes = {
   children: PropTypes.node,
   customChildrenClass: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func
+  getFooter: PropTypes.func,
+  needEffect: PropTypes.bool
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1125,7 +1142,8 @@ MultiSelectComponent.defaultProps = {
   a11y: {},
   textBoxClass: '',
   palette: 'default',
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 
 if (false) {

package/es/MultiSelect/MultiSelect.module.css

@@ -2,14 +2,9 @@
   position: relative;
 }
 
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
-
-.readOnly {
-  composes: readonly from '../common/common.module.css';
-}
-
 .container {
   max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
@@ -22,28 +17,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_multiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_multiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_multiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_multiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_multiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_multiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_multiselect_dark_active_border);
 }
 

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -87,7 +87,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       a11y,
       children,
       customChildrenClass,
-      isBoxPaddingNeed
+      isBoxPaddingNeed,
+      needEffect
     } = this.props;
     const {
       clearText = 'Clear all'
@@ -115,7 +116,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
+      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -288,6 +289,7 @@ MultiSelectWithAvatarComponent.propTypes = {
   palette: PropTypes.oneOf(['default', 'dark']),
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
+  needEffect: PropTypes.bool,
 
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
@@ -337,7 +339,8 @@ MultiSelectWithAvatarComponent.defaultProps = {
   a11y: {},
   palette: 'default',
   isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);

package/es/MultiSelect/SelectedOptions.js

@@ -37,13 +37,14 @@ export default class SelectedOptions extends React.PureComponent {
       } = option;
       const commonProps = {
         disabled: isDisabled,
-        onRemove: isDisabled ? null : onRemove,
+        onRemove: isDisabled || isReadOnly ? null : onRemove,
         text: value,
         palette: isDarkPalette,
         onSelectTag: isReadOnly ? null : onSelect,
         getRef: getRef,
         initial: value,
-        id: id
+        id: id,
+        isReadOnly: isReadOnly
       };
 
       if (optionType === 'avatar') {

package/es/PopOver/PopOver.js

@@ -135,26 +135,25 @@ PopOver.propTypes = {
   size: PropTypes.string,
   togglePopup: PropTypes.func,
   top: PropTypes.string
-};
-PopOver.propTypesDescription = {
-  right: ' ',
-  left: ' ',
-  top: ' ',
-  bottom: ' ',
-  arrowRight: ' ',
-  arrowLeft: ' ',
-  arrowTop: ' ',
-  arrowBottom: ' ',
-  arrowPosition: ' ',
-  boxPosition: ' ',
-  size: ' ',
-  children: ' ',
-  onPopupOpen: ' ',
-  isPopupOpen: ' ',
-  onPopupClose: ' ',
-  getTargetRef: ' ',
-  getContainerRef: ' '
-};
+}; // PopOver.propTypesDescription = {
+//   right: ' ',
+//   left: ' ',
+//   top: ' ',
+//   bottom: ' ',
+//   arrowRight: ' ',
+//   arrowLeft: ' ',
+//   arrowTop: ' ',
+//   arrowBottom: ' ',
+//   arrowPosition: ' ',
+//   boxPosition: ' ',
+//   size: ' ',
+//   children: ' ',
+//   onPopupOpen: ' ',
+//   isPopupOpen: ' ',
+//   onPopupClose: ' ',
+//   getTargetRef: ' ',
+//   getContainerRef: ' '
+// };
 
 if (false) {
   PopOver.docs = {

package/es/PopOver/PopOver.module.css

@@ -1,6 +1,6 @@
 .popup {
   position: relative;
-  background-color: var(--dot_bg_white);
+  background-color: var(--dot_white);
 }
 .target {
   composes: offSelection from '../common/common.module.css';

package/es/Popup/Popup.js

@@ -422,7 +422,7 @@ const Popup = function (Component) {
       // isResizeHandling --->>> Window resize and dropBox resize
       const {
         direction
-      } = this.context;
+      } = this.context || {};
       const {
         placeHolderElement,
         dropElement

package/es/Provider/Config.js

@@ -5,7 +5,8 @@ let id = {
   idPrefix: 'ZD',
   scrollFetchLimit: 80,
   isReducedMotion: false,
-  direction: 'ltr'
+  direction: 'ltr',
+  tooltipDebounce: 175
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/Provider.js

@@ -4,30 +4,30 @@ import { Container } from './Layout';
 import Switch from './Switch/Switch';
 /* default mode & theme css */
 
-import './Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import './Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import './Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import './Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import './Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import './Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import './Appearance/default/mode/defaultMode.module.css';
+import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
+import '../assets/Appearance/default/mode/defaultMode.module.css';
 /* dark mode & theme css */
 
-import './Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import './Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import './Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import './Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import './Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import './Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import './Appearance/dark/mode/darkMode.module.css';
+import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
+import '../assets/Appearance/dark/mode/darkMode.module.css';
 import LibraryContext from './Provider/LibraryContextInit';
 import { setGlobalIdPrefix } from './Provider/IdProvider';
 export default class Provider extends React.Component {

package/es/Radio/Radio.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Label from '../Label/Label';
 import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
 import style from './Radio.module.css';
 export default class Radio extends React.Component {
   constructor(props) {
@@ -45,7 +44,7 @@ export default class Radio extends React.Component {
       customRadio = '',
       customLabel = ''
     } = customClass;
-    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
+    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
     let {
       ariaHidden,

package/es/Radio/Radio.module.css

@@ -18,8 +18,8 @@
 .pointer {
   cursor: pointer;
 }
-.readonly {
-  cursor: default;
+.readonly, .disabled {
+  cursor: not-allowed;
 }
 .radio {
   composes: offSelection from '../common/common.module.css';

package/es/Responsive/ResizeComponent.js

@@ -42,7 +42,7 @@ export default class ResizeComponent extends React.Component {
           let newAdded = false;
           mutation.addedNodes.forEach(mut => {
             // Here we can listen for icon nodes. Confirm with bk
-            if (mut.attributes['data-responsive'] && (childrenList.length !== this.querySelector().length || this.childrenCurrentList.length !== this.querySelector().length)) {
+            if (mut.attributes && mut.attributes['data-responsive'] && (childrenList.length !== this.querySelector().length || this.childrenCurrentList.length !== this.querySelector().length)) {
               newAdded = true;
             }
           });

package/es/Ribbon/Ribbon.js

@@ -38,14 +38,14 @@ Ribbon.propTypes = {
   text: PropTypes.string,
   type: PropTypes.oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
   customClass: PropTypes.string
-};
-Ribbon.propTypesDescription = {
-  text: ' ',
-  type: ' ',
-  children: ' ',
-  palette: ' ',
-  size: ' '
-};
+}; // Ribbon.propTypesDescription = {
+//   text: ' ',
+//   type: ' ',
+//   children: ' ',
+//   palette: ' ',
+//   size: ' '
+// };
+
 Ribbon.defaultProps = {
   palette: 'default',
   size: 'large',

package/es/RippleEffect/RippleEffect.js

@@ -10,9 +10,10 @@ export default function RippleEffect(props) {
     palette,
     hoverType,
     isNeedEffect,
-    needBorder
+    needBorder,
+    isCopyTextEnabled
   } = props;
-  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isDisabled ? CssProvider('isDisabled') : ''}` : '';
+  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
   let child = React.Children.only(children);
   return /*#__PURE__*/React.cloneElement(child, {
     className: `${child.props.className || ''} ${className}`
@@ -24,7 +25,8 @@ RippleEffect.defaultProps = {
   isNeedEffect: true,
   needBorder: true,
   hoverType: 'default',
-  palette: 'default'
+  palette: 'default',
+  isCopyTextEnabled: false
 };
 RippleEffect.propTypes = {
   children: PropTypes.node,
@@ -33,7 +35,8 @@ RippleEffect.propTypes = {
   isDisabled: PropTypes.bool,
   isNeedEffect: PropTypes.bool,
   needBorder: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger'])
+  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  isCopyTextEnabled: PropTypes.bool
 };
 
 if (false) {

package/es/RippleEffect/RippleEffect.module.css

@@ -65,3 +65,6 @@
 .hoverEffect:hover.primaryDark.bgHover, .hoverEffect:focus.primaryDark.bgHover {
   background-color: var(--zdt_rippleeffect_primary_dark_bg);
 }
+.notAllowed {
+  cursor: not-allowed;
+}

package/es/Select/Select.js

@@ -346,6 +346,20 @@ export class SelectComponent extends Component {
       this.valueInput && this.valueInput.focus({
         preventScroll: true
       }); //this.handlePopupClose(e);
+    } else if (keyCode === 9) {
+      let option = options[hoverIndex];
+      let {
+        id
+      } = option || {};
+
+      if (isPopupOpen && !getIsEmptyValue(id)) {
+        onChange && onChange(id, optionsNormalize[id]);
+        needCloseOnSelect && this.handlePopupClose(e);
+      }
+
+      if (!isPopupOpen && isPopupOpenOnEnter) {
+        this.togglePopup(e);
+      }
     }
   }
 

package/es/Select/Select.module.css

@@ -47,7 +47,7 @@
   padding: var(--zd_size10) 0;
 }
 .readonly {
-  composes: readonly from '../common/common.module.css';
+  --textboxicon_icon_cursor: not-allowed;
 }
 .transparentContainer .arrowIcon {
   opacity: 0;

package/es/Select/SelectWithAvatar.js

@@ -141,7 +141,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       tagSize,
       groupName,
       i18nKeys,
-      htmlId
+      htmlId,
+      needEffect
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -164,7 +165,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${className ? className : ''}`,
+      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Container, {
@@ -342,7 +343,8 @@ SelectWithAvatarComponent.propTypes = {
   title: PropTypes.string,
   togglePopup: PropTypes.func,
   valueField: PropTypes.string,
-  htmlId: PropTypes.string
+  htmlId: PropTypes.string,
+  needEffect: PropTypes.bool
 };
 SelectWithAvatarComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -363,7 +365,8 @@ SelectWithAvatarComponent.defaultProps = {
   dataId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
-  i18nKeys: {}
+  i18nKeys: {},
+  needEffect: true
 };
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);

package/es/Stencils/Stencils.js

@@ -30,12 +30,11 @@ Stencils.defaultProps = {
   shape: 'rect',
   size: 'medium',
   customClass: ''
-};
-Stencils.propTypesDescription = {
-  shape: ' ',
-  size: ' ',
-  palette: ' '
-};
+}; // Stencils.propTypesDescription = {
+//   shape: ' ',
+//   size: ' ',
+//   palette: ' '
+// };
 
 if (false) {
   Stencils.docs = {

package/es/Stencils/Stencils.module.css

@@ -14,28 +14,18 @@
   background-size: 800px 1px;
 }
 [dir=ltr] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-ltr ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-ltr ;
-  -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-rtl ;
-  -webkit-animation-timing-function: linear;
 }
 @keyframes placeHolderShimmer-ltr {
   0% {

package/es/Tab/Tabs.js

@@ -266,13 +266,14 @@ class Tabs extends React.Component {
     let {
       children,
       maxTabsCount,
-      minTabsCount
+      minTabsCount,
+      isResponsive
     } = this.props;
     let mainTabs = [],
         moreTabs = [],
         otherTabs = [];
 
-    if (totalDimension) {
+    if (totalDimension && isResponsive) {
       let {
         childType,
         selectedTab
@@ -318,6 +319,17 @@ class Tabs extends React.Component {
         mainTabs = newTabs; */
         this.setMaxDim(totalDimension);
       }
+    } else if (!isResponsive) {
+      let {
+        childType
+      } = this.props;
+      React.Children.forEach(children, child => {
+        if (child && child.type === childType && child.props.id) {
+          mainTabs.push(child);
+        } else {
+          otherTabs.push(child);
+        }
+      });
     } else {
       moreTabs = children;
     }

package/es/Tag/Tag.js

@@ -78,7 +78,9 @@ export default class Tag extends PureComponent {
       tooltip,
       avatarPalette,
       customClass,
-      a11y
+      a11y,
+      needEffect,
+      isReadOnly
     } = this.props;
     let {
       customTag = '',
@@ -93,7 +95,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
       ref: this.getRef,
@@ -148,7 +150,9 @@ Tag.defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  a11y: {}
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false
 };
 Tag.propTypes = {
   active: PropTypes.bool,
@@ -179,7 +183,9 @@ Tag.propTypes = {
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
-  })
+  }),
+  needEffect: PropTypes.bool,
+  isReadOnly: PropTypes.bool
 };
 
 if (false) {