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

package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap

@@ -1,27 +1,59 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Tabs rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="shrinkOff"
+    class="noShrink"
     data-id="boxComponent"
     data-selector-id="tabs"
     data-test-id="boxComponent"
   >
     <div
-      class="tab flex cover coldir"
+      class="flex fullSize column tab"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grow basis shrinkOff"
+        class="flexible basis_zero noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex cover coldir"
+          class="flex fullSize column"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tabs renders custom more-button icon via renderMoreTarget 1`] = `
+<DocumentFragment>
+  <div
+    class="noShrink"
+    data-id="boxComponent"
+    data-selector-id="tabs"
+    data-test-id="boxComponent"
+  >
+    <div
+      class="flex fullSize column tab"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="flexible basis_zero noShrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="flex fullSize column"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"

package/lib/Tab/props/defaultProps.js

@@ -9,7 +9,11 @@ var Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  dataSelectorId: 'tab'
+  customClass: {},
+  dataSelectorId: 'tab',
+  variant: 'text',
+  needHover: true,
+  hoverOnActive: false
 };
 exports.Tab_defaultProps = Tab_defaultProps;
 var TabContent_defaultProps = {
@@ -24,6 +28,7 @@ var TabContentWrapper_defaultProps = {
 };
 exports.TabContentWrapper_defaultProps = TabContentWrapper_defaultProps;
 var Tabs_defaultProps = {
+  alignBorderPosition: false,
   isAnimate: false,
   isResponsive: true,
   needTabBorder: false,
@@ -45,12 +50,14 @@ var Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: true,
+  isAbsolutePositioningNeeded: false,
   isRestrictScroll: false,
-  moreContainerClass: ''
+  moreContainerClass: '',
+  renderMoreTarget: null
 };
 exports.Tabs_defaultProps = Tabs_defaultProps;
 var TabWrapper_defaultProps = {
+  alignBorderPosition: false,
   hookToDisableInternalState: false,
   isAnimate: false,
   needBorder: true,

package/lib/Tab/props/propTypes.js

@@ -7,11 +7,17 @@ exports.Tabs_propTypes = exports.Tab_propTypes = exports.TabWrapper_propTypes =
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _tabConfigs = require("../utils/tabConfigs");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var renderSlotType = _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]);
+
 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,
@@ -24,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,
@@ -35,8 +42,20 @@ 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
+  dataSelectorId: _propTypes["default"].string,
+  variant: _propTypes["default"].oneOf(Object.values(_tabConfigs.VARIANT)),
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  renderBefore: renderSlotType,
+  renderAfter: renderSlotType
 };
 exports.Tab_propTypes = Tab_propTypes;
 var TabContent_propTypes = {
@@ -61,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,
@@ -95,7 +116,7 @@ var Tabs_propTypes = {
   showTitleInMoreOptions: _propTypes["default"].bool,
   style: _propTypes["default"].object,
   togglePopup: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
   getTargetRef: _propTypes["default"].func,
   containerClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
@@ -113,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,
@@ -128,7 +152,7 @@ var TabWrapper_propTypes = {
   needPadding: _propTypes["default"].bool,
   needTabBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
   dataSelectorId: _propTypes["default"].string
 };
 exports.TabWrapper_propTypes = TabWrapper_propTypes;

package/lib/Tab/utils/tabConfigs.js

@@ -3,7 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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',
+  ICON_WITH_TEXT: 'iconWithText'
+};
+exports.VARIANT = VARIANT;
 var TAB_ALIGN_MAPPING = {
   vertical: 'column',
   horizontal: 'row',
@@ -24,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,