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

package/lib/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/lib/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/lib/Select/GroupSelect.js

@@ -283,7 +283,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           allOptionIds = _this$state2.allOptionIds;
 
       if (needSearch && searchStr && searchStr.trim().length) {
-        searchStr = searchStr.toLowerCase().replace(/\s+/g, '');
+        searchStr = (0, _Common.getSearchString)(searchStr);
 
         var _this$getFilterSugges = this.getFilterSuggestions({
           revampedGroups: revampedGroups,
@@ -320,8 +320,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       var _this$state$searchStr = this.state.searchStr,
           searchStr = _this$state$searchStr === void 0 ? '' : _this$state$searchStr;
       var onSearch = this.props.onSearch;
-      var searchStrRegex = searchStr.toLowerCase().replace(/\s+/g, '');
-      var valueStrRegex = value.toLowerCase().replace(/\s+/g, '');
+      var searchStrRegex = (0, _Common.getSearchString)(searchStr);
+      var valueStrRegex = (0, _Common.getSearchString)(value);
       var isSearch = searchStrRegex !== valueStrRegex ? true : false;
       this.setState({
         searchStr: value,

package/lib/Select/Select.js

@@ -43,6 +43,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -292,11 +294,16 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     value: function handleFormatOptions(props) {
       var options = props.options,
           valueField = props.valueField,
-          textField = props.textField;
+          textField = props.textField,
+          _props$customProps = props.customProps,
+          customProps = _props$customProps === void 0 ? {} : _props$customProps;
+      var _customProps$listItem = customProps.listItemProps,
+          listItemProps = _customProps$listItem === void 0 ? {} : _customProps$listItem;
       return this.formatOptions({
         options: options,
         valueField: valueField,
-        textField: textField
+        textField: textField,
+        listItemProps: listItemProps
       });
     }
   }, {
@@ -397,8 +404,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var _this$state$searchStr = this.state.searchStr,
           searchStr = _this$state$searchStr === void 0 ? '' : _this$state$searchStr;
       var onSearch = this.props.onSearch;
-      var searchStrRegex = searchStr.toLowerCase().replace(/\s+/g, '');
-      var valueStrRegex = value.toLowerCase().replace(/\s+/g, '');
+      var searchStrRegex = (0, _Common.getSearchString)(searchStr);
+      var valueStrRegex = (0, _Common.getSearchString)(value);
       var isSearch = searchStrRegex !== valueStrRegex ? true : false;
       this.setState({
         searchStr: value,
@@ -439,7 +446,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       //   (excludeOptions && excludeOptions.length)
       // ) {
 
-      searchStr = searchStr.toLowerCase().replace(/\s+/g, '');
+      searchStr = (0, _Common.getSearchString)(searchStr);
 
       var _this$getFilterSugges = this.getFilterSuggestions({
         options: options,
@@ -729,7 +736,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props11.i18nKeys,
           htmlId = _this$props11.htmlId,
           children = _this$props11.children,
-          iconOnHover = _this$props11.iconOnHover;
+          iconOnHover = _this$props11.iconOnHover,
+          customProps = _this$props11.customProps;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -748,6 +756,12 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
+      var _customProps$TextBoxP = customProps.TextBoxProps,
+          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+          _customProps$Dropdown = customProps.DropdownSearchTextBoxProps,
+          DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
+          _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-title": isDisabled ? title : ''
@@ -790,7 +804,10 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         borderColor: borderColor,
         htmlId: htmlId,
         isFocus: isPopupReady,
-        autoComplete: false
+        autoComplete: false,
+        customProps: {
+          TextBoxProps: TextBoxProps
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "both"
@@ -835,7 +852,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         borderColor: borderColor,
         htmlId: htmlId,
         autoComplete: false,
-        isFocus: isPopupReady
+        isFocus: isPopupReady,
+        customProps: TextBoxProps
       })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
         animationStyle: animationStyle,
         boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
@@ -868,11 +886,14 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         onClear: this.handleClearSearch,
         dataId: "".concat(dataId, "_search"),
         i18nKeys: TextBoxIcon_i18n,
-        autoComplete: false
+        autoComplete: false,
+        customProps: {
+          TextBoxProps: DropdownSearchTextBoxProps
+        }
       }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
         customClass: dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
@@ -890,7 +911,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           ariaParentRole: 'listbox',
           role: 'option'
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,
@@ -984,7 +1005,13 @@ SelectComponent.propTypes = {
   htmlId: _propTypes["default"].string,
   children: _propTypes["default"].node,
   onFocus: _propTypes["default"].func,
-  iconOnHover: _propTypes["default"].bool
+  iconOnHover: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    TextBoxProps: _propTypes["default"].object,
+    DropdownSearchTextBoxProps: _propTypes["default"].object,
+    listItemProps: _propTypes["default"].object,
+    SuggestionsProps: _propTypes["default"].object
+  })
 };
 SelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1016,7 +1043,8 @@ SelectComponent.defaultProps = {
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
-  iconOnHover: false
+  iconOnHover: false,
+  customProps: {}
 };
 SelectComponent.displayName = 'Select';
 var Select = (0, _Popup["default"])(SelectComponent);