@plone/volto 16.8.1 → 16.10.0

package/.changelog.draft

@@ -1,6 +1,18 @@
-## 16.8.1 (2023-01-18)
+## 16.10.0 (2023-02-06)
+
+### Feature
+
+- Option for opening /edit with the same vertical offset like the page in view mode before. @ksuess [#3662](https://github.com/plone/volto/issues/3662)
+- Add option to add an action button to the top of the toolbar and to add a menu button to the bottom of the toolbar. @ksuess [#4333](https://github.com/plone/volto/issues/4333)
+- Update to latest versions in the backend for testing and the convenience api folder @sneridagh [#4361](https://github.com/plone/volto/issues/4361)
+- Content Rules: Support server-provided schema for condition and action @ericof [#4368](https://github.com/plone/volto/issues/4368)
 
 ### Bugfix
 
-- Fix StyleWrapper extenders, the classNames were not being re-fed into the pipe @sneridagh [#4275](https://github.com/plone/volto/issues/4275)
+- Fix react-error-overlay resolution @sneridagh [#4360](https://github.com/plone/volto/issues/4360)
+
+### Documentation
+
+- Add documentation for copy, cut, and paste blocks in Volto. @MAX-786 [#3827](https://github.com/plone/volto/issues/3827)
+- Fixed Grammar error @SaiRev0 [#4272](https://github.com/plone/volto/issues/4272)
 

package/CHANGELOG.md

@@ -8,6 +8,48 @@
 
 <!-- towncrier release notes start -->
 
+## 16.10.0 (2023-02-06)
+
+### Feature
+
+- Option for opening /edit with the same vertical offset like the page in view mode before. @ksuess [#3662](https://github.com/plone/volto/issues/3662)
+- Add option to add an action button to the top of the toolbar and to add a menu button to the bottom of the toolbar. @ksuess [#4333](https://github.com/plone/volto/issues/4333)
+- Update to latest versions in the backend for testing and the convenience api folder @sneridagh [#4361](https://github.com/plone/volto/issues/4361)
+- Content Rules: Support server-provided schema for condition and action @ericof [#4368](https://github.com/plone/volto/issues/4368)
+
+### Bugfix
+
+- Fix react-error-overlay resolution @sneridagh [#4360](https://github.com/plone/volto/issues/4360)
+
+### Documentation
+
+- Add documentation for copy, cut, and paste blocks in Volto. @MAX-786 [#3827](https://github.com/plone/volto/issues/3827)
+- Fixed Grammar error @SaiRev0 [#4272](https://github.com/plone/volto/issues/4272)
+
+
+## 16.9.0 (2023-01-27)
+
+### Feature
+
+- Enable scrolling to ids via hashes in internal links @jackahl [#4165](https://github.com/plone/volto/issues/4165)
+- Read listing block schema from configuration registry @pnicolli [#4231](https://github.com/plone/volto/issues/4231)
+- Add displayName when registering a component @sneridagh [#4282](https://github.com/plone/volto/issues/4282)
+- Support for all default expanders (breadcrumbs, navigation, actions, types) in actions/reducers. Conditional loading of actions if the expanders are present. @sneridagh [#4285](https://github.com/plone/volto/issues/4285)
+- Add `addNewBlock` Cypress support command @sneridagh [#4313](https://github.com/plone/volto/issues/4313)
+
+### Bugfix
+
+- Fixed maxLength validation for string type fields @pnicolli [#4189](https://github.com/plone/volto/issues/4189)
+- bugfix : add pathname as required proptype in Blocks/Edit @akshatgarg12 [#4194](https://github.com/plone/volto/issues/4194)
+- (Fix) Select Widgets scrolls the page when the options are not visible @dobri1408 [#4223](https://github.com/plone/volto/issues/4223)
+- Updated volto-slate to check for slateSettings before falling back to config @danalvrz [#4311](https://github.com/plone/volto/issues/4311)
+- Fix bug where label of search facet wasn't translated when the content object is being translated @robgietema [#4306](https://github.com/plone/volto/issues/4306)
+
+### Internal
+
+- Updated 4 Dependencies @SaiRev0 [#4104](https://github.com/plone/volto/issues/4104)
+
+
 ## 16.8.1 (2023-01-18)
 
 ### Bugfix

package/cypress/support/commands.js

@@ -806,6 +806,12 @@ function createHtmlPasteEvent(htmlContent) {
   );
 }
 
+Cypress.Commands.add('addNewBlock', (blockName, createNewSlate = false) => {
+  let block;
+  block = cy.getSlate(createNewSlate).type(`/${blockName}{enter}`);
+  return block;
+});
+
 Cypress.Commands.add('navigate', (route = '') => {
   return cy.window().its('appHistory').invoke('push', route);
 });

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.8.1",
+  "version": "16.10.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -281,7 +281,7 @@
     "eslint-plugin-prettier": "3.1.3",
     "eslint-plugin-react": "7.20.0",
     "eslint-plugin-react-hooks": "4.0.2",
-    "express": "4.17.1",
+    "express": "4.17.3",
     "filesize": "6",
     "glob": "7.1.6",
     "hamburgers": "1.1.3",
@@ -349,6 +349,7 @@
     "react-router": "5.2.0",
     "react-router-config": "5.1.1",
     "react-router-dom": "5.2.0",
+    "react-router-hash-link": "2.4.3",
     "react-select": "4.3.1",
     "react-select-async-paginate": "0.5.3",
     "react-share": "2.3.1",
@@ -421,6 +422,7 @@
   "resolutions": {
     "clean-css": "5.3.1",
     "http-proxy": "^1.18.1",
+    "react-error-overlay": "6.0.9",
     "ua-parser-js": "0.7.28"
   },
   "volta": {

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "16.8.1",
+  "version": "16.10.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/packages/volto-slate/src/blocks/Text/DetachedTextBlockEditor.jsx

@@ -51,6 +51,7 @@ export const DetachedTextBlockEditor = (props) => {
         value={value}
         block={block /* is this needed? */}
         debug={DEBUG}
+        slateSettings={props.slateSettings}
         onFocus={() => {
           if (!selected) {
             onSelectBlock(block);

package/packages/volto-slate/src/editor/SlateEditor.jsx

@@ -262,7 +262,11 @@ class SlateEditor extends Component {
           >
             {selected ? (
               <>
-                <InlineToolbar editor={editor} className={className} />
+                <InlineToolbar
+                  editor={editor}
+                  className={className}
+                  slateSettings={this.props.slateSettings}
+                />
                 {Object.keys(slateSettings.elementToolbarButtons).map(
                   (t, i) => {
                     return (

package/packages/volto-slate/src/editor/ui/InlineToolbar.jsx

@@ -17,7 +17,8 @@ const InlineToolbar = (props) => {
     setShowExpandedToolbar,
   } = props;
 
-  const { slate } = config.settings;
+  const slate = props.slateSettings || config.settings.slate;
+
   const [showMainToolbar, setShowMainToolbar] = React.useState(
     !!(editor.selection && hasRangeSelection(editor)),
   );
@@ -58,6 +59,7 @@ const InlineToolbar = (props) => {
         showExpandedToolbar={showExpandedToolbar}
         setShowExpandedToolbar={setShowExpandedToolbar}
         show={showMainToolbar}
+        slateSettings={slate}
       />
       <SlateContextToolbar
         editor={editor}

package/packages/volto-slate/src/editor/ui/SlateToolbar.jsx

@@ -26,7 +26,9 @@ const SlateToolbar = (props) => {
     enableExpando = false,
     show,
   } = props;
-  const { slate } = config.settings;
+
+  const slate = props.slateSettings || config.settings.slate;
+
   const { toolbarButtons, expandedToolbarButtons, buttons } = slate;
 
   function renderButton(name, index) {

package/src/components/manage/Blocks/Block/Edit.jsx

@@ -52,6 +52,7 @@ export class Edit extends Component {
     onMoveBlock: PropTypes.func.isRequired,
     onDeleteBlock: PropTypes.func.isRequired,
     editable: PropTypes.bool,
+    pathname: PropTypes.string.isRequired,
   };
 
   /**

package/src/components/manage/Blocks/Listing/ListingData.jsx

@@ -2,12 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
-import { schemaListing } from './schema';
+import config from '@plone/volto/registry';
 
 const ListingData = (props) => {
   const { data, block, onChangeBlock } = props;
   const intl = useIntl();
-  const schema = schemaListing({ ...props, intl });
+  const schema = config.blocks.blocksConfig.listing.blockSchema({
+    ...props,
+    intl,
+  });
 
   return (
     <BlockDataForm

package/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx

@@ -195,7 +195,7 @@ class SelectWidget extends Component {
           styles={customSelectStyles}
           theme={selectTheme}
           components={{ DropdownIndicator, Option }}
-          value={value}
+          value={{ value: value?.value, label: indexes[value?.value]?.title }}
           onChange={(data) => {
             let dataValue = [];
             if (Array.isArray(data)) {

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

@@ -339,6 +339,23 @@ const detectVocabulary = (type) => {
   }
 };
 
+const processSchema = (schema) => {
+  const properties = { ...schema.properties };
+  Object.keys(properties).forEach((key) => {
+    const value = properties[key];
+    const vocabId = value?.vocabulary?.['@id'];
+    if (vocabId?.includes('@sources')) {
+      value['widget'] = 'internal_url';
+      delete value['vocabulary'];
+    }
+  });
+  const newSchema = {
+    ...schema,
+    properties,
+  };
+  return newSchema;
+};
+
 const VariableModal = ({
   open,
   type,
@@ -371,17 +388,27 @@ const VariableModal = ({
   React.useEffect(() => {
     //reset input schema to rehydrate options
     setInputSchema('');
-    const vocabularyOptions =
-      vocabularyName &&
-      vocabularies &&
-      vocabularies[vocabularyName] &&
-      vocabularies[vocabularyName].items
-        ? vocabularies[vocabularyName].items.map((item, i) => {
-            return [item.value, item.label];
-          })
-        : [];
-    //set schema with the new options from vocabulary
-    setInputSchema(setSchema(value.title, vocabularyOptions));
+    // On creation, @schema is provided by value
+    // On update, @schema comes from formData
+    const rawSchema = value['@schema'] || formData['@schema'];
+    let schema;
+    if (rawSchema) {
+      schema = processSchema(rawSchema);
+    } else {
+      const vocabularyOptions =
+        vocabularyName &&
+        vocabularies &&
+        vocabularies[vocabularyName] &&
+        vocabularies[vocabularyName].items
+          ? vocabularies[vocabularyName].items.map((item, i) => {
+              return [item.value, item.label];
+            })
+          : [];
+      //set schema with the new options from vocabulary
+      schema = setSchema(value.title, vocabularyOptions);
+    }
+    setInputSchema(schema);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vocabularies, open, formData, value]);
 

package/src/components/manage/Edit/Edit.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { asyncConnect } from '@plone/volto/helpers';
+import { asyncConnect, hasApiExpander } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Button, Grid, Menu } from 'semantic-ui-react';
 import { Portal } from 'react-portal';
@@ -475,7 +475,10 @@ export default compose(
     {
       key: 'actions',
       promise: async ({ location, store: { dispatch } }) => {
-        await dispatch(listActions(getBaseUrl(location.pathname)));
+        // Do not trigger the actions action if the expander is present
+        if (!hasApiExpander('actions', getBaseUrl(location.pathname))) {
+          return await dispatch(listActions(getBaseUrl(location.pathname)));
+        }
       },
     },
     {

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

@@ -180,10 +180,11 @@ class Form extends Component {
       formData.hasOwnProperty(blocksLayoutFieldname) &&
       formData[blocksLayoutFieldname].items.length > 0
     ) {
-      selectedBlock = formData[blocksLayoutFieldname].items[0];
-
-      if (config.blocks?.initialBlocksFocus?.[this.props.type]) {
-        //Default selected is not the first block, but the one from config.
+      if (config.blocks?.initialBlocksFocus === null) {
+        selectedBlock = null;
+      } else if (this.props.type in config.blocks?.initialBlocksFocus) {
+        // Default selected is not the first block, but the one from config.
+        // TODO Select first block and not an arbitrary one.
         Object.keys(formData[blocksFieldname]).forEach((b_key) => {
           if (
             formData[blocksFieldname][b_key]['@type'] ===
@@ -192,8 +193,11 @@ class Form extends Component {
             selectedBlock = b_key;
           }
         });
+      } else {
+        selectedBlock = formData[blocksLayoutFieldname].items[0];
       }
     }
+
     this.state = {
       formData,
       initialFormData: cloneDeep(formData),

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -29,7 +29,12 @@ import {
   unlockContent,
 } from '@plone/volto/actions';
 import { Icon } from '@plone/volto/components';
-import { BodyClass, getBaseUrl, getCookieOptions } from '@plone/volto/helpers';
+import {
+  BodyClass,
+  getBaseUrl,
+  getCookieOptions,
+  hasApiExpander,
+} from '@plone/volto/helpers';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 
 import penSVG from '@plone/volto/icons/pen.svg';
@@ -104,7 +109,7 @@ const messages = defineMessages({
   },
 });
 
-const toolbarComponents = {
+let toolbarComponents = {
   personalTools: { component: PersonalTools, wrapper: null },
   more: { component: More, wrapper: null },
   types: { component: Types, wrapper: null, contentAsProps: true },
@@ -197,8 +202,20 @@ class Toolbar extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    this.props.listActions(getBaseUrl(this.props.pathname));
-    this.props.getTypes(getBaseUrl(this.props.pathname));
+    // Do not trigger the actions action if the expander is present
+    if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
+      this.props.listActions(getBaseUrl(this.props.pathname));
+    }
+    // Do not trigger the types action if the expander is present
+    if (!hasApiExpander('types', getBaseUrl(this.props.pathname))) {
+      this.props.getTypes(getBaseUrl(this.props.pathname));
+    }
+    toolbarComponents = {
+      ...(config.settings
+        ? config.settings.additionalToolbarComponents || {}
+        : {}),
+      ...toolbarComponents,
+    };
     this.props.setExpandedToolbar(this.state.expanded);
     document.addEventListener('mousedown', this.handleClickOutside, false);
   }
@@ -211,8 +228,14 @@ class Toolbar extends Component {
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.pathname !== this.props.pathname) {
-      this.props.listActions(getBaseUrl(nextProps.pathname));
-      this.props.getTypes(getBaseUrl(nextProps.pathname));
+      // Do not trigger the actions action if the expander is present
+      if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
+        this.props.listActions(getBaseUrl(nextProps.pathname));
+      }
+      // Do not trigger the types action if the expander is present
+      if (!hasApiExpander('types', getBaseUrl(nextProps.pathname))) {
+        this.props.getTypes(getBaseUrl(nextProps.pathname));
+      }
     }
 
     // Unlock
@@ -534,9 +557,13 @@ class Toolbar extends Component {
                     </button>
                   </>
                 )}
+                <Pluggable name="main.toolbar.top" />
               </div>
               <div className="toolbar-bottom">
-                <Pluggable name="main.toolbar.bottom" />
+                <Pluggable
+                  name="main.toolbar.bottom"
+                  params={{ onClickHandler: this.toggleMenu }}
+                />
                 {!this.props.hideDefaultViewButtons && (
                   <button
                     className="user"

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { HashLink as Link } from 'react-router-hash-link';
 import { useSelector } from 'react-redux';
 import {
   flattenToAppURL,
@@ -78,13 +78,13 @@ const UniversalLink = ({
   const checkedURL = URLUtils.checkAndNormalizeUrl(url);
 
   url = checkedURL.url;
-
   let tag = (
     <Link
       to={flattenToAppURL(url)}
       target={openLinkInNewTab ?? false ? '_blank' : null}
       title={title}
       className={className}
+      smooth={config.settings.hashLinkSmoothScroll}
       {...props}
     >
       {children}

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

@@ -307,6 +307,7 @@ class ArrayWidget extends Component {
           // react-sortable-hoc props:
           axis="xy"
           onSortEnd={this.onSortEnd}
+          menuShouldScrollIntoView={false}
           distance={4}
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}

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

@@ -210,6 +210,7 @@ class SelectWidget extends Component {
           id={`field-${id}`}
           key={choices}
           name={id}
+          menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}
           className="react-select-container"

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

@@ -174,6 +174,7 @@ class TokenWidget extends Component {
         <CreatableSelect
           id={`field-${this.props.id}`}
           key={this.props.id}
+          menuShouldScrollIntoView={false}
           isDisabled={this.props.isDisabled}
           className="react-select-container"
           classNamePrefix="react-select"

package/src/components/theme/App/App.jsx

@@ -32,7 +32,13 @@ import {
   AppExtras,
   SkipLinks,
 } from '@plone/volto/components';
-import { BodyClass, getBaseUrl, getView, isCmsUi } from '@plone/volto/helpers';
+import {
+  BodyClass,
+  getBaseUrl,
+  getView,
+  hasApiExpander,
+  isCmsUi,
+} from '@plone/volto/helpers';
 import {
   getBreadcrumbs,
   getContent,
@@ -257,8 +263,15 @@ export default compose(
   asyncConnect([
     {
       key: 'breadcrumbs',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ && dispatch(getBreadcrumbs(getBaseUrl(location.pathname))),
+      promise: ({ location, store: { dispatch } }) => {
+        // Do not trigger the breadcrumbs action if the expander is present
+        if (
+          __SERVER__ &&
+          !hasApiExpander('breadcrumbs', getBaseUrl(location.pathname))
+        ) {
+          return dispatch(getBreadcrumbs(getBaseUrl(location.pathname)));
+        }
+      },
     },
     {
       key: 'content',
@@ -267,19 +280,32 @@ export default compose(
     },
     {
       key: 'navigation',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ &&
-        dispatch(
-          getNavigation(
-            getBaseUrl(location.pathname),
-            config.settings.navDepth,
-          ),
-        ),
+      promise: ({ location, store: { dispatch } }) => {
+        // Do not trigger the navigation action if the expander is present
+        if (
+          __SERVER__ &&
+          !hasApiExpander('navigation', getBaseUrl(location.pathname))
+        ) {
+          return dispatch(
+            getNavigation(
+              getBaseUrl(location.pathname),
+              config.settings.navDepth,
+            ),
+          );
+        }
+      },
     },
     {
       key: 'types',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))),
+      promise: ({ location, store: { dispatch } }) => {
+        // Do not trigger the types action if the expander is present
+        if (
+          __SERVER__ &&
+          !hasApiExpander('types', getBaseUrl(location.pathname))
+        ) {
+          return dispatch(getTypes(getBaseUrl(location.pathname)));
+        }
+      },
     },
     {
       key: 'workflow',

package/src/components/theme/View/View.jsx

@@ -24,6 +24,7 @@ import {
   getBaseUrl,
   flattenToAppURL,
   getLayoutFieldname,
+  hasApiExpander,
 } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
@@ -118,7 +119,10 @@ class View extends Component {
   };
 
   componentDidMount() {
-    this.props.listActions(getBaseUrl(this.props.pathname));
+    // Do not trigger the actions action if the expander is present
+    if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
+      this.props.listActions(getBaseUrl(this.props.pathname));
+    }
     this.props.getContent(
       getBaseUrl(this.props.pathname),
       this.props.versionId,
@@ -134,7 +138,10 @@ class View extends Component {
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.pathname !== this.props.pathname) {
-      this.props.listActions(getBaseUrl(nextProps.pathname));
+      // Do not trigger the actions action if the expander is present
+      if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
+        this.props.listActions(getBaseUrl(nextProps.pathname));
+      }
       this.props.getContent(
         getBaseUrl(nextProps.pathname),
         this.props.versionId,

package/src/config/index.js

@@ -75,11 +75,18 @@ let config = {
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
     apiPath,
-    apiExpanders: [],
+    apiExpanders: [
+      // Add the following expanders for only issuing a single request.
+      // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
+      // {
+      //   match: '',
+      //   GET_CONTENT: ['breadcrumbs', 'navigation', 'actions', 'types'],
+      // },
+    ],
     // Internal proxy to bypass CORS *while developing*. NOT intended for production use.
     // In production is recommended you use a Seamless mode deployment using a web server in
     // front of both the frontend and the backend so you can bypass CORS safely.
-    // https://docs.voltocms.com/deploying/seamless-mode/
+    // https://6.docs.plone.org/volto/deploying/seamless-mode.html
     devProxyToApiPath:
       process.env.RAZZLE_DEV_PROXY_API_PATH ||
       process.env.RAZZLE_API_PATH ||
@@ -169,6 +176,7 @@ let config = {
     workflowMapping,
     errorHandlers: [], // callables for unhandled errors
     styleClassNameConverters,
+    hashLinkSmoothScroll: false,
     styleClassNameExtenders,
   },
   experimental: {

package/src/helpers/FormValidation/FormValidation.js

@@ -4,27 +4,29 @@ import { messages } from '../MessageLabels/MessageLabels';
 /**
  * Will return the intl message if invalid
  * @param {boolean} isValid
- * @param {string} maxCriterion
+ * @param {string} criterion
  * @param {string | number} valueToCompare can compare '47' < 50
  * @param {Function} intlFunc
  */
-const validationMessage = (isValid, maxCriterion, valueToCompare, intlFunc) =>
+const validationMessage = (isValid, criterion, valueToCompare, intlFunc) =>
   !isValid
-    ? intlFunc(messages[maxCriterion], {
+    ? intlFunc(messages[criterion], {
         len: valueToCompare,
       })
     : null;
+
 /**
  * Returns if based on the criterion the value is lower or equal
  * @param {string | number} value can compare '47' < 50
  * @param {string | number} valueToCompare can compare '47' < 50
- * @param {string} minCriterion
+ * @param {string} maxCriterion
  * @param {Function} intlFunc
  */
-const isMaxPropertyValid = (value, valueToCompare, minCriterion, intlFunc) => {
+const isMaxPropertyValid = (value, valueToCompare, maxCriterion, intlFunc) => {
   const isValid = valueToCompare !== undefined ? value <= valueToCompare : true;
-  return validationMessage(isValid, minCriterion, valueToCompare, intlFunc);
+  return validationMessage(isValid, maxCriterion, valueToCompare, intlFunc);
 };
+
 /**
  * Returns if based on the criterion the value is higher or equal
  * @param {string | number} value can compare '47' < 50
@@ -32,9 +34,9 @@ const isMaxPropertyValid = (value, valueToCompare, minCriterion, intlFunc) => {
  * @param {string} minCriterion
  * @param {Function} intlFunc
  */
-const isMinPropertyValid = (value, valueToCompare, maxCriterion, intlFunc) => {
+const isMinPropertyValid = (value, valueToCompare, minCriterion, intlFunc) => {
   const isValid = valueToCompare !== undefined ? value >= valueToCompare : true;
-  return validationMessage(isValid, maxCriterion, valueToCompare, intlFunc);
+  return validationMessage(isValid, minCriterion, valueToCompare, intlFunc);
 };
 
 const widgetValidation = {
@@ -109,7 +111,7 @@ const widgetValidation = {
     maxLength: (value, itemObj, intlFunc) =>
       isMaxPropertyValid(
         value.length,
-        itemObj.maxLengthj,
+        itemObj.maxLength,
         'maxLength',
         intlFunc,
       ),