diff --git a/packages/react-aria-components/src/Calendar.tsx b/packages/react-aria-components/src/Calendar.tsx index 0e49e71bb09..1375fb683e5 100644 --- a/packages/react-aria-components/src/Calendar.tsx +++ b/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'; diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx index e7691d1c32b..aec2b40f3d8 100644 --- a/packages/react-aria-components/src/Checkbox.tsx +++ b/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>(null); - function Checkbox(props: CheckboxProps, ref: ForwardedRef) { let { inputRef: userProvidedInputRef = null, diff --git a/packages/react-aria-components/src/ColorArea.tsx b/packages/react-aria-components/src/ColorArea.tsx index df3f3ef4f61..d0132413a7e 100644 --- a/packages/react-aria-components/src/ColorArea.tsx +++ b/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, SlotProps {} export const ColorAreaStateContext = createContext(null); -export const ColorAreaContext = createContext, HTMLDivElement>>(null); function ColorArea(props: ColorAreaProps, ref: ForwardedRef) { [props, ref] = useContextProps(props, ref, ColorAreaContext); diff --git a/packages/react-aria-components/src/ColorField.tsx b/packages/react-aria-components/src/ColorField.tsx index 2902535057d..cf7d2ade04a 100644 --- a/packages/react-aria-components/src/ColorField.tsx +++ b/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>(null); export const ColorFieldStateContext = createContext(null); function ColorField(props: ColorFieldProps, ref: ForwardedRef) { diff --git a/packages/react-aria-components/src/ColorPicker.tsx b/packages/react-aria-components/src/ColorPicker.tsx index 0c3ddbfce22..40394d7cb82 100644 --- a/packages/react-aria-components/src/ColorPicker.tsx +++ b/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'; diff --git a/packages/react-aria-components/src/ColorSlider.tsx b/packages/react-aria-components/src/ColorSlider.tsx index 0428f6d05da..c99380f494b 100644 --- a/packages/react-aria-components/src/ColorSlider.tsx +++ b/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, RenderProps, SlotProps {} -export const ColorSliderContext = createContext, HTMLDivElement>>(null); export const ColorSliderStateContext = createContext(null); function ColorSlider(props: ColorSliderProps, ref: ForwardedRef) { diff --git a/packages/react-aria-components/src/ColorWheel.tsx b/packages/react-aria-components/src/ColorWheel.tsx index d702d7e609c..e4441e2862c 100644 --- a/packages/react-aria-components/src/ColorWheel.tsx +++ b/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, SlotProps {} -export const ColorWheelContext = createContext, HTMLDivElement>>(null); export const ColorWheelStateContext = createContext(null); function ColorWheel(props: ColorWheelProps, ref: ForwardedRef) { diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx index 49f903334f6..e6f7dc52c07 100644 --- a/packages/react-aria-components/src/Dialog.tsx +++ b/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'; diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx index 29d1f0c1ce2..5700ed72b0b 100644 --- a/packages/react-aria-components/src/GridList.tsx +++ b/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'; diff --git a/packages/react-aria-components/src/Heading.tsx b/packages/react-aria-components/src/Heading.tsx index e4ecc531a3d..d8d1968ddc6 100644 --- a/packages/react-aria-components/src/Heading.tsx +++ b/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 { level?: number } -export const HeadingContext = createContext>({}); - function Heading(props: HeadingProps, ref: ForwardedRef) { [props, ref] = useContextProps(props, ref, HeadingContext); let {children, level = 3, className, ...domProps} = props; diff --git a/packages/react-aria-components/src/RSPContexts.ts b/packages/react-aria-components/src/RSPContexts.ts new file mode 100644 index 00000000000..2b5db6a7462 --- /dev/null +++ b/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>(null); +export const ColorAreaContext = createContext, HTMLDivElement>>(null); +export const ColorFieldContext = createContext>(null); +export const ColorSliderContext = createContext, HTMLDivElement>>(null); +export const ColorWheelContext = createContext, HTMLDivElement>>(null); +export const HeadingContext = createContext>({}); diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index 336af09f4e1..49211247eda 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/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'; diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx index 507e7d2d508..870cef2aa05 100644 --- a/packages/react-aria-components/src/Tree.tsx +++ b/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'; diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts index d38bd3f191b..b20428296fa 100644 --- a/packages/react-aria-components/src/index.ts +++ b/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';