@atlaskit/calendar 14.0.13 → 14.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/calendar
 
+## 14.2.0
+
+### Minor Changes
+
+- [#90213](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90213) [`aa06d98a6384`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aa06d98a6384) - Add support for React 18.
+
+## 14.1.0
+
+### Minor Changes
+
+- [#88752](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88752) [`c164ec1faceb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c164ec1faceb) - [ux] Internal changes to typography, small visual change to calendar week header text.
+
 ## 14.0.13
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -34,7 +34,7 @@ var boxStyles = (0, _primitives.xcss)({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "14.0.13"
+  packageVersion: "14.2.0"
 };
 var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,

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

@@ -74,7 +74,7 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
     id: announceId,
     testId: testId && "".concat(testId, "--current-month-year--container")
   }, (0, _react2.jsx)(_heading.default, {
-    level: "h400",
+    size: "xsmall",
     as: "h2",
     id: headerId,
     testId: testId && "".concat(testId, "--current-month-year")

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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 */
@@ -17,10 +16,6 @@ var columnHeaderStyles = (0, _primitives.xcss)({
   // Account for languages with short week day names
   whiteSpace: 'nowrap',
   // Account for languages with long week day names
-  textAlign: 'center',
-  lineHeight: '16px',
-  color: 'color.text.subtle',
-  // Apply correct fallback to shortDay text
   display: 'flex',
   justifyContent: 'center'
 });
@@ -37,10 +32,11 @@ var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
       key: shortDay,
       role: "columnheader",
       testId: testId && "".concat(testId, "--column-header")
-    }, (0, _react2.jsx)(_text.default, {
-      fontWeight: "bold",
-      fontSize: "size.050",
-      textTransform: "uppercase"
+    }, (0, _react2.jsx)(_primitives.Text, {
+      weight: "bold",
+      size: "UNSAFE_small",
+      align: "center",
+      color: "color.text.subtle"
     }, shortDay));
   }));
 });

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

@@ -17,7 +17,7 @@ var dateCellStyles = exports.dateCellStyles = function dateCellStyles() {
     color: "var(--ds-text, ".concat(_colors.N900, ")"),
     cursor: 'pointer',
     flexGrow: 1,
-    fontSize: "var(--ds-font-size-100, 14px)",
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     textAlign: 'center',
     '&[data-sibling]': {
       color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")

package/dist/es2019/calendar.js

@@ -24,7 +24,7 @@ const boxStyles = xcss({
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "14.0.13"
+  packageVersion: "14.2.0"
 };
 const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
   day,

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

@@ -61,7 +61,7 @@ const Header = /*#__PURE__*/memo(function Header({
     id: announceId,
     testId: testId && `${testId}--current-month-year--container`
   }, jsx(Heading, {
-    level: "h400",
+    size: "xsmall",
     as: "h2",
     id: headerId,
     testId: testId && `${testId}--current-month-year`

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

@@ -1,18 +1,13 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
-import Text from '@atlaskit/ds-explorations/text';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import WeekDayGrid from './week-day-grid';
 const columnHeaderStyles = xcss({
   minWidth: 'size.400',
   // Account for languages with short week day names
   whiteSpace: 'nowrap',
   // Account for languages with long week day names
-  textAlign: 'center',
-  lineHeight: '16px',
-  color: 'color.text.subtle',
-  // Apply correct fallback to shortDay text
   display: 'flex',
   justifyContent: 'center'
 });
@@ -30,9 +25,10 @@ const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
     role: "columnheader",
     testId: testId && `${testId}--column-header`
   }, jsx(Text, {
-    fontWeight: "bold",
-    fontSize: "size.050",
-    textTransform: "uppercase"
+    weight: "bold",
+    size: "UNSAFE_small",
+    align: "center",
+    color: "color.text.subtle"
   }, shortDay))));
 });
 WeekHeader.displayName = 'WeekHeader';

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

@@ -10,7 +10,7 @@ export const dateCellStyles = () => ({
   color: `var(--ds-text, ${N900})`,
   cursor: 'pointer',
   flexGrow: 1,
-  fontSize: "var(--ds-font-size-100, 14px)",
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   textAlign: 'center',
   '&[data-sibling]': {
     color: `var(--ds-text-subtlest, ${N200})`

package/dist/esm/calendar.js

@@ -28,7 +28,7 @@ var boxStyles = xcss({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "14.0.13"
+  packageVersion: "14.2.0"
 };
 var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,

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

@@ -66,7 +66,7 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
     id: announceId,
     testId: testId && "".concat(testId, "--current-month-year--container")
   }, jsx(Heading, {
-    level: "h400",
+    size: "xsmall",
     as: "h2",
     id: headerId,
     testId: testId && "".concat(testId, "--current-month-year")

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

@@ -1,18 +1,13 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
-import Text from '@atlaskit/ds-explorations/text';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import WeekDayGrid from './week-day-grid';
 var columnHeaderStyles = xcss({
   minWidth: 'size.400',
   // Account for languages with short week day names
   whiteSpace: 'nowrap',
   // Account for languages with long week day names
-  textAlign: 'center',
-  lineHeight: '16px',
-  color: 'color.text.subtle',
-  // Apply correct fallback to shortDay text
   display: 'flex',
   justifyContent: 'center'
 });
@@ -30,9 +25,10 @@ var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
       role: "columnheader",
       testId: testId && "".concat(testId, "--column-header")
     }, jsx(Text, {
-      fontWeight: "bold",
-      fontSize: "size.050",
-      textTransform: "uppercase"
+      weight: "bold",
+      size: "UNSAFE_small",
+      align: "center",
+      color: "color.text.subtle"
     }, shortDay));
   }));
 });

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

@@ -11,7 +11,7 @@ export var dateCellStyles = function dateCellStyles() {
     color: "var(--ds-text, ".concat(N900, ")"),
     cursor: 'pointer',
     flexGrow: 1,
-    fontSize: "var(--ds-font-size-100, 14px)",
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     textAlign: 'center',
     '&[data-sibling]': {
       color: "var(--ds-text-subtlest, ".concat(N200, ")")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "14.0.13",
+  "version": "14.2.0",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,26 +23,26 @@
     "website": {
       "name": "Calendar",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.8.0",
-    "@atlaskit/ds-explorations": "^3.3.0",
+    "@atlaskit/button": "^17.12.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^2.1.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/locale": "^2.6.0",
-    "@atlaskit/primitives": "^5.1.0",
+    "@atlaskit/primitives": "^5.5.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
     "react-uid": "^2.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",