@atlaskit/page-layout 1.3.3 → 1.3.4
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 +6 -0
- package/__perf__/utils/product-integration/atlassian-navigation.tsx +7 -8
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/version.json +1 -1
- package/package.json +8 -16
- package/report.api.md +98 -241
- package/dist/types-ts4.0/common/constants.d.ts +0 -47
- package/dist/types-ts4.0/common/hooks/index.d.ts +0 -2
- package/dist/types-ts4.0/common/hooks/use-is-sidebar-collapsing.d.ts +0 -2
- package/dist/types-ts4.0/common/hooks/use-is-sidebar-dragging.d.ts +0 -2
- package/dist/types-ts4.0/common/safe-local-storage.d.ts +0 -2
- package/dist/types-ts4.0/common/types.d.ts +0 -117
- package/dist/types-ts4.0/common/utils.d.ts +0 -13
- package/dist/types-ts4.0/components/index.d.ts +0 -12
- package/dist/types-ts4.0/components/resize-control/grab-area.d.ts +0 -9
- package/dist/types-ts4.0/components/resize-control/index.d.ts +0 -4
- package/dist/types-ts4.0/components/resize-control/resize-button.d.ts +0 -4
- package/dist/types-ts4.0/components/resize-control/shadow.d.ts +0 -6
- package/dist/types-ts4.0/components/resize-control/types.d.ts +0 -25
- package/dist/types-ts4.0/components/skip-links/index.d.ts +0 -2
- package/dist/types-ts4.0/components/skip-links/skip-link-components.d.ts +0 -11
- package/dist/types-ts4.0/components/skip-links/types.d.ts +0 -8
- package/dist/types-ts4.0/components/skip-links/use-custom-skip-link.d.ts +0 -2
- package/dist/types-ts4.0/components/slots/banner-slot.d.ts +0 -12
- package/dist/types-ts4.0/components/slots/content.d.ts +0 -23
- package/dist/types-ts4.0/components/slots/internal/left-sidebar-inner.d.ts +0 -10
- package/dist/types-ts4.0/components/slots/internal/left-sidebar-outer.d.ts +0 -13
- package/dist/types-ts4.0/components/slots/internal/resizable-children-wrapper.d.ts +0 -11
- package/dist/types-ts4.0/components/slots/internal/slot-focus-ring.d.ts +0 -20
- package/dist/types-ts4.0/components/slots/left-panel.d.ts +0 -12
- package/dist/types-ts4.0/components/slots/left-sidebar-without-resize.d.ts +0 -12
- package/dist/types-ts4.0/components/slots/left-sidebar.d.ts +0 -12
- package/dist/types-ts4.0/components/slots/main.d.ts +0 -12
- package/dist/types-ts4.0/components/slots/page-layout.d.ts +0 -12
- package/dist/types-ts4.0/components/slots/right-panel.d.ts +0 -12
- package/dist/types-ts4.0/components/slots/right-sidebar.d.ts +0 -12
- package/dist/types-ts4.0/components/slots/slot-dimensions.d.ts +0 -7
- package/dist/types-ts4.0/components/slots/top-navigation.d.ts +0 -12
- package/dist/types-ts4.0/controllers/index.d.ts +0 -6
- package/dist/types-ts4.0/controllers/sidebar-resize-context.d.ts +0 -42
- package/dist/types-ts4.0/controllers/sidebar-resize-controller.d.ts +0 -3
- package/dist/types-ts4.0/controllers/skip-link-context.d.ts +0 -5
- package/dist/types-ts4.0/controllers/skip-link-controller.d.ts +0 -2
- package/dist/types-ts4.0/controllers/types.d.ts +0 -22
- package/dist/types-ts4.0/controllers/use-page-layout-grid.d.ts +0 -3
- package/dist/types-ts4.0/controllers/use-update-css-vars.d.ts +0 -2
- package/dist/types-ts4.0/index.d.ts +0 -4
package/CHANGELOG.md
CHANGED
|
@@ -71,14 +71,13 @@ const SettingsDrawer = () => {
|
|
|
71
71
|
);
|
|
72
72
|
};
|
|
73
73
|
|
|
74
|
-
const buttonClick =
|
|
75
|
-
e: MouseEvent<HTMLElement | HTMLAnchorElement
|
|
76
|
-
)
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
};
|
|
74
|
+
const buttonClick =
|
|
75
|
+
(toLog: string) => (e: MouseEvent<HTMLElement | HTMLAnchorElement>) => {
|
|
76
|
+
if (e.ctrlKey || e.metaKey) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
};
|
|
82
81
|
|
|
83
82
|
const primaryItems = [
|
|
84
83
|
<PrimaryButton onClick={buttonClick('Projects')}>Projects</PrimaryButton>,
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/version.json
CHANGED
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/page-layout",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"description": "A collection of components which let you compose an application's page layout.",
|
|
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.0 <4.5": {
|
|
17
|
-
"*": [
|
|
18
|
-
"dist/types-ts4.0/*",
|
|
19
|
-
"dist/types-ts4.0/index.d.ts"
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
15
|
"sideEffects": false,
|
|
24
16
|
"atlaskit:src": "src/index.tsx",
|
|
25
17
|
"atlassian": {
|
|
@@ -36,9 +28,9 @@
|
|
|
36
28
|
"dependencies": {
|
|
37
29
|
"@atlaskit/ds-lib": "^2.1.0",
|
|
38
30
|
"@atlaskit/icon": "^21.11.0",
|
|
39
|
-
"@atlaskit/motion": "^1.
|
|
31
|
+
"@atlaskit/motion": "^1.3.0",
|
|
40
32
|
"@atlaskit/theme": "^12.2.0",
|
|
41
|
-
"@atlaskit/tokens": "^0.
|
|
33
|
+
"@atlaskit/tokens": "^0.11.0",
|
|
42
34
|
"@babel/runtime": "^7.0.0",
|
|
43
35
|
"@emotion/react": "^11.7.1",
|
|
44
36
|
"bind-event-listener": "^2.1.1",
|
|
@@ -49,20 +41,20 @@
|
|
|
49
41
|
"react-dom": "^16.8.0"
|
|
50
42
|
},
|
|
51
43
|
"devDependencies": {
|
|
52
|
-
"@atlaskit/atlassian-navigation": "^2.
|
|
44
|
+
"@atlaskit/atlassian-navigation": "^2.3.0",
|
|
53
45
|
"@atlaskit/atlassian-notifications": "^0.3.0",
|
|
54
|
-
"@atlaskit/button": "^16.
|
|
46
|
+
"@atlaskit/button": "^16.4.0",
|
|
55
47
|
"@atlaskit/docs": "*",
|
|
56
|
-
"@atlaskit/drawer": "^7.
|
|
48
|
+
"@atlaskit/drawer": "^7.4.0",
|
|
57
49
|
"@atlaskit/icon": "*",
|
|
58
50
|
"@atlaskit/logo": "^13.10.0",
|
|
59
|
-
"@atlaskit/menu": "^1.
|
|
51
|
+
"@atlaskit/menu": "^1.4.0",
|
|
60
52
|
"@atlaskit/notification-indicator": "^9.0.0",
|
|
61
53
|
"@atlaskit/notification-log-client": "^6.0.0",
|
|
62
54
|
"@atlaskit/onboarding": "^10.6.0",
|
|
63
55
|
"@atlaskit/popup": "^1.5.0",
|
|
64
56
|
"@atlaskit/section-message": "^6.3.0",
|
|
65
|
-
"@atlaskit/side-navigation": "^1.
|
|
57
|
+
"@atlaskit/side-navigation": "^1.4.0",
|
|
66
58
|
"@atlaskit/ssr": "*",
|
|
67
59
|
"@atlaskit/tooltip": "*",
|
|
68
60
|
"@atlaskit/visual-regression": "*",
|
package/report.api.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
## API Report File for "@atlaskit/page-layout"
|
|
1
|
+
## API Report File for "@atlaskit/page-layout"
|
|
2
2
|
|
|
3
|
-
> Do not edit this file.
|
|
3
|
+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
+
|
|
5
|
+
<!--
|
|
6
|
+
Generated API Report version: 2.0
|
|
7
|
+
-->
|
|
4
8
|
|
|
5
9
|
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
6
10
|
|
|
@@ -13,40 +17,23 @@ import { MouseEvent as MouseEvent_2 } from 'react';
|
|
|
13
17
|
import { ReactElement } from 'react';
|
|
14
18
|
import { ReactNode } from 'react';
|
|
15
19
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* __Content__
|
|
30
|
-
*
|
|
31
|
-
* Provides a slot for your application content within the PageLayout.
|
|
32
|
-
*
|
|
33
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
34
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
35
|
-
*/
|
|
36
|
-
export declare const Content: (props: ContentProps) => jsx.JSX.Element;
|
|
37
|
-
|
|
38
|
-
declare interface ContentProps {
|
|
39
|
-
/**
|
|
40
|
-
* React children
|
|
41
|
-
*/
|
|
20
|
+
// @public
|
|
21
|
+
export const Banner: (props: SlotHeightProps) => jsx.JSX.Element;
|
|
22
|
+
|
|
23
|
+
// @public (undocumented)
|
|
24
|
+
export const BANNER_HEIGHT: string;
|
|
25
|
+
|
|
26
|
+
// @public
|
|
27
|
+
export const Content: (props: ContentProps) => jsx.JSX.Element;
|
|
28
|
+
|
|
29
|
+
// @public (undocumented)
|
|
30
|
+
interface ContentProps {
|
|
42
31
|
children: ReactNode;
|
|
43
|
-
/**
|
|
44
|
-
* 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.
|
|
45
|
-
*/
|
|
46
32
|
testId?: string;
|
|
47
33
|
}
|
|
48
34
|
|
|
49
|
-
|
|
35
|
+
// @public (undocumented)
|
|
36
|
+
type DimensionNames =
|
|
50
37
|
| 'leftPanelWidth'
|
|
51
38
|
| 'bannerHeight'
|
|
52
39
|
| 'topNavigationHeight'
|
|
@@ -55,40 +42,30 @@ declare type DimensionNames =
|
|
|
55
42
|
| 'rightSidebarWidth'
|
|
56
43
|
| 'rightPanelWidth';
|
|
57
44
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
export
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
export declare const LeftSidebar: (props: LeftSidebarProps) => jsx.JSX.Element;
|
|
83
|
-
|
|
84
|
-
declare interface LeftSidebarProps extends SlotWidthProps {
|
|
85
|
-
/**
|
|
86
|
-
* 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.
|
|
87
|
-
*/
|
|
88
|
-
testId?: string;
|
|
89
|
-
/**
|
|
90
|
-
* You can override prop(s) for the mentioned component(s).
|
|
91
|
-
*/
|
|
45
|
+
// @public (undocumented)
|
|
46
|
+
export type Dimensions = Partial<Record<DimensionNames, number>>;
|
|
47
|
+
|
|
48
|
+
// @public (undocumented)
|
|
49
|
+
export const LEFT_PANEL_WIDTH: string;
|
|
50
|
+
|
|
51
|
+
// @public (undocumented)
|
|
52
|
+
export const LEFT_SIDEBAR_WIDTH: string;
|
|
53
|
+
|
|
54
|
+
// @public
|
|
55
|
+
export const LeftPanel: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
56
|
+
|
|
57
|
+
// @public
|
|
58
|
+
export const LeftSidebar: (props: LeftSidebarProps) => jsx.JSX.Element;
|
|
59
|
+
|
|
60
|
+
// @public (undocumented)
|
|
61
|
+
interface LeftSidebarProps extends SlotWidthProps {
|
|
62
|
+
collapsedState?: 'collapsed' | 'expanded';
|
|
63
|
+
onCollapse?: () => void;
|
|
64
|
+
onExpand?: () => void;
|
|
65
|
+
onFlyoutCollapse?: () => void;
|
|
66
|
+
onFlyoutExpand?: () => void;
|
|
67
|
+
onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
|
|
68
|
+
onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
|
|
92
69
|
overrides?: {
|
|
93
70
|
ResizeButton?: {
|
|
94
71
|
render?: (
|
|
@@ -97,49 +74,14 @@ declare interface LeftSidebarProps extends SlotWidthProps {
|
|
|
97
74
|
) => ReactElement;
|
|
98
75
|
};
|
|
99
76
|
};
|
|
100
|
-
/**
|
|
101
|
-
* Display label for grab area. This will be announced to the screenreaders when the grab area receives focus
|
|
102
|
-
*/
|
|
103
|
-
resizeGrabAreaLabel?: string;
|
|
104
|
-
/**
|
|
105
|
-
* Display label for resize button.
|
|
106
|
-
*/
|
|
107
77
|
resizeButtonLabel?: string;
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
*/
|
|
111
|
-
onCollapse?: () => void;
|
|
112
|
-
/**
|
|
113
|
-
* Called when left-sidebar is expanded.
|
|
114
|
-
*/
|
|
115
|
-
onExpand?: () => void;
|
|
116
|
-
/**
|
|
117
|
-
* Called when left-sidebar resize starts using mouse or touch.
|
|
118
|
-
*/
|
|
119
|
-
onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
|
|
120
|
-
/**
|
|
121
|
-
* Called when left-sidebar resize ends using mouse or touch.
|
|
122
|
-
*/
|
|
123
|
-
onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
|
|
124
|
-
/**
|
|
125
|
-
* Called when left-sidebar is collapsed and mouse leaves the area.
|
|
126
|
-
*/
|
|
127
|
-
onFlyoutCollapse?: () => void;
|
|
128
|
-
/**
|
|
129
|
-
* Called after flyout delay when left-sidebar is collapsed and mouse enters the area.
|
|
130
|
-
*/
|
|
131
|
-
onFlyoutExpand?: () => void;
|
|
132
|
-
/**
|
|
133
|
-
* Controls whether the LeftSidebar mounts in a collapsed state, this will override the setting in localStorage
|
|
134
|
-
*/
|
|
135
|
-
collapsedState?: 'collapsed' | 'expanded';
|
|
136
|
-
/**
|
|
137
|
-
* Controls the width when LeftSidebar mounts, this will override the setting in localStorage
|
|
138
|
-
*/
|
|
78
|
+
resizeGrabAreaLabel?: string;
|
|
79
|
+
testId?: string;
|
|
139
80
|
width?: number;
|
|
140
81
|
}
|
|
141
82
|
|
|
142
|
-
|
|
83
|
+
// @public (undocumented)
|
|
84
|
+
export type LeftSidebarState = {
|
|
143
85
|
isFlyoutOpen: boolean;
|
|
144
86
|
isResizing: boolean;
|
|
145
87
|
isLeftSidebarCollapsed: boolean;
|
|
@@ -149,37 +91,16 @@ export declare type LeftSidebarState = {
|
|
|
149
91
|
isFixed: boolean;
|
|
150
92
|
};
|
|
151
93
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
*
|
|
155
|
-
* Provides a slot for a left sidebar without resize within the PageLayout.
|
|
156
|
-
*
|
|
157
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
158
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
159
|
-
*/
|
|
160
|
-
export declare const LeftSidebarWithoutResize: (
|
|
94
|
+
// @public
|
|
95
|
+
export const LeftSidebarWithoutResize: (
|
|
161
96
|
props: SlotWidthProps,
|
|
162
97
|
) => jsx.JSX.Element;
|
|
163
98
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
170
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
171
|
-
*/
|
|
172
|
-
export declare const Main: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
173
|
-
|
|
174
|
-
/**
|
|
175
|
-
* __Page layout__
|
|
176
|
-
*
|
|
177
|
-
* A collection of components which let you compose an application's page layout.
|
|
178
|
-
*
|
|
179
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
180
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
181
|
-
*/
|
|
182
|
-
export declare const PageLayout: ({
|
|
99
|
+
// @public
|
|
100
|
+
export const Main: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
101
|
+
|
|
102
|
+
// @public
|
|
103
|
+
export const PageLayout: ({
|
|
183
104
|
skipLinksLabel,
|
|
184
105
|
children,
|
|
185
106
|
testId,
|
|
@@ -187,151 +108,87 @@ export declare const PageLayout: ({
|
|
|
187
108
|
onLeftSidebarCollapse,
|
|
188
109
|
}: PageLayoutProps) => jsx.JSX.Element;
|
|
189
110
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
* React children!
|
|
193
|
-
*/
|
|
111
|
+
// @public (undocumented)
|
|
112
|
+
interface PageLayoutProps extends SidebarResizeControllerProps {
|
|
194
113
|
children: ReactNode;
|
|
114
|
+
// (undocumented)
|
|
195
115
|
skipLinksLabel?: string;
|
|
196
|
-
/**
|
|
197
|
-
* 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.
|
|
198
|
-
*/
|
|
199
116
|
testId?: string;
|
|
200
117
|
}
|
|
201
118
|
|
|
202
|
-
|
|
119
|
+
// @public (undocumented)
|
|
120
|
+
type ResizeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
203
121
|
isLeftSidebarCollapsed: boolean;
|
|
204
122
|
label: string;
|
|
205
123
|
testId?: string;
|
|
206
124
|
};
|
|
207
125
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
/**
|
|
223
|
-
* __Right sidebar__
|
|
224
|
-
*
|
|
225
|
-
* Provides a slot for a right sidebar within the PageLayout.
|
|
226
|
-
*
|
|
227
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
228
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
229
|
-
*/
|
|
230
|
-
export declare const RightSidebar: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
231
|
-
|
|
232
|
-
declare type SidebarResizeControllerProps = {
|
|
233
|
-
/**
|
|
234
|
-
* Called when left-sidebar expanded.
|
|
235
|
-
*/
|
|
126
|
+
// @public (undocumented)
|
|
127
|
+
export const RIGHT_PANEL_WIDTH: string;
|
|
128
|
+
|
|
129
|
+
// @public (undocumented)
|
|
130
|
+
export const RIGHT_SIDEBAR_WIDTH: string;
|
|
131
|
+
|
|
132
|
+
// @public
|
|
133
|
+
export const RightPanel: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
134
|
+
|
|
135
|
+
// @public
|
|
136
|
+
export const RightSidebar: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
137
|
+
|
|
138
|
+
// @public (undocumented)
|
|
139
|
+
type SidebarResizeControllerProps = {
|
|
236
140
|
onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
|
|
237
|
-
/**
|
|
238
|
-
* Called when left-sidebar collapsed.
|
|
239
|
-
*/
|
|
240
141
|
onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
|
|
241
142
|
};
|
|
242
143
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
* id for the element that will be skipped to
|
|
246
|
-
*/
|
|
144
|
+
// @public (undocumented)
|
|
145
|
+
type SkipLinkData = {
|
|
247
146
|
id: string;
|
|
248
|
-
/**
|
|
249
|
-
* Text for the link that will appear in the skip link menu
|
|
250
|
-
*/
|
|
251
147
|
skipLinkTitle: string;
|
|
252
|
-
/**
|
|
253
|
-
* Desired position in the skip link menu
|
|
254
|
-
*/
|
|
255
148
|
listIndex?: number;
|
|
256
149
|
};
|
|
257
150
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
* It save height in local storage.
|
|
261
|
-
*/
|
|
262
|
-
shouldPersistHeight?: boolean;
|
|
263
|
-
/**
|
|
264
|
-
* Height!
|
|
265
|
-
*/
|
|
151
|
+
// @public (undocumented)
|
|
152
|
+
export interface SlotHeightProps extends SlotProps {
|
|
266
153
|
height?: number;
|
|
154
|
+
shouldPersistHeight?: boolean;
|
|
267
155
|
}
|
|
268
156
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
* Sets positon to fixed.
|
|
272
|
-
*/
|
|
273
|
-
isFixed?: boolean;
|
|
274
|
-
/**
|
|
275
|
-
* 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 .
|
|
276
|
-
*/
|
|
277
|
-
testId?: string;
|
|
278
|
-
/**
|
|
279
|
-
* React Children!
|
|
280
|
-
*/
|
|
157
|
+
// @public (undocumented)
|
|
158
|
+
interface SlotProps {
|
|
281
159
|
children: ReactNode;
|
|
160
|
+
// (undocumented)
|
|
282
161
|
id?: string;
|
|
162
|
+
isFixed?: boolean;
|
|
163
|
+
// (undocumented)
|
|
283
164
|
skipLinkTitle?: string;
|
|
165
|
+
testId?: string;
|
|
284
166
|
}
|
|
285
167
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
* It save width in local storage.
|
|
289
|
-
*/
|
|
168
|
+
// @public (undocumented)
|
|
169
|
+
export interface SlotWidthProps extends SlotProps {
|
|
290
170
|
shouldPersistWidth?: boolean;
|
|
291
|
-
/**
|
|
292
|
-
* Width!
|
|
293
|
-
*/
|
|
294
171
|
width?: number;
|
|
295
172
|
}
|
|
296
173
|
|
|
297
|
-
|
|
174
|
+
// @public (undocumented)
|
|
175
|
+
export const TOP_NAVIGATION_HEIGHT: string;
|
|
298
176
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
*
|
|
302
|
-
* Provides a slot for top navigation within the PageLayout.
|
|
303
|
-
*
|
|
304
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
305
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
306
|
-
*/
|
|
307
|
-
export declare const TopNavigation: (props: SlotHeightProps) => jsx.JSX.Element;
|
|
177
|
+
// @public
|
|
178
|
+
export const TopNavigation: (props: SlotHeightProps) => jsx.JSX.Element;
|
|
308
179
|
|
|
309
|
-
|
|
180
|
+
// @public (undocumented)
|
|
181
|
+
export const useCustomSkipLink: (
|
|
310
182
|
id: SkipLinkData['id'],
|
|
311
183
|
skipLinkTitle: SkipLinkData['skipLinkTitle'],
|
|
312
184
|
listIndex?: SkipLinkData['listIndex'],
|
|
313
185
|
) => void;
|
|
314
186
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
*
|
|
321
|
-
* This hook will prevent the left sidebar from automatically collapsing
|
|
322
|
-
* when it is in a flyout state.
|
|
323
|
-
*
|
|
324
|
-
* The intended use case for this hook is to allow popup menus in the
|
|
325
|
-
* left sidebar to be usable while it is in a flyout state.
|
|
326
|
-
*
|
|
327
|
-
* ## Usage
|
|
328
|
-
* The intended usage is to use this hook within the popup component
|
|
329
|
-
* you are rendering. This way the left sidebar will be locked for
|
|
330
|
-
* as long as the popup is open.
|
|
331
|
-
*/
|
|
332
|
-
export declare const useLeftSidebarFlyoutLock: () => void;
|
|
333
|
-
|
|
334
|
-
export declare const usePageLayoutResize: () => {
|
|
187
|
+
// @public
|
|
188
|
+
export const useLeftSidebarFlyoutLock: () => void;
|
|
189
|
+
|
|
190
|
+
// @public (undocumented)
|
|
191
|
+
export const usePageLayoutResize: () => {
|
|
335
192
|
isLeftSidebarCollapsed: boolean;
|
|
336
193
|
expandLeftSidebar: () => void;
|
|
337
194
|
collapseLeftSidebar: (
|
|
@@ -344,5 +201,5 @@ export declare const usePageLayoutResize: () => {
|
|
|
344
201
|
leftSidebarState: LeftSidebarState;
|
|
345
202
|
};
|
|
346
203
|
|
|
347
|
-
|
|
204
|
+
// (No @packageDocumentation comment for this package)
|
|
348
205
|
```
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
export declare const VAR_LEFT_PANEL_WIDTH = "leftPanelWidth";
|
|
2
|
-
export declare const VAR_LEFT_SIDEBAR_WIDTH = "leftSidebarWidth";
|
|
3
|
-
export declare const VAR_RIGHT_SIDEBAR_WIDTH = "rightSidebarWidth";
|
|
4
|
-
export declare const VAR_RIGHT_PANEL_WIDTH = "rightPanelWidth";
|
|
5
|
-
export declare const VAR_TOP_NAVIGATION_HEIGHT = "topNavigationHeight";
|
|
6
|
-
export declare const VAR_BANNER_HEIGHT = "bannerHeight";
|
|
7
|
-
export declare const VAR_LEFT_SIDEBAR_FLYOUT = "leftSidebarFlyoutWidth";
|
|
8
|
-
export declare const DIMENSIONS: string[];
|
|
9
|
-
export declare const LEFT_PANEL = "left-panel";
|
|
10
|
-
export declare const RIGHT_PANEL = "right-panel";
|
|
11
|
-
export declare const BANNER = "banner";
|
|
12
|
-
export declare const TOP_NAVIGATION = "top-navigation";
|
|
13
|
-
export declare const CONTENT = "content";
|
|
14
|
-
export declare const MAIN = "main";
|
|
15
|
-
export declare const LEFT_SIDEBAR = "left-sidebar";
|
|
16
|
-
export declare const RIGHT_SIDEBAR = "right-sidebar";
|
|
17
|
-
export declare const DEFAULT_BANNER_HEIGHT = 56;
|
|
18
|
-
export declare const DEFAULT_TOP_NAVIGATION_HEIGHT = 56;
|
|
19
|
-
export declare const DEFAULT_LEFT_SIDEBAR_WIDTH = 240;
|
|
20
|
-
export declare const DEFAULT_RIGHT_SIDEBAR_WIDTH = 280;
|
|
21
|
-
export declare const DEFAULT_RIGHT_PANEL_WIDTH = 368;
|
|
22
|
-
export declare const DEFAULT_LEFT_PANEL_WIDTH = 368;
|
|
23
|
-
export declare const COLLAPSED_LEFT_SIDEBAR_WIDTH = 20;
|
|
24
|
-
export declare const MIN_LEFT_SIDEBAR_WIDTH = 80;
|
|
25
|
-
export declare const DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = 240;
|
|
26
|
-
export declare const MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = 200;
|
|
27
|
-
export declare const TRANSITION_DURATION = 300;
|
|
28
|
-
export declare const FLYOUT_DELAY = 200;
|
|
29
|
-
export declare const LEFT_SIDEBAR_EXPANDED_WIDTH = "expandedLeftSidebarWidth";
|
|
30
|
-
export declare const PAGE_LAYOUT_LS_KEY = "DS_PAGE_LAYOUT_UI_STATE";
|
|
31
|
-
export declare const IS_SIDEBAR_DRAGGING = "data-is-sidebar-dragging";
|
|
32
|
-
export declare const IS_SIDEBAR_COLLAPSING = "data-is-sidebar-collapsing";
|
|
33
|
-
export declare const IS_FLYOUT_OPEN = "data-is-flyout-open";
|
|
34
|
-
export declare const GRAB_AREA_LINE_SELECTOR = "data-grab-area-line";
|
|
35
|
-
export declare const GRAB_AREA_SELECTOR = "data-grab-area";
|
|
36
|
-
export declare const RESIZE_BUTTON_SELECTOR = "data-resize-button";
|
|
37
|
-
export declare const RESIZE_CONTROL_SELECTOR = "data-resize-control";
|
|
38
|
-
export declare const PAGE_LAYOUT_SLOT_SELECTOR = "data-ds--page-layout--slot";
|
|
39
|
-
export declare const DEFAULT_I18N_PROPS_SKIP_LINKS = "Skip to:";
|
|
40
|
-
export declare const PAGE_LAYOUT_CONTAINER_SELECTOR = "data-layout-container";
|
|
41
|
-
export declare const LEFT_PANEL_WIDTH: string;
|
|
42
|
-
export declare const RIGHT_PANEL_WIDTH: string;
|
|
43
|
-
export declare const LEFT_SIDEBAR_WIDTH: string;
|
|
44
|
-
export declare const RIGHT_SIDEBAR_WIDTH: string;
|
|
45
|
-
export declare const TOP_NAVIGATION_HEIGHT: string;
|
|
46
|
-
export declare const BANNER_HEIGHT: string;
|
|
47
|
-
export declare const LEFT_SIDEBAR_FLYOUT_WIDTH: string;
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import { ElementType, ReactElement, ReactNode } from 'react';
|
|
2
|
-
import { ResizeButtonProps } from '../components/resize-control/types';
|
|
3
|
-
import { LeftSidebarState } from '../controllers/sidebar-resize-context';
|
|
4
|
-
interface SlotProps {
|
|
5
|
-
/**
|
|
6
|
-
* Sets positon to fixed.
|
|
7
|
-
*/
|
|
8
|
-
isFixed?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* 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 .
|
|
11
|
-
*/
|
|
12
|
-
testId?: string;
|
|
13
|
-
/**
|
|
14
|
-
* React Children!
|
|
15
|
-
*/
|
|
16
|
-
children: ReactNode;
|
|
17
|
-
id?: string;
|
|
18
|
-
skipLinkTitle?: string;
|
|
19
|
-
}
|
|
20
|
-
export interface SlotHeightProps extends SlotProps {
|
|
21
|
-
/**
|
|
22
|
-
* It save height in local storage.
|
|
23
|
-
*/
|
|
24
|
-
shouldPersistHeight?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Height!
|
|
27
|
-
*/
|
|
28
|
-
height?: number;
|
|
29
|
-
}
|
|
30
|
-
export interface SlotWidthProps extends SlotProps {
|
|
31
|
-
/**
|
|
32
|
-
* It save width in local storage.
|
|
33
|
-
*/
|
|
34
|
-
shouldPersistWidth?: boolean;
|
|
35
|
-
/**
|
|
36
|
-
* Width!
|
|
37
|
-
*/
|
|
38
|
-
width?: number;
|
|
39
|
-
}
|
|
40
|
-
export interface LeftSidebarProps extends SlotWidthProps {
|
|
41
|
-
/**
|
|
42
|
-
* 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.
|
|
43
|
-
*/
|
|
44
|
-
testId?: string;
|
|
45
|
-
/**
|
|
46
|
-
* You can override prop(s) for the mentioned component(s).
|
|
47
|
-
*/
|
|
48
|
-
overrides?: {
|
|
49
|
-
ResizeButton?: {
|
|
50
|
-
render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
/**
|
|
54
|
-
* Display label for grab area. This will be announced to the screenreaders when the grab area receives focus
|
|
55
|
-
*/
|
|
56
|
-
resizeGrabAreaLabel?: string;
|
|
57
|
-
/**
|
|
58
|
-
* Display label for resize button.
|
|
59
|
-
*/
|
|
60
|
-
resizeButtonLabel?: string;
|
|
61
|
-
/**
|
|
62
|
-
* Called when left-sidebar is collapsed.
|
|
63
|
-
*/
|
|
64
|
-
onCollapse?: () => void;
|
|
65
|
-
/**
|
|
66
|
-
* Called when left-sidebar is expanded.
|
|
67
|
-
*/
|
|
68
|
-
onExpand?: () => void;
|
|
69
|
-
/**
|
|
70
|
-
* Called when left-sidebar resize starts using mouse or touch.
|
|
71
|
-
*/
|
|
72
|
-
onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
|
|
73
|
-
/**
|
|
74
|
-
* Called when left-sidebar resize ends using mouse or touch.
|
|
75
|
-
*/
|
|
76
|
-
onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
|
|
77
|
-
/**
|
|
78
|
-
* Called when left-sidebar is collapsed and mouse leaves the area.
|
|
79
|
-
*/
|
|
80
|
-
onFlyoutCollapse?: () => void;
|
|
81
|
-
/**
|
|
82
|
-
* Called after flyout delay when left-sidebar is collapsed and mouse enters the area.
|
|
83
|
-
*/
|
|
84
|
-
onFlyoutExpand?: () => void;
|
|
85
|
-
/**
|
|
86
|
-
* Controls whether the LeftSidebar mounts in a collapsed state, this will override the setting in localStorage
|
|
87
|
-
*/
|
|
88
|
-
collapsedState?: 'collapsed' | 'expanded';
|
|
89
|
-
/**
|
|
90
|
-
* Controls the width when LeftSidebar mounts, this will override the setting in localStorage
|
|
91
|
-
*/
|
|
92
|
-
width?: number;
|
|
93
|
-
}
|
|
94
|
-
export declare type SidebarResizeControllerProps = {
|
|
95
|
-
/**
|
|
96
|
-
* Called when left-sidebar expanded.
|
|
97
|
-
*/
|
|
98
|
-
onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
|
|
99
|
-
/**
|
|
100
|
-
* Called when left-sidebar collapsed.
|
|
101
|
-
*/
|
|
102
|
-
onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
|
|
103
|
-
};
|
|
104
|
-
export declare type DimensionNames = 'leftPanelWidth' | 'bannerHeight' | 'topNavigationHeight' | 'leftSidebarWidth' | 'leftSidebarFlyoutWidth' | 'rightSidebarWidth' | 'rightPanelWidth';
|
|
105
|
-
export declare type Dimensions = Partial<Record<DimensionNames, number>>;
|
|
106
|
-
export interface PageLayoutProps extends SidebarResizeControllerProps {
|
|
107
|
-
/**
|
|
108
|
-
* React children!
|
|
109
|
-
*/
|
|
110
|
-
children: ReactNode;
|
|
111
|
-
skipLinksLabel?: string;
|
|
112
|
-
/**
|
|
113
|
-
* 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.
|
|
114
|
-
*/
|
|
115
|
-
testId?: string;
|
|
116
|
-
}
|
|
117
|
-
export type { LeftSidebarState } from '../controllers/sidebar-resize-context';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { DimensionNames, Dimensions } from './types';
|
|
2
|
-
declare const emptyGridState: Dimensions;
|
|
3
|
-
declare const mergeGridStateIntoStorage: (key: string, value: any) => void;
|
|
4
|
-
declare const getGridStateFromStorage: (key: string) => any;
|
|
5
|
-
declare const removeFromGridStateInStorage: (key: string, secondKey?: string | undefined) => void;
|
|
6
|
-
declare const resolveDimension: (key: DimensionNames, dimension?: number, shouldPersist?: boolean) => any;
|
|
7
|
-
declare const getLeftPanelWidth: () => number;
|
|
8
|
-
declare const getLeftSidebarPercentage: (currentWidth: number, maxWidth: number) => number;
|
|
9
|
-
declare const getPageLayoutSlotSelector: (slotName: string) => {
|
|
10
|
-
"data-ds--page-layout--slot": string;
|
|
11
|
-
};
|
|
12
|
-
declare const getPageLayoutSlotCSSSelector: (slotName: string) => string;
|
|
13
|
-
export { emptyGridState, mergeGridStateIntoStorage, getGridStateFromStorage, removeFromGridStateInStorage, resolveDimension, getLeftPanelWidth, getLeftSidebarPercentage, getPageLayoutSlotSelector, getPageLayoutSlotCSSSelector, };
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export { default as PageLayout } from './slots/page-layout';
|
|
2
|
-
export { default as Main } from './slots/main';
|
|
3
|
-
export { default as RightPanel } from './slots/right-panel';
|
|
4
|
-
export { default as LeftPanel } from './slots/left-panel';
|
|
5
|
-
export { default as RightSidebar } from './slots/right-sidebar';
|
|
6
|
-
export { default as LeftSidebar } from './slots/left-sidebar';
|
|
7
|
-
export { default as LeftSidebarWithoutResize } from './slots/left-sidebar-without-resize';
|
|
8
|
-
export { default as Banner } from './slots/banner-slot';
|
|
9
|
-
export { default as TopNavigation } from './slots/top-navigation';
|
|
10
|
-
export { default as Content } from './slots/content';
|
|
11
|
-
export { default as ResizeControl } from './resize-control';
|
|
12
|
-
export { useCustomSkipLink } from './skip-links';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { ComponentProps } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
export declare type GrabAreaProps = {
|
|
5
|
-
testId?: string;
|
|
6
|
-
isLeftSidebarCollapsed: boolean;
|
|
7
|
-
} & ComponentProps<'button'>;
|
|
8
|
-
declare const GrabArea: ({ testId, isLeftSidebarCollapsed, ...rest }: GrabAreaProps) => jsx.JSX.Element;
|
|
9
|
-
export default GrabArea;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { ResizeControlProps } from './types';
|
|
3
|
-
declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => jsx.JSX.Element;
|
|
4
|
-
export default ResizeControl;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes, ElementType, ReactElement } from 'react';
|
|
2
|
-
import { LeftSidebarState } from '../../controllers/sidebar-resize-context';
|
|
3
|
-
export declare type ResizeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
4
|
-
isLeftSidebarCollapsed: boolean;
|
|
5
|
-
label: string;
|
|
6
|
-
testId?: string;
|
|
7
|
-
};
|
|
8
|
-
export declare type ResizeControlProps = {
|
|
9
|
-
testId?: string;
|
|
10
|
-
overrides?: {
|
|
11
|
-
ResizeButton?: {
|
|
12
|
-
render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
resizeGrabAreaLabel?: string;
|
|
16
|
-
resizeButtonLabel?: string;
|
|
17
|
-
onCollapse?: (leftSidebarState: LeftSidebarState) => void;
|
|
18
|
-
onExpand?: (leftSidebarState: LeftSidebarState) => void;
|
|
19
|
-
onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
|
|
20
|
-
onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
|
|
21
|
-
onFlyoutCollapse?: () => void;
|
|
22
|
-
onFlyoutExpand?: () => void;
|
|
23
|
-
leftSidebarState: LeftSidebarState;
|
|
24
|
-
setLeftSidebarState: (leftSidebarState: LeftSidebarState) => void;
|
|
25
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
import { SkipLinkWrapperProps } from './types';
|
|
5
|
-
export declare const SkipLinkWrapper: ({ skipLinksLabel }: SkipLinkWrapperProps) => jsx.JSX.Element | null;
|
|
6
|
-
export declare const SkipLink: ({ href, children, isFocusable, title, }: {
|
|
7
|
-
href: string;
|
|
8
|
-
children: ReactNode;
|
|
9
|
-
isFocusable: boolean;
|
|
10
|
-
title: string;
|
|
11
|
-
}) => jsx.JSX.Element;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { SlotHeightProps } from '../../common/types';
|
|
3
|
-
/**
|
|
4
|
-
* __Banner__
|
|
5
|
-
*
|
|
6
|
-
* Provides a slot for a Banner within the PageLayout.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
10
|
-
*/
|
|
11
|
-
declare const Banner: (props: SlotHeightProps) => jsx.JSX.Element;
|
|
12
|
-
export default Banner;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
interface ContentProps {
|
|
5
|
-
/**
|
|
6
|
-
* React children
|
|
7
|
-
*/
|
|
8
|
-
children: ReactNode;
|
|
9
|
-
/**
|
|
10
|
-
* 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.
|
|
11
|
-
*/
|
|
12
|
-
testId?: string;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* __Content__
|
|
16
|
-
*
|
|
17
|
-
* Provides a slot for your application content within the PageLayout.
|
|
18
|
-
*
|
|
19
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
20
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
21
|
-
*/
|
|
22
|
-
declare const Content: (props: ContentProps) => jsx.JSX.Element;
|
|
23
|
-
export default Content;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import type { ReactNode } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
declare type LeftSidebarInnerProps = {
|
|
5
|
-
children: ReactNode;
|
|
6
|
-
isFixed?: boolean;
|
|
7
|
-
isFlyoutOpen?: boolean;
|
|
8
|
-
};
|
|
9
|
-
declare const LeftSidebarInner: ({ children, isFixed, isFlyoutOpen, }: LeftSidebarInnerProps) => jsx.JSX.Element;
|
|
10
|
-
export default LeftSidebarInner;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { MouseEventHandler, ReactNode } from 'react';
|
|
3
|
-
declare type LeftSidebarOuterProps = {
|
|
4
|
-
children: ReactNode;
|
|
5
|
-
isFixed?: boolean;
|
|
6
|
-
isFlyoutOpen?: boolean;
|
|
7
|
-
testId?: string;
|
|
8
|
-
id?: string;
|
|
9
|
-
onMouseOver?: MouseEventHandler;
|
|
10
|
-
onMouseLeave?: MouseEventHandler;
|
|
11
|
-
};
|
|
12
|
-
declare const _default: import("react").ForwardRefExoticComponent<LeftSidebarOuterProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
-
export default _default;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import type { ReactNode } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
declare type ResizableChildrenWrapperProps = {
|
|
5
|
-
children: ReactNode;
|
|
6
|
-
isFlyoutOpen?: boolean;
|
|
7
|
-
isLeftSidebarCollapsed?: boolean;
|
|
8
|
-
hasCollapsedState?: boolean;
|
|
9
|
-
};
|
|
10
|
-
declare const ResizableChildrenWrapper: ({ children, isLeftSidebarCollapsed, hasCollapsedState, isFlyoutOpen, }: ResizableChildrenWrapperProps) => jsx.JSX.Element;
|
|
11
|
-
export default ResizableChildrenWrapper;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import type { ReactNode } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
declare type SlotFocusRingProps = {
|
|
5
|
-
children: (props: {
|
|
6
|
-
className: string;
|
|
7
|
-
}) => ReactNode;
|
|
8
|
-
isSidebar?: boolean;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* We don't use `@atlaskit/focus-ring` here,
|
|
12
|
-
* because we need inset focus styles and:
|
|
13
|
-
*
|
|
14
|
-
* 1. If we set them directly to the layout element,
|
|
15
|
-
* then any child element's background will cover the shadow.
|
|
16
|
-
* 2. We cannot wrap `children` in `FocusRing`,
|
|
17
|
-
* because there's no guarantee the passed child takes `className`.
|
|
18
|
-
*/
|
|
19
|
-
declare const SlotFocusRing: ({ children, isSidebar }: SlotFocusRingProps) => jsx.JSX.Element;
|
|
20
|
-
export default SlotFocusRing;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { SlotWidthProps } from '../../common/types';
|
|
3
|
-
/**
|
|
4
|
-
* __Left panel__
|
|
5
|
-
*
|
|
6
|
-
* Provides a slot for a left panel within the PageLayout.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
10
|
-
*/
|
|
11
|
-
declare const LeftPanel: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
12
|
-
export default LeftPanel;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { SlotWidthProps } from '../../common/types';
|
|
3
|
-
/**
|
|
4
|
-
* __Left sidebar without resize__
|
|
5
|
-
*
|
|
6
|
-
* Provides a slot for a left sidebar without resize within the PageLayout.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
10
|
-
*/
|
|
11
|
-
declare const LeftSidebarWithoutResize: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
12
|
-
export default LeftSidebarWithoutResize;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { LeftSidebarProps } from '../../common/types';
|
|
3
|
-
/**
|
|
4
|
-
* __Left sidebar__
|
|
5
|
-
*
|
|
6
|
-
* Provides a slot for a left sidebar within the PageLayout.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
10
|
-
*/
|
|
11
|
-
declare const LeftSidebar: (props: LeftSidebarProps) => jsx.JSX.Element;
|
|
12
|
-
export default LeftSidebar;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { SlotWidthProps } from '../../common/types';
|
|
3
|
-
/**
|
|
4
|
-
* __Main__
|
|
5
|
-
*
|
|
6
|
-
* Provides a slot for main content within the PageLayout.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
10
|
-
*/
|
|
11
|
-
declare const Main: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
12
|
-
export default Main;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { PageLayoutProps } from '../../common/types';
|
|
3
|
-
/**
|
|
4
|
-
* __Page layout__
|
|
5
|
-
*
|
|
6
|
-
* A collection of components which let you compose an application's page layout.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
10
|
-
*/
|
|
11
|
-
declare const PageLayout: ({ skipLinksLabel, children, testId, onLeftSidebarExpand, onLeftSidebarCollapse, }: PageLayoutProps) => jsx.JSX.Element;
|
|
12
|
-
export default PageLayout;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { SlotWidthProps } from '../../common/types';
|
|
3
|
-
/**
|
|
4
|
-
* __Right panel__
|
|
5
|
-
*
|
|
6
|
-
* Provides a slot for a right panel within the PageLayout.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
10
|
-
*/
|
|
11
|
-
declare const RightPanel: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
12
|
-
export default RightPanel;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { SlotWidthProps } from '../../common/types';
|
|
3
|
-
/**
|
|
4
|
-
* __Right sidebar__
|
|
5
|
-
*
|
|
6
|
-
* Provides a slot for a right sidebar within the PageLayout.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
10
|
-
*/
|
|
11
|
-
declare const RightSidebar: (props: SlotWidthProps) => jsx.JSX.Element;
|
|
12
|
-
export default RightSidebar;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import { SlotHeightProps } from '../../common/types';
|
|
3
|
-
/**
|
|
4
|
-
* __Top navigation__
|
|
5
|
-
*
|
|
6
|
-
* Provides a slot for top navigation within the PageLayout.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
10
|
-
*/
|
|
11
|
-
declare const TopNavigation: (props: SlotHeightProps) => jsx.JSX.Element;
|
|
12
|
-
export default TopNavigation;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export type { SkipLinkData } from './types';
|
|
2
|
-
export { default as publishGridState } from './use-page-layout-grid';
|
|
3
|
-
export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock, } from './sidebar-resize-context';
|
|
4
|
-
export { SidebarResizeController } from './sidebar-resize-controller';
|
|
5
|
-
export { useSkipLinks, useSkipLink } from './skip-link-context';
|
|
6
|
-
export { SkipLinksController } from './skip-link-controller';
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { KeyboardEvent, MouseEvent } from 'react';
|
|
2
|
-
export declare type LeftSidebarState = {
|
|
3
|
-
isFlyoutOpen: boolean;
|
|
4
|
-
isResizing: boolean;
|
|
5
|
-
isLeftSidebarCollapsed: boolean;
|
|
6
|
-
leftSidebarWidth: number;
|
|
7
|
-
lastLeftSidebarWidth: number;
|
|
8
|
-
flyoutLockCount: number;
|
|
9
|
-
isFixed: boolean;
|
|
10
|
-
};
|
|
11
|
-
export declare type SidebarResizeContextValue = {
|
|
12
|
-
isLeftSidebarCollapsed: boolean;
|
|
13
|
-
expandLeftSidebar: () => void;
|
|
14
|
-
collapseLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
|
|
15
|
-
leftSidebarState: LeftSidebarState;
|
|
16
|
-
setLeftSidebarState: (value: LeftSidebarState | ((prevState: LeftSidebarState) => LeftSidebarState)) => void;
|
|
17
|
-
};
|
|
18
|
-
export declare const SidebarResizeContext: import("react").Context<SidebarResizeContextValue>;
|
|
19
|
-
export declare const usePageLayoutResize: () => {
|
|
20
|
-
isLeftSidebarCollapsed: boolean;
|
|
21
|
-
expandLeftSidebar: () => void;
|
|
22
|
-
collapseLeftSidebar: (event?: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element> | undefined, collapseWithoutTransition?: boolean | undefined) => void;
|
|
23
|
-
leftSidebarState: LeftSidebarState;
|
|
24
|
-
};
|
|
25
|
-
/**
|
|
26
|
-
* _**WARNING:**_ This hook is intended as a temporary solution and
|
|
27
|
-
* is likely to be removed in a future version of page-layout.
|
|
28
|
-
*
|
|
29
|
-
* ---
|
|
30
|
-
*
|
|
31
|
-
* This hook will prevent the left sidebar from automatically collapsing
|
|
32
|
-
* when it is in a flyout state.
|
|
33
|
-
*
|
|
34
|
-
* The intended use case for this hook is to allow popup menus in the
|
|
35
|
-
* left sidebar to be usable while it is in a flyout state.
|
|
36
|
-
*
|
|
37
|
-
* ## Usage
|
|
38
|
-
* The intended usage is to use this hook within the popup component
|
|
39
|
-
* you are rendering. This way the left sidebar will be locked for
|
|
40
|
-
* as long as the popup is open.
|
|
41
|
-
*/
|
|
42
|
-
export declare const useLeftSidebarFlyoutLock: () => void;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { SkipLinkContextProps } from './types';
|
|
3
|
-
export declare const SkipLinksContext: import("react").Context<SkipLinkContextProps>;
|
|
4
|
-
export declare const useSkipLinks: () => SkipLinkContextProps;
|
|
5
|
-
export declare const useSkipLink: (id?: string | undefined, skipLinkTitle?: string | undefined) => void;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
export declare type SkipLinkContextProps = {
|
|
2
|
-
skipLinksData: SkipLinkData[];
|
|
3
|
-
registerSkipLink: (skipLinkDate: SkipLinkData) => void;
|
|
4
|
-
unregisterSkipLink: (id: string | undefined) => void;
|
|
5
|
-
};
|
|
6
|
-
export declare type SkipLinkData = {
|
|
7
|
-
/**
|
|
8
|
-
* id for the element that will be skipped to
|
|
9
|
-
*/
|
|
10
|
-
id: string;
|
|
11
|
-
/**
|
|
12
|
-
* Text for the link that will appear in the skip link menu
|
|
13
|
-
*/
|
|
14
|
-
skipLinkTitle: string;
|
|
15
|
-
/**
|
|
16
|
-
* Desired position in the skip link menu
|
|
17
|
-
*/
|
|
18
|
-
listIndex?: number;
|
|
19
|
-
};
|
|
20
|
-
export declare type SkipLinkI18n = {
|
|
21
|
-
title: string;
|
|
22
|
-
};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export { PageLayout, Main, Content, RightSidebar, LeftSidebar, LeftSidebarWithoutResize, RightPanel, LeftPanel, Banner, TopNavigation, useCustomSkipLink, } from './components';
|
|
2
|
-
export { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, LEFT_SIDEBAR_WIDTH, RIGHT_SIDEBAR_WIDTH, } from './common/constants';
|
|
3
|
-
export { usePageLayoutResize, useLeftSidebarFlyoutLock } from './controllers';
|
|
4
|
-
export type { SlotHeightProps, SlotWidthProps, Dimensions, LeftSidebarState, } from './common/types';
|