@plone/volto 18.0.0-alpha.32 → 18.0.0-alpha.33

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

@@ -3,14 +3,13 @@
  * @module components/manage/Widgets/IdWidget
  */
 
-import React, { Component } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Input } from 'semantic-ui-react';
 import { compact, concat, keys, map, union, uniq } from 'lodash';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import config from '@plone/volto/registry';
@@ -28,222 +27,158 @@ const messages = defineMessages({
   },
 });
 
-/**
- * The id widget.
- *
- * This is the id widget to handle for example the short name field.
- */
-class IdWidget 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,
-  };
-
-  /**
-   * 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,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Actions
-   */
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: [],
-      reservedIds: compact(
-        uniq(
-          union(
-            config.settings.reservedIds,
-            map(config.settings.nonContentRoutes, (route) =>
-              String(route).replace(/[^a-z-]/g, ''),
-            ),
+const IdWidget = (props) => {
+  const {
+    id,
+    onClick,
+    icon,
+    iconAction,
+    minLength,
+    maxLength,
+    onBlur,
+    value,
+    focus,
+    isDisabled,
+    placeholder,
+    onChange,
+  } = props;
+
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const ref = useRef();
+
+  const indexes = useSelector((state) => keys(state.querystring.indexes));
+
+  const [errors, setError] = useState([]);
+  const [reservedIds] = useState(
+    compact(
+      uniq(
+        union(
+          config.settings.reservedIds,
+          map(config.settings.nonContentRoutes, (route) =>
+            String(route).replace(/[^a-z-]/g, ''),
           ),
         ),
       ),
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.fieldValidation = this.fieldValidation.bind(this);
-  }
-
-  /**
-   * Component did mount lifecycle method
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (this.props.focus) {
-      this.node.focus();
-    }
-    this.props.getQuerystring();
-    this.fieldValidation(this.props.value);
-  }
-
-  /**
-   * Field validation.
-   * @method fieldValidation
-   * @param {string} value New value
-   * @returns {undefined}
-   */
-  fieldValidation(value) {
+    ),
+  );
+  const fieldValidation = (values) => {
     const error = [];
 
     // Check reserved id's
-    if (this.state.reservedIds.indexOf(value) !== -1) {
-      error.push(this.props.intl.formatMessage(messages.reservedId));
+    if (reservedIds.indexOf(values) !== -1) {
+      error.push(intl.formatMessage(messages.reservedId));
     }
 
     // Check invalid characters
     if (
       // eslint-disable-next-line no-control-regex
       !/^(?!.*\\)(?!\+\+)(?!@@)(?!.*request)(?!.*contributors)(?!aq_)(?!.*__)(?!_)(?!((^|\/)\.\.?($|\/)|^"\s*"$))(?!.*[A-Z])(?:(?![\r\n<>/?&#\x00-\x1F\x7F])['\x00-\x7F\u0080-\uFFFF. _])*$/.test(
-        value,
+        values,
       )
     ) {
-      error.push(this.props.intl.formatMessage(messages.invalidCharacters));
+      error.push(intl.formatMessage(messages.invalidCharacters));
     }
 
     // Check indexes
-    if (this.props.indexes.indexOf(value) !== -1) {
-      error.push(this.props.intl.formatMessage(messages.reservedId));
+    if (indexes.indexOf(values) !== -1) {
+      error.push(intl.formatMessage(messages.reservedId));
     }
 
-    this.setState({ error });
-  }
-
-  /**
-   * Handle the field change.
-   * @method handleChange
-   * @param {Object} event Event object
-   * @returns {undefined}
-   */
-  handleChange({ target }) {
-    this.fieldValidation(target.value);
-    this.props.onChange(
-      this.props.id,
-      target.value === '' ? undefined : target.value,
-    );
-  }
-
-  /**
-   * Handle the field blur.
-   * @method handleBlur
-   * @param {Object} event Event object
-   * @returns {undefined}
-   */
-  handleBlur({ target }) {
-    this.fieldValidation(target.value);
-    this.props.onBlur(
-      this.props.id,
-      target.value === '' ? undefined : target.value,
-    );
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      value,
-      onClick,
-      icon,
-      iconAction,
-      minLength,
-      maxLength,
-      placeholder,
-    } = this.props;
-
-    const props = {
-      ...this.props,
-      error: concat(this.props.error, this.state.error),
-    };
-
-    return (
-      <FormFieldWrapper {...props} className="text">
-        <Input
-          id={`field-${id}`}
-          name={id}
-          value={value || ''}
-          disabled={this.props.isDisabled}
-          icon={icon || null}
-          placeholder={placeholder}
-          onChange={this.handleChange}
-          onBlur={this.handleBlur}
-          onClick={() => onClick()}
-          ref={(node) => {
-            this.node = node;
-          }}
-          minLength={minLength || null}
-          maxLength={maxLength || null}
-        />
-        {icon && iconAction && (
-          <button className={`field-${id}-action-button`} onClick={iconAction}>
-            <Icon name={icon} size="18px" />
-          </button>
-        )}
-      </FormFieldWrapper>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      indexes: keys(state.querystring.indexes),
-    }),
-    {
-      getQuerystring,
+    setError(error);
+  };
+
+  useEffect(
+    () => {
+      if (focus) ref.current.focus();
+
+      dispatch(getQuerystring());
+      fieldValidation(value);
     },
-  ),
-)(IdWidget);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focus, value, dispatch],
+  );
+
+  const handleChange = ({ target }) => {
+    fieldValidation(target.value);
+    onChange(id, target.value === '' ? undefined : target.value);
+  };
+
+  const handleBlur = ({ target }) => {
+    fieldValidation(target.value);
+    onBlur(id, target.value === '' ? undefined : target.value);
+  };
+
+  props = {
+    ...props,
+    error: concat(props.error, errors),
+  };
+
+  return (
+    <FormFieldWrapper {...props} className="text">
+      <Input
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        disabled={isDisabled}
+        icon={icon || null}
+        placeholder={placeholder}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onClick={() => onClick()}
+        ref={ref}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+      />
+      {icon && iconAction && (
+        <button className={`field-${id}-action-button`} onClick={iconAction}>
+          <Icon name={icon} size="18px" />
+        </button>
+      )}
+    </FormFieldWrapper>
+  );
+};
+
+export default IdWidget;
+
+IdWidget.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,
+};
+
+IdWidget.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.jsx

@@ -1,136 +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 } 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/theme/App/App.jsx

@@ -151,6 +151,11 @@ export class App extends Component {
             [trim(join(split(this.props.pathname, '/'), ' section-'))]:
               this.props.pathname !== '/',
             siteroot: this.props.pathname === '/',
+            [`is-adding-contenttype-${decodeURIComponent(
+              this.props.location?.search?.replace('?type=', ''),
+            )
+              .replace(' ', '')
+              .toLowerCase()}`]: this.props.location?.search,
             'is-authenticated': !!this.props.token,
             'is-anonymous': !this.props.token,
             'cms-ui': isCmsUI,

package/src/components/theme/Footer/Footer.jsx

@@ -42,6 +42,7 @@ const Footer = ({ intl }) => {
       textAlign="center"
       id="footer"
       aria-label="Footer"
+      tabIndex="-1"
     >
       <Container>
         <Segment basic inverted color="grey" className="discreet">

package/src/components/theme/Navigation/Navigation.jsx

@@ -49,7 +49,7 @@ const Navigation = (props) => {
     setisMobileMenuOpen(false);
   };
   return (
-    <nav className="navigation" id="navigation" aria-label="Site">
+    <nav className="navigation" id="navigation" aria-label="Site" tabIndex="-1">
       {items?.length ? (
         <div className="hamburger-wrapper mobile tablet only">
           <button

package/src/components/theme/SlotRenderer/SlotRenderer.tsx

@@ -1,6 +1,5 @@
 import { useLocation } from 'react-router-dom';
 import config from '@plone/volto/registry';
-
 import type { Content } from '@plone/types';
 
 /*
@@ -17,11 +16,11 @@ const SlotRenderer = ({
   content: Content;
   navRoot?: Content;
 }) => {
-  const pathname = useLocation().pathname;
+  const location = useLocation();
 
   let slots = config.getSlot(name, {
     content,
-    pathname,
+    location: location as any, // Since we are using an older version of history, we need to cast it to any
     // This is to cover the use case while adding a new content and we don't have
     // have the navRoot information in the initial content. This will be
     // useful for SlotRenderers rendered in the `Add` route.
@@ -48,7 +47,7 @@ const SlotRenderer = ({
             <SlotComponent
               key={name}
               content={content}
-              pathname={pathname}
+              location={location}
               navRoot={navRoot}
             />
           );