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

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

@@ -8,80 +8,83 @@ 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, ({
-      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"))))));
+    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"))));
+    }));
   }
 
 }

package/es/Responsive/sizeObservers.js

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

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

@@ -1,4 +1,3 @@
-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,10 +10,9 @@ export default function RippleEffect(props) {
     palette,
     hoverType,
     isNeedEffect,
-    needBorder,
-    isCopyTextEnabled
+    needBorder
   } = props;
-  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 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 child = React.Children.only(children);
   return /*#__PURE__*/React.cloneElement(child, {
     className: `${child.props.className || ''} ${className}`
@@ -25,8 +24,7 @@ RippleEffect.defaultProps = {
   isNeedEffect: true,
   needBorder: true,
   hoverType: 'default',
-  palette: 'default',
-  isCopyTextEnabled: false
+  palette: 'default'
 };
 RippleEffect.propTypes = {
   children: PropTypes.node,
@@ -35,8 +33,7 @@ RippleEffect.propTypes = {
   isDisabled: PropTypes.bool,
   isNeedEffect: PropTypes.bool,
   needBorder: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
-  isCopyTextEnabled: PropTypes.bool
+  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger'])
 };
 
 if (false) {

package/es/RippleEffect/RippleEffect.module.css

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

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);
+      }
     }
   }
 
@@ -441,7 +455,8 @@ export class SelectComponent extends Component {
     }
   }
 
-  handleFetchOptions(APICall, searchStr = '') {
+  handleFetchOptions(APICall) {
+    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     // 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 {
-  --textboxicon_icon_cursor: not-allowed;
+  composes: readonly from '../common/common.module.css';
 }
 .transparentContainer .arrowIcon {
   opacity: 0;

package/es/Select/SelectWithAvatar.js

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

package/es/Select/docs/Select__default.docs.js

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

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

@@ -1,4 +1,3 @@
-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,32 +22,33 @@ const tabTypes = {
     tab: 'tabDelta'
   }
 };
-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
-}) {
+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;
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();

package/es/Tab/TabContent.js

@@ -4,20 +4,23 @@ import { Container } from '../Layout';
 import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
-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);
+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);
+};
 
 TabContent.defaultProps = {
   dataId: 'tabContent'

package/es/Tab/TabContentWrapper.js

@@ -3,20 +3,23 @@ import { PropTypes } from 'prop-types';
 import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
-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));
+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));
+};
 
 TabContentWrapper.defaultProps = {
   children: []

package/es/Tab/TabWrapper.js

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

package/es/Tab/Tabs.js

@@ -95,7 +95,8 @@ class Tabs extends React.Component {
     }
   }
 
-  setMaxDim(totalDimension = 0) {
+  setMaxDim() {
+    let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     let {
       selectedTab
     } = this.props; // let actual = Object.keys(tabDimensions).reduce(

package/es/Tab/docs/Tab__default.docs.js

@@ -1,4 +1,3 @@
-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,9 +78,7 @@ export default class Tag extends PureComponent {
       tooltip,
       avatarPalette,
       customClass,
-      a11y,
-      needEffect,
-      isReadOnly
+      a11y
     } = this.props;
     let {
       customTag = '',
@@ -95,7 +93,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", {
-      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}`,
+      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}`,
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
       ref: this.getRef,
@@ -150,9 +148,7 @@ Tag.defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  a11y: {},
-  needEffect: true,
-  isReadOnly: false
+  a11y: {}
 };
 Tag.propTypes = {
   active: PropTypes.bool,
@@ -183,9 +179,7 @@ Tag.propTypes = {
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
-  }),
-  needEffect: PropTypes.bool,
-  isReadOnly: PropTypes.bool
+  })
 };
 
 if (false) {