Rename onChange events (#225)

example/src/components/Usage.js

@@ -189,7 +189,7 @@ function RadioGroupExample() {
         <Example data={codeExamples.radioGroup} >
             <Menu menuButton={<MenuButton>Text color</MenuButton>}>
                 <MenuRadioGroup value={textColor}
-                    onChange={e => setTextColor(e.value)}>
+                    onRadioChange={e => setTextColor(e.value)}>
                     <MenuItem value="red">Red</MenuItem>
                     <MenuItem value="green">Green</MenuItem>
                     <MenuItem value={isDark ? '#69a6f8' : 'blue'}>Blue</MenuItem>
@@ -273,7 +273,7 @@ function CombinedExample() {
                 <SubMenu label="Text color">
                     <MenuRadioGroup
                         value={textColor}
-                        onChange={e => setTextColor(e.value)}>
+                        onRadioChange={e => setTextColor(e.value)}>
                         <MenuItem value={'red'}>Red</MenuItem>
                         <MenuItem value={'green'}>Green</MenuItem>
                         <MenuItem value={isDark ? '#69a6f8' : 'blue'}>Blue</MenuItem>
@@ -379,7 +379,7 @@ function FocusableItemExample() {
         <Example data={codeExamples.focusableItem} >
             <Menu menuButton={<MenuButton>Open menu</MenuButton>}
                 direction={vWidth < 600 ? 'top' : 'bottom'}
-                align="center" onChange={e => e.open && setFilter('')}
+                align="center" onMenuChange={e => e.open && setFilter('')}
                 boundingBoxPadding={`${navbarHeight} 0 0 0`}>
                 <FocusableItem>
                     {({ ref }) => (
@@ -538,7 +538,7 @@ function MenuOverflowExample() {
                 </Menu>
                 <Menu menuButton={<MenuButton styles={{ marginTop: '2rem' }}>Grouping</MenuButton>}
                     overflow={overflow} position={position} boundingBoxPadding="10"
-                    onChange={e => e.open && setFilter('')} align="end">
+                    onMenuChange={e => e.open && setFilter('')} align="end">
                     <FocusableItem styles={{ padding: '0.375rem 1rem' }}>
                         {({ ref }) => (
                             <input ref={ref} type="text" placeholder="Type a number"

src/__tests__/Menu.test.js

@@ -74,7 +74,7 @@ test('Clicking a menu item fires onClick event and closes the menu', () => {
     const onClick = jest.fn();
     const onChange = jest.fn();
     const onItemClick = jest.fn();
-    utils.renderMenu({ onItemClick, onChange }, {
+    utils.renderMenu({ onItemClick, onMenuChange: onChange }, {
         children: menuItemText,
         value: menuItemText,
         onClick

src/__tests__/MenuItem.test.js

@@ -20,7 +20,7 @@ test('Test radio items', () => {
     const onChange = jest.fn();
     const getMenu = value => (
         <Menu onItemClick={onItemClick} menuButton={<MenuButton>Color</MenuButton>}>
-            <MenuRadioGroup value={value} name="color" onChange={onChange}>
+            <MenuRadioGroup value={value} name="color" onRadioChange={onChange}>
                 <MenuItem value="red">Red</MenuItem>
                 <MenuItem value="green">Green</MenuItem>
                 <MenuItem value="blue">Blue</MenuItem>
@@ -50,7 +50,7 @@ test('Use keepOpen of onChange to customise when menu is closed', () => {
     render(
         <Menu menuButton={<MenuButton>Color</MenuButton>}>
             <MenuRadioGroup value="green"
-                onChange={e => e.keepOpen = true}>
+                onRadioChange={e => e.keepOpen = true}>
                 <MenuItem value="red">Red</MenuItem>
                 <MenuItem value="green">Green</MenuItem>
             </MenuRadioGroup>

src/__tests__/SubMenu.test.js

@@ -26,7 +26,7 @@ test('Open and close submenu, and activate submenu item with mouse and keyboard'
         children: menuItemText,
         value: menuItemText,
         onClick
-    }, { onChange });
+    }, { onMenuChange: onChange });
 
     utils.clickMenuButton();
     const menuOptions = { name: 'Menu', container };

src/components/Menu.js

@@ -32,7 +32,7 @@ export const Menu = memo(forwardRef(function Menu({
     transition,
     transitionTimeout,
     onItemClick,
-    onChange,
+    onMenuChange,
     ...restProps
 }, externalRef) {
 
@@ -122,7 +122,7 @@ export const Menu = memo(forwardRef(function Menu({
         skipClick
     });
 
-    useMenuChange(onChange, isOpen);
+    useMenuChange(onMenuChange, isOpen);
 
     return (
         <React.Fragment>
@@ -138,7 +138,7 @@ Menu.propTypes = {
         PropTypes.element,
         PropTypes.func
     ]).isRequired,
-    onChange: PropTypes.func
+    onMenuChange: PropTypes.func
 };
 
 Menu.defaultProps = menuDefaultPropsBase;

src/components/MenuItem.js

@@ -65,7 +65,7 @@ export const MenuItem = defineName(memo(forwardRef(function MenuItem({
 
         if (isRadio) {
             event.name = radioGroup.name;
-            safeCall(radioGroup.onChange, event);
+            safeCall(radioGroup.onRadioChange, event);
         }
 
         if (!event.stopPropagation) safeCall(onClick, event);

src/components/MenuRadioGroup.js

@@ -17,12 +17,12 @@ export const MenuRadioGroup = defineName(memo(forwardRef(function MenuRadioGroup
     name,
     value,
     children,
-    onChange,
+    onRadioChange,
     ...restProps
 }, externalRef) {
 
-    const contextValue = useMemo(() => ({ name, value, onChange }),
-        [name, value, onChange]);
+    const contextValue = useMemo(() => ({ name, value, onRadioChange }),
+        [name, value, onRadioChange]);
 
     return (
         <li role="presentation">
@@ -45,5 +45,5 @@ MenuRadioGroup.propTypes = {
     name: PropTypes.string,
     value: PropTypes.any,
     children: PropTypes.node.isRequired,
-    onChange: PropTypes.func
+    onRadioChange: PropTypes.func
 };

src/components/SubMenu.js

@@ -46,7 +46,7 @@ export const SubMenu = defineName(memo(forwardRef(function SubMenu({
     disabled,
     label,
     index,
-    onChange,
+    onMenuChange,
     captureFocus: _1,
     repositionFlag: _2,
     itemProps = {},
@@ -169,7 +169,7 @@ export const SubMenu = defineName(memo(forwardRef(function SubMenu({
     useEffect(() => {
         dispatch({ type: isOpen ? SubmenuActionTypes.OPEN : SubmenuActionTypes.CLOSE });
     }, [dispatch, isOpen]);
-    useMenuChange(onChange, isOpen);
+    useMenuChange(onMenuChange, isOpen);
 
     const modifiers = useMemo(() => Object.freeze({
         open: isOpen,
@@ -245,7 +245,7 @@ SubMenu.propTypes = {
     itemProps: PropTypes.shape({
         ...stylePropTypes()
     }),
-    onChange: PropTypes.func
+    onMenuChange: PropTypes.func
 };
 
 SubMenu.defaultProps = {

src/hooks/useMenuChange.js

@@ -5,11 +5,11 @@ import {
 import { safeCall } from '../utils';
 
 
-export const useMenuChange = (onChange, isOpen) => {
+export const useMenuChange = (onMenuChange, isOpen) => {
     const prevOpen = useRef(isOpen);
 
     useEffect(() => {
-        if (prevOpen.current !== isOpen) safeCall(onChange, { open: isOpen });
+        if (prevOpen.current !== isOpen) safeCall(onMenuChange, { open: isOpen });
         prevOpen.current = isOpen;
-    }, [onChange, isOpen]);
+    }, [onMenuChange, isOpen]);
 }

types/index.d.ts

@@ -121,7 +121,7 @@ interface SharedMenuProps extends BaseProps<MenuModifiers, MenuStyleKeys> {
 }
 
 // Menu and ControlledMenu
-interface BaseMenuProps extends MenuStateOptions, Omit<SharedMenuProps, 'onClick'> {
+interface BaseMenuProps extends MenuStateOptions, SharedMenuProps {
     containerProps?: React.HTMLAttributes<HTMLElement>;
     boundingBoxRef?: React.RefObject<Element | RectElement>;
     boundingBoxPadding?: string;
@@ -152,9 +152,9 @@ export const MenuButton: React.NamedExoticComponent<MenuButtonProps>;
 //
 // Menu
 // ----------------------------------------------------------------------
-export interface MenuProps extends Omit<BaseMenuProps, 'onChange'> {
+export interface MenuProps extends BaseMenuProps {
     menuButton: RenderProp<MenuButtonModifiers, React.ReactElement>;
-    onChange?: EventHandler<MenuChangeEvent>;
+    onMenuChange?: EventHandler<MenuChangeEvent>;
 }
 
 export const Menu: React.NamedExoticComponent<MenuProps>;
@@ -188,14 +188,14 @@ export type SubMenuItemModifiers = Readonly<{
     disabled: boolean;
 }>;
 
-export interface SubMenuProps extends Omit<SharedMenuProps, 'className' | 'onChange'> {
+export interface SubMenuProps extends Omit<SharedMenuProps, 'className'> {
     className?: ClassNameProp;
     menuClassName?: ClassNameProp<MenuModifiers>;
     menuStyles?: StylesProp<MenuModifiers, MenuStyleKeys>;
     itemProps?: BaseProps<SubMenuItemModifiers>;
     label?: RenderProp<SubMenuItemModifiers>;
     disabled?: boolean;
-    onChange?: EventHandler<MenuChangeEvent>;
+    onMenuChange?: EventHandler<MenuChangeEvent>;
 }
 
 export const SubMenu: React.NamedExoticComponent<SubMenuProps>;
@@ -274,11 +274,11 @@ export const MenuGroup: React.NamedExoticComponent<MenuGroupProps>;
 //
 // MenuRadioGroup
 // ----------------------------------------------------------------------
-export interface MenuRadioGroupProps extends Omit<BaseProps, 'onChange'> {
+export interface MenuRadioGroupProps extends BaseProps {
     name?: string;
     value?: any;
     children?: React.ReactNode;
-    onChange?: EventHandler<RadioChangeEvent>;
+    onRadioChange?: EventHandler<RadioChangeEvent>;
 }
 
 export const MenuRadioGroup: React.NamedExoticComponent<MenuRadioGroupProps>;