npm - @zohodesk/components - Versions diffs - 1.6.20 → 1.6.22 - Mend

@zohodesk/components 1.6.20 → 1.6.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap CHANGED Viewed

@@ -3,7 +3,7 @@
 exports[`DateTimePopupFooter rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="footer flex rowdir vCenter"
+    class="flex row alignItems_center footer"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap CHANGED Viewed

@@ -3,13 +3,13 @@
 exports[`DateTimePopupHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="header flex cover rowdir both"
+    class="flex fullSize row alignItems_center justifyContent_center header"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="dateText shrinkOff"
+      class="noShrink dateText"
       data-id="selectYear"
       data-selector-id="box"
       data-test-id="selectYear"
@@ -21,7 +21,7 @@ exports[`DateTimePopupHeader rendering the defult props 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"
@@ -30,14 +30,14 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       </span>
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
       aria-label="prevMonth"
-      class="thArrow grid  shrinkOff"
+      class="noShrink thArrow grid"
       data-id="prevMonth"
       data-selector-id="box"
       data-test-id="prevMonth"
@@ -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"
@@ -53,7 +53,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     </div>
     <div
       aria-label="nextMonth"
-      class="thArrow grid navigation shrinkOff"
+      class="noShrink thArrow grid navigation"
       data-id="nextMonth"
       data-selector-id="box"
       data-test-id="nextMonth"
@@ -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 CHANGED Viewed

@@ -6,16 +6,16 @@ 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="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+        class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  placeHolder"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -32,32 +32,32 @@ exports[`DateWidget rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="icon  shrinkOff"
+              class="noShrink icon"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="datePickIcon inflex coldir both"
+                class="inlineFlex column alignItems_center justifyContent_center datePickIcon"
                 data-id="dateWidget_datePicker"
                 data-selector-id="container"
                 data-test-id="dateWidget_datePicker"
               >
                 <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__/DaysRow.spec.js.snap CHANGED Viewed

@@ -3,7 +3,7 @@
 exports[`DaysRow rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="days flex cover rowdir"
+    class="flex fullSize row days"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

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

@@ -6,13 +6,13 @@ exports[`Time rendering the defult props 1`] = `
     class="text"
   />
   <div
-    class="timesection flex rowdir vCenter"
+    class="flex row alignItems_center timesection"
     data-id="Time_timeContainer"
     data-selector-id="container"
     data-test-id="Time_timeContainer"
   >
     <div
-      class="dropDownContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -27,11 +27,11 @@ 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="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -57,39 +57,39 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex rowdir both"
+                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="arrowIcon flex cover coldir both"
+                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
                       data-id="hourField_downIcon"
                       data-selector-id="container"
                       data-test-id="hourField_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"
@@ -105,7 +105,7 @@ exports[`Time rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="dropDownContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -120,11 +120,11 @@ 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="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -150,39 +150,39 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex rowdir both"
+                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="arrowIcon flex cover coldir both"
+                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
                       data-id="minuteField_downIcon"
                       data-selector-id="container"
                       data-test-id="minuteField_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"
@@ -198,7 +198,7 @@ exports[`Time rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="dropDownContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -213,11 +213,11 @@ 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="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -243,39 +243,39 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex rowdir both"
+                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="arrowIcon flex cover coldir both"
+                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
                       data-id="ampmField_downIcon"
                       data-selector-id="container"
                       data-test-id="ampmField_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/DropBox/DropBoxElement/css/cssJSLogic.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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__/DropDown.spec.js.snap CHANGED Viewed

@@ -31,13 +31,13 @@ exports[`DropDown rendering the defult props 1`] = `
         tabindex="-1"
       >
         <div
-          class="flex rowdir"
+          class="flex row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOn scrolly"
+            class="flexible basis_zero shrink scroll_vertical"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

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

@@ -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/Label/Label.js CHANGED Viewed

@@ -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,

package/es/Label/__tests__/__snapshots__/Label.spec.js.snap CHANGED Viewed

@@ -4,7 +4,7 @@ exports[`Label rendering the Id 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -19,7 +19,7 @@ exports[`Label rendering the clipped is true 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-          dotted cursor  "
+          dotted cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -33,7 +33,7 @@ exports[`Label rendering the customClass 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor LabelCustomClass "
+           cursor LabelCustomClass"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -47,7 +47,7 @@ exports[`Label rendering the defult props 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -61,7 +61,7 @@ exports[`Label rendering the htmlFor 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -76,7 +76,7 @@ exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           pointer  "
+           pointer "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -90,7 +90,7 @@ exports[`Label rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <label
     class="label title medium danger font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -104,7 +104,7 @@ exports[`Label rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <label
     class="label title medium dark font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -118,7 +118,7 @@ exports[`Label rendering the palette of- default 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -132,7 +132,7 @@ exports[`Label rendering the palette of- disable 1`] = `
 <DocumentFragment>
   <label
     class="label title medium disable font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -146,7 +146,7 @@ exports[`Label rendering the palette of- mandatory 1`] = `
 <DocumentFragment>
   <label
     class="label title medium mandatory font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -160,7 +160,7 @@ exports[`Label rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <label
     class="label title medium primary font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -174,7 +174,7 @@ exports[`Label rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <label
     class="label title medium secondary font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -188,7 +188,7 @@ exports[`Label rendering the size of- large 1`] = `
 <DocumentFragment>
   <label
     class="label title large default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -202,7 +202,7 @@ exports[`Label rendering the size of- medium 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -216,7 +216,7 @@ exports[`Label rendering the size of- small 1`] = `
 <DocumentFragment>
   <label
     class="label title small default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -230,7 +230,7 @@ exports[`Label rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <label
     class="label title xsmall default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -244,7 +244,7 @@ exports[`Label rendering the title 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -259,7 +259,7 @@ exports[`Label rendering the type of- subtitle 1`] = `
 <DocumentFragment>
   <label
     class="label subtitle medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -273,7 +273,7 @@ exports[`Label rendering the type of- title 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -287,7 +287,7 @@ exports[`Label rendering the variant of- default 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -301,7 +301,7 @@ exports[`Label rendering the variant of- primary 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_primary
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -321,7 +321,7 @@ exports[`Label rendering with customProps - containerProps & rightPlaceholderNod
   >
     <label
       class="label title large danger font_default
-           cursor  "
+           cursor "
       data-id="label"
       data-selector-id="label"
       data-test-id="label"
@@ -354,7 +354,7 @@ exports[`Label rendering with renderRightPlaceholderNode 1`] = `
   >
     <label
       class="label title medium default font_default
-           cursor  "
+           cursor "
       data-id="label"
       data-selector-id="label"
       data-test-id="label"