@zohodesk/components 1.0.0-temp-107 → 1.0.0-temp-108

package/es/DateTime/DateTime.module.css

@@ -1,202 +1,233 @@
-.semibold {
-  font-family: var(--zd_semibold);
-}
-
-.boxPadding {
-  padding-right: var(--zd_size19);
-  padding-left: var(--zd_size19);
-}
-
-.container {
-  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);
-  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 {
-  font-family: var(--zd_regular);
-}
-
-.grid {
-  width: var(--zd_size28);
-  height: var(--zd_size28);
-  line-height: var(--zd_size18);
-  text-align: center;
-  padding: var(--zd_size4) 0;
-  border-radius: 50%;
-  border: 1px solid transparent;
-}
-
-.thArrow,
-.datesStr {
-  font-size: var(--zd_font_size13);
-  color: var(--zdt_datetime_datestr_text);
-  cursor: pointer;
-}
-
-.thArrow:hover,
-.datesStr:hover {
-  color: var(--zdt_datetime_datestr_text);
-  background: var(--zdt_datetime_datestr_hover_bg);
-}
-
-.navigation {
-  margin-left: var(--zd_size2);
-}
-
-.thMonYear {
-  font-size: var(--zd_font_size13);
-  line-height: var(--zd_size24);
-  color: var(--zdt_datetime_datestr_text);
-  composes: semibold;
-  display: initial
-}
-
-.dateContainer {
-  margin: 0 var(--zd_size19) 0 var(--zd_size19);
-  padding: var(--zd_size6) 0 var(--zd_size10) 0;
-}
-
-.separator {
-  border-bottom: 1px dotted var(--zdt_datetime_separator_border);
-}
-
-.days {
-  min-height: var(--zd_size36);
-  padding-top: var(--zd_size7);
-  composes: boxPadding;
-  composes: alignBetween from '../common/common.module.css';
-}
-
-.daysStr {
-  font-size: var(--zd_font_size10);
-  color: var(--zdt_datetime_daystr_text);
-  text-transform: uppercase;
-  composes: semibold;
-}
-
-.dateRow {
-  height: var(--zd_size28);
-  margin: var(--zd_size1) 0 var(--zd_size5);
-  composes: alignBetween from '../common/common.module.css';
-}
-
-.dateRow:last-child {
-  margin-bottom: 0;
-}
-
-.sunday,
-.sunday:hover,
-.invalidDate.sunday:hover {
-  color: var(--zdt_datetime_invalid_hover_text);
-}
-
-.invalidDate {
-  color: var(--zdt_datetime_invalid_text);
-}
-
-.invalidDate.sunday {
-  color: var(--zdt_datetime_invaliddate_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%;
-}
-
-.today {
-  border: 1px solid var(--zdt_datetime_today_border);
-  border-radius: 50%;
-}
-
-.today:hover {
-  border: 1px solid var(--zdt_datetime_today_border);
-  background-color: var(--zdt_datetime_datestr_hover_bg);
-}
-
-.timesection {
-  padding-top: var(--zd_size5);
-  padding-bottom: var(--zd_size10);
-}
-
-.dropDownContainer {
-  padding: 0 var(--zd_size5);
-}
-
-.dropDown {
-  width: var(--zd_size60);
-  display: inline-block;
-  margin: 0 var(--zd_size4);
-  position: relative;
-}
-
-.footer {
-  margin-top: var(--zd_size10);
-  padding-bottom: var(--zd_size12);
-}
-
-.timesection,
-.footer {
-  composes: boxPadding;
-}
-
-.space {
-  display: inline-block;
-  width: var(--zd_size15);
-}
-
-.downArrow {
-  margin-left: var(--zd_size2);
-  color: var(--zdt_datetime_daystr_text);
-}
-
-.dateText {
-  cursor: pointer;
-}
-
-.dateText:hover .downArrow {
-  color: var(--zdt_datetime_datestr_text);
-}
-
-.text {
-  composes: boxPadding;
-  font-size: var(--zd_font_size11);
-  text-transform: uppercase;
-  color: var(--zdt_datetime_text);
-  margin-top: var(--zd_size14);
-  composes: semibold;
-  display: block;
-}
-
-.yearContainer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.subContainer {
-  position: relative;
-}
-
-.dropBox {
-  width: 100%;
-  border-radius: 3px;
-  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
-  background-color: var(--zdt_dropbox_default_bg);
+.semibold {
+  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);
+}
+
+.container {
+  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: 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);
+}
+
+.datesStr {
+  font-family: var(--zd_regular);
+}
+
+.grid {
+  width: var(--zd_size28);
+  height: var(--zd_size28);
+  line-height: var(--zd_size18);
+  text-align: center;
+  padding: var(--zd_size4) 0;
+  border-radius: 50%;
+  border: 1px solid transparent;
+}
+
+.thArrow,
+.datesStr {
+  font-size: var(--zd_font_size13);
+  color: var(--zdt_datetime_datestr_text);
+}
+
+.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 {
+  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);
+  color: var(--zdt_datetime_datestr_text);
+  composes: semibold;
+}
+
+.dateContainer {
+  margin: 0 var(--zd_size19) 0 var(--zd_size19);
+  padding: var(--zd_size6) 0 var(--zd_size10) 0;
+}
+
+.separator {
+  border-bottom: 1px dotted var(--zdt_datetime_separator_border);
+}
+
+.days {
+  min-height: var(--zd_size36);
+  composes: boxPadding;
+  composes: alignBetween from '../common/common.module.css';
+  padding-top: var(--zd_size7);
+}
+
+.daysStr {
+  font-size: var(--zd_font_size10);
+  color: var(--zdt_datetime_daystr_text);
+  text-transform: uppercase;
+  composes: semibold;
+}
+
+.dateRow {
+  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;
+}
+
+.sunday,
+.sunday:hover,
+.invalidDate.sunday:hover {
+  color: var(--zdt_datetime_invalid_hover_text);
+}
+
+.invalidDate {
+  color: var(--zdt_datetime_invalid_text);
+}
+
+.invalidDate.sunday {
+  color: var(--zdt_datetime_invaliddate_text);
+}
+
+.active,
+.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);
+  border-radius: 50%;
+}
+
+.today {
+  border: 1px solid var(--zdt_datetime_today_border);
+  border-radius: 50%;
+}
+
+.today:hover {
+  border: 1px solid var(--zdt_datetime_today_border);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
+}
+
+.timesection {
+  padding-top: var(--zd_size5);
+  padding-bottom: var(--zd_size10);
+}
+
+.dropDownContainer {
+  padding: 0 var(--zd_size5);
+}
+
+.dropDown {
+  width: var(--zd_size60);
+  display: inline-block;
+  position: relative;
+  margin: 0 var(--zd_size4);
+}
+
+.footer {
+  margin-top: var(--zd_size10);
+  padding-bottom: var(--zd_size12);
+}
+
+.timesection,
+.footer {
+  composes: boxPadding;
+}
+
+.space {
+  display: inline-block;
+  width: var(--zd_size15);
+}
+
+.downArrow {
+  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);
+}
+
+.text {
+  composes: boxPadding;
+  font-size: var(--zd_font_size11);
+  text-transform: uppercase;
+  color: var(--zdt_datetime_text);
+  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;
+}
+
+.subContainer {
+  position: relative;
+}
+
+.dropBox {
+  width: 100%;
+  border-radius: 3px;
+  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  background-color: var(--zdt_dropbox_default_bg);
 }

package/es/DateTime/DateTimePopupHeader.js

@@ -6,7 +6,6 @@ import React, { PureComponent } from 'react';
 /** ** Components *** */
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
-import Heading from '../Heading/Heading';
 
 /** ** CSS *** */
 import style from './DateTime.module.css';
@@ -27,16 +26,13 @@ class Span extends React.PureComponent {
       dataTitle,
       children,
       dataId,
-      className = '',
-      ariaLabel
+      className = ''
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       "data-title": dataTitle,
       dataId: dataId,
       className: `${style.thArrow} ${style.grid} ${className}`,
-      onClick: this.modifyCalendarChild,
-      "aria-label": ariaLabel,
-      tabindex: "0"
+      onClick: this.modifyCalendarChild
     }, children);
   }
 }
@@ -48,9 +44,7 @@ export default class DateTimePopupHeader extends PureComponent {
       isYearView,
       prevMonthTitleText,
       nextMonthTitleText,
-      onModifyCalendar,
-      a11y,
-      ariaLabel
+      onModifyCalendar
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -60,26 +54,19 @@ export default class DateTimePopupHeader extends PureComponent {
       className: style.dateText,
       dataId: "selectYear",
       onClick: onOpenYearView
-    }, /*#__PURE__*/React.createElement(Heading, {
-      className: style.thMonYear,
-      title: showMonthTxt,
-      tagName: "h2",
-      a11y: {
-        tabindex: '0'
-      }
-    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__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, {
+    })), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }), !isYearView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Span, {
       dataTitle: prevMonthTitleText,
       dataId: "prevMonth",
       modifyCalendar: onModifyCalendar,
-      type: "previousMonth",
-      ariaLabel: "prevMonth",
-      tabindex: "0"
+      type: "previousMonth"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowLeft3",
       isBold: true
@@ -88,9 +75,7 @@ export default class DateTimePopupHeader extends PureComponent {
       dataId: "nextMonth",
       modifyCalendar: onModifyCalendar,
       type: "nextMonth",
-      className: style.navigation,
-      ariaLabel: "nextMonth",
-      tabindex: "0"
+      className: style.navigation
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowRight3",
       isBold: true

package/es/DateTime/DateWidget.js

@@ -919,8 +919,7 @@ class DateWidgetComponent extends React.Component {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId,
-      a11y
+      dropBoxPortalId
     } = this.props;
     const {
       selected: value = '',
@@ -970,8 +969,7 @@ class DateWidgetComponent extends React.Component {
       },
       iconOnHover: iconOnHover,
       isFocus: isPopupReady,
-      autoComplete: false,
-      a11y: a11y
+      autoComplete: false
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick

package/es/DateTime/DateWidget.module.css

@@ -1,34 +1,38 @@
-/* $Id */
-.container {
-  position: relative;
-  composes: offSelection from '../common/common.module.css';
-}
-.readOnly,
-.readOnly > input,
-.disabled {
-  cursor: not-allowed;
-}
-.enabled {
-  cursor: pointer;
-}
-.textBox {
-  position: relative;
-}
-.inputLine {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 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);
-}
-.textBoxFocus .inputLine {
-  border-bottom-color: var(--zdt_datewidget_textboxfocus_border);
-}
-
-.placeHolder input {
-  color: var(--zdt_datewidget_placeholder_text);
-}
+/* $Id */
+.container {
+  position: relative;
+  composes: offSelection from '../common/common.module.css';
+}
+.readOnly, .readOnly > input, .disabled {
+  cursor: not-allowed;
+}
+.enabled {
+  cursor: pointer;
+}
+.textBox {
+  position: relative;
+}
+.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;
+}
+.enabled:hover .inputLine {
+  border-bottom-color: var(--zdt_datewidget_enabled_border);
+}
+.textBoxFocus .inputLine {
+  border-bottom-color: var(--zdt_datewidget_textboxfocus_border);
+}
+
+.placeHolder input {
+  color: var(--zdt_datewidget_placeholder_text);
+}

package/es/DateTime/DaysRow.js

@@ -11,9 +11,7 @@ export default class DaysRow extends PureComponent {
   render() {
     const {
       dayNames,
-      dayNamesShort,
-      a11y,
-      ariaLabel
+      dayNamesShort
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -22,8 +20,7 @@ export default class DaysRow extends PureComponent {
     }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
       key: dayName,
       className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
-      "data-title": dayName,
-      "aria-label": dayName
+      "data-title": dayName
     }, dayNamesShort[index])));
   }
 }

package/es/DateTime/YearView.js

@@ -7,7 +7,6 @@ import { YearView_defaultProps } from './props/defaultProps';
 import { Virtualizer } from '@zohodesk/virtualizer';
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
-import Heading from '../Heading/Heading';
 /**** CSS ****/
 import style from './YearView.module.css';
 
@@ -51,15 +50,9 @@ class Year extends React.PureComponent {
       alignBox: "row",
       align: "vertical"
     }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Heading, {
-      className: style.yearText,
-      title: year,
-      a11y: {
-        tabindex: '0'
-      },
-      tagName: "h4"
-    })), /*#__PURE__*/React.createElement(Icon, {
+      flexible: true,
+      className: style.yearText
+    }, year), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowDownSingle",
       size: "7",
       isBold: true,
@@ -92,8 +85,7 @@ class Month extends React.PureComponent {
       dataId: `month_${month}`,
       className: `${style.month} ${isActive ? style.currentMonth : ''}`,
       onClick: this.handleClick,
-      "data-title": hoverText,
-      "aria-label": month
+      "data-title": hoverText
     }, displayText);
   }
 }