@atlaskit/calendar 12.1.14 → 12.3.1

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

@@ -38,5 +38,6 @@ var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
     }));
   }));
 });
-WeekDays.displayName = 'WeekDays';
+WeekDays.displayName = 'WeekDays'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default WeekDays;

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

@@ -30,5 +30,6 @@ var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
     }, shortDay);
   }));
 });
-WeekHeader.displayName = 'WeekHeader';
+WeekHeader.displayName = 'WeekHeader'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default WeekHeader;

package/dist/esm/internal/hooks/use-calendar-ref.js

@@ -1,4 +1,5 @@
 import { useImperativeHandle } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useCalendarRef(calendarRef, _ref) {
   var navigate = _ref.navigate;
   useImperativeHandle(calendarRef, function () {

package/dist/esm/internal/hooks/use-controlled-date-state.js

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import useLazyRef from '@atlaskit/ds-lib/use-lazy-ref';
-import pad from '../utils/pad';
+import pad from '../utils/pad'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useControlledDateState(_ref) {
   var day = _ref.day,
       defaultDay = _ref.defaultDay,

package/dist/esm/internal/hooks/use-focusing.js

@@ -1,4 +1,5 @@
-import { useCallback } from 'react';
+import { useCallback } from 'react'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useFocusing(_ref) {
   var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus;

package/dist/esm/internal/hooks/use-get-weeks.js

@@ -34,7 +34,8 @@ function useGetCalendarWithSixthWeek(calendar, _ref) {
       });
     }
   }, [calendarLastValue, month, shouldDisplaySixthWeek, weekStartDay, year]);
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default function useGetWeeks(_ref2) {
   var day = _ref2.day,

package/dist/esm/internal/hooks/use-handle-date-change.js

@@ -42,7 +42,8 @@ var getPrevMonth = function getPrevMonth(monthValue, yearValue) {
     month: month,
     year: year
   };
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default function useHandleDateChange(_ref) {
   var _ref$day = _slicedToArray(_ref.day, 2),

package/dist/esm/internal/hooks/use-handle-date-select.js

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useEffect, useRef } from 'react';
 import { arrowKeys } from '../constants';
-import dateToString from '../utils/date-to-string';
+import dateToString from '../utils/date-to-string'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useHandleDateSelect(_ref) {
   var _ref$day = _slicedToArray(_ref.day, 1),
       dayValue = _ref$day[0],

package/dist/esm/internal/hooks/use-locale.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { createLocalizationProvider } from '@atlaskit/locale';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useLocale(_ref) {
   var locale = _ref.locale,
       weekStartDay = _ref.weekStartDay;

package/dist/esm/internal/hooks/use-unique-id.js

@@ -1,4 +1,5 @@
-import { useUIDSeed } from 'react-uid';
+import { useUIDSeed } from 'react-uid'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useUniqueId(prefix) {
   var seed = useUIDSeed();
   return "".concat(prefix, "-").concat(seed(prefix));

package/dist/esm/version.json

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

package/dist/types/calendar.d.ts

@@ -1,4 +1,13 @@
 /// <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>>>;
+/**
+ * __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: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "year" | "previousMonthLabel" | "nextMonthLabel" | "mode" | "testId" | "style" | "disabled" | "selected" | "className" | "tabIndex" | "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/date.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ThemeModes } from '@atlaskit/theme/types';
 import type { DateObj } from '../types';
-interface Props {
+interface DateProps {
     children: number;
     isDisabled?: boolean;
     isFocused?: boolean;
@@ -15,5 +15,5 @@ interface Props {
     mode?: ThemeModes;
     testId?: string;
 }
-declare const Date: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>>;
+declare const Date: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<DateProps & import("react").RefAttributes<HTMLButtonElement>>>;
 export default Date;

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { ThemeModes } from '@atlaskit/theme/types';
-interface Props {
+interface HeadingProps {
     monthLongTitle: string;
     year: number;
+    previousMonthLabel?: string;
+    nextMonthLabel?: string;
     handleClickNext?: () => void;
     handleClickPrev?: () => void;
     mode?: ThemeModes;
     testId?: string;
 }
-declare const Heading: import("react").NamedExoticComponent<Props>;
+declare const Heading: import("react").NamedExoticComponent<HeadingProps>;
 export default Heading;

package/dist/types/internal/components/week-days.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import type { ThemeModes } from '@atlaskit/theme/types';
 import { DateObj, Week } from '../types';
-interface Props {
+interface WeekDaysProps {
     weeks: Week[];
     handleClickDay: (date: DateObj) => void;
     mode?: ThemeModes;
     testId?: string;
 }
-declare const WeekDays: import("react").NamedExoticComponent<Props>;
+declare const WeekDays: import("react").NamedExoticComponent<WeekDaysProps>;
 export default WeekDays;

package/dist/types/internal/components/week-header.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { ThemeModes } from '@atlaskit/theme/types';
-interface Props {
+interface WeekHeaderProps {
     daysShort: string[];
     mode?: ThemeModes;
 }
-declare const WeekHeader: import("react").NamedExoticComponent<Props>;
+declare const WeekHeader: import("react").NamedExoticComponent<WeekHeaderProps>;
 export default WeekHeader;

package/dist/types/types.d.ts

@@ -11,54 +11,104 @@ export declare type SelectEvent = {
     iso: ISODate;
 } & DateObj;
 export 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;
-    /** Function which is called when the calendar is no longer focused. */
+    /**
+     * 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.
-     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>;
-    /** Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
-     provided are given a background color. */
+    /**
+     * 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>;
-    /** 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.
@@ -80,7 +130,7 @@ export 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
@@ -99,6 +149,10 @@ export 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 interface CalendarRef {
     navigate: (type: ArrowKeys) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "12.1.14",
+  "version": "12.3.1",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,18 +13,19 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "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.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/locale": "^2.3.0",
     "@atlaskit/theme": "^12.1.0",
@@ -40,7 +41,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -60,6 +61,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
@@ -71,8 +74,8 @@
     }
   },
   "af:exports": {
-    "./types": "./src/entry-points/types.ts",
-    ".": "./src/index.ts"
+    "./types": "./src/entry-points/types.tsx",
+    ".": "./src/index.tsx"
   },
   "homepage": "https://atlassian.design/components/calendar/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/report.api.md

@@ -0,0 +1,175 @@
+## 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 { ThemeModes } from '@atlaskit/theme/types';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+
+declare type ArrowKeys = 'left' | 'up' | 'right' | 'down';
+
+declare const Calendar: MemoExoticComponent<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'
+  > &
+    RefAttributes<HTMLDivElement>
+>>;
+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. */
+  day?: number;
+  /** Default for `day`. */
+  defaultDay?: number;
+  /** Default for `month`. */
+  defaultMonth?: number;
+  /** Default for `previouslySelected`. */
+  defaultPreviouslySelected?: Array<string>;
+  /** Default for `selected`. */
+  defaultSelected?: Array<string>;
+  /** 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. */
+  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. */
+  disabledDateFilter?: (date: string) => boolean;
+  /** The latest enabled date */
+  maxDate?: string;
+  /** The earliest enabled date */
+  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.
+     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. */
+  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. */
+  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. */
+  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>;
+  /** Value of current day, as a string in the format 'YYYY-MM-DD'. */
+  today?: string;
+  /** 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. */
+  locale?: string;
+  /** Additional information to be included in the `context` of analytics events. */
+  analyticsContext?: Record<string, any>;
+  /**
+   * Start day of the week for the calendar.
+   * - `0` sunday (default value)
+   * - `1` monday
+   * - `2` tuesday
+   * - `3` wednesday
+   * - `4` thursday
+   * - `5` friday
+   * - `6` saturday
+   */
+  weekStartDay?: WeekDay;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+   *
+   * testId--container - Outermost container containing everything inside calendar
+   * testId--month - Container containing all available days for the month
+   * testId--previous-month - Button to show next month
+   * 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
+   */
+  className?: string;
+  /**
+   * Style customization to apply to the calendar
+   */
+  style?: CSSProperties;
+  /**
+   * @internal An additional ref which exposes Calendar's internal api's. We kept this for
+   * backward compatibility. PLEASE DO NOT USE THIS.
+   */
+  calendarRef?: React.Ref<CalendarRef>;
+  /**
+   * @internal Legacy theme mode, can be either 'light' or 'dark'
+   */
+  mode?: ThemeModes;
+}
+
+export declare interface CalendarRef {
+  navigate: (type: ArrowKeys) => void;
+}
+
+export declare type ChangeEvent = {
+  iso: ISODate;
+  type: 'left' | 'up' | 'right' | 'down' | 'prev' | 'next';
+} & DateObj;
+
+declare type DateObj = {
+  day: number;
+  month: number;
+  year: number;
+};
+
+declare type ISODate = string;
+
+export declare type SelectEvent = {
+  iso: ISODate;
+} & DateObj;
+
+declare type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export {};
+```