@12-apps/ui 6.50.1 → 6.51.1

package/src/components/navigation/SectionNav/SectionNav.primary.tsx

@@ -1,12 +1,17 @@
-import { useTheme } from '@mui/material/styles/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import type { ReactNode } from 'react';
 
 import { rem } from '../../../tokens/scales';
 
-import { Box, CONTROL_RESET, focusRing } from './SectionNav.parts';
+import { Box, CONTROL_RESET, NOT_LIVE, SlotIcon, focusRing } from './SectionNav.parts';
 
 export interface RaisedActionButtonProps {
-  /** The button's accessible name — it has no visible label. */
+  /**
+   * The button's accessible name. Drawn under the button only when
+   * `captioned`; the caption is hidden from assistive tech, so the name is
+   * read once either way.
+   */
   label: string;
   icon: ReactNode;
   onClick: () => void;
@@ -18,6 +23,19 @@ export interface RaisedActionButtonProps {
   open?: boolean;
   /** The name it takes while `open` — the same control closes what it opened. REQUIRED with `open`. */
   closeLabel?: string;
+  /**
+   * Draw `label` under the button. A bar of VERBS names the act it is for; a
+   * bar of places can leave its one action to the icon.
+   */
+  captioned?: boolean;
+  /** Dimmed and not operable: a native `disabled` button. */
+  disabled?: boolean;
+  /**
+   * A write it started is in flight: a spinner replaces the icon, it reports
+   * `aria-busy` and `aria-disabled`, and a tap is ignored. It stays focusable,
+   * so the keyboard does not lose its place while the write answers.
+   */
+  loading?: boolean;
   dataTestId?: string;
 }
 
@@ -26,8 +44,9 @@ export interface RaisedActionButtonProps {
  * the row that is an ACTION rather than a place.
  *
  * Lifted half out of the bar so it reads as different in kind from the tabs
- * beside it, and unlabelled so it costs the row less width than a tab: that
- * width is what lets a bar keep four labelled tabs AND this button at 320px.
+ * beside it. Uncaptioned it costs the row less width than a tab: that width is
+ * what lets a bar keep four labelled tabs AND this button at 320px. A bar of
+ * verbs captions it, naming the act under the button.
  *
  * `SectionNav` draws it for its `primary` menu. It is exported on its own for
  * a bar the host already draws — drop it between two tabs, in a flex row.
@@ -38,44 +57,102 @@ export function RaisedActionButton({
   onClick,
   open,
   closeLabel,
+  captioned = false,
+  disabled = false,
+  loading = false,
   dataTestId = 'raised-action',
 }: RaisedActionButtonProps): React.JSX.Element {
   const theme = useTheme();
-  const size = rem(theme, 52);
   const expanded = open === true;
   return (
-    <Box sx={{ flex: 'none', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', px: 0.5 }}>
+    <Box
+      sx={{
+        flex: 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        px: 0.5,
+      }}
+    >
       <Box
         component="button"
         type="button"
-        onClick={onClick}
+        {...raisedState({ onClick, disabled, loading })}
         aria-label={expanded && closeLabel ? closeLabel : label}
         aria-expanded={open}
         data-testid={dataTestId}
-        sx={{
-          ...CONTROL_RESET,
-          ...focusRing(theme),
-          width: size,
-          height: size,
-          // Lifted half out of the bar: the one control that is not a place.
-          marginTop: rem(theme, -18),
-          borderRadius: '50%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          bgcolor: 'primary.main',
-          color: 'primary.contrastText',
-          boxShadow: theme.shadows[6],
-          '& svg': {
-            fontSize: rem(theme, 26),
-            transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),
-            transform: expanded ? 'rotate(45deg)' : 'none',
-          },
-          '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },
-        }}
+        sx={raisedSx(theme, expanded)}
       >
-        {icon}
+        <SlotIcon icon={icon} loading={loading} />
       </Box>
+      {captioned ? <RaisedCaption label={label} inert={disabled || loading} /> : null}
     </Box>
   );
 }
+
+/**
+ * The button's operability. Only `disabled` is native: an in-flight button
+ * keeps its focus, reports `aria-busy` and `aria-disabled`, and drops the click.
+ */
+function raisedState({
+  onClick,
+  disabled,
+  loading,
+}: {
+  onClick: () => void;
+  disabled: boolean;
+  loading: boolean;
+}): Record<string, unknown> {
+  const busy = loading && !disabled;
+  return {
+    onClick: busy ? undefined : onClick,
+    disabled,
+    'aria-disabled': busy ? 'true' : undefined,
+    'aria-busy': loading || undefined,
+  };
+}
+
+/**
+ * The label under a captioned button. Hidden from assistive tech: the button
+ * already carries the same words as its name, and reading them twice is noise.
+ */
+function RaisedCaption({ label, inert }: { label: string; inert: boolean }): React.JSX.Element {
+  return (
+    <Typography
+      component="span"
+      variant="caption"
+      aria-hidden
+      sx={{ lineHeight: 1.3, mt: 0.25, whiteSpace: 'nowrap', color: inert ? 'text.disabled' : 'text.primary' }}
+    >
+      {label}
+    </Typography>
+  );
+}
+
+/** The round button: lifted half out of the bar, its icon turning while what it opened is open. */
+function raisedSx(theme: Theme, expanded: boolean): SxProps<Theme> {
+  const size = rem(theme, 52);
+  return {
+    ...CONTROL_RESET,
+    ...focusRing(theme),
+    width: size,
+    height: size,
+    // Lifted half out of the bar: the one control that is not a place.
+    marginTop: rem(theme, -18),
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    bgcolor: 'primary.main',
+    color: 'primary.contrastText',
+    boxShadow: theme.shadows[6],
+    [NOT_LIVE]: { cursor: 'default', bgcolor: 'action.disabledBackground', color: 'text.disabled', boxShadow: 'none' },
+    '& svg': {
+      fontSize: rem(theme, 26),
+      transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),
+      transform: expanded ? 'rotate(45deg)' : 'none',
+    },
+    '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },
+  } as SxProps<Theme>;
+}

package/src/components/navigation/SectionNav/SectionNav.rail.tsx

@@ -5,8 +5,24 @@ import type { ElementType, ReactNode } from 'react';
 import type { SectionNavCopy } from '../../../copy';
 import { rem } from '../../../tokens/scales';
 
-import { Box, CONTROL_RESET, CountedIcon, controlProps, focusRing } from './SectionNav.parts';
-import type { SectionNavMenu, SectionNavProps } from './SectionNav.types';
+import { destinationState, isMenu } from './SectionNav.helpers';
+import {
+  Box,
+  CONTROL_RESET,
+  CountedIcon,
+  NOT_LIVE,
+  SlotIcon,
+  controlProps,
+  destinationControl,
+  focusRing,
+} from './SectionNav.parts';
+import type {
+  SectionNavAction,
+  SectionNavBack,
+  SectionNavDestination,
+  SectionNavMenu,
+  SectionNavProps,
+} from './SectionNav.types';
 
 /**
  * One rail row: icon, label, and the count at the far end.
@@ -14,6 +30,10 @@ import type { SectionNavMenu, SectionNavProps } from './SectionNav.types';
  * Destinations and menu entries draw the same row — in the rail there is room
  * for everything, so the difference between "a place" and "an action" is the
  * section it sits in, not its shape.
+ *
+ * `active` is the look; `current` is what `aria-current` reports, and is a
+ * link's claim only — an action row that is ON says so with `aria-pressed`,
+ * which arrives in `control`. Omitted, `current` follows `active`.
  */
 function RailRow({
   label,
@@ -21,24 +41,29 @@ function RailRow({
   icon,
   count,
   active,
+  current = active,
   copy,
   testId,
   control,
+  loading = false,
 }: {
   label: string;
   description?: string;
   icon: ReactNode;
   count: number | undefined;
   active: boolean;
+  current?: boolean;
   copy: SectionNavCopy;
   testId: string;
   control: Record<string, unknown>;
+  loading?: boolean;
 }): React.JSX.Element {
   const theme = useTheme();
   return (
     <Box
       {...control}
-      aria-current={active ? 'page' : undefined}
+      aria-current={current ? 'page' : undefined}
+      aria-busy={loading || undefined}
       data-testid={testId}
       sx={{
         ...CONTROL_RESET,
@@ -56,9 +81,15 @@ function RailRow({
         bgcolor: active ? 'action.selected' : 'transparent',
         '&:hover': { bgcolor: active ? 'action.selected' : 'action.hover' },
         '& svg': { color: 'primary.main', fontSize: rem(theme, 20) },
+        [NOT_LIVE]: { color: 'text.disabled', '& svg': { color: 'text.disabled' } },
       }}
     >
-      <CountedIcon icon={icon} count={count} label={copy.badge} testId={`${testId}-badge`} />
+      <CountedIcon
+        icon={<SlotIcon icon={icon} loading={loading} />}
+        count={count}
+        label={copy.badge}
+        testId={`${testId}-badge`}
+      />
       <Box component="span" sx={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
         <Typography component="span" variant="body2" sx={{ fontWeight: active ? 700 : 500 }}>
           {label}
@@ -82,7 +113,11 @@ function RailHeading({ children }: { children: ReactNode }): React.JSX.Element {
   );
 }
 
-/** A menu's groups, listed under its title — nothing folded away on a wide screen. */
+/**
+ * A menu's groups, listed under its title — nothing folded away on a wide
+ * screen. A `disabled` menu has no trigger here to refuse, so every row of it
+ * is inert instead.
+ */
 function RailMenu({
   menu,
   linkComponent,
@@ -113,8 +148,13 @@ function RailMenu({
               count={entry.badge}
               active={entry.active === true}
               copy={copy}
-              testId={`${testId}-entry-${entry.id}`}
-              control={controlProps({ href: entry.href, linkComponent, onClick: () => entry.onSelect?.() })}
+              testId={entry.dataTestId ?? `${testId}-entry-${entry.id}`}
+              control={controlProps({
+                href: entry.href,
+                linkComponent,
+                inert: menu.disabled === true || entry.disabled === true,
+                onClick: () => entry.onSelect?.(),
+              })}
             />
           ))}
         </Box>
@@ -123,6 +163,104 @@ function RailMenu({
   );
 }
 
+/** The way back out of the section, at the top of the rail. */
+function RailBack({
+  back,
+  linkComponent,
+  testId,
+}: {
+  back: SectionNavBack;
+  linkComponent: ElementType | undefined;
+  testId: string;
+}): React.JSX.Element {
+  const theme = useTheme();
+  return (
+    <Box
+      {...controlProps({ href: back.href, linkComponent })}
+      data-testid={testId}
+      sx={{
+        ...CONTROL_RESET,
+        ...focusRing(theme),
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        px: 1.25,
+        py: 0.75,
+        mb: 0.5,
+        borderRadius: 1,
+        color: 'text.secondary',
+        '&:hover': { bgcolor: 'action.hover', color: 'text.primary' },
+        '& svg': { fontSize: rem(theme, 20) },
+      }}
+    >
+      {back.icon}
+      <Typography component="span" variant="body2" sx={{ fontWeight: 600 }}>
+        {back.label}
+      </Typography>
+    </Box>
+  );
+}
+
+/** A primary that ACTS, as one row: there is no sheet to list on a wide screen. */
+function RailAction({
+  action,
+  linkComponent,
+  copy,
+  testId,
+}: {
+  action: SectionNavAction;
+  linkComponent: ElementType | undefined;
+  copy: SectionNavCopy;
+  testId: string;
+}): React.JSX.Element {
+  return (
+    <RailRow
+      label={action.label}
+      icon={action.icon}
+      count={undefined}
+      active={false}
+      copy={copy}
+      testId={action.dataTestId ?? testId}
+      loading={action.loading === true}
+      control={controlProps({
+        href: undefined,
+        linkComponent,
+        inert: action.disabled === true,
+        busy: action.loading === true,
+        onClick: action.onSelect,
+      })}
+    />
+  );
+}
+
+/** A destination as a row: a link, or an action (a toggle when it carries `active`). */
+function RailDestination({
+  destination,
+  linkComponent,
+  copy,
+  testId,
+}: {
+  destination: SectionNavDestination;
+  linkComponent: ElementType | undefined;
+  copy: SectionNavCopy;
+  testId: string;
+}): React.JSX.Element {
+  const { current, lit } = destinationState(destination);
+  return (
+    <RailRow
+      label={destination.label}
+      icon={destination.icon}
+      count={destination.badge}
+      active={lit}
+      current={current}
+      copy={copy}
+      testId={testId}
+      loading={destination.loading === true}
+      control={destinationControl(destination, linkComponent, () => destination.onSelect?.())}
+    />
+  );
+}
+
 /**
  * The wide-screen layout: a vertical rail — the way back, the destinations,
  * then every menu's entries.
@@ -144,7 +282,6 @@ export function SectionNavRail({
   Pick<SectionNavProps, 'primary' | 'more' | 'back' | 'heading'> & {
     linkComponent: ElementType | undefined;
   }): React.JSX.Element {
-  const theme = useTheme();
   return (
     <Box
       component="nav"
@@ -161,45 +298,21 @@ export function SectionNavRail({
         bgcolor: 'background.paper',
       }}
     >
-      {back ? (
-        <Box
-          {...controlProps({ href: back.href, linkComponent })}
-          data-testid={`${dataTestId}-back`}
-          sx={{
-            ...CONTROL_RESET,
-            ...focusRing(theme),
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-            px: 1.25,
-            py: 0.75,
-            mb: 0.5,
-            borderRadius: 1,
-            color: 'text.secondary',
-            '&:hover': { bgcolor: 'action.hover', color: 'text.primary' },
-            '& svg': { fontSize: rem(theme, 20) },
-          }}
-        >
-          {back.icon}
-          <Typography component="span" variant="body2" sx={{ fontWeight: 600 }}>
-            {back.label}
-          </Typography>
-        </Box>
-      ) : null}
+      {back ? <RailBack back={back} linkComponent={linkComponent} testId={`${dataTestId}-back`} /> : null}
       {heading ? <RailHeading>{heading}</RailHeading> : null}
       {destinations.map((destination) => (
-        <RailRow
+        <RailDestination
           key={destination.id}
-          label={destination.label}
-          icon={destination.icon}
-          count={destination.badge}
-          active={destination.active === true}
+          destination={destination}
+          linkComponent={linkComponent}
           copy={copy}
-          testId={`${dataTestId}-dest-${destination.id}`}
-          control={controlProps({ href: destination.href, linkComponent })}
+          testId={destination.dataTestId ?? `${dataTestId}-dest-${destination.id}`}
         />
       ))}
-      {primary ? (
+      {primary && !isMenu(primary) ? (
+        <RailAction action={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />
+      ) : null}
+      {isMenu(primary) ? (
         <RailMenu menu={primary} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-primary`} />
       ) : null}
       {more ? <RailMenu menu={more} linkComponent={linkComponent} copy={copy} testId={`${dataTestId}-more`} /> : null}

package/src/components/navigation/SectionNav/SectionNav.sheet.tsx

@@ -25,13 +25,14 @@ function GridEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps):
       {...controlProps({
         href: entry.href,
         linkComponent,
+        inert: entry.disabled === true,
         onClick: () => {
           entry.onSelect?.();
           onDone();
         },
       })}
       aria-current={entry.active ? 'page' : undefined}
-      data-testid={`${testId}-entry-${entry.id}`}
+      data-testid={entry.dataTestId ?? `${testId}-entry-${entry.id}`}
       sx={{
         ...CONTROL_RESET,
         ...focusRing(theme),
@@ -48,6 +49,7 @@ function GridEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps):
         bgcolor: entry.active ? 'action.selected' : 'action.hover',
         color: entry.active ? 'primary.main' : 'text.primary',
         '& svg': { color: 'primary.main' },
+        '&:disabled': { color: 'text.disabled', '& svg': { color: 'text.disabled' } },
       }}
     >
       <CountedIcon icon={entry.icon} count={entry.badge} label={copy.badge} testId={`${testId}-badge-${entry.id}`} />
@@ -66,13 +68,14 @@ function ListEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps):
       {...controlProps({
         href: entry.href,
         linkComponent,
+        inert: entry.disabled === true,
         onClick: () => {
           entry.onSelect?.();
           onDone();
         },
       })}
       aria-current={entry.active ? 'page' : undefined}
-      data-testid={`${testId}-entry-${entry.id}`}
+      data-testid={entry.dataTestId ?? `${testId}-entry-${entry.id}`}
       sx={{
         ...CONTROL_RESET,
         ...focusRing(theme),
@@ -87,6 +90,7 @@ function ListEntry({ entry, linkComponent, copy, testId, onDone }: EntryProps):
         textAlign: 'start',
         bgcolor: entry.active ? 'action.selected' : 'action.hover',
         '& svg': { color: 'primary.main' },
+        '&:disabled': { color: 'text.disabled', '& svg': { color: 'text.disabled' } },
       }}
     >
       <CountedIcon icon={entry.icon} count={entry.badge} label={copy.badge} testId={`${testId}-badge-${entry.id}`} />

package/src/components/navigation/SectionNav/SectionNav.types.ts

@@ -3,21 +3,61 @@ import type { ElementType, ReactNode } from 'react';
 import type { SectionNavCopy } from '../../../copy';
 
 /**
- * One place the section leads to — a bar slot on a phone, a row in the rail.
+ * One slot of the section — a bar slot on a phone, a row in the rail.
+ *
+ * A slot either LEADS somewhere (`href`, rendered through `linkComponent`) or
+ * DOES something (`onSelect`), the way a menu entry does. A bar of places is a
+ * section's navigation; a bar of verbs is a screen's actions pinned at its
+ * foot, and it is the same bar, so the two cannot be drawn two ways. Give a
+ * slot one or the other.
  */
 export interface SectionNavDestination {
   /** Stable key. Also the suffix of the slot's `data-testid`. */
   id: string;
   label: string;
   icon: ReactNode;
-  href: string;
+  href?: string;
+  /**
+   * What the slot does, for an action slot. Ignored while `disabled` or
+   * `loading`; still called while `dimmed`.
+   */
+  onSelect?: () => void;
+  /**
+   * Drawn dimmed and not operable: the act exists here, and cannot be done
+   * now. A native `disabled` button — a tap does nothing, and `onSelect` is
+   * not called.
+   */
+  disabled?: boolean;
+  /**
+   * Drawn exactly like `disabled`, but still TAPPABLE: for an act the screen
+   * cannot do now and should EXPLAIN when tapped. It reports
+   * `aria-disabled="true"`, stays focusable, never lights up, and its
+   * `onSelect` still fires so the host can answer with a message (why not,
+   * and what would make it possible).
+   */
+  dimmed?: boolean;
+  /**
+   * A write this slot started is in flight — a spinner replaces the icon, the
+   * slot reports `aria-busy` and `aria-disabled`, and a tap is ignored. It
+   * stays focusable, so the keyboard does not lose its place mid-write.
+   */
+  loading?: boolean;
+  /**
+   * The control's own `data-testid`, in place of the one the nav derives. For
+   * a host whose suites already drive an id of their own shape.
+   */
+  dataTestId?: string;
   /**
    * How many things behind this destination wait on the viewer. `0` and
    * `undefined` render no badge — "nothing waiting" and "not known yet" are
    * different claims and neither is a number.
    */
   badge?: number;
-  /** The destination the viewer is on. The host decides; the nav never reads the URL. */
+  /**
+   * For a link: the destination the viewer is on (`aria-current="page"`). For
+   * an action slot: a toggle that is ON (`aria-pressed`). The host decides;
+   * the nav never reads the URL.
+   */
   active?: boolean;
 }
 
@@ -37,6 +77,13 @@ export interface SectionNavEntry {
   onSelect?: () => void;
   badge?: number;
   active?: boolean;
+  /** Drawn dimmed and not operable — a print already on its way, an act this state refuses. */
+  disabled?: boolean;
+  /**
+   * The control's own `data-testid`, in place of the one the nav derives. For
+   * a host whose suites already drive an id of their own shape.
+   */
+  dataTestId?: string;
 }
 
 /** A titled run of entries inside a menu. */
@@ -67,6 +114,33 @@ export interface SectionNavMenu {
   /** The sheet's heading, and the rail section's. */
   title: string;
   groups: SectionNavGroup[];
+  /** The trigger is drawn dimmed and does not open; in the rail every row of it is inert. */
+  disabled?: boolean;
+  /**
+   * The control's own `data-testid`, in place of the one the nav derives. For
+   * a host whose suites already drive an id of their own shape.
+   */
+  dataTestId?: string;
+}
+
+/**
+ * The raised primary as a plain ACTION rather than a menu: one act, done on
+ * tap. Its label is drawn under the button, because a bar of verbs names the
+ * act it is for rather than leaving it to an icon.
+ */
+export interface SectionNavAction {
+  label: string;
+  icon: ReactNode;
+  onSelect: () => void;
+  /** A native `disabled` button: a tap does nothing. */
+  disabled?: boolean;
+  /** In flight: a spinner, `aria-busy`, `aria-disabled`; focusable, and a tap is ignored. */
+  loading?: boolean;
+  /**
+   * The control's own `data-testid`, in place of the one the nav derives. For
+   * a host whose suites already drive an id of their own shape.
+   */
+  dataTestId?: string;
 }
 
 /** The way out of the section, drawn at the top of the rail. */
@@ -88,8 +162,11 @@ export interface SectionNavProps {
   /** The navigation landmark's accessible name. */
   label: string;
   destinations: SectionNavDestination[];
-  /** The raised action in the middle of the bar. */
-  primary?: SectionNavMenu;
+  /**
+   * The raised button in the middle of the bar: a menu it opens as a sheet,
+   * or an action it does on tap (drawn with its label under it).
+   */
+  primary?: SectionNavMenu | SectionNavAction;
   /** The last slot of the bar. Its badge is the sum of its entries' badges. */
   more?: SectionNavMenu;
   /** Rail only: the way back out of the section. */

package/src/components/navigation/SectionNav/__stories__/fixtures.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 
 import { sxRem } from '../../../../tokens/scales';
 
-import type { SectionNavDestination, SectionNavMenu } from '../SectionNav.types';
+import type { SectionNavAction, SectionNavDestination, SectionNavMenu } from '../SectionNav.types';
 
 /**
  * The stories' example section, shared by the showcase and the interaction
@@ -109,3 +109,23 @@ export function PhoneFrame({ children }: { children: React.ReactNode }): React.R
 export function RailFrame({ children }: { children: React.ReactNode }): React.ReactElement {
   return <Box sx={{ width: sxRem(240), height: sxRem(560), border: 1, borderColor: 'divider' }}>{children}</Box>;
 }
+
+/**
+ * A screen's ACTIONS pinned at its foot — the same bar, drawn with verbs: a
+ * bill being settled, one person at a time.
+ *
+ * `split` is DIMMED — it cannot be done yet, and a tap still reaches the host
+ * so it can say why. `equal` is a TOGGLE that is on: `aria-pressed`, never
+ * `aria-current`, because an action is not a page.
+ */
+export const ACTIONS: SectionNavDestination[] = [
+  { id: 'split', label: 'Split', icon: <ReceiptLongOutlinedIcon />, onSelect: () => undefined, dimmed: true },
+  { id: 'equal', label: 'Equally', icon: <GroupsOutlinedIcon />, onSelect: () => undefined, active: true },
+  { id: 'person', label: 'Person', icon: <AddIcon />, onSelect: () => undefined },
+];
+
+export const PAY_ALL: SectionNavAction = {
+  label: 'Pay all',
+  icon: <StorefrontOutlinedIcon />,
+  onSelect: () => undefined,
+};

package/src/components/navigation/SectionNav/index.ts

@@ -3,6 +3,7 @@ export { sectionNavBarInset } from './SectionNav.bar';
 export { RaisedActionButton } from './SectionNav.primary';
 export type { RaisedActionButtonProps } from './SectionNav.primary';
 export type {
+  SectionNavAction,
   SectionNavBack,
   SectionNavDestination,
   SectionNavEntry,