@zohodesk/components 1.0.0-test-252 → 1.0.0

package/es/Select/Select.js

@@ -1,9 +1,11 @@
 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); }
+
 /**** Libraries ****/
 import React, { Component } from 'react';
 import { Select_defaultProps } from './props/defaultProps';
 import { Select_propTypes } from './props/propTypes';
 /**** Components ****/
+
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
@@ -12,19 +14,20 @@ import Card, { CardHeader, CardContent, CardFooter } from '../Card/Card';
 import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
 import { getUniqueId } from '../Provider/IdProvider';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-
 /**** Methods ****/
+
 import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from '../utils/dropDownUtils';
 import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd } from '../utils/Common.js';
 /**** CSS ****/
+
 import style from './Select.module.css';
 import { getLibraryConfig } from '../Provider/Config';
-
 /* eslint-disable react/no-deprecated */
+
 /* eslint-disable react/no-unused-prop-types */
 
 let dummyArray = [];
@@ -65,9 +68,10 @@ export class SelectComponent extends Component {
       valueField,
       textField
     });
-    if (isSelfValueChanged) {
-      // onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
+
+    if (isSelfValueChanged) {// onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
     }
+
     this.state = {
       selected,
       options: allOptions,
@@ -110,10 +114,10 @@ export class SelectComponent extends Component {
     this.autoSelectSuggestions = [];
     this.autoSelectIndex = 0;
   }
+
   componentDidMount() {
     this._isMounted = true;
-    this.handleExposePopupHandlers();
-    // let { suggestionContainer } = this;
+    this.handleExposePopupHandlers(); // let { suggestionContainer } = this;
     // suggestionContainer &&
     //   suggestionContainer.addEventListener('scroll', this.handleScroll);
   }
@@ -155,9 +159,10 @@ export class SelectComponent extends Component {
     let {
       selectedValue: oldSelectedValue
     } = this.props;
-    if (isSelfValueChanged && oldSelectedValue !== selectedValue) {
-      // onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
+
+    if (isSelfValueChanged && oldSelectedValue !== selectedValue) {// onChange && onChange(selectedId, normalizedAllOptions[selectedId]);
     }
+
     this.selectedFormatOptions = Object.assign(oldSelectedFormatOptions, selectedValueDetails);
     this.normalizedFormatOptions = normalizedFormatOptions;
     this.optionsOrder = optionsOrder;
@@ -170,6 +175,7 @@ export class SelectComponent extends Component {
       selectedValueIndex: hoverIndex
     });
   }
+
   componentDidUpdate(prevProps) {
     let {
       suggestionContainer,
@@ -192,6 +198,7 @@ export class SelectComponent extends Component {
     let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
     let selSuggestion = this[`suggestion_${hoverId}`];
     isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
+
     if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
         onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
@@ -209,20 +216,22 @@ export class SelectComponent extends Component {
           hoverIndex: selectedValueIndex
         });
       }
-    }
+    } //When suggestions length less than 5, getNextOptions function call
+
 
-    //When suggestions length less than 5, getNextOptions function call
     let {
       isNextOptions,
       getNextOptions
-    } = this.props;
-    // let { searchStr } = this.state;
+    } = this.props; // let { searchStr } = this.state;
+
     let suggestions = isPopupOpen ? this.handleFilterSuggestions() : [];
     let suggestionsLen = suggestions.length;
+
     if (isPopupOpen && suggestionsLen <= 5 && isNextOptions && getNextOptions && !needLocalSearch) {
       this.handleFetchOptions(getNextOptions, searchStr);
     }
   }
+
   componentWillUnmount() {
     this._isMounted = false;
     let {
@@ -234,8 +243,7 @@ export class SelectComponent extends Component {
       closePopup: null,
       togglePopup: null
     };
-    getPopupHandlers && getPopupHandlers(methods);
-    // let { suggestionContainer } = this;
+    getPopupHandlers && getPopupHandlers(methods); // let { suggestionContainer } = this;
     // suggestionContainer &&
     //   suggestionContainer.removeEventListener('scroll', this.handleScroll);
   }
@@ -257,6 +265,7 @@ export class SelectComponent extends Component {
       listItemProps
     });
   }
+
   handleChange(id, value, index, e) {
     e && e.preventDefault && e.preventDefault();
     let {
@@ -267,10 +276,11 @@ export class SelectComponent extends Component {
     let {
       optionsNormalize
     } = this.state;
-    !isReadOnly && onChange && onChange(id, optionsNormalize[id]);
-    // this.valueInput && this.valueInput.focus({preventScroll:true});
+    !isReadOnly && onChange && onChange(id, optionsNormalize[id]); // this.valueInput && this.valueInput.focus({preventScroll:true});
+
     needCloseOnSelect && this.handlePopupClose(e);
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -281,6 +291,7 @@ export class SelectComponent extends Component {
       }])
     };
   }
+
   handleKeyDown(e) {
     let {
       onChange,
@@ -297,33 +308,38 @@ export class SelectComponent extends Component {
     let {
       keyCode
     } = e;
+
     if (!isPopupOpen && !isPopupOpenOnEnter) {
       onKeyDown && onKeyDown(e);
     }
+
     if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll  and enter key prevent
     } else if (!isPopupOpen && keyCode === 40) {
       e.preventDefault(); //prevent body scroll
+
       this.togglePopup(e);
     }
+
     if (keyCode === 38 && isPopupOpen && options.length) {
-      if (hoverIndex === 0) {
-        // hoverIndex = options.length - 1;
+      if (hoverIndex === 0) {// hoverIndex = options.length - 1;
       } else {
         hoverIndex -= 1;
       }
+
       this.setState({
         hoverIndex
       });
     } else if (keyCode === 40 && isPopupOpen && options.length) {
-      if (hoverIndex === options.length - 1) {
-        // hoverIndex = 0;
+      if (hoverIndex === options.length - 1) {// hoverIndex = 0;
       } else {
         if (hoverIndex === options.length - 3) {
           this.handleGetNextOptions();
         }
+
         hoverIndex += 1;
       }
+
       this.setState({
         hoverIndex
       });
@@ -332,32 +348,36 @@ export class SelectComponent extends Component {
       let {
         id
       } = option || {};
+
       if (isPopupOpen && !getIsEmptyValue(id) && onChange) {
         onChange(id, optionsNormalize[id]);
         needCloseOnSelect && this.handlePopupClose(e);
       }
+
       if (!isPopupOpen && isPopupOpenOnEnter) {
         this.togglePopup(e);
       }
     } else if (keyCode === 27) {
       this.valueInput && this.valueInput.focus({
         preventScroll: true
-      });
-      //this.handlePopupClose(e);
+      }); //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);
       }
     }
   }
+
   handleSearchOptions() {
     let {
       onSearch
@@ -367,6 +387,7 @@ export class SelectComponent extends Component {
     } = this.state;
     searchStr && this.handleFetchOptions(onSearch, searchStr);
   }
+
   handleSearch(value) {
     // let { value = '' } = e.target;
     let {
@@ -389,7 +410,10 @@ export class SelectComponent extends Component {
       }
     });
   }
-  handleMouseEnter(id /*val, index*/) {
+
+  handleMouseEnter(id
+  /*val, index*/
+  ) {
     let {
       hoverIndex
     } = this.state;
@@ -401,21 +425,21 @@ export class SelectComponent extends Component {
       hoverIndex: newHoverIndex
     });
   }
+
   handleFilterSuggestions() {
     let {
       needLocalSearch,
-      excludeOptions = dummyArray
-      // needSearch
+      excludeOptions = dummyArray // needSearch
+
     } = this.props;
     let {
       options = dummyArray,
       searchStr = ''
-    } = this.state;
-
-    // if (
+    } = this.state; // if (
     //   (needSearch && searchStr && searchStr.trim().length) ||
     //   (excludeOptions && excludeOptions.length)
     // ) {
+
     searchStr = getSearchString(searchStr);
     let {
       suggestions,
@@ -427,8 +451,7 @@ export class SelectComponent extends Component {
       needSearch: needLocalSearch
     });
     this.optionsOrder = suggestionIds;
-    return suggestions;
-    // }
+    return suggestions; // }
     // return options;
   }
 
@@ -437,6 +460,7 @@ export class SelectComponent extends Component {
     let isScrollReachedBottom = findScrollEnd(ele);
     isScrollReachedBottom && this.handleGetNextOptions();
   }
+
   handleFetchOptions(APICall) {
     let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     // let funcArgs = args.slice(1, args.length);
@@ -446,10 +470,12 @@ export class SelectComponent extends Component {
     let {
       _isMounted
     } = this;
+
     if (!isFetchingOptions && APICall) {
       this.setState({
         isFetchingOptions: true
       });
+
       try {
         return APICall(searchStr).then(() => {
           _isMounted && this.setState({
@@ -467,6 +493,7 @@ export class SelectComponent extends Component {
       }
     }
   }
+
   handleGetNextOptions() {
     let {
       isNextOptions,
@@ -477,6 +504,7 @@ export class SelectComponent extends Component {
     } = this.state;
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
   }
+
   togglePopup(e) {
     let {
       togglePopup,
@@ -488,6 +516,7 @@ export class SelectComponent extends Component {
     !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}` : null);
     !isPopupOpen && typeof onFocus === 'function' && onFocus(e);
   }
+
   handlePopupClose(e) {
     let {
       closePopupOnly
@@ -497,15 +526,19 @@ export class SelectComponent extends Component {
     });
     closePopupOnly(e);
   }
+
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
   }
+
   suggestionItemRef(el, index, id) {
     this[`suggestion_${id}`] = el;
   }
+
   searchInputRef(el) {
     this.searchInput = el;
   }
+
   valueInputRef(el) {
     let {
       getRef
@@ -513,12 +546,14 @@ export class SelectComponent extends Component {
     this.valueInput = el;
     getRef && getRef(el);
   }
+
   handleSelectFocus() {
     let {
       valueInput
     } = this;
     valueInput && valueInput.setSelectionRange(valueInput, 0);
   }
+
   handleClearSearch() {
     this.handleSearch('');
     setTimeout(() => {
@@ -527,6 +562,7 @@ export class SelectComponent extends Component {
       });
     }, 1);
   }
+
   handleValueInputChange(e) {
     let {
       which
@@ -536,11 +572,13 @@ export class SelectComponent extends Component {
       isPopupOpen,
       autoSelectOnType
     } = this.props;
+
     if (!isPopupOpen && autoSelectOnType) {
       this.valueInputTypeString += (typeString || '').trim();
       this.handleChangeOnType();
     }
   }
+
   handleChangeOnType() {
     let {
       excludeOptions = dummyArray
@@ -553,11 +591,13 @@ export class SelectComponent extends Component {
     } = this;
     let typeString = this.valueInputTypeString;
     this.valueInputTypeString = '';
+
     let changeValue = () => {
       let optionDetails = this.autoSelectSuggestions[this.autoSelectIndex];
       let {
         id
       } = optionDetails || {};
+
       if (!getIsEmptyValue(id)) {
         this.handleChange(id);
         let hoverIndex = optionsOrder.indexOf(id);
@@ -566,12 +606,14 @@ export class SelectComponent extends Component {
         });
       }
     };
+
     if (typeString && typeString === this.valueInputSearchString) {
       if (this.autoSelectIndex < this.autoSelectSuggestions.length - 1) {
         this.autoSelectIndex += 1;
       } else {
         this.autoSelectIndex = 0;
       }
+
       changeValue();
     } else if (typeString) {
       this.valueInputSearchString = typeString;
@@ -589,6 +631,7 @@ export class SelectComponent extends Component {
       changeValue();
     }
   }
+
   handleAddNewOption() {
     let {
       searchStr
@@ -597,6 +640,7 @@ export class SelectComponent extends Component {
       onAddNewOption,
       getCustomEmptyState
     } = this.props;
+
     if (getCustomEmptyState) {
       this.setState({
         searchStr: ''
@@ -604,6 +648,7 @@ export class SelectComponent extends Component {
       this.handleFetchOptions(onAddNewOption, searchStr);
     }
   }
+
   handleExposePopupHandlers() {
     let {
       removeClose,
@@ -620,6 +665,7 @@ export class SelectComponent extends Component {
     };
     getPopupHandlers && getPopupHandlers(methods);
   }
+
   handleGetAddNewOptionText() {
     let {
       searchStr
@@ -632,6 +678,7 @@ export class SelectComponent extends Component {
       onAddNewOption: this.handleAddNewOption
     });
   }
+
   render() {
     let {
       needSearch,
@@ -676,7 +723,14 @@ export class SelectComponent extends Component {
       iconOnHover,
       customProps,
       autoComplete,
-      isLoading
+      ariaLabelledby,
+      isLoading,
+      dataSelectorId,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
+      dropBoxPortalId
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -704,22 +758,25 @@ export class SelectComponent extends Component {
     } = 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 : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
       ref: getTargetRef,
-      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       a11y: {
-        role: 'combobox',
+        role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
         ariaControls: setAriaId,
         ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
         ariaHaspopup: true,
         ariaReadonly: true,
         ariaActivedescendant: selectedId,
-        ariaOwns: setAriaId
+        ariaOwns: setAriaId,
+        ariaLabelledby: ariaLabelledby
       },
       isDisabled: isDisabled,
       iconRotated: isPopupOpen,
@@ -764,14 +821,15 @@ export class SelectComponent extends Component {
       size: "7"
     })))) : /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
-        role: 'combobox',
+        role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
         ariaControls: setAriaId,
         ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
         ariaHaspopup: true,
         ariaReadonly: true,
         ariaActivedescendant: selectedId,
-        ariaOwns: setAriaId
+        ariaOwns: setAriaId,
+        ariaLabelledby: ariaLabelledby
       },
       isDisabled: isDisabled,
       inputRef: this.valueInputRef,
@@ -814,7 +872,12 @@ export class SelectComponent extends Component {
         size: boxSize,
         isPadding: false,
         isResponsivePadding: getFooter ? false : true,
-        alignBox: "row"
+        alignBox: "row",
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
+        portalId: dropBoxPortalId
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -883,20 +946,22 @@ export class SelectComponent extends Component {
       }, getChildren())));
     }) : null);
   }
+
 }
 SelectComponent.propTypes = Select_propTypes;
 SelectComponent.defaultProps = Select_defaultProps;
 SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);
 Select.defaultProps = SelectComponent.defaultProps;
-export default Select;
-if (false) {
-  Select.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  Select.propTypes = SelectComponent.propTypes;
-}
+Select.propTypes = Select_propTypes;
+Select.displayName = 'Select';
+export default Select; // if (__DOCS__) {
+//   Select.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   Select.propTypes = SelectComponent.propTypes;
+// }

package/es/Select/Select.module.css

@@ -2,24 +2,24 @@
   cursor: pointer;
 }
 .small {
-  max-height: var(--zd_size200);
+  max-height: var(--zd_size200) ;
 }
 .medium {
-  max-height: var(--zd_size350);
+  max-height: var(--zd_size350) ;
 }
 .large {
-  max-height: var(--zd_size400);
+  max-height: var(--zd_size400) ;
 }
 .emptyState {
-  font-size: var(--zd_font_size14);
+  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);
+  padding: var(--zd_size12) var(--zd_size6) ;
 }
 .box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15);
+  padding: var(--zd_size12) var(--zd_size15) ;
 }
 .hide {
   composes: vishidden from '../common/common.module.css';
@@ -28,26 +28,26 @@
   position: relative;
 }
 .arrowIcon {
-  height: var(--zd_size8);
+  height: var(--zd_size8) ;
   line-height: var(--zd_size8);
 }
 .small.search {
-  padding: 0 var(--zd_size5);
+  padding: 0 var(--zd_size5) ;
 }
 .medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0;
+  padding: var(--zd_size3) var(--zd_size20) 0 ;
 }
 .title {
-  margin-bottom: var(--zd_size6);
+  margin-bottom: var(--zd_size6) ;
 }
 .groupTitle {
-  margin: var(--zd_size6) 0;
+  margin: var(--zd_size6) 0 ;
 }
 .listItemContainer {
-  padding: var(--zd_size10) 0;
+  padding: var(--zd_size10) 0 ;
 }
 .responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0;
+  padding: var(--zd_size10) 0 0 ;
 }
 .readonly {
   --textboxicon_icon_cursor: not-allowed;
@@ -66,30 +66,30 @@
 
 .leftIcon {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--zd_size30);
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--zd_size30) ;
 }
 
 [dir=ltr] .leftIcon {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .leftIcon {
-  right: 0;
+  right: 0 ;
 }
 [dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30);
+  padding-left: var(--zd_size30) ;
 }
 [dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30);
+  padding-right: var(--zd_size30) ;
 }
 
 .dropBoxList {
-  padding: var(--zd_size10) 0;
+  padding: var(--zd_size10) 0 ;
 }
 .responsivedropBoxList{
-  padding: var(--zd_size10) 0 0 0;
+  padding: var(--zd_size10) 0 0 0 ;
 }
 .rotate {
   transform: rotateX(180deg);
@@ -105,5 +105,5 @@
   visibility: visible;
 }
 .loader {
-  padding: var(--zd_size10);
+  padding: var(--zd_size10) ;
 }