@zohodesk/components 1.0.0-temp-248.1 → 1.0.0-temp-199.21

package/lib/MultiSelect/props/propTypes.js

@@ -133,7 +133,8 @@ var MultiSelect_propTypes = {
   setAriaId: _propTypes["default"].string,
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
-    TextBoxIconProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object,
+    SuggestionsProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool,
@@ -189,7 +190,8 @@ var SelectedOptions_propTypes = {
   limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
-var Suggestions_propTypes = {
+
+var Suggestions_propTypes = _defineProperty({
   a11y: _propTypes["default"].shape({
     ariaParentRole: _propTypes["default"].string,
     ariaMultiselectable: _propTypes["default"].bool
@@ -223,8 +225,12 @@ var Suggestions_propTypes = {
   })),
   renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   limit: _propTypes["default"].number,
-  limitReachedMessage: _propTypes["default"].string
-};
+  limitReachedMessage: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    containerClass: _propTypes["default"].string
+  })
+}, "needMultiLineText", _propTypes["default"].bool);
+
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
@@ -295,7 +301,9 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].shape({
+  SuggestionsProps: _propTypes["default"].object
+})), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {

package/lib/Select/GroupSelect.js

@@ -700,7 +700,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TextBoxP = customProps.TextBoxProps,
           TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
-          SuggestionsProps = customProps.SuggestionsProps;
+          _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_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-id": dataIdSlctComp,

package/lib/Select/Select.js

@@ -885,9 +885,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
-          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
-          _customProps$InputFie = customProps.InputFieldLineProps,
-          InputFieldLineProps = _customProps$InputFie === void 0 ? {} : _customProps$InputFie;
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -905,18 +903,17 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
-      }, (0, _utils.isRenderable)(renderCustomSelectedValue) ? /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], _extends({
-        border: needBorder ? 'bottom' : 'none',
-        hasPadding: true
-      }, InputFieldLineProps, {
+      }, (0, _utils.isRenderable)(renderCustomSelectedValue) ? /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
         isActive: isPopupReady,
+        border: needBorder ? 'bottom' : 'none',
         size: size,
         borderColor: borderColor,
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
         onKeyDown: this.handleKeyDown,
+        hasPadding: true,
         a11yAttributes: inputFieldLineA11yAttributes
-      }), (0, _utils.renderNode)(renderCustomSelectedValue, {
+      }, (0, _utils.renderNode)(renderCustomSelectedValue, {
         isDisabled: isDisabled,
         isPopupOpen: isPopupOpen,
         isReadOnly: isReadOnly,

package/lib/Select/SelectWithAvatar.js

@@ -221,8 +221,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
-          customProps = _this$props.customProps,
-          getTargetRef = _this$props.getTargetRef;
+          getTargetRef = _this$props.getTargetRef,
+          customProps = _this$props.customProps;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -245,7 +245,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       var ariaErrorId = this.getNextAriaId();
       var TextBoxProps = customProps.TextBoxProps,
           DropdownSearchTextBoxProps = customProps.DropdownSearchTextBoxProps,
-          SuggestionsProps = customProps.SuggestionsProps;
+          _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),

package/lib/Select/SelectWithIcon.js

@@ -431,7 +431,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
           dataSelectorId = _this$props7.dataSelectorId,
-          customProps = _this$props7.customProps;
+          customProps = _this$props7.customProps,
+          customClass = _this$props7.customClass;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -449,7 +450,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
-          ListItemProps = customProps.ListItemProps;
+          _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
+      var _customClass$dropBoxC = customClass.dropBoxClass,
+          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -542,7 +546,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           size: boxSize,
           isPadding: false,
           isResponsivePadding: true,
-          alignBox: "row"
+          alignBox: "row",
+          customClass: {
+            customDropBox: dropBoxClass
+          }
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader

package/lib/Select/__tests__/Select.spec.js

@@ -1203,11 +1203,6 @@ describe('Select snapshot - ', function () {
         },
         listItemProps: {
           'data-custom-listitem-attr': 'true'
-        },
-        InputFieldLineProps: {
-          tagAttributes: {
-            'data-custom-attr': 'true'
-          }
         }
       }
     })),

package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

@@ -14,7 +14,7 @@ exports[`GroupSelect rendering the defult props 1`] = `
       data-test-id="GroupSelect"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div