@atlaskit/datetime-picker 17.9.6 → 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 +26 -0
- package/__tests__/playwright/top-layer-focus.spec.tsx +85 -0
- package/dist/cjs/components/date-picker.js +1 -1
- package/dist/cjs/components/date-time-picker.js +1 -1
- package/dist/cjs/components/time-picker.js +1 -1
- package/dist/es2019/components/date-picker.js +1 -1
- package/dist/es2019/components/date-time-picker.js +1 -1
- package/dist/es2019/components/time-picker.js +1 -1
- package/dist/esm/components/date-picker.js +1 -1
- package/dist/esm/components/date-time-picker.js +1 -1
- package/dist/esm/components/time-picker.js +1 -1
- package/package.json +27 -35
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @atlaskit/datetime-picker
|
|
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
|
+
|
|
3
29
|
## 17.9.6
|
|
4
30
|
|
|
5
31
|
### Patch Changes
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { expect, test } from '@af/integration-testing';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Date picker: focus contract on the top-layer code path.
|
|
5
|
+
*
|
|
6
|
+
* `DatePicker` opens a `role="dialog"` calendar popover anchored to a
|
|
7
|
+
* react-select combobox `<input>`. Because the popover uses the dialog role
|
|
8
|
+
* (not `menu` / `listbox`), the combobox carve-out documented in
|
|
9
|
+
* `top-layer/notes/architecture/focus.md` does NOT apply: dialogs always
|
|
10
|
+
* move focus into the popover (to the first focusable, here the
|
|
11
|
+
* previous-year navigation button).
|
|
12
|
+
*
|
|
13
|
+
* The focus contract is therefore:
|
|
14
|
+
*
|
|
15
|
+
* 1. Open: focus moves to the first focusable inside the calendar dialog
|
|
16
|
+
* (the previous-year navigation button).
|
|
17
|
+
* 2. Escape: the popover closes and focus is restored to the combobox input.
|
|
18
|
+
* 3. Tab inside the open dialog: focus cycles through dialog focusables.
|
|
19
|
+
*
|
|
20
|
+
* See: `platform/packages/design-system/top-layer/notes/architecture/focus.md`.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
const featureFlag = 'platform-dst-top-layer';
|
|
24
|
+
|
|
25
|
+
test.describe('Date picker: top-layer focus contract', () => {
|
|
26
|
+
test('initial focus: focus moves to the first focusable in the calendar dialog on open', async ({
|
|
27
|
+
page,
|
|
28
|
+
}) => {
|
|
29
|
+
await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
|
|
30
|
+
'design-system',
|
|
31
|
+
'datetime-picker',
|
|
32
|
+
'testing-top-layer-focus',
|
|
33
|
+
{ featureFlag },
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
await page.getByTestId('date-picker--container').click();
|
|
37
|
+
|
|
38
|
+
const calendar = page.getByRole('dialog', { name: 'calendar' });
|
|
39
|
+
await expect(calendar).toBeVisible();
|
|
40
|
+
|
|
41
|
+
const previousYearButton = page.getByTestId('date-picker--calendar--previous-year');
|
|
42
|
+
await expect(previousYearButton).toBeFocused();
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
test('focus restoration: Escape closes the popover and focus returns to the combobox input', async ({
|
|
46
|
+
page,
|
|
47
|
+
}) => {
|
|
48
|
+
await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
|
|
49
|
+
'design-system',
|
|
50
|
+
'datetime-picker',
|
|
51
|
+
'testing-top-layer-focus',
|
|
52
|
+
{ featureFlag },
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
const combobox = page.getByRole('combobox');
|
|
56
|
+
await page.getByTestId('date-picker--container').click();
|
|
57
|
+
|
|
58
|
+
const calendar = page.getByRole('dialog', { name: 'calendar' });
|
|
59
|
+
await expect(calendar).toBeVisible();
|
|
60
|
+
|
|
61
|
+
await page.keyboard.press('Escape');
|
|
62
|
+
await expect(calendar).toBeHidden();
|
|
63
|
+
await expect(combobox).toBeFocused();
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
test('focus movement: Tab cycles between focusables inside the calendar dialog', async ({
|
|
67
|
+
page,
|
|
68
|
+
}) => {
|
|
69
|
+
await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
|
|
70
|
+
'design-system',
|
|
71
|
+
'datetime-picker',
|
|
72
|
+
'testing-top-layer-focus',
|
|
73
|
+
{ featureFlag },
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
await page.getByTestId('date-picker--container').click();
|
|
77
|
+
|
|
78
|
+
const previousYearButton = page.getByTestId('date-picker--calendar--previous-year');
|
|
79
|
+
await expect(previousYearButton).toBeFocused();
|
|
80
|
+
|
|
81
|
+
// `useFocusWrap` keeps Tab inside the dialog for role="dialog" popovers.
|
|
82
|
+
await page.keyboard.press('Tab');
|
|
83
|
+
await expect(previousYearButton).not.toBeFocused();
|
|
84
|
+
});
|
|
85
|
+
});
|
|
@@ -44,7 +44,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
44
44
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
45
45
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
46
46
|
var packageName = "@atlaskit/datetime-picker";
|
|
47
|
-
var packageVersion = "17.9.
|
|
47
|
+
var packageVersion = "17.9.6";
|
|
48
48
|
var styles = {
|
|
49
49
|
pickerContainerStyle: "_kqswh2mm",
|
|
50
50
|
dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
33
33
|
// for typing `process`
|
|
34
34
|
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
35
35
|
var packageName = "@atlaskit/datetime-picker";
|
|
36
|
-
var packageVersion = "17.9.
|
|
36
|
+
var packageVersion = "17.9.6";
|
|
37
37
|
var analyticsAttributes = {
|
|
38
38
|
componentName: 'dateTimePicker',
|
|
39
39
|
packageName: packageName,
|
|
@@ -30,7 +30,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
30
30
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
31
31
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
32
32
|
var packageName = "@atlaskit/datetime-picker";
|
|
33
|
-
var packageVersion = "17.9.
|
|
33
|
+
var packageVersion = "17.9.6";
|
|
34
34
|
var defaultTimeFormat = 'h:mma';
|
|
35
35
|
var menuStyles = {
|
|
36
36
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
@@ -31,7 +31,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
|
|
|
31
31
|
import { parseDate } from '../internal/parse-date';
|
|
32
32
|
import { makeSingleValue } from '../internal/single-value';
|
|
33
33
|
const packageName = "@atlaskit/datetime-picker";
|
|
34
|
-
const packageVersion = "17.9.
|
|
34
|
+
const packageVersion = "17.9.6";
|
|
35
35
|
const styles = {
|
|
36
36
|
pickerContainerStyle: "_kqswh2mm",
|
|
37
37
|
dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
20
20
|
import DatePicker from './date-picker';
|
|
21
21
|
import TimePicker from './time-picker';
|
|
22
22
|
const packageName = "@atlaskit/datetime-picker";
|
|
23
|
-
const packageVersion = "17.9.
|
|
23
|
+
const packageVersion = "17.9.6";
|
|
24
24
|
const analyticsAttributes = {
|
|
25
25
|
componentName: 'dateTimePicker',
|
|
26
26
|
packageName,
|
|
@@ -17,7 +17,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
17
17
|
import { placeholderDatetime } from '../internal/placeholder-date-time';
|
|
18
18
|
import { makeSingleValue } from '../internal/single-value';
|
|
19
19
|
const packageName = "@atlaskit/datetime-picker";
|
|
20
|
-
const packageVersion = "17.9.
|
|
20
|
+
const packageVersion = "17.9.6";
|
|
21
21
|
const defaultTimeFormat = 'h:mma';
|
|
22
22
|
const menuStyles = {
|
|
23
23
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
@@ -37,7 +37,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
|
|
|
37
37
|
import { parseDate } from '../internal/parse-date';
|
|
38
38
|
import { makeSingleValue } from '../internal/single-value';
|
|
39
39
|
var packageName = "@atlaskit/datetime-picker";
|
|
40
|
-
var packageVersion = "17.9.
|
|
40
|
+
var packageVersion = "17.9.6";
|
|
41
41
|
var styles = {
|
|
42
42
|
pickerContainerStyle: "_kqswh2mm",
|
|
43
43
|
dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
@@ -27,7 +27,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
27
27
|
import DatePicker from './date-picker';
|
|
28
28
|
import TimePicker from './time-picker';
|
|
29
29
|
var packageName = "@atlaskit/datetime-picker";
|
|
30
|
-
var packageVersion = "17.9.
|
|
30
|
+
var packageVersion = "17.9.6";
|
|
31
31
|
var analyticsAttributes = {
|
|
32
32
|
componentName: 'dateTimePicker',
|
|
33
33
|
packageName: packageName,
|
|
@@ -23,7 +23,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
23
23
|
import { placeholderDatetime } from '../internal/placeholder-date-time';
|
|
24
24
|
import { makeSingleValue } from '../internal/single-value';
|
|
25
25
|
var packageName = "@atlaskit/datetime-picker";
|
|
26
|
-
var packageVersion = "17.9.
|
|
26
|
+
var packageVersion = "17.9.6";
|
|
27
27
|
var defaultTimeFormat = 'h:mma';
|
|
28
28
|
var menuStyles = {
|
|
29
29
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/datetime-picker",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "18.0.0",
|
|
4
4
|
"description": "A date time picker allows the user to select an associated date and time.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,14 +12,6 @@
|
|
|
12
12
|
"module": "dist/esm/index.js",
|
|
13
13
|
"module:es2019": "dist/es2019/index.js",
|
|
14
14
|
"types": "dist/types/index.d.ts",
|
|
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
15
|
"sideEffects": [
|
|
24
16
|
"**/*.compiled.css"
|
|
25
17
|
],
|
|
@@ -39,20 +31,20 @@
|
|
|
39
31
|
}
|
|
40
32
|
},
|
|
41
33
|
"dependencies": {
|
|
42
|
-
"@atlaskit/analytics-next": "^
|
|
43
|
-
"@atlaskit/button": "^
|
|
44
|
-
"@atlaskit/calendar": "^
|
|
45
|
-
"@atlaskit/css": "^0.
|
|
46
|
-
"@atlaskit/ds-lib": "^
|
|
47
|
-
"@atlaskit/icon": "^
|
|
48
|
-
"@atlaskit/layering": "^
|
|
49
|
-
"@atlaskit/locale": "^
|
|
50
|
-
"@atlaskit/platform-feature-flags": "^
|
|
51
|
-
"@atlaskit/popper": "^
|
|
52
|
-
"@atlaskit/primitives": "^
|
|
53
|
-
"@atlaskit/select": "^
|
|
54
|
-
"@atlaskit/tokens": "^
|
|
55
|
-
"@atlaskit/top-layer": "^0.
|
|
34
|
+
"@atlaskit/analytics-next": "^12.0.0",
|
|
35
|
+
"@atlaskit/button": "^24.0.0",
|
|
36
|
+
"@atlaskit/calendar": "^18.0.0",
|
|
37
|
+
"@atlaskit/css": "^1.0.0",
|
|
38
|
+
"@atlaskit/ds-lib": "^8.0.0",
|
|
39
|
+
"@atlaskit/icon": "^36.0.0",
|
|
40
|
+
"@atlaskit/layering": "^4.0.0",
|
|
41
|
+
"@atlaskit/locale": "^5.0.0",
|
|
42
|
+
"@atlaskit/platform-feature-flags": "^2.0.0",
|
|
43
|
+
"@atlaskit/popper": "^8.0.0",
|
|
44
|
+
"@atlaskit/primitives": "^20.0.0",
|
|
45
|
+
"@atlaskit/select": "^22.0.0",
|
|
46
|
+
"@atlaskit/tokens": "^14.0.0",
|
|
47
|
+
"@atlaskit/top-layer": "^1.0.0",
|
|
56
48
|
"@babel/runtime": "^7.0.0",
|
|
57
49
|
"@compiled/react": "^0.20.0",
|
|
58
50
|
"date-fns": "^2.17.0"
|
|
@@ -64,18 +56,18 @@
|
|
|
64
56
|
"@af/accessibility-testing": "workspace:^",
|
|
65
57
|
"@af/integration-testing": "workspace:^",
|
|
66
58
|
"@af/visual-regression": "workspace:^",
|
|
67
|
-
"@atlaskit/code": "^
|
|
68
|
-
"@atlaskit/codemod-utils": "^
|
|
69
|
-
"@atlaskit/docs": "^
|
|
70
|
-
"@atlaskit/form": "^
|
|
71
|
-
"@atlaskit/heading": "^
|
|
72
|
-
"@atlaskit/link": "^
|
|
73
|
-
"@atlaskit/modal-dialog": "^
|
|
74
|
-
"@atlaskit/popup": "^
|
|
75
|
-
"@atlaskit/range": "^
|
|
76
|
-
"@atlaskit/section-message": "^
|
|
77
|
-
"@atlaskit/textfield": "^
|
|
78
|
-
"@atlaskit/toggle": "^
|
|
59
|
+
"@atlaskit/code": "^18.0.0",
|
|
60
|
+
"@atlaskit/codemod-utils": "^5.0.0",
|
|
61
|
+
"@atlaskit/docs": "^12.0.0",
|
|
62
|
+
"@atlaskit/form": "^16.0.0",
|
|
63
|
+
"@atlaskit/heading": "^6.0.0",
|
|
64
|
+
"@atlaskit/link": "^4.0.0",
|
|
65
|
+
"@atlaskit/modal-dialog": "^16.0.0",
|
|
66
|
+
"@atlaskit/popup": "^5.0.0",
|
|
67
|
+
"@atlaskit/range": "^11.0.0",
|
|
68
|
+
"@atlaskit/section-message": "^9.0.0",
|
|
69
|
+
"@atlaskit/textfield": "^9.0.0",
|
|
70
|
+
"@atlaskit/toggle": "^17.0.0",
|
|
79
71
|
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
80
72
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
81
73
|
"@atlassian/ssr-tests": "workspace:^",
|