@atlaskit/page-layout 1.2.4 → 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 +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 +21 -7
- 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 +7 -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 +19 -7
- 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 +6 -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 +12 -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 +5 -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 +20 -7
- 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 +6 -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 +12 -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 +5 -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 +12 -7
- package/report.api.md +219 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
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
|
+
|
|
10
|
+
## 1.2.6
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
|
|
15
|
+
|
|
16
|
+
## 1.2.5
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
|
|
21
|
+
|
|
3
22
|
## 1.2.4
|
|
4
23
|
|
|
5
24
|
### 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;
|
|
@@ -17,6 +17,8 @@ var _react = require("react");
|
|
|
17
17
|
|
|
18
18
|
var _core = require("@emotion/core");
|
|
19
19
|
|
|
20
|
+
var _bindEventListener = require("bind-event-listener");
|
|
21
|
+
|
|
20
22
|
var _rafSchd = _interopRequireDefault(require("raf-schd"));
|
|
21
23
|
|
|
22
24
|
var _constants = require("../../common/constants");
|
|
@@ -75,6 +77,8 @@ var ResizeControl = function ResizeControl(_ref) {
|
|
|
75
77
|
isGrabAreaFocused = _useState2[0],
|
|
76
78
|
setIsGrabAreaFocused = _useState2[1];
|
|
77
79
|
|
|
80
|
+
var unbindEvents = (0, _react.useRef)(null);
|
|
81
|
+
|
|
78
82
|
var toggleSideBar = function toggleSideBar(e) {
|
|
79
83
|
if (isResizing) {
|
|
80
84
|
return;
|
|
@@ -101,8 +105,13 @@ var ResizeControl = function ResizeControl(_ref) {
|
|
|
101
105
|
}
|
|
102
106
|
|
|
103
107
|
offset.current = event.clientX - leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH] - (0, _utils.getLeftPanelWidth)();
|
|
104
|
-
|
|
105
|
-
|
|
108
|
+
unbindEvents.current = (0, _bindEventListener.bindAll)(document, [{
|
|
109
|
+
type: 'mousemove',
|
|
110
|
+
listener: onMouseMove
|
|
111
|
+
}, {
|
|
112
|
+
type: 'mouseup',
|
|
113
|
+
listener: onMouseUp
|
|
114
|
+
}]);
|
|
106
115
|
document.documentElement.setAttribute(_constants.IS_SIDEBAR_DRAGGING, 'true');
|
|
107
116
|
|
|
108
117
|
var newLeftbarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, {
|
|
@@ -114,9 +123,11 @@ var ResizeControl = function ResizeControl(_ref) {
|
|
|
114
123
|
};
|
|
115
124
|
|
|
116
125
|
var cancelDrag = function cancelDrag(shouldCollapse) {
|
|
126
|
+
var _unbindEvents$current;
|
|
127
|
+
|
|
117
128
|
onMouseMove.cancel();
|
|
118
|
-
|
|
119
|
-
|
|
129
|
+
(_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
|
|
130
|
+
unbindEvents.current = null;
|
|
120
131
|
document.documentElement.removeAttribute(_constants.IS_SIDEBAR_DRAGGING);
|
|
121
132
|
offset.current = 0;
|
|
122
133
|
collapseLeftSidebar(undefined, true);
|
|
@@ -139,10 +150,12 @@ var ResizeControl = function ResizeControl(_ref) {
|
|
|
139
150
|
});
|
|
140
151
|
|
|
141
152
|
var cleanupAfterResize = function cleanupAfterResize() {
|
|
153
|
+
var _unbindEvents$current2;
|
|
154
|
+
|
|
142
155
|
x.current = 0;
|
|
143
156
|
offset.current = 0;
|
|
144
|
-
|
|
145
|
-
|
|
157
|
+
(_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
|
|
158
|
+
unbindEvents.current = null;
|
|
146
159
|
};
|
|
147
160
|
|
|
148
161
|
var updatedLeftSidebarState = {};
|
|
@@ -289,7 +302,8 @@ var ResizeControl = function ResizeControl(_ref) {
|
|
|
289
302
|
testId: testId && "".concat(testId, "-resize-button")
|
|
290
303
|
}));
|
|
291
304
|
/* eslint-enable jsx-a11y/role-supports-aria-props */
|
|
292
|
-
};
|
|
305
|
+
}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
306
|
+
|
|
293
307
|
|
|
294
308
|
var _default = ResizeControl;
|
|
295
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,
|
|
@@ -60,6 +61,7 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
|
|
|
60
61
|
var $leftSidebarResizeController = document.querySelector("[".concat(_constants.GRAB_AREA_SELECTOR, "]"));
|
|
61
62
|
var isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
|
|
62
63
|
handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState); // Make sure multiple event handlers do not get attached
|
|
64
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
63
65
|
|
|
64
66
|
document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
|
|
65
67
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -69,6 +71,7 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
|
|
|
69
71
|
var $leftSidebar = document.querySelector(leftSidebarSelector);
|
|
70
72
|
|
|
71
73
|
if ($leftSidebar && !(0, _motion.isReducedMotion)()) {
|
|
74
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
72
75
|
$leftSidebar.addEventListener('transitionend', transitionEventHandler);
|
|
73
76
|
}
|
|
74
77
|
}, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);
|
|
@@ -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;
|