6653 contenttype menu

apps/seven/app/middleware.server.ts

@@ -73,6 +73,10 @@ export const fetchPloneContent: Route.MiddlewareFunction = async (
   const token = await getAuthFromRequest(request);
   const expand = ['navroot', 'breadcrumbs', 'navigation', 'actions'];
 
+  if (token) {
+    expand.push('types');
+  }
+
   const cli = config
     .getUtility({
       name: 'ploneClient',

apps/seven/news/6653.feature

@@ -0,0 +1 @@
+Use `types` API expander when token is available. @arybakov05

catalog.json

@@ -4,7 +4,7 @@
   "@types/node": "^24",
   "@types/react": "^19.2.0",
   "@types/react-dom": "^19.2.0",
-  "react-aria": "^3.45.0",
+  "react-aria": "^3.47.0",
   "react-aria-components": "^1.16.0",
   "@react-aria/utils": "^3.33.1",
   "@react-spectrum/utils": "^3.12.12",

docs/configuration/component-registry.md

@@ -11,12 +11,14 @@ myst:
 
 # Component registry
 
-The {term}`configuration registry` has a component registry integrated on itself.
-These registry stores by a given name the components.
-Later you can retrieve them by this name, and use them in your code.
-The idea behind is to provide an alternative and more convenient way to customize components.
-You can override programmatically such registrations from your add-on or projects because it's stored in the configuration registry.
-You can customize a component without using {term}`shadowing` at all, if the code that calls the component retrieves the information of the component to use from the component registry.
+The {term}`configuration registry` includes a component registry for managing components globally.
+In this registry, components can be registered given a unique component name.
+Any other add-on can then retrieve and use this component by searching the components name.
+
+The key motivation behind the component registry is to simplify the process of customization.
+Existing components can easily be overwritten without {term}`shadowing` by registering a new component using the name of an existing component.
+Since the component registry is globally available, this means that all code pointing to this component will now use the newly registered component instead.
+
 You can even have modifiers to the component registrations: dependencies. So you can "adapt" the call given an array of such dependencies.
 
 ## Registering components by name using `config.registerComponent`
@@ -50,8 +52,8 @@ Please notice that you are able to pass `props` down to the retrieved component.
 
 ## Adapting the component using `dependencies` array
 
-You can register components, and retrieve them afterwards given a list of modifiers `dependencies`.
-
+Components can also be conditionally registered by passing dependencies.
+To register a component with dependencies, you can either pass a `string` or an `array of strings`.
 ```js
 import MyTeaserNewsItemComponent from './MyTeaserNewsItemComponent'
 
@@ -62,7 +64,7 @@ config.registerComponent({
   });
 ```
 
-and then retrieve it:
+To retrieve this component, you must pass the data against which the dependencies are checked.
 
 ```js
 config.getComponent({

docs/configuration/configuration-registry.md

@@ -0,0 +1,46 @@
+---
+myst:
+  html_meta:
+    "description": "How to access and modify the configuration regisrey"
+    "property=og:description": "How to access and modify the configuration registry"
+    "property=og:title": "Customize Seven using the configuration registry"
+    "keywords": "Seven, @plone/registry, registry, configuration"
+---
+
+# Customize Seven using the configuration registry
+
+The registry is the central place for configuring your Seven application.
+If the default location has not been modified, you can locate the configuration in the `settings.ts` file in the `config` folder of your add-on.
+Existing entries can be modified or new entries can be added.
+
+```ts
+import type { ConfigType } from '@plone/registry';
+import MyBlockInfo from 'my/addon/blocks/MyBlockInfo';
+
+export default function install(config: ConfigType) {
+  // Example: registering a new block
+  config.blocks.blocksConfig.myBlock = MyBlockInfo;
+
+  // Example: Adding a content type to the "most used" section
+  //          of the content type menu in the toolbar 
+  config.settings.mostUsedTypes = [
+    // Make sure not to override existing entries,
+    // but to keep existing values unless you actually want to
+    ...config.settings.mostUsedTypes,
+    'My Content Type',
+  ];
+
+  // Rest of your configuration goes here
+
+  return config;
+}
+```
+
+To then access the configuration in your code, the config can be imported from `@plone/registry`.
+
+```ts
+import config from '@plone/registry';
+
+const mostUsedTypes = config.settings.mostUsedTypes;
+// Value: ["Document", "Folder", "File", "My Content Type"]
+```

docs/configuration/index.md

@@ -12,6 +12,7 @@ myst:
 ```{toctree}
 :maxdepth: 2
 
+configuration-registry
 component-registry
 expanders
 ```

docs/how-to-guides/icons.md

@@ -126,3 +126,26 @@ These pre-built components are equivalent to importing the SVGs directly, but th
 - Use them when the SVGR Vite plugin is not available, for example in Storybook, Jest, or non-Vite frameworks, such as Next.js.
 - When developing `@plone/components` itself, prefer these pre-built modules because the package build pipeline has no awareness of your app's Vite configuration.
 ```
+
+# Define an icon for a content type
+
+Icons for content types are defined in the registry under `config.settings.contentIcons`.
+To change an existing icon or to define an icon for a custom content type, please refer to the following code example:
+
+````tsx
+import type { ConfigType } from '@plone/registry';
+import SomeIcon from 'my/addon/icons/someicon.svg?react';
+
+export default function install(config: ConfigType) {
+  // Rest of your configuration goes here
+
+  config.settings.contentIcons = {
+    ...config.settings.contentIcons,
+    MyContentType: SomeIcon,
+  }
+
+  // or here...
+
+  return config;
+}
+````

docs/how-to-guides/index.md

@@ -16,7 +16,6 @@ This section of the documentation contains how-to guides for developing with Sev
 
 routes
 register-an-add-on
-access-registry
 register-and-retrieve-components
 register-and-retrieve-utilities
 register-slots

packages/cmsui/components/Toolbar/ToolbarSettings.tsx

@@ -0,0 +1,21 @@
+import { useAtom } from 'jotai';
+import { sidebarAtom } from '../Sidebar/Sidebar';
+import Settings from '@plone/components/icons/settings.svg?react';
+import { useTranslation } from 'react-i18next';
+
+export const ToolbarSettings = () => {
+  const { t } = useTranslation();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [collapsed, setCollapsed] = useAtom(sidebarAtom);
+
+  return (
+    <button
+      type="button"
+      aria-label={t('cmsui.toolbar.settings')}
+      title={t('cmsui.toolbar.settings')}
+      onClick={() => setCollapsed((state) => !state)}
+    >
+      <Settings />
+    </button>
+  );
+};

packages/cmsui/index.ts

@@ -3,6 +3,8 @@ import installWidgets from './config/widgets';
 import installControlpanels from './config/controlpanels';
 import { formAtom } from './routes/atoms';
 import type { BlockConfigBase } from '@plone/types';
+import { ToolbarSettings } from './components/Toolbar/ToolbarSettings';
+import { RouteCondition } from '@plone/layout/helpers';
 
 declare module '@plone/types' {
   export interface BlocksConfigData {
@@ -139,5 +141,12 @@ export default function install(config: ConfigType) {
     ],
   });
 
+  config.registerSlotComponent({
+    name: 'toolbarSettings',
+    slot: 'toolbarBottom',
+    component: ToolbarSettings,
+    predicates: [RouteCondition('@@edit')],
+  });
+
   return config;
 }

packages/cmsui/locales/de/common.json

@@ -0,0 +1,69 @@
+{
+  "cmsui": {
+    "edit": "Bearbeiten",
+    "save": "Speichern",
+    "controlpanel": "Konfiguration",
+    "objectbrowserwidget": {
+      "openDialog": "Inhalt auswählen",
+      "dialogTitle": "Inhalt auswählen",
+      "closeDialog": "Auswahl schließen",
+      "openSearch": "Inhalt durchsuchen",
+      "closeSearch": "Suche schließen",
+      "searchPlaceholder": "Inhalt durchsuchen...",
+      "loading": "Lade...",
+      "routeannouncer": "Aktueller Pfad: {{route}}",
+      "noResults": "Keine Inhalte gefunden",
+      "searchResults": "Suchergebnisse: {{count}} Inhalte",
+      "searchResultsFor": "Suchergebnisse für \"{{searchTerm}}\": {{count}} ",
+      "goback": "Zurück",
+      "changeViewMode": "Zur {{mode}} Ansicht wechseln",
+      "currentItems": "Aktuelle Inhaltselemente",
+      "home": "Startseite",
+      "item": "{{title}}",
+      "itemSelected": "ausgewählt",
+      "itemNotSelectable": "nicht auswählbar",
+      "itemNavigateTo": "Zu {{title}} navigieren",
+      "canNavigateTo": "Verschachtelbarer Inhalt",
+      "workflowStates": {
+        "private": "Privat",
+        "pending": "Ausstehend",
+        "published": "Veröffentlicht"
+      },
+      "viewModes": {
+        "list": "Listenansicht",
+        "grid": "Kachelansicht"
+      }
+    },
+    "panelgroups": {
+      "general": "Allgemein",
+      "content": "Inhalt",
+      "security": "Sicherheit",
+      "users": "Benutzer",
+      "site": "Seiteneinstellungen",
+      "addons": "Erweiterungen",
+      "maintenance": "Wartung"
+    },
+    "paneltitles": {
+      "addons": "Erweiterungen",
+      "database": "Datenbank",
+      "contentRules": "Inhaltsregeln",
+      "undo": "Rückgängig machen",
+      "urlmanagement": "URL Verwaltung",
+      "relations": "Relationen",
+      "moderatecomments": "Kommentare moderieren",
+      "users": "Benutzer",
+      "groupMembership": "Gruppenmitgliedschaft",
+      "groups": "Gruppen"
+    },
+    "blocksEditor": {
+      "blocksTab": "Blöcke",
+      "contentTab": "Inhalt"
+    },
+    "sidebar": {
+      "label": "Seitenleiste"
+    },
+    "toolbar": {
+      "settings": "Einstellungen"
+    }
+  }
+}

packages/cmsui/locales/en/common.json

@@ -61,6 +61,9 @@
     },
     "sidebar": {
       "label": "Sidebar"
+    },
+    "toolbar": {
+      "settings": "Settings"
     }
   }
 }

packages/cmsui/locales/it/common.json

@@ -51,6 +51,9 @@
     },
     "sidebar": {
       "label": "Barra laterale destra"
+    },
+    "toolbar": {
+      "settings": "Impostazioni"
     }
   }
 }

packages/cmsui/news/6653.feature

@@ -0,0 +1,2 @@
+Moved toolbar settings button into a slot.
+Added German translations. @arybakov05

packages/cmsui/routes/layout.tsx

@@ -11,11 +11,11 @@ import {
 } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { RouterProvider as RACRouterProvider } from 'react-aria-components';
-import { clsx } from 'clsx';
 import type { RootLoader } from 'seven/app/root';
 import { PluggablesProvider } from '@plone/layout/components/Pluggable';
 import Toolbar from '@plone/layout/components/Toolbar/Toolbar';
 import { shouldShowToolbar } from '@plone/layout/helpers';
+import { clsx } from 'clsx';
 import config from '@plone/registry';
 
 import stylesheet from 'seven/.plone/cmsui.css?url';

packages/components/news/6653.feature

@@ -0,0 +1 @@
+Extended customizability of the Menu component. @arybakov05

packages/components/src/components/Menu/Menu.tsx

@@ -17,21 +17,36 @@ export interface MenuButtonProps<T>
   extends MenuProps<T>,
     Omit<MenuTriggerProps, 'children'> {
   button?: React.ReactNode;
+  buttonRef?: React.Ref<HTMLButtonElement>;
+  className?: string;
+  isOpen?: boolean;
+  isNonModal?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
   onPress?: (e: PressEvent) => void;
   placement?: Placement;
 }
 
 export function Menu<T extends object>({
   button,
-  onPress,
+  buttonRef,
   children,
+  className,
+  isOpen,
+  isNonModal = false,
+  onOpenChange,
+  onPress,
+  placement,
   ...props
 }: MenuButtonProps<T>) {
   return (
-    <MenuTrigger {...props}>
-      <Button onPress={onPress}>{button}</Button>
-      <Popover placement={props.placement || 'bottom start'}>
-        <RACMenu {...props}>{children}</RACMenu>
+    <MenuTrigger isOpen={isOpen} onOpenChange={onOpenChange} {...props}>
+      <Button ref={buttonRef} onPress={onPress}>
+        {button}
+      </Button>
+      <Popover placement={placement || 'bottom start'} isNonModal={isNonModal}>
+        <RACMenu className={className} {...props}>
+          {children}
+        </RACMenu>
       </Popover>
     </MenuTrigger>
   );

packages/layout/components/Toolbar/Toolbar-inner.css

@@ -1,3 +1,6 @@
+@import '@plone/components/src/styles/basic/main.css';
+@import '@plone/components/src/styles/quanta/main.css';
+
 .toolbar {
   position: fixed;
   z-index: 10;
@@ -98,3 +101,8 @@
   height: 24px;
   pointer-events: none;
 }
+
+#toolbar-portals .react-aria-Popover {
+  width: 400px;
+  max-width: 400px;
+}