@zohodesk/components 1.2.18 → 1.2.20

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

@@ -0,0 +1,20 @@
+export const DropDownItemContainer_defaultProps = {
+  dataId: 'drpdwnItemContainer'
+};
+export const DropDownHeading_defaultProps = {
+  customClass: '',
+  children: null,
+  palette: 'light',
+  a11y: {},
+  dataId: 'DropDownHeading',
+  dataSelectorId: 'dropdownHeading'
+};
+export const DropDownItem_defaultProps = {
+  active: false,
+  dataId: 'dropDwnItemContainer'
+};
+export const DropDownSearch_defaultProps = {
+  size: 'medium',
+  textBoxSize: 'medium',
+  customClass: {}
+};

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

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import { PopOver_propTypes } from './../../PopOver/props/propTypes';
+export const DropDown_propTypes = { ...PopOver_propTypes
+};
+export const DropDownTarget_propTypes = {
+  children: PropTypes.node
+};
+export const DropDownContainer_propTypes = {
+  children: PropTypes.node
+};
+export const DropDownItemContainer_propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  onScroll: PropTypes.func
+};
+export const DropDownHeading_propTypes = {
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  palette: PropTypes.oneOf(['light', 'dark']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaLabelledby: PropTypes.string,
+    ariaLabel: PropTypes.string
+  }),
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};
+export const DropDownItem_propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  hightlight: PropTypes.bool,
+  id: PropTypes.string,
+  index: PropTypes.number,
+  onClick: PropTypes.func,
+  onHover: PropTypes.func,
+  value: PropTypes.string,
+  customClass: PropTypes.string
+};
+export const DropDownSearch_propTypes = {
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  maxLength: PropTypes.string,
+  name: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  placeHolder: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium']),
+  textBoxSize: PropTypes.string,
+  value: PropTypes.string,
+  customClass: PropTypes.shape({
+    searchClass: PropTypes.string,
+    customTextBox: PropTypes.string
+  })
+};
+export const DropDownSeparator_propTypes = {
+  customClass: PropTypes.string
+};

package/es/v1/Heading/Heading.js

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

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

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  tagName: 'h1',
+  a11y: {},
+  className: ''
+};

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

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  a11y: PropTypes.object
+};

package/es/v1/Label/Label.js

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

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

@@ -0,0 +1,11 @@
+export const defaultProps = {
+  clipped: false,
+  dataId: 'label',
+  palette: 'default',
+  size: 'medium',
+  text: 'Label',
+  type: 'title',
+  variant: 'default',
+  customClass: '',
+  dataSelectorId: 'label'
+};

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

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  clipped: PropTypes.bool,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  htmlFor: PropTypes.string,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),
+  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['title', 'subtitle']),
+  variant: PropTypes.oneOf(['primary', 'default']),
+  customClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    tabIndex: PropTypes.string
+  }),
+  id: PropTypes.string
+};

package/es/v1/Layout/Box.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BoxProps as propTypes } from '../../Layout/props/propTypes';
-import { BoxDefaultProps as defaultProps } from '../../Layout/props/defaultProps';
+import { BoxProps as propTypes } from './props/propTypes';
+import { BoxDefaultProps as defaultProps } from './props/defaultProps';
 /* eslint css-modules/no-unused-class: 0 */
 
 import { createProps, getClass, setProps } from '../../Layout/utils';

package/es/v1/Layout/Container.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ContainerProps as propTypes } from '../../Layout/props/propTypes';
-import { ContainerDefaultProps as defaultProps } from '../../Layout/props/defaultProps';
+import { ContainerProps as propTypes } from './props/propTypes';
+import { ContainerDefaultProps as defaultProps } from './props/defaultProps';
 /* eslint css-modules/no-unused-class: 0 */
 
 import { createProps, getClass, setProps } from '../../Layout/utils';

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

@@ -0,0 +1,16 @@
+export const BoxDefaultProps = {
+  dataId: 'boxComponent',
+  testId: '',
+  isScrollAttribute: false,
+  tagName: 'div',
+  dataSelectorId: 'box'
+};
+export const ContainerDefaultProps = {
+  dataId: 'containerComponent',
+  testId: '',
+  isScrollAttribute: false,
+  isCover: true,
+  alignBox: 'column',
+  tagName: 'div',
+  dataSelectorId: 'container'
+};

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

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+export const BoxProps = {
+  adjust: PropTypes.bool,
+  align: PropTypes.oneOf(['start', 'end', 'center']),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  className: PropTypes.string,
+  column: PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
+  dataId: PropTypes.string,
+  testId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  eleRef: PropTypes.func,
+  flexible: PropTypes.bool,
+  hidden: PropTypes.arrayOf((propValue, key, componentName, location, propFullName) => {
+    if (['xs', 'sm', 'md', 'lg', 'xl'].indexOf(propValue[key]) === -1) {
+      return new Error(`Invalid prop \`${propFullName}\` supplied to` + ` \`${componentName}\`. Validation failed.`);
+    }
+  }),
+  isFirst: PropTypes.bool,
+  isLast: PropTypes.bool,
+  isScrollAttribute: PropTypes.bool,
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  shrink: PropTypes.bool,
+  tagName: PropTypes.string,
+  tourId: PropTypes.string,
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+};
+export const ContainerProps = {
+  align: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around', 'baseline']),
+  alignBox: PropTypes.oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
+  alignContent: PropTypes.oneOf(['start', 'end', 'center', 'around', 'between']),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  testId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  eleRef: PropTypes.func,
+  hidden: PropTypes.array,
+  isCover: PropTypes.bool,
+  isInline: PropTypes.bool,
+  isScrollAttribute: PropTypes.bool,
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  tagName: PropTypes.string,
+  tourId: PropTypes.string,
+  wrap: PropTypes.oneOf(['wrap', 'wrap-reverse', 'nowrap']),
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+};

package/es/v1/ListItem/ListContainer.js

@@ -5,8 +5,8 @@ import React, { useCallback } from 'react';
 import { Container } from '../Layout';
 import CssProvider from '../../Provider/CssProvider';
 import style from '../../ListItem/ListItem.module.css';
-import { ListContainerDefaultProps } from '../../ListItem/props/defaultProps';
-import { ListContainer_Props } from '../../ListItem/props/propTypes';
+import { ListContainerDefaultProps } from './props/defaultProps';
+import { ListContainer_Props } from './props/propTypes';
 import { useResponsiveReceiver } from '../Responsive/CustomResponsive';
 
 const ListContainer = props => {
@@ -55,7 +55,8 @@ const ListContainer = props => {
     role,
     ariaSelected,
     ariaLabel,
-    insetFocus = true
+    insetFocus = true,
+    ...a11yAttributes
   } = a11y;
   const options = {};
 
@@ -89,7 +90,7 @@ const ListContainer = props => {
     eleRef: eleRef,
     tagName: isLink ? 'a' : 'li',
     "data-title": isDisabled ? disableTitle : title
-  }, options, customProps), children);
+  }, options, customProps, a11yAttributes), children);
 };
 
 ListContainer.defaultProps = ListContainerDefaultProps;

package/es/v1/ListItem/ListItem.js

@@ -4,8 +4,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { Box } from '../Layout';
 import ListContainer from './ListContainer';
-import { ListItemDefaultProps } from '../../ListItem/props/defaultProps';
-import { ListItem_Props } from '../../ListItem/props/propTypes';
+import { ListItemDefaultProps } from './props/defaultProps';
+import { ListItem_Props } from './props/propTypes';
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';

package/es/v1/ListItem/ListItemWithAvatar.js

@@ -4,8 +4,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { memo } from 'react';
 import { Box } from '../Layout';
 import ListContainer from './ListContainer';
-import { ListItemWithAvatarDefaultProps } from '../../ListItem/props/defaultProps';
-import { ListItemWithAvatar_Props } from '../../ListItem/props/propTypes';
+import { ListItemWithAvatarDefaultProps } from './props/defaultProps';
+import { ListItemWithAvatar_Props } from './props/propTypes';
 /**** Components ****/
 
 import Avatar from '../Avatar/Avatar';

package/es/v1/ListItem/ListItemWithCheckBox.js

@@ -2,8 +2,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import ListContainer from './ListContainer';
-import { ListItemWithCheckBoxDefaultProps } from '../../ListItem/props/defaultProps';
-import { ListItemWithCheckBox_Props } from '../../ListItem/props/propTypes';
+import { ListItemWithCheckBoxDefaultProps } from './props/defaultProps';
+import { ListItemWithCheckBox_Props } from './props/propTypes';
 import CheckBox from '../CheckBox/CheckBox';
 import { Box } from '../Layout';
 import style from '../../ListItem/ListItem.module.css';

package/es/v1/ListItem/ListItemWithIcon.js

@@ -5,8 +5,8 @@ import React from 'react';
 import { Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
 import ListContainer from './ListContainer';
-import { ListItemWithIconDefaultProps } from '../../ListItem/props/defaultProps';
-import { ListItemWithIcon_Props } from '../../ListItem/props/propTypes';
+import { ListItemWithIconDefaultProps } from './props/defaultProps';
+import { ListItemWithIcon_Props } from './props/propTypes';
 /**** CSS ****/
 
 import style from '../../ListItem/ListItem.module.css';

package/es/v1/ListItem/ListItemWithRadio.js

@@ -4,8 +4,8 @@ import React from 'react';
 import Radio from '../Radio/Radio';
 import { Box } from '../Layout';
 import ListContainer from './ListContainer';
-import { ListItemWithRadioDefaultProps } from '../../ListItem/props/defaultProps';
-import { ListItemWithRadio_Props } from '../../ListItem/props/propTypes';
+import { ListItemWithRadioDefaultProps } from './props/defaultProps';
+import { ListItemWithRadio_Props } from './props/propTypes';
 import style from '../../ListItem/ListItem.module.css';
 
 const ListItemWithRadio = props => {

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

@@ -0,0 +1,97 @@
+export const ListContainerDefaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  isLink: false,
+  target: 'blank',
+  needBorder: true,
+  a11y: {},
+  customClass: '',
+  customProps: {},
+  dataSelectorId: 'listContainer',
+  needMultiLineText: false
+};
+export const ListItemDefaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  id: '',
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  isLink: false,
+  target: 'blank',
+  needBorder: true,
+  a11y: {},
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'listItem',
+  needMultiLineText: false
+};
+export const ListItemWithAvatarDefaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  isTeam: false,
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  dataId: 'listAvatar',
+  needBorder: true,
+  needAvatarTitle: true,
+  a11y: {},
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'listItemWithAvatar',
+  needMultiLineText: false
+};
+export const ListItemWithCheckBoxDefaultProps = {
+  active: false,
+  autoHover: false,
+  checked: false,
+  highlight: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  a11y: {},
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'listItemWithCheckBox',
+  needMultiLineText: false
+};
+export const ListItemWithIconDefaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  iconName: '',
+  iconSize: '10',
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  needBorder: true,
+  a11y: {},
+  customClass: '',
+  customProps: {},
+  dataSelectorId: 'listItemWithIcon',
+  needMultiLineText: false
+};
+export const ListItemWithRadioDefaultProps = {
+  active: false,
+  autoHover: false,
+  checked: false,
+  highlight: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  dataId: 'listItemWithRadioComp',
+  a11y: {},
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'listItemWithRadio',
+  needMultiLineText: false
+};

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

@@ -0,0 +1,202 @@
+import PropTypes from 'prop-types';
+export const ListContainer_Props = {
+  active: PropTypes.bool,
+  autoHover: PropTypes.bool,
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  highlight: PropTypes.bool,
+  href: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isLink: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  target: PropTypes.oneOf(['blank', 'self']),
+  title: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaSelected: PropTypes.bool
+  }),
+  customClass: PropTypes.string,
+  customProps: PropTypes.object,
+  eleRef: PropTypes.func
+};
+export const ListItem_Props = {
+  active: PropTypes.bool,
+  autoHover: PropTypes.bool,
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  highlight: PropTypes.bool,
+  href: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  index: PropTypes.number,
+  isDisabled: PropTypes.bool,
+  isLink: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  target: PropTypes.oneOf(['blank', 'self']),
+  title: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaSelected: PropTypes.bool
+  }),
+  needMultiLineText: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customListItem: PropTypes.string,
+    customTickIcon: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    ListItemProps: PropTypes.object
+  })
+};
+export const ListItemWithAvatar_Props = {
+  active: PropTypes.bool,
+  autoHover: PropTypes.bool,
+  avatarPalette: PropTypes.string,
+  avatarPalette: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  highlight: PropTypes.bool,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  imgSrc: PropTypes.string,
+  index: PropTypes.number,
+  initial: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isTeam: PropTypes.bool,
+  name: PropTypes.string,
+  needAvatarTitle: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  palette: PropTypes.oneOf(['dark']),
+  size: PropTypes.string,
+  title: PropTypes.string,
+  value: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaSelected: PropTypes.bool,
+    ariaHidden: PropTypes.bool
+  }),
+  customClass: PropTypes.shape({
+    customListItem: PropTypes.string,
+    customAvatar: PropTypes.string,
+    customAvatarTeam: PropTypes.string
+  }),
+  needMultiLineText: PropTypes.bool,
+  customProps: PropTypes.shape({
+    ListItemProps: PropTypes.object
+  })
+};
+export const ListItemWithCheckBox_Props = {
+  active: PropTypes.bool,
+  autoHover: PropTypes.bool,
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  highlight: PropTypes.bool,
+  id: PropTypes.string,
+  index: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  onHover: PropTypes.func,
+  palette: PropTypes.string,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  value: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaSelected: PropTypes.bool
+  }),
+  needMultiLineText: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customListItem: PropTypes.string,
+    customCheckBox: PropTypes.string,
+    customLabel: PropTypes.string
+  }),
+  customProps: PropTypes.object
+};
+export const ListItemWithIcon_Props = {
+  active: PropTypes.bool,
+  autoHover: PropTypes.bool,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  highlight: PropTypes.bool,
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  index: PropTypes.number,
+  isDisabled: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  palette: PropTypes.string,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  value: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaSelected: PropTypes.bool,
+    ariaHidden: PropTypes.bool
+  }),
+  needMultiLineText: PropTypes.bool,
+  customClass: PropTypes.string,
+  customProps: PropTypes.shape({
+    ListItemProps: PropTypes.object
+  }),
+  isLink: PropTypes.bool,
+  href: PropTypes.string,
+  target: PropTypes.string
+};
+export const ListItemWithRadio_Props = {
+  active: PropTypes.bool,
+  autoHover: PropTypes.bool,
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  highlight: PropTypes.bool,
+  id: PropTypes.string,
+  index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  onHover: PropTypes.func,
+  palette: PropTypes.string,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  value: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaSelected: PropTypes.bool
+  }),
+  needMultiLineText: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customListItem: PropTypes.string,
+    customRadio: PropTypes.string,
+    customRadioWrap: PropTypes.string
+  }),
+  customProps: PropTypes.object
+};