@zohodesk/components 1.5.7 → 1.5.9

package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -210,7 +210,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -311,7 +311,7 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -394,7 +394,7 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -477,7 +477,7 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -18,7 +18,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
         aria-haspopup="listbox"
         aria-owns="3"
         aria-readonly="false"
-        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -96,7 +96,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
         aria-haspopup="listbox"
         aria-owns="6"
         aria-readonly="false"
-        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -170,7 +170,7 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
         aria-haspopup="listbox"
         aria-owns="1"
         aria-readonly="false"
-        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -233,7 +233,7 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
         aria-haspopup="listbox"
         aria-owns="9"
         aria-readonly="false"
-        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -298,7 +298,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
         aria-haspopup="listbox"
         aria-owns="11"
         aria-readonly="false"
-        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -376,7 +376,7 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
         aria-haspopup="listbox"
         aria-owns="14"
         aria-readonly="false"
-        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
         data-selector-id="container"
         data-title=""
         role="button"

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

@@ -618,7 +618,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="hourField"
               >
                 <div
-                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
                 >
                   <div
@@ -713,7 +713,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="minuteField"
               >
                 <div
-                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
                 >
                   <div
@@ -808,7 +808,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="ampmField"
               >
                 <div
-                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
                 >
                   <div

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

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

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -27,7 +27,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -120,7 +120,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -213,7 +213,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/ListItem/ListItem.js

@@ -175,7 +175,6 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].titleBox
       }, (0, _utils.isRenderable)(renderBeforeChildren) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        shrink: true,
         adjust: true,
         className: _ListItemModule["default"].beforeChild
       }, (0, _utils.renderNode)(renderBeforeChildren)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

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

@@ -102,7 +102,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
         data-test-id="boxComponent"
       >
         <div
-          class="beforeChild basisAuto shrinkOn"
+          class="beforeChild basisAuto shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/Modal/Portal/Portal.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Portal;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Portal = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Portal/Portal"));
 
@@ -17,16 +19,18 @@ var _propTypes = require("./props/propTypes");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 Portal(_ref) {
   var children = _ref.children,
       portalId = _ref.portalId;
-  var portalPrefix = (0, _Config.getLibraryConfig)("portalPrefix");
+  var getPortalContainer = (0, _react.useCallback)(function () {
+    var getConfigPortalContainer = (0, _Config.getLibraryConfig)('getPortalContainer');
 
-  var getPortalContainer = function getPortalContainer() {
-    var getPortalContainer = (0, _Config.getLibraryConfig)('getPortalContainer');
-
-    if (getPortalContainer && typeof getPortalContainer === 'function') {
-      var portal = getPortalContainer();
+    if (getConfigPortalContainer && typeof getConfigPortalContainer === 'function') {
+      var portal = getConfigPortalContainer();
 
       if (portal) {
         return portal;
@@ -34,10 +38,13 @@ function Portal(_ref) {
     }
 
     return null;
-  };
-
+  }, []);
+  var memoizedPortalId = (0, _react.useMemo)(function () {
+    var portalPrefix = (0, _Config.getLibraryConfig)("portalPrefix");
+    return "".concat(portalPrefix ? "".concat(portalPrefix) : '').concat(portalId);
+  }, [portalId]);
   return /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
-    portalId: "".concat(portalPrefix ? "".concat(portalPrefix) : '').concat(portalId),
+    portalId: memoizedPortalId,
     getFallbackElement: getPortalContainer
   }, children);
 }

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

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

@@ -25,7 +25,7 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -96,7 +96,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -342,7 +342,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

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

@@ -25,7 +25,7 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -108,7 +108,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -341,7 +341,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -25,7 +25,7 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

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

@@ -41,7 +41,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
             data-test-id="boxComponent"
           >
             <div
-              class="beforeChild basisAuto shrinkOn"
+              class="beforeChild basisAuto shrinkOff"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"

package/lib/Select/Select.js

@@ -885,7 +885,9 @@ 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;
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
+          _customProps$InputFie = customProps.InputFieldLineProps,
+          InputFieldLineProps = _customProps$InputFie === void 0 ? {} : _customProps$InputFie;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -903,17 +905,18 @@ 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"], {
-        isActive: isPopupReady,
+      }, (0, _utils.isRenderable)(renderCustomSelectedValue) ? /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], _extends({
         border: needBorder ? 'bottom' : 'none',
+        hasPadding: true
+      }, InputFieldLineProps, {
+        isActive: isPopupReady,
         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/__tests__/Select.spec.js

@@ -1203,6 +1203,11 @@ 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