@zohodesk/components 1.1.0 → 1.2.0-temp-195

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

@@ -0,0 +1,312 @@
+import PropTypes from 'prop-types';
+export const EmptyState_propTypes = {
+  dataId: PropTypes.string,
+  emptyMessage: PropTypes.string,
+  getCustomEmptyState: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  palette: PropTypes.oneOf(['default', 'dark']),
+  isLoading: PropTypes.bool,
+  noMoreOptionsMessage: PropTypes.string,
+  options: PropTypes.array,
+  searchEmptyMessage: PropTypes.string,
+  searchString: PropTypes.string,
+  suggestions: PropTypes.array,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  })
+};
+export const MultiSelect_propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  disableAction: PropTypes.bool,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string.isRequired,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getPublicMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  isAnimate: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  isSearching: PropTypes.bool,
+  needAutoFocus: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needToCloseOnSelect: PropTypes.bool,
+  //For Group multiSelect
+  noMoreOptionsMessage: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  openPopupOnly: PropTypes.func,
+  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])
+  }))]).isRequired,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  prefixText: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxClass: PropTypes.string,
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  variant: PropTypes.string,
+  htmlId: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  children: PropTypes.node,
+  customChildrenClass: PropTypes.string,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  getFooter: PropTypes.func,
+  needEffect: PropTypes.bool,
+  boxSize: PropTypes.string,
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string,
+  keepSelectedOptions: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  selectAllText: PropTypes.string,
+  setAriaId: PropTypes.string,
+  ariaErrorId: PropTypes.string
+};
+export const MultiSelectHeader_propTypes = {
+  dataId: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectAllText: PropTypes.string,
+  suggestions: PropTypes.array
+};
+export const MultiSelectWithAvatar_propTypes = {
+  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,
+  imageField: PropTypes.string,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
+  ...MultiSelect_propTypes
+};
+export const SelectedOptions_propTypes = {
+  getRef: PropTypes.func,
+  highLightedSelectOptions: PropTypes.array,
+  isReadOnly: PropTypes.bool,
+  onRemove: PropTypes.func,
+  onSelect: PropTypes.func,
+  selectedOptions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string,
+    logo: PropTypes.string,
+    optionType: PropTypes.string
+  })),
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  palette: PropTypes.string
+};
+export const Suggestions_propTypes = {
+  a11y: PropTypes.shape({
+    ariaParentRole: PropTypes.string,
+    ariaMultiselectable: PropTypes.bool
+  }),
+  activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  avatarPalette: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  hoverId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hoverOption: PropTypes.number,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  palette: PropTypes.string,
+  selectedOptions: PropTypes.array,
+  htmlId: PropTypes.string,
+  suggestions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string,
+    logo: PropTypes.string,
+    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/v1/PopOver/PopOver.js

@@ -0,0 +1,176 @@
+import React, { useRef } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
+import { PopOver_defaultProps, PopOverContainer_defaultProps } from './props/defaultProps';
+import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from './props/propTypes';
+import Popup from '../Popup/Popup';
+import { Box } from '../Layout';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import style from '../../PopOver/PopOver.module.css';
+
+function PopOver(props) {
+  let {
+    children,
+    isPopupOpen,
+    removeClose,
+    right,
+    left,
+    top,
+    bottom,
+    arrowRight,
+    arrowLeft,
+    arrowTop,
+    arrowBottom,
+    isAnimate,
+    isArrow,
+    arrowPosition,
+    position,
+    size,
+    onClick,
+    isPopupReady,
+    getTargetRef,
+    getContainerRef,
+    boxPosition,
+    onPopupOpen,
+    onPopupClose
+  } = props;
+  const popOverTarget = useRef(null);
+  const popOverContainer = useRef(null);
+
+  const popOverTargetRef = el => {
+    popOverTarget.current = el;
+    getTargetRef(el);
+  };
+
+  const popOverContainerRef = el => {
+    popOverContainer.current = el;
+    getContainerRef(el);
+  };
+
+  const togglePopup = e => {
+    let {
+      togglePopup
+    } = props;
+    togglePopup(e, boxPosition);
+  };
+
+  useEffectCallOnlyAfterState(() => {
+    isPopupOpen && onPopupOpen && onPopupOpen();
+    !isPopupOpen && onPopupClose && onPopupClose();
+  }, [isPopupOpen]);
+  let childrens = React.Children.map(children, (child, index) => {
+    let element = index === 1 ? /*#__PURE__*/React.cloneElement(child, {
+      isPopupOpen,
+      togglePopup: togglePopup,
+      removeClose,
+      right,
+      left,
+      top,
+      bottom,
+      arrowRight,
+      arrowLeft,
+      arrowTop,
+      arrowBottom,
+      boxPosition: position,
+      isAnimate,
+      isArrow,
+      arrowPosition,
+      size,
+      onClick,
+      getRef: popOverContainerRef,
+      isPopupReady
+    }) : /*#__PURE__*/React.cloneElement(child, {
+      isPopupOpen,
+      togglePopup: togglePopup,
+      removeClose,
+      getRef: popOverTargetRef
+    });
+    return element;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.popup
+  }, childrens);
+}
+
+PopOver.defaultProps = PopOver_defaultProps;
+PopOver.propTypes = PopOver_propTypes;
+export default Popup(PopOver);
+export function PopOverTarget(props) {
+  let {
+    children,
+    togglePopup
+  } = props;
+
+  const getRef = el => {
+    let {
+      getRef
+    } = props;
+    getRef(el);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.target,
+    onClick: togglePopup,
+    ref: getRef
+  }, children);
+}
+PopOverTarget.propTypes = PopOverTarget_propTypes;
+export function PopOverContainer(props) {
+  let {
+    children,
+    isPopupOpen,
+    isAnimate,
+    isArrow,
+    size,
+    arrowPosition,
+    boxPosition,
+    right,
+    left,
+    top,
+    bottom,
+    arrowRight,
+    arrowLeft,
+    arrowTop,
+    arrowBottom,
+    animationStyle,
+    onClick,
+    removeClose
+  } = props;
+
+  const getRef = el => {
+    let {
+      getRef
+    } = props;
+    getRef && getRef(el);
+  };
+
+  const handleClick = e => {
+    removeClose && removeClose(e);
+    onClick && onClick();
+  };
+
+  return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+    animationStyle: animationStyle,
+    arrowBottom: arrowBottom,
+    arrowLeft: arrowLeft,
+    arrowPosition: arrowPosition,
+    arrowRight: arrowRight,
+    arrowTop: arrowTop,
+    bottom: bottom,
+    boxPosition: boxPosition,
+    getRef: getRef,
+    isActive: isPopupOpen,
+    isAnimate: isAnimate,
+    isArrow: isArrow,
+    left: left,
+    right: right,
+    size: size,
+    top: top,
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    scroll: "vertical"
+  }, children));
+}
+PopOverContainer.defaultProps = PopOverContainer_defaultProps;
+PopOverContainer.propTypes = PopOverContainer_propTypes;

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

@@ -0,0 +1,7 @@
+export const PopOver_defaultProps = {
+  isAnimate: false,
+  isArrow: false
+};
+export const PopOverContainer_defaultProps = {
+  isArrow: false
+};

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

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+export const PopOver_propTypes = {
+  arrowBottom: PropTypes.string,
+  arrowLeft: PropTypes.string,
+  arrowPosition: PropTypes.string,
+  arrowRight: PropTypes.string,
+  arrowTop: PropTypes.string,
+  bottom: PropTypes.string,
+  boxPosition: PropTypes.string,
+  children: PropTypes.node,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  isAnimate: PropTypes.bool,
+  isArrow: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  left: PropTypes.string,
+  onClick: PropTypes.func,
+  onPopupClose: PropTypes.func,
+  onPopupOpen: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  right: PropTypes.string,
+  size: PropTypes.string,
+  togglePopup: PropTypes.func,
+  top: PropTypes.string
+};
+export const PopOverTarget_propTypes = {
+  children: PropTypes.node,
+  getRef: PropTypes.func,
+  togglePopup: PropTypes.func
+};
+export const PopOverContainer_propTypes = {
+  animationStyle: PropTypes.string,
+  arrowBottom: PropTypes.string,
+  arrowLeft: PropTypes.string,
+  arrowPosition: PropTypes.string,
+  arrowRight: PropTypes.string,
+  arrowTop: PropTypes.string,
+  bottom: PropTypes.string,
+  boxPosition: PropTypes.string,
+  children: PropTypes.node,
+  getRef: PropTypes.func,
+  isAnimate: PropTypes.bool,
+  isArrow: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  left: PropTypes.string,
+  onClick: PropTypes.func,
+  removeClose: PropTypes.func,
+  right: PropTypes.string,
+  size: PropTypes.string,
+  top: PropTypes.string
+};