@atlaskit/side-nav-items 1.0.0

package/dist/types/entry-points/expandable-menu-item.d.ts

@@ -0,0 +1,4 @@
+export { ExpandableMenuItem, type ExpandableMenuItemProps, } from '../ui/menu-item/expandable-menu-item/expandable-menu-item';
+export { ExpandableMenuItemTrigger, type ExpandableMenuItemTriggerProps, } from '../ui/menu-item/expandable-menu-item/expandable-menu-item-trigger';
+export { ExpandableMenuItemContent, type ExpandableMenuItemContentProps, } from '../ui/menu-item/expandable-menu-item/expandable-menu-item-content';
+export { useIsExpanded } from '../ui/menu-item/expandable-menu-item/expandable-menu-item-context';

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

@@ -0,0 +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 { 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/entry-points/link-menu-item.d.ts

@@ -0,0 +1,3 @@
+export { LinkMenuItem, type LinkMenuItemProps } from '../ui/menu-item/link-menu-item';
+export { COLLAPSE_ELEM_BEFORE } from '../ui/menu-item/menu-item-signals';
+export type { MenuItemOnClick } from '../ui/menu-item/types';

package/dist/types/entry-points/menu-list-item.d.ts

@@ -0,0 +1 @@
+export { MenuListItem } from '../ui/menu-item/menu-list-item';

package/dist/types/entry-points/menu-list.d.ts

@@ -0,0 +1 @@
+export { MenuList } from '../ui/menu-item/menu-list';

package/dist/types/entry-points/menu-section.d.ts

@@ -0,0 +1,3 @@
+export { MenuSection } from '../ui/menu-section/menu-section';
+export { MenuSectionHeading } from '../ui/menu-section/menu-section-heading';
+export { Divider } from '../ui/menu-section/divider';

package/dist/types/entry-points/top-level-spacer.d.ts

@@ -0,0 +1 @@
+export { TopLevelSpacer } from '../ui/menu-item/top-level-spacer';

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
+export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
+    /**
+     * Identifies the popup element that this element controls when it is used as a popup trigger.
+     * Should match the `id` of the popup content for screen readers to understand the relationship.
+     */
+    'aria-controls'?: string;
+    /**
+     * Announces to assistive technology whether the popup is currently open or closed,
+     * when this element is used as a popup trigger.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Informs assistive technology that this element triggers a popup.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
+    /**
+     * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
+     * props are not used when `isDisabled` is true due to ergonomic type issues with `boolean`
+     * types (as oppposed to literal `true` or `false` types), e.g. if a conditional boolean
+     * variable is passed to `isDisabled`.
+     */
+    /**
+     * Whether the menu item is disabled.
+     *
+     * When disabled, content in the `actions` and `actionsOnHover` props will not be rendered.
+     *
+     * The menu item will not be interactive and will not respond to hover or focus.
+     */
+    isDisabled?: boolean;
+    /**
+     * Called when the user has clicked on the trigger content.
+     */
+    onClick?: MenuItemOnClick<HTMLButtonElement>;
+};
+/**
+ * __ButtonMenuItem__
+ *
+ * A menu item button. It should be used within a `ul`, as it renders a list item.
+ */
+export declare const ButtonMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonMenuItemProps> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/ui/menu-item/constants.d.ts

@@ -0,0 +1,15 @@
+/**
+ * _Internally_ shared value for the menu item indentation. Used in:
+ * - Expandable menu item content, to add padding for each expandable level
+ * - The base menu item, to set the negative inset to extend the clickable area of nested menu items
+ * to the root level menu items.
+ *
+ * Internal to the package only. Should not be exported from the package.
+ *
+ * Note: We're unable to use a token() call here, as Compiled complains about function calls in imported
+ * values - it requires statically defined values only.
+ *
+ * @private
+ * @internal
+ */
+export declare const expandableMenuItemIndentation = "12px";

package/dist/types/ui/menu-item/container-avatar.d.ts

@@ -0,0 +1,18 @@
+export type ContainerAvatarProps = {
+    /**
+     * The source of the avatar image.
+     */
+    src: string;
+};
+/**
+ * __Container avatar__
+ *
+ * This component has been introduced specifically for the Nav4 sidebar because the existing Avatar component
+ * did not offer the correct sizes to align with the designs. It was necessary to create a new component rather than
+ * using the ADS image component because that did not allow the ability to set the border and radius and the desired
+ * presentation was not achievable through nesting within another styled component. At some point this component maybe
+ * removed if the Avatar component is updated to allow for the desired presentation.
+ *
+ * A container avatar to be used in sidebar navigation items.
+ */
+export declare const ContainerAvatar: ({ src }: ContainerAvatarProps) => JSX.Element;

package/dist/types/ui/menu-item/drag-and-drop/drag-preview.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * A drag preview for sidebar menu items.
+ *
+ * The limited API corresponds with the limited amount of information we
+ * want to show in drag previews.
+ *
+ * If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
+ * There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
+ * need to maintain vertical side navigation vertical alignment in the drag preview.
+ *
+ * Please ensure the drag preview is pushed away from the users pointer
+ * (with `pointerOutsideOfPreview()` from Pragmatic drag and drop) by our
+ * standard amount (`{x: token('space.200'), y: token('space.100')`)
+ */
+export declare function DragPreview({ elemBefore, children, }: {
+    children: ReactNode;
+    elemBefore?: ReactNode;
+}): JSX.Element;

package/dist/types/ui/menu-item/drag-and-drop/drop-indicator.d.ts

@@ -0,0 +1,6 @@
+/**
+ * These outputs where originally created within nav4, but have since moved out into
+ * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
+ * the pdnd outputs
+ */
+export { type Instruction, type Operation, DropIndicator, } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/list-item';

package/dist/types/ui/menu-item/drag-and-drop/group-drop-indicator.d.ts

@@ -0,0 +1,6 @@
+/**
+ * These outputs where originally created within nav4, but have since moved out into
+ * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
+ * the pdnd outputs
+ */
+export { GroupDropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/group';

package/dist/types/ui/menu-item/drag-and-drop/hitbox.d.ts

@@ -0,0 +1,6 @@
+/**
+ * These outputs where originally created within nav4, but have since moved out into
+ * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
+ * the pdnd outputs
+ */
+export { type Availability, type Operation, type Instruction, attachInstruction, extractInstruction, } from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';

package/dist/types/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { attachInstruction } from './hitbox';
+type TInternalState = {
+    type: 'idle';
+} | {
+    container: HTMLElement;
+    type: 'preview';
+    ui: {
+        content: ReactNode;
+        elemBefore?: ReactNode;
+    };
+} | {
+    type: 'dragging';
+} | {
+    instruction: Instruction | null;
+    type: 'is-over';
+};
+export type TMenuItemDragAndDropState = Exclude<TInternalState, {
+    type: 'preview';
+}> | {
+    type: 'preview';
+};
+type TPDNDDraggableArgs = Required<Parameters<typeof draggable>[0]>;
+type TPDNDDropTargetArgs = Required<Parameters<typeof dropTargetForElements>[0]>;
+type TDraggableArgs = {
+    canDrag?: TPDNDDraggableArgs['canDrag'];
+    getDragPreviewPieces: (args: Parameters<TPDNDDraggableArgs['getInitialData']>[0]) => {
+        content: ReactNode;
+        elemBefore?: ReactNode;
+    };
+    getInitialData: (args: Parameters<TPDNDDraggableArgs['getInitialData']>[0]) => Record<string | symbol, unknown>;
+};
+type TDropTargetArgs = {
+    canDrop: TPDNDDropTargetArgs['canDrop'];
+    getData: TPDNDDropTargetArgs['getData'];
+    getOperations: (args: Parameters<TPDNDDropTargetArgs['getData']>[0]) => Parameters<typeof attachInstruction>[1]['operations'];
+};
+/**
+ * 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 declare function useMenuItemDragAndDrop({ draggable: draggableArgs, dropTarget: dropTargetArgs, }: {
+    draggable?: TDraggableArgs;
+    dropTarget?: TDropTargetArgs;
+}): {
+    state: TMenuItemDragAndDropState;
+    draggableButtonRef: import("react").MutableRefObject<HTMLButtonElement | null>;
+    dropTargetRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    draggableAnchorRef: import("react").MutableRefObject<HTMLAnchorElement | null>;
+    dragPreview: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null;
+    dropIndicator: false | JSX.Element | null;
+};
+export {};

package/dist/types/ui/menu-item/drag-handle/drag-handle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export default function DragHandle(): JSX.Element;

package/dist/types/ui/menu-item/drag-handle/lazy-drag-handle.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Exposing this for use by custom components
+ */
+export declare const LazyDragHandle: import("react").LazyExoticComponent<typeof import("./drag-handle").default>;

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-content.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export type ExpandableMenuItemContentProps = {
+    /**
+     * The contents of the expandable menu item.
+     */
+    children: ReactNode;
+};
+/**
+ * __ExpandableMenuItemContent__
+ *
+ * The expandable and collapsable section of the expandable menu item. It should contain the nested menu items.
+ */
+export declare const ExpandableMenuItemContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<ExpandableMenuItemContentProps> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,36 @@
+type onExpansionToggle = (isExpanded: boolean) => void;
+/**
+ * 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 declare const AreAllAncestorsExpandedContext: import("react").Context<boolean | null>;
+/**
+ * A context for storing the isExpanded value of the ExpandableMenuItem.
+ */
+export declare const IsExpandedContext: import("react").Context<boolean | null>;
+/**
+ * A context for storing a function that sets isExpanded value of the ExpandableMenuItem.
+ */
+export declare const SetIsExpandedContext: import("react").Context<((value: boolean) => void) | null>;
+/**
+ * A context for storing a function that triggers when isExpanded value of the ExpandableMenuItem is changed.
+ */
+export declare const OnExpansionToggleContext: import("react").Context<onExpansionToggle | null>;
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+export declare const LevelContext: import("react").Context<number>;
+export declare const useIsExpanded: () => boolean;
+export declare const useSetIsExpanded: () => ((value: boolean) => void);
+export declare const useOnExpansionToggle: () => onExpansionToggle | null;
+export declare const useLevel: () => number;
+/**
+ * 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 declare const useAreAllAncestorsExpanded: () => boolean;
+export {};

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

@@ -0,0 +1,4 @@
+/**
+ * A context for storing the level value of the ExpandableMenuItem.
+ */
+export declare const ExpandableMenuItemLevelContext: import("react").Context<number>;

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { type ReactNode } from 'react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { RouterLinkComponentProps } from '@atlaskit/app-provider';
+import type { MenuItemCommonProps, MenuItemSlots } from '../types';
+export type ExpandableMenuItemTriggerProps<RouterLinkConfig extends Record<string, any> = never> = MenuItemCommonProps & Omit<RouterLinkComponentProps<RouterLinkConfig>, 'href'> & Omit<MenuItemSlots, 'actionsOnHover' | 'elemBefore'> & {
+    /**
+     * `ReactNode` to be placed visually after the `children` and will
+     * only be displayed on hover or focus, or when the expandable menu item
+     * is expanded.
+     *
+     * It is intended for additional actions (e.g. IconButtons).
+     *
+     * This `ReactNode` will replace `elemAfter` on hover/focus or when expanded.
+     *
+     * This `ReactNode` will be rendered visually on top of the main
+     * interactive element for the menu item. If this element does not
+     * contain an interactive element (`button` or `a`) then `pointer-events`
+     * will be set to `none` on this slot so that users can click through
+     * this element onto the main interactive element of the menu item.
+     */
+    actionsOnHover?: ReactNode;
+    /**
+     * The element to display before the content of the menu item.
+     *
+     * By default, a chevron icon will be displayed in this slot. If a custom `elemBefore`
+     * is provided, the custom element will replaced by the chevron icon while the user is
+     * hovering or focused on the item.
+     *
+     * `ExpandableMenuItemTrigger` does not respect `COLLAPSE_ELEM_BEFORE` as a chevron
+     * will always be displayed.
+     */
+    elemBefore?: ReactNode;
+    /**
+     * If provided, the chevron icon (expand/collapse symbol) will be rendered within a separate
+     * icon button element. Clicking on this icon button will not trigger the `onClick` event. It
+     * will only expand or collapse the expandable.
+     *
+     * If a `href` is not provided, the chevron icon is rendered as part of the element.
+     */
+    href?: RouterLinkComponentProps<RouterLinkConfig>['href'];
+    /**
+     * Called when the user has clicked on the trigger content.
+     *
+     * __It is not called when the user clicks on the expand/collapse chevron icon button.__
+     * This is to differentiate a click that will only "expand" the menu item _without selecting it_,
+     * from a click to expand _and_ "select" or navigate to the menu item.
+     *
+     * If you need a callback for when the user expands or collapses the expandable, use
+     * `onExpansionToggle` on the `ExpandableMenuItem` component instead.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent, analyticsAttributes: {
+        isExpanded: boolean;
+    }) => void;
+};
+/**
+ * __ExpandableMenuItemTrigger__
+ *
+ * The trigger component for an `ExpandableMenuItem`. Interacting with it will expand or collapse the expandable.
+ */
+export declare const ExpandableMenuItemTrigger: <RouterLinkConfig extends Record<string, any> = never>(props: ExpandableMenuItemTriggerProps<RouterLinkConfig> & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>) => React.ReactElement | null;

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export type ExpandableMenuItemProps = {
+    /**
+     * Should contain `ExpandableMenuItemTrigger` and `ExpandableMenuItemContent`.
+     */
+    children: ReactNode;
+    /**
+     * A slot to render a drop indicator on an entire menu item (trigger + content).
+     *
+     * This should only be used when the **whole `ExpandableMenuItem` is a drop target**,
+     * and not when only the `ExpandableMenuItemTrigger` is a drop target.
+     */
+    dropIndicator?: ReactNode;
+    /**
+     * The default expanded state of the menu item.
+     *
+     * You can use this to set the default expanded state without needing to entirely control the state.
+     */
+    isDefaultExpanded?: boolean;
+    /**
+     * The controlled expanded state of the menu item. Allows you to control the expanded state of
+     * the menu item externally.
+     *
+     * If you are controlling the state, you should update your state using `onExpansionToggle`.
+     */
+    isExpanded?: boolean;
+    /**
+     * Called when the user has interacted with the menu item to expand or collapse it.
+     *
+     * It is not called when the `isExpanded` controlled state prop is changed.
+     *
+     * If you are controlling the expanded state, you should use this callback to update your state.
+     */
+    onExpansionToggle?: (isExpanded: boolean) => void;
+    /**
+     * testId for MenuListItem
+     */
+    testId?: string;
+};
+/**
+ * __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 declare const ExpandableMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ExpandableMenuItemProps> & React.RefAttributes<HTMLDivElement>>;

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?: (event: React.MouseEvent<HTMLButtonElement>) => 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,38 @@
+/**
+ * @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;
+    /**
+     * Handler for blur capture events.
+     */
+    onBlurCapture?: React.FocusEventHandler<HTMLObjectElement>;
+    /**
+     * Handler for key down events.
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLObjectElement>;
+    /**
+     * Handler for key up events.
+     */
+    onKeyUp?: React.KeyboardEventHandler<HTMLObjectElement>;
+    /**
+     * 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: React.ForwardRefExoticComponent<FlyoutBodyProps & React.RefAttributes<HTMLDivElement>>;

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;
+    /**
+     * 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;
+    /**
+     * 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;
+}
+/**
+ * __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-content.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export type FlyoutCloseSource = 'close-button' | 'escape-key' | 'outside-click' | 'other';
+export type FlyoutMenuItemContentProps = {
+    /**
+     * Whether the flyout menu should be focused when opened.
+     * @default true
+     */
+    autoFocus?: boolean;
+    /**
+     * The contents of the flyout menu.
+     */
+    children: React.ReactNode;
+    /**
+     * A `testId` that is applied to the container element as the `data-testid` attribute.
+     */
+    containerTestId?: string;
+    /**
+     * The maximum height of the flyout menu in pixels.
+     *
+     * If not provided, defaults to 760px.
+     */
+    maxHeight?: number;
+    /**
+     * Called when the flyout menu is closed.
+     *
+     * If you are controlling the open state of the flyout menu, use this to update your state.
+     */
+    onClose?: () => void;
+};
+/**
+ * __FlyoutMenuItemContent__
+ *
+ * The content that appears when the flyout menu is open.
+ */
+export declare const FlyoutMenuItemContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<FlyoutMenuItemContentProps> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,38 @@
+import type { FlyoutCloseSource } from './flyout-menu-item-content';
+/**
+ * __Is open context__
+ *
+ * A context for storing the isOpen value of the FlyoutMenuItem.
+ */
+export declare const IsOpenContext: import("react").Context<boolean>;
+/**
+ * __Set is open context__
+ *
+ * A context for storing a function that sets isOpen value of the FlyoutMenuItem.
+ */
+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 a ref to the onClose handler with source information.This
+ * is used by FlyoutMenuItemContent, FlyoutMenuItemTrigger and FlyoutHeader to store
+ * the on close function and source information for closing the flyout menu.
+ */
+export declare const OnCloseContext: import("react").Context<import("react").MutableRefObject<((event: Event | React.MouseEvent<HTMLButtonElement> | KeyboardEvent | MouseEvent | null, source?: FlyoutCloseSource) => void) | null>>;
+/**
+ * __Title id context__
+ *
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+export declare const TitleIdContext: import("react").Context<string | undefined>;
+export declare const useTitleId: () => string | undefined;
+/**
+ * __Title id provider__
+ *
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export declare const TitleIdContextProvider: import("react").Provider<string | undefined>;