@atlaskit/calendar 17.2.19 → 18.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +32 -0
- package/calendar.docs.tsx +42 -40
- package/dist/cjs/calendar.js +1 -1
- package/dist/es2019/calendar.js +1 -1
- package/dist/esm/calendar.js +1 -1
- package/package.json +17 -24
- package/types/package.json +1 -8
- package/dist/types-ts4.5/calendar.d.ts +0 -12
- package/dist/types-ts4.5/entry-points/types.d.ts +0 -1
- package/dist/types-ts4.5/index.d.ts +0 -2
- package/dist/types-ts4.5/internal/components/date.d.ts +0 -21
- package/dist/types-ts4.5/internal/components/header.d.ts +0 -23
- package/dist/types-ts4.5/internal/components/week-day-grid.d.ts +0 -14
- package/dist/types-ts4.5/internal/components/week-days.d.ts +0 -13
- package/dist/types-ts4.5/internal/components/week-header.d.ts +0 -6
- package/dist/types-ts4.5/internal/constants.d.ts +0 -2
- package/dist/types-ts4.5/internal/hooks/use-controlled-date-state.d.ts +0 -37
- package/dist/types-ts4.5/internal/hooks/use-focusing.d.ts +0 -8
- package/dist/types-ts4.5/internal/hooks/use-get-weeks.d.ts +0 -16
- package/dist/types-ts4.5/internal/hooks/use-handle-date-change.d.ts +0 -27
- package/dist/types-ts4.5/internal/hooks/use-handle-date-select.d.ts +0 -30
- package/dist/types-ts4.5/internal/hooks/use-locale.d.ts +0 -9
- package/dist/types-ts4.5/internal/types.d.ts +0 -28
- package/dist/types-ts4.5/internal/utils/date-to-string.d.ts +0 -6
- package/dist/types-ts4.5/internal/utils/get-base-calendar.d.ts +0 -10
- package/dist/types-ts4.5/internal/utils/get-days-in-month.d.ts +0 -1
- package/dist/types-ts4.5/internal/utils/pad.d.ts +0 -1
- package/dist/types-ts4.5/types.d.ts +0 -152
- package/offerings.json +0 -34
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# @atlaskit/calendar
|
|
2
2
|
|
|
3
|
+
## 18.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
|
|
8
|
+
Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
|
|
9
|
+
|
|
10
|
+
Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
|
|
11
|
+
|
|
12
|
+
Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
|
|
13
|
+
|
|
14
|
+
```diff
|
|
15
|
+
- "typesVersions": {
|
|
16
|
+
- ">=4.5 <4.9": {
|
|
17
|
+
- "*": [
|
|
18
|
+
- "dist/types-ts4.5/*",
|
|
19
|
+
- "dist/types-ts4.5/index.d.ts"
|
|
20
|
+
- ]
|
|
21
|
+
- }
|
|
22
|
+
- },
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies
|
|
28
|
+
|
|
29
|
+
## 17.2.20
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Updated dependencies
|
|
34
|
+
|
|
3
35
|
## 17.2.19
|
|
4
36
|
|
|
5
37
|
### Patch Changes
|
package/calendar.docs.tsx
CHANGED
|
@@ -1,48 +1,50 @@
|
|
|
1
1
|
import path from 'path';
|
|
2
2
|
|
|
3
|
-
import type {
|
|
3
|
+
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
4
4
|
|
|
5
|
-
const documentation:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
description:
|
|
9
|
-
"A calendar component for date selection and display. This component is in Beta phase, meaning it's stable at version 1.0+ but may receive improvements based on customer feedback.",
|
|
10
|
-
status: 'general-availability',
|
|
11
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
12
8
|
name: 'Calendar',
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
usageGuidelines: [
|
|
19
|
-
'Use for date selection interfaces',
|
|
20
|
-
'Consider date range limitations',
|
|
21
|
-
'Provide clear visual feedback for selected dates',
|
|
22
|
-
'Handle disabled dates appropriately',
|
|
23
|
-
],
|
|
24
|
-
contentGuidelines: [
|
|
25
|
-
'Use clear date formatting',
|
|
26
|
-
'Provide helpful date labels',
|
|
27
|
-
'Use consistent date terminology',
|
|
28
|
-
'Consider localization for date display (e.g. locale prop, month/day names, first day of week)',
|
|
29
|
-
],
|
|
30
|
-
accessibilityGuidelines: [
|
|
31
|
-
'Provide clear date selection feedback',
|
|
32
|
-
'Ensure keyboard navigation between dates',
|
|
33
|
-
'Use appropriate ARIA labels for dates',
|
|
34
|
-
'Support screen reader announcements for date changes',
|
|
35
|
-
],
|
|
36
|
-
examples: [
|
|
37
|
-
{
|
|
9
|
+
description:
|
|
10
|
+
"A calendar component for date selection and display. This component is in Beta phase, meaning it's stable at version 1.0+ but may receive improvements based on customer feedback.",
|
|
11
|
+
status: 'general-availability',
|
|
12
|
+
import: {
|
|
38
13
|
name: 'Calendar',
|
|
39
|
-
|
|
40
|
-
|
|
14
|
+
package: '@atlaskit/calendar',
|
|
15
|
+
type: 'default',
|
|
16
|
+
packagePath: path.resolve(__dirname),
|
|
17
|
+
packageJson: require('./package.json'),
|
|
41
18
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
19
|
+
usageGuidelines: [
|
|
20
|
+
'Use for date selection interfaces',
|
|
21
|
+
'Consider date range limitations',
|
|
22
|
+
'Provide clear visual feedback for selected dates',
|
|
23
|
+
'Handle disabled dates appropriately',
|
|
24
|
+
],
|
|
25
|
+
contentGuidelines: [
|
|
26
|
+
'Use clear date formatting',
|
|
27
|
+
'Provide helpful date labels',
|
|
28
|
+
'Use consistent date terminology',
|
|
29
|
+
'Consider localization for date display (e.g. locale prop, month/day names, first day of week)',
|
|
30
|
+
],
|
|
31
|
+
accessibilityGuidelines: [
|
|
32
|
+
'Provide clear date selection feedback',
|
|
33
|
+
'Ensure keyboard navigation between dates',
|
|
34
|
+
'Use appropriate ARIA labels for dates',
|
|
35
|
+
'Support screen reader announcements for date changes',
|
|
36
|
+
],
|
|
37
|
+
examples: [
|
|
38
|
+
{
|
|
39
|
+
name: 'Calendar',
|
|
40
|
+
description: 'Calendar example',
|
|
41
|
+
source: path.resolve(__dirname, './examples/ai/calendar.tsx'),
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
keywords: ['calendar', 'date', 'picker', 'selection', 'month', 'year', 'beta'],
|
|
45
|
+
categories: ['form'],
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
};
|
|
47
49
|
|
|
48
50
|
export default documentation;
|
package/dist/cjs/calendar.js
CHANGED
|
@@ -36,7 +36,7 @@ var styles = {
|
|
|
36
36
|
var analyticsAttributes = {
|
|
37
37
|
componentName: 'calendar',
|
|
38
38
|
packageName: "@atlaskit/calendar",
|
|
39
|
-
packageVersion: "17.2.
|
|
39
|
+
packageVersion: "17.2.20"
|
|
40
40
|
};
|
|
41
41
|
var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
|
|
42
42
|
var day = _ref.day,
|
package/dist/es2019/calendar.js
CHANGED
package/dist/esm/calendar.js
CHANGED
|
@@ -27,7 +27,7 @@ var styles = {
|
|
|
27
27
|
var analyticsAttributes = {
|
|
28
28
|
componentName: 'calendar',
|
|
29
29
|
packageName: "@atlaskit/calendar",
|
|
30
|
-
packageVersion: "17.2.
|
|
30
|
+
packageVersion: "17.2.20"
|
|
31
31
|
};
|
|
32
32
|
var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
|
|
33
33
|
var day = _ref.day,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/calendar",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "18.0.0",
|
|
4
4
|
"description": "An interactive calendar for date selection experiences.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -31,16 +31,16 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@atlaskit/analytics-next": "^
|
|
35
|
-
"@atlaskit/button": "^
|
|
36
|
-
"@atlaskit/css": "^0.
|
|
37
|
-
"@atlaskit/ds-lib": "^
|
|
38
|
-
"@atlaskit/heading": "^
|
|
39
|
-
"@atlaskit/icon": "^
|
|
40
|
-
"@atlaskit/locale": "^
|
|
41
|
-
"@atlaskit/platform-feature-flags": "^
|
|
42
|
-
"@atlaskit/primitives": "^
|
|
43
|
-
"@atlaskit/tokens": "^
|
|
34
|
+
"@atlaskit/analytics-next": "^12.0.0",
|
|
35
|
+
"@atlaskit/button": "^24.0.0",
|
|
36
|
+
"@atlaskit/css": "^1.0.0",
|
|
37
|
+
"@atlaskit/ds-lib": "^8.0.0",
|
|
38
|
+
"@atlaskit/heading": "^6.0.0",
|
|
39
|
+
"@atlaskit/icon": "^36.0.0",
|
|
40
|
+
"@atlaskit/locale": "^5.0.0",
|
|
41
|
+
"@atlaskit/platform-feature-flags": "^2.0.0",
|
|
42
|
+
"@atlaskit/primitives": "^20.0.0",
|
|
43
|
+
"@atlaskit/tokens": "^14.0.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@compiled/react": "^0.20.0",
|
|
46
46
|
"date-fns": "^2.17.0"
|
|
@@ -52,17 +52,18 @@
|
|
|
52
52
|
"@af/accessibility-testing": "workspace:^",
|
|
53
53
|
"@af/integration-testing": "workspace:^",
|
|
54
54
|
"@af/visual-regression": "workspace:^",
|
|
55
|
-
"@atlaskit/docs": "^
|
|
56
|
-
"@atlaskit/form": "^
|
|
57
|
-
"@atlaskit/link": "^
|
|
58
|
-
"@atlaskit/section-message": "^
|
|
59
|
-
"@atlaskit/select": "^
|
|
55
|
+
"@atlaskit/docs": "^12.0.0",
|
|
56
|
+
"@atlaskit/form": "^16.0.0",
|
|
57
|
+
"@atlaskit/link": "^4.0.0",
|
|
58
|
+
"@atlaskit/section-message": "^9.0.0",
|
|
59
|
+
"@atlaskit/select": "^22.0.0",
|
|
60
60
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
61
61
|
"@atlassian/ssr-tests": "workspace:^",
|
|
62
62
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
63
63
|
"@testing-library/react": "^16.3.0",
|
|
64
64
|
"@testing-library/user-event": "^14.4.3",
|
|
65
65
|
"jest-in-case": "^1.0.2",
|
|
66
|
+
"react": "^18.2.0",
|
|
66
67
|
"react-dom": "^18.2.0"
|
|
67
68
|
},
|
|
68
69
|
"techstack": {
|
|
@@ -88,14 +89,6 @@
|
|
|
88
89
|
]
|
|
89
90
|
}
|
|
90
91
|
},
|
|
91
|
-
"typesVersions": {
|
|
92
|
-
">=4.5 <4.9": {
|
|
93
|
-
"*": [
|
|
94
|
-
"dist/types-ts4.5/*",
|
|
95
|
-
"dist/types-ts4.5/index.d.ts"
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
92
|
"platform-feature-flags": {
|
|
100
93
|
"platform-dst-shape-theme-default": {
|
|
101
94
|
"type": "boolean"
|
package/types/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/types.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/types.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/types.d.ts"
|
|
17
10
|
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { CalendarProps } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* __Calendar__
|
|
4
|
-
*
|
|
5
|
-
* A calendar is used for date selection.
|
|
6
|
-
*
|
|
7
|
-
* - [Examples](https://atlassian.design/components/calendar/examples)
|
|
8
|
-
* - [Code](https://atlassian.design/components/calendar/code)
|
|
9
|
-
* - [Usage](https://atlassian.design/components/calendar/usage)
|
|
10
|
-
*/
|
|
11
|
-
declare const Calendar: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<CalendarProps, 'ref'> & import('react').RefAttributes<HTMLDivElement>>>;
|
|
12
|
-
export default Calendar;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { CalendarProps, ChangeEvent, SelectEvent, WeekDay } from '../types';
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { TabIndex } from '../../types';
|
|
2
|
-
import type { DateObj } from '../types';
|
|
3
|
-
interface DateProps {
|
|
4
|
-
children: number;
|
|
5
|
-
isDisabled?: boolean;
|
|
6
|
-
isFocused?: boolean;
|
|
7
|
-
isToday?: boolean;
|
|
8
|
-
dayLong: string;
|
|
9
|
-
month: number;
|
|
10
|
-
monthLong: string;
|
|
11
|
-
onClick?: ({ day, month, year }: DateObj) => void;
|
|
12
|
-
isPreviouslySelected?: boolean;
|
|
13
|
-
isSelected?: boolean;
|
|
14
|
-
isSibling?: boolean;
|
|
15
|
-
year: number;
|
|
16
|
-
shouldSetFocus: boolean;
|
|
17
|
-
tabIndex: TabIndex;
|
|
18
|
-
testId?: string;
|
|
19
|
-
}
|
|
20
|
-
declare const Date: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<DateProps & import('react').RefAttributes<HTMLButtonElement>>>;
|
|
21
|
-
export default Date;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type TabIndex } from '../../types';
|
|
3
|
-
interface HeaderProps {
|
|
4
|
-
monthLongTitle: string;
|
|
5
|
-
year: number;
|
|
6
|
-
nextMonthLabel?: string;
|
|
7
|
-
nextYearLabel?: string;
|
|
8
|
-
nextMonthHeading: string;
|
|
9
|
-
nextYearHeading: string;
|
|
10
|
-
previousMonthLabel?: string;
|
|
11
|
-
previousYearLabel?: string;
|
|
12
|
-
previousMonthHeading: string;
|
|
13
|
-
previousYearHeading: string;
|
|
14
|
-
handleClickNextMonth: (e: React.MouseEvent<HTMLElement>) => void;
|
|
15
|
-
handleClickNextYear: (e: React.MouseEvent<HTMLElement>) => void;
|
|
16
|
-
handleClickPrevMonth: (e: React.MouseEvent<HTMLElement>) => void;
|
|
17
|
-
handleClickPrevYear: (e: React.MouseEvent<HTMLElement>) => void;
|
|
18
|
-
headerId: string;
|
|
19
|
-
tabIndex?: TabIndex;
|
|
20
|
-
testId?: string;
|
|
21
|
-
}
|
|
22
|
-
declare const Header: React.NamedExoticComponent<HeaderProps>;
|
|
23
|
-
export default Header;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React, { type ReactNode } from 'react';
|
|
2
|
-
interface WeekDayGridProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
-
testId?: string;
|
|
4
|
-
children: ReactNode;
|
|
5
|
-
isHidden?: boolean;
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* __Week day grid__
|
|
9
|
-
*
|
|
10
|
-
* A week day grid aligns elements in a 7 wide grid layout.
|
|
11
|
-
*
|
|
12
|
-
*/
|
|
13
|
-
declare const WeekDayGrid: ({ testId, children, isHidden }: WeekDayGridProps) => React.JSX.Element;
|
|
14
|
-
export default WeekDayGrid;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { TabIndex } from '../../types';
|
|
3
|
-
import { type DateObj, type Week } from '../types';
|
|
4
|
-
interface WeekDaysProps {
|
|
5
|
-
weeks: Week[];
|
|
6
|
-
handleClickDay: (date: DateObj) => void;
|
|
7
|
-
monthsLong: string[];
|
|
8
|
-
shouldSetFocus: boolean;
|
|
9
|
-
tabIndex: TabIndex;
|
|
10
|
-
testId?: string;
|
|
11
|
-
}
|
|
12
|
-
declare const WeekDays: React.NamedExoticComponent<WeekDaysProps>;
|
|
13
|
-
export default WeekDays;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
export default function useControlledDateState({ day, defaultDay, month, defaultMonth, year, defaultYear, today, selected, defaultSelected, previouslySelected, defaultPreviouslySelected, }: {
|
|
2
|
-
day?: number;
|
|
3
|
-
defaultDay: number;
|
|
4
|
-
month?: number;
|
|
5
|
-
defaultMonth: number;
|
|
6
|
-
year?: number;
|
|
7
|
-
defaultYear: number;
|
|
8
|
-
today?: string;
|
|
9
|
-
selected?: Array<string>;
|
|
10
|
-
defaultSelected: Array<string>;
|
|
11
|
-
previouslySelected?: Array<string>;
|
|
12
|
-
defaultPreviouslySelected: Array<string>;
|
|
13
|
-
}): {
|
|
14
|
-
readonly day: readonly [
|
|
15
|
-
number,
|
|
16
|
-
(newValue: number) => void
|
|
17
|
-
];
|
|
18
|
-
readonly month: readonly [
|
|
19
|
-
number,
|
|
20
|
-
(newValue: number) => void
|
|
21
|
-
];
|
|
22
|
-
readonly year: readonly [
|
|
23
|
-
number,
|
|
24
|
-
(newValue: number) => void
|
|
25
|
-
];
|
|
26
|
-
readonly today: readonly [
|
|
27
|
-
string
|
|
28
|
-
];
|
|
29
|
-
readonly selected: readonly [
|
|
30
|
-
string[],
|
|
31
|
-
(newValue: string[]) => void
|
|
32
|
-
];
|
|
33
|
-
readonly previous: readonly [
|
|
34
|
-
string[],
|
|
35
|
-
(newValue: string[]) => void
|
|
36
|
-
];
|
|
37
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { type default as React } from 'react';
|
|
2
|
-
export default function useFocusing({ onBlur, onFocus, }: {
|
|
3
|
-
onBlur: React.FocusEventHandler;
|
|
4
|
-
onFocus: React.FocusEventHandler;
|
|
5
|
-
}): {
|
|
6
|
-
handleContainerBlur: (event: React.FocusEvent) => void;
|
|
7
|
-
handleContainerFocus: (event: React.FocusEvent) => void;
|
|
8
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { WeekDay } from '../../types';
|
|
2
|
-
import type { Week } from '../types';
|
|
3
|
-
export default function useGetWeeks({ day, daysLong, month, year, today, disabled, disabledDateFilter, minDate: minDateString, maxDate: maxDateString, selected, previouslySelected, weekStartDay, }: {
|
|
4
|
-
day: number;
|
|
5
|
-
daysLong: string[];
|
|
6
|
-
month: number;
|
|
7
|
-
year: number;
|
|
8
|
-
today: string;
|
|
9
|
-
disabled?: string[];
|
|
10
|
-
disabledDateFilter?: (date: string) => boolean;
|
|
11
|
-
minDate?: string;
|
|
12
|
-
maxDate?: string;
|
|
13
|
-
selected: string[];
|
|
14
|
-
previouslySelected: string[];
|
|
15
|
-
weekStartDay: WeekDay;
|
|
16
|
-
}): Week[];
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { ChangeEvent } from '../../types';
|
|
2
|
-
import type { ArrowKeys } from '../types';
|
|
3
|
-
export default function useHandleDateChange({ day: [dayValue, setDayValue], month: [monthValue, setMonthValue], year: [yearValue, setYearValue], shouldSetFocus: [_shouldSetFocus, setShouldSetFocus], onChange, }: {
|
|
4
|
-
day: readonly [
|
|
5
|
-
number,
|
|
6
|
-
(newValue: number) => void
|
|
7
|
-
];
|
|
8
|
-
month: readonly [
|
|
9
|
-
number,
|
|
10
|
-
(newValue: number) => void
|
|
11
|
-
];
|
|
12
|
-
year: readonly [
|
|
13
|
-
number,
|
|
14
|
-
(newValue: number) => void
|
|
15
|
-
];
|
|
16
|
-
shouldSetFocus: readonly [
|
|
17
|
-
boolean,
|
|
18
|
-
(newValue: boolean) => void
|
|
19
|
-
];
|
|
20
|
-
onChange: (event: ChangeEvent) => void;
|
|
21
|
-
}): {
|
|
22
|
-
navigate: (type: ArrowKeys) => void;
|
|
23
|
-
handleClickNextMonth: () => void;
|
|
24
|
-
handleClickNextYear: () => void;
|
|
25
|
-
handleClickPrevMonth: () => void;
|
|
26
|
-
handleClickPrevYear: () => void;
|
|
27
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { type default as React } from 'react';
|
|
2
|
-
import type { SelectEvent } from '../../types';
|
|
3
|
-
import type { ArrowKeys, DateObj } from '../types';
|
|
4
|
-
export default function useHandleDateSelect({ day: [dayValue], month: [monthValue], year: [yearValue], selected: [selectedValue, setSelectedValue], previous: [, setPreviouslySelectedValue], onSelect, navigate, }: {
|
|
5
|
-
day: readonly [
|
|
6
|
-
number,
|
|
7
|
-
(newValue: number) => void
|
|
8
|
-
];
|
|
9
|
-
month: readonly [
|
|
10
|
-
number,
|
|
11
|
-
(newValue: number) => void
|
|
12
|
-
];
|
|
13
|
-
year: readonly [
|
|
14
|
-
number,
|
|
15
|
-
(newValue: number) => void
|
|
16
|
-
];
|
|
17
|
-
selected: [
|
|
18
|
-
string[],
|
|
19
|
-
(newValue: string[]) => void
|
|
20
|
-
];
|
|
21
|
-
previous: [
|
|
22
|
-
unknown,
|
|
23
|
-
(newValue: string[]) => void
|
|
24
|
-
];
|
|
25
|
-
onSelect: (event: SelectEvent) => void;
|
|
26
|
-
navigate: (type: ArrowKeys) => void;
|
|
27
|
-
}): {
|
|
28
|
-
handleClickDay: ({ year, month, day }: DateObj) => void;
|
|
29
|
-
handleContainerKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
30
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type { WeekDay } from '../types';
|
|
2
|
-
export type ArrowKeys = 'left' | 'up' | 'right' | 'down';
|
|
3
|
-
export type DateObj = {
|
|
4
|
-
day: number;
|
|
5
|
-
month: number;
|
|
6
|
-
year: number;
|
|
7
|
-
};
|
|
8
|
-
interface WeekDayState {
|
|
9
|
-
isDisabled: boolean;
|
|
10
|
-
isFocused: boolean;
|
|
11
|
-
isToday: boolean;
|
|
12
|
-
isPreviouslySelected: boolean;
|
|
13
|
-
isSelected: boolean;
|
|
14
|
-
isSiblingMonth: boolean;
|
|
15
|
-
}
|
|
16
|
-
export interface Week {
|
|
17
|
-
id: string;
|
|
18
|
-
values: Array<{
|
|
19
|
-
id: string;
|
|
20
|
-
weekDayName: string;
|
|
21
|
-
} & DateObj & WeekDayState>;
|
|
22
|
-
}
|
|
23
|
-
export interface CalendarDate extends DateObj {
|
|
24
|
-
weekDay?: WeekDay;
|
|
25
|
-
siblingMonth?: boolean;
|
|
26
|
-
}
|
|
27
|
-
export type ISODate = string;
|
|
28
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Logic taken from https://github.com/WesSouza/calendar-base which is not maintained for quite sometime.
|
|
3
|
-
* This will help us fixing any issue we might get or any new functionality we might want to support.
|
|
4
|
-
* Not changing much code below. Just removed those parts which we don't need.
|
|
5
|
-
*/
|
|
6
|
-
import type { WeekDay } from '../../types';
|
|
7
|
-
import type { CalendarDate } from '../types';
|
|
8
|
-
export default function getBaseCalendar(year: number, month: number, { weekStartDay, }?: {
|
|
9
|
-
weekStartDay?: WeekDay;
|
|
10
|
-
}): CalendarDate[];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function getDaysInMonth(year: number, month: number): number;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function pad(num: number): string;
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
import { type CSSProperties } from 'react';
|
|
2
|
-
import { type UIAnalyticsEvent, type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
3
|
-
import type { DateObj, ISODate } from './internal/types';
|
|
4
|
-
export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
5
|
-
export type TabIndex = -1 | 0;
|
|
6
|
-
export type ChangeEvent = {
|
|
7
|
-
iso: ISODate;
|
|
8
|
-
type: 'left' | 'up' | 'right' | 'down' | 'prevMonth' | 'prevYear' | 'nextMonth' | 'nextYear';
|
|
9
|
-
} & DateObj;
|
|
10
|
-
export type SelectEvent = {
|
|
11
|
-
iso: ISODate;
|
|
12
|
-
} & DateObj;
|
|
13
|
-
export interface CalendarProps extends WithAnalyticsEventsProps {
|
|
14
|
-
/**
|
|
15
|
-
* The number of the day currently focused. Places border around the date. Enter `0` to highlight no date.
|
|
16
|
-
*/
|
|
17
|
-
day?: number;
|
|
18
|
-
/**
|
|
19
|
-
* Sets the default value for `day`.
|
|
20
|
-
*/
|
|
21
|
-
defaultDay?: number;
|
|
22
|
-
/**
|
|
23
|
-
* Sets the default value for `month`.
|
|
24
|
-
*/
|
|
25
|
-
defaultMonth?: number;
|
|
26
|
-
/**
|
|
27
|
-
* Sets the default value for `previouslySelected`.
|
|
28
|
-
*/
|
|
29
|
-
defaultPreviouslySelected?: Array<string>;
|
|
30
|
-
/**
|
|
31
|
-
* Sets the default value for `selected`.
|
|
32
|
-
*/
|
|
33
|
-
defaultSelected?: Array<string>;
|
|
34
|
-
/**
|
|
35
|
-
* Sets the default value for `year`.
|
|
36
|
-
*/
|
|
37
|
-
defaultYear?: number;
|
|
38
|
-
/**
|
|
39
|
-
* Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates provided are greyed out and not selectable.
|
|
40
|
-
*/
|
|
41
|
-
disabled?: Array<string>;
|
|
42
|
-
/**
|
|
43
|
-
* A filter function that takes a date string in the format 'YYYY-MM-DD' and returns true if that date should be disabled.
|
|
44
|
-
*/
|
|
45
|
-
disabledDateFilter?: (date: string) => boolean;
|
|
46
|
-
/**
|
|
47
|
-
* The latest enabled date. All dates in the future after this date will be disabled.
|
|
48
|
-
*/
|
|
49
|
-
maxDate?: string;
|
|
50
|
-
/**
|
|
51
|
-
* The earliest enabled date. All dates in the past before this date will be disabled.
|
|
52
|
-
*/
|
|
53
|
-
minDate?: string;
|
|
54
|
-
/**
|
|
55
|
-
* The number of the month (from 1 to 12) which the calendar should be on.
|
|
56
|
-
*/
|
|
57
|
-
month?: number;
|
|
58
|
-
/**
|
|
59
|
-
* The aria-label attribute associated with the next month arrow, to describe it to assistive technology.
|
|
60
|
-
*/
|
|
61
|
-
nextMonthLabel?: string;
|
|
62
|
-
/**
|
|
63
|
-
* Function which is called when the calendar is no longer focused.
|
|
64
|
-
*/
|
|
65
|
-
onBlur?: React.FocusEventHandler;
|
|
66
|
-
/**
|
|
67
|
-
* Called when the calendar is navigated. This can be triggered by the keyboard, or by clicking the navigational buttons.
|
|
68
|
-
* The 'interface' property indicates the the direction the calendar was navigated whereas the 'iso' property is a string of the format YYYY-MM-DD.
|
|
69
|
-
*/
|
|
70
|
-
onChange?: (event: ChangeEvent, analyticsEvent: UIAnalyticsEvent) => void;
|
|
71
|
-
/**
|
|
72
|
-
* Called when the calendar receives focus. This could be called from a mouse event on the container, or by tabbing into it.
|
|
73
|
-
*/
|
|
74
|
-
onFocus?: React.FocusEventHandler;
|
|
75
|
-
/**
|
|
76
|
-
* Function called when a day is clicked on. Calls with an object that has
|
|
77
|
-
* a day, month and year property as numbers, representing the date just clicked.
|
|
78
|
-
* It also has an 'iso' property, which is a string of the selected date in the
|
|
79
|
-
* format YYYY-MM-DD.
|
|
80
|
-
*/
|
|
81
|
-
onSelect?: (event: SelectEvent, analyticsEvent: UIAnalyticsEvent) => void;
|
|
82
|
-
/**
|
|
83
|
-
* Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
|
|
84
|
-
* provided are given a background color.
|
|
85
|
-
*/
|
|
86
|
-
previouslySelected?: Array<string>;
|
|
87
|
-
/**
|
|
88
|
-
* The aria-label attribute associated with the previous month arrow, to describe it to assistive technology.
|
|
89
|
-
*/
|
|
90
|
-
previousMonthLabel?: string;
|
|
91
|
-
/**
|
|
92
|
-
* Takes an array of dates as string in the format 'YYYY-MM-DD'. All dates
|
|
93
|
-
* provided are given a background color.
|
|
94
|
-
*/
|
|
95
|
-
selected?: Array<string>;
|
|
96
|
-
/**
|
|
97
|
-
* Value of current day, as a string in the format 'YYYY-MM-DD'.
|
|
98
|
-
*/
|
|
99
|
-
today?: string;
|
|
100
|
-
/**
|
|
101
|
-
* Year to display the calendar for.
|
|
102
|
-
*/
|
|
103
|
-
year?: number;
|
|
104
|
-
/**
|
|
105
|
-
* BCP 47 language tag (e.g. `ja-JP`) that ensures dates are in the official format for the locale.
|
|
106
|
-
*/
|
|
107
|
-
locale?: string;
|
|
108
|
-
/**
|
|
109
|
-
* Additional information to be included in the `context` of analytics events.
|
|
110
|
-
*/
|
|
111
|
-
analyticsContext?: Record<string, any>;
|
|
112
|
-
/**
|
|
113
|
-
* Start day of the week for the calendar. The mapping between numbers and days of the week is as follows:
|
|
114
|
-
* - `0` Sunday (default value)
|
|
115
|
-
* - `1` Monday
|
|
116
|
-
* - `2` Tuesday
|
|
117
|
-
* - `3` Wednesday
|
|
118
|
-
* - `4` Thursday
|
|
119
|
-
* - `5` Friday
|
|
120
|
-
* - `6` Saturday
|
|
121
|
-
*/
|
|
122
|
-
weekStartDay?: WeekDay;
|
|
123
|
-
/**
|
|
124
|
-
* 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
|
|
125
|
-
*
|
|
126
|
-
* - testId--container - Outermost container containing everything inside calendar
|
|
127
|
-
* - testId--month - Container containing all available days for the month
|
|
128
|
-
* - testId--previous-month - Button to show next month
|
|
129
|
-
* - testId--next-month - Button to show previous month
|
|
130
|
-
* - testId--current-month-year - Text containing the current month and year
|
|
131
|
-
* - testId--selected-day - The currently selected day (may be missing if a date isn’t selected)
|
|
132
|
-
*/
|
|
133
|
-
testId?: string;
|
|
134
|
-
/**
|
|
135
|
-
* Class name to apply to the calendar.
|
|
136
|
-
*/
|
|
137
|
-
className?: string;
|
|
138
|
-
/**
|
|
139
|
-
* Style customization to apply to the calendar.
|
|
140
|
-
*/
|
|
141
|
-
style?: CSSProperties;
|
|
142
|
-
/**
|
|
143
|
-
* Indicates if the calendar can be focused by keyboard or only
|
|
144
|
-
* programmatically. Defaults to "0".
|
|
145
|
-
*/
|
|
146
|
-
tabIndex?: TabIndex;
|
|
147
|
-
/**
|
|
148
|
-
* This allows the calendar to automatically set the focus to the current day.
|
|
149
|
-
* The default is false.
|
|
150
|
-
*/
|
|
151
|
-
shouldSetFocusOnCurrentDay?: boolean;
|
|
152
|
-
}
|
package/offerings.json
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
[
|
|
2
|
-
{
|
|
3
|
-
"name": "Calendar",
|
|
4
|
-
"package": "@atlaskit/calendar",
|
|
5
|
-
"import": {
|
|
6
|
-
"name": "Calendar",
|
|
7
|
-
"package": "@atlaskit/calendar",
|
|
8
|
-
"type": "default"
|
|
9
|
-
},
|
|
10
|
-
"keywords": ["calendar", "date", "picker", "selection", "month", "year", "beta"],
|
|
11
|
-
"categories": ["form"],
|
|
12
|
-
"shortDescription": "A calendar component for date selection and display. This component is in Beta phase, meaning it's stable at version 1.0+ but may receive improvements based on customer feedback.",
|
|
13
|
-
"status": "general-availability",
|
|
14
|
-
"accessibilityGuidelines": [
|
|
15
|
-
"Provide clear date selection feedback",
|
|
16
|
-
"Ensure keyboard navigation between dates",
|
|
17
|
-
"Use appropriate ARIA labels for dates",
|
|
18
|
-
"Support screen reader announcements for date changes"
|
|
19
|
-
],
|
|
20
|
-
"usageGuidelines": [
|
|
21
|
-
"Use for date selection interfaces",
|
|
22
|
-
"Consider date range limitations",
|
|
23
|
-
"Provide clear visual feedback for selected dates",
|
|
24
|
-
"Handle disabled dates appropriately"
|
|
25
|
-
],
|
|
26
|
-
"contentGuidelines": [
|
|
27
|
-
"Use clear date formatting",
|
|
28
|
-
"Provide helpful date labels",
|
|
29
|
-
"Consider localization for date display",
|
|
30
|
-
"Use consistent date terminology"
|
|
31
|
-
],
|
|
32
|
-
"examples": ["./examples/ai/calendar.tsx"]
|
|
33
|
-
}
|
|
34
|
-
]
|