Workaround RSP tree shaking issue with RAC (#6301)

Co-authored-by: Daniel Lu <[email protected]>

packages/react-aria-components/src/Calendar.tsx

@@ -16,7 +16,7 @@ import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarSta
 import {ContextValue, DOMProps, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {DOMAttributes, FocusableElement, HoverEvents} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
-import {HeadingContext} from './Heading';
+import {HeadingContext} from './RSPContexts';
 import React, {createContext, ForwardedRef, forwardRef, ReactElement, useContext, useRef} from 'react';
 import {TextContext} from './Text';
 

packages/react-aria-components/src/Checkbox.tsx

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import {AriaCheckboxGroupProps, AriaCheckboxProps, HoverEvents, mergeProps, useCheckbox, useCheckboxGroup, useCheckboxGroupItem, useFocusRing, useHover, VisuallyHidden} from 'react-aria';
+import {CheckboxContext} from './RSPContexts';
 import {CheckboxGroupState, useCheckboxGroupState, useToggleState} from 'react-stately';
 import {ContextValue, forwardRefType, Provider, RACValidation, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {FieldErrorContext} from './FieldError';
@@ -165,8 +166,6 @@ function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivEleme
   );
 }
 
-export const CheckboxContext = createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);
-
 function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
     inputRef: userProvidedInputRef = null,

packages/react-aria-components/src/ColorArea.tsx

@@ -1,8 +1,9 @@
 import {AriaColorAreaProps} from '@react-types/color';
+import {ColorAreaContext} from './RSPContexts';
 import {ColorAreaState, useColorAreaState} from '@react-stately/color';
-import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {InternalColorThumbContext} from './ColorThumb';
+import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {useColorArea} from '@react-aria/color';
 
@@ -21,7 +22,6 @@ export interface ColorAreaRenderProps {
 export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, SlotProps {}
 
 export const ColorAreaStateContext = createContext<ColorAreaState | null>(null);
-export const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>(null);
 
 function ColorArea(props: ColorAreaProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorAreaContext);

packages/react-aria-components/src/ColorField.tsx

@@ -12,13 +12,14 @@
 
 import {AriaColorFieldProps, useColorChannelField, useColorField} from '@react-aria/color';
 import {ColorChannel, ColorSpace} from '@react-types/color';
+import {ColorFieldContext} from './RSPContexts';
 import {ColorFieldState, useColorChannelFieldState, useColorFieldState} from '@react-stately/color';
-import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps} from '@react-aria/utils';
 import {InputContext} from './Input';
 import {InputDOMProps, ValidationResult} from '@react-types/shared';
 import {LabelContext} from './Label';
+import {Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';
 import {TextContext} from './Text';
 import {useLocale} from 'react-aria';
@@ -58,7 +59,6 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'pl
   colorSpace?: ColorSpace
 }
 
-export const ColorFieldContext = createContext<ContextValue<ColorFieldProps, HTMLDivElement>>(null);
 export const ColorFieldStateContext = createContext<ColorFieldState | null>(null);
 
 function ColorField(props: ColorFieldProps, ref: ForwardedRef<HTMLDivElement>) {

packages/react-aria-components/src/ColorPicker.tsx

@@ -11,13 +11,10 @@
  */
 
 import {Color} from '@react-types/color';
-import {ColorAreaContext} from './ColorArea';
-import {ColorFieldContext} from './ColorField';
+import {ColorAreaContext, ColorFieldContext, ColorSliderContext, ColorWheelContext} from './RSPContexts';
 import {ColorPickerState, ColorPickerProps as StatelyColorPickerProps, useColorPickerState} from '@react-stately/color';
-import {ColorSliderContext} from './ColorSlider';
 import {ColorSwatchContext} from './ColorSwatch';
 import {ColorSwatchPickerContext} from './ColorSwatchPicker';
-import {ColorWheelContext} from './ColorWheel';
 import {mergeProps} from 'react-aria';
 import {Provider, RenderProps, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils';
 import React, {createContext} from 'react';

packages/react-aria-components/src/ColorSlider.tsx

@@ -1,10 +1,11 @@
 import {AriaColorSliderProps} from '@react-types/color';
+import {ColorSliderContext} from './RSPContexts';
 import {ColorSliderState, useColorSliderState} from '@react-stately/color';
-import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {InternalColorThumbContext} from './ColorThumb';
 import {LabelContext} from './Label';
 import {Orientation, useLocale} from 'react-aria';
+import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider';
 import {useColorSlider} from '@react-aria/color';
@@ -28,7 +29,6 @@ export interface ColorSliderRenderProps {
 
 export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps {}
 
-export const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>(null);
 export const ColorSliderStateContext = createContext<ColorSliderState | null>(null);
 
 function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {

packages/react-aria-components/src/ColorWheel.tsx

@@ -1,4 +1,5 @@
 import {AriaColorWheelOptions, useColorWheel} from '@react-aria/color';
+import {ColorWheelContext} from './RSPContexts';
 import {ColorWheelState, useColorWheelState} from '@react-stately/color';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
@@ -19,7 +20,6 @@ export interface ColorWheelRenderProps {
 
 export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {}
 
-export const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>(null);
 export const ColorWheelStateContext = createContext<ColorWheelState | null>(null);
 
 function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {

packages/react-aria-components/src/Dialog.tsx

@@ -12,7 +12,7 @@
 import {AriaDialogProps, useDialog, useId, useOverlayTrigger} from 'react-aria';
 import {ContextValue, DEFAULT_SLOT, forwardRefType, Provider, SlotProps, StyleProps, useContextProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
-import {HeadingContext} from './Heading';
+import {HeadingContext} from './RSPContexts';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {PopoverContext} from './Popover';
 import {PressResponder} from '@react-aria/interactions';

packages/react-aria-components/src/GridList.tsx

@@ -11,7 +11,7 @@
  */
 import {AriaGridListProps, DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useGridList, useGridListItem, useGridListSelectionCheckbox, useHover, useVisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
-import {CheckboxContext} from './Checkbox';
+import {CheckboxContext} from './RSPContexts';
 import {Collection, DraggableCollectionState, DroppableCollectionState, ListState, Node, SelectionBehavior, useListState} from 'react-stately';
 import {CollectionProps, ItemRenderProps, useCachedChildren, useCollection, useSSRCollectionNode} from './Collection';
 import {ContextValue, DEFAULT_SLOT, forwardRefType, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';

packages/react-aria-components/src/Heading.tsx

@@ -10,15 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, useContextProps} from './utils';
-import React, {createContext, ElementType, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+import {HeadingContext} from './RSPContexts';
+import React, {ElementType, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+import {useContextProps} from './utils';
 
 export interface HeadingProps extends HTMLAttributes<HTMLElement> {
   level?: number
 }
 
-export const HeadingContext = createContext<ContextValue<HeadingProps, HTMLHeadingElement>>({});
-
 function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
   [props, ref] = useContextProps(props, ref, HeadingContext);
   let {children, level = 3, className, ...domProps} = props;

packages/react-aria-components/src/RSPContexts.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 {CheckboxProps} from './Checkbox';
+import {ColorAreaProps} from './ColorArea';
+import {ColorFieldProps} from './ColorField';
+import {ColorSliderProps} from './ColorSlider';
+import {ColorWheelProps} from './ColorWheel';
+import {ContextValue} from './utils';
+import {createContext} from 'react';
+import {HeadingProps} from './Heading';
+
+// This file is a temporary workaround for a tree shaking issue in SWC (the minifier used by Parcel).
+// These are the contexts consumed by React Spectrum components that don't use the implementation from RAC
+// (they use hooks). When included in the same file as the implementation, Parcel includes both the context
+// and implementation even if only the context is imported. We moved these contexts to a separate file so
+// that the implementation does not get included in the bundle. This will be removed once the tree shaking
+// issue is fixed.
+export const CheckboxContext = createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);
+export const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>(null);
+export const ColorFieldContext = createContext<ContextValue<ColorFieldProps, HTMLDivElement>>(null);
+export const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>(null);
+export const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>(null);
+export const HeadingContext = createContext<ContextValue<HeadingProps, HTMLHeadingElement>>({});

packages/react-aria-components/src/Table.tsx

@@ -2,7 +2,7 @@ import {AriaLabelingProps, HoverEvents, Key, LinkDOMProps} from '@react-types/sh
 import {BaseCollection, CollectionContext, CollectionProps, CollectionRendererContext, ItemRenderProps, NodeValue, useCachedChildren, useCollection, useCollectionChildren, useSSRCollectionNode} from './Collection';
 import {buildHeaderRows, TableColumnResizeState} from '@react-stately/table';
 import {ButtonContext} from './Button';
-import {CheckboxContext} from './Checkbox';
+import {CheckboxContext} from './RSPContexts';
 import {ColumnSize, ColumnStaticSize, TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table';
 import {ContextValue, DEFAULT_SLOT, DOMProps, forwardRefType, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableColumnResizeState, useTableState} from 'react-stately';

packages/react-aria-components/src/Tree.tsx

@@ -13,7 +13,7 @@
 import {AriaTreeGridListProps, useTreeGridList, useTreeGridListItem} from '@react-aria/tree';
 import {BaseCollection, CollectionProps, CollectionRendererContext, ItemRenderProps, NodeValue, useCachedChildren, useCollection, useCollectionChildren, useShallowRender, useSSRCollectionNode} from './Collection';
 import {ButtonContext} from './Button';
-import {CheckboxContext} from './Checkbox';
+import {CheckboxContext} from './RSPContexts';
 import {ContextValue, DEFAULT_SLOT, forwardRefType, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, Expandable, HoverEvents, Key, LinkDOMProps} from '@react-types/shared';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';

packages/react-aria-components/src/index.ts

@@ -14,18 +14,20 @@
 // to import it from a React Server Component in a framework like Next.js.
 import 'client-only';
 
+export {CheckboxContext, ColorAreaContext, ColorFieldContext, ColorSliderContext, ColorWheelContext, HeadingContext} from './RSPContexts';
+
 export {Breadcrumbs, BreadcrumbsContext, Breadcrumb} from './Breadcrumbs';
 export {Button, ButtonContext} from './Button';
 export {Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, RangeCalendar, CalendarContext, RangeCalendarContext, CalendarStateContext, RangeCalendarStateContext} from './Calendar';
-export {Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxContext, CheckboxGroupStateContext} from './Checkbox';
-export {ColorArea, ColorAreaContext, ColorAreaStateContext} from './ColorArea';
-export {ColorField, ColorFieldContext, ColorFieldStateContext} from './ColorField';
+export {Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupStateContext} from './Checkbox';
+export {ColorArea, ColorAreaStateContext} from './ColorArea';
+export {ColorField, ColorFieldStateContext} from './ColorField';
 export {ColorPicker, ColorPickerContext, ColorPickerStateContext} from './ColorPicker';
-export {ColorSlider, ColorSliderContext, ColorSliderStateContext} from './ColorSlider';
+export {ColorSlider, ColorSliderStateContext} from './ColorSlider';
 export {ColorSwatch, ColorSwatchContext} from './ColorSwatch';
 export {ColorSwatchPicker, ColorSwatchPickerItem, ColorSwatchPickerContext} from './ColorSwatchPicker';
 export {ColorThumb} from './ColorThumb';
-export {ColorWheel, ColorWheelTrack, ColorWheelContext, ColorWheelTrackContext, ColorWheelStateContext} from './ColorWheel';
+export {ColorWheel, ColorWheelTrack, ColorWheelTrackContext, ColorWheelStateContext} from './ColorWheel';
 export {ComboBox, ComboBoxContext, ComboBoxStateContext} from './ComboBox';
 export {composeRenderProps, DEFAULT_SLOT, Provider, useContextProps, useSlottedContext} from './utils';
 export {DateField, DateInput, DateSegment, TimeField, DateFieldContext, TimeFieldContext, DateFieldStateContext, TimeFieldStateContext} from './DateField';
@@ -38,7 +40,7 @@ export {Form, FormContext} from './Form';
 export {GridList, GridListItem, GridListContext} from './GridList';
 export {Group, GroupContext} from './Group';
 export {Header, HeaderContext} from './Header';
-export {Heading, HeadingContext} from './Heading';
+export {Heading} from './Heading';
 export {Input, InputContext} from './Input';
 export {Section, Collection} from './Collection';
 export {Keyboard, KeyboardContext} from './Keyboard';