@zohodesk/components 1.2.18 → 1.2.20

package/es/v1/Modal/Modal.js

@@ -1,154 +1,126 @@
 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); }
 
-/**** Libraries ****/
-import React from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom';
-import { defaultProps } from '../../Modal/props/defaultProps';
-import { propTypes } from '../../Modal/props/propTypes';
+import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from '../../AppContainer/AppContainer.module.css';
 let createdPortalIds = [];
 let newPortalPrefix = 'CPortal';
 let portalChildrenTopIndexValues;
-export default class Modal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleAddPortalId = this.handleAddPortalId.bind(this);
-    this.handleRemovePortalId = this.handleRemovePortalId.bind(this);
-    this.handleInsertPortalDiv = this.handleInsertPortalDiv.bind(this);
-    this.getPortalDiv = this.getPortalDiv.bind(this);
-    this.state = {
-      isMounted: false
-    };
-    this.portalId = props.portalId;
-    this.setRef = this.setRef.bind(this);
-    this.ref = null; // this.portalDiv = document.createDocumentFragment();
-  }
-
-  setRef(ele) {
-    this.ref = ele;
-
-    if (this.isZIndexAppendNeeded) {
-      this.ref.style.zIndex = this.zIndex;
-      this.isZIndexAppendNeeded = false;
+export default function Modal(props) {
+  let {
+    children,
+    isActive,
+    autoZIndexNeeded,
+    portalId: propPortalId
+  } = props;
+  const [isMounted, setMounted] = useState(false);
+  const portalId = useRef(propPortalId);
+  const ref = useRef(null);
+  const isZIndexAppendNeeded = useRef();
+  const zIndex = useRef();
+  const modalRoot = useRef();
+  const newModalRoot = useRef();
+  const containerDiv = useRef();
+  const portalDiv = useRef(); // document.createDocumentFragment()
+
+  const isCustomPortalId = useRef();
+  const setRef = useCallback(ele => {
+    ref.current = ele;
+
+    if (isZIndexAppendNeeded.current) {
+      ref.current.style.zIndex = zIndex.current;
+      isZIndexAppendNeeded.current = false;
     }
-  }
-
-  getPortalDiv() {
-    this.modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.props.portalId}]`) : '';
-
-    if (!this.modalRoot) {
-      this.portalId = this.handleAddPortalId();
-      this.newModalRoot = document.createElement('div');
-      this.newModalRoot.className = style.container;
-      this.newModalRoot.setAttribute('data-portal', this.portalId);
-      this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
-      this.modalRoot = this.newModalRoot;
+  }, []);
+
+  function getPortalDiv() {
+    modalRoot.current = propPortalId ? document.querySelector(`[data-portal=${propPortalId}]`) : "";
+
+    if (!modalRoot.current) {
+      portalId.current = handleAddPortalId();
+      newModalRoot.current = document.createElement('div');
+      newModalRoot.current.className = style.container;
+      newModalRoot.current.setAttribute('data-portal', portalId.current);
+      containerDiv.current && containerDiv.current.appendChild(newModalRoot.current);
+      modalRoot.current = newModalRoot.current;
     }
 
-    return this.modalRoot;
+    return modalRoot.current;
   }
 
-  componentDidMount() {
-    this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
-    this.portalDiv = this.getPortalDiv();
-    this.setState({
-      isMounted: true
-    }, () => {
-      this.handleInsertPortalDiv();
+  useEffect(() => {
+    containerDiv.current = document.getElementsByTagName("desk")[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
+    portalDiv.current = getPortalDiv();
+    setMounted(true);
+    setTimeout(() => {
+      handleInsertPortalDiv();
     });
-  }
-
-  componentWillUnmount() {
-    //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
-    if (this.newModalRoot) {
-      this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
-      this.handleRemovePortalId();
-    }
-
-    if (this.zIndex && portalChildrenTopIndexValues === this.zIndex) {
-      portalChildrenTopIndexValues -= 1;
-    }
-  }
+    return () => {
+      // modalRoot.current && modalRoot.current.removeChild(portalDiv.current);
+      if (newModalRoot.current) {
+        containerDiv.current && containerDiv.current.removeChild(newModalRoot.current);
+        handleRemovePortalId();
+      }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.isActive != this.props.isActive) {
-      if (this.props.isActive) {
-        this.handleInsertPortalDiv();
-      } else if (this.zIndex && portalChildrenTopIndexValues === this.zIndex) {
+      if (zIndex.current && portalChildrenTopIndexValues === zIndex.current) {
         portalChildrenTopIndexValues -= 1;
       }
+    };
+  }, []);
+  useEffectCallOnlyAfterState(() => {
+    if (isActive) {
+      handleInsertPortalDiv();
+    } else if (zIndex.current && portalChildrenTopIndexValues === zIndex.current) {
+      portalChildrenTopIndexValues -= 1;
     }
-  }
-
-  handleInsertPortalDiv() {
-    let {
-      autoZIndexNeeded
-    } = this.props;
-
-    if (autoZIndexNeeded) {
-      let {
-        isActive
-      } = this.props;
-
-      if (isActive) {
-        let newHighValue = Number(portalChildrenTopIndexValues || 10) + 1;
-        portalChildrenTopIndexValues = newHighValue;
-        this.zIndex = newHighValue;
-
-        if (this.ref) {
-          this.ref.style.zIndex = newHighValue;
-        } else {
-          this.isZIndexAppendNeeded = true;
-        }
+  }, [isActive]);
+
+  function handleInsertPortalDiv() {
+    if (autoZIndexNeeded && isActive) {
+      let newHighValue = Number(portalChildrenTopIndexValues || 10) + 1;
+      portalChildrenTopIndexValues = newHighValue;
+      zIndex.current = newHighValue;
+
+      if (ref.current) {
+        ref.current.style.zIndex = newHighValue;
+      } else {
+        isZIndexAppendNeeded.current = true;
       }
     }
   }
 
-  handleAddPortalId() {
+  function handleAddPortalId() {
     let createdPortalIdsLen = createdPortalIds.length;
     let newPortalId = createdPortalIdsLen ? createdPortalIds[createdPortalIdsLen - 1] + 1 : 1;
     createdPortalIds.push(newPortalId);
-    this.portalId = newPortalId;
-    this.isCustomPortalId = true;
+    portalId.current = newPortalId;
+    isCustomPortalId.current = true;
     return `${newPortalPrefix}${newPortalId}`;
   }
 
-  handleRemovePortalId() {
-    if (this.isCustomPortalId) {
-      createdPortalIds = createdPortalIds.filter(id => id !== this.portalId);
+  function handleRemovePortalId() {
+    if (isCustomPortalId.current) {
+      createdPortalIds = createdPortalIds.filter(id => id !== portalId.current);
     }
   }
 
-  render() {
-    let {
-      children
-    } = this.props,
-        {
-      isMounted
-    } = this.state;
-    let Element = children.type,
-        elementProps = children.props;
-
-    if (isMounted) {
-      if (Element) {
-        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
-          ref: this.setRef
-        }, elementProps)), this.portalDiv);
-      }
+  let Element = children.type,
+      elementProps = children.props;
 
-      return null;
+  if (isMounted) {
+    if (Element) {
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
+        ref: setRef
+      }, elementProps)), portalDiv.current);
     }
 
     return null;
   }
 
+  return null;
 }
 Modal.defaultProps = defaultProps;
-Modal.propTypes = propTypes; // if (__DOCS__) {
-//   Modal.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     external: false,
-//     description: ' '
-//   };
-// }
+Modal.propTypes = propTypes;

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