@plone/volto 18.0.0-alpha.20 → 18.0.0-alpha.22

package/CHANGELOG.md

@@ -17,6 +17,37 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.22 (2024-03-19)
+
+### Bugfix
+
+- Correctly sort facet values if they are numbers @erral [#5864](https://github.com/plone/volto/issues/5864)
+- Cross-package manager Volto path resolver in `webpack-relative-resolver` @sneridagh [#5893](https://github.com/plone/volto/issues/5893)
+
+### Documentation
+
+- `Volto 18.0.0-alpha.21` and `volto-update-deps` documentation @sneridagh [#5892](https://github.com/plone/volto/issues/5892)
+
+## 18.0.0-alpha.21 (2024-03-18)
+
+### Breaking
+
+- Moved `devDependencies` and `dependencies` to where they belong. @sneridagh [#5879](https://github.com/plone/volto/issues/5879)
+
+### Feature
+
+- Match props passed to the BlockView if reused from the BlockEdit @sneridagh [#5876](https://github.com/plone/volto/issues/5876)
+- Added download link to filename in file widget @sabrina-bongiovanni [#5880](https://github.com/plone/volto/issues/5880)
+
+### Internal
+
+- Bump all the versions in GitHub workflows. @stevepiercy [#5873](https://github.com/plone/volto/issues/5873)
+
+### Documentation
+
+- Update `volto-slate` configuration documentation to indicate it is now part of Volto core. @MostafaMagdyy [#5342](https://github.com/plone/volto/issues/5342)
+- Modified `slate.useLinkedHeadings` documentation to mention feature is disabled for authenticated users after #5225 changes. @ichim-david [#5885](https://github.com/plone/volto/issues/5885)
+
 ## 18.0.0-alpha.20 (2024-03-14)
 
 ### Bugfix

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.0.0-alpha.20",
+  "version": "18.0.0-alpha.22",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -57,6 +57,7 @@
       "@plone/volto-slate/(.*)$": "<rootDir>/../volto-slate/src/$1",
       "@plone/registry": "<rootDir>/../registry/src",
       "@plone/registry/(.*)$": "<rootDir>/../registry/src/$1",
+      "@plone/volto": "<rootDir>/src/index.js",
       "~/config": "<rootDir>/src/config",
       "~/../locales/${lang}.json": "<rootDir>/locales/en.json",
       "(.*)/locales/(.*)": "<rootDir>/locales/$2",
@@ -145,99 +146,41 @@
     "node": "^16 || ^18 || ^20"
   },
   "dependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/eslint-parser": "7.22.15",
-    "@babel/plugin-proposal-export-default-from": "7.18.10",
-    "@babel/plugin-proposal-export-namespace-from": "7.18.9",
-    "@babel/plugin-proposal-json-strings": "7.18.6",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-    "@babel/plugin-proposal-throw-expressions": "7.18.6",
-    "@babel/plugin-syntax-export-namespace-from": "7.8.3",
-    "@babel/runtime": "7.20.6",
-    "@babel/types": "7.20.5",
-    "@loadable/babel-plugin": "5.13.2",
     "@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",
-    "axe-core": "4.4.2",
-    "babel-plugin-add-module-exports": "0.2.1",
-    "babel-plugin-lodash": "3.3.4",
-    "babel-plugin-react-intl": "5.1.17",
-    "babel-plugin-root-import": "6.1.0",
-    "babel-preset-razzle": "4.2.18",
-    "circular-dependency-plugin": "5.2.2",
     "classnames": "2.2.6",
-    "commander": "8.2.0",
     "connected-react-router": "6.8.0",
-    "crypto-random-string": "3.2.0",
-    "css-loader": "5.2.7",
     "debug": "4.3.2",
     "decorate-component-with-props": "1.2.1",
-    "deep-freeze": "0.0.1",
     "dependency-graph": "0.10.0",
     "detect-browser": "5.1.0",
     "diff": "3.5.0",
-    "eslint": "8.49.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.29.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
     "express": "4.17.3",
     "filesize": "6",
     "github-slugger": "1.4.0",
-    "glob": "7.1.6",
     "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
-    "html-webpack-plugin": "5.5.0",
     "http-proxy-middleware": "2.0.1",
-    "identity-obj-proxy": "3.0.0",
     "image-extensions": "1.1.0",
     "immutable": "3",
     "is-hotkey": "0.2.0",
     "is-url": "1.2.4",
-    "jest-file": "1.0.0",
     "jotai": "2.0.3",
     "jwt-decode": "2.2.0",
-    "less": "3.11.1",
-    "less-loader": "11.1.0",
     "linkify-it": "3.0.2",
-    "lint-staged": "10.2.2",
     "locale": "0.1.0",
     "lodash": "4.17.21",
     "lodash-move": "1.1.1",
-    "lodash-webpack-plugin": "0.11.6",
-    "mini-css-extract-plugin": "2.7.2",
     "moment": "2.29.4",
-    "moment-locales-webpack-plugin": "1.2.0",
     "object-assign": "4.1.1",
-    "pofile": "1.0.10",
-    "postcss": "8.4.31",
-    "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-less": "6.0.0",
-    "postcss-load-config": "3.1.4",
-    "postcss-loader": "7.0.2",
-    "postcss-overrides": "3.1.4",
-    "postcss-scss": "4.0.6",
     "prepend-http": "2",
-    "prettier": "3.2.5",
     "pretty-bytes": "5.3.0",
     "prismjs": "1.27.0",
     "process": "^0.11.10",
     "promise-file-reader": "1.0.2",
     "prop-types": "15.7.2",
     "query-string": "7.1.0",
-    "razzle": "4.2.18",
-    "razzle-dev-utils": "4.2.18",
-    "razzle-plugin-scss": "4.2.18",
     "rc-time-picker": "3.7.3",
     "react": "18.2.0",
     "react-anchor-link-smooth-scroll": "1.0.12",
@@ -285,15 +228,7 @@
     "slate": "0.100.0",
     "slate-hyperscript": "0.100.0",
     "slate-react": "0.98.4",
-    "start-server-and-test": "1.14.0",
-    "style-loader": "3.3.1",
-    "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",
-    "terser-webpack-plugin": "5.3.6",
     "tlds": "1.203.1",
     "undoo": "0.5.0",
     "universal-cookie": "4.0.4",
@@ -301,15 +236,23 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "webpack": "5.76.1",
-    "webpack-bundle-analyzer": "4.10.1",
-    "webpack-dev-server": "4.11.1",
-    "webpack-node-externals": "3.0.0",
-    "@plone/registry": "1.5.2",
-    "@plone/volto-slate": "18.0.0-alpha.10",
-    "@plone/scripts": "3.5.0"
+    "@plone/registry": "1.5.3",
+    "@plone/scripts": "3.6.1",
+    "@plone/volto-slate": "18.0.0-alpha.10"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/eslint-parser": "7.22.15",
+    "@babel/plugin-proposal-export-default-from": "7.18.10",
+    "@babel/plugin-proposal-export-namespace-from": "7.18.9",
+    "@babel/plugin-proposal-json-strings": "7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
+    "@babel/plugin-proposal-throw-expressions": "7.18.6",
+    "@babel/plugin-syntax-export-namespace-from": "7.8.3",
+    "@babel/runtime": "7.20.6",
+    "@babel/types": "7.20.5",
+    "@loadable/babel-plugin": "5.13.2",
+    "@loadable/webpack-plugin": "5.15.2",
     "@jest/globals": "^29.7.0",
     "@sinonjs/fake-timers": "^6.0.1",
     "@storybook/addon-actions": "^6.5.15",
@@ -333,30 +276,80 @@
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "7.1.1",
     "@typescript-eslint/parser": "7.1.1",
+    "autoprefixer": "10.4.8",
+    "axe-core": "4.4.2",
     "babel-loader": "9.1.0",
+    "babel-plugin-add-module-exports": "0.2.1",
+    "babel-plugin-lodash": "3.3.4",
+    "babel-plugin-react-intl": "5.1.17",
+    "babel-plugin-root-import": "6.1.0",
+    "babel-preset-razzle": "4.2.18",
     "bundlewatch": "0.3.3",
+    "circular-dependency-plugin": "5.2.2",
+    "css-loader": "5.2.7",
     "cypress": "13.6.6",
     "cypress-axe": "1.5.0",
     "cypress-file-upload": "5.0.8",
+    "deep-freeze": "0.0.1",
+    "eslint": "8.49.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.29.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "full-icu": "1.4.0",
+    "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.3",
     "jest-environment-jsdom": "^26",
     "jsdom": "^16.7.0",
+    "jest-file": "1.0.0",
     "jsonwebtoken": "9.0.0",
+    "less": "3.11.1",
+    "less-loader": "11.1.0",
+    "lodash-webpack-plugin": "0.11.6",
+    "mini-css-extract-plugin": "2.7.2",
+    "moment-locales-webpack-plugin": "1.2.0",
+    "postcss": "8.4.31",
+    "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-less": "6.0.0",
+    "postcss-load-config": "3.1.4",
+    "postcss-loader": "7.0.2",
+    "postcss-overrides": "3.1.4",
+    "postcss-scss": "4.0.6",
+    "prettier": "3.2.5",
+    "razzle": "4.2.18",
+    "razzle-dev-utils": "4.2.18",
+    "razzle-plugin-scss": "4.2.18",
     "react-docgen-typescript-plugin": "^1.0.5",
     "react-error-overlay": "6.0.9",
     "react-is": "^18.2.0",
     "release-it": "^17.1.1",
     "semver": "^7.5.4",
+    "start-server-and-test": "1.14.0",
+    "style-loader": "3.3.1",
+    "stylelint": "16.2.1",
+    "stylelint-config-idiomatic-order": "10.0.0",
+    "stylelint-prettier": "5.0.0",
+    "svg-loader": "0.0.2",
+    "svgo-loader": "3.0.3",
+    "terser-webpack-plugin": "5.3.6",
     "tmp": "0.2.1",
     "ts-jest": "^26.4.2",
     "ts-loader": "9.4.4",
-    "typescript": "5.2.2",
+    "typescript": "^5.4.2",
     "use-trace-update": "1.3.2",
     "wait-on": "6.0.0",
+    "webpack": "5.76.1",
+    "webpack-bundle-analyzer": "4.10.1",
+    "webpack-dev-server": "4.11.1",
+    "webpack-node-externals": "3.0.0",
     "why": "0.6.2",
-    "@plone/types": "1.0.0-alpha.6",
+    "@plone/types": "1.0.0-alpha.7",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {

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

@@ -394,6 +394,10 @@ class Add extends Component {
               this.setState({ formSelected: 'addForm' });
             }}
             global
+            // Properties to pass to the BlocksForm to match the View ones
+            history={this.props.history}
+            location={this.props.location}
+            token={this.props.token}
           />
           {this.state.isClient &&
             createPortal(

package/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -48,6 +48,9 @@ const BlocksForm = (props) => {
     blocksConfig = config.blocks.blocksConfig,
     editable = true,
     direction = 'vertical',
+    history,
+    location,
+    token,
   } = props;
 
   const blockList = getBlocks(properties);
@@ -271,6 +274,11 @@ const BlocksForm = (props) => {
               editable,
               showBlockChooser: selectedBlock === childId,
               detached: isContainer,
+              // Properties to pass to the BlocksForm to match the View ones
+              content: properties,
+              history,
+              location,
+              token,
             };
             return editBlockWrapper(
               dragProps,

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

@@ -22,6 +22,18 @@ const defaultShowFacet = (index) => {
     : values && Object.keys(values).length > 0;
 };
 
+export const sortFacetChoices = (choices) => {
+  const sorted_choices = choices.sort((a, b) =>
+    typeof a.label === 'string' && typeof b.label === 'string'
+      ? a.label.localeCompare(b.label, 'en', { sensitivity: 'base' })
+      : typeof a.label === 'number' && typeof b.label == 'number'
+        ? a.label - b.label
+        : 0,
+  );
+
+  return sorted_choices;
+};
+
 const Facets = (props) => {
   const [hidden, setHidden] = useState(true);
   const {
@@ -81,9 +93,7 @@ const Facets = (props) => {
                 : true,
             );
 
-          choices = choices.sort((a, b) =>
-            a.label.localeCompare(b.label, 'en', { sensitivity: 'base' }),
-          );
+          choices = sortFacetChoices(choices);
 
           const isMulti = facetSettings.multiple;
           const selectedValue = facets[facetSettings?.field?.value];

package/src/components/manage/Blocks/Search/components/Facets.test.jsx

@@ -0,0 +1,76 @@
+import { sortFacetChoices } from './Facets';
+
+describe('sortFacetChoices', () => {
+  it('sort choices with string labels', () => {
+    const choices = [
+      { label: 'b' },
+      { label: 'd' },
+      { label: 'a' },
+      { label: 'c' },
+    ];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 'a' },
+      { label: 'b' },
+      { label: 'c' },
+      { label: 'd' },
+    ]);
+  });
+  it('sort choices with string labels with accents (1)', () => {
+    const choices = [
+      { label: 'éventa' },
+      { label: 'portal' },
+      { label: 'newsitem' },
+      { label: 'eventb' },
+    ];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 'éventa' },
+      { label: 'eventb' },
+      { label: 'newsitem' },
+      { label: 'portal' },
+    ]);
+  });
+
+  it('sort choices with string labels with accents (2)', () => {
+    const choices = [
+      { label: 'eventa' },
+      { label: 'portal' },
+      { label: 'newsitem' },
+      { label: 'éventb' },
+    ];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 'eventa' },
+      { label: 'éventb' },
+      { label: 'newsitem' },
+      { label: 'portal' },
+    ]);
+  });
+
+  it('sort choices with int labels', () => {
+    const choices = [{ label: 7 }, { label: 3 }, { label: 1 }, { label: 4 }];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 1 },
+      { label: 3 },
+      { label: 4 },
+      { label: 7 },
+    ]);
+  });
+  it('sort choices with labels of any kind', () => {
+    const choices = [
+      { label: 7 },
+      { label: '1' },
+      { label: 'b' },
+      { label: 5 },
+    ];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 7 },
+      { label: '1' },
+      { label: 'b' },
+      { label: 5 },
+    ]);
+  });
+});

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

@@ -333,6 +333,10 @@ class Edit extends Component {
           this.setState({ formSelected: 'editForm' });
         }}
         global
+        // Properties to pass to the BlocksForm to match the View ones
+        history={this.props.history}
+        location={this.props.location}
+        token={this.props.token}
       />
     );
 

package/src/components/manage/Form/Form.jsx

@@ -719,6 +719,10 @@ class Form extends Component {
               showRestricted={this.props.showRestricted}
               editable={this.props.editable}
               isMainForm={this.props.editable}
+              // Properties to pass to the BlocksForm to match the View ones
+              history={this.props.history}
+              location={this.props.location}
+              token={this.props.token}
             />
             {this.state.isClient &&
               this.state.sidebarMetadataIsAvailable &&

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';
@@ -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

package/types/components/manage/Blocks/Search/components/Facets.d.ts

@@ -1,2 +1,3 @@
+export function sortFacetChoices(choices: any): any;
 export default Facets;
 declare function Facets(props: any): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Blocks/Search/components/Facets.test.d.ts

@@ -0,0 +1 @@
+export {};

package/webpack-plugins/webpack-relative-resolver.js

@@ -5,8 +5,11 @@ class RelativeResolverPlugin {
     this.source = source || 'resolve';
     this.target = target || 'resolve';
     this.registry = registry;
+    this.voltoModulePath = registry.isVoltoProject
+      ? require.resolve('@plone/volto').split('/').slice(0, -1).join('/')
+      : `${registry.voltoPath}/src`;
     this.voltoPaths = Object.assign(
-      { '@plone/volto/': `${registry.voltoPath}/src` },
+      { '@plone/volto/': this.voltoModulePath },
       ...Object.keys(registry.packages).map((k) => ({
         [k]: registry.packages[k].modulePath,
       })),