@zohodesk/dot 1.0.0-beta.225 → 1.0.0-beta.229

package/es/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js

@@ -0,0 +1,51 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import ModuleHeader from '../ModuleHeader';
+export default class ModuleHeader__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchStr: ''
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+  }
+
+  handleSearch(value) {
+    this.setState({
+      searchStr: value
+    });
+  }
+
+  render() {
+    let {
+      searchStr
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ModuleHeader, {
+      title: "Find Duplicate",
+      needSearch: true,
+      searchStr: searchStr,
+      onSearchChange: this.handleSearch,
+      searchPlaceHolder: "Search",
+      miniDescription: "Select a field to search for duplicate records",
+      onLookupClose: () => {}
+    }), /*#__PURE__*/React.createElement(ModuleHeader, {
+      title: "Find Duplicate",
+      needSearch: true,
+      searchStr: searchStr,
+      onSearchChange: this.handleSearch,
+      searchPlaceHolder: "Search",
+      miniDescription: "Select a field to search for duplicate records",
+      onLookupClose: () => {},
+      palette: "white"
+    }));
+  }
+
+}
+
+if (false) {
+  ModuleHeader__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/header/Search/LookupSearch.module.css

@@ -3,16 +3,16 @@
   transition: var(--zd_transition1);
   width: var(--zd_size96);
   height: var(--zd_size28);
-  background: none;
   position: relative;
+}.searchStyle, .boxStyle {
+  background: none;
 }
 .boxStyle {
   width: var(--zd_size160);
   border-radius: 4px;
   border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.searchStyle:hover,
-.boxStyle:hover {
+.searchStyle:hover, .boxStyle:hover {
   border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
 }
 .focusWidth {
@@ -20,29 +20,38 @@
 }
 .drpSearchBox {
   position: relative;
-  cursor: pointer;
   height: var(--zd_size28);
+  cursor: pointer;
 }
 .drpSearchBox::after {
   content: '';
-  right: calc(var(--zd_size1) * -1);
   position: absolute;
   top: var(--zd_size8);
   bottom: var(--zd_size8);
+}
+[dir=ltr] .drpSearchBox::after {
+  right: calc(var(--zd_size1) * -1);
   border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.inputBox,
-.drpSearchBox {
+[dir=rtl] .drpSearchBox::after {
+  left: calc(var(--zd_size1) * -1);
+  border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
+}
+.inputBox, .drpSearchBox {
   padding: 0 var(--zd_size9);
 }
-.searchIconBox {
+[dir=ltr] .searchIconBox {
   padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9);
 }
-.active,
-.boxStyle.active,
-.lineActive.drpSearchBox::after {
+[dir=rtl] .searchIconBox {
+  padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0;
+}
+.active, .boxStyle.active, .lineActive.drpSearchBox::after {
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
-.iconArrow {
+[dir=ltr] .iconArrow {
   margin-left: var(--zd_size5);
 }
+[dir=rtl] .iconArrow {
+  margin-right: var(--zd_size5);
+}

package/es/lookup/header/Search/docs/Search__default.docs.js

@@ -0,0 +1,124 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+import { Container } from '@zohodesk/components/lib/Layout';
+/*** Components ***/
+
+import Search from '../Search';
+export default class Search__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchStr: '',
+      value: 'All Fields',
+      selectedId: '1'
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.onSelect = this.onSelect.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      searchStr: value
+    });
+  }
+
+  onSelect(element, e) {
+    this.setState({
+      value: e.value,
+      selectedId: e.id
+    });
+  }
+
+  render() {
+    const {
+      searchStr,
+      value,
+      selectedId
+    } = this.state;
+    const Obj = [{
+      value: 'All Fields',
+      id: '1'
+    }, {
+      needDivider: true
+    }, {
+      value: 'Conatct Name, Email, Phone',
+      id: '2'
+    }, {
+      value: 'Account',
+      id: '3'
+    }, {
+      value: 'Customer Place',
+      id: '4'
+    }, {
+      value: 'Conatct ID',
+      id: '5'
+    }];
+    const style = {
+      width: '280px',
+      margin: '20px'
+    },
+          boxStyle = {
+      border: '1px solid #e3e6eb',
+      padding: '15px 20px 25px',
+      marginBottom: '10px'
+    },
+          titleStyle = {
+      fontSize: '13px',
+      paddingBottom: '25px',
+      textTransform: 'upperCase'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Default"), /*#__PURE__*/React.createElement(Search, {
+      placeHolder: "Search",
+      onChange: this.handleChange,
+      onSearch: e => {
+        console.log(e);
+      },
+      searchStr: searchStr
+    })), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Search With Options"), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Search, {
+      placeHolder: "Search",
+      onChange: this.handleChange,
+      onSearch: e => {
+        console.log(e);
+      },
+      searchStr: searchStr,
+      isBoxed: true,
+      options: Obj,
+      value: value,
+      selectedId: selectedId,
+      title: value,
+      onSelect: this.onSelect
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Search Icon With Box"), /*#__PURE__*/React.createElement(Search, {
+      placeHolder: "Search",
+      onChange: this.handleChange,
+      onSearch: e => {
+        console.log(e);
+      },
+      searchStr: searchStr,
+      isBoxed: true,
+      isSearchIconNeed: true
+    })));
+  }
+
+}
+
+if (false) {
+  Search__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/header/TicketHeader/TicketHeader.module.css

@@ -2,12 +2,15 @@
   margin: 0 var(--zd_size20);
 }
 /* Responsive */
-.small .searchContainer {
+[dir=ltr] .small .searchContainer {
   text-align: left;
 }
+[dir=rtl] .small .searchContainer {
+  text-align: right;
+}
 .small .searchContainer input {
-  border-bottom: 1px solid var(--zdt_lookupticketheader_border);
   width: var(--zd_size193);
+  border-bottom: 1px solid var(--zdt_lookupticketheader_border);
 }
 .small .innerContainer,
 .extraSmall .innerContainer {

package/es/lookup/header/TicketHeader/docs/TicketHeader__default.docs.js

@@ -0,0 +1,83 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Componets ***/
+
+import TicketHeader from '../TicketHeader';
+export default class TicketHeader__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchStr: '',
+      selectedViewId: '1'
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleSelectView = this.handleSelectView.bind(this);
+  }
+
+  handleSearch(value) {
+    this.setState({
+      searchStr: value
+    });
+  }
+
+  handleSelectView(value) {
+    this.setState({
+      selectedViewId: value
+    });
+  }
+
+  render() {
+    let {
+      searchStr,
+      selectedViewId
+    } = this.state;
+    let allViews = [{
+      displayLabel: 'All Tickets',
+      id: '1'
+    }, {
+      displayLabel: 'Tickets for review',
+      id: '2'
+    }, {
+      displayLabel: 'Customer Responded Tickets',
+      id: '3'
+    }, {
+      displayLabel: 'Unassigned Open Tickets',
+      id: '4'
+    }, {
+      displayLabel: 'Spam Tickets',
+      id: '5'
+    }, {
+      displayLabel: 'SLA Violated Tickets',
+      id: '6'
+    }, {
+      displayLabel: 'Overdue Tickets',
+      id: '7'
+    }, {
+      displayLabel: 'My Tickets',
+      id: '8'
+    }, {
+      displayLabel: 'My Open Tickets',
+      id: '9'
+    }, {
+      displayLabel: 'My Overdue Tickets',
+      id: '10'
+    }];
+    return /*#__PURE__*/React.createElement(TicketHeader, {
+      title: "Select Ticket",
+      needSearch: true,
+      searchStr: searchStr,
+      onSearchChange: this.handleSearch,
+      searchPlaceHolder: "Search",
+      selectedViewId: selectedViewId,
+      onSelectView: this.handleSelectView,
+      allViews: allViews
+    });
+  }
+
+}
+
+if (false) {
+  TicketHeader__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/header/Title/docs/Title__default.docs.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Title from '../Title';
+export default class Title__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Title, {
+      text: "Select Product"
+    });
+  }
+
+}
+
+if (false) {
+  Title__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

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

@@ -5,14 +5,15 @@ import PropTypes from 'prop-types';
 
 import { SelectComponent } from '@zohodesk/components/lib/Select/Select';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
 import DropDownSearch from '@zohodesk/components/lib/DropDown/DropDownSearch';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 /**** Icons ****/
 
 import Icon from '@zohodesk/icons/lib/Icon';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Loader from '@zohodesk/svg/lib/svg/Loader';
 import style from './ViewDropDown.module.css';
 /* eslint-disable react/forbid-component-props */
@@ -37,6 +38,17 @@ class DropDown extends SelectComponent {
     }
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     var _this = this;
 
@@ -80,58 +92,71 @@ class DropDown extends SelectComponent {
       name: "ZD-down",
       size: "7",
       iconClass: style.arrowIcon
-    }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
-      isAnimate: true,
-      isArrow: false,
-      isActive: isPopupReady,
-      boxPosition: position || `${defaultDropBoxPosition}Center`,
-      getRef: getContainerRef,
-      onClick: removeClose,
-      animationStyle: animationStyle,
-      size: "large"
-    }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
-      value: searchStr,
-      onChange: this.handleSearch,
-      onKeyDown: this.onSearchKeyDown,
-      getRef: this.searchInputRef,
-      size: searchBoxSize,
-      variant: searchBoxVariant,
-      placeHolder: searchBoxPlaceHolder,
-      maxLength: maxLength
-    })) : null, /*#__PURE__*/React.createElement(CardContent, {
-      eleRef: this.suggestionContainerRef,
-      customClass: dropBoxSize ? style[dropBoxSize] : ''
-    }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
-      className: style.listItemContainer
-    }, suggestions.map(function () {
-      let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      let index = arguments.length > 1 ? arguments[1] : undefined;
-      const {
-        id,
-        value
-      } = option;
-      return /*#__PURE__*/React.createElement(ListItem, {
-        active: id === selectedId,
-        getRef: _this.suggestionItemRef,
-        highlight: hoverIndex === index ? true : false,
-        id: id,
-        key: `${id}dropDown`,
-        onClick: _this.handleChange,
-        onMouseEnter: _this.handleMouseEnter,
-        size: "medium",
-        value: value,
-        index: index,
-        needTick: true,
-        needBorder: false
-      });
-    })) : isFetchingOptions ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null)) : searchStr ? /*#__PURE__*/React.createElement("div", {
-      className: style.emptyState
-    }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/React.createElement("div", {
-      className: style.emptyState
-    }, emptyMessage)))) : null);
+    }))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        isAnimate: true,
+        isArrow: false,
+        isActive: isPopupReady,
+        boxPosition: position || `${defaultDropBoxPosition}Center`,
+        getRef: getContainerRef,
+        onClick: removeClose,
+        animationStyle: animationStyle,
+        size: "large",
+        alignBox: "row",
+        isResponsivePadding: true
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
+        value: searchStr,
+        onChange: this.handleSearch,
+        onKeyDown: this.onSearchKeyDown,
+        getRef: this.searchInputRef,
+        size: searchBoxSize,
+        variant: searchBoxVariant,
+        placeHolder: searchBoxPlaceHolder,
+        maxLength: maxLength
+      })) : null, /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
+        eleRef: this.suggestionContainerRef,
+        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : ''
+      }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
+        className: style.listItemContainer
+      }, suggestions.map(function () {
+        let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        let index = arguments.length > 1 ? arguments[1] : undefined;
+        const {
+          id,
+          value
+        } = option;
+        return /*#__PURE__*/React.createElement(ListItem, {
+          active: id === selectedId,
+          getRef: _this.suggestionItemRef,
+          highlight: hoverIndex === index ? true : false,
+          id: id,
+          key: `${id}dropDown`,
+          onClick: _this.handleChange,
+          onMouseEnter: _this.handleMouseEnter,
+          size: "medium",
+          value: value,
+          index: index,
+          needTick: true,
+          needBorder: false
+        });
+      })) : isFetchingOptions ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)) : searchStr ? /*#__PURE__*/React.createElement("div", {
+        className: style.emptyState
+      }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/React.createElement("div", {
+        className: style.emptyState
+      }, emptyMessage)))));
+    }) : null);
   }
 
 }

package/es/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -9,10 +9,10 @@
 }
 .emptyState {
   font-size: var(--zd_font_size14);
-  padding: var(--zd_size12) var(--zd_size15);
   color: var(--zdt_viewdropdown_empty_text);
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size12) var(--zd_size15);
 }
 .hide {
   composes: vishidden from '~@zohodesk/components/lib/common/common.module.css';
@@ -27,15 +27,20 @@
 .labelCnt {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   line-height: var(--zd_size20);
-  cursor: pointer;
   color: var(--zdt_viewdropdown_label_text);
+  cursor: pointer;
 }
 .labelText {
   font-size: var(--zd_font_size12);
-  margin-right: var(--zd_size5);
   max-width: var(--zd_size180);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
+[dir=ltr] .labelText {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .labelText {
+  margin-left: var(--zd_size5);
+}
 .labelCnt:hover .arrowIcon {
   color: var(--zdt_viewdropdown_hover_label_text);
 }

package/es/lookup/header/ViewDropDown/docs/ViewDropDown__default.docs.js

@@ -0,0 +1,75 @@
+/**** Libraries ****/
+import React from 'react';
+/**** Components ****/
+
+import ViewDropDown from '../ViewDropDown';
+export default class ViewDropDown__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '1'
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    let option = [{
+      text: 'All Tickets',
+      id: '1'
+    }, {
+      text: 'Tickets for review',
+      id: '2'
+    }, {
+      text: 'Customer Responded Tickets',
+      id: '3'
+    }, {
+      text: 'Unassigned Open Tickets',
+      id: '4'
+    }, {
+      text: 'Spam Tickets',
+      id: '5'
+    }, {
+      text: 'SLA Violated Tickets',
+      id: '6'
+    }, {
+      text: 'Overdue Tickets',
+      id: '7'
+    }, {
+      text: 'My Tickets',
+      id: '8'
+    }, {
+      text: 'My Open Tickets',
+      id: '9'
+    }, {
+      text: 'My Overdue Tickets',
+      id: '10'
+    }];
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '360px'
+      }
+    }, /*#__PURE__*/React.createElement(ViewDropDown, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found"
+    }));
+  }
+
+}
+
+if (false) {
+  ViewDropDown__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/header/lookupHeaderCommon.module.css

@@ -1,7 +1,10 @@
 .container {
   min-height: var(--zd_size51);
   position: relative;
+}[dir=ltr] .container {
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
+}[dir=rtl] .container {
+  padding: 0 var(--zd_size10) 0 var(--zd_size52);
 }
 .default {
   background-color: var(--zdt_lookupheader_default_bg);
@@ -11,21 +14,28 @@
   background-color: var(--zdt_lookupheader_white_bg);
   border-bottom: solid 1px var(--zdt_lookupheader_white_border);
 }
-.searchContainer,
-.title {
+.searchContainer, .title {
   margin: 0 var(--zd_size20);
 }
-.searchContainer {
+[dir=ltr] .searchContainer {
   text-align: right;
 }
+[dir=rtl] .searchContainer {
+  text-align: left;
+}
 .closeContainer {
   position: absolute;
-  right: var(--zd_size30);
   top: 50%;
   composes: middleY from '~@zohodesk/components/lib/common/common.module.css';
 }
+[dir=ltr] .closeContainer {
+  right: var(--zd_size30);
+}
+[dir=rtl] .closeContainer {
+  left: var(--zd_size30);
+}
 .para {
-  margin: 0 var(--zd_size20);
   font-size: var(--zd_font_size12);
   color: var(--zdt_lookupheader_para_text);
+  margin: 0 var(--zd_size20);
 }