Fix React Aria Components tree shaking (#4357)

Author: devongovett

.eslintrc.js

@@ -118,7 +118,7 @@ module.exports = {
     'no-unused-vars': [ERROR, {args: 'none', vars: 'all', varsIgnorePattern: '[rR]eact'}],
     'space-in-parens': [ERROR, 'never'],
     'space-unary-ops': [ERROR, {words: true, nonwords: false}],
-    'spaced-comment': [ERROR, 'always', {exceptions: ['*'], markers: ['/']}],
+    'spaced-comment': [ERROR, 'always', {exceptions: ['*', '#__PURE__'], markers: ['/']}],
     'max-depth': [WARN, 4],
     'radix': [ERROR, 'always'],
     'react/jsx-uses-react': WARN,

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

@@ -56,7 +56,7 @@ function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: Forwarde
 /**
  * Breadcrumbs display a heirarchy of links to the current page or resource in an application.
  */
-const _Breadcrumbs = (forwardRef as forwardRefType)(Breadcrumbs);
+const _Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumbs);
 export {_Breadcrumbs as Breadcrumbs};
 
 interface BreadcrumbItemProps {

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

@@ -103,7 +103,7 @@ function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRe
 /**
  * A calendar displays one or more date grids and allows users to select a single date.
  */
-const _Calendar = (forwardRef as forwardRefType)(Calendar);
+const _Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(Calendar);
 export {_Calendar as Calendar};
 
 function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
@@ -172,7 +172,7 @@ function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: F
 /**
  * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
  */
-const _RangeCalendar = (forwardRef as forwardRefType)(RangeCalendar);
+const _RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(RangeCalendar);
 export {_RangeCalendar as RangeCalendar};
 
 export interface CalendarCellRenderProps {

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

@@ -125,5 +125,5 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
 /**
  * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
  */
-const _ComboBox = (forwardRef as forwardRefType)(ComboBox);
+const _ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ComboBox);
 export {_ComboBox as ComboBox};

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

@@ -72,7 +72,7 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
  * A date field allows users to enter and edit date and time values using a keyboard.
  * Each part of a date value is displayed in an individually editable segment.
  */
-const _DateField = (forwardRef as forwardRefType)(DateField);
+const _DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(DateField);
 export {_DateField as DateField};
 
 function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
@@ -116,7 +116,7 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
  */
-const _TimeField = (forwardRef as forwardRefType)(TimeField);
+const _TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(TimeField);
 export {_TimeField as TimeField};
 
 const InternalDateInputContext = createContext<DateFieldState| null>(null);

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

@@ -88,7 +88,7 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
 /**
  * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
  */
-const _DatePicker = (forwardRef as forwardRefType)(DatePicker);
+const _DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(DatePicker);
 export {_DatePicker as DatePicker};
 
 function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
@@ -174,5 +174,5 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
  * A date range picker combines two DateFields and a RangeCalendar popover to allow
  * users to enter or select a date and time range.
  */
-const _DateRangePicker = (forwardRef as forwardRefType)(DateRangePicker);
+const _DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(DateRangePicker);
 export {_DateRangePicker as DateRangePicker};

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

@@ -222,7 +222,7 @@ function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<H
  * A grid list displays a list of interactive items, with support for keyboard navigation,
  * single or multiple selection, and row actions.
  */
-const _GridList = (forwardRef as forwardRefType)(GridList);
+const _GridList = /*#__PURE__*/ (forwardRef as forwardRefType)(GridList);
 export {_GridList as GridList};
 
 function GridListItem({item}) {

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

@@ -95,7 +95,7 @@ function ListBoxPortal({props, listBoxRef}) {
 /**
  * A listbox displays a list of options and allows a user to select one or more of them.
  */
-const _ListBox = (forwardRef as forwardRefType)(ListBox);
+const _ListBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ListBox);
 export {_ListBox as ListBox};
 
 interface ListBoxInnerProps<T> {

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

@@ -119,7 +119,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
 /**
  * A menu displays a list of actions or options that a user can choose.
  */
-const _Menu = (forwardRef as forwardRefType)(Menu);
+const _Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(Menu);
 export {_Menu as Menu};
 
 interface MenuSectionProps<T> extends StyleProps {

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

@@ -115,7 +115,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
 /**
  * A select displays a collapsible list of options and allows a user to select one of them.
  */
-const _Select = (forwardRef as forwardRefType)(Select);
+const _Select = /*#__PURE__*/ (forwardRef as forwardRefType)(Select);
 export {_Select as Select};
 
 export interface SelectValueRenderProps<T> {
@@ -176,5 +176,5 @@ function SelectValue<T extends object>(props: SelectValueProps<T>, ref: Forwarde
  * SelectValue renders the current value of a Select, or a placeholder if no value is selected.
  * It is usually placed within the button element.
  */
-const _SelectValue = (forwardRef as forwardRefType)(SelectValue);
+const _SelectValue = /*#__PURE__*/ (forwardRef as forwardRefType)(SelectValue);
 export {_SelectValue as SelectValue};