@plone/volto 18.35.0 → 18.36.0

package/src/components/theme/View/SummaryView.stories.jsx

@@ -0,0 +1,71 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import SummaryViewComponent from './SummaryView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlSummaryViewComponent = injectIntl(SummaryViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlSummaryViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  items: [
+    {
+      title: 'My item',
+      description: 'My item description',
+      url: '/item',
+      image: {
+        scales: {
+          thumb: {
+            download: 'file:///preview.jpg',
+          },
+        },
+      },
+      image_caption: 'My image caption',
+      '@type': 'News Item',
+    },
+  ],
+};
+export default {
+  title: 'Public components/View/SummaryView',
+  component: SummaryViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+
+  argTypes: {
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+    items: {
+      description: 'Content in the page',
+    },
+  },
+};

package/src/components/theme/View/TabularView.stories.jsx

@@ -0,0 +1,66 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import TabularViewComponent from './TabularView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlTabularViewComponent = injectIntl(TabularViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlTabularViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  items: [
+    {
+      title: 'My item 1',
+      description: 'My item description 1',
+      url: '/item1',
+    },
+    {
+      title: 'My item 2',
+      description: 'My item description 2',
+      url: '/item2',
+    },
+  ],
+};
+export default {
+  title: 'Public components/View/TabularView',
+  component: TabularViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+    items: {
+      description: 'Row items of the page',
+    },
+  },
+};

package/src/config/index.js

@@ -115,6 +115,7 @@ let config = {
     supportedLanguages: ['en'],
     defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE || 'en',
     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/src/server.jsx

@@ -243,7 +243,13 @@ server.get('/*', (req, res) => {
         : store.getState().content.data?.language?.token ||
           config.settings.defaultLanguage;
 
-      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
+      const isMultilingual = config.settings.isMultilingual;
+
+      if (
+        toBackendLang(initialLang) !== contentLang &&
+        !/\/\.well-known\/.*$/.test(location.pathname) &&
+        !(isMultilingual && location.pathname === '/')
+      ) {
         const newLang = toReactIntlLang(
           new locale.Locales(contentLang).best(supported).toString(),
         );

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

@@ -0,0 +1,33 @@
+.universal-focus-style() {
+  box-shadow: 0 0 0 2px @innerFocusShadow !important;
+  outline: 2px solid @outerFocusOutline !important;
+  outline-offset: 2px;
+}
+
+// Global focus styles for all elements that support :focus-visible
+// Exclude contenteditable elements (slate editors, rich text inputs) — focus is
+// already implied by the text cursor; an outline ring is noisy and confusing.
+:focus-visible:not([contenteditable]):not([data-slate-editor]) {
+  .universal-focus-style();
+}
+
+//inputs modifications
+input:focus-visible {
+  border-color: @outerFocusOutline !important;
+}
+
+// Semantic UI checkbox focus styles
+.ui.checkbox input:focus-visible ~ label::before {
+  .universal-focus-style();
+  outline-offset: 4px;
+}
+
+.ui.checkbox input:focus-visible ~ label::before {
+  transition: none !important;
+}
+
+// Skiplinks focus styles
+.skiplinks-wrapper a:focus-visible {
+  border: 2px solid @linkColor;
+  outline: 3px solid @linkColor;
+}

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

@@ -482,6 +482,7 @@ fieldset.invisible {
 }
 
 .file-widget-dropzone {
+  padding-bottom: 1rem;
   outline: none;
 }
 
@@ -698,4 +699,5 @@ img.responsive {
 @import 'views';
 @import 'toc';
 @import 'grid.less';
+@import 'focus.less';
 .loadUIOverrides();

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

@@ -12,9 +12,7 @@
       top: 10px;
       left: 10px;
       padding: 10px;
-      border: 2px solid @linkColor;
       background: #fff;
-      outline: 3px solid @linkColor;
     }
 
     &:hover {

package/theme/themes/pastanaga/globals/site.variables

@@ -363,3 +363,10 @@
 /*---  Dark Tones  ---*/
 
 /*---  Light Tones  ---*/
+
+/*-------------------
+    Focused Input
+--------------------*/
+
+@innerFocusShadow: #fff;
+@outerFocusOutline: #000;

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/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/QuerystringWidget.d.ts

@@ -13,10 +13,6 @@ export function objectSchema({ intl, isDisabled, value }: {
             title: any;
             widget: string;
         };
-        depth: {
-            title: any;
-            type: string;
-        };
         sort_on: {
             title: any;
             widget: 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

@@ -23,7 +23,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;
@@ -63,7 +63,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/View/EventView.stories.d.ts

@@ -0,0 +1,19 @@
+export const Default: any;
+export const EventViewAllProps: any;
+export const EventViewWithoutLinkToApiInTheText: any;
+declare namespace _default {
+    export let title: string;
+    export { EventViewComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        namespace end {
+            let control: string;
+        }
+        namespace start {
+            let control_1: string;
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+import EventViewComponent from './EventView';

package/types/components/theme/View/FileView.stories.d.ts

@@ -0,0 +1,18 @@
+export const Default: any;
+declare namespace _default {
+    export let title: string;
+    export { FileViewComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        export namespace title_1 {
+            let description: string;
+        }
+        export { title_1 as title };
+        export namespace filename {
+            let description_1: string;
+            export { description_1 as description };
+        }
+    }
+}
+export default _default;
+import FileViewComponent from './FileView';

package/types/components/theme/View/LinkView.stories.d.ts

@@ -0,0 +1,18 @@
+export const Default: any;
+declare namespace _default {
+    export let title: string;
+    export { LinkViewComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        export namespace title_1 {
+            let description: string;
+        }
+        export { title_1 as title };
+        export namespace remoteUrl {
+            let description_1: string;
+            export { description_1 as description };
+        }
+    }
+}
+export default _default;
+import LinkViewComponent from './LinkView';

package/types/components/theme/View/ListingView.stories.d.ts

@@ -0,0 +1,24 @@
+export const Default: any;
+declare namespace _default {
+    export let title: string;
+    export { ListingViewComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        export namespace items {
+            let control: string;
+            let description: string;
+        }
+        export namespace title_1 {
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export { title_1 as title };
+        export namespace description_2 {
+            let description_3: string;
+            export { description_3 as description };
+        }
+        export { description_2 as description };
+    }
+}
+export default _default;
+import ListingViewComponent from './ListingView';

package/types/components/theme/View/NewsItemView.stories.d.ts

@@ -0,0 +1,23 @@
+export const Default: any;
+declare namespace _default {
+    export let title: string;
+    export { NewsItemViewComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        export namespace title_1 {
+            let description: string;
+        }
+        export { title_1 as title };
+        export namespace description_1 {
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export { description_1 as description };
+        export namespace text {
+            let description_3: string;
+            export { description_3 as description };
+        }
+    }
+}
+export default _default;
+import NewsItemViewComponent from './NewsItemView';

package/types/components/theme/View/RenderBlocks.stories.d.ts

@@ -0,0 +1,23 @@
+export const Default: any;
+export const PathToBlocks: any;
+export const InvalidBlocks: any;
+declare namespace _default {
+    export let title: string;
+    export { RenderBlocksComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        namespace view {
+            let description: string;
+        }
+        namespace blocks {
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace blocks_layout {
+            let description_2: string;
+            export { description_2 as description };
+        }
+    }
+}
+export default _default;
+import RenderBlocksComponent from './RenderBlocks';

package/types/components/theme/View/SummaryView.stories.d.ts

@@ -0,0 +1,23 @@
+export const Default: any;
+declare namespace _default {
+    export let title: string;
+    export { SummaryViewComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        export namespace title_1 {
+            let description: string;
+        }
+        export { title_1 as title };
+        export namespace description_1 {
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export { description_1 as description };
+        export namespace items {
+            let description_3: string;
+            export { description_3 as description };
+        }
+    }
+}
+export default _default;
+import SummaryViewComponent from './SummaryView';

package/types/components/theme/View/TabularView.stories.d.ts

@@ -0,0 +1,23 @@
+export const Default: any;
+declare namespace _default {
+    export let title: string;
+    export { TabularViewComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        export namespace title_1 {
+            let description: string;
+        }
+        export { title_1 as title };
+        export namespace description_1 {
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export { description_1 as description };
+        export namespace items {
+            let description_3: string;
+            export { description_3 as description };
+        }
+    }
+}
+export default _default;
+import TabularViewComponent from './TabularView';

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";