@plone/volto 19.0.0-alpha.36 → 19.0.0-alpha.37

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
+import { expandToBackendURL } from '@plone/volto/helpers/Url/Url';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
@@ -20,6 +20,9 @@ const messages = defineMessages({
 });
 
 export function getSitemapPath(pathname = '', lang) {
+  /* This function is deprecated
+   * We keep it for backwards compatibility.
+   */
   const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
   const path = prefix || lang || '';
   return path;
@@ -32,18 +35,12 @@ export function getSitemapPath(pathname = '', lang) {
  * @returns {JSX.Element} - Rendered component.
  */
 function Sitemap(props) {
-  const {
-    location: { pathname },
-    lang,
-    getNavigation,
-    isMultilingual,
-  } = props;
-
+  const { getNavigation, navroot } = props;
   useEffect(() => {
-    const language = isMultilingual ? `${toBackendLang(lang)}` : null;
-    const path = getSitemapPath(pathname, language);
-    getNavigation(path, 4);
-  }, [pathname, lang, getNavigation, isMultilingual]);
+    const { settings } = config;
+    const path = `${expandToBackendURL(navroot?.navroot?.['@id'])}`;
+    getNavigation(path, settings.siteMapDepth);
+  }, [navroot, getNavigation]);
 
   const renderItems = (items) => {
     return (
@@ -64,12 +61,13 @@ function Sitemap(props) {
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
+  const items = useSelector((state) => state.navigation.items);
   return (
     <div id="page-sitemap">
       <Helmet title={props.intl.formatMessage(messages.Sitemap)} />
       <Container className="view-wrapper">
         <h1>{props.intl.formatMessage(messages.Sitemap)} </h1>
-        {props.items && renderItems(props.items)}
+        {items && renderItems(items)}
       </Container>
     </div>
   );
@@ -77,18 +75,15 @@ function Sitemap(props) {
 
 Sitemap.propTypes = {
   getNavigation: PropTypes.func.isRequired,
-  location: PropTypes.object.isRequired,
+  navroot: PropTypes.object.isRequired,
   intl: PropTypes.object.isRequired,
-  lang: PropTypes.string.isRequired,
-  items: PropTypes.array.isRequired,
 };
 
 export const __test__ = compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
@@ -98,25 +93,22 @@ export default compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
-      isMultilingual: state.site.data.features?.multilingual,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
   asyncConnect([
     {
       key: 'navigation',
-      promise: ({ location, store: { dispatch, getState } }) => {
+      promise: ({ store: { dispatch, getState } }) => {
         if (!__SERVER__) return;
-        const state = getState();
-        const path = getSitemapPath(
-          location.pathname,
-          state.site.data.features?.multilingual
-            ? toBackendLang(getState().intl.locale)
-            : null,
+        const navroot = getState().navroot.data?.navroot?.['@id'];
+        return dispatch(
+          getNavigation(
+            expandToBackendURL(navroot),
+            config.settings.siteMapDepth,
+          ),
         );
-        return dispatch(getNavigation(path, 4));
       },
     },
   ]),

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

@@ -43,6 +43,15 @@ describe('Sitemap', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/`,
+            '@type': 'Plone Site',
+            title: 'Plone Site',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -93,6 +102,15 @@ describe('Sitemap in a multilingual site', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/en`,
+            '@type': 'LRF',
+            title: 'English',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/config/index.js

@@ -117,6 +117,7 @@ let config = {
     defaultPageSize: 25,
     supportedLanguages: Object.keys(languages),
     navDepth: 1,
+    siteMapDepth: 4,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
     defaultBlockType: 'slate',
     verticalFormTabs: false,

package/src/helpers/I18n/I18n.test.ts

@@ -0,0 +1,44 @@
+import { createIntl, createIntlCache } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+import { formatMessageWithFallback } from './I18n';
+
+const buildIntl = (
+  locale: string,
+  messages: Record<string, string>,
+): IntlShape => createIntl({ locale, messages }, createIntlCache());
+
+describe('formatMessageWithFallback', () => {
+  it('returns the translated string when the locale catalog has an entry', () => {
+    const intl = buildIntl('pt-BR', { Image: 'Imagem' });
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Imagem');
+  });
+
+  it('falls back to the input message when no translation is registered', () => {
+    const intl = buildIntl('pt-BR', {});
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Image');
+  });
+
+  it('returns undefined unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, undefined)).toBeUndefined();
+  });
+
+  it('returns null unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, null)).toBeNull();
+  });
+
+  it('returns an empty string unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, '')).toBe('');
+  });
+
+  it('does not call intl.formatMessage when the message is falsy', () => {
+    const intl = buildIntl('en', {});
+    const spy = vi.spyOn(intl, 'formatMessage');
+    formatMessageWithFallback(intl, undefined);
+    formatMessageWithFallback(intl, null);
+    formatMessageWithFallback(intl, '');
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

package/src/helpers/I18n/I18n.ts

@@ -0,0 +1,31 @@
+/**
+ * I18n helpers.
+ * @module helpers/I18n/I18n
+ */
+
+import type { IntlShape } from 'react-intl';
+
+/**
+ * Format a `react-intl` message using a plain string as both the id and the
+ * default fallback. Useful when a UI value (e.g. a block title configured as
+ * a plain string) should be looked up in the locale catalog when available,
+ * and rendered as-is otherwise.
+ *
+ * Returns the input untouched when it is falsy, so the result can be used
+ * directly in `||` fallback chains.
+ *
+ * @param intl react-intl `intl` instance, typically from `useIntl()`.
+ * @param message The string to translate; used as both `id` and
+ *   `defaultMessage`.
+ * @returns Translated text, or `message` unchanged if falsy / no translation.
+ */
+export function formatMessageWithFallback<T extends string | undefined | null>(
+  intl: IntlShape,
+  message: T,
+): T extends string ? string : T {
+  if (!message) return message as T extends string ? string : T;
+  return intl.formatMessage({
+    id: message,
+    defaultMessage: message,
+  }) as T extends string ? string : T;
+}

package/src/helpers/index.js

@@ -112,6 +112,7 @@ export {
   normalizeString,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
+export { formatMessageWithFallback } from './I18n/I18n';
 export {
   withBlockSchemaEnhancer,
   withVariationSchemaEnhancer,

package/theme/themes/pastanaga/collections/form.overrides

@@ -31,6 +31,27 @@
   line-height: initial;
 }
 
+// Restore visible focus for keyboard navigation — overrides Semantic UI's `outline: none` on form inputs
+.ui.form input:not([type]),
+.ui.form input[type='date'],
+.ui.form input[type='datetime-local'],
+.ui.form input[type='email'],
+.ui.form input[type='number'],
+.ui.form input[type='password'],
+.ui.form input[type='search'],
+.ui.form input[type='tel'],
+.ui.form input[type='time'],
+.ui.form input[type='text'],
+.ui.form input[type='file'],
+.ui.form input[type='url'],
+.ui.form textarea {
+  padding-left: 5px;
+
+  &:focus-visible {
+    outline: revert;
+  }
+}
+
 .ui.form .ui.input input:not([type]),
 .ui.form .ui.input input[type='date'],
 .ui.form .ui.input input[type='datetime-local'],

package/theme/themes/pastanaga/elements/button.overrides

@@ -27,7 +27,8 @@
 }
 
 #main,
-.slate-inline-toolbar.slate-toolbar {
+.slate-inline-toolbar.slate-toolbar,
+.contenttype-plone-site .ui.page.modals {
   .ui.basic.buttons .button,
   .ui.basic.button {
     -webkit-box-shadow: 0px 0px 0px @basicBorderSize transparent inset !important;
@@ -42,11 +43,16 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }
 
+.ui.basic.buttons .button:focus-visible,
+.ui.basic.button:focus-visible {
+  outline: revert;
+}
+
 .ui.basic.primary.button,
 .ui.basic.secondary.button {
   box-shadow: none !important;
@@ -69,7 +75,7 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }
@@ -85,3 +91,24 @@
     margin: 0;
   }
 }
+
+.modals {
+  .modal {
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5em;
+
+      .ui.basic.button {
+        display: flex;
+        justify-content: center;
+        padding: 0.3em;
+        margin: 0;
+
+        svg {
+          margin: 0;
+        }
+      }
+    }
+  }
+}

package/types/components/manage/Controlpanels/Relations/RelationsMatrix.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Controlpanels/Users/UsersControlpanel.d.ts

@@ -1,6 +1,2 @@
-export default UsersControlpanel;
-/**
- * UsersControlpanel functional component.
- * @function UsersControlpanel
- */
-declare function UsersControlpanel(): import("react/jsx-runtime").JSX.Element;
+declare const _default: any;
+export default _default;

package/types/components/manage/Controlpanels/Users/UsersControlpanel.ssr.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -4,7 +4,7 @@ export declare const RulesControlpanel: import("@loadable/component").LoadableCl
 export declare const AddRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const EditRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const ConfigureRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
-export declare const UsersControlpanel: import("@loadable/component").LoadableComponent<unknown>;
+export declare const UsersControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const RenderUsers: import("@loadable/component").LoadableComponent<any>;
 export declare const UserGroupMembershipControlPanel: import("@loadable/component").LoadableComponent<unknown>;
 export declare const GroupsControlpanel: import("@loadable/component").LoadableClassComponent<any>;

package/types/components/manage/Multilingual/ManageTranslations.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Sidebar/ObjectBrowser.d.ts

@@ -31,7 +31,7 @@ declare function withObjectBrowser(WrappedComponent: any): {
          *     }),
          *   });
          */
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Sidebar/ObjectBrowserBody.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -10,7 +10,7 @@ export const ImageInput: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

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

@@ -41,7 +41,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

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

@@ -41,7 +41,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

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

@@ -25,7 +25,7 @@ export declare const UrlWidget: import("@loadable/component").LoadableClassCompo
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;
@@ -65,7 +65,7 @@ export declare const InternalUrlWidget: import("@loadable/component").LoadableCl
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/theme/Search/Search.d.ts

@@ -1,3 +1,3 @@
-export const __test__: any;
+export function __test__(props: any): import("react/jsx-runtime").JSX.Element;
 declare const _default: any;
 export default _default;

package/types/helpers/I18n/I18n.d.ts

@@ -0,0 +1,20 @@
+/**
+ * I18n helpers.
+ * @module helpers/I18n/I18n
+ */
+import type { IntlShape } from 'react-intl';
+/**
+ * Format a `react-intl` message using a plain string as both the id and the
+ * default fallback. Useful when a UI value (e.g. a block title configured as
+ * a plain string) should be looked up in the locale catalog when available,
+ * and rendered as-is otherwise.
+ *
+ * Returns the input untouched when it is falsy, so the result can be used
+ * directly in `||` fallback chains.
+ *
+ * @param intl react-intl `intl` instance, typically from `useIntl()`.
+ * @param message The string to translate; used as both `id` and
+ *   `defaultMessage`.
+ * @returns Translated text, or `message` unchanged if falsy / no translation.
+ */
+export declare function formatMessageWithFallback<T extends string | undefined | null>(intl: IntlShape, message: T): T extends string ? string : T;

package/types/helpers/index.d.ts

@@ -7,6 +7,7 @@ export { default as ScrollToTop } from "@plone/volto/helpers/ScrollToTop/ScrollT
 export { default as langmap } from "./LanguageMap/LanguageMap";
 export { default as Helmet } from "./Helmet/Helmet";
 export { messages } from "./MessageLabels/MessageLabels";
+export { formatMessageWithFallback } from "./I18n/I18n";
 export { asyncConnect } from "./AsyncConnect";
 export { useDetectClickOutside } from "./Utils/useDetectClickOutside";
 export { useEvent } from "./Utils/useEvent";