@plone/volto 19.3.1 → 19.4.1

package/CHANGELOG.md

@@ -17,6 +17,23 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.4.1 (2026-09-10)
+
+### Bugfix
+
+- Fix `SelectAutoComplete` rendering the raw token instead of its title when the vocabulary subrequest still held a stale token/title pair from a previously edited value (for example after changing a value, saving, and editing again via client-side navigation). The widget now keeps its local token/title cache in sync with the incoming choices instead of seeding it only once. @sneridagh [#8423](https://github.com/plone/volto/issues/8423)
+
+## 19.4.0 (2026-09-03)
+
+### Feature
+
+- Added a `UserAvatar` component, used by the toolbar to render the signed-in user's avatar. Add-ons can now change that avatar by shadowing this one small component, instead of shadowing the whole `Toolbar`. @ericof [#8404](https://github.com/plone/volto/issues/8404)
+- Adding quanta support with semanticUI fallback for seach container. @TimoBroeskamp [#8411](https://github.com/plone/volto/issues/8411)
+
+### Bugfix
+
+- Fixed cursor position lost when clicking on a Slate block in edit, causing the cursor to jump to the start of the text. @wesleybl [#8402](https://github.com/plone/volto/issues/8402)
+
 ## 19.3.1 (2026-08-26)
 
 ### Bugfix

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.3.1",
+  "version": "19.4.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -176,9 +176,9 @@
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^14.0.0",
     "@plone/components": "4.2.1",
-    "@plone/volto-slate": "19.0.4",
+    "@plone/registry": "3.0.2",
     "@plone/scripts": "4.0.1",
-    "@plone/registry": "3.0.1"
+    "@plone/volto-slate": "19.0.5"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -286,10 +286,10 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "^5.2.4",
     "webpack-node-externals": "3.0.0",
+    "@plone/razzle": "1.0.1",
     "@plone/babel-preset-razzle": "^1.0.1",
-    "@plone/razzle-dev-utils": "1.0.0",
     "@plone/volto-coresandbox": "1.0.0",
-    "@plone/razzle": "1.0.1",
+    "@plone/razzle-dev-utils": "1.0.0",
     "@plone/types": "2.0.1"
   },
   "scripts": {

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -39,9 +39,9 @@ import unlockSVG from '@plone/volto/icons/unlock.svg';
 import folderSVG from '@plone/volto/icons/folder.svg';
 import addSVG from '@plone/volto/icons/add-document.svg';
 import moreSVG from '@plone/volto/icons/more.svg';
-import userSVG from '@plone/volto/icons/user.svg';
 import backSVG from '@plone/volto/icons/back.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import UserAvatar from './UserAvatar';
 
 const messages = defineMessages({
   edit: {
@@ -695,8 +695,7 @@ class Toolbar extends Component {
                     tabIndex={0}
                     id="toolbar-personal"
                   >
-                    <Icon
-                      name={userSVG}
+                    <UserAvatar
                       size="30px"
                       title={this.props.intl.formatMessage(
                         messages.personalTools,

package/src/components/manage/Toolbar/UserAvatar.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import cameraSVG from '@plone/volto/icons/camera.svg';
+
+import UserAvatar from './UserAvatar';
+
+const renderUserAvatar = (
+  props: React.ComponentProps<typeof UserAvatar> = {},
+) => render(<UserAvatar {...props} />);
+
+describe('UserAvatar', () => {
+  it('renders the default user icon', () => {
+    const { asFragment } = renderUserAvatar();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('defaults to the toolbar button size', () => {
+    const { container } = renderUserAvatar();
+    const svg = container.querySelector('svg');
+
+    expect(svg).not.toBeNull();
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveStyle({ height: '30px' });
+  });
+
+  it('renders at the given size', () => {
+    const { container } = renderUserAvatar({ size: '96px' });
+
+    expect(container.querySelector('svg')).toHaveStyle({ height: '96px' });
+  });
+
+  it('applies the given size to a custom icon too', () => {
+    const { container } = renderUserAvatar({ icon: cameraSVG, size: '96px' });
+
+    expect(container.querySelector('svg')).toHaveStyle({ height: '96px' });
+  });
+
+  it('exposes the title to assistive technology', () => {
+    const { container } = renderUserAvatar({ title: 'Personal tools' });
+
+    expect(container.querySelector('svg > title')?.textContent).toBe(
+      'Personal tools',
+    );
+  });
+
+  it('renders no title element when no title is given', () => {
+    const { container } = renderUserAvatar();
+
+    expect(container.querySelector('svg > title')).toBeNull();
+  });
+
+  it('renders the given icon instead of the default one', () => {
+    const { container: withDefault } = renderUserAvatar();
+    const { container: withCamera } = renderUserAvatar({ icon: cameraSVG });
+
+    expect(withCamera.querySelector('svg')?.innerHTML).not.toBe(
+      withDefault.querySelector('svg')?.innerHTML,
+    );
+    expect(withCamera.innerHTML).toMatchSnapshot();
+  });
+
+  it('keeps the title when a custom icon is given', () => {
+    const { container } = renderUserAvatar({
+      icon: cameraSVG,
+      title: 'Personal tools',
+    });
+
+    expect(container.querySelector('svg > title')?.textContent).toBe(
+      'Personal tools',
+    );
+  });
+});

package/src/components/manage/Toolbar/UserAvatar.tsx

@@ -0,0 +1,27 @@
+/**
+ * UserAvatar component.
+ * @module components/manage/Toolbar/UserAvatar
+ */
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import userSVG from '@plone/volto/icons/user.svg';
+
+export type UserAvatarProps = {
+  /** Title of the rendered icon (a11y). */
+  title?: string;
+  /** Icon to render in place of the default user glyph. */
+  icon?: typeof userSVG;
+  /** Size of the avatar (in px). Defaults to the toolbar button size. */
+  size?: string;
+};
+
+/**
+ * Avatar of the currently signed-in user, as shown in the toolbar.
+ *
+ * Extracted so that add-ons can shadow this component alone — rendering a
+ * portrait, initials or a gravatar — instead of shadowing the whole toolbar.
+ */
+const UserAvatar = ({ title, icon, size = '30px' }: UserAvatarProps) => {
+  return <Icon name={icon || userSVG} size={size} title={title} />;
+};
+
+export default UserAvatar;

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

@@ -148,14 +148,33 @@ class SelectAutoComplete extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     const { value, choices } = this.props;
-    if (
-      this.state.termsPairsCache.length === 0 &&
-      value?.length > 0 &&
-      choices?.length > 0
-    ) {
-      this.setState((state) => ({
-        termsPairsCache: [...state.termsPairsCache, ...choices],
-      }));
+    // Keep the local token/title cache in sync with the incoming vocabulary
+    // choices. Seeding the cache only once (when it was still empty) locked it
+    // to whatever choices happened to be present first. When the vocabulary
+    // subrequest still held a stale token/title pair from a previously edited
+    // value (its cache persists across client-side navigation), the widget kept
+    // rendering the raw token instead of its title after the value was changed
+    // and saved. Merging fresh choices as they arrive (de-duplicated, and
+    // preserving options the user picked) resolves the current value's label as
+    // soon as it is fetched.
+    const choicesChanged = choices !== prevProps.choices;
+    const cacheEmptyWithValue =
+      this.state.termsPairsCache.length === 0 && value?.length > 0;
+    if (choices?.length > 0 && (choicesChanged || cacheEmptyWithValue)) {
+      this.setState((state) => {
+        const normalizedIncoming = normalizeChoices(choices, this.props.intl);
+        const knownValues = new Set(
+          normalizeChoices(state.termsPairsCache, this.props.intl).map(
+            (pair) => pair.value,
+          ),
+        );
+        const additions = choices.filter(
+          (choice, index) => !knownValues.has(normalizedIncoming[index].value),
+        );
+        return additions.length > 0
+          ? { termsPairsCache: [...state.termsPairsCache, ...additions] }
+          : null;
+      });
     }
   }
 

package/src/components/manage/Widgets/SelectAutoComplete.test.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
+import { createStore, combineReducers } from 'redux';
 import { Provider } from 'react-intl-redux';
-import { waitFor, render, screen } from '@testing-library/react';
+import { act, waitFor, render, screen } from '@testing-library/react';
+import vocabularies from '@plone/volto/reducers/vocabularies/vocabularies';
 import SelectAutoComplete from './SelectAutoComplete';
 
 const mockStore = configureStore();
@@ -60,3 +62,64 @@ test('renders a select widget component', async () => {
   await waitFor(() => screen.getByText('My field'));
   expect(container).toMatchSnapshot();
 });
+
+const VOCAB = 'plone.app.vocabularies.Keywords';
+
+function tokenTitleSuccess(token, title) {
+  return {
+    type: 'GET_VOCABULARY_TOKEN_TITLE_SUCCESS',
+    vocabulary: VOCAB,
+    tokens: [token],
+    subrequest: 'widget-responsible-en',
+    result: { items: [{ token, title }] },
+  };
+}
+
+test('resolves the current value label from fresh vocabulary choices even when a stale token/title pair was cached first', async () => {
+  // A real store (not a mock) so that dispatching keeps the same widget
+  // instance mounted while its `choices` change — this is what reproduces the
+  // stale vocabulary cache surviving across a client-side navigation.
+  const intl = (state = { locale: 'en', messages: {} }) => state;
+  const store = createStore(combineReducers({ intl, vocabularies }));
+
+  // The vocabulary subrequest still holds a stale pair left by a previously
+  // edited value; it does not contain the current value ("anna").
+  store.dispatch(tokenTitleSuccess('max', 'Max Berger'));
+
+  render(
+    <Provider store={store}>
+      <SelectAutoComplete
+        widgetOptions={{ vocabulary: { '@id': VOCAB } }}
+        id="responsible"
+        title="Responsible"
+        fieldSet="default"
+        isMulti={false}
+        value="anna"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  // With only the stale pair cached, the raw token is shown at first.
+  await waitFor(() => screen.getByText('anna'));
+
+  // A refresh of the vocabulary subrequest that still resolves the stale pair
+  // makes the widget seed its local cache from those stale choices — this is
+  // the state that used to lock the widget to the wrong label.
+  act(() => {
+    store.dispatch(tokenTitleSuccess('max', 'Max Berger'));
+  });
+  await waitFor(() => screen.getByText('anna'));
+
+  // The choices for the current value finally arrive (same mounted instance).
+  // The widget must pick up the fresh pair and render its title instead of
+  // staying locked to the stale cache it seeded earlier.
+  act(() => {
+    store.dispatch(tokenTitleSuccess('anna', 'Anna Becker'));
+  });
+
+  await waitFor(() => screen.getByText('Anna Becker'));
+  expect(screen.queryByText('anna')).not.toBeInTheDocument();
+});

package/src/components/theme/Search/Search.jsx

@@ -5,7 +5,12 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
 import { createPortal } from 'react-dom';
-import { Container, Pagination, Button, Header } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  Pagination,
+  Button,
+  Header,
+} from 'semantic-ui-react';
 import qs from 'query-string';
 import classNames from 'classnames';
 import config from '@plone/volto/registry';
@@ -85,6 +90,9 @@ const Search = (props) => {
 
   const options = qs.parse(location.search);
 
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
   return (
     <Container id="page-search">
       <Helmet title={intl.formatMessage(messages.Search)} />

package/types/components/manage/Toolbar/UserAvatar.d.ts

@@ -0,0 +1,17 @@
+import userSVG from '@plone/volto/icons/user.svg';
+export type UserAvatarProps = {
+    /** Title of the rendered icon (a11y). */
+    title?: string;
+    /** Icon to render in place of the default user glyph. */
+    icon?: typeof userSVG;
+    /** Size of the avatar (in px). Defaults to the toolbar button size. */
+    size?: string;
+};
+/**
+ * Avatar of the currently signed-in user, as shown in the toolbar.
+ *
+ * Extracted so that add-ons can shadow this component alone — rendering a
+ * portrait, initials or a gravatar — instead of shadowing the whole toolbar.
+ */
+declare const UserAvatar: ({ title, icon, size }: UserAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default UserAvatar;