@atlaskit/navigation-system 11.2.0 → 11.2.1
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
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlassian/navigation-system
|
|
2
2
|
|
|
3
|
+
## 11.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`6af127aa0b583`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6af127aa0b583) -
|
|
8
|
+
Consolidate the open-layer observer providers in `TopNavEnd`.
|
|
9
|
+
|
|
3
10
|
## 11.2.0
|
|
4
11
|
|
|
5
12
|
### Minor Changes
|
|
@@ -18,7 +18,7 @@ var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/sh
|
|
|
18
18
|
var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer-observer-namespace-provider");
|
|
19
19
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
20
20
|
var _popup = require("@atlaskit/popup/popup");
|
|
21
|
-
var
|
|
21
|
+
var _index = require("@atlaskit/primitives/compiled/responsive/index");
|
|
22
22
|
var _list = require("../../../components/list");
|
|
23
23
|
var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
|
|
24
24
|
var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
|
|
@@ -63,7 +63,7 @@ function TopNavEnd(_ref) {
|
|
|
63
63
|
isMobile = _useState4[0],
|
|
64
64
|
setIsMobile = _useState4[1];
|
|
65
65
|
// Note: `query` is a stable value between renders
|
|
66
|
-
var query = (0,
|
|
66
|
+
var query = (0, _index.UNSAFE_useMediaQuery)('below.sm', function onChange(event) {
|
|
67
67
|
setIsMobile(event.matches);
|
|
68
68
|
// Any time we shift between mobile and desktop
|
|
69
69
|
// We always close the popup
|
|
@@ -75,14 +75,24 @@ function TopNavEnd(_ref) {
|
|
|
75
75
|
// Mobile will flip from `false` to `true`.
|
|
76
76
|
setIsMobile((_query$matches = query === null || query === void 0 ? void 0 : query.matches) !== null && _query$matches !== void 0 ? _query$matches : false);
|
|
77
77
|
}, [query]);
|
|
78
|
-
|
|
78
|
+
|
|
79
|
+
// The shared provider also covers the mobile overflow popup itself. Keep the
|
|
80
|
+
// previous content-only namespace coverage when the layout gate is disabled.
|
|
81
|
+
var actions = (0, _fg.fg)('platform-dst-chat-panel-layout') ? children : /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
|
|
82
|
+
namespace: _constants.openLayerObserverTopNavEndNamespace
|
|
83
|
+
}, children);
|
|
84
|
+
var content = /*#__PURE__*/_react.default.createElement("nav", {
|
|
79
85
|
"aria-label": label,
|
|
80
86
|
className: (0, _runtime.ax)([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
|
|
81
87
|
}, isMobile ? /*#__PURE__*/_react.default.createElement(_popup.Popup, {
|
|
82
88
|
isOpen: isOpen,
|
|
83
89
|
onClose: function onClose() {
|
|
84
90
|
return setIsOpen(false);
|
|
85
|
-
}
|
|
91
|
+
}
|
|
92
|
+
// Top-layer popups need a role to register as a popup with the layer observer.
|
|
93
|
+
,
|
|
94
|
+
role: (0, _fg.fg)('platform-dst-chat-panel-layout') ? 'dialog' : undefined,
|
|
95
|
+
label: (0, _fg.fg)('platform-dst-chat-panel-layout') ? label : undefined,
|
|
86
96
|
placement: "bottom-start",
|
|
87
97
|
shouldRenderToParent: true,
|
|
88
98
|
content: function content() {
|
|
@@ -90,9 +100,7 @@ function TopNavEnd(_ref) {
|
|
|
90
100
|
value: false
|
|
91
101
|
}, /*#__PURE__*/_react.default.createElement(_list.List, {
|
|
92
102
|
xcss: (0, _react2.cx)(listStyles.root, listStyles.popupContainer)
|
|
93
|
-
},
|
|
94
|
-
namespace: _constants.openLayerObserverTopNavEndNamespace
|
|
95
|
-
}, children)));
|
|
103
|
+
}, actions));
|
|
96
104
|
},
|
|
97
105
|
trigger: function trigger(triggerProps) {
|
|
98
106
|
return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, (0, _extends2.default)({}, triggerProps, {
|
|
@@ -107,9 +115,8 @@ function TopNavEnd(_ref) {
|
|
|
107
115
|
}
|
|
108
116
|
}) : /*#__PURE__*/_react.default.createElement(_list.List, {
|
|
109
117
|
xcss: (0, _react2.cx)(listStyles.root, listStyles.hideOnSmallViewport)
|
|
110
|
-
},
|
|
111
|
-
|
|
112
|
-
}, children)), hasPersistentItems && /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
|
|
118
|
+
}, actions), hasPersistentItems && persistentItems);
|
|
119
|
+
return (0, _fg.fg)('platform-dst-chat-panel-layout') ? /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
|
|
113
120
|
namespace: _constants.openLayerObserverTopNavEndNamespace
|
|
114
|
-
},
|
|
121
|
+
}, content) : content;
|
|
115
122
|
}
|
|
@@ -9,7 +9,7 @@ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
|
|
|
9
9
|
import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
|
|
10
10
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
11
11
|
import { Popup } from '@atlaskit/popup/popup';
|
|
12
|
-
import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
|
|
12
|
+
import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/responsive/index';
|
|
13
13
|
import { List } from '../../../components/list';
|
|
14
14
|
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
|
|
15
15
|
import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
|
|
@@ -58,21 +58,29 @@ export function TopNavEnd({
|
|
|
58
58
|
// Mobile will flip from `false` to `true`.
|
|
59
59
|
setIsMobile((_query$matches = query === null || query === void 0 ? void 0 : query.matches) !== null && _query$matches !== void 0 ? _query$matches : false);
|
|
60
60
|
}, [query]);
|
|
61
|
-
|
|
61
|
+
|
|
62
|
+
// The shared provider also covers the mobile overflow popup itself. Keep the
|
|
63
|
+
// previous content-only namespace coverage when the layout gate is disabled.
|
|
64
|
+
const actions = fg('platform-dst-chat-panel-layout') ? children : /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
|
|
65
|
+
namespace: openLayerObserverTopNavEndNamespace
|
|
66
|
+
}, children);
|
|
67
|
+
const content = /*#__PURE__*/React.createElement("nav", {
|
|
62
68
|
"aria-label": label,
|
|
63
69
|
className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
|
|
64
70
|
}, isMobile ? /*#__PURE__*/React.createElement(Popup, {
|
|
65
71
|
isOpen: isOpen,
|
|
66
|
-
onClose: () => setIsOpen(false)
|
|
72
|
+
onClose: () => setIsOpen(false)
|
|
73
|
+
// Top-layer popups need a role to register as a popup with the layer observer.
|
|
74
|
+
,
|
|
75
|
+
role: fg('platform-dst-chat-panel-layout') ? 'dialog' : undefined,
|
|
76
|
+
label: fg('platform-dst-chat-panel-layout') ? label : undefined,
|
|
67
77
|
placement: "bottom-start",
|
|
68
78
|
shouldRenderToParent: true,
|
|
69
79
|
content: () => /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
|
|
70
80
|
value: false
|
|
71
81
|
}, /*#__PURE__*/React.createElement(List, {
|
|
72
82
|
xcss: cx(listStyles.root, listStyles.popupContainer)
|
|
73
|
-
},
|
|
74
|
-
namespace: openLayerObserverTopNavEndNamespace
|
|
75
|
-
}, children))),
|
|
83
|
+
}, actions)),
|
|
76
84
|
trigger: triggerProps => /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
|
|
77
85
|
label: showMoreButtonLabel,
|
|
78
86
|
isSelected: isOpen,
|
|
@@ -82,9 +90,8 @@ export function TopNavEnd({
|
|
|
82
90
|
}))
|
|
83
91
|
}) : /*#__PURE__*/React.createElement(List, {
|
|
84
92
|
xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
}, children)), hasPersistentItems && /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
|
|
93
|
+
}, actions), hasPersistentItems && persistentItems);
|
|
94
|
+
return fg('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
|
|
88
95
|
namespace: openLayerObserverTopNavEndNamespace
|
|
89
|
-
},
|
|
96
|
+
}, content) : content;
|
|
90
97
|
}
|
|
@@ -10,7 +10,7 @@ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
|
|
|
10
10
|
import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
|
|
11
11
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
12
12
|
import { Popup } from '@atlaskit/popup/popup';
|
|
13
|
-
import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
|
|
13
|
+
import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/responsive/index';
|
|
14
14
|
import { List } from '../../../components/list';
|
|
15
15
|
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
|
|
16
16
|
import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
|
|
@@ -66,14 +66,24 @@ export function TopNavEnd(_ref) {
|
|
|
66
66
|
// Mobile will flip from `false` to `true`.
|
|
67
67
|
setIsMobile((_query$matches = query === null || query === void 0 ? void 0 : query.matches) !== null && _query$matches !== void 0 ? _query$matches : false);
|
|
68
68
|
}, [query]);
|
|
69
|
-
|
|
69
|
+
|
|
70
|
+
// The shared provider also covers the mobile overflow popup itself. Keep the
|
|
71
|
+
// previous content-only namespace coverage when the layout gate is disabled.
|
|
72
|
+
var actions = fg('platform-dst-chat-panel-layout') ? children : /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
|
|
73
|
+
namespace: openLayerObserverTopNavEndNamespace
|
|
74
|
+
}, children);
|
|
75
|
+
var content = /*#__PURE__*/React.createElement("nav", {
|
|
70
76
|
"aria-label": label,
|
|
71
77
|
className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
|
|
72
78
|
}, isMobile ? /*#__PURE__*/React.createElement(Popup, {
|
|
73
79
|
isOpen: isOpen,
|
|
74
80
|
onClose: function onClose() {
|
|
75
81
|
return setIsOpen(false);
|
|
76
|
-
}
|
|
82
|
+
}
|
|
83
|
+
// Top-layer popups need a role to register as a popup with the layer observer.
|
|
84
|
+
,
|
|
85
|
+
role: fg('platform-dst-chat-panel-layout') ? 'dialog' : undefined,
|
|
86
|
+
label: fg('platform-dst-chat-panel-layout') ? label : undefined,
|
|
77
87
|
placement: "bottom-start",
|
|
78
88
|
shouldRenderToParent: true,
|
|
79
89
|
content: function content() {
|
|
@@ -81,9 +91,7 @@ export function TopNavEnd(_ref) {
|
|
|
81
91
|
value: false
|
|
82
92
|
}, /*#__PURE__*/React.createElement(List, {
|
|
83
93
|
xcss: cx(listStyles.root, listStyles.popupContainer)
|
|
84
|
-
},
|
|
85
|
-
namespace: openLayerObserverTopNavEndNamespace
|
|
86
|
-
}, children)));
|
|
94
|
+
}, actions));
|
|
87
95
|
},
|
|
88
96
|
trigger: function trigger(triggerProps) {
|
|
89
97
|
return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
|
|
@@ -98,9 +106,8 @@ export function TopNavEnd(_ref) {
|
|
|
98
106
|
}
|
|
99
107
|
}) : /*#__PURE__*/React.createElement(List, {
|
|
100
108
|
xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
|
|
101
|
-
},
|
|
102
|
-
|
|
103
|
-
}, children)), hasPersistentItems && /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
|
|
109
|
+
}, actions), hasPersistentItems && persistentItems);
|
|
110
|
+
return fg('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
|
|
104
111
|
namespace: openLayerObserverTopNavEndNamespace
|
|
105
|
-
},
|
|
112
|
+
}, content) : content;
|
|
106
113
|
}
|
package/package.json
CHANGED