@atlaskit/navigation-system 0.166.0

package/dist/types/ui/page-layout/hoist-utils.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type MediaQuery } from '@atlaskit/primitives/responsive';
+/**
+ * This is not ideal and shouldn't be used by anything outside of `<Banner>` and `<TopNav>`.
+ *
+ * This makes the other page layout elements aware that the banner and top bar have been mounted, provides them
+ * with their heights. This is needed to power the stick points of page layout elements like SideNav and Panel.
+ *
+ * We should clean this up once we have a better solution, such as moving the size props for banner and top bar into `Root`.
+ */
+export declare const HoistCssVarToLocalGrid: ({ variableName, value, }: {
+    variableName: string;
+    value: number;
+}) => React.JSX.Element;
+/**
+ * Hoists CSS variables to the document root. This is support the legacy edge case of monolith pages being injected as a
+ * sibling to the page layout, as opposed to within the `Main` slot.
+ */
+export declare const DangerouslyHoistCssVarToDocumentRoot: ({ variableName, value, mediaQuery, responsiveValue, }: {
+    variableName: string;
+    value: string | number;
+    mediaQuery?: MediaQuery | undefined;
+    responsiveValue?: string | number | undefined;
+}) => React.JSX.Element;

package/dist/types/ui/page-layout/id-utils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Returns a unique ID for use by layout elements and skip links.
+ * You can use this for custom skip links.
+ */
+export declare function useSkipLinkId(): string;
+/**
+ * Returns an ID for use by the layout element and skip links.
+ *
+ * If the consumer has already provided an ID, it will be used instead.
+ * Otherwise, a unique ID will be returned.
+ */
+export declare function useLayoutId({ providedId, }?: {
+    /**
+     * The ID provided by the consumer. If provided, it will be used instead.
+     */
+    providedId?: string;
+}): string;

package/dist/types/ui/page-layout/main/main-sticky-context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Context for whether the main slot is sticky.
+ */
+export declare const MainStickyContext: import("react").Context<boolean>;

package/dist/types/ui/page-layout/main/main-sticky-header.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { StrictXCSSProp } from '@atlaskit/css';
+/**
+ * The sticky header of the main layout area.
+ */
+export declare function MainStickyHeader({ children, xcss, testId, }: {
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * The content of the layout area.
+     */
+    children?: React.ReactNode;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
+}): JSX.Element;

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import type { StrictXCSSProp } from '@atlaskit/css';
+import type { CommonSlotProps } from '../types';
+/**
+ * Use the Main area for the main page content. It has a fluid width and will expand to fill available space.
+ */
+export declare function Main({ children, isFixed: isFixedProp, xcss, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
+    /**
+     * The content of the layout area.
+     * This is where you should put the main content of your page.
+     */
+    children: React.ReactNode;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
+    /**
+     * @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;
+}): JSX.Element;

package/dist/types/ui/page-layout/panel-splitter/context.d.ts

@@ -0,0 +1,54 @@
+import { type MutableRefObject } from 'react';
+import { type ResizeBounds } from './types';
+export type PanelSplitterContextType = {
+    /**
+     * An optional identifier for the panel splitter, which is attached to the `pragmatic-drag-and-drop` drag data.
+     */
+    panelId?: symbol;
+    /**
+     * A ref to the page layout element that will be resized by the splitter.
+     */
+    panelRef: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * The "saved" width of the panel element. Used to calculate the new width of the panel when dragging.
+     */
+    panelWidth: number;
+    /**
+     * Called when the user finishes resizing the panel. It should update the width of the panel element.
+     */
+    onCompleteResize: (newWidth: number) => void;
+    /**
+     * The minimum and maximum bounds for resizing the panel.
+     * The bounds can be provided as `px` or `vw` values.
+     */
+    getResizeBounds: () => ResizeBounds;
+    /**
+     * A ref to the portal element where the panel splitter will be rendered.
+     * Internally set by the PanelSplitterProvider.
+     * Used to render the panel splitter outside of an overflow container.
+     */
+    portalRef: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * The CSS variable that will be set on the panel element to temporarily resize it while dragging the splitter
+     */
+    resizingCssVar: string;
+    /**
+     * The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
+     *
+     * Defaults to `start`.
+     *
+     * For left-to-right languages, `start` is the left side and `end` is the right side.
+     */
+    position: 'start' | 'end';
+    /**
+     * Whether the panel splitter is enabled and should be rendered.
+     *
+     * Defaults to `true`.
+     * If `false`, the panel splitter will not be rendered.
+     */
+    isEnabled?: boolean;
+};
+/**
+ * Context for the panel splitter. Only internally exported.
+ */
+export declare const PanelSplitterContext: import("react").Context<PanelSplitterContextType | null>;

package/dist/types/ui/page-layout/panel-splitter/convert-resize-bound-to-pixels.d.ts

@@ -0,0 +1,7 @@
+import type { ResizeBound } from './types';
+/**
+ * Resize bounds can either be provided in `vw` or `px` units. This function will convert the value into pixels.
+ *
+ * It accesses the `window` object to get the viewport width, so should only be used in the browser.
+ */
+export declare function convertResizeBoundToPixels(resizeBound: ResizeBound): number;

package/dist/types/ui/page-layout/panel-splitter/get-percentage-within-pixel-bounds.d.ts

@@ -0,0 +1,18 @@
+import type { PixelResizeBounds } from './types';
+/**
+ * Returns the percentage of the current width within the resize bounds.
+ * It expects the resize bounds to already have been converted into numeric values, in pixel units.
+ *
+ * The return value is clamped between 0 and 100. This is to prevent the screen reader text (aria-valuetext)
+ * from announcing an out-of-bounds percentage when the user is resizing the viewport.
+ *
+ * Examples:
+ * - if the current width is 200px, and the resize bounds are 100px and 300px,
+ * the percentage is 50%, and the function will return the number 50.
+ * - if the current value is 400, and the resize bounds are 100 and 300, the
+ * "percentage" is 100% and the function will return the number 100.
+ */
+export declare function getPercentageWithinPixelBounds({ currentWidth, resizeBounds, }: {
+    currentWidth: number;
+    resizeBounds: PixelResizeBounds;
+}): number;

package/dist/types/ui/page-layout/panel-splitter/get-width.d.ts

@@ -0,0 +1,11 @@
+import type { DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare const getWidthFromDragLocation: ({ initialWidth, location, direction, position, }: {
+    initialWidth: number;
+    location: DragLocationHistory;
+    direction: 'ltr' | 'rtl';
+    position: 'start' | 'end';
+}) => number;
+/**
+ * Returns the computed width of an element in pixels.
+ */
+export declare const getPixelWidth: (element: HTMLElement) => number;

package/dist/types/ui/page-layout/panel-splitter/keyboard-resize-manager.d.ts

@@ -0,0 +1,15 @@
+import type { ResizeEndCallback, ResizeStartCallback } from './types';
+/**
+ * Returns an instance of a state machine manager for keyboard resizing.
+ * It handles calling the `onResizeStart` and `onResizeEnd` callbacks appropriately, as the user "starts" and "finishes" resizing
+ * using the keyboard, to prevent calling them on every keydown.
+ *
+ * - `onResizeStart` is called immediately when the user starts resizing
+ * - `onResizeEnd` is called after a wait time when the user stops resizing.
+ */
+export declare function createKeyboardResizeManager({ onResizeStart, onResizeEnd, }: {
+    onResizeStart: ResizeStartCallback;
+    onResizeEnd: ResizeEndCallback;
+}): {
+    onResize: ({ initialWidth, finalWidth }: Parameters<ResizeEndCallback>[0]) => void;
+};

package/dist/types/ui/page-layout/panel-splitter/panel-splitter.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import type { ResizeBounds, ResizeEndCallback, ResizeStartCallback } from './types';
+type PanelSplitterProps = {
+    /**
+     * The accessible label for the panel splitter. It is visually hidden, but is required for accessibility.
+     */
+    label: React.ReactNode;
+    /**
+     * Called when the user begins resizing the panel.
+     * Intended for analytics.
+     */
+    onResizeStart?: ResizeStartCallback;
+    /**
+     * Called when the user finishes resizing the panel.
+     */
+    onResizeEnd?: ResizeEndCallback;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+};
+type PanelSplitterDragData = {
+    panelId: string | symbol | undefined;
+    initialWidth: number;
+    resizingWidth: string;
+    resizeBounds: ResizeBounds;
+};
+export declare function isPanelSplitterDragData(data: Record<string | symbol, unknown>): data is PanelSplitterDragData;
+/**
+ * _PanelSplitter_
+ *
+ * A component that allows the user to resize a layout area.
+ * It can be used within layout areas like `SideNav`, `Panel`, and `Aside`. The layout area component should
+ * provide the context for it using `<PanelSplitterProvider>`.
+ *
+ * Example usage in products:
+ * ```tsx
+ * <SideNav>
+ *   {/* other side nav content *}
+ *   <PanelSplitter label="Resize Side Nav" />
+ * </SideNav>
+ * ```
+ */
+export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, }: PanelSplitterProps) => JSX.Element;
+export {};

package/dist/types/ui/page-layout/panel-splitter/provider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type PanelSplitterContextType } from './context';
+export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalRef' | 'position'> & {
+    children: React.ReactNode;
+    position?: 'start' | 'end';
+};
+/**
+ * Provides the context required for the panel splitter to work within a page layout slot.
+ *
+ * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
+ */
+export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, position, isEnabled, children, }: PanelSplitterProviderProps) => React.JSX.Element;

package/dist/types/ui/page-layout/panel-splitter/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Called when the user begins resizing the panel.
+ * Intended for analytics.
+ */
+export type ResizeStartCallback = ({ initialWidth }: {
+    initialWidth: number;
+}) => void;
+/**
+ * Called when the user finishes resizing the panel.
+ */
+export type ResizeEndCallback = ({ initialWidth, finalWidth, }: {
+    initialWidth: number;
+    finalWidth: number;
+}) => void;
+export type ResizeBound = `${number}px` | `${number}vw`;
+export type ResizeBounds = {
+    min: ResizeBound;
+    max: ResizeBound;
+};
+export type PixelResizeBounds = {
+    min: number;
+    max: number;
+};

package/dist/types/ui/page-layout/panel-splitter/use-text-direction.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the direction of the element's text.
+ *
+ * Because any element within the hierarchy can have the [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
+ * set, we can't simply check the attribute on one element, the root document element or the current element's parent.
+ *
+ * Instead, we are using the [CSS `direction` property](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) to determine the
+ * current computed direction value.
+ */
+export declare const useTextDirection: (element: HTMLElement) => 'ltr' | 'rtl';

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import type { StrictXCSSProp } from '@atlaskit/css';
+import type { CommonSlotProps } from './types';
+/**
+ * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
+ *
+ * On small viewports (below 64rem, or 1024px), the Panel slot will become an overlay.
+ *
+ * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
+ */
+export declare function Panel({ children, defaultWidth, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, }: CommonSlotProps & {
+    /**
+     * The content of the layout area.
+     */
+    children: React.ReactNode;
+    /**
+     * The accessible name of the slot, announced by screen readers.
+     */
+    label?: string;
+    /**
+     * 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.
+     *
+     * When `platform_design_system_nav4_preview_panel_support` is enabled, it is used as the minimum resizing width.
+     * If the `defaultWidth` is greater then `400px` then `400px` will be used as the minimum resizing width instead.
+     */
+    defaultWidth?: number;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
+    /**
+     * Whether or not the slot has its own border. On small screens this becomes a shadow.
+     *
+     * Defaults to the `platform_design_system_nav4_panel_default_border` gate.
+     * This will be `false` while we update product usage, eventually becoming `true`.
+     * Then this prop will be removed.
+     */
+    hasBorder?: boolean;
+}): JSX.Element;

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

@@ -0,0 +1,38 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { StrictXCSSProp } from '@atlaskit/css';
+export declare const gridRootId = "unsafe-design-system-page-layout-root";
+/**
+ * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
+ * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
+ */
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, }: {
+    /**
+     * For rendering the layout areas, e.g. TopNav, SideNav, Main.
+     * They should be rendered as immediate children.
+     */
+    children: React.ReactNode;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
+    /**
+     * **Note: This prop is only supported for legacy purposes in Jira and Confluence,
+     * and is subject to be removed without notice in the future.**
+     *
+     * Whether to dangerously hoist the layout slot sizes to the document root element,
+     * to support some legacy use cases. Do not use this prop for new code.
+     */
+    UNSAFE_dangerouslyHoistSlotSizes?: boolean;
+    /**
+     * The header text for the skip links container element.
+     */
+    skipLinksLabel?: string;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}): JSX.Element;

package/dist/types/ui/page-layout/side-nav/element-context.d.ts

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from 'react';
+export declare function SideNavElementProvider({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
+/**
+ * Returns a ref for the side navigation that is accessible to other Page Layout slots.
+ *
+ * Used by the Panel to measure the SideNav when it is calculating its resize bounds.
+ */
+export declare function useSideNavRef(): React.RefObject<HTMLDivElement>;

package/dist/types/ui/page-layout/side-nav/flyout-close-delay-ms.d.ts

@@ -0,0 +1,5 @@
+/**
+ * How long the flyout should remain open after the users
+ * pointer has left the side nav flyout
+ */
+export declare const sideNavFlyoutCloseDelayMs = 400;

package/dist/types/ui/page-layout/side-nav/side-nav-content.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * The main content of the side nav, filling up the middle section. It acts as a scroll container.
+ *
+ * It will grow to take up the available space in the side nav — this is used to push the footer to the
+ * bottom of the side nav.
+ */
+export declare const SideNavContent: import("react").ForwardRefExoticComponent<SideNavContentProps & import("react").RefAttributes<HTMLDivElement>>;
+type SideNavContentProps = {
+    /**
+     * The content of the layout area.
+     * Should contain side nav menu items.
+     */
+    children: ReactNode;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+};
+export {};

package/dist/types/ui/page-layout/side-nav/side-nav-footer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { ReactNode } from 'react';
+import { type StrictXCSSProp } from '@atlaskit/css';
+/**
+ * The bottom part of the side nav.
+ */
+export declare const SideNavFooter: ({ children, xcss, }: {
+    /**
+     * The content of the layout area.
+     */
+    children: ReactNode;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
+}) => JSX.Element;

package/dist/types/ui/page-layout/side-nav/side-nav-header.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { ReactNode } from 'react';
+/**
+ * The top part of the side nav.
+ */
+export declare const SideNavHeader: ({ children, }: {
+    /**
+     * The content of the layout area.
+     */
+    children: ReactNode;
+}) => JSX.Element;

package/dist/types/ui/page-layout/side-nav/side-nav.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import type { CommonSlotProps } from '../types';
+import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
+type SideNavProps = CommonSlotProps & {
+    /**
+     * The content of the layout area.
+     * Should include side nav layout areas as required: `SideNavHeader`, `SideNavContent`, `SideNavFooter`.
+     * Within these, you can use side nav menu items.
+     */
+    children: React.ReactNode;
+    /**
+     * The accessible name of the slot, announced by screen readers.
+     */
+    label?: string;
+    /**
+     * Whether the side nav should be collapsed by default __on desktop screens__.
+     *
+     * It is always collapsed by default for mobile screens.
+     *
+     * This value is used when the side nav is first mounted, but you should continuously update your
+     * persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
+     * when the app is reloaded.
+     *
+     * __Note:__ If using this prop, ensure that it is also provided to the `SideNavToggleButton`.
+     * This is to ensure the state is in sync before post-SSR hydration.
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * The default width of the side nav layout area.
+     * It should be between the resize bounds - the minimum is 240px and the maximum is 50% of the viewport width.
+     *
+     * It is only used when the side nav is first mounted, but you should continuously update your
+     * persisted state using the `onResizeEnd` callback of `PanelSplitter`, to ensure it is up to date
+     * when the app is reloaded.
+     */
+    defaultWidth?: number;
+    /**
+     * Called when the side nav is expanded.
+     */
+    onExpand?: VisibilityCallback;
+    /**
+     * Called when the side nav is collapsed.
+     */
+    onCollapse?: VisibilityCallback;
+};
+/**
+ * The side navigation layout area. It will show on the left (inline start) of the screen.
+ *
+ * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * content within areas of the side nav.
+ *
+ * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.
+ */
+export declare function SideNav({ children, defaultCollapsed, defaultWidth, testId, label, // Default value is defined in `SideNavInternal`
+skipLinkLabel, // Default value is defined in `SideNavInternal`
+onExpand, onCollapse, id, }: SideNavProps): JSX.Element;
+export {};

package/dist/types/ui/page-layout/side-nav/toggle-button-context.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/**
+ * Context for the side nav toggle button element.
+ * Used to power the side nav flyout by allowing the side nav to bind event listeners to the button element.
+ */
+export declare const SideNavToggleButtonElement: import("react").Context<HTMLButtonElement | null>;
+/**
+ * Context for the callback ref used to respond to toggle button ref being attached. It is used to update the
+ * `SideNavToggleButtonRef` state so consumers can react to the ref being attached.
+ *
+ * e.g. Once the side nav toggle button has been mounted, the side nav can bind mouse event listeners to it
+ * to power the sidenav flyout.
+ *
+ * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
+ *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
+ */
+export declare const SideNavToggleButtonAttachRef: import("react").Context<(newVal: HTMLButtonElement | null) => void>;

package/dist/types/ui/page-layout/side-nav/toggle-button-provider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * Provider for the side nav toggle button contexts.
+ *
+ * We are using a [ref callback](https://react.dev/reference/react-dom/components/common#ref-callback) along with a state
+ * for storing the button element once it has mounted, so that the side nav can bind event listeners to the button
+ * once it is mounted.
+ *
+ * Otherwise, the side nav can be mounted before the button (e.g. if the button is lazy loaded), which would prevent the
+ * event listeners from being set up.
+ *
+ * State is required as opposed to just a ref so that the effects in the side nav can react the element actually being mounted,
+ * as ref values cannot be added as effect dependencies.
+ */
+export declare const SideNavToggleButtonProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types/ui/page-layout/side-nav/toggle-button.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+export type SideNavVisibilityChangeAnalyticsAttributes = {
+    isSideNavVisible: boolean;
+};
+/**
+ * __SideNavToggleButton__
+ *
+ * Button for toggling the side nav. It should be used in the top bar.
+ */
+export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
+    /**
+     * Whether the side nav should be collapsed by default __on desktop screens__.
+     *
+     * It is always collapsed by default for mobile screens.
+     *
+     * __Note:__ If using this prop, ensure that it is also provided to the `SideNav` slot.
+     * This is to ensure the state is in sync before post-SSR hydration.
+     */
+    defaultCollapsed?: boolean | undefined;
+    /**
+     * The label when the toggle button will expand the side nav.
+     */
+    expandLabel: React.ReactNode;
+    /**
+     * The label when the toggle button will collapse the side nav.
+     */
+    collapseLabel: 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 | undefined;
+    /**
+     * 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 | undefined;
+    /**
+     * The callback function that is called when the toggle button is clicked.
+     */
+    onClick?: ((e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent, attributes?: SideNavVisibilityChangeAnalyticsAttributes) => void) | undefined;
+}) => JSX.Element;