@zohodesk/components 1.3.1 → 1.3.3

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/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,6 +27,20 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -63,35 +75,75 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(VelocityAnimationGroup);
 
   function VelocityAnimationGroup(props) {
+    var _this;
+
     _classCallCheck(this, VelocityAnimationGroup);
 
-    return _super.call(this, props);
+    _this = _super.call(this, props);
+    _this.handleEnterComplete = _this.handleEnterComplete.bind(_assertThisInitialized(_this));
+    _this.handleExitComplete = _this.handleExitComplete.bind(_assertThisInitialized(_this));
+    return _this;
   }
 
   _createClass(VelocityAnimationGroup, [{
+    key: "handleEnterComplete",
+    value: function handleEnterComplete(elements) {
+      var _this$props = this.props,
+          onEnterComplete = _this$props.onEnterComplete,
+          postEnterStyles = _this$props.postEnterStyles;
+
+      if (typeof onEnterComplete === 'function') {
+        onEnterComplete(elements);
+      }
+
+      if (postEnterStyles && _typeof(postEnterStyles) === 'object') {
+        elements.forEach(function (rootElement) {
+          Object.entries(postEnterStyles).forEach(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+                cssProperty = _ref2[0],
+                cssValue = _ref2[1];
+
+            rootElement.style[cssProperty] = cssValue;
+          });
+        });
+      }
+    }
+  }, {
+    key: "handleExitComplete",
+    value: function handleExitComplete(elements) {
+      var onExitComplete = this.props.onExitComplete;
+
+      if (typeof onExitComplete === 'function') {
+        onExitComplete(elements);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          enterName = _this$props.enterName,
-          exitName = _this$props.exitName,
-          enterDuration = _this$props.enterDuration,
-          exitDuration = _this$props.exitDuration,
-          isActive = _this$props.isActive,
-          component = _this$props.component,
-          runOnMount = _this$props.runOnMount,
-          enterShowStyle = _this$props.enterShowStyle,
-          enterHideStyle = _this$props.enterHideStyle,
-          exitDelay = _this$props.exitDelay,
-          isFlex = _this$props.isFlex,
-          enterDelay = _this$props.enterDelay,
-          isCustomized = _this$props.isCustomized,
-          name = _this$props.name,
-          needUIPack = _this$props.needUIPack;
-
-      var _ref = this.context || {},
-          direction = _ref.direction,
-          isReducedMotion = _ref.isReducedMotion;
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          enterName = _this$props2.enterName,
+          exitName = _this$props2.exitName,
+          enterDuration = _this$props2.enterDuration,
+          exitDuration = _this$props2.exitDuration,
+          isActive = _this$props2.isActive,
+          component = _this$props2.component,
+          runOnMount = _this$props2.runOnMount,
+          enterShowStyle = _this$props2.enterShowStyle,
+          enterHideStyle = _this$props2.enterHideStyle,
+          exitDelay = _this$props2.exitDelay,
+          isFlex = _this$props2.isFlex,
+          enterDelay = _this$props2.enterDelay,
+          isCustomized = _this$props2.isCustomized,
+          name = _this$props2.name,
+          needUIPack = _this$props2.needUIPack,
+          onEnterComplete = _this$props2.onEnterComplete,
+          onExitComplete = _this$props2.onExitComplete,
+          postEnterStyles = _this$props2.postEnterStyles;
+
+      var _ref3 = this.context || {},
+          direction = _ref3.direction,
+          isReducedMotion = _ref3.isReducedMotion;
 
       var childProps = clearProps(this.props);
       var enterAnimationObj = {
@@ -128,13 +180,15 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
         animation: isCustomized ? enterAnimationObj[name] : needUIPack ? "transition.".concat(enterName, "In") : enterName,
         duration: !isReducedMotion ? enterDuration : 0,
         delay: enterDelay ? enterDelay : 0,
-        display: isFlex ? 'flex' : ''
+        display: isFlex ? 'flex' : '',
+        complete: onEnterComplete || postEnterStyles ? this.handleEnterComplete : undefined
       };
       var exitAnimation = {
         animation: isCustomized ? exitAnimationObj[name] : needUIPack ? "transition.".concat(exitName ? exitName : enterName, "Out") : exitName ? exitName : enterName,
         duration: !isReducedMotion ? exitDuration : 0,
         delay: exitDelay ? exitDelay : 0,
-        display: 'none'
+        display: 'none',
+        complete: onExitComplete ? this.handleExitComplete : undefined
       };
       return /*#__PURE__*/_react["default"].createElement(_velocityReact.VelocityTransitionGroup, _extends({
         enter: enterAnimation,

package/lib/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -25,6 +25,9 @@ var propTypes = {
   isFlex: _propTypes["default"].bool,
   name: _propTypes["default"].oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
   needUIPack: _propTypes["default"].bool,
-  runOnMount: _propTypes["default"].bool
+  runOnMount: _propTypes["default"].bool,
+  onEnterComplete: _propTypes["default"].func,
+  onExitComplete: _propTypes["default"].func,
+  postEnterStyles: _propTypes["default"].object
 };
 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.1",
+  "version": "1.3.3",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -71,7 +71,7 @@
     "@zohodesk/a11y": "2.3.4",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.75",
+    "@zohodesk/icons": "1.0.78",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
@@ -86,7 +86,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.75",
+    "@zohodesk/icons": "1.0.78",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",

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/**"
       ]