react-cheminfo 0.24.0 → 0.26.0

package/src/citation/ui/CopyFormatEntries.tsx

@@ -1,6 +1,7 @@
 import { MenuItem } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { CITATION_FORMATS } from '../core/formats.ts';
 import type { Reference } from '../core/reference.ts';
 import { CITATION_STYLES } from '../core/segments.ts';
@@ -39,6 +40,7 @@ export function CopyFormatEntries(
   props: CopyFormatEntriesProps,
 ): ReactElement[] {
   const { references, feedback, keyPrefix = '', styled = true } = props;
+  const t = useChromeT();
 
   return CITATION_FORMATS.map((format) => {
     if (!styled || !format.styled) {
@@ -60,7 +62,7 @@ export function CopyFormatEntries(
       <MenuItem
         key={format.id}
         icon="clipboard"
-        text={format.label}
+        text={t.or(`cite.format.${format.id}`, format.label)}
         label={format.hint}
       >
         {CITATION_STYLES.map((style) => {

package/src/citation/ui/WorkEntry.tsx

@@ -2,6 +2,7 @@ import { MenuDivider, MenuItem } from '@blueprintjs/core';
 import { SvgLogoDoi } from 'cheminfo-font';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { CITATION_DOWNLOADS } from '../core/formats.ts';
 import { doiUrl } from '../core/reference.ts';
 import type { CitedWork } from '../core/works.ts';
@@ -38,6 +39,7 @@ export interface WorkEntryProps {
  */
 export function WorkEntry(props: WorkEntryProps): ReactElement {
   const { work, feedback } = props;
+  const t = useChromeT();
   const { reference, what, note } = work;
   const references = [reference];
 
@@ -54,20 +56,20 @@ export function WorkEntry(props: WorkEntryProps): ReactElement {
     >
       <MenuItem
         icon={<SvgLogoDoi style={DOI_ICON_STYLE} />}
-        text="Open the article"
+        text={t('cite.openArticle')}
         label={reference.doi}
         href={doiUrl(reference)}
         target="_blank"
         rel="noreferrer"
       />
-      <MenuDivider title="Copy this reference as" />
+      <MenuDivider title={t('cite.copyThisAs')} />
       <CopyFormatEntries
         references={references}
         feedback={feedback}
         keyPrefix={`${reference.doi}:`}
         styled={false}
       />
-      <MenuDivider title="Import this reference" />
+      <MenuDivider title={t('cite.importThis')} />
       {CITATION_DOWNLOADS.map((download) => (
         <DownloadEntry
           key={download.format}

package/src/citation/ui/entries.tsx

@@ -2,6 +2,7 @@ import type { IconName, Intent } from '@blueprintjs/core';
 import { MenuItem, Tooltip } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { downloadCitations } from '../core/download.ts';
 import type { CitationDownload, CitationFormat } from '../core/formats.ts';
 import type { Reference } from '../core/reference.ts';
@@ -49,7 +50,12 @@ export interface CopyEntryProps {
  */
 export function CopyEntry(props: CopyEntryProps): ReactElement {
   const { references, format, style, state, onCopy } = props;
+  const t = useChromeT();
   const entry = style ?? format;
+  const label =
+    style === undefined
+      ? t.or(`cite.format.${format.id}`, format.label)
+      : style.label;
 
   return (
     <PreviewTooltip references={references} format={format.id} style={style}>
@@ -59,7 +65,7 @@ export function CopyEntry(props: CopyEntryProps): ReactElement {
           style={ENTRY_STYLE}
           icon={state?.icon ?? 'clipboard'}
           intent={state?.intent}
-          text={entry.label}
+          text={label}
           labelElement={
             // The hint of a style entry is a list of journals, in italic.
             style !== undefined && state === null ? (
@@ -90,6 +96,7 @@ export interface DownloadEntryProps {
  */
 export function DownloadEntry(props: DownloadEntryProps): ReactElement {
   const { references, download } = props;
+  const t = useChromeT();
   return (
     <PreviewTooltip references={references} format={download.format}>
       {(targetProps) => (
@@ -97,7 +104,7 @@ export function DownloadEntry(props: DownloadEntryProps): ReactElement {
           {...targetProps}
           style={ENTRY_STYLE}
           icon="download"
-          text={download.label}
+          text={t.or(`cite.download.${download.format}`, download.label)}
           labelElement={download.hint}
           onClick={() => {
             downloadCitations(references, download);

package/src/citation/ui/useCopyFeedback.ts

@@ -1,5 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import type { Translate } from '../../i18n/ui/useT.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { copyCitations } from '../core/clipboard.ts';
 import type { CitationFormatId } from '../core/formats.ts';
 import type { Reference } from '../core/reference.ts';
@@ -31,6 +34,7 @@ export interface CopyFeedback {
  * @returns The copy action, and the feedback of the entry that used it.
  */
 export function useCopyFeedback(): CopyFeedback {
+  const t = useChromeT();
   const [copied, setCopied] = useState<string | null>(null);
   const [hasFailed, setHasFailed] = useState(false);
   const timeout = useRef<number | null>(null);
@@ -52,7 +56,7 @@ export function useCopyFeedback(): CopyFeedback {
   }
 
   return {
-    stateOf: (key) => (copied === key ? feedback(hasFailed) : null),
+    stateOf: (key) => (copied === key ? feedback(hasFailed, t) : null),
     copy: (key, references, format, style) => {
       copyCitations(references, format, style).then(
         () => {
@@ -68,9 +72,12 @@ export function useCopyFeedback(): CopyFeedback {
   };
 }
 
-function feedback(failed: boolean): CopyState {
+// The label rides at the right of a menu row, where the format's own hint
+// otherwise sits — `LaTeX`, `Word, Docs, email` — so it is written in that
+// register rather than as the word a copy button shows on its own.
+function feedback(failed: boolean, t: Translate<ChromeKey>): CopyState {
   if (failed) {
-    return { icon: 'cross', intent: 'danger', label: 'copy failed' };
+    return { icon: 'cross', intent: 'danger', label: t('cite.copyFailed') };
   }
-  return { icon: 'tick', intent: 'success', label: 'copied' };
+  return { icon: 'tick', intent: 'success', label: t('cite.copied') };
 }

package/src/clipboard/ui/ClickToCopy.tsx

@@ -8,6 +8,9 @@ import type {
 } from 'react';
 
 import { onActivateKey } from '../../hooks/ui/activationKey.ts';
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import type { Translate } from '../../i18n/ui/useT.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { ClipboardContent } from '../core/writeToClipboard.ts';
 import { writeToClipboard } from '../core/writeToClipboard.ts';
@@ -104,6 +107,7 @@ export function ClickToCopy(props: ClickToCopyProps): ReactElement {
     className,
     style,
   } = props;
+  const t = useChromeT();
   const { copied, failed, copy } = useCopyToClipboard();
 
   if (disabled) {
@@ -136,7 +140,7 @@ export function ClickToCopy(props: ClickToCopyProps): ReactElement {
       style={style}
       role={focusable && !CELLS.has(Element) ? 'button' : undefined}
       tabIndex={focusable ? 0 : undefined}
-      title={title ?? copyTitle(value, label)}
+      title={title ?? copyTitle(value, label, t)}
       data-copy={outcome}
       onClick={activate}
       onKeyDown={onActivateKey<KeyboardEvent<HTMLElement>>(activate)}
@@ -157,9 +161,9 @@ export function ClickToCopy(props: ClickToCopyProps): ReactElement {
       ) : null}
       <span className="click-to-copy__status" role="status">
         {outcome === 'copied'
-          ? 'Copied'
+          ? t('clipboard.copied')
           : outcome === 'failed'
-            ? 'Copy failed'
+            ? t('clipboard.failed')
             : null}
       </span>
     </Element>
@@ -182,10 +186,16 @@ function isOnNestedControl(
 function copyTitle(
   value: ClickToCopyProps['value'],
   label: string | undefined,
+  t: Translate<ChromeKey>,
 ): string {
-  const what = label === undefined ? 'Copy' : `Copy the ${label}`;
+  const what =
+    label === undefined
+      ? t('clipboard.copy')
+      : t('clipboard.copyThe', { what: label });
   if (typeof value === 'function') return what;
   const text = typeof value === 'string' ? value : value.text;
   if (text === '' || text.length > TITLE_VALUE_MAX) return what;
-  return label === undefined ? `Copy ${text}` : `${what} (${text})`;
+  return label === undefined
+    ? t('clipboard.copyValue', { value: text })
+    : `${what} (${text})`;
 }

package/src/clipboard/ui/CopyButton.tsx

@@ -2,6 +2,8 @@ import type { IconName, Intent } from '@blueprintjs/core';
 import { Button } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 import {
   DEFAULT_COPY_RESET_AFTER,
   useCopyToClipboard,
@@ -24,12 +26,12 @@ export interface CopyButtonProps {
   label?: string;
   /**
    * Text shown while the copy is being confirmed, when there is a label.
-   * @default 'Copied'
+   * @default the chrome's own word for it, in the language of the page
    */
   copiedLabel?: string;
   /**
    * Text shown while a refused copy is being reported, when there is a label.
-   * @default 'Copy failed'
+   * @default the chrome's own line, in the language of the page
    */
   failedLabel?: string;
   /**
@@ -59,7 +61,7 @@ export interface CopyButtonProps {
   resetAfter?: number;
   /**
    * What the pointer and a screen reader are told.
-   * @default 'Copy to clipboard'
+   * @default the chrome's own line, in the language of the page
    */
   title?: string;
   /**
@@ -79,24 +81,26 @@ export function CopyButton(props: CopyButtonProps): ReactElement {
   const {
     content,
     label,
-    copiedLabel = 'Copied',
-    failedLabel = 'Copy failed',
+    copiedLabel,
+    failedLabel,
     minimal = false,
     small = false,
     icon = 'clipboard',
     disabled = false,
     resetAfter = DEFAULT_COPY_RESET_AFTER,
-    title = 'Copy to clipboard',
+    title,
     className,
   } = props;
+  const t = useChromeT();
   const { copied, failed, copy } = useCopyToClipboard(resetAfter);
+  const hoverTitle = title ?? t('clipboard.copyToClipboard');
   const look = buttonLook({
     copied,
     failed,
     icon,
     label,
-    copiedLabel,
-    failedLabel,
+    copiedLabel: copiedLabel ?? t('clipboard.copied'),
+    failedLabel: failedLabel ?? t('clipboard.failed'),
   });
 
   return (
@@ -108,8 +112,8 @@ export function CopyButton(props: CopyButtonProps): ReactElement {
       intent={look.intent}
       text={look.text}
       disabled={disabled}
-      title={title}
-      aria-label={label ?? title}
+      title={hoverTitle}
+      aria-label={label ?? hoverTitle}
       onClick={() => {
         void copy(typeof content === 'function' ? content() : content);
       }}

package/src/color/ui/ColorScaleEditor.tsx

@@ -2,6 +2,7 @@ import { Button, HTMLSelect } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
 import { formatDecimal } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { normalizeHexColor } from '../core/hex.ts';
 import type {
   ColorInterpolation,
@@ -22,14 +23,11 @@ const POSITION_DECIMALS = 2;
 // hex colour is shown as black until it is picked again.
 const UNREADABLE_COLOR = '#000000';
 
-/** What each path between two anchors is called. */
-const INTERPOLATION_LABELS: Array<{
-  value: ColorInterpolation;
-  label: string;
-}> = [
-  { value: 'rgb', label: 'RGB — mix the channels' },
-  { value: 'hsv', label: 'HSV — turn the short way' },
-  { value: 'hsv-long', label: 'HSV — turn the long way' },
+/** The paths between two anchors, in the order the picker lists them. */
+const INTERPOLATIONS: readonly ColorInterpolation[] = [
+  'rgb',
+  'hsv',
+  'hsv-long',
 ];
 
 /** What {@link ColorScaleEditor} edits. */
@@ -57,6 +55,7 @@ export interface ColorScaleEditorProps {
  */
 export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
   const { className, value, onChange } = props;
+  const t = useChromeT();
   const stops = value.stops;
 
   function write(next: readonly ColorStop[]): void {
@@ -69,7 +68,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
         scale={value}
         height={PREVIEW_HEIGHT}
         samples={PREVIEW_SAMPLES}
-        label="The scale being edited"
+        label={t('color.scaleBeingEdited')}
       />
 
       <div style={ROWS_STYLE}>
@@ -77,7 +76,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
           <div key={`${String(index)}-${stop.color}`} style={ROW_STYLE}>
             <input
               type="color"
-              aria-label={`Colour of anchor ${String(index + 1)}`}
+              aria-label={t('color.anchorColour', { index: index + 1 })}
               value={normalizeHexColor(stop.color) ?? UNREADABLE_COLOR}
               style={SWATCH_STYLE}
               onChange={(event) => {
@@ -86,7 +85,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
             />
             <input
               type="range"
-              aria-label={`Position of anchor ${String(index + 1)}`}
+              aria-label={t('color.anchorPosition', { index: index + 1 })}
               min={0}
               max={1}
               step={POSITION_STEP}
@@ -107,7 +106,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
               icon="cross"
               variant="minimal"
               size="small"
-              aria-label={`Remove anchor ${String(index + 1)}`}
+              aria-label={t('color.removeAnchor', { index: index + 1 })}
               disabled={stops.length <= MINIMUM_STOPS}
               onClick={() => {
                 write(stops.filter((_, at) => at !== index));
@@ -121,16 +120,19 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
         <Button
           icon="plus"
           size="small"
-          text="Add a colour"
+          text={t('color.addColour')}
           disabled={stops.length >= MAXIMUM_CUSTOM_STOPS}
           onClick={() => {
             write(withAddedStop(value));
           }}
         />
         <HTMLSelect
-          aria-label="Path between two anchors"
+          aria-label={t('color.path')}
           value={value.interpolation}
-          options={INTERPOLATION_LABELS}
+          options={INTERPOLATIONS.map((interpolation) => ({
+            value: interpolation,
+            label: t(`color.interpolation.${interpolation}`),
+          }))}
           onChange={(event) => {
             onChange({
               stops,

package/src/color/ui/ColorScaleEntry.tsx

@@ -1,6 +1,7 @@
 import { MenuDivider, MenuItem } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { resolveColorScale } from '../core/scaleText.ts';
 import type { ColorScaleKind } from '../core/scales.ts';
 import { COLOR_SCALE_KIND_LABELS } from '../core/scales.ts';
@@ -33,14 +34,15 @@ interface ColorScaleEntryProps {
  */
 export function ColorScaleEntry(props: ColorScaleEntryProps): ReactElement {
   const { id, label, kind, description, previous, selected, onChange } = props;
+  const t = useChromeT();
   const entry = (
     <MenuItem
       roleStructure="listoption"
       selected={selected}
-      htmlTitle={description}
+      htmlTitle={t.or(`color.scale.${id}.description`, description)}
       text={
         <span style={ITEM_STYLE}>
-          <span>{label}</span>
+          <span>{t.or(`color.scale.${id}.label`, label)}</span>
           <ColorScaleBar scale={resolveColorScale(id).scale} />
         </span>
       }
@@ -52,7 +54,9 @@ export function ColorScaleEntry(props: ColorScaleEntryProps): ReactElement {
   if (previous === kind) return entry;
   return (
     <>
-      <MenuDivider title={COLOR_SCALE_KIND_LABELS[kind]} />
+      <MenuDivider
+        title={t.or(`color.kind.${kind}`, COLOR_SCALE_KIND_LABELS[kind])}
+      />
       {entry}
     </>
   );

package/src/color/ui/ColorScaleLegend.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties, ReactElement } from 'react';
 import { useId } from 'react';
 
 import { formatTrimmed } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ColorScale } from '../core/interpolate.ts';
 import { evenScale, sampleScale } from '../core/interpolate.ts';
@@ -66,6 +67,7 @@ export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
     label = '',
     formatValue = defaultFormatValue,
   } = props;
+  const t = useChromeT();
   const gradientId = useId();
 
   const stops = gradientStops('stops' in scale ? scale : evenScale(scale));
@@ -81,7 +83,11 @@ export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
         viewBox={`0 0 ${BAR_WIDTH} ${BAR_HEIGHT}`}
         preserveAspectRatio="none"
         role="img"
-        aria-label={`${label === '' ? 'Colour scale' : label} from ${low} to ${high}`}
+        aria-label={t('color.legendLabel', {
+          what: label === '' ? t('color.colourScale') : label,
+          low,
+          high,
+        })}
       >
         {stops.length === 0 ? null : (
           <defs>

package/src/color/ui/ColorScaleSelect.tsx

@@ -8,6 +8,7 @@ import {
 import type { CSSProperties, ReactElement } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import { formatColorScale, resolveColorScale } from '../core/scaleText.ts';
 import { COLOR_SCALES } from '../core/scales.ts';
@@ -68,6 +69,7 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
     allowCustom = true,
     testId,
   } = props;
+  const t = useChromeT();
   const [isOpen, setOpen] = useState(false);
   const [isEditing, setEditing] = useState(false);
   const resolved = resolveColorScale(value);
@@ -79,14 +81,14 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
           icon="chevron-left"
           variant="minimal"
           size="small"
-          text="Scales"
+          text={t('color.scales')}
           onClick={() => {
             setEditing(false);
           }}
         />
         <Button
           size="small"
-          text="Done"
+          text={t('color.done')}
           onClick={() => {
             setEditing(false);
             setOpen(false);
@@ -119,8 +121,8 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
           <MenuDivider />
           <MenuItem
             icon="edit"
-            text="Custom…"
-            label={resolved.id === null ? 'in use' : undefined}
+            text={t('color.customEllipsis')}
+            label={resolved.id === null ? t('color.inUse') : undefined}
             shouldDismissPopover={false}
             onClick={() => {
               setEditing(true);
@@ -150,13 +152,17 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
       >
         <Button
           alignText="start"
-          aria-label={label === '' ? 'Colour scale' : label}
+          aria-label={label === '' ? t('color.colourScale') : label}
           data-testid={testId}
           endIcon="caret-down"
           fill
           text={
             <span style={BUTTON_TEXT_STYLE}>
-              <span>{resolved.label}</span>
+              <span>
+                {resolved.id === null
+                  ? t('color.custom')
+                  : t.or(`color.scale.${resolved.id}.label`, resolved.label)}
+              </span>
               <ColorScaleBar
                 scale={resolved.scale}
                 style={{ width: BUTTON_BAR_WIDTH }}

package/src/confirm/ui/ConfirmButton.tsx

@@ -3,6 +3,8 @@ import { Alert, Button } from '@blueprintjs/core';
 import type { ReactElement, ReactNode } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 /** Props of {@link ConfirmButton}: a Blueprint button, and what it asks. */
 export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
   /**
@@ -14,12 +16,12 @@ export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
   onConfirm: () => void;
   /**
    * Text of the button that goes ahead: the verb of what happens, never `OK`.
-   * @default 'Delete'
+   * @default the chrome's own word for it, in the language of the page
    */
   confirmLabel?: string;
   /**
    * Text of the button that backs out.
-   * @default 'Cancel'
+   * @default the chrome's own word for it, in the language of the page
    */
   cancelLabel?: string;
 }
@@ -35,13 +37,9 @@ export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
  * @returns The button, and the alert it opens.
  */
 export function ConfirmButton(props: ConfirmButtonProps): ReactElement {
-  const {
-    question,
-    onConfirm,
-    confirmLabel = 'Delete',
-    cancelLabel = 'Cancel',
-    ...buttonProps
-  } = props;
+  const { question, onConfirm, confirmLabel, cancelLabel, ...buttonProps } =
+    props;
+  const t = useChromeT();
   const [asking, setAsking] = useState(false);
 
   return (
@@ -58,8 +56,8 @@ export function ConfirmButton(props: ConfirmButtonProps): ReactElement {
         icon={alertIcon(buttonProps.icon)}
         canEscapeKeyCancel
         canOutsideClickCancel
-        cancelButtonText={cancelLabel}
-        confirmButtonText={confirmLabel}
+        cancelButtonText={cancelLabel ?? t('confirm.cancel')}
+        confirmButtonText={confirmLabel ?? t('confirm.delete')}
         onCancel={() => {
           setAsking(false);
         }}

package/src/core.ts

@@ -10,6 +10,7 @@ export * from './download/core/index.ts';
 export * from './ecosystem/core/index.ts';
 export * from './error/core/index.ts';
 export * from './format/core/index.ts';
+export * from './i18n/core/index.ts';
 export * from './language/core/index.ts';
 export * from './orbital/core/index.ts';
 export * from './overlay/core/index.ts';

package/src/credits/ui/CreditsList.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { CreditEntry } from '../core/credits.ts';
@@ -32,6 +33,7 @@ export interface CreditsListProps {
  */
 export function CreditsList(props: CreditsListProps): ReactElement {
   const { entries, showLicense = true, className } = props;
+  const t = useChromeT();
 
   return (
     <ul
@@ -53,7 +55,9 @@ export function CreditsList(props: CreditsListProps): ReactElement {
           ) : (
             ' '
           )}
-          <span>{entry.description}</span>
+          <span>
+            {t.or(`credits.${entry.id}.description`, entry.description)}
+          </span>
         </li>
       ))}
     </ul>

package/src/delimited/ui/DelimitedTextDialog.tsx

@@ -1,6 +1,8 @@
 import { Button, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 import type { DelimitedTextPanelProps } from './DelimitedTextPanel.tsx';
 import { DelimitedTextPanel } from './DelimitedTextPanel.tsx';
 
@@ -26,27 +28,25 @@ export interface DelimitedTextDialogProps extends DelimitedTextPanelProps {
 export function DelimitedTextDialog(
   props: DelimitedTextDialogProps,
 ): ReactElement {
-  const {
-    isOpen,
-    onClose,
-    title = 'Copy the table',
-    className,
-    ...panel
-  } = props;
+  const { isOpen, onClose, title, className, ...panel } = props;
+  const t = useChromeT();
+  const heading = title ?? t('delimited.copyTable');
 
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      title={title}
+      title={heading}
       icon="th"
       className={className}
       style={DIALOG_STYLE}
     >
       <DialogBody>
-        <DelimitedTextPanel {...panel} label={panel.label ?? title} />
+        <DelimitedTextPanel {...panel} label={panel.label ?? heading} />
       </DialogBody>
-      <DialogFooter actions={<Button text="Close" onClick={onClose} />} />
+      <DialogFooter
+        actions={<Button text={t('delimited.close')} onClick={onClose} />}
+      />
     </Dialog>
   );
 }