@zohodesk/dot 1.0.0-temp-155 → 1.0.0-temp-157

package/es/v1/emptystate/EditionPage/EditionPage.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { defaultProps } from '../../../emptystate/EditionPage/props/defaultProps';
+import { propTypes } from '../../../emptystate/EditionPage/props/propTypes';
+import EmptyCrmPotential from '@zohodesk/svg/lib/v1/emptystate/version3/EmptyCrmPotential';
+import style from '../../../emptystate/EditionPage/EditionPage.css';
+export default function EditionPage(props) {
+  let {
+    title,
+    subtitle,
+    information,
+    dataId,
+    footerText,
+    onButtonClick,
+    butttonText,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.editionContainer,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.svg
+  }, /*#__PURE__*/React.createElement(EmptyCrmPotential, null)), /*#__PURE__*/React.createElement("div", {
+    className: style.header
+  }, title), subtitle ? /*#__PURE__*/React.createElement("div", {
+    className: style.description
+  }, subtitle) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.description
+  }, information ? `${information} ` : null, butttonText ? /*#__PURE__*/React.createElement("span", {
+    className: style.button,
+    "data-id": `${dataId}_button`,
+    "data-test-id": `${dataId}_button`,
+    onClick: onButtonClick
+  }, butttonText) : null), children ? /*#__PURE__*/React.createElement("div", {
+    className: style.content
+  }, children) : null, footerText ? /*#__PURE__*/React.createElement("div", {
+    "data-id": `${dataId}_footerText`,
+    "data-test-id": `${dataId}_footerText`,
+    className: style.footer
+  }, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: footerText
+    }
+  })) : null);
+}
+EditionPage.defaultProps = defaultProps;
+EditionPage.propTypes = propTypes; // if (__DOCS__) {
+//   EditionPage.docs = {
+//     componentGroup: 'EmptyState'
+//   };
+// }

package/es/v1/lookup/Lookup/Lookup.js

@@ -0,0 +1,105 @@
+/*** Libraries ***/
+import React, { useRef, useCallback } from 'react';
+import { defaultProps } from '../../../lookup/Lookup/props/defaultProps';
+import { propTypes } from '../../../lookup/Lookup/props/propTypes';
+/*** Components ***/
+
+import FreezeLayer from '../../../FreezeLayer/FreezeLayer';
+import { Container } from '@zohodesk/components/lib/Layout';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+/*** CSS ***/
+
+import style from '../../../lookup/Lookup/Lookup.module.css';
+/*eslint-disable react/forbid-component-props */
+
+export default function Lookup(props) {
+  const {
+    isActive,
+    children,
+    size,
+    dataId,
+    forwardRef,
+    onClick,
+    customClass,
+    htmlId,
+    a11y,
+    childAnimationName,
+    onClose,
+    needFocusScope,
+    customProps,
+    onKeyDown
+  } = props;
+  const {
+    role = 'dialog',
+    ariaLabelledby,
+    ariaDescribedby,
+    ariaModal = isActive ? true : undefined
+  } = a11y;
+  const {
+    focusScopeProps = {}
+  } = customProps;
+  const {
+    autoFocus = true,
+    restoreFocus = true,
+    needArrowLoop = false,
+    needTabLoop = true,
+    enableEnterAction = false
+  } = focusScopeProps;
+  const createRef = useRef(null);
+  const handleKeyDown = useCallback(e => {
+    onKeyDown && onKeyDown(e);
+  }, [onKeyDown]);
+  useEffect(() => {
+    if (isActive) {
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isActive]);
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+  const content = /*#__PURE__*/React.createElement("div", {
+    ref: createRef,
+    tabIndex: "-1",
+    "data-a11y-need-focus-style": "false",
+    role: role,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-modal": ariaModal,
+    id: htmlId,
+    className: `${style.box} ${style[`${size}Size`]}`,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, children);
+  return /*#__PURE__*/React.createElement(FreezeLayer, {
+    align: "horizontal",
+    animationName: "fade",
+    childAnimationName: childAnimationName,
+    isActive: isActive,
+    palette: "snow",
+    forwardRef: forwardRef,
+    onClick: onClick,
+    customClass: customClass
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: style.container,
+    dataId: "fldValue"
+  }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+    needTabLoop: needTabLoop,
+    needArrowLoop: needArrowLoop,
+    elementRef: createRef,
+    autoFocus: autoFocus,
+    restoreFocus: restoreFocus,
+    onClose: onClose,
+    enableEnterAction: enableEnterAction
+  }, content) : content));
+}
+Lookup.propTypes = propTypes;
+Lookup.defaultProps = defaultProps; // if (__DOCS__) {
+//   Lookup.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

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/Close/props/defaultProps';
+import { propTypes } from '../../../../lookup/header/Close/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/Close/props/defaultProps';
+import { Search_propTypes, SearchUI_propTypes } from '../../../../lookup/header/Close/props/defaultProps';
+/** * 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;

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

@@ -0,0 +1,90 @@
+/*** Libraries ***/
+import React from 'react';
+import { defaultProps } from '../../../../lookup/header/TicketHeader/props/defaultProps';
+import { propTypes } from '../../../../lookup/header/TicketHeader/props/propTypes';
+/*** Components ***/
+
+import Title from '../Title/Title';
+import Close from '../Close/Close';
+import Search from '../Search/Search';
+import ViewDropDown from '../../../../lookup/header/ViewDropDown/ViewDropDown';
+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';
+import style from '../../../../lookup/header/TicketHeader/TicketHeader.module.css';
+/* eslint-disable react/forbid-component-props */
+
+export default function TicketHeader(props) {
+  let {
+    needSearch,
+    onLookupClose,
+    searchStr,
+    onSearchChange,
+    searchPlaceHolder,
+    title,
+    selectedViewId,
+    onSelectView,
+    allViews,
+    onSearch,
+    needOnTypeSearch,
+    getSearchBoxRef,
+    needViewsList,
+    i18nKeys,
+    palette
+  } = props;
+  let {
+    menuEmptyMessage = 'No matches found'
+  } = i18nKeys;
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: `${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`,
+    isCover: false,
+    wrap: "wrap"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.closeContainer
+  }, /*#__PURE__*/React.createElement(Close, {
+    onClose: onLookupClose,
+    dataId: "close"
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "column",
+    className: `${style.innerContainer}`,
+    isCover: false,
+    wrap: "wrap",
+    dataId: "lookupView"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: commonStyle.title
+  }, /*#__PURE__*/React.createElement(Title, {
+    text: title
+  })), needViewsList ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.dropdown}`,
+    dataId: "filterIdselected"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.menuWrapper
+  }, /*#__PURE__*/React.createElement(ViewDropDown, {
+    dropBoxSize: "small",
+    emptyMessage: menuEmptyMessage,
+    needSearch: true,
+    onChange: onSelectView,
+    options: allViews,
+    textField: "displayLabel",
+    selectedValue: selectedViewId,
+    needCloseOnSelect: true
+  }))) : null)), needSearch ? /*#__PURE__*/React.createElement(Box, {
+    className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer} ${style.searchContainer}`
+  }, /*#__PURE__*/React.createElement(Search, {
+    onSearch: onSearch,
+    searchStr: searchStr,
+    onChange: onSearchChange,
+    placeHolder: searchPlaceHolder,
+    dataId: "search",
+    needOnTypeSearch: needOnTypeSearch,
+    getRef: getSearchBoxRef
+  })) : null);
+}
+TicketHeader.propTypes = propTypes;
+TicketHeader.defaultProps = defaultProps;

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

@@ -0,0 +1,27 @@
+/*** Libraries ***/
+import React, { memo } from 'react';
+import { defaultProps } from '../../../../lookup/header/Title/props/defaultProps';
+import { propTypes } from '../../../../lookup/header/Title/props/propTypes';
+/*** CSS ***/
+
+import style from '../../../../lookup/header/Title/LookupTitle.module.css';
+
+function Title(props) {
+  let {
+    text,
+    palette,
+    isBold
+  } = props;
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${style.title} ${style[palette]} ${isBold ? style.bold : ''}`,
+    "data-title": text
+  }, text);
+}
+
+Title.propTypes = propTypes;
+Title.defaultProps = defaultProps;
+const MemoizedTitle = /*#__PURE__*/memo(Title);
+MemoizedTitle.propTypes = propTypes;
+MemoizedTitle.defaultProps = defaultProps;
+MemoizedTitle.displayName = 'Close';
+export default MemoizedTitle;

package/es/v1/setup/table/Table/Table.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/Table/props/defaultProps';
+import { propTypes } from '../../../../setup/table/Table/props/propTypes';
+import { Container } from '@zohodesk/components/lib/Layout';
+export default function Table(props) {
+  let {
+    children,
+    dataId,
+    customClass
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    dataId: dataId,
+    className: customClass
+  }, children);
+}
+Table.propTypes = propTypes;
+Table.defaultProps = defaultProps; // if (__DOCS__) {
+//   Table.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/TableBody/TableBody.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/TableBody/props/defaultProps';
+import { propTypes } from '../../../../setup/table/TableBody/props/propTypes';
+import { Box } from '@zohodesk/components/lib/Layout';
+export default function TableBody(props) {
+  let {
+    children,
+    eleRef,
+    onScroll = () => {},
+    customClass
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    eleRef: eleRef,
+    flexible: true,
+    scroll: "vertical",
+    onScroll: onScroll,
+    className: customClass
+  }, children);
+}
+TableBody.propTypes = propTypes;
+TableBody.defaultProps = defaultProps; // if (__DOCS__) {
+//   TableBody.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/TableData/TableData.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/TableData/props/defaultProps';
+import { propTypes } from '../../../../setup/table/TableData/props/propTypes';
+import { Box } from '@zohodesk/components/lib/Layout';
+import style from '../../../../setup/table/TableData/SetupTableData.module.css';
+export default function TableData(props) {
+  let {
+    children,
+    flexible,
+    shrink,
+    align,
+    type,
+    dataId,
+    customClass,
+    eleRef
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    dataId: dataId,
+    flexible: flexible,
+    shrink: shrink,
+    eleRef: eleRef,
+    className: `${customClass} ${style.container} ${type ? style[type] : ''} ${align ? style[align] ? style[align] : '' : ''}`
+  }, children);
+}
+TableData.defaultProps = defaultProps;
+TableData.propTypes = propTypes; // if (__DOCS__) {
+//   TableData.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/TableHead/TableHead.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/TableHead/props/defaultProps';
+import { propTypes } from '../../../../setup/table/TableHead/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from '../../../../setup/table/TableHead/SetupTableHead.module.css';
+export default function TableHead(props) {
+  let {
+    children,
+    className,
+    onMouseEnter,
+    onMouseLeave,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    className: `${style.container} ${className} `,
+    dataId: dataId,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    className: style.subContainer
+  }, children));
+}
+TableHead.defaultProps = defaultProps;
+TableHead.propTypes = propTypes; // if (__DOCS__) {
+//   TableHead.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }