@zohodesk/components 1.0.0-temp-999 → 1.0.0-temp-69

package/lib/Tab/TabContentWrapper.js

@@ -7,7 +7,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("prop-types");
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _Layout = require("../Layout");
 
@@ -32,16 +34,7 @@ var TabContentWrapper = function TabContentWrapper(_ref) {
   }));
 };
 
-TabContentWrapper.defaultProps = {
-  children: []
-};
-TabContentWrapper.propTypes = {
-  children: _propTypes.PropTypes.node,
-  className: _propTypes.PropTypes.string,
-  dataId: _propTypes.PropTypes.string,
-  onScroll: _propTypes.PropTypes.func,
-  selectedTab: _propTypes.PropTypes.string,
-  style: _propTypes.PropTypes.object
-};
+TabContentWrapper.defaultProps = _defaultProps.TabContentWrapper_defaultProps;
+TabContentWrapper.propTypes = _propTypes.TabContentWrapper_propTypes;
 var _default = TabContentWrapper;
 exports["default"] = _default;

package/lib/Tab/TabWrapper.js

@@ -9,11 +9,11 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
 
-var _Layout = require("../Layout");
+var _propTypes = require("./props/propTypes");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _Layout = require("../Layout");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -81,29 +81,7 @@ function TabWrapper(_ref) {
   }));
 }
 
-TabWrapper.propTypes = {
-  align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
-  children: _propTypes["default"].node,
-  dataId: _propTypes["default"].string,
-  defaultTab: _propTypes["default"].string,
-  hookToDisableInternalState: _propTypes["default"].bool,
-  isAnimate: _propTypes["default"].bool,
-  needAppearance: _propTypes["default"].bool,
-  needBorder: _propTypes["default"].bool,
-  needPadding: _propTypes["default"].bool,
-  needTabBorder: _propTypes["default"].bool,
-  onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'zeta'])
-};
-TabWrapper.defaultProps = {
-  hookToDisableInternalState: false,
-  isAnimate: false,
-  needBorder: true,
-  needPadding: true,
-  needTabBorder: false,
-  type: 'alpha',
-  align: 'vertical',
-  needAppearance: true
-};
+TabWrapper.propTypes = _propTypes.TabWrapper_propTypes;
+TabWrapper.defaultProps = _defaultProps.TabWrapper_defaultProps;
 var _default = TabWrapper;
 exports["default"] = _default;

package/lib/Tab/Tabs.js

@@ -9,15 +9,15 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Tab = _interopRequireDefault(require("./Tab"));
 
-var _Common = require("../utils/Common");
+var _defaultProps = require("./props/defaultProps");
 
-var _Layout = require("../Layout");
+var _propTypes = require("./props/propTypes");
 
-var _Tab = _interopRequireDefault(require("./Tab"));
+var _Common = require("../utils/Common");
 
-var _DropBox = _interopRequireDefault(require("../DropBox/DropBox"));
+var _Layout = require("../Layout");
 
 var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
 
@@ -29,8 +29,16 @@ var _TabsModule = _interopRequireDefault(require("./Tabs.module.css"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
+var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
+
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -446,6 +454,16 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       boxPosition = boxPosition ? boxPosition : popupPosition;
       togglePopup(e, boxPosition);
     }
+  }, {
+    key: "responsiveFunc",
+    value: function responsiveFunc(_ref) {
+      var mediaQueryOR = _ref.mediaQueryOR;
+      return {
+        tabletMode: mediaQueryOR([{
+          maxWidth: 700
+        }])
+      };
+    }
   }, {
     key: "renderTabs",
     value: function renderTabs(mainTabs, moreTabs, isVirtual) {
@@ -523,50 +541,61 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       }, MoreButtonProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: iconName,
         size: iconSize
-      })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_DropBox["default"], _extends({
-        isActive: isPopupReady,
-        isAnimate: true,
-        size: "medium",
-        customClass: {
-          customDropBoxWrap: "".concat(moreContainerClass, " ").concat(popupClass)
-        },
-        boxPosition: position,
-        getRef: getContainerRef,
-        isBoxPaddingNeed: true,
-        isArrow: false
-      }, DropBoxProps), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TabsModule["default"].menuBox, " ").concat(moreBoxClass),
-        onScroll: this.onScroll
-      }, _react["default"].Children.map(moreTabs, function (child) {
-        if (!child) {
-          return null;
-        }
-
-        var _child$props = child.props,
-            text = _child$props.text,
-            id = _child$props.id,
-            title = _child$props.title,
-            isLink = _child$props.isLink,
-            href = _child$props.href,
-            children = _child$props.children,
-            dataId = _child$props.dataId;
-        var value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/_react["default"].isValidElement(child) && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
-          key: id,
-          value: value,
-          onClick: _this8.moreTabSelect,
-          id: id,
-          title: title || text,
-          isLink: isLink,
-          href: href,
-          autoHover: true,
+      })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: this.responsiveFunc,
+        responsiveId: "Helmet"
+      }, function (_ref2) {
+        var tabletMode = _ref2.tabletMode;
+        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], _extends({
+          isActive: isPopupReady,
+          isAnimate: true,
+          size: "medium",
           customClass: {
-            customListItem: menuItemClass
+            customDropBoxWrap: "".concat(moreContainerClass, " ").concat(popupClass)
           },
-          target: "self",
-          dataId: "".concat(dataId, "_Tab")
-        }, ListItemProps), !showTitleInMoreOptions ? children : null);
-      })))) : null);
+          boxPosition: position,
+          getRef: getContainerRef,
+          isBoxPaddingNeed: true,
+          isArrow: false
+        }, DropBoxProps, {
+          isResponsivePadding: true
+        }), 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
+        }, _react["default"].Children.map(moreTabs, function (child) {
+          if (!child) {
+            return null;
+          }
+
+          var _child$props = child.props,
+              text = _child$props.text,
+              id = _child$props.id,
+              title = _child$props.title,
+              isLink = _child$props.isLink,
+              href = _child$props.href,
+              children = _child$props.children,
+              dataId = _child$props.dataId;
+          var value = text ? text : showTitleInMoreOptions ? title : null;
+          return /*#__PURE__*/_react["default"].isValidElement(child) && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
+            key: id,
+            value: value,
+            onClick: _this8.moreTabSelect,
+            id: id,
+            title: title || text,
+            isLink: isLink,
+            href: href,
+            autoHover: true,
+            customClass: {
+              customListItem: menuItemClass
+            },
+            target: "self",
+            dataId: "".concat(dataId, "_Tab")
+          }, ListItemProps), !showTitleInMoreOptions ? children : null);
+        })));
+      })) : null);
     }
   }, {
     key: "render",
@@ -623,73 +652,10 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   return Tabs;
 }(_react["default"].Component);
 
-Tabs.propTypes = {
-  align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
-  boxPosition: _propTypes["default"].string,
-  childType: _propTypes["default"].elementType,
-  children: _propTypes["default"].array,
-  className: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  getContainerRef: _propTypes["default"].func,
-  highlightClass: _propTypes["default"].string,
-  hookToDisableInternalState: _propTypes["default"].bool,
-  iconName: _propTypes["default"].string,
-  iconSize: _propTypes["default"].string,
-  isAnimate: _propTypes["default"].bool,
-  isPopupOpen: _propTypes["default"].bool,
-  isPopupReady: _propTypes["default"].bool,
-  isResponsive: _propTypes["default"].bool,
-  itemActiveClass: _propTypes["default"].string,
-  itemClass: _propTypes["default"].string,
-  maxTabsCount: _propTypes["default"].number,
-  menuItemClass: _propTypes["default"].string,
-  minTabsCount: _propTypes["default"].number,
-  moreBoxClass: _propTypes["default"].string,
-  moreButtonActiveClass: _propTypes["default"].string,
-  moreButtonClass: _propTypes["default"].string,
-  moreContainerClass: _propTypes["default"].string,
-  needAppearance: _propTypes["default"].bool,
-  needBorder: _propTypes["default"].bool,
-  needPadding: _propTypes["default"].bool,
-  needTabBorder: _propTypes["default"].bool,
-  onScroll: _propTypes["default"].func,
-  onSelect: _propTypes["default"].func,
-  position: _propTypes["default"].string,
-  removeClose: _propTypes["default"].func,
-  selectedTab: _propTypes["default"].string,
-  showTitleInMoreOptions: _propTypes["default"].bool,
-  style: _propTypes["default"].object,
-  togglePopup: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
-  getTargetRef: _propTypes["default"].func,
-  containerClass: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    DropBoxProps: _propTypes["default"].object,
-    ListItemProps: _propTypes["default"].object,
-    MoreButtonProps: _propTypes["default"].object
-  }),
-  getCustomDropBoxHeaderPlaceHolder: _propTypes["default"].func
-};
-Tabs.defaultProps = {
-  isAnimate: false,
-  isResponsive: true,
-  needTabBorder: false,
-  type: 'alpha',
-  dataId: 'highlight',
-  align: 'horizontal',
-  childType: _Tab["default"],
-  children: [],
-  highlightClass: '',
-  minTabsCount: 0,
-  maxTabsCount: 100,
-  moreButtonClass: '',
-  moreBoxClass: '',
-  menuItemClass: '',
-  iconName: 'ZD-TB-menu',
-  iconSize: '7',
-  containerClass: '',
-  customProps: {}
-};
+Tabs.propTypes = _propTypes.Tabs_propTypes;
+Tabs.defaultProps = _objectSpread(_objectSpread({}, _defaultProps.Tabs_defaultProps), {}, {
+  childType: _Tab["default"]
+});
 
 var _default = (0, _Popup["default"])(Tabs);
 

package/lib/Tab/Tabs.module.css

@@ -118,13 +118,14 @@
 }
 .menuBox {
   max-height: var(--zd_size220);
-  composes: oflowy from '../common/common.module.css';
 }
 
+
 [dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
   right: calc(var(--tab_position_gap) * -1);
 }
 
+
 [dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
   left: calc(var(--tab_position_gap) * -1);
 }

package/lib/Tab/props/defaultProps.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs_defaultProps = exports.Tab_defaultProps = exports.TabWrapper_defaultProps = exports.TabContent_defaultProps = exports.TabContentWrapper_defaultProps = void 0;
+var Tab_defaultProps = {
+  dataId: 'tabMenu',
+  customProps: {}
+};
+exports.Tab_defaultProps = Tab_defaultProps;
+var TabContent_defaultProps = {
+  dataId: 'tabContent'
+};
+exports.TabContent_defaultProps = TabContent_defaultProps;
+var TabContentWrapper_defaultProps = {
+  children: []
+};
+exports.TabContentWrapper_defaultProps = TabContentWrapper_defaultProps;
+var Tabs_defaultProps = {
+  isAnimate: false,
+  isResponsive: true,
+  needTabBorder: false,
+  type: 'alpha',
+  dataId: 'highlight',
+  align: 'horizontal',
+  children: [],
+  highlightClass: '',
+  minTabsCount: 0,
+  maxTabsCount: 100,
+  moreButtonClass: '',
+  moreBoxClass: '',
+  menuItemClass: '',
+  iconName: 'ZD-TB-menu',
+  iconSize: '7',
+  containerClass: '',
+  customProps: {}
+};
+exports.Tabs_defaultProps = Tabs_defaultProps;
+var TabWrapper_defaultProps = {
+  hookToDisableInternalState: false,
+  isAnimate: false,
+  needBorder: true,
+  needPadding: true,
+  needTabBorder: false,
+  type: 'alpha',
+  align: 'vertical',
+  needAppearance: true
+};
+exports.TabWrapper_defaultProps = TabWrapper_defaultProps;

package/lib/Tab/props/propTypes.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs_propTypes = exports.Tab_propTypes = exports.TabWrapper_propTypes = exports.TabContent_propTypes = exports.TabContentWrapper_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Tab_propTypes = {
+  activeClass: _propTypes["default"].string,
+  align: _propTypes["default"].string,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  getTabRef: _propTypes["default"].func,
+  href: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool,
+  isAnimate: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isLink: _propTypes["default"].bool,
+  needAppearance: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  style: _propTypes["default"].object,
+  text: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  titlePosition: _propTypes["default"].oneOf(['top', 'bottom', 'right', 'left']),
+  tourId: _propTypes["default"].string,
+  type: _propTypes["default"].string,
+  customProps: _propTypes["default"].object,
+  isVirtual: _propTypes["default"].bool
+};
+exports.Tab_propTypes = Tab_propTypes;
+var TabContent_propTypes = {
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none'])
+};
+exports.TabContent_propTypes = TabContent_propTypes;
+var TabContentWrapper_propTypes = {
+  children: _propTypes["default"].node,
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  onScroll: _propTypes["default"].func,
+  selectedTab: _propTypes["default"].string,
+  style: _propTypes["default"].object
+};
+exports.TabContentWrapper_propTypes = TabContentWrapper_propTypes;
+var Tabs_propTypes = {
+  align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
+  boxPosition: _propTypes["default"].string,
+  childType: _propTypes["default"].elementType,
+  children: _propTypes["default"].array,
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  getContainerRef: _propTypes["default"].func,
+  highlightClass: _propTypes["default"].string,
+  hookToDisableInternalState: _propTypes["default"].bool,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].string,
+  isAnimate: _propTypes["default"].bool,
+  isPopupOpen: _propTypes["default"].bool,
+  isPopupReady: _propTypes["default"].bool,
+  isResponsive: _propTypes["default"].bool,
+  itemActiveClass: _propTypes["default"].string,
+  itemClass: _propTypes["default"].string,
+  maxTabsCount: _propTypes["default"].number,
+  menuItemClass: _propTypes["default"].string,
+  minTabsCount: _propTypes["default"].number,
+  moreBoxClass: _propTypes["default"].string,
+  moreButtonActiveClass: _propTypes["default"].string,
+  moreButtonClass: _propTypes["default"].string,
+  moreContainerClass: _propTypes["default"].string,
+  needAppearance: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needPadding: _propTypes["default"].bool,
+  needTabBorder: _propTypes["default"].bool,
+  onScroll: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  position: _propTypes["default"].string,
+  removeClose: _propTypes["default"].func,
+  selectedTab: _propTypes["default"].string,
+  showTitleInMoreOptions: _propTypes["default"].bool,
+  style: _propTypes["default"].object,
+  togglePopup: _propTypes["default"].func,
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
+  getTargetRef: _propTypes["default"].func,
+  containerClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    DropBoxProps: _propTypes["default"].object,
+    ListItemProps: _propTypes["default"].object,
+    MoreButtonProps: _propTypes["default"].object
+  }),
+  getCustomDropBoxHeaderPlaceHolder: _propTypes["default"].func
+};
+exports.Tabs_propTypes = Tabs_propTypes;
+var TabWrapper_propTypes = {
+  align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  defaultTab: _propTypes["default"].string,
+  hookToDisableInternalState: _propTypes["default"].bool,
+  isAnimate: _propTypes["default"].bool,
+  needAppearance: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needPadding: _propTypes["default"].bool,
+  needTabBorder: _propTypes["default"].bool,
+  onSelect: _propTypes["default"].func,
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'zeta'])
+};
+exports.TabWrapper_propTypes = TabWrapper_propTypes;

package/lib/Tag/Tag.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = require("prop-types");
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
@@ -197,52 +199,8 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports["default"] = Tag;
-Tag.defaultProps = {
-  active: false,
-  closePalette: 'danger',
-  hasAvatar: false,
-  palette: 'default',
-  rounded: true,
-  size: 'medium',
-  dataId: 'tag',
-  customClass: {},
-  a11y: {},
-  needEffect: true,
-  isReadOnly: false
-};
-Tag.propTypes = {
-  active: _propTypes.PropTypes.bool,
-  avatarPalette: _propTypes.PropTypes.string,
-  closePalette: _propTypes.PropTypes.oneOf(['danger', 'primary']),
-  closeTitle: _propTypes.PropTypes.string,
-  dataId: _propTypes.PropTypes.string,
-  disabled: _propTypes.PropTypes.bool,
-  getRef: _propTypes.PropTypes.func,
-  hasAvatar: _propTypes.PropTypes.bool,
-  iconName: _propTypes.PropTypes.string,
-  iconSize: _propTypes.PropTypes.string,
-  id: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
-  imageURL: _propTypes.PropTypes.string,
-  initial: _propTypes.PropTypes.string,
-  onRemove: _propTypes.PropTypes.func,
-  onSelectTag: _propTypes.PropTypes.func,
-  palette: _propTypes.PropTypes.oneOf(['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted']),
-  rounded: _propTypes.PropTypes.bool,
-  size: _propTypes.PropTypes.oneOf(['small', 'medium']),
-  text: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
-  tooltip: _propTypes.PropTypes.string,
-  customClass: _propTypes.PropTypes.shape({
-    customTag: _propTypes.PropTypes.string,
-    customTagClose: _propTypes.PropTypes.string,
-    customTagIcon: _propTypes.PropTypes.string,
-    customAvatar: _propTypes.PropTypes.string
-  }),
-  a11y: _propTypes.PropTypes.shape({
-    clearLabel: _propTypes.PropTypes.string
-  }),
-  needEffect: _propTypes.PropTypes.bool,
-  isReadOnly: _propTypes.PropTypes.bool
-};
+Tag.defaultProps = _defaultProps.defaultProps;
+Tag.propTypes = _propTypes.propTypes;
 
 if (false) {
   Tag.docs = {

package/lib/Tag/Tag.module.css

@@ -158,7 +158,7 @@
   --tag_closeicon_bg_color: var(--zdt_tag_closeprimary_bg);
 }
 .default,
-.danger {
+.danger,.defaultLink {
   --tag_bg_color: var(--zdt_tag_default_danger_bg);
 }
 .effect.default:hover {
@@ -184,7 +184,6 @@
 .activedangerClose:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
 }
-
 .secondary {
   --tag_bg_color: var(--zdt_tag_secondary_bg);
   --tag_text_color: var(--zdt_tag_secondary_text);
@@ -193,6 +192,11 @@
 .effect.secondary:hover {
   --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
 }
+.activedefaultLink,
+.effect.defaultLink:hover{
+--tag_bg_color: var(--zdt_tag_defaultLink_hover_bg);
+--tag_text_color: var(--zdt_tag_defaultLink_hover_text);
+};
 
 .pureDotted {
   --tag_bg_color: var(--zdt_tag_pure_bg);

package/lib/Tag/props/defaultProps.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  active: false,
+  closePalette: 'danger',
+  hasAvatar: false,
+  palette: 'default',
+  rounded: true,
+  size: 'medium',
+  dataId: 'tag',
+  customClass: {},
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false
+};
+exports.defaultProps = defaultProps;

package/lib/Tag/props/propTypes.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  active: _propTypes["default"].bool,
+  avatarPalette: _propTypes["default"].string,
+  closePalette: _propTypes["default"].oneOf(['danger', 'primary']),
+  closeTitle: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  getRef: _propTypes["default"].func,
+  hasAvatar: _propTypes["default"].bool,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].string,
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  imageURL: _propTypes["default"].string,
+  initial: _propTypes["default"].string,
+  onRemove: _propTypes["default"].func,
+  onSelectTag: _propTypes["default"].func,
+  palette: _propTypes["default"].oneOf(['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink']),
+  rounded: _propTypes["default"].bool,
+  size: _propTypes["default"].oneOf(['small', 'medium']),
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  tooltip: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    customTag: _propTypes["default"].string,
+    customTagClose: _propTypes["default"].string,
+    customTagIcon: _propTypes["default"].string,
+    customAvatar: _propTypes["default"].string
+  }),
+  a11y: _propTypes["default"].shape({
+    clearLabel: _propTypes["default"].string
+  }),
+  needEffect: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool
+};
+exports.propTypes = propTypes;