@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

package/es/DateTime/DateTime.js

@@ -12,6 +12,7 @@ import YearView from "./YearView";
 import DateTimePopupHeader from "./DateTimePopupHeader";
 import DateTimePopupFooter from "./DateTimePopupFooter";
 import Time from "./Time";
+import { cn } from "@dot-system/css-utility";
 import style from "./DateTime.module.css";
 import { formatDate, getMonthEnd } from "../utils/datetime/common";
 import { getIsEmptyValue } from "../utils/Common";
@@ -21,8 +22,7 @@ import { Box } from "../Layout";
 import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from "./dateFormatUtils";
 import { getDateText } from "./dateFormatUtils/dateFormat";
 
-function title(date, year, month) {
-  let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+function title(date, year, month, monthNames = []) {
   const HeadingText = `${monthNames[month] || ''} ${year}`;
   return HeadingText;
 }
@@ -166,8 +166,7 @@ export default class DateTime extends React.PureComponent {
     return hours;
   }
 
-  handleGetSelectedDate() {
-    let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  handleGetSelectedDate(selectedInfo = {}) {
     const {
       min,
       max,
@@ -283,8 +282,7 @@ export default class DateTime extends React.PureComponent {
     }
   }
 
-  handleChange() {
-    let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  handleChange(selectedInfo = {}) {
     const {
       onError,
       onChange,
@@ -687,7 +685,7 @@ export default class DateTime extends React.PureComponent {
     }
 
     const childEle = /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${innerClass}`,
+      className: cn(`${style.container} ${innerClass}`),
       "data-id": `${dataId}_Calendar`,
       "data-test-id": `${dataId}_Calendar`,
       onClick: this.closePopup
@@ -699,7 +697,7 @@ export default class DateTime extends React.PureComponent {
       nextMonthTitleText: nextMonthTitleText,
       onModifyCalendar: this.modifyCalendar
     }), /*#__PURE__*/React.createElement("div", {
-      className: style.subContainer
+      className: cn(style.subContainer)
     }, /*#__PURE__*/React.createElement(CalendarView, {
       needBorder: isDateTimeField || needAction,
       dataId: dataId,
@@ -738,7 +736,7 @@ export default class DateTime extends React.PureComponent {
       onCancel: this.handleClear,
       dataId: dataId
     }) : null, isYearView ? /*#__PURE__*/React.createElement("div", {
-      className: style.yearContainer
+      className: cn(style.yearContainer)
     }, /*#__PURE__*/React.createElement(YearView, {
       onSelectYear: this.handleSelectYear,
       onSelectMonth: this.handleSelectMonthViaYearView,
@@ -749,7 +747,7 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: isMonthOpen
     })) : null), renderCustomFooter);
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.dropBox} ${className}`,
+      className: cn(`${style.dropBox} ${className}`),
       "data-id": `${dataId}_dateBoxContainer`,
       "data-test-id": `${dataId}_dateBoxContainer`
     }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({

package/es/DateTime/DateTimePopupFooter.js

@@ -10,6 +10,7 @@ import { Container } from "../Layout";
 import Button from "../Button/Button";
 /** ** CSS *** */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./DateTime.module.css";
 export default class DateTimePopupFooter extends PureComponent {
   render() {
@@ -32,7 +33,7 @@ export default class DateTimePopupFooter extends PureComponent {
       onClick: onSubmit,
       dataId: `${dataId}_saveBtn`
     }), /*#__PURE__*/React.createElement("span", {
-      className: style.space
+      className: cn(style.space)
     }), /*#__PURE__*/React.createElement(Button, {
       text: cancelText,
       size: "medium",

package/es/DateTime/DateWidget.js

@@ -13,6 +13,7 @@ import { Container } from "../Layout";
 import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./DateWidget.module.css";
 /**** Methods ****/
 
@@ -54,6 +55,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 +266,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 +292,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 +305,8 @@ class DateWidgetComponent extends React.Component {
       isDateTime
     });
     const dateFormatSelection = getDateFormatSelection(dateFormatDetails, isDateTime, {
-      i18nShortMonths,
-      i18nMonths,
+      i18nShortMonths: localizedShortMonths,
+      i18nMonths: localizedMonths,
       selectedValue: selected,
       day,
       month,
@@ -320,6 +336,10 @@ class DateWidgetComponent extends React.Component {
       is24Hour,
       isHideCurrentYear
     } = props;
+    const {
+      i18nShortMonths: localizedShortMonths,
+      i18nMonths: localizedMonths
+    } = this.getI18nMonthLabels();
     const dateFormatDetails = getDateFormatDetails(dateFormat, {
       isHideCurrentYear,
       value,
@@ -340,7 +360,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 {
@@ -724,8 +747,7 @@ class DateWidgetComponent extends React.Component {
     }
   }
 
-  handleSelection() {
-    let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  handleSelection(focusOrder = 0) {
     const isAllowedDateType = this.handleGetAllowedType();
 
     if (isAllowedDateType) {
@@ -829,6 +851,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 = '',
@@ -854,8 +880,8 @@ class DateWidgetComponent extends React.Component {
         minute: selectedMinute,
         noon: selectedNoon
       }, dateFormatDetails, isDateTime, {
-        i18nShortMonths,
-        i18nMonths,
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths,
         is24Hour
       });
       return dateTimeString;
@@ -921,9 +947,7 @@ class DateWidgetComponent extends React.Component {
     });
   }
 
-  handleBlurSelectionRange() {
-    let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let oldFocusOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleBlurSelectionRange(focusOrder = '', oldFocusOrder = '') {
     const isAllowedDateType = this.handleGetAllowedType();
 
     if (isAllowedDateType) {
@@ -1031,17 +1055,17 @@ class DateWidgetComponent extends React.Component {
     const showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
     const showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container}`
+      className: cn(`${style.container}`)
     }, children ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
       ref: getTargetRef,
-      className: `${className ? className : ''} ${isDisabled ? style.disabled : style.enabled}`
+      className: cn(`${isDisabled ? style.disabled : style.enabled} ${className ? className : ''}`)
     }, children) : /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
-      className: `${className ? className : ''} ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled}`,
+      className: cn(` ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled} ${className ? className : ''}`),
       onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
       ref: getTargetRef
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({

package/es/DateTime/Time.js

@@ -12,6 +12,7 @@ import { Container, Box } from "../Layout";
 import Select from "../Select/Select";
 /** ** CSS *** */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./DateTime.module.css";
 export default class Time extends PureComponent {
   render() {
@@ -39,7 +40,7 @@ export default class Time extends PureComponent {
       AmPmSelectProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: style.text
+      className: cn(style.text)
     }, timeText), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "vertical",

package/es/DateTime/YearView.js

@@ -194,12 +194,11 @@ export default class YearView extends React.PureComponent {
     onSelectYear && onSelectYear(year);
   }
 
-  renderListItem(_ref) {
-    let {
-      index,
-      style: virtualizerStyle,
-      ref
-    } = _ref;
+  renderListItem({
+    index,
+    style: virtualizerStyle,
+    ref
+  }) {
     const {
       years
     } = this;

package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CalendarView rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="days flex cover rowdir"
+    class="flex fullSize row days"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -14,294 +14,294 @@ exports[`CalendarView rendering the defult props 1`] = `
     data-test-id="dateContainer_dateContainer"
   >
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"