@zohodesk/components 1.0.0-temp-39 → 1.0.0-temp-40

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

@@ -1,163 +1,163 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Ribbon component should the palette is danger 1`] = `
-<span
-  className="basic palette_danger large default"
-  data-id="ribbonComp"
->
-  danger
-</span>
-`;
-
-exports[`Ribbon component should the palette is dark 1`] = `
-<span
-  className="basic palette_dark large default"
-  data-id="ribbonComp"
->
-  dark
-</span>
-`;
-
-exports[`Ribbon component should the palette is default 1`] = `
-<span
-  className="basic palette_default large default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the palette is info 1`] = `
-<span
-  className="basic palette_info large default"
-  data-id="ribbonComp"
->
-  info
-</span>
-`;
-
-exports[`Ribbon component should the palette is primary 1`] = `
-<span
-  className="basic palette_primary large default"
-  data-id="ribbonComp"
->
-  primary
-</span>
-`;
-
-exports[`Ribbon component should the palette is secondary 1`] = `
-<span
-  className="basic palette_secondary large default"
-  data-id="ribbonComp"
->
-  secondary
-</span>
-`;
-
-exports[`Ribbon component should the size is large 1`] = `
-<span
-  className="basic palette_default large default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is medium 1`] = `
-<span
-  className="basic palette_default small default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is small 1`] = `
-<span
-  className="basic palette_default small default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is xlarge 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is box 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is dafault 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is flag 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is plain 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is ribbon 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is stamp 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is sticker 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is tag 1`] = `
-<span
-  className="basic  large tag"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ribbon component should the palette is danger 1`] = `
+<span
+  className="basic palette_danger large default"
+  data-id="ribbonComp"
+>
+  danger
+</span>
+`;
+
+exports[`Ribbon component should the palette is dark 1`] = `
+<span
+  className="basic palette_dark large default"
+  data-id="ribbonComp"
+>
+  dark
+</span>
+`;
+
+exports[`Ribbon component should the palette is default 1`] = `
+<span
+  className="basic palette_default large default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the palette is info 1`] = `
+<span
+  className="basic palette_info large default"
+  data-id="ribbonComp"
+>
+  info
+</span>
+`;
+
+exports[`Ribbon component should the palette is primary 1`] = `
+<span
+  className="basic palette_primary large default"
+  data-id="ribbonComp"
+>
+  primary
+</span>
+`;
+
+exports[`Ribbon component should the palette is secondary 1`] = `
+<span
+  className="basic palette_secondary large default"
+  data-id="ribbonComp"
+>
+  secondary
+</span>
+`;
+
+exports[`Ribbon component should the size is large 1`] = `
+<span
+  className="basic palette_default large default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is medium 1`] = `
+<span
+  className="basic palette_default small default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is small 1`] = `
+<span
+  className="basic palette_default small default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is xlarge 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is box 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is dafault 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is flag 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is plain 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is ribbon 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is stamp 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is sticker 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is tag 1`] = `
+<span
+  className="basic  large tag"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;

package/es/RippleEffect/RippleEffect.module.css

@@ -1,67 +1,67 @@
-.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:focus.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, .hoverEffect:focus.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, .hoverEffect:focus.default.active, .primaryLight.active, .primaryDark.active {
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.default.active.border, .hoverEffect:hover.default.active.border, .hoverEffect:focus.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, .hoverEffect:focus.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);
-}
+.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:focus.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, .hoverEffect:focus.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, .hoverEffect:focus.default.active, .primaryLight.active, .primaryDark.active {
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.default.active.border, .hoverEffect:hover.default.active.border, .hoverEffect:focus.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, .hoverEffect:focus.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);
+}

package/es/Select/GroupSelect.js

@@ -18,7 +18,7 @@ import style from './Select.module.css';
 /**** Methods ****/
 
 import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId } from '../utils/dropDownUtils';
-import { getIsEmptyValue, scrollTo, debounce } from '../utils/Common';
+import { getIsEmptyValue, scrollTo, debounce, getSearchString } from '../utils/Common';
 /* eslint-disable react/no-unused-prop-types */
 
 /* eslint-disable react/sort-prop-types */
@@ -214,7 +214,7 @@ export class GroupSelectComponent extends PureComponent {
     } = this.state;
 
     if (needSearch && searchStr && searchStr.trim().length) {
-      searchStr = searchStr.toLowerCase().replace(/\s+/g, '');
+      searchStr = getSearchString(searchStr);
       let {
         suggestionGroups,
         suggestionOptionIds
@@ -253,8 +253,8 @@ export class GroupSelectComponent extends PureComponent {
     let {
       onSearch
     } = this.props;
-    let searchStrRegex = searchStr.toLowerCase().replace(/\s+/g, '');
-    let valueStrRegex = value.toLowerCase().replace(/\s+/g, '');
+    let searchStrRegex = getSearchString(searchStr);
+    let valueStrRegex = getSearchString(value);
     let isSearch = searchStrRegex !== valueStrRegex ? true : false;
     this.setState({
       searchStr: value,
@@ -489,7 +489,8 @@ export class GroupSelectComponent extends PureComponent {
     }
   }
 
-  handleFetchOptions(APICall, searchStr = '') {
+  handleFetchOptions(APICall) {
+    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false

package/es/Select/Select.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || 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 PropTypes from 'prop-types';
@@ -246,12 +248,17 @@ export class SelectComponent extends Component {
     let {
       options,
       valueField,
-      textField
+      textField,
+      customProps = {}
     } = props;
+    let {
+      listItemProps = {}
+    } = customProps;
     return this.formatOptions({
       options,
       valueField,
-      textField
+      textField,
+      listItemProps
     });
   }
 
@@ -434,7 +441,8 @@ export class SelectComponent extends Component {
     }
   }
 
-  handleFetchOptions(APICall, searchStr = '') {
+  handleFetchOptions(APICall) {
+    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false
@@ -692,7 +700,8 @@ export class SelectComponent extends Component {
       i18nKeys,
       htmlId,
       children,
-      iconOnHover
+      iconOnHover,
+      customProps
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -713,6 +722,11 @@ export class SelectComponent extends Component {
     let suggestions = this.handleFilterSuggestions();
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxProps = {},
+      DropdownSearchTextBoxProps = {},
+      SuggestionsProps = {}
+    } = 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 : ''
@@ -755,7 +769,10 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: TextBoxProps
+      }
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "both"
@@ -800,7 +817,8 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       autoComplete: false,
-      isFocus: isPopupReady
+      isFocus: isPopupReady,
+      customProps: TextBoxProps
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
       animationStyle: animationStyle,
       boxPosition: position || `${defaultDropBoxPosition}Center`,
@@ -833,11 +851,14 @@ export class SelectComponent extends Component {
       onClear: this.handleClearSearch,
       dataId: `${dataId}_search`,
       i18nKeys: TextBoxIcon_i18n,
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: DropdownSearchTextBoxProps
+      }
     }))) : null, /*#__PURE__*/React.createElement(CardContent, {
       customClass: dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
-    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       activeId: selectedId,
       suggestions: suggestions,
       getRef: this.suggestionItemRef,
@@ -855,7 +876,7 @@ export class SelectComponent extends Component {
         ariaParentRole: 'listbox',
         role: 'option'
       }
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,
@@ -945,7 +966,13 @@ SelectComponent.propTypes = {
   htmlId: PropTypes.string,
   children: PropTypes.node,
   onFocus: PropTypes.func,
-  iconOnHover: PropTypes.bool
+  iconOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    DropdownSearchTextBoxProps: PropTypes.object,
+    listItemProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
+  })
 };
 SelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -977,7 +1004,8 @@ SelectComponent.defaultProps = {
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
-  iconOnHover: false
+  iconOnHover: false,
+  customProps: {}
 };
 SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);