Address code review

Author: connor-baer

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

@@ -20,6 +20,7 @@ import { resolveCurrencyFormat } from '@sumup-oss/intl';
 import { NumericFormat, type NumericFormatProps } from 'react-number-format';
 
 import { clsx } from '../../styles/clsx.js';
+import { getBrowserLocale, type Locale } from '../../util/i18n.js';
 import { Input, type InputProps } from '../Input/index.js';
 
 import { formatPlaceholder } from './CurrencyInputService.js';
@@ -37,10 +38,12 @@ export interface CurrencyInputProps
    */
   currency: string;
   /**
-   * One or more Unicode BCP 47 locale identifiers, such as 'de-DE' or
-   * ['GB', 'en-US'] (the first supported locale is used).
+   * One or more [IETF BCP 47](https://en.wikipedia.org/wiki/IETF_language_tag)
+   * locale identifiers such as `'de-DE'` or `['GB', 'en-US']`.
+   * When passing an array, the first supported locale is used.
+   * Defaults to `navigator.language` in supported environments.
    */
-  locale?: string | string[];
+  locale?: Locale;
   /**
    * A short string that is shown inside the empty input.
    * If the placeholder is a number, it is formatted in the local
@@ -76,7 +79,7 @@ const DUMMY_DELIMITER = '?';
 export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(
   (
     {
-      locale,
+      locale = getBrowserLocale(),
       currency,
       placeholder,
       'aria-describedby': descriptionId,

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

@@ -7,26 +7,24 @@ import * as Stories from './DateInput.stories';
 
 <Status variant="stable" />
 
-The DateInput component allows user to type or select a specific date. The input value is always a string in the format `YYYY-MM-DD`.
+The DateInput component allows users to type or select a specific date. The input value is always a string in the format `YYYY-MM-DD`.
 
 <Story of={Stories.Base} />
 <Props />
 
 ## Usage
 
-Use the component whenever asking for a specific individual date such as a birth date, expiry date, or appointment date.
+Use the component whenever asking for a specific individual date such as a birth date, expiry date, or appointment date. The date is in the [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) format (`YYYY-MM-DD`).
 
 For selecting a range of dates, we expect to introduce an iteration of this component in the future. Until then, we recommend using a combination of two input fields (one for the start and the other for the end date).
 
 ## Validations
 
-TODO: Decide on built-in validation.
-
-Use the `validationHint` to communicate the expected response to users.
+Use the `validationHint` prop to communicate the expected response to users. The DateInput component ensures that the entered date is a valid date, but does not validate whether it falls within the minimum or maximum date range.
 
 ### Invalid
 
-The user needs to change the value to proceed. This could be due to a
+The user needs to change the value to proceed. This could be because they entered a date outside of the allowed range.
 
 ### Warning
 
@@ -49,3 +47,9 @@ Use the `optionalLabel` prop to indicate that the field is optional. This can he
 Use the `readOnly` prop to indicate that the field is not currently editable. This can be useful in situations where the user needs to view but not edit the date, such as in a summary or review screen.
 
 <Story of={Stories.Readonly} />
+
+## Internationalization
+
+Pass one or more [IETF BCP 47](https://en.wikipedia.org/wiki/IETF_language_tag) locale identifiers such as `'de-DE'` or `['GB', 'en-US']` to the `locale` prop to display the date in the local format. When passing an array, the first supported locale is used. Defaults to `navigator.language` in supported environments.
+
+<Story of={Stories.Locales} />

packages/circuit-ui/components/DateInput/DateInput.module.css

@@ -7,6 +7,7 @@
   z-index: var(--cui-z-index-absolute);
   display: flex;
   gap: 2px;
+  min-width: 170px;
   padding: var(--cui-spacings-byte) var(--cui-spacings-mega);
   cursor: text;
   background-color: var(--cui-bg-normal);

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

@@ -47,6 +47,7 @@ import {
   FieldValidationHint,
   FieldWrapper,
 } from '../Field/Field.js';
+import { getBrowserLocale } from '../../util/i18n.js';
 
 import { Dialog } from './components/Dialog.js';
 import { DateSegment } from './components/DateSegment.js';
@@ -140,7 +141,7 @@ export interface DateInputProps
 }
 
 /**
- * The DateInput component allows user to type or select a specific date.
+ * The DateInput component allows users to type or select a specific date.
  * The input value is always a string in the format `YYYY-MM-DD`.
  */
 export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
@@ -152,7 +153,7 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
       onChange,
       min,
       max,
-      locale,
+      locale = getBrowserLocale(),
       firstDayOfWeek,
       modifiers,
       hideLabel,
@@ -181,7 +182,7 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
   ) => {
     const isMobile = useMedia('(max-width: 479px)');
 
-    const referenceRef = useRef<HTMLDivElement>(null);
+    const fieldRef = useRef<HTMLDivElement>(null);
     const floatingRef = useRef<HTMLDialogElement>(null);
     const calendarRef = useRef<HTMLDivElement>(null);
 
@@ -209,7 +210,7 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
       placement: 'bottom-start',
       middleware: [offset(4), flip(), shift()],
       elements: {
-        reference: referenceRef.current,
+        reference: fieldRef.current,
         floating: floatingRef.current,
       },
     });
@@ -356,16 +357,16 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
               optionalLabel={optionalLabel}
             />
           </FieldLegend>
-          {/* biome-ignore lint/a11y/useKeyWithClickEvents: */}
-          <div className={classes.wrapper} onClick={handleClick}>
+          <div ref={fieldRef} className={classes.wrapper}>
+            {/* biome-ignore lint/a11y/useKeyWithClickEvents: */}
             <div
+              onClick={handleClick}
               className={clsx(
                 classes.segments,
                 invalid && classes.invalid,
                 hasWarning && classes.warning,
                 readOnly && classes.readonly,
               )}
-              ref={referenceRef}
             >
               {segments.map((segment, index) => {
                 const segmentProps = {

packages/circuit-ui/vendor/dialog-polyfill/index.js

@@ -621,7 +621,7 @@ if (typeof window === 'undefined') {
    * @param {!Element} element to force upgrade
    */
   dialogPolyfill.forceRegisterDialog = function (element) {
-    if (window.HTMLDialogElement && element.showModal) {
+    if (window.HTMLDialogElement || element.showModal) {
       console.warn(
         'This browser already supports <dialog>, the polyfill ' +
           'may not work correctly',