App Header

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import AppHeader, AppHeaderRole from @prepared911/ui/blocks/app-header. See props.ts for the props and schema.ts for the declaration (inputs and variants). role is the discriminant of a union: each role takes only its own props. AppHeader takes no children, className, id, ref or style. AppHeaderRole: Calltaker, Dispatcher, Supervisor.

Every role

Prop	Type	Default
`role`	`AppHeaderRole`	required
`label`	`LocalizedMessage`	required
`landmark`	`NavbarLandmark`	`Banner`
`sticky`	`boolean`	`false`
`stickyInset`	`NavbarInset`	`0`
`homeHref`	`string`	required
`homeLabel`	`LocalizedMessage`	required
`navigationLabel`	`LocalizedMessage`	required
`overflowLabel`	`LocalizedMessage`	required
`currentPath`	`string`	required
`navigate`	`(path: string) => void`	required
`matchPath`	`NavbarTabsProps["matchPath"]`	pathname equality
`islandLabel`	`LocalizedMessage`	required
`notificationsLabel`	`LocalizedMessage`	required
`onNotificationsPress`	`() => void`	none
`toolsLabel`	`LocalizedMessage`	required
`fullscreenLabel`	`LocalizedMessage`	required
`onFullscreenPress`	`() => void`	none
`closeLabel`	`LocalizedMessage`	required
`onClosePress`	`() => void`	none

AppHeaderRoute: href (string), label (LocalizedMessage), optional extraRouteMatchers.

Calltaker and Dispatcher

Prop	Type	Default
`routes`	`AppHeaderOperatorRoutes` (`live`, `archived`)	required
`roleLabel`	`LocalizedMessage`	required
`queueLabel`	`LocalizedMessage`	required
`raiseHandLabel`	`LocalizedMessage`	required
`raisedHand`	`boolean`	uncontrolled
`defaultRaisedHand`	`boolean`	`false`
`onRaisedHandChange`	`(raised: boolean, details: ChangeDetails) => void`	none
`trainingLabel`	`LocalizedMessage`	required
`onTrainingPress`	`() => void`	none
`preferencesLabel`	`LocalizedMessage`	required
`onPreferencesPress`	`() => void`	none

Calltaker only

Prop	Type	Default
`status`	`ControlIslandStatus` (`Busy`, `Ready`, `Ringing`)	uncontrolled
`defaultStatus`	`ControlIslandStatus`	`Busy`
`onStatusChange`	`(status: ControlIslandChoosableStatus, details: ChangeDetails) => void`	none
`busyLabel`	`LocalizedMessage`	required
`readyLabel`	`LocalizedMessage`	required
`ringingLabel`	`LocalizedMessage`	required
`statusMenuLabel`	`LocalizedMessage`	required
`ringingAnnouncement`	`LocalizedMessage`	required

The Dispatcher role types status, defaultStatus and onStatusChange as never.

Supervisor

Prop	Type	Default
`routes`	`AppHeaderSupervisorRoutes` (`live`, `archived`, `learning`, `settings`)	required
`roleLabels`	`AppHeaderRoleLabels` (one `LocalizedMessage` per role)	required
`activeRole`	`AppHeaderRole`	uncontrolled
`defaultActiveRole`	`AppHeaderRole`	`Supervisor`
`onActiveRoleChange`	`(role: AppHeaderRole, details: ChangeDetails) => void`	none

Props

Name	Type	Default	Description
`accountLabel`	`LocalizedMessage`	—	Accessible name of the account cog (`settings`), which opens the account menu.
`accountName`	`UserMenuName`	—	The person's name in the account menu header.
`appearanceLabels`	`UserMenuAppearanceLabels`	—	Names of the theme choices. The account menu shows the theme row from these.
`busyLabel`	`LocalizedMessage`	—	Label of Busy, on the pill and on its menu row.
`closeLabel`	`LocalizedMessage`	—	Name of the close control (x).
`currentPath`	`string`	—	Current pathname, which decides the current tab.
`fullscreenLabel`	`LocalizedMessage`	—	Name of the full screen control.
`homeHref`	`string`	—	Where the Axon mark at the start goes, usually the home route.
`homeLabel`	`LocalizedMessage`	—	Accessible name of the Axon mark's link, such as "Home".
`islandLabel`	`LocalizedMessage`	—	Accessible name of the ControlIsland at the start, such as "Role and availability".
`label`	`LocalizedMessage`	—	Accessible name of the bar. It names the banner, or the navigation landmark when `landmark` says so.
`navigate`	`(path: string) => void`	—	Called with a route's `href` on an unmodified primary click on a tab, and on a press of its row in the overflow menu, so a client router can handle both. @param path - The route's `href`
`navigationLabel`	`LocalizedMessage`	—	Accessible name of the navigation landmark that holds the route tabs.
`notificationsLabel`	`LocalizedMessage`	—	Name of the notifications control (bell-ring).
`onSignOut`	`() => void \| Promise<void>`	—	Called when a person presses Log out. When it returns a promise the row stays busy until the promise settles, then the menu closes. The block does not log the person out.
`overflowLabel`	`LocalizedMessage`	—	Visible label of the control that opens the menu of routes that do not fit.
`preferencesLabel`	`LocalizedMessage`	—	Name of the preferences control (settings-2).
`queueLabel`	`LocalizedMessage`	—	The queue (Calltaker) or channel (Dispatcher) being worked, such as "All queues". Static text.
`raiseHandLabel`	`LocalizedMessage`	—	Name of the raise hand control. It does not change with the pressed state.
`readyLabel`	`LocalizedMessage`	—	Label of Ready, on the pill and on its menu row.
`reduceMotionLabel`	`LocalizedMessage`	—	Label of the Reduce motion switch in the account menu. The row lets a person turn animation off on a slow device.
`ringingAnnouncement`	`LocalizedMessage`	—	Announced politely once when the status becomes Ringing, such as "Incoming call".
`ringingLabel`	`LocalizedMessage`	—	Label of Ringing, on the pill.
`role`	`AppHeaderRole`	—	The Calltaker header. The Dispatcher header. The Supervisor header.
`roleLabel`	`LocalizedMessage`	—	Name of the role on the island's badge, such as "Calltaker". The badge shows only a glyph.
`roleLabels`	`Readonly<Record<AppHeaderRole, LocalizedMessage>>`	—	Names of the switcher's roles. Each is its segment's accessible name and shows while the segment is selected.
`routes`	`AppHeaderOperatorRoutes \| AppHeaderSupervisorRoutes`	—	The route tabs: Live and Archived. The route tabs: Live, Archived, Learning and Settings.
`signingOutLabel`	`LocalizedMessage`	—	Label of the log out row while `onSignOut` is pending.
`signOutLabel`	`LocalizedMessage`	—	Label of the log out row. It is the last row of the account menu.
`statusMenuLabel`	`LocalizedMessage`	—	Name of the availability menu, such as "Availability". It names the radio group and describes the pill.
`toolsLabel`	`LocalizedMessage`	—	Accessible name of the cluster after the separator: preferences (where the role has it), full screen and close.
`trainingLabel`	`LocalizedMessage`	—	Name of the training control (graduation-cap).
`accountEmail`	`DisplayValue`	—	The person's email in the account menu header. Truncated there; the full text is the title.
`activeRole`	`AppHeaderRole`	—	The role selected in the switcher when controlled. The header stays the Supervisor header whatever it holds.
`appearance`	`AppearanceMode`	—	Controlled appearance preference. Pair with `onAppearanceChange`. The host applies it.
`defaultActiveRole`	`AppHeaderRole`	`AppHeaderRole.Supervisor`	The role selected in the switcher on first render when uncontrolled.
`defaultAppearance`	`AppearanceMode`	`system`	Initial appearance preference when uncontrolled.
`defaultRaisedHand`	`boolean`	`false`	Initial raised state when uncontrolled.
`defaultReduceMotion`	`boolean`	`false`	Initial reduce motion preference when uncontrolled.
`defaultStatus`	`ControlIslandStatus`	`ControlIslandStatus.Busy`	Initial availability when uncontrolled. A dispatcher has no availability; use {@link AppHeaderRole.Calltaker}.
`landmark`	`NavbarLandmark`	`NavbarLandmark.Banner`	Landmark of the bar. A shell that has a banner of its own passes {@link NavbarLandmark.Navigation} so a page never has two banners.
`matchPath`	`MatchPathFn`	—	Route matcher, for example react-router `matchPath`. Defaults to pathname equality.
`onActiveRoleChange`	`((role: AppHeaderRole, details: ChangeDetails<ChangeReason>) => void)`	—	Called when a role segment is pressed; pressing the selected role does not call it. Cancel the details to keep the previous role. @param role - The pressed role @param details - Change metadata
`onAppearanceChange`	`AppearanceChangeHandler`	—	Called when a person picks a theme. The block only reports the choice; the host applies it, for example by setting `data-theme` on the document. The menu stays open. May be canceled.
`onClosePress`	`(() => void)`	—	Called when the close control is pressed.
`onFullscreenPress`	`(() => void)`	—	Called when the full screen control is pressed.
`onNotificationsPress`	`(() => void)`	—	Called when the notifications control is pressed.
`onPreferencesPress`	`(() => void)`	—	Called when the preferences control is pressed.
`onRaisedHandChange`	`((raised: boolean, details: ChangeDetails<ChangeReason>) => void)`	—	Called with the next state when the raise hand control is pressed. Cancel the details to keep the previous state. @param raised - Next raised state @param details - Change metadata
`onReduceMotionChange`	`ReduceMotionChangeHandler`	—	Called when a person flips the Reduce motion switch. The block only reports the choice; the host applies it, for example by setting `data-motion="reduced"` on the document. May be canceled.
`onStatusChange`	`((status: ControlIslandChoosableStatus, details: ChangeDetails<ChangeReason>) => void)`	—	Called with the chosen availability when a row of the status menu is pressed; never with Ringing. Cancel the details to keep the previous availability. A dispatcher has no availability; use {@link AppHeaderRole.Calltaker}. @param status - The chosen availability @param details - Change metadata
`onTrainingPress`	`(() => void)`	—	Called when the training control is pressed.
`raisedHand`	`boolean`	—	Whether the hand is raised when controlled. Pair with `onRaisedHandChange`.
`reduceMotion`	`boolean`	—	Controlled reduce motion preference. Pair with `onReduceMotionChange`. The host applies it.
`status`	`ControlIslandStatus`	—	Availability when controlled. The host sets {@link ControlIslandStatus.Ringing} while a call is incoming and sets the person's choice back when it ends. A dispatcher has no availability; use {@link AppHeaderRole.Calltaker}.
`sticky`	`boolean`	`false`	Keeps the bar at the block-start edge of its scrollport while the page scrolls.
`stickyInset`	`NavbarInset`	`0`	Distance between the stuck bar and the block-start edge, as a `--space-*` step. Only read when `sticky`.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

App Header / Usage

App Header / Accessibility

On this page

Every role

Calltaker and Dispatcher

App Header

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Every role

Prop	Type	Default
`role`	`AppHeaderRole`	required
`label`	`LocalizedMessage`	required
`landmark`	`NavbarLandmark`	`Banner`
`sticky`	`boolean`	`false`
`stickyInset`	`NavbarInset`	`0`
`homeHref`	`string`	required
`homeLabel`	`LocalizedMessage`	required
`navigationLabel`	`LocalizedMessage`	required
`overflowLabel`	`LocalizedMessage`	required
`currentPath`	`string`	required
`navigate`	`(path: string) => void`	required
`matchPath`	`NavbarTabsProps["matchPath"]`	pathname equality
`islandLabel`	`LocalizedMessage`	required
`notificationsLabel`	`LocalizedMessage`	required
`onNotificationsPress`	`() => void`	none
`toolsLabel`	`LocalizedMessage`	required
`fullscreenLabel`	`LocalizedMessage`	required
`onFullscreenPress`	`() => void`	none
`closeLabel`	`LocalizedMessage`	required
`onClosePress`	`() => void`	none

AppHeaderRoute: href (string), label (LocalizedMessage), optional extraRouteMatchers.

Calltaker and Dispatcher

Prop	Type	Default
`routes`	`AppHeaderOperatorRoutes` (`live`, `archived`)	required
`roleLabel`	`LocalizedMessage`	required
`queueLabel`	`LocalizedMessage`	required
`raiseHandLabel`	`LocalizedMessage`	required
`raisedHand`	`boolean`	uncontrolled
`defaultRaisedHand`	`boolean`	`false`
`onRaisedHandChange`	`(raised: boolean, details: ChangeDetails) => void`	none
`trainingLabel`	`LocalizedMessage`	required
`onTrainingPress`	`() => void`	none
`preferencesLabel`	`LocalizedMessage`	required
`onPreferencesPress`	`() => void`	none

Calltaker only

Prop	Type	Default
`status`	`ControlIslandStatus` (`Busy`, `Ready`, `Ringing`)	uncontrolled
`defaultStatus`	`ControlIslandStatus`	`Busy`
`onStatusChange`	`(status: ControlIslandChoosableStatus, details: ChangeDetails) => void`	none
`busyLabel`	`LocalizedMessage`	required
`readyLabel`	`LocalizedMessage`	required
`ringingLabel`	`LocalizedMessage`	required
`statusMenuLabel`	`LocalizedMessage`	required
`ringingAnnouncement`	`LocalizedMessage`	required

The Dispatcher role types status, defaultStatus and onStatusChange as never.

Supervisor

Prop	Type	Default
`routes`	`AppHeaderSupervisorRoutes` (`live`, `archived`, `learning`, `settings`)	required
`roleLabels`	`AppHeaderRoleLabels` (one `LocalizedMessage` per role)	required
`activeRole`	`AppHeaderRole`	uncontrolled
`defaultActiveRole`	`AppHeaderRole`	`Supervisor`
`onActiveRoleChange`	`(role: AppHeaderRole, details: ChangeDetails) => void`	none

Props

Name	Type	Default	Description
`accountLabel`	`LocalizedMessage`	—	Accessible name of the account cog (`settings`), which opens the account menu.
`accountName`	`UserMenuName`	—	The person's name in the account menu header.
`appearanceLabels`	`UserMenuAppearanceLabels`	—	Names of the theme choices. The account menu shows the theme row from these.
`busyLabel`	`LocalizedMessage`	—	Label of Busy, on the pill and on its menu row.
`closeLabel`	`LocalizedMessage`	—	Name of the close control (x).
`currentPath`	`string`	—	Current pathname, which decides the current tab.
`fullscreenLabel`	`LocalizedMessage`	—	Name of the full screen control.
`homeHref`	`string`	—	Where the Axon mark at the start goes, usually the home route.
`homeLabel`	`LocalizedMessage`	—	Accessible name of the Axon mark's link, such as "Home".
`islandLabel`	`LocalizedMessage`	—	Accessible name of the ControlIsland at the start, such as "Role and availability".
`label`	`LocalizedMessage`	—	Accessible name of the bar. It names the banner, or the navigation landmark when `landmark` says so.
`navigate`	`(path: string) => void`	—	Called with a route's `href` on an unmodified primary click on a tab, and on a press of its row in the overflow menu, so a client router can handle both. @param path - The route's `href`
`navigationLabel`	`LocalizedMessage`	—	Accessible name of the navigation landmark that holds the route tabs.
`notificationsLabel`	`LocalizedMessage`	—	Name of the notifications control (bell-ring).
`onSignOut`	`() => void \| Promise<void>`	—	Called when a person presses Log out. When it returns a promise the row stays busy until the promise settles, then the menu closes. The block does not log the person out.
`overflowLabel`	`LocalizedMessage`	—	Visible label of the control that opens the menu of routes that do not fit.
`preferencesLabel`	`LocalizedMessage`	—	Name of the preferences control (settings-2).
`queueLabel`	`LocalizedMessage`	—	The queue (Calltaker) or channel (Dispatcher) being worked, such as "All queues". Static text.
`raiseHandLabel`	`LocalizedMessage`	—	Name of the raise hand control. It does not change with the pressed state.
`readyLabel`	`LocalizedMessage`	—	Label of Ready, on the pill and on its menu row.
`reduceMotionLabel`	`LocalizedMessage`	—	Label of the Reduce motion switch in the account menu. The row lets a person turn animation off on a slow device.
`ringingAnnouncement`	`LocalizedMessage`	—	Announced politely once when the status becomes Ringing, such as "Incoming call".
`ringingLabel`	`LocalizedMessage`	—	Label of Ringing, on the pill.
`role`	`AppHeaderRole`	—	The Calltaker header. The Dispatcher header. The Supervisor header.
`roleLabel`	`LocalizedMessage`	—	Name of the role on the island's badge, such as "Calltaker". The badge shows only a glyph.
`roleLabels`	`Readonly<Record<AppHeaderRole, LocalizedMessage>>`	—	Names of the switcher's roles. Each is its segment's accessible name and shows while the segment is selected.
`routes`	`AppHeaderOperatorRoutes \| AppHeaderSupervisorRoutes`	—	The route tabs: Live and Archived. The route tabs: Live, Archived, Learning and Settings.
`signingOutLabel`	`LocalizedMessage`	—	Label of the log out row while `onSignOut` is pending.
`signOutLabel`	`LocalizedMessage`	—	Label of the log out row. It is the last row of the account menu.
`statusMenuLabel`	`LocalizedMessage`	—	Name of the availability menu, such as "Availability". It names the radio group and describes the pill.
`toolsLabel`	`LocalizedMessage`	—	Accessible name of the cluster after the separator: preferences (where the role has it), full screen and close.
`trainingLabel`	`LocalizedMessage`	—	Name of the training control (graduation-cap).
`accountEmail`	`DisplayValue`	—	The person's email in the account menu header. Truncated there; the full text is the title.
`activeRole`	`AppHeaderRole`	—	The role selected in the switcher when controlled. The header stays the Supervisor header whatever it holds.
`appearance`	`AppearanceMode`	—	Controlled appearance preference. Pair with `onAppearanceChange`. The host applies it.
`defaultActiveRole`	`AppHeaderRole`	`AppHeaderRole.Supervisor`	The role selected in the switcher on first render when uncontrolled.
`defaultAppearance`	`AppearanceMode`	`system`	Initial appearance preference when uncontrolled.
`defaultRaisedHand`	`boolean`	`false`	Initial raised state when uncontrolled.
`defaultReduceMotion`	`boolean`	`false`	Initial reduce motion preference when uncontrolled.
`defaultStatus`	`ControlIslandStatus`	`ControlIslandStatus.Busy`	Initial availability when uncontrolled. A dispatcher has no availability; use {@link AppHeaderRole.Calltaker}.
`landmark`	`NavbarLandmark`	`NavbarLandmark.Banner`	Landmark of the bar. A shell that has a banner of its own passes {@link NavbarLandmark.Navigation} so a page never has two banners.
`matchPath`	`MatchPathFn`	—	Route matcher, for example react-router `matchPath`. Defaults to pathname equality.
`onActiveRoleChange`	`((role: AppHeaderRole, details: ChangeDetails<ChangeReason>) => void)`	—	Called when a role segment is pressed; pressing the selected role does not call it. Cancel the details to keep the previous role. @param role - The pressed role @param details - Change metadata
`onAppearanceChange`	`AppearanceChangeHandler`	—	Called when a person picks a theme. The block only reports the choice; the host applies it, for example by setting `data-theme` on the document. The menu stays open. May be canceled.
`onClosePress`	`(() => void)`	—	Called when the close control is pressed.
`onFullscreenPress`	`(() => void)`	—	Called when the full screen control is pressed.
`onNotificationsPress`	`(() => void)`	—	Called when the notifications control is pressed.
`onPreferencesPress`	`(() => void)`	—	Called when the preferences control is pressed.
`onRaisedHandChange`	`((raised: boolean, details: ChangeDetails<ChangeReason>) => void)`	—	Called with the next state when the raise hand control is pressed. Cancel the details to keep the previous state. @param raised - Next raised state @param details - Change metadata
`onReduceMotionChange`	`ReduceMotionChangeHandler`	—	Called when a person flips the Reduce motion switch. The block only reports the choice; the host applies it, for example by setting `data-motion="reduced"` on the document. May be canceled.
`onStatusChange`	`((status: ControlIslandChoosableStatus, details: ChangeDetails<ChangeReason>) => void)`	—	Called with the chosen availability when a row of the status menu is pressed; never with Ringing. Cancel the details to keep the previous availability. A dispatcher has no availability; use {@link AppHeaderRole.Calltaker}. @param status - The chosen availability @param details - Change metadata
`onTrainingPress`	`(() => void)`	—	Called when the training control is pressed.
`raisedHand`	`boolean`	—	Whether the hand is raised when controlled. Pair with `onRaisedHandChange`.
`reduceMotion`	`boolean`	—	Controlled reduce motion preference. Pair with `onReduceMotionChange`. The host applies it.
`status`	`ControlIslandStatus`	—	Availability when controlled. The host sets {@link ControlIslandStatus.Ringing} while a call is incoming and sets the person's choice back when it ends. A dispatcher has no availability; use {@link AppHeaderRole.Calltaker}.
`sticky`	`boolean`	`false`	Keeps the bar at the block-start edge of its scrollport while the page scrolls.
`stickyInset`	`NavbarInset`	`0`	Distance between the stuck bar and the block-start edge, as a `--space-*` step. Only read when `sticky`.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

App Header / Usage

App Header / Accessibility

On this page

Every role

Calltaker and Dispatcher