@atlaskit/navigation-system 11.1.3 → 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.
Files changed (6) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js +23 -10
  3. package/dist/es2019/ui/page-layout/top-nav/top-nav-end.js +22 -9
  4. package/dist/esm/ui/page-layout/top-nav/top-nav-end.js +22 -9
  5. package/dist/types/ui/page-layout/top-nav/top-nav-end.d.ts +11 -1
  6. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
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
+
10
+ ## 11.2.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`b536adef43f98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b536adef43f98) -
15
+ Add a self-hiding Chat action with focus restoration and persistent TopNavEnd items behind
16
+ platform-dst-chat-panel-layout.
17
+
18
+ Persistent groups retain popup-layer protection and hide their complete accessible group when
19
+ inactive.
20
+
21
+ Persistent actions render last, after the other top-nav actions or their overflow button.
22
+
3
23
  ## 11.1.3
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js CHANGED
@@ -16,8 +16,9 @@ var _react2 = require("@compiled/react");
16
16
  var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
17
17
  var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
18
18
  var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer-observer-namespace-provider");
19
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
19
20
  var _popup = require("@atlaskit/popup/popup");
20
- var _compiled = require("@atlaskit/primitives/compiled");
21
+ var _index = require("@atlaskit/primitives/compiled/responsive/index");
21
22
  var _list = require("../../../components/list");
22
23
  var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
23
24
  var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
@@ -26,6 +27,7 @@ var _constants = require("../constants");
26
27
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
27
28
  var containerStyles = {
28
29
  root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
30
+ withPersistentItems: "_zulp1b66 _4cvr1h6o",
29
31
  fullHeightSidebar: "_y4tiutpp"
30
32
  };
31
33
  var listStyles = {
@@ -44,10 +46,12 @@ var listStyles = {
44
46
  */
45
47
  function TopNavEnd(_ref) {
46
48
  var children = _ref.children,
49
+ persistentItems = _ref.persistentItems,
47
50
  _ref$label = _ref.label,
48
51
  label = _ref$label === void 0 ? 'Actions' : _ref$label,
49
52
  _ref$showMoreButtonLa = _ref.showMoreButtonLabel,
50
53
  showMoreButtonLabel = _ref$showMoreButtonLa === void 0 ? 'Show more' : _ref$showMoreButtonLa;
54
+ var hasPersistentItems = (0, _fg.fg)('platform-dst-chat-panel-layout') && persistentItems != null;
51
55
  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
52
56
  var _useState = (0, _react.useState)(false),
53
57
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -59,7 +63,7 @@ function TopNavEnd(_ref) {
59
63
  isMobile = _useState4[0],
60
64
  setIsMobile = _useState4[1];
61
65
  // Note: `query` is a stable value between renders
62
- var query = (0, _compiled.UNSAFE_useMediaQuery)('below.sm', function onChange(event) {
66
+ var query = (0, _index.UNSAFE_useMediaQuery)('below.sm', function onChange(event) {
63
67
  setIsMobile(event.matches);
64
68
  // Any time we shift between mobile and desktop
65
69
  // We always close the popup
@@ -71,14 +75,24 @@ function TopNavEnd(_ref) {
71
75
  // Mobile will flip from `false` to `true`.
72
76
  setIsMobile((_query$matches = query === null || query === void 0 ? void 0 : query.matches) !== null && _query$matches !== void 0 ? _query$matches : false);
73
77
  }, [query]);
74
- return /*#__PURE__*/_react.default.createElement("nav", {
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", {
75
85
  "aria-label": label,
76
- className: (0, _runtime.ax)([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar])
86
+ className: (0, _runtime.ax)([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
77
87
  }, isMobile ? /*#__PURE__*/_react.default.createElement(_popup.Popup, {
78
88
  isOpen: isOpen,
79
89
  onClose: function onClose() {
80
90
  return setIsOpen(false);
81
- },
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,
82
96
  placement: "bottom-start",
83
97
  shouldRenderToParent: true,
84
98
  content: function content() {
@@ -86,9 +100,7 @@ function TopNavEnd(_ref) {
86
100
  value: false
87
101
  }, /*#__PURE__*/_react.default.createElement(_list.List, {
88
102
  xcss: (0, _react2.cx)(listStyles.root, listStyles.popupContainer)
89
- }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
90
- namespace: _constants.openLayerObserverTopNavEndNamespace
91
- }, children)));
103
+ }, actions));
92
104
  },
93
105
  trigger: function trigger(triggerProps) {
94
106
  return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, (0, _extends2.default)({}, triggerProps, {
@@ -103,7 +115,8 @@ function TopNavEnd(_ref) {
103
115
  }
104
116
  }) : /*#__PURE__*/_react.default.createElement(_list.List, {
105
117
  xcss: (0, _react2.cx)(listStyles.root, listStyles.hideOnSmallViewport)
106
- }, /*#__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, {
107
120
  namespace: _constants.openLayerObserverTopNavEndNamespace
108
- }, children)));
121
+ }, content) : content;
109
122
  }
package/dist/es2019/ui/page-layout/top-nav/top-nav-end.js CHANGED
@@ -7,8 +7,9 @@ import { cx } from '@compiled/react';
7
7
  import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
8
8
  import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
9
9
  import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
10
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
10
11
  import { Popup } from '@atlaskit/popup/popup';
11
- import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
12
+ import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/responsive/index';
12
13
  import { List } from '../../../components/list';
13
14
  import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
14
15
  import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
@@ -16,6 +17,7 @@ import { IconButton } from '../../top-nav-items/themed/icon-button';
16
17
  import { openLayerObserverTopNavEndNamespace } from '../constants';
17
18
  const containerStyles = {
18
19
  root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
20
+ withPersistentItems: "_zulp1b66 _4cvr1h6o",
19
21
  fullHeightSidebar: "_y4tiutpp"
20
22
  };
21
23
  const listStyles = {
@@ -34,9 +36,11 @@ const listStyles = {
34
36
  */
35
37
  export function TopNavEnd({
36
38
  children,
39
+ persistentItems,
37
40
  label = 'Actions',
38
41
  showMoreButtonLabel = 'Show more'
39
42
  }) {
43
+ const hasPersistentItems = fg('platform-dst-chat-panel-layout') && persistentItems != null;
40
44
  const isFhsEnabled = useIsFhsEnabled();
41
45
  const [isOpen, setIsOpen] = useState(false);
42
46
  // Always setting to `false` for the initial render (will flip in an effect for mobile)
@@ -54,21 +58,29 @@ export function TopNavEnd({
54
58
  // Mobile will flip from `false` to `true`.
55
59
  setIsMobile((_query$matches = query === null || query === void 0 ? void 0 : query.matches) !== null && _query$matches !== void 0 ? _query$matches : false);
56
60
  }, [query]);
57
- return /*#__PURE__*/React.createElement("nav", {
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", {
58
68
  "aria-label": label,
59
- className: ax([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar])
69
+ className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
60
70
  }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
61
71
  isOpen: isOpen,
62
- 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,
63
77
  placement: "bottom-start",
64
78
  shouldRenderToParent: true,
65
79
  content: () => /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
66
80
  value: false
67
81
  }, /*#__PURE__*/React.createElement(List, {
68
82
  xcss: cx(listStyles.root, listStyles.popupContainer)
69
- }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
70
- namespace: openLayerObserverTopNavEndNamespace
71
- }, children))),
83
+ }, actions)),
72
84
  trigger: triggerProps => /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
73
85
  label: showMoreButtonLabel,
74
86
  isSelected: isOpen,
@@ -78,7 +90,8 @@ export function TopNavEnd({
78
90
  }))
79
91
  }) : /*#__PURE__*/React.createElement(List, {
80
92
  xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
81
- }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
93
+ }, actions), hasPersistentItems && persistentItems);
94
+ return fg('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
82
95
  namespace: openLayerObserverTopNavEndNamespace
83
- }, children)));
96
+ }, content) : content;
84
97
  }
package/dist/esm/ui/page-layout/top-nav/top-nav-end.js CHANGED
@@ -8,8 +8,9 @@ import { cx } from '@compiled/react';
8
8
  import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
9
9
  import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
10
10
  import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
11
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
11
12
  import { Popup } from '@atlaskit/popup/popup';
12
- import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
13
+ import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/responsive/index';
13
14
  import { List } from '../../../components/list';
14
15
  import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
15
16
  import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
@@ -17,6 +18,7 @@ import { IconButton } from '../../top-nav-items/themed/icon-button';
17
18
  import { openLayerObserverTopNavEndNamespace } from '../constants';
18
19
  var containerStyles = {
19
20
  root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
21
+ withPersistentItems: "_zulp1b66 _4cvr1h6o",
20
22
  fullHeightSidebar: "_y4tiutpp"
21
23
  };
22
24
  var listStyles = {
@@ -35,10 +37,12 @@ var listStyles = {
35
37
  */
36
38
  export function TopNavEnd(_ref) {
37
39
  var children = _ref.children,
40
+ persistentItems = _ref.persistentItems,
38
41
  _ref$label = _ref.label,
39
42
  label = _ref$label === void 0 ? 'Actions' : _ref$label,
40
43
  _ref$showMoreButtonLa = _ref.showMoreButtonLabel,
41
44
  showMoreButtonLabel = _ref$showMoreButtonLa === void 0 ? 'Show more' : _ref$showMoreButtonLa;
45
+ var hasPersistentItems = fg('platform-dst-chat-panel-layout') && persistentItems != null;
42
46
  var isFhsEnabled = useIsFhsEnabled();
43
47
  var _useState = useState(false),
44
48
  _useState2 = _slicedToArray(_useState, 2),
@@ -62,14 +66,24 @@ export function TopNavEnd(_ref) {
62
66
  // Mobile will flip from `false` to `true`.
63
67
  setIsMobile((_query$matches = query === null || query === void 0 ? void 0 : query.matches) !== null && _query$matches !== void 0 ? _query$matches : false);
64
68
  }, [query]);
65
- return /*#__PURE__*/React.createElement("nav", {
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", {
66
76
  "aria-label": label,
67
- className: ax([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar])
77
+ className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
68
78
  }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
69
79
  isOpen: isOpen,
70
80
  onClose: function onClose() {
71
81
  return setIsOpen(false);
72
- },
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,
73
87
  placement: "bottom-start",
74
88
  shouldRenderToParent: true,
75
89
  content: function content() {
@@ -77,9 +91,7 @@ export function TopNavEnd(_ref) {
77
91
  value: false
78
92
  }, /*#__PURE__*/React.createElement(List, {
79
93
  xcss: cx(listStyles.root, listStyles.popupContainer)
80
- }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
81
- namespace: openLayerObserverTopNavEndNamespace
82
- }, children)));
94
+ }, actions));
83
95
  },
84
96
  trigger: function trigger(triggerProps) {
85
97
  return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
@@ -94,7 +106,8 @@ export function TopNavEnd(_ref) {
94
106
  }
95
107
  }) : /*#__PURE__*/React.createElement(List, {
96
108
  xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
97
- }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
109
+ }, actions), hasPersistentItems && persistentItems);
110
+ return fg('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
98
111
  namespace: openLayerObserverTopNavEndNamespace
99
- }, children)));
112
+ }, content) : content;
100
113
  }
package/dist/types/ui/page-layout/top-nav/top-nav-end.d.ts CHANGED
@@ -11,13 +11,23 @@ import React from 'react';
11
11
  * On small viewports, the children will be placed inside a popup, and a button will be rendered to open the popup.
12
12
  * This is to prevent the actions from overflowing the top navigation.
13
13
  */
14
- export declare function TopNavEnd({ children, label, showMoreButtonLabel, }: {
14
+ export declare function TopNavEnd({ children, persistentItems, label, showMoreButtonLabel, }: {
15
15
  /**
16
16
  * The content of the layout area.
17
17
  *
18
18
  * Should contain top nav end item components like `Notifications`, `Help`, `LogIn` etc.
19
19
  */
20
20
  children: React.ReactNode;
21
+ /**
22
+ * Actions at the inline end, after the other actions or their overflow button,
23
+ * that stay in the top nav at every viewport size outside the overflow popup.
24
+ * Items stay mounted when the viewport changes. Consumers must ensure
25
+ * that this content fits on small screens. Supply complete accessible groups
26
+ * (lists containing list items), and hide each group at its outermost element
27
+ * so hidden or absent actions do not leave empty lists or spacing behind.
28
+ * Enabled behind `platform-dst-chat-panel-layout`.
29
+ */
30
+ persistentItems?: React.ReactNode;
21
31
  /**
22
32
  * Provide an accessible label, often used by screen readers.
23
33
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "11.1.3",
3
+ "version": "11.2.1",
4
4
  "description": "The latest navigation system for Atlassian apps.",
5
5
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
6
6
  "license": "Apache-2.0",
@@ -66,7 +66,7 @@
66
66
  "@atlaskit/icon": "^38.0.0",
67
67
  "@atlaskit/layering": "^6.0.0",
68
68
  "@atlaskit/logo": "^23.3.0",
69
- "@atlaskit/motion": "^9.2.0",
69
+ "@atlaskit/motion": "^9.3.0",
70
70
  "@atlaskit/platform-feature-flags": "^2.2.0",
71
71
  "@atlaskit/platform-feature-flags-react": "^1.2.0",
72
72
  "@atlaskit/popup": "^9.0.0",
@@ -74,7 +74,7 @@
74
74
  "@atlaskit/primitives": "^22.5.0",
75
75
  "@atlaskit/react-compiler-gating": "^0.2.0",
76
76
  "@atlaskit/side-nav-items": "^2.5.0",
77
- "@atlaskit/tokens": "^20.1.0",
77
+ "@atlaskit/tokens": "^20.3.0",
78
78
  "@atlaskit/tooltip": "^24.4.0",
79
79
  "@atlaskit/visually-hidden": "^4.4.0",
80
80
  "@babel/runtime": "^7.0.0",
@@ -96,7 +96,7 @@
96
96
  "@atlaskit/breadcrumbs": "^17.8.0",
97
97
  "@atlaskit/dropdown-menu": "^21.0.0",
98
98
  "@atlaskit/flag": "^19.0.0",
99
- "@atlaskit/form": "^18.0.0",
99
+ "@atlaskit/form": "^18.1.0",
100
100
  "@atlaskit/heading": "^8.0.0",
101
101
  "@atlaskit/image": "^5.2.0",
102
102
  "@atlaskit/inline-dialog": "^20.3.0",
@@ -116,13 +116,13 @@
116
116
  "@atlaskit/tabs": "^21.3.0",
117
117
  "@atlaskit/tag": "^17.0.0",
118
118
  "@atlaskit/textfield": "^10.2.0",
119
- "@atlaskit/top-layer": "^6.1.0",
119
+ "@atlaskit/top-layer": "^6.2.0",
120
120
  "@atlassian/feature-flags-test-utils": "^1.3.0",
121
121
  "@atlassian/gemini": "^1.54.0",
122
122
  "@atlassian/panel-system": "^1.12.0",
123
123
  "@atlassian/react-async": "^0.23.0",
124
124
  "@atlassian/react-entrypoint": "^1.1.0",
125
- "@atlassian/search-dialog": "^10.18.0",
125
+ "@atlassian/search-dialog": "^10.19.0",
126
126
  "@atlassian/ssr-tests": "workspace:^",
127
127
  "@atlassian/test-utils": "^1.1.0",
128
128
  "@atlassian/testing-library": "^0.11.0",