@zohodesk/components 1.0.0-test-252 → 1.0.0

package/es/Select/SelectWithAvatar.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { SelectWithAvatar_defaultProps } from './props/defaultProps';
 import { SelectWithAvatar_propTypes } from './props/propTypes';
 /**** Components ****/
+
 import { SelectComponent } from './Select';
 import Popup from '../Popup/Popup';
 import Tag from '../Tag/Tag';
@@ -17,10 +18,11 @@ import { getUniqueId } from '../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-
 /**** CSS ****/
+
 import style from '../MultiSelect/MultiSelect.module.css';
 import selectStyle from './Select.module.css';
+
 class SelectWithAvatarComponent extends SelectComponent {
   constructor(props) {
     super(props);
@@ -32,6 +34,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     this.handleRemoveOption = this.handleRemoveOption.bind(this);
     this.getNextAriaId = getUniqueId(this);
   }
+
   handleFormatOptions(props) {
     let {
       options,
@@ -47,15 +50,18 @@ class SelectWithAvatarComponent extends SelectComponent {
       optionType: 'avatar'
     });
   }
+
   handleActive(e) {
     let {
       isActive
     } = this.state;
+
     if (!isActive) {
       this.setState({
         isActive: true
       });
     }
+
     let {
       target
     } = e || {};
@@ -65,16 +71,19 @@ class SelectWithAvatarComponent extends SelectComponent {
     } = this.props;
     onFocus && onFocus(this.state.searchStr);
   }
+
   handleInactive() {
     let {
       isActive
     } = this.state;
+
     if (isActive) {
       this.setState({
         isActive: false
       });
     }
   }
+
   handleSearchChange(e) {
     let {
       isPopupOpen
@@ -82,6 +91,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     !isPopupOpen && this.togglePopup(e);
     this.handleSearch(e);
   }
+
   handleRemoveOption(e) {
     let {
       keyCode
@@ -92,12 +102,14 @@ class SelectWithAvatarComponent extends SelectComponent {
     let {
       isDefaultSelectValue
     } = this.props;
+
     if (keyCode === 8 && searchStr.length === 0 && !isDefaultSelectValue) {
       this.handleChange('');
     } else {
       this.handleKeyDown(e);
     }
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -108,6 +120,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       }])
     };
   }
+
   render() {
     let {
       dropBoxSize,
@@ -144,7 +157,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       i18nKeys,
       htmlId,
       needEffect,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -169,7 +183,9 @@ class SelectWithAvatarComponent extends SelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       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 : null
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -179,6 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     }, selectedId ? /*#__PURE__*/React.createElement(Box, {
       className: style.tag,
       "data-id": `${dataId}_SelectTag`,
+      "data-test-id": `${dataId}_SelectTag`,
       key: `${id}tag`
     }, /*#__PURE__*/React.createElement(Tag, {
       avatarPalette: avatarPalette,
@@ -307,18 +324,20 @@ class SelectWithAvatarComponent extends SelectComponent {
       }, /*#__PURE__*/React.createElement(Loader, null))))));
     }) : null);
   }
+
 }
+
 SelectWithAvatarComponent.propTypes = SelectWithAvatar_propTypes;
 SelectWithAvatarComponent.defaultProps = SelectWithAvatar_defaultProps;
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);
-SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps;
-if (false) {
-  SelectWithAvatar.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes;
-}
+SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps; // if (__DOCS__) {
+//   SelectWithAvatar.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes;
+// }
+
 export default SelectWithAvatar;

package/es/Select/SelectWithIcon.js

@@ -2,9 +2,10 @@ import React, { Component } from 'react';
 import { SelectWithIcon_defaultProps } from './props/defaultProps';
 import { SelectWithIcon_propTypes } from './props/propTypes';
 /**** Components ****/
+
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ListItemWithIcon from '../ListItem/ListItemWithIcon';
 import Card, { CardHeader, CardContent } from '../Card/Card';
 import EmptyState from '../MultiSelect/EmptyState';
@@ -14,9 +15,12 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
+
 import { scrollTo, findScrollEnd } from '../utils/Common.js';
 /**** CSS ****/
+
 import style from './Select.module.css';
+
 class SelectWithIcon extends Component {
   constructor(props) {
     super(props);
@@ -42,34 +46,43 @@ class SelectWithIcon extends Component {
     this.handleGetNextOptions = this.handleGetNextOptions.bind(this);
     this.handleFetchOptions = this.handleFetchOptions.bind(this);
   }
+
   componentDidMount() {
     this._isMounted = true;
   }
+
   componentWillUnmount() {
     this._isMounted = false;
   }
+
   inputRef(el) {
     this.input = el;
   }
+
   itemRef(ele, index, id) {
     this[`suggestion_${id}`] = ele;
   }
+
   searchInputRef(el) {
     this.searchInput = el;
   }
+
   scrollContentRef(el) {
     let {
       isPopupOpen
     } = this.props;
+
     if (isPopupOpen) {
       this.optionsContainer = el;
     }
   }
+
   handleMouseEnter(id, value, index, e) {
     this.setState({
       selectedIndex: index
     });
   }
+
   handleKeyDown(e) {
     let {
       keyCode
@@ -84,10 +97,12 @@ class SelectWithIcon extends Component {
       isPopupOpen,
       selectedId
     } = this.props;
+
     if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     } else if (!isPopupOpen && (keyCode === 40 || keyCode === 13)) {
       e.preventDefault(); //prevent body scroll
+
       this.togglePopup(e);
       options.map((list, index) => {
         if (list.id === selectedId) {
@@ -97,6 +112,7 @@ class SelectWithIcon extends Component {
         }
       });
     }
+
     if (isPopupOpen) {
       switch (keyCode) {
         case 40:
@@ -108,11 +124,14 @@ class SelectWithIcon extends Component {
             if (selectedIndex === options.length - 3) {
               this.handleGetNextOptions();
             }
+
             this.setState({
               selectedIndex: selectedIndex + 1
             });
           }
+
           break;
+
         case 38:
           if (selectedIndex === 0) {
             this.setState({
@@ -123,7 +142,9 @@ class SelectWithIcon extends Component {
               selectedIndex: selectedIndex - 1
             });
           }
+
           break;
+
         case 13:
           let option = options[selectedIndex];
           this.handleChange && this.handleChange(option[idKey], option[valueKey], selectedIndex, e);
@@ -131,6 +152,7 @@ class SelectWithIcon extends Component {
       }
     }
   }
+
   componentDidUpdate(prevProps) {
     let {
       idKey,
@@ -141,6 +163,7 @@ class SelectWithIcon extends Component {
       selectedIndex,
       options
     } = this.state;
+
     if (prevProps.isPopupOpen != isPopupOpen) {
       setTimeout(() => {
         isPopupOpen ? needSearch ? this.searchInput.focus({
@@ -152,32 +175,39 @@ class SelectWithIcon extends Component {
         });
       }, 10);
     }
+
     let option = options[selectedIndex];
     let id = option && option[idKey] || {};
     let selSuggestion = this[`suggestion_${id}`];
+
     if (isPopupOpen) {
       this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
     }
   }
+
   searchList(searchValue) {
     let datas = [];
     let {
       options,
       valueKey
     } = this.props;
+
     if (options.length) {
       datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase()));
     }
+
     return datas;
   }
+
   onSearchClear() {
-    let options = this.searchList('');
-    // this.searchInput.focus({preventScroll:false});
+    let options = this.searchList(''); // this.searchInput.focus({preventScroll:false});
+
     this.setState({
       searchValue: '',
       options
     });
   }
+
   onSearch(searchValue) {
     let options = this.searchList(searchValue);
     this.setState({
@@ -186,6 +216,7 @@ class SelectWithIcon extends Component {
       options
     });
   }
+
   togglePopup(e) {
     let {
       togglePopup,
@@ -194,6 +225,7 @@ class SelectWithIcon extends Component {
     } = this.props;
     !isReadOnly && togglePopup(e, boxPosition);
   }
+
   handleChange(id, value, index, e) {
     let {
       onChange,
@@ -202,11 +234,13 @@ class SelectWithIcon extends Component {
     !isReadOnly && onChange && onChange(id, value, index, e);
     this.togglePopup(e);
   }
+
   handleScroll(e) {
     let ele = e.target;
     let isScrollReachedBottom = findScrollEnd(ele);
     isScrollReachedBottom && this.handleGetNextOptions();
   }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.options.length != this.props.options.length) {
       this.setState({
@@ -214,6 +248,7 @@ class SelectWithIcon extends Component {
       });
     }
   }
+
   handleGetNextOptions() {
     let {
       isNextOptions,
@@ -224,6 +259,7 @@ class SelectWithIcon extends Component {
     } = this.state;
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
   }
+
   handleFetchOptions(APICall) {
     let searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     let {
@@ -232,10 +268,12 @@ class SelectWithIcon extends Component {
     let {
       _isMounted
     } = this;
+
     if (!isFetchingOptions && APICall) {
       this.setState({
         isFetchingOptions: true
       });
+
       try {
         return APICall(searchValue).then(() => {
           _isMounted && this.setState({
@@ -253,6 +291,7 @@ class SelectWithIcon extends Component {
       }
     }
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -263,6 +302,7 @@ class SelectWithIcon extends Component {
       }])
     };
   }
+
   render() {
     let {
       animationStyle,
@@ -304,7 +344,8 @@ class SelectWithIcon extends Component {
       iconClass,
       i18nKeys,
       htmlId,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -320,12 +361,14 @@ class SelectWithIcon extends Component {
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
-      "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}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"
     }, needIcon ? /*#__PURE__*/React.createElement(Container, {
@@ -455,7 +498,8 @@ class SelectWithIcon extends Component {
           getRef: this.itemRef,
           a11y: {
             role: 'option',
-            ariaSelected: selectedId === options[idKey]
+            ariaSelected: selectedId === options[idKey],
+            ariaLabel: options[valueKey]
           }
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
@@ -472,13 +516,15 @@ class SelectWithIcon extends Component {
       }, /*#__PURE__*/React.createElement(Loader, null))))));
     }) : null);
   }
+
 }
+
 SelectWithIcon.propTypes = SelectWithIcon_propTypes;
-SelectWithIcon.defaultProps = SelectWithIcon_defaultProps;
-if (false) {
-  SelectWithIcon.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+SelectWithIcon.defaultProps = SelectWithIcon_defaultProps; // if (__DOCS__) {
+//   SelectWithIcon.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
+
 export default Popup(SelectWithIcon);

package/es/Select/__tests__/Select.spec.js

@@ -1,8 +1,9 @@
 /* eslint-disable no-undef */
+
 /**** Libraries ****/
 import expect from 'expect';
-
 /**** Components ****/
+
 import Select from '../Select';
 import ListItem from '../../ListItem/ListItem';
 describe('Select component conditions', () => {
@@ -188,9 +189,8 @@ describe('Select component conditions', () => {
       target: {
         value: 'value changed'
       }
-    });
+    }); //
 
-    //
     setTimeout(() => {
       expect(props.onSearch).toHaveBeenCalled();
       expect(props.onSearch.mock.calls[0][0]).toEqual('value changed');
@@ -202,10 +202,8 @@ describe('Select component conditions', () => {
         expect(loadingEleArr.length).toBe(0);
         cb();
       });
-    }, searchDebounceTime);
-    //
+    }, searchDebounceTime); //
   });
-
   it('Should call onChange, When select list item', () => {
     let defaultProps = {
       options: [{
@@ -301,11 +299,11 @@ describe('Select component conditions', () => {
     };
     let {
       renderedDOM
-    } = setup(Select, defaultProps);
-    // let liteItemArr = TestUtils.scryRenderedComponentsWithTestid(
+    } = setup(Select, defaultProps); // let liteItemArr = TestUtils.scryRenderedComponentsWithTestid(
     //   renderedDOM,
     //   'listItem'
     // );
+
     let liteItemArr = TestUtils.scryRenderedComponentsWithType(renderedDOM, ListItem);
     expect(liteItemArr.length).toBe(3);
   });

package/es/Select/index.js

@@ -0,0 +1,4 @@
+export { default as Select } from './Select';
+export { default as GroupSelect } from './GroupSelect';
+export { default as SelectWithAvatar } from './SelectWithAvatar';
+export { default as SelectWithIcon } from './SelectWithIcon';

package/es/Select/props/defaultProps.js

@@ -4,6 +4,7 @@ export const Select_defaultProps = {
   autoComplete: getLibraryConfig('autoComplete'),
   autoSelectOnType: true,
   dataId: 'selectComponent',
+  dataSelectorId: 'select',
   dropBoxSize: 'small',
   isDefaultSelectValue: true,
   isDisabled: false,
@@ -31,12 +32,14 @@ export const Select_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   customProps: {},
-  isLoading: false
+  isLoading: false,
+  isAbsolutePositioningNeeded: true
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
+  dataSelectorId: 'groupSelect',
   isDefaultSelectValue: true,
   isDisabled: false,
   isReadOnly: false,
@@ -82,6 +85,7 @@ export const SelectWithAvatar_defaultProps = {
   textField: 'text',
   valueField: 'id',
   dataId: 'selectWithAvatar',
+  dataSelectorId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
   i18nKeys: {},
@@ -106,6 +110,7 @@ export const SelectWithIcon_defaultProps = {
   textBoxSize: 'medium',
   textBoxVariant: 'default',
   dataId: 'selectWithIcon',
+  dataSelectorId: 'selectWithIcon',
   dropBoxSize: 'small',
   needIcon: true,
   iconSize: '14',

package/es/Select/props/propTypes.js

@@ -84,7 +84,9 @@ export const Select_propTypes = {
     listItemProps: PropTypes.object,
     SuggestionsProps: PropTypes.object
   }),
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({
@@ -146,6 +148,7 @@ export const GroupSelect_propTypes = {
   getFooter: PropTypes.func,
   htmlId: PropTypes.string,
   iconOnHover: PropTypes.bool,
+
   /**** Popup Props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,
@@ -161,7 +164,8 @@ export const GroupSelect_propTypes = {
     noMoreText: PropTypes.string,
     searchEmptyText: PropTypes.string
   }),
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithAvatar_propTypes = {
   animationStyle: PropTypes.string,
@@ -219,7 +223,8 @@ export const SelectWithAvatar_propTypes = {
   valueField: PropTypes.string,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -265,5 +270,6 @@ export const SelectWithIcon_propTypes = {
   togglePopup: PropTypes.func,
   valueKey: PropTypes.string,
   htmlId: PropTypes.string,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };

package/es/Stencils/Stencils.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /* 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.PureComponent {
   render() {
@@ -17,14 +18,14 @@ export default class Stencils extends React.PureComponent {
       className: `${style.container} ${shape} ${size} ${style[palette]} ${customClass}`
     });
   }
+
 }
 Stencils.propTypes = propTypes;
-Stencils.defaultProps = defaultProps;
-if (false) {
-  Stencils.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: true
-  };
-}
+Stencils.defaultProps = defaultProps; // if (__DOCS__) {
+//   Stencils.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     description: ' ',
+//     external: true
+//   };
+// }

package/es/Stencils/Stencils.module.css

@@ -2,7 +2,7 @@
   /* stencils default variables */
   --stencil_height: var(--zd_size9);
   --stencil_width: 100%;
-  --stencil_border_radius: var(--zd_size5);
+  --stencil_border_radius: 5px;
 }
 .container {
   composes: varClass;
@@ -49,7 +49,7 @@
 .rectangular {
   composes: stencil;
   --stencil_height: var(--zd_size9);
-  --stencil_border_radius: var(--zd_size5);
+  --stencil_border_radius: 5px;
 }
 .primary {
   background-color: var(--zdt_stencil_primary_bg);