@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-256.1

package/lib/Tab/props/propTypes.js

@@ -16,6 +16,8 @@ var renderSlotType = _propTypes["default"].oneOfType([_propTypes["default"].node
 var Tab_propTypes = {
   activeClass: _propTypes["default"].string,
   align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
+  borderPosition: _propTypes["default"].oneOf(['left', 'right', 'top', 'bottom']),
+  hoverOnActive: _propTypes["default"].bool,
   children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
@@ -28,6 +30,7 @@ var Tab_propTypes = {
   isLink: _propTypes["default"].bool,
   needAppearance: _propTypes["default"].bool,
   needBorder: _propTypes["default"].bool,
+  needHover: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onSelect: _propTypes["default"].func,
   style: _propTypes["default"].object,
@@ -39,13 +42,18 @@ var Tab_propTypes = {
   contentAlign: _propTypes["default"].oneOf(['both', 'left', 'right', 'vertical', 'horizontal', 'top', 'bottom', 'between', 'around', 'baseline']),
   contentAlignBox: _propTypes["default"].oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: _propTypes["default"].object,
+  customClass: _propTypes["default"].shape({
+    customTextContainer: _propTypes["default"].string,
+    customText: _propTypes["default"].string,
+    customHover: _propTypes["default"].string,
+    customIconContainer: _propTypes["default"].string,
+    customIcon: _propTypes["default"].string
+  }),
   isVirtual: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   variant: _propTypes["default"].oneOf(Object.values(_tabConfigs.VARIANT)),
-  iconPlacement: _propTypes["default"].string,
   iconName: _propTypes["default"].string,
   iconSize: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  renderIcon: renderSlotType,
   renderBefore: renderSlotType,
   renderAfter: renderSlotType
 };
@@ -72,6 +80,8 @@ var TabContentWrapper_propTypes = {
 exports.TabContentWrapper_propTypes = TabContentWrapper_propTypes;
 var Tabs_propTypes = {
   align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
+  alignBorderPosition: _propTypes["default"].bool,
+  borderPosition: _propTypes["default"].oneOf(['left', 'right', 'top', 'bottom']),
   boxPosition: _propTypes["default"].string,
   childType: _propTypes["default"].elementType,
   children: _propTypes["default"].array,
@@ -124,11 +134,14 @@ var Tabs_propTypes = {
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   isRestrictScroll: _propTypes["default"].bool,
   positionsOffset: _propTypes["default"].object,
-  targetOffset: _propTypes["default"].object
+  targetOffset: _propTypes["default"].object,
+  renderMoreTarget: renderSlotType
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {
   align: _propTypes["default"].oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
+  alignBorderPosition: _propTypes["default"].bool,
+  borderPosition: _propTypes["default"].oneOf(['left', 'right', 'top', 'bottom']),
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
   defaultTab: _propTypes["default"].string,

package/lib/Tab/utils/tabConfigs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VARIANT = exports.TAB_POPUP_POSITION_MAPPING = exports.TAB_DIRECTION_MAPPING = exports.TAB_ALIGN_MAPPING = void 0;
+exports.VARIANT = exports.TAB_POPUP_POSITION_MAPPING = exports.TAB_DIRECTION_MAPPING = exports.TAB_ALIGN_MAPPING = exports.BORDER_POSITION_BY_ALIGN = void 0;
 var VARIANT = {
   TEXT: 'text',
   ICON: 'icon',
@@ -30,4 +30,11 @@ var TAB_POPUP_POSITION_MAPPING = {
   'vertical-reverse': 'topLeft',
   'horizontal-reverse': 'leftTop'
 };
-exports.TAB_POPUP_POSITION_MAPPING = TAB_POPUP_POSITION_MAPPING;
+exports.TAB_POPUP_POSITION_MAPPING = TAB_POPUP_POSITION_MAPPING;
+var BORDER_POSITION_BY_ALIGN = {
+  vertical: 'bottom',
+  'vertical-reverse': 'top',
+  horizontal: 'right',
+  'horizontal-reverse': 'left'
+};
+exports.BORDER_POSITION_BY_ALIGN = BORDER_POSITION_BY_ALIGN;

package/lib/Tag/Tag.js

@@ -25,6 +25,8 @@ var _Button = _interopRequireDefault(require("../semantic/Button/Button"));
 
 var _IdProvider = require("../Provider/IdProvider");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TagModule = _interopRequireDefault(require("./Tag.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -164,7 +166,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           clearLabel = _a11y$clearLabel === void 0 ? 'Delete' : _a11y$clearLabel;
       var isDarkPalette = palette === 'dark';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag)),
         "data-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         "data-test-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         onClick: this.handleSelect,
@@ -174,7 +176,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         "aria-labelledby": getAriaId,
         "data-selector-id": dataSelectorId
       }, customAttributes), (0, _utils.renderNode)(renderLeftChildren), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TagModule["default"].avatar
+        className: (0, _cssUtility.cn)(_TagModule["default"].avatar)
       }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         palette: isDarkPalette ? 'info' : avatarPalette,
         name: initial,
@@ -183,17 +185,17 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         textPalette: isDarkPalette ? 'white' : '',
         customClass: customAvatar
       }, avatarProps))) : null, iconName ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagModule["default"].icon, " ").concat(customTagIcon),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].icon, " ").concat(customTagIcon)),
         "aria-hidden": true
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, _extends({
         name: iconName,
         size: iconSize
       }, iconProps))) : null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagModule["default"].text, " ").concat(textSizes),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].text, " ").concat(textSizes)),
         "aria-hidden": true,
         id: getAriaId
       }, text), onRemove && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-        customClass: "".concat(_TagModule["default"].close, " ").concat(active ? _TagModule["default"]["active".concat(closePalette, "Close")] : '', "\n            ").concat(rounded ? _TagModule["default"].lgRadiusClose : _TagModule["default"].smRadiusClose, " ").concat(isDarkPalette ? _TagModule["default"].darkTagClose : '', "\n            ").concat(customTagClose, " ").concat(_TagModule["default"]["close".concat(closePalette)]),
+        customClass: "".concat(_TagModule["default"].close, " ").concat(active ? _TagModule["default"]["active".concat(closePalette, "Close")] : '', "\n            ").concat(rounded ? _TagModule["default"].lgRadiusClose : _TagModule["default"].smRadiusClose, " ").concat(isDarkPalette ? _TagModule["default"].darkTagClose : '', " ").concat(_TagModule["default"]["close".concat(closePalette)], " ").concat(customTagClose),
         dataId: "".concat(dataId, "_RemoveTag"),
         title: closeTitle,
         onClick: this.handleRemove,