@atlaskit/calendar 14.0.1 → 14.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/calendar
 
+## 14.0.2
+
+### Patch Changes
+
+- [#58458](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58458) [`536478cdcf0b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/536478cdcf0b) - Made some tiny tweaks to the weekday header so its height is now an integer.
+
 ## 14.0.1
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -1,3 +1,4 @@
+/* calendar.tsx generated by @compiled/babel-plugin v0.26.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _primitives = require("@atlaskit/primitives");
@@ -26,7 +27,7 @@ var _useHandleDateSelect2 = _interopRequireDefault(require("./internal/hooks/use
 var _useLocale2 = _interopRequireDefault(require("./internal/hooks/use-locale"));
 var _useUniqueId = _interopRequireDefault(require("./internal/hooks/use-unique-id"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var boxStyles = (0, _primitives.xcss)({
   display: 'inline-block',
   userSelect: 'none'
@@ -34,7 +35,7 @@ var boxStyles = (0, _primitives.xcss)({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "14.0.1"
+  packageVersion: "14.0.2"
 };
 var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -188,21 +189,21 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
     return "".concat(monthsLong[previousMonth], " ").concat(showPreviousYear ? yearValue - 1 : yearValue);
   };
   var headerId = (0, _useUniqueId.default)('month-year-header');
-  return (0, _react2.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className,
     style: style,
     onBlur: handleContainerBlur,
     onFocus: handleContainerFocus,
     "data-testid": testId && "".concat(testId, "--container"),
     ref: ref
-  }, (0, _react2.jsx)(_primitives.Box, {
+  }, /*#__PURE__*/React.createElement(_primitives.Box, {
     xcss: boxStyles,
     padding: "space.200",
     "aria-label": "calendar",
     testId: testId && "".concat(testId, "--calendar")
-  }, (0, _react2.jsx)(_primitives.Stack, {
+  }, /*#__PURE__*/React.createElement(_primitives.Stack, {
     space: "space.150"
-  }, (0, _react2.jsx)(_header.default
+  }, /*#__PURE__*/React.createElement(_header.default
   // The month number needs to be translated to index in the month
   // name array e.g. 1 (January) -> 0
   , {
@@ -217,16 +218,16 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
     headerId: headerId,
     tabIndex: tabIndex,
     testId: testId
-  }), (0, _react2.jsx)(_primitives.Box, {
+  }), /*#__PURE__*/React.createElement(_primitives.Box, {
     role: "grid",
     tabIndex: tabIndex,
     onKeyDown: handleContainerKeyDown,
     "aria-labelledby": headerId,
     testId: testId && "".concat(testId, "--calendar-dates")
-  }, (0, _react2.jsx)(_weekHeader.default, {
+  }, /*#__PURE__*/React.createElement(_weekHeader.default, {
     daysShort: daysShort,
     testId: testId
-  }), (0, _react2.jsx)(_weekDays.default, {
+  }), /*#__PURE__*/React.createElement(_weekDays.default, {
     weeks: weeks,
     handleClickDay: handleClickDay,
     monthsLong: monthsLong,
@@ -246,7 +247,7 @@ var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref,
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
 var Calendar = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Calendar(props, ref) {
-  return (0, _react2.jsx)(InnerCalendar, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/React.createElement(InnerCalendar, (0, _extends2.default)({}, props, {
     ref: ref
   }));
 }));

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

@@ -10,8 +10,6 @@ var _react2 = require("@emotion/react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _primitives = require("@atlaskit/primitives");
 var _date = require("../styles/date");
-/** @jsx jsx */
-
 var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Date(_ref2, _ref) {
   var day = _ref2.children,
     _ref2$isDisabled = _ref2.isDisabled,
@@ -70,10 +68,10 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     }
   }, [onClick]);
   var dateCellStyles = (0, _react2.css)((0, _date.dateCellStyles)());
-  return (0, _react2.jsx)(_primitives.Grid, {
+  return /*#__PURE__*/React.createElement(_primitives.Grid, {
     role: "gridcell",
     alignItems: "center"
-  }, (0, _react2.jsx)("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: dateCellStyles,
     "aria-current": isToday ? 'date' : undefined,

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _react2 = require("@emotion/react");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
@@ -15,8 +14,6 @@ var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/ch
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _useUniqueId = _interopRequireDefault(require("../../internal/hooks/use-unique-id"));
-/** @jsx jsx */
-
 var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
     year = _ref.year,
@@ -56,40 +53,40 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
     }
     handleClickNext(e);
   };
-  return (0, _react2.jsx)(_primitives.Box, {
+  return /*#__PURE__*/React.createElement(_primitives.Box, {
     paddingInline: "space.100"
-  }, (0, _react2.jsx)(_primitives.Inline, {
+  }, /*#__PURE__*/React.createElement(_primitives.Inline, {
     space: "space.0",
     alignBlock: "center",
     spread: "space-between"
-  }, (0, _react2.jsx)(_standardButton.default, {
+  }, /*#__PURE__*/React.createElement(_standardButton.default, {
     appearance: "subtle",
     spacing: "none",
     tabIndex: tabIndex,
     onClick: handlePrevMonthInteraction,
     testId: testId && "".concat(testId, "--previous-month"),
-    iconBefore: (0, _react2.jsx)(_chevronLeftLarge.default, {
+    iconBefore: /*#__PURE__*/React.createElement(_chevronLeftLarge.default, {
       label: "".concat(previousMonthLabel, ", ").concat(previousHeading),
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(_colors.N700, ")"),
       testId: testId && "".concat(testId, "--previous-month-icon")
     })
-  }), (0, _react2.jsx)(_primitives.Box, {
+  }), /*#__PURE__*/React.createElement(_primitives.Box, {
     "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && "".concat(testId, "--current-month-year--container")
-  }, (0, _react2.jsx)(_heading.default, {
+  }, /*#__PURE__*/React.createElement(_heading.default, {
     level: "h400",
     as: "h2",
     id: headerId,
     testId: testId && "".concat(testId, "--current-month-year")
-  }, "".concat(monthLongTitle, " ").concat(year))), (0, _react2.jsx)(_standardButton.default, {
+  }, "".concat(monthLongTitle, " ").concat(year))), /*#__PURE__*/React.createElement(_standardButton.default, {
     appearance: "subtle",
     spacing: "none",
     tabIndex: tabIndex,
     onClick: handleNextMonthInteraction,
     testId: testId && "".concat(testId, "--next-month"),
-    iconBefore: (0, _react2.jsx)(_chevronRightLarge.default, {
+    iconBefore: /*#__PURE__*/React.createElement(_chevronRightLarge.default, {
       label: "".concat(nextMonthLabel, ", ").concat(nextHeading),
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(_colors.N700, ")"),

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

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
-/** @jsx jsx */
-
 /**
  * __Week day grid__
  *
@@ -18,12 +15,12 @@ var WeekDayGrid = function WeekDayGrid(_ref) {
   var testId = _ref.testId,
     children = _ref.children,
     isHidden = _ref.isHidden;
-  var row = (0, _react.jsx)(_primitives.Grid, {
+  var row = /*#__PURE__*/React.createElement(_primitives.Grid, {
     testId: testId,
     templateColumns: "repeat(7, minmax(max-content, 1fr))",
     role: "row"
   }, children);
-  return isHidden ? (0, _react.jsx)("div", {
+  return isHidden ? /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true"
   }, row) : row;
 };

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

@@ -6,12 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _react2 = require("@emotion/react");
 var _box = _interopRequireDefault(require("@atlaskit/primitives/box"));
 var _date = _interopRequireDefault(require("./date"));
 var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
-/** @jsx jsx */
-
 var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
   var weeks = _ref.weeks,
     handleClickDay = _ref.handleClickDay,
@@ -19,15 +16,15 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
     shouldSetFocus = _ref.shouldSetFocus,
     tabIndex = _ref.tabIndex,
     testId = _ref.testId;
-  return (0, _react2.jsx)(_box.default, {
+  return /*#__PURE__*/React.createElement(_box.default, {
     role: "rowgroup",
     testId: testId && "".concat(testId, "--month")
   }, weeks.map(function (week, i) {
-    return (0, _react2.jsx)(_weekDayGrid.default, {
+    return /*#__PURE__*/React.createElement(_weekDayGrid.default, {
       key: i,
       testId: testId && "".concat(testId, "--week")
     }, week.values.map(function (weekDay) {
-      return (0, _react2.jsx)(_date.default, {
+      return /*#__PURE__*/React.createElement(_date.default, {
         key: "".concat(week.id, "-").concat(weekDay.id),
         isDisabled: weekDay.isDisabled,
         isFocused: weekDay.isFocused,

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

@@ -1,3 +1,4 @@
+/* week-header.tsx generated by @compiled/babel-plugin v0.26.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,13 +6,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _runtime = require("@compiled/react/runtime");
 var _react = require("react");
-var _react2 = require("@emotion/react");
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 var _primitives = require("@atlaskit/primitives");
 var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
-/** @jsx jsx */
-
 var columnHeaderStyles = (0, _primitives.xcss)({
   minWidth: 'size.400',
   // Account for languages with short week day names
@@ -19,26 +18,27 @@ var columnHeaderStyles = (0, _primitives.xcss)({
   // Account for languages with long week day names
   textAlign: 'center',
   lineHeight: '16px',
-  color: 'color.text.subtle' // Apply correct fallback to shortDay text
+  color: 'color.text.subtle',
+  // Apply correct fallback to shortDay text
+  display: 'flex',
+  justifyContent: 'center'
 });
-
 var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
   var daysShort = _ref.daysShort,
     testId = _ref.testId;
-  return (0, _react2.jsx)(_weekDayGrid.default, {
+  return /*#__PURE__*/React.createElement(_weekDayGrid.default, {
     isHidden: true,
     testId: testId && "".concat(testId, "--column-headers")
   }, daysShort.map(function (shortDay) {
-    return (0, _react2.jsx)(_primitives.Box, {
+    return /*#__PURE__*/React.createElement(_primitives.Box, {
       padding: "space.100",
       xcss: columnHeaderStyles,
       key: shortDay,
       role: "columnheader",
       testId: testId && "".concat(testId, "--column-header")
-    }, (0, _react2.jsx)(_text.default, {
+    }, /*#__PURE__*/React.createElement(_text.default, {
       fontWeight: "bold",
       fontSize: "size.050",
-      verticalAlign: "middle",
       textTransform: "uppercase"
     }, shortDay));
   }));

package/dist/es2019/calendar.js

@@ -1,7 +1,7 @@
+/* calendar.tsx generated by @compiled/babel-plugin v0.26.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useState } from 'react';
-import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { Box, Stack, xcss } from '@atlaskit/primitives';
@@ -24,7 +24,7 @@ const boxStyles = xcss({
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "14.0.1"
+  packageVersion: "14.0.2"
 };
 const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -160,21 +160,21 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
     return `${monthsLong[previousMonth]} ${showPreviousYear ? yearValue - 1 : yearValue}`;
   };
   const headerId = useUniqueId('month-year-header');
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className,
     style: style,
     onBlur: handleContainerBlur,
     onFocus: handleContainerFocus,
     "data-testid": testId && `${testId}--container`,
     ref: ref
-  }, jsx(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     xcss: boxStyles,
     padding: "space.200",
     "aria-label": "calendar",
     testId: testId && `${testId}--calendar`
-  }, jsx(Stack, {
+  }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.150"
-  }, jsx(Header
+  }, /*#__PURE__*/React.createElement(Header
   // The month number needs to be translated to index in the month
   // name array e.g. 1 (January) -> 0
   , {
@@ -189,16 +189,16 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
     headerId: headerId,
     tabIndex: tabIndex,
     testId: testId
-  }), jsx(Box, {
+  }), /*#__PURE__*/React.createElement(Box, {
     role: "grid",
     tabIndex: tabIndex,
     onKeyDown: handleContainerKeyDown,
     "aria-labelledby": headerId,
     testId: testId && `${testId}--calendar-dates`
-  }, jsx(WeekHeaderComponent, {
+  }, /*#__PURE__*/React.createElement(WeekHeaderComponent, {
     daysShort: daysShort,
     testId: testId
-  }), jsx(WeekDaysComponent, {
+  }), /*#__PURE__*/React.createElement(WeekDaysComponent, {
     weeks: weeks,
     handleClickDay: handleClickDay,
     monthsLong: monthsLong,
@@ -218,7 +218,7 @@ const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
-  return jsx(InnerCalendar, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(InnerCalendar, _extends({}, props, {
     ref: ref
   }));
 }));

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

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { Grid } from '@atlaskit/primitives';
 import { dateCellStyles as getDateCellStyles } from '../styles/date';
@@ -57,10 +56,10 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
     }
   }, [onClick]);
   const dateCellStyles = css(getDateCellStyles());
-  return jsx(Grid, {
+  return /*#__PURE__*/React.createElement(Grid, {
     role: "gridcell",
     alignItems: "center"
-  }, jsx("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: dateCellStyles,
     "aria-current": isToday ? 'date' : undefined,

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import { memo, useState } from 'react';
-import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import Heading from '@atlaskit/heading';
 import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
@@ -43,40 +41,40 @@ const Header = /*#__PURE__*/memo(function Header({
     }
     handleClickNext(e);
   };
-  return jsx(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     paddingInline: "space.100"
-  }, jsx(Inline, {
+  }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.0",
     alignBlock: "center",
     spread: "space-between"
-  }, jsx(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     spacing: "none",
     tabIndex: tabIndex,
     onClick: handlePrevMonthInteraction,
     testId: testId && `${testId}--previous-month`,
-    iconBefore: jsx(ArrowleftIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ArrowleftIcon, {
       label: `${previousMonthLabel}, ${previousHeading}`,
       size: "medium",
       primaryColor: `var(--ds-icon, ${N700})`,
       testId: testId && `${testId}--previous-month-icon`
     })
-  }), jsx(Box, {
+  }), /*#__PURE__*/React.createElement(Box, {
     "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && `${testId}--current-month-year--container`
-  }, jsx(Heading, {
+  }, /*#__PURE__*/React.createElement(Heading, {
     level: "h400",
     as: "h2",
     id: headerId,
     testId: testId && `${testId}--current-month-year`
-  }, `${monthLongTitle} ${year}`)), jsx(Button, {
+  }, `${monthLongTitle} ${year}`)), /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     spacing: "none",
     tabIndex: tabIndex,
     onClick: handleNextMonthInteraction,
     testId: testId && `${testId}--next-month`,
-    iconBefore: jsx(ArrowrightIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ArrowrightIcon, {
       label: `${nextMonthLabel}, ${nextHeading}`,
       size: "medium",
       primaryColor: `var(--ds-icon, ${N700})`,

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

@@ -1,6 +1,3 @@
-/** @jsx jsx */
-
-import { jsx } from '@emotion/react';
 import { Grid } from '@atlaskit/primitives';
 /**
  * __Week day grid__
@@ -13,12 +10,12 @@ const WeekDayGrid = ({
   children,
   isHidden
 }) => {
-  const row = jsx(Grid, {
+  const row = /*#__PURE__*/React.createElement(Grid, {
     testId: testId,
     templateColumns: "repeat(7, minmax(max-content, 1fr))",
     role: "row"
   }, children);
-  return isHidden ? jsx("div", {
+  return isHidden ? /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true"
   }, row) : row;
 };

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import { memo } from 'react';
-import { jsx } from '@emotion/react';
 import Box from '@atlaskit/primitives/box';
 import DateComponent from './date';
 import WeekdayGrid from './week-day-grid';
@@ -12,13 +10,13 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
   tabIndex,
   testId
 }) {
-  return jsx(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     role: "rowgroup",
     testId: testId && `${testId}--month`
-  }, weeks.map((week, i) => jsx(WeekdayGrid, {
+  }, weeks.map((week, i) => /*#__PURE__*/React.createElement(WeekdayGrid, {
     key: i,
     testId: testId && `${testId}--week`
-  }, week.values.map(weekDay => jsx(DateComponent, {
+  }, week.values.map(weekDay => /*#__PURE__*/React.createElement(DateComponent, {
     key: `${week.id}-${weekDay.id}`,
     isDisabled: weekDay.isDisabled,
     isFocused: weekDay.isFocused,

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

@@ -1,6 +1,6 @@
-/** @jsx jsx */
+/* week-header.tsx generated by @compiled/babel-plugin v0.26.1 */
+import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-import { jsx } from '@emotion/react';
 import Text from '@atlaskit/ds-explorations/text';
 import { Box, xcss } from '@atlaskit/primitives';
 import WeekDayGrid from './week-day-grid';
@@ -11,26 +11,27 @@ const columnHeaderStyles = xcss({
   // Account for languages with long week day names
   textAlign: 'center',
   lineHeight: '16px',
-  color: 'color.text.subtle' // Apply correct fallback to shortDay text
+  color: 'color.text.subtle',
+  // Apply correct fallback to shortDay text
+  display: 'flex',
+  justifyContent: 'center'
 });
-
 const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
   daysShort,
   testId
 }) {
-  return jsx(WeekDayGrid, {
+  return /*#__PURE__*/React.createElement(WeekDayGrid, {
     isHidden: true,
     testId: testId && `${testId}--column-headers`
-  }, daysShort.map(shortDay => jsx(Box, {
+  }, daysShort.map(shortDay => /*#__PURE__*/React.createElement(Box, {
     padding: "space.100",
     xcss: columnHeaderStyles,
     key: shortDay,
     role: "columnheader",
     testId: testId && `${testId}--column-header`
-  }, jsx(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     fontWeight: "bold",
     fontSize: "size.050",
-    verticalAlign: "middle",
     textTransform: "uppercase"
   }, shortDay))));
 });

package/dist/esm/calendar.js

@@ -1,11 +1,11 @@
+/* calendar.tsx generated by @compiled/babel-plugin v0.26.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/** @jsx jsx */
 import { forwardRef, memo, useState } from 'react';
-import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { Box, Stack, xcss } from '@atlaskit/primitives';
@@ -28,7 +28,7 @@ var boxStyles = xcss({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "14.0.1"
+  packageVersion: "14.0.2"
 };
 var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -182,21 +182,21 @@ var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     return "".concat(monthsLong[previousMonth], " ").concat(showPreviousYear ? yearValue - 1 : yearValue);
   };
   var headerId = useUniqueId('month-year-header');
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className,
     style: style,
     onBlur: handleContainerBlur,
     onFocus: handleContainerFocus,
     "data-testid": testId && "".concat(testId, "--container"),
     ref: ref
-  }, jsx(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     xcss: boxStyles,
     padding: "space.200",
     "aria-label": "calendar",
     testId: testId && "".concat(testId, "--calendar")
-  }, jsx(Stack, {
+  }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.150"
-  }, jsx(Header
+  }, /*#__PURE__*/React.createElement(Header
   // The month number needs to be translated to index in the month
   // name array e.g. 1 (January) -> 0
   , {
@@ -211,16 +211,16 @@ var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     headerId: headerId,
     tabIndex: tabIndex,
     testId: testId
-  }), jsx(Box, {
+  }), /*#__PURE__*/React.createElement(Box, {
     role: "grid",
     tabIndex: tabIndex,
     onKeyDown: handleContainerKeyDown,
     "aria-labelledby": headerId,
     testId: testId && "".concat(testId, "--calendar-dates")
-  }, jsx(WeekHeaderComponent, {
+  }, /*#__PURE__*/React.createElement(WeekHeaderComponent, {
     daysShort: daysShort,
     testId: testId
-  }), jsx(WeekDaysComponent, {
+  }), /*#__PURE__*/React.createElement(WeekDaysComponent, {
     weeks: weeks,
     handleClickDay: handleClickDay,
     monthsLong: monthsLong,
@@ -240,7 +240,7 @@ var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
 var Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
-  return jsx(InnerCalendar, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(InnerCalendar, _extends({}, props, {
     ref: ref
   }));
 }));

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

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { Grid } from '@atlaskit/primitives';
 import { dateCellStyles as getDateCellStyles } from '../styles/date';
@@ -62,10 +61,10 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref2, _ref)
     }
   }, [onClick]);
   var dateCellStyles = css(getDateCellStyles());
-  return jsx(Grid, {
+  return /*#__PURE__*/React.createElement(Grid, {
     role: "gridcell",
     alignItems: "center"
-  }, jsx("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: dateCellStyles,
     "aria-current": isToday ? 'date' : undefined,

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

@@ -1,7 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
 import { memo, useState } from 'react';
-import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import Heading from '@atlaskit/heading';
 import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
@@ -48,40 +46,40 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
     }
     handleClickNext(e);
   };
-  return jsx(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     paddingInline: "space.100"
-  }, jsx(Inline, {
+  }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.0",
     alignBlock: "center",
     spread: "space-between"
-  }, jsx(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     spacing: "none",
     tabIndex: tabIndex,
     onClick: handlePrevMonthInteraction,
     testId: testId && "".concat(testId, "--previous-month"),
-    iconBefore: jsx(ArrowleftIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ArrowleftIcon, {
       label: "".concat(previousMonthLabel, ", ").concat(previousHeading),
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(N700, ")"),
       testId: testId && "".concat(testId, "--previous-month-icon")
     })
-  }), jsx(Box, {
+  }), /*#__PURE__*/React.createElement(Box, {
     "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && "".concat(testId, "--current-month-year--container")
-  }, jsx(Heading, {
+  }, /*#__PURE__*/React.createElement(Heading, {
     level: "h400",
     as: "h2",
     id: headerId,
     testId: testId && "".concat(testId, "--current-month-year")
-  }, "".concat(monthLongTitle, " ").concat(year))), jsx(Button, {
+  }, "".concat(monthLongTitle, " ").concat(year))), /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     spacing: "none",
     tabIndex: tabIndex,
     onClick: handleNextMonthInteraction,
     testId: testId && "".concat(testId, "--next-month"),
-    iconBefore: jsx(ArrowrightIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(ArrowrightIcon, {
       label: "".concat(nextMonthLabel, ", ").concat(nextHeading),
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(N700, ")"),

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

@@ -1,6 +1,3 @@
-/** @jsx jsx */
-
-import { jsx } from '@emotion/react';
 import { Grid } from '@atlaskit/primitives';
 /**
  * __Week day grid__
@@ -12,12 +9,12 @@ var WeekDayGrid = function WeekDayGrid(_ref) {
   var testId = _ref.testId,
     children = _ref.children,
     isHidden = _ref.isHidden;
-  var row = jsx(Grid, {
+  var row = /*#__PURE__*/React.createElement(Grid, {
     testId: testId,
     templateColumns: "repeat(7, minmax(max-content, 1fr))",
     role: "row"
   }, children);
-  return isHidden ? jsx("div", {
+  return isHidden ? /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true"
   }, row) : row;
 };

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import { memo } from 'react';
-import { jsx } from '@emotion/react';
 import Box from '@atlaskit/primitives/box';
 import DateComponent from './date';
 import WeekdayGrid from './week-day-grid';
@@ -11,15 +9,15 @@ var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
     shouldSetFocus = _ref.shouldSetFocus,
     tabIndex = _ref.tabIndex,
     testId = _ref.testId;
-  return jsx(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     role: "rowgroup",
     testId: testId && "".concat(testId, "--month")
   }, weeks.map(function (week, i) {
-    return jsx(WeekdayGrid, {
+    return /*#__PURE__*/React.createElement(WeekdayGrid, {
       key: i,
       testId: testId && "".concat(testId, "--week")
     }, week.values.map(function (weekDay) {
-      return jsx(DateComponent, {
+      return /*#__PURE__*/React.createElement(DateComponent, {
         key: "".concat(week.id, "-").concat(weekDay.id),
         isDisabled: weekDay.isDisabled,
         isFocused: weekDay.isFocused,

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

@@ -1,6 +1,6 @@
-/** @jsx jsx */
+/* week-header.tsx generated by @compiled/babel-plugin v0.26.1 */
+import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-import { jsx } from '@emotion/react';
 import Text from '@atlaskit/ds-explorations/text';
 import { Box, xcss } from '@atlaskit/primitives';
 import WeekDayGrid from './week-day-grid';
@@ -11,26 +11,27 @@ var columnHeaderStyles = xcss({
   // Account for languages with long week day names
   textAlign: 'center',
   lineHeight: '16px',
-  color: 'color.text.subtle' // Apply correct fallback to shortDay text
+  color: 'color.text.subtle',
+  // Apply correct fallback to shortDay text
+  display: 'flex',
+  justifyContent: 'center'
 });
-
 var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
   var daysShort = _ref.daysShort,
     testId = _ref.testId;
-  return jsx(WeekDayGrid, {
+  return /*#__PURE__*/React.createElement(WeekDayGrid, {
     isHidden: true,
     testId: testId && "".concat(testId, "--column-headers")
   }, daysShort.map(function (shortDay) {
-    return jsx(Box, {
+    return /*#__PURE__*/React.createElement(Box, {
       padding: "space.100",
       xcss: columnHeaderStyles,
       key: shortDay,
       role: "columnheader",
       testId: testId && "".concat(testId, "--column-header")
-    }, jsx(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       fontWeight: "bold",
       fontSize: "size.050",
-      verticalAlign: "middle",
       textTransform: "uppercase"
     }, shortDay));
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "14.0.1",
+  "version": "14.0.2",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,15 +24,15 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.16.0",
+    "@atlaskit/button": "^16.17.0",
     "@atlaskit/ds-explorations": "^3.0.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.4.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/locale": "^2.6.0",
-    "@atlaskit/primitives": "^1.10.0",
+    "@atlaskit/primitives": "^1.13.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",

package/tmp/api-report-tmp.d.ts

@@ -1,92 +0,0 @@
-## API Report File for "@atlaskit/calendar"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { CSSProperties } from 'react';
-import { ForwardRefExoticComponent } from 'react';
-import { MemoExoticComponent } from 'react';
-import { RefAttributes } from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-
-// @public (undocumented)
-type ArrowKeys = 'down' | 'left' | 'right' | 'up';
-
-// @public
-const Calendar: MemoExoticComponent<ForwardRefExoticComponent<Pick<CalendarProps, "analyticsContext" | "calendarRef" | "className" | "createAnalyticsEvent" | "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabled" | "disabledDateFilter" | "locale" | "maxDate" | "minDate" | "month" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "onSelect" | "previousMonthLabel" | "previouslySelected" | "selected" | "style" | "tabIndex" | "testId" | "today" | "weekStartDay" | "year"> & RefAttributes<HTMLDivElement>>>;
-export default Calendar;
-
-// @public (undocumented)
-export interface CalendarProps extends WithAnalyticsEventsProps {
-    analyticsContext?: Record<string, any>;
-    // @internal
-    calendarRef?: React.Ref<CalendarRef>;
-    className?: string;
-    day?: number;
-    defaultDay?: number;
-    defaultMonth?: number;
-    defaultPreviouslySelected?: Array<string>;
-    defaultSelected?: Array<string>;
-    defaultYear?: number;
-    disabled?: Array<string>;
-    disabledDateFilter?: (date: string) => boolean;
-    locale?: string;
-    maxDate?: string;
-    minDate?: string;
-    month?: number;
-    nextMonthLabel?: string;
-    onBlur?: React.FocusEventHandler;
-    onChange?: (event: ChangeEvent, analyticsEvent: UIAnalyticsEvent) => void;
-    onFocus?: React.FocusEventHandler;
-    onSelect?: (event: SelectEvent, analyticsEvent: UIAnalyticsEvent) => void;
-    previouslySelected?: Array<string>;
-    previousMonthLabel?: string;
-    selected?: Array<string>;
-    style?: CSSProperties;
-    tabIndex?: TabIndex;
-    testId?: string;
-    today?: string;
-    weekStartDay?: WeekDay;
-    year?: number;
-}
-
-// @public (undocumented)
-export interface CalendarRef {
-    // (undocumented)
-    navigate: (type: ArrowKeys) => void;
-}
-
-// @public (undocumented)
-export type ChangeEvent = {
-    iso: ISODate;
-    type: 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
-} & DateObj;
-
-// @public (undocumented)
-type DateObj = {
-    day: number;
-    month: number;
-    year: number;
-};
-
-// @public (undocumented)
-type ISODate = string;
-
-// @public (undocumented)
-export type SelectEvent = {
-    iso: ISODate;
-} & DateObj;
-
-// @public (undocumented)
-type TabIndex = -1 | 0;
-
-// @public (undocumented)
-type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-
-// (No @packageDocumentation comment for this package)
-
-```