@zohodesk/components 1.0.0-test-252 → 1.0.0

package/es/DateTime/DateWidget.js

@@ -3,18 +3,18 @@ import React from 'react';
 import { DateWidget_propTypes } from './props/propTypes';
 import { DateWidget_defaultProps } from './props/defaultProps';
 import datetime from '@zohodesk/datetimejs';
-
 /**** Components ****/
+
 import DateTime from './DateTime';
 import Popup from '../Popup/Popup';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container } from '../Layout';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
-
 /**** CSS ****/
-import style from './DateWidget.module.css';
 
+import style from './DateWidget.module.css';
 /**** Methods ****/
+
 import validator from './validator';
 import { formatDate } from '../utils/datetime/common';
 import { getIsSupportedKey, arrayIsNotEqual } from './dateFormatUtils';
@@ -24,11 +24,11 @@ import { getChangedMonth } from './dateFormatUtils/monthChange';
 import { getChangedYear } from './dateFormatUtils/yearChange';
 import { getChangedHour, getChangedMinute, getChangedNoon } from './dateFormatUtils/timeChange';
 import { getIsEmptyValue } from '../utils/Common';
-
 /** * Constants ** */
-import { INVALID_DATE, i18nShortMonths, i18nMonths } from './constants';
 
+import { INVALID_DATE, i18nShortMonths, i18nMonths } from './constants';
 /* eslint-disable react/no-unused-prop-types */
+
 /* eslint css-modules/no-unused-class: [0, { markAsUsed: 'inputLine'] }] */
 
 class DateWidgetComponent extends React.Component {
@@ -72,9 +72,12 @@ class DateWidgetComponent extends React.Component {
     this.oldFocusOrder = '';
     this.focusOrder = '';
     this.oldKeyDownAction = ''; //'Arrow' || 'valueTyped'
+
     this.keyDownAction = ''; //'Arrow' || 'valueTyped'
+
     this.isMouseDown = false;
   }
+
   componentDidMount() {
     const {
       validation
@@ -82,9 +85,11 @@ class DateWidgetComponent extends React.Component {
     const {
       selected
     } = this.state;
+
     if (validation && validation.validate) {
       this.validateOnSelect(selected, this.props);
     }
+
     const {
       displayText,
       selected: newSelected
@@ -95,6 +100,7 @@ class DateWidgetComponent extends React.Component {
     });
     this.handleSelectionRangeDetails(this.props);
   }
+
   componentDidUpdate(prevProps, prevState) {
     const {
       selected,
@@ -116,9 +122,11 @@ class DateWidgetComponent extends React.Component {
       is24Hour,
       isHideCurrentYear
     } = this.props;
+
     if (validation && validation.validate) {
       this.validateOnSelect(selected, this.props);
     }
+
     if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || isHideCurrentYear !== prevProps.isHideCurrentYear) {
       const {
         displayText,
@@ -128,6 +136,7 @@ class DateWidgetComponent extends React.Component {
         selected,
         displayText
       });
+
       if (value !== INVALID_DATE) {
         this.setState({
           day: '',
@@ -141,27 +150,28 @@ class DateWidgetComponent extends React.Component {
         });
       }
     }
+
     if (prevProps.isPopupReady !== isPopupReady) {
       if (isPopupReady) {
         this.resetLocalDate && this.resetLocalDate();
       }
     }
+
     const haveLocalValue = [day, month, year, hour, minute, noon].some(value => !getIsEmptyValue(value));
+
     if (isDateEdited !== haveLocalValue) {
       this.setState({
         isDateEdited: haveLocalValue
       });
     }
+
     if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || arrayIsNotEqual([day, month, year, hour, minute, noon], [prevState.day, prevState.month, prevState.year, prevState.hour, prevState.minute, prevState.noon])) {
       this.handleSelectionRangeDetails(this.props);
-    }
+    } // if (stateFocusOrder !== prevState.stateFocusOrder) {
 
-    // if (stateFocusOrder !== prevState.stateFocusOrder) {
 
     isFocused && !getIsEmptyValue(stateFocusOrder) && this.handleSelection(stateFocusOrder);
-    this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder);
-    // }
-
+    this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder); // }
     // if (prevProps.isPopupOpen !== isPopupOpen) {
     //   if (!isPopupOpen) {
     //     this.valueInput && this.valueInput.focus({preventScroll:true});
@@ -176,18 +186,21 @@ class DateWidgetComponent extends React.Component {
       closePopupOnly,
       validation
     } = this.props;
+
     if (validation && validation.validateOn) {
       const {
         selected
       } = this.state;
       this.validateOnSelect(selected, this.props);
     }
+
     onSelect && onSelect(userZoneSelectedTime, id);
     this.valueInput && this.valueInput.focus({
       preventScroll: true
     });
     closePopupOnly(e);
   }
+
   validateOnSelect(value, props) {
     const defaultCheckPropsRules = ['required'];
     const defaultValidateRules = ['required'];
@@ -198,6 +211,7 @@ class DateWidgetComponent extends React.Component {
       onFailValidation
     } = props;
     const targetTag = this.elementRef;
+
     if (validation) {
       //validateOn won't work here ...
       const newValidation = validator.combinePropsValidation(this.props, defaultType, 'onSelect', validation, defaultCheckPropsRules, defaultValidateRules);
@@ -211,6 +225,7 @@ class DateWidgetComponent extends React.Component {
       onPassValidation && onPassValidation(value, targetTag);
     }
   }
+
   handleTogglePopup(e, isOpenOnly) {
     const {
       togglePopup,
@@ -219,6 +234,7 @@ class DateWidgetComponent extends React.Component {
       isPopupOpen,
       removeClose
     } = this.props;
+
     if (isOpenOnly) {
       if (!isPopupOpen) {
         togglePopup(e, `${defaultPosition}Right`);
@@ -226,8 +242,10 @@ class DateWidgetComponent extends React.Component {
         removeClose(e);
       }
     }
+
     !isOpenOnly && togglePopup(e, `${defaultPosition}Right`);
   }
+
   handleSelectionRangeDetails(props) {
     const {
       timeZone,
@@ -244,9 +262,8 @@ class DateWidgetComponent extends React.Component {
       minute,
       noon
     } = this.state;
-    const selected = value === INVALID_DATE ? '' : value;
+    const selected = value === INVALID_DATE ? '' : value; //New UI Changes
 
-    //New UI Changes
     const dateFormatDetails = getDateFormatDetails(dateFormat, {
       isHideCurrentYear: false,
       value,
@@ -275,6 +292,7 @@ class DateWidgetComponent extends React.Component {
       newDateFormat
     });
   }
+
   handleGetDisplayText(props) {
     const {
       timeZone,
@@ -295,22 +313,27 @@ class DateWidgetComponent extends React.Component {
     } = dateFormatDetails;
     let displayText = '';
     const selected = value === INVALID_DATE ? '' : value;
+
     if (selected) {
       let format = newDateFormat,
-        convertedValue;
+          convertedValue;
+
       if (isDateTime) {
         convertedValue = datetime.toDate(datetime.tz.utcToTz(value, timeZone));
         format = `${newDateFormat} ${is24Hour ? 'HH:mm' : 'hh:mm A'}`;
       } else {
         convertedValue = datetime.toDate(value);
       }
+
       displayText = formatDate(convertedValue, format);
     }
+
     return {
       displayText,
       selected
     };
   }
+
   handleKeyDown(e) {
     const {
       keyCode
@@ -323,12 +346,14 @@ class DateWidgetComponent extends React.Component {
       cantEditOnPopupOpen
     } = this.props;
     const isAllowedDateType = this.handleGetAllowedType();
+
     if (isPopupOpen) {
       if (keyCode === 9 && !isAllowedDateType) {
         //on tab click popup close
         closePopupOnly(e);
-      }
-      // ~~~~~~~ handle date navigation in dateTime popup ~~~~~
+      } // ~~~~~~~ handle date navigation in dateTime popup ~~~~~
+
+
       if (isAllowedDateType) {
         cantEditOnPopupOpen && this.handleDateType(e);
       }
@@ -344,6 +369,7 @@ class DateWidgetComponent extends React.Component {
       }
     }
   }
+
   getValueInputRef(el) {
     const {
       getRef
@@ -351,11 +377,13 @@ class DateWidgetComponent extends React.Component {
     this.valueInput = el;
     getRef && getRef(el);
   }
+
   handleFocus() {
     const isAllowedDateType = this.handleGetAllowedType();
     const {
       isMouseDown
     } = this;
+
     if (isAllowedDateType && !isMouseDown) {
       const {
         dateFormatSelection
@@ -382,11 +410,13 @@ class DateWidgetComponent extends React.Component {
         isFocused: true
       });
     }
+
     const {
       onFocus
     } = this.props;
     onFocus && onFocus();
   }
+
   handleBlur() {
     this.focusOrder = '';
     this.oldFocusOrder = '';
@@ -394,9 +424,7 @@ class DateWidgetComponent extends React.Component {
     this.keyDownAction = '';
     this.setState({
       isFocused: false
-    });
-
-    // const { valueInput } = this;
+    }); // const { valueInput } = this;
     // document.getSelection().removeAllRanges();
     // valueInput && valueInput.setSelectionRange(0, 0);
 
@@ -405,6 +433,7 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
     onBlur && onBlur();
   }
+
   handleGetMethods(methods) {
     const {
       getMethods
@@ -419,15 +448,18 @@ class DateWidgetComponent extends React.Component {
     this.DateTimeYearViewToggle = toggleYearView;
     getMethods && getMethods(methods);
   }
+
   handleDateType(e) {
     const {
       keyCode,
       shiftKey
     } = e;
     const input = e.target;
+
     if (getIsSupportedKey(e)) {
       e.preventDefault();
     }
+
     const {
       isDateTime,
       timeZone,
@@ -487,6 +519,7 @@ class DateWidgetComponent extends React.Component {
     } = order[focusedOrder] || {};
     this.oldFocusOrder = this.focusOrder;
     this.focusOrder = focusedOrder;
+
     if (keyCode === 38 || keyCode === 40) {
       //up arrow && down arrow
       this.oldKeyDownAction = this.keyDownAction;
@@ -495,6 +528,7 @@ class DateWidgetComponent extends React.Component {
       this.oldKeyDownAction = this.keyDownAction;
       this.keyDownAction = 'valueTyped';
     }
+
     const focusedOrders = {
       focusOrder: this.focusOrder,
       oldFocusOrder: this.oldFocusOrder
@@ -504,13 +538,14 @@ class DateWidgetComponent extends React.Component {
       keyAction: this.keyDownAction
     };
     let newDay = selectedDay,
-      newMonth = selectedMonth,
-      newYear = selectedYear,
-      newHour = selectedHour,
-      newMinute = selectedMinute,
-      newNoon = selectedNoon,
-      isValueChanged = false,
-      newFocusOrder = focusedOrder;
+        newMonth = selectedMonth,
+        newYear = selectedYear,
+        newHour = selectedHour,
+        newMinute = selectedMinute,
+        newNoon = selectedNoon,
+        isValueChanged = false,
+        newFocusOrder = focusedOrder;
+
     if (keyCode === 9 && shiftKey && !getIsEmptyValue(focusedOrder) && focusedOrder !== 0) {
       e.preventDefault();
       this.setState({
@@ -599,6 +634,7 @@ class DateWidgetComponent extends React.Component {
         noon: selectedNoon
       }, e, focusedOrders, keyActions));
     }
+
     if (isValueChanged) {
       const currentValue = {
         day: newDay,
@@ -608,6 +644,7 @@ class DateWidgetComponent extends React.Component {
         minute: newMinute,
         noon: newNoon
       };
+
       const errorCaseHandle = isEmptyValError => {
         this.setState(() => ({
           day: newDay,
@@ -623,12 +660,14 @@ class DateWidgetComponent extends React.Component {
         const newSelected = isEmptyValError ? '' : INVALID_DATE;
         value !== newSelected && onSelect && onSelect(newSelected, id);
       };
+
       const {
         isError,
         isEmptyValError
       } = getIsValidDate(currentValue, isDateTime, {
         is24Hour
       });
+
       if (isError) {
         errorCaseHandle(isEmptyValError);
       } else {
@@ -643,12 +682,14 @@ class DateWidgetComponent extends React.Component {
           isDateTime,
           is24Hour
         });
+
         if (selectedDateError) {
           if (errorType === 'MIN') {
             onError && onError(minErrorText, true);
           } else if (errorType === 'MAX') {
             onError && onError(maxErrorText, true);
           }
+
           errorCaseHandle();
         } else {
           this.setState(() => ({
@@ -667,9 +708,11 @@ class DateWidgetComponent extends React.Component {
       }
     }
   }
+
   handleSelection() {
     let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     const isAllowedDateType = this.handleGetAllowedType();
+
     if (isAllowedDateType) {
       const {
         dateFormatSelection
@@ -680,18 +723,21 @@ class DateWidgetComponent extends React.Component {
       let {
         index
       } = order[focusOrder] || {};
+
       if (!index) {
         focusOrder = 0;
         ({
           index
         } = order[focusOrder] || {});
       }
+
       if (index && this.valueInput) {
         document.getSelection().removeAllRanges();
         this.valueInput.setSelectionRange(index[0], index[1]);
       }
     }
   }
+
   handleInputClick(e) {
     this.isMouseDown = false;
     const {
@@ -707,12 +753,14 @@ class DateWidgetComponent extends React.Component {
     } = dateFormatSelection;
     const focusOrder = clickIndex[selectionEnd] || clickIndex[selectionEnd - 1] || 0;
     const isAllowedDateType = this.handleGetAllowedType();
+
     if (isAllowedDateType) {
       this.setState({
         stateFocusOrder: focusOrder,
         isFocused: true
       });
     }
+
     if (!isAllowedDateType) {
       this.handleTogglePopup(e);
     } else {
@@ -721,22 +769,27 @@ class DateWidgetComponent extends React.Component {
         isReadOnly,
         isDisabled
       } = this.props;
+
       if (isPopupOpenOnClick && (!isReadOnly || !isDisabled)) {
         this.handleTogglePopup(e, true);
       }
+
       const {
         isPopupCloseOnClick,
         isPopupOpen,
         closePopupOnly
       } = this.props;
+
       if (isPopupCloseOnClick && !isPopupOpen) {
         closePopupOnly && closePopupOnly(e);
       }
     }
   }
+
   handleMouseDown() {
     this.isMouseDown = true;
   }
+
   handleGetShowValue() {
     const {
       day,
@@ -759,6 +812,7 @@ class DateWidgetComponent extends React.Component {
       timeZone,
       isPopupOpen
     } = this.props;
+
     if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
       const {
         day: selectedDay = '',
@@ -793,24 +847,30 @@ class DateWidgetComponent extends React.Component {
     } else if (displayText) {
       return displayText;
     }
+
     const timeFormat = is24Hour ? ' HH:mm' : ' hh:mm --';
     const dateTimeFormat = isDateTime ? `${newDateFormat}${timeFormat}` : newDateFormat;
     return dateTimeFormat || '';
   }
+
   handleGetAllowedType() {
     const {
       isReadOnly,
       isDisabled,
       isEditable
     } = this.props;
+
     if (isEditable) {
       if (isReadOnly || isDisabled) {
         return false;
       }
+
       return true;
     }
+
     return false;
   }
+
   handleDateClear() {
     const {
       id,
@@ -828,11 +888,9 @@ class DateWidgetComponent extends React.Component {
       stateFocusOrder: 0,
       isError: false
     });
-    value && onSelect && onSelect('', id);
-    this.valueInput && this.valueInput.focus({
-      preventScroll: true
-    });
+    value && onSelect && onSelect('', id); // this.valueInput && this.valueInput.focus({ preventScroll: true });
   }
+
   handleDateTimeClear(e) {
     this.handleDateClear();
     const {
@@ -840,16 +898,19 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
     closePopupOnly(e);
   }
+
   handleDateIconClick(e) {
     this.handleTogglePopup(e);
     this.valueInput && this.valueInput.focus({
       preventScroll: true
     });
   }
+
   handleBlurSelectionRange() {
     let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     let oldFocusOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     const isAllowedDateType = this.handleGetAllowedType();
+
     if (isAllowedDateType) {
       // if (focusOrder !== oldFocusOrder) {
       const {
@@ -860,26 +921,27 @@ class DateWidgetComponent extends React.Component {
       } = dateFormatSelection;
       const {
         isPopupOpen
-      } = this.props;
+      } = this.props; // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
 
-      // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
       const {
         type: focusedType = ''
       } = order[focusOrder] || {};
       const {
-        /*isActive,*/isYearView,
+        /*isActive,*/
+        isYearView,
         isMonthOpen: oldIsMonthOpen
       } = this.getDateTimeStateValues();
       const yearViewTypes = ['month', 'year'];
       const isMonthOpen = focusedType === 'month';
+
       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);
         }
-      }
-      // }
+      } // }
+
     }
   }
 
@@ -919,7 +981,10 @@ class DateWidgetComponent extends React.Component {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId
+      dropBoxPortalId,
+      a11y,
+      boxSize,
+      onError
     } = this.props;
     const {
       selected: value = '',
@@ -935,11 +1000,13 @@ class DateWidgetComponent extends React.Component {
       className: `${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}`
     }, 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}`,
       onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
       ref: getTargetRef
@@ -969,7 +1036,8 @@ class DateWidgetComponent extends React.Component {
       },
       iconOnHover: iconOnHover,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      a11y: a11y
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
@@ -1004,24 +1072,27 @@ class DateWidgetComponent extends React.Component {
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
       isRestrictScroll: isRestrictScroll,
-      dropBoxPortalId: dropBoxPortalId
+      dropBoxPortalId: dropBoxPortalId,
+      boxSize: boxSize,
+      onError: onError
     }));
   }
+
 }
+
 DateWidgetComponent.defaultProps = DateWidget_defaultProps;
 DateWidgetComponent.propTypes = DateWidget_propTypes;
 const DateWidget = Popup(DateWidgetComponent);
-DateWidget.defaultProps = DateWidgetComponent.defaultProps;
-
-// eslint-disable-next-line no-undef
-if (false) {
-  DateWidgetComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  DateWidget.propTypes = DateWidgetComponent.propTypes;
-}
+DateWidget.defaultProps = DateWidgetComponent.defaultProps; // eslint-disable-next-line no-undef
+// if (__DOCS__) {
+//   DateWidgetComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   DateWidget.propTypes = DateWidgetComponent.propTypes;
+// }
+
 export default DateWidget;

package/es/DateTime/DateWidget.module.css

@@ -14,17 +14,17 @@
 }
 .inputLine {
   position: absolute;
-  bottom: 0;
+  bottom: 0 ;
   transition: border var(--zd_transition2) linear 0s;
   border-bottom: 1px solid var(--zdt_datewidget_input_border);
 }
 [dir=ltr] .inputLine {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 [dir=rtl] .inputLine {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);

package/es/DateTime/DaysRow.js

@@ -1,11 +1,12 @@
 /* eslint-disable react/forbid-component-props */
+
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-
 /** ** CSS *** */
-import style from './DateTime.module.css';
 
+import style from './DateTime.module.css';
 /** ** Components *** */
+
 import { Container, Box } from '../Layout';
 export default class DaysRow extends PureComponent {
   render() {
@@ -20,7 +21,9 @@ export default class DaysRow extends PureComponent {
     }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
       key: dayName,
       className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
-      "data-title": dayName
+      "data-title": dayName,
+      "aria-label": dayName
     }, dayNamesShort[index])));
   }
+
 }