@plone/volto 18.0.0-alpha.26 → 18.0.0-alpha.28

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

@@ -3,7 +3,7 @@
  * @module components/manage/Widgets/EmailWidget
  */
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Input } from 'semantic-ui-react';

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

@@ -9,7 +9,8 @@ import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
-import { Icon, FormFieldWrapper, UniversalLink } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import loadable from '@loadable/component';
 import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';

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

@@ -11,7 +11,8 @@ import { Input } from 'semantic-ui-react';
 import { compact, concat, keys, map, union, uniq } from 'lodash';
 
 import { defineMessages, 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';
 import config from '@plone/volto/registry';
 import { getQuerystring } from '@plone/volto/actions';
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Button, Grid } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   small: {

package/src/components/manage/Widgets/InternalUrlWidget.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 { isInternalURL, flattenToAppURL, URLUtils } from '@plone/volto/helpers';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -177,4 +177,4 @@ InternalUrlWidget.defaultProps = {
   maxLength: null,
 };
 
-export default compose(withObjectBrowser)(InternalUrlWidget);
+export default withObjectBrowser(InternalUrlWidget);

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectIntl } from 'react-intl';
 
 /**

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Accordion, Button, Segment } from 'semantic-ui-react';
-import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
+import { DragDropList, Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { applySchemaDefaults, reorderArray } from '@plone/volto/helpers';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 

package/src/components/manage/Widgets/ObjectListWidget.test.js

@@ -5,6 +5,8 @@ import configureStore from 'redux-mock-store';
 import ObjectListWidget from './ObjectListWidget';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
+jest.mock('@plone/volto/components/manage/Form');
+
 beforeAll(
   async () =>
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),

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

@@ -6,8 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tab } from 'semantic-ui-react';
-
-import Field from '@plone/volto/components/manage/Form/Field';
+import { Field } from '@plone/volto/components/manage/Form';
 
 /**
  * Renders a field set. Passes some of the values in the schema to the Field

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

@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 import { render, fireEvent } from '@testing-library/react';
 import ObjectWidget from './ObjectWidget';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 const LinkSchema = {

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectIntl } from 'react-intl';
 
 /**

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { toPairs, groupBy, map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';

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

@@ -6,7 +6,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-//import { RRule, RRuleSet, rrulestr } from 'rrule';
 import { connect } from 'react-redux';
 
 import cx from 'classnames';
@@ -22,7 +21,9 @@ import {
   Header,
 } from 'semantic-ui-react';
 
-import { SelectWidget, Icon, DatetimeWidget } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
+import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
 import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 

package/src/components/manage/Widgets/RecurrenceWidget/SelectInput.jsx

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from 'react-select';
 import { find } from 'lodash';
 import {
   Option,
@@ -13,12 +12,22 @@ import {
   selectTheme,
   customSelectStyles,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
 /**
  * SelectInput component class.
  * @function SelectInput
  * @returns {string} Markup of the component.
  */
-const SelectInput = ({ name, disabled, options, value, onChange }) => {
+const SelectInput = ({
+  name,
+  disabled,
+  options,
+  value,
+  onChange,
+  reactSelect,
+}) => {
+  const Select = reactSelect.default;
   const inlineSelectStyles = {
     ...customSelectStyles,
     control: (styles, state) => ({
@@ -78,4 +87,4 @@ SelectInput.defaultProps = {
   onChange: null,
 };
 
-export default SelectInput;
+export default injectLazyLibs('reactSelect')(SelectInput);

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

@@ -11,7 +11,7 @@ import { Label, Dropdown, Popup, Icon } from 'semantic-ui-react';
 import { compact, concat, fromPairs, map, values, uniqBy } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { resetSearchContent, searchContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 

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

@@ -9,7 +9,8 @@ import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import loadable from '@loadable/component';
 import { defineMessages, useIntl } from 'react-intl';
 import { toPublicURL, validateFileUploadSize } from '@plone/volto/helpers';

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

@@ -14,11 +14,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { slugify } from '@plone/volto/helpers/Utils/Utils';
 
-import {
-  Field,
-  ModalForm,
-  SchemaWidgetFieldset,
-} from '@plone/volto/components';
+import SchemaWidgetFieldset from '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset';
+import { Field, ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   add: {

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: {

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';
 

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

@@ -8,7 +8,8 @@ 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.

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({

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/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

@@ -6,6 +6,8 @@ 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(),

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

@@ -0,0 +1,43 @@
+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(() => (
+  <div id="RegistryImageWidget" />
+));
+export const ReferenceWidget = jest.fn(() => <div id="ReferenceWidget" />);
+export const ObjectBrowserWidget = jest.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(() => (
+  <div id="VocabularyTermsWidget" />
+));
+export const SelectMetadataWidget = jest.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" />);

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

@@ -0,0 +1,232 @@
+import loadable from '@loadable/component';
+
+export const AlignWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/AlignWidget'
+    ),
+);
+
+export const ButtonsWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ButtonsWidget'
+    ),
+);
+
+export const ArrayWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ArrayWidget'
+    ),
+);
+
+export const CheckboxWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/CheckboxWidget'
+    ),
+);
+
+export const FileWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FileWidget'
+    ),
+);
+
+export const IdWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/IdWidget'
+    ),
+);
+
+export const PasswordWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/PasswordWidget'
+    ),
+);
+
+export const QueryWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QueryWidget'
+    ),
+);
+
+export const QuerySortOnWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QuerySortOnWidget'
+    ),
+);
+
+export const QuerystringWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QuerystringWidget'
+    ),
+);
+
+export const SchemaWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SchemaWidget'
+    ),
+);
+
+export const SelectWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SelectWidget'
+    ),
+);
+
+export const TextareaWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TextareaWidget'
+    ),
+);
+
+export const TextWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TextWidget'
+    ),
+);
+
+export const TokenWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TokenWidget'
+    ),
+);
+
+export const WysiwygWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/WysiwygWidget'
+    ),
+);
+
+export const UrlWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/UrlWidget'
+    ),
+);
+
+export const InternalUrlWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/InternalUrlWidget'
+    ),
+);
+
+export const EmailWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/EmailWidget'
+    ),
+);
+
+export const NumberWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/NumberWidget'
+    ),
+);
+
+export const ImageSizeWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ImageSizeWidget'
+    ),
+);
+
+export const RegistryImageWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/RegistryImageWidget'
+    ),
+);
+
+export const ReferenceWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ReferenceWidget'
+    ),
+);
+
+export const ObjectBrowserWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectBrowserWidget'
+    ),
+);
+
+export const ObjectWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectWidget'
+    ),
+);
+
+export const ObjectListWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectListWidget'
+    ),
+);
+
+export const VocabularyTermsWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/VocabularyTermsWidget'
+    ),
+);
+
+export const SelectMetadataWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Blocks/Search/widgets/SelectMetadataField'
+    ),
+);
+
+export const SelectAutoComplete = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SelectAutoComplete'
+    ),
+);
+
+export const ColorPickerWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ColorPickerWidget'
+    ),
+);
+
+export const DatetimeWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/DatetimeWidget'
+    ),
+);
+
+export const RecurrenceWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
+    ),
+);
+
+export const FormFieldWrapper = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FormFieldWrapper'
+    ),
+);

package/src/components/manage/Workflow/Workflow.jsx

@@ -6,7 +6,8 @@ import { uniqBy } from 'lodash';
 import { toast } from 'react-toastify';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
+import { Icon, Toast } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import {
   flattenToAppURL,
   getWorkflowOptions,