@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.21

package/src/components/manage/Sharing/Sharing.jsx

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link, withRouter } from 'react-router-dom';
 import { find, isEqual, map } from 'lodash';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Button,
   Checkbox,
@@ -505,8 +505,8 @@ class SharingComponent extends Component {
             </Form>
           </Plug>
         </Segment.Group>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -523,9 +523,9 @@ class SharingComponent extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import jwt from 'jsonwebtoken';
@@ -10,9 +10,7 @@ import Sharing from './Sharing';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Sharing', () => {
   it('renders a sharing component', () => {
@@ -57,16 +55,18 @@ describe('Sharing', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+
+    const { container } = render(
       <Provider store={store}>
         <PluggablesProvider>
           <MemoryRouter>
             <Sharing location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
           </MemoryRouter>
         </PluggablesProvider>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Sidebar/ObjectBrowser.jsx

@@ -98,7 +98,7 @@ const withObjectBrowser = (WrappedComponent) =>
               <ObjectBrowserBody
                 {...this.props}
                 data={
-                  this.state.propDataName
+                  this.state.propDataName && this.props[this.state.propDataName]
                     ? this.props[this.state.propDataName]
                     : this.props.data
                 }

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -104,27 +104,27 @@ class ObjectBrowserBody extends Component {
         this.props.mode === 'multiple'
           ? '/'
           : this.props.mode === 'image' && this.props.data?.url
-          ? getParentURL(this.props.data.url)
-          : '/',
+            ? getParentURL(this.props.data.url)
+            : '/',
       currentLinkFolder:
         this.props.mode === 'multiple'
           ? '/'
           : this.props.mode === 'link' && this.props.data?.href
-          ? getParentURL(this.props.data.href)
-          : '/',
+            ? getParentURL(this.props.data.href)
+            : '/',
       parentFolder: '',
       selectedImage:
         this.props.mode === 'multiple'
           ? ''
           : this.props.mode === 'image' && this.props.data?.url
-          ? flattenToAppURL(this.props.data.url)
-          : '',
+            ? flattenToAppURL(this.props.data.url)
+            : '',
       selectedHref:
         this.props.mode === 'multiple'
           ? ''
           : this.props.mode === 'link' && this.props.data?.href
-          ? flattenToAppURL(this.props.data.href)
-          : '',
+            ? flattenToAppURL(this.props.data.href)
+            : '',
       showSearchInput: false,
       // In image mode, the searchable types default to the image types which
       // can be overridden with the property if specified.
@@ -150,8 +150,8 @@ class ObjectBrowserBody extends Component {
       mode === 'multiple'
         ? ''
         : mode === 'image'
-        ? this.state.selectedImage
-        : this.state.selectedHref;
+          ? this.state.selectedImage
+          : this.state.selectedHref;
     if (currentSelected && isInternalURL(currentSelected)) {
       this.props.searchContent(
         getParentURL(currentSelected),
@@ -296,8 +296,21 @@ class ObjectBrowserBody extends Component {
   };
 
   isSelectable = (item) => {
-    return this.props.selectableTypes.length > 0
-      ? this.props.selectableTypes.indexOf(item['@type']) >= 0
+    const { maximumSelectionSize, data, mode, selectableTypes } = this.props;
+    if (
+      maximumSelectionSize &&
+      data &&
+      mode === 'multiple' &&
+      maximumSelectionSize <= data.length
+    )
+      // The item should actually be selectable, but only for removing it from already selected items list.
+      // handleClickOnItem will handle the deselection logic.
+      // The item is not selectable if we reached/exceeded maximumSelectionSize and is not already selected.
+      return data.some(
+        (d) => flattenToAppURL(d['@id']) === flattenToAppURL(item['@id']),
+      );
+    return selectableTypes.length > 0
+      ? selectableTypes.indexOf(item['@type']) >= 0
       : true;
   };
 
@@ -315,16 +328,24 @@ class ObjectBrowserBody extends Component {
           !this.props.maximumSelectionSize ||
           this.props.mode === 'multiple' ||
           !this.props.data ||
-          this.props.data.length < this.props.maximumSelectionSize
+          this.props.data.length <= this.props.maximumSelectionSize
         ) {
+          let isDeselecting;
+          if (this.props.mode === 'multiple' && Array.isArray(this.props.data))
+            isDeselecting = this.props.data.some(
+              (d) => flattenToAppURL(d['@id']) === flattenToAppURL(item['@id']),
+            );
           this.onSelectItem(item);
           let length = this.props.data ? this.props.data.length : 0;
-
-          let stopSelecting =
-            this.props.mode !== 'multiple' ||
-            (this.props.maximumSelectionSize > 0 &&
-              length + 1 >= this.props.maximumSelectionSize);
-
+          let stopSelecting = this.props.mode !== 'multiple';
+          if (isDeselecting && !stopSelecting)
+            stopSelecting =
+              this.props.maximumSelectionSize > 0 &&
+              length - 1 >= this.props.maximumSelectionSize;
+          else
+            stopSelecting =
+              this.props.maximumSelectionSize > 0 &&
+              length + 1 >= this.props.maximumSelectionSize;
           if (stopSelecting) {
             this.props.closeObjectBrowser();
           }

package/src/components/manage/Sidebar/Sidebar.jsx

@@ -138,6 +138,7 @@ const Sidebar = (props) => {
           panes={[
             !!documentTab && {
               menuItem: {
+                key: 'documentTab',
                 as: 'button',
                 className: 'ui button',
                 content: type || intl.formatMessage(messages.document),
@@ -152,6 +153,7 @@ const Sidebar = (props) => {
             },
             !!blockTab && {
               menuItem: {
+                key: 'blockTab',
                 as: 'button',
                 className: 'ui button',
                 content: intl.formatMessage(messages.block),

package/src/components/manage/Sidebar/SidebarPopup.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
@@ -9,7 +9,7 @@ const DEFAULT_TIMEOUT = 500;
 const SidebarPopup = (props) => {
   const { children, open, onClose, overlay } = props;
 
-  const asideElement = React.createRef();
+  const asideElement = React.useRef();
 
   const handleClickOutside = (e) => {
     if (asideElement && doesNodeContainClick(asideElement.current, e)) return;
@@ -32,9 +32,13 @@ const SidebarPopup = (props) => {
           classNames="overlay-container"
           unmountOnExit
         >
-          <Portal node={document?.body}>
-            <div className="overlay-container"></div>
-          </Portal>
+          <>
+            {document?.body &&
+              createPortal(
+                <div className="overlay-container"></div>,
+                document?.body,
+              )}
+          </>
         </CSSTransition>
       )}
       <CSSTransition
@@ -43,23 +47,26 @@ const SidebarPopup = (props) => {
         classNames="sidebar-container"
         unmountOnExit
       >
-        <Portal>
-          <aside
-            role="presentation"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            onKeyDown={(e) => {
-              e.stopPropagation();
-            }}
-            ref={asideElement}
-            key="sidebarpopup"
-            className="sidebar-container"
-            style={{ overflowY: 'auto' }}
-          >
-            {children}
-          </aside>
-        </Portal>
+        <>
+          {createPortal(
+            <aside
+              role="presentation"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              onKeyDown={(e) => {
+                e.stopPropagation();
+              }}
+              ref={asideElement}
+              key="sidebarpopup"
+              className="sidebar-container"
+              style={{ overflowY: 'auto' }}
+            >
+              {children}
+            </aside>,
+            document.body,
+          )}
+        </>
       </CSSTransition>
     </>
   );

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 /**
  * Portal that wraps Sidebar components
- * @param {Array} children Sidebar content
+ * @param {React.ReactNode} children Sidebar content
  * @param {bool} selected Sidebar needs to know when the related block is selected
  * @param {string} tab Element id where to insert sidebar content, default: sidebar-properties
  * @returns {string} Rendered sidebar
@@ -16,8 +16,9 @@ const SidebarPortal = ({ children, selected, tab = 'sidebar-properties' }) => {
 
   return (
     <>
-      {selected && (
-        <Portal node={isClient && document.getElementById(tab)}>
+      {isClient &&
+        selected &&
+        createPortal(
           <div role="form" style={{ height: '100%' }}>
             <div
               style={{ height: '100%' }}
@@ -31,9 +32,9 @@ const SidebarPortal = ({ children, selected, tab = 'sidebar-properties' }) => {
             >
               {children}
             </div>
-          </div>
-        </Portal>
-      )}
+          </div>,
+          document.getElementById(tab),
+        )}
     </>
   );
 };

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

@@ -181,7 +181,9 @@ class Toolbar extends Component {
     types: [],
   };
 
+  toolbarRef = React.createRef();
   toolbarWindow = React.createRef();
+  buttonRef = React.createRef();
 
   constructor(props) {
     super(props);
@@ -262,8 +264,9 @@ class Toolbar extends Component {
     );
   };
 
-  closeMenu = () =>
+  closeMenu = () => {
     this.setState(() => ({ showMenu: false, loadedComponents: [] }));
+  };
 
   loadComponent = (type) => {
     const { loadedComponents } = this.state;
@@ -285,6 +288,15 @@ class Toolbar extends Component {
     }));
   };
 
+  toggleButtonPressed = (e) => {
+    const target = e.target;
+    const button =
+      target.tagName === 'BUTTON'
+        ? target
+        : this.findAncestor(e.target, 'button');
+    this.buttonRef.current = button;
+  };
+
   toggleMenu = (e, selector) => {
     if (this.state.showMenu) {
       this.closeMenu();
@@ -310,11 +322,29 @@ class Toolbar extends Component {
         menuStyle: { top: 0 },
       }));
     }
+    this.toggleButtonPressed(e);
     this.loadComponent(selector);
   };
 
+  findAncestor = (el, sel) => {
+    while (
+      (el = el.parentElement) &&
+      !(el.matches || el.matchesSelector).call(el, sel)
+    );
+    return el;
+  };
+
   handleClickOutside = (e) => {
+    const target = e.target;
     if (this.pusher && doesNodeContainClick(this.pusher, e)) return;
+
+    // if the click is on the same button, do not close the menu as it
+    // may be handled by the toggleMenu action
+    const button =
+      doesNodeContainClick(this.toolbarRef.current, e) &&
+      this.findAncestor(target, 'button');
+    if (button && button === this.buttonRef.current) return;
+
     this.closeMenu();
   };
 
@@ -427,7 +457,10 @@ class Toolbar extends Component {
               )}
             </div>
           </div>
-          <div className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}>
+          <div
+            className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}
+            ref={this.toolbarRef}
+          >
             <div className="toolbar-body">
               <div className="toolbar-actions">
                 {this.props.hideDefaultViewButtons && this.props.inner && (

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

@@ -306,7 +306,9 @@ class ArrayWidget extends Component {
           useDragHandle
           // react-sortable-hoc props:
           axis="xy"
-          onSortEnd={this.onSortEnd}
+          onSortEnd={(sortProp) => {
+            this.onSortEnd(selectedOption, sortProp);
+          }}
           menuShouldScrollIntoView={false}
           distance={4}
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
@@ -323,27 +325,27 @@ class ArrayWidget extends Component {
             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',
-                  },
-                ]
+                ? [
+                    ...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}

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

@@ -0,0 +1,48 @@
+import ColorPickerWidget from './ColorPickerWidget';
+import WidgetStory from './story';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ColorPickerWidget> = {
+  title: 'Edit Widgets/ColorPicker',
+  component: WidgetStory.bind({
+    widget: ColorPickerWidget,
+  }),
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPickerWidget>;
+
+export const Default: Story = {
+  args: {
+    id: 'favoriteColor',
+    title: 'Favorite Color',
+    colors: [
+      { name: 'red', label: 'red' },
+      { name: 'yellow', label: 'yellow' },
+      { name: 'green', label: 'green' },
+    ],
+  },
+};
+
+export const WithEnhancedStyleConfig: Story = {
+  args: {
+    id: 'favoriteColor',
+    title: 'Favorite Color',
+    colors: [
+      { name: 'red', label: 'red', style: { '--background-color': 'red' } },
+      {
+        name: 'yellow',
+        label: 'yellow',
+        style: { '--background-color': 'yellow' },
+      },
+      { name: 'green', label: 'green' },
+    ],
+  },
+};

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Form } from 'semantic-ui-react';
 import { Grid, Button } from 'semantic-ui-react';
+import { isEqual } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -11,7 +11,31 @@ const messages = defineMessages({
   },
 });
 
-const ColorPickerWidget = (props) => {
+type Color =
+  | {
+      name: string;
+      label: string;
+      style: Record<`--${string}`, string>;
+    }
+  | {
+      name: string;
+      label: string;
+      style: undefined;
+    };
+
+export type ColorPickerWidgetProps = {
+  id: string;
+  title: string;
+  value: string;
+  default: string;
+  required: boolean;
+  missing_value: unknown;
+  className: string;
+  onChange: (id: string, value: any) => void;
+  colors: Color[];
+};
+
+const ColorPickerWidget = (props: ColorPickerWidgetProps) => {
   const { id, title, required, value, onChange, colors, className } = props;
 
   const intl = useIntl();
@@ -30,6 +54,7 @@ const ColorPickerWidget = (props) => {
       className={className}
       id={'field-' + id}
     >
+      {/* @ts-ignore */}
       <Grid>
         <Grid.Row>
           <Grid.Column
@@ -44,21 +69,29 @@ const ColorPickerWidget = (props) => {
 
               <div className="buttons">
                 {colors.map((color) => {
+                  let colorValue: string | Color['style'];
+                  const colorName = color.name;
+                  if (color.style !== undefined) {
+                    colorValue = color.style;
+                  } else {
+                    colorValue = color.name;
+                  }
                   return (
                     <Button
-                      key={id + color.name}
-                      className={color.name}
+                      key={id + colorName}
+                      className={colorName}
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         onChange(
                           id,
-                          value === color.name
+                          value === colorValue
                             ? props.missing_value
-                            : color.name,
+                            : colorValue,
                         );
                       }}
-                      active={value === color.name}
+                      style={color.style}
+                      active={isEqual(value, colorValue)}
                       circular
                       aria-label={color.label}
                       title={color.label}
@@ -74,20 +107,4 @@ const ColorPickerWidget = (props) => {
   ) : null;
 };
 
-ColorPickerWidget.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  required: PropTypes.bool,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  colors: PropTypes.array,
-};
-
-ColorPickerWidget.defaultProps = {
-  required: false,
-  value: null,
-  onChange: null,
-  colors: [],
-};
-
 export default ColorPickerWidget;

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

@@ -9,7 +9,7 @@ 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, FormFieldWrapper, UniversalLink } from '@plone/volto/components';
 import loadable from '@loadable/component';
 import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
@@ -84,8 +84,8 @@ const FileWidget = (props) => {
   const imgsrc = value?.download
     ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
     : null || value?.data
-    ? `data:${value['content-type']};${value.encoding},${value.data}`
-    : null;
+      ? `data:${value['content-type']};${value.encoding},${value.data}`
+      : null;
 
   /**
    * Drop handler
@@ -112,7 +112,7 @@ const FileWidget = (props) => {
       if (imageMimetypes.includes(fields[1])) {
         setFileType(true);
         let imagePreview = document.getElementById(`field-${id}-image`);
-        imagePreview.src = reader.result;
+        if (imagePreview) imagePreview.src = reader.result;
       } else {
         setFileType(false);
       }
@@ -170,7 +170,11 @@ const FileWidget = (props) => {
         )}
       </Dropzone>
       <div className="field-file-name">
-        {value && value.filename}
+        {value && (
+          <UniversalLink href={value.download} download={true}>
+            {value.filename}
+          </UniversalLink>
+        )}
         {value && (
           <Button
             icon