@depup/react-aria-components 1.16.0-depup.0

package/src/Disclosure.tsx

@@ -0,0 +1,259 @@
+/*
+ * 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

@@ -0,0 +1,115 @@
+/*
+ * 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

@@ -0,0 +1,145 @@
+/*
+ * 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, getEventTarget, 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 = getEventTarget(e) 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

@@ -0,0 +1,57 @@
+/*
+ * 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

@@ -0,0 +1,79 @@
+/*
+ * 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, getEventTarget, 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?.(getEventTarget(e).files)}
+        capture={defaultCamera}
+        multiple={allowsMultiple}
+        // @ts-expect-error
+        webkitdirectory={acceptDirectory ? '' : undefined} />
+    </>
+  );
+});