@payfit/unity-components
Version:
56 lines (55 loc) • 2.49 kB
TypeScript
import { ReactElement, ReactNode } from 'react';
/** Properties for {@link AppTopBar}. */
export type AppTopBarProps = {
/** Renders search content on the left side of the top bar. */
searchSlot?: ReactNode;
/** Renders action content before the profile menu. */
actionsSlot?: ReactNode;
/** Renders the required profile menu content on the right side. */
profileMenuSlot: ReactElement;
/** Names the top-bar header landmark. Defaults to `Application top bar`. */
'aria-label'?: string;
};
/**
* Provides the content-level top-bar structure used by application shells.
*
* The component assumes it is rendered inside AppLayout, which provides the
* `--uy-app-layout-header-sticky-offset` CSS variable. When the variable is
* unavailable, the observer falls back to a zero offset and the browser's
* native sticky positioning still applies.
*
* The sticky observer is intentionally isolated here so consumers only need to
* provide slot content. It currently observes the document scroll context and
* can be removed when the `:stuck` pseudo-class has wide browser support.
* @param props - Top-bar slots and landmark labeling.
* @param props.aria-label - The label for the top-bar landmark.
* @param props.searchSlot - The slot for the search bar portion of the top bar (left-most corner)
* @param props.actionsSlot - The slot for the actions portion of the top bar (right-most corner)
* @param props.profileMenuSlot - The slot for the profile menu portion of the top bar (right-most corner)
* @see {@link AppTopBarProps} for the available props.
* @example
* ```tsx
* import { AppLayout, AppTopBar } from '@payfit/unity-components'
*
* <AppLayout
* contentHeader={
* <AppTopBar
* actionsSlot={<button type="button">Help</button>}
* profileMenuSlot={<button type="button">Profile</button>}
* searchSlot={<button type="button">Search</button>}
* />
* }
* >
* <main>Page content</main>
* </AppLayout>
* ```
* @remarks
* The component renders a named `banner` landmark. Pass `aria-label` when the
* application contains more than one banner landmark or needs a more specific
* name. Keep the profile menu accessible because the top bar does not provide
* a label for its slotted content.
*/
export declare const AppTopBar: {
({ searchSlot, actionsSlot, profileMenuSlot, "aria-label": ariaLabel, }: AppTopBarProps): import("react/jsx-runtime").JSX.Element;
displayName: string;
};