@zohodesk/dot 1.1.0 → 1.2.1

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;

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'
+//   };
+// }

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

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

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/Text/props/defaultProps';
+import { propTypes } from '../../../../setup/table/Text/props/propTypes';
+import Link from '../../../../Link/Link';
+import style from '../../../../setup/table/Text/TableText.module.css';
+export default function Text(props) {
+  let {
+    text,
+    url,
+    onClick,
+    type,
+    palette,
+    className,
+    size,
+    dataId,
+    title = null,
+    target
+  } = props;
+  title = title || text;
+  let textComponent;
+  let classNameCheck = `${type ? style[type] : ''}  ${style[`${palette}Color`]} ${style[size]} ${className} ${onClick ? style.isClickable : ''}`;
+
+  if (url) {
+    textComponent = /*#__PURE__*/React.createElement(Link, {
+      title: title,
+      dataId: dataId,
+      href: url,
+      target: target,
+      className: classNameCheck,
+      onClick: onClick
+    }, text);
+  } else {
+    textComponent = /*#__PURE__*/React.createElement("div", {
+      "data-title": title,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      className: classNameCheck,
+      onClick: onClick
+    }, text);
+  }
+
+  return textComponent;
+}
+Text.defaultProps = defaultProps;
+Text.propTypes = propTypes; // if (__DOCS__) {
+//   Text.docs = {
+//     componentGroup: 'Text',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/version2/AlertClose/AlertClose.js

@@ -0,0 +1,43 @@
+/*** Libraries ***/
+import React, { memo } from 'react';
+import { propTypes } from '../../../version2/AlertClose/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from '../../../version2/AlertClose/AlertClose.module.css';
+
+function AlertClose(props) {
+  let {
+    onClose,
+    dataId,
+    dataTitle,
+    type,
+    customClass
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${style.close} ${type ? style[type] : ''} ${customClass ? customClass : ''}`,
+    "data-title": dataTitle,
+    onClick: onClose,
+    dataId: dataId,
+    align: "both",
+    isInline: true,
+    alignBox: "row",
+    isCover: false,
+    tabIndex: "0"
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Icon, {
+    name: "GC-cross",
+    isBold: true,
+    size: "12",
+    iconClass: style.closeIcon
+  })));
+}
+
+AlertClose.propTypes = propTypes;
+const MemoizedAlertClose = /*#__PURE__*/memo(AlertClose);
+MemoizedAlertClose.propTypes = propTypes;
+MemoizedAlertClose.displayName = 'AlertClose';
+export default MemoizedAlertClose; // if (__DOCS__) {
+//   AlertClose.docs = {
+//     componentGroup: 'AlertClose',
+//     folderName: 'Alert'
+//   };
+// }