@zohodesk/components 1.0.0-temp-82 → 1.0.0-temp-84

package/lib/Switch/Switch.module.css

@@ -1,111 +1,111 @@
-.varClass {
-  /* switch default variables */
-  --switch_off_bg_color: var(--zdt_switch_default_off_bg);
-  --switch_on_bg_color: var(--zdt_switch_default_on_bg);
-  
-  /* switch circle default variables */
-  --switch_circle_bg_color: var(--zdt_switch_circle_bg);
-  --switch_circle_border_radius: 50px;
-  --switch_cricle_box_shadow: 0 1px 4px 0 var(--zdt_switch_circle_shadow);
-}
-.container {
-  composes: varClass;
-  vertical-align: middle;
-}
-.disabled {
-  composes: disabled from '../common/common.module.css';
-}
-.readonly {
-  composes: readonly from '../common/common.module.css';
-}
-.label {
-  display: inline-block;
-  position: relative;
-  transition: box-shadow var(--zd_transition3) ease-in-out;
-  background-color: var(--switch_off_bg_color);
-  border-radius: 20px;
-  cursor: pointer;
-}
-.effect:hover .label
-/* .effect:focus .label */
- {
-  --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
-}
-.label:after {
-  content: '';
-  display: block;
-  position: absolute;
-  right: 50%;
-  transition: all var(--zd_transition2);
-  box-shadow: var(--switch_cricle_box_shadow);
-  background-color: var(--switch_circle_bg_color);
-  border-radius: var(--switch_circle_border_radius);
-}
-.checked + .label {
-  box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
-}
-.checked + .label:after {
-  right: calc(var(--zd_size1) * -1);
-}
-
-.input {
-  display: none;
-}
-.small {
-  height: var(--zd_size14);
-  width: var(--zd_size28);
-}
-.switch_smallLabel {
-  height: var(--zd_size9);
-  width: var(--zd_size22);
-  top: calc(var(--zd_size2) * -1);
-  left: var(--zd_size2);
-}
-.switch_smallLabel:after {
-  width: var(--zd_size12);
-  height: var(--zd_size12);
-  top: calc(var(--zd_size2) * -1);
-}
-.medium {
-  height: var(--zd_size18);
-  width: var(--zd_size34);
-}
-.switch_mediumLabel {
-  height: var(--zd_size13);
-  width: var(--zd_size31);
-  top: var(--zd_size2);
-  left: var(--zd_size2);
-}
-.switch_mediumLabel:after {
-  width: var(--zd_size18);
-  height: var(--zd_size18);
-  top: calc(var(--zd_size3) * -1);
-}
-.input:disabled + .label {
-  opacity: 0.4;
-  border-color: var(--zdt_switch_default_off_bg);
-  cursor: not-allowed;
-}
-.switch {
-  display: inline-block;
-  composes: offSelection from '../common/common.module.css';
-  vertical-align: middle;
-}
-.switch_small {
-  composes: small;
-  composes: switch;
-}
-.switch_medium {
-  composes: medium;
-  composes: switch;
-}
-.switch + label {
-  position: relative;
-  top: calc(var(--zd_size1) * -1);
-}
-[dir=ltr] .switch + label {
-  margin-left: var(--zd_size12);
-}
-[dir=rtl] .switch + label {
-  margin-right: var(--zd_size12);
+.varClass {
+  /* switch default variables */
+  --switch_off_bg_color: var(--zdt_switch_default_off_bg);
+  --switch_on_bg_color: var(--zdt_switch_default_on_bg);
+  
+  /* switch circle default variables */
+  --switch_circle_bg_color: var(--zdt_switch_circle_bg);
+  --switch_circle_border_radius: 50px;
+  --switch_cricle_box_shadow: 0 1px 4px 0 var(--zdt_switch_circle_shadow);
+}
+.container {
+  composes: varClass;
+  vertical-align: middle;
+}
+.disabled {
+  composes: disabled from '../common/common.module.css';
+}
+.readonly {
+  composes: readonly from '../common/common.module.css';
+}
+.label {
+  display: inline-block;
+  position: relative;
+  transition: box-shadow var(--zd_transition3) ease-in-out;
+  background-color: var(--switch_off_bg_color);
+  border-radius: 20px;
+  cursor: pointer;
+}
+.effect:hover .label
+/* .effect:focus .label */
+ {
+  --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
+}
+.label:after {
+  content: '';
+  display: block;
+  position: absolute;
+  right: 50%;
+  transition: all var(--zd_transition2);
+  box-shadow: var(--switch_cricle_box_shadow);
+  background-color: var(--switch_circle_bg_color);
+  border-radius: var(--switch_circle_border_radius);
+}
+.checked + .label {
+  box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
+}
+.checked + .label:after {
+  right: calc(var(--zd_size1) * -1);
+}
+
+.input {
+  display: none;
+}
+.small {
+  height: var(--zd_size14);
+  width: var(--zd_size28);
+}
+.switch_smallLabel {
+  height: var(--zd_size9);
+  width: var(--zd_size22);
+  top: calc(var(--zd_size2) * -1);
+  left: var(--zd_size2);
+}
+.switch_smallLabel:after {
+  width: var(--zd_size12);
+  height: var(--zd_size12);
+  top: calc(var(--zd_size2) * -1);
+}
+.medium {
+  height: var(--zd_size18);
+  width: var(--zd_size34);
+}
+.switch_mediumLabel {
+  height: var(--zd_size13);
+  width: var(--zd_size31);
+  top: var(--zd_size2);
+  left: var(--zd_size2);
+}
+.switch_mediumLabel:after {
+  width: var(--zd_size18);
+  height: var(--zd_size18);
+  top: calc(var(--zd_size3) * -1);
+}
+.input:disabled + .label {
+  opacity: 0.4;
+  border-color: var(--zdt_switch_default_off_bg);
+  cursor: not-allowed;
+}
+.switch {
+  display: inline-block;
+  composes: offSelection from '../common/common.module.css';
+  vertical-align: middle;
+}
+.switch_small {
+  composes: small;
+  composes: switch;
+}
+.switch_medium {
+  composes: medium;
+  composes: switch;
+}
+.switch + label {
+  position: relative;
+  top: calc(var(--zd_size1) * -1);
+}
+[dir=ltr] .switch + label {
+  margin-left: var(--zd_size12);
+}
+[dir=rtl] .switch + label {
+  margin-right: var(--zd_size12);
 }

package/lib/Tab/Tab.module.css

@@ -1,101 +1,101 @@
-.tab {
-  text-transform: uppercase;
-  composes: offSelection from '../common/common.module.css';
-  letter-spacing: 0.6px;
-  text-decoration: none;
-  cursor: pointer;
-}
-.vertical {
-  height: 100%;
-}
-.horizontal {
-  width: 100%;
-  max-width: 100%;
-}
-.textContainer,
-.tabText {
-  max-width: inherit;
-}
-.tabText {
-  composes: dotted from '../common/common.module.css';
-}
-.disabled {
-  cursor: not-allowed;
-}
-.border {
-  border-bottom: 1px solid var(--zdt_tab_default_border);
-}
-
-.alpha,
-.beta,
-.delta {
-  transition: all var(--zd_transition2);
-}
-.alpha {
-  font-size: var(--zd_font_size11);
-  line-height: var(--zd_size33);
-  padding: 0 var(--zd_size18);
-}
-.tabAlpha {
-  composes: alpha;
-  color: var(--zdt_tab_alpha_text);
-}
-.alphaHover:hover {
-  color: var(--zdt_tab_alpha_hover_text);
-  background-color: var(--zdt_tab_alpha_hover_bg);
-}
-.alphaActive {
-  composes: alpha;
-  color: var(--zdt_tab_alpha_active_text);
-}
-.alphaActive_border, .betaActive_border {
-  border-color: var(--zdt_tab_alpha_active_border);
-}
-.deltaActive_border {
-  border-color: var(--zdt_tab_delta_active_border);
-}
-.beta {
-  font-size: var(--zd_font_size14);
-  line-height: var(--zd_size60);
-  text-transform: capitalize;
-  padding: 0 var(--zd_size4);
-}
-[dir=ltr] .beta {
-  margin-right: var(--zd_size40);
-}
-[dir=rtl] .beta {
-  margin-left: var(--zd_size40);
-}
-.tabBeta {
-  composes: beta;
-  color: var(--zdt_tab_alpha_text);
-}
-.betaHover:hover {
-  color: var(--zdt_tab_alpha_hover_text);
-}
-.betaActive {
-  composes: beta;
-  color: var(--zdt_tab_alpha_hover_text);
-}
-.delta {
-  font-size: var(--zd_font_size11);
-  line-height: var(--zd_size33);
-  padding: 0 var(--zd_size4);
-}
-[dir=ltr] .delta {
-  margin-right: var(--zd_size10);
-}
-[dir=rtl] .delta {
-  margin-left: var(--zd_size10);
-}
-.tabDelta {
-  composes: delta;
-  color: var(--zdt_tab_alpha_text);
-}
-.deltaHover:hover {
-  color: var(--zdt_tab_alpha_active_text);
-}
-.deltaActive {
-  composes: delta;
-  color: var(--zdt_tab_alpha_active_text);
-}
+.tab {
+  text-transform: uppercase;
+  composes: offSelection from '../common/common.module.css';
+  letter-spacing: 0.6px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.vertical {
+  height: 100%;
+}
+.horizontal {
+  width: 100%;
+  max-width: 100%;
+}
+.textContainer,
+.tabText {
+  max-width: inherit;
+}
+.tabText {
+  composes: dotted from '../common/common.module.css';
+}
+.disabled {
+  cursor: not-allowed;
+}
+.border {
+  border-bottom: 1px solid var(--zdt_tab_default_border);
+}
+
+.alpha,
+.beta,
+.delta {
+  transition: all var(--zd_transition2);
+}
+.alpha {
+  font-size: var(--zd_font_size11);
+  line-height: var(--zd_size33);
+  padding: 0 var(--zd_size18);
+}
+.tabAlpha {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_text);
+}
+.alphaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+  background-color: var(--zdt_tab_alpha_hover_bg);
+}
+.alphaActive {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_active_text);
+}
+.alphaActive_border, .betaActive_border {
+  border-color: var(--zdt_tab_alpha_active_border);
+}
+.deltaActive_border {
+  border-color: var(--zdt_tab_delta_active_border);
+}
+.beta {
+  font-size: var(--zd_font_size14);
+  line-height: var(--zd_size60);
+  text-transform: capitalize;
+  padding: 0 var(--zd_size4);
+}
+[dir=ltr] .beta {
+  margin-right: var(--zd_size40);
+}
+[dir=rtl] .beta {
+  margin-left: var(--zd_size40);
+}
+.tabBeta {
+  composes: beta;
+  color: var(--zdt_tab_alpha_text);
+}
+.betaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.betaActive {
+  composes: beta;
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.delta {
+  font-size: var(--zd_font_size11);
+  line-height: var(--zd_size33);
+  padding: 0 var(--zd_size4);
+}
+[dir=ltr] .delta {
+  margin-right: var(--zd_size10);
+}
+[dir=rtl] .delta {
+  margin-left: var(--zd_size10);
+}
+.tabDelta {
+  composes: delta;
+  color: var(--zdt_tab_alpha_text);
+}
+.deltaHover:hover {
+  color: var(--zdt_tab_alpha_active_text);
+}
+.deltaActive {
+  composes: delta;
+  color: var(--zdt_tab_alpha_active_text);
+}

package/lib/Tab/TabContent.js

@@ -23,7 +23,7 @@ var TabContent = function TabContent(_ref) {
     dataId: "".concat(dataId, "_TabContent"),
     isScrollAttribute: true,
     "aria-labelledby": id,
-    tabindex: "-1",
+    tabindex: "0",
     role: "tabpanel"
   }, children);
 };

package/lib/Tab/TabContent.module.css

@@ -1,4 +1,4 @@
-/* $Id$ */
-.container {
-  position: relative;
-}
+/* $Id$ */
+.container {
+  position: relative;
+}

package/lib/Tab/Tabs.js

@@ -18,7 +18,6 @@ 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; }
@@ -143,9 +142,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         totalDimension = _this$state.totalDimension,
         tabKeys = _this$state.tabKeys;
       if (prevProps.children && children) {
-        /**
-         * To recalculate the dimensions of tabs we are checking the children length.
-         * and also checking the tab id and their order.
+        /**
+         * To recalculate the dimensions of tabs we are checking the children length.
+         * and also checking the tab id and their order.
          */
 
         var newTabKeys = [];
@@ -252,7 +251,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;
     }
   }, {
@@ -265,7 +264,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;
     }
@@ -312,14 +311,14 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           }
         });
         if (selectedTabDimension > totalDimension) {
-          /* let { align } = this.props;
-          let newDim = `${remConvert(totalDimension)}rem`;
-          let newTabs;
-          if (align === 'vertical') {
-            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
-          } else {
-            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
-          }
+          /* let { align } = this.props;
+          let newDim = `${remConvert(totalDimension)}rem`;
+          let newTabs;
+          if (align === 'vertical') {
+            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
+          } else {
+            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
+          }
           mainTabs = newTabs; */
           this.setMaxDim(totalDimension);
         }
@@ -460,13 +459,11 @@ 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({
-        tabIndex: 0,
-        className: "".concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : '', " ").concat(_semanticButtonModule["default"].buttonReset),
+        className: "".concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
         align: "both",
         onClick: this.togglePopup,
         dataId: "moreTabs",
-        eleRef: getTargetRef,
-        tagName: "button"
+        eleRef: getTargetRef
       }, MoreButtonProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: iconName,
         size: iconSize
@@ -487,9 +484,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           isBoxPaddingNeed: true,
           isArrow: false
         }, DropBoxProps, {
-          isResponsivePadding: true,
-          needFocusScope: true,
-          onClose: _this8.togglePopup
+          isResponsivePadding: true
         }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this8.props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,