@12-apps/ui 1.21.1 → 1.23.0

package/src/components/data-display/DataViews/data-views-grid-parts.tsx

@@ -142,6 +142,8 @@ interface GridShellFiltersArgs<T extends Record<string, unknown>> {
   rangeFields: RangeFieldConfig<T>[];
   testIdPrefix: string;
   alwaysShowSearch: boolean;
+  /** Is "Exportar" on the bar? Half the right cluster's cost when it is not. */
+  hasExport: boolean;
 }
 
 function useGridShellFilters<T extends Record<string, unknown>>({
@@ -151,6 +153,7 @@ function useGridShellFilters<T extends Record<string, unknown>>({
   rangeFields,
   testIdPrefix,
   alwaysShowSearch,
+  hasExport,
 }: GridShellFiltersArgs<T>): {
   showInline: boolean;
   useModal: boolean;
@@ -171,6 +174,7 @@ function useGridShellFilters<T extends Record<string, unknown>>({
     state.pills,
     c.ranges,
     openControls > 0,
+    hasExport,
   );
   // THE BAR RENDERS AT EVERY WIDTH. It used to be swapped for a full-screen
   // filter MODAL below `lg`, which was the responsive strategy before the
@@ -365,7 +369,15 @@ export function GridShell<T extends Record<string, unknown>>(props: GridShellPro
     inlineFilters = false,
     alwaysShowSearch = false,
   } = props;
-  const filters = useGridShellFilters({ c, inlineFilters, fields, rangeFields, testIdPrefix, alwaysShowSearch });
+  const filters = useGridShellFilters({
+    c,
+    inlineFilters,
+    fields,
+    rangeFields,
+    testIdPrefix,
+    alwaysShowSearch,
+    hasExport: props.exportConfig !== undefined,
+  });
   return (
     <DataViewsLayoutProvider
       canUseCards={Boolean(renderCard)}

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

@@ -19,9 +19,7 @@ import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
 import type { OverflowField } from "./data-views-overflow";
-import { RangePresets } from "./data-views-preset-chips";
 import { RangeBounds } from "./data-views-range-pill";
-import { presetsFor } from "./data-views-range-presets";
 import { isRangeSet } from "./data-views-range-values";
 import type { RangeValue } from "./data-views-types";
 
@@ -114,10 +112,11 @@ function OverflowPill<T extends Record<string, unknown>>({
 
 
 /**
- * One overflowed range: its two bounds, as the same inputs the pill uses.
+ * One overflowed range: its presets and its two bounds, as the same controls
+ * the pill uses.
  *
- * The bounds DELEGATE to {@link RangeBounds} rather than being built here,
- * which is the whole point — this panel used to render a raw
+ * The whole control DELEGATES to {@link RangeBounds} rather than being built
+ * here, which is the point — this panel used to render a raw
  * `<input type="date">`, so the masked `dd/mm/aaaa` field existed only while
  * the filter FITTED on the bar. The moment "Data" overflowed it reverted to the
  * native control the mask replaced, and a merchant on a narrow screen never saw
@@ -128,6 +127,12 @@ function OverflowPill<T extends Record<string, unknown>>({
  * native date input reports a wide minimum (its own mask plus the picker
  * glyph), which is what made two of them refuse to shrink and scrolled the
  * panel sideways. A text input has no such minimum.
+ *
+ * `RangeBounds` renders the preset chips ITSELF, above the inputs. This panel
+ * must NOT render its own row as well: when the delegation above landed, the
+ * chips it used to draw by hand stayed behind, and "Data" showed Hoje/Ontem/
+ * Esta semana/Este mês/Este ano twice — two rows, duplicated test ids, and half
+ * the panel's height spent saying the same thing (FUT-751).
  */
 function OverflowRange<T extends Record<string, unknown>>({
   field,
@@ -144,24 +149,12 @@ function OverflowRange<T extends Record<string, unknown>>({
   // set; the guard is for the type, not for a state the caller can reach.
   if (!field.range) return null;
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-      {/* The overflow offers the same one-click windows the pill does. A field
-          in here is one that had no room on the bar, not one with fewer
-          controls — otherwise "Data" gains and loses its presets as the window
-          is resized. */}
-      <RangePresets
-        presets={presetsFor(field.range)}
-        value={value}
-        onChange={onChange}
-        testId={`${testIdPrefix}-more-${field.id}`}
-      />
-      <RangeBounds
-        field={field.range}
-        value={value}
-        onChange={onChange}
-        testId={`${testIdPrefix}-more-${field.id}`}
-      />
-    </Box>
+    <RangeBounds
+      field={field.range}
+      value={value}
+      onChange={onChange}
+      testId={`${testIdPrefix}-more-${field.id}`}
+    />
   );
 }
 

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

@@ -1,7 +1,12 @@
 "use client";
 
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
+// A FUNNEL, not the tune sliders this used to share with "Exibir". The two
+// sit a few px apart on the same bar and do unrelated things — one narrows
+// WHICH rows you see, the other changes HOW they are shown — and with one
+// glyph between them the bar offered the operator no way to tell which was
+// which. On a phone, where both are icon-only, they were indistinguishable.
+import FilterAltRoundedIcon from "@mui/icons-material/FilterAltRounded";
 import { Popover } from "@mui/material";
 import { useState } from "react";
 
@@ -76,7 +81,7 @@ function MoreTrigger({
           color: applied ? "primary.main" : undefined,
         }}
       >
-        <TuneRoundedIcon fontSize="small" />
+        <FilterAltRoundedIcon fontSize="small" />
         {!compact && (
           <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
             Mais

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

@@ -23,6 +23,17 @@
  * plain `50` still works, and so does `50.00` — a dot with exactly two digits
  * after it is far more likely to be a decimal typed on a numeric keypad than a
  * thousands group, and reading it as `5000` is the very failure this replaces.
+ *
+ * WHICH KEYPAD, and where the request has to be made. `inputMode` goes on the
+ * `<input>`, via `inputProps` — set on the `TextField` it rides the spread onto
+ * the root `FormControl` div, an element nothing types into, so the attribute
+ * has no effect and a phone goes on offering letters for a field that accepts
+ * none of them. It is `decimal` rather than `numeric` because the numeric pad
+ * has no comma on iOS, and the comma is the separator this field exists to
+ * accept — `numeric` here would reopen the bug above from the other side, with
+ * `17,50` untypeable rather than misread. Autofill is off alongside it: its
+ * saved-value strip covers the keypad to offer names and addresses, none of
+ * which survive `ALLOWED` anyway.
  */
 import { Box, TextField } from '@mui/material';
 import React, { useEffect, useState } from 'react';
@@ -107,9 +118,6 @@ export function NumberBoundInput({
       size="small"
       type="text"
       label={label}
-      // Not `numeric`: that keypad has no comma on iOS, which is the separator
-      // this field exists to accept.
-      inputMode="decimal"
       value={text}
       onChange={(event) => {
         // Reject the characters rather than silently dropping them AFTER
@@ -139,7 +147,9 @@ export function NumberBoundInput({
         )
       }
       InputLabelProps={{ shrink: true }}
-      inputProps={{ 'data-testid': testId }}
+      // `inputMode` belongs on the `<input>`, never on the TextField — see the
+      // keypad note at the top of this file for what goes wrong up there.
+      inputProps={{ 'data-testid': testId, inputMode: 'decimal', autoComplete: 'off' }}
       InputProps={
         unit
           ? {

package/src/components/data-display/DataViews/data-views-overflow-costs.ts

@@ -33,8 +33,15 @@ export function estimateWidth(text: string, extra: number): number {
    *
    * Deliberately generous: over-pricing sheds one control too early, which the
    * "Mais" button absorbs invisibly. Under-pricing breaks the line.
+   *
+   * The chrome was 76, and generous had turned into wrong. MEASURED on the
+   * Pedidos bar: "Pagamento" renders at 123px against an estimate of 144, and
+   * "Situação" at 107 against 137 — every pill over-priced by ~22%, which on a
+   * phone is the whole difference between one pill on the bar and none. 56 is
+   * still above the ~50 measured, so the slack the comment above asks for is
+   * intact; it is just slack rather than a second control's worth of budget.
    */
-  return Math.round(text.length * 7.6) + 76 + extra;
+  return Math.round(text.length * 7.6) + 56 + extra;
 }
 
 /** Is a range bounded at either end? */
@@ -56,20 +63,40 @@ export function pillText<T extends Record<string, unknown>>(field: OverflowField
 export const RESERVED = {
   /** The search box never shrinks below this. */
   search: 200,
-  /** The "N de N" counter. */
-  counter: 96,
-  /** Exibir + Exportar WITH their text labels. */
-  right: 216,
   /**
-   * The same two controls as icons only — step 2 of the ladder.
+   * The "N de N" counter.
+   *
+   * MEASURED at 35px, plus its divider and gap. The old 96 was priced for a
+   * counter reading "1.234 de 5.678"; a phone shows "3 de 3", and charging
+   * nearly triple its rendered width came straight out of the filter budget.
+   */
+  counter: 56,
+  /**
+   * ONE right-hand control (Exibir, or Exportar) WITH its text label.
+   *
+   * Priced per control rather than for the pair, because the pair is not what
+   * every page renders: "Exportar" exists only when the host passes an
+   * `exportConfig`, and several pages (Pedidos among them) put their export in
+   * the PAGE HEADER instead. Charging 216 there billed the filters for a button
+   * that was never on the bar — ~108px of budget spent on nothing, which on a
+   * phone is the difference between one filter pill and none.
+   */
+  displayControl: 108,
+  /**
+   * The same control as an icon only — step 2 of the ladder.
+   *
+   * MEASURED at 133px for the PAIR (66 each: a Button's minimum tap target is
+   * a good deal wider than the 20px glyph inside it); 70 keeps that total's
+   * slack at one control's granularity.
+   */
+  displayControlCompact: 70,
+  /**
+   * What step 4 leaves behind: the search as a bare magnifier.
    *
-   * MEASURED at 133px for the pair (66 each: a Button's minimum tap target is
-   * a good deal wider than the 20px glyph inside it), so the old 96 under-priced
-   * them by a third and the row went on believing it had room it did not.
+   * MEASURED at 30px on the Pedidos bar (`…-search-all-collapsed`); 38 keeps a
+   * tap target's worth of slack over it.
    */
-  rightCompact: 140,
-  /** What step 4 leaves behind: the search as a bare magnifier. */
-  searchIcon: 44,
+  searchIcon: 38,
   /**
    * The narrowest keyword box still worth typing into — below it the operator
    * cannot read back what they wrote, and the box takes over the cluster
@@ -81,8 +108,17 @@ export const RESERVED = {
    * while keeping its filters — paying for nothing.
    */
   usableSearch: 120,
-  /** The "Mais" button, only charged when there IS an overflow. */
-  overflowButton: 104,
+  /**
+   * The "Mais" button, only charged when there IS an overflow — and priced by
+   * the state it is actually in, like the right-hand cluster beside it.
+   *
+   * MEASURED: 128px with its label, badge and chevron; 69px once the ladder has
+   * it down to icon + badge. One number for both was wrong in BOTH directions —
+   * it under-priced the wide bar (the row's own failure mode) and over-priced
+   * the narrow one by a whole pill.
+   */
+  overflowButton: 136,
+  overflowButtonCompact: 80,
   /**
    * "Limpar", only charged when there IS something to clear.
    *
@@ -92,9 +128,44 @@ export const RESERVED = {
    * Measured at 64 as an icon; 72 with slack.
    */
   clearAll: 72,
-  /** Gaps + the row's own padding. */
-  chrome: 64,
+  /**
+   * The row's own padding, plus the gaps BETWEEN the fixed furniture.
+   *
+   * Not the per-control gaps — `splitFilters` already adds a `GAP` for every
+   * filter it keeps, so counting a fourth one here charged one gap twice.
+   * MEASURED: 32px of padding (16 each side) + three 8px gaps between the
+   * search, the counter and the right cluster.
+   */
+  chrome: 56,
 } as const;
 
 /** The gap between two controls. */
 export const GAP = 8;
+
+/** What the right-hand cluster costs, given what the host actually renders. */
+export function rightClusterCost(hasExport: boolean, compact: boolean): number {
+  const one = compact ? RESERVED.displayControlCompact : RESERVED.displayControl;
+  return hasExport ? one * 2 : one;
+}
+
+/**
+ * What the toolbar furniture costs at a given rung of the ladder — the budget
+ * the filter controls have to fit AROUND.
+ *
+ * This exists because the two halves used to disagree. `splitFilters` priced
+ * the furniture at its widest (search 200 + counter 96 + right 216) and shed
+ * every filter to make room; the ladder then collapsed those very controls to
+ * 44 + 0 + 140 and nobody handed the ~330px back. On a 428px phone that showed
+ * as a bar carrying a magnifier, a "Mais 5" pill, and a band of nothing.
+ */
+export function furnitureCost(
+  flags: { searchCollapsed: boolean; counterHidden: boolean; compactControls: boolean },
+  hasExport: boolean,
+): number {
+  return (
+    (flags.searchCollapsed ? RESERVED.searchIcon : RESERVED.search) +
+    (flags.counterHidden ? 0 : RESERVED.counter) +
+    rightClusterCost(hasExport, flags.compactControls) +
+    RESERVED.chrome
+  );
+}

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

@@ -2,7 +2,15 @@
 
 import { useEffect, useRef, useState } from "react";
 
-import { estimateWidth, GAP, isRangeSet, pillText, RESERVED } from "./data-views-overflow-costs";
+import {
+  estimateWidth,
+  furnitureCost,
+  GAP,
+  isRangeSet,
+  pillText,
+  RESERVED,
+  rightClusterCost,
+} from "./data-views-overflow-costs";
 import type { FilterFieldConfig, RangeFieldConfig, RangeValue } from "./data-views-types";
 
 /**
@@ -154,6 +162,10 @@ function splitFilters<T extends Record<string, unknown>>(
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
   width: number,
+  /** Search + counter + right cluster + chrome, at the rung being considered. */
+  furniture: number,
+  /** Is the bar already down to icons? "Mais" shrinks with everything else. */
+  compact: boolean,
 ): Split<T> {
   const none: OverflowField<T>[] = [];
   const widthOf = (field: OverflowField<T>): number => fieldWidth(field, pills, ranges);
@@ -164,14 +176,15 @@ function splitFilters<T extends Record<string, unknown>>(
 
   // "Limpar" rides the end of the cluster whenever anything is applied.
   const clearCost = active.length > 0 ? RESERVED.clearAll + GAP : 0;
-  let available =
-    width - RESERVED.search - RESERVED.counter - RESERVED.right - RESERVED.chrome - clearCost;
+  let available = width - furniture - clearCost;
   if (cost(all) <= available) {
     return { inline: all, overflow: none, used: cost(all) + clearCost };
   }
 
-  // There IS an overflow, so its button now costs room too.
-  available -= RESERVED.overflowButton;
+  // There IS an overflow, so its button now costs room too — at the width it
+  // will actually have, which on a phone is the icon-and-badge one.
+  const overflowButton = compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton;
+  available -= overflowButton;
   // APPLIED FIRST, BUT NOT EXEMPT.
   //
   // Applied controls take the visible slots ahead of idle ones — that part was
@@ -198,7 +211,7 @@ function splitFilters<T extends Record<string, unknown>>(
   return {
     inline,
     overflow: all.filter((field) => !keep.has(field.id)),
-    used: cost(inline) + RESERVED.overflowButton + clearCost,
+    used: cost(inline) + overflowButton + clearCost,
   };
 }
 
@@ -224,6 +237,8 @@ function computeSplit<T extends Record<string, unknown>>(
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
   width: number,
+  /** Does the host render "Exportar" beside "Exibir"? Half the cluster if not. */
+  hasExport: boolean,
 ): Omit<OverflowSplit<T>, "barRef"> {
   // Unmeasured (SSR, or jsdom without a ResizeObserver) ⇒ degrade nothing.
   if (width === 0) {
@@ -237,12 +252,47 @@ function computeSplit<T extends Record<string, unknown>>(
       searchTakeover: false,
     };
   }
-  const { inline, overflow, used } = splitFilters(all, pills, ranges, width);
+  // Pass 1 prices the furniture at its widest — no rung has been taken yet.
+  let split = splitFilters(all, pills, ranges, width, furnitureCost(UNCOLLAPSED, hasExport), false);
+  let flags = ladderFlags(split, width, hasExport);
+  // RE-SPEND WHAT THE LATER RUNGS FREED.
+  //
+  // Rungs 2/4/5 turn 200 + 96 + 216 of furniture into 44 + 0 + 140, and until
+  // this loop existed nobody handed those ~330px back to the filters: the
+  // split was decided once, against the uncollapsed row, so a phone shed every
+  // control and then sat with a band of empty bar beside "Mais 5".
+  //
+  // Settles rather than oscillates, and cannot overfill: a cheaper furniture
+  // can only give the filters MORE room, more filter width can only push the
+  // ladder FURTHER down, and a further rung can only make the furniture
+  // cheaper again — so the budget decreases monotonically and the loop exits
+  // the moment it stops moving. The bound is a backstop, not the exit.
+  let budget = furnitureCost(UNCOLLAPSED, hasExport);
+  for (let pass = 0; pass < 3; pass += 1) {
+    const freed = furnitureCost(flags, hasExport);
+    if (freed >= budget) break;
+    budget = freed;
+    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls);
+    flags = ladderFlags(split, width, hasExport);
+  }
+  return { inline: split.inline, overflow: split.overflow, ...flags };
+}
+
+/** The widest the furniture ever is — every rung still untaken. */
+const UNCOLLAPSED = { searchCollapsed: false, counterHidden: false, compactControls: false };
+
+/** Rungs 2 and 4-6, priced against what the filters actually took. */
+function ladderFlags<T extends Record<string, unknown>>(
+  split: Split<T>,
+  width: number,
+  hasExport: boolean,
+): Omit<OverflowSplit<T>, "barRef" | "inline" | "overflow"> {
+  const { overflow, used } = split;
   const base = width - used - RESERVED.chrome;
 
   // Would the search still make its minimum with the labels on?
-  const compactControls = base - RESERVED.counter - RESERVED.right < RESERVED.search;
-  const rightCost = compactControls ? RESERVED.rightCompact : RESERVED.right;
+  const compactControls = base - RESERVED.counter - rightClusterCost(hasExport, false) < RESERVED.search;
+  const rightCost = rightClusterCost(hasExport, compactControls);
   // …and with them off?
   const searchCollapsed = base - RESERVED.counter - rightCost < RESERVED.search;
   // Everything has collapsed and the row STILL overflows. The controls cannot
@@ -258,26 +308,29 @@ function computeSplit<T extends Record<string, unknown>>(
   // on there BEING an overflow, because with no panel the footer does not
   // exist and dropping this would strand the operator.
   const clearAllHidden = counterHidden && overflow.length > 0;
-  // What the keyword box would get if the operator expanded the magnifier and
-  // everything else stayed put. `searchCollapsed` is a different question — it
-  // asks whether the box fits at its PREFERRED 200px, and is deliberately
-  // pessimistic — so reusing it to decide the takeover evicted the filters on
-  // screens where the box had plenty of room to simply shrink.
-  const searchBoxRoom = base - (counterHidden ? 0 : RESERVED.counter) - rightCost;
+  // What the keyword box would get if the operator expanded the magnifier.
+  // `searchCollapsed` is a different question — it asks whether the box fits at
+  // its PREFERRED 200px, and is deliberately pessimistic — so reusing it to
+  // decide the takeover evicted the filters on screens where the box had plenty
+  // of room to simply shrink.
+  //
+  // Asked with the inline filters SHED, because shedding them is exactly what
+  // expanding the box does: the row re-splits and they go behind "Mais".
+  // Measuring against the resting row instead made a filter argue for its own
+  // eviction — now that a large phone keeps one, its width came out of `base`,
+  // pushed the box under `usableSearch`, and tipped a row that had ample space
+  // to share into a full takeover.
+  const overflowButton = compactControls
+    ? RESERVED.overflowButtonCompact
+    : RESERVED.overflowButton;
+  const shedRoom = width - RESERVED.chrome - (overflow.length > 0 ? overflowButton : 0);
+  const searchBoxRoom = shedRoom - (counterHidden ? 0 : RESERVED.counter) - rightCost;
   // Below this a box is too narrow to read what you typed into it, and shrinking
   // further buys nothing; that is the only point at which taking the whole
   // cluster is worth losing the filters.
   const searchTakeover = searchCollapsed && searchBoxRoom < RESERVED.usableSearch;
 
-  return {
-    inline,
-    overflow,
-    compactControls,
-    counterHidden,
-    searchCollapsed,
-    clearAllHidden,
-    searchTakeover,
-  };
+  return { compactControls, counterHidden, searchCollapsed, clearAllHidden, searchTakeover };
 }
 
 /**
@@ -307,12 +360,20 @@ export function useFilterOverflow<T extends Record<string, unknown>>(
    * that is mid-edit.
    */
   frozen = false,
+  /** Whether "Exportar" is on the bar — see `rightClusterCost`. */
+  hasExport = true,
 ): OverflowSplit<T> {
   const { barRef, width } = useBarWidth();
-  const signature = JSON.stringify({ ids: all.map((field) => field.id), pills, ranges, width });
+  const signature = JSON.stringify({
+    ids: all.map((field) => field.id),
+    pills,
+    ranges,
+    width,
+    hasExport,
+  });
   const cache = useRef<{ signature: string; split: ReturnType<typeof computeSplit<T>> } | null>(null);
   if (cache.current === null || (!frozen && cache.current.signature !== signature)) {
-    cache.current = { signature, split: computeSplit(all, pills, ranges, width) };
+    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport) };
   }
   return { ...cache.current.split, barRef };
 }

package/src/components/data-display/Table/Table.styles.ts

@@ -51,6 +51,27 @@ const getStripeColorFromTheme = (theme: { palette: { primary: { main: string };
   return colorMap[stripeColor];
 };
 
+/**
+ * The zebra stripe for one body row.
+ *
+ * `neutral` — the default — resolves to `palette.action.hover`, which ALREADY
+ * carries its subtlety in its own alpha (`rgba(0,0,0,0.04)` in the light
+ * theme). MUI's `alpha()` REPLACES that channel rather than multiplying it, so
+ * re-alpha-ing it at 0.5 amplified the tint 12.5× into `rgba(0,0,0,0.5)` —
+ * solid #808080 on a white card, which reads as a selected or errored row
+ * rather than as a stripe (FUT-755). It is used as-is instead.
+ *
+ * The named colours are opaque `*.main` values with no alpha of their own, so
+ * they still need one.
+ */
+const stripeRowColor = (
+  theme: Parameters<typeof getStripeColorFromTheme>[0],
+  stripeColor: TableStripeColor = 'neutral',
+): string => {
+  const color = getStripeColorFromTheme(theme, stripeColor);
+  return stripeColor === 'neutral' ? color : alpha(color, 0.15);
+};
+
 // One variant applies at a time, so a lookup replaces the mutually exclusive
 // spreads.
 const TABLE_VARIANTS: Record<string, (args: VariantArgs) => CSSObject> = {
@@ -61,7 +82,7 @@ const TABLE_VARIANTS: Record<string, (args: VariantArgs) => CSSObject> = {
   striped: ({ theme, stripeColor }) => ({
       backgroundColor: theme.palette.background.paper,
       '& .MuiTableBody-root .MuiTableRow-root:nth-of-type(even)': {
-        backgroundColor: alpha(getStripeColorFromTheme(theme, stripeColor), stripeColor === 'neutral' ? 0.5 : 0.15) } }),
+        backgroundColor: stripeRowColor(theme, stripeColor) } }),
   glass: ({ theme }) => ({
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
       backdropFilter: 'blur(20px)',

package/src/components/form/Input/Input.tsx

@@ -86,6 +86,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onFocus,
       onBlur,
       'data-testid': dataTestId,
+      'aria-label': ariaLabel,
       ...props
     },
     ref,
@@ -105,8 +106,17 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       {...interactionProps(loading, onClick, props.disabled)}
       onFocus={onFocus}
       onBlur={onBlur}
+      /*
+       * `aria-label` has to ride `inputProps` to reach the `<input>` (FUT-755).
+       * Spread with the rest it lands on the FormControl DIV that TextField
+       * renders as its root, which carries no role — so the field itself kept
+       * no accessible name, and a source grep saying "this input is labelled"
+       * disagreed with the DOM. The reports search box and the block-title
+       * inputs were both named in source and anonymous to a screen reader.
+       */
       inputProps={{
         'data-testid': dataTestId,
+        ...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel }),
       }}
       InputProps={{
         startAdornment: startAdornment && (

package/src/components/layout/Drawer/Drawer.md

@@ -42,10 +42,17 @@ The Drawer component is perfect for:
 
 ### Styling Props
 
-| Prop        | Type      | Default | Description                      |
-| ----------- | --------- | ------- | -------------------------------- |
-| `glass`     | `boolean` | `false` | Enable glass/blur effect styling |
-| `className` | `string`  | -       | Additional CSS class names       |
+| Prop        | Type        | Default | Description                                      |
+| ----------- | ----------- | ------- | ------------------------------------------------ |
+| `glass`     | `boolean`   | `false` | Enable glass/blur effect styling                 |
+| `paperSx`   | `CSSObject` | -       | Extra styles for the sliding surface (see below) |
+| `className` | `string`    | -       | Additional CSS class names                       |
+
+`paperSx` is merged after the width/height the drawer derives from its anchor,
+onto MUI's drawer paper. A temporary drawer PORTALS that surface, so a consumer
+cannot reach it with a wrapper's descendant selector — this is how a bottom
+sheet asks for rounded top corners, or a docked panel for its own offset. Omit
+it and the drawer renders exactly as before.
 
 ## Sub-components
 

package/src/components/layout/Drawer/Drawer.tsx

@@ -36,6 +36,11 @@ const buildDrawerStyles = (
   variant: DrawerProps['variant'],
   width: DrawerProps['width'],
   height: DrawerProps['height'],
+  // Merged LAST into the surface's own rules, so a caller can shape the sliding
+  // surface itself (rounded corners on a bottom sheet, a docked panel's offset)
+  // without reaching for the MUI paper class from outside. Undefined by default:
+  // omit it and the drawer styles exactly as it always has.
+  paperSx?: DrawerProps['paperSx'],
 ) => {
   const baseStyles = {
     width: ['left', 'right'].includes(anchor) ? width : '100%',
@@ -53,6 +58,7 @@ const buildDrawerStyles = (
         backdropFilter: 'blur(20px)',
         border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
         boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+        ...paperSx,
       },
     };
   }
@@ -63,6 +69,7 @@ const buildDrawerStyles = (
       width: ['left', 'right'].includes(anchor) ? width : '100%',
       height: ['top', 'bottom'].includes(anchor) ? height : '100%',
       boxSizing: 'border-box',
+      ...paperSx,
     },
   };
 };
@@ -79,6 +86,7 @@ export const Drawer: React.FC<DrawerProps> = ({
   backdrop = true,
   hideBackdrop = false,
   keepMounted = false,
+  paperSx,
   className,
   dataTestId,
   ...rest
@@ -99,7 +107,7 @@ export const Drawer: React.FC<DrawerProps> = ({
           invisible: !backdrop,
         },
       }}
-      sx={buildDrawerStyles(theme, drawerAnchor, variant, width, height)}
+      sx={buildDrawerStyles(theme, drawerAnchor, variant, width, height, paperSx)}
       className={className}
       data-testid={dataTestId || 'drawer'}
       {...rest}
@@ -113,6 +121,7 @@ export const DrawerHeader: React.FC<DrawerHeaderProps> = ({
   children,
   onClose,
   showCloseButton = true,
+  closeLabel,
   dataTestId,
 }) => {
   const theme = useTheme();
@@ -136,7 +145,7 @@ export const DrawerHeader: React.FC<DrawerHeaderProps> = ({
         <IconButton
           onClick={onClose}
           edge="end"
-          aria-label="Close drawer"
+          aria-label={closeLabel ?? 'Close drawer'}
           data-testid={dataTestId ? `${dataTestId}-close` : 'drawer-close'}
         >
           <Close />