@zohodesk/components 1.0.0-temp-214 → 1.0.0-temp-215

package/es/DateTime/DateTimePopupHeader.js

@@ -2,15 +2,15 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DateTimePopupHeader_propTypes } from './props/propTypes';
+import { DateTimePopupHeader_propTypes } from "./props/propTypes";
 /** ** Components *** */
 
-import { Container, Box } from '../Layout';
+import { Container, Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import Heading from '../Heading/Heading';
+import Heading from "../Heading/Heading";
 /** ** CSS *** */
 
-import style from './DateTime.module.css';
+import style from "./DateTime.module.css";
 
 class Span extends React.PureComponent {
   constructor(props) {

package/es/DateTime/DateWidget.js

@@ -1,31 +1,31 @@
 /**** Libraries ****/
 import React from 'react';
-import { DateWidget_propTypes } from './props/propTypes';
-import { DateWidget_defaultProps } from './props/defaultProps';
+import { DateWidget_propTypes } from "./props/propTypes";
+import { DateWidget_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
-import DateTime from './DateTime';
-import Popup from '../Popup/Popup';
+import DateTime from "./DateTime";
+import Popup from "../Popup/Popup";
 import { Icon } from '@zohodesk/icons';
-import { Container } from '../Layout';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
+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';
-import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate, getDateText } from './dateFormatUtils/dateFormat';
-import { getChangedDay } from './dateFormatUtils/dayChange';
-import { getChangedMonth } from './dateFormatUtils/monthChange';
-import { getChangedYear } from './dateFormatUtils/yearChange';
-import { getChangedHour, getChangedMinute, getChangedNoon } from './dateFormatUtils/timeChange';
-import { getIsEmptyValue } from '../utils/Common';
+import validator from "./validator";
+import { formatDate } from "../utils/datetime/common";
+import { getIsSupportedKey, arrayIsNotEqual } from "./dateFormatUtils";
+import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate, getDateText } from "./dateFormatUtils/dateFormat";
+import { getChangedDay } from "./dateFormatUtils/dayChange";
+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'] }] */
@@ -128,7 +128,8 @@ class DateWidgetComponent extends React.Component {
       dateFormat = '',
       is24Hour,
       isHideCurrentYear,
-      getPopupProps
+      getPopupProps,
+      onDropboxClose
     } = this.props;
 
     if (validation && validation.validate) {
@@ -162,6 +163,8 @@ class DateWidgetComponent extends React.Component {
     if (prevProps.isPopupReady !== isPopupReady) {
       if (isPopupReady) {
         this.resetLocalDate && this.resetLocalDate();
+      } else {
+        typeof onDropboxClose === 'function' && onDropboxClose();
       }
 
       if (getPopupProps) {
@@ -1004,6 +1007,8 @@ class DateWidgetComponent extends React.Component {
       a11y,
       boxSize,
       onError,
+      renderCustomHeader,
+      renderCustomFooter,
       weekStartDay,
       holidays,
       customProps = {}
@@ -1108,6 +1113,8 @@ class DateWidgetComponent extends React.Component {
       dropBoxPortalId: dropBoxPortalId,
       boxSize: boxSize,
       onError: onError,
+      renderCustomHeader: renderCustomHeader,
+      renderCustomFooter: renderCustomFooter,
       customProps: DateTimeProps,
       weekStartDay: weekStartDay,
       holidays: holidays

package/es/DateTime/DaysRow.js

@@ -2,13 +2,13 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DaysRow_propTypes } from './props/propTypes';
+import { DaysRow_propTypes } from "./props/propTypes";
 /** ** CSS *** */
 
-import style from './DateTime.module.css';
+import style from "./DateTime.module.css";
 /** ** Components *** */
 
-import { Container, Box } from '../Layout';
+import { Container, Box } from "../Layout";
 export default class DaysRow extends PureComponent {
   render() {
     const {

package/es/DateTime/Time.js

@@ -2,15 +2,15 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { Time_propTypes } from './props/propTypes';
-import { Time_defaultProps } from './props/defaultProps';
+import { Time_propTypes } from "./props/propTypes";
+import { Time_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
-import { Container, Box } from '../Layout';
-import Select from '../Select/Select';
+import { Container, Box } from "../Layout";
+import Select from "../Select/Select";
 /** ** CSS *** */
 
-import style from './DateTime.module.css';
+import style from "./DateTime.module.css";
 export default class Time extends PureComponent {
   render() {
     const {

package/es/DateTime/YearView.js

@@ -1,19 +1,19 @@
 /**** Libraries ****/
 import React from 'react';
-import { YearView_propTypes } from './props/propTypes';
-import { YearView_defaultProps } from './props/defaultProps';
+import { YearView_propTypes } from "./props/propTypes";
+import { YearView_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
 import { Virtualizer } from '@zohodesk/virtualizer';
-import { Container, Box } from '../Layout';
+import { Container, Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import Heading from '../Heading/Heading';
+import Heading from "../Heading/Heading";
 /**** CSS ****/
 
-import style from './YearView.module.css';
+import style from "./YearView.module.css";
 /**** Methods ****/
 
-import { getYearDetails } from './dateFormatUtils';
+import { getYearDetails } from "./dateFormatUtils";
 const monthNamesData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
 function getYears() {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import CalendarView from '../CalendarView';
+import CalendarView from "../CalendarView";
 describe('CalendarView', () => {
   test('rendering the defult props', () => {
     const {

package/es/DateTime/__tests__/DateTime.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DateTime from '../DateTime';
+import DateTime from "../DateTime";
 describe('DateTime', () => {
   test('rendering the defult props', () => {
     const {

package/es/DateTime/__tests__/DateTimePopupFooter.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DateTimePopupFooter from '../DateTimePopupFooter';
+import DateTimePopupFooter from "../DateTimePopupFooter";
 describe('DateTimePopupFooter', () => {
   test('rendering the defult props', () => {
     const {

package/es/DateTime/__tests__/DateTimePopupHeader.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DateTimePopupHeader from '../DateTimePopupHeader';
+import DateTimePopupHeader from "../DateTimePopupHeader";
 describe('DateTimePopupHeader', () => {
   test('rendering the defult props', () => {
     const {

package/es/DateTime/__tests__/DateWidget.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DateWidget from '../DateWidget';
+import DateWidget from "../DateWidget";
 describe('DateWidget', () => {
   test('rendering the defult props', () => {
     const {

package/es/DateTime/__tests__/DaysRow.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DaysRow from '../DaysRow';
+import DaysRow from "../DaysRow";
 describe('DaysRow', () => {
   test('rendering the defult props', () => {
     const {

package/es/DateTime/__tests__/Time.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Time from '../Time';
+import Time from "../Time";
 describe('Time', () => {
   test('rendering the defult props', () => {
     const {

package/es/DateTime/__tests__/YearView.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import YearView from '../YearView';
+import YearView from "../YearView";
 describe('YearView', () => {
   test('rendering the defult props', () => {
     const {

package/es/DateTime/dateFormatUtils/dateFormat.js

@@ -4,13 +4,13 @@
 import datetime from '@zohodesk/datetimejs';
 /** * Methods ** */
 
-import { getDayEnd, convertYearToTwoDigit, addZero, getMonthDetails, getYearDetails, getDayDetails, getHourDetails, getMinuteDetails, getNoonDetails, getIsCurrentYear, removeYearPattern } from './index';
-import { getIsEmptyValue } from '../../utils/Common';
-import { formatDate } from '../../utils/datetime/common';
+import { getDayEnd, convertYearToTwoDigit, addZero, getMonthDetails, getYearDetails, getDayDetails, getHourDetails, getMinuteDetails, getNoonDetails, getIsCurrentYear, removeYearPattern } from "./index";
+import { getIsEmptyValue } from "../../utils/Common";
+import { formatDate } from "../../utils/datetime/common";
 /** * Constants ** */
 
 import { defaultFormat, supportedPatterns, // patternChangeStr,
-patternSplitStr, INCONSTANT, flags } from '../constants';
+patternSplitStr, INCONSTANT, flags } from "../constants";
 
 function getDateFormatString() {
   let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

package/es/DateTime/dateFormatUtils/dayChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
-import { getIsNewValueType, getDayDetails, getIsNumberTyped, getIsDeleteTyped } from './index';
-import { getKeyValue } from '../../utils/Common';
+import { getIsNewValueType, getDayDetails, getIsNumberTyped, getIsDeleteTyped } from "./index";
+import { getKeyValue } from "../../utils/Common";
 export function getChangedDay(values, event, focusOrders, keyActions) {
   const {
     keyCode,

package/es/DateTime/dateFormatUtils/index.js

@@ -1,11 +1,11 @@
 /* eslint-disable no-param-reassign */
 
 /** * Methods ** */
-import { getMonthEnd } from '../../utils/datetime/common';
+import { getMonthEnd } from "../../utils/datetime/common";
 /** * Constants ** */
 
-import { flags, INVALID_DATE } from '../constants';
-import { getDateText } from './dateFormat';
+import { flags, INVALID_DATE } from "../constants";
+import { getDateText } from "./dateFormat";
 export function convertYearToTwoDigit(year) {
   return parseInt(year.toString().slice(-2));
 }

package/es/DateTime/dateFormatUtils/monthChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
-import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getMonthDetails, getDayEnd } from './index';
-import { getKeyValue } from '../../utils/Common';
+import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getMonthDetails, getDayEnd } from "./index";
+import { getKeyValue } from "../../utils/Common";
 export function getChangedMonth(values, event, focusOrders, keyActions) {
   const {
     keyCode,

package/es/DateTime/dateFormatUtils/timeChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
-import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from './index';
-import { getKeyValue, getIsEmptyValue } from '../../utils/Common';
+import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from "./index";
+import { getKeyValue, getIsEmptyValue } from "../../utils/Common";
 export function getChangedHour(values, event, focusOrders, keyActions) {
   let {
     is24Hour = false

package/es/DateTime/dateFormatUtils/yearChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
-import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from './index';
-import { getKeyValue } from '../../utils/Common';
+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

package/es/DateTime/index.js

@@ -1 +1 @@
-export { default as DateWidget } from './DateWidget';
+export { default as DateWidget } from "./DateWidget";

package/es/DateTime/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { dataFormatList } from '../dateFormatUtils/dateFormats';
+import { dataFormatList } from "../dateFormatUtils/dateFormats";
 export const CalendarView_propTypes = {
   dataId: PropTypes.string,
   date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -75,6 +75,8 @@ export const DateTime_propTypes = {
   targetOffset: PropTypes.string,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string,
+  renderCustomHeader: PropTypes.node,
+  renderCustomFooter: PropTypes.node,
   customProps: PropTypes.object,
   weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
   holidays: PropTypes.arrayOf(PropTypes.number)
@@ -146,6 +148,9 @@ export const DateWidget_propTypes = {
   dropBoxPortalId: PropTypes.string,
   a11y: PropTypes.object,
   getPopupProps: PropTypes.func,
+  renderCustomHeader: PropTypes.node,
+  renderCustomFooter: PropTypes.node,
+  onDropboxClose: PropTypes.func,
   customProps: PropTypes.object,
   weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
   holidays: PropTypes.arrayOf(PropTypes.number)

package/es/DateTime/validator.js

@@ -1,5 +1,5 @@
-import typeChecker from './typeChecker';
-import { clone } from './objectUtils';
+import typeChecker from "./typeChecker";
+import { clone } from "./objectUtils";
 const validator = {
   combinePropsValidation: (currentProps, type, validateOn, validationObj, defaultCheckPropsRules, defaultValidateRules) => {
     let newType = type.toLowerCase();

package/es/DropBox/DropBox.js

@@ -1,15 +1,15 @@
 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';
+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);
   const DropBoxContext = useContext(LibraryContext);

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,12 +1,12 @@
 /* eslint-disable react/no-unknown-property */
 import React from 'react';
-import useDropboxPosCalc from './useDropboxPosCalc';
-import cssJSLogic from './css/cssJSLogic';
-import { positionMapping } from '../DropBoxPositionMapping.js';
-import { DropBoxElementDefaultProps } from './props/defaultProps';
-import { DropBoxElementPropTypes } from './props/propTypes';
+import useDropboxPosCalc from "./useDropboxPosCalc";
+import cssJSLogic from "./css/cssJSLogic";
+import { positionMapping } from "../DropBoxPositionMapping.js";
+import { DropBoxElementDefaultProps } from "./props/defaultProps";
+import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';
-import style from './css/DropBoxElement.module.css';
+import style from "./css/DropBoxElement.module.css";
 export default function DropBoxElement(props) {
   let {
     children,
@@ -103,6 +103,7 @@ export default function DropBoxElement(props) {
     style: inlineStyle,
     "data-tour": tourId,
     "data-position": boxPosition,
+    "data-boxdirection": boxDirection,
     id: htmlId,
     role: role,
     "aria-multiselectable": ariaMultiselectable,

package/es/DropBox/DropBoxElement/__tests__/DropBoxElement.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropBoxElement from '../DropBoxElement';
+import DropBoxElement from "../DropBoxElement";
 describe('DropBoxElement', () => {
   test('rendering the defult props', () => {
     const {