@plone/volto 19.0.0-alpha.32 → 19.0.0-alpha.34

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/server.jsx

@@ -268,7 +268,13 @@ server.get('/*', (req, res) => {
         ? initialLang
         : state.content.data?.language?.token || initialLang;
 
-      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
+      const isMultilingual = state.site.data.features?.multilingual;
+
+      if (
+        toBackendLang(initialLang) !== contentLang &&
+        !/\/\.well-known\/.*$/.test(location.pathname) &&
+        !(isMultilingual && location.pathname === '/')
+      ) {
         const newLang = toReactIntlLang(
           new locale.Locales(contentLang).best(supported).toString(),
         );

package/theme/themes/default/globals/site.variables

@@ -82,8 +82,8 @@
 
 /* Input Text Color */
 @inputColor: @textColor;
-@inputPlaceholderColor: lighten(@inputColor, 75);
-@inputPlaceholderFocusColor: lighten(@inputColor, 45);
+@inputPlaceholderColor: lighten(@inputColor, 35);
+@inputPlaceholderFocusColor: lighten(@inputColor, 65);
 
 /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
 @inputLineHeight: unit((17 / 14), em);
@@ -970,4 +970,4 @@
 /*---  Light Tones  ---*/
 @whiteActive               : darken(@white, 5);
 @offWhiteActive            : darken(@offWhite, 5);
-@darkWhiteActive           : darken(@darkWhite, 5);
+@darkWhiteActive           : darken(@darkWhite, 5);

package/theme/themes/pastanaga/extras/contents.less

@@ -187,10 +187,6 @@
 }
 
 #content-core {
-  .dragging-cell {
-    opacity: 0;
-  }
-
   .dragging-row {
     background: rgba(0, 0, 0, 0.05);
   }

package/theme/themes/pastanaga/globals/site.variables

@@ -48,9 +48,6 @@
 /* This adjusts the default form input across all elements */
 @inputHorizontalPadding : 0;
 
-/* Input Text Color */
-@inputPlaceholderColor: #B8C6C8;
-
 
 /*-------------------
     Focused Input

package/types/components/manage/Contents/Contents.d.ts

@@ -1,3 +1,3 @@
-export const __test__: any;
+export const ContentsComponent: any;
 declare const _default: any;
 export default _default;

package/types/components/manage/Contents/ContentsIndexHeader.d.ts

@@ -1,20 +1,15 @@
-export function ContentsIndexHeaderComponent({ intl, width, label, connectDragSource, connectDropTarget, isDragging, }: {
-    intl: any;
+export function ContentsIndexHeaderComponent({ id, width, label, dndKitSortable, dndKitUtilities, }: {
+    id: any;
     width: any;
     label: any;
-    connectDragSource: any;
-    connectDropTarget: any;
-    isDragging: any;
-}): string;
+    dndKitSortable: any;
+    dndKitUtilities: any;
+}): import("react/jsx-runtime").JSX.Element;
 export namespace ContentsIndexHeaderComponent {
     namespace propTypes {
+        let id: any;
         let width: any;
         let label: any;
-        let connectDragSource: any;
-        let connectDropTarget: any;
-        let isDragging: any;
-        let order: any;
-        let onOrderIndex: any;
     }
 }
 declare const _default: any;

package/types/components/manage/Contents/ContentsItem.d.ts

@@ -1,4 +1,4 @@
-export function ContentsItemComponent({ item, selected, onClick, indexes, onCut, onCopy, onDelete, onMoveToTop, onMoveToBottom, connectDragPreview, connectDragSource, connectDropTarget, isDragging, order, }: {
+export function ContentsItemComponent({ item, selected, onClick, indexes, onCut, onCopy, onDelete, onMoveToTop, onMoveToBottom, order, dndKitSortable, dndKitUtilities, }: {
     item: any;
     selected: any;
     onClick: any;
@@ -8,11 +8,9 @@ export function ContentsItemComponent({ item, selected, onClick, indexes, onCut,
     onDelete: any;
     onMoveToTop: any;
     onMoveToBottom: any;
-    connectDragPreview: any;
-    connectDragSource: any;
-    connectDropTarget: any;
-    isDragging: any;
     order: any;
+    dndKitSortable: any;
+    dndKitUtilities: any;
 }): string;
 export namespace ContentsItemComponent {
     namespace propTypes {
@@ -25,12 +23,7 @@ export namespace ContentsItemComponent {
         let onDelete: any;
         let onMoveToTop: any;
         let onMoveToBottom: any;
-        let connectDragPreview: any;
-        let connectDragSource: any;
-        let connectDropTarget: any;
-        let isDragging: any;
         let order: any;
-        let onOrderItem: any;
     }
 }
 declare const _default: any;

package/types/components/manage/Controlpanels/ContentType.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
-export default _default;
+export default ContentType;
+declare function ContentType(): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Controlpanels/Controlpanel.d.ts

@@ -1,5 +1,2 @@
-declare const _default: React.ForwardRefExoticComponent<Omit<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>, "ref"> & React.RefAttributes<React.ComponentType<import("react-intl").WrappedComponentProps<string>>>> & {
-    WrappedComponent: React.ComponentType<import("react-intl").WrappedComponentProps<string>>;
-};
-export default _default;
-import React from 'react';
+export default Controlpanel;
+declare function Controlpanel(): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Controlpanels/index.d.ts

@@ -1,5 +1,5 @@
 export declare const Controlpanels: any;
-export declare const Controlpanel: import("@loadable/component").LoadableComponent<Omit<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>, "ref"> & import("react").RefAttributes<import("react").ComponentType<import("react-intl").WrappedComponentProps<string>>>>;
+export declare const Controlpanel: import("@loadable/component").LoadableComponent<unknown>;
 export declare const RulesControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const AddRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const EditRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
@@ -13,7 +13,7 @@ export declare const RelationsControlpanel: import("@loadable/component").Loadab
 export declare const AliasesControlpanel: import("@loadable/component").LoadableComponent<any>;
 export declare const UndoControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const AddonsControlpanel: import("@loadable/component").LoadableComponent<any>;
-export declare const ContentType: import("@loadable/component").LoadableClassComponent<any>;
+export declare const ContentType: import("@loadable/component").LoadableComponent<unknown>;
 export declare const ContentTypeLayout: import("@loadable/component").LoadableClassComponent<any>;
 export declare const ContentTypeSchema: import("@loadable/component").LoadableClassComponent<any>;
 export declare const ContentTypes: import("@loadable/component").LoadableClassComponent<any>;