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

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/components/theme/Widgets/DateWidget.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
-import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
 
 const DateWidget = ({ value, children, className, format = 'll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(toBackendLang(lang));
+  const locale = toBackendLang(lang);
+  const formatted = formatDate({ date: value, format, locale });
   return value ? (
     <span className={cx(className, 'date', 'widget')}>
-      {children
-        ? children(moment(value).format(format))
-        : moment(value).format(format)}
+      {children ? children(formatted) : formatted}
     </span>
   ) : (
     ''

package/src/components/theme/Widgets/DatetimeWidget.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
-import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
 
 const DatetimeWidget = ({ value, children, className, format = 'lll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(toBackendLang(lang));
+  const locale = toBackendLang(lang);
+  const formatted = formatDate({ date: value, format, locale });
   return value ? (
     <span className={cx(className, 'datetime', 'widget')}>
-      {children
-        ? children(moment(value).format(format))
-        : moment(value).format(format)}
+      {children ? children(formatted) : formatted}
     </span>
   ) : (
     ''

package/src/components/theme/Widgets/RichTextWidget.jsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 
 const RichTextWidget = ({ value, className }) =>
   value ? (
-    <p
+    <div
       className={cx(className, 'richtext', 'widget')}
       dangerouslySetInnerHTML={{
         __html: value.data,

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/Utils/Date.js

@@ -5,6 +5,21 @@ const DAY = HOUR * 24;
 const MONTH = DAY * 30;
 const YEAR = DAY * 365; // ? is this safe or should it be more accurate
 
+// moment-style format tokens → Intl.DateTimeFormat options (for backward compat)
+const MOMENT_FORMAT_MAP = {
+  ll: { year: 'numeric', month: 'short', day: 'numeric' },
+  lll: {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  },
+  LLLL: { dateStyle: 'full', timeStyle: 'short' },
+  L: { year: 'numeric', month: '2-digit', day: '2-digit' },
+  LT: { timeStyle: 'short' },
+};
+
 export const short_date_format = {
   // 12/9/2021
   year: 'numeric',
@@ -32,13 +47,23 @@ export const toDate = (d) =>
  */
 export function formatDate({
   date, // Date() or  '2022-01-03T19:26:08.999Z'
-  format, // format object, see https://tc39.es/ecma402/#datetimeformat-objects
+  format, // format object (Intl.DateTimeFormat options) or moment-style token string (e.g. 'll', 'lll', 'LLLL', 'L', 'LT')
   locale = 'en',
   long, // true if format should be in long readable form.
   includeTime, // true if short date format should include time
   formatToParts = false,
 }) {
   date = toDate(date);
+  // Resolve moment-style token strings to Intl format options
+  if (typeof format === 'string') {
+    if (process.env.NODE_ENV !== 'production' && !MOMENT_FORMAT_MAP[format]) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[formatDate] Unknown format token "${format}". Supported tokens: ${Object.keys(MOMENT_FORMAT_MAP).join(', ')}. Falling back to short_date_format.`,
+      );
+    }
+    format = MOMENT_FORMAT_MAP[format] || short_date_format;
+  }
   format = format
     ? format
     : long && !includeTime

package/src/helpers/Utils/Date.test.js

@@ -79,6 +79,243 @@ describe('formatDate helper', () => {
       }),
     ).toBe('J 03, 2022');
   });
+
+  describe('moment-style format tokens', () => {
+    it('formats with "ll" token (short date)', () => {
+      expect(formatDate({ date, format: 'll' })).toBe('Jan 3, 2022');
+    });
+
+    it('formats with "lll" token (short date + time)', () => {
+      expect(formatDate({ date, format: 'lll' })).toBe('Jan 3, 2022, 7:26 PM');
+    });
+
+    it('formats with "LLLL" token (full date + time)', () => {
+      expect(formatDate({ date, format: 'LLLL' })).toBe(
+        'Monday, January 3, 2022 at 7:26 PM',
+      );
+    });
+
+    it('formats with "L" token (numeric short date)', () => {
+      expect(formatDate({ date, format: 'L' })).toBe('01/03/2022');
+    });
+
+    it('formats with "LT" token (time only)', () => {
+      expect(formatDate({ date, format: 'LT' })).toBe('7:26 PM');
+    });
+
+    it('moment token works with other locales', () => {
+      expect(formatDate({ date, format: 'll', locale: 'de' })).toBe(
+        '3. Jan. 2022',
+      );
+    });
+
+    it('unknown string format falls back to short_date_format', () => {
+      expect(formatDate({ date, format: 'unknown' })).toBe('1/3/2022');
+    });
+  });
+
+  describe('Italian locale (it)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'it' })).toBe('03/01/2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'it', includeTime: true })).toBe(
+        '03/01/22, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'it', long: true })).toBe(
+        'lunedì 3 gennaio 2022 alle ore 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'it' })).toBe(
+        '3 gen 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'it' })).toBe(
+        '3 gen 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'it' })).toBe(
+        'lunedì 3 gennaio 2022 alle ore 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'it' })).toBe(
+        '03/01/2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'it' })).toBe('19:26');
+    });
+  });
+
+  describe('German locale (de)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'de' })).toBe('3.1.2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'de', includeTime: true })).toBe(
+        '03.01.22, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'de', long: true })).toBe(
+        'Montag, 3. Januar 2022 um 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'de' })).toBe(
+        '3. Jan. 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'de' })).toBe(
+        '3. Jan. 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'de' })).toBe(
+        'Montag, 3. Januar 2022 um 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'de' })).toBe(
+        '03.01.2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'de' })).toBe('19:26');
+    });
+  });
+
+  describe('Brazilian Portuguese locale (pt-BR)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'pt-BR' })).toBe('03/01/2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'pt-BR', includeTime: true })).toBe(
+        '03/01/2022, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'pt-BR', long: true })).toBe(
+        'segunda-feira, 3 de janeiro de 2022 às 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'pt-BR' })).toBe(
+        '3 de jan. de 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'pt-BR' })).toBe(
+        '3 de jan. de 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'pt-BR' })).toBe(
+        'segunda-feira, 3 de janeiro de 2022 às 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'pt-BR' })).toBe(
+        '03/01/2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'pt-BR' })).toBe('19:26');
+    });
+  });
+
+  describe('Romanian locale (ro)', () => {
+    it('formats a basic date', () => {
+      expect(formatDate({ date, locale: 'ro' })).toBe('03.01.2022');
+    });
+
+    it('formats a date with time', () => {
+      expect(formatDate({ date, locale: 'ro', includeTime: true })).toBe(
+        '03.01.2022, 19:26',
+      );
+    });
+
+    it('formats a date as long', () => {
+      expect(formatDate({ date, locale: 'ro', long: true })).toBe(
+        'luni, 3 ianuarie 2022 la 19:26',
+      );
+    });
+
+    it('formats with "ll" token', () => {
+      expect(formatDate({ date, format: 'll', locale: 'ro' })).toBe(
+        '3 ian. 2022',
+      );
+    });
+
+    it('formats with "lll" token', () => {
+      expect(formatDate({ date, format: 'lll', locale: 'ro' })).toBe(
+        '3 ian. 2022, 19:26',
+      );
+    });
+
+    it('formats with "LLLL" token', () => {
+      expect(formatDate({ date, format: 'LLLL', locale: 'ro' })).toBe(
+        'luni, 3 ianuarie 2022 la 19:26',
+      );
+    });
+
+    it('formats with "L" token', () => {
+      expect(formatDate({ date, format: 'L', locale: 'ro' })).toBe(
+        '03.01.2022',
+      );
+    });
+
+    it('formats with "LT" token', () => {
+      expect(formatDate({ date, format: 'LT', locale: 'ro' })).toBe('19:26');
+    });
+  });
+
+  // moment vs Intl comparison
+  // This section documents known differences between the former moment.js output
+  // and our Intl-based formatDate implementation. Reference values are hardcoded
+  // from moment@2.29.4 to avoid a runtime dependency on the library we are removing.
+  //
+  // Tokens that match moment exactly: ll, L, LT (most locales), LLLL (pt-BR only)
+  //
+  // Known differences from moment@2.29.4:
+  //   - lll (all locales): Intl inserts a comma between date and time;
+  //     moment did not (e.g. "Jan 3, 2022, 7:26 PM" vs "Jan 3, 2022 7:26 PM")
+  //   - LLLL (en, it, de, ro): Intl inserts a locale-specific preposition before
+  //     the time; moment did not
+  //       en: "...at 7:26 PM"  vs "...7:26 PM"
+  //       it: "...alle ore 19:26" vs "...19:26"
+  //       de: "...um 19:26"      vs "...19:26"
+  //       ro: "...la 19:26"      vs "...19:26"
+  //   - ll/lll (pt-BR): Intl adds a period after abbreviated month ("jan.");
+  //     moment did not ("jan")
 });
 
 describe('formatRelativeDate helper', () => {

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;
+        }
+      }
+    }
+  }
+}