@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap

@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RippleEffect rendering hoverType of- bg 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border bgHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering hoverType of- border 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border borderHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering hoverType of- default 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering hoverType of- test 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border   hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover active hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isCopyTextEnabled is false 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect notAllowed"
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover   disabled"
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isNeedEffect is false 1`] = `
+<DocumentFragment>
+  <div
+    class=" "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering needBorder is false 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default  defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- danger 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect danger border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- green 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect green border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primary border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primaryDark 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primaryDark border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primaryFilled 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primaryFilled border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primaryLight 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primaryLight border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;

package/es/RippleEffect/props/defaultProps.js

@@ -5,5 +5,6 @@ export const defaultProps = {
   needBorder: true,
   hoverType: 'default',
   palette: 'default',
+  cssClassPropOfChild: 'className',
   isCopyTextEnabled: false
 };

package/es/RippleEffect/props/propTypes.js

@@ -7,5 +7,6 @@ export const propTypes = {
   isNeedEffect: PropTypes.bool,
   needBorder: PropTypes.bool,
   palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  cssClassPropOfChild: PropTypes.string,
   isCopyTextEnabled: PropTypes.bool
 };

package/es/Select/GroupSelect.js

@@ -21,7 +21,7 @@ import style from './Select.module.css';
 /**** Methods ****/
 
 import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId } from '../utils/dropDownUtils';
-import { getIsEmptyValue, scrollTo, debounce, getSearchString, findScrollEnd } from '../utils/Common';
+import { getIsEmptyValue, scrollTo, debounce, getSearchString, findScrollEnd, getKeyValue } from '../utils/Common';
 /* eslint-disable react/no-unused-prop-types */
 
 /* eslint-disable react/sort-prop-types */
@@ -425,10 +425,7 @@ export class GroupSelectComponent extends PureComponent {
   }
 
   handleValueInputChange(e) {
-    let {
-      which
-    } = e;
-    let typeString = String.fromCharCode(which);
+    let typeString = getKeyValue(e);
     let {
       isPopupOpen,
       autoSelectOnType
@@ -621,7 +618,9 @@ export class GroupSelectComponent extends PureComponent {
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-      ref: getTargetRef
+      ref: getTargetRef,
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       iconRotated: isPopupOpen,
@@ -636,7 +635,7 @@ export class GroupSelectComponent extends PureComponent {
       value: selected,
       variant: textBoxVariant,
       needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: dataId,
+      dataId: `${dataId}_textBox`,
       onKeyPress: this.handleValueInputChange,
       needEffect: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
@@ -673,7 +672,7 @@ export class GroupSelectComponent extends PureComponent {
       value: selected,
       variant: textBoxVariant,
       needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: dataId,
+      dataId: `${dataId}_textBox`,
       onKeyPress: this.handleValueInputChange,
       borderColor: borderColor,
       htmlId: htmlId,
@@ -707,7 +706,8 @@ export class GroupSelectComponent extends PureComponent {
         needResponsive: needResponsive,
         isPadding: false,
         isResponsivePadding: getFooter ? false : true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_suggestionBox`
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -732,7 +732,8 @@ export class GroupSelectComponent extends PureComponent {
           ariaAutocomplete: 'list',
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: false,
+        dataId: `${dataId}_search`
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
@@ -767,7 +768,8 @@ export class GroupSelectComponent extends PureComponent {
           a11y: {
             ariaParentRole: 'listbox',
             role: 'option'
-          }
+          },
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,
@@ -790,6 +792,7 @@ GroupSelectComponent.defaultProps = GroupSelect_defaultProps;
 GroupSelectComponent.displayName = 'GroupSelect';
 let GroupSelect = Popup(GroupSelectComponent);
 GroupSelect.defaultProps = GroupSelectComponent.defaultProps;
+GroupSelect.propTypes = GroupSelectComponent.propTypes;
 export default GroupSelect; // if (__DOCS__) {
 //   GroupSelect.docs = {
 //     componentGroup: 'Form Elements',

package/es/Select/Select.js

@@ -1,5 +1,3 @@
-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';
@@ -21,11 +19,10 @@ 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';
+import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, getKeyValue } 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 */
@@ -298,7 +295,8 @@ export class SelectComponent extends Component {
       isPopupOpen,
       onKeyDown,
       isPopupOpenOnEnter,
-      needCloseOnSelect
+      needCloseOnSelect,
+      isPopupReady
     } = this.props;
     let {
       hoverIndex,
@@ -349,12 +347,12 @@ export class SelectComponent extends Component {
         id
       } = option || {};
 
-      if (isPopupOpen && !getIsEmptyValue(id) && onChange) {
+      if (isPopupReady && !getIsEmptyValue(id) && onChange) {
         onChange(id, optionsNormalize[id]);
         needCloseOnSelect && this.handlePopupClose(e);
       }
 
-      if (!isPopupOpen && isPopupOpenOnEnter) {
+      if (!isPopupReady && isPopupOpenOnEnter) {
         this.togglePopup(e);
       }
     } else if (keyCode === 27) {
@@ -564,10 +562,7 @@ export class SelectComponent extends Component {
   }
 
   handleValueInputChange(e) {
-    let {
-      which
-    } = e;
-    let typeString = String.fromCharCode(which);
+    let typeString = getKeyValue(e);
     let {
       isPopupOpen,
       autoSelectOnType
@@ -802,8 +797,12 @@ export class SelectComponent extends Component {
       htmlId: htmlId,
       isFocus: isPopupReady,
       autoComplete: autoComplete,
+      isScrollPrevent: true,
       customProps: {
-        TextBoxProps: TextBoxProps
+        TextBoxProps: {
+          'data-title': title || selected,
+          ...TextBoxProps
+        }
       }
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -851,7 +850,11 @@ export class SelectComponent extends Component {
       htmlId: htmlId,
       autoComplete: autoComplete,
       isFocus: isPopupReady,
-      customProps: TextBoxProps
+      isScrollPrevent: true,
+      customProps: {
+        'data-title': title || selected,
+        ...TextBoxProps
+      }
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
@@ -911,7 +914,7 @@ export class SelectComponent extends Component {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
@@ -928,8 +931,9 @@ export class SelectComponent extends Component {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+        },
+        ...SuggestionsProps
+      }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/Select/Select.module.css

@@ -1,109 +1,135 @@
-.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 ;
-}
-.responsivelistItemContainer {
-  padding: var(--zd_size10) 0 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 ;
-}
-.responsivedropBoxList{
-  padding: var(--zd_size10) 0 0 0 ;
-}
-.rotate {
-  transform: rotateX(180deg);
-}
-.iconOnHoverStyle .arrowIcon,
-.iconOnHoverReadonly .arrowIcon,
-.iconOnHoverReadonly:hover .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-.iconOnHoverStyle:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-.loader {
-  padding: var(--zd_size10) ;
+.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;
+}
+/* css:lineheight-validation:ignore */
+.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 ;
+}
+
+.responsivelistItemContainer {
+  padding: var(--zd_size10) 0 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 ;
+}
+
+.responsivedropBoxList {
+  padding: var(--zd_size10) 0 0 0 ;
+}
+
+.rotate {
+  transform: rotateX(180deg);
+}
+
+.iconOnHoverStyle .arrowIcon,
+.iconOnHoverReadonly .arrowIcon,
+.iconOnHoverReadonly:hover .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.iconOnHoverStyle:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+
+.loader {
+  padding: var(--zd_size10) ;
 }

package/es/Select/SelectWithAvatar.js

@@ -331,7 +331,8 @@ SelectWithAvatarComponent.propTypes = SelectWithAvatar_propTypes;
 SelectWithAvatarComponent.defaultProps = SelectWithAvatar_defaultProps;
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);
-SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps; // if (__DOCS__) {
+SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps;
+SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes; // if (__DOCS__) {
 //   SelectWithAvatar.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'

package/es/Select/SelectWithIcon.js

@@ -520,11 +520,14 @@ class SelectWithIcon extends Component {
 }
 
 SelectWithIcon.propTypes = SelectWithIcon_propTypes;
-SelectWithIcon.defaultProps = SelectWithIcon_defaultProps; // if (__DOCS__) {
+SelectWithIcon.defaultProps = SelectWithIcon_defaultProps;
+const SelectWithIconComponent = Popup(SelectWithIcon);
+SelectWithIconComponent.defaultProps = SelectWithIcon.defaultProps;
+SelectWithIconComponent.propTypes = SelectWithIcon.propTypes; // if (__DOCS__) {
 //   SelectWithIcon.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
 // }
 
-export default Popup(SelectWithIcon);
+export default SelectWithIconComponent;

package/es/Select/props/defaultProps.js

@@ -59,6 +59,7 @@ export const GroupSelect_defaultProps = {
   dataIdDownIcon: 'downIcon',
   dataIdLoading: 'loading',
   dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  dataId: 'GroupSelect',
   isPopupOpenOnEnter: false,
   borderColor: 'default',
   needTick: true,