@12-apps/ui 1.21.1 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "1.21.1",
+  "version": "1.23.0",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",

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

@@ -67,6 +67,28 @@ import { Chart } from '@procurement/ui';
 - `curved` (boolean): Use curved lines for line/area charts (default: true)
 - `stacked` (boolean): Stack data series for bar/area charts
 - `showValues` (boolean): Display data values on chart
+- `valueFormatter` (function): Formats tooltip values and value-axis ticks
+- `allowDecimalTicks` (boolean): Allow half-steps on the value axis (default: true; set
+  false for a COUNT metric, or the axis repeats itself — `0, 1, 1, 2, 2`)
+
+### Axis & bar geometry
+
+Defaults that hold the chart to the visual-pass rules; every one is opt-out.
+
+- `maxCategoryTicks` (number): Cap on drawn category labels (default: 8). Above it every
+  nth label is kept and **the last one always is** — Recharts' own width-aware thinning
+  then runs on top, so a narrow viewport drops more. Full values stay in the tooltip.
+- `tickLabelMaxChars` (number): Category labels longer than this are truncated with an
+  ellipsis (default: 12)
+- `barRadius` (number): Bar corner radius in px, top corners only (default: 3). Stacked
+  segments stay square — a rounded top notches into the segment above it.
+- `maxBarWidth` (number): Cap on a bar's thickness in px (default: 38). It is also what
+  keeps the first and last bar clear of the chart frame in a wide card.
+
+Tick labels are laid out with a size-derived `tickMargin` (10–18px) rather than
+Recharts' default of 2. The bottom value tick is centred ON the x-axis line, so its box
+reaches below it; at the default margin it collides with the first category label at the
+axis corner, at every viewport.
 
 ### Display Options
 

package/src/components/data-display/Chart/Chart.types.ts

@@ -63,5 +63,31 @@ export interface ChartProps {
   centerLabel?: string | { label: string; value: string | number };
   /** Formats numeric tooltip values and y-axis ticks (e.g. centavos → BRL). */
   valueFormatter?: (value: number) => string;
+  /**
+   * Whether the value axis may place ticks between whole numbers. Default true.
+   *
+   * Set it false for a metric that only takes whole values — a COUNT. Recharts
+   * spaces ticks evenly across the domain, so a count topping out at 2 gets
+   * 0/0.5/1/1.5/2; an integer `valueFormatter` then renders that as
+   * `0, 1, 1, 2, 2`, and the axis reads as though it repeats itself (FUT-755).
+   * Formatting alone cannot fix it — the duplicate ticks are already chosen by
+   * the time the formatter runs.
+   */
+  allowDecimalTicks?: boolean;
+  /**
+   * Cap on how many category-axis labels are drawn. Default 8; above it every
+   * nth label is kept, the LAST one always among them. Recharts' own
+   * width-aware thinning still runs on top, so a narrow viewport drops more.
+   */
+  maxCategoryTicks?: number;
+  /** Category tick labels longer than this are truncated with an ellipsis. Default 12. */
+  tickLabelMaxChars?: number;
+  /** Bar corner radius in px (top corners only; stacked segments stay square). Default 3. */
+  barRadius?: number;
+  /**
+   * Cap on a single bar's thickness in px. Default 38 — it is also what keeps
+   * the first and last bar clear of the chart frame in a wide card.
+   */
+  maxBarWidth?: number;
   'data-testid'?: string;
 }

package/src/components/data-display/Chart/chart-axis.ts

@@ -0,0 +1,118 @@
+import type { ChartDataPoint, ChartProps } from './Chart.types';
+
+/**
+ * Cartesian axis + bar geometry: the rules that keep a chart readable rather
+ * than merely correct (FUT-391 visual pass).
+ *
+ * Three of them are pass/fail by looking at the rendered chart:
+ *
+ * - **No overlapping text.** The bottom value tick sits ON the x-axis line and
+ *   the first category tick sits ON the y-axis line, so the two labels meet at
+ *   the corner. Recharts' default `tickMargin` of 2 leaves the category label's
+ *   cap height inside the value label's descender — a few px of overlap at
+ *   every viewport. The margin has to clear the value label's box, which grows
+ *   with the font, hence a per-size value ({@link SIZE_PRESETS}).
+ * - **Skip every nth tick, always keep the last, truncate at ~12 chars.** With
+ *   more categories than fit, Recharts thins them only when it can measure text
+ *   (never server-side, where `getStringSize` returns 0 and every label renders
+ *   on top of its neighbour). Thinning here is deterministic and viewport-free.
+ * - **Bars rounded, capped, never touching the frame.** A two-category bar
+ *   chart in a wide card draws 150px slabs flush against the axis; the cap is
+ *   what turns them back into bars.
+ */
+
+/** Category ticks kept before thinning starts. */
+const DEFAULT_MAX_CATEGORY_TICKS = 8;
+/** Category tick labels longer than this are truncated with an ellipsis. */
+const DEFAULT_TICK_LABEL_MAX_CHARS = 12;
+/** Bar corner radius, px. */
+const DEFAULT_BAR_RADIUS = 3;
+/** Cap on a single bar's thickness, px. */
+const DEFAULT_MAX_BAR_WIDTH = 38;
+
+/**
+ * Thin a category axis to at most `maxTicks` labels, keeping every nth.
+ *
+ * The walk runs from the END so the last category is always labelled — the
+ * most recent day/bucket is the one a reader looks for first. Returns
+ * `undefined` when everything already fits, which leaves Recharts' own
+ * width-aware thinning in charge of the common small-data case.
+ *
+ * Also `undefined` when a value repeats: Recharts places an explicit tick by
+ * looking its value up in the scale, so a duplicate would land the label on
+ * the first row that carries it rather than on the row it was picked for.
+ */
+export function selectCategoryTicks(
+  values: ReadonlyArray<string | number>,
+  maxTicks: number,
+): Array<string | number> | undefined {
+  if (maxTicks < 1 || values.length <= maxTicks) return undefined;
+  if (new Set(values).size !== values.length) return undefined;
+  const step = Math.ceil(values.length / maxTicks);
+  const kept: Array<string | number> = [];
+  for (let index = values.length - 1; index >= 0; index -= step) {
+    const value = values[index];
+    if (value !== undefined) kept.push(value);
+  }
+  return kept.reverse();
+}
+
+/** The category-axis values of `data`, in row order, skipping empty cells. */
+export function categoryValues(
+  data: ReadonlyArray<ChartDataPoint>,
+  xAxisKey: string,
+): Array<string | number> {
+  const values: Array<string | number> = [];
+  for (const row of data) {
+    const value = row[xAxisKey];
+    if (value !== null && value !== undefined) values.push(value);
+  }
+  return values;
+}
+
+/** Shorten a tick label to `maxChars`, ellipsis included, never mid-render. */
+export function truncateTickLabel(value: unknown, maxChars: number): string {
+  const text = value === null || value === undefined ? '' : String(value);
+  if (maxChars < 1 || text.length <= maxChars) return text;
+  return `${text.slice(0, maxChars - 1)}…`;
+}
+
+/** Resolved geometry for the shared cartesian axes. */
+export interface CartesianAxisConfig {
+  /** Gap between an axis line and its tick labels, px. */
+  tickMargin: number;
+  /** Explicit category ticks once thinning applies; `undefined` = Recharts decides. */
+  categoryTicks: Array<string | number> | undefined;
+  /** Category tick label formatter (truncation). */
+  tickFormatter: (value: unknown) => string;
+}
+
+/** Resolved geometry for bar series. */
+export interface BarGeometry {
+  /** Per-corner radius, top corners only; `0` for stacked segments. */
+  radius: number | [number, number, number, number];
+  /** Cap on a bar's thickness, px — also what keeps bars off the frame. */
+  maxBarSize: number;
+}
+
+export function resolveAxisConfig(props: ChartProps, tickMargin: number): CartesianAxisConfig {
+  const maxChars = props.tickLabelMaxChars ?? DEFAULT_TICK_LABEL_MAX_CHARS;
+  return {
+    tickMargin,
+    categoryTicks: selectCategoryTicks(
+      categoryValues(props.data, props.xAxisKey ?? 'name'),
+      props.maxCategoryTicks ?? DEFAULT_MAX_CATEGORY_TICKS,
+    ),
+    tickFormatter: (value: unknown) => truncateTickLabel(value, maxChars),
+  };
+}
+
+export function resolveBarGeometry(props: ChartProps): BarGeometry {
+  const radius = props.barRadius ?? DEFAULT_BAR_RADIUS;
+  return {
+    // A stacked segment rounded on its top corners tears a notch out of the
+    // segment above it, so stacks stay square.
+    radius: props.stacked ? 0 : [radius, radius, 0, 0],
+    maxBarSize: props.maxBarWidth ?? DEFAULT_MAX_BAR_WIDTH,
+  };
+}

package/src/components/data-display/Chart/chart-context.ts

@@ -0,0 +1,75 @@
+import type { Theme } from '@mui/material';
+import type { CSSProperties } from 'react';
+
+import type { ChartDataPoint, ChartProps, ChartSeries } from './Chart.types';
+import { resolveAxisConfig, resolveBarGeometry, type BarGeometry, type CartesianAxisConfig } from './chart-axis';
+import {
+  getAxisStyles,
+  getDefaultColors,
+  getSizeStyles,
+  resolveSeries,
+  type SizeStyles,
+} from './chart-internals';
+
+/**
+ * Everything the per-type renderers in `chart-renderers.tsx` read, resolved
+ * once from props + theme. Kept out of that file so each renderer is a small
+ * JSX function over already-decided values — palette, series, axis geometry,
+ * bar geometry — rather than a place where those decisions get made again
+ * slightly differently.
+ */
+export interface ChartRenderContext {
+  props: ChartProps;
+  theme: Theme;
+  sizeStyles: SizeStyles;
+  chartColors: string[];
+  chartSeries: ChartSeries[];
+  strokeType: 'monotone' | 'linear';
+  axisStyle: CSSProperties;
+  gridStroke: string;
+  /** Multiplier on `gridStroke`'s alpha — see `getAxisStyles`. */
+  gridOpacity: number;
+  axisConfig: CartesianAxisConfig;
+  barGeometry: BarGeometry;
+  animationDuration: number;
+  commonProps: {
+    data: ChartDataPoint[];
+    margin: { top?: number; right?: number; bottom?: number; left?: number };
+    onClick: (payload: unknown) => void;
+  };
+}
+
+export function buildChartContext(props: ChartProps, theme: Theme): ChartRenderContext {
+  const sizeStyles = getSizeStyles(props.size, props.height);
+  const chartColors = getDefaultColors(theme, props.variant ?? 'default', props.colors);
+  const { axisStyle, gridStroke, gridOpacity } = getAxisStyles(
+    theme,
+    props.variant ?? 'default',
+    sizeStyles.fontSize,
+  );
+  const handleChartClick = (payload: unknown): void => {
+    const chartData = payload as { activePayload?: Array<{ payload: ChartDataPoint }> };
+    if (props.onClick && chartData?.activePayload?.[0]) {
+      props.onClick(chartData.activePayload[0].payload);
+    }
+  };
+  return {
+    props,
+    theme,
+    sizeStyles,
+    chartColors,
+    chartSeries: resolveSeries(props.data, props.series, props.xAxisKey ?? 'name', chartColors),
+    strokeType: (props.curved ?? true) ? 'monotone' : 'linear',
+    axisStyle: { ...axisStyle, fontSize: sizeStyles.fontSize },
+    gridStroke,
+    gridOpacity,
+    axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),
+    barGeometry: resolveBarGeometry(props),
+    animationDuration: (props.animate ?? true) ? (props.animationDuration ?? 1500) : 0,
+    commonProps: {
+      data: props.data,
+      margin: { top: 20, right: 30, left: 20, bottom: 20, ...props.margin },
+      onClick: handleChartClick,
+    },
+  };
+}

package/src/components/data-display/Chart/chart-internals.ts

@@ -12,19 +12,29 @@ import type { ChartProps, ChartSeries } from './Chart.types';
 export interface SizeStyles {
   height: number;
   fontSize: string;
+  /**
+   * Gap between an axis line and its tick labels, px.
+   *
+   * Recharts' default of 2 is not enough. The bottom VALUE tick is centred on
+   * the x-axis line, so its text box reaches ~0.79em BELOW that line, while
+   * the category labels begin 2px under the 6px tick mark — the two collide at
+   * the axis corner, at every viewport. Each value below is ~0.8em of its own
+   * font size, which clears the value label's descender with ~6px to spare.
+   */
+  tickMargin: number;
 }
 
 const SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizeStyles> = {
-  xs: { height: 200, fontSize: '0.75rem' },
-  sm: { height: 300, fontSize: '0.875rem' },
-  md: { height: 400, fontSize: '1rem' },
-  lg: { height: 500, fontSize: '1.125rem' },
-  xl: { height: 600, fontSize: '1.25rem' },
+  xs: { height: 200, fontSize: '0.75rem', tickMargin: 10 },
+  sm: { height: 300, fontSize: '0.875rem', tickMargin: 12 },
+  md: { height: 400, fontSize: '1rem', tickMargin: 14 },
+  lg: { height: 500, fontSize: '1.125rem', tickMargin: 16 },
+  xl: { height: 600, fontSize: '1.25rem', tickMargin: 18 },
 };
 
 export function getSizeStyles(size: ChartProps['size'], height?: number): SizeStyles {
   const preset = SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;
-  return { height: height ?? preset.height, fontSize: preset.fontSize };
+  return { ...preset, height: height ?? preset.height };
 }
 
 const NEON_PALETTE = ['#00ffff', '#ff00ff', '#ffff00', '#00ff00', '#ff0080', '#8000ff'];
@@ -135,14 +145,28 @@ export function resolveSeries(
 interface AxisTextStyles {
   axisStyle: CSSProperties;
   gridStroke: string;
+  /**
+   * Multiplier applied to `gridStroke`'s own alpha. Gridlines must read one
+   * step BELOW the card border — the border is `divider`, so half of it —
+   * without being dashed at data weight. Expressing the step as an opacity
+   * rather than a second colour keeps it derived from the theme's divider
+   * whatever form that takes (rgba, hex, or a CSS variable, which the colour
+   * helpers cannot decompose).
+   */
+  gridOpacity: number;
 }
 
 export function getAxisStyles(theme: Theme, variant: ChartProps['variant'], fontSize: string): AxisTextStyles {
+  const neon = variant === 'neon';
   return {
     axisStyle: {
       fontSize,
-      fill: variant === 'neon' ? '#00ffff' : theme.palette.text.secondary,
+      fill: neon ? '#00ffff' : theme.palette.text.secondary,
+      // Ticks are columns of digits: they have to line up between rows.
+      fontVariantNumeric: 'tabular-nums',
     },
-    gridStroke: variant === 'neon' ? alpha('#00ffff', 0.1) : theme.palette.divider,
+    gridStroke: neon ? alpha('#00ffff', 0.1) : theme.palette.divider,
+    // The neon grid is already a 10%-alpha cyan; halving it again would erase it.
+    gridOpacity: neon ? 1 : 0.5,
   };
 }

package/src/components/data-display/Chart/chart-renderers.tsx

@@ -25,15 +25,9 @@ import {
   YAxis,
 } from 'recharts';
 
-import type { ChartDataPoint, ChartProps, ChartSeries } from './Chart.types';
+import type { ChartProps, ChartSeries } from './Chart.types';
 import { ChartLegendContent, ChartTooltipContent } from './ChartComposables';
-import {
-  getAxisStyles,
-  getDefaultColors,
-  getSizeStyles,
-  resolveSeries,
-  type SizeStyles,
-} from './chart-internals';
+import { buildChartContext, type ChartRenderContext } from './chart-context';
 
 /**
  * Per-type Recharts renderers for the prop-driven Chart, dispatched from a
@@ -41,23 +35,6 @@ import {
  * {@link ChartRenderContext} so every function stays small.
  */
 
-interface ChartRenderContext {
-  props: ChartProps;
-  theme: Theme;
-  sizeStyles: SizeStyles;
-  chartColors: string[];
-  chartSeries: ChartSeries[];
-  strokeType: 'monotone' | 'linear';
-  axisStyle: React.CSSProperties;
-  gridStroke: string;
-  animationDuration: number;
-  commonProps: {
-    data: ChartDataPoint[];
-    margin: { top?: number; right?: number; bottom?: number; left?: number };
-    onClick: (payload: unknown) => void;
-  };
-}
-
 function chartExtras(ctx: ChartRenderContext): React.ReactNode[] {
   const { props } = ctx;
   const nodes: React.ReactNode[] = [];
@@ -72,15 +49,40 @@ function chartExtras(ctx: ChartRenderContext): React.ReactNode[] {
   return nodes;
 }
 
+/**
+ * Gridlines: solid, and one step below the card border. A dashed line at the
+ * border's own weight competes with the data drawn over it.
+ */
+function chartGrid(ctx: ChartRenderContext): React.ReactElement {
+  return <CartesianGrid key="grid" stroke={ctx.gridStroke} strokeOpacity={ctx.gridOpacity} />;
+}
+
 function cartesianAxes(ctx: ChartRenderContext): React.ReactNode[] {
-  const { props } = ctx;
+  const { props, axisConfig } = ctx;
   const nodes: React.ReactNode[] = [];
-  if (props.showCartesianGrid !== false) {
-    nodes.push(<CartesianGrid key="grid" strokeDasharray="3 3" stroke={ctx.gridStroke} />);
-  }
+  if (props.showCartesianGrid !== false) nodes.push(chartGrid(ctx));
   nodes.push(
-    <XAxis key="x" dataKey={props.xAxisKey ?? 'name'} style={ctx.axisStyle} label={props.xAxisLabel} />,
-    <YAxis key="y" style={ctx.axisStyle} label={props.yAxisLabel} tickFormatter={props.valueFormatter} />,
+    <XAxis
+      key="x"
+      dataKey={props.xAxisKey ?? 'name'}
+      style={ctx.axisStyle}
+      label={props.xAxisLabel}
+      tickMargin={axisConfig.tickMargin}
+      ticks={axisConfig.categoryTicks}
+      tickFormatter={axisConfig.tickFormatter}
+    />,
+    <YAxis
+      key="y"
+      style={ctx.axisStyle}
+      label={props.yAxisLabel}
+      // Sized from its own widest tick: a fixed 60px lets "R$ 1.234,56" spill
+      // out of the card, which is the other way axis text ends up on top of
+      // something.
+      width="auto"
+      tickMargin={axisConfig.tickMargin}
+      tickFormatter={props.valueFormatter}
+      allowDecimals={props.allowDecimalTicks !== false}
+    />,
   );
   return nodes;
 }
@@ -119,6 +121,8 @@ function renderBar(ctx: ChartRenderContext): React.ReactElement {
           name={s.name}
           fill={s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length]}
           stackId={ctx.props.stacked ? 'stack' : undefined}
+          radius={ctx.barGeometry.radius}
+          maxBarSize={ctx.barGeometry.maxBarSize}
           animationDuration={ctx.animationDuration}
         />
       ))}
@@ -233,11 +237,19 @@ function renderScatter(ctx: ChartRenderContext): React.ReactElement {
   const { props } = ctx;
   return (
     <ScatterChart {...ctx.commonProps}>
-      {props.showCartesianGrid !== false && (
-        <CartesianGrid strokeDasharray="3 3" stroke={ctx.gridStroke} />
-      )}
-      <XAxis dataKey={props.xAxisKey ?? 'name'} style={ctx.axisStyle} label={props.xAxisLabel} />
-      <YAxis dataKey={ctx.chartSeries[0]?.dataKey} style={ctx.axisStyle} label={props.yAxisLabel} />
+      {props.showCartesianGrid !== false && chartGrid(ctx)}
+      <XAxis
+        dataKey={props.xAxisKey ?? 'name'}
+        style={ctx.axisStyle}
+        label={props.xAxisLabel}
+        tickMargin={ctx.axisConfig.tickMargin}
+      />
+      <YAxis
+        dataKey={ctx.chartSeries[0]?.dataKey}
+        style={ctx.axisStyle}
+        label={props.yAxisLabel}
+        tickMargin={ctx.axisConfig.tickMargin}
+      />
       {chartExtras(ctx)}
       <Scatter
         name={ctx.chartSeries[0]?.name ?? 'Data'}
@@ -253,7 +265,15 @@ function composedSeries(ctx: ChartRenderContext, s: ChartSeries, index: number):
   const color = s.color ?? ctx.chartColors[index % ctx.chartColors.length];
   if (s.type === 'bar') {
     return (
-      <Bar key={s.dataKey} dataKey={s.dataKey} name={s.name} fill={color} animationDuration={ctx.animationDuration} />
+      <Bar
+        key={s.dataKey}
+        dataKey={s.dataKey}
+        name={s.name}
+        fill={color}
+        radius={ctx.barGeometry.radius}
+        maxBarSize={ctx.barGeometry.maxBarSize}
+        animationDuration={ctx.animationDuration}
+      />
     );
   }
   if (s.type === 'area') {
@@ -302,37 +322,9 @@ const RENDERERS: Record<string, (ctx: ChartRenderContext) => React.ReactElement>
   composed: renderComposed,
 };
 
-function buildContext(props: ChartProps, theme: Theme): ChartRenderContext {
-  const sizeStyles = getSizeStyles(props.size, props.height);
-  const chartColors = getDefaultColors(theme, props.variant ?? 'default', props.colors);
-  const { axisStyle, gridStroke } = getAxisStyles(theme, props.variant ?? 'default', sizeStyles.fontSize);
-  const handleChartClick = (payload: unknown): void => {
-    const chartData = payload as { activePayload?: Array<{ payload: ChartDataPoint }> };
-    if (props.onClick && chartData?.activePayload?.[0]) {
-      props.onClick(chartData.activePayload[0].payload);
-    }
-  };
-  return {
-    props,
-    theme,
-    sizeStyles,
-    chartColors,
-    chartSeries: resolveSeries(props.data, props.series, props.xAxisKey ?? 'name', chartColors),
-    strokeType: (props.curved ?? true) ? 'monotone' : 'linear',
-    axisStyle: { ...axisStyle, fontSize: sizeStyles.fontSize },
-    gridStroke,
-    animationDuration: (props.animate ?? true) ? (props.animationDuration ?? 1500) : 0,
-    commonProps: {
-      data: props.data,
-      margin: { top: 20, right: 30, left: 20, bottom: 20, ...props.margin },
-      onClick: handleChartClick,
-    },
-  };
-}
-
 /** Render the Recharts element for the requested chart type. */
 export function renderChartByType(props: ChartProps, theme: Theme): React.ReactElement {
   const renderer = RENDERERS[props.type ?? 'line'];
-  const ctx = buildContext(props, theme);
+  const ctx = buildChartContext(props, theme);
   return renderer ? renderer(ctx) : <></>;
 }

package/src/components/data-display/Chart/chart-spec.ts

@@ -166,6 +166,9 @@ export function specToChartProps(
     showTooltip: spec.tooltip ?? true,
     height: spec.height,
     valueFormatter: chartValueFormatter(spec.numberFormat),
+    // An integer metric is a COUNT: half a row does not exist, so the axis must
+    // not offer half-steps it would then round into duplicates (FUT-755).
+    allowDecimalTicks: spec.numberFormat !== 'integer',
     ...renderer(spec, ctx),
   };
 }

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

@@ -23,6 +23,10 @@ later; an eight-filter one degrades sooner. Both are correct.
 | small desktop | 1280 | laptop |
 | large desktop | 1600 | external monitor |
 
+The tests also pin a **crowded** row at 1024, because a small desktop no longer
+overflows at all: the rules about what happens when controls do NOT fit need a
+width where some of them do not.
+
 **These are toolbar ROW widths, not viewport widths.** The `ResizeObserver`
 watches the row, and the row is narrower than the window by whatever the page
 puts around it — around 48px in the Pedidos shell. So a 430px row is roughly a
@@ -77,8 +81,26 @@ Read this as "what the Pedidos table does", not "what the code hard-codes".
 
 | | small mobile | large mobile | tablet | small desktop | large desktop |
 | --- | --- | --- | --- | --- | --- |
-| controls on the bar | 0 | 0 | 0 | 1–2 | 3+ |
-| "Mais" present | yes | yes | yes | yes | only if something overflowed |
+| controls on the bar | 0 | 1 | 1 | all 6 | all 6 |
+| "Mais" present | yes | yes | yes | no | no |
+
+**The bar re-spends what its own collapse frees.** Rungs 2/4/5 turn 200 + 96 +
+216 of furniture into 44 + 0 + 140, and the split used to be decided once,
+against the UNCOLLAPSED row — so a phone shed all six controls to make room for
+a search box and a counter that were about to shrink, and nobody handed the
+~330px back. It showed as a 428px bar carrying a magnifier, "Mais 6", and a
+225px band of nothing. `computeSplit` now iterates to a fixed point: cheaper
+furniture buys more filters, more filters push the ladder further down, a
+further rung makes the furniture cheaper again, and the budget decreases
+monotonically until it stops moving.
+
+The furniture is also priced for what is ACTUALLY on the bar. "Exportar" exists
+only when the host passes an `exportConfig` — several screens put their export
+in the page header instead — and charging for the pair regardless billed the
+filters ~108px for a button that was never rendered.
+
+Which control survives on a phone is whichever fits the room left over, so a
+large mobile keeps a cheaper pill where a tablet affords a wider one.
 
 **An applied filter is ranked first, not exempt.** Applied controls take the
 visible slots ahead of idle ones and go into "Mais" like anything else when even
@@ -133,7 +155,12 @@ Two distinct behaviours, and conflating them was a bug:
 | --- | --- | --- | --- | --- | --- |
 | Exibir / Exportar | icon | icon | label | label | label |
 | dropdown chevron | no | no | yes | yes | yes |
-| "N de N" counter | hidden | hidden | shown | shown | shown |
+| "N de N" counter | hidden | shown | shown | shown | shown |
+
+The counter is priced at 56, not the old 96. It was measured against
+"1.234 de 5.678"; a phone reads "3 de 3" and renders at 35px, so the extra
+~60px was coming straight out of the filter budget at exactly the widths where
+that budget is scarcest.
 
 A tablet keeps the labels, which is worth stating because it is easy to assume
 otherwise. With every filter already behind "Mais" the row has room to spare
@@ -176,6 +203,13 @@ leaves the board with a single populated column, which reads as data loss.
 of the five widths and asserts the tables above. It is the executable copy of
 this document; if the two disagree, the test is right and this needs updating.
 
+`what fits follows the controls, not the width alone` guards the property the
+rest of this document depends on: the counts above are OUTCOMES of pricing one
+fixture against one row, never rules. At a single width it asserts that a table
+declaring cheaper controls keeps more of them, that one long control keeps
+none, and that the same table promotes another as its row grows — three answers
+a breakpoint could not give.
+
 Two things it cannot check, because jsdom has no layout engine: actual pixel
 overflow, and how anything looks. Those are verified in a real browser against
 the running Storybook, at 1600 / 1280 / 1024 / 900 / 768 / 600 / 500 / 430 / 390

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

@@ -107,8 +107,6 @@ export function DayBoundInput({
       // The mask IS the placeholder, so the expected order is on screen before
       // the first keystroke rather than discovered by getting it wrong.
       placeholder="dd/mm/aaaa"
-      // A numeric keypad on a phone, while still accepting a paste with slashes.
-      inputMode="numeric"
       value={text}
       onChange={(event) => {
         const next = maskBrDate(event.target.value);
@@ -126,7 +124,28 @@ export function DayBoundInput({
       onBlur={() => setText(isoToBr(applied))}
       // The placeholder occupies the space an un-shrunk label would render into.
       InputLabelProps={{ shrink: true }}
-      inputProps={{ 'data-testid': testId, maxLength: 10 }}
+      // `inputMode` HAS to be here rather than on the TextField. Anything
+      // TextField does not recognise is spread onto its root `FormControl` div,
+      // and `inputMode` is not in that list — so passing it up there put the
+      // attribute on a non-editable wrapper, where it means nothing, and the
+      // phone went on offering the letter keyboard for a field that only takes
+      // digits (the `dd/mm/aaaa` hint sitting under a QWERTY layout). Only the
+      // `<input>` this reaches decides which keypad opens.
+      //
+      // `numeric` and not `tel`: both raise a keypad, but the phone one is a
+      // dialler with `+ * #` on it — keys that cannot occur in a date. A paste
+      // carrying separators still lands, because the MASK is what filters the
+      // text; the keypad only narrows what a thumb can reach for.
+      //
+      // Autofill off for the same reason: the browser's saved-value strip
+      // covers the keypad to suggest names and addresses, none of which are a
+      // date, and none of which the mask would keep.
+      inputProps={{
+        'data-testid': testId,
+        maxLength: 10,
+        inputMode: 'numeric',
+        autoComplete: 'off',
+      }}
       sx={{ width: 165 }}
     />
   );

package/src/components/data-display/DataViews/data-views-display-panel.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
+// Says "display settings" rather than the generic tune sliders it used to
+// share with the "Mais" FILTER trigger — see the note there.
+import DisplaySettingsRoundedIcon from "@mui/icons-material/DisplaySettingsRounded";
 import { Popover } from "@mui/material";
 import { useState } from "react";
 
@@ -267,7 +269,7 @@ function DisplayTrigger({
       title={compact ? "Exibir" : undefined}
     >
       <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
-        <TuneRoundedIcon fontSize="small" />
+        <DisplaySettingsRoundedIcon fontSize="small" />
         {!compact && (
           <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
             Exibir