@12-apps/payments-frontend 3.34.3 → 3.34.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.34.3",
+  "version": "3.34.4",
   "type": "module",
   "sideEffects": false,
   "description": "Browser half of the vendor-agnostic payments platform: plug-and-play MUI components for the per-provider settings page (credential form from each provider's schema, masked hints, verify/enable) and the checkout page (PIX QR + polling, card tokenization, hosted-checkout redirect), plus the headless hooks and fetch clients they build on. Talks only to the host's payments HTTP surface — never to a provider directly. Microfrontend-ready: no app coupling, host injects theme and auth.",

package/src/components/checkout/mui-defaults.tsx

@@ -19,15 +19,21 @@ import {
   CircularProgress,
   FormControl,
   FormControlLabel,
+  FormHelperText,
   FormLabel,
+  InputLabel,
+  OutlinedInput,
   Radio,
   RadioGroup as MuiRadioGroup,
   Step,
   StepLabel,
   Stepper as MuiStepper,
-  TextField,
   Typography,
+  styled,
+  useThemeProps,
 } from '@mui/material';
+import type { TextFieldProps } from '@mui/material';
+import { useId } from 'react';
 import type { JSX } from 'react';
 
 import type {
@@ -93,25 +99,170 @@ function DefaultButton({ variant = 'solid', color = 'primary', size = 'md', full
   );
 }
 
-function DefaultInput({ label, type = 'text', inputMode, fullWidth, required, autoComplete, placeholder, maxLength, value, error, helperText, endAdornment, onChange, onBlur, ...rest }: CheckoutInputProps): JSX.Element {
-  return (
-    <TextField
-      label={label}
-      type={type}
-      size="small"
-      fullWidth={fullWidth}
-      required={required}
-      placeholder={placeholder}
-      value={value}
-      error={error}
-      helperText={helperText}
-      onChange={onChange}
-      onBlur={onBlur}
-      slotProps={{
+type OwnerState = Record<string, unknown>;
+type SlotProps = Record<string, unknown> | ((ownerState: OwnerState) => Record<string, unknown>) | undefined;
+
+/**
+ * `TextField`'s root, by name and with its `ownerState`: a theme's
+ * `components.MuiTextField` (`styleOverrides`, including functions reading
+ * `ownerState`, and `variants`) applies exactly as it did to `TextField`.
+ */
+const TextFieldRoot = styled(FormControl, {
+  name: 'MuiTextField',
+  slot: 'Root',
+  overridesResolver: (_props, styles) => styles.root,
+})<{ ownerState: OwnerState }>({});
+
+/** A theme's slot props may be a function of `ownerState`, as `useSlot` allows. */
+function slotPropsOf(slotProps: SlotProps, ownerState: OwnerState): Record<string, unknown> {
+  return (typeof slotProps === 'function' ? slotProps(ownerState) : slotProps) ?? {};
+}
+
+/** `TextField`'s `ownerState`, for the outlined, non-select field this slot is. */
+function ownerStateOf(props: TextFieldProps): OwnerState {
+  return {
+    ...props,
+    autoFocus: false,
+    color: props.color ?? 'primary',
+    disabled: props.disabled ?? false,
+    error: props.error ?? false,
+    fullWidth: props.fullWidth ?? false,
+    multiline: false,
+    required: props.required ?? false,
+    select: false,
+    variant: 'outlined',
+  };
+}
+
+/**
+ * The slot's own props, run through the theme's `MuiTextField` defaults the way
+ * `TextField` runs them (`useDefaultProps` is `useThemeProps` by another name).
+ */
+function useTextFieldProps({ label, type = 'text', inputMode, fullWidth, required, autoComplete, placeholder, maxLength, value, error, helperText, endAdornment, onChange, onBlur, ...rest }: CheckoutInputProps): TextFieldProps {
+  return useThemeProps({
+    name: 'MuiTextField',
+    props: {
+      label,
+      type,
+      size: 'small',
+      fullWidth,
+      required,
+      placeholder,
+      value,
+      error,
+      helperText,
+      onChange,
+      onBlur,
+      slotProps: {
         htmlInput: { inputMode, maxLength, autoComplete, 'data-testid': rest['data-testid'] },
         input: { endAdornment },
-      }}
-    />
+      },
+    } as TextFieldProps,
+  });
+}
+
+/**
+ * What `TextField` consumes by name rather than handing to its root. A key LIST
+ * rather than a destructure, which would bind every one of them only to drop it.
+ */
+const CONSUMED_BY_FIELD: ReadonlySet<string> = new Set([
+  'autoComplete', 'autoFocus', 'children', 'className', 'color', 'defaultValue', 'disabled', 'error',
+  'FormHelperTextProps', 'fullWidth', 'helperText', 'id', 'InputLabelProps', 'inputProps', 'InputProps',
+  'inputRef', 'label', 'maxRows', 'minRows', 'multiline', 'name', 'onBlur', 'onChange', 'onFocus',
+  'placeholder', 'required', 'rows', 'select', 'SelectProps', 'slotProps', 'slots', 'type', 'value',
+  'variant',
+]);
+
+/**
+ * The slot props as `TextField` resolves them: the legacy `InputProps`,
+ * `InputLabelProps`, `inputProps` and `FormHelperTextProps` first, then
+ * `slotProps` over them.
+ */
+function slotPropsFor(props: TextFieldProps): Record<string, SlotProps> {
+  return {
+    input: props.InputProps as SlotProps,
+    inputLabel: props.InputLabelProps as SlotProps,
+    htmlInput: props.inputProps as SlotProps,
+    formHelperText: props.FormHelperTextProps as SlotProps,
+    ...((props.slotProps ?? {}) as Record<string, SlotProps>),
+  };
+}
+
+/** The root: what `TextField` did not consume, then the props it hands the root by name. */
+function rootPropsOf(props: TextFieldProps, ownerState: OwnerState): Record<string, unknown> {
+  return {
+    ...Object.fromEntries(Object.entries(props).filter(([key]) => !CONSUMED_BY_FIELD.has(key))),
+    ownerState,
+    className: ['MuiTextField-root', (props.classes as { root?: string } | undefined)?.root, props.className]
+      .filter(Boolean)
+      .join(' '),
+    disabled: ownerState.disabled,
+    error: ownerState.error,
+    fullWidth: ownerState.fullWidth,
+    required: ownerState.required,
+    color: ownerState.color,
+    variant: 'outlined',
+  };
+}
+
+/** The input: the props `TextField` names, then the theme's and the slot's `input` slot props. */
+function inputPropsOf(props: TextFieldProps, ownerState: OwnerState, ids: { id: string; helperTextId?: string }): Record<string, unknown> {
+  const slots = slotPropsFor(props);
+  const shrink = slotPropsOf(slots.inputLabel, ownerState).shrink;
+  return {
+    'aria-describedby': ids.helperTextId,
+    autoComplete: props.autoComplete,
+    autoFocus: ownerState.autoFocus,
+    defaultValue: props.defaultValue,
+    fullWidth: ownerState.fullWidth,
+    name: props.name,
+    inputRef: props.inputRef,
+    onFocus: props.onFocus,
+    type: props.type,
+    value: props.value,
+    id: ids.id,
+    onBlur: props.onBlur,
+    onChange: props.onChange,
+    placeholder: props.placeholder,
+    inputProps: slotPropsOf(slots.htmlInput, ownerState),
+    label: props.label,
+    ...(shrink === undefined ? {} : { notched: shrink }),
+    ...slotPropsOf(slots.input, ownerState),
+  };
+}
+
+/**
+ * An outlined text field, composed from the parts MUI's `TextField` composes
+ * (FUT-3402). `TextField` itself imports `Select` unconditionally, and through
+ * it `Menu`, `MenuList`, `Popover` and `List`; this slot is in every host's
+ * checkout bundle whether or not the host fills it, so it paid for a dropdown
+ * it can never render.
+ *
+ * Same DOM and the same theme hooks — `defaultProps`, `styleOverrides`,
+ * `variants`, slot props — pinned by `default-input-parity.test.tsx`, with two
+ * deliberate exceptions: a theme default `variant` other than `outlined`, and
+ * `slots` replacing a part, are not honoured. Either would need the very
+ * components this slot exists to leave out; a host that wants them fills the
+ * `Input` slot.
+ */
+function DefaultInput(slotProps: CheckoutInputProps): JSX.Element {
+  const props = useTextFieldProps(slotProps);
+  const ownerState = ownerStateOf(props);
+  const generatedId = useId();
+  const id = props.id ?? generatedId;
+  const helperTextId = props.helperText ? `${id}-helper-text` : undefined;
+  const slots = slotPropsFor(props);
+  const { label, helperText } = props;
+  return (
+    <TextFieldRoot {...(rootPropsOf(props, ownerState) as { ownerState: OwnerState })}>
+      {label != null && label !== '' ? (
+        <InputLabel htmlFor={id} id={`${id}-label`} {...slotPropsOf(slots.inputLabel, ownerState)}>{label}</InputLabel>
+      ) : null}
+      <OutlinedInput {...inputPropsOf(props, ownerState, { id, helperTextId })} />
+      {helperText ? (
+        <FormHelperText id={helperTextId} {...slotPropsOf(slots.formHelperText, ownerState)}>{helperText}</FormHelperText>
+      ) : null}
+    </TextFieldRoot>
   );
 }