@plone/volto 18.32.3 → 18.32.4

package/CHANGELOG.md

@@ -17,6 +17,23 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.32.4 (2026-03-12)
+
+### Feature
+
+- If a delete operation fails, display the error message returned by the API (if any). @cekk [#7888](https://github.com/plone/volto/issues/7888)
+
+### Bugfix
+
+- Update the users controlpanel to be compatible with the new response format of the users endpoint introduced in https://github.com/plone/plone.restapi/pull/1971. @jnptk 
+
+### Internal
+
+- Remove the `immutable` dependency, since it is not a direct dependency. @wesleybl [#7974](https://github.com/plone/volto/issues/7974)
+- Update pnpm to 9.15.9. @wesleybl [#7975](https://github.com/plone/volto/issues/7975)
+- Revert: "Backport #7672: Convert FormFieldWrapper to functional component (18.x.x)" @sneridagh [#7994](https://github.com/plone/volto/issues/7994)
+- Update dependencies: webpack 5.105.4 @davisagli 
+
 ## 18.32.3 (2026-03-04)
 
 ### Bugfix

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.32.3",
+  "version": "18.32.4",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -168,7 +168,6 @@
     "hoist-non-react-statics": "3.3.2",
     "http-proxy-middleware": "2.0.1",
     "image-extensions": "1.1.0",
-    "immutable": "3",
     "is-hotkey": "0.2.0",
     "is-url": "1.2.4",
     "jotai": "2.11.3",
@@ -363,7 +362,7 @@
     "use-trace-update": "1.3.2",
     "vitest": "^3.0.4",
     "wait-on": "6.0.0",
-    "webpack": "5.90.1",
+    "webpack": "5.105.4",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",

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

@@ -504,11 +504,17 @@ class Contents extends Component {
     }
 
     if (this.props.deleteRequest.loading && nextProps.deleteRequest.error) {
+      const deleteErrorMessageTitle = this.props.intl.formatMessage(
+        messages.deleteError,
+      );
+      const deleteErrorMessageContent =
+        nextProps.deleteRequest.error?.response?.body?.message ||
+        deleteErrorMessageTitle;
       this.props.toastify.toast.error(
         <Toast
           error
-          title={this.props.intl.formatMessage(messages.deleteError)}
-          content={this.props.intl.formatMessage(messages.deleteError)}
+          title={deleteErrorMessageTitle}
+          content={deleteErrorMessageContent}
         />,
       );
     }

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

@@ -2,12 +2,12 @@
  * FormFieldWrapper component.
  * @module components/manage/Widgets/FormFieldWrapper
  */
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react';
 import map from 'lodash/map';
 import cx from 'classnames';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import LanguageSVG from '@plone/volto/icons/language.svg';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
@@ -31,156 +31,178 @@ const messages = defineMessages({
   },
 });
 /**
- * FormFieldWrapper component.
- * @function FormFieldWrapper
- * @param {Object} props - Component props
- * @returns {JSX.Element} Markup for the component.
+ * FormFieldWrapper component class.
+ * @class FormFieldWrapper
+ * @extends Component
  */
-const FormFieldWrapper = ({
-  id,
-  title,
-  description = null,
-  fieldSet,
-  required = false,
-  error = [],
-  wrapped = true,
-  columns = 2,
-  draggable = null,
-  onEdit,
-  className,
-  isDisabled = null,
-  onDelete = null,
-  noForInFieldLabel,
-  multilingual_options,
-  children,
-}) => {
-  const intl = useIntl();
-  const languageIndependent = multilingual_options?.language_independent;
+class FormFieldWrapper extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    required: PropTypes.bool,
+    error: PropTypes.arrayOf(PropTypes.string),
+    wrapped: PropTypes.bool,
+    columns: PropTypes.number,
+    draggable: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    onEdit: PropTypes.func,
+    className: PropTypes.string,
+    onDelete: PropTypes.func,
+    intl: PropTypes.object,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    error: [],
+    wrapped: true,
+    columns: 2,
+    onDelete: null,
+    intl: null,
+    isDisabled: null,
+    draggable: null,
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const {
+      id,
+      title,
+      description,
+      fieldSet,
+      required,
+      error,
+      wrapped,
+      columns,
+      draggable,
+      onEdit,
+      className,
+      isDisabled,
+      onDelete,
+      intl,
+      noForInFieldLabel,
+      multilingual_options,
+    } = this.props;
+
+    const languageIndependent = multilingual_options?.language_independent;
 
-  const wdg = (
-    <>
-      {children}
+    const wdg = (
+      <>
+        {this.props.children}
 
-      {map(error, (message) => (
-        <Label key={message} basic color="red" className="form-error-label">
-          {message}
-        </Label>
-      ))}
-    </>
-  );
+        {map(error, (message) => (
+          <Label key={message} basic color="red" className="form-error-label">
+            {message}
+          </Label>
+        ))}
+      </>
+    );
 
-  return wrapped ? (
-    <Form.Field
-      inline
-      required={required}
-      error={error && error.length > 0}
-      className={cx(
-        description ? 'help' : '',
-        className,
-        `field-wrapper-${id}`,
-        languageIndependent ? 'language-independent-field' : null,
-      )}
-    >
-      <Grid>
-        <Grid.Row stretched>
-          {columns === 2 && (
-            <Grid.Column width="4">
-              <div className="wrapper">
-                <label
-                  id={`fieldset-${fieldSet}-field-label-${id}`}
-                  htmlFor={noForInFieldLabel ? null : `field-${id}`}
-                >
-                  {draggable && onEdit && (
-                    <i
-                      aria-hidden="true"
-                      className="grey bars icon drag handle"
-                    />
-                  )}
-                  {title}
-                  {languageIndependent && (
-                    <div className="languageIndependent-icon">
-                      <Icon
-                        title={intl.formatMessage(
-                          messages.language_independent_icon_title,
-                        )}
-                        name={LanguageSVG}
-                        size="24px"
-                        color="#555"
+    return wrapped ? (
+      <Form.Field
+        inline
+        required={required}
+        error={error && error.length > 0}
+        className={cx(
+          description ? 'help' : '',
+          className,
+          `field-wrapper-${id}`,
+          languageIndependent ? 'language-independent-field' : null,
+        )}
+      >
+        <Grid>
+          <Grid.Row stretched>
+            {columns === 2 && (
+              <Grid.Column width="4">
+                <div className="wrapper">
+                  <label
+                    id={`fieldset-${fieldSet}-field-label-${id}`}
+                    htmlFor={noForInFieldLabel ? null : `field-${id}`}
+                  >
+                    {draggable && onEdit && (
+                      <i
+                        aria-hidden="true"
+                        className="grey bars icon drag handle"
                       />
-                    </div>
-                  )}
-                </label>
-              </div>
-            </Grid.Column>
-          )}
-          <Grid.Column width={columns === 2 ? 8 : 12}>
-            {onEdit && !isDisabled && (
-              <div className="toolbar" style={{ zIndex: '2' }}>
-                <button
-                  aria-label={intl.formatMessage(messages.edit)}
-                  className="item ui noborder button"
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    onEdit(id);
-                  }}
-                >
-                  <IconOld name="write square" size="large" color="blue" />
-                </button>
-                <button
-                  aria-label={intl.formatMessage(messages.delete)}
-                  className="item ui noborder button"
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    onDelete(id);
-                  }}
-                >
-                  <IconOld name="close" size="large" color="red" />
-                </button>
-              </div>
+                    )}
+                    {title}
+                    {languageIndependent && (
+                      <div className="languageIndependent-icon">
+                        <Icon
+                          title={intl.formatMessage(
+                            messages.language_independent_icon_title,
+                          )}
+                          name={LanguageSVG}
+                          size="24px"
+                          color="#555"
+                        />
+                      </div>
+                    )}
+                  </label>
+                </div>
+              </Grid.Column>
             )}
-            {wdg}
-          </Grid.Column>
-        </Grid.Row>
-        {description && (
-          <Grid.Row stretched>
-            <Grid.Column stretched width="12">
-              <p className="help">
-                {multilingual_options
-                  ? `${intl.formatMessage(messages.language_independent)} `
-                  : null}
-                {description}
-              </p>
+            <Grid.Column width={columns === 2 ? 8 : 12}>
+              {onEdit && !isDisabled && (
+                <div className="toolbar" style={{ zIndex: '2' }}>
+                  <button
+                    aria-label={intl.formatMessage(messages.edit)}
+                    className="item ui noborder button"
+                    onClick={(evt) => {
+                      evt.preventDefault();
+                      onEdit(id);
+                    }}
+                  >
+                    <IconOld name="write square" size="large" color="blue" />
+                  </button>
+                  <button
+                    aria-label={intl.formatMessage(messages.delete)}
+                    className="item ui noborder button"
+                    onClick={(evt) => {
+                      evt.preventDefault();
+                      onDelete(id);
+                    }}
+                  >
+                    <IconOld name="close" size="large" color="red" />
+                  </button>
+                </div>
+              )}
+              {wdg}
             </Grid.Column>
           </Grid.Row>
-        )}
-      </Grid>
-    </Form.Field>
-  ) : (
-    <>{wdg}</>
-  );
-};
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- */
-FormFieldWrapper.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  required: PropTypes.bool,
-  error: PropTypes.arrayOf(PropTypes.string),
-  wrapped: PropTypes.bool,
-  columns: PropTypes.number,
-  draggable: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  onEdit: PropTypes.func,
-  className: PropTypes.string,
-  onDelete: PropTypes.func,
-  fieldSet: PropTypes.string,
-  noForInFieldLabel: PropTypes.bool,
-  multilingual_options: PropTypes.object,
-  children: PropTypes.node,
-};
+          {description && (
+            <Grid.Row stretched>
+              <Grid.Column stretched width="12">
+                <p className="help">
+                  {this.props.multilingual_options
+                    ? `${intl.formatMessage(messages.language_independent)} `
+                    : null}
+                  {description}
+                </p>
+              </Grid.Column>
+            </Grid.Row>
+          )}
+        </Grid>
+      </Form.Field>
+    ) : (
+      <>{wdg}</>
+    );
+  }
+}
 
-export default FormFieldWrapper;
+export default injectIntl(FormFieldWrapper);

package/src/reducers/users/users.js

@@ -117,7 +117,7 @@ export default function users(state = initialState, action = {}) {
     case `${LIST_USERS}_SUCCESS`:
       return {
         ...state,
-        users: action.result,
+        users: action.result.items ? action.result.items : action.result,
         [getRequestKey(action.type)]: {
           loading: false,
           loaded: true,

package/theme/themes/pastanaga/extras/main.less

@@ -391,8 +391,6 @@ button {
 }
 
 .users-control-panel .table {
-  overflow-x: scroll;
-
   &::-webkit-scrollbar {
     width: 3px;
     height: 3px; /* scrollbar height */

package/types/components/manage/Widgets/FormFieldWrapper.d.ts

@@ -1,28 +1,5 @@
-export default FormFieldWrapper;
-/**
- * FormFieldWrapper component.
- * @function FormFieldWrapper
- * @param {Object} props - Component props
- * @returns {JSX.Element} Markup for the component.
- */
-declare function FormFieldWrapper({ id, title, description, fieldSet, required, error, wrapped, columns, draggable, onEdit, className, isDisabled, onDelete, noForInFieldLabel, multilingual_options, children, }: any): JSX.Element;
-declare namespace FormFieldWrapper {
-    namespace propTypes {
-        let id: any;
-        let title: any;
-        let description: any;
-        let required: any;
-        let error: any;
-        let wrapped: any;
-        let columns: any;
-        let draggable: any;
-        let isDisabled: any;
-        let onEdit: any;
-        let className: any;
-        let onDelete: any;
-        let fieldSet: any;
-        let noForInFieldLabel: any;
-        let multilingual_options: any;
-        let children: any;
-    }
-}
+declare const _default: React.FC<import("react-intl").WithIntlProps<any>> & {
+    WrappedComponent: React.ComponentType<any>;
+};
+export default _default;
+import React from 'react';

package/types/components/manage/Widgets/index.d.ts

@@ -121,4 +121,4 @@ export declare const ColorPickerWidget: import("@loadable/component").LoadableCo
 export declare const DatetimeWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const TimeWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const RecurrenceWidget: import("@loadable/component").LoadableClassComponent<any>;
-export declare const FormFieldWrapper: import("@loadable/component").LoadableComponent<any>;
+export declare const FormFieldWrapper: import("@loadable/component").LoadableComponent<import("react-intl").WithIntlProps<any>>;