@atlaskit/page-layout 1.2.5 → 1.2.8
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 +19 -0
- package/__perf__/utils/perf-example.tsx +2 -2
- package/__perf__/utils/product-integration/{AtlassianNavigation.tsx → atlassian-navigation.tsx} +4 -4
- package/__perf__/utils/product-integration/{Create.tsx → create.tsx} +2 -1
- package/__perf__/utils/product-integration/{HelpPopup.tsx → help-popup.tsx} +1 -0
- package/__perf__/utils/product-integration/{NotificationsPopup.tsx → notifications-popup.tsx} +0 -0
- package/__perf__/utils/product-integration/{ProfilePopup.tsx → profile-popup.tsx} +2 -1
- package/__perf__/utils/product-integration/{SampleFooter.tsx → sample-footer.tsx} +1 -0
- package/__perf__/utils/product-integration/{SampleHeader.tsx → sample-header.tsx} +2 -0
- package/__perf__/utils/product-integration/{SideNavigation.tsx → side-navigation.tsx} +2 -2
- package/dist/cjs/common/safe-local-storage.js +1 -0
- package/dist/cjs/components/resize-control/grab-area.js +4 -2
- package/dist/cjs/components/resize-control/index.js +2 -1
- package/dist/cjs/components/resize-control/resize-button.js +4 -2
- package/dist/cjs/components/resize-control/shadow.js +2 -1
- package/dist/cjs/components/skip-links/skip-link-components.js +4 -2
- package/dist/cjs/components/slots/banner.js +8 -0
- package/dist/cjs/components/slots/content.js +8 -0
- package/dist/cjs/components/slots/internal/left-sidebar-inner.js +2 -1
- package/dist/cjs/components/slots/internal/resizable-children-wrapper.js +2 -1
- package/dist/cjs/components/slots/left-panel.js +8 -0
- package/dist/cjs/components/slots/left-sidebar-without-resize.js +9 -0
- package/dist/cjs/components/slots/left-sidebar.js +10 -1
- package/dist/cjs/components/slots/main.js +8 -0
- package/dist/cjs/components/slots/page-layout.js +8 -0
- package/dist/cjs/components/slots/right-panel.js +8 -0
- package/dist/cjs/components/slots/right-sidebar.js +8 -0
- package/dist/cjs/components/slots/top-navigation.js +8 -0
- package/dist/cjs/controllers/sidebar-resize-context.js +8 -7
- package/dist/cjs/controllers/sidebar-resize-controller.js +5 -4
- package/dist/cjs/controllers/skip-link-context.js +6 -3
- package/dist/cjs/controllers/skip-link-controller.js +2 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/common/safe-local-storage.js +1 -0
- package/dist/es2019/components/resize-control/grab-area.js +4 -2
- package/dist/es2019/components/resize-control/index.js +2 -1
- package/dist/es2019/components/resize-control/resize-button.js +4 -2
- package/dist/es2019/components/resize-control/shadow.js +2 -1
- package/dist/es2019/components/skip-links/skip-link-components.js +4 -2
- package/dist/es2019/components/slots/banner.js +8 -0
- package/dist/es2019/components/slots/content.js +8 -0
- package/dist/es2019/components/slots/internal/left-sidebar-inner.js +2 -1
- package/dist/es2019/components/slots/internal/resizable-children-wrapper.js +2 -1
- package/dist/es2019/components/slots/left-panel.js +8 -0
- package/dist/es2019/components/slots/left-sidebar-without-resize.js +8 -0
- package/dist/es2019/components/slots/left-sidebar.js +10 -1
- package/dist/es2019/components/slots/main.js +8 -0
- package/dist/es2019/components/slots/page-layout.js +8 -0
- package/dist/es2019/components/slots/right-panel.js +8 -0
- package/dist/es2019/components/slots/right-sidebar.js +8 -0
- package/dist/es2019/components/slots/top-navigation.js +8 -0
- package/dist/es2019/controllers/sidebar-resize-context.js +4 -5
- package/dist/es2019/controllers/sidebar-resize-controller.js +3 -3
- package/dist/es2019/controllers/skip-link-context.js +2 -3
- package/dist/es2019/controllers/skip-link-controller.js +2 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/common/safe-local-storage.js +1 -0
- package/dist/esm/components/resize-control/grab-area.js +4 -2
- package/dist/esm/components/resize-control/index.js +2 -1
- package/dist/esm/components/resize-control/resize-button.js +4 -2
- package/dist/esm/components/resize-control/shadow.js +2 -1
- package/dist/esm/components/skip-links/skip-link-components.js +4 -2
- package/dist/esm/components/slots/banner.js +8 -0
- package/dist/esm/components/slots/content.js +8 -0
- package/dist/esm/components/slots/internal/left-sidebar-inner.js +2 -1
- package/dist/esm/components/slots/internal/resizable-children-wrapper.js +2 -1
- package/dist/esm/components/slots/left-panel.js +8 -0
- package/dist/esm/components/slots/left-sidebar-without-resize.js +8 -0
- package/dist/esm/components/slots/left-sidebar.js +10 -1
- package/dist/esm/components/slots/main.js +8 -0
- package/dist/esm/components/slots/page-layout.js +8 -0
- package/dist/esm/components/slots/right-panel.js +8 -0
- package/dist/esm/components/slots/right-sidebar.js +8 -0
- package/dist/esm/components/slots/top-navigation.js +8 -0
- package/dist/esm/controllers/sidebar-resize-context.js +4 -5
- package/dist/esm/controllers/sidebar-resize-controller.js +3 -3
- package/dist/esm/controllers/skip-link-context.js +2 -3
- package/dist/esm/controllers/skip-link-controller.js +2 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/common/types.d.ts +61 -21
- package/dist/types/common/utils.d.ts +1 -1
- package/dist/types/components/slots/banner.d.ts +8 -0
- package/dist/types/components/slots/content.d.ts +12 -2
- package/dist/types/components/slots/left-panel.d.ts +8 -0
- package/dist/types/components/slots/left-sidebar-without-resize.d.ts +8 -0
- package/dist/types/components/slots/left-sidebar.d.ts +8 -0
- package/dist/types/components/slots/main.d.ts +8 -0
- package/dist/types/components/slots/page-layout.d.ts +8 -0
- package/dist/types/components/slots/right-panel.d.ts +8 -0
- package/dist/types/components/slots/right-sidebar.d.ts +8 -0
- package/dist/types/components/slots/top-navigation.d.ts +8 -0
- package/dist/types/controllers/sidebar-resize-context.d.ts +1 -1
- package/dist/types/controllers/types.d.ts +9 -3
- package/package.json +10 -8
- package/report.api.md +219 -0
|
@@ -47,6 +47,7 @@ const LeftSidebarInner = ({
|
|
|
47
47
|
return jsx("div", {
|
|
48
48
|
css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
|
|
49
49
|
}, children);
|
|
50
|
-
};
|
|
50
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
51
|
+
|
|
51
52
|
|
|
52
53
|
export default LeftSidebarInner;
|
|
@@ -18,6 +18,14 @@ const leftPanelFixedStyles = css({
|
|
|
18
18
|
bottom: 0,
|
|
19
19
|
left: 0
|
|
20
20
|
});
|
|
21
|
+
/**
|
|
22
|
+
* __Left panel__
|
|
23
|
+
*
|
|
24
|
+
* Provides a slot for a left panel within the PageLayout.
|
|
25
|
+
*
|
|
26
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
27
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
28
|
+
*/
|
|
21
29
|
|
|
22
30
|
const LeftPanel = props => {
|
|
23
31
|
const {
|
|
@@ -7,6 +7,14 @@ import { publishGridState, useSkipLink } from '../../controllers';
|
|
|
7
7
|
import LeftSidebarInner from './internal/left-sidebar-inner';
|
|
8
8
|
import LeftSidebarOuter from './internal/left-sidebar-outer';
|
|
9
9
|
import SlotDimensions from './slot-dimensions';
|
|
10
|
+
/**
|
|
11
|
+
* __Left sidebar without resize__
|
|
12
|
+
*
|
|
13
|
+
* Provides a slot for a left sidebar without resize within the PageLayout.
|
|
14
|
+
*
|
|
15
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
16
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
17
|
+
*/
|
|
10
18
|
|
|
11
19
|
const LeftSidebarWithoutResize = props => {
|
|
12
20
|
const {
|
|
@@ -11,6 +11,14 @@ import LeftSidebarInner from './internal/left-sidebar-inner';
|
|
|
11
11
|
import LeftSidebarOuter from './internal/left-sidebar-outer';
|
|
12
12
|
import ResizableChildrenWrapper from './internal/resizable-children-wrapper';
|
|
13
13
|
import SlotDimensions from './slot-dimensions';
|
|
14
|
+
/**
|
|
15
|
+
* __Left sidebar__
|
|
16
|
+
*
|
|
17
|
+
* Provides a slot for a left sidebar within the PageLayout.
|
|
18
|
+
*
|
|
19
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
20
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
21
|
+
*/
|
|
14
22
|
|
|
15
23
|
const LeftSidebar = props => {
|
|
16
24
|
const {
|
|
@@ -226,7 +234,8 @@ const LeftSidebar = props => {
|
|
|
226
234
|
}, children), jsx(ResizeControl, {
|
|
227
235
|
testId: testId,
|
|
228
236
|
resizeGrabAreaLabel: resizeGrabAreaLabel,
|
|
229
|
-
resizeButtonLabel: resizeButtonLabel
|
|
237
|
+
resizeButtonLabel: resizeButtonLabel // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
238
|
+
,
|
|
230
239
|
overrides: overrides,
|
|
231
240
|
onCollapse: onCollapse,
|
|
232
241
|
onExpand: onExpand,
|
|
@@ -35,6 +35,14 @@ const draggingStyles = css({
|
|
|
35
35
|
const flyoutStyles = css({
|
|
36
36
|
marginLeft: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
|
|
37
37
|
});
|
|
38
|
+
/**
|
|
39
|
+
* __Main__
|
|
40
|
+
*
|
|
41
|
+
* Provides a slot for main content within the PageLayout.
|
|
42
|
+
*
|
|
43
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
44
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
45
|
+
*/
|
|
38
46
|
|
|
39
47
|
const Main = props => {
|
|
40
48
|
const {
|
|
@@ -22,6 +22,14 @@ const gridStyles = css({
|
|
|
22
22
|
gridTemplateRows: `${BANNER_HEIGHT} ${TOP_NAVIGATION_HEIGHT} auto`,
|
|
23
23
|
outline: 'none'
|
|
24
24
|
});
|
|
25
|
+
/**
|
|
26
|
+
* __Page layout__
|
|
27
|
+
*
|
|
28
|
+
* A collection of components which let you compose an application's page layout.
|
|
29
|
+
*
|
|
30
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
31
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
32
|
+
*/
|
|
25
33
|
|
|
26
34
|
const PageLayout = ({
|
|
27
35
|
skipLinksLabel = DEFAULT_I18N_PROPS_SKIP_LINKS,
|
|
@@ -18,6 +18,14 @@ const fixedStyles = css({
|
|
|
18
18
|
right: 0,
|
|
19
19
|
bottom: 0
|
|
20
20
|
});
|
|
21
|
+
/**
|
|
22
|
+
* __Right panel__
|
|
23
|
+
*
|
|
24
|
+
* Provides a slot for a right panel within the PageLayout.
|
|
25
|
+
*
|
|
26
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
27
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
28
|
+
*/
|
|
21
29
|
|
|
22
30
|
const RightPanel = props => {
|
|
23
31
|
const {
|
|
@@ -45,6 +45,14 @@ const fixedOuterStyles = css({
|
|
|
45
45
|
content: "''"
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
|
+
/**
|
|
49
|
+
* __Right sidebar__
|
|
50
|
+
*
|
|
51
|
+
* Provides a slot for a right sidebar within the PageLayout.
|
|
52
|
+
*
|
|
53
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
54
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
55
|
+
*/
|
|
48
56
|
|
|
49
57
|
const RightSidebar = props => {
|
|
50
58
|
const {
|
|
@@ -19,6 +19,14 @@ const fixedStyles = css({
|
|
|
19
19
|
right: RIGHT_PANEL_WIDTH,
|
|
20
20
|
left: LEFT_PANEL_WIDTH
|
|
21
21
|
});
|
|
22
|
+
/**
|
|
23
|
+
* __Top navigation__
|
|
24
|
+
*
|
|
25
|
+
* Provides a slot for top navigation within the PageLayout.
|
|
26
|
+
*
|
|
27
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
28
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
29
|
+
*/
|
|
22
30
|
|
|
23
31
|
const TopNavigation = props => {
|
|
24
32
|
const {
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { createContext, useContext, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
const noop = () => {};
|
|
4
|
-
|
|
2
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
5
3
|
const leftSidebarState = {
|
|
6
4
|
isFlyoutOpen: false,
|
|
7
5
|
isResizing: false,
|
|
@@ -10,7 +8,8 @@ const leftSidebarState = {
|
|
|
10
8
|
lastLeftSidebarWidth: 0,
|
|
11
9
|
flyoutLockCount: 0,
|
|
12
10
|
isFixed: true
|
|
13
|
-
};
|
|
11
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
12
|
+
|
|
14
13
|
export const SidebarResizeContext = /*#__PURE__*/createContext({
|
|
15
14
|
isLeftSidebarCollapsed: false,
|
|
16
15
|
expandLeftSidebar: noop,
|
|
@@ -26,7 +25,7 @@ export const usePageLayoutResize = () => {
|
|
|
26
25
|
return context;
|
|
27
26
|
};
|
|
28
27
|
/**
|
|
29
|
-
* **WARNING:** This hook is intended as a temporary solution and
|
|
28
|
+
* _**WARNING:**_ This hook is intended as a temporary solution and
|
|
30
29
|
* is likely to be removed in a future version of page-layout.
|
|
31
30
|
*
|
|
32
31
|
* ---
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
2
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
2
3
|
import { isReducedMotion } from '@atlaskit/motion';
|
|
3
4
|
import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, GRAB_AREA_SELECTOR, IS_SIDEBAR_COLLAPSING } from '../common/constants';
|
|
4
5
|
import { getPageLayoutSlotCSSSelector } from '../common/utils';
|
|
5
6
|
import { SidebarResizeContext } from './sidebar-resize-context';
|
|
6
7
|
|
|
7
|
-
const noop = () => {};
|
|
8
|
-
|
|
9
8
|
const handleDataAttributesAndCb = (callback = noop, isLeftSidebarCollapsed, leftSidebarState) => {
|
|
10
9
|
document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
|
|
11
10
|
callback(leftSidebarState);
|
|
12
|
-
};
|
|
11
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
12
|
+
|
|
13
13
|
|
|
14
14
|
export const SidebarResizeController = ({
|
|
15
15
|
children,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { createContext, useContext, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
3
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
5
4
|
export const SkipLinksContext = /*#__PURE__*/createContext({
|
|
6
5
|
skipLinksData: [],
|
|
7
6
|
registerSkipLink: noop,
|
package/dist/es2019/version.json
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
var isLocalStorageSupported = function isLocalStorageSupported() {
|
|
5
5
|
try {
|
|
6
6
|
// use an random key to test
|
|
7
|
+
// eslint-disable-next-line @repo/internal/react/disallow-unstable-values
|
|
7
8
|
var testKey = "__test_".concat(Date.now(), "__");
|
|
8
9
|
localStorage.setItem(testKey, testKey);
|
|
9
10
|
localStorage.removeItem(testKey);
|
|
@@ -59,10 +59,12 @@ var GrabArea = function GrabArea(_ref) {
|
|
|
59
59
|
return jsx("button", _extends({}, grabAreaSelector, {
|
|
60
60
|
"data-testid": testId,
|
|
61
61
|
type: "button",
|
|
62
|
-
css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
|
|
62
|
+
css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
63
|
+
|
|
63
64
|
}, rest), jsx("span", _extends({
|
|
64
65
|
css: lineStyles
|
|
65
66
|
}, grabAreaLineSelector)));
|
|
66
|
-
};
|
|
67
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
68
|
+
|
|
67
69
|
|
|
68
70
|
export default GrabArea;
|
|
@@ -286,6 +286,7 @@ var ResizeControl = function ResizeControl(_ref) {
|
|
|
286
286
|
testId: testId && "".concat(testId, "-resize-button")
|
|
287
287
|
}));
|
|
288
288
|
/* eslint-enable jsx-a11y/role-supports-aria-props */
|
|
289
|
-
};
|
|
289
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
290
|
+
|
|
290
291
|
|
|
291
292
|
export default ResizeControl;
|
|
@@ -83,12 +83,14 @@ var ResizeButton = function ResizeButton(_ref) {
|
|
|
83
83
|
"data-testid": testId // Prevents focus staying attached to the button
|
|
84
84
|
// when pressed
|
|
85
85
|
,
|
|
86
|
-
onMouseDown: preventDefault
|
|
86
|
+
onMouseDown: preventDefault // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
87
|
+
|
|
87
88
|
}, props), jsx(ChevronRight, {
|
|
88
89
|
label: ""
|
|
89
90
|
}), jsx("div", {
|
|
90
91
|
css: increaseHitAreaStyles
|
|
91
92
|
}));
|
|
92
|
-
};
|
|
93
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
94
|
+
|
|
93
95
|
|
|
94
96
|
export default ResizeButton;
|
|
@@ -57,7 +57,8 @@ var assignIndex = function assignIndex(num, arr) {
|
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
return assignIndex(num + 1, arr);
|
|
60
|
-
};
|
|
60
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
61
|
+
|
|
61
62
|
|
|
62
63
|
export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
|
|
63
64
|
var skipLinksLabel = _ref.skipLinksLabel;
|
|
@@ -165,7 +166,8 @@ var focusTargetRef = function focusTargetRef(href) {
|
|
|
165
166
|
|
|
166
167
|
return false;
|
|
167
168
|
};
|
|
168
|
-
};
|
|
169
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
170
|
+
|
|
169
171
|
|
|
170
172
|
export var SkipLink = function SkipLink(_ref3) {
|
|
171
173
|
var href = _ref3.href,
|
|
@@ -20,6 +20,14 @@ var bannerFixedStyles = css({
|
|
|
20
20
|
right: RIGHT_PANEL_WIDTH,
|
|
21
21
|
left: LEFT_PANEL_WIDTH
|
|
22
22
|
});
|
|
23
|
+
/**
|
|
24
|
+
* __Banner__
|
|
25
|
+
*
|
|
26
|
+
* Provides a slot for a Banner within the PageLayout.
|
|
27
|
+
*
|
|
28
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
29
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
30
|
+
*/
|
|
23
31
|
|
|
24
32
|
var Banner = function Banner(props) {
|
|
25
33
|
var children = props.children,
|
|
@@ -7,6 +7,14 @@ var contentStyles = css({
|
|
|
7
7
|
position: 'relative',
|
|
8
8
|
gridArea: CONTENT
|
|
9
9
|
});
|
|
10
|
+
/**
|
|
11
|
+
* __Content__
|
|
12
|
+
*
|
|
13
|
+
* Provides a slot for your application content within the PageLayout.
|
|
14
|
+
*
|
|
15
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
16
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
17
|
+
*/
|
|
10
18
|
|
|
11
19
|
var Content = function Content(props) {
|
|
12
20
|
var children = props.children,
|
|
@@ -48,6 +48,7 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
|
|
|
48
48
|
return jsx("div", {
|
|
49
49
|
css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
|
|
50
50
|
}, children);
|
|
51
|
-
};
|
|
51
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
52
|
+
|
|
52
53
|
|
|
53
54
|
export default LeftSidebarInner;
|
|
@@ -46,6 +46,7 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
|
|
|
46
46
|
}, jsx("div", {
|
|
47
47
|
css: fixedChildrenWrapperStyles
|
|
48
48
|
}, children));
|
|
49
|
-
};
|
|
49
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
50
|
+
|
|
50
51
|
|
|
51
52
|
export default ResizableChildrenWrapper;
|
|
@@ -19,6 +19,14 @@ var leftPanelFixedStyles = css({
|
|
|
19
19
|
bottom: 0,
|
|
20
20
|
left: 0
|
|
21
21
|
});
|
|
22
|
+
/**
|
|
23
|
+
* __Left panel__
|
|
24
|
+
*
|
|
25
|
+
* Provides a slot for a left panel within the PageLayout.
|
|
26
|
+
*
|
|
27
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
28
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
29
|
+
*/
|
|
22
30
|
|
|
23
31
|
var LeftPanel = function LeftPanel(props) {
|
|
24
32
|
var children = props.children,
|
|
@@ -9,6 +9,14 @@ import { publishGridState, useSkipLink } from '../../controllers';
|
|
|
9
9
|
import LeftSidebarInner from './internal/left-sidebar-inner';
|
|
10
10
|
import LeftSidebarOuter from './internal/left-sidebar-outer';
|
|
11
11
|
import SlotDimensions from './slot-dimensions';
|
|
12
|
+
/**
|
|
13
|
+
* __Left sidebar without resize__
|
|
14
|
+
*
|
|
15
|
+
* Provides a slot for a left sidebar without resize within the PageLayout.
|
|
16
|
+
*
|
|
17
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
18
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
19
|
+
*/
|
|
12
20
|
|
|
13
21
|
var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
|
|
14
22
|
var children = props.children,
|
|
@@ -17,6 +17,14 @@ import LeftSidebarInner from './internal/left-sidebar-inner';
|
|
|
17
17
|
import LeftSidebarOuter from './internal/left-sidebar-outer';
|
|
18
18
|
import ResizableChildrenWrapper from './internal/resizable-children-wrapper';
|
|
19
19
|
import SlotDimensions from './slot-dimensions';
|
|
20
|
+
/**
|
|
21
|
+
* __Left sidebar__
|
|
22
|
+
*
|
|
23
|
+
* Provides a slot for a left sidebar within the PageLayout.
|
|
24
|
+
*
|
|
25
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
26
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
27
|
+
*/
|
|
20
28
|
|
|
21
29
|
var LeftSidebar = function LeftSidebar(props) {
|
|
22
30
|
var children = props.children,
|
|
@@ -235,7 +243,8 @@ var LeftSidebar = function LeftSidebar(props) {
|
|
|
235
243
|
}, children), jsx(ResizeControl, {
|
|
236
244
|
testId: testId,
|
|
237
245
|
resizeGrabAreaLabel: resizeGrabAreaLabel,
|
|
238
|
-
resizeButtonLabel: resizeButtonLabel
|
|
246
|
+
resizeButtonLabel: resizeButtonLabel // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
247
|
+
,
|
|
239
248
|
overrides: overrides,
|
|
240
249
|
onCollapse: onCollapse,
|
|
241
250
|
onExpand: onExpand,
|
|
@@ -35,6 +35,14 @@ var draggingStyles = css({
|
|
|
35
35
|
var flyoutStyles = css({
|
|
36
36
|
marginLeft: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
|
|
37
37
|
});
|
|
38
|
+
/**
|
|
39
|
+
* __Main__
|
|
40
|
+
*
|
|
41
|
+
* Provides a slot for main content within the PageLayout.
|
|
42
|
+
*
|
|
43
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
44
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
45
|
+
*/
|
|
38
46
|
|
|
39
47
|
var Main = function Main(props) {
|
|
40
48
|
var children = props.children,
|
|
@@ -19,6 +19,14 @@ var gridStyles = css({
|
|
|
19
19
|
gridTemplateRows: "".concat(BANNER_HEIGHT, " ").concat(TOP_NAVIGATION_HEIGHT, " auto"),
|
|
20
20
|
outline: 'none'
|
|
21
21
|
});
|
|
22
|
+
/**
|
|
23
|
+
* __Page layout__
|
|
24
|
+
*
|
|
25
|
+
* A collection of components which let you compose an application's page layout.
|
|
26
|
+
*
|
|
27
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
28
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
29
|
+
*/
|
|
22
30
|
|
|
23
31
|
var PageLayout = function PageLayout(_ref) {
|
|
24
32
|
var _ref$skipLinksLabel = _ref.skipLinksLabel,
|
|
@@ -19,6 +19,14 @@ var fixedStyles = css({
|
|
|
19
19
|
right: 0,
|
|
20
20
|
bottom: 0
|
|
21
21
|
});
|
|
22
|
+
/**
|
|
23
|
+
* __Right panel__
|
|
24
|
+
*
|
|
25
|
+
* Provides a slot for a right panel within the PageLayout.
|
|
26
|
+
*
|
|
27
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
28
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
29
|
+
*/
|
|
22
30
|
|
|
23
31
|
var RightPanel = function RightPanel(props) {
|
|
24
32
|
var children = props.children,
|
|
@@ -46,6 +46,14 @@ var fixedOuterStyles = css({
|
|
|
46
46
|
content: "''"
|
|
47
47
|
}
|
|
48
48
|
});
|
|
49
|
+
/**
|
|
50
|
+
* __Right sidebar__
|
|
51
|
+
*
|
|
52
|
+
* Provides a slot for a right sidebar within the PageLayout.
|
|
53
|
+
*
|
|
54
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
55
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
56
|
+
*/
|
|
49
57
|
|
|
50
58
|
var RightSidebar = function RightSidebar(props) {
|
|
51
59
|
var children = props.children,
|
|
@@ -20,6 +20,14 @@ var fixedStyles = css({
|
|
|
20
20
|
right: RIGHT_PANEL_WIDTH,
|
|
21
21
|
left: LEFT_PANEL_WIDTH
|
|
22
22
|
});
|
|
23
|
+
/**
|
|
24
|
+
* __Top navigation__
|
|
25
|
+
*
|
|
26
|
+
* Provides a slot for top navigation within the PageLayout.
|
|
27
|
+
*
|
|
28
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
29
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
30
|
+
*/
|
|
23
31
|
|
|
24
32
|
var TopNavigation = function TopNavigation(props) {
|
|
25
33
|
var children = props.children,
|
|
@@ -7,9 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
7
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
8
|
|
|
9
9
|
import { createContext, useContext, useEffect } from 'react';
|
|
10
|
-
|
|
11
|
-
var noop = function noop() {};
|
|
12
|
-
|
|
10
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
13
11
|
var leftSidebarState = {
|
|
14
12
|
isFlyoutOpen: false,
|
|
15
13
|
isResizing: false,
|
|
@@ -18,7 +16,8 @@ var leftSidebarState = {
|
|
|
18
16
|
lastLeftSidebarWidth: 0,
|
|
19
17
|
flyoutLockCount: 0,
|
|
20
18
|
isFixed: true
|
|
21
|
-
};
|
|
19
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
20
|
+
|
|
22
21
|
export var SidebarResizeContext = /*#__PURE__*/createContext({
|
|
23
22
|
isLeftSidebarCollapsed: false,
|
|
24
23
|
expandLeftSidebar: noop,
|
|
@@ -34,7 +33,7 @@ export var usePageLayoutResize = function usePageLayoutResize() {
|
|
|
34
33
|
return context;
|
|
35
34
|
};
|
|
36
35
|
/**
|
|
37
|
-
* **WARNING:** This hook is intended as a temporary solution and
|
|
36
|
+
* _**WARNING:**_ This hook is intended as a temporary solution and
|
|
38
37
|
* is likely to be removed in a future version of page-layout.
|
|
39
38
|
*
|
|
40
39
|
* ---
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
3
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
3
4
|
import { isReducedMotion } from '@atlaskit/motion';
|
|
4
5
|
import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, GRAB_AREA_SELECTOR, IS_SIDEBAR_COLLAPSING } from '../common/constants';
|
|
5
6
|
import { getPageLayoutSlotCSSSelector } from '../common/utils';
|
|
6
7
|
import { SidebarResizeContext } from './sidebar-resize-context';
|
|
7
8
|
|
|
8
|
-
var noop = function noop() {};
|
|
9
|
-
|
|
10
9
|
var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
|
|
11
10
|
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
|
|
12
11
|
var isLeftSidebarCollapsed = arguments.length > 1 ? arguments[1] : undefined;
|
|
13
12
|
var leftSidebarState = arguments.length > 2 ? arguments[2] : undefined;
|
|
14
13
|
document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
|
|
15
14
|
callback(leftSidebarState);
|
|
16
|
-
};
|
|
15
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
16
|
+
|
|
17
17
|
|
|
18
18
|
export var SidebarResizeController = function SidebarResizeController(_ref) {
|
|
19
19
|
var children = _ref.children,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { createContext, useContext, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
3
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
5
4
|
export var SkipLinksContext = /*#__PURE__*/createContext({
|
|
6
5
|
skipLinksData: [],
|
|
7
6
|
registerSkipLink: noop,
|
|
@@ -28,7 +28,8 @@ var byDOMOrder = function byDOMOrder(a, b) {
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
return indexA - indexB;
|
|
31
|
-
};
|
|
31
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
32
|
+
|
|
32
33
|
|
|
33
34
|
export var SkipLinksController = function SkipLinksController(_ref) {
|
|
34
35
|
var children = _ref.children;
|
package/dist/esm/version.json
CHANGED