diff --git a/.changeset/angry-moose-promise.md b/.changeset/angry-moose-promise.md new file mode 100644 index 000000000..49c888a85 --- /dev/null +++ b/.changeset/angry-moose-promise.md @@ -0,0 +1,6 @@ +--- +"@launchpad-ui/components": minor +"@launchpad-ui/icons": minor +--- + +Use `ref` prop instead of `forwardRef` and drop React 18 support diff --git a/packages/components/package.json b/packages/components/package.json index 2d8bab566..d66cb85ee 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -48,8 +48,8 @@ "react-router": "7.0.1" }, "peerDependencies": { - "react": "^18.0.0 || ^19.0.0", - "react-dom": "^18.0.0 || ^19.0.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "devDependencies": { "react": "19.0.0", diff --git a/packages/components/src/Alert.tsx b/packages/components/src/Alert.tsx index 66371daab..fdd79ed2d 100644 --- a/packages/components/src/Alert.tsx +++ b/packages/components/src/Alert.tsx @@ -1,10 +1,9 @@ import type { VariantProps } from 'class-variance-authority'; -import type { ForwardedRef, HTMLAttributes } from 'react'; +import type { HTMLAttributes, RefObject } from 'react'; import { StatusIcon } from '@launchpad-ui/icons'; import { useControlledState } from '@react-stately/utils'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { HeadingContext, Provider } from 'react-aria-components'; import { IconButton } from './IconButton'; @@ -37,21 +36,20 @@ interface AlertProps extends HTMLAttributes, AlertVariants { isDismissable?: boolean; isOpen?: boolean; onDismiss?: () => void; + ref?: RefObject; } -const _Alert = ( - { - className, - children, - status = 'neutral', - variant = 'default', - isDismissable, - isOpen, - onDismiss, - ...props - }: AlertProps, - ref: ForwardedRef, -) => { +const Alert = ({ + className, + children, + status = 'neutral', + variant = 'default', + isDismissable, + isOpen, + onDismiss, + ref, + ...props +}: AlertProps) => { const [open, setOpen] = useControlledState(isOpen, true, (val) => !val && onDismiss?.()); return open ? ( @@ -75,7 +73,5 @@ const _Alert = ( ) : null; }; -const Alert = forwardRef(_Alert); - export { Alert }; export type { AlertProps }; diff --git a/packages/components/src/Breadcrumbs.tsx b/packages/components/src/Breadcrumbs.tsx index c0dc355f8..9adc170c8 100644 --- a/packages/components/src/Breadcrumbs.tsx +++ b/packages/components/src/Breadcrumbs.tsx @@ -1,10 +1,13 @@ -import type { forwardRefType } from '@react-types/shared'; -import type { ForwardedRef } from 'react'; -import type { BreadcrumbProps, BreadcrumbsProps, ContextValue } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { + BreadcrumbProps as AriaBreadcrumbProps, + BreadcrumbsProps as AriaBreadcrumbsProps, + ContextValue, +} from 'react-aria-components'; import type { LinkProps } from './Link'; import { cva } from 'class-variance-authority'; -import { createContext, forwardRef } from 'react'; +import { createContext } from 'react'; import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs, @@ -19,21 +22,29 @@ const crumb = cva(styles.crumb); const LinkContext = createContext>(null); -const _Breadcrumbs = ( - { className, ...props }: BreadcrumbsProps, - ref: ForwardedRef, -) => { - return ; -}; +interface BreadcrumbsProps extends AriaBreadcrumbsProps { + ref?: RefObject; +} + +interface BreadcrumbProps extends AriaBreadcrumbProps { + ref?: RefObject; +} /** * Breadcrumbs display a hierarchy of links to the current page or resource in an application. * * https://react-spectrum.adobe.com/react-aria/Breadcrumbs.html */ -const Breadcrumbs = (forwardRef as forwardRefType)(_Breadcrumbs); +const Breadcrumbs = ({ className, ref, ...props }: BreadcrumbsProps) => { + return ; +}; -const _Breadcrumb = (props: BreadcrumbProps, ref: ForwardedRef) => { +/** + * A Breadcrumb represents an individual item in a `` list. + * + * https://react-spectrum.adobe.com/react-aria/Breadcrumbs.html + */ +const Breadcrumb = ({ ref, ...props }: BreadcrumbProps) => { return ( ) = ); }; -/** - * A Breadcrumb represents an individual item in a `` list. - * - * https://react-spectrum.adobe.com/react-aria/Breadcrumbs.html - */ -const Breadcrumb = forwardRef(_Breadcrumb); - export { Breadcrumbs, Breadcrumb, LinkContext }; export type { BreadcrumbsProps, BreadcrumbProps }; diff --git a/packages/components/src/Button.tsx b/packages/components/src/Button.tsx index 960b36e75..6a3684778 100644 --- a/packages/components/src/Button.tsx +++ b/packages/components/src/Button.tsx @@ -1,9 +1,9 @@ import type { VariantProps } from 'class-variance-authority'; -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { ButtonProps as AriaButtonProps } from 'react-aria-components'; import { cva, cx } from 'class-variance-authority'; -import { forwardRef, useContext } from 'react'; +import { useContext } from 'react'; import { Button as AriaButton, Provider, @@ -40,12 +40,16 @@ const button = cva(styles.base, { }); interface ButtonVariants extends VariantProps {} -interface ButtonProps extends AriaButtonProps, ButtonVariants {} +interface ButtonProps extends AriaButtonProps, ButtonVariants { + ref?: RefObject; +} -const _Button = ( - { size = 'medium', variant = 'default', ...props }: ButtonProps, - ref: ForwardedRef, -) => { +/** + * A button allows a user to perform an action, with mouse, touch, and keyboard interactions. + * + * https://react-spectrum.adobe.com/react-aria/Button.html + */ +const Button = ({ size = 'medium', variant = 'default', ref, ...props }: ButtonProps) => { const selectContext = useSlottedContext(SelectContext); const state = useContext(SelectStateContext); const ctx = useContext(PerceivableContext); @@ -73,12 +77,5 @@ const _Button = ( ); }; -/** - * A button allows a user to perform an action, with mouse, touch, and keyboard interactions. - * - * https://react-spectrum.adobe.com/react-aria/Button.html - */ -const Button = forwardRef(_Button); - export { Button, button }; export type { ButtonProps, ButtonVariants }; diff --git a/packages/components/src/ButtonGroup.tsx b/packages/components/src/ButtonGroup.tsx index 8ea5d0495..1a5c08b35 100644 --- a/packages/components/src/ButtonGroup.tsx +++ b/packages/components/src/ButtonGroup.tsx @@ -1,10 +1,9 @@ import type { Orientation } from '@react-types/shared'; import type { VariantProps } from 'class-variance-authority'; -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { GroupProps } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { ButtonContext, Group, @@ -34,12 +33,15 @@ const buttonGroup = cva(styles.base, { interface ButtonGroupProps extends GroupProps, VariantProps { orientation?: Orientation | null; + ref?: RefObject; } -const _ButtonGroup = ( - { spacing = 'basic', orientation = 'horizontal', ...props }: ButtonGroupProps, - ref: ForwardedRef, -) => { +const ButtonGroup = ({ + spacing = 'basic', + orientation = 'horizontal', + ref, + ...props +}: ButtonGroupProps) => { return ( {} +interface CalendarPickerProps extends HTMLAttributes { + ref?: RefObject; +} interface PresetProps extends Omit { value: CalendarDate | RangeValue; + ref?: RefObject; } const calendar = cva(styles.calendar); const cell = cva(styles.cell); const range = cva(styles.range); -const _Calendar = ( - props: CalendarProps, - ref: ForwardedRef, -) => { +interface CalendarProps extends AriaCalendarProps { + ref?: RefObject; +} + +interface CalendarCellProps extends AriaCalendarCellProps { + ref?: RefObject; +} + +interface RangeCalendarProps extends AriaRangeCalendarProps { + ref?: RefObject; +} + +/** + * A calendar displays one or more date grids and allows users to select a single date. + * + * https://react-spectrum.adobe.com/react-aria/Calendar.html + */ +const Calendar = ({ ref, ...props }: CalendarProps) => { return ( ( }; /** - * A calendar displays one or more date grids and allows users to select a single date. + * A calendar cell displays a date cell within a calendar grid which can be selected by the user. * * https://react-spectrum.adobe.com/react-aria/Calendar.html */ -const Calendar = forwardRef(_Calendar); - -const _CalendarCell = (props: CalendarCellProps, ref: ForwardedRef) => { +const CalendarCell = ({ ref, ...props }: CalendarCellProps) => { return ( ( - props: RangeCalendarProps, - ref: ForwardedRef, -) => { +const RangeCalendar = ({ ref, ...props }: RangeCalendarProps) => { return ( ( ); }; -/** - * A range calendar displays one or more date grids and allows users to select a contiguous range of dates. - * - * https://react-spectrum.adobe.com/react-aria/RangeCalendar.html - */ -const RangeCalendar = forwardRef(_RangeCalendar); - -const _CalendarPicker = ( - { children, className, ...props }: CalendarPickerProps, - ref: ForwardedRef, -) => { +const CalendarPicker = ({ children, className, ref, ...props }: CalendarPickerProps) => { const [value, onChange] = useState(); const [range, onChangeRange] = useState(); const [focusedValue, onFocusChange] = useState(); @@ -133,9 +133,7 @@ const _CalendarPicker = ( ); }; -const CalendarPicker = forwardRef(_CalendarPicker); - -const _Preset = ({ value, ...props }: PresetProps, ref: ForwardedRef) => { +const Preset = ({ value, ref, ...props }: PresetProps) => { const context = useSlottedContext(CalendarContext); const rangeContext = useSlottedContext(RangeCalendarContext); const onPress = () => { @@ -150,8 +148,6 @@ const _Preset = ({ value, ...props }: PresetProps, ref: ForwardedRef; }; -const Preset = forwardRef(_Preset); - export { Calendar, CalendarCell, diff --git a/packages/components/src/Checkbox.tsx b/packages/components/src/Checkbox.tsx index 471f19792..73196bb2a 100644 --- a/packages/components/src/Checkbox.tsx +++ b/packages/components/src/Checkbox.tsx @@ -1,9 +1,11 @@ -import type { ForwardedRef } from 'react'; -import type { CheckboxProps, CheckboxRenderProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { + CheckboxProps as AriaCheckboxProps, + CheckboxRenderProps, +} from 'react-aria-components'; import { Icon } from '@launchpad-ui/icons'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Checkbox as AriaCheckbox, composeRenderProps } from 'react-aria-components'; import styles from './styles/Checkbox.module.css'; @@ -21,7 +23,16 @@ const CheckboxInner = ({ isSelected, isIndeterminate }: Partial ); -const _Checkbox = (props: CheckboxProps, ref: ForwardedRef) => { +interface CheckboxProps extends AriaCheckboxProps { + ref?: RefObject; +} + +/** + * A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected. + * + * https://react-spectrum.adobe.com/react-aria/Checkbox.html + */ +const Checkbox = ({ ref, ...props }: CheckboxProps) => { return ( ) => ); }; -/** - * A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected. - * - * https://react-spectrum.adobe.com/react-aria/Checkbox.html - */ -const Checkbox = forwardRef(_Checkbox); - export { Checkbox, CheckboxInner, checkbox }; export type { CheckboxProps }; diff --git a/packages/components/src/CheckboxGroup.tsx b/packages/components/src/CheckboxGroup.tsx index 0164228d8..f1cd8bd01 100644 --- a/packages/components/src/CheckboxGroup.tsx +++ b/packages/components/src/CheckboxGroup.tsx @@ -1,15 +1,23 @@ -import type { ForwardedRef } from 'react'; -import type { CheckboxGroupProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { CheckboxGroup as AriaCheckboxGroup, composeRenderProps } from 'react-aria-components'; import styles from './styles/CheckboxGroup.module.css'; const group = cva(styles.group); -const _CheckboxGroup = (props: CheckboxGroupProps, ref: ForwardedRef) => { +interface CheckboxGroupProps extends AriaCheckboxGroupProps { + ref?: RefObject; +} + +/** + * A checkbox group allows a user to select multiple items from a list of options. + * + * https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html + */ +const CheckboxGroup = ({ ref, ...props }: CheckboxGroupProps) => { return ( ({}); -const _ComboBox = ( - props: ComboBoxProps, - ref: ForwardedRef, -) => { +interface ComboBoxProps extends AriaComboBoxProps { + ref?: RefObject; +} + +interface ComboBoxClearButtonProps extends Partial {} + +/** + * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query. + * + * https://react-spectrum.adobe.com/react-aria/ComboBox.html + */ +const ComboBox = ({ ref, ...props }: ComboBoxProps) => { const groupRef = useRef(null); // https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/ComboBox.tsx#L155-L170 const [groupWidth, setGroupWidth] = useState(null); @@ -68,17 +75,7 @@ const _ComboBox = ( ); }; -/** - * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query. - * - * https://react-spectrum.adobe.com/react-aria/ComboBox.html - */ -const ComboBox = (forwardRef as forwardRefType)(_ComboBox); - -const _ComboBoxClearButton = ( - props: Partial, - ref: ForwardedRef, -) => { +const ComboBoxClearButton = ({ ref, ...props }: ComboBoxClearButtonProps) => { const state = useContext(ComboBoxStateContext); return ( ( - props: DateFieldProps, - ref: ForwardedRef, -) => { +interface DateFieldProps extends AriaDateFieldProps { + ref?: RefObject; +} + +interface DateInputProps extends AriaDateInputProps { + ref?: RefObject; +} + +interface DateSegmentProps extends AriaDateSegmentProps { + ref?: RefObject; +} + +interface TimeFieldProps extends AriaTimeFieldProps { + ref?: RefObject; +} + +/** + * 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. + * + * https://react-spectrum.adobe.com/react-aria/DateField.html + */ +const DateField = ({ ref, ...props }: DateFieldProps) => { return ( ( }; /** - * 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. + * A date input groups the editable date segments within a date field. * * https://react-spectrum.adobe.com/react-aria/DateField.html */ -const DateField = forwardRef(_DateField); - -const _DateInput = (props: DateInputProps, ref: ForwardedRef) => { +const DateInput = ({ ref, ...props }: DateInputProps) => { return ( ) => }; /** - * A date input groups the editable date segments within a date field. + * A date segment displays an individual unit of a date and time, and allows users to edit the value by typing or using the arrow keys to increment and decrement. * * https://react-spectrum.adobe.com/react-aria/DateField.html */ -const DateInput = forwardRef(_DateInput); - -const _DateSegment = (props: DateSegmentProps, ref: ForwardedRef) => { +const DateSegment = ({ ref, ...props }: DateSegmentProps) => { return ( }; /** - * A date segment displays an individual unit of a date and time, and allows users to edit the value by typing or using the arrow keys to increment and decrement. + * 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. * - * https://react-spectrum.adobe.com/react-aria/DateField.html + * https://react-spectrum.adobe.com/react-aria/TimeField.html */ -const DateSegment = forwardRef(_DateSegment); - -const _TimeField = ( - props: TimeFieldProps, - ref: ForwardedRef, -) => { +const TimeField = ({ ref, ...props }: TimeFieldProps) => { return ( ( ); }; -/** - * 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. - * - * https://react-spectrum.adobe.com/react-aria/TimeField.html - */ -const TimeField = forwardRef(_TimeField); - export { DateField, DateInput, DateSegment, TimeField }; export type { DateFieldProps, DateInputProps, DateSegmentProps, TimeFieldProps }; diff --git a/packages/components/src/DatePicker.tsx b/packages/components/src/DatePicker.tsx index f8792bcf3..729f0c4c3 100644 --- a/packages/components/src/DatePicker.tsx +++ b/packages/components/src/DatePicker.tsx @@ -1,8 +1,11 @@ -import type { ForwardedRef } from 'react'; -import type { DatePickerProps, DateRangePickerProps, DateValue } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { + DatePickerProps as AriaDatePickerProps, + DateRangePickerProps as AriaDateRangePickerProps, + DateValue, +} from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { DatePicker as AriaDatePicker, DateRangePicker as AriaDateRangePicker, @@ -13,10 +16,20 @@ import styles from './styles/DatePicker.module.css'; const picker = cva(styles.picker); -const _DatePicker = ( - props: DatePickerProps, - ref: ForwardedRef, -) => { +interface DatePickerProps extends AriaDatePickerProps { + ref?: RefObject; +} + +interface DateRangePickerProps extends AriaDateRangePickerProps { + ref?: RefObject; +} + +/** + * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value. + * + * https://react-spectrum.adobe.com/react-aria/DatePicker.html + */ +const DatePicker = ({ ref, ...props }: DatePickerProps) => { return ( ( }; /** - * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value. + * A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range. * - * https://react-spectrum.adobe.com/react-aria/DatePicker.html + * https://react-spectrum.adobe.com/react-aria/DateRangePicker.html */ -const DatePicker = forwardRef(_DatePicker); - -const _DateRangePicker = ( - props: DateRangePickerProps, - ref: ForwardedRef, -) => { +const DateRangePicker = ({ ref, ...props }: DateRangePickerProps) => { return ( ( ); }; -/** - * A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range. - * - * https://react-spectrum.adobe.com/react-aria/DateRangePicker.html - */ -const DateRangePicker = forwardRef(_DateRangePicker); - export { DatePicker, DateRangePicker }; export type { DatePickerProps, DateRangePickerProps }; diff --git a/packages/components/src/Dialog.tsx b/packages/components/src/Dialog.tsx index dd82699a4..456f773c2 100644 --- a/packages/components/src/Dialog.tsx +++ b/packages/components/src/Dialog.tsx @@ -1,9 +1,8 @@ -import type { ForwardedRef } from 'react'; -import type { DialogProps, DialogTriggerProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { DialogProps as AriaDialogProps, DialogTriggerProps } from 'react-aria-components'; import { useSlotId } from '@react-aria/utils'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Dialog as AriaDialog, DialogTrigger, @@ -16,7 +15,16 @@ import styles from './styles/Dialog.module.css'; const dialog = cva(styles.dialog); -const _Dialog = ({ className, ...props }: DialogProps, ref: ForwardedRef) => { +interface DialogProps extends AriaDialogProps { + ref?: RefObject; +} + +/** + * A dialog is an overlay shown above other content in an application. + * + * https://react-spectrum.adobe.com/react-aria/Dialog.html + */ +const Dialog = ({ className, ref, ...props }: DialogProps) => { const descriptionId = useSlotId(); return ( , -) => { - return ; -}; +interface DisclosureProps extends AriaDisclosureProps { + ref?: RefObject; +} + +interface DisclosurePanelProps extends AriaDisclosurePanelProps { + ref?: RefObject; +} /** * A disclosure is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content. * * https://react-spectrum.adobe.com/react-aria/Disclosure.html */ -const Disclosure = forwardRef(_Disclosure); - -const _DisclosurePanel = ( - { className, ...props }: DisclosurePanelProps, - ref: ForwardedRef, -) => { - return ; +const Disclosure = ({ className, ref, ...props }: DisclosureProps) => { + return ; }; /** @@ -39,7 +37,9 @@ const _DisclosurePanel = ( * * https://react-spectrum.adobe.com/react-aria/Disclosure.html */ -const DisclosurePanel = forwardRef(_DisclosurePanel); +const DisclosurePanel = ({ className, ref, ...props }: DisclosurePanelProps) => { + return ; +}; export { Disclosure, DisclosurePanel }; export type { DisclosureProps, DisclosurePanelProps }; diff --git a/packages/components/src/DropIndicator.tsx b/packages/components/src/DropIndicator.tsx index b4c7fa356..a95a42fdc 100644 --- a/packages/components/src/DropIndicator.tsx +++ b/packages/components/src/DropIndicator.tsx @@ -1,15 +1,21 @@ -import type { ForwardedRef } from 'react'; -import type { DropIndicatorProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { DropIndicatorProps as AriaDropIndicatorProps } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { DropIndicator as AriaDropIndicator, composeRenderProps } from 'react-aria-components'; import styles from './styles/DropIndicator.module.css'; const indicator = cva(styles.indicator); -const _DropIndicator = (props: DropIndicatorProps, ref: ForwardedRef) => { +interface DropIndicatorProps extends AriaDropIndicatorProps { + ref?: RefObject; +} + +/** + * A DropIndicator is rendered between items in a collection to indicate where dropped data will be inserted. + */ +const DropIndicator = ({ ref, ...props }: DropIndicatorProps) => { return ( ) => { - return ; -}; +interface DropZoneProps extends AriaDropZoneProps { + ref?: RefObject; +} /** * A drop zone is an area into which one or multiple objects can be dragged and dropped. * * https://react-spectrum.adobe.com/react-aria/DropZone.html */ -const DropZone = forwardRef(_DropZone); +const DropZone = ({ className, ref, ...props }: DropZoneProps) => { + return ; +}; export { DropZone }; export type { DropZoneProps }; diff --git a/packages/components/src/FieldError.tsx b/packages/components/src/FieldError.tsx index eb37d5d96..82a318834 100644 --- a/packages/components/src/FieldError.tsx +++ b/packages/components/src/FieldError.tsx @@ -1,15 +1,21 @@ -import type { ForwardedRef } from 'react'; -import type { FieldErrorProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { FieldErrorProps as AriaFieldErrorProps } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { FieldError as AriaFieldError, composeRenderProps } from 'react-aria-components'; import styles from './styles/FieldError.module.css'; const error = cva(styles.error); -const _FieldError = (props: FieldErrorProps, ref: ForwardedRef) => { +interface FieldErrorProps extends AriaFieldErrorProps { + ref?: RefObject; +} + +/** + * A FieldError displays validation errors for a form field. + */ +const FieldError = ({ ref, ...props }: FieldErrorProps) => { return ( ) => ); }; -/** - * A FieldError displays validation errors for a form field. - */ -const FieldError = forwardRef(_FieldError); - export { FieldError }; export type { FieldErrorProps }; diff --git a/packages/components/src/FieldGroup.tsx b/packages/components/src/FieldGroup.tsx index e6398b639..2a1004a72 100644 --- a/packages/components/src/FieldGroup.tsx +++ b/packages/components/src/FieldGroup.tsx @@ -1,7 +1,7 @@ -import type { ContextType, FieldsetHTMLAttributes, ForwardedRef } from 'react'; +import type { ContextType, FieldsetHTMLAttributes, RefObject } from 'react'; import { cva } from 'class-variance-authority'; -import { forwardRef, useId } from 'react'; +import { useId } from 'react'; import { ComboBoxContext, DateFieldContext, @@ -22,14 +22,23 @@ interface FieldGroupProps extends FieldsetHTMLAttributes { title?: string; errorMessage?: string; isDisabled?: boolean; + ref?: RefObject; } const group = cva(styles.group); -const _FieldGroup = ( - { title, children, errorMessage, isDisabled, className, ...props }: FieldGroupProps, - ref: ForwardedRef, -) => { +/** + * A field group represents a set of related form elements in a form. + */ +const FieldGroup = ({ + title, + children, + errorMessage, + isDisabled, + className, + ref, + ...props +}: FieldGroupProps) => { const errorId = useId(); const state = { isInvalid: !!errorMessage, @@ -63,10 +72,5 @@ const _FieldGroup = ( ); }; -/** - * A field group represents a set of related form elements in a form. - */ -const FieldGroup = forwardRef(_FieldGroup); - export { FieldGroup }; export type { FieldGroupProps }; diff --git a/packages/components/src/GridList.tsx b/packages/components/src/GridList.tsx index 339971e9b..4562f7932 100644 --- a/packages/components/src/GridList.tsx +++ b/packages/components/src/GridList.tsx @@ -1,9 +1,10 @@ -import type { forwardRefType } from '@react-types/shared'; -import type { ForwardedRef } from 'react'; -import type { GridListItemProps, GridListProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { + GridListItemProps as AriaGridListItemProps, + GridListProps as AriaGridListProps, +} from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { GridList as AriaGridList, GridListItem as AriaGridListItem, @@ -17,10 +18,20 @@ import styles from './styles/GridList.module.css'; const list = cva(styles.list); const item = cva(styles.item); -const _GridList = ( - props: GridListProps, - ref: ForwardedRef, -) => { +interface GridListProps extends AriaGridListProps { + ref?: RefObject; +} + +interface GridListItemProps extends AriaGridListItemProps { + ref?: RefObject; +} + +/** + * A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions. + * + * https://react-spectrum.adobe.com/react-aria/GridList.html + */ +const GridList = ({ ref, ...props }: GridListProps) => { return ( ( }; /** - * A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions. + * A GridListItem represents an individual item in a GridList. * * https://react-spectrum.adobe.com/react-aria/GridList.html */ -const GridList = (forwardRef as forwardRefType)(_GridList); - -const _GridListItem = (props: GridListItemProps, ref: ForwardedRef) => { +const GridListItem = ({ ref, ...props }: GridListItemProps) => { const textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined); return ( @@ -70,12 +79,5 @@ const _GridListItem = (props: GridListItemProps, ref: Forwa ); }; -/** - * A GridListItem represents an individual item in a GridList. - * - * https://react-spectrum.adobe.com/react-aria/GridList.html - */ -const GridListItem = (forwardRef as forwardRefType)(_GridListItem); - export { GridList, GridListItem }; export type { GridListProps, GridListItemProps }; diff --git a/packages/components/src/Group.tsx b/packages/components/src/Group.tsx index 7be34e5d8..0899c5bd4 100644 --- a/packages/components/src/Group.tsx +++ b/packages/components/src/Group.tsx @@ -1,9 +1,8 @@ -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { GroupProps as AriaGroupProps } from 'react-aria-components'; import type { InputVariants } from './Input'; import { cva, cx } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Group as AriaGroup, composeRenderProps } from 'react-aria-components'; import { input } from './Input'; @@ -11,12 +10,16 @@ import styles from './styles/Group.module.css'; const group = cva(styles.group); -interface GroupProps extends AriaGroupProps, InputVariants {} +interface GroupProps extends AriaGroupProps, InputVariants { + ref?: RefObject; +} -const _Group = ( - { variant = 'default', ...props }: GroupProps, - ref: ForwardedRef, -) => { +/** + * A group represents a set of related UI controls, and supports interactive states for styling. + * + * https://react-spectrum.adobe.com/react-aria/Group.html + */ +const Group = ({ variant = 'default', ref, ...props }: GroupProps) => { return ( , - ref: ForwardedRef, -) => { +interface HeaderProps extends HTMLAttributes { + ref?: RefObject; +} + +const Header = ({ className, ref, ...props }: HeaderProps) => { return ; }; -const Header = forwardRef(_Header); - export { Header }; +export type { HeaderProps }; diff --git a/packages/components/src/Heading.tsx b/packages/components/src/Heading.tsx index 302618abd..c689ed11d 100644 --- a/packages/components/src/Heading.tsx +++ b/packages/components/src/Heading.tsx @@ -1,19 +1,20 @@ -import type { ForwardedRef } from 'react'; -import type { HeadingProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { HeadingProps as AriaHeadingProps } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Heading as AriaHeading } from 'react-aria-components'; import styles from './styles/Heading.module.css'; const heading = cva(styles.heading); -const _Heading = ({ className, ...props }: HeadingProps, ref: ForwardedRef) => { +interface HeadingProps extends AriaHeadingProps { + ref?: RefObject; +} + +const Heading = ({ className, ref, ...props }: HeadingProps) => { return ; }; -const Heading = forwardRef(_Heading); - export { Heading }; export type { HeadingProps }; diff --git a/packages/components/src/IconButton.tsx b/packages/components/src/IconButton.tsx index 1f908c743..a14f8d828 100644 --- a/packages/components/src/IconButton.tsx +++ b/packages/components/src/IconButton.tsx @@ -1,13 +1,13 @@ import type { IconProps } from '@launchpad-ui/icons'; import type { AriaLabelingProps } from '@react-types/shared'; import type { VariantProps } from 'class-variance-authority'; -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { ButtonProps as AriaButtonProps } from 'react-aria-components'; import type { ButtonVariants } from './Button'; import { Icon } from '@launchpad-ui/icons'; import { cva, cx } from 'class-variance-authority'; -import { forwardRef, useContext } from 'react'; +import { useContext } from 'react'; import { Button as AriaButton, composeRenderProps } from 'react-aria-components'; import { button } from './Button'; @@ -38,12 +38,22 @@ interface IconButtonBaseProps } interface IconButtonProps extends Omit, - IconButtonBaseProps {} + IconButtonBaseProps { + ref?: RefObject; +} -const _IconButton = ( - { size = 'medium', variant = 'default', icon, ...props }: IconButtonProps, - ref: ForwardedRef, -) => { +/** + * A button allows a user to perform an action, with mouse, touch, and keyboard interactions. + * + * https://react-spectrum.adobe.com/react-aria/Button.html + */ +const IconButton = ({ + size = 'medium', + variant = 'default', + icon, + ref, + ...props +}: IconButtonProps) => { const ctx = useContext(PerceivableContext); return ( {} -interface InputProps extends AriaInputProps, InputVariants {} +interface InputProps extends AriaInputProps, InputVariants { + ref?: RefObject; +} -const _Input = ( - { variant = 'default', ...props }: InputProps, - ref: ForwardedRef, -) => { +/** + * An input allows a user to input text. + * + * https://react-spectrum.adobe.com/react-aria/TextField.html + */ +const Input = ({ variant = 'default', ref, ...props }: InputProps) => { return ( ) => { +interface LabelProps extends AriaLabelProps { + ref?: RefObject; +} + +const Label = ({ className, ref, ...props }: LabelProps) => { return ; }; -const Label = forwardRef(_Label); - export { Label }; export type { LabelProps }; diff --git a/packages/components/src/Link.tsx b/packages/components/src/Link.tsx index 549456f80..d4f3371de 100644 --- a/packages/components/src/Link.tsx +++ b/packages/components/src/Link.tsx @@ -1,11 +1,10 @@ import type { DOMProps } from '@react-types/shared'; import type { VariantProps } from 'class-variance-authority'; -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { LinkProps as AriaLinkProps } from 'react-aria-components'; import { Icon } from '@launchpad-ui/icons'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Link as AriaLink, composeRenderProps, useSlottedContext } from 'react-aria-components'; import { LinkContext } from './Breadcrumbs'; @@ -23,12 +22,16 @@ const link = cva(styles.base, { }, }); -interface LinkProps extends AriaLinkProps, VariantProps, DOMProps {} +interface LinkProps extends AriaLinkProps, VariantProps, DOMProps { + ref?: RefObject; +} -const _Link = ( - { variant = 'default', href, ...props }: LinkProps, - ref: ForwardedRef, -) => { +/** + * A link allows a user to navigate to another page or resource within a web page or application. + * + * https://react-spectrum.adobe.com/react-aria/Link.html + */ +const Link = ({ variant = 'default', href, ref, ...props }: LinkProps) => { const linkProps = useSlottedContext(LinkContext); return ( @@ -47,12 +50,5 @@ const _Link = ( ); }; -/** - * A link allows a user to navigate to another page or resource within a web page or application. - * - * https://react-spectrum.adobe.com/react-aria/Link.html - */ -const Link = forwardRef(_Link); - export { Link }; export type { LinkProps }; diff --git a/packages/components/src/LinkButton.tsx b/packages/components/src/LinkButton.tsx index 4a5f1b9a8..ba2e618c5 100644 --- a/packages/components/src/LinkButton.tsx +++ b/packages/components/src/LinkButton.tsx @@ -1,8 +1,6 @@ -import type { ForwardedRef } from 'react'; import type { ButtonVariants } from './Button'; import type { LinkProps } from './Link'; -import { forwardRef } from 'react'; import { composeRenderProps } from 'react-aria-components'; import { button } from './Button'; @@ -10,10 +8,12 @@ import { Link } from './Link'; interface LinkButtonProps extends Omit, ButtonVariants {} -const _LinkButton = ( - { size = 'medium', variant = 'default', ...props }: LinkButtonProps, - ref: ForwardedRef, -) => { +/** + * A link allows a user to navigate to another page or resource within a web page or application. + * + * https://react-spectrum.adobe.com/react-aria/Link.html + */ +const LinkButton = ({ size = 'medium', variant = 'default', ref, ...props }: LinkButtonProps) => { return ( , IconButtonBaseProps {} -const _LinkIconButton = ( - { size = 'medium', variant = 'default', icon, ...props }: LinkIconButtonProps, - ref: ForwardedRef, -) => { +/** + * A link allows a user to navigate to another page or resource within a web page or application. + * + * https://react-spectrum.adobe.com/react-aria/Link.html + */ +const LinkIconButton = ({ + size = 'medium', + variant = 'default', + icon, + ref, + ...props +}: LinkIconButtonProps) => { return ( (props: ListBoxProps, ref: ForwardedRef) => { +interface ListBoxProps extends AriaListBoxProps { + ref?: RefObject; +} +interface ListBoxItemProps extends AriaListBoxItemProps { + ref?: RefObject; +} + +/** + * A listbox displays a list of options and allows a user to select one or more of them. + * + * https://react-spectrum.adobe.com/react-aria/ListBox.html + */ +const ListBox = ({ ref, ...props }: ListBoxProps) => { return ( (props: ListBoxProps, ref: ForwardedRef(props: ListBoxItemProps, ref: ForwardedRef) => { +const ListBoxItem = ({ ref, ...props }: ListBoxItemProps) => { const textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined); return ( @@ -57,12 +68,5 @@ const _ListBoxItem = (props: ListBoxItemProps, ref: Forward ); }; -/** - * A ListBoxItem represents an individual option in a ListBox. - * - * https://react-spectrum.adobe.com/react-aria/ListBox.html - */ -const ListBoxItem = (forwardRef as forwardRefType)(_ListBoxItem); - export { ListBox, ListBoxItem }; export type { ListBoxProps, ListBoxItemProps }; diff --git a/packages/components/src/Menu.tsx b/packages/components/src/Menu.tsx index 30bc2b981..072bc0cb6 100644 --- a/packages/components/src/Menu.tsx +++ b/packages/components/src/Menu.tsx @@ -1,6 +1,5 @@ -import type { forwardRefType } from '@react-types/shared'; import type { VariantProps } from 'class-variance-authority'; -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { MenuItemProps as AriaMenuItemProps, MenuProps as AriaMenuProps, @@ -10,7 +9,6 @@ import type { import { Icon } from '@launchpad-ui/icons'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Menu as AriaMenu, MenuItem as AriaMenuItem, @@ -36,27 +34,26 @@ const item = cva(styles.item, { }, }); -interface MenuProps extends AriaMenuProps {} -interface MenuItemProps extends AriaMenuItemProps, VariantProps {} - -const _Menu = ( - { className, ...props }: MenuProps, - ref: ForwardedRef, -) => { - return ; -}; +interface MenuProps extends AriaMenuProps { + ref?: RefObject; +} +interface MenuItemProps extends AriaMenuItemProps, VariantProps { + ref?: RefObject; +} /** * A menu displays a list of actions or options that a user can choose. * * https://react-spectrum.adobe.com/react-aria/Menu.html */ -const Menu = (forwardRef as forwardRefType)(_Menu); +const Menu = ({ className, ref, ...props }: MenuProps) => { + return ; +}; -const _MenuItem = ( - { variant = 'default', ...props }: MenuItemProps, - ref: ForwardedRef, -) => { +/** + * A MenuItem represents an individual action in a Menu. + */ +const MenuItem = ({ variant = 'default', ref, ...props }: MenuItemProps) => { return ( ( ); }; -/** - * A MenuItem represents an individual action in a Menu. - */ -const MenuItem = (forwardRef as forwardRefType)(_MenuItem); - export { Menu, MenuItem, MenuTrigger, SubmenuTrigger }; export type { MenuProps, MenuItemProps, MenuTriggerProps, SubmenuTriggerProps }; diff --git a/packages/components/src/Meter.tsx b/packages/components/src/Meter.tsx index 9f16e3a76..e0416aeba 100644 --- a/packages/components/src/Meter.tsx +++ b/packages/components/src/Meter.tsx @@ -1,8 +1,7 @@ -import type { ForwardedRef } from 'react'; -import type { MeterProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { MeterProps as AriaMeterProps } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Meter as AriaMeter, composeRenderProps } from 'react-aria-components'; import styles from './styles/Meter.module.css'; @@ -10,7 +9,16 @@ const meter = cva(styles.meter); const icon = cva(styles.base); -const _Meter = (props: MeterProps, ref: ForwardedRef) => { +interface MeterProps extends AriaMeterProps { + ref?: RefObject; +} + +/** + * A meter represents a quantity within a known range, or a fractional value. + * + * https://react-spectrum.adobe.com/react-aria/Meter.html + */ +const Meter = ({ ref, ...props }: MeterProps) => { const center = 64; const strokeWidth = 8; const r = 64 - strokeWidth; @@ -53,12 +61,5 @@ const _Meter = (props: MeterProps, ref: ForwardedRef) => { ); }; -/** - * A meter represents a quantity within a known range, or a fractional value. - * - * https://react-spectrum.adobe.com/react-aria/Meter.html - */ -const Meter = forwardRef(_Meter); - export { Meter }; export type { MeterProps }; diff --git a/packages/components/src/Modal.tsx b/packages/components/src/Modal.tsx index 376df169d..83a7f4dec 100644 --- a/packages/components/src/Modal.tsx +++ b/packages/components/src/Modal.tsx @@ -1,9 +1,8 @@ import type { VariantProps } from 'class-variance-authority'; -import type { ForwardedRef } from 'react'; -import type { ModalOverlayProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { ModalOverlayProps as AriaModalOverlayProps } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Modal as AriaModal, ModalOverlay as AriaModalOverlay, @@ -31,12 +30,20 @@ const modal = cva(styles.base, { }); const overlay = cva(styles.overlay); -interface ModalProps extends ModalOverlayProps, VariantProps {} +interface ModalProps extends AriaModalOverlayProps, VariantProps { + ref?: RefObject; +} -const _Modal = ( - { size = 'medium', variant = 'default', ...props }: ModalProps, - ref: ForwardedRef, -) => { +interface ModalOverlayProps extends AriaModalOverlayProps, VariantProps { + ref?: RefObject; +} + +/** + * A modal is an overlay element which blocks interaction with elements outside it. + * + * https://react-spectrum.adobe.com/react-aria/Modal.html + */ +const Modal = ({ size = 'medium', variant = 'default', ref, ...props }: ModalProps) => { return ( , -) => { +const ModalOverlay = ({ isDismissable = true, ref, ...props }: ModalOverlayProps) => { return ( ) => { +interface NumberFieldProps extends AriaNumberFieldProps { + ref?: RefObject; +} + +/** + * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons. + * + * https://react-spectrum.adobe.com/react-aria/NumberField.html + */ +const NumberField = ({ ref, ...props }: NumberFieldProps) => { return ( ); }; -/** - * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons. - * - * https://react-spectrum.adobe.com/react-aria/NumberField.html - */ -const NumberField = forwardRef(_NumberField); - export { NumberField }; export type { NumberFieldProps }; diff --git a/packages/components/src/Popover.tsx b/packages/components/src/Popover.tsx index b402e400f..62195ed2e 100644 --- a/packages/components/src/Popover.tsx +++ b/packages/components/src/Popover.tsx @@ -1,11 +1,11 @@ -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { OverlayArrowProps as AriaOverlayArrowProps, PopoverProps as AriaPopoverProps, } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef, useContext } from 'react'; +import { useContext } from 'react'; import { OverlayArrow as AriaOverlayArrow, Popover as AriaPopover, @@ -15,13 +15,22 @@ import { import { PopoverContext } from './ComboBox'; import styles from './styles/Popover.module.css'; -interface PopoverProps extends AriaPopoverProps {} -interface OverlayArrowProps extends Omit {} +interface PopoverProps extends AriaPopoverProps { + ref?: RefObject; +} +interface OverlayArrowProps extends Omit { + ref?: RefObject; +} const popover = cva(styles.popover); const arrow = cva(styles.arrow); -const _Popover = (props: PopoverProps, ref: ForwardedRef) => { +/** + * A popover is an overlay element positioned relative to a trigger. + * + * https://react-spectrum.adobe.com/react-aria/Popover.html + */ +const Popover = ({ ref, ...props }: PopoverProps) => { const popoverProps = useContext(PopoverContext); return ( @@ -39,13 +48,11 @@ const _Popover = (props: PopoverProps, ref: ForwardedRef) => { }; /** - * A popover is an overlay element positioned relative to a trigger. + * An OverlayArrow renders a custom arrow element relative to an overlay element such as a popover or tooltip such that it aligns with a trigger element. * * https://react-spectrum.adobe.com/react-aria/Popover.html */ -const Popover = forwardRef(_Popover); - -const _OverlayArrow = (props: OverlayArrowProps, ref: ForwardedRef) => { +const OverlayArrow = ({ ref, ...props }: OverlayArrowProps) => { return ( extends AriaButtonProps, HoverEvents, - Pick, 'className'> {} - -const _Pressable = ( - { children, elementType, className, ...props }: PressableProps, - ref: ForwardedRef, -) => { + Pick, 'className'> { + ref?: RefObject; +} + +const Pressable = ({ + children, + elementType, + className, + ref, + ...props +}: PressableProps) => { const domRef = useObjectRef(ref); const ElementType = elementType || 'span'; @@ -48,7 +52,5 @@ const _Pressable = ( ); }; -const Pressable = forwardRef(_Pressable); - export { Pressable }; export type { PressableProps }; diff --git a/packages/components/src/ProgressBar.tsx b/packages/components/src/ProgressBar.tsx index b6eb7b5ca..79349a32b 100644 --- a/packages/components/src/ProgressBar.tsx +++ b/packages/components/src/ProgressBar.tsx @@ -1,9 +1,8 @@ import type { VariantProps } from 'class-variance-authority'; -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components'; import { cva, cx } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { ProgressBar as AriaProgressBar, composeRenderProps } from 'react-aria-components'; import styles from './styles/ProgressBar.module.css'; @@ -23,12 +22,16 @@ const icon = cva(styles.base, { }, }); -interface ProgressBarProps extends AriaProgressBarProps, VariantProps {} +interface ProgressBarProps extends AriaProgressBarProps, VariantProps { + ref?: RefObject; +} -const _ProgressBar = ( - { size = 'small', ...props }: ProgressBarProps, - ref: ForwardedRef, -) => { +/** + * Progress bars show either determinate or indeterminate progress of an operation over time. + * + * https://react-spectrum.adobe.com/react-aria/ProgressBar.html + */ +const ProgressBar = ({ size = 'small', ref, ...props }: ProgressBarProps) => { const center = 16; const strokeWidth = 4; const r = 16 - strokeWidth; @@ -72,12 +75,5 @@ const _ProgressBar = ( ); }; -/** - * Progress bars show either determinate or indeterminate progress of an operation over time. - * - * https://react-spectrum.adobe.com/react-aria/ProgressBar.html - */ -const ProgressBar = forwardRef(_ProgressBar); - export { ProgressBar }; export type { ProgressBarProps }; diff --git a/packages/components/src/Radio.tsx b/packages/components/src/Radio.tsx index 83c9be707..3703e3875 100644 --- a/packages/components/src/Radio.tsx +++ b/packages/components/src/Radio.tsx @@ -1,9 +1,8 @@ -import type { ForwardedRef } from 'react'; -import type { RadioProps, RadioRenderProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { RadioProps as AriaRadioProps, RadioRenderProps } from 'react-aria-components'; import { Icon } from '@launchpad-ui/icons'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Radio as AriaRadio, composeRenderProps } from 'react-aria-components'; import styles from './styles/Radio.module.css'; @@ -11,13 +10,22 @@ import styles from './styles/Radio.module.css'; const radio = cva(styles.radio); const circle = cva(styles.circle); +interface RadioProps extends AriaRadioProps { + ref?: RefObject; +} + const RadioInner = ({ isSelected }: Partial) => (
{isSelected ? : null}
); -const _Radio = (props: RadioProps, ref: ForwardedRef) => { +/** + * A radio represents an individual option within a radio group. + * + * https://react-spectrum.adobe.com/react-aria/RadioGroup.html + */ +const Radio = ({ ref, ...props }: RadioProps) => { return ( ) => { ); }; -/** - * A radio represents an individual option within a radio group. - * - * https://react-spectrum.adobe.com/react-aria/RadioGroup.html - */ -const Radio = forwardRef(_Radio); - export { Radio, RadioInner, radio }; export type { RadioProps }; diff --git a/packages/components/src/RadioButton.tsx b/packages/components/src/RadioButton.tsx index 5d4b55c07..ae9c26929 100644 --- a/packages/components/src/RadioButton.tsx +++ b/packages/components/src/RadioButton.tsx @@ -1,18 +1,21 @@ -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { RadioProps } from 'react-aria-components'; import type { ButtonVariants } from './Button'; -import { forwardRef } from 'react'; import { Radio as AriaRadio, composeRenderProps } from 'react-aria-components'; import { button } from './Button'; -interface RadioButtonProps extends RadioProps, ButtonVariants {} +interface RadioButtonProps extends RadioProps, ButtonVariants { + ref?: RefObject; +} -const _RadioButton = ( - { size = 'medium', variant = 'default', ...props }: RadioButtonProps, - ref: ForwardedRef, -) => { +/** + * A radio represents an individual option within a radio group. + * + * https://react-spectrum.adobe.com/react-aria/RadioGroup.html + */ +const RadioButton = ({ size = 'medium', variant = 'default', ref, ...props }: RadioButtonProps) => { return ( ) => { +interface RadioGroupProps extends AriaRadioGroupProps { + ref?: RefObject; +} + +/** + * A radio group allows a user to select a single item from a list of mutually exclusive options. + * + * https://react-spectrum.adobe.com/react-aria/RadioGroup.html + */ +const RadioGroup = ({ ref, ...props }: RadioGroupProps) => { return ( ) ); }; -/** - * A radio group allows a user to select a single item from a list of mutually exclusive options. - * - * https://react-spectrum.adobe.com/react-aria/RadioGroup.html - */ -const RadioGroup = forwardRef(_RadioGroup); - export { RadioGroup }; export type { RadioGroupProps }; diff --git a/packages/components/src/RadioIconButton.tsx b/packages/components/src/RadioIconButton.tsx index 209445161..d09bf83a2 100644 --- a/packages/components/src/RadioIconButton.tsx +++ b/packages/components/src/RadioIconButton.tsx @@ -1,10 +1,9 @@ -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { RadioProps } from 'react-aria-components'; import type { IconButtonBaseProps } from './IconButton'; import { Icon } from '@launchpad-ui/icons'; import { cx } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Radio as AriaRadio, composeRenderProps } from 'react-aria-components'; import { button } from './Button'; @@ -12,12 +11,22 @@ import { iconButton } from './IconButton'; interface RadioIconButtonProps extends Omit, - IconButtonBaseProps {} + IconButtonBaseProps { + ref?: RefObject; +} -const _RadioIconButton = ( - { size = 'medium', variant = 'default', icon, ...props }: RadioIconButtonProps, - ref: ForwardedRef, -) => { +/** + * A radio represents an individual option within a radio group. + * + * https://react-spectrum.adobe.com/react-aria/RadioGroup.html + */ +const RadioIconButton = ({ + size = 'medium', + variant = 'default', + icon, + ref, + ...props +}: RadioIconButtonProps) => { return ( ) => { +interface SearchFieldProps extends AriaSearchFieldProps { + ref?: RefObject; +} + +/** + * A search field allows a user to enter and clear a search query. + * + * https://react-spectrum.adobe.com/react-aria/SearchField.html + */ +const SearchField = ({ ref, ...props }: SearchFieldProps) => { return ( ); }; -/** - * A search field allows a user to enter and clear a search query. - * - * https://react-spectrum.adobe.com/react-aria/SearchField.html - */ -const SearchField = forwardRef(_SearchField); - export { SearchField }; export type { SearchFieldProps }; diff --git a/packages/components/src/Section.tsx b/packages/components/src/Section.tsx index 70dc2ac7c..1ddd5108e 100644 --- a/packages/components/src/Section.tsx +++ b/packages/components/src/Section.tsx @@ -1,9 +1,10 @@ -import type { forwardRefType } from '@react-types/shared'; -import type { ForwardedRef } from 'react'; -import type { ListBoxSectionProps, MenuSectionProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { + ListBoxSectionProps as AriaListBoxSectionProps, + MenuSectionProps as AriaMenuSectionProps, +} from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { ListBoxSection as AriaListBoxSection, MenuSection as AriaMenuSection, @@ -13,29 +14,27 @@ import styles from './styles/Section.module.css'; const section = cva(styles.section); -const _ListBoxSection = ( - { className, ...props }: ListBoxSectionProps, - ref: ForwardedRef, -) => { - return ; -}; +interface ListBoxSectionProps extends AriaListBoxSectionProps { + ref?: RefObject; +} + +interface MenuSectionProps extends AriaMenuSectionProps { + ref?: RefObject; +} /** * A ListBoxSection represents a section within a ListBox. */ -const ListBoxSection = (forwardRef as forwardRefType)(_ListBoxSection); - -const _MenuSection = ( - { className, ...props }: MenuSectionProps, - ref: ForwardedRef, -) => { - return ; +const ListBoxSection = ({ className, ref, ...props }: ListBoxSectionProps) => { + return ; }; /** * A MenuSection represents a section within a Menu. */ -const MenuSection = (forwardRef as forwardRefType)(_MenuSection); +const MenuSection = ({ className, ref, ...props }: MenuSectionProps) => { + return ; +}; export { ListBoxSection, MenuSection }; export type { ListBoxSectionProps, MenuSectionProps }; diff --git a/packages/components/src/Select.tsx b/packages/components/src/Select.tsx index e78be3514..d1665d1a2 100644 --- a/packages/components/src/Select.tsx +++ b/packages/components/src/Select.tsx @@ -1,9 +1,10 @@ -import type { forwardRefType } from '@react-types/shared'; -import type { ForwardedRef } from 'react'; -import type { SelectProps, SelectValueProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { + SelectProps as AriaSelectProps, + SelectValueProps as AriaSelectValueProps, +} from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Select as AriaSelect, SelectValue as AriaSelectValue, @@ -15,7 +16,20 @@ import styles from './styles/Select.module.css'; const select = cva(styles.select); const value = cva(styles.value); -const _Select = (props: SelectProps, ref: ForwardedRef) => { +interface SelectProps extends AriaSelectProps { + ref?: RefObject; +} + +interface SelectValueProps extends AriaSelectValueProps { + ref?: RefObject; +} + +/** + * A select displays a collapsible list of options and allows a user to select one of them. + * + * https://react-spectrum.adobe.com/react-aria/Select.html + */ +const Select = ({ ref, ...props }: SelectProps) => { return ( (props: SelectProps, ref: ForwardedRef( - props: SelectValueProps, - ref: ForwardedRef, -) => { +const SelectValue = ({ ref, ...props }: SelectValueProps) => { return ( ( ); }; -/** - * SelectValue renders the current value of a Select, or a placeholder if no value is selected. It is usually placed within the button element. - * - * https://react-spectrum.adobe.com/react-aria/Select.html - */ -const SelectValue = (forwardRef as forwardRefType)(_SelectValue); - export { Select, SelectValue }; export type { SelectProps, SelectValueProps }; diff --git a/packages/components/src/Separator.tsx b/packages/components/src/Separator.tsx index 1fdb2e623..74d34cb02 100644 --- a/packages/components/src/Separator.tsx +++ b/packages/components/src/Separator.tsx @@ -1,19 +1,20 @@ -import type { ForwardedRef } from 'react'; -import type { SeparatorProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { SeparatorProps as AriaSeparatorProps } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Separator as AriaSeparator } from 'react-aria-components'; import styles from './styles/Separator.module.css'; const separator = cva(styles.separator); -const _Separator = ({ className, ...props }: SeparatorProps, ref: ForwardedRef) => { +interface SeparatorProps extends AriaSeparatorProps { + ref?: RefObject; +} + +const Separator = ({ className, ref, ...props }: SeparatorProps) => { return ; }; -const Separator = forwardRef(_Separator); - export { Separator }; export type { SeparatorProps }; diff --git a/packages/components/src/Switch.tsx b/packages/components/src/Switch.tsx index 5366cefef..baa91cb3d 100644 --- a/packages/components/src/Switch.tsx +++ b/packages/components/src/Switch.tsx @@ -1,8 +1,7 @@ -import type { ForwardedRef, ReactNode } from 'react'; +import type { ReactNode, RefObject } from 'react'; import type { SwitchProps as AriaSwitchProps } from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Switch as AriaSwitch, composeRenderProps } from 'react-aria-components'; import styles from './styles/Switch.module.css'; @@ -11,9 +10,15 @@ const _switch = cva(styles.switch); interface SwitchProps extends Omit { children?: ReactNode; + ref?: RefObject; } -const _Switch = (props: SwitchProps, ref: ForwardedRef) => { +/** + * A switch allows a user to turn a setting on or off. + * + * https://react-spectrum.adobe.com/react-aria/Switch.html + */ +const Switch = ({ ref, ...props }: SwitchProps) => { return ( ) => { ); }; -/** - * A switch allows a user to turn a setting on or off. - * - * https://react-spectrum.adobe.com/react-aria/Switch.html - */ -const Switch = forwardRef(_Switch); - export { Switch }; export type { SwitchProps }; diff --git a/packages/components/src/Table.tsx b/packages/components/src/Table.tsx index 43964bb81..4bf1f7bd6 100644 --- a/packages/components/src/Table.tsx +++ b/packages/components/src/Table.tsx @@ -1,19 +1,18 @@ -import type { forwardRefType } from '@react-types/shared'; -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { - CellProps, - ColumnProps, - ColumnResizerProps, - ResizableTableContainerProps, - RowProps, - TableBodyProps, - TableHeaderProps, - TableProps, + CellProps as AriaCellProps, + ColumnProps as AriaColumnProps, + ColumnResizerProps as AriaColumnResizerProps, + ResizableTableContainerProps as AriaResizableTableContainerProps, + RowProps as AriaRowProps, + TableBodyProps as AriaTableBodyProps, + TableHeaderProps as AriaTableHeaderProps, + TableProps as AriaTableProps, } from 'react-aria-components'; import { Icon } from '@launchpad-ui/icons'; import { cva } from 'class-variance-authority'; -import { createContext, forwardRef, useContext } from 'react'; +import { createContext, useContext } from 'react'; import { VisuallyHidden } from 'react-aria'; import { Cell as AriaCell, @@ -46,7 +45,44 @@ const ResizableTableContainerContext = createContext<{ resizable: boolean } | nu resizable: false, }); -const _Table = (props: TableProps, ref: ForwardedRef) => { +interface TableProps extends AriaTableProps { + ref?: RefObject; +} + +interface ColumnProps extends AriaColumnProps { + ref?: RefObject; +} + +interface TableHeaderProps extends AriaTableHeaderProps { + ref?: RefObject; +} + +interface TableBodyProps extends AriaTableBodyProps { + ref?: RefObject; +} + +interface RowProps extends AriaRowProps { + ref?: RefObject; +} + +interface CellProps extends AriaCellProps { + ref?: RefObject; +} + +interface ColumnResizerProps extends AriaColumnResizerProps { + ref?: RefObject; +} + +interface ResizableTableContainerProps extends AriaResizableTableContainerProps { + ref?: RefObject; +} + +/** + * A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting. + * + * https://react-spectrum.adobe.com/react-aria/Table.html + */ +const Table = ({ ref, ...props }: TableProps) => { return ( ) => { }; /** - * A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting. + * A column within a ``. * * https://react-spectrum.adobe.com/react-aria/Table.html */ -const Table = forwardRef(_Table); - -const _Column = (props: ColumnProps, ref: ForwardedRef) => { +const Column = ({ ref, ...props }: ColumnProps) => { const ctx = useContext(ResizableTableContainerContext); return ( ) => }; /** - * A column within a `
`. + * A header within a `
`, containing the table columns. * * https://react-spectrum.adobe.com/react-aria/Table.html */ -const Column = forwardRef(_Column); - -const _TableHeader = ( - { className, ...props }: TableHeaderProps, - ref: ForwardedRef, -) => { +const TableHeader = ({ className, ref, ...props }: TableHeaderProps) => { const { selectionBehavior, selectionMode, allowsDragging } = useTableOptions(); return ( @@ -116,16 +145,11 @@ const _TableHeader = ( }; /** - * A header within a `
`, containing the table columns. + * The body of a `
`, containing the table rows. * * https://react-spectrum.adobe.com/react-aria/Table.html */ -const TableHeader = (forwardRef as forwardRefType)(_TableHeader); - -const _TableBody = ( - props: TableBodyProps, - ref: ForwardedRef, -) => { +const TableBody = ({ ref, ...props }: TableBodyProps) => { return ( ( }; /** - * The body of a `
`, containing the table rows. + * A row within a `
`. * * https://react-spectrum.adobe.com/react-aria/Table.html */ -const TableBody = (forwardRef as forwardRefType)(_TableBody); - -const _Row = ( - { columns, children, ...props }: RowProps, - ref: ForwardedRef, -) => { +const Row = ({ columns, children, ref, ...props }: RowProps) => { const { selectionBehavior, allowsDragging } = useTableOptions(); return ( @@ -175,13 +194,11 @@ const _Row = ( }; /** - * A row within a `
`. + * A cell within a table row. * * https://react-spectrum.adobe.com/react-aria/Table.html */ -const Row = (forwardRef as forwardRefType)(_Row); - -const _Cell = (props: CellProps, ref: ForwardedRef) => { +const Cell = ({ ref, ...props }: CellProps) => { return ( ) => { ); }; -/** - * A cell within a table row. - * - * https://react-spectrum.adobe.com/react-aria/Table.html - */ -const Cell = forwardRef(_Cell); - -const _ColumnResizer = (props: ColumnResizerProps, ref: ForwardedRef) => { +const ColumnResizer = ({ ref, ...props }: ColumnResizerProps) => { return ( , -) => { +const ResizableTableContainer = ({ children, ref, ...props }: ResizableTableContainerProps) => { return ( @@ -227,8 +232,6 @@ const _ResizableTableContainer = ( ); }; -const ResizableTableContainer = forwardRef(_ResizableTableContainer); - export { Cell, Column, ColumnResizer, ResizableTableContainer, Row, Table, TableBody, TableHeader }; export type { CellProps, diff --git a/packages/components/src/Tabs.tsx b/packages/components/src/Tabs.tsx index 8e76551cc..dce801211 100644 --- a/packages/components/src/Tabs.tsx +++ b/packages/components/src/Tabs.tsx @@ -1,9 +1,12 @@ -import type { forwardRefType } from '@react-types/shared'; -import type { ForwardedRef } from 'react'; -import type { TabListProps, TabPanelProps, TabProps, TabsProps } from 'react-aria-components'; +import type { RefObject } from 'react'; +import type { + TabListProps as AriaTabListProps, + TabPanelProps as AriaTabPanelProps, + TabProps as AriaTabProps, + TabsProps as AriaTabsProps, +} from 'react-aria-components'; import { cva } from 'class-variance-authority'; -import { forwardRef } from 'react'; import { Tab as AriaTab, TabList as AriaTabList, @@ -19,7 +22,28 @@ const panel = cva(styles.panel); const tab = cva(styles.tab); const tabs = cva(styles.tabs); -const _Tabs = (props: TabsProps, ref: ForwardedRef) => { +interface TabsProps extends AriaTabsProps { + ref?: RefObject; +} + +interface TabListProps extends AriaTabListProps { + ref?: RefObject; +} + +interface TabProps extends AriaTabProps { + ref?: RefObject; +} + +interface TabPanelProps extends AriaTabPanelProps { + ref?: RefObject; +} + +/** + * Tabs organize content into multiple sections and allow users to navigate between them. + * + * https://react-spectrum.adobe.com/react-aria/Tabs.html + */ +const Tabs = ({ ref, ...props }: TabsProps) => { return ( ) => { }; /** - * Tabs organize content into multiple sections and allow users to navigate between them. + * A TabList is used within Tabs to group tabs that a user can switch between. + * The ids of the items within the `` must match up with a corresponding item inside the ``. * * https://react-spectrum.adobe.com/react-aria/Tabs.html */ -const Tabs = forwardRef(_Tabs); - -const _TabList = (props: TabListProps, ref: ForwardedRef) => { +const TabList = ({ ref, ...props }: TabListProps) => { return ( (props: TabListProps, ref: ForwardedRef` must match up with a corresponding item inside the ``. + * A Tab provides a title for an individual item within a TabList. * * https://react-spectrum.adobe.com/react-aria/Tabs.html */ -const TabList = (forwardRef as forwardRefType)(_TabList); - -const _Tab = (props: TabProps, ref: ForwardedRef) => { +const Tab = ({ ref, ...props }: TabProps) => { return ( ) => { }; /** - * A Tab provides a title for an individual item within a TabList. + * A TabPanel provides the content for a tab. * * https://react-spectrum.adobe.com/react-aria/Tabs.html */ -const Tab = forwardRef(_Tab); - -const _TabPanel = (props: TabPanelProps, ref: ForwardedRef) => { +const TabPanel = ({ ref, ...props }: TabPanelProps) => { return ( ) => { ); }; -/** - * A TabPanel provides the content for a tab. - * - * https://react-spectrum.adobe.com/react-aria/Tabs.html - */ -const TabPanel = forwardRef(_TabPanel); - export { Tab, Tabs, TabList, TabPanel }; export type { TabProps, TabsProps, TabListProps, TabPanelProps }; diff --git a/packages/components/src/TagButton.tsx b/packages/components/src/TagButton.tsx index de108413f..44713425d 100644 --- a/packages/components/src/TagButton.tsx +++ b/packages/components/src/TagButton.tsx @@ -1,19 +1,22 @@ -import type { ForwardedRef } from 'react'; +import type { RefObject } from 'react'; import type { ButtonProps } from 'react-aria-components'; import type { TagVariants } from './TagGroup'; -import { forwardRef } from 'react'; import { composeRenderProps } from 'react-aria-components'; import { Button } from './Button'; import { tag } from './TagGroup'; -interface TagButtonProps extends ButtonProps, Omit {} +interface TagButtonProps extends ButtonProps, Omit { + ref?: RefObject; +} -const _TagButton = ( - { size = 'medium', ...props }: TagButtonProps, - ref: ForwardedRef, -) => { +/** + * A button allows a user to perform an action, with mouse, touch, and keyboard interactions. + * + * https://react-spectrum.adobe.com/react-aria/Button.html + */ +const TagButton = ({ size = 'medium', ref, ...props }: TagButtonProps) => { return (