@atlaskit/navigation-system 11.1.3 → 11.2.0

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 +13 -0
  2. package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js +8 -2
  3. package/dist/es2019/ui/page-layout/top-nav/top-nav-end.js +8 -2
  4. package/dist/esm/ui/page-layout/top-nav/top-nav-end.js +8 -2
  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,18 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 11.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`b536adef43f98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b536adef43f98) -
8
+ Add a self-hiding Chat action with focus restoration and persistent TopNavEnd items behind
9
+ platform-dst-chat-panel-layout.
10
+
11
+ Persistent groups retain popup-layer protection and hide their complete accessible group when
12
+ inactive.
13
+
14
+ Persistent actions render last, after the other top-nav actions or their overflow button.
15
+
3
16
  ## 11.1.3
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js CHANGED
@@ -16,6 +16,7 @@ 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
21
  var _compiled = require("@atlaskit/primitives/compiled");
21
22
  var _list = require("../../../components/list");
@@ -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),
@@ -73,7 +77,7 @@ function TopNavEnd(_ref) {
73
77
  }, [query]);
74
78
  return /*#__PURE__*/_react.default.createElement("nav", {
75
79
  "aria-label": label,
76
- className: (0, _runtime.ax)([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar])
80
+ className: (0, _runtime.ax)([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
77
81
  }, isMobile ? /*#__PURE__*/_react.default.createElement(_popup.Popup, {
78
82
  isOpen: isOpen,
79
83
  onClose: function onClose() {
@@ -105,5 +109,7 @@ function TopNavEnd(_ref) {
105
109
  xcss: (0, _react2.cx)(listStyles.root, listStyles.hideOnSmallViewport)
106
110
  }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
107
111
  namespace: _constants.openLayerObserverTopNavEndNamespace
108
- }, children)));
112
+ }, children)), hasPersistentItems && /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
113
+ namespace: _constants.openLayerObserverTopNavEndNamespace
114
+ }, persistentItems));
109
115
  }
package/dist/es2019/ui/page-layout/top-nav/top-nav-end.js CHANGED
@@ -7,6 +7,7 @@ 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
12
  import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
12
13
  import { List } from '../../../components/list';
@@ -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)
@@ -56,7 +60,7 @@ export function TopNavEnd({
56
60
  }, [query]);
57
61
  return /*#__PURE__*/React.createElement("nav", {
58
62
  "aria-label": label,
59
- className: ax([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar])
63
+ className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
60
64
  }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
61
65
  isOpen: isOpen,
62
66
  onClose: () => setIsOpen(false),
@@ -80,5 +84,7 @@ export function TopNavEnd({
80
84
  xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
81
85
  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
82
86
  namespace: openLayerObserverTopNavEndNamespace
83
- }, children)));
87
+ }, children)), hasPersistentItems && /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
88
+ namespace: openLayerObserverTopNavEndNamespace
89
+ }, persistentItems));
84
90
  }
package/dist/esm/ui/page-layout/top-nav/top-nav-end.js CHANGED
@@ -8,6 +8,7 @@ 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
13
  import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
13
14
  import { List } from '../../../components/list';
@@ -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),
@@ -64,7 +68,7 @@ export function TopNavEnd(_ref) {
64
68
  }, [query]);
65
69
  return /*#__PURE__*/React.createElement("nav", {
66
70
  "aria-label": label,
67
- className: ax([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar])
71
+ className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
68
72
  }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
69
73
  isOpen: isOpen,
70
74
  onClose: function onClose() {
@@ -96,5 +100,7 @@ export function TopNavEnd(_ref) {
96
100
  xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
97
101
  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
98
102
  namespace: openLayerObserverTopNavEndNamespace
99
- }, children)));
103
+ }, children)), hasPersistentItems && /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
104
+ namespace: openLayerObserverTopNavEndNamespace
105
+ }, persistentItems));
100
106
  }
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.0",
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",