@uifabric/date-time - npm Package Compare versions

Comparing version 7.0.0-alpha004 to 7.0.0-alpha006

CHANGELOG.json

@@ -5,2 +5,38 @@ {
     {
+      "version": "0.3.5",
+      "tag": "@uifabric/date-time_v0.3.5",
+      "date": "Tue, 02 Apr 2019 00:38:14 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "fixing keros errors and some accessibility semantic issues with grids",
+            "author": "John Lorenz <[e-mail]>",
+            "commit": "ce9d7d57c847078fbc0c97deb89f1c71299739ff"
+          },
+          {
+            "comment": "Use ^ ranges instead of >=",
+            "author": "Elizabeth Craig <[e-mail]>",
+            "commit": "6a536804ce9cff3444e6f631925a30c58274d931"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `^6.45.1` to `^6.45.2`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `^6.35.2` to `^6.35.3`"
+          },
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `^6.164.0` to `^6.164.1`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `^6.13.0` to `^6.13.1`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/jest-serializer-merge-styles\" from `^6.0.7` to `^6.0.8`"
+          }
+        ]
+      }
+    },
+    {
       "version": "0.3.4",
@@ -7,0 +43,0 @@ "tag": "@uifabric/date-time_v0.3.4",

CHANGELOG.md

 # Change Log - @uifabric/date-time
 
-This log was last generated on Wed, 27 Mar 2019 12:34:02 GMT and should not be manually modified.
+This log was last generated on Tue, 02 Apr 2019 00:38:14 GMT and should not be manually modified.
 
+## 0.3.5
+Tue, 02 Apr 2019 00:38:14 GMT
+
+### Patches
+
+- fixing keros errors and some accessibility semantic issues with grids
+- Use ^ ranges instead of >=
+
 ## 0.3.4
@@ -6,0 +14,0 @@ Wed, 27 Mar 2019 12:34:02 GMT

dist/date-time.js

@@ -147,6 +147,6 @@ var FabricDateTime =
 /* harmony import */ var _uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../set-version/lib/index.js");
-// @uifabric/date-time@0.3.4
+// @uifabric/date-time@0.3.5
 // Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only.
 
-Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('@uifabric/date-time', '0.3.4');
+Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('@uifabric/date-time', '0.3.5');
 
@@ -153,0 +153,0 @@

dist/date-time.min.js

@@ -1,2 +0,2 @@
-var FabricDateTime=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);var n={};!function(e,t){if("undefined"!=typeof window){var r=window.__packages__=window.__packages__||{};r[e]&&n[e]||(n[e]=t,(r[e]=r[e]||[]).push(t))}}("@uifabric/date-time","0.3.4")}]);
+var FabricDateTime=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);var n={};!function(e,t){if("undefined"!=typeof window){var r=window.__packages__=window.__packages__||{};r[e]&&n[e]||(n[e]=t,(r[e]=r[e]||[]).push(t))}}("@uifabric/date-time","0.3.5")}]);
 //# sourceMappingURL=date-time.min.js.map

lib-amd/components/Calendar/Calendar.base.js

@@ -5,2 +5,14 @@ define(["require", "exports", "tslib", "react", "../../utilities/dateValues/DateValues", "./CalendarDay/CalendarDay", "./CalendarMonth/CalendarMonth", "@uifabric/utilities"], function (require, exports, tslib_1, React, DateValues_1, CalendarDay_1, CalendarMonth_1, utilities_1) {
     var getClassNames = utilities_1.classNamesFunction();
+    var DEFAULT_STRINGS = {
+        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+        goToToday: 'Go to today',
+        prevMonthAriaLabel: 'Go to previous month',
+        nextMonthAriaLabel: 'Go to next month',
+        prevYearAriaLabel: 'Go to previous year',
+        nextYearAriaLabel: 'Go to next year',
+        closeButtonAriaLabel: 'Close date picker'
+    };
     var leftArrow = 'Up';
@@ -36,4 +48,13 @@ var rightArrow = 'Down';
             _this._renderGoToTodayButton = function (classes) {
-                var _a = _this.props, showGoToToday = _a.showGoToToday, strings = _a.strings;
-                return (showGoToToday && (React.createElement("button", { className: utilities_1.css('js-goToday', classes.goTodayButton), onClick: _this._onGotoToday, onKeyDown: _this._onButtonKeyDown(_this._onGotoToday), type: "button" }, strings.goToToday)));
+                var _a = _this.props, showGoToToday = _a.showGoToToday, strings = _a.strings, today = _a.today;
+                var _b = _this.state, navigatedDayDate = _b.navigatedDayDate, navigatedMonthDate = _b.navigatedMonthDate;
+                var goTodayEnabled = showGoToToday;
+                if (goTodayEnabled && navigatedDayDate && navigatedMonthDate && today) {
+                    goTodayEnabled =
+                        navigatedDayDate.getFullYear() !== today.getFullYear() ||
+                            navigatedDayDate.getMonth() !== today.getMonth() ||
+                            navigatedMonthDate.getFullYear() !== today.getFullYear() ||
+                            navigatedMonthDate.getMonth() !== today.getMonth();
+                }
+                return (showGoToToday && (React.createElement("button", { className: utilities_1.css('js-goToday', classes.goTodayButton), onClick: _this._onGotoToday, onKeyDown: _this._onButtonKeyDown(_this._onGotoToday), type: "button", disabled: !goTodayEnabled }, strings.goToToday)));
             };
@@ -89,2 +110,3 @@ _this._navigateDayPickerDay = function (date) {
                 _this._navigateDayPickerDay(today);
+                _this.focus();
             };
@@ -192,3 +214,3 @@ _this._onButtonKeyDown = function (callback) {
             showGoToToday: true,
-            strings: null,
+            strings: DEFAULT_STRINGS,
             highlightCurrentMonth: false,
@@ -195,0 +217,0 @@ highlightSelectedMonth: false,

lib-amd/components/Calendar/Calendar.styles.js

@@ -59,2 +59,6 @@ define(["require", "exports", "@uifabric/styling"], function (require, exports, styling_1) {
                             color: palette.themeDark
+                        },
+                        '&:disabled': {
+                            color: palette.neutralTertiaryAlt,
+                            pointerEvents: 'none'
                         }
@@ -61,0 +65,0 @@ }

lib-amd/components/Calendar/Calendar.types.d.ts

@@ -99,3 +99,3 @@ import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
      */
-    strings: ICalendarStrings | null;
+    strings?: ICalendarStrings;
     /**
@@ -102,0 +102,0 @@ * Customize navigation icons using ICalendarIconStrings

lib-amd/components/Calendar/CalendarDay/CalendarDay.base.js

@@ -66,3 +66,4 @@ define(["require", "exports", "tslib", "react", "@uifabric/utilities", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/Icon", "../../../utilities/dateMath/DateMath", "../Calendar.types"], function (require, exports, tslib_1, React, utilities_1, FocusZone_1, Icon_1, DateMath_1, Calendar_types_1) {
                             _b[classNames.dayIsToday] = day.isToday,
-                            _b)), onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), onClick: day.isInBounds ? day.onSelected : undefined, "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), ref: function (element) { return _this._setDayRef(element, day, isNavigatedDate); }, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, type: "button" },
+                            _b)), onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), onClick: day.isInBounds ? day.onSelected : undefined, "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), ref: function (element) { return _this._setDayRef(element, day, isNavigatedDate); }, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, type: "button", role: "gridcell" // create grid structure
+                        , "aria-readonly": true },
                         React.createElement("span", { "aria-hidden": "true" }, dateTimeFormatter.formatDay(day.originalDate)))));
@@ -69,0 +70,0 @@ };

lib-amd/components/Calendar/CalendarMonth/CalendarMonth.base.js

 define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/utilities/dateMath/DateMath", "office-ui-fabric-react/lib/Icon", "./CalendarMonth.styles", "../Calendar.base", "@uifabric/utilities", "../CalendarYear/CalendarYear"], function (require, exports, tslib_1, React, Utilities_1, FocusZone_1, DateMath_1, Icon_1, CalendarMonth_styles_1, Calendar_base_1, utilities_1, CalendarYear_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    var MONTHS_PER_ROW = 4;
     var getClassNames = Utilities_1.classNamesFunction();
@@ -138,2 +139,6 @@ var CalendarMonthBase = /** @class */ (function (_super) {
             }
+            var rowIndexes = [];
+            for (var i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {
+                rowIndexes.push(i);
+            }
             return (React.createElement("div", { className: classNames.root },
@@ -156,16 +161,20 @@ React.createElement("div", { className: classNames.headerContainer },
                 React.createElement(FocusZone_1.FocusZone, null,
-                    React.createElement("div", { className: classNames.gridContainer, role: "grid" }, strings.shortMonths.map(function (month, index) {
-                        var _a;
-                        var indexedMonth = DateMath_1.setMonth(navigatedDate, index);
-                        var isCurrentMonth = _this._isCurrentMonth(index, navigatedDate.getFullYear(), today);
-                        var isNavigatedMonth = navigatedDate.getMonth() === index;
-                        var isSelectedMonth = selectedDate.getMonth() === index;
-                        var isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();
-                        var isInBounds = (minDate ? DateMath_1.compareDatePart(minDate, DateMath_1.getMonthEnd(indexedMonth)) < 1 : true) &&
-                            (maxDate ? DateMath_1.compareDatePart(DateMath_1.getMonthStart(indexedMonth), maxDate) < 1 : true);
-                        return (React.createElement("button", { ref: isNavigatedMonth ? _this._setNavigatedMonthRef : undefined, role: 'gridcell', className: Utilities_1.css(classNames.itemButton, (_a = {},
-                                _a[classNames.current] = highlightCurrentMonth && isCurrentMonth,
-                                _a[classNames.selected] = highlightSelectedMonth && isSelectedMonth && isSelectedYear,
-                                _a[classNames.disabled] = !isInBounds,
-                                _a)), disabled: !allFocusable && !isInBounds, key: index, onClick: isInBounds ? _this._selectMonthCallback(index) : undefined, onKeyDown: isInBounds ? _this._onButtonKeyDown(_this._selectMonthCallback(index)) : undefined, "aria-label": dateFormatter.formatMonthYear(indexedMonth, strings), "aria-selected": isNavigatedMonth, "data-is-focusable": isInBounds ? true : undefined, type: "button" }, month));
+                    React.createElement("div", { className: classNames.gridContainer, role: "grid" }, rowIndexes.map(function (rowNum) {
+                        var monthsForRow = strings.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);
+                        return (React.createElement("div", { key: 'monthRow_' + rowNum, role: "row" }, monthsForRow.map(function (month, index) {
+                            var _a;
+                            var monthIndex = rowNum * MONTHS_PER_ROW + index;
+                            var indexedMonth = DateMath_1.setMonth(navigatedDate, monthIndex);
+                            var isCurrentMonth = _this._isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today);
+                            var isNavigatedMonth = navigatedDate.getMonth() === monthIndex;
+                            var isSelectedMonth = selectedDate.getMonth() === monthIndex;
+                            var isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();
+                            var isInBounds = (minDate ? DateMath_1.compareDatePart(minDate, DateMath_1.getMonthEnd(indexedMonth)) < 1 : true) &&
+                                (maxDate ? DateMath_1.compareDatePart(DateMath_1.getMonthStart(indexedMonth), maxDate) < 1 : true);
+                            return (React.createElement("button", { ref: isNavigatedMonth ? _this._setNavigatedMonthRef : undefined, role: 'gridcell', className: Utilities_1.css(classNames.itemButton, (_a = {},
+                                    _a[classNames.current] = highlightCurrentMonth && isCurrentMonth,
+                                    _a[classNames.selected] = highlightSelectedMonth && isSelectedMonth && isSelectedYear,
+                                    _a[classNames.disabled] = !isInBounds,
+                                    _a)), disabled: !allFocusable && !isInBounds, key: monthIndex, onClick: isInBounds ? _this._selectMonthCallback(monthIndex) : undefined, onKeyDown: isInBounds ? _this._onButtonKeyDown(_this._selectMonthCallback(monthIndex)) : undefined, "aria-label": dateFormatter.formatMonthYear(indexedMonth, strings), "aria-selected": isNavigatedMonth, "data-is-focusable": isInBounds ? true : undefined, type: "button", "aria-readonly": true }, month));
+                        })));
                     })))));
@@ -172,0 +181,0 @@ };

lib-amd/components/Calendar/CalendarYear/CalendarYear.base.js

@@ -6,2 +6,3 @@ define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/Icon"], function (require, exports, tslib_1, React, Utilities_1, FocusZone_1, Icon_1) {
     var CELL_COUNT = 12;
+    var CELLS_PER_ROW = 4;
     var DefaultCalendarYearStrings = {
@@ -59,3 +60,3 @@ prevRangeAriaLabel: undefined,
                     _a[classNames.disabled] = disabled,
-                    _a)), type: "button", role: "gridcell", onClick: !disabled && onSelectYear ? this._onClick : undefined, onKeyDown: !disabled && onSelectYear ? this._onKeyDown : undefined, disabled: disabled, "aria-label": String(year), "aria-selected": selected, ref: this._onButtonRef }, this._onRenderYear()));
+                    _a)), type: "button", role: "gridcell", onClick: !disabled && onSelectYear ? this._onClick : undefined, onKeyDown: !disabled && onSelectYear ? this._onKeyDown : undefined, disabled: disabled, "aria-label": String(year), "aria-selected": selected, ref: this._onButtonRef, "aria-readonly": true }, this._onRenderYear()));
         };
@@ -99,9 +100,13 @@ return CalendarYearGridCell;
             var cells = [];
-            while (year <= toYear) {
-                cells.push(this._renderCell(year));
-                year++;
+            for (var i = 0; i < (toYear - fromYear + 1) / CELLS_PER_ROW; i++) {
+                cells.push([]);
+                for (var j = 0; j < CELLS_PER_ROW; j++) {
+                    cells[i].push(this._renderCell(year));
+                    year++;
+                }
             }
             return (React.createElement(FocusZone_1.FocusZone, null,
-                React.createElement("div", { className: classNames.gridContainer, role: "grid" },
-                    React.createElement("div", { role: "row" }, cells))));
+                React.createElement("div", { className: classNames.gridContainer, role: "grid" }, cells.map(function (cellRow, index) {
+                    return (React.createElement("div", { key: 'yearPickerRow_' + index, role: "row" }, cellRow));
+                }))));
         };
@@ -108,0 +113,0 @@ return CalendarYearGrid;

lib-amd/components/Calendar/examples/Calendar.Inline.Example.js

@@ -10,3 +10,7 @@ define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/utilities/dateMath/DateMath", "../Calendar", "../Calendar.types", "./Calendar.Example.scss"], function (require, exports, tslib_1, React, Button_1, DateMath_1, Calendar_1, Calendar_types_1, styles) {
         goToToday: 'Go to today',
-        weekNumberFormatString: 'Week number {0}'
+        weekNumberFormatString: 'Week number {0}',
+        prevMonthAriaLabel: 'Previous month',
+        nextMonthAriaLabel: 'Next month',
+        nextYearAriaLabel: 'Next year',
+        prevYearAriaLabel: 'Previous year'
     };
@@ -13,0 +17,0 @@ var CalendarInlineExample = /** @class */ (function (_super) {

lib-amd/version.js

 define(["require", "exports", "@uifabric/set-version"], function (require, exports, set_version_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    set_version_1.setVersion('@uifabric/date-time', '0.3.4');
+    set_version_1.setVersion('@uifabric/date-time', '0.3.5');
 });
 //# sourceMappingURL=version.js.map

lib-commonjs/components/Calendar/Calendar.base.js

@@ -10,2 +10,14 @@ "use strict";
 var getClassNames = utilities_1.classNamesFunction();
+var DEFAULT_STRINGS = {
+    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    goToToday: 'Go to today',
+    prevMonthAriaLabel: 'Go to previous month',
+    nextMonthAriaLabel: 'Go to next month',
+    prevYearAriaLabel: 'Go to previous year',
+    nextYearAriaLabel: 'Go to next year',
+    closeButtonAriaLabel: 'Close date picker'
+};
 var leftArrow = 'Up';
@@ -41,4 +53,13 @@ var rightArrow = 'Down';
         _this._renderGoToTodayButton = function (classes) {
-            var _a = _this.props, showGoToToday = _a.showGoToToday, strings = _a.strings;
-            return (showGoToToday && (React.createElement("button", { className: utilities_1.css('js-goToday', classes.goTodayButton), onClick: _this._onGotoToday, onKeyDown: _this._onButtonKeyDown(_this._onGotoToday), type: "button" }, strings.goToToday)));
+            var _a = _this.props, showGoToToday = _a.showGoToToday, strings = _a.strings, today = _a.today;
+            var _b = _this.state, navigatedDayDate = _b.navigatedDayDate, navigatedMonthDate = _b.navigatedMonthDate;
+            var goTodayEnabled = showGoToToday;
+            if (goTodayEnabled && navigatedDayDate && navigatedMonthDate && today) {
+                goTodayEnabled =
+                    navigatedDayDate.getFullYear() !== today.getFullYear() ||
+                        navigatedDayDate.getMonth() !== today.getMonth() ||
+                        navigatedMonthDate.getFullYear() !== today.getFullYear() ||
+                        navigatedMonthDate.getMonth() !== today.getMonth();
+            }
+            return (showGoToToday && (React.createElement("button", { className: utilities_1.css('js-goToday', classes.goTodayButton), onClick: _this._onGotoToday, onKeyDown: _this._onButtonKeyDown(_this._onGotoToday), type: "button", disabled: !goTodayEnabled }, strings.goToToday)));
         };
@@ -94,2 +115,3 @@ _this._navigateDayPickerDay = function (date) {
             _this._navigateDayPickerDay(today);
+            _this.focus();
         };
@@ -197,3 +219,3 @@ _this._onButtonKeyDown = function (callback) {
         showGoToToday: true,
-        strings: null,
+        strings: DEFAULT_STRINGS,
         highlightCurrentMonth: false,
@@ -200,0 +222,0 @@ highlightSelectedMonth: false,

lib-commonjs/components/Calendar/Calendar.styles.js

@@ -59,2 +59,6 @@ "use strict";
                         color: palette.themeDark
+                    },
+                    '&:disabled': {
+                        color: palette.neutralTertiaryAlt,
+                        pointerEvents: 'none'
                     }
@@ -61,0 +65,0 @@ }

lib-commonjs/components/Calendar/Calendar.types.d.ts

@@ -99,3 +99,3 @@ import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
      */
-    strings: ICalendarStrings | null;
+    strings?: ICalendarStrings;
     /**
@@ -102,0 +102,0 @@ * Customize navigation icons using ICalendarIconStrings

lib-commonjs/components/Calendar/CalendarDay/CalendarDay.base.js

@@ -72,3 +72,4 @@ "use strict";
                         _b[classNames.dayIsToday] = day.isToday,
-                        _b)), onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), onClick: day.isInBounds ? day.onSelected : undefined, "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), ref: function (element) { return _this._setDayRef(element, day, isNavigatedDate); }, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, type: "button" },
+                        _b)), onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), onClick: day.isInBounds ? day.onSelected : undefined, "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), ref: function (element) { return _this._setDayRef(element, day, isNavigatedDate); }, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, type: "button", role: "gridcell" // create grid structure
+                    , "aria-readonly": true },
                     React.createElement("span", { "aria-hidden": "true" }, dateTimeFormatter.formatDay(day.originalDate)))));
@@ -75,0 +76,0 @@ };

lib-commonjs/components/Calendar/CalendarMonth/CalendarMonth.base.js

@@ -13,2 +13,3 @@ "use strict";
 var CalendarYear_1 = require("../CalendarYear/CalendarYear");
+var MONTHS_PER_ROW = 4;
 var getClassNames = Utilities_1.classNamesFunction();
@@ -148,2 +149,6 @@ var CalendarMonthBase = /** @class */ (function (_super) {
         }
+        var rowIndexes = [];
+        for (var i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {
+            rowIndexes.push(i);
+        }
         return (React.createElement("div", { className: classNames.root },
@@ -166,16 +171,20 @@ React.createElement("div", { className: classNames.headerContainer },
             React.createElement(FocusZone_1.FocusZone, null,
-                React.createElement("div", { className: classNames.gridContainer, role: "grid" }, strings.shortMonths.map(function (month, index) {
-                    var _a;
-                    var indexedMonth = DateMath_1.setMonth(navigatedDate, index);
-                    var isCurrentMonth = _this._isCurrentMonth(index, navigatedDate.getFullYear(), today);
-                    var isNavigatedMonth = navigatedDate.getMonth() === index;
-                    var isSelectedMonth = selectedDate.getMonth() === index;
-                    var isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();
-                    var isInBounds = (minDate ? DateMath_1.compareDatePart(minDate, DateMath_1.getMonthEnd(indexedMonth)) < 1 : true) &&
-                        (maxDate ? DateMath_1.compareDatePart(DateMath_1.getMonthStart(indexedMonth), maxDate) < 1 : true);
-                    return (React.createElement("button", { ref: isNavigatedMonth ? _this._setNavigatedMonthRef : undefined, role: 'gridcell', className: Utilities_1.css(classNames.itemButton, (_a = {},
-                            _a[classNames.current] = highlightCurrentMonth && isCurrentMonth,
-                            _a[classNames.selected] = highlightSelectedMonth && isSelectedMonth && isSelectedYear,
-                            _a[classNames.disabled] = !isInBounds,
-                            _a)), disabled: !allFocusable && !isInBounds, key: index, onClick: isInBounds ? _this._selectMonthCallback(index) : undefined, onKeyDown: isInBounds ? _this._onButtonKeyDown(_this._selectMonthCallback(index)) : undefined, "aria-label": dateFormatter.formatMonthYear(indexedMonth, strings), "aria-selected": isNavigatedMonth, "data-is-focusable": isInBounds ? true : undefined, type: "button" }, month));
+                React.createElement("div", { className: classNames.gridContainer, role: "grid" }, rowIndexes.map(function (rowNum) {
+                    var monthsForRow = strings.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);
+                    return (React.createElement("div", { key: 'monthRow_' + rowNum, role: "row" }, monthsForRow.map(function (month, index) {
+                        var _a;
+                        var monthIndex = rowNum * MONTHS_PER_ROW + index;
+                        var indexedMonth = DateMath_1.setMonth(navigatedDate, monthIndex);
+                        var isCurrentMonth = _this._isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today);
+                        var isNavigatedMonth = navigatedDate.getMonth() === monthIndex;
+                        var isSelectedMonth = selectedDate.getMonth() === monthIndex;
+                        var isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();
+                        var isInBounds = (minDate ? DateMath_1.compareDatePart(minDate, DateMath_1.getMonthEnd(indexedMonth)) < 1 : true) &&
+                            (maxDate ? DateMath_1.compareDatePart(DateMath_1.getMonthStart(indexedMonth), maxDate) < 1 : true);
+                        return (React.createElement("button", { ref: isNavigatedMonth ? _this._setNavigatedMonthRef : undefined, role: 'gridcell', className: Utilities_1.css(classNames.itemButton, (_a = {},
+                                _a[classNames.current] = highlightCurrentMonth && isCurrentMonth,
+                                _a[classNames.selected] = highlightSelectedMonth && isSelectedMonth && isSelectedYear,
+                                _a[classNames.disabled] = !isInBounds,
+                                _a)), disabled: !allFocusable && !isInBounds, key: monthIndex, onClick: isInBounds ? _this._selectMonthCallback(monthIndex) : undefined, onKeyDown: isInBounds ? _this._onButtonKeyDown(_this._selectMonthCallback(monthIndex)) : undefined, "aria-label": dateFormatter.formatMonthYear(indexedMonth, strings), "aria-selected": isNavigatedMonth, "data-is-focusable": isInBounds ? true : undefined, type: "button", "aria-readonly": true }, month));
+                    })));
                 })))));
@@ -182,0 +191,0 @@ };

lib-commonjs/components/Calendar/CalendarYear/CalendarYear.base.js

@@ -10,2 +10,3 @@ "use strict";
 var CELL_COUNT = 12;
+var CELLS_PER_ROW = 4;
 var DefaultCalendarYearStrings = {
@@ -63,3 +64,3 @@ prevRangeAriaLabel: undefined,
                 _a[classNames.disabled] = disabled,
-                _a)), type: "button", role: "gridcell", onClick: !disabled && onSelectYear ? this._onClick : undefined, onKeyDown: !disabled && onSelectYear ? this._onKeyDown : undefined, disabled: disabled, "aria-label": String(year), "aria-selected": selected, ref: this._onButtonRef }, this._onRenderYear()));
+                _a)), type: "button", role: "gridcell", onClick: !disabled && onSelectYear ? this._onClick : undefined, onKeyDown: !disabled && onSelectYear ? this._onKeyDown : undefined, disabled: disabled, "aria-label": String(year), "aria-selected": selected, ref: this._onButtonRef, "aria-readonly": true }, this._onRenderYear()));
     };
@@ -103,9 +104,13 @@ return CalendarYearGridCell;
         var cells = [];
-        while (year <= toYear) {
-            cells.push(this._renderCell(year));
-            year++;
+        for (var i = 0; i < (toYear - fromYear + 1) / CELLS_PER_ROW; i++) {
+            cells.push([]);
+            for (var j = 0; j < CELLS_PER_ROW; j++) {
+                cells[i].push(this._renderCell(year));
+                year++;
+            }
         }
         return (React.createElement(FocusZone_1.FocusZone, null,
-            React.createElement("div", { className: classNames.gridContainer, role: "grid" },
-                React.createElement("div", { role: "row" }, cells))));
+            React.createElement("div", { className: classNames.gridContainer, role: "grid" }, cells.map(function (cellRow, index) {
+                return (React.createElement("div", { key: 'yearPickerRow_' + index, role: "row" }, cellRow));
+            }))));
     };
@@ -112,0 +117,0 @@ return CalendarYearGrid;

lib-commonjs/components/Calendar/examples/Calendar.Inline.Example.js

@@ -16,3 +16,7 @@ "use strict";
     goToToday: 'Go to today',
-    weekNumberFormatString: 'Week number {0}'
+    weekNumberFormatString: 'Week number {0}',
+    prevMonthAriaLabel: 'Previous month',
+    nextMonthAriaLabel: 'Next month',
+    nextYearAriaLabel: 'Next year',
+    prevYearAriaLabel: 'Previous year'
 };
@@ -19,0 +23,0 @@ var CalendarInlineExample = /** @class */ (function (_super) {

lib-commonjs/version.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// @uifabric/date-time@0.3.4
+// @uifabric/date-time@0.3.5
 // Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only.
 var set_version_1 = require("@uifabric/set-version");
-set_version_1.setVersion('@uifabric/date-time', '0.3.4');
+set_version_1.setVersion('@uifabric/date-time', '0.3.5');
 //# sourceMappingURL=version.js.map

lib/components/Calendar/Calendar.base.js

@@ -8,2 +8,14 @@ import * as tslib_1 from "tslib";
 var getClassNames = classNamesFunction();
+var DEFAULT_STRINGS = {
+    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    goToToday: 'Go to today',
+    prevMonthAriaLabel: 'Go to previous month',
+    nextMonthAriaLabel: 'Go to next month',
+    prevYearAriaLabel: 'Go to previous year',
+    nextYearAriaLabel: 'Go to next year',
+    closeButtonAriaLabel: 'Close date picker'
+};
 var leftArrow = 'Up';
@@ -39,4 +51,13 @@ var rightArrow = 'Down';
         _this._renderGoToTodayButton = function (classes) {
-            var _a = _this.props, showGoToToday = _a.showGoToToday, strings = _a.strings;
-            return (showGoToToday && (React.createElement("button", { className: css('js-goToday', classes.goTodayButton), onClick: _this._onGotoToday, onKeyDown: _this._onButtonKeyDown(_this._onGotoToday), type: "button" }, strings.goToToday)));
+            var _a = _this.props, showGoToToday = _a.showGoToToday, strings = _a.strings, today = _a.today;
+            var _b = _this.state, navigatedDayDate = _b.navigatedDayDate, navigatedMonthDate = _b.navigatedMonthDate;
+            var goTodayEnabled = showGoToToday;
+            if (goTodayEnabled && navigatedDayDate && navigatedMonthDate && today) {
+                goTodayEnabled =
+                    navigatedDayDate.getFullYear() !== today.getFullYear() ||
+                        navigatedDayDate.getMonth() !== today.getMonth() ||
+                        navigatedMonthDate.getFullYear() !== today.getFullYear() ||
+                        navigatedMonthDate.getMonth() !== today.getMonth();
+            }
+            return (showGoToToday && (React.createElement("button", { className: css('js-goToday', classes.goTodayButton), onClick: _this._onGotoToday, onKeyDown: _this._onButtonKeyDown(_this._onGotoToday), type: "button", disabled: !goTodayEnabled }, strings.goToToday)));
         };
@@ -92,2 +113,3 @@ _this._navigateDayPickerDay = function (date) {
             _this._navigateDayPickerDay(today);
+            _this.focus();
         };
@@ -195,3 +217,3 @@ _this._onButtonKeyDown = function (callback) {
         showGoToToday: true,
-        strings: null,
+        strings: DEFAULT_STRINGS,
         highlightCurrentMonth: false,
@@ -198,0 +220,0 @@ highlightSelectedMonth: false,

lib/components/Calendar/Calendar.styles.js

@@ -57,2 +57,6 @@ import { normalize, FontSizes, getFocusStyle } from '@uifabric/styling';
                         color: palette.themeDark
+                    },
+                    '&:disabled': {
+                        color: palette.neutralTertiaryAlt,
+                        pointerEvents: 'none'
                     }
@@ -59,0 +63,0 @@ }

lib/components/Calendar/Calendar.types.d.ts

@@ -99,3 +99,3 @@ import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
      */
-    strings: ICalendarStrings | null;
+    strings?: ICalendarStrings;
     /**
@@ -102,0 +102,0 @@ * Customize navigation icons using ICalendarIconStrings

lib/components/Calendar/CalendarDay/CalendarDay.base.js

@@ -70,3 +70,4 @@ import * as tslib_1 from "tslib";
                         _b[classNames.dayIsToday] = day.isToday,
-                        _b)), onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), onClick: day.isInBounds ? day.onSelected : undefined, "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), ref: function (element) { return _this._setDayRef(element, day, isNavigatedDate); }, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, type: "button" },
+                        _b)), onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), onClick: day.isInBounds ? day.onSelected : undefined, "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), ref: function (element) { return _this._setDayRef(element, day, isNavigatedDate); }, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, type: "button", role: "gridcell" // create grid structure
+                    , "aria-readonly": true },
                     React.createElement("span", { "aria-hidden": "true" }, dateTimeFormatter.formatDay(day.originalDate)))));
@@ -73,0 +74,0 @@ };

lib/components/Calendar/CalendarMonth/CalendarMonth.base.js

@@ -11,2 +11,3 @@ import * as tslib_1 from "tslib";
 import { CalendarYear } from '../CalendarYear/CalendarYear';
+var MONTHS_PER_ROW = 4;
 var getClassNames = classNamesFunction();
@@ -146,2 +147,6 @@ var CalendarMonthBase = /** @class */ (function (_super) {
         }
+        var rowIndexes = [];
+        for (var i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {
+            rowIndexes.push(i);
+        }
         return (React.createElement("div", { className: classNames.root },
@@ -164,16 +169,20 @@ React.createElement("div", { className: classNames.headerContainer },
             React.createElement(FocusZone, null,
-                React.createElement("div", { className: classNames.gridContainer, role: "grid" }, strings.shortMonths.map(function (month, index) {
-                    var _a;
-                    var indexedMonth = setMonth(navigatedDate, index);
-                    var isCurrentMonth = _this._isCurrentMonth(index, navigatedDate.getFullYear(), today);
-                    var isNavigatedMonth = navigatedDate.getMonth() === index;
-                    var isSelectedMonth = selectedDate.getMonth() === index;
-                    var isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();
-                    var isInBounds = (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&
-                        (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);
-                    return (React.createElement("button", { ref: isNavigatedMonth ? _this._setNavigatedMonthRef : undefined, role: 'gridcell', className: css(classNames.itemButton, (_a = {},
-                            _a[classNames.current] = highlightCurrentMonth && isCurrentMonth,
-                            _a[classNames.selected] = highlightSelectedMonth && isSelectedMonth && isSelectedYear,
-                            _a[classNames.disabled] = !isInBounds,
-                            _a)), disabled: !allFocusable && !isInBounds, key: index, onClick: isInBounds ? _this._selectMonthCallback(index) : undefined, onKeyDown: isInBounds ? _this._onButtonKeyDown(_this._selectMonthCallback(index)) : undefined, "aria-label": dateFormatter.formatMonthYear(indexedMonth, strings), "aria-selected": isNavigatedMonth, "data-is-focusable": isInBounds ? true : undefined, type: "button" }, month));
+                React.createElement("div", { className: classNames.gridContainer, role: "grid" }, rowIndexes.map(function (rowNum) {
+                    var monthsForRow = strings.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);
+                    return (React.createElement("div", { key: 'monthRow_' + rowNum, role: "row" }, monthsForRow.map(function (month, index) {
+                        var _a;
+                        var monthIndex = rowNum * MONTHS_PER_ROW + index;
+                        var indexedMonth = setMonth(navigatedDate, monthIndex);
+                        var isCurrentMonth = _this._isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today);
+                        var isNavigatedMonth = navigatedDate.getMonth() === monthIndex;
+                        var isSelectedMonth = selectedDate.getMonth() === monthIndex;
+                        var isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();
+                        var isInBounds = (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&
+                            (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);
+                        return (React.createElement("button", { ref: isNavigatedMonth ? _this._setNavigatedMonthRef : undefined, role: 'gridcell', className: css(classNames.itemButton, (_a = {},
+                                _a[classNames.current] = highlightCurrentMonth && isCurrentMonth,
+                                _a[classNames.selected] = highlightSelectedMonth && isSelectedMonth && isSelectedYear,
+                                _a[classNames.disabled] = !isInBounds,
+                                _a)), disabled: !allFocusable && !isInBounds, key: monthIndex, onClick: isInBounds ? _this._selectMonthCallback(monthIndex) : undefined, onKeyDown: isInBounds ? _this._onButtonKeyDown(_this._selectMonthCallback(monthIndex)) : undefined, "aria-label": dateFormatter.formatMonthYear(indexedMonth, strings), "aria-selected": isNavigatedMonth, "data-is-focusable": isInBounds ? true : undefined, type: "button", "aria-readonly": true }, month));
+                    })));
                 })))));
@@ -180,0 +189,0 @@ };

lib/components/Calendar/CalendarYear/CalendarYear.base.js

@@ -8,2 +8,3 @@ import * as tslib_1 from "tslib";
 var CELL_COUNT = 12;
+var CELLS_PER_ROW = 4;
 var DefaultCalendarYearStrings = {
@@ -61,3 +62,3 @@ prevRangeAriaLabel: undefined,
                 _a[classNames.disabled] = disabled,
-                _a)), type: "button", role: "gridcell", onClick: !disabled && onSelectYear ? this._onClick : undefined, onKeyDown: !disabled && onSelectYear ? this._onKeyDown : undefined, disabled: disabled, "aria-label": String(year), "aria-selected": selected, ref: this._onButtonRef }, this._onRenderYear()));
+                _a)), type: "button", role: "gridcell", onClick: !disabled && onSelectYear ? this._onClick : undefined, onKeyDown: !disabled && onSelectYear ? this._onKeyDown : undefined, disabled: disabled, "aria-label": String(year), "aria-selected": selected, ref: this._onButtonRef, "aria-readonly": true }, this._onRenderYear()));
     };
@@ -101,9 +102,13 @@ return CalendarYearGridCell;
         var cells = [];
-        while (year <= toYear) {
-            cells.push(this._renderCell(year));
-            year++;
+        for (var i = 0; i < (toYear - fromYear + 1) / CELLS_PER_ROW; i++) {
+            cells.push([]);
+            for (var j = 0; j < CELLS_PER_ROW; j++) {
+                cells[i].push(this._renderCell(year));
+                year++;
+            }
         }
         return (React.createElement(FocusZone, null,
-            React.createElement("div", { className: classNames.gridContainer, role: "grid" },
-                React.createElement("div", { role: "row" }, cells))));
+            React.createElement("div", { className: classNames.gridContainer, role: "grid" }, cells.map(function (cellRow, index) {
+                return (React.createElement("div", { key: 'yearPickerRow_' + index, role: "row" }, cellRow));
+            }))));
     };
@@ -110,0 +115,0 @@ return CalendarYearGrid;

lib/components/Calendar/examples/Calendar.Inline.Example.js

@@ -14,3 +14,7 @@ import * as tslib_1 from "tslib";
     goToToday: 'Go to today',
-    weekNumberFormatString: 'Week number {0}'
+    weekNumberFormatString: 'Week number {0}',
+    prevMonthAriaLabel: 'Previous month',
+    nextMonthAriaLabel: 'Next month',
+    nextYearAriaLabel: 'Next year',
+    prevYearAriaLabel: 'Previous year'
 };
@@ -17,0 +21,0 @@ var CalendarInlineExample = /** @class */ (function (_super) {

lib/version.js

@@ -1,5 +0,5 @@
-// @uifabric/date-time@0.3.4
+// @uifabric/date-time@0.3.5
 // Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only.
 import { setVersion } from '@uifabric/set-version';
-setVersion('@uifabric/date-time', '0.3.4');
+setVersion('@uifabric/date-time', '0.3.5');
 //# sourceMappingURL=version.js.map

package.json

 {
   "name": "@uifabric/date-time",
-  "version": "7.0.0-alpha004",
+  "version": "7.0.0-alpha006",
   "description": "Experimental React components for building experiences for Office 365.",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

src/components/Calendar/Calendar.types.ts

@@ -120,3 +120,3 @@ import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
    */
-  strings: ICalendarStrings | null;
+  strings?: ICalendarStrings;
 
@@ -123,0 +123,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2382033

increased by1.09%

Lines of code

35066

increased by0.5%

No dependency changes