@atlaskit/side-nav-items 1.0.0

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

@@ -0,0 +1,57 @@
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { ExpandableMenuItemLevelContext } from './expandable-menu-item-level-context';
+/**
+ * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
+ * shown within the menu item tree.
+ */
+export var AreAllAncestorsExpandedContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing the isExpanded value of the ExpandableMenuItem.
+ */
+export var IsExpandedContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing a function that sets isExpanded value of the ExpandableMenuItem.
+ */
+export var SetIsExpandedContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing a function that triggers when isExpanded value of the ExpandableMenuItem is changed.
+ */
+export var OnExpansionToggleContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+export var LevelContext = ExpandableMenuItemLevelContext;
+export var useIsExpanded = function useIsExpanded() {
+  var context = useContext(IsExpandedContext);
+  invariant(context !== null, 'useIsExpanded must be used within an ExpandableMenuItem');
+  return context;
+};
+export var useSetIsExpanded = function useSetIsExpanded() {
+  var context = useContext(SetIsExpandedContext);
+  invariant(context !== null, 'useSetIsExpanded must be used within an ExpandableMenuItem');
+  return context;
+};
+export var useOnExpansionToggle = function useOnExpansionToggle() {
+  return useContext(OnExpansionToggleContext);
+};
+export var useLevel = function useLevel() {
+  return useContext(LevelContext);
+};
+
+/**
+ * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
+ * shown within the menu item tree.
+ *
+ * It works by combining (using &&) all the expansion states of the current menu item's ancestors.
+ *
+ * Using `true` as the fallback for cases when the menu item does not have ancestors.
+ */
+export var useAreAllAncestorsExpanded = function useAreAllAncestorsExpanded() {
+  var _useContext;
+  return (_useContext = useContext(AreAllAncestorsExpandedContext)) !== null && _useContext !== void 0 ? _useContext : true;
+};

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+// Note: this context value is in a seperate file as it is consumed
+// by our drag and drop drag preview
+
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+export var ExpandableMenuItemLevelContext = /*#__PURE__*/createContext(0);

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -0,0 +1,14 @@
+._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
+._165n1bgi{--expandable-provided-elembefore-display:contents}
+._165nglyw{--expandable-provided-elembefore-display:none}
+._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
+._1e0ciw0t{display:var(--expandable-chevron-display)}
+._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
+._1mmi1txw{--expandable-chevron-display:flex}
+._1mmiglyw{--expandable-chevron-display:none}
+._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
+._syazxl6c{color:var(--ds-icon-selected,#1868db)}
+._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
+[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}
+._1vnl1txw:hover{--expandable-chevron-display:flex}
+._p8btglyw:hover{--expandable-provided-elembefore-display:none}

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -0,0 +1,141 @@
+/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./expandable-menu-item-trigger.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useId, useRef } from 'react';
+import { IconButton } from '@atlaskit/button/new';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
+import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
+import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
+// Widening type to `string` to side-step Compiled cssMap typescript warnings with unknown properties
+var chevronDisplayCssVar = '--expandable-chevron-display';
+var providedElemBeforeDisplayCssVar = '--expandable-provided-elembefore-display';
+var wrapperStyles = {
+  root: "_1mmi1txw _165nglyw",
+  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
+};
+var iconStyles = {
+  chevron: "_1e0ciw0t _1tz3r0mg",
+  providedElemBefore: "_1e0c1xb2",
+  providedElemBeforeSelected: "_syazxl6c"
+};
+var ExpandableMenuItemIcon = function ExpandableMenuItemIcon(_ref) {
+  var iconProps = _ref.iconProps,
+    isExpanded = _ref.isExpanded,
+    isSelected = _ref.isSelected,
+    providedElemBefore = _ref.providedElemBefore;
+  var ChevronIcon = isExpanded ? ChevronDownIcon : ChevronRightIcon;
+  var chevronElem = /*#__PURE__*/React.createElement(ChevronIcon, _extends({}, iconProps, {
+    label: "",
+    color: isSelected ? "var(--ds-icon-selected, #1868DB)" : undefined,
+    size: "small"
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: ax([iconStyles.chevron])
+  }, chevronElem), providedElemBefore && /*#__PURE__*/React.createElement("div", {
+    className: ax([iconStyles.providedElemBefore, isSelected && iconStyles.providedElemBeforeSelected])
+  }, providedElemBefore));
+};
+/**
+ * __ExpandableMenuItemTrigger__
+ *
+ * The trigger component for an `ExpandableMenuItem`. Interacting with it will expand or collapse the expandable.
+ */
+export var ExpandableMenuItemTrigger = forwardRefWithGeneric(function (_ref2, forwardedRef) {
+  var actions = _ref2.actions,
+    isSelected = _ref2.isSelected,
+    href = _ref2.href,
+    providedElemBefore = _ref2.elemBefore,
+    elemAfter = _ref2.elemAfter,
+    actionsOnHover = _ref2.actionsOnHover,
+    onClick = _ref2.onClick,
+    children = _ref2.children,
+    testId = _ref2.testId,
+    interactionName = _ref2.interactionName,
+    isContentTooltipDisabled = _ref2.isContentTooltipDisabled,
+    visualContentRef = _ref2.visualContentRef,
+    isDragging = _ref2.isDragging,
+    hasDragIndicator = _ref2.hasDragIndicator,
+    dropIndicator = _ref2.dropIndicator;
+  var id = useId();
+  var onExpansionToggle = useOnExpansionToggle();
+  var isExpanded = useIsExpanded();
+  var setIsExpanded = useSetIsExpanded();
+  var itemRef = useRef(null);
+  var handleIconClick = useCallback(function () {
+    onExpansionToggle === null || onExpansionToggle === void 0 || onExpansionToggle(!isExpanded);
+    setIsExpanded(!isExpanded);
+  }, [isExpanded, onExpansionToggle, setIsExpanded]);
+  var handleMenuContentClick = useCallback(function (event, analyticsEvent) {
+    var newValue = !isExpanded;
+    onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
+      isExpanded: newValue
+    });
+    onExpansionToggle === null || onExpansionToggle === void 0 || onExpansionToggle(newValue);
+    setIsExpanded(newValue);
+  }, [onClick, onExpansionToggle, isExpanded, setIsExpanded]);
+  var isSelectable = typeof href !== 'undefined';
+  useScrollMenuItemIntoView({
+    elementRef: itemRef,
+    isSelected: Boolean(isSelectable && isSelected)
+  });
+
+  // Wrapped in an IconButton if the expandable menu item trigger is selectable
+  var elemBefore = isSelectable ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
+        iconProps: iconProps,
+        isExpanded: isExpanded,
+        isSelected: isSelected,
+        providedElemBefore: providedElemBefore
+      });
+    },
+    "aria-expanded": isExpanded
+    // We are labelling the icon button using the containing menu item's content, to provide context to
+    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
+    // `aria-expanded` attribute to indicate the expanded state of the menu item.
+    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
+    ,
+    "aria-labelledby": id
+    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
+    // `aria-labelledby`, which will be used instead.
+    ,
+    label: "",
+    appearance: "subtle",
+    spacing: "compact",
+    onClick: handleIconClick,
+    interactionName: interactionName,
+    testId: testId ? "".concat(testId, "--elem-before-button") : undefined
+  }) : /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
+    isExpanded: isExpanded,
+    isSelected: isSelected,
+    providedElemBefore: providedElemBefore
+  });
+
+  // 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
+  return /*#__PURE__*/React.createElement("div", {
+    ref: itemRef,
+    className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
+  }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    id: id,
+    actions: actions,
+    actionsOnHover: actionsOnHover,
+    elemBefore: elemBefore,
+    ariaExpanded: isExpanded,
+    elemAfter: elemAfter,
+    href: href,
+    isSelected: isSelected,
+    onClick: handleMenuContentClick,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    testId: testId,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+});

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item.js

@@ -0,0 +1,60 @@
+/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./expandable-menu-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import useControlled from '@atlaskit/ds-lib/use-controlled';
+import { MenuListItem } from '../menu-list-item';
+import { IsExpandedContext, OnExpansionToggleContext, SetIsExpandedContext } from './expandable-menu-item-context';
+var relativeStyles = {
+  root: "_kqswh2mm"
+};
+
+/**
+ * __ExpandableMenuItem__
+ *
+ * A composable component for nested menu items that can be revealed and hidden by interacting witih the parent menu item.
+ *
+ * Follows the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+ *
+ * Should be used with `ExpandableMenuItemTrigger` as the parent menu item, and children menu items should be wrapped in a `ExpandableMenuItemContent`.
+ *
+ * Usage example:
+ * ```jsx
+ * <ExpandableMenuItem>
+ *   <ExpandableMenuItemTrigger>Parent menu item</ExpandableMenuItemTrigger>
+ *   <ExpandableMenuItemContent>
+ *     <ButtonMenuItem>Item 1</ButtonMenuItem>
+ *     <ButtonMenuItem>Item 2</ButtonMenuItem>
+ *   </ExpandableMenuItemContent>
+ * </ExpandableMenuItem>
+ * ```
+ */
+export var ExpandableMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var isExpandedControlled = _ref.isExpanded,
+    _ref$isDefaultExpande = _ref.isDefaultExpanded,
+    isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
+    onExpansionToggle = _ref.onExpansionToggle,
+    children = _ref.children,
+    dropIndicator = _ref.dropIndicator,
+    testId = _ref.testId;
+  var _useControlled = useControlled(isExpandedControlled, function () {
+      return isDefaultExpanded;
+    }),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    isExpanded = _useControlled2[0],
+    setIsExpanded = _useControlled2[1];
+  return /*#__PURE__*/React.createElement(IsExpandedContext.Provider, {
+    value: isExpanded
+  }, /*#__PURE__*/React.createElement(SetIsExpandedContext.Provider, {
+    value: setIsExpanded
+  }, /*#__PURE__*/React.createElement(OnExpansionToggleContext.Provider, {
+    value: onExpansionToggle !== null && onExpansionToggle !== void 0 ? onExpansionToggle : null
+  }, /*#__PURE__*/React.createElement(MenuListItem, {
+    ref: forwardedRef,
+    testId: testId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([dropIndicator && relativeStyles.root])
+  }, children, dropIndicator)))));
+});

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,
+    onClick: onClick
+  });
+};

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

@@ -0,0 +1,11 @@
+._12l2x0bf{margin-inline-end:var(--ds-space-negative-100,-8px)}
+._18m91wug{overflow-y:auto}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._6rthx0bf{margin-block-end:var(--ds-space-negative-100,-8px)}
+._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
+._ahbqx0bf{margin-inline-start:var(--ds-space-negative-100,-8px)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}

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

@@ -0,0 +1,31 @@
+/* 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 _ahbqx0bf _12l2x0bf _6rthx0bf _bozgu2gc _y4tiu2gc _85i5u2gc"
+};
+/**
+ * __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 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    testId = props.testId,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    onBlurCapture = props.onBlurCapture;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onBlurCapture: onBlurCapture,
+    role: "presentation",
+    className: ax([bodyStyles.root])
+  }, children);
+});

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

@@ -0,0 +1,5 @@
+._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._1sw7nqa1{border-block-start-style:solid}
+._7myae4h9{border-block-start-width:var(--ds-border-width,1px)}
+._qgnu1l7x{border-block-start-color:var(--ds-border,#0b120e24)}

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

@@ -0,0 +1,22 @@
+/* flyout-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./flyout-footer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+var footerStyles = {
+  root: "_7myae4h9 _1sw7nqa1 _qgnu1l7x _1pfhu2gc _1q51u2gc"
+};
+/**
+ * __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,
+    className: ax([footerStyles.root])
+  }, children);
+};

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

@@ -0,0 +1,11 @@
+
+._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)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}

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

@@ -0,0 +1,45 @@
+/* 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, useTitleId } from './flyout-menu-item-context';
+var headerStyles = {
+  root: "_zulp12x7 _bozg1b66 _85i512x7 _1e0c1txw _2lx21bp4",
+  flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq _bozgv77o"
+};
+/**
+ * __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 id = useTitleId();
+  var onCloseRef = useContext(OnCloseContext);
+  var handleClose = useCallback(function (event) {
+    var _onCloseRef$current;
+    (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, event, 'close-button');
+  }, [onCloseRef]);
+  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: "h2",
+    id: id
+  }, title)), children);
+};

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

@@ -0,0 +1,8 @@
+._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)}
+._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

@@ -0,0 +1,214 @@
+/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { PopupContent } from '@atlaskit/popup/experimental';
+import { OnCloseContext, SetIsOpenContext, TitleIdContextProvider } 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;
+
+/**
+ * The maximum height of the flyout menu in pixels, following the Confluence standard maximum
+ * height of 760px.
+ */
+var FLYOUT_MENU_MAX_HEIGHT_PX = 760;
+var flyoutMenuItemContentStyles = {
+  root: "_1q51u2gc _85i5u2gc _bozgu2gc _y4tiu2gc _14b51kdj"
+};
+var flyoutMenuItemContentContainerStyles = {
+  container: "_1e0c1txw _4t3i1osq _2lx21bp4"
+};
+/**
+ * __FlyoutMenuItemContent__
+ *
+ * The content that appears when the flyout menu is open.
+ */
+export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    containerTestId = _ref.containerTestId,
+    onClose = _ref.onClose,
+    autoFocus = _ref.autoFocus,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? FLYOUT_MENU_MAX_HEIGHT_PX : _ref$maxHeight;
+  var setIsOpen = useContext(SetIsOpenContext);
+  var onCloseRef = useContext(OnCloseContext);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  // The source of the close is not accessible to the consumer, it is determined within the
+  // handleClose function, or passed in as a parameter in FlyoutMenuItemTrigger (outside-click),
+  // or FlyoutHeader (close-button).
+  var handleClose = useCallback(function (event, source) {
+    if (fg("platform_dst_nav4_flyout_menu_slots_close_button")) {
+      // Use the passed source if provided, otherwise determine from event
+      var determinedSource = source || 'other';
+      if (!source) {
+        if (event instanceof KeyboardEvent) {
+          var keyboardEvent = event;
+          if (keyboardEvent.key === 'Escape' || keyboardEvent.key === 'Esc') {
+            determinedSource = 'escape-key';
+          }
+        } else if (event instanceof MouseEvent) {
+          if (event && 'type' in event && event.type === 'click') {
+            determinedSource = 'outside-click';
+          }
+        }
+      }
+
+      // When flyout menu is closed, fire analytics event
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'sideNav',
+        actionSubject: 'flyoutMenu',
+        action: 'closed',
+        attributes: {
+          closeSource: determinedSource
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
+    }
+    onClose === null || onClose === void 0 || onClose();
+    setIsOpen(false);
+  }, [setIsOpen, onClose, createAnalyticsEvent]);
+
+  // Register handleClose in the ref to allow the FlyoutMenuItemTrigger to access it
+  useEffect(function () {
+    onCloseRef.current = handleClose;
+  }, [handleClose, onCloseRef]);
+  var titleId = useId();
+  var computedMaxHeight = useMemo(function () {
+    return "min(\n\t\t\tcalc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px),\n\t\t\t").concat(maxHeight, "px\n\t\t)");
+  }, [maxHeight]);
+  return /*#__PURE__*/React.createElement(PopupContent, {
+    appearance: "UNSAFE_modal-below-sm",
+    onClose: handleClose,
+    placement: "right-start"
+    // Using a capture event listener so that we are more resilient against
+    // code that stops events. We _really_ want to close the flyout whenever
+    // user user clicks outside the flyout content
+    ,
+    shouldUseCaptureOnOutsideClick: true,
+    shouldFitViewport: true,
+    testId: containerTestId,
+    xcss: flyoutMenuItemContentStyles.root,
+    autoFocus: autoFocus,
+    role: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
+    titleId: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
+    /**
+     * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
+     *
+     * This allows makers to use popups with `shouldRenderToParent` inside the flyout.
+     *
+     * Without this, the `transform` makes the flyout the containing element for fixed positioning.
+     * Because the flyout is also a scroll container then any nested, layered element is unable to
+     * escape the flyout.
+     *
+     * Disabling the `transform` is the simplest way to resolve this layering issue,
+     * and should have negligible performance impacts, because the flyout menus should rarely
+     * need to be repositioned.
+     */,
+    shouldDisableGpuAcceleration: true,
+    shouldRenderToParent: fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')
+  }, function (_ref2) {
+    var update = _ref2.update;
+    return /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
+      ref: forwardedRef,
+      update: update
+    }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
+      value: titleId
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxHeight: computedMaxHeight
+      },
+      "data-testid": containerTestId ? "".concat(containerTestId, "--container") : undefined,
+      className: ax([flyoutMenuItemContentContainerStyles.container])
+    }, children)) : children);
+  });
+});
+function createResizeObserver(update) {
+  return new ResizeObserver(update);
+}
+
+/**
+ * Will call the Popper.js `update()` method to recalculate positioning, when the flyout menu changes size.
+ * This is the size of the scroll container, NOT the scroll content.
+ *
+ * We could potentially bake this into `@atlaskit/popup` or `@atlaskit/popper` but there are a few
+ * reasons to keep it scoped to flyout menus for now:
+ *
+ * 1. It's easier to unwind
+ * 2. We've only had bug reports for flyout menus
+ * 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;
+  /**
+   * 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.
+   */
+  var updateRef = useRef(update);
+  useEffect(function () {
+    updateRef.current = update;
+  }, [update]);
+
+  /**
+   * Stable function that calls the latest `update` function by calling it through the stable ref.
+   */
+  var triggerUpdate = useCallback(function () {
+    var _updateRef$current;
+    (_updateRef$current = updateRef.current) === null || _updateRef$current === void 0 || _updateRef$current.call(updateRef);
+  }, []);
+  var _useState = useState(function () {
+      return createResizeObserver(triggerUpdate);
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    resizeObserver = _useState2[0];
+
+  /**
+   * This is a callback ref that will update which `HTMLElement` we are observing,
+   * if or when the underlying `HTMLElement` changes or unmounts.
+   */
+  var observeCallbackRef = useCallback(function (element) {
+    /**
+     * Unobserves all observed elements.
+     * Allows us to cleanup without needing to store a reference to the previous element.
+     */
+    resizeObserver.disconnect();
+    if (!element) {
+      return;
+    }
+    resizeObserver.observe(element);
+  }, [resizeObserver]);
+
+  /**
+   * We need to memoize the ref otherwise `triggerUpdate` is repeatedly called.
+   *
+   * This stems from ResizeObserver firing once after calling `.observe()` even if there
+   * was no resize.
+   *
+   * Without memoizing the ref, the update causes a rerender, which causes the ref to
+   * get recreated, which triggers an update and so on in a loop.
+   */
+  var ref = useMemo(function () {
+    return mergeRefs([forwardedRef, observeCallbackRef]);
+  }, [forwardedRef, observeCallbackRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, children);
+});