@atlaskit/navigation-system 1.0.0 → 1.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 (11) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +2 -1
  3. package/dist/cjs/ui/menu-item/menu-item.compiled.css +15 -0
  4. package/dist/cjs/ui/menu-item/menu-item.js +15 -5
  5. package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +2 -1
  6. package/dist/es2019/ui/menu-item/menu-item.compiled.css +15 -0
  7. package/dist/es2019/ui/menu-item/menu-item.js +15 -5
  8. package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +2 -1
  9. package/dist/esm/ui/menu-item/menu-item.compiled.css +15 -0
  10. package/dist/esm/ui/menu-item/menu-item.js +15 -5
  11. package/package.json +8 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 1.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`c48c55f280ef8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c48c55f280ef8) -
8
+ FlyoutMenuItemContent will render its popup alongside the trigger, instead of using a portal. This
9
+ improves the experience for assistive technology users.
10
+
11
+ This change is behind a feature flag.
12
+
13
+ ## 1.1.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [`e40aa48c11a02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e40aa48c11a02) -
18
+ The menu item `actionsOnHover` slot has been updated, behind a feature flag, to improve
19
+ accessibility.
20
+
21
+ - Popup triggers placed inside the slot will now correctly be focused when closing their
22
+ respective popups.
23
+
24
+ - Interactive elements placed inside the slot will be in the tab order when tabbing backwards.
25
+
3
26
  ## 1.0.0
4
27
 
5
28
  ### Major Changes
package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js CHANGED
@@ -60,7 +60,8 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
60
60
  * and should have negligible performance impacts, because the flyout menus should rarely
61
61
  * need to be repositioned.
62
62
  */,
63
- shouldDisableGpuAcceleration: true
63
+ shouldDisableGpuAcceleration: true,
64
+ shouldRenderToParent: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyoutmenuitem_render_to_parent')
64
65
  }, function (_ref2) {
65
66
  var update = _ref2.update;
66
67
  return /*#__PURE__*/_react.default.createElement(UpdatePopperOnContentResize, {
package/dist/cjs/ui/menu-item/menu-item.compiled.css CHANGED
@@ -17,6 +17,7 @@
17
17
  ._18ukglyw:not(:has(button,a)){pointer-events:none}
18
18
  ._1bah1h6o{justify-content:center}
19
19
  ._1bsb1tcg{width:24px}
20
+ ._1bsbty16{width:var(--actions-on-hover-width)}
20
21
  ._1bsbyh40{width:2px}
21
22
  ._1cykglyw{--drag-handle-display:none}
22
23
  ._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
@@ -32,6 +33,7 @@
32
33
  ._1ojv1txw:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-display:flex}
33
34
  ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
34
35
  ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
36
+ ._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
35
37
  ._1reo15vq{overflow-x:hidden}
36
38
  ._1swv108i:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f1f2f4)}
37
39
  ._1swvi1yw:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cce0ff)}
@@ -59,11 +61,17 @@
59
61
  ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
60
62
  ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
61
63
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
64
+ ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
65
+ ._db80idpf{--actions-on-hover-padding:0}
62
66
  ._ek6g1txw{--actions-on-hover-display:flex}
63
67
  ._ek6gglyw{--actions-on-hover-display:none}
64
68
  ._kqswh2mm{position:relative}
65
69
  ._kqswstnw{position:absolute}
70
+ ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
66
71
  ._p12f1pna{max-width:420px}
72
+ ._pmxp1wug{--actions-on-hover-width:auto}
73
+ ._pmxpidpf{--actions-on-hover-width:0}
74
+ ._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}
67
75
  ._slp31hna{word-wrap:break-word}
68
76
  ._syaz15cr{color:var(--ds-text-inverse,#fff)}
69
77
  ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
@@ -71,18 +79,25 @@
71
79
  ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
72
80
  ._t9ec1i34{transform:translateY(-50%)}
73
81
  ._tzy41ou4{opacity:.4}
82
+ ._tzy4pnc3{opacity:var(--actions-on-hover-opacity)}
74
83
  ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
84
+ ._uomdidpf{--actions-on-hover-opacity:0}
85
+ ._uomdkb7n{--actions-on-hover-opacity:1}
75
86
  ._vchh1ntv{box-sizing:content-box}
76
87
  ._vchhusvi{box-sizing:border-box}
77
88
  ._y3gnv2br{text-align:start}
78
89
  ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
79
90
  ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
91
+ ._y4tidria{padding-inline-end:var(--actions-on-hover-padding)}
80
92
  ._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
81
93
  ._yv0enbh3{grid-template-columns:subgrid}
82
94
  ._12s918uv:focus-within{overflow-y:initial}
83
95
  ._1brr1txw:focus-within, ._109x1txw:hover{--actions-on-hover-display:flex}
84
96
  ._1guo18uv:focus-within{overflow-x:initial}
85
97
  ._1mfcglyw:focus-within, ._1sjuglyw:hover{--elem-after-display:none}
98
+ ._91nl1wug:focus-within, ._ynyi1wug:hover{--actions-on-hover-width:auto}
99
+ ._iy5o1b66:focus-within, ._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
100
+ ._t7p8kb7n:focus-within, ._g4kikb7n:hover{--actions-on-hover-opacity:1}
86
101
  ._11om6b4r:hover{animation-name:k1xyysw3}
87
102
  ._1uy01amc:hover{animation-delay:.8s}
88
103
  ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
package/dist/cjs/ui/menu-item/menu-item.js CHANGED
@@ -16,6 +16,7 @@ var _react = _interopRequireWildcard(require("react"));
16
16
  var _react2 = require("@compiled/react");
17
17
  var _avatar = require("@atlaskit/avatar");
18
18
  var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
19
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
20
  var _compiled = require("@atlaskit/primitives/compiled");
20
21
  var _tooltip = _interopRequireWildcard(require("@atlaskit/tooltip"));
21
22
  var _forwardRefWithGeneric = require("../../components/forward-ref-with-generic");
@@ -62,7 +63,11 @@ var defaultAvatarValues = {
62
63
  size: 'small'
63
64
  };
64
65
  var elemAfterDisplayVar = '--elem-after-display';
66
+ // Note: actionsOnHoverDisplayVar wll be cleaned up with fg('platform_dst_nav4_actionsonhover_focus_fix')
65
67
  var actionsOnHoverDisplayVar = '--actions-on-hover-display';
68
+ var actionsOnHoverOpacityVar = '--actions-on-hover-opacity';
69
+ var actionsOnHoverWidthVar = '--actions-on-hover-width';
70
+ var actionsOnHoverPaddingInlineEndVar = '--actions-on-hover-padding';
66
71
  var notchColorVar = '--notch-color';
67
72
 
68
73
  // Note: this is also used in `drag-handle.tsx`
@@ -146,9 +151,12 @@ var onTopOfButtonOrAnchorStyles = {
146
151
  */
147
152
  var nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
148
153
  var containerStyles = {
149
- root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
154
+ root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
155
+ actionsOnHoverFocusFixEnabled: "_uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
156
+ actionsOnHoverFocusFixDisabled: "_ek6gglyw _1ojv1txw _1brr1txw _109x1txw",
150
157
  removeElemAfter: "_91juglyw",
151
- showHoverActions: "_ek6g1txw",
158
+ showHoverActionsWithFocusFixEnabled: "_uomdkb7n _pmxp1wug _db801b66",
159
+ showHoverActionsWithFocusFixDisabled: "_ek6g1txw",
152
160
  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
153
161
  selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
154
162
  disabled: "_syaz1lh4 _irr3n7od",
@@ -170,7 +178,9 @@ var actionStyles = {
170
178
  root: "_zulp1b66 _nd5lbc26 _1reo15vq _18m915vq _1e0c1txw _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
171
179
  };
172
180
  var actionsOnHoverStyles = {
173
- root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _1e0c1c3z _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
181
+ root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1guo18uv _12s918uv",
182
+ focusFixEnabled: "_1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria",
183
+ focusFixDisabled: "_1e0c1c3z _y4ti1b66"
174
184
  };
175
185
  var textStyles = {
176
186
  root: "_zulpv77o _1reo15vq _18m915vq _y4ti1b66 _bozg1b66 _1e0c1txw _2lx21bp4 _1ul91c9m _1guo18uv _12s918uv",
@@ -323,7 +333,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
323
333
  ref: visualContentRef,
324
334
  "data-testid": testId ? "".concat(testId, "-container") : undefined,
325
335
  "data-selected": isSelected,
326
- className: (0, _runtime.ax)([containerStyles.root, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
336
+ className: (0, _runtime.ax)([containerStyles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_actionsonhover_focus_fix') ? containerStyles.actionsOnHoverFocusFixEnabled : containerStyles.actionsOnHoverFocusFixDisabled, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixDisabled, showHoverActionsWhenNotHovered && (0, _platformFeatureFlags.fg)('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixEnabled, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
327
337
  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
328
338
  content: function content() {
329
339
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, children), description ? /*#__PURE__*/_react.default.createElement("div", null, description) : null);
@@ -397,7 +407,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
397
407
  }), showElemBefore && /*#__PURE__*/_react.default.createElement("div", {
398
408
  className: (0, _runtime.ax)([elemBeforeStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
399
409
  }, elemBefore), actionsOnHover && /*#__PURE__*/_react.default.createElement("div", {
400
- className: (0, _runtime.ax)([actionsOnHoverStyles.root])
410
+ className: (0, _runtime.ax)([actionsOnHoverStyles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_actionsonhover_focus_fix') ? actionsOnHoverStyles.focusFixEnabled : actionsOnHoverStyles.focusFixDisabled])
401
411
  }, actionsOnHover), elemAfter && /*#__PURE__*/_react.default.createElement("div", {
402
412
  className: (0, _runtime.ax)([elemAfterStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
403
413
  }, elemAfter), actions && /*#__PURE__*/_react.default.createElement("div", {
package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js CHANGED
@@ -51,7 +51,8 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
51
51
  * and should have negligible performance impacts, because the flyout menus should rarely
52
52
  * need to be repositioned.
53
53
  */,
54
- shouldDisableGpuAcceleration: true
54
+ shouldDisableGpuAcceleration: true,
55
+ shouldRenderToParent: fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')
55
56
  }, ({
56
57
  update
57
58
  }) => /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
package/dist/es2019/ui/menu-item/menu-item.compiled.css CHANGED
@@ -17,6 +17,7 @@
17
17
  ._18ukglyw:not(:has(button,a)){pointer-events:none}
18
18
  ._1bah1h6o{justify-content:center}
19
19
  ._1bsb1tcg{width:24px}
20
+ ._1bsbty16{width:var(--actions-on-hover-width)}
20
21
  ._1bsbyh40{width:2px}
21
22
  ._1cykglyw{--drag-handle-display:none}
22
23
  ._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
@@ -32,6 +33,7 @@
32
33
  ._1ojv1txw:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-display:flex}
33
34
  ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
34
35
  ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
36
+ ._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
35
37
  ._1reo15vq{overflow-x:hidden}
36
38
  ._1swv108i:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f1f2f4)}
37
39
  ._1swvi1yw:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cce0ff)}
@@ -59,11 +61,17 @@
59
61
  ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
60
62
  ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
61
63
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
64
+ ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
65
+ ._db80idpf{--actions-on-hover-padding:0}
62
66
  ._ek6g1txw{--actions-on-hover-display:flex}
63
67
  ._ek6gglyw{--actions-on-hover-display:none}
64
68
  ._kqswh2mm{position:relative}
65
69
  ._kqswstnw{position:absolute}
70
+ ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
66
71
  ._p12f1pna{max-width:420px}
72
+ ._pmxp1wug{--actions-on-hover-width:auto}
73
+ ._pmxpidpf{--actions-on-hover-width:0}
74
+ ._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}
67
75
  ._slp31hna{word-wrap:break-word}
68
76
  ._syaz15cr{color:var(--ds-text-inverse,#fff)}
69
77
  ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
@@ -71,18 +79,25 @@
71
79
  ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
72
80
  ._t9ec1i34{transform:translateY(-50%)}
73
81
  ._tzy41ou4{opacity:.4}
82
+ ._tzy4pnc3{opacity:var(--actions-on-hover-opacity)}
74
83
  ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
84
+ ._uomdidpf{--actions-on-hover-opacity:0}
85
+ ._uomdkb7n{--actions-on-hover-opacity:1}
75
86
  ._vchh1ntv{box-sizing:content-box}
76
87
  ._vchhusvi{box-sizing:border-box}
77
88
  ._y3gnv2br{text-align:start}
78
89
  ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
79
90
  ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
91
+ ._y4tidria{padding-inline-end:var(--actions-on-hover-padding)}
80
92
  ._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
81
93
  ._yv0enbh3{grid-template-columns:subgrid}
82
94
  ._12s918uv:focus-within{overflow-y:initial}
83
95
  ._1brr1txw:focus-within, ._109x1txw:hover{--actions-on-hover-display:flex}
84
96
  ._1guo18uv:focus-within{overflow-x:initial}
85
97
  ._1mfcglyw:focus-within, ._1sjuglyw:hover{--elem-after-display:none}
98
+ ._91nl1wug:focus-within, ._ynyi1wug:hover{--actions-on-hover-width:auto}
99
+ ._iy5o1b66:focus-within, ._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
100
+ ._t7p8kb7n:focus-within, ._g4kikb7n:hover{--actions-on-hover-opacity:1}
86
101
  ._11om6b4r:hover{animation-name:k1xyysw3}
87
102
  ._1uy01amc:hover{animation-delay:.8s}
88
103
  ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
package/dist/es2019/ui/menu-item/menu-item.js CHANGED
@@ -6,6 +6,7 @@ import React, { forwardRef, lazy, Suspense, useCallback, useRef } from 'react';
6
6
  import { cx } from '@compiled/react';
7
7
  import { AvatarContext } from '@atlaskit/avatar';
8
8
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { Anchor, Pressable, Text } from '@atlaskit/primitives/compiled';
10
11
  import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
11
12
  import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
@@ -45,7 +46,11 @@ const defaultAvatarValues = {
45
46
  size: 'small'
46
47
  };
47
48
  const elemAfterDisplayVar = '--elem-after-display';
49
+ // Note: actionsOnHoverDisplayVar wll be cleaned up with fg('platform_dst_nav4_actionsonhover_focus_fix')
48
50
  const actionsOnHoverDisplayVar = '--actions-on-hover-display';
51
+ const actionsOnHoverOpacityVar = '--actions-on-hover-opacity';
52
+ const actionsOnHoverWidthVar = '--actions-on-hover-width';
53
+ const actionsOnHoverPaddingInlineEndVar = '--actions-on-hover-padding';
49
54
  const notchColorVar = '--notch-color';
50
55
 
51
56
  // Note: this is also used in `drag-handle.tsx`
@@ -129,9 +134,12 @@ const onTopOfButtonOrAnchorStyles = {
129
134
  */
130
135
  export const nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
131
136
  const containerStyles = {
132
- root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
137
+ root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
138
+ actionsOnHoverFocusFixEnabled: "_uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
139
+ actionsOnHoverFocusFixDisabled: "_ek6gglyw _1ojv1txw _1brr1txw _109x1txw",
133
140
  removeElemAfter: "_91juglyw",
134
- showHoverActions: "_ek6g1txw",
141
+ showHoverActionsWithFocusFixEnabled: "_uomdkb7n _pmxp1wug _db801b66",
142
+ showHoverActionsWithFocusFixDisabled: "_ek6g1txw",
135
143
  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
136
144
  selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
137
145
  disabled: "_syaz1lh4 _irr3n7od",
@@ -153,7 +161,9 @@ const actionStyles = {
153
161
  root: "_zulp1b66 _nd5lbc26 _1reo15vq _18m915vq _1e0c1txw _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
154
162
  };
155
163
  const actionsOnHoverStyles = {
156
- root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _1e0c1c3z _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
164
+ root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1guo18uv _12s918uv",
165
+ focusFixEnabled: "_1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria",
166
+ focusFixDisabled: "_1e0c1c3z _y4ti1b66"
157
167
  };
158
168
  const textStyles = {
159
169
  root: "_zulpv77o _1reo15vq _18m915vq _y4ti1b66 _bozg1b66 _1e0c1txw _2lx21bp4 _1ul91c9m _1guo18uv _12s918uv",
@@ -308,7 +318,7 @@ const MenuItemBaseNoRef = ({
308
318
  ref: visualContentRef,
309
319
  "data-testid": testId ? `${testId}-container` : undefined,
310
320
  "data-selected": isSelected,
311
- className: ax([containerStyles.root, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
321
+ className: ax([containerStyles.root, fg('platform_dst_nav4_actionsonhover_focus_fix') ? containerStyles.actionsOnHoverFocusFixEnabled : containerStyles.actionsOnHoverFocusFixDisabled, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && !fg('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixDisabled, showHoverActionsWhenNotHovered && fg('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixEnabled, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
312
322
  }, /*#__PURE__*/React.createElement(Tooltip, {
313
323
  content: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children), description ? /*#__PURE__*/React.createElement("div", null, description) : null),
314
324
  position: "right"
@@ -381,7 +391,7 @@ const MenuItemBaseNoRef = ({
381
391
  }), showElemBefore && /*#__PURE__*/React.createElement("div", {
382
392
  className: ax([elemBeforeStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
383
393
  }, elemBefore), actionsOnHover && /*#__PURE__*/React.createElement("div", {
384
- className: ax([actionsOnHoverStyles.root])
394
+ className: ax([actionsOnHoverStyles.root, fg('platform_dst_nav4_actionsonhover_focus_fix') ? actionsOnHoverStyles.focusFixEnabled : actionsOnHoverStyles.focusFixDisabled])
385
395
  }, actionsOnHover), elemAfter && /*#__PURE__*/React.createElement("div", {
386
396
  className: ax([elemAfterStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
387
397
  }, elemAfter), actions && /*#__PURE__*/React.createElement("div", {
package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js CHANGED
@@ -51,7 +51,8 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
51
51
  * and should have negligible performance impacts, because the flyout menus should rarely
52
52
  * need to be repositioned.
53
53
  */,
54
- shouldDisableGpuAcceleration: true
54
+ shouldDisableGpuAcceleration: true,
55
+ shouldRenderToParent: fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')
55
56
  }, function (_ref2) {
56
57
  var update = _ref2.update;
57
58
  return /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
package/dist/esm/ui/menu-item/menu-item.compiled.css CHANGED
@@ -17,6 +17,7 @@
17
17
  ._18ukglyw:not(:has(button,a)){pointer-events:none}
18
18
  ._1bah1h6o{justify-content:center}
19
19
  ._1bsb1tcg{width:24px}
20
+ ._1bsbty16{width:var(--actions-on-hover-width)}
20
21
  ._1bsbyh40{width:2px}
21
22
  ._1cykglyw{--drag-handle-display:none}
22
23
  ._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
@@ -32,6 +33,7 @@
32
33
  ._1ojv1txw:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-display:flex}
33
34
  ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
34
35
  ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
36
+ ._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
35
37
  ._1reo15vq{overflow-x:hidden}
36
38
  ._1swv108i:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f1f2f4)}
37
39
  ._1swvi1yw:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cce0ff)}
@@ -59,11 +61,17 @@
59
61
  ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
60
62
  ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
61
63
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
64
+ ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
65
+ ._db80idpf{--actions-on-hover-padding:0}
62
66
  ._ek6g1txw{--actions-on-hover-display:flex}
63
67
  ._ek6gglyw{--actions-on-hover-display:none}
64
68
  ._kqswh2mm{position:relative}
65
69
  ._kqswstnw{position:absolute}
70
+ ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
66
71
  ._p12f1pna{max-width:420px}
72
+ ._pmxp1wug{--actions-on-hover-width:auto}
73
+ ._pmxpidpf{--actions-on-hover-width:0}
74
+ ._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}
67
75
  ._slp31hna{word-wrap:break-word}
68
76
  ._syaz15cr{color:var(--ds-text-inverse,#fff)}
69
77
  ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
@@ -71,18 +79,25 @@
71
79
  ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
72
80
  ._t9ec1i34{transform:translateY(-50%)}
73
81
  ._tzy41ou4{opacity:.4}
82
+ ._tzy4pnc3{opacity:var(--actions-on-hover-opacity)}
74
83
  ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
84
+ ._uomdidpf{--actions-on-hover-opacity:0}
85
+ ._uomdkb7n{--actions-on-hover-opacity:1}
75
86
  ._vchh1ntv{box-sizing:content-box}
76
87
  ._vchhusvi{box-sizing:border-box}
77
88
  ._y3gnv2br{text-align:start}
78
89
  ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
79
90
  ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
91
+ ._y4tidria{padding-inline-end:var(--actions-on-hover-padding)}
80
92
  ._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
81
93
  ._yv0enbh3{grid-template-columns:subgrid}
82
94
  ._12s918uv:focus-within{overflow-y:initial}
83
95
  ._1brr1txw:focus-within, ._109x1txw:hover{--actions-on-hover-display:flex}
84
96
  ._1guo18uv:focus-within{overflow-x:initial}
85
97
  ._1mfcglyw:focus-within, ._1sjuglyw:hover{--elem-after-display:none}
98
+ ._91nl1wug:focus-within, ._ynyi1wug:hover{--actions-on-hover-width:auto}
99
+ ._iy5o1b66:focus-within, ._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
100
+ ._t7p8kb7n:focus-within, ._g4kikb7n:hover{--actions-on-hover-opacity:1}
86
101
  ._11om6b4r:hover{animation-name:k1xyysw3}
87
102
  ._1uy01amc:hover{animation-delay:.8s}
88
103
  ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
package/dist/esm/ui/menu-item/menu-item.js CHANGED
@@ -11,6 +11,7 @@ import React, { forwardRef, lazy, Suspense, useCallback, useRef } from 'react';
11
11
  import { cx } from '@compiled/react';
12
12
  import { AvatarContext } from '@atlaskit/avatar';
13
13
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
14
15
  import { Anchor, Pressable, Text } from '@atlaskit/primitives/compiled';
15
16
  import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
16
17
  import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
@@ -51,7 +52,11 @@ var defaultAvatarValues = {
51
52
  size: 'small'
52
53
  };
53
54
  var elemAfterDisplayVar = '--elem-after-display';
55
+ // Note: actionsOnHoverDisplayVar wll be cleaned up with fg('platform_dst_nav4_actionsonhover_focus_fix')
54
56
  var actionsOnHoverDisplayVar = '--actions-on-hover-display';
57
+ var actionsOnHoverOpacityVar = '--actions-on-hover-opacity';
58
+ var actionsOnHoverWidthVar = '--actions-on-hover-width';
59
+ var actionsOnHoverPaddingInlineEndVar = '--actions-on-hover-padding';
55
60
  var notchColorVar = '--notch-color';
56
61
 
57
62
  // Note: this is also used in `drag-handle.tsx`
@@ -135,9 +140,12 @@ var onTopOfButtonOrAnchorStyles = {
135
140
  */
136
141
  export var nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
137
142
  var containerStyles = {
138
- root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
143
+ root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
144
+ actionsOnHoverFocusFixEnabled: "_uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
145
+ actionsOnHoverFocusFixDisabled: "_ek6gglyw _1ojv1txw _1brr1txw _109x1txw",
139
146
  removeElemAfter: "_91juglyw",
140
- showHoverActions: "_ek6g1txw",
147
+ showHoverActionsWithFocusFixEnabled: "_uomdkb7n _pmxp1wug _db801b66",
148
+ showHoverActionsWithFocusFixDisabled: "_ek6g1txw",
141
149
  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
142
150
  selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
143
151
  disabled: "_syaz1lh4 _irr3n7od",
@@ -159,7 +167,9 @@ var actionStyles = {
159
167
  root: "_zulp1b66 _nd5lbc26 _1reo15vq _18m915vq _1e0c1txw _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
160
168
  };
161
169
  var actionsOnHoverStyles = {
162
- root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _1e0c1c3z _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
170
+ root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1guo18uv _12s918uv",
171
+ focusFixEnabled: "_1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria",
172
+ focusFixDisabled: "_1e0c1c3z _y4ti1b66"
163
173
  };
164
174
  var textStyles = {
165
175
  root: "_zulpv77o _1reo15vq _18m915vq _y4ti1b66 _bozg1b66 _1e0c1txw _2lx21bp4 _1ul91c9m _1guo18uv _12s918uv",
@@ -312,7 +322,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
312
322
  ref: visualContentRef,
313
323
  "data-testid": testId ? "".concat(testId, "-container") : undefined,
314
324
  "data-selected": isSelected,
315
- className: ax([containerStyles.root, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
325
+ className: ax([containerStyles.root, fg('platform_dst_nav4_actionsonhover_focus_fix') ? containerStyles.actionsOnHoverFocusFixEnabled : containerStyles.actionsOnHoverFocusFixDisabled, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && !fg('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixDisabled, showHoverActionsWhenNotHovered && fg('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixEnabled, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
316
326
  }, /*#__PURE__*/React.createElement(Tooltip, {
317
327
  content: function content() {
318
328
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children), description ? /*#__PURE__*/React.createElement("div", null, description) : null);
@@ -386,7 +396,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
386
396
  }), showElemBefore && /*#__PURE__*/React.createElement("div", {
387
397
  className: ax([elemBeforeStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
388
398
  }, elemBefore), actionsOnHover && /*#__PURE__*/React.createElement("div", {
389
- className: ax([actionsOnHoverStyles.root])
399
+ className: ax([actionsOnHoverStyles.root, fg('platform_dst_nav4_actionsonhover_focus_fix') ? actionsOnHoverStyles.focusFixEnabled : actionsOnHoverStyles.focusFixDisabled])
390
400
  }, actionsOnHover), elemAfter && /*#__PURE__*/React.createElement("div", {
391
401
  className: ax([elemAfterStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
392
402
  }, elemAfter), actions && /*#__PURE__*/React.createElement("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "1.0.0",
3
+ "version": "1.2.0",
4
4
  "description": "The latest navigation system for Atlassian apps.",
5
5
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
6
6
  "author": "Atlassian Pty Ltd",
@@ -112,7 +112,7 @@
112
112
  "@atlaskit/button": "^23.4.0",
113
113
  "@atlaskit/css": "^0.12.0",
114
114
  "@atlaskit/ds-lib": "^5.0.0",
115
- "@atlaskit/icon": "^28.0.0",
115
+ "@atlaskit/icon": "^28.1.0",
116
116
  "@atlaskit/layering": "^3.0.0",
117
117
  "@atlaskit/logo": "^19.7.0",
118
118
  "@atlaskit/platform-feature-flags": "^1.1.0",
@@ -219,6 +219,12 @@
219
219
  },
220
220
  "platform_dst_nav4_skip_links_hydration_fix": {
221
221
  "type": "boolean"
222
+ },
223
+ "platform_dst_nav4_actionsonhover_focus_fix": {
224
+ "type": "boolean"
225
+ },
226
+ "platform_dst_nav4_flyoutmenuitem_render_to_parent": {
227
+ "type": "boolean"
222
228
  }
223
229
  },
224
230
  "homepage": "https://atlassian.design/components/navigation-system"