@zohodesk/components 1.0.0-alpha-198 → 1.0.0-alpha-199

package/es/DateTime/DateTime.js

@@ -5,11 +5,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import datetime from '@zohodesk/datetimejs';
 import CalendarView from './CalendarView';
+import { Container, Box } from '../Layout';
+import Select from '../Select/Select';
+import Button from '../Button/Button';
 import DropBox from '../DropBox/DropBox';
+import Icon from '@zohodesk/icons/lib/Icon';
 import YearView from './YearView';
-import DateTimePopupHeader from './DateTimePopupHeader';
-import DateTimePopupFooter from './DateTimePopupFooter';
-import Time from './Time';
 import style from './DateTime.module.css';
 import { formatDate, getMonthEnd } from '../utils/datetime/common';
 import { getIsEmptyValue } from '../utils/Common';
@@ -665,14 +666,40 @@ export default class DateTime extends React.PureComponent {
       className: `${style.container} ${innerClass}`,
       "data-id": `${dataId}_Calendar`,
       onClick: this.closePopup
-    }, /*#__PURE__*/React.createElement(DateTimePopupHeader, {
-      onOpenYearView: this.handleOpenYearView,
-      showMonthTxt: showmonthtxt,
-      isYearView: isYearView,
-      prevMonthTitleText: prevMonthTitleText,
-      nextMonthTitleText: nextMonthTitleText,
-      onModifyCalendar: this.modifyCalendar
-    }), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "both",
+      className: style.header
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.dateText,
+      dataId: "selectYear",
+      onClick: this.handleOpenYearView
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.thMonYear
+    }, showmonthtxt), /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-GN-dropdown",
+      size: "12",
+      iconClass: style.downArrow
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }), !isYearView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Span, {
+      dataTitle: prevMonthTitleText,
+      dataId: "prevMonth",
+      modifyCalendar: this.modifyCalendar,
+      type: "previousMonth"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-arrowLeft3",
+      isBold: true
+    })), /*#__PURE__*/React.createElement(Span, {
+      dataTitle: nextMonthTitleText,
+      dataId: "nextMonth",
+      modifyCalendar: this.modifyCalendar,
+      type: "nextMonth",
+      className: style.navigation
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-arrowRight3",
+      isBold: true
+    }))) : null), /*#__PURE__*/React.createElement("div", {
       className: style.subContainer
     }, /*#__PURE__*/React.createElement(CalendarView, {
       needBorder: isDateTimeField || needAction,
@@ -683,29 +710,96 @@ export default class DateTime extends React.PureComponent {
       onSelect: this.dateSelect,
       dayNames: dayNames,
       dayNamesShort: dayNamesShort
-    }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
-      timeText: timeText,
-      dataId: dataId,
-      hourSuggestions: this.hourSuggestions,
-      onHourSelect: this.hoursSelect,
-      hours: hours,
-      hourEmptyText: hourEmptyText,
+    }), isDateTimeField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: style.text
+    }, timeText), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      className: style.timesection,
+      isCover: false,
+      dataId: `${dataId}_timeContainer`
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.dropDownContainer
+    }, /*#__PURE__*/React.createElement(Select, {
+      options: this.hourSuggestions,
+      onChange: this.hoursSelect,
+      selectedValue: hours,
+      needSearch: true,
+      emptyMessage: hourEmptyText,
+      animationStyle: "bounce",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      searchBoxSize: "xmedium",
+      searchBoxPlaceHolder: "",
+      maxLength: "2",
+      popupGroup: "calender",
+      size: "small",
+      dataId: "hourField",
+      needResponsive: needResponsive,
+      needListBorder: true,
+      needTick: false,
+      listItemSize: "small"
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.dropDownContainer
+    }, /*#__PURE__*/React.createElement(Select, {
+      options: this.minSuggestions,
+      onChange: this.minutesSelect,
+      selectedValue: mins,
+      needSearch: true,
+      emptyMessage: minuteEmptyText,
+      animationStyle: "bounce",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      searchBoxSize: "xmedium",
+      searchBoxPlaceHolder: "",
+      maxLength: "2",
+      popupGroup: "calender",
+      size: "small",
+      dataId: "minuteField",
+      needResponsive: needResponsive,
+      needListBorder: true,
+      needTick: false,
+      listItemSize: "small"
+    })), !is24Hour ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.dropDownContainer
+    }, /*#__PURE__*/React.createElement(Select, {
+      options: this.ampmSuggestions,
+      onChange: this.amPmSelect,
+      selectedValue: amPm,
+      animationStyle: "bounce",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      maxLength: "2",
+      popupGroup: "calender",
+      size: "small",
+      dataId: "ampmField",
       needResponsive: needResponsive,
-      minSuggestions: this.minSuggestions,
-      onMinutesSelect: this.minutesSelect,
-      mins: mins,
-      minuteEmptyText: minuteEmptyText,
-      ampmSuggestions: this.ampmSuggestions,
-      onAmPmSelect: this.amPmSelect,
-      amPm: amPm,
-      is24Hour: is24Hour
-    }) : null, needAction ? /*#__PURE__*/React.createElement(DateTimePopupFooter, {
-      submitText: submitText,
-      onSubmit: this.handleSelect,
-      cancelText: cancelText,
-      onCancel: this.handleClear,
-      dataId: dataId
-    }) : null, isYearView ? /*#__PURE__*/React.createElement("div", {
+      needListBorder: true,
+      needTick: false,
+      listItemSize: "small"
+    })) : null)), needAction ? /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "vertical",
+      alignBox: "row",
+      className: style.footer
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: submitText,
+      size: "medium",
+      palette: "primaryFilled",
+      onClick: this.handleSelect,
+      dataId: `${dataId}_saveBtn`
+    }), /*#__PURE__*/React.createElement("span", {
+      className: style.space
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: cancelText,
+      size: "medium",
+      palette: "secondary",
+      onClick: this.handleClear,
+      dataId: `${dataId}_clearBtn`
+    })) : null, isYearView ? /*#__PURE__*/React.createElement("div", {
       className: style.yearContainer
     }, /*#__PURE__*/React.createElement(YearView, {
       onSelectYear: this.handleSelectYear,
@@ -799,4 +893,34 @@ DateTime.defaultProps = {
   i18nKeys: {},
   is24Hour: false,
   isDefaultPosition: false
-};
+};
+export class Span extends React.Component {
+  constructor(props) {
+    super(props);
+    this.modifyCalendarChild = this.modifyCalendarChild.bind(this);
+  }
+
+  modifyCalendarChild() {
+    const {
+      modifyCalendar,
+      type
+    } = this.props;
+    modifyCalendar(type);
+  }
+
+  render() {
+    const {
+      dataTitle,
+      children,
+      dataId,
+      className = ''
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      "data-title": dataTitle,
+      dataId: dataId,
+      className: `${style.thArrow} ${style.grid} ${className}`,
+      onClick: this.modifyCalendarChild
+    }, children);
+  }
+
+}

package/es/DateTime/DateTime.module.css

@@ -1,27 +1,23 @@
 .semibold {
   font-family: var(--zd_semibold);
 }
-[dir=ltr] .boxPadding {
+.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 {
-  font-size: var(--zd_font_size16);
-  composes: offSelection from '../common/common.module.css';
   border-radius: 3px;
   background-color: var(--zdt_datetime_default_bg);
+  font-size: var(--zd_font_size16);
+  composes: offSelection from '../common/common.module.css';
 }
 .header {
   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 {
@@ -39,25 +35,17 @@
 .thArrow,
 .datesStr {
   font-size: var(--zd_font_size13);
-}
-.thArrow, .datesStr {
   cursor: pointer;
 }
 .thArrow:hover,
 .datesStr:hover {
   color: var(--zdt_datetime_datestr_text);
-}
-.thArrow:hover, .datesStr:hover {
   background: var(--zdt_datetime_datestr_hover_bg);
 }
 
-[dir=ltr] .navigation {
+.navigation {
   margin-left: var(--zd_size2);
 }
-
-[dir=rtl] .navigation {
-  margin-right: var(--zd_size2);
-}
 .thMonYear {
   font-size: var(--zd_font_size13);
   line-height: var(--zd_size24);
@@ -73,9 +61,9 @@
 }
 .days {
   min-height: var(--zd_size36);
+  padding-top: var(--zd_size7);
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7);
 }
 .daysStr {
   font-size: var(--zd_font_size10);
@@ -85,8 +73,8 @@
 }
 .dateRow {
   height: var(--zd_size28);
-  composes: alignBetween from '../common/common.module.css';
   margin: var(--zd_size1) 0 var(--zd_size5);
+  composes: alignBetween from '../common/common.module.css';
 }
 .dateRow:last-child {
   margin-bottom: 0;
@@ -105,11 +93,8 @@
 
 .today,
 .today:hover {
-  color: var(--zdt_datetime_today_text);
-}
-
-.today, .today:hover {
   background-color: var(--zdt_datetime_today_bg);
+  color: var(--zdt_datetime_today_text);
   border-radius: 50%;
 }
 
@@ -123,8 +108,8 @@
 .dropDown {
   width: var(--zd_size60);
   display: inline-block;
-  position: relative;
   margin: 0 var(--zd_size4);
+  position: relative;
 }
 .footer {
   margin-top: var(--zd_size10);
@@ -140,15 +125,8 @@
 }
 
 .downArrow {
-  color: var(--zdt_datetime_daystr_text);
-}
-
-[dir=ltr] .downArrow {
   margin-left: var(--zd_size2);
-}
-
-[dir=rtl] .downArrow {
-  margin-right: var(--zd_size2);
+  color: var(--zdt_datetime_daystr_text);
 }
 .dateText {
   cursor: pointer;
@@ -161,22 +139,17 @@
   font-size: var(--zd_font_size11);
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
+  margin-top: var(--zd_size14);
   composes: semibold;
   display: block;
-  margin-top: var(--zd_size14);
 }
 .yearContainer {
   position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
-[dir=ltr] .yearContainer {
-  left: 0;
-}
-[dir=rtl] .yearContainer {
-  right: 0;
-}
 .subContainer {
   position: relative;
 }

package/es/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;
 }
 .readOnly,
@@ -19,16 +21,10 @@
 .inputLine {
   position: absolute;
   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;
+  border-bottom: 1px solid var(--zdt_datewidget_input_border);
+  transition: border var(--zd_transition2) linear 0s;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);

package/es/DateTime/YearView.module.css

@@ -1,30 +1,25 @@
-[dir=ltr] .boxPadding {
+.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: var(--zd_size26);
-  height: var(--zd_size26);
   text-align: center;
   margin: 0 0 var(--zd_size1);
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
+  font-size: var(--zd_font_size12);
+  line-height: var(--zd_size26);
+  height: var(--zd_size26);
 }
 .month:hover {
   background-color: var(--zdt_yearview_month_hover_bg);
 }
 .currentMonth,
 .currentMonth:hover {
-  color: var(--zdt_yearview_currentmonth_text);
-}
-.currentMonth, .currentMonth:hover {
   background-color: var(--zdt_yearview_currentmonth_bg);
+  color: var(--zdt_yearview_currentmonth_text);
 }
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
@@ -53,13 +48,8 @@
   color: var(--zdt_yearview_year_hover_text);
 }
 .arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-[dir=ltr] .arrowActive {
   transform: rotate(180deg);
-}
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
+  color: var(--zdt_yearview_year_hover_text);
 }
 .container {
   height: 100%;

package/es/DateTime/dateFormatUtils/dateFormat.js

@@ -11,8 +11,8 @@ import { getIsEmptyValue } from '../../utils/Common';
 import { formatDate } from '../../utils/datetime/common';
 /** * Constants ** */
 
-import { defaultFormat, supportedPatterns // patternChangeStr,
-, patternSplitStr, INCONSTANT, flags } from '../constants';
+import { defaultFormat, supportedPatterns, // patternChangeStr,
+patternSplitStr, INCONSTANT, flags } from '../constants';
 
 function getDateFormatString(dateFormatArr = [], datePatternArr = []) {
   return dateFormatArr.reduce((res, dateStr, index) => {

package/es/DropBox/DropBox.module.css

@@ -28,7 +28,8 @@
   padding: var(--dropbox_padding);
   box-shadow: var(--dropbox_box_shadow);
 }
-.defaultPalette, .darkPalette {
+.defaultPalette,
+.darkPalette {
   background-color: var(--dropbox_bg_color);
 }
 .radius {
@@ -83,13 +84,11 @@
 .bottom_shadow {
   --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
-[dir=ltr] .defaultShadow {
+.defaultShadow {
   box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
-[dir=rtl] .defaultShadow {
-  box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
-}
 /* box direction styles */
+/*rtl:begin:ignore*/
 .topStart {
   bottom: 100%;
   right: 0;
@@ -273,6 +272,7 @@
   bottom: var(--zd_size28);
   transform: rotate(-90deg) translateX(-50%);
 }
+/*rtl:end:ignore*/
 .hidden {
   visibility: hidden;
   opacity: 0;
@@ -282,10 +282,7 @@
 .hidden .subContainer {
   box-shadow: none;
 }
-[dir=ltr] .animationBasic {
-  animation-duration: 0.2s;
-}
-[dir=rtl] .animationBasic {
+.animationBasic {
   animation-duration: 0.2s;
 }
 .fadeIn {
@@ -294,24 +291,11 @@
 }
 .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: 0.3s;
-  animation-name: slideUp;
-  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
-}
-[dir=rtl] .slideUp {
   animation-duration: 0.3s;
   animation-name: slideUp;
   animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
@@ -341,23 +325,16 @@
 .responsive {
   position: absolute;
   bottom: 0;
+  left: 0;
   width: 100%;
   max-height: 90%;
 }
 
-[dir=ltr] .responsive {
-  left: 0;
-}
-
-[dir=rtl] .responsive {
-  right: 0;
-}
-
 .closeBar {
   height: 6px;
-  width: 20%;
   border-radius: 5px;
   background-color: var(--dropbox_mob_close_bg_color);
+  width: 20%;
   cursor: pointer;
   margin: 0 auto var(--zd_size10);
 }
@@ -369,31 +346,18 @@
 }
 .activateInDelay {
   composes: modeForward from '../common/animation.module.css';
-  pointer-events: none;
-}
-[dir=ltr] .activateInDelay {
-  animation-duration: 0.1s;
-  animation-delay: 0.2s;
-  animation-name: activateInDelay;
-}
-[dir=rtl] .activateInDelay {
   animation-duration: 0.1s;
   animation-delay: 0.2s;
+  pointer-events: none;
   animation-name: activateInDelay;
 }
 .freezeLayer {
   position: absolute;
   top: 0;
-  bottom: 0;
-  composes: activateInDelay;
-}
-[dir=ltr] .freezeLayer {
   left: 0;
+  bottom: 0;
   right: 0;
-}
-[dir=rtl] .freezeLayer {
-  right: 0;
-  left: 0;
+  composes: activateInDelay;
 }
 .freeze {
   composes: varClass;

package/es/DropDown/DropDownHeading.module.css

@@ -33,14 +33,10 @@
 .light {
   composes: default;
 }
-.light::after, .dark::after {
-  background-color: var(--dropdownheading_underline_bg_color);
-}
-[dir=ltr] .light::after, [dir=ltr] .dark::after {
+.light::after,
+.dark::after {
   left: var(--dropdownheading_underline_left);
-}
-[dir=rtl] .light::after, [dir=rtl] .dark::after {
-  right: var(--dropdownheading_underline_left);
+  background-color: var(--dropdownheading_underline_bg_color);
 }
 
 .dark {

package/es/DropDown/DropDownItem.module.css

@@ -6,32 +6,24 @@
 
   /* dropdownitem user default variables */
   --dropdownitem-user-width: var(--zd_size42);
+  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
   --dropdownitem-user-border-style: solid;
   --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
   --dropdownitem-user-cursor: pointer;
-}[dir=ltr] .varClass {
-  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
-}[dir=rtl] .varClass {
-  --dropdownitem-user-border-width: 0 1px 0 0;
 }
 .list {
   composes: varClass;
   composes: dflex alignVertical from '../common/common.module.css';
   position: relative;
+  padding: var(--dropdownitem-padding);
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13);
-  padding: var(--dropdownitem-padding);
+  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
   cursor: pointer;
   background-color: var(--dropdownitem-bg-color);
 }
-[dir=ltr] .list {
-  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .list {
-  border-width: 0 1px 0 0;
-}
 
 .listActive {
   --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
@@ -41,27 +33,16 @@
   --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
 }
 
-[dir=ltr] .padding {
+.padding {
   --dropdownitem-padding: 0 var(--zd_size50) 0 0/*rtl: 0 0 0 var(--zd_size50)*/;
 }
 
-[dir=rtl] .padding {
-  --dropdownitem-padding: 0 0 0 var(--zd_size50);
-}
-
 .children {
+  margin-right: var(--zd_size10);
   display: inline-block;
   font-size: 0;
 }
 
-[dir=ltr] .children {
-  margin-right: var(--zd_size10);
-}
-
-[dir=rtl] .children {
-  margin-left: var(--zd_size10);
-}
-
 .value {
   composes: dotted flexgrow from '../common/common.module.css';
 }
@@ -70,6 +51,7 @@
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
   top: 0;
+  right: 0;
   bottom: 0;
   opacity: 0;
   visibility: hidden;
@@ -80,14 +62,6 @@
   cursor: var(--dropdownitem-user-cursor);
 }
 
-[dir=ltr] .user {
-  right: 0;
-}
-
-[dir=rtl] .user {
-  left: 0;
-}
-
 .list:hover .user {
   opacity: 1;
   visibility: visible;