@zohodesk/components 1.2.22 → 1.2.24

package/lib/Animation/utils.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.animationStyle = void 0;
+
+var _transitionModule = _interopRequireDefault(require("../common/transition.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var animationStyle = {
+  zoomIn: {
+    enter: _transitionModule["default"].zoomInEnter,
+    enterActive: _transitionModule["default"].zoomInEnterActive,
+    enterDone: _transitionModule["default"].zoomInEnterActive,
+    exit: _transitionModule["default"].zoomInLeave,
+    exitActive: _transitionModule["default"].zoomInLeaveActive,
+    exitDone: _transitionModule["default"].zoomInLeaveActive,
+    appear: _transitionModule["default"].zoomInEnter,
+    appearActive: _transitionModule["default"].zoomInEnterActive
+  },
+  scaleIn: {
+    enter: _transitionModule["default"].scaleInEnter,
+    enterActive: _transitionModule["default"].scaleInEnterActive,
+    enterDone: _transitionModule["default"].scaleInEnterActive,
+    exit: _transitionModule["default"].scaleInLeave,
+    exitActive: _transitionModule["default"].scaleInLeaveActive,
+    exitDone: _transitionModule["default"].scaleInLeaveActive,
+    appear: _transitionModule["default"].scaleInEnter,
+    appearActive: _transitionModule["default"].scaleInEnterActive
+  },
+  fadeIn: {
+    enter: _transitionModule["default"].fadeInEnter,
+    enterActive: _transitionModule["default"].fadeInEnterActive,
+    enterDone: _transitionModule["default"].fadeInEnterActive,
+    exit: _transitionModule["default"].fadeInLeave,
+    exitActive: _transitionModule["default"].fadeInLeaveActive,
+    exitDone: _transitionModule["default"].fadeInLeaveActive,
+    appear: _transitionModule["default"].fadeInEnter,
+    appearActive: _transitionModule["default"].fadeInEnterActive
+  },
+  slideLeft: {
+    enter: _transitionModule["default"].slideLeftEnter,
+    enterActive: _transitionModule["default"].slideLeftEnterActive,
+    enterDone: _transitionModule["default"].slideLeftEnterActive,
+    exit: _transitionModule["default"].slideLeftLeave,
+    exitActive: _transitionModule["default"].slideLeftLeaveActive,
+    exitDone: _transitionModule["default"].slideLeftLeaveActive,
+    appear: _transitionModule["default"].slideLeftEnter,
+    appearActive: _transitionModule["default"].slideLeftEnterActive
+  },
+  slideDown: {
+    enter: _transitionModule["default"].slideDownEnter,
+    enterActive: _transitionModule["default"].slideDownEnterActive,
+    enterDone: _transitionModule["default"].slideDownEnterActive,
+    exit: _transitionModule["default"].slideDownLeave,
+    exitActive: _transitionModule["default"].slideDownLeaveActive,
+    exitDone: _transitionModule["default"].slideDownLeaveActive,
+    appear: _transitionModule["default"].slideDownEnter,
+    appearActive: _transitionModule["default"].slideDownEnterActive
+  },
+  skewIn: {
+    enter: _transitionModule["default"].skewInEnter,
+    enterActive: _transitionModule["default"].skewInEnterActive,
+    enterDone: _transitionModule["default"].skewInEnterActive,
+    exit: _transitionModule["default"].skewInLeave,
+    exitActive: _transitionModule["default"].skewInLeaveActive,
+    exitDone: _transitionModule["default"].skewInLeaveActive,
+    appear: _transitionModule["default"].skewInEnter,
+    appearActive: _transitionModule["default"].skewInEnterActive
+  },
+  none: {
+    enter: _transitionModule["default"].noneEnter,
+    enterActive: _transitionModule["default"].noneEnterActive,
+    enterDone: _transitionModule["default"].noneEnterActive,
+    exit: _transitionModule["default"].noneLeave,
+    exitActive: _transitionModule["default"].noneLeaveActive,
+    exitDone: _transitionModule["default"].noneLeaveActive,
+    appear: _transitionModule["default"].noneEnter,
+    appearActive: _transitionModule["default"].noneEnterActive
+  },
+  "default": {
+    enter: _transitionModule["default"].defaultEnter,
+    enterActive: _transitionModule["default"].defaultEnterActive,
+    enterDone: _transitionModule["default"].defaultEnterActive,
+    exit: _transitionModule["default"].defaultLeave,
+    exitActive: _transitionModule["default"].defaultLeaveActive,
+    exitDone: _transitionModule["default"].defaultLeaveActive,
+    appear: _transitionModule["default"].defaultEnter,
+    appearActive: _transitionModule["default"].defaultEnterActive
+  }
+};
+exports.animationStyle = animationStyle;

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -119,7 +119,8 @@ function DropBoxElement(props) {
     "aria-multiselectable": ariaMultiselectable,
     "aria-labelledby": ariaLabelledby,
     tabIndex: tabIndex,
-    onAnimationEnd: isAnimate && FireOnAnimationEnd
+    onAnimationEnd: isAnimate && FireOnAnimationEnd,
+    "data-a11y-focus-main-area": true
   }, /*#__PURE__*/_react["default"].createElement("div", {
     tabIndex: "-1",
     className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),

package/lib/Select/Select.js

@@ -404,7 +404,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           needCloseOnSelect && this.handlePopupClose(e);
         }
 
-        if (!isPopupOpen && isPopupOpenOnEnter) {
+        if (!isPopupReady && isPopupOpenOnEnter) {
           this.togglePopup(e);
         }
       } else if (keyCode === 27) {

package/lib/Tab/TabContentWrapper.js

@@ -15,6 +15,8 @@ var _Layout = require("../Layout");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 /* eslint-disable react/forbid-component-props */
 var TabContentWrapper = function TabContentWrapper(_ref) {
   var style = _ref.style,
@@ -23,15 +25,18 @@ var TabContentWrapper = function TabContentWrapper(_ref) {
       dataId = _ref.dataId,
       selectedTab = _ref.selectedTab,
       onScroll = _ref.onScroll,
-      dataSelectorId = _ref.dataSelectorId;
-  return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      dataSelectorId = _ref.dataSelectorId,
+      tagName = _ref.tagName,
+      a11y = _ref.a11y;
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
     onScroll: onScroll,
-    dataSelectorId: dataSelectorId
-  }, _react["default"].Children.map(children, function (child) {
+    dataSelectorId: dataSelectorId,
+    tagName: tagName
+  }, a11y), _react["default"].Children.map(children, function (child) {
     return /*#__PURE__*/_react["default"].isValidElement(child) && child.props.id === selectedTab ? child : null;
   }));
 };

package/lib/Tab/props/defaultProps.js

@@ -17,7 +17,8 @@ var TabContent_defaultProps = {
 exports.TabContent_defaultProps = TabContent_defaultProps;
 var TabContentWrapper_defaultProps = {
   children: [],
-  dataSelectorId: 'tabContentWrapper'
+  dataSelectorId: 'tabContentWrapper',
+  a11y: {}
 };
 exports.TabContentWrapper_defaultProps = TabContentWrapper_defaultProps;
 var Tabs_defaultProps = {

package/lib/Tab/props/propTypes.js

@@ -52,7 +52,9 @@ var TabContentWrapper_propTypes = {
   onScroll: _propTypes["default"].func,
   selectedTab: _propTypes["default"].string,
   style: _propTypes["default"].object,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  a11y: _propTypes["default"].object,
+  tagName: _propTypes["default"].string
 };
 exports.TabContentWrapper_propTypes = TabContentWrapper_propTypes;
 var Tabs_propTypes = {

package/lib/v1/Animation/Animation.js

@@ -13,7 +13,7 @@ var _propTypes = require("./props/propTypes");
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _transitionModule = _interopRequireDefault(require("../../common/transition.module.css"));
+var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -30,91 +30,9 @@ function Animation(props) {
       onExit = _props$onExit === void 0 ? function () {} : _props$onExit,
       _props$delayClassName = props.delayClassName,
       delayClassName = _props$delayClassName === void 0 ? null : _props$delayClassName;
-  var animation = {
-    zoomIn: {
-      enter: _transitionModule["default"].zoomInEnter,
-      enterActive: _transitionModule["default"].zoomInEnterActive,
-      enterDone: _transitionModule["default"].zoomInEnterActive,
-      exit: _transitionModule["default"].zoomInLeave,
-      exitActive: _transitionModule["default"].zoomInLeaveActive,
-      exitDone: _transitionModule["default"].zoomInLeaveActive,
-      appear: _transitionModule["default"].zoomInEnter,
-      appearActive: _transitionModule["default"].zoomInEnterActive
-    },
-    scaleIn: {
-      enter: _transitionModule["default"].scaleInEnter,
-      enterActive: _transitionModule["default"].scaleInEnterActive,
-      enterDone: _transitionModule["default"].scaleInEnterActive,
-      exit: _transitionModule["default"].scaleInLeave,
-      exitActive: _transitionModule["default"].scaleInLeaveActive,
-      exitDone: _transitionModule["default"].scaleInLeaveActive,
-      appear: _transitionModule["default"].scaleInEnter,
-      appearActive: _transitionModule["default"].scaleInEnterActive
-    },
-    fadeIn: {
-      enter: _transitionModule["default"].fadeInEnter,
-      enterActive: _transitionModule["default"].fadeInEnterActive,
-      enterDone: _transitionModule["default"].fadeInEnterActive,
-      exit: _transitionModule["default"].fadeInLeave,
-      exitActive: _transitionModule["default"].fadeInLeaveActive,
-      exitDone: _transitionModule["default"].fadeInLeaveActive,
-      appear: _transitionModule["default"].fadeInEnter,
-      appearActive: _transitionModule["default"].fadeInEnterActive
-    },
-    slideLeft: {
-      enter: _transitionModule["default"].slideLeftEnter,
-      enterActive: _transitionModule["default"].slideLeftEnterActive,
-      enterDone: _transitionModule["default"].slideLeftEnterActive,
-      exit: _transitionModule["default"].slideLeftLeave,
-      exitActive: _transitionModule["default"].slideLeftLeaveActive,
-      exitDone: _transitionModule["default"].slideLeftLeaveActive,
-      appear: _transitionModule["default"].slideLeftEnter,
-      appearActive: _transitionModule["default"].slideLeftEnterActive
-    },
-    slideDown: {
-      enter: _transitionModule["default"].slideDownEnter,
-      enterActive: _transitionModule["default"].slideDownEnterActive,
-      enterDone: _transitionModule["default"].slideDownEnterActive,
-      exit: _transitionModule["default"].slideDownLeave,
-      exitActive: _transitionModule["default"].slideDownLeaveActive,
-      exitDone: _transitionModule["default"].slideDownLeaveActive,
-      appear: _transitionModule["default"].slideDownEnter,
-      appearActive: _transitionModule["default"].slideDownEnterActive
-    },
-    skewIn: {
-      enter: _transitionModule["default"].skewInEnter,
-      enterActive: _transitionModule["default"].skewInEnterActive,
-      enterDone: _transitionModule["default"].skewInEnterActive,
-      exit: _transitionModule["default"].skewInLeave,
-      exitActive: _transitionModule["default"].skewInLeaveActive,
-      exitDone: _transitionModule["default"].skewInLeaveActive,
-      appear: _transitionModule["default"].skewInEnter,
-      appearActive: _transitionModule["default"].skewInEnterActive
-    },
-    none: {
-      enter: _transitionModule["default"].noneEnter,
-      enterActive: _transitionModule["default"].noneEnterActive,
-      enterDone: _transitionModule["default"].noneEnterActive,
-      exit: _transitionModule["default"].noneLeave,
-      exitActive: _transitionModule["default"].noneLeaveActive,
-      exitDone: _transitionModule["default"].noneLeaveActive,
-      appear: _transitionModule["default"].noneEnter,
-      appearActive: _transitionModule["default"].noneEnterActive
-    },
-    "default": {
-      enter: _transitionModule["default"].defaultEnter,
-      enterActive: _transitionModule["default"].defaultEnterActive,
-      enterDone: _transitionModule["default"].defaultEnterActive,
-      exit: _transitionModule["default"].defaultLeave,
-      exitActive: _transitionModule["default"].defaultLeaveActive,
-      exitDone: _transitionModule["default"].defaultLeaveActive,
-      appear: _transitionModule["default"].defaultEnter,
-      appearActive: _transitionModule["default"].defaultEnterActive
-    }
-  };
-  var newClassNames = delayClassName ? Object.assign({}, animation[name], {
-    exit: "".concat(delayClassName, " ").concat(animation[name].exit)
-  }) : animation[name];
+  var newClassNames = delayClassName ? Object.assign({}, _utils.animationStyle[name], {
+    exit: "".concat(delayClassName, " ").concat(_utils.animationStyle[name].exit)
+  }) : animaanimationStyletion[name];
   return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
     classNames: newClassNames && newClassNames,
     "in": isActive,

package/lib/v1/Animation/utils.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.animationStyle = void 0;
+
+var _transitionModule = _interopRequireDefault(require("../../common/transition.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var animationStyle = {
+  zoomIn: {
+    enter: _transitionModule["default"].zoomInEnter,
+    enterActive: _transitionModule["default"].zoomInEnterActive,
+    enterDone: _transitionModule["default"].zoomInEnterActive,
+    exit: _transitionModule["default"].zoomInLeave,
+    exitActive: _transitionModule["default"].zoomInLeaveActive,
+    exitDone: _transitionModule["default"].zoomInLeaveActive,
+    appear: _transitionModule["default"].zoomInEnter,
+    appearActive: _transitionModule["default"].zoomInEnterActive
+  },
+  scaleIn: {
+    enter: _transitionModule["default"].scaleInEnter,
+    enterActive: _transitionModule["default"].scaleInEnterActive,
+    enterDone: _transitionModule["default"].scaleInEnterActive,
+    exit: _transitionModule["default"].scaleInLeave,
+    exitActive: _transitionModule["default"].scaleInLeaveActive,
+    exitDone: _transitionModule["default"].scaleInLeaveActive,
+    appear: _transitionModule["default"].scaleInEnter,
+    appearActive: _transitionModule["default"].scaleInEnterActive
+  },
+  fadeIn: {
+    enter: _transitionModule["default"].fadeInEnter,
+    enterActive: _transitionModule["default"].fadeInEnterActive,
+    enterDone: _transitionModule["default"].fadeInEnterActive,
+    exit: _transitionModule["default"].fadeInLeave,
+    exitActive: _transitionModule["default"].fadeInLeaveActive,
+    exitDone: _transitionModule["default"].fadeInLeaveActive,
+    appear: _transitionModule["default"].fadeInEnter,
+    appearActive: _transitionModule["default"].fadeInEnterActive
+  },
+  slideLeft: {
+    enter: _transitionModule["default"].slideLeftEnter,
+    enterActive: _transitionModule["default"].slideLeftEnterActive,
+    enterDone: _transitionModule["default"].slideLeftEnterActive,
+    exit: _transitionModule["default"].slideLeftLeave,
+    exitActive: _transitionModule["default"].slideLeftLeaveActive,
+    exitDone: _transitionModule["default"].slideLeftLeaveActive,
+    appear: _transitionModule["default"].slideLeftEnter,
+    appearActive: _transitionModule["default"].slideLeftEnterActive
+  },
+  slideDown: {
+    enter: _transitionModule["default"].slideDownEnter,
+    enterActive: _transitionModule["default"].slideDownEnterActive,
+    enterDone: _transitionModule["default"].slideDownEnterActive,
+    exit: _transitionModule["default"].slideDownLeave,
+    exitActive: _transitionModule["default"].slideDownLeaveActive,
+    exitDone: _transitionModule["default"].slideDownLeaveActive,
+    appear: _transitionModule["default"].slideDownEnter,
+    appearActive: _transitionModule["default"].slideDownEnterActive
+  },
+  skewIn: {
+    enter: _transitionModule["default"].skewInEnter,
+    enterActive: _transitionModule["default"].skewInEnterActive,
+    enterDone: _transitionModule["default"].skewInEnterActive,
+    exit: _transitionModule["default"].skewInLeave,
+    exitActive: _transitionModule["default"].skewInLeaveActive,
+    exitDone: _transitionModule["default"].skewInLeaveActive,
+    appear: _transitionModule["default"].skewInEnter,
+    appearActive: _transitionModule["default"].skewInEnterActive
+  },
+  none: {
+    enter: _transitionModule["default"].noneEnter,
+    enterActive: _transitionModule["default"].noneEnterActive,
+    enterDone: _transitionModule["default"].noneEnterActive,
+    exit: _transitionModule["default"].noneLeave,
+    exitActive: _transitionModule["default"].noneLeaveActive,
+    exitDone: _transitionModule["default"].noneLeaveActive,
+    appear: _transitionModule["default"].noneEnter,
+    appearActive: _transitionModule["default"].noneEnterActive
+  },
+  "default": {
+    enter: _transitionModule["default"].defaultEnter,
+    enterActive: _transitionModule["default"].defaultEnterActive,
+    enterDone: _transitionModule["default"].defaultEnterActive,
+    exit: _transitionModule["default"].defaultLeave,
+    exitActive: _transitionModule["default"].defaultLeaveActive,
+    exitDone: _transitionModule["default"].defaultLeaveActive,
+    appear: _transitionModule["default"].defaultEnter,
+    appearActive: _transitionModule["default"].defaultEnterActive
+  }
+};
+exports.animationStyle = animationStyle;

package/lib/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -119,7 +119,8 @@ function DropBoxElement(props) {
     "aria-multiselectable": ariaMultiselectable,
     "aria-labelledby": ariaLabelledby,
     tabIndex: tabIndex,
-    onAnimationEnd: isAnimate && FireOnAnimationEnd
+    onAnimationEnd: isAnimate && FireOnAnimationEnd,
+    "data-a11y-focus-main-area": true
   }, /*#__PURE__*/_react["default"].createElement("div", {
     tabIndex: "-1",
     className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),

package/lib/v1/Select/Select.js

@@ -407,7 +407,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           needCloseOnSelect && this.handlePopupClose(e);
         }
 
-        if (!isPopupOpen && isPopupOpenOnEnter) {
+        if (!isPopupReady && isPopupOpenOnEnter) {
           this.togglePopup(e);
         }
       } else if (keyCode === 27) {

package/lib/v1/Tab/TabContentWrapper.js

@@ -15,6 +15,8 @@ var _Layout = require("../Layout");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 /* eslint-disable react/forbid-component-props */
 var TabContentWrapper = function TabContentWrapper(_ref) {
   var style = _ref.style,
@@ -23,15 +25,18 @@ var TabContentWrapper = function TabContentWrapper(_ref) {
       dataId = _ref.dataId,
       selectedTab = _ref.selectedTab,
       onScroll = _ref.onScroll,
-      dataSelectorId = _ref.dataSelectorId;
-  return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      dataSelectorId = _ref.dataSelectorId,
+      tagName = _ref.tagName,
+      a11y = _ref.a11y;
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
     onScroll: onScroll,
-    dataSelectorId: dataSelectorId
-  }, _react["default"].Children.map(children, function (child) {
+    dataSelectorId: dataSelectorId,
+    tagName: tagName
+  }, a11y), _react["default"].Children.map(children, function (child) {
     return /*#__PURE__*/_react["default"].isValidElement(child) && child.props.id === selectedTab ? child : null;
   }));
 };

package/lib/v1/Tab/props/defaultProps.js

@@ -17,7 +17,8 @@ var TabContent_defaultProps = {
 exports.TabContent_defaultProps = TabContent_defaultProps;
 var TabContentWrapper_defaultProps = {
   children: [],
-  dataSelectorId: 'tabContentWrapper'
+  dataSelectorId: 'tabContentWrapper',
+  a11y: {}
 };
 exports.TabContentWrapper_defaultProps = TabContentWrapper_defaultProps;
 var Tabs_defaultProps = {

package/lib/v1/Tab/props/propTypes.js

@@ -52,7 +52,9 @@ var TabContentWrapper_propTypes = {
   onScroll: _propTypes["default"].func,
   selectedTab: _propTypes["default"].string,
   style: _propTypes["default"].object,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  a11y: _propTypes["default"].object,
+  tagName: _propTypes["default"].string
 };
 exports.TabContentWrapper_propTypes = TabContentWrapper_propTypes;
 var Tabs_propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.22",
+  "version": "1.2.24",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -67,7 +67,7 @@
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
     "@zohodesk-private/node-plugins": "1.1.6",
     "@zohodesk-private/react-prop-validator": "1.2.1",
-    "@zohodesk/a11y": "2.1.2",
+    "@zohodesk/a11y": "2.2.0",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.2",
     "@zohodesk/icons": "1.0.27",
@@ -93,6 +93,6 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.2",
     "@zohodesk/utils": "1.3.13",
-    "@zohodesk/a11y": "2.1.2"
+    "@zohodesk/a11y": "2.2.0"
   }
 }