@zohodesk/components 1.2.18 → 1.2.20

package/es/v1/Animation/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  delayClassName: PropTypes.string,
+  enterDuration: PropTypes.number,
+  exitDuration: PropTypes.number,
+  isActive: PropTypes.bool,
+  name: PropTypes.oneOf(['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none']),
+  onEntered: PropTypes.func,
+  onExit: PropTypes.func,
+  unmountOnExit: PropTypes.bool
+};

package/es/v1/AppContainer/AppContainer.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useEffect, useRef, useLayoutEffect } from 'react';
-import { defaultProps } from '../../AppContainer/props/defaultProps';
-import { propTypes } from '../../AppContainer/props/propTypes';
+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';

package/es/v1/AppContainer/props/defaultProps.js

@@ -0,0 +1,10 @@
+export const defaultProps = {
+  dataId: 'AppContainer',
+  tagName: 'div',
+  className: '',
+  tooltipClass: '',
+  tooltipParentClass: '',
+  customProps: {},
+  dataSelectorId: 'appContainer',
+  needTooltip: true
+};

package/es/v1/AppContainer/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  eleRef: PropTypes.func,
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  needTooltip: PropTypes.bool,
+  tooltipClass: PropTypes.string,
+  tooltipParentClass: PropTypes.string,
+  customProps: PropTypes.shape({
+    ContainerProps: PropTypes.object,
+    TooltipProps: PropTypes.object,
+    ExtraProps: PropTypes.object
+  })
+};

package/es/v1/Avatar/Avatar.js

@@ -2,8 +2,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { defaultProps } from '../../Avatar/props/defaultProps';
-import { propTypes } from '../../Avatar/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { getInitial } from '../../utils/getInitial';
 import AvatarSize from '../../Provider/AvatarSize';
 import style from '../../Avatar/Avatar.module.css';
@@ -111,7 +111,8 @@ function Avatar(props) {
     "data-id": dataId,
     "data-test-id": dataId,
     onClick: onClick,
-    "data-selector-id": dataSelectorId
+    "data-selector-id": dataSelectorId,
+    tabIndex: onClick ? 0 : null
   }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
     className: `${style.initial}`,
     "data-id": `${dataId}_AvatarInitial`,

package/es/v1/Avatar/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  needTitle: true,
+  palette: 'primary',
+  shape: 'circle',
+  size: 'medium',
+  src: null,
+  title: null,
+  dataId: 'Avatar',
+  needBorder: true,
+  borderOnActive: false,
+  borderOnHover: false,
+  customProps: {},
+  isAnimate: true,
+  dataSelectorId: 'avatar',
+  needInnerBorder: false,
+  needDefaultBorder: false
+};

package/es/v1/Avatar/props/propTypes.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  initial: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  needBorder: PropTypes.bool,
+  needTitle: PropTypes.bool,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  shape: PropTypes.oneOf(['circle', 'square']),
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  title: PropTypes.string,
+  customClass: PropTypes.string,
+  alternateSrc: PropTypes.string,
+  borderOnActive: PropTypes.bool,
+  borderOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    AvatarProps: PropTypes.object
+  }),
+  isAnimate: PropTypes.bool,
+  needInnerBorder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool
+};

package/es/v1/AvatarTeam/AvatarTeam.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { defaultProps } from '../../AvatarTeam/props/defaultProps';
-import { propTypes } from '../../AvatarTeam/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Avatar from '../Avatar/Avatar';
 import style from '../../AvatarTeam/AvatarTeam.module.css';
 /* once avatar support firstname lastname and pattern
@@ -62,7 +62,7 @@ export default function AvatarTeam(props) {
     needBorder: needBorder,
     needDefaultBorder: needDefaultBorder
   }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
-    className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
+    className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill}
           ${style[`${size}team`]} ${customAvatarTeam}`
   }));
 }

package/es/v1/AvatarTeam/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  isFilled: false,
+  palette: 'primary',
+  size: 'medium',
+  src: null,
+  title: null,
+  dataId: 'avatarTeamComp',
+  dataSelectorId: 'avatarTeam',
+  needTitle: true,
+  customClass: {},
+  borderOnActive: false,
+  borderOnHover: false,
+  customProps: {},
+  needInnerBorder: true,
+  needBorder: true,
+  needDefaultBorder: true
+};

package/es/v1/AvatarTeam/props/propTypes.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  isFilled: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  needTitle: PropTypes.bool,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info']),
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  needBorder: PropTypes.bool,
+  title: PropTypes.string,
+  customClass: PropTypes.shape({
+    customAvatar: PropTypes.string,
+    customAvatarTeam: PropTypes.string
+  }),
+  borderOnActive: PropTypes.bool,
+  borderOnHover: PropTypes.bool,
+  needInnerBorder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool,
+  customProps: PropTypes.shape({
+    AvatarTeamProps: PropTypes.object,
+    AvatarProps: PropTypes.object
+  })
+};

package/es/v1/Button/Button.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { defaultProps } from '../../Button/props/defaultProps';
-import { propTypes } from '../../Button/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import cssJSLogic from '../../Button/css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
 import style from '../../Button/css/Button.module.css';

package/es/v1/Button/props/defaultProps.js

@@ -0,0 +1,18 @@
+import { dummyFunction } from '../../../utils/dummyFunction';
+export const defaultProps = {
+  children: null,
+  dataId: 'buttonComp',
+  dataSelectorId: 'button',
+  disabled: false,
+  isBold: true,
+  needAppearance: true,
+  onClick: dummyFunction,
+  palette: 'primary',
+  rounded: false,
+  size: 'medium',
+  status: 'none',
+  text: 'Button',
+  customClass: {},
+  customProps: {},
+  a11y: {}
+};

package/es/v1/Button/props/propTypes.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disabled: PropTypes.bool,
+  getRef: PropTypes.func,
+  isBold: PropTypes.bool,
+  needAppearance: PropTypes.bool,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled']),
+  rounded: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+  status: PropTypes.oneOf(['loading', 'success', 'none']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  customClass: PropTypes.shape({
+    customButton: PropTypes.string,
+    customStatus: PropTypes.string,
+    customStatusSize: PropTypes.string
+  }),
+  customStyle: PropTypes.object,
+  customProps: PropTypes.object,
+  id: PropTypes.string,
+  a11y: PropTypes.object
+};
+export default propTypes;

package/es/v1/Buttongroup/Buttongroup.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { defaultProps } from '../../Buttongroup/props/defaultProps';
-import { propTypes } from '../../Buttongroup/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from '../../Buttongroup/Buttongroup.module.css';
 export default function Buttongroup(props) {
   const {

package/es/v1/Buttongroup/props/defaultProps.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  buttonPosition: 'left',
+  children: null,
+  dataId: 'ButtonGroup',
+  dataSelectorId: 'buttonGroup'
+};

package/es/v1/Buttongroup/props/propTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  buttonPosition: PropTypes.oneOf(['left', 'right', 'center']),
+  children: PropTypes.node,
+  type: PropTypes.string.isRequired,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};

package/es/v1/Card/Card.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from '../../Card/props/propTypes';
-import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from '../../Card/props/defaultProps';
+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/Card.module.css';

package/es/v1/Card/props/defaultProps.js

@@ -0,0 +1,25 @@
+export const Card_defaultProps = {
+  isScrollAttribute: false,
+  // isScrollShadow: true,
+  onClick: null,
+  scrollAt: '10',
+  a11y: {},
+  isPercentageScroll: false
+};
+export const CardHeader_defaultProps = {
+  dataId: 'CardHeader',
+  customClass: '',
+  dataSelectorId: 'cardHeader'
+};
+export const CardContent_defaultProps = {
+  isScrollAttribute: false,
+  scroll: 'vertical',
+  dataId: 'CardContent',
+  customClass: '',
+  dataSelectorId: 'cardContent'
+};
+export const CardFooter_defaultProps = {
+  dataId: 'CardFooter',
+  customClass: '',
+  dataSelectorId: 'cardFooter'
+};

package/es/v1/Card/props/propTypes.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+export const CardHeader_propTypes = {
+  children: PropTypes.element,
+  dataId: PropTypes.string,
+  isScroll: PropTypes.bool,
+  customClass: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};
+export const CardContent_propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  isScrollAttribute: PropTypes.bool,
+  onScroll: PropTypes.func,
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  shrink: PropTypes.bool,
+  customClass: PropTypes.string,
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both']),
+  dataSelectorId: PropTypes.string
+};
+export const Card_propTypes = {
+  childTypes: PropTypes.object,
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  fetchData: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  from: PropTypes.number,
+  isScrollAttribute: PropTypes.bool,
+  // isScrollShadow: PropTypes.bool,
+  limit: PropTypes.number,
+  noMoreData: PropTypes.bool,
+  noNeedUpScroll: PropTypes.bool,
+  onClick: PropTypes.func,
+  onScroll: PropTypes.func,
+  scrollAt: PropTypes.string,
+  customClass: PropTypes.string,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  }),
+  isPercentageScroll: PropTypes.bool,
+  eleRef: PropTypes.func
+};
+export const CardFooter_propTypes = {
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};

package/es/v1/CheckBox/CheckBox.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { propTypes } from '../../CheckBox/props/propTypes';
-import { defaultProps } from '../../CheckBox/props/defaultProps';
+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';
@@ -67,7 +67,7 @@ const CheckBox = props => {
     isInline: text ? false : true,
     alignBox: "row",
     align: "vertical",
-    className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`} 
+    className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`}
       ${checked ? `${style[`checked${palette}`]}` : ''} ${customCheckBox}`,
     "data-title": toolTip,
     onClick: isReadOnly || disabled ? null : onChange,
@@ -139,7 +139,7 @@ const CheckBox = props => {
     clipped: isClipped,
     variant: variant,
     customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
-                          ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
+                          ${checked && active ? `${style[`checked${palette}Label`]}` : ''}
                           ${accessMode} ${customLabel}`,
     title: toolTip ? toolTip : text
   }, LabelProps))));

package/es/v1/CheckBox/props/defaultProps.js

@@ -0,0 +1,18 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  isReadOnly: false,
+  active: false,
+  labelPalette: 'default',
+  labelSize: 'medium',
+  palette: 'primary',
+  size: 'medium',
+  isFilled: true,
+  variant: 'default',
+  dataId: 'checkBox',
+  activeStyle: 'tick',
+  customClass: {},
+  a11y: {},
+  isClipped: true,
+  customProps: {}
+};

package/es/v1/CheckBox/props/propTypes.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  active: PropTypes.bool,
+  activeStyle: PropTypes.oneOf(['tick', 'minus']),
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disabled: PropTypes.bool,
+  disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isFilled: PropTypes.bool,
+  isClipped: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'danger']),
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'primary']),
+  customClass: PropTypes.shape({
+    customCheckBox: PropTypes.string,
+    customLabel: PropTypes.string,
+    customCBoxSize: PropTypes.string,
+    customTickSize: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaLabelledby: PropTypes.string,
+    ariaHidden: PropTypes.bool,
+    ariaChecked: PropTypes.bool
+  }),
+  customProps: PropTypes.shape({
+    CheckBoxProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  })
+};

package/es/v1/DropBox/DropBox.js

@@ -7,8 +7,8 @@ import { getLibraryConfig } from '../../Provider/Config';
 import LibraryContext from '../../Provider/LibraryContextInit';
 import cssJSLogic from '../../DropBox/css/cssJSLogic';
 import DropBoxElement from './DropBoxElement/DropBoxElement';
-import { DropBoxDefaultProps } from '../../DropBox/props/defaultProps';
-import { DropBoxPropTypes } from '../../DropBox/props/propTypes';
+import { DropBoxDefaultProps } from './props/defaultProps';
+import { DropBoxPropTypes } from './props/propTypes';
 import { stopPropagation } from '../../utils/Common';
 import style from '../../DropBox/css/DropBox.module.css';
 export default function DropBox(props) {

package/es/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -2,8 +2,8 @@ import React from 'react';
 import useDropboxPosCalc from '../../../DropBox/DropBoxElement/useDropboxPosCalc';
 import cssJSLogic from '../../../DropBox/DropBoxElement/css/cssJSLogic';
 import { positionMapping } from '../../../DropBox/DropBoxPositionMapping.json';
-import { DropBoxElementDefaultProps } from '../../../DropBox/DropBoxElement/props/defaultProps';
-import { DropBoxElementPropTypes } from '../../../DropBox/DropBoxElement/props/propTypes';
+import { DropBoxElementDefaultProps } from './props/defaultProps';
+import { DropBoxElementPropTypes } from './props/propTypes';
 import { mergeStyle } from '@zohodesk/utils';
 import style from '../../../DropBox/DropBoxElement/css/DropBoxElement.module.css';
 export default function DropBoxElement(props) {

package/es/v1/DropBox/DropBoxElement/props/defaultProps.js

@@ -0,0 +1,18 @@
+export const DropBoxElementDefaultProps = {
+  animationStyle: 'default',
+  boxPosition: 'bottomLeft',
+  dataId: 'dropBox',
+  dataSelectorId: 'dropBox',
+  isActive: false,
+  isAnimate: false,
+  isArrow: true,
+  isRadius: true,
+  size: 'default',
+  isAbsolutePositioningNeeded: true,
+  isBoxPaddingNeed: false,
+  isPadding: true,
+  customClass: {},
+  a11y: {},
+  palette: 'default',
+  customInlineStyle: false
+};

package/es/v1/DropBox/DropBoxElement/props/propTypes.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+export const DropBoxElementPropTypes = {
+  animationStyle: PropTypes.oneOf(['default', 'bounce', 'fadeIn', 'scaleIn']),
+  arrowBottom: PropTypes.number,
+  arrowLeft: PropTypes.number,
+  arrowPosition: PropTypes.oneOf(['start', 'mid', 'end']),
+  arrowRight: PropTypes.number,
+  arrowTop: PropTypes.number,
+  bottom: PropTypes.number,
+  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  children: PropTypes.element,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  forwardRef: PropTypes.object,
+  getRef: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isArrow: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isRadius: PropTypes.bool,
+  left: PropTypes.number,
+  onClick: PropTypes.func,
+  right: PropTypes.number,
+  size: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
+  top: PropTypes.number,
+  tourId: PropTypes.string,
+  htmlId: PropTypes.string,
+  tabIndex: PropTypes.number,
+  customClass: PropTypes.shape({
+    customDropBox: PropTypes.string,
+    customMobileDropBox: PropTypes.string,
+    customDropBoxWrap: PropTypes.string,
+    customMobileDropBoxWrap: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaMultiselectable: PropTypes.bool,
+    ariaLabelledby: PropTypes.string
+  }),
+  palette: PropTypes.oneOf(['default', 'dark']),
+  customStyle: PropTypes.object,
+  customInlineStyle: PropTypes.bool,
+  isModel: PropTypes.bool,
+  direction: PropTypes.string,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
+  zIndexStyle: PropTypes.object,
+  subContainerRef: PropTypes.func
+};

package/es/v1/DropBox/props/defaultProps.js

@@ -0,0 +1,14 @@
+import { DropBoxElementDefaultProps } from '../DropBoxElement/props/defaultProps';
+export const defaultProps = {
+  needResponsive: true,
+  portalId: 'portal1',
+  isActive: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  needFocusScope: false,
+  needAutoZindex: true,
+  customProps: {}
+};
+export const DropBoxDefaultProps = { ...DropBoxElementDefaultProps,
+  ...defaultProps
+};

package/es/v1/DropBox/props/propTypes.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import { DropBoxElementPropTypes } from '../DropBoxElement/props/propTypes';
+export const propTypes = {
+  needResponsive: PropTypes.bool,
+  portalId: PropTypes.string,
+  isActive: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  needFocusScope: PropTypes.bool,
+  needAutoZindex: PropTypes.bool,
+  customProps: PropTypes.object,
+  onClose: PropTypes.func
+};
+export const DropBoxPropTypes = { ...DropBoxElementPropTypes,
+  ...propTypes
+};

package/es/v1/DropDown/DropDown.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from '../../DropDown/props/propTypes';
-import { DropDownItemContainer_defaultProps } from '../../DropDown/props/defaultProps';
+import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from './props/propTypes';
+import { DropDownItemContainer_defaultProps } from './props/defaultProps';
 import style from '../../DropDown/DropDown.module.css';
 import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
 export default function DropDown(props) {

package/es/v1/DropDown/DropDownHeading.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DropDownHeading_propTypes } from '../../DropDown/props/propTypes';
-import { DropDownHeading_defaultProps } from '../../DropDown/props/defaultProps';
+import { DropDownHeading_propTypes } from './props/propTypes';
+import { DropDownHeading_defaultProps } from './props/defaultProps';
 import style from '../../DropDown/DropDownHeading.module.css';
 export default function DropDownHeading(props) {
   let {

package/es/v1/DropDown/DropDownItem.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
-import { DropDownItem_propTypes } from '../../DropDown/props/propTypes';
-import { DropDownItem_defaultProps } from '../../DropDown/props/defaultProps';
+import { DropDownItem_propTypes } from './props/propTypes';
+import { DropDownItem_defaultProps } from './props/defaultProps';
 import style from '../../DropDown/DropDownItem.module.css';
 export default function DropDownItem(props) {
   let {

package/es/v1/DropDown/DropDownSearch.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import { DropDownSearch_propTypes } from '../../DropDown/props/propTypes';
-import { DropDownSearch_defaultProps } from '../../DropDown/props/defaultProps';
+import { DropDownSearch_propTypes } from './props/propTypes';
+import { DropDownSearch_defaultProps } from './props/defaultProps';
 import TextBox from '../TextBox/TextBox';
 import style from '../../DropDown/DropDownSearch.module.css';
 export default function DropDownSearch(props) {

package/es/v1/DropDown/DropDownSeparator.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DropDownSeparator_propTypes } from '../../DropDown/props/propTypes';
+import { DropDownSeparator_propTypes } from './props/propTypes';
 import style from '../../DropDown/DropDownSeparator.module.css';
 export default function DropDownSeparator(props) {
   let {