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

package/es/MultiSelect/props/propTypes.js

@@ -114,7 +114,8 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
@@ -199,7 +200,11 @@ export const Suggestions_propTypes = {
   })),
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number,
-  limitReachedMessage: PropTypes.string
+  limitReachedMessage: PropTypes.string,
+  customClass: PropTypes.shape({
+    containerClass: PropTypes.string
+  }),
+  needMultiLineText: PropTypes.bool
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -273,7 +278,10 @@ export const AdvancedGroupMultiSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
-  limit: PropTypes.number
+  limit: PropTypes.number,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object
+  })
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Select/GroupSelect.js

@@ -623,7 +623,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       TextBoxIconProps = {},
       TextBoxProps = {},
-      SuggestionsProps
+      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 : ''}`,

package/es/Select/Select.js

@@ -835,8 +835,7 @@ export class SelectComponent extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       SuggestionsProps = {},
-      TextBoxIconProps = {},
-      InputFieldLineProps = {}
+      TextBoxIconProps = {}
     } = customProps;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
@@ -856,15 +855,14 @@ export class SelectComponent extends Component {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, isRenderable(renderCustomSelectedValue) ? /*#__PURE__*/React.createElement(InputFieldLine, {
-      border: needBorder ? 'bottom' : 'none',
-      hasPadding: true,
-      ...InputFieldLineProps,
       isActive: isPopupReady,
+      border: needBorder ? 'bottom' : 'none',
       size: size,
       borderColor: borderColor,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       onKeyDown: this.handleKeyDown,
+      hasPadding: true,
       a11yAttributes: inputFieldLineA11yAttributes
     }, renderNode(renderCustomSelectedValue, {
       isDisabled,

package/es/Select/SelectWithAvatar.js

@@ -169,8 +169,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      customProps,
-      getTargetRef
+      getTargetRef,
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -195,7 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let {
       TextBoxProps,
       DropdownSearchTextBoxProps,
-      SuggestionsProps
+      SuggestionsProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,

package/es/Select/SelectWithIcon.js

@@ -357,7 +357,8 @@ class SelectWithIcon extends Component {
       htmlId,
       isLoading,
       dataSelectorId,
-      customProps
+      customProps,
+      customClass
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -375,8 +376,11 @@ class SelectWithIcon extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       TextBoxIconProps = {},
-      ListItemProps
+      ListItemProps = {}
     } = customProps;
+    const {
+      dropBoxClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -473,7 +477,10 @@ class SelectWithIcon extends Component {
         size: boxSize,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        customClass: {
+          customDropBox: dropBoxClass
+        }
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader

package/es/Select/__tests__/Select.spec.js

@@ -962,11 +962,6 @@ describe('Select snapshot - ', () => {
         },
         listItemProps: {
           'data-custom-listitem-attr': 'true'
-        },
-        InputFieldLineProps: {
-          tagAttributes: {
-            'data-custom-attr': 'true'
-          }
         }
       }
     }));

package/es/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