@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

package/src/components/manage/Sidebar/SidebarPortal.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+type SidebarPortalProps = {
+  children?: React.ReactNode;
+  selected: boolean;
+  tab?: string;
+};
+
+const SidebarPortal = ({
+  children,
+  selected,
+  tab = 'sidebar-properties',
+}: SidebarPortalProps) => {
+  const [isClient, setIsClient] = React.useState(false);
+
+  React.useEffect(() => setIsClient(true), []);
+
+  if (!isClient || !selected) {
+    return null;
+  }
+
+  const target = document.getElementById(tab);
+
+  if (!target) {
+    return null;
+  }
+
+  return createPortal(
+    <div role="form" style={{ height: '100%' }}>
+      <div
+        style={{ height: '100%' }}
+        role="presentation"
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {children}
+      </div>
+    </div>,
+    target,
+  );
+};
+
+export default SidebarPortal;

package/src/components/manage/TemplateChooser/TemplateChooser.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Button, Grid, Message } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const TemplateChooser = ({ templates, onSelectTemplate }) => {
   const intl = useIntl();
@@ -15,7 +16,7 @@ const TemplateChooser = ({ templates, onSelectTemplate }) => {
                 className="template-chooser-item"
                 onClick={() => onSelectTemplate(index)}
               >
-                <img src={template.image} alt="" />
+                <Image src={template.image} alt="" />
                 <div className="template-chooser-title">
                   {intl.formatMessage({
                     id: template.id,

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

@@ -114,6 +114,9 @@ const More = (props) => {
 
   const content = useSelector((state) => state.content?.data, shallowEqual);
   const workingCopy = useSelector((state) => state.workingCopy, shallowEqual);
+  const isMultilingual = useSelector(
+    (state) => state.site.data.features?.multilingual,
+  );
 
   const actions = useSelector((state) => state.actions.actions, shallowEqual);
 
@@ -435,7 +438,7 @@ const More = (props) => {
           </li>
         </Plug>
       )}
-      {editAction && config.settings.isMultilingual && (
+      {editAction && isMultilingual && (
         <Plug pluggable="toolbar-more-manage-content" id="multilingual">
           <li>
             <Link to={`${path}/manage-translations`}>

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

@@ -135,6 +135,9 @@ const store = mockStore({
       is_folderish: true,
     },
   },
+  site: {
+    data: {},
+  },
   workflow: { history: [], transition: { loaded: true } },
 });
 

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

@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Image from '@plone/volto/components/theme/Image/Image';
 import { getUser } from '@plone/volto/actions/users/users';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 import { expandToBackendURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
@@ -96,7 +97,7 @@ const PersonalTools = (props) => {
       </header>
       <div className={cx('avatar', { default: !user.portrait })}>
         {user.portrait ? (
-          <img
+          <Image
             src={expandToBackendURL(user.portrait)}
             alt={intl.formatMessage(messages.userAvatar)}
           />

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

@@ -537,10 +537,9 @@ class Toolbar extends Component {
                         </Link>
                       )}
                     {this.props.content &&
-                      ((this.props.content.is_folderish &&
-                        this.props.types.length > 0) ||
-                        (config.settings.isMultilingual &&
-                          this.props.content['@components']?.translations)) && (
+                      this.props.content.is_folderish &&
+                      (this.props.types.length > 0 ||
+                        this.props.content['@components']?.translations) && (
                         <button
                           className="add"
                           aria-label={this.props.intl.formatMessage(

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import filter from 'lodash/filter';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
@@ -10,12 +11,12 @@ import { FormattedMessage } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
-import config from '@plone/volto/registry';
 
 const Types = ({ types, pathname, content, currentLanguage }) => {
-  const { settings } = config;
-  return types.length > 0 ||
-    (settings.isMultilingual && content['@components'].translations) ? (
+  const availableLanguages = useSelector(
+    (state) => state.site?.data?.['plone.available_languages'] || [],
+  );
+  return types.length > 0 || content?.['@components']?.translations ? (
     <div className="menu-more pastanaga-menu">
       {types.length > 0 && (
         <>
@@ -53,11 +54,10 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
           </div>
         </>
       )}
-      {settings.isMultilingual &&
-        content['@components'].translations &&
+      {content['@components'].translations &&
         (() => {
           const translationsLeft = filter(
-            settings.supportedLanguages,
+            availableLanguages,
             (lang) =>
               !Boolean(
                 content['@components'].translations &&

package/src/components/manage/UniversalLink/UniversalLink.tsx

@@ -148,6 +148,7 @@ const UniversalLink = React.memo(
           target={openLinkInNewTab ?? false ? '_blank' : undefined}
           title={title}
           className={className}
+          onClick={onClick}
           smooth={smooth ?? config.settings.hashLinkSmoothScroll}
           // @ts-ignore
           ref={ref}

package/src/components/manage/Widgets/AlignWidget.stories.jsx

@@ -7,6 +7,15 @@ export const Align = WidgetStory.bind({
   widget: AlignWidget,
 });
 
+export const AlignDefaultLeft = WidgetStory.bind({
+  props: {
+    id: 'align-default-left',
+    title: 'Align (default left)',
+    default: 'left',
+  },
+  widget: AlignWidget,
+});
+
 export default {
   title: 'Edit Widgets/Align',
   component: AlignWidget,

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+
+import AlignWidget from './AlignWidget';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderAlignWidget = (
+  props: Partial<ButtonsWidgetProps> = {},
+): {
+  onChange: ButtonsWidgetProps['onChange'];
+  asFragment: () => DocumentFragment;
+  getByRole: ReturnType<typeof render>['getByRole'];
+} => {
+  const { onChange: providedOnChange, ...restProps } = props;
+  const onChange = providedOnChange ?? vi.fn();
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'align',
+    title: 'Alignment',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...restProps,
+  };
+
+  const rendered = render(
+    <Provider store={store}>
+      <AlignWidget {...widgetProps} />
+    </Provider>,
+  );
+
+  return {
+    onChange,
+    asFragment: rendered.asFragment,
+    getByRole: rendered.getByRole,
+  };
+};
+
+describe('AlignWidget', () => {
+  it('renders with default actions', () => {
+    const { asFragment } = renderAlignWidget();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders with custom actions', () => {
+    const { asFragment } = renderAlignWidget({
+      actions: ['additional'],
+      actionsInfoMap: {
+        additional: [imageFullSVG, 'Additional action title'],
+      },
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('selects the defaultAction when value is missing', () => {
+    const { getByRole } = renderAlignWidget({
+      defaultAction: 'left',
+    });
+
+    expect(getByRole('radio', { name: 'Left' })).toBeChecked();
+  });
+
+  it('selects the default when value is missing', () => {
+    const { getByRole } = renderAlignWidget({
+      default: 'left',
+    });
+
+    expect(getByRole('radio', { name: 'Left' })).toBeChecked();
+  });
+
+  it('does not override provided value with default', () => {
+    const { onChange } = renderAlignWidget({
+      default: 'left',
+      value: 'center',
+    });
+
+    expect(onChange).not.toHaveBeenCalledWith('align', 'left');
+  });
+});

package/src/components/manage/Widgets/{AlignWidget.jsx → AlignWidget.tsx}

@@ -1,12 +1,16 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget from './ButtonsWidget';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './ButtonsWidget';
 import imageLeftSVG from '@plone/volto/icons/image-left.svg';
 import imageRightSVG from '@plone/volto/icons/image-right.svg';
 import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
 import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import type { IntlShape } from 'react-intl';
 
 const messages = defineMessages({
   left: {
@@ -35,20 +39,32 @@ const messages = defineMessages({
   },
 });
 
-export const defaultActionsInfo = ({ intl }) => ({
+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)],
+  right: [imageRightSVG, intl.formatMessage(messages.right)],
   narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
   wide: [imageWideSVG, intl.formatMessage(messages.wide)],
   full: [imageFullSVG, intl.formatMessage(messages.full)],
 });
 
-const AlignWidget = (props) => {
+type AlignWidgetProps = ButtonsWidgetProps & {
+  defaultAction?: string;
+};
+
+const AlignWidget = (props: AlignWidgetProps) => {
   const intl = useIntl();
 
-  const { actions = ['left', 'right', 'center', 'full'], actionsInfoMap } =
-    props;
+  const {
+    actions = ['left', 'center', 'right', 'full'],
+    actionsInfoMap,
+    default: defaultValue,
+    defaultAction,
+  } = props;
 
   const actionsInfo = {
     ...defaultActionsInfo({ intl }),
@@ -60,7 +76,7 @@ const AlignWidget = (props) => {
       {...props}
       actions={actions}
       actionsInfoMap={actionsInfo}
-      defaultAction={props.defaultAction || 'center'}
+      default={defaultValue ?? defaultAction ?? 'center'}
     />
   );
 };

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

@@ -8,12 +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'
-  );
-});
-
+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'),

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;