@cratis/scene.primereact 1.1.0 → 3.0.0

package/menu/MegaMenu.tsx

@@ -0,0 +1,138 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CSSProperties, HTMLAttributes, useEffect, useState } from 'react';
+import { MenuItem } from '../MenuItem';
+import { MenuItemAction } from './MenuItemAction';
+import { MenuItemContent } from './MenuItemContent';
+
+const barStyle: CSSProperties = {
+    background: 'var(--scene-surface-card)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+    color: 'var(--scene-text-color)',
+};
+
+const triggerStyle: CSSProperties = {
+    background: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    textDecoration: 'none',
+};
+
+const panelStyle: CSSProperties = {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    zIndex: 1,
+    background: 'var(--scene-surface-overlay)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+};
+
+const columnHeadingStyle: CSSProperties = { color: 'var(--scene-text-muted-color)' };
+
+const columnItemStyle: CSSProperties = { ...triggerStyle, width: '100%', textAlign: 'left' };
+
+/**
+ * The configuration {@link MegaMenu} takes.
+ */
+export interface MegaMenuProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The commands to show. Each top-level entry's children are the columns of its panel, and each
+     * column's own children are the commands in that column.
+     */
+    items?: MenuItem[];
+}
+
+/**
+ * A horizontal bar whose panels lay their commands out in labeled columns. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/megamenu` outright, with no successor and no
+ * headless hook, so a screen that authored a mega menu had nothing left to render. It is a separate
+ * component from {@link Menubar} rather than a flag on it because the two read genuinely different item
+ * models - a menubar's children are commands, a mega menu's children are columns - and collapsing that
+ * into a boolean would make both harder to read than keeping them apart.
+ *
+ * The column model is where this deliberately departs from v10. PrimeReact 10 spelled columns as an array
+ * of arrays, so an entry's `items` held column groups rather than menu entries. Scene's item reader
+ * follows nested *objects* and drops nested arrays, which means that shape never reached the component
+ * intact anyway. Columns are therefore one ordinary level of nesting here: an entry's children are
+ * columns, and a column's children are its commands. The same authored model now survives the reader.
+ *
+ * What it otherwise does not carry over from v10: there is no vertical orientation, so the `orientation`
+ * property a v10 screen may have set is ignored rather than half-honored; panels open on click only,
+ * never on hover; and item templates are not supported.
+ */
+export function MegaMenu({ items = [], ...rest }: MegaMenuProps) {
+    const [openIndex, setOpenIndex] = useState<number | undefined>(undefined);
+
+    useEffect(() => {
+        const close = () => setOpenIndex(undefined);
+        document.addEventListener('click', close);
+        return () => document.removeEventListener('click', close);
+    }, []);
+
+    return (
+        <div
+            {...rest}
+            role='menubar'
+            className='relative flex items-center gap-2 p-3'
+            style={barStyle}
+            onKeyDown={(event) => {
+                if (event.key === 'Escape') setOpenIndex(undefined);
+            }}>
+            {items.map((item, index) => {
+                const columns = item.items ?? [];
+
+                return (
+                    <div key={index} role='none' className='relative'>
+                        {columns.length > 0 ? (
+                            <>
+                                <button
+                                    type='button'
+                                    role='menuitem'
+                                    className='inline-flex items-center gap-2'
+                                    style={triggerStyle}
+                                    disabled={item.disabled}
+                                    aria-haspopup='true'
+                                    aria-expanded={openIndex === index}
+                                    onClick={(event) => {
+                                        event.stopPropagation();
+                                        setOpenIndex(openIndex === index ? undefined : index);
+                                    }}>
+                                    <MenuItemContent item={item} />
+                                    <i className='pi pi-angle-down' aria-hidden='true' />
+                                </button>
+                                {openIndex === index && (
+                                    <div role='menu' aria-label={item.label} className='flex gap-4 p-3' style={panelStyle}>
+                                        {columns.map((column, columnIndex) => (
+                                            <div key={columnIndex} role='group' aria-label={column.label} className='flex flex-col gap-1'>
+                                                <span className='text-sm font-semibold' style={columnHeadingStyle}>
+                                                    {column.label}
+                                                </span>
+                                                {(column.items ?? []).map((child, childIndex) => (
+                                                    <MenuItemAction
+                                                        key={childIndex}
+                                                        item={child}
+                                                        role='menuitem'
+                                                        className='flex items-center gap-2'
+                                                        style={columnItemStyle}
+                                                    />
+                                                ))}
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <MenuItemAction item={item} role='menuitem' className='inline-flex items-center gap-2' style={triggerStyle} />
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/menu/MenuGallery.stories.tsx

@@ -12,7 +12,12 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         layout: 'padded',
-        docs: { description: { component: 'The menu family. All ten read the same nested item model, so one authored menu can be shown as a menubar, a tiered menu or a dock without being restructured.' } },
+        docs: {
+            description: {
+                component:
+                    'The menu family. All ten read the same nested item model, so one authored menu can be shown as a menubar, a tiered menu or a dock without being restructured. Only `menu`, `breadcrumb` and `contextMenu` are still PrimeReact underneath - PrimeReact 11 removed the other seven, and this gallery is where the Cratis-owned replacements are checked to still look and behave like the family they belong to.',
+            },
+        },
     },
 } satisfies Meta<typeof SceneElementView>;
 
@@ -28,12 +33,12 @@ export const Gallery: Story = {
             sceneComponent('menubar', 'menubar', { items: [{ label: 'File', items: ['New', 'Open'] }, { label: 'Edit', items: ['Undo'] }] }),
             sceneComponent('breadcrumb', 'breadcrumb', { items: ['Projects', 'Acme', 'Settings'] }),
             sceneComponent('tabMenu', 'tabMenu', { items: [{ label: 'Overview', icon: 'pi pi-home' }, { label: 'Activity', icon: 'pi pi-list' }] }),
-            sceneComponent('steps', 'steps', { items: ['Account', 'Payment', 'Confirm'] }),
+            sceneComponent('steps', 'steps', { items: ['Account', 'Payment', 'Confirm'], activeIndex: 1 }),
             sceneComponent('tieredMenu', 'tieredMenu', { items: [{ label: 'File', items: [{ label: 'Export', items: ['PDF', 'CSV'] }] }] }),
             sceneComponent('panelMenu', 'panelMenu', { items: [{ label: 'Reports', items: ['Monthly', 'Annual'] }] }),
             sceneComponent('contextMenu', 'contextMenu', { label: 'Right-click this text', items: ['Copy', 'Paste'] }),
             sceneComponent('megaMenu', 'megaMenu', {
-                items: [{ label: 'Catalog', items: [[{ label: 'Hardware', items: ['Laptops', 'Phones'] }]] }],
+                items: [{ label: 'Catalog', items: [{ label: 'Hardware', items: ['Laptops', 'Phones'] }, { label: 'Software', items: ['Licenses'] }] }],
             }),
             sceneComponent('dock', 'dock', { items: [{ label: 'Home', icon: 'pi pi-home' }, { label: 'Search', icon: 'pi pi-search' }] }),
         ]),
@@ -41,3 +46,26 @@ export const Gallery: Story = {
         resolveBinding: () => undefined,
     },
 };
+
+/**
+ * Every component in this family with nothing authored, which is what a screen under construction looks
+ * like. Each one has to come out as an empty container rather than take the gallery down with it.
+ */
+export const Unconfigured: Story = {
+    args: {
+        element: sceneGallery('unconfigured', [
+            sceneComponent('menu', 'menu'),
+            sceneComponent('menubar', 'menubar'),
+            sceneComponent('breadcrumb', 'breadcrumb'),
+            sceneComponent('tabMenu', 'tabMenu'),
+            sceneComponent('steps', 'steps'),
+            sceneComponent('tieredMenu', 'tieredMenu'),
+            sceneComponent('panelMenu', 'panelMenu'),
+            sceneComponent('contextMenu', 'contextMenu'),
+            sceneComponent('megaMenu', 'megaMenu'),
+            sceneComponent('dock', 'dock'),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/menu/MenuItemAction.tsx

@@ -0,0 +1,92 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { AriaRole, CSSProperties } from 'react';
+import { MenuItem } from '../MenuItem';
+import { MenuItemContent } from './MenuItemContent';
+
+/**
+ * The configuration {@link MenuItemAction} takes.
+ */
+export interface MenuItemActionProps {
+    /**
+     * The entry to make selectable.
+     */
+    item: MenuItem;
+
+    /**
+     * The ARIA role the entry plays inside its container - `menuitem` inside a menu, left unset inside a
+     * plain navigation bar where the surrounding markup already says what the entry is.
+     */
+    role?: AriaRole;
+
+    /**
+     * Whether this entry is the one the user is currently on, which is announced as `aria-current`.
+     */
+    current?: boolean;
+
+    /**
+     * Classes for the entry, so each menu can keep its own layout while sharing this behavior.
+     */
+    className?: string;
+
+    /**
+     * Inline styling for the entry. This package ships no component stylesheets - a `.css` import would
+     * not survive the `tsc` build - so chrome that cannot be expressed with the shared utility classes is
+     * written here.
+     */
+    style?: CSSProperties;
+
+    /**
+     * Invoked after the entry's own `command`, so a menu can close itself or record a selection.
+     */
+    onActivate?: () => void;
+}
+
+/**
+ * One selectable menu entry, rendered as a link when it navigates and as a button when it commands.
+ *
+ * The distinction is not cosmetic and it is the reason this is shared rather than repeated. An entry
+ * carrying a `url` is navigation: it belongs in an anchor so it can be opened in a new tab, copied,
+ * followed by a screen reader's link list and reached the way every other link on the page is. An entry
+ * carrying a `command` changes something on the current screen, which is what a button is for. Getting
+ * that wrong is invisible to a sighted mouse user and immediately wrong for everyone else, so the five
+ * Cratis-owned menus that need a selectable entry all defer the choice to here.
+ *
+ * A disabled entry is always a button, even when it has a `url`, because there is no way to disable an
+ * anchor - `aria-disabled` still leaves it clickable and focusable. Rendering the button lets the
+ * platform's own disabled semantics do the work.
+ */
+export function MenuItemAction({ item, role, current, className, style, onActivate }: MenuItemActionProps) {
+    const activate = () => {
+        item.command?.();
+        onActivate?.();
+    };
+
+    if (item.url !== undefined && item.disabled !== true) {
+        return (
+            <a
+                href={item.url}
+                role={role}
+                className={className}
+                style={style}
+                aria-current={current === true ? 'page' : undefined}
+                onClick={activate}>
+                <MenuItemContent item={item} />
+            </a>
+        );
+    }
+
+    return (
+        <button
+            type='button'
+            role={role}
+            className={className}
+            style={style}
+            disabled={item.disabled}
+            aria-current={current === true ? 'page' : undefined}
+            onClick={activate}>
+            <MenuItemContent item={item} />
+        </button>
+    );
+}

package/menu/MenuItemContent.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { MenuItem } from '../MenuItem';
+
+/**
+ * The configuration {@link MenuItemContent} takes.
+ */
+export interface MenuItemContentProps {
+    /**
+     * The entry whose icon and label to show.
+     */
+    item: MenuItem;
+}
+
+/**
+ * The inside of one menu entry - its icon and its label - without the element that makes it selectable.
+ *
+ * Seven of the components in this folder are Cratis-owned replacements for menus PrimeReact 11 removed,
+ * and each of them wraps an entry in a different element: a menubar puts it in a button, a tiered menu in
+ * a list row, a dock in an icon-only control. What never differs is the inside, so it is written once
+ * here instead of seven times, where six copies would eventually drift apart.
+ *
+ * Sharing it also settles one accessibility decision in a single place rather than repeatedly: the label
+ * already carries the meaning, so the icon beside it is decoration and is hidden from assistive
+ * technology. Left to each component, that is exactly the kind of detail one of them would quietly get
+ * wrong.
+ */
+export function MenuItemContent({ item }: MenuItemContentProps) {
+    return (
+        <>
+            {item.icon !== undefined && <i className={item.icon} aria-hidden='true' />}
+            {item.label !== undefined && <span>{item.label}</span>}
+        </>
+    );
+}

package/menu/Menubar.tsx

@@ -0,0 +1,149 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CSSProperties, HTMLAttributes, ReactNode, useEffect, useState } from 'react';
+import { MenuItem } from '../MenuItem';
+import { MenuItemAction } from './MenuItemAction';
+import { MenuItemContent } from './MenuItemContent';
+
+const barStyle: CSSProperties = {
+    background: 'var(--scene-surface-card)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+    color: 'var(--scene-text-color)',
+};
+
+const triggerStyle: CSSProperties = {
+    background: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    textDecoration: 'none',
+};
+
+const panelStyle: CSSProperties = {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    zIndex: 1,
+    minWidth: '12rem',
+    background: 'var(--scene-surface-overlay)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+};
+
+const panelItemStyle: CSSProperties = { ...triggerStyle, width: '100%', textAlign: 'left' };
+
+const separatorStyle: CSSProperties = { border: 'none', borderTop: '1px solid var(--scene-surface-border)', margin: 0 };
+
+/**
+ * The configuration {@link Menubar} takes.
+ */
+export interface MenubarProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The commands to show, top level across the bar and one level of children in a dropdown.
+     */
+    items?: MenuItem[];
+
+    /**
+     * Content pinned before the commands - branding, in a real application.
+     */
+    start?: ReactNode;
+
+    /**
+     * Content pinned after the commands - account and status controls, in a real application.
+     */
+    end?: ReactNode;
+}
+
+/**
+ * A horizontal bar of commands, each of which may drop down a panel of its children. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/menubar` outright, with no successor component
+ * and no headless hook to rebuild it from - unlike `menu`, `breadcrumb` and `contextmenu`, which survived
+ * as compositional part namespaces. Scene still has to render an element authored as a menubar, so the
+ * component is Scene's now. It follows `ActionMenubar` in `@cratis/components`, which is the same answer
+ * Cratis already reached for its own bar of actions after the v11 removal.
+ *
+ * What it deliberately does not carry over from the v10 `Menubar`: submenus nest exactly one level rather
+ * than arbitrarily deep (author a `tieredMenu` when a third level is genuinely needed); panels open on
+ * click only, never on hover; there is no responsive collapse to a hamburger at narrow widths; there is
+ * no roving-focus keyboard model across the bar, only the tab order and Escape the browser and this
+ * component give for free; and item templates are not supported, since a Scene item model has no place to
+ * put a React node.
+ *
+ * A panel does close when the pointer goes elsewhere on the page. That is not a feature carried over so
+ * much as the absence of a defect - a dropdown that survives a click on the rest of the screen is broken,
+ * not minimal.
+ */
+export function Menubar({ items = [], start, end, ...rest }: MenubarProps) {
+    const [openIndex, setOpenIndex] = useState<number | undefined>(undefined);
+
+    useEffect(() => {
+        const close = () => setOpenIndex(undefined);
+        document.addEventListener('click', close);
+        return () => document.removeEventListener('click', close);
+    }, []);
+
+    return (
+        <div
+            {...rest}
+            className='relative flex items-center gap-2 p-3'
+            style={barStyle}
+            onKeyDown={(event) => {
+                if (event.key === 'Escape') setOpenIndex(undefined);
+            }}>
+            {start}
+            <div role='menubar' className='flex items-center gap-2'>
+                {items.map((item, index) => {
+                    const children = item.items ?? [];
+
+                    return (
+                        <div key={index} role='none' className='relative'>
+                            {children.length > 0 ? (
+                                <>
+                                    <button
+                                        type='button'
+                                        role='menuitem'
+                                        className='inline-flex items-center gap-2'
+                                        style={triggerStyle}
+                                        disabled={item.disabled}
+                                        aria-haspopup='true'
+                                        aria-expanded={openIndex === index}
+                                        onClick={(event) => {
+                                            event.stopPropagation();
+                                            setOpenIndex(openIndex === index ? undefined : index);
+                                        }}>
+                                        <MenuItemContent item={item} />
+                                        <i className='pi pi-angle-down' aria-hidden='true' />
+                                    </button>
+                                    {openIndex === index && (
+                                        <div role='menu' aria-label={item.label} className='flex flex-col' style={panelStyle}>
+                                            {children.map((child, childIndex) =>
+                                                child.separator === true ? (
+                                                    <hr key={childIndex} style={separatorStyle} />
+                                                ) : (
+                                                    <MenuItemAction
+                                                        key={childIndex}
+                                                        item={child}
+                                                        role='menuitem'
+                                                        className='flex items-center gap-2 p-3'
+                                                        style={panelItemStyle}
+                                                    />
+                                                )
+                                            )}
+                                        </div>
+                                    )}
+                                </>
+                            ) : (
+                                <MenuItemAction item={item} role='menuitem' className='inline-flex items-center gap-2' style={triggerStyle} />
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+            {end}
+        </div>
+    );
+}

package/menu/PanelMenu.tsx

@@ -0,0 +1,107 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CSSProperties, HTMLAttributes } from 'react';
+import { Accordion } from 'primereact/accordion';
+import { MenuItem } from '../MenuItem';
+import { MenuItemAction } from './MenuItemAction';
+import { MenuItemContent } from './MenuItemContent';
+
+const rootStyle: CSSProperties = { color: 'var(--scene-text-color)', width: '16rem' };
+
+const headerStyle: CSSProperties = {
+    background: 'var(--scene-surface-card)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    justifyContent: 'space-between',
+    textAlign: 'left',
+    textDecoration: 'none',
+    width: '100%',
+};
+
+const listStyle: CSSProperties = { listStyle: 'none', margin: 0, padding: 0 };
+
+const childStyle: CSSProperties = {
+    background: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    textAlign: 'left',
+    textDecoration: 'none',
+    width: '100%',
+};
+
+/**
+ * The configuration {@link PanelMenu} takes.
+ *
+ * `defaultValue` is omitted from the inherited attributes because the props are spread onto
+ * `Accordion.Root`, which has a `defaultValue` of its own meaning "the panels open to begin with".
+ * `HTMLAttributes` declares the form-control `defaultValue` (which includes `readonly string[]`), and the
+ * two are not assignable. Dropping it is the honest resolution: a `<div>` has no default value, so nothing
+ * is lost, and leaving both in scope would let a caller set one and silently get the other.
+ */
+export interface PanelMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+    /**
+     * The commands to show. A top-level entry with children becomes an expandable panel; one without
+     * stays a plain row.
+     */
+    items?: MenuItem[];
+
+    /**
+     * Whether more than one panel may be open at once.
+     */
+    multiple?: boolean;
+}
+
+/**
+ * A vertical menu whose sections expand in place, accordion style. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/panelmenu` outright. Unlike the other removals in
+ * this folder, though, the mechanism it needed did survive: `primereact/accordion` is exactly the
+ * expand-collapse behavior a panel menu is, so this composes the v11 `Accordion` parts rather than
+ * hand-rolling open state. That is worth doing rather than clever - the accordion already brings the
+ * `aria-expanded` and `aria-controls` wiring between a trigger and its content, the disabled handling, and
+ * the single-versus-multiple open policy, and every one of those is a thing a hand-rolled version would
+ * get subtly wrong. What is Cratis's here is only the mapping from a Scene item model onto those parts.
+ *
+ * What it deliberately does not carry over from the v10 `PanelMenu`: sections expand exactly one level
+ * deep rather than nesting arbitrarily, because an accordion panel holds content and not another
+ * accordion; there is no keyboard model beyond the accordion's own; and item templates are not supported.
+ */
+export function PanelMenu({ items = [], multiple = false, ...rest }: PanelMenuProps) {
+    return (
+        <Accordion.Root {...rest} multiple={multiple} className='flex flex-col gap-1' style={rootStyle}>
+            {items.map((item, index) => {
+                const children = item.items ?? [];
+
+                if (children.length === 0) return <MenuItemAction key={index} item={item} className='flex items-center gap-2 p-3' style={headerStyle} />;
+
+                return (
+                    <Accordion.Panel key={index} value={String(index)} disabled={item.disabled}>
+                        <Accordion.Header>
+                            <Accordion.Trigger className='flex items-center gap-2 p-3' style={headerStyle}>
+                                <MenuItemContent item={item} />
+                                <Accordion.Indicator>
+                                    <i className='pi pi-chevron-down' aria-hidden='true' />
+                                </Accordion.Indicator>
+                            </Accordion.Trigger>
+                        </Accordion.Header>
+                        <Accordion.Content>
+                            <ul role='menu' aria-label={item.label} style={listStyle}>
+                                {children.map((child, childIndex) => (
+                                    <li key={childIndex} role='none'>
+                                        <MenuItemAction item={child} role='menuitem' className='flex items-center gap-2 p-3' style={childStyle} />
+                                    </li>
+                                ))}
+                            </ul>
+                        </Accordion.Content>
+                    </Accordion.Panel>
+                );
+            })}
+        </Accordion.Root>
+    );
+}

package/menu/PrimeBreadcrumb.tsx

@@ -1,23 +1,78 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { BreadCrumb } from 'primereact/breadcrumb';
+import { Fragment, ReactNode } from 'react';
+import { Breadcrumb } from 'primereact/breadcrumb';
 import { RegisteredComponentProps } from '@cratis/scene.react';
+import { MenuItem } from '../MenuItem';
 import { menuItemsProperty } from '../menuItems';
 import { stringProperty } from '../properties';
+import { MenuItemContent } from './MenuItemContent';
+
+/**
+ * One entry in the trail, as the strongest thing the authored data supports.
+ *
+ * The three cases are genuinely different to assistive technology and only one of them is a link. Where
+ * the user already is gets `Breadcrumb.Current`, which carries `aria-current="page"` and is what tells a
+ * screen reader the trail has ended - a trailing link says the opposite. An earlier entry that names a
+ * target is a link. An earlier entry that names none is plain text, because an anchor with no `href` is
+ * not focusable and only looks like a link.
+ *
+ * @param item The entry to render.
+ * @param current Whether this is the last entry, and so where the user is now.
+ * @returns The rendered entry.
+ */
+function breadcrumbEntry(item: MenuItem, current: boolean): ReactNode {
+    if (current) {
+        return (
+            <Breadcrumb.Current>
+                <MenuItemContent item={item} />
+            </Breadcrumb.Current>
+        );
+    }
+
+    if (item.url === undefined) return <MenuItemContent item={item} />;
+
+    return (
+        <Breadcrumb.Link href={item.url}>
+            <MenuItemContent item={item} />
+        </Breadcrumb.Link>
+    );
+}
 
 /**
  * The `PrimeReact:breadcrumb` component - the path to where the user currently is.
  *
- * The home entry is separate from the trail in PrimeReact's model, so it is read from its own `homeUrl`
+ * The home entry is separate from the trail in the authored model, so it is read from its own `homeUrl`
  * property and always rendered as an icon.
+ *
+ * PrimeReact 11 replaced the single `BreadCrumb` component and its `model`/`home` props with a namespace
+ * of parts, so the trail is assembled here. The parts are worth assembling rather than working around:
+ * the root is a `nav` carrying an accessible name, the list is an ordered list, and every separator is
+ * marked presentational so it is never read out as part of the path. The old `model` prop produced all of
+ * that too, but only because the component decided it - none of it is something a hand-rolled trail would
+ * reliably reproduce.
  */
 export function PrimeBreadcrumb({ element }: RegisteredComponentProps) {
+    const items = menuItemsProperty(element, 'items');
+
     return (
-        <BreadCrumb
-            data-scene-id={element.id}
-            model={menuItemsProperty(element, 'items')}
-            home={{ icon: 'pi pi-home', url: stringProperty(element, 'homeUrl', '/') }}
-        />
+        <Breadcrumb.Root data-scene-id={element.id}>
+            <Breadcrumb.List>
+                <Breadcrumb.Item>
+                    <Breadcrumb.Link href={stringProperty(element, 'homeUrl', '/')} aria-label='Home'>
+                        <i className='pi pi-home' aria-hidden='true' />
+                    </Breadcrumb.Link>
+                </Breadcrumb.Item>
+                {items.map((item, index) => (
+                    <Fragment key={index}>
+                        <Breadcrumb.Separator>
+                            <i className='pi pi-angle-right' aria-hidden='true' />
+                        </Breadcrumb.Separator>
+                        <Breadcrumb.Item>{breadcrumbEntry(item, index === items.length - 1)}</Breadcrumb.Item>
+                    </Fragment>
+                ))}
+            </Breadcrumb.List>
+        </Breadcrumb.Root>
     );
 }