apply changes

src/modules/Modal/Modal.js

@@ -9,7 +9,7 @@ import {
   customPropTypes,
   doesNodeContainClick,
   eventStack,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   isBrowser,
   makeDebugger,
@@ -33,20 +33,19 @@ const debug = makeDebugger('modal')
  * @see Confirm
  * @see Portal
  */
-const Modal = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Modal = React.forwardRef(function (props, ref) {
   const {
     actions,
     basic,
-    centered,
+    centered = true,
     children,
     className,
     closeIcon,
-    closeOnDimmerClick,
-    closeOnDocumentClick,
+    closeOnDimmerClick = true,
+    closeOnDocumentClick = false,
     content,
-    dimmer,
-    eventPool,
+    dimmer = true,
+    eventPool = 'Modal',
     header,
     size,
     style,
@@ -186,7 +185,7 @@ const Modal = React.forwardRef(function (partialProps, ref) {
       'modal transition visible active',
       className,
     )
-    const ElementType = getElementType(Modal, props)
+    const ElementType = getComponentType(props)
 
     const closeIconName = closeIcon === true ? 'close' : closeIcon
     const closeIconJSX = Icon.create(closeIconName, {
@@ -399,16 +398,6 @@ Modal.propTypes = {
    */
 }
 
-function getDefaultProps() {
-  return {
-    centered: true,
-    dimmer: true,
-    closeOnDimmerClick: true,
-    closeOnDocumentClick: false,
-    eventPool: 'Modal',
-  }
-}
-
 Modal.Actions = ModalActions
 Modal.Content = ModalContent
 Modal.Description = ModalDescription

src/modules/Popup/Popup.js

@@ -10,7 +10,7 @@ import {
   childrenUtils,
   createHTMLDivision,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   SUI,
@@ -35,7 +35,7 @@ const debug = makeDebugger('popup')
  */
 function getPortalProps(props) {
   const portalProps = {}
-  const normalizedOn = _.isArray(props.on) ? props.on : [props.on]
+  const normalizedOn = _.isArray(props.on) ? props.on ?? ['click', 'hover'] : [props.on]
 
   if (props.hoverable) {
     portalProps.closeOnPortalMouseLeave = true
@@ -111,25 +111,24 @@ function usePositioningEffect(popperDependencies, positionUpdate) {
 /**
  * A Popup displays additional information on top of a page.
  */
-const Popup = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Popup = React.forwardRef(function (props, ref) {
   const {
     basic,
     className,
     content,
     context,
     children,
-    disabled,
-    eventsEnabled,
+    disabled = false,
+    eventsEnabled = true,
     flowing,
     header,
     inverted,
     offset,
-    pinned,
+    pinned = false,
     popper,
     popperDependencies,
-    popperModifiers,
-    position,
+    popperModifiers = [],
+    position = 'top left',
     positionFixed,
     size,
     style,
@@ -231,7 +230,7 @@ const Popup = React.forwardRef(function (partialProps, ref) {
       'popup transition visible',
       className,
     )
-    const ElementType = getElementType(Popup, props)
+    const ElementType = getComponentType(props)
 
     const styles = {
       // Heads up! We need default styles to get working correctly `flowing`
@@ -470,17 +469,6 @@ Popup.propTypes = {
   wide: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
 }
 
-function getDefaultProps() {
-  return {
-    disabled: false,
-    eventsEnabled: true,
-    on: ['click', 'hover'],
-    pinned: false,
-    popperModifiers: [],
-    position: 'top left',
-  }
-}
-
 Popup.Content = PopupContent
 Popup.Header = PopupHeader
 

src/modules/Rating/Rating.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -15,9 +15,8 @@ import RatingIcon from './RatingIcon'
 /**
  * A rating indicates user interest in content.
  */
-const Rating = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { className, clearable, disabled, icon, maxRating, size } = props
+const Rating = React.forwardRef(function (props, ref) {
+  const { className, clearable = 'auto', disabled, icon, maxRating = 1, size } = props
 
   const [rating, setRating] = useAutoControlledValue({
     state: props.rating,
@@ -37,7 +36,7 @@ const Rating = React.forwardRef(function (partialProps, ref) {
     className,
   )
   const rest = getUnhandledProps(Rating, props)
-  const ElementType = getElementType(Rating, props)
+  const ElementType = getComponentType(props)
 
   const handleIconClick = (e, { index }) => {
     if (disabled) {
@@ -152,13 +151,6 @@ Rating.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
 }
 
-function getDefaultProps() {
-  return {
-    clearable: 'auto',
-    maxRating: 1,
-  }
-}
-
 Rating.Icon = RatingIcon
 
 export default Rating

src/modules/Rating/RatingIcon.js

@@ -4,13 +4,12 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
+import { getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
 
 /**
  * An internal icon sub-component for Rating component
  */
-const RatingIcon = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const RatingIcon = React.forwardRef(function (props, ref) {
   const { active, className, selected } = props
 
   const classes = cx(
@@ -20,7 +19,7 @@ const RatingIcon = React.forwardRef(function (partialProps, ref) {
     className,
   )
   const rest = getUnhandledProps(RatingIcon, props)
-  const ElementType = getElementType(RatingIcon, props)
+  const ElementType = getComponentType(props, { as: 'i' })
 
   const handleClick = (e) => {
     _.invoke(props, 'onClick', e, props)
@@ -98,10 +97,4 @@ RatingIcon.propTypes = {
   selected: PropTypes.bool,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'i',
-  }
-}
-
 export default RatingIcon

src/modules/Search/SearchCategory.js

@@ -1,24 +1,29 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
-const SearchCategory = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { active, children, className, content, layoutRenderer, renderer } = props
+const SearchCategory = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    children,
+    className,
+    content,
+    layoutRenderer = SearchCategoryLayout,
+    renderer = ({ name }) => name,
+  } = props
 
   const classes = cx(useKeyOnly(active, 'active'), 'category', className)
   const rest = getUnhandledProps(SearchCategory, props)
-  const ElementType = getElementType(SearchCategory, props)
+  const ElementType = getComponentType(props)
 
   const categoryContent = renderer(props)
   const resultsContent = childrenUtils.isNil(children) ? content : children
@@ -30,13 +35,6 @@ const SearchCategory = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    layoutRenderer: SearchCategoryLayout,
-    renderer: ({ name }) => name,
-  }
-}
-
 SearchCategory.displayName = 'SearchCategory'
 SearchCategory.propTypes = {
   /** An element type to render as (string or function). */

src/modules/Search/SearchResult.js

@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -31,17 +31,16 @@ const defaultRenderer = ({ image, price, title, description }) => [
   </div>,
 ]
 
-const SearchResult = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { active, className, renderer } = props
+const SearchResult = React.forwardRef(function (props, ref) {
+  const { active, className, renderer = defaultRenderer } = props
 
   const handleClick = (e) => {
     _.invoke(props, 'onClick', e, props)
   }
 
   const classes = cx(useKeyOnly(active, 'active'), 'result', className)
   const rest = getUnhandledProps(SearchResult, props)
-  const ElementType = getElementType(SearchResult, props)
+  const ElementType = getComponentType(props)
 
   // Note: You technically only need the 'content' wrapper when there's an
   // image. However, optionally wrapping it makes this function a lot more
@@ -100,10 +99,4 @@ SearchResult.propTypes = {
   title: PropTypes.string.isRequired,
 }
 
-function getDefaultProps() {
-  return {
-    renderer: defaultRenderer,
-  }
-}
-
 export default SearchResult

src/modules/Sticky/Sticky.js

@@ -5,7 +5,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   isRefObject,
   isBrowser,
@@ -16,16 +16,15 @@ import {
 /**
  * Sticky content stays fixed to the browser viewport while another column of content is visible on the page.
  */
-const Sticky = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Sticky = React.forwardRef(function (props, ref) {
   const {
-    active,
-    bottomOffset,
+    active = true,
+    bottomOffset = 0,
     children,
     className,
     context,
-    offset,
-    scrollContext,
+    offset = 0,
+    scrollContext = isBrowser() ? window : null,
     styleElement,
   } = props
 
@@ -243,7 +242,7 @@ const Sticky = React.forwardRef(function (partialProps, ref) {
   // ----------------------------------------
 
   const rest = getUnhandledProps(Sticky, props)
-  const ElementType = getElementType(Sticky, props)
+  const ElementType = getComponentType(props)
 
   const containerClasses = cx(
     sticky && 'ui',
@@ -334,13 +333,4 @@ Sticky.propTypes = {
   styleElement: PropTypes.object,
 }
 
-function getDefaultProps() {
-  return {
-    active: true,
-    bottomOffset: 0,
-    offset: 0,
-    scrollContext: isBrowser() ? window : null,
-  }
-}
-
 export default Sticky