@atlaskit/side-nav-items 1.12.4 → 1.13.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/side-nav-items
 
+## 1.13.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.13.0
+
+### Minor Changes
+
+- [`a8f4489e99107`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a8f4489e99107) -
+  Fixes the mobile max height of flyout menu popups to use the full available space, when the
+  `platform_dst_nav4_flyout_menu_slots_close_button` gate is enabled.
+
 ## 1.12.4
 
 ### Patch Changes

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.compiled.css

@@ -4,5 +4,6 @@
 ._4t3i1osq{height:100%}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._c71lq9dn{max-height:calc(100vh - var(--ds-space-100, 8px)*2 - 8px)}
 ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
-@media (min-width:48rem){._14b51kdj{width:25pc}}
+@media (min-width:48rem){._14b51kdj{width:25pc}._1jop304o{max-height:var(--max-height,760px)}}

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -10,6 +10,7 @@ exports.FlyoutMenuItemContent = void 0;
 require("./flyout-menu-item-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
@@ -36,11 +37,18 @@ var FLYOUT_MENU_VERTICAL_OFFSET_PX = 26;
  * height of 760px.
  */
 var FLYOUT_MENU_MAX_HEIGHT_PX = 760;
+var FLYOUT_MENU_PADDING = "var(--ds-space-100, 8px)";
+
+/**
+ * The margin around the flyout menu popup when it has its modal appearance on mobile screen sizes.
+ */
+var FLYOUT_MENU_MODAL_MARGIN = 4;
+var maxHeightCssVar = '--max-height';
 var flyoutMenuItemContentStyles = {
   root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
 };
 var flyoutMenuItemContentContainerStyles = {
-  container: "_1e0c1txw _4t3i1osq _2lx21bp4"
+  container: "_1e0c1txw _4t3i1osq _2lx21bp4 _c71lq9dn _1jop304o"
 };
 /**
  * __FlyoutMenuItemContent__
@@ -151,9 +159,7 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     }, (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.TitleIdContextProvider, {
       value: titleId
     }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        maxHeight: computedMaxHeight
-      },
+      style: (0, _defineProperty2.default)({}, maxHeightCssVar, computedMaxHeight),
       "data-testid": containerTestId ? "".concat(containerTestId, "--container") : undefined,
       className: (0, _runtime.ax)([flyoutMenuItemContentContainerStyles.container])
     }, children)) : children);
@@ -175,9 +181,9 @@ function createResizeObserver(update) {
  * 3. Popup exposes the `update` function so consumers can already do this themselves if necessary
  * 4. Flyout menus are a lot more restricted to other popups, it might not make sense more generally
  */
-var UpdatePopperOnContentResize = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, forwardedRef) {
-  var update = _ref3.update,
-    children = _ref3.children;
+var UpdatePopperOnContentResize = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, forwardedRef) {
+  var update = _ref4.update,
+    children = _ref4.children;
   /**
    * Storing our `update` function in a ref so that we have a stable reference to it.
    * We need this because our `ResizeObserver` callback cannot be changed after creating it.

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.compiled.css

@@ -4,5 +4,6 @@
 ._4t3i1osq{height:100%}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._c71lq9dn{max-height:calc(100vh - var(--ds-space-100, 8px)*2 - 8px)}
 ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
-@media (min-width:48rem){._14b51kdj{width:25pc}}
+@media (min-width:48rem){._14b51kdj{width:25pc}._1jop304o{max-height:var(--max-height,760px)}}

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -26,11 +26,18 @@ const FLYOUT_MENU_VERTICAL_OFFSET_PX = 26;
  * height of 760px.
  */
 const FLYOUT_MENU_MAX_HEIGHT_PX = 760;
+const FLYOUT_MENU_PADDING = "var(--ds-space-100, 8px)";
+
+/**
+ * The margin around the flyout menu popup when it has its modal appearance on mobile screen sizes.
+ */
+const FLYOUT_MENU_MODAL_MARGIN = 4;
+const maxHeightCssVar = '--max-height';
 const flyoutMenuItemContentStyles = {
   root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
 };
 const flyoutMenuItemContentContainerStyles = {
-  container: "_1e0c1txw _4t3i1osq _2lx21bp4"
+  container: "_1e0c1txw _4t3i1osq _2lx21bp4 _c71lq9dn _1jop304o"
 };
 /**
  * __FlyoutMenuItemContent__
@@ -140,7 +147,7 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     value: titleId
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      maxHeight: computedMaxHeight
+      [maxHeightCssVar]: computedMaxHeight
     },
     "data-testid": containerTestId ? `${containerTestId}--container` : undefined,
     className: ax([flyoutMenuItemContentContainerStyles.container])

package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.compiled.css

@@ -4,5 +4,6 @@
 ._4t3i1osq{height:100%}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._c71lq9dn{max-height:calc(100vh - var(--ds-space-100, 8px)*2 - 8px)}
 ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
-@media (min-width:48rem){._14b51kdj{width:25pc}}
+@media (min-width:48rem){._14b51kdj{width:25pc}._1jop304o{max-height:var(--max-height,760px)}}

package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -1,5 +1,6 @@
 /* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./flyout-menu-item-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
@@ -27,11 +28,18 @@ var FLYOUT_MENU_VERTICAL_OFFSET_PX = 26;
  * height of 760px.
  */
 var FLYOUT_MENU_MAX_HEIGHT_PX = 760;
+var FLYOUT_MENU_PADDING = "var(--ds-space-100, 8px)";
+
+/**
+ * The margin around the flyout menu popup when it has its modal appearance on mobile screen sizes.
+ */
+var FLYOUT_MENU_MODAL_MARGIN = 4;
+var maxHeightCssVar = '--max-height';
 var flyoutMenuItemContentStyles = {
   root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
 };
 var flyoutMenuItemContentContainerStyles = {
-  container: "_1e0c1txw _4t3i1osq _2lx21bp4"
+  container: "_1e0c1txw _4t3i1osq _2lx21bp4 _c71lq9dn _1jop304o"
 };
 /**
  * __FlyoutMenuItemContent__
@@ -142,9 +150,7 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     }, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
       value: titleId
     }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        maxHeight: computedMaxHeight
-      },
+      style: _defineProperty({}, maxHeightCssVar, computedMaxHeight),
       "data-testid": containerTestId ? "".concat(containerTestId, "--container") : undefined,
       className: ax([flyoutMenuItemContentContainerStyles.container])
     }, children)) : children);
@@ -166,9 +172,9 @@ function createResizeObserver(update) {
  * 3. Popup exposes the `update` function so consumers can already do this themselves if necessary
  * 4. Flyout menus are a lot more restricted to other popups, it might not make sense more generally
  */
-var UpdatePopperOnContentResize = /*#__PURE__*/forwardRef(function (_ref3, forwardedRef) {
-  var update = _ref3.update,
-    children = _ref3.children;
+var UpdatePopperOnContentResize = /*#__PURE__*/forwardRef(function (_ref4, forwardedRef) {
+  var update = _ref4.update,
+    children = _ref4.children;
   /**
    * Storing our `update` function in a ref so that we have a stable reference to it.
    * We need this because our `ResizeObserver` callback cannot be changed after creating it.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-nav-items",
-	"version": "1.12.4",
+	"version": "1.13.1",
 	"description": "Menu items and elements for the side nav area.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,8 +48,8 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/tokens": "^12.0.0",
+		"@atlaskit/primitives": "^19.0.0",
+		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -64,8 +64,8 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/app-provider": "^4.2.0",
-		"@atlaskit/lozenge": "^13.5.0",
-		"@atlaskit/navigation-system": "^7.1.0",
+		"@atlaskit/lozenge": "^13.6.0",
+		"@atlaskit/navigation-system": "^7.2.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",