@atlaskit/drawer 12.1.3 → 13.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/dist/cjs/drawer.js +3 -3
- package/dist/es2019/drawer.js +3 -3
- package/dist/esm/drawer.js +3 -3
- package/drawer/package.json +1 -8
- package/drawer-close-button/package.json +1 -8
- package/drawer-content/package.json +1 -8
- package/drawer-sidebar/package.json +1 -8
- package/drawer.docs.tsx +131 -129
- package/package.json +22 -30
- package/types/package.json +1 -8
- package/dist/types-ts4.5/blanket.d.ts +0 -15
- package/dist/types-ts4.5/drawer-panel/drawer-close-button.d.ts +0 -8
- package/dist/types-ts4.5/drawer-panel/drawer-content.d.ts +0 -11
- package/dist/types-ts4.5/drawer-panel/drawer-panel.d.ts +0 -9
- package/dist/types-ts4.5/drawer-panel/drawer-sidebar.d.ts +0 -11
- package/dist/types-ts4.5/drawer-panel/focus-lock.d.ts +0 -9
- package/dist/types-ts4.5/drawer-panel/hooks/use-prevent-programmatic-scroll.d.ts +0 -9
- package/dist/types-ts4.5/drawer.d.ts +0 -12
- package/dist/types-ts4.5/ensure-is-inside-drawer-context.d.ts +0 -7
- package/dist/types-ts4.5/entry-points/drawer-close-button.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/drawer-content.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/drawer-sidebar.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/drawer.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/types.d.ts +0 -1
- package/dist/types-ts4.5/index.d.ts +0 -6
- package/dist/types-ts4.5/on-close-context.d.ts +0 -7
- package/dist/types-ts4.5/types.d.ts +0 -124
- package/dist/types-ts4.5/use-ensure-is-inside-drawer.d.ts +0 -1
- package/dist/types-ts4.5/use-on-close.d.ts +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# @atlaskit/drawer
|
|
2
2
|
|
|
3
|
+
## 13.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
|
+
## 12.1.4
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Updated dependencies
|
|
34
|
+
|
|
3
35
|
## 12.1.3
|
|
4
36
|
|
|
5
37
|
### Patch Changes
|
package/dist/cjs/drawer.js
CHANGED
|
@@ -67,7 +67,7 @@ var Drawer = exports.Drawer = function Drawer(_ref2) {
|
|
|
67
67
|
action: 'dismissed',
|
|
68
68
|
componentName: 'drawer',
|
|
69
69
|
packageName: "@atlaskit/drawer",
|
|
70
|
-
packageVersion: "12.1.
|
|
70
|
+
packageVersion: "12.1.4",
|
|
71
71
|
analyticsData: {
|
|
72
72
|
trigger: 'escKey'
|
|
73
73
|
}
|
|
@@ -90,7 +90,7 @@ var Drawer = exports.Drawer = function Drawer(_ref2) {
|
|
|
90
90
|
action: 'dismissed',
|
|
91
91
|
componentName: 'drawer',
|
|
92
92
|
packageName: "@atlaskit/drawer",
|
|
93
|
-
packageVersion: "12.1.
|
|
93
|
+
packageVersion: "12.1.4",
|
|
94
94
|
analyticsData: {
|
|
95
95
|
trigger: 'blanket'
|
|
96
96
|
}
|
|
@@ -102,7 +102,7 @@ var Drawer = exports.Drawer = function Drawer(_ref2) {
|
|
|
102
102
|
action: 'dismissed',
|
|
103
103
|
componentName: 'drawer',
|
|
104
104
|
packageName: "@atlaskit/drawer",
|
|
105
|
-
packageVersion: "12.1.
|
|
105
|
+
packageVersion: "12.1.4",
|
|
106
106
|
analyticsData: {
|
|
107
107
|
trigger: 'backButton'
|
|
108
108
|
}
|
package/dist/es2019/drawer.js
CHANGED
|
@@ -52,7 +52,7 @@ export const Drawer = ({
|
|
|
52
52
|
action: 'dismissed',
|
|
53
53
|
componentName: 'drawer',
|
|
54
54
|
packageName: "@atlaskit/drawer",
|
|
55
|
-
packageVersion: "12.1.
|
|
55
|
+
packageVersion: "12.1.4",
|
|
56
56
|
analyticsData: {
|
|
57
57
|
trigger: 'escKey'
|
|
58
58
|
}
|
|
@@ -73,7 +73,7 @@ export const Drawer = ({
|
|
|
73
73
|
action: 'dismissed',
|
|
74
74
|
componentName: 'drawer',
|
|
75
75
|
packageName: "@atlaskit/drawer",
|
|
76
|
-
packageVersion: "12.1.
|
|
76
|
+
packageVersion: "12.1.4",
|
|
77
77
|
analyticsData: {
|
|
78
78
|
trigger: 'blanket'
|
|
79
79
|
}
|
|
@@ -83,7 +83,7 @@ export const Drawer = ({
|
|
|
83
83
|
action: 'dismissed',
|
|
84
84
|
componentName: 'drawer',
|
|
85
85
|
packageName: "@atlaskit/drawer",
|
|
86
|
-
packageVersion: "12.1.
|
|
86
|
+
packageVersion: "12.1.4",
|
|
87
87
|
analyticsData: {
|
|
88
88
|
trigger: 'backButton'
|
|
89
89
|
}
|
package/dist/esm/drawer.js
CHANGED
|
@@ -57,7 +57,7 @@ export var Drawer = function Drawer(_ref2) {
|
|
|
57
57
|
action: 'dismissed',
|
|
58
58
|
componentName: 'drawer',
|
|
59
59
|
packageName: "@atlaskit/drawer",
|
|
60
|
-
packageVersion: "12.1.
|
|
60
|
+
packageVersion: "12.1.4",
|
|
61
61
|
analyticsData: {
|
|
62
62
|
trigger: 'escKey'
|
|
63
63
|
}
|
|
@@ -80,7 +80,7 @@ export var Drawer = function Drawer(_ref2) {
|
|
|
80
80
|
action: 'dismissed',
|
|
81
81
|
componentName: 'drawer',
|
|
82
82
|
packageName: "@atlaskit/drawer",
|
|
83
|
-
packageVersion: "12.1.
|
|
83
|
+
packageVersion: "12.1.4",
|
|
84
84
|
analyticsData: {
|
|
85
85
|
trigger: 'blanket'
|
|
86
86
|
}
|
|
@@ -92,7 +92,7 @@ export var Drawer = function Drawer(_ref2) {
|
|
|
92
92
|
action: 'dismissed',
|
|
93
93
|
componentName: 'drawer',
|
|
94
94
|
packageName: "@atlaskit/drawer",
|
|
95
|
-
packageVersion: "12.1.
|
|
95
|
+
packageVersion: "12.1.4",
|
|
96
96
|
analyticsData: {
|
|
97
97
|
trigger: 'backButton'
|
|
98
98
|
}
|
package/drawer/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/drawer.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/drawer.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/drawer.d.ts"
|
|
17
10
|
}
|
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/drawer-close-button.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/drawer-close-button.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/drawer-close-button.d.ts"
|
|
17
10
|
}
|
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/drawer-content.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/drawer-content.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/drawer-content.d.ts"
|
|
17
10
|
}
|
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/drawer-sidebar.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/drawer-sidebar.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/drawer-sidebar.d.ts"
|
|
17
10
|
}
|
package/drawer.docs.tsx
CHANGED
|
@@ -1,143 +1,145 @@
|
|
|
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 drawer is a panel that slides in from the left side of the screen for navigation or additional content.',
|
|
10
|
-
status: 'intent-to-deprecate',
|
|
11
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
12
8
|
name: 'Drawer',
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
usageGuidelines: [
|
|
19
|
-
'Use for navigation or secondary content',
|
|
20
|
-
'Provide clear open/close mechanisms',
|
|
21
|
-
'Consider screen size and drawer width',
|
|
22
|
-
'Use appropriate backdrop behavior',
|
|
23
|
-
'Consider alternative patterns like Modal for better UX',
|
|
24
|
-
],
|
|
25
|
-
contentGuidelines: [
|
|
26
|
-
'Organize content logically within the drawer',
|
|
27
|
-
'Use clear navigation labels',
|
|
28
|
-
'Provide appropriate close actions',
|
|
29
|
-
'Consider content hierarchy and grouping',
|
|
30
|
-
],
|
|
31
|
-
accessibilityGuidelines: [
|
|
32
|
-
'Ensure proper focus management when drawer opens/closes',
|
|
33
|
-
'Provide keyboard navigation support',
|
|
34
|
-
'Use appropriate ARIA attributes for drawer state',
|
|
35
|
-
'Ensure content is accessible when drawer is open',
|
|
36
|
-
'Provide clear close mechanisms',
|
|
37
|
-
],
|
|
38
|
-
examples: [
|
|
39
|
-
{
|
|
9
|
+
description:
|
|
10
|
+
'A drawer is a panel that slides in from the left side of the screen for navigation or additional content.',
|
|
11
|
+
status: 'intent-to-deprecate',
|
|
12
|
+
import: {
|
|
40
13
|
name: 'Drawer',
|
|
41
|
-
|
|
42
|
-
|
|
14
|
+
package: '@atlaskit/drawer',
|
|
15
|
+
type: 'default',
|
|
16
|
+
packagePath: path.resolve(__dirname),
|
|
17
|
+
packageJson: require('./package.json'),
|
|
43
18
|
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
19
|
+
usageGuidelines: [
|
|
20
|
+
'Use for navigation or secondary content',
|
|
21
|
+
'Provide clear open/close mechanisms',
|
|
22
|
+
'Consider screen size and drawer width',
|
|
23
|
+
'Use appropriate backdrop behavior',
|
|
24
|
+
'Consider alternative patterns like Modal for better UX',
|
|
25
|
+
],
|
|
26
|
+
contentGuidelines: [
|
|
27
|
+
'Organize content logically within the drawer',
|
|
28
|
+
'Use clear navigation labels',
|
|
29
|
+
'Provide appropriate close actions',
|
|
30
|
+
'Consider content hierarchy and grouping',
|
|
31
|
+
],
|
|
32
|
+
accessibilityGuidelines: [
|
|
33
|
+
'Ensure proper focus management when drawer opens/closes',
|
|
34
|
+
'Provide keyboard navigation support',
|
|
35
|
+
'Use appropriate ARIA attributes for drawer state',
|
|
36
|
+
'Ensure content is accessible when drawer is open',
|
|
37
|
+
'Provide clear close mechanisms',
|
|
38
|
+
],
|
|
39
|
+
examples: [
|
|
40
|
+
{
|
|
41
|
+
name: 'Drawer',
|
|
42
|
+
description: 'Drawer example',
|
|
43
|
+
source: path.resolve(__dirname, './examples/ai/drawer.tsx'),
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
keywords: ['drawer', 'panel', 'slide', 'overlay', 'navigation', 'sidebar'],
|
|
47
|
+
categories: ['overlays-and-layering'],
|
|
58
48
|
},
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
'
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
examples: [
|
|
70
|
-
{
|
|
71
|
-
name: 'Drawer Content',
|
|
72
|
-
description: 'Drawer Content example',
|
|
73
|
-
source: path.resolve(__dirname, './examples/ai/drawer-content.tsx'),
|
|
49
|
+
{
|
|
50
|
+
name: 'DrawerContent',
|
|
51
|
+
description: 'The main content area of a drawer panel.',
|
|
52
|
+
status: 'intent-to-deprecate',
|
|
53
|
+
import: {
|
|
54
|
+
name: 'DrawerContent',
|
|
55
|
+
package: '@atlaskit/drawer',
|
|
56
|
+
type: 'named',
|
|
57
|
+
packagePath: path.resolve(__dirname),
|
|
58
|
+
packageJson: require('./package.json'),
|
|
74
59
|
},
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
60
|
+
usageGuidelines: [
|
|
61
|
+
'Use as the main content container within a drawer',
|
|
62
|
+
'Place primary content and actions here',
|
|
63
|
+
'Ensure proper scrolling behavior for long content',
|
|
64
|
+
],
|
|
65
|
+
contentGuidelines: [
|
|
66
|
+
'Organize content logically',
|
|
67
|
+
'Use appropriate spacing and layout',
|
|
68
|
+
'Consider content hierarchy',
|
|
69
|
+
],
|
|
70
|
+
examples: [
|
|
71
|
+
{
|
|
72
|
+
name: 'Drawer Content',
|
|
73
|
+
description: 'Drawer Content example',
|
|
74
|
+
source: path.resolve(__dirname, './examples/ai/drawer-content.tsx'),
|
|
75
|
+
},
|
|
76
|
+
],
|
|
77
|
+
keywords: ['drawer', 'content', 'panel', 'body'],
|
|
78
|
+
categories: ['overlays-and-layering'],
|
|
89
79
|
},
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
'
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
examples: [
|
|
101
|
-
{
|
|
102
|
-
name: 'Drawer Sidebar',
|
|
103
|
-
description: 'Drawer Sidebar example',
|
|
104
|
-
source: path.resolve(__dirname, './examples/ai/drawer-sidebar.tsx'),
|
|
80
|
+
{
|
|
81
|
+
name: 'DrawerSidebar',
|
|
82
|
+
description: 'A sidebar component within a drawer for navigation or secondary content.',
|
|
83
|
+
status: 'intent-to-deprecate',
|
|
84
|
+
import: {
|
|
85
|
+
name: 'DrawerSidebar',
|
|
86
|
+
package: '@atlaskit/drawer',
|
|
87
|
+
type: 'named',
|
|
88
|
+
packagePath: path.resolve(__dirname),
|
|
89
|
+
packageJson: require('./package.json'),
|
|
105
90
|
},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
91
|
+
usageGuidelines: [
|
|
92
|
+
'Use for navigation or secondary content in a drawer',
|
|
93
|
+
'Keep sidebar content focused and organized',
|
|
94
|
+
'Consider responsive behavior',
|
|
95
|
+
],
|
|
96
|
+
contentGuidelines: [
|
|
97
|
+
'Use clear navigation labels',
|
|
98
|
+
'Organize content hierarchically',
|
|
99
|
+
'Keep sidebar content concise',
|
|
100
|
+
],
|
|
101
|
+
examples: [
|
|
102
|
+
{
|
|
103
|
+
name: 'Drawer Sidebar',
|
|
104
|
+
description: 'Drawer Sidebar example',
|
|
105
|
+
source: path.resolve(__dirname, './examples/ai/drawer-sidebar.tsx'),
|
|
106
|
+
},
|
|
107
|
+
],
|
|
108
|
+
keywords: ['drawer', 'sidebar', 'navigation', 'panel'],
|
|
109
|
+
categories: ['overlays-and-layering'],
|
|
120
110
|
},
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
'
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
examples: [
|
|
132
|
-
{
|
|
133
|
-
name: 'Drawer Close Button',
|
|
134
|
-
description: 'Drawer Close Button example',
|
|
135
|
-
source: path.resolve(__dirname, './examples/ai/drawer-close-button.tsx'),
|
|
111
|
+
{
|
|
112
|
+
name: 'DrawerCloseButton',
|
|
113
|
+
description: 'A close button specifically designed for drawer components.',
|
|
114
|
+
status: 'intent-to-deprecate',
|
|
115
|
+
import: {
|
|
116
|
+
name: 'DrawerCloseButton',
|
|
117
|
+
package: '@atlaskit/drawer',
|
|
118
|
+
type: 'named',
|
|
119
|
+
packagePath: path.resolve(__dirname),
|
|
120
|
+
packageJson: require('./package.json'),
|
|
136
121
|
},
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
]
|
|
122
|
+
usageGuidelines: [
|
|
123
|
+
'Use to provide clear close functionality for drawers',
|
|
124
|
+
'Position prominently for easy access',
|
|
125
|
+
'Ensure keyboard accessibility',
|
|
126
|
+
],
|
|
127
|
+
contentGuidelines: [
|
|
128
|
+
'Use clear close icon or text',
|
|
129
|
+
'Ensure button is easily discoverable',
|
|
130
|
+
'Provide appropriate hover/focus states',
|
|
131
|
+
],
|
|
132
|
+
examples: [
|
|
133
|
+
{
|
|
134
|
+
name: 'Drawer Close Button',
|
|
135
|
+
description: 'Drawer Close Button example',
|
|
136
|
+
source: path.resolve(__dirname, './examples/ai/drawer-close-button.tsx'),
|
|
137
|
+
},
|
|
138
|
+
],
|
|
139
|
+
keywords: ['drawer', 'close', 'button', 'action'],
|
|
140
|
+
categories: ['overlays-and-layering'],
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
};
|
|
142
144
|
|
|
143
145
|
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/drawer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0",
|
|
4
4
|
"description": "A drawer is a panel that slides in from the left side of the screen.",
|
|
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
|
],
|
|
@@ -44,16 +36,16 @@
|
|
|
44
36
|
}
|
|
45
37
|
},
|
|
46
38
|
"dependencies": {
|
|
47
|
-
"@atlaskit/analytics-next": "^
|
|
48
|
-
"@atlaskit/blanket": "^
|
|
49
|
-
"@atlaskit/button": "^
|
|
50
|
-
"@atlaskit/css": "^0.
|
|
51
|
-
"@atlaskit/icon": "^
|
|
52
|
-
"@atlaskit/layering": "^
|
|
53
|
-
"@atlaskit/motion": "^
|
|
54
|
-
"@atlaskit/portal": "^
|
|
55
|
-
"@atlaskit/theme": "^
|
|
56
|
-
"@atlaskit/tokens": "^
|
|
39
|
+
"@atlaskit/analytics-next": "^12.0.0",
|
|
40
|
+
"@atlaskit/blanket": "^16.0.0",
|
|
41
|
+
"@atlaskit/button": "^24.0.0",
|
|
42
|
+
"@atlaskit/css": "^1.0.0",
|
|
43
|
+
"@atlaskit/icon": "^36.0.0",
|
|
44
|
+
"@atlaskit/layering": "^4.0.0",
|
|
45
|
+
"@atlaskit/motion": "^7.0.0",
|
|
46
|
+
"@atlaskit/portal": "^6.0.0",
|
|
47
|
+
"@atlaskit/theme": "^26.0.0",
|
|
48
|
+
"@atlaskit/tokens": "^14.0.0",
|
|
57
49
|
"@babel/runtime": "^7.0.0",
|
|
58
50
|
"@compiled/react": "^0.20.0",
|
|
59
51
|
"bind-event-listener": "^3.0.0",
|
|
@@ -70,17 +62,17 @@
|
|
|
70
62
|
"@af/accessibility-testing": "workspace:^",
|
|
71
63
|
"@af/integration-testing": "workspace:^",
|
|
72
64
|
"@af/visual-regression": "workspace:^",
|
|
73
|
-
"@atlaskit/code": "^
|
|
74
|
-
"@atlaskit/docs": "^
|
|
75
|
-
"@atlaskit/dropdown-menu": "^
|
|
76
|
-
"@atlaskit/ds-lib": "^
|
|
77
|
-
"@atlaskit/form": "^
|
|
78
|
-
"@atlaskit/inline-message": "^
|
|
79
|
-
"@atlaskit/link": "^
|
|
80
|
-
"@atlaskit/menu": "^
|
|
81
|
-
"@atlaskit/modal-dialog": "^
|
|
82
|
-
"@atlaskit/primitives": "^
|
|
83
|
-
"@atlaskit/section-message": "^
|
|
65
|
+
"@atlaskit/code": "^18.0.0",
|
|
66
|
+
"@atlaskit/docs": "^12.0.0",
|
|
67
|
+
"@atlaskit/dropdown-menu": "^17.0.0",
|
|
68
|
+
"@atlaskit/ds-lib": "^8.0.0",
|
|
69
|
+
"@atlaskit/form": "^16.0.0",
|
|
70
|
+
"@atlaskit/inline-message": "^16.0.0",
|
|
71
|
+
"@atlaskit/link": "^4.0.0",
|
|
72
|
+
"@atlaskit/menu": "^9.0.0",
|
|
73
|
+
"@atlaskit/modal-dialog": "^16.0.0",
|
|
74
|
+
"@atlaskit/primitives": "^20.0.0",
|
|
75
|
+
"@atlaskit/section-message": "^9.0.0",
|
|
84
76
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
85
77
|
"@atlassian/ssr-tests": "workspace:^",
|
|
86
78
|
"@atlassian/structured-docs-types": "workspace:^",
|
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,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
type BlanketProps = {
|
|
7
|
-
isOpen: boolean;
|
|
8
|
-
onBlanketClicked: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
9
|
-
testId?: string;
|
|
10
|
-
};
|
|
11
|
-
/**
|
|
12
|
-
* A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
|
|
13
|
-
*/
|
|
14
|
-
declare const Blanket: ({ isOpen, onBlanketClicked, testId }: BlanketProps) => JSX.Element;
|
|
15
|
-
export default Blanket;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type DrawerCloseButtonProps } from '../types';
|
|
3
|
-
/**
|
|
4
|
-
* __Drawer close button
|
|
5
|
-
*
|
|
6
|
-
* A button that closes the drawer.
|
|
7
|
-
*/
|
|
8
|
-
export declare const DrawerCloseButton: ({ icon: Icon, label, testId, }: DrawerCloseButtonProps) => React.JSX.Element;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type DrawerContentProps } from '../types';
|
|
6
|
-
/**
|
|
7
|
-
* __Drawer content__
|
|
8
|
-
*
|
|
9
|
-
* The main content section of the drawer panel.
|
|
10
|
-
*/
|
|
11
|
-
export declare const DrawerContent: ({ children, scrollContentLabel, xcss, }: DrawerContentProps) => JSX.Element;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type DrawerPanelProps } from '../types';
|
|
6
|
-
/**
|
|
7
|
-
* __Drawer panel__
|
|
8
|
-
*/
|
|
9
|
-
export declare const DrawerPanel: ({ children, onClose, onCloseComplete, onOpenComplete, testId, isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, enterFrom, }: DrawerPanelProps) => JSX.Element;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type DrawerSidebarProps } from '../types';
|
|
6
|
-
/**
|
|
7
|
-
* __Drawer sidebar__
|
|
8
|
-
*
|
|
9
|
-
* The sidebar of the drawer panel.
|
|
10
|
-
*/
|
|
11
|
-
export declare const DrawerSidebar: ({ children, xcss }: DrawerSidebarProps) => JSX.Element;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type FocusLockProps } from '../types';
|
|
3
|
-
/**
|
|
4
|
-
* __Focus lock__
|
|
5
|
-
*
|
|
6
|
-
* Thin wrapper around react-focus-lock.
|
|
7
|
-
*/
|
|
8
|
-
declare const FocusLock: ({ isFocusLockEnabled, autoFocusFirstElem, shouldReturnFocus, children, }: FocusLockProps) => React.JSX.Element;
|
|
9
|
-
export default FocusLock;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Prevents programmatic scrolling of the viewport with `scrollIntoView`.
|
|
3
|
-
* Should be used in conjunction with a scroll lock to prevent a user from scrolling.
|
|
4
|
-
*
|
|
5
|
-
* ⚠️ This is copied from `packages/design-system/modal-dialog/src/internal/hooks/use-prevent-programmatic-scroll.tsx`
|
|
6
|
-
*
|
|
7
|
-
* @returns scroll top offset of the viewport
|
|
8
|
-
*/
|
|
9
|
-
export default function usePreventProgrammaticScroll(): number;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { DrawerProps } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* __Drawer__
|
|
5
|
-
*
|
|
6
|
-
* A drawer is a panel that slides in from the left side of the screen.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/drawer/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/drawer/code)
|
|
10
|
-
* - [Usage](https://atlassian.design/components/drawer/usage)
|
|
11
|
-
*/
|
|
12
|
-
export declare const Drawer: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, testId, children, onClose, onCloseComplete, onOpenComplete, zIndex, label, titleId, enterFrom, }: DrawerProps) => React.JSX.Element | null;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DrawerCloseButton } from '../drawer-panel/drawer-close-button';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DrawerContent } from '../drawer-panel/drawer-content';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DrawerSidebar } from '../drawer-panel/drawer-sidebar';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Drawer, Drawer as default } from '../drawer';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { BaseProps, CloseTrigger, DrawerContentProps, DrawerPanelProps, DrawerProps, DrawerWidth, FocusLockProps, DrawerSidebarProps, } from '../types';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { Drawer } from './drawer';
|
|
2
|
-
export { DrawerContent } from './drawer-panel/drawer-content';
|
|
3
|
-
export { DrawerSidebar } from './drawer-panel/drawer-sidebar';
|
|
4
|
-
export { DrawerCloseButton } from './drawer-panel/drawer-close-button';
|
|
5
|
-
export { Drawer, Drawer as default };
|
|
6
|
-
export type { BaseProps, CloseTrigger, DrawerContentProps, DrawerPanelProps, DrawerProps, DrawerWidth, FocusLockProps, DrawerSidebarProps, } from './types';
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { type Context, type SyntheticEvent } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* __On close context__
|
|
4
|
-
*
|
|
5
|
-
* An context that provides the on close function for the drawer.
|
|
6
|
-
*/
|
|
7
|
-
export declare const OnCloseContext: Context<((event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void) | undefined>;
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
|
|
2
|
-
import { type StrictXCSSProp } from '@atlaskit/css';
|
|
3
|
-
import { type Direction } from '@atlaskit/motion';
|
|
4
|
-
export type DrawerWidth = 'extended' | 'full' | 'medium' | 'narrow' | 'wide';
|
|
5
|
-
export interface BaseProps {
|
|
6
|
-
/**
|
|
7
|
-
* 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.
|
|
8
|
-
*/
|
|
9
|
-
testId?: string;
|
|
10
|
-
/**
|
|
11
|
-
* The content of the drawer.
|
|
12
|
-
*/
|
|
13
|
-
children?: ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* Sets the width of the drawer.
|
|
16
|
-
*/
|
|
17
|
-
width?: DrawerWidth;
|
|
18
|
-
/**
|
|
19
|
-
* Sets the direction the draw enters from. The default is "left".
|
|
20
|
-
*/
|
|
21
|
-
enterFrom?: Direction;
|
|
22
|
-
/**
|
|
23
|
-
* Controls if the drawer is open or closed.
|
|
24
|
-
*/
|
|
25
|
-
isOpen: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* A callback function that will be called when the drawer has finished its opening transition.
|
|
28
|
-
*/
|
|
29
|
-
onOpenComplete?: (node: HTMLElement | null) => void;
|
|
30
|
-
/**
|
|
31
|
-
* A callback function that will be called when the drawer has finished its close transition.
|
|
32
|
-
*/
|
|
33
|
-
onCloseComplete?: (node: HTMLElement | null) => void;
|
|
34
|
-
}
|
|
35
|
-
export interface DrawerLabel {
|
|
36
|
-
/**
|
|
37
|
-
* This is an `aria-label` attribute. It sets an accessible name for the drawer wrapper, for people who use assistive technology.
|
|
38
|
-
* Usage of either this, or the `titleId` attribute is strongly recommended.
|
|
39
|
-
*/
|
|
40
|
-
label?: string;
|
|
41
|
-
/**
|
|
42
|
-
* This is an ID referenced by the drawer wrapper's `aria-labelledby` attribute. This ID should be assigned to the drawer `title` element.
|
|
43
|
-
* Usage of either this, or the `label` attribute is strongly recommended.
|
|
44
|
-
*/
|
|
45
|
-
titleId?: string;
|
|
46
|
-
}
|
|
47
|
-
export interface DrawerSidebarProps {
|
|
48
|
-
/**
|
|
49
|
-
* The content of the sidebar.
|
|
50
|
-
*/
|
|
51
|
-
children?: ReactNode;
|
|
52
|
-
xcss?: StrictXCSSProp<'padding' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'width', never>;
|
|
53
|
-
}
|
|
54
|
-
export interface DrawerContentProps {
|
|
55
|
-
/**
|
|
56
|
-
* The content of the drawer.
|
|
57
|
-
*/
|
|
58
|
-
children?: ReactNode;
|
|
59
|
-
/**
|
|
60
|
-
* When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
|
|
61
|
-
*/
|
|
62
|
-
scrollContentLabel?: string;
|
|
63
|
-
xcss?: StrictXCSSProp<'padding' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'marginTop' | 'backgroundColor' | 'marginBlockStart' | 'paddingInlineStart' | 'paddingInlineEnd' | 'marginBlockStart' | 'paddingBlockStart' | 'paddingInlineEnd' | 'paddingBlockEnd' | 'paddingInlineStart', never>;
|
|
64
|
-
}
|
|
65
|
-
export interface DrawerCloseButtonProps {
|
|
66
|
-
/**
|
|
67
|
-
* Use this to render an icon for the drawer close/back control, if it's available.
|
|
68
|
-
*/
|
|
69
|
-
icon?: ComponentType<any>;
|
|
70
|
-
/**
|
|
71
|
-
* This is the accessible name for the close/back control of the drawer. The default is "Close drawer".
|
|
72
|
-
*/
|
|
73
|
-
label?: string;
|
|
74
|
-
/**
|
|
75
|
-
* 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.
|
|
76
|
-
*/
|
|
77
|
-
testId?: string;
|
|
78
|
-
}
|
|
79
|
-
export interface DrawerPanelProps extends BaseProps, FocusLockSettings, DrawerLabel {
|
|
80
|
-
onClose: (event: SyntheticEvent<HTMLElement>) => void;
|
|
81
|
-
}
|
|
82
|
-
export type DrawerProps = BaseProps & FocusLockSettings & DrawerLabel & {
|
|
83
|
-
/**
|
|
84
|
-
* Callback function called while the drawer is displayed and `keydown` event is triggered.
|
|
85
|
-
*/
|
|
86
|
-
onKeyDown?: (event: SyntheticEvent) => void;
|
|
87
|
-
/**
|
|
88
|
-
* Callback function called when the drawer is closed.
|
|
89
|
-
*/
|
|
90
|
-
onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void;
|
|
91
|
-
/**
|
|
92
|
-
* Z-index that the popup should be displayed in.
|
|
93
|
-
* This is passed to the portal component.
|
|
94
|
-
* Defaults to `unset`.
|
|
95
|
-
*/
|
|
96
|
-
zIndex?: number | 'unset';
|
|
97
|
-
};
|
|
98
|
-
export interface FocusLockSettings {
|
|
99
|
-
/**
|
|
100
|
-
* Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.
|
|
101
|
-
*/
|
|
102
|
-
autoFocusFirstElem?: boolean;
|
|
103
|
-
/**
|
|
104
|
-
* Enable this to keep focus inside the component until it’s closed. This is strongly recommended, as it prevents people who use assistive technology from accidentally navigating out of the drawer using the tab key.
|
|
105
|
-
*/
|
|
106
|
-
isFocusLockEnabled?: boolean;
|
|
107
|
-
/**
|
|
108
|
-
* ReturnFocus controls what happens when the user exits focus lock mode.
|
|
109
|
-
* If true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated.
|
|
110
|
-
* If ref is passed, focus returns to that specific ref element.
|
|
111
|
-
*/
|
|
112
|
-
shouldReturnFocus?: boolean | RefObject<HTMLElement | null>;
|
|
113
|
-
}
|
|
114
|
-
export interface FocusLockProps extends FocusLockSettings {
|
|
115
|
-
/**
|
|
116
|
-
* Content inside the focus lock.
|
|
117
|
-
* Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrollock` to enable Touch Scrolling.
|
|
118
|
-
*/
|
|
119
|
-
children?: ReactElement;
|
|
120
|
-
}
|
|
121
|
-
/**
|
|
122
|
-
* Type of keyboard event that triggers which key will should close the drawer.
|
|
123
|
-
*/
|
|
124
|
-
export type CloseTrigger = 'backButton' | 'blanket' | 'escKey';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const useEnsureIsInsideDrawer: () => void;
|