@zohodesk/dot 1.0.0-beta.27 → 1.0.0-beta.270

package/es/lookup/header/TicketHeader/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  i18nKeys: {},
+  palette: 'default'
+};

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

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  allViews: PropTypes.array,
+  getSearchBoxRef: PropTypes.func,
+  needOnTypeSearch: PropTypes.bool,
+  needSearch: PropTypes.bool,
+  needViewsList: PropTypes.bool,
+  onLookupClose: PropTypes.func,
+  onSearch: PropTypes.func,
+  onSearchChange: PropTypes.func,
+  onSelectView: PropTypes.func,
+  searchPlaceHolder: PropTypes.string,
+  searchStr: PropTypes.string,
+  selectedViewId: PropTypes.string,
+  title: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    menuEmptyMessage: PropTypes.string
+  }),
+  palette: PropTypes.oneOf(['default', 'white'])
+};

package/es/lookup/header/Title/LookupTitle.module.css

@@ -1,5 +1,5 @@
 .title {
-  font-size: var(--zd_size16);
+  font-size: var(--zd_font_size16) ;
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;
@@ -10,11 +10,11 @@
 }
 /* Palette */
 .default {
-  color: var(--dot_text_black);
+  color: var(--zdt_lookuptitle_default_text);
 }
 .primary {
-  color: var(--dot_text_primary);
+  color: var(--zdt_lookuptitle_primary_text);
 }
 .danger {
-  color: var(--dot_text_brightRed);
+  color: var(--zdt_lookuptitle_danger_text);
 }

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

@@ -1,60 +1,27 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 /*** Libraries ***/
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /*** CSS ***/
-import style from './LookupTitle.module.css';
-
-var Title = function (_PureComponent) {
-  _inherits(Title, _PureComponent);
 
-  function Title() {
-    _classCallCheck(this, Title);
-
-    return _possibleConstructorReturn(this, (Title.__proto__ || _Object$getPrototypeOf(Title)).apply(this, arguments));
+import style from './LookupTitle.module.css';
+export default class Title extends PureComponent {
+  render() {
+    let {
+      text,
+      palette,
+      isBold
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.title} ${style[palette]} ${isBold ? style.bold : ''}`,
+      "data-title": text
+    }, text);
   }
 
-  _createClass(Title, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          text = _props.text,
-          palette = _props.palette,
-          isBold = _props.isBold;
-
-      return React.createElement(
-        'span',
-        {
-          className: style.title + ' ' + style[palette] + ' ' + (isBold ? style.bold : '')
-        },
-        text
-      );
-    }
-  }]);
-
-  return Title;
-}(PureComponent);
-
-export default Title;
-
-
-Title.propTypes = {
-  palette: PropTypes.oneOf(['default', 'primary', 'danger']),
-  text: PropTypes.string,
-  isBold: PropTypes.bool
-};
-
-Title.defaultProps = {
-  palette: 'default'
-};
-
-if (false) {
-  Title.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+}
+Title.propTypes = propTypes;
+Title.defaultProps = defaultProps; // if (__DOCS__) {
+//   Title.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

package/es/lookup/header/Title/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  palette: 'default'
+};

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

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  isBold: PropTypes.bool,
+  palette: PropTypes.oneOf(['default', 'primary', 'danger']),
+  text: PropTypes.string
+};

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

@@ -1,216 +1,176 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 /**** Libraries ****/
 import React from 'react';
-import PropTypes from 'prop-types';
-
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /**** Components ****/
+
 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 Loader from '@zohodesk/svg/lib/svg/Loader';
-import style from './ViewDropDown.module.css';
 
+import { Icon } from '@zohodesk/icons';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import style from './ViewDropDown.module.css';
 /* eslint-disable react/forbid-component-props */
-/*eslint-disable  react/sort-prop-types*/
-
-var DropDown = function (_SelectComponent) {
-  _inherits(DropDown, _SelectComponent);
 
-  function DropDown() {
-    _classCallCheck(this, DropDown);
+/*eslint-disable  react/sort-prop-types*/
 
-    return _possibleConstructorReturn(this, (DropDown.__proto__ || _Object$getPrototypeOf(DropDown)).apply(this, arguments));
+class DropDown extends SelectComponent {
+  constructor(props) {
+    super(props);
+    this.onSearchKeyDown = this.onSearchKeyDown.bind(this);
   }
 
-  _createClass(DropDown, [{
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var _props = this.props,
-          needSearch = _props.needSearch,
-          dropBoxSize = _props.dropBoxSize,
-          emptyMessage = _props.emptyMessage,
-          searchEmptyMessage = _props.searchEmptyMessage,
-          position = _props.position,
-          defaultDropBoxPosition = _props.defaultDropBoxPosition,
-          getTargetRef = _props.getTargetRef,
-          getContainerRef = _props.getContainerRef,
-          isPopupOpen = _props.isPopupOpen,
-          removeClose = _props.removeClose,
-          isPopupReady = _props.isPopupReady,
-          animationStyle = _props.animationStyle,
-          searchBoxSize = _props.searchBoxSize,
-          searchBoxVariant = _props.searchBoxVariant,
-          searchBoxPlaceHolder = _props.searchBoxPlaceHolder,
-          maxLength = _props.maxLength;
-      var _state = this.state,
-          hoverIndex = _state.hoverIndex,
-          selected = _state.selected,
-          searchStr = _state.searchStr,
-          isFetchingOptions = _state.isFetchingOptions,
-          selectedId = _state.selectedId;
+  onSearchKeyDown(e) {
+    const {
+      closePopupOnly
+    } = this.props;
 
-
-      var suggestions = this.handleFilterSuggestions();
-      return React.createElement(
-        'div',
-        { className: style.container },
-        React.createElement(
-          'div',
-          { onClick: this.togglePopup, ref: getTargetRef },
-          React.createElement(
-            'div',
-            {
-              className: style.labelCnt + ' ' + (isPopupOpen ? style.focused : '')
-            },
-            React.createElement(
-              'span',
-              { className: style.labelText },
-              selected
-            ),
-            React.createElement(Icon, {
-              name: 'ZD-blockDownArrow',
-              size: '6',
-              iconClass: style.arrowIcon
-            })
-          )
-        ),
-        isPopupOpen ? React.createElement(
-          DropBox,
-          {
-            isAnimate: true,
-            isArrow: false,
-            isActive: isPopupReady,
-            boxPosition: position || defaultDropBoxPosition + 'Center',
-            getRef: getContainerRef,
-            onClick: removeClose,
-            animationStyle: animationStyle,
-            size: 'large'
-          },
-          React.createElement(
-            Card,
-            null,
-            needSearch ? React.createElement(
-              CardHeader,
-              null,
-              React.createElement(DropDownSearch, {
-                value: searchStr,
-                onChange: this.handleSearch,
-                onKeyDown: this.handleKeyDown,
-                getRef: this.searchInputRef,
-                size: searchBoxSize,
-                variant: searchBoxVariant,
-                placeHolder: searchBoxPlaceHolder,
-                maxLength: maxLength
-              })
-            ) : null,
-            React.createElement(
-              CardContent,
-              {
-                eleRef: this.suggestionContainerRef,
-                className: dropBoxSize ? style[dropBoxSize] : ''
-              },
-              suggestions.length ? React.createElement(
-                'div',
-                { className: style.listItemContainer },
-                suggestions.map(function () {
-                  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-                  var index = arguments[1];
-                  var id = option.id,
-                      value = option.value;
-
-                  return React.createElement(ListItem, {
-                    active: id === selectedId,
-                    getRef: _this2.suggestionItemRef,
-                    highlight: hoverIndex === index ? true : false,
-                    id: id,
-                    key: id + 'dropDown',
-                    onClick: _this2.handleChange,
-                    onMouseEnter: _this2.handleMouseEnter,
-                    size: 'medium',
-                    value: value,
-                    index: index,
-                    needTick: true,
-                    needBorder: false
-                  });
-                })
-              ) : isFetchingOptions ? React.createElement(
-                Container,
-                { align: 'both', className: style.loader },
-                React.createElement(Loader, null)
-              ) : searchStr ? React.createElement(
-                'div',
-                { className: style.emptyState },
-                searchEmptyMessage || emptyMessage
-              ) : React.createElement(
-                'div',
-                { className: style.emptyState },
-                emptyMessage
-              )
-            )
-          )
-        ) : null
-      );
+    if (e.keyCode === 27) {
+      closePopupOnly && closePopupOnly(e);
+    } else {
+      this.handleKeyDown(e);
     }
-  }]);
-
-  return DropDown;
-}(SelectComponent);
-
-DropDown.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
-};
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
 
-DropDown.defaultProps = {
-  dropBoxSize: 'small',
-  needLocalSearch: true,
-  needSearch: true,
-  textField: 'text',
-  valueField: 'id'
-};
+  render() {
+    var _this = this;
+
+    const {
+      needSearch,
+      dropBoxSize,
+      emptyMessage,
+      searchEmptyMessage,
+      position,
+      defaultDropBoxPosition,
+      getTargetRef,
+      getContainerRef,
+      isPopupOpen,
+      removeClose,
+      isPopupReady,
+      animationStyle,
+      searchBoxSize,
+      searchBoxVariant,
+      searchBoxPlaceHolder,
+      maxLength
+    } = this.props;
+    const {
+      hoverIndex,
+      selected,
+      searchStr,
+      isFetchingOptions,
+      selectedId
+    } = this.state;
+    const suggestions = this.handleFilterSuggestions();
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: this.togglePopup,
+      ref: getTargetRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.labelCnt} ${isPopupOpen ? style.focused : ''}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.labelText,
+      "data-title": selected
+    }, selected), /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-down",
+      size: "7",
+      iconClass: style.arrowIcon
+    }))), 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);
+  }
 
-if (false) {
-  DropDown.docs = {
-    componentGroup: 'Lookup'
-  };
 }
 
-var ViewDropDown = Popup(DropDown);
-ViewDropDown.propTypes = DropDown.propTypes;
-ViewDropDown.defaultProps = DropDown.defaultProps;
+DropDown.propTypes = propTypes;
+DropDown.defaultProps = defaultProps;
+const ViewDropDown = Popup(DropDown);
+ViewDropDown.defaultProps = DropDown.defaultProps; // if (__DOCS__) {
+//   DropDown.docs = {
+//     componentGroup: 'Lookup'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   ViewDropDown.propTypes = DropDown.propTypes;
+// }
+
 export default ViewDropDown;

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

@@ -1,18 +1,18 @@
 .small {
-  max-height: var(--zd_size200);
+  max-height: var(--zd_size200) ;
 }
 .medium {
-  max-height: var(--zd_size348);
+  max-height: var(--zd_size348) ;
 }
 .large {
-  max-height: var(--zd_size400);
+  max-height: var(--zd_size400) ;
 }
 .emptyState {
-  font-size: var(--zd_size14);
-  color: var(--dot_text_slateGrey);
+  font-size: var(--zd_font_size14) ;
+  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);
+  padding: var(--zd_size12) var(--zd_size15) ;
 }
 .hide {
   composes: vishidden from '~@zohodesk/components/lib/common/common.module.css';
@@ -21,32 +21,30 @@
   position: relative;
 }
 .listItemContainer {
-  padding: var(--zd_size10) 0;
+  padding: var(--zd_size10) 0 ;
 }
 /* Label Style */
 .labelCnt {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   line-height: var(--zd_size20);
-  color: var(--dot_text_shuttleGrey);
-  padding: 0 var(--zd_size12);
+  color: var(--zdt_viewdropdown_label_text);
   cursor: pointer;
 }
 .labelText {
-  font-size: var(--zd_size12);
-  max-width: var(--zd_size180);
+  font-size: var(--zd_font_size12) ;
+  max-width: var(--zd_size180) ;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .labelText {
-  margin-right: var(--zd_size5);
+  margin-right: var(--zd_size5) ;
 }
 [dir=rtl] .labelText {
-  margin-left: var(--zd_size5);
+  margin-left: var(--zd_size5) ;
 }
 .labelCnt:hover .arrowIcon {
-  color: var(--dot_text_black);
+  color: var(--zdt_viewdropdown_hover_label_text);
 }
 
-.loader{
-  padding: var(--zd_size12) var(--zd_size15); 
-}
+.loader {
+  padding: var(--zd_size12) var(--zd_size15) ;
+}

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

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  dropBoxSize: 'small',
+  needLocalSearch: true,
+  needSearch: true,
+  textField: 'text',
+  valueField: 'id'
+};

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

@@ -0,0 +1,27 @@
+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
+};

package/es/lookup/header/index.js

@@ -0,0 +1,5 @@
+export { default as Close } from './Close/Close';
+export { default as ModuleHeader } from './ModuleHeader/ModuleHeader';
+export { default as Search } from './Search/Search';
+export { default as TicketHeader } from './TicketHeader/TicketHeader';
+export { default as ViewDropDown } from './ViewDropDown/ViewDropDown';

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

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