@zohodesk/components 1.2.18 → 1.2.20

package/es/v1/Typography/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping } from './letterSpacingMap';
+import { letterspacingMapping, lineheightMapping } from '../utils';
 export default function cssJSLogic(_ref) {
   let {
     props,
@@ -24,10 +24,14 @@ export default function cssJSLogic(_ref) {
     $ui_whiteSpace
   } = props;
 
-  if ($ui_letterSpacing && $ui_letterSpacing.match(/\./g)) {
+  if ($ui_letterSpacing) {
     $ui_letterSpacing = letterspacingMapping[$ui_letterSpacing];
   }
 
+  if ($ui_lineHeight) {
+    $ui_lineHeight = lineheightMapping[$ui_lineHeight];
+  }
+
   let typographyClass = compileClassNames({
     [style.reset]: $flag_reset,
     [style.dotted]: $flag_dotted,

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

@@ -13,8 +13,8 @@ export const propTypes = {
   $ui_typeFace: PropTypes.oneOf(['normal', 'italic']),
   $ui_decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
   $ui_size: PropTypes.oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
-  $ui_lineHeight: PropTypes.oneOf(['0', '1', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '27', '28', '29', '30', '32', '33', '34', '35', '36', '38', '40', '41', '42', '45', '50', '52', '54', '55', '60', '70', '75', '120', 'inherit']),
-  $ui_letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '2', '4', 'inherit']),
+  $ui_lineHeight: PropTypes.oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
+  $ui_letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
   $ui_wordBreak: PropTypes.oneOf(['breakAll', 'keepAll', 'breakWord']),
   $ui_wordWrap: PropTypes.oneOf(['normal', 'break']),
   $ui_whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),

package/es/v1/Typography/utils/index.js

@@ -0,0 +1,50 @@
+/* eslint-disable */
+export const letterspacingMapping = {
+  'inherit': 'inherit',
+  '0.1': '0_1',
+  '0.2': '0_2',
+  '0.3': '0_3',
+  '0.4': '0_4',
+  '0.5': '0_5',
+  '0.6': '0_6',
+  '0.7': '0_7',
+  '0.8': '0_8',
+  '0.9': '0_9',
+  '1': '1',
+  '1.1': '1_1',
+  '1.2': '1_2',
+  '1.3': '1_3',
+  '1.4': '1_4',
+  '1.5': '1_5',
+  '1.6': '1_6',
+  '1.7': '1_7',
+  '1.8': '1_8',
+  '1.9': '1_9',
+  '2': '2'
+};
+export const lineheightMapping = {
+  'inherit': 'inherit',
+  'initial': 'initial',
+  'normal': 'normal',
+  '0': '0',
+  '0.1': '0_1',
+  '0.2': '0_2',
+  '0.3': '0_3',
+  '0.4': '0_4',
+  '0.5': '0_5',
+  '0.6': '0_6',
+  '0.7': '0_7',
+  '0.8': '0_8',
+  '0.9': '0_9',
+  '1': '1',
+  '1.1': '1_1',
+  '1.2': '1_2',
+  '1.3': '1_3',
+  '1.4': '1_4',
+  '1.5': '1_5',
+  '1.6': '1_6',
+  '1.7': '1_7',
+  '1.8': '1_8',
+  '1.9': '1_9',
+  '2': '2'
+};

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/Avatar/Avatar.module.css

@@ -18,19 +18,31 @@
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
   vertical-align: middle;
   font-size: var(--avatar_font_size);
+  /* css:theme-validation:ignore */
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
 }
 
 .border {
+  /* css:theme-validation:ignore */
   border-color: var(--avatar_border_color);
 }
 
+.borderOnHover:hover,
+.borderOnActive {
+  /* css:theme-validation:ignore */
+}
+
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
 
+.avatar,
+.primary {
+  /* css:theme-validation:ignore */
+}
+
 .avatar, .primary {
   background-color: var(--avatar_bg_color);
 }

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -25,6 +25,8 @@
   composes: varClass;
   composes: posab from '../common/common.module.css';
   top: var(--avatarteam_top_top);
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
   outline-width: var(--avatarteam_outline_width);

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/Button/css/Button.module.css

@@ -48,10 +48,13 @@
   composes: dotted from '../../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);
+  /* css:theme-validation:ignore */
   color: var(--button_text_color);
   font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
+  /* css:theme-validation:ignore */
   min-width: var(--button_min_width);
+  /* css:theme-validation:ignore */
   height: var(--button_height);
   background-color: var(--button_bg_color);
   border-radius: var(--button_border_radius);
@@ -295,6 +298,7 @@
 .loadingelement:after {
   content: '';
   position: absolute;
+  /* css:theme-validation:ignore */
 }
 
 .loadingelement:before, .loadingelement:after {
@@ -468,6 +472,7 @@
   transform-origin: center;
   border-width: 2px 2px 0 0;
   border-style: solid;
+  /* css:theme-validation:ignore */
   border-color: var(--button_success_border_color);
   animation: tick var(--zd_no_transition3) ease 0s forwards;
 }
@@ -523,4 +528,7 @@
   }
 }
 
-.loader{color:var(--dot_mirror)}
+.loader{
+  /* css:theme-validation:ignore */
+  color:var(--dot_mirror)
+}

package/lib/Buttongroup/Buttongroup.module.css

@@ -11,6 +11,8 @@
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   background-color: var(--buttongroup_bg_color);
   box-shadow: var(--buttongroup_box_shadow);
   padding: var(--buttongroup_padding);

package/lib/CheckBox/CheckBox.module.css

@@ -34,6 +34,7 @@
 }
 .boxContainer {
   composes: offSelection from '../common/common.module.css';
+  /* css:theme-validation:ignore */
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
@@ -120,6 +121,7 @@
 
 .checkedprimaryLabel,
 .checkeddangerLabel {
+  /* css:theme-validation:ignore */
   color: var(--checkbox_checked_active_color);
 }
 .activeprimaryLabel:hover

package/lib/DateTime/DateTime.module.css

@@ -36,6 +36,7 @@
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
   line-height: var(--zd_size18);
+  /* css:theme-validation:ignore */
   text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;

package/lib/DateTime/dateFormatUtils/dateFormat.js

@@ -418,7 +418,12 @@ function getSelectedDate(values, props) {
       selectedValue = '';
 
   if (isDateTime) {
-    selectedInMillis = _datetimejs["default"].tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
+    if (timeZone) {
+      selectedInMillis = _datetimejs["default"].tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
+    } else {
+      selectedInMillis = Date.UTC(year, month, date, hour, mins);
+    }
+
     selectedValue = _datetimejs["default"].ISO(selectedInMillis);
   } else {
     selectedInMillis = Date.UTC(year, month, date);

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,6 +18,11 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
+.defaultPalette,
+.darkPalette {
+  /* css:theme-validation:ignore */
+}
+
 .defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
@@ -207,6 +212,7 @@
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+  /* css:theme-validation:ignore */
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -416,6 +422,7 @@
 .closeBar {
   /*  Variable:Ignore  */
     height: 6px;
+  /* css:theme-validation:ignore */
     width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);

package/lib/DropBox/css/DropBox.module.css

@@ -49,6 +49,7 @@
 
 .freeze {
   composes: varClass;
+  /* css:theme-validation:ignore */
   background: var(--dropbox_mob_bg_color);
 }
 

package/lib/DropDown/DropDownHeading.module.css

@@ -18,7 +18,9 @@
   font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
+  /* css:theme-validation:ignore */
   color: var(--dropdownheading_text_color);
+  /* css:theme-validation:ignore */
   padding: var(--dropdownheading_padding);
   background-color: var(--dropdownheading_bg_color);
 }
@@ -33,6 +35,10 @@
 .light {
   composes: default;
 }
+.light::after,
+.dark::after {
+  /* css:theme-validation:ignore */
+}
 .light::after, .dark::after {
   background-color: var(--dropdownheading_underline_bg_color);
 }

package/lib/DropDown/DropDownItem.module.css

@@ -20,6 +20,8 @@
   position: relative;
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13) ;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
@@ -74,6 +76,7 @@
   opacity: 0;
   visibility: hidden;
   width: var(--dropdownitem-user-width);
+  /* css:theme-validation:ignore */
   border-width: var(--dropdownitem-user-border-width);
   border-style: var(--dropdownitem-user-border-style);
   border-color: var(--dropdownitem-user-border-color);

package/lib/Label/Label.module.css

@@ -11,6 +11,7 @@
   vertical-align: middle;
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
+  /* css:theme-validation:ignore */
   color: var(--label_text_color);
   font-family: var(--label_font_family);
   cursor: var(--label_cursor);

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

@@ -23,8 +23,10 @@
   composes: varClass;
   position: relative;
   list-style: none;
+  /* css:theme-validation:ignore */
   color: var(--listitem_text_color);
   font-size: var(--zd_font_size13) ;
+  /* css:theme-validation:ignore */
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -34,6 +36,11 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
+.list,
+.default,
+.secondary {
+  /* css:theme-validation:ignore */
+}
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
@@ -94,6 +101,13 @@
   margin: var(--listitem_avatar_margin);
 }
 
+.defaultHover,
+.primaryHover,
+.secondaryHover,
+.darkHover {
+  /* css:theme-validation:ignore */
+}
+
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
@@ -135,6 +149,12 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
+.activedefault,
+.activeprimary,
+.activesecondary,
+.activedark {
+  /* css:theme-validation:ignore */
+}
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
@@ -160,6 +180,7 @@
 .defaultTick,
 .darkTick {
   position: absolute;
+  /* css:theme-validation:ignore */
   color: var(--listitem_tickicon_color);
 }
 

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/PopOver/PopOver.module.css

@@ -1,5 +1,6 @@
 .popup {
   position: relative;
+  /* css:theme-validation:ignore */
   background-color: var(--dot_white);
 }
 .target {

package/lib/Radio/Radio.module.css

@@ -25,6 +25,7 @@
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
+  /* css:theme-validation:ignore */
   stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;

package/lib/Ribbon/Ribbon.module.css

@@ -35,9 +35,12 @@
 .basic {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   line-height: var(--ribbon_line_height);
   padding: var(--ribbon_padding);
   background-color: var(--ribbon_bg_color);
@@ -334,6 +337,7 @@
   position: absolute;
   content: '';
   top: var(--ribbon_tag_before_top);
+  /* css:theme-validation:ignore */
   width: var(--ribbon_tag_before_width);
   height: var(--ribbon_tag_before_height);
   background-color: inherit;

package/lib/Select/Select.js

@@ -345,7 +345,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 +393,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);
         }

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,