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