@zohodesk/components 1.0.0-temp-240 → 1.0.0-temp-242

package/es/Select/GroupSelect.js

@@ -622,7 +622,8 @@ export class GroupSelectComponent extends PureComponent {
     let ariaErrorId = this.getNextAriaId();
     let {
       TextBoxIconProps = {},
-      TextBoxProps = {}
+      TextBoxProps = {},
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
@@ -791,7 +792,8 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`
+          dataId: `${dataId}_Options`,
+          ...SuggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/Select.js

@@ -107,6 +107,7 @@ export class SelectComponent extends Component {
     this.handleExposePopupHandlers = this.handleExposePopupHandlers.bind(this);
     this.handleGetAddNewOptionText = this.handleGetAddNewOptionText.bind(this);
     this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this);
     this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
     this.valueInputTypeString = '';
     this.valueInputSearchString = '';
@@ -175,9 +176,43 @@ export class SelectComponent extends Component {
     });
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  scrollToHighlightedIndex() {
+    let {
+      suggestionContainer,
+      optionsOrder
+    } = this;
+
+    if (!suggestionContainer) {
+      return;
+    }
+
+    let {
+      hoverIndex
+    } = this.state;
+    let {
+      isVirtualizerEnabled
+    } = this.props;
+    let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+    let selSuggestion = this[`suggestion_${hoverId}`];
+
+    if (selSuggestion) {
+      scrollTo(suggestionContainer, selSuggestion);
+    } else {
+      // Hack: Virtualizer not having options order properly all the time, so scrollToIndex method used here.
+      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+        this.virtualizerMethods.scrollToIndex(hoverIndex, 'auto', {
+          speed: 0,
+          duration: 0,
+          onComplete: () => {
+            scrollTo(suggestionContainer, selSuggestion);
+          }
+        });
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
     let {
-      hoverIndex,
       searchStr,
       selectedValueIndex
     } = this.state;
@@ -188,31 +223,16 @@ export class SelectComponent extends Component {
       needSearch,
       onSearch,
       isPopupOpen,
-      isSearchClearOnClose,
-      isVirtualizerEnabled
+      isSearchClearOnClose
     } = this.props;
 
-    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-      let position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
-      this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
-    } else {
-      let {
-        suggestionContainer,
-        optionsOrder
-      } = this;
-      let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-      let selSuggestion = this[`suggestion_${hoverId}`];
-      isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
+    if (isPopupOpen) {
+      this.scrollToHighlightedIndex();
     }
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
         onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-          this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex);
-        }
-
         setTimeout(() => {
           this.searchInput && this.searchInput.focus({
             preventScroll: true
@@ -265,7 +285,9 @@ export class SelectComponent extends Component {
       valueField,
       textField,
       allowValueFallback,
-      customProps = dummyObj
+      customProps = dummyObj,
+      searchFields,
+      secondaryField
     } = props;
     let {
       listItemProps = dummyObj
@@ -274,6 +296,8 @@ export class SelectComponent extends Component {
       options,
       valueField,
       textField,
+      secondaryField,
+      searchFields,
       listItemProps,
       allowValueFallback
     });
@@ -443,6 +467,7 @@ export class SelectComponent extends Component {
   handleFilterSuggestions() {
     let {
       needLocalSearch,
+      searchFields,
       excludeOptions = dummyArray // needSearch
 
     } = this.props;
@@ -462,6 +487,7 @@ export class SelectComponent extends Component {
       options,
       selectedOptions: excludeOptions,
       searchStr,
+      searchFields,
       needSearch: needLocalSearch
     });
     this.optionsOrder = suggestionIds;
@@ -713,6 +739,7 @@ export class SelectComponent extends Component {
       getTargetRef,
       getContainerRef,
       removeClose,
+      isAnimate,
       isPopupOpen,
       isPopupReady,
       animationStyle,
@@ -907,7 +934,8 @@ export class SelectComponent extends Component {
         boxPosition: position || `${defaultDropBoxPosition}`,
         getRef: getContainerRef,
         isActive: isPopupReady,
-        isAnimate: true,
+        isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+        ,
         isArrow: false,
         onClick: removeClose,
         needResponsive: needResponsive,

package/es/Select/SelectWithAvatar.js

@@ -41,14 +41,18 @@ class SelectWithAvatarComponent extends SelectComponent {
       valueField,
       textField,
       imageField,
-      allowValueFallback
+      secondaryField,
+      allowValueFallback,
+      searchFields
     } = props;
     return this.formatOptions({
       options,
       valueField,
       textField,
       imageField,
+      secondaryField,
       optionType: 'avatar',
+      searchFields,
       allowValueFallback
     });
   }
@@ -165,6 +169,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
+      customProps,
       getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
@@ -187,6 +192,11 @@ class SelectWithAvatarComponent extends SelectComponent {
     } = this.normalizedFormatOptions[selectedId] || {};
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxProps,
+      DropdownSearchTextBoxProps,
+      SuggestionsProps
+    } = customProps;
     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}`,
@@ -246,7 +256,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       isClickable: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
       htmlId: htmlId,
-      autoComplete: false
+      autoComplete: false,
+      ...TextBoxProps
     }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
@@ -295,7 +306,8 @@ class SelectWithAvatarComponent extends SelectComponent {
           ariaControls: setAriaId,
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: false,
+        ...DropdownSearchTextBoxProps
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
@@ -323,7 +335,8 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        }
+        },
+        ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -16,7 +16,8 @@ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
 
-import { scrollTo, findScrollEnd } from "../utils/Common.js";
+import { scrollTo, findScrollEnd, getSearchString } from "../utils/Common.js";
+import { isObjectContainsSearchString } from "../utils/dropDownUtils.js";
 /**** CSS ****/
 
 import style from "./Select.module.css";
@@ -189,11 +190,16 @@ class SelectWithIcon extends Component {
     let datas = [];
     let {
       options,
-      valueKey
+      valueKey,
+      searchFields
     } = this.props;
 
     if (options.length) {
-      datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase().trim()));
+      if (!searchFields.includes(valueKey)) {
+        searchFields.push(valueKey);
+      }
+
+      datas = options.filter(obj => isObjectContainsSearchString(searchFields, getSearchString(searchValue), obj));
     }
 
     return datas;
@@ -328,6 +334,7 @@ class SelectWithIcon extends Component {
       targetOffset,
       isRestrictScroll,
       valueKey,
+      secondaryValueKey,
       idKey,
       needListBorder,
       needTick,
@@ -367,7 +374,8 @@ class SelectWithIcon extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      TextBoxIconProps = {}
+      TextBoxIconProps = {},
+      ListItemProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -510,6 +518,7 @@ class SelectWithIcon extends Component {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, {
           key: options[idKey],
           value: options[valueKey],
+          secondaryValue: options[secondaryValueKey],
           size: "medium",
           onClick: this.handleChange,
           id: options[idKey],
@@ -530,7 +539,8 @@ class SelectWithIcon extends Component {
             role: 'option',
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
-          }
+          },
+          ...ListItemProps
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/Select/props/defaultProps.js

@@ -28,6 +28,7 @@ export const Select_defaultProps = {
   boxSize: 'default',
   needListBorder: false,
   needCloseOnSelect: true,
+  isAnimate: true,
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
@@ -98,6 +99,7 @@ export const SelectWithAvatar_defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   i18nKeys: {},
+  customProps: {},
   needEffect: true,
   isLoading: false
 };
@@ -116,6 +118,7 @@ export const SelectWithIcon_defaultProps = {
   needTick: true,
   searchBoxSize: 'small',
   size: 'medium',
+  searchFields: [],
   textBoxSize: 'medium',
   textBoxVariant: 'default',
   dataId: 'selectWithIcon',

package/es/Select/props/propTypes.js

@@ -28,6 +28,7 @@ export const Select_propTypes = {
     noMoreText: PropTypes.string,
     searchEmptyText: PropTypes.string
   }),
+  isAnimate: PropTypes.bool,
   isDefaultSelectValue: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isNextOptions: PropTypes.bool,
@@ -64,6 +65,8 @@ export const Select_propTypes = {
   searchBoxSize: PropTypes.string,
   searchDebounceTime: PropTypes.number,
   searchEmptyMessage: PropTypes.string,
+  searchFields: PropTypes.arrayOf(PropTypes.string),
+  secondaryField: PropTypes.string,
   selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -282,6 +285,7 @@ export const SelectWithIcon_propTypes = {
   removeClose: PropTypes.func,
   searchBoxPlaceHolder: PropTypes.string,
   searchEmptyMessage: PropTypes.string,
+  secondaryValueKey: PropTypes.string,
   selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   selectedValue: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium']),
@@ -296,6 +300,7 @@ export const SelectWithIcon_propTypes = {
   className: PropTypes.string,
   needBorder: PropTypes.bool,
   searchBoxSize: PropTypes.string,
+  searchFields: PropTypes.arrayOf(PropTypes.string),
   needResponsive: PropTypes.bool,
   boxSize: PropTypes.string,
   emptyMessage: PropTypes.string,
@@ -306,6 +311,7 @@ export const SelectWithIcon_propTypes = {
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object,
     TextBoxIconProps: PropTypes.object
   })
 };

package/es/Typography/__tests__/Typography.spec.js

@@ -0,0 +1,225 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Typography from "../Typography";
+describe('Typography', () => {
+  const ui_size = ['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit'];
+  const ui_lineClamp = ['1', '2', '3', '4', '5'];
+  const ui_lineHeight = ['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit'];
+  const ui_display = ['block', 'inlineBlock', 'inline', 'initial'];
+  const ui_weight = ['regular', 'light', 'semibold', 'bold'];
+  const ui_typeFace = ['normal', 'italic'];
+  const ui_textAlign = ['left', 'center', 'right', 'justify'];
+  const ui_letterSpacing = ['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit'];
+  const ui_transform = ['default', 'upper', 'lower', 'capital'];
+  const ui_decoration = ['default', 'underline', 'strike', 'overline'];
+  const ui_wordBreak = ['breakAll', 'keepAll', 'breakWord'];
+  const ui_wordWrap = ['normal', 'break'];
+  const ui_whiteSpace = ['normal', 'noWrap', 'pre', 'preLine', 'preWrap'];
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the children ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, null, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ui_tagName as h2', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_tagName: "h2"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering i18n_dataTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: "typoDataTitle"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      testId: "TypoTestId"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      customId: "TypoCustomId"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering tagAttributes_text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $tagAttributes_text: {
+        id: "TypoCustomId"
+      }
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering a11yAttributes_text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $a11yAttributes_text: {
+        'aria-haspopup': 'true',
+        'aria-expanded': true,
+        'aria-controls': 'uniqueId'
+      }
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering flag_reset', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $flag_reset: true
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering flag_dotted', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $flag_dotted: true
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_size)('Should render ui_size - %s', ui_size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_size: ui_size
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_lineClamp)('Should render ui_lineClamp - %s', ui_lineClamp => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_lineClamp: ui_lineClamp
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_lineHeight)('Should render ui_lineHeight - %s', ui_lineHeight => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_lineHeight: ui_lineHeight
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_display)('Should render ui_display - %s', ui_display => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_display: ui_display
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_weight)('Should render ui_weight - %s', ui_weight => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_weight: ui_weight
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_typeFace)('Should render ui_typeFace - %s', ui_typeFace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_typeFace: ui_typeFace
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_textAlign)('Should render ui_textAlign - %s', ui_textAlign => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_textAlign: ui_textAlign
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_letterSpacing)('Should render ui_letterSpacing - %s', ui_letterSpacing => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_letterSpacing: ui_letterSpacing
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_transform)('Should render ui_transform - %s', ui_transform => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_transform: ui_transform
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_decoration)('Should render ui_decoration - %s', ui_decoration => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_decoration: ui_decoration
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ui_className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_className: "custom-class"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_wordBreak)('Should render ui_wordBreak - %s', ui_wordBreak => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_wordBreak: ui_wordBreak
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_wordWrap)('Should render ui_wordWrap - %s', ui_wordWrap => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_wordWrap: ui_wordWrap
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(ui_whiteSpace)('Should render ui_whiteSpace - %s', ui_whiteSpace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      $ui_whiteSpace: ui_whiteSpace
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});