@12-apps/ui 6.10.1 → 6.11.1

package/package.json

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

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

@@ -31,44 +31,117 @@ import { TextField } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 
-/** `AAAA-MM-DD` (the wire) → `dd/mm/aaaa` (what the merchant reads). */
-export function isoToBr(iso: string): string {
+/**
+ * THE MASK IS THE ORDER, and both halves of this file read it.
+ *
+ * The placeholder a host supplies (`copy.filters.dayMask` — `dd/mm/aaaa` for
+ * pt-BR, `mm/dd/yyyy` for en-US) is not decoration: it tells the reader which
+ * segment comes first. Everything below therefore derives the segment order
+ * FROM that same string, so the shape on screen and the shape the parser
+ * expects cannot disagree.
+ *
+ * They did disagree, and the failure was silent in the worst direction. The
+ * mask/parse pair was hardcoded day-first (the `Br` in the old names was
+ * accurate) while the placeholder followed the copy pack — so under `en-US` the
+ * field ASKED for `mm/dd/yyyy`, and a reader who typed exactly that got a day
+ * of 12 and a month of 31, which is not a date, which commits nothing. No
+ * error, no filter, a full list that reads like an answer. The en-US pack's own
+ * comment already said the mask "is the shape that gets a date entered
+ * backwards"; nothing enforced it.
+ */
+
+/** What one segment of a mask is, and how many digits it takes. */
+type DaySegment = 'year' | 'month' | 'day';
+const SEGMENT_WIDTH: Readonly<Record<DaySegment, number>> = { year: 4, month: 2, day: 2 };
+
+/**
+ * The segments a mask asks for, in its own order.
+ *
+ * Keyed on each token's FIRST letter so one rule covers every spelling a host
+ * might use — `aaaa`/`yyyy` for the year, `mm` for the month, `dd`/`tt` for the
+ * day. An unreadable mask falls back to day-first rather than throwing: this
+ * runs on every keystroke, and a field that renders is recoverable where one
+ * that crashes the grid is not.
+ */
+function segmentsOf(mask: string): readonly DaySegment[] {
+  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);
+  if (tokens.length !== 3) return ['day', 'month', 'year'];
+  const segments = tokens.map((token): DaySegment => {
+    const head = token.slice(0, 1).toLowerCase();
+    if (head === 'y' || head === 'a') return 'year';
+    return head === 'm' ? 'month' : 'day';
+  });
+  // A mask naming the same segment twice describes no date. Fall back rather
+  // than build a parser that can never succeed.
+  return new Set(segments).size === 3 ? segments : ['day', 'month', 'year'];
+}
+
+/** The separator the mask uses, defaulting to `/`. */
+const separatorOf = (mask: string): string => mask.replace(/[A-Za-z]/g, '').slice(0, 1) || '/';
+
+/** `AAAA-MM-DD` (the wire) → the mask's own order (what the reader sees). */
+export function isoToMasked(iso: string, mask: string): string {
   const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-  return parts ? `${parts[3]}/${parts[2]}/${parts[1]}` : '';
+  if (!parts) return '';
+  const value: Record<DaySegment, string> = {
+    year: parts[1] as string,
+    month: parts[2] as string,
+    day: parts[3] as string,
+  };
+  return segmentsOf(mask)
+    .map((segment) => value[segment])
+    .join(separatorOf(mask));
 }
 
 /**
- * `dd/mm/aaaa` → `AAAA-MM-DD`, but ONLY for a day that exists. `31/02/2026`
- * parses fine as three numbers and is not a date, and `Date` would silently
- * roll it into March rather than reject it — so the round trip through UTC is
- * the check: if the month or day comes back changed, the input was not a day.
+ * The mask's order → `AAAA-MM-DD`, but ONLY for a day that exists.
+ *
+ * `31/02/2026` parses fine as three numbers and is not a date, and `Date` would
+ * silently roll it into March rather than reject it — so the round trip through
+ * UTC is the check: if the month or day comes back changed, the input was not a
+ * day.
  */
-export function brToIso(text: string): string {
-  const parts = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(text);
-  if (!parts) return '';
-  const [, dd, mm, yyyy] = parts;
-  const day = Number(dd);
-  const month = Number(mm);
-  const year = Number(yyyy);
+export function maskedToIso(text: string, mask: string): string {
+  const segments = segmentsOf(mask);
+  const digits = text.replace(/\D/g, '');
+  if (digits.length !== 8) return '';
+  const value = {} as Record<DaySegment, string>;
+  let cursor = 0;
+  for (const segment of segments) {
+    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);
+    cursor += SEGMENT_WIDTH[segment];
+  }
+  const year = Number(value.year);
+  const month = Number(value.month);
+  const day = Number(value.day);
   if (year < 1000) return '';
   const probe = new Date(Date.UTC(year, month - 1, day));
   if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return '';
-  return `${yyyy}-${mm}-${dd}`;
+  return `${value.year}-${value.month}-${value.day}`;
 }
 
 /**
- * Digits only, capped at eight, with the separators put back as you type.
+ * Digits only, capped at the mask's width, with the separators put back as you
+ * type.
  *
  * Deriving the whole string from the digits — rather than editing the text in
- * place — is what makes backspace behave. Four digits render as `06/08`, not
- * `06/08/`, so deleting the first digit of the year removes the trailing
- * separator with it instead of leaving a dead keystroke that changes nothing.
+ * place — is what makes backspace behave. Four digits of `dd/mm/aaaa` render as
+ * `06/08`, not `06/08/`, so deleting the first digit of the year removes the
+ * trailing separator with it instead of leaving a dead keystroke that changes
+ * nothing.
  */
-export function maskBrDate(raw: string): string {
+export function maskDate(raw: string, mask: string): string {
+  const segments = segmentsOf(mask);
+  const separator = separatorOf(mask);
   const digits = raw.replace(/\D/g, '').slice(0, 8);
-  if (digits.length <= 2) return digits;
-  if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
-  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
+  const out: string[] = [];
+  let cursor = 0;
+  for (const segment of segments) {
+    if (cursor >= digits.length) break;
+    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));
+    cursor += SEGMENT_WIDTH[segment];
+  }
+  return out.join(separator);
 }
 
 /**
@@ -142,7 +215,7 @@ export function DayBoundInput({
   mask: string;
 }): React.JSX.Element {
   const applied = value ?? '';
-  const [text, setText] = useState(() => isoToBr(applied));
+  const [text, setText] = useState(() => isoToMasked(applied, mask));
 
   // The bound is the APPLIED filter; `text` is what is being typed. Re-sync only
   // when the applied value moved somewhere the text does not already mean — a
@@ -150,8 +223,10 @@ export function DayBoundInput({
   // guard the field's own write bounces straight back mid-edit and resets the
   // caret, which is the native control's worst habit reproduced by hand.
   useEffect(() => {
-    setText((current) => (brToIso(current) === applied ? current : isoToBr(applied)));
-  }, [applied]);
+    setText((current) =>
+      maskedToIso(current, mask) === applied ? current : isoToMasked(applied, mask),
+    );
+  }, [applied, mask]);
 
   return (
     <TextField
@@ -162,19 +237,19 @@ export function DayBoundInput({
       placeholder={mask}
       value={text}
       onChange={(event) => {
-        const next = maskBrDate(event.target.value);
+        const next = maskDate(event.target.value, mask);
         setText(next);
         // Emptying clears the bound. A COMPLETE day applies it. A partial one
         // does NEITHER — it leaves whatever is applied alone, so typing is never
         // fought and a half-typed year never reaches the backend.
         if (next === '') return onChange(undefined);
-        const iso = brToIso(next);
+        const iso = maskedToIso(next, mask);
         if (iso) onChange(iso);
       }}
       // Leaving a half-typed (or impossible) date on screen would show a filter
       // the list is not actually using. On blur the field snaps back to what IS
       // applied; a complete date already equals it, so this only ever tidies.
-      onBlur={() => setText(isoToBr(applied))}
+      onBlur={() => setText(isoToMasked(applied, mask))}
       // The placeholder occupies the space an un-shrunk label would render into.
       InputLabelProps={{ shrink: true }}
       inputProps={dayInputProps(testId, describedBy)}

package/src/components/form/DateRangePicker/DateRangePicker.range.ts

@@ -7,7 +7,7 @@
  * indistinguishable from one that ignored you. The caller reads
  * {@link DateRangeStatus} and keeps its own confirm button shut.
  */
-import { isoToBr } from '../../data-display/DataViews/data-views-day-input';
+import { isoToMasked } from '../../data-display/DataViews/data-views-day-input';
 
 import { dayCount, isAfterDay } from './DateRangePicker.dates';
 import type {
@@ -53,6 +53,11 @@ export function resolveDayRange(
  * moves both halves of the decision to the same place.
  */
 export function defaultMessages(): DateRangePickerMessages {
+  // ONE mask, read by both the fields and the summary below. They are the same
+  // date in the same control, so a summary formatted in a different order from
+  // the boxes it summarises is a control arguing with itself — which is what
+  // two independent literals eventually become.
+  const dayMask = 'dd/mm/yyyy';
   return {
     from: 'Start date',
     to: 'End date',
@@ -60,9 +65,9 @@ export function defaultMessages(): DateRangePickerMessages {
     incomplete: 'Choose both dates.',
     reversed: 'The end date must be on or after the start date.',
     overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,
-    summary: ({ from, to }) => `${isoToBr(from)} – ${isoToBr(to)}`,
+    summary: ({ from, to }) => `${isoToMasked(from, dayMask)} – ${isoToMasked(to, dayMask)}`,
     calendarLabel: 'Calendar',
-    dayMask: 'dd/mm/yyyy',
+    dayMask,
   };
 }
 

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

@@ -1,6 +1,8 @@
-import { CircularProgress, InputAdornment, styled, TextField } from '@mui/material';
+import { CircularProgress, InputAdornment, styled } from '@mui/material';
 import React from 'react';
 
+import { TextFieldSlim } from './text-field-slim';
+
 import {
   filledStyles,
   floatingLabelStyles,
@@ -13,7 +15,14 @@ import {
 } from './Input.styles';
 import type { InputProps } from './Input.types';
 
-const StyledTextField = styled(TextField, {
+/**
+ * `TextFieldSlim`, not `TextField` — see `text-field-slim.tsx`. MUI's own
+ * `TextField` imports `Select` unconditionally, and through it `Menu`,
+ * `Popover`, `Modal` and seven more component modules, so every screen with one
+ * text box shipped a dropdown it can never render. Same composition, same DOM,
+ * same prop routing; the select branch is the only thing missing.
+ */
+const StyledTextField = styled(TextFieldSlim, {
   shouldForwardProp: (prop) =>
     !['customVariant', 'floating', 'glow', 'pulse', 'loading'].includes(prop as string),
 })<{
@@ -108,8 +117,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       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
+       * Spread with the rest it lands on the FormControl DIV that the text
+       * field renders as its root, which carries no role — so the field 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.

package/src/components/form/Input/text-field-slim.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+/**
+ * `TextField`, minus the branch nobody in a text field takes.
+ *
+ * MUI's `TextField` is a small composition — a `FormControl` root, an optional
+ * `InputLabel`, one of the three input variants, an optional `FormHelperText` —
+ * around one branch: `select`. That branch is worth a fortune. `TextField`
+ * imports `Select` unconditionally, and `Select` reaches `Menu`, `MenuList`,
+ * `Popover`, `NativeSelect`, `List`, `Modal`, `Paper`, `Portal` and `Grow`. Every
+ * one of those ships to anyone who renders one text box.
+ *
+ * Measured in one adopter's storefront, whose header search box is the eager
+ * caller: taking that ONE box off `TextField` is worth 35.8 KiB raw and 13
+ * fewer `@mui/material` component modules on the critical path — more than any
+ * other single item in that bundle.
+ *
+ * `Input` has never supported `select`: its props are `InputHTMLAttributes`, so
+ * no caller can even pass one. The branch was pure cost.
+ *
+ * ## This is a TRANSCRIPTION, not a redesign
+ *
+ * Every routing decision below is `TextField`'s, deliberately, down to which
+ * props land on the ROOT rather than on the input — including the one that is
+ * arguably wrong (an unrecognised HTML attribute goes to the root `div`, which
+ * is why `Input` has to route `aria-label` through `inputProps`). Changing any
+ * of that here would be a behaviour change wearing a performance change's
+ * clothes. `__tests__/text-field-slim.test.tsx` renders this and the real
+ * `TextField` side by side and compares the DOM they produce.
+ *
+ * What is NOT carried over: the `select` branch, the `slots`/`slotProps` API
+ * (unreachable through `InputProps`, which is `InputHTMLAttributes`), and the
+ * dev-only warning about `children` that only the select branch could emit.
+ */
+import {
+  FilledInput,
+  FormControl,
+  FormHelperText,
+  Input as StandardInput,
+  InputLabel,
+  OutlinedInput,
+  styled,
+} from '@mui/material';
+import type {
+  FilledInputProps,
+  FormControlProps,
+  FormHelperTextProps,
+  InputBaseComponentProps,
+  InputLabelProps,
+  InputProps as MuiInputProps,
+  OutlinedInputProps,
+} from '@mui/material';
+import React from 'react';
+
+import { withDefaults } from '../../../utils/withDefaults';
+
+const VARIANT_COMPONENT = {
+  standard: StandardInput,
+  filled: FilledInput,
+  outlined: OutlinedInput,
+} as const;
+
+/**
+ * `MuiTextField-root`, by hand.
+ *
+ * `@mui/material` does not re-export `textFieldClasses` from its root barrel,
+ * and the deep path that does would import `TextField` — the whole thing this
+ * file exists to avoid. So the class name is written out, and the parity test
+ * asserts it against a REAL `TextField`'s root rather than against itself.
+ *
+ * It has to be there at all because it is part of MUI's public surface: two of
+ * this package's own suites reach for `.closest('.MuiTextField-root')`, and a
+ * consumer's stylesheet may too.
+ */
+const TEXT_FIELD_ROOT_CLASS = 'MuiTextField-root';
+
+/**
+ * Named `MuiTextField` so a theme's `components.MuiTextField.styleOverrides`
+ * keeps applying. Nothing in this repo sets one today; a consumer's theme is
+ * not this package's to break.
+ */
+const TextFieldSlimRoot = styled(FormControl, {
+  name: 'MuiTextField',
+  slot: 'Root',
+  overridesResolver: (_props, styles) => styles.root,
+})({});
+
+export interface TextFieldSlimProps
+  extends Omit<FormControlProps, 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue'> {
+  autoComplete?: string;
+  autoFocus?: boolean;
+  defaultValue?: unknown;
+  helperText?: React.ReactNode;
+  label?: React.ReactNode;
+  maxRows?: number | string;
+  minRows?: number | string;
+  multiline?: boolean;
+  name?: string;
+  placeholder?: string;
+  rows?: number | string;
+  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+  value?: unknown;
+  inputRef?: React.Ref<unknown>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /** Props for the rendered input variant. */
+  InputProps?: Partial<MuiInputProps & FilledInputProps & OutlinedInputProps>;
+  /**
+   * Props for the `<input>` itself — where an `aria-label` has to ride.
+   *
+   * MUI's own type, because it is deliberately open: a caller puts `data-*`
+   * and `aria-*` here precisely because the root would swallow them, and
+   * `InputHTMLAttributes` alone rejects both.
+   */
+  inputProps?: InputBaseComponentProps;
+  InputLabelProps?: Partial<InputLabelProps>;
+  FormHelperTextProps?: Partial<FormHelperTextProps>;
+}
+
+/**
+ * `TextField`'s own defaults, as a table.
+ *
+ * One `= default` per destructured prop is one branch per prop, and eight of
+ * them put this component over the complexity bar before it rendered anything —
+ * which is the same reason `AppHeader` keeps its defaults in a table. The values
+ * are `TextField`'s, unchanged; the parity test would fail if any drifted.
+ */
+const DEFAULTS: Partial<TextFieldSlimProps> = {
+  autoFocus: false,
+  color: 'primary',
+  disabled: false,
+  error: false,
+  fullWidth: false,
+  multiline: false,
+  required: false,
+  variant: 'outlined',
+};
+
+/** The two ids a labelled, described field needs, and the input's own. */
+function idsOf(props: TextFieldSlimProps, generated: string): {
+  id: string;
+  helperTextId: string | undefined;
+  inputLabelId: string | undefined;
+} {
+  const id = props.id ?? generated;
+  return {
+    id,
+    helperTextId: props.helperText && id ? `${id}-helper-text` : undefined,
+    inputLabelId: props.label && id ? `${id}-label` : undefined,
+  };
+}
+
+/**
+ * What only the OUTLINED variant needs: it draws its own notch around the
+ * label, so it has to be told the label and whether the caller pinned it shrunk
+ * (FUT-729's `shrink` case).
+ */
+function outlinedPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
+  if (props.variant !== 'outlined') return {};
+  const shrink = props.InputLabelProps?.shrink;
+  return { label: props.label, ...(shrink === undefined ? {} : { notched: shrink }) };
+}
+
+interface FieldIds {
+  id: string;
+  helperTextId: string | undefined;
+  inputLabelId: string | undefined;
+}
+
+/**
+ * Everything the input (or this component) consumes by name.
+ *
+ * A key LIST rather than the omit-by-destructuring idiom, which would name
+ * twenty-four bindings only to leave every one of them unused — twenty-four
+ * lint warnings, in a package that allows none.
+ *
+ * `fullWidth`, `disabled`, `error`, `required`, `color` and `variant` are
+ * deliberately absent: `TextField` hands those to the root, and `fullWidth` to
+ * both.
+ */
+const CONSUMED_BY_FIELD: ReadonlySet<string> = new Set([
+  'autoComplete', 'autoFocus', 'children', 'className', 'defaultValue',
+  'FormHelperTextProps', 'helperText', 'id', 'InputLabelProps', 'inputProps',
+  'InputProps', 'inputRef', 'label', 'maxRows', 'minRows', 'multiline', 'name',
+  'onBlur', 'onChange', 'onFocus', 'placeholder', 'rows', 'type', 'value',
+]);
+
+/**
+ * What the ROOT `FormControl` gets: the props `TextField` hands it by name,
+ * plus everything it did not recognise.
+ *
+ * That second half is `TextField`'s behaviour and not a choice made here: an
+ * unrecognised HTML attribute lands on the root `div`, which is why `Input` has
+ * to route `aria-label` through `inputProps`. The parity test pins it.
+ */
+function rootPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(props).filter(([key]) => !CONSUMED_BY_FIELD.has(key)),
+  );
+}
+
+/** What the INPUT gets, by name, exactly as `TextField` names them. */
+function fieldPropsOf(props: TextFieldSlimProps, ids: FieldIds): Record<string, unknown> {
+  return {
+    'aria-describedby': ids.helperTextId,
+    autoComplete: props.autoComplete,
+    autoFocus: props.autoFocus,
+    defaultValue: props.defaultValue,
+    fullWidth: props.fullWidth,
+    multiline: props.multiline,
+    name: props.name,
+    rows: props.rows,
+    maxRows: props.maxRows,
+    minRows: props.minRows,
+    type: props.type,
+    value: props.value,
+    id: ids.id,
+    inputRef: props.inputRef,
+    onBlur: props.onBlur,
+    onChange: props.onChange,
+    onFocus: props.onFocus,
+    placeholder: props.placeholder,
+    inputProps: props.inputProps,
+    ...outlinedPropsOf(props),
+    ...props.InputProps,
+  };
+}
+
+export const TextFieldSlim = React.forwardRef<HTMLDivElement, TextFieldSlimProps>(
+  function TextFieldSlim(rawProps, ref) {
+    const props = withDefaults(rawProps, DEFAULTS);
+    // `TextField` uses `@mui/utils`'s `useId`, which is React's with a fallback
+    // for React 17. The peer here is React 19, so React's own is the same thing
+    // without the dependency. The override still wins, exactly as it did — and
+    // it is read from the RAW props, before `withDefaults` could supply one.
+    const ids = idsOf(rawProps, React.useId());
+    const InputComponent = VARIANT_COMPONENT[props.variant ?? 'outlined'];
+    const { label, helperText } = props;
+
+    return (
+      <TextFieldSlimRoot
+        className={[TEXT_FIELD_ROOT_CLASS, props.className].filter(Boolean).join(' ')}
+        ref={ref}
+        {...rootPropsOf(props)}
+      >
+        {label !== null && label !== undefined && label !== '' ? (
+          <InputLabel htmlFor={ids.id} id={ids.inputLabelId} {...props.InputLabelProps}>
+            {label}
+          </InputLabel>
+        ) : null}
+        <InputComponent {...fieldPropsOf(props, ids)} />
+        {helperText ? (
+          <FormHelperText id={ids.helperTextId} {...props.FormHelperTextProps}>
+            {helperText}
+          </FormHelperText>
+        ) : null}
+      </TextFieldSlimRoot>
+    );
+  },
+);