@plone/volto 18.0.0-alpha.14 → 18.0.0-alpha.16

package/CHANGELOG.md

@@ -17,6 +17,23 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.16 (2024-03-02)
+
+### Internal
+
+- Update dependencies
+  Fix prettier due to new version @sneridagh [#5815](https://github.com/plone/volto/issues/5815)
+
+### Documentation
+
+- Linkcheck thinks `README.md` is `http://README.md`. Bad linkcheck, no more 🍺 for you. @stevepiercy [#5816](https://github.com/plone/volto/issues/5816)
+
+## 18.0.0-alpha.15 (2024-03-01)
+
+### Breaking
+
+- Upgrade Volto core to use React 18.2.0 @sneridagh [#3221](https://github.com/plone/volto/issues/3221)
+
 ## 18.0.0-alpha.14 (2024-03-01)
 
 ### Breaking

package/jest-setup-afterenv.js

@@ -0,0 +1,2 @@
+// Jest-crap setup after env T_T
+import '@testing-library/jest-dom';

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.0.0-alpha.14",
+  "version": "18.0.0-alpha.16",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -80,6 +80,9 @@
       "./test-setup-config.js"
     ],
     "globalSetup": "./global-test-setup.js",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest-setup-afterenv.js"
+    ],
     "globals": {
       "__DEV__": true
     },
@@ -156,6 +159,7 @@
     "@loadable/component": "5.14.1",
     "@loadable/server": "5.14.0",
     "@loadable/webpack-plugin": "5.15.2",
+    "@redux-devtools/extension": "^3.3.0",
     "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
     "autoprefixer": "10.4.8",
@@ -186,13 +190,13 @@
     "draft-js-plugins-utils": "2.0.3",
     "draftjs-filters": "2.3.0",
     "eslint": "8.49.0",
-    "eslint-config-prettier": "9.0.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-import-resolver-babel-plugin-root-import": "1.1.1",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "express": "4.17.3",
@@ -232,7 +236,7 @@
     "postcss-overrides": "3.1.4",
     "postcss-scss": "4.0.6",
     "prepend-http": "2",
-    "prettier": "3.0.3",
+    "prettier": "3.2.5",
     "pretty-bytes": "5.3.0",
     "prismjs": "1.27.0",
     "process": "^0.11.10",
@@ -243,7 +247,7 @@
     "razzle-dev-utils": "4.2.18",
     "razzle-plugin-scss": "4.2.18",
     "rc-time-picker": "3.7.3",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-anchor-link-smooth-scroll": "1.0.12",
     "react-animate-height": "2.0.17",
     "react-beautiful-dnd": "13.0.0",
@@ -252,17 +256,16 @@
     "react-detect-click-outside": "1.1.1",
     "react-dnd": "5.0.0",
     "react-dnd-html5-backend": "5.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-dropzone": "11.1.0",
     "react-fast-compare": "2.0.4",
     "react-image-gallery": "1.2.7",
     "react-intersection-observer": "9.1.0",
     "react-intl": "3.8.0",
-    "react-intl-redux": "2.2.0",
+    "react-intl-redux": "2.3.0",
     "react-medium-image-zoom": "3.0.15",
     "react-popper": "^2.3.0",
-    "react-portal": "4.2.1",
-    "react-redux": "7.2.4",
+    "react-redux": "8.1.2",
     "react-router": "5.2.0",
     "react-router-config": "5.1.1",
     "react-router-dom": "5.2.0",
@@ -270,21 +273,20 @@
     "react-select": "4.3.1",
     "react-select-async-paginate": "0.5.3",
     "react-share": "2.3.1",
-    "react-side-effect": "2.1.0",
+    "react-side-effect": "2.1.2",
     "react-simple-code-editor": "0.7.1",
     "react-sortable-hoc": "2.0.0",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.2.0",
     "react-toastify": "5.4.1",
     "react-transition-group": "4.4.5",
     "react-virtualized": "9.22.3",
     "redraft": "0.10.2",
-    "redux": "4.1.0",
-    "redux-actions": "2.6.5",
+    "redux": "4.2.1",
+    "redux-actions": "3.0.0",
     "redux-connect": "10.0.0",
-    "redux-devtools-extension": "2.13.8",
-    "redux-localstorage-simple": "2.3.1",
+    "redux-localstorage-simple": "2.5.1",
     "redux-mock-store": "1.5.4",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "2.4.2",
     "rrule": "2.7.1",
     "semantic-ui-less": "2.4.1",
     "semantic-ui-react": "2.1.5",
@@ -294,9 +296,9 @@
     "slate-react": "0.98.4",
     "start-server-and-test": "1.14.0",
     "style-loader": "3.3.1",
-    "stylelint": "15.10.3",
-    "stylelint-config-idiomatic-order": "9.0.0",
-    "stylelint-prettier": "4.0.2",
+    "stylelint": "16.2.1",
+    "stylelint-config-idiomatic-order": "10.0.0",
+    "stylelint-prettier": "5.0.0",
     "superagent": "3.8.2",
     "svg-loader": "0.0.2",
     "svgo-loader": "3.0.3",
@@ -313,10 +315,9 @@
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
     "xmlrpc": "1.3.2",
-    "yarnhook": "0.5.1",
-    "@plone/registry": "1.4.0",
-    "@plone/volto-slate": "18.0.0-alpha.7",
-    "@plone/scripts": "3.3.2"
+    "@plone/registry": "1.5.1",
+    "@plone/volto-slate": "18.0.0-alpha.9",
+    "@plone/scripts": "3.4.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
@@ -330,13 +331,15 @@
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
     "@testing-library/cypress": "9.0.0",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/jest-dom": "6.4.1",
+    "@testing-library/react": "14.2.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "^29.5.8",
     "@types/lodash": "^4.14.201",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-test-renderer": "18.0.1",
+    "@types/react-test-renderer": "18.0.7",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "6.7.0",
     "@typescript-eslint/parser": "6.7.0",
@@ -353,7 +356,7 @@
     "jsonwebtoken": "9.0.0",
     "react-docgen-typescript-plugin": "^1.0.5",
     "react-error-overlay": "6.0.9",
-    "react-is": "^16.13.1",
+    "react-is": "^18.2.0",
     "release-it": "^16.2.1",
     "semver": "^7.5.4",
     "tmp": "0.2.1",
@@ -363,7 +366,7 @@
     "use-trace-update": "1.3.2",
     "wait-on": "6.0.0",
     "why": "0.6.2",
-    "@plone/types": "1.0.0-alpha.4",
+    "@plone/types": "1.0.0-alpha.5",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {

package/src/components/index.js

@@ -64,8 +64,8 @@ export { default as FileView } from '@plone/volto/components/theme/View/FileView
 export { default as ImageView } from '@plone/volto/components/theme/View/ImageView';
 export { default as NewsItemView } from '@plone/volto/components/theme/View/NewsItemView';
 
-export const EventView = loadable(() =>
-  import('@plone/volto/components/theme/View/EventView'),
+export const EventView = loadable(
+  () => import('@plone/volto/components/theme/View/EventView'),
 );
 
 export { default as ListingView } from '@plone/volto/components/theme/View/ListingView';
@@ -152,13 +152,14 @@ export { default as FormFieldWrapper } from '@plone/volto/components/manage/Widg
 export { default as ArrayWidget } from '@plone/volto/components/manage/Widgets/ArrayWidget';
 export { default as CheckboxWidget } from '@plone/volto/components/manage/Widgets/CheckboxWidget';
 
-export const DatetimeWidget = loadable(() =>
-  import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
+export const DatetimeWidget = loadable(
+  () => import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
 );
-export const RecurrenceWidget = loadable(() =>
-  import(
-    '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
-  ),
+export const RecurrenceWidget = loadable(
+  () =>
+    import(
+      '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
+    ),
 );
 
 export { default as FileWidget } from '@plone/volto/components/manage/Widgets/FileWidget';

package/src/components/manage/Add/Add.jsx

@@ -11,7 +11,7 @@ import { compose } from 'redux';
 import { keys, isEmpty } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Button, Grid, Menu } from 'semantic-ui-react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { v4 as uuid } from 'uuid';
 import qs from 'query-string';
 import { toast } from 'react-toastify';
@@ -366,8 +366,8 @@ class Add extends Component {
             }}
             global
           />
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
+          {this.state.isClient &&
+            createPortal(
               <Toolbar
                 pathname={this.props.pathname}
                 hideDefaultViewButtons
@@ -400,14 +400,12 @@ class Add extends Component {
                     </Button>
                   </>
                 }
-              />
-            </Portal>
-          )}
-          {visual && this.state.isClient && (
-            <Portal node={document.getElementById('sidebar')}>
-              <Sidebar />
-            </Portal>
-          )}
+              />,
+              document.getElementById('toolbar'),
+            )}
+          {visual &&
+            this.state.isClient &&
+            createPortal(<Sidebar />, document.getElementById('sidebar'))}
         </div>
       );
 

package/src/components/manage/Add/Add.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 config from '@plone/volto/registry';
@@ -16,9 +16,8 @@ beforeAll(() => {
   config.settings.loadables = {};
 });
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
 
 describe('Add', () => {
@@ -39,13 +38,12 @@ describe('Add', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an add component', () => {
@@ -67,13 +65,13 @@ describe('Add', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an add component with schema', () => {
@@ -106,12 +104,12 @@ describe('Add', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Aliases/Aliases.jsx

@@ -8,7 +8,7 @@ import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Button,
   Checkbox,
@@ -317,8 +317,8 @@ class Aliases extends Component {
             </Segment>
           </Form>
         </Segment.Group>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -335,9 +335,9 @@ class Aliases extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
@@ -9,9 +9,8 @@ import Aliases from './Aliases';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
 
 describe('Aliases', () => {
@@ -45,12 +44,13 @@ describe('Aliases', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Aliases location={{ pathname: '/blog/aliases' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';

package/src/components/manage/BlockChooser/BlockChooserButton.jsx

@@ -7,7 +7,7 @@ import config from '@plone/volto/registry';
 import { Button, Ref } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { usePopper } from 'react-popper';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 const messages = defineMessages({
   addBlock: {
@@ -115,8 +115,8 @@ const BlockChooserButton = (props) => {
             />
           </Ref>
         )}
-      {addNewBlockOpened && (
-        <Portal node={document.getElementById('body')}>
+      {addNewBlockOpened &&
+        createPortal(
           <div
             ref={setPopperElement}
             style={styles.popper}
@@ -148,9 +148,9 @@ const BlockChooserButton = (props) => {
               navRoot={navRoot}
               contentType={contentType}
             />
-          </div>
-        </Portal>
-      )}
+          </div>,
+          document.body,
+        )}
     </>
   );
 };

package/src/components/manage/BlockChooser/BlockChooserSearch.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
 import BlockChooserSearch from './BlockChooserSearch';
 import { Provider } from 'react-intl-redux';

package/src/components/manage/Blocks/Block/Settings.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Settings from './Settings';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';

package/src/components/manage/Blocks/Container/NewBlockAddButton.jsx

@@ -5,7 +5,7 @@ import { BlockChooser, Icon } from '@plone/volto/components';
 import { useDetectClickOutside } from '@plone/volto/helpers';
 import addSVG from '@plone/volto/icons/add.svg';
 import { usePopper } from 'react-popper';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 const messages = defineMessages({
   addBlock: {
@@ -59,24 +59,25 @@ const NewBlockAddButton = (props) => {
           <Icon name={addSVG} className="circled" size="24px" />
         </Button>
       </Ref>
-      {isOpenMenu ? (
-        <Portal node={document.getElementById('body')}>
-          <div
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-            className="container-chooser-wrapper"
-          >
-            <BlockChooser
-              onMutateBlock={onMutateBlock}
-              currentBlock={block}
-              showRestricted
-              blocksConfig={blocksConfig}
-              ref={blockChooserRef}
-            />
-          </div>
-        </Portal>
-      ) : null}
+      {isOpenMenu
+        ? createPortal(
+            <div
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+              className="container-chooser-wrapper"
+            >
+              <BlockChooser
+                onMutateBlock={onMutateBlock}
+                currentBlock={block}
+                showRestricted
+                blocksConfig={blocksConfig}
+                ref={blockChooserRef}
+              />
+            </div>,
+            document.body,
+          )
+        : null}
     </>
   );
 };

package/src/components/manage/Blocks/Image/Edit.jsx

@@ -283,19 +283,19 @@ class Edit extends Component {
               data.image_scales
                 ? undefined
                 : isInternalURL(data.url)
-                ? // Backwards compat in the case that the block is storing the full server URL
-                  (() => {
-                    if (data.size === 'l')
+                  ? // Backwards compat in the case that the block is storing the full server URL
+                    (() => {
+                      if (data.size === 'l')
+                        return `${flattenToAppURL(data.url)}/@@images/image`;
+                      if (data.size === 'm')
+                        return `${flattenToAppURL(
+                          data.url,
+                        )}/@@images/image/preview`;
+                      if (data.size === 's')
+                        return `${flattenToAppURL(data.url)}/@@images/image/mini`;
                       return `${flattenToAppURL(data.url)}/@@images/image`;
-                    if (data.size === 'm')
-                      return `${flattenToAppURL(
-                        data.url,
-                      )}/@@images/image/preview`;
-                    if (data.size === 's')
-                      return `${flattenToAppURL(data.url)}/@@images/image/mini`;
-                    return `${flattenToAppURL(data.url)}/@@images/image`;
-                  })()
-                : data.url
+                    })()
+                  : data.url
             }
             sizes={config.blocks.blocksConfig.image.getSizes(data)}
             alt={data.alt || ''}

package/src/components/manage/Blocks/Image/ImageSidebar.jsx

@@ -61,9 +61,9 @@ const ImageSidebar = (props) => {
                 data.image_scales
                   ? undefined
                   : isInternalURL(data.url)
-                  ? // Backwards compat in the case that the block is storing the full server URL
-                    `${flattenToAppURL(data.url)}/@@images/image/preview`
-                  : data.url
+                    ? // Backwards compat in the case that the block is storing the full server URL
+                      `${flattenToAppURL(data.url)}/@@images/image/preview`
+                    : data.url
               }
               sizes="188px"
               alt={intl.formatMessage(messages.preview)}

package/src/components/manage/Blocks/Image/View.jsx

@@ -51,21 +51,21 @@ export const View = ({ className, data, detached, properties, style }) => {
                   data.image_scales
                     ? undefined
                     : isInternalURL(data.url)
-                    ? // Backwards compat in the case that the block is storing the full server URL
-                      (() => {
-                        if (data.size === 'l')
+                      ? // Backwards compat in the case that the block is storing the full server URL
+                        (() => {
+                          if (data.size === 'l')
+                            return `${flattenToAppURL(data.url)}/@@images/image`;
+                          if (data.size === 'm')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/preview`;
+                          if (data.size === 's')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/mini`;
                           return `${flattenToAppURL(data.url)}/@@images/image`;
-                        if (data.size === 'm')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/preview`;
-                        if (data.size === 's')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/mini`;
-                        return `${flattenToAppURL(data.url)}/@@images/image`;
-                      })()
-                    : data.url
+                        })()
+                      : data.url
                 }
                 sizes={config.blocks.blocksConfig.image.getSizes(data)}
                 alt={data.alt || ''}

package/src/components/manage/Blocks/Image/View.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';

package/src/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -67,19 +67,19 @@ export default function withQuerystringResults(WrappedComponent) {
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[subrequestID].total / b_size)
-      : 0;
+        ? Math.ceil(querystringResults[subrequestID].total / b_size)
+        : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[subrequestID].batching?.prev
-      : null;
+        ? querystringResults[subrequestID].batching?.prev
+        : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[subrequestID].batching?.next
-      : null;
+        ? querystringResults[subrequestID].batching?.next
+        : null;
 
     const isImageGallery =
       (!data.variation && data.template === 'imageGallery') ||

package/src/components/manage/Blocks/Search/SelectStyling.jsx

@@ -48,8 +48,8 @@ export const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },