@zohodesk/components 1.0.0-temp-168 → 1.0.0-temp-170

package/lib/DateTime/YearView.module.css

@@ -1,99 +1,99 @@
-[dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19) ;
-  padding-left: var(--zd_size19) ;
-}[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19) ;
-  padding-right: var(--zd_size19) ;
-}
-
-.month {
-  width: 30.333%;
-  font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size26);
-  height: var(--zd_size26) ;
-  color: var(--zdt_yearview_month_text);
-  text-align: center;
-  margin: 0 0 var(--zd_size1) ;
-  cursor: pointer;
-  background-color: var(--zdt_yearview_month_bg);
-  border-radius: 20px;
-}
-
-.month:hover {
-  background-color: var(--zdt_yearview_month_hover_bg);
-}
-
-.currentMonth,
-.currentMonth:hover {
-  color: var(--zdt_yearview_currentmonth_text);
-}
-
-.currentMonth, .currentMonth:hover {
-  background-color: var(--zdt_yearview_currentmonth_bg);
-}
-
-.yearBox {
-  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
-}
-
-.year {
-  padding: var(--zd_size7) 0 ;
-  cursor: pointer;
-}
-
-.year:hover .yearText,
-.year:hover .arrow {
-  color: var(--zdt_yearview_year_hover_text);
-}
-
-.yearText {
-  color: var(--zdt_yearview_yeartext_text);
-  font-size: var(--zd_font_size11) ;
-}
-
-.arrow {
-  color: var(--zdt_yearview_yeartext_text);
-  transition: transform var(--zd_transition1);
-}
-
-.isActive {
-  cursor: default;
-}
-
-.isActive .yearText {
-  font-family: var(--zd_semibold);
-  color: var(--zdt_yearview_year_hover_text);
-  font-size: var(--zd_font_size11) ;
-}
-
-.arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-
-[dir=ltr] .arrowActive {
-  transform: rotate(180deg);
-}
-
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
-}
-
-.container {
-  height: 100% ;
-  overflow-y: auto;
-  overflow-x: hidden;
-  composes: boxPadding;
-  background-color: var(--zdt_yearview_default_bg);
-}
-
-.yearContainer {
-  height: var(--zd_size135) ;
-  overflow: hidden;
-  transition: height var(--zd_transition1);
-  padding-bottom: var(--zd_size5) ;
-}
-
-.toggleYear {
-  height: 0 ;
-  padding: 0 ;
+[dir=ltr] .boxPadding {
+  padding-right: var(--zd_size19) ;
+  padding-left: var(--zd_size19) ;
+}[dir=rtl] .boxPadding {
+  padding-left: var(--zd_size19) ;
+  padding-right: var(--zd_size19) ;
+}
+
+.month {
+  width: 30.333%;
+  font-size: var(--zd_font_size12) ;
+  line-height: var(--zd_size26);
+  height: var(--zd_size26) ;
+  color: var(--zdt_yearview_month_text);
+  text-align: center;
+  margin: 0 0 var(--zd_size1) ;
+  cursor: pointer;
+  background-color: var(--zdt_yearview_month_bg);
+  border-radius: 20px;
+}
+
+.month:hover {
+  background-color: var(--zdt_yearview_month_hover_bg);
+}
+
+.currentMonth,
+.currentMonth:hover {
+  color: var(--zdt_yearview_currentmonth_text);
+}
+
+.currentMonth, .currentMonth:hover {
+  background-color: var(--zdt_yearview_currentmonth_bg);
+}
+
+.yearBox {
+  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
+}
+
+.year {
+  padding: var(--zd_size7) 0 ;
+  cursor: pointer;
+}
+
+.year:hover .yearText,
+.year:hover .arrow {
+  color: var(--zdt_yearview_year_hover_text);
+}
+
+.yearText {
+  color: var(--zdt_yearview_yeartext_text);
+  font-size: var(--zd_font_size11) ;
+}
+
+.arrow {
+  color: var(--zdt_yearview_yeartext_text);
+  transition: transform var(--zd_transition1);
+}
+
+.isActive {
+  cursor: default;
+}
+
+.isActive .yearText {
+  font-family: var(--zd_semibold);
+  color: var(--zdt_yearview_year_hover_text);
+  font-size: var(--zd_font_size11) ;
+}
+
+.arrowActive {
+  color: var(--zdt_yearview_year_hover_text);
+}
+
+[dir=ltr] .arrowActive {
+  transform: rotate(180deg);
+}
+
+[dir=rtl] .arrowActive {
+  transform: rotate(-180deg);
+}
+
+.container {
+  height: 100% ;
+  overflow-y: auto;
+  overflow-x: hidden;
+  composes: boxPadding;
+  background-color: var(--zdt_yearview_default_bg);
+}
+
+.yearContainer {
+  height: var(--zd_size135) ;
+  overflow: hidden;
+  transition: height var(--zd_transition1);
+  padding-bottom: var(--zd_size5) ;
+}
+
+.toggleYear {
+  height: 0 ;
+  padding: 0 ;
 }

package/lib/DateTime/dateFormatUtils/dayChange.js

@@ -7,6 +7,8 @@ exports.getChangedDay = getChangedDay;
 
 var _index = require("./index");
 
+var _Common = require("../../utils/Common");
+
 /** * Methods ** */
 function getChangedDay(values, event, focusOrders, keyActions) {
   var keyCode = event.keyCode,
@@ -44,7 +46,7 @@ function getChangedDay(values, event, focusOrders, keyActions) {
       newDay -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : day.toString() + keyString;
     newValue = Number.parseInt(newValue);
 

package/lib/DateTime/dateFormatUtils/index.js

@@ -81,7 +81,7 @@ function getIsNumberTyped(event) {
       metaKey = event.metaKey,
       shiftKey = event.shiftKey;
 
-  if (keyCode >= 48 && keyCode <= 57 && !ctrlKey && !metaKey && !shiftKey) {
+  if ((keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105) && !ctrlKey && !metaKey && !shiftKey) {
     return true;
   }
 

package/lib/DateTime/dateFormatUtils/monthChange.js

@@ -7,6 +7,8 @@ exports.getChangedMonth = getChangedMonth;
 
 var _index = require("./index");
 
+var _Common = require("../../utils/Common");
+
 /** * Methods ** */
 function getChangedMonth(values, event, focusOrders, keyActions) {
   var keyCode = event.keyCode,
@@ -48,7 +50,7 @@ function getChangedMonth(values, event, focusOrders, keyActions) {
       newMonth -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : month.toString() + keyString;
     newValue = Number.parseInt(newValue);
 

package/lib/DateTime/dateFormatUtils/timeChange.js

@@ -61,7 +61,7 @@ function getChangedHour(values, event, focusOrders, keyActions) {
       newHour -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : hour.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -132,7 +132,7 @@ function getChangedMinute(values, event, focusOrders, keyActions) {
       newMinute -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : minute.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -206,7 +206,7 @@ function getChangedNoon(values, event, focusOrders
       newNoon = allowedValues[currentNoonIndex - 1];
     }
   } else if ((0, _index.getIsNoonValueTyped)(event)) {
-    var keyString = String.fromCharCode(which); // let newValue = isNewType ? keyString : noon.toString() + keyString;
+    var keyString = (0, _Common.getKeyValue)(event).toUpperCase(); // let newValue = isNewType ? keyString : noon.toString() + keyString;
 
     var newValue = keyString;
     var needChangeNoon = newNoon.indexOf(newValue) === -1 ? true : false;

package/lib/DateTime/dateFormatUtils/yearChange.js

@@ -7,6 +7,8 @@ exports.getChangedYear = getChangedYear;
 
 var _index = require("./index");
 
+var _Common = require("../../utils/Common");
+
 /** * Methods ** */
 function getChangedYear(values, event, focusOrders, keyActions, _ref) {
   var yearInfo = _ref.yearInfo;
@@ -64,7 +66,7 @@ function getChangedYear(values, event, focusOrders, keyActions, _ref) {
       newYear -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : year.toString() + keyString;
     var newValueString = newValue || '';
     newValue = Number.parseInt(newValue);

package/lib/DropBox/DropBox.js

@@ -50,16 +50,16 @@ function DropBox(props) {
       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 _focusScopeProps$need = focusScopeProps.needAutoFocus,
+      needAutoFocus = _focusScopeProps$need === void 0 ? true : _focusScopeProps$need,
+      _focusScopeProps$need2 = focusScopeProps.needRestoreFocus,
+      needRestoreFocus = _focusScopeProps$need2 === void 0 ? true : _focusScopeProps$need2,
+      _focusScopeProps$need3 = focusScopeProps.needListNavigation,
+      needListNavigation = _focusScopeProps$need3 === void 0 ? true : _focusScopeProps$need3,
+      _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
+      needFocusLoop = _focusScopeProps$need4 === void 0 ? false : _focusScopeProps$need4,
+      _focusScopeProps$need5 = focusScopeProps.needEnterAction,
+      needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
 
   var _ref = DropBoxContext || {},
       direction = _ref.direction;
@@ -82,11 +82,11 @@ function DropBox(props) {
   var dropBoxEle = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], _extends({
     onClose: onClose,
     elementRef: dropBoxRef,
-    autoFocus: autoFocus,
-    restoreFocus: restoreFocus,
-    needArrowLoop: needArrowLoop,
-    needTabLoop: needTabLoop,
-    enableEnterAction: enableEnterAction
+    needAutoFocus: needAutoFocus,
+    needRestoreFocus: needRestoreFocus,
+    needListNavigation: needListNavigation,
+    needFocusLoop: needFocusLoop,
+    needEnterAction: needEnterAction
   }, focusScopeProps), /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
     isModel: isModel,
     direction: direction