@zohodesk/components 1.6.21 → 1.6.22-exp-1

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

@@ -3,13 +3,13 @@
 exports[`ColorMultiSelect Should render the default selected value 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default   hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -21,11 +21,10 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -39,7 +38,7 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -86,13 +85,13 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
 exports[`ColorMultiSelect Should render the selected value 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default   hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -105,7 +104,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
       >
         <div
           aria-labelledby="7"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -122,9 +121,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -138,7 +135,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold   "
+                class="zd_font_icons basic icon-close2 fbold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -156,7 +153,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
       >
         <div
           aria-labelledby="8"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -173,9 +170,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -189,7 +184,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold   "
+                class="zd_font_icons basic icon-close2 fbold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -206,11 +201,10 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium clearIconSpace
-          "
+          class="custmSpan custmSpanMedium clearIconSpace"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -224,7 +218,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -268,7 +262,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-delete    rtl "
+                      class="zd_font_icons rtl basic icon-delete"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -289,13 +283,13 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
 exports[`ColorMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default   hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -307,11 +301,10 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -325,7 +318,7 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -372,13 +365,13 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
 exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default   hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -390,11 +383,10 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -408,7 +400,7 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -455,13 +447,13 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
 exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default   hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -473,11 +465,10 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -491,7 +482,7 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"

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"
     >
@@ -38,7 +38,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           >
             <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"
@@ -64,7 +64,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           >
             <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"
     >
@@ -116,7 +116,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           >
             <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"
@@ -138,7 +138,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           >
             <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"
     >
@@ -201,7 +201,7 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
           >
             <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"
     >
@@ -266,7 +266,7 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
           >
             <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"
     >
@@ -318,7 +318,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           >
             <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"
@@ -344,7 +344,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           >
             <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"
     >
@@ -407,7 +407,7 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
           >
             <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({