Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
diff --git a/lib/ReactStaticPackager.js b/lib/ReactStaticPackager.js
index 551b6071819ea7c8c28106281793841d63791856..00ee58c81302cf433ad27a8a8ce2c2d1be5ce716 100644
--- a/lib/ReactStaticPackager.js
+++ b/lib/ReactStaticPackager.js
@@ -597,7 +597,7 @@ function runModule(code, filename, id, require, parcelRequire) {
return module.exports;
}
function getCacheKey(asset) {
- return asset.filePath + '#' + asset.env.context + (asset.uniqueKey ? '-' + asset.uniqueKey : '');
+ return (asset.pipeline ? asset.pipeline : '') + asset.filePath + '#' + asset.env.context + (asset.uniqueKey ? '-' + asset.uniqueKey : '');
}
function getSpecifier(dep) {
if (typeof dep.meta.placeholder === 'string') {
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
"@parcel/core": "^2.16.1",
"@parcel/optimizer-data-url": "^2.16.1",
"@parcel/optimizer-terser": "^2.16.1",
"@parcel/packager-react-static": "^2.16.1",
"@parcel/packager-react-static": "patch:@parcel/packager-react-static@npm%3A2.16.1#~/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch",
"@parcel/packager-ts": "^2.16.1",
"@parcel/reporter-bundle-analyzer": "^2.16.1",
"@parcel/reporter-cli": "^2.16.1",
Expand Down Expand Up @@ -232,7 +232,8 @@
"remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
"lightningcss": "1.30.1",
"react-server-dom-parcel": "canary",
"react-test-renderer": "19.1.0"
"react-test-renderer": "19.1.0",
"@parcel/packager-react-static": "patch:@parcel/packager-react-static@npm%3A2.16.1#~/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch"
},
"@parcel/transformer-css": {
"cssModules": {
Expand Down
18 changes: 2 additions & 16 deletions packages/@react-aria/autocomplete/src/useAutocomplete.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {AriaTextFieldProps} from '@react-aria/textfield';
import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useLayoutEffect, useObjectRef} from '@react-aria/utils';
import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
import {getInteractionModality} from '@react-aria/interactions';
import {getInteractionModality, getPointerType} from '@react-aria/interactions';
// @ts-ignore
import intlMessages from '../intl/*.json';
import {FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from 'react';
Expand Down Expand Up @@ -92,7 +92,6 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
let delayNextActiveDescendant = useRef(false);
let queuedActiveDescendant = useRef<string | null>(null);
let lastPointerType = useRef<string | null>(null);

// For mobile screen readers, we don't want virtual focus, instead opting to disable FocusScope's restoreFocus and manually
// moving focus back to the subtriggers
Expand All @@ -106,23 +105,10 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
return () => clearTimeout(timeout.current);
}, []);

useEffect(() => {
let handlePointerDown = (e: PointerEvent) => {
lastPointerType.current = e.pointerType;
};

if (typeof PointerEvent !== 'undefined') {
document.addEventListener('pointerdown', handlePointerDown, true);
return () => {
document.removeEventListener('pointerdown', handlePointerDown, true);
};
}
}, []);

let updateActiveDescendantEvent = useEffectEvent((e: Event) => {
// Ensure input is focused if the user clicks on the collection directly.
// don't trigger on touch so that mobile keyboard doesnt appear when tapping on options
if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current && lastPointerType.current !== 'touch') {
if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current && getPointerType() !== 'touch') {
inputRef.current.focus();
}

Expand Down
1 change: 1 addition & 0 deletions packages/@react-aria/interactions/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export {
isFocusVisible,
getInteractionModality,
setInteractionModality,
getPointerType,
addWindowFocusTracking,
useInteractionModality,
useFocusVisible,
Expand Down
12 changes: 12 additions & 0 deletions packages/@react-aria/interactions/src/useFocusVisible.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
import {ignoreFocusEvent} from './utils';
import {PointerType} from '@react-types/shared';
import {useEffect, useState} from 'react';
import {useIsSSR} from '@react-aria/ssr';

Expand All @@ -37,6 +38,7 @@ export interface FocusVisibleResult {
}

let currentModality: null | Modality = null;
let currentPointerType: PointerType = 'keyboard';
let changeHandlers = new Set<Handler>();
interface GlobalListenerData {
focus: () => void
Expand Down Expand Up @@ -70,12 +72,14 @@ function handleKeyboardEvent(e: KeyboardEvent) {
hasEventBeforeFocus = true;
if (!(openLink as any).isOpening && isValidKey(e)) {
currentModality = 'keyboard';
currentPointerType = 'keyboard';
triggerChangeHandlers('keyboard', e);
}
}

function handlePointerEvent(e: PointerEvent | MouseEvent) {
currentModality = 'pointer';
currentPointerType = 'pointerType' in e ? e.pointerType as PointerType : 'mouse';
if (e.type === 'mousedown' || e.type === 'pointerdown') {
hasEventBeforeFocus = true;
triggerChangeHandlers('pointer', e);
Expand All @@ -86,6 +90,7 @@ function handleClickEvent(e: MouseEvent) {
if (!(openLink as any).isOpening && isVirtualClick(e)) {
hasEventBeforeFocus = true;
currentModality = 'virtual';
currentPointerType = 'virtual';
}
}

Expand All @@ -101,6 +106,7 @@ function handleFocusEvent(e: FocusEvent) {
// This occurs, for example, when navigating a form with the next/previous buttons on iOS.
if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
currentModality = 'virtual';
currentPointerType = 'virtual';
triggerChangeHandlers('virtual', e);
}

Expand Down Expand Up @@ -249,9 +255,15 @@ export function getInteractionModality(): Modality | null {

export function setInteractionModality(modality: Modality): void {
currentModality = modality;
currentPointerType = modality === 'pointer' ? 'mouse' : modality;
triggerChangeHandlers(modality, null);
}

/** @private */
export function getPointerType(): PointerType {
return currentPointerType;
}

/**
* Keeps state of the current modality.
*/
Expand Down
58 changes: 30 additions & 28 deletions packages/@react-aria/test-utils/src/testSetup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,35 +35,37 @@ export function installMouseEvent(): void {
});
}

export function definePointerEvent(): void {
// @ts-ignore
global.PointerEvent = class FakePointerEvent extends MouseEvent {
_init: {pageX: number, pageY: number, pointerType: string, pointerId: number, width: number, height: number};
constructor(name, init) {
super(name, init);
this._init = init;
}
get pointerType() {
return this._init.pointerType ?? 'mouse';
}
get pointerId() {
return this._init.pointerId;
}
get pageX() {
return this._init.pageX;
}
get pageY() {
return this._init.pageY;
}
get width() {
return this._init.width;
}
get height() {
return this._init.height;
}
};
}

export function installPointerEvent(): void {
beforeAll(() => {
// @ts-ignore
global.PointerEvent = class FakePointerEvent extends MouseEvent {
_init: {pageX: number, pageY: number, pointerType: string, pointerId: number, width: number, height: number};
constructor(name, init) {
super(name, init);
this._init = init;
}
get pointerType() {
return this._init.pointerType ?? 'mouse';
}
get pointerId() {
return this._init.pointerId;
}
get pageX() {
return this._init.pageX;
}
get pageY() {
return this._init.pageY;
}
get width() {
return this._init.width;
}
get height() {
return this._init.height;
}
};
});
beforeAll(definePointerEvent);
afterAll(() => {
// @ts-ignore
delete global.PointerEvent;
Expand Down
3 changes: 1 addition & 2 deletions packages/@react-aria/utils/src/mergeProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (

/**
* Merges multiple props objects together. Event handlers are chained,
* classNames are combined, and ids are deduplicated - different ids
* will trigger a side-effect and re-render components hooked up with `useId`.
* classNames are combined, and ids are deduplicated.
* For all other props, the last prop object overrides all previous ones.
* @param args - Multiple sets of props to merge together.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/s2/src/Tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@ export function TabPanel(props: TabPanelProps): ReactNode | null {

function CollapsedTabPanel(props: TabPanelProps) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let {UNSAFE_style, UNSAFE_className = '', id, ...otherProps} = props;
let {UNSAFE_style, UNSAFE_className = '', id, shouldForceMount, ...otherProps} = props;
let {menuId, valueId} = useContext(CollapseContext);
let ref = useRef(null);
let tabIndex = useHasTabbableChild(ref) ? undefined : 0;
Expand Down
7 changes: 3 additions & 4 deletions packages/@react-spectrum/s2/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,8 @@ export {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem} from

export {pressScale} from './pressScale';

export {Autocomplete} from 'react-aria-components';
export {Collection} from 'react-aria-components';
export {FileTrigger} from 'react-aria-components';
export {parseColor} from 'react-aria-components';
export {Autocomplete, Collection, FileTrigger, parseColor, useLocale} from 'react-aria-components';
export {useListData, useTreeData, useAsyncList} from 'react-stately';

export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps} from './Accordion';
export type {ActionBarProps} from './ActionBar';
Expand Down Expand Up @@ -169,3 +167,4 @@ export type {ToggleButtonGroupProps} from './ToggleButtonGroup';
export type {TooltipProps} from './Tooltip';
export type {TreeViewProps, TreeViewItemProps, TreeViewItemContentProps, TreeViewLoadMoreItemProps} from './TreeView';
export type {AutocompleteProps, FileTriggerProps, TooltipTriggerComponentProps as TooltipTriggerProps, SortDescriptor, Color, Key, Selection} from 'react-aria-components';
export type {ListData, TreeData, AsyncListData} from 'react-stately';
8 changes: 3 additions & 5 deletions packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ Autocomplete filters a collection component using a [TextField](TextField) or [S
import {Autocomplete, useFilter} from 'react-aria-components';
import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu';
import {Button} from 'vanilla-starter/Button';
import {Popover} from 'vanilla-starter/Popover';
import {SearchField} from 'vanilla-starter/SearchField';

function Example(props) {
Expand All @@ -131,7 +130,7 @@ function Example(props) {
return (
<MenuTrigger>
<Button>Add tag...</Button>
<Popover style={{display: 'flex', flexDirection: 'column'}}>
<div style={{display: 'flex', flexDirection: 'column', maxHeight: 'inherit'}}>
{/*- begin highlight -*/}
<Autocomplete {...props}/* PROPS */ filter={contains}>
<SearchField
Expand All @@ -152,7 +151,7 @@ function Example(props) {
<MenuItem>Science</MenuItem>
</Menu>
</Autocomplete>
</Popover>
</div>
</MenuTrigger>
);
}
Expand Down Expand Up @@ -1059,10 +1058,9 @@ When the `filter` prop is not set, the items are controlled. This example uses a

```tsx render
"use client";
import {Autocomplete} from 'react-aria-components';
import {Autocomplete, useAsyncList} from 'react-aria-components';
import {SearchField} from 'vanilla-starter/SearchField';
import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
import {useAsyncList} from 'react-stately';

function AsyncLoadingExample() {
let list = useAsyncList<{name: string}>({
Expand Down
8 changes: 4 additions & 4 deletions packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export const description = 'Displays a hierarchy of links to the current page or
import {Breadcrumbs, Breadcrumb} from 'vanilla-starter/Breadcrumbs';

<Breadcrumbs/* PROPS */>
<Breadcrumb href="/">Home</Breadcrumb>
<Breadcrumb href="/react-aria/">React Aria</Breadcrumb>
<Breadcrumb href="https://adobe.com/" target="_blank">Adobe</Breadcrumb>
<Breadcrumb href="/">React Aria</Breadcrumb>
<Breadcrumb>Breadcrumbs</Breadcrumb>
</Breadcrumbs>
```
Expand All @@ -31,8 +31,8 @@ export const description = 'Displays a hierarchy of links to the current page or
import {Breadcrumbs, Breadcrumb} from 'tailwind-starter/Breadcrumbs';

<Breadcrumbs/* PROPS */>
<Breadcrumb href="/">Home</Breadcrumb>
<Breadcrumb href="/react-aria/">React Aria</Breadcrumb>
<Breadcrumb href="https://adobe.com/" target="_blank">Adobe</Breadcrumb>
<Breadcrumb href="/">React Aria</Breadcrumb>
<Breadcrumb>Breadcrumbs</Breadcrumb>
</Breadcrumbs>
```
Expand Down
3 changes: 1 addition & 2 deletions packages/dev/s2-docs/pages/react-aria/Button.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import vanillaDocs from 'docs:vanilla-starter/Button';
import tailwindDocs from 'docs:tailwind-starter/Button';
import '../../tailwind/tailwind.css';
import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
import {getBaseUrl} from '../../src/pageUtils';

export const tags = ['btn'];
export const relatedPages = [{'title': 'useButton', 'url': 'https://react-spectrum.adobe.com/react-aria/useButton.html'}];
Expand Down Expand Up @@ -50,7 +49,7 @@ export const description = 'Allows a user to perform an action, with mouse, touc

Use the `onPress` prop to handle interactions via mouse, keyboard, and touch. This is similar to `onClick`, but normalized for consistency across browsers, devices, and interaction methods. Read our [blog post](blog/building-a-button-part-1) to learn more.

The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button. Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which provides information about the target and interaction method. See <Link href={`${getBaseUrl('react-aria')}/usePress`}>usePress</Link> for more details.
The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button. Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which provides information about the target and interaction method. See [usePress](usePress) for more details.

```tsx render
"use client";
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/s2-docs/pages/react-aria/Calendar.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate
```tsx render docs={vanillaDocs.exports.Calendar} links={docs.links} props={['isInvalid', 'errorMessage']} wide
"use client";
import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
import {useLocale} from 'react-aria';
import {useLocale} from 'react-aria-components';
import {Calendar} from 'vanilla-starter/Calendar';

function Example(props) {
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
```tsx render
"use client";
import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
import {useLocale} from 'react-aria';
import {useLocale} from 'react-aria-components';
import {DatePicker} from 'vanilla-starter/DatePicker';
import {Button} from 'vanilla-starter/Button';
import {Form} from 'vanilla-starter/Form';;
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
```tsx render docs={vanillaDocs.exports.DateRangePicker} links={docs.links} props={['allowsNonContiguousRanges']} wide
"use client";
import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
import {useLocale} from 'react-aria';
import {useLocale} from 'react-aria-components';
import {DateRangePicker} from 'vanilla-starter/DateRangePicker';
import {Button} from 'vanilla-starter/Button';
import {Form} from 'vanilla-starter/Form';;
Expand Down
3 changes: 1 addition & 2 deletions packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ export default Layout;
import docs from 'docs:react-aria-components';
import '../../tailwind/tailwind.css';
import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
import {getBaseUrl} from '../../src/pageUtils';

export const tags = ['upload', 'input'];
export const description = 'Allows a user to access the file system with any pressable React Aria or React Spectrum component.';
Expand Down Expand Up @@ -44,7 +43,7 @@ function Example(props) {

## Custom trigger

`FileTrigger` works with any pressable React Aria component (e.g. [Button](Button), [Link](Link), etc.). Use the `<Pressable>` component or <Link href={`${getBaseUrl('react-aria')}/usePress`}>usePress</Link> hook to wrap a custom trigger element such as a third party component or DOM element.
`FileTrigger` works with any pressable React Aria component (e.g. [Button](Button), [Link](Link), etc.). Use the `<Pressable>` component or [usePress](usePress) hook to wrap a custom trigger element such as a third party component or DOM element.

```tsx render
"use client"
Expand Down
Loading
Loading