Skip to content

Commit 290fedb

Browse files
snowystingersnowystinger
committed
Merge branch 'main' into ts-RAC-explicit-modules
# Conflicts: # packages/react-aria-components/src/Table.tsx # packages/react-aria-components/stories/Autocomplete.stories.tsx
2 parents 004187f + 7639e56 commit 290fedb

File tree

304 files changed

+18153
-1026
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

304 files changed

+18153
-1026
lines changed

‎.chromatic/preview-head.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,7 @@
138138
<!--
139139
Load S2 adobe clean VF
140140
-->
141-
<link rel="preload" href="https://use.typekit.net/af/5e77d8/00000000000000007754d3a5/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
142-
<link rel="stylesheet" href="https://use.typekit.net/yuq6kxz.css">
141+
<link rel="preload" href="https://use.typekit.net/af/b1226a/0000000000000000775c0485/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
143142

144143
<!--
145144
This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,

‎.storybook-s2/docs/Intro.jsx

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -140,41 +140,64 @@ export function Docs() {
140140
<P>You may also need to configure other tools such as TypeScript, Babel, ESLint, and Jest to support parsing import attributes. See <Link href="https://parceljs.org/features/macros/#usage-with-other-tools" target="_blank">these docs</Link> for details.</P>
141141
<P>See the <Link href="https://github.com/adobe/react-spectrum/tree/main/examples" target="_blank">examples folder</Link> in our repo for working setups with various build tools. For details on optimizing the output CSS, see the <Link href="?path=/docs/style-macro--docs#css-optimization" target="_top">style macro docs</Link>.</P>
142142
<H2>Setting up your app</H2>
143-
<P>Unlike React Spectrum v3, a <Code>Provider</Code> is not required. Instead, import <Code>@react-spectrum/s2/page.css</Code> in the entry component of your app to apply the background color and color scheme to the <Code>{'<html>'}</Code> element. This ensures that the entire page has the proper styles even before your JavaScript runs.</P>
144-
<Pre>{highlight(`import '@react-spectrum/s2/page.css';
145-
import {Button} from '@react-spectrum/s2';
143+
<P>Wrap your app in an S2 <Code>{'<Provider>'}</Code> component to load Spectrum 2 fonts for the user's locale and apply the appropriate Spectrum background layer for your app. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.</P>
144+
<Pre>{highlight(`import {Provider, Button} from '@react-spectrum/s2';
146145
147146
function App() {
148147
return (
149-
<Button
150-
variant="accent"
151-
onPress={() => alert('Hey there!')}>
152-
Hello Spectrum 2!
153-
</Button>
148+
// Wrap app in a <Provider> to load fonts, set background, set locale, etc.
149+
<Provider background="base">
150+
<Button
151+
variant="accent"
152+
onPress={() => alert('Hey there!')}>
153+
Hello Spectrum 2!
154+
</Button>
155+
</Provider>
154156
);
155157
}`)}</Pre>
156158
<Example>
157159
<Button variant="accent" onPress={() => alert('Hey there!')}>Hello Spectrum 2!</Button>
158160
</Example>
159-
<P><Strong>Note</Strong>: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the <Link href="#embedded-sections" target="_self">directions below</Link> instead of using <Code>page.css</Code>.</P>
161+
<H3>Optimizing full-page apps</H3>
162+
<P>When building a full page S2 app that's not embedded within a larger page, import <Code>@react-spectrum/s2/page.css</Code> to apply the background color and color scheme to the <Code>{'<html>'}</Code> element instead of the <Code>{'<Provider>'}</Code>. This ensures that the page has styles even before your JavaScript loads. A <Code>{'<Provider>'}</Code> is still necessary in addition to <Code>page.css</Code> in order to include the fonts, set the locale, etc.</P>
163+
<Pre>{highlight(`// Apply S2 background to the <html> element
164+
import '@react-spectrum/s2/page.css';
165+
166+
function App() {
167+
return (
168+
<Provider>
169+
{/* ... */}
170+
</Provider>
171+
);
172+
}`)}</Pre>
173+
<P>By default, this uses the <Code>base</Code> background layer. This can be customized by setting the <Code>data-background</Code> attribute on the <Code>{'<html>'}</Code> element.</P>
174+
<Pre>{highlight(`<html data-background="layer-1">
175+
<!-- ... -->
176+
</html>`)}</Pre>
160177
<H3>Overriding the color scheme</H3>
161-
<P>By default, the page follows the user’s operating system color scheme setting, supporting both light and dark mode. The page background is set to the <Code>base</Code> Spectrum background layer by default. This can be configured by setting the <Code>data-color-scheme</Code> and <Code>data-background</Code> attributes on the <Code>{'<html>'}</Code> element. For example, to force the application to only render in light mode, set <Code>data-color-scheme="light"</Code>.</P>
178+
<P>By default, React Spectrum follows the operating system color scheme setting, supporting both light and dark mode. The <Code>colorScheme</Code> prop can be set on <Code>{'<Provider>'}</Code> to force the app to always render in a certain color scheme.</P>
179+
<Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
180+
181+
<Provider colorScheme="light">
182+
{/* your app */}
183+
</Provider>`)}</Pre>
184+
<P>When using <Code>page.css</Code>, set the <Code>data-color-scheme</Code> attribute on the <Code>{'<html>'}</Code> element.</P>
162185
<Pre>{highlight(`<html data-color-scheme="light">
163186
<!-- ... -->
164187
</html>`)}</Pre>
165188
<H3>Overriding the locale</H3>
166-
<P>By default, React Spectrum uses the browser/operating system language setting for localized strings, date and number formatting, and to determine the layout direction (left-to-right or right-to-left). This can be overridden by rendering a <Code>{'<Provider>'}</Code> component at the root of your app, and setting the <Code>locale</Code> prop.</P>
189+
<P>By default, React Spectrum uses the browser/operating system language setting for localized strings, date and number formatting, and to determine the layout direction (left-to-right or right-to-left). This can be overridden by rendering setting the <Code>locale</Code> prop on the <Code>{'<Provider>'}</Code>.</P>
167190
<Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
168191
169192
<Provider locale="en-US">
170193
{/* your app */}
171194
</Provider>`)}</Pre>
172-
<H3>Embedded sections</H3>
173-
<P>If you’re building an embedded section of a larger page using Spectrum 2, use the <Code>{'<Provider>'}</Code> component to set the background instead of importing <Code>page.css</Code>. The <Code>background</Code> prop should be set to the Spectrum background layer appropriate for your app, and the <Code>colorScheme</Code> can be overridden as well.</P>
174-
<Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
175-
176-
<Provider background="base">
177-
{/* your app */}
195+
<H3>Server-side rendering</H3>
196+
<P>When using SSR, the <Code>{'<Provider>'}</Code> component can be rendered as the root <Code>{'<html>'}</Code> element. The <Code>locale</Code> prop should always be specified to avoid hydration errors. <Code>page.css</Code> is not needed in this case.</P>
197+
<Pre>{highlight(`<Provider elementType="html" locale="en-US">
198+
<body>
199+
{/* ... */}
200+
</body>
178201
</Provider>`)}</Pre>
179202
<H3>Usage with older React Spectrum versions</H3>
180203
<P>See Adobe internal documentation.</P>

‎.storybook-s2/preview-head.html

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +0,0 @@
1-
<!--
2-
This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,
3-
adobe-clean-han-korean, adobe-clean-han-simplified-c, and adobe-clean-han-traditional.
4-
These fonts and this web project are managed by a team account.
5-
-->
6-
<script>
7-
(function(d) {
8-
var config = {
9-
kitId: 'fqj0dxc',
10-
scriptTimeout: 3000,
11-
async: true
12-
},
13-
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
14-
})(document);
15-
</script>
16-
<style>
17-
@font-face {
18-
font-family: "Source Code Pro";
19-
src: url("https://use.typekit.net/af/398a64/00000000000000007735dc06/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/398a64/00000000000000007735dc06/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/398a64/00000000000000007735dc06/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
20-
font-display: swap;
21-
font-style: normal;
22-
font-weight: 400;
23-
}
24-
</style>

‎Makefile

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,6 @@ check-examples:
117117
yarn tsc --project dist/docs-examples/tsconfig.json
118118

119119
starter:
120-
node scripts/extractStarter.mjs
121120
cd starters/docs && yarn --no-immutable && yarn tsc
122121

123122
starter-zip: starter

‎packages/@react-aria/calendar/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export {useCalendar} from './useCalendar';
1414
export {useRangeCalendar} from './useRangeCalendar';
1515
export {useCalendarGrid} from './useCalendarGrid';
1616
export {useCalendarCell} from './useCalendarCell';
17+
export {getEraFormat} from './utils';
1718

1819
export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, DateValue, RangeCalendarProps} from '@react-types/calendar';
1920
export type {CalendarAria} from './useCalendarBase';

‎packages/@react-aria/collections/src/CollectionBuilder.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,9 @@ function useSSRCollectionNode<T extends Element>(Type: string, props: object, re
157157
return <Type ref={itemRef}>{children}</Type>;
158158
}
159159

160-
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
161-
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
160+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
161+
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement | null): (props: P & React.RefAttributes<E>) => ReactElement | null;
162+
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null): (props: P & React.RefAttributes<E>) => ReactElement | null;
162163
export function createLeafComponent<P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement | null): (props: P & React.RefAttributes<any>) => ReactElement | null {
163164
let Component = ({node}) => render(node.props, node.props.ref, node);
164165
let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {

‎packages/@react-aria/dialog/src/useDialog.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@ export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElemen
4747
// or announce that it has opened until it has rendered. A workaround
4848
// is to wait for half a second, then blur and re-focus the dialog.
4949
let timeout = setTimeout(() => {
50-
if (document.activeElement === ref.current) {
50+
// Check that the dialog is still focused, or focused was lost to the body.
51+
if (document.activeElement === ref.current || document.activeElement === document.body) {
5152
isRefocusing.current = true;
5253
if (ref.current) {
5354
ref.current.blur();

‎packages/@react-aria/dnd/src/DragManager.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,7 @@ class DragSession {
408408
this.dragTarget.element,
409409
...validDropItems.flatMap(item => item.activateButtonRef?.current ? [item.element, item.activateButtonRef?.current] : [item.element]),
410410
...visibleDropTargets.flatMap(target => target.activateButtonRef?.current ? [target.element, target.activateButtonRef?.current] : [target.element])
411-
]);
411+
], {shouldUseInert: true});
412412

413413
this.mutationObserver.observe(document.body, {subtree: true, attributes: true, attributeFilter: ['aria-hidden']});
414414
}

‎packages/@react-aria/focus/src/FocusScope.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import {
2424
} from '@react-aria/utils';
2525
import {FocusableElement, RefObject} from '@react-types/shared';
2626
import {focusSafely, getInteractionModality} from '@react-aria/interactions';
27-
import {isElementVisible} from './isElementVisible';
2827
import React, {JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
2928

3029
export interface FocusScopeProps {
@@ -792,7 +791,6 @@ export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions
792791
}
793792

794793
if (filter(node as Element)
795-
&& isElementVisible(node as Element)
796794
&& (!scope || isElementInScope(node as Element, scope))
797795
&& (!opts?.accept || opts.accept(node as Element))
798796
) {

‎packages/@react-aria/overlays/src/ariaHideOutside.ts

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,15 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13+
import {getOwnerWindow} from '@react-aria/utils';
14+
15+
const supportsInert = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
16+
17+
interface AriaHideOutsideOptions {
18+
root?: Element,
19+
shouldUseInert?: boolean
20+
}
21+
1322
// Keeps a ref count of all hidden elements. Added to when hiding an element, and
1423
// subtracted from when showing it again. When it reaches zero, aria-hidden is removed.
1524
let refCountMap = new WeakMap<Element, number>();
@@ -29,10 +38,28 @@ let observerStack: Array<ObserverWrapper> = [];
2938
* @param root - Nothing will be hidden above this element.
3039
* @returns - A function to restore all hidden elements.
3140
*/
32-
export function ariaHideOutside(targets: Element[], root: Element = document.body) {
41+
export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOptions | Element) {
42+
let windowObj = getOwnerWindow(targets?.[0]);
43+
let opts = options instanceof windowObj.Element ? {root: options} : options;
44+
let root = opts?.root ?? document.body;
45+
let shouldUseInert = opts?.shouldUseInert && supportsInert;
3346
let visibleNodes = new Set<Element>(targets);
3447
let hiddenNodes = new Set<Element>();
3548

49+
let getHidden = (element: Element) => {
50+
return shouldUseInert && element instanceof windowObj.HTMLElement ? element.inert : element.getAttribute('aria-hidden') === 'true';
51+
};
52+
53+
let setHidden = (element: Element, hidden: boolean) => {
54+
if (shouldUseInert && element instanceof windowObj.HTMLElement) {
55+
element.inert = hidden;
56+
} else if (hidden) {
57+
element.setAttribute('aria-hidden', 'true');
58+
} else {
59+
element.removeAttribute('aria-hidden');
60+
}
61+
};
62+
3663
let walk = (root: Element) => {
3764
// Keep live announcer and top layer elements (e.g. toasts) visible.
3865
for (let element of root.querySelectorAll('[data-live-announcer], [data-react-aria-top-layer]')) {
@@ -87,12 +114,12 @@ export function ariaHideOutside(targets: Element[], root: Element = document.bod
87114

88115
// If already aria-hidden, and the ref count is zero, then this element
89116
// was already hidden and there's nothing for us to do.
90-
if (node.getAttribute('aria-hidden') === 'true' && refCount === 0) {
117+
if (getHidden(node) && refCount === 0) {
91118
return;
92119
}
93120

94121
if (refCount === 0) {
95-
node.setAttribute('aria-hidden', 'true');
122+
setHidden(node, true);
96123
}
97124

98125
hiddenNodes.add(node);
@@ -161,7 +188,7 @@ export function ariaHideOutside(targets: Element[], root: Element = document.bod
161188
continue;
162189
}
163190
if (count === 1) {
164-
node.removeAttribute('aria-hidden');
191+
setHidden(node, false);
165192
refCountMap.delete(node);
166193
} else {
167194
refCountMap.set(node, count - 1);

0 commit comments

Comments
 (0)