@atlaskit/side-nav-items 1.4.2 → 1.6.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/side-nav-items
2
2
 
3
+ ## 1.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`c44903f5844c2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c44903f5844c2) -
8
+ Rounded cap height of side nav menu skeletons to the nearest pixel.
9
+
10
+ ## 1.5.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`57838cec99f29`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/57838cec99f29) -
15
+ The `FlyoutMenuItemContent` popup's max height now factors in the top nav and banner, when the
16
+ `platform-dst-side-nav-layering-fixes` feature flag is enabled. This ensures it does not get
17
+ clipped below the top nav and banner.
18
+
3
19
  ## 1.4.2
4
20
 
5
21
  ### Patch Changes
@@ -63,7 +63,7 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
63
63
  // handleClose function, or passed in as a parameter in FlyoutMenuItemTrigger (outside-click),
64
64
  // or FlyoutHeader (close-button).
65
65
  var handleClose = (0, _react.useCallback)(function (event, source) {
66
- if ((0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button")) {
66
+ if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button')) {
67
67
  // Use the passed source if provided, otherwise determine from event
68
68
  var determinedSource = source || 'other';
69
69
  if (!source) {
@@ -100,7 +100,18 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
100
100
  }, [handleClose, onCloseRef]);
101
101
  var titleId = (0, _react.useId)();
102
102
  var computedMaxHeight = (0, _react.useMemo)(function () {
103
- return "min(\n\t\t\tcalc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px),\n\t\t\t").concat(maxHeight, "px\n\t\t)");
103
+ return (
104
+ /**
105
+ * The max height of the flyout menu needs to factor in the top nav and banner, as it will be layered
106
+ * beneath them and would otherwise be clipped.
107
+ *
108
+ * We can remove these navigation variables once layering has been addressed holistically (e.g. using Top Layer).
109
+ *
110
+ * Not using the UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY variable from `@atlaskit/navigation-system`
111
+ * to avoid a circular dependency, as that package imports this one for re-exporting components.
112
+ */
113
+ (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? "min(calc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px - var(--n_tNvM, 0px) - var(--n_bnrM, 0px)), ").concat(maxHeight, "px)") : "min(calc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px), ").concat(maxHeight, "px)")
114
+ );
104
115
  }, [maxHeight]);
105
116
  return /*#__PURE__*/_react.default.createElement(_experimental.PopupContent, {
106
117
  appearance: "UNSAFE_modal-below-sm",
@@ -115,8 +126,8 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
115
126
  testId: containerTestId,
116
127
  xcss: flyoutMenuItemContentStyles.root,
117
128
  autoFocus: autoFocus,
118
- role: (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
119
- titleId: (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
129
+ role: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined,
130
+ titleId: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? titleId : undefined
120
131
  /**
121
132
  * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
122
133
  *
@@ -137,7 +148,7 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
137
148
  return /*#__PURE__*/_react.default.createElement(UpdatePopperOnContentResize, {
138
149
  ref: forwardedRef,
139
150
  update: update
140
- }, (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.TitleIdContextProvider, {
151
+ }, (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.TitleIdContextProvider, {
141
152
  value: titleId
142
153
  }, /*#__PURE__*/_react.default.createElement("div", {
143
154
  style: {
@@ -12,7 +12,7 @@
12
12
  ._4cvr1h6o{align-items:center}
13
13
  ._4t3i1tcg{height:24px}
14
14
  ._4t3i1ylp{height:40px}
15
- ._4t3ifvz7{height:1cap}
15
+ ._4t3ic3s8{height:round(1cap,1px)}
16
16
  ._4t3igktf{height:20px}
17
17
  ._4t3iu7e1{height:1lh}
18
18
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
@@ -20,9 +20,9 @@ var containerStyles = {
20
20
  elemBefore: "_bozgv77o _y4tiv77o _1q51v77o _85i5v77o _1e0c1txw _4cvr1h6o _1bah1h6o"
21
21
  };
22
22
  var skeletonStyles = {
23
- item: "_2rko1rr0 _bfhkizff _1bsb53f4 _4t3ifvz7",
23
+ item: "_2rko1rr0 _bfhkizff _1bsb53f4 _4t3ic3s8",
24
24
  elemBefore: "_2rko12b0 _bfhkizff _1bsbgktf _4t3igktf",
25
- description: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
25
+ description: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ic3s8"
26
26
  };
27
27
  /**
28
28
  * __Skeleton menu item__
@@ -5,7 +5,7 @@
5
5
  ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
6
6
  ._1tke1tcg{min-height:24px}
7
7
  ._4cvr1h6o{align-items:center}
8
- ._4t3ifvz7{height:1cap}
8
+ ._4t3ic3s8{height:round(1cap,1px)}
9
9
  ._4t3iu7e1{height:1lh}
10
10
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
11
11
  ._bfhkizff{background-color:var(--ds-skeleton,#0515240f)}
@@ -15,7 +15,7 @@ var containerStyles = {
15
15
  item: "_11c8i4vh _4t3iu7e1 _1e0c1txw _4cvr1h6o"
16
16
  };
17
17
  var skeletonStyles = {
18
- item: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
18
+ item: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ic3s8"
19
19
  };
20
20
  /**
21
21
  * __Skeleton menu section heading__
@@ -54,7 +54,7 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
54
54
  // handleClose function, or passed in as a parameter in FlyoutMenuItemTrigger (outside-click),
55
55
  // or FlyoutHeader (close-button).
56
56
  const handleClose = useCallback((event, source) => {
57
- if (fg("platform_dst_nav4_flyout_menu_slots_close_button")) {
57
+ if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
58
58
  // Use the passed source if provided, otherwise determine from event
59
59
  let determinedSource = source || 'other';
60
60
  if (!source) {
@@ -90,10 +90,17 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
90
90
  onCloseRef.current = handleClose;
91
91
  }, [handleClose, onCloseRef]);
92
92
  const titleId = useId();
93
- const computedMaxHeight = useMemo(() => `min(
94
- calc(100vh - ${FLYOUT_MENU_VERTICAL_OFFSET_PX}px),
95
- ${maxHeight}px
96
- )`, [maxHeight]);
93
+ const computedMaxHeight = useMemo(() =>
94
+ /**
95
+ * The max height of the flyout menu needs to factor in the top nav and banner, as it will be layered
96
+ * beneath them and would otherwise be clipped.
97
+ *
98
+ * We can remove these navigation variables once layering has been addressed holistically (e.g. using Top Layer).
99
+ *
100
+ * Not using the UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY variable from `@atlaskit/navigation-system`
101
+ * to avoid a circular dependency, as that package imports this one for re-exporting components.
102
+ */
103
+ fg('platform-dst-side-nav-layering-fixes') ? `min(calc(100vh - ${FLYOUT_MENU_VERTICAL_OFFSET_PX}px - var(--n_tNvM, 0px) - var(--n_bnrM, 0px)), ${maxHeight}px)` : `min(calc(100vh - ${FLYOUT_MENU_VERTICAL_OFFSET_PX}px), ${maxHeight}px)`, [maxHeight]);
97
104
  return /*#__PURE__*/React.createElement(PopupContent, {
98
105
  appearance: "UNSAFE_modal-below-sm",
99
106
  onClose: handleClose,
@@ -107,8 +114,8 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
107
114
  testId: containerTestId,
108
115
  xcss: flyoutMenuItemContentStyles.root,
109
116
  autoFocus: autoFocus,
110
- role: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
111
- titleId: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
117
+ role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined,
118
+ titleId: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? titleId : undefined
112
119
  /**
113
120
  * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
114
121
  *
@@ -129,7 +136,7 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
129
136
  }) => /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
130
137
  ref: forwardedRef,
131
138
  update: update
132
- }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
139
+ }, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
133
140
  value: titleId
134
141
  }, /*#__PURE__*/React.createElement("div", {
135
142
  style: {
@@ -12,7 +12,7 @@
12
12
  ._4cvr1h6o{align-items:center}
13
13
  ._4t3i1tcg{height:24px}
14
14
  ._4t3i1ylp{height:40px}
15
- ._4t3ifvz7{height:1cap}
15
+ ._4t3ic3s8{height:round(1cap,1px)}
16
16
  ._4t3igktf{height:20px}
17
17
  ._4t3iu7e1{height:1lh}
18
18
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
@@ -12,9 +12,9 @@ const containerStyles = {
12
12
  elemBefore: "_bozgv77o _y4tiv77o _1q51v77o _85i5v77o _1e0c1txw _4cvr1h6o _1bah1h6o"
13
13
  };
14
14
  const skeletonStyles = {
15
- item: "_2rko1rr0 _bfhkizff _1bsb53f4 _4t3ifvz7",
15
+ item: "_2rko1rr0 _bfhkizff _1bsb53f4 _4t3ic3s8",
16
16
  elemBefore: "_2rko12b0 _bfhkizff _1bsbgktf _4t3igktf",
17
- description: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
17
+ description: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ic3s8"
18
18
  };
19
19
  /**
20
20
  * __Skeleton menu item__
@@ -5,7 +5,7 @@
5
5
  ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
6
6
  ._1tke1tcg{min-height:24px}
7
7
  ._4cvr1h6o{align-items:center}
8
- ._4t3ifvz7{height:1cap}
8
+ ._4t3ic3s8{height:round(1cap,1px)}
9
9
  ._4t3iu7e1{height:1lh}
10
10
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
11
11
  ._bfhkizff{background-color:var(--ds-skeleton,#0515240f)}
@@ -7,7 +7,7 @@ const containerStyles = {
7
7
  item: "_11c8i4vh _4t3iu7e1 _1e0c1txw _4cvr1h6o"
8
8
  };
9
9
  const skeletonStyles = {
10
- item: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
10
+ item: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ic3s8"
11
11
  };
12
12
  /**
13
13
  * __Skeleton menu section heading__
@@ -54,7 +54,7 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
54
54
  // handleClose function, or passed in as a parameter in FlyoutMenuItemTrigger (outside-click),
55
55
  // or FlyoutHeader (close-button).
56
56
  var handleClose = useCallback(function (event, source) {
57
- if (fg("platform_dst_nav4_flyout_menu_slots_close_button")) {
57
+ if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
58
58
  // Use the passed source if provided, otherwise determine from event
59
59
  var determinedSource = source || 'other';
60
60
  if (!source) {
@@ -91,7 +91,18 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
91
91
  }, [handleClose, onCloseRef]);
92
92
  var titleId = useId();
93
93
  var computedMaxHeight = useMemo(function () {
94
- return "min(\n\t\t\tcalc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px),\n\t\t\t").concat(maxHeight, "px\n\t\t)");
94
+ return (
95
+ /**
96
+ * The max height of the flyout menu needs to factor in the top nav and banner, as it will be layered
97
+ * beneath them and would otherwise be clipped.
98
+ *
99
+ * We can remove these navigation variables once layering has been addressed holistically (e.g. using Top Layer).
100
+ *
101
+ * Not using the UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY variable from `@atlaskit/navigation-system`
102
+ * to avoid a circular dependency, as that package imports this one for re-exporting components.
103
+ */
104
+ fg('platform-dst-side-nav-layering-fixes') ? "min(calc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px - var(--n_tNvM, 0px) - var(--n_bnrM, 0px)), ").concat(maxHeight, "px)") : "min(calc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px), ").concat(maxHeight, "px)")
105
+ );
95
106
  }, [maxHeight]);
96
107
  return /*#__PURE__*/React.createElement(PopupContent, {
97
108
  appearance: "UNSAFE_modal-below-sm",
@@ -106,8 +117,8 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
106
117
  testId: containerTestId,
107
118
  xcss: flyoutMenuItemContentStyles.root,
108
119
  autoFocus: autoFocus,
109
- role: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
110
- titleId: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
120
+ role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined,
121
+ titleId: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? titleId : undefined
111
122
  /**
112
123
  * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
113
124
  *
@@ -128,7 +139,7 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
128
139
  return /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
129
140
  ref: forwardedRef,
130
141
  update: update
131
- }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
142
+ }, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
132
143
  value: titleId
133
144
  }, /*#__PURE__*/React.createElement("div", {
134
145
  style: {
@@ -12,7 +12,7 @@
12
12
  ._4cvr1h6o{align-items:center}
13
13
  ._4t3i1tcg{height:24px}
14
14
  ._4t3i1ylp{height:40px}
15
- ._4t3ifvz7{height:1cap}
15
+ ._4t3ic3s8{height:round(1cap,1px)}
16
16
  ._4t3igktf{height:20px}
17
17
  ._4t3iu7e1{height:1lh}
18
18
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
@@ -12,9 +12,9 @@ var containerStyles = {
12
12
  elemBefore: "_bozgv77o _y4tiv77o _1q51v77o _85i5v77o _1e0c1txw _4cvr1h6o _1bah1h6o"
13
13
  };
14
14
  var skeletonStyles = {
15
- item: "_2rko1rr0 _bfhkizff _1bsb53f4 _4t3ifvz7",
15
+ item: "_2rko1rr0 _bfhkizff _1bsb53f4 _4t3ic3s8",
16
16
  elemBefore: "_2rko12b0 _bfhkizff _1bsbgktf _4t3igktf",
17
- description: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
17
+ description: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ic3s8"
18
18
  };
19
19
  /**
20
20
  * __Skeleton menu item__
@@ -5,7 +5,7 @@
5
5
  ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
6
6
  ._1tke1tcg{min-height:24px}
7
7
  ._4cvr1h6o{align-items:center}
8
- ._4t3ifvz7{height:1cap}
8
+ ._4t3ic3s8{height:round(1cap,1px)}
9
9
  ._4t3iu7e1{height:1lh}
10
10
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
11
11
  ._bfhkizff{background-color:var(--ds-skeleton,#0515240f)}
@@ -7,7 +7,7 @@ var containerStyles = {
7
7
  item: "_11c8i4vh _4t3iu7e1 _1e0c1txw _4cvr1h6o"
8
8
  };
9
9
  var skeletonStyles = {
10
- item: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ifvz7"
10
+ item: "_2rko1rr0 _bfhkizff _1bsb1wqb _4t3ic3s8"
11
11
  };
12
12
  /**
13
13
  * __Skeleton menu section heading__
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/side-nav-items",
3
- "version": "1.4.2",
3
+ "version": "1.6.0",
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",
@@ -8,7 +8,7 @@
8
8
  "registry": "https://registry.npmjs.org/"
9
9
  },
10
10
  "atlassian": {
11
- "team": "Navigation Experiences",
11
+ "team": "Navigation Experiences - Global Side Nav",
12
12
  "docsPageStructure": "tabs"
13
13
  },
14
14
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-monorepo",
@@ -34,7 +34,7 @@
34
34
  "@atlaskit/button": "^23.9.0",
35
35
  "@atlaskit/css": "^0.19.0",
36
36
  "@atlaskit/ds-lib": "^5.3.0",
37
- "@atlaskit/heading": "^5.2.0",
37
+ "@atlaskit/heading": "^5.3.0",
38
38
  "@atlaskit/icon": "^30.0.0",
39
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
40
40
  "@atlaskit/popup": "^4.13.0",
@@ -56,11 +56,11 @@
56
56
  "@af/accessibility-testing": "workspace:^",
57
57
  "@af/integration-testing": "workspace:^",
58
58
  "@af/visual-regression": "workspace:^",
59
- "@atlaskit/app-provider": "^4.0.0",
59
+ "@atlaskit/app-provider": "^4.1.0",
60
60
  "@atlaskit/lozenge": "^13.4.0",
61
- "@atlaskit/navigation-system": "^5.32.0",
61
+ "@atlaskit/navigation-system": "^5.33.0",
62
62
  "@atlaskit/ssr": "workspace:^",
63
- "@atlassian/a11y-jest-testing": "^0.9.0",
63
+ "@atlassian/a11y-jest-testing": "^0.10.0",
64
64
  "@atlassian/feature-flags-test-utils": "^1.0.0",
65
65
  "@atlassian/testing-library": "^0.4.0",
66
66
  "@testing-library/react": "^16.3.0",
@@ -109,6 +109,9 @@
109
109
  "platform_dst_nav4_flyout_menu_slots_close_button": {
110
110
  "type": "boolean"
111
111
  },
112
+ "platform-dst-side-nav-layering-fixes": {
113
+ "type": "boolean"
114
+ },
112
115
  "platform_dst_nav4_flyoutmenuitem_render_to_parent": {
113
116
  "type": "boolean"
114
117
  }