@12-apps/ui 6.89.1 → 6.90.0

package/src/components/data-display/DataViews/data-views-copy.ts

@@ -1,4 +1,5 @@
 import type { CategorySelectCopy, ConfirmActionCopy, DataGridCopy, TableFilterCopy } from "../../../copy";
+import type { CalendarLabels } from "../../../copy/labels";
 import type { SavedViewsLabels } from "../../layout/ContentToolbar/ContentToolbar.types";
 /**
  * Every word the DataViews family renders, as REQUIRED host config (FUT-760).
@@ -180,6 +181,24 @@ export interface DataViewsGridCopy extends DataGridCopy {
   sortDescending: string;
 }
 
+/**
+ * The words of the range calendar a day filter shows under its typed boxes.
+ * Month names, weekday initials and each day's spoken name come from `Intl` in
+ * `locale`; only the sentences below are copy.
+ */
+export interface DataViewsDayCalendarCopy {
+  /** BCP-47 tag the calendar names its months and days in. */
+  locale: string;
+  /** The calendar's accessible name, from the filter's own label ("Data"). */
+  label(fieldLabel: string): string;
+  /** Under the calendar while no day, or a whole period, is chosen. */
+  pickStart: string;
+  /** Under the calendar once the first day is chosen and the last is not. */
+  pickEnd: string;
+  /** The month/year caption's names — `UI_LABELS[locale].calendar`. */
+  caption: CalendarLabels;
+}
+
 export interface DataViewsFiltersCopy {
   moreFilters(count: number): string;
   moreFiltersApplied(count: number, appliedCount: number): string;
@@ -212,8 +231,25 @@ export interface DataViewsFiltersCopy {
    * list read like an answer to a date nobody could have meant (FUT-4144).
    */
   dayInvalid: string;
+  /**
+   * The range calendar under a day range's `De`/`Até` boxes (FUT-4144). Optional
+   * so a host that builds its own copy keeps compiling; without it the calendar
+   * speaks the en-US pack's words.
+   */
+  dayCalendar?: DataViewsDayCalendarCopy;
   /** Drop every applied filter, spelled out in the panel where there is room. */
   clearAllFilters: string;
+  /**
+   * The presets asked as a select, where the row is too narrow for them as
+   * one line of equal parts (ADR 0190, FUT-4144). Optional: a host copy
+   * without it gets the en-US pack's words.
+   */
+  presetSelect?: {
+    /** The select's label. */
+    label: string;
+    /** The empty option: no preset — picking it clears an applied one. */
+    none: string;
+  };
   /** The day-range presets' labels, keyed by preset id. */
   rangePresets: Readonly<Record<string, string>>;
   scopesLabel: string;

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

@@ -239,6 +239,12 @@ interface DayBoundInputProps {
    * impossible day is still never written, and blur still snaps back.
    */
   invalidMessage?: string;
+  /**
+   * Take the width of the box it sits in rather than its own 165px. Set where
+   * the pair stands over the range calendar, so the two boxes span the
+   * calendar's width instead of leaving a gap beside them (FUT-4144).
+   */
+  fill?: boolean;
 }
 
 /** What {@link useDayText} hands the field: its text, its verdict and its handlers. */
@@ -326,6 +332,7 @@ export function DayBoundInput({
   describedBy,
   mask,
   invalidMessage,
+  fill = false,
 }: DayBoundInputProps): React.JSX.Element {
   const id = useId();
   const { text, impossible, handleChange, handlePaste, handleBlur } = useDayText(
@@ -351,7 +358,8 @@ export function DayBoundInput({
       // The placeholder occupies the space an un-shrunk label would render into.
       InputLabelProps={{ shrink: true }}
       inputProps={dayInputProps(testId, [impossible ? `${id}-helper-text` : undefined, describedBy])}
-      sx={[{ width: sxRem(165) }, fieldTextFieldStyles]}
+      fullWidth={fill}
+      sx={[{ width: fill ? '100%' : sxRem(165) }, fieldTextFieldStyles]}
     />
   );
 }

package/src/components/data-display/DataViews/data-views-inline-bar.tsx

@@ -19,7 +19,7 @@ import Box from "@mui/material/Box/index.js";
 import { useState } from "react";
 
 
-import { ClearAllControl, CloseSearchControl } from "./data-views-bar-controls";
+import { ClearAllControl, CloseSearchControl, useBarFrozen } from "./data-views-bar-controls";
 import type { GridFilterPanelProps } from "./data-views-filter-panel";
 import { MoreFilters } from "./data-views-more-filters";
 import type { OverflowField, OverflowSplit } from "./data-views-overflow";
@@ -324,13 +324,14 @@ function FilterSlots<T extends Record<string, unknown>>({
   clearAllHidden: boolean;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const clear = useBarFrozen(onControlOpenChange);
   return (
     <>
       {inline.map((field) => (
         <InlineControl
           key={field.id}
           field={field}
-          onOpenChange={onControlOpenChange}
+          onOpenChange={clear.onOpenChange}
           pills={pills}
           ranges={ranges}
           onTogglePill={onTogglePill}
@@ -342,7 +343,7 @@ function FilterSlots<T extends Record<string, unknown>>({
       ))}
       <MoreFilters
         clearKey={clearKey}
-        onOpenChange={onControlOpenChange}
+        onOpenChange={clear.onOpenChange}
         onClearAll={onClearAll}
         anyApplied={activeFilterCount > 0}
         compact={compactControls}
@@ -358,6 +359,7 @@ function FilterSlots<T extends Record<string, unknown>>({
         <ClearAllControl
           onClearAll={onClearAll}
           compact={compactControls}
+          frozen={clear.frozen}
           testIdPrefix={testIdPrefix}
         />
       )}

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>
   );
 }