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

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,81 +1,99 @@
-[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: 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;
-}
-.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);
-}
-.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);
-}
-.arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-[dir=ltr] .arrowActive {
-  transform: rotate(180deg);
-}
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
-}
-.container {
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  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;
-}
+[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: 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;
+}
+
+.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);
+}
+
+.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);
+}
+
+[dir=rtl] .arrowActive {
+  transform: rotate(-180deg);
+}
+
+.container {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  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,6 +9,7 @@ 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);
@@ -59,7 +60,8 @@ export class DropBoxElement extends React.Component {
       positionsOffset,
       targetOffset,
       zIndexStyle,
-      customStyle
+      customStyle,
+      subContainerRef
     } = this.props;
     let {
       isReducedMotion
@@ -146,9 +148,11 @@ 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`
+      "data-id": `${dataId}_subcontainer`,
+      ref: subContainerRef
     }, isModel ? /*#__PURE__*/React.createElement("div", {
       className: style.closeBar
     }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
@@ -165,6 +169,7 @@ 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();
@@ -176,7 +181,9 @@ export default class DropBox extends React.Component {
       isActive,
       isAbsolutePositioningNeeded,
       needAutoZindex,
-      isRestrictScroll
+      isRestrictScroll,
+      needFocusScope,
+      onClose
     } = this.props;
     let windowWidth,
       mobileWidth = getLibraryConfig('mobileWidth'),
@@ -193,7 +200,20 @@ export default class DropBox extends React.Component {
     const {
       direction
     } = this.context || {};
-    const dropBoxEle = /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    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({
       isModel: isModel,
       direction: direction
     }, this.props, {