@zohodesk/components 1.0.0-temp-250 → 1.0.0-temp-253

package/es/CheckBox/CheckBox.module.css

@@ -94,7 +94,7 @@
  .checkedprimary,
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
-} 
+}
 .primary:hover
 /* .primary:focus  */
 {
@@ -137,7 +137,7 @@
 }
 
 .withSecondaryText {
-  margin-top: var(--zd_size1) ;
+  margin-block-start: var(--zd_size1) ;
 }
 
 .secondaryText {
@@ -147,14 +147,7 @@
 .labelContainer {
   composes: dflex flexcolumn from '../common/common.module.css';
   gap: var(--zd_size4) ;
-}
-
-[dir=ltr] .labelContainer {
-  margin-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .labelContainer {
-  margin-right: var(--zd_size6) ;
+  margin-inline-start:var(--zd_size6) ;
 }
 @keyframes tickAnimate {
   0% {

package/es/DateTime/DateTime.module.css

@@ -2,14 +2,8 @@
   font-weight: var(--zd-fw-semibold);
 }
 
-[dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19) ;
-  padding-left: var(--zd_size19) ;
-}
-
-[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19) ;
-  padding-right: var(--zd_size19) ;
+.boxPadding {
+  padding-inline: var(--zd_size19) ;
 }
 
 .container {
@@ -61,12 +55,8 @@
   background: var(--zdt_datetime_datestr_hover_bg);
 }
 
-[dir=ltr] .navigation {
-  margin-left: var(--zd_size2) ;
-}
-
-[dir=rtl] .navigation {
-  margin-right: var(--zd_size2) ;
+.navigation {
+  margin-inline-start: var(--zd_size2) ;
 }
 
 .thMonYear {
@@ -78,8 +68,10 @@
 }
 
 .dateContainer {
-  margin: 0 var(--zd_size19) 0 var(--zd_size19) ;
-  padding: var(--zd_size6) 0 var(--zd_size10) 0 ;
+  margin-block:0 ;
+  margin-inline: var(--zd_size19) ;
+  padding-block: var(--zd_size6) var(--zd_size10) ;
+  padding-inline:0 ;
 }
 
 .separator {
@@ -88,9 +80,9 @@
 
 .days {
   min-height: var(--zd_size36) ;
+  padding-block-start: var(--zd_size7) ;
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7) ;
 }
 
 .daysStr {
@@ -104,12 +96,13 @@
 
 .dateRow {
   height: var(--zd_size28) ;
+  margin-block: var(--zd_size1) var(--zd_size5) ;
+  margin-inline:0 ;
   composes: alignBetween from '../common/common.module.css';
-  margin: var(--zd_size1) 0 var(--zd_size5) ;
 }
 
 .dateRow:last-child {
-  margin-bottom: 0 ;
+  margin-block-end: 0 ;
 }
 
 .holiday,
@@ -165,24 +158,25 @@
 
 
 .timesection {
-  padding-top: var(--zd_size5) ;
-  padding-bottom: var(--zd_size10) ;
+  padding-block: var(--zd_size5) var(--zd_size10) ;
 }
 
 .dropDownContainer {
-  padding: 0 var(--zd_size5) ;
+  padding-inline: var(--zd_size5) ;
+  padding-block:0 ;
 }
 
 .dropDown {
   width: var(--zd_size60) ;
   display: inline-block;
+  margin-inline: var(--zd_size4) ;
+  margin-block:0 ;
   position: relative;
-  margin: 0 var(--zd_size4) ;
 }
 
 .footer {
-  margin-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size12) ;
+  margin-block-start: var(--zd_size10) ;
+  padding-block-end: var(--zd_size12) ;
 }
 
 .timesection,
@@ -196,17 +190,10 @@
 }
 
 .downArrow {
+  margin-inline-start: var(--zd_size2) ;
   color: var(--zdt_datetime_daystr_text);
 }
 
-[dir=ltr] .downArrow {
-  margin-left: var(--zd_size2) ;
-}
-
-[dir=rtl] .downArrow {
-  margin-right: var(--zd_size2) ;
-}
-
 .dateText {
   cursor: pointer;
 }
@@ -220,9 +207,9 @@
   font-size: var(--zd_font_size11) ;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
+  margin-block-start: var(--zd_size14) ;
   composes: semibold;
   display: block;
-  margin-top: var(--zd_size14) ;
 }
 
 .yearContainer {
@@ -249,4 +236,4 @@
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
-}
+}

package/es/DateTime/DateWidget.module.css

@@ -3,7 +3,7 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
-.datePickIcon{height:100% }
+.datePickIcon{height:100%  }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }

package/es/DateTime/YearView.module.css

@@ -1,19 +1,16 @@
-[dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19) ;
-  padding-left: var(--zd_size19) ;
-}[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19) ;
-  padding-right: var(--zd_size19) ;
+.boxPadding {
+  padding-inline: var(--zd_size19) ;
 }
 
 .month {
   width: 30.333%;
+  margin-block:0 var(--zd_size1) ;
+  margin-inline:0 ;
   font-size: var(--zd_font_size12) ;
   line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
   text-align: center;
-  margin: 0 0 var(--zd_size1) ;
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
@@ -37,7 +34,8 @@
 }
 
 .year {
-  padding: var(--zd_size7) 0 ;
+  padding-block: var(--zd_size7) ;
+  padding-inline:0 ;
   cursor: pointer;
 }
 
@@ -90,10 +88,10 @@
   height: var(--zd_size135) ;
   overflow: hidden;
   transition: height var(--zd_transition1);
-  padding-bottom: var(--zd_size5) ;
+  padding-block-end: var(--zd_size5) ;
 }
 
 .toggleYear {
   height: 0 ;
   padding: 0 ;
-}
+}

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -27,6 +27,7 @@ export default function DropBoxElement(props) {
     tabIndex,
     palette,
     subContainerRef,
+    getSubContainerRef,
     customStyle,
     animationStyle
   } = props;
@@ -54,6 +55,14 @@ export default function DropBoxElement(props) {
     }
   };
 
+  const setSubContainerRef = ele => {
+    if (subContainerRef) {
+      subContainerRef.current = ele;
+    }
+
+    getSubContainerRef && getSubContainerRef(ele);
+  };
+
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
@@ -120,7 +129,7 @@ export default function DropBoxElement(props) {
     "data-id": `${dataId}_subcontainer`,
     "data-test-id": `${dataId}_subcontainer`,
     "data-selector-id": `${dataSelectorId}_subcontainer`,
-    ref: subContainerRef
+    ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/React.createElement("div", {
     className: style.closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -13,9 +13,13 @@
 
 .subContainer {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    /* overflow: hidden; */
     border-radius: var(--dropbox_border_radius);
     padding: var(--dropbox_padding);
     box-shadow: var(--dropbox_box_shadow);
+
 }
 
 .defaultPalette,
@@ -33,7 +37,7 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: 10px 0 0 0;
+    --dropbox_padding: var(--zd_size10) 0 0 0;
 }
 
 /* sizes */
@@ -430,14 +434,15 @@
     height: 6px;
     /*css:theme-validation:ignore*/
     width: 20% ;
+    margin-block: 0 var(--zd_size10) ;
+    margin-inline: auto ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
     cursor: pointer;
-    margin: 0 auto var(--zd_size10) ;
 }
 
 .boxPadding {
-    --dropbox_padding: 10px 0;
+    --dropbox_padding: var(--zd_size10) 0;
 }
 
 .darkPalette {

package/es/DropBox/DropBoxElement/props/propTypes.js

@@ -47,5 +47,6 @@ export const DropBoxElementPropTypes = {
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
   zIndexStyle: PropTypes.object,
-  subContainerRef: PropTypes.func
+  subContainerRef: PropTypes.func,
+  getSubContainerRef: PropTypes.func
 };

package/es/DropBox/css/DropBox.module.css

@@ -1,59 +1,59 @@
-.varClass {
-  /* dropbox default variables */
-  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
-  --dropbox_border_radius: 0;
-  --dropbox_padding: 0;
-  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
-
-  /* dropbox arrow default variables */
-  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
-
-  /* dropbox responsive default variables */
-  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
-  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
-}
-
-.activateInDelay {
-  composes: modeForward from '../../common/animation.module.css';
-  pointer-events: none;
-}
-
-[dir=ltr] .activateInDelay {
-  animation-duration: var(--zd_transition1);
-  animation-delay: var(--zd_transition2);
-  animation-name: activateInDelay;
-}
-
-[dir=rtl] .activateInDelay {
-  animation-duration: var(--zd_transition1);
-  animation-delay: var(--zd_transition2);
-  animation-name: activateInDelay;
-}
-
-.freezeLayer {
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  composes: activateInDelay;
-}
-
-[dir=ltr] .freezeLayer {
-  left: 0 ;
-  right: 0 ;
-}
-
-[dir=rtl] .freezeLayer {
-  right: 0 ;
-  left: 0 ;
-}
-
-.freeze {
-  composes: varClass;
-  background: var(--dropbox_mob_bg_color);
-}
-
-@keyframes activateInDelay {
-  100% {
-    pointer-events: initial;
-  }
+.varClass {
+  /* dropbox default variables */
+  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
+  --dropbox_border_radius: 0;
+  --dropbox_padding: 0;
+  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+
+  /* dropbox arrow default variables */
+  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
+
+  /* dropbox responsive default variables */
+  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
+  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
+}
+
+.activateInDelay {
+  composes: modeForward from '../../common/animation.module.css';
+  pointer-events: none;
+}
+
+[dir=ltr] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+
+[dir=rtl] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+
+.freezeLayer {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  composes: activateInDelay;
+}
+
+[dir=ltr] .freezeLayer {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .freezeLayer {
+  right: 0 ;
+  left: 0 ;
+}
+
+.freeze {
+  composes: varClass;
+  background: var(--dropbox_mob_bg_color);
+}
+
+@keyframes activateInDelay {
+  100% {
+    pointer-events: initial;
+  }
 }

package/es/DropDown/DropDown.module.css

@@ -1,5 +1,6 @@
 .listGroup {
   max-height: var(--zd_size220) ;
   composes: oflowy from '../common/common.module.css';
-  margin: var(--zd_size8) 0 var(--zd_size4) ;
+  margin-block:var(--zd_size8) var(--zd_size4) ;
+  margin-inline:0 ;
 }

package/es/DropDown/DropDownHeading.module.css

@@ -1,53 +1,53 @@
-.varClass {
-  /* dropdownheading default variables */
-  --dropdownheading_text_color: var(--zdt_dropdown_default_text);
-  --dropdownheading_text_transform: uppercase;
-  --dropdownheading_padding: 10px 20px;
-  --dropdownheading_bg_color: none;
-
-  /* dropdownheading underline default variables */
-  --dropdownheading_underline_width: 20px;
-  --dropdownheading_underline_height: 1px;
-  --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
-  --dropdownheading_underline_left: 20px;
-}
-.default {
-  composes: dotted semibold from '../common/common.module.css';
-  composes: varClass;
-  position: relative;
-  font-size: var(--zd_font_size11) ;
-  letter-spacing: 0.6px;
-  text-transform: var(--dropdownheading_text_transform);
-  color: var(--dropdownheading_text_color);
-  padding: var(--dropdownheading_padding);
-  background-color: var(--dropdownheading_bg_color);
-}
-.default::after {
-  position: absolute;
-  content: '';
-  bottom: var(--zd_size2) ;
-  width: var(--dropdownheading_underline_width);
-  height: var(--dropdownheading_underline_height);
-}
-
-.light {
-  composes: default;
-}
-.light::after, .dark::after {
-  background-color: var(--dropdownheading_underline_bg_color);
-}
-[dir=ltr] .light::after, [dir=ltr] .dark::after {
-  left: var(--dropdownheading_underline_left);
-}
-[dir=rtl] .light::after, [dir=rtl] .dark::after {
-  right: var(--dropdownheading_underline_left);
-}
-
-.dark {
-  composes: default;
-  --dropdownheading_text_color: var(--zdt_dropdown_darkheading_text);
-  --dropdownheading_bg_color: var(--zdt_dropdown_darkheading_bg);
-}
-.dark::after {
-  --dropdownheading_underline_bg_color: var(--zdt_dropdown_darkheading_underline_bg);
-}
+.varClass {
+  /* dropdownheading default variables */
+  --dropdownheading_text_color: var(--zdt_dropdown_default_text);
+  --dropdownheading_text_transform: uppercase;
+  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
+  --dropdownheading_bg_color: none;
+
+  /* dropdownheading underline default variables */
+  --dropdownheading_underline_width: var(--zd_size20);
+  --dropdownheading_underline_height: var(--zd_size1);
+  --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
+  --dropdownheading_underline_left: var(--zd_size20);
+}
+.default {
+  composes: dotted semibold from '../common/common.module.css';
+  composes: varClass;
+  position: relative;
+  font-size: var(--zd_font_size11) ;
+  letter-spacing: 0.6px;
+  text-transform: var(--dropdownheading_text_transform);
+  color: var(--dropdownheading_text_color);
+  padding: var(--dropdownheading_padding);
+  background-color: var(--dropdownheading_bg_color);
+}
+.default::after {
+  position: absolute;
+  content: '';
+  bottom: var(--zd_size2) ;
+  width: var(--dropdownheading_underline_width);
+  height: var(--dropdownheading_underline_height);
+}
+
+.light {
+  composes: default;
+}
+.light::after, .dark::after {
+  background-color: var(--dropdownheading_underline_bg_color);
+}
+[dir=ltr] .light::after, [dir=ltr] .dark::after {
+  left: var(--dropdownheading_underline_left);
+}
+[dir=rtl] .light::after, [dir=rtl] .dark::after {
+  right: var(--dropdownheading_underline_left);
+}
+
+.dark {
+  composes: default;
+  --dropdownheading_text_color: var(--zdt_dropdown_darkheading_text);
+  --dropdownheading_bg_color: var(--zdt_dropdown_darkheading_bg);
+}
+.dark::after {
+  --dropdownheading_underline_bg_color: var(--zdt_dropdown_darkheading_underline_bg);
+}