replace loadsh invoke with optional chaining

docs/src/components/CarbonAd/CarbonAd.js

@@ -53,7 +53,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) => {

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

@@ -15,20 +15,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

@@ -38,15 +38,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

@@ -14,14 +14,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

@@ -61,7 +61,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 +77,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 +173,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 +190,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 +204,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 +218,7 @@ function Portal(props) {
     clearTimeout(mouseEnterTimer)
 
     // Call original event handler
-    _.invoke(trigger, 'props.onMouseLeave', e, ...rest)
+    trigger.props.onMouseLeave?.(e, ...rest)
 
     if (!closeOnTriggerMouseLeave) {
       return
@@ -232,7 +232,7 @@ function Portal(props) {
     clearTimeout(mouseLeaveTimer)
 
     // Call original event handler
-    _.invoke(trigger, 'props.onMouseEnter', e, ...rest)
+    trigger.props.onMouseEnter?.(e, ...rest)
 
     if (!openOnTriggerMouseEnter) {
       return
@@ -248,8 +248,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

@@ -12,8 +12,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

@@ -72,16 +72,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,
@@ -93,7 +93,7 @@ function TransitionablePortal(props) {
     }
 
     setTransitionVisible(nextTransitionVisible)
-    _.invoke(props, 'onOpen', null, {
+    props.onOpen?.(null, {
       ...data,
       transitionVisible: nextTransitionVisible,
       portalOpen: true,

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -25,7 +25,7 @@ const BreadcrumbSection = React.forwardRef(function (props, ref) {
     if (link || onClick) return 'a'
   })
 
-  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

@@ -55,7 +55,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 = getElementType(Message, 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

@@ -136,7 +136,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.js

@@ -83,7 +83,7 @@ const Icon = React.forwardRef(function (props, ref) {
       return
     }
 
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   })
 
   return (

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 = getElementType(Label, 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)
             },
           }),
         }),

src/elements/List/ListItem.js

@@ -46,7 +46,7 @@ const ListItem = React.forwardRef(function (props, ref) {
 
   const handleClick = useEventCallback((e) => {
     if (!disabled) {
-      _.invoke(props, 'onClick', e, props)
+      props.onClick?.(e, props)
     }
   })
   const valueProp = ElementType === 'li' ? { value } : { 'data-value': value }

src/elements/Step/Step.js

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

src/lib/ModernAutoControlledComponent.js

@@ -72,7 +72,7 @@ export default class ModernAutoControlledComponent extends React.Component {
     super(...args)
 
     const { autoControlledProps, getAutoControlledStateFromProps } = this.constructor
-    const state = _.invoke(this, 'getInitialAutoControlledState', this.props) || {}
+    const state = this.getInitialAutoControlledState?.(this.props) || {}
 
     if (process.env.NODE_ENV !== 'production') {
       const { defaultProps, name, propTypes, getDerivedStateFromProps } = this.constructor

src/lib/doesNodeContainClick.js

@@ -16,10 +16,10 @@ const doesNodeContainClick = (node, e) => {
 
   // if there is an e.target and it is in the document, use a simple node.contains() check
   if (e.target) {
-    _.invoke(e.target, 'setAttribute', 'data-suir-click-target', true)
+    e.target.setAttribute?.('data-suir-click-target', true)
 
     if (document.querySelector('[data-suir-click-target=true]')) {
-      _.invoke(e.target, 'removeAttribute', 'data-suir-click-target')
+      e.target.removeAttribute?.('data-suir-click-target')
 
       if (typeof node.contains === 'function') {
         return node.contains(e.target)

src/modules/Accordion/AccordionAccordion.js

@@ -60,7 +60,7 @@ const AccordionAccordion = React.forwardRef(function (props, ref) {
     const { index } = titleProps
 
     setActiveIndex(computeNewIndex(exclusive, activeIndex, index))
-    _.invoke(props, 'onTitleClick', e, titleProps)
+    props.onTitleClick?.(e, titleProps)
   })
 
   if (process.env.NODE_ENV !== 'production') {

src/modules/Accordion/AccordionPanel.js

@@ -12,8 +12,8 @@ import AccordionContent from './AccordionContent'
 class AccordionPanel extends Component {
   handleTitleOverrides = (predefinedProps) => ({
     onClick: (e, titleProps) => {
-      _.invoke(predefinedProps, 'onClick', e, titleProps)
-      _.invoke(this.props, 'onTitleClick', e, titleProps)
+      predefinedProps.onClick?.(e, titleProps)
+      this.props.onTitleClick?.(e, titleProps)
     },
   })
 

src/modules/Accordion/AccordionTitle.js

@@ -26,7 +26,7 @@ const AccordionTitle = React.forwardRef(function (props, ref) {
   const iconValue = _.isNil(icon) ? 'dropdown' : icon
 
   const handleClick = useEventCallback((e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   })
 
   if (!childrenUtils.isNil(children)) {