@zohodesk/components 1.5.8 → 1.5.9

package/README.md

@@ -2,6 +2,19 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.5.9
+
+- **InputFieldline**  
+ - changed the handling of conditional logic for padding, scroll and size properties.
+ - `size` default prop declaration removed.
+
+- **TextBoxIcon**  
+ - added support for `InputFieldLineProps` via the customProps object.
+
+- **Select**  
+ - Removed the size prop from InputFieldLine usage, as it is unused.
+
+
 # 1.5.8
 
 - Memoized **Portal** logic to improve performance.

package/es/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/es/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/es/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/es/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/es/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/es/ListItem/ListItem.js

@@ -126,7 +126,6 @@ export default class ListItem extends React.Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.titleBox
     }, isRenderable(renderBeforeChildren) ? /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
       adjust: true,
       className: style.beforeChild
     }, renderNode(renderBeforeChildren)) : null, value ? /*#__PURE__*/React.createElement(Box, {

package/es/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/es/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/es/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/es/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/es/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/es/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/es/Select/Select.js

@@ -835,7 +835,8 @@ export class SelectComponent extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       SuggestionsProps = {},
-      TextBoxIconProps = {}
+      TextBoxIconProps = {},
+      InputFieldLineProps = {}
     } = customProps;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
@@ -855,14 +856,15 @@ 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, {
-      isActive: isPopupReady,
       border: needBorder ? 'bottom' : 'none',
+      hasPadding: true,
+      ...InputFieldLineProps,
+      isActive: isPopupReady,
       size: size,
       borderColor: borderColor,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       onKeyDown: this.handleKeyDown,
-      hasPadding: true,
       a11yAttributes: inputFieldLineA11yAttributes
     }, renderNode(renderCustomSelectedValue, {
       isDisabled,

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

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