@atlaskit/calendar 12.1.0 → 12.1.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/calendar
 
+## 12.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.3
+
+### Patch Changes
+
+- [`192d35cfdbd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/192d35cfdbd) - Defaults native button usage to type="button" to prevent unintended submittig of forms.
+- [`f7d71a9ba09`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7d71a9ba09) - Replaces visually hidden styles in component to instead use '@atlaskit/visually-hidden'.
+
+## 12.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.0
 
 ### Minor Changes

package/dist/cjs/calendar.js

@@ -27,6 +27,8 @@ var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 
 var _tokens = require("@atlaskit/tokens");
 
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+
 var _heading = _interopRequireDefault(require("./internal/components/heading"));
 
 var _weekDays = _interopRequireDefault(require("./internal/components/week-days"));
@@ -80,20 +82,10 @@ var gridsContainerStyles = (0, _core.css)({
   marginBottom: 5,
   textAlign: 'center'
 });
-var announcerStyles = (0, _core.css)({
-  width: 1,
-  height: 1,
-  margin: -1,
-  padding: 0,
-  position: 'absolute',
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  overflow: 'hidden'
-});
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.0"
+  packageVersion: "12.1.4"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -244,12 +236,11 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     role: "presentation",
     "data-testid": testId && "".concat(testId, "--container"),
     ref: ref
-  }, (0, _core.jsx)("div", {
-    css: announcerStyles,
+  }, (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
     id: announceId,
     "aria-live": "assertive",
     "aria-relevant": "text"
-  }, announcerDate), (0, _core.jsx)("div", {
+  }, announcerDate)), (0, _core.jsx)("div", {
     css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
     "aria-describedby": announceId,
     "aria-label": "calendar",

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

@@ -73,6 +73,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     css: dateCellStyles,
     "aria-selected": isSelected ? 'true' : 'false',
     tabIndex: isSelected ? 0 : -1,
+    type: "button",
     role: "gridcell",
     onClick: handleClick,
     ref: ref,

package/dist/cjs/version.json

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

package/dist/es2019/calendar.js

@@ -8,6 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { DN600, N0, N700, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import HeadingComponent from './internal/components/heading';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
@@ -45,20 +46,10 @@ const gridsContainerStyles = css({
   marginBottom: 5,
   textAlign: 'center'
 });
-const announcerStyles = css({
-  width: 1,
-  height: 1,
-  margin: -1,
-  padding: 0,
-  position: 'absolute',
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  overflow: 'hidden'
-});
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.0"
+  packageVersion: "12.1.4"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -184,12 +175,11 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     role: "presentation",
     "data-testid": testId && `${testId}--container`,
     ref: ref
-  }, jsx("div", {
-    css: announcerStyles,
+  }, jsx(VisuallyHidden, null, jsx("span", {
     id: announceId,
     "aria-live": "assertive",
     "aria-relevant": "text"
-  }, announcerDate), jsx("div", {
+  }, announcerDate)), jsx("div", {
     css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
     "aria-describedby": announceId,
     "aria-label": "calendar",

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

@@ -53,6 +53,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
     css: dateCellStyles,
     "aria-selected": isSelected ? 'true' : 'false',
     tabIndex: isSelected ? 0 : -1,
+    type: "button",
     role: "gridcell",
     onClick: handleClick,
     ref: ref,

package/dist/es2019/version.json

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

package/dist/esm/calendar.js

@@ -14,6 +14,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { DN600, N0, N700, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import HeadingComponent from './internal/components/heading';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
@@ -51,20 +52,10 @@ var gridsContainerStyles = css({
   marginBottom: 5,
   textAlign: 'center'
 });
-var announcerStyles = css({
-  width: 1,
-  height: 1,
-  margin: -1,
-  padding: 0,
-  position: 'absolute',
-  border: 0,
-  clip: 'rect(0 0 0 0)',
-  overflow: 'hidden'
-});
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.1.0"
+  packageVersion: "12.1.4"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -215,12 +206,11 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     role: "presentation",
     "data-testid": testId && "".concat(testId, "--container"),
     ref: ref
-  }, jsx("div", {
-    css: announcerStyles,
+  }, jsx(VisuallyHidden, null, jsx("span", {
     id: announceId,
     "aria-live": "assertive",
     "aria-relevant": "text"
-  }, announcerDate), jsx("div", {
+  }, announcerDate)), jsx("div", {
     css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
     "aria-describedby": announceId,
     "aria-label": "calendar",

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

@@ -60,6 +60,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
     css: dateCellStyles,
     "aria-selected": isSelected ? 'true' : 'false',
     tabIndex: isSelected ? 0 : -1,
+    type: "button",
     role: "gridcell",
     onClick: handleClick,
     ref: ref,

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "12.1.0",
+  "version": "12.1.4",
   "description": "A React component for displaying a calendar.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,10 +26,11 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/ds-lib": "^1.3.0",
-    "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/icon": "^21.9.0",
     "@atlaskit/locale": "^2.3.0",
-    "@atlaskit/theme": "^11.4.0",
-    "@atlaskit/tokens": "^0.1.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/visually-hidden": "^0.1.1",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "date-fns": "^2.17.0",