dropdown

src/modules/Dropdown/Dropdown.d.ts

@@ -126,49 +126,57 @@ export interface StrictDropdownProps {
    * Called when a user adds a new item. Use this to update the options list.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and the new item's value.
+   * @param {object} props - All props.
    */
-  onAddItem?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void
+  onAddItem?: (
+    event: React.SyntheticEvent<HTMLElement>,
+    props: DropdownProps,
+    value: boolean | number | string | (boolean | number | string)[],
+  ) => void
 
   /**
    * Called on blur.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onBlur?: (event: React.FocusEvent<HTMLElement>, data: DropdownProps) => void
+  onBlur?: (event: React.FocusEvent<HTMLElement>, props: DropdownProps) => void
 
   /**
    * Called when the user attempts to change the value.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props and proposed value.
+   * @param {object} props - All props.
    */
-  onChange?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void
+  onChange?: (
+    event: React.SyntheticEvent<HTMLElement>,
+    props: DropdownProps,
+    value: boolean | number | string | (boolean | number | string)[],
+  ) => void
 
   /**
    * Called on click.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onClick?: (event: React.MouseEvent<HTMLElement>, data: DropdownProps) => void
+  onClick?: (event: React.MouseEvent<HTMLElement>, props: DropdownProps) => void
 
   /**
    * Called when a close event happens.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onClose?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void
+  onClose?: (event: React.SyntheticEvent<HTMLElement>, props: DropdownProps) => void
 
   /**
    * Called on focus.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onFocus?: (event: React.FocusEvent<HTMLElement>, data: DropdownProps) => void
+  onFocus?: (event: React.FocusEvent<HTMLElement>, props: DropdownProps) => void
 
   /**
    * Called when a multi-select label is clicked.
@@ -182,27 +190,29 @@ export interface StrictDropdownProps {
    * Called on mousedown.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onMouseDown?: (event: React.MouseEvent<HTMLElement>, data: DropdownProps) => void
+  onMouseDown?: (event: React.MouseEvent<HTMLElement>, props: DropdownProps) => void
 
   /**
    * Called when an open event happens.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onOpen?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void
+  onOpen?: (event: React.SyntheticEvent<HTMLElement>, props: DropdownProps) => void
 
   /**
    * Called on search input change.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props, includes current value of searchQuery.
+   * @param {object} props - All props.
+   * @param {string} searchQuery - Current value of searchQuery.
    */
   onSearchChange?: (
     event: React.SyntheticEvent<HTMLElement>,
-    data: DropdownOnSearchChangeData,
+    data: DropdownProps,
+    searchQuery: string,
   ) => void
 
   /** Controls whether or not the dropdown menu is displayed. */
@@ -292,13 +302,6 @@ export interface StrictDropdownProps {
   wrapSelection?: boolean
 }
 
-/* TODO: replace with DropdownProps when #1829 will be fixed:
- * https://github.com/Semantic-Org/Semantic-UI-React/issues/1829
- */
-export interface DropdownOnSearchChangeData extends DropdownProps {
-  searchQuery: string
-}
-
 declare const Dropdown: ForwardRefComponent<DropdownProps, HTMLDivElement> & {
   Divider: typeof DropdownDivider
   Header: typeof DropdownHeader

src/modules/Dropdown/Dropdown.js

@@ -231,7 +231,7 @@ class DropdownInner extends Component {
   // can't rely on props.value if we are controlled
   handleChange = (e, value) => {
     debug('handleChange()', value)
-    _.invoke(this.props, 'onChange', e, { ...this.props, value })
+    _.invoke(this.props, 'onChange', e, this.props, value)
   }
 
   closeOnChange = (e) => {
@@ -342,7 +342,7 @@ class DropdownInner extends Component {
       // Heads up! This event handler should be called after `onChange`
       // Notify the onAddItem prop if this is a new value
       if (item['data-additional']) {
-        _.invoke(this.props, 'onAddItem', e, { ...this.props, value: selectedValue })
+        _.invoke(this.props, 'onAddItem', e, this.props, selectedValue)
       }
     }
 
@@ -544,7 +544,7 @@ class DropdownInner extends Component {
     // Heads up! This event handler should be called after `onChange`
     // Notify the onAddItem prop if this is a new value
     if (isAdditionItem) {
-      _.invoke(this.props, 'onAddItem', e, { ...this.props, value })
+      _.invoke(this.props, 'onAddItem', e, this.props, value)
     }
   }
 
@@ -592,7 +592,7 @@ class DropdownInner extends Component {
     const { open } = this.state
     const newQuery = value
 
-    _.invoke(this.props, 'onSearchChange', e, { ...this.props, searchQuery: newQuery })
+    _.invoke(this.props, 'onSearchChange', e, this.props, newQuery)
     this.setState({ searchQuery: newQuery, selectedIndex: 0 })
 
     // open search dropdown on search query