@zohodesk/dot 1.2.0 → 1.2.2

package/es/list/listCommon.module.css

@@ -2,59 +2,77 @@
   display: inline-block;
   vertical-align: middle;
 }
+
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .avatarMargin {
   margin-right: var(--zd_size25) ;
 }
+
 [dir=rtl] .avatarMargin {
   margin-left: var(--zd_size25) ;
 }
+
 .subject {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   font-size: var(--zd_font_size16) ;
 }
+
 .secondaryPanel {
   line-height: var(--zd_size18);
   composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .statusColumn {
   composes: inlineBlockMiddle;
 }
+
 [dir=ltr] .statusColumn {
   text-align: right;
 }
+
 [dir=rtl] .statusColumn {
   text-align: left;
 }
+
 .classic .floatingIconContainer {
   display: none;
 }
+
 .compact .floatingIconContainer,
 .superCompact .floatingIconContainer,
 .listContainer:hover .classic .floatingIconContainer,
-.hoveredStyle .classic .floatingIconContainer {
+.hoveredStyle .classic .floatingIconContainer,
+.compact:focus-within .floatingIconContainer,
+.superCompact:focus-within .floatingIconContainer,
+.listContainer:focus-within .classic .floatingIconContainer,
+.hoveredStyle .classic:focus-within .floatingIconContainer {
   display: inline-flex;
   align-items: center;
 }
+
 .compact .floatingIconContainer,
 .superCompact .floatingIconContainer {
   opacity: 0;
   visibility: hidden;
 }
+
 .floatingIcons {
   font-size: var(--zd_font_size15) ;
 }
-.listContainer, .listLayoutContainer {
+
+.listContainer,
+.listLayoutContainer {
   position: relative;
   transition: var(--zd_transition3) all ease;
 }
+
 .listContainer:hover .compact .floatingIconContainer,
 .listContainer:hover .superCompact .floatingIconContainer,
 .hoveredStyle .compact .floatingIconContainer,
-.hoveredStyle .superCompact .floatingIconContainer 
- {
+.hoveredStyle .superCompact .floatingIconContainer {
   opacity: 1;
   visibility: visible;
-}
+}

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

@@ -306,8 +306,14 @@ export class StatusDropdown extends React.Component {
       statusColor,
       needExternalPopupState = false,
       isPopupActive = false,
-      needMultiLineText
+      needMultiLineText,
+      a11y = {}
     } = this.props;
+    const {
+      tabIndex = 0,
+      ariaLabelledby,
+      ariaLabel
+    } = a11y;
     let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
     let {
       searchString
@@ -330,7 +336,11 @@ export class StatusDropdown extends React.Component {
       onClick: removeClose,
       disabled: isDisabled || isReadOnly ? true : false,
       "aria-haspopup": true,
-      "aria-expanded": isPopupOpen && isEditable ? true : false
+      "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, {

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

@@ -47,5 +47,7 @@ export const propTypes = {
   title: PropTypes.string,
   togglePopup: PropTypes.func,
   value: PropTypes.node,
-  needMultiLineText: PropTypes.bool
+  needMultiLineText: PropTypes.bool,
+  onSelectLabel: PropTypes.func,
+  top: PropTypes.number
 };

package/es/lookup/Lookup/Lookup.js

@@ -60,6 +60,7 @@ export default class Lookup extends Component {
       role = 'dialog',
       ariaLabelledby,
       ariaDescribedby,
+      ariaLabel,
       ariaModal = isActive ? true : undefined
     } = a11y;
     const {
@@ -79,6 +80,7 @@ export default class Lookup extends Component {
       role: role,
       "aria-labelledby": ariaLabelledby,
       "aria-describedby": ariaDescribedby,
+      "aria-label": ariaLabel,
       "aria-modal": ariaModal,
       id: htmlId,
       className: `${style.box} ${style[`${size}Size`]}`,

package/es/lookup/Lookup/props/propTypes.js

@@ -15,5 +15,8 @@ export const propTypes = {
   onKeyDown: PropTypes.func,
   childAnimationName: PropTypes.oneOf(['expand', 'flyDown']),
   needFocusScope: PropTypes.bool,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  forwardRef: PropTypes.object,
+  onClick: PropTypes.func,
+  onClose: PropTypes.func
 };

package/es/lookup/header/ViewDropDown/props/propTypes.js

@@ -2,26 +2,21 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   emptyMessage: PropTypes.string,
   needSearch: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    text: PropTypes.string
-  }))]).isRequired,
   searchBoxPlaceHolder: PropTypes.string,
   searchEmptyMessage: PropTypes.string,
-  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  valueField: PropTypes.string,
-  textField: PropTypes.string,
-  needLocalSearch: PropTypes.bool,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
 
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
   removeClose: PropTypes.func,
   closePopupOnly: PropTypes.func,
   position: PropTypes.string,
   getTargetRef: PropTypes.func,
-  getContainerRef: PropTypes.func
+  getContainerRef: PropTypes.func,
+  defaultDropBoxPosition: PropTypes.string,
+  animationStyle: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  searchBoxVariant: PropTypes.string,
+  maxLength: PropTypes.string
 };

package/es/setup/table/TableHead/props/propTypes.js

@@ -3,5 +3,6 @@ export const propTypes = {
   children: PropTypes.element,
   className: PropTypes.string,
   onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
+  onMouseLeave: PropTypes.func,
+  dataId: PropTypes.string
 };

package/es/v1/ChannelIcon/ChannelIcon.js

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import { Icon } from '@zohodesk/icons';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import AvatarIcon from '../../avatar/AvatarIcon/AvatarIcon';
+import { defaultProps } from '../../ChannelIcon/props/defaultProps';
+import { propTypes } from '../../ChannelIcon/props/propTypes';
+import { getChannelMappingObj } from '../../utils/ChannelIconMapping';
+import style from '../../ChannelIcon/ChannelIcon.module.css';
+
+const ChannelIcon = props => {
+  let {
+    name,
+    action,
+    iconSize,
+    iconTitle,
+    size,
+    topicIcon,
+    topicIconTitle,
+    topicIconSize,
+    topicIconColor,
+    iconClass,
+    dataId,
+    className,
+    palette,
+    textPalette,
+    customTextClass,
+    iconColor,
+    needTopicBorder,
+    topicClass,
+    renderIconOnly,
+    iconName,
+    title,
+    dataSelectorId
+  } = props;
+  let defaultChannelObj = name && !iconName && getChannelMappingObj()[name.toUpperCase()];
+  let customizedChannelName = null;
+
+  if (!defaultChannelObj) {
+    customizedChannelName = name;
+  } else {
+    iconName = defaultChannelObj[action];
+  }
+
+  return /*#__PURE__*/React.createElement("span", {
+    className: style.container,
+    "data-selector-id": dataSelectorId
+  }, customizedChannelName ? /*#__PURE__*/React.createElement(Avatar, {
+    name: customizedChannelName,
+    size: size,
+    palette: palette,
+    textPalette: textPalette,
+    customClass: customTextClass,
+    dataId: dataId,
+    needTitle: title,
+    title: title
+  }) : !renderIconOnly ? iconName ? /*#__PURE__*/React.createElement(AvatarIcon, {
+    name: iconName,
+    iconSize: iconSize,
+    size: size,
+    iconClass: `${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''} ${iconClass ? iconClass : ''} `,
+    dataId: dataId,
+    className: className,
+    iconColor: iconColor,
+    title: iconTitle
+  }) : /*#__PURE__*/React.createElement(Avatar, {
+    name: name,
+    size: size,
+    palette: palette,
+    textPalette: textPalette,
+    customClass: customTextClass,
+    needTitle: title,
+    title: title
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: `${iconClass ? iconClass : ''} ${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''}`,
+    title: iconTitle,
+    dataId: dataId
+  }), topicIcon ? /*#__PURE__*/React.createElement("span", {
+    className: `${style.thread} ${needTopicBorder ? style.threadBorder : ''} ${topicClass ? topicClass : ''}`,
+    "data-title": topicIconTitle
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: topicIcon,
+    size: topicIconSize,
+    iconClass: style[`topic_${topicIconColor}`] ? `${style.topicIcon} ${style[`topic_${topicIconColor}`]}` : '',
+    dataId: dataId
+  })) : null);
+};
+
+ChannelIcon.defaultProps = defaultProps;
+ChannelIcon.propTypes = propTypes;
+export default ChannelIcon;

package/es/v1/ExternalLink/ExternalLink.js

@@ -0,0 +1,49 @@
+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 '../../ExternalLink/props/defaultProps';
+import { propTypes } from '../../ExternalLink/props/propTypes';
+/**** CSS ****/
+
+import style from '../../ExternalLink/ExternalLink.module.css';
+
+const ExternalLink = props => {
+  const {
+    href,
+    title,
+    target,
+    className,
+    children,
+    rel,
+    dataId,
+    onClick,
+    customProps
+  } = props;
+
+  let addHttp = url => {
+    let regEx = new RegExp(/(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i);
+
+    if (!regEx.test(url)) {
+      return `http://${url}`;
+    }
+
+    return url;
+  };
+
+  let urlOutput = href && typeof href !== 'boolean' ? addHttp(String(href)) : 'javascript:void(0);';
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: urlOutput,
+    target: target,
+    className: `${style.link} ${className ? className : ''}`,
+    "data-title": title,
+    rel: rel,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    onClick: onClick
+  }, customProps), children);
+};
+
+ExternalLink.defaultProps = defaultProps;
+ExternalLink.propTypes = propTypes;
+export default ExternalLink;

package/es/v1/NewStar/NewStar.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Icon } from '@zohodesk/icons';
+import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../NewStar/props/defaultProps';
+import { propTypes } from '../../NewStar/props/propTypes';
+import style from '../../NewStar/NewStar.module.css';
+
+const NewStar = props => {
+  const {
+    palette,
+    customClass,
+    position
+  } = props;
+  const alignPosition = {
+    topRight: {
+      className: style.topRight // align: 'right',
+      // alignBox: 'row',
+      // reverse: 'wrap'
+
+    },
+    topLeft: {
+      className: style.topLeft // align: 'left',
+      // alignBox: 'row',
+      // reverse: 'wrap'
+
+    },
+    bottomLeft: {
+      className: style.bottomLeft // align: 'left',
+      // alignBox: 'column-reverse',
+      // reverse: 'wrap'
+
+    },
+    bottomRight: {
+      className: style.bottomRight // align: 'right',
+      // alignBox: 'column',
+      // reverse: 'wrap-reverse'
+
+    }
+  };
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    className: `${style.star} ${alignPosition[position].className} ${customClass}`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-snippetStar",
+    iconClass: `${style[palette]} ${style.starOne}`,
+    size: "10"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-snippetStar",
+    iconClass: `${style[palette]} ${style.starTwo}`,
+    size: "10"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-snippetStar",
+    iconClass: `${style[palette]} ${style.starThree}`,
+    size: "10"
+  }));
+};
+
+NewStar.propTypes = propTypes;
+NewStar.defaultProps = defaultProps;
+export default NewStar;

package/es/v1/lookup/header/Close/Close.js

@@ -0,0 +1,30 @@
+/*** Libraries ***/
+import React, { memo } from 'react';
+import { defaultProps } from '../../../../lookup/header/Close/props/defaultProps';
+import { propTypes } from '../../../../lookup/header/Close/props/propTypes';
+/*** FontIcons ***/
+
+import IconButton from './../../../IconButton/IconButton';
+
+function Close(props) {
+  let {
+    onClose,
+    dataId,
+    title
+  } = props;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    dataId: dataId,
+    onClick: onClose,
+    iconName: "ZD-cross",
+    iconSize: "11",
+    title: title
+  });
+}
+
+Close.propTypes = propTypes;
+Close.defaultProps = defaultProps;
+const MemoizedClose = /*#__PURE__*/memo(Close);
+MemoizedClose.propTypes = propTypes;
+MemoizedClose.defaultProps = defaultProps;
+MemoizedClose.displayName = 'Close';
+export default MemoizedClose;

package/es/v1/lookup/header/ModuleHeader/ModuleHeader.js

@@ -0,0 +1,75 @@
+/*** Libraries ***/
+import React, { memo } from 'react';
+import { defaultProps } from '../../../../lookup/header/ModuleHeader/props/defaultProps';
+import { propTypes } from '../../../../lookup/header/ModuleHeader/props/propTypes';
+/*** Components ***/
+
+import Title from '../Title/Title';
+import Close from '../Close/Close';
+import Search from '../Search/Search';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+/*** CSS ***/
+
+import commonStyle from '../../../../lookup/header/lookupHeaderCommon.module.css';
+import commonResponsive from '../../../../lookup/header/lookupHeaderCommonResponsive.module.css';
+/*eslint-disable react/forbid-component-props */
+
+function ModuleHeader(props) {
+  const {
+    title = '',
+    needSearch = false,
+    onLookupClose,
+    searchStr = '',
+    onSearch,
+    onSearchChange,
+    searchPlaceHolder,
+    needOnTypeSearch,
+    getSearchBoxRef,
+    miniDescription,
+    dataId,
+    closeTitle,
+    onSearchKeyDown,
+    palette
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: `${commonStyle.container} ${commonStyle[`${palette}`]}`,
+    isCover: false,
+    wrap: "wrap",
+    dataId: dataId
+  }, onLookupClose ? /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.closeContainer
+  }, /*#__PURE__*/React.createElement(Close, {
+    dataId: "close",
+    onClose: onLookupClose,
+    title: closeTitle
+  })) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.title
+  }, /*#__PURE__*/React.createElement(Title, {
+    text: title
+  })), miniDescription && /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.para
+  }, miniDescription)), needSearch && /*#__PURE__*/React.createElement(Box, {
+    className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer}`
+  }, /*#__PURE__*/React.createElement(Search, {
+    onSearch: onSearch,
+    searchStr: searchStr,
+    onChange: onSearchChange,
+    placeHolder: searchPlaceHolder,
+    dataId: "search",
+    needOnTypeSearch: needOnTypeSearch,
+    getRef: getSearchBoxRef,
+    onKeyDown: onSearchKeyDown
+  })));
+}
+
+ModuleHeader.propTypes = propTypes;
+ModuleHeader.defaultProps = defaultProps;
+const MemoizedModuleHeader = /*#__PURE__*/memo(ModuleHeader);
+MemoizedModuleHeader.propTypes = propTypes;
+MemoizedModuleHeader.defaultProps = defaultProps;
+MemoizedModuleHeader.displayName = 'Close';
+export default MemoizedModuleHeader;

package/es/v1/lookup/header/Search/Search.js

@@ -0,0 +1,177 @@
+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); }
+
+/* eslint-disable react/forbid-component-props */
+
+/*** Libraries ***/
+import React, { useState } from 'react';
+import { SearchUI_defaultProps } from '../../../../lookup/header/Search/props/defaultProps';
+import { Search_propTypes, SearchUI_propTypes } from '../../../../lookup/header/Search/props/propTypes';
+/** * Components ** */
+
+import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Icon } from '@zohodesk/icons';
+import ToggleDropDown from '../../../../dropdown/ToggleDropDown/ToggleDropDown';
+/** * Methods ** */
+
+import { debounce } from '@zohodesk/components/lib/utils/debounce';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+/** * CSS ** */
+
+import style from '../../../../lookup/header/Search/LookupSearch.module.css';
+export default function Search(props) {
+  const {
+    options,
+    onSelect,
+    value,
+    selectedId,
+    onFocus,
+    onBlur,
+    getRef
+  } = props;
+  const [isFocus, setFocus] = useState(false);
+  const [isDropDownOpen, setDropDownOpen] = useState(false);
+
+  const handleDropDownOpen = () => {
+    setDropDownOpen(true);
+  };
+
+  const handleDropDownClose = () => {
+    setDropDownOpen(false);
+  };
+
+  const handleTextBoxFocus = e => {
+    setFocus(true);
+    onFocus && onFocus(e);
+  };
+
+  const handleTextBoxBlur = e => {
+    setFocus(false);
+    onBlur && onBlur(e);
+  };
+
+  const handleGetTextBoxRef = el => {
+    // textBox = el;
+    getRef && getRef(el);
+  };
+
+  const searchUIExtraProps = {
+    isFocus: isFocus || isDropDownOpen,
+    onFocus: handleTextBoxFocus,
+    onBlur: handleTextBoxBlur,
+    getRef: handleGetTextBoxRef
+  };
+  return options ? /*#__PURE__*/React.createElement(ToggleDropDown, {
+    value: value,
+    options: options,
+    onClick: onSelect,
+    needTick: true,
+    isArrow: false,
+    isToggleStateNeeded: true,
+    selectedId: selectedId,
+    onDropDownOpen: handleDropDownOpen,
+    onDropDownClose: handleDropDownClose
+  }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, props, searchUIExtraProps));
+}
+Search.propTypes = Search_propTypes;
+
+function SearchUI(props) {
+  const {
+    dataId,
+    searchStr,
+    placeHolder,
+    getRef,
+    title,
+    isBoxed,
+    isSearchIconNeed,
+    options,
+    activeClass,
+    isFocus,
+    onFocus,
+    onBlur,
+    onSearch,
+    needOnTypeSearch,
+    onKeyDown,
+    onChange
+  } = props;
+
+  const handleSearch = () => {
+    onSearch && onSearch();
+  };
+
+  const debounceHandleSearch = debounce(handleSearch, 500);
+
+  const handleKeyDown = e => {
+    const {
+      keyCode
+    } = e;
+    onKeyDown && onKeyDown(e);
+
+    if (keyCode === 13) {
+      !needOnTypeSearch && onSearch && onSearch();
+    }
+  };
+
+  const handleChange = value => {
+    onChange && onChange(value);
+    needOnTypeSearch && debounceHandleSearch();
+  };
+
+  const handleClear = e => {
+    cancelBubblingEffect(e);
+    onChange && onChange('');
+    debounceHandleSearch();
+  };
+
+  return /*#__PURE__*/React.createElement(Container, {
+    isCover: false,
+    alignBox: "row",
+    align: "vertical",
+    className: `${style.searchStyle} ${isBoxed ? style.boxStyle : ''} ${isFocus ? `${style.active} ${activeClass ? activeClass : ''} ` : ''} ${searchStr || isFocus ? style.focusWidth : ''}`
+  }, options && /*#__PURE__*/React.createElement(Container, {
+    className: `${style.drpSearchBox} ${isFocus ? style.lineActive : ''}`,
+    isCover: false,
+    align: "vertical",
+    alignBox: "row",
+    "data-title": title
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-search",
+    size: "11"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-down",
+    size: "7",
+    iconClass: style.iconArrow
+  })), isSearchIconNeed && /*#__PURE__*/React.createElement(Box, {
+    className: style.searchIconBox
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-search",
+    size: "11"
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+    customClass: {
+      customTextBox: `${isBoxed ? style.inputBox : ''}`
+    },
+    customProps: {
+      TextBoxProps: {
+        'data-a11y-autofocus': true
+      }
+    },
+    placeHolder: placeHolder,
+    value: searchStr,
+    onChange: handleChange,
+    onClick: cancelBubblingEffect,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: handleKeyDown,
+    onMouseDown: cancelBubblingEffect,
+    dataId: dataId,
+    size: "small",
+    inputRef: getRef,
+    onClear: handleClear,
+    onClearMouseDown: cancelBubblingEffect
+  })));
+}
+
+SearchUI.defaultProps = SearchUI_defaultProps;
+SearchUI.propTypes = SearchUI_propTypes;