@zohodesk/dot 1.9.1 → 1.9.3

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -1,307 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Icon } from '@zohodesk/icons';
-import Popup from '@zohodesk/components/es/v1/Popup/Popup';
-import { Box, Container } from '@zohodesk/components/es/v1/Layout';
-import DropDownHeading from '@zohodesk/components/es/v1/DropDown/DropDownHeading';
-import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
-import Loader from '@zohodesk/svg/es/Loader/Loader';
-import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
-import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
-import StatusListItem from "../StatusListItem/StatusListItem";
-import commonStyle from '@zohodesk/components/es/common/common.module.css';
-import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
-import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
-import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
-import style from "../../../../list/status/StatusDropdown/StatusDropdown.module.css";
-
-function StatusDropdown(props) {
-  let {
-    value,
-    removeClose,
-    boxSize,
-    keyName,
-    idName,
-    title,
-    isSearch,
-    isArrow,
-    placeHolderText,
-    className,
-    right,
-    left,
-    top,
-    bottom,
-    isPopupOpen: isOpen,
-    isPopupReady,
-    position,
-    getTargetRef,
-    getContainerRef,
-    dataId,
-    searchBoxSize,
-    searchEmptyHint,
-    searchErrorText,
-    activeStyle,
-    showOnHover = false,
-    isDisabled,
-    showIconOnHover,
-    isReadOnly,
-    hoverStyle,
-    isEditable,
-    needTick,
-    dataTitle,
-    isDataLoaded,
-    children,
-    targetAlign,
-    needResponsive,
-    arrowIconPosition,
-    statusColor,
-    needExternalPopupState = false,
-    isPopupActive = false,
-    needMultiLineText,
-    boxPosition,
-    togglePopup,
-    onTogglePopup,
-    onClick,
-    onSelectLabel,
-    isFetchingOptions,
-    getNextOptions,
-    options,
-    isAbsolutePositioningNeeded,
-    isRestrictScroll,
-    positionsOffset,
-    targetOffset,
-    renderTargetElement,
-    renderFooterElement,
-    a11y = {}
-  } = props;
-  const [optionsList, setOptionsList] = useState(options);
-  const [searchString, setSearchString] = useState('');
-  const getAriaId = useUniqueId();
-  const {
-    tabIndex = 0,
-    ariaLabelledby,
-    ariaLabel
-  } = a11y;
-  let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
-  let containerClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
-  let ariaTitleId = getAriaId();
-
-  function emptySearchSVG() {
-    return /*#__PURE__*/React.createElement(EmptySearch, {
-      size: "small"
-    });
-  }
-
-  function handleTogglePopup(e) {
-    !isPopupOpen && onSelectLabel && onSelectLabel(e);
-    onTogglePopup && onTogglePopup(isPopupOpen);
-    togglePopup(e, boxPosition);
-  }
-
-  function onSelect(element, e) {
-    onClick && onClick(e, element);
-    onTogglePopup && onTogglePopup(isPopupOpen);
-    togglePopup(e);
-  }
-
-  function searchList(value) {
-    let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
-    return foptions;
-  }
-
-  function handleChange(value, e) {
-    let foptions = searchList(value);
-    setSearchString(value);
-    setOptionsList(foptions);
-  }
-
-  function onSearchClear() {
-    let foptions = searchList('');
-    setSearchString('');
-    setOptionsList(foptions);
-  }
-
-  function handleScroll(e) {
-    if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-      getNextOptions && getNextOptions(e);
-    }
-  }
-
-  function responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
-  useEffectCallOnlyAfterState(() => {
-    setOptionsList(options);
-  }, [options.length]);
-  useEffectCallOnlyAfterState(() => {
-    isPopupOpen && onSearchClear();
-  }, [isPopupOpen]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.posRel,
-    onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined,
-    onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined
-  }, renderTargetElement ? renderTargetElement({
-    handleTogglePopup,
-    isPopupOpen,
-    getTargetRef
-  }) : /*#__PURE__*/React.createElement(Container, {
-    tagName: "button",
-    alignBox: "row",
-    className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
-    onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : null,
-    eleRef: getTargetRef,
-    align: targetAlign,
-    isCover: false,
-    dataId: dataId,
-    disabled: isDisabled || isReadOnly ? true : false,
-    "aria-haspopup": isSearch ? 'listbox' : 'menu',
-    "aria-expanded": isPopupReady && isEditable ? true : false,
-    tabIndex: tabIndex,
-    "aria-labelledby": ariaLabelledby,
-    "aria-label": ariaLabel,
-    "aria-disabled": isDisabled || isReadOnly
-  }, children ? children : /*#__PURE__*/React.createElement(Box, {
-    className: `${style.value} toggleDropText`,
-    shrink: true,
-    tagName: "span",
-    "data-title": dataTitle,
-    dataId: `${dataId}_value`
-  }, value), isEditable ? /*#__PURE__*/React.createElement(Icon, {
-    "aria-hidden": true,
-    size: "7",
-    name: "ZD-down",
-    iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
-    dataId: "statusdownarrow"
-  }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-    query: responsiveFunc,
-    responsiveId: "Helmet"
-  }, _ref2 => {
-    let {
-      tabletMode
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-      boxPosition: position,
-      isActive: isPopupReady,
-      onClick: removeClose,
-      size: boxSize,
-      right: right,
-      left: left,
-      top: top,
-      bottom: bottom,
-      isArrow: isArrow,
-      isAnimate: true,
-      getRef: getContainerRef,
-      customClass: {
-        customDropBoxWrap: style.dropBoxContainer
-      },
-      needResponsive: needResponsive,
-      isResponsivePadding: true,
-      needFocusScope: true,
-      onClose: handleTogglePopup,
-      dataId: `${dataId}_dropbox`,
-      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-      isRestrictScroll: isRestrictScroll,
-      positionsOffset: positionsOffset,
-      targetOffset: targetOffset,
-      customProps: {
-        focusScopeProps: {
-          searchValue: searchString,
-          loadNextOptions: getNextOptions,
-          isFetchingOptions: isFetchingOptions
-        }
-      }
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
-      className: style.search
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-      placeHolder: placeHolderText,
-      onChange: handleChange,
-      value: searchString,
-      onClear: onSearchClear,
-      size: searchBoxSize,
-      customProps: {
-        TextBoxProps: {
-          'data-a11y-autofocus': true
-        }
-      },
-      a11y: {
-        ariaHaspopup: isSearch ? 'listbox' : 'menu',
-        ariaExpanded: isPopupReady,
-        role: 'combobox',
-        ariaActivedescendant: isPopupReady ? value : '',
-        ariaOwns: ariaTitleId
-      },
-      dataId: `${dataId}_search`
-    })) : null, title && optionsList.length != 0 && /*#__PURE__*/React.createElement(Box, {
-      className: style.title
-    }, /*#__PURE__*/React.createElement(DropDownHeading, {
-      htmlId: ariaTitleId,
-      text: title,
-      a11y: {
-        role: 'heading'
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      scroll: "vertical",
-      flexible: true,
-      shrink: true,
-      dataId: `${dataId}_list`,
-      preventParentScroll: "vertical",
-      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
-      onScroll: handleScroll,
-      role: isSearch ? 'listbox' : 'menu',
-      tabindex: "-1",
-      isScrollAttribute: true
-    }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, optionsList.map((item, i) => {
-      const listItemText = item[keyName];
-      const isActive = value === listItemText;
-      return /*#__PURE__*/React.createElement(StatusListItem, {
-        key: i,
-        dataId: `dataid_${i}`,
-        value: listItemText,
-        id: item[idName],
-        active: isActive,
-        onClick: e => onSelect(item, e),
-        index: i,
-        needTick: needTick,
-        needBorder: false,
-        bulletColor: item[statusColor],
-        title: listItemText,
-        needMultiLineText: needMultiLineText,
-        autoHover: true,
-        a11y: {
-          role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: isActive,
-          ariaLabel: listItemText
-        }
-      });
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Loader, null))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
-      className: style.svgWrapper,
-      title: searchErrorText || 'No results',
-      description: searchEmptyHint,
-      size: "small",
-      getEmptyState: emptySearchSVG
-    }) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null));
-  }) : null);
-}
-
-StatusDropdown.defaultProps = defaultProps;
-StatusDropdown.propTypes = propTypes;
-const StatusDropdown_Component = Popup(StatusDropdown);
-StatusDropdown_Component.defaultProps = defaultProps;
-StatusDropdown_Component.propTypes = propTypes;
-export default StatusDropdown_Component;

package/es/v1/list/status/StatusDropdown/props/defaultProps.js

@@ -1,22 +0,0 @@
-export const defaultProps = {
-  keyName: 'name',
-  idName: 'key',
-  isArrow: false,
-  searchBoxSize: 'small',
-  isDisabled: false,
-  showIconOnHover: false,
-  isReadOnly: false,
-  isEditable: true,
-  isDataLoaded: true,
-  needTick: true,
-  targetAlign: 'vertical',
-  needResponsive: true,
-  arrowIconPosition: 'default',
-  boxSize: 'medium',
-  needExternalPopupState: false,
-  statusColor: 'statusColor',
-  needMultiLineText: false,
-  isFetchingOptions: false,
-  isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
-};

package/es/v1/list/status/StatusDropdown/props/propTypes.js

@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  activeStyle: PropTypes.string,
-  arrowIconPosition: PropTypes.oneOf(['default', 'overlay']),
-  bottom: PropTypes.number,
-  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
-  boxSize: PropTypes.oneOf(['small', 'medium', 'mlarge', 'large']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  hoverStyle: PropTypes.string,
-  idName: PropTypes.string,
-  isArrow: PropTypes.bool,
-  isDataLoaded: PropTypes.bool,
-  isDataLoaded: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isEditable: PropTypes.bool,
-  isFetchingOptions: PropTypes.bool,
-  isPopupActive: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearch: PropTypes.bool,
-  keyName: PropTypes.string,
-  left: PropTypes.number,
-  needExternalPopupState: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onClick: PropTypes.func,
-  onTogglePopup: PropTypes.func,
-  options: PropTypes.array.isRequired,
-  placeHolderText: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  right: PropTypes.number,
-  searchBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  searchEmptyHint: PropTypes.string,
-  searchErrorText: PropTypes.string,
-  showIconOnHover: PropTypes.bool,
-  showOnHover: PropTypes.bool,
-  statusColor: PropTypes.string,
-  targetAlign: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around']),
-  title: PropTypes.string,
-  togglePopup: PropTypes.func,
-  value: PropTypes.node,
-  needMultiLineText: PropTypes.bool,
-  onSelectLabel: PropTypes.func,
-  top: PropTypes.number,
-  isAbsolutePositioningNeeded: PropTypes.bool,
-  isRestrictScroll: PropTypes.bool,
-  positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object,
-  renderTargetElement: PropTypes.func,
-  renderFooterElement: PropTypes.node,
-  a11y: PropTypes.object
-};

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -1,108 +0,0 @@
-/**** Libraries ****/
-import React, { useRef } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/es/v1/Layout';
-/**** Components ****/
-
-import { Icon } from '@zohodesk/icons';
-import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
-/**** CSS ****/
-
-import style from "../../../../list/status/StatusListItem/StatusListItem.module.css";
-export default function StatusListItem(props) {
-  let {
-    size,
-    active,
-    highlight,
-    value,
-    autoHover,
-    palette,
-    title,
-    disableTitle,
-    needTick,
-    isLink,
-    href,
-    target,
-    needBorder,
-    isDisabled,
-    bulletColor,
-    a11y,
-    needMultiLineText,
-    index,
-    getRef,
-    id,
-    onClick,
-    onMouseEnter,
-    customClass,
-    children
-  } = props;
-  let options = {};
-  let {
-    role,
-    ariaSelected,
-    ariaHidden = true,
-    ariaLabel,
-    insetFocus = true
-  } = a11y;
-
-  if (isLink) {
-    options.href = href;
-    options.target = `_${target}`;
-  }
-
-  const element = useRef(null);
-
-  function getReference(ele) {
-    element.current = ele;
-    getRef && getRef(element.current, index, id);
-  }
-
-  function handleClick(e) {
-    onClick && onClick(id, value, index, e);
-  }
-
-  function handleMouseEnter(e) {
-    onMouseEnter && onMouseEnter(id, value, index, e);
-  }
-
-  return /*#__PURE__*/React.createElement(Container, {
-    role: role,
-    "aria-selected": ariaSelected,
-    "aria-label": ariaLabel,
-    "data-a11y-inset-focus": insetFocus,
-    isCover: false,
-    align: "baseline",
-    alignBox: "row",
-    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
-    dataId: String(value).replace("'", '_'),
-    onClick: !isDisabled && handleClick,
-    onMouseEnter: handleMouseEnter,
-    eleRef: getReference,
-    tagName: isLink ? 'a' : 'li',
-    "data-title": isDisabled ? disableTitle : null,
-    tabindex: isDisabled ? '-1' : '0',
-    ...options,
-    ...a11y
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: `${style.statusType} ${style[bulletColor]}`
-  }), /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    shrink: true
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: needMultiLineText ? 'top' : 'vertical'
-  }, /*#__PURE__*/React.createElement(Box, {
-    "data-title": isDisabled ? null : title,
-    shrink: true,
-    className: needMultiLineText ? style.multiLineValue : style.value
-  }, value), /*#__PURE__*/React.createElement(Box, null, children && children))), needTick && active ? /*#__PURE__*/React.createElement("div", {
-    className: style.tickIcon,
-    "aria-hidden": ariaHidden
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "ZD-ticknew",
-    size: "8"
-  })) : null);
-}
-StatusListItem.defaultProps = defaultProps;
-StatusListItem.propTypes = propTypes;

package/es/v1/list/status/StatusListItem/props/defaultProps.js

@@ -1,16 +0,0 @@
-export const defaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  id: '',
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  isLink: false,
-  target: 'blank',
-  needBorder: true,
-  bulletColor: 'black',
-  a11y: {},
-  needMultiLineText: false,
-  customClass: ''
-};

package/es/v1/list/status/StatusListItem/props/propTypes.js

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  active: PropTypes.bool,
-  autoHover: PropTypes.bool,
-  bulletColor: PropTypes.oneOf(['black', 'orange', 'green']),
-  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']),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  target: PropTypes.oneOf(['blank', 'self']),
-  title: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  needMultiLineText: PropTypes.bool,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaSelected: PropTypes.bool,
-    ariaHidden: PropTypes.bool
-  }),
-  customClass: PropTypes.string,
-  children: PropTypes.node
-};

package/es/v1/list/status/index.js

@@ -1,2 +0,0 @@
-export { default as StatusDropdown } from "./StatusDropdown/StatusDropdown";
-export { default as StatusListItem } from "./StatusListItem/StatusListItem";

package/es/v1/lookup/EmptyPage/EmptyPage.js

@@ -1,54 +0,0 @@
-/*** Libraries ***/
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
-import EmptyAccounts from '@zohodesk/svg/es/emptystate/version3/EmptyAccounts';
-import EmptyContact from '@zohodesk/svg/es/emptystate/version3/EmptyContact';
-import EmptyProducts from '@zohodesk/svg/es/emptystate/version3/EmptyProducts';
-/*** CSS ***/
-
-import style from "../../../lookup/EmptyPage/LookupEmptyPage.module.css";
-export default function EmptyPage(props) {
-  let {
-    type,
-    title
-  } = props;
-
-  function renderEmptyState(type) {
-    switch (type) {
-      case 'search':
-        return /*#__PURE__*/React.createElement(EmptySearch, {
-          className: style.image
-        });
-
-      case 'account':
-        return /*#__PURE__*/React.createElement(EmptyAccounts, {
-          className: style.image
-        });
-
-      case 'contact':
-        return /*#__PURE__*/React.createElement(EmptyContact, {
-          className: style.image
-        });
-
-      case 'product':
-        return /*#__PURE__*/React.createElement(EmptyProducts, {
-          className: style.image
-        });
-
-      default:
-        return null;
-    }
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.container,
-    "data-id": `empty_${type}`,
-    "data-test-id": `empty_${type}`
-  }, renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
-    className: style.contentDiv
-  }, title));
-}
-EmptyPage.propTypes = propTypes;
-EmptyPage.defaultProps = defaultProps;

package/es/v1/lookup/EmptyPage/props/defaultProps.js

@@ -1,4 +0,0 @@
-export const defaultProps = {
-  title: 'No Results Found',
-  type: 'search'
-};

package/es/v1/lookup/EmptyPage/props/propTypes.js

@@ -1,5 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['search', 'account', 'contact', 'product'])
-};