@12-apps/ui 6.48.0 → 6.48.1

package/dist/_internal/components/data-display/LazyImage/LazyImage.js

@@ -1,6 +1,6 @@
 import {
   LazyImage
-} from "../../../../chunk-6J32H2RN.js";
+} from "../../../../chunk-QMSCRKR6.js";
 import "../../../../chunk-2TSGRQ2J.js";
 import "../../../../chunk-724ZONOL.js";
 import "../../../../chunk-2K2B5QM2.js";

package/dist/_internal/components/data-display/index.js

@@ -91,7 +91,7 @@ import "../../../chunk-S5UY5U73.js";
 import "../../../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../../../chunk-6J32H2RN.js";
+} from "../../../chunk-QMSCRKR6.js";
 import "../../../chunk-2TSGRQ2J.js";
 import "../../../chunk-724ZONOL.js";
 import "../../../chunk-UM35GGCS.js";

package/dist/_internal/components/index.js

@@ -521,7 +521,7 @@ import "../../chunk-S5UY5U73.js";
 import "../../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../../chunk-6J32H2RN.js";
+} from "../../chunk-QMSCRKR6.js";
 import "../../chunk-2TSGRQ2J.js";
 import "../../chunk-724ZONOL.js";
 import "../../chunk-UM35GGCS.js";

package/dist/{chunk-6J32H2RN.js → chunk-QMSCRKR6.js}

@@ -64,7 +64,8 @@ var sxLength = (theme, value) => isFraction(value) ? `${value * 100}%` : styleLe
 var innerLength = (theme, value) => isFraction(value) ? "100%" : styleLength(theme, value);
 var orDefault = (value, fallback) => value === void 0 || value === "" ? fallback : value;
 var emptyToUnset = (value) => value === "" ? void 0 : value;
-var isRelativeLength = (value) => isFraction(value) || typeof value === "string" && value.trim().endsWith("%");
+var RELATIVE_LENGTH_UNIT = /[\d.]+(?:%|[dsl]?v(?:w|h|i|b|min|max)|cq(?:w|h|i|b|min|max))(?![a-zA-Z])/;
+var isRelativeLength = (value) => isFraction(value) || typeof value === "string" && RELATIVE_LENGTH_UNIT.test(value);
 var placeholderAxis = (theme, width, height, resolve) => {
   const w = emptyToUnset(width);
   const h = height === "auto" ? void 0 : emptyToUnset(height);
@@ -274,4 +275,4 @@ LazyImage.displayName = "LazyImage";
 export {
   LazyImage
 };
-//# sourceMappingURL=chunk-6J32H2RN.js.map
+//# sourceMappingURL=chunk-QMSCRKR6.js.map

package/dist/{chunk-6J32H2RN.js.map → chunk-QMSCRKR6.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Skeleton } from '../../layout/Skeleton';\nimport type { ResolvedLazyImageProps } from './LazyImage.hooks';\nimport { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';\nimport type { LazyImageProps } from './LazyImage.types';\nimport { sheen } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\nimport { fieldHeight } from '../../../tokens/field-height';\n\nconst ImageContainer = styled(Box)(() => ({\n  position: 'relative',\n  display: 'inline-block',\n  overflow: 'hidden',\n}));\n\nconst StyledImage = styled('img')<{\n  fadeIn?: boolean;\n  fadeInDuration?: number;\n  isLoaded?: boolean;\n}>(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({\n  display: 'block',\n  maxWidth: '100%',\n  height: 'auto',\n  opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : 'none',\n}));\n\nconst SpinnerOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: sheen(theme, 0.8),\n  borderRadius: '50%',\n  padding: theme.spacing(1),\n}));\n\nconst FallbackContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.action.disabledBackground,\n  color: theme.palette.text.secondary,\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}));\n\ntype Length = number | string | undefined;\n\n/** A length prop as React `style` and MUI's `Skeleton` read it: a number is design px. */\nconst styleLength = (theme: Theme, value: Length): string | undefined =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\n/**\n * A width or height above 0 and up to 1 is a fraction of the container's parent, as in `sx`.\n * A negative number is no fraction: it stays a (negative, so invalid) length.\n */\nconst isFraction = (value: Length): value is number =>\n  typeof value === 'number' && value > 0 && value <= 1;\n\n/**\n * A length prop as `sx` reads it on a width or height: a number of 1 or less is\n * a fraction of the parent, and that stays so; any other number is design px.\n */\nconst sxLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? `${value * 100}%` : styleLength(theme, value);\n\n/**\n * A width or height for what is drawn inside the container. The container alone\n * takes a fraction, so everything in it fills it: a percentage here is measured\n * against the container and would stack (FUT-2666). Otherwise the same as `styleLength`.\n */\nconst innerLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? '100%' : styleLength(theme, value);\n\n/**\n * A width or height with its default. Only an unset or empty size takes it: `0`\n * is a size, which `||` read as unset (FUT-2669), and `sx` reads `''` as `0%`.\n */\nconst orDefault = (value: Length, fallback: number | string): number | string =>\n  value === undefined || value === '' ? fallback : value;\n\n/**\n * A width/height as `metrics` and the `ReactNode` `ErrorFallback` read it\n * (FUT-2774 #4): an explicit empty string is normalized to \"as if unset\"\n * rather than mapped to a component-wide default. Unlike `SkeletonIndicator`\n * (a content-less box with nothing else to size by, hence its own deliberate\n * `'100%'`/`'auto'` fallback), these draw the real image or a `ReactNode`\n * fallback — both have their own intrinsic size, so leaving an unset width\n * unset lets it size naturally (`brand-link.tsx`'s logo relies on exactly\n * this: an unset width capped by its own `sx.maxWidth`).\n */\nconst emptyToUnset = (value: Length): Length => (value === '' ? undefined : value);\n\n/** A length, already resolved to CSS — {@link innerLength} or {@link sxLength}. */\ntype LengthResolver = (theme: Theme, value: Length) => string | undefined;\n\n/**\n * Whether a length is a PERCENTAGE (a numeric {@link isFraction} or a `%`\n * string) — copying it onto the OTHER axis re-creates this ticket's own\n * collapse either way (width%/height% measure different boxes; Chromium-confirmed).\n */\nconst isRelativeLength = (value: Length): boolean =>\n  isFraction(value) || (typeof value === 'string' && value.trim().endsWith('%'));\n\n/** A resolved axis pair; `aspectRatio` is set when the OTHER axis comes from CSS, not a length. */\ntype AxisPair = { width: string | undefined; height: string | undefined; aspectRatio?: string };\n\n/**\n * The unset-axis DEFAULT for a PLACEHOLDER only (skeleton, `ReactNode`\n * fallback) — never the real image/`metrics` (an unset width sizes it\n * naturally; `brand-link.tsx`'s logo relies on that). Decision (FUT-2805): an\n * unset axis borrows the set one (a square); neither set, both take the\n * theme's field height; both set stays unchanged. `resolve` is `innerLength`\n * (skeleton) or `sxLength` (the container). A RELATIVE single axis\n * ({@link isRelativeLength}) cannot borrow the same way: it keeps its value\n * and squares up via `aspectRatio: '1 / 1'`, the other axis explicitly\n * `'auto'` (never `undefined` — `Skeleton`'s own default, a fixed `40`,\n * would silently win otherwise).\n */\nconst placeholderAxis = (theme: Theme, width: Length, height: Length, resolve: LengthResolver): AxisPair => {\n  const w = emptyToUnset(width);\n  // `height` always arrives defaulted to the literal `'auto'` when unset\n  // (`LAZY_IMAGE_DEFAULTS`) — indistinguishable from an explicit `\"auto\"`,\n  // and no distinction is needed: both mean \"no fixed height requested\".\n  const h = height === 'auto' ? undefined : emptyToUnset(height);\n\n  if (w === undefined && h === undefined) {\n    const field = fieldHeight(theme);\n    return { width: field, height: field };\n  }\n  if (h === undefined) {\n    if (isRelativeLength(w)) return { width: resolve(theme, w), height: 'auto', aspectRatio: '1 / 1' };\n    const resolved = resolve(theme, w);\n    return { width: resolved, height: resolved };\n  }\n  if (w === undefined) {\n    if (isRelativeLength(h)) return { width: 'auto', height: resolve(theme, h), aspectRatio: '1 / 1' };\n    const resolved = resolve(theme, h);\n    return { width: resolved, height: resolved };\n  }\n  return { width: resolve(theme, w), height: resolve(theme, h) };\n};\n\n/**\n * `ImageContainer`'s own axis: the ordinary `orDefault(...,'auto')` in every\n * state, except a ReactNode `fallback` while showing — the one case where\n * the container is the only thing that CAN fix its own collapse\n * (`FallbackContainer` is `position: absolute`, never feeding shrink-to-fit).\n */\nconst containerAxisFor = (theme: Theme, props: ResolvedLazyImageProps, hasError: boolean): AxisPair => {\n  const { width, height, fallback } = props;\n  const needsPlaceholderSize = hasError && Boolean(fallback) && typeof fallback !== 'string';\n  return needsPlaceholderSize\n    ? placeholderAxis(theme, width, height, sxLength)\n    : { width: sxLength(theme, orDefault(width, 'auto')), height: sxLength(theme, orDefault(height, 'auto')) };\n};\n\n/** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */\ninterface BoxMetrics {\n  width?: string;\n  height?: string;\n  objectFit: NonNullable<LazyImageProps['objectFit']>;\n  objectPosition: string;\n  borderRadius?: string;\n}\n\ninterface IndicatorProps {\n  props: ResolvedLazyImageProps;\n  metrics: BoxMetrics;\n}\n\nconst SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  // FUT-2805: replaces the old literal `'100%'`/`'auto'` fallbacks, which\n  // collapsed to 0 in a shrink-to-fit `ImageContainer` with nothing to\n  // resolve against.\n  const { width, height, aspectRatio } = placeholderAxis(theme, props.width, props.height, innerLength);\n  return (\n    <Skeleton\n      // FUT-2774 #5: `skeletonProps.variant` was typed but never read — the\n      // variant was hard-coded regardless of what a caller passed.\n      variant={props.skeletonProps.variant ?? 'rectangular'}\n      width={width}\n      height={height}\n      style={aspectRatio ? { aspectRatio } : undefined}\n      // FUT-2774 #5: `||` reads a caller's `false` the same as \"unset\", so\n      // `skeletonProps.animation={false}` could never turn the animation off.\n      animation={props.skeletonProps.animation ?? 'pulse'}\n      intensity={props.skeletonProps.intensity}\n      borderRadius={styleLength(theme, props.borderRadius)}\n      data-testid={`${props['data-testid']}-skeleton`}\n    />\n  );\n};\n\nconst SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  const { spinnerProps } = props;\n\n  return (\n    <SpinnerOverlay>\n      <CircularProgress\n        // FUT-2774 #5: `||` read `spinnerProps.size`/`thickness` of `0` the\n        // same as unset — the same class of bug FUT-2669 fixed for\n        // `width`/`height`, missed here.\n        size={styleLength(theme, spinnerProps.size ?? 40)}\n        thickness={spinnerProps.thickness ?? 4}\n        sx={{ color: spinnerProps.color || theme.palette.primary.main }}\n        data-testid={`${props['data-testid']}-spinner`}\n      />\n    </SpinnerOverlay>\n  );\n};\n\n/**\n * The placeholder sits in the box's flow and gives the box its size: the box's\n * own when one is set, the placeholder's when not. The real image is drawn over\n * it (`OVER_PLACEHOLDER`) until it has faded in. Its load and error are not the\n * image's, so neither reaches the caller; a failing one just retires.\n */\nconst PlaceholderIndicator: React.FC<IndicatorProps & { onError: () => void }> = ({\n  props,\n  metrics,\n  onError,\n}) => {\n  if (!props.placeholder) return null;\n\n  return (\n    <StyledImage\n      src={props.placeholder}\n      alt={`${props.alt} (loading)`}\n      style={metrics}\n      decoding={props.decoding}\n      loading={props.lazy ? 'lazy' : props.loading}\n      onError={onError}\n      data-testid={`${props['data-testid']}-placeholder`}\n    />\n  );\n};\n\nconst LoadingIndicator: React.FC<\n  IndicatorProps & { kind: NonNullable<LazyImageProps['loadingState']>; onPlaceholderError: () => void }\n> = ({ kind, onPlaceholderError, ...rest }) => {\n  switch (kind) {\n    case 'skeleton':\n      return <SkeletonIndicator {...rest} />;\n    case 'spinner':\n      return <SpinnerIndicator {...rest} />;\n    case 'placeholder':\n      return <PlaceholderIndicator {...rest} onError={onPlaceholderError} />;\n    default:\n      return null;\n  }\n};\n\n/**\n * The real image while the placeholder is up: laid over it and cropped by\n * `objectFit`, so the box never grows to hold both. It takes the flow back\n * when the placeholder goes.\n */\nconst OVER_PLACEHOLDER: React.CSSProperties = {\n  position: 'absolute',\n  inset: 0,\n  width: '100%',\n  height: '100%',\n};\n\nconst ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {\n  const theme = useTheme();\n  const { alt, fallback, width, height, borderRadius } = props;\n  const testId = props['data-testid'];\n\n  if (!fallback) return null;\n\n  if (typeof fallback === 'string') {\n    return (\n      <StyledImage\n        src={fallback}\n        alt={`${alt} (fallback)`}\n        style={metrics}\n        fadeIn={false}\n        isLoaded={true}\n        data-testid={`${testId}-fallback`}\n      />\n    );\n  }\n\n  return (\n    <FallbackContainer\n      sx={{\n        // FUT-2774 #4 (see `emptyToUnset`); the collapse is fixed by\n        // `LazyImage` giving `ImageContainer` ITSELF a size now\n        // (`containerAxisFor`) — this `position: absolute` box just fills it.\n        width: innerLength(theme, emptyToUnset(width)),\n        height: innerLength(theme, orDefault(height, 'auto')),\n        borderRadius: styleLength(theme, borderRadius),\n      }}\n      data-testid={`${testId}-fallback`}\n    >\n      {fallback}\n    </FallbackContainer>\n  );\n};\n\n/**\n * LazyImage component with enhanced features for optimized image loading\n * Supports lazy loading, placeholders, error handling, and various loading states\n */\nexport const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {\n  const props = resolveLazyImageProps(rawProps);\n  const theme = useTheme();\n  const {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    handlePlaceholderError,\n    showImage,\n    showLoading,\n    showPlaceholder,\n  } = useLazyImage(props);\n\n  const { width, height, borderRadius, alt } = props;\n  const testId = props['data-testid'];\n  const metrics: BoxMetrics = {\n    // FUT-2774 #4 (see `emptyToUnset`): `metrics` also sizes the REAL `<img>`,\n    // where an unset width means \"the image's own intrinsic size\" —\n    // `brand-link.tsx`'s logo relies on exactly that. `height`'s `'auto'`\n    // fallback has no such live case to protect: a percentage height against\n    // an auto-height containing block computes to `auto` regardless, so\n    // sharing `SkeletonIndicator`'s fallback changes nothing observable.\n    width: innerLength(theme, emptyToUnset(width)),\n    height: innerLength(theme, orDefault(height, 'auto')),\n    objectFit: props.objectFit,\n    objectPosition: props.objectPosition,\n    borderRadius: styleLength(theme, borderRadius),\n  };\n\n  const containerAxis = containerAxisFor(theme, props, state.hasError);\n\n  return (\n    <ImageContainer\n      ref={containerRef}\n      className={props.className}\n      sx={{\n        width: containerAxis.width,\n        height: containerAxis.height,\n        aspectRatio: containerAxis.aspectRatio,\n        // The same px length the image gets (`metrics`): in `sx` a bare number\n        // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).\n        borderRadius: metrics.borderRadius,\n      }}\n      data-testid={testId}\n    >\n      {showLoading && (\n        <LoadingIndicator\n          kind={effectiveLoadingState}\n          props={props}\n          metrics={metrics}\n          onPlaceholderError={handlePlaceholderError}\n        />\n      )}\n\n      {showImage && (\n        <StyledImage\n          src={state.currentSrc || undefined}\n          alt={alt}\n          onLoad={handleImageLoad}\n          onError={handleImageError}\n          fadeIn={props.fadeIn}\n          fadeInDuration={props.fadeInDuration}\n          isLoaded={!state.isLoading}\n          decoding={props.decoding}\n          loading={props.lazy ? 'lazy' : props.loading}\n          style={{ ...metrics, ...props.sx, ...(showPlaceholder && OVER_PLACEHOLDER) }}\n          aria-label={props['aria-label'] || alt}\n          aria-describedby={props['aria-describedby']}\n          role={props.role}\n          data-testid={`${testId}-img`}\n          {...imgPassThrough(props)}\n        />\n      )}\n\n      {state.hasError && <ErrorFallback props={props} metrics={metrics} />}\n    </ImageContainer>\n  );\n});\n\nLazyImage.displayName = 'LazyImage';\n"],"mappings":"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","names":["LazyImage"]}
+{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Skeleton } from '../../layout/Skeleton';\nimport type { ResolvedLazyImageProps } from './LazyImage.hooks';\nimport { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';\nimport type { LazyImageProps } from './LazyImage.types';\nimport { sheen } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\nimport { fieldHeight } from '../../../tokens/field-height';\n\nconst ImageContainer = styled(Box)(() => ({\n  position: 'relative',\n  display: 'inline-block',\n  overflow: 'hidden',\n}));\n\nconst StyledImage = styled('img')<{\n  fadeIn?: boolean;\n  fadeInDuration?: number;\n  isLoaded?: boolean;\n}>(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({\n  display: 'block',\n  maxWidth: '100%',\n  height: 'auto',\n  opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : 'none',\n}));\n\nconst SpinnerOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: sheen(theme, 0.8),\n  borderRadius: '50%',\n  padding: theme.spacing(1),\n}));\n\nconst FallbackContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.action.disabledBackground,\n  color: theme.palette.text.secondary,\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}));\n\ntype Length = number | string | undefined;\n\n/** A length prop as React `style` and MUI's `Skeleton` read it: a number is design px. */\nconst styleLength = (theme: Theme, value: Length): string | undefined =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\n/**\n * A width or height above 0 and up to 1 is a fraction of the container's parent, as in `sx`.\n * A negative number is no fraction: it stays a (negative, so invalid) length.\n */\nconst isFraction = (value: Length): value is number =>\n  typeof value === 'number' && value > 0 && value <= 1;\n\n/**\n * A length prop as `sx` reads it on a width or height: a number of 1 or less is\n * a fraction of the parent, and that stays so; any other number is design px.\n */\nconst sxLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? `${value * 100}%` : styleLength(theme, value);\n\n/**\n * A width or height for what is drawn inside the container. The container alone\n * takes a fraction, so everything in it fills it: a percentage here is measured\n * against the container and would stack (FUT-2666). Otherwise the same as `styleLength`.\n */\nconst innerLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? '100%' : styleLength(theme, value);\n\n/**\n * A width or height with its default. Only an unset or empty size takes it: `0`\n * is a size, which `||` read as unset (FUT-2669), and `sx` reads `''` as `0%`.\n */\nconst orDefault = (value: Length, fallback: number | string): number | string =>\n  value === undefined || value === '' ? fallback : value;\n\n/**\n * A width/height as `metrics` and the `ReactNode` `ErrorFallback` read it\n * (FUT-2774 #4): an explicit empty string is normalized to \"as if unset\"\n * rather than mapped to a component-wide default. Unlike `SkeletonIndicator`\n * (a content-less box with nothing else to size by, hence its own deliberate\n * `'100%'`/`'auto'` fallback), these draw the real image or a `ReactNode`\n * fallback — both have their own intrinsic size, so leaving an unset width\n * unset lets it size naturally (`brand-link.tsx`'s logo relies on exactly\n * this: an unset width capped by its own `sx.maxWidth`).\n */\nconst emptyToUnset = (value: Length): Length => (value === '' ? undefined : value);\n\n/** A length, already resolved to CSS — {@link innerLength} or {@link sxLength}. */\ntype LengthResolver = (theme: Theme, value: Length) => string | undefined;\n\n// A number + `%`, a (small/large/dynamic) viewport unit, or a container-query\n// unit, anywhere in a string, even nested in `calc()`/`min()`/`max()`/`clamp()`.\nconst RELATIVE_LENGTH_UNIT = /[\\d.]+(?:%|[dsl]?v(?:w|h|i|b|min|max)|cq(?:w|h|i|b|min|max))(?![a-zA-Z])/;\n// RELATIVE: {@link isFraction}, or that unit anywhere — borrowing it onto the\n// OTHER axis re-creates this collapse (all these units square, `LazyImage.md`).\nconst isRelativeLength = (value: Length): boolean =>\n  isFraction(value) || (typeof value === 'string' && RELATIVE_LENGTH_UNIT.test(value));\n\n/** A resolved axis pair; `aspectRatio` is set when the OTHER axis comes from CSS, not a length. */\ntype AxisPair = { width: string | undefined; height: string | undefined; aspectRatio?: string };\n\n/**\n * The unset-axis DEFAULT for a PLACEHOLDER only (skeleton, `ReactNode`\n * fallback) — never the real image/`metrics` (an unset width sizes it\n * naturally; `brand-link.tsx`'s logo relies on that). Decision (FUT-2805): an\n * unset axis borrows the set one (a square); neither set, both take the\n * theme's field height; both set stays unchanged. `resolve` is `innerLength`\n * (skeleton) or `sxLength` (the container). A RELATIVE single axis\n * ({@link isRelativeLength}) cannot borrow the same way: it keeps its value\n * and squares up via `aspectRatio: '1 / 1'`, the other axis explicitly\n * `'auto'` (never `undefined` — `Skeleton`'s own default, a fixed `40`,\n * would silently win otherwise).\n */\nconst placeholderAxis = (theme: Theme, width: Length, height: Length, resolve: LengthResolver): AxisPair => {\n  const w = emptyToUnset(width);\n  // `height` always arrives defaulted to the literal `'auto'` when unset\n  // (`LAZY_IMAGE_DEFAULTS`) — indistinguishable from an explicit `\"auto\"`,\n  // and no distinction is needed: both mean \"no fixed height requested\".\n  const h = height === 'auto' ? undefined : emptyToUnset(height);\n\n  if (w === undefined && h === undefined) {\n    const field = fieldHeight(theme);\n    return { width: field, height: field };\n  }\n  if (h === undefined) {\n    if (isRelativeLength(w)) return { width: resolve(theme, w), height: 'auto', aspectRatio: '1 / 1' };\n    const resolved = resolve(theme, w);\n    return { width: resolved, height: resolved };\n  }\n  if (w === undefined) {\n    if (isRelativeLength(h)) return { width: 'auto', height: resolve(theme, h), aspectRatio: '1 / 1' };\n    const resolved = resolve(theme, h);\n    return { width: resolved, height: resolved };\n  }\n  return { width: resolve(theme, w), height: resolve(theme, h) };\n};\n\n/**\n * `ImageContainer`'s own axis: the ordinary `orDefault(...,'auto')` in every\n * state, except a ReactNode `fallback` while showing — the one case where\n * the container is the only thing that CAN fix its own collapse\n * (`FallbackContainer` is `position: absolute`, never feeding shrink-to-fit).\n */\nconst containerAxisFor = (theme: Theme, props: ResolvedLazyImageProps, hasError: boolean): AxisPair => {\n  const { width, height, fallback } = props;\n  const needsPlaceholderSize = hasError && Boolean(fallback) && typeof fallback !== 'string';\n  return needsPlaceholderSize\n    ? placeholderAxis(theme, width, height, sxLength)\n    : { width: sxLength(theme, orDefault(width, 'auto')), height: sxLength(theme, orDefault(height, 'auto')) };\n};\n\n/** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */\ninterface BoxMetrics {\n  width?: string;\n  height?: string;\n  objectFit: NonNullable<LazyImageProps['objectFit']>;\n  objectPosition: string;\n  borderRadius?: string;\n}\n\ninterface IndicatorProps {\n  props: ResolvedLazyImageProps;\n  metrics: BoxMetrics;\n}\n\nconst SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  // FUT-2805: replaces the old literal `'100%'`/`'auto'` fallbacks, which\n  // collapsed to 0 in a shrink-to-fit `ImageContainer` with nothing to\n  // resolve against.\n  const { width, height, aspectRatio } = placeholderAxis(theme, props.width, props.height, innerLength);\n  return (\n    <Skeleton\n      // FUT-2774 #5: `skeletonProps.variant` was typed but never read — the\n      // variant was hard-coded regardless of what a caller passed.\n      variant={props.skeletonProps.variant ?? 'rectangular'}\n      width={width}\n      height={height}\n      style={aspectRatio ? { aspectRatio } : undefined}\n      // FUT-2774 #5: `||` reads a caller's `false` the same as \"unset\", so\n      // `skeletonProps.animation={false}` could never turn the animation off.\n      animation={props.skeletonProps.animation ?? 'pulse'}\n      intensity={props.skeletonProps.intensity}\n      borderRadius={styleLength(theme, props.borderRadius)}\n      data-testid={`${props['data-testid']}-skeleton`}\n    />\n  );\n};\n\nconst SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  const { spinnerProps } = props;\n\n  return (\n    <SpinnerOverlay>\n      <CircularProgress\n        // FUT-2774 #5: `||` read `spinnerProps.size`/`thickness` of `0` the\n        // same as unset — the same class of bug FUT-2669 fixed for\n        // `width`/`height`, missed here.\n        size={styleLength(theme, spinnerProps.size ?? 40)}\n        thickness={spinnerProps.thickness ?? 4}\n        sx={{ color: spinnerProps.color || theme.palette.primary.main }}\n        data-testid={`${props['data-testid']}-spinner`}\n      />\n    </SpinnerOverlay>\n  );\n};\n\n/**\n * The placeholder sits in the box's flow and gives the box its size: the box's\n * own when one is set, the placeholder's when not. The real image is drawn over\n * it (`OVER_PLACEHOLDER`) until it has faded in. Its load and error are not the\n * image's, so neither reaches the caller; a failing one just retires.\n */\nconst PlaceholderIndicator: React.FC<IndicatorProps & { onError: () => void }> = ({\n  props,\n  metrics,\n  onError,\n}) => {\n  if (!props.placeholder) return null;\n\n  return (\n    <StyledImage\n      src={props.placeholder}\n      alt={`${props.alt} (loading)`}\n      style={metrics}\n      decoding={props.decoding}\n      loading={props.lazy ? 'lazy' : props.loading}\n      onError={onError}\n      data-testid={`${props['data-testid']}-placeholder`}\n    />\n  );\n};\n\nconst LoadingIndicator: React.FC<\n  IndicatorProps & { kind: NonNullable<LazyImageProps['loadingState']>; onPlaceholderError: () => void }\n> = ({ kind, onPlaceholderError, ...rest }) => {\n  switch (kind) {\n    case 'skeleton':\n      return <SkeletonIndicator {...rest} />;\n    case 'spinner':\n      return <SpinnerIndicator {...rest} />;\n    case 'placeholder':\n      return <PlaceholderIndicator {...rest} onError={onPlaceholderError} />;\n    default:\n      return null;\n  }\n};\n\n/**\n * The real image while the placeholder is up: laid over it and cropped by\n * `objectFit`, so the box never grows to hold both. It takes the flow back\n * when the placeholder goes.\n */\nconst OVER_PLACEHOLDER: React.CSSProperties = {\n  position: 'absolute',\n  inset: 0,\n  width: '100%',\n  height: '100%',\n};\n\nconst ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {\n  const theme = useTheme();\n  const { alt, fallback, width, height, borderRadius } = props;\n  const testId = props['data-testid'];\n\n  if (!fallback) return null;\n\n  if (typeof fallback === 'string') {\n    return (\n      <StyledImage\n        src={fallback}\n        alt={`${alt} (fallback)`}\n        style={metrics}\n        fadeIn={false}\n        isLoaded={true}\n        data-testid={`${testId}-fallback`}\n      />\n    );\n  }\n\n  return (\n    <FallbackContainer\n      sx={{\n        // FUT-2774 #4 (see `emptyToUnset`); the collapse is fixed by\n        // `LazyImage` giving `ImageContainer` ITSELF a size now\n        // (`containerAxisFor`) — this `position: absolute` box just fills it.\n        width: innerLength(theme, emptyToUnset(width)),\n        height: innerLength(theme, orDefault(height, 'auto')),\n        borderRadius: styleLength(theme, borderRadius),\n      }}\n      data-testid={`${testId}-fallback`}\n    >\n      {fallback}\n    </FallbackContainer>\n  );\n};\n\n/**\n * LazyImage component with enhanced features for optimized image loading\n * Supports lazy loading, placeholders, error handling, and various loading states\n */\nexport const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {\n  const props = resolveLazyImageProps(rawProps);\n  const theme = useTheme();\n  const {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    handlePlaceholderError,\n    showImage,\n    showLoading,\n    showPlaceholder,\n  } = useLazyImage(props);\n\n  const { width, height, borderRadius, alt } = props;\n  const testId = props['data-testid'];\n  const metrics: BoxMetrics = {\n    // FUT-2774 #4 (see `emptyToUnset`): `metrics` also sizes the REAL `<img>`,\n    // where an unset width means \"the image's own intrinsic size\" —\n    // `brand-link.tsx`'s logo relies on exactly that. `height`'s `'auto'`\n    // fallback has no such live case to protect: a percentage height against\n    // an auto-height containing block computes to `auto` regardless, so\n    // sharing `SkeletonIndicator`'s fallback changes nothing observable.\n    width: innerLength(theme, emptyToUnset(width)),\n    height: innerLength(theme, orDefault(height, 'auto')),\n    objectFit: props.objectFit,\n    objectPosition: props.objectPosition,\n    borderRadius: styleLength(theme, borderRadius),\n  };\n\n  const containerAxis = containerAxisFor(theme, props, state.hasError);\n\n  return (\n    <ImageContainer\n      ref={containerRef}\n      className={props.className}\n      sx={{\n        width: containerAxis.width,\n        height: containerAxis.height,\n        aspectRatio: containerAxis.aspectRatio,\n        // The same px length the image gets (`metrics`): in `sx` a bare number\n        // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).\n        borderRadius: metrics.borderRadius,\n      }}\n      data-testid={testId}\n    >\n      {showLoading && (\n        <LoadingIndicator\n          kind={effectiveLoadingState}\n          props={props}\n          metrics={metrics}\n          onPlaceholderError={handlePlaceholderError}\n        />\n      )}\n\n      {showImage && (\n        <StyledImage\n          src={state.currentSrc || undefined}\n          alt={alt}\n          onLoad={handleImageLoad}\n          onError={handleImageError}\n          fadeIn={props.fadeIn}\n          fadeInDuration={props.fadeInDuration}\n          isLoaded={!state.isLoading}\n          decoding={props.decoding}\n          loading={props.lazy ? 'lazy' : props.loading}\n          style={{ ...metrics, ...props.sx, ...(showPlaceholder && OVER_PLACEHOLDER) }}\n          aria-label={props['aria-label'] || alt}\n          aria-describedby={props['aria-describedby']}\n          role={props.role}\n          data-testid={`${testId}-img`}\n          {...imgPassThrough(props)}\n        />\n      )}\n\n      {state.hasError && <ErrorFallback props={props} metrics={metrics} />}\n    </ImageContainer>\n  );\n});\n\nLazyImage.displayName = 'LazyImage';\n"],"mappings":"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","names":["LazyImage"]}

package/dist/data-display/LazyImage.js

@@ -1,7 +1,7 @@
 import "../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../chunk-6J32H2RN.js";
+} from "../chunk-QMSCRKR6.js";
 import "../chunk-2TSGRQ2J.js";
 import "../chunk-724ZONOL.js";
 import "../chunk-2K2B5QM2.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.48.0",
+  "version": "6.48.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/LazyImage/LazyImage.md

@@ -191,15 +191,44 @@ wrapping element, rounded to match the image:
 > - A **DEFINITE** set axis (a plain design-px number, or an absolute CSS
 >   length string) borrows straight onto the unset one: a square in real
 >   px/rem — e.g. `width={120}` alone gives the skeleton `120×120`.
-> - A **RELATIVE** set axis (a fraction in `(0, 1]`, or a `%` string) cannot
->   be copied onto the other one the same way — a width-percentage and a
->   height-percentage measure against two different boxes, so copying the
->   value would re-create the exact 0-height/0-width collapse this default
->   exists to fix. Instead, the set axis keeps its own value and the box
->   squares up through CSS `aspectRatio: '1 / 1'`, with the other axis left
->   `auto` — e.g. `width="100%"` alone gives the skeleton `width: 100%;
->   height: auto; aspect-ratio: 1 / 1`, a square exactly as wide as its
->   (now non-collapsing) container.
+> - A **RELATIVE** set axis cannot be copied onto the other one the same way —
+>   a width-percentage and a height-percentage measure against two different
+>   boxes, so copying the value would re-create the exact 0-height/0-width
+>   collapse this default exists to fix. Instead, the set axis keeps its own
+>   value and the box squares up through CSS `aspectRatio: '1 / 1'`, with the
+>   other axis left `auto` — e.g. `width="100%"` alone gives the skeleton
+>   `width: 100%; height: auto; aspect-ratio: 1 / 1`, a square exactly as wide
+>   as its (now non-collapsing) container. A length is RELATIVE when:
+>   - it is a fraction in `(0, 1]`, or
+>   - it has a `%` **anywhere** in the string — not only a bare trailing `%`,
+>     but a `%` nested inside `calc()`/`min()`/`max()`/`clamp()` too (FUT-2869:
+>     `width="calc(100% - 8px)"` alone squares, exactly like `width="100%"`
+>     alone — a `%` still measures against the containing block no matter what
+>     it is wrapped in, and borrowing it onto the other axis still collapses
+>     to 0 against an auto-height parent), or
+>   - it has a viewport unit — `vw`/`vh`/`vmin`/`vmax`, or the small/large/
+>     dynamic variants `svw`/`svh`/`svmin`/`svmax`, `lvw`/`lvh`/`lvmin`/
+>     `lvmax`, `dvw`/`dvh`/`dvmin`/`dvmax`, or the logical `vi`/`vb` — anywhere
+>     in the string (FUT-2869: `width="50vw"` alone squares too — see below for
+>     why), or
+>   - it has a container-query unit — `cqw`/`cqh`/`cqi`/`cqb`/`cqmin`/`cqmax` —
+>     anywhere in the string: it depends on the nearest queried container, not
+>     the length itself, exactly the reasoning below.
+>
+>   **Why viewport and container-query units square instead of borrow
+>   (FUT-2869's Decision).** Neither collapses to 0 the way a borrowed `%`
+>   does — a viewport unit resolves against the viewport, a container-query
+>   unit against its queried container, so a literally-borrowed `height: 50vw`
+>   is merely some non-zero length. But it is still wrong: the component's own
+>   promise for a single set axis is a SQUARE placeholder, and a length
+>   borrowed onto the other axis is a square only when the thing it measures
+>   against (the viewport, or the queried container) happens to be exactly the
+>   SAME size as `LazyImage`'s own container — the moment it isn't (any
+>   padding, sidebar, or max-width layout — the ordinary case), `width: 50vw`
+>   next to a borrowed `height: 50vw` is visibly not square. Squaring costs
+>   nothing extra (the same `aspectRatio` mechanism `%` already uses) and keeps
+>   one rule — "does this length depend on anything outside itself" — for
+>   every relative unit, instead of a different rule per unit family.
 > - With **neither** axis set, both take the theme's field height
 >   (`theme.fieldHeight`, through `fieldHeight()`/`rem()` — never a raw px).
 > - With **both** set, nothing above applies: the placeholder renders exactly

package/src/components/data-display/LazyImage/LazyImage.tsx

@@ -104,13 +104,13 @@ const emptyToUnset = (value: Length): Length => (value === '' ? undefined : valu
 /** A length, already resolved to CSS — {@link innerLength} or {@link sxLength}. */
 type LengthResolver = (theme: Theme, value: Length) => string | undefined;
 
-/**
- * Whether a length is a PERCENTAGE (a numeric {@link isFraction} or a `%`
- * string) — copying it onto the OTHER axis re-creates this ticket's own
- * collapse either way (width%/height% measure different boxes; Chromium-confirmed).
- */
+// A number + `%`, a (small/large/dynamic) viewport unit, or a container-query
+// unit, anywhere in a string, even nested in `calc()`/`min()`/`max()`/`clamp()`.
+const RELATIVE_LENGTH_UNIT = /[\d.]+(?:%|[dsl]?v(?:w|h|i|b|min|max)|cq(?:w|h|i|b|min|max))(?![a-zA-Z])/;
+// RELATIVE: {@link isFraction}, or that unit anywhere — borrowing it onto the
+// OTHER axis re-creates this collapse (all these units square, `LazyImage.md`).
 const isRelativeLength = (value: Length): boolean =>
-  isFraction(value) || (typeof value === 'string' && value.trim().endsWith('%'));
+  isFraction(value) || (typeof value === 'string' && RELATIVE_LENGTH_UNIT.test(value));
 
 /** A resolved axis pair; `aspectRatio` is set when the OTHER axis comes from CSS, not a length. */
 type AxisPair = { width: string | undefined; height: string | undefined; aspectRatio?: string };