chore(ui-react): add deprecation message to Expander onChange prop (#2674)

* chore(ui-react): add deprecation message to Expander onChange prop"

Author: calebpollman

.changeset/short-deers-tease.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+chore(ui-react): add deprecation message to Expander onChange prop

docs/src/pages/[platform]/components/expander/examples/ControlledSingleExample.tsx

@@ -5,7 +5,7 @@ import { Expander, ExpanderItem } from '@aws-amplify/ui-react';
 export const ControlledSingleExpander = () => {
   const [value, setValue] = React.useState<string | string[]>();
   return (
-    <Expander type="single" value={value} onChange={setValue}>
+    <Expander type="single" value={value} onValueChange={setValue}>
       <ExpanderItem
         title="What do you call a deer with no eyes?"
         value="joke-1"

docs/src/pages/[platform]/components/expander/props-table.mdx

@@ -78,26 +78,15 @@ boolean
       <ResponsiveTableCell label="Description">Sets the Boolean &#96;disabled&#96; HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form</ResponsiveTableCell>
     </TableRow>
 
-    <TableRow>
-      <ResponsiveTableCell label="Name">onChange</ResponsiveTableCell>
-      <ResponsiveTableCell label="Type">
-```jsx
-(value?: string | string[]) => void
-```
-</ResponsiveTableCell>
-      <ResponsiveTableCell label="Description">Event handler called when the expanded state of an item changes</ResponsiveTableCell>
-    </TableRow>
-
     <TableRow>
       <ResponsiveTableCell label="Name">onValueChange</ResponsiveTableCell>
       <ResponsiveTableCell label="Type">
-```jsx
-(value: string) => void
-```
-</ResponsiveTableCell>
-      <ResponsiveTableCell label="Description">-</ResponsiveTableCell>
+        ```jsx
+          (value?: string | string[]) => void
+        ```
+      </ResponsiveTableCell>
+      <ResponsiveTableCell label="Description">Event handler called when the expanded state of an item changes</ResponsiveTableCell>
     </TableRow>
-
     <TableRow>
       <ResponsiveTableCell label="Name">style</ResponsiveTableCell>
       <ResponsiveTableCell label="Type">

docs/src/pages/[platform]/components/expander/react.mdx

@@ -114,7 +114,7 @@ To expand specific items by default, pass a `string` or `string[]` of value(s) t
 
 ### Controlled component
 
-To use the Expander as controlled component, specify the `value` of the item(s) to expand and use in conjunction with `onChange`.
+To use the Expander as controlled component, specify the `value` of the item(s) to expand and use in conjunction with `onValueChange`.
 
 <Example>
   <View>

packages/react/.eslintrc.js

@@ -69,7 +69,7 @@ module.exports = {
         'src/components/**/*',
         'src/helpers/**/*',
         'src/hooks/**/*',
-        'src/primitives/+(shared|utils)/**/*',
+        'src/primitives/+(shared|utils|E*)/**/*',
         'src/studio',
         // 'src/primitives/**/*',
       ],

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

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { Root } from '@radix-ui/react-accordion';
 import classNames from 'classnames';
 
+import { useDeprecationWarning } from '../../hooks/useDeprecationWarning';
+
 import { ComponentClassNames } from '../shared/constants';
 import { ExpanderProps } from '../types/expander';
 import { Primitive } from '../types/view';
@@ -14,7 +16,6 @@ const ExpanderPrimitive: Primitive<ExpanderProps, typeof Root> = (
     defaultValue,
     isCollapsible,
     onChange,
-    // It is not in use but remove it from rest to avoid type errors
     onValueChange,
     testId,
     type = 'single',
@@ -26,13 +27,21 @@ const ExpanderPrimitive: Primitive<ExpanderProps, typeof Root> = (
   // Throw away baseStyleProps and flexContainerStyleProps since they won't work on Root element
   const { rest } = splitPrimitiveProps(_rest);
 
+  const handleValueChange = onValueChange ?? onChange;
+
+  useDeprecationWarning({
+    shouldWarn: !!onChange,
+    message:
+      'Expander `onChange` prop will be deprecated in the next major release of @aws-amplify/ui-react. Please replace usage with `onValueChange`.',
+  });
+
   const expander =
     type === 'multiple' ? (
       <Root
         className={classNames(ComponentClassNames.Expander, className)}
         data-testid={testId}
         defaultValue={defaultValue as string[]}
-        onValueChange={onChange}
+        onValueChange={handleValueChange as (value?: string[]) => void}
         ref={ref}
         type={type}
         value={value as string[]}
@@ -46,7 +55,7 @@ const ExpanderPrimitive: Primitive<ExpanderProps, typeof Root> = (
         collapsible={isCollapsible}
         data-testid={testId}
         defaultValue={defaultValue as string}
-        onValueChange={onChange}
+        onValueChange={handleValueChange as (value?: string) => void}
         ref={ref}
         type={type}
         value={value as string}

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

@@ -30,7 +30,7 @@ describe('Expander: ', () => {
     ({ value: initialValue, ...rest }, ref) => {
       const [value, setValue] = React.useState(initialValue);
       return (
-        <Expander value={value} onChange={setValue} ref={ref} {...rest}>
+        <Expander value={value} onValueChange={setValue} ref={ref} {...rest}>
           <ExpanderItem title="Section 1 title" value="item-1">
             content 1
           </ExpanderItem>

packages/react/src/primitives/types/expander.ts

@@ -27,11 +27,16 @@ export interface ExpanderProps extends ViewProps {
    */
   type?: ExpanderType;
 
+  /**
+   * @deprecated replace usage with `onValueChange`
+   */
+  onChange?: (value?: string | string[]) => void;
+
   /**
    * @description
    * Event handler called when the expanded state of an item changes
    */
-  onChange?: (value?: string | string[]) => void;
+  onValueChange?: (value?: string | string[]) => void;
 }
 
 export interface ExpanderItemProps extends ViewProps {