@zohodesk/components 1.3.2 → 1.3.4

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

@@ -0,0 +1,341 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover rowdir"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover rowReverse"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TabWrapper rendering the align prop of - vertical 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover rowdir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover colReverse"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover rowdir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/Tab/props/propTypes.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var Tab_propTypes = {
   activeClass: _propTypes["default"].string,
-  align: _propTypes["default"].string,
+  align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
   children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
@@ -115,7 +115,7 @@ var Tabs_propTypes = {
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {
-  align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
+  align: _propTypes["default"].oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
   defaultTab: _propTypes["default"].string,

package/lib/Tab/utils/tabConfigs.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TAB_POPUP_POSITION_MAPPING = exports.TAB_DIRECTION_MAPPING = exports.TAB_ALIGN_MAPPING = void 0;
+var TAB_ALIGN_MAPPING = {
+  vertical: 'column',
+  horizontal: 'row',
+  'vertical-reverse': 'column-reverse',
+  'horizontal-reverse': 'row-reverse'
+};
+exports.TAB_ALIGN_MAPPING = TAB_ALIGN_MAPPING;
+var TAB_DIRECTION_MAPPING = {
+  vertical: 'column',
+  horizontal: 'row',
+  'vertical-reverse': 'column',
+  'horizontal-reverse': 'row'
+};
+exports.TAB_DIRECTION_MAPPING = TAB_DIRECTION_MAPPING;
+var TAB_POPUP_POSITION_MAPPING = {
+  vertical: 'bottomLeft',
+  horizontal: 'rightTop',
+  'vertical-reverse': 'topLeft',
+  'horizontal-reverse': 'leftTop'
+};
+exports.TAB_POPUP_POSITION_MAPPING = TAB_POPUP_POSITION_MAPPING;

package/lib/Tag/__tests__/Tag.spec.js

@@ -2,12 +2,20 @@
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Tag = _interopRequireDefault(require("../Tag"));
-
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("../../Provider/IdProvider");
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('Tag component', function () {
   var size = ['small', 'medium'];
   var palette = ['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink'];

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -158,7 +158,8 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
           isScrollPrevent = _this$props2.isScrollPrevent,
           customProps = _this$props2.customProps,
           needInputFocusOnWrapperClick = _this$props2.needInputFocusOnWrapperClick,
-          renderRightPlaceholderNode = _this$props2.renderRightPlaceholderNode;
+          renderRightPlaceholderNode = _this$props2.renderRightPlaceholderNode,
+          renderCustomClearComponent = _this$props2.renderCustomClearComponent;
       var isActive = this.state.isActive;
       var _customClass$customTB = customClass.customTBoxWrap,
           customTBoxWrap = _customClass$customTB === void 0 ? '' : _customClass$customTB,
@@ -213,7 +214,10 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_TextBoxIconModule["default"].iconContainer, " ").concat(customTBoxIcon)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row"
-      }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? typeof renderCustomClearComponent == 'function' ? renderCustomClearComponent({
+        clearText: clearText,
+        handleClear: this.handleClear
+      }) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_TextBoxIconModule["default"].icon),
         onClick: this.handleClear,
         dataId: "".concat(dataId, "_ClearIcon"),

package/lib/TextBoxIcon/props/propTypes.js

@@ -67,7 +67,8 @@ var propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object
   }),
-  renderRightPlaceholderNode: _propTypes["default"].node
+  renderRightPlaceholderNode: _propTypes["default"].node,
+  renderCustomClearComponent: _propTypes["default"].func
 });
 
 exports.propTypes = propTypes;

package/lib/utils/Common.js

@@ -61,7 +61,7 @@ exports.parseDecimal = parseDecimal;
 
 var getTotalDimension = function getTotalDimension(elem, align) {
   var style = window.getComputedStyle(elem);
-  return align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
+  return align === 'vertical-reverse' || align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
 };
 
 exports.getTotalDimension = getTotalDimension;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,

package/react-cli.config.js

@@ -1,4 +1,4 @@
-exports.config= {
+exports.config = {
   "preprocess": {
     "runner": "./preprocess/index.js"
   },
@@ -14,7 +14,7 @@ exports.config= {
         "**/es/**",
         "!**/node_modules/**"
       ],
-      "hasRTL":[
+      "hasRTL": [
         "**/src/**",
         "!**/node_modules/**"
       ]