@12-apps/ui 6.73.1 → 6.74.1

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

@@ -1,199 +1,12 @@
-import CircularProgress from '@mui/material/CircularProgress/index.js';
-import InputAdornment from '@mui/material/InputAdornment/index.js';
-import { styled, useTheme } from '@mui/material/styles/index.js';
-import React from 'react';
-
-import { INPUT_LOADING } from './Input.metrics';
-import { TextFieldSlim } from './text-field-slim';
-
-import {
-  filledStyles,
-  floatingLabelStyles,
-  glowStyles,
-  inputBaseStyles,
-  inputRadiusStyles,
-  muiVariantFor,
-  outlinedStyles,
-  pulseStyles,
-  SIZE_MAP,
-} from './Input.styles';
-import type { InputProps } from './Input.types';
-import { splitTestId } from '../../../platform/test-id';
-import { fieldControlStyles } from '../../../tokens/field-height';
-import { rem } from '../../../tokens/relative';
-import type { SizeValue } from '../../../tokens/vocabulary';
-
-/**
- * `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', 'fieldSize', 'floating', 'glow', 'pulse', 'loading'].includes(prop as string),
-})<{
-  customVariant?: InputProps['variant'];
-  fieldSize: SizeValue;
-  floating?: boolean;
-  glow?: boolean;
-  pulse?: boolean;
-  loading?: boolean;
-}>(({ theme, customVariant, fieldSize, floating, glow, pulse, loading }) => ({
-  position: 'relative',
-  // The theme's field height for this size (outlined family, one line).
-  ...fieldControlStyles(theme, fieldSize),
-  opacity: loading ? INPUT_LOADING.opacity : 1,
-
-  ...(glow ? glowStyles(theme) : {}),
-  ...(pulse ? pulseStyles(theme, fieldSize) : {}),
-  ...(floating ? floatingLabelStyles(theme) : {}),
-
-  '& .MuiInputBase-root': {
-    transition: 'all 0.3s ease',
-    ...inputRadiusStyles(theme, customVariant),
-    ...inputBaseStyles(theme, customVariant),
-  },
-
-  '& .MuiOutlinedInput-root': outlinedStyles(theme),
-  '& .MuiFilledInput-root': filledStyles(theme),
-}));
-
-/** Only one adornment shows at a time: the spinner replaces the caller's while loading. */
-const EndAdornment: React.FC<{ loading: boolean; endAdornment?: React.ReactNode }> = ({
-  loading,
-  endAdornment,
-}) => {
-  const theme = useTheme();
-  if (loading) {
-    return (
-      <InputAdornment position="end">
-        <CircularProgress size={rem(theme, INPUT_LOADING.spinnerSize)} />
-      </InputAdornment>
-    );
-  }
-
-  if (!endAdornment) return null;
-
-  return <InputAdornment position="end">{endAdornment}</InputAdornment>;
-};
-
-/** While loading the field is inert: no clicks, and disabled to assistive tech. */
-const interactionProps = (
-  loading: boolean,
-  onClick: InputProps['onClick'],
-  disabled?: boolean,
-) => ({
-  disabled: loading || disabled,
-  onClick: loading ? undefined : onClick,
-});
+import { createInput } from "./Input.factory";
+import type { InputComponent } from "./Input.factory";
+import { TextFieldSlim } from "./text-field-slim";
 
 /**
- * The ARIA that describes the field has to sit on the `<input>`: the text
- * field puts every attribute it does not recognise on its root `FormControl`,
- * a `<div>` with no role, where a screen reader never reads it.
- *
- * `aria-label` has ridden `inputProps` since FUT-755. `aria-describedby` and
- * `aria-busy` fell through to the div until FUT-2619, so CepField's input
- * pointed at nothing while its lookup status lived in a live region beside it.
- *
- * `inputProps` are spread onto the `<input>` AFTER the `aria-describedby` MUI
- * writes for helper text, so a caller's ids REPLACE the helper text's: MUI's
- * `TextField` on its own keeps only one of the two. This joins both, helper
- * text first. The helper id is MUI's `<id>-helper-text` (the parity test pins
- * that spelling), which is why the field's id is fixed here rather than left
- * to the text field.
+ * The text input, over `TextFieldSlim` — see `text-field-slim.tsx` for why not
+ * MUI's `TextField`, and `Input.factory.tsx` for the body. This entry renders
+ * any of the five variants; a control that only ever renders the outlined
+ * family can import `@12-apps/ui/form/Input/outlined`, which ships one MUI
+ * input instead of three (FUT-1054).
  */
-function inputAriaOf(a: {
-  id: string;
-  helperText: React.ReactNode;
-  label?: string;
-  describedBy?: string;
-  busy?: InputProps['aria-busy'];
-}): Record<string, unknown> {
-  const describedBy = [a.helperText ? `${a.id}-helper-text` : undefined, a.describedBy]
-    .filter(Boolean)
-    .join(' ');
-  return {
-    ...(a.label === undefined ? {} : { 'aria-label': a.label }),
-    ...(a.describedBy === undefined ? {} : { 'aria-describedby': describedBy }),
-    ...(a.busy === undefined ? {} : { 'aria-busy': a.busy }),
-  };
-}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      variant = 'outlined',
-      size = 'md',
-      label,
-      error,
-      helperText,
-      startAdornment,
-      endAdornment,
-      fullWidth = true,
-      floating = false,
-      glow = false,
-      pulse = false,
-      loading = false,
-      onClick,
-      onFocus,
-      onBlur,
-      'aria-label': ariaLabel,
-      'aria-describedby': ariaDescribedBy,
-      'aria-busy': ariaBusy,
-      inputProps,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { testId: dataTestId, rest: props } = splitTestId(rest);
-    const generatedId = React.useId();
-    const id = props.id ?? generatedId;
-    return (
-      <StyledTextField
-        ref={ref}
-        variant={muiVariantFor(variant)}
-        customVariant={variant}
-        fieldSize={size}
-        floating={floating}
-        glow={glow}
-        pulse={pulse}
-        loading={loading}
-        label={label}
-        error={error}
-        helperText={helperText}
-        fullWidth={fullWidth}
-        {...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 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.
-         * `aria-describedby` and `aria-busy` are the same case: `inputAriaOf`.
-         */
-        inputProps={{
-          'data-testid': dataTestId,
-          ...inputProps,
-          ...inputAriaOf({ id, helperText, label: ariaLabel, describedBy: ariaDescribedBy, busy: ariaBusy }),
-        }}
-        InputProps={{
-          startAdornment: startAdornment && (
-            <InputAdornment position="start">{startAdornment}</InputAdornment>
-          ),
-          endAdornment: <EndAdornment loading={loading} endAdornment={endAdornment} />,
-        }}
-        {...SIZE_MAP[size]}
-        {...props}
-        id={id}
-      />
-    );
-  },
-);
-
-Input.displayName = 'Input';
+export const Input: InputComponent = createInput(TextFieldSlim);

package/src/components/form/Input/outlined/index.ts

@@ -0,0 +1,27 @@
+import { createInput } from '../Input.factory';
+import type { InputComponent } from '../Input.factory';
+import type { InputProps as GenericInputProps, InputVariant } from '../Input.types';
+import { OutlinedTextFieldSlim } from './text-field-slim-outlined';
+
+/**
+ * The house variants MUI draws as `outlined`: `muiVariantFor` maps `glass` and
+ * `gradient` onto an outline (`Input.metrics.ts`). `filled` and `underline`
+ * need the inputs this entry exists to leave out, so they are a type error here
+ * rather than a silent fallback.
+ */
+export type OutlinedInputVariant = Extract<InputVariant, 'outlined' | 'glass' | 'gradient'>;
+
+export type InputProps = Omit<GenericInputProps, 'variant'> & { variant?: OutlinedInputVariant };
+
+/**
+ * `@12-apps/ui/form/Input/outlined` — the same `Input`, with the same props,
+ * styles and DOM, built on a field that imports `OutlinedInput` and no other
+ * MUI input (FUT-1054). For a control that only ever renders the outlined
+ * family and sits where its bytes matter: a storefront header, a first screen.
+ *
+ * Not re-exported from `form/Input` or the `form` barrel: a second `Input`
+ * there would collide. Reach it only through this subpath.
+ */
+export const Input = createInput(OutlinedTextFieldSlim) as InputComponent<InputProps>;
+
+export type { InputSize } from '../Input.types';

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

@@ -0,0 +1,13 @@
+import OutlinedInput from '@mui/material/OutlinedInput/index.js';
+
+import { createTextFieldSlim } from '../text-field-slim.factory';
+import type { TextFieldSlimComponent } from '../text-field-slim.factory';
+
+/**
+ * `TextFieldSlim` pinned to MUI's outlined input (FUT-1054). The generic field
+ * picks its input from a three-way table at runtime, so a bundler has to keep
+ * `FilledInput` and `Input` for every caller; this one imports `OutlinedInput`
+ * alone. Every variant it can be asked for renders outlined, which is what the
+ * outlined `Input` entry ever asks for.
+ */
+export const OutlinedTextFieldSlim: TextFieldSlimComponent = createTextFieldSlim(() => OutlinedInput);

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

@@ -0,0 +1,248 @@
+'use client';
+
+/**
+ * `TextFieldSlim`'s body, with the input implementation left to the caller
+ * (FUT-1054). Why the field exists at all, and what it transcribes from MUI's
+ * `TextField`, is in `text-field-slim.tsx`.
+ */
+import FormControl from '@mui/material/FormControl/index.js';
+import FormHelperText from '@mui/material/FormHelperText/index.js';
+import InputLabel from '@mui/material/InputLabel/index.js';
+import { styled } from '@mui/material/styles/index.js';
+import type { FilledInputProps } from '@mui/material/FilledInput/index.js';
+import type { FormControlProps } from '@mui/material/FormControl/index.js';
+import type { FormHelperTextProps } from '@mui/material/FormHelperText/index.js';
+import type { InputProps as MuiInputProps } from '@mui/material/Input/index.js';
+import type { InputBaseComponentProps } from '@mui/material/InputBase/index.js';
+import type { InputLabelProps } from '@mui/material/InputLabel/index.js';
+import type { OutlinedInputProps } from '@mui/material/OutlinedInput/index.js';
+import React from 'react';
+
+import { withDefaults } from '../../../utils/withDefaults';
+
+/** MUI's three input variants, by the name `TextField` gives them. */
+export type MuiFieldVariant = 'standard' | 'filled' | 'outlined';
+
+/**
+ * Which input renders a variant. The generic `TextFieldSlim` maps all three;
+ * a pinned field maps the one it renders, so the other two are never imported
+ * (FUT-1054).
+ */
+export type InputForVariant = (variant: MuiFieldVariant) => React.ElementType;
+
+/** What `createTextFieldSlim` returns, and what `createInput` composes. */
+export type TextFieldSlimComponent = React.ForwardRefExoticComponent<
+  TextFieldSlimProps & React.RefAttributes<HTMLDivElement>
+>;
+
+/**
+ * `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,
+  };
+}
+
+/**
+ * The field, with the input implementation chosen by `inputFor`.
+ *
+ * A factory rather than a component so the variant table lives in the CALLER's
+ * module: this module imports none of `Input`, `FilledInput` or
+ * `OutlinedInput`, so what `inputFor` returns is the only input a caller's
+ * bundle keeps. The caller's own module-scope `createTextFieldSlim(...)` call
+ * is kept by the bundler, and with it every module its argument reaches
+ * (FUT-3402), so that argument must name only the variants it serves.
+ */
+export function createTextFieldSlim(inputFor: InputForVariant): TextFieldSlimComponent {
+  return 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 = inputFor(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>
+      );
+    },
+  );
+}