@zohodesk/components 1.2.19 → 1.2.21

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

package/es/v1/Modal/Modal.js

@@ -3,8 +3,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
-import { defaultProps } from '../../Modal/props/defaultProps';
-import { propTypes } from '../../Modal/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from '../../AppContainer/AppContainer.module.css';
 let createdPortalIds = [];
 let newPortalPrefix = 'CPortal';

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

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  portalId: 'portal1'
+};

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

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autoZIndexNeeded: PropTypes.bool,
+  children: PropTypes.node,
+  portalId: PropTypes.string,
+  isActive: PropTypes.bool
+};

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AdvancedGroupMultiSelect_propTypes } from '../../MultiSelect/props/propTypes';
-import { AdvancedGroupMultiSelect_defaultProps } from '../../MultiSelect/props/defaultProps';
+import { AdvancedGroupMultiSelect_propTypes } from './props/propTypes';
+import { AdvancedGroupMultiSelect_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import Loader from '@zohodesk/svg/lib/Loader/Loader';

package/es/v1/MultiSelect/AdvancedMultiSelect.js

@@ -2,8 +2,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /**** Libraries ****/
 import React from 'react';
-import { AdvancedMultiSelect_propTypes } from '../../MultiSelect/props/propTypes';
-import { AdvancedMultiSelect_defaultProps } from '../../MultiSelect/props/defaultProps';
+import { AdvancedMultiSelect_propTypes } from './props/propTypes';
+import { AdvancedMultiSelect_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import { MultiSelectComponent } from './MultiSelect';

package/es/v1/MultiSelect/EmptyState.js

@@ -1,7 +1,7 @@
 /**** Libraries ****/
 import React from 'react';
-import { EmptyState_propTypes } from '../../MultiSelect/props/propTypes';
-import { EmptyState_defaultProps } from '../../MultiSelect/props/defaultProps';
+import { EmptyState_propTypes } from './props/propTypes';
+import { EmptyState_defaultProps } from './props/defaultProps';
 /**** CSS ****/
 
 import style from '../../MultiSelect/MultiSelect.module.css';

package/es/v1/MultiSelect/MobileHeader/MobileHeader.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Button from '../../Button/Button';
 import { Container, Box } from '../../Layout';
-import { defaultProps } from '../../../MultiSelect/MobileHeader/props/defaultProps';
-import { propTypes } from '../../../MultiSelect/MobileHeader/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from '../../../MultiSelect/MobileHeader/MobileHeader.module.css';
 export default function MobileHeader(props) {
   let {

package/es/v1/MultiSelect/MobileHeader/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  selectedOptions: [],
+  i18nKeys: {
+    mobilePrimaryButtonText: 'Done',
+    mobileSecondaryButtonText: 'Close'
+  }
+};

package/es/v1/MultiSelect/MobileHeader/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  i18nKeys: PropTypes.object,
+  onClick: PropTypes.func,
+  selectedOptions: PropTypes.array,
+  children: PropTypes.node
+};

package/es/v1/MultiSelect/MultiSelect.js

@@ -1,8 +1,8 @@
 /**** Libraries ****/
 import React from 'react';
-import { MultiSelect_propTypes } from '../../MultiSelect/props/propTypes';
-import { MultiSelect_defaultProps } from '../../MultiSelect/props/defaultProps';
-import { defaultProps as MobileHeader_defaultProps } from '../../MultiSelect/MobileHeader/props/defaultProps';
+import { MultiSelect_propTypes } from './props/propTypes';
+import { MultiSelect_defaultProps } from './props/defaultProps';
+import { defaultProps as MobileHeader_defaultProps } from './MobileHeader/props/defaultProps';
 /**** Components ****/
 
 import Popup from '../Popup/Popup';

package/es/v1/MultiSelect/MultiSelectHeader.js

@@ -1,7 +1,7 @@
 /**** Libraries ****/
 import React from 'react';
-import { MultiSelectHeader_propTypes } from '../../MultiSelect/props/propTypes';
-import { MultiSelectHeader_defaultProps } from '../../MultiSelect/props/defaultProps';
+import { MultiSelectHeader_propTypes } from './props/propTypes';
+import { MultiSelectHeader_defaultProps } from './props/defaultProps';
 /**** Icons ****/
 
 import ListItemWithIcon from '../ListItem/ListItemWithIcon';

package/es/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -2,9 +2,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /**** Libraries ****/
 import React from 'react';
-import { MultiSelectWithAvatar_propTypes } from '../../MultiSelect/props/propTypes';
-import { MultiSelectWithAvatar_defaultProps } from '../../MultiSelect/props/defaultProps';
-import { defaultProps as MobileHeader_defaultProps } from '../../MultiSelect/MobileHeader/props/defaultProps';
+import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
+import { MultiSelectWithAvatar_defaultProps } from './props/defaultProps';
+import { defaultProps as MobileHeader_defaultProps } from './MobileHeader/props/defaultProps';
 /**** Components ****/
 
 import { MultiSelectComponent } from './MultiSelect';

package/es/v1/MultiSelect/SelectedOptions.js

@@ -2,8 +2,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /**** Libraries ****/
 import React from 'react';
-import { SelectedOptions_propTypes } from '../../MultiSelect/props/propTypes';
-import { SelectedOptions_defaultProps } from '../../MultiSelect/props/defaultProps';
+import { SelectedOptions_propTypes } from './props/propTypes';
+import { SelectedOptions_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import Tag from '../Tag/Tag';

package/es/v1/MultiSelect/Suggestions.js

@@ -2,8 +2,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /**** Libraries ****/
 import React from 'react';
-import { Suggestions_propTypes } from '../../MultiSelect/props/propTypes';
-import { Suggestions_defaultProps } from '../../MultiSelect/props/defaultProps';
+import { Suggestions_propTypes } from './props/propTypes';
+import { Suggestions_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import ListItem from '../ListItem/ListItem';
@@ -60,7 +60,8 @@ export default class Suggestions extends React.PureComponent {
       const isHighlight = hoverOption === index || id === hoverId ? true : false;
       const list_a11y = Object.assign({}, a11y, {
         ariaSelected: isActive,
-        ariaLabel: value
+        ariaLabel: value,
+        'data-a11y-list-active': isHighlight
       });
       const commonProps = {
         isDisabled,

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

@@ -0,0 +1,153 @@
+import { getLibraryConfig } from '../../Provider/Config';
+export const AdvancedGroupMultiSelect_defaultProps = {
+  animationStyle: 'bounce',
+  autoComplete: getLibraryConfig('autoComplete'),
+  dataId: 'multiSelect',
+  defaultDropBoxPosition: 'bottom',
+  dropBoxSize: 'small',
+  isAnimate: true,
+  isDisabled: false,
+  isPopupOpenOnEnter: false,
+  isPopupOpen: false,
+  isPopupReady: false,
+  isReadOnly: false,
+  needLocalSearch: true,
+  needSelectAll: false,
+  needToCloseOnSelect: false,
+  needBorder: true,
+  size: 'medium',
+  textBoxSize: 'medium',
+  textField: 'text',
+  valueField: 'id',
+  variant: 'default',
+  isSearching: false,
+  selectedOptionDetails: {},
+  selectedGroupOptions: [],
+  listItemSize: 'large',
+  isDataLoaded: true,
+  isNextOptions: false,
+  customClass: '',
+  borderColor: 'default',
+  isPadding: false,
+  i18nKeys: {},
+  a11y: {},
+  isSearchClearOnSelect: true,
+  needEffect: true,
+  palette: 'default',
+  isLoading: false,
+  dataSelectorId: 'advancedGroupMultiSelect'
+};
+export const AdvancedMultiSelect_defaultProps = {
+  animationStyle: 'bounce',
+  dataIdClearIcon: 'clearIcon',
+  dataIdLoading: 'loading',
+  dataIdMultiSelectComp: 'multiSelectComp',
+  dataIdSelectAllEle: 'selectAllEle',
+  defaultDropBoxPosition: 'bottom',
+  dropBoxSize: 'small',
+  isAnimate: true,
+  isDisabled: false,
+  isReadOnly: false,
+  needLocalSearch: true,
+  needSelectAll: false,
+  selectedOptions: [],
+  size: 'medium',
+  textBoxSize: 'medium',
+  textField: 'text',
+  valueField: 'id',
+  variant: 'default',
+  isSearchClearOnClose: true,
+  needBorder: true,
+  i18nKeys: {},
+  a11y: {},
+  borderColor: 'default',
+  isBoxPaddingNeed: true,
+  isSearchClearOnSelect: true,
+  customProps: {},
+  needEffect: true,
+  isLoading: false,
+  dataSelectorId: 'advancedMultiSelect'
+};
+export const EmptyState_defaultProps = {
+  dataId: 'empty',
+  palette: 'default',
+  i18nKeys: {},
+  a11y: {}
+};
+export const MultiSelect_defaultProps = {
+  animationStyle: 'bounce',
+  autoComplete: getLibraryConfig('autoComplete'),
+  dataId: 'multiSelect',
+  dropBoxSize: 'small',
+  isAnimate: true,
+  isDisabled: false,
+  isPopupOpenOnEnter: false,
+  isReadOnly: false,
+  needLocalSearch: true,
+  needSelectAll: false,
+  needToCloseOnSelect: false,
+  size: 'medium',
+  textBoxSize: 'medium',
+  textField: 'text',
+  valueField: 'id',
+  variant: 'default',
+  isSearching: false,
+  borderColor: 'default',
+  needBorder: true,
+  disableAction: false,
+  isSearchClearOnClose: true,
+  isBoxPaddingNeed: true,
+  needAutoFocus: false,
+  i18nKeys: {},
+  a11y: {},
+  textBoxClass: '',
+  palette: 'default',
+  isSearchClearOnSelect: true,
+  needEffect: true,
+  boxSize: 'default',
+  isLoading: false,
+  dataSelectorId: 'multiSelect',
+  keepSelectedOptions: false,
+  selectedOptionsCount: 0,
+  cardHeaderName: ''
+};
+export const MultiSelectHeader_defaultProps = {
+  dataId: 'MultiSelectHeader'
+};
+export const MultiSelectWithAvatar_defaultProps = {
+  animationStyle: 'bounce',
+  defaultDropBoxPosition: 'bottom',
+  dropBoxSize: 'small',
+  imageField: 'photoURL',
+  isAnimate: true,
+  isDisabled: false,
+  isReadOnly: false,
+  needLocalSearch: true,
+  needSelectAll: false,
+  size: 'medium',
+  textBoxSize: 'medium',
+  textField: 'text',
+  valueField: 'id',
+  variant: 'default',
+  dataId: 'multiSelectWithAvatar',
+  borderColor: 'default',
+  needBorder: true,
+  disableAction: false,
+  isSearchClearOnClose: true,
+  i18nKeys: {},
+  a11y: {},
+  palette: 'default',
+  isBoxPaddingNeed: true,
+  isSearchClearOnSelect: true,
+  needEffect: true,
+  isLoading: false,
+  dataSelectorId: 'multiSelectWithAvatar',
+  keepSelectedOptions: false,
+  customProps: {}
+};
+export const SelectedOptions_defaultProps = {
+  size: 'medium'
+};
+export const Suggestions_defaultProps = {
+  a11y: {}
+};