🏷️ [#445] Replace classnames with clsx library

The latter is typescript compatible.

package.json

@@ -35,7 +35,7 @@
     "@open-formulieren/formiojs": "^4.13.14",
     "@open-formulieren/leaflet-tools": "^1.0.0",
     "@sentry/react": "^8.50.0",
-    "classnames": "^2.3.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "flatpickr": "^4.6.9",
     "formik": "^2.2.9",

src/components/Anchor/Anchor.jsx

@@ -1,5 +1,5 @@
 import {Link as UtrechtLink} from '@utrecht/component-library-react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
 export const ANCHOR_MODIFIERS = [
@@ -18,7 +18,7 @@ const Anchor = ({
   ...extraProps
 }) => {
   // extend with our own modifiers
-  const className = classNames(
+  const className = clsx(
     'utrecht-link--openforms', // always apply our own modifier
     {
       'utrecht-link--current': modifiers.includes('current'),

src/components/AppDisplay.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export interface AppDisplayProps {
   /**
@@ -41,7 +41,7 @@ export const AppDisplay: React.FC<AppDisplayProps> = ({
   router,
 }) => (
   <div
-    className={classNames('openforms-app', {
+    className={clsx('openforms-app', {
       'openforms-app--no-progress-indicator': !progressIndicator,
       'openforms-app--no-language-switcher': !languageSwitcher,
     })}

src/components/FAIcon.jsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
 // not all icons need to be seen by assistive technologies.
@@ -10,7 +10,7 @@ const FAIcon = ({
   noAriaHidden = false,
   ...props
 }) => {
-  const className = classNames(
+  const className = clsx(
     'fa',
     'fas',
     'fa-icon',

src/components/PreviousLink.jsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
 import FAIcon from 'components/FAIcon';
@@ -8,7 +8,7 @@ import {Literal} from 'components/Literal';
 const VARIANTS = ['start', 'end'];
 
 const PreviousLink = ({to, onClick, position}) => {
-  const className = classNames('openforms-previous-link', {
+  const className = clsx('openforms-previous-link', {
     [`openforms-previous-link--${position}`]: position,
   });
   return (

src/components/forms/SelectField/SelectField.jsx

@@ -1,6 +1,6 @@
 import {HelpText, Label, ValidationErrors} from '@open-formulieren/formio-renderer';
 import {FormField} from '@utrecht/component-library-react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import {Field, useFormikContext} from 'formik';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
@@ -86,7 +86,7 @@ const SelectField = ({
         inputId={id}
         classNames={{
           control: state =>
-            classNames('utrecht-select', 'utrecht-select--openforms', {
+            clsx('utrecht-select', 'utrecht-select--openforms', {
               'utrecht-select--focus': state.isFocused,
               'utrecht-select--focus-visible': state.isFocused,
               'utrecht-select--disabled': disabled,
@@ -95,7 +95,7 @@ const SelectField = ({
             }),
           menu: () => 'rs-menu',
           option: state =>
-            classNames('rs-menu__option', {
+            clsx('rs-menu__option', {
               'rs-menu__option--focus': state.isFocused,
               'rs-menu__option--visible-focus': state.isFocused,
             }),

src/formio/components/Component.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import {Formio} from 'react-formio';
 
 import {applyPrefix} from 'utils';
@@ -19,7 +19,7 @@ const FormioComponent = Formio.Components.components.component;
  * @todo: check impact of --hidden modifier
  */
 function getClassName() {
-  return classNames(
+  return clsx(
     applyPrefix('form-control'),
     applyPrefix(`form-control--${this.component.type}`),
     {[applyPrefix(`form-control--${this.key}`)]: this.key},

src/utils.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import {getEnv} from './env';
 
@@ -28,7 +28,7 @@ export const applyPrefix = name => {
 export const getBEMClassName = (base, modifiers = []) => {
   const prefixedBase = applyPrefix(base);
   const prefixedModifiers = modifiers.map(mod => applyPrefix(`${base}--${mod}`));
-  return classNames(prefixedBase, ...prefixedModifiers);
+  return clsx(prefixedBase, ...prefixedModifiers);
 };
 
 // usage: await sleep(3000);