@plone/volto 19.0.0-alpha.29 → 19.0.0-alpha.30

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.29",
+  "version": "19.0.0-alpha.30",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -90,8 +90,8 @@
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.2",
-    "@loadable/component": "5.14.1",
-    "@loadable/server": "5.14.0",
+    "@loadable/component": "5.16.7",
+    "@loadable/server": "5.16.7",
     "@redux-devtools/extension": "^3.3.0",
     "classnames": "2.5.1",
     "connected-react-router": "6.8.0",
@@ -115,14 +115,14 @@
     "jwt-decode": "2.2.0",
     "linkify-it": "3.0.2",
     "locale": "0.1.0",
-    "lodash": "4.17.23",
+    "lodash": "4.18.1",
     "lodash-move": "1.1.1",
     "moment": "2.29.4",
     "object-assign": "4.1.1",
     "prepend-http": "2",
     "prettier": "3.2.5",
     "pretty-bytes": "5.3.0",
-    "prismjs": "1.27.0",
+    "prismjs": "1.30.0",
     "process": "^0.11.10",
     "promise-file-reader": "1.0.2",
     "prop-types": "15.7.2",
@@ -180,11 +180,11 @@
     "universal-cookie-express": "4.0.3",
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
-    "uuid": "^8.3.2",
-    "@plone/registry": "3.0.0-alpha.10",
-    "@plone/components": "4.0.0-alpha.6",
-    "@plone/volto-slate": "19.0.0-alpha.14",
-    "@plone/scripts": "4.0.0-alpha.6"
+    "uuid": "^14.0.0",
+    "@plone/registry": "3.0.0-alpha.11",
+    "@plone/scripts": "4.0.0-alpha.6",
+    "@plone/volto-slate": "19.0.0-alpha.15",
+    "@plone/components": "4.0.0-alpha.7"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -194,7 +194,7 @@
     "@babel/runtime": "^7.28.4",
     "@babel/types": "7.20.5",
     "@fiverr/afterbuild-webpack-plugin": "^1.0.0",
-    "@loadable/babel-plugin": "5.13.2",
+    "@loadable/babel-plugin": "5.16.1",
     "@loadable/webpack-plugin": "5.15.2",
     "@sinonjs/fake-timers": "^6.0.1",
     "@storybook/addon-actions": "^8.0.4",
@@ -208,11 +208,11 @@
     "@storybook/test": "^8.0.4",
     "@storybook/theming": "^8.0.4",
     "@testing-library/cypress": "10.1.0",
-    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "14.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/history": "^4.7.11",
-    "@types/loadable__component": "^5.13.9",
+    "@types/loadable__component": "^5.13.10",
     "@types/lodash": "^4.14.201",
     "@types/node": "^24",
     "@types/react": "^18",
@@ -221,7 +221,6 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "18.0.7",
     "@types/redux-mock-store": "^1.5.0",
-    "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-react": "^4.3.4",
@@ -249,7 +248,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "html-webpack-plugin": "5.5.0",
+    "html-webpack-plugin": "5.6.7",
     "identity-obj-proxy": "3.0.0",
     "jiti": "^2.4.2",
     "jsdom": "^28.1.0",
@@ -257,19 +256,18 @@
     "less": "3.13.1",
     "less-loader": "11.1.0",
     "lodash-webpack-plugin": "0.11.6",
-    "mini-css-extract-plugin": "2.7.2",
+    "mini-css-extract-plugin": "2.10.2",
     "moment-locales-webpack-plugin": "1.2.0",
-    "postcss": "8.4.31",
+    "postcss": "^8.5.10",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-less": "6.0.0",
-    "postcss-load-config": "3.1.4",
-    "postcss-loader": "7.0.2",
-    "postcss-overrides": "3.1.4",
-    "postcss-scss": "4.0.6",
-    "react-docgen-typescript-plugin": "^1.0.5",
+    "postcss-load-config": "^6.0.1",
+    "postcss-loader": "^8.2.1",
+    "postcss-scss": "4.0.9",
+    "react-docgen-typescript-plugin": "^1.0.8",
     "react-error-overlay": "6.0.9",
     "react-is": "^18.2.0",
-    "release-it": "^19.2.4",
+    "release-it": "^20.0.1",
     "resolve-url-loader": "^5.0.0",
     "sass": "1.58.0",
     "sass-loader": "^10.0.3",
@@ -283,7 +281,7 @@
     "svg-loader": "0.0.2",
     "svgo": "^3.0.0",
     "svgo-loader": "3.0.3",
-    "terser-webpack-plugin": "5.3.6",
+    "terser-webpack-plugin": "5.4.0",
     "ts-loader": "9.4.4",
     "typescript": "^5.7.3",
     "use-trace-update": "1.3.2",
@@ -293,11 +291,11 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "^5.2.3",
     "webpack-node-externals": "3.0.0",
-    "@plone/types": "2.0.0-alpha.16",
     "@plone/babel-preset-razzle": "^1.0.0-alpha.0",
-    "@plone/razzle": "1.0.0-alpha.3",
-    "@plone/razzle-dev-utils": "1.0.0-alpha.2",
-    "@plone/volto-coresandbox": "1.0.0"
+    "@plone/razzle": "1.0.0-alpha.4",
+    "@plone/volto-coresandbox": "1.0.0",
+    "@plone/types": "2.0.0-alpha.17",
+    "@plone/razzle-dev-utils": "1.0.0-alpha.2"
   },
   "scripts": {
     "analyze": "BUNDLE_ANALYZE=true razzle build",

package/src/components/manage/Blocks/Block/Order/Item.jsx

@@ -44,6 +44,12 @@ export const Item = forwardRef(
       config.blocks.blocksConfig[data?.['@type']]?.icon ||
       config.blocks.blocksConfig.title?.icon;
 
+    const required =
+      typeof data?.required === 'boolean'
+        ? data.required
+        : includes(config.blocks.requiredBlocks, data?.['@type']);
+    const fixed = !!data?.fixed;
+
     return (
       <li
         className={classNames(
@@ -93,15 +99,17 @@ export const Item = forwardRef(
           ref={ref}
           style={style}
         >
-          <button
-            ref={ref}
-            {...handleProps}
-            className={classNames('action', 'drag')}
-            tabIndex={0}
-            data-cypress="draggable-handle"
-          >
-            <Icon name={dragSVG} size="16px" />
-          </button>
+          {!fixed && (
+            <button
+              ref={ref}
+              {...handleProps}
+              className={classNames('action', 'drag')}
+              tabIndex={0}
+              data-cypress="draggable-handle"
+            >
+              <Icon name={dragSVG} size="16px" />
+            </button>
+          )}
           <span
             className={cx('text', {
               errored: errors && Object.keys(errors).length > 0,
@@ -118,7 +126,7 @@ export const Item = forwardRef(
               config.blocks.blocksConfig[data?.['@type']]?.title ||
               data?.title}
           </span>
-          {!clone && onRemove && (
+          {!clone && onRemove && !required && (
             <button
               onClick={onRemove}
               className={classNames('action', 'delete')}

package/src/components/manage/Blocks/Block/Order/Item.test.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { render } from '@testing-library/react';
+import config from '@plone/volto/registry';
+
+import { Item } from './Item';
+
+const mockStore = configureStore();
+
+const defaultStoreState = {
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  form: {
+    ui: {
+      selected: null,
+      hovered: null,
+      multiSelected: [],
+      gridSelected: null,
+    },
+  },
+};
+
+const renderItem = (data = {}) => {
+  const store = mockStore(defaultStoreState);
+
+  return render(
+    <Provider store={store}>
+      <Item
+        id="title-block-id"
+        data={{ '@type': 'title', ...data }}
+        depth={0}
+        indentationWidth={25}
+        onRemove={() => {}}
+        onSelectBlock={() => {}}
+        handleProps={{}}
+      />
+    </Provider>,
+  );
+};
+
+describe('Order Item', () => {
+  let requiredBlocks;
+
+  beforeEach(() => {
+    requiredBlocks = [...(config.blocks.requiredBlocks || [])];
+    config.blocks.requiredBlocks = [];
+  });
+
+  afterEach(() => {
+    config.blocks.requiredBlocks = requiredBlocks;
+  });
+
+  test('renders drag and delete actions for movable and removable blocks', () => {
+    const { container } = renderItem();
+
+    expect(container.querySelector('.action.drag')).not.toBeNull();
+    expect(container.querySelector('.action.delete')).not.toBeNull();
+  });
+
+  test('hides delete action for required blocks', () => {
+    const { container } = renderItem({ required: true });
+
+    expect(container.querySelector('.action.delete')).toBeNull();
+  });
+
+  test('hides delete action for block types configured as required', () => {
+    config.blocks.requiredBlocks = ['title'];
+
+    const { container } = renderItem();
+
+    expect(container.querySelector('.action.delete')).toBeNull();
+  });
+
+  test('allows explicit required=false to override required block types', () => {
+    config.blocks.requiredBlocks = ['title'];
+
+    const { container } = renderItem({ required: false });
+
+    expect(container.querySelector('.action.delete')).not.toBeNull();
+  });
+
+  test('hides drag action for fixed blocks', () => {
+    const { container } = renderItem({ fixed: true });
+
+    expect(container.querySelector('.action.drag')).toBeNull();
+  });
+});

package/src/components/manage/Contents/ContentsBreadcrumbs.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Breadcrumb } from 'semantic-ui-react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { Link } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
@@ -43,13 +44,13 @@ const ContentsBreadcrumbs = (props) => {
             <ContentsBreadcrumbsRootItem />
           </Link>
           <Breadcrumb.Divider />
-          <Link
-            to={`${navroot?.['@id']}/contents`}
+          <UniversalLink
+            href={`${navroot?.['@id']}/contents`}
             className="section"
             title={navroot?.title}
           >
             {navroot?.title}
-          </Link>
+          </UniversalLink>
         </>
       )}
       {items.map((breadcrumb, index, breadcrumbs) => [

package/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.test.jsx

@@ -14,6 +14,9 @@ vi.mock('../../Toolbar/Toolbar', () => ({
 describe('UserGroupMembershipControlPanel', () => {
   it('renders a user group membership control component', () => {
     const store = mockStore({
+      userSession: {
+        token: '1234',
+      },
       controlpanels: {
         controlpanel: {
           data: {

package/src/components/manage/Toast/Toast.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
 import successSVG from '@plone/volto/icons/ready.svg';
@@ -7,7 +8,28 @@ import infoSVG from '@plone/volto/icons/info.svg';
 import errorSVG from '@plone/volto/icons/error.svg';
 import warningSVG from '@plone/volto/icons/warning.svg';
 
+const messages = defineMessages({
+  success: {
+    id: 'toast_type_success',
+    defaultMessage: 'Success',
+  },
+  error: {
+    id: 'toast_type_error',
+    defaultMessage: 'Error',
+  },
+  warning: {
+    id: 'toast_type_warning',
+    defaultMessage: 'Warning',
+  },
+  info: {
+    id: 'toast_type_info',
+    defaultMessage: 'Information',
+  },
+});
+
 const Toast = (props) => {
+  const intl = useIntl();
+
   function getIcon(props) {
     if (props.info) {
       return infoSVG;
@@ -22,12 +44,22 @@ const Toast = (props) => {
     }
   }
 
+  function getTypeLabel(props) {
+    if (props.error) return intl.formatMessage(messages.error);
+    if (props.warning) return intl.formatMessage(messages.warning);
+    if (props.info) return intl.formatMessage(messages.info);
+    if (props.success) return intl.formatMessage(messages.success);
+    return null;
+  }
+
   const { title, content } = props;
+  const typeLabel = getTypeLabel(props);
 
   return (
     <>
       <Icon name={getIcon(props)} size="18px" />
       <div className="toast-inner-content">
+        {typeLabel && <span className="visually-hidden">{typeLabel}</span>}
         {title && <h4>{title}</h4>}
         <div>{content}</div>
       </div>

package/src/components/manage/Toast/Toast.test.jsx

@@ -1,14 +1,18 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { IntlProvider } from 'react-intl';
 import Toast from './Toast';
 
 test('renders a Toast info component', () => {
   const component = renderer.create(
-    <Toast
-      info
-      title="I'm a title"
-      content="This is the content, lorem ipsum"
-    />,
+    <IntlProvider locale="en">
+      <Toast
+        info
+        title="I'm a title"
+        content="This is the content, lorem ipsum"
+      />
+      ,
+    </IntlProvider>,
   );
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

package/src/components/manage/Widgets/UrlWidget.jsx

@@ -2,7 +2,6 @@
  * UrlWidget component.
  * @module components/manage/Widgets/UrlWidget
  */
-
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
@@ -14,10 +13,10 @@ import {
   flattenToAppURL,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
+import { defineMessages, useIntl } from 'react-intl';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
-
 /** Widget to edit urls
  *
  * This is the default widget used for the `remoteUrl` field. You can also use
@@ -30,6 +29,24 @@ import navTreeSVG from '@plone/volto/icons/nav.svg';
  * }
  * ```
  */
+const messages = defineMessages({
+  urlMissing: {
+    id: 'URL is missing',
+    defaultMessage: 'URL is missing',
+  },
+  urlInvalid: {
+    id: 'URL is invalid',
+    defaultMessage: 'URL is invalid',
+  },
+  clearUrl: {
+    id: 'Clear URL',
+    defaultMessage: 'Clear URL',
+  },
+  openUrlBrowser: {
+    id: 'Open URL browser',
+    defaultMessage: 'Open URL browser',
+  },
+});
 export const UrlWidget = (props) => {
   const {
     id,
@@ -40,9 +57,10 @@ export const UrlWidget = (props) => {
     maxLength,
     placeholder,
     isDisabled,
+    required,
   } = props;
   const inputId = `field-${id}`;
-
+  const intl = useIntl();
   const [value, setValue] = useState(flattenToAppURL(props.value));
   const [isInvalid, setIsInvalid] = useState(false);
   /**
@@ -54,24 +72,20 @@ export const UrlWidget = (props) => {
   const clear = () => {
     setValue('');
     onChange(id, undefined);
+    setIsInvalid(false);
   };
-
   const onChangeValue = (_value) => {
     let newValue = _value;
     if (newValue?.length > 0) {
       if (isInvalid && URLUtils.isUrl(URLUtils.normalizeUrl(newValue))) {
         setIsInvalid(false);
       }
-
       if (isInternalURL(newValue)) {
         newValue = flattenToAppURL(newValue);
       }
     }
-
     setValue(newValue);
-
     newValue = isInternalURL(newValue) ? addAppURL(newValue) : newValue;
-
     if (!isInternalURL(newValue) && newValue.length > 0) {
       const checkedURL = URLUtils.checkAndNormalizeUrl(newValue);
       newValue = checkedURL.url;
@@ -79,10 +93,15 @@ export const UrlWidget = (props) => {
         setIsInvalid(true);
       }
     }
-
     onChange(id, newValue === '' ? undefined : newValue);
   };
-
+  // A11y: if the field is required and the user leaves it empty, we mark it as missing
+  const handleBlur = ({ target }) => {
+    if (required && (!target.value || target.value === '')) {
+      setIsInvalid(true);
+    }
+    onBlur(id, target.value === '' ? undefined : target.value);
+  };
   return (
     <FormFieldWrapper {...props} className="url wide">
       <div className="wrapper">
@@ -90,25 +109,38 @@ export const UrlWidget = (props) => {
           id={inputId}
           name={id}
           type="url"
+          required={required}
+          aria-required={required}
+          aria-invalid={isInvalid}
+          aria-errormessage={isInvalid ? `${inputId}-error` : undefined}
+          onBlur={handleBlur}
           value={value || ''}
           disabled={isDisabled}
           placeholder={placeholder}
           onChange={({ target }) => onChangeValue(target.value)}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
           onClick={() => onClick()}
           minLength={minLength || null}
           maxLength={maxLength || null}
           error={isInvalid}
         />
+        {isInvalid && (
+          <span
+            id={`${inputId}-error`}
+            role="alert"
+            className="visually-hidden"
+          >
+            {value?.length > 0
+              ? intl.formatMessage(messages.urlInvalid)
+              : intl.formatMessage(messages.urlMissing)}
+          </span>
+        )}
         {value?.length > 0 ? (
           <Button.Group>
             <Button
               type="button"
               basic
               className="cancel"
-              aria-label="clearUrlBrowser"
+              aria-label={intl.formatMessage(messages.clearUrl)}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -124,7 +156,7 @@ export const UrlWidget = (props) => {
               type="button"
               basic
               icon
-              aria-label="openUrlBrowser"
+              aria-label={intl.formatMessage(messages.openUrlBrowser)}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -145,7 +177,6 @@ export const UrlWidget = (props) => {
     </FormFieldWrapper>
   );
 };
-
 /**
  * Property types
  * @property {Object} propTypes Property types.
@@ -166,7 +197,6 @@ UrlWidget.propTypes = {
   openObjectBrowser: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
 };
-
 /**
  * Default properties.
  * @property {Object} defaultProps Default properties.
@@ -183,5 +213,4 @@ UrlWidget.defaultProps = {
   minLength: null,
   maxLength: null,
 };
-
 export default withObjectBrowser(UrlWidget);

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.jsx

@@ -6,6 +6,7 @@ const AlternateHrefLangs = (props) => {
   return (
     <Helmet>
       {content['@components']?.translations?.items &&
+        content.language?.token &&
         [
           ...content['@components']?.translations?.items,
           { '@id': content['@id'], language: content.language.token },

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.test.jsx

@@ -35,6 +35,36 @@ describe('AlternateHrefLangs', () => {
     expect(helmetLinks.length).toBe(0);
   });
 
+  it('multilingual site, content without language field, renders nothing', () => {
+    config.settings.publicURL = 'https://plone.org';
+    config.settings.supportedLanguages = ['en', 'es'];
+
+    const content = {
+      '@id': 'http://localhost:8080/Plone/en/newsroom/news',
+      '@components': {
+        translations: {
+          items: [{ '@id': 'http://localhost:8080/Plone/es', language: 'es' }],
+        },
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    renderer.create(
+      <Provider store={store}>
+        <AlternateHrefLangs content={content} />
+      </Provider>,
+    );
+
+    const helmetLinks = Helmet.peek().linkTags;
+    expect(helmetLinks.length).toBe(0);
+  });
+
   it('multilingual site, with some translations', () => {
     config.settings.publicURL = 'https://plone.org';
     config.settings.supportedLanguages = ['en', 'es', 'eu'];