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

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;
     }
@@ -458,13 +459,16 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }, classProps));
       }), _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 : ''),
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        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"], {
+        eleRef: getTargetRef,
+        "aria-label": "MoreTabs",
+        role: "tab",
+        tagName: "button"
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: iconName,
         size: iconSize
       })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
@@ -484,7 +488,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           isBoxPaddingNeed: true,
           isArrow: false
         }, DropBoxProps, {
-          isResponsivePadding: true
+          isResponsivePadding: true,
+          needFocusScope: true,
+          onClose: _this8.togglePopup
         }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this8.props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,

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();

package/lib/common/a11y.module.css

@@ -0,0 +1,4 @@
+:root {  
+    --lib_a11y_focusScope_focus_border:var(--zdt_a11y_focusScope_focus_border);
+    --lib_a11y_focusScope_focus_bg:var(--zdt_listitem_highlight_bg);
+}