@atlaskit/page-layout 1.2.6 → 1.2.7
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 +7 -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 +8 -6
- package/report.api.md +219 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/page-layout
|
|
2
2
|
|
|
3
|
+
## 1.2.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`26b3e978512`](https://bitbucket.org/atlassian/atlassian-frontend/commits/26b3e978512) - Internal code change turning on new linting rules.
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
3
10
|
## 1.2.6
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -12,8 +12,8 @@ import {
|
|
|
12
12
|
TopNavigation,
|
|
13
13
|
} from '../../src';
|
|
14
14
|
|
|
15
|
-
import JiraIntegrationExample from './product-integration/
|
|
16
|
-
import Sidebar from './product-integration/
|
|
15
|
+
import JiraIntegrationExample from './product-integration/atlassian-navigation';
|
|
16
|
+
import Sidebar from './product-integration/side-navigation';
|
|
17
17
|
|
|
18
18
|
const wrapperStyles = css({
|
|
19
19
|
boxSizing: 'border-box',
|
package/__perf__/utils/product-integration/{AtlassianNavigation.tsx → atlassian-navigation.tsx}
RENAMED
|
@@ -14,10 +14,10 @@ import {
|
|
|
14
14
|
import Drawer from '@atlaskit/drawer';
|
|
15
15
|
import { JiraIcon, JiraLogo } from '@atlaskit/logo';
|
|
16
16
|
|
|
17
|
-
import { DefaultCreate } from './
|
|
18
|
-
import { HelpPopup } from './
|
|
19
|
-
import { NotificationsPopup } from './
|
|
20
|
-
import { ProfilePopup } from './
|
|
17
|
+
import { DefaultCreate } from './create';
|
|
18
|
+
import { HelpPopup } from './help-popup';
|
|
19
|
+
import { NotificationsPopup } from './notifications-popup';
|
|
20
|
+
import { ProfilePopup } from './profile-popup';
|
|
21
21
|
|
|
22
22
|
const ProductHomeExample = () => (
|
|
23
23
|
<ProductHome icon={JiraIcon} logo={JiraLogo} siteTitle="Extranet" />
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import { Create } from '@atlaskit/atlassian-navigation';
|
|
4
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
4
5
|
import { token } from '@atlaskit/tokens';
|
|
5
6
|
|
|
6
7
|
const StyledTooltip = () => (
|
|
@@ -17,7 +18,7 @@ export const DefaultCreate = () => (
|
|
|
17
18
|
<Create
|
|
18
19
|
buttonTooltip={<StyledTooltip />}
|
|
19
20
|
iconButtonTooltip="Create button"
|
|
20
|
-
onClick={
|
|
21
|
+
onClick={noop}
|
|
21
22
|
text="Create"
|
|
22
23
|
testId="create-cta"
|
|
23
24
|
/>
|
|
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
|
|
|
3
3
|
import { Help } from '@atlaskit/atlassian-navigation';
|
|
4
4
|
import { ButtonItem, MenuGroup, Section } from '@atlaskit/menu';
|
|
5
5
|
import Popup from '@atlaskit/popup';
|
|
6
|
+
|
|
6
7
|
const HelpContent = () => (
|
|
7
8
|
<MenuGroup testId={'nav-help-content'}>
|
|
8
9
|
<Section title="Help">
|
package/__perf__/utils/product-integration/{NotificationsPopup.tsx → notifications-popup.tsx}
RENAMED
|
File without changes
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
|
|
3
3
|
import { Profile } from '@atlaskit/atlassian-navigation';
|
|
4
|
+
import noop from '@atlaskit/ds-lib/noop';
|
|
4
5
|
import { ButtonItem, MenuGroup, Section } from '@atlaskit/menu';
|
|
5
6
|
import Popup from '@atlaskit/popup';
|
|
6
7
|
|
|
7
8
|
export const DefaultProfile = () => (
|
|
8
9
|
<Profile
|
|
9
10
|
icon={<img src={avatarUrl} alt="Your profile and settings" />}
|
|
10
|
-
onClick={
|
|
11
|
+
onClick={noop}
|
|
11
12
|
tooltip="Your profile and settings"
|
|
12
13
|
/>
|
|
13
14
|
);
|
|
@@ -9,6 +9,7 @@ import { B400, N200 } from '@atlaskit/theme/colors';
|
|
|
9
9
|
import { token } from '@atlaskit/tokens';
|
|
10
10
|
|
|
11
11
|
const Container: React.FC<CustomItemComponentProps> = (props) => {
|
|
12
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
12
13
|
return <div {...props} />;
|
|
13
14
|
};
|
|
14
15
|
|
|
@@ -6,7 +6,9 @@ import { jsx } from '@emotion/core';
|
|
|
6
6
|
import Icon from '@atlaskit/icon';
|
|
7
7
|
import { CustomItemComponentProps } from '@atlaskit/menu';
|
|
8
8
|
import { Header } from '@atlaskit/side-navigation';
|
|
9
|
+
|
|
9
10
|
const Container: React.FC<CustomItemComponentProps> = (props) => {
|
|
11
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
10
12
|
return <div {...props} />;
|
|
11
13
|
};
|
|
12
14
|
|
|
@@ -20,8 +20,8 @@ import {
|
|
|
20
20
|
SideNavigation,
|
|
21
21
|
} from '@atlaskit/side-navigation';
|
|
22
22
|
|
|
23
|
-
import SampleFooter from './
|
|
24
|
-
import SampleHeader from './
|
|
23
|
+
import SampleFooter from './sample-footer';
|
|
24
|
+
import SampleHeader from './sample-header';
|
|
25
25
|
|
|
26
26
|
const LanguageSettings = () => {
|
|
27
27
|
return (
|
|
@@ -11,6 +11,7 @@ exports.default = void 0;
|
|
|
11
11
|
var isLocalStorageSupported = function isLocalStorageSupported() {
|
|
12
12
|
try {
|
|
13
13
|
// use an random key to test
|
|
14
|
+
// eslint-disable-next-line @repo/internal/react/disallow-unstable-values
|
|
14
15
|
var testKey = "__test_".concat(Date.now(), "__");
|
|
15
16
|
localStorage.setItem(testKey, testKey);
|
|
16
17
|
localStorage.removeItem(testKey);
|
|
@@ -68,11 +68,13 @@ var GrabArea = function GrabArea(_ref) {
|
|
|
68
68
|
return (0, _core.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
|
|
69
69
|
"data-testid": testId,
|
|
70
70
|
type: "button",
|
|
71
|
-
css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
|
|
71
|
+
css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
72
|
+
|
|
72
73
|
}, rest), (0, _core.jsx)("span", (0, _extends2.default)({
|
|
73
74
|
css: lineStyles
|
|
74
75
|
}, grabAreaLineSelector)));
|
|
75
|
-
};
|
|
76
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
77
|
+
|
|
76
78
|
|
|
77
79
|
var _default = GrabArea;
|
|
78
80
|
exports.default = _default;
|
|
@@ -302,7 +302,8 @@ var ResizeControl = function ResizeControl(_ref) {
|
|
|
302
302
|
testId: testId && "".concat(testId, "-resize-button")
|
|
303
303
|
}));
|
|
304
304
|
/* eslint-enable jsx-a11y/role-supports-aria-props */
|
|
305
|
-
};
|
|
305
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
306
|
+
|
|
306
307
|
|
|
307
308
|
var _default = ResizeControl;
|
|
308
309
|
exports.default = _default;
|
|
@@ -98,13 +98,15 @@ var ResizeButton = function ResizeButton(_ref) {
|
|
|
98
98
|
"data-testid": testId // Prevents focus staying attached to the button
|
|
99
99
|
// when pressed
|
|
100
100
|
,
|
|
101
|
-
onMouseDown: preventDefault
|
|
101
|
+
onMouseDown: preventDefault // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
102
|
+
|
|
102
103
|
}, props), (0, _core.jsx)(_chevronRight.default, {
|
|
103
104
|
label: ""
|
|
104
105
|
}), (0, _core.jsx)("div", {
|
|
105
106
|
css: increaseHitAreaStyles
|
|
106
107
|
}));
|
|
107
|
-
};
|
|
108
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
109
|
+
|
|
108
110
|
|
|
109
111
|
var _default = ResizeButton;
|
|
110
112
|
exports.default = _default;
|
|
@@ -42,7 +42,8 @@ var Shadow = function Shadow(_ref) {
|
|
|
42
42
|
"data-testid": testId,
|
|
43
43
|
css: [shadowStyles, isDragging && draggingStyles]
|
|
44
44
|
});
|
|
45
|
-
};
|
|
45
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
46
|
+
|
|
46
47
|
|
|
47
48
|
var _default = Shadow;
|
|
48
49
|
exports.default = _default;
|
|
@@ -69,7 +69,8 @@ var assignIndex = function assignIndex(num, arr) {
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
return assignIndex(num + 1, arr);
|
|
72
|
-
};
|
|
72
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
73
|
+
|
|
73
74
|
|
|
74
75
|
var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
|
|
75
76
|
var skipLinksLabel = _ref.skipLinksLabel;
|
|
@@ -179,7 +180,8 @@ var focusTargetRef = function focusTargetRef(href) {
|
|
|
179
180
|
|
|
180
181
|
return false;
|
|
181
182
|
};
|
|
182
|
-
};
|
|
183
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
184
|
+
|
|
183
185
|
|
|
184
186
|
var SkipLink = function SkipLink(_ref3) {
|
|
185
187
|
var href = _ref3.href,
|
|
@@ -37,6 +37,14 @@ var bannerFixedStyles = (0, _core.css)({
|
|
|
37
37
|
right: _constants.RIGHT_PANEL_WIDTH,
|
|
38
38
|
left: _constants.LEFT_PANEL_WIDTH
|
|
39
39
|
});
|
|
40
|
+
/**
|
|
41
|
+
* __Banner__
|
|
42
|
+
*
|
|
43
|
+
* Provides a slot for a Banner within the PageLayout.
|
|
44
|
+
*
|
|
45
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
46
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
47
|
+
*/
|
|
40
48
|
|
|
41
49
|
var Banner = function Banner(props) {
|
|
42
50
|
var children = props.children,
|
|
@@ -16,6 +16,14 @@ var contentStyles = (0, _core.css)({
|
|
|
16
16
|
position: 'relative',
|
|
17
17
|
gridArea: _constants.CONTENT
|
|
18
18
|
});
|
|
19
|
+
/**
|
|
20
|
+
* __Content__
|
|
21
|
+
*
|
|
22
|
+
* Provides a slot for your application content within the PageLayout.
|
|
23
|
+
*
|
|
24
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
25
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
26
|
+
*/
|
|
19
27
|
|
|
20
28
|
var Content = function Content(props) {
|
|
21
29
|
var children = props.children,
|
|
@@ -59,7 +59,8 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
|
|
|
59
59
|
return (0, _core.jsx)("div", {
|
|
60
60
|
css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
|
|
61
61
|
}, children);
|
|
62
|
-
};
|
|
62
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
63
|
+
|
|
63
64
|
|
|
64
65
|
var _default = LeftSidebarInner;
|
|
65
66
|
exports.default = _default;
|
|
@@ -57,7 +57,8 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
|
|
|
57
57
|
}, (0, _core.jsx)("div", {
|
|
58
58
|
css: fixedChildrenWrapperStyles
|
|
59
59
|
}, children));
|
|
60
|
-
};
|
|
60
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
61
|
+
|
|
61
62
|
|
|
62
63
|
var _default = ResizableChildrenWrapper;
|
|
63
64
|
exports.default = _default;
|
|
@@ -36,6 +36,14 @@ var leftPanelFixedStyles = (0, _core.css)({
|
|
|
36
36
|
bottom: 0,
|
|
37
37
|
left: 0
|
|
38
38
|
});
|
|
39
|
+
/**
|
|
40
|
+
* __Left panel__
|
|
41
|
+
*
|
|
42
|
+
* Provides a slot for a left panel within the PageLayout.
|
|
43
|
+
*
|
|
44
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
45
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
46
|
+
*/
|
|
39
47
|
|
|
40
48
|
var LeftPanel = function LeftPanel(props) {
|
|
41
49
|
var children = props.children,
|
|
@@ -26,6 +26,15 @@ var _leftSidebarOuter = _interopRequireDefault(require("./internal/left-sidebar-
|
|
|
26
26
|
var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
|
|
27
27
|
|
|
28
28
|
/** @jsx jsx */
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* __Left sidebar without resize__
|
|
32
|
+
*
|
|
33
|
+
* Provides a slot for a left sidebar without resize within the PageLayout.
|
|
34
|
+
*
|
|
35
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
36
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
37
|
+
*/
|
|
29
38
|
var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
|
|
30
39
|
var children = props.children,
|
|
31
40
|
id = props.id,
|
|
@@ -33,6 +33,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
33
33
|
|
|
34
34
|
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) { (0, _defineProperty2.default)(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; }
|
|
35
35
|
|
|
36
|
+
/**
|
|
37
|
+
* __Left sidebar__
|
|
38
|
+
*
|
|
39
|
+
* Provides a slot for a left sidebar within the PageLayout.
|
|
40
|
+
*
|
|
41
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
42
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
43
|
+
*/
|
|
36
44
|
var LeftSidebar = function LeftSidebar(props) {
|
|
37
45
|
var children = props.children,
|
|
38
46
|
width = props.width,
|
|
@@ -250,7 +258,8 @@ var LeftSidebar = function LeftSidebar(props) {
|
|
|
250
258
|
}, children), (0, _core.jsx)(_resizeControl.default, {
|
|
251
259
|
testId: testId,
|
|
252
260
|
resizeGrabAreaLabel: resizeGrabAreaLabel,
|
|
253
|
-
resizeButtonLabel: resizeButtonLabel
|
|
261
|
+
resizeButtonLabel: resizeButtonLabel // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
262
|
+
,
|
|
254
263
|
overrides: overrides,
|
|
255
264
|
onCollapse: onCollapse,
|
|
256
265
|
onExpand: onExpand,
|
|
@@ -53,6 +53,14 @@ var draggingStyles = (0, _core.css)({
|
|
|
53
53
|
var flyoutStyles = (0, _core.css)({
|
|
54
54
|
marginLeft: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
|
|
55
55
|
});
|
|
56
|
+
/**
|
|
57
|
+
* __Main__
|
|
58
|
+
*
|
|
59
|
+
* Provides a slot for main content within the PageLayout.
|
|
60
|
+
*
|
|
61
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
62
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
63
|
+
*/
|
|
56
64
|
|
|
57
65
|
var Main = function Main(props) {
|
|
58
66
|
var children = props.children,
|
|
@@ -32,6 +32,14 @@ var gridStyles = (0, _core.css)({
|
|
|
32
32
|
gridTemplateRows: "".concat(_constants.BANNER_HEIGHT, " ").concat(_constants.TOP_NAVIGATION_HEIGHT, " auto"),
|
|
33
33
|
outline: 'none'
|
|
34
34
|
});
|
|
35
|
+
/**
|
|
36
|
+
* __Page layout__
|
|
37
|
+
*
|
|
38
|
+
* A collection of components which let you compose an application's page layout.
|
|
39
|
+
*
|
|
40
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
41
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
42
|
+
*/
|
|
35
43
|
|
|
36
44
|
var PageLayout = function PageLayout(_ref) {
|
|
37
45
|
var _ref$skipLinksLabel = _ref.skipLinksLabel,
|
|
@@ -36,6 +36,14 @@ var fixedStyles = (0, _core.css)({
|
|
|
36
36
|
right: 0,
|
|
37
37
|
bottom: 0
|
|
38
38
|
});
|
|
39
|
+
/**
|
|
40
|
+
* __Right panel__
|
|
41
|
+
*
|
|
42
|
+
* Provides a slot for a right panel within the PageLayout.
|
|
43
|
+
*
|
|
44
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
45
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
46
|
+
*/
|
|
39
47
|
|
|
40
48
|
var RightPanel = function RightPanel(props) {
|
|
41
49
|
var children = props.children,
|
|
@@ -63,6 +63,14 @@ var fixedOuterStyles = (0, _core.css)({
|
|
|
63
63
|
content: "''"
|
|
64
64
|
}
|
|
65
65
|
});
|
|
66
|
+
/**
|
|
67
|
+
* __Right sidebar__
|
|
68
|
+
*
|
|
69
|
+
* Provides a slot for a right sidebar within the PageLayout.
|
|
70
|
+
*
|
|
71
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
72
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
73
|
+
*/
|
|
66
74
|
|
|
67
75
|
var RightSidebar = function RightSidebar(props) {
|
|
68
76
|
var children = props.children,
|
|
@@ -37,6 +37,14 @@ var fixedStyles = (0, _core.css)({
|
|
|
37
37
|
right: _constants.RIGHT_PANEL_WIDTH,
|
|
38
38
|
left: _constants.LEFT_PANEL_WIDTH
|
|
39
39
|
});
|
|
40
|
+
/**
|
|
41
|
+
* __Top navigation__
|
|
42
|
+
*
|
|
43
|
+
* Provides a slot for top navigation within the PageLayout.
|
|
44
|
+
*
|
|
45
|
+
* - [Examples](https://atlassian.design/components/page-layout/examples)
|
|
46
|
+
* - [Code](https://atlassian.design/components/page-layout/code)
|
|
47
|
+
*/
|
|
40
48
|
|
|
41
49
|
var TopNavigation = function TopNavigation(props) {
|
|
42
50
|
var children = props.children,
|
|
@@ -13,14 +13,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
13
13
|
|
|
14
14
|
var _react = require("react");
|
|
15
15
|
|
|
16
|
+
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
17
|
+
|
|
16
18
|
var _excluded = ["setLeftSidebarState"];
|
|
17
19
|
|
|
18
20
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
21
|
|
|
20
22
|
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) { (0, _defineProperty2.default)(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; }
|
|
21
23
|
|
|
22
|
-
var noop = function noop() {};
|
|
23
|
-
|
|
24
24
|
var leftSidebarState = {
|
|
25
25
|
isFlyoutOpen: false,
|
|
26
26
|
isResizing: false,
|
|
@@ -29,13 +29,14 @@ var leftSidebarState = {
|
|
|
29
29
|
lastLeftSidebarWidth: 0,
|
|
30
30
|
flyoutLockCount: 0,
|
|
31
31
|
isFixed: true
|
|
32
|
-
};
|
|
32
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
33
|
+
|
|
33
34
|
var SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
|
|
34
35
|
isLeftSidebarCollapsed: false,
|
|
35
|
-
expandLeftSidebar:
|
|
36
|
-
collapseLeftSidebar:
|
|
36
|
+
expandLeftSidebar: _noop.default,
|
|
37
|
+
collapseLeftSidebar: _noop.default,
|
|
37
38
|
leftSidebarState: leftSidebarState,
|
|
38
|
-
setLeftSidebarState:
|
|
39
|
+
setLeftSidebarState: _noop.default
|
|
39
40
|
});
|
|
40
41
|
exports.SidebarResizeContext = SidebarResizeContext;
|
|
41
42
|
|
|
@@ -47,7 +48,7 @@ var usePageLayoutResize = function usePageLayoutResize() {
|
|
|
47
48
|
return context;
|
|
48
49
|
};
|
|
49
50
|
/**
|
|
50
|
-
* **WARNING:** This hook is intended as a temporary solution and
|
|
51
|
+
* _**WARNING:**_ This hook is intended as a temporary solution and
|
|
51
52
|
* is likely to be removed in a future version of page-layout.
|
|
52
53
|
*
|
|
53
54
|
* ---
|
|
@@ -13,6 +13,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
13
13
|
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
15
|
|
|
16
|
+
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
17
|
+
|
|
16
18
|
var _motion = require("@atlaskit/motion");
|
|
17
19
|
|
|
18
20
|
var _constants = require("../common/constants");
|
|
@@ -25,15 +27,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
25
27
|
|
|
26
28
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
29
|
|
|
28
|
-
var noop = function noop() {};
|
|
29
|
-
|
|
30
30
|
var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
|
|
31
|
-
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] :
|
|
31
|
+
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _noop.default;
|
|
32
32
|
var isLeftSidebarCollapsed = arguments.length > 1 ? arguments[1] : undefined;
|
|
33
33
|
var leftSidebarState = arguments.length > 2 ? arguments[2] : undefined;
|
|
34
34
|
document.documentElement.removeAttribute(_constants.IS_SIDEBAR_COLLAPSING);
|
|
35
35
|
callback(leftSidebarState);
|
|
36
|
-
};
|
|
36
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
37
|
+
|
|
37
38
|
|
|
38
39
|
var SidebarResizeController = function SidebarResizeController(_ref) {
|
|
39
40
|
var children = _ref.children,
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
@@ -7,12 +9,13 @@ exports.useSkipLinks = exports.useSkipLink = exports.SkipLinksContext = void 0;
|
|
|
7
9
|
|
|
8
10
|
var _react = require("react");
|
|
9
11
|
|
|
10
|
-
var
|
|
12
|
+
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
11
13
|
|
|
14
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
12
15
|
var SkipLinksContext = /*#__PURE__*/(0, _react.createContext)({
|
|
13
16
|
skipLinksData: [],
|
|
14
|
-
registerSkipLink:
|
|
15
|
-
unregisterSkipLink:
|
|
17
|
+
registerSkipLink: _noop.default,
|
|
18
|
+
unregisterSkipLink: _noop.default
|
|
16
19
|
});
|
|
17
20
|
exports.SkipLinksContext = SkipLinksContext;
|
|
18
21
|
|
|
@@ -47,7 +47,8 @@ var byDOMOrder = function byDOMOrder(a, b) {
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
return indexA - indexB;
|
|
50
|
-
};
|
|
50
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
51
|
+
|
|
51
52
|
|
|
52
53
|
var SkipLinksController = function SkipLinksController(_ref) {
|
|
53
54
|
var children = _ref.children;
|
package/dist/cjs/version.json
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
const 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
|
const testKey = `__test_${Date.now()}__`;
|
|
8
9
|
localStorage.setItem(testKey, testKey);
|
|
9
10
|
localStorage.removeItem(testKey);
|
|
@@ -60,9 +60,11 @@ const GrabArea = ({
|
|
|
60
60
|
}) => jsx("button", _extends({}, grabAreaSelector, {
|
|
61
61
|
"data-testid": testId,
|
|
62
62
|
type: "button",
|
|
63
|
-
css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
|
|
63
|
+
css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
64
|
+
|
|
64
65
|
}, rest), jsx("span", _extends({
|
|
65
66
|
css: lineStyles
|
|
66
|
-
}, grabAreaLineSelector)));
|
|
67
|
+
}, grabAreaLineSelector))); // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
68
|
+
|
|
67
69
|
|
|
68
70
|
export default GrabArea;
|
|
@@ -274,6 +274,7 @@ const ResizeControl = ({
|
|
|
274
274
|
testId: testId && `${testId}-resize-button`
|
|
275
275
|
}));
|
|
276
276
|
/* eslint-enable jsx-a11y/role-supports-aria-props */
|
|
277
|
-
};
|
|
277
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
278
|
+
|
|
278
279
|
|
|
279
280
|
export default ResizeControl;
|
|
@@ -83,11 +83,13 @@ const ResizeButton = ({
|
|
|
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
|
+
})); // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
93
|
+
|
|
92
94
|
|
|
93
95
|
export default ResizeButton;
|
|
@@ -50,7 +50,8 @@ const assignIndex = (num, arr) => {
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
return assignIndex(num + 1, arr);
|
|
53
|
-
};
|
|
53
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
54
|
+
|
|
54
55
|
|
|
55
56
|
export const SkipLinkWrapper = ({
|
|
56
57
|
skipLinksLabel
|
|
@@ -144,7 +145,8 @@ const focusTargetRef = href => event => {
|
|
|
144
145
|
}
|
|
145
146
|
|
|
146
147
|
return false;
|
|
147
|
-
};
|
|
148
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
149
|
+
|
|
148
150
|
|
|
149
151
|
export const SkipLink = ({
|
|
150
152
|
href,
|
|
@@ -19,6 +19,14 @@ const bannerFixedStyles = css({
|
|
|
19
19
|
right: RIGHT_PANEL_WIDTH,
|
|
20
20
|
left: LEFT_PANEL_WIDTH
|
|
21
21
|
});
|
|
22
|
+
/**
|
|
23
|
+
* __Banner__
|
|
24
|
+
*
|
|
25
|
+
* Provides a slot for a Banner 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 Banner = props => {
|
|
24
32
|
const {
|
|
@@ -7,6 +7,14 @@ const 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
|
const Content = props => {
|
|
12
20
|
const {
|
|
@@ -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;
|