@zohodesk/components 1.0.0-temp-190.2 → 1.0.0-temp-192

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -53,6 +53,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -960,7 +962,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props8.a11y,
           palette = _this$props8.palette,
           needEffect = _this$props8.needEffect,
-          autoComplete = _this$props8.autoComplete;
+          autoComplete = _this$props8.autoComplete,
+          customProps = _this$props8.customProps;
+      var suggestionsProps = customProps.suggestionsProps;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1116,7 +1120,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1128,7 +1132,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'option'
             }
-          }));
+          }, suggestionsProps)));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -57,6 +57,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -1068,7 +1070,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
-          needSelectAll = _this$props15.needSelectAll;
+          needSelectAll = _this$props15.needSelectAll,
+          customProps = _this$props15.customProps;
+      var _customProps$suggesti = customProps.suggestionsProps,
+          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1140,7 +1145,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -1153,7 +1158,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         a11y: {
           role: 'option'
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -141,6 +141,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           keepSelectedOptions = _this$props.keepSelectedOptions,
+          needMultiLineText = _this$props.needMultiLineText,
           customProps = _this$props.customProps;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
@@ -223,7 +224,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
-        }
+        },
+        needMultiLineText: needMultiLineText
       }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,

package/lib/MultiSelect/Suggestions.js

@@ -83,7 +83,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           avatarPalette = _this$props.avatarPalette,
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
-          a11y = _this$props.a11y;
+          a11y = _this$props.a11y,
+          needMultiLineText = _this$props.needMultiLineText;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -143,7 +144,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             size: listItemSize,
             avatarPalette: avatarPalette,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            needMultiLineText: needMultiLineText
           }));
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -163,7 +165,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            needMultiLineText: needMultiLineText
           }));
         }
 
@@ -182,7 +185,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           active: isActive,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
         }));
       })));
     }

package/lib/MultiSelect/props/defaultProps.js

@@ -43,7 +43,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect'
+  dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {}
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -120,7 +121,9 @@ var MultiSelect_defaultProps = {
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
-  cardHeaderName: ''
+  cardHeaderName: '',
+  needResponsive: true,
+  customProps: {}
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -156,6 +159,8 @@ var MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
+  needResponsive: true,
+  needMultiLineText: false,
   customProps: {}
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
@@ -164,6 +169,7 @@ var SelectedOptions_defaultProps = {
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -7,6 +7,8 @@ exports.Suggestions_propTypes = exports.SelectedOptions_propTypes = exports.Mult
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _AdvancedGroupMultiSe;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -121,7 +123,8 @@ var MultiSelect_propTypes = {
   needSelectAll: _propTypes["default"].bool,
   selectAllText: _propTypes["default"].string,
   setAriaId: _propTypes["default"].string,
-  ariaErrorId: _propTypes["default"].string
+  ariaErrorId: _propTypes["default"].string,
+  customProps: _propTypes["default"].string
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -139,6 +142,7 @@ var MultiSelectWithAvatar_propTypes = _objectSpread({
     photoURL: _propTypes["default"].string
   }))]).isRequired,
   imageField: _propTypes["default"].string,
+  needMultiLineText: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
@@ -190,11 +194,11 @@ var Suggestions_propTypes = {
     logo: _propTypes["default"].string,
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
-  }))
+  })),
+  needMultiLineText: _propTypes["default"].bool
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
-
-var AdvancedGroupMultiSelect_propTypes = _defineProperty({
+var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
   autoComplete: _propTypes["default"].bool,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
@@ -258,8 +262,7 @@ var AdvancedGroupMultiSelect_propTypes = _defineProperty({
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, "dataSelectorId", _propTypes["default"].string);
-
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].string), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {

package/lib/PopOver/PopOver.module.css

@@ -1,9 +1,9 @@
 .popup {
   position: relative;
-  /* css:theme-validation:ignore */
-  background-color: var(--dot_white);
+  background-color: var(--zdt_popover_default_bg);
 }
+
 .target {
   composes: offSelection from '../common/common.module.css';
   cursor: pointer;
-}
+}

package/lib/Radio/Radio.js

@@ -21,6 +21,8 @@ var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 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); } }
@@ -53,6 +55,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleGetRef = _this.handleGetRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -64,28 +67,38 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           value = _this$props.value;
       onChange && onChange(value, e);
     }
+  }, {
+    key: "handleGetRef",
+    value: function handleGetRef(ele) {
+      var _this$props2 = this.props,
+          getRef = _this$props2.getRef,
+          value = _this$props2.value;
+      getRef && getRef(ele, value);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          name = _this$props2.name,
-          value = _this$props2.value,
-          checked = _this$props2.checked,
-          disabled = _this$props2.disabled,
-          isReadOnly = _this$props2.isReadOnly,
-          palette = _this$props2.palette,
-          disabledTitle = _this$props2.disabledTitle,
-          title = _this$props2.title,
-          text = _this$props2.text,
-          labelPalette = _this$props2.labelPalette,
-          size = _this$props2.size,
-          labelSize = _this$props2.labelSize,
-          variant = _this$props2.variant,
-          active = _this$props2.active,
-          isFilled = _this$props2.isFilled,
-          customClass = _this$props2.customClass,
-          a11y = _this$props2.a11y;
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          name = _this$props3.name,
+          value = _this$props3.value,
+          checked = _this$props3.checked,
+          disabled = _this$props3.disabled,
+          isReadOnly = _this$props3.isReadOnly,
+          palette = _this$props3.palette,
+          disabledTitle = _this$props3.disabledTitle,
+          title = _this$props3.title,
+          text = _this$props3.text,
+          labelPalette = _this$props3.labelPalette,
+          size = _this$props3.size,
+          labelSize = _this$props3.labelSize,
+          variant = _this$props3.variant,
+          active = _this$props3.active,
+          isFilled = _this$props3.isFilled,
+          customClass = _this$props3.customClass,
+          customProps = _this$props3.customProps,
+          children = _this$props3.children,
+          a11y = _this$props3.a11y;
       var _customClass$customRa = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadio,
@@ -97,13 +110,18 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       var ariaHidden = a11y.ariaHidden,
           _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'radio' : _a11y$role,
+          tabIndex = a11y.tabIndex,
           _a11y$ariaChecked = a11y.ariaChecked,
           ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked,
           ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby,
           _a11y$ariaReadonly = a11y.ariaReadonly,
           ariaReadonly = _a11y$ariaReadonly === void 0 ? isReadOnly || disabled ? true : false : _a11y$ariaReadonly;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      var _customProps$Containe = customProps.ContainerProps,
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
+          _customProps$LabelPro = customProps.LabelProps,
+          LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         dataId: value ? value.toLowerCase() : 'RadioComp',
         isCover: false,
         isInline: text ? false : true,
@@ -113,13 +131,14 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         "data-title": toolTip,
         onClick: !isReadOnly && !disabled ? this.onChange : '',
         "aria-checked": ariaChecked,
-        tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+        tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+        eleRef: this.handleGetRef,
         role: role,
         "aria-Hidden": ariaHidden,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
         "aria-readonly": ariaReadonly
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(isReadOnly || disabled ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio)
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
@@ -144,17 +163,17 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _RadioModule["default"].text
-      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
-        palette: disabled ? 'disable' : labelPalette,
+        palette: labelPalette,
         size: labelSize,
         type: "title",
         clipped: true,
         dataId: "".concat(text, "_label"),
         variant: variant,
         title: toolTip ? toolTip : text,
-        customClass: "".concat(checked && active && !disabled ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
-      })));
+        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
+      }, LabelProps))), children);
     }
   }]);
 

package/lib/Radio/Radio.module.css

@@ -21,11 +21,13 @@
 .readonly, .disabled {
   cursor: not-allowed;
 }
+.disabled {
+  opacity: 0.7
+}
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
-  /* css:theme-validation:ignore */
   stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;

package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap

@@ -1145,7 +1145,7 @@ exports[`Radio rendering the accessMode when disabled  1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"
@@ -1505,7 +1505,7 @@ exports[`Radio rendering the disabled is true 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               undefined disabled  "
         data-id="RadioText_label"
@@ -1567,7 +1567,7 @@ exports[`Radio rendering the disabledTitle 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"

package/lib/Radio/props/defaultProps.js

@@ -16,6 +16,7 @@ var defaultProps = {
   variant: 'default',
   isFilled: true,
   customClass: {},
+  customProps: {},
   a11y: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Radio/props/propTypes.js

@@ -14,6 +14,7 @@ var propTypes = {
   checked: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   disabledTitle: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
   isFilled: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -30,14 +31,20 @@ var propTypes = {
     customRadio: _propTypes["default"].string,
     customLabel: _propTypes["default"].string
   }),
+  customProps: _propTypes["default"].exact({
+    ContainerProps: _propTypes["default"].object,
+    LabelProps: _propTypes["default"].object
+  }),
   a11y: _propTypes["default"].shape({
     ariaChecked: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool,
     role: _propTypes["default"].string,
+    tabIndex: _propTypes["default"].oneOfType(_propTypes["default"].string, _propTypes["default"].number),
     ariaLabelledby: _propTypes["default"].string,
     ariaLabel: _propTypes["default"].string,
     ariaReadonly: _propTypes["default"].bool
   }),
+  children: _propTypes["default"].node,
   onChange: _propTypes["default"].func,
   text: _propTypes["default"].string
 };

package/lib/Ribbon/Ribbon.module.css

@@ -36,12 +36,9 @@
 .basic {
   composes: varClass;
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   line-height: var(--ribbon_line_height);
   padding: var(--ribbon_padding);
   background-color: var(--ribbon_bg_color);
@@ -368,7 +365,6 @@
   position: absolute;
   content: '';
   top: var(--ribbon_tag_before_top);
-  /* css:theme-validation:ignore */
   width: var(--ribbon_tag_before_width);
   height: var(--ribbon_tag_before_height);
   background-color: inherit;

package/lib/Select/GroupSelect.js

@@ -51,6 +51,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 ? 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); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -660,7 +662,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           htmlId = _this$props9.htmlId,
           iconOnHover = _this$props9.iconOnHover,
           isLoading = _this$props9.isLoading,
-          dataSelectorId = _this$props9.dataSelectorId;
+          dataSelectorId = _this$props9.dataSelectorId,
+          customProps = _this$props9.customProps;
+      var _customProps$suggesti = customProps.suggestionsProps,
+          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -820,7 +825,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
             activeId: selectedId,
             suggestions: options,
             getRef: _this7.suggestionItemRef,
@@ -835,7 +840,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
               ariaParentRole: 'listbox',
               role: 'option'
             }
-          }));
+          }, suggestionsProps)));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/Select/SelectWithAvatar.js

@@ -51,6 +51,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 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); } }
@@ -208,7 +210,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           htmlId = _this$props.htmlId,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
-          dataSelectorId = _this$props.dataSelectorId;
+          dataSelectorId = _this$props.dataSelectorId,
+          customProps = _this$props.customProps;
+      var _customProps$suggesti = customProps.suggestionsProps,
+          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -341,7 +346,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           a11y: {
             role: 'heading'
           }
-        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
           activeId: selectedId,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,
@@ -357,7 +362,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/Select/SelectWithIcon.js

@@ -45,6 +45,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 ? 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); }
+
 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); } }
@@ -410,7 +412,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props7.i18nKeys,
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
-          dataSelectorId = _this$props7.dataSelectorId;
+          dataSelectorId = _this$props7.dataSelectorId,
+          customProps = _this$props7.customProps;
+      var _customProps$listItem = customProps.listItemProps,
+          listItemProps = _customProps$listItem === void 0 ? {} : _customProps$listItem;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -536,7 +541,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           var iconName = options.iconName,
               iconSize = options.iconSize,
               iconColor = options.iconColor;
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
             key: options[idKey],
             value: options[valueKey],
             size: "medium",
@@ -560,7 +565,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               ariaSelected: selectedId === options[idKey],
               ariaLabel: options[valueKey]
             }
-          });
+          }, listItemProps));
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/Select/props/defaultProps.js

@@ -79,7 +79,8 @@ var GroupSelect_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
 var SelectWithAvatar_defaultProps = {
@@ -104,7 +105,8 @@ var SelectWithAvatar_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
@@ -116,5 +118,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;