@zohodesk/components 1.0.0-alpha-275 → 1.0.0-alpha-277

package/README.md

@@ -32,6 +32,19 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 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
+
+
 # 1.0.0-alpha-275
 
 - **DateTime** - millisecond and second should work only when customDateFormat is given issue fixed. this fix related to *1.0.0-alpha-272*

package/es/DateTime/DateTime.js

@@ -46,6 +46,7 @@ export default class DateTime extends React.PureComponent {
     this.handleSelectMonthViaYearView = this.handleSelectMonthViaYearView.bind(this);
     this.handleGetStateValues = this.handleGetStateValues.bind(this);
     this.handleYearViewToggle = this.handleYearViewToggle.bind(this);
+    this.getInitialDate = this.getInitialDate.bind(this);
     const {
       ampmText = ampmTextDefault
     } = props.i18nKeys;
@@ -102,6 +103,33 @@ export default class DateTime extends React.PureComponent {
     this.handleExposeMethods(false);
   }
 
+  getInitialDate(value) {
+    let timeZone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    let isDateTime = arguments.length > 2 ? arguments[2] : undefined;
+    let result = null;
+
+    if (isDateTime) {
+      if (timeZone && value) {
+        result = datetime.toDate(datetime.tz.utcToTz(value, timeZone));
+      } else {
+        value = value.replace('Z', '');
+        result = new Date(value);
+      }
+    } else {
+      if (value) {
+        if (timeZone) {
+          result = datetime.toDate(value);
+        } else {
+          result = new Date(value);
+        }
+      } else {
+        result = new Date();
+      }
+    }
+
+    return result;
+  }
+
   getStateFromProps(props) {
     let date, month, year, hours, mins, amPm;
     let {
@@ -126,7 +154,7 @@ export default class DateTime extends React.PureComponent {
       defaultMin = parseInt(defaultMin);
     }
 
-    const dateObj = isDateTimeField ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : todayObj;
+    const dateObj = this.getInitialDate(value, timeZone, isDateTimeField);
     date = dateObj.getDate();
     month = dateObj.getMonth();
     year = dateObj.getFullYear();
@@ -211,7 +239,7 @@ export default class DateTime extends React.PureComponent {
         dateArgs.push(sec, milliSec);
       }
 
-      selectedInMillis = datetime.tz.tzToUtc(Date.UTC(...dateArgs), timeZone);
+      selectedInMillis = timeZone ? datetime.tz.tzToUtc(Date.UTC(...dateArgs), timeZone) : Date.UTC(...dateArgs);
       selectedValue = datetime.ISO(selectedInMillis);
       formattedValue = formatDate(new Date(...dateArgs), customDateFormat == null ? is24Hour ? `${dateFormat} HH:mm:ss` : `${dateFormat} hh:mm:ss A` : `${customDateFormat}`);
     } else {

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/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/DateTime/DateTime.js

@@ -111,6 +111,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
     _this.handleSelectMonthViaYearView = _this.handleSelectMonthViaYearView.bind(_assertThisInitialized(_this));
     _this.handleGetStateValues = _this.handleGetStateValues.bind(_assertThisInitialized(_this));
     _this.handleYearViewToggle = _this.handleYearViewToggle.bind(_assertThisInitialized(_this));
+    _this.getInitialDate = _this.getInitialDate.bind(_assertThisInitialized(_this));
     var _props$i18nKeys$ampmT = props.i18nKeys.ampmText,
         ampmText = _props$i18nKeys$ampmT === void 0 ? _constants.ampmTextDefault : _props$i18nKeys$ampmT;
 
@@ -170,6 +171,34 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
     value: function componentWillUnmount() {
       this.handleExposeMethods(false);
     }
+  }, {
+    key: "getInitialDate",
+    value: function getInitialDate(value) {
+      var timeZone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+      var isDateTime = arguments.length > 2 ? arguments[2] : undefined;
+      var result = null;
+
+      if (isDateTime) {
+        if (timeZone && value) {
+          result = _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone));
+        } else {
+          value = value.replace('Z', '');
+          result = new Date(value);
+        }
+      } else {
+        if (value) {
+          if (timeZone) {
+            result = _datetimejs["default"].toDate(value);
+          } else {
+            result = new Date(value);
+          }
+        } else {
+          result = new Date();
+        }
+      }
+
+      return result;
+    }
   }, {
     key: "getStateFromProps",
     value: function getStateFromProps(props) {
@@ -200,7 +229,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         defaultMin = parseInt(defaultMin);
       }
 
-      var dateObj = isDateTimeField ? _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone)) : value ? _datetimejs["default"].toDate(value) : todayObj;
+      var dateObj = this.getInitialDate(value, timeZone, isDateTimeField);
       date = dateObj.getDate();
       month = dateObj.getMonth();
       year = dateObj.getFullYear();
@@ -284,7 +313,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           dateArgs.push(sec, milliSec);
         }
 
-        selectedInMillis = _datetimejs["default"].tz.tzToUtc(Date.UTC.apply(Date, dateArgs), timeZone);
+        selectedInMillis = timeZone ? _datetimejs["default"].tz.tzToUtc(Date.UTC.apply(Date, dateArgs), timeZone) : Date.UTC.apply(Date, dateArgs);
         selectedValue = _datetimejs["default"].ISO(selectedInMillis);
         formattedValue = (0, _common.formatDate)(_construct(Date, dateArgs), customDateFormat == null ? is24Hour ? "".concat(dateFormat, " HH:mm:ss") : "".concat(dateFormat, " hh:mm:ss A") : "".concat(customDateFormat));
       } else {

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/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-275",
+  "version": "1.0.0-alpha-277",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@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",