@12-apps/ui 6.1.0 → 6.3.0

package/src/components/data-display/CardKit/use-row-confirm.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState, type JSX } from 'react';
+
+import type { ConfirmActionCopy } from '../../../copy';
+import { ConfirmActionDialog, useConfirmAction } from '../../feedback/ConfirmAction';
+
+/**
+ * How the popup should read for the rows about to be acted on.
+ *
+ * Built from the SELECTION rather than from a single row, because the same
+ * guard covers a bulk action: "Delete 4 categories?" and "Delete the category
+ * Drinks?" are the same question asked of a different-sized selection — and an
+ * operator who multi-selected by mistake is exactly who this popup is for.
+ */
+export interface RowConfirmCopy {
+  title: string;
+  description: string;
+  /** Echoed into the popup; omit for a multi-row selection the title covers. */
+  entityName?: string;
+  /** The VERB. Required, never defaulted — see {@link useRowConfirm}. */
+  confirmText: string;
+  /** Override where the word "cancel" would mean the ACTION itself. */
+  cancelText?: string;
+  /** Require typing this before the confirm enables — for the unrecoverable few. */
+  typeToConfirm?: string;
+}
+
+interface RowConfirmOptions<T> {
+  /**
+   * The destructive write, over the whole selection. Called ONLY after the
+   * operator confirms; throw (or reject) to keep the popup open carrying the
+   * message.
+   */
+  write: (rows: T[]) => Promise<unknown>;
+  /** The wording, given the selection. */
+  describe: (rows: T[]) => RowConfirmCopy;
+  dataTestId: string;
+  /** Shown when `write` fails without a message of its own. */
+  errorText: string;
+  /** The dialog's own words. REQUIRED — this package ships no default copy. */
+  copy: ConfirmActionCopy;
+}
+
+export interface RowConfirm<T> {
+  /** Hand this a grid action's `rows`: it opens the popup and writes nothing. */
+  request: (rows: T[]) => void;
+  /** Render next to the grid. */
+  dialog: JSX.Element | null;
+}
+
+/**
+ * Confirmation for a grid's `RowAction` — the per-row kebab entry and the
+ * multi-select actions menu both, since they run the same handler.
+ *
+ * The SELECTION is held while the popup is open, so the write sees exactly the
+ * rows the operator was looking at when they were asked. Re-reading the grid's
+ * live selection at confirm time is the bug this shape avoids: the list can
+ * refresh underneath an open dialog.
+ *
+ * `confirmText` is required and comes from `describe`, with no default. A verb
+ * defaulted in the origin's language reads as finished to the next adopter
+ * right up until an operator sees it — and `ConfirmOptions` already refuses to
+ * default one for the same reason.
+ */
+export function useRowConfirm<T>({
+  write,
+  describe,
+  dataTestId,
+  errorText,
+  copy,
+}: RowConfirmOptions<T>): RowConfirm<T> {
+  const [target, setTarget] = useState<T[] | null>(null);
+
+  const state = useConfirmAction(async () => {
+    if (!target) return;
+    await write(target);
+    setTarget(null);
+  }, errorText);
+
+  const request = (rows: T[]): void => {
+    // An empty selection has nothing to confirm — asking would be a popup about
+    // nothing, and confirming it would write nothing.
+    if (rows.length === 0) return;
+    setTarget(rows);
+    state.request();
+  };
+
+  return {
+    request,
+    dialog: target ? (
+      <ConfirmActionDialog state={state}
+        copy={copy} {...describe(target)} dataTestId={dataTestId} />
+    ) : null,
+  };
+}

package/src/components/data-display/DataViews/DataViewsBoard.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
@@ -134,6 +135,7 @@ function BoardColumnHeader({
   sum: string | null;
   testId: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 0.25 }}>
       <Box sx={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1 }}>
@@ -146,10 +148,10 @@ function BoardColumnHeader({
           <Box
             component="span"
             data-testid={`${testId}-count`}
-            aria-label={`${label}: ${count} nesta página`}
+            aria-label={copy.board.countOnPage(label, count)}
             sx={{ color: "text.secondary", whiteSpace: "nowrap" }}
           >
-            {count} nesta página
+            {copy.board.onThisPage(count)}
           </Box>
         </Text>
       </Box>
@@ -158,7 +160,7 @@ function BoardColumnHeader({
           <Box
             component="span"
             data-testid={`${testId}-sum`}
-            aria-label={`Soma desta página: ${sum}`}
+            aria-label={copy.board.pageSum(sum)}
             sx={{ color: "text.secondary" }}
           >
             {sum}
@@ -283,6 +285,7 @@ export function DataViewsBoard<T extends Record<string, unknown>>({
   cardScale,
   dataTestId,
 }: DataViewsBoardProps<T>): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const columns = groupRows(rows, board);
   const width = Math.max(MIN_COLUMN_WIDTH, Math.round(BASE_COLUMN_WIDTH * cardScale));
   const testId = dataTestId ? `${dataTestId}-board` : "data-views-board";
@@ -290,7 +293,7 @@ export function DataViewsBoard<T extends Record<string, unknown>>({
     <Box sx={{ mt: 1.5 }}>
       <Text variant="caption" as="p">
         <Box component="span" data-testid={`${testId}-scale-note`} sx={{ color: "text.secondary" }}>
-          As contagens e somas abaixo referem-se apenas aos itens desta página.
+          {copy.board.pageScopeNote}
         </Box>
       </Text>
       <Box

package/src/components/data-display/DataViews/DeleteViewDialog.tsx

@@ -12,6 +12,7 @@
  * records are untouched, and warns separately when the view is SHARED, because
  * that deletion takes it from everyone rather than from one person.
  */
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Dialog, DialogContent } from "../../feedback/Dialog";
 import { Button } from "../../form/Button";
 import { Stack } from "../../../mui/Stack";
@@ -33,12 +34,13 @@ export function DeleteViewDialog({
   entityLabel?: string;
   testIdPrefix?: string;
 }): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
   if (!view) return null;
   return (
     <Dialog
       open
       onClose={onClose}
-      title="Excluir visão"
+      title={copy.deleteView.title}
       size="sm"
       showCloseButton
       dataTestId={`${testIdPrefix}-delete-modal`}
@@ -51,12 +53,12 @@ export function DeleteViewDialog({
 
           {view.shared && (
             <Text variant="body" color="warning" as="p" data-testid={`${testIdPrefix}-delete-shared`}>
-              Esta visão está compartilhada — a equipe perderá o acesso a ela.
+              {copy.deleteView.sharedWarning}
             </Text>
           )}
 
           <Text variant="body" color="secondary" as="p">
-            {entityLabel} não são afetados; apenas o recorte salvo é removido.
+            {copy.deleteView.rowsUnaffected(entityLabel)}
           </Text>
 
           <Stack direction="row" spacing={1.5} sx={{ justifyContent: "flex-end", pt: 0.5 }}>
@@ -73,7 +75,7 @@ export function DeleteViewDialog({
               onClick={() => onConfirm(view)}
               dataTestId={`${testIdPrefix}-delete-confirm`}
             >
-              Excluir visão
+              {copy.deleteView.confirm}
             </Button>
           </Stack>
         </Stack>

package/src/components/data-display/DataViews/ManageViewsDialog.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { ConfirmButton } from "../../feedback/ConfirmAction";
+import { useMemo } from "react";
+
+import type { ConfirmActionCopy } from "../../../copy";
+import { useDataViewsCopy } from "./data-views-copy-context";
+import { createConfirmButton } from "../../feedback/ConfirmAction";
 import { Dialog, DialogContent } from "../../feedback/Dialog";
 import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
@@ -10,6 +14,8 @@ import { Text } from "../../typography/Text";
 import type { SavedViewSummary } from "./data-views-types";
 
 interface ManageViewsDialogProps {
+  /** The confirm dialog's words. REQUIRED — this package ships no default copy. */
+  confirmCopy: ConfirmActionCopy;
   open: boolean;
   onClose: () => void;
   views: SavedViewSummary[];
@@ -19,11 +25,12 @@ interface ManageViewsDialogProps {
 }
 
 function tags(view: SavedViewSummary): string[] {
+  const copy = useDataViewsCopy();
   const list: string[] = [];
-  if (view.isDefault) list.push("Padrão");
+  if (view.isDefault) list.push(copy.manageViews.defaultTag);
   if (view.pinned) list.push("Fixada");
   if (view.shared) list.push("Compartilhada");
-  if (!view.isOwner) list.push("De outro usuário");
+  if (!view.isOwner) list.push(copy.manageViews.otherUserTag);
   return list;
 }
 
@@ -37,12 +44,19 @@ function ManageViewRow({
   onEdit,
   onDelete,
   testIdPrefix,
+  confirmCopy,
 }: {
   view: SavedViewSummary;
   onEdit: (view: SavedViewSummary) => void;
   onDelete: (view: SavedViewSummary) => void;
   testIdPrefix: string;
+  confirmCopy: ConfirmActionCopy;
 }): React.JSX.Element {
+  const ConfirmButton = useMemo(
+    () => createConfirmButton(confirmCopy, confirmCopy.defaultError),
+    [confirmCopy],
+  );
+  const copy = useDataViewsCopy();
   return (
     <Stack
       direction="row"
@@ -83,15 +97,15 @@ function ManageViewRow({
             color="danger"
             onClick={() => onDelete(view)}
             confirm={{
-              title: 'Excluir a visão salva?',
+              title: copy.manageViews.deleteTitle,
               entityName: view.name,
               description:
-                'Os filtros e colunas guardados nela são perdidos. Não é possível restaurar.',
-              confirmText: 'Excluir',
+                copy.manageViews.deleteBody,
+              confirmText: copy.manageViews.deleteConfirm,
             }}
             dataTestId={`${testIdPrefix}-manage-delete-${view.id}`}
           >
-            Excluir
+            {copy.manageViews.deleteConfirm}
           </ConfirmButton>
         </Stack>
       )}
@@ -106,12 +120,14 @@ export function ManageViewsDialog({
   onEdit,
   onDelete,
   testIdPrefix = "views",
+  confirmCopy,
 }: ManageViewsDialogProps): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Dialog
       open={open}
       onClose={onClose}
-      title="Gerenciar visões"
+      title={copy.manageViews.title}
       size="md"
       showCloseButton
       dataTestId={`${testIdPrefix}-manage-dialog`}
@@ -120,11 +136,11 @@ export function ManageViewsDialog({
         <Stack spacing={1.5} data-testid={`${testIdPrefix}-manage-list`}>
           {views.length === 0 ? (
             <Text variant="body" as="p">
-              Nenhuma visão salva.
+              {copy.manageViews.empty}
             </Text>
           ) : (
             views.map((view) => (
-              <ManageViewRow
+              <ManageViewRow confirmCopy={confirmCopy}
                 key={view.id}
                 view={view}
                 onEdit={onEdit}

package/src/components/data-display/DataViews/SaveViewModal.tsx

@@ -5,6 +5,7 @@ import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
 import StarOutlineRoundedIcon from "@mui/icons-material/StarOutlineRounded";
 import { useState } from "react";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Dialog, DialogContent } from "../../feedback/Dialog";
 import { Button } from "../../form/Button";
 import { Input } from "../../form/Input";
@@ -14,6 +15,7 @@ import { Stack } from "../../../mui/Stack";
 import { Text } from "../../typography/Text";
 
 import { describeViewState } from "./data-views-preview";
+import { PreviewBox } from "./save-view-preview";
 import type {
   DataViewColumn,
   DataViewState,
@@ -119,28 +121,29 @@ function FlagsSwitches({
   setIsDefault,
   testIdPrefix,
 }: FlagsSwitchesProps): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Stack spacing={0}>
       <FlagRow
         icon={<PushPinOutlinedIcon fontSize="small" />}
-        title="Fixar na barra lateral"
-        description="Aparece como atalho no menu, abaixo desta tela."
+        title={copy.saveView.pinnedTitle}
+        description={copy.saveView.pinnedDescription}
         checked={pinned}
         onChange={setPinned}
         testId={`${testIdPrefix}-save-pinned`}
       />
       <FlagRow
         icon={<GroupOutlinedIcon fontSize="small" />}
-        title="Compartilhar com a equipe"
-        description="Qualquer pessoa da loja poderá abrir e usar esta visão."
+        title={copy.saveView.sharedTitle}
+        description={copy.saveView.sharedDescription}
         checked={shared}
         onChange={setShared}
         testId={`${testIdPrefix}-save-shared`}
       />
       <FlagRow
         icon={<StarOutlineRoundedIcon fontSize="small" />}
-        title="Definir como padrão"
-        description="Esta tela abre nesta visão em vez da Visão principal."
+        title={copy.saveView.setDefaultTitle}
+        description={copy.saveView.setDefaultDescription}
         checked={isDefault}
         onChange={setIsDefault}
         testId={`${testIdPrefix}-save-default`}
@@ -149,70 +152,6 @@ function FlagsSwitches({
   );
 }
 
-interface PreviewBoxProps {
-  preview: { filters: string[]; columns: string[]; sort: string[] };
-  testIdPrefix: string;
-}
-
-/** One "label — value" line of the summary. */
-function SummaryRow({
-  label,
-  items,
-  testId,
-}: {
-  label: string;
-  items: string[];
-  testId: string;
-}): React.JSX.Element | null {
-  if (items.length === 0) return null;
-  return (
-    <Box sx={{ display: "flex", gap: 1.5 }} data-testid={testId}>
-      <Text variant="caption" as="span">
-        <Box component="span" sx={{ width: 116, flexShrink: 0, color: "text.secondary" }}>
-          {label}
-        </Box>
-      </Text>
-      <Text variant="caption" as="span">
-        <Box component="span" sx={{ minWidth: 0, flex: 1 }}>
-          {items.join(", ")}
-        </Box>
-      </Text>
-    </Box>
-  );
-}
-
-function PreviewBox({ preview, testIdPrefix }: PreviewBoxProps): React.JSX.Element {
-  const empty =
-    preview.filters.length === 0 && preview.columns.length === 0 && preview.sort.length === 0;
-  return (
-    <Box sx={{ p: 1.5, borderRadius: 1.5, bgcolor: "action.hover", border: (theme) => `1px solid ${theme.palette.divider}` }}>
-      <Text variant="caption" as="p">
-        <Box
-          component="span"
-          sx={{ display: "block", mb: 1, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600, color: "text.disabled" }}
-        >
-          O que esta visão guarda
-        </Box>
-      </Text>
-      {empty ? (
-        // Saving is still allowed — an operator may be naming the default on
-        // purpose — but it should not be a surprise afterwards.
-        <Text variant="caption" as="p">
-          <Box component="span" sx={{ color: "warning.main", lineHeight: 1.6 }} data-testid={`${testIdPrefix}-preview-empty`}>
-            Nada foi alterado — esta visão ficará igual à Visão principal.
-          </Box>
-        </Text>
-      ) : (
-        <Stack spacing={0.75}>
-          <SummaryRow label="Filtros" items={preview.filters} testId={`${testIdPrefix}-preview-filters`} />
-          <SummaryRow label="Colunas ocultas" items={preview.columns} testId={`${testIdPrefix}-preview-columns`} />
-          <SummaryRow label="Ordenação" items={preview.sort} testId={`${testIdPrefix}-preview-sort`} />
-        </Stack>
-      )}
-    </Box>
-  );
-}
-
 interface SaveViewFormState {
   name: string;
   description: string;
@@ -248,6 +187,7 @@ function useSaveViewForm(
   editing: SavedViewSummary | null | undefined,
   onSave: (payload: SaveViewPayload) => Promise<void> | void,
 ): SaveViewFormState {
+  const copy = useDataViewsCopy();
   const initial = seedForm(editing);
   const [name, setName] = useState(initial.name);
   const [description, setDescription] = useState(initial.description);
@@ -267,7 +207,7 @@ function useSaveViewForm(
     try {
       await onSave({ name: name.trim(), description: description.trim(), shared, pinned, isDefault });
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "Não foi possível salvar a visão.");
+      setError(cause instanceof Error ? cause.message : copy.saveView.saveFailed);
     } finally {
       setSaving(false);
     }
@@ -295,6 +235,38 @@ function useSaveViewForm(
  * share / default flags, and previews the filters, visible columns, and sort the
  * view will store. Used for both create and edit.
  */
+/**
+ * The dialog's two buttons.
+ *
+ * Cancel first, primary last: the confirming action sits where the eye lands
+ * at the end of the dialog, not before the way out.
+ */
+function FormFooter({
+  editing,
+  canSave,
+  onSubmit,
+  onClose,
+  testIdPrefix,
+}: {
+  editing: SaveViewModalProps<never>["editing"];
+  canSave: boolean;
+  onSubmit: () => void;
+  onClose: () => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  const copy = useDataViewsCopy();
+  return (
+    <Stack direction="row" spacing={1.5} sx={{ justifyContent: "flex-end" }}>
+      <Button variant="text" color="neutral" onClick={onClose} dataTestId={`${testIdPrefix}-save-cancel`}>
+        {copy.saveView.cancel}
+      </Button>
+      <Button onClick={onSubmit} disabled={!canSave} dataTestId={`${testIdPrefix}-save-submit`}>
+        {editing ? copy.saveView.submitEditing : copy.saveView.submitCreating}
+      </Button>
+    </Stack>
+  );
+}
+
 export function SaveViewModal<T extends Record<string, unknown>>({
   open,
   onClose,
@@ -305,6 +277,7 @@ export function SaveViewModal<T extends Record<string, unknown>>({
   onSave,
   testIdPrefix = "view",
 }: SaveViewModalProps<T>): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const form = useSaveViewForm(editing, onSave);
   const preview = describeViewState(currentState, fields, columns);
 
@@ -312,7 +285,7 @@ export function SaveViewModal<T extends Record<string, unknown>>({
     <Dialog
       open={open}
       onClose={onClose}
-      title={editing ? "Editar visão" : "Salvar visão"}
+      title={editing ? copy.saveView.titleEditing : copy.saveView.titleCreating}
       size="sm"
       showCloseButton
       dataTestId={`${testIdPrefix}-save-modal`}
@@ -322,8 +295,8 @@ export function SaveViewModal<T extends Record<string, unknown>>({
           <Input
             size="sm"
             fullWidth
-            label="Nome"
-            placeholder="Ex.: Recusados no PIX desta semana"
+            label={copy.saveView.nameLabel}
+            placeholder={copy.saveView.namePlaceholder}
             value={form.name}
             onChange={(event) => form.setName(event.target.value)}
             data-testid={`${testIdPrefix}-save-name`}
@@ -331,8 +304,8 @@ export function SaveViewModal<T extends Record<string, unknown>>({
           <Input
             size="sm"
             fullWidth
-            label="Descrição — opcional"
-            placeholder="Para que serve esta visão"
+            label={copy.saveView.descriptionLabel}
+            placeholder={copy.saveView.descriptionPlaceholder}
             value={form.description}
             onChange={(event) => form.setDescription(event.target.value)}
             data-testid={`${testIdPrefix}-save-description`}
@@ -356,20 +329,13 @@ export function SaveViewModal<T extends Record<string, unknown>>({
             </Text>
           )}
 
-          {/* Cancel first, primary last: the confirming action sits where the
-              eye lands at the end of the dialog, not before the way out. */}
-          <Stack direction="row" spacing={1.5} sx={{ justifyContent: "flex-end" }}>
-            <Button variant="text" color="neutral" onClick={onClose} dataTestId={`${testIdPrefix}-save-cancel`}>
-              Cancelar
-            </Button>
-            <Button
-              onClick={() => void form.submit()}
-              disabled={!form.canSave}
-              dataTestId={`${testIdPrefix}-save-submit`}
-            >
-              {editing ? "Salvar alterações" : "Salvar visão"}
-            </Button>
-          </Stack>
+          <FormFooter
+            editing={editing}
+            canSave={form.canSave}
+            onSubmit={() => void form.submit()}
+            onClose={onClose}
+            testIdPrefix={testIdPrefix}
+          />
         </Stack>
       </DialogContent>
     </Dialog>

package/src/components/data-display/DataViews/base-card.tsx

@@ -22,6 +22,7 @@ import {
   type CardSurfaceProps,
 } from "./card-surface";
 import { CARD_ASPECT_RATIOS, type CardAspectRatio } from "./data-views-types";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 export interface BaseCardProps extends CardSurfaceProps {
   /** Extra body content below the caption (chips, meta). Optional. */
@@ -127,6 +128,7 @@ function CardOverlays({
   checkboxTestId,
   menu,
 }: Pick<BaseCardProps, "selected" | "onToggleSelect" | "checkboxTestId" | "menu">): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <>
       {onToggleSelect && (
@@ -138,7 +140,7 @@ function CardOverlays({
             onClick={(event) => event.stopPropagation()}
             size="small"
             data-testid={checkboxTestId}
-            aria-label="Selecionar"
+            aria-label={copy.selection.selectRow}
           />
         </Box>
       )}

package/src/components/data-display/DataViews/base-list-card-gutters.tsx

@@ -7,6 +7,7 @@ import { Checkbox } from "../../form/Checkbox";
 import { Box } from "../../../mui/Box";
 
 import { DragHandle, useDragItem } from "./data-views-drag";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 /**
  * THE THREE GUTTERS AT THE HEAD OF A ROW — the disclosure chevron, the drag grip
@@ -72,6 +73,7 @@ export function SelectSlot({
   onToggleSelect?: (event?: React.MouseEvent) => void;
   testId?: string;
 }): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
   if (!selectable) return reserve ? <Box data-slot="select" /> : null;
   return (
     // z-index 1: above the stretched link, or the anchor swallows the click.
@@ -88,7 +90,7 @@ export function SelectSlot({
         }}
         size="small"
         data-testid={testId}
-        aria-label="Selecionar"
+        aria-label={copy.selection.selectRow}
       />
     </Box>
   );

package/src/components/data-display/DataViews/data-views-bar-controls.tsx

@@ -15,6 +15,7 @@ import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
 import { Tooltip } from "@mui/material";
 
 import { Box } from "../../../mui/Box";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 /**
  * "Limpar" — one gesture back to the unfiltered list.
@@ -38,6 +39,7 @@ export function ClearAllControl({
   compact: boolean;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   // No border, no fill. Every other control on this row is an outlined pill
   // because it OPENS something; this one is an escape hatch, and giving it the
   // same weight made it read as a sixth filter. Quiet until hovered.
@@ -47,7 +49,7 @@ export function ClearAllControl({
       type="button"
       onClick={onClearAll}
       data-testid={`${testIdPrefix}-clear-all`}
-      aria-label="Limpar filtros"
+      aria-label={copy.filters.clearAll}
       sx={{
         display: "inline-flex",
         alignItems: "center",
@@ -66,10 +68,10 @@ export function ClearAllControl({
       }}
     >
       <FilterAltOffRoundedIcon sx={{ fontSize: 16 }} />
-      {!compact && <Box component="span">Limpar</Box>}
+      {!compact && <Box component="span">{copy.filters.clear}</Box>}
     </Box>
   );
-  return compact ? <Tooltip title="Limpar filtros">{button}</Tooltip> : button;
+  return compact ? <Tooltip title={copy.filters.clearAll}>{button}</Tooltip> : button;
 }
 
 /**
@@ -91,13 +93,14 @@ export function CloseSearchControl({
   onClose: () => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
-    <Tooltip title="Fechar busca">
+    <Tooltip title={copy.search.close}>
       <Box
         component="button"
         type="button"
         onClick={onClose}
-        aria-label="Fechar busca"
+        aria-label={copy.search.close}
         data-testid={`${testIdPrefix}-search-close`}
         sx={{
           display: "inline-flex",

package/src/components/data-display/DataViews/data-views-category-pill.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { CategorySelect } from "../../form/CategorySelect";
 import { MultiSelectDropdown } from "../../layout/ContentToolbar";
 
@@ -65,10 +66,12 @@ export function PillControl<T extends Record<string, unknown>>({
   testIdPrefix,
   layout = "pill",
 }: PillControlProps<T>): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const testId = `${testIdPrefix}-filter-${fieldId}`;
   if (pill.control === "category") {
     return (
       <CategorySelect
+        copy={copy.categorySelect}
         placeholder={pill.label}
         label={layout === "stacked" ? pill.label : undefined}
         fullWidth={layout === "stacked"}
@@ -86,10 +89,10 @@ export function PillControl<T extends Record<string, unknown>>({
       selected={new Set(selected)}
       onToggle={(value, checked) => onTogglePill(fieldId, value, checked)}
       onClear={() => onClearField(fieldId)}
-      allLabel="Todas"
+      allLabel={copy.filters.allOption}
       searchable={pill.searchEnabled ? true : undefined}
-      searchPlaceholder="Buscar…"
-      noResultsLabel="Nenhum resultado"
+      searchPlaceholder={copy.filters.optionSearchPlaceholder}
+      noResultsLabel={copy.filters.optionsEmpty}
       layout={layout}
       onOpenChange={onOpenChange}
       data-testid={testId}