@plone/volto 18.30.1 → 18.31.0

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.30.1",
+  "version": "18.31.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -241,9 +241,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
+    "@plone/volto-slate": "18.8.0",
     "@plone/registry": "2.6.0",
-    "@plone/scripts": "3.10.3",
-    "@plone/volto-slate": "18.8.0"
+    "@plone/scripts": "3.10.3"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

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

@@ -245,15 +245,17 @@ class ModalForm extends Component {
     const { schema, onCancel, description } = this.props;
     const currentFieldset = schema.fieldsets[this.state.currentTab];
 
-    const fields = map(currentFieldset.fields, (field) => ({
-      ...schema.properties[field],
-      id: field,
-      value: this.state.formData[field],
-      required: schema.required.indexOf(field) !== -1,
-      onChange: this.onChangeField,
-      onBlur: this.onBlurField,
-      onClick: this.onClickInput,
-    }));
+    const fields = currentFieldset
+      ? map(currentFieldset.fields, (field) => ({
+          ...schema.properties[field],
+          id: field,
+          value: this.state.formData[field],
+          required: schema.required.indexOf(field) !== -1,
+          onChange: this.onChangeField,
+          onBlur: this.onBlurField,
+          onClick: this.onClickInput,
+        }))
+      : [];
 
     const state_errors = keys(this.state.errors).length > 0;
     return (
@@ -288,7 +290,7 @@ class ModalForm extends Component {
               )}
               <div>{this.props.submitError}</div>
             </Message>
-            {schema.fieldsets.length > 1 && (
+            {schema.fieldsets?.length > 1 && (
               <Menu tabular stackable>
                 {map(schema.fieldsets, (item, index) => (
                   <Menu.Item

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

@@ -87,10 +87,35 @@ describe('ModalForm', () => {
       </Provider>
     );
     const { getByText } = render(jsx, {
-      contaner: document.body,
+      container: document.body,
     });
 
     const loadingMessage = getByText(/renaming items.../i);
     expect(loadingMessage).toBeInTheDocument();
   });
+  it('renders with empty fieldsets array', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ModalForm
+          schema={{
+            fieldsets: [],
+            properties: {},
+            required: [],
+          }}
+          onSubmit={() => {}}
+          onCancel={() => {}}
+          open={false}
+          title="Action without form"
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

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

@@ -84,6 +84,7 @@ const DatetimeWidgetComponent = (props) => {
     widget,
     noPastDates: propNoPastDates,
     isDisabled,
+    formData,
   } = props;
 
   const intl = useIntl();
@@ -106,12 +107,21 @@ const DatetimeWidgetComponent = (props) => {
     );
   }, [value, lang, moment]);
 
+  // If open_end is checked and this is the end field, don't render
+  if (id === 'end' && formData?.open_end) {
+    return null;
+  }
+
   const getInternalValue = () => {
     return parseDateTime(toBackendLang(lang), value, undefined, moment.default);
   };
 
   const getDateOnly = () => {
-    return dateOnly || widget === 'date';
+    return (
+      dateOnly ||
+      widget === 'date' ||
+      ((id === 'start' || id === 'end') && formData?.whole_day)
+    );
   };
 
   const onDateChange = (date) => {

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

@@ -2,12 +2,12 @@
  * FormFieldWrapper component.
  * @module components/manage/Widgets/FormFieldWrapper
  */
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react';
 import map from 'lodash/map';
 import cx from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import LanguageSVG from '@plone/volto/icons/language.svg';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
@@ -31,178 +31,156 @@ const messages = defineMessages({
   },
 });
 /**
- * FormFieldWrapper component class.
- * @class FormFieldWrapper
- * @extends Component
+ * FormFieldWrapper component.
+ * @function FormFieldWrapper
+ * @param {Object} props - Component props
+ * @returns {JSX.Element} Markup for the component.
  */
-class FormFieldWrapper extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    required: PropTypes.bool,
-    error: PropTypes.arrayOf(PropTypes.string),
-    wrapped: PropTypes.bool,
-    columns: PropTypes.number,
-    draggable: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    onEdit: PropTypes.func,
-    className: PropTypes.string,
-    onDelete: PropTypes.func,
-    intl: PropTypes.object,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    error: [],
-    wrapped: true,
-    columns: 2,
-    onDelete: null,
-    intl: null,
-    isDisabled: null,
-    draggable: null,
-  };
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      title,
-      description,
-      fieldSet,
-      required,
-      error,
-      wrapped,
-      columns,
-      draggable,
-      onEdit,
-      className,
-      isDisabled,
-      onDelete,
-      intl,
-      noForInFieldLabel,
-      multilingual_options,
-    } = this.props;
-
-    const languageIndependent = multilingual_options?.language_independent;
+const FormFieldWrapper = ({
+  id,
+  title,
+  description = null,
+  fieldSet,
+  required = false,
+  error = [],
+  wrapped = true,
+  columns = 2,
+  draggable = null,
+  onEdit,
+  className,
+  isDisabled = null,
+  onDelete = null,
+  noForInFieldLabel,
+  multilingual_options,
+  children,
+}) => {
+  const intl = useIntl();
+  const languageIndependent = multilingual_options?.language_independent;
 
-    const wdg = (
-      <>
-        {this.props.children}
+  const wdg = (
+    <>
+      {children}
 
-        {map(error, (message) => (
-          <Label key={message} basic color="red" className="form-error-label">
-            {message}
-          </Label>
-        ))}
-      </>
-    );
+      {map(error, (message) => (
+        <Label key={message} basic color="red" className="form-error-label">
+          {message}
+        </Label>
+      ))}
+    </>
+  );
 
-    return wrapped ? (
-      <Form.Field
-        inline
-        required={required}
-        error={error && error.length > 0}
-        className={cx(
-          description ? 'help' : '',
-          className,
-          `field-wrapper-${id}`,
-          languageIndependent ? 'language-independent-field' : null,
-        )}
-      >
-        <Grid>
-          <Grid.Row stretched>
-            {columns === 2 && (
-              <Grid.Column width="4">
-                <div className="wrapper">
-                  <label
-                    id={`fieldset-${fieldSet}-field-label-${id}`}
-                    htmlFor={noForInFieldLabel ? null : `field-${id}`}
-                  >
-                    {draggable && onEdit && (
-                      <i
-                        aria-hidden="true"
-                        className="grey bars icon drag handle"
+  return wrapped ? (
+    <Form.Field
+      inline
+      required={required}
+      error={error && error.length > 0}
+      className={cx(
+        description ? 'help' : '',
+        className,
+        `field-wrapper-${id}`,
+        languageIndependent ? 'language-independent-field' : null,
+      )}
+    >
+      <Grid>
+        <Grid.Row stretched>
+          {columns === 2 && (
+            <Grid.Column width="4">
+              <div className="wrapper">
+                <label
+                  id={`fieldset-${fieldSet}-field-label-${id}`}
+                  htmlFor={noForInFieldLabel ? null : `field-${id}`}
+                >
+                  {draggable && onEdit && (
+                    <i
+                      aria-hidden="true"
+                      className="grey bars icon drag handle"
+                    />
+                  )}
+                  {title}
+                  {languageIndependent && (
+                    <div className="languageIndependent-icon">
+                      <Icon
+                        title={intl.formatMessage(
+                          messages.language_independent_icon_title,
+                        )}
+                        name={LanguageSVG}
+                        size="24px"
+                        color="#555"
                       />
-                    )}
-                    {title}
-                    {languageIndependent && (
-                      <div className="languageIndependent-icon">
-                        <Icon
-                          title={intl.formatMessage(
-                            messages.language_independent_icon_title,
-                          )}
-                          name={LanguageSVG}
-                          size="24px"
-                          color="#555"
-                        />
-                      </div>
-                    )}
-                  </label>
-                </div>
-              </Grid.Column>
+                    </div>
+                  )}
+                </label>
+              </div>
+            </Grid.Column>
+          )}
+          <Grid.Column width={columns === 2 ? 8 : 12}>
+            {onEdit && !isDisabled && (
+              <div className="toolbar" style={{ zIndex: '2' }}>
+                <button
+                  aria-label={intl.formatMessage(messages.edit)}
+                  className="item ui noborder button"
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    onEdit(id);
+                  }}
+                >
+                  <IconOld name="write square" size="large" color="blue" />
+                </button>
+                <button
+                  aria-label={intl.formatMessage(messages.delete)}
+                  className="item ui noborder button"
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    onDelete(id);
+                  }}
+                >
+                  <IconOld name="close" size="large" color="red" />
+                </button>
+              </div>
             )}
-            <Grid.Column width={columns === 2 ? 8 : 12}>
-              {onEdit && !isDisabled && (
-                <div className="toolbar" style={{ zIndex: '2' }}>
-                  <button
-                    aria-label={intl.formatMessage(messages.edit)}
-                    className="item ui noborder button"
-                    onClick={(evt) => {
-                      evt.preventDefault();
-                      onEdit(id);
-                    }}
-                  >
-                    <IconOld name="write square" size="large" color="blue" />
-                  </button>
-                  <button
-                    aria-label={intl.formatMessage(messages.delete)}
-                    className="item ui noborder button"
-                    onClick={(evt) => {
-                      evt.preventDefault();
-                      onDelete(id);
-                    }}
-                  >
-                    <IconOld name="close" size="large" color="red" />
-                  </button>
-                </div>
-              )}
-              {wdg}
+            {wdg}
+          </Grid.Column>
+        </Grid.Row>
+        {description && (
+          <Grid.Row stretched>
+            <Grid.Column stretched width="12">
+              <p className="help">
+                {multilingual_options
+                  ? `${intl.formatMessage(messages.language_independent)} `
+                  : null}
+                {description}
+              </p>
             </Grid.Column>
           </Grid.Row>
-          {description && (
-            <Grid.Row stretched>
-              <Grid.Column stretched width="12">
-                <p className="help">
-                  {this.props.multilingual_options
-                    ? `${intl.formatMessage(messages.language_independent)} `
-                    : null}
-                  {description}
-                </p>
-              </Grid.Column>
-            </Grid.Row>
-          )}
-        </Grid>
-      </Form.Field>
-    ) : (
-      <>{wdg}</>
-    );
-  }
-}
+        )}
+      </Grid>
+    </Form.Field>
+  ) : (
+    <>{wdg}</>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ */
+FormFieldWrapper.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  wrapped: PropTypes.bool,
+  columns: PropTypes.number,
+  draggable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onEdit: PropTypes.func,
+  className: PropTypes.string,
+  onDelete: PropTypes.func,
+  fieldSet: PropTypes.string,
+  noForInFieldLabel: PropTypes.bool,
+  multilingual_options: PropTypes.object,
+  children: PropTypes.node,
+};
 
-export default injectIntl(FormFieldWrapper);
+export default FormFieldWrapper;

package/src/middleware/api.js

@@ -305,8 +305,13 @@ const apiMiddlewareFactory =
         (error) => {
           // Make sure an error during hydration
           // (for example when serving an archived page)
-          // doesn't hide the SSR content.
-          if (isHydrating && !hasExistingError) {
+          // doesn't hide the SSR content. Only suppress GET_CONTENT failures;
+          // user-initiated actions (LOGIN, etc.) must always dispatch _FAIL so
+          // loaders stop and errors surface.
+          const shouldIgnoreHydrationError =
+            isHydrating && !hasExistingError && type === GET_CONTENT;
+
+          if (shouldIgnoreHydrationError) {
             isHydrating = false;
             return;
           }

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

@@ -1,5 +1,28 @@
-declare const _default: React.FC<import("react-intl").WithIntlProps<any>> & {
-    WrappedComponent: React.ComponentType<any>;
-};
-export default _default;
-import React from 'react';
+export default FormFieldWrapper;
+/**
+ * FormFieldWrapper component.
+ * @function FormFieldWrapper
+ * @param {Object} props - Component props
+ * @returns {JSX.Element} Markup for the component.
+ */
+declare function FormFieldWrapper({ id, title, description, fieldSet, required, error, wrapped, columns, draggable, onEdit, className, isDisabled, onDelete, noForInFieldLabel, multilingual_options, children, }: any): JSX.Element;
+declare namespace FormFieldWrapper {
+    namespace propTypes {
+        let id: any;
+        let title: any;
+        let description: any;
+        let required: any;
+        let error: any;
+        let wrapped: any;
+        let columns: any;
+        let draggable: any;
+        let isDisabled: any;
+        let onEdit: any;
+        let className: any;
+        let onDelete: any;
+        let fieldSet: any;
+        let noForInFieldLabel: any;
+        let multilingual_options: any;
+        let children: any;
+    }
+}

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

@@ -121,4 +121,4 @@ export declare const ColorPickerWidget: import("@loadable/component").LoadableCo
 export declare const DatetimeWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const TimeWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const RecurrenceWidget: import("@loadable/component").LoadableClassComponent<any>;
-export declare const FormFieldWrapper: import("@loadable/component").LoadableComponent<import("react-intl").WithIntlProps<any>>;
+export declare const FormFieldWrapper: import("@loadable/component").LoadableComponent<any>;