@plone/volto 19.0.0-alpha.31 → 19.0.0-alpha.33

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

@@ -4,14 +4,47 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import Form from './Form';
+import config from '@plone/volto/registry';
 
 const mockStore = configureStore();
 const errorMessage =
   "[{'message': 'The specified email is not valid.', 'field': 'contact_email', 'error': 'ValidationError'}";
 
 vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/helpers/Utils/withSaveAsDraft', async () => {
+  const React = await import('react');
+  const { default: config } = await import('@plone/volto/registry');
+
+  return {
+    default: () => (WrappedComponent) =>
+      React.forwardRef((props, ref) =>
+        config.experimental?.saveAsDraft?.enabled ? (
+          <div data-autosave-wrapper="true">
+            <WrappedComponent
+              {...props}
+              checkSavedDraft={vi.fn()}
+              onSaveDraft={vi.fn()}
+              onCancelDraft={vi.fn()}
+              ref={ref}
+            />
+          </div>
+        ) : (
+          <WrappedComponent {...props} ref={ref} />
+        ),
+      ),
+  };
+});
 
 describe('Form', () => {
+  beforeEach(() => {
+    config.experimental = {
+      ...(config.experimental || {}),
+      saveAsDraft: {
+        enabled: false,
+      },
+    };
+  });
+
   it('renders a form component', () => {
     const store = mockStore({
       intl: {
@@ -49,10 +82,106 @@ describe('Form', () => {
             onCancel={() => {}}
           />
         </MemoryRouter>
-        ,
       </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('does not wrap the form with autosave when the experimental flag is disabled', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/some-route']}>
+          <Form
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: 'Default',
+                  fields: ['title'],
+                },
+              ],
+              properties: {
+                title: {},
+              },
+              required: [],
+            }}
+            requestError={errorMessage}
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(
+      component.root.findAllByProps({ 'data-autosave-wrapper': 'true' }),
+    ).toHaveLength(0);
+  });
+
+  it('wraps the form with autosave when the experimental flag is enabled', () => {
+    config.experimental = {
+      ...config.experimental,
+      saveAsDraft: {
+        enabled: true,
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/some-route']}>
+          <Form
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: 'Default',
+                  fields: ['title'],
+                },
+              ],
+              properties: {
+                title: {},
+              },
+              required: [],
+            }}
+            requestError={errorMessage}
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(
+      component.root.findAllByProps({ 'data-autosave-wrapper': 'true' }),
+    ).toHaveLength(1);
+  });
 });

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

@@ -29,6 +29,7 @@ import {
   SortableMultiValue,
   SortableMultiValueLabel,
   MultiValueContainer,
+  MultiValueRemove,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
@@ -276,11 +277,11 @@ class ArrayWidget extends Component {
   render() {
     const choices = normalizeChoices(this.props?.choices || []);
     const selectedOption = normalizeArrayValue(choices, this.props.value);
+    const selectedIds = selectedOption.map((option) => option.value);
 
     const CreatableSelect = this.props.reactSelectCreateable.default;
-    const { SortableContainer } = this.props.reactSortableHOC;
     const Select = this.props.reactSelect.default;
-    const SortableSelect =
+    const SelectComponent =
       // It will be only creatable if the named vocabulary is in the widget definition
       // (hint) like:
       // list_field_voc_unconstrained = schema.List(
@@ -298,95 +299,112 @@ class ArrayWidget extends Component {
       this.props?.choices &&
       !getVocabFromHint(this.props) &&
       !this.props.creatable
-        ? SortableContainer(Select)
-        : SortableContainer(CreatableSelect);
+        ? Select
+        : CreatableSelect;
+    const { DndContext, closestCenter } = this.props.dndKitCore;
+    const { SortableContext, horizontalListSortingStrategy } =
+      this.props.dndKitSortable;
 
     return (
       <FormFieldWrapper {...this.props}>
-        <SortableSelect
-          useDragHandle
-          // react-sortable-hoc props:
-          axis="xy"
-          onSortEnd={(sortProp) => {
-            this.onSortEnd(selectedOption, sortProp);
-          }}
-          menuShouldScrollIntoView={false}
-          distance={4}
-          // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
-          getHelperDimensions={({ node }) => node.getBoundingClientRect()}
-          id={`field-${this.props.id}`}
-          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
-          key={this.props.id}
-          isDisabled={this.props.disabled || this.props.isDisabled}
-          className="react-select-container"
-          classNamePrefix="react-select"
-          /* eslint-disable jsx-a11y/no-autofocus */
-          autoFocus={this.props.focus}
-          /* eslint-enable jsx-a11y/no-autofocus */
-          options={
-            this.props.vocabBaseUrl
-              ? choices
-              : this.props.choices
-                ? [
-                    ...choices,
-                    ...(this.props.noValueOption &&
-                    (this.props.default === undefined ||
-                      this.props.default === null)
-                      ? [
-                          {
-                            label: this.props.intl.formatMessage(
-                              messages.no_value,
-                            ),
-                            value: 'no-value',
-                          },
-                        ]
-                      : []),
-                  ]
-                : [
-                    {
-                      label: this.props.intl.formatMessage(messages.no_value),
-                      value: 'no-value',
-                    },
-                  ]
-          }
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{
-            ...(this.props.choices?.length > 25 && {
-              MenuList,
-            }),
-            MultiValueContainer,
-            MultiValue: SortableMultiValue,
-            MultiValueLabel: SortableMultiValueLabel,
-            DropdownIndicator,
-            ClearIndicator,
-            Option,
+        <DndContext
+          collisionDetection={closestCenter}
+          onDragEnd={({ active, over }) => {
+            if (!over || active.id === over.id) {
+              return;
+            }
+            const oldIndex = selectedIds.indexOf(active.id);
+            const newIndex = selectedIds.indexOf(over.id);
+            if (oldIndex < 0 || newIndex < 0) {
+              return;
+            }
+            this.onSortEnd(selectedOption, { oldIndex, newIndex });
           }}
-          value={selectedOption || []}
-          placeholder={
-            this.props.placeholder ??
-            this.props.intl.formatMessage(messages.select)
-          }
-          onChange={this.handleChange}
-          isValidNewOption={(
-            inputValue,
-            selectValue,
-            selectOptions,
-            accessors,
-          ) =>
-            !(
-              !inputValue ||
-              selectValue.some((option) =>
-                compareOption(inputValue, option, accessors),
-              ) ||
-              selectOptions.some((option) =>
-                compareOption(inputValue, option, accessors),
-              )
-            )
-          }
-          isClearable
-          isMulti
-        />
+        >
+          <SortableContext
+            items={selectedIds}
+            strategy={horizontalListSortingStrategy}
+          >
+            <SelectComponent
+              menuShouldScrollIntoView={false}
+              id={`field-${this.props.id}`}
+              aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
+              key={this.props.id}
+              isDisabled={this.props.disabled || this.props.isDisabled}
+              className="react-select-container"
+              classNamePrefix="react-select"
+              /* eslint-disable jsx-a11y/no-autofocus */
+              autoFocus={this.props.focus}
+              /* eslint-enable jsx-a11y/no-autofocus */
+              options={
+                this.props.vocabBaseUrl
+                  ? choices
+                  : this.props.choices
+                    ? [
+                        ...choices,
+                        ...(this.props.noValueOption &&
+                        (this.props.default === undefined ||
+                          this.props.default === null)
+                          ? [
+                              {
+                                label: this.props.intl.formatMessage(
+                                  messages.no_value,
+                                ),
+                                value: 'no-value',
+                              },
+                            ]
+                          : []),
+                      ]
+                    : [
+                        {
+                          label: this.props.intl.formatMessage(
+                            messages.no_value,
+                          ),
+                          value: 'no-value',
+                        },
+                      ]
+              }
+              styles={customSelectStyles}
+              theme={selectTheme}
+              components={{
+                ...(this.props.choices?.length > 25 && {
+                  MenuList,
+                }),
+                MultiValueContainer,
+                MultiValue: SortableMultiValue,
+                MultiValueLabel: SortableMultiValueLabel,
+                MultiValueRemove,
+                DropdownIndicator,
+                ClearIndicator,
+                Option,
+              }}
+              value={selectedOption || []}
+              placeholder={
+                this.props.placeholder ??
+                this.props.intl.formatMessage(messages.select)
+              }
+              onChange={this.handleChange}
+              isValidNewOption={(
+                inputValue,
+                selectValue,
+                selectOptions,
+                accessors,
+              ) =>
+                !(
+                  !inputValue ||
+                  selectValue.some((option) =>
+                    compareOption(inputValue, option, accessors),
+                  ) ||
+                  selectOptions.some((option) =>
+                    compareOption(inputValue, option, accessors),
+                  )
+                )
+              }
+              isClearable
+              isMulti
+            />
+          </SortableContext>
+        </DndContext>
       </FormFieldWrapper>
     );
   }
@@ -396,7 +414,12 @@ export const ArrayWidgetComponent = injectIntl(ArrayWidget);
 
 export default compose(
   injectIntl,
-  injectLazyLibs(['reactSelect', 'reactSelectCreateable', 'reactSortableHOC']),
+  injectLazyLibs([
+    'reactSelect',
+    'reactSelectCreateable',
+    'dndKitCore',
+    'dndKitSortable',
+  ]),
   connect(
     (state, props) => {
       const vocabBaseUrl =

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

@@ -9,12 +9,6 @@ import ArrayWidget from './ArrayWidget';
 const mockStore = configureStore();
 
 vi.mock('@plone/volto/helpers/Loadable/Loadable');
-// Mock react-sortable-hoc to prevent the container error
-vi.mock('react-sortable-hoc', () => ({
-  ...vi.importActual('react-sortable-hoc'),
-  SortableContainer: (component) => component,
-  SortableElement: (component) => component,
-}));
 
 beforeAll(async () => {
   const { __setLoadables } = await import(

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

@@ -3,17 +3,17 @@
  * @module components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthIndexField
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import map from 'lodash/map';
 import { Form } from 'semantic-ui-react';
 import SelectInput from './SelectInput';
 
 /**
- * WeekdayOfTheMonthIndexField component class.
+ * WeekdayOfTheMonthIndexField component.
  * @function WeekdayOfTheMonthIndexField
- * @returns {string} Markup of the component.
+ * @returns {JSX.Element} Markup of the component.
  */
 
 const messages = defineMessages({
@@ -34,53 +34,59 @@ const ORDINAL_NUMBERS = {
   '-1': 'last',
 };
 
-class WeekdayOfTheMonthIndexField extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    disabled: PropTypes.bool,
-    value: PropTypes.any,
-    onChange: PropTypes.func,
-  };
+const WeekdayOfTheMonthIndexField = ({
+  disabled,
+  value,
+  onChange,
+  ...otherProps
+}) => {
+  const intl = useIntl();
+  const weekdayOfTheMonthIndexList = [
+    ...map(Object.keys(ORDINAL_NUMBERS), (option) => ({
+      value: parseInt(option),
+      label: intl.formatMessage(messages[ORDINAL_NUMBERS[option]]),
+    })),
+  ];
+  return (
+    <>
+      <Form.Field disabled={disabled}>
+        {intl.formatMessage(messages.bymonthDayNumber)}
+      </Form.Field>
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    disabled: false,
-    value: null,
-    onChange: null,
-  };
+      <Form.Field disabled={disabled}>
+        <SelectInput
+          name="weekdayOfTheMonthIndex"
+          options={weekdayOfTheMonthIndexList}
+          disabled={disabled}
+          value={value}
+          onChange={onChange}
+          {...otherProps}
+        />
+      </Form.Field>
+    </>
+  );
+};
 
-  render() {
-    const { intl, disabled } = this.props;
-    const weekdayOfTheMonthIndexList = [
-      ...map(Object.keys(ORDINAL_NUMBERS), (option) => ({
-        value: parseInt(option),
-        label: intl.formatMessage(messages[ORDINAL_NUMBERS[option]]),
-      })),
-    ];
-    return (
-      <>
-        <Form.Field disabled={disabled}>
-          {intl.formatMessage(messages.bymonthDayNumber)}
-        </Form.Field>
+/**
+ * Property types.
+ * @property {Object} propTypes
+ * @static
+ */
+WeekdayOfTheMonthIndexField.propTypes = {
+  disabled: PropTypes.bool,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+};
 
-        <Form.Field disabled={disabled}>
-          <SelectInput
-            name="weekdayOfTheMonthIndex"
-            options={weekdayOfTheMonthIndexList}
-            {...this.props}
-          />
-        </Form.Field>
-      </>
-    );
-  }
-}
+/**
+ * Default properties.
+ * @property {Object} defaultProps
+ * @static
+ */
+WeekdayOfTheMonthIndexField.defaultProps = {
+  disabled: false,
+  value: null,
+  onChange: null,
+};
 
-export default injectIntl(WeekdayOfTheMonthIndexField);
+export default WeekdayOfTheMonthIndexField;

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

@@ -14,33 +14,52 @@ export const MenuList = ({ children }) => {
   return <DynamicHeightList>{children}</DynamicHeightList>;
 };
 
+// this prevents the menu from being opened/closed when the user clicks
+// on a value to begin dragging it. ideally, detecting a click (instead of
+// a drag) would still focus the control and toggle the menu, but that
+// requires some magic with refs that are out of scope for this example
+const onMouseDown = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+
 export const SortableMultiValue = injectLazyLibs([
   'reactSelect',
-  'reactSortableHOC',
+  'dndKitSortable',
+  'dndKitUtilities',
 ])((props) => {
   const { MultiValue } = props.reactSelect.components;
-  const { SortableElement } = props.reactSortableHOC;
-  // this prevents the menu from being opened/closed when the user clicks
-  // on a value to begin dragging it. ideally, detecting a click (instead of
-  // a drag) would still focus the control and toggle the menu, but that
-  // requires some magic with refs that are out of scope for this example
-  const onMouseDown = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const innerProps = { ...props.innerProps, onMouseDown };
-  const SortableComponent = SortableElement(MultiValue);
-  return <SortableComponent {...props} innerProps={innerProps} />;
+  const { useSortable } = props.dndKitSortable;
+  const { CSS } = props.dndKitUtilities;
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: props.data.value,
+    });
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      {...attributes}
+      {...listeners}
+    >
+      <MultiValue
+        {...props}
+        innerProps={{ ...props.innerProps, onMouseDown }}
+      />
+    </div>
+  );
 });
 
-export const SortableMultiValueLabel = injectLazyLibs([
-  'reactSelect',
-  'reactSortableHOC',
-])((props) => {
+export const SortableMultiValueLabel = injectLazyLibs(['reactSelect'])((
+  props,
+) => {
   const { MultiValueLabel } = props.reactSelect.components;
-  const { SortableHandle } = props.reactSortableHOC;
-  const SortableComponent = SortableHandle(MultiValueLabel);
-  return <SortableComponent {...props} />;
+  return <MultiValueLabel {...props} />;
 });
 
 export const MultiValueContainer = injectLazyLibs('reactSelect')((props) => {
@@ -57,6 +76,19 @@ export const MultiValueContainer = injectLazyLibs('reactSelect')((props) => {
   );
 });
 
+export const MultiValueRemove = injectLazyLibs(['reactSelect'])((props) => {
+  const { MultiValueRemove } = props.reactSelect.components;
+  return (
+    <MultiValueRemove
+      {...props}
+      innerProps={{
+        ...props.innerProps,
+        onPointerDown: (e) => e.stopPropagation(),
+      }}
+    />
+  );
+});
+
 export const Option = injectLazyLibs('reactSelect')((props) => {
   const { Option } = props.reactSelect.components;
   const color = props.isFocused && !props.isSelected ? '#b8c6c8' : '#007bc1';

package/src/config/Loadables.jsx

@@ -24,9 +24,6 @@ export const loadables = {
   reactVirtualized: loadable.lib(() => import('react-virtualized'), {
     ssr: false,
   }),
-  reactSortableHOC: loadable.lib(() => import('react-sortable-hoc'), {
-    ssr: false,
-  }),
   reactSelectAsyncPaginate: loadable.lib(
     () => import('react-select-async-paginate'),
     { ssr: false },
@@ -46,11 +43,10 @@ export const loadables = {
   diffLib: loadable.lib(() => import('diff')),
   moment: loadable.lib(() => import('moment')),
   reactDates: loadable.lib(() => import('react-dates')),
-  reactDnd: loadable.lib(() => import('react-dnd')),
-  reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
   reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
   rrule: loadable.lib(() => import('rrule')),
   dndKitCore: loadable.lib(() => import('@dnd-kit/core')),
+  dndKitModifiers: loadable.lib(() => import('@dnd-kit/modifiers')),
   dndKitSortable: loadable.lib(() => import('@dnd-kit/sortable')),
   dndKitUtilities: loadable.lib(() => import('@dnd-kit/utilities')),
 };

package/src/config/index.js

@@ -189,6 +189,9 @@ let config = {
     addBlockButton: {
       enabled: true,
     },
+    saveAsDraft: {
+      enabled: false,
+    },
   },
   widgets: {},
   views: {},