@zohodesk/components 1.0.0-temp-210.3 → 1.0.0-temp-212

package/README.md

@@ -34,9 +34,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.2.48
 
-- **Popup**
-  - `isOutsideScrollBlocked` prop supported - Scroll blocking behviours supported
-  - Fixed popup re-positioning on window resize not working properly - Issue fixed
+- **ResizeObserver**
+
+  - The ResizeObserver PolyFill code has been removed, and a separate copy with the PolyFill included is saved under the filename ResizeObserverWithPolyfill.js
+  
 
 # 1.2.47
 
@@ -103,7 +104,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **LibraryContext** - coloredTagVariant, hasTagColorInheritedToText properties added
 - **Tag** - customAttributes prop supported
-- **TextBoxIcon** - needInputFocusOnWrapperClick prop supported
+- **TextBoxIcon** - needInputFocusOnParentClick prop supported
 
 # 1.2.38
 

package/es/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Accordion_defaultProps } from "./props/defaultProps";
-import { Accordion_propTypes } from "./props/propTypes";
+import { Accordion_defaultProps } from './props/defaultProps';
+import { Accordion_propTypes } from './props/propTypes';
 export default class Accordion extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/AccordionItem.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from "./props/defaultProps";
-import { AccordionItem_propTypes } from "./props/propTypes";
-import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
-import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
+import { AccordionItem_defaultProps } from './props/defaultProps';
+import { AccordionItem_propTypes } from './props/propTypes';
+import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
+import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 export default class AccordionItem extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/__tests__/Accordion.spec.js

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

package/es/Accordion/__tests__/AccordionItem.spec.js

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

package/es/Accordion/index.js

@@ -1,2 +1,2 @@
-export { default as Accordion } from "./Accordion";
-export { default as AccordionItem } from "./AccordionItem";
+export { default as Accordion } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';

package/es/Animation/Animation.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
-import { animationStyle } from "./utils";
+import { animationStyle } from './utils';
 export default class Animation extends React.Component {
   constructor(props) {
     super(props);

package/es/Animation/__tests__/Animation.spec.js

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

package/es/Animation/utils.js

@@ -1,4 +1,4 @@
-import style from "../common/transition.module.css";
+import style from '../common/transition.module.css';
 export const animationStyle = {
   zoomIn: {
     enter: style.zoomInEnter,

package/es/AppContainer/AppContainer.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Tooltip from "../Tooltip/Tooltip";
-import "../common/basic.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Tooltip from '../Tooltip/Tooltip';
+import '../common/basic.module.css';
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
@@ -11,10 +11,10 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../common/a11y.module.css";
-import "../common/boxShadow.module.css";
-import style from "./AppContainer.module.css";
-import { getLibraryConfig, setLibraryConfig } from "../Provider/Config";
+import '../common/a11y.module.css';
+import '../common/boxShadow.module.css';
+import style from './AppContainer.module.css';
+import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);

package/es/AppContainer/__tests__/AppContainer.spec.js

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

package/es/Avatar/Avatar.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getInitial } from "../utils/getInitial";
-import AvatarSize from "../Provider/AvatarSize";
-import style from "./Avatar.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getInitial } from '../utils/getInitial';
+import AvatarSize from '../Provider/AvatarSize';
+import style from './Avatar.module.css';
 /*
 1. need to change name into firstName lastName
 2. pattern support via context as well as props

package/es/Avatar/__tests__/Avatar.spec.js

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

package/es/AvatarTeam/AvatarTeam.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import Avatar from "../Avatar/Avatar";
-import style from "./AvatarTeam.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import Avatar from '../Avatar/Avatar';
+import style from './AvatarTeam.module.css';
 /* once avatar support firstname lastname and pattern
 pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
 

package/es/AvatarTeam/__tests__/AvatarTeam.spec.js

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

package/es/Button/Button.js

@@ -1,9 +1,10 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+import React, { useContext } from 'react';
+import LibraryContext from '../Provider/LibraryContextInit';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import style from "./css/Button.module.css";
+import style from './css/Button.module.css';
 /*
 Button text and children props?
 use children for both cases
@@ -29,13 +30,19 @@ export default function Button(props) {
     a11y,
     id
   } = props;
+  const {
+    a11y_strikeThroughButtons
+  } = useContext(LibraryContext);
   const finalStyle = mergeStyle(style, customStyle);
+  const buttonProps = { ...(props || {}),
+    a11y_strikeThroughButtons
+  };
   const {
     buttonClass,
     loaderParentClass,
     loaderChildClass
   } = cssJSLogic({
-    props,
+    buttonProps,
     style: finalStyle
   });
   let statusLower = status.toLowerCase();

package/es/Button/__tests__/Button.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from "../Button";
+import Button from '../Button';
 import { render } from "@testing-library/react";
 describe('Button component', () => {
   test('Should be render with the basic set of default props', () => {

package/es/Button/css/Button.module.css

@@ -525,4 +525,82 @@
 
 .loader{
   color:var(--dot_mirror)
+}
+[dir=ltr] .primaryStrike {
+  background: repeating-linear-gradient(120deg, #98c9f4, #98c9f4 1px, #39a2ff 0px, #39a2ff 8px);
+}
+[dir=rtl] .primaryStrike {
+  background: repeating-linear-gradient(-120deg, #98c9f4, #98c9f4 1px, #39a2ff 0px, #39a2ff 8px);
+}
+
+[dir=ltr] .primaryfilledStrike {
+  background: repeating-linear-gradient(120deg, #3478e5, #3478e5 1px, #1a57cc 0px, #1a57cc 8px);
+}
+
+[dir=rtl] .primaryfilledStrike {
+  background: repeating-linear-gradient(-120deg, #3478e5, #3478e5 1px, #1a57cc 0px, #1a57cc 8px);
+}
+
+[dir=ltr] .dangerStrike {
+  background: repeating-linear-gradient(120deg, #f8b1b1, #f8b1b1 1px, #ff5252 0px, #ff5252 8px);
+}
+
+[dir=rtl] .dangerStrike {
+  background: repeating-linear-gradient(-120deg, #f8b1b1, #f8b1b1 1px, #ff5252 0px, #ff5252 8px);
+}
+
+[dir=ltr] .dangerfilledStrike {
+  background: repeating-linear-gradient(120deg, #e53939, #e53939 1px, #cc2929 0px, #cc2929 8px);
+}
+
+[dir=rtl] .dangerfilledStrike {
+  background: repeating-linear-gradient(-120deg, #e53939, #e53939 1px, #cc2929 0px, #cc2929 8px);
+}
+
+[dir=ltr] .secondaryStrike {
+  background: repeating-linear-gradient(120deg, #d1d1d1, #d1d1d1 1px, #a8a8a8 0px, #a8a8a8 8px);
+}
+
+[dir=rtl] .secondaryStrike {
+  background: repeating-linear-gradient(-120deg, #d1d1d1, #d1d1d1 1px, #a8a8a8 0px, #a8a8a8 8px);
+}
+
+[dir=ltr] .secondaryfilledStrike {
+  background: repeating-linear-gradient(120deg, #e6e6e6, #e6e6e6 1px, #cccccc 0px, #cccccc 8px);
+}
+
+[dir=rtl] .secondaryfilledStrike {
+  background: repeating-linear-gradient(-120deg, #e6e6e6, #e6e6e6 1px, #cccccc 0px, #cccccc 8px);
+}
+
+[dir=ltr] .tertiaryfilledStrike {
+  background: repeating-linear-gradient(120deg, #6e6e6e, #6e6e6e 1px, #545454 0px, #545454 8px);
+}
+
+[dir=rtl] .tertiaryfilledStrike {
+  background: repeating-linear-gradient(-120deg, #6e6e6e, #6e6e6e 1px, #545454 0px, #545454 8px);
+}
+
+[dir=ltr] .plainprimaryStrike {
+  background: repeating-linear-gradient(120deg, #add3ff, #add3ff 1px, #73b4ff 0px, #73b4ff 8px);
+}
+
+[dir=rtl] .plainprimaryStrike {
+  background: repeating-linear-gradient(-120deg, #add3ff, #add3ff 1px, #73b4ff 0px, #73b4ff 8px);
+}
+
+[dir=ltr] .plainsecondaryStrike {
+  background: repeating-linear-gradient(120deg, #e0e0e0, #e0e0e0 1px, #bcbcbc 0px, #bcbcbc 8px);
+}
+
+[dir=rtl] .plainsecondaryStrike {
+  background: repeating-linear-gradient(-120deg, #e0e0e0, #e0e0e0 1px, #bcbcbc 0px, #bcbcbc 8px);
+}
+
+[dir=ltr] .successfilledStrike {
+  background: repeating-linear-gradient(120deg, #81e59e, #81e59e 1px, #3bc765 0px, #3bc765 8px);
+}
+
+[dir=rtl] .successfilledStrike {
+  background: repeating-linear-gradient(-120deg, #81e59e, #81e59e 1px, #3bc765 0px, #3bc765 8px);
 }

package/es/Button/css/cssJSLogic.js

@@ -1,7 +1,7 @@
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(_ref) {
   let {
-    props,
+    buttonProps,
     style
   } = _ref;
   let {
@@ -12,8 +12,11 @@ export default function cssJSLogic(_ref) {
     size,
     children,
     palette,
-    status
-  } = props;
+    status,
+    disabled,
+    a11y_strikeThroughButtons
+  } = buttonProps;
+  console.log('a11y buttonProps :', buttonProps);
   let {
     customButton = '',
     customStatus = '',
@@ -30,6 +33,7 @@ export default function cssJSLogic(_ref) {
     [style[size.toLowerCase()]]: needAppearance && !children,
     [style[`${size}Btn`]]: needAppearance && children,
     [style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
+    [style[`${paletteLower}Strike`]]: disabled && a11y_strikeThroughButtons,
     [style.loader]: !!needAppearance && statusLower !== 'none'
   });
   let loaderParentClass = compileClassNames({

package/es/Button/index.js

@@ -1,2 +1,2 @@
-export { default as Button } from "./Button";
-export { default as ButtonPropTypes } from "./props/propTypes";
+export { default as Button } from './Button';
+export { default as ButtonPropTypes } from './props/propTypes';

package/es/Button/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { dummyFunction } from "../../utils/dummyFunction";
+import { dummyFunction } from '../../utils/dummyFunction';
 export const defaultProps = {
   children: null,
   dataId: 'buttonComp',

package/es/Buttongroup/Buttongroup.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./Buttongroup.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Buttongroup.module.css';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
 

package/es/Buttongroup/__tests__/Buttongroup.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Buttongroup from "../Buttongroup.js";
+import Buttongroup from '../Buttongroup.js';
 import { render } from "@testing-library/react";
 describe('Buttongrop - ', () => {
   test('rendering the default props', () => {

package/es/Card/Card.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from "./props/propTypes";
-import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from "./props/defaultProps";
-import { Container, Box } from "../Layout";
-import { getLibraryConfig } from "../Provider/Config";
-import style from "./Card.module.css";
+import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
+import { Container, Box } from '../Layout';
+import { getLibraryConfig } from '../Provider/Config';
+import style from './Card.module.css';
 /* eslint-disable react/forbid-component-props */
 
 /*

package/es/Card/__tests__/Card.spec.js

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

package/es/Card/index.js

@@ -1,4 +1,4 @@
-export { default as Card } from "./Card";
-export { CardHeader } from "./Card";
-export { CardContent } from "./Card";
-export { CardFooter } from "./Card";
+export { default as Card } from './Card';
+export { CardHeader } from './Card';
+export { CardContent } from './Card';
+export { CardFooter } from './Card';

package/es/CheckBox/CheckBox.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { propTypes } from "./props/propTypes";
-import { defaultProps } from "./props/defaultProps";
-import Label from "../Label/Label";
-import { Container, Box } from "../Layout";
-import CssProvider from "../Provider/CssProvider";
-import style from "./CheckBox.module.css";
+import { propTypes } from './props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import Label from '../Label/Label';
+import { Container, Box } from '../Layout';
+import CssProvider from '../Provider/CssProvider';
+import style from './CheckBox.module.css';
 export default class CheckBox extends React.Component {
   constructor(props) {
     super(props);

package/es/CheckBox/__tests__/CheckBox.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CheckBox from "../CheckBox";
+import CheckBox from '../CheckBox';
 import { render } from "@testing-library/react";
 describe('CheckBox component', () => {
   test('Should be render with the basic set of default props', () => {

package/es/DateTime/CalendarView.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Span_propTypes, CalendarView_propTypes } from "./props/propTypes";
-import { CalendarView_defaultProps, Span_defaultProps } from "./props/defaultProps";
-import { Container, Box } from "../Layout";
-import style from "./DateTime.module.css";
-import { getMonthEnd } from "../utils/datetime/common";
-import DaysRow from "./DaysRow";
+import { Span_propTypes, CalendarView_propTypes } from './props/propTypes';
+import { CalendarView_defaultProps, Span_defaultProps } from './props/defaultProps';
+import { Container, Box } from '../Layout';
+import style from './DateTime.module.css';
+import { getMonthEnd } from '../utils/datetime/common';
+import DaysRow from './DaysRow';
 /* eslint css-modules/no-unused-class: [0, { markAsUsed: ['container', 'header', 'thArrowConatainer', 'thArrow', 'thMonYear', 'days', 'daysStr', 'timesection', 'timeStr', 'dropDownContainer', 'dropDown', 'footer', 'space'] }] */
 
 export default class CalendarView extends React.PureComponent {

package/es/DateTime/DateTime.js

@@ -2,22 +2,22 @@
 
 /* eslint-disable react/forbid-component-props */
 import React from 'react';
-import { DateTime_propTypes } from "./props/propTypes";
-import { DateTime_defaultProps } from "./props/defaultProps";
+import { DateTime_propTypes } from './props/propTypes';
+import { DateTime_defaultProps } from './props/defaultProps';
 import datetime from '@zohodesk/datetimejs';
-import CalendarView from "./CalendarView";
-import YearView from "./YearView";
-import DateTimePopupHeader from "./DateTimePopupHeader";
-import DateTimePopupFooter from "./DateTimePopupFooter";
-import Time from "./Time";
-import style from "./DateTime.module.css";
-import { formatDate, getMonthEnd } from "../utils/datetime/common";
-import { getIsEmptyValue } from "../utils/Common";
-import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from "./constants";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { Box } from "../Layout";
-import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from "./dateFormatUtils";
-import { getDateText } from "./dateFormatUtils/dateFormat";
+import CalendarView from './CalendarView';
+import YearView from './YearView';
+import DateTimePopupHeader from './DateTimePopupHeader';
+import DateTimePopupFooter from './DateTimePopupFooter';
+import Time from './Time';
+import style from './DateTime.module.css';
+import { formatDate, getMonthEnd } from '../utils/datetime/common';
+import { getIsEmptyValue } from '../utils/Common';
+import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from './constants';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+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] : [];

package/es/DateTime/DateTimePopupFooter.js

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

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'] }] */

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 {