6653 contenttype menu

apps/seven/.gitignore

@@ -8,3 +8,9 @@ node_modules
 /packages/
 public/locales/
 /stats*
+
+# automatically generated files
+cmsui.css
+publicui.css
+registry.loader.js
+registry.loader.server.js

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,2 @@
+Use `types` API expander when token is available.
+Added automatically generated files to `.gitignore` @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, you can register components given a unique component name.
+Any other add-on can then retrieve and use this component by searching for the component's name.
+
+The key motivation behind the component registry is to simplify the process of customization.
+Existing components can 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,7 +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, either pass a string or an array of strings.
 
 ```js
 import MyTeaserNewsItemComponent from './MyTeaserNewsItemComponent'
@@ -62,7 +65,7 @@ config.registerComponent({
   });
 ```
 
-and then retrieve it:
+To retrieve this component, pass the data used to check the dependencies.
 
 ```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.
+Configuration is typically located either in the index.ts file at the add-ons root level or in config/settings.ts.
+In this file, you can modify existing entries or add new ones as needed.
+
+```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 = [
+    // Keep existing entries and append the new one
+    // to avoid overwriting them (unless intentional)
+    ...config.settings.mostUsedTypes,
+    'My Content Type',
+  ];
+
+  // Rest of the configuration goes here
+
+  return config;
+}
+```
+
+You can then use the configuration in your code using the `config` exported 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/customize-toolbar.md

@@ -0,0 +1,126 @@
+---
+myst:
+  html_meta:
+    "description": "How to customize the toolbar using slots"
+    "property=og:description": "How to customize the toolbar using slots"
+    "property=og:title": "Customize the toolbar"
+    "keywords": "Plone, Volto, Seven, Toolbar, Slots"
+---
+
+# Customize the toolbar
+
+The toolbar uses the slot system for extensibility.
+It exposes two slots:
+
+`toolbarTop`
+:   Rendered at the top of the toolbar. Typically used for action buttons (save, cancel, edit, add).
+
+`toolbarBottom`
+:   Rendered at the bottom of the toolbar. Typically used for settings or navigation.
+
+## Register a toolbar button
+
+Use `config.registerSlotComponent()` to add a component to either slot.
+Predicates control when the component appears.
+
+```ts
+import { RouteCondition, NotRouteCondition } from '@plone/helpers';
+
+// Show only in the edit view (cmsui)
+config.registerSlotComponent({
+  slot: 'toolbarTop',
+  name: 'myEditButton',
+  component: MyEditButton,
+  predicates: [RouteCondition('@@edit/*')],
+});
+
+// Show everywhere except the edit view (publicui)
+config.registerSlotComponent({
+  slot: 'toolbarTop',
+  name: 'myViewButton',
+  component: MyViewButton,
+  predicates: [NotRouteCondition('@@edit/*')],
+});
+```
+
+The component receives `content` and `location` as props from the `SlotRenderer`.
+
+## Add a menu to the toolbar
+
+Menus in the toolbar require the `ToolbarMenu` wrapper component from `@plone/layout`.
+Use it in place of the standard `Menu` component.
+The menu children follow the same API as [React Aria's Menu](https://react-aria.adobe.com/Menu).
+
+### Create the menu component
+
+```tsx
+import {
+  ToolbarMenu,
+  ToolbarMenuItem,
+} from '@plone/layout/components/Toolbar/ToolbarMenu';
+import { Header, MenuSection, Text } from 'react-aria-components';
+import type { Content } from '@plone/types';
+import MyIcon from './my-icon.svg?react';
+
+import menuStyles from './MyMenu.css?inline';
+
+interface MyMenuProps {
+  content: Content;
+}
+
+export const MyMenu = ({ content }: MyMenuProps) => {
+  return (
+    <ToolbarMenu
+      className="menu-my-menu"
+      button={<MyIcon />}
+      styles={menuStyles}
+    >
+      <MenuSection>
+        <Header>My menu</Header>
+        <ToolbarMenuItem id="item-1" href="/some-action">
+          <Text slot="label">Item 1</Text>
+        </ToolbarMenuItem>
+      </MenuSection>
+    </ToolbarMenu>
+  );
+};
+```
+
+`ToolbarMenu` accepts the following props:
+
+`button`
+:   The trigger element rendered in the toolbar (typically an SVG icon).
+
+`styles`
+:   A CSS string imported with `?inline`.
+    Injects the styles into the toolbar's shadow root so that your menu styles apply correctly.
+
+`className`
+:   CSS classes applied to the menu container for styling.
+
+### Register the menu as a slot component
+
+The process of registering a menu is the same as registering a button.
+
+```ts
+import { RouteCondition } from '@plone/helpers';
+
+config.registerSlotComponent({
+  slot: 'toolbarTop',
+  name: 'myMenu',
+  component: MyMenu,
+  predicates: [RouteCondition('@@edit/*')],
+});
+```
+
+## Remove a toolbar button or menu
+
+To remove a button or menu from the toolbar, unregister the corresponding slot in the `config`.
+
+```ts
+config.unRegisterSlotComponent('toolbarTop', 'myButton', 0);
+```
+
+For a full example, see the `ContentTypesMenu` component in `@plone/publicui`.
+
+See {doc}`register-slots` for the full slot API reference.

docs/how-to-guides/icons.md

@@ -21,7 +21,7 @@ That means it accepts props, can be composed, and follows the same accessibility
 
 ## Add custom SVG icons
 
-Seven uses [SVGR](https://react-svgr.com/) through a custom Vite plugin to transform SVG files into React components at build time.
+Seven uses [{abbr}`SVGR (SVG to React)`](https://react-svgr.com/) through a custom Vite plugin to transform SVG files into React components at build time.
 
 To add a custom icon, perform the following steps.
 
@@ -57,7 +57,7 @@ import '@plone/components/icons';
 
 ### Icon props
 
-The following code sample shows how to add various props to custom icons.
+The following code example shows how to add various props to custom icons.
 
 ```ts
 export interface IconProps extends DOMProps, AriaLabelingProps {
@@ -94,7 +94,7 @@ export interface IconProps extends DOMProps, AriaLabelingProps {
 ## Import Quanta SVG icons
 
 `@plone/components` bundles the Quanta icon set as raw SVG files under the `@plone/components/icons` import path.
-These icons go through the same SVGR transformation as your custom SVGs.
+These icons go through the same {abbr}`SVGR (SVG to React)` transformation as your custom SVGs.
 
 The following code example shows how to import the trash can icon from the Quanta icon set.
 
@@ -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
+
+The registry defines icons for content types 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
@@ -26,4 +25,5 @@ add-tailwind
 icons
 configure-plate-block-widths
 configure-plate-code-block-languages
+customize-toolbar
 ```

packages/cmsui/components/Toolbar/ToolbarCancel.tsx

@@ -0,0 +1,33 @@
+import { Link } from 'react-aria-components';
+import { useCallback } from 'react';
+
+import Close from '@plone/components/icons/close.svg?react';
+import { useTranslation } from 'react-i18next';
+
+interface ToolbarCancelProps {
+  location: Location;
+}
+
+export const ToolbarCancel = ({ location }: ToolbarCancelProps) => {
+  const { t } = useTranslation();
+
+  const getReturnLocation = useCallback(() => {
+    const path = location.pathname.startsWith('/')
+      ? location.pathname.slice(1)
+      : location.pathname;
+
+    const paths = path.split('/');
+
+    const returnPath = paths
+      .filter((segment) => segment !== '@@edit')
+      .join('/');
+
+    return `/${returnPath}`;
+  }, [location.pathname]);
+
+  return (
+    <Link aria-label={t('cmsui.cancel')} href={getReturnLocation()}>
+      <Close />
+    </Link>
+  );
+};