sumup-oss · sirineJ · Jan 16, 2025 · Jan 15, 2025 · Jan 15, 2025 · Jan 16, 2025
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Refactored the Modal, Popover, Toggletip, DateInput, SidePanel and SideNavigation components to leverage the internal Dialog component for improved consistency and maintainability.
@@ -488,6 +488,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
           animationDuration={isMobile ? animationDuration : 0}
           aria-labelledby={headlineId}
           style={dialogStyles}
+          locale={locale}
           closeButtonLabel={closeCalendarButtonLabel}
         >
           {() => (

@@ -3,7 +3,6 @@
   "monthInputLabel": "Месец",
   "dayInputLabel": "Ден",
   "openCalendarButtonLabel": "Промяна на дата",
-  "closeCalendarButtonLabel": "Затваряне на календар",
   "applyDateButtonLabel": "Прилагане на дата",
   "clearDateButtonLabel": "Изчистване на дата"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Měsíc",
   "dayInputLabel": "Den",
   "openCalendarButtonLabel": "Změnit datum",
-  "closeCalendarButtonLabel": "Zavřít kalendář",
   "applyDateButtonLabel": "Použít datum",
   "clearDateButtonLabel": "Vymazat datum"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Måned",
   "dayInputLabel": "Dag",
   "openCalendarButtonLabel": "Skift dato",
-  "closeCalendarButtonLabel": "Luk kalender",
   "applyDateButtonLabel": "Anvend dato",
   "clearDateButtonLabel": "Slet dato"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Monat",
   "dayInputLabel": "Tag",
   "openCalendarButtonLabel": "Datum ändern",
-  "closeCalendarButtonLabel": "Kalender schließen",
   "applyDateButtonLabel": "Datum anwenden",
   "clearDateButtonLabel": "Datum löschen"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Monat",
   "dayInputLabel": "Tag",
   "openCalendarButtonLabel": "Datum ändern",
-  "closeCalendarButtonLabel": "Kalender schließen",
   "applyDateButtonLabel": "Datum anwenden",
   "clearDateButtonLabel": "Datum löschen"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Monat",
   "dayInputLabel": "Tag",
   "openCalendarButtonLabel": "Datum ändern",
-  "closeCalendarButtonLabel": "Kalender schließen",
   "applyDateButtonLabel": "Datum anwenden",
   "clearDateButtonLabel": "Datum löschen"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Monat",
   "dayInputLabel": "Tag",
   "openCalendarButtonLabel": "Datum ändern",
-  "closeCalendarButtonLabel": "Kalender schließen",
   "applyDateButtonLabel": "Datum anwenden",
   "clearDateButtonLabel": "Datum löschen"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Μήνας",
   "dayInputLabel": "Ημέρα",
   "openCalendarButtonLabel": "Αλλαγή ημερομηνίας",
-  "closeCalendarButtonLabel": "Κλείσιμο ημερολογίου",
   "applyDateButtonLabel": "Εφαρμογή ημερομηνίας",
   "clearDateButtonLabel": "Εκκαθάριση ημερομηνίας"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Μήνας",
   "dayInputLabel": "Ημέρα",
   "openCalendarButtonLabel": "Αλλαγή ημερομηνίας",
-  "closeCalendarButtonLabel": "Κλείσιμο ημερολογίου",
   "applyDateButtonLabel": "Εφαρμογή ημερομηνίας",
   "clearDateButtonLabel": "Εκκαθάριση ημερομηνίας"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Month",
   "dayInputLabel": "Day",
   "openCalendarButtonLabel": "Change date",
-  "closeCalendarButtonLabel": "Close calendar",
   "applyDateButtonLabel": "Apply date",
   "clearDateButtonLabel": "Clear date"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Month",
   "dayInputLabel": "Day",
   "openCalendarButtonLabel": "Change date",
-  "closeCalendarButtonLabel": "Close calendar",
   "applyDateButtonLabel": "Apply date",
   "clearDateButtonLabel": "Clear date"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Month",
   "dayInputLabel": "Day",
   "openCalendarButtonLabel": "Change date",
-  "closeCalendarButtonLabel": "Close calendar",
   "applyDateButtonLabel": "Apply date",
   "clearDateButtonLabel": "Clear date"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Month",
   "dayInputLabel": "Day",
   "openCalendarButtonLabel": "Change date",
-  "closeCalendarButtonLabel": "Close calendar",
   "applyDateButtonLabel": "Apply date",
   "clearDateButtonLabel": "Clear date"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Month",
   "dayInputLabel": "Day",
   "openCalendarButtonLabel": "Change date",
-  "closeCalendarButtonLabel": "Close calendar",
   "applyDateButtonLabel": "Apply date",
   "clearDateButtonLabel": "Clear date"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mes",
   "dayInputLabel": "Día",
   "openCalendarButtonLabel": "Cambiar la fecha",
-  "closeCalendarButtonLabel": "Cerrar calendario",
   "applyDateButtonLabel": "Aplicar fecha",
   "clearDateButtonLabel": "Borrar fecha"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mes",
   "dayInputLabel": "Día",
   "openCalendarButtonLabel": "Cambiar fecha",
-  "closeCalendarButtonLabel": "Cerrar calendario",
   "applyDateButtonLabel": "Aplicar fecha",
   "clearDateButtonLabel": "Borrar fecha"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mes",
   "dayInputLabel": "Día",
   "openCalendarButtonLabel": "Cambiar fecha",
-  "closeCalendarButtonLabel": "Cerrar calendario",
   "applyDateButtonLabel": "Aplicar fecha",
   "clearDateButtonLabel": "Borrar fecha"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mes",
   "dayInputLabel": "Día",
   "openCalendarButtonLabel": "Cambiar fecha",
-  "closeCalendarButtonLabel": "Cerrar calendario",
   "applyDateButtonLabel": "Aplicar fecha",
   "clearDateButtonLabel": "Borrar fecha"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mes",
   "dayInputLabel": "Día",
   "openCalendarButtonLabel": "Cambiar fecha",
-  "closeCalendarButtonLabel": "Cerrar calendario",
   "applyDateButtonLabel": "Aplicar fecha",
   "clearDateButtonLabel": "Borrar fecha"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mes",
   "dayInputLabel": "Día",
   "openCalendarButtonLabel": "Cambiar fecha",
-  "closeCalendarButtonLabel": "Cerrar calendario",
   "applyDateButtonLabel": "Aplicar fecha",
   "clearDateButtonLabel": "Borrar fecha"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Kuu",
   "dayInputLabel": "Päev",
   "openCalendarButtonLabel": "Kuupäeva muutmine",
-  "closeCalendarButtonLabel": "Sulge kalender",
   "applyDateButtonLabel": "Rakenda kuupäev",
   "clearDateButtonLabel": "Tühjenda kuupäev"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Kuukausi",
   "dayInputLabel": "Päivä",
   "openCalendarButtonLabel": "Vaihda päivämäärä",
-  "closeCalendarButtonLabel": "Sulje kalenteri",
   "applyDateButtonLabel": "Käytä päivämäärää",
   "clearDateButtonLabel": "Tyhjennä päivämäärä"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mois",
   "dayInputLabel": "Jour",
   "openCalendarButtonLabel": "Modifier la date",
-  "closeCalendarButtonLabel": "Fermer le calendrier",
   "applyDateButtonLabel": "Appliquer la date",
   "clearDateButtonLabel": "Supprimer la date"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mois",
   "dayInputLabel": "Jour",
   "openCalendarButtonLabel": "Modifier la date",
-  "closeCalendarButtonLabel": "Fermer le calendrier",
   "applyDateButtonLabel": "Appliquer la date",
   "clearDateButtonLabel": "Supprimer la date"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mois",
   "dayInputLabel": "Jour",
   "openCalendarButtonLabel": "Modifier la date",
-  "closeCalendarButtonLabel": "Fermer le calendrier",
   "applyDateButtonLabel": "Appliquer la date",
   "clearDateButtonLabel": "Supprimer la date"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mois",
   "dayInputLabel": "Jour",
   "openCalendarButtonLabel": "Modifier la date",
-  "closeCalendarButtonLabel": "Fermer le calendrier",
   "applyDateButtonLabel": "Appliquer la date",
   "clearDateButtonLabel": "Supprimer la date"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mjesec",
   "dayInputLabel": "Dan",
   "openCalendarButtonLabel": "Promijeni datum",
-  "closeCalendarButtonLabel": "Zatvori kalendar",
   "applyDateButtonLabel": "Primijeni datum",
   "clearDateButtonLabel": "Izbriši datum"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Hónap",
   "dayInputLabel": "Nap",
   "openCalendarButtonLabel": "Dátum módosítása",
-  "closeCalendarButtonLabel": "Naptár bezárása",
   "applyDateButtonLabel": "Dátuma alkalmazása",
   "clearDateButtonLabel": "Dátum törlése"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mese",
   "dayInputLabel": "Giorno",
   "openCalendarButtonLabel": "Modifica data",
-  "closeCalendarButtonLabel": "Chiudi calendario",
   "applyDateButtonLabel": "Applica data",
   "clearDateButtonLabel": "Rimuovi data"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mese",
   "dayInputLabel": "Giorno",
   "openCalendarButtonLabel": "Modifica data",
-  "closeCalendarButtonLabel": "Chiudi calendario",
   "applyDateButtonLabel": "Applica data",
   "clearDateButtonLabel": "Rimuovi data"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mėnuo",
   "dayInputLabel": "Diena",
   "openCalendarButtonLabel": "Keisti datą",
-  "closeCalendarButtonLabel": "Uždaryti kalendorių",
   "applyDateButtonLabel": "Taikyti datą",
   "clearDateButtonLabel": "Išvalyti datą"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mēnesis",
   "dayInputLabel": "Diena",
   "openCalendarButtonLabel": "Mainīt datumu",
-  "closeCalendarButtonLabel": "Aizvērt kalendāru",
   "applyDateButtonLabel": "Piemērot datumu",
   "clearDateButtonLabel": "Notīrīt datumu"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Måned",
   "dayInputLabel": "Dag",
   "openCalendarButtonLabel": "Endre dato",
-  "closeCalendarButtonLabel": "Lukk kalender",
   "applyDateButtonLabel": "Bruk dato",
   "clearDateButtonLabel": "Slett dato"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Maand",
   "dayInputLabel": "Dag",
   "openCalendarButtonLabel": "Datum wijzigen",
-  "closeCalendarButtonLabel": "Agenda sluiten",
   "applyDateButtonLabel": "Datum toepassen",
   "clearDateButtonLabel": "Datum wissen"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Maand",
   "dayInputLabel": "Dag",
   "openCalendarButtonLabel": "Datum wijzigen",
-  "closeCalendarButtonLabel": "Agenda sluiten",
   "applyDateButtonLabel": "Datum toepassen",
   "clearDateButtonLabel": "Datum wissen"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Miesiąc",
   "dayInputLabel": "Dzień",
   "openCalendarButtonLabel": "Zmień datę",
-  "closeCalendarButtonLabel": "Zamknij kalendarz",
   "applyDateButtonLabel": "Zastosuj datę",
   "clearDateButtonLabel": "Usuń datę"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mês",
   "dayInputLabel": "Dia",
   "openCalendarButtonLabel": "Alterar data",
-  "closeCalendarButtonLabel": "Fechar agenda",
   "applyDateButtonLabel": "Aplicar data",
   "clearDateButtonLabel": "Limpar data"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mês",
   "dayInputLabel": "Dia",
   "openCalendarButtonLabel": "Alterar data",
-  "closeCalendarButtonLabel": "Fechar calendário",
   "applyDateButtonLabel": "Aplicar data",
   "clearDateButtonLabel": "Limpar data"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Lună",
   "dayInputLabel": "Zi",
   "openCalendarButtonLabel": "Modifică data",
-  "closeCalendarButtonLabel": "Închide calendarul",
   "applyDateButtonLabel": "Aplică data",
   "clearDateButtonLabel": "Șterge data"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mesiac",
   "dayInputLabel": "Deň",
   "openCalendarButtonLabel": "Zmeniť dátum?",
-  "closeCalendarButtonLabel": "Zatvoriť kalendár",
   "applyDateButtonLabel": "Vybrať dátum",
   "clearDateButtonLabel": "Vymazať dátum"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Mesec",
   "dayInputLabel": "Dan",
   "openCalendarButtonLabel": "Spremeni datum",
-  "closeCalendarButtonLabel": "Zapri koledar",
   "applyDateButtonLabel": "Uporabi datum",
   "clearDateButtonLabel": "Počisti datum"
 }
@@ -3,7 +3,6 @@
   "monthInputLabel": "Månad",
   "dayInputLabel": "Dag",
   "openCalendarButtonLabel": "Ändra datum",
-  "closeCalendarButtonLabel": "Stäng kalendern",
   "applyDateButtonLabel": "Välj datum",
   "clearDateButtonLabel": "Rensa datum"
 }
@@ -80,7 +80,6 @@ const baseArgs: DialogProps = {
   onCloseEnd: () => {},
   'aria-labelledby': 'title',
   'aria-describedby': 'description',
-  closeButtonLabel: 'Close',
   children: defaultChildren,
   style: dialogStyles,
 };

@@ -36,9 +36,11 @@ import { clsx } from '../../styles/clsx.js';
 import { useClickOutside } from '../../hooks/useClickOutside/index.js';
 import { useEscapeKey } from '../../hooks/useEscapeKey/index.js';
 import { useLatest } from '../../hooks/useLatest/index.js';
+import { useI18n } from '../../hooks/useI18n/useI18n.js';
 
 import { getFirstFocusableElement } from './DialogService.js';
 import classes from './dialog.module.css';
+import { translations } from './translations/index.js';
 
 type DataAttribute = `data-${string}`;
 
@@ -86,7 +88,7 @@ export interface DialogProps
    */
   preventClose?: boolean;
   /**
-   * Enables focusing a particular element in the dialog content and override default behavior. This will have no effect if the dialog is not modal.
+   * Enables focusing a particular element in the dialog content and overrides the default behavior.
    * @default `false`.
    */
   initialFocusRef?: RefObject<HTMLElement>;
@@ -119,7 +121,7 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
       animationDuration = 0,
       onCloseStart,
       ...rest
-    } = props;
+    } = useI18n(props, translations);
     const dialogRef = useRef<HTMLDialogElement>(null);
     const openRef = useLatest<boolean>(open);
     const animationDurationRef = useLatest<number>(animationDuration);

@@ -76,10 +76,7 @@ const openModal = async ({
 const baseArgs: ModalProps = {
   open: false,
   onClose: () => {},
-  'aria-labelledby': 'title',
-  'aria-describedby': 'description',
   variant: 'contextual',
-  closeButtonLabel: 'Close',
   children: defaultModalChildren,
 };