diff --git a/package-lock.json b/package-lock.json index 8aa0aa630..d03efac1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,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", @@ -3773,14 +3773,6 @@ "react-intl": "^6.6.2 || ^7.0.0" } }, - "node_modules/@open-formulieren/formio-renderer/node_modules/clsx": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", - "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", - "engines": { - "node": ">=6" - } - }, "node_modules/@open-formulieren/formiojs": { "version": "4.13.14", "resolved": "https://registry.npmjs.org/@open-formulieren/formiojs/-/formiojs-4.13.14.tgz", @@ -6318,6 +6310,14 @@ "react-dom": "18" } }, + "node_modules/@utrecht/component-library-react/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/@utrecht/component-library-react/node_modules/date-fns": { "version": "2.30.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", @@ -6342,15 +6342,6 @@ "clsx": "2.1.1" } }, - "node_modules/@utrecht/components/node_modules/clsx": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", - "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", - "dev": true, - "engines": { - "node": ">=6" - } - }, "node_modules/@utrecht/design-tokens": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/@utrecht/design-tokens/-/design-tokens-2.5.0.tgz", @@ -8077,11 +8068,6 @@ "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==", "dev": true }, - "node_modules/classnames": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" - }, "node_modules/clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -8147,9 +8133,9 @@ } }, "node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", "engines": { "node": ">=6" } @@ -8703,6 +8689,15 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/design-token-editor/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", diff --git a/package.json b/package.json index 356f68cac..3208861d6 100644 --- a/package.json +++ b/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", diff --git a/src/components/Anchor/Anchor.jsx b/src/components/Anchor/Anchor.jsx index 50b48005b..0f0446180 100644 --- a/src/components/Anchor/Anchor.jsx +++ b/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'), diff --git a/src/components/AppDisplay.tsx b/src/components/AppDisplay.tsx index 6b258f18a..c14a13378 100644 --- a/src/components/AppDisplay.tsx +++ b/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 = ({ router, }) => (
{ - const className = classNames( + const className = clsx( 'fa', 'fas', 'fa-icon', diff --git a/src/components/PreviousLink.jsx b/src/components/PreviousLink.jsx index 48f4b56e4..b4b36b2a2 100644 --- a/src/components/PreviousLink.jsx +++ b/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 ( diff --git a/src/components/forms/SelectField/SelectField.jsx b/src/components/forms/SelectField/SelectField.jsx index a050b376a..7c924b3d1 100644 --- a/src/components/forms/SelectField/SelectField.jsx +++ b/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, }), diff --git a/src/formio/components/Component.js b/src/formio/components/Component.js index 1a3d10dd5..4dabf5eb6 100644 --- a/src/formio/components/Component.js +++ b/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}, diff --git a/src/utils.js b/src/utils.js index ce6bae936..8d70f8440 100644 --- a/src/utils.js +++ b/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);