move data passed back from components out of props

src/addons/Pagination/Pagination.d.ts

@@ -3,11 +3,7 @@ import * as React from 'react'
 import { ForwardRefComponent, SemanticShorthandItem } from '../../generic'
 import PaginationItem, { PaginationItemProps } from './PaginationItem'
 
-export interface PaginationProps extends StrictPaginationProps {
-  [key: string]: any
-}
-
-export interface StrictPaginationProps {
+export interface PaginationProps {
   /** A pagination item can have an aria label. */
   'aria-label'?: string
 
@@ -47,7 +43,11 @@ export interface StrictPaginationProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  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

@@ -1,11 +1,7 @@
 import * as React from 'react'
 import PortalInner from './PortalInner'
 
-export interface PortalProps extends StrictPortalProps {
-  [key: string]: any
-}
-
-export interface StrictPortalProps {
+export interface PortalProps {
   /** Primary content. */
   children?: React.ReactNode
 
@@ -52,31 +48,31 @@ export interface StrictPortalProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  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.
    */
-  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.
    */
-  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.
    */
-  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/Portal/index.d.ts

@@ -1 +1 @@
-export { default, PortalProps, StrictPortalProps } from './Portal'
+export { default, PortalProps } from './Portal'

src/addons/TextArea/TextArea.d.ts

@@ -1,11 +1,7 @@
 import * as React from 'react'
 import { ForwardRefComponent } from '../../generic'
 
-export interface TextAreaProps extends StrictTextAreaProps {
-  [key: string]: any
-}
-
-export interface StrictTextAreaProps {
+export interface TextAreaProps {
   /** An element type to render as (string or function). */
   as?: any
 
@@ -15,15 +11,23 @@ export interface StrictTextAreaProps {
    * @param {SyntheticEvent} event - The React SyntheticEvent object
    * @param {object} data - All props and the event value.
    */
-  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.
    */
-  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/elements/Input/Input.d.ts

@@ -3,11 +3,7 @@ import * as React from 'react'
 import { ForwardRefComponent, HtmlInputrops, SemanticShorthandItem } from '../../generic'
 import { LabelProps } from '../Label'
 
-export interface InputProps extends StrictInputProps {
-  [key: string]: any
-}
-
-export interface StrictInputProps {
+export interface InputProps {
   /** An element type to render as (string or function). */
   as?: any
 
@@ -62,7 +58,7 @@ export interface StrictInputProps {
    * @param {ChangeEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and a proposed value.
    */
-  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 +73,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/modules/Checkbox/Checkbox.d.ts

@@ -1,11 +1,7 @@
 import * as React from 'react'
 import { ForwardRefComponent, HtmlLabelProps, SemanticShorthandItem } from '../../generic'
 
-export interface CheckboxProps extends StrictCheckboxProps {
-  [key: string]: any
-}
-
-export interface StrictCheckboxProps {
+export interface CheckboxProps {
   /** An element type to render as (string or function). */
   as?: any
 
@@ -45,31 +41,51 @@ export interface StrictCheckboxProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed checked/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.
    */
-  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.
    */
-  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.
    */
-  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

src/modules/Checkbox/Checkbox.js

@@ -96,8 +96,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
 
     debug('handleChange()', _.get(e, 'target.tagName'))
 
-    _.invoke(props, 'onChange', e, {
-      ...props,
+    _.invoke(props, 'onChange', e, props, {
       checked: !checked,
       indeterminate: false,
     })
@@ -117,8 +116,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
 
     // https://github.com/Semantic-Org/Semantic-UI-React/pull/3351
     if (!isLabelClickAndForwardedToInput) {
-      _.invoke(props, 'onClick', e, {
-        ...props,
+      _.invoke(props, 'onClick', e, props, {
         checked: !checked,
         indeterminate: !!indeterminate,
       })
@@ -147,8 +145,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
   const handleMouseDown = (e) => {
     debug('handleMouseDown()')
 
-    _.invoke(props, 'onMouseDown', e, {
-      ...props,
+    _.invoke(props, 'onMouseDown', e, props, {
       checked: !!checked,
       indeterminate: !!indeterminate,
     })
@@ -166,8 +163,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
     debug('handleMouseUp()')
 
     isClickFromMouse.current = true
-    _.invoke(props, 'onMouseUp', e, {
-      ...props,
+    _.invoke(props, 'onMouseUp', e, props, {
       checked: !!checked,
       indeterminate: !!indeterminate,
     })

src/modules/Embed/Embed.d.ts

@@ -8,11 +8,7 @@ import {
 } from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
-export interface EmbedProps extends StrictEmbedProps {
-  [key: string]: any
-}
-
-export interface StrictEmbedProps {
+export interface EmbedProps {
   /** An element type to render as (string or function). */
   as?: any
 
@@ -61,7 +57,7 @@ export interface StrictEmbedProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed value.
    */
-  onClick?: (event: React.MouseEvent<HTMLDivElement>, data: EmbedProps) => void
+  onClick?: (event: React.MouseEvent<HTMLDivElement>, props: EmbedProps, active: boolean) => void
 
   /** A placeholder image for embed. */
   placeholder?: string

src/modules/Embed/Embed.js

@@ -70,7 +70,7 @@ const Embed = React.forwardRef(function (props, ref) {
   }
 
   const handleClick = (e) => {
-    _.invoke(props, 'onClick', e, { ...props, active: true })
+    _.invoke(props, 'onClick', e, props, true)
     if (!active) {
       setActive(true)
     }