chore: rename classNameBuilder functions in "modules"

src/lib/index.js

@@ -5,12 +5,19 @@ export * as childrenUtils from './childrenUtils'
 
 export {
   useKeyOnly,
+  getKeyOnly,
   useKeyOrValueAndKey,
+  getKeyOrValueAndKey,
   useValueAndKey,
+  getValueAndKey,
   useMultipleProp,
+  getMultipleProp,
   useTextAlignProp,
+  getTextAlignProp,
   useVerticalAlignProp,
+  getVerticalAlignProp,
   useWidthProp,
+  getWidthProp,
 } from './classNameBuilders'
 
 export * as customPropTypes from './customPropTypes'

src/modules/Accordion/Accordion.js

@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { getUnhandledProps, useKeyOnly } from '../../lib'
+import { getUnhandledProps, getKeyOnly } from '../../lib'
 import AccordionAccordion from './AccordionAccordion'
 import AccordionContent from './AccordionContent'
 import AccordionPanel from './AccordionPanel'
@@ -16,9 +16,9 @@ const Accordion = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(styled, 'styled'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(styled, 'styled'),
     className,
   )
   const rest = getUnhandledProps(Accordion, props)

src/modules/Accordion/AccordionContent.js

@@ -8,7 +8,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -17,7 +17,7 @@ import {
 const AccordionContent = React.forwardRef(function (props, ref) {
   const { active, children, className, content } = props
 
-  const classes = cx('content', useKeyOnly(active, 'active'), className)
+  const classes = cx('content', getKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(AccordionContent, props)
   const ElementType = getComponentType(props)
 

src/modules/Accordion/AccordionTitle.js

@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
   useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -20,7 +20,7 @@ import Icon from '../../elements/Icon'
 const AccordionTitle = React.forwardRef(function (props, ref) {
   const { active, children, className, content, icon } = props
 
-  const classes = cx(useKeyOnly(active, 'active'), 'title', className)
+  const classes = cx(getKeyOnly(active, 'active'), 'title', className)
   const rest = getUnhandledProps(AccordionTitle, props)
   const ElementType = getComponentType(props)
   const iconValue = _.isNil(icon) ? 'dropdown' : icon

src/modules/Checkbox/Checkbox.js

@@ -11,7 +11,7 @@ import {
   htmlInputAttrs,
   makeDebugger,
   partitionHTMLProps,
-  useKeyOnly,
+  getKeyOnly,
   useAutoControlledValue,
   useMergedRefs,
   useIsomorphicLayoutEffect,
@@ -179,16 +179,16 @@ const Checkbox = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(checked, 'checked'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(indeterminate, 'indeterminate'),
+    getKeyOnly(checked, 'checked'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(indeterminate, 'indeterminate'),
     // auto apply fitted class to compact white space when there is no label
     // https://semantic-ui.com/modules/checkbox.html#fitted
-    useKeyOnly(_.isNil(label), 'fitted'),
-    useKeyOnly(radio, 'radio'),
-    useKeyOnly(readOnly, 'read-only'),
-    useKeyOnly(slider, 'slider'),
-    useKeyOnly(toggle, 'toggle'),
+    getKeyOnly(_.isNil(label), 'fitted'),
+    getKeyOnly(radio, 'radio'),
+    getKeyOnly(readOnly, 'read-only'),
+    getKeyOnly(slider, 'slider'),
+    getKeyOnly(toggle, 'toggle'),
     'checkbox',
     className,
   )

src/modules/Dimmer/DimmerDimmable.js

@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -17,8 +17,8 @@ const DimmerDimmable = React.forwardRef(function (props, ref) {
   const { blurring, className, children, content, dimmed } = props
 
   const classes = cx(
-    useKeyOnly(blurring, 'blurring'),
-    useKeyOnly(dimmed, 'dimmed'),
+    getKeyOnly(blurring, 'blurring'),
+    getKeyOnly(dimmed, 'dimmed'),
     'dimmable',
     className,
   )

src/modules/Dimmer/DimmerInner.js

@@ -9,8 +9,8 @@ import {
   doesNodeContainClick,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
-  useVerticalAlignProp,
+  getKeyOnly,
+  getVerticalAlignProp,
   useIsomorphicLayoutEffect,
   useMergedRefs,
 } from '../../lib'
@@ -58,12 +58,12 @@ const DimmerInner = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(active, 'active transition visible'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(page, 'page'),
-    useKeyOnly(simple, 'simple'),
-    useVerticalAlignProp(verticalAlign),
+    getKeyOnly(active, 'active transition visible'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(page, 'page'),
+    getKeyOnly(simple, 'simple'),
+    getVerticalAlignProp(verticalAlign),
     'dimmer',
     className,
   )

src/modules/Dropdown/Dropdown.js

@@ -16,8 +16,8 @@ import {
   makeDebugger,
   objectDiff,
   setRef,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 import Label from '../../elements/Label'
@@ -1051,7 +1051,7 @@ class DropdownInner extends Component {
     // single menu child
     if (!childrenUtils.isNil(children)) {
       const menuChild = Children.only(children)
-      const className = cx(direction, useKeyOnly(open, 'visible'), menuChild.props.className)
+      const className = cx(direction, getKeyOnly(open, 'visible'), menuChild.props.className)
 
       return cloneElement(menuChild, { className, ...ariaOptions })
     }
@@ -1096,31 +1096,31 @@ class DropdownInner extends Component {
     // Classes
     const classes = cx(
       'ui',
-      useKeyOnly(open, 'active visible'),
-      useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(error, 'error'),
-      useKeyOnly(loading, 'loading'),
-
-      useKeyOnly(basic, 'basic'),
-      useKeyOnly(button, 'button'),
-      useKeyOnly(compact, 'compact'),
-      useKeyOnly(fluid, 'fluid'),
-      useKeyOnly(floating, 'floating'),
-      useKeyOnly(inline, 'inline'),
+      getKeyOnly(open, 'active visible'),
+      getKeyOnly(disabled, 'disabled'),
+      getKeyOnly(error, 'error'),
+      getKeyOnly(loading, 'loading'),
+
+      getKeyOnly(basic, 'basic'),
+      getKeyOnly(button, 'button'),
+      getKeyOnly(compact, 'compact'),
+      getKeyOnly(fluid, 'fluid'),
+      getKeyOnly(floating, 'floating'),
+      getKeyOnly(inline, 'inline'),
       // TODO: consider augmentation to render Dropdowns as Button/Menu, solves icon/link item issues
       // https://github.com/Semantic-Org/Semantic-UI-React/issues/401#issuecomment-240487229
       // TODO: the icon class is only required when a dropdown is a button
-      // useKeyOnly(icon, 'icon'),
-      useKeyOnly(labeled, 'labeled'),
-      useKeyOnly(item, 'item'),
-      useKeyOnly(multiple, 'multiple'),
-      useKeyOnly(search, 'search'),
-      useKeyOnly(selection, 'selection'),
-      useKeyOnly(simple, 'simple'),
-      useKeyOnly(scrolling, 'scrolling'),
-      useKeyOnly(upward, 'upward'),
-
-      useKeyOrValueAndKey(pointing, 'pointing'),
+      // getKeyOnly(icon, 'icon'),
+      getKeyOnly(labeled, 'labeled'),
+      getKeyOnly(item, 'item'),
+      getKeyOnly(multiple, 'multiple'),
+      getKeyOnly(search, 'search'),
+      getKeyOnly(selection, 'selection'),
+      getKeyOnly(simple, 'simple'),
+      getKeyOnly(scrolling, 'scrolling'),
+      getKeyOnly(upward, 'upward'),
+
+      getKeyOrValueAndKey(pointing, 'pointing'),
       'dropdown',
       className,
     )

src/modules/Dropdown/DropdownItem.js

@@ -10,7 +10,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 import Flag from '../../elements/Flag'
 import Icon from '../../elements/Icon'
@@ -41,9 +41,9 @@ const DropdownItem = React.forwardRef(function (props, ref) {
   }
 
   const classes = cx(
-    useKeyOnly(active, 'active'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(selected, 'selected'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(selected, 'selected'),
     'item',
     className,
   )

src/modules/Dropdown/DropdownMenu.js

@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -18,8 +18,8 @@ const DropdownMenu = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     direction,
-    useKeyOnly(open, 'visible'),
-    useKeyOnly(scrolling, 'scrolling'),
+    getKeyOnly(open, 'visible'),
+    getKeyOnly(scrolling, 'scrolling'),
     'menu transition',
     className,
   )

src/modules/Embed/Embed.js

@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
   useAutoControlledValue,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -107,7 +107,7 @@ const Embed = React.forwardRef(function (props, ref) {
     )
   }
 
-  const classes = cx('ui', aspectRatio, useKeyOnly(active, 'active'), 'embed', className)
+  const classes = cx('ui', aspectRatio, getKeyOnly(active, 'active'), 'embed', className)
   const rest = getUnhandledProps(Embed, props)
   const ElementType = getComponentType(props)
 

src/modules/Modal/Modal.js

@@ -13,7 +13,7 @@ import {
   getUnhandledProps,
   isBrowser,
   makeDebugger,
-  useKeyOnly,
+  getKeyOnly,
   useAutoControlledValue,
   useMergedRefs,
 } from '../../lib'
@@ -179,9 +179,9 @@ const Modal = React.forwardRef(function (props, ref) {
     const classes = cx(
       'ui',
       size,
-      useKeyOnly(basic, 'basic'),
-      useKeyOnly(legacy, 'legacy'),
-      useKeyOnly(scrolling, 'scrolling'),
+      getKeyOnly(basic, 'basic'),
+      getKeyOnly(legacy, 'legacy'),
+      getKeyOnly(scrolling, 'scrolling'),
       'modal transition visible active',
       className,
     )

src/modules/Modal/ModalContent.js

@@ -8,7 +8,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -19,8 +19,8 @@ const ModalContent = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     className,
-    useKeyOnly(image, 'image'),
-    useKeyOnly(scrolling, 'scrolling'),
+    getKeyOnly(image, 'image'),
+    getKeyOnly(scrolling, 'scrolling'),
     'content',
   )
   const rest = getUnhandledProps(ModalContent, props)

src/modules/Modal/ModalDimmer.js

@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   useClassNamesOnNode,
-  useKeyOnly,
+  getKeyOnly,
   useMergedRefs,
 } from '../../lib'
 
@@ -22,15 +22,15 @@ const ModalDimmer = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(!centered, 'top aligned'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(!centered, 'top aligned'),
     'page modals dimmer transition visible active',
     className,
   )
   const bodyClasses = cx(
     'dimmable dimmed',
-    useKeyOnly(blurring, 'blurring'),
-    useKeyOnly(scrolling, 'scrolling'),
+    getKeyOnly(blurring, 'blurring'),
+    getKeyOnly(scrolling, 'scrolling'),
   )
 
   const rest = getUnhandledProps(ModalDimmer, props)

src/modules/Popup/Popup.js

@@ -14,8 +14,8 @@ import {
   makeDebugger,
   SUI,
   useIsomorphicLayoutEffect,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
   useMergedRefs,
   usePrevious,
 } from '../../lib'
@@ -193,10 +193,10 @@ const Popup = React.forwardRef(function (props, ref) {
       'ui',
       placementMapping[popperPlacement],
       size,
-      useKeyOrValueAndKey(wide, 'wide'),
-      useKeyOnly(basic, 'basic'),
-      useKeyOnly(flowing, 'flowing'),
-      useKeyOnly(inverted, 'inverted'),
+      getKeyOrValueAndKey(wide, 'wide'),
+      getKeyOnly(basic, 'basic'),
+      getKeyOnly(flowing, 'flowing'),
+      getKeyOnly(inverted, 'inverted'),
       'popup transition visible',
       className,
     )