@plone/volto 19.0.0-alpha.9 → 19.0.0

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

@@ -8,18 +8,7 @@ import ArrayWidget from './ArrayWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
-// 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,
-}));
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 
 beforeAll(async () => {
   const { __setLoadables } = await import(

package/src/components/manage/Widgets/BlockAlignment.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import BlockAlignment from './BlockAlignment';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+import {
+  RealStoreWrapper as Wrapper,
+  FormUndoWrapper,
+} from '@plone/volto/storybook';
+
+const meta: Meta<typeof BlockAlignment> = {
+  title: 'Edit Widgets/BlockAlignment',
+  component: BlockAlignment,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>Block alignment widget</h4>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BlockAlignment>;
+
+type TemplateParameters = {
+  initialValue?: ButtonsWidgetProps['value'];
+};
+
+const Template: StoryFn<typeof BlockAlignment> = (args, context) => {
+  const { initialValue } =
+    (context.parameters as TemplateParameters | undefined) ?? {};
+  const { value: _ignoredValue, onChange: argsOnChange, ...restArgs } = args;
+
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <FormUndoWrapper
+        initialState={{ value: initialValue ?? _ignoredValue }}
+        showControls
+      >
+        {({ state, onChange }) => (
+          <div className="ui segment form attached" style={{ width: '400px' }}>
+            <BlockAlignment
+              {...(restArgs as ButtonsWidgetProps)}
+              value={state.value}
+              onChange={(id, nextValue) => {
+                argsOnChange?.(id, nextValue);
+                onChange({ value: nextValue });
+              }}
+            />
+            <pre>Value: {JSON.stringify(state.value, null, 2)}</pre>
+          </div>
+        )}
+      </FormUndoWrapper>
+    </Wrapper>
+  );
+};
+
+export const DefaultAlignment: Story = {
+  render: Template,
+  args: {
+    id: 'alignment',
+    title: 'Block alignment',
+    block: 'block',
+    fieldSet: 'default',
+  },
+};
+
+export const CustomActions: Story = {
+  render: Template,
+  args: {
+    ...(DefaultAlignment.args ?? {}),
+    actions: [
+      {
+        name: 'wide',
+        label: 'Wide',
+        style: {
+          '--block-alignment': 'var(--align-wide)',
+        },
+      },
+      {
+        name: 'full',
+        label: 'Full',
+        style: {
+          '--block-alignment': 'var(--align-full)',
+        },
+      },
+    ],
+    actionsInfoMap: {
+      wide: ['W', 'Wide alignment'],
+      full: ['F', 'Full width alignment'],
+    },
+  },
+};
+
+export const FilteredActions: Story = {
+  render: Template,
+  args: {
+    ...(DefaultAlignment.args ?? {}),
+    filterActions: ['center'],
+  },
+};

package/src/components/manage/Widgets/BlockAlignment.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import BlockAlignment from './BlockAlignment';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderWidget = (props: Partial<ButtonsWidgetProps> = {}) => {
+  const { onChange: providedOnChange, ...restProps } = props;
+  const onChange = providedOnChange ?? vi.fn();
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'alignment',
+    title: 'Block alignment',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...restProps,
+  };
+
+  return {
+    onChange,
+    ...render(
+      <Provider
+        store={mockStore({
+          intl: {
+            locale: 'en',
+            messages: {},
+          },
+        })}
+      >
+        <BlockAlignment {...widgetProps} />
+      </Provider>,
+    ),
+  };
+};
+
+describe('BlockAlignment', () => {
+  it('renders default alignment buttons', () => {
+    renderWidget();
+
+    expect(screen.getByRole('radio', { name: 'Left' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Center' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Right' })).toBeInTheDocument();
+  });
+
+  it('filters actions when filterActions is provided', () => {
+    renderWidget({ filterActions: ['center'] });
+
+    expect(screen.getByRole('radio', { name: 'Center' })).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Left' }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Right' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('merges custom actions info map entries', () => {
+    renderWidget({
+      actions: ['left', 'custom'],
+      actionsInfoMap: {
+        custom: ['Custom', 'Custom alignment'],
+      },
+    });
+
+    expect(screen.getByRole('radio', { name: 'Left' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('radio', { name: 'Custom alignment' }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders when style definitions are provided as actions', () => {
+    renderWidget({
+      actions: [
+        {
+          name: 'wide',
+          label: 'Wide',
+          style: {
+            '--block-alignment': 'var(--align-wide)',
+          },
+        },
+      ],
+    });
+
+    expect(screen.getByRole('radio', { name: 'wide' })).toBeInTheDocument();
+  });
+
+  it('invokes onChange with styles when default actions are used', () => {
+    const { onChange } = renderWidget();
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Center' }));
+
+    expect(onChange).toHaveBeenCalledWith('alignment', {
+      '--block-alignment': 'var(--align-center)',
+    });
+  });
+});

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './ButtonsWidget';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageLeftSVG from '@plone/volto/icons/image-left.svg';
+import imageRightSVG from '@plone/volto/icons/image-right.svg';
+import type { IntlShape } from 'react-intl';
+import type { StyleDefinition } from '@plone/types';
+
+const messages = defineMessages({
+  left: {
+    id: 'Left',
+    defaultMessage: 'Left',
+  },
+  right: {
+    id: 'Right',
+    defaultMessage: 'Right',
+  },
+  center: {
+    id: 'Center',
+    defaultMessage: 'Center',
+  },
+});
+
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
+  left: [imageLeftSVG, intl.formatMessage(messages.left)],
+  right: [imageRightSVG, intl.formatMessage(messages.right)],
+  center: [imageFitSVG, intl.formatMessage(messages.center)],
+});
+
+const DEFAULT_ACTIONS: StyleDefinition[] = [
+  {
+    style: {
+      '--block-alignment': 'var(--align-left)',
+    },
+    name: 'left',
+    label: 'Left',
+  },
+  {
+    style: {
+      '--block-alignment': 'var(--align-center)',
+    },
+    name: 'center',
+    label: 'Center',
+  },
+  {
+    style: {
+      '--block-alignment': 'var(--align-right)',
+    },
+    name: 'right',
+    label: 'Right',
+  },
+];
+
+const BlockAlignmentWidget = (props: ButtonsWidgetProps) => {
+  const intl = useIntl();
+
+  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
+  const filteredActions =
+    filterActions && filterActions.length > 0
+      ? actions.filter((action) => {
+          const actionName = typeof action === 'string' ? action : action.name;
+          return filterActions.includes(actionName);
+        })
+      : actions;
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={filteredActions}
+      actionsInfoMap={actionsInfo}
+    />
+  );
+};
+
+export default BlockAlignmentWidget;

package/src/components/manage/Widgets/BlockWidth.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import BlockWidth from './BlockWidth';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+import {
+  RealStoreWrapper as Wrapper,
+  FormUndoWrapper,
+} from '@plone/volto/storybook';
+
+const meta: Meta<typeof BlockWidth> = {
+  title: 'Edit Widgets/BlockWidth',
+  component: BlockWidth,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>Block width widget</h4>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BlockWidth>;
+
+type TemplateParameters = {
+  initialValue?: ButtonsWidgetProps['value'];
+};
+
+const Template: StoryFn<typeof BlockWidth> = (args, context) => {
+  const { initialValue } =
+    (context.parameters as TemplateParameters | undefined) ?? {};
+  const { value: _ignoredValue, onChange: argsOnChange, ...restArgs } = args;
+
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <FormUndoWrapper
+        initialState={{ value: initialValue ?? _ignoredValue }}
+        showControls
+      >
+        {({ state, onChange }) => (
+          <div className="ui segment form attached" style={{ width: '400px' }}>
+            <BlockWidth
+              {...(restArgs as ButtonsWidgetProps)}
+              value={state.value}
+              onChange={(id, nextValue) => {
+                argsOnChange?.(id, nextValue);
+                onChange({ value: nextValue });
+              }}
+            />
+            <pre>Value: {JSON.stringify(state.value, null, 2)}</pre>
+          </div>
+        )}
+      </FormUndoWrapper>
+    </Wrapper>
+  );
+};
+
+export const DefaultWidth: Story = {
+  render: Template,
+  args: {
+    id: 'blockWidth',
+    title: 'Block width',
+    block: 'block',
+    fieldSet: 'default',
+  },
+};

package/src/components/manage/Widgets/BlockWidth.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import BlockWidth from './BlockWidth';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderWidget = (props: Partial<ButtonsWidgetProps> = {}) => {
+  const onChange = props.onChange ?? vi.fn();
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'blockWidth',
+    title: 'Block width',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...props,
+  };
+
+  return {
+    onChange,
+    ...render(
+      <Provider
+        store={mockStore({
+          intl: {
+            locale: 'en',
+            messages: {},
+          },
+        })}
+      >
+        <BlockWidth {...widgetProps} />
+      </Provider>,
+    ),
+  };
+};
+
+describe('BlockWidth', () => {
+  it('renders the default action buttons provided by the widget', () => {
+    renderWidget();
+
+    expect(screen.getByRole('radio', { name: 'Narrow' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Default' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Layout' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Full' })).toBeInTheDocument();
+  });
+
+  it('emits the correct value for the default actions', () => {
+    const { onChange } = renderWidget();
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Layout' }));
+
+    expect(onChange).toHaveBeenCalledWith('blockWidth', {
+      '--block-width': 'var(--layout-container-width)',
+    });
+  });
+});