@plone/volto 18.35.0 → 18.36.0

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.35.0",
+  "version": "18.36.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -154,7 +154,6 @@
     "diff": "3.5.1",
     "express": "4.22.1",
     "filesize": "6",
-    "full-icu": "1.4.0",
     "github-slugger": "1.4.0",
     "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
@@ -173,7 +172,7 @@
     "prepend-http": "2",
     "pretty-bytes": "5.3.0",
     "prettier": "3.2.5",
-    "prismjs": "1.27.0",
+    "prismjs": "1.30.0",
     "process": "^0.11.10",
     "promise-file-reader": "1.0.2",
     "prop-types": "15.7.2",
@@ -207,7 +206,6 @@
     "react-side-effect": "2.1.2",
     "react-simple-code-editor": "0.7.1",
     "react-sortable-hoc": "2.0.0",
-    "react-test-renderer": "18.2.0",
     "react-toastify": "5.5.0",
     "react-transition-group": "4.4.5",
     "react-virtualized": "9.22.3",
@@ -215,7 +213,6 @@
     "redux-actions": "3.0.0",
     "redux-connect": "10.0.0",
     "redux-localstorage-simple": "2.5.1",
-    "redux-mock-store": "1.5.4",
     "redux-thunk": "2.4.2",
     "rrule": "2.7.1",
     "semantic-ui-less": "2.4.1",
@@ -231,10 +228,10 @@
     "universal-cookie-express": "4.0.3",
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
-    "uuid": "^8.3.2",
-    "@plone/scripts": "3.10.6",
-    "@plone/registry": "2.7.2",
-    "@plone/volto-slate": "18.10.0"
+    "uuid": "^14.0.0",
+    "@plone/scripts": "3.10.7",
+    "@plone/registry": "2.7.3",
+    "@plone/volto-slate": "18.10.2"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -263,8 +260,8 @@
     "@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/react": "14.3.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/react-hooks": "8.0.1",
     "@types/history": "^4.7.11",
     "@types/jest": "^29.5.8",
@@ -277,11 +274,10 @@
     "@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",
+    "@vitest/ui": "^3.2.4",
     "autoprefixer": "10.4.8",
     "axe-core": "4.4.2",
     "babel-loader": "9.1.0",
@@ -321,20 +317,20 @@
     "lodash-webpack-plugin": "0.11.6",
     "mini-css-extract-plugin": "2.10.2",
     "moment-locales-webpack-plugin": "1.2.0",
-    "postcss": "8.4.31",
+    "postcss": "^8.5.15",
     "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",
+    "postcss-load-config": "^6.0.1",
+    "postcss-loader": "^8.2.1",
+    "postcss-scss": "4.0.9",
     "razzle": "4.2.18",
     "razzle-dev-utils": "4.2.18",
     "razzle-plugin-scss": "4.2.18",
-    "react-docgen-typescript-plugin": "^1.0.8",
     "react-error-overlay": "6.0.9",
     "react-is": "^18.2.0",
-    "release-it": "^19.0.5",
+    "react-test-renderer": "18.2.0",
+    "redux-mock-store": "1.5.4",
+    "release-it": "^20.0.1",
     "semver": "^7.5.4",
     "start-server-and-test": "2.1.5",
     "storybook": "^8.6.15",
@@ -357,7 +353,7 @@
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
     "why": "0.6.2",
-    "@plone/types": "1.6.2",
+    "@plone/types": "1.6.3",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "scripts": {
@@ -369,7 +365,7 @@
     "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:ci": "CI=true razzle test",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "start:prod": "NODE_ENV=production node build/server.js",
     "prettier": "prettier --single-quote --check '{src,cypress}/**/*.{js,jsx,ts,tsx}' --check '*.js'",

package/src/actions/querystringsearch/querystringsearch.js

@@ -17,7 +17,10 @@ export function getQueryStringResults(path, data, subrequest, page) {
     delete requestData.depth;
     requestData.query.forEach((q) => {
       if (q.i === 'path') {
-        q.v += '::' + data.depth;
+        // fixes https://github.com/plone/volto/issues/8349
+        // Skip if depth is already embedded in the path value (e.g. set via object browser)
+        const hasEmbeddedDepth = /::\d+$/.test(q.v);
+        if (!hasEmbeddedDepth) q.v += '::' + data.depth;
       }
     });
   }

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

@@ -73,4 +73,81 @@ describe('querystringsearch action', () => {
     expect(action.request.path).toEqual('/@querystring-search');
     expect(action.request.data.sort_order).toEqual('descending');
   });
+
+  describe('depth handling', () => {
+    it('appends depth to path value when depth is set and path has no embedded depth', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder',
+          },
+        ],
+        depth: 2,
+      };
+      const action = getQueryStringResults('', data);
+
+      const pathQuery = action.request.data.query.find((q) => q.i === 'path');
+      expect(pathQuery.v).toEqual('/folder::2');
+    });
+
+    it('does not double-append depth when path value already contains an embedded depth', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder::1',
+          },
+        ],
+        depth: 3,
+      };
+      const action = getQueryStringResults('', data);
+
+      const pathQuery = action.request.data.query.find((q) => q.i === 'path');
+      expect(pathQuery.v).toEqual('/folder::1');
+    });
+
+    it('removes depth from the top-level request data', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder',
+          },
+        ],
+        depth: 2,
+      };
+      const action = getQueryStringResults('', data);
+
+      expect(action.request.data.depth).toBeUndefined();
+    });
+
+    it('handles mixed path entries: appends depth only to those without embedded depth', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder-a',
+          },
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder-b::5',
+          },
+        ],
+        depth: 2,
+      };
+      const action = getQueryStringResults('', data);
+
+      const [pathA, pathB] = action.request.data.query.filter(
+        (q) => q.i === 'path',
+      );
+      expect(pathA.v).toEqual('/folder-a::2');
+      expect(pathB.v).toEqual('/folder-b::5');
+    });
+  });
 });

package/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -10,6 +10,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import AnimateHeight from 'react-animate-height';
 import config from '@plone/volto/registry';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import BlockChooserSearch from './BlockChooserSearch';
@@ -98,16 +99,10 @@ const BlockChooser = ({
   }
   const [filterValue, setFilterValue] = React.useState('');
 
-  const getFormatMessage = (message) =>
-    intl.formatMessage({
-      id: message,
-      defaultMessage: message,
-    });
-
   function blocksAvailableFilter(blocks) {
     return blocks.filter(
       (block) =>
-        getFormatMessage(block.title)
+        formatMessageWithFallback(intl, block.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) ||
         block.title.toLowerCase().includes(filterValue.toLowerCase()) ||
@@ -117,7 +112,7 @@ const BlockChooser = ({
   function filterVariations(block) {
     return block.variations?.filter(
       (variation) =>
-        getFormatMessage(variation.title)
+        formatMessageWithFallback(intl, variation.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) &&
         !variation.title.toLowerCase().includes('default'),
@@ -145,9 +140,11 @@ const BlockChooser = ({
           }}
         >
           <Icon name={block.icon} size="36px" />
-          {getFormatMessage(block.title)}
+          {formatMessageWithFallback(intl, block.title)}
           {filterValue && variations?.[0]?.title && (
-            <small>{getFormatMessage(variations[0].title)}</small>
+            <small>
+              {formatMessageWithFallback(intl, variations[0].title)}
+            </small>
           )}
         </Button>
       </Button.Group>

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

@@ -149,15 +149,6 @@ export class Edit extends Component {
                 this.props.setUIState({ hovered: this.props.id });
               }
             }}
-            onFocus={(e) => {
-              // TODO: This `onFocus` steals somehow the focus from the slate block
-              // we have to investigate why this is happening
-              // Apparently, I can't see any difference in the behavior
-              // If any, we can fix it in successive iterations
-              // if (this.props.hovered !== this.props.id) {
-              //   this.props.setUIState({ hovered: this.props.id });
-              // }
-            }}
             onMouseLeave={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -172,6 +163,15 @@ export class Edit extends Component {
                   e,
                 );
             }}
+            onFocus={(e) => {
+              const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
+              !this.props.selected &&
+                this.props.onSelectBlock(
+                  this.props.id,
+                  this.props.selected ? false : isMultipleSelection,
+                  e,
+                );
+            }}
             onKeyDown={
               !(blockHasOwnFocusManagement || disableNewBlocks)
                 ? (e) =>
@@ -245,7 +245,6 @@ export class Edit extends Component {
             className={cx(`block ${type}`, { selected: this.props.selected })}
             style={{ outline: 'none' }}
             ref={this.blockNode}
-            // The tabIndex is required for the keyboard navigation
             tabIndex={-1}
           >
             {this.props.intl.formatMessage(messages.unknownBlock, {

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

@@ -5,7 +5,9 @@ import includes from 'lodash/includes';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { setUIState } from '@plone/volto/actions/form/form';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import config from '@plone/volto/registry';
+import { useIntl } from 'react-intl';
 
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
@@ -34,6 +36,7 @@ export const Item = forwardRef(
     },
     ref,
   ) => {
+    const intl = useIntl();
     const selected = useSelector((state) => state.form.ui.selected);
     const hovered = useSelector((state) => state.form.ui.hovered);
     const multiSelected = useSelector((state) => state.form.ui.multiSelected);
@@ -49,7 +52,11 @@ export const Item = forwardRef(
         ? data.required
         : includes(config.blocks.requiredBlocks, data?.['@type']);
     const fixed = !!data?.fixed;
-
+    const configTitle = config.blocks.blocksConfig[data?.['@type']]?.title;
+    const blockTitle =
+      data?.plaintext ||
+      formatMessageWithFallback(intl, configTitle) ||
+      data?.title;
     return (
       <li
         className={classNames(
@@ -122,9 +129,7 @@ export const Item = forwardRef(
                 style={{ verticalAlign: 'middle' }}
               />
             )}{' '}
-            {data?.plaintext ||
-              config.blocks.blocksConfig[data?.['@type']]?.title ||
-              data?.title}
+            {blockTitle}
           </span>
           {!clone && onRemove && !required && (
             <button

package/src/components/manage/Blocks/Image/View.test.jsx

@@ -36,13 +36,13 @@ config.blocks.blocksConfig = {
 
 describe('Image View Component', () => {
   test('renders a view image component with a local image', () => {
-    const { getByRole } = render(<View data={{ url: '/image.jpg' }} />);
-    const img = getByRole('img');
+    const { container } = render(<View data={{ url: '/image.jpg' }} />);
+    const img = container.querySelector('img');
     expect(img).toHaveAttribute('src', '/image.jpg/@@images/image');
     expect(img).toHaveAttribute('loading', 'lazy');
   });
   test('renders a view image component with a local image with a link', () => {
-    const { container, getByRole } = render(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <View
@@ -51,22 +51,22 @@ describe('Image View Component', () => {
         </MemoryRouter>
       </Provider>,
     );
-    const img = getByRole('img');
+    const img = container.querySelector('img');
     const a = container.querySelector('a');
     expect(img).toHaveAttribute('src', '/image.jpg/@@images/image');
     expect(a).toHaveAttribute('href', '/front-page');
   });
   test('renders a view image component with an external image', () => {
-    const { getByRole } = render(
+    const { container } = render(
       <Provider store={store}>
         <View data={{ url: 'https://plone.org/logo.jpg' }} />
       </Provider>,
     );
-    const img = getByRole('img');
+    const img = container.querySelector('img');
     expect(img).toHaveAttribute('src', 'https://plone.org/logo.jpg');
   });
   test('renders a view image component with an external image with a link', () => {
-    const { container, getByRole } = render(
+    const { container } = render(
       <Provider store={store}>
         <View
           data={{
@@ -76,7 +76,7 @@ describe('Image View Component', () => {
         />
       </Provider>,
     );
-    const img = getByRole('img');
+    const img = container.querySelector('img');
     const a = container.querySelector('a');
     expect(img).toHaveAttribute('src', 'https://plone.org/logo.jpg');
     expect(a).toHaveAttribute('href', 'http://front-page');

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

@@ -724,9 +724,9 @@ class Contents extends Component {
         delta,
       );
     } else {
-      this.setState({
-        items: move(this.state.items, itemIndex, itemIndex + delta),
-      });
+      this.setState((prevState) => ({
+        items: move(prevState.items, itemIndex, itemIndex + delta),
+      }));
     }
   }
 

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, useLocation } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
 import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
@@ -41,22 +42,22 @@ const ContentsBreadcrumbs = (props) => {
         </>
       )}
       {settings.isMultilingual && pathname?.split('/')?.length > 2 && (
-        <Link
-          to={`/${lang}/contents`}
+        <UniversalLink
+          href={`/${lang}/contents`}
           className="section"
           title={intl.formatMessage(messages.home)}
         >
           {langmap?.[lang]?.nativeName ?? lang}
-        </Link>
+        </UniversalLink>
       )}
       {!settings.isMultilingual && (
-        <Link
-          to="/contents"
+        <UniversalLink
+          href="/contents"
           className="section"
           title={intl.formatMessage(messages.home)}
         >
           <ContentsBreadcrumbsHomeItem />
-        </Link>
+        </UniversalLink>
       )}
       {items.map((breadcrumb, index, breadcrumbs) => [
         <Breadcrumb.Divider key={`divider-${breadcrumb.url}`} />,

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

@@ -364,15 +364,13 @@ const DragDropConnector = (props) => {
           drop(props, monitor) {
             const id = monitor.getItem().id;
             const dragOrder = monitor.getItem().startOrder;
-            const dropOrder = props.order;
+            const dropOrder = monitor.getItem().order;
 
             if (dragOrder === dropOrder) {
               return;
             }
 
             props.onOrderItem(id, dragOrder, dropOrder - dragOrder, true);
-
-            monitor.getItem().order = dropOrder;
           },
         },
         (connect) => ({

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

@@ -113,6 +113,7 @@ const DropZoneContent = (props) => {
   };
 
   const onDrop = async (e) => {
+    e.preventDefault();
     if (!hasFiles(e)) {
       return;
     }

package/src/components/manage/Sidebar/ObjectBrowser.jsx

@@ -58,6 +58,7 @@ const withObjectBrowser = (WrappedComponent) =>
       selectableTypes,
       maximumSelectionSize,
       currentPath,
+      initialPath,
       onlyFolderishSelectable,
     } = {}) =>
       this.setState(() => ({
@@ -71,6 +72,7 @@ const withObjectBrowser = (WrappedComponent) =>
         selectableTypes,
         maximumSelectionSize,
         currentPath,
+        initialPath,
         onlyFolderishSelectable,
       }));
 
@@ -82,6 +84,10 @@ const withObjectBrowser = (WrappedComponent) =>
         this.props.pathname ||
         this.props.location?.pathname;
 
+      let initialPath = this.state?.initialPath
+        ? getBaseUrl(this.state.initialPath)
+        : null;
+
       return (
         <>
           <WrappedComponent
@@ -105,6 +111,7 @@ const withObjectBrowser = (WrappedComponent) =>
                     : this.props.data
                 }
                 contextURL={getBaseUrl(contextURL)}
+                initialPath={initialPath}
                 closeObjectBrowser={this.closeObjectBrowser}
                 mode={this.state.mode}
                 onSelectItem={this.state.onSelectItem}

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { Input, Segment, Breadcrumb } from 'semantic-ui-react';
 
+import debounce from 'lodash/debounce';
 import join from 'lodash/join';
 
 // These absolute imports (without using the corresponding centralized index.js) are required
@@ -84,6 +85,7 @@ class ObjectBrowserBody extends Component {
     onSelectItem: PropTypes.func,
     dataName: PropTypes.string,
     maximumSelectionSize: PropTypes.number,
+    initialPath: PropTypes.string,
     contextURL: PropTypes.string,
     searchableTypes: PropTypes.arrayOf(PropTypes.string),
     onlyFolderishSelectable: PropTypes.bool,
@@ -113,18 +115,21 @@ class ObjectBrowserBody extends Component {
    */
   constructor(props) {
     super(props);
+    const defaultMultiplePath = props.initialPath || '/';
     this.state = {
       currentFolder:
-        this.props.mode === 'multiple' ? '/' : this.props.contextURL || '/',
+        this.props.mode === 'multiple'
+          ? defaultMultiplePath
+          : this.props.contextURL || '/',
       currentImageFolder:
         this.props.mode === 'multiple'
-          ? '/'
+          ? defaultMultiplePath
           : this.props.mode === 'image' && this.props.data?.url
             ? getParentURL(this.props.data.url)
             : '/',
       currentLinkFolder:
         this.props.mode === 'multiple'
-          ? '/'
+          ? defaultMultiplePath
           : this.props.mode === 'link' && this.props.data?.href
             ? getParentURL(this.props.data.href)
             : '/',
@@ -155,6 +160,22 @@ class ObjectBrowserBody extends Component {
       view: this.props.mode === 'image' ? 'icons' : 'list',
     };
     this.searchInputRef = React.createRef();
+    // Debounce the live-search dispatch so rapid keystrokes do not produce a
+    // burst of overlapping requests whose responses may resolve out of order
+    // (an older, less-filtered response arriving after the latest one would
+    // visually "reset" the list to look unfiltered).
+    this.debouncedSearch = debounce(this.doSearch, 300);
+  }
+
+  /**
+   * Component will unmount
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    if (this.debouncedSearch) {
+      this.debouncedSearch.cancel();
+    }
   }
 
   /**
@@ -244,8 +265,7 @@ class ObjectBrowserBody extends Component {
       view: prevState.view === 'icons' ? 'list' : 'icons',
     }));
 
-  onSearch = (e) => {
-    const text = flattenToAppURL(e.target.value);
+  doSearch = (text) => {
     if (text.startsWith('/')) {
       this.setState({ currentFolder: text });
       this.props.searchContent(
@@ -282,6 +302,11 @@ class ObjectBrowserBody extends Component {
     }
   };
 
+  onSearch = (e) => {
+    const text = flattenToAppURL(e.target.value);
+    this.debouncedSearch(text);
+  };
+
   onSelectItem = (item) => {
     const url = item['@id'];
     const { block, data, mode, dataName, onChangeBlock } = this.props;

package/src/components/manage/Sidebar/ObjectBrowserBody.test.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import ObjectBrowserBody from './ObjectBrowserBody';
+
+const mockStore = configureStore();
+
+const baseState = {
+  search: { subrequests: {} },
+  intl: { locale: 'en', messages: {} },
+};
+
+const baseProps = {
+  block: 'test-block',
+  data: {},
+  closeObjectBrowser: () => {},
+  onChangeBlock: () => {},
+};
+
+const getInitialSearchPath = (actions) => {
+  const action = actions.find((a) => a.type === 'SEARCH_CONTENT');
+  return action?.request?.path?.split('/@search')[0];
+};
+
+describe('ObjectBrowserBody', () => {
+  it('uses initialPath as the default folder when mode=multiple', () => {
+    const store = mockStore(baseState);
+    render(
+      <Provider store={store}>
+        <ObjectBrowserBody
+          {...baseProps}
+          mode="multiple"
+          initialPath="/company/team"
+        />
+      </Provider>,
+    );
+
+    expect(getInitialSearchPath(store.getActions())).toBe('/company/team');
+  });
+
+  it('defaults to root when mode=multiple and initialPath is not provided', () => {
+    const store = mockStore(baseState);
+    render(
+      <Provider store={store}>
+        <ObjectBrowserBody {...baseProps} mode="multiple" />
+      </Provider>,
+    );
+
+    expect(getInitialSearchPath(store.getActions())).toBe('/');
+  });
+});