@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.30

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

@@ -363,6 +363,7 @@ button {
     margin-left: 8px;
 
     h4 {
+      display: inline;
       margin-bottom: 0;
       font-weight: @bold;
     }
@@ -394,8 +395,6 @@ button {
 }
 
 .users-control-panel .table {
-  overflow-x: scroll;
-
   &::-webkit-scrollbar {
     width: 3px;
     height: 3px; /* scrollbar height */
@@ -443,6 +442,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 +677,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';
@@ -698,4 +712,6 @@ img.responsive {
 @import 'views';
 @import 'toc';
 @import 'grid.less';
+@import 'block-types.less';
+@import 'videoembed.less';
 .loadUIOverrides();

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;
@@ -259,6 +255,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 +719,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/theme/themes/pastanaga/extras/videoembed.less

@@ -0,0 +1,22 @@
+@videoIconSize: 100px;
+
+.video-embed {
+  position: relative;
+
+  img {
+    min-width: 100%;
+    min-height: 100%;
+  }
+
+  button.video-play-button {
+    position: absolute;
+    top: calc(50% - @videoIconSize / 2);
+    left: calc(50% - @videoIconSize / 2);
+    width: @videoIconSize;
+    height: @videoIconSize;
+    border: 4px solid @white;
+    border-radius: 50px;
+    background: transparent;
+    cursor: pointer;
+  }
+}

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/actions/blockTypes/blockTypes.d.ts

@@ -0,0 +1,7 @@
+export declare function getBlockTypes(id?: string | null, path?: string | null): {
+    type: string;
+    request: {
+        op: string;
+        path: string;
+    };
+};

package/types/components/index.d.ts

@@ -54,7 +54,7 @@ export { default as Actions } from "@plone/volto/components/manage/Actions/Actio
 export { default as Add } from "@plone/volto/components/manage/Add/Add";
 export { default as Circle } from "@plone/volto/components/manage/Contents/circle";
 export { default as Delete } from "@plone/volto/components/manage/Delete/Delete";
-export const Diff: import("@loadable/component").LoadableClassComponent<any>;
+export const Diff: import("@loadable/component").LoadableComponent<any>;
 export const DiffField: import("@loadable/component").LoadableClassComponent<any>;
 export { default as Display } from "@plone/volto/components/manage/Display/Display";
 export { default as Edit } from "@plone/volto/components/manage/Edit/Edit";

package/types/components/manage/Blocks/Block/Order/Item.test.d.ts

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

package/types/components/manage/Blocks/Block/Order/utilities.d.ts

@@ -1,8 +1,9 @@
 export function getProjection(items: any, activeId: any, overId: any, dragOffset: any, indentationWidth: any, arrayMove: any): {
+    parentId: any;
+    parentType: any;
     depth: any;
     maxDepth: any;
     minDepth: any;
-    parentId: any;
 };
 export function flattenTree(items: any): any;
 export function findItem(items: any, itemId: any): any;

package/types/components/manage/Blocks/Grid/context.d.ts

@@ -0,0 +1 @@
+export const GridContext: import("react").Context<number>;

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

@@ -0,0 +1,5 @@
+export function getTeaserBlockSizes({ data, inGrid, columns, }?: {
+    data?: {};
+    inGrid?: boolean;
+    columns?: number;
+}): string;

package/types/components/manage/Blocks/Video/Body.d.ts

@@ -8,8 +8,10 @@ declare namespace Body {
         let data: any;
     }
 }
-export function getVideoIDAndPlaceholder(url: any): {
+export function getVideoIDAndPlaceholder(url: any, peertubeInstances: any): {
     videoID: any;
-    listID: any;
+    videoUrl: string;
     thumbnailURL: string;
+    videoSource: string;
+    hasMatch: boolean;
 };

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

@@ -15,6 +15,10 @@ export function VideoBlockSchema(props: any): {
             title: any;
             widget: string;
         };
+        title: {
+            title: any;
+            description: any;
+        };
         align: {
             title: any;
             widget: string;

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/BlockType.d.ts

@@ -0,0 +1,7 @@
+import type { Location } from 'history';
+type RouteProps = {
+    history: History;
+    location: Location;
+};
+declare const BlockTypeControlpanel: (props: RouteProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockTypeControlpanel;

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

@@ -0,0 +1,7 @@
+import type { Location } from 'history';
+type RouteProps = {
+    history: History;
+    location: Location;
+};
+declare const BlockTypesControlpanel: (props: RouteProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockTypesControlpanel;

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/Diff/Diff.d.ts

@@ -1,2 +1,7 @@
-declare const _default: any;
-export default _default;
+export default Diff;
+/**
+ * Diff component.
+ * @function Diff
+ * @returns {JSX.Element}
+ */
+declare function Diff(): JSX.Element;

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/Toolbar/Types.crash.test.d.ts

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

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;

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

@@ -1,2 +1,49 @@
+import React from 'react';
+import type { StyleDefinition } from '@plone/types';
+/**
+ * A tuple that has an icon in the first element and a i18n string in the second.
+ */
+export type ActionInfo = [React.ReactElement<any>, string] | [string, string];
+type ActionValue = string | Record<`--${string}`, string>;
+export type ButtonsWidgetProps = {
+    /**
+     * Unique identifier for the widget.
+     */
+    id: string;
+    /**
+     * Callback function to handle changes.
+     */
+    onChange: (id: string, value: ActionValue) => void;
+    /**
+     * List of actions available for the widget.
+     */
+    actions?: Array<StyleDefinition | string>;
+    /**
+     * Map containing additional the information (icon and i18n string) for each action.
+     */
+    actionsInfoMap?: Record<string, ActionInfo>;
+    /**
+     * List of actions to be filtered out. In case that we don't want the default ones
+     * we can filter them out.
+     */
+    filterActions?: string[];
+    /**
+     * Current value of the widget.
+     */
+    value?: ActionValue;
+    /**
+     * Default value of the widget.
+     */
+    default?: ActionValue;
+    /**
+     * Indicates if the widget is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates if the widget is disabled (alternative flag for compatibility reasons).
+     */
+    isDisabled?: boolean;
+    [key: string]: any;
+};
+declare const ButtonsWidget: (props: ButtonsWidgetProps) => import("react/jsx-runtime").JSX.Element;
 export default ButtonsWidget;
-declare function ButtonsWidget(props: any): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,7 @@
 export const Buttons: any;
+export const ButtonsWithDefaultValue: any;
+export const ButtonsWithStyleDefinitions: any;
+export const ButtonsFiltered: any;
 declare namespace _default {
     export let title: string;
     export { ButtonsWidget as component };

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

@@ -1,5 +1,28 @@
-declare const _default: React.FC<import("react-intl").WithIntlProps<any>> & {
-    WrappedComponent: React.ComponentType<any>;
-};
-export default _default;
-import React from 'react';
+export default FormFieldWrapper;
+/**
+ * FormFieldWrapper component.
+ * @function FormFieldWrapper
+ * @param {Object} props - Component props
+ * @returns {JSX.Element} Markup for the component.
+ */
+declare function FormFieldWrapper({ id, title, description, fieldSet, required, error, wrapped, columns, draggable, onEdit, className, isDisabled, onDelete, noForInFieldLabel, multilingual_options, children, }: any): JSX.Element;
+declare namespace FormFieldWrapper {
+    namespace propTypes {
+        let id: any;
+        let title: any;
+        let description: any;
+        let required: any;
+        let error: any;
+        let wrapped: any;
+        let columns: any;
+        let draggable: any;
+        let isDisabled: any;
+        let onEdit: any;
+        let className: any;
+        let onDelete: any;
+        let fieldSet: any;
+        let noForInFieldLabel: any;
+        let multilingual_options: any;
+        let children: any;
+    }
+}