@12-apps/ui 6.89.2 → 6.90.0

package/src/components/data-display/DataViews/data-views-more-fields.tsx

@@ -185,6 +185,7 @@ function OverflowRange<T extends Record<string, unknown>>({
       value={value}
       onChange={onChange}
       testId={`${testIdPrefix}-more-${field.id}`}
+      fillRow
     />
   );
 }

package/src/components/data-display/DataViews/data-views-more-filters.tsx

@@ -8,8 +8,9 @@ import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownR
 // which. On a phone, where both are icon-only, they were indistinguishable.
 import FilterAltRoundedIcon from "@mui/icons-material/FilterAltRounded";
 import Popover from "@mui/material/Popover/index.js";
-import type { Theme } from "@mui/material/styles/index.js";
-import { useState } from "react";
+import { useTheme, type Theme } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { Button } from "../../form/Button";
@@ -17,8 +18,9 @@ import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
 import { fieldClearing, MoreGroup, MoreQuick, type MoreFieldProps } from "./data-views-more-fields";
+import { useStillAnchor } from "./data-views-still-anchor";
 import type { OverflowField } from "./data-views-overflow";
-import { rem, sxRem } from "../../../tokens/relative";
+import { rem, remPx, sxRem } from "../../../tokens/relative";
 
 /**
  * "MAIS" — the filter overflow: its trigger, its panel and its footer. What
@@ -151,18 +153,32 @@ function MoreHeading(): React.JSX.Element {
 function MoreFooter({
   onClearAll,
   testIdPrefix,
+  reserved = false,
 }: {
   onClearAll: () => void;
   testIdPrefix: string;
+  /**
+   * Hold the footer's height with nothing in it. A panel holding a day range
+   * keeps the row while nothing is applied, so the first tap on its calendar
+   * does not grow the panel by a row and move its top under the finger
+   * (FUT-4144 UI review).
+   */
+  reserved?: boolean;
 }): React.JSX.Element {
   const copy = useDataViewsCopy();
   return (
-    <Box sx={{ px: 1.5, py: 1, borderTop: 1, borderColor: "divider" }}>
+    <Box
+      aria-hidden={reserved || undefined}
+      // Held, the row is blank — no rule over it either, or it reads as an
+      // empty bordered row.
+      sx={{ px: 1.5, py: 1, borderTop: 1, borderColor: reserved ? "transparent" : "divider", visibility: reserved ? "hidden" : undefined }}
+    >
       <Box
         component="button"
         type="button"
-        onClick={onClearAll}
-        data-testid={`${testIdPrefix}-more-clear-all`}
+        onClick={reserved ? undefined : onClearAll}
+        tabIndex={reserved ? -1 : undefined}
+        data-testid={reserved ? undefined : `${testIdPrefix}-more-clear-all`}
         sx={{
           width: "100%",
           border: 0,
@@ -200,16 +216,39 @@ function MoreFields<T extends Record<string, unknown>>({
   );
 }
 
-/** The overflow trigger + panel. Renders nothing when everything fits. */
-export function MoreFilters<T extends Record<string, unknown>>({
-  fields,
-  onOpenChange,
-  onClearAll,
-  anyApplied,
-  compact = false,
-  clearKey,
-  ...rest
-}: MoreFiltersProps<T> & {
+/**
+ * The panel is a column: heading, the fields' scroller, footer. Its height is
+ * the screen's, not a fixed 320px — at 390×844 that cap scrolled a day range's
+ * month caption and weekday row out of view after the first tap, and a typed
+ * day's refusal out of sight of its box (FUT-4144 UI review). MUI moves the
+ * panel up when it is taller than the room under its trigger.
+ */
+const COLUMN_SX = { display: "flex", flexDirection: "column" } as const;
+
+/**
+ * 320, not 300: inside 12px of padding a day range's month then has the 280px
+ * its seven 40px columns need and its month/year caption one row (FUT-4144).
+ */
+const PAPER_SX = (theme: Theme) => ({
+  ...COLUMN_SX,
+  width: rem(theme, 320),
+  maxWidth: `calc(100vw - ${rem(theme, 32)})`,
+});
+
+/**
+ * Below `sm` the panel takes the screen's width less 8px each side, so a day
+ * range's calendar gets the 280px its seven 40px columns need (it had 264 at
+ * 320 and 276 at 390, so every day was a 34-36px target).
+ */
+const PHONE_PAPER_SX = (theme: Theme) => ({
+  ...COLUMN_SX,
+  width: `calc(100vw - ${rem(theme, 16)})`,
+  maxWidth: `calc(100vw - ${rem(theme, 16)})`,
+  maxHeight: `calc(100% - ${rem(theme, 16)})`,
+});
+
+/** Props of {@link MoreFilters}. */
+interface MoreFiltersPanelProps<T extends Record<string, unknown>> extends MoreFiltersProps<T> {
   /** Changes on every clear-all; the fields here are keyed on it (FUT-4144). */
   clearKey?: number;
   /** Icon only — the same rung that strips Exibir/Exportar. */
@@ -227,9 +266,23 @@ export function MoreFilters<T extends Record<string, unknown>>({
    * got as far as "1" and then had nowhere to go.
    */
   onOpenChange?: (open: boolean) => void;
-}): React.JSX.Element | null {
-  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+}
+
+/** The overflow trigger + panel. Renders nothing when everything fits. */
+export function MoreFilters<T extends Record<string, unknown>>({
+  fields,
+  onOpenChange,
+  onClearAll,
+  anyApplied,
+  compact = false,
+  clearKey,
+  ...rest
+}: MoreFiltersPanelProps<T>): React.JSX.Element | null {
+  const still = useStillAnchor();
+  const theme = useTheme();
+  const phone = useMediaQuery(theme.breakpoints.down("sm"));
   if (fields.length === 0) return null;
+  const holdsDayRange = fields.some((field) => field.range?.kind === "day");
   return (
     <>
       <MoreTrigger
@@ -248,32 +301,32 @@ export function MoreFilters<T extends Record<string, unknown>>({
         }
         compact={compact}
         onOpen={(element) => {
-          setAnchor(element);
+          still.open(element);
           onOpenChange?.(true);
         }}
         testIdPrefix={rest.testIdPrefix}
       />
       <Popover
-        open={Boolean(anchor)}
-        anchorEl={anchor}
+        {...still.popoverProps}
         onClose={() => {
-          setAnchor(null);
+          still.close();
           onOpenChange?.(false);
         }}
-        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-        slotProps={{ paper: { sx: { width: sxRem(300), maxWidth: (theme: Theme) => `calc(100vw - ${rem(theme, 32)})` } } }}
+        // Below `sm`, 8px from the screen's edges instead of 16.
+        marginThreshold={phone ? remPx(theme, 8) : undefined}
+        slotProps={{ paper: { ref: still.paperRef, sx: phone ? PHONE_PAPER_SX : PAPER_SX } }}
       >
-        <Box data-testid={`${rest.testIdPrefix}-more-panel`}>
+        <Box data-testid={`${rest.testIdPrefix}-more-panel`} sx={{ ...COLUMN_SX, flex: "1 1 auto", minHeight: 0 }}>
           <MoreHeading />
-          {/* overflowX hidden, not auto: this panel is a fixed 300px and its
+          {/* overflowX hidden, not auto: this panel is a fixed width and its
               contents are told to shrink into it. A horizontal scrollbar here
               means something refused to, which is a bug to fix rather than a
               scrollbar to live with. */}
-          <Box sx={{ maxHeight: sxRem(320), overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }}>
+          <Box sx={{ flex: "1 1 auto", minHeight: 0, overflowY: "auto", overflowX: "hidden", p: { xs: 1, sm: 1.5 }, minWidth: 0 }}>
             <MoreFields key={clearKey} fields={fields} {...rest} />
           </Box>
-          {anyApplied && (
-            <MoreFooter onClearAll={onClearAll} testIdPrefix={rest.testIdPrefix} />
+          {(anyApplied || holdsDayRange) && (
+            <MoreFooter onClearAll={onClearAll} testIdPrefix={rest.testIdPrefix} reserved={!anyApplied} />
           )}
         </Box>
       </Popover>

package/src/components/data-display/DataViews/data-views-number-input.tsx

@@ -91,13 +91,8 @@ function boundAsNumber(amount: number | string | undefined): number | undefined
  * One end of a numeric range. The BOUND stays a plain `number` — nothing
  * downstream learns that the typing surface changed.
  */
-export function NumberBoundInput({
-  label,
-  value,
-  unit,
-  onChange,
-  testId,
-}: {
+/** Props of {@link NumberBoundInput}. */
+interface NumberBoundInputProps {
   label: string;
   /** The applied bound. A range restored from the URL hands this over as a string. */
   value: number | string | undefined;
@@ -105,7 +100,21 @@ export function NumberBoundInput({
   unit?: string;
   onChange: (bound: number | undefined) => void;
   testId: string;
-}): React.JSX.Element {
+  /**
+   * Take the width of the cell it sits in rather than its own 140px, so a
+   * pair in a panel splits the row equally (FUT-4144 UI review round 2).
+   */
+  fill?: boolean;
+}
+
+export function NumberBoundInput({
+  label,
+  value,
+  unit,
+  onChange,
+  testId,
+  fill = false,
+}: NumberBoundInputProps): React.JSX.Element {
   const applied = boundAsNumber(value);
   const [text, setText] = useState(() => formatPtBrNumber(value));
 
@@ -164,7 +173,8 @@ export function NumberBoundInput({
             }
           : undefined
       }
-      sx={[{ width: sxRem(140) }, fieldTextFieldStyles]}
+      fullWidth={fill}
+      sx={[{ width: fill ? '100%' : sxRem(140) }, fieldTextFieldStyles]}
     />
   );
 }

package/src/components/data-display/DataViews/data-views-preset-chips.tsx

@@ -11,9 +11,20 @@
  * Clicking an active preset CLEARS it. A chip that reads as pressed and does
  * nothing when pressed again is a dead control, and the alternative — hunting
  * for the pill's ✕ — is the gesture this row exists to remove.
+ *
+ * ONE LINE at every width (ADR 0190 in the host, FUT-4144): the presets are
+ * the options of one question, and as wrapping chips "Este ano" fell onto a
+ * second line at 320, 390 and 600, where it read as a second question. Where
+ * the row is wide enough they are a segmented control of equal parts; where it
+ * is not, the same question is a select.
  */
 import Box from "@mui/material/Box/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React, { useLayoutEffect, useRef, useState, type RefObject } from "react";
 
+import { EN_US_DATA_VIEWS_COPY } from "../../../en-US.data-display";
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { isPresetActive, resolvePreset } from "./data-views-range-presets";
 import type { RangePreset, RangeValue } from "./data-views-types";
 import { sxRem } from "../../../tokens/relative";
@@ -51,6 +62,9 @@ function PresetChip({
         fontSize: sxRem(12),
         fontWeight: 600,
         whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        minWidth: 0,
         "&:hover": { borderColor: active ? "primary.main" : "text.primary" },
       }}
     >
@@ -59,6 +73,115 @@ function PresetChip({
   );
 }
 
+/** The chip look, for the hidden row that measures each label at its natural width. */
+const MEASURE_SX = {
+  display: "inline-block",
+  px: 1.25,
+  border: 1,
+  font: "inherit",
+  fontSize: sxRem(12),
+  fontWeight: 600,
+  whiteSpace: "nowrap",
+} as const;
+
+/**
+ * Whether `count` equal parts, each as wide as the widest label, fit `width`
+ * with `gap` between them. Unmeasured (`null`: the server, jsdom) counts as
+ * fitting, so the row renders the buttons it always rendered.
+ */
+export function presetsFitOneLine(width: number | null, widest: number, count: number, gap: number): boolean {
+  if (width === null) return true;
+  return widest * count + gap * (count - 1) <= width;
+}
+
+/** The element's own width as it changes; `null` until measured, or where nothing can measure. */
+function useElementWidth(ref: RefObject<HTMLElement | null>): number | null {
+  const [width, setWidth] = useState<number | null>(null);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (element === null || typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver((entries) => {
+      const measured = entries[0]?.contentRect.width;
+      if (measured !== undefined && measured > 0) setWidth(measured);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+  return width;
+}
+
+/**
+ * The widest label at the chip's own type, padding and border, read off the
+ * hidden measuring row.
+ *
+ * `offsetWidth`, the LAYOUT width, never the bounding box: a popover grows in
+ * from 75% scale, and a box read during that transition is a quarter short —
+ * which judged "Acima de R$ 10" to fit a third of the "Mais" panel and cut it
+ * to "Acima de …" (FUT-4144 UI review round 2). Measured again when the row's
+ * width changes and once the web fonts have loaded, since a fallback face is
+ * narrower than the one the parts will be drawn in.
+ */
+function useWidestLabel(ref: RefObject<HTMLElement | null>, labels: string, width: number | null): number {
+  const [widest, setWidest] = useState(0);
+  useLayoutEffect(() => {
+    const measure = (): void => {
+      const spans = ref.current?.querySelectorAll<HTMLElement>("[data-preset-measure]") ?? [];
+      // +1: `offsetWidth` rounds, so a label laid out at 80.4px reads 80 and
+      // would be judged to fit half a pixel short, behind an ellipsis.
+      setWidest(Math.max(0, ...Array.from(spans, (span) => span.offsetWidth + 1)));
+    };
+    measure();
+    let live = true;
+    void document.fonts?.ready.then(() => {
+      if (live) measure();
+    });
+    return () => {
+      live = false;
+    };
+  }, [ref, labels, width]);
+  return widest;
+}
+
+/** The same question as a select, for a row too narrow for its parts. */
+function PresetSelect({
+  presets,
+  value,
+  onChange,
+  testId,
+}: {
+  presets: RangePreset[];
+  value: RangeValue;
+  onChange: (range: RangeValue) => void;
+  testId: string;
+}): React.JSX.Element {
+  const copy = useDataViewsCopy().filters.presetSelect ?? EN_US_DATA_VIEWS_COPY.filters.presetSelect;
+  const active = presets.find((preset) => isPresetActive(preset, value))?.id ?? "";
+  return (
+    <TextField
+      select
+      size="small"
+      fullWidth
+      label={copy?.label}
+      value={active}
+      onChange={(event) => {
+        const picked = presets.find((preset) => preset.id === event.target.value);
+        // "None" is the select's way of tapping the active chip again.
+        onChange(picked ? resolvePreset(picked) : {});
+      }}
+      SelectProps={{ native: true }}
+      InputLabelProps={{ shrink: true }}
+      inputProps={{ "data-testid": `${testId}-presets-select` }}
+    >
+      <option value="">{copy?.none}</option>
+      {presets.map((preset) => (
+        <option key={preset.id} value={preset.id}>
+          {preset.label}
+        </option>
+      ))}
+    </TextField>
+  );
+}
+
 /**
  * The preset row. Renders nothing when a field declares none, so a numeric
  * range without host-configured windows keeps the popover it had.
@@ -66,6 +189,9 @@ function PresetChip({
  * Carries no outer margin — the three surfaces that host it (the pill's
  * popover, the slide-in panel, the "Mais" overflow) each sit it in a different
  * stack, and a baked-in margin would be wrong in two of them.
+ *
+ * What is measured is the row's OWN width, not the window's: the same row
+ * lives in a 670px popover, a 300px panel and a phone-wide sheet.
  */
 export function RangePresets({
   presets,
@@ -78,24 +204,47 @@ export function RangePresets({
   onChange: (range: RangeValue) => void;
   testId: string;
 }): React.JSX.Element | null {
+  const theme = useTheme();
+  const box = useRef<HTMLDivElement>(null);
+  const width = useElementWidth(box);
+  const widest = useWidestLabel(box, presets.map((preset) => preset.label).join("|"), width);
   if (presets.length === 0) return null;
+  const fits = presetsFitOneLine(width, widest, presets.length, parseFloat(theme.spacing(0.75)));
   return (
-    <Box
-      data-testid={`${testId}-presets`}
-      sx={{ display: "flex", flexWrap: "wrap", gap: 0.75 }}
-    >
-      {presets.map((preset) => {
-        const active = isPresetActive(preset, value);
-        return (
-          <PresetChip
-            key={preset.id}
-            preset={preset}
-            active={active}
-            onSelect={() => onChange(active ? {} : resolvePreset(preset))}
-            testId={`${testId}-preset-${preset.id}`}
-          />
-        );
-      })}
+    <Box ref={box} sx={{ position: "relative", minWidth: 0 }}>
+      <Box
+        aria-hidden="true"
+        sx={{ position: "absolute", top: 0, left: 0, width: "max-content", height: 0, overflow: "hidden", visibility: "hidden" }}
+      >
+        {presets.map((preset) => (
+          <Box key={preset.id} component="span" data-preset-measure="" sx={MEASURE_SX}>
+            {preset.label}
+          </Box>
+        ))}
+      </Box>
+      {fits ? (
+        <Box
+          data-testid={`${testId}-presets`}
+          sx={{ display: "grid", gridTemplateColumns: `repeat(${presets.length}, minmax(0, 1fr))`, gap: 0.75 }}
+        >
+          {presets.map((preset) => {
+            const active = isPresetActive(preset, value);
+            return (
+              <PresetChip
+                key={preset.id}
+                preset={preset}
+                active={active}
+                onSelect={() => onChange(active ? {} : resolvePreset(preset))}
+                testId={`${testId}-preset-${preset.id}`}
+              />
+            );
+          })}
+        </Box>
+      ) : (
+        <Box data-testid={`${testId}-presets`}>
+          <PresetSelect presets={presets} value={value} onChange={onChange} testId={testId} />
+        </Box>
+      )}
     </Box>
   );
 }

package/src/components/data-display/DataViews/data-views-range-bounds.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+/**
+ * The `De`/`Até` pair of a range filter, its preset chips, the line under it
+ * and — for a day range — the calendar under that (FUT-4144). Shared by the
+ * pill's popover, the slide-in panel and the "Mais" sheet, so the three cannot
+ * drift on what a bound accepts or how it clears.
+ */
+import Box from '@mui/material/Box/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import React, { useState } from 'react';
+
+import { useDataViewsCopy } from './data-views-copy-context';
+import { DayBoundInput } from './data-views-day-input';
+import { NumberBoundInput } from './data-views-number-input';
+import { RangePresets } from './data-views-preset-chips';
+import { DayRangeCalendar } from './data-views-range-calendar';
+import { presetsFor } from './data-views-range-presets';
+import { useOutsideResetKey } from './data-views-range-reset';
+import { isRangeInverted } from './data-views-range-values';
+import type { RangeFieldConfig, RangeValue } from './data-views-types';
+import { sxRem } from '../../../tokens/relative';
+
+/**
+ * One end of the range. A day keeps its `AAAA-MM-DD` string verbatim (the form
+ * both the field and the backend speak) and is typed through the masked
+ * `dd/mm/aaaa` field rather than a native date input — see
+ * {@link DayBoundInput} for why. A number parses, and an unparseable/blank
+ * entry CLEARS the bound rather than writing `NaN`.
+ */
+function BoundField<T extends Record<string, unknown>>({
+  field,
+  label,
+  value,
+  onChange,
+  testId,
+  fill,
+}: {
+  field: RangeFieldConfig<T>;
+  label: string;
+  value: number | string | undefined;
+  onChange: (bound: number | string | undefined) => void;
+  testId: string;
+  /** A number box takes its cell's width; a day box always does. */
+  fill: boolean;
+}): React.JSX.Element {
+  const copy = useDataViewsCopy();
+  if (field.kind === 'day') {
+    return (
+      <DayBoundInput
+        fill
+        mask={copy.filters.dayMask}
+        invalidMessage={copy.filters.dayInvalid}
+        label={label}
+        value={value == null ? undefined : String(value)}
+        onChange={onChange}
+        testId={testId}
+      />
+    );
+  }
+  return (
+    <NumberBoundInput
+      fill={fill}
+      label={label}
+      value={value}
+      unit={field.unit}
+      onChange={onChange}
+      testId={testId}
+    />
+  );
+}
+
+
+/** One box of the pair: an equal share of the row for a day, as it was for a number. */
+function BoundCell({ grow, children }: { grow: boolean; children: React.ReactNode }): React.JSX.Element {
+  if (!grow) return <>{children}</>;
+  return <Box sx={{ flex: '1 1 0', minWidth: 0 }}>{children}</Box>;
+}
+
+/**
+ * The line under the pair: why an inverted window matches nothing, or — for a
+ * day range — that BOTH days are in the result. Saying so is FUT-668's other
+ * half: the bounds compare as ISO strings precisely so `até` keeps its whole
+ * day, and nothing on screen would otherwise tell the merchant that.
+ */
+function RangeNote({
+  day,
+  inverted,
+  testId,
+}: {
+  day: boolean;
+  inverted: boolean;
+  testId: string;
+}): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
+  if (inverted) {
+    return (
+      <Typography
+        component="p"
+        data-testid={`${testId}-inverted`}
+        sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}
+      >
+        {copy.filters.rangeInvalid}
+      </Typography>
+    );
+  }
+  if (!day) return null;
+  return (
+    <Typography
+      component="p"
+      data-testid={`${testId}-inclusive`}
+      // `text.secondary`, not `disabled`: the note is read, and disabled grey
+      // at 12px is 2.68:1 (FUT-4144 UI review).
+      sx={{ mt: { xs: 0.25, sm: 0.75 }, fontSize: sxRem(12), color: 'text.secondary' }}
+    >
+      {copy.filters.rangeInclusiveNote}
+    </Typography>
+  );
+}
+
+/** Props of {@link RangeBounds}. */
+interface RangeBoundsProps<T extends Record<string, unknown>> {
+  field: RangeFieldConfig<T>;
+  value: RangeValue;
+  onChange: (range: RangeValue) => void;
+  testId: string;
+  /**
+   * Months the day calendar shows side by side (FUT-4144). Two where the
+   * popover has the room; one, with the month/year selectors, on a phone and
+   * in the panels.
+   */
+  calendarMonths?: 1 | 2;
+  /**
+   * Whether the day calendar is mounted. A host that keeps the pair mounted
+   * while hidden (the slide-in panel) passes its open state, so a closed panel
+   * holds no calendar of its own.
+   */
+  showCalendar?: boolean;
+  /**
+   * A NUMBER pair splits the row equally too, as a day pair always does. Set
+   * by the panels, whose width is the row's; the pill's popover sizes itself to
+   * its content and keeps the boxes' own width.
+   */
+  fillRow?: boolean;
+}
+
+/**
+ * The `De`/`Até` pair for a range — shared by the pill's popover and the
+ * slide-in panel's day fields, so the two surfaces cannot drift on what a bound
+ * accepts or how it clears.
+ */
+export function RangeBounds<T extends Record<string, unknown>>({
+  field,
+  value,
+  onChange,
+  testId,
+  calendarMonths = 1,
+  showCalendar = true,
+  fillRow = false,
+}: RangeBoundsProps<T>): React.JSX.Element {
+  const copy = useDataViewsCopy();
+  const { key, emitted } = useOutsideResetKey(value);
+  // Moves the calendar to a TYPED day. A typed write is the fields' own, so
+  // the outside key above does not see it; a tap on the calendar moves
+  // neither, which is what keeps it still under the finger.
+  const [typed, setTyped] = useState(0);
+  const typedChange = (range: RangeValue) => {
+    setTyped((n) => n + 1);
+    onChange(emitted(range));
+  };
+  const day = field.kind === 'day';
+  return (
+    <Box data-testid={`${testId}-panel`}>
+      {/* Above the inputs, not below: the presets are the answer for most
+          merchants, and the two date pickers are the escape hatch. */}
+      <Box sx={{ '&:not(:empty)': { mb: { xs: 1, sm: 1.5 } } }}>
+        <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />
+      </Box>
+      {/* Top-aligned: a day that does not exist grows ITS field by a message
+          line, and centring would push the other box half a line down. The two
+          boxes are one height, so with no message this is the same row. */}
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
+        {/* A day pair shares the row equally, so it spans the calendar under
+            it; a number pair keeps its own widths. */}
+        <BoundCell grow={day || fillRow}>
+          <BoundField
+            key={`min-${key}`}
+            field={field}
+            label={copy.filters.rangeStart}
+            value={value.min}
+            onChange={(min) => typedChange({ ...value, min })}
+            testId={`${testId}-min`}
+            fill={fillRow}
+          />
+        </BoundCell>
+        <BoundCell grow={day || fillRow}>
+          <BoundField
+            key={`max-${key}`}
+            field={field}
+            label={copy.filters.rangeEnd}
+            value={value.max}
+            onChange={(max) => typedChange({ ...value, max })}
+            testId={`${testId}-max`}
+            fill={fillRow}
+          />
+        </BoundCell>
+      </Box>
+      <RangeNote day={day} inverted={isRangeInverted(value)} testId={testId} />
+      {/* Under the boxes and the note, with no button to reach it: the typed
+          path stays as short as it was, and a period is two taps (FUT-4144). */}
+      {day && showCalendar && (
+        <DayRangeCalendar
+          fieldLabel={field.label}
+          value={value}
+          onChange={(range) => onChange(emitted(range))}
+          months={calendarMonths}
+          viewKey={`${key}-${typed}`}
+          testId={testId}
+        />
+      )}
+    </Box>
+  );
+}