@atlaskit/navigation-system 5.13.1 → 5.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlassian/navigation-system
 
+## 5.14.0
+
+### Minor Changes
+
+- [`a910081d920cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a910081d920cc) -
+  Adds a header (with a close button), body, and footer as slot subcomponents of flyout menu item
+  content, and adjusts for body scrolling
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.13.1
 
 ### Patch Changes

package/dist/cjs/entry-points/side-nav-items/flyout-menu-item.js

@@ -9,6 +9,24 @@ Object.defineProperty(exports, "COLLAPSE_ELEM_BEFORE", {
     return _menuItemSignals.COLLAPSE_ELEM_BEFORE;
   }
 });
+Object.defineProperty(exports, "FlyoutBody", {
+  enumerable: true,
+  get: function get() {
+    return _flyoutBody.FlyoutBody;
+  }
+});
+Object.defineProperty(exports, "FlyoutFooter", {
+  enumerable: true,
+  get: function get() {
+    return _flyoutFooter.FlyoutFooter;
+  }
+});
+Object.defineProperty(exports, "FlyoutHeader", {
+  enumerable: true,
+  get: function get() {
+    return _flyoutHeader.FlyoutHeader;
+  }
+});
 Object.defineProperty(exports, "FlyoutMenuItem", {
   enumerable: true,
   get: function get() {
@@ -28,6 +46,9 @@ Object.defineProperty(exports, "FlyoutMenuItemTrigger", {
   }
 });
 var _flyoutMenuItem = require("../../ui/menu-item/flyout-menu-item/flyout-menu-item");
+var _flyoutBody = require("../../ui/menu-item/flyout-menu-item/flyout-body");
 var _flyoutMenuItemContent = require("../../ui/menu-item/flyout-menu-item/flyout-menu-item-content");
-var _flyoutMenuItemTrigger = require("../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger");
-var _menuItemSignals = require("../../ui/menu-item/menu-item-signals");
+var _flyoutFooter = require("../../ui/menu-item/flyout-menu-item/flyout-footer");
+var _flyoutHeader = require("../../ui/menu-item/flyout-menu-item/flyout-header");
+var _menuItemSignals = require("../../ui/menu-item/menu-item-signals");
+var _flyoutMenuItemTrigger = require("../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger");

package/dist/cjs/ui/menu-item/flyout-menu-item/close-button.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _new = require("@atlaskit/button/new");
+var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
+/**
+ * __Close button__
+ *
+ * The close button is to be used for flyout menu item headers to ensure that
+ * all users have an accessible and obvious way to close the flyout menu.
+ *
+ * Ensure that the close button renders first in the DOM to make sure that
+ * users will encounter all elements of the flyout menu, including everything
+ * within the flyout menu header. This can be done using a `Flex` primitive as
+ * the custom header's container with a flex direction of `row-reverse`.
+ */
+var CloseButton = exports.CloseButton = function CloseButton(_ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    testId: testId,
+    appearance: "subtle",
+    icon: _cross.default,
+    label: label || 'Close Flyout Menu',
+    onClick: onClick
+  });
+};

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

@@ -0,0 +1,5 @@
+._18m91wug{overflow-y:auto}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}

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

@@ -0,0 +1,30 @@
+/* flyout-body.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlyoutBody = void 0;
+require("./flyout-body.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var bodyStyles = {
+  root: "_1e0c1txw _2lx21bp4 _18m91wug _4t3i1osq _1bahv2br"
+};
+/**
+ * __Flyout menu item body__
+ *
+ * The main section of a flyout menu. This component is used to render the
+ * primary contents of the flyout menu. This component should be placed between
+ * FlyoutHeader and FlyoutFooter (if present), as is scrollable if the content
+ * exceeds the available space.
+ */
+var FlyoutBody = exports.FlyoutBody = function FlyoutBody(props) {
+  var children = props.children,
+    testId = props.testId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([bodyStyles.root])
+  }, children);
+};

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

@@ -0,0 +1,24 @@
+/* flyout-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlyoutFooter = void 0;
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+/**
+ * __Flyout menu item footer__
+ *
+ * The footer section of a flyout menu. This component can display
+ * supplementary actions or information at the bottom of the flyout menu. This
+ * component should be placed after FlyoutBody within the FlyoutMenuItemContent.
+ */
+var FlyoutFooter = exports.FlyoutFooter = function FlyoutFooter(props) {
+  var children = props.children,
+    testId = props.testId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId
+  }, children);
+};

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

@@ -0,0 +1,10 @@
+
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._2lx21sbv{flex-direction:row-reverse}
+._4cvr1h6o{align-items:center}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}

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

@@ -0,0 +1,53 @@
+/* flyout-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlyoutHeader = void 0;
+require("./flyout-header.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _closeButton = require("./close-button");
+var _flyoutMenuItemContext = require("./flyout-menu-item-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var headerStyles = {
+  root: "_zulp12x7 _bozg12x7 _85i512x7 _1e0c1txw _2lx21bp4",
+  flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq"
+};
+/**
+ * __FlyoutHeader__
+ *
+ * The header section of a flyout menu. This component displays the title, and
+ * close button, as well as any other provided actions relevant to the menu.
+ * This component should be placed first within the FlyoutMenuItemContent.
+ */
+var FlyoutHeader = exports.FlyoutHeader = function FlyoutHeader(props) {
+  var children = props.children,
+    testId = props.testId,
+    title = props.title,
+    closeButtonLabel = props.closeButtonLabel;
+  var setIsOpen = (0, _react.useContext)(_flyoutMenuItemContext.SetIsOpenContext);
+  var onClose = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
+  var handleClose = (0, _react.useCallback)(function () {
+    onClose === null || onClose === void 0 || onClose();
+    setIsOpen(false);
+  }, [setIsOpen, onClose]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([headerStyles.root])
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    xcss: headerStyles.flex
+  }, /*#__PURE__*/_react.default.createElement(_closeButton.CloseButton, {
+    label: closeButtonLabel,
+    onClick: handleClose,
+    testId: testId && "".concat(testId, "--close-button")
+  }), /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xsmall",
+    as: "span"
+  }, title)), children);
+};

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

@@ -1,5 +1,9 @@
+._1e0c1txw{display:flex}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._c71l2gk1{max-height:calc(100vh - 26px)}
 ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
 @media (min-width:48rem){._14b51kdj{width:25pc}}

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

@@ -16,9 +16,25 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experimental = require("@atlaskit/popup/experimental");
 var _flyoutMenuItemContext = require("./flyout-menu-item-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * The vertical offset in px to ensure the flyout container does not exceed the bounds of
+ * the window. This matches the padding of the content container, and it's position within
+ * the viewport.
+ * 
+ * - FlyoutMenuItemContent: paddingBlock: token('space.100'); – 8px top, 8px bottom
+ * - Position: 5px top, 5px bottom
+ * 
+ * Total vertical padding:
+ * 		(8px [content top] + 8px [content bottom]) +
+ * 		(5px [position top] + 5px [position bottom]) = 26px
+ */
+var FLYOUT_MENU_VERTICAL_OFFSET_PX = 26;
 var flyoutMenuItemContentStyles = {
   root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
 };
+var flyoutMenuItemContentContainerStyles = {
+  container: "_1e0c1txw _4t3i1osq _c71l2gk1 _2lx21bp4"
+};
 /**
  * __FlyoutMenuItemContent__
  *
@@ -67,7 +83,13 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     return /*#__PURE__*/_react.default.createElement(UpdatePopperOnContentResize, {
       ref: forwardedRef,
       update: update
-    }, children);
+    }, (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.OnCloseProvider, {
+      value: function value() {
+        return onClose;
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _runtime.ax)([flyoutMenuItemContentContainerStyles.container])
+    }, children)) : children);
   });
 });
 function createResizeObserver(update) {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.SetIsOpenContext = exports.IsOpenContext = void 0;
+exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.SetIsOpenContext = exports.OnCloseProvider = exports.OnCloseContext = exports.IsOpenContext = void 0;
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 /**
@@ -25,4 +25,18 @@ var useFlyoutMenuOpen = exports.useFlyoutMenuOpen = function useFlyoutMenuOpen()
 };
 var useSetFlyoutMenuOpen = exports.useSetFlyoutMenuOpen = function useSetFlyoutMenuOpen() {
   return (0, _react.useContext)(SetIsOpenContext);
-};
+};
+
+/**
+ * __On close context__
+ * 
+ * A context for storing the onClose value of the FlyoutMenuItem.
+ */
+var OnCloseContext = exports.OnCloseContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * __On close provider__
+ * 
+ * A context provider for supplying the testId to the FlyoutHeader.
+ */
+var OnCloseProvider = exports.OnCloseProvider = OnCloseContext.Provider;

package/dist/es2019/entry-points/side-nav-items/flyout-menu-item.js

@@ -1,4 +1,7 @@
 export { FlyoutMenuItem } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item';
+export { FlyoutBody } from '../../ui/menu-item/flyout-menu-item/flyout-body';
 export { FlyoutMenuItemContent } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-content';
-export { FlyoutMenuItemTrigger } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';
-export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';
+export { FlyoutFooter } from '../../ui/menu-item/flyout-menu-item/flyout-footer';
+export { FlyoutHeader } from '../../ui/menu-item/flyout-menu-item/flyout-header';
+export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';
+export { FlyoutMenuItemTrigger } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';

package/dist/es2019/ui/menu-item/flyout-menu-item/close-button.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IconButton } from "@atlaskit/button/new";
+import CrossIcon from "@atlaskit/icon/core/cross";
+/**
+ * __Close button__
+ *
+ * The close button is to be used for flyout menu item headers to ensure that
+ * all users have an accessible and obvious way to close the flyout menu.
+ *
+ * Ensure that the close button renders first in the DOM to make sure that
+ * users will encounter all elements of the flyout menu, including everything
+ * within the flyout menu header. This can be done using a `Flex` primitive as
+ * the custom header's container with a flex direction of `row-reverse`.
+ */
+export const CloseButton = ({
+  label,
+  onClick,
+  testId
+}) => /*#__PURE__*/React.createElement(IconButton, {
+  testId: testId,
+  appearance: "subtle",
+  icon: CrossIcon,
+  label: label || 'Close Flyout Menu',
+  onClick: onClick
+});

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

@@ -0,0 +1,5 @@
+._18m91wug{overflow-y:auto}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}

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

@@ -0,0 +1,25 @@
+/* flyout-body.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./flyout-body.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const bodyStyles = {
+  root: "_1e0c1txw _2lx21bp4 _18m91wug _4t3i1osq _1bahv2br"
+};
+/**
+ * __Flyout menu item body__
+ *
+ * The main section of a flyout menu. This component is used to render the
+ * primary contents of the flyout menu. This component should be placed between
+ * FlyoutHeader and FlyoutFooter (if present), as is scrollable if the content
+ * exceeds the available space.
+ */
+export const FlyoutBody = props => {
+  const {
+    children,
+    testId
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([bodyStyles.root])
+  }, children);
+};

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

@@ -0,0 +1,19 @@
+/* flyout-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+/**
+ * __Flyout menu item footer__
+ *
+ * The footer section of a flyout menu. This component can display
+ * supplementary actions or information at the bottom of the flyout menu. This
+ * component should be placed after FlyoutBody within the FlyoutMenuItemContent.
+ */
+export const FlyoutFooter = props => {
+  const {
+    children,
+    testId
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId
+  }, children);
+};

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

@@ -0,0 +1,10 @@
+
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._2lx21sbv{flex-direction:row-reverse}
+._4cvr1h6o{align-items:center}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}

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

@@ -0,0 +1,46 @@
+/* flyout-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./flyout-header.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useContext } from 'react';
+import Heading from '@atlaskit/heading';
+import { Flex } from '@atlaskit/primitives/compiled';
+import { CloseButton } from './close-button';
+import { OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
+const headerStyles = {
+  root: "_zulp12x7 _bozg12x7 _85i512x7 _1e0c1txw _2lx21bp4",
+  flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq"
+};
+/**
+ * __FlyoutHeader__
+ *
+ * The header section of a flyout menu. This component displays the title, and
+ * close button, as well as any other provided actions relevant to the menu.
+ * This component should be placed first within the FlyoutMenuItemContent.
+ */
+export const FlyoutHeader = props => {
+  const {
+    children,
+    testId,
+    title,
+    closeButtonLabel
+  } = props;
+  const setIsOpen = useContext(SetIsOpenContext);
+  const onClose = useContext(OnCloseContext);
+  const handleClose = useCallback(() => {
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    setIsOpen(false);
+  }, [setIsOpen, onClose]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([headerStyles.root])
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: headerStyles.flex
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    label: closeButtonLabel,
+    onClick: handleClose,
+    testId: testId && `${testId}--close-button`
+  }), /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall",
+    as: "span"
+  }, title)), children);
+};

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

@@ -1,5 +1,9 @@
+._1e0c1txw{display:flex}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._c71l2gk1{max-height:calc(100vh - 26px)}
 ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
 @media (min-width:48rem){._14b51kdj{width:25pc}}

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

@@ -5,10 +5,27 @@ import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useRef,
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupContent } from '@atlaskit/popup/experimental';
-import { SetIsOpenContext } from './flyout-menu-item-context';
+import { OnCloseProvider, SetIsOpenContext } from './flyout-menu-item-context';
+
+/**
+ * The vertical offset in px to ensure the flyout container does not exceed the bounds of
+ * the window. This matches the padding of the content container, and it's position within
+ * the viewport.
+ * 
+ * - FlyoutMenuItemContent: paddingBlock: token('space.100'); – 8px top, 8px bottom
+ * - Position: 5px top, 5px bottom
+ * 
+ * Total vertical padding:
+ * 		(8px [content top] + 8px [content bottom]) +
+ * 		(5px [position top] + 5px [position bottom]) = 26px
+ */
+const FLYOUT_MENU_VERTICAL_OFFSET_PX = 26;
 const flyoutMenuItemContentStyles = {
   root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
 };
+const flyoutMenuItemContentContainerStyles = {
+  container: "_1e0c1txw _4t3i1osq _c71l2gk1 _2lx21bp4"
+};
 /**
  * __FlyoutMenuItemContent__
  *
@@ -58,7 +75,11 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
   }) => /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
     ref: forwardedRef,
     update: update
-  }, children));
+  }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(OnCloseProvider, {
+    value: () => onClose
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([flyoutMenuItemContentContainerStyles.container])
+  }, children)) : children));
 });
 function createResizeObserver(update) {
   return new ResizeObserver(update);

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

@@ -15,4 +15,18 @@ export const IsOpenContext = /*#__PURE__*/createContext(false);
  */
 export const SetIsOpenContext = /*#__PURE__*/createContext(noop);
 export const useFlyoutMenuOpen = () => useContext(IsOpenContext);
-export const useSetFlyoutMenuOpen = () => useContext(SetIsOpenContext);
+export const useSetFlyoutMenuOpen = () => useContext(SetIsOpenContext);
+
+/**
+ * __On close context__
+ * 
+ * A context for storing the onClose value of the FlyoutMenuItem.
+ */
+export const OnCloseContext = /*#__PURE__*/createContext(null);
+
+/**
+ * __On close provider__
+ * 
+ * A context provider for supplying the testId to the FlyoutHeader.
+ */
+export const OnCloseProvider = OnCloseContext.Provider;

package/dist/esm/entry-points/side-nav-items/flyout-menu-item.js

@@ -1,4 +1,7 @@
 export { FlyoutMenuItem } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item';
+export { FlyoutBody } from '../../ui/menu-item/flyout-menu-item/flyout-body';
 export { FlyoutMenuItemContent } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-content';
-export { FlyoutMenuItemTrigger } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';
-export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';
+export { FlyoutFooter } from '../../ui/menu-item/flyout-menu-item/flyout-footer';
+export { FlyoutHeader } from '../../ui/menu-item/flyout-menu-item/flyout-header';
+export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';
+export { FlyoutMenuItemTrigger } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';

package/dist/esm/ui/menu-item/flyout-menu-item/close-button.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IconButton } from "@atlaskit/button/new";
+import CrossIcon from "@atlaskit/icon/core/cross";
+/**
+ * __Close button__
+ *
+ * The close button is to be used for flyout menu item headers to ensure that
+ * all users have an accessible and obvious way to close the flyout menu.
+ *
+ * Ensure that the close button renders first in the DOM to make sure that
+ * users will encounter all elements of the flyout menu, including everything
+ * within the flyout menu header. This can be done using a `Flex` primitive as
+ * the custom header's container with a flex direction of `row-reverse`.
+ */
+export var CloseButton = function CloseButton(_ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    testId: testId,
+    appearance: "subtle",
+    icon: CrossIcon,
+    label: label || 'Close Flyout Menu',
+    onClick: onClick
+  });
+};

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

@@ -0,0 +1,5 @@
+._18m91wug{overflow-y:auto}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}

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

@@ -0,0 +1,23 @@
+/* flyout-body.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./flyout-body.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+var bodyStyles = {
+  root: "_1e0c1txw _2lx21bp4 _18m91wug _4t3i1osq _1bahv2br"
+};
+/**
+ * __Flyout menu item body__
+ *
+ * The main section of a flyout menu. This component is used to render the
+ * primary contents of the flyout menu. This component should be placed between
+ * FlyoutHeader and FlyoutFooter (if present), as is scrollable if the content
+ * exceeds the available space.
+ */
+export var FlyoutBody = function FlyoutBody(props) {
+  var children = props.children,
+    testId = props.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([bodyStyles.root])
+  }, children);
+};

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

@@ -0,0 +1,17 @@
+/* flyout-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+/**
+ * __Flyout menu item footer__
+ *
+ * The footer section of a flyout menu. This component can display
+ * supplementary actions or information at the bottom of the flyout menu. This
+ * component should be placed after FlyoutBody within the FlyoutMenuItemContent.
+ */
+export var FlyoutFooter = function FlyoutFooter(props) {
+  var children = props.children,
+    testId = props.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId
+  }, children);
+};

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

@@ -0,0 +1,10 @@
+
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._2lx21sbv{flex-direction:row-reverse}
+._4cvr1h6o{align-items:center}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}

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

@@ -0,0 +1,44 @@
+/* flyout-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./flyout-header.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useContext } from 'react';
+import Heading from '@atlaskit/heading';
+import { Flex } from '@atlaskit/primitives/compiled';
+import { CloseButton } from './close-button';
+import { OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
+var headerStyles = {
+  root: "_zulp12x7 _bozg12x7 _85i512x7 _1e0c1txw _2lx21bp4",
+  flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq"
+};
+/**
+ * __FlyoutHeader__
+ *
+ * The header section of a flyout menu. This component displays the title, and
+ * close button, as well as any other provided actions relevant to the menu.
+ * This component should be placed first within the FlyoutMenuItemContent.
+ */
+export var FlyoutHeader = function FlyoutHeader(props) {
+  var children = props.children,
+    testId = props.testId,
+    title = props.title,
+    closeButtonLabel = props.closeButtonLabel;
+  var setIsOpen = useContext(SetIsOpenContext);
+  var onClose = useContext(OnCloseContext);
+  var handleClose = useCallback(function () {
+    onClose === null || onClose === void 0 || onClose();
+    setIsOpen(false);
+  }, [setIsOpen, onClose]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([headerStyles.root])
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: headerStyles.flex
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    label: closeButtonLabel,
+    onClick: handleClose,
+    testId: testId && "".concat(testId, "--close-button")
+  }), /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall",
+    as: "span"
+  }, title)), children);
+};

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

@@ -1,5 +1,9 @@
+._1e0c1txw{display:flex}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._c71l2gk1{max-height:calc(100vh - 26px)}
 ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
 @media (min-width:48rem){._14b51kdj{width:25pc}}

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

@@ -6,10 +6,27 @@ import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useRef,
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupContent } from '@atlaskit/popup/experimental';
-import { SetIsOpenContext } from './flyout-menu-item-context';
+import { OnCloseProvider, SetIsOpenContext } from './flyout-menu-item-context';
+
+/**
+ * The vertical offset in px to ensure the flyout container does not exceed the bounds of
+ * the window. This matches the padding of the content container, and it's position within
+ * the viewport.
+ * 
+ * - FlyoutMenuItemContent: paddingBlock: token('space.100'); – 8px top, 8px bottom
+ * - Position: 5px top, 5px bottom
+ * 
+ * Total vertical padding:
+ * 		(8px [content top] + 8px [content bottom]) +
+ * 		(5px [position top] + 5px [position bottom]) = 26px
+ */
+var FLYOUT_MENU_VERTICAL_OFFSET_PX = 26;
 var flyoutMenuItemContentStyles = {
   root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
 };
+var flyoutMenuItemContentContainerStyles = {
+  container: "_1e0c1txw _4t3i1osq _c71l2gk1 _2lx21bp4"
+};
 /**
  * __FlyoutMenuItemContent__
  *
@@ -58,7 +75,13 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     return /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
       ref: forwardedRef,
       update: update
-    }, children);
+    }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(OnCloseProvider, {
+      value: function value() {
+        return onClose;
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([flyoutMenuItemContentContainerStyles.container])
+    }, children)) : children);
   });
 });
 function createResizeObserver(update) {

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

@@ -19,4 +19,18 @@ export var useFlyoutMenuOpen = function useFlyoutMenuOpen() {
 };
 export var useSetFlyoutMenuOpen = function useSetFlyoutMenuOpen() {
   return useContext(SetIsOpenContext);
-};
+};
+
+/**
+ * __On close context__
+ * 
+ * A context for storing the onClose value of the FlyoutMenuItem.
+ */
+export var OnCloseContext = /*#__PURE__*/createContext(null);
+
+/**
+ * __On close provider__
+ * 
+ * A context provider for supplying the testId to the FlyoutHeader.
+ */
+export var OnCloseProvider = OnCloseContext.Provider;

package/dist/types/entry-points/side-nav-items/flyout-menu-item.d.ts

@@ -1,4 +1,7 @@
 export { FlyoutMenuItem, type FlyoutMenuItemProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item';
+export { FlyoutBody, type FlyoutBodyProps, } from '../../ui/menu-item/flyout-menu-item/flyout-body';
 export { FlyoutMenuItemContent, type FlyoutMenuItemContentProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-content';
-export { FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';
+export { FlyoutFooter, type FlyoutFooterProps, } from '../../ui/menu-item/flyout-menu-item/flyout-footer';
+export { FlyoutHeader, type FlyoutHeaderProps, } from '../../ui/menu-item/flyout-menu-item/flyout-header';
 export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';
+export { FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';

package/dist/types/ui/menu-item/flyout-menu-item/close-button.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+type CloseButtonProps = {
+    /**
+     * The accessible name to give to the close button.
+     *
+     * Used as the aria-label for the close button to ensure screen reader
+     * accessibility.
+     */
+    label: string;
+    /**
+     * The handler called when the close button is clicked. Typically, this
+     * should trigger the same close logic as the top-level flyout menu
+     * component.
+     */
+    onClick?: () => void;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+};
+/**
+ * __Close button__
+ *
+ * The close button is to be used for flyout menu item headers to ensure that
+ * all users have an accessible and obvious way to close the flyout menu.
+ *
+ * Ensure that the close button renders first in the DOM to make sure that
+ * users will encounter all elements of the flyout menu, including everything
+ * within the flyout menu header. This can be done using a `Flex` primitive as
+ * the custom header's container with a flex direction of `row-reverse`.
+ */
+export declare const CloseButton: (props: CloseButtonProps) => React.JSX.Element;
+export {};

package/dist/types/ui/menu-item/flyout-menu-item/flyout-body.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export interface FlyoutBodyProps {
+    /**
+     * The content to display within the main body of the flyout menu.
+     * Typically includes the primary interactive elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Flyout menu item body__
+ *
+ * The main section of a flyout menu. This component is used to render the
+ * primary contents of the flyout menu. This component should be placed between
+ * FlyoutHeader and FlyoutFooter (if present), as is scrollable if the content
+ * exceeds the available space.
+ */
+export declare const FlyoutBody: (props: FlyoutBodyProps) => JSX.Element;

package/dist/types/ui/menu-item/flyout-menu-item/flyout-footer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export interface FlyoutFooterProps {
+    /**
+     * The content to display within the flyout footer. Typically used for
+     * supplementary actions or information.
+     */
+    children?: React.ReactNode;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Flyout menu item footer__
+ *
+ * The footer section of a flyout menu. This component can display
+ * supplementary actions or information at the bottom of the flyout menu. This
+ * component should be placed after FlyoutBody within the FlyoutMenuItemContent.
+ */
+export declare const FlyoutFooter: (props: FlyoutFooterProps) => JSX.Element;

package/dist/types/ui/menu-item/flyout-menu-item/flyout-header.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export interface FlyoutHeaderProps {
+    /**
+     * The actions to display within the flyout header.
+     */
+    children?: React.ReactNode;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * The title of the flyout menu.
+     */
+    title: string;
+    /**
+     * The accessible label for the close button in the flyout header.
+     *
+     * Used as the aria-label for the close button to ensure screen reader
+     * accessibility.
+     */
+    closeButtonLabel: string;
+}
+/**
+ * __FlyoutHeader__
+ *
+ * The header section of a flyout menu. This component displays the title, and
+ * close button, as well as any other provided actions relevant to the menu.
+ * This component should be placed first within the FlyoutMenuItemContent.
+ */
+export declare const FlyoutHeader: (props: FlyoutHeaderProps) => JSX.Element;

package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts

@@ -12,3 +12,15 @@ export declare const IsOpenContext: import("react").Context<boolean>;
 export declare const SetIsOpenContext: import("react").Context<(value: boolean) => void>;
 export declare const useFlyoutMenuOpen: () => boolean;
 export declare const useSetFlyoutMenuOpen: () => (value: boolean) => void;
+/**
+ * __On close context__
+ *
+ * A context for storing the onClose value of the FlyoutMenuItem.
+ */
+export declare const OnCloseContext: import("react").Context<(() => void) | null | undefined>;
+/**
+ * __On close provider__
+ *
+ * A context provider for supplying the testId to the FlyoutHeader.
+ */
+export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;

package/dist/types-ts4.5/entry-points/side-nav-items/flyout-menu-item.d.ts

@@ -1,4 +1,7 @@
 export { FlyoutMenuItem, type FlyoutMenuItemProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item';
+export { FlyoutBody, type FlyoutBodyProps, } from '../../ui/menu-item/flyout-menu-item/flyout-body';
 export { FlyoutMenuItemContent, type FlyoutMenuItemContentProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-content';
-export { FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';
+export { FlyoutFooter, type FlyoutFooterProps, } from '../../ui/menu-item/flyout-menu-item/flyout-footer';
+export { FlyoutHeader, type FlyoutHeaderProps, } from '../../ui/menu-item/flyout-menu-item/flyout-header';
 export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';
+export { FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, } from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/close-button.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+type CloseButtonProps = {
+    /**
+     * The accessible name to give to the close button.
+     *
+     * Used as the aria-label for the close button to ensure screen reader
+     * accessibility.
+     */
+    label: string;
+    /**
+     * The handler called when the close button is clicked. Typically, this
+     * should trigger the same close logic as the top-level flyout menu
+     * component.
+     */
+    onClick?: () => void;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+};
+/**
+ * __Close button__
+ *
+ * The close button is to be used for flyout menu item headers to ensure that
+ * all users have an accessible and obvious way to close the flyout menu.
+ *
+ * Ensure that the close button renders first in the DOM to make sure that
+ * users will encounter all elements of the flyout menu, including everything
+ * within the flyout menu header. This can be done using a `Flex` primitive as
+ * the custom header's container with a flex direction of `row-reverse`.
+ */
+export declare const CloseButton: (props: CloseButtonProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-body.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export interface FlyoutBodyProps {
+    /**
+     * The content to display within the main body of the flyout menu.
+     * Typically includes the primary interactive elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Flyout menu item body__
+ *
+ * The main section of a flyout menu. This component is used to render the
+ * primary contents of the flyout menu. This component should be placed between
+ * FlyoutHeader and FlyoutFooter (if present), as is scrollable if the content
+ * exceeds the available space.
+ */
+export declare const FlyoutBody: (props: FlyoutBodyProps) => JSX.Element;

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-footer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export interface FlyoutFooterProps {
+    /**
+     * The content to display within the flyout footer. Typically used for
+     * supplementary actions or information.
+     */
+    children?: React.ReactNode;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Flyout menu item footer__
+ *
+ * The footer section of a flyout menu. This component can display
+ * supplementary actions or information at the bottom of the flyout menu. This
+ * component should be placed after FlyoutBody within the FlyoutMenuItemContent.
+ */
+export declare const FlyoutFooter: (props: FlyoutFooterProps) => JSX.Element;

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-header.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export interface FlyoutHeaderProps {
+    /**
+     * The actions to display within the flyout header.
+     */
+    children?: React.ReactNode;
+    /**
+     * A unique string that appears as data attribute data-testid in the
+     * rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * The title of the flyout menu.
+     */
+    title: string;
+    /**
+     * The accessible label for the close button in the flyout header.
+     *
+     * Used as the aria-label for the close button to ensure screen reader
+     * accessibility.
+     */
+    closeButtonLabel: string;
+}
+/**
+ * __FlyoutHeader__
+ *
+ * The header section of a flyout menu. This component displays the title, and
+ * close button, as well as any other provided actions relevant to the menu.
+ * This component should be placed first within the FlyoutMenuItemContent.
+ */
+export declare const FlyoutHeader: (props: FlyoutHeaderProps) => JSX.Element;

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts

@@ -12,3 +12,15 @@ export declare const IsOpenContext: import("react").Context<boolean>;
 export declare const SetIsOpenContext: import("react").Context<(value: boolean) => void>;
 export declare const useFlyoutMenuOpen: () => boolean;
 export declare const useSetFlyoutMenuOpen: () => (value: boolean) => void;
+/**
+ * __On close context__
+ *
+ * A context for storing the onClose value of the FlyoutMenuItem.
+ */
+export declare const OnCloseContext: import("react").Context<(() => void) | null | undefined>;
+/**
+ * __On close provider__
+ *
+ * A context provider for supplying the testId to the FlyoutHeader.
+ */
+export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.13.1",
+	"version": "5.14.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -71,11 +71,12 @@
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.3.0",
 		"@atlaskit/layering": "^3.4.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.8.0",
+		"@atlaskit/popup": "^4.9.0",
 		"@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",
@@ -102,10 +103,9 @@
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/form": "^15.1.0",
-		"@atlaskit/heading": "^5.2.0",
+		"@atlaskit/form": "^15.2.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/lozenge": "^13.2.0",
+		"@atlaskit/lozenge": "^13.3.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/modal-dialog": "^14.9.0",
 		"@atlaskit/onboarding": "^14.4.0",
@@ -116,7 +116,7 @@
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
-		"@atlassian/gemini": "^1.25.0",
+		"@atlassian/gemini": "^1.26.0",
 		"@atlassian/search-dialog": "^9.10.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
@@ -190,6 +190,9 @@
 		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_flyout_menu_slots_close_button": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"