Mark translated props as optional

packages/circuit-ui/components/Calendar/Calendar.tsx

@@ -129,11 +129,11 @@ export interface CalendarProps
   /**
    * Text label for the button to navigate to the previous month.
    */
-  prevMonthButtonLabel: string;
+  prevMonthButtonLabel?: string;
   /**
    * Text label for the button to navigate to the next month.
    */
-  nextMonthButtonLabel: string;
+  nextMonthButtonLabel?: string;
   /**
    * The number of months to display at a time. Default: `1`.
    */

packages/circuit-ui/components/DateInput/DateInput.tsx

@@ -103,31 +103,31 @@ export interface DateInputProps
   /**
    * Visually hidden label for the year input.
    */
-  yearInputLabel: string;
+  yearInputLabel?: string;
   /**
    * Visually hidden label for the month input.
    */
-  monthInputLabel: string;
+  monthInputLabel?: string;
   /**
    * Visually hidden label for the day input.
    */
-  dayInputLabel: string;
+  dayInputLabel?: string;
   /**
    * Label for the trailing button that opens the calendar dialog.
    */
-  openCalendarButtonLabel: string;
+  openCalendarButtonLabel?: string;
   /**
    * Label for the button to close the calendar dialog.
    */
-  closeCalendarButtonLabel: string;
+  closeCalendarButtonLabel?: string;
   /**
    * Label for the button to apply the selected date and close the calendar dialog.
    */
-  applyDateButtonLabel: string;
+  applyDateButtonLabel?: string;
   /**
    * Label for the button to clear the date value and close the calendar dialog.
    */
-  clearDateButtonLabel: string;
+  clearDateButtonLabel?: string;
   /**
    * The minimum selectable date in the [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601)
    * format (`YYYY-MM-DD`) (inclusive).

packages/circuit-ui/hooks/useI18n/useI18n.ts

@@ -22,23 +22,29 @@ import {
 } from '../../util/i18n.js';
 import { useLocale } from '../useLocale/useLocale.js';
 
+type I18nProps<Key extends string | number | symbol> = {
+  [key in Key]: string;
+} & {
+  locale: Locale;
+};
+
 export function useI18n<
-  P extends { [key in K]: string } & { locale?: Locale },
-  K extends string | number | symbol,
->(props: P, translations: Translations<K>): P {
+  Props extends Partial<I18nProps<Key>>,
+  Key extends string | number | symbol,
+>(props: Props, translations: Translations<Key>): Props & I18nProps<Key> {
   const locale = useLocale(props.locale);
 
   const supportedLocale = findSupportedLocale(locale);
   const strings = translations[supportedLocale];
-  const keys = Object.keys(strings) as K[];
+  const keys = Object.keys(strings) as Key[];
 
   const translatedProps = keys.reduce(
     (acc, key) => {
       acc[key] = props[key] || strings[key];
       return acc;
     },
-    {} as Record<K, string>,
+    {} as Record<Key, string>,
   );
 
-  return { ...props, ...translatedProps };
+  return { ...props, ...translatedProps, locale };
 }