@zohodesk/components 1.0.0-temp-40 → 1.0.0-temp-41

package/es/Responsive/docs/Responsive__default.docs.js

@@ -8,83 +8,80 @@ import { Container, Box } from '../../Layout';
 import style from './style.module.css';
 export default class Responsive__default extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, _ref => {
-      let {
-        breakPoint,
-        deviceUpto,
-        deviceBetween,
-        deviceOnly,
-        isTouchDevice
-      } = _ref;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-        className: style.header
-      }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
-      }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
-      }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
-      }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
-      }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
-      }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
-      }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
-      }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
-      }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
-      }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
-      }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
-      }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
-      }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
-      }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
-      }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
-      }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
-      }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
-      }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
-      }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
-      }, "MOBILE"))));
-    }));
+    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, ({
+      breakPoint,
+      deviceUpto,
+      deviceBetween,
+      deviceOnly,
+      isTouchDevice
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      className: style.header
+    }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      scroll: "vertical"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
+    }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
+    }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
+    }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
+    }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
+    }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
+    }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
+    }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
+    }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
+    }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
+    }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
+    }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
+    }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
+    }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
+    }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
+    }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
+    }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
+    }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
+    }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
+    }, "MOBILE"))))));
   }
 
 }

package/es/Responsive/sizeObservers.js

@@ -68,11 +68,7 @@ export class Subscribale {
     this.subscribers.length && this.disconnect();
   }
 
-  dispatch() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  dispatch(...args) {
     this.subscribers.forEach(subscriber => {
       subscriber(...args);
     });

package/es/Ribbon/__tests__/Ribbon.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import Ribbon from '../Ribbon';
 import renderer from 'react-test-renderer';

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/GroupSelect.js

@@ -489,8 +489,7 @@ export class GroupSelectComponent extends PureComponent {
     }
   }
 
-  handleFetchOptions(APICall) {
-    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchStr = '') {
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false

package/es/Select/Select.js

@@ -441,8 +441,7 @@ export class SelectComponent extends Component {
     }
   }
 
-  handleFetchOptions(APICall) {
-    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchStr = '') {
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false

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/Select/docs/Select__default.docs.js

@@ -87,8 +87,7 @@ export default class Select__default extends React.Component {
     });
   }
 
-  customChildren() {
-    let serach = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  customChildren(serach = {}) {
     return /*#__PURE__*/React.createElement("div", null, serach.searchString, "Custom Children");
   }
 

package/es/Stencils/__tests__/Stencils.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import Stencils from '../Stencils';
 import renderer from 'react-test-renderer';

package/es/Tab/Tab.js

@@ -22,33 +22,32 @@ const tabTypes = {
     tab: 'tabDelta'
   }
 };
-export default function Tab(_ref) {
-  let {
-    id,
-    style,
-    text,
-    children,
-    className,
-    dataId,
-    title,
-    titlePosition,
-    activeClass,
-    href,
-    isLink,
-    isDisabled,
-    tourId,
-    onClick,
-    isActive,
-    getTabRef,
-    onSelect,
-    type,
-    isAnimate,
-    needBorder,
-    needAppearance,
-    align,
-    isVirtual,
-    customProps
-  } = _ref;
+export default function Tab({
+  id,
+  style,
+  text,
+  children,
+  className,
+  dataId,
+  title,
+  titlePosition,
+  activeClass,
+  href,
+  isLink,
+  isDisabled,
+  tourId,
+  onClick,
+  isActive,
+  getTabRef,
+  onSelect,
+  type,
+  isAnimate,
+  needBorder,
+  needAppearance,
+  align,
+  isVirtual,
+  customProps
+}) {
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();

package/es/Tab/TabContent.js

@@ -4,23 +4,20 @@ import { Container } from '../Layout';
 import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
-const TabContent = _ref => {
-  let {
-    children,
-    scroll,
-    dataId,
-    id
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Container, {
-    className: style.container,
-    scroll: scroll,
-    dataId: `${dataId}_TabContent`,
-    isScrollAttribute: true,
-    "aria-labelledby": id,
-    tabindex: "0",
-    role: "tabpanel"
-  }, children);
-};
+const TabContent = ({
+  children,
+  scroll,
+  dataId,
+  id
+}) => /*#__PURE__*/React.createElement(Container, {
+  className: style.container,
+  scroll: scroll,
+  dataId: `${dataId}_TabContent`,
+  isScrollAttribute: true,
+  "aria-labelledby": id,
+  tabindex: "0",
+  role: "tabpanel"
+}, children);
 
 TabContent.defaultProps = {
   dataId: 'tabContent'

package/es/Tab/TabContentWrapper.js

@@ -3,23 +3,20 @@ import { PropTypes } from 'prop-types';
 import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
-const TabContentWrapper = _ref => {
-  let {
-    style,
-    className,
-    children,
-    dataId,
-    selectedTab,
-    onScroll
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    style: style,
-    dataId: dataId,
-    className: className,
-    onScroll: onScroll
-  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
-};
+const TabContentWrapper = ({
+  style,
+  className,
+  children,
+  dataId,
+  selectedTab,
+  onScroll
+}) => /*#__PURE__*/React.createElement(Box, {
+  flexible: true,
+  style: style,
+  dataId: dataId,
+  className: className,
+  onScroll: onScroll
+}, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 
 TabContentWrapper.defaultProps = {
   children: []

package/es/Tab/TabWrapper.js

@@ -4,21 +4,20 @@ import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Container } from '../Layout';
 
-function TabWrapper(_ref) {
-  let {
-    defaultTab,
-    hookToDisableInternalState,
-    onSelect,
-    type,
-    isAnimate,
-    needTabBorder,
-    needBorder,
-    needPadding,
-    needAppearance,
-    align,
-    dataId,
-    children
-  } = _ref;
+function TabWrapper({
+  defaultTab,
+  hookToDisableInternalState,
+  onSelect,
+  type,
+  isAnimate,
+  needTabBorder,
+  needBorder,
+  needPadding,
+  needAppearance,
+  align,
+  dataId,
+  children
+}) {
   let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
   const setSelectedTab = useCallback(id => {
     if (!hookToDisableInternalState) {

package/es/Tab/Tabs.js

@@ -95,8 +95,7 @@ class Tabs extends React.Component {
     }
   }
 
-  setMaxDim() {
-    let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  setMaxDim(totalDimension = 0) {
     let {
       selectedTab
     } = this.props; // let actual = Object.keys(tabDimensions).reduce(
@@ -266,13 +265,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 +318,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/Tab/docs/Tab__default.docs.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.string.replace";
 import React from 'react';
 import { TabWrapper, Tabs, Tab, TabContentWrapper, TabContent } from '../';
 import { Container, Box } from '../../Layout';

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) {