import type {TextDropItem} from '@react-aria/dnd';

import {useDrop} from '@react-aria/dnd';

let items = await Promise.all(

(e.items as TextDropItem[])

.filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type')))

if (item.types.has('my-app-custom-type')) {

return JSON.parse(await item.getText('my-app-custom-type'));

} else {

}

});

if (dropped) {

message = dropped.map((d, index) => {

if (d.style === 'bold') {

} else if (d.style === 'italic') {

}

});

}

import {FunctionAPI} from '../../src/FunctionAPI';

import docs from 'docs:@react-aria/focus';

If CSS classes are not being used for styling, see [useFocusRing](useFocusRing.html) for a hooks version.

This example shows how to use `<FocusRing>` to apply a CSS class when keyboard focus is on a button.

<button className="button">Test</button>

</FocusRing>

import {FunctionAPI} from '../../src/FunctionAPI';

import docs from 'docs:@react-aria/focus';

arrow key navigation could be implemented by handling keyboard events and using a focus manager

to move focus to the next and previous elements.

A basic example of a focus scope that contains focus within it is below. Clicking the "Open"

<ToolbarButton>Paste</ToolbarButton>

</Toolbar>

import {FunctionAPI} from '../../src/FunctionAPI';

import docs from 'docs:@react-aria/i18n';

export const description = 'Implementing collections in React Aria';

your entire application in the provider, which will be cause all child elements to receive the new locale

information via [useLocale](useLocale.html).

<YourApp />

</I18nProvider>

import docs from 'docs:@react-aria/overlays';

import {FunctionAPI} from '../../src/FunctionAPI';

elements into a single container at the root of the app or to control the order of children of the `body` element, but you may have use cases

that need to do otherwise.

The example below shows how you can use `UNSAFE_PortalProvider` to portal your Toasts to an arbitrary container. Note that

return ReactDOM.createPortal(children, getContainer());

}

export default Layout;

import docs from 'docs:@react-aria/ssr';

export const description = 'Implementing collections in React Aria';

**Note**: if you're using React 18 or newer, `SSRProvider` is not necessary and can be removed from your app. React Aria uses the

[React.useId](https://react.dev/reference/react/useId) hook internally when using React 18, which ensures ids are consistent.

<YourApp />

</SSRProvider>

<PageDescription>{docs.exports.VisuallyHidden.description}</PageDescription>

In order to allow additional rendering flexibility, the `useVisuallyHidden` hook can be

used in custom components instead of the `VisuallyHidden` component. It supports the same

options as the component, and returns props to spread onto the element that should be hidden.

<FunctionAPI links={docs.links} function={docs.exports.useVisuallyHidden} />

import {useVisuallyHidden} from '@react-aria/visually-hidden';

<div {...visuallyHiddenProps}>I am hidden</div>

<PageDescription>{docs.exports.mergeProps.description}</PageDescription>

`mergeProps` is a utility function that combines multiple props objects together in a smart way.

This can be useful when you need to combine the results of multiple react-aria hooks onto a single

event handlers will be chained, multiple classes will be combined, and ids will be deduplicated.

For all other props, the last prop object overrides all previous ones.

}

};

import {FunctionAPI} from '../../src/FunctionAPI';

import docs from 'docs:@react-aria/dnd';

import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts';

<PageDescription>{docs.exports.useClipboard.description}</PageDescription>

Copy and paste is a common way to transfer data between locations, either within or between apps. Browsers support copy and paste of selected text content by default, but rich objects with custom data can also be copied and pasted using the [clipboard events](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) API. For example, an app could support copying and pasting a selected card representing a rich object to a new location, or allow a user to paste files from their device to upload them. This can provide a keyboard accessible alternative to drag and drop.

<Copyable />

<Pasteable />

</div>

import {FunctionAPI} from '../../src/FunctionAPI';

import docs from 'docs:@react-aria/i18n';

export const description = 'Implementing collections in React Aria';

[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator) docs for

information.

This example includes two textfields and compares the values of the two fields using a collator according to the current locale.

);

}