@atlaskit/calendar 13.1.1 → 13.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/calendar
 
+## 13.1.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 13.1.1
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -33,7 +33,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.1"
+  packageVersion: "13.1.2"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,

package/dist/cjs/version.json

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

package/dist/es2019/calendar.js

@@ -23,7 +23,7 @@ import useUniqueId from './internal/hooks/use-unique-id';
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.1"
+  packageVersion: "13.1.2"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,

package/dist/es2019/version.json

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

package/dist/esm/calendar.js

@@ -27,7 +27,7 @@ import useUniqueId from './internal/hooks/use-unique-id';
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.1"
+  packageVersion: "13.1.2"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,

package/dist/esm/version.json

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

package/dist/types-ts4.5/calendar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { CalendarProps } from './types';
+/**
+ * __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" | "className" | "style" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "onSelect" | "disabled" | "selected" | "analyticsContext" | "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "previouslySelected" | "today" | "locale" | "weekStartDay" | "calendarRef" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
+export default Calendar;

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -0,0 +1 @@
+export type { CalendarProps, ChangeEvent, SelectEvent, CalendarRef, WeekDay, } from '../types';

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './calendar';
+export type { CalendarProps, ChangeEvent, SelectEvent, CalendarRef, } from './types';

package/dist/types-ts4.5/internal/components/date.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ThemeModes } from '@atlaskit/theme/types';
+import type { DateObj } from '../types';
+interface DateProps {
+    children: number;
+    isDisabled?: boolean;
+    isFocused?: boolean;
+    isToday?: boolean;
+    month: number;
+    onClick?: ({ day, month, year }: DateObj) => void;
+    isPreviouslySelected?: boolean;
+    isSelected?: boolean;
+    isSibling?: boolean;
+    year: number;
+    mode?: ThemeModes;
+    testId?: string;
+}
+declare const Date: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<DateProps & import("react").RefAttributes<HTMLButtonElement>>>;
+export default Date;

package/dist/types-ts4.5/internal/components/header.d.ts

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

package/dist/types-ts4.5/internal/components/week-day-grid.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+interface WeekDayGridProps extends React.HTMLAttributes<HTMLElement> {
+    testId?: string;
+    children: ReactNode;
+}
+/**
+ * __Week day grid__
+ *
+ * A week day grid aligns elements in a 7 wide grid layout.
+ *
+ */
+declare const WeekDayGrid: ({ testId, children }: WeekDayGridProps) => jsx.JSX.Element;
+export default WeekDayGrid;

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

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

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

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

package/dist/types-ts4.5/internal/constants.d.ts

@@ -0,0 +1,5 @@
+import type { ArrowKeys } from './types';
+export declare const arrowKeys: Record<string, ArrowKeys>;
+export declare const daysPerWeek = 7;
+export declare const monthsPerYear = 12;
+export declare const blankStringArray: Array<string>;

package/dist/types-ts4.5/internal/hooks/use-calendar-ref.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CalendarRef } from '../../types';
+export default function useCalendarRef(calendarRef: React.Ref<CalendarRef> | undefined, { navigate, }: {
+    navigate: CalendarRef['navigate'];
+}): void;

package/dist/types-ts4.5/internal/hooks/use-controlled-date-state.d.ts

@@ -0,0 +1,37 @@
+export default function useControlledDateState({ day, defaultDay, month, defaultMonth, year, defaultYear, today, selected, defaultSelected, previouslySelected, defaultPreviouslySelected, }: {
+    day?: number;
+    defaultDay: number;
+    month?: number;
+    defaultMonth: number;
+    year?: number;
+    defaultYear: number;
+    today?: string;
+    selected?: Array<string>;
+    defaultSelected: Array<string>;
+    previouslySelected?: Array<string>;
+    defaultPreviouslySelected: Array<string>;
+}): {
+    readonly day: readonly [
+        number,
+        (newValue: number) => void
+    ];
+    readonly month: readonly [
+        number,
+        (newValue: number) => void
+    ];
+    readonly year: readonly [
+        number,
+        (newValue: number) => void
+    ];
+    readonly today: readonly [
+        string
+    ];
+    readonly selected: readonly [
+        string[],
+        (newValue: string[]) => void
+    ];
+    readonly previous: readonly [
+        string[],
+        (newValue: string[]) => void
+    ];
+};

package/dist/types-ts4.5/internal/hooks/use-focusing.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function useFocusing({ onBlur, onFocus, }: {
+    onBlur: React.FocusEventHandler;
+    onFocus: React.FocusEventHandler;
+}): {
+    handleContainerBlur: (event: React.FocusEvent) => void;
+    handleContainerFocus: (event: React.FocusEvent) => void;
+};

package/dist/types-ts4.5/internal/hooks/use-get-weeks.d.ts

@@ -0,0 +1,15 @@
+import type { WeekDay } from '../../types';
+import type { Week } from '../types';
+export default function useGetWeeks({ day, month, year, today, disabled, disabledDateFilter, minDate: minDateString, maxDate: maxDateString, selected, previouslySelected, weekStartDay, }: {
+    day: number;
+    month: number;
+    year: number;
+    today: string;
+    disabled?: string[];
+    disabledDateFilter?: (date: string) => boolean;
+    minDate?: string;
+    maxDate?: string;
+    selected: string[];
+    previouslySelected: string[];
+    weekStartDay: WeekDay;
+}): Week[];

package/dist/types-ts4.5/internal/hooks/use-handle-date-change.d.ts

@@ -0,0 +1,21 @@
+import type { ChangeEvent } from '../../types';
+import type { ArrowKeys } from '../types';
+export default function useHandleDateChange({ day: [dayValue, setDayValue], month: [monthValue, setMonthValue], year: [yearValue, setYearValue], onChange, }: {
+    day: readonly [
+        number,
+        (newValue: number) => void
+    ];
+    month: readonly [
+        number,
+        (newValue: number) => void
+    ];
+    year: readonly [
+        number,
+        (newValue: number) => void
+    ];
+    onChange: (event: ChangeEvent) => void;
+}): {
+    navigate: (type: ArrowKeys) => void;
+    handleClickNext: () => void;
+    handleClickPrev: () => void;
+};

package/dist/types-ts4.5/internal/hooks/use-handle-date-select.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { SelectEvent } from '../../types';
+import type { ArrowKeys, DateObj } from '../types';
+export default function useHandleDateSelect({ day: [dayValue], month: [monthValue], year: [yearValue], selected: [selectedValue, setSelectedValue], previous: [, setPreviouslySelectedValue], onSelect, navigate, }: {
+    day: readonly [
+        number,
+        (newValue: number) => void
+    ];
+    month: readonly [
+        number,
+        (newValue: number) => void
+    ];
+    year: readonly [
+        number,
+        (newValue: number) => void
+    ];
+    selected: [
+        string[],
+        (newValue: string[]) => void
+    ];
+    previous: [
+        unknown,
+        (newValue: string[]) => void
+    ];
+    onSelect: (event: SelectEvent) => void;
+    navigate: (type: ArrowKeys) => void;
+}): {
+    handleClickDay: ({ year, month, day }: DateObj) => void;
+    handleContainerKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/types-ts4.5/internal/hooks/use-locale.d.ts

@@ -0,0 +1,8 @@
+import type { WeekDay } from '../../types';
+export default function useLocale({ locale, weekStartDay, }: {
+    locale: string;
+    weekStartDay: WeekDay;
+}): {
+    monthsLong: string[];
+    daysShort: string[];
+};

package/dist/types-ts4.5/internal/hooks/use-unique-id.d.ts

@@ -0,0 +1 @@
+export default function useUniqueId(prefix: string): string;

package/dist/types-ts4.5/internal/styles/date.d.ts

@@ -0,0 +1,3 @@
+import { CSSObject } from '@emotion/react';
+import { ThemeModes } from '@atlaskit/theme/types';
+export declare const dateCellStyles: (mode?: ThemeModes) => CSSObject;

package/dist/types-ts4.5/internal/types.d.ts

@@ -0,0 +1,26 @@
+import type { WeekDay } from '../types';
+export type ArrowKeys = 'left' | 'up' | 'right' | 'down';
+export type DateObj = {
+    day: number;
+    month: number;
+    year: number;
+};
+export interface WeekDayState {
+    isDisabled: boolean;
+    isFocused: boolean;
+    isToday: boolean;
+    isPreviouslySelected: boolean;
+    isSelected: boolean;
+    isSiblingMonth: boolean;
+}
+export interface Week {
+    id: string;
+    values: Array<{
+        id: string;
+    } & DateObj & WeekDayState>;
+}
+export interface CalendarDate extends DateObj {
+    weekDay?: WeekDay;
+    siblingMonth?: boolean;
+}
+export type ISODate = string;

package/dist/types-ts4.5/internal/utils/date-to-string.d.ts

@@ -0,0 +1,6 @@
+import type { DateObj } from '../types';
+interface DateToStringOptions {
+    fixMonth: boolean;
+}
+export default function dateToString(date: DateObj, options?: DateToStringOptions): string;
+export {};

package/dist/types-ts4.5/internal/utils/get-base-calendar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Logic taken from https://github.com/WesSouza/calendar-base which is not maintained for quite sometime.
+ * This will help us fixing any issue we might get or any new functionality we might want to support.
+ * Not changing much code below. Just removed those parts which we don't need.
+ */
+import type { WeekDay } from '../../types';
+import type { CalendarDate } from '../types';
+export default function getBaseCalendar(year: number, month: number, { weekStartDay, }?: {
+    weekStartDay?: WeekDay;
+}): CalendarDate[];

package/dist/types-ts4.5/internal/utils/get-days-in-month.d.ts

@@ -0,0 +1 @@
+export default function getDaysInMonth(year: number, month: number): number;

package/dist/types-ts4.5/internal/utils/pad.d.ts

@@ -0,0 +1 @@
+export default function pad(num: number): string;

package/dist/types-ts4.5/types.d.ts

@@ -0,0 +1,159 @@
+import { CSSProperties } from 'react';
+import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { ThemeModes } from '@atlaskit/theme/types';
+import type { ArrowKeys, DateObj, ISODate } from './internal/types';
+export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type ChangeEvent = {
+    iso: ISODate;
+    type: 'left' | 'up' | 'right' | 'down' | 'prev' | 'next';
+} & DateObj;
+export 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.
+     */
+    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;
+    /**
+     * 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": "13.1.1",
+  "version": "13.1.2",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.3.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/locale": "^2.4.0",
+    "@atlaskit/locale": "^2.5.0",
     "@atlaskit/primitives": "^0.9.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.4.0",