@zohodesk/components 1.2.55 → 1.2.57

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]),

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,8 @@ export default function DropBoxElement(props) {
     style: inlineStyle,
     "data-tour": tourId,
     "data-position": boxPosition,
+    "data-box-direction": boxDirection,
+    "data-arrow-position": arrowPosition,
     id: htmlId,
     role: role,
     "aria-multiselectable": ariaMultiselectable,
@@ -122,7 +124,7 @@ export default function DropBoxElement(props) {
   }, isModel ? /*#__PURE__*/React.createElement("div", {
     className: style.closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
-    className: style[arrowPosition],
+    className: style.arrowPosition,
     style: arrowstyle,
     "data-id": `${dataId}_arrow`,
     "data-test-id": `${dataId}_arrow`,

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 {

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

@@ -5,6 +5,8 @@ exports[`DropBoxElement rendering the defult props 1`] = `
   <div
     class="main hidden container bottomStart default"
     data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
     data-id="dropBox"
     data-position="bottomStart"
     data-selector-id="dropBox"
@@ -12,14 +14,14 @@ exports[`DropBoxElement rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer bottom_shadow radius defaultPalette"
+      class="subContainer shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="end"
+        class="arrowPosition"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -73,19 +73,19 @@
 }
 
 /* shadow */
-.top_shadow {
+[data-box-direction="top"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
-.left_shadow {
+[data-box-direction="left"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
-.right_shadow {
+[data-box-direction="right"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
-.bottom_shadow {
+[data-box-direction="bottom"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
@@ -158,37 +158,37 @@
     transform: translateY(-50%);
 }
 
-/* space for arrow */
-.arrowtop {
+/* space for arrow using data-box-direction attribute*/
+.arrow[data-box-direction="top"] {
     padding-bottom: var(--zd_size10) ;
 }
 
-.arrowright {
+.arrow[data-box-direction="right"] {
     padding-left: var(--zd_size10) ;
 }
 
-.arrowleft {
+.arrow[data-box-direction="left"] {
     padding-right: var(--zd_size10) ;
 }
 
-.arrowbottom {
+.arrow[data-box-direction="bottom"] {
     padding-top: var(--zd_size10) ;
 }
 
-/* space from target */
-.paddingSpace_top {
+/* space from target using data-box-direction attribute*/
+.paddingSpace[data-box-direction="top"] {
     padding-bottom: var(--zd_size5) ;
 }
 
-.paddingSpace_right {
+.paddingSpace[data-box-direction="right"] {
     padding-left: var(--zd_size5) ;
 }
 
-.paddingSpace_left {
+.paddingSpace[data-box-direction="left"] {
     padding-right: var(--zd_size5) ;
 }
 
-.paddingSpace_bottom {
+.paddingSpace[data-box-direction="bottom"] {
     padding-top: var(--zd_size5) ;
 }
 
@@ -213,107 +213,106 @@
 }
 
 /* arrow placement styles */
-.start,
-.end,
-.mid {
+.arrowPosition {
     composes: arrow;
 }
 
-.top .start,
-.top .end,
-.top .mid {
+.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition,
+.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
     bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
-.top .start {
+.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition {
     left: var(--zd_size28) ;
 }
 
-.top .end {
+.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition {
     right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
-.top .mid {
+.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
     left: 50% ;
 }
 
-.top .start,
-.top .mid {
+.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
     transform: rotate(180deg) translateX(50%);
 }
 
-.bottom .start,
-.bottom .end,
-.bottom .mid {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition,
+.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
     top: calc( var(--zd_size17) * -1 ) ;
 }
 
-.bottom .start {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
     left: var(--zd_size28) ;
 }
 
-.bottom .mid {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
     left: 50% ;
 }
 
-.bottom .end {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition {
     right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
-.bottom .mid,
-.bottom .start {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition,
+.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
     transform: translateX(-50%);
 }
 
-.left .start,
-.left .mid,
-.left .end {
+.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition,
+.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
     right: calc( var(--zd_size17) * -1 ) ;
 }
 
-.left .start {
+.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition {
     top: var(--zd_size28) ;
 }
 
-.left .end {
+.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
     transform: rotate(90deg) translateX(50%);
     bottom: var(--zd_size28) ;
 }
 
-.left .mid {
+.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
     top: 50% ;
 }
 
-.left .start,
-.left .mid {
+.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
     transform: rotate(90deg) translateX(-50%);
 }
 
-.right .start,
-.right .mid,
-.right .end {
+.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition,
+.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
     left: calc( var(--zd_size17) * -1 ) ;
 }
 
-.right .start {
+.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition {
     top: var(--zd_size28) ;
 }
 
-.right .mid {
+.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
     top: 50% ;
 }
 
-.right .start,
-.right .mid {
+.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
     transform: rotate(-90deg) translateX(50%);
 }
 
-.right .end {
+.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
     bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
+[data-visible="hidden"],
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -321,7 +320,7 @@
     pointer-events: none;
 }
 
-.hidden .subContainer {
+[data-visible="hidden"] .subContainer, .hidden .subContainer {
     box-shadow: none;
 }
 
@@ -342,17 +341,21 @@
     composes: animationBasic;
     composes: fadeIn modeForward from '../../../common/animation.module.css';
 }
+
 .scaleIn {
     composes: animationBasic;
     composes: scaleIn from '../../../common/animation.module.css';
 }
+
 .bounce {
     composes: animationBasic;
 }
+
 [dir=ltr] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
+
 [dir=rtl] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
@@ -414,7 +417,7 @@
 }
 
 .closeBar {
-  /*  Variable:Ignore  */
+    /*  Variable:Ignore  */
     height: 6px;
     width: 20% ;
     border-radius: 5px;

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import LibraryContext from '../../../Provider/LibraryContextInit';
+import LibraryContext from "../../../Provider/LibraryContextInit";
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(_ref) {
   let {
@@ -52,9 +52,9 @@ export default function cssJSLogic(_ref) {
     [style[boxPosition]]: isAbsolute && !isModel,
     [style.fixedContainer]: !isAbsolute && !isModel,
     [style[size]]: size && !isModel,
-    [style[boxDirection]]: !isModel && isActive && isArrow,
-    [style[`arrow${boxDirection}`]]: !isModel && isActive && isArrow && isAbsolute,
-    [style[`paddingSpace_${boxDirection}`]]: !isModel && isActive && !isArrow && isPadding
+    [style.boxDirection]: !isModel && isActive && isArrow,
+    [style.arrow]: !isModel && isActive && isArrow && isAbsolute,
+    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding
   });
   let subContainerClass = compileClassNames({
     [style.subContainer]: true,
@@ -62,7 +62,7 @@ export default function cssJSLogic(_ref) {
     [style.mobRadius]: !!isModel,
     [style.slideUp]: !!isModel && isActive,
     [customDropBox]: !isModel,
-    [style[`${boxDirection}_shadow`]]: !isModel,
+    [style.shadow]: !isModel,
     [style.boxPadding]: !isModel && isBoxPaddingNeed,
     [style.radius]: !isModel && isRadius,
     [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -1,4 +1,4 @@
-import { remConvert } from '../../utils/Common';
+import { remConvert } from "../../utils/Common";
 export default function useDropboxPosCalc(props) {
   let {
     right,

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

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

package/es/DropBox/__tests__/__snapshots__/DropBox.spec.js.snap

@@ -5,6 +5,8 @@ exports[`DropBox rendering the defult props 1`] = `
   <div
     class="main hidden container bottomStart default"
     data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
     data-id="dropBox"
     data-position="bottomStart"
     data-selector-id="dropBox"
@@ -12,14 +14,14 @@ exports[`DropBox rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer bottom_shadow radius defaultPalette"
+      class="subContainer shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="end"
+        class="arrowPosition"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"

package/es/DropBox/css/cssJSLogic.js

@@ -1,4 +1,4 @@
-import { useZIndex } from '../../Provider/ZindexProvider';
+import { useZIndex } from "../../Provider/ZindexProvider";
 export default function cssJSLogic(props) {
   const {
     isActive,

package/es/DropBox/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { DropBoxElementDefaultProps } from '../DropBoxElement/props/defaultProps';
+import { DropBoxElementDefaultProps } from "../DropBoxElement/props/defaultProps";
 export const defaultProps = {
   needResponsive: true,
   portalId: 'portal1',

package/es/DropBox/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { DropBoxElementPropTypes } from '../DropBoxElement/props/propTypes';
+import { DropBoxElementPropTypes } from "../DropBoxElement/props/propTypes";
 export const propTypes = {
   needResponsive: PropTypes.bool,
   portalId: PropTypes.string,

package/es/DropBox/utils/isMobilePopover.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from '../../Provider/Config';
+import { getLibraryConfig } from "../../Provider/Config";
 export default function isMobilePopover(needResponsive) {
   //   let { needResponsive } = props;
   let windowWidth,

package/es/DropDown/DropDown.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from './props/propTypes';
-import { DropDownItemContainer_defaultProps } from './props/defaultProps';
-import style from './DropDown.module.css';
-import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
+import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from "./props/propTypes";
+import { DropDownItemContainer_defaultProps } from "./props/defaultProps";
+import style from "./DropDown.module.css";
+import PopOver, { PopOverTarget, PopOverContainer } from "../PopOver/PopOver";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'shadow', 'target', 'menu', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', 'separator', 'small', 'search', 'medium', 'heading'] }] */
 
 export default class DropDown extends React.Component {

package/es/DropDown/DropDownHeading.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DropDownHeading_propTypes } from './props/propTypes';
-import { DropDownHeading_defaultProps } from './props/defaultProps';
-import style from './DropDownHeading.module.css';
+import { DropDownHeading_propTypes } from "./props/propTypes";
+import { DropDownHeading_defaultProps } from "./props/defaultProps";
+import style from "./DropDownHeading.module.css";
 export default class DropDownHeading extends React.Component {
   render() {
     let {

package/es/DropDown/DropDownItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DropDownItem_propTypes } from './props/propTypes';
-import { DropDownItem_defaultProps } from './props/defaultProps';
-import style from './DropDownItem.module.css';
+import { DropDownItem_propTypes } from "./props/propTypes";
+import { DropDownItem_defaultProps } from "./props/defaultProps";
+import style from "./DropDownItem.module.css";
 export default class DropDownItem extends React.Component {
   constructor(props) {
     super(props);

package/es/DropDown/DropDownSearch.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropDownSearch_propTypes } from './props/propTypes';
-import { DropDownSearch_defaultProps } from './props/defaultProps';
-import TextBox from '../TextBox/TextBox';
-import style from './DropDownSearch.module.css';
+import { DropDownSearch_propTypes } from "./props/propTypes";
+import { DropDownSearch_defaultProps } from "./props/defaultProps";
+import TextBox from "../TextBox/TextBox";
+import style from "./DropDownSearch.module.css";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'menu', 'shadow', 'target', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', separator, 'small', 'search', 'medium', 'heading', 'listGroup'] }] */
 
 export default class DropDownSearch extends React.Component {