@zohodesk/components 1.0.0-temp-39 → 1.0.0-temp-43

package/es/Select/Select.js

@@ -1,3 +1,5 @@
+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); }
+
 /**** Libraries ****/
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -246,12 +248,17 @@ export class SelectComponent extends Component {
     let {
       options,
       valueField,
-      textField
+      textField,
+      customProps = {}
     } = props;
+    let {
+      listItemProps = {}
+    } = customProps;
     return this.formatOptions({
       options,
       valueField,
-      textField
+      textField,
+      listItemProps
     });
   }
 
@@ -339,6 +346,20 @@ export class SelectComponent extends Component {
       this.valueInput && this.valueInput.focus({
         preventScroll: true
       }); //this.handlePopupClose(e);
+    } else if (keyCode === 9) {
+      let option = options[hoverIndex];
+      let {
+        id
+      } = option || {};
+
+      if (isPopupOpen && !getIsEmptyValue(id)) {
+        onChange && onChange(id, optionsNormalize[id]);
+        needCloseOnSelect && this.handlePopupClose(e);
+      }
+
+      if (!isPopupOpen && isPopupOpenOnEnter) {
+        this.togglePopup(e);
+      }
     }
   }
 
@@ -692,7 +713,8 @@ export class SelectComponent extends Component {
       i18nKeys,
       htmlId,
       children,
-      iconOnHover
+      iconOnHover,
+      customProps
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -713,6 +735,11 @@ export class SelectComponent extends Component {
     let suggestions = this.handleFilterSuggestions();
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxProps = {},
+      DropdownSearchTextBoxProps = {},
+      SuggestionsProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-title": isDisabled ? title : ''
@@ -755,7 +782,10 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: TextBoxProps
+      }
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "both"
@@ -800,7 +830,8 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       autoComplete: false,
-      isFocus: isPopupReady
+      isFocus: isPopupReady,
+      customProps: TextBoxProps
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
       animationStyle: animationStyle,
       boxPosition: position || `${defaultDropBoxPosition}Center`,
@@ -833,11 +864,14 @@ export class SelectComponent extends Component {
       onClear: this.handleClearSearch,
       dataId: `${dataId}_search`,
       i18nKeys: TextBoxIcon_i18n,
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: DropdownSearchTextBoxProps
+      }
     }))) : null, /*#__PURE__*/React.createElement(CardContent, {
       customClass: dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
-    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       activeId: selectedId,
       suggestions: suggestions,
       getRef: this.suggestionItemRef,
@@ -855,7 +889,7 @@ export class SelectComponent extends Component {
         ariaParentRole: 'listbox',
         role: 'option'
       }
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,
@@ -945,7 +979,13 @@ SelectComponent.propTypes = {
   htmlId: PropTypes.string,
   children: PropTypes.node,
   onFocus: PropTypes.func,
-  iconOnHover: PropTypes.bool
+  iconOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    DropdownSearchTextBoxProps: PropTypes.object,
+    listItemProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
+  })
 };
 SelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -977,7 +1017,8 @@ SelectComponent.defaultProps = {
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
-  iconOnHover: false
+  iconOnHover: false,
+  customProps: {}
 };
 SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);

package/es/Select/Select.module.css

@@ -1,100 +1,100 @@
-.input {
-  cursor: pointer;
-}
-.small {
-  max-height: var(--zd_size200);
-}
-.medium {
-  max-height: var(--zd_size350);
-}
-.large {
-  max-height: var(--zd_size400);
-}
-.emptyState {
-  font-size: var(--zd_font_size14);
-  color: var(--zdt_select_emptystate_text);
-  composes: semibold from '../common/common.module.css';
-}
-.box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6);
-}
-.box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15);
-}
-.hide {
-  composes: vishidden from '../common/common.module.css';
-}
-.container {
-  position: relative;
-}
-.arrowIcon {
-  height: var(--zd_size8);
-  line-height: var(--zd_size8);
-}
-.small.search {
-  padding: 0 var(--zd_size5);
-}
-.medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0;
-}
-.title {
-  margin-bottom: var(--zd_size6);
-}
-.groupTitle {
-  margin: var(--zd_size6) 0;
-}
-.listItemContainer {
-  padding: var(--zd_size10) 0;
-}
-.readonly {
-  composes: readonly from '../common/common.module.css';
-}
-.transparentContainer .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-.transparentContainer:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-.disable {
-  color: var(--zdt_select_disable_text);
-}
-
-.leftIcon {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--zd_size30);
-}
-
-[dir=ltr] .leftIcon {
-  left: 0;
-}
-
-[dir=rtl] .leftIcon {
-  right: 0;
-}
-[dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30);
-}
-
-.dropBoxList {
-  padding: var(--zd_size10) 0;
-}
-.rotate {
-  transform: rotateX(180deg);
-}
-.iconOnHoverStyle .arrowIcon,
-.iconOnHoverReadonly .arrowIcon,
-.iconOnHoverReadonly:hover .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-.iconOnHoverStyle:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
+.input {
+  cursor: pointer;
+}
+.small {
+  max-height: var(--zd_size200);
+}
+.medium {
+  max-height: var(--zd_size350);
+}
+.large {
+  max-height: var(--zd_size400);
+}
+.emptyState {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_select_emptystate_text);
+  composes: semibold from '../common/common.module.css';
+}
+.box_small .emptyState {
+  padding: var(--zd_size12) var(--zd_size6);
+}
+.box_medium .emptyState {
+  padding: var(--zd_size12) var(--zd_size15);
+}
+.hide {
+  composes: vishidden from '../common/common.module.css';
+}
+.container {
+  position: relative;
+}
+.arrowIcon {
+  height: var(--zd_size8);
+  line-height: var(--zd_size8);
+}
+.small.search {
+  padding: 0 var(--zd_size5);
+}
+.medium.search {
+  padding: var(--zd_size3) var(--zd_size20) 0;
+}
+.title {
+  margin-bottom: var(--zd_size6);
+}
+.groupTitle {
+  margin: var(--zd_size6) 0;
+}
+.listItemContainer {
+  padding: var(--zd_size10) 0;
+}
+.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+.transparentContainer .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+.disable {
+  color: var(--zdt_select_disable_text);
+}
+
+.leftIcon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--zd_size30);
+}
+
+[dir=ltr] .leftIcon {
+  left: 0;
+}
+
+[dir=rtl] .leftIcon {
+  right: 0;
+}
+[dir=ltr] .iconSelect {
+  padding-left: var(--zd_size30);
+}
+[dir=rtl] .iconSelect {
+  padding-right: var(--zd_size30);
+}
+
+.dropBoxList {
+  padding: var(--zd_size10) 0;
+}
+.rotate {
+  transform: rotateX(180deg);
+}
+.iconOnHoverStyle .arrowIcon,
+.iconOnHoverReadonly .arrowIcon,
+.iconOnHoverReadonly:hover .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+.iconOnHoverStyle:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}

package/es/Select/SelectWithAvatar.js

@@ -141,7 +141,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       tagSize,
       groupName,
       i18nKeys,
-      htmlId
+      htmlId,
+      needEffect
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -164,7 +165,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${className ? className : ''}`,
+      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Container, {
@@ -342,7 +343,8 @@ SelectWithAvatarComponent.propTypes = {
   title: PropTypes.string,
   togglePopup: PropTypes.func,
   valueField: PropTypes.string,
-  htmlId: PropTypes.string
+  htmlId: PropTypes.string,
+  needEffect: PropTypes.bool
 };
 SelectWithAvatarComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -363,7 +365,8 @@ SelectWithAvatarComponent.defaultProps = {
   dataId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
-  i18nKeys: {}
+  i18nKeys: {},
+  needEffect: true
 };
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);

package/es/Select/docs/Select__default.docs.js

@@ -37,6 +37,40 @@ let option = [{
   text: 'Pineapple',
   id: '10'
 }];
+let customOption = [{
+  text: 'Apple',
+  id: 0,
+  listItemProps: {
+    style: {
+      'color': 'red'
+    }
+  }
+}, {
+  text: 'Banana',
+  id: '1',
+  listItemProps: {
+    style: {
+      'color': 'orange'
+    }
+  }
+}, {
+  text: 'Blackberries',
+  id: '2',
+  listItemProps: {
+    style: {
+      'color': 'blue'
+    }
+  }
+}, {
+  text: 'Guava',
+  id: '3'
+}, {
+  text: 'Grapes',
+  id: '4'
+}, {
+  text: 'Jackfruit',
+  id: '5'
+}];
 export default class Select__default extends React.Component {
   constructor(props) {
     super(props);
@@ -93,6 +127,51 @@ export default class Select__default extends React.Component {
       searchBoxPlaceHolder: "Search",
       isDefaultSelectValue: false,
       isDisabled: true
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Props"), /*#__PURE__*/React.createElement(Select, {
+      options: customOption,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      i18nKeys: {
+        loadingText: 'Loading',
+        emptyText: 'emptyText',
+        noMoreText: 'noMoreText',
+        searchEmptyText: 'searchEmptyText',
+        TextBoxIcon_i18n: {
+          clearText: 'Clear Data'
+        }
+      },
+      customProps: {
+        listItemProps: {
+          style: {
+            'color': 'green'
+          }
+        },
+        TextBoxProps: {
+          style: {
+            'color': 'brown'
+          }
+        },
+        DropdownSearchTextBoxProps: {
+          style: {
+            'color': 'purple'
+          }
+        }
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isDisabled",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isDisabled: true
     }), /*#__PURE__*/React.createElement("div", null, "Readonly"), /*#__PURE__*/React.createElement(Select, {
       options: option,
       onChange: this.handleChange,

package/es/Stencils/Stencils.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
 
 import style from './Stencils.module.css';
-export default class Stencils extends React.Component {
+export default class Stencils extends React.PureComponent {
   render() {
     let {
       shape,