@plone/volto 18.0.0-alpha.8 → 18.0.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import SchemaWidgetFieldsetComponent from './SchemaWidgetFieldset';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
@@ -10,7 +10,7 @@ beforeAll(
 );
 
 test('renders a contents item component', () => {
-  const component = renderer.create(
+  const { container } = render(
     <DragDropContext onDragEnd={(x) => x}>
       <Droppable droppableId="tabs-schema-edit" direction="horizontal">
         {(provided, snapshot) => (
@@ -28,7 +28,7 @@ test('renders a contents item component', () => {
               onShowEditFieldset={(x) => x}
               onShowDeleteFieldset={(x) => x}
               onClick={(x) => x}
-              getItemStyle={(x) => x}
+              getItemStyle={(x) => ({})}
               isDraggable={false}
               isDisabled={false}
             />
@@ -38,6 +38,6 @@ test('renders a contents item component', () => {
       </Droppable>
     </DragDropContext>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

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

@@ -32,7 +32,7 @@ import {
   MenuList,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   select: {
@@ -277,12 +277,12 @@ export default compose(
       return props.items?.choices
         ? { choices: props.items.choices, lang: state.intl.locale }
         : vocabState
-        ? {
-            choices: vocabState,
-            vocabBaseUrl,
-            lang: state.intl.locale,
-          }
-        : { vocabBaseUrl, lang: state.intl.locale };
+          ? {
+              choices: vocabState,
+              vocabBaseUrl,
+              lang: state.intl.locale,
+            }
+          : { vocabBaseUrl, lang: state.intl.locale };
     },
     { getVocabulary, getVocabularyTokenTitle },
   ),

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

@@ -150,10 +150,10 @@ export const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isDisabled
-      ? '#b5b5b5'
-      : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#b5b5b5'
+        : state.isFocused
+          ? '#4a4a4a'
+          : 'inherit',
     ':active': {
       backgroundColor: null,
     },

package/src/components/manage/Widgets/SelectUtils.js

@@ -28,8 +28,8 @@ export function convertValueToVocabQuery(value) {
           isObject(v)
             ? v.value ?? v.token
             : isString(v) || isBoolean(v)
-            ? v
-            : null,
+              ? v
+              : null,
         )
         .filter((f) => f !== null),
     };

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

@@ -14,7 +14,7 @@ import {
   getVocabFromField,
   getVocabFromItems,
 } from '@plone/volto/helpers';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
 import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
 
@@ -224,6 +224,7 @@ class SelectWidget extends Component {
           id={`field-${id}`}
           key={choices}
           name={id}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${id}`}
           menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}

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

@@ -1,135 +1,104 @@
-/**
- * TextWidget component.
- * @module components/manage/Widgets/TextWidget
- */
-
-import React, { Component } from 'react';
+import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
 
-import { injectIntl } from 'react-intl';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
-/**
- * The simple text widget.
- *
- * It is the default fallback widget, so if no other widget is found based on
- * passed field properties, it will be used.
- */
-class TextWidget 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),
-    value: PropTypes.string,
-    focus: PropTypes.bool,
-    onChange: PropTypes.func,
-    onBlur: PropTypes.func,
-    onClick: PropTypes.func,
-    onEdit: PropTypes.func,
-    onDelete: PropTypes.func,
-    icon: PropTypes.shape({
-      xmlns: PropTypes.string,
-      viewBox: PropTypes.string,
-      content: PropTypes.string,
-    }),
-    iconAction: PropTypes.func,
-    minLength: PropTypes.number,
-    maxLength: PropTypes.number,
-    wrapped: PropTypes.bool,
-    placeholder: PropTypes.string,
-  };
+const TextWidget = (props) => {
+  const {
+    id,
+    value,
+    onChange,
+    onBlur,
+    onClick,
+    icon,
+    iconAction,
+    minLength,
+    maxLength,
+    placeholder,
+    isDisabled,
+    focus,
+  } = props;
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    error: [],
-    value: null,
-    onChange: () => {},
-    onBlur: () => {},
-    onClick: () => {},
-    onEdit: null,
-    onDelete: null,
-    focus: false,
-    icon: null,
-    iconAction: null,
-    minLength: null,
-    maxLength: null,
-  };
+  const ref = useRef();
 
-  /**
-   * Component did mount lifecycle method
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (this.props.focus) {
-      this.node.focus();
+  useEffect(() => {
+    if (focus) {
+      ref.current.focus();
     }
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <FormFieldWrapper {...props} className="text">
+      <Input
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        disabled={isDisabled}
+        icon={icon || null}
+        placeholder={placeholder}
+        onChange={({ target }) =>
+          onChange(id, target.value === '' ? undefined : target.value)
+        }
+        ref={ref}
+        onBlur={({ target }) =>
+          onBlur(id, target.value === '' ? undefined : target.value)
+        }
+        onClick={() => onClick()}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+      />
+      {icon && iconAction && (
+        <button className={`field-${id}-action-button`} onClick={iconAction}>
+          <Icon name={icon} size="18px" />
+        </button>
+      )}
+    </FormFieldWrapper>
+  );
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      value,
-      onChange,
-      onBlur,
-      onClick,
-      icon,
-      iconAction,
-      minLength,
-      maxLength,
-      placeholder,
-      isDisabled,
-    } = this.props;
+export default TextWidget;
 
-    return (
-      <FormFieldWrapper {...this.props} className="text">
-        <Input
-          id={`field-${id}`}
-          name={id}
-          value={value || ''}
-          disabled={isDisabled}
-          icon={icon || null}
-          placeholder={placeholder}
-          onChange={({ target }) =>
-            onChange(id, target.value === '' ? undefined : target.value)
-          }
-          ref={(node) => {
-            this.node = node;
-          }}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
-          onClick={() => onClick()}
-          minLength={minLength || null}
-          maxLength={maxLength || null}
-        />
-        {icon && iconAction && (
-          <button className={`field-${id}-action-button`} onClick={iconAction}>
-            <Icon name={icon} size="18px" />
-          </button>
-        )}
-      </FormFieldWrapper>
-    );
-  }
-}
+TextWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  focus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  icon: PropTypes.shape({
+    xmlns: PropTypes.string,
+    viewBox: PropTypes.string,
+    content: PropTypes.string,
+  }),
+  iconAction: PropTypes.func,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
 
-export default injectIntl(TextWidget);
+TextWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  onEdit: null,
+  onDelete: null,
+  focus: false,
+  icon: null,
+  iconAction: null,
+  minLength: null,
+  maxLength: null,
+};

package/src/components/manage/Widgets/TextWidget.stories.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import TextWidget from './TextWidget';
 import WidgetStory from './story';
 
@@ -6,7 +5,10 @@ export const Text = WidgetStory.bind({
   props: { id: 'text', title: 'Text' },
   widget: TextWidget,
 });
-
+Text.args = {
+  description: 'description',
+  placeholder: 'placeholder',
+};
 export default {
   title: 'Edit Widgets/Text',
   component: TextWidget,
@@ -17,5 +19,14 @@ export default {
       </div>
     ),
   ],
-  argTypes: {},
+  argTypes: {
+    description: {
+      control: 'text',
+      description: 'description',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'placeholder',
+    },
+  },
 };

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Label, TextArea } from 'semantic-ui-react';
 
 import { injectIntl } from 'react-intl';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 /**
  * TextareaWidget, a widget for multiple lines text

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

@@ -24,7 +24,7 @@ import {
   customSelectStyles,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const messages = defineMessages({
@@ -173,6 +173,7 @@ class TokenWidget extends Component {
       <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}

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

@@ -4,10 +4,10 @@
  */
 
 import React, { useState } from 'react';
-import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import {
   addAppURL,
   isInternalURL,
@@ -182,4 +182,4 @@ UrlWidget.defaultProps = {
   maxLength: null,
 };
 
-export default compose(withObjectBrowser)(UrlWidget);
+export default withObjectBrowser(UrlWidget);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -15,7 +15,7 @@ test('renders an url widget component', () => {
     },
   });
 
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <UrlWidget
         id="test-url"
@@ -27,6 +27,6 @@ test('renders an url widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

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

@@ -2,7 +2,7 @@
  * VocabularyTermsWidget
  * @module components/manage/Widgets/VocabularyTermsWidget
  * Widget for plone.schema.JSONField field meant for a SimpleVocabulary source
- * 
+ *
 
 VOCABULARY_SCHEMA = json.dumps(
     {
@@ -68,7 +68,7 @@ def TalkTypesVocabulary(context):
 
  * titles are editable
  * tokens are generated
- * 
+ *
  * Purpose: Use this widget for a controlpanel field
  * that acts as a source of a vocabulary for a zope.schema.Choice field.
  * Vocabulary terms should change over time only in title, not value,
@@ -90,12 +90,9 @@ import { v4 as uuid } from 'uuid';
 
 import { Button } from 'semantic-ui-react';
 
-import {
-  DragDropList,
-  FormFieldWrapper,
-  Icon,
-  ObjectWidget,
-} from '@plone/volto/components';
+import { DragDropList, Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 import { langmap } from '@plone/volto/helpers';
 
 import deleteSVG from '@plone/volto/icons/delete.svg';

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

@@ -1,11 +1,13 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
 import VocabularyTermsWidget from './VocabularyTermsWidget';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
+jest.mock('@plone/volto/components/manage/Form');
+
 beforeAll(
   async () =>
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
@@ -55,7 +57,7 @@ test('renders a dictionary widget component', () => {
       },
     ],
   };
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <VocabularyTermsWidget
         id="test-dict"
@@ -68,6 +70,6 @@ test('renders a dictionary widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });