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

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

@@ -1,27 +1,27 @@
-// 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"

package/lib/Tab/props/defaultProps.js

@@ -9,8 +9,7 @@ var Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  dataSelectorId: 'tab',
-  variant: 'text'
+  dataSelectorId: 'tab'
 };
 exports.Tab_defaultProps = Tab_defaultProps;
 var TabContent_defaultProps = {
@@ -46,7 +45,7 @@ var Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: false,
+  isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   moreContainerClass: ''
 };

package/lib/Tab/props/propTypes.js

@@ -7,12 +7,8 @@ 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']),
@@ -40,14 +36,7 @@ var Tab_propTypes = {
   contentAlignBox: _propTypes["default"].oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: _propTypes["default"].object,
   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
+  dataSelectorId: _propTypes["default"].string
 };
 exports.Tab_propTypes = Tab_propTypes;
 var TabContent_propTypes = {
@@ -106,7 +95,7 @@ var Tabs_propTypes = {
   showTitleInMoreOptions: _propTypes["default"].bool,
   style: _propTypes["default"].object,
   togglePopup: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
   getTargetRef: _propTypes["default"].func,
   containerClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
@@ -139,7 +128,7 @@ var TabWrapper_propTypes = {
   needPadding: _propTypes["default"].bool,
   needTabBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
   dataSelectorId: _propTypes["default"].string
 };
 exports.TabWrapper_propTypes = TabWrapper_propTypes;

package/lib/Tab/utils/tabConfigs.js

@@ -3,13 +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;
-var VARIANT = {
-  TEXT: 'text',
-  ICON: 'icon',
-  ICON_WITH_TEXT: 'iconWithText'
-};
-exports.VARIANT = VARIANT;
+exports.TAB_POPUP_POSITION_MAPPING = exports.TAB_DIRECTION_MAPPING = exports.TAB_ALIGN_MAPPING = void 0;
 var TAB_ALIGN_MAPPING = {
   vertical: 'column',
   horizontal: 'row',

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,