chore: rename classNameBuilder functions in "elements"

src/elements/Button/Button.js

@@ -10,9 +10,9 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
   useMergedRefs,
 } from '../../lib'
 import Icon from '../Icon/Icon'
@@ -103,24 +103,24 @@ const Button = React.forwardRef(function (props, ref) {
   const baseClasses = cx(
     color,
     size,
-    useKeyOnly(active, 'active'),
-    useKeyOnly(basic, 'basic'),
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(hasIconClass(props), 'icon'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(loading, 'loading'),
-    useKeyOnly(negative, 'negative'),
-    useKeyOnly(positive, 'positive'),
-    useKeyOnly(primary, 'primary'),
-    useKeyOnly(secondary, 'secondary'),
-    useKeyOnly(toggle, 'toggle'),
-    useKeyOrValueAndKey(animated, 'animated'),
-    useKeyOrValueAndKey(attached, 'attached'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(basic, 'basic'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(hasIconClass(props), 'icon'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(loading, 'loading'),
+    getKeyOnly(negative, 'negative'),
+    getKeyOnly(positive, 'positive'),
+    getKeyOnly(primary, 'primary'),
+    getKeyOnly(secondary, 'secondary'),
+    getKeyOnly(toggle, 'toggle'),
+    getKeyOrValueAndKey(animated, 'animated'),
+    getKeyOrValueAndKey(attached, 'attached'),
   )
-  const labeledClasses = cx(useKeyOrValueAndKey(labelPosition || !!label, 'labeled'))
-  const wrapperClasses = cx(useKeyOnly(disabled, 'disabled'), useValueAndKey(floated, 'floated'))
+  const labeledClasses = cx(getKeyOrValueAndKey(labelPosition || !!label, 'labeled'))
+  const wrapperClasses = cx(getKeyOnly(disabled, 'disabled'), getValueAndKey(floated, 'floated'))
 
   const rest = getUnhandledProps(Button, props)
   const ElementType = getComponentType(props, {

src/elements/Button/ButtonContent.js

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

src/elements/Button/ButtonGroup.js

@@ -9,10 +9,10 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
-  useWidthProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
+  getWidthProp,
 } from '../../lib'
 import Button from './Button'
 
@@ -48,21 +48,21 @@ const ButtonGroup = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(basic, 'basic'),
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(icon, 'icon'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(labeled, 'labeled'),
-    useKeyOnly(negative, 'negative'),
-    useKeyOnly(positive, 'positive'),
-    useKeyOnly(primary, 'primary'),
-    useKeyOnly(secondary, 'secondary'),
-    useKeyOnly(toggle, 'toggle'),
-    useKeyOnly(vertical, 'vertical'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useValueAndKey(floated, 'floated'),
-    useWidthProp(widths),
+    getKeyOnly(basic, 'basic'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(icon, 'icon'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(labeled, 'labeled'),
+    getKeyOnly(negative, 'negative'),
+    getKeyOnly(positive, 'positive'),
+    getKeyOnly(primary, 'primary'),
+    getKeyOnly(secondary, 'secondary'),
+    getKeyOnly(toggle, 'toggle'),
+    getKeyOnly(vertical, 'vertical'),
+    getKeyOrValueAndKey(attached, 'attached'),
+    getValueAndKey(floated, 'floated'),
+    getWidthProp(widths),
     'buttons',
     className,
   )

src/elements/Container/Container.js

@@ -8,8 +8,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useTextAlignProp,
+  getKeyOnly,
+  getTextAlignProp,
 } from '../../lib'
 
 /**
@@ -19,9 +19,9 @@ const Container = React.forwardRef(function (props, ref) {
   const { children, className, content, fluid, text, textAlign } = props
   const classes = cx(
     'ui',
-    useKeyOnly(text, 'text'),
-    useKeyOnly(fluid, 'fluid'),
-    useTextAlignProp(textAlign),
+    getKeyOnly(text, 'text'),
+    getKeyOnly(fluid, 'fluid'),
+    getTextAlignProp(textAlign),
     'container',
     className,
   )

src/elements/Divider/Divider.js

@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -29,13 +29,13 @@ const Divider = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(clearing, 'clearing'),
-    useKeyOnly(fitted, 'fitted'),
-    useKeyOnly(hidden, 'hidden'),
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(section, 'section'),
-    useKeyOnly(vertical, 'vertical'),
+    getKeyOnly(clearing, 'clearing'),
+    getKeyOnly(fitted, 'fitted'),
+    getKeyOnly(hidden, 'hidden'),
+    getKeyOnly(horizontal, 'horizontal'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(section, 'section'),
+    getKeyOnly(vertical, 'vertical'),
     'divider',
     className,
   )

src/elements/Header/Header.js

@@ -9,10 +9,10 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useValueAndKey,
-  useTextAlignProp,
-  useKeyOrValueAndKey,
-  useKeyOnly,
+  getValueAndKey,
+  getTextAlignProp,
+  getKeyOrValueAndKey,
+  getKeyOnly,
 } from '../../lib'
 import Icon from '../Icon'
 import Image from '../Image'
@@ -47,16 +47,16 @@ const Header = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(block, 'block'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(dividing, 'dividing'),
-    useValueAndKey(floated, 'floated'),
-    useKeyOnly(icon === true, 'icon'),
-    useKeyOnly(image === true, 'image'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(sub, 'sub'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useTextAlignProp(textAlign),
+    getKeyOnly(block, 'block'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(dividing, 'dividing'),
+    getValueAndKey(floated, 'floated'),
+    getKeyOnly(icon === true, 'icon'),
+    getKeyOnly(image === true, 'image'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(sub, 'sub'),
+    getKeyOrValueAndKey(attached, 'attached'),
+    getTextAlignProp(textAlign),
     'header',
     className,
   )

src/elements/Icon/Icon.js

@@ -10,9 +10,9 @@ import {
   getUnhandledProps,
   SUI,
   useEventCallback,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
 } from '../../lib'
 import IconGroup from './IconGroup'
 
@@ -59,16 +59,16 @@ const Icon = React.forwardRef(function (props, ref) {
     color,
     name,
     size,
-    useKeyOnly(bordered, 'bordered'),
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(fitted, 'fitted'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(link, 'link'),
-    useKeyOnly(loading, 'loading'),
-    useKeyOrValueAndKey(corner, 'corner'),
-    useValueAndKey(flipped, 'flipped'),
-    useValueAndKey(rotated, 'rotated'),
+    getKeyOnly(bordered, 'bordered'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(fitted, 'fitted'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(link, 'link'),
+    getKeyOnly(loading, 'loading'),
+    getKeyOrValueAndKey(corner, 'corner'),
+    getValueAndKey(flipped, 'flipped'),
+    getValueAndKey(rotated, 'rotated'),
     'icon',
     className,
   )

src/elements/Image/Image.js

@@ -12,10 +12,10 @@ import {
   htmlImageProps,
   partitionHTMLProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
-  useVerticalAlignProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
+  getVerticalAlignProp,
 } from '../../lib'
 import Dimmer from '../../modules/Dimmer'
 import Label from '../Label/Label'
@@ -51,20 +51,20 @@ const Image = React.forwardRef(function (props, ref) {
   } = props
 
   const classes = cx(
-    useKeyOnly(ui, 'ui'),
+    getKeyOnly(ui, 'ui'),
     size,
-    useKeyOnly(avatar, 'avatar'),
-    useKeyOnly(bordered, 'bordered'),
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(hidden, 'hidden'),
-    useKeyOnly(inline, 'inline'),
-    useKeyOnly(rounded, 'rounded'),
-    useKeyOrValueAndKey(spaced, 'spaced'),
-    useValueAndKey(floated, 'floated'),
-    useVerticalAlignProp(verticalAlign, 'aligned'),
+    getKeyOnly(avatar, 'avatar'),
+    getKeyOnly(bordered, 'bordered'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(hidden, 'hidden'),
+    getKeyOnly(inline, 'inline'),
+    getKeyOnly(rounded, 'rounded'),
+    getKeyOrValueAndKey(spaced, 'spaced'),
+    getValueAndKey(floated, 'floated'),
+    getVerticalAlignProp(verticalAlign, 'aligned'),
     'image',
     className,
   )

src/elements/Input/Input.js

@@ -11,8 +11,8 @@ import {
   getComponentType,
   getUnhandledProps,
   partitionHTMLProps,
-  useKeyOnly,
-  useValueAndKey,
+  getKeyOnly,
+  getValueAndKey,
   setRef,
 } from '../../lib'
 import Button from '../Button'
@@ -95,16 +95,16 @@ const Input = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(focus, 'focus'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(loading, 'loading'),
-    useKeyOnly(transparent, 'transparent'),
-    useValueAndKey(actionPosition, 'action') || useKeyOnly(action, 'action'),
-    useValueAndKey(iconPosition, 'icon') || useKeyOnly(icon || loading, 'icon'),
-    useValueAndKey(labelPosition, 'labeled') || useKeyOnly(label, 'labeled'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(focus, 'focus'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(loading, 'loading'),
+    getKeyOnly(transparent, 'transparent'),
+    getValueAndKey(actionPosition, 'action') || getKeyOnly(action, 'action'),
+    getValueAndKey(iconPosition, 'icon') || getKeyOnly(icon || loading, 'icon'),
+    getValueAndKey(labelPosition, 'labeled') || getKeyOnly(label, 'labeled'),
     'input',
     className,
   )

src/elements/Label/Label.js

@@ -10,9 +10,9 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
   useEventCallback,
 } from '../../lib'
 import Icon from '../Icon/Icon'
@@ -59,18 +59,18 @@ const Label = React.forwardRef(function (props, ref) {
     color,
     pointingClass,
     size,
-    useKeyOnly(active, 'active'),
-    useKeyOnly(basic, 'basic'),
-    useKeyOnly(circular, 'circular'),
-    useKeyOnly(empty, 'empty'),
-    useKeyOnly(floating, 'floating'),
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(image === true, 'image'),
-    useKeyOnly(prompt, 'prompt'),
-    useKeyOnly(tag, 'tag'),
-    useKeyOrValueAndKey(corner, 'corner'),
-    useKeyOrValueAndKey(ribbon, 'ribbon'),
-    useValueAndKey(attached, 'attached'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(basic, 'basic'),
+    getKeyOnly(circular, 'circular'),
+    getKeyOnly(empty, 'empty'),
+    getKeyOnly(floating, 'floating'),
+    getKeyOnly(horizontal, 'horizontal'),
+    getKeyOnly(image === true, 'image'),
+    getKeyOnly(prompt, 'prompt'),
+    getKeyOnly(tag, 'tag'),
+    getKeyOrValueAndKey(corner, 'corner'),
+    getKeyOrValueAndKey(ribbon, 'ribbon'),
+    getValueAndKey(attached, 'attached'),
     'label',
     className,
   )