chore: replace lodash invoke with optional chaining

docs/src/components/CarbonAd/CarbonAd.js

@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
@@ -53,7 +52,7 @@ class CarbonAd extends Component {
       // https://github.com/Semantic-Org/Semantic-UI-React/pull/3215
       if (!isLoading) {
         isLoading = true
-        _.invoke(window._carbonads, 'refresh')
+        window._carbonads.refresh?.()
         waitForLoad()
       }
     })

docs/src/components/CodeEditor/CodeEditor.js

@@ -113,7 +113,7 @@ class CodeEditor extends React.Component {
   }
 
   handleChange = _.debounce((value, e) => {
-    _.invoke(this.props, 'onChange', value, e)
+    this.props.onChange?.(value, e)
   }, 300)
 
   setCursorVisibility = (visible) => {
@@ -150,6 +150,7 @@ class CodeEditor extends React.Component {
 
 CodeEditor.propTypes = {
   active: PropTypes.bool,
+  onChange: PropTypes.func,
   showCursor: PropTypes.bool,
   value: PropTypes.string.isRequired,
 }

docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js

@@ -20,7 +20,7 @@ export default class ComponentSidebarSection extends PureComponent {
   }
 
   handleItemClick = (examplePath) => (e) => {
-    _.invoke(this.props, 'onItemClick', e, { examplePath })
+    this.props.onItemClick?.(e, { examplePath })
   }
 
   handleTitleClick = () => {

src/addons/Confirm/Confirm.js

@@ -22,20 +22,20 @@ const Confirm = React.forwardRef(function (props, ref) {
   const rest = getUnhandledProps(Confirm, props)
 
   const handleCancel = (e) => {
-    _.invoke(props, 'onCancel', e, props)
+    props.onCancel?.(e, props)
   }
 
   const handleCancelOverrides = (predefinedProps) => ({
     onClick: (e, buttonProps) => {
-      _.invoke(predefinedProps, 'onClick', e, buttonProps)
+      predefinedProps.onClick?.(e, buttonProps)
       handleCancel(e)
     },
   })
 
   const handleConfirmOverrides = (predefinedProps) => ({
     onClick: (e, buttonProps) => {
-      _.invoke(predefinedProps, 'onClick', e, buttonProps)
-      _.invoke(props, 'onConfirm', e, props)
+      predefinedProps.onClick?.(e, buttonProps)
+      props.onConfirm?.(e, props)
     },
   })
 

src/addons/Pagination/Pagination.js

@@ -55,15 +55,15 @@ const Pagination = React.forwardRef(function (props, ref) {
     }
 
     setActivePage(nextActivePage)
-    _.invoke(props, 'onPageChange', e, { ...props, activePage: nextActivePage })
+    props.onPageChange?.(e, { ...props, activePage: nextActivePage })
   }
 
   const handleItemOverrides = (active, type, value) => (predefinedProps) => ({
     active,
     type,
     key: `${type}-${value}`,
     onClick: (e, itemProps) => {
-      _.invoke(predefinedProps, 'onClick', e, itemProps)
+      predefinedProps.onClick?.(e, itemProps)
 
       if (itemProps.type !== 'ellipsisItem') {
         handleItemClick(e, itemProps)

src/addons/Pagination/PaginationItem.js

@@ -1,5 +1,4 @@
 import keyboardKey from 'keyboard-key'
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
@@ -14,14 +13,14 @@ const PaginationItem = React.forwardRef(function (props, ref) {
   const disabled = props.disabled || type === 'ellipsisItem'
 
   const handleClick = (e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   }
 
   const handleKeyDown = (e) => {
-    _.invoke(props, 'onKeyDown', e, props)
+    props.onKeyDown?.(e, props)
 
     if (keyboardKey.getCode(e) === keyboardKey.Enter) {
-      _.invoke(props, 'onClick', e, props)
+      props.onClick?.(e, props)
     }
   }
 

src/addons/Portal/Portal.js

@@ -1,6 +1,5 @@
 import EventStack from '@semantic-ui-react/event-stack'
 import keyboardKey from 'keyboard-key'
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
@@ -61,7 +60,7 @@ function Portal(props) {
     debug('open()')
 
     setOpen(true)
-    _.invoke(props, 'onOpen', e, { ...props, open: true })
+    props.onOpen?.(e, { ...props, open: true })
   }
 
   const openPortalWithTimeout = (e, delay) => {
@@ -77,7 +76,7 @@ function Portal(props) {
     debug('close()')
 
     setOpen(false)
-    _.invoke(props, 'onClose', e, { ...props, open: false })
+    props.onClose?.(e, { ...props, open: false })
   }
 
   const closePortalWithTimeout = (e, delay) => {
@@ -173,12 +172,12 @@ function Portal(props) {
 
   const handleTriggerBlur = (e, ...rest) => {
     // Call original event handler
-    _.invoke(trigger, 'props.onBlur', e, ...rest)
+    trigger.props.onBlur?.(e, ...rest)
 
     // IE 11 doesn't work with relatedTarget in blur events
     const target = e.relatedTarget || document.activeElement
     // do not close if focus is given to the portal
-    const didFocusPortal = _.invoke(contentRef.current, 'contains', target)
+    const didFocusPortal = contentRef.current.contains?.(target)
 
     if (!closeOnTriggerBlur || didFocusPortal) {
       return
@@ -190,7 +189,7 @@ function Portal(props) {
 
   const handleTriggerClick = (e, ...rest) => {
     // Call original event handler
-    _.invoke(trigger, 'props.onClick', e, ...rest)
+    trigger.props.onClick?.(e, ...rest)
 
     if (open && closeOnTriggerClick) {
       debug('handleTriggerClick() - close')
@@ -204,7 +203,7 @@ function Portal(props) {
 
   const handleTriggerFocus = (e, ...rest) => {
     // Call original event handler
-    _.invoke(trigger, 'props.onFocus', e, ...rest)
+    trigger.props.onFocus?.(e, ...rest)
 
     if (!openOnTriggerFocus) {
       return
@@ -218,7 +217,7 @@ function Portal(props) {
     clearTimeout(mouseEnterTimer.current)
 
     // Call original event handler
-    _.invoke(trigger, 'props.onMouseLeave', e, ...rest)
+    trigger.props.onMouseLeave?.(e, ...rest)
 
     if (!closeOnTriggerMouseLeave) {
       return
@@ -232,7 +231,7 @@ function Portal(props) {
     clearTimeout(mouseLeaveTimer.current)
 
     // Call original event handler
-    _.invoke(trigger, 'props.onMouseEnter', e, ...rest)
+    trigger.props.onMouseEnter?.(e, ...rest)
 
     if (!openOnTriggerMouseEnter) {
       return
@@ -248,8 +247,8 @@ function Portal(props) {
         <>
           <PortalInner
             mountNode={mountNode}
-            onMount={() => _.invoke(props, 'onMount', null, props)}
-            onUnmount={() => _.invoke(props, 'onUnmount', null, props)}
+            onMount={() => props.onMount?.(null, props)}
+            onUnmount={() => props.onUnmount?.(null, props)}
             ref={contentRef}
           >
             {children}

src/addons/Portal/PortalInner.js

@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 import { createPortal } from 'react-dom'
@@ -12,8 +11,8 @@ const debug = makeDebugger('PortalInner')
  * An inner component that allows you to render children outside their parent.
  */
 const PortalInner = React.forwardRef(function (props, ref) {
-  const handleMount = useEventCallback(() => _.invoke(props, 'onMount', null, props))
-  const handleUnmount = useEventCallback(() => _.invoke(props, 'onUnmount', null, props))
+  const handleMount = useEventCallback(() => props.onMount?.(null, props))
+  const handleUnmount = useEventCallback(() => props.onUnmount?.(null, props))
 
   const element = usePortalElement(props.children, ref)
 

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 })
+    props.onChange?.(e, { ...props, value: newValue })
   }
 
   const handleInput = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onInput', e, { ...props, value: newValue })
+    props.onInput?.(e, { ...props, value: newValue })
   }
 
   const rest = getUnhandledProps(TextArea, props)

src/addons/TransitionablePortal/TransitionablePortal.js

@@ -78,16 +78,16 @@ function TransitionablePortal(props) {
     debug('handleTransitionHide()')
 
     setTransitionVisible(false)
-    _.invoke(props, 'onClose', null, { ...data, portalOpen: false, transitionVisible: false })
-    _.invoke(props, 'onHide', null, { ...data, portalOpen, transitionVisible: false })
+    props.onClose?.(null, { ...data, portalOpen: false, transitionVisible: false })
+    props.onHide?.(null, { ...data, portalOpen, transitionVisible: false })
   }
 
   const handleTransitionStart = (nothing, data) => {
     debug('handleTransitionStart()')
     const { status } = data
     const nextTransitionVisible = status === TRANSITION_STATUS_ENTERING
 
-    _.invoke(props, 'onStart', null, {
+    props.onStart?.(null, {
       ...data,
       portalOpen,
       transitionVisible: nextTransitionVisible,
@@ -99,7 +99,7 @@ function TransitionablePortal(props) {
     }
 
     setTransitionVisible(nextTransitionVisible)
-    _.invoke(props, 'onOpen', null, {
+    props.onOpen?.(null, {
       ...data,
       transitionVisible: nextTransitionVisible,
       portalOpen: true,

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -1,5 +1,4 @@
 import cx from 'clsx'
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
@@ -27,7 +26,7 @@ const BreadcrumbSection = React.forwardRef(function (props, ref) {
     },
   })
 
-  const handleClick = useEventCallback((e) => _.invoke(props, 'onClick', e, props))
+  const handleClick = useEventCallback((e) => props.onClick?.(e, props))
 
   return (
     <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>

src/collections/Form/Form.js

@@ -43,8 +43,8 @@ const Form = React.forwardRef(function (props, ref) {
   const handleSubmit = (e, ...args) => {
     // Heads up! Third party libs can pass own data as first argument, we need to check that it has preventDefault()
     // method.
-    if (typeof action !== 'string') _.invoke(e, 'preventDefault')
-    _.invoke(props, 'onSubmit', e, props, ...args)
+    if (typeof action !== 'string') e.preventDefault?.()
+    props.onSubmit?.(e, props, ...args)
   }
 
   const classes = cx(

src/collections/Menu/Menu.js

@@ -102,8 +102,8 @@ const Menu = React.forwardRef(function (props, ref) {
 
               setActiveIndex(itemIndex)
 
-              _.invoke(predefinedProps, 'onClick', e, itemProps)
-              _.invoke(props, 'onItemClick', e, itemProps)
+              predefinedProps.onClick?.(e, itemProps)
+              props.onItemClick?.(e, itemProps)
             },
           }),
         }),

src/collections/Menu/MenuItem.js

@@ -57,7 +57,7 @@ const MenuItem = React.forwardRef(function (props, ref) {
 
   const handleClick = useEventCallback((e) => {
     if (!disabled) {
-      _.invoke(props, 'onClick', e, props)
+      props.onClick?.(e, props)
     }
   })
 

src/collections/Message/Message.js

@@ -71,7 +71,7 @@ const Message = React.forwardRef(function (props, ref) {
   const ElementType = getComponentType(props)
 
   const handleDismiss = useEventCallback((e) => {
-    _.invoke(props, 'onDismiss', e, props)
+    props.onDismiss?.(e, props)
   })
   const dismissIcon = onDismiss && <Icon name='close' onClick={handleDismiss} />
 

src/elements/Button/Button.js

@@ -139,7 +139,7 @@ const Button = React.forwardRef(function (props, ref) {
       return
     }
 
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   }
 
   if (!_.isNil(label)) {

src/elements/Icon/Icon.d.ts

@@ -48,6 +48,14 @@ export interface StrictIconProps {
   /** Name of the icon. */
   name?: SemanticICONS
 
+  /**
+   * Called on click.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: IconProps) => void
+
   /** Icon can rotated. */
   rotated?: 'clockwise' | 'counterclockwise'
 

src/elements/Icon/Icon.js

@@ -83,7 +83,7 @@ const Icon = React.forwardRef(function (props, ref) {
       return
     }
 
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   })
 
   return (
@@ -135,6 +135,14 @@ Icon.propTypes = {
   /** Name of the icon. */
   name: customPropTypes.suggest(SUI.ALL_ICONS_IN_ALL_CONTEXTS),
 
+  /**
+   * Called on click.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onClick: PropTypes.func,
+
   /** Icon can rotated. */
   rotated: PropTypes.oneOf(['clockwise', 'counterclockwise']),
 

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 })
+    props.onChange?.(e, { ...props, value: newValue })
   }
 
   const partitionProps = () => {

src/elements/Label/Label.js

@@ -78,7 +78,7 @@ const Label = React.forwardRef(function (props, ref) {
   const ElementType = getComponentType(props)
 
   const handleClick = useEventCallback((e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   })
 
   if (!childrenUtils.isNil(children)) {
@@ -102,8 +102,8 @@ const Label = React.forwardRef(function (props, ref) {
           autoGenerateKey: false,
           overrideProps: (predefinedProps) => ({
             onClick: (e) => {
-              _.invoke(predefinedProps, 'onClick', e)
-              _.invoke(props, 'onRemove', e, props)
+              predefinedProps.onClick?.(e)
+              props.onRemove?.(e, props)
             },
           }),
         })}

src/elements/List/List.js

@@ -88,8 +88,8 @@ const List = React.forwardRef(function (props, ref) {
         ListItem.create(item, {
           overrideProps: (predefinedProps) => ({
             onClick: (e, itemProps) => {
-              _.invoke(predefinedProps, 'onClick', e, itemProps)
-              _.invoke(props, 'onItemClick', e, itemProps)
+              predefinedProps.onClick?.(e, itemProps)
+              props.onItemClick?.(e, itemProps)
             },
           }),
         }),