@plone/volto 19.0.0-alpha.9 → 19.1.0

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

@@ -3,11 +3,10 @@
  * @module components/manage/Widgets/TokenWidget
  */
 
-import React, { Component } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useSelector, useDispatch } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
 import {
   getVocabFromHint,
   getVocabFromField,
@@ -48,192 +47,149 @@ const messages = defineMessages({
  * @class TokenWidget
  * @extends Component
  */
-class TokenWidget extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    required: PropTypes.bool,
-    error: PropTypes.arrayOf(PropTypes.string),
-    getVocabulary: PropTypes.func.isRequired,
-    choices: PropTypes.arrayOf(PropTypes.object),
-    vocabLoading: PropTypes.bool,
-    vocabLoaded: PropTypes.bool,
-    items: PropTypes.shape({
-      vocabulary: PropTypes.object,
-    }),
-    widgetOptions: PropTypes.shape({
-      vocabulary: PropTypes.object,
-    }),
-    value: PropTypes.arrayOf(PropTypes.string),
-    onChange: PropTypes.func.isRequired,
-    wrapped: PropTypes.bool,
-    placeholder: PropTypes.string,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    items: {
-      vocabulary: null,
-    },
-    widgetOptions: {
-      vocabulary: null,
-    },
-    error: [],
-    choices: [],
-    value: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Actions
-   */
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (!this.props.choices?.length) {
-      this.props.getVocabulary({
-        vocabNameOrURL: this.props.vocabBaseUrl,
-        size: -1,
-        subrequest: this.props.lang,
-      });
+const TokenWidget = (props) => {
+  const {
+    id,
+    onChange,
+    value,
+    placeholder,
+    reactSelectCreateable,
+    isDisabled,
+    fieldSet,
+  } = props;
+
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const vocabBaseUrl =
+    getVocabFromHint(props) ||
+    getVocabFromField(props) ||
+    getVocabFromItems(props);
+
+  const lang = useSelector((state) => state.intl.locale);
+
+  const vocabState = useSelector((state) => {
+    if (!vocabBaseUrl) return null;
+    return state.vocabularies?.[vocabBaseUrl]?.subrequests?.[lang];
+  });
+
+  const choices = useMemo(() => {
+    if (vocabState?.items) {
+      return vocabState.items.map((item) => ({
+        label: item.label || item.value,
+        value: item.value,
+      }));
     }
-  }
+    return [];
+  }, [vocabState]);
 
-  componentDidUpdate() {
+  const vocabLoading = vocabState?.loading;
+  const vocabLoaded = vocabState?.loaded;
+
+  useEffect(() => {
     if (
-      !this.props.choices?.length &&
-      this.props.vocabLoading === undefined &&
-      !this.props.vocabLoaded
+      !choices?.length &&
+      vocabLoading === undefined &&
+      !vocabLoaded &&
+      vocabBaseUrl
     ) {
-      this.props.getVocabulary({
-        vocabNameOrURL: this.props.vocabBaseUrl,
-        size: -1,
-        subrequest: this.props.lang,
-      });
+      dispatch(
+        getVocabulary({
+          vocabNameOrURL: vocabBaseUrl,
+          size: -1,
+          subrequest: lang,
+        }),
+      );
     }
-  }
-
-  /**
-   * Handle the field change, store it in the local state and back to simple
-   * array of tokens for correct serialization
-   * @method handleChange
-   * @param {array} selectedOption The selected options (already aggregated).
-   * @returns {undefined}
-   */
-  handleChange(selectedOption) {
-    this.props.onChange(
-      this.props.id,
+  }, [
+    choices?.length,
+    vocabLoading,
+    vocabLoaded,
+    vocabBaseUrl,
+    lang,
+    dispatch,
+  ]);
+
+  const handleChange = (selectedOption) => {
+    onChange(
+      id,
       selectedOption ? selectedOption.map((item) => item.label) : null,
     );
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const selectedOption = this.props.value
-      ? this.props.value.map((item) => ({ label: item, value: item }))
-      : [];
-
-    const defaultOptions = (this.props.choices || [])
-      .filter(
-        (item) => !selectedOption.find(({ label }) => label === item.label),
-      )
-      .map((item) => ({
-        label: item.label || item.value,
-        value: item.value,
-      }));
-    const CreatableSelect = this.props.reactSelectCreateable.default;
-
-    return (
-      <FormFieldWrapper {...this.props}>
-        <CreatableSelect
-          id={`field-${this.props.id}`}
-          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
-          key={this.props.id}
-          menuShouldScrollIntoView={false}
-          isDisabled={this.props.isDisabled}
-          className="react-select-container"
-          classNamePrefix="react-select"
-          defaultOptions={defaultOptions}
-          options={defaultOptions}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{
-            MultiValueContainer,
-            ClearIndicator,
-            DropdownIndicator,
-            Option,
-          }}
-          isMulti
-          value={selectedOption || []}
-          onChange={this.handleChange}
-          placeholder={
-            this.props.placeholder ??
-            this.props.intl.formatMessage(messages.select)
-          }
-          noOptionsMessage={() =>
-            this.props.intl.formatMessage(messages.no_options)
-          }
-        />
-      </FormFieldWrapper>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  injectLazyLibs(['reactSelectCreateable']),
-  connect(
-    (state, props) => {
-      const vocabBaseUrl =
-        getVocabFromHint(props) ||
-        getVocabFromField(props) ||
-        getVocabFromItems(props);
-
-      const vocabState =
-        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
-
-      if (vocabState) {
-        return {
-          choices: vocabState.items
-            ? vocabState.items.map((item) => ({
-                label: item.label || item.value,
-                value: item.value,
-              }))
-            : [],
-          vocabLoading: vocabState.loading,
-          vocabLoaded: vocabState.loaded,
-          vocabBaseUrl,
-          lang: state.intl.locale,
-        };
-      }
-      return { vocabBaseUrl, lang: state.intl.locale };
-    },
-    { getVocabulary },
-  ),
-)(TokenWidget);
+  };
+
+  const selectedOption = value
+    ? value.map((item) => ({ label: item, value: item }))
+    : [];
+
+  const defaultOptions = (choices || [])
+    .filter((item) => !selectedOption.find(({ label }) => label === item.label))
+    .map((item) => ({
+      label: item.label || item.value,
+      value: item.value,
+    }));
+  const CreatableSelect = reactSelectCreateable.default;
+
+  return (
+    <FormFieldWrapper {...props}>
+      <CreatableSelect
+        id={`field-${id}`}
+        aria-labelledby={`fieldset-${fieldSet}-field-label-${id}`}
+        key={id}
+        menuShouldScrollIntoView={false}
+        isDisabled={isDisabled}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        defaultOptions={defaultOptions}
+        options={defaultOptions}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{
+          MultiValueContainer,
+          ClearIndicator,
+          DropdownIndicator,
+          Option,
+        }}
+        isMulti
+        value={selectedOption || []}
+        onChange={handleChange}
+        placeholder={placeholder ?? intl.formatMessage(messages.select)}
+        noOptionsMessage={() => intl.formatMessage(messages.no_options)}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+TokenWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  choices: PropTypes.arrayOf(PropTypes.object),
+  items: PropTypes.shape({
+    vocabulary: PropTypes.object,
+  }),
+  widgetOptions: PropTypes.shape({
+    vocabulary: PropTypes.object,
+  }),
+  value: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func.isRequired,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+
+TokenWidget.defaultProps = {
+  description: null,
+  required: false,
+  items: {
+    vocabulary: null,
+  },
+  widgetOptions: {
+    vocabulary: null,
+  },
+  error: [],
+  choices: [],
+  value: null,
+};
+
+export default injectLazyLibs(['reactSelectCreateable'])(TokenWidget);

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

@@ -7,12 +7,7 @@ import TokenWidget from './TokenWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -2,7 +2,6 @@
  * UrlWidget component.
  * @module components/manage/Widgets/UrlWidget
  */
-
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
@@ -14,10 +13,10 @@ import {
   flattenToAppURL,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
+import { defineMessages, useIntl } from 'react-intl';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
-
 /** Widget to edit urls
  *
  * This is the default widget used for the `remoteUrl` field. You can also use
@@ -30,6 +29,24 @@ import navTreeSVG from '@plone/volto/icons/nav.svg';
  * }
  * ```
  */
+const messages = defineMessages({
+  urlMissing: {
+    id: 'URL is missing',
+    defaultMessage: 'URL is missing',
+  },
+  urlInvalid: {
+    id: 'URL is invalid',
+    defaultMessage: 'URL is invalid',
+  },
+  clearUrl: {
+    id: 'Clear URL',
+    defaultMessage: 'Clear URL',
+  },
+  openUrlBrowser: {
+    id: 'Open URL browser',
+    defaultMessage: 'Open URL browser',
+  },
+});
 export const UrlWidget = (props) => {
   const {
     id,
@@ -40,9 +57,10 @@ export const UrlWidget = (props) => {
     maxLength,
     placeholder,
     isDisabled,
+    required,
   } = props;
   const inputId = `field-${id}`;
-
+  const intl = useIntl();
   const [value, setValue] = useState(flattenToAppURL(props.value));
   const [isInvalid, setIsInvalid] = useState(false);
   /**
@@ -54,24 +72,20 @@ export const UrlWidget = (props) => {
   const clear = () => {
     setValue('');
     onChange(id, undefined);
+    setIsInvalid(false);
   };
-
   const onChangeValue = (_value) => {
     let newValue = _value;
     if (newValue?.length > 0) {
       if (isInvalid && URLUtils.isUrl(URLUtils.normalizeUrl(newValue))) {
         setIsInvalid(false);
       }
-
       if (isInternalURL(newValue)) {
         newValue = flattenToAppURL(newValue);
       }
     }
-
     setValue(newValue);
-
     newValue = isInternalURL(newValue) ? addAppURL(newValue) : newValue;
-
     if (!isInternalURL(newValue) && newValue.length > 0) {
       const checkedURL = URLUtils.checkAndNormalizeUrl(newValue);
       newValue = checkedURL.url;
@@ -79,10 +93,15 @@ export const UrlWidget = (props) => {
         setIsInvalid(true);
       }
     }
-
     onChange(id, newValue === '' ? undefined : newValue);
   };
-
+  // A11y: if the field is required and the user leaves it empty, we mark it as missing
+  const handleBlur = ({ target }) => {
+    if (required && (!target.value || target.value === '')) {
+      setIsInvalid(true);
+    }
+    onBlur(id, target.value === '' ? undefined : target.value);
+  };
   return (
     <FormFieldWrapper {...props} className="url wide">
       <div className="wrapper">
@@ -90,25 +109,38 @@ export const UrlWidget = (props) => {
           id={inputId}
           name={id}
           type="url"
+          required={required}
+          aria-required={required}
+          aria-invalid={isInvalid}
+          aria-errormessage={isInvalid ? `${inputId}-error` : undefined}
+          onBlur={handleBlur}
           value={value || ''}
           disabled={isDisabled}
           placeholder={placeholder}
           onChange={({ target }) => onChangeValue(target.value)}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
           onClick={() => onClick()}
           minLength={minLength || null}
           maxLength={maxLength || null}
           error={isInvalid}
         />
+        {isInvalid && (
+          <span
+            id={`${inputId}-error`}
+            role="alert"
+            className="visually-hidden"
+          >
+            {value?.length > 0
+              ? intl.formatMessage(messages.urlInvalid)
+              : intl.formatMessage(messages.urlMissing)}
+          </span>
+        )}
         {value?.length > 0 ? (
           <Button.Group>
             <Button
               type="button"
               basic
               className="cancel"
-              aria-label="clearUrlBrowser"
+              aria-label={intl.formatMessage(messages.clearUrl)}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -124,7 +156,7 @@ export const UrlWidget = (props) => {
               type="button"
               basic
               icon
-              aria-label="openUrlBrowser"
+              aria-label={intl.formatMessage(messages.openUrlBrowser)}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -145,7 +177,6 @@ export const UrlWidget = (props) => {
     </FormFieldWrapper>
   );
 };
-
 /**
  * Property types
  * @property {Object} propTypes Property types.
@@ -166,7 +197,6 @@ UrlWidget.propTypes = {
   openObjectBrowser: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
 };
-
 /**
  * Default properties.
  * @property {Object} defaultProps Default properties.
@@ -183,5 +213,4 @@ UrlWidget.defaultProps = {
   minLength: null,
   maxLength: null,
 };
-
 export default withObjectBrowser(UrlWidget);

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

@@ -4,17 +4,8 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import VocabularyTermsWidget from './VocabularyTermsWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Form');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/__mocks__/index.tsx

@@ -1,59 +1,41 @@
-/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
-Then, in the tests, we need to replace:
-
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
-
-with the following:
-
-vi.mock('@plone/volto/components/manage/Widgets');
-
-Finally, remove this comment.
-*/
-
-export const AlignWidget = jest.fn(() => <div id="AlignWidget" />);
-export const ButtonsWidget = jest.fn(() => <div id="ButtonsWidget" />);
-export const ArrayWidget = jest.fn(() => <div id="ArrayWidget" />);
-export const CheckboxWidget = jest.fn(() => <div id="CheckboxWidget" />);
-export const FileWidget = jest.fn(() => <div id="FileWidget" />);
-export const IdWidget = jest.fn(() => <div id="IdWidget" />);
-export const PasswordWidget = jest.fn(() => <div id="PasswordWidget" />);
-export const QueryWidget = jest.fn(() => <div id="QueryWidget" />);
-export const QuerySortOnWidget = jest.fn(() => <div id="QuerySortOnWidget" />);
-export const QuerystringWidget = jest.fn(() => <div id="QuerystringWidget" />);
-export const SchemaWidget = jest.fn(() => <div id="SchemaWidget" />);
-export const SelectWidget = jest.fn(() => <div id="SelectWidget" />);
-export const TextareaWidget = jest.fn(() => <div id="TextareaWidget" />);
-export const TextWidget = jest.fn(() => <div id="TextWidget" />);
-export const TokenWidget = jest.fn(() => <div id="TokenWidget" />);
-export const WysiwygWidget = jest.fn(() => <div id="WysiwygWidget" />);
-export const UrlWidget = jest.fn(() => <div id="UrlWidget" />);
-export const InternalUrlWidget = jest.fn(() => <div id="InternalUrlWidget" />);
-export const EmailWidget = jest.fn(() => <div id="EmailWidget" />);
-export const NumberWidget = jest.fn(() => <div id="NumberWidget" />);
-export const ImageSizeWidget = jest.fn(() => <div id="ImageSizeWidget" />);
-export const RegistryImageWidget = jest.fn(() => (
+export const AlignWidget = vi.fn(() => <div id="AlignWidget" />);
+export const ButtonsWidget = vi.fn(() => <div id="ButtonsWidget" />);
+export const ArrayWidget = vi.fn(() => <div id="ArrayWidget" />);
+export const CheckboxWidget = vi.fn(() => <div id="CheckboxWidget" />);
+export const FileWidget = vi.fn(() => <div id="FileWidget" />);
+export const IdWidget = vi.fn(() => <div id="IdWidget" />);
+export const PasswordWidget = vi.fn(() => <div id="PasswordWidget" />);
+export const QueryWidget = vi.fn(() => <div id="QueryWidget" />);
+export const QuerySortOnWidget = vi.fn(() => <div id="QuerySortOnWidget" />);
+export const QuerystringWidget = vi.fn(() => <div id="QuerystringWidget" />);
+export const SchemaWidget = vi.fn(() => <div id="SchemaWidget" />);
+export const SelectWidget = vi.fn(() => <div id="SelectWidget" />);
+export const TextareaWidget = vi.fn(() => <div id="TextareaWidget" />);
+export const TextWidget = vi.fn(() => <div id="TextWidget" />);
+export const TokenWidget = vi.fn(() => <div id="TokenWidget" />);
+export const WysiwygWidget = vi.fn(() => <div id="WysiwygWidget" />);
+export const UrlWidget = vi.fn(() => <div id="UrlWidget" />);
+export const InternalUrlWidget = vi.fn(() => <div id="InternalUrlWidget" />);
+export const EmailWidget = vi.fn(() => <div id="EmailWidget" />);
+export const NumberWidget = vi.fn(() => <div id="NumberWidget" />);
+export const ImageSizeWidget = vi.fn(() => <div id="ImageSizeWidget" />);
+export const RegistryImageWidget = vi.fn(() => (
   <div id="RegistryImageWidget" />
 ));
-export const ReferenceWidget = jest.fn(() => <div id="ReferenceWidget" />);
-export const ObjectBrowserWidget = jest.fn(() => (
+export const ReferenceWidget = vi.fn(() => <div id="ReferenceWidget" />);
+export const ObjectBrowserWidget = vi.fn(() => (
   <div id="ObjectBrowserWidget" />
 ));
-export const ObjectWidget = jest.fn(() => <div id="ObjectWidget" />);
-export const ObjectListWidget = jest.fn(() => <div id="ObjectListWidget" />);
-export const VocabularyTermsWidget = jest.fn(() => (
+export const ObjectWidget = vi.fn(() => <div id="ObjectWidget" />);
+export const ObjectListWidget = vi.fn(() => <div id="ObjectListWidget" />);
+export const VocabularyTermsWidget = vi.fn(() => (
   <div id="VocabularyTermsWidget" />
 ));
-export const SelectMetadataWidget = jest.fn(() => (
+export const SelectMetadataWidget = vi.fn(() => (
   <div id="SelectMetadataWidget" />
 ));
-export const SelectAutoComplete = jest.fn(() => (
-  <div id="SelectAutoComplete" />
-));
-export const ColorPickerWidget = jest.fn(() => <div id="ColorPickerWidget" />);
-export const DatetimeWidget = jest.fn(() => <div id="DatetimeWidget" />);
-export const RecurrenceWidget = jest.fn(() => <div id="RecurrenceWidget" />);
-export const FormFieldWrapper = jest.fn(() => <div id="FormFieldWrapper" />);
+export const SelectAutoComplete = vi.fn(() => <div id="SelectAutoComplete" />);
+export const ColorPickerWidget = vi.fn(() => <div id="ColorPickerWidget" />);
+export const DatetimeWidget = vi.fn(() => <div id="DatetimeWidget" />);
+export const RecurrenceWidget = vi.fn(() => <div id="RecurrenceWidget" />);
+export const FormFieldWrapper = vi.fn(() => <div id="FormFieldWrapper" />);