@atlaskit/side-nav-items 1.0.0

package/dist/es2019/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js

@@ -0,0 +1,192 @@
+/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.38.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import invariant from 'tiny-invariant';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { DragPreview } from './drag-preview';
+import { DropIndicator } from './drop-indicator';
+import { attachInstruction, extractInstruction } from './hitbox';
+const idle = {
+  type: 'idle'
+};
+/**
+ * A convenience helper for setting up drag and drop for menu items
+ *
+ * - Don't include the `draggable` property if you don't want the menu item to be a draggable
+ * - Don't include the `dropTarget` property if you don't want the menu item to be a drop target
+ */
+export function useMenuItemDragAndDrop({
+  draggable: draggableArgs,
+  dropTarget: dropTargetArgs
+}) {
+  const draggableAnchorRef = useRef(null);
+  const draggableButtonRef = useRef(null);
+  const dropTargetRef = useRef(null);
+  const [internalState, setInternalState] = useState(idle);
+  const getDraggableElement = useCallback(() => {
+    var _ref, _draggableAnchorRef$c;
+    return (_ref = (_draggableAnchorRef$c = draggableAnchorRef.current) !== null && _draggableAnchorRef$c !== void 0 ? _draggableAnchorRef$c : draggableButtonRef.current) !== null && _ref !== void 0 ? _ref : null;
+  }, []);
+
+  // Set up draggable
+  useEffect(() => {
+    // Don't set up a draggable if there are no draggable args
+    if (!draggableArgs) {
+      return;
+    }
+    const element = getDraggableElement();
+    invariant(element, `draggableAnchorRef or draggableButtonRef not set`);
+    return draggable({
+      element,
+      getInitialData: draggableArgs.getInitialData,
+      canDrag: draggableArgs.canDrag,
+      onGenerateDragPreview({
+        nativeSetDragImage,
+        source,
+        location
+      }) {
+        setCustomNativeDragPreview({
+          nativeSetDragImage,
+          getOffset: pointerOutsideOfPreview({
+            x: "var(--ds-space-200, 16px)",
+            y: "var(--ds-space-100, 8px)"
+          }),
+          render({
+            container
+          }) {
+            const args = {
+              dragHandle: source.dragHandle,
+              element: source.element,
+              input: location.current.input
+            };
+            setInternalState({
+              type: 'preview',
+              container,
+              ui: draggableArgs.getDragPreviewPieces(args)
+            });
+          }
+        });
+      },
+      onDragStart() {
+        setInternalState({
+          type: 'dragging'
+        });
+      },
+      onDrop() {
+        setInternalState(idle);
+      }
+    });
+  }, [draggableArgs, getDraggableElement]);
+
+  // Set up drop target
+  useEffect(() => {
+    if (!dropTargetArgs) {
+      return;
+    }
+
+    // Don't need to provide a draggable element to have a drop target.
+    // Using this element in our `canDrop` check
+    const draggableElement = getDraggableElement();
+    const dropTarget = dropTargetRef.current;
+    invariant(dropTarget, `dropTargetRef was not set`);
+    return dropTargetForElements({
+      element: dropTarget,
+      // cannot drop on self
+      canDrop: args => {
+        // cannot drop on self
+        if (args.source.element === draggableElement) {
+          return false;
+        }
+        if (dropTargetArgs.canDrop) {
+          return dropTargetArgs.canDrop(args);
+        }
+        return true;
+      },
+      // menu items are always sticky, and the GroupDropIndicator should clear stickiness
+      getIsSticky: () => true,
+      getData(args) {
+        var _dropTargetArgs$getDa, _dropTargetArgs$getDa2;
+        const data = (_dropTargetArgs$getDa = (_dropTargetArgs$getDa2 = dropTargetArgs.getData) === null || _dropTargetArgs$getDa2 === void 0 ? void 0 : _dropTargetArgs$getDa2.call(dropTargetArgs, args)) !== null && _dropTargetArgs$getDa !== void 0 ? _dropTargetArgs$getDa : {};
+        const operations = dropTargetArgs.getOperations(args);
+        return attachInstruction(data, {
+          input: args.input,
+          element: args.element,
+          operations
+        });
+      },
+      onDragStart({
+        self
+      }) {
+        const instruction = extractInstruction(self.data);
+        setInternalState({
+          type: 'is-over',
+          instruction
+        });
+      },
+      onDrag({
+        self
+      }) {
+        const instruction = extractInstruction(self.data);
+        setInternalState(current => {
+          var _current$instruction, _current$instruction2;
+          if (current.type === 'is-over' && (instruction === null || instruction === void 0 ? void 0 : instruction.operation) === ((_current$instruction = current.instruction) === null || _current$instruction === void 0 ? void 0 : _current$instruction.operation) && (instruction === null || instruction === void 0 ? void 0 : instruction.blocked) === ((_current$instruction2 = current.instruction) === null || _current$instruction2 === void 0 ? void 0 : _current$instruction2.blocked)) {
+            return current;
+          }
+          return {
+            type: 'is-over',
+            instruction
+          };
+        });
+      },
+      onDragLeave() {
+        setInternalState(idle);
+      },
+      onDrop() {
+        setInternalState(idle);
+      },
+      onDragEnter({
+        self
+      }) {
+        const instruction = extractInstruction(self.data);
+        setInternalState({
+          type: 'is-over',
+          instruction
+        });
+      }
+    });
+  }, [dropTargetArgs, getDraggableElement]);
+  const dragPreview = (() => {
+    if (internalState.type !== 'preview') {
+      return null;
+    }
+    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+      elemBefore: internalState.ui.elemBefore
+    }, internalState.ui.content), internalState.container);
+  })();
+  const dropIndicator = internalState.type === 'is-over' && internalState.instruction && /*#__PURE__*/React.createElement(DropIndicator, {
+    instruction: internalState.instruction
+  });
+  const state = useMemo(() => {
+    if (internalState.type === 'preview') {
+      return {
+        type: 'preview'
+      };
+    }
+    // returning a new object to avoid modification of our `internalState` object
+    return {
+      ...internalState
+    };
+  }, [internalState]);
+  return {
+    state,
+    draggableButtonRef,
+    dropTargetRef,
+    draggableAnchorRef,
+    dragPreview,
+    dropIndicator
+  };
+}

package/dist/es2019/ui/menu-item/drag-handle/drag-handle.compiled.css

@@ -0,0 +1,9 @@
+._152tidpf{inset-block-start:0}
+._1bah1h6o{justify-content:center}
+._1e02idpf{inset-inline-start:0}
+._1e0c1i3c{display:var(--drag-handle-display,none)}
+._2lx21bp4{flex-direction:column}
+._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
+._kqswstnw{position:absolute}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u7coidpf{inset-block-end:0}

package/dist/es2019/ui/menu-item/drag-handle/drag-handle.js

@@ -0,0 +1,19 @@
+/* drag-handle.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./drag-handle.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
+const styles = {
+  root: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _152tidpf _u7coidpf _1e02idpf _ahbqxmi2"
+};
+
+// Using default export to play well with React.lazy
+export default function DragHandle() {
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: ax([styles.root])
+  }, /*#__PURE__*/React.createElement(DragHandleVerticalIcon, {
+    label: "",
+    size: "small"
+  }));
+}

package/dist/es2019/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -0,0 +1,9 @@
+// Using `lazy` so that only consumers who want drag and drop
+// need to include code for the drag handle.
+import { lazy } from 'react';
+
+/**
+ * Exposing this for use by custom components
+ */
+export const LazyDragHandle = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
+'./drag-handle'));

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

@@ -0,0 +1,2 @@
+._1e0cglyw{display:none}
+._bozg1crf{padding-inline-start:9pt}

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

@@ -0,0 +1,43 @@
+/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./expandable-menu-item-content.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, useRef } from 'react';
+import { cx } from '@compiled/react';
+import { expandableMenuItemIndentation } from '../constants';
+import { List } from '../list';
+import { AreAllAncestorsExpandedContext, LevelContext, useAreAllAncestorsExpanded, useIsExpanded, useLevel } from './expandable-menu-item-context';
+const styles = {
+  content: "_bozg1crf",
+  collapsedContent: "_1e0cglyw"
+};
+/**
+ * __ExpandableMenuItemContent__
+ *
+ * The expandable and collapsable section of the expandable menu item. It should contain the nested menu items.
+ */
+export const ExpandableMenuItemContent = /*#__PURE__*/forwardRef(({
+  children
+}, forwardedRef) => {
+  const isExpanded = useIsExpanded();
+  const level = useLevel();
+  const hasExpanded = useRef(false);
+  const areAllAncestorsExpanded = useAreAllAncestorsExpanded();
+  if (!isExpanded && !hasExpanded.current) {
+    return null;
+  }
+  hasExpanded.current = true;
+  return /*#__PURE__*/React.createElement(LevelContext.Provider, {
+    value: level + 1
+  }, /*#__PURE__*/React.createElement(AreAllAncestorsExpandedContext.Provider, {
+    value:
+    /**
+     * By combining the current ancestor and with the current menu item's state, all nested menu items will know if their
+     * ancestor menu items are all expanded.
+     */
+    areAllAncestorsExpanded && isExpanded
+  }, /*#__PURE__*/React.createElement(List, {
+    ref: forwardedRef,
+    xcss: cx(styles.content, !isExpanded && styles.collapsedContent)
+  }, children)));
+});

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

@@ -0,0 +1,53 @@
+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 const AreAllAncestorsExpandedContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing the isExpanded value of the ExpandableMenuItem.
+ */
+export const IsExpandedContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing a function that sets isExpanded value of the ExpandableMenuItem.
+ */
+export const SetIsExpandedContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing a function that triggers when isExpanded value of the ExpandableMenuItem is changed.
+ */
+export const OnExpansionToggleContext = /*#__PURE__*/createContext(null);
+
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+export const LevelContext = ExpandableMenuItemLevelContext;
+export const useIsExpanded = () => {
+  const context = useContext(IsExpandedContext);
+  invariant(context !== null, 'useIsExpanded must be used within an ExpandableMenuItem');
+  return context;
+};
+export const useSetIsExpanded = () => {
+  const context = useContext(SetIsExpandedContext);
+  invariant(context !== null, 'useSetIsExpanded must be used within an ExpandableMenuItem');
+  return context;
+};
+export const useOnExpansionToggle = () => useContext(OnExpansionToggleContext);
+export const useLevel = () => 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 const useAreAllAncestorsExpanded = () => {
+  var _useContext;
+  return (_useContext = useContext(AreAllAncestorsExpandedContext)) !== null && _useContext !== void 0 ? _useContext : true;
+};

package/dist/es2019/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 const ExpandableMenuItemLevelContext = /*#__PURE__*/createContext(0);

package/dist/es2019/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/es2019/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
+const chevronDisplayCssVar = '--expandable-chevron-display';
+const providedElemBeforeDisplayCssVar = '--expandable-provided-elembefore-display';
+const wrapperStyles = {
+  root: "_1mmi1txw _165nglyw",
+  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
+};
+const iconStyles = {
+  chevron: "_1e0ciw0t _1tz3r0mg",
+  providedElemBefore: "_1e0c1xb2",
+  providedElemBeforeSelected: "_syazxl6c"
+};
+const ExpandableMenuItemIcon = ({
+  iconProps,
+  isExpanded,
+  isSelected,
+  providedElemBefore
+}) => {
+  const ChevronIcon = isExpanded ? ChevronDownIcon : ChevronRightIcon;
+  const 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 const ExpandableMenuItemTrigger = forwardRefWithGeneric(({
+  actions,
+  isSelected,
+  href,
+  elemBefore: providedElemBefore,
+  elemAfter,
+  actionsOnHover,
+  onClick,
+  children,
+  testId,
+  interactionName,
+  isContentTooltipDisabled,
+  visualContentRef,
+  isDragging,
+  hasDragIndicator,
+  dropIndicator
+}, forwardedRef) => {
+  const id = useId();
+  const onExpansionToggle = useOnExpansionToggle();
+  const isExpanded = useIsExpanded();
+  const setIsExpanded = useSetIsExpanded();
+  const itemRef = useRef(null);
+  const handleIconClick = useCallback(() => {
+    onExpansionToggle === null || onExpansionToggle === void 0 ? void 0 : onExpansionToggle(!isExpanded);
+    setIsExpanded(!isExpanded);
+  }, [isExpanded, onExpansionToggle, setIsExpanded]);
+  const handleMenuContentClick = useCallback((event, analyticsEvent) => {
+    const newValue = !isExpanded;
+    onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent, {
+      isExpanded: newValue
+    });
+    onExpansionToggle === null || onExpansionToggle === void 0 ? void 0 : onExpansionToggle(newValue);
+    setIsExpanded(newValue);
+  }, [onClick, onExpansionToggle, isExpanded, setIsExpanded]);
+  const isSelectable = typeof href !== 'undefined';
+  useScrollMenuItemIntoView({
+    elementRef: itemRef,
+    isSelected: Boolean(isSelectable && isSelected)
+  });
+
+  // Wrapped in an IconButton if the expandable menu item trigger is selectable
+  const elemBefore = isSelectable ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: iconProps => /*#__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 ? `${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/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item.compiled.css

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

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

@@ -0,0 +1,54 @@
+/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+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';
+const 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 const ExpandableMenuItem = /*#__PURE__*/forwardRef(({
+  isExpanded: isExpandedControlled,
+  isDefaultExpanded = false,
+  onExpansionToggle,
+  children,
+  dropIndicator,
+  testId
+}, forwardedRef) => {
+  const [isExpanded, setIsExpanded] = useControlled(isExpandedControlled, () => isDefaultExpanded);
+  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/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,
+  onClick: onClick
+});

package/dist/es2019/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/es2019/ui/menu-item/flyout-menu-item/flyout-body.js

@@ -0,0 +1,33 @@
+/* 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 _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 const FlyoutBody = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    testId,
+    onKeyDown,
+    onKeyUp,
+    onBlurCapture
+  } = props;
+  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/es2019/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/es2019/ui/menu-item/flyout-menu-item/flyout-footer.js

@@ -0,0 +1,24 @@
+/* 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';
+const 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 const FlyoutFooter = props => {
+  const {
+    children,
+    testId
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([footerStyles.root])
+  }, children);
+};