@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/DateTime/Time.js

@@ -2,6 +2,8 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
+import { Time_propTypes } from './props/propTypes';
+import { Time_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import { Container, Box } from '../Layout';
@@ -66,6 +68,8 @@ export default class Time extends PureComponent {
   }
 
 }
+Time.propTypes = Time_propTypes;
+Time.defaultProps = Time_defaultProps;
 
 class Hour extends React.PureComponent {
   render() {

package/es/DateTime/YearView.js

@@ -207,7 +207,6 @@ export default class YearView extends React.PureComponent {
     let {
       viewedYear,
       viewedMonth,
-      monthNames,
       monthNamesShort,
       isMonthOpen
     } = this.props;

package/es/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: 2.1667;
+  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/es/DateTime/dateFormatUtils/dateFormat.js

@@ -213,6 +213,13 @@ export function getDateTimeString() {
 
   return `${dateString}${timeString}`;
 }
+export function getDateText(value, isDateTime, timeZone) {
+  if (value && !timeZone) {
+    value = value.replace('Z', '');
+  }
+
+  return value ? isDateTime ? timeZone ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : new Date(value) : timeZone ? datetime.toDate(value) : new Date(value) : new Date();
+}
 export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
   let {
     is24Hour
@@ -227,7 +234,7 @@ export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
   } = localValues;
 
   if (value) {
-    const dateObj = isDateTime ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : new Date();
+    const dateObj = getDateText(value, isDateTime, timeZone);
     const selectedDay = dateObj.getDate();
     const selectedMonth = dateObj.getMonth();
     const selectedYear = dateObj.getFullYear();
@@ -400,7 +407,12 @@ export function getSelectedDate(values, props) {
       selectedValue = '';
 
   if (isDateTime) {
-    selectedInMillis = datetime.tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
+    if (timeZone) {
+      selectedInMillis = datetime.tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
+    } else {
+      selectedInMillis = Date.UTC(year, month, date, hour, mins);
+    }
+
     selectedValue = datetime.ISO(selectedInMillis);
   } else {
     selectedInMillis = Date.UTC(year, month, date);

package/es/DateTime/dateFormatUtils/dayChange.js

@@ -1,5 +1,6 @@
 /** * Methods ** */
 import { getIsNewValueType, getDayDetails, getIsNumberTyped, getIsDeleteTyped } from './index';
+import { getKeyValue } from '../../utils/Common';
 export function getChangedDay(values, event, focusOrders, keyActions) {
   const {
     keyCode,
@@ -45,7 +46,7 @@ export function getChangedDay(values, event, focusOrders, keyActions) {
       newDay -= 1;
     }
   } else if (getIsNumberTyped(event)) {
-    const keyString = String.fromCharCode(which);
+    const keyString = getKeyValue(event);
     let newValue = isNewType ? keyString : day.toString() + keyString;
     newValue = Number.parseInt(newValue);
 

package/es/DateTime/dateFormatUtils/index.js

@@ -1,13 +1,11 @@
 /* eslint-disable no-param-reassign */
 
-/** * Libraries ** */
-import datetime from '@zohodesk/datetimejs';
 /** * Methods ** */
-
 import { getMonthEnd } from '../../utils/datetime/common';
 /** * Constants ** */
 
 import { flags, INVALID_DATE } from '../constants';
+import { getDateText } from './dateFormat';
 export function convertYearToTwoDigit(year) {
   return parseInt(year.toString().slice(-2));
 }
@@ -46,7 +44,7 @@ export function getIsNumberTyped(event) {
     shiftKey
   } = event;
 
-  if (keyCode >= 48 && keyCode <= 57 && !ctrlKey && !metaKey && !shiftKey) {
+  if ((keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105) && !ctrlKey && !metaKey && !shiftKey) {
     return true;
   }
 
@@ -235,7 +233,7 @@ export function getIsCurrentYear(_ref) {
   let isCurrentYear = false;
 
   if (value && value !== INVALID_DATE) {
-    const dateObj = isDateTime ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : datetime.toDate(value);
+    const dateObj = getDateText(value, isDateTime, timeZone);
     const currentDateObj = new Date();
     const currentYear = currentDateObj.getFullYear();
     const selectedYear = dateObj.getFullYear();

package/es/DateTime/dateFormatUtils/monthChange.js

@@ -1,5 +1,6 @@
 /** * Methods ** */
 import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getMonthDetails, getDayEnd } from './index';
+import { getKeyValue } from '../../utils/Common';
 export function getChangedMonth(values, event, focusOrders, keyActions) {
   const {
     keyCode,
@@ -43,7 +44,7 @@ export function getChangedMonth(values, event, focusOrders, keyActions) {
       newMonth -= 1;
     }
   } else if (getIsNumberTyped(event)) {
-    const keyString = String.fromCharCode(which);
+    const keyString = getKeyValue(event);
     let newValue = isNewType ? keyString : month.toString() + keyString;
     newValue = Number.parseInt(newValue);
 

package/es/DateTime/dateFormatUtils/timeChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
 import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from './index';
-import { getIsEmptyValue } from '../../utils/Common';
+import { getKeyValue, getIsEmptyValue } from '../../utils/Common';
 export function getChangedHour(values, event, focusOrders, keyActions) {
   let {
     is24Hour = false
@@ -43,7 +43,7 @@ export function getChangedHour(values, event, focusOrders, keyActions) {
       newHour -= 1;
     }
   } else if (getIsNumberTyped(event)) {
-    const keyString = String.fromCharCode(which);
+    const keyString = getKeyValue(event);
     let newValue = isNewType ? keyString : hour.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -118,7 +118,7 @@ export function getChangedMinute(values, event, focusOrders, keyActions) {
       newMinute -= 1;
     }
   } else if (getIsNumberTyped(event)) {
-    const keyString = String.fromCharCode(which);
+    const keyString = getKeyValue(event);
     let newValue = isNewType ? keyString : minute.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -194,7 +194,7 @@ export function getChangedNoon(values, event, focusOrders
       newNoon = allowedValues[currentNoonIndex - 1];
     }
   } else if (getIsNoonValueTyped(event)) {
-    const keyString = String.fromCharCode(which); // let newValue = isNewType ? keyString : noon.toString() + keyString;
+    const keyString = getKeyValue(event).toUpperCase(); // let newValue = isNewType ? keyString : noon.toString() + keyString;
 
     const newValue = keyString;
     const needChangeNoon = newNoon.indexOf(newValue) === -1 ? true : false;

package/es/DateTime/dateFormatUtils/yearChange.js

@@ -1,5 +1,6 @@
 /** * Methods ** */
 import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from './index';
+import { getKeyValue } from '../../utils/Common';
 export function getChangedYear(values, event, focusOrders, keyActions, _ref) {
   let {
     yearInfo
@@ -65,7 +66,7 @@ export function getChangedYear(values, event, focusOrders, keyActions, _ref) {
       newYear -= 1;
     }
   } else if (getIsNumberTyped(event)) {
-    const keyString = String.fromCharCode(which);
+    const keyString = getKeyValue(event);
     let newValue = isNewType ? keyString : year.toString() + keyString;
     const newValueString = newValue || '';
     newValue = Number.parseInt(newValue);

package/es/DateTime/props/defaultProps.js

@@ -48,4 +48,10 @@ export const DateWidget_defaultProps = {
 export const YearView_defaultProps = {
   dataId: 'dateContainer',
   needBorder: true
+};
+export const DateTimePopupFooter_defaultProps = {
+  dataId: 'DateTimePopupFooter'
+};
+export const Time_defaultProps = {
+  dataId: 'Time'
 };

package/es/DateTime/props/propTypes.js

@@ -6,7 +6,12 @@ export const CalendarView_propTypes = {
   month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   needBorder: PropTypes.bool,
   onSelect: PropTypes.func,
-  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  dayNames: PropTypes.array,
+  dayNamesShort: PropTypes.array,
+  todayMonth: PropTypes.string,
+  todayDate: PropTypes.string,
+  todayYear: PropTypes.string
 };
 export const Span_propTypes = {
   dataId: PropTypes.string,
@@ -63,7 +68,11 @@ export const DateTime_propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   is24Hour: PropTypes.bool,
   isDefaultPosition: PropTypes.bool,
-  isToday: PropTypes.bool
+  customDateFormat: PropTypes.string,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.string,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string
 };
 export const DateWidget_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -124,12 +133,55 @@ export const DateWidget_propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   boxSize: PropTypes.string,
-  onError: PropTypes.func
+  onError: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.array,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string,
+  a11y: PropTypes.object
 };
 export const YearView_propTypes = {
-  dataId: PropTypes.string,
-  needBorder: PropTypes.bool,
   onSelectMonth: PropTypes.func,
   onSelectYear: PropTypes.func,
-  viewedYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  viewedYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  viewedMonth: PropTypes.string,
+  monthNamesShort: PropTypes.array,
+  isMonthOpen: PropTypes.bool
+};
+export const DateTimePopupFooter_propTypes = {
+  submitText: PropTypes.string,
+  onSubmit: PropTypes.func,
+  cancelText: PropTypes.string,
+  onCancel: PropTypes.func,
+  dataId: PropTypes.string
+};
+export const DateTimePopupHeader_propTypes = {
+  onOpenYearView: PropTypes.func,
+  showMonthTxt: PropTypes.string,
+  isYearView: PropTypes.bool,
+  prevMonthTitleText: PropTypes.string,
+  nextMonthTitleText: PropTypes.string,
+  onModifyCalendar: PropTypes.func
+};
+export const DaysRow_propTypes = {
+  dayNames: PropTypes.array,
+  dayNamesShort: PropTypes.object
+};
+export const Time_propTypes = {
+  timeText: PropTypes.string,
+  dataId: PropTypes.string,
+  hourSuggestions: PropTypes.array,
+  onHourSelect: PropTypes.func,
+  hours: PropTypes.string,
+  hourEmptyText: PropTypes.string,
+  needResponsive: PropTypes.bool,
+  minSuggestions: PropTypes.array,
+  onMinutesSelect: PropTypes.func,
+  mins: PropTypes.string,
+  minuteEmptyText: PropTypes.string,
+  ampmSuggestions: PropTypes.array,
+  onAmPmSelect: PropTypes.func,
+  amPm: PropTypes.string,
+  is24Hour: PropTypes.bool
 };

package/es/DropBox/DropBox.js

@@ -1,15 +1,14 @@
-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); }
-
-import React, { useRef, Fragment, useContext } from 'react';
+import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Modal from '../Modal/Modal';
-import { getLibraryConfig } from '../Provider/Config';
+import Modal from '../Modal/Modal'; // import { getLibraryConfig } from '../Provider/Config';
+
 import LibraryContext from '../Provider/LibraryContextInit';
 import cssJSLogic from './css/cssJSLogic';
 import DropBoxElement from './DropBoxElement/DropBoxElement';
 import { DropBoxDefaultProps } from './props/defaultProps';
 import { DropBoxPropTypes } from './props/propTypes';
 import { stopPropagation } from './../utils/Common';
+import isMobilePopover from './utils/isMobilePopover';
 import style from './css/DropBox.module.css';
 export default function DropBox(props) {
   const dropBoxRef = useRef(null);
@@ -28,51 +27,41 @@ export default function DropBox(props) {
     focusScopeProps = {}
   } = customProps;
   const {
-    autoFocus = true,
-    restoreFocus = true,
-    needArrowLoop = true,
-    needTabLoop = false,
-    enableEnterAction = true
+    needAutoFocus = true,
+    needRestoreFocus = true,
+    needListNavigation = true,
+    needFocusLoop = false,
+    needEnterAction = true
   } = focusScopeProps;
   const {
     direction
   } = DropBoxContext || {};
-  let windowWidth,
-      mobileWidth = getLibraryConfig('mobileWidth'),
-      isModel = false;
-
-  if (needResponsive) {
-    windowWidth = window.innerWidth;
-
-    if (windowWidth <= mobileWidth) {
-      isModel = true;
-    }
-  }
-
+  let isModel = isMobilePopover(needResponsive);
   const {
     zIndexStyle
   } = cssJSLogic(props);
-  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, _extends({
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
     onClose: onClose,
     elementRef: dropBoxRef,
-    autoFocus: autoFocus,
-    restoreFocus: restoreFocus,
-    needArrowLoop: needArrowLoop,
-    needTabLoop: needTabLoop,
-    enableEnterAction: enableEnterAction
-  }, focusScopeProps), /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    needAutoFocus: needAutoFocus,
+    needRestoreFocus: needRestoreFocus,
+    needListNavigation: needListNavigation,
+    needFocusLoop: needFocusLoop,
+    needEnterAction: needEnterAction,
+    ...focusScopeProps
+  }, /*#__PURE__*/React.createElement(DropBoxElement, {
     isModel: isModel,
-    direction: direction
-  }, props, {
+    direction: direction,
+    ...props,
     zIndexStyle: zIndexStyle,
     subContainerRef: dropBoxRef
-  }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+  })) : /*#__PURE__*/React.createElement(DropBoxElement, {
     isModel: isModel,
     subContainerRef: dropBoxRef,
-    direction: direction
-  }, props, {
+    direction: direction,
+    ...props,
     zIndexStyle: zIndexStyle
-  }));
+  });
   return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -4,7 +4,7 @@ import cssJSLogic from './css/cssJSLogic';
 import { positionMapping } from '../DropBoxPositionMapping.json';
 import { DropBoxElementDefaultProps } from './props/defaultProps';
 import { DropBoxElementPropTypes } from './props/propTypes';
-import { mergeStyle } from '../../utils';
+import { mergeStyle } from '@zohodesk/utils';
 import style from './css/DropBoxElement.module.css';
 export default function DropBoxElement(props) {
   let {
@@ -107,7 +107,8 @@ export default function DropBoxElement(props) {
     "aria-multiselectable": ariaMultiselectable,
     "aria-labelledby": ariaLabelledby,
     tabIndex: tabIndex,
-    onAnimationEnd: isAnimate && FireOnAnimationEnd
+    onAnimationEnd: isAnimate && FireOnAnimationEnd,
+    "data-a11y-focus-main-area": true
   }, /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
     className: `${subContainerClass} ${style[`${palette}Palette`]}`,