@12-apps/ui 6.2.0 → 6.3.0

package/src/components/form/CategorySelect/CategorySelect.types.ts

@@ -1,3 +1,4 @@
+import type { CategorySelectCopy } from "../../../copy";
 import type { SizeValue } from '../../../tokens/scales';
 
 /**
@@ -84,6 +85,8 @@ export interface CategorySelectBaseProps {
  * not reload on every tick.
  */
 export interface CategoryMultiSelectProps extends CategorySelectBaseProps {
+  /** The words this control renders. REQUIRED — no default copy. */
+  copy: CategorySelectCopy;
   mode?: 'multi';
   /** The APPLIED selection — subcategory ids. */
   value: string[];
@@ -93,6 +96,8 @@ export interface CategoryMultiSelectProps extends CategorySelectBaseProps {
 
 /** Single-select mode: the "move to…" picker. Choosing a row commits at once. */
 export interface CategorySingleSelectProps extends CategorySelectBaseProps {
+  /** The words this control renders. REQUIRED — no default copy. */
+  copy: CategorySelectCopy;
   mode: 'single';
   /** The chosen category or subcategory id, or `null`. */
   value: string | null;

package/src/components/form/CategorySelect/CategoryTrigger.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { CategorySelectCopy } from "../../../copy";
 import { Box } from '@mui/material';
 
 import { CaretGlyph } from './CategoryIcons';
@@ -11,6 +12,8 @@ import {
 } from './CategorySelect.styles';
 
 interface CategoryTriggerProps {
+  /** The words this renders. REQUIRED — this package ships no default copy. */
+  copy: CategorySelectCopy;
   /** Text shown when nothing is selected. */
   placeholder: string;
   /** Resolved label when there IS a selection (single mode shows "Pai › Filha"). */
@@ -46,6 +49,7 @@ export function CategoryTrigger({
   onClear,
   triggerRef,
   dataTestId,
+  copy,
 }: CategoryTriggerProps): React.JSX.Element {
   const hasSelection = Boolean(selectionLabel) || (count ?? 0) > 0;
   return (
@@ -86,7 +90,7 @@ export function CategoryTrigger({
           component="span"
           role="button"
           tabIndex={0}
-          aria-label="Limpar seleção"
+          aria-label={copy.clearSelection}
           data-testid={`${dataTestId}-clear-trigger`}
           sx={triggerClearSx}
           onClick={(event: React.MouseEvent) => {

package/src/components/form/CepField/CepField.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { CepFieldCopy } from "../../../copy";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { cepDigits, formatCep, isValidCep } from '@12-apps/forms-core';
@@ -8,13 +9,6 @@ import { FormControl, FormLabel, FormMessage } from '../Form';
 import { Input } from '../Input';
 import type { CepAddress, CepFieldProps, CepLookupStatus } from './CepField.types';
 
-/** What the user is told for each non-idle outcome. */
-const STATUS_TEXT: Record<Exclude<CepLookupStatus, 'idle'>, string> = {
-  loading: 'Buscando endereço…',
-  found: 'Endereço preenchido pelo CEP.',
-  notfound: 'CEP não encontrado — preencha o endereço manualmente.',
-};
-
 /** Everything {@link useCepLookup} needs, so the hook signature stays flat. */
 interface LookupOptions {
   digits: string;
@@ -103,17 +97,19 @@ function CepStatus({
   status,
   testId,
   suppressed,
+  copy,
 }: {
   status: CepLookupStatus;
   testId: string;
   suppressed: boolean;
+  copy: CepFieldCopy;
 }): React.ReactElement {
   const visible = !suppressed && status !== 'idle';
   return (
     <span id={`${testId}-status`} role="status" aria-live="polite">
       {visible && (
         <FormMessage error={status === 'notfound'} dataTestId={`${testId}-${status}`}>
-          {STATUS_TEXT[status as Exclude<CepLookupStatus, 'idle'>]}
+          {copy[status as Exclude<CepLookupStatus, 'idle'>]}
         </FormMessage>
       )}
     </span>
@@ -157,6 +153,7 @@ export function CepField({
   debounceMs = 500,
   name = 'postalCode',
   dataTestId,
+  copy,
 }: CepFieldProps): React.ReactElement {
   const testId = dataTestId ?? `cep-field-${name}`;
 
@@ -203,7 +200,7 @@ export function CepField({
           {error}
         </FormMessage>
       )}
-      <CepStatus status={status} testId={testId} suppressed={Boolean(error)} />
+      <CepStatus status={status} testId={testId} suppressed={Boolean(error)} copy={copy} />
     </FormControl>
   );
 }

package/src/components/form/CepField/CepField.types.ts

@@ -1,3 +1,4 @@
+import type { CepFieldCopy } from "../../../copy";
 /**
  * Types for {@link CepField} — the reusable CEP auto-completer.
  */
@@ -29,6 +30,8 @@ export interface CepAddress {
 export type CepLookupStatus = 'idle' | 'loading' | 'found' | 'notfound';
 
 export interface CepFieldProps {
+  /** The lookup status wording. REQUIRED — no default copy. */
+  copy: CepFieldCopy;
   /** Current field value. Masked (`01310-100`) or bare — the field re-masks. */
   value: string;
   /**

package/src/components/form/total-form/Fields/CategoryField.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { CategorySelectCopy } from "../../../../copy";
 import React from 'react';
 
 import { CategorySelect } from '../../CategorySelect';
@@ -8,6 +9,8 @@ import { useFormContext } from '../FormContext';
 
 /** Props for the `total-form` {@link CategoryField}. */
 export interface CategoryFieldProps {
+  /** The picker\'s words. REQUIRED — this package ships no default copy. */
+  copy: CategorySelectCopy;
   /** Field name; also the key into the form's values/errors. */
   name: string;
   /** The categories to choose from, flat, each carrying its `parentId`. */
@@ -36,12 +39,14 @@ export function CategoryField({
   label,
   placeholder,
   allowParentSelection = true,
+  copy,
 }: CategoryFieldProps): React.ReactElement {
   const { values, errors, setFieldValue } = useFormContext();
   const error = errors[name];
 
   return (
     <CategorySelect
+      copy={copy}
       mode="single"
       fullWidth
       label={label}

package/src/components/form/total-form/Fields/CepField.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { CepFieldCopy } from "../../../../copy";
 import React, { useCallback, useMemo, useRef } from 'react';
 
 import { CepField as BaseCepField, type CepAddress } from '../../CepField';
@@ -16,6 +17,8 @@ export type CepFills = Partial<Record<CepPart, string>>;
 
 /** Props for the `total-form` {@link CepField}. */
 export interface CepFieldProps {
+  /** The lookup status wording. REQUIRED — no default copy. */
+  copy: CepFieldCopy;
   /** Field name; also the key into the form's values/errors. */
   name: string;
   /** Optional visible label. Defaults to `CEP`. */
@@ -103,6 +106,7 @@ export function CepField({
   lookup,
   fills,
   debounceMs,
+  copy,
 }: CepFieldProps): React.ReactElement {
   const { values, errors, setFieldValue } = useFormContext();
   const { write, clearOwned } = useOwnedAutofill();
@@ -128,6 +132,7 @@ export function CepField({
 
   return (
     <BaseCepField
+      copy={copy}
       name={name}
       label={label}
       value={values[name] ?? ''}

package/src/components/layout/ContentToolbar/ContentToolbar.types.ts

@@ -258,6 +258,11 @@ export interface SavedViewsMenuProps<V extends SavedViewLike = SavedViewLike> {
   onToggleShare: (view: V) => void;
   onManageAll: () => void;
   /** Override any of the default (pt-BR) strings. */
-  labels?: Partial<SavedViewsLabels>;
+  /**
+   * Every word this menu renders. REQUIRED since FUT-760: it used to be
+   * `Partial<…>` over a pt-BR default, so a host that passed nothing shipped
+   * one product's Portuguese. `PT_BR_SAVED_VIEWS_LABELS` is that exact set.
+   */
+  labels: SavedViewsLabels;
   testIdPrefix?: string;
 }

package/src/components/layout/ContentToolbar/SavedViewsMenu.tsx

@@ -13,26 +13,6 @@ import type {
   SavedViewsMenuProps,
 } from './ContentToolbar.types';
 
-/** Default (pt-BR) strings; override any via the `labels` prop. */
-const DEFAULT_LABELS: SavedViewsLabels = {
-  trigger: 'Visões',
-  mainView: 'Visão principal',
-  pinned: 'Fixadas',
-  recent: 'Recentes',
-  empty: 'Nenhuma visão salva ainda.',
-  saveCurrent: '+ Salvar visão atual',
-  manageAll: 'Gerenciar visões',
-  apply: 'Aplicar',
-  setDefault: 'Definir como padrão',
-  pin: 'Fixar na barra lateral',
-  unpin: 'Desafixar',
-  share: 'Compartilhar com a equipe',
-  unshare: 'Tornar privada',
-  edit: 'Editar',
-  remove: 'Excluir',
-  defaultTag: 'Padrão',
-};
-
 /** How many non-pinned views show under "Recentes". */
 const RECENT_LIMIT = 5;
 
@@ -280,7 +260,7 @@ export function SavedViewsMenu<V extends SavedViewLike = SavedViewLike>({
     action();
     close();
   };
-  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const labels = labelOverrides;
   const pinned = views.filter((view) => view.pinned);
   const recent = views.filter((view) => !view.pinned).slice(0, RECENT_LIMIT);
 

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -328,7 +328,7 @@ const TableFilterRangeField = ({
   step,
   minPlaceholder = 'min',
   maxPlaceholder = 'max',
-  invalidLabel = 'O máximo deve ser maior ou igual ao mínimo.',
+  invalidLabel,
   testId,
 }: TableFilterRangeFieldProps): React.JSX.Element => {
   const invalid = isRangeInverted(value);

package/src/copy.ts

@@ -0,0 +1,103 @@
+/**
+ * The words the standalone components render, as REQUIRED host config
+ * (FUT-760).
+ *
+ * `@12-apps/ui` is the package EVERY host renders, so copy compiled in here
+ * reached every adopter of every other package too — the same leak as anywhere
+ * else, at the widest possible blast radius. Several of these components made
+ * it worse by taking the words as OPTIONAL props with pt-BR defaults, which
+ * reads as configurable right up until nobody configures it.
+ *
+ * The DataViews family has its own object (`DataViewsCopy`) threaded through a
+ * context, because nineteen files are one mounted surface. These six are
+ * mounted independently, so each takes what it renders.
+ */
+
+export interface SectionOnboardingCopy {
+  /** The button that begins the guided section. */
+  start: string;
+  /** The reveal toggle in the configured state, and its collapsed twin. */
+  edit: string;
+  collapse: string;
+}
+
+export interface ConfirmActionCopy {
+  /** The dismiss button every confirmation shares. */
+  cancel: string;
+  /** Shown when the action fails and the caller supplied no reason. */
+  defaultError: string;
+  /**
+   * The fallback body when the caller names no entity.
+   *
+   * A caller that DOES name one gets the host's own sentence — this package
+   * never guesses a noun for someone else's rows.
+   */
+  irreversible: string;
+}
+
+export interface CategorySelectCopy {
+  /**
+   * What categories are FOR, in the host's own terms.
+   *
+   * This used to read "Categorias organizam o cardápio e os filtros da loja" —
+   * a restaurant's menu, hard-coded into a generic picker. A host selling
+   * insurance policies got told about its cardápio.
+   */
+  purpose: string;
+  clearSelection: string;
+  /** The empty state, when the host has no categories at all. */
+  emptyTitle: string;
+  createCategory: string;
+  /**
+   * The search found nothing.
+   *
+   * Two of the four interpolate the term typed, so they are functions rather
+   * than strings with a placeholder to substitute: where the term sits in the
+   * sentence is the translator's call, not ours.
+   */
+  noResults: {
+    title: (query: string) => string;
+    hint: string;
+    clearSearch: string;
+    create: (query: string) => string;
+  };
+  /**
+   * The panel's two footers.
+   *
+   * `selectedCount` is a function because Portuguese agrees the participle with
+   * the count and English does not — the shape has to let a translator decide
+   * the whole sentence, not fill a slot in ours.
+   */
+  /** The search box above the list, and the chips beneath it. */
+  search: {
+    /** Two placeholders: a single-select picker offers no subcategories. */
+    placeholderSingle: string;
+    placeholderMulti: string;
+    clear: string;
+    removeChip(label: string): string;
+    /** The tray above the list, counting what is already picked. */
+    pinnedLabel(count: number): string;
+  };
+  footer: {
+    selectedCount(count: number): string;
+    clear: string;
+    /** The primary button, which reads `close` while the draft is unchanged. */
+    apply: string;
+    close: string;
+    /** The single-select footer: what to do, and the way out. */
+    singleHint: string;
+    cancel: string;
+  };
+}
+
+export interface CepFieldCopy {
+  loading: string;
+  found: string;
+  /** Keyed to match `CepLookupStatus` exactly, so the lookup can index it. */
+  notfound: string;
+}
+
+export interface TableFilterCopy {
+  /** A numeric range whose maximum is below its minimum. */
+  invalidRange: string;
+}

package/src/pt-BR.ts

@@ -0,0 +1,247 @@
+import type { DataViewsCopy } from "./components/data-display/DataViews/data-views-copy";
+import type { SavedViewsLabels } from "./components/layout/ContentToolbar/ContentToolbar.types";
+import type {
+  CategorySelectCopy,
+  CepFieldCopy,
+  ConfirmActionCopy,
+  SectionOnboardingCopy,
+  TableFilterCopy,
+} from "./copy";
+
+/**
+ * The pt-BR packs — NAMED constants a host passes by hand, never defaults.
+ *
+ * The filename is what exempts this file from the copy-portability gate:
+ * Portuguese may ship, it may not be silent. Every sentence is VERBATIM what
+ * the components used to render, so a host adopting these sees no change on
+ * screen — what changes is that the words are chosen in a diff.
+ */
+export const PT_BR_SECTION_ONBOARDING_COPY: SectionOnboardingCopy = {
+  edit: "Editar",
+  collapse: "Ocultar",
+  start: "Começar",
+};
+
+export const PT_BR_CONFIRM_ACTION_COPY: ConfirmActionCopy = {
+  cancel: "Cancelar",
+  defaultError: "Não foi possível concluir a ação. Tente novamente.",
+  irreversible: "Esta ação não pode ser desfeita.",
+};
+
+export const PT_BR_CATEGORY_SELECT_COPY: CategorySelectCopy = {
+  purpose: "Categorias organizam o cardápio e os filtros da loja.",
+  clearSelection: "Limpar seleção",
+  emptyTitle: "Nenhuma categoria ainda",
+  createCategory: "Criar categoria",
+  noResults: {
+    title: (query) => `Nada encontrado para “${query}”`,
+    hint: "Tente outro termo ou verifique a grafia.",
+    clearSearch: "Limpar busca",
+    create: (query) => `Criar “${query}”`,
+  },
+  search: {
+    placeholderSingle: "Buscar categoria…",
+    placeholderMulti: "Buscar categoria ou subcategoria",
+    clear: "Limpar busca",
+    removeChip: (label) => `Remover ${label}`,
+    pinnedLabel: (count) => `Selecionadas · ${count}`,
+  },
+  footer: {
+    selectedCount: (count) => `${count} selecionada${count === 1 ? "" : "s"}`,
+    clear: "Limpar",
+    apply: "Aplicar",
+    close: "Fechar",
+    singleHint: "Escolha uma categoria",
+    cancel: "Cancelar",
+  },
+};
+
+export const PT_BR_CEP_FIELD_COPY: CepFieldCopy = {
+  loading: "Buscando endereço…",
+  found: "Endereço preenchido pelo CEP.",
+  notfound: "CEP não encontrado — preencha o endereço manualmente.",
+};
+
+/**
+ * The saved-views dropdown's labels.
+ *
+ * Typed as the package's OWN `SavedViewsLabels` rather than a parallel shape:
+ * that interface already named every string, including the seven with no
+ * diacritics the copy gate could not see (`Aplicar`, `Fixar na barra lateral`,
+ * `Editar`…). The prop was `Partial<SavedViewsLabels>` with a pt-BR default —
+ * configurable in the type, inherited in practice.
+ */
+export const PT_BR_SAVED_VIEWS_LABELS: SavedViewsLabels = {
+  trigger: "Visões",
+  mainView: "Visão principal",
+  pinned: "Fixadas",
+  recent: "Recentes",
+  empty: "Nenhuma visão salva ainda.",
+  saveCurrent: "+ Salvar visão atual",
+  manageAll: "Gerenciar visões",
+  apply: "Aplicar",
+  setDefault: "Definir como padrão",
+  pin: "Fixar na barra lateral",
+  unpin: "Desafixar",
+  share: "Compartilhar com a equipe",
+  unshare: "Tornar privada",
+  edit: "Editar",
+  remove: "Excluir",
+  defaultTag: "Padrão",
+};
+
+export const PT_BR_TABLE_FILTER_COPY: TableFilterCopy = {
+  invalidRange: "O máximo deve ser maior ou igual ao mínimo.",
+};
+
+export const PT_BR_DATA_VIEWS_COPY: DataViewsCopy = {
+  savedViewsMenu: PT_BR_SAVED_VIEWS_LABELS,
+  confirmAction: PT_BR_CONFIRM_ACTION_COPY,
+  categorySelect: PT_BR_CATEGORY_SELECT_COPY,
+  board: {
+    countOnPage: (label, count) => `${label}: ${count} nesta página`,
+    onThisPage: (count) => `${count} nesta página`,
+    pageSum: (sum) => `Soma desta página: ${sum}`,
+    pageScopeNote:
+      "As contagens e somas abaixo referem-se apenas aos itens desta página.",
+  },
+  deleteView: {
+    title: "Excluir visão",
+    sharedWarning: "Esta visão está compartilhada — a equipe perderá o acesso a ela.",
+    rowsUnaffected: (entityLabel) =>
+      `${entityLabel} não são afetados; apenas o recorte salvo é removido.`,
+    confirm: "Excluir visão",
+  },
+  manageViews: {
+    title: "Gerenciar visões",
+    empty: "Nenhuma visão salva.",
+    defaultTag: "Padrão",
+    otherUserTag: "De outro usuário",
+    deleteTitle: "Excluir a visão salva?",
+    deleteBody: "Os filtros e colunas guardados nela são perdidos. Não é possível restaurar.",
+    deleteConfirm: "Excluir",
+  },
+  saveView: {
+    sharedDescription: "Qualquer pessoa da loja poderá abrir e usar esta visão.",
+    setDefaultTitle: "Definir como padrão",
+    setDefaultDescription: "Esta tela abre nesta visão em vez da Visão principal.",
+    previewHeading: "O que esta visão guarda",
+    previewUnchanged: "Nada foi alterado — esta visão ficará igual à Visão principal.",
+    sortRowLabel: "Ordenação",
+    saveFailed: "Não foi possível salvar a visão.",
+    titleEditing: "Editar visão",
+    titleCreating: "Salvar visão",
+    descriptionLabel: "Descrição — opcional",
+    descriptionPlaceholder: "Para que serve esta visão",
+    submitEditing: "Salvar alterações",
+    submitCreating: "Salvar visão",
+    nameLabel: "Nome",
+    cancel: "Cancelar",
+    pinnedTitle: "Fixar na barra lateral",
+    pinnedDescription: "Aparece como atalho no menu, abaixo desta tela.",
+    sharedTitle: "Compartilhar com a equipe",
+    namePlaceholder: "Ex.: Recusados no PIX desta semana",
+    previewFilters: "Filtros",
+    previewHiddenColumns: "Colunas ocultas",
+  },
+  columns: {
+    visibleCount: (visible, total) => `${visible} de ${total} visíveis`,
+    reset: "Padrão",
+    showAll: "Mostrar todas",
+  },
+  display: {
+    sortTab: "Ordenar",
+    columnsTab: "Colunas",
+    panelTab: "Exibição",
+    direction: "Direção",
+    layoutHints: {
+      table: "Colunas comparáveis, boa para varrer números.",
+      list: "Uma linha por item, com os dados principais.",
+      cards: "Blocos maiores, bom para poucos itens.",
+      board: "Colunas por etapa, para acompanhar o que está onde.",
+    },
+    densityHeadings: {
+      table: "Altura das linhas",
+      list: "Altura das linhas",
+      cards: "Cards por linha",
+      board: "Largura das colunas",
+    },
+    densityLabels: {
+      table: { compact: "Baixa", cozy: "Média", comfortable: "Alta" },
+      list: { compact: "Baixa", cozy: "Média", comfortable: "Alta" },
+      cards: { compact: "Muitos", cozy: "Médio", comfortable: "Poucos" },
+      board: { compact: "Estreita", cozy: "Média", comfortable: "Larga" },
+    },
+    boardUnavailable: "Esta tela não declara etapas, então não oferece quadro.",
+    densityUnavailableNarrow:
+      "Um card por linha nesta largura — a densidade volta em telas maiores.",
+    trigger: "Exibir",
+  },
+  export: {
+    formats: {
+      json: { label: "JSON (.json)", hint: "Para integrações" },
+    },
+    visibleColumns: (columnCount) => `${columnCount} colunas visíveis, na ordem atual`,
+    trigger: "Exportar",
+  },
+  grid: {
+    rowActions: "Ações",
+    bulkActions: (selectedCount) => `Ações (${selectedCount}) ▾`,
+  },
+  filters: {
+    moreFilters: (count) => `Mais filtros: ${count} sem espaço na barra`,
+    moreFiltersApplied: (count, appliedCount) =>
+      `Mais filtros: ${count} sem espaço na barra, ${appliedCount} aplicado(s)`,
+    overflowNote: "sem espaço na barra",
+    rangeEnd: "Até",
+    rangeInvalid: "O início precisa ser menor que o fim.",
+    rangePresets: {
+      hoje: "Hoje",
+      ontem: "Ontem",
+      semana: "Esta semana",
+      mes: "Este mês",
+      ano: "Este ano",
+    },
+    scopesLabel: "Situação",
+    panelTitle: "Filtros",
+    clear: "Limpar",
+    clearAll: "Limpar filtros",
+    clearRange: (label) => `Limpar ${label}`,
+    allOption: "Todas",
+    optionSearchPlaceholder: "Buscar…",
+    optionsEmpty: "Nenhum resultado",
+  },
+  selection: {
+    selectAllOnPage: "Selecionar todos nesta página",
+    clearSelection: "Limpar seleção",
+    selectAll: "Selecionar tudo",
+    onThisPage: (count) => `${count} nesta página`,
+    selectRow: "Selecionar",
+  },
+  nav: {
+    mainView: "Visão principal",
+    defaultTag: "Padrão",
+    viewOptions: (viewName) => `Opções de ${viewName}`,
+    emptyHint: "Nenhuma visão salva. Ajuste filtros, colunas ou ordenação e salve abaixo.",
+    setDefault: "Definir como padrão",
+    deleteView: "Excluir visão",
+    unsavedChanges: "Alterações não salvas",
+    label: "Visão",
+    update: "Atualizar visão",
+    save: "Salvar visão",
+    updateFailed: "Não foi possível atualizar a visão",
+    saveFailed: "Não foi possível salvar a alteração da visão.",
+    editView: "Renomear e editar",
+    pinToSidebar: "Fixar na barra lateral",
+    shareWithTeam: "Compartilhar com a equipe",
+  },
+  search: {
+    placeholder: "Buscar…",
+    allColumnsLabel: "Buscar em todas as colunas",
+    keywordPlaceholder: "Pressione Enter para filtrar",
+    open: "Buscar",
+    close: "Fechar busca",
+    clear: "Limpar busca",
+  },
+};
+

package/dist/chunk-62XQWGXU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/feedback/ConfirmAction/ConfirmAction.hooks.ts","../src/components/feedback/ConfirmAction/ConfirmAction.parts.tsx","../src/components/feedback/ConfirmAction/ConfirmAction.tsx","../src/components/feedback/ConfirmAction/with-confirmation.tsx","../src/components/feedback/ConfirmAction/ConfirmButton.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ConfirmHandler, UseConfirmActionResult } from './ConfirmAction.types';\n\n/** Used when the guarded action rejects and the caller supplied no wording. */\nexport const DEFAULT_ERROR_TEXT = 'Não foi possível concluir a ação. Tente novamente.';\n\n/**\n * What the popup says after a failed attempt.\n *\n * A rejection carrying a message wins: the server's sentence (\"esta categoria\n * ainda tem produtos vinculados\") is the one the operator can act on, and it is\n * strictly better than the generic fallback. Handlers that have nothing useful\n * to say reject with nothing and get `errorText`.\n */\nfunction failureMessage(cause: unknown, errorText: string): string {\n  if (cause instanceof Error && cause.message) return cause.message;\n  return errorText;\n}\n\n/**\n * The confirmation state machine, headless.\n *\n * It is the whole safety contract in one place, so every consumer gets the same\n * behaviour: the action runs ONLY from `confirm`, never from opening the popup;\n * a second confirm while the first is in flight is dropped (a double-click\n * cannot send two deletes); a rejection keeps the popup open carrying the\n * failure instead of closing over a write that never happened.\n */\nexport function useConfirmAction(\n  onConfirm: ConfirmHandler,\n  errorText: string = DEFAULT_ERROR_TEXT,\n): UseConfirmActionResult {\n  const [open, setOpen] = useState(false);\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  // `pending` is mirrored in a ref because the two guards that matter — drop a\n  // second confirm, ignore a cancel mid-flight — are read inside callbacks that\n  // must not be rebuilt on every state change. Reading the state variable there\n  // would leave a stale closure holding `false` for the whole in-flight window,\n  // which is exactly the double-submit this component exists to prevent.\n  const busy = useRef(false);\n\n  // The action can settle after the trigger has unmounted (a row deleted from\n  // under its own menu), so the settle path must not touch state by then.\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const request = useCallback((): void => {\n    setError(null);\n    setOpen(true);\n  }, []);\n\n  const cancel = useCallback((): void => {\n    // Inert mid-flight: the write has already left, and closing here would hide\n    // its outcome.\n    if (busy.current) return;\n    setOpen(false);\n    setError(null);\n  }, []);\n\n  const settle = useCallback((failure: string | null): void => {\n    busy.current = false;\n    if (!mounted.current) return;\n    setPending(false);\n    setError(failure);\n    if (!failure) setOpen(false);\n  }, []);\n\n  const confirm = useCallback((): void => {\n    if (busy.current) return;\n    busy.current = true;\n    setPending(true);\n    setError(null);\n    // The handler is invoked synchronously, exactly as a plain `onClick` would\n    // be — only the OUTCOME is awaited. The try/catch is what puts a handler\n    // that throws synchronously on the same failure path as one that returns a\n    // rejected promise.\n    try {\n      const result = onConfirm();\n      void Promise.resolve(result)\n        .then(() => settle(null))\n        .catch((cause: unknown) => settle(failureMessage(cause, errorText)));\n    } catch (cause) {\n      settle(failureMessage(cause, errorText));\n    }\n  }, [errorText, onConfirm, settle]);\n\n  return { open, pending, error, request, cancel, confirm };\n}\n","import { Alert, Stack, TextField, Typography } from '@mui/material';\nimport React, { type ReactNode } from 'react';\n\nimport { AlertDialog } from '../../data-display/AlertDialog';\n\nimport type {\n  ConfirmInitialFocus,\n  ConfirmOptions,\n  ConfirmTone,\n  UseConfirmActionResult,\n} from './ConfirmAction.types';\n\nconst DEFAULT_CANCEL_TEXT = 'Cancelar';\nconst DEFAULT_TEST_ID = 'confirm-action';\n\n/**\n * The popup's body: the row being acted on, then what happens to it.\n *\n * The NAME is rendered in its own right rather than woven into the sentence, so\n * it is there whatever the caller wrote — \"the popup names the specific entity\"\n * is the one thing that must not depend on each call site remembering to\n * mention it. A body with neither a name nor a description would leave the\n * operator with only the title to decide on, so a neutral fallback covers that.\n */\nfunction confirmBody(description: ReactNode, entityName?: string): ReactNode {\n  if (!entityName) return description ?? \"Esta ação não pode ser desfeita.\";\n  return (\n    <>\n      <Typography component=\"span\" sx={{ fontWeight: 600, display: \"block\" }}>\n        {entityName}\n      </Typography>\n      {description}\n    </>\n  );\n}\n\n/** Destructive dialogs open on Cancel; anything else opens on the confirm. */\nfunction resolveInitialFocus(\n  tone: ConfirmTone,\n  initialFocus?: ConfirmInitialFocus,\n): ConfirmInitialFocus {\n  if (initialFocus) return initialFocus;\n  return tone === 'destructive' ? 'cancel' : 'confirm';\n}\n\n/**\n * The type-to-confirm field. Rendered only when `typeToConfirm` is set, which\n * should be rare: it is the guard for actions with NO recovery path, where a\n * click is too cheap a gesture. Comparison is exact — trimmed of surrounding\n * whitespace only, so a trailing space from a paste does not read as a mismatch.\n */\nfunction TypeToConfirmField({\n  expected,\n  label,\n  value,\n  onChange,\n  disabled,\n  dataTestId,\n}: {\n  expected: string;\n  label?: string;\n  value: string;\n  onChange: (next: string) => void;\n  disabled: boolean;\n  dataTestId: string;\n}): React.ReactElement {\n  return (\n    <Stack spacing={1} sx={{ mt: 2 }}>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {label ?? `Digite \"${expected}\" para confirmar.`}\n      </Typography>\n      <TextField\n        size=\"small\"\n        value={value}\n        disabled={disabled}\n        onChange={(event) => onChange(event.target.value)}\n        // On the INPUT rather than the wrapper: a test id on MUI's TextField\n        // lands on the outer div, which is not the node a test can type into.\n        inputProps={{\n          'aria-label': label ?? `Digite ${expected} para confirmar`,\n          'data-testid': `${dataTestId}-type-to-confirm`,\n        }}\n      />\n    </Stack>\n  );\n}\n\nexport interface ConfirmActionDialogProps extends ConfirmOptions {\n  state: UseConfirmActionResult;\n}\n\n/**\n * The popup itself: an `AlertDialog` in its destructive skin, plus the two\n * things a bare AlertDialog has no opinion about — the failure the last attempt\n * produced (shown IN the dialog, which stays open, rather than closing over a\n * write that never landed) and the optional type-to-confirm gate.\n */\nexport function ConfirmActionDialog({\n  state,\n  title,\n  description,\n  entityName,\n  confirmText,\n  cancelText = DEFAULT_CANCEL_TEXT,\n  typeToConfirm,\n  typeToConfirmLabel,\n  tone = 'destructive',\n  initialFocus,\n  dataTestId = DEFAULT_TEST_ID,\n}: ConfirmActionDialogProps): React.ReactElement {\n  const [typed, setTyped] = React.useState('');\n\n  // Every fresh open starts from an empty field: carrying the previous answer\n  // over would hand the next delete a pre-satisfied gate.\n  React.useEffect(() => {\n    if (state.open) setTyped('');\n  }, [state.open]);\n\n  const gateUnmet = typeToConfirm !== undefined && typed.trim() !== typeToConfirm;\n\n  return (\n    <AlertDialog\n      open={state.open}\n      variant={tone === 'destructive' ? 'destructive' : 'default'}\n      title={title}\n      description={confirmBody(description, entityName)}\n      confirmText={confirmText}\n      cancelText={cancelText}\n      loading={state.pending}\n      confirmDisabled={gateUnmet}\n      initialFocus={resolveInitialFocus(tone, initialFocus)}\n      onConfirm={state.confirm}\n      onCancel={state.cancel}\n      onClose={state.cancel}\n      data-testid={dataTestId}\n    >\n      {state.error && (\n        <Alert severity=\"error\" sx={{ mt: 1 }} data-testid={`${dataTestId}-error`}>\n          {state.error}\n        </Alert>\n      )}\n      {typeToConfirm !== undefined && (\n        <TypeToConfirmField\n          expected={typeToConfirm}\n          label={typeToConfirmLabel}\n          value={typed}\n          onChange={setTyped}\n          disabled={state.pending}\n          dataTestId={dataTestId}\n        />\n      )}\n    </AlertDialog>\n  );\n}\n","import React from 'react';\n\nimport { useConfirmAction } from './ConfirmAction.hooks';\nimport { ConfirmActionDialog } from './ConfirmAction.parts';\nimport type { ConfirmActionProps } from './ConfirmAction.types';\n\n/**\n * Wraps any trigger in a confirmation popup.\n *\n * The trigger is a render prop rather than a fixed element, so the same guard\n * covers a button, a dropdown item, an icon or a table row action without this\n * component knowing what any of them look like. The guarded handler runs ONLY\n * after the operator confirms:\n *\n * ```tsx\n * <ConfirmAction\n *   title=\"Excluir a categoria?\"\n *   entityName={row.name}\n *   description=\"Ela vai para a lixeira e pode ser restaurada de lá.\"\n *   confirmText=\"Excluir\"\n *   onConfirm={() => deleteCategoryAction({ tenantSlug, id: row.id })}\n * >\n *   {(request) => <Button color=\"danger\" onClick={request}>Excluir</Button>}\n * </ConfirmAction>\n * ```\n *\n * For the common case — an existing button whose `onClick` is already the\n * destructive write — reach for {@link withConfirmation} instead, which needs\n * no restructuring of the call site.\n */\nexport function ConfirmAction({\n  onConfirm,\n  children,\n  ...options\n}: ConfirmActionProps): React.ReactElement {\n  const state = useConfirmAction(onConfirm, options.errorText);\n\n  return (\n    <>\n      {children(state.request, { pending: state.pending })}\n      <ConfirmActionDialog state={state} {...options} />\n    </>\n  );\n}\n\nConfirmAction.displayName = 'ConfirmAction';\n","import React from 'react';\nimport type { ComponentType } from 'react';\n\nimport { useConfirmAction } from './ConfirmAction.hooks';\nimport { ConfirmActionDialog } from './ConfirmAction.parts';\nimport type {\n  ConfirmHandler,\n  ConfirmOptions,\n  ConfirmableComponent,\n  ConfirmableProps,\n  WithConfirmationProps,\n} from './ConfirmAction.types';\n\n/**\n * Merge the HOC's baked-in defaults with the per-instance `confirm` prop.\n * Returns null when the instance opts out (`confirm={false}`) or when neither\n * side supplies the two fields a confirmation cannot be written without — the\n * question and the verb. A null result means \"render the plain component\",\n * which keeps the wrapped export usable in harmless contexts.\n */\nfunction resolveOptions(\n  defaults: Partial<ConfirmOptions> | undefined,\n  instance: Partial<ConfirmOptions> | false | undefined,\n): ConfirmOptions | null {\n  if (instance === false) return null;\n  const merged = { ...defaults, ...instance };\n  if (!merged.title || !merged.confirmText) return null;\n  return { ...merged, title: merged.title, confirmText: merged.confirmText };\n}\n\n/**\n * Adapt the wrapped component's `onClick` into a {@link ConfirmHandler}.\n *\n * The click argument is dropped (see `ConfirmHandler`) and the return value is\n * narrowed: a promise is handed back so the popup can hold its pending state\n * until the write settles, anything else becomes `undefined`. A component with\n * no `onClick` has nothing to guard, so confirming is a no-op.\n */\nfunction useGuardedHandler(onClick: ConfirmableProps['onClick']): ConfirmHandler {\n  return React.useCallback((): void | Promise<unknown> => {\n    const result = onClick?.();\n    return result instanceof Promise ? result : undefined;\n  }, [onClick]);\n}\n\n/**\n * Give any click-driven component a confirmation popup, without restructuring\n * the call site.\n *\n * The wrapped component's own `onClick` becomes the GUARDED action: clicking\n * now opens the popup, and the handler runs only if the operator confirms. It\n * inherits the whole contract from `useConfirmAction` — cancel sends nothing, a\n * returned promise holds the popup in its pending state so a double-click\n * cannot fire two writes, and a rejection keeps the popup open carrying the\n * error.\n *\n * ```tsx\n * const ConfirmButton = withConfirmation(Button);\n *\n * <ConfirmButton\n *   color=\"danger\"\n *   onClick={() => deleteCategoryAction({ tenantSlug, id: row.id })}\n *   confirm={{\n *     title: \"Excluir a categoria?\",\n *     entityName: row.name,\n *     description: \"Ela vai para a lixeira e pode ser restaurada de lá.\",\n *     confirmText: \"Excluir\",\n *   }}\n * >\n *   Excluir\n * </ConfirmButton>\n * ```\n *\n * Bake the wording in once when the same guard repeats — `withConfirmation(Button,\n * { confirmText: \"Excluir\" })` — and let each instance override what differs.\n * `confirm={false}` falls through to the plain component.\n *\n * Refs are not forwarded: the HOC renders a fragment (trigger + popup), so there\n * is no single node to hand back. Wrap a component that needs a ref at its own\n * call site with {@link ConfirmAction} instead.\n */\nexport function withConfirmation<P extends ConfirmableProps>(\n  Wrapped: ComponentType<P>,\n  defaults?: Partial<ConfirmOptions>,\n): ConfirmableComponent<P> {\n  function WithConfirmation(props: P & WithConfirmationProps): React.ReactElement {\n    const { confirm, onClick } = props;\n    const options = resolveOptions(defaults, confirm);\n    const state = useConfirmAction(useGuardedHandler(onClick), options?.errorText);\n\n    // `confirm` is ours and must not reach the DOM — an unknown attribute on a\n    // <button> is a React warning at every render. The cast is the standard HOC\n    // one: TypeScript cannot prove `Omit<P & X, 'confirm'>` is still a `P`.\n    const { confirm: _confirm, ...rest } = props;\n    const forwarded = rest as unknown as P;\n\n    if (!options) return <Wrapped {...forwarded} />;\n\n    return (\n      <>\n        <Wrapped {...forwarded} onClick={state.request} />\n        <ConfirmActionDialog state={state} {...options} />\n      </>\n    );\n  }\n\n  WithConfirmation.displayName = `withConfirmation(${\n    Wrapped.displayName ?? Wrapped.name ?? 'Component'\n  })`;\n\n  return WithConfirmation;\n}\n","import { Button } from '../../form/Button';\nimport type { ButtonProps } from '../../form/Button/Button.types';\n\nimport { withConfirmation } from './with-confirmation';\nimport type { ConfirmableComponent } from './ConfirmAction.types';\n\n/**\n * The library `Button`, already wrapped — the shape most call sites want.\n *\n * Adding the guard to an existing button is then an import swap plus the\n * `confirm` prop; the button's own props (colour, size, icon) are untouched.\n * The baked-in defaults are only the wording and tone every destructive\n * confirmation shares, and each instance can still override them.\n */\nexport const ConfirmButton: ConfirmableComponent<ButtonProps> = withConfirmation<ButtonProps>(\n  Button,\n  { cancelText: 'Cancelar', tone: 'destructive' },\n);\n"],"mappings":"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","names":["Fragment","jsx","jsxs","React","Fragment","jsx","jsxs","React"]}