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

package/lib/DateTime/YearView.js

@@ -11,6 +11,7 @@ var _defaultProps = require("./props/defaultProps");
 var _virtualizer = require("@zohodesk/virtualizer");
 var _Layout = require("../Layout");
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _Heading = _interopRequireDefault(require("../Heading/Heading"));
 var _YearViewModule = _interopRequireDefault(require("./YearView.module.css"));
 var _dateFormatUtils = require("./dateFormatUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -68,9 +69,15 @@ var Year = /*#__PURE__*/function (_React$PureComponent) {
         alignBox: "row",
         align: "vertical"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true,
-        className: _YearViewModule["default"].yearText
-      }, year), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        flexible: true
+      }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+        className: _YearViewModule["default"].yearText,
+        title: year,
+        a11y: {
+          tabindex: '0'
+        },
+        tagName: "h4"
+      })), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-arrowDownSingle",
         size: "7",
         isBold: true,
@@ -112,7 +119,8 @@ var Month = /*#__PURE__*/function (_React$PureComponent2) {
         dataId: "month_".concat(month),
         className: "".concat(_YearViewModule["default"].month, " ").concat(isActive ? _YearViewModule["default"].currentMonth : ''),
         onClick: this.handleClick,
-        "data-title": hoverText
+        "data-title": hoverText,
+        "aria-label": month
       }, displayText);
     }
   }]);

package/lib/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/lib/DropBox/DropBox.js

@@ -15,6 +15,7 @@ var _DropBoxPositionMapping = require("./DropBoxPositionMapping.json");
 var _ZindexProvider = require("../Provider/ZindexProvider");
 var _Config = require("../Provider/Config");
 var _LibraryContextInit = _interopRequireDefault(require("../Provider/LibraryContextInit"));
+var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
@@ -87,7 +88,8 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
         positionsOffset = _this$props2.positionsOffset,
         targetOffset = _this$props2.targetOffset,
         zIndexStyle = _this$props2.zIndexStyle,
-        customStyle = _this$props2.customStyle;
+        customStyle = _this$props2.customStyle,
+        subContainerRef = _this$props2.subContainerRef;
       var _ref = this.context || {},
         isReducedMotion = _ref.isReducedMotion;
       if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
@@ -172,9 +174,11 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
         "aria-labelledby": ariaLabelledby,
         tabIndex: tabIndex
       }, /*#__PURE__*/_react["default"].createElement("div", {
+        tabIndex: "-1",
         className: "".concat(subContainerClass, " ").concat(_DropBoxModule["default"]["".concat(palette, "Palette")]),
         onClick: onClick,
-        "data-id": "".concat(dataId, "_subcontainer")
+        "data-id": "".concat(dataId, "_subcontainer"),
+        ref: subContainerRef
       }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _DropBoxModule["default"].closeBar
       }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
@@ -198,6 +202,7 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
     _this2 = _super2.call(this, props);
     _this2.getNextIndex = (0, _ZindexProvider.getZIndex)(_assertThisInitialized(_this2));
     _this2.onFreezeClick = _this2.onFreezeClick.bind(_assertThisInitialized(_this2));
+    _this2.createRef = /*#__PURE__*/_react["default"].createRef();
     return _this2;
   }
   _createClass(DropBox, [{
@@ -214,7 +219,9 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
         isActive = _this$props3.isActive,
         isAbsolutePositioningNeeded = _this$props3.isAbsolutePositioningNeeded,
         needAutoZindex = _this$props3.needAutoZindex,
-        isRestrictScroll = _this$props3.isRestrictScroll;
+        isRestrictScroll = _this$props3.isRestrictScroll,
+        needFocusScope = _this$props3.needFocusScope,
+        onClose = _this$props3.onClose;
       var windowWidth,
         mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth'),
         isModel = false;
@@ -229,7 +236,20 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
       } : {};
       var _ref2 = this.context || {},
         direction = _ref2.direction;
-      var dropBoxEle = /*#__PURE__*/_react["default"].createElement(DropBoxElement, _extends({
+      var dropBoxEle = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
+        focusClose: onClose,
+        elementRef: this.createRef,
+        autoFocus: true,
+        restoreFocus: true,
+        focusArrowLoop: true,
+        enableEnterAction: true
+      }, /*#__PURE__*/_react["default"].createElement(DropBoxElement, _extends({
+        isModel: isModel,
+        direction: direction
+      }, this.props, {
+        zIndexStyle: zIndexStyle,
+        subContainerRef: this.createRef
+      }))) : /*#__PURE__*/_react["default"].createElement(DropBoxElement, _extends({
         isModel: isModel,
         direction: direction
       }, this.props, {