@zohodesk/components 1.6.20 → 1.6.22-exp-1

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

@@ -3,11 +3,11 @@
 exports[`ColorSingleSelect Should render the default selected value 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -18,27 +18,27 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
         aria-haspopup="listbox"
         aria-owns="3"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
               aria-labelledby="5"
-              class="container effect    medium lgRadius default   "
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -57,14 +57,14 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -81,11 +81,11 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
 exports[`ColorSingleSelect Should render the selected value 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -96,27 +96,27 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
         aria-haspopup="listbox"
         aria-owns="6"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
               aria-labelledby="8"
-              class="container effect    medium lgRadius default   "
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -131,14 +131,14 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -155,11 +155,11 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
 exports[`ColorSingleSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -170,20 +170,20 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
         aria-haspopup="listbox"
         aria-owns="1"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -194,14 +194,14 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -218,11 +218,11 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
 exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -233,20 +233,20 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
         aria-haspopup="listbox"
         aria-owns="9"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -259,14 +259,14 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -283,11 +283,11 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
 exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -298,27 +298,27 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
         aria-haspopup="listbox"
         aria-owns="11"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
               aria-labelledby="13"
-              class="container effect    medium lgRadius default   "
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -337,14 +337,14 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -361,11 +361,11 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
 exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -376,20 +376,20 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
         aria-haspopup="listbox"
         aria-owns="14"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
         data-selector-id="container"
         data-title=""
         role="button"
         tabindex="0"
       >
         <div
-          class="flex cover rowdir"
+          class="flex fullSize row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -400,14 +400,14 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon      inflex coldir both"
+            class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down    "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"

package/es/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(0, 0, 255);"
@@ -14,7 +14,7 @@ exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '
 exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(0, 255, 0);"
@@ -25,7 +25,7 @@ exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '
 exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(255, 0, 0);"
@@ -36,7 +36,7 @@ exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '
 exports[`ColorIndicator rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -46,7 +46,7 @@ exports[`ColorIndicator rendering the defult props 1`] = `
 exports[`ColorIndicator rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -56,7 +56,7 @@ exports[`ColorIndicator rendering the shape of- circle 1`] = `
 exports[`ColorIndicator rendering the shape of- square 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator square "
+    class="varClass indicator square"
     data-id=""
     data-test-id=""
   />
@@ -67,7 +67,7 @@ exports[`ColorIndicator rendering with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-label="color_indicator_aria-label"
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -87,7 +87,7 @@ exports[`ColorIndicator rendering with custom class 1`] = `
 exports[`ColorIndicator rendering with custom id and test id 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id="custom-id"
     data-test-id="test-id"
   />
@@ -97,7 +97,7 @@ exports[`ColorIndicator rendering with custom id and test id 1`] = `
 exports[`ColorIndicator rendering with tagAttributes 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     title="color_indicator_tagAttributes"

package/es/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -4,7 +4,7 @@ exports[`ColoredTag rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"
@@ -23,7 +23,7 @@ exports[`ColoredTag rendering with colorConfig 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="3"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"
@@ -43,7 +43,7 @@ exports[`ColoredTag rendering with customAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="4"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-custom-attribute="true"
     data-id="tag_Tag"
     data-selector-id="tag"
@@ -63,7 +63,7 @@ exports[`ColoredTag rendering with isActive true 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="2"
-    class="container effect selected activedefault   medium lgRadius default   "
+    class="container effect selected activedefault medium lgRadius default"
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -82,7 +82,7 @@ exports[`ColoredTag rendering with text 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="5"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"

package/es/DateTime/CalendarView.js

@@ -136,7 +136,7 @@ export default class CalendarView extends React.PureComponent {
             output = /*#__PURE__*/React.createElement(Span, {
               i: i // isActive={isSelectedDay}
               ,
-              tdclass: `${tdclass}  ${style.invalidDate}`,
+              tdclass: `${style.invalidDate} ${tdclass}`,
               handleSelect: this.handleSelect,
               incremday: nextDate,
               userSeeMonth: nextMonth,
@@ -211,7 +211,7 @@ export class Span extends React.PureComponent {
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       dataId: dataId,
-      className: `${tdclass} ${isActive ? style.active : ''} ${isToday ? style.today : ''}`,
+      className: `${isActive ? style.active : ''} ${isToday ? style.today : ''} ${tdclass} `,
       key: i,
       onClick: this.handleSelectChild,
       "aria-label": incremday

package/es/DateTime/DateWidget.js

@@ -1060,11 +1060,11 @@ class DateWidgetComponent extends React.Component {
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
       ref: getTargetRef,
-      className: `${className ? className : ''} ${isDisabled ? style.disabled : style.enabled}`
+      className: `${isDisabled ? style.disabled : style.enabled} ${className ? className : ''}`
     }, children) : /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
-      className: `${className ? className : ''} ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled}`,
+      className: ` ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled} ${className ? className : ''}`,
       onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
       ref: getTargetRef
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({