@zohodesk/components 1.0.0-temp-189.1 → 1.0.0-temp-189.2

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -33,12 +33,12 @@ var _IdProvider = require("../Provider/IdProvider");
 
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 
-var _CustomResponsive = require("../Responsive/CustomResponsive");
-
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
 var _MultiSelectHeader = _interopRequireDefault(require("./MultiSelectHeader"));
 
+var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobilePopover"));
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _MobileHeader = _interopRequireDefault(require("./MobileHeader/MobileHeader"));
@@ -109,21 +109,9 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         disabledOptions: disabledOptions
       });
     }
-  }, {
-    key: "responsiveFunc",
-    value: function responsiveFunc(_ref) {
-      var mediaQueryOR = _ref.mediaQueryOR;
-      return {
-        tabletMode: mediaQueryOR([{
-          maxWidth: 700
-        }])
-      };
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props = this.props,
           isReadOnly = _this$props.isReadOnly,
           needSelectAll = _this$props.needSelectAll,
@@ -172,6 +160,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       var popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
+      var isModel = (0, _isMobilePopover["default"])(needResponsive);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -179,81 +168,75 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId
-      }, this.getSelectionUI(), popUpState ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
-        query: this.responsiveFunc,
-        responsiveId: "Helmet"
-      }, function (_ref2) {
-        var tabletMode = _ref2.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
-          animationStyle: animationStyle,
-          boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
-          getRef: getContainerRef,
-          isActive: isPopupReady,
-          isAnimate: isAnimate,
-          isArrow: false,
-          onClick: removeClose,
-          needResponsive: needResponsive,
-          isPadding: false,
-          isBoxPaddingNeed: isBoxPaddingNeed,
-          palette: palette,
-          htmlId: setAriaId,
-          a11y: {
-            ariaMultiselectable: true,
-            role: 'listbox'
-          },
-          isResponsivePadding: true,
-          alignBox: "row"
-        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true
-        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-          customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
-          onScroll: _this2.handleScroll
-        }, tabletMode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MobileHeader["default"], {
-          selectedOptions: selectedOptions,
-          i18nKeys: i18nKeys,
-          onClick: _this2.handlePopupClose
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].effect
-        }, _this2.getSelectionUI(true)))), needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
-          onSelect: _this2.handleSelectAll,
-          selectAllText: selectAllText,
-          suggestions: suggestions,
-          dataId: dataId
-        })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          align: "both",
-          className: _MultiSelectModule["default"].loader
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-          shrink: true,
-          customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
-          eleRef: _this2.suggestionContainerRef
-        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
-          needTick: keepSelectedOptions,
-          suggestions: suggestions,
-          getRef: _this2.suggestionItemRef,
-          hoverOption: hoverOption,
-          onClick: _this2.handleSelectOption,
-          onMouseEnter: _this2.handleMouseEnter,
-          needBorder: false,
-          dataId: "".concat(dataId, "_Options"),
-          palette: palette,
-          selectedOptions: selectedOptionIds,
-          a11y: {
-            role: 'option'
-          }
-        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-          isLoading: isFetchingOptions,
-          options: options,
-          searchString: searchStr,
-          suggestions: suggestions,
-          dataId: dataId,
-          palette: palette,
-          i18nKeys: i18nKeys,
-          htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          isCover: false,
-          align: "both"
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));
-      }) : null);
+      }, this.getSelectionUI(), popUpState ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+        animationStyle: animationStyle,
+        boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
+        getRef: getContainerRef,
+        isActive: isPopupReady,
+        isAnimate: isAnimate,
+        isArrow: false,
+        onClick: removeClose,
+        needResponsive: needResponsive,
+        isPadding: false,
+        isBoxPaddingNeed: isBoxPaddingNeed,
+        palette: palette,
+        htmlId: setAriaId,
+        a11y: {
+          ariaMultiselectable: true,
+          role: 'listbox'
+        },
+        isResponsivePadding: true,
+        alignBox: "row"
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
+      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+        customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
+        onScroll: this.handleScroll
+      }, isModel ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MobileHeader["default"], {
+        selectedOptions: selectedOptions,
+        i18nKeys: i18nKeys,
+        onClick: this.handlePopupClose
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: _MultiSelectModule["default"].effect
+      }, this.getSelectionUI(true)))) : null, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+        onSelect: this.handleSelectAll,
+        selectAllText: selectAllText,
+        suggestions: suggestions,
+        dataId: dataId
+      })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "both",
+        className: _MultiSelectModule["default"].loader
+      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        shrink: true,
+        customClass: !isModel && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
+        eleRef: this.suggestionContainerRef
+      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+        needTick: keepSelectedOptions,
+        suggestions: suggestions,
+        getRef: this.suggestionItemRef,
+        hoverOption: hoverOption,
+        onClick: this.handleSelectOption,
+        onMouseEnter: this.handleMouseEnter,
+        needBorder: false,
+        dataId: "".concat(dataId, "_Options"),
+        palette: palette,
+        selectedOptions: selectedOptionIds,
+        a11y: {
+          role: 'option'
+        }
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        isLoading: isFetchingOptions,
+        options: options,
+        searchString: searchStr,
+        suggestions: suggestions,
+        dataId: dataId,
+        palette: palette,
+        i18nKeys: i18nKeys,
+        htmlId: ariaErrorId
+      }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)))))) : null);
     }
   }]);
 

package/lib/Radio/Radio.js

@@ -21,6 +21,8 @@ var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _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); } }
@@ -53,6 +55,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleGetRef = _this.handleGetRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -64,28 +67,38 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           value = _this$props.value;
       onChange && onChange(value, e);
     }
+  }, {
+    key: "handleGetRef",
+    value: function handleGetRef(ele) {
+      var _this$props2 = this.props,
+          getRef = _this$props2.getRef,
+          value = _this$props2.value;
+      getRef && getRef(ele, value);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          name = _this$props2.name,
-          value = _this$props2.value,
-          checked = _this$props2.checked,
-          disabled = _this$props2.disabled,
-          isReadOnly = _this$props2.isReadOnly,
-          palette = _this$props2.palette,
-          disabledTitle = _this$props2.disabledTitle,
-          title = _this$props2.title,
-          text = _this$props2.text,
-          labelPalette = _this$props2.labelPalette,
-          size = _this$props2.size,
-          labelSize = _this$props2.labelSize,
-          variant = _this$props2.variant,
-          active = _this$props2.active,
-          isFilled = _this$props2.isFilled,
-          customClass = _this$props2.customClass,
-          a11y = _this$props2.a11y;
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          name = _this$props3.name,
+          value = _this$props3.value,
+          checked = _this$props3.checked,
+          disabled = _this$props3.disabled,
+          isReadOnly = _this$props3.isReadOnly,
+          palette = _this$props3.palette,
+          disabledTitle = _this$props3.disabledTitle,
+          title = _this$props3.title,
+          text = _this$props3.text,
+          labelPalette = _this$props3.labelPalette,
+          size = _this$props3.size,
+          labelSize = _this$props3.labelSize,
+          variant = _this$props3.variant,
+          active = _this$props3.active,
+          isFilled = _this$props3.isFilled,
+          customClass = _this$props3.customClass,
+          customProps = _this$props3.customProps,
+          children = _this$props3.children,
+          a11y = _this$props3.a11y;
       var _customClass$customRa = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadio,
@@ -97,13 +110,18 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       var ariaHidden = a11y.ariaHidden,
           _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'radio' : _a11y$role,
+          tabIndex = a11y.tabIndex,
           _a11y$ariaChecked = a11y.ariaChecked,
           ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked,
           ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby,
           _a11y$ariaReadonly = a11y.ariaReadonly,
           ariaReadonly = _a11y$ariaReadonly === void 0 ? isReadOnly || disabled ? true : false : _a11y$ariaReadonly;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      var _customProps$Containe = customProps.ContainerProps,
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
+          _customProps$LabelPro = customProps.LabelProps,
+          LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         dataId: value ? value.toLowerCase() : 'RadioComp',
         isCover: false,
         isInline: text ? false : true,
@@ -113,13 +131,14 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         "data-title": toolTip,
         onClick: !isReadOnly && !disabled ? this.onChange : '',
         "aria-checked": ariaChecked,
-        tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+        tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+        eleRef: this.handleGetRef,
         role: role,
         "aria-Hidden": ariaHidden,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
         "aria-readonly": ariaReadonly
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(isReadOnly || disabled ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio)
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
@@ -144,17 +163,17 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _RadioModule["default"].text
-      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
-        palette: disabled ? 'disable' : labelPalette,
+        palette: labelPalette,
         size: labelSize,
         type: "title",
         clipped: true,
         dataId: "".concat(text, "_label"),
         variant: variant,
         title: toolTip ? toolTip : text,
-        customClass: "".concat(checked && active && !disabled ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
-      })));
+        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
+      }, LabelProps))), children);
     }
   }]);
 

package/lib/Radio/Radio.module.css

@@ -21,6 +21,9 @@
 .readonly, .disabled {
   cursor: not-allowed;
 }
+.disabled {
+  opacity: 0.7
+}
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);

package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap

@@ -1145,7 +1145,7 @@ exports[`Radio rendering the accessMode when disabled  1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"
@@ -1505,7 +1505,7 @@ exports[`Radio rendering the disabled is true 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               undefined disabled  "
         data-id="RadioText_label"
@@ -1567,7 +1567,7 @@ exports[`Radio rendering the disabledTitle 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"

package/lib/Radio/props/defaultProps.js

@@ -16,6 +16,7 @@ var defaultProps = {
   variant: 'default',
   isFilled: true,
   customClass: {},
+  customProps: {},
   a11y: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Radio/props/propTypes.js

@@ -14,6 +14,7 @@ var propTypes = {
   checked: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   disabledTitle: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
   isFilled: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -30,14 +31,20 @@ var propTypes = {
     customRadio: _propTypes["default"].string,
     customLabel: _propTypes["default"].string
   }),
+  customProps: _propTypes["default"].exact({
+    ContainerProps: _propTypes["default"].object,
+    LabelProps: _propTypes["default"].object
+  }),
   a11y: _propTypes["default"].shape({
     ariaChecked: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool,
     role: _propTypes["default"].string,
+    tabIndex: _propTypes["default"].oneOfType(_propTypes["default"].string, _propTypes["default"].number),
     ariaLabelledby: _propTypes["default"].string,
     ariaLabel: _propTypes["default"].string,
     ariaReadonly: _propTypes["default"].bool
   }),
+  children: _propTypes["default"].node,
   onChange: _propTypes["default"].func,
   text: _propTypes["default"].string
 };

package/lib/Tag/Tag.js

@@ -183,7 +183,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
       }, text), onRemove && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         customClass: "".concat(_TagModule["default"].close, " ").concat(active ? _TagModule["default"]["active".concat(closePalette, "Close")] : '', "\n            ").concat(rounded ? _TagModule["default"].lgRadiusClose : _TagModule["default"].smRadiusClose, " ").concat(isDarkPalette ? _TagModule["default"].darkTagClose : '', "\n            ").concat(customTagClose, " ").concat(_TagModule["default"]["close".concat(closePalette)]),
         dataId: "".concat(dataId, "_RemoveTag"),
-        "data-title": closeTitle,
+        title: closeTitle,
         onClick: this.handleRemove,
         a11y: {
           ariaLabel: clearLabel

package/lib/v1/CheckBox/CheckBox.js

@@ -38,6 +38,7 @@ var CheckBox = function CheckBox(props) {
       isFilled = props.isFilled,
       isClipped = props.isClipped,
       getRef = props.getRef,
+      getContainerRef = props.getContainerRef,
       variant = props.variant,
       active = props.active,
       dataId = props.dataId,
@@ -53,6 +54,10 @@ var CheckBox = function CheckBox(props) {
     onChange && onChange(!checked, e);
   }
 
+  function handleGetContainerRef(ele) {
+    getContainerRef && getContainerRef(ele, id);
+  }
+
   var _customProps$CheckBox = customProps.CheckBoxProps,
       CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
       _customProps$LabelPro = customProps.LabelProps,
@@ -85,6 +90,7 @@ var CheckBox = function CheckBox(props) {
     onClick: isReadOnly || disabled ? null : onChange,
     tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
     "aria-checked": ariaChecked,
+    eleRef: handleGetContainerRef,
     role: role,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,

package/lib/v1/CheckBox/props/propTypes.js

@@ -18,6 +18,7 @@ var propTypes = {
   disabled: _propTypes["default"].bool,
   disabledTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
+  getContainerRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
   isFilled: _propTypes["default"].bool,
   isClipped: _propTypes["default"].bool,

package/lib/v1/DateTime/DateWidget.js

@@ -934,8 +934,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
 
       if (isAllowedDateType) {
         // if (focusOrder !== oldFocusOrder) {
-        var _this$state$dateForma = this.state.dateFormatSelection,
-            dateFormatSelection = _this$state$dateForma === void 0 ? {} : _this$state$dateForma;
+        var _this$state5 = this.state,
+            _this$state5$dateForm = _this$state5.dateFormatSelection,
+            dateFormatSelection = _this$state5$dateForm === void 0 ? {} : _this$state5$dateForm,
+            isFocused = _this$state5.isFocused;
         var _dateFormatSelection$2 = dateFormatSelection.order,
             order = _dateFormatSelection$2 === void 0 ? [] : _dateFormatSelection$2;
         var isPopupOpen = this.props.isPopupOpen; // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
@@ -953,9 +955,17 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
 
         if (isPopupOpen) {
           if (yearViewTypes.indexOf(focusedType) >= 0 && (!isYearView || isMonthOpen !== oldIsMonthOpen)) {
-            this.DateTimeYearViewToggle(true, isMonthOpen);
-          } else if (yearViewTypes.indexOf(focusedType) === -1 && isYearView) {
-            this.DateTimeYearViewToggle(false, false);
+            if (!isFocused && isYearView) {
+              this.DateTimeYearViewToggle(true, oldIsMonthOpen);
+            } else {
+              this.DateTimeYearViewToggle(true, isMonthOpen);
+            }
+          } else if (yearViewTypes.indexOf(focusedType) === -1) {
+            if (!isFocused && isYearView) {
+              this.DateTimeYearViewToggle(isYearView, oldIsMonthOpen);
+            } else {
+              this.DateTimeYearViewToggle(false, false);
+            }
           }
         } // }
 
@@ -1006,12 +1016,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           onError = _this$props11.onError,
           startDate = _this$props11.startDate,
           endDate = _this$props11.endDate;
-      var _this$state5 = this.state,
-          _this$state5$selected = _this$state5.selected,
-          value = _this$state5$selected === void 0 ? '' : _this$state5$selected,
-          isError = _this$state5.isError,
-          isDateEdited = _this$state5.isDateEdited,
-          isFocused = _this$state5.isFocused;
+      var _this$state6 = this.state,
+          _this$state6$selected = _this$state6.selected,
+          value = _this$state6$selected === void 0 ? '' : _this$state6$selected,
+          isError = _this$state6.isError,
+          isDateEdited = _this$state6.isDateEdited,
+          isFocused = _this$state6.isFocused;
       var showValue = this.handleGetShowValue();
       var isAllowedDateType = this.handleGetAllowedType();
       var showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;

package/lib/v1/DropBox/DropBox.js

@@ -13,8 +13,6 @@ var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/F
 
 var _Modal = _interopRequireDefault(require("../Modal/Modal"));
 
-var _Config = require("../../Provider/Config");
-
 var _LibraryContextInit = _interopRequireDefault(require("../../Provider/LibraryContextInit"));
 
 var _cssJSLogic2 = _interopRequireDefault(require("../../DropBox/css/cssJSLogic"));
@@ -27,6 +25,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Common = require("../../utils/Common");
 
+var _isMobilePopover = _interopRequireDefault(require("./utils/isMobilePopover"));
+
 var _DropBoxModule = _interopRequireDefault(require("../../DropBox/css/DropBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -64,17 +64,7 @@ function DropBox(props) {
   var _ref = DropBoxContext || {},
       direction = _ref.direction;
 
-  var windowWidth,
-      mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth'),
-      isModel = false;
-
-  if (needResponsive) {
-    windowWidth = window.innerWidth;
-
-    if (windowWidth <= mobileWidth) {
-      isModel = true;
-    }
-  }
+  var isModel = (0, _isMobilePopover["default"])(needResponsive);
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])(props),
       zIndexStyle = _cssJSLogic.zIndexStyle;

package/lib/v1/DropBox/utils/isMobilePopover.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = isMobilePopover;
+
+var _Config = require("../../Provider/Config");
+
+function isMobilePopover(needResponsive) {
+  //   let { needResponsive } = props;
+  var windowWidth,
+      mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth'),
+      isModel = false;
+
+  if (needResponsive) {
+    windowWidth = window.innerWidth;
+
+    if (windowWidth <= mobileWidth) {
+      isModel = true;
+    }
+  }
+
+  return isModel ? true : false;
+}