@eeacms/volto-eea-design-system 1.50.0 → 1.50.2

package/.eslintrc.js

@@ -19,16 +19,16 @@ if (configFile) {
     voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
 }
 
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(projectRootPath);
+const { AddonRegistry } = require('@plone/registry/addon-registry');
+const { registry } = AddonRegistry.init(projectRootPath);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
+const addonAliases = Object.keys(registry.packages).map((o) => [
   o,
-  reg.packages[o].modulePath,
+  registry.packages[o].modulePath,
 ]);
 
-const addonExtenders = reg.getEslintExtenders().map((m) => require(m));
+const addonExtenders = registry.getEslintExtenders().map((m) => require(m));
 
 const defaultConfig = {
   extends: `${voltoPath}/.eslintrc`,
@@ -37,7 +37,7 @@ const defaultConfig = {
       alias: {
         map: [
           ['@plone/volto', '@plone/volto/src'],
-          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
+          ['@plone/volto-slate', '@plone/volto-slate/src'],
           ...addonAliases,
           ['@package', `${__dirname}/src`],
           ['@root', `${__dirname}/src`],
@@ -51,6 +51,7 @@ const defaultConfig = {
     },
   },
   rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'react/jsx-no-target-blank': 'off',
   },
 };

package/CHANGELOG.md

@@ -4,6 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.50.2](https://github.com/eea/volto-eea-design-system/compare/1.50.1...1.50.2) - 9 April 2026
+
+#### :bug: Bug Fixes
+
+- fix: Docusaurus build [Alin Voinea - [`0339369`](https://github.com/eea/volto-eea-design-system/commit/0339369cda49e3772b164eff3345523f7cba551e)]
+- fix: warnings [Alin Voinea - [`a1e035d`](https://github.com/eea/volto-eea-design-system/commit/a1e035d47b822d755414cf436aa052e85066e197)]
+
+### [1.50.1](https://github.com/eea/volto-eea-design-system/compare/1.50.0...1.50.1) - 7 April 2026
+
+#### :bug: Bug Fixes
+
+- fix: megamenu breaking columns - refs #302209 [Teodor Voicu - [`5dd05ba`](https://github.com/eea/volto-eea-design-system/commit/5dd05ba4925e96c37ed0801df5376185c821d0ed)]
+- fix: make test [Alin V. (Claudiu) - [`98dc41b`](https://github.com/eea/volto-eea-design-system/commit/98dc41b32de9bab9680105e4549e7b68c2116072)]
+
+#### :house: Internal changes
+
+- chore: Volto 18 eslint update - refs #301881 [Teodor Voicu - [`0446edb`](https://github.com/eea/volto-eea-design-system/commit/0446edbb5552608f7658f61fbe4a5d58f71b62b4)]
+
 ### [1.50.0](https://github.com/eea/volto-eea-design-system/compare/1.40.3...1.50.0) - 25 March 2026
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.50.0",
+  "version": "1.50.2",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.stories.jsx

@@ -5,7 +5,7 @@ import Banner from './Banner';
 import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/banner.png';
 import { Icon, Container } from 'semantic-ui-react';
 import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
-import Copyright from '../Copyright/Copyright';
+import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
 
 export default {
   title: 'Components/Page Header',

package/src/ui/Card/Card.stories.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Card, Image, Grid, Container, Icon, Button } from 'semantic-ui-react';
 import Slider from 'react-slick';
-import TagList from '../TagList/TagList';
-import Tag from '../Tag/Tag';
+import TagList from '@eeacms/volto-eea-design-system/ui/TagList/TagList';
+import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
 
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';

package/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from 'semantic-ui-react';
 import DownloadLabeledIcon from './DownloadLabeledIcon';
-import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup';
+import LabeledIconGroup from '@eeacms/volto-eea-design-system/ui/LabeledIconGroup/LabeledIconGroup';
 
 export default {
   title: 'Components/Labeled Icons/Download',

package/src/ui/DraftContent/DraftContent.stories.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Default as HeaderDefault, HeaderArgs } from '../Header/Header.stories';
+import {
+  Default as HeaderDefault,
+  HeaderArgs,
+} from '@eeacms/volto-eea-design-system/ui/Header/Header.stories';
 import './draft.css';
 
 export default {

package/src/ui/Footer/FooterActions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Grid } from 'semantic-ui-react';
-import { isInternalURL } from '@plone/volto/helpers';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
 const FooterActions = (props) => {
   if (props.children) {

package/src/ui/Footer/FooterSitesButton.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { UniversalLink } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 
 const SitesButton = (props) => {
   if (props.children) {

package/src/ui/Footer/SubFooter.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Footer from './Footer';
+import Contact from './Contact';
 
 import { Grid, Image } from 'semantic-ui-react';
 
@@ -39,7 +39,7 @@ const SubFooter = (props) => {
         {props.contacts?.length > 0 && (
           <Grid.Column mobile={12} tablet={12} computer={4}>
             <div className="item">
-              <Footer.Contact contacts={props.contacts} />
+              <Contact contacts={props.contacts} />
             </div>
           </Grid.Column>
         )}

package/src/ui/Form/Dropdown.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Dropdown, Form, Container } from 'semantic-ui-react';
-import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
+import FormFieldWrapper from '@eeacms/volto-eea-design-system/ui/FormFieldWrapper/FormFieldWrapper';
 
 export default {
   title: 'Components/Forms/Dropdown',

package/src/ui/Form/Input.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Input, Form, Container } from 'semantic-ui-react';
-import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
+import FormFieldWrapper from '@eeacms/volto-eea-design-system/ui/FormFieldWrapper/FormFieldWrapper';
 
 export default {
   title: 'Components/Forms/Input',

package/src/ui/Form/Textarea.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextArea, Form, Container } from 'semantic-ui-react';
-import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
+import FormFieldWrapper from '@eeacms/volto-eea-design-system/ui/FormFieldWrapper/FormFieldWrapper';
 
 export default {
   title: 'Components/Forms/Text Area',

package/src/ui/Grid/ComponentGrid.stories.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import times from 'lodash/times';
 import React from 'react';
 import { Grid, Container } from 'semantic-ui-react';
 
@@ -9,7 +9,7 @@ export default {
 };
 
 const getColumns = (number, text) => {
-  const columns = _.times(number, (i) => (
+  const columns = times(number, (i) => (
     <Grid.Column key={i}>
       <div className="col-example">{text}</div>
     </Grid.Column>

package/src/ui/Header/Header.jsx

@@ -16,8 +16,8 @@ import HeaderSearchPopUp from './HeaderSearchPopUp';
 import HeaderMenuPopUp from './HeaderMenuPopUp';
 import { findBestMatchingMenuItem, isMenuItemActive } from './utils';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
-import { isInternalURL } from '@plone/volto/helpers';
+import omit from 'lodash/omit';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 Header.propTypes = {
@@ -390,7 +390,7 @@ const BurgerAction = React.forwardRef((props, ref) => (
   <button
     ref={ref}
     className={`burger-action ${props.className}`}
-    {..._.omit(props, ['onClick', 'children', 'className', 'ref'])}
+    {...omit(props, ['onClick', 'children', 'className', 'ref'])}
     onClick={props.onClick}
   >
     {props.children}

package/src/ui/Header/HeaderMenuPopUp.js

@@ -8,10 +8,11 @@ import {
   Transition,
 } from 'semantic-ui-react';
 
-import { cloneDeep, kebabCase } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import kebabCase from 'lodash/kebabCase';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
-import { numbersToMenuItemColumns } from '../Header/utils';
+import { numbersToMenuItemColumns } from '@eeacms/volto-eea-design-system/ui/Header/utils';
 
 const generateCssClassFromUrl = (url) => {
   if (!url) return '';

package/src/ui/Hero/Hero.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Icon } from 'semantic-ui-react';
-import Copyright from '../Copyright/Copyright';
+import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
 
 Hero.propTypes = {
   image: PropTypes.bool,

package/src/ui/InpageNavigation/InpageNavigation.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Container, Button, Icon } from 'semantic-ui-react';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 
 class InpageNavigation extends Component {
   constructor(props) {

package/src/ui/LabeledIconGroup/LabeledIconGroup.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button } from 'semantic-ui-react';
-import NewTabLabeledIcon from '../NewTabLabeledIcon/NewTabLabeledIcon';
-import DownloadLabeledIcon from '../DownloadLabeledIcon/DownloadLabeledIcon';
-import LanguageLabeledIcon from '../LanguageLabeledIcon/LanguageLabeledIcon';
+import NewTabLabeledIcon from '@eeacms/volto-eea-design-system/ui/NewTabLabeledIcon/NewTabLabeledIcon';
+import DownloadLabeledIcon from '@eeacms/volto-eea-design-system/ui/DownloadLabeledIcon/DownloadLabeledIcon';
+import LanguageLabeledIcon from '@eeacms/volto-eea-design-system/ui/LanguageLabeledIcon/LanguageLabeledIcon';
 
 function LabeledIconGroup({ children, ...rest }) {
   return (

package/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from 'semantic-ui-react';
 import LanguageLabeledIcon from './LanguageLabeledIcon';
-import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup';
+import LabeledIconGroup from '@eeacms/volto-eea-design-system/ui/LabeledIconGroup/LabeledIconGroup';
 
 export default {
   title: 'Components/Labeled Icons/Language',

package/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import NewTabLabeledIcon from './NewTabLabeledIcon';
-import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup';
+import LabeledIconGroup from '@eeacms/volto-eea-design-system/ui/LabeledIconGroup/LabeledIconGroup';
 
 export default {
   title: 'Components/Labeled Icons/New Tab',

package/src/ui/Quote/Testimonial/Testimonial.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Quote from '../Quote';
+import Quote from '@eeacms/volto-eea-design-system/ui/Quote/Quote';
 import { Grid, Card, Image, Divider } from 'semantic-ui-react';
 
 Testimonial.propTypes = {

package/src/ui/Statistic/Statistic.stories.js

@@ -227,8 +227,12 @@ const CustomTemplate = (args) => (
     <Container>
       <Statistic.Group {...args}>
         {args.elements &&
-          args.elements.map((element) => (
-            <a href={element.href} className="ui small statistic">
+          args.elements.map((element, index) => (
+            <a
+              key={element.href ?? `${element.label}-${index}`}
+              href={element.href}
+              className="ui small statistic"
+            >
               <div className={`value ${args.valueVariation}`}>
                 {element.value}
               </div>
@@ -429,8 +433,12 @@ const CountUpStatistics = (args) => (
     <Container>
       <Statistic.Group id="counter" {...args}>
         {args.elements &&
-          args.elements.map((element) => (
-            <a href={element.href} className="ui small statistic">
+          args.elements.map((element, index) => (
+            <a
+              key={element.href ?? `${element.label}-${index}`}
+              href={element.href}
+              className="ui small statistic"
+            >
               <div className={`value ${args.valueVariation}`}>
                 <CountUp end={element.value} isCounting={true} />
               </div>

package/src/ui/Table/Table.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table, Container } from 'semantic-ui-react';
-import _ from 'lodash';
+import sortBy from 'lodash/sortBy';
 
 export default {
   title: 'Components/Table',
@@ -224,7 +224,7 @@ function reducer(state, action) {
 
       return {
         column: action.column,
-        data: _.sortBy(state.data, [action.column]),
+        data: sortBy(state.data, [action.column]),
         direction: 'ascending',
       };
     default:

package/src/ui/Tag/Tag.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
-import { ConditionalLink } from '@plone/volto/components';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import { getFieldURL } from '@plone/volto/helpers/Url/Url';
 
 function Tag({ href, children }) {

package/src/ui/TagList/TagList.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import TagList from './TagList';
-import Tag from '../Tag/Tag';
+import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
 import { Container } from 'semantic-ui-react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';

package/src/ui/UnderlinedTitle/UnderlinedTitle.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Header, Divider, Container } from 'semantic-ui-react';
-import ContentBox from '../ContentBox/ContentBox';
+import ContentBox from '@eeacms/volto-eea-design-system/ui/ContentBox/ContentBox';
 
 export default {
   title: 'Components/Heading/Underlined',

package/src/ui/Video/Video.jsx

@@ -38,7 +38,7 @@ Video.Embed = ({
 
 Video.Track = ({ tracks }) =>
   tracks.map((track, index) => {
-    return <track {...track} />;
+    return <track key={track.src ?? track.srcLang ?? index} {...track} />;
   });
 
 export default Video;

package/theme/themes/eea/collections/menu.overrides

@@ -230,7 +230,7 @@
 .ui.pagination.pointing.secondary, .ui.pagination {
   display: flex;
   width: @paginationWidth;
-  justify-content: start;
+  justify-content: flex-start;
 
   @media only screen and (min-width: @tabletBreakpoint) {
     justify-content: center;

package/theme/themes/eea/extras/copyright.variables

@@ -12,7 +12,7 @@
 @copyrightWrapperPaddingLeft: @rem-space-3;
 @copyrightWrapperPaddingRight: @rem-space-3;
 @copyrightWrapperBottom: @rem-space-4;
-@copyrightAlignItems: start;
+@copyrightAlignItems: flex-start;
 
 /* Image block */
 @floatImageLeftMaxWidth: 50%;

package/theme/themes/eea/extras/header.less

@@ -664,7 +664,7 @@
         display: flex;
         max-height: 100%;
         flex-wrap: wrap;
-        justify-content: end;
+        justify-content: flex-end;
         margin: 0;
         padding-left: 0;
 
@@ -771,6 +771,7 @@
   padding: @megaMenuListItemPadding;
   font-size: @megaMenuListItemFontSize;
   font-weight: @megaMenuListItemFontWeight;
+  break-inside: avoid;
 }
 
 #mega-menu a.item {