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

package/lib/CheckBox/CheckBox.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* checkbox default variables */
-  --checkbox_bg_color: var(--zdt_base_bg);
+  --checkbox_bg_color: var(--zdt_checkbox_default_bg);
   --checkbox_cursor: default;
   --checkbox_stroke_width: 2px;
   --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
@@ -9,124 +9,111 @@
   --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';
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
-
 .filled {
   --checkbox_bg_color: inherit;
 }
-
 .medium {
-  width: 16px;
-  height: 16px;
+  width: var(--zd_size16) ;
+  height: var(--zd_size16) ;
 }
-
 .small {
-  width: 13px;
-  height: 13px;
+  width: var(--zd_size13) ;
+  height: var(--zd_size13) ;
 }
 
 .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: -2px;
-  height: 20px;
-  width: 20px;
+  top: calc( var(--zd_size2) * -1 ) ;
+  height: var(--zd_size20) ;
+  width: var(--zd_size20) ;
 }
-
-/*rtl:begin:ignore*/
 .smalltick {
-  top: -3px;
-  height: 18px;
-  width: 18px;
-  left: -1px;
+  top: calc( var(--zd_size3) * -1 ) ;
+  height: var(--zd_size18) ;
+  width: var(--zd_size18) ;
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 
-/*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;
 }
-
-.text {
-  margin-left: 6px;
+[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) ;
 }
 
 .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);
 }
@@ -135,35 +122,26 @@
 .checkeddangerLabel {
   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;
   }
@@ -173,10 +151,7 @@
   0% {
     transform: scaleX(0);
   }
-
   100% {
     transform: scaleX(1);
   }
 }
-
-/*rtl:end:ignore*/

package/lib/DateTime/DateTime.js

@@ -43,6 +43,12 @@ var _dateFormat = require("./dateFormatUtils/dateFormat");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -724,7 +730,11 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           positionsOffset = _this$props7.positionsOffset,
           targetOffset = _this$props7.targetOffset,
           isRestrictScroll = _this$props7.isRestrictScroll,
-          dropBoxPortalId = _this$props7.dropBoxPortalId;
+          dropBoxPortalId = _this$props7.dropBoxPortalId,
+          _this$props7$customPr = _this$props7.customProps,
+          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr;
+      var _customProps$TimeProp = customProps.TimeProps,
+          TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp;
       var _i18nKeys$timeText = i18nKeys.timeText,
           timeText = _i18nKeys$timeText === void 0 ? 'Time' : _i18nKeys$timeText,
           _i18nKeys$submitText = i18nKeys.submitText,
@@ -790,7 +800,8 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         ampmSuggestions: this.ampmSuggestions,
         onAmPmSelect: this.amPmSelect,
         amPm: amPm,
-        is24Hour: is24Hour
+        is24Hour: is24Hour,
+        customProps: _objectSpread({}, TimeProps)
       }) : null, needAction ? /*#__PURE__*/_react["default"].createElement(_DateTimePopupFooter["default"], {
         submitText: submitText,
         onSubmit: this.handleSelect,

package/lib/DateTime/DateTime.module.css

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

package/lib/DateTime/DateWidget.js

@@ -47,6 +47,12 @@ var _constants = require("./constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -1013,7 +1019,13 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           dropBoxPortalId = _this$props11.dropBoxPortalId,
           a11y = _this$props11.a11y,
           boxSize = _this$props11.boxSize,
-          onError = _this$props11.onError;
+          onError = _this$props11.onError,
+          _this$props11$customP = _this$props11.customProps,
+          customProps = _this$props11$customP === void 0 ? {} : _this$props11$customP;
+      var _customProps$DateTime = customProps.DateTimeProps,
+          DateTimeProps = _customProps$DateTime === void 0 ? {} : _customProps$DateTime,
+          _customProps$TextBoxP = customProps.TextBoxProps,
+          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
       var _this$state6 = this.state,
           _this$state6$selected = _this$state6.selected,
           value = _this$state6$selected === void 0 ? '' : _this$state6$selected,
@@ -1065,7 +1077,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         iconOnHover: iconOnHover,
         isFocus: isPopupReady,
         autoComplete: false,
-        a11y: a11y
+        a11y: a11y,
+        customProps: {
+          TextBoxProps: _objectSpread({}, TextBoxProps)
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
@@ -1102,7 +1117,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         isRestrictScroll: isRestrictScroll,
         dropBoxPortalId: dropBoxPortalId,
         boxSize: boxSize,
-        onError: onError
+        onError: onError,
+        customProps: _objectSpread({}, DateTimeProps)
       }));
     }
   }]);

package/lib/DateTime/DateWidget.module.css

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