@zohodesk/components 1.0.0-alpha-252 → 1.0.0-alpha-253

package/lib/Layout/props/propTypes.js

@@ -23,11 +23,11 @@ var BoxProps = {
   isFirst: _propTypes["default"].bool,
   isLast: _propTypes["default"].bool,
   isScrollAttribute: _propTypes["default"].bool,
-  scroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: _propTypes["default"].bool,
   tagName: _propTypes["default"].string,
   tourId: _propTypes["default"].string,
-  preventParentScroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both'])
 };
 exports.BoxProps = BoxProps;
 var ContainerProps = {
@@ -46,6 +46,6 @@ var ContainerProps = {
   tagName: _propTypes["default"].string,
   tourId: _propTypes["default"].string,
   wrap: _propTypes["default"].oneOf(['wrap', 'wrap-reverse', 'nowrap']),
-  preventParentScroll: _propTypes["default"].PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both'])
 };
 exports.ContainerProps = ContainerProps;

package/lib/ListItem/ListContainer.js

@@ -53,7 +53,8 @@ var ListContainer = function ListContainer(props) {
     mobileToTab = _useResponsiveReceive.mobileToTab,
     isTouchDevice = _useResponsiveReceive.isTouchDevice;
   var role = a11y.role,
-    ariaSelected = a11y.ariaSelected;
+    ariaSelected = a11y.ariaSelected,
+    ariaLabel = a11y.ariaLabel;
   var options = {};
   if (isLink) {
     options.href = href;
@@ -62,12 +63,13 @@ var ListContainer = function ListContainer(props) {
   if (active) {
     options['data-selected'] = active;
   }
-  if (!isDisabled && !isLink && active) {
+  if (!isDisabled && !isLink) {
     options.tabindex = '0';
   }
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     role: role,
     "aria-selected": ariaSelected,
+    "aria-label": ariaLabel,
     isCover: false,
     align: "vertical",
     alignBox: "row",

package/lib/MultiSelect/MultiSelect.js

@@ -856,7 +856,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         _i18nKeys$searchText = _i18nKeys.searchText,
         searchText = _i18nKeys$searchText === void 0 ? 'Searching...' : _i18nKeys$searchText;
       var _a11y$clearLabel = a11y.clearLabel,
-        clearLabel = _a11y$clearLabel === void 0 ? 'Clear all' : _a11y$clearLabel;
+        clearLabel = _a11y$clearLabel === void 0 ? 'Clear all' : _a11y$clearLabel,
+        ariaLabelledby = a11y.ariaLabelledby;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
@@ -934,7 +935,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           ariaExpanded: !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? true : false,
           ariaHaspopup: true,
           ariaRequired: true,
-          ariaDescribedby: ariaErrorId
+          ariaDescribedby: ariaErrorId,
+          ariaLabelledby: ariaLabelledby
         },
         autoComplete: autoComplete
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/MultiSelect/Suggestions.js

@@ -79,7 +79,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         var isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
         var isHighlight = hoverOption === index || id === hoverId ? true : false;
         var list_a11y = Object.assign({}, a11y, {
-          ariaSelected: isActive
+          ariaSelected: isActive,
+          ariaLabel: value
         });
         var commonProps = {
           isDisabled: isDisabled

package/lib/Responsive/CustomResponsive.js

@@ -115,6 +115,7 @@ function useResponsiveReceiver() {
   var data = (0, _react.useRef)();
   function updateLatestData() {
     var size = contextData.isParentSize ? contextData.getSize() : validSizeContextData.getSize();
+    var prevData = data.current;
     data.current = query({
       isTouchDevice: _sizeObservers.isTouchDevice,
       isParentSize: contextData.isParentSize,
@@ -136,13 +137,16 @@ function useResponsiveReceiver() {
         });
       }
     });
+    var isSameValues = (0, _shallowCompare["default"])(data.current, prevData);
+    if (isSameValues) {
+      data.current = prevData;
+    }
+    return isSameValues;
   }
   resizeHandlerRef.current = updateLatestData;
   (0, _react.useEffect)(function () {
     function handleResize(size) {
-      var prevData = data.current;
-      resizeHandlerRef.current(size);
-      var isSameValues = (0, _shallowCompare["default"])(data.current, prevData);
+      var isSameValues = resizeHandlerRef.current(size);
       !isSameValues && forceUpdate({});
     }
     contextData.resize.subscribe(handleResize);

package/lib/Select/Select.js

@@ -683,6 +683,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         iconOnHover = _this$props11.iconOnHover,
         customProps = _this$props11.customProps,
         autoComplete = _this$props11.autoComplete,
+        ariaLabelledby = _this$props11.ariaLabelledby,
         isLoading = _this$props11.isLoading;
       var _i18nKeys = i18nKeys,
         TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
@@ -718,14 +719,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
       }, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         a11y: {
-          role: 'combobox',
+          role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
           ariaControls: setAriaId,
           ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
           ariaHaspopup: true,
           ariaReadonly: true,
           ariaActivedescendant: selectedId,
-          ariaOwns: setAriaId
+          ariaOwns: setAriaId,
+          ariaLabelledby: ariaLabelledby
         },
         isDisabled: isDisabled,
         iconRotated: isPopupOpen,
@@ -770,14 +772,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         size: "7"
       })))) : /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
-          role: 'combobox',
+          role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
           ariaControls: setAriaId,
           ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
           ariaHaspopup: true,
           ariaReadonly: true,
           ariaActivedescendant: selectedId,
-          ariaOwns: setAriaId
+          ariaOwns: setAriaId,
+          ariaLabelledby: ariaLabelledby
         },
         isDisabled: isDisabled,
         inputRef: this.valueInputRef,

package/lib/Select/SelectWithIcon.js

@@ -498,7 +498,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
             getRef: _this5.itemRef,
             a11y: {
               role: 'option',
-              ariaSelected: selectedId === options[idKey]
+              ariaSelected: selectedId === options[idKey],
+              ariaLabel: options[valueKey]
             }
           });
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {

package/lib/Tab/Tabs.js

@@ -18,6 +18,7 @@ var _TabsModule = _interopRequireDefault(require("./Tabs.module.css"));
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 var _CustomResponsive = require("../Responsive/CustomResponsive");
+var _semanticButtonModule = _interopRequireDefault(require("../semantic/Button/semanticButton.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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; }
@@ -251,7 +252,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     key: "getTotalDimension",
     value: function getTotalDimension() {
       var align = this.props.align;
-      var totalDimension = (0, _Common.getTotalDimension)(this.tabsEle, align);
+      var totalDimension = this.tabsEle && (0, _Common.getTotalDimension)(this.tabsEle, align);
       return totalDimension;
     }
   }, {
@@ -264,7 +265,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         childType = _this$props4.childType;
       var tabDimensions = {};
       _react["default"].Children.forEach(children, function (child) {
-        return /*#__PURE__*/_react["default"].isValidElement(child) && child.type === childType && _this7[child.props.id] && Object.assign(tabDimensions, _defineProperty({}, child.props.id, (0, _Common.getTotalDimension)(_this7[child.props.id], align)));
+        return /*#__PURE__*/_react["default"].isValidElement(child) && child.type === childType && _this7[child.props.id] && Object.assign(tabDimensions, _defineProperty({}, child.props.id, _this7[child.props.id] && (0, _Common.getTotalDimension)(_this7[child.props.id], align)));
       });
       return tabDimensions;
     }
@@ -459,12 +460,16 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       }), _react["default"].Children.count(moreTabs) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_TabsModule["default"].menu, " ")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
+        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
         align: "both",
         onClick: this.togglePopup,
         dataId: "moreTabs",
         eleRef: getTargetRef
-      }, MoreButtonProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, MoreButtonProps, {
+        "aria-label": "MoreTabs",
+        role: "tab",
+        tagName: "button"
+      }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: iconName,
         size: iconSize
       })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {

package/lib/Tab/Tabs.module.css

@@ -138,4 +138,4 @@
 
 .hidden{
   visibility: hidden;
-}
+}

package/lib/Tooltip/Tooltip.js

@@ -11,6 +11,7 @@ var _propTypes = require("./props/propTypes");
 var _Config = require("../Provider/Config");
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
+var _selectn = _interopRequireDefault(require("selectn"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); } }
@@ -190,7 +191,9 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
               //   isContentDotted = element.offsetHeight < element.scrollHeight;
               // }
             } else {
-              isContentDotted = element.parentElement.offsetWidth < element.parentElement.scrollWidth;
+              var offWidth = (0, _selectn["default"])('parentElement.offsetWidth', element) || 0;
+              var scrollWidth = (0, _selectn["default"])('parentElement.scrollWidth', element) || 0;
+              isContentDotted = offWidth < scrollWidth;
             }
             var originText = element.innerText.replace(/\s/g, '').toLowerCase();
             var tooltipText = title.replace(/\s/g, '').toLowerCase();