@12-apps/ui 1.0.0 → 1.3.0

package/src/components/feedback/ConfirmAction/ConfirmAction.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { useConfirmAction } from './ConfirmAction.hooks';
+import { ConfirmActionDialog } from './ConfirmAction.parts';
+import type { ConfirmActionProps } from './ConfirmAction.types';
+
+/**
+ * Wraps any trigger in a confirmation popup.
+ *
+ * The trigger is a render prop rather than a fixed element, so the same guard
+ * covers a button, a dropdown item, an icon or a table row action without this
+ * component knowing what any of them look like. The guarded handler runs ONLY
+ * after the operator confirms:
+ *
+ * ```tsx
+ * <ConfirmAction
+ *   title="Excluir a categoria?"
+ *   entityName={row.name}
+ *   description="Ela vai para a lixeira e pode ser restaurada de lá."
+ *   confirmText="Excluir"
+ *   onConfirm={() => deleteCategoryAction({ tenantSlug, id: row.id })}
+ * >
+ *   {(request) => <Button color="danger" onClick={request}>Excluir</Button>}
+ * </ConfirmAction>
+ * ```
+ *
+ * For the common case — an existing button whose `onClick` is already the
+ * destructive write — reach for {@link withConfirmation} instead, which needs
+ * no restructuring of the call site.
+ */
+export function ConfirmAction({
+  onConfirm,
+  children,
+  ...options
+}: ConfirmActionProps): React.ReactElement {
+  const state = useConfirmAction(onConfirm, options.errorText);
+
+  return (
+    <>
+      {children(state.request, { pending: state.pending })}
+      <ConfirmActionDialog state={state} {...options} />
+    </>
+  );
+}
+
+ConfirmAction.displayName = 'ConfirmAction';

package/src/components/feedback/ConfirmAction/ConfirmAction.types.ts

@@ -0,0 +1,111 @@
+import type { ComponentType, ReactNode } from 'react';
+
+/**
+ * How much the confirmation should shout. `destructive` paints the dialog and
+ * its confirm button in the error colour and moves the initial focus onto
+ * Cancel, so a stray Enter cannot complete a delete.
+ */
+export type ConfirmTone = 'destructive' | 'default';
+
+/** Which button owns focus when the dialog opens. */
+export type ConfirmInitialFocus = 'confirm' | 'cancel';
+
+/**
+ * Everything the confirmation popup needs to say. `title` and `confirmText` are
+ * required on purpose: a confirm whose button reads "OK" tells the operator
+ * nothing about what is about to happen, so the verb is never defaulted.
+ */
+export interface ConfirmOptions {
+  /** The question, e.g. `Excluir a categoria?`. */
+  title: string;
+  /**
+   * The consequence, in the operator's words. Prefer saying whether the action
+   * can be undone — the recycle bin recovers a soft delete, nothing recovers a
+   * purge. Falls back to a neutral sentence built from `entityName`.
+   */
+  description?: ReactNode;
+  /** The specific row being acted on, echoed into the dialog so it names a thing. */
+  entityName?: string;
+  /** The confirm button's label. Use the VERB ("Excluir"), never "OK". */
+  confirmText: string;
+  /** The cancel button's label. Defaults to `Cancelar`. */
+  cancelText?: string;
+  /**
+   * When set, the confirm button stays disabled until the operator types this
+   * exact string. For the handful of actions with no recovery path at all
+   * (permanent purge, suspending a live store), a click is too cheap.
+   */
+  typeToConfirm?: string;
+  /** Label above the type-to-confirm field. Defaults to a sentence naming the text. */
+  typeToConfirmLabel?: string;
+  /** Defaults to `destructive` — this component exists for destructive actions. */
+  tone?: ConfirmTone;
+  /** Defaults to `cancel` for the destructive tone, `confirm` otherwise. */
+  initialFocus?: ConfirmInitialFocus;
+  /** Shown inside the dialog when the action rejects; the dialog stays open. */
+  errorText?: string;
+  /** Root test id; the dialog's parts derive theirs from it. */
+  dataTestId?: string;
+}
+
+/**
+ * The action being guarded. A returned promise keeps the dialog open in its
+ * pending state until it settles, so the operator sees the write finish and
+ * cannot fire it twice.
+ *
+ * It takes no arguments deliberately: the click that opened the popup is long
+ * over by the time the operator confirms, and holding its synthetic event
+ * across that gap hands the handler a target that may no longer be in the
+ * document.
+ */
+export type ConfirmHandler = () => void | Promise<unknown>;
+
+/** The confirmation state machine returned by `useConfirmAction`. */
+export interface UseConfirmActionResult {
+  /** True while the popup is open. */
+  open: boolean;
+  /** True while the confirmed action is in flight. */
+  pending: boolean;
+  /** The failure message from the last attempt, or null. */
+  error: string | null;
+  /** Open the popup (this is what the trigger's click does). */
+  request: () => void;
+  /** Dismiss without running anything. No-op while pending. */
+  cancel: () => void;
+  /** Run the guarded action. No-op while pending. */
+  confirm: () => void;
+}
+
+/**
+ * `<ConfirmAction>`'s props: the options, the guarded action, and a render prop
+ * for the trigger. The render prop receives the opener so any element can be
+ * the trigger — a button, a menu item, an icon.
+ */
+export interface ConfirmActionProps extends ConfirmOptions {
+  onConfirm: ConfirmHandler;
+  children: (request: () => void, state: { pending: boolean }) => ReactNode;
+}
+
+/**
+ * The minimum a component must accept to be wrappable by `withConfirmation`:
+ * some click handler. The signature is deliberately at its widest so that any
+ * button-shaped component qualifies — `MouseEventHandler<HTMLButtonElement>`,
+ * `MouseEventHandler<HTMLAnchorElement>` and a bare `() => void` all satisfy it,
+ * where naming one concrete element type would exclude the others.
+ */
+export interface ConfirmableProps {
+  onClick?: (...args: never[]) => unknown;
+}
+
+/**
+ * The prop `withConfirmation` adds to the wrapped component. Pass the options
+ * to guard the click; pass `false` (or nothing, when the HOC has no defaults)
+ * to fall through to the plain component — the escape hatch for the same button
+ * used in a context where the action is harmless.
+ */
+export interface WithConfirmationProps {
+  confirm?: Partial<ConfirmOptions> | false;
+}
+
+/** The component `withConfirmation` returns. */
+export type ConfirmableComponent<P> = ComponentType<P & WithConfirmationProps>;

package/src/components/feedback/ConfirmAction/ConfirmButton.tsx

@@ -0,0 +1,18 @@
+import { Button } from '../../form/Button';
+import type { ButtonProps } from '../../form/Button/Button.types';
+
+import { withConfirmation } from './with-confirmation';
+import type { ConfirmableComponent } from './ConfirmAction.types';
+
+/**
+ * The library `Button`, already wrapped — the shape most call sites want.
+ *
+ * Adding the guard to an existing button is then an import swap plus the
+ * `confirm` prop; the button's own props (colour, size, icon) are untouched.
+ * The baked-in defaults are only the wording and tone every destructive
+ * confirmation shares, and each instance can still override them.
+ */
+export const ConfirmButton: ConfirmableComponent<ButtonProps> = withConfirmation<ButtonProps>(
+  Button,
+  { cancelText: 'Cancelar', tone: 'destructive' },
+);

package/src/components/feedback/ConfirmAction/__tests__/confirm-action.test.tsx

@@ -0,0 +1,288 @@
+/**
+ * The safety contract, asserted at the surface an operator actually touches.
+ *
+ * Every case here is a way the guard could fail OPEN — the write leaving before
+ * anyone confirmed it, or leaving twice. A confirmation that merely renders is
+ * worth nothing; what matters is that nothing happens until the confirm button
+ * is pressed, and that it then happens exactly once.
+ */
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { Button } from '../../../form/Button';
+import { ConfirmAction, withConfirmation } from '../index';
+
+afterEach(cleanup);
+
+const OPTIONS = {
+  title: 'Excluir a categoria?',
+  description: 'Ela vai para a lixeira e pode ser restaurada de lá.',
+  confirmText: 'Excluir',
+};
+
+/** The dialog's buttons, by the test ids `AlertDialog` derives from ours. */
+const confirmButton = (): HTMLElement => screen.getByTestId('confirm-action-confirm-button');
+const cancelButton = (): HTMLElement => screen.getByTestId('confirm-action-cancel-button');
+const trigger = (): HTMLElement => screen.getByRole('button', { name: 'Excluir' });
+
+function renderConfirmAction(
+  onConfirm: () => void | Promise<unknown>,
+  options: Record<string, unknown> = {},
+): void {
+  render(
+    <ConfirmAction {...OPTIONS} {...options} onConfirm={onConfirm}>
+      {(request) => (
+        <button type="button" onClick={request}>
+          Excluir
+        </button>
+      )}
+    </ConfirmAction>,
+  );
+}
+
+describe('ConfirmAction', () => {
+  it('opens the popup without running the action', () => {
+    const onConfirm = vi.fn();
+    renderConfirmAction(onConfirm);
+
+    fireEvent.click(trigger());
+
+    expect(screen.getByText('Excluir a categoria?')).toBeInTheDocument();
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it('runs nothing when the operator cancels', async () => {
+    const onConfirm = vi.fn();
+    renderConfirmAction(onConfirm);
+
+    fireEvent.click(trigger());
+    fireEvent.click(cancelButton());
+
+    expect(onConfirm).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
+    });
+  });
+
+  it('runs the action once the operator confirms', async () => {
+    const onConfirm = vi.fn();
+    renderConfirmAction(onConfirm);
+
+    fireEvent.click(trigger());
+    fireEvent.click(confirmButton());
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
+    });
+  });
+
+  it('sends one write when the confirm button is double-clicked', () => {
+    // The write is held open so both clicks land inside the in-flight window —
+    // the exact race a bare onClick would turn into two DELETEs. The resolver
+    // lives on a container because the flakiness gate forbids reassigning a
+    // closed-over binding from inside a stub.
+    const inFlight: { resolve: () => void } = { resolve: () => undefined };
+    const onConfirm = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          inFlight.resolve = resolve;
+        }),
+    );
+    renderConfirmAction(onConfirm);
+
+    fireEvent.click(trigger());
+    fireEvent.click(confirmButton());
+    fireEvent.click(confirmButton());
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    inFlight.resolve();
+  });
+
+  it('disables the confirm while the write is in flight', async () => {
+    const inFlight: { resolve: () => void } = { resolve: () => undefined };
+    const onConfirm = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          inFlight.resolve = resolve;
+        }),
+    );
+    renderConfirmAction(onConfirm);
+
+    fireEvent.click(trigger());
+    fireEvent.click(confirmButton());
+
+    await waitFor(() => {
+      expect(confirmButton()).toBeDisabled();
+    });
+    inFlight.resolve();
+  });
+
+  it('keeps the popup open, carrying the error, when the action fails', async () => {
+    // The server's sentence is the one the operator can act on, so a rejection
+    // carrying a message beats the generic fallback.
+    const onConfirm = vi.fn(() =>
+      Promise.reject(new Error('Esta categoria ainda tem produtos vinculados.')),
+    );
+    renderConfirmAction(onConfirm);
+
+    fireEvent.click(trigger());
+    fireEvent.click(confirmButton());
+
+    await waitFor(() => {
+      expect(screen.getByTestId('confirm-action-error')).toHaveTextContent(
+        'Esta categoria ainda tem produtos vinculados.',
+      );
+    });
+    expect(screen.getByText('Excluir a categoria?')).toBeInTheDocument();
+  });
+
+  it('falls back to the configured wording when the rejection says nothing', async () => {
+    const onConfirm = vi.fn(() => Promise.reject(new Error('')));
+    renderConfirmAction(onConfirm, { errorText: 'Não foi possível excluir a categoria.' });
+
+    fireEvent.click(trigger());
+    fireEvent.click(confirmButton());
+
+    await waitFor(() => {
+      expect(screen.getByTestId('confirm-action-error')).toHaveTextContent(
+        'Não foi possível excluir a categoria.',
+      );
+    });
+  });
+
+  it('recovers from a failure: a second confirm can still run', async () => {
+    // `busy` must be released on the failure path too, or the popup is left
+    // holding an error it can never be retried out of.
+    const attempts = { count: 0 };
+    const onConfirm = vi.fn(() => {
+      attempts.count += 1;
+      return attempts.count === 1 ? Promise.reject(new Error('rede')) : Promise.resolve();
+    });
+    renderConfirmAction(onConfirm);
+
+    fireEvent.click(trigger());
+    fireEvent.click(confirmButton());
+    await waitFor(() => {
+      expect(screen.getByTestId('confirm-action-error')).toBeInTheDocument();
+    });
+
+    fireEvent.click(confirmButton());
+    expect(onConfirm).toHaveBeenCalledTimes(2);
+    await waitFor(() => {
+      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
+    });
+  });
+
+  it('announces as an alertdialog named by its title and described by its body', () => {
+    // `alertdialog`, not `dialog`: this interrupts what the operator was doing
+    // and will not go away until answered, which is what makes a screen reader
+    // read the message out on open instead of just the dialog's name. MUI
+    // hardcodes role="dialog", so the override has to keep working.
+    renderConfirmAction(vi.fn());
+    fireEvent.click(trigger());
+
+    const dialog = screen.getByRole('alertdialog');
+    expect(dialog).toHaveAccessibleName('Excluir a categoria?');
+    expect(dialog).toHaveAccessibleDescription(
+      /Ela vai para a lixeira e pode ser restaurada de lá./,
+    );
+  });
+
+  it('opens with focus on Cancel, so a stray Enter cannot delete', async () => {
+    renderConfirmAction(vi.fn());
+
+    fireEvent.click(trigger());
+
+    await waitFor(() => {
+      expect(cancelButton()).toHaveFocus();
+    });
+  });
+
+  it('holds the confirm disabled until the exact text is typed', async () => {
+    const onConfirm = vi.fn();
+    renderConfirmAction(onConfirm, { typeToConfirm: 'Bebidas' });
+
+    fireEvent.click(trigger());
+    const field = screen.getByTestId('confirm-action-type-to-confirm');
+    expect(confirmButton()).toBeDisabled();
+
+    fireEvent.change(field, { target: { value: 'Bebida' } });
+    expect(confirmButton()).toBeDisabled();
+
+    fireEvent.change(field, { target: { value: 'Bebidas' } });
+    expect(confirmButton()).toBeEnabled();
+
+    fireEvent.click(confirmButton());
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
+    });
+  });
+
+  it('starts each open from an empty type-to-confirm field', async () => {
+    renderConfirmAction(vi.fn(), { typeToConfirm: 'Bebidas' });
+
+    fireEvent.click(trigger());
+    fireEvent.change(screen.getByTestId('confirm-action-type-to-confirm'), {
+      target: { value: 'Bebidas' },
+    });
+    fireEvent.click(cancelButton());
+    await waitFor(() => {
+      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
+    });
+
+    fireEvent.click(trigger());
+    expect(screen.getByTestId('confirm-action-type-to-confirm')).toHaveValue('');
+    expect(confirmButton()).toBeDisabled();
+  });
+});
+
+describe('withConfirmation', () => {
+  const ConfirmButton = withConfirmation(Button);
+
+  it("guards the wrapped component's own onClick", async () => {
+    const onClick = vi.fn();
+    render(
+      <ConfirmButton onClick={onClick} confirm={OPTIONS}>
+        Excluir
+      </ConfirmButton>,
+    );
+
+    fireEvent.click(trigger());
+    expect(onClick).not.toHaveBeenCalled();
+
+    fireEvent.click(confirmButton());
+    expect(onClick).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(screen.queryByText('Excluir a categoria?')).not.toBeInTheDocument();
+    });
+  });
+
+  it('falls through to the plain component when confirm is false', () => {
+    const onClick = vi.fn();
+    render(
+      <ConfirmButton onClick={onClick} confirm={false}>
+        Excluir
+      </ConfirmButton>,
+    );
+
+    fireEvent.click(trigger());
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    // A COUNT rather than an absence assertion: the popup was never rendered
+    // here, so there is no prior presence to wait for — which is exactly the
+    // distinction the flakiness rule exists to enforce.
+    expect(screen.queryAllByTestId('confirm-action')).toHaveLength(0);
+  });
+
+  it('does not leak its own confirm prop onto the DOM node', () => {
+    render(
+      <ConfirmButton onClick={vi.fn()} confirm={OPTIONS}>
+        Excluir
+      </ConfirmButton>,
+    );
+
+    expect(trigger()).not.toHaveAttribute('confirm');
+  });
+});

package/src/components/feedback/ConfirmAction/index.ts

@@ -0,0 +1,16 @@
+export { ConfirmAction } from './ConfirmAction';
+export { ConfirmButton } from './ConfirmButton';
+export { DEFAULT_ERROR_TEXT, useConfirmAction } from './ConfirmAction.hooks';
+export { ConfirmActionDialog } from './ConfirmAction.parts';
+export { withConfirmation } from './with-confirmation';
+export type {
+  ConfirmActionProps,
+  ConfirmHandler,
+  ConfirmInitialFocus,
+  ConfirmOptions,
+  ConfirmTone,
+  ConfirmableComponent,
+  ConfirmableProps,
+  UseConfirmActionResult,
+  WithConfirmationProps,
+} from './ConfirmAction.types';

package/src/components/feedback/ConfirmAction/with-confirmation.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import type { ComponentType } from 'react';
+
+import { useConfirmAction } from './ConfirmAction.hooks';
+import { ConfirmActionDialog } from './ConfirmAction.parts';
+import type {
+  ConfirmHandler,
+  ConfirmOptions,
+  ConfirmableComponent,
+  ConfirmableProps,
+  WithConfirmationProps,
+} from './ConfirmAction.types';
+
+/**
+ * Merge the HOC's baked-in defaults with the per-instance `confirm` prop.
+ * Returns null when the instance opts out (`confirm={false}`) or when neither
+ * side supplies the two fields a confirmation cannot be written without — the
+ * question and the verb. A null result means "render the plain component",
+ * which keeps the wrapped export usable in harmless contexts.
+ */
+function resolveOptions(
+  defaults: Partial<ConfirmOptions> | undefined,
+  instance: Partial<ConfirmOptions> | false | undefined,
+): ConfirmOptions | null {
+  if (instance === false) return null;
+  const merged = { ...defaults, ...instance };
+  if (!merged.title || !merged.confirmText) return null;
+  return { ...merged, title: merged.title, confirmText: merged.confirmText };
+}
+
+/**
+ * Adapt the wrapped component's `onClick` into a {@link ConfirmHandler}.
+ *
+ * The click argument is dropped (see `ConfirmHandler`) and the return value is
+ * narrowed: a promise is handed back so the popup can hold its pending state
+ * until the write settles, anything else becomes `undefined`. A component with
+ * no `onClick` has nothing to guard, so confirming is a no-op.
+ */
+function useGuardedHandler(onClick: ConfirmableProps['onClick']): ConfirmHandler {
+  return React.useCallback((): void | Promise<unknown> => {
+    const result = onClick?.();
+    return result instanceof Promise ? result : undefined;
+  }, [onClick]);
+}
+
+/**
+ * Give any click-driven component a confirmation popup, without restructuring
+ * the call site.
+ *
+ * The wrapped component's own `onClick` becomes the GUARDED action: clicking
+ * now opens the popup, and the handler runs only if the operator confirms. It
+ * inherits the whole contract from `useConfirmAction` — cancel sends nothing, a
+ * returned promise holds the popup in its pending state so a double-click
+ * cannot fire two writes, and a rejection keeps the popup open carrying the
+ * error.
+ *
+ * ```tsx
+ * const ConfirmButton = withConfirmation(Button);
+ *
+ * <ConfirmButton
+ *   color="danger"
+ *   onClick={() => deleteCategoryAction({ tenantSlug, id: row.id })}
+ *   confirm={{
+ *     title: "Excluir a categoria?",
+ *     entityName: row.name,
+ *     description: "Ela vai para a lixeira e pode ser restaurada de lá.",
+ *     confirmText: "Excluir",
+ *   }}
+ * >
+ *   Excluir
+ * </ConfirmButton>
+ * ```
+ *
+ * Bake the wording in once when the same guard repeats — `withConfirmation(Button,
+ * { confirmText: "Excluir" })` — and let each instance override what differs.
+ * `confirm={false}` falls through to the plain component.
+ *
+ * Refs are not forwarded: the HOC renders a fragment (trigger + popup), so there
+ * is no single node to hand back. Wrap a component that needs a ref at its own
+ * call site with {@link ConfirmAction} instead.
+ */
+export function withConfirmation<P extends ConfirmableProps>(
+  Wrapped: ComponentType<P>,
+  defaults?: Partial<ConfirmOptions>,
+): ConfirmableComponent<P> {
+  function WithConfirmation(props: P & WithConfirmationProps): React.ReactElement {
+    const { confirm, onClick } = props;
+    const options = resolveOptions(defaults, confirm);
+    const state = useConfirmAction(useGuardedHandler(onClick), options?.errorText);
+
+    // `confirm` is ours and must not reach the DOM — an unknown attribute on a
+    // <button> is a React warning at every render. The cast is the standard HOC
+    // one: TypeScript cannot prove `Omit<P & X, 'confirm'>` is still a `P`.
+    const { confirm: _confirm, ...rest } = props;
+    const forwarded = rest as unknown as P;
+
+    if (!options) return <Wrapped {...forwarded} />;
+
+    return (
+      <>
+        <Wrapped {...forwarded} onClick={state.request} />
+        <ConfirmActionDialog state={state} {...options} />
+      </>
+    );
+  }
+
+  WithConfirmation.displayName = `withConfirmation(${
+    Wrapped.displayName ?? Wrapped.name ?? 'Component'
+  })`;
+
+  return WithConfirmation;
+}

package/src/components/feedback/Dialog/Dialog.styles.ts

@@ -1,6 +1,7 @@
 import type { SxProps, Theme } from '@mui/material';
 import { alpha, keyframes } from '@mui/material';
 
+import { dynamicViewportHeight } from '../../../utils/viewport';
 import type { DialogProps } from './Dialog.types';
 
 /**
@@ -133,7 +134,8 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
         borderRadius: 0,
         margin: 0,
         width: '100vw',
-        height: '100vh',
+        // `100dvh`, not `100vh` — see `dynamicViewportHeight`.
+        ...dynamicViewportHeight('height'),
         maxWidth: 'none',
         maxHeight: 'none',
         ...decorations,
@@ -144,7 +146,7 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
         borderRadius: `${radius}px 0 0 ${radius}px`,
         margin: 0,
         width: maxWidthOf(opts.size),
-        height: '100vh',
+        ...dynamicViewportHeight('height'),
         maxHeight: 'none',
         position: 'absolute' as const,
         right: 0,

package/src/components/feedback/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { Close as CloseIcon } from '@mui/icons-material';
+import CloseIcon from '@mui/icons-material/Close';
 import {
   Backdrop,
   Box,
@@ -199,6 +199,30 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
   );
 };
 
+/**
+ * Top padding for a body that sits directly under the title.
+ *
+ * MUI zeroes it there (`.MuiDialogTitle-root + &` on a non-`dividers` content),
+ * assuming the title's own bottom padding is the whole gap. That assumption
+ * breaks for a body opening with an outlined field: a filled field floats its
+ * label ABOVE the input's border box, and `DialogContent` is `overflow-y: auto`
+ * — a clipping box — so the label gets sliced in half (FUT-544: "Tipo" in the
+ * "Novo insumo" dialog).
+ *
+ * Reserve the overhang rather than restore the full 24px: the title already
+ * contributes its bottom padding, so a shrunk label's `translate(…, -9px)` is
+ * all that is missing. 12px clears it and leaves the gap visually tight.
+ */
+const TITLED_BODY_PADDING_TOP = 1.5;
+
+/**
+ * `.MuiDialogTitle-root + &` is `(0,2,0)`-specific and a plain `sx` entry is
+ * `(0,1,0)`, so the padding above only survives the cascade by naming the class
+ * again — `(0,3,0)`. Scoped to the title-following case so an untitled dialog
+ * keeps MUI's roomier default.
+ */
+const TITLED_BODY_SELECTOR = '.MuiDialogTitle-root + &.MuiDialogContent-root';
+
 export const DialogContent: React.FC<DialogContentProps> = ({
   children,
   dividers = false,
@@ -211,6 +235,7 @@ export const DialogContent: React.FC<DialogContentProps> = ({
       dividers={dividers}
       sx={{
         padding: dense ? 1.5 : 3,
+        [TITLED_BODY_SELECTOR]: { paddingTop: TITLED_BODY_PADDING_TOP },
         '&.MuiDialogContent-dividers': {
           borderTop: dividers ? '1px solid' : 'none',
           borderBottom: dividers ? '1px solid' : 'none',