Pass props and other data separately into all component callbacks

index.d.ts

@@ -254,12 +254,7 @@ export {
   StrictImageGroupProps,
 } from './dist/commonjs/elements/Image/ImageGroup'
 
-export {
-  default as Input,
-  InputProps,
-  InputOnChangeData,
-  StrictInputProps,
-} from './dist/commonjs/elements/Input'
+export { default as Input, InputProps, StrictInputProps } from './dist/commonjs/elements/Input'
 
 export { default as Label, LabelProps, StrictLabelProps } from './dist/commonjs/elements/Label'
 export {
@@ -431,7 +426,6 @@ export {
 export {
   default as Dropdown,
   DropdownProps,
-  DropdownOnSearchChangeData,
   StrictDropdownProps,
 } from './dist/commonjs/modules/Dropdown'
 export {
@@ -514,12 +508,7 @@ export {
   StrictRatingIconProps,
 } from './dist/commonjs/modules/Rating/RatingIcon'
 
-export {
-  default as Search,
-  SearchProps,
-  SearchResultData,
-  StrictSearchProps,
-} from './dist/commonjs/modules/Search'
+export { default as Search, SearchProps, StrictSearchProps } from './dist/commonjs/modules/Search'
 export {
   default as SearchCategory,
   SearchCategoryProps,

src/addons/Pagination/Pagination.d.ts

@@ -45,9 +45,14 @@ export interface StrictPaginationProps {
    * Called on change of an active page.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
+   * @param {number} activePage - Index of the newly active page.
    */
-  onPageChange?: (event: React.MouseEvent<HTMLAnchorElement>, data: PaginationProps) => void
+  onPageChange?: (
+    event: React.MouseEvent<HTMLAnchorElement>,
+    props: PaginationProps,
+    activePage: number,
+  ) => void
 
   /** Number of always visible pages before and after the current one. */
   siblingRange?: number | string

src/addons/Pagination/Pagination.js

@@ -55,7 +55,7 @@ const Pagination = React.forwardRef(function (props, ref) {
     }
 
     setActivePage(nextActivePage)
-    _.invoke(props, 'onPageChange', e, { ...props, activePage: nextActivePage })
+    _.invoke(props, 'onPageChange', e, props, nextActivePage)
   }
 
   const handleItemOverrides = (active, type, value) => (predefinedProps) => ({

src/addons/Portal/Portal.d.ts

@@ -50,33 +50,35 @@ export interface StrictPortalProps {
    * Called when a close event happens
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
+   * @param {boolean} open - Whether or not the portal is displayed.
    */
-  onClose?: (event: React.MouseEvent<HTMLElement>, data: PortalProps) => void
+  onClose?: (event: React.MouseEvent<HTMLElement>, props: PortalProps, open: boolean) => void
 
   /**
    * Called when the portal is mounted on the DOM
    *
    * @param {null}
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onMount?: (nothing: null, data: PortalProps) => void
+  onMount?: (nothing: null, props: PortalProps) => void
 
   /**
    * Called when an open event happens
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
+   * @param {boolean} open - Whether or not the portal is displayed.
    */
-  onOpen?: (event: React.MouseEvent<HTMLElement>, data: PortalProps) => void
+  onOpen?: (event: React.MouseEvent<HTMLElement>, props: PortalProps, open: boolean) => void
 
   /**
    * Called when the portal is unmounted from the DOM
    *
    * @param {null}
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onUnmount?: (nothing: null, data: PortalProps) => void
+  onUnmount?: (nothing: null, props: PortalProps) => void
 
   /** Controls whether or not the portal is displayed. */
   open?: boolean

src/addons/Portal/Portal.js

@@ -61,7 +61,7 @@ function Portal(props) {
     debug('open()')
 
     setOpen(true)
-    _.invoke(props, 'onOpen', e, { ...props, open: true })
+    _.invoke(props, 'onOpen', e, props, true)
   }
 
   const openPortalWithTimeout = (e, delay) => {
@@ -77,7 +77,7 @@ function Portal(props) {
     debug('close()')
 
     setOpen(false)
-    _.invoke(props, 'onClose', e, { ...props, open: false })
+    _.invoke(props, 'onClose', e, props, false)
   }
 
   const closePortalWithTimeout = (e, delay) => {

src/addons/TextArea/TextArea.d.ts

@@ -13,17 +13,27 @@ export interface StrictTextAreaProps {
    * Called on change.
    *
    * @param {SyntheticEvent} event - The React SyntheticEvent object
-   * @param {object} data - All props and the event value.
+   * @param {object} props - All props.
+   * @param {string} value - The value of the textarea.
    */
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaProps) => void
+  onChange?: (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+    props: TextAreaProps,
+    value: string,
+  ) => void
 
   /**
    * Called on input.
    *
    * @param {SyntheticEvent} event - The React SyntheticEvent object
-   * @param {object} data - All props and the event value.
+   * @param {object} props - All props.
+   * @param {string} value - The value of the textarea.
    */
-  onInput?: (event: React.FormEvent<HTMLTextAreaElement>, data: TextAreaProps) => void
+  onInput?: (
+    event: React.FormEvent<HTMLTextAreaElement>,
+    props: TextAreaProps,
+    value: string,
+  ) => void
 
   /** Indicates row count for a TextArea. */
   rows?: number | string

src/addons/TextArea/TextArea.js

@@ -15,13 +15,13 @@ const TextArea = React.forwardRef(function (props, ref) {
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onChange', e, { ...props, value: newValue })
+    _.invoke(props, 'onChange', e, props, newValue)
   }
 
   const handleInput = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onInput', e, { ...props, value: newValue })
+    _.invoke(props, 'onInput', e, props, newValue)
   }
 
   const rest = getUnhandledProps(TextArea, props)

src/addons/TransitionablePortal/TransitionablePortal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { TransitionEventData, TransitionProps } from '../../modules/Transition/Transition'
+import { TransitionProps, TRANSITION_STATUSES } from '../../modules/Transition/Transition'
 import { PortalProps } from '../Portal/Portal'
 
 export interface TransitionablePortalProps extends StrictTransitionablePortalProps {
@@ -15,33 +15,37 @@ export interface StrictTransitionablePortalProps {
    * Called when a close event happens.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and internal state.
+   * @param {object} props - All props.
+   * @param {object} state - Internal state.
    */
-  onClose?: (nothing: null, data: PortalProps & TransitionablePortalState) => void
+  onClose?: (nothing: null, props: PortalProps, state: TransitionablePortalState) => void
 
   /**
    * Callback on each transition that changes visibility to hidden.
    *
    * @param {null}
-   * @param {object} data - All props with status.
+   * @param {object} props - All props.
+   * @param {object} state - Internal state.
    */
-  onHide?: (nothing: null, data: TransitionEventData & TransitionablePortalState) => void
+  onHide?: (nothing: null, props: TransitionProps, state: TransitionablePortalState) => void
 
   /**
    * Called when an open event happens.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and internal state.
+   * @param {object} props - All props.
+   * @param {object} state - Internal state.
    */
-  onOpen?: (nothing: null, data: PortalProps & TransitionablePortalState) => void
+  onOpen?: (nothing: null, props: PortalProps, state: TransitionablePortalState) => void
 
   /**
    * Callback on animation start.
    *
    * @param {null}
-   * @param {object} data - All props with status.
+   * @param {object} props - All props.
+   * @param {object} state - Internal state.
    */
-  onStart?: (nothing: null, data: TransitionEventData & TransitionablePortalState) => void
+  onStart?: (nothing: null, props: TransitionProps, state: TransitionablePortalState) => void
 
   /** Controls whether or not the portal is displayed. */
   open?: boolean
@@ -51,6 +55,7 @@ export interface StrictTransitionablePortalProps {
 }
 
 export interface TransitionablePortalState {
+  transitionStatus: TRANSITION_STATUSES
   portalOpen: boolean
   transitionVisible: boolean
 }

src/addons/TransitionablePortal/TransitionablePortal.js

@@ -74,21 +74,28 @@ function TransitionablePortal(props) {
     setPortalOpen(true)
   }
 
-  const handleTransitionHide = (nothing, data) => {
+  const handleTransitionHide = (nothing, data, status) => {
     debug('handleTransitionHide()')
 
     setTransitionVisible(false)
-    _.invoke(props, 'onClose', null, { ...data, portalOpen: false, transitionVisible: false })
-    _.invoke(props, 'onHide', null, { ...data, portalOpen, transitionVisible: false })
+    _.invoke(props, 'onClose', null, data, {
+      transitionStatus: status,
+      portalOpen: false,
+      transitionVisible: false,
+    })
+    _.invoke(props, 'onHide', null, data, {
+      transitionStatus: status,
+      portalOpen,
+      transitionVisible: false,
+    })
   }
 
-  const handleTransitionStart = (nothing, data) => {
+  const handleTransitionStart = (nothing, data, status) => {
     debug('handleTransitionStart()')
-    const { status } = data
     const nextTransitionVisible = status === TRANSITION_STATUS_ENTERING
 
-    _.invoke(props, 'onStart', null, {
-      ...data,
+    _.invoke(props, 'onStart', null, data, {
+      transitionStatus: status,
       portalOpen,
       transitionVisible: nextTransitionVisible,
     })
@@ -99,8 +106,8 @@ function TransitionablePortal(props) {
     }
 
     setTransitionVisible(nextTransitionVisible)
-    _.invoke(props, 'onOpen', null, {
-      ...data,
+    _.invoke(props, 'onOpen', null, data, {
+      transitionStatus: status,
       transitionVisible: nextTransitionVisible,
       portalOpen: true,
     })

src/elements/Input/Input.d.ts

@@ -60,9 +60,10 @@ export interface StrictInputProps {
    * Called on change.
    *
    * @param {ChangeEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and a proposed value.
+   * @param {object} props - All props.
+   * @param {string} value - The value of the input.
    */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, props: InputProps, value: string) => void
 
   /** An Input can vary in size. */
   size?: 'mini' | 'small' | 'large' | 'big' | 'huge' | 'massive'
@@ -77,10 +78,6 @@ export interface StrictInputProps {
   type?: string
 }
 
-export interface InputOnChangeData extends InputProps {
-  value: string
-}
-
 declare const Input: ForwardRefComponent<InputProps, HTMLInputElement>
 
 export default Input

src/elements/Input/Input.js

@@ -72,7 +72,7 @@ const Input = React.forwardRef(function (props, ref) {
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onChange', e, { ...props, value: newValue })
+    _.invoke(props, 'onChange', e, props, newValue)
   }
 
   const partitionProps = () => {

src/elements/Input/index.d.ts

@@ -1 +1 @@
-export { default, InputProps, StrictInputProps, InputOnChangeData } from './Input'
+export { default, InputProps, StrictInputProps } from './Input'

src/modules/Checkbox/Checkbox.d.ts

@@ -43,33 +43,61 @@ export interface StrictCheckboxProps {
    * Called when the user attempts to change the checked state.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and proposed checked/indeterminate state.
+   * @param {object} props - All props.
+   * @param {boolean} checked - Current checked state.
+   * @param {boolean} indeterminate - Current indeterminate state.
    */
-  onChange?: (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => void
+  onChange?: (
+    event: React.FormEvent<HTMLInputElement>,
+    props: CheckboxProps,
+    checked: boolean,
+    indeterminate: boolean,
+  ) => void
 
   /**
    * Called when the checkbox or label is clicked.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and current checked/indeterminate state.
+   * @param {object} props - All props.
+   * @param {boolean} checked - Current checked state.
+   * @param {boolean} indeterminate - Current indeterminate state.
    */
-  onClick?: (event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => void
+  onClick?: (
+    event: React.MouseEvent<HTMLInputElement>,
+    props: CheckboxProps,
+    checked: boolean,
+    indeterminate: boolean,
+  ) => void
 
   /**
    * Called when the user presses down on the mouse.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and current checked/indeterminate state.
+   * @param {object} props - All props.
+   * @param {boolean} checked - Current checked state.
+   * @param {boolean} indeterminate - Current indeterminate state.
    */
-  onMouseDown?: (event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => void
+  onMouseDown?: (
+    event: React.MouseEvent<HTMLInputElement>,
+    props: CheckboxProps,
+    checked: boolean,
+    indeterminate: boolean,
+  ) => void
 
   /**
    * Called when the user releases the mouse.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and current checked/indeterminate state.
+   * @param {object} props - All props.
+   * @param {boolean} checked - Current checked state.
+   * @param {boolean} indeterminate - Current indeterminate state.
    */
-  onMouseUp?: (event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => void
+  onMouseUp?: (
+    event: React.MouseEvent<HTMLInputElement>,
+    props: CheckboxProps,
+    checked: boolean,
+    indeterminate: boolean,
+  ) => void
 
   /** Format as a radio element. This means it is an exclusive option. */
   radio?: boolean