diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index 1c4624c59fbc..6311b934f610 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -45,6 +45,7 @@ import deprecate from '../../prop-types/deprecate'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm'; import { useFloating, flip, autoUpdate } from '@floating-ui/react'; +import { TranslateWithId } from '../../types/common'; const { InputBlur, @@ -129,9 +130,23 @@ interface OnChangeData { inputValue?: string | null; } +/** + * Message ids that will be passed to translateWithId(). + * Combination of message ids from ListBox/next/ListBoxSelection.js and + * ListBox/next/ListBoxTrigger.js, but we can't access those values directly + * because those components aren't Typescript. (If you try, TranslationKey + * ends up just being defined as "string".) + */ +type TranslationKey = + | 'close.menu' + | 'open.menu' + | 'clear.all' + | 'clear.selection'; + type ItemToStringHandler = (item: ItemType | null) => string; export interface ComboBoxProps - extends Omit, ExcludedAttributes> { + extends Omit, ExcludedAttributes>, + TranslateWithId { /** * Specify whether or not the ComboBox should allow a value that is * not in the list to be entered in the input @@ -295,12 +310,6 @@ export interface ComboBoxProps */ titleText?: ReactNode; - /** - * Specify a custom translation function that takes in a message identifier - * and returns the localized string for the message - */ - translateWithId?: (id: string) => string; - /** * Specify whether the control is currently in warning state */ @@ -661,7 +670,13 @@ const ComboBox = forwardRef( 'aria-label': deprecatedAriaLabel || ariaLabel, ref: autoAlign ? refs.setFloating : null, }), - [autoAlign, deprecatedAriaLabel, ariaLabel] + [ + autoAlign, + deprecatedAriaLabel, + ariaLabel, + getMenuProps, + refs.setFloating, + ] ); return ( diff --git a/packages/react/src/components/ComboButton/index.tsx b/packages/react/src/components/ComboButton/index.tsx index 9a8d362da8de..cc7d3f9388a8 100644 --- a/packages/react/src/components/ComboButton/index.tsx +++ b/packages/react/src/components/ComboButton/index.tsx @@ -23,16 +23,22 @@ import { } from '@floating-ui/react'; import mergeRefs from '../../tools/mergeRefs'; import { MenuAlignment } from '../MenuButton'; +import { TranslateWithId } from '../../types/common'; const defaultTranslations = { 'carbon.combo-button.additional-actions': 'Additional actions', }; +/** + * Message ids that will be passed to translateWithId(). + */ +type TranslationKey = keyof typeof defaultTranslations; + function defaultTranslateWithId(messageId: string) { return defaultTranslations[messageId]; } -interface ComboButtonProps { +interface ComboButtonProps extends TranslateWithId { /** * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`. */ @@ -72,12 +78,6 @@ interface ComboButtonProps { * Specify how the trigger tooltip should be aligned. */ tooltipAlignment?: React.ComponentProps['align']; - - /** - * Optional method that takes in a message `id` and returns an - * internationalized string. - */ - translateWithId?: (id: string) => string; } const ComboButton = React.forwardRef( diff --git a/packages/react/src/components/DataTable/DataTable.tsx b/packages/react/src/components/DataTable/DataTable.tsx index 44521202962e..b1dbcd2b82eb 100644 --- a/packages/react/src/components/DataTable/DataTable.tsx +++ b/packages/react/src/components/DataTable/DataTable.tsx @@ -37,6 +37,7 @@ import TableToolbarAction from './TableToolbarAction'; import TableToolbarContent from './TableToolbarContent'; import TableToolbarSearch from './TableToolbarSearch'; import TableToolbarMenu from './TableToolbarMenu'; +import { TranslateWithId } from '../../types/common'; const getInstanceId = setupGetInstanceId(); @@ -49,7 +50,12 @@ const translationKeys = { unselectAll: 'carbon.table.all.unselect', selectRow: 'carbon.table.row.select', unselectRow: 'carbon.table.row.unselect', -}; +} as const; + +/** + * Message ids that will be passed to translateWithId(). + */ +type TranslationKey = (typeof translationKeys)[keyof typeof translationKeys]; const defaultTranslations = { [translationKeys.expandAll]: 'Expand all rows', @@ -211,7 +217,8 @@ export interface DataTableRenderProps { radio: boolean | undefined; } -export interface DataTableProps { +export interface DataTableProps + extends TranslateWithId { children?: ( renderProps: DataTableRenderProps ) => React.ReactElement; @@ -243,7 +250,6 @@ export interface DataTableProps { } ) => number; stickyHeader?: boolean; - translateWithId?: (id: string) => string; useStaticWidth?: boolean; useZebraStyles?: boolean; } diff --git a/packages/react/src/components/DataTable/TableBatchActions.tsx b/packages/react/src/components/DataTable/TableBatchActions.tsx index 5a7019d57536..43885e9a6041 100644 --- a/packages/react/src/components/DataTable/TableBatchActions.tsx +++ b/packages/react/src/components/DataTable/TableBatchActions.tsx @@ -12,7 +12,7 @@ import Button from '../Button'; import TableActionList from './TableActionList'; import { Text } from '../Text'; import { usePrefix } from '../../internal/usePrefix'; -import type { InternationalProps } from '../../types/common'; +import type { TranslateWithId } from '../../types/common'; const TableBatchActionsTranslationKeys = [ 'carbon.table.batch.cancel', @@ -31,7 +31,7 @@ export interface TableBatchActionsTranslationArgs { export interface TableBatchActionsProps extends React.HTMLAttributes, - InternationalProps< + TranslateWithId< TableBatchActionsTranslationKey, TableBatchActionsTranslationArgs > { diff --git a/packages/react/src/components/DataTable/TableHeader.tsx b/packages/react/src/components/DataTable/TableHeader.tsx index 883970a2d055..135d48e170ce 100644 --- a/packages/react/src/components/DataTable/TableHeader.tsx +++ b/packages/react/src/components/DataTable/TableHeader.tsx @@ -16,7 +16,7 @@ import classNames from 'classnames'; import { sortStates } from './state/sorting'; import { useId } from '../../internal/useId'; import { usePrefix } from '../../internal/usePrefix'; -import { ReactAttr } from '../../types/common'; +import { TranslateWithId, ReactAttr } from '../../types/common'; import { DataTableSortState } from './state/sortStates'; const defaultScope = 'col'; @@ -64,7 +64,11 @@ const sortDirections: { [key: string]: 'none' | 'ascending' | 'descending' } = { }; interface TableHeaderProps - extends ReactAttr { + extends ReactAttr, + TranslateWithId< + TableHeaderTranslationKey, + { header; sortDirection; isSortHeader; sortStates } + > { /** * Pass in children that will be embedded in the table header label */ @@ -119,16 +123,6 @@ interface TableHeaderProps * NONE, or ASC. */ sortDirection?: string; - - /** - * Supply a method to translate internal strings with your i18n tool of - * choice. Translation keys are available on the `translationKeys` field for - * this component. - */ - translateWithId?: ( - key: TableHeaderTranslationKey, - { header, sortDirection, isSortHeader, sortStates } - ) => string; } const TableHeader = React.forwardRef(function TableHeader( diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.tsx b/packages/react/src/components/DataTable/TableToolbarSearch.tsx index de2429bb783d..ab990addd4be 100644 --- a/packages/react/src/components/DataTable/TableToolbarSearch.tsx +++ b/packages/react/src/components/DataTable/TableToolbarSearch.tsx @@ -9,7 +9,6 @@ import cx from 'classnames'; import PropTypes from 'prop-types'; import React, { ChangeEvent, - useMemo, useRef, useState, useEffect, @@ -21,18 +20,21 @@ import Search, { SearchProps } from '../Search'; import { useId } from '../../internal/useId'; import { usePrefix } from '../../internal/usePrefix'; import { noopFn } from '../../internal/noopFn'; -import { InternationalProps } from '../../types/common'; +import { TranslateWithId } from '../../types/common'; +/** + * Message ids that will be passed to translateWithId(). + */ export type TableToolbarTranslationKey = | 'carbon.table.toolbar.search.label' | 'carbon.table.toolbar.search.placeholder'; -const translationKeys = { +const translationKeys: Record = { 'carbon.table.toolbar.search.label': 'Filter table', 'carbon.table.toolbar.search.placeholder': 'Filter table', }; -const translateWithId = (id: string): string => { +const translateWithId = (id: TableToolbarTranslationKey): string => { return translationKeys[id]; }; @@ -52,7 +54,7 @@ export type TableToolbarSearchHandleExpand = ( export interface TableToolbarSearchProps extends Omit, - InternationalProps { + TranslateWithId { /** * Specifies if the search should initially render in an expanded state */ diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx index 9cb9fc8072dd..d2bebfae15a6 100644 --- a/packages/react/src/components/Dropdown/Dropdown.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.tsx @@ -40,7 +40,7 @@ import mergeRefs from '../../tools/mergeRefs'; import deprecate from '../../prop-types/deprecate'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm'; -import { ReactAttr } from '../../types/common'; +import { TranslateWithId, ReactAttr } from '../../types/common'; import { useId } from '../../internal/useId'; import { useFloating, @@ -85,7 +85,8 @@ export interface OnChangeData { } export interface DropdownProps - extends Omit, ExcludedAttributes> { + extends Omit, ExcludedAttributes>, + TranslateWithId { /** * Specify a label to be read by screen readers on the container node * 'aria-label' of the ListBox component. @@ -220,14 +221,6 @@ export interface DropdownProps */ titleText?: ReactNode; - /** - * Callback function for translating ListBoxMenuIcon SVG title - */ - translateWithId?( - messageId: ListBoxMenuIconTranslationKey, - args?: Record - ): string; - /** * The dropdown type, `default` or `inline` */ diff --git a/packages/react/src/components/ListBox/ListBoxMenuIcon.tsx b/packages/react/src/components/ListBox/ListBoxMenuIcon.tsx index 1e43a6e3f496..8ebb5caca0b1 100644 --- a/packages/react/src/components/ListBox/ListBoxMenuIcon.tsx +++ b/packages/react/src/components/ListBox/ListBoxMenuIcon.tsx @@ -10,6 +10,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ChevronDown } from '@carbon/icons-react'; import { usePrefix } from '../../internal/usePrefix'; +import { TranslateWithId } from '../../types/common'; export type ListBoxMenuIconTranslationKey = 'close.menu' | 'open.menu'; @@ -21,22 +22,13 @@ const defaultTranslations: Record = { const defaultTranslateWithId = (id: ListBoxMenuIconTranslationKey): string => defaultTranslations[id]; -export interface ListBoxMenuIconProps { +export interface ListBoxMenuIconProps + extends TranslateWithId { /** * Specify whether the menu is currently open, which will influence the * direction of the menu icon */ isOpen: boolean; - - /** - * i18n hook used to provide the appropriate description for the given menu - * icon. This function takes in a ListBoxMenuIconTranslationKey and should - * return a string message for that given message id. - */ - translateWithId?( - messageId: ListBoxMenuIconTranslationKey, - args?: Record - ): string; } export type ListBoxMenuIconComponent = React.FC; diff --git a/packages/react/src/components/ListBox/ListBoxSelection.tsx b/packages/react/src/components/ListBox/ListBoxSelection.tsx index 9ef89b691b45..b882c4faa6c2 100644 --- a/packages/react/src/components/ListBox/ListBoxSelection.tsx +++ b/packages/react/src/components/ListBox/ListBoxSelection.tsx @@ -11,8 +11,9 @@ import PropTypes from 'prop-types'; import { Close } from '@carbon/icons-react'; import { usePrefix } from '../../internal/usePrefix'; import { KeyboardEvent, MouseEvent } from 'react'; +import { TranslateWithId } from '../../types/common'; -export interface ListBoxSelectionProps { +export interface ListBoxSelectionProps extends TranslateWithId { /** * Specify a function to be invoked when a user interacts with the clear * selection element. @@ -44,13 +45,6 @@ export interface ListBoxSelectionProps { * whether the selection should display a badge or a single clear icon. */ selectionCount?: number; - - /** - * i18n hook used to provide the appropriate description for the given menu - * icon. This function takes in an id defined in `translationIds` and should - * return a string message for that given message id. - */ - translateWithId?(messageId: string, args?: Record): string; } export type ListBoxSelectionComponent = React.FC; @@ -58,7 +52,12 @@ export type ListBoxSelectionComponent = React.FC; export const translationIds = { 'clear.all': 'clear.all', 'clear.selection': 'clear.selection', -}; +} as const; + +/** + * Message ids that will be passed to translateWithId(). + */ +type TranslationKey = keyof typeof translationIds; const defaultTranslations = { [translationIds['clear.all']]: 'Clear all selected items', diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx index b5b29bb10b56..28e3e1135ca3 100644 --- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx +++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx @@ -37,7 +37,10 @@ import { type MultiSelectSortingProps, sortingPropTypes, } from './MultiSelectPropTypes'; -import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox'; +import ListBox, { + ListBoxMenuIconTranslationKey, + PropTypes as ListBoxPropTypes, +} from '../ListBox'; import { ListBoxTrigger, ListBoxSelection } from '../ListBox/next'; import { match, keys } from '../../internal/keyboard'; import { defaultItemToString } from './tools/itemToString'; @@ -54,6 +57,7 @@ import { size as floatingSize, autoUpdate, } from '@floating-ui/react'; +import { TranslateWithId } from '../../types/common'; const { InputBlur, @@ -81,8 +85,22 @@ const { } = useMultipleSelection.stateChangeTypes as UseMultipleSelectionInterface['stateChangeTypes']; +/** + * Message ids that will be passed to translateWithId(). + * Combination of message ids from ListBox/next/ListBoxSelection.js and + * ListBox/next/ListBoxTrigger.js, but we can't access those values directly + * because those components aren't Typescript. (If you try, TranslationKey + * ends up just being defined as "string".) + */ +type TranslationKey = + | 'close.menu' + | 'open.menu' + | 'clear.all' + | 'clear.selection'; + export interface FilterableMultiSelectProps - extends MultiSelectSortingProps { + extends MultiSelectSortingProps, + TranslateWithId { /** * Specify a label to be read by screen readers on the container node * @deprecated @@ -262,11 +280,6 @@ export interface FilterableMultiSelectProps */ titleText?: ReactNode; - /** - * Callback function for translating ListBoxMenuIcon SVG title - */ - translateWithId?(messageId: string, args?: Record): string; - type?: 'default' | 'inline'; /** @@ -729,7 +742,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect< }, { suppressRefError: true } ), - [autoAlign] + [autoAlign, getMenuProps, refs.setFloating] ); const handleFocus = (evt: FocusEvent | undefined) => { diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx index dcd1f5d86d46..bdf9a1f8afeb 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.tsx +++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx @@ -43,7 +43,7 @@ import { keys, match } from '../../internal/keyboard'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm'; import { ListBoxProps } from '../ListBox/ListBox'; -import type { InternationalProps } from '../../types/common'; +import type { TranslateWithId } from '../../types/common'; import { noopFn } from '../../internal/noopFn'; import { useFloating, @@ -98,7 +98,7 @@ interface OnChangeData { export interface MultiSelectProps extends MultiSelectSortingProps, - InternationalProps< + TranslateWithId< 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection' > { /** diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx index c2d9d042a671..cf0579b376b8 100644 --- a/packages/react/src/components/NumberInput/NumberInput.tsx +++ b/packages/react/src/components/NumberInput/NumberInput.tsx @@ -22,11 +22,17 @@ import { usePrefix } from '../../internal/usePrefix'; import deprecate from '../../prop-types/deprecate'; import { FormContext } from '../FluidForm'; import { Text } from '../Text'; +import { TranslateWithId } from '../../types/common'; export const translationIds = { 'increment.number': 'increment.number', 'decrement.number': 'decrement.number', -}; +} as const; + +/** + * Message ids that will be passed to translateWithId(). + */ +type TranslationKey = keyof typeof translationIds; const defaultTranslations = { [translationIds['increment.number']]: 'Increment number', @@ -45,10 +51,8 @@ type ExcludedAttributes = | 'value'; export interface NumberInputProps - extends Omit< - React.InputHTMLAttributes, - ExcludedAttributes - > { + extends Omit, ExcludedAttributes>, + TranslateWithId { /** * `true` to allow empty string. */ @@ -176,11 +180,6 @@ export interface NumberInputProps */ step?: number; - /** - * Provide custom text for the component for each translation id - */ - translateWithId?: (id: string) => string; - /** * Specify the value of the input */ diff --git a/packages/react/src/components/PaginationNav/PaginationNav.tsx b/packages/react/src/components/PaginationNav/PaginationNav.tsx index 9459c1a7cb16..0d20e1d1af9b 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.tsx +++ b/packages/react/src/components/PaginationNav/PaginationNav.tsx @@ -15,6 +15,7 @@ import { } from '@carbon/icons-react'; import { IconButton } from '../IconButton'; import { usePrefix } from '../../internal/usePrefix'; +import { TranslateWithId } from '../../types/common'; const translationIds = { 'carbon.pagination-nav.next': 'Next', @@ -22,7 +23,12 @@ const translationIds = { 'carbon.pagination-nav.item': 'Page', 'carbon.pagination-nav.active': 'Active', 'carbon.pagination-nav.of': 'of', -}; +} as const; + +/** + * Message ids that will be passed to translateWithId(). + */ +type TranslationKey = keyof typeof translationIds; function translateWithId(messageId: string): string { return translationIds[messageId]; @@ -117,7 +123,10 @@ function DirectionButton({ ); } -interface PaginationItemProps { +interface PaginationItemProps + extends TranslateWithId< + 'carbon.pagination-nav.item' | 'carbon.pagination-nav.active' + > { /** * Whether or not this is the currently active page. */ @@ -132,12 +141,6 @@ interface PaginationItemProps { * The page number this item represents. */ page?: number; - - /** - * Specify a custom translation function that takes in a message identifier - * and returns the localized string for the message - */ - translateWithId?: (id: string) => string; } function PaginationItem({ @@ -170,7 +173,10 @@ function PaginationItem({ ); } -interface PaginationOverflowProps { +interface PaginationOverflowProps + extends TranslateWithId< + 'carbon.pagination-nav.item' | 'carbon.pagination-nav.active' + > { /** * How many items to display in this overflow. */ @@ -191,12 +197,6 @@ interface PaginationOverflowProps { * Set this to true if you are having performance problems with large data sets. */ disableOverflow?: boolean; - - /** - * Specify a custom translation function that takes in a message identifier - * and returns the localized string for the message - */ - translateWithId?: (id: string) => string; } function PaginationOverflow({ @@ -278,7 +278,8 @@ function PaginationOverflow({ } interface PaginationNavProps - extends Omit, 'onChange'> { + extends Omit, 'onChange'>, + TranslateWithId { /** * Additional CSS class names. */ @@ -314,12 +315,6 @@ interface PaginationNavProps * The total number of items. */ totalItems?: number; - - /** - * Specify a custom translation function that takes in a message identifier - * and returns the localized string for the message - */ - translateWithId?: (id: string) => string; } const PaginationNav = React.forwardRef( diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx index a02df7cd9ced..c2abe64cfbe6 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx @@ -17,13 +17,19 @@ import { } from '@carbon/icons-react'; import { usePrefix } from '../../internal/usePrefix'; import { Text } from '../Text'; +import { TranslateWithId } from '../../types/common'; const defaultTranslations = { 'carbon.progress-step.complete': 'Complete', 'carbon.progress-step.incomplete': 'Incomplete', 'carbon.progress-step.current': 'Current', 'carbon.progress-step.invalid': 'Invalid', -}; +} as const; + +/** + * Message ids that will be passed to translateWithId(). + */ +type TranslationKey = keyof typeof defaultTranslations; function translateWithId(messageId) { return defaultTranslations[messageId]; @@ -156,7 +162,7 @@ ProgressIndicator.propTypes = { vertical: PropTypes.bool, }; -export interface ProgressStepProps { +export interface ProgressStepProps extends TranslateWithId { /** * Provide an optional className to be applied to the containing `
  • ` node */ @@ -220,12 +226,6 @@ export interface ProgressStepProps { * The ID of the tooltip content. */ tooltipId?: string; - - /** - * Optional method that takes in a message id and returns an - * internationalized string. - */ - translateWithId?: (id: string) => string; } function ProgressStep({ diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx index ddb8277f5927..01fdc84cdc8a 100644 --- a/packages/react/src/components/Slider/Slider.tsx +++ b/packages/react/src/components/Slider/Slider.tsx @@ -29,6 +29,7 @@ import { UpperHandle, UpperHandleFocus, } from './SliderHandles'; +import { TranslateWithId } from '../../types/common'; const ThumbWrapper = ({ hasTooltip = false, @@ -78,16 +79,18 @@ ThumbWrapper.propTypes = { const translationIds = { autoCorrectAnnouncement: 'carbon.slider.auto-correct-announcement', -}; +} as const; + +/** + * Message ids that will be passed to translateWithId(). + */ +type TranslationKey = (typeof translationIds)[keyof typeof translationIds]; function translateWithId( - translationId, + translationId: TranslationKey, translationState?: { correctedValue?: string } ) { - if ( - translationId === translationIds.autoCorrectAnnouncement && - translationState?.correctedValue - ) { + if (translationState?.correctedValue) { const { correctedValue } = translationState; return `The inputted value "${correctedValue}" was corrected to the nearest allowed digit.`; } @@ -122,11 +125,10 @@ enum HandlePosition { } type ExcludedAttributes = 'onChange' | 'onBlur'; + export interface SliderProps - extends Omit< - React.InputHTMLAttributes, - ExcludedAttributes - > { + extends Omit, ExcludedAttributes>, + TranslateWithId { /** * The `ariaLabel` for the ``. */ @@ -275,16 +277,6 @@ export interface SliderProps */ stepMultiplier?: number; - /** - * Supply a method to translate internal strings with your i18n tool of - * choice. Translation keys are available on the `translationIds` field for - * this component. - */ - translateWithId?: ( - translationId: string, - translationState: { correctedValue?: string } - ) => string; - /** * The value of the slider. When there are two handles, value is the lower * bound. diff --git a/packages/react/src/types/common.ts b/packages/react/src/types/common.ts index b1cc97b3e7a2..0a173a685159 100644 --- a/packages/react/src/types/common.ts +++ b/packages/react/src/types/common.ts @@ -19,13 +19,19 @@ export type PolymorphicProps = Props & as?: Element; }; -export interface InternationalProps< - MID = string, - ARGS = Record -> { +export interface TranslateWithId> { /** * Supply a method to translate internal strings with your i18n tool of * choice. */ translateWithId?(messageId: MID, args?: ARGS): string; } + +/** + * Alias of TranslateWithId. Will be removed in v12 + * @deprecated Use TranslateWithId instead + */ +export type InternationalProps< + MID = string, + ARGS = Record +> = TranslateWithId;