@plone/volto 18.29.0 → 18.30.0

package/src/components/manage/Controlpanels/Users/UsersControlpanel.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
 import jwt from 'jsonwebtoken';
 
 import UsersControlpanel from './UsersControlpanel';
@@ -41,10 +42,10 @@ describe('UsersControlpanel', () => {
     const { container } = await act(async () => {
       return render(
         <Provider store={store}>
-          <>
-            <UsersControlpanel location={{ pathname: '/blog' }} />
+          <MemoryRouter initialEntries={['/controlpanel/users']}>
+            <UsersControlpanel />
             <div id="toolbar"></div>
-          </>
+          </MemoryRouter>
         </Provider>,
       );
     });

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+
+import SidebarPortal from './SidebarPortal';
+
+describe('SidebarPortal', () => {
+  let portalRoot: HTMLDivElement | null;
+
+  beforeEach(() => {
+    portalRoot = document.createElement('div');
+    portalRoot.setAttribute('id', 'sidebar-properties');
+    document.body.appendChild(portalRoot);
+  });
+
+  afterEach(() => {
+    cleanup();
+    portalRoot?.remove();
+    portalRoot = null;
+  });
+
+  test('renders the sidebar portal when the block is selected', async () => {
+    render(
+      <SidebarPortal selected={true}>
+        <p>Tested!</p>
+      </SidebarPortal>,
+    );
+
+    expect(await screen.findByText('Tested!')).toBeInTheDocument();
+  });
+
+  test('does not render the sidebar portal when the block is not selected', () => {
+    render(
+      <SidebarPortal selected={false}>
+        <p>Tested, but you should not see this!</p>
+      </SidebarPortal>,
+    );
+
+    expect(
+      screen.queryByText('Tested, but you should not see this!'),
+    ).not.toBeInTheDocument();
+  });
+});

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/Toolbar/Toolbar.jsx

@@ -68,6 +68,10 @@ const messages = defineMessages({
     id: 'Shrink toolbar',
     defaultMessage: 'Shrink toolbar',
   },
+  expandToolbar: {
+    id: 'Expand toolbar',
+    defaultMessage: 'Expand toolbar',
+  },
   personalInformation: {
     id: 'Personal Information',
     defaultMessage: 'Personal Information',
@@ -455,6 +459,7 @@ class Toolbar extends Component {
             </div>
           </div>
           <div
+            id="toolbar-body"
             className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}
             ref={this.toolbarRef}
           >
@@ -617,15 +622,20 @@ class Toolbar extends Component {
             </div>
             <div className="toolbar-handler">
               <button
-                aria-label={this.props.intl.formatMessage(
-                  messages.shrinkToolbar,
-                )}
                 className={cx('toolbar-handler-button', {
                   [this.props.content?.review_state]:
                     this.props.content?.review_state,
                 })}
                 onClick={this.handleShrink}
-              />
+                aria-expanded={expanded}
+                aria-controls="toolbar-body"
+              >
+                <span aria-live="assertive" className="visually-hidden">
+                  {expanded
+                    ? this.props.intl.formatMessage(messages.shrinkToolbar)
+                    : this.props.intl.formatMessage(messages.expandToolbar)}
+                </span>
+              </button>
             </div>
           </div>
           <div className="pusher" />

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
 import { useIntl, defineMessages } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import loadable from '@loadable/component';
 import { connect } from 'react-redux';
@@ -14,6 +14,7 @@ import config from '@plone/volto/registry';
 import {
   flattenToAppURL,
   getBaseUrl,
+  getParentUrl,
   isInternalURL,
   normalizeUrl,
   removeProtocol,
@@ -109,6 +110,9 @@ const UnconnectedImageInput = (props) => {
   const linkEditor = useLinkEditor();
   const location = useLocation();
   const dispatch = useDispatch();
+  const isFolderish = useSelector(
+    (state) => state?.content?.data?.is_folderish,
+  );
   const contextUrl = location.pathname;
 
   const [uploading, setUploading] = React.useState(false);
@@ -156,6 +160,8 @@ const UnconnectedImageInput = (props) => {
 
   const handleUpload = React.useCallback(
     (eventOrFile) => {
+      let uploadUrl = getBaseUrl(contextUrl);
+      if (!isFolderish) uploadUrl = getParentUrl(uploadUrl);
       if (restrictFileUpload === true) return;
       eventOrFile.target && eventOrFile.stopPropagation();
 
@@ -171,7 +177,7 @@ const UnconnectedImageInput = (props) => {
         const fields = fileData.match(/^data:(.*);(.*),(.*)$/);
         dispatch(
           createContent(
-            getBaseUrl(contextUrl),
+            uploadUrl,
             {
               '@type': 'Image',
               title: file.name,
@@ -188,11 +194,12 @@ const UnconnectedImageInput = (props) => {
       });
     },
     [
+      contextUrl,
+      isFolderish,
       restrictFileUpload,
       intl.formatMessage,
       dispatch,
-      props,
-      contextUrl,
+      props.block,
       requestId,
     ],
   );

package/src/helpers/Extensions/withBlockSchemaEnhancer.jsx

@@ -305,8 +305,11 @@ export const EMPTY_STYLES_SCHEMA = {
 
 /**
  * Adds the `styles` field and 'styling' fieldset in a given schema
+ * @param {object} params Helper params
+ * @param {import('@plone/types').JSONSchema} params.schema Schema to enhance
+ * @param {import('react-intl').IntlShape} params.intl intl helper for translations
  */
-export const addStyling = ({ schema, formData, intl }) => {
+export const addStyling = ({ schema, intl }) => {
   if (isEmpty(find(schema.fieldsets, { id: 'styling' }))) {
     schema.fieldsets.push({
       id: 'styling',

package/src/helpers/Url/Url.js

@@ -381,6 +381,7 @@ export function flattenScales(path, image) {
   const basePath = image.base_path || path;
   const imageInfo = {
     ...image,
+    scales: image.scales || {},
     download: flattenToAppURL(removeObjectIdFromURL(basePath, image.download)),
   };
 

package/theme/themes/pastanaga/extras/toolbar.less

@@ -129,10 +129,6 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
     }
 
     .toolbar-handler {
-      .toolbar-handler-button {
-        opacity: 0.3;
-      }
-
       // State colors
       .published:before {
         background: @teal-blue;
@@ -252,6 +248,18 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
         cursor: pointer;
         transition: opacity 0.3s;
 
+        .visually-hidden {
+          position: absolute !important;
+          overflow: hidden !important;
+          width: 1px !important;
+          height: 1px !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0 0 0 0) !important;
+          white-space: nowrap !important;
+        }
+
         &::before {
           position: relative;
           display: block;
@@ -259,6 +267,15 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
           height: 4px;
           background-color: red;
           content: '';
+          opacity: 0.65;
+        }
+
+        &:hover,
+        &:focus {
+          &::before {
+            opacity: 1;
+            transition: opacity 0.3s;
+          }
         }
       }
     }
@@ -714,7 +731,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
     }
 
     .compare-languages {
-      @media (max-width: @largestMobileScreen - 1) {
+      @media (max-width: calc(@largestMobileScreen - 1px)) {
         position: fixed;
         top: 101px;
         left: 0;

package/types/components/manage/Controlpanels/Users/UsersControlpanel.d.ts

@@ -1,2 +1,6 @@
-declare const _default: any;
-export default _default;
+export default UsersControlpanel;
+/**
+ * UsersControlpanel functional component.
+ * @function UsersControlpanel
+ */
+declare function UsersControlpanel(): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Controlpanels/index.d.ts

@@ -4,7 +4,7 @@ export declare const RulesControlpanel: import("@loadable/component").LoadableCl
 export declare const AddRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const EditRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const ConfigureRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
-export declare const UsersControlpanel: import("@loadable/component").LoadableClassComponent<any>;
+export declare const UsersControlpanel: import("@loadable/component").LoadableComponent<unknown>;
 export declare const RenderUsers: import("@loadable/component").LoadableComponent<any>;
 export declare const UserGroupMembershipControlPanel: import("@loadable/component").LoadableComponent<unknown>;
 export declare const GroupsControlpanel: import("@loadable/component").LoadableClassComponent<any>;

package/types/components/manage/Sidebar/SidebarPortal.d.ts

@@ -1,16 +1,8 @@
-export default SidebarPortal;
-/**
- * Portal that wraps Sidebar components
- * @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
- */
-declare function SidebarPortal({ children, selected, tab }: React.ReactNode): string;
-declare namespace SidebarPortal {
-    namespace propTypes {
-        let children: any;
-        let selected: any;
-    }
-}
 import React from 'react';
+type SidebarPortalProps = {
+    children?: React.ReactNode;
+    selected: boolean;
+    tab?: string;
+};
+declare const SidebarPortal: ({ children, selected, tab, }: SidebarPortalProps) => React.ReactPortal;
+export default SidebarPortal;

package/types/helpers/Extensions/withBlockSchemaEnhancer.d.ts

@@ -39,11 +39,10 @@ export namespace EMPTY_STYLES_SCHEMA {
     let properties: {};
     let required: any[];
 }
-export function addStyling({ schema, formData, intl }: {
-    schema: any;
-    formData: any;
-    intl: any;
-}): any;
+export function addStyling({ schema, intl }: {
+    schema: import("@plone/types").JSONSchema;
+    intl: import("react-intl").IntlShape;
+}): import("@plone/types").JSONSchema;
 /**
  * Sets the field name as first field in schema
  */

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createPortal } from 'react-dom';
-
-/**
- * Portal that wraps Sidebar components
- * @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
- */
-const SidebarPortal = ({ children, selected, tab = 'sidebar-properties' }) => {
-  const [isClient, setIsClient] = React.useState(null);
-
-  React.useEffect(() => setIsClient(true), []);
-
-  return (
-    <>
-      {isClient &&
-        selected &&
-        createPortal(
-          <div role="form" style={{ height: '100%' }}>
-            <div
-              style={{ height: '100%' }}
-              role="presentation"
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-              onKeyDown={(e) => {
-                e.stopPropagation();
-              }}
-            >
-              {children}
-            </div>
-          </div>,
-          document.getElementById(tab),
-        )}
-    </>
-  );
-};
-
-SidebarPortal.propTypes = {
-  children: PropTypes.any,
-  selected: PropTypes.bool.isRequired,
-};
-
-export default SidebarPortal;

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import ShallowRenderer from 'react-test-renderer/shallow';
-
-import SidebarPortal from './SidebarPortal';
-
-test('sidebar portal is rendered when the block is selected', () => {
-  const renderer = new ShallowRenderer();
-  renderer.render(
-    <SidebarPortal selected={true}>
-      <p>Tested!</p>
-    </SidebarPortal>,
-  );
-  const component = renderer.getRenderOutput();
-  expect(component).toMatchSnapshot();
-});
-
-test('sidebar portal is not rendered when the block is not selected', () => {
-  const renderer = new ShallowRenderer();
-  renderer.render(
-    <SidebarPortal selected={false}>
-      <p>Tested, but you shouldn't see this in the snapshot!</p>
-    </SidebarPortal>,
-  );
-  const component = renderer.getRenderOutput();
-  expect(component).toMatchSnapshot();
-});