Initialize RAC string translations (#5064)

* initialize RAC translations

* fix typo

* add newline

Author: reidbarber

packages/react-aria-components/intl/en-US.json

@@ -0,0 +1,5 @@
+{
+  "selectPlaceholder": "Select an item",
+  "tableResizer": "Resizer",
+  "dropzoneLabel": "DropZone"
+}

packages/react-aria-components/src/Breadcrumbs.tsx

@@ -66,7 +66,7 @@ function BreadcrumbsInner<T extends object>({props, collection, breadcrumbsRef:
 }
 
 /**
- * Breadcrumbs display a heirarchy of links to the current page or resource in an application.
+ * Breadcrumbs display a hierarchy of links to the current page or resource in an application.
  */
 const _Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumbs);
 export {_Breadcrumbs as Breadcrumbs};

packages/react-aria-components/src/DropZone.tsx

@@ -12,8 +12,10 @@
 
 import {AriaLabelingProps} from '@react-types/shared';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {DropOptions, mergeProps, useClipboard, useDrop, useFocusRing, useHover, VisuallyHidden} from 'react-aria';
+import {DropOptions, mergeProps, useClipboard, useDrop, useFocusRing, useHover, useLocalizedStringFormatter, VisuallyHidden} from 'react-aria';
 import {filterDOMProps, useLabels, useSlotId} from '@react-aria/utils';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {TextContext} from './Text';
 
@@ -50,9 +52,10 @@ function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
   let {dropProps, dropButtonProps, isDropTarget} = useDrop({...props, ref: buttonRef, hasDropButton: true});
   let {hoverProps, isHovered} = useHover({});
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let textId = useSlotId();
-  let ariaLabel = props['aria-label'] || 'DropZone';
+  let ariaLabel = props['aria-label'] || stringFormatter.format('dropzoneLabel');
   let messageId = (isDropTarget && props['aria-labelledby']) ? props['aria-labelledby'] : null;
   let ariaLabelledby = [textId, messageId].filter(Boolean).join(' ');
   let labelProps = useLabels({'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby});

packages/react-aria-components/src/Select.tsx

@@ -10,10 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaSelectProps, HiddenSelect, useFocusRing, useSelect} from 'react-aria';
+import {AriaSelectProps, HiddenSelect, useFocusRing, useLocalizedStringFormatter, useSelect} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Hidden, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {ItemRenderProps, useCollectionDocument} from './Collection';
 import {LabelContext} from './Label';
 import {ListBoxContext} from './ListBox';
@@ -217,10 +219,11 @@ function SelectValue<T extends object>(props: SelectValueProps<T>, ref: Forwarde
     });
   }
 
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+
   let renderProps = useRenderProps({
     ...props,
-    // TODO: localize this.
-    defaultChildren: rendered || placeholder || 'Select an item',
+    defaultChildren: rendered || placeholder || stringFormatter.format('selectPlaceholder'),
     defaultClassName: 'react-aria-SelectValue',
     values: {
       selectedItem: state.selectedItem?.value as T ?? null,

packages/react-aria-components/src/Table.tsx

@@ -7,9 +7,11 @@ import {ColumnSize, ColumnStaticSize, TableCollection as ITableCollection, Table
 import {ContextValue, defaultSlot, DOMProps, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableColumnResizeState, useTableState} from 'react-stately';
 import {DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
-import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
+import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useLocalizedStringFormatter, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
 import {filterDOMProps, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import React, {createContext, ForwardedRef, forwardRef, Key, ReactElement, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
 
@@ -900,15 +902,15 @@ function ColumnResizer(props: ColumnResizerProps, ref: ForwardedRef<HTMLDivEleme
   if (!layoutState) {
     throw new Error('Wrap your <Table> in a <ResizableTableContainer> to enable column resizing');
   }
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let {onResizeStart, onResize, onResizeEnd} = useContext(ResizableTableContainerContext)!;
   let {column, triggerRef} = useContext(ColumnResizerContext)!;
   let inputRef = useRef<HTMLInputElement>(null);
   let {resizerProps, inputProps, isResizing} = useTableColumnResize(
     {
       column,
-      // TODO: translate
-      'aria-label': props['aria-label'] || 'Resizer',
+      'aria-label': props['aria-label'] || stringFormatter.format('tableResizer'),
       onResizeStart,
       onResize,
       onResizeEnd,