@plone/volto 16.22.1 → 16.23.0

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

@@ -1334,6 +1334,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.upload}
                                 className="upload"
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.upload,
+                                )}
                               >
                                 <Icon
                                   name={uploadSVG}
@@ -1358,6 +1361,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.rename}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.rename,
+                                )}
                               >
                                 <Icon
                                   name={renameSVG}
@@ -1380,6 +1386,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.workflow}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.state,
+                                )}
                               >
                                 <Icon
                                   name={semaphoreSVG}
@@ -1402,6 +1411,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.tags}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.tags,
+                                )}
                               >
                                 <Icon
                                   name={tagSVG}
@@ -1425,6 +1437,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.properties}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.properties,
+                                )}
                               >
                                 <Icon
                                   name={propertiesSVG}
@@ -1449,6 +1464,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.cut}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.cut,
+                                )}
                               >
                                 <Icon
                                   name={cutSVG}
@@ -1471,6 +1489,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.copy}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.copy,
+                                )}
                               >
                                 <Icon
                                   name={copySVG}
@@ -1494,6 +1515,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.paste}
                                 disabled={!this.props.action}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.paste,
+                                )}
                               >
                                 <Icon
                                   name={pasteSVG}
@@ -1517,6 +1541,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.delete}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.delete,
+                                )}
                               >
                                 <Icon
                                   name={deleteSVG}

package/src/components/manage/Controlpanels/Rules/AddRule.jsx

@@ -179,7 +179,7 @@ class AddRule extends Component {
     const { title, description, event, cascading, stop, enabled } = this.state;
     const triggeringEvents =
       this.props.events?.items && this.props.events?.items.length > 0
-        ? this.props.events?.items.map((event) => [event.title, event.token])
+        ? this.props.events?.items.map((event) => [event.token, event.title])
         : '';
 
     return (

package/src/components/manage/Controlpanels/Rules/EditRule.jsx

@@ -209,7 +209,7 @@ class EditRule extends Component {
 
     const triggeringEvents =
       this.props.events?.items && this.props.events?.items.length > 0
-        ? this.props.events?.items.map((event) => [event.title, event.token])
+        ? this.props.events?.items.map((event) => [event.token, event.title])
         : '';
 
     return (

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

@@ -17,6 +17,7 @@ import { useSelector } from 'react-redux';
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
 import { DefaultView } from '@plone/volto/components/';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
@@ -69,7 +70,7 @@ const DiffField = ({
             .replace('\u202F', ' '),
         );
         break;
-      case 'json':
+      case 'json': {
         const api = new Api();
         const history = createBrowserHistory();
         const store = configureStore(window.__data, history, api);
@@ -90,6 +91,29 @@ const DiffField = ({
           ),
         );
         break;
+      }
+      case 'slate': {
+        const api = new Api();
+        const history = createBrowserHistory();
+        const store = configureStore(window.__data, history, api);
+        parts = diffWords(
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(one)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(two)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+        );
+        break;
+      }
       case 'textarea':
       default:
         parts = diffWords(one, two);

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

@@ -5,7 +5,7 @@ import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
 const EnhancedBlockDataForm = withVariationSchemaEnhancer(InlineForm);
 
 export default function BlockDataForm(props) {
-  const { onChangeBlock, block } = props;
+  const { onChangeBlock, block, applySchemaEnhancers = true } = props;
 
   if (!onChangeBlock) {
     // eslint-disable-next-line no-console
@@ -19,8 +19,9 @@ export default function BlockDataForm(props) {
     [block, onChangeBlock],
   );
 
+  const Form = applySchemaEnhancers ? EnhancedBlockDataForm : InlineForm;
   return (
-    <EnhancedBlockDataForm
+    <Form
       {...props}
       onChangeFormData={onChangeBlock ? onChangeFormData : undefined}
     />

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

@@ -72,7 +72,7 @@ beforeAll(() => {
 });
 
 describe('BlockDataForm', () => {
-  it('should does not add variations to schema when unneeded', () => {
+  it('should not add variations to schema when unneeded', () => {
     const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
@@ -103,7 +103,7 @@ describe('BlockDataForm', () => {
     expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
   });
 
-  it('should does not add variations when only one variation', () => {
+  it('should not add variations when only one variation', () => {
     const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
@@ -164,4 +164,36 @@ describe('BlockDataForm', () => {
     // schema is cloned, not mutated in place
     expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
   });
+
+  it('should not add variations to schema when explicitly disabled', () => {
+    const WrappedBlockDataForm = withStateManagement(BlockDataForm);
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const testSchema = {
+      fieldsets: [{ title: 'Default', id: 'default', fields: [] }],
+      properties: {},
+      required: [],
+    };
+    const formData = {
+      '@type': 'testBlock',
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <WrappedBlockDataForm
+          formData={formData}
+          schema={testSchema}
+          onChangeField={(id, value) => {}}
+          applySchemaEnhancers={false}
+        />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+
+    // schema is cloned, not mutated in place
+    expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
+  });
 });

package/src/components/manage/Sharing/Sharing.jsx

@@ -246,9 +246,9 @@ class SharingComponent extends Component {
    * @returns {undefined}
    */
   onToggleInherit() {
-    this.setState({
-      inherit: !this.state.inherit,
-    });
+    this.setState((state) => ({
+      inherit: !state.inherit,
+    }));
   }
 
   /**
@@ -404,9 +404,15 @@ class SharingComponent extends Component {
               <Segment attached>
                 <Form.Field>
                   <Checkbox
-                    checked={this.state.inherit}
+                    id="inherit-permissions-checkbox"
+                    name="inherit-permissions-checkbox"
+                    defaultChecked={this.state.inherit}
                     onChange={this.onToggleInherit}
-                    label={this.props.intl.formatMessage(messages.inherit)}
+                    label={
+                      <label htmlFor="inherit-permissions-checkbox">
+                        {this.props.intl.formatMessage(messages.inherit)}
+                      </label>
+                    }
                   />
                 </Form.Field>
                 <p className="help">

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

@@ -325,7 +325,9 @@ class ArrayWidget extends Component {
               : this.props.choices
               ? [
                   ...choices,
-                  ...(this.props.noValueOption && !this.props.default
+                  ...(this.props.noValueOption &&
+                  (this.props.default === undefined ||
+                    this.props.default === null)
                     ? [
                         {
                           label: this.props.intl.formatMessage(

package/src/components/manage/Widgets/ArrayWidget.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { waitFor } from '@testing-library/react';
+import { waitFor, render, fireEvent } from '@testing-library/react';
 
 import ArrayWidget from './ArrayWidget';
 
@@ -41,3 +41,47 @@ test('renders an array widget component', async () => {
   await waitFor(() => {});
   expect(component.toJSON()).toMatchSnapshot();
 });
+
+test("No 'No value' option when default value is 0", async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const choices = [
+    ['0', 'None'],
+    ['1', 'One'],
+  ];
+
+  const value = {
+    value: '0',
+    label: 'None',
+  };
+
+  const _default = 0;
+
+  const { container } = render(
+    <Provider store={store}>
+      <ArrayWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        choices={choices}
+        default={_default}
+        value={value}
+        noValueOption={true}
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  fireEvent.mouseDown(
+    container.querySelector('.react-select__dropdown-indicator'),
+    { button: 0 },
+  );
+  expect(container).toMatchSnapshot();
+});

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

@@ -96,7 +96,7 @@ class FormFieldWrapper extends Component {
         {this.props.children}
 
         {map(error, (message) => (
-          <Label key={message} basic color="red" pointing>
+          <Label key={message} basic color="red" className="form-error-label">
             {message}
           </Label>
         ))}

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

@@ -167,6 +167,19 @@ class SelectWidget extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.vocabBaseUrl !== prevProps.vocabBaseUrl &&
+      (!this.props.choices || this.props.choices?.length === 0)
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
   /**
    * Render method.
    * @method render
@@ -190,7 +203,8 @@ class SelectWidget extends Component {
           })),
           // Only set "no-value" option if there's no default in the field
           // TODO: also if this.props.defaultValue?
-          ...(this.props.noValueOption && !this.props.default
+          ...(this.props.noValueOption &&
+          (this.props.default === undefined || this.props.default === null)
             ? [
                 {
                   label: this.props.intl.formatMessage(messages.no_value),

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { waitFor, render, screen } from '@testing-library/react';
+import { waitFor, render, screen, fireEvent } from '@testing-library/react';
 
 import SelectWidget from './SelectWidget';
 
@@ -43,3 +43,47 @@ test('renders a select widget component', async () => {
   await waitFor(() => screen.getByText('My field'));
   expect(container).toMatchSnapshot();
 });
+
+test("No 'No value' option when default value is 0", async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const choices = [
+    ['0', 'None'],
+    ['1', 'One'],
+  ];
+
+  const value = {
+    value: '0',
+    label: 'None',
+  };
+
+  const _default = 0;
+
+  const { container } = render(
+    <Provider store={store}>
+      <SelectWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        choices={choices}
+        default={_default}
+        value={value}
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByText('None'));
+  fireEvent.mouseDown(
+    container.querySelector('.react-select__dropdown-indicator'),
+    { button: 0 },
+  );
+  expect(container).toMatchSnapshot();
+});

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

@@ -22,6 +22,13 @@ const messages = defineMessages({
     defaultMessage: 'Sitemap',
   },
 });
+
+export function getSitemapPath(pathname = '', lang) {
+  const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
+  const path = prefix || lang || '';
+  return path;
+}
+
 /**
  * Sitemap class.
  * @class Sitemap
@@ -39,11 +46,13 @@ class Sitemap extends Component {
 
   componentDidMount() {
     const { settings } = config;
-    if (settings.isMultilingual) {
-      this.props.getNavigation(`${toBackendLang(this.props.lang)}`, 4);
-    } else {
-      this.props.getNavigation('', 4);
-    }
+
+    const lang = settings.isMultilingual
+      ? `${toBackendLang(this.props.lang)}`
+      : null;
+
+    const path = getSitemapPath(this.props.location.pathname, lang);
+    this.props.getNavigation(path, 4);
   }
 
   /**
@@ -105,15 +114,17 @@ export default compose(
     {
       key: 'navigation',
       promise: ({ location, store: { dispatch, getState } }) => {
+        if (!__SERVER__) return;
         const { settings } = config;
-        const lang = getState().intl.locale;
-        if (settings.isMultilingual) {
-          return (
-            __SERVER__ && dispatch(getNavigation(`${toBackendLang(lang)}`, 4))
-          );
-        } else {
-          return __SERVER__ && dispatch(getNavigation('', 4));
-        }
+
+        const path = getSitemapPath(
+          location.pathname,
+          settings.isMultilingual
+            ? toBackendLang(getState().intl.locale)
+            : null,
+        );
+
+        return dispatch(getNavigation(path, 4));
       },
     },
   ]),

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

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
-import { __test__ as Sitemap } from './Sitemap';
+import { __test__ as Sitemap, getSitemapPath } from './Sitemap';
 
 const mockStore = configureStore();
 
@@ -46,7 +46,7 @@ describe('Sitemap', () => {
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <Sitemap />
+          <Sitemap location={{ pathname: '/page-1' }} />
         </MemoryRouter>
       </Provider>,
     );
@@ -54,3 +54,24 @@ describe('Sitemap', () => {
     expect(json).toMatchSnapshot();
   });
 });
+
+describe('getSitemapPath', () => {
+  it('accepts empty path', () => {
+    expect(getSitemapPath('', null)).toBe('');
+  });
+
+  it('accepts a path', () => {
+    expect(getSitemapPath('/page-1/sitemap', null)).toBe('page-1');
+  });
+  it('accepts a path', () => {
+    expect(getSitemapPath('/page-1/sitemap', null)).toBe('page-1');
+  });
+
+  it('uses a language as default root', () => {
+    expect(getSitemapPath('/', 'de')).toBe('de');
+  });
+
+  it('accepts language-rooted paths', () => {
+    expect(getSitemapPath('/de/mission', 'de')).toBe('de/mission');
+  });
+});

package/styles/Vocab/Plone/accept.txt

@@ -1,10 +1,17 @@
+-{0,1}plone-{0,1}
+-{0,1}volto-{0,1}
 `plone.restapi`
 `plone.volto`
+[Aa]sync
+[Bb]ackend
+JavaScript
 npm
+nvm
+Pastanaga
 Plone
 Razzle
 RichText
+Sass
 Volto
+Vue
 Zope
-JavaScript
-NodeJS

package/styles/Vocab/Plone/reject.txt

@@ -1,5 +1,2 @@
-node
-nodejs
-javascript
-js
-Javascript
+[^.]js
+NodeJS

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

@@ -49,6 +49,52 @@
   }
 }
 
+.ui.form .fields.error .field textarea,
+.ui.form .fields.error .field select,
+.ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type='date'],
+.ui.form .fields.error .field input[type='datetime-local'],
+.ui.form .fields.error .field input[type='email'],
+.ui.form .fields.error .field input[type='number'],
+.ui.form .fields.error .field input[type='password'],
+.ui.form .fields.error .field input[type='search'],
+.ui.form .fields.error .field input[type='tel'],
+.ui.form .fields.error .field input[type='time'],
+.ui.form .fields.error .field input[type='text'],
+.ui.form .fields.error .field input[type='file'],
+.ui.form .fields.error .field input[type='url'],
+.ui.form .field.error textarea,
+.ui.form .field.error select,
+.ui.form .field.error input:not([type]),
+.ui.form .field.error input[type='date'],
+.ui.form .field.error input[type='datetime-local'],
+.ui.form .field.error input[type='email'],
+.ui.form .field.error input[type='number'],
+.ui.form .field.error input[type='password'],
+.ui.form .field.error input[type='search'],
+.ui.form .field.error input[type='tel'],
+.ui.form .field.error input[type='time'],
+.ui.form .field.error input[type='text'],
+.ui.form .field.error input[type='file'],
+.ui.form .field.error input[type='url'],
+.ui.form .field.error textarea:focus,
+.ui.form .field.error select:focus,
+.ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type='date']:focus,
+.ui.form .field.error input[type='datetime-local']:focus,
+.ui.form .field.error input[type='email']:focus,
+.ui.form .field.error input[type='number']:focus,
+.ui.form .field.error input[type='password']:focus,
+.ui.form .field.error input[type='search']:focus,
+.ui.form .field.error input[type='tel']:focus,
+.ui.form .field.error input[type='time']:focus,
+.ui.form .field.error input[type='text']:focus,
+.ui.form .field.error input[type='file']:focus,
+.ui.form .field.error input[type='url']:focus {
+  border-color: #d01157;
+  background: none;
+}
+
 .ui.form .field > .selection.dropdown {
   height: 60px;
 }

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

@@ -6,6 +6,12 @@
   font-weight: @inputFontWeight;
 }
 
+/* This aligns the height of the field name label to the other side in case
+of an error is present, it overrides a default from SemanticUI grid definitions. */
+.ui.grid > .stretched.row > .column > .wrapper {
+  flex-grow: 0;
+}
+
 .inline.field {
   .wrapper {
     display: flex;

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

@@ -6,3 +6,13 @@
     margin: 0em 0em 0em 0.75em;
   }
 }
+
+.ui.form {
+  .ui.basic.red.label.form-error-label {
+    padding-left: 0;
+    border: none;
+    margin-top: 0;
+    color: #d01157 !important;
+    font-weight: normal;
+  }
+}