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

package/src/start-client.jsx

@@ -18,8 +18,6 @@ import Api from '@plone/volto/helpers/Api/Api';
 import { persistAuthToken } from '@plone/volto/helpers/AuthToken/AuthToken';
 import ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 
-export const history = createBrowserHistory();
-
 function reactIntlErrorHandler(error) {
   debug('i18n')(error);
 }
@@ -27,6 +25,15 @@ function reactIntlErrorHandler(error) {
 export default function client() {
   const api = new Api();
 
+  if (window.env.RAZZLE_SUBPATH_PREFIX) {
+    config.settings.subpathPrefix = window.env.RAZZLE_SUBPATH_PREFIX;
+  }
+  const history = createBrowserHistory({
+    basename: config.settings.subpathPrefix
+      ? config.settings.subpathPrefix
+      : '/',
+  });
+
   const store = configureStore(window.__data, history, api);
   persistAuthToken(store);
 
@@ -58,10 +65,6 @@ export default function client() {
   if (window.env.RAZZLE_LEGACY_TRAVERSE) {
     config.settings.legacyTraverse = true;
   }
-  // Support for setting the default language from a server environment variable
-  if (window.env.defaultLanguage) {
-    config.settings.defaultLanguage = window.env.defaultLanguage;
-  }
 
   loadableReady(() => {
     hydrateRoot(

package/src/start-server.js

@@ -18,14 +18,20 @@ export default function server() {
 
   server
     .listen(port, bind_address, () => {
-      console.log(`API server (API_PATH) is set to: ${app.apiPath}`);
-
-      if (app.devProxyToApiPath)
+      console.log(
+        `The Volto server will make API requests to: ${app.internalApiPath || app.apiPath}/++api++`,
+      );
+      console.log(
+        `The Volto client will make API requests to: ${app.apiPath}/++api++`,
+      );
+
+      if (app.devProxyToApiPath) {
         console.log(
           `Proxying API requests from ${app.publicURL}/++api++ to ${
             app.devProxyToApiPath
           }${app.proxyRewriteTarget || ''}`,
         );
+      }
       console.log(`🎭 Volto started at ${bind_address}:${port} 🚀`);
 
       if (!process.env.RAZZLE_PUBLIC_URL)

package/test-addons-loader.js

@@ -0,0 +1,3 @@
+export default function install(config) {
+  return config;
+}

package/test-setup-config.jsx

@@ -30,12 +30,10 @@ import { registerValidators } from '@plone/volto/config/validation';
 config.set('settings', {
   apiPath: 'http://localhost:8080/Plone',
   publicURL: 'http://localhost:3000',
-  defaultLanguage: 'en',
   supportedLanguages: ['en'],
   defaultPageSize: 25,
   showTags: true,
   showRelatedItems: true,
-  isMultilingual: false,
   nonContentRoutes,
   nonContentRoutesPublic,
   contentIcons: contentIcons,

package/test-setup-globals.js

@@ -1,12 +1,40 @@
+import '@testing-library/jest-dom';
+
 global.__CLIENT__ = true;
 global.__DEVELOPMENT__ = false;
+global.__SERVER__ = false;
+global.__TEST__ = true;
 
 window.matchMedia =
   window.matchMedia ||
-  function () {
+  function (query) {
     return {
-      matches: false,
+      matches: query === '(min-width: 1024px)',
       addListener: function () {},
       removeListener: function () {},
     };
   };
+
+vi.stubGlobal(
+  'fetch',
+  vi.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({}),
+      text: () => Promise.resolve(''),
+    }),
+  ),
+);
+
+vi.stubGlobal('localStorage', {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+});
+
+vi.stubGlobal('sessionStorage', {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+});

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

@@ -56,6 +56,13 @@
   background-color: rgba(120, 192, 215, 0.375);
 }
 
+.block.selected.error::before,
+.block.selected.error:hover::before,
+.block.error:hover::before,
+.block.error::before {
+  border-color: #ff0000 !important;
+}
+
 #toolbar .toolbar-actions .blockCount {
   position: absolute;
   margin-top: 18px;
@@ -427,10 +434,18 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
   top: 1em;
   right: 1em;
 
+  .sidebar-container & .ui.icon.button:hover {
+    background: transparent !important;
+  }
+
   .icon.circled {
     border: 1px solid #e4e8ec;
     background: #f3f5f7;
     box-shadow: inset 0 0 0 0.14285714rem transparent !important;
+
+    &:hover {
+      background-color: #e4e8ec;
+    }
   }
 }
 
@@ -983,6 +998,17 @@ div.image-upload-widget-image {
   }
 }
 
+// In the sidebar, the height is forced on all .ui.input T_T
+.ui.form .ui.input.input-anchorlink-theme,
+.ui.form
+  .inline.field
+  .link-form-container
+  .wrapper
+  .ui.input.input-anchorlink-theme
+  input {
+  height: 34px;
+}
+
 .block.image.align.left,
 .block.image.align.right {
   img {

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

@@ -107,6 +107,18 @@
       top: auto;
       bottom: 100%;
     }
+
+    .search-feedback {
+      position: absolute;
+      overflow: hidden;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      border: 0;
+      margin: -1px;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+    }
   }
 
   .ui.table .icon-align,
@@ -149,8 +161,12 @@
   .ui.table .button-margin {
     padding: 4px;
     margin-right: 1em;
-    background-color: rgb(228, 1, 102);
+    background-color: #007eb1;
     color: white;
+
+    &.expired-past {
+      background-color: rgb(228, 1, 102);
+    }
   }
 }
 
@@ -185,10 +201,6 @@
     white-space: normal;
     word-break: break-all;
   }
-
-  .broken-links-list {
-    margin-top: 30px;
-  }
 }
 
 .contenttype-event {
@@ -255,3 +267,66 @@
   overflow: auto;
   max-height: 75vh;
 }
+
+.contents-dropzone {
+  position: relative;
+
+  &.drag-over {
+    overflow: hidden;
+  }
+}
+
+.dropzone-overlay {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3px dashed black;
+  animation: fadeIn 0.3s ease-in;
+  backdrop-filter: blur(2px);
+  inset: 0;
+}
+
+.dropzone-content {
+  animation: scaleIn 0.3s ease-out;
+  color: black;
+  text-align: center;
+
+  h3 {
+    margin-top: 16px;
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  p {
+    font-size: 18px;
+  }
+
+  h3,
+  p {
+    color: black;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

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

@@ -443,6 +443,10 @@ fieldset.invisible {
   padding: 0;
   border: none;
   margin: 0;
+  // Reset visibility, this 'invisible' is not meant to hide the fieldset
+  // This prevents issues when used along other CSS framworks that might
+  // have this utility class defined (e.g. TailwindCSS)
+  visibility: initial;
 }
 
 .vertical-form {
@@ -674,8 +678,19 @@ img.responsive {
   }
 }
 
-// Deprecated as per https://github.com/plone/volto/issues/1265
-// @import 'utils';
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(1px, 1px, 1px, 1px); /* IE-style CSS for compatibility */
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
 @import (multiple) '../extras/fonts';
 @import 'toolbar';
 @import 'draftjs';

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

@@ -292,3 +292,82 @@ body.babel-view .field.language-independent-field {
     margin-left: 8px;
   }
 }
+
+// ButtonsWidget and friends 2025
+:root {
+  --border-color-hover: var(--quanta-sapphire);
+  --border-color-pressed: var(--quanta-sapphire);
+  --border-color-disabled: #d4d4d5;
+  --text-color-disabled: #a8a8a8;
+}
+
+.field.widget {
+  .buttons-widget {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .buttons-widget-option {
+      padding: 5px;
+      border-radius: 3px;
+      aspect-ratio: 1/1;
+      font-size: 1em;
+      line-height: initial;
+
+      &[data-hovered='true'] {
+        box-shadow: inset 0 0 0 1px var(--border-color-hover, #2996da);
+      }
+
+      &[data-selected='true'] {
+        box-shadow: inset 0 0 0 1px var(--border-color-pressed, #2996da);
+      }
+
+      svg.icon {
+        margin: 0 !important;
+        opacity: 0.9;
+        vertical-align: top;
+      }
+    }
+  }
+}
+
+.buttons-widget-option {
+  &[data-disabled='true'] {
+    border-color: var(--border-color-disabled);
+    color: var(--text-color-disabled);
+  }
+}
+
+.ui.form .query-widget {
+  .location-object-browser {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+
+    .object-browser-field {
+      min-height: 60px;
+      flex: 1 0 auto;
+      padding-right: 1em;
+      padding-left: 1em;
+      margin-bottom: 0px;
+    }
+
+    .object-browser-field + .field {
+      margin-bottom: 0px;
+    }
+
+    .objectbrowser-field {
+      height: 100%;
+    }
+
+    .reference-widget-depth {
+      .field {
+        margin-bottom: 0px;
+      }
+    }
+  }
+
+  .location-object-browser + button.ui.button {
+    padding-top: 0;
+  }
+}

package/tsconfig.declarations.json

@@ -10,7 +10,7 @@
     "jsx": "react-jsx",
     "preserveSymlinks": true,
     "downlevelIteration": true,
-    "types": ["vitest/globals", "jest"],
+    "types": ["vitest/globals"],
     "paths": {
       "@plone/volto/*": ["./src/*"],
       "react": ["./node_modules/@types/react"],

package/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vitest/globals", "jest"],
-    "module": "commonjs",
+    "target": "es2022",
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "types": ["vitest/globals"],
+    "module": "preserve",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -11,7 +11,6 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "strictPropertyInitialization": false,
-    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

package/types/components/manage/Blocks/Teaser/schema.d.ts

@@ -27,6 +27,7 @@ export function TeaserSchema({ data, intl }: {
         };
         head_title: {
             title: any;
+            description: any;
         };
         description: {
             title: any;

package/types/components/manage/Contents/DropZoneContent.d.ts

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

package/types/components/manage/Contents/__mocks__/index.d.ts

@@ -1,2 +1,2 @@
-export declare const Contents: jest.Mock<import("react/jsx-runtime").JSX.Element, [], any>;
-export declare const ContentsRenameModal: jest.Mock<import("react/jsx-runtime").JSX.Element, [], any>;
+export declare const Contents: any;
+export declare const ContentsRenameModal: any;

package/types/components/manage/Controlpanels/Relations/RelationsMatrix.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

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

@@ -1,2 +1,18 @@
-declare const _default: any;
-export default _default;
+export default RenderUsers;
+/**
+ * RenderUsers functional component.
+ * @function RenderUsers
+ */
+declare function RenderUsers(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace RenderUsers {
+    namespace propTypes {
+        let user: any;
+        let roles: any;
+        let onDelete: any;
+        let isUserManager: any;
+        let listUsers: any;
+        let updateUser: any;
+        let inheritedRole: any;
+        let userschema: any;
+    }
+}

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,8 +4,8 @@ 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 RenderUsers: 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>;
 export declare const RenderGroups: import("@loadable/component").LoadableComponent<any>;

package/types/components/manage/Form/__mocks__/index.d.ts

@@ -1,8 +1,8 @@
-export declare const Field: jest.Mock<import("react/jsx-runtime").JSX.Element, [props: any], any>;
-export declare const InlineForm: jest.Mock<import("react/jsx-runtime").JSX.Element, [props: any], any>;
-export declare const ModalForm: jest.Mock<import("react/jsx-runtime").JSX.Element, [props: any], any>;
-export declare const UndoToolbar: jest.Mock<import("react/jsx-runtime").JSX.Element, [], any>;
-export declare const BlocksToolbar: jest.Mock<import("react/jsx-runtime").JSX.Element, [], any>;
-export declare const BlockDataForm: jest.Mock<import("react/jsx-runtime").JSX.Element, [props: any], any>;
-export declare const BlocksForm: jest.Mock<import("react/jsx-runtime").JSX.Element, [props: any], any>;
-export declare const Form: jest.Mock<import("react/jsx-runtime").JSX.Element, [props: any], any>;
+export declare const Field: any;
+export declare const InlineForm: any;
+export declare const ModalForm: any;
+export declare const UndoToolbar: any;
+export declare const BlocksToolbar: any;
+export declare const BlockDataForm: any;
+export declare const BlocksForm: any;
+export declare const Form: any;

package/types/components/manage/Multilingual/ManageTranslations.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

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

@@ -31,7 +31,7 @@ declare function withObjectBrowser(WrappedComponent: any): {
          *     }),
          *   });
          */
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

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/components/manage/Widgets/AlignWidget.d.ts

@@ -1,12 +1,10 @@
-export function defaultActionsInfo({ intl }: {
-    intl: any;
-}): {
-    left: any[];
-    right: any[];
-    center: any[];
-    narrow: any[];
-    wide: any[];
-    full: any[];
+import { type ActionInfo, type ButtonsWidgetProps } from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+export declare const defaultActionsInfo: ({ intl, }: {
+    intl: IntlShape;
+}) => Record<string, ActionInfo>;
+type AlignWidgetProps = ButtonsWidgetProps & {
+    defaultAction?: string;
 };
+declare const AlignWidget: (props: AlignWidgetProps) => import("react/jsx-runtime").JSX.Element;
 export default AlignWidget;
-declare function AlignWidget(props: any): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Widgets/AlignWidget.stories.d.ts

@@ -1,4 +1,5 @@
 export const Align: any;
+export const AlignDefaultLeft: any;
 declare namespace _default {
     export let title: string;
     export { AlignWidget as component };

package/types/components/manage/Widgets/BlockAlignment.d.ts

@@ -0,0 +1,7 @@
+import { type ActionInfo, type ButtonsWidgetProps } from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+export declare const defaultActionsInfo: ({ intl, }: {
+    intl: IntlShape;
+}) => Record<string, ActionInfo>;
+declare const BlockAlignmentWidget: (props: ButtonsWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockAlignmentWidget;

package/types/components/manage/Widgets/BlockAlignment.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BlockAlignment from './BlockAlignment';
+declare const meta: Meta<typeof BlockAlignment>;
+export default meta;
+type Story = StoryObj<typeof BlockAlignment>;
+export declare const DefaultAlignment: Story;
+export declare const CustomActions: Story;
+export declare const FilteredActions: Story;

package/types/components/manage/Widgets/BlockWidth.d.ts

@@ -0,0 +1,7 @@
+import type { IntlShape } from 'react-intl';
+import { type ActionInfo, type ButtonsWidgetProps } from './ButtonsWidget';
+export declare const defaultActionsInfo: ({ intl, }: {
+    intl: IntlShape;
+}) => Record<string, ActionInfo>;
+declare const BlockWidthWidget: (props: ButtonsWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockWidthWidget;

package/types/components/manage/Widgets/BlockWidth.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BlockWidth from './BlockWidth';
+declare const meta: Meta<typeof BlockWidth>;
+export default meta;
+type Story = StoryObj<typeof BlockWidth>;
+export declare const DefaultWidth: Story;