@zohodesk/components 1.6.21 → 1.6.22-exp-1

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

@@ -5,12 +5,12 @@ exports[`DateTime rendering the defult props 1`] = `<DocumentFragment />`;
 exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1`] = `
 <DocumentFragment>
   <div
-    class="dropBox "
+    class="dropBox"
     data-id="dateTime_dateBoxContainer"
     data-test-id="dateTime_dateBoxContainer"
   >
     <div
-      class="container "
+      class="container"
       data-id="dateTime_Calendar"
       data-test-id="dateTime_Calendar"
     >
@@ -27,7 +27,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           data-test-id="selectYear"
         >
           <h2
-            class="reset  thMonYear"
+            class="reset thMonYear"
             data-title="July 2023"
             tabindex="0"
           >
@@ -36,7 +36,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           <span>
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-dropdown  downArrow  "
+              class="zd_font_icons basic icon-dropdown downArrow"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -61,7 +61,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-arrow-left3 fbold   rtl "
+            class="zd_font_icons rtl basic icon-arrow-left3 fbold"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -78,7 +78,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-arrow-right3 fbold   rtl "
+            class="zd_font_icons rtl basic icon-arrow-right3 fbold"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -512,7 +512,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             </div>
             <div
               aria-label="29"
-              class="noShrink datesStr grid active"
+              class="noShrink active datesStr grid"
               data-id="dateTime_dateSelected"
               data-selector-id="box"
               data-test-id="dateTime_dateSelected"
@@ -546,7 +546,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             </div>
             <div
               aria-label="1"
-              class="noShrink datesStr grid  invalidDate"
+              class="noShrink invalidDate datesStr grid"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -555,7 +555,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             </div>
             <div
               aria-label="2"
-              class="noShrink datesStr grid  invalidDate"
+              class="noShrink invalidDate datesStr grid"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -564,7 +564,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             </div>
             <div
               aria-label="3"
-              class="noShrink datesStr grid  invalidDate"
+              class="noShrink invalidDate datesStr grid"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -573,7 +573,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             </div>
             <div
               aria-label="4"
-              class="noShrink datesStr grid  invalidDate"
+              class="noShrink invalidDate datesStr grid"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -582,7 +582,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             </div>
             <div
               aria-label="5"
-              class="noShrink datesStr grid  invalidDate"
+              class="noShrink invalidDate datesStr grid"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -609,7 +609,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             data-test-id="boxComponent"
           >
             <div
-              class="container box_small   "
+              class="container box_small"
               data-selector-id="select"
             >
               <div
@@ -618,7 +618,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="hourField"
               >
                 <div
-                  class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container input"
+                  class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
                   data-selector-id="textBoxIcon"
                 >
                   <div
@@ -636,7 +636,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       aria-owns="1"
                       aria-readonly="true"
                       autocomplete="off"
-                      class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                      class="pointer container xmedium primary effect borderColor_default inputDotted"
                       data-id="hourField_textBox"
                       data-selector-id="textBoxIcon"
                       data-test-id="hourField_textBox"
@@ -682,7 +682,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 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"
@@ -704,7 +704,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             data-test-id="boxComponent"
           >
             <div
-              class="container box_small   "
+              class="container box_small"
               data-selector-id="select"
             >
               <div
@@ -713,7 +713,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="minuteField"
               >
                 <div
-                  class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container input"
+                  class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
                   data-selector-id="textBoxIcon"
                 >
                   <div
@@ -731,7 +731,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       aria-owns="3"
                       aria-readonly="true"
                       autocomplete="off"
-                      class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                      class="pointer container xmedium primary effect borderColor_default inputDotted"
                       data-id="minuteField_textBox"
                       data-selector-id="textBoxIcon"
                       data-test-id="minuteField_textBox"
@@ -777,7 +777,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 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"
@@ -799,7 +799,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             data-test-id="boxComponent"
           >
             <div
-              class="container box_small   "
+              class="container box_small"
               data-selector-id="select"
             >
               <div
@@ -808,7 +808,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="ampmField"
               >
                 <div
-                  class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container input"
+                  class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
                   data-selector-id="textBoxIcon"
                 >
                   <div
@@ -826,7 +826,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       aria-owns="5"
                       aria-readonly="true"
                       autocomplete="off"
-                      class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                      class="pointer container xmedium primary effect borderColor_default inputDotted"
                       data-id="ampmField_textBox"
                       data-selector-id="textBoxIcon"
                       data-test-id="ampmField_textBox"
@@ -872,7 +872,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 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/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -15,13 +15,13 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       data-test-id="selectYear"
     >
       <h2
-        class="reset  thMonYear"
+        class="reset thMonYear"
         tabindex="0"
       />
       <span>
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-dropdown  downArrow  "
+          class="zd_font_icons basic icon-dropdown downArrow"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -45,7 +45,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-arrow-left3 fbold   rtl "
+        class="zd_font_icons rtl basic icon-arrow-left3 fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -61,7 +61,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-arrow-right3 fbold   rtl "
+        class="zd_font_icons rtl basic icon-arrow-right3 fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

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

@@ -6,12 +6,12 @@ exports[`DateWidget rendering the defult props 1`] = `
     class="container"
   >
     <div
-      class=" textBox  enabled"
+      class="textBox enabled"
       data-id="dateWidget_widget"
       data-test-id="dateWidget_widget"
     >
       <div
-        class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -22,7 +22,7 @@ exports[`DateWidget rendering the defult props 1`] = `
         >
           <input
             autocomplete="off"
-            class=" pointer container medium  default  effect  borderColor_default  "
+            class="pointer container medium default effect borderColor_default"
             data-id="dateWidget"
             data-selector-id="textBoxIcon"
             data-test-id="dateWidget"
@@ -57,7 +57,7 @@ exports[`DateWidget rendering the defult props 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-Datepicker    "
+                  class="zd_font_icons basic icon-Datepicker"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"

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

@@ -18,7 +18,7 @@ exports[`Time rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -27,7 +27,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container input"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -44,7 +44,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="1"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="hourField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="hourField_textBox"
@@ -89,7 +89,7 @@ exports[`Time 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"
@@ -111,7 +111,7 @@ exports[`Time rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -120,7 +120,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container input"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -137,7 +137,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="3"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="minuteField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="minuteField_textBox"
@@ -182,7 +182,7 @@ exports[`Time 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"
@@ -204,7 +204,7 @@ exports[`Time rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -213,7 +213,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container input"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -230,7 +230,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="5"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="ampmField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="ampmField_textBox"
@@ -275,7 +275,7 @@ exports[`Time 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"

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -45,26 +45,26 @@ export default function cssJSLogic({
     [style.main]: true,
     [style.hidden]: !isActive,
     [style.responsive]: !!isModel,
-    [customMobileDropBoxWrap]: !!isModel,
-    [customDropBoxWrap]: !isModel,
     [style.container]: isAbsolute && !isModel,
     [style[boxPosition]]: isAbsolute && !isModel,
     [style.fixedContainer]: !isAbsolute && !isModel,
     [style[size]]: size && !isModel,
     [style.boxDirection]: !isModel && isActive && isArrow,
     [style.arrow]: !isModel && isActive && isArrow && isAbsolute,
-    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding
+    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding,
+    [customMobileDropBoxWrap]: !!isModel,
+    [customDropBoxWrap]: !isModel
   });
   let subContainerClass = compileClassNames({
     [style.subContainer]: true,
-    [customMobileDropBox]: !!isModel,
     [style.mobRadius]: !!isModel,
     [style.slideUp]: !!isModel && isActive,
-    [customDropBox]: !isModel,
     [style.shadow]: !isModel,
     [style.boxPadding]: !isModel && isBoxPaddingNeed,
     [style.radius]: !isModel && isRadius,
-    [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle
+    [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle,
+    [customMobileDropBox]: !!isModel,
+    [customDropBox]: !isModel
   });
   let inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
 

package/es/DropDown/DropDownItem.js

@@ -54,7 +54,7 @@ export default class DropDownItem extends React.Component {
       customClass = ''
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
+      className: `${style.list}  ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''} ${customClass}`,
       onClick: this.onClick,
       onMouseOver: this.onHover,
       ref: this.getRef,

package/es/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DropDownHeading rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="light "
+    class="light"
     data-id="DropDownHeading"
     data-selector-id="dropdownHeading"
     data-test-id="DropDownHeading"

package/es/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DropDownItem rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="list   "
+    class="list"
     data-id="dropDwnItemContainer"
     data-test-id="dropDwnItemContainer"
   />

package/es/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap

@@ -3,12 +3,12 @@
 exports[`DropDownSearch rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="search mediumSearch "
+    class="search mediumSearch"
     data-id="DropDownSearch"
     data-test-id="DropDownSearch"
   >
     <input
-      class="  container medium  default border effect  borderColor_default  "
+      class="container medium default border effect borderColor_default"
       data-id="textBox"
       data-selector-id="textBox"
       data-test-id="textBox"

package/es/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DropDownSeparator rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="separator "
+    class="separator"
   />
 </DocumentFragment>
 `;

package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_breakSpaces "
+    class="reset whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -12,7 +12,7 @@ exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_normal "
+    class="reset whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -21,7 +21,7 @@ exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_nowrap "
+    class="reset whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_pre "
+    class="reset whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -39,7 +39,7 @@ exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preLine "
+    class="reset whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -48,7 +48,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preWrap "
+    class="reset whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>
@@ -57,7 +57,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 exports[`Heading rendering the defult props 1`] = `
 <DocumentFragment>
   <h1
-    class="reset  "
+    class="reset"
   />
 </DocumentFragment>
 `;

package/es/Label/Label.js

@@ -39,7 +39,7 @@ export default class Label extends React.Component {
     } = a11y;
     const labelElement = /*#__PURE__*/React.createElement("label", {
       className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
+          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass}`,
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,