@zohodesk/components 1.0.0-temp-190.2 → 1.0.0-temp-191

package/lib/CheckBox/CheckBox.js

@@ -57,6 +57,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleGetContainerRef = _this.handleGetContainerRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -68,33 +69,41 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props.checked;
       onChange && onChange(!checked, e);
     }
+  }, {
+    key: "handleGetContainerRef",
+    value: function handleGetContainerRef(ele) {
+      var _this$props2 = this.props,
+          getContainerRef = _this$props2.getContainerRef,
+          id = _this$props2.id;
+      getContainerRef && getContainerRef(ele, id);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          checked = _this$props2.checked,
-          disabled = _this$props2.disabled,
-          isReadOnly = _this$props2.isReadOnly,
-          disabledTitle = _this$props2.disabledTitle,
-          title = _this$props2.title,
-          palette = _this$props2.palette,
-          text = _this$props2.text,
-          size = _this$props2.size,
-          labelPalette = _this$props2.labelPalette,
-          labelSize = _this$props2.labelSize,
-          isFilled = _this$props2.isFilled,
-          isClipped = _this$props2.isClipped,
-          getRef = _this$props2.getRef,
-          variant = _this$props2.variant,
-          active = _this$props2.active,
-          dataId = _this$props2.dataId,
-          name = _this$props2.name,
-          activeStyle = _this$props2.activeStyle,
-          a11y = _this$props2.a11y,
-          customClass = _this$props2.customClass,
-          customProps = _this$props2.customProps,
-          dataSelectorId = _this$props2.dataSelectorId;
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          checked = _this$props3.checked,
+          disabled = _this$props3.disabled,
+          isReadOnly = _this$props3.isReadOnly,
+          disabledTitle = _this$props3.disabledTitle,
+          title = _this$props3.title,
+          palette = _this$props3.palette,
+          text = _this$props3.text,
+          size = _this$props3.size,
+          labelPalette = _this$props3.labelPalette,
+          labelSize = _this$props3.labelSize,
+          isFilled = _this$props3.isFilled,
+          isClipped = _this$props3.isClipped,
+          getRef = _this$props3.getRef,
+          variant = _this$props3.variant,
+          active = _this$props3.active,
+          dataId = _this$props3.dataId,
+          name = _this$props3.name,
+          activeStyle = _this$props3.activeStyle,
+          a11y = _this$props3.a11y,
+          customClass = _this$props3.customClass,
+          customProps = _this$props3.customProps,
+          dataSelectorId = _this$props3.dataSelectorId;
       var _customProps$CheckBox = customProps.CheckBoxProps,
           CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
           _customProps$LabelPro = customProps.LabelProps,
@@ -127,6 +136,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         onClick: isReadOnly || disabled ? null : this.onChange,
         tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
         "aria-checked": ariaChecked,
+        eleRef: this.handleGetContainerRef,
         role: role,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,

package/lib/CheckBox/CheckBox.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* checkbox default variables */
-  --checkbox_bg_color: var(--zdt_checkbox_default_bg);
+  --checkbox_bg_color: var(--zdt_base_bg);
   --checkbox_cursor: default;
   --checkbox_stroke_width: 2px;
   --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
@@ -9,141 +9,161 @@
   --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
   --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .container {
   composes: varClass;
   stroke: var(--checkbox_stroke_color);
 }
-.container, .pointer, .readonly {
+
+.container,
+.pointer,
+.readonly {
   cursor: var(--checkbox_cursor);
 }
+
 .pointer {
   --checkbox_cursor: pointer;
 }
+
 .readonly {
   --checkbox_cursor: default;
 }
+
 .cbBox {
   fill: none;
   stroke-width: var(--checkbox_stroke_width);
   stroke-linecap: round;
   stroke: inherit;
 }
+
 .tickPath {
   composes: cbBox;
   stroke-dasharray: 40;
 }
+
 .boxContainer {
   composes: offSelection from '../common/common.module.css';
-  /* css:theme-validation:ignore */
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
+
 .filled {
   --checkbox_bg_color: inherit;
 }
+
 .medium {
-  width: var(--zd_size16) ;
-  height: var(--zd_size16) ;
+  width: 16px;
+  height: 16px;
 }
+
 .small {
-  width: var(--zd_size13) ;
-  height: var(--zd_size13) ;
+  width: 13px;
+  height: 13px;
 }
 
 .checkbox {
   position: relative;
-  font-size: 0 ;
+  font-size: 0;
   display: block;
 }
+
+/*rtl:begin:ignore*/
 .tick {
   position: absolute;
-  left: 0 ;
+  left: 0;
 }
+
+/*rtl:end:ignore*/
 .mediumtick {
-  top: calc( var(--zd_size2) * -1 ) ;
-  height: var(--zd_size20) ;
-  width: var(--zd_size20) ;
+  top: -2px;
+  height: 20px;
+  width: 20px;
 }
+
+/*rtl:begin:ignore*/
 .smalltick {
-  top: calc( var(--zd_size3) * -1 ) ;
-  height: var(--zd_size18) ;
-  width: var(--zd_size18) ;
-  left: calc( var(--zd_size1) * -1 ) ;
+  top: -3px;
+  height: 18px;
+  width: 18px;
+  left: -1px;
 }
 
+/*rtl:end:ignore*/
+
 .checkedtickPath {
   stroke-dashoffset: 40;
-}
-
-[dir=ltr] .checkedtickPath {
   animation: tickAnimate var(--zd_transition3) ease forwards;
 }
 
-[dir=rtl] .checkedtickPath {
-  animation: tickAnimate var(--zd_transition3) ease forwards;
-}
 .linePath {
   transform-origin: center;
-}
-[dir=ltr] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
-[dir=rtl] .linePath {
-  animation: lineAnimate var(--zd_transition3) ease forwards;
-}
-[dir=ltr] .text {
-  margin-left: var(--zd_size6) ;
-}
-[dir=rtl] .text {
-  margin-right: var(--zd_size6) ;
+
+.text {
+  margin-left: 6px;
 }
 
 .checkedprimary,
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
 }
+
 .primary:hover
+
 /* .primary:focus  */
-{
+  {
   --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .checkedprimary {
   --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .danger:hover
+
 /* .danger:focus */
- {
+  {
   --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
 }
+
 .checkeddanger {
   --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
 }
 
 .checkedprimaryLabel,
 .checkeddangerLabel {
-  /* css:theme-validation:ignore */
   color: var(--checkbox_checked_active_color);
 }
+
 .activeprimaryLabel:hover
+
 /* .activeprimaryLabel:focus  */
-{
+  {
   --label_text_color: var(--zdt_checkbox_label_primary_text);
 }
+
 .checkedprimaryLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .activedangerLabel:hover
+
 /* .activedangerLabel:focus  */
-{
+  {
   --label_text_color: var(--zdt_checkbox_label_danger_text);
 }
+
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
+
+/*rtl:begin:ignore*/
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;
   }
+
   100% {
     stroke-dashoffset: 0;
   }
@@ -153,7 +173,10 @@
   0% {
     transform: scaleX(0);
   }
+
   100% {
     transform: scaleX(1);
   }
 }
+
+/*rtl:end:ignore*/

package/lib/CheckBox/props/propTypes.js

@@ -18,6 +18,7 @@ var propTypes = {
   disabled: _propTypes["default"].bool,
   disabledTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
+  getContainerRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
   isFilled: _propTypes["default"].bool,
   isClipped: _propTypes["default"].bool,

package/lib/DateTime/DateTime.module.css

@@ -2,30 +2,25 @@
   font-family: var(--zd_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-right: 19px;
+  padding-left: 19px;
 }
 
 .container {
-  font-size: var(--zd_font_size16) ;
-  composes: offSelection from '../common/common.module.css';
   border-radius: 3px;
-  background-color: var(--zdt_datetime_default_bg);
+  background-color: var(--zdt_base_bg);
+  font-size: 16px;
+  composes: offSelection from '../common/common.module.css';
 }
 
 .header {
-  min-height: var(--zd_size36) ;
-  composes: boxPadding;
+  min-height: 36px;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
   border-radius: 0 0 2px 2px;
   border-bottom: 1px solid var(--zdt_datetime_header_border);
+  composes: boxPadding;
 }
 
 .datesStr {
@@ -33,54 +28,43 @@
 }
 
 .grid {
-  width: var(--zd_size28) ;
-  height: var(--zd_size28) ;
+  width: 28px;
+  height: 28px;
   line-height: 1.3846;
-  /* css:theme-validation:ignore */
   text-align: center;
-  padding: var(--zd_size4) 0 ;
+  padding: 4px 0;
   border-radius: 50%;
   border: 1px solid transparent;
 }
 
 .thArrow,
 .datesStr {
-  font-size: var(--zd_font_size13) ;
-  color: var(--zdt_datetime_datestr_text);
-}
-
-.thArrow, .datesStr {
+  font-size: 13px;
+  color: var(--zdt_base_color);
   cursor: pointer;
 }
 
 .thArrow:hover,
 .datesStr:hover {
-  color: var(--zdt_datetime_datestr_text);
-}
-
-.thArrow:hover, .datesStr:hover {
+  color: var(--zdt_base_color);
   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-left: 2px;
 }
 
 .thMonYear {
-  font-size: var(--zd_font_size13) ;
+  font-size: 13px;
   line-height: 1.8462;
-  color: var(--zdt_datetime_datestr_text);
+  color: var(--zdt_base_color);
   composes: semibold;
   display: initial
 }
 
 .dateContainer {
-  margin: 0 var(--zd_size19) 0 var(--zd_size19) ;
-  padding: var(--zd_size6) 0 var(--zd_size10) 0 ;
+  margin: 0 19px 0 19px;
+  padding: 6px 0 10px 0;
 }
 
 .separator {
@@ -88,29 +72,29 @@
 }
 
 .days {
-  min-height: var(--zd_size36) ;
+  min-height: 36px;
+  padding-top: 7px;
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7) ;
 }
 
 .daysStr {
   composes: dotted from '../common/common.module.css';
-  font-size: var(--zd_font_size10) ;
+  font-size: 10px;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
-  width: var(--zd_size31) ;
+  width: 31px;
 }
 
 .dateRow {
-  height: var(--zd_size28) ;
+  height: 28px;
+  margin: 1px 0 5px;
   composes: alignBetween from '../common/common.module.css';
-  margin: var(--zd_size1) 0 var(--zd_size5) ;
 }
 
 .dateRow:last-child {
-  margin-bottom: 0 ;
+  margin-bottom: 0;
 }
 
 .sunday,
@@ -123,7 +107,8 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.sunday,.inActiveDate.sunday:hover {
+.invalidDate.sunday,
+.inActiveDate.sunday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -141,46 +126,46 @@
 .active:hover,
 .active.today,
 .active:hover.today:hover {
-  color: var(--zdt_datetime_today_text);
-}
-
-.active, .active:hover, .active.today, .active:hover.today:hover {
   background-color: var(--zdt_datetime_selected_bg);
+  color: var(--zdt_datetime_today_text);
   border-radius: 50%;
 }
-.inActiveDate{
-color: var(--zdt_datetime_invalid_text);
-cursor: no-drop;
+
+.inActiveDate {
+  cursor: no-drop;
+  color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover
-{
+
+.inActiveDate:hover {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.sunday:hover{
+
+.inActiveDate:hover,
+.inActiveDate.sunday:hover {
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }
 
 
 .timesection {
-  padding-top: var(--zd_size5) ;
-  padding-bottom: var(--zd_size10) ;
+  padding-top: 5px;
+  padding-bottom: 10px;
 }
 
 .dropDownContainer {
-  padding: 0 var(--zd_size5) ;
+  padding: 0 5px;
 }
 
 .dropDown {
-  width: var(--zd_size60) ;
+  width: 60px;
   display: inline-block;
+  margin: 0 4px;
   position: relative;
-  margin: 0 var(--zd_size4) ;
 }
 
 .footer {
-  margin-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size12) ;
+  margin-top: 10px;
+  padding-bottom: 12px;
 }
 
 .timesection,
@@ -190,52 +175,38 @@ cursor: no-drop;
 
 .space {
   display: inline-block;
-  width: var(--zd_size15) ;
+  width: 15px;
 }
 
 .downArrow {
+  margin-left: 2px;
   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;
 }
 
 .dateText:hover .downArrow {
-  color: var(--zdt_datetime_datestr_text);
+  color: var(--zdt_base_color);
 }
 
 .text {
   composes: boxPadding;
-  font-size: var(--zd_font_size11) ;
+  font-size: 11px;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
+  margin-top: 14px;
   composes: semibold;
   display: block;
-  margin-top: var(--zd_size14) ;
 }
 
 .yearContainer {
   position: absolute;
-  top: 0 ;
-  width: 100% ;
-  height: 100% ;
-}
-
-[dir=ltr] .yearContainer {
-  left: 0 ;
-}
-
-[dir=rtl] .yearContainer {
-  right: 0 ;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .subContainer {
@@ -243,8 +214,8 @@ cursor: no-drop;
 }
 
 .dropBox {
-  width: 100% ;
+  width: 100%;
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
-  background-color: var(--zdt_dropbox_default_bg);
+  background-color: var(--zdt_base_bg);
 }

package/lib/DateTime/DateWidget.module.css

@@ -3,7 +3,9 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
-.readOnly, .readOnly > input, .disabled {
+.readOnly,
+.readOnly > input,
+.disabled {
   cursor: not-allowed;
 }
 .enabled {
@@ -14,17 +16,11 @@
 }
 .inputLine {
   position: absolute;
-  bottom: 0 ;
-  transition: border var(--zd_transition2) linear 0s;
+  bottom: 0;
+  left: 0;
+  right: 0;
   border-bottom: 1px solid var(--zdt_datewidget_input_border);
-}
-[dir=ltr] .inputLine {
-  left: 0 ;
-  right: 0 ;
-}
-[dir=rtl] .inputLine {
-  right: 0 ;
-  left: 0 ;
+  transition: border var(--zd_transition2) linear 0s;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);