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

package/README.md

@@ -2,6 +2,25 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.225
+
+- ToggleDropDown, DepartmentDropDown, StatusDropdown search empty text change (Oops to No results found)
+
+# 1.0.0-beta.224
+
+- className prop added in ImportantNotes 
+- palette prop added in ModuleHeader 
+- palette prop added in TicketHeader 
+
+# 1.0.0-beta.223
+
+ - TagMultiSelect id, onSelectTag prop added.
+ - GridStencils UI fix.
+
+# 1.0.0-beta.222
+
+- TagMultiSelect Keyboard Shortcut Issue Fixed
+
 # 1.0.0-beta.221
 
 - editor fontsize prop added

package/es/FreezeLayer/FreezeLayer.js

@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Container } from '@zohodesk/components/lib/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css'; //import { Shortcut } from '../utils/KeyboardApi';
-
+import style from './FreezeLayer.module.css';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import { getDotLibraryConfig } from '../Provider/Config';
 export default class FreezeLayer extends Component {
@@ -53,8 +52,7 @@ export default class FreezeLayer extends Component {
 
     if (isActive != prevProps.isActive) {
       if (isActive) {
-        this.enableFreeze(); // Shortcut && Shortcut.setState(false);
-
+        this.enableFreeze();
         this.setState({
           isActive: true
         }, () => {
@@ -63,8 +61,7 @@ export default class FreezeLayer extends Component {
           });
         });
       } else {
-        this.disableFreeze(); // Shortcut && Shortcut.setState(true);
-
+        this.disableFreeze();
         this.setState({
           isChildActive: false
         }, () => {

package/es/ImportantNotes/ImportantNotes.js

@@ -15,14 +15,15 @@ export default class ImportantNotes extends React.Component {
       iconSize,
       children,
       iconClass,
-      isCover
+      isCover,
+      className
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       isInline: !isCover,
       isCover: false,
       alignBox: "row",
       align: "top",
-      className: style.section
+      className: `${style.section} ${className || ''}`
     }, iconName ? /*#__PURE__*/React.createElement(Box, {
       className: style.icon,
       align: "start"
@@ -43,7 +44,8 @@ ImportantNotes.propTypes = {
   iconName: PropTypes.string,
   iconSize: PropTypes.string,
   isCover: PropTypes.bool,
-  text: PropTypes.string
+  text: PropTypes.string,
+  className: PropTypes.string
 };
 ImportantNotes.defaultProps = {
   iconName: 'ZD-helpCentre',

package/es/deprecated/utils/KeyboardApi.js

@@ -0,0 +1,294 @@
+//$Id$
+let isShortCutEnabled;
+let showShortcut = {};
+let shortcutdatas = {};
+let additionalKey = {};
+let _SpecialKeyMaps = {
+  8: 'backspace',
+  9: 'tab',
+  13: 'enter',
+  16: 'shift',
+  17: 'ctrl',
+  18: 'alt',
+  //20: 'capslock',
+  27: 'esc',
+  32: 'space',
+  //33: 'pageup',
+  //34: 'pagedown',
+  //35: 'end',
+  //36: 'home',
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+  46: 'del',
+  91: 'meta',
+  93: 'meta',
+  224: 'meta',
+  43: 'plus',
+  //   +
+  61: 'plus',
+  //  = , in firefox
+  63: 'ques',
+  // ?
+  187: 'plus',
+  //  =
+  191: 'slash' //   /
+
+};
+export function Shortcut(target) {
+  _addEvent(target, 'keypress', keycallback);
+
+  _addEvent(target, 'keydown', keycallback);
+
+  _addEvent(target, 'keyup', keycallback);
+}
+
+Shortcut.setState = function (isEnabled) {
+  isShortCutEnabled = isEnabled;
+};
+
+Shortcut.addAll = function (keysObj, props) {
+  showShortcut = props.showShortcut;
+  isShortCutEnabled && keysObj.map((keyOptions, index) => {
+    Shortcut.add(keyOptions.keyCombo, keyOptions.keyCallback(props), keyOptions.keyAction, keyOptions.displayLabel || []);
+    return;
+  });
+};
+/**
+ * @param keycombo = 'z' or 'z+e' or 'shift+a' etc..
+ * @param callback = any function
+ * @param action = keypress or keydown or keyup
+ */
+
+
+Shortcut.bulkAdd = function (shortcutArray) {
+  showShortcut && shortcutArray.map(shortcutObj => {
+    Shortcut.add(shortcutObj.keyCombo, shortcutObj.keyCallback, shortcutObj.keyAction, shortcutObj.displayLabel || []);
+  });
+};
+
+Shortcut.add = function (keycombo, cpFunc, action, displayLabel) {
+  if (!keycombo || !isShortCutEnabled) {
+    return;
+  }
+
+  let tempjson = {};
+
+  if (cpFunc === undefined) {
+    cpFunc = function (keycode, keyOptions, e) {
+      _defaultCallBack(keycode, keyOptions);
+    };
+  } else {
+    let oldfunc = cpFunc;
+
+    cpFunc = function (keycode, keyOptions, ev) {
+      oldfunc(keycode, ev);
+    };
+  }
+
+  tempjson.key = keycombo.toLowerCase();
+  tempjson.displayLabel = displayLabel;
+  tempjson.keyOptions = cpFunc;
+  tempjson.action = action || 'keypress';
+  shortcutdatas[keycombo.toLowerCase()] = tempjson;
+};
+/*Shortcut.prototype.remove = function(){
+
+};*/
+
+
+Shortcut.removeAll = function () {
+  shortcutdatas = {};
+};
+
+Shortcut.show = function () {
+  return Object.assign({}, shortcutdatas);
+};
+
+Shortcut.remove = function (keyCombo) {
+  keyCombo = Array.isArray(keyCombo) ? keyCombo : [keyCombo];
+  keyCombo.map(key => {
+    delete shortcutdatas[key];
+  });
+};
+
+Shortcut.init = function (doc) {
+  let documentshortcut = Shortcut(doc);
+
+  for (let method in documentshortcut) {
+    if (method.charAt(0) !== '_') {
+      Shortcut[method] = function (method) {
+        return function () {
+          return documentshortcut[method](...arguments);
+        };
+      }(method);
+    }
+  }
+};
+
+function _addEvent(object, type, callback) {
+  if (object.addEventListener) {
+    object.addEventListener(type, callback, false);
+    return;
+  }
+
+  object.attachEvent(`on${type}`, callback);
+}
+
+export function keycallback(e) {
+  if (!isShortCutEnabled) {
+    return;
+  }
+
+  let keyaction = e.type;
+
+  let keycode = _convertToKeyCharacter(e);
+
+  if (e.metaKey) {
+    return;
+  }
+
+  _bindNeedData(e, keyaction);
+
+  if ('esc' !== keycode) {
+    if (_shortRestrictionPlaces(e)) {
+      //return if type any text in input tag or texta area
+      return;
+    }
+  }
+
+  keycode = _eventModifiers(e) + keycode;
+  let keycodedata = shortcutdatas[keycode];
+
+  if (keycodedata) {
+    e.preventDefault();
+  }
+
+  if (keycodedata && keyaction === keycodedata.action && keycodedata.keyOptions) {
+    keycodedata.keyOptions && keycodedata.keyOptions(keycode, keycodedata.keyOptions, e);
+    showShortcut({
+      type: 'SHORTCUT_SHOW',
+      displayLabel: keycodedata.displayLabel
+    });
+  }
+}
+
+function _eventModifiers(e) {
+  if (e.shiftKey === true && e.metaKey === true) {
+    return 'command+shift+';
+  }
+
+  if (e.shiftKey === true && e.ctrlKey === true) {
+    return 'ctrl+shift+';
+  }
+
+  if (e.altKey === true && e.ctrlKey === true) {
+    return 'alt+ctrl+';
+  }
+
+  if (e.ctrlKey === true) {
+    return 'ctrl+';
+  }
+
+  if (e.metaKey === true) {
+    return 'command+';
+  }
+
+  if (e.shiftKey === true) {
+    return 'shift+';
+  }
+
+  if (additionalKey.zpress === true) {
+    return 'z+';
+  } else if (additionalKey.apress === true) {
+    return 'a+';
+  } else if (additionalKey.cpress === true) {
+    return 'c+';
+  } else if (additionalKey.dpress === true) {
+    return 'd+';
+  } else if (additionalKey.fpress === true) {
+    return 'f+';
+  } else if (additionalKey.kpress === true) {
+    return 'k+';
+  } else if (additionalKey.ppress === true) {
+    return 'p+';
+  } else if (additionalKey.rpress === true) {
+    return 'r+';
+  } else if (additionalKey.tpress === true) {
+    return 't+';
+  } else if (additionalKey.epress === true) {
+    return 'e+';
+  } else if (additionalKey.lpress === true) {
+    return 'l+';
+  }
+
+  return '';
+}
+
+function _bindNeedData(e, keyaction) {
+  let keyName = String.fromCharCode(e.keyCode).toLowerCase();
+
+  if (['z', 'a', 'c', 'd', 'f', 'k', 'p', 'r', 't', 'l', 'e'].indexOf(keyName) !== -1) {
+    let extraName = `${keyName}press`;
+
+    if (keyaction === 'keydown') {
+      additionalKey = !additionalKey[extraName] ? Object.assign({}, additionalKey, {
+        [extraName]: true
+      }) : additionalKey;
+      additionalKey[extraName] = true;
+    } else if (keyaction === 'keyup') {
+      additionalKey = !additionalKey[extraName] ? Object.assign({}, additionalKey, {
+        [extraName]: false
+      }) : additionalKey;
+      additionalKey[extraName] = false;
+    }
+  }
+}
+
+function _convertToKeyCharacter(e) {
+  let keyCode = e.keyCode || e.charCode;
+  let keyName = String.fromCharCode(keyCode).toLowerCase();
+  keyName = _SpecialKeyMaps.hasOwnProperty(keyCode) ? _SpecialKeyMaps[keyCode] : keyName;
+  return keyName;
+}
+
+function _defaultCallBack(keycombo, keyOptions) {
+  /*var keyElement = jQuery("[data-shortcut-key='" + keycombo + "']");
+  if (keyOptions.callbackflow !== undefined) {
+    keycombo = keyOptions.callbackflow.split(',');
+    var click = function(i, combo) {
+      setTimeout(function() {
+        jQuery("[data-shortcut-key='" + combo + "']").trigger('click');
+      }, i * 200);
+    };
+    for (var i = 0; i < keycombo.length; i++) {
+      var clickFunc = click.bind(this, i);
+      clickFunc(keycombo[i]);
+      highLightKeys(keycombo[i]);
+    }
+    return;
+  }
+  if (keyElement.length === 1) {
+    keyElement.trigger('click');
+    highLightKeys(keycombo);
+    return;
+  }*/
+}
+
+function _shortRestrictionPlaces(e) {
+  let _target = e.target;
+  let {
+    tagName
+  } = _target;
+  let keyCode = e.keyCode || e.charCode;
+  let isContentEditable = _target.contentEditable === 'true';
+
+  if (['TEXTAREA', 'INPUT', 'SELECT'].indexOf(tagName) !== -1 || //!SupportUI.CurrentUser.getKBStatus() ||
+  //restrict_keyUI() ||
+  keyCode >= 112 && keyCode <= 123 || isContentEditable) {
+    return true;
+  }
+
+  return false;
+}

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,3 +1,5 @@
+import "core-js/modules/es.array.includes";
+
 function _extends() { _extends = Object.assign || 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); }
 
 import React, { Component, Fragment } from 'react';
@@ -799,8 +801,8 @@ export class ToggleDropDown extends Component {
       }, ListItemProps)));
     })) : /*#__PURE__*/React.createElement(CommonEmptyState, {
       className: style.svgWrapper,
-      title: searchErrorText || 'oops !',
       description: searchEmptyHint,
+      title: searchErrorText || 'No results',
       size: "small",
       getEmptyState: this.emptySearchSVG
     }) : /*#__PURE__*/React.createElement("div", {

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -18,12 +18,20 @@ export default class TagsMultiSelect extends React.Component {
     this.state = {
       showAll: false
     };
-    this.textBoxRef = /*#__PURE__*/React.createRef();
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.onShowAllClick = this.onShowAllClick.bind(this);
     this.getContainerRef = this.getContainerRef.bind(this);
     this.onScroll = this.onScroll.bind(this);
     this.getSelectedItemRef = this.getSelectedItemRef.bind(this);
+    this.textInputRef = this.textInputRef.bind(this);
+  }
+
+  textInputRef(el) {
+    const {
+      getTextInputRef
+    } = this.props;
+    this.inputEl = el;
+    getTextInputRef && getTextInputRef(el);
   }
 
   onScroll() {
@@ -58,10 +66,8 @@ export default class TagsMultiSelect extends React.Component {
 
     if (prevProps.isTagListLoading !== isTagListLoading && !isTagListLoading || isPopupReady && prevProps.tagsList.length !== tagsList.length) {
       setTimeout(() => {
-        let textBoxElementRef = this.textBoxRef.current;
-
-        if (textBoxElementRef && typeof textBoxElementRef.handleFocus === 'function') {
-          this.textBoxRef.current.handleFocus();
+        if (this.inputEl) {
+          this.inputEl.focus();
         }
       }, 300);
     }
@@ -118,7 +124,8 @@ export default class TagsMultiSelect extends React.Component {
       borderColor,
       getTextBoxChildren,
       htmlId,
-      boxSize
+      boxSize,
+      onSelectTag
     } = this.props;
     let {
       showAll
@@ -140,17 +147,20 @@ export default class TagsMultiSelect extends React.Component {
     }, tagsList.length ? /*#__PURE__*/React.createElement(React.Fragment, null, tagsList.map((tag, index) => {
       let {
         name,
-        tagType
+        tagType,
+        id
       } = tag;
       return index < chipLimit ? /*#__PURE__*/React.createElement(Box, {
         className: style.tag,
         key: index
       }, /*#__PURE__*/React.createElement(Tag, {
+        id: id,
         text: name,
         onRemove: isReadOnly ? null : deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
         palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-        isReadOnly: isReadOnly
+        isReadOnly: isReadOnly,
+        onSelectTag: onSelectTag ? onSelectTag : undefined
       })) : null;
     }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
       className: style.moreLess,
@@ -171,7 +181,6 @@ export default class TagsMultiSelect extends React.Component {
       onChange: handleChange,
       maxLength: 50,
       isReadOnly: isReadOnly,
-      ref: this.textBoxRef,
       needBorder: false,
       placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
       onClick: !isReadOnly ? handleTogglePopup : undefined,
@@ -179,7 +188,8 @@ export default class TagsMultiSelect extends React.Component {
         customTBoxWrap: style.custmInp,
         customTextBox: style.input
       },
-      size: "xsmall"
+      size: "xsmall",
+      inputRef: this.textInputRef
     }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
       isAnimate: true,
       isActive: isPopupReady,
@@ -251,6 +261,7 @@ TagsMultiSelect.propTypes = {
   deleteTag: PropTypes.func,
   getContainerRef: PropTypes.func,
   getTargetRef: PropTypes.func,
+  getTextInputRef: PropTypes.func,
   handleChange: PropTypes.func,
   handleKeyUp: PropTypes.func,
   handleTogglePopup: PropTypes.func,
@@ -281,7 +292,8 @@ TagsMultiSelect.propTypes = {
   needBorder: PropTypes.bool,
   getTextBoxChildren: PropTypes.func,
   htmlId: PropTypes.string,
-  boxSize: PropTypes.string
+  boxSize: PropTypes.string,
+  onSelectTag: PropTypes.func
 };
 TagsMultiSelect.defaultProps = {
   className: '',

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -52,7 +52,7 @@ class DepartmentDropDown extends Component {
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
-      searchErrorText = 'OOPS !',
+      searchErrorText = 'No results',
       placeholder = 'Search Department'
     } = i18nKeys;
     return /*#__PURE__*/React.createElement(ToggleDropDown, {

package/es/list/GridStencils/GridStencils.module.css

@@ -3,7 +3,9 @@
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
   padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
   position: relative;
-  margin-bottom: var(--zd_size10);
+  margin: 0 auto var(--zd_size10) auto;
+  border-radius: var(--zd_size5);
+  width: var(--zd_size265);
 }
 .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;

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

@@ -408,7 +408,7 @@ export class StatusDropdown extends React.Component {
       }
     })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
       className: style.svgWrapper,
-      title: searchErrorText || 'oops !',
+      title: searchErrorText || 'No results',
       description: searchEmptyHint,
       size: "small",
       getEmptyState: this.emptySearchSVG

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

@@ -28,12 +28,13 @@ export default class ModuleHeader extends PureComponent {
       miniDescription,
       dataId,
       closeTitle,
-      onSearchKeyDown
+      onSearchKeyDown,
+      palette
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${commonStyle.container}`,
+      className: `${commonStyle.container} ${commonStyle[`${palette}`]}`,
       isCover: false,
       wrap: "wrap",
       dataId: dataId
@@ -79,7 +80,11 @@ ModuleHeader.propTypes = {
   title: PropTypes.string,
   dataId: PropTypes.string,
   closeTitle: PropTypes.string,
-  onSearchKeyDown: PropTypes.func
+  onSearchKeyDown: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'white'])
+};
+ModuleHeader.defaultProps = {
+  palette: 'default'
 };
 
 if (false) {

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

@@ -31,7 +31,8 @@ export default class TicketHeader extends Component {
       needOnTypeSearch,
       getSearchBoxRef,
       needViewsList,
-      i18nKeys
+      i18nKeys,
+      palette
     } = this.props;
     let {
       menuEmptyMessage = 'No matches found'
@@ -39,7 +40,7 @@ export default class TicketHeader extends Component {
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${commonStyle.container} ${commonResponsive.container} ${style.container}`,
+      className: `${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`,
       isCover: false,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement("div", {
@@ -103,10 +104,12 @@ TicketHeader.propTypes = {
   title: PropTypes.string,
   i18nKeys: PropTypes.shape({
     menuEmptyMessage: PropTypes.string
-  })
+  }),
+  palette: PropTypes.oneOf(['default', 'white'])
 };
 TicketHeader.defaultProps = {
-  i18nKeys: {}
+  i18nKeys: {},
+  palette: 'default'
 };
 
 if (false) {

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

@@ -2,9 +2,15 @@
   min-height: var(--zd_size51);
   position: relative;
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
+}
+.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,
 .title {
   margin: 0 var(--zd_size20);

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -1,3 +1,5 @@
+import "core-js/modules/es.array.includes";
+
 function _extends() { _extends = Object.assign || 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); }
 
 import React from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.221",
+  "version": "1.0.0-beta.225",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -27,16 +27,17 @@
     "sstest": "react-cli sstest",
     "docs": "npm run dubCheck && react-cli docs",
     "postpublish": "react-cli postpublish",
-    "download": "rm package-lock.json && rm -rf node_modules/ && npm install"
+    "download": "rm package-lock.json && rm -rf node_modules/ && npm install",
+    "expublish": "npm publish --tag experimental-version"
   },
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-234",
-    "@zohodesk/icons": "1.0.0-beta.98",
-    "@zohodesk/svg": "1.0.0-beta.42",
+    "@zohodesk/components": "1.0.0-alpha-237",
+    "@zohodesk/icons": "1.0.0-beta.101",
+    "@zohodesk/svg": "1.0.0-beta.43",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3"
   },
@@ -44,9 +45,9 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-234",
-    "@zohodesk/icons": "1.0.0-beta.98",
-    "@zohodesk/svg": "1.0.0-beta.42"
+    "@zohodesk/components": "1.0.0-alpha-237",
+    "@zohodesk/icons": "1.0.0-beta.101",
+    "@zohodesk/svg": "1.0.0-beta.43"
   },
   "react-cli": {
     "preprocessor": {