@atlaskit/calendar 12.1.12 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/calendar
 
+## 12.2.0
+
+### Minor Changes
+
+- [`6f7a4353204`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f7a4353204) - Added ability to provide custom aria-labels for next- and previous-month buttons using `nextMonthLabel` and `previousMonthLabel`
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.14
+
+### Patch Changes
+
+- [`c8c7eec9fb8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c8c7eec9fb8) - [ux] Updates tokens used for selected hovered state
+
+## 12.1.13
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.12
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -83,7 +83,7 @@ var gridsContainerStyles = (0, _core.css)({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.12"
+  packageVersion: "12.2.0"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -102,6 +102,7 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       minDate = _ref.minDate,
       maxDate = _ref.maxDate,
       month = _ref.month,
+      nextMonthLabel = _ref.nextMonthLabel,
       _ref$onBlur = _ref.onBlur,
       onBlur = _ref$onBlur === void 0 ? _noop.default : _ref$onBlur,
       _ref$onChange = _ref.onChange,
@@ -111,6 +112,7 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       _ref$onSelect = _ref.onSelect,
       onSelect = _ref$onSelect === void 0 ? _noop.default : _ref$onSelect,
       previouslySelected = _ref.previouslySelected,
+      previousMonthLabel = _ref.previousMonthLabel,
       selected = _ref.selected,
       today = _ref.today,
       _ref$locale = _ref.locale,
@@ -249,6 +251,8 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
   , {
     monthLongTitle: monthsLong[monthValue - 1],
     year: yearValue,
+    nextMonthLabel: nextMonthLabel,
+    previousMonthLabel: previousMonthLabel,
     handleClickNext: handleClickNext,
     handleClickPrev: handleClickPrev,
     mode: mode,

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

@@ -49,6 +49,10 @@ var arrowRightStyles = (0, _core.css)({
 var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
       year = _ref.year,
+      _ref$previousMonthLab = _ref.previousMonthLabel,
+      previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Last month' : _ref$previousMonthLab,
+      _ref$nextMonthLabel = _ref.nextMonthLabel,
+      nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
       handleClickPrev = _ref.handleClickPrev,
       handleClickNext = _ref.handleClickNext,
       mode = _ref.mode,
@@ -67,9 +71,10 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
     onClick: handleClickPrev,
     testId: testId && "".concat(testId, "--previous-month"),
     iconBefore: (0, _core.jsx)(_chevronLeftLarge.default, {
-      label: "Last month",
+      label: previousMonthLabel,
       size: "medium",
-      primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")")
+      primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
+      testId: testId && "".concat(testId, "--previous-month-icon")
     })
   }), (0, _core.jsx)("div", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -83,9 +88,10 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
     onClick: handleClickNext,
     testId: testId && "".concat(testId, "--next-month"),
     iconBefore: (0, _core.jsx)(_chevronRightLarge.default, {
-      label: "Next month",
+      label: nextMonthLabel,
       size: "medium",
-      primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")")
+      primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
+      testId: testId && "".concat(testId, "--next-month-icon")
     })
   }));
 });

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

@@ -88,10 +88,10 @@ var dateCellStyles = function dateCellStyles() {
       color: textColor[mode]
     },
     '&[data-selected]:hover': {
-      color: textColorMedium
+      backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.B50, ")"),
+      color: "var(--ds-text-selected, ".concat(_colors.N600, ")")
     },
     '&[data-prev-selected]:hover': {
-      backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
       color: textColorMedium
     },
     '&[data-sibling]:hover': {

package/dist/cjs/version.json

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

package/dist/es2019/calendar.js

@@ -48,7 +48,7 @@ const gridsContainerStyles = css({
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.12"
+  packageVersion: "12.2.0"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -62,11 +62,13 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   minDate,
   maxDate,
   month,
+  nextMonthLabel,
   onBlur = noop,
   onChange = noop,
   onFocus = noop,
   onSelect = noop,
   previouslySelected,
+  previousMonthLabel,
   selected,
   today,
   locale = 'en-US',
@@ -189,6 +191,8 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   , {
     monthLongTitle: monthsLong[monthValue - 1],
     year: yearValue,
+    nextMonthLabel: nextMonthLabel,
+    previousMonthLabel: previousMonthLabel,
     handleClickNext: handleClickNext,
     handleClickPrev: handleClickPrev,
     mode: mode,

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

@@ -31,6 +31,8 @@ const arrowRightStyles = css({
 const Heading = /*#__PURE__*/memo(function Heading({
   monthLongTitle,
   year,
+  previousMonthLabel = 'Last month',
+  nextMonthLabel = 'Next month',
   handleClickPrev,
   handleClickNext,
   mode,
@@ -48,9 +50,10 @@ const Heading = /*#__PURE__*/memo(function Heading({
     onClick: handleClickPrev,
     testId: testId && `${testId}--previous-month`,
     iconBefore: jsx(ArrowleftIcon, {
-      label: "Last month",
+      label: previousMonthLabel,
       size: "medium",
-      primaryColor: `var(--ds-text-subtlest, ${N70})`
+      primaryColor: `var(--ds-text-subtlest, ${N70})`,
+      testId: testId && `${testId}--previous-month-icon`
     })
   }), jsx("div", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -64,9 +67,10 @@ const Heading = /*#__PURE__*/memo(function Heading({
     onClick: handleClickNext,
     testId: testId && `${testId}--next-month`,
     iconBefore: jsx(ArrowrightIcon, {
-      label: "Next month",
+      label: nextMonthLabel,
       size: "medium",
-      primaryColor: `var(--ds-text-subtlest, ${N70})`
+      primaryColor: `var(--ds-text-subtlest, ${N70})`,
+      testId: testId && `${testId}--next-month-icon`
     })
   }));
 });

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

@@ -77,10 +77,10 @@ export const dateCellStyles = (mode = 'light') => ({
     color: textColor[mode]
   },
   '&[data-selected]:hover': {
-    color: textColorMedium
+    backgroundColor: `var(--ds-background-selected-hovered, ${B50})`,
+    color: `var(--ds-text-selected, ${N600})`
   },
   '&[data-prev-selected]:hover': {
-    backgroundColor: `var(--ds-background-selected, ${B50})`,
     color: textColorMedium
   },
   '&[data-sibling]:hover': {

package/dist/es2019/version.json

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

package/dist/esm/calendar.js

@@ -54,7 +54,7 @@ var gridsContainerStyles = css({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.12"
+  packageVersion: "12.2.0"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -73,6 +73,7 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       minDate = _ref.minDate,
       maxDate = _ref.maxDate,
       month = _ref.month,
+      nextMonthLabel = _ref.nextMonthLabel,
       _ref$onBlur = _ref.onBlur,
       onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur,
       _ref$onChange = _ref.onChange,
@@ -82,6 +83,7 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       _ref$onSelect = _ref.onSelect,
       onSelect = _ref$onSelect === void 0 ? noop : _ref$onSelect,
       previouslySelected = _ref.previouslySelected,
+      previousMonthLabel = _ref.previousMonthLabel,
       selected = _ref.selected,
       today = _ref.today,
       _ref$locale = _ref.locale,
@@ -220,6 +222,8 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   , {
     monthLongTitle: monthsLong[monthValue - 1],
     year: yearValue,
+    nextMonthLabel: nextMonthLabel,
+    previousMonthLabel: previousMonthLabel,
     handleClickNext: handleClickNext,
     handleClickPrev: handleClickPrev,
     mode: mode,

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

@@ -34,6 +34,10 @@ var arrowRightStyles = css({
 var Heading = /*#__PURE__*/memo(function Heading(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
       year = _ref.year,
+      _ref$previousMonthLab = _ref.previousMonthLabel,
+      previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Last month' : _ref$previousMonthLab,
+      _ref$nextMonthLabel = _ref.nextMonthLabel,
+      nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
       handleClickPrev = _ref.handleClickPrev,
       handleClickNext = _ref.handleClickNext,
       mode = _ref.mode,
@@ -52,9 +56,10 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
     onClick: handleClickPrev,
     testId: testId && "".concat(testId, "--previous-month"),
     iconBefore: jsx(ArrowleftIcon, {
-      label: "Last month",
+      label: previousMonthLabel,
       size: "medium",
-      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")")
+      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")"),
+      testId: testId && "".concat(testId, "--previous-month-icon")
     })
   }), jsx("div", {
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -68,9 +73,10 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
     onClick: handleClickNext,
     testId: testId && "".concat(testId, "--next-month"),
     iconBefore: jsx(ArrowrightIcon, {
-      label: "Next month",
+      label: nextMonthLabel,
       size: "medium",
-      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")")
+      primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")"),
+      testId: testId && "".concat(testId, "--next-month-icon")
     })
   }));
 });

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

@@ -79,10 +79,10 @@ export var dateCellStyles = function dateCellStyles() {
       color: textColor[mode]
     },
     '&[data-selected]:hover': {
-      color: textColorMedium
+      backgroundColor: "var(--ds-background-selected-hovered, ".concat(B50, ")"),
+      color: "var(--ds-text-selected, ".concat(N600, ")")
     },
     '&[data-prev-selected]:hover': {
-      backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
       color: textColorMedium
     },
     '&[data-sibling]:hover': {

package/dist/esm/version.json

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

package/dist/types/calendar.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { CalendarProps } from './types';
-declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "year" | "mode" | "testId" | "style" | "disabled" | "selected" | "className" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "analyticsContext" | "day" | "month" | "defaultDay" | "defaultMonth" | "defaultYear" | "today" | "defaultSelected" | "previouslySelected" | "defaultPreviouslySelected" | "weekStartDay" | "disabledDateFilter" | "minDate" | "maxDate" | "locale" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "year" | "previousMonthLabel" | "nextMonthLabel" | "mode" | "testId" | "style" | "disabled" | "selected" | "className" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "analyticsContext" | "day" | "month" | "defaultDay" | "defaultMonth" | "defaultYear" | "today" | "defaultSelected" | "previouslySelected" | "defaultPreviouslySelected" | "weekStartDay" | "disabledDateFilter" | "minDate" | "maxDate" | "locale" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
 export default Calendar;

package/dist/types/internal/components/heading.d.ts

@@ -3,6 +3,8 @@ import { ThemeModes } from '@atlaskit/theme/types';
 interface Props {
     monthLongTitle: string;
     year: number;
+    previousMonthLabel?: string;
+    nextMonthLabel?: string;
     handleClickNext?: () => void;
     handleClickPrev?: () => void;
     mode?: ThemeModes;

package/dist/types/types.d.ts

@@ -34,6 +34,8 @@ export interface CalendarProps extends WithAnalyticsEventsProps {
     minDate?: string;
     /** The number of the month (from 1 to 12) which the calendar should be on. */
     month?: number;
+    /** The aria-label attribute associated with the next-month arrow. */
+    nextMonthLabel?: string;
     /** Function which is called when the calendar is no longer focused. */
     onBlur?: React.FocusEventHandler;
     /** Called when the calendar is navigated. This can be triggered by the keyboard, or by clicking the navigational buttons.
@@ -49,6 +51,8 @@ export interface CalendarProps extends WithAnalyticsEventsProps {
     /** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
      provided are given a background color. */
     previouslySelected?: Array<string>;
+    /** The aria-label attribute associated with the previous-month arrow. */
+    previousMonthLabel?: string;
     /** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
      provided are given a background color. */
     selected?: Array<string>;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "12.1.12",
+  "version": "12.2.0",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -18,17 +18,18 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Calendar"
+      "name": "Calendar",
+      "category": "Components"
     }
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/ds-lib": "^2.0.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/locale": "^2.3.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -40,7 +41,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/select": "^15.0.0",
+    "@atlaskit/select": "^15.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -60,6 +61,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",

package/types/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/types.js",
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/types.d.ts"
 }