@atlaskit/calendar 13.1.2 → 13.1.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/calendar
 
+## 13.1.4
+
+### Patch Changes
+
+- [`774ed69ecef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/774ed69ecef) - Internal changes to use space tokens for spacing values. There is no visual change.
+
+## 13.1.3
+
+### Patch Changes
+
+- [`74fec133d99`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74fec133d99) - [ux] Add proper grid roles to calendar.
+
 ## 13.1.2
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -33,7 +33,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.2"
+  packageVersion: "13.1.4"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -177,7 +177,6 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     onBlur: handleContainerBlur,
     onFocus: handleContainerFocus,
     onKeyDown: handleContainerKeyDown,
-    role: "presentation",
     testId: testId && "".concat(testId, "--container"),
     ref: ref
   }, (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
@@ -192,8 +191,8 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     },
     "aria-describedby": announceId,
     "aria-label": "calendar",
-    role: "grid",
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    testId: testId && "".concat(testId, "--calendar")
   }, (0, _react2.jsx)(_stack.default, {
     space: "space.150"
   }, (0, _react2.jsx)(_header.default
@@ -210,10 +209,11 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     testId: testId
   }), (0, _react2.jsx)(_box.default, {
     display: "block",
-    role: "presentation"
+    role: "grid"
   }, (0, _react2.jsx)(_weekHeader.default, {
     daysShort: daysShort,
-    mode: mode
+    mode: mode,
+    testId: testId
   }), (0, _react2.jsx)(_weekDays.default, {
     weeks: weeks,
     handleClickDay: handleClickDay,

package/dist/cjs/internal/components/week-day-grid.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 /** @jsx jsx */
 
 var gridStyles = (0, _react.css)({
@@ -20,9 +22,10 @@ var gridStyles = (0, _react.css)({
 var WeekDayGrid = function WeekDayGrid(_ref) {
   var testId = _ref.testId,
     children = _ref.children;
-  return (0, _react.jsx)("div", {
-    "data-testid": testId,
-    css: gridStyles
+  return (0, _react.jsx)(_box.default, {
+    testId: testId,
+    css: gridStyles,
+    role: "row"
   }, children);
 };
 var _default = WeekDayGrid;

package/dist/cjs/internal/components/week-days.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 var _date = _interopRequireDefault(require("./date"));
 var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
 /** @jsx jsx */
@@ -16,11 +17,15 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
     handleClickDay = _ref.handleClickDay,
     mode = _ref.mode,
     testId = _ref.testId;
-  return (0, _react2.jsx)(_weekDayGrid.default, {
-    role: "grid",
+  return (0, _react2.jsx)(_box.default, {
+    display: "block",
+    role: "rowgroup",
     testId: testId && "".concat(testId, "--month")
-  }, weeks.map(function (week) {
-    return week.values.map(function (weekDay) {
+  }, weeks.map(function (week, i) {
+    return (0, _react2.jsx)(_weekDayGrid.default, {
+      key: i,
+      testId: testId && "".concat(testId, "--week")
+    }, week.values.map(function (weekDay) {
       return (0, _react2.jsx)(_date.default, {
         key: "".concat(week.id, "-").concat(weekDay.id),
         isDisabled: weekDay.isDisabled,
@@ -35,7 +40,7 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
         mode: mode,
         testId: testId
       }, weekDay.day);
-    });
+    }));
   }));
 });
 WeekDays.displayName = 'WeekDays';

package/dist/cjs/internal/components/week-header.js

@@ -14,8 +14,11 @@ var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
 /** @jsx jsx */
 
 var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
-  var daysShort = _ref.daysShort;
-  return (0, _react2.jsx)(_weekDayGrid.default, null, daysShort.map(function (shortDay) {
+  var daysShort = _ref.daysShort,
+    testId = _ref.testId;
+  return (0, _react2.jsx)(_weekDayGrid.default, {
+    testId: testId && "".concat(testId, "--column-headers")
+  }, daysShort.map(function (shortDay) {
     return (0, _react2.jsx)(_box.default, {
       padding: "space.100",
       display: "block",
@@ -29,7 +32,8 @@ var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
         color: "var(--ds-text-subtle, ".concat(_colors.N200, ")") // Apply correct fallback to shortDay text
       },
 
-      key: shortDay
+      key: shortDay,
+      role: "columnheader"
     }, (0, _react2.jsx)(_text.default, {
       fontWeight: "bold",
       fontSize: "size.050",

package/dist/cjs/internal/styles/date.js

@@ -35,13 +35,14 @@ var dateCellStyles = function dateCellStyles() {
   return {
     all: 'unset',
     display: 'block',
-    padding: '4px 9px',
+    padding: "var(--ds-space-050, 4px)".concat(" 9px"),
     position: 'relative',
     backgroundColor: 'transparent',
     border: '2px solid transparent',
     borderRadius: 3,
     color: textColor[mode],
     cursor: 'pointer',
+    flexGrow: 1,
     fontSize: "var(--ds-font-size-100, 14px)",
     textAlign: 'center',
     '&[data-sibling]': {
@@ -54,9 +55,9 @@ var dateCellStyles = function dateCellStyles() {
         display: 'block',
         height: 2,
         position: 'absolute',
-        right: 2,
-        bottom: 2,
-        left: 2,
+        right: "var(--ds-space-025, 2px)",
+        bottom: "var(--ds-space-025, 2px)",
+        left: "var(--ds-space-025, 2px)",
         backgroundColor: 'currentColor',
         content: '""'
       }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/calendar",
-	"version": "13.1.2",
+	"version": "13.1.4",
 	"sideEffects": false
 }

package/dist/es2019/calendar.js

@@ -23,7 +23,7 @@ import useUniqueId from './internal/hooks/use-unique-id';
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.2"
+  packageVersion: "13.1.4"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -149,7 +149,6 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     onBlur: handleContainerBlur,
     onFocus: handleContainerFocus,
     onKeyDown: handleContainerKeyDown,
-    role: "presentation",
     testId: testId && `${testId}--container`,
     ref: ref
   }, jsx(VisuallyHidden, null, jsx("span", {
@@ -164,8 +163,8 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     },
     "aria-describedby": announceId,
     "aria-label": "calendar",
-    role: "grid",
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    testId: testId && `${testId}--calendar`
   }, jsx(Stack, {
     space: "space.150"
   }, jsx(Header
@@ -182,10 +181,11 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     testId: testId
   }), jsx(Box, {
     display: "block",
-    role: "presentation"
+    role: "grid"
   }, jsx(WeekHeaderComponent, {
     daysShort: daysShort,
-    mode: mode
+    mode: mode,
+    testId: testId
   }), jsx(WeekDaysComponent, {
     weeks: weeks,
     handleClickDay: handleClickDay,

package/dist/es2019/internal/components/week-day-grid.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
 const gridStyles = css({
   display: 'grid',
   gridTemplateColumns: 'repeat(7, minmax(max-content, 1fr))'
@@ -14,8 +15,9 @@ const gridStyles = css({
 const WeekDayGrid = ({
   testId,
   children
-}) => jsx("div", {
-  "data-testid": testId,
-  css: gridStyles
+}) => jsx(Box, {
+  testId: testId,
+  css: gridStyles,
+  role: "row"
 }, children);
 export default WeekDayGrid;

package/dist/es2019/internal/components/week-days.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
 import DateComponent from './date';
 import WeekdayGrid from './week-day-grid';
 const WeekDays = /*#__PURE__*/memo(function WeekDays({
@@ -9,10 +10,14 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
   mode,
   testId
 }) {
-  return jsx(WeekdayGrid, {
-    role: "grid",
+  return jsx(Box, {
+    display: "block",
+    role: "rowgroup",
     testId: testId && `${testId}--month`
-  }, weeks.map(week => week.values.map(weekDay => jsx(DateComponent, {
+  }, weeks.map((week, i) => jsx(WeekdayGrid, {
+    key: i,
+    testId: testId && `${testId}--week`
+  }, week.values.map(weekDay => jsx(DateComponent, {
     key: `${week.id}-${weekDay.id}`,
     isDisabled: weekDay.isDisabled,
     isFocused: weekDay.isFocused,
@@ -25,7 +30,7 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
     year: weekDay.year,
     mode: mode,
     testId: testId
-  }, weekDay.day))));
+  }, weekDay.day)))));
 });
 WeekDays.displayName = 'WeekDays';
 

package/dist/es2019/internal/components/week-header.js

@@ -6,9 +6,12 @@ import Text from '@atlaskit/ds-explorations/text';
 import { N200 } from '@atlaskit/theme/colors';
 import WeekDayGrid from './week-day-grid';
 const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
-  daysShort
+  daysShort,
+  testId
 }) {
-  return jsx(WeekDayGrid, null, daysShort.map(shortDay => jsx(Box, {
+  return jsx(WeekDayGrid, {
+    testId: testId && `${testId}--column-headers`
+  }, daysShort.map(shortDay => jsx(Box, {
     padding: "space.100",
     display: "block",
     UNSAFE_style: {
@@ -21,7 +24,8 @@ const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
       color: `var(--ds-text-subtle, ${N200})` // Apply correct fallback to shortDay text
     },
 
-    key: shortDay
+    key: shortDay,
+    role: "columnheader"
   }, jsx(Text, {
     fontWeight: "bold",
     fontSize: "size.050",

package/dist/es2019/internal/styles/date.js

@@ -27,13 +27,14 @@ const borderColorFocused = {
 export const dateCellStyles = (mode = 'light') => ({
   all: 'unset',
   display: 'block',
-  padding: '4px 9px',
+  padding: `${"var(--ds-space-050, 4px)"} 9px`,
   position: 'relative',
   backgroundColor: 'transparent',
   border: '2px solid transparent',
   borderRadius: 3,
   color: textColor[mode],
   cursor: 'pointer',
+  flexGrow: 1,
   fontSize: "var(--ds-font-size-100, 14px)",
   textAlign: 'center',
   '&[data-sibling]': {
@@ -46,9 +47,9 @@ export const dateCellStyles = (mode = 'light') => ({
       display: 'block',
       height: 2,
       position: 'absolute',
-      right: 2,
-      bottom: 2,
-      left: 2,
+      right: "var(--ds-space-025, 2px)",
+      bottom: "var(--ds-space-025, 2px)",
+      left: "var(--ds-space-025, 2px)",
       backgroundColor: 'currentColor',
       content: '""'
     }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/calendar",
-	"version": "13.1.2",
+	"version": "13.1.4",
 	"sideEffects": false
 }

package/dist/esm/calendar.js

@@ -27,7 +27,7 @@ import useUniqueId from './internal/hooks/use-unique-id';
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.2"
+  packageVersion: "13.1.4"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -171,7 +171,6 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     onBlur: handleContainerBlur,
     onFocus: handleContainerFocus,
     onKeyDown: handleContainerKeyDown,
-    role: "presentation",
     testId: testId && "".concat(testId, "--container"),
     ref: ref
   }, jsx(VisuallyHidden, null, jsx("span", {
@@ -186,8 +185,8 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     },
     "aria-describedby": announceId,
     "aria-label": "calendar",
-    role: "grid",
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    testId: testId && "".concat(testId, "--calendar")
   }, jsx(Stack, {
     space: "space.150"
   }, jsx(Header
@@ -204,10 +203,11 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     testId: testId
   }), jsx(Box, {
     display: "block",
-    role: "presentation"
+    role: "grid"
   }, jsx(WeekHeaderComponent, {
     daysShort: daysShort,
-    mode: mode
+    mode: mode,
+    testId: testId
   }), jsx(WeekDaysComponent, {
     weeks: weeks,
     handleClickDay: handleClickDay,

package/dist/esm/internal/components/week-day-grid.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
 var gridStyles = css({
   display: 'grid',
   gridTemplateColumns: 'repeat(7, minmax(max-content, 1fr))'
@@ -14,9 +15,10 @@ var gridStyles = css({
 var WeekDayGrid = function WeekDayGrid(_ref) {
   var testId = _ref.testId,
     children = _ref.children;
-  return jsx("div", {
-    "data-testid": testId,
-    css: gridStyles
+  return jsx(Box, {
+    testId: testId,
+    css: gridStyles,
+    role: "row"
   }, children);
 };
 export default WeekDayGrid;

package/dist/esm/internal/components/week-days.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
 import DateComponent from './date';
 import WeekdayGrid from './week-day-grid';
 var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
@@ -8,11 +9,15 @@ var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
     handleClickDay = _ref.handleClickDay,
     mode = _ref.mode,
     testId = _ref.testId;
-  return jsx(WeekdayGrid, {
-    role: "grid",
+  return jsx(Box, {
+    display: "block",
+    role: "rowgroup",
     testId: testId && "".concat(testId, "--month")
-  }, weeks.map(function (week) {
-    return week.values.map(function (weekDay) {
+  }, weeks.map(function (week, i) {
+    return jsx(WeekdayGrid, {
+      key: i,
+      testId: testId && "".concat(testId, "--week")
+    }, week.values.map(function (weekDay) {
       return jsx(DateComponent, {
         key: "".concat(week.id, "-").concat(weekDay.id),
         isDisabled: weekDay.isDisabled,
@@ -27,7 +32,7 @@ var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
         mode: mode,
         testId: testId
       }, weekDay.day);
-    });
+    }));
   }));
 });
 WeekDays.displayName = 'WeekDays';

package/dist/esm/internal/components/week-header.js

@@ -6,8 +6,11 @@ import Text from '@atlaskit/ds-explorations/text';
 import { N200 } from '@atlaskit/theme/colors';
 import WeekDayGrid from './week-day-grid';
 var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
-  var daysShort = _ref.daysShort;
-  return jsx(WeekDayGrid, null, daysShort.map(function (shortDay) {
+  var daysShort = _ref.daysShort,
+    testId = _ref.testId;
+  return jsx(WeekDayGrid, {
+    testId: testId && "".concat(testId, "--column-headers")
+  }, daysShort.map(function (shortDay) {
     return jsx(Box, {
       padding: "space.100",
       display: "block",
@@ -21,7 +24,8 @@ var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
         color: "var(--ds-text-subtle, ".concat(N200, ")") // Apply correct fallback to shortDay text
       },
 
-      key: shortDay
+      key: shortDay,
+      role: "columnheader"
     }, jsx(Text, {
       fontWeight: "bold",
       fontSize: "size.050",

package/dist/esm/internal/styles/date.js

@@ -29,13 +29,14 @@ export var dateCellStyles = function dateCellStyles() {
   return {
     all: 'unset',
     display: 'block',
-    padding: '4px 9px',
+    padding: "var(--ds-space-050, 4px)".concat(" 9px"),
     position: 'relative',
     backgroundColor: 'transparent',
     border: '2px solid transparent',
     borderRadius: 3,
     color: textColor[mode],
     cursor: 'pointer',
+    flexGrow: 1,
     fontSize: "var(--ds-font-size-100, 14px)",
     textAlign: 'center',
     '&[data-sibling]': {
@@ -48,9 +49,9 @@ export var dateCellStyles = function dateCellStyles() {
         display: 'block',
         height: 2,
         position: 'absolute',
-        right: 2,
-        bottom: 2,
-        left: 2,
+        right: "var(--ds-space-025, 2px)",
+        bottom: "var(--ds-space-025, 2px)",
+        left: "var(--ds-space-025, 2px)",
         backgroundColor: 'currentColor',
         content: '""'
       }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/calendar",
-	"version": "13.1.2",
+	"version": "13.1.4",
 	"sideEffects": false
 }

package/dist/types/internal/components/week-header.d.ts

@@ -3,6 +3,7 @@ import type { ThemeModes } from '@atlaskit/theme/types';
 interface WeekHeaderProps {
     daysShort: string[];
     mode?: ThemeModes;
+    testId?: string;
 }
 declare const WeekHeader: import("react").NamedExoticComponent<WeekHeaderProps>;
 export default WeekHeader;

package/dist/types-ts4.5/internal/components/week-header.d.ts

@@ -3,6 +3,7 @@ import type { ThemeModes } from '@atlaskit/theme/types';
 interface WeekHeaderProps {
     daysShort: string[];
     mode?: ThemeModes;
+    testId?: string;
 }
 declare const WeekHeader: import("react").NamedExoticComponent<WeekHeaderProps>;
 export default WeekHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "13.1.2",
+  "version": "13.1.4",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,14 +33,14 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.7.0",
-    "@atlaskit/ds-explorations": "^2.1.0",
+    "@atlaskit/ds-explorations": "^2.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/locale": "^2.5.0",
     "@atlaskit/primitives": "^0.9.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",