@zohodesk/components 1.6.15 → 1.6.16

package/README.md

@@ -2,6 +2,11 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.6.16
+
+- **DateWidget**
+  - Fixed i18n key handling issue to ensure localized labels/messages are resolved consistently.
+  
 
 # 1.6.15
 

package/es/DateTime/DateWidget.js

@@ -54,6 +54,7 @@ class DateWidgetComponent extends React.Component {
     this.handleDateIconClick = this.handleDateIconClick.bind(this);
     this.handleSelectionRangeDetails = this.handleSelectionRangeDetails.bind(this);
     this.handleBlurSelectionRange = this.handleBlurSelectionRange.bind(this);
+    this.getI18nMonthLabels = this.getI18nMonthLabels.bind(this);
     this.state = {
       selected: '',
       displayText: '',
@@ -264,6 +265,16 @@ class DateWidgetComponent extends React.Component {
     !isOpenOnly && togglePopup(e, `${defaultPosition}Right`);
   }
 
+  getI18nMonthLabels() {
+    const {
+      i18nKeys
+    } = this.props;
+    return {
+      i18nShortMonths: i18nKeys.monthNamesShort || i18nShortMonths,
+      i18nMonths: i18nKeys.monthNames || i18nMonths
+    };
+  }
+
   handleSelectionRangeDetails(props) {
     const {
       timeZone,
@@ -280,7 +291,11 @@ class DateWidgetComponent extends React.Component {
       minute,
       noon
     } = this.state;
-    const selected = value === INVALID_DATE ? '' : value; //New UI Changes
+    const selected = value === INVALID_DATE ? '' : value;
+    const {
+      i18nShortMonths: localizedShortMonths,
+      i18nMonths: localizedMonths
+    } = this.getI18nMonthLabels(); //New UI Changes
 
     const dateFormatDetails = getDateFormatDetails(dateFormat, {
       isHideCurrentYear: false,
@@ -289,8 +304,8 @@ class DateWidgetComponent extends React.Component {
       isDateTime
     });
     const dateFormatSelection = getDateFormatSelection(dateFormatDetails, isDateTime, {
-      i18nShortMonths,
-      i18nMonths,
+      i18nShortMonths: localizedShortMonths,
+      i18nMonths: localizedMonths,
       selectedValue: selected,
       day,
       month,
@@ -320,6 +335,10 @@ class DateWidgetComponent extends React.Component {
       is24Hour,
       isHideCurrentYear
     } = props;
+    const {
+      i18nShortMonths: localizedShortMonths,
+      i18nMonths: localizedMonths
+    } = this.getI18nMonthLabels();
     const dateFormatDetails = getDateFormatDetails(dateFormat, {
       isHideCurrentYear,
       value,
@@ -340,7 +359,10 @@ class DateWidgetComponent extends React.Component {
         format = `${newDateFormat} ${is24Hour ? 'HH:mm' : 'hh:mm A'}`;
       }
 
-      displayText = formatDate(convertedValue, format);
+      displayText = formatDate(convertedValue, format, {
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths
+      });
     }
 
     return {
@@ -828,6 +850,10 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
 
     if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
+      const {
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths
+      } = this.getI18nMonthLabels();
       const {
         day: selectedDay = '',
         month: selectedMonth = '',
@@ -853,8 +879,8 @@ class DateWidgetComponent extends React.Component {
         minute: selectedMinute,
         noon: selectedNoon
       }, dateFormatDetails, isDateTime, {
-        i18nShortMonths,
-        i18nMonths,
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths,
         is24Hour
       });
       return dateTimeString;

package/es/utils/datetime/common.js

@@ -14,7 +14,10 @@ export function getTimeOffset() {
   const matchingOffset = Object.keys(offsetMap).find(offset => GMT.getTimezoneOffset() === Number(offset));
   return matchingOffset ? offsetMap[matchingOffset].toString().split(' ') : ['', ''];
 }
-export function formatDate(dateMill, mask) {
+export function formatDate(dateMill, mask, {
+  i18nShortMonths,
+  i18nMonths
+} = {}) {
   let date = new Date(dateMill);
   let O = getTimeOffset()[0];
   let Z = getTimeOffset()[1];
@@ -26,6 +29,10 @@ export function formatDate(dateMill, mask) {
   let M = date.getMinutes();
   let s = date.getSeconds();
   let L = date.getMilliseconds();
+  const defaultShortMonths = dateFormat.monthNames.slice(0, 12);
+  const defaultMonths = dateFormat.monthNames.slice(12);
+  const resolvedShortMonths = Array.isArray(i18nShortMonths) ? i18nShortMonths : defaultShortMonths;
+  const resolvedMonths = Array.isArray(i18nMonths) ? i18nMonths : defaultMonths;
   let flags = {
     d: d,
     O: O,
@@ -38,8 +45,8 @@ export function formatDate(dateMill, mask) {
     DDDD: dateFormat.dayNames[D + 7],
     M: m + 1,
     MM: pad(m + 1, 2),
-    MMM: dateFormat.monthNames[m],
-    MMMM: dateFormat.monthNames[m + 12],
+    MMM: resolvedShortMonths[m],
+    MMMM: resolvedMonths[m],
     yy: String(y).slice(2),
     YY: String(y).slice(2),
     yyyy: y,

package/lib/DateTime/DateWidget.js

@@ -102,6 +102,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     _this.handleDateIconClick = _this.handleDateIconClick.bind(_assertThisInitialized(_this));
     _this.handleSelectionRangeDetails = _this.handleSelectionRangeDetails.bind(_assertThisInitialized(_this));
     _this.handleBlurSelectionRange = _this.handleBlurSelectionRange.bind(_assertThisInitialized(_this));
+    _this.getI18nMonthLabels = _this.getI18nMonthLabels.bind(_assertThisInitialized(_this));
     _this.state = {
       selected: '',
       displayText: '',
@@ -313,6 +314,15 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
 
       !isOpenOnly && togglePopup(e, "".concat(defaultPosition, "Right"));
     }
+  }, {
+    key: "getI18nMonthLabels",
+    value: function getI18nMonthLabels() {
+      var i18nKeys = this.props.i18nKeys;
+      return {
+        i18nShortMonths: i18nKeys.monthNamesShort || _constants.i18nShortMonths,
+        i18nMonths: i18nKeys.monthNames || _constants.i18nMonths
+      };
+    }
   }, {
     key: "handleSelectionRangeDetails",
     value: function handleSelectionRangeDetails(props) {
@@ -328,7 +338,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           hour = _this$state2.hour,
           minute = _this$state2.minute,
           noon = _this$state2.noon;
-      var selected = value === _constants.INVALID_DATE ? '' : value; //New UI Changes
+      var selected = value === _constants.INVALID_DATE ? '' : value;
+
+      var _this$getI18nMonthLab = this.getI18nMonthLabels(),
+          localizedShortMonths = _this$getI18nMonthLab.i18nShortMonths,
+          localizedMonths = _this$getI18nMonthLab.i18nMonths; //New UI Changes
+
 
       var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
         isHideCurrentYear: false,
@@ -337,8 +352,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         isDateTime: isDateTime
       });
       var dateFormatSelection = (0, _dateFormat.getDateFormatSelection)(dateFormatDetails, isDateTime, {
-        i18nShortMonths: _constants.i18nShortMonths,
-        i18nMonths: _constants.i18nMonths,
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths,
         selectedValue: selected,
         day: day,
         month: month,
@@ -365,6 +380,11 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           value = props.value,
           is24Hour = props.is24Hour,
           isHideCurrentYear = props.isHideCurrentYear;
+
+      var _this$getI18nMonthLab2 = this.getI18nMonthLabels(),
+          localizedShortMonths = _this$getI18nMonthLab2.i18nShortMonths,
+          localizedMonths = _this$getI18nMonthLab2.i18nMonths;
+
       var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
         isHideCurrentYear: isHideCurrentYear,
         value: value,
@@ -383,7 +403,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           format = "".concat(newDateFormat, " ").concat(is24Hour ? 'HH:mm' : 'hh:mm A');
         }
 
-        displayText = (0, _common.formatDate)(convertedValue, format);
+        displayText = (0, _common.formatDate)(convertedValue, format, {
+          i18nShortMonths: localizedShortMonths,
+          i18nMonths: localizedMonths
+        });
       }
 
       return {
@@ -849,6 +872,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props9.isPopupOpen;
 
       if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
+        var _this$getI18nMonthLab3 = this.getI18nMonthLabels(),
+            localizedShortMonths = _this$getI18nMonthLab3.i18nShortMonths,
+            localizedMonths = _this$getI18nMonthLab3.i18nMonths;
+
         var _getDateDetails2 = (0, _dateFormat.getDateDetails)(selected, {
           day: day,
           month: month,
@@ -880,8 +907,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           minute: selectedMinute,
           noon: selectedNoon
         }, dateFormatDetails, isDateTime, {
-          i18nShortMonths: _constants.i18nShortMonths,
-          i18nMonths: _constants.i18nMonths,
+          i18nShortMonths: localizedShortMonths,
+          i18nMonths: localizedMonths,
           is24Hour: is24Hour
         });
         return dateTimeString;

package/lib/utils/datetime/common.js

@@ -46,6 +46,10 @@ function getTimeOffset() {
 }
 
 function formatDate(dateMill, mask) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      i18nShortMonths = _ref.i18nShortMonths,
+      i18nMonths = _ref.i18nMonths;
+
   var date = new Date(dateMill);
   var O = getTimeOffset()[0];
   var Z = getTimeOffset()[1];
@@ -57,6 +61,10 @@ function formatDate(dateMill, mask) {
   var M = date.getMinutes();
   var s = date.getSeconds();
   var L = date.getMilliseconds();
+  var defaultShortMonths = dateFormat.monthNames.slice(0, 12);
+  var defaultMonths = dateFormat.monthNames.slice(12);
+  var resolvedShortMonths = Array.isArray(i18nShortMonths) ? i18nShortMonths : defaultShortMonths;
+  var resolvedMonths = Array.isArray(i18nMonths) ? i18nMonths : defaultMonths;
   var flags = {
     d: d,
     O: O,
@@ -69,8 +77,8 @@ function formatDate(dateMill, mask) {
     DDDD: dateFormat.dayNames[D + 7],
     M: m + 1,
     MM: pad(m + 1, 2),
-    MMM: dateFormat.monthNames[m],
-    MMMM: dateFormat.monthNames[m + 12],
+    MMM: resolvedShortMonths[m],
+    MMMM: resolvedMonths[m],
     yy: String(y).slice(2),
     YY: String(y).slice(2),
     yyyy: y,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.15",
+  "version": "1.6.16",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,