@zohodesk/dot 1.2.2 → 1.2.4

package/es/v1/list/index.js

@@ -0,0 +1,17 @@
+export { default as AvatarFlip } from './AvatarFlip/AvatarFlip';
+export { default as BluePrintStatus } from './BluePrintStatus/BluePrintStatus';
+export { default as Comment } from './Comment/Comment';
+export { default as DepartmentDropDown } from './DepartmentDropDown/DepartmentDropDown';
+export { default as Dot } from './Dot/Dot';
+export { default as DotNew } from './DotNew/DotNew';
+export { default as GridStencils } from './GridStencils/GridStencils';
+export { default as ListLayout, Column } from './ListLayout/ListLayout';
+export { default as ListStencils } from './ListStencils/ListStencils';
+export { default as SecondryPanel, SecondryPanelUL, SecondryPanelLI, SecondryPanelItem } from './SecondryPanel/SecondryPanel';
+export { default as SentimentStatus } from './SentimentStatus/SentimentStatus';
+export { default as StatusDropdown } from './status/StatusDropdown/StatusDropdown';
+export { default as StatusListItem } from './status/StatusListItem/StatusListItem';
+export { default as Subject } from './Subject/Subject';
+export { default as TagNew } from './TagNew/TagNew';
+export { default as Thread } from './Thread/Thread';
+export { default as UserTime } from './UserTime/UserTime';

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

@@ -0,0 +1,465 @@
+import React from 'react';
+import { defaultProps } from '../../../../list/status/StatusDropdown/props/defaultProps';
+import { propTypes } from '../../../../list/status/StatusDropdown/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import { Box, Container } from '@zohodesk/components/lib/Layout';
+import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
+import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
+import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import StatusListItem from '../StatusListItem/StatusListItem';
+import commonStyle from '@zohodesk/components/lib/common/common.module.css';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import style from '../../../../list/status/StatusDropdown/StatusDropdown.module.css';
+export class StatusDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchString: '',
+      selectedIndex: 0,
+      options: props.options
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.onSelect = this.onSelect.bind(this);
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.onSearchClear = this.onSearchClear.bind(this);
+    this.searchList = this.searchList.bind(this);
+    this.scrollContentRef = this.scrollContentRef.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.searchInputRef = this.searchInputRef.bind(this);
+    this.itemRef = this.itemRef.bind(this);
+    this.inputRef = this.inputRef.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.emptySearchSVG = this.emptySearchSVG.bind(this);
+    this.getAriaId = getUniqueId(this);
+  }
+
+  emptySearchSVG() {
+    return /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    });
+  }
+
+  inputRef(el) {
+    this.hiddenInput = el;
+  }
+
+  itemRef(ele, index, id) {
+    this[`suggestion_${id}`] = ele;
+  }
+
+  searchInputRef(el) {
+    this.searchInput = el;
+  }
+
+  handleTogglePopup(e) {
+    let {
+      togglePopup,
+      boxPosition,
+      onSelectLabel,
+      isPopupOpen,
+      onTogglePopup
+    } = this.props;
+    !isPopupOpen && onSelectLabel && onSelectLabel(e);
+    onTogglePopup && onTogglePopup(isPopupOpen);
+    togglePopup(e, boxPosition);
+  }
+
+  scrollContentRef(el) {
+    let {
+      isPopupOpen
+    } = this.props;
+
+    if (isPopupOpen) {
+      this.optionsContainer = el;
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.options.length != this.props.options.length) {
+      this.setState({
+        options: nextProps.options
+      });
+    }
+  }
+
+  onSelect(element, e) {
+    let {
+      onClick,
+      togglePopup,
+      isPopupOpen,
+      onTogglePopup
+    } = this.props;
+    onClick && onClick(e, element);
+    onTogglePopup && onTogglePopup(isPopupOpen);
+    togglePopup(e);
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isPopupOpen,
+      isSearch,
+      idName
+    } = this.props;
+    let {
+      selectedIndex,
+      options
+    } = this.state;
+
+    if (prevProps.isPopupOpen != isPopupOpen) {
+      setTimeout(() => {
+        isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
+      }, 10);
+    }
+
+    let mergeOptions = options;
+    let option = mergeOptions[selectedIndex];
+    let id = option && option[idName] || {};
+    let selSuggestion = this[`suggestion_${id}`];
+
+    if (isPopupOpen) {
+      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
+    }
+
+    if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
+      this.onSearchClear();
+    }
+  }
+
+  handleKeyDown(e) {
+    let {
+      keyCode
+    } = e;
+    let {
+      selectedIndex,
+      options
+    } = this.state;
+    let totalIndex = options.length;
+    let {
+      togglePopup,
+      onClick,
+      boxPosition,
+      isPopupReady,
+      isNextOptions,
+      getNextOptions,
+      onTogglePopup,
+      isPopupOpen
+    } = this.props;
+
+    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+      e.preventDefault(); //prevent body scroll
+    }
+
+    if (isPopupReady) {
+      switch (keyCode) {
+        case 40:
+          if (selectedIndex === totalIndex - 1) {
+            this.setState({
+              selectedIndex: 0
+            });
+          } else {
+            if (selectedIndex === totalIndex - 3) {
+              isNextOptions && getNextOptions && getNextOptions();
+            }
+
+            this.setState({
+              selectedIndex: selectedIndex + 1
+            });
+          }
+
+          break;
+
+        case 38:
+          if (selectedIndex === 0) {
+            this.setState({
+              selectedIndex: totalIndex - 1
+            });
+          } else {
+            this.setState({
+              selectedIndex: selectedIndex - 1
+            });
+          }
+
+          break;
+
+        case 13:
+          onClick && onClick(options[selectedIndex].name, e);
+          onTogglePopup && onTogglePopup(isPopupOpen);
+          togglePopup(e, boxPosition);
+          break;
+
+        default:
+          break;
+      }
+    } else {
+      if (keyCode === 13 || keyCode === 40) {
+        togglePopup(e, boxPosition);
+      }
+    }
+  }
+
+  searchList(value) {
+    let {
+      options,
+      keyName
+    } = this.props;
+    let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
+    return foptions;
+  }
+
+  handleChange(value, e) {
+    let foptions = this.searchList(value);
+    this.setState({
+      searchString: value,
+      selectedIndex: -1,
+      options: foptions
+    });
+  }
+
+  onSearchClear() {
+    let foptions = this.searchList('');
+    this.setState({
+      searchString: '',
+      options: foptions
+    });
+  }
+
+  handleMouseEnter(id, value, index, e) {
+    this.setState({
+      selectedIndex: index
+    });
+  }
+
+  handleScroll(e) {
+    const {
+      isNextOptions,
+      getNextOptions
+    } = this.props;
+
+    if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
+      isNextOptions && getNextOptions && getNextOptions(e);
+    }
+  }
+
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
+  render() {
+    let {
+      options,
+      selectedIndex
+    } = this.state;
+    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,
+      a11y = {}
+    } = this.props;
+    const {
+      tabIndex = 0,
+      ariaLabelledby,
+      ariaLabel
+    } = a11y;
+    let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
+    let {
+      searchString
+    } = this.state;
+    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 = this.getAriaId();
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.posRel,
+      onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
+      onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
+    }, /*#__PURE__*/React.createElement(Container, {
+      tagName: "button",
+      alignBox: "row",
+      className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
+      onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
+      eleRef: getTargetRef,
+      align: targetAlign,
+      isCover: false,
+      dataId: dataId,
+      onClick: removeClose,
+      disabled: isDisabled || isReadOnly ? true : false,
+      "aria-haspopup": true,
+      "aria-expanded": isPopupOpen && isEditable ? true : false,
+      tabIndex: tabIndex,
+      "aria-labelledby": ariaLabelledby,
+      "aria-label": ariaLabel,
+      "aria-disabled": isDisabled || isReadOnly
+    }, isEditable ? /*#__PURE__*/React.createElement("div", {
+      className: style.hiddenInput
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      type: "text",
+      inputRef: this.inputRef,
+      onKeyDown: this.handleKeyDown,
+      needAppearance: false,
+      placeHolder: placeHolderText
+    })) : null, children ? children : /*#__PURE__*/React.createElement(Box, {
+      className: `${style.value} toggleDropText`,
+      shrink: true,
+      tagName: "span",
+      "data-title": dataTitle
+    }, 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: this.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
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: style.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchString,
+        onClear: this.onSearchClear,
+        size: searchBoxSize,
+        inputRef: this.searchInputRef,
+        onKeyDown: this.handleKeyDown,
+        a11y: {
+          ariaHaspopup: true,
+          ariaExpanded: true,
+          role: 'combobox',
+          ariaActivedescendant: value,
+          ariaOwns: ariaTitleId
+        }
+      })) : null, title && options.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}`,
+        eleRef: this.scrollContentRef,
+        onScroll: this.handleScroll,
+        role: isSearch ? 'listbox' : 'menu',
+        "aria-labelledby": ariaTitleId,
+        tabindex: "0"
+      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+        key: i
+      }, /*#__PURE__*/React.createElement(StatusListItem, {
+        dataId: `dataid_${i}`,
+        value: item[keyName],
+        id: item[idName],
+        active: value === item[keyName],
+        onClick: this.onSelect.bind(this, item),
+        index: i,
+        highlight: selectedIndex === i,
+        needTick: needTick,
+        needBorder: false,
+        onMouseEnter: this.handleMouseEnter,
+        getRef: this.itemRef,
+        bulletColor: item[statusColor],
+        title: item[keyName],
+        needMultiLineText: needMultiLineText,
+        a11y: {
+          role: isSearch ? 'option' : 'menuitem',
+          ariaSelected: value === item[keyName]
+        }
+      })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+        className: style.svgWrapper,
+        title: searchErrorText || 'No results',
+        description: searchEmptyHint,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)))));
+    }) : null);
+  }
+
+} // if (__DOCS__) {
+//   StatusDropdown.docs = {
+//     componentGroup: 'Molecule'
+//   };
+// }
+
+StatusDropdown.defaultProps = defaultProps;
+StatusDropdown.propTypes = propTypes;
+export default Popup(StatusDropdown);

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

@@ -0,0 +1,122 @@
+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 { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+/**** Components ****/
+
+import { Icon } from '@zohodesk/icons';
+import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
+/**** CSS ****/
+
+import style from './StatusListItem.module.css';
+export default class StatusListItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+    this.getRef = this.getRef.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+  }
+
+  getRef(ele) {
+    this.ele = ele;
+    let {
+      index,
+      getRef,
+      id
+    } = this.props;
+    getRef && getRef(ele, index, id);
+  }
+
+  handleClick(e) {
+    let {
+      onClick,
+      id,
+      value,
+      index
+    } = this.props;
+    onClick && onClick(id, value, index, e);
+  }
+
+  handleMouseEnter(e) {
+    let {
+      onMouseEnter,
+      id,
+      value,
+      index
+    } = this.props;
+    onMouseEnter && onMouseEnter(id, value, index, e);
+  }
+
+  render() {
+    let {
+      size,
+      active,
+      highlight,
+      value,
+      autoHover,
+      palette,
+      title,
+      disableTitle,
+      needTick,
+      isLink,
+      href,
+      target,
+      needBorder,
+      isDisabled,
+      bulletColor,
+      a11y,
+      needMultiLineText
+    } = this.props;
+    let options = {};
+    let {
+      role,
+      ariaSelected,
+      ariaHidden = true
+    } = a11y;
+
+    if (isLink) {
+      options.href = href;
+      options.target = `_${target}`;
+    }
+
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      role: role,
+      "aria-selected": ariaSelected,
+      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 : ''}`,
+      dataId: String(value).replace("'", '_'),
+      onClick: !isDisabled && this.handleClick,
+      onMouseEnter: this.handleMouseEnter,
+      eleRef: this.getRef,
+      tagName: isLink ? 'a' : 'li',
+      "data-title": isDisabled ? disableTitle : null,
+      tabindex: isDisabled ? '-1' : '0'
+    }, options), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.statusType} ${style[bulletColor]}`
+    }), /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : title,
+      flexible: true,
+      shrink: true,
+      className: needMultiLineText ? style.multiLineValue : style.value
+    }, value), 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; // if (__DOCS__) {
+//   StatusListItem.docs = {
+//     componentGroup: 'StatusListItem',
+//     folderName: 'List'
+//   };
+// }

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

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

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

@@ -0,0 +1,65 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+import { defaultProps } from '../../../lookup/EmptyPage/props/defaultProps';
+import { propTypes } from '../../../lookup/EmptyPage/props/propTypes';
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
+import EmptyAccounts from '@zohodesk/svg/lib/emptystate/version3/EmptyAccounts';
+import EmptyContact from '@zohodesk/svg/lib/emptystate/version3/EmptyContact';
+import EmptyProducts from '@zohodesk/svg/lib/emptystate/version3/EmptyProducts';
+/*** CSS ***/
+
+import style from '../../../lookup/EmptyPage/LookupEmptyPage.module.css';
+export default class EmptyPage extends Component {
+  constructor(props) {
+    super(props);
+    this.renderEmptyState = this.renderEmptyState.bind();
+  }
+
+  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;
+    }
+  }
+
+  render() {
+    let {
+      type,
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container,
+      "data-id": `empty_${type}`,
+      "data-test-id": `empty_${type}`
+    }, this.renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
+      className: style.contentDiv
+    }, title));
+  }
+
+}
+EmptyPage.propTypes = propTypes;
+EmptyPage.defaultProps = defaultProps; // if (__DOCS__) {
+//   EmptyPage.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }