@atlaskit/calendar 12.4.1 → 12.4.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/calendar
 
+## 12.4.2
+
+### Patch Changes
+
+- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
+
 ## 12.4.1
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -58,7 +58,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var lightWrapperStyles = (0, _react2.css)({
   display: 'inline-block',
   boxSizing: 'border-box',
-  padding: 16,
+  // TODO Delete this comment after verifying spacing token -> previous value `16`
+  padding: "var(--ds-scale-200, 16px)",
   backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N0, ")"),
   color: "var(--ds-text, ".concat(_colors.N900, ")"),
   outline: 'none',
@@ -67,7 +68,8 @@ var lightWrapperStyles = (0, _react2.css)({
 var darkWrapperStyles = (0, _react2.css)({
   display: 'inline-block',
   boxSizing: 'border-box',
-  padding: 16,
+  // TODO Delete this comment after verifying spacing token -> previous value `16`
+  padding: "var(--ds-scale-200, 16px)",
   backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N700, ")"),
   color: "var(--ds-text, ".concat(_colors.DN600, ")"),
   outline: 'none',
@@ -76,14 +78,15 @@ var darkWrapperStyles = (0, _react2.css)({
 var gridsContainerStyles = (0, _react2.css)({
   display: 'inline-block',
   width: 289,
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginBottom: 5,
   textAlign: 'center'
 });
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.4.1"
+  packageVersion: "12.4.2"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,

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

@@ -26,7 +26,8 @@ var headingColor = {
 };
 var headingStyles = (0, _react2.css)({
   display: 'flex',
-  padding: '0 0 13px 0',
+  // TODO Delete this comment after verifying spacing tokens
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-0, 0px)", " 13px ", "var(--ds-scale-0, 0px)"),
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
   fontWeight: 'bold'
 });
@@ -41,10 +42,12 @@ var getMonthAndYearStyles = function getMonthAndYearStyles() {
 };
 
 var arrowLeftStyles = (0, _react2.css)({
-  marginLeft: 8
+  // TODO Delete this comment after verifying spacing token -> previous value `8`
+  marginLeft: "var(--ds-scale-100, 8px)"
 });
 var arrowRightStyles = (0, _react2.css)({
-  marginRight: 8
+  // TODO Delete this comment after verifying spacing token -> previous value `8`
+  marginRight: "var(--ds-scale-100, 8px)"
 });
 var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
   var monthLongTitle = _ref.monthLongTitle,

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

@@ -20,7 +20,7 @@ var dayNameGridStyles = (0, _react2.css)({
 var dayNameCellStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   minWidth: 40,
-  padding: '8px 8px',
+  padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-100, 8px)"),
   border: 0,
   color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
   fontSize: 11,

package/dist/cjs/version.json

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

package/dist/es2019/calendar.js

@@ -23,7 +23,8 @@ import useUniqueId from './internal/hooks/use-unique-id';
 const lightWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
-  padding: 16,
+  // TODO Delete this comment after verifying spacing token -> previous value `16`
+  padding: "var(--ds-scale-200, 16px)",
   backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N0})`,
   color: `var(--ds-text, ${N900})`,
   outline: 'none',
@@ -32,7 +33,8 @@ const lightWrapperStyles = css({
 const darkWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
-  padding: 16,
+  // TODO Delete this comment after verifying spacing token -> previous value `16`
+  padding: "var(--ds-scale-200, 16px)",
   backgroundColor: `var(--ds-UNSAFE_util-transparent, ${N700})`,
   color: `var(--ds-text, ${DN600})`,
   outline: 'none',
@@ -41,14 +43,15 @@ const darkWrapperStyles = css({
 const gridsContainerStyles = css({
   display: 'inline-block',
   width: 289,
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginBottom: 5,
   textAlign: 'center'
 });
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.4.1"
+  packageVersion: "12.4.2"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,

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

@@ -11,7 +11,8 @@ const headingColor = {
 };
 const headingStyles = css({
   display: 'flex',
-  padding: '0 0 13px 0',
+  // TODO Delete this comment after verifying spacing tokens
+  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-0, 0px)"} 13px ${"var(--ds-scale-0, 0px)"}`,
   color: `var(--ds-text, ${N800})`,
   fontWeight: 'bold'
 });
@@ -23,10 +24,12 @@ const getMonthAndYearStyles = (mode = 'light') => css({
 });
 
 const arrowLeftStyles = css({
-  marginLeft: 8
+  // TODO Delete this comment after verifying spacing token -> previous value `8`
+  marginLeft: "var(--ds-scale-100, 8px)"
 });
 const arrowRightStyles = css({
-  marginRight: 8
+  // TODO Delete this comment after verifying spacing token -> previous value `8`
+  marginRight: "var(--ds-scale-100, 8px)"
 });
 const Heading = /*#__PURE__*/memo(function Heading({
   monthLongTitle,

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

@@ -10,7 +10,7 @@ const dayNameGridStyles = css({
 const dayNameCellStyles = css({
   boxSizing: 'border-box',
   minWidth: 40,
-  padding: '8px 8px',
+  padding: `${"var(--ds-scale-100, 8px)"} ${"var(--ds-scale-100, 8px)"}`,
   border: 0,
   color: `var(--ds-text-subtle, ${N200})`,
   fontSize: 11,

package/dist/es2019/version.json

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

package/dist/esm/calendar.js

@@ -29,7 +29,8 @@ import useUniqueId from './internal/hooks/use-unique-id';
 var lightWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
-  padding: 16,
+  // TODO Delete this comment after verifying spacing token -> previous value `16`
+  padding: "var(--ds-scale-200, 16px)",
   backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(N0, ")"),
   color: "var(--ds-text, ".concat(N900, ")"),
   outline: 'none',
@@ -38,7 +39,8 @@ var lightWrapperStyles = css({
 var darkWrapperStyles = css({
   display: 'inline-block',
   boxSizing: 'border-box',
-  padding: 16,
+  // TODO Delete this comment after verifying spacing token -> previous value `16`
+  padding: "var(--ds-scale-200, 16px)",
   backgroundColor: "var(--ds-UNSAFE_util-transparent, ".concat(N700, ")"),
   color: "var(--ds-text, ".concat(DN600, ")"),
   outline: 'none',
@@ -47,14 +49,15 @@ var darkWrapperStyles = css({
 var gridsContainerStyles = css({
   display: 'inline-block',
   width: 289,
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginBottom: 5,
   textAlign: 'center'
 });
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "12.4.1"
+  packageVersion: "12.4.2"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,

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

@@ -11,7 +11,8 @@ var headingColor = {
 };
 var headingStyles = css({
   display: 'flex',
-  padding: '0 0 13px 0',
+  // TODO Delete this comment after verifying spacing tokens
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-0, 0px)", " 13px ", "var(--ds-scale-0, 0px)"),
   color: "var(--ds-text, ".concat(N800, ")"),
   fontWeight: 'bold'
 });
@@ -26,10 +27,12 @@ var getMonthAndYearStyles = function getMonthAndYearStyles() {
 };
 
 var arrowLeftStyles = css({
-  marginLeft: 8
+  // TODO Delete this comment after verifying spacing token -> previous value `8`
+  marginLeft: "var(--ds-scale-100, 8px)"
 });
 var arrowRightStyles = css({
-  marginRight: 8
+  // TODO Delete this comment after verifying spacing token -> previous value `8`
+  marginRight: "var(--ds-scale-100, 8px)"
 });
 var Heading = /*#__PURE__*/memo(function Heading(_ref) {
   var monthLongTitle = _ref.monthLongTitle,

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

@@ -10,7 +10,7 @@ var dayNameGridStyles = css({
 var dayNameCellStyles = css({
   boxSizing: 'border-box',
   minWidth: 40,
-  padding: '8px 8px',
+  padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-100, 8px)"),
   border: 0,
   color: "var(--ds-text-subtle, ".concat(N200, ")"),
   fontSize: 11,

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "12.4.1",
+  "version": "12.4.2",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -33,7 +35,7 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/locale": "^2.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -72,6 +74,7 @@
       "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/calendar"
+## API Report File for "@atlaskit/calendar".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -15,6 +17,15 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 
 declare type ArrowKeys = 'left' | 'up' | 'right' | 'down';
 
+/**
+ * __Calendar__
+ *
+ * A calendar is used for date selection.
+ *
+ * - [Examples](https://atlassian.design/components/calendar/examples)
+ * - [Code](https://atlassian.design/components/calendar/code)
+ * - [Usage](https://atlassian.design/components/calendar/usage)
+ */
 declare const Calendar: MemoExoticComponent<ForwardRefExoticComponent<
   Pick<
     CalendarProps,
@@ -24,13 +35,14 @@ declare const Calendar: MemoExoticComponent<ForwardRefExoticComponent<
     | 'mode'
     | 'testId'
     | 'style'
-    | 'disabled'
-    | 'selected'
     | 'className'
+    | 'tabIndex'
     | 'onFocus'
     | 'onBlur'
     | 'onChange'
     | 'onSelect'
+    | 'disabled'
+    | 'selected'
     | 'analyticsContext'
     | 'day'
     | 'month'
@@ -54,58 +66,104 @@ declare const Calendar: MemoExoticComponent<ForwardRefExoticComponent<
 export default Calendar;
 
 export declare interface CalendarProps extends WithAnalyticsEventsProps {
-  /** The number of the day currently focused. Places border around the date. 0 highlights no date. */
+  /**
+   * The number of the day currently focused. Places border around the date. 0 highlights no date.
+   */
   day?: number;
-  /** Default for `day`. */
+  /**
+   * Default for `day`.
+   */
   defaultDay?: number;
-  /** Default for `month`. */
+  /**
+   * Default for `month`.
+   */
   defaultMonth?: number;
-  /** Default for `previouslySelected`. */
+  /**
+   * Default for `previouslySelected`.
+   */
   defaultPreviouslySelected?: Array<string>;
-  /** Default for `selected`. */
+  /**
+   * Default for `selected`.
+   */
   defaultSelected?: Array<string>;
-  /** Default for `year`. */
+  /**
+   * Default for `year`.
+   */
   defaultYear?: number;
-  /** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates provided are greyed out.
-     This does not prevent these dates being selected. */
+  /**
+   * Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates provided are greyed out.
+   * This does not prevent these dates being selected.
+   */
   disabled?: Array<string>;
-  /** A filter function that takes a date string in the format 'YYYY-MM-DD' and returns true if that date should be disabled. */
+  /**
+   * A filter function that takes a date string in the format 'YYYY-MM-DD' and returns true if that date should be disabled.
+   */
   disabledDateFilter?: (date: string) => boolean;
-  /** The latest enabled date */
+  /**
+   * The latest enabled date
+   */
   maxDate?: string;
-  /** The earliest enabled date */
+  /**
+   * The earliest enabled date
+   */
   minDate?: string;
-  /** The number of the month (from 1 to 12) which the calendar should be on. */
+  /**
+   * 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. */
+  /**
+   * The aria-label attribute associated with the next-month arrow.
+   */
   nextMonthLabel?: string;
-  /** Function which is called when the calendar is no longer focused. */
+  /**
+   * 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.
-     The 'interface' property indicates the the direction the calendar was navigated whereas the 'iso' property is a string of the format YYYY-MM-DD. */
+  /**
+   * Called when the calendar is navigated. This can be triggered by the keyboard, or by clicking the navigational buttons.
+   * The 'interface' property indicates the the direction the calendar was navigated whereas the 'iso' property is a string of the format YYYY-MM-DD.
+   */
   onChange?: (event: ChangeEvent, analyticsEvent: UIAnalyticsEvent) => void;
-  /** Called when the calendar receives focus. This could be from a mouse event on the container by tabbing into it. */
+  /**
+   * Called when the calendar receives focus. This could be from a mouse event on the container by tabbing into it.
+   */
   onFocus?: React.FocusEventHandler;
-  /** Function called when a day is clicked on. Calls with an object that has
-     a day, month and year property as numbers, representing the date just clicked.
-     It also has an 'iso' property, which is a string of the selected date in the
-     format YYYY-MM-DD. */
+  /**
+   * Function called when a day is clicked on. Calls with an object that has
+   * a day, month and year property as numbers, representing the date just clicked.
+   * It also has an 'iso' property, which is a string of the selected date in the
+   * format YYYY-MM-DD.
+   */
   onSelect?: (event: SelectEvent, analyticsEvent: UIAnalyticsEvent) => void;
-  /** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
-     provided are given a background color. */
+  /**
+   * 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. */
+  /**
+   * 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. */
+  /**
+   * Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
+   * provided are given a background color.
+   */
   selected?: Array<string>;
-  /** Value of current day, as a string in the format 'YYYY-MM-DD'. */
+  /**
+   * Value of current day, as a string in the format 'YYYY-MM-DD'.
+   */
   today?: string;
-  /** Year to display the calendar for. */
+  /**
+   * Year to display the calendar for.
+   */
   year?: number;
-  /** BCP 47 language tag (e.g. ja-JP) that ensures dates are in the official format for the locale. */
+  /**
+   * BCP 47 language tag (e.g. ja-JP) that ensures dates are in the official format for the locale.
+   */
   locale?: string;
-  /** Additional information to be included in the `context` of analytics events. */
+  /**
+   * Additional information to be included in the `context` of analytics events.
+   */
   analyticsContext?: Record<string, any>;
   /**
    * Start day of the week for the calendar.
@@ -127,7 +185,7 @@ export declare interface CalendarProps extends WithAnalyticsEventsProps {
    * testId--next-month - Button to show previous month
    * testId--current-month-year - Text containing the current month and year
    * testId--selected-day - The currently selected day (may be missing if a date isn’t selected)
-   * */
+   */
   testId?: string;
   /**
    * Class name to apply to the calendar
@@ -146,6 +204,10 @@ export declare interface CalendarProps extends WithAnalyticsEventsProps {
    * @internal Legacy theme mode, can be either 'light' or 'dark'
    */
   mode?: ThemeModes;
+  /**
+   * Tab index indicates if the calendar can be focused by keyboard or only programmatically.
+   */
+  tabIndex?: number;
 }
 
 export declare interface CalendarRef {