@zohodesk/components 1.2.19 → 1.2.21

package/es/v1/Textarea/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  dataId: 'TextareaComp',
+  needBorder: true,
+  resize: 'none',
+  size: 'small',
+  variant: 'default',
+  needAppearance: true,
+  needReadOnlyStyle: true,
+  borderColor: 'default',
+  needEffect: true,
+  autoFocus: false,
+  customClass: '',
+  a11y: {},
+  dataSelectorId: 'textarea'
+};

package/es/v1/Textarea/props/propTypes.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  animated: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  getRef: PropTypes.func,
+  htmlId: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
+  size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  text: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'primary']),
+  customClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};

package/es/v1/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { defaultProps } from '../../Tooltip/props/defaultProps';
-import { propTypes } from '../../Tooltip/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { getLibraryConfig } from '../../Provider/Config';
 import style from '../../Tooltip/Tooltip.module.css';
 import ResizeObserver from '../Responsive/ResizeObserver';
@@ -154,8 +154,10 @@ export default class Tooltip extends React.Component {
       if (title !== '' && title) {
         titleDiv.setAttribute('data-title', title);
         titleDiv.removeAttribute('title');
+        let isInputElementType = element.type === 'text';
+        let elementText = isInputElementType ? element.value : element.innerText;
 
-        if (element.nodeName !== 'I' && element.innerText && element.innerText.trim() !== '') {
+        if (element.nodeName !== 'I' && elementText && elementText.trim() !== '') {
           let isContentDotted = '';
 
           if (element.scrollWidth !== 0) {
@@ -173,7 +175,7 @@ export default class Tooltip extends React.Component {
             isContentDotted = offWidth < scrollWidth;
           }
 
-          let originText = element.innerText.replace(/\s/g, '').toLowerCase();
+          let originText = elementText.replace(/\s/g, '').toLowerCase();
           let tooltipText = title.replace(/\s/g, '').toLowerCase();
           let isDefaultTooltip = element.hasAttribute('data-istitle') || element.hasAttribute('istitle') ? element.getAttribute('data-istitle') || element.getAttribute('istitle') : 'false';
           isDefaultTooltip = isDefaultTooltip === 'true';

package/es/v1/Tooltip/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  dataId: 'toolTip',
+  customClass: ''
+};

package/es/v1/Tooltip/props/propTypes.js

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  customClass: PropTypes.string
+};

package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { defaultProps } from '../../../VelocityAnimation/VelocityAnimation/props/defaultProps';
-import { propTypes } from '../../../VelocityAnimation/VelocityAnimation/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
 import LibraryContext from '../../../Provider/LibraryContextInit';

package/es/v1/VelocityAnimation/VelocityAnimation/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  runOnMount: false,
+  isCustomized: true,
+  needUIPack: true,
+  isFlex: false,
+  duration: 300
+};

package/es/v1/VelocityAnimation/VelocityAnimation/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node.isRequired,
+  delay: PropTypes.number,
+  duration: PropTypes.number,
+  isActive: PropTypes.bool.isRequired,
+  isCustomized: PropTypes.bool,
+  isFlex: PropTypes.bool,
+  name: PropTypes.oneOf(['fade', 'slideRight', 'shrink', 'expand', 'slideDown', 'flyDown', 'slideLeft']),
+  needUIPack: PropTypes.bool,
+  runOnMount: PropTypes.bool
+};

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,8 +1,8 @@
 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); }
 
 import React, { useContext } from 'react';
-import { defaultProps } from '../../../VelocityAnimation/VelocityAnimationGroup/props/defaultProps';
-import { propTypes } from '../../../VelocityAnimation/VelocityAnimationGroup/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
 import LibraryContext from '../../../Provider/LibraryContextInit';

package/es/v1/VelocityAnimation/VelocityAnimationGroup/props/defaultProps.js

@@ -0,0 +1,15 @@
+export const defaultProps = {
+  runOnMount: false,
+  enterHideStyle: {
+    display: 'none'
+  },
+  enterShowStyle: {
+    display: ''
+  },
+  isFlex: false,
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  isCustomized: true,
+  needUIPack: true
+};

package/es/v1/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node.isRequired,
+  component: PropTypes.element,
+  enterDelay: PropTypes.number,
+  enterDuration: PropTypes.number,
+  enterHideStyle: PropTypes.object,
+  enterName: PropTypes.string,
+  enterShowStyle: PropTypes.object,
+  exitDelay: PropTypes.number,
+  exitDuration: PropTypes.number,
+  exitName: PropTypes.string,
+  isActive: PropTypes.bool,
+  isCustomized: PropTypes.bool,
+  isFlex: PropTypes.bool,
+  name: PropTypes.oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
+  needUIPack: PropTypes.bool,
+  runOnMount: PropTypes.bool
+};

package/es/v1/semantic/Button/Button.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { defaultProps } from '../../../semantic/Button/props/defaultProps';
-import { propTypes } from '../../../semantic/Button/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from '../../../semantic/Button/semanticButton.module.css';
 export default function Button(props) {
   const {

package/es/v1/semantic/Button/props/defaultProps.js

@@ -0,0 +1,12 @@
+export const defaultProps = {
+  children: null,
+  autoFocus: false,
+  dataId: 'semanticButton',
+  disabled: false,
+  palette: 'primary',
+  text: 'Button',
+  type: 'button',
+  value: 'text',
+  customClass: '',
+  a11y: {}
+};

package/es/v1/semantic/Button/props/propTypes.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autoFocus: PropTypes.bool,
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  ref: PropTypes.func,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['submit', 'reset', 'button']),
+  value: PropTypes.string,
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaHaspopup: PropTypes.bool,
+    ariaExpanded: PropTypes.bool,
+    ariaControls: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};

package/lib/Avatar/Avatar.js

@@ -215,7 +215,8 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         "data-id": dataId,
         "data-test-id": dataId,
         onClick: onClick,
-        "data-selector-id": dataSelectorId
+        "data-selector-id": dataSelectorId,
+        tabIndex: onClick ? 0 : null
       }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarModule["default"].initial),
         "data-id": "".concat(dataId, "_AvatarInitial"),

package/lib/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap

@@ -252,6 +252,7 @@ exports[`AvatarTeam rendering the onClick prop with asFragment and toMatchSnapsh
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
+      tabindex="0"
     >
       <span
         class="initial"

package/lib/DateTime/DateTime.module.css

@@ -35,7 +35,7 @@
 .grid {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
-  line-height: var(--zd_size18);
+  line-height: 1.3846;
   /* css:theme-validation:ignore */
   text-align: center;
   padding: var(--zd_size4) 0 ;
@@ -72,7 +72,7 @@
 
 .thMonYear {
   font-size: var(--zd_font_size13) ;
-  line-height: var(--zd_size24);
+  line-height: 1.8462;
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
   display: initial

package/lib/DateTime/YearView.module.css

@@ -9,7 +9,7 @@
 .month {
   width: 30.333%;
   font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size26);
+  line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
   text-align: center;

package/lib/Label/Label.module.css

@@ -4,8 +4,9 @@
   --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
-  --label_line_height: 18px;
+  --label_line_height: 1.286;
 }
+/* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
   vertical-align: middle;
@@ -18,15 +19,19 @@
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
+  --label_line_height:1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
+  --label_line_height:1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
+  --label_line_height:1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
+  --label_line_height:0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {

package/lib/ListItem/ListContainer.js

@@ -21,6 +21,8 @@ var _propTypes = require("./props/propTypes");
 
 var _CustomResponsive = require("../Responsive/CustomResponsive");
 
+var _excluded = ["role", "ariaSelected", "ariaLabel", "insetFocus"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,6 +31,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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); }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var ListContainer = function ListContainer(props) {
   var size = props.size,
       active = props.active,
@@ -72,7 +78,9 @@ var ListContainer = function ListContainer(props) {
       ariaSelected = a11y.ariaSelected,
       ariaLabel = a11y.ariaLabel,
       _a11y$insetFocus = a11y.insetFocus,
-      insetFocus = _a11y$insetFocus === void 0 ? true : _a11y$insetFocus;
+      insetFocus = _a11y$insetFocus === void 0 ? true : _a11y$insetFocus,
+      a11yAttributes = _objectWithoutProperties(a11y, _excluded);
+
   var options = {};
 
   if (isLink) {
@@ -105,7 +113,7 @@ var ListContainer = function ListContainer(props) {
     eleRef: eleRef,
     tagName: isLink ? 'a' : 'li',
     "data-title": isDisabled ? disableTitle : title
-  }, options, customProps), children);
+  }, options, customProps, a11yAttributes), children);
 };
 
 ListContainer.defaultProps = _defaultProps.ListContainerDefaultProps;

package/lib/ListItem/ListItem.module.css

@@ -77,7 +77,7 @@
   composes: dotted from '../common/common.module.css';
 }
 .value, .multiLineValue {
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
 }
 .multiLineValue{
   word-break: break-word;

package/lib/MultiSelect/Suggestions.js

@@ -110,7 +110,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         var isHighlight = hoverOption === index || id === hoverId ? true : false;
         var list_a11y = Object.assign({}, a11y, {
           ariaSelected: isActive,
-          ariaLabel: value
+          ariaLabel: value,
+          'data-a11y-list-active': isHighlight
         });
 
         var commonProps = _objectSpread({

package/lib/Ribbon/Ribbon.module.css

@@ -32,6 +32,7 @@
   --ribbon_tag_before_border_width: 1px 0 0 1px  ;
 }
 
+/* css:lineheight-validation:ignore */
 .basic {
   composes: varClass;
   position: relative;
@@ -215,7 +216,6 @@
   composes: dotted from '../common/common.module.css';
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_line_height: 20px;
   --ribbon_text_transform: uppercase;
 }
 
@@ -227,6 +227,22 @@
   --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
 
+.flag.small {
+  --ribbon_line_height: 2.2223;
+}
+
+.flag.medium {
+  --ribbon_line_height: 1.8182;
+}
+
+.flag.large {
+  --ribbon_line_height: 1.5385;
+}
+
+.flag.xlarge {
+  --ribbon_line_height: 1.4286;
+}
+
 .flag::after {
   position: absolute;
   /*  Variable:Ignore  */
@@ -262,10 +278,25 @@
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  --ribbon_line_height: 20px;
   text-align: center;
 }
 
+.ribbon.small {
+  --ribbon_line_height: 2.2223;
+}
+
+.ribbon.medium {
+  --ribbon_line_height: 1.8182;
+}
+
+.ribbon.large {
+  --ribbon_line_height: 1.5385;
+}
+
+.ribbon.xlarge {
+  --ribbon_line_height: 1.4286;
+}
+
 .ribbon::after,
 .ribbon::before {
   position: absolute;
@@ -373,7 +404,6 @@
 .sticker {
   display: block;
   height: var(--zd_size18) ;
-  line-height: var(--zd_size11);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
@@ -383,6 +413,22 @@
   padding: var(--zd_size3) var(--zd_size10) ;
 }
 
+.sticker.small {
+  line-height: 1.2223;
+}
+
+.sticker.medium {
+  line-height: 1;
+}
+
+.sticker.large {
+  line-height: 0.8462;
+}
+
+.sticker.xlarge {
+  line-height: 0.7858;
+}
+
 .after,
 .before {
   position: absolute;

package/lib/Select/Select.js

@@ -53,6 +53,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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); } }
@@ -345,7 +351,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isPopupOpen = _this$props4.isPopupOpen,
           onKeyDown = _this$props4.onKeyDown,
           isPopupOpenOnEnter = _this$props4.isPopupOpenOnEnter,
-          needCloseOnSelect = _this$props4.needCloseOnSelect;
+          needCloseOnSelect = _this$props4.needCloseOnSelect,
+          isPopupReady = _this$props4.isPopupReady;
       var _this$state2 = this.state,
           hoverIndex = _this$state2.hoverIndex,
           optionsNormalize = _this$state2.optionsNormalize;
@@ -392,7 +399,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         var _ref2 = option || {},
             id = _ref2.id;
 
-        if (isPopupOpen && !(0, _Common.getIsEmptyValue)(id) && onChange) {
+        if (isPopupReady && !(0, _Common.getIsEmptyValue)(id) && onChange) {
           onChange(id, optionsNormalize[id]);
           needCloseOnSelect && this.handlePopupClose(e);
         }
@@ -840,8 +847,11 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         htmlId: htmlId,
         isFocus: isPopupReady,
         autoComplete: autoComplete,
+        isScrollPrevent: true,
         customProps: {
-          TextBoxProps: TextBoxProps
+          TextBoxProps: _objectSpread({
+            'data-title': title || selected
+          }, TextBoxProps)
         }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
@@ -889,7 +899,10 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         htmlId: htmlId,
         autoComplete: autoComplete,
         isFocus: isPopupReady,
-        customProps: TextBoxProps
+        isScrollPrevent: true,
+        customProps: _objectSpread({
+          'data-title': title || selected
+        }, TextBoxProps)
       })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"

package/lib/Select/Select.module.css

@@ -1,65 +1,84 @@
 .input {
   cursor: pointer;
 }
+
 .small {
   max-height: var(--zd_size200) ;
 }
+
 .medium {
   max-height: var(--zd_size350) ;
 }
+
 .large {
   max-height: var(--zd_size400) ;
 }
+
 .emptyState {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_select_emptystate_text);
   composes: semibold from '../common/common.module.css';
 }
+
 .box_small .emptyState {
   padding: var(--zd_size12) var(--zd_size6) ;
 }
+
 .box_medium .emptyState {
   padding: var(--zd_size12) var(--zd_size15) ;
 }
+
 .hide {
   composes: vishidden from '../common/common.module.css';
 }
+
 .container {
   position: relative;
 }
+/* css:lineheight-validation:ignore */
 .arrowIcon {
   height: var(--zd_size8) ;
   line-height: var(--zd_size8);
 }
+
 .small.search {
   padding: 0 var(--zd_size5) ;
 }
+
 .medium.search {
   padding: var(--zd_size3) var(--zd_size20) 0 ;
 }
+
 .title {
   margin-bottom: var(--zd_size6) ;
 }
+
 .groupTitle {
   margin: var(--zd_size6) 0 ;
 }
+
 .listItemContainer {
   padding: var(--zd_size10) 0 ;
 }
+
 .responsivelistItemContainer {
   padding: var(--zd_size10) 0 0 ;
 }
+
 .readonly {
   --textboxicon_icon_cursor: not-allowed;
 }
+
 .transparentContainer .arrowIcon {
   opacity: 0;
   visibility: hidden;
 }
+
 .transparentContainer:hover .arrowIcon {
   opacity: 1;
   visibility: visible;
 }
+
 .disable {
   color: var(--zdt_select_disable_text);
 }
@@ -78,9 +97,11 @@
 [dir=rtl] .leftIcon {
   right: 0 ;
 }
+
 [dir=ltr] .iconSelect {
   padding-left: var(--zd_size30) ;
 }
+
 [dir=rtl] .iconSelect {
   padding-right: var(--zd_size30) ;
 }
@@ -88,22 +109,27 @@
 .dropBoxList {
   padding: var(--zd_size10) 0 ;
 }
-.responsivedropBoxList{
+
+.responsivedropBoxList {
   padding: var(--zd_size10) 0 0 0 ;
 }
+
 .rotate {
   transform: rotateX(180deg);
 }
+
 .iconOnHoverStyle .arrowIcon,
 .iconOnHoverReadonly .arrowIcon,
 .iconOnHoverReadonly:hover .arrowIcon {
   opacity: 0;
   visibility: hidden;
 }
+
 .iconOnHoverStyle:hover .arrowIcon {
   opacity: 1;
   visibility: visible;
 }
+
 .loader {
   padding: var(--zd_size10) ;
 }

package/lib/Switch/Switch.js

@@ -108,7 +108,6 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         "data-title": disabled ? disableTitle : title,
         "aria-checked": checked,
         role: "switch",
-        tabIndex: isReadOnly || disabled ? '-1' : '0',
         dataSelectorId: dataSelectorId
       }, SwitchProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_SwitchModule["default"][size], " ").concat(customSwitchSize)
@@ -126,7 +125,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         htmlFor: id,
         "data-id": dataId,
         "data-test-id": dataId,
-        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)
+        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+        tabIndex: isReadOnly || disabled ? '-1' : '0'
       })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: labelPalette,