react-aria-components 1.15.1 → 1.17.0

package/src/Disclosure.tsx

@@ -1,259 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaDisclosureProps, LabelAriaProps, useDisclosure, useFocusRing} from 'react-aria';
-import {ButtonContext} from './Button';
-import {
-  ClassNameOrFunction,
-  ContextValue,
-  DEFAULT_SLOT,
-  dom,
-  Provider,
-  RenderProps,
-  SlotProps,
-  useContextProps,
-  useRenderProps
-} from './utils';
-import {DisclosureGroupState, DisclosureState, DisclosureGroupProps as StatelyDisclosureGroupProps, useDisclosureGroupState, useDisclosureState} from 'react-stately';
-import {DOMProps, forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
-import {filterDOMProps, mergeProps, mergeRefs, useId} from '@react-aria/utils';
-import React, {createContext, DOMAttributes, ForwardedRef, forwardRef, ReactNode, useContext} from 'react';
-
-export interface DisclosureGroupProps extends StatelyDisclosureGroupProps, RenderProps<DisclosureGroupRenderProps>, DOMProps, GlobalDOMAttributes<HTMLDivElement> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-DisclosureGroup'
-   */
-  className?: ClassNameOrFunction<DisclosureGroupRenderProps>
-}
-
-export interface DisclosureGroupRenderProps {
-  /**
-   * Whether the disclosure group is disabled.
-   * @selector [data-disabled]
-   */
-  isDisabled: boolean,
-  /**
-   * State of the disclosure group.
-   */
-  state: DisclosureGroupState
-}
-
-export const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
-
-/**
- * A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
- * It supports both single and multiple expanded items.
- */
-export const DisclosureGroup = forwardRef(function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivElement>) {
-  let state = useDisclosureGroupState(props);
-
-  let renderProps = useRenderProps({
-    ...props,
-    defaultClassName: 'react-aria-DisclosureGroup',
-    values: {
-      isDisabled: state.isDisabled,
-      state
-    }
-  });
-
-  let domProps = filterDOMProps(props, {global: true});
-
-  return (
-    <dom.div
-      {...domProps}
-      {...renderProps}
-      ref={ref}
-      data-disabled={props.isDisabled || undefined}>
-      <DisclosureGroupStateContext.Provider value={state}>
-        {renderProps.children}
-      </DisclosureGroupStateContext.Provider>
-    </dom.div>
-  );
-});
-
-export interface DisclosureProps extends Omit<AriaDisclosureProps, 'children'>, RenderProps<DisclosureRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-Disclosure'
-   */
-  className?: ClassNameOrFunction<DisclosureRenderProps>,
-  /** An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`. */
-  id?: Key
-}
-
-export interface DisclosureRenderProps {
-  /**
-   * Whether the disclosure is expanded.
-   * @selector [data-expanded]
-   */
-  isExpanded: boolean,
-  /**
-   * Whether the disclosure has keyboard focus.
-   * @selector [data-focus-visible-within]
-   */
-  isFocusVisibleWithin: boolean,
-  /**
-   * Whether the disclosure is disabled.
-   * @selector [data-disabled]
-   */
-  isDisabled: boolean,
-  /**
-   * State of the disclosure.
-   */
-  state: DisclosureState
-}
-
-export const DisclosureContext = createContext<ContextValue<DisclosureProps, HTMLDivElement>>(null);
-export const DisclosureStateContext = createContext<DisclosureState | null>(null);
-
-interface InternalDisclosureContextValue {
-  panelProps: DOMAttributes<HTMLElement>,
-  panelRef: React.RefObject<HTMLDivElement | null>
-}
-
-const InternalDisclosureContext = createContext<InternalDisclosureContextValue | null>(null);
-
-/**
- * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
- */
-export const Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
-  [props, ref] = useContextProps(props, ref, DisclosureContext);
-  let groupState = useContext(DisclosureGroupStateContext)!;
-  let {id, ...otherProps} = props;
-
-  // Generate an id if one wasn't provided.
-  // (can't pass id into useId since it can also be a number)
-  let defaultId = useId();
-  id ||= defaultId;
-
-  let isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
-  let state = useDisclosureState({
-    ...props,
-    isExpanded,
-    onExpandedChange(isExpanded) {
-      if (groupState) {
-        groupState.toggleKey(id);
-      }
-
-      props.onExpandedChange?.(isExpanded);
-    }
-  });
-
-  let panelRef = React.useRef<HTMLDivElement | null>(null);
-  let isDisabled = props.isDisabled || groupState?.isDisabled || false;
-  let {buttonProps, panelProps} = useDisclosure({
-    ...props,
-    isExpanded,
-    isDisabled
-  }, state, panelRef);
-  let {
-    isFocusVisible: isFocusVisibleWithin,
-    focusProps: focusWithinProps
-  } = useFocusRing({within: true});
-
-  let renderProps = useRenderProps({
-    ...props,
-    id: undefined,
-    defaultClassName: 'react-aria-Disclosure',
-    values: {
-      isExpanded: state.isExpanded,
-      isDisabled,
-      isFocusVisibleWithin,
-      state
-    }
-  });
-
-  let domProps = filterDOMProps(otherProps, {global: true});
-
-  return (
-    <Provider
-      values={[
-        [ButtonContext, {
-          slots: {
-            [DEFAULT_SLOT]: {},
-            trigger: buttonProps
-          }
-        }],
-        [InternalDisclosureContext, {panelProps, panelRef}],
-        [DisclosureStateContext, state]
-      ]}>
-      <dom.div
-        {...mergeProps(domProps, renderProps, focusWithinProps)}
-        ref={ref}
-        data-expanded={state.isExpanded || undefined}
-        data-disabled={isDisabled || undefined}
-        data-focus-visible-within={isFocusVisibleWithin || undefined}>
-        {renderProps.children}
-      </dom.div>
-    </Provider>
-  );
-});
-
-export interface DisclosurePanelRenderProps {
-  /**
-   * Whether keyboard focus is within the disclosure panel.
-   * @selector [data-focus-visible-within]
-   */
-  isFocusVisibleWithin: boolean
-}
-
-export interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderProps>, DOMProps, LabelAriaProps, GlobalDOMAttributes<HTMLDivElement> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-DisclosurePanel'
-   */
-  className?: ClassNameOrFunction<DisclosurePanelRenderProps>,
-  /**
-   * The accessibility role for the disclosure's panel.
-   * @default 'group'
-   */
-  role?: 'group' | 'region',
-  /**
-   * The children of the component.
-   */
-  children: ReactNode
-}
-
-/**
- * A DisclosurePanel provides the content for a disclosure.
- */
-export const DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {role = 'group'} = props;
-  let {panelProps, panelRef} = useContext(InternalDisclosureContext)!;
-  let {
-    isFocusVisible: isFocusVisibleWithin,
-    focusProps: focusWithinProps
-  } = useFocusRing({within: true});
-  let renderProps = useRenderProps({
-    ...props,
-    defaultClassName: 'react-aria-DisclosurePanel',
-    values: {
-      isFocusVisibleWithin
-    }
-  });
-  let DOMProps = filterDOMProps(props, {global: true, labelable: true});
-  return (
-    <dom.div
-      {...mergeProps(DOMProps, renderProps, panelProps, focusWithinProps)}
-      ref={mergeRefs(ref, panelRef)}
-      role={role}
-      data-focus-visible-within={isFocusVisibleWithin || undefined}>
-      <Provider
-        values={[
-          [ButtonContext, null]
-        ]}>
-        {props.children}
-      </Provider>
-    </dom.div>
-  );
-});

package/src/DragAndDrop.tsx

@@ -1,115 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-import type {DropIndicatorProps as AriaDropIndicatorProps, ItemDropTarget, Key} from 'react-aria';
-import type {ClassNameOrFunction, RenderProps} from './utils';
-import type {DragAndDropHooks} from './useDragAndDrop';
-import type {DraggableCollectionState, DroppableCollectionState, MultipleSelectionManager} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useMemo} from 'react';
-
-export interface DragAndDropContextValue {
-  dragAndDropHooks?: DragAndDropHooks,
-  dragState?: DraggableCollectionState,
-  dropState?: DroppableCollectionState
-}
-
-export const DragAndDropContext = createContext<DragAndDropContextValue>({});
-export const DropIndicatorContext = createContext<DropIndicatorContextValue | null>(null);
-
-export interface DropIndicatorRenderProps {
-  /**
-   * Whether the drop indicator is currently the active drop target.
-   * @selector [data-drop-target]
-   */
-  isDropTarget: boolean
-}
-
-export interface DropIndicatorProps extends Omit<AriaDropIndicatorProps, 'activateButtonRef'>, RenderProps<DropIndicatorRenderProps> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-DropIndicator'
-   */
-  className?: ClassNameOrFunction<DropIndicatorRenderProps>
-}
-interface DropIndicatorContextValue {
-  render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode
-}
-
-/**
- * A DropIndicator is rendered between items in a collection to indicate where dropped data will be inserted.
- */
-export const DropIndicator = forwardRef(function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
-  let {render} = useContext(DropIndicatorContext)!;
-  return <>{render(props, ref)}</>;
-});
-
-type RenderDropIndicatorRetValue = ((target: ItemDropTarget) => ReactNode | undefined) | undefined
-
-export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState): RenderDropIndicatorRetValue {
-  let renderDropIndicator = dragAndDropHooks?.renderDropIndicator;
-  let isVirtualDragging = dragAndDropHooks?.isVirtualDragging?.();
-  let fn = useCallback((target: ItemDropTarget) => {
-    // Only show drop indicators when virtual dragging or this is the current drop target.
-    if (isVirtualDragging || dropState?.isDropTarget(target)) {
-      return renderDropIndicator ? renderDropIndicator(target) : <DropIndicator target={target} />;
-    }
-    // We invalidate whenever the target changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dropState?.target, isVirtualDragging, renderDropIndicator]);
-  return dragAndDropHooks?.useDropIndicator ? fn : undefined;
-}
-
-export function useDndPersistedKeys(selectionManager: MultipleSelectionManager, dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState): Set<Key> {
-  // Persist the focused key and the drop target key.
-  let focusedKey = selectionManager.focusedKey;
-  let dropTargetKey: Key | null | undefined = null;
-  if (dragAndDropHooks?.isVirtualDragging?.() && dropState?.target?.type === 'item') {
-    dropTargetKey = dropState.target.key;
-    if (dropState.target.dropPosition === 'after') {
-      // Normalize to the "before" drop position since we only render those to the DOM.
-      let nextKey = dropState.collection.getKeyAfter(dropTargetKey);
-      let lastDescendantKey: Key | null = null;
-      if (nextKey != null) {
-        let targetLevel = dropState.collection.getItem(dropTargetKey)?.level ?? 0;
-        // Skip over any rows that are descendants of the target ("after" position should be after all children)
-        while (nextKey) {
-          let node = dropState.collection.getItem(nextKey);
-          // eslint-disable-next-line max-depth
-          if (!node) {
-            break;
-          }
-          // Skip over non-item nodes (e.g., loaders) since they can't be drop targets.
-          // eslint-disable-next-line max-depth
-          if (node.type !== 'item') {
-            nextKey = dropState.collection.getKeyAfter(nextKey);
-            continue;
-          }
-
-          // Stop once we find an item at the same level or higher
-          // eslint-disable-next-line max-depth
-          if ((node.level ?? 0) <= targetLevel) {
-            break;
-          }
-          
-          lastDescendantKey = nextKey;
-          nextKey = dropState.collection.getKeyAfter(nextKey);
-        }
-      }
-
-      // If nextKey is null (end of collection), use the last descendant
-      dropTargetKey = nextKey ?? lastDescendantKey ?? dropTargetKey;
-    }
-  }
-
-  return useMemo(() => {
-    return new Set([focusedKey, dropTargetKey].filter(k => k != null));
-  }, [focusedKey, dropTargetKey]);
-}

package/src/DropZone.tsx

@@ -1,145 +0,0 @@
-/*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents} from '@react-types/shared';
-import {
-  ClassNameOrFunction,
-  ContextValue,
-  dom,
-  Provider,
-  RenderProps,
-  SlotProps,
-  useContextProps,
-  useRenderProps
-} from './utils';
-import {DropOptions, mergeProps, useButton, useClipboard, useDrop, useFocusRing, useHover, useLocalizedStringFormatter, VisuallyHidden} from 'react-aria';
-import {filterDOMProps, isFocusable, nodeContains, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
-import {TextContext} from './Text';
-
-export interface DropZoneRenderProps {
-  /**
-   * Whether the dropzone is currently hovered with a mouse.
-   * @selector [data-hovered]
-   */
-  isHovered: boolean,
-  /**
-   * Whether the dropzone is focused, either via a mouse or keyboard.
-   * @selector [data-focused]
-   */
-  isFocused: boolean,
-  /**
-   * Whether the dropzone is keyboard focused.
-   * @selector [data-focus-visible]
-   */
-  isFocusVisible: boolean,
-  /**
-   * Whether the dropzone is the drop target.
-   * @selector [data-drop-target]
-   */
-  isDropTarget: boolean,
-  /**
-   * Whether the dropzone is disabled.
-   * @selector [data-disabled]
-   */
-  isDisabled: boolean
-}
-
-export interface DropZoneProps extends Omit<DropOptions, 'getDropOperationForPoint' | 'ref' | 'hasDropButton'>, HoverEvents, RenderProps<DropZoneRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLDivElement> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-DropZone'
-   */
-  className?: ClassNameOrFunction<DropZoneRenderProps>
-}
-
-export const DropZoneContext = createContext<ContextValue<DropZoneProps, HTMLDivElement>>(null);
-
-/**
- * A drop zone is an area into which one or multiple objects can be dragged and dropped.
- */
-export const DropZone = forwardRef(function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {isDisabled = false} = props;
-  [props, ref] = useContextProps(props, ref, DropZoneContext);
-  let dropzoneRef = useObjectRef(ref);
-  let buttonRef = useRef<HTMLButtonElement>(null);
-  let {dropProps, dropButtonProps, isDropTarget} = useDrop({...props, ref: buttonRef, hasDropButton: true});
-  let {buttonProps} = useButton(dropButtonProps || {}, buttonRef);
-  let {hoverProps, isHovered} = useHover(props);
-  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');
-
-  let textId = useSlotId();
-  let ariaLabel = props['aria-label'] || stringFormatter.format('dropzoneLabel');
-  let messageId = props['aria-labelledby'];
-  let ariaLabelledby = [textId, messageId].filter(Boolean).join(' ');
-  let labelProps = useLabels({'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby});
-
-
-  let {clipboardProps} = useClipboard({
-    isDisabled,
-    onPaste: (items) => props.onDrop?.({
-      type: 'drop',
-      items,
-      x: 0,
-      y: 0,
-      dropOperation: 'copy'
-    })
-  });
-
-  let renderProps = useRenderProps({
-    ...props,
-    values: {isHovered, isFocused, isFocusVisible, isDropTarget, isDisabled},
-    defaultClassName: 'react-aria-DropZone'
-  });
-  let DOMProps = filterDOMProps(props, {global: true});
-  delete DOMProps.id;
-
-  return (
-    <Provider
-      values={[
-        [TextContext, {id: textId, slot: 'label'}]
-      ]}>
-      <dom.div
-        {...mergeProps(DOMProps, renderProps, dropProps, hoverProps)}
-        slot={props.slot || undefined}
-        ref={dropzoneRef}
-        onClick={(e) => {
-          let target = e.target as HTMLElement | null;
-          while (target && nodeContains(dropzoneRef.current, target)) {
-            if (isFocusable(target)) {
-              break;
-            } else if (target === dropzoneRef.current) {
-              buttonRef.current?.focus();
-              break;
-            }
-
-            target = target.parentElement;
-          }
-        }}
-        data-hovered={isHovered || undefined}
-        data-focused={isFocused || undefined}
-        data-focus-visible={isFocusVisible || undefined}
-        data-drop-target={isDropTarget || undefined}
-        data-disabled={isDisabled || undefined}>
-        <VisuallyHidden>
-          <button
-            {...mergeProps(buttonProps, focusProps, clipboardProps, labelProps)}
-            ref={buttonRef} />
-        </VisuallyHidden>
-        {renderProps.children}
-      </dom.div>
-    </Provider>
-  );
-});

package/src/FieldError.tsx

@@ -1,57 +0,0 @@
-/*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {ClassNameOrFunction, RenderProps, useRenderProps} from './utils';
-import {DOMProps, GlobalDOMAttributes, ValidationResult} from '@react-types/shared';
-import {filterDOMProps} from '@react-aria/utils';
-import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
-import {Text} from './Text';
-
-export const FieldErrorContext = createContext<ValidationResult | null>(null);
-
-export interface FieldErrorRenderProps extends ValidationResult {}
-export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOMProps, GlobalDOMAttributes<HTMLDivElement> {
-  /**
-   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
-   * @default 'react-aria-FieldError'
-   */
-  className?: ClassNameOrFunction<FieldErrorRenderProps>
-}
-
-/**
- * A FieldError displays validation errors for a form field.
- */
-export const FieldError = forwardRef(function FieldError(props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) {
-  let validation = useContext(FieldErrorContext);
-  if (!validation?.isInvalid) {
-    return null;
-  }
-
-  return <FieldErrorInner {...props} ref={ref} />;
-});
-
-const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) => {
-  let validation = useContext(FieldErrorContext)!;
-  let domProps = filterDOMProps(props, {global: true})!;
-  let renderProps = useRenderProps({
-    ...props,
-    defaultClassName: 'react-aria-FieldError',
-    defaultChildren: validation.validationErrors.length === 0 ? undefined : validation.validationErrors.join(' '),
-    values: validation
-  });
-
-  if (renderProps.children == null) {
-    return null;
-  }
-
-  return <Text slot="errorMessage" {...domProps} {...renderProps} ref={ref} />;
-});

package/src/FileTrigger.tsx

@@ -1,79 +0,0 @@
-/*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {filterDOMProps, useObjectRef} from '@react-aria/utils';
-import {GlobalDOMAttributes} from '@react-types/shared';
-import {Input} from './Input';
-import {PressResponder} from '@react-aria/interactions';
-import React, {ForwardedRef, forwardRef, ReactNode} from 'react';
-
-export interface FileTriggerProps extends GlobalDOMAttributes<HTMLInputElement> {
-  /**
-   * Specifies what mime type of files are allowed.
-   */
-  acceptedFileTypes?: ReadonlyArray<string>,
-  /**
-   * Whether multiple files can be selected.
-   */
-  allowsMultiple?: boolean,
-  /**
-   * Specifies the use of a media capture mechanism to capture the media on the spot.
-   */
-  defaultCamera?: 'user' | 'environment',
-  /**
-   * Handler when a user selects a file.
-   */
-  onSelect?: (files: FileList | null) => void,
-  /**
-   * The children of the component.
-   */
-  children?: ReactNode,
-  /**
-   * Enables the selection of directories instead of individual files.
-   */
-  acceptDirectory?: boolean
-}
-
-/**
- * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
- */
-export const FileTrigger = forwardRef(function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
-  let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ...rest} = props;
-  let inputRef = useObjectRef(ref);
-  let domProps = filterDOMProps(rest, {global: true});
-
-  return (
-    <>
-      <PressResponder
-        onPress={() => {
-          if (inputRef.current?.value) {
-            inputRef.current.value = '';
-          }
-          inputRef.current?.click();
-        }}>
-        {children}
-      </PressResponder>
-      <Input
-        {...domProps}
-        className=""
-        type="file"
-        ref={inputRef}
-        style={{display: 'none'}}
-        accept={acceptedFileTypes?.toString()}
-        onChange={(e) => onSelect?.(e.target.files)}
-        capture={defaultCamera}
-        multiple={allowsMultiple}
-        // @ts-expect-error
-        webkitdirectory={acceptDirectory ? '' : undefined} />
-    </>
-  );
-});