@zohodesk/components 1.2.19 → 1.2.20

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/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/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/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,

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

@@ -9,7 +9,6 @@ exports[`Switch rendering the CustomClass 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium SwtichCustomSwitchSize shrinkOff"
@@ -26,6 +25,7 @@ exports[`Switch rendering the CustomClass 1`] = `
       <label
         class="label switch_mediumLabel SwtichCustomSwitch"
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -52,7 +52,6 @@ exports[`Switch rendering the CustomProps 1`] = `
     data-switch="true"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -69,6 +68,7 @@ exports[`Switch rendering the CustomProps 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -95,7 +95,6 @@ exports[`Switch rendering the ID 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -112,6 +111,7 @@ exports[`Switch rendering the ID 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -137,7 +137,6 @@ exports[`Switch rendering the Name 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -155,6 +154,7 @@ exports[`Switch rendering the Name 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -171,7 +171,6 @@ exports[`Switch rendering the Title 1`] = `
     data-test-id="containerComponent"
     data-title="LabelTitle"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -188,6 +187,7 @@ exports[`Switch rendering the Title 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -203,7 +203,6 @@ exports[`Switch rendering the Value 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -220,6 +219,7 @@ exports[`Switch rendering the Value 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -235,7 +235,6 @@ exports[`Switch rendering the checked 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -253,6 +252,7 @@ exports[`Switch rendering the checked 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -268,7 +268,6 @@ exports[`Switch rendering the dataId 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -287,6 +286,7 @@ exports[`Switch rendering the dataId 1`] = `
         data-id="data-Switch"
         data-test-id="data-Switch"
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -302,7 +302,6 @@ exports[`Switch rendering the defult props 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -317,6 +316,7 @@ exports[`Switch rendering the defult props 1`] = `
       />
       <label
         class="label switch_mediumLabel "
+        tabindex="0"
       />
     </div>
   </div>
@@ -333,7 +333,6 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
     data-test-id="containerComponent"
     data-title="data-disableTitle"
     role="switch"
-    tabindex="-1"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -351,6 +350,7 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="-1"
       />
     </div>
   </div>
@@ -366,7 +366,6 @@ exports[`Switch rendering the isReadOnly 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="-1"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -382,6 +381,7 @@ exports[`Switch rendering the isReadOnly 1`] = `
       />
       <label
         class="label switch_mediumLabel "
+        tabindex="-1"
       />
     </div>
   </div>
@@ -397,7 +397,6 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -414,6 +413,7 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -439,7 +439,6 @@ exports[`Switch rendering the labelSize of- default 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -456,6 +455,7 @@ exports[`Switch rendering the labelSize of- default 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -481,7 +481,6 @@ exports[`Switch rendering the labelSize of- large 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -498,6 +497,7 @@ exports[`Switch rendering the labelSize of- large 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -523,7 +523,6 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -540,6 +539,7 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -565,7 +565,6 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -582,6 +581,7 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -607,7 +607,6 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -624,6 +623,7 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -649,7 +649,6 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -666,6 +665,7 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -691,7 +691,6 @@ exports[`Switch rendering the labelSize of- small 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -708,6 +707,7 @@ exports[`Switch rendering the labelSize of- small 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -733,7 +733,6 @@ exports[`Switch rendering the size of- medium 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -750,6 +749,7 @@ exports[`Switch rendering the size of- medium 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -765,7 +765,6 @@ exports[`Switch rendering the size of- small 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_small  shrinkOff"
@@ -782,6 +781,7 @@ exports[`Switch rendering the size of- small 1`] = `
       <label
         class="label switch_smallLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -797,7 +797,6 @@ exports[`Switch rendering the text 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -814,6 +813,7 @@ exports[`Switch rendering the text 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label

package/lib/v1/Accordion/Accordion.js

@@ -11,9 +11,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _hooks = require("@zohodesk/hooks");
 
-var _defaultProps = require("../../Accordion/props/defaultProps");
+var _defaultProps = require("./props/defaultProps");
 
-var _propTypes = require("../../Accordion/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 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); }
 

package/lib/v1/Accordion/AccordionItem.js

@@ -7,9 +7,9 @@ exports["default"] = AccordionItem;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("../../Accordion/props/defaultProps");
+var _defaultProps = require("./props/defaultProps");
 
-var _propTypes = require("../../Accordion/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 var _VelocityAnimation = _interopRequireDefault(require("../VelocityAnimation/VelocityAnimation/VelocityAnimation"));
 

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Accordion_defaultProps = exports.AccordionItem_defaultProps = void 0;
+var Accordion_defaultProps = {
+  unMount: true,
+  disableInternalState: false,
+  a11y: {},
+  dataId: 'Accordion',
+  dataSelectorId: 'accordion'
+};
+exports.Accordion_defaultProps = Accordion_defaultProps;
+var AccordionItem_defaultProps = {
+  a11y: {},
+  dataId: 'AccordionItem',
+  dataSelectorId: 'accordionItem'
+};
+exports.AccordionItem_defaultProps = AccordionItem_defaultProps;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Accordion_propTypes = exports.AccordionItem_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Accordion_propTypes = {
+  children: _propTypes["default"].node,
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
+  disableInternalState: _propTypes["default"].bool,
+  height: _propTypes["default"].string,
+  onSelect: _propTypes["default"].func,
+  selectedItem: _propTypes["default"].string.isRequired,
+  unMount: _propTypes["default"].bool,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaExpanded: _propTypes["default"].bool,
+    ariaHaspopup: _propTypes["default"].bool
+  })
+};
+exports.Accordion_propTypes = Accordion_propTypes;
+var AccordionItem_propTypes = {
+  children: _propTypes["default"].node,
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
+  equalityCheck: _propTypes["default"].func,
+  id: _propTypes["default"].string,
+  selectMenu: _propTypes["default"].func,
+  selectedItem: _propTypes["default"].string,
+  unMount: _propTypes["default"].bool,
+  unMountItem: _propTypes["default"].bool,
+  innerClass: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string
+  })
+};
+exports.AccordionItem_propTypes = AccordionItem_propTypes;

package/lib/v1/Animation/Animation.js

@@ -7,9 +7,9 @@ exports["default"] = Animation;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("../../Animation/props/defaultProps");
+var _defaultProps = require("./props/defaultProps");
 
-var _propTypes = require("../../Animation/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 var _reactTransitionGroup = require("react-transition-group");
 

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  name: 'fadeIn',
+  unmountOnExit: true
+};
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  children: _propTypes["default"].node,
+  delayClassName: _propTypes["default"].string,
+  enterDuration: _propTypes["default"].number,
+  exitDuration: _propTypes["default"].number,
+  isActive: _propTypes["default"].bool,
+  name: _propTypes["default"].oneOf(['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none']),
+  onEntered: _propTypes["default"].func,
+  onExit: _propTypes["default"].func,
+  unmountOnExit: _propTypes["default"].bool
+};
+exports.propTypes = propTypes;

package/lib/v1/AppContainer/AppContainer.js

@@ -9,9 +9,9 @@ exports["default"] = AppContainer;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _defaultProps = require("../../AppContainer/props/defaultProps");
+var _defaultProps = require("./props/defaultProps");
 
-var _propTypes = require("../../AppContainer/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 var _Layout = require("../Layout");
 

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  dataId: 'AppContainer',
+  tagName: 'div',
+  className: '',
+  tooltipClass: '',
+  tooltipParentClass: '',
+  customProps: {},
+  dataSelectorId: 'appContainer',
+  needTooltip: true
+};
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
+  eleRef: _propTypes["default"].func,
+  tagName: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  needTooltip: _propTypes["default"].bool,
+  tooltipClass: _propTypes["default"].string,
+  tooltipParentClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    ContainerProps: _propTypes["default"].object,
+    TooltipProps: _propTypes["default"].object,
+    ExtraProps: _propTypes["default"].object
+  })
+};
+exports.propTypes = propTypes;

package/lib/v1/Avatar/Avatar.js

@@ -11,9 +11,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _hooks = require("@zohodesk/hooks");
 
-var _defaultProps = require("../../Avatar/props/defaultProps");
+var _defaultProps = require("./props/defaultProps");
 
-var _propTypes = require("../../Avatar/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 var _getInitial = require("../../utils/getInitial");
 
@@ -161,7 +161,8 @@ function Avatar(props) {
     "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"),