@atlaskit/side-nav-items 1.7.0 → 1.7.2

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 (16) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css +2 -0
  3. package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js +10 -1
  4. package/dist/cjs/ui/menu-item/menu-item.compiled.css +6 -0
  5. package/dist/cjs/ui/menu-item/menu-item.js +20 -5
  6. package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css +2 -0
  7. package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js +11 -2
  8. package/dist/es2019/ui/menu-item/menu-item.compiled.css +6 -0
  9. package/dist/es2019/ui/menu-item/menu-item.js +19 -4
  10. package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css +2 -0
  11. package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js +11 -2
  12. package/dist/esm/ui/menu-item/menu-item.compiled.css +6 -0
  13. package/dist/esm/ui/menu-item/menu-item.js +19 -4
  14. package/dist/types/ui/menu-item/menu-item.d.ts +1 -0
  15. package/dist/types-ts4.5/ui/menu-item/menu-item.d.ts +1 -0
  16. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/side-nav-items
2
2
 
3
+ ## 1.7.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a9815b8d729e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a9815b8d729e0) -
8
+ Fixes the nested popup trigger styling when `platform_dst_nav4_flyout_menu_slots_close_button` is
9
+ enabled.
10
+
11
+ ## 1.7.1
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 1.7.0
4
18
 
5
19
  ### Minor Changes
package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css CHANGED
@@ -1,12 +1,14 @@
1
1
  ._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
2
2
  ._165n1bgi{--expandable-provided-elembefore-display:contents}
3
3
  ._165nglyw{--expandable-provided-elembefore-display:none}
4
+ ._1ddp1txw:has([aria-expanded=true][aria-haspopup]){--expandable-chevron-display:flex}
4
5
  ._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
5
6
  ._1e0ciw0t{display:var(--expandable-chevron-display)}
6
7
  ._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
7
8
  ._1mmi1txw{--expandable-chevron-display:flex}
8
9
  ._1mmiglyw{--expandable-chevron-display:none}
9
10
  ._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
11
+ ._pnu5glyw:has([aria-expanded=true][aria-haspopup]){--expandable-provided-elembefore-display:none}
10
12
  ._syazxl6c{color:var(--ds-icon-selected,#1868db)}
11
13
  ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
12
14
  [dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}
package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js CHANGED
@@ -15,6 +15,7 @@ var _new = require("@atlaskit/button/new");
15
15
  var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
16
16
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
17
17
  var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _menuItem = require("../menu-item");
19
20
  var _useScrollMenuItemIntoView = require("../use-scroll-menu-item-into-view");
20
21
  var _expandableMenuItemContext = require("./expandable-menu-item-context");
@@ -26,6 +27,14 @@ var wrapperStyles = {
26
27
  root: "_1mmi1txw _165nglyw",
27
28
  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
28
29
  };
30
+ var nestedOpenPopupStylesOld = {
31
+ showProvidedElemBefore: "_v9u71txw _1hl9glyw"
32
+ };
33
+
34
+ // Merge back into the `wrapperStyles` after cleanup
35
+ var nestedOpenPopupStylesNew = {
36
+ showProvidedElemBefore: "_1ddp1txw _pnu5glyw"
37
+ };
29
38
  var iconStyles = {
30
39
  chevron: "_1e0ciw0t _1tz3r0mg",
31
40
  providedElemBefore: "_1e0c1xb2",
@@ -127,7 +136,7 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = (0, _forward
127
136
  // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
128
137
  return /*#__PURE__*/_react.default.createElement("div", {
129
138
  ref: itemRef,
130
- className: (0, _runtime.ax)([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
139
+ className: (0, _runtime.ax)([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore, (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.showProvidedElemBefore : nestedOpenPopupStylesOld.showProvidedElemBefore])
131
140
  }, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItemBase, {
132
141
  id: id,
133
142
  actions: actions,
package/dist/cjs/ui/menu-item/menu-item.compiled.css CHANGED
@@ -13,6 +13,7 @@
13
13
  ._14iu13ro:active:not(:disabled){background-color:var(--ds-surface-pressed,#dddee1)}
14
14
  ._14iunozp:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#8fb8f6)}
15
15
  ._152t1ssb{inset-block-start:50%}
16
+ ._1783kb7n:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-opacity:1}
16
17
  ._18m915vq{overflow-y:hidden}
17
18
  ._18ukglyw:not(:has(button,a)){pointer-events:none}
18
19
  ._1bah1h6o{justify-content:center}
@@ -20,11 +21,14 @@
20
21
  ._1bsbty16{width:var(--actions-on-hover-width)}
21
22
  ._1bsbyh40{width:2px}
22
23
  ._1cykglyw{--drag-handle-display:none}
24
+ ._1d171wug:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-width:auto}
23
25
  ._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
24
26
  ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
25
27
  ._1e0c11p5{display:grid}
26
28
  ._1e0c13yo{display:var(--elem-after-display)}
27
29
  ._1e0c1txw{display:flex}
30
+ ._1fpr19i6:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-surface-hovered,#f0f1f2)}
31
+ ._1fprufnl:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
28
32
  ._1ifmglyw{-webkit-touch-callout:none}
29
33
  ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
30
34
  ._1o9zidpf{flex-shrink:0}
@@ -60,6 +64,8 @@
60
64
  ._kqswh2mm{position:relative}
61
65
  ._kqswstnw{position:absolute}
62
66
  ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
67
+ ._ligh1b66:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-padding:var(--ds-space-050,4px)}
68
+ ._n3ixglyw:has([aria-expanded=true][aria-haspopup]){--elem-after-display:none}
63
69
  ._pmxp1wug{--actions-on-hover-width:auto}
64
70
  ._pmxpidpf{--actions-on-hover-width:0}
65
71
  ._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}
package/dist/cjs/ui/menu-item/menu-item.js CHANGED
@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
6
6
  Object.defineProperty(exports, "__esModule", {
7
7
  value: true
8
8
  });
9
- exports.nestedOpenPopupCSSSelector = exports.MenuItemBase = void 0;
9
+ exports.nestedOpenPopupCSSSelectorNew = exports.nestedOpenPopupCSSSelector = exports.MenuItemBase = void 0;
10
10
  require("./menu-item.compiled.css");
11
11
  var _runtime = require("@compiled/react/runtime");
12
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -121,17 +121,32 @@ var onTopOfButtonOrAnchorStyles = {
121
121
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
122
122
  */
123
123
  var nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
124
+ // Behind fg('platform_dst_nav4_flyout_menu_slots_close_button') we are moving to a dialog role for the flyout
125
+ // So making this selector more generic
126
+ var nestedOpenPopupCSSSelectorNew = exports.nestedOpenPopupCSSSelectorNew = '&:has([aria-expanded="true"][aria-haspopup])';
124
127
  var containerStyles = {
125
- root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
128
+ root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
126
129
  rootT26Shape: "_2rko1qi0",
127
130
  removeElemAfter: "_91juglyw",
128
131
  showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
129
- removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
130
- selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _1swvufnl _30l36x5g _irr3ufnl",
132
+ removeElemAfterOnHoverOrOpenNestedPopup: "_1mfcglyw _1sjuglyw",
133
+ selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _30l36x5g _irr3ufnl",
131
134
  disabled: "_syaz1gmx _bfhkn7od _irr3n7od _30l31gmx",
132
135
  hasDescription: "_4t3i1wto",
133
136
  dragging: "_tzy41ou4"
134
137
  };
138
+ var nestedOpenPopupStylesOld = {
139
+ root: "_qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6",
140
+ removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw",
141
+ selected: "_1swvufnl"
142
+ };
143
+
144
+ // Merge back into the `containerStyles` after cleanup
145
+ var nestedOpenPopupStylesNew = {
146
+ root: "_1783kb7n _1d171wug _ligh1b66 _1fpr19i6",
147
+ removeElemAfterOnHoverOrOpenNestedPopup: "_n3ixglyw",
148
+ selected: "_1fprufnl"
149
+ };
135
150
  var buttonOrAnchorStyles = {
136
151
  root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syazazsu _4cvr1h6o _y3gnv2br _14iu13ro",
137
152
  rootT26Shape: "_2rko1qi0",
@@ -304,7 +319,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
304
319
  ref: visualContentRef,
305
320
  "data-testid": testId ? "".concat(testId, "-container") : undefined,
306
321
  "data-selected": isSelected,
307
- className: (0, _runtime.ax)([containerStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
322
+ className: (0, _runtime.ax)([containerStyles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.root : nestedOpenPopupStylesOld.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isSelected && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.selected, isSelected && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
308
323
  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
309
324
  content: function content() {
310
325
  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);
package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css CHANGED
@@ -1,12 +1,14 @@
1
1
  ._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
2
2
  ._165n1bgi{--expandable-provided-elembefore-display:contents}
3
3
  ._165nglyw{--expandable-provided-elembefore-display:none}
4
+ ._1ddp1txw:has([aria-expanded=true][aria-haspopup]){--expandable-chevron-display:flex}
4
5
  ._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
5
6
  ._1e0ciw0t{display:var(--expandable-chevron-display)}
6
7
  ._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
7
8
  ._1mmi1txw{--expandable-chevron-display:flex}
8
9
  ._1mmiglyw{--expandable-chevron-display:none}
9
10
  ._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
11
+ ._pnu5glyw:has([aria-expanded=true][aria-haspopup]){--expandable-provided-elembefore-display:none}
10
12
  ._syazxl6c{color:var(--ds-icon-selected,#1868db)}
11
13
  ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
12
14
  [dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}
package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js CHANGED
@@ -7,7 +7,8 @@ import { IconButton } from '@atlaskit/button/new';
7
7
  import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
8
8
  import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
9
9
  import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
10
- import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
11
+ import { MenuItemBase, nestedOpenPopupCSSSelector, nestedOpenPopupCSSSelectorNew } from '../menu-item';
11
12
  import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
12
13
  import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
13
14
  // Widening type to `string` to side-step Compiled cssMap typescript warnings with unknown properties
@@ -17,6 +18,14 @@ const wrapperStyles = {
17
18
  root: "_1mmi1txw _165nglyw",
18
19
  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
19
20
  };
21
+ const nestedOpenPopupStylesOld = {
22
+ showProvidedElemBefore: "_v9u71txw _1hl9glyw"
23
+ };
24
+
25
+ // Merge back into the `wrapperStyles` after cleanup
26
+ const nestedOpenPopupStylesNew = {
27
+ showProvidedElemBefore: "_1ddp1txw _pnu5glyw"
28
+ };
20
29
  const iconStyles = {
21
30
  chevron: "_1e0ciw0t _1tz3r0mg",
22
31
  providedElemBefore: "_1e0c1xb2",
@@ -118,7 +127,7 @@ export const ExpandableMenuItemTrigger = forwardRefWithGeneric(({
118
127
  // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
119
128
  return /*#__PURE__*/React.createElement("div", {
120
129
  ref: itemRef,
121
- className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
130
+ className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.showProvidedElemBefore : nestedOpenPopupStylesOld.showProvidedElemBefore])
122
131
  }, /*#__PURE__*/React.createElement(MenuItemBase, {
123
132
  id: id,
124
133
  actions: actions,
package/dist/es2019/ui/menu-item/menu-item.compiled.css CHANGED
@@ -13,6 +13,7 @@
13
13
  ._14iu13ro:active:not(:disabled){background-color:var(--ds-surface-pressed,#dddee1)}
14
14
  ._14iunozp:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#8fb8f6)}
15
15
  ._152t1ssb{inset-block-start:50%}
16
+ ._1783kb7n:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-opacity:1}
16
17
  ._18m915vq{overflow-y:hidden}
17
18
  ._18ukglyw:not(:has(button,a)){pointer-events:none}
18
19
  ._1bah1h6o{justify-content:center}
@@ -20,11 +21,14 @@
20
21
  ._1bsbty16{width:var(--actions-on-hover-width)}
21
22
  ._1bsbyh40{width:2px}
22
23
  ._1cykglyw{--drag-handle-display:none}
24
+ ._1d171wug:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-width:auto}
23
25
  ._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
24
26
  ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
25
27
  ._1e0c11p5{display:grid}
26
28
  ._1e0c13yo{display:var(--elem-after-display)}
27
29
  ._1e0c1txw{display:flex}
30
+ ._1fpr19i6:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-surface-hovered,#f0f1f2)}
31
+ ._1fprufnl:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
28
32
  ._1ifmglyw{-webkit-touch-callout:none}
29
33
  ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
30
34
  ._1o9zidpf{flex-shrink:0}
@@ -60,6 +64,8 @@
60
64
  ._kqswh2mm{position:relative}
61
65
  ._kqswstnw{position:absolute}
62
66
  ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
67
+ ._ligh1b66:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-padding:var(--ds-space-050,4px)}
68
+ ._n3ixglyw:has([aria-expanded=true][aria-haspopup]){--elem-after-display:none}
63
69
  ._pmxp1wug{--actions-on-hover-width:auto}
64
70
  ._pmxpidpf{--actions-on-hover-width:0}
65
71
  ._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}
package/dist/es2019/ui/menu-item/menu-item.js CHANGED
@@ -109,17 +109,32 @@ const onTopOfButtonOrAnchorStyles = {
109
109
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
110
110
  */
111
111
  export const nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
112
+ // Behind fg('platform_dst_nav4_flyout_menu_slots_close_button') we are moving to a dialog role for the flyout
113
+ // So making this selector more generic
114
+ export const nestedOpenPopupCSSSelectorNew = '&:has([aria-expanded="true"][aria-haspopup])';
112
115
  const containerStyles = {
113
- root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
116
+ root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
114
117
  rootT26Shape: "_2rko1qi0",
115
118
  removeElemAfter: "_91juglyw",
116
119
  showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
117
- removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
118
- selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _1swvufnl _30l36x5g _irr3ufnl",
120
+ removeElemAfterOnHoverOrOpenNestedPopup: "_1mfcglyw _1sjuglyw",
121
+ selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _30l36x5g _irr3ufnl",
119
122
  disabled: "_syaz1gmx _bfhkn7od _irr3n7od _30l31gmx",
120
123
  hasDescription: "_4t3i1wto",
121
124
  dragging: "_tzy41ou4"
122
125
  };
126
+ const nestedOpenPopupStylesOld = {
127
+ root: "_qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6",
128
+ removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw",
129
+ selected: "_1swvufnl"
130
+ };
131
+
132
+ // Merge back into the `containerStyles` after cleanup
133
+ const nestedOpenPopupStylesNew = {
134
+ root: "_1783kb7n _1d171wug _ligh1b66 _1fpr19i6",
135
+ removeElemAfterOnHoverOrOpenNestedPopup: "_n3ixglyw",
136
+ selected: "_1fprufnl"
137
+ };
123
138
  const buttonOrAnchorStyles = {
124
139
  root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syazazsu _4cvr1h6o _y3gnv2br _14iu13ro",
125
140
  rootT26Shape: "_2rko1qi0",
@@ -294,7 +309,7 @@ const MenuItemBaseNoRef = ({
294
309
  ref: visualContentRef,
295
310
  "data-testid": testId ? `${testId}-container` : undefined,
296
311
  "data-selected": isSelected,
297
- className: ax([containerStyles.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
312
+ className: ax([containerStyles.root, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.root : nestedOpenPopupStylesOld.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isSelected && fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.selected, isSelected && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
298
313
  }, /*#__PURE__*/React.createElement(Tooltip, {
299
314
  content: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children), description ? /*#__PURE__*/React.createElement("div", null, description) : null),
300
315
  position: "right-start",
package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css CHANGED
@@ -1,12 +1,14 @@
1
1
  ._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
2
2
  ._165n1bgi{--expandable-provided-elembefore-display:contents}
3
3
  ._165nglyw{--expandable-provided-elembefore-display:none}
4
+ ._1ddp1txw:has([aria-expanded=true][aria-haspopup]){--expandable-chevron-display:flex}
4
5
  ._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
5
6
  ._1e0ciw0t{display:var(--expandable-chevron-display)}
6
7
  ._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
7
8
  ._1mmi1txw{--expandable-chevron-display:flex}
8
9
  ._1mmiglyw{--expandable-chevron-display:none}
9
10
  ._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
11
+ ._pnu5glyw:has([aria-expanded=true][aria-haspopup]){--expandable-provided-elembefore-display:none}
10
12
  ._syazxl6c{color:var(--ds-icon-selected,#1868db)}
11
13
  ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
12
14
  [dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}
package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js CHANGED
@@ -7,7 +7,8 @@ import { IconButton } from '@atlaskit/button/new';
7
7
  import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
8
8
  import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
9
9
  import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
10
- import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
11
+ import { MenuItemBase, nestedOpenPopupCSSSelector, nestedOpenPopupCSSSelectorNew } from '../menu-item';
11
12
  import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
12
13
  import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
13
14
  // Widening type to `string` to side-step Compiled cssMap typescript warnings with unknown properties
@@ -17,6 +18,14 @@ var wrapperStyles = {
17
18
  root: "_1mmi1txw _165nglyw",
18
19
  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
19
20
  };
21
+ var nestedOpenPopupStylesOld = {
22
+ showProvidedElemBefore: "_v9u71txw _1hl9glyw"
23
+ };
24
+
25
+ // Merge back into the `wrapperStyles` after cleanup
26
+ var nestedOpenPopupStylesNew = {
27
+ showProvidedElemBefore: "_1ddp1txw _pnu5glyw"
28
+ };
20
29
  var iconStyles = {
21
30
  chevron: "_1e0ciw0t _1tz3r0mg",
22
31
  providedElemBefore: "_1e0c1xb2",
@@ -118,7 +127,7 @@ export var ExpandableMenuItemTrigger = forwardRefWithGeneric(function (_ref2, fo
118
127
  // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
119
128
  return /*#__PURE__*/React.createElement("div", {
120
129
  ref: itemRef,
121
- className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
130
+ className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.showProvidedElemBefore : nestedOpenPopupStylesOld.showProvidedElemBefore])
122
131
  }, /*#__PURE__*/React.createElement(MenuItemBase, {
123
132
  id: id,
124
133
  actions: actions,
package/dist/esm/ui/menu-item/menu-item.compiled.css CHANGED
@@ -13,6 +13,7 @@
13
13
  ._14iu13ro:active:not(:disabled){background-color:var(--ds-surface-pressed,#dddee1)}
14
14
  ._14iunozp:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#8fb8f6)}
15
15
  ._152t1ssb{inset-block-start:50%}
16
+ ._1783kb7n:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-opacity:1}
16
17
  ._18m915vq{overflow-y:hidden}
17
18
  ._18ukglyw:not(:has(button,a)){pointer-events:none}
18
19
  ._1bah1h6o{justify-content:center}
@@ -20,11 +21,14 @@
20
21
  ._1bsbty16{width:var(--actions-on-hover-width)}
21
22
  ._1bsbyh40{width:2px}
22
23
  ._1cykglyw{--drag-handle-display:none}
24
+ ._1d171wug:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-width:auto}
23
25
  ._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
24
26
  ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
25
27
  ._1e0c11p5{display:grid}
26
28
  ._1e0c13yo{display:var(--elem-after-display)}
27
29
  ._1e0c1txw{display:flex}
30
+ ._1fpr19i6:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-surface-hovered,#f0f1f2)}
31
+ ._1fprufnl:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
28
32
  ._1ifmglyw{-webkit-touch-callout:none}
29
33
  ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
30
34
  ._1o9zidpf{flex-shrink:0}
@@ -60,6 +64,8 @@
60
64
  ._kqswh2mm{position:relative}
61
65
  ._kqswstnw{position:absolute}
62
66
  ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
67
+ ._ligh1b66:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-padding:var(--ds-space-050,4px)}
68
+ ._n3ixglyw:has([aria-expanded=true][aria-haspopup]){--elem-after-display:none}
63
69
  ._pmxp1wug{--actions-on-hover-width:auto}
64
70
  ._pmxpidpf{--actions-on-hover-width:0}
65
71
  ._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}
package/dist/esm/ui/menu-item/menu-item.js CHANGED
@@ -112,17 +112,32 @@ var onTopOfButtonOrAnchorStyles = {
112
112
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
113
113
  */
114
114
  export var nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
115
+ // Behind fg('platform_dst_nav4_flyout_menu_slots_close_button') we are moving to a dialog role for the flyout
116
+ // So making this selector more generic
117
+ export var nestedOpenPopupCSSSelectorNew = '&:has([aria-expanded="true"][aria-haspopup])';
115
118
  var containerStyles = {
116
- root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
119
+ root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
117
120
  rootT26Shape: "_2rko1qi0",
118
121
  removeElemAfter: "_91juglyw",
119
122
  showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
120
- removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
121
- selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _1swvufnl _30l36x5g _irr3ufnl",
123
+ removeElemAfterOnHoverOrOpenNestedPopup: "_1mfcglyw _1sjuglyw",
124
+ selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _30l36x5g _irr3ufnl",
122
125
  disabled: "_syaz1gmx _bfhkn7od _irr3n7od _30l31gmx",
123
126
  hasDescription: "_4t3i1wto",
124
127
  dragging: "_tzy41ou4"
125
128
  };
129
+ var nestedOpenPopupStylesOld = {
130
+ root: "_qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6",
131
+ removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw",
132
+ selected: "_1swvufnl"
133
+ };
134
+
135
+ // Merge back into the `containerStyles` after cleanup
136
+ var nestedOpenPopupStylesNew = {
137
+ root: "_1783kb7n _1d171wug _ligh1b66 _1fpr19i6",
138
+ removeElemAfterOnHoverOrOpenNestedPopup: "_n3ixglyw",
139
+ selected: "_1fprufnl"
140
+ };
126
141
  var buttonOrAnchorStyles = {
127
142
  root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syazazsu _4cvr1h6o _y3gnv2br _14iu13ro",
128
143
  rootT26Shape: "_2rko1qi0",
@@ -295,7 +310,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
295
310
  ref: visualContentRef,
296
311
  "data-testid": testId ? "".concat(testId, "-container") : undefined,
297
312
  "data-selected": isSelected,
298
- className: ax([containerStyles.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
313
+ className: ax([containerStyles.root, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.root : nestedOpenPopupStylesOld.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isSelected && fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.selected, isSelected && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
299
314
  }, /*#__PURE__*/React.createElement(Tooltip, {
300
315
  content: function content() {
301
316
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children), description ? /*#__PURE__*/React.createElement("div", null, description) : null);
package/dist/types/ui/menu-item/menu-item.d.ts CHANGED
@@ -19,6 +19,7 @@ import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
19
19
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
20
20
  */
21
21
  export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"][aria-haspopup=\"true\"])";
22
+ export declare const nestedOpenPopupCSSSelectorNew = "&:has([aria-expanded=\"true\"][aria-haspopup])";
22
23
  /**
23
24
  * Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
24
25
  *
package/dist/types-ts4.5/ui/menu-item/menu-item.d.ts CHANGED
@@ -19,6 +19,7 @@ import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
19
19
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
20
20
  */
21
21
  export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"][aria-haspopup=\"true\"])";
22
+ export declare const nestedOpenPopupCSSSelectorNew = "&:has([aria-expanded=\"true\"][aria-haspopup])";
22
23
  /**
23
24
  * Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
24
25
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/side-nav-items",
3
- "version": "1.7.0",
3
+ "version": "1.7.2",
4
4
  "description": "Menu items and elements for the navigation side nav area.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/css": "^0.19.0",
36
36
  "@atlaskit/ds-lib": "^5.3.0",
37
37
  "@atlaskit/heading": "^5.3.0",
38
- "@atlaskit/icon": "^30.0.0",
38
+ "@atlaskit/icon": "^31.0.0",
39
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
40
40
  "@atlaskit/popup": "^4.13.0",
41
41
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -58,7 +58,7 @@
58
58
  "@af/visual-regression": "workspace:^",
59
59
  "@atlaskit/app-provider": "^4.1.0",
60
60
  "@atlaskit/lozenge": "^13.4.0",
61
- "@atlaskit/navigation-system": "^5.34.0",
61
+ "@atlaskit/navigation-system": "^5.35.0",
62
62
  "@atlaskit/ssr": "workspace:^",
63
63
  "@atlassian/a11y-jest-testing": "^0.10.0",
64
64
  "@atlassian/feature-flags-test-utils": "^1.0.0",