@plone/volto 18.9.1 → 18.10.0

package/src/components/manage/Delete/Delete.jsx

@@ -101,6 +101,7 @@ const Delete = () => {
                 onClick={onSubmit}
               />
               <Button
+                type="button"
                 basic
                 circular
                 secondary

package/src/components/manage/Diff/Diff.jsx

@@ -249,6 +249,7 @@ class Diff extends Component {
                 ],
                 (view) => (
                   <Button
+                    type="button"
                     key={view.id}
                     value={view.id}
                     active={this.props.view === view.id}

package/src/components/manage/Edit/Edit.jsx

@@ -447,6 +447,7 @@ class Edit extends Component {
                     />
                   </Button>
                   <Button
+                    type="button"
                     className="cancel"
                     aria-label={this.props.intl.formatMessage(messages.cancel)}
                     onClick={() => this.onCancel()}

package/src/components/manage/Form/Form.jsx

@@ -1020,6 +1020,7 @@ class Form extends Component {
                   )}
                   {onCancel && (
                     <Button
+                      type="button"
                       basic
                       secondary
                       aria-label={this.props.intl.formatMessage(

package/src/components/manage/Form/ModalForm.jsx

@@ -308,6 +308,7 @@ class ModalForm extends Component {
           </Button>
           {onCancel && (
             <Button
+              type="button"
               basic
               circular
               secondary

package/src/components/manage/Form/UndoToolbar.jsx

@@ -39,6 +39,7 @@ const UndoToolbar = ({ state, onUndoRedo, maxUndoLevels, enableHotKeys }) => {
         dependencies={[canUndo, canRedo]}
       >
         <Button
+          type="button"
           className="undo"
           onClick={() => doUndo()}
           aria-label={intl.formatMessage(messages.undo)}
@@ -58,6 +59,7 @@ const UndoToolbar = ({ state, onUndoRedo, maxUndoLevels, enableHotKeys }) => {
         dependencies={[canUndo, canRedo]}
       >
         <Button
+          type="button"
           className="redo"
           onClick={() => doRedo()}
           aria-label={intl.formatMessage(messages.redo)}

package/src/components/manage/Sidebar/AlignBlock.jsx

@@ -59,6 +59,7 @@ const AlignBlock = ({
       {actions.map((action) => (
         <Button.Group key={action}>
           <Button
+            type="button"
             icon
             basic
             aria-label={intl.formatMessage(messages[action])}

package/src/components/manage/Sidebar/ObjectBrowserNav.jsx

@@ -164,6 +164,7 @@ const ObjectBrowserNav = ({
                   >
                     <Button.Group>
                       <Button
+                        type="button"
                         basic
                         icon
                         aria-label={`${intl.formatMessage(messages.browse)} ${

package/src/components/manage/Sidebar/Sidebar.jsx

@@ -113,6 +113,7 @@ const Sidebar = (props) => {
         style={size > 0 ? { width: size } : null}
       >
         <Button
+          type="button"
           aria-label={
             expanded
               ? intl.formatMessage(messages.shrinkSidebar)
@@ -126,6 +127,7 @@ const Sidebar = (props) => {
           onClick={onToggleExpanded}
         />
         <Button
+          type="button"
           className="full-size-sidenav-btn"
           onClick={onToggleFullSize}
           aria-label="full-screen-sidenav"

package/src/components/manage/TemplateChooser/TemplateChooser.jsx

@@ -11,6 +11,7 @@ const TemplateChooser = ({ templates, onSelectTemplate }) => {
           {templates(intl).map((template, index) => (
             <Grid.Column key={template.id}>
               <Button
+                type="button"
                 className="template-chooser-item"
                 onClick={() => onSelectTemplate(index)}
               >

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

@@ -31,6 +31,7 @@ const CheckboxWidget = (props) => {
     <FormFieldWrapper {...props} columns={1}>
       <div className="wrapper">
         <Checkbox
+          id={`field-${id}`}
           name={`field-${id}`}
           checked={value || false}
           disabled={isDisabled}

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

@@ -251,6 +251,7 @@ class SelectWidget extends Component {
             this.props.placeholder ??
             this.props.intl.formatMessage(messages.select)
           }
+          onBlur={() => this.props.onBlur(id, value)}
           onChange={(selectedOption) => {
             if (isMulti) {
               return onChange(

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.jsx

@@ -1,5 +1,6 @@
 import config from '@plone/volto/registry';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { flattenToAppURL, toPublicURL } from '@plone/volto/helpers/Url/Url';
 
 const AlternateHrefLangs = (props) => {
   const { content } = props;
@@ -16,7 +17,7 @@ const AlternateHrefLangs = (props) => {
               key={key}
               rel="alternate"
               hrefLang={item.language}
-              href={item['@id']}
+              href={toPublicURL(flattenToAppURL(item['@id']))}
             />
           );
         })}

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

@@ -35,16 +35,18 @@ describe('AlternateHrefLangs', () => {
     const helmetLinks = Helmet.peek().linkTags;
     expect(helmetLinks.length).toBe(0);
   });
+
   it('multilingual site, with some translations', () => {
+    config.settings.publicURL = 'https://plone.org';
     config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
 
     const content = {
-      '@id': '/en',
+      '@id': 'http://localhost:8080/Plone/en',
       language: { token: 'en', title: 'English' },
       '@components': {
         translations: {
-          items: [{ '@id': '/es', language: 'es' }],
+          items: [{ '@id': 'http://localhost:8080/Plone/es', language: 'es' }],
         },
       },
     };
@@ -71,17 +73,72 @@ describe('AlternateHrefLangs', () => {
 
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/es',
+      href: 'https://plone.org/es',
       hrefLang: 'es',
     });
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/en',
+      href: 'https://plone.org/en',
       hrefLang: 'en',
     });
   });
 
   it('multilingual site, with all available translations', () => {
+    config.settings.publicURL = 'https://plone.org';
+    config.settings.isMultilingual = true;
+    config.settings.supportedLanguages = ['en', 'es', 'eu'];
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const content = {
+      '@id': 'http://localhost:8080/Plone/en',
+      language: { token: 'en', title: 'English' },
+      '@components': {
+        translations: {
+          items: [
+            { '@id': 'http://localhost:8080/Plone/eu', language: 'eu' },
+            { '@id': 'http://localhost:8080/Plone/es', language: 'es' },
+          ],
+        },
+      },
+    };
+
+    // We need to force the component rendering
+    // to fill the Helmet
+    renderer.create(
+      <Provider store={store}>
+        <AlternateHrefLangs content={content} />
+      </Provider>,
+    );
+
+    const helmetLinks = Helmet.peek().linkTags;
+
+    // We expect having 3 links
+    expect(helmetLinks.length).toBe(3);
+
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: 'https://plone.org/eu',
+      hrefLang: 'eu',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: 'https://plone.org/es',
+      hrefLang: 'es',
+    });
+    expect(helmetLinks).toContainEqual({
+      rel: 'alternate',
+      href: 'https://plone.org/en',
+      hrefLang: 'en',
+    });
+  });
+
+  it('multilingual site, with all available translations - with server URL', () => {
+    config.settings.publicURL = 'https://plone.org';
     config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
     const store = mockStore({
@@ -92,13 +149,13 @@ describe('AlternateHrefLangs', () => {
     });
 
     const content = {
-      '@id': '/en',
+      '@id': 'http://localhost:8080/Plone/en',
       language: { token: 'en', title: 'English' },
       '@components': {
         translations: {
           items: [
-            { '@id': '/eu', language: 'eu' },
-            { '@id': '/es', language: 'es' },
+            { '@id': 'http://localhost:8080/Plone/eu', language: 'eu' },
+            { '@id': 'http://localhost:8080/Plone/es', language: 'es' },
           ],
         },
       },
@@ -119,17 +176,17 @@ describe('AlternateHrefLangs', () => {
 
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/eu',
+      href: 'https://plone.org/eu',
       hrefLang: 'eu',
     });
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/es',
+      href: 'https://plone.org/es',
       hrefLang: 'es',
     });
     expect(helmetLinks).toContainEqual({
       rel: 'alternate',
-      href: '/en',
+      href: 'https://plone.org/en',
       hrefLang: 'en',
     });
   });

package/src/components/theme/Image/Image.jsx

@@ -27,10 +27,10 @@ export default function Image({
   // TypeScript hints for editor autocomplete :)
   /** @type {React.ImgHTMLAttributes<HTMLImageElement>} */
   const attrs = {};
+  attrs.className = cx(className, { responsive }) || undefined;
 
   if (!item && src) {
     attrs.src = src;
-    attrs.className = cx(className, { responsive });
   } else {
     const isFromRealObject = !item.image_scales;
     const imageFieldWithDefault = imageField || item.image_field || 'image';
@@ -51,7 +51,6 @@ export default function Image({
     attrs.src = `${flattenToAppURL(basePath)}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
-    attrs.className = cx(className, { responsive });
 
     if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
       const sortedScales = Object.values({

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

@@ -155,3 +155,11 @@ test('renders an image component from a string src', () => {
   const json = component.toJSON();
   expect(json).toMatchSnapshot();
 });
+
+test('should not render empty class attribute in img tag', () => {
+  const component = renderer.create(
+    <Image src="/image.png" alt="no class attribute" />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/theme/View/RenderBlocks.jsx

@@ -26,7 +26,7 @@ const messages = defineMessages({
 });
 
 const RenderBlocks = (props) => {
-  const { content, location, metadata, blockWrapperTag } = props;
+  const { blockWrapperTag, content, location, isContainer, metadata } = props;
   const intl = useIntl();
   const blocksFieldname = getBlocksFieldname(content);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
@@ -72,6 +72,7 @@ const RenderBlocks = (props) => {
                 id={block}
                 block={block}
                 data={blockData}
+                isContainer={isContainer}
               >
                 <Block
                   id={block}

package/src/config/index.js

@@ -113,7 +113,7 @@ let config = {
     defaultPageSize: 25,
     isMultilingual: false,
     supportedLanguages: ['en'],
-    defaultLanguage: 'en',
+    defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE || 'en',
     navDepth: 1,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
     defaultBlockType: 'slate',
@@ -232,6 +232,16 @@ Object.entries(slots).forEach(([slotName, components]) => {
   });
 });
 
+// Make sure that process.env.SITE_DEFAULT_LANGUAGE is set in availableLanguages
+if (
+  process.env.SITE_DEFAULT_LANGUAGE &&
+  !config.settings.supportedLanguages.includes(
+    process.env.SITE_DEFAULT_LANGUAGE,
+  )
+) {
+  config.settings.supportedLanguages.push(process.env.SITE_DEFAULT_LANGUAGE);
+}
+
 registerValidators(ConfigRegistry);
 installDefaultComponents(ConfigRegistry);
 installDefaultWidgets(ConfigRegistry);

package/src/config/validation.ts

@@ -15,6 +15,7 @@ import {
   startEventDateRangeValidator,
   endEventDateRangeValidator,
   patternValidator,
+  defaultLanguageControlPanelValidator,
 } from '@plone/volto/helpers/FormValidation/validators';
 
 const registerValidators = (config: ConfigType) => {
@@ -150,6 +151,13 @@ const registerValidators = (config: ConfigType) => {
     dependencies: { behaviorName: 'plone.eventbasic', fieldName: 'end' },
     method: endEventDateRangeValidator,
   });
+
+  config.registerUtility({
+    name: 'default_language',
+    type: 'validator',
+    dependencies: { format: 'default_language' },
+    method: defaultLanguageControlPanelValidator,
+  });
 };
 
 export { registerValidators };

package/src/helpers/Blocks/Blocks.js

@@ -661,7 +661,11 @@ export const styleDataToStyleObject = (key, value, prefix = '') => {
  * @param {string} prefix The prefix (could be dragged from a recursive call, initially empty)
  * @return {Object} The style object ready to be passed as prop
  */
-export const buildStyleObjectFromData = (data = {}, prefix = '') => {
+export const buildStyleObjectFromData = (
+  data = {},
+  prefix = '',
+  container = {},
+) => {
   // style wrapper object has the form:
   // const styles = {
   //   color: 'red',
@@ -720,7 +724,7 @@ export const buildStyleObjectFromData = (data = {}, prefix = '') => {
     enhancers.forEach(({ method }) => {
       stylesFromObjectStyleEnhancers = {
         ...stylesFromObjectStyleEnhancers,
-        ...method(data),
+        ...method({ data, container }),
       };
     });
 

package/src/helpers/Blocks/Blocks.test.js

@@ -1151,7 +1151,7 @@ describe('Blocks', () => {
 
   describe('buildStyleObjectFromData', () => {
     beforeEach(() => {
-      function blockThemesEnhancer(data) {
+      function blockThemesEnhancer({ data }) {
         const blockConfig = config.blocks.blocksConfig[data['@type']];
         const blockStyleDefinitions =
           // We look up for the blockThemes in the block's data, then in the global config

package/src/helpers/FormValidation/FormValidation.jsx

@@ -133,6 +133,7 @@ const validateFieldsPerFieldset = (
 
   Object.entries(schema.properties).forEach(([fieldId, field]) => {
     let fieldData = formData[fieldId];
+    field = { ...field, ...field.widgetOptions?.frontendOptions?.widgetProps };
 
     // Validation per specific validator set (format property)
     const hasSpecificValidator =

package/src/helpers/FormValidation/FormValidation.test.js

@@ -257,7 +257,7 @@ describe('FormValidation', () => {
       });
     });
 
-    it('string - min lenght', () => {
+    it('string - min length', () => {
       let newSchema = {
         properties: {
           ...schema.properties,
@@ -283,7 +283,7 @@ describe('FormValidation', () => {
       });
     });
 
-    it('string - max lenght', () => {
+    it('string - max length', () => {
       let newSchema = {
         properties: {
           ...schema.properties,
@@ -570,7 +570,7 @@ describe('FormValidation', () => {
       });
     });
 
-    it('password - min lenght', () => {
+    it('password - min length', () => {
       let newSchema = {
         ...schema,
         properties: {
@@ -595,7 +595,41 @@ describe('FormValidation', () => {
       });
     });
 
-    it('password - max lenght', () => {
+    it('description - min length from server side', () => {
+      let newSchema = {
+        ...schema,
+        properties: {
+          ...schema.properties,
+          description: {
+            title: 'description',
+            type: 'string',
+            description: '',
+            widgetOptions: {
+              frontendOptions: {
+                widgetProps: {
+                  minLength: 8,
+                },
+              },
+            },
+          },
+        },
+        required: [],
+      };
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema: newSchema,
+          formData: {
+            username: 'test username',
+            description: 'asd',
+          },
+          formatMessage,
+        }),
+      ).toEqual({
+        description: [messages.minLength.defaultMessage],
+      });
+    });
+
+    it('password - max length', () => {
       let newSchema = {
         ...schema,
         properties: {
@@ -620,6 +654,40 @@ describe('FormValidation', () => {
       });
     });
 
+    it('description - max length from server side', () => {
+      let newSchema = {
+        ...schema,
+        properties: {
+          ...schema.properties,
+          description: {
+            title: 'description',
+            type: 'string',
+            description: '',
+            widgetOptions: {
+              frontendOptions: {
+                widgetProps: {
+                  maxLength: 8,
+                },
+              },
+            },
+          },
+        },
+        required: [],
+      };
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema: newSchema,
+          formData: {
+            username: 'test username',
+            description: 'asdasdasdasdasd',
+          },
+          formatMessage,
+        }),
+      ).toEqual({
+        description: [messages.maxLength.defaultMessage],
+      });
+    });
+
     it('array - maxItems', () => {
       let newSchema = {
         properties: {

package/src/helpers/FormValidation/validators.ts

@@ -203,3 +203,17 @@ export const minItemsValidator = ({
     ? formatMessage(messages.minItems, { minItems: field.minItems })
     : null;
 };
+
+export const defaultLanguageControlPanelValidator = ({
+  value,
+  formData,
+  formatMessage,
+}: Validator) => {
+  const isValid =
+    value &&
+    (formData.available_languages.find(
+      (lang: { token: string }) => lang.token === value,
+    ) ||
+      formData.available_languages.includes(value));
+  return !isValid ? formatMessage(messages.defaultLanguage) : null;
+};

package/src/helpers/Html/Html.jsx

@@ -122,6 +122,9 @@ class Html extends Component {
                 ...(publicURL && {
                   publicURL,
                 }),
+                ...(process.env.SITE_DEFAULT_LANGUAGE && {
+                  defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE,
+                }),
               })};`,
             }}
           />

package/src/helpers/MessageLabels/MessageLabels.js

@@ -403,4 +403,9 @@ export const messages = defineMessages({
     defaultMessage:
       'The number of items must be greater than or equal to {minItems}',
   },
+  defaultLanguage: {
+    id: "The selected default language must be in the list of the field 'Available languages'",
+    defaultMessage:
+      "The selected default language must be in the list of the field 'Available languages'",
+  },
 });

package/src/start-client.jsx

@@ -58,6 +58,10 @@ export default function client() {
   if (window.env.RAZZLE_LEGACY_TRAVERSE) {
     config.settings.legacyTraverse = true;
   }
+  // Support for setting the default language from a server environment variable
+  if (window.env.defaultLanguage) {
+    config.settings.defaultLanguage = window.env.defaultLanguage;
+  }
 
   loadableReady(() => {
     hydrateRoot(

package/src/storybook.jsx

@@ -1490,6 +1490,7 @@ export const FormUndoWrapper = ({
             onClick={() => doUndo()}
             aria-label="Undo"
             disabled={!canUndo}
+            type="button"
           >
             Undo
           </Button>
@@ -1500,6 +1501,7 @@ export const FormUndoWrapper = ({
             onClick={() => doRedo()}
             aria-label="Redo"
             disabled={!canRedo}
+            type="button"
           >
             Redo
           </Button>

package/types/helpers/Blocks/Blocks.d.ts

@@ -187,7 +187,7 @@ export function styleToClassName(key: any, value: any, prefix?: string): any;
 export function buildStyleClassNamesFromData(obj?: {}, prefix?: string): any;
 export function buildStyleClassNamesExtenders({ block, content, data, classNames, }: any): any[];
 export function styleDataToStyleObject(key: any, value: any, prefix?: string): any[];
-export function buildStyleObjectFromData(data?: any, prefix?: string): any;
+export function buildStyleObjectFromData(data?: any, prefix?: string, container?: {}): any;
 export function getPreviousNextBlock({ content, block }: any): any[];
 export function getBlocksHierarchy(properties: any): any;
 export function findContainer(formData: object, { containerId }: {

package/types/helpers/FormValidation/validators.d.ts

@@ -26,4 +26,5 @@ export declare const endEventDateRangeValidator: ({ value, field, formData, form
 export declare const patternValidator: ({ value, field, formatMessage, }: Validator) => any;
 export declare const maxItemsValidator: ({ value, field, formatMessage, }: Validator) => any;
 export declare const minItemsValidator: ({ value, field, formatMessage, }: Validator) => any;
+export declare const defaultLanguageControlPanelValidator: ({ value, formData, formatMessage, }: Validator) => any;
 export {};

package/types/helpers/MessageLabels/MessageLabels.d.ts

@@ -585,4 +585,10 @@ export namespace messages {
         let defaultMessage_97: string;
         export { defaultMessage_97 as defaultMessage };
     }
+    namespace defaultLanguage {
+        let id_98: string;
+        export { id_98 as id };
+        let defaultMessage_98: string;
+        export { defaultMessage_98 as defaultMessage };
+    }
 }