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

package/lib/DateTime/Time.js

@@ -25,6 +25,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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); } }
@@ -74,7 +82,15 @@ var Time = /*#__PURE__*/function (_PureComponent) {
           ampmSuggestions = _this$props.ampmSuggestions,
           onAmPmSelect = _this$props.onAmPmSelect,
           amPm = _this$props.amPm,
-          is24Hour = _this$props.is24Hour;
+          is24Hour = _this$props.is24Hour,
+          _this$props$customPro = _this$props.customProps,
+          customProps = _this$props$customPro === void 0 ? {} : _this$props$customPro;
+      var _customProps$HourComp = customProps.HourCompProps,
+          HourCompProps = _customProps$HourComp === void 0 ? {} : _customProps$HourComp,
+          _customProps$MinuteCo = customProps.MinuteCompProps,
+          MinuteCompProps = _customProps$MinuteCo === void 0 ? {} : _customProps$MinuteCo,
+          _customProps$AmPmComp = customProps.AmPmCompProps,
+          AmPmCompProps = _customProps$AmPmComp === void 0 ? {} : _customProps$AmPmComp;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
         className: _DateTimeModule["default"].text
       }, timeText), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -91,7 +107,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         onHourSelect: onHourSelect,
         hours: hours,
         needResponsive: needResponsive,
-        hourEmptyText: hourEmptyText
+        hourEmptyText: hourEmptyText,
+        customProps: _objectSpread({}, HourCompProps)
       })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _DateTimeModule["default"].dropDownContainer
@@ -100,7 +117,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         onMinutesSelect: onMinutesSelect,
         mins: mins,
         minuteEmptyText: minuteEmptyText,
-        needResponsive: needResponsive
+        needResponsive: needResponsive,
+        customProps: _objectSpread({}, MinuteCompProps)
       })), !is24Hour ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _DateTimeModule["default"].dropDownContainer
@@ -108,7 +126,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         ampmSuggestions: ampmSuggestions,
         onAmPmSelect: onAmPmSelect,
         amPm: amPm,
-        needResponsive: needResponsive
+        needResponsive: needResponsive,
+        customProps: _objectSpread({}, AmPmCompProps)
       })) : null));
     }
   }]);
@@ -139,8 +158,9 @@ var Hour = /*#__PURE__*/function (_React$PureComponent) {
           onHourSelect = _this$props2.onHourSelect,
           hours = _this$props2.hours,
           needResponsive = _this$props2.needResponsive,
-          hourEmptyText = _this$props2.hourEmptyText;
-      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          hourEmptyText = _this$props2.hourEmptyText,
+          customProps = _this$props2.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: hourSuggestions,
         onChange: onHourSelect,
         selectedValue: hours,
@@ -159,7 +179,7 @@ var Hour = /*#__PURE__*/function (_React$PureComponent) {
         needListBorder: true,
         needTick: false,
         listItemSize: "small"
-      });
+      }, customProps));
     }
   }]);
 
@@ -185,8 +205,9 @@ var Minute = /*#__PURE__*/function (_React$PureComponent2) {
           onMinutesSelect = _this$props3.onMinutesSelect,
           mins = _this$props3.mins,
           minuteEmptyText = _this$props3.minuteEmptyText,
-          needResponsive = _this$props3.needResponsive;
-      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          needResponsive = _this$props3.needResponsive,
+          customProps = _this$props3.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: minSuggestions,
         onChange: onMinutesSelect,
         selectedValue: mins,
@@ -205,7 +226,7 @@ var Minute = /*#__PURE__*/function (_React$PureComponent2) {
         needListBorder: true,
         needTick: false,
         listItemSize: "small"
-      });
+      }, customProps));
     }
   }]);
 
@@ -230,8 +251,9 @@ var AmPm = /*#__PURE__*/function (_React$PureComponent3) {
           ampmSuggestions = _this$props4.ampmSuggestions,
           onAmPmSelect = _this$props4.onAmPmSelect,
           amPm = _this$props4.amPm,
-          needResponsive = _this$props4.needResponsive;
-      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          needResponsive = _this$props4.needResponsive,
+          customProps = _this$props4.customProps;
+      return /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: ampmSuggestions,
         onChange: onAmPmSelect,
         selectedValue: amPm,
@@ -246,7 +268,7 @@ var AmPm = /*#__PURE__*/function (_React$PureComponent3) {
         needListBorder: true,
         needTick: false,
         listItemSize: "small"
-      });
+      }, customProps));
     }
   }]);
 

package/lib/DateTime/YearView.module.css

@@ -1,19 +1,22 @@
-.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) ;
 }
 
 .month {
   width: 30.333%;
+  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 1px;
+  margin: 0 0 var(--zd_size1) ;
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
-  font-size: 12px;
-  line-height: 2.1667;
-  height: 26px;
-  color: var(--zdt_base_color);
 }
 
 .month:hover {
@@ -22,27 +25,30 @@
 
 .currentMonth,
 .currentMonth:hover {
-  background-color: var(--zdt_yearview_currentmonth_bg);
   color: var(--zdt_yearview_currentmonth_text);
 }
 
+.currentMonth, .currentMonth:hover {
+  background-color: var(--zdt_yearview_currentmonth_bg);
+}
+
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
 }
 
 .year {
-  padding: 7px 0;
+  padding: var(--zd_size7) 0 ;
   cursor: pointer;
 }
 
 .year:hover .yearText,
 .year:hover .arrow {
-  color: var(--zdt_base_color);
+  color: var(--zdt_yearview_year_hover_text);
 }
 
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
 }
 
 .arrow {
@@ -56,31 +62,38 @@
 
 .isActive .yearText {
   font-family: var(--zd_semibold);
-  color: var(--zdt_base_color);
-  font-size: 11px;
+  color: var(--zdt_yearview_year_hover_text);
+  font-size: var(--zd_font_size11) ;
 }
 
 .arrowActive {
+  color: var(--zdt_yearview_year_hover_text);
+}
+
+[dir=ltr] .arrowActive {
   transform: rotate(180deg);
-  color: var(--zdt_base_color);
+}
+
+[dir=rtl] .arrowActive {
+  transform: rotate(-180deg);
 }
 
 .container {
-  height: 100%;
+  height: 100% ;
   overflow-y: auto;
   overflow-x: hidden;
   composes: boxPadding;
-  background-color: var(--zdt_base_bg);
+  background-color: var(--zdt_yearview_default_bg);
 }
 
 .yearContainer {
-  height: 135px;
+  height: var(--zd_size135) ;
   overflow: hidden;
   transition: height var(--zd_transition1);
-  padding-bottom: 5px;
+  padding-bottom: var(--zd_size5) ;
 }
 
 .toggleYear {
-  height: 0;
-  padding: 0;
+  height: 0 ;
+  padding: 0 ;
 }

package/lib/DateTime/props/defaultProps.js

@@ -28,7 +28,8 @@ var DateTime_defaultProps = {
   i18nKeys: {},
   is24Hour: false,
   isDefaultPosition: false,
-  customDateFormat: null
+  customDateFormat: null,
+  customProps: {}
 };
 exports.DateTime_defaultProps = DateTime_defaultProps;
 var DateWidget_defaultProps = {
@@ -65,6 +66,7 @@ var DateTimePopupFooter_defaultProps = {
 };
 exports.DateTimePopupFooter_defaultProps = DateTimePopupFooter_defaultProps;
 var Time_defaultProps = {
-  dataId: 'Time'
+  dataId: 'Time',
+  customProps: {}
 };
 exports.Time_defaultProps = Time_defaultProps;

package/lib/DateTime/props/propTypes.js

@@ -97,7 +97,8 @@ var DateTime_propTypes = {
   positionsOffset: _propTypes["default"].array,
   targetOffset: _propTypes["default"].string,
   isRestrictScroll: _propTypes["default"].bool,
-  dropBoxPortalId: _propTypes["default"].string
+  dropBoxPortalId: _propTypes["default"].string,
+  customProps: _propTypes["default"].object
 };
 exports.DateTime_propTypes = DateTime_propTypes;
 var DateWidget_propTypes = {
@@ -165,7 +166,8 @@ var DateWidget_propTypes = {
   targetOffset: _propTypes["default"].array,
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string,
-  a11y: _propTypes["default"].object
+  a11y: _propTypes["default"].object,
+  customProps: _propTypes["default"].object
 };
 exports.DateWidget_propTypes = DateWidget_propTypes;
 var YearView_propTypes = {
@@ -214,6 +216,7 @@ var Time_propTypes = {
   ampmSuggestions: _propTypes["default"].array,
   onAmPmSelect: _propTypes["default"].func,
   amPm: _propTypes["default"].string,
-  is24Hour: _propTypes["default"].bool
+  is24Hour: _propTypes["default"].bool,
+  customProps: _propTypes["default"].object
 };
 exports.Time_propTypes = Time_propTypes;

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,8 +18,7 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
-.defaultPalette,
-.darkPalette {
+.defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
 
@@ -29,48 +28,48 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: 10px 0 0 0;
+    --dropbox_padding: var(--zd_size10) 0 0 0;
 }
 
 /* sizes */
 .mini {
-    width: 140px;
+    width: var(--zd_size140) ;
 }
 
 .xmini {
-    width: 160px;
+    width: var(--zd_size160) ;
 }
 
 .xsmall {
-    width: 180px;
+    width: var(--zd_size180) ;
 }
 
 .small {
-    width: 200px;
+    width: var(--zd_size200) ;
 }
 
 .medium {
-    width: 220px;
+    width: var(--zd_size220) ;
 }
 
 .large {
-    width: 260px;
+    width: var(--zd_size260) ;
 }
 
 .mlarge {
-    width: 280px;
+    width: var(--zd_size280) ;
 }
 
 .xlarge {
-    width: 304px;
+    width: var(--zd_size304) ;
 }
 
 .xxlarge {
-    width: 364px;
+    width: var(--zd_size364) ;
 }
 
 .default {
-    width: 100%;
+    width: 100% ;
 }
 
 /* shadow */
@@ -95,122 +94,118 @@
 }
 
 /* box direction styles */
-/*rtl:begin:ignore*/
 .topStart {
-    bottom: 100%;
-    right: 0;
+    bottom: 100% ;
+    right: 0 ;
 }
 
 .topEnd {
-    bottom: 100%;
-    left: 0;
+    bottom: 100% ;
+    left: 0 ;
 }
 
 .topMid {
-    bottom: 100%;
-    left: 50%;
+    bottom: 100% ;
+    left: 50% ;
     transform: translateX(-50%);
 }
 
 .bottomStart {
-    top: 100%;
-    right: 0;
+    top: 100% ;
+    right: 0 ;
 }
 
 .bottomEnd {
-    top: 100%;
-    left: 0;
+    top: 100% ;
+    left: 0 ;
 }
 
 .bottomMid {
-    top: 100%;
-    left: 50%;
+    top: 100% ;
+    left: 50% ;
     transform: translateX(-50%);
 }
 
 .rightStart {
-    left: 100%;
-    bottom: 0;
+    left: 100% ;
+    bottom: 0 ;
 }
 
 .rightEnd {
-    left: 100%;
-    top: 0;
+    left: 100% ;
+    top: 0 ;
 }
 
 .rightMid {
-    left: 100%;
-    top: 50%;
+    left: 100% ;
+    top: 50% ;
     transform: translateY(-50%);
 }
 
 .leftStart {
-    right: 100%;
-    bottom: 0;
+    right: 100% ;
+    bottom: 0 ;
 }
 
 .leftEnd {
-    right: 100%;
-    top: 0;
+    right: 100% ;
+    top: 0 ;
 }
 
 .leftMid {
-    right: 100%;
-    top: 50%;
+    right: 100% ;
+    top: 50% ;
     transform: translateY(-50%);
 }
 
 /* space for arrow */
 .arrowtop {
-    padding-bottom: 10px;
+    padding-bottom: var(--zd_size10) ;
 }
 
 .arrowright {
-    padding-left: 10px;
+    padding-left: var(--zd_size10) ;
 }
 
 .arrowleft {
-    padding-right: 10px;
+    padding-right: var(--zd_size10) ;
 }
 
 .arrowbottom {
-    padding-top: 10px;
+    padding-top: var(--zd_size10) ;
 }
 
 /* space from target */
 .paddingSpace_top {
-    padding-bottom: 5px;
+    padding-bottom: var(--zd_size5) ;
 }
 
 .paddingSpace_right {
-    padding-left: 5px;
+    padding-left: var(--zd_size5) ;
 }
 
 .paddingSpace_left {
-    padding-right: 5px;
+    padding-right: var(--zd_size5) ;
 }
 
 .paddingSpace_bottom {
-    padding-top: 5px;
+    padding-top: var(--zd_size5) ;
 }
 
 .arrow {
     position: absolute;
-    height: 34px;
-    width: 34px;
-    clip: rect(3px,
-            29px,
-            17px,
-            8px);
-    padding: 4px;
+    height: var(--zd_size34) ;
+    width: var(--zd_size34) ;
+    clip: rect(var(--zd_size3), var(--zd_size29), var(--zd_size17), var(--zd_size8)) ;
+    padding: var(--zd_size4) ;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .arrowShape {
-    height: 10px;
-    width: 10px;
+    height: var(--zd_size10) ;
+    width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
@@ -227,20 +222,20 @@
 .top .start,
 .top .end,
 .top .mid {
-    bottom: -17px;
+    bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
 .top .start {
-    left: 28px;
+    left: var(--zd_size28) ;
 }
 
 .top .end {
-    right: 28px;
+    right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
 .top .mid {
-    left: 50%;
+    left: 50% ;
 }
 
 .top .start,
@@ -251,19 +246,19 @@
 .bottom .start,
 .bottom .end,
 .bottom .mid {
-    top: -17px;
+    top: calc( var(--zd_size17) * -1 ) ;
 }
 
 .bottom .start {
-    left: 28px;
+    left: var(--zd_size28) ;
 }
 
 .bottom .mid {
-    left: 50%;
+    left: 50% ;
 }
 
 .bottom .end {
-    right: 28px;
+    right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
@@ -275,20 +270,20 @@
 .left .start,
 .left .mid,
 .left .end {
-    right: -17px;
+    right: calc( var(--zd_size17) * -1 ) ;
 }
 
 .left .start {
-    top: 28px;
+    top: var(--zd_size28) ;
 }
 
 .left .end {
     transform: rotate(90deg) translateX(50%);
-    bottom: 28px;
+    bottom: var(--zd_size28) ;
 }
 
 .left .mid {
-    top: 50%;
+    top: 50% ;
 }
 
 .left .start,
@@ -299,15 +294,15 @@
 .right .start,
 .right .mid,
 .right .end {
-    left: -17px;
+    left: calc( var(--zd_size17) * -1 ) ;
 }
 
 .right .start {
-    top: 28px;
+    top: var(--zd_size28) ;
 }
 
 .right .mid {
-    top: 50%;
+    top: 50% ;
 }
 
 .right .start,
@@ -316,11 +311,9 @@
 }
 
 .right .end {
-    bottom: 28px;
+    bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
-
-/*rtl:end:ignore*/
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -332,7 +325,11 @@
     box-shadow: none;
 }
 
-.animationBasic {
+[dir=ltr] .animationBasic {
+    animation-duration: var(--zd_transition2);
+}
+
+[dir=rtl] .animationBasic {
     animation-duration: var(--zd_transition2);
 }
 
@@ -351,12 +348,27 @@
 }
 .bounce {
     composes: animationBasic;
+}
+[dir=ltr] .bounce {
+    animation-name: animation;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+[dir=rtl] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
 
 .slideUp {
     composes: modeForward from '../../../common/animation.module.css';
+}
+
+[dir=ltr] .slideUp {
+    animation-duration: var(--zd_transition3);
+    animation-name: slideUp;
+    animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+
+[dir=rtl] .slideUp {
     animation-duration: var(--zd_transition3);
     animation-name: slideUp;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
@@ -388,24 +400,31 @@
 
 .responsive {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    max-height: 90%;
+    bottom: 0 ;
+    width: 100% ;
+    max-height: 90% ;
+}
+
+[dir=ltr] .responsive {
+    left: 0 ;
+}
+
+[dir=rtl] .responsive {
+    right: 0 ;
 }
 
 .closeBar {
   /*  Variable:Ignore  */
     height: 6px;
+    width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
-    width: 20%;
     cursor: pointer;
-    margin: 0 auto 10px;
+    margin: 0 auto var(--zd_size10) ;
 }
 
 .boxPadding {
-    --dropbox_padding: 10px 0;
+    --dropbox_padding: var(--zd_size10) 0;
 }
 
 .darkPalette {