@12-apps/ui 6.73.0 → 6.74.0

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

@@ -0,0 +1,221 @@
+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 type { TextFieldSlimComponent } from './text-field-slim.factory';
+
+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';
+
+/**
+ * The field `Input` renders, styled, over whichever text field it is given.
+ *
+ * Always a `TextFieldSlim`, never MUI's `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.
+ */
+function styledField(TextField: TextFieldSlimComponent) {
+  return styled(TextField, {
+    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,
+});
+
+/**
+ * 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.
+ */
+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 }),
+  };
+}
+
+/** The render function `createInput` hands `forwardRef`, over a given styled field. */
+function inputRenderer(
+  StyledTextField: ReturnType<typeof styledField>,
+): React.ForwardRefRenderFunction<HTMLInputElement, InputProps> {
+  return (
+    {
+      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}
+      />
+    );
+  };
+}
+
+/** The `Input` component every entry exports. */
+export type InputComponent<P extends InputProps = InputProps> = React.ForwardRefExoticComponent<
+  P & React.RefAttributes<HTMLInputElement>
+>;
+
+/**
+ * `Input` over a given text field (FUT-1054). The generic entry passes the
+ * field that renders any MUI variant; `./outlined` passes one that only ever
+ * imports `OutlinedInput`. Everything else — styles, adornments, the ARIA
+ * routing — is this one body, so the two cannot drift.
+ */
+export function createInput(TextField: TextFieldSlimComponent): InputComponent {
+  const Input = React.forwardRef<HTMLInputElement, InputProps>(inputRenderer(styledField(TextField)));
+  Input.displayName = 'Input';
+  return Input;
+}

package/src/components/form/Input/Input.md

@@ -115,6 +115,26 @@ The Input component provides a flexible text input field with comprehensive vali
 />
 ```
 
+## The outlined entry: `@12-apps/ui/form/Input/outlined`
+
+The same `Input`, with the same props, styles and DOM, built on a field that imports MUI's `OutlinedInput` and no other MUI input (FUT-1054).
+
+The generic `@12-apps/ui/form/Input` chooses MUI's input at runtime from `variant`. A bundler therefore ships `OutlinedInput`, `FilledInput` and `Input` (about 7 KB raw for the last two) to every screen that renders one. The outlined entry ships only the first.
+
+```tsx
+import { Input } from '@12-apps/ui/form/Input/outlined';
+
+<Input type="search" size="sm" aria-label="Buscar produtos" />
+```
+
+**When to use it:** a control that only ever renders the outlined family (`outlined`, `glass` or `gradient`, the variants `muiVariantFor` draws as an outline), and that sits where its bytes matter: a storefront header, a first screen, or a library component such as `CepField`.
+
+**What it refuses:** `variant="filled"` and `variant="underline"` are type errors. They need the inputs this entry exists to leave out, so use the generic entry for them.
+
+**What stays the same:** `__tests__/outlined-entry.test.tsx` renders both entries from the same props and compares the DOM. `__tests__/outlined-reachability.test.ts` fails if `FilledInput` or MUI's `Input` becomes reachable from this entry or from `CepField`.
+
+**Reachable only through this subpath.** The entry is not re-exported from `form/Input` or from the `form` barrel, where a second `Input` would collide.
+
 ## Accessibility
 
 ### ARIA Attributes

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