@atlaskit/navigation-system 0.166.0

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * __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;

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

@@ -0,0 +1,86 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type COLLAPSE_ELEM_BEFORE_TYPE } from '../menu-item-signals';
+import type { MenuItemCommonProps, MenuItemOnClick } from '../types';
+export type FlyoutMenuItemTriggerProps = MenuItemCommonProps & {
+    /**
+     * `ReactNode` to be placed visually before the `children`.
+     *
+     * 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.
+     *
+     * If you want to collapse the `elemBefore` so it takes up no space,
+     * then pass in the `COLLAPSE_ELEM_BEFORE` symbol. Keep in mind that
+     * collapsing the `elemBefore` can break visual alignment and
+     * will make it difficult for users to visually distinguish levels
+     * in the side navigation.
+     *
+     * @example
+     *
+     * ```tsx
+     * <FlyoutMenuItemTrigger elemBefore={<HomeIcon label="home" />}>Home</FlyoutMenuItemTrigger>
+     *
+     * // collapse the elemBefore
+     * <FlyoutMenuItemTrigger elemBefore={COLLAPSE_ELEM_BEFORE}>Home</FlyoutMenuItemTrigger>
+     * ```
+     */
+    elemBefore?: ReactNode | COLLAPSE_ELEM_BEFORE_TYPE;
+    /**
+     * Called when the user has clicked on the trigger.
+     *
+     * If you are controlling the open state of the flyout menu, use this to update your state.
+     */
+    onClick?: MenuItemOnClick<HTMLButtonElement>;
+    /**
+     * Indicates that the menu item is selected.
+     */
+    isSelected?: boolean;
+};
+/**
+ * __FlyoutMenuItemTrigger__
+ *
+ * The button that toggles the flyout menu.
+ */
+export declare const FlyoutMenuItemTrigger: import("react").ForwardRefExoticComponent<MenuItemCommonProps & {
+    /**
+     * `ReactNode` to be placed visually before the `children`.
+     *
+     * 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.
+     *
+     * If you want to collapse the `elemBefore` so it takes up no space,
+     * then pass in the `COLLAPSE_ELEM_BEFORE` symbol. Keep in mind that
+     * collapsing the `elemBefore` can break visual alignment and
+     * will make it difficult for users to visually distinguish levels
+     * in the side navigation.
+     *
+     * @example
+     *
+     * ```tsx
+     * <FlyoutMenuItemTrigger elemBefore={<HomeIcon label="home" />}>Home</FlyoutMenuItemTrigger>
+     *
+     * // collapse the elemBefore
+     * <FlyoutMenuItemTrigger elemBefore={COLLAPSE_ELEM_BEFORE}>Home</FlyoutMenuItemTrigger>
+     * ```
+     */
+    elemBefore?: ReactNode | COLLAPSE_ELEM_BEFORE_TYPE;
+    /**
+     * Called when the user has clicked on the trigger.
+     *
+     * If you are controlling the open state of the flyout menu, use this to update your state.
+     */
+    onClick?: MenuItemOnClick<HTMLButtonElement> | undefined;
+    /**
+     * Indicates that the menu item is selected.
+     */
+    isSelected?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,52 @@
+import React, { type ReactNode } from 'react';
+export type FlyoutMenuItemProps = {
+    /**
+     * Should contain `FlyoutMenuItemTrigger` and `FlyoutMenuItemContent`.
+     */
+    children: ReactNode;
+    /**
+     * ID that is assigned to the popup container element and used to associate the trigger with the content.
+     */
+    id?: string;
+    /**
+     * Allows to control the open state of the flyout externally.
+     *
+     * If you are controlling the state, you should update your state using:
+     * - `onClick` on the `FlyoutMenuItemTrigger`
+     * - `onClose` on the `FlyoutMenuItemContent`
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the flyout menu is open by default.
+     *
+     * You can use this to set the default expansion state without needing to entirely control the state.
+     */
+    isDefaultOpen?: boolean;
+    /**
+     * Callback that is called when the flyout menu is opened or closed.
+     *
+     * Can be used for analytics purposes when you are not controlling the state yourself.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+};
+/**
+ * __FlyoutMenuItem__
+ *
+ * Displays content in a flyout menu, triggered by a button.
+ *
+ * The top-level component that contains the trigger and content of a flyout menu.
+ *
+ * Usage example:
+ * ```tsx
+ * <FlyoutMenuItem>
+ *   <FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
+ *   <FlyoutMenuItemContent>
+ *     <MenuList>
+ *       <ButtonMenuItem>Item 1</ButtonMenuItem>
+ *       <ButtonMenuItem>Item 2</ButtonMenuItem>
+ *     </MenuList>
+ *   </FlyoutMenuItemContent>
+ * </FlyoutMenuItem>
+ * ```
+ */
+export declare const FlyoutMenuItem: React.ForwardRefExoticComponent<FlyoutMenuItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,43 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type Ref } from 'react';
+import type { RouterLinkComponentProps } from '@atlaskit/app-provider';
+import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
+export type LinkMenuItemProps<RouterLinkConfig extends Record<string, any> = never> = MenuItemLinkOrButtonCommonProps & RouterLinkComponentProps<RouterLinkConfig> & {
+    /**
+     * The native `target` attribute for the anchor element.
+     */
+    target?: HTMLAnchorElement['target'];
+    /**
+     * Whether the menu item is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Called when the user has clicked on the trigger content.
+     */
+    onClick?: MenuItemOnClick<HTMLAnchorElement>;
+};
+/**
+ * LinkMenuItem
+ *
+ * A menu item link. It should be used within a `ul`.
+ */
+export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
+    description?: string | undefined;
+    listItemRef?: Ref<HTMLDivElement> | undefined;
+} & RouterLinkComponentProps<RouterLinkConfig> & {
+    /**
+     * The native `target` attribute for the anchor element.
+     */
+    target?: string | undefined;
+    /**
+     * Whether the menu item is selected.
+     */
+    isSelected?: boolean | undefined;
+    /**
+     * Called when the user has clicked on the trigger content.
+     */
+    onClick?: MenuItemOnClick<HTMLAnchorElement> | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -0,0 +1,6 @@
+/**
+ * A symbol to collapse the `elemBefore` slot.
+ * This should be placed in the `elemBefore` prop of supported menu items.
+ */
+export declare const COLLAPSE_ELEM_BEFORE: unique symbol;
+export type COLLAPSE_ELEM_BEFORE_TYPE = typeof COLLAPSE_ELEM_BEFORE;

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

@@ -0,0 +1,42 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { MenuItemOnClick } from './types';
+/**
+ * This is being _internally_ exported so it can be used in other menu item wrapper components, like
+ * ExpandableMenuItemTrigger.
+ *
+ * This selector is used to apply hover styling on the menu item if it contains an open nested popup.
+ * It's looking for a popup trigger with `aria-hasexpanded` and `aria-haspopup` attributes. The
+ * reason for targeting the _trigger_ instead of the popup itself, is the popup might be rendered
+ * outside the menu item, e.g. if rendered in a portal.
+ *
+ * An alternative solution might involve wrapping it with a popup context and listening to the popup
+ * events through it (and applying the hover style when the popup is open). Exploring this has been
+ * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
+ */
+export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"][aria-haspopup=\"true\"])";
+/**
+ * __MenuItemBase__
+ *
+ * The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
+ *
+ * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
+ * This can be inferred from the type of the `onClick` prop.
+ */
+export declare const MenuItemBase: <T extends HTMLButtonElement | HTMLAnchorElement>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
+    description?: string | undefined;
+    listItemRef?: React.Ref<HTMLDivElement> | undefined;
+} & {
+    href?: string | Record<string, any> | undefined;
+    target?: string | undefined;
+    isDisabled?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    ariaControls?: string | undefined;
+    ariaExpanded?: boolean | undefined;
+    ariaHasPopup?: boolean | "dialog" | undefined;
+    onClick?: MenuItemOnClick<T> | undefined;
+} & React.RefAttributes<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/**
+ * __Menu list item__
+ *
+ * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
+ */
+export declare const MenuListItem: import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    testId?: string | undefined;
+    xcss?: import("@atlaskit/css").StrictXCSSProp<"display" | "scrollMarginInline", never>;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type ListProps } from '../../components/list';
+/**
+ * __Menu list__
+ *
+ * An [unordered list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) with visual styles removed,
+ * for semantically grouping list items.
+ */
+export declare const MenuList: React.ForwardRefExoticComponent<Omit<ListProps, 'xcss'> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/ui/menu-item/top-level-spacer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+/**
+ * Use this component to create visual separation between the:
+ *
+ * - global app shortcut section
+ * - 'more' button menu item
+ * - starred spaces (in Confluence)
+ *
+ * Only use this component in the top level of the menu,
+ * and exercise caution when using it in new situations.
+ *
+ * This component exists to fulfil product design requirements but has not yet
+ * been consolidated into the wider navigation system.
+ *
+ * It may not exist in the future when global apps are no longer in the side navigation.
+ */
+export declare function TopLevelSpacer(): JSX.Element;

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

@@ -0,0 +1,160 @@
+import type React from 'react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type COLLAPSE_ELEM_BEFORE_TYPE } from './menu-item-signals';
+export type MenuItemOnClick<T extends HTMLAnchorElement | HTMLButtonElement> = (event: React.MouseEvent<T>, analyticsEvent: UIAnalyticsEvent) => void;
+/**
+ * Props shared across _all_ menu item components:
+ * - MenuItemBase
+ * - LinkMenuItem
+ * - ButtonMenuItem
+ * - ExpandableMenuItemTrigger
+ * - FlyoutMenuItemTrigger
+ */
+export type MenuItemCommonProps = {
+    /**
+     * The main textual content and label of the menu item.
+     *
+     * The content will be truncated to fit into the side nav in one line.
+     *
+     * **Note:** Placing non-textual content (such as lozenges) can cause unexpected truncation behavior.
+     * Use the provided slot props such as `elemBefore` or `elemAfter` for non-textual content instead.
+     */
+    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;
+    /**
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     */
+    interactionName?: string;
+    /**
+     * Disable tooltip for menu item content. This should only be done when there is some other way
+     * to display the full menu content and description of a menu item close by (eg with another popup)
+     */
+    isContentTooltipDisabled?: boolean;
+    /**
+     * Exposes the visually complete menu item, including:
+     *
+     * - the main interactive element (exposed through `ref`)
+     * - any `elemBefore`, `elemAfter`, `actions`, or `actionsOnHover`
+     *
+     * This specifically excludes the wrapping list item,
+     * which is also exposed through either:
+     * - the `listItemRef` prop for LinkMenuItem and ButtonMenuItem
+     * - the `ref` prop for FlyoutMenuItem and ExpandableMenuItem
+     */
+    visualContentRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Whether the element is being dragged. Will apply "dragging" styles to
+     * menu item.
+     */
+    isDragging?: boolean;
+    /**
+     * Whether this menu item can be dragged. Add a drag handle to this item.
+     * You are responsible for wiring up drag and drop to the menu item.
+     *
+     *
+     * - Please be sure to make the MenuItem `ref` the `draggable` element
+     * - See our navigation drag and drop guidelines for more technical details
+     */
+    hasDragIndicator?: boolean;
+    /**
+     * A slot to render drop indicators for drag and drop operations on the menu item.
+     */
+    dropIndicator?: React.ReactNode;
+};
+/**
+ * Menu item grid slots. These are used in:
+ * - MenuItemBase
+ * - LinkMenuItem
+ * - ButtonMenuItem
+ * - ExpandableMenuItemTrigger
+ */
+export type MenuItemSlots = {
+    /**
+     * `ReactNode` to be placed visually before the `children`.
+     *
+     * 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.
+     *
+     * If you want to collapse the `elemBefore` so it takes up no space,
+     * then pass in the `COLLAPSE_ELEM_BEFORE` symbol. Keep in mind that
+     * collapsing the `elemBefore` can break visual alignment and
+     * will make it difficult for users to visually distinguish levels
+     * in the side navigation.
+     *
+     * @example
+     *
+     * ```tsx
+     * <MenuItemButton elemBefore={<HomeIcon label="home" />}>Home</MenuItemButton>
+     *
+     * // collapse the elemBefore
+     * <MenuItemButton elemBefore={COLLAPSE_ELEM_BEFORE}>Home</MenuItemButton>
+     * ```
+     */
+    elemBefore?: React.ReactNode | COLLAPSE_ELEM_BEFORE_TYPE;
+    /**
+     * `ReactNode` to be placed visually after the `children`.
+     *
+     * It is intended for additional actions (e.g. IconButtons).
+     *
+     * They will not be rendered when the menu item is disabled.
+     */
+    actions?: React.ReactNode;
+    /**
+     * `ReactNode` to be placed visually after the `children`.
+     *
+     * It is intended for static content (e.g. a `Lozenge`).
+     *
+     * If both `elemAfter` and `actionsOnHover` are provided, `elemAfter` will
+     * not be displayed when the item is hovered over or expanded. This is
+     * because the `actionsOnHover` will be displayed instead.
+     *
+     * 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.
+     */
+    elemAfter?: React.ReactNode;
+    /**
+     * `ReactNode` to be placed visually after the `children` and will
+     * only be displayed on hover or focus.
+     *
+     * It is intended for additional actions (e.g. IconButtons).
+     *
+     * This `ReactNode` will replace `elemAfter` on hover or focus.
+     *
+     * They will not be rendered when the menu item is disabled.
+     *
+     * 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?: React.ReactNode;
+};
+/**
+ * Props shared across:
+ * - MenuItemBase
+ * - LinkMenuItem
+ * - ButtonMenuItem
+ */
+export type MenuItemLinkOrButtonCommonProps = MenuItemCommonProps & MenuItemSlots & {
+    /**
+     * Additional textual content for the menu item.
+     * It is displayed underneath the main content.
+     */
+    description?: string;
+    /**
+     * Exposes the `<div role="listitem">` element that wraps the entire item.
+     *
+     * This is the root element rendered by the component.
+     */
+    listItemRef?: React.Ref<HTMLDivElement>;
+};

package/dist/types/ui/menu-item/use-scroll-menu-item-into-view.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+/**
+ * Scrolls the element into view once it is selected, and once all its ancestors (expandable
+ * parent menu items) are expanded.
+ *
+ * Once that has happened, we don't want to scroll it into view again until it has been unselected.
+ * This is to prevent the menu item from being scrolled into view again if the user collapses a
+ * parent and then expands it again, without changing what menu item is selected.
+ */
+export declare function useScrollMenuItemIntoView({ elementRef, isSelected, }: {
+    elementRef: React.RefObject<HTMLDivElement>;
+    isSelected: boolean;
+}): void;

package/dist/types/ui/menu-section/divider.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * __Divider__
+ *
+ * A divider for use between menu sections.
+ */
+export declare const Divider: () => JSX.Element;

package/dist/types/ui/menu-section/menu-section-context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Context for the current menu section. It holds a unique ID for the section, used for associating the section heading
+ * as an accessible label for the group.
+ */
+export declare const MenuSectionContext: import("react").Context<string | null>;
+export declare const useMenuSectionContext: () => string;

package/dist/types/ui/menu-section/menu-section-heading.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * __MenuSectionHeading__
+ *
+ * The label for the menu section group.
+ */
+export declare const MenuSectionHeading: ({ children, }: {
+    /**
+     * The text of the heading.
+     */
+    children: ReactNode;
+}) => JSX.Element;

package/dist/types/ui/menu-section/menu-section.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+type MenuSectionProps = {
+    /**
+     * The contents of the menu section.
+     * Should contain a `MenuSectionHeading`, and a `Divider` if appropriate.
+     */
+    children?: ReactNode;
+    /**
+     * Wraps the `MenuSection` in a `MenuListItem` so that it can validly be the child of a `MenuList`
+     *
+     * In the future this will become the default behavior, and the prop will be removed.
+     */
+    isMenuListItem?: boolean;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     *
+     * It is applied to the outer rendered element.
+     *
+     * Right now, it is only applied when `isMenuListItem:true`
+     */
+    testId?: string;
+};
+/**
+ * __MenuSection__
+ *
+ * A composable component for grouping menu items, along with a heading (`MenuSectionHeading`) and a divider (`Divider`).
+ *
+ * Usage example:
+ * ```tsx
+ * <MenuSection>
+ *   <MenuSectionHeading>Section heading</MenuSectionHeading>
+ *   <MenuList>
+ *     <MenuItem>Item 1</MenuItem>
+ *     <MenuItem>Item 2</MenuItem>
+ *   </MenuList>
+ *   <Divider />
+ * </MenuSection>
+ * ```
+ */
+export declare const MenuSection: ({ children, testId, isMenuListItem, }: MenuSectionProps) => JSX.Element;
+export {};

package/dist/types/ui/page-layout/aside.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import type { StrictXCSSProp } from '@atlaskit/css';
+import type { CommonSlotProps } from './types';
+/**
+ * The Aside is rendered to the right (inline end) of the Main area.
+ *
+ * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
+ */
+export declare function Aside({ children, xcss, isFixed: isFixedProp, defaultWidth, label, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
+    /**
+     * The content of the layout area.
+     */
+    children: React.ReactNode;
+    /**
+     * The accessible name of the slot, announced by screen readers.
+     */
+    label?: string;
+    /**
+     * @deprecated
+     *
+     * Support for `isFixed={false}` is being removed and `isFixed={true}` will be the only supported behavior.
+     *
+     * This change is being rolled out behind the `platform_dst_nav4_disable_is_fixed_prop` feature gate. After rollout this prop will be removed.
+     *
+     * Reach out to #help-design-system if you are relying on the `isFixed={false}` behavior.
+     *
+     * ---
+     *
+     * Whether the layout area should be fixed _on large viewports_.
+     *
+     * When fixed, the element will have its own scroll container - it will not use the body scroll.
+     *
+     * **Important:** On small viewports, the element will always use body scroll, to make it easier to scroll the page when
+     * the content is tall.
+     *
+     * When not fixed, the element will use the body scroll.
+     */
+    isFixed?: boolean;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
+    /**
+     * The default width of the layout area.
+     *
+     * It should be between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
+     */
+    defaultWidth?: number;
+}): JSX.Element;

package/dist/types/ui/page-layout/banner.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { StrictXCSSProp } from '@atlaskit/css';
+import type { CommonSlotProps } from './types';
+/**
+ * The banner layout area. It will always be displayed at the top of the screen.
+ *
+ * Should be used to render a `Banner` component from `@atlaskit/banner`.
+ */
+export declare function Banner({ children, xcss, height, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
+    /**
+     * The content of the layout area.
+     * Should include a Banner component from `@atlaskit/banner`.
+     */
+    children: React.ReactNode;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
+    /**
+     * The height of the layout area.
+     */
+    height?: number;
+}): JSX.Element;

package/dist/types/ui/page-layout/constants.d.ts

@@ -0,0 +1,40 @@
+/**
+ * These variables are shared across the different page layout slots.
+ * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
+ * We have chosen to ignore this rule to prevent duplicating them across the different slots, and to provide a high level view of them and how they relate.
+ */
+export declare const sideNavVar = "--n_sNvw";
+export declare const asideVar = "--n_asDw";
+export declare const panelVar = "--n_pnlW";
+export declare const bannerMountedVar = "--n_bnrM";
+export declare const topNavMountedVar = "--n_tNvM";
+/**
+ * Captures the current width of the side navigation, at all times, including during resizing.
+ *
+ * The standard `sideNavVar` only captures the 'committed' width, not the resizing width.
+ */
+export declare const sideNavLiveWidthVar = "--n_sNvlw";
+export declare const sideNavPanelSplitterId: unique symbol;
+export declare const asidePanelSplitterId: unique symbol;
+export declare const panelPanelSplitterId: unique symbol;
+export declare const contentHeightWhenFixed = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
+export declare const contentInsetBlockStart = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
+export declare const UNSAFE_topNavVar = "--topNavigationHeight";
+export declare const UNSAFE_bannerVar = "--bannerHeight";
+export declare const UNSAFE_sideNavLayoutVar = "--leftSidebarWidth";
+export declare const UNSAFE_asideLayoutVar = "--rightSidebarWidth";
+export declare const UNSAFE_panelLayoutVar = "--rightPanelWidth";
+export declare const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = "calc(var(--bannerHeight, 0px) + var(--topNavigationHeight, 0px))";
+export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "var(--leftSidebarWidth, 0px)";
+export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--rightSidebarWidth, 0px) + var(--rightPanelWidth, 0px))";
+/**
+ * We define the z-indexes here so each page slot can be locally layered against each other.
+ * For globally defined values such as flag, modal, etc, we can continue to
+ * rely on accessing them through global means.
+ */
+export declare const localSlotLayers: {
+    topBar: number;
+    banner: number;
+    sideNav: number;
+    panelSmallViewports: number;
+};

package/dist/types/ui/page-layout/hoist-slot-sizes-context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * Context for whether the slot sizes are to be hoisted to the document root.
+ * It is set by consumers using a prop on the page layout `Root` element.
+ */
+export declare const DangerouslyHoistSlotSizes: import("react").Context<boolean>;