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)) {