npm - @12-apps/ui - Versions diffs - 6.78.4 → 6.80.0 - Mend

@12-apps/ui 6.78.4 → 6.80.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1203) hide show

package/dist/native/data-display/Chip.js CHANGED Viewed

@@ -4,6 +4,9 @@ import {
 import {
   Icon
 } from "../chunks/chunk-RHD3625Y.js";
+import {
+  EN_US_UI_LABELS
+} from "../chunks/chunk-DUELD4HY.js";
 import "../chunks/chunk-5WLOVHKK.js";
 import "../chunks/chunk-AR5O4BEY.js";
 import {
@@ -235,6 +238,7 @@ function DeleteSlot({
   variant,
   color,
   onDelete,
+  deleteLabel = EN_US_UI_LABELS.common.delete,
   disabled,
   testID
 }) {
@@ -243,7 +247,7 @@ function DeleteSlot({
     {
       testID,
       role: "button",
-      "aria-label": "delete",
+      "aria-label": deleteLabel,
       disabled,
       onPress: onDelete,
       style: chipDeleteSlotStyle(metrics, variant),
@@ -262,6 +266,7 @@ function ChipBody({
   deletable,
   disabled,
   onDelete,
+  deleteLabel,
   idFor
 }) {
   const theme = useUiTheme();
@@ -293,6 +298,7 @@ function ChipBody({
         variant,
         color: paint.deleteColor,
         onDelete,
+        deleteLabel,
         disabled,
         testID: idFor("delete")
       }
@@ -329,6 +335,7 @@ var Chip = React.forwardRef((props, ref) => {
     onClick,
     onPress,
     onDelete,
+    deleteLabel,
     dataTestId,
     testID,
     style,
@@ -378,6 +385,7 @@ var Chip = React.forwardRef((props, ref) => {
           deletable,
           disabled,
           onDelete,
+          deleteLabel,
           idFor: makeTestId(chipId)
         }
       )

package/dist/native/data-display/Chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/data-display/Chip/Chip.native.tsx","../../../src/components/data-display/Chip/Chip.helpers.ts","../../../src/components/data-display/Chip/Chip.metrics.ts","../../../src/components/data-display/Chip/Chip.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n Image,\n Pressable,\n Text as RNText,\n View,\n type GestureResponderEvent,\n type StyleProp,\n type ViewStyle,\n} from 'react-native';\n\nimport { chipKeyAction, chipRole, isClickable, makeTestId } from './Chip.helpers';\nimport {\n chipAvatarStyle,\n chipContainerStyle,\n chipDeleteSlotStyle,\n chipLabelStyle,\n chipLeadingSlotStyle,\n chipMetrics,\n chipPaint,\n type ChipPaint,\n} from './Chip.look.native';\nimport { chipMuiSize, type ChipSizeMetrics } from './Chip.metrics';\nimport type { ChipProps, ChipVariant } from './Chip.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webKeyDown, type WebKeyHandler } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\ninterface SlotArgs {\n metrics: ChipSizeMetrics;\n variant: ChipVariant;\n}\n\n/*\n The leading slot. MUI restyles the icon ELEMENT through a class — 24px, or\n * 18px when small — which a native renderer cannot do to an arbitrary node, so\n * the slot carries the margins and the glyph keeps the size it was given.\n /\nfunction LeadingSlot({\n metrics,\n variant,\n avatar,\n avatarSrc,\n icon,\n testID,\n}: SlotArgs &\n Pick<ChipProps, 'avatar' \| 'avatarSrc' \| 'icon'> & { testID: string }): React.JSX.Element \| null {\n if (avatar) {\n return <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>{avatar}</View>;\n }\n if (avatarSrc) {\n return (\n <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>\n <Image\n source={{ uri: avatarSrc }}\n style={chipAvatarStyle(metrics)}\n accessibilityIgnoresInvertColors\n />\n </View>\n );\n }\n if (icon) {\n return (\n <View style={chipLeadingSlotStyle(metrics, variant, 'icon')} testID={testID}>\n {icon}\n </View>\n );\n }\n return null;\n}\n\n/* MUI's `deleteIcon`: the `Cancel` glyph, pressable, tucked under the label. /\nfunction DeleteSlot({\n metrics,\n variant,\n color,\n onDelete,\n disabled,\n testID,\n}: SlotArgs & {\n color: string;\n onDelete?: () => void;\n disabled?: boolean;\n testID: string;\n}): React.JSX.Element {\n return (\n <Pressable\n testID={testID}\n role=\"button\"\n aria-label=\"delete\"\n disabled={disabled}\n onPress={onDelete}\n style={chipDeleteSlotStyle(metrics, variant)}\n >\n <Icon name=\"Cancel\" size={metrics.deleteSize} color={color} />\n </Pressable>\n );\n}\n\ninterface ChipBodyProps extends SlotArgs {\n paint: ChipPaint;\n label: string;\n avatar?: ChipProps['avatar'];\n avatarSrc?: string;\n icon?: ChipProps['icon'];\n deletable?: boolean;\n disabled?: boolean;\n onDelete?: () => void;\n idFor: (suffix: string) => string;\n}\n\n/* Everything inside the pill: the leading slot, the label, the delete button. /\nfunction ChipBody({\n metrics,\n variant,\n paint,\n label,\n avatar,\n avatarSrc,\n icon,\n deletable,\n disabled,\n onDelete,\n idFor,\n}: ChipBodyProps): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <>\n <LeadingSlot\n metrics={metrics}\n variant={variant}\n avatar={avatar}\n avatarSrc={avatarSrc}\n icon={icon}\n testID={idFor('icon')}\n />\n <RNText\n testID={idFor('label')}\n numberOfLines={1}\n style={[chipLabelStyle(theme, metrics, variant), paint.label]}\n >\n {label}\n </RNText>\n {deletable ? (\n <DeleteSlot\n metrics={metrics}\n variant={variant}\n color={paint.deleteColor}\n onDelete={onDelete}\n disabled={disabled}\n testID={idFor('delete')}\n />\n ) : null}\n </>\n );\n}\n\ninterface KeyDownArgs {\n role: 'option' \| 'button' \| undefined;\n disabled?: boolean;\n deletable?: boolean;\n selectable?: boolean;\n /* Whether the chip acts at all, under either handler spelling. /\n acts?: unknown;\n onClick?: () => void;\n onDelete?: () => void;\n}\n\n/\n The half of the chip's keyboard contract react-native-web does NOT already\n * cover. Its `Pressable` turns Enter into a press on any role, and Space into\n * one only on a `button` role (`isValidKeyPress`) — so a selectable chip, which\n * is an `option`, needs Space wiring here, and Delete/Backspace is never its.\n * On a device none of this is ever called.\n /\nfunction makeChipKeyDown(args: KeyDownArgs): WebKeyHandler {\n return (event) => {\n const action = chipKeyAction(event.key, { ...args, onClick: args.acts });\n if (action === null) return;\n if (action === 'delete') {\n event.preventDefault();\n args.onDelete?.();\n return;\n }\n if (event.key === 'Enter' \|\| args.role === 'button') return;\n event.preventDefault();\n args.onClick?.();\n };\n}\n\n/\n The native `Chip`: MUI's pill on a `Pressable`, reachable by keyboard only\n * when it acts — which is the same rule MUI applies through `clickable`.\n /\nexport const Chip = React.forwardRef<View, ChipProps>((props, ref) => {\n const {\n label,\n variant = 'filled',\n size = 'md',\n color = 'primary',\n avatarSrc,\n avatar,\n icon,\n selected,\n selectable,\n deletable,\n disabled,\n onClick,\n onPress,\n onDelete,\n dataTestId,\n testID,\n style,\n ...rest\n } = props;\n const theme = useUiTheme();\n const chipId = testID ?? dataTestId;\n const metrics = chipMetrics(chipMuiSize(size));\n const paint = chipPaint(theme, variant, color, Boolean(selected));\n const acts = onClick ?? onPress;\n const clickable = isClickable(disabled, acts, selectable);\n const role = chipRole(selectable, acts);\n\n const base: StyleProp<ViewStyle> = [\n chipContainerStyle(metrics, Boolean(disabled)),\n paint.container,\n style,\n ];\n\n const press = (event: GestureResponderEvent): void => {\n onClick?.();\n onPress?.(event);\n };\n\n return (\n <Pressable\n ref={ref}\n testID={chipId \|\| 'chip'}\n role={role}\n aria-selected={selectable ? selected : undefined}\n disabled={disabled}\n // MUI makes only a clickable chip keyboard-reachable; react-native-web\n // would otherwise give every Pressable a tab stop.\n tabIndex={clickable ? 0 : -1}\n onPress={clickable ? press : undefined}\n {...webKeyDown(\n makeChipKeyDown({ role, disabled, deletable, selectable, acts, onClick, onDelete }),\n )}\n style={(state) => [base, state.pressed && clickable ? paint.pressed : null]}\n {...rest}\n >\n <ChipBody\n metrics={metrics}\n variant={variant}\n paint={paint}\n label={label}\n avatar={avatar}\n avatarSrc={avatarSrc}\n icon={icon}\n deletable={deletable}\n disabled={disabled}\n onDelete={onDelete}\n idFor={makeTestId(chipId)}\n />\n </Pressable>\n );\n});\n\nChip.displayName = 'Chip';\n","/* `${dataTestId}-label`, or `chip-label` when the caller named nothing. /\nexport const makeTestId =\n (dataTestId?: string) =>\n (suffix: string): string =>\n dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;\n\n/* `option` when the chip belongs to a selectable set, `button` when it merely acts. /\nexport const chipRole = (\n selectable?: boolean,\n // `unknown`, because the two renderers hand this a differently-typed handler\n // and all that is asked of it here is whether the caller supplied one.\n onClick?: unknown,\n): 'option' \| 'button' \| undefined => {\n if (selectable) return 'option';\n return onClick ? 'button' : undefined;\n};\n\nexport const isClickable = (\n disabled?: boolean,\n onClick?: unknown,\n selectable?: boolean,\n): boolean => !disabled && (Boolean(onClick) \|\| Boolean(selectable));\n\n/* What a key press on a chip means, if anything. /\nexport type ChipKeyAction = 'delete' \| 'activate' \| null;\n\nconst DELETE_KEYS = new Set(['Delete', 'Backspace']);\nconst ACTIVATE_KEYS = new Set(['Enter', ' ']);\n\nexport interface ChipKeyArgs {\n disabled?: boolean;\n deletable?: boolean;\n selectable?: boolean;\n onClick?: unknown;\n onDelete?: unknown;\n}\n\n/\n A chip is not a native control, so the two keyboard conventions it stands in\n * for are decided by hand: Delete/Backspace removes it, Enter/Space activates\n * it. Both renderers read this one decision — the web wires it to the DOM\n * handler, the native half to react-native-web's (see `Chip.native.tsx`).\n /\nexport function chipKeyAction(key: string, a: ChipKeyArgs): ChipKeyAction {\n if (a.disabled) return null;\n if (DELETE_KEYS.has(key) && a.deletable && a.onDelete) return 'delete';\n if (ACTIVATE_KEYS.has(key) && (a.onClick \|\| a.selectable)) return 'activate';\n return null;\n}\n","import type { ChipSize } from './Chip.base';\n\n/\n THE NUMBERS BOTH `Chip` RENDERERS DRAW WITH.\n \n Most of them are MUI's own `Chip` geometry rather than anything this package\n * writes — the 32px pill, the 13px label, the 5px/-6px icon tuck — because the\n * web half hands the drawing to `MuiChip` and the native half has to draw it.\n * Restated here once, read by both, so the two cannot disagree about a chip's\n * height. What THIS package adds (`Chip.styles.tsx`'s hover lift, its shadow\n * and its transition) is at the bottom, and the web derives its CSS from it.\n /\n\n/* MUI draws two chip sizes; ours are the house abbreviations for them. /\nexport type ChipMuiSize = 'small' \| 'medium';\n\nexport const chipMuiSize = (size: ChipSize): ChipMuiSize =>\n size === 'xs' \|\| size === 'sm' ? 'small' : 'medium';\n\nexport interface ChipSizeMetrics {\n height: number;\n /* The label's own side padding, filled and outlined (outlined is 1px tighter). /\n labelPadding: number;\n labelPaddingOutlined: number;\n /* The leading icon's box, and how far it tucks under the label. /\n iconSize: number;\n iconMarginLeft: number;\n iconMarginLeftOutlined: number;\n iconMarginRight: number;\n /* The avatar's round box and the type inside it. /\n avatarSize: number;\n avatarFontSize: number;\n avatarMarginLeft: number;\n avatarMarginLeftOutlined: number;\n avatarMarginRight: number;\n /* The delete glyph's box and its own tuck. /\n deleteSize: number;\n deleteMarginLeft: number;\n deleteMarginRight: number;\n deleteMarginRightOutlined: number;\n}\n\nexport const CHIP_SIZES: Record<ChipMuiSize, ChipSizeMetrics> = {\n medium: {\n height: 32,\n labelPadding: 12,\n labelPaddingOutlined: 11,\n iconSize: 24,\n iconMarginLeft: 5,\n iconMarginLeftOutlined: 4,\n iconMarginRight: -6,\n avatarSize: 24,\n avatarFontSize: 12,\n avatarMarginLeft: 5,\n avatarMarginLeftOutlined: 4,\n avatarMarginRight: -6,\n deleteSize: 22,\n deleteMarginLeft: -6,\n deleteMarginRight: 5,\n deleteMarginRightOutlined: 5,\n },\n small: {\n height: 24,\n labelPadding: 8,\n labelPaddingOutlined: 7,\n iconSize: 18,\n iconMarginLeft: 4,\n iconMarginLeftOutlined: 2,\n iconMarginRight: -4,\n avatarSize: 18,\n avatarFontSize: 10,\n avatarMarginLeft: 4,\n avatarMarginLeftOutlined: 2,\n avatarMarginRight: -4,\n deleteSize: 16,\n deleteMarginLeft: -4,\n deleteMarginRight: 4,\n deleteMarginRightOutlined: 3,\n },\n};\n\n/* MUI's `borderRadius: 32 / 2` — a pill at either height, since the box clamps it. /\nexport const CHIP_RADIUS = 16;\n/* The label's type, in px. MUI sets it on the root and the small size keeps it. /\nexport const CHIP_FONT_SIZE = 13;\n/* MUI's `palette.action.disabledOpacity`. /\nexport const CHIP_DISABLED_OPACITY = 0.38;\n/* An outlined chip's hairline: the hue at 0.7, or the grey ramp for `neutral`. /\nexport const OUTLINED_BORDER_ALPHA = 0.7;\n/* The delete glyph over an unaccented chip, and over a coloured one. /\nexport const DELETE_ICON_ALPHA = 0.26;\nexport const DELETE_ICON_ON_COLOR_ALPHA = 0.7;\n/* MUI's `action.hoverOpacity`, the wash a clickable outlined chip takes. /\nexport const OUTLINED_HOVER_ALPHA = 0.04;\n\n/ ── What this package adds on top of MUI's chip ──────────────────────────── /\n\n/* The lift a clickable chip takes on hover, and the shadow under it. /\nexport const HOVER_LIFT_PX = 1;\nexport const HOVER_SHADOW = { offsetY: 4, blur: 12, alphaLight: 0.15, alphaDark: 0.3 } as const;\nexport const CHIP_TRANSITION_MS = 200;\nexport const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/* A soft chip's ground: the colour at this alpha over the page. /\nexport const SOFT_GROUND_ALPHA = 0.14;\n/* A soft chip's hover ground. /\nexport const SOFT_HOVER_ALPHA = 0.22;\n","import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';\n\nimport type { ChipColor, ChipVariant } from './Chip.base';\nimport {\n CHIP_DISABLED_OPACITY,\n CHIP_FONT_SIZE,\n CHIP_RADIUS,\n CHIP_SIZES,\n DELETE_ICON_ALPHA,\n DELETE_ICON_ON_COLOR_ALPHA,\n OUTLINED_BORDER_ALPHA,\n OUTLINED_HOVER_ALPHA,\n SOFT_GROUND_ALPHA,\n SOFT_HOVER_ALPHA,\n type ChipMuiSize,\n type ChipSizeMetrics,\n} from './Chip.metrics';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/* MUI's `action.selectedOpacity`; its hover wash adds `OUTLINED_HOVER_ALPHA` on top. /\nconst SELECTED_OPACITY = 0.08;\n\nexport interface ChipPaint {\n container: ViewStyle;\n /* The web's `:hover` background, which touch has no equivalent of. /\n pressed: ViewStyle;\n label: TextStyle;\n deleteColor: string;\n}\n\n/* `neutral` is MUI's `default`: no accent, the ink and the ramp instead. /\nconst isAccented = (color: ChipColor): boolean => color !== 'neutral';\n\n/* An unaccented chip's hairline, which follows the mode rather than a hue. /\nconst neutralBorder = (theme: UiTheme): string =>\n theme.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700];\n\nfunction filledPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n if (!isAccented(color)) {\n return {\n container: { backgroundColor: theme.palette.action.selected },\n pressed: { backgroundColor: alpha(theme.palette.action.selected, SELECTED_OPACITY + OUTLINED_HOVER_ALPHA) },\n label: { color: theme.palette.text.primary },\n deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { backgroundColor: accent.main },\n pressed: { backgroundColor: accent.dark },\n label: { color: accent.contrastText },\n deleteColor: alpha(accent.contrastText, DELETE_ICON_ON_COLOR_ALPHA),\n };\n}\n\nfunction softPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n if (!isAccented(color)) {\n return {\n container: { backgroundColor: theme.palette.action.selected },\n pressed: { backgroundColor: theme.palette.action.hover },\n label: { color: theme.palette.text.secondary, fontWeight: '600' },\n deleteColor: alpha(theme.palette.text.secondary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },\n pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },\n label: { color: accent.dark, fontWeight: '600' },\n deleteColor: alpha(accent.dark, DELETE_ICON_ALPHA),\n };\n}\n\nfunction outlinedPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n const border: ViewStyle = { backgroundColor: 'transparent', borderWidth: 1, borderStyle: 'solid' };\n if (!isAccented(color)) {\n return {\n container: { ...border, borderColor: neutralBorder(theme) },\n pressed: { backgroundColor: theme.palette.action.hover },\n label: { color: theme.palette.text.primary },\n deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { ...border, borderColor: alpha(accent.main, OUTLINED_BORDER_ALPHA) },\n pressed: { backgroundColor: alpha(accent.main, OUTLINED_HOVER_ALPHA) },\n label: { color: accent.main },\n deleteColor: alpha(accent.main, OUTLINED_BORDER_ALPHA),\n };\n}\n\n/\n What MUI's chip paints, as React Native styles. `selected` tints an OUTLINED\n * chip with `action.selected` — a filled one is already solid, which is what\n * `Chip.styles.tsx` decided for the web.\n /\nexport function chipPaint(\n theme: UiTheme,\n variant: ChipVariant,\n color: ChipColor,\n selected: boolean,\n): ChipPaint {\n const paint =\n variant === 'outlined' ? outlinedPaint(theme, color) : variant === 'soft' ? softPaint(theme, color) : filledPaint(theme, color);\n if (variant !== 'outlined' \|\| !selected) return paint;\n return {\n ...paint,\n container: { ...paint.container, backgroundColor: theme.palette.action.selected },\n };\n}\n\n/* The pill itself: MUI's height, its 16px radius, and the disabled fade. /\nexport function chipContainerStyle(metrics: ChipSizeMetrics, disabled: boolean): ViewStyle {\n return {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n maxWidth: '100%',\n height: metrics.height,\n borderRadius: CHIP_RADIUS,\n ...(disabled ? { opacity: CHIP_DISABLED_OPACITY } : {}),\n };\n}\n\n/* The label: MUI's 13px, padded by the variant, clipped rather than wrapped. /\nexport function chipLabelStyle(\n theme: UiTheme,\n metrics: ChipSizeMetrics,\n variant: ChipVariant,\n): TextStyle {\n const padding = variant === 'outlined' ? metrics.labelPaddingOutlined : metrics.labelPadding;\n return {\n fontFamily: theme.typography.fontFamily,\n fontSize: CHIP_FONT_SIZE,\n paddingLeft: padding,\n paddingRight: padding,\n flexShrink: 1,\n };\n}\n\n/* The margins MUI gives the leading slot, tucking it under the label's padding. /\nexport function chipLeadingSlotStyle(\n metrics: ChipSizeMetrics,\n variant: ChipVariant,\n slot: 'icon' \| 'avatar',\n): ViewStyle {\n const outlined = variant === 'outlined';\n const marginLeft =\n slot === 'icon'\n ? (outlined ? metrics.iconMarginLeftOutlined : metrics.iconMarginLeft)\n : (outlined ? metrics.avatarMarginLeftOutlined : metrics.avatarMarginLeft);\n return {\n marginLeft,\n marginRight: slot === 'icon' ? metrics.iconMarginRight : metrics.avatarMarginRight,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/* The delete glyph's own tuck, one pixel tighter when the chip is outlined. /\nexport function chipDeleteSlotStyle(metrics: ChipSizeMetrics, variant: ChipVariant): ViewStyle {\n return {\n marginLeft: metrics.deleteMarginLeft,\n marginRight:\n variant === 'outlined' ? metrics.deleteMarginRightOutlined : metrics.deleteMarginRight,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/* The round avatar box MUI draws for an `avatarSrc`. */\nexport function chipAvatarStyle(metrics: ChipSizeMetrics): ImageStyle {\n return {\n width: metrics.avatarSize,\n height: metrics.avatarSize,\n borderRadius: metrics.avatarSize / 2,\n overflow: 'hidden',\n };\n}\n\nexport const chipMetrics = (size: ChipMuiSize): ChipSizeMetrics => CHIP_SIZES[size];\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/components/data-display/Chip/Chip.native.tsx","../../../src/components/data-display/Chip/Chip.helpers.ts","../../../src/components/data-display/Chip/Chip.metrics.ts","../../../src/components/data-display/Chip/Chip.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n Image,\n Pressable,\n Text as RNText,\n View,\n type GestureResponderEvent,\n type StyleProp,\n type ViewStyle,\n} from 'react-native';\n\nimport { chipKeyAction, chipRole, isClickable, makeTestId } from './Chip.helpers';\nimport {\n chipAvatarStyle,\n chipContainerStyle,\n chipDeleteSlotStyle,\n chipLabelStyle,\n chipLeadingSlotStyle,\n chipMetrics,\n chipPaint,\n type ChipPaint,\n} from './Chip.look.native';\nimport { chipMuiSize, type ChipSizeMetrics } from './Chip.metrics';\nimport type { ChipProps, ChipVariant } from './Chip.types.native';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webKeyDown, type WebKeyHandler } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\ninterface SlotArgs {\n metrics: ChipSizeMetrics;\n variant: ChipVariant;\n}\n\n/*\n The leading slot. MUI restyles the icon ELEMENT through a class — 24px, or\n * 18px when small — which a native renderer cannot do to an arbitrary node, so\n * the slot carries the margins and the glyph keeps the size it was given.\n /\nfunction LeadingSlot({\n metrics,\n variant,\n avatar,\n avatarSrc,\n icon,\n testID,\n}: SlotArgs &\n Pick<ChipProps, 'avatar' \| 'avatarSrc' \| 'icon'> & { testID: string }): React.JSX.Element \| null {\n if (avatar) {\n return <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>{avatar}</View>;\n }\n if (avatarSrc) {\n return (\n <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>\n <Image\n source={{ uri: avatarSrc }}\n style={chipAvatarStyle(metrics)}\n accessibilityIgnoresInvertColors\n />\n </View>\n );\n }\n if (icon) {\n return (\n <View style={chipLeadingSlotStyle(metrics, variant, 'icon')} testID={testID}>\n {icon}\n </View>\n );\n }\n return null;\n}\n\n/* MUI's `deleteIcon`: the `Cancel` glyph, pressable, tucked under the label. /\nfunction DeleteSlot({\n metrics,\n variant,\n color,\n onDelete,\n deleteLabel = EN_US_UI_LABELS.common.delete,\n disabled,\n testID,\n}: SlotArgs & {\n color: string;\n deleteLabel?: string;\n onDelete?: () => void;\n disabled?: boolean;\n testID: string;\n}): React.JSX.Element {\n return (\n <Pressable\n testID={testID}\n role=\"button\"\n aria-label={deleteLabel}\n disabled={disabled}\n onPress={onDelete}\n style={chipDeleteSlotStyle(metrics, variant)}\n >\n <Icon name=\"Cancel\" size={metrics.deleteSize} color={color} />\n </Pressable>\n );\n}\n\ninterface ChipBodyProps extends SlotArgs {\n paint: ChipPaint;\n label: string;\n avatar?: ChipProps['avatar'];\n avatarSrc?: string;\n icon?: ChipProps['icon'];\n deletable?: boolean;\n disabled?: boolean;\n onDelete?: () => void;\n deleteLabel?: string;\n idFor: (suffix: string) => string;\n}\n\n/* Everything inside the pill: the leading slot, the label, the delete button. /\nfunction ChipBody({\n metrics,\n variant,\n paint,\n label,\n avatar,\n avatarSrc,\n icon,\n deletable,\n disabled,\n onDelete,\n deleteLabel,\n idFor,\n}: ChipBodyProps): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <>\n <LeadingSlot\n metrics={metrics}\n variant={variant}\n avatar={avatar}\n avatarSrc={avatarSrc}\n icon={icon}\n testID={idFor('icon')}\n />\n <RNText\n testID={idFor('label')}\n numberOfLines={1}\n style={[chipLabelStyle(theme, metrics, variant), paint.label]}\n >\n {label}\n </RNText>\n {deletable ? (\n <DeleteSlot\n metrics={metrics}\n variant={variant}\n color={paint.deleteColor}\n onDelete={onDelete}\n deleteLabel={deleteLabel}\n disabled={disabled}\n testID={idFor('delete')}\n />\n ) : null}\n </>\n );\n}\n\ninterface KeyDownArgs {\n role: 'option' \| 'button' \| undefined;\n disabled?: boolean;\n deletable?: boolean;\n selectable?: boolean;\n /* Whether the chip acts at all, under either handler spelling. /\n acts?: unknown;\n onClick?: () => void;\n onDelete?: () => void;\n}\n\n/\n The half of the chip's keyboard contract react-native-web does NOT already\n * cover. Its `Pressable` turns Enter into a press on any role, and Space into\n * one only on a `button` role (`isValidKeyPress`) — so a selectable chip, which\n * is an `option`, needs Space wiring here, and Delete/Backspace is never its.\n * On a device none of this is ever called.\n /\nfunction makeChipKeyDown(args: KeyDownArgs): WebKeyHandler {\n return (event) => {\n const action = chipKeyAction(event.key, { ...args, onClick: args.acts });\n if (action === null) return;\n if (action === 'delete') {\n event.preventDefault();\n args.onDelete?.();\n return;\n }\n if (event.key === 'Enter' \|\| args.role === 'button') return;\n event.preventDefault();\n args.onClick?.();\n };\n}\n\n/\n The native `Chip`: MUI's pill on a `Pressable`, reachable by keyboard only\n * when it acts — which is the same rule MUI applies through `clickable`.\n /\nexport const Chip = React.forwardRef<View, ChipProps>((props, ref) => {\n const {\n label,\n variant = 'filled',\n size = 'md',\n color = 'primary',\n avatarSrc,\n avatar,\n icon,\n selected,\n selectable,\n deletable,\n disabled,\n onClick,\n onPress,\n onDelete,\n deleteLabel,\n dataTestId,\n testID,\n style,\n ...rest\n } = props;\n const theme = useUiTheme();\n const chipId = testID ?? dataTestId;\n const metrics = chipMetrics(chipMuiSize(size));\n const paint = chipPaint(theme, variant, color, Boolean(selected));\n const acts = onClick ?? onPress;\n const clickable = isClickable(disabled, acts, selectable);\n const role = chipRole(selectable, acts);\n\n const base: StyleProp<ViewStyle> = [\n chipContainerStyle(metrics, Boolean(disabled)),\n paint.container,\n style,\n ];\n\n const press = (event: GestureResponderEvent): void => {\n onClick?.();\n onPress?.(event);\n };\n\n return (\n <Pressable\n ref={ref}\n testID={chipId \|\| 'chip'}\n role={role}\n aria-selected={selectable ? selected : undefined}\n disabled={disabled}\n // MUI makes only a clickable chip keyboard-reachable; react-native-web\n // would otherwise give every Pressable a tab stop.\n tabIndex={clickable ? 0 : -1}\n onPress={clickable ? press : undefined}\n {...webKeyDown(\n makeChipKeyDown({ role, disabled, deletable, selectable, acts, onClick, onDelete }),\n )}\n style={(state) => [base, state.pressed && clickable ? paint.pressed : null]}\n {...rest}\n >\n <ChipBody\n metrics={metrics}\n variant={variant}\n paint={paint}\n label={label}\n avatar={avatar}\n avatarSrc={avatarSrc}\n icon={icon}\n deletable={deletable}\n disabled={disabled}\n onDelete={onDelete}\n deleteLabel={deleteLabel}\n idFor={makeTestId(chipId)}\n />\n </Pressable>\n );\n});\n\nChip.displayName = 'Chip';\n","/* `${dataTestId}-label`, or `chip-label` when the caller named nothing. /\nexport const makeTestId =\n (dataTestId?: string) =>\n (suffix: string): string =>\n dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;\n\n/* `option` when the chip belongs to a selectable set, `button` when it merely acts. /\nexport const chipRole = (\n selectable?: boolean,\n // `unknown`, because the two renderers hand this a differently-typed handler\n // and all that is asked of it here is whether the caller supplied one.\n onClick?: unknown,\n): 'option' \| 'button' \| undefined => {\n if (selectable) return 'option';\n return onClick ? 'button' : undefined;\n};\n\nexport const isClickable = (\n disabled?: boolean,\n onClick?: unknown,\n selectable?: boolean,\n): boolean => !disabled && (Boolean(onClick) \|\| Boolean(selectable));\n\n/* What a key press on a chip means, if anything. /\nexport type ChipKeyAction = 'delete' \| 'activate' \| null;\n\nconst DELETE_KEYS = new Set(['Delete', 'Backspace']);\nconst ACTIVATE_KEYS = new Set(['Enter', ' ']);\n\nexport interface ChipKeyArgs {\n disabled?: boolean;\n deletable?: boolean;\n selectable?: boolean;\n onClick?: unknown;\n onDelete?: unknown;\n}\n\n/\n A chip is not a native control, so the two keyboard conventions it stands in\n * for are decided by hand: Delete/Backspace removes it, Enter/Space activates\n * it. Both renderers read this one decision — the web wires it to the DOM\n * handler, the native half to react-native-web's (see `Chip.native.tsx`).\n /\nexport function chipKeyAction(key: string, a: ChipKeyArgs): ChipKeyAction {\n if (a.disabled) return null;\n if (DELETE_KEYS.has(key) && a.deletable && a.onDelete) return 'delete';\n if (ACTIVATE_KEYS.has(key) && (a.onClick \|\| a.selectable)) return 'activate';\n return null;\n}\n","import type { ChipSize } from './Chip.base';\n\n/\n THE NUMBERS BOTH `Chip` RENDERERS DRAW WITH.\n \n Most of them are MUI's own `Chip` geometry rather than anything this package\n * writes — the 32px pill, the 13px label, the 5px/-6px icon tuck — because the\n * web half hands the drawing to `MuiChip` and the native half has to draw it.\n * Restated here once, read by both, so the two cannot disagree about a chip's\n * height. What THIS package adds (`Chip.styles.tsx`'s hover lift, its shadow\n * and its transition) is at the bottom, and the web derives its CSS from it.\n /\n\n/* MUI draws two chip sizes; ours are the house abbreviations for them. /\nexport type ChipMuiSize = 'small' \| 'medium';\n\nexport const chipMuiSize = (size: ChipSize): ChipMuiSize =>\n size === 'xs' \|\| size === 'sm' ? 'small' : 'medium';\n\nexport interface ChipSizeMetrics {\n height: number;\n /* The label's own side padding, filled and outlined (outlined is 1px tighter). /\n labelPadding: number;\n labelPaddingOutlined: number;\n /* The leading icon's box, and how far it tucks under the label. /\n iconSize: number;\n iconMarginLeft: number;\n iconMarginLeftOutlined: number;\n iconMarginRight: number;\n /* The avatar's round box and the type inside it. /\n avatarSize: number;\n avatarFontSize: number;\n avatarMarginLeft: number;\n avatarMarginLeftOutlined: number;\n avatarMarginRight: number;\n /* The delete glyph's box and its own tuck. /\n deleteSize: number;\n deleteMarginLeft: number;\n deleteMarginRight: number;\n deleteMarginRightOutlined: number;\n}\n\nexport const CHIP_SIZES: Record<ChipMuiSize, ChipSizeMetrics> = {\n medium: {\n height: 32,\n labelPadding: 12,\n labelPaddingOutlined: 11,\n iconSize: 24,\n iconMarginLeft: 5,\n iconMarginLeftOutlined: 4,\n iconMarginRight: -6,\n avatarSize: 24,\n avatarFontSize: 12,\n avatarMarginLeft: 5,\n avatarMarginLeftOutlined: 4,\n avatarMarginRight: -6,\n deleteSize: 22,\n deleteMarginLeft: -6,\n deleteMarginRight: 5,\n deleteMarginRightOutlined: 5,\n },\n small: {\n height: 24,\n labelPadding: 8,\n labelPaddingOutlined: 7,\n iconSize: 18,\n iconMarginLeft: 4,\n iconMarginLeftOutlined: 2,\n iconMarginRight: -4,\n avatarSize: 18,\n avatarFontSize: 10,\n avatarMarginLeft: 4,\n avatarMarginLeftOutlined: 2,\n avatarMarginRight: -4,\n deleteSize: 16,\n deleteMarginLeft: -4,\n deleteMarginRight: 4,\n deleteMarginRightOutlined: 3,\n },\n};\n\n/* MUI's `borderRadius: 32 / 2` — a pill at either height, since the box clamps it. /\nexport const CHIP_RADIUS = 16;\n/* The label's type, in px. MUI sets it on the root and the small size keeps it. /\nexport const CHIP_FONT_SIZE = 13;\n/* MUI's `palette.action.disabledOpacity`. /\nexport const CHIP_DISABLED_OPACITY = 0.38;\n/* An outlined chip's hairline: the hue at 0.7, or the grey ramp for `neutral`. /\nexport const OUTLINED_BORDER_ALPHA = 0.7;\n/* The delete glyph over an unaccented chip, and over a coloured one. /\nexport const DELETE_ICON_ALPHA = 0.26;\nexport const DELETE_ICON_ON_COLOR_ALPHA = 0.7;\n/* MUI's `action.hoverOpacity`, the wash a clickable outlined chip takes. /\nexport const OUTLINED_HOVER_ALPHA = 0.04;\n\n/ ── What this package adds on top of MUI's chip ──────────────────────────── /\n\n/* The lift a clickable chip takes on hover, and the shadow under it. /\nexport const HOVER_LIFT_PX = 1;\nexport const HOVER_SHADOW = { offsetY: 4, blur: 12, alphaLight: 0.15, alphaDark: 0.3 } as const;\nexport const CHIP_TRANSITION_MS = 200;\nexport const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/* A soft chip's ground: the colour at this alpha over the page. /\nexport const SOFT_GROUND_ALPHA = 0.14;\n/* A soft chip's hover ground. /\nexport const SOFT_HOVER_ALPHA = 0.22;\n","import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';\n\nimport type { ChipColor, ChipVariant } from './Chip.base';\nimport {\n CHIP_DISABLED_OPACITY,\n CHIP_FONT_SIZE,\n CHIP_RADIUS,\n CHIP_SIZES,\n DELETE_ICON_ALPHA,\n DELETE_ICON_ON_COLOR_ALPHA,\n OUTLINED_BORDER_ALPHA,\n OUTLINED_HOVER_ALPHA,\n SOFT_GROUND_ALPHA,\n SOFT_HOVER_ALPHA,\n type ChipMuiSize,\n type ChipSizeMetrics,\n} from './Chip.metrics';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/* MUI's `action.selectedOpacity`; its hover wash adds `OUTLINED_HOVER_ALPHA` on top. /\nconst SELECTED_OPACITY = 0.08;\n\nexport interface ChipPaint {\n container: ViewStyle;\n /* The web's `:hover` background, which touch has no equivalent of. /\n pressed: ViewStyle;\n label: TextStyle;\n deleteColor: string;\n}\n\n/* `neutral` is MUI's `default`: no accent, the ink and the ramp instead. /\nconst isAccented = (color: ChipColor): boolean => color !== 'neutral';\n\n/* An unaccented chip's hairline, which follows the mode rather than a hue. /\nconst neutralBorder = (theme: UiTheme): string =>\n theme.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700];\n\nfunction filledPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n if (!isAccented(color)) {\n return {\n container: { backgroundColor: theme.palette.action.selected },\n pressed: { backgroundColor: alpha(theme.palette.action.selected, SELECTED_OPACITY + OUTLINED_HOVER_ALPHA) },\n label: { color: theme.palette.text.primary },\n deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { backgroundColor: accent.main },\n pressed: { backgroundColor: accent.dark },\n label: { color: accent.contrastText },\n deleteColor: alpha(accent.contrastText, DELETE_ICON_ON_COLOR_ALPHA),\n };\n}\n\nfunction softPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n if (!isAccented(color)) {\n return {\n container: { backgroundColor: theme.palette.action.selected },\n pressed: { backgroundColor: theme.palette.action.hover },\n label: { color: theme.palette.text.secondary, fontWeight: '600' },\n deleteColor: alpha(theme.palette.text.secondary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },\n pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },\n label: { color: accent.dark, fontWeight: '600' },\n deleteColor: alpha(accent.dark, DELETE_ICON_ALPHA),\n };\n}\n\nfunction outlinedPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n const border: ViewStyle = { backgroundColor: 'transparent', borderWidth: 1, borderStyle: 'solid' };\n if (!isAccented(color)) {\n return {\n container: { ...border, borderColor: neutralBorder(theme) },\n pressed: { backgroundColor: theme.palette.action.hover },\n label: { color: theme.palette.text.primary },\n deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { ...border, borderColor: alpha(accent.main, OUTLINED_BORDER_ALPHA) },\n pressed: { backgroundColor: alpha(accent.main, OUTLINED_HOVER_ALPHA) },\n label: { color: accent.main },\n deleteColor: alpha(accent.main, OUTLINED_BORDER_ALPHA),\n };\n}\n\n/\n What MUI's chip paints, as React Native styles. `selected` tints an OUTLINED\n * chip with `action.selected` — a filled one is already solid, which is what\n * `Chip.styles.tsx` decided for the web.\n /\nexport function chipPaint(\n theme: UiTheme,\n variant: ChipVariant,\n color: ChipColor,\n selected: boolean,\n): ChipPaint {\n const paint =\n variant === 'outlined' ? outlinedPaint(theme, color) : variant === 'soft' ? softPaint(theme, color) : filledPaint(theme, color);\n if (variant !== 'outlined' \|\| !selected) return paint;\n return {\n ...paint,\n container: { ...paint.container, backgroundColor: theme.palette.action.selected },\n };\n}\n\n/* The pill itself: MUI's height, its 16px radius, and the disabled fade. /\nexport function chipContainerStyle(metrics: ChipSizeMetrics, disabled: boolean): ViewStyle {\n return {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n maxWidth: '100%',\n height: metrics.height,\n borderRadius: CHIP_RADIUS,\n ...(disabled ? { opacity: CHIP_DISABLED_OPACITY } : {}),\n };\n}\n\n/* The label: MUI's 13px, padded by the variant, clipped rather than wrapped. /\nexport function chipLabelStyle(\n theme: UiTheme,\n metrics: ChipSizeMetrics,\n variant: ChipVariant,\n): TextStyle {\n const padding = variant === 'outlined' ? metrics.labelPaddingOutlined : metrics.labelPadding;\n return {\n fontFamily: theme.typography.fontFamily,\n fontSize: CHIP_FONT_SIZE,\n paddingLeft: padding,\n paddingRight: padding,\n flexShrink: 1,\n };\n}\n\n/* The margins MUI gives the leading slot, tucking it under the label's padding. /\nexport function chipLeadingSlotStyle(\n metrics: ChipSizeMetrics,\n variant: ChipVariant,\n slot: 'icon' \| 'avatar',\n): ViewStyle {\n const outlined = variant === 'outlined';\n const marginLeft =\n slot === 'icon'\n ? (outlined ? metrics.iconMarginLeftOutlined : metrics.iconMarginLeft)\n : (outlined ? metrics.avatarMarginLeftOutlined : metrics.avatarMarginLeft);\n return {\n marginLeft,\n marginRight: slot === 'icon' ? metrics.iconMarginRight : metrics.avatarMarginRight,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/* The delete glyph's own tuck, one pixel tighter when the chip is outlined. /\nexport function chipDeleteSlotStyle(metrics: ChipSizeMetrics, variant: ChipVariant): ViewStyle {\n return {\n marginLeft: metrics.deleteMarginLeft,\n marginRight:\n variant === 'outlined' ? metrics.deleteMarginRightOutlined : metrics.deleteMarginRight,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/* The round avatar box MUI draws for an `avatarSrc`. */\nexport function chipAvatarStyle(metrics: ChipSizeMetrics): ImageStyle {\n return {\n width: metrics.avatarSize,\n height: metrics.avatarSize,\n borderRadius: metrics.avatarSize / 2,\n overflow: 'hidden',\n };\n}\n\nexport const chipMetrics = (size: ChipMuiSize): ChipSizeMetrics => CHIP_SIZES[size];\n"],"mappings":"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","names":[]}

package/dist/native/data-display/EmptyState.js CHANGED Viewed

@@ -1,13 +1,14 @@
 import {
   EmptyState
-} from "../chunks/chunk-AVHGS66L.js";
-import "../chunks/chunk-BXNZHDXK.js";
+} from "../chunks/chunk-7AVFQB6A.js";
+import "../chunks/chunk-67CYDCHZ.js";
 import "../chunks/chunk-3JBZE4I6.js";
 import "../chunks/chunk-ZRQHLTYG.js";
 import "../chunks/chunk-DN73KYIZ.js";
 import "../chunks/chunk-5GJ5OG5R.js";
 import "../chunks/chunk-RHD3625Y.js";
 import "../chunks/chunk-2UFNPDYT.js";
+import "../chunks/chunk-DUELD4HY.js";
 import "../chunks/chunk-5WLOVHKK.js";
 import "../chunks/chunk-AR5O4BEY.js";
 import "../chunks/chunk-ZYSOBULX.js";

package/dist/native/data-display/ErrorState.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunks/chunk-BXNZHDXK.js";
+} from "../chunks/chunk-67CYDCHZ.js";
 import "../chunks/chunk-3JBZE4I6.js";
 import "../chunks/chunk-ZRQHLTYG.js";
 import {
@@ -15,6 +15,9 @@ import {
   MUI_TYPE,
   muiTypeStyle
 } from "../chunks/chunk-2UFNPDYT.js";
+import {
+  EN_US_UI_LABELS
+} from "../chunks/chunk-DUELD4HY.js";
 import "../chunks/chunk-5WLOVHKK.js";
 import {
   resolveTestId,
@@ -126,7 +129,7 @@ var ErrorState = React.memo(function ErrorState2(props) {
     message,
     title,
     onRetry,
-    retryLabel = "Retry",
+    retryLabel = EN_US_UI_LABELS.errorState.retry,
     severity = "error",
     icon,
     style,

package/dist/native/data-display/ErrorState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/data-display/ErrorState/ErrorState.native.tsx","../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text as RNText, View, type TextStyle, type ViewStyle } from 'react-native';\n\nimport {\n ERROR_ICON_BOX,\n ERROR_ICON_BOX_OPACITY,\n ERROR_ICON_SIZE,\n ERROR_MESSAGE_LINE_HEIGHT,\n ERROR_MESSAGE_MAX_WIDTH,\n ERROR_STATE_GAP_UNITS,\n ERROR_STATE_MIN_HEIGHT,\n ERROR_STATE_PADDING_UNITS,\n ERROR_TEXT_GAP_UNITS,\n RETRY_BUTTON,\n RETRY_MARGIN_TOP_UNITS,\n RETRY_MIN_WIDTH,\n errorStatePalette,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { Button } from '../../form/Button/Button.native';\n\nconst makeTestId =\n (dataTestId?: string) =>\n (suffix: string): string =>\n dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\n/** MUI's `h6` as an `h3`, medium weight, in the body ink — what the web `Typography` renders. /\nexport function titleStyle(theme: UiTheme): TextStyle {\n return {\n ...muiTypeStyle(theme, 'h6'),\n fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,\n color: theme.palette.text.primary,\n textAlign: 'center',\n };\n}\n\n/* MUI's `body2` on a 1.6 line height, muted, wrapping at 400px. /\nexport function messageStyle(theme: UiTheme): TextStyle {\n return {\n ...muiTypeStyle(theme, 'body2'),\n lineHeight: MUI_TYPE.body2.fontSize ERROR_MESSAGE_LINE_HEIGHT,\n color: theme.palette.text.secondary,\n maxWidth: ERROR_MESSAGE_MAX_WIDTH,\n textAlign: 'center',\n };\n}\n\n/** The 80px disc behind the glyph, in the severity's `light` shade. /\nexport function iconBoxStyle(theme: UiTheme, severity: ErrorStateSeverity): ViewStyle {\n return {\n width: ERROR_ICON_BOX,\n height: ERROR_ICON_BOX,\n borderRadius: ERROR_ICON_BOX / 2,\n backgroundColor: errorStatePalette(theme, severity).light,\n opacity: ERROR_ICON_BOX_OPACITY,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/* The web retry is MUI's medium outlined button; the house `Button` is sized to it here. /\nexport function retryStyle(theme: UiTheme): ViewStyle {\n return {\n marginTop: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n minWidth: RETRY_MIN_WIDTH,\n paddingVertical: RETRY_BUTTON.paddingVertical,\n paddingHorizontal: RETRY_BUTTON.paddingHorizontal,\n borderRadius: theme.radius.md,\n };\n}\n\nfunction ErrorIcon({\n severity,\n icon,\n testId,\n}: {\n severity: ErrorStateSeverity;\n icon?: React.ReactNode;\n testId: string;\n}): React.JSX.Element {\n const theme = useUiTheme();\n const glyph = severity === 'error' ? 'ErrorOutline' : 'WarningAmber';\n return (\n <View testID={testId} style={iconBoxStyle(theme, severity)}>\n {icon \|\| <Icon name={glyph} size={ERROR_ICON_SIZE} color={errorStatePalette(theme, severity).main} />}\n </View>\n );\n}\n\nfunction ErrorText({\n title,\n message,\n titleId,\n testId,\n}: {\n title?: string;\n message: string;\n titleId: string;\n testId: (suffix: string) => string;\n}): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <View style={[styles.text, { gap: theme.spacing(ERROR_TEXT_GAP_UNITS) }]}>\n {title ? (\n <RNText\n id={titleId}\n role=\"heading\"\n {...webAria({ 'aria-level': 3 })}\n testID={testId('title')}\n style={titleStyle(theme)}\n >\n {title}\n </RNText>\n ) : null}\n <RNText id={`${titleId}-message`} testID={testId('message')} style={messageStyle(theme)}>\n {message}\n </RNText>\n </View>\n );\n}\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo(function ErrorState(props) {\n const {\n message,\n title,\n onRetry,\n retryLabel = 'Retry',\n severity = 'error',\n icon,\n style,\n ...others\n } = props;\n const theme = useUiTheme();\n const titleId = React.useId();\n const dataTestId = resolveTestId(others);\n const testId = makeTestId(dataTestId);\n const rest = withoutTestIdProps(others);\n\n return (\n <View\n role=\"alert\"\n aria-labelledby={title ? titleId : undefined}\n {...webAria({ 'aria-describedby': `${titleId}-message` })}\n testID={dataTestId \|\| 'error-state'}\n style={[\n styles.root,\n {\n padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n minHeight: ERROR_STATE_MIN_HEIGHT,\n gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n },\n style,\n ]}\n {...rest}\n >\n <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n {onRetry ? (\n <Button\n variant=\"outline\"\n color={severity === 'error' ? 'danger' : 'warning'}\n size=\"sm\"\n icon={<Icon name=\"Refresh\" size={RETRY_BUTTON.iconSize} color={severity === 'error' ? 'danger' : 'warning'} />}\n onClick={onRetry}\n testID={testId('retry-button')}\n style={retryStyle(theme)}\n >\n {retryLabel}\n </Button>\n ) : null}\n </View>\n );\n});\n\nErrorState.displayName = 'ErrorState';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n text: {\n alignItems: 'center',\n },\n});\n","import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/\n THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n \n `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n /\n\n/* The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. /\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/* The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. /\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/* Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. /\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/* The retry button: 8px below the text, no narrower than 120px. /\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/\n The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n /\nexport const RETRY_BUTTON = {\n paddingVertical: 5,\n paddingHorizontal: 15,\n iconSize: 20,\n} as const;\n\n/* `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":"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","names":["ErrorState"]}
1	+ {"version":3,"sources":["../../../src/components/data-display/ErrorState/ErrorState.native.tsx","../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text as RNText, View, type TextStyle, type ViewStyle } from 'react-native';\n\nimport {\n ERROR_ICON_BOX,\n ERROR_ICON_BOX_OPACITY,\n ERROR_ICON_SIZE,\n ERROR_MESSAGE_LINE_HEIGHT,\n ERROR_MESSAGE_MAX_WIDTH,\n ERROR_STATE_GAP_UNITS,\n ERROR_STATE_MIN_HEIGHT,\n ERROR_STATE_PADDING_UNITS,\n ERROR_TEXT_GAP_UNITS,\n RETRY_BUTTON,\n RETRY_MARGIN_TOP_UNITS,\n RETRY_MIN_WIDTH,\n errorStatePalette,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { Button } from '../../form/Button/Button.native';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\nconst makeTestId =\n (dataTestId?: string) =>\n (suffix: string): string =>\n dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\n/** MUI's `h6` as an `h3`, medium weight, in the body ink — what the web `Typography` renders. /\nexport function titleStyle(theme: UiTheme): TextStyle {\n return {\n ...muiTypeStyle(theme, 'h6'),\n fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,\n color: theme.palette.text.primary,\n textAlign: 'center',\n };\n}\n\n/* MUI's `body2` on a 1.6 line height, muted, wrapping at 400px. /\nexport function messageStyle(theme: UiTheme): TextStyle {\n return {\n ...muiTypeStyle(theme, 'body2'),\n lineHeight: MUI_TYPE.body2.fontSize ERROR_MESSAGE_LINE_HEIGHT,\n color: theme.palette.text.secondary,\n maxWidth: ERROR_MESSAGE_MAX_WIDTH,\n textAlign: 'center',\n };\n}\n\n/** The 80px disc behind the glyph, in the severity's `light` shade. /\nexport function iconBoxStyle(theme: UiTheme, severity: ErrorStateSeverity): ViewStyle {\n return {\n width: ERROR_ICON_BOX,\n height: ERROR_ICON_BOX,\n borderRadius: ERROR_ICON_BOX / 2,\n backgroundColor: errorStatePalette(theme, severity).light,\n opacity: ERROR_ICON_BOX_OPACITY,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/* The web retry is MUI's medium outlined button; the house `Button` is sized to it here. /\nexport function retryStyle(theme: UiTheme): ViewStyle {\n return {\n marginTop: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n minWidth: RETRY_MIN_WIDTH,\n paddingVertical: RETRY_BUTTON.paddingVertical,\n paddingHorizontal: RETRY_BUTTON.paddingHorizontal,\n borderRadius: theme.radius.md,\n };\n}\n\nfunction ErrorIcon({\n severity,\n icon,\n testId,\n}: {\n severity: ErrorStateSeverity;\n icon?: React.ReactNode;\n testId: string;\n}): React.JSX.Element {\n const theme = useUiTheme();\n const glyph = severity === 'error' ? 'ErrorOutline' : 'WarningAmber';\n return (\n <View testID={testId} style={iconBoxStyle(theme, severity)}>\n {icon \|\| <Icon name={glyph} size={ERROR_ICON_SIZE} color={errorStatePalette(theme, severity).main} />}\n </View>\n );\n}\n\nfunction ErrorText({\n title,\n message,\n titleId,\n testId,\n}: {\n title?: string;\n message: string;\n titleId: string;\n testId: (suffix: string) => string;\n}): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <View style={[styles.text, { gap: theme.spacing(ERROR_TEXT_GAP_UNITS) }]}>\n {title ? (\n <RNText\n id={titleId}\n role=\"heading\"\n {...webAria({ 'aria-level': 3 })}\n testID={testId('title')}\n style={titleStyle(theme)}\n >\n {title}\n </RNText>\n ) : null}\n <RNText id={`${titleId}-message`} testID={testId('message')} style={messageStyle(theme)}>\n {message}\n </RNText>\n </View>\n );\n}\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo(function ErrorState(props) {\n const {\n message,\n title,\n onRetry,\n retryLabel = EN_US_UI_LABELS.errorState.retry,\n severity = 'error',\n icon,\n style,\n ...others\n } = props;\n const theme = useUiTheme();\n const titleId = React.useId();\n const dataTestId = resolveTestId(others);\n const testId = makeTestId(dataTestId);\n const rest = withoutTestIdProps(others);\n\n return (\n <View\n role=\"alert\"\n aria-labelledby={title ? titleId : undefined}\n {...webAria({ 'aria-describedby': `${titleId}-message` })}\n testID={dataTestId \|\| 'error-state'}\n style={[\n styles.root,\n {\n padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n minHeight: ERROR_STATE_MIN_HEIGHT,\n gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n },\n style,\n ]}\n {...rest}\n >\n <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n {onRetry ? (\n <Button\n variant=\"outline\"\n color={severity === 'error' ? 'danger' : 'warning'}\n size=\"sm\"\n icon={<Icon name=\"Refresh\" size={RETRY_BUTTON.iconSize} color={severity === 'error' ? 'danger' : 'warning'} />}\n onClick={onRetry}\n testID={testId('retry-button')}\n style={retryStyle(theme)}\n >\n {retryLabel}\n </Button>\n ) : null}\n </View>\n );\n});\n\nErrorState.displayName = 'ErrorState';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n text: {\n alignItems: 'center',\n },\n});\n","import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/\n THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n \n `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n /\n\n/* The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. /\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/* The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. /\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/* Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. /\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/* The retry button: 8px below the text, no narrower than 120px. /\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/\n The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n /\nexport const RETRY_BUTTON = {\n paddingVertical: 5,\n paddingHorizontal: 15,\n iconSize: 20,\n} as const;\n\n/* `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":"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","names":["ErrorState"]}

package/dist/native/data-display/FleetMap.js CHANGED Viewed

@@ -7,8 +7,8 @@ import {
 } from "../chunks/chunk-MJVSQXOD.js";
 import {
   EmptyState
-} from "../chunks/chunk-AVHGS66L.js";
-import "../chunks/chunk-BXNZHDXK.js";
+} from "../chunks/chunk-7AVFQB6A.js";
+import "../chunks/chunk-67CYDCHZ.js";
 import "../chunks/chunk-3JBZE4I6.js";
 import "../chunks/chunk-ZRQHLTYG.js";
 import {
@@ -21,6 +21,7 @@ import {
   MUI_FONT_WEIGHT_MEDIUM,
   muiTypeStyle
 } from "../chunks/chunk-2UFNPDYT.js";
+import "../chunks/chunk-DUELD4HY.js";
 import "../chunks/chunk-5WLOVHKK.js";
 import "../chunks/chunk-AR5O4BEY.js";
 import {

package/dist/native/data-display/FleetMap.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/data-display/FleetMap/FleetMap.native.tsx","../../../src/components/data-display/FleetMap/FleetMap.hooks.ts","../../../src/components/data-display/FleetMap/FleetMap.helpers.ts","../../../src/components/data-display/FleetMap/FleetMap.metrics.ts","../../../src/components/data-display/FleetMap/FleetRoster.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { EmptyState } from '../EmptyState/EmptyState.native';\n\nimport { useFleetMap } from './FleetMap.hooks';\nimport {\n FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n FLEET_DEFAULT_STALE_AFTER_SECONDS,\n FLEET_PANEL,\n} from './FleetMap.metrics';\nimport type { FleetMapProps } from './FleetMap.types.native';\nimport { FleetRoster } from './FleetRoster.native';\nimport { webAria, webRole } from '../../../platform/aria';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, muiTypeStyle } from '../../../tokens/mui-type';\n\n/*\n The reload announcement, and nothing else.\n \n A busy region marks itself stale for assistive technology but UTTERS nothing,\n * and the skeletons beside it are hidden from the reader — so a screen-reader\n * user got silence while the roster reloaded. This is the utterance.\n \n Optional by design: the sentence is in the reader's language, which only the\n * caller knows, and inventing an English one in a component whose whole premise\n * is that every word arrives through `copy` would be the bug it exists to\n * avoid. No `copy.loading`, no region.\n \n ## The node outlives the text, and that is the whole trick\n \n A live region has to exist BEFORE its content changes; a reader watches an\n * existing region for mutations rather than announcing one that appears already\n * populated. Mounting region-and-text together in a single commit is the classic\n * silent case — it satisfies a query while announcing nothing. So the region\n * mounts as soon as the caller offers the copy and merely EMPTIES when idle.\n \n `role=\"status\"` and `aria-live` reach the DOM through react-native-web; on a\n * device the announcement is made by `AccessibilityInfo` or not at all, which\n * is recorded in `NATIVE-NOTES.md` rather than papered over here.\n /\nfunction FleetStatus({\n announcement,\n loading,\n testId,\n}: {\n announcement: string \| undefined;\n loading: boolean;\n testId: string;\n}): React.JSX.Element \| null {\n // No copy, no region at all — the caller has not asked for an announcement.\n if (announcement === undefined) return null;\n return (\n <View\n {...webRole('status')}\n aria-live=\"polite\"\n accessibilityLiveRegion=\"polite\"\n testID={`${testId}-status`}\n style={styles.srOnly}\n >\n <Text>{loading ? announcement : ''}</Text>\n </View>\n );\n}\n\n/\n FleetMap on React Native — where a set of tracked units is right now.\n \n Product-free by construction: it draws a labelled row with a freshness, and\n * every word — the heading, the three freshness states, how a duration and a\n * distance are written — arrives through `copy`. Couriers, service vans and\n * field engineers are all the same list.\n \n ## What this renderer does NOT draw, and why\n \n There is no map. `MapPreview` — 2,200 lines that project, tile and decorate\n * their own surface — has no React Native build, and porting it is its own\n * change with its own consumers. What that costs is smaller than it sounds,\n * because the web half already calls this list \"the accessible representation,\n * not a sidebar\": every fact a pin carries — who, how recently, how precisely,\n * what they are carrying — is on a row, in an order the map cannot express. So\n * a native board is the half a screen reader was always given, and a device\n * gets the same answers a dispatcher asks for. The gap is stated in\n * `NATIVE-NOTES.md` rather than claimed away, and it is where the map goes when\n * `MapPreview` is ported.\n \n The consequence for the API is one line in `FleetMap.types.native.ts`: the\n * native copy interface has no `map` and no `mapLabel`, because a caller should\n * not be asked to name controls nothing renders.\n /\nexport const FleetMap: React.FC<FleetMapProps> = React.memo(\n ({\n units,\n copy,\n // NO default. `undefined` is what tells the hook the caller does not own\n // the selection; defaulting it to `null` made every render look controlled\n // and the uncontrolled path unreachable.\n selectedId,\n onSelect,\n laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,\n loading = false,\n maxHeight,\n style,\n dataTestId,\n }) => {\n const theme = useUiTheme();\n const testId = dataTestId ?? 'fleet-map';\n const { ordered, active, select, onKeyDown } = useFleetMap(units, selectedId, onSelect);\n\n return (\n <View\n {...webRole('region')}\n accessibilityLabel={copy.title}\n testID={testId}\n style={[styles.panel, { gap: theme.spacing(FLEET_PANEL.gapUnits) }, style]}\n >\n <Text\n {...webRole('heading')}\n {...webAria({ 'aria-level': 2 })}\n testID={`${testId}-title`}\n style={[\n muiTypeStyle(theme, 'body1'),\n { color: theme.palette.text.primary, fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}` },\n ]}\n >\n {copy.title}\n </Text>\n\n <FleetStatus announcement={copy.loading} loading={loading} testId={testId} />\n\n {!loading && ordered.length === 0 ? (\n <EmptyState\n variant=\"minimal\"\n title={copy.emptyTitle}\n description={copy.emptyDescription}\n dataTestId={`${testId}-empty`}\n />\n ) : (\n / The busy marker belongs on the BODY and never on the panel root —\n the live region announcing the reload is a sibling above, and a\n live region inside a busy subtree is exactly what busy tells\n assistive technology to hold back. Marking the root would silence\n the announcement for the whole of the only window in which it has\n anything to say. The web half splits them the same way, and the\n wrapper is also what the shared loading stories address. /\n <View\n aria-busy={loading \|\| undefined}\n accessibilityState={{ busy: loading }}\n testID={`${testId}-body`}\n style={styles.body}\n >\n <FleetRoster\n units={ordered}\n copy={copy}\n selectedId={active}\n onSelect={select}\n laggingAfterSeconds={laggingAfterSeconds}\n staleAfterSeconds={staleAfterSeconds}\n loading={loading}\n maxHeight={maxHeight}\n testId={testId}\n onKeyDown={onKeyDown}\n />\n </View>\n )}\n </View>\n );\n },\n);\n\nFleetMap.displayName = 'FleetMap';\n\nconst styles = StyleSheet.create({\n body: { flexShrink: 1, minWidth: 0 },\n panel: { flexDirection: 'column', minWidth: 0 },\n /\n Off screen but still in the tree, which is what a live region needs. A\n * `display: 'none'` view is not announced, and a zero-size one clips its text\n * on some readers.\n /\n srOnly: { height: 1, opacity: 0, overflow: 'hidden', position: 'absolute', width: 1 },\n});\n\nexport default FleetMap;\n","import React from 'react';\n\nimport { mapCentre, nextSelection, rosterOrder, type LatLng } from './FleetMap.helpers';\nimport type { FleetUnit } from './FleetMap.base';\n\n/\n The half of a key event this hook reads, spelled structurally.\n \n NOT `React.KeyboardEvent<HTMLDivElement>`: the native type program is checked\n * without the DOM lib (`tsconfig.native.json`), so a DOM type here would put\n * the whole hook out of reach of the React Native renderer that shares it. A\n * DOM event satisfies this shape, and a handler taking the wider type is\n * assignable wherever the narrower one is expected — so the web passes its own\n * `onKeyDown` unchanged.\n /\nexport interface FleetKeyEvent {\n key: string;\n altKey?: boolean;\n ctrlKey?: boolean;\n metaKey?: boolean;\n shiftKey?: boolean;\n preventDefault: () => void;\n}\n\n/\n Everything the board derives from its props, in one hook.\n \n Split out of the component so the component is layout and nothing else.\n \n The memos are honest about what they buy, which is less than it looks. `units`\n * arrives as a fresh array on every poll, so `ordered` and `markers` are\n * recomputed on every poll whatever these do — a new array is a new identity.\n * What they buy is stability across the renders a poll does NOT cause: a parent\n * re-render, a selection change (which re-runs `centre` but not `ordered`), a\n * theme flip. Sorting a fleet is cheap either way; this is tidiness, not a\n * measured win, and it should not be read as one.\n \n `centre` is the exception, and there it is load-bearing rather than tidy —\n * see {@link useFleetMap}.\n \n ## Selection works with, without, or half-way through a handler\n \n `selectedId` and `onSelect` are both optional, so all four combinations\n * arrive. Left purely controlled, the two useful ones broke: with neither prop\n * the roster was a listbox that answered nothing, and arrowing it called\n * `preventDefault` before a no-op `select`, so the keys did not move a\n * selection AND did not scroll the page either.\n \n So the hook keeps its own selection and defers to `selectedId` only when the\n * caller passes one — the ordinary controlled/uncontrolled split, the same one\n * an `<input>` makes. `onSelect` still fires either way, so a consumer can\n * observe the selection without owning it.\n /\n\n/* One pin, in the shape `MapPreview` takes. /\nexport interface FleetMarker {\n position: LatLng;\n title: string;\n onClick: () => void;\n}\n\nexport interface FleetMapState {\n /* The units, freshest first — see {@link rosterOrder}. /\n ordered: FleetUnit[];\n /\n The selection in force — the caller's when they own it, this hook's when\n * they do not. Everything downstream reads THIS and never the raw prop.\n /\n active: string \| null;\n /* Where the map points, or `null` when there is nothing to show. /\n centre: LatLng \| null;\n select: (id: string) => void;\n markers: FleetMarker[];\n onKeyDown: (event: FleetKeyEvent) => void;\n}\n\n/* Which way an arrow moves the selection, or `0` when it is not ours. /\nfunction stepFor(event: FleetKeyEvent): 1 \| -1 \| 0 {\n // A modified arrow is the PAGE's shortcut, not the roster's: Cmd+Down is\n // \"scroll to the end of the document\" on macOS, and Shift+Arrow extends a\n // selection. Capturing them would take a browser gesture away.\n if (event.altKey \|\| event.ctrlKey \|\| event.metaKey \|\| event.shiftKey) return 0;\n if (event.key === 'ArrowDown') return 1;\n if (event.key === 'ArrowUp') return -1;\n return 0;\n}\n\n/\n Who owns the selection, decided ONCE on the first render.\n \n Exactly as React decides it for an `<input>`, and for the same reason.\n * `selectedId` is typed `string \| null \| undefined`, so `useState<string>()` —\n * the natural shape for a caller — hands us `undefined` on the first render and\n * again on every reset. Re-deriving the mode from the prop each time would make\n * the component change its own semantics mid-life: it starts uncontrolled,\n * silently becomes controlled the moment the caller's `onSelect` writes a value\n * back, and then silently un-becomes it when they clear — resurrecting whatever\n * was selected before the hand-off.\n \n Latched, `undefined` is unambiguous within each mode: to a controlled board it\n * is \"nobody is selected\", so clearing the caller's state clears the roster; to\n * an uncontrolled one it is simply the prop staying absent. A caller who wants\n * control passes `string \| null` from the first render.\n /\nfunction useSelection(\n selectedId: string \| null \| undefined,\n onSelect: ((id: string) => void) \| undefined,\n): { active: string \| null; select: (id: string) => void; controlled: boolean } {\n const controlledRef = React.useRef(selectedId !== undefined);\n const controlled = controlledRef.current;\n const [own, setOwn] = React.useState<string \| null>(null);\n\n const select = React.useCallback(\n (id: string) => {\n if (!controlled) setOwn(id);\n onSelect?.(id);\n },\n [controlled, onSelect],\n );\n\n return { active: controlled ? (selectedId ?? null) : own, select, controlled };\n}\n\nexport function useFleetMap(\n units: readonly FleetUnit[],\n selectedId: string \| null \| undefined,\n onSelect: ((id: string) => void) \| undefined,\n): FleetMapState {\n const ordered = React.useMemo(() => rosterOrder(units), [units]);\n const { active, select, controlled } = useSelection(selectedId, onSelect);\n\n // Memoised on the COORDINATES and not the object, because `mapCentre` builds\n // a fresh literal every call and `MapPreview` re-centres from an effect keyed\n // on `center`'s identity. A poll that changes nothing would otherwise hand it\n // a new object, and the map would jump back to the centroid — throwing away a\n // pan the dispatcher had just made, on a timer, for as long as they watch it.\n //\n // ROUNDED, because keying on the raw numbers was not enough. `mapCentre`\n // sums over `ordered`, and floating-point addition is not associative — so\n // re-sorting the SAME coordinates can change the centroid's last bit.\n // `rosterOrder` sorts on `staleSeconds`, which moves on every poll, so rank\n // swaps are the ordinary case for a fleet that is standing still: measured\n // over 20k random three-rider fleets, a single adjacent swap changed the\n // centroid 17% of the time. Six decimals is ~11cm, far finer than a map\n // centre resolves and far coarser than the noise.\n const raw = mapCentre(ordered, active);\n const lat = raw === null ? null : Math.round(raw.lat 1e6) / 1e6;\n const lng = raw === null ? null : Math.round(raw.lng * 1e6) / 1e6;\n const centre = React.useMemo(\n () => (lat === null \|\| lng === null ? null : { lat, lng }),\n [lat, lng],\n );\n\n const onKeyDown = React.useCallback(\n (event: FleetKeyEvent) => {\n const step = stepFor(event);\n if (step === 0) return;\n // Nothing can move a CONTROLLED selection without a handler, so the keys\n // belong to the page. Swallowing them there left a keyboard user unable to\n // move the selection and unable to scroll past the roster.\n if (controlled && !onSelect) return;\n const next = nextSelection(ordered, active, step);\n // `preventDefault` only once a move is certain, so the page still scrolls\n // with the arrow keys when the list is empty and there is nothing to move.\n if (next === null) return;\n event.preventDefault();\n select(next);\n },\n [ordered, active, select, controlled, onSelect],\n );\n\n const markers = React.useMemo(\n () =>\n ordered.map((unit) => ({\n position: { lat: unit.latitude, lng: unit.longitude },\n title: unit.label,\n onClick: () => select(unit.id),\n })),\n [ordered, select],\n );\n\n return { ordered, active, centre, select, markers, onKeyDown };\n}\n","import type { FleetFreshness, FleetUnit } from './FleetMap.base';\n\n/*\n How current a fix is, on the two thresholds the caller supplied.\n \n Inclusive at both boundaries in the direction that reads better on a screen:\n * a unit exactly at the lagging threshold is already lagging. A boundary has to\n * fall somewhere, and the conservative side is the one that does not tell a\n * dispatcher somebody is live when they are on the edge of not being.\n /\nexport function freshnessOf(\n staleSeconds: number,\n laggingAfterSeconds: number,\n staleAfterSeconds: number,\n): FleetFreshness {\n if (staleSeconds >= staleAfterSeconds) return 'stale';\n if (staleSeconds >= laggingAfterSeconds) return 'lagging';\n return 'live';\n}\n\n/* A latitude/longitude pair, as the map wants its centre. /\nexport interface LatLng {\n lat: number;\n lng: number;\n}\n\n/\n Where the map should point.\n \n The selected unit when there is one — a dispatcher who clicked a name is\n * asking to look at them. Otherwise the fleet's own centroid, which keeps\n * everybody in frame without the caller having to compute a bounding box.\n \n `null` for an empty fleet rather than a coordinate: (0, 0) is a real place in\n * the Atlantic, and a map that quietly sails there is worse than one that says\n * it has nothing to show.\n /\nexport function mapCentre(\n units: readonly FleetUnit[],\n selectedId?: string \| null,\n): LatLng \| null {\n if (units.length === 0) return null;\n const selected = selectedId ? units.find((unit) => unit.id === selectedId) : undefined;\n if (selected) return { lat: selected.latitude, lng: selected.longitude };\n const sum = units.reduce(\n (acc, unit) => ({ lat: acc.lat + unit.latitude, lng: acc.lng + unit.longitude }),\n { lat: 0, lng: 0 },\n );\n return { lat: sum.lat / units.length, lng: sum.lng / units.length };\n}\n\n/\n The roster's order: freshest first, then alphabetically.\n \n Not the caller's order, deliberately. The one question this panel answers is\n * who is moving right now, and a list sorted by anything else buries the\n * answer under whoever happens to sort first. Ties break on the label so the\n * list does not reshuffle between polls when two units share a staleness.\n /\nexport function rosterOrder(units: readonly FleetUnit[]): FleetUnit[] {\n return [...units].sort(\n (a, b) => a.staleSeconds - b.staleSeconds \|\| a.label.localeCompare(b.label),\n );\n}\n\n/\n Move the selection by one row, wrapping at both ends.\n \n Wrapping rather than stopping: this is a short list a dispatcher arrows\n * through repeatedly, and a selection that sticks at the last row makes the\n * keyboard path feel broken next to the mouse one.\n /\nexport function nextSelection(\n units: readonly FleetUnit[],\n currentId: string \| null \| undefined,\n step: 1 \| -1,\n): string \| null {\n if (units.length === 0) return null;\n const index = units.findIndex((unit) => unit.id === currentId);\n // Nothing selected: Down opens at the top and Up opens at the bottom, which\n // is what every listbox in the house does.\n if (index === -1) return (step === 1 ? units[0] : units[units.length - 1])?.id ?? null;\n const next = (index + step + units.length) % units.length;\n return units[next]?.id ?? null;\n}\n","/\n THE NUMBERS BOTH `FleetMap` RENDERERS DRAW WITH.\n \n `FleetRoster.tsx` / `FleetMap.tsx` (web, MUI `sx`) and `FleetRoster.native.tsx`\n * / `FleetMap.native.tsx` (React Native) read this one table. The web hands the\n * spacing UNITS to `theme.spacing()` and the radius MULTIPLES to `sx`; native\n * multiplies the units by the theme's own spacing step and the multiples by\n * `shape.borderRadius`.\n \n Nothing here imports a renderer, a theme or a colour: a freshness dot's\n * COLOUR is the theme's (`success.main`, `warning.main`, `text.disabled`), and\n * the two sides reach the same palette through different doors.\n \n ## Why the radii are MULTIPLES and never pixels\n \n MUI's `sx` reads a bare number for `borderRadius` as a multiple of\n * `theme.shape.borderRadius`, so a value that already had the theme's radius\n * divided out of it is applied twice. Measured: `theme.shape.borderRadius / 4`\n * drew 4px on the default theme — which is why it looked right — and 36px on a\n * host that sets its own radius to 12. In a package whose whole premise is\n * being re-themed, only the multiple is portable, and it is the multiple that\n * both renderers store here.\n /\n\n/* `theme.spacing(n)` for the panel's own stack. /\nexport const FLEET_PANEL = {\n /* Between the heading, the status region and the body. /\n gapUnits: 1.5,\n} as const;\n\n/* The roster list box. /\nexport const FLEET_ROSTER = {\n /* Between rows. /\n gapUnits: 0.5,\n /* `:focus-visible` ring on the web; a device has no focus ring to draw. /\n focusRingWidth: 2,\n focusRingOffset: 2,\n} as const;\n\n/* One roster row. /\nexport const FLEET_ROW = {\n /* Between the dot, the text block and the badge. /\n gapUnits: 1.5,\n /* `theme.spacing(y, x)`. /\n paddingYUnits: 1,\n paddingXUnits: 1.5,\n /* A MULTIPLE of `theme.shape.borderRadius` — see the note above. /\n radiusMultiple: 1,\n} as const;\n\n/\n The freshness dot.\n \n A perfect circle, so the radius is half the box on both sides rather than\n * the web's `50%`: React Native resolves a percentage radius against the box\n * it is given, and a square box makes the two spellings agree.\n /\nexport const FLEET_DOT = {\n size: 10,\n} as const;\n\n/* What stands in for the roster before any unit has landed. /\nexport const FLEET_SKELETON = {\n /* Three bars, the height of a row with its padding. /\n rows: 3,\n height: 44,\n /* A MULTIPLE, for the same reason the row's is. /\n radiusMultiple: 1,\n gapUnits: 1,\n} as const;\n\n/\n How long a fix stays `live`, and then `lagging`, when the caller says nothing.\n \n Ninety seconds and five minutes: sized for a phone reporting every twenty\n * seconds, which is the densest cadence a battery tolerates all day. They are\n * DEFAULTS and not a rule — a fleet on five-minute trackers passes its own, and\n * the props exist so it can.\n /\nexport const FLEET_DEFAULT_LAGGING_AFTER_SECONDS = 90;\nexport const FLEET_DEFAULT_STALE_AFTER_SECONDS = 300;\n","import as React from 'react';\nimport {\n Pressable,\n ScrollView,\n StyleSheet,\n Text,\n View,\n type LayoutChangeEvent,\n type NativeScrollEvent,\n type NativeSyntheticEvent,\n} from 'react-native';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton.native';\n\nimport { freshnessOf } from './FleetMap.helpers';\nimport type { FleetKeyEvent } from './FleetMap.hooks';\nimport { FLEET_DOT, FLEET_ROSTER, FLEET_ROW, FLEET_SKELETON } from './FleetMap.metrics';\nimport type { FleetFreshness, FleetMapCopy, FleetUnit } from './FleetMap.types.native';\nimport { webAria, webRole } from '../../../platform/aria';\nimport { webKeyDown } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/*\n The roster — which on React Native is the WHOLE component, not half of it.\n \n On the web this list sits beside a map and carries the information a picture\n * cannot give a screen reader. Here there is no map to sit beside: `MapPreview`\n * has no React Native build, so the native `FleetMap` renders this and says so\n * in `NATIVE-NOTES.md`. That is a smaller change than it sounds, because the\n * web half already treats this list as the component's real content — \"the\n * accessible representation, not a sidebar\" — and every fact a pin carries is\n * on a row here.\n /\n\n/\n `data-freshness`, as something JSX can spread onto a react-native element.\n \n Through `dataSet` and NOT as a bare `data-freshness` prop: react-native-web\n * drops unknown props rather than forwarding them, and special-cases only\n * `data-testid`. Measured — the attribute was simply absent from the row, so\n * the shared freshness stories read `null`. `dataSet` is rn-web's documented\n * channel for custom data attributes and renders `data-freshness`; React Native\n * ignores it on a device, which is the same trade `webRole` and `webAria` make.\n \n It is not decoration: the SHARED stories read this attribute to assert which\n * threshold a row landed on, so without it they cannot run here at all.\n /\nfunction webDataFreshness(freshness: FleetFreshness): object {\n return { dataSet: { freshness } };\n}\n\n/* Each freshness draws from the semantic palette, never a hardcoded hex. /\nfunction freshnessColor(freshness: FleetFreshness, theme: UiTheme): string {\n if (freshness === 'live') return theme.palette.success.main;\n if (freshness === 'lagging') return theme.palette.warning.main;\n return theme.palette.text.disabled;\n}\n\n/* Where each row sits inside the scrolling content, and what is on screen. /\ninterface RosterGeometry {\n rows: Map<string, { y: number; height: number }>;\n offset: number;\n viewport: number;\n}\n\n/\n Keep the selected row visible INSIDE the roster — the same arithmetic the web\n * does with `scrollTop`, expressed in the only terms React Native has.\n \n The web reads `box.offsetTop - list.offsetTop` against `list.scrollTop` and\n * `list.clientHeight`. None of those exist here, so the three numbers are\n * gathered as they arrive: a row's `onLayout` gives its `y` inside the content\n * container (already relative to the list, which is what the web computes by\n * subtraction), the `ScrollView`'s own `onLayout` gives the viewport height,\n * and `onScroll` gives the offset. The comparison below is then line-for-line\n * the web's.\n \n `scrollTo` rather than react-native's `scrollToEnd`/`ScrollView.scrollIntoView`\n * for the same reason the web refuses `scrollIntoView({ block: 'nearest' })`:\n * this must move THIS list and nothing else. A native `ScrollView` cannot walk\n * its ancestors, so the hazard is smaller here — but the arithmetic is shared,\n * and two renderers agreeing by construction beats two agreeing by coincidence.\n \n Watches `position` as well as the id, because the roster re-sorts on every\n * poll: a rider who stays selected while their staleness moves them down the\n * list would otherwise slide out of view with the effect never re-running.\n /\nfunction useKeptInView(\n scroll: React.RefObject<ScrollView \| null>,\n geometry: React.RefObject<RosterGeometry>,\n activeId: string \| null,\n position: number,\n): void {\n React.useEffect(() => {\n if (activeId === null) return;\n const { rows, offset, viewport } = geometry.current;\n const row = rows.get(activeId);\n // Nothing has laid out yet on the first commit; the next poll re-runs this.\n if (!row \|\| viewport === 0) return;\n if (row.y < offset) {\n scroll.current?.scrollTo({ y: row.y, animated: false });\n } else if (row.y + row.height > offset + viewport) {\n scroll.current?.scrollTo({ y: row.y + row.height - viewport, animated: false });\n }\n }, [scroll, geometry, activeId, position]);\n}\n\n/\n A row's two lines of text — the name, and the one-line summary under it.\n \n Split out of {@link FleetRow} to keep that function under the size gate, and\n * the seam is the natural one: everything here is READ, nothing is interactive.\n /\nfunction RowText({\n unit,\n copy,\n freshness,\n testId,\n}: Pick<RowProps, 'unit' \| 'copy' \| 'freshness' \| 'testId'>): React.JSX.Element {\n const theme = useUiTheme();\n\n // Dropped rather than rendered empty: a phone that reports no accuracy radius\n // would otherwise print a trailing separator with nothing after it.\n const meta = [\n copy.freshness[freshness],\n copy.lastSeen(unit.staleSeconds),\n unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM),\n ]\n .filter((part): part is string => Boolean(part))\n .join(' · ');\n\n return (\n <View style={styles.rowText}>\n <Text\n testID={`${testId}-label`}\n style={[muiTypeStyle(theme, 'body2'), styles.label, { color: theme.palette.text.primary }]}\n >\n {unit.label}\n </Text>\n <Text\n testID={`${testId}-meta`}\n style={[muiTypeStyle(theme, 'caption'), { color: theme.palette.text.secondary }]}\n >\n {meta}\n </Text>\n </View>\n );\n}\n\ninterface RowProps {\n unit: FleetUnit;\n copy: FleetMapCopy;\n freshness: FleetFreshness;\n selected: boolean;\n onSelect: (id: string) => void;\n onMeasured: (id: string, y: number, height: number) => void;\n /* The row's own DOM id, which `aria-activedescendant` points at. /\n optionId: string;\n testId: string;\n}\n\n/\n One roster row.\n \n A `Pressable` rather than a `View` with an `onClick`: a press is the input on\n * a device, and `Pressable` is what gives the row its pressed state and its\n * accessibility role in one element. The PRESSED wash stands in for the web's\n * hover — and, as on the web, it must never weaken the selection, so a selected\n * row keeps `action.selected` whether or not a finger is on it.\n /\nfunction FleetRow({\n unit,\n copy,\n freshness,\n selected,\n onSelect,\n onMeasured,\n optionId,\n testId,\n}: RowProps): React.JSX.Element {\n const theme = useUiTheme();\n\n const measure = React.useCallback(\n (event: LayoutChangeEvent) => {\n const { y, height } = event.nativeEvent.layout;\n onMeasured(unit.id, y, height);\n },\n [onMeasured, unit.id],\n );\n\n return (\n <Pressable\n {...webRole('option')}\n {...webDataFreshness(freshness)}\n // Without this the roster's `aria-activedescendant` names an element that\n // does not exist, which announces nothing and fails an axe audit — worse\n // than omitting the attribute. Measured: the row carried no id at all.\n id={optionId}\n // BOTH, and neither is redundant. `accessibilityState` is what a DEVICE\n // reads; react-native-web does not turn it into `aria-selected`, so\n // without the attribute beside it the web build conveys the selection by\n // background colour alone — which is the one thing this component refuses\n // to do for freshness, and no more acceptable here.\n accessibilityState={{ selected }}\n aria-selected={selected}\n testID={testId}\n onPress={() => onSelect(unit.id)}\n onLayout={measure}\n style={({ pressed }) => [\n styles.row,\n {\n gap: theme.spacing(FLEET_ROW.gapUnits),\n paddingVertical: theme.spacing(FLEET_ROW.paddingYUnits),\n paddingHorizontal: theme.spacing(FLEET_ROW.paddingXUnits),\n borderRadius: FLEET_ROW.radiusMultiple theme.radius.md,\n backgroundColor: selected\n ? theme.palette.action.selected\n : pressed\n ? theme.palette.action.hover\n : 'transparent',\n },\n ]}\n >\n {/* The dot repeats what the freshness word beside it already says, so it\n is hidden rather than read twice — and colour is never the only\n carrier of the state. /}\n <View\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n testID={`${testId}-dot`}\n style={[styles.dot, { backgroundColor: freshnessColor(freshness, theme) }]}\n />\n <RowText unit={unit} copy={copy} freshness={freshness} testId={testId} />\n {unit.badge !== undefined && unit.badge !== '' && (\n <Text\n testID={`${testId}-badge`}\n style={[\n muiTypeStyle(theme, 'caption'),\n styles.badge,\n { color: theme.palette.text.secondary },\n ]}\n >\n {unit.badge}\n </Text>\n )}\n </Pressable>\n );\n}\n\n/\n What stands in for the roster before any unit has landed.\n \n Hidden from the reader, because three grey bars are not information — the\n * panel's busy state and its optional announcement carry that. The radius is\n * the same MULTIPLE a real row uses rather than a raw pixel count.\n */\nfunction FirstLoad({ testId }: { testId: string }): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <View\n testID={`${testId}-skeleton`}\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n style={{ gap: theme.spacing(FLEET_SKELETON.gapUnits) }}\n >\n {Array.from({ length: FLEET_SKELETON.rows }, (_, row) => (\n <Skeleton\n key={row}\n variant=\"rectangular\"\n height={FLEET_SKELETON.height}\n borderRadius={FLEET_SKELETON.radiusMultiple}\n />\n ))}\n </View>\n );\n}\n\nexport interface FleetRosterProps {\n units: readonly FleetUnit[];\n copy: FleetMapCopy;\n selectedId: string \| null \| undefined;\n onSelect: (id: string) => void;\n laggingAfterSeconds: number;\n staleAfterSeconds: number;\n loading: boolean;\n maxHeight: number \| undefined;\n testId: string;\n onKeyDown: (event: FleetKeyEvent) => void;\n}\n\nexport function FleetRoster({\n units,\n copy,\n selectedId,\n onSelect,\n laggingAfterSeconds,\n staleAfterSeconds,\n loading,\n maxHeight,\n testId,\n onKeyDown,\n}: FleetRosterProps): React.JSX.Element {\n const theme = useUiTheme();\n const scroll = React.useRef<ScrollView>(null);\n const geometry = React.useRef<RosterGeometry>({ rows: new Map(), offset: 0, viewport: 0 });\n\n // Generated, not derived from `dataTestId`: two boards on one screen filtered\n // from the same fleet would otherwise emit duplicate ids and an ambiguous\n // `aria-activedescendant` under react-native-web.\n const rowIdPrefix = React.useId();\n\n // The selection is CONTROLLED, so it can name a unit that has since dropped\n // out of the freshness window — a courier ending their shift mid-poll. The\n // attribute must then be absent rather than pointing at a row that no longer\n // renders. `mapCentre` and `nextSelection` both handle the same case.\n const active = units.some((unit) => unit.id === selectedId) ? (selectedId ?? null) : null;\n const position = active === null ? -1 : units.findIndex((unit) => unit.id === active);\n\n const onMeasured = React.useCallback((id: string, y: number, height: number) => {\n geometry.current.rows.set(id, { y, height });\n }, []);\n\n useKeptInView(scroll, geometry, active, position);\n\n if (loading && units.length === 0) return <FirstLoad testId={testId} />;\n\n return (\n <ScrollView\n ref={scroll}\n {...webRole('listbox')}\n // A single tab stop with the arrow keys inside it, which is the listbox\n // pattern and what `aria-activedescendant` below is for: a dispatcher\n // tabbing past a fleet of thirty should not press it thirty times. React\n // Native has no tab order, so this reaches the DOM through\n // react-native-web and does nothing on a device — where each row is its\n // own touch target anyway.\n tabIndex={0}\n {...webAria({ 'aria-activedescendant': active ? `${rowIdPrefix}-${active}` : undefined })}\n {...webKeyDown(onKeyDown)}\n accessibilityLabel={copy.rosterLabel}\n testID={`${testId}-roster`}\n style={maxHeight === undefined ? undefined : { maxHeight }}\n contentContainerStyle={{ gap: theme.spacing(FLEET_ROSTER.gapUnits) }}\n onLayout={(event: LayoutChangeEvent) => {\n geometry.current.viewport = event.nativeEvent.layout.height;\n }}\n onScroll={(event: NativeSyntheticEvent<NativeScrollEvent>) => {\n geometry.current.offset = event.nativeEvent.contentOffset.y;\n }}\n scrollEventThrottle={16}\n >\n {units.map((unit) => (\n <FleetRow\n key={unit.id}\n unit={unit}\n copy={copy}\n freshness={freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds)}\n selected={unit.id === active}\n onSelect={onSelect}\n onMeasured={onMeasured}\n optionId={`${rowIdPrefix}-${unit.id}`}\n testId={`${testId}-${unit.id}`}\n />\n ))}\n </ScrollView>\n );\n}\n\nconst styles = StyleSheet.create({\n badge: { flexShrink: 0 },\n dot: {\n borderRadius: FLEET_DOT.size / 2,\n flexShrink: 0,\n height: FLEET_DOT.size,\n width: FLEET_DOT.size,\n },\n label: { fontWeight: '500' },\n row: { alignItems: 'center', flexDirection: 'row' },\n rowText: { flexGrow: 1, flexShrink: 1, minWidth: 0 },\n});\n"],"mappings":"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","names":["React","StyleSheet","Text","View","React","jsx","jsxs","View","styles","Text","StyleSheet"]}
1	+ {"version":3,"sources":["../../../src/components/data-display/FleetMap/FleetMap.native.tsx","../../../src/components/data-display/FleetMap/FleetMap.hooks.ts","../../../src/components/data-display/FleetMap/FleetMap.helpers.ts","../../../src/components/data-display/FleetMap/FleetMap.metrics.ts","../../../src/components/data-display/FleetMap/FleetRoster.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { EmptyState } from '../EmptyState/EmptyState.native';\n\nimport { useFleetMap } from './FleetMap.hooks';\nimport {\n FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n FLEET_DEFAULT_STALE_AFTER_SECONDS,\n FLEET_PANEL,\n} from './FleetMap.metrics';\nimport type { FleetMapProps } from './FleetMap.types.native';\nimport { FleetRoster } from './FleetRoster.native';\nimport { webAria, webRole } from '../../../platform/aria';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, muiTypeStyle } from '../../../tokens/mui-type';\n\n/*\n The reload announcement, and nothing else.\n \n A busy region marks itself stale for assistive technology but UTTERS nothing,\n * and the skeletons beside it are hidden from the reader — so a screen-reader\n * user got silence while the roster reloaded. This is the utterance.\n \n Optional by design: the sentence is in the reader's language, which only the\n * caller knows, and inventing an English one in a component whose whole premise\n * is that every word arrives through `copy` would be the bug it exists to\n * avoid. No `copy.loading`, no region.\n \n ## The node outlives the text, and that is the whole trick\n \n A live region has to exist BEFORE its content changes; a reader watches an\n * existing region for mutations rather than announcing one that appears already\n * populated. Mounting region-and-text together in a single commit is the classic\n * silent case — it satisfies a query while announcing nothing. So the region\n * mounts as soon as the caller offers the copy and merely EMPTIES when idle.\n \n `role=\"status\"` and `aria-live` reach the DOM through react-native-web; on a\n * device the announcement is made by `AccessibilityInfo` or not at all, which\n * is recorded in `NATIVE-NOTES.md` rather than papered over here.\n /\nfunction FleetStatus({\n announcement,\n loading,\n testId,\n}: {\n announcement: string \| undefined;\n loading: boolean;\n testId: string;\n}): React.JSX.Element \| null {\n // No copy, no region at all — the caller has not asked for an announcement.\n if (announcement === undefined) return null;\n return (\n <View\n {...webRole('status')}\n aria-live=\"polite\"\n accessibilityLiveRegion=\"polite\"\n testID={`${testId}-status`}\n style={styles.srOnly}\n >\n <Text>{loading ? announcement : ''}</Text>\n </View>\n );\n}\n\n/\n FleetMap on React Native — where a set of tracked units is right now.\n \n Product-free by construction: it draws a labelled row with a freshness, and\n * every word — the heading, the three freshness states, how a duration and a\n * distance are written — arrives through `copy`. Couriers, service vans and\n * field engineers are all the same list.\n \n ## What this renderer does NOT draw, and why\n \n There is no map. `MapPreview` — 2,200 lines that project, tile and decorate\n * their own surface — has no React Native build, and porting it is its own\n * change with its own consumers. What that costs is smaller than it sounds,\n * because the web half already calls this list \"the accessible representation,\n * not a sidebar\": every fact a pin carries — who, how recently, how precisely,\n * what they are carrying — is on a row, in an order the map cannot express. So\n * a native board is the half a screen reader was always given, and a device\n * gets the same answers a dispatcher asks for. The gap is stated in\n * `NATIVE-NOTES.md` rather than claimed away, and it is where the map goes when\n * `MapPreview` is ported.\n \n The consequence for the API is one line in `FleetMap.types.native.ts`: the\n * native copy interface has no `map` and no `mapLabel`, because a caller should\n * not be asked to name controls nothing renders.\n /\nexport const FleetMap: React.FC<FleetMapProps> = React.memo(\n ({\n units,\n copy,\n // NO default. `undefined` is what tells the hook the caller does not own\n // the selection; defaulting it to `null` made every render look controlled\n // and the uncontrolled path unreachable.\n selectedId,\n onSelect,\n laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,\n loading = false,\n maxHeight,\n style,\n dataTestId,\n }) => {\n const theme = useUiTheme();\n const testId = dataTestId ?? 'fleet-map';\n const { ordered, active, select, onKeyDown } = useFleetMap(units, selectedId, onSelect);\n\n return (\n <View\n {...webRole('region')}\n accessibilityLabel={copy.title}\n testID={testId}\n style={[styles.panel, { gap: theme.spacing(FLEET_PANEL.gapUnits) }, style]}\n >\n <Text\n {...webRole('heading')}\n {...webAria({ 'aria-level': 2 })}\n testID={`${testId}-title`}\n style={[\n muiTypeStyle(theme, 'body1'),\n { color: theme.palette.text.primary, fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}` },\n ]}\n >\n {copy.title}\n </Text>\n\n <FleetStatus announcement={copy.loading} loading={loading} testId={testId} />\n\n {!loading && ordered.length === 0 ? (\n <EmptyState\n variant=\"minimal\"\n title={copy.emptyTitle}\n description={copy.emptyDescription}\n dataTestId={`${testId}-empty`}\n />\n ) : (\n / The busy marker belongs on the BODY and never on the panel root —\n the live region announcing the reload is a sibling above, and a\n live region inside a busy subtree is exactly what busy tells\n assistive technology to hold back. Marking the root would silence\n the announcement for the whole of the only window in which it has\n anything to say. The web half splits them the same way, and the\n wrapper is also what the shared loading stories address. /\n <View\n aria-busy={loading \|\| undefined}\n accessibilityState={{ busy: loading }}\n testID={`${testId}-body`}\n style={styles.body}\n >\n <FleetRoster\n units={ordered}\n copy={copy}\n selectedId={active}\n onSelect={select}\n laggingAfterSeconds={laggingAfterSeconds}\n staleAfterSeconds={staleAfterSeconds}\n loading={loading}\n maxHeight={maxHeight}\n testId={testId}\n onKeyDown={onKeyDown}\n />\n </View>\n )}\n </View>\n );\n },\n);\n\nFleetMap.displayName = 'FleetMap';\n\nconst styles = StyleSheet.create({\n body: { flexShrink: 1, minWidth: 0 },\n panel: { flexDirection: 'column', minWidth: 0 },\n /\n Off screen but still in the tree, which is what a live region needs. A\n * `display: 'none'` view is not announced, and a zero-size one clips its text\n * on some readers.\n /\n srOnly: { height: 1, opacity: 0, overflow: 'hidden', position: 'absolute', width: 1 },\n});\n\nexport default FleetMap;\n","import React from 'react';\n\nimport { mapCentre, nextSelection, rosterOrder, type LatLng } from './FleetMap.helpers';\nimport type { FleetUnit } from './FleetMap.base';\n\n/\n The half of a key event this hook reads, spelled structurally.\n \n NOT `React.KeyboardEvent<HTMLDivElement>`: the native type program is checked\n * without the DOM lib (`tsconfig.native.json`), so a DOM type here would put\n * the whole hook out of reach of the React Native renderer that shares it. A\n * DOM event satisfies this shape, and a handler taking the wider type is\n * assignable wherever the narrower one is expected — so the web passes its own\n * `onKeyDown` unchanged.\n /\nexport interface FleetKeyEvent {\n key: string;\n altKey?: boolean;\n ctrlKey?: boolean;\n metaKey?: boolean;\n shiftKey?: boolean;\n preventDefault: () => void;\n}\n\n/\n Everything the board derives from its props, in one hook.\n \n Split out of the component so the component is layout and nothing else.\n \n The memos are honest about what they buy, which is less than it looks. `units`\n * arrives as a fresh array on every poll, so `ordered` and `markers` are\n * recomputed on every poll whatever these do — a new array is a new identity.\n * What they buy is stability across the renders a poll does NOT cause: a parent\n * re-render, a selection change (which re-runs `centre` but not `ordered`), a\n * theme flip. Sorting a fleet is cheap either way; this is tidiness, not a\n * measured win, and it should not be read as one.\n \n `centre` is the exception, and there it is load-bearing rather than tidy —\n * see {@link useFleetMap}.\n \n ## Selection works with, without, or half-way through a handler\n \n `selectedId` and `onSelect` are both optional, so all four combinations\n * arrive. Left purely controlled, the two useful ones broke: with neither prop\n * the roster was a listbox that answered nothing, and arrowing it called\n * `preventDefault` before a no-op `select`, so the keys did not move a\n * selection AND did not scroll the page either.\n \n So the hook keeps its own selection and defers to `selectedId` only when the\n * caller passes one — the ordinary controlled/uncontrolled split, the same one\n * an `<input>` makes. `onSelect` still fires either way, so a consumer can\n * observe the selection without owning it.\n /\n\n/* One pin, in the shape `MapPreview` takes. /\nexport interface FleetMarker {\n position: LatLng;\n title: string;\n onClick: () => void;\n}\n\nexport interface FleetMapState {\n /* The units, freshest first — see {@link rosterOrder}. /\n ordered: FleetUnit[];\n /\n The selection in force — the caller's when they own it, this hook's when\n * they do not. Everything downstream reads THIS and never the raw prop.\n /\n active: string \| null;\n /* Where the map points, or `null` when there is nothing to show. /\n centre: LatLng \| null;\n select: (id: string) => void;\n markers: FleetMarker[];\n onKeyDown: (event: FleetKeyEvent) => void;\n}\n\n/* Which way an arrow moves the selection, or `0` when it is not ours. /\nfunction stepFor(event: FleetKeyEvent): 1 \| -1 \| 0 {\n // A modified arrow is the PAGE's shortcut, not the roster's: Cmd+Down is\n // \"scroll to the end of the document\" on macOS, and Shift+Arrow extends a\n // selection. Capturing them would take a browser gesture away.\n if (event.altKey \|\| event.ctrlKey \|\| event.metaKey \|\| event.shiftKey) return 0;\n if (event.key === 'ArrowDown') return 1;\n if (event.key === 'ArrowUp') return -1;\n return 0;\n}\n\n/\n Who owns the selection, decided ONCE on the first render.\n \n Exactly as React decides it for an `<input>`, and for the same reason.\n * `selectedId` is typed `string \| null \| undefined`, so `useState<string>()` —\n * the natural shape for a caller — hands us `undefined` on the first render and\n * again on every reset. Re-deriving the mode from the prop each time would make\n * the component change its own semantics mid-life: it starts uncontrolled,\n * silently becomes controlled the moment the caller's `onSelect` writes a value\n * back, and then silently un-becomes it when they clear — resurrecting whatever\n * was selected before the hand-off.\n \n Latched, `undefined` is unambiguous within each mode: to a controlled board it\n * is \"nobody is selected\", so clearing the caller's state clears the roster; to\n * an uncontrolled one it is simply the prop staying absent. A caller who wants\n * control passes `string \| null` from the first render.\n /\nfunction useSelection(\n selectedId: string \| null \| undefined,\n onSelect: ((id: string) => void) \| undefined,\n): { active: string \| null; select: (id: string) => void; controlled: boolean } {\n const controlledRef = React.useRef(selectedId !== undefined);\n const controlled = controlledRef.current;\n const [own, setOwn] = React.useState<string \| null>(null);\n\n const select = React.useCallback(\n (id: string) => {\n if (!controlled) setOwn(id);\n onSelect?.(id);\n },\n [controlled, onSelect],\n );\n\n return { active: controlled ? (selectedId ?? null) : own, select, controlled };\n}\n\nexport function useFleetMap(\n units: readonly FleetUnit[],\n selectedId: string \| null \| undefined,\n onSelect: ((id: string) => void) \| undefined,\n): FleetMapState {\n const ordered = React.useMemo(() => rosterOrder(units), [units]);\n const { active, select, controlled } = useSelection(selectedId, onSelect);\n\n // Memoised on the COORDINATES and not the object, because `mapCentre` builds\n // a fresh literal every call and `MapPreview` re-centres from an effect keyed\n // on `center`'s identity. A poll that changes nothing would otherwise hand it\n // a new object, and the map would jump back to the centroid — throwing away a\n // pan the dispatcher had just made, on a timer, for as long as they watch it.\n //\n // ROUNDED, because keying on the raw numbers was not enough. `mapCentre`\n // sums over `ordered`, and floating-point addition is not associative — so\n // re-sorting the SAME coordinates can change the centroid's last bit.\n // `rosterOrder` sorts on `staleSeconds`, which moves on every poll, so rank\n // swaps are the ordinary case for a fleet that is standing still: measured\n // over 20k random three-rider fleets, a single adjacent swap changed the\n // centroid 17% of the time. Six decimals is ~11cm, far finer than a map\n // centre resolves and far coarser than the noise.\n const raw = mapCentre(ordered, active);\n const lat = raw === null ? null : Math.round(raw.lat 1e6) / 1e6;\n const lng = raw === null ? null : Math.round(raw.lng * 1e6) / 1e6;\n const centre = React.useMemo(\n () => (lat === null \|\| lng === null ? null : { lat, lng }),\n [lat, lng],\n );\n\n const onKeyDown = React.useCallback(\n (event: FleetKeyEvent) => {\n const step = stepFor(event);\n if (step === 0) return;\n // Nothing can move a CONTROLLED selection without a handler, so the keys\n // belong to the page. Swallowing them there left a keyboard user unable to\n // move the selection and unable to scroll past the roster.\n if (controlled && !onSelect) return;\n const next = nextSelection(ordered, active, step);\n // `preventDefault` only once a move is certain, so the page still scrolls\n // with the arrow keys when the list is empty and there is nothing to move.\n if (next === null) return;\n event.preventDefault();\n select(next);\n },\n [ordered, active, select, controlled, onSelect],\n );\n\n const markers = React.useMemo(\n () =>\n ordered.map((unit) => ({\n position: { lat: unit.latitude, lng: unit.longitude },\n title: unit.label,\n onClick: () => select(unit.id),\n })),\n [ordered, select],\n );\n\n return { ordered, active, centre, select, markers, onKeyDown };\n}\n","import type { FleetFreshness, FleetUnit } from './FleetMap.base';\n\n/*\n How current a fix is, on the two thresholds the caller supplied.\n \n Inclusive at both boundaries in the direction that reads better on a screen:\n * a unit exactly at the lagging threshold is already lagging. A boundary has to\n * fall somewhere, and the conservative side is the one that does not tell a\n * dispatcher somebody is live when they are on the edge of not being.\n /\nexport function freshnessOf(\n staleSeconds: number,\n laggingAfterSeconds: number,\n staleAfterSeconds: number,\n): FleetFreshness {\n if (staleSeconds >= staleAfterSeconds) return 'stale';\n if (staleSeconds >= laggingAfterSeconds) return 'lagging';\n return 'live';\n}\n\n/* A latitude/longitude pair, as the map wants its centre. /\nexport interface LatLng {\n lat: number;\n lng: number;\n}\n\n/\n Where the map should point.\n \n The selected unit when there is one — a dispatcher who clicked a name is\n * asking to look at them. Otherwise the fleet's own centroid, which keeps\n * everybody in frame without the caller having to compute a bounding box.\n \n `null` for an empty fleet rather than a coordinate: (0, 0) is a real place in\n * the Atlantic, and a map that quietly sails there is worse than one that says\n * it has nothing to show.\n /\nexport function mapCentre(\n units: readonly FleetUnit[],\n selectedId?: string \| null,\n): LatLng \| null {\n if (units.length === 0) return null;\n const selected = selectedId ? units.find((unit) => unit.id === selectedId) : undefined;\n if (selected) return { lat: selected.latitude, lng: selected.longitude };\n const sum = units.reduce(\n (acc, unit) => ({ lat: acc.lat + unit.latitude, lng: acc.lng + unit.longitude }),\n { lat: 0, lng: 0 },\n );\n return { lat: sum.lat / units.length, lng: sum.lng / units.length };\n}\n\n/\n The roster's order: freshest first, then alphabetically.\n \n Not the caller's order, deliberately. The one question this panel answers is\n * who is moving right now, and a list sorted by anything else buries the\n * answer under whoever happens to sort first. Ties break on the label so the\n * list does not reshuffle between polls when two units share a staleness.\n /\nexport function rosterOrder(units: readonly FleetUnit[]): FleetUnit[] {\n return [...units].sort(\n (a, b) => a.staleSeconds - b.staleSeconds \|\| a.label.localeCompare(b.label),\n );\n}\n\n/\n Move the selection by one row, wrapping at both ends.\n \n Wrapping rather than stopping: this is a short list a dispatcher arrows\n * through repeatedly, and a selection that sticks at the last row makes the\n * keyboard path feel broken next to the mouse one.\n /\nexport function nextSelection(\n units: readonly FleetUnit[],\n currentId: string \| null \| undefined,\n step: 1 \| -1,\n): string \| null {\n if (units.length === 0) return null;\n const index = units.findIndex((unit) => unit.id === currentId);\n // Nothing selected: Down opens at the top and Up opens at the bottom, which\n // is what every listbox in the house does.\n if (index === -1) return (step === 1 ? units[0] : units[units.length - 1])?.id ?? null;\n const next = (index + step + units.length) % units.length;\n return units[next]?.id ?? null;\n}\n","/\n THE NUMBERS BOTH `FleetMap` RENDERERS DRAW WITH.\n \n `FleetRoster.tsx` / `FleetMap.tsx` (web, MUI `sx`) and `FleetRoster.native.tsx`\n * / `FleetMap.native.tsx` (React Native) read this one table. The web hands the\n * spacing UNITS to `theme.spacing()` and the radius MULTIPLES to `sx`; native\n * multiplies the units by the theme's own spacing step and the multiples by\n * `shape.borderRadius`.\n \n Nothing here imports a renderer, a theme or a colour: a freshness dot's\n * COLOUR is the theme's (`success.main`, `warning.main`, `text.disabled`), and\n * the two sides reach the same palette through different doors.\n \n ## Why the radii are MULTIPLES and never pixels\n \n MUI's `sx` reads a bare number for `borderRadius` as a multiple of\n * `theme.shape.borderRadius`, so a value that already had the theme's radius\n * divided out of it is applied twice. Measured: `theme.shape.borderRadius / 4`\n * drew 4px on the default theme — which is why it looked right — and 36px on a\n * host that sets its own radius to 12. In a package whose whole premise is\n * being re-themed, only the multiple is portable, and it is the multiple that\n * both renderers store here.\n /\n\n/* `theme.spacing(n)` for the panel's own stack. /\nexport const FLEET_PANEL = {\n /* Between the heading, the status region and the body. /\n gapUnits: 1.5,\n} as const;\n\n/* The roster list box. /\nexport const FLEET_ROSTER = {\n /* Between rows. /\n gapUnits: 0.5,\n /* `:focus-visible` ring on the web; a device has no focus ring to draw. /\n focusRingWidth: 2,\n focusRingOffset: 2,\n} as const;\n\n/* One roster row. /\nexport const FLEET_ROW = {\n /* Between the dot, the text block and the badge. /\n gapUnits: 1.5,\n /* `theme.spacing(y, x)`. /\n paddingYUnits: 1,\n paddingXUnits: 1.5,\n /* A MULTIPLE of `theme.shape.borderRadius` — see the note above. /\n radiusMultiple: 1,\n} as const;\n\n/\n The freshness dot.\n \n A perfect circle, so the radius is half the box on both sides rather than\n * the web's `50%`: React Native resolves a percentage radius against the box\n * it is given, and a square box makes the two spellings agree.\n /\nexport const FLEET_DOT = {\n size: 10,\n} as const;\n\n/* What stands in for the roster before any unit has landed. /\nexport const FLEET_SKELETON = {\n /* Three bars, the height of a row with its padding. /\n rows: 3,\n height: 44,\n /* A MULTIPLE, for the same reason the row's is. /\n radiusMultiple: 1,\n gapUnits: 1,\n} as const;\n\n/\n How long a fix stays `live`, and then `lagging`, when the caller says nothing.\n \n Ninety seconds and five minutes: sized for a phone reporting every twenty\n * seconds, which is the densest cadence a battery tolerates all day. They are\n * DEFAULTS and not a rule — a fleet on five-minute trackers passes its own, and\n * the props exist so it can.\n /\nexport const FLEET_DEFAULT_LAGGING_AFTER_SECONDS = 90;\nexport const FLEET_DEFAULT_STALE_AFTER_SECONDS = 300;\n","import as React from 'react';\nimport {\n Pressable,\n ScrollView,\n StyleSheet,\n Text,\n View,\n type LayoutChangeEvent,\n type NativeScrollEvent,\n type NativeSyntheticEvent,\n} from 'react-native';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton.native';\n\nimport { freshnessOf } from './FleetMap.helpers';\nimport type { FleetKeyEvent } from './FleetMap.hooks';\nimport { FLEET_DOT, FLEET_ROSTER, FLEET_ROW, FLEET_SKELETON } from './FleetMap.metrics';\nimport type { FleetFreshness, FleetMapCopy, FleetUnit } from './FleetMap.types.native';\nimport { webAria, webRole } from '../../../platform/aria';\nimport { webKeyDown } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/*\n The roster — which on React Native is the WHOLE component, not half of it.\n \n On the web this list sits beside a map and carries the information a picture\n * cannot give a screen reader. Here there is no map to sit beside: `MapPreview`\n * has no React Native build, so the native `FleetMap` renders this and says so\n * in `NATIVE-NOTES.md`. That is a smaller change than it sounds, because the\n * web half already treats this list as the component's real content — \"the\n * accessible representation, not a sidebar\" — and every fact a pin carries is\n * on a row here.\n /\n\n/\n `data-freshness`, as something JSX can spread onto a react-native element.\n \n Through `dataSet` and NOT as a bare `data-freshness` prop: react-native-web\n * drops unknown props rather than forwarding them, and special-cases only\n * `data-testid`. Measured — the attribute was simply absent from the row, so\n * the shared freshness stories read `null`. `dataSet` is rn-web's documented\n * channel for custom data attributes and renders `data-freshness`; React Native\n * ignores it on a device, which is the same trade `webRole` and `webAria` make.\n \n It is not decoration: the SHARED stories read this attribute to assert which\n * threshold a row landed on, so without it they cannot run here at all.\n /\nfunction webDataFreshness(freshness: FleetFreshness): object {\n return { dataSet: { freshness } };\n}\n\n/* Each freshness draws from the semantic palette, never a hardcoded hex. /\nfunction freshnessColor(freshness: FleetFreshness, theme: UiTheme): string {\n if (freshness === 'live') return theme.palette.success.main;\n if (freshness === 'lagging') return theme.palette.warning.main;\n return theme.palette.text.disabled;\n}\n\n/* Where each row sits inside the scrolling content, and what is on screen. /\ninterface RosterGeometry {\n rows: Map<string, { y: number; height: number }>;\n offset: number;\n viewport: number;\n}\n\n/\n Keep the selected row visible INSIDE the roster — the same arithmetic the web\n * does with `scrollTop`, expressed in the only terms React Native has.\n \n The web reads `box.offsetTop - list.offsetTop` against `list.scrollTop` and\n * `list.clientHeight`. None of those exist here, so the three numbers are\n * gathered as they arrive: a row's `onLayout` gives its `y` inside the content\n * container (already relative to the list, which is what the web computes by\n * subtraction), the `ScrollView`'s own `onLayout` gives the viewport height,\n * and `onScroll` gives the offset. The comparison below is then line-for-line\n * the web's.\n \n `scrollTo` rather than react-native's `scrollToEnd`/`ScrollView.scrollIntoView`\n * for the same reason the web refuses `scrollIntoView({ block: 'nearest' })`:\n * this must move THIS list and nothing else. A native `ScrollView` cannot walk\n * its ancestors, so the hazard is smaller here — but the arithmetic is shared,\n * and two renderers agreeing by construction beats two agreeing by coincidence.\n \n Watches `position` as well as the id, because the roster re-sorts on every\n * poll: a rider who stays selected while their staleness moves them down the\n * list would otherwise slide out of view with the effect never re-running.\n /\nfunction useKeptInView(\n scroll: React.RefObject<ScrollView \| null>,\n geometry: React.RefObject<RosterGeometry>,\n activeId: string \| null,\n position: number,\n): void {\n React.useEffect(() => {\n if (activeId === null) return;\n const { rows, offset, viewport } = geometry.current;\n const row = rows.get(activeId);\n // Nothing has laid out yet on the first commit; the next poll re-runs this.\n if (!row \|\| viewport === 0) return;\n if (row.y < offset) {\n scroll.current?.scrollTo({ y: row.y, animated: false });\n } else if (row.y + row.height > offset + viewport) {\n scroll.current?.scrollTo({ y: row.y + row.height - viewport, animated: false });\n }\n }, [scroll, geometry, activeId, position]);\n}\n\n/\n A row's two lines of text — the name, and the one-line summary under it.\n \n Split out of {@link FleetRow} to keep that function under the size gate, and\n * the seam is the natural one: everything here is READ, nothing is interactive.\n /\nfunction RowText({\n unit,\n copy,\n freshness,\n testId,\n}: Pick<RowProps, 'unit' \| 'copy' \| 'freshness' \| 'testId'>): React.JSX.Element {\n const theme = useUiTheme();\n\n // Dropped rather than rendered empty: a phone that reports no accuracy radius\n // would otherwise print a trailing separator with nothing after it.\n const meta = [\n copy.freshness[freshness],\n copy.lastSeen(unit.staleSeconds),\n unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM),\n ]\n .filter((part): part is string => Boolean(part))\n .join(' · ');\n\n return (\n <View style={styles.rowText}>\n <Text\n testID={`${testId}-label`}\n style={[muiTypeStyle(theme, 'body2'), styles.label, { color: theme.palette.text.primary }]}\n >\n {unit.label}\n </Text>\n <Text\n testID={`${testId}-meta`}\n style={[muiTypeStyle(theme, 'caption'), { color: theme.palette.text.secondary }]}\n >\n {meta}\n </Text>\n </View>\n );\n}\n\ninterface RowProps {\n unit: FleetUnit;\n copy: FleetMapCopy;\n freshness: FleetFreshness;\n selected: boolean;\n onSelect: (id: string) => void;\n onMeasured: (id: string, y: number, height: number) => void;\n /* The row's own DOM id, which `aria-activedescendant` points at. /\n optionId: string;\n testId: string;\n}\n\n/\n One roster row.\n \n A `Pressable` rather than a `View` with an `onClick`: a press is the input on\n * a device, and `Pressable` is what gives the row its pressed state and its\n * accessibility role in one element. The PRESSED wash stands in for the web's\n * hover — and, as on the web, it must never weaken the selection, so a selected\n * row keeps `action.selected` whether or not a finger is on it.\n /\nfunction FleetRow({\n unit,\n copy,\n freshness,\n selected,\n onSelect,\n onMeasured,\n optionId,\n testId,\n}: RowProps): React.JSX.Element {\n const theme = useUiTheme();\n\n const measure = React.useCallback(\n (event: LayoutChangeEvent) => {\n const { y, height } = event.nativeEvent.layout;\n onMeasured(unit.id, y, height);\n },\n [onMeasured, unit.id],\n );\n\n return (\n <Pressable\n {...webRole('option')}\n {...webDataFreshness(freshness)}\n // Without this the roster's `aria-activedescendant` names an element that\n // does not exist, which announces nothing and fails an axe audit — worse\n // than omitting the attribute. Measured: the row carried no id at all.\n id={optionId}\n // BOTH, and neither is redundant. `accessibilityState` is what a DEVICE\n // reads; react-native-web does not turn it into `aria-selected`, so\n // without the attribute beside it the web build conveys the selection by\n // background colour alone — which is the one thing this component refuses\n // to do for freshness, and no more acceptable here.\n accessibilityState={{ selected }}\n aria-selected={selected}\n testID={testId}\n onPress={() => onSelect(unit.id)}\n onLayout={measure}\n style={({ pressed }) => [\n styles.row,\n {\n gap: theme.spacing(FLEET_ROW.gapUnits),\n paddingVertical: theme.spacing(FLEET_ROW.paddingYUnits),\n paddingHorizontal: theme.spacing(FLEET_ROW.paddingXUnits),\n borderRadius: FLEET_ROW.radiusMultiple theme.radius.md,\n backgroundColor: selected\n ? theme.palette.action.selected\n : pressed\n ? theme.palette.action.hover\n : 'transparent',\n },\n ]}\n >\n {/* The dot repeats what the freshness word beside it already says, so it\n is hidden rather than read twice — and colour is never the only\n carrier of the state. /}\n <View\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n testID={`${testId}-dot`}\n style={[styles.dot, { backgroundColor: freshnessColor(freshness, theme) }]}\n />\n <RowText unit={unit} copy={copy} freshness={freshness} testId={testId} />\n {unit.badge !== undefined && unit.badge !== '' && (\n <Text\n testID={`${testId}-badge`}\n style={[\n muiTypeStyle(theme, 'caption'),\n styles.badge,\n { color: theme.palette.text.secondary },\n ]}\n >\n {unit.badge}\n </Text>\n )}\n </Pressable>\n );\n}\n\n/\n What stands in for the roster before any unit has landed.\n \n Hidden from the reader, because three grey bars are not information — the\n * panel's busy state and its optional announcement carry that. The radius is\n * the same MULTIPLE a real row uses rather than a raw pixel count.\n */\nfunction FirstLoad({ testId }: { testId: string }): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <View\n testID={`${testId}-skeleton`}\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n style={{ gap: theme.spacing(FLEET_SKELETON.gapUnits) }}\n >\n {Array.from({ length: FLEET_SKELETON.rows }, (_, row) => (\n <Skeleton\n key={row}\n variant=\"rectangular\"\n height={FLEET_SKELETON.height}\n borderRadius={FLEET_SKELETON.radiusMultiple}\n />\n ))}\n </View>\n );\n}\n\nexport interface FleetRosterProps {\n units: readonly FleetUnit[];\n copy: FleetMapCopy;\n selectedId: string \| null \| undefined;\n onSelect: (id: string) => void;\n laggingAfterSeconds: number;\n staleAfterSeconds: number;\n loading: boolean;\n maxHeight: number \| undefined;\n testId: string;\n onKeyDown: (event: FleetKeyEvent) => void;\n}\n\nexport function FleetRoster({\n units,\n copy,\n selectedId,\n onSelect,\n laggingAfterSeconds,\n staleAfterSeconds,\n loading,\n maxHeight,\n testId,\n onKeyDown,\n}: FleetRosterProps): React.JSX.Element {\n const theme = useUiTheme();\n const scroll = React.useRef<ScrollView>(null);\n const geometry = React.useRef<RosterGeometry>({ rows: new Map(), offset: 0, viewport: 0 });\n\n // Generated, not derived from `dataTestId`: two boards on one screen filtered\n // from the same fleet would otherwise emit duplicate ids and an ambiguous\n // `aria-activedescendant` under react-native-web.\n const rowIdPrefix = React.useId();\n\n // The selection is CONTROLLED, so it can name a unit that has since dropped\n // out of the freshness window — a courier ending their shift mid-poll. The\n // attribute must then be absent rather than pointing at a row that no longer\n // renders. `mapCentre` and `nextSelection` both handle the same case.\n const active = units.some((unit) => unit.id === selectedId) ? (selectedId ?? null) : null;\n const position = active === null ? -1 : units.findIndex((unit) => unit.id === active);\n\n const onMeasured = React.useCallback((id: string, y: number, height: number) => {\n geometry.current.rows.set(id, { y, height });\n }, []);\n\n useKeptInView(scroll, geometry, active, position);\n\n if (loading && units.length === 0) return <FirstLoad testId={testId} />;\n\n return (\n <ScrollView\n ref={scroll}\n {...webRole('listbox')}\n // A single tab stop with the arrow keys inside it, which is the listbox\n // pattern and what `aria-activedescendant` below is for: a dispatcher\n // tabbing past a fleet of thirty should not press it thirty times. React\n // Native has no tab order, so this reaches the DOM through\n // react-native-web and does nothing on a device — where each row is its\n // own touch target anyway.\n tabIndex={0}\n {...webAria({ 'aria-activedescendant': active ? `${rowIdPrefix}-${active}` : undefined })}\n {...webKeyDown(onKeyDown)}\n accessibilityLabel={copy.rosterLabel}\n testID={`${testId}-roster`}\n style={maxHeight === undefined ? undefined : { maxHeight }}\n contentContainerStyle={{ gap: theme.spacing(FLEET_ROSTER.gapUnits) }}\n onLayout={(event: LayoutChangeEvent) => {\n geometry.current.viewport = event.nativeEvent.layout.height;\n }}\n onScroll={(event: NativeSyntheticEvent<NativeScrollEvent>) => {\n geometry.current.offset = event.nativeEvent.contentOffset.y;\n }}\n scrollEventThrottle={16}\n >\n {units.map((unit) => (\n <FleetRow\n key={unit.id}\n unit={unit}\n copy={copy}\n freshness={freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds)}\n selected={unit.id === active}\n onSelect={onSelect}\n onMeasured={onMeasured}\n optionId={`${rowIdPrefix}-${unit.id}`}\n testId={`${testId}-${unit.id}`}\n />\n ))}\n </ScrollView>\n );\n}\n\nconst styles = StyleSheet.create({\n badge: { flexShrink: 0 },\n dot: {\n borderRadius: FLEET_DOT.size / 2,\n flexShrink: 0,\n height: FLEET_DOT.size,\n width: FLEET_DOT.size,\n },\n label: { fontWeight: '500' },\n row: { alignItems: 'center', flexDirection: 'row' },\n rowText: { flexGrow: 1, flexShrink: 1, minWidth: 0 },\n});\n"],"mappings":"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","names":["React","StyleSheet","Text","View","React","jsx","jsxs","View","styles","Text","StyleSheet"]}

package/dist/native/data-display/LoadingState.js CHANGED Viewed

@@ -1,6 +1,9 @@
 import {
   muiTypeStyle
 } from "../chunks/chunk-2UFNPDYT.js";
+import {
+  EN_US_UI_LABELS
+} from "../chunks/chunk-DUELD4HY.js";
 import {
   SIZE_VALUES
 } from "../chunks/chunk-5WLOVHKK.js";
@@ -78,6 +81,13 @@ var makeTestIds = (dataTestId) => ({
   named: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`
 });
+// src/utils/resolve-labels.ts
+function resolveLabels(defaults, overrides) {
+  if (!overrides) return defaults;
+  const defined = Object.entries(overrides).filter(([, value]) => value !== void 0);
+  return { ...defaults, ...Object.fromEntries(defined) };
+}
 // src/components/data-display/LoadingState/LoadingState.native.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function messageStyle(theme, size) {
@@ -117,14 +127,14 @@ function SkeletonRows({ size, skeletonRows, testIds }) {
     `skeleton-row-${index}`
   )) });
 }
-function SkeletonView({ message, size, skeletonRows, testIds, style, rest }) {
+function SkeletonView({ message, labels, size, skeletonRows, testIds, style, rest }) {
   const theme = useUiTheme();
   return /* @__PURE__ */ jsxs(
     View,
     {
       role: "status",
       "aria-busy": true,
-      "aria-label": message || "Loading content",
+      "aria-label": message || labels.skeleton,
       testID: testIds.base,
       style: [styles.skeleton, { padding: theme.spacing(SKELETON_PADDING_UNITS) }, style],
       ...rest,
@@ -143,14 +153,14 @@ function SkeletonView({ message, size, skeletonRows, testIds, style, rest }) {
     }
   );
 }
-function SpinnerView({ message, size, testIds, style, rest }) {
+function SpinnerView({ message, labels, size, testIds, style, rest }) {
   const theme = useUiTheme();
   return /* @__PURE__ */ jsxs(
     View,
     {
       role: "status",
       "aria-busy": true,
-      "aria-label": message || "Loading",
+      "aria-label": message || labels.spinner,
       testID: testIds.base,
       style: [
         styles.spinner,
@@ -178,9 +188,10 @@ function SpinnerView({ message, size, testIds, style, rest }) {
 }
 var LoadingState = React.memo(function LoadingState2(rawProps) {
   const resolved = resolveLoadingStateProps(rawProps);
-  const { variant, message, size, skeletonRows, style, ...others } = resolved;
+  const { variant, message, labels, size, skeletonRows, style, ...others } = resolved;
   const args = {
     message,
+    labels: resolveLabels(EN_US_UI_LABELS.loadingState, labels),
     size,
     skeletonRows,
     style,