@plone/volto 19.0.0-alpha.0 → 19.0.0-alpha.10

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.0",
+  "version": "19.0.0-alpha.10",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -144,21 +144,25 @@
     "not dead"
   ],
   "engines": {
-    "node": "^20 || ^22"
+    "node": "^22 || ^24"
   },
   "dependencies": {
+    "@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",
     "@redux-devtools/extension": "^3.3.0",
-    "classnames": "2.2.6",
+    "classnames": "2.5.1",
     "connected-react-router": "6.8.0",
-    "debug": "4.3.2",
+    "debug": "4.3.4",
     "decorate-component-with-props": "1.2.1",
     "dependency-graph": "0.10.0",
     "detect-browser": "5.1.0",
     "diff": "3.5.0",
     "express": "4.19.2",
     "filesize": "6",
+    "full-icu": "1.4.0",
     "github-slugger": "1.4.0",
     "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
@@ -181,7 +185,7 @@
     "process": "^0.11.10",
     "promise-file-reader": "1.0.2",
     "prop-types": "15.7.2",
-    "query-string": "7.1.0",
+    "query-string": "^9.0.0",
     "rc-time-picker": "3.7.3",
     "react": "18.2.0",
     "react-anchor-link-smooth-scroll": "1.0.12",
@@ -225,9 +229,9 @@
     "semantic-ui-less": "2.4.1",
     "semantic-ui-react": "2.1.5",
     "serialize-javascript": "3.1.0",
-    "slate": "0.100.0",
-    "slate-hyperscript": "0.100.0",
-    "slate-react": "0.98.4",
+    "slate": "0.118.1",
+    "slate-hyperscript": "0.115.0",
+    "slate-react": "0.117.4",
     "superagent": "3.8.2",
     "tlds": "1.203.1",
     "undoo": "0.5.0",
@@ -236,9 +240,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/volto-slate": "19.0.0-alpha.0",
-    "@plone/scripts": "4.0.0-alpha.0",
-    "@plone/registry": "3.0.0-alpha.2"
+    "@plone/scripts": "4.0.0-alpha.3",
+    "@plone/registry": "3.0.0-alpha.7",
+    "@plone/volto-slate": "19.0.0-alpha.6"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -251,9 +255,6 @@
     "@babel/plugin-syntax-export-namespace-from": "7.8.3",
     "@babel/runtime": "7.20.6",
     "@babel/types": "7.20.5",
-    "@dnd-kit/core": "6.0.8",
-    "@dnd-kit/sortable": "7.0.2",
-    "@dnd-kit/utilities": "3.2.2",
     "@fiverr/afterbuild-webpack-plugin": "^1.0.0",
     "@jest/globals": "^29.7.0",
     "@loadable/babel-plugin": "5.13.2",
@@ -268,21 +269,26 @@
     "@storybook/react": "^8.0.4",
     "@storybook/react-webpack5": "^8.0.4",
     "@storybook/theming": "^8.0.4",
-    "@testing-library/cypress": "10.0.1",
+    "@testing-library/cypress": "10.1.0",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.0",
+    "@testing-library/react": "14.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/history": "^4.7.11",
     "@types/jest": "^29.5.8",
     "@types/loadable__component": "^5.13.9",
     "@types/lodash": "^4.14.201",
+    "@types/node": "^24",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-intl-redux": "^0.1.19",
     "@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",
+    "@vitest/ui": "^2.1.8",
     "autoprefixer": "10.4.8",
     "axe-core": "4.4.2",
     "babel-loader": "9.1.0",
@@ -294,27 +300,28 @@
     "bundlewatch": "0.3.3",
     "circular-dependency-plugin": "5.2.2",
     "css-loader": "5.2.7",
-    "cypress": "13.13.2",
-    "cypress-axe": "1.5.0",
+    "cypress": "15.5.0",
+    "cypress-axe": "1.7.0",
     "cypress-file-upload": "5.0.8",
     "deep-freeze": "0.0.1",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "full-icu": "1.4.0",
     "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.3",
     "jest-environment-jsdom": "^26",
     "jest-file": "1.0.0",
+    "jiti": "^2.4.2",
     "jsdom": "^16.7.0",
     "jsonwebtoken": "9.0.0",
     "less": "3.11.1",
@@ -336,7 +343,7 @@
     "react-docgen-typescript-plugin": "^1.0.5",
     "react-error-overlay": "6.0.9",
     "react-is": "^18.2.0",
-    "release-it": "^17.1.1",
+    "release-it": "^19.0.4",
     "semver": "^7.5.4",
     "start-server-and-test": "1.14.0",
     "storybook": "^8.0.4",
@@ -345,6 +352,7 @@
     "stylelint-config-idiomatic-order": "10.0.0",
     "stylelint-prettier": "5.0.0",
     "svg-loader": "0.0.2",
+    "svgo": "^3.0.0",
     "svgo-loader": "3.0.3",
     "terser-webpack-plugin": "5.3.6",
     "tmp": "0.2.1",
@@ -352,13 +360,13 @@
     "ts-loader": "9.4.4",
     "typescript": "^5.7.3",
     "use-trace-update": "1.3.2",
+    "vitest": "^3.0.4",
     "wait-on": "6.0.0",
     "webpack": "5.90.1",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
-    "why": "0.6.2",
-    "@plone/types": "2.0.0-alpha.1",
+    "@plone/types": "2.0.0-alpha.8",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {
@@ -370,10 +378,11 @@
     "start:coresandbox": "make build-deps && ADDONS=coresandbox razzle start",
     "build": "make build-deps && razzle build --noninteractive",
     "build:types": "tsc --project tsconfig.declarations.json",
-    "test": "razzle test --maxWorkers=50%",
+    "vitest": "vitest",
+    "coverage": "vitest run --coverage",
+    "test": "razzle test --maxWorkers=${MAX_WORKERS:-50%}",
     "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
-    "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "start:prod": "NODE_ENV=production node build/server.js",
     "prettier": "prettier --single-quote --check '{src,cypress}/**/*.{js,jsx,ts,tsx}' --check '*.js'",
     "prettier:fix": "prettier --single-quote --write '{src,cypress}/**/*.{js,jsx,ts,tsx}' --write '*.js'",
@@ -381,8 +390,8 @@
     "stylelint": "stylelint 'theme/**/*.{css,less}' 'src/**/*.{css,less}'",
     "stylelint:overrides": "stylelint 'theme/**/*.overrides' 'src/**/*.overrides'",
     "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "lint": "eslint --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,json}'",
-    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "lint": "eslint --max-warnings=0 '{src,cypress}/**/*.{js,jsx,ts,tsx,json}'",
+    "lint:fix": "eslint --fix '{src,cypress}/**/*.{js,jsx,ts,tsx,json}'",
     "lint:husky": "eslint --max-warnings=0 --fix",
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n",
     "i18n:ci": "pnpm i18n && git diff -G'^[^\"POT]' --exit-code",

package/razzle.config.js

@@ -414,6 +414,22 @@ const defaultModify = ({
         ]
       : [];
 
+  // If Volto is served under a subpath,
+  // we have to adjust where Webpack assets are served too.
+  const subpathPrefix = process.env.RAZZLE_SUBPATH_PREFIX || '';
+  if (subpathPrefix) {
+    if (target === 'web' && dev) {
+      if (config.devServer.devMiddleware) {
+        config.devServer.devMiddleware.publicPath = subpathPrefix;
+      } else {
+        config.devServer.publicPath += `${subpathPrefix.slice(1)}/`;
+      }
+    }
+    const publicPath = config.output.publicPath;
+    if (publicPath.indexOf(subpathPrefix) === -1) {
+      config.output.publicPath = `${publicPath}${subpathPrefix.slice(1)}/`;
+    }
+  }
   return config;
 };
 

package/src/actions/actions/actions.test.js

@@ -7,9 +7,9 @@ describe('Actions action', () => {
       const url = 'http://localhost';
       const action = listActions(url);
 
-      expect(action.type).toEqual(LIST_ACTIONS);
-      expect(action.request.op).toEqual('get');
-      expect(action.request.path).toEqual(`${url}/@actions`);
+      expect(action.type).toBe(LIST_ACTIONS);
+      expect(action.request.op).toBe('get');
+      expect(action.request.path).toBe(`${url}/@actions`);
     });
   });
 });

package/src/actions/addons/addons.test.js

@@ -16,35 +16,38 @@ describe('Addons action', () => {
     it('should create an action to install an addon', () => {
       const id = 'plone.app.example';
       const action = installAddon(id);
-      expect(action.type).toEqual(INSTALL_ADDON);
-      expect(action.request.op).toEqual('post');
-      expect(action.request.path).toEqual(`/@addons/${id}/install`);
+      expect(action.type).toBe(INSTALL_ADDON);
+      expect(action.request.op).toBe('post');
+      expect(action.request.path).toBe(`/@addons/${id}/install`);
     });
   });
+
   describe('uninstallAddon', () => {
     it('should create an action to uninstall an addon', () => {
       const id = 'plone.app.example';
       const action = uninstallAddon(id);
-      expect(action.type).toEqual(UNINSTALL_ADDON);
-      expect(action.request.op).toEqual('post');
-      expect(action.request.path).toEqual(`/@addons/${id}/uninstall`);
+      expect(action.type).toBe(UNINSTALL_ADDON);
+      expect(action.request.op).toBe('post');
+      expect(action.request.path).toBe(`/@addons/${id}/uninstall`);
     });
   });
+
   describe('upgradeAddon', () => {
     it('should create an action to upgrade an addon', () => {
       const id = 'plone.app.example';
       const action = upgradeAddon(id);
-      expect(action.type).toEqual(UPGRADE_ADDON);
-      expect(action.request.op).toEqual('post');
-      expect(action.request.path).toEqual(`/@addons/${id}/upgrade`);
+      expect(action.type).toBe(UPGRADE_ADDON);
+      expect(action.request.op).toBe('post');
+      expect(action.request.path).toBe(`/@addons/${id}/upgrade`);
     });
   });
+
   describe('listAddons', () => {
     it('should create an action to list all addons', () => {
       const action = listAddons();
-      expect(action.type).toEqual(LIST_ADDONS);
-      expect(action.request.op).toEqual('get');
-      expect(action.request.path).toEqual(`/@addons`);
+      expect(action.type).toBe(LIST_ADDONS);
+      expect(action.request.op).toBe('get');
+      expect(action.request.path).toBe(`/@addons`);
     });
   });
 });

package/src/actions/aliases/aliases.test.js

@@ -1,5 +1,4 @@
 import { getAliases, addAliases, removeAliases } from './aliases';
-
 import {
   GET_ALIASES,
   ADD_ALIASES,
@@ -18,6 +17,7 @@ describe('Aliases action', () => {
       );
     });
   });
+
   describe('addAliases', () => {
     it('should create an action to add aliases', () => {
       const url = '/news';

package/src/actions/content/content.js

@@ -164,7 +164,6 @@ export function getContent(
           b_size: settings.defaultPageSize,
         }
       : {},
-    settings.isMultilingual ? { expand: 'translations' } : {},
   );
 
   let qs = Object.keys(query)

package/src/actions/controlpanels/controlpanels.js

@@ -12,6 +12,8 @@ import {
   SYSTEM_INFORMATION,
   DATABASE_INFORMATION,
 } from '@plone/volto/constants/ActionTypes';
+import { getSite } from '@plone/volto/actions/site/site';
+
 /**
  * Get controlpanel function.
  * @function getControlpanel
@@ -86,13 +88,17 @@ export function listControlpanels() {
  * @returns {Object} Update controlpanel action.
  */
 export function updateControlpanel(url, data) {
-  return {
-    type: UPDATE_CONTROLPANEL,
-    request: {
-      op: 'patch',
-      path: url,
-      data,
-    },
+  return (dispatch) => {
+    dispatch({
+      type: UPDATE_CONTROLPANEL,
+      request: {
+        op: 'patch',
+        path: url,
+        data,
+      },
+    }).then(() => {
+      dispatch(getSite());
+    });
   };
 }
 

package/src/actions/controlpanels/controlpanels.test.js

@@ -35,12 +35,18 @@ describe('Controlpanels action', () => {
     it('should create an action to update a controlpanel', () => {
       const url = 'http://localhost';
       const data = 'Hello World!';
-      const action = updateControlpanel(url, data);
 
-      expect(action.type).toEqual(UPDATE_CONTROLPANEL);
-      expect(action.request.op).toEqual('patch');
-      expect(action.request.path).toEqual(url);
-      expect(action.request.data).toEqual(data);
+      const dispatch = vi.fn().mockResolvedValue();
+      updateControlpanel(url, data)(dispatch);
+
+      expect(dispatch).toHaveBeenCalledWith({
+        type: UPDATE_CONTROLPANEL,
+        request: {
+          op: 'patch',
+          path: url,
+          data,
+        },
+      });
     });
   });
 });

package/src/actions/querystring/querystring.test.js

@@ -5,7 +5,7 @@ describe('Querystring action', () => {
   describe('getQuerystring', () => {
     it('should create an action to get the querystring config', () => {
       const getState = () => ({});
-      const dispatch = jest.fn();
+      const dispatch = vi.fn();
       getQuerystring()(dispatch, getState);
       expect(dispatch).toHaveBeenCalledWith({
         type: GET_QUERYSTRING,
@@ -21,7 +21,7 @@ describe('Querystring action', () => {
           data: { '@id': 'http://localhost:3000/some/content' },
         },
       });
-      const dispatch = jest.fn();
+      const dispatch = vi.fn();
       getQuerystring()(dispatch, getState);
       expect(dispatch).toHaveBeenCalledWith({
         type: GET_QUERYSTRING,

package/src/actions/types/types.test.js

@@ -10,7 +10,7 @@ describe('Types action', () => {
         },
       });
       const url = '/blog';
-      const dispatch = jest.fn();
+      const dispatch = vi.fn();
 
       getTypes(url)(dispatch, getState);
 

package/src/actions/users/users.js

@@ -3,7 +3,7 @@
  * @module actions/users/users
  */
 
-import { stringify } from 'query-string';
+import qs from 'query-string';
 
 import {
   CREATE_USER,
@@ -92,7 +92,7 @@ export function listUsers(options = {}) {
 
   let filterarg =
     groups_filter.length > 0
-      ? stringify(
+      ? qs.stringify(
           { 'groups-filter': groups_filter },
           { arrayFormat: 'colon-list-separator' },
         )

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

@@ -8,7 +8,11 @@ import Actions from './Actions';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Contents');
+vi.mock('@plone/volto/components/manage/Contents', async () => {
+  return await import(
+    '@plone/volto/components/manage/Contents/__mocks__/index.vitest.tsx'
+  );
+});
 
 describe('Actions', () => {
   it('renders an actions component', () => {

package/src/components/manage/Add/Add.jsx

@@ -223,11 +223,10 @@ class Add extends Component {
         ? keys(this.props.schema.definitions)
         : null,
       '@type': this.props.type,
-      ...(config.settings.isMultilingual &&
-        this.props.location?.state?.translationOf && {
-          translation_of: this.props.location.state.translationOf,
-          language: this.props.location.state.language,
-        }),
+      ...(this.props.location?.state?.translationOf && {
+        translation_of: this.props.location.state.translationOf,
+        language: this.props.location.state.language,
+      }),
     });
   }
 
@@ -348,7 +347,7 @@ class Add extends Component {
         <div id="page-add">
           <Helmet
             title={this.props.intl.formatMessage(messages.add, {
-              type: this.props.type,
+              type: this.props?.schema?.title || this.props.type,
             })}
           />
           <Form
@@ -359,27 +358,29 @@ class Add extends Component {
             }
             schema={this.props.schema}
             type={this.props.type}
-            formData={{
-              ...(blocksFieldname && {
-                [blocksFieldname]:
-                  initialBlocks ||
-                  this.props.schema.properties[blocksFieldname]?.default,
-              }),
-              ...(blocksLayoutFieldname && {
-                [blocksLayoutFieldname]: {
-                  items:
-                    initialBlocksLayout ||
-                    this.props.schema.properties[blocksLayoutFieldname]?.default
-                      ?.items,
+            formData={
+              this.props.location?.state?.initialFormData || {
+                ...(blocksFieldname && {
+                  [blocksFieldname]:
+                    initialBlocks ||
+                    this.props.schema.properties[blocksFieldname]?.default,
+                }),
+                ...(blocksLayoutFieldname && {
+                  [blocksLayoutFieldname]: {
+                    items:
+                      initialBlocksLayout ||
+                      this.props.schema.properties[blocksLayoutFieldname]
+                        ?.default?.items,
+                  },
+                }),
+                // Copy the Language Independent Fields values from the to-be translated content
+                // into the default values of the translated content Add form.
+                ...lifData(),
+                parent: {
+                  '@id': this.props.content?.['@id'] || '',
                 },
-              }),
-              // Copy the Language Independent Fields values from the to-be translated content
-              // into the default values of the translated content Add form.
-              ...lifData(),
-              parent: {
-                '@id': this.props.content?.['@id'] || '',
-              },
-            }}
+              }
+            }
             requestError={this.state.error}
             onSubmit={this.onSubmit}
             hideActions

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

@@ -3,7 +3,6 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
-
 import Add from './Add';
 
 const mockStore = configureStore();
@@ -16,9 +15,13 @@ beforeAll(() => {
   config.settings.loadables = {};
 });
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
+vi.mock('../Form/Form', () => ({
+  default: vi.fn(() => <div className="Form" />),
+}));
 
 describe('Add', () => {
   it('renders an empty add component', () => {

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

@@ -9,9 +9,13 @@ import Aliases from './Aliases';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
+vi.mock('../Toolbar/More', () => ({
+  default: vi.fn(() => <div className="More" />),
+}));
 
 describe('Aliases', () => {
   it('renders aliases object control', () => {
@@ -27,11 +31,7 @@ describe('Aliases', () => {
           loading: false,
           error: null,
         },
-        get: {
-          loading: false,
-          loaded: true,
-          error: null,
-        },
+        get: { __esModule: true, loading: false, loaded: true, error: null },
         items: [],
       },
       content: {

package/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -359,6 +359,7 @@ const BlocksForm = (props) => {
                 editable,
                 showBlockChooser: selectedBlock === childId,
                 detached: isContainer,
+                isContainer,
                 // Properties to pass to the BlocksForm to match the View ones
                 content: properties,
                 history,