@zohodesk/components 1.6.2 → 1.6.4

package/es/ListItem/props/defaultProps.js

@@ -30,7 +30,8 @@ export const ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsAlignContent: 'start'
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,

package/es/ListItem/props/propTypes.js

@@ -61,14 +61,16 @@ export const ListItem_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customTickIcon: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customValueRightPlaceholder: PropTypes.string,
+    customTitleBox: PropTypes.string
   }),
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
   secondaryValue: PropTypes.string,
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end'])
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1,3 +1,5 @@
+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); }
+
 import React from 'react';
 import { AdvancedGroupMultiSelect_propTypes } from "./props/propTypes";
 import { AdvancedGroupMultiSelect_defaultProps } from "./props/defaultProps";
@@ -17,6 +19,9 @@ import Card, { CardContent, CardHeader, CardFooter } from "../Card/Card";
 import { getUniqueId } from "../Provider/IdProvider";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
+/**** Constants ****/
+
+import { DUMMY_OBJECT } from "./../utils/Common";
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';
@@ -890,8 +895,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       autoComplete,
       getTargetRef,
       isFocus,
-      limit
+      limit,
+      customProps
     } = this.props;
+    const {
+      SuggestionsProps = DUMMY_OBJECT
+    } = customProps;
     let {
       clearText = MULTISELECT_I18N_KEYS.clearText,
       limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
@@ -1060,7 +1069,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, {
+        })), /*#__PURE__*/React.createElement(Suggestions, _extends({}, SuggestionsProps, {
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,
@@ -1075,7 +1084,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           limit: limit,
           limitReachedMessage: limitReachedMessage,
           dataId: `${dataId}_Options`
-        }));
+        })));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,
         searchString: searchStr,

package/es/MultiSelect/MultiSelect.js

@@ -1097,9 +1097,9 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
-      customProps,
       isVirtualizerEnabled,
-      limit
+      limit,
+      customProps
     } = this.props;
     const {
       selectedOptions,

package/es/MultiSelect/Suggestions.js

@@ -195,18 +195,23 @@ export default class Suggestions extends React.PureComponent {
       htmlId,
       a11y,
       getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction
+      setVirtualizerContainerRefFunction,
+      customClass
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
+    const {
+      containerClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable
+      "aria-multiselectable": ariaMultiselectable,
+      className: containerClass
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''

package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -217,13 +217,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -253,13 +253,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -289,13 +289,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -463,13 +463,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -499,13 +499,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"

package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -12,47 +12,53 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
     tabindex="0"
   >
     <div
-      aria-hidden="true"
-      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
-      data-id="MultiSelectHeader_selectAll_Icon"
+      class="contentWrapper  shrinkOff"
+      data-id="boxComponent"
       data-selector-id="box"
-      data-test-id="MultiSelectHeader_selectAll_Icon"
+      data-test-id="boxComponent"
     >
       <div
-        class="lhsBox_medium shrinkOff selfStart"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_center"
+        data-id="MultiSelectHeader_selectAll_Icon"
+        data-test-id="MultiSelectHeader_selectAll_Icon"
       >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-androidd    "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size15);"
-        />
+        <div
+          class="iconWrapper shrinkOff selfStart"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-androidd    "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size15);"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="leftBox grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
       <div
-        class="titleBox shrinkOff"
+        class="leftBox selfAlign_center grow basis shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
-          data-id="MultiSelectHeader_selectAll_Text"
+          class="titleBox shrinkOff"
+          data-id="boxComponent"
           data-selector-id="box"
-          data-test-id="MultiSelectHeader_selectAll_Text"
+          data-test-id="boxComponent"
         >
-          List
+          <div
+            class="value basisAuto shrinkOn"
+            data-id="MultiSelectHeader_selectAll_Text"
+            data-selector-id="box"
+            data-test-id="MultiSelectHeader_selectAll_Text"
+          >
+            List
+          </div>
         </div>
       </div>
     </div>

package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap

@@ -35,7 +35,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -51,7 +51,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
               </span>
             </div>
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -122,13 +122,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -160,13 +160,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -197,13 +197,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -232,13 +232,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -267,13 +267,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -302,13 +302,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -337,13 +337,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -372,13 +372,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -407,13 +407,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"

package/es/MultiSelect/props/defaultProps.js

@@ -38,6 +38,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {},
   allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
@@ -169,5 +170,6 @@ export const SelectedOptions_defaultProps = {
 export const Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
+  customClass: {},
   needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -116,7 +116,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,
@@ -201,7 +202,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,
@@ -276,7 +281,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/Popup/Popup.js

@@ -17,8 +17,15 @@ const Popup = function (Component) {
     closeOnScroll = false,
     isOutsideScrollBlocked = false
   } = options;
-  const getRootElement = getLibraryConfig('getRootElement');
-  const mobileWidth = getLibraryConfig('mobileWidth');
+
+  const getRootElement = () => {
+    return getLibraryConfig('getRootElement');
+  };
+
+  const getMobileWidth = () => {
+    return getLibraryConfig('mobileWidth');
+  };
+
   const middleware = {
     useAbsolutePositioning: isAbsolutePositioningNeeded,
     positionOrder: customOrder,
@@ -30,8 +37,8 @@ const Popup = function (Component) {
   };
   const popupConfig = {
     group,
-    mobileWidth,
-    rootElementCallback: getRootElement,
+    getMobileWidth,
+    getRootElement,
     middleware
   };
   return DotkitPopup(Component, popupConfig);

package/es/Select/GroupSelect.js

@@ -626,7 +626,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/SelectWithAvatar.js

@@ -172,8 +172,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      customProps,
-      getTargetRef
+      getTargetRef,
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -198,7 +198,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

@@ -360,7 +360,8 @@ class SelectWithIcon extends Component {
       htmlId,
       isLoading,
       dataSelectorId,
-      customProps
+      customProps,
+      customClass
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -378,8 +379,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,
@@ -475,7 +479,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