@atlaskit/side-nav-items 1.4.2 → 1.5.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 (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +16 -5
  3. package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +15 -8
  4. package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +16 -5
  5. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/side-nav-items
2
2
 
3
+ ## 1.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`57838cec99f29`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/57838cec99f29) -
8
+ The `FlyoutMenuItemContent` popup's max height now factors in the top nav and banner, when the
9
+ `platform-dst-side-nav-layering-fixes` feature flag is enabled. This ensures it does not get
10
+ clipped below the top nav and banner.
11
+
3
12
  ## 1.4.2
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js CHANGED
@@ -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: {
package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js CHANGED
@@ -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: {
package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js CHANGED
@@ -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: {
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.5.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",
@@ -58,7 +58,7 @@
58
58
  "@af/visual-regression": "workspace:^",
59
59
  "@atlaskit/app-provider": "^4.0.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
63
  "@atlassian/a11y-jest-testing": "^0.9.0",
64
64
  "@atlassian/feature-flags-test-utils": "^1.0.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
  }