@zohodesk/components 1.2.19 → 1.2.21

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 {

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
+};