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

package/es/DateTime/DateTime.module.css

@@ -2,30 +2,25 @@
   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 {
@@ -46,34 +41,25 @@
 .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 {
+.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;
+  display: initial
 }
 
 .dateContainer {
@@ -87,9 +73,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 {
@@ -101,8 +87,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 {
@@ -127,11 +113,8 @@
 .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%;
 }
 
@@ -157,8 +140,8 @@
 .dropDown {
   width: var(--zd_size60);
   display: inline-block;
-  position: relative;
   margin: 0 var(--zd_size4);
+  position: relative;
 }
 
 .footer {
@@ -177,15 +160,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 {
@@ -201,26 +177,19 @@
   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/DateTimePopupHeader.js

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

package/es/DateTime/DateWidget.js

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

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;
 }
 .enabled {
@@ -15,16 +17,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/DaysRow.js

@@ -11,7 +11,9 @@ export default class DaysRow extends PureComponent {
   render() {
     const {
       dayNames,
-      dayNamesShort
+      dayNamesShort,
+      a11y,
+      ariaLabel
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -20,7 +22,8 @@ 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
+      "data-title": dayName,
+      "aria-label": dayName
     }, dayNamesShort[index])));
   }
 }

package/es/DateTime/YearView.js

@@ -7,6 +7,7 @@ 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';
 
@@ -50,9 +51,15 @@ class Year extends React.PureComponent {
       alignBox: "row",
       align: "vertical"
     }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.yearText
-    }, year), /*#__PURE__*/React.createElement(Icon, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Heading, {
+      className: style.yearText,
+      title: year,
+      a11y: {
+        tabindex: '0'
+      },
+      tagName: "h4"
+    })), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowDownSingle",
       size: "7",
       isBold: true,
@@ -85,7 +92,8 @@ class Month extends React.PureComponent {
       dataId: `month_${month}`,
       className: `${style.month} ${isActive ? style.currentMonth : ''}`,
       onClick: this.handleClick,
-      "data-title": hoverText
+      "data-title": hoverText,
+      "aria-label": month
     }, displayText);
   }
 }

package/es/DateTime/YearView.module.css

@@ -1,67 +1,70 @@
-[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);
-  color: var(--zdt_yearview_month_text);
   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);
+  color: var(--zdt_yearview_month_text);
 }
+
 .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);
 }
+
 .year {
   padding: var(--zd_size7) 0;
   cursor: pointer;
 }
+
 .year:hover .yearText,
 .year:hover .arrow {
   color: var(--zdt_yearview_year_hover_text);
 }
+
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
   font-size: var(--zd_font_size11);
 }
+
 .arrow {
   color: var(--zdt_yearview_yeartext_text);
   transition: transform var(--zd_transition1);
 }
+
 .isActive {
   cursor: default;
 }
+
 .isActive .yearText {
   font-family: var(--zd_semibold);
   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_yearview_year_hover_text);
 }
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
-}
+
 .container {
   height: 100%;
   overflow-y: auto;
@@ -69,13 +72,15 @@
   composes: boxPadding;
   background-color: var(--zdt_yearview_default_bg);
 }
+
 .yearContainer {
   height: var(--zd_size135);
   overflow: hidden;
   transition: height var(--zd_transition1);
   padding-bottom: var(--zd_size5);
 }
+
 .toggleYear {
   height: 0;
   padding: 0;
-}
+}

package/es/DropBox/DropBox.js

@@ -9,7 +9,6 @@ import { positionMapping } from './DropBoxPositionMapping.json';
 import { getZIndex } from '../Provider/ZindexProvider';
 import { getLibraryConfig } from '../Provider/Config';
 import LibraryContext from '../Provider/LibraryContextInit';
-import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export class DropBoxElement extends React.Component {
   constructor(props) {
     super(props);
@@ -60,8 +59,7 @@ export class DropBoxElement extends React.Component {
       positionsOffset,
       targetOffset,
       zIndexStyle,
-      customStyle,
-      subContainerRef
+      customStyle
     } = this.props;
     let {
       isReducedMotion
@@ -148,11 +146,9 @@ export class DropBoxElement extends React.Component {
       "aria-labelledby": ariaLabelledby,
       tabIndex: tabIndex
     }, /*#__PURE__*/React.createElement("div", {
-      tabIndex: "-1",
       className: `${subContainerClass} ${style[`${palette}Palette`]}`,
       onClick: onClick,
-      "data-id": `${dataId}_subcontainer`,
-      ref: subContainerRef
+      "data-id": `${dataId}_subcontainer`
     }, isModel ? /*#__PURE__*/React.createElement("div", {
       className: style.closeBar
     }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
@@ -169,7 +165,6 @@ export default class DropBox extends React.Component {
     super(props);
     this.getNextIndex = getZIndex(this);
     this.onFreezeClick = this.onFreezeClick.bind(this);
-    this.createRef = /*#__PURE__*/React.createRef();
   }
   onFreezeClick(e) {
     e && e.stopPropagation();
@@ -181,9 +176,7 @@ export default class DropBox extends React.Component {
       isActive,
       isAbsolutePositioningNeeded,
       needAutoZindex,
-      isRestrictScroll,
-      needFocusScope,
-      onClose
+      isRestrictScroll
     } = this.props;
     let windowWidth,
       mobileWidth = getLibraryConfig('mobileWidth'),
@@ -200,20 +193,7 @@ export default class DropBox extends React.Component {
     const {
       direction
     } = this.context || {};
-    const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
-      focusClose: onClose,
-      elementRef: this.createRef,
-      autoFocus: true,
-      restoreFocus: true,
-      focusArrowLoop: true,
-      enableEnterAction: true
-    }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
-      isModel: isModel,
-      direction: direction
-    }, this.props, {
-      zIndexStyle: zIndexStyle,
-      subContainerRef: this.createRef
-    }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    const dropBoxEle = /*#__PURE__*/React.createElement(DropBoxElement, _extends({
       isModel: isModel,
       direction: direction
     }, this.props, {

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: var(--zd_transition2);
-}
-[dir=rtl] .animationBasic {
+.animationBasic {
   animation-duration: var(--zd_transition2);
 }
 .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: 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);
@@ -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: var(--zd_transition1);
-  animation-delay: var(--zd_transition2);
-  animation-name: activateInDelay;
-}
-[dir=rtl] .activateInDelay {
   animation-duration: var(--zd_transition1);
   animation-delay: var(--zd_transition2);
+  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/DropBox/props/defaultProps.js

@@ -16,6 +16,5 @@ export const defaultProps = {
   palette: 'default',
   needAutoZindex: true,
   portalId: 'portal1',
-  isRestrictScroll: false,
-  needFocusScope: false
+  isRestrictScroll: false
 };

package/es/DropBox/props/propTypes.js

@@ -22,7 +22,6 @@ export const propTypes = {
   left: PropTypes.number,
   needResponsive: PropTypes.bool,
   onClick: PropTypes.func,
-  needFocusScope: PropTypes.bool,
   right: PropTypes.number,
   size: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
   top: PropTypes.number,

package/es/DropDown/DropDownHeading.js

@@ -15,13 +15,15 @@ export default class DropDownHeading extends React.Component {
     } = this.props;
     let {
       role,
-      ariaLabelledby
+      ariaLabelledby,
+      ariaLabel
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style[palette]} ${customClass}`,
       "data-title": title,
       role: role,
       "aria-labelledby": ariaLabelledby,
+      "aria-label": ariaLabel,
       id: htmlId
       // tabindex='0'
     }, text, children);