react-aria-components 1.0.0-beta.0 → 1.0.0-beta.2

package/src/DateField.tsx

@@ -10,12 +10,14 @@
  * governing permissions and limitations under the License.
  */
 import {AriaDateFieldProps, AriaTimeFieldProps, DateValue, mergeProps, TimeValue, useDateField, useDateSegment, useFocusRing, useHover, useLocale, useTimeField} from 'react-aria';
-import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {createCalendar} from '@internationalized/date';
-import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, useDateFieldState, useTimeFieldState} from 'react-stately';
+import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, TimeFieldState, useDateFieldState, useTimeFieldState} from 'react-stately';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {Group, GroupContext} from './Group';
+import {Input, InputContext} from './Input';
 import {LabelContext} from './Label';
-import React, {cloneElement, createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, ReactElement, RefObject, useContext, useRef} from 'react';
+import React, {cloneElement, createContext, ForwardedRef, forwardRef, ReactElement, useContext, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface DateFieldRenderProps {
@@ -37,16 +39,10 @@ export interface DateFieldRenderProps {
 export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState'>, RenderProps<DateFieldRenderProps>, SlotProps {}
 export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState'>, RenderProps<DateFieldRenderProps>, SlotProps {}
 
-interface DateInputContextValue extends SlotProps {
-  state: DateFieldState,
-  fieldProps: HTMLAttributes<HTMLElement>,
-  inputProps: InputHTMLAttributes<HTMLInputElement>,
-  inputRef: RefObject<HTMLInputElement>
-}
-
 export const DateFieldContext = createContext<ContextValue<DateFieldProps<any>, HTMLDivElement>>(null);
 export const TimeFieldContext = createContext<ContextValue<TimeFieldProps<any>, HTMLDivElement>>(null);
-export const DateInputContext = createContext<ContextValue<DateInputContextValue, HTMLDivElement>>(null);
+export const DateFieldStateContext = createContext<DateFieldState | null>(null);
+export const TimeFieldStateContext = createContext<TimeFieldState | null>(null);
 
 function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DateFieldContext);
@@ -60,10 +56,10 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
   let fieldRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot();
   let inputRef = useRef<HTMLInputElement>(null);
-  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useDateField({...props, label, inputRef}, state, fieldRef);
+  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useDateField({...removeDataAttributes(props), label, inputRef}, state, fieldRef);
 
   let renderProps = useRenderProps({
-    ...props,
+    ...removeDataAttributes(props),
     values: {
       state,
       isInvalid: state.isInvalid,
@@ -78,7 +74,9 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
   return (
     <Provider
       values={[
-        [DateInputContext, {state, fieldProps, ref: fieldRef, inputRef, inputProps}],
+        [DateFieldStateContext, state],
+        [GroupContext, {...fieldProps, ref: fieldRef}],
+        [InputContext, {...inputProps, ref: inputRef}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [TextContext, {
           slots: {
@@ -91,7 +89,7 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
         {...DOMProps}
         {...renderProps}
         ref={ref}
-        slot={props.slot}
+        slot={props.slot || undefined}
         data-invalid={state.isInvalid || undefined} />
     </Provider>
   );
@@ -115,7 +113,7 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
   let fieldRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot();
   let inputRef = useRef<HTMLInputElement>(null);
-  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useTimeField({...props, label, inputRef}, state, fieldRef);
+  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useTimeField({...removeDataAttributes(props), label, inputRef}, state, fieldRef);
 
   let renderProps = useRenderProps({
     ...props,
@@ -133,7 +131,9 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
   return (
     <Provider
       values={[
-        [DateInputContext, {state, fieldProps, ref: fieldRef, inputRef, inputProps}],
+        [TimeFieldStateContext, state],
+        [GroupContext, {...fieldProps, ref: fieldRef}],
+        [InputContext, {...inputProps, ref: inputRef}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [TextContext, {
           slots: {
@@ -146,7 +146,7 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
         {...DOMProps}
         {...renderProps}
         ref={ref}
-        slot={props.slot}
+        slot={props.slot || undefined}
         data-invalid={state.isInvalid || undefined} />
     </Provider>
   );
@@ -159,8 +159,6 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
 const _TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(TimeField);
 export {_TimeField as TimeField};
 
-const InternalDateInputContext = createContext<DateFieldState| null>(null);
-
 export interface DateInputRenderProps {
   /**
    * Whether the date input is currently hovered with a mouse.
@@ -188,38 +186,60 @@ export interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRen
   children: (segment: IDateSegment) => ReactElement
 }
 
-function DateInput({children, slot, ...otherProps}: DateInputProps, ref: ForwardedRef<HTMLDivElement>) {
-  let [{state, fieldProps, inputProps, inputRef}, fieldRef] = useContextProps({slot} as DateInputProps & DateInputContextValue, ref, DateInputContext);
+function DateInput(props: DateInputProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
+  // If state is provided by DateField/TimeField, just render.
+  // Otherwise (e.g. in DatePicker), we need to call hooks and create state ourselves.
+  let dateFieldState = useContext(DateFieldStateContext);
+  let timeFieldState = useContext(TimeFieldStateContext);
+  return dateFieldState || timeFieldState
+    ? <DateInputInner {...props} ref={ref} />
+    : <DateInputStandalone {...props} ref={ref} />;
+}
 
-  let {hoverProps, isHovered} = useHover({});
-  let {isFocused, isFocusVisible, focusProps} = useFocusRing({
-    within: true,
-    isTextInput: true
+const DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef<HTMLDivElement>) => {
+  let [dateFieldProps, fieldRef] = useContextProps({slot: props.slot} as DateFieldProps<any>, ref, DateFieldContext);
+  let {locale} = useLocale();
+  let state = useDateFieldState({
+    ...dateFieldProps,
+    locale,
+    createCalendar
   });
 
-  let renderProps = useRenderProps({
-    ...otherProps,
-    values: {isHovered, isFocusWithin: isFocused, isFocusVisible, isDisabled: state.isDisabled},
-    defaultClassName: 'react-aria-DateInput'
-  });
+  let inputRef = useRef<HTMLInputElement>(null);
+  let {fieldProps, inputProps} = useDateField({...dateFieldProps, inputRef}, state, fieldRef);
 
   return (
-    <InternalDateInputContext.Provider value={state}>
-      <div
-        {...mergeProps(filterDOMProps(otherProps as any), fieldProps, focusProps, hoverProps)}
-        {...renderProps}
-        ref={fieldRef}
-        slot={slot}
-        data-focus-within={isFocused || undefined}
-        data-hovered={isHovered || undefined}
-        data-focus-visible={isFocusVisible || undefined}
-        data-disabled={state.isDisabled || undefined}>
+    <Provider
+      values={[
+        [DateFieldStateContext, state],
+        [InputContext, {...inputProps, ref: inputRef}],
+        [GroupContext, {...fieldProps, ref: fieldRef}]
+      ]}>
+      <DateInputInner {...props} />
+    </Provider>
+  );
+});
+
+const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTMLDivElement>) => {
+  let {className, children} = props;
+  let dateFieldState = useContext(DateFieldStateContext);
+  let timeFieldState = useContext(TimeFieldStateContext);
+  let state = dateFieldState ?? timeFieldState!;
+
+  return (
+    <>
+      <Group
+        {...props}
+        ref={ref}
+        slot={props.slot || undefined}
+        className={className ?? 'react-aria-DateInput'}
+        isInvalid={state.isInvalid}>
         {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
-      </div>
-      <input {...inputProps} ref={inputRef} />
-    </InternalDateInputContext.Provider>
+      </Group>
+      <Input />
+    </>
   );
-}
+});
 
 /**
  * A date input groups the editable date segments within a date field.
@@ -228,6 +248,21 @@ const _DateInput = /*#__PURE__*/ (forwardRef as forwardRefType)(DateInput);
 export {_DateInput as DateInput};
 
 export interface DateSegmentRenderProps extends Omit<IDateSegment, 'isEditable'> {
+  /**
+   * Whether the segment is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the segment is focused, either via a mouse or keyboard.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the segment is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
   /**
    * Whether the value is a placeholder.
    * @selector [data-placeholder]
@@ -255,29 +290,40 @@ export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps> {
 }
 
 function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLDivElement>) {
-  let state = useContext(InternalDateInputContext)!;
+  let dateFieldState = useContext(DateFieldStateContext);
+  let timeFieldState = useContext(TimeFieldStateContext);
+  let state = dateFieldState ?? timeFieldState!;
   let domRef = useObjectRef(ref);
   let {segmentProps} = useDateSegment(segment, state, domRef);
+  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  let {hoverProps, isHovered} = useHover({isDisabled: state.isDisabled || segment.type === 'literal'});
   let renderProps = useRenderProps({
     ...otherProps,
     values: {
       ...segment,
       isReadOnly: !segment.isEditable,
-      isInvalid: state.isInvalid
+      isInvalid: state.isInvalid,
+      isHovered,
+      isFocused,
+      isFocusVisible
     },
     defaultChildren: segment.text,
     defaultClassName: 'react-aria-DateSegment'
   });
 
+
   return (
     <div
-      {...mergeProps(filterDOMProps(otherProps as any), segmentProps)}
+      {...mergeProps(filterDOMProps(otherProps as any), segmentProps, focusProps, hoverProps)}
       {...renderProps}
       ref={domRef}
       data-placeholder={segment.isPlaceholder || undefined}
       data-invalid={state.isInvalid || undefined}
       data-readonly={!segment.isEditable || undefined}
-      data-type={segment.type} />
+      data-type={segment.type}
+      data-hovered={isHovered || undefined}
+      data-focused={isFocused || undefined}
+      data-focus-visible={isFocusVisible || undefined} />
   );
 }
 

package/src/DatePicker.tsx

@@ -9,14 +9,13 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDateField, useDatePicker, useDateRangePicker, useFocusRing, useLocale} from 'react-aria';
+import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDatePicker, useDateRangePicker, useFocusRing} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CalendarContext, RangeCalendarContext} from './Calendar';
-import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {createCalendar} from '@internationalized/date';
-import {DateInputContext} from './DateField';
-import {DatePickerState, DateRangePickerState, useDateFieldState, useDatePickerState, useDateRangePickerState} from 'react-stately';
-import {DialogContext} from './Dialog';
+import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {DateFieldContext} from './DateField';
+import {DatePickerState, DateRangePickerState, useDatePickerState, useDateRangePickerState} from 'react-stately';
+import {DialogContext, OverlayTriggerStateContext} from './Dialog';
 import {filterDOMProps} from '@react-aria/utils';
 import {GroupContext} from './Group';
 import {LabelContext} from './Label';
@@ -45,6 +44,11 @@ export interface DatePickerRenderProps {
    * @selector [data-disabled]
    */
   isInvalid: boolean,
+  /**
+   * Whether the date picker's popover is currently open.
+   * @selector [data-open]
+   */
+  isOpen: boolean,
   /**
    * State of the date picker.
    */
@@ -62,6 +66,8 @@ export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDate
 
 export const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
 export const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);
+export const DatePickerStateContext = createContext<DatePickerState | null>(null);
+export const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);
 
 function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DatePickerContext);
@@ -77,20 +83,9 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
     calendarProps,
     descriptionProps,
     errorMessageProps
-  } = useDatePicker({...props, label}, state, groupRef);
-
-  let {locale} = useLocale();
-  let fieldState = useDateFieldState({
-    ...fieldProps,
-    locale,
-    createCalendar
-  });
+  } = useDatePicker({...removeDataAttributes(props), label}, state, groupRef);
 
-  let fieldRef = useRef<HTMLDivElement>(null);
-  let inputRef = useRef<HTMLInputElement>(null);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});
-  let {fieldProps: dateFieldProps, inputProps} = useDateField({...fieldProps, label, inputRef}, fieldState, fieldRef);
-
   let renderProps = useRenderProps({
     ...props,
     values: {
@@ -98,7 +93,8 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
       isFocusWithin: isFocused,
       isFocusVisible,
       isDisabled: props.isDisabled || false,
-      isInvalid: state.isInvalid
+      isInvalid: state.isInvalid,
+      isOpen: state.isOpen
     },
     defaultClassName: 'react-aria-DatePicker'
   });
@@ -109,12 +105,14 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
   return (
     <Provider
       values={[
+        [DatePickerStateContext, state],
         [GroupContext, {...groupProps, ref: groupRef}],
-        [DateInputContext, {state: fieldState, fieldProps: dateFieldProps, ref: fieldRef, inputProps, inputRef}],
+        [DateFieldContext, fieldProps],
         [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [CalendarContext, calendarProps],
-        [PopoverContext, {state, triggerRef: groupRef, placement: 'bottom start'}],
+        [OverlayTriggerStateContext, state],
+        [PopoverContext, {triggerRef: groupRef, placement: 'bottom start'}],
         [DialogContext, dialogProps],
         [TextContext, {
           slots: {
@@ -128,11 +126,12 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
         {...DOMProps}
         {...renderProps}
         ref={ref}
-        slot={props.slot}
+        slot={props.slot || undefined}
         data-focus-within={isFocused || undefined}
         data-invalid={state.isInvalid || undefined}
         data-focus-visible={isFocusVisible || undefined}
-        data-disabled={props.isDisabled || undefined} />
+        data-disabled={props.isDisabled || undefined}
+        data-open={state.isOpen || undefined} />
     </Provider>
   );
 }
@@ -158,30 +157,9 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
     calendarProps,
     descriptionProps,
     errorMessageProps
-  } = useDateRangePicker({...props, label}, state, groupRef);
+  } = useDateRangePicker({...removeDataAttributes(props), label}, state, groupRef);
 
-  let {locale} = useLocale();
-  let startFieldState = useDateFieldState({
-    ...startFieldProps,
-    locale,
-    createCalendar
-  });
-
-  let startFieldRef = useRef<HTMLDivElement>(null);
-  let startInputRef = useRef<HTMLInputElement>(null);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});
-  let {fieldProps: startDateFieldProps, inputProps: startInputProps} = useDateField({...startFieldProps, label, inputRef: startInputRef}, startFieldState, startFieldRef);
-
-  let endFieldState = useDateFieldState({
-    ...endFieldProps,
-    locale,
-    createCalendar
-  });
-
-  let endFieldRef = useRef<HTMLDivElement>(null);
-  let endInputRef = useRef<HTMLInputElement>(null);
-  let {fieldProps: endDateFieldProps, inputProps: endInputProps} = useDateField({...endFieldProps, label, inputRef: endInputRef}, endFieldState, endFieldRef);
-
   let renderProps = useRenderProps({
     ...props,
     values: {
@@ -189,7 +167,8 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
       isFocusWithin: isFocused,
       isFocusVisible,
       isDisabled: props.isDisabled || false,
-      isInvalid: state.isInvalid
+      isInvalid: state.isInvalid,
+      isOpen: state.isOpen
     },
     defaultClassName: 'react-aria-DateRangePicker'
   });
@@ -200,28 +179,18 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
   return (
     <Provider
       values={[
+        [DateRangePickerStateContext, state],
         [GroupContext, {...groupProps, ref: groupRef}],
         [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [RangeCalendarContext, calendarProps],
-        [PopoverContext, {state, triggerRef: groupRef, placement: 'bottom start'}],
+        [OverlayTriggerStateContext, state],
+        [PopoverContext, {triggerRef: groupRef, placement: 'bottom start'}],
         [DialogContext, dialogProps],
-        [DateInputContext, {
+        [DateFieldContext, {
           slots: {
-            start: {
-              state: startFieldState,
-              fieldProps: startDateFieldProps,
-              ref: startFieldRef,
-              inputRef: startInputRef,
-              inputProps: startInputProps
-            },
-            end: {
-              state: endFieldState,
-              fieldProps: endDateFieldProps,
-              ref: endFieldRef,
-              inputRef: endInputRef,
-              inputProps: endInputProps
-            }
+            start: startFieldProps,
+            end: endFieldProps
           }
         }],
         [TextContext, {
@@ -236,11 +205,12 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
         {...DOMProps}
         {...renderProps}
         ref={ref}
-        slot={props.slot}
+        slot={props.slot || undefined}
         data-focus-within={isFocused || undefined}
         data-invalid={state.isInvalid || undefined}
         data-focus-visible={isFocusVisible || undefined}
-        data-disabled={props.isDisabled || undefined} />
+        data-disabled={props.isDisabled || undefined}
+        data-open={state.isOpen || undefined} />
     </Provider>
   );
 }

package/src/Dialog.tsx

@@ -10,14 +10,13 @@
  * governing permissions and limitations under the License.
  */
 import {AriaDialogProps, useDialog, useOverlayTrigger} from 'react-aria';
-import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext} from './Heading';
-import {ModalContext} from './Modal';
-import {OverlayTriggerProps, useOverlayTriggerState} from 'react-stately';
+import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {PopoverContext} from './Popover';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
+import {PressResponder} from '@react-aria/interactions';
+import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useRef} from 'react';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
   children: ReactNode
@@ -28,11 +27,12 @@ interface DialogRenderProps {
 }
 
 export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps {
-  children?: ReactNode | ((opts: DialogRenderProps) => ReactNode),
-  onClose?: () => void
+  /** Children of the dialog. A function may be provided to access a function to close the dialog. */
+  children?: ReactNode | ((opts: DialogRenderProps) => ReactNode)
 }
 
 export const DialogContext = createContext<ContextValue<DialogProps, HTMLElement>>(null);
+export const OverlayTriggerStateContext = createContext<OverlayTriggerState | null>(null);
 
 /**
  * A DialogTrigger opens a dialog when a trigger element is pressed.
@@ -46,25 +46,26 @@ export function DialogTrigger(props: DialogTriggerProps) {
   return (
     <Provider
       values={[
-        [ModalContext, {state}],
-        [DialogContext, {...overlayProps, onClose: state.close}],
-        [ButtonContext, {...triggerProps, isPressed: state.isOpen, ref: buttonRef}],
-        [PopoverContext, {state, triggerRef: buttonRef}]
+        [OverlayTriggerStateContext, state],
+        [DialogContext, overlayProps],
+        [PopoverContext, {triggerRef: buttonRef}]
       ]}>
-      {props.children}
+      <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>
+        {props.children}
+      </PressResponder>
     </Provider>
   );
 }
 
-
 function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, DialogContext);
   let {dialogProps, titleProps} = useDialog(props, ref);
+  let state = useContext(OverlayTriggerStateContext);
 
   let children = props.children;
   if (typeof children === 'function') {
     children = children({
-      close: props.onClose || (() => {})
+      close: state?.close || (() => {})
     });
   }
 
@@ -73,12 +74,11 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
       {...filterDOMProps(props)}
       {...dialogProps}
       ref={ref}
-      slot={props.slot}
+      slot={props.slot || undefined}
       style={props.style}
       className={props.className ?? 'react-aria-Dialog'}>
       <Provider
         values={[
-          [ButtonContext, undefined],
           // TODO: clear context within dialog content?
           [HeadingContext, {...titleProps, level: 2}]
         ]}>

package/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});
@@ -84,7 +87,7 @@ function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
       <div
         {...mergeProps(dropProps, hoverProps, DOMProps)}
         {...renderProps}
-        slot={props.slot}
+        slot={props.slot || undefined}
         ref={ref}
         onClick={() => buttonRef.current?.focus()}
         data-hovered={isHovered || undefined}

package/src/FileTrigger.tsx

@@ -31,11 +31,7 @@ export interface FileTriggerProps {
   /**
    * Handler when a user selects a file.
    */
-  onChange?: (files: FileList | null) => void,
-  /**
-   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
-   */
-  name?: string,
+  onSelect?: (files: FileList | null) => void,
   /**
    * The children of the component.
    */
@@ -43,13 +39,19 @@ export interface FileTriggerProps {
 }
 
 function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
-  let {onChange, acceptedFileTypes, allowsMultiple, defaultCamera, name, children, ...rest} = props;
+  let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, ...rest} = props;
   let inputRef = useObjectRef(ref);
   let domProps = filterDOMProps(rest);
 
   return (
     <>
-      <PressResponder onPress={() => inputRef.current?.click()}>
+      <PressResponder 
+        onPress={() => {
+          if (inputRef.current.value) {
+            inputRef.current.value = '';
+          }
+          inputRef.current?.click();
+        }}>
         {children}
       </PressResponder>
       <Input
@@ -58,10 +60,9 @@ function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement
         ref={inputRef}
         style={{display: 'none'}}
         accept={acceptedFileTypes?.toString()}
-        onChange={(e) => onChange?.(e.target.files)}
+        onChange={(e) => onSelect?.(e.target.files)}
         capture={defaultCamera}
-        multiple={allowsMultiple}
-        name={name} />
+        multiple={allowsMultiple} />
     </>
   );
 }