@12-apps/ui 6.92.0 → 6.92.2

package/dist/types/components/data-display/DataViews/data-views-range-calendar.d.ts

@@ -30,6 +30,18 @@ export interface DayRangeCalendarProps {
      */
     viewKey: string;
     testId: string;
+    /**
+     * The applied window in words ("Data: 01/10–15/10"), said on the hint's own
+     * line with "Limpar" at its end. Set by the pill, whose popover has no other
+     * place for them; a panel says them in its own header and leaves this unset.
+     */
+    summary?: string;
+    /**
+     * Empties the range: the line's "Limpar", shown while `summary` is set. Set
+     * only where the line may hold it; the line reserves its 40px only then.
+     * `fromKeyboard` is true when it was pressed from the keyboard.
+     */
+    onClear?: (fromKeyboard: boolean) => void;
 }
-export declare function DayRangeCalendar({ fieldLabel, value, onChange, months, viewKey, testId, }: DayRangeCalendarProps): React.JSX.Element;
+export declare function DayRangeCalendar({ fieldLabel, value, onChange, months, viewKey, testId, summary, onClear, }: DayRangeCalendarProps): React.JSX.Element;
 //# sourceMappingURL=data-views-range-calendar.d.ts.map

package/dist/types/components/data-display/DataViews/data-views-range-calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-views-range-calendar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-calendar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAgDrD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,GAAG,UAAU,CAIrF;AAwBD,yCAAyC;AACzC,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,GACP,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwC3C"}
+{"version":3,"file":"data-views-range-calendar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-calendar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAgDrD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,GAAG,UAAU,CAIrF;AA6HD,yCAAyC;AACzC,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuC3C"}

package/dist/types/components/data-display/DataViews/data-views-range-pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-views-range-pill.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-pill.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAUxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOvE,OAAO,EAAE,WAAW,EAAE,CAAC;AA8IvB,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwCpB;AAGD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACjE,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoCpB"}
+{"version":3,"file":"data-views-range-pill.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-pill.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAUxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOvE,OAAO,EAAE,WAAW,EAAE,CAAC;AAkJvB,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyCpB;AAGD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACjE,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoCpB"}

package/dist/types/components/data-display/DataViews/data-views-range-summary.d.ts

@@ -1,16 +1,15 @@
 import React from 'react';
 import type { RangeFieldConfig, RangeValue } from './data-views-types';
 /**
- * The applied window in words, and "Limpar".
+ * The applied window in words, and "Limpar", under a NUMBER range's boxes.
  *
  * An inverted window is not an error the merchant must fix before the list
  * responds — it simply matches nothing, and saying so beats an empty grid with
  * no explanation (FUT-668).
  *
- * A DAY filter keeps the row's height while nothing is applied: its first tap
- * on the calendar applies a bound, and a row appearing then grew the popover
- * 26px and moved it 32px up at 320×568, the day under the finger with it
- * (FUT-4144 UI review round 2). The held row is invisible and inert.
+ * A DAY range says these on its calendar's hint line instead (FUT-4144): a row
+ * of its own, held empty until the first tap so the popover would not grow,
+ * left 59px of white under the hint at 1280.
  */
 export declare function RangeSummary<T extends Record<string, unknown>>({ field, value, onClear, testId, }: {
     field: RangeFieldConfig<T>;

package/dist/types/components/data-display/DataViews/data-views-range-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-views-range-summary.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-summary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGvE;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC9D,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAM,GACP,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA+B3B"}
+{"version":3,"file":"data-views-range-summary.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-range-summary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGvE;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC9D,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAM,GACP,EAAE;IACD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAmB3B"}

package/package.json

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

package/src/components/data-display/DataViews/RESPONSIVE-BEHAVIOUR.md

@@ -292,9 +292,11 @@ the keystrokes it did.
 | months | one, `<Month> ▾ <Year> ▾ ‹ ›` caption | one, same caption | two side by side, `‹ setembro` · `outubro ›`, the current month on the right |
 
 - Order in the popover: preset chips, the `De`/`Até` boxes (sharing the row
-  equally), the inclusive/inverted note, the calendar, then the line saying
+  equally), the inclusive/inverted note, the calendar, then ONE line under it:
   which tap comes next ("Toque no primeiro e no último dia." / "Agora toque no
-  último dia."), then the pill's summary and "Limpar".
+  último dia."), and once a period is applied the window itself ("Data:
+  01/10–15/10"), with "Limpar" at the line's end from the first tap on. In the
+  panels the line says only the step; their header carries "Limpar".
 - One view of ONE range: a tap writes the boxes; a typed whole day writes the
   bound and moves the calendar to it; an impossible typed day (`31/02/2026`)
   is refused in its box and the calendar does not move; "Limpar", a preset or a
@@ -320,8 +322,10 @@ the keystrokes it did.
   where their trigger was when they opened, so a "Limpar" or a badge appearing
   on the bar after the first tap does not drag them sideways. They are
   re-placed only when their own height changes (a refused day's message), so
-  they never leave the screen. A day popover keeps its summary/"Limpar" row's
-  height while nothing is applied, so the first tap does not grow it.
+  they never leave the screen. A day popover has no summary row of its own:
+  the window and "Limpar" are on the hint's line, whose height does not change
+  as its words do, so no row is held empty and the first tap does not grow it
+  (an empty held row left 59px of white under the hint at 1280).
 - While a panel is open the bar is frozen; if the "Limpar" that a first filter
   brings in does not fit the row it shows as its icon until the panel closes.
 - A second tap before the first swaps them — the boxes never show a period

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

@@ -13,6 +13,7 @@
  * a search — it is the bar's own {@link PillControl}; see `sharesBarControl`.
  */
 import Checkbox from "@mui/material/Checkbox/index.js";
+import type { Theme } from "@mui/material/styles/index.js";
 
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
@@ -227,6 +228,17 @@ export function fieldClearing<T extends Record<string, unknown>>({
 }
 
 
+/**
+ * Under a shed quick chip: 12px below `sm`, the gap a following group's
+ * "Limpar" target reaches into (its 8px let the target cover the chip's
+ * label); 8px from `sm` up, as before.
+ */
+const quickSx = (theme: Theme) => ({
+  mb: MORE_SPACING.underQuick,
+  [theme.breakpoints.up("sm")]: { mb: 1 },
+  "&:last-of-type": { mb: 0 },
+});
+
 /**
  * A quick chip shed into the panel: its own line, because label and count are
  * already the whole control — no heading above it, no "Limpar" beside it.
@@ -240,7 +252,7 @@ export function MoreQuick({
   quick: QuickFilterConfig;
 } & Pick<MoreFieldProps, "pills" | "onToggleQuick" | "testIdPrefix">): React.JSX.Element {
   return (
-    <Box sx={{ mb: 1, "&:last-of-type": { mb: 0 } }}>
+    <Box sx={quickSx}>
       <QuickRow
         quick={quick}
         active={isQuickActive(quick, pills)}
@@ -251,6 +263,67 @@ export function MoreQuick({
   );
 }
 
+/**
+ * The "Mais" panel's vertical rhythm, in the theme's spacing units: the unit
+ * the header "Limpar"'s phone target reaches into (FUT-4144). The target is
+ * the button's 18px of text plus `reachUp` and `reachDown`, 40px at the
+ * default type scale, and it may never reach further than the gap that is
+ * there: under the group or quick chip above it (or the scroller's own top
+ * inset, for the first group) and under its own header. Sideways it reaches
+ * into the header row's empty gap and the scroller's padding, so a 37px
+ * "Limpar" is 41px wide.
+ */
+export const MORE_SPACING = {
+  /** Under a group. */
+  underGroup: 1.5,
+  /** Under a shed quick chip, below `sm` (8px from `sm` up, as before). */
+  underQuick: 1.5,
+  /**
+   * The scroller's top inset (`data-views-more-filters.tsx`), at every width:
+   * the first group's overlay reaches into it. Not part of a responsive `p`,
+   * whose `xs` value is emitted as a media query and would win over it.
+   */
+  aboveFirst: 1.5,
+  /** Under a group's header, below `sm`, applied or not, so nothing moves on apply. */
+  underHeader: 1.25,
+  /** Under a group's header from `sm` up, as it always was. */
+  underHeaderFromSm: 0.5,
+  reachUp: 1.5,
+  reachDown: 1.25,
+  reachSide: 0.25,
+} as const;
+
+/** A group's header row: the field's name, and "Limpar" while it is applied. */
+export const moreHeaderSx = (theme: Theme) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  mb: MORE_SPACING.underHeader,
+  [theme.breakpoints.up("sm")]: { mb: MORE_SPACING.underHeaderFromSm },
+});
+
+/**
+ * "Limpar" is 12px text, a 37×18 button: on a phone that was the whole target
+ * (FUT-4144, measured in the admin at 320–900). Below `sm` an overlay makes it
+ * at least 40×40 without moving the text, reaching only into gaps
+ * {@link MORE_SPACING} guarantees, in the same unit, so it grows and shrinks
+ * with them and covers nothing else. From `sm` up there is no overlay and the
+ * button is exactly as it was.
+ */
+export const clearTargetSx = (theme: Theme) => ({
+  position: "relative" as const,
+  [theme.breakpoints.up("sm")]: { position: "static" as const },
+  "&::before": {
+    content: '""',
+    position: "absolute" as const,
+    top: `-${theme.spacing(MORE_SPACING.reachUp)}`,
+    bottom: `-${theme.spacing(MORE_SPACING.reachDown)}`,
+    left: `-${theme.spacing(MORE_SPACING.reachSide)}`,
+    right: `-${theme.spacing(MORE_SPACING.reachSide)}`,
+    [theme.breakpoints.up("sm")]: { display: "none" },
+  },
+});
+
 /** One labelled group in the panel: the field's name, then its control. */
 export function MoreGroup<T extends Record<string, unknown>>({
   field,
@@ -265,8 +338,8 @@ export function MoreGroup<T extends Record<string, unknown>>({
   const copy = useDataViewsCopy();
   const { applied, clear } = fieldClearing({ field, pills, ranges, onTogglePill, onChangeRange });
   return (
-    <Box sx={{ mb: 1.5, "&:last-of-type": { mb: 0 } }}>
-      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 0.5 }}>
+    <Box sx={{ mb: MORE_SPACING.underGroup, "&:last-of-type": { mb: 0 } }}>
+      <Box sx={moreHeaderSx}>
         <Text variant="caption" as="span">
           <Box component="span" sx={{ color: "text.secondary" }}>
             {field.label}
@@ -283,17 +356,20 @@ export function MoreGroup<T extends Record<string, unknown>>({
             type="button"
             onClick={clear}
             data-testid={`${testIdPrefix}-more-${field.id}-clear`}
-            sx={{
-              ml: "auto",
-              border: 0,
-              p: 0,
-              bgcolor: "transparent",
-              cursor: "pointer",
-              font: "inherit",
-              fontSize: sxRem(12),
-              color: "primary.main",
-              "&:hover": { textDecoration: "underline" },
-            }}
+            sx={[
+              {
+                ml: "auto",
+                border: 0,
+                p: 0,
+                bgcolor: "transparent",
+                cursor: "pointer",
+                font: "inherit",
+                fontSize: sxRem(12),
+                color: "primary.main",
+                "&:hover": { textDecoration: "underline" },
+              },
+              clearTargetSx,
+            ]}
           >
             {copy.filters.clear}
           </Box>

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

@@ -17,7 +17,7 @@ import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
-import { fieldClearing, MoreGroup, MoreQuick, type MoreFieldProps } from "./data-views-more-fields";
+import { fieldClearing, MORE_SPACING, 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, remPx, sxRem } from "../../../tokens/relative";
@@ -322,7 +322,7 @@ export function MoreFilters<T extends Record<string, unknown>>({
               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={{ flex: "1 1 auto", minHeight: 0, overflowY: "auto", overflowX: "hidden", p: { xs: 1, sm: 1.5 }, minWidth: 0 }}>
+          <Box sx={{ flex: "1 1 auto", minHeight: 0, overflowY: "auto", overflowX: "hidden", px: { xs: 1, sm: 1.5 }, pb: { xs: 1, sm: 1.5 }, pt: MORE_SPACING.aboveFirst, minWidth: 0 }}>
             <MoreFields key={clearKey} fields={fields} {...rest} />
           </Box>
           {(anyApplied || holdsDayRange) && (

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

@@ -8,7 +8,7 @@
  */
 import Box from '@mui/material/Box/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { useDataViewsCopy } from './data-views-copy-context';
 import { DayBoundInput } from './data-views-day-input';
@@ -17,7 +17,7 @@ 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 { isRangeInverted, isRangeSet, rangeChipLabel } from './data-views-range-values';
 import type { RangeFieldConfig, RangeValue } from './data-views-types';
 import { sxRem } from '../../../tokens/relative';
 
@@ -71,6 +71,51 @@ function BoundField<T extends Record<string, unknown>>({
 }
 
 
+/**
+ * After the line's "Limpar" pressed from the keyboard, focus goes to the
+ * cleared "De" — the next thing to type — instead of falling to the page with
+ * the button that held it. A tap leaves focus alone: focusing "De" there would
+ * open the phone's keyboard over the calendar the next tap is for.
+ * The boxes remount on a clear, so focus waits for the reset key to move.
+ */
+function useFocusDeAfterClear(
+  key: number,
+  testId: string,
+): { rootRef: React.RefObject<HTMLDivElement | null>; clearToDe: (clear: () => void, fromKeyboard: boolean) => void } {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const pending = useRef(false);
+  useEffect(() => {
+    if (!pending.current) return;
+    pending.current = false;
+    rootRef.current?.querySelector<HTMLInputElement>(`[data-testid="${testId}-min"]`)?.focus();
+  }, [key, testId]);
+  return {
+    rootRef,
+    clearToDe: (clear, fromKeyboard) => {
+      pending.current = fromKeyboard;
+      clear();
+    },
+  };
+}
+
+/**
+ * The window and "Limpar" for the hint line, where the host asks for them.
+ * `clear` goes straight to the host, not through `emitted`: it is an outside
+ * write, so the boxes and the calendar re-open on the empty range.
+ */
+function hintLineProps<T extends Record<string, unknown>>(
+  field: RangeFieldConfig<T>,
+  value: RangeValue,
+  clear: (fromKeyboard: boolean) => void,
+): { summary: string | undefined; onClear: (fromKeyboard: boolean) => void } {
+  return { summary: appliedWindow(field, value), onClear: clear };
+}
+
+/** The applied window in words ("Data: 01/10–15/10"), or nothing while none is. */
+function appliedWindow<T extends Record<string, unknown>>(field: RangeFieldConfig<T>, value: RangeValue): string | undefined {
+  return isRangeSet(value) ? rangeChipLabel(field, value) : undefined;
+}
+
 /** 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}</>;
@@ -142,6 +187,11 @@ interface RangeBoundsProps<T extends Record<string, unknown>> {
    * its content and keeps the boxes' own width.
    */
   fillRow?: boolean;
+  /**
+   * Say the applied window, and its "Limpar", on the day calendar's hint line.
+   * The pill's popover sets it; a panel has them in its own header.
+   */
+  summaryOnHint?: boolean;
 }
 
 /**
@@ -157,9 +207,12 @@ export function RangeBounds<T extends Record<string, unknown>>({
   calendarMonths = 1,
   showCalendar = true,
   fillRow = false,
+  summaryOnHint = false,
 }: RangeBoundsProps<T>): React.JSX.Element {
   const copy = useDataViewsCopy();
   const { key, emitted } = useOutsideResetKey(value);
+  const { rootRef, clearToDe } = useFocusDeAfterClear(key, testId);
+  const hintLine = summaryOnHint ? hintLineProps(field, value, (fromKeyboard) => clearToDe(() => onChange({}), fromKeyboard)) : {};
   // 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.
@@ -170,7 +223,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
   };
   const day = field.kind === 'day';
   return (
-    <Box data-testid={`${testId}-panel`}>
+    <Box ref={rootRef} 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 } } }}>
@@ -216,6 +269,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
           months={calendarMonths}
           viewKey={`${key}-${typed}`}
           testId={testId}
+          {...hintLine}
         />
       )}
     </Box>

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

@@ -114,6 +114,107 @@ function openingMonth(value: RangeValue, months: number): Date | undefined {
   return new Date(anchor.getFullYear(), anchor.getMonth() - (months > 1 ? 1 : 0), 1);
 }
 
+/**
+ * The line under the calendar: the next step ("Toque no primeiro e no último
+ * dia." / "Agora toque no último dia.") or, once a period is applied, the
+ * window, with "Limpar" at its end.
+ *
+ * ONE line whose words change, never a row held empty for later (FUT-4144
+ * follow-up): #932 kept an invisible summary row under the hint so the first
+ * tap would not grow the popover, and at 1280 that was 59px of white.
+ *
+ * Where the line can hold "Limpar" (the pill's popover) it is always as tall as
+ * its 40px target, so it keeps one height with the button and without it, and
+ * the popover does not move. Where it cannot (a panel, whose header has
+ * "Limpar") it stays a plain line of text: no row reserved for a button that
+ * never comes. The text keeps to one line, cut with an ellipsis and whole in
+ * its title, so a long label never grows the line on the closing tap. The target
+ * is its own box, not padding pushed out with a negative margin: that version
+ * ran under the calendar's last week, which took its top 10px at 320 (FUT-4144
+ * UI review). The window is said in the primary ink, the steps in the
+ * secondary one, so the result does not read as one more instruction.
+ */
+function HintLine({
+  text,
+  isWindow,
+  canClear,
+  onClear,
+  testId,
+}: {
+  text: string;
+  /** `text` is the applied window, not a step. */
+  isWindow: boolean;
+  /** The line can hold "Limpar" at all — fixed per surface, not per state. */
+  canClear: boolean;
+  /** Shown now: "Limpar" empties the range; `fromKeyboard` is a click with `detail` 0 (Enter or Space). */
+  onClear: ((fromKeyboard: boolean) => void) | undefined;
+  testId: string;
+}): React.JSX.Element {
+  const clear = useDataViewsCopy().filters.clear;
+  return (
+    <Box
+      data-testid={`${testId}-calendar-line`}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 2,
+        mt: { xs: 0.25, sm: 1 },
+        minHeight: canClear ? sxRem(40) : undefined,
+        fontSize: sxRem(12),
+        lineHeight: 1.5,
+      }}
+    >
+      <Typography
+        component="p"
+        aria-live="polite"
+        data-testid={`${testId}-calendar-hint`}
+        title={text}
+        noWrap
+        sx={{ m: 0, minWidth: 0, font: 'inherit', color: isWindow ? 'text.primary' : 'text.secondary' }}
+      >
+        {text}
+      </Typography>
+      {onClear && (
+        <Box
+          component="button"
+          type="button"
+          onClick={(event) => onClear(event.detail === 0)}
+          data-testid={`${testId}-clear`}
+          sx={{
+            flexShrink: 0,
+            display: 'inline-flex',
+            alignItems: 'center',
+            minHeight: sxRem(40),
+            border: 0,
+            bgcolor: 'transparent',
+            cursor: 'pointer',
+            font: 'inherit',
+            fontWeight: 600,
+            color: 'primary.main',
+            px: 1,
+            py: 0,
+            // Its text lines up with the boxes' right edge; the side padding
+            // reaches into the popover's own.
+            mr: -1,
+            borderRadius: 1,
+            '&:hover': { bgcolor: 'action.hover' },
+            // The theme's focus ring for a keyboard, none for a tap.
+            '&:focus': { outline: 'none' },
+            '&:focus-visible': {
+              outline: (theme: Theme) => `${rem(theme, 2)} solid`,
+              outlineColor: 'primary.main',
+              outlineOffset: sxRem(1),
+            },
+          }}
+        >
+          {clear}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
 /** Props of {@link DayRangeCalendar}. */
 export interface DayRangeCalendarProps {
   /** The filter's own label ("Data"), which names the calendar. */
@@ -133,6 +234,18 @@ export interface DayRangeCalendarProps {
    */
   viewKey: string;
   testId: string;
+  /**
+   * The applied window in words ("Data: 01/10–15/10"), said on the hint's own
+   * line with "Limpar" at its end. Set by the pill, whose popover has no other
+   * place for them; a panel says them in its own header and leaves this unset.
+   */
+  summary?: string;
+  /**
+   * Empties the range: the line's "Limpar", shown while `summary` is set. Set
+   * only where the line may hold it; the line reserves its 40px only then.
+   * `fromKeyboard` is true when it was pressed from the keyboard.
+   */
+  onClear?: (fromKeyboard: boolean) => void;
 }
 
 export function DayRangeCalendar({
@@ -142,6 +255,8 @@ export function DayRangeCalendar({
   months,
   viewKey,
   testId,
+  summary,
+  onClear,
 }: DayRangeCalendarProps): React.JSX.Element {
   const copy: DataViewsDayCalendarCopy =
     useDataViewsCopy().filters.dayCalendar ?? (EN_US_DATA_VIEWS_COPY.filters.dayCalendar as DataViewsDayCalendarCopy);
@@ -172,14 +287,13 @@ export function DayRangeCalendar({
         // tap that CLOSES a period, so the first tap would write nothing.
         onIntermediateRangeChange={pick}
       />
-      <Typography
-        component="p"
-        aria-live="polite"
-        data-testid={`${testId}-calendar-hint`}
-        sx={{ mt: { xs: 0.25, sm: 1 }, fontSize: sxRem(12), color: 'text.secondary' }}
-      >
-        {waitingForEnd ? copy.pickEnd : copy.pickStart}
-      </Typography>
+      <HintLine
+        text={waitingForEnd ? copy.pickEnd : (summary ?? copy.pickStart)}
+        isWindow={!waitingForEnd && summary !== undefined}
+        canClear={onClear !== undefined}
+        onClear={summary === undefined ? undefined : onClear}
+        testId={testId}
+      />
     </Box>
   );
 }

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

@@ -180,6 +180,10 @@ const DAY_PAPER_SX = (theme: Theme) => ({
   // 280px seven 40px day columns need: at 320 it had 256 and every day was a
   // 33px target (FUT-4144 UI review).
   maxWidth: { xs: `calc(100% - ${rem(theme, 16)})`, sm: `calc(100% - ${rem(theme, 32)})` },
+  // And as tall as those same margins allow: MUI's default keeps 16px off the
+  // top and bottom, so a refused day's message at 320×568 made the popover
+  // 1px taller than its cap and it scrolled (FUT-4144 code review).
+  maxHeight: { xs: `calc(100% - ${rem(theme, 16)})`, sm: `calc(100% - ${rem(theme, 32)})` },
   p: { xs: 1, sm: 2 },
 });
 
@@ -232,6 +236,7 @@ export function RangePill<T extends Record<string, unknown>>({
           onChange={onChange}
           testId={testId}
           calendarMonths={calendarMonths}
+          summaryOnHint
         />
         <RangeSummary field={field} value={value} onClear={() => onChange({})} testId={testId} />
       </Popover>

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

@@ -11,16 +11,15 @@ import type { RangeFieldConfig, RangeValue } from './data-views-types';
 import { sxRem } from '../../../tokens/relative';
 
 /**
- * The applied window in words, and "Limpar".
+ * The applied window in words, and "Limpar", under a NUMBER range's boxes.
  *
  * An inverted window is not an error the merchant must fix before the list
  * responds — it simply matches nothing, and saying so beats an empty grid with
  * no explanation (FUT-668).
  *
- * A DAY filter keeps the row's height while nothing is applied: its first tap
- * on the calendar applies a bound, and a row appearing then grew the popover
- * 26px and moved it 32px up at 320×568, the day under the finger with it
- * (FUT-4144 UI review round 2). The held row is invisible and inert.
+ * A DAY range says these on its calendar's hint line instead (FUT-4144): a row
+ * of its own, held empty until the first tap so the popover would not grow,
+ * left 59px of white under the hint at 1280.
  */
 export function RangeSummary<T extends Record<string, unknown>>({
   field,
@@ -34,29 +33,17 @@ export function RangeSummary<T extends Record<string, unknown>>({
   testId: string;
 }): React.JSX.Element | null {
   const copy = useDataViewsCopy();
-  const active = isRangeSet(value);
-  if (!active && field.kind !== 'day') return null;
+  if (field.kind === 'day' || !isRangeSet(value)) return null;
   return (
-    <Box
-      aria-hidden={active ? undefined : true}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 2,
-        mt: { xs: 0.5, sm: 1.5 },
-        visibility: active ? undefined : 'hidden',
-      }}
-    >
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: { xs: 0.5, sm: 1.5 } }}>
       <Typography component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
-        {active ? rangeChipLabel(field, value) : field.label}
+        {rangeChipLabel(field, value)}
       </Typography>
       <Button
         variant="text"
         size="small"
-        onClick={active ? onClear : undefined}
-        tabIndex={active ? undefined : -1}
-        data-testid={active ? `${testId}-clear` : undefined}
+        onClick={onClear}
+        data-testid={`${testId}-clear`}
         sx={{ textTransform: 'none' }}
       >
         {copy.filters.clear}

package/dist/chunk-3OHZAZEE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-pill.tsx"],"sourcesContent":["'use client';\n\n/**\n * A range filter as a PILL in the inline filter bar — the same affordance the\n * multi-select facets use, so \"Data\" and \"Valor\" sit in the filter row beside\n * \"Pagamento\"/\"Situação\"/\"Método\" instead of floating above the grid.\n *\n * Before this the inline bar rendered pills only, and `rangeFields` had a\n * surface on the slide-in panel alone — which `inlineFilters` REPLACES on a wide\n * screen. So a range filter was invisible on exactly the screens that use it,\n * and a page wanting one had to hang its own inputs outside the grid, outside\n * `DataViewState`, and outside the grid's \"Limpar filtros\" (FUT-668).\n */\nimport CloseIcon from '@mui/icons-material/Close';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useContext } from 'react';\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { TableFilter } from '../../layout/TableFilter';\nimport { TableFilterContext } from '../../layout/TableFilter/TableFilterContext';\nimport { RangePresets } from './data-views-preset-chips';\nimport { RangeBounds } from './data-views-range-bounds';\nimport { RangeSummary } from './data-views-range-summary';\nimport { useStillAnchor } from './data-views-still-anchor';\nimport { presetsFor } from './data-views-range-presets';\nimport {\n  isRangeInverted,\n  isRangeSet,\n  numericRange,\n  rangeChipLabel,\n} from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { rem, remPx, sxRem } from '../../../tokens/relative';\n\n// Re-exported: the pair moved to its own file, and its importers keep their path.\nexport { RangeBounds };\n\n/**\n * The pill + its popover. Bounds commit on change (the list is server-driven, so\n * each edit is a query) and the popover stays open, which is what lets a\n * merchant set \"de\" and then \"até\" without re-opening it.\n */\n/** An applied range clears from the pill itself — re-opening to empty two fields is three gestures for one intent. */\nfunction ClearAffordance({\n  label,\n  onClear,\n  testId,\n}: {\n  label: string;\n  onClear: () => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const clear = (event: React.SyntheticEvent): void => {\n    event.stopPropagation();\n    onClear();\n  };\n  return (\n    <Box\n      component=\"span\"\n      role=\"button\"\n      tabIndex={0}\n      aria-label={copy.filters.clearRange(label)}\n      data-testid={testId}\n      onClick={clear}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        if (event.key !== 'Enter' && event.key !== ' ') return;\n        event.preventDefault();\n        clear(event);\n      }}\n      sx={{ display: 'inline-flex', borderRadius: 999, p: 0.125, '&:hover': { bgcolor: 'action.selected' } }}\n    >\n      <CloseIcon sx={{ fontSize: sxRem(14) }} />\n    </Box>\n  );\n}\n\n/** The pill button: its label carries the applied window, and its tone the state. */\nfunction RangeTrigger<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpen,\n  open,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  onOpen: (anchor: HTMLElement) => void;\n  open: boolean;\n  testId: string;\n}): React.JSX.Element {\n  const active = isRangeSet(value);\n  const inverted = isRangeInverted(value);\n  // An INVERTED window gets its own tone rather than the ordinary \"applied\"\n  // one: it is applied, and it matches nothing, and those are different states.\n  // At rest the pill draws the one field border (`fieldEdge`).\n  const tone = inverted ? 'error.main' : active ? 'primary.main' : null;\n  return (\n    <Button\n      variant=\"outlined\"\n      color=\"inherit\"\n      size=\"small\"\n      data-testid={testId}\n      aria-haspopup=\"dialog\"\n      aria-expanded={open}\n      onClick={(event) => onOpen(event.currentTarget)}\n      // ✕ FIRST, chevron LAST — the same shape as every other pill. It used to\n      // replace the chevron at the end, so a range pill and a multi-select pill\n      // put the clear in different places, and an applied range lost the\n      // affordance that says it opens.\n      startIcon={\n        active ? (\n          <ClearAffordance label={field.label} onClear={() => onChange({})} testId={`${testId}-clear-inline`} />\n        ) : undefined\n      }\n      endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(16) }} />}\n      sx={{\n        borderRadius: fieldRadiusPx,\n        height: fieldHeight,\n        px: 1.5,\n        maxWidth: sxRem(280),\n        color: inverted ? 'error.main' : 'text.primary',\n        fontWeight: 600,\n        fontSize: sxRem(13),\n        textTransform: 'none',\n        whiteSpace: 'nowrap',\n        borderColor: (theme) => tone ?? fieldEdge(theme),\n        bgcolor: active ? 'action.selected' : 'background.paper',\n        '&:hover': {\n          borderColor: active ? tone : 'text.primary',\n          bgcolor: active ? 'action.selected' : 'action.hover',\n        },\n      }}\n    >\n      {/* The applied bounds, in the label — a pill reading only \"Valor\" hides\n          the very thing that is narrowing the list. */}\n      <Box component=\"span\" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n        {active ? rangeChipLabel(field, value) : field.label}\n      </Box>\n    </Button>\n  );\n}\n\n/**\n * How many months the pill's calendar shows: two from the theme's `md` up,\n * where the popover has the ~670px they take; one below it.\n *\n * A media query, not an `sx` breakpoint, because it decides what to RENDER —\n * CSS cannot un-render a second month. `up('md')` so that where nothing can be\n * measured (a test, the server) the answer is the one month that always fits.\n */\nfunction useCalendarMonths(): 1 | 2 {\n  const theme = useTheme();\n  return useMediaQuery(theme.breakpoints.up('md')) ? 2 : 1;\n}\n\n/**\n * The day popover's width. Below `sm` it takes the screen's (less the\n * popover's own 16px margins, which its `maxWidth` already keeps), so the boxes\n * and the month share it instead of leaving a strip of grid beside a narrow\n * card. From `sm` to `md` it holds one month, and sized to its content the\n * preset row alone stretched it to ~515px with the month hugging the left and\n * a band of nothing beside it; 400 keeps the month and the boxes one width.\n * From `md` its content — two months — sets it.\n */\nconst DAY_PAPER_SX = (theme: Theme) => ({\n  width: { xs: '100%', sm: rem(theme, 400), md: 'auto' },\n  // Below `sm` 8px from each edge and 8px of padding, so the month gets the\n  // 280px seven 40px day columns need: at 320 it had 256 and every day was a\n  // 33px target (FUT-4144 UI review).\n  maxWidth: { xs: `calc(100% - ${rem(theme, 16)})`, sm: `calc(100% - ${rem(theme, 32)})` },\n  p: { xs: 1, sm: 2 },\n});\n\n\nexport function RangePill<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpenChange,\n  testIdPrefix,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  /** So a measured toolbar can hold still while this is open. */\n  onOpenChange?: (open: boolean) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const still = useStillAnchor();\n  const testId = `${testIdPrefix}-range-${field.id}`;\n  const calendarMonths = useCalendarMonths();\n  const theme = useTheme();\n  const phone = useMediaQuery(theme.breakpoints.down('sm'));\n  return (\n    <>\n      <RangeTrigger\n        field={field}\n        value={value}\n        onChange={onChange}\n        onOpen={(element) => {\n          still.open(element);\n          onOpenChange?.(true);\n        }}\n        open={Boolean(still.anchor)}\n        testId={testId}\n      />\n      <Popover\n        {...still.popoverProps}\n        onClose={() => {\n          still.close();\n          onOpenChange?.(false);\n        }}\n        // Below `sm` a day popover keeps 8px from the screen's edges instead of 16.\n        marginThreshold={field.kind === 'day' && phone ? remPx(theme, 8) : undefined}\n        slotProps={{ paper: { ref: still.paperRef, sx: [{ p: 2, mt: 0.5 }, field.kind === 'day' && DAY_PAPER_SX] } }}\n      >\n        <RangeBounds\n          field={field}\n          value={value}\n          onChange={onChange}\n          testId={testId}\n          calendarMonths={calendarMonths}\n        />\n        <RangeSummary field={field} value={value} onClear={() => onChange({})} testId={testId} />\n      </Popover>\n    </>\n  );\n}\n\n\n/**\n * One range on the SLIDE-IN panel (and the narrow-screen modal): the numeric\n * control the panel already had, or — for a day range, which that control cannot\n * express — the same `De`/`Até` pair the pill's popover uses.\n */\nexport function PanelRangeField<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  // The slide-in panel stays mounted while closed; its calendar does not.\n  // Outside a `TableFilter` (the \"Mais\" sheet, a test) the pair is on screen.\n  const panel = useContext(TableFilterContext);\n  if (field.kind === \"day\") {\n    return (\n      <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n        <Typography component=\"span\" sx={{ fontSize: sxRem(12), fontWeight: 500, color: \"text.secondary\" }}>\n          {field.label}\n        </Typography>\n        <RangeBounds\n          field={field}\n          value={value}\n          onChange={onChange}\n          testId={testId}\n          showCalendar={panel ? panel.open : true}\n        />\n      </Box>\n    );\n  }\n  return (\n    <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n      <TableFilter.RangeField\n        label={field.label}\n        unit={field.unit}\n        value={numericRange(value)}\n        onChange={(range) => onChange(range)}\n        testId={testId}\n      />\n      {/* Below the numeric control here, unlike the pill's popover: this one\n          renders its own label, and chips above it would separate the label\n          from the field it names. */}\n      <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}