@12-apps/ui 6.96.0 → 6.96.2
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.
- package/NATIVE.md +1 -1
- package/dist/_internal/components/data-display/Avatar/Avatar.js +1 -1
- package/dist/_internal/components/data-display/Chip/Chip.js +3 -3
- package/dist/_internal/components/data-display/Chip/Chip.metrics.js +5 -1
- package/dist/_internal/components/data-display/Chip/Chip.styles.js +2 -2
- package/dist/_internal/components/data-display/index.js +4 -4
- package/dist/_internal/components/index.js +13 -13
- package/dist/_internal/components/layout/SettingCard/SettingCard.js +8 -8
- package/dist/_internal/components/layout/SettingCard/SettingCard.metrics.js +1 -1
- package/dist/_internal/components/layout/SettingCard/SettingCard.parts.js +6 -6
- package/dist/_internal/components/layout/SettingCard/SettingCard.styles.js +2 -2
- package/dist/_internal/components/layout/SettingCard/SettingCard.summary.js +7 -7
- package/dist/_internal/components/layout/SettingCard/SettingGrid.js +7 -7
- package/dist/_internal/components/layout/SettingCard/SettingGroup.js +9 -9
- package/dist/_internal/components/layout/SettingCard/SettingSwitch.js +8 -8
- package/dist/_internal/components/layout/SettingCard/SettingToggle.js +9 -9
- package/dist/_internal/components/layout/index.js +12 -12
- package/dist/_internal/user-avatar/user-avatar.js +2 -2
- package/dist/{chunk-X2GWR75Q.js → chunk-2C7AWMV7.js} +8 -3
- package/dist/chunk-2C7AWMV7.js.map +1 -0
- package/dist/{chunk-ZDAAHCIS.js → chunk-44BTMZB6.js} +4 -4
- package/dist/{chunk-DHAXUVMR.js → chunk-44I2KXKW.js} +24 -6
- package/dist/chunk-44I2KXKW.js.map +1 -0
- package/dist/{chunk-JIEVKHOH.js → chunk-EXEBN5ZP.js} +16 -1
- package/dist/chunk-EXEBN5ZP.js.map +1 -0
- package/dist/{chunk-3EIRRLCQ.js → chunk-F3UHWLTD.js} +4 -4
- package/dist/{chunk-E5I776YW.js → chunk-GZBLDPXY.js} +6 -2
- package/dist/{chunk-E5I776YW.js.map → chunk-GZBLDPXY.js.map} +1 -1
- package/dist/{chunk-CW5Z67NA.js → chunk-IAPFZJ6I.js} +4 -4
- package/dist/{chunk-E2UOEI7N.js → chunk-JJYECKEL.js} +2 -2
- package/dist/chunk-KSZ6GH3J.js +44 -0
- package/dist/chunk-KSZ6GH3J.js.map +1 -0
- package/dist/{chunk-NI67M453.js → chunk-L2ICH44N.js} +3 -3
- package/dist/{chunk-6ZAKPYWX.js → chunk-RCULGFEH.js} +4 -4
- package/dist/{chunk-E4NFH77Z.js → chunk-SSWNJR36.js} +3 -3
- package/dist/{chunk-IQWPVPV5.js → chunk-UJ7EHEXG.js} +2 -2
- package/dist/{chunk-SKIAWOUC.js → chunk-XSLF3YGH.js} +4 -4
- package/dist/data-display/Avatar.js +1 -1
- package/dist/data-display/Chip.js +3 -3
- package/dist/layout/SettingCard.js +12 -12
- package/dist/native/data-display/Chip.js +7 -3
- package/dist/native/data-display/Chip.js.map +1 -1
- package/dist/types/components/data-display/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/data-display/Chip/Chip.base.d.ts +4 -2
- package/dist/types/components/data-display/Chip/Chip.base.d.ts.map +1 -1
- package/dist/types/components/data-display/Chip/Chip.metrics.d.ts +11 -0
- package/dist/types/components/data-display/Chip/Chip.metrics.d.ts.map +1 -1
- package/dist/types/components/data-display/Chip/Chip.styles.d.ts.map +1 -1
- package/dist/types/components/layout/SettingCard/SettingCard.metrics.d.ts +19 -2
- package/dist/types/components/layout/SettingCard/SettingCard.metrics.d.ts.map +1 -1
- package/dist/types/components/layout/SettingCard/SettingCard.summary.d.ts.map +1 -1
- package/dist/types-native/components/data-display/Chip/Chip.base.d.ts +4 -2
- package/dist/types-native/components/data-display/Chip/Chip.base.d.ts.map +1 -1
- package/dist/types-native/components/data-display/Chip/Chip.look.native.d.ts.map +1 -1
- package/dist/types-native/components/data-display/Chip/Chip.metrics.d.ts +11 -0
- package/dist/types-native/components/data-display/Chip/Chip.metrics.d.ts.map +1 -1
- package/dist/user-avatar.js +2 -2
- package/package.json +1 -1
- package/src/components/data-display/Avatar/Avatar.tsx +22 -3
- package/src/components/data-display/Chip/Chip.base.ts +4 -2
- package/src/components/data-display/Chip/Chip.look.native.ts +8 -3
- package/src/components/data-display/Chip/Chip.metrics.ts +8 -0
- package/src/components/data-display/Chip/Chip.styles.tsx +41 -3
- package/src/components/data-display/Chip/chip.md +1 -1
- package/src/components/layout/SettingCard/SettingCard.metrics.ts +19 -2
- package/src/components/layout/SettingCard/SettingCard.summary.tsx +5 -0
- package/dist/chunk-BFRVMCQM.js +0 -27
- package/dist/chunk-BFRVMCQM.js.map +0 -1
- package/dist/chunk-DHAXUVMR.js.map +0 -1
- package/dist/chunk-JIEVKHOH.js.map +0 -1
- package/dist/chunk-X2GWR75Q.js.map +0 -1
- /package/dist/{chunk-ZDAAHCIS.js.map → chunk-44BTMZB6.js.map} +0 -0
- /package/dist/{chunk-3EIRRLCQ.js.map → chunk-F3UHWLTD.js.map} +0 -0
- /package/dist/{chunk-CW5Z67NA.js.map → chunk-IAPFZJ6I.js.map} +0 -0
- /package/dist/{chunk-E2UOEI7N.js.map → chunk-JJYECKEL.js.map} +0 -0
- /package/dist/{chunk-NI67M453.js.map → chunk-L2ICH44N.js.map} +0 -0
- /package/dist/{chunk-6ZAKPYWX.js.map → chunk-RCULGFEH.js.map} +0 -0
- /package/dist/{chunk-E4NFH77Z.js.map → chunk-SSWNJR36.js.map} +0 -0
- /package/dist/{chunk-IQWPVPV5.js.map → chunk-UJ7EHEXG.js.map} +0 -0
- /package/dist/{chunk-SKIAWOUC.js.map → chunk-XSLF3YGH.js.map} +0 -0
|
@@ -57,6 +57,21 @@ function useImageState(src, onError) {
|
|
|
57
57
|
useEffect(() => {
|
|
58
58
|
setImageError(false);
|
|
59
59
|
setImageLoading(!!src);
|
|
60
|
+
if (!src || typeof Image === "undefined") return void 0;
|
|
61
|
+
let current = true;
|
|
62
|
+
const probe = new Image();
|
|
63
|
+
probe.onload = () => {
|
|
64
|
+
if (current) setImageLoading(false);
|
|
65
|
+
};
|
|
66
|
+
probe.onerror = () => {
|
|
67
|
+
if (!current) return;
|
|
68
|
+
setImageError(true);
|
|
69
|
+
setImageLoading(false);
|
|
70
|
+
};
|
|
71
|
+
probe.src = src;
|
|
72
|
+
return () => {
|
|
73
|
+
current = false;
|
|
74
|
+
};
|
|
60
75
|
}, [src]);
|
|
61
76
|
const handleImageError = useCallback(
|
|
62
77
|
(event) => {
|
|
@@ -178,4 +193,4 @@ export {
|
|
|
178
193
|
Avatar,
|
|
179
194
|
AvatarGroup
|
|
180
195
|
};
|
|
181
|
-
//# sourceMappingURL=chunk-
|
|
196
|
+
//# sourceMappingURL=chunk-EXEBN5ZP.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.tsx"],"sourcesContent":["import BrokenImage from '@mui/icons-material/BrokenImage';\nimport Person from '@mui/icons-material/Person';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport {\n AVATAR_DEFAULTS,\n contentTypeOf,\n pickAvatarContent,\n type AvatarContentPick,\n} from './Avatar.helpers';\nimport { GROUP_MAX, GROUP_OVERLAP, GROUP_HOVER, BORDER_WIDTH } from './Avatar.metrics';\nimport type { AvatarProps, ContentType } from './Avatar.types';\nimport { rem } from '../../../tokens/relative';\nimport { AvatarView, type AvatarViewProps } from './Avatar.view';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\n/** The node behind the winning content slot; the pick itself is shared. */\nfunction resolveContent(args: {\n children?: React.ReactNode;\n fallback?: React.ReactNode;\n icon?: React.ReactNode;\n imageError: boolean;\n showFallbackOnError: boolean;\n}): { content: React.ReactNode; contentType: ContentType } {\n const { children, fallback, icon, imageError, showFallbackOnError } = args;\n const pick = pickAvatarContent({\n hasChildren: Boolean(children),\n hasFallback: Boolean(fallback),\n hasIcon: Boolean(icon),\n imageError,\n showFallbackOnError,\n });\n const NODES: Record<AvatarContentPick, React.ReactNode> = {\n children,\n fallback,\n icon,\n broken: <BrokenImage />,\n default: <Person />,\n };\n return { content: NODES[pick], contentType: contentTypeOf(pick) };\n}\n\n/** Fades the avatar in after `animationDelay`ms. */\nfunction useMountedFade(animationDelay: number): boolean {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n const timer = window.setTimeout(() => setMounted(true), animationDelay);\n return () => window.clearTimeout(timer);\n }, [animationDelay]);\n return mounted;\n}\n\ninterface ImageState {\n imageError: boolean;\n imageLoading: boolean;\n handleImageError: React.ReactEventHandler;\n handleImageLoad: () => void;\n}\n\n/**\n * Tracks the image's load lifecycle. `imageLoading` starts true whenever there is\n * a `src` and clears on load/error. Two sources report it: the `<img>`'s own\n * events (wired via `slotProps.img` in the view, since load/error don't bubble to\n * the root), and a probe of the same src. The probe is needed because MUI's\n * Avatar runs its own probe and, once that one errors, stops rendering the\n * `<img>` — whose error event then never fires, leaving the avatar blank under\n * the spinner forever (FUT-4467). Whichever reports first wins.\n */\nfunction useImageState(src: string | undefined, onError?: React.ReactEventHandler): ImageState {\n const [imageError, setImageError] = useState(false);\n const [imageLoading, setImageLoading] = useState(!!src);\n\n useEffect(() => {\n setImageError(false);\n setImageLoading(!!src);\n if (!src || typeof Image === 'undefined') return undefined;\n let current = true;\n const probe = new Image();\n probe.onload = () => {\n if (current) setImageLoading(false);\n };\n probe.onerror = () => {\n if (!current) return;\n setImageError(true);\n setImageLoading(false);\n };\n probe.src = src;\n return () => {\n current = false;\n };\n }, [src]);\n\n const handleImageError = useCallback<React.ReactEventHandler>(\n (event) => {\n setImageError(true);\n setImageLoading(false);\n onError?.(event);\n },\n [onError],\n );\n\n const handleImageLoad = useCallback(() => setImageLoading(false), []);\n\n return { imageError, imageLoading, handleImageError, handleImageLoad };\n}\n\n/** Normalizes props (defaults + rest passthrough) and derives everything the view needs. */\nfunction useAvatarModel(raw: AvatarProps, ref: React.Ref<HTMLDivElement>): AvatarViewProps {\n const {\n variant,\n size,\n glow,\n pulse,\n status,\n fallback,\n icon,\n bordered,\n color,\n src,\n alt,\n children,\n loading,\n onError,\n onClick,\n interactive,\n showFallbackOnError,\n animationDelay,\n className,\n dataTestId,\n // React Native's spelling of the same id; it names the component on both\n // sides and must not reach the DOM as an attribute.\n testID,\n ...rest\n } = { ...AVATAR_DEFAULTS, ...raw };\n\n const mounted = useMountedFade(animationDelay);\n const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => onClick?.(event),\n [onClick],\n );\n const { content, contentType } = resolveContent({\n children,\n fallback,\n icon,\n imageError,\n showFallbackOnError,\n });\n\n return {\n mounted,\n variant,\n size,\n color,\n glow,\n pulse,\n bordered,\n showSpinner: loading || imageLoading,\n imageError,\n clickable: interactive || !!onClick,\n imgSrc: imageError ? undefined : src,\n alt,\n ariaLabel: (rest['aria-label'] as string) || alt || EN_US_UI_LABELS.avatar.name,\n content,\n contentType,\n className,\n dataTestId: testID ?? dataTestId,\n status,\n forwardedRef: ref,\n onClick: handleClick,\n handleImageError,\n handleImageLoad,\n rest,\n };\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => (\n <AvatarView {...useAvatarModel(props, ref)} />\n));\n\nAvatar.displayName = 'Avatar';\n\nconst AvatarGroupContainer = styled('div')<{ overlap?: number }>(({ theme, overlap = GROUP_OVERLAP }) => ({\n display: 'flex',\n alignItems: 'center',\n '& > *': {\n marginLeft: rem(theme, -overlap),\n transition: 'all 0.3s ease',\n position: 'relative',\n border: `${rem(theme, BORDER_WIDTH)} solid ${theme.palette.background.paper}`,\n '&:hover': {\n zIndex: 100,\n transform: `scale(${GROUP_HOVER.scale}) translateY(${rem(theme, -GROUP_HOVER.lift)})`,\n },\n '&:first-of-type': {\n marginLeft: 0,\n },\n },\n}));\n\n// Export AvatarGroup for grouped avatars\nexport const AvatarGroup: React.FC<{\n children: React.ReactNode;\n max?: number;\n overlap?: number;\n className?: string;\n dataTestId?: string;\n}> = ({ children, max = GROUP_MAX, overlap = GROUP_OVERLAP, className, dataTestId }) => {\n const childrenArray = React.Children.toArray(children);\n const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;\n const remainingCount = childrenArray.length - visibleChildren.length;\n\n return (\n <AvatarGroupContainer overlap={overlap} className={className} data-testid={dataTestId}>\n {visibleChildren}\n {remainingCount > 0 && (\n <Avatar\n size={(visibleChildren[0] as React.ReactElement<AvatarProps>)?.props?.size || 'md'}\n color=\"neutral\"\n fallback={`+${remainingCount}`}\n bordered\n dataTestId={dataTestId ? `${dataTestId}-overflow` : undefined}\n />\n )}\n </AvatarGroupContainer>\n );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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","names":[]}
|
|
@@ -3,16 +3,16 @@ import {
|
|
|
3
3
|
headerStyles,
|
|
4
4
|
iconStyles,
|
|
5
5
|
titleStyles
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-UJ7EHEXG.js";
|
|
7
7
|
import {
|
|
8
8
|
SETTING_CARD
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-KSZ6GH3J.js";
|
|
10
10
|
import {
|
|
11
11
|
Collapsible
|
|
12
12
|
} from "./chunk-JYWF76Z5.js";
|
|
13
13
|
import {
|
|
14
14
|
Chip
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-L2ICH44N.js";
|
|
16
16
|
import {
|
|
17
17
|
Icon
|
|
18
18
|
} from "./chunk-YEKPQAOW.js";
|
|
@@ -139,4 +139,4 @@ export {
|
|
|
139
139
|
PendingSpinner,
|
|
140
140
|
LearnMore
|
|
141
141
|
};
|
|
142
|
-
//# sourceMappingURL=chunk-
|
|
142
|
+
//# sourceMappingURL=chunk-F3UHWLTD.js.map
|
|
@@ -51,6 +51,8 @@ var CHIP_TRANSITION_MS = 200;
|
|
|
51
51
|
var CHIP_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
52
52
|
var SOFT_GROUND_ALPHA = 0.14;
|
|
53
53
|
var SOFT_HOVER_ALPHA = 0.22;
|
|
54
|
+
var SOFT_WARNING_LIGHT_DARKEN = 0.2;
|
|
55
|
+
var SOFT_FOCUS_RING = { width: 2, offset: 2 };
|
|
54
56
|
|
|
55
57
|
export {
|
|
56
58
|
chipMuiSize,
|
|
@@ -67,6 +69,8 @@ export {
|
|
|
67
69
|
CHIP_TRANSITION_MS,
|
|
68
70
|
CHIP_TRANSITION_EASING,
|
|
69
71
|
SOFT_GROUND_ALPHA,
|
|
70
|
-
SOFT_HOVER_ALPHA
|
|
72
|
+
SOFT_HOVER_ALPHA,
|
|
73
|
+
SOFT_WARNING_LIGHT_DARKEN,
|
|
74
|
+
SOFT_FOCUS_RING
|
|
71
75
|
};
|
|
72
|
-
//# sourceMappingURL=chunk-
|
|
76
|
+
//# sourceMappingURL=chunk-GZBLDPXY.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/Chip/Chip.metrics.ts"],"sourcesContent":["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"],"mappings":";AAgBO,IAAM,cAAc,CAAC,SAC1B,SAAS,QAAQ,SAAS,OAAO,UAAU;AAyBtC,IAAM,aAAmD;AAAA,EAC9D,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AACF;AAGO,IAAM,cAAc;AAEpB,IAAM,iBAAiB;AAEvB,IAAM,wBAAwB;AAE9B,IAAM,wBAAwB;AAE9B,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B;AAEnC,IAAM,uBAAuB;AAK7B,IAAM,gBAAgB;AACtB,IAAM,eAAe,EAAE,SAAS,GAAG,MAAM,IAAI,YAAY,MAAM,WAAW,IAAI;AAC9E,IAAM,qBAAqB;AAC3B,IAAM,yBAAyB;AAG/B,IAAM,oBAAoB;AAE1B,IAAM,mBAAmB;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Chip/Chip.metrics.ts"],"sourcesContent":["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/**\n * How much a light-mode soft WARNING ink darkens its `dark` step (FUT-4464). With\n * the default theme, `warning.dark` (#e65100) on its 14% tint is 3.25:1; darkened\n * by 0.2 it is 4.77:1. The other five colours clear 4.5:1 on `dark` as it is.\n */\nexport const SOFT_WARNING_LIGHT_DARKEN = 0.2;\n/** A soft chip's keyboard-focus ring, in design px (read through `rem`). */\nexport const SOFT_FOCUS_RING = { width: 2, offset: 2 } as const;\n"],"mappings":";AAgBO,IAAM,cAAc,CAAC,SAC1B,SAAS,QAAQ,SAAS,OAAO,UAAU;AAyBtC,IAAM,aAAmD;AAAA,EAC9D,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AACF;AAGO,IAAM,cAAc;AAEpB,IAAM,iBAAiB;AAEvB,IAAM,wBAAwB;AAE9B,IAAM,wBAAwB;AAE9B,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B;AAEnC,IAAM,uBAAuB;AAK7B,IAAM,gBAAgB;AACtB,IAAM,eAAe,EAAE,SAAS,GAAG,MAAM,IAAI,YAAY,MAAM,WAAW,IAAI;AAC9E,IAAM,qBAAqB;AAC3B,IAAM,yBAAyB;AAG/B,IAAM,oBAAoB;AAE1B,IAAM,mBAAmB;AAMzB,IAAM,4BAA4B;AAElC,IAAM,kBAAkB,EAAE,OAAO,GAAG,QAAQ,EAAE;","names":[]}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import {
|
|
2
2
|
partTestId
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-F3UHWLTD.js";
|
|
4
4
|
import {
|
|
5
5
|
SETTING_CARD_OPEN_ATTR,
|
|
6
6
|
withCallerSx
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-UJ7EHEXG.js";
|
|
8
8
|
import {
|
|
9
9
|
SETTING_CARD,
|
|
10
10
|
SETTING_GRID_GAP_UNITS
|
|
11
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-KSZ6GH3J.js";
|
|
12
12
|
import {
|
|
13
13
|
rem
|
|
14
14
|
} from "./chunk-YKCAJ2TN.js";
|
|
@@ -79,4 +79,4 @@ export {
|
|
|
79
79
|
settingGridStyles,
|
|
80
80
|
SettingGrid
|
|
81
81
|
};
|
|
82
|
-
//# sourceMappingURL=chunk-
|
|
82
|
+
//# sourceMappingURL=chunk-IAPFZJ6I.js.map
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-DQ22UKMZ.js";
|
|
4
4
|
import {
|
|
5
5
|
Avatar
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-EXEBN5ZP.js";
|
|
7
7
|
import {
|
|
8
8
|
Card
|
|
9
9
|
} from "./chunk-4XBAEKQQ.js";
|
|
@@ -80,4 +80,4 @@ export {
|
|
|
80
80
|
UserAvatar,
|
|
81
81
|
UserMenu
|
|
82
82
|
};
|
|
83
|
-
//# sourceMappingURL=chunk-
|
|
83
|
+
//# sourceMappingURL=chunk-JJYECKEL.js.map
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
// src/components/layout/SettingCard/SettingCard.metrics.ts
|
|
2
|
+
var SETTING_CARD = {
|
|
3
|
+
/** Between the icon and the title. */
|
|
4
|
+
iconGap: 12,
|
|
5
|
+
/** The spinner beside a switch while its flip is saving. */
|
|
6
|
+
spinnerSize: 16,
|
|
7
|
+
/** How far a group's dependent rows sit in from its main switch. */
|
|
8
|
+
groupIndent: 24,
|
|
9
|
+
/** The rule down the left of a group's dependent rows. */
|
|
10
|
+
groupRuleWidth: 2,
|
|
11
|
+
/** The narrowest a grid column gets by default. */
|
|
12
|
+
gridMinColumnWidth: 320,
|
|
13
|
+
/** The widest the [i]'s full-summary tooltip gets. */
|
|
14
|
+
infoMaxWidth: 360,
|
|
15
|
+
/**
|
|
16
|
+
* The [i]'s tap target, the house 40 px floor (FUT-4443). The glyph stays 16 px
|
|
17
|
+
* (`xs`); a negative margin of `(infoTapTarget - glyph) / 2` gives the box back
|
|
18
|
+
* to the title row, so nothing moves.
|
|
19
|
+
*/
|
|
20
|
+
infoTapTarget: 40,
|
|
21
|
+
/** Above and below the glyph: (40 - 16) / 2, so the title row keeps its height. */
|
|
22
|
+
infoTapMarginBlock: -12,
|
|
23
|
+
/**
|
|
24
|
+
* Beside the glyph: minus the title row's `gap` (8 px), not (40 - 16) / 2, so the
|
|
25
|
+
* box ends where the status pill ends and never overlaps it.
|
|
26
|
+
*/
|
|
27
|
+
infoTapMarginInline: -8,
|
|
28
|
+
/**
|
|
29
|
+
* The [i]'s keyboard focus ring: its width, and its offset from the box. The
|
|
30
|
+
* offset is negative so the ring's OUTER edge is the 40 px box (a 40 px circle
|
|
31
|
+
* round a 16 px glyph), instead of a 44 px one crowding the title and the pill.
|
|
32
|
+
*/
|
|
33
|
+
infoFocusRingWidth: 2,
|
|
34
|
+
infoFocusRingOffset: -2
|
|
35
|
+
};
|
|
36
|
+
var SETTING_GRID_GAP_UNITS = 2;
|
|
37
|
+
var SETTING_GROUP_INACTIVE_OPACITY = 0.5;
|
|
38
|
+
|
|
39
|
+
export {
|
|
40
|
+
SETTING_CARD,
|
|
41
|
+
SETTING_GRID_GAP_UNITS,
|
|
42
|
+
SETTING_GROUP_INACTIVE_OPACITY
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=chunk-KSZ6GH3J.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/layout/SettingCard/SettingCard.metrics.ts"],"sourcesContent":["/**\n * The setting-card family's lengths, in design px. The web reads every one\n * through `rem(theme, n)`, so they scale with the host's type scale.\n */\nexport const SETTING_CARD = {\n /** Between the icon and the title. */\n iconGap: 12,\n /** The spinner beside a switch while its flip is saving. */\n spinnerSize: 16,\n /** How far a group's dependent rows sit in from its main switch. */\n groupIndent: 24,\n /** The rule down the left of a group's dependent rows. */\n groupRuleWidth: 2,\n /** The narrowest a grid column gets by default. */\n gridMinColumnWidth: 320,\n /** The widest the [i]'s full-summary tooltip gets. */\n infoMaxWidth: 360,\n /**\n * The [i]'s tap target, the house 40 px floor (FUT-4443). The glyph stays 16 px\n * (`xs`); a negative margin of `(infoTapTarget - glyph) / 2` gives the box back\n * to the title row, so nothing moves.\n */\n infoTapTarget: 40,\n /** Above and below the glyph: (40 - 16) / 2, so the title row keeps its height. */\n infoTapMarginBlock: -12,\n /**\n * Beside the glyph: minus the title row's `gap` (8 px), not (40 - 16) / 2, so the\n * box ends where the status pill ends and never overlaps it.\n */\n infoTapMarginInline: -8,\n /**\n * The [i]'s keyboard focus ring: its width, and its offset from the box. The\n * offset is negative so the ring's OUTER edge is the 40 px box (a 40 px circle\n * round a 16 px glyph), instead of a 44 px one crowding the title and the pill.\n */\n infoFocusRingWidth: 2,\n infoFocusRingOffset: -2,\n} as const;\n\n/** The grid's default gap, in theme SPACING units (not px): what `sx`'s `gap: 2` means. */\nexport const SETTING_GRID_GAP_UNITS = 2;\n\n/** How faded a group's dependent rows are while the main switch is off. */\nexport const SETTING_GROUP_INACTIVE_OPACITY = 0.5;\n"],"mappings":";AAIO,IAAM,eAAe;AAAA;AAAA,EAE1B,SAAS;AAAA;AAAA,EAET,aAAa;AAAA;AAAA,EAEb,aAAa;AAAA;AAAA,EAEb,gBAAgB;AAAA;AAAA,EAEhB,oBAAoB;AAAA;AAAA,EAEpB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd,eAAe;AAAA;AAAA,EAEf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrB,oBAAoB;AAAA,EACpB,qBAAqB;AACvB;AAGO,IAAM,yBAAyB;AAG/B,IAAM,iCAAiC;","names":[]}
|
|
@@ -3,10 +3,10 @@ import {
|
|
|
3
3
|
chipStyles,
|
|
4
4
|
iconWithTestId,
|
|
5
5
|
makeKeyDownHandler
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-44I2KXKW.js";
|
|
7
7
|
import {
|
|
8
8
|
chipMuiSize
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-GZBLDPXY.js";
|
|
10
10
|
import {
|
|
11
11
|
chipRole,
|
|
12
12
|
isClickable,
|
|
@@ -77,4 +77,4 @@ Chip.displayName = "Chip";
|
|
|
77
77
|
export {
|
|
78
78
|
Chip
|
|
79
79
|
};
|
|
80
|
-
//# sourceMappingURL=chunk-
|
|
80
|
+
//# sourceMappingURL=chunk-L2ICH44N.js.map
|
|
@@ -4,19 +4,19 @@ import {
|
|
|
4
4
|
import {
|
|
5
5
|
SettingSwitchBlock,
|
|
6
6
|
useSettingSwitchIds
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-44BTMZB6.js";
|
|
8
8
|
import {
|
|
9
9
|
SettingGroupContext
|
|
10
10
|
} from "./chunk-XJQNSMGA.js";
|
|
11
11
|
import {
|
|
12
12
|
partTestId
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-F3UHWLTD.js";
|
|
14
14
|
import {
|
|
15
15
|
dependentsStyles,
|
|
16
16
|
hintStyles,
|
|
17
17
|
surfaceStyles,
|
|
18
18
|
withCallerSx
|
|
19
|
-
} from "./chunk-
|
|
19
|
+
} from "./chunk-UJ7EHEXG.js";
|
|
20
20
|
import {
|
|
21
21
|
Icon
|
|
22
22
|
} from "./chunk-YEKPQAOW.js";
|
|
@@ -84,4 +84,4 @@ SettingGroup.displayName = "SettingGroup";
|
|
|
84
84
|
export {
|
|
85
85
|
SettingGroup
|
|
86
86
|
};
|
|
87
|
-
//# sourceMappingURL=chunk-
|
|
87
|
+
//# sourceMappingURL=chunk-RCULGFEH.js.map
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
import {
|
|
5
5
|
SettingSwitchBlock,
|
|
6
6
|
useSettingSwitchIds
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-44BTMZB6.js";
|
|
8
8
|
import {
|
|
9
9
|
useSettingGroup
|
|
10
10
|
} from "./chunk-XJQNSMGA.js";
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
flatStyles,
|
|
13
13
|
surfaceStyles,
|
|
14
14
|
withCallerSx
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-UJ7EHEXG.js";
|
|
16
16
|
|
|
17
17
|
// src/components/layout/SettingCard/SettingToggle.tsx
|
|
18
18
|
import Box from "@mui/material/Box/index.js";
|
|
@@ -44,4 +44,4 @@ SettingToggle.displayName = "SettingToggle";
|
|
|
44
44
|
export {
|
|
45
45
|
SettingToggle
|
|
46
46
|
};
|
|
47
|
-
//# sourceMappingURL=chunk-
|
|
47
|
+
//# sourceMappingURL=chunk-SSWNJR36.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
SETTING_CARD,
|
|
3
3
|
SETTING_GROUP_INACTIVE_OPACITY
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-KSZ6GH3J.js";
|
|
5
5
|
import {
|
|
6
6
|
CARD_BORDER_WIDTH,
|
|
7
7
|
CARD_RADIUS_UNITS
|
|
@@ -121,4 +121,4 @@ export {
|
|
|
121
121
|
iconStyles,
|
|
122
122
|
dependentsStyles
|
|
123
123
|
};
|
|
124
|
-
//# sourceMappingURL=chunk-
|
|
124
|
+
//# sourceMappingURL=chunk-UJ7EHEXG.js.map
|
|
@@ -3,21 +3,21 @@ import {
|
|
|
3
3
|
} from "./chunk-SALQ65SM.js";
|
|
4
4
|
import {
|
|
5
5
|
useSummaryInfo
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-2C7AWMV7.js";
|
|
7
7
|
import {
|
|
8
8
|
LearnMore,
|
|
9
9
|
PendingSpinner,
|
|
10
10
|
SaveError,
|
|
11
11
|
SettingHeader,
|
|
12
12
|
partTestId
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-F3UHWLTD.js";
|
|
14
14
|
import {
|
|
15
15
|
SETTING_CARD_OPEN_ATTR,
|
|
16
16
|
actionsStyles,
|
|
17
17
|
summaryStyles,
|
|
18
18
|
surfaceStyles,
|
|
19
19
|
withCallerSx
|
|
20
|
-
} from "./chunk-
|
|
20
|
+
} from "./chunk-UJ7EHEXG.js";
|
|
21
21
|
import {
|
|
22
22
|
Icon
|
|
23
23
|
} from "./chunk-YEKPQAOW.js";
|
|
@@ -170,4 +170,4 @@ SettingCard.displayName = "SettingCard";
|
|
|
170
170
|
export {
|
|
171
171
|
SettingCard
|
|
172
172
|
};
|
|
173
|
-
//# sourceMappingURL=chunk-
|
|
173
|
+
//# sourceMappingURL=chunk-XSLF3YGH.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "../chunk-2GTORM5E.js";
|
|
2
2
|
import {
|
|
3
3
|
Chip
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
6
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-L2ICH44N.js";
|
|
5
|
+
import "../chunk-44I2KXKW.js";
|
|
6
|
+
import "../chunk-GZBLDPXY.js";
|
|
7
7
|
import "../chunk-BF4FYOAR.js";
|
|
8
8
|
import "../chunk-XJAD6E3V.js";
|
|
9
9
|
import "../chunk-F5H2ZXST.js";
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import "../chunk-QGUNUXTT.js";
|
|
2
2
|
import {
|
|
3
3
|
SettingCard
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-XSLF3YGH.js";
|
|
5
5
|
import {
|
|
6
6
|
SettingToggle
|
|
7
|
-
} from "../chunk-
|
|
7
|
+
} from "../chunk-SSWNJR36.js";
|
|
8
8
|
import {
|
|
9
9
|
SettingGroup
|
|
10
|
-
} from "../chunk-
|
|
10
|
+
} from "../chunk-RCULGFEH.js";
|
|
11
11
|
import "../chunk-SALQ65SM.js";
|
|
12
|
-
import "../chunk-
|
|
13
|
-
import "../chunk-
|
|
12
|
+
import "../chunk-44BTMZB6.js";
|
|
13
|
+
import "../chunk-2C7AWMV7.js";
|
|
14
14
|
import "../chunk-XJQNSMGA.js";
|
|
15
15
|
import {
|
|
16
16
|
SETTING_GRID_CONTAINER,
|
|
17
17
|
SettingGrid
|
|
18
|
-
} from "../chunk-
|
|
19
|
-
import "../chunk-
|
|
20
|
-
import "../chunk-
|
|
21
|
-
import "../chunk-
|
|
18
|
+
} from "../chunk-IAPFZJ6I.js";
|
|
19
|
+
import "../chunk-F3UHWLTD.js";
|
|
20
|
+
import "../chunk-UJ7EHEXG.js";
|
|
21
|
+
import "../chunk-KSZ6GH3J.js";
|
|
22
22
|
import "../chunk-RN7UJI7S.js";
|
|
23
23
|
import "../chunk-JYWF76Z5.js";
|
|
24
24
|
import "../chunk-GGMB6LJH.js";
|
|
@@ -28,9 +28,9 @@ import "../chunk-Z5WUSI47.js";
|
|
|
28
28
|
import "../chunk-BCWL7HUO.js";
|
|
29
29
|
import "../chunk-QYJ25FWM.js";
|
|
30
30
|
import "../chunk-2GTORM5E.js";
|
|
31
|
-
import "../chunk-
|
|
32
|
-
import "../chunk-
|
|
33
|
-
import "../chunk-
|
|
31
|
+
import "../chunk-L2ICH44N.js";
|
|
32
|
+
import "../chunk-44I2KXKW.js";
|
|
33
|
+
import "../chunk-GZBLDPXY.js";
|
|
34
34
|
import "../chunk-BF4FYOAR.js";
|
|
35
35
|
import "../chunk-4PJ52YBO.js";
|
|
36
36
|
import "../chunk-EIMFA7KP.js";
|
|
@@ -13,7 +13,8 @@ import {
|
|
|
13
13
|
useUiTheme
|
|
14
14
|
} from "../chunks/chunk-ZYSOBULX.js";
|
|
15
15
|
import {
|
|
16
|
-
alpha
|
|
16
|
+
alpha,
|
|
17
|
+
darken
|
|
17
18
|
} from "../chunks/chunk-DNTO2D5M.js";
|
|
18
19
|
|
|
19
20
|
// src/components/data-display/Chip/Chip.native.tsx
|
|
@@ -90,6 +91,7 @@ var DELETE_ICON_ON_COLOR_ALPHA = 0.7;
|
|
|
90
91
|
var OUTLINED_HOVER_ALPHA = 0.04;
|
|
91
92
|
var SOFT_GROUND_ALPHA = 0.14;
|
|
92
93
|
var SOFT_HOVER_ALPHA = 0.22;
|
|
94
|
+
var SOFT_WARNING_LIGHT_DARKEN = 0.2;
|
|
93
95
|
|
|
94
96
|
// src/components/data-display/Chip/Chip.look.native.ts
|
|
95
97
|
var SELECTED_OPACITY = 0.08;
|
|
@@ -122,11 +124,13 @@ function softPaint(theme, color) {
|
|
|
122
124
|
};
|
|
123
125
|
}
|
|
124
126
|
const accent = theme.palette[color];
|
|
127
|
+
const lightInk = color === "warning" ? darken(accent.dark, SOFT_WARNING_LIGHT_DARKEN) : accent.dark;
|
|
128
|
+
const ink = theme.mode === "dark" ? accent.light : lightInk;
|
|
125
129
|
return {
|
|
126
130
|
container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },
|
|
127
131
|
pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },
|
|
128
|
-
label: { color:
|
|
129
|
-
deleteColor:
|
|
132
|
+
label: { color: ink, fontWeight: "600" },
|
|
133
|
+
deleteColor: ink
|
|
130
134
|
};
|
|
131
135
|
}
|
|
132
136
|
function outlinedPaint(theme, color) {
|
|
@@ -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 { 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":";;;;;;;;;;;;;;;;;;;AAAA,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,OAIK;;;ACRA,IAAM,aACX,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,QAAQ,MAAM;AAGpD,IAAM,WAAW,CACtB,YAGA,YACoC;AACpC,MAAI,WAAY,QAAO;AACvB,SAAO,UAAU,WAAW;AAC9B;AAEO,IAAM,cAAc,CACzB,UACA,SACA,eACY,CAAC,aAAa,QAAQ,OAAO,KAAK,QAAQ,UAAU;AAKlE,IAAM,cAAc,oBAAI,IAAI,CAAC,UAAU,WAAW,CAAC;AACnD,IAAM,gBAAgB,oBAAI,IAAI,CAAC,SAAS,GAAG,CAAC;AAgBrC,SAAS,cAAc,KAAa,GAA+B;AACxE,MAAI,EAAE,SAAU,QAAO;AACvB,MAAI,YAAY,IAAI,GAAG,KAAK,EAAE,aAAa,EAAE,SAAU,QAAO;AAC9D,MAAI,cAAc,IAAI,GAAG,MAAM,EAAE,WAAW,EAAE,YAAa,QAAO;AAClE,SAAO;AACT;;;AChCO,IAAM,cAAc,CAAC,SAC1B,SAAS,QAAQ,SAAS,OAAO,UAAU;AAyBtC,IAAM,aAAmD;AAAA,EAC9D,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,EAC7B;AACF;AAGO,IAAM,cAAc;AAEpB,IAAM,iBAAiB;AAEvB,IAAM,wBAAwB;AAE9B,IAAM,wBAAwB;AAE9B,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B;AAEnC,IAAM,uBAAuB;AAW7B,IAAM,oBAAoB;AAE1B,IAAM,mBAAmB;;;ACrFhC,IAAM,mBAAmB;AAWzB,IAAM,aAAa,CAAC,UAA8B,UAAU;AAG5D,IAAM,gBAAgB,CAAC,UACrB,MAAM,SAAS,UAAU,MAAM,QAAQ,KAAK,GAAG,IAAI,MAAM,QAAQ,KAAK,GAAG;AAE3E,SAAS,YAAY,OAAgB,OAA6B;AAChE,MAAI,CAAC,WAAW,KAAK,GAAG;AACtB,WAAO;AAAA,MACL,WAAW,EAAE,iBAAiB,MAAM,QAAQ,OAAO,SAAS;AAAA,MAC5D,SAAS,EAAE,iBAAiB,MAAM,MAAM,QAAQ,OAAO,UAAU,mBAAmB,oBAAoB,EAAE;AAAA,MAC1G,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK,QAAQ;AAAA,MAC3C,aAAa,MAAM,MAAM,QAAQ,KAAK,SAAS,iBAAiB;AAAA,IAClE;AAAA,EACF;AACA,QAAM,SAAS,MAAM,QAAQ,KAAK;AAClC,SAAO;AAAA,IACL,WAAW,EAAE,iBAAiB,OAAO,KAAK;AAAA,IAC1C,SAAS,EAAE,iBAAiB,OAAO,KAAK;AAAA,IACxC,OAAO,EAAE,OAAO,OAAO,aAAa;AAAA,IACpC,aAAa,MAAM,OAAO,cAAc,0BAA0B;AAAA,EACpE;AACF;AAEA,SAAS,UAAU,OAAgB,OAA6B;AAC9D,MAAI,CAAC,WAAW,KAAK,GAAG;AACtB,WAAO;AAAA,MACL,WAAW,EAAE,iBAAiB,MAAM,QAAQ,OAAO,SAAS;AAAA,MAC5D,SAAS,EAAE,iBAAiB,MAAM,QAAQ,OAAO,MAAM;AAAA,MACvD,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK,WAAW,YAAY,MAAM;AAAA,MAChE,aAAa,MAAM,MAAM,QAAQ,KAAK,WAAW,iBAAiB;AAAA,IACpE;AAAA,EACF;AACA,QAAM,SAAS,MAAM,QAAQ,KAAK;AAClC,SAAO;AAAA,IACL,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM,iBAAiB,EAAE;AAAA,IACpE,SAAS,EAAE,iBAAiB,MAAM,OAAO,MAAM,gBAAgB,EAAE;AAAA,IACjE,OAAO,EAAE,OAAO,OAAO,MAAM,YAAY,MAAM;AAAA,IAC/C,aAAa,MAAM,OAAO,MAAM,iBAAiB;AAAA,EACnD;AACF;AAEA,SAAS,cAAc,OAAgB,OAA6B;AAClE,QAAM,SAAoB,EAAE,iBAAiB,eAAe,aAAa,GAAG,aAAa,QAAQ;AACjG,MAAI,CAAC,WAAW,KAAK,GAAG;AACtB,WAAO;AAAA,MACL,WAAW,EAAE,GAAG,QAAQ,aAAa,cAAc,KAAK,EAAE;AAAA,MAC1D,SAAS,EAAE,iBAAiB,MAAM,QAAQ,OAAO,MAAM;AAAA,MACvD,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK,QAAQ;AAAA,MAC3C,aAAa,MAAM,MAAM,QAAQ,KAAK,SAAS,iBAAiB;AAAA,IAClE;AAAA,EACF;AACA,QAAM,SAAS,MAAM,QAAQ,KAAK;AAClC,SAAO;AAAA,IACL,WAAW,EAAE,GAAG,QAAQ,aAAa,MAAM,OAAO,MAAM,qBAAqB,EAAE;AAAA,IAC/E,SAAS,EAAE,iBAAiB,MAAM,OAAO,MAAM,oBAAoB,EAAE;AAAA,IACrE,OAAO,EAAE,OAAO,OAAO,KAAK;AAAA,IAC5B,aAAa,MAAM,OAAO,MAAM,qBAAqB;AAAA,EACvD;AACF;AAOO,SAAS,UACd,OACA,SACA,OACA,UACW;AACX,QAAM,QACJ,YAAY,aAAa,cAAc,OAAO,KAAK,IAAI,YAAY,SAAS,UAAU,OAAO,KAAK,IAAI,YAAY,OAAO,KAAK;AAChI,MAAI,YAAY,cAAc,CAAC,SAAU,QAAO;AAChD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW,EAAE,GAAG,MAAM,WAAW,iBAAiB,MAAM,QAAQ,OAAO,SAAS;AAAA,EAClF;AACF;AAGO,SAAS,mBAAmB,SAA0B,UAA8B;AACzF,SAAO;AAAA,IACL,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ,QAAQ;AAAA,IAChB,cAAc;AAAA,IACd,GAAI,WAAW,EAAE,SAAS,sBAAsB,IAAI,CAAC;AAAA,EACvD;AACF;AAGO,SAAS,eACd,OACA,SACA,SACW;AACX,QAAM,UAAU,YAAY,aAAa,QAAQ,uBAAuB,QAAQ;AAChF,SAAO;AAAA,IACL,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU;AAAA,IACV,aAAa;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAGO,SAAS,qBACd,SACA,SACA,MACW;AACX,QAAM,WAAW,YAAY;AAC7B,QAAM,aACJ,SAAS,SACJ,WAAW,QAAQ,yBAAyB,QAAQ,iBACpD,WAAW,QAAQ,2BAA2B,QAAQ;AAC7D,SAAO;AAAA,IACL;AAAA,IACA,aAAa,SAAS,SAAS,QAAQ,kBAAkB,QAAQ;AAAA,IACjE,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAGO,SAAS,oBAAoB,SAA0B,SAAiC;AAC7F,SAAO;AAAA,IACL,YAAY,QAAQ;AAAA,IACpB,aACE,YAAY,aAAa,QAAQ,4BAA4B,QAAQ;AAAA,IACvE,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAGO,SAAS,gBAAgB,SAAsC;AACpE,SAAO;AAAA,IACL,OAAO,QAAQ;AAAA,IACf,QAAQ,QAAQ;AAAA,IAChB,cAAc,QAAQ,aAAa;AAAA,IACnC,UAAU;AAAA,EACZ;AACF;AAEO,IAAM,cAAc,CAAC,SAAuC,WAAW,IAAI;;;AHtIvE,SAmFP,UAnFO,KAmFP,YAnFO;AAVX,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACmG;AACjG,MAAI,QAAQ;AACV,WAAO,oBAAC,QAAK,OAAO,qBAAqB,SAAS,SAAS,QAAQ,GAAI,kBAAO;AAAA,EAChF;AACA,MAAI,WAAW;AACb,WACE,oBAAC,QAAK,OAAO,qBAAqB,SAAS,SAAS,QAAQ,GAC1D;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,KAAK,UAAU;AAAA,QACzB,OAAO,gBAAgB,OAAO;AAAA,QAC9B,kCAAgC;AAAA;AAAA,IAClC,GACF;AAAA,EAEJ;AACA,MAAI,MAAM;AACR,WACE,oBAAC,QAAK,OAAO,qBAAqB,SAAS,SAAS,MAAM,GAAG,QAC1D,gBACH;AAAA,EAEJ;AACA,SAAO;AACT;AAGA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,gBAAgB,OAAO;AAAA,EACrC;AAAA,EACA;AACF,GAMsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,MACT,OAAO,oBAAoB,SAAS,OAAO;AAAA,MAE3C,8BAAC,QAAK,MAAK,UAAS,MAAM,QAAQ,YAAY,OAAc;AAAA;AAAA,EAC9D;AAEJ;AAgBA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AACnC,QAAM,QAAQ,WAAW;AACzB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,MAAM,MAAM;AAAA;AAAA,IACtB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,MAAM,OAAO;AAAA,QACrB,eAAe;AAAA,QACf,OAAO,CAAC,eAAe,OAAO,SAAS,OAAO,GAAG,MAAM,KAAK;AAAA,QAE3D;AAAA;AAAA,IACH;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,MAAM;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,MAAM,QAAQ;AAAA;AAAA,IACxB,IACE;AAAA,KACN;AAEJ;AAoBA,SAAS,gBAAgB,MAAkC;AACzD,SAAO,CAAC,UAAU;AAChB,UAAM,SAAS,cAAc,MAAM,KAAK,EAAE,GAAG,MAAM,SAAS,KAAK,KAAK,CAAC;AACvE,QAAI,WAAW,KAAM;AACrB,QAAI,WAAW,UAAU;AACvB,YAAM,eAAe;AACrB,WAAK,WAAW;AAChB;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,WAAW,KAAK,SAAS,SAAU;AACrD,UAAM,eAAe;AACrB,SAAK,UAAU;AAAA,EACjB;AACF;AAMO,IAAM,OAAa,iBAA4B,CAAC,OAAO,QAAQ;AACpE,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,QAAQ,WAAW;AACzB,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,YAAY,YAAY,IAAI,CAAC;AAC7C,QAAM,QAAQ,UAAU,OAAO,SAAS,OAAO,QAAQ,QAAQ,CAAC;AAChE,QAAM,OAAO,WAAW;AACxB,QAAM,YAAY,YAAY,UAAU,MAAM,UAAU;AACxD,QAAM,OAAO,SAAS,YAAY,IAAI;AAEtC,QAAM,OAA6B;AAAA,IACjC,mBAAmB,SAAS,QAAQ,QAAQ,CAAC;AAAA,IAC7C,MAAM;AAAA,IACN;AAAA,EACF;AAEA,QAAM,QAAQ,CAAC,UAAuC;AACpD,cAAU;AACV,cAAU,KAAK;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,UAAU;AAAA,MAClB;AAAA,MACA,iBAAe,aAAa,WAAW;AAAA,MACvC;AAAA,MAGA,UAAU,YAAY,IAAI;AAAA,MAC1B,SAAS,YAAY,QAAQ;AAAA,MAC5B,GAAG;AAAA,QACF,gBAAgB,EAAE,MAAM,UAAU,WAAW,YAAY,MAAM,SAAS,SAAS,CAAC;AAAA,MACpF;AAAA,MACA,OAAO,CAAC,UAAU,CAAC,MAAM,MAAM,WAAW,YAAY,MAAM,UAAU,IAAI;AAAA,MACzE,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO,WAAW,MAAM;AAAA;AAAA,MAC1B;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,KAAK,cAAc;","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/**\n * How much a light-mode soft WARNING ink darkens its `dark` step (FUT-4464). With\n * the default theme, `warning.dark` (#e65100) on its 14% tint is 3.25:1; darkened\n * by 0.2 it is 4.77:1. The other five colours clear 4.5:1 on `dark` as it is.\n */\nexport const SOFT_WARNING_LIGHT_DARKEN = 0.2;\n/** A soft chip's keyboard-focus ring, in design px (read through `rem`). */\nexport const SOFT_FOCUS_RING = { width: 2, offset: 2 } as const;\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 SOFT_WARNING_LIGHT_DARKEN,\n type ChipMuiSize,\n type ChipSizeMetrics,\n} from './Chip.metrics';\nimport { alpha, darken } 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 // The ink that reads on a 14% tint: `dark` over a light page, `light` over a dark\n // one; a light-mode warning darkens `dark` further, as the web does (FUT-4464).\n const lightInk = color === 'warning' ? darken(accent.dark, SOFT_WARNING_LIGHT_DARKEN) : accent.dark;\n const ink = theme.mode === 'dark' ? accent.light : lightInk;\n return {\n container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },\n pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },\n label: { color: ink, fontWeight: '600' },\n deleteColor: ink,\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAqK/D,eAAO,MAAM,MAAM,iGAEjB,CAAC;AAuBH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAmBA,CAAC"}
|
|
@@ -8,8 +8,10 @@ import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
|
|
|
8
8
|
* consumer has no `@mui/material` to resolve a type import against.
|
|
9
9
|
*/
|
|
10
10
|
/**
|
|
11
|
-
* `soft` is a status chip's look: the colour's tint for a ground and
|
|
12
|
-
*
|
|
11
|
+
* `soft` is a status chip's look: the colour's tint for a ground and, for ink,
|
|
12
|
+
* its dark step in light mode (warning's darkened a step further) and its light
|
|
13
|
+
* step in dark mode (4.5:1 on the tint either way), so a row of states reads
|
|
14
|
+
* without a row of solid blocks.
|
|
13
15
|
*/
|
|
14
16
|
export type ChipVariant = 'filled' | 'outlined' | 'soft';
|
|
15
17
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;GAMG;AACH
|
|
1
|
+
{"version":3,"file":"Chip.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;GAMG;AACH;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC;AAEjC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC;AAEnC,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|