@zohodesk/components 1.0.0-temp-220.9 → 1.0.0-temp-225-1

package/README.md

@@ -1,36 +1,47 @@
 # DOT Style Guide
 
-Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
-
-# 1.3.4
-
-- **Popup**
-  - Fixed the auto-repositioning issue during fixed popup resize and improved the position calculation logic.
-
-- **Modal**
-  - Introduced the `Portal` component to act as a React portal.
-  - Refactored to use the new `Portal` component for rendering, resolving unwanted rendering issues.
-
-- **Dropbox**
-  - Updated to use the new `Portal` component for rendering, resolving unwanted rendering issues.
+In this Package, we Provide Some Basic Components to Build Web App
+
+- Avatar
+- AvatarTeam
+- Accordion
+- Animation
+- Button
+- Buttongroup
+- Card
+- CheckBox
+- DateTime
+- DropBox
+- Icon
+- Label
+- Layout
+- ListItem
+- MultiSelect
+- Popup
+- Radio
+- Responsive
+- Ribbon
+- Select
+- GroupSelect
+- Stencils
+- Switch
+- Tab
+- Tag
+- Textarea
+- TextBox
+- TextBoxIcon
+- Tooltip
 
 # 1.3.3
 
-- **Stencils**
-  - Added `isAnimated` prop to support Stencils without Animation.
-  - Added `square` shape in existing shape collection
-- **TabWrapper**
-  - Added `vertical-reverse, row-reverse` alignment suport in align propType
+- **ListItem**
+  - Added `SecondaryValue` prop to supported.
 
 # 1.3.2
 
 - **Popup**
   - Added `scrollDebounceTime` prop to support debounce control for fixed popup scroll behavior.
-- **VelocityAnimationGroup** - Added support for the following props:
-  - `onEnterComplete` - Callback triggered after enter animation completes.
-  - `onExitComplete` - Callback triggered after exit animation completes.
-  - `postEnterStyles` - Inline styles applied to the element once the enter animation has finished.  
-  
+
 # 1.3.1
 
 - **dropDownUtils** - The isObjectContainsSearchString function logic has been updated to use some instead of filter, and additional conditions have been added to prevent potential runtime issues.
@@ -38,7 +49,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 # 1.3.0
 
 - **AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar** - searchFields prop supported
--  **AdvancedMultiSelect, MultiSelectWithAvatar** - secondaryField prop supported
+- **AdvancedMultiSelect, MultiSelectWithAvatar** - secondaryField prop supported
 - **ListContainer** - align prop supported
 - **ListItemWithAvatar** - secondaryValue, lhsAlignContent prop supported
 - **ListItemWithCheckBox, ListItemWithIcon, ListItemWithRadio** - secondaryValue, lhsAlignContent, lhsJustifyContent prop supported
@@ -56,11 +67,11 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 # 1.2.61
 
-- **Textarea** -  Handled the default height and width appropriately based on the rows and cols props.
+- **Textarea** - Handled the default height and width appropriately based on the rows and cols props.
 
 # 1.2.60
 
-- **Textarea** -  Handled the default height and width appropriately based on the rows and cols props.
+- **Textarea** - Handled the default height and width appropriately based on the rows and cols props.
 
 # 1.2.59
 
@@ -73,23 +84,25 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 # 1.2.57
 
 - **Popup**
+
   - Fixed popup scroll behavior is now supported using the `isOutsideScrollBlocked` flag. When set to `false` (default).
 
 - **DropBoxElement**
   - **Attributes Added**: The `data-box-direction` and `data-arrow-position` attributes have been added to facilitate the use of component-level CSS selectors.
   - **CSS Selectors**: Added support for `arrow`, `paddingSpace`, `shadow`, and `boxdirection` to facilitate the behavior of the dropbox using CSS selectors.
-  
+
 # 1.2.56
 
-- **CheckBox** 
+- **CheckBox**
   - `data-selector-id` passing to Container component changed to `dataSelectorId`
 
 # 1.2.55
 
-- **ListItemWithAvatar** 
+- **ListItemWithAvatar**
+
   - `AvatarTeamProps` and `AvatarProps` props has been added under the `customProps` group.
 
-- **Tag** 
+- **Tag**
   - `avatarProps` and `iconProps` prop has been added under the `customProps` group.
 
 # 1.2.54
@@ -97,7 +110,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 - **Reverted 1.2.45 MultiSelect Fix**
   - The issue with the non-scrollable API call trigger in multiselect, introduced in version `1.2.45`, has been `reverted` in this version.
 
-
 # 1.2.53
 
 - **CheckBox** - Disabled State CheckBox Color Fixed
@@ -123,7 +135,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 - **DateTime (v0&v1), CalendarView (v0&v1)**
 
   - Week starting day customization support added with `weekStartDay` props and week holiday customization support with `holidays` prop
-  
+
 - **DateWidget (v0&v1)**
 
   - Support has been added for `weekStartDay`, `holidays` props
@@ -132,7 +144,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
   - `holidays` prop added for holiday column indication
 
-# 1.2.49 
+# 1.2.49
 
 - **Popup**
   - `isOutsideScrollBlocked` prop supported - Scroll blocking behaviours supported
@@ -145,7 +157,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 - **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
 
@@ -242,10 +253,10 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 - **MultiSelect**
 - `dataId` support has been added for the ResponsiveDropBox Component.
-- The `dataId` will be reflected as `dataId` with the suffix "_dropbox".
+- The `dataId` will be reflected as `dataId` with the suffix "\_dropbox".
 - **DateWidget**
 - `dataId` support has been added for the datePicker icon.
-- The `dataId` will be reflected as `dataId` with the suffix "_datePicker".
+- The `dataId` will be reflected as `dataId` with the suffix "\_datePicker".
 
 # 1.2.34
 
@@ -410,7 +421,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 # 1.1.1
 
-- ComponentTheme file --zdt_ prefix missing changes
+- ComponentTheme file --zdt\_ prefix missing changes
 
 # 1.1.0
 
@@ -438,7 +449,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 # 1.0.0-alpha-275
 
-- **DateTime** - millisecond and second should work only when customDateFormat is given issue fixed. this fix related to *1.0.0-alpha-272*
+- **DateTime** - millisecond and second should work only when customDateFormat is given issue fixed. this fix related to _1.0.0-alpha-272_
 
 # 1.0.0-alpha-274
 

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/AvatarTeam/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as AvatarProps } from "../../Avatar/props/propTypes";
+import { propTypes as AvatarProps } from '../../Avatar/props/propTypes';
 export const propTypes = {
   dataId: PropTypes.string,
   dataSelectorId: PropTypes.string,

package/es/Button/Button.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+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

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

@@ -1,11 +1,6 @@
 import React from 'react';
-import Button from "../Button";
-import { render, cleanup } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-afterEach(() => {
-  cleanup();
-});
+import Button from '../Button';
+import { render } from "@testing-library/react";
 describe('Button component', () => {
   test('Should be render with the basic set of default props', () => {
     const {
@@ -111,132 +106,4 @@ describe('Button component', () => {
   //     const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
   //     expect(asFragment()).toMatchSnapshot();
   // });
-});
-describe('Button - Unit Testing', () => {
-  test('Should render with text prop', () => {
-    const {
-      getByText
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      text: "Click Me"
-    }));
-    expect(getByText('Click Me')).toBeInTheDocument();
-  });
-  test('Should render with children prop', () => {
-    const {
-      getByText
-    } = render( /*#__PURE__*/React.createElement(Button, null, "Click Me"));
-    expect(getByText('Click Me')).toBeInTheDocument();
-  });
-  test('Should apply custom styles from customStyle prop', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      customStyle: {
-        bold: 'customBoldClass'
-      }
-    })); // expect(getByRole('button').getAttribute('class')).toContain('customBoldClass');
-
-    expect(getByRole('button')).toHaveClass('customBoldClass');
-  });
-  test('Should apply custom classes from customClass prop', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      customClass: {
-        customButton: 'customButtonClass'
-      }
-    }));
-    expect(getByRole('button')).toHaveClass('customButtonClass');
-  });
-  test('Should be disabled when disabled prop is true', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      disabled: true
-    }));
-    expect(getByRole('button')).toBeDisabled();
-  });
-  test('Should expose element with getRef prop', () => {
-    const getRef = jest.fn();
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      getRef: getRef
-    }));
-    expect(getRef).toHaveBeenCalledWith(getByRole('button'));
-  });
-  test('Should trigger onClick function', () => {
-    const onClick = jest.fn();
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      onClick: onClick
-    })); // fireEvent.click(getByRole('button'));
-
-    userEvent.click(getByRole('button'));
-    expect(onClick).toHaveBeenCalled();
-  });
-  test('Should not trigger onClick when disabled', () => {
-    const onClick = jest.fn();
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      disabled: true,
-      onClick: onClick
-    }));
-    userEvent.click(getByRole('button'));
-    expect(onClick).not.toHaveBeenCalled();
-  });
-  test('Should render with correct data-id attribute', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      dataId: "testButton"
-    }));
-    expect(getByRole('button')).toHaveAttribute('data-id', 'testButton');
-  });
-  test('Should render with correct data-selector-id attribute', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      dataSelectorId: "testSelector"
-    }));
-    expect(getByRole('button')).toHaveAttribute('data-selector-id', 'testSelector');
-  });
-  test('Should render with correct title attribute', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      title: "Test Title"
-    }));
-    expect(getByRole('button')).toHaveAttribute('data-title', 'Test Title');
-  });
-  test('Should render with correct id attribute', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      id: "buttonElement"
-    }));
-    expect(getByRole('button')).toHaveAttribute('id', 'buttonElement');
-  });
-  test('Should apply a11y props correctly', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      a11y: {
-        'aria-label': 'test'
-      }
-    }));
-    expect(getByRole('button')).toHaveAttribute('aria-label', 'test');
-  });
-  test('Should apply customProps correctly', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      customProps: {
-        'data-custom-attr': 'true'
-      }
-    }));
-    expect(getByRole('button')).toHaveAttribute('data-custom-attr', 'true');
-  });
 });

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 {