Rename PrimitiveWithForwardRef => Primitive type (#909)

.changeset/green-papayas-invent.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+Rename PrimitiveWithForwardRef => Primitive type

packages/react/src/primitives/Alert/Alert.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
-import { AlertProps, PrimitiveWithForwardRef } from '../types';
+import { AlertProps, Primitive } from '../types';
 import { View } from '../View';
 import { Flex } from '../Flex';
 import { Button } from '../Button';
 import { AlertIcon } from './AlertIcon';
 import { IconClose } from '../Icon';
 import { isFunction } from '../shared/utils';
 
-const AlertPrimitive: PrimitiveWithForwardRef<AlertProps, typeof Flex> = (
+const AlertPrimitive: Primitive<AlertProps, typeof Flex> = (
   {
     buttonRef,
     children,

packages/react/src/primitives/Badge/Badge.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
+import { BadgeProps, Primitive } from '../types';
 import { ComponentClassNames } from '../shared/constants';
-import { BadgeProps, PrimitiveWithForwardRef } from '../types';
 import { View } from '../View';
 
-const BadgePrimitive: PrimitiveWithForwardRef<BadgeProps, 'span'> = (
+const BadgePrimitive: Primitive<BadgeProps, 'span'> = (
   { className, children, variation, size, ...rest },
   ref
 ) => (

packages/react/src/primitives/Button/Button.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
+import { ButtonProps, Primitive } from '../types';
 import { ComponentClassNames } from '../shared/constants';
-import { ButtonProps, PrimitiveWithForwardRef } from '../types';
 import { Text } from '../Text';
 import { View } from '../View';
 
-const ButtonPrimitive: PrimitiveWithForwardRef<ButtonProps, 'button'> = (
+const ButtonPrimitive: Primitive<ButtonProps, 'button'> = (
   {
     className,
     children,

packages/react/src/primitives/ButtonGroup/ButtonGroup.tsx

@@ -1,18 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { Flex } from '../Flex';
-import {
-  ButtonProps,
-  ButtonGroupProps,
-  PrimitiveWithForwardRef,
-} from '../types';
+import { ButtonProps, ButtonGroupProps, Primitive } from '../types';
 import { ComponentClassNames } from '../shared/constants';
+import { Flex } from '../Flex';
 
-const ButtonGroupPrimitive: PrimitiveWithForwardRef<
-  ButtonGroupProps,
-  typeof Flex
-> = (
+const ButtonGroupPrimitive: Primitive<ButtonGroupProps, typeof Flex> = (
   { className, children, role = 'group', size, variation, ...rest },
   ref
 ) => (

packages/react/src/primitives/Card/Card.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
+import { CardProps, Primitive } from '../types';
 import { ComponentClassNames } from '../shared/constants';
-import { CardProps, PrimitiveWithForwardRef } from '../types';
 import { View } from '../View';
 
-const CardPrimitive: PrimitiveWithForwardRef<CardProps, 'div'> = (
+const CardPrimitive: Primitive<CardProps, 'div'> = (
   { className, children, variation, ...rest },
   ref
 ) => (

packages/react/src/primitives/Checkbox/Checkbox.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { useCheckbox } from './useCheckbox';
+import { CheckboxProps } from '../types/checkbox';
+import { ComponentClassNames } from '../shared/constants';
 import { Flex } from '../Flex';
 import { IconCheck } from '../Icon';
 import { Input } from '../Input';
+import { Primitive } from '../types/view';
+import { splitPrimitiveProps } from '../shared/styleUtils';
 import { Text } from '../Text';
+import { useCheckbox } from './useCheckbox';
 import { VisuallyHidden } from '../VisuallyHidden';
-import { CheckboxProps } from '../types/checkbox';
-import { PrimitiveWithForwardRef } from '../types/view';
-import { splitPrimitiveProps } from '../shared/styleUtils';
-import { ComponentClassNames } from '../shared/constants';
 import { useTestId } from '../utils/testUtils';
 
-const CheckboxPrimitive: PrimitiveWithForwardRef<CheckboxProps, 'input'> = (
+const CheckboxPrimitive: Primitive<CheckboxProps, 'input'> = (
   {
     checked,
     className,

packages/react/src/primitives/CheckboxField/CheckboxField.tsx

@@ -2,16 +2,13 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { Checkbox } from '../Checkbox';
+import { CheckboxFieldProps, Primitive } from '../types';
+import { ComponentClassNames } from '../shared';
 import { FieldErrorMessage } from '../Field';
 import { Flex } from '../Flex';
-import { CheckboxFieldProps, PrimitiveWithForwardRef } from '../types';
-import { ComponentClassNames } from '../shared';
 import { useTestId } from '../utils/testUtils';
 
-const CheckboxFieldPrimitive: PrimitiveWithForwardRef<
-  CheckboxFieldProps,
-  'input'
-> = (
+const CheckboxFieldPrimitive: Primitive<CheckboxFieldProps, 'input'> = (
   {
     className,
     errorMessage,

packages/react/src/primitives/Divider/Divider.tsx

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import * as React from 'react';
 
 import { ComponentClassNames } from '../shared';
-import { DividerProps, PrimitiveWithForwardRef } from '../types';
+import { DividerProps, Primitive } from '../types';
 import { View } from '../View';
 
-const DividerPrimitive: PrimitiveWithForwardRef<DividerProps, 'hr'> = (
+const DividerPrimitive: Primitive<DividerProps, 'hr'> = (
   { className, orientation = 'horizontal', size, ...rest },
   ref
 ) => (

packages/react/src/primitives/Expander/Expander.tsx

@@ -1,13 +1,13 @@
-import classNames from 'classnames';
-import { Root } from '@radix-ui/react-accordion';
 import * as React from 'react';
+import { Root } from '@radix-ui/react-accordion';
+import classNames from 'classnames';
 
-import { PrimitiveWithForwardRef } from '../types/view';
-import { ExpanderProps } from '../types/expander';
 import { ComponentClassNames } from '../shared/constants';
+import { ExpanderProps } from '../types/expander';
+import { Primitive } from '../types/view';
 import { splitPrimitiveProps } from '../shared/styleUtils';
 
-const ExpanderPrimitive: PrimitiveWithForwardRef<ExpanderProps, typeof Root> = (
+const ExpanderPrimitive: Primitive<ExpanderProps, typeof Root> = (
   {
     children,
     className,

packages/react/src/primitives/Expander/ExpanderItem.tsx

@@ -1,24 +1,24 @@
-import classNames from 'classnames';
-import { Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
 import * as React from 'react';
+import { Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
+import classNames from 'classnames';
 
-import { IconExpandMore } from '../Icon';
-import { View } from '../View';
-import { PrimitiveWithForwardRef } from '../types/view';
-import { ExpanderItemProps } from '../types/expander';
 import { ComponentClassNames } from '../shared/constants';
+import { ExpanderItemProps } from '../types/expander';
+import { IconExpandMore } from '../Icon';
+import { Primitive } from '../types/view';
 import { splitPrimitiveProps } from '../shared/styleUtils';
 import { useStableId } from '../shared/utils';
+import { View } from '../View';
 
 export const EXPANDER_ITEM_TEST_ID = 'expander-item';
 export const EXPANDER_HEADER_TEST_ID = 'expander-header';
 export const EXPANDER_ICON_TEST_ID = 'expander-icon';
 export const EXPANDER_CONTENT_TEXT_TEST_ID = 'expander-content-text';
 
-const ExpanderItemPrimitive: PrimitiveWithForwardRef<
-  ExpanderItemProps,
-  typeof Item
-> = ({ children, className, title, ..._rest }, ref) => {
+const ExpanderItemPrimitive: Primitive<ExpanderItemProps, typeof Item> = (
+  { children, className, title, ..._rest },
+  ref
+) => {
   const triggerId = useStableId();
   const contentId = useStableId();
   const { rest } = splitPrimitiveProps(_rest);

packages/react/src/primitives/Field/FieldClearButton.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 
-import { FieldClearButtonProps, PrimitiveWithForwardRef } from '../types';
+import { FieldClearButtonProps, Primitive } from '../types';
 import { FieldGroupIconButton } from '../FieldGroupIcon';
 import { IconClose } from '../Icon';
 import { SharedText } from '../shared/i18n';
 
 const ariaLabelText = SharedText.Fields.ariaLabel.clearField;
 
-const FieldClearButtonPrimitive: PrimitiveWithForwardRef<
-  FieldClearButtonProps,
-  'button'
-> = (props, ref) => (
+const FieldClearButtonPrimitive: Primitive<FieldClearButtonProps, 'button'> = (
+  props,
+  ref
+) => (
   <FieldGroupIconButton ariaLabel={ariaLabelText} ref={ref} {...props}>
     <IconClose size={props.size} />
   </FieldGroupIconButton>

packages/react/src/primitives/FieldGroup/FieldGroup.tsx

@@ -2,14 +2,11 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
-import { FieldGroupOptions, PrimitiveWithForwardRef } from '../types';
+import { FieldGroupOptions, Primitive } from '../types';
 import { Flex } from '../Flex';
 import { View } from '../View';
 
-const FieldGroupPrimitive: PrimitiveWithForwardRef<
-  FieldGroupOptions,
-  typeof Flex
-> = (
+const FieldGroupPrimitive: Primitive<FieldGroupOptions, typeof Flex> = (
   {
     children,
     className,

packages/react/src/primitives/FieldGroupIcon/FieldGroupIcon.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
-import { FieldGroupIconProps, PrimitiveWithForwardRef } from '../types';
+import { FieldGroupIconProps, Primitive } from '../types';
 import { View } from '../View';
 
-const FieldGroupIconPrimitive: PrimitiveWithForwardRef<
+const FieldGroupIconPrimitive: Primitive<
   FieldGroupIconProps,
   'button' | 'div'
 > = (

packages/react/src/primitives/FieldGroupIcon/FieldGroupIconButton.tsx

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { Button } from '../Button';
 import { ComponentClassNames } from '../shared/constants';
 import { FieldGroupIcon } from './FieldGroupIcon';
-import { FieldGroupIconButtonProps, PrimitiveWithForwardRef } from '../types';
+import { FieldGroupIconButtonProps, Primitive } from '../types';
 
-const FieldGroupIconButtonPrimitive: PrimitiveWithForwardRef<
+const FieldGroupIconButtonPrimitive: Primitive<
   FieldGroupIconButtonProps,
   'button'
 > = ({ children, className, ...rest }, ref) => (

packages/react/src/primitives/Flex/Flex.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
-import { FlexProps, PrimitiveWithForwardRef } from '../types';
+import { FlexProps, Primitive } from '../types';
 import { View } from '../View';
 
-const FlexPrimitive: PrimitiveWithForwardRef<FlexProps, 'div'> = (
+const FlexPrimitive: Primitive<FlexProps, 'div'> = (
   { className, children, ...rest },
   ref
 ) => (

packages/react/src/primitives/Grid/Grid.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
-import { GridProps, PrimitiveWithForwardRef } from '../types';
+import { GridProps, Primitive } from '../types';
 import { View } from '../View';
 
-const GridPrimitive: PrimitiveWithForwardRef<GridProps, 'div'> = (
+const GridPrimitive: Primitive<GridProps, 'div'> = (
   { className, children, ...rest },
   ref
 ) => (

packages/react/src/primitives/Heading/Heading.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
-import { HeadingProps, PrimitiveWithForwardRef } from '../types';
+import { HeadingProps, Primitive } from '../types';
 import { View } from '../View';
 
 type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -20,7 +20,7 @@ const headingLevels: HeadingLevels = {
   6: 'h6',
 };
 
-const HeadingPrimitive: PrimitiveWithForwardRef<HeadingProps, HeadingTag> = (
+const HeadingPrimitive: Primitive<HeadingProps, HeadingTag> = (
   { className, children, level = 6, ...rest },
   ref
 ) => (

packages/react/src/primitives/Icon/Icon.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { IconProps, PrimitiveWithForwardRef } from '../types';
 import { ComponentClassNames } from '../shared';
+import { IconProps, Primitive } from '../types';
 import { View } from '../View';
 
 const defaultViewBox = { minX: 0, minY: 0, width: 24, height: 24 };
 
-const IconPrimitive: PrimitiveWithForwardRef<IconProps, 'svg'> = (
+const IconPrimitive: Primitive<IconProps, 'svg'> = (
   {
     className,
     fill = 'currentColor',

packages/react/src/primitives/Image/Image.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared';
-import { ImageProps, PrimitiveWithForwardRef } from '../types';
+import { ImageProps, Primitive } from '../types';
 import { View } from '../View';
 
-const ImagePrimitive: PrimitiveWithForwardRef<ImageProps, 'img'> = (
+const ImagePrimitive: Primitive<ImageProps, 'img'> = (
   { className, ...rest },
   ref
 ) => (

packages/react/src/primitives/Input/Input.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared';
-import { InputProps, PrimitiveWithForwardRef } from '../types';
+import { InputProps, Primitive } from '../types';
 import { View } from '../View';
 
-const InputPrimitive: PrimitiveWithForwardRef<InputProps, 'input'> = (
+const InputPrimitive: Primitive<InputProps, 'input'> = (
   {
     autoComplete,
     checked,

packages/react/src/primitives/Label/Label.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
-import { LabelProps, PrimitiveWithForwardRef } from '../types';
+import { LabelProps, Primitive } from '../types';
 import { View } from '../View';
 
-const LabelPrimitive: PrimitiveWithForwardRef<LabelProps, 'label'> = (
+const LabelPrimitive: Primitive<LabelProps, 'label'> = (
   { children, className, visuallyHidden, ...rest },
   ref
 ) => {

packages/react/src/primitives/Link/Link.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared';
-import { LinkProps, PrimitiveWithForwardRef } from '../types';
+import { LinkProps, Primitive } from '../types';
 import { View } from '../View';
 
-const LinkPrimitive: PrimitiveWithForwardRef<LinkProps, 'a'> = (
+const LinkPrimitive: Primitive<LinkProps, 'a'> = (
   { as = 'a', children, className, isExternal, ...rest },
   ref
 ) => {

packages/react/src/primitives/Loader/Loader.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { View } from '../View';
-import { LoaderProps } from '../types/loader';
-import { PrimitiveWithForwardRef } from '../types/view';
 import { ComponentClassNames } from '../shared/constants';
+import { LoaderProps } from '../types/loader';
+import { Primitive } from '../types/view';
+import { View } from '../View';
 
 export const LINEAR_EMPTY = 'linear-empty';
 export const LINEAR_FILLED = 'linear-filled';
 export const CIRCULAR_EMPTY = 'circular-empty';
 export const CIRCULAR_FILLED = 'circular-filled';
 
-const LoaderPrimitive: PrimitiveWithForwardRef<LoaderProps, 'svg'> = (
+const LoaderPrimitive: Primitive<LoaderProps, 'svg'> = (
   { className, filledColor, emptyColor, size, variation, ...rest },
   ref
 ) => {