@atlaskit/navigation-system 11.1.1 → 11.1.3
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 +18 -0
- package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js +1 -2
- package/dist/cjs/ui/page-layout/side-nav/toggle-button.js +10 -15
- package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -7
- package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js +1 -2
- package/dist/es2019/ui/page-layout/side-nav/toggle-button.js +10 -17
- package/dist/es2019/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -7
- package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js +1 -2
- package/dist/esm/ui/page-layout/side-nav/toggle-button.js +10 -15
- package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -7
- package/dist/types/ui/page-layout/panel-splitter/side-nav-panel-splitter.d.ts +1 -1
- package/dist/types/ui/page-layout/root.d.ts +1 -2
- package/package.json +6 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlassian/navigation-system
|
|
2
2
|
|
|
3
|
+
## 11.1.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`dc134f854c5c0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc134f854c5c0) -
|
|
8
|
+
Remove the platform-dst-keep-desired-fhs-features gate and enable the desired FHS behavior by
|
|
9
|
+
default.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 11.1.2
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [`457c77d8f6992`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/457c77d8f6992) -
|
|
17
|
+
Behind `platform-dst-top-layer-tooltip`: the side nav toggle tooltip stays open when pressed and
|
|
18
|
+
shows its new label.
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 11.1.1
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -117,8 +117,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
|
|
|
117
117
|
shortcut = _ref2.shortcut,
|
|
118
118
|
children = _ref2.children,
|
|
119
119
|
testId = _ref2.testId;
|
|
120
|
-
|
|
121
|
-
if (tooltipContent && (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features'))) {
|
|
120
|
+
if (tooltipContent) {
|
|
122
121
|
return /*#__PURE__*/React.createElement(_Tooltip.default, {
|
|
123
122
|
testId: testId,
|
|
124
123
|
content: tooltipContent,
|
|
@@ -17,8 +17,6 @@ var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents"
|
|
|
17
17
|
var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
|
|
18
18
|
var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
|
|
19
19
|
var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
|
|
20
|
-
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
21
|
-
var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
|
|
22
20
|
var _iconButton = require("../../top-nav-items/themed/icon-button");
|
|
23
21
|
var _sideNavToggleButtonAttachRef = require("./side-nav-toggle-button-attach-ref");
|
|
24
22
|
var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
|
|
@@ -32,7 +30,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
32
30
|
var toggleButtonTooltipOptions = {
|
|
33
31
|
// We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
|
|
34
32
|
// when moving the mouse from the top bar to the side nav.
|
|
35
|
-
ignoreTooltipPointerEvents: true
|
|
33
|
+
ignoreTooltipPointerEvents: true,
|
|
34
|
+
// A press swaps the label between `collapseLabel` and `expandLabel`, so keep the
|
|
35
|
+
// tooltip open to show the new label.
|
|
36
|
+
hasNewContentOnTriggerClick: true
|
|
36
37
|
};
|
|
37
38
|
|
|
38
39
|
// For duplicate "mouseenter" issue when changing icons (see below)
|
|
@@ -51,7 +52,6 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
|
|
|
51
52
|
testId = _ref.testId,
|
|
52
53
|
interactionName = _ref.interactionName,
|
|
53
54
|
onClick = _ref.onClick;
|
|
54
|
-
var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
|
|
55
55
|
var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
|
|
56
56
|
defaultCollapsed: defaultCollapsed
|
|
57
57
|
}),
|
|
@@ -108,10 +108,8 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
|
|
|
108
108
|
isSideNavVisible: isSideNavExpanded
|
|
109
109
|
});
|
|
110
110
|
toggleVisibility();
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
}, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
|
|
111
|
+
openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
|
|
112
|
+
}, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
|
|
115
113
|
var handlePointerEnter = (0, _react.useCallback)(function () {
|
|
116
114
|
// Hovers don't do anything on mobile, so not capturing
|
|
117
115
|
var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
|
|
@@ -152,13 +150,10 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
|
|
|
152
150
|
};
|
|
153
151
|
var isShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
|
|
154
152
|
var tooltipProps = (0, _react.useMemo)(function () {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
}
|
|
160
|
-
return toggleButtonTooltipOptions;
|
|
161
|
-
}, [isFhsEnabled, isShortcutEnabled]);
|
|
153
|
+
return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
|
|
154
|
+
shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
|
|
155
|
+
});
|
|
156
|
+
}, [isShortcutEnabled]);
|
|
162
157
|
return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
|
|
163
158
|
appearance: "subtle",
|
|
164
159
|
label: isSideNavExpanded ? collapseLabel : expandLabel,
|
|
@@ -9,8 +9,6 @@ var _react = require("react");
|
|
|
9
9
|
var _bindEventListener = require("bind-event-listener");
|
|
10
10
|
var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
|
|
11
11
|
var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
|
|
12
|
-
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
13
|
-
var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
|
|
14
12
|
var _useIsSideNavShortcutEnabled = require("./use-is-side-nav-shortcut-enabled");
|
|
15
13
|
var _useToggleSideNav = require("./use-toggle-side-nav");
|
|
16
14
|
/**
|
|
@@ -18,7 +16,6 @@ var _useToggleSideNav = require("./use-toggle-side-nav");
|
|
|
18
16
|
*/
|
|
19
17
|
function useSideNavToggleKeyboardShortcut(_ref) {
|
|
20
18
|
var canToggleWithShortcut = _ref.canToggleWithShortcut;
|
|
21
|
-
var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
|
|
22
19
|
var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
|
|
23
20
|
var toggleVisibilityByShortcut = (0, _useToggleSideNav.useToggleSideNav)({
|
|
24
21
|
trigger: 'keyboard'
|
|
@@ -26,9 +23,6 @@ function useSideNavToggleKeyboardShortcut(_ref) {
|
|
|
26
23
|
var canToggleWithShortcutStableRef = (0, _useStableRef.default)(canToggleWithShortcut);
|
|
27
24
|
var isSideNavShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
|
|
28
25
|
(0, _react.useEffect)(function () {
|
|
29
|
-
if (!isFhsEnabled && !(0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
26
|
if (!isSideNavShortcutEnabled) {
|
|
33
27
|
return;
|
|
34
28
|
}
|
|
@@ -56,5 +50,5 @@ function useSideNavToggleKeyboardShortcut(_ref) {
|
|
|
56
50
|
}
|
|
57
51
|
}
|
|
58
52
|
});
|
|
59
|
-
}, [canToggleWithShortcutStableRef,
|
|
53
|
+
}, [canToggleWithShortcutStableRef, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
|
|
60
54
|
}
|
|
@@ -105,8 +105,7 @@ const MaybeTooltip = ({
|
|
|
105
105
|
children,
|
|
106
106
|
testId
|
|
107
107
|
}) => {
|
|
108
|
-
|
|
109
|
-
if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
|
|
108
|
+
if (tooltipContent) {
|
|
110
109
|
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
111
110
|
testId: testId,
|
|
112
111
|
content: tooltipContent,
|
|
@@ -7,8 +7,6 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
|
|
|
7
7
|
import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
|
|
8
8
|
import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
|
|
9
9
|
import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
|
|
10
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
11
|
-
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
|
|
12
10
|
import { IconButton } from '../../top-nav-items/themed/icon-button';
|
|
13
11
|
import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
|
|
14
12
|
import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
|
|
@@ -19,7 +17,10 @@ import { useToggleSideNav } from './use-toggle-side-nav';
|
|
|
19
17
|
const toggleButtonTooltipOptions = {
|
|
20
18
|
// We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
|
|
21
19
|
// when moving the mouse from the top bar to the side nav.
|
|
22
|
-
ignoreTooltipPointerEvents: true
|
|
20
|
+
ignoreTooltipPointerEvents: true,
|
|
21
|
+
// A press swaps the label between `collapseLabel` and `expandLabel`, so keep the
|
|
22
|
+
// tooltip open to show the new label.
|
|
23
|
+
hasNewContentOnTriggerClick: true
|
|
23
24
|
};
|
|
24
25
|
|
|
25
26
|
// For duplicate "mouseenter" issue when changing icons (see below)
|
|
@@ -38,7 +39,6 @@ export const SideNavToggleButton = ({
|
|
|
38
39
|
interactionName,
|
|
39
40
|
onClick
|
|
40
41
|
}) => {
|
|
41
|
-
const isFhsEnabled = useIsFhsEnabled();
|
|
42
42
|
const {
|
|
43
43
|
isExpandedOnDesktop: isSideNavExpandedOnDesktop,
|
|
44
44
|
isExpandedOnMobile: isSideNavExpandedOnMobile
|
|
@@ -92,10 +92,8 @@ export const SideNavToggleButton = ({
|
|
|
92
92
|
isSideNavVisible: isSideNavExpanded
|
|
93
93
|
});
|
|
94
94
|
toggleVisibility();
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
}, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
|
|
95
|
+
openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
|
|
96
|
+
}, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
|
|
99
97
|
const handlePointerEnter = useCallback(() => {
|
|
100
98
|
// Hovers don't do anything on mobile, so not capturing
|
|
101
99
|
const isDesktop = window.matchMedia('(min-width: 64rem)').matches;
|
|
@@ -133,15 +131,10 @@ export const SideNavToggleButton = ({
|
|
|
133
131
|
className: ax(["_1e0c1bgi _lcxvglyw"])
|
|
134
132
|
}, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
|
|
135
133
|
const isShortcutEnabled = useIsSideNavShortcutEnabled();
|
|
136
|
-
const tooltipProps = useMemo(() => {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
|
|
141
|
-
};
|
|
142
|
-
}
|
|
143
|
-
return toggleButtonTooltipOptions;
|
|
144
|
-
}, [isFhsEnabled, isShortcutEnabled]);
|
|
134
|
+
const tooltipProps = useMemo(() => ({
|
|
135
|
+
...toggleButtonTooltipOptions,
|
|
136
|
+
shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
|
|
137
|
+
}), [isShortcutEnabled]);
|
|
145
138
|
return /*#__PURE__*/React.createElement(IconButton, {
|
|
146
139
|
appearance: "subtle",
|
|
147
140
|
label: isSideNavExpanded ? collapseLabel : expandLabel,
|
|
@@ -2,8 +2,6 @@ import { useEffect } from 'react';
|
|
|
2
2
|
import { bind } from 'bind-event-listener';
|
|
3
3
|
import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
|
|
4
4
|
import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
6
|
-
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
|
|
7
5
|
import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
|
|
8
6
|
import { useToggleSideNav } from './use-toggle-side-nav';
|
|
9
7
|
|
|
@@ -13,7 +11,6 @@ import { useToggleSideNav } from './use-toggle-side-nav';
|
|
|
13
11
|
export function useSideNavToggleKeyboardShortcut({
|
|
14
12
|
canToggleWithShortcut
|
|
15
13
|
}) {
|
|
16
|
-
const isFhsEnabled = useIsFhsEnabled();
|
|
17
14
|
const openLayerObserver = useOpenLayerObserver();
|
|
18
15
|
const toggleVisibilityByShortcut = useToggleSideNav({
|
|
19
16
|
trigger: 'keyboard'
|
|
@@ -21,9 +18,6 @@ export function useSideNavToggleKeyboardShortcut({
|
|
|
21
18
|
const canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
|
|
22
19
|
const isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
|
|
23
20
|
useEffect(() => {
|
|
24
|
-
if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
21
|
if (!isSideNavShortcutEnabled) {
|
|
28
22
|
return;
|
|
29
23
|
}
|
|
@@ -51,5 +45,5 @@ export function useSideNavToggleKeyboardShortcut({
|
|
|
51
45
|
}
|
|
52
46
|
}
|
|
53
47
|
});
|
|
54
|
-
}, [canToggleWithShortcutStableRef,
|
|
48
|
+
}, [canToggleWithShortcutStableRef, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
|
|
55
49
|
}
|
|
@@ -108,8 +108,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
|
|
|
108
108
|
shortcut = _ref2.shortcut,
|
|
109
109
|
children = _ref2.children,
|
|
110
110
|
testId = _ref2.testId;
|
|
111
|
-
|
|
112
|
-
if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
|
|
111
|
+
if (tooltipContent) {
|
|
113
112
|
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
114
113
|
testId: testId,
|
|
115
114
|
content: tooltipContent,
|
|
@@ -11,8 +11,6 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
|
|
|
11
11
|
import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
|
|
12
12
|
import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
|
|
13
13
|
import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
|
|
14
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
15
|
-
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
|
|
16
14
|
import { IconButton } from '../../top-nav-items/themed/icon-button';
|
|
17
15
|
import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
|
|
18
16
|
import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
|
|
@@ -23,7 +21,10 @@ import { useToggleSideNav } from './use-toggle-side-nav';
|
|
|
23
21
|
var toggleButtonTooltipOptions = {
|
|
24
22
|
// We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
|
|
25
23
|
// when moving the mouse from the top bar to the side nav.
|
|
26
|
-
ignoreTooltipPointerEvents: true
|
|
24
|
+
ignoreTooltipPointerEvents: true,
|
|
25
|
+
// A press swaps the label between `collapseLabel` and `expandLabel`, so keep the
|
|
26
|
+
// tooltip open to show the new label.
|
|
27
|
+
hasNewContentOnTriggerClick: true
|
|
27
28
|
};
|
|
28
29
|
|
|
29
30
|
// For duplicate "mouseenter" issue when changing icons (see below)
|
|
@@ -42,7 +43,6 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
|
|
|
42
43
|
testId = _ref.testId,
|
|
43
44
|
interactionName = _ref.interactionName,
|
|
44
45
|
onClick = _ref.onClick;
|
|
45
|
-
var isFhsEnabled = useIsFhsEnabled();
|
|
46
46
|
var _useSideNavVisibility = useSideNavVisibility({
|
|
47
47
|
defaultCollapsed: defaultCollapsed
|
|
48
48
|
}),
|
|
@@ -99,10 +99,8 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
|
|
|
99
99
|
isSideNavVisible: isSideNavExpanded
|
|
100
100
|
});
|
|
101
101
|
toggleVisibility();
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
}
|
|
105
|
-
}, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
|
|
102
|
+
openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
|
|
103
|
+
}, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
|
|
106
104
|
var handlePointerEnter = useCallback(function () {
|
|
107
105
|
// Hovers don't do anything on mobile, so not capturing
|
|
108
106
|
var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
|
|
@@ -143,13 +141,10 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
|
|
|
143
141
|
};
|
|
144
142
|
var isShortcutEnabled = useIsSideNavShortcutEnabled();
|
|
145
143
|
var tooltipProps = useMemo(function () {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}
|
|
151
|
-
return toggleButtonTooltipOptions;
|
|
152
|
-
}, [isFhsEnabled, isShortcutEnabled]);
|
|
144
|
+
return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
|
|
145
|
+
shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
|
|
146
|
+
});
|
|
147
|
+
}, [isShortcutEnabled]);
|
|
153
148
|
return /*#__PURE__*/React.createElement(IconButton, {
|
|
154
149
|
appearance: "subtle",
|
|
155
150
|
label: isSideNavExpanded ? collapseLabel : expandLabel,
|
|
@@ -2,8 +2,6 @@ import { useEffect } from 'react';
|
|
|
2
2
|
import { bind } from 'bind-event-listener';
|
|
3
3
|
import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
|
|
4
4
|
import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
6
|
-
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
|
|
7
5
|
import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
|
|
8
6
|
import { useToggleSideNav } from './use-toggle-side-nav';
|
|
9
7
|
|
|
@@ -12,7 +10,6 @@ import { useToggleSideNav } from './use-toggle-side-nav';
|
|
|
12
10
|
*/
|
|
13
11
|
export function useSideNavToggleKeyboardShortcut(_ref) {
|
|
14
12
|
var canToggleWithShortcut = _ref.canToggleWithShortcut;
|
|
15
|
-
var isFhsEnabled = useIsFhsEnabled();
|
|
16
13
|
var openLayerObserver = useOpenLayerObserver();
|
|
17
14
|
var toggleVisibilityByShortcut = useToggleSideNav({
|
|
18
15
|
trigger: 'keyboard'
|
|
@@ -20,9 +17,6 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
|
|
|
20
17
|
var canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
|
|
21
18
|
var isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
|
|
22
19
|
useEffect(function () {
|
|
23
|
-
if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
20
|
if (!isSideNavShortcutEnabled) {
|
|
27
21
|
return;
|
|
28
22
|
}
|
|
@@ -50,5 +44,5 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
|
|
|
50
44
|
}
|
|
51
45
|
}
|
|
52
46
|
});
|
|
53
|
-
}, [canToggleWithShortcutStableRef,
|
|
47
|
+
}, [canToggleWithShortcutStableRef, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
|
|
54
48
|
}
|
|
@@ -17,7 +17,7 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'too
|
|
|
17
17
|
*
|
|
18
18
|
* If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
|
|
19
19
|
*
|
|
20
|
-
*
|
|
20
|
+
* Used when the panel splitter tooltip is enabled.
|
|
21
21
|
*/
|
|
22
22
|
tooltipContent?: PanelSplitterProps['tooltipContent'];
|
|
23
23
|
};
|
|
@@ -65,8 +65,7 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
|
|
|
65
65
|
* is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your
|
|
66
66
|
* your own custom checks, e.g. if there is a legacy dialog open.
|
|
67
67
|
*
|
|
68
|
-
*
|
|
69
|
-
* feature gate, or `useIsFhsEnabled` for backwards compatibility.
|
|
68
|
+
* The built-in keyboard shortcut is available whenever this prop is enabled.
|
|
70
69
|
*/
|
|
71
70
|
isSideNavShortcutEnabled?: boolean;
|
|
72
71
|
}): JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/navigation-system",
|
|
3
|
-
"version": "11.1.
|
|
3
|
+
"version": "11.1.3",
|
|
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,16 +66,16 @@
|
|
|
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.
|
|
69
|
+
"@atlaskit/motion": "^9.2.0",
|
|
70
70
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
71
71
|
"@atlaskit/platform-feature-flags-react": "^1.2.0",
|
|
72
|
-
"@atlaskit/popup": "^
|
|
72
|
+
"@atlaskit/popup": "^9.0.0",
|
|
73
73
|
"@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
|
|
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
77
|
"@atlaskit/tokens": "^20.1.0",
|
|
78
|
-
"@atlaskit/tooltip": "^24.
|
|
78
|
+
"@atlaskit/tooltip": "^24.4.0",
|
|
79
79
|
"@atlaskit/visually-hidden": "^4.4.0",
|
|
80
80
|
"@babel/runtime": "^7.0.0",
|
|
81
81
|
"@compiled/react": "^1.0.2",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"@atlaskit/badge": "^22.0.0",
|
|
95
95
|
"@atlaskit/banner": "^15.3.0",
|
|
96
96
|
"@atlaskit/breadcrumbs": "^17.8.0",
|
|
97
|
-
"@atlaskit/dropdown-menu": "^
|
|
97
|
+
"@atlaskit/dropdown-menu": "^21.0.0",
|
|
98
98
|
"@atlaskit/flag": "^19.0.0",
|
|
99
99
|
"@atlaskit/form": "^18.0.0",
|
|
100
100
|
"@atlaskit/heading": "^8.0.0",
|
|
@@ -116,7 +116,7 @@
|
|
|
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.
|
|
119
|
+
"@atlaskit/top-layer": "^6.1.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",
|
|
@@ -152,9 +152,6 @@
|
|
|
152
152
|
"navx-full-height-sidebar": {
|
|
153
153
|
"type": "boolean"
|
|
154
154
|
},
|
|
155
|
-
"platform-dst-keep-desired-fhs-features": {
|
|
156
|
-
"type": "boolean"
|
|
157
|
-
},
|
|
158
155
|
"platform_dst_button_chevron_sizing": {
|
|
159
156
|
"type": "boolean"
|
|
160
157
|
},
|