@zohodesk/components 1.0.0-alpha-276 → 1.0.0-alpha-278

package/README.md

@@ -32,6 +32,18 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-278
+
+- **DateTime** - Date.Raplace check added to avoid run time error
+
+# 1.0.0-alpha-277
+
+- **DropBox** - `focusScopeProps` will be served by `customProps` from now.
+
+- **ListItem, ListItemWithAvatar, ListItemWithIcon, ListItemWithCheckBox, ListItemWithRadio** - default role `option` has been added to the list item container.
+
+- **ListContainer** - A11y prop key => `data-a11y-inset-focus` set `true` as default for the ListContainer.
+
 # 1.0.0-alpha-276
 
 - **DateTime** - TimeZone null Case Handled

package/es/Buttongroup/Buttongroup.js

@@ -16,7 +16,7 @@ export default class Buttongroup extends React.Component {
       dataSelectorId
     } = this.props;
     let btnGroup = [];
-    children.forEach(child => {
+    children && children.forEach(child => {
       let btnRight = /*#__PURE__*/React.createElement("span", {
         className: style[type]
       }, child);

package/es/DateTime/DateTime.js

@@ -112,8 +112,8 @@ export default class DateTime extends React.PureComponent {
       if (timeZone && value) {
         result = datetime.toDate(datetime.tz.utcToTz(value, timeZone));
       } else {
-        value = value.replace('Z', '');
-        result = new Date(value);
+        value = value ? value.replace('Z', '') : null;
+        result = value ? new Date(value) : new Date();
       }
     } else {
       if (value) {

package/es/DropBox/DropBox.js

@@ -12,7 +12,7 @@ import { DropBoxPropTypes } from './props/propTypes';
 import { stopPropagation } from './../utils/Common';
 import style from './css/DropBox.module.css';
 export default function DropBox(props) {
-  const focusRef = useRef(null);
+  const dropBoxRef = useRef(null);
   const DropBoxContext = useContext(LibraryContext);
   const {
     needResponsive,
@@ -21,8 +21,19 @@ export default function DropBox(props) {
     isAbsolutePositioningNeeded,
     isRestrictScroll,
     needFocusScope,
-    onClose
+    onClose,
+    customProps
   } = props;
+  const {
+    focusScopeProps = {}
+  } = customProps;
+  const {
+    autoFocus = true,
+    restoreFocus = true,
+    needArrowLoop = true,
+    needTabLoop = false,
+    enableEnterAction = true
+  } = focusScopeProps;
   const {
     direction
   } = DropBoxContext || {};
@@ -41,22 +52,23 @@ export default function DropBox(props) {
   const {
     zIndexStyle
   } = cssJSLogic(props);
-  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
-    focusClose: onClose,
-    elementRef: focusRef,
-    autoFocus: true,
-    restoreFocus: true,
-    focusArrowLoop: true,
-    enableEnterAction: true
-  }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, _extends({
+    onClose: onClose,
+    elementRef: dropBoxRef,
+    autoFocus: autoFocus,
+    restoreFocus: restoreFocus,
+    needArrowLoop: needArrowLoop,
+    needTabLoop: needTabLoop,
+    enableEnterAction: enableEnterAction
+  }, focusScopeProps), /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: focusRef
+    subContainerRef: dropBoxRef
   }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
-    subContainerRef: focusRef,
+    subContainerRef: dropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle

package/es/DropBox/props/defaultProps.js

@@ -6,7 +6,8 @@ export const defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   needFocusScope: false,
-  needAutoZindex: true
+  needAutoZindex: true,
+  customProps: {}
 };
 export const DropBoxDefaultProps = { ...DropBoxElementDefaultProps,
   ...defaultProps

package/es/DropBox/props/propTypes.js

@@ -7,7 +7,8 @@ export const propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   needFocusScope: PropTypes.bool,
-  needAutoZindex: PropTypes.bool
+  needAutoZindex: PropTypes.bool,
+  customProps: PropTypes.object
 };
 export const DropBoxPropTypes = { ...DropBoxElementPropTypes,
   ...propTypes

package/es/ListItem/ListContainer.js

@@ -54,7 +54,8 @@ const ListContainer = props => {
   const {
     role,
     ariaSelected,
-    ariaLabel
+    ariaLabel,
+    insetFocus = true
   } = a11y;
   const options = {};
 
@@ -73,7 +74,7 @@ const ListContainer = props => {
 
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
-    "data-a11y-inside-focus": true,
+    "data-a11y-inset-focus": insetFocus,
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,

package/es/ListItem/ListItem.js

@@ -82,13 +82,18 @@ export default class ListItem extends React.Component {
       customListItem = '',
       customTickIcon = ''
     } = customClass;
+    const listA11y = {
+      ariaHidden: true,
+      role: 'option',
+      ...a11y
+    };
     let {
-      ariaHidden = true
-    } = a11y;
+      ariaHidden
+    } = listA11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/ListItem/ListItemWithAvatar.js

@@ -87,13 +87,18 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customAvatar = '',
       customAvatarTeam = ''
     } = customClass;
+    const listA11y = {
+      ariaHidden: true,
+      role: 'option',
+      ...a11y
+    };
     let {
-      ariaHidden = true
-    } = a11y;
+      ariaHidden
+    } = listA11y;
     let isDarkPalette = palette === 'dark';
     let dataIdString = value ? value : dataId;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/ListItem/ListItemWithCheckBox.js

@@ -63,6 +63,10 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps,
       needMultiLineText
     } = this.props;
+    const listA11y = {
+      role: 'option',
+      ...a11y
+    };
     let {
       ListItemProps = {},
       ContainerProps = {}
@@ -73,7 +77,7 @@ export default class ListItemWithCheckBox extends React.Component {
       customLabel = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/ListItem/ListItemWithIcon.js

@@ -78,12 +78,17 @@ export default class ListItemWithIcon extends React.Component {
       ListItemProps = {},
       ContainerProps = {}
     } = customProps;
+    const listA11y = {
+      ariaHidden: true,
+      role: 'option',
+      ...a11y
+    };
     let {
-      ariaHidden = true
-    } = a11y;
+      ariaHidden
+    } = listA11y;
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/ListItem/ListItemWithRadio.js

@@ -68,13 +68,17 @@ export default class ListItemWithRadio extends React.Component {
       ListItemProps = {},
       ContainerProps = {}
     } = customProps;
+    const listA11y = {
+      role: 'option',
+      ...a11y
+    };
     let {
       customListItem = '',
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
+      a11y: listA11y,
       size: size,
       palette: palette,
       highlight: highlight,

package/es/MultiSelect/props/propTypes.js

@@ -10,7 +10,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   emptyMessage: PropTypes.string.isRequired,
   getContainerRef: PropTypes.func,
   getFooter: PropTypes.func,
-  groupedOptions: PropTypes.array.required,
+  groupedOptions: PropTypes.array.isRequired,
   i18nKeys: PropTypes.shape({
     loadingText: PropTypes.string,
     emptyText: PropTypes.string,

package/es/Select/Select.js

@@ -953,6 +953,8 @@ SelectComponent.defaultProps = Select_defaultProps;
 SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);
 Select.defaultProps = SelectComponent.defaultProps;
+Select.propTypes = Select_propTypes;
+Select.displayName = 'Select';
 export default Select; // if (__DOCS__) {
 //   Select.docs = {
 //     componentGroup: 'Form Elements',

package/lib/Buttongroup/Buttongroup.js

@@ -61,7 +61,7 @@ var Buttongroup = /*#__PURE__*/function (_React$Component) {
           dataId = _this$props.dataId,
           dataSelectorId = _this$props.dataSelectorId;
       var btnGroup = [];
-      children.forEach(function (child) {
+      children && children.forEach(function (child) {
         var btnRight = /*#__PURE__*/_react["default"].createElement("span", {
           className: _ButtongroupModule["default"][type]
         }, child);

package/lib/DateTime/DateTime.js

@@ -182,8 +182,8 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         if (timeZone && value) {
           result = _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone));
         } else {
-          value = value.replace('Z', '');
-          result = new Date(value);
+          value = value ? value.replace('Z', '') : null;
+          result = value ? new Date(value) : new Date();
         }
       } else {
         if (value) {

package/lib/DropBox/DropBox.js

@@ -38,7 +38,7 @@ 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 DropBox(props) {
-  var focusRef = (0, _react.useRef)(null);
+  var dropBoxRef = (0, _react.useRef)(null);
   var DropBoxContext = (0, _react.useContext)(_LibraryContextInit["default"]);
   var needResponsive = props.needResponsive,
       portalId = props.portalId,
@@ -46,7 +46,20 @@ function DropBox(props) {
       isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
       isRestrictScroll = props.isRestrictScroll,
       needFocusScope = props.needFocusScope,
-      onClose = props.onClose;
+      onClose = props.onClose,
+      customProps = props.customProps;
+  var _customProps$focusSco = customProps.focusScopeProps,
+      focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
+  var _focusScopeProps$auto = focusScopeProps.autoFocus,
+      autoFocus = _focusScopeProps$auto === void 0 ? true : _focusScopeProps$auto,
+      _focusScopeProps$rest = focusScopeProps.restoreFocus,
+      restoreFocus = _focusScopeProps$rest === void 0 ? true : _focusScopeProps$rest,
+      _focusScopeProps$need = focusScopeProps.needArrowLoop,
+      needArrowLoop = _focusScopeProps$need === void 0 ? true : _focusScopeProps$need,
+      _focusScopeProps$need2 = focusScopeProps.needTabLoop,
+      needTabLoop = _focusScopeProps$need2 === void 0 ? false : _focusScopeProps$need2,
+      _focusScopeProps$enab = focusScopeProps.enableEnterAction,
+      enableEnterAction = _focusScopeProps$enab === void 0 ? true : _focusScopeProps$enab;
 
   var _ref = DropBoxContext || {},
       direction = _ref.direction;
@@ -66,22 +79,23 @@ function DropBox(props) {
   var _cssJSLogic = (0, _cssJSLogic2["default"])(props),
       zIndexStyle = _cssJSLogic.zIndexStyle;
 
-  var dropBoxEle = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
-    focusClose: onClose,
-    elementRef: focusRef,
-    autoFocus: true,
-    restoreFocus: true,
-    focusArrowLoop: true,
-    enableEnterAction: true
-  }, /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
+  var dropBoxEle = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], _extends({
+    onClose: onClose,
+    elementRef: dropBoxRef,
+    autoFocus: autoFocus,
+    restoreFocus: restoreFocus,
+    needArrowLoop: needArrowLoop,
+    needTabLoop: needTabLoop,
+    enableEnterAction: enableEnterAction
+  }, focusScopeProps), /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
     isModel: isModel,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: focusRef
+    subContainerRef: dropBoxRef
   }))) : /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
     isModel: isModel,
-    subContainerRef: focusRef,
+    subContainerRef: dropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle

package/lib/DropBox/props/defaultProps.js

@@ -20,7 +20,8 @@ var defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   needFocusScope: false,
-  needAutoZindex: true
+  needAutoZindex: true,
+  customProps: {}
 };
 exports.defaultProps = defaultProps;
 

package/lib/DropBox/props/propTypes.js

@@ -24,7 +24,8 @@ var propTypes = {
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   isRestrictScroll: _propTypes["default"].bool,
   needFocusScope: _propTypes["default"].bool,
-  needAutoZindex: _propTypes["default"].bool
+  needAutoZindex: _propTypes["default"].bool,
+  customProps: _propTypes["default"].object
 };
 exports.propTypes = propTypes;
 

package/lib/ListItem/ListContainer.js

@@ -70,7 +70,9 @@ var ListContainer = function ListContainer(props) {
 
   var role = a11y.role,
       ariaSelected = a11y.ariaSelected,
-      ariaLabel = a11y.ariaLabel;
+      ariaLabel = a11y.ariaLabel,
+      _a11y$insetFocus = a11y.insetFocus,
+      insetFocus = _a11y$insetFocus === void 0 ? true : _a11y$insetFocus;
   var options = {};
 
   if (isLink) {
@@ -88,7 +90,7 @@ var ListContainer = function ListContainer(props) {
 
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     role: role,
-    "data-a11y-inside-focus": true,
+    "data-a11y-inset-focus": insetFocus,
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,

package/lib/ListItem/ListItem.js

@@ -25,6 +25,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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); } }
@@ -125,12 +131,17 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customTi = customClass.customTickIcon,
           customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi;
-      var _a11y$ariaHidden = a11y.ariaHidden,
-          ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
+
+      var listA11y = _objectSpread({
+        ariaHidden: true,
+        role: 'option'
+      }, a11y);
+
+      var ariaHidden = listA11y.ariaHidden;
       var tickIconPalette = _ListItemModule["default"]["".concat(palette, "Tick")] ? _ListItemModule["default"]["".concat(palette, "Tick")] : '';
       var dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
-        a11y: a11y,
+        a11y: listA11y,
         size: size,
         palette: palette,
         highlight: highlight,

package/lib/ListItem/ListItemWithAvatar.js

@@ -29,6 +29,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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); } }
@@ -133,12 +139,17 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           customAvatar = _customClass$customAv === void 0 ? '' : _customClass$customAv,
           _customClass$customAv2 = customClass.customAvatarTeam,
           customAvatarTeam = _customClass$customAv2 === void 0 ? '' : _customClass$customAv2;
-      var _a11y$ariaHidden = a11y.ariaHidden,
-          ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
+
+      var listA11y = _objectSpread({
+        ariaHidden: true,
+        role: 'option'
+      }, a11y);
+
+      var ariaHidden = listA11y.ariaHidden;
       var isDarkPalette = palette === 'dark';
       var dataIdString = value ? value : dataId;
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
-        a11y: a11y,
+        a11y: listA11y,
         size: size,
         palette: palette,
         highlight: highlight,

package/lib/ListItem/ListItemWithCheckBox.js

@@ -25,6 +25,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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); } }
@@ -111,6 +117,11 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText;
+
+      var listA11y = _objectSpread({
+        role: 'option'
+      }, a11y);
+
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -122,7 +133,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
-        a11y: a11y,
+        a11y: listA11y,
         size: size,
         palette: palette,
         highlight: highlight,

package/lib/ListItem/ListItemWithIcon.js

@@ -25,6 +25,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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); } }
@@ -123,11 +129,16 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
           ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe;
-      var _a11y$ariaHidden = a11y.ariaHidden,
-          ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
+
+      var listA11y = _objectSpread({
+        ariaHidden: true,
+        role: 'option'
+      }, a11y);
+
+      var ariaHidden = listA11y.ariaHidden;
       var dataIdString = dataId ? "".concat(dataId.replace("'", '_')) : value.toLowerCase().replace("'", '_');
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
-        a11y: a11y,
+        a11y: listA11y,
         size: size,
         palette: palette,
         highlight: highlight,

package/lib/ListItem/ListItemWithRadio.js

@@ -25,6 +25,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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); } }
@@ -116,6 +122,11 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
           ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe;
+
+      var listA11y = _objectSpread({
+        role: 'option'
+      }, a11y);
+
       var _customClass$customLi = customClass.customListItem,
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customRa = customClass.customRadio,
@@ -123,7 +134,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           _customClass$customRa2 = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2;
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
-        a11y: a11y,
+        a11y: listA11y,
         size: size,
         palette: palette,
         highlight: highlight,

package/lib/MultiSelect/props/propTypes.js

@@ -20,7 +20,7 @@ var AdvancedGroupMultiSelect_propTypes = {
   emptyMessage: _propTypes["default"].string.isRequired,
   getContainerRef: _propTypes["default"].func,
   getFooter: _propTypes["default"].func,
-  groupedOptions: _propTypes["default"].array.required,
+  groupedOptions: _propTypes["default"].array.isRequired,
   i18nKeys: _propTypes["default"].shape({
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,

package/lib/Select/Select.js

@@ -994,6 +994,8 @@ SelectComponent.defaultProps = _defaultProps.Select_defaultProps;
 SelectComponent.displayName = 'Select';
 var Select = (0, _Popup["default"])(SelectComponent);
 Select.defaultProps = SelectComponent.defaultProps;
+Select.propTypes = _propTypes.Select_propTypes;
+Select.displayName = 'Select';
 var _default = Select; // if (__DOCS__) {
 //   Select.docs = {
 //     componentGroup: 'Form Elements',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-276",
+  "version": "1.0.0-alpha-278",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -48,11 +48,13 @@
     "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
     "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
     "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
-    "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
+    "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
+    "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js ./src/ ./.cli "
   },
   "devDependencies": {
+    "@zohodesk-private/react-prop-validator": "0.0.4",
     "@zohodesk-private/css-variable-migrator": "^1.0.5",
-    "@zohodesk/a11y": "1.3.7",
+    "@zohodesk/a11y": "2.0.0",
     "@zohodesk-private/node-plugins": "^1.0.0",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/icons": "1.0.0-beta.132",