@zohodesk/components 1.2.10 → 1.2.12

package/es/MultiSelect/props/propTypes.js

@@ -1,142 +1,4 @@
 import PropTypes from 'prop-types';
-export const AdvancedGroupMultiSelect_propTypes = {
-  animationStyle: PropTypes.string,
-  autoComplete: PropTypes.bool,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  emptyMessage: PropTypes.string.isRequired,
-  getContainerRef: PropTypes.func,
-  getFooter: PropTypes.func,
-  groupedOptions: PropTypes.array.isRequired,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    clearLabel: PropTypes.string
-  }),
-  isDataLoaded: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isPadding: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  needBorder: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
-  notifyPopupToggle: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onSearch: PropTypes.func,
-  placeHolder: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  searchDebounceTime: PropTypes.number,
-  searchEmptyMessage: PropTypes.string,
-  selectAllText: PropTypes.string,
-  selectedGroupOptions: PropTypes.array.isRequired,
-  selectedOptionDetails: PropTypes.object,
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  title: PropTypes.string,
-  variant: PropTypes.string,
-  htmlId: PropTypes.string,
-  isSearchClearOnSelect: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'dark']),
-  needEffect: true,
-  dataSelectorId: PropTypes.string,
-  valueField: PropTypes.string,
-  textField: PropTypes.string,
-  getTargetRef: PropTypes.func,
-  togglePopup: PropTypes.func,
-  needLocalSearch: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  getNextOptions: PropTypes.func,
-  isPopupOpenOnEnter: PropTypes.bool,
-  onChange: PropTypes.func,
-  needToCloseOnSelect: PropTypes.func,
-  searchStr: PropTypes.string,
-  children: PropTypes.node,
-  dataSelectorId: PropTypes.string
-};
-export const AdvancedMultiSelect_propTypes = {
-  id: PropTypes.string.isRequired,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    photoURL: PropTypes.string
-  }))]).isRequired,
-  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
-  selectedOptionsLimit: PropTypes.number,
-  getSelectedOptionDetails: PropTypes.func,
-  emptyMessage: PropTypes.string.isRequired,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  needLocalSearch: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  searchEmptyMessage: PropTypes.string,
-  placeHolder: PropTypes.string,
-  selectAllText: PropTypes.string,
-  textField: PropTypes.string,
-  valueField: PropTypes.string,
-  imageField: PropTypes.string,
-  iconName: PropTypes.string,
-  prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  //For grouping multiSelect
-  optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
-  needEffect: PropTypes.bool,
-  animationStyle: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  isAnimate: PropTypes.bool,
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  title: PropTypes.string,
-  variant: PropTypes.string,
-  dataIdClearIcon: PropTypes.string,
-  dataIdLoading: PropTypes.string,
-  dataIdMultiSelectComp: PropTypes.string,
-  dataIdSelectAllEle: PropTypes.string,
-
-  /**** Popup Props ****/
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  needBorder: PropTypes.bool,
-  htmlId: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    clearText: PropTypes.string,
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    clearLabel: PropTypes.string
-  }),
-  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
-  isBoxPaddingNeed: PropTypes.bool,
-  isSearchClearOnSelect: PropTypes.bool,
-  disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object,
-    DropBoxProps: PropTypes.object
-  }),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
-};
 export const EmptyState_propTypes = {
   dataId: PropTypes.string,
   emptyMessage: PropTypes.string,
@@ -307,4 +169,144 @@ export const Suggestions_propTypes = {
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
   }))
+};
+export const AdvancedGroupMultiSelect_propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string.isRequired,
+  getContainerRef: PropTypes.func,
+  getFooter: PropTypes.func,
+  groupedOptions: PropTypes.array.isRequired,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  isDataLoaded: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  notifyPopupToggle: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectAllText: PropTypes.string,
+  selectedGroupOptions: PropTypes.array.isRequired,
+  selectedOptionDetails: PropTypes.object,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  variant: PropTypes.string,
+  htmlId: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  needEffect: true,
+  dataSelectorId: PropTypes.string,
+  valueField: PropTypes.string,
+  textField: PropTypes.string,
+  getTargetRef: PropTypes.func,
+  togglePopup: PropTypes.func,
+  needLocalSearch: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  getNextOptions: PropTypes.func,
+  isPopupOpenOnEnter: PropTypes.bool,
+  onChange: PropTypes.func,
+  needToCloseOnSelect: PropTypes.func,
+  searchStr: PropTypes.string,
+  children: PropTypes.node,
+  dataSelectorId: PropTypes.string
+};
+export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
+  selectedOptionDetails: PropTypes.string,
+  iconSize: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  selectedOptionsLimit: PropTypes.number,
+  getSelectedOptionDetails: PropTypes.func,
+  emptyMessage: PropTypes.string.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  searchEmptyMessage: PropTypes.string,
+  placeHolder: PropTypes.string,
+  selectAllText: PropTypes.string,
+  textField: PropTypes.string,
+  valueField: PropTypes.string,
+  imageField: PropTypes.string,
+  iconName: PropTypes.string,
+  prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  //For grouping multiSelect
+  optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
+  needEffect: PropTypes.bool,
+  animationStyle: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  isAnimate: PropTypes.bool,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  variant: PropTypes.string,
+  dataIdClearIcon: PropTypes.string,
+  dataIdLoading: PropTypes.string,
+  dataIdMultiSelectComp: PropTypes.string,
+  dataIdSelectAllEle: PropTypes.string,
+
+  /**** Popup Props ****/
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  togglePopup: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  htmlId: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  isBoxPaddingNeed: PropTypes.bool,
+  isSearchClearOnSelect: PropTypes.bool,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  getFooter: PropTypes.func,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };

package/es/Select/props/propTypes.js

@@ -171,7 +171,9 @@ export const GroupSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isDefaultSelectValue: PropTypes.bool
 };
-export const SelectWithAvatar_propTypes = {
+export const SelectWithAvatar_propTypes = { ...Select_propTypes,
+  textBoxClass: PropTypes.string,
+  imageField: PropTypes.string,
   animationStyle: PropTypes.string,
   avatarPalette: PropTypes.string,
   borderColor: PropTypes.oneOf(['transparent', 'default']),

package/es/v1/Accordion/Accordion.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { Accordion_defaultProps } from '../../Accordion/props/defaultProps';
 import { Accordion_propTypes } from '../../Accordion/props/propTypes';
 export default function Accordion(props) {
@@ -29,7 +30,7 @@ export default function Accordion(props) {
     !disableInternalState && setSelectedItem(selectedItem);
   }
 
-  useEffect(() => {
+  useEffectCallOnlyAfterState(() => {
     if (!disableInternalState) {
       setSelectedItem(propSelectedItem);
     }

package/es/v1/AppContainer/AppContainer.js

@@ -1,6 +1,6 @@
 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 React, { useEffect, useRef, useLayoutEffect } from 'react';
 import { defaultProps } from '../../AppContainer/props/defaultProps';
 import { propTypes } from '../../AppContainer/props/propTypes';
 import { Container, Box } from '../Layout';
@@ -17,116 +17,99 @@ import '../../common/a11y.module.css';
 import '../../common/boxShadow.module.css';
 import style from '../../AppContainer/AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../../Provider/Config';
-export default class AppContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.setTooltipRef = this.setTooltipRef.bind(this);
-    this.handleOver = this.handleOver.bind(this);
-    this.mouseOverDispatch = this.mouseOverDispatch.bind(this);
-    this.removeTimeout = this.removeTimeout.bind(this);
-    this.getContainerRef = this.getContainerRef.bind(this);
-    this.timer = null;
-    this.tooltipDebounce = getLibraryConfig('tooltipDebounce');
+export default function AppContainer(props) {
+  let {
+    className,
+    children,
+    tagName,
+    dataId,
+    dataSelectorId,
+    tooltipClass,
+    tooltipParentClass,
+    needTooltip,
+    customProps,
+    eleRef
+  } = props;
+  let {
+    ContainerProps = {},
+    TooltipProps = {},
+    ExtraProps = {}
+  } = customProps;
+  const tooltipRef = useRef(null);
+  const containerElement = useRef(null);
+  const timer = useRef(null);
+  const tooltipDebounce = useRef(getLibraryConfig('tooltipDebounce'));
+  useLayoutEffect(() => {
     setLibraryConfig({
-      getTooltipContainer: () => this.containerElement
+      getTooltipContainer: () => containerElement.current
     });
-  }
+  }, []);
 
-  mouseOverDispatch(e) {
-    if (this.tooltipRef) {
-      this.tooltipRef.handleOver(e, this.containerElement);
+  function mouseOverDispatch(e) {
+    if (tooltipRef.current) {
+      tooltipRef.current.handleOver(e, containerElement.current);
     }
   }
 
-  removeTimeout() {
-    if (this.timer) {
-      this.timer = clearTimeout(this.timer);
+  function removeTimeout() {
+    if (timer.current) {
+      timer.current = clearTimeout(timer.current);
     }
   }
 
-  handleOver(e) {
-    if (this.timer) {
-      this.timer = clearTimeout(this.timer);
+  function handleOver(e) {
+    if (timer.current) {
+      timer.current = clearTimeout(timer.current);
     }
 
-    this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
+    timer.current = setTimeout(() => mouseOverDispatch(e), tooltipDebounce.current);
   }
 
-  getContainerRef(ref) {
-    let {
-      eleRef
-    } = this.props;
-    this.containerElement = ref;
+  function getContainerRef(ref) {
+    containerElement.current = ref;
     eleRef && eleRef(ref);
   }
 
-  setTooltipRef(ref) {
-    this.tooltipRef = ref;
-  }
-
-  componentDidMount() {
-    let {
-      needTooltip
-    } = this.props;
-
-    if (this.containerElement && needTooltip) {
-      this.containerElement.addEventListener('mouseover', this.handleOver, false);
-      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
-      this.tooltipRef.observeElement();
-    }
+  function setTooltipRef(ref) {
+    tooltipRef.current = ref;
   }
 
-  componentWillUnmount() {
-    let {
-      needTooltip
-    } = this.props;
-
-    if (this.containerElement && needTooltip) {
-      this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
-      this.tooltipRef.unObserveElement();
-      setLibraryConfig({
-        getTooltipContainer: () => null
-      });
+  useEffect(() => {
+    if (containerElement.current && needTooltip) {
+      containerElement.current.addEventListener('mouseover', handleOver, false);
+      containerElement.current.addEventListener('mouseout', removeTimeout, false);
+      tooltipRef.current.observeElement();
     }
-  }
-
-  render() {
-    let {
-      className,
-      children,
-      tagName,
-      dataId,
-      dataSelectorId,
-      tooltipClass,
-      tooltipParentClass,
-      needTooltip,
-      customProps
-    } = this.props;
-    let {
-      ContainerProps = {},
-      TooltipProps = {},
-      ExtraProps = {}
-    } = customProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${style.container} ${className}`,
-      dataId: dataId,
-      dataSelectorId: dataSelectorId,
-      tagName: tagName,
-      eleRef: this.getContainerRef
-    }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
-      className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
-      "data-id": `${dataId}_tooltip`,
-      "data-test-id": `${dataId}_tooltip`,
-      "data-selector-id": `${dataSelectorId}_tooltip`
-    }), /*#__PURE__*/React.createElement(Tooltip, _extends({
-      ref: this.setTooltipRef,
-      customClass: tooltipClass
-    }, TooltipProps))) : null);
-  }
-
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (containerElement.current && needTooltip) {
+        containerElement.current.removeEventListener('mouseover', handleOver, false);
+        containerElement.current.addEventListener('mouseout', removeTimeout, false);
+        tooltipRef.current.unObserveElement();
+        setLibraryConfig({
+          getTooltipContainer: () => null
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
+    className: `${style.container} ${className}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId,
+    tagName: tagName,
+    eleRef: getContainerRef
+  }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
+    className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
+    "data-id": `${dataId}_tooltip`,
+    "data-test-id": `${dataId}_tooltip`,
+    "data-selector-id": `${dataSelectorId}_tooltip`
+  }), /*#__PURE__*/React.createElement(Tooltip, _extends({
+    ref: setTooltipRef,
+    customClass: tooltipClass
+  }, TooltipProps))) : null);
 }
 AppContainer.propTypes = propTypes;
 AppContainer.defaultProps = defaultProps; // if (__DOCS__) {