@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/RippleEffect/RippleEffect.module.css

@@ -1,92 +1,92 @@
-.effect {
-  position: relative;
-  border-radius: var(--zd_size4);
-}
-.border {
-  border: solid 1px var(--zdt_rippleeffect_default_border);
-}
-.default.defaultHover {
-  border-color: var(--zdt_rippleeffect_hover_border);
-}
-.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
-/* .hoverEffect:focus.primary.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_primary_border);
-}
-.primary.defaultHover, .hoverEffect:hover.primary.active.border
-/* .hoverEffect:focus.primary.active.border  */
-{
-  border-color: var(--zdt_rippleeffect_primary_active_border);
-}
-.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
-/* .hoverEffect:focus.primaryLight.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.defaultHover, .hoverEffect:hover.green.borderHover
-/* .hoverEffect:focus.green.borderHover  */
-{
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.hoverEffect:hover.default.defaultHover
-/* .hoverEffect:focus.default.defaultHover */
- {
-  border-color: var(--zdt_rippleeffect_slate_border);
-}
-.hoverEffect:hover.default.borderHover
-/* .hoverEffect:focus.default.borderHover */
- {
-  border-color: var(--zdt_rippleeffect_navy_border);
-}
-.hoverEffect:hover.default.bgHover
-/* .hoverEffect:focus.default.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_hover_bg);
-}
-.hoverEffect:hover.primaryLight.bgHover
-/* .hoverEffect:focus.primaryLight.bgHover  */
-{
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.primaryFilled {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.hoverEffect:hover.primaryFilled, .primaryFilled.active {
-  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
-}
-.hoverEffect:hover.green.bgHover
-/* .hoverEffect:focus.green.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.active {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.green.active.border {
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.primary.active {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.danger.defaultHover, .hoverEffect:hover.danger.borderHover
-/* .hoverEffect:focus.danger.borderHover */
- {
-  border-color: var(--zdt_rippleeffect_danger_border);
-}
-.hoverEffect:hover.danger.bgHover, .danger.active {
-  background-color: var(--zdt_rippleeffect_danger_bg);
-}
-.hoverEffect:hover.primaryDark.bgHover
-/* .hoverEffect:focus.primaryDark.bgHover */
- {
-  background-color: var(--zdt_rippleeffect_primary_dark_bg);
-}
-.notAllowed {
-  cursor: not-allowed;
-}
+.effect {
+  position: relative;
+  border-radius: var(--zd_size4);
+}
+.border {
+  border: solid 1px var(--zdt_rippleeffect_default_border);
+}
+.default.defaultHover {
+  border-color: var(--zdt_rippleeffect_hover_border);
+}
+.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
+/* .hoverEffect:focus.primary.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_border);
+}
+.primary.defaultHover, .hoverEffect:hover.primary.active.border
+/* .hoverEffect:focus.primary.active.border  */
+{
+  border-color: var(--zdt_rippleeffect_primary_active_border);
+}
+.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
+/* .hoverEffect:focus.primaryLight.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.defaultHover, .hoverEffect:hover.green.borderHover
+/* .hoverEffect:focus.green.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.hoverEffect:hover.default.defaultHover
+/* .hoverEffect:focus.default.defaultHover */
+ {
+  border-color: var(--zdt_rippleeffect_slate_border);
+}
+.hoverEffect:hover.default.borderHover
+/* .hoverEffect:focus.default.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_navy_border);
+}
+.hoverEffect:hover.default.bgHover
+/* .hoverEffect:focus.default.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_hover_bg);
+}
+.hoverEffect:hover.primaryLight.bgHover
+/* .hoverEffect:focus.primaryLight.bgHover  */
+{
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.primaryFilled {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.hoverEffect:hover.primaryFilled, .primaryFilled.active {
+  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
+}
+.hoverEffect:hover.green.bgHover
+/* .hoverEffect:focus.green.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.active {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.green.active.border {
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.primary.active {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.danger.defaultHover, .hoverEffect:hover.danger.borderHover
+/* .hoverEffect:focus.danger.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_danger_border);
+}
+.hoverEffect:hover.danger.bgHover, .danger.active {
+  background-color: var(--zdt_rippleeffect_danger_bg);
+}
+.hoverEffect:hover.primaryDark.bgHover
+/* .hoverEffect:focus.primaryDark.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_primary_dark_bg);
+}
+.notAllowed {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import RippleEffect from '../RippleEffect.js';
+describe('RippleEffect', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, null, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isActive is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      isActive: true
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isDisabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger'];
+  test.each(palette)('rendering the palette of- %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: palette
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const hoverTypes = ['default', 'border', 'bg', 'test'];
+  test.each(hoverTypes)('rendering hoverType of- %s', hoverType => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: hoverType
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isNeedEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      isNeedEffect: false
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needBorder is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      needBorder: false
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isCopyTextEnabled is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      isCopyTextEnabled: true
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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,