@cratis/scene.primereact 1.1.0 → 2.0.0

package/dist/cjs/menu/MenuItemContent.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * 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.
+ */ function MenuItemContent({ item }) {
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            item.icon !== undefined && /*#__PURE__*/ jsxRuntime.jsx("i", {
+                className: item.icon,
+                "aria-hidden": "true"
+            }),
+            item.label !== undefined && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                children: item.label
+            })
+        ]
+    });
+}
+
+exports.MenuItemContent = MenuItemContent;
+//# sourceMappingURL=MenuItemContent.js.map

package/dist/cjs/menu/MenuItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemContent.js","sources":["../../../menu/MenuItemContent.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { MenuItem } from '../MenuItem';\n\n/**\n * The configuration {@link MenuItemContent} takes.\n */\nexport interface MenuItemContentProps {\n    /**\n     * The entry whose icon and label to show.\n     */\n    item: MenuItem;\n}\n\n/**\n * The inside of one menu entry - its icon and its label - without the element that makes it selectable.\n *\n * Seven of the components in this folder are Cratis-owned replacements for menus PrimeReact 11 removed,\n * and each of them wraps an entry in a different element: a menubar puts it in a button, a tiered menu in\n * a list row, a dock in an icon-only control. What never differs is the inside, so it is written once\n * here instead of seven times, where six copies would eventually drift apart.\n *\n * Sharing it also settles one accessibility decision in a single place rather than repeatedly: the label\n * already carries the meaning, so the icon beside it is decoration and is hidden from assistive\n * technology. Left to each component, that is exactly the kind of detail one of them would quietly get\n * wrong.\n */\nexport function MenuItemContent({ item }: MenuItemContentProps) {\n    return (\n        <>\n            {item.icon !== undefined && <i className={item.icon} aria-hidden='true' />}\n            {item.label !== undefined && <span>{item.label}</span>}\n        </>\n    );\n}\n"],"names":["MenuItemContent","item","_jsxs","_Fragment","icon","undefined","_jsx","i","className","aria-hidden","label","span"],"mappings":";;;;AAAA;AACA;AAcA;;;;;;;;;;;;AAYC,IACM,SAASA,eAAAA,CAAgB,EAAEC,IAAI,EAAwB,EAAA;IAC1D,qBACIC,eAAA,CAAAC,mBAAA,EAAA;;YACKF,IAAAA,CAAKG,IAAI,KAAKC,SAAAA,kBAAaC,cAAA,CAACC,GAAAA,EAAAA;AAAEC,gBAAAA,SAAAA,EAAWP,KAAKG,IAAI;gBAAEK,aAAAA,EAAY;;YAChER,IAAAA,CAAKS,KAAK,KAAKL,SAAAA,kBAAaC,cAAA,CAACK,MAAAA,EAAAA;AAAMV,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKS;;;;AAGrD;;;;"}

package/dist/cjs/menu/Menubar.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var MenuItemAction = require('./MenuItemAction.js');
+var MenuItemContent = require('./MenuItemContent.js');
+
+const barStyle = {
+    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 = {
+    background: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    textDecoration: 'none'
+};
+const panelStyle = {
+    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 = {
+    ...triggerStyle,
+    width: '100%',
+    textAlign: 'left'
+};
+const separatorStyle = {
+    border: 'none',
+    borderTop: '1px solid var(--scene-surface-border)',
+    margin: 0
+};
+/**
+ * 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.
+ */ function Menubar({ items = [], start, end, ...rest }) {
+    const [openIndex, setOpenIndex] = react.useState(undefined);
+    react.useEffect(()=>{
+        const close = ()=>setOpenIndex(undefined);
+        document.addEventListener('click', close);
+        return ()=>document.removeEventListener('click', close);
+    }, []);
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        ...rest,
+        className: "relative flex items-center gap-2 p-3",
+        style: barStyle,
+        onKeyDown: (event)=>{
+            if (event.key === 'Escape') setOpenIndex(undefined);
+        },
+        children: [
+            start,
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                role: "menubar",
+                className: "flex items-center gap-2",
+                children: items.map((item, index)=>{
+                    const children = item.items ?? [];
+                    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        role: "none",
+                        className: "relative",
+                        children: children.length > 0 ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs("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);
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(MenuItemContent.MenuItemContent, {
+                                            item: item
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                            className: "pi pi-angle-down",
+                                            "aria-hidden": "true"
+                                        })
+                                    ]
+                                }),
+                                openIndex === index && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    role: "menu",
+                                    "aria-label": item.label,
+                                    className: "flex flex-col",
+                                    style: panelStyle,
+                                    children: children.map((child, childIndex)=>child.separator === true ? /*#__PURE__*/ jsxRuntime.jsx("hr", {
+                                            style: separatorStyle
+                                        }, childIndex) : /*#__PURE__*/ jsxRuntime.jsx(MenuItemAction.MenuItemAction, {
+                                            item: child,
+                                            role: "menuitem",
+                                            className: "flex items-center gap-2 p-3",
+                                            style: panelItemStyle
+                                        }, childIndex))
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsxRuntime.jsx(MenuItemAction.MenuItemAction, {
+                            item: item,
+                            role: "menuitem",
+                            className: "inline-flex items-center gap-2",
+                            style: triggerStyle
+                        })
+                    }, index);
+                })
+            }),
+            end
+        ]
+    });
+}
+
+exports.Menubar = Menubar;
+//# sourceMappingURL=Menubar.js.map

package/dist/cjs/menu/Menubar.js.map

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

package/dist/cjs/menu/PanelMenu.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var accordion = require('primereact/accordion');
+var MenuItemAction = require('./MenuItemAction.js');
+var MenuItemContent = require('./MenuItemContent.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+const rootStyle = {
+    color: 'var(--scene-text-color)',
+    width: '16rem'
+};
+const headerStyle = {
+    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 = {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0
+};
+const childStyle = {
+    background: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    textAlign: 'left',
+    textDecoration: 'none',
+    width: '100%'
+};
+/**
+ * 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.
+ */ function PanelMenu({ items = [], multiple = false, ...rest }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion.Root, {
+        ...rest,
+        multiple: multiple,
+        className: "flex flex-col gap-1",
+        style: rootStyle,
+        children: items.map((item, index)=>{
+            const children = item.items ?? [];
+            if (children.length === 0) return /*#__PURE__*/ jsxRuntime.jsx(MenuItemAction.MenuItemAction, {
+                item: item,
+                className: "flex items-center gap-2 p-3",
+                style: headerStyle
+            }, index);
+            return /*#__PURE__*/ jsxRuntime.jsxs(accordion.Accordion.Panel, {
+                value: String(index),
+                disabled: item.disabled,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion.Header, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(accordion.Accordion.Trigger, {
+                            className: "flex items-center gap-2 p-3",
+                            style: headerStyle,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(MenuItemContent.MenuItemContent, {
+                                    item: item
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion.Indicator, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                        className: "pi pi-chevron-down",
+                                        "aria-hidden": "true"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion.Content, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx("ul", {
+                            role: "menu",
+                            "aria-label": item.label,
+                            style: listStyle,
+                            children: children.map((child, childIndex)=>/*#__PURE__*/ jsxRuntime.jsx("li", {
+                                    role: "none",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemAction.MenuItemAction, {
+                                        item: child,
+                                        role: "menuitem",
+                                        className: "flex items-center gap-2 p-3",
+                                        style: childStyle
+                                    })
+                                }, childIndex))
+                        })
+                    })
+                ]
+            }, index);
+        })
+    });
+}
+
+exports.PanelMenu = PanelMenu;
+//# sourceMappingURL=PanelMenu.js.map

package/dist/cjs/menu/PanelMenu.js.map

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

package/dist/cjs/menu/PrimeBreadcrumb.js

@@ -1,23 +1,85 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var breadcrumb = require('primereact/breadcrumb');
 var menuItems = require('../menuItems.js');
 var properties = require('../properties.js');
+var MenuItemContent = require('./MenuItemContent.js');
 
+/**
+ * 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, current) {
+    if (current) {
+        return /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Current, {
+            children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemContent.MenuItemContent, {
+                item: item
+            })
+        });
+    }
+    if (item.url === undefined) return /*#__PURE__*/ jsxRuntime.jsx(MenuItemContent.MenuItemContent, {
+        item: item
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Link, {
+        href: item.url,
+        children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemContent.MenuItemContent, {
+            item: item
+        })
+    });
+}
 /**
  * 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.
  */ function PrimeBreadcrumb({ element }) {
-    return /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.BreadCrumb, {
+    const items = menuItems.menuItemsProperty(element, 'items');
+    return /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Root, {
         "data-scene-id": element.id,
-        model: menuItems.menuItemsProperty(element, 'items'),
-        home: {
-            icon: 'pi pi-home',
-            url: properties.stringProperty(element, 'homeUrl', '/')
-        }
+        children: /*#__PURE__*/ jsxRuntime.jsxs(breadcrumb.Breadcrumb.List, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Item, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Link, {
+                        href: properties.stringProperty(element, 'homeUrl', '/'),
+                        "aria-label": "Home",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-home",
+                            "aria-hidden": "true"
+                        })
+                    })
+                }),
+                items.map((item, index)=>/*#__PURE__*/ jsxRuntime.jsxs(react.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Separator, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                    className: "pi pi-angle-right",
+                                    "aria-hidden": "true"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Item, {
+                                children: breadcrumbEntry(item, index === items.length - 1)
+                            })
+                        ]
+                    }, index))
+            ]
+        })
     });
 }
 

package/dist/cjs/menu/PrimeBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeBreadcrumb.js","sources":["../../../menu/PrimeBreadcrumb.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { BreadCrumb } from 'primereact/breadcrumb';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { menuItemsProperty } from '../menuItems';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:breadcrumb` component - the path to where the user currently is.\n *\n * The home entry is separate from the trail in PrimeReact's model, so it is read from its own `homeUrl`\n * property and always rendered as an icon.\n */\nexport function PrimeBreadcrumb({ element }: RegisteredComponentProps) {\n    return (\n        <BreadCrumb\n            data-scene-id={element.id}\n            model={menuItemsProperty(element, 'items')}\n            home={{ icon: 'pi pi-home', url: stringProperty(element, 'homeUrl', '/') }}\n        />\n    );\n}\n"],"names":["PrimeBreadcrumb","element","_jsx","BreadCrumb","data-scene-id","id","model","menuItemsProperty","home","icon","url","stringProperty"],"mappings":";;;;;;;AAQA;;;;;AAKC,IACM,SAASA,eAAAA,CAAgB,EAAEC,OAAO,EAA4B,EAAA;AACjE,IAAA,qBACIC,cAAA,CAACC,qBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;AACzBC,QAAAA,KAAAA,EAAOC,4BAAkBN,OAAAA,EAAS,OAAA,CAAA;QAClCO,IAAAA,EAAM;YAAEC,IAAAA,EAAM,YAAA;YAAcC,GAAAA,EAAKC,yBAAAA,CAAeV,SAAS,SAAA,EAAW,GAAA;AAAK;;AAGrF;;;;"}
+{"version":3,"file":"PrimeBreadcrumb.js","sources":["../../../menu/PrimeBreadcrumb.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Fragment, ReactNode } from 'react';\nimport { Breadcrumb } from 'primereact/breadcrumb';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { MenuItem } from '../MenuItem';\nimport { menuItemsProperty } from '../menuItems';\nimport { stringProperty } from '../properties';\nimport { MenuItemContent } from './MenuItemContent';\n\n/**\n * One entry in the trail, as the strongest thing the authored data supports.\n *\n * The three cases are genuinely different to assistive technology and only one of them is a link. Where\n * the user already is gets `Breadcrumb.Current`, which carries `aria-current=\"page\"` and is what tells a\n * screen reader the trail has ended - a trailing link says the opposite. An earlier entry that names a\n * target is a link. An earlier entry that names none is plain text, because an anchor with no `href` is\n * not focusable and only looks like a link.\n *\n * @param item The entry to render.\n * @param current Whether this is the last entry, and so where the user is now.\n * @returns The rendered entry.\n */\nfunction breadcrumbEntry(item: MenuItem, current: boolean): ReactNode {\n    if (current) {\n        return (\n            <Breadcrumb.Current>\n                <MenuItemContent item={item} />\n            </Breadcrumb.Current>\n        );\n    }\n\n    if (item.url === undefined) return <MenuItemContent item={item} />;\n\n    return (\n        <Breadcrumb.Link href={item.url}>\n            <MenuItemContent item={item} />\n        </Breadcrumb.Link>\n    );\n}\n\n/**\n * The `PrimeReact:breadcrumb` component - the path to where the user currently is.\n *\n * The home entry is separate from the trail in the authored model, so it is read from its own `homeUrl`\n * property and always rendered as an icon.\n *\n * PrimeReact 11 replaced the single `BreadCrumb` component and its `model`/`home` props with a namespace\n * of parts, so the trail is assembled here. The parts are worth assembling rather than working around:\n * the root is a `nav` carrying an accessible name, the list is an ordered list, and every separator is\n * marked presentational so it is never read out as part of the path. The old `model` prop produced all of\n * that too, but only because the component decided it - none of it is something a hand-rolled trail would\n * reliably reproduce.\n */\nexport function PrimeBreadcrumb({ element }: RegisteredComponentProps) {\n    const items = menuItemsProperty(element, 'items');\n\n    return (\n        <Breadcrumb.Root data-scene-id={element.id}>\n            <Breadcrumb.List>\n                <Breadcrumb.Item>\n                    <Breadcrumb.Link href={stringProperty(element, 'homeUrl', '/')} aria-label='Home'>\n                        <i className='pi pi-home' aria-hidden='true' />\n                    </Breadcrumb.Link>\n                </Breadcrumb.Item>\n                {items.map((item, index) => (\n                    <Fragment key={index}>\n                        <Breadcrumb.Separator>\n                            <i className='pi pi-angle-right' aria-hidden='true' />\n                        </Breadcrumb.Separator>\n                        <Breadcrumb.Item>{breadcrumbEntry(item, index === items.length - 1)}</Breadcrumb.Item>\n                    </Fragment>\n                ))}\n            </Breadcrumb.List>\n        </Breadcrumb.Root>\n    );\n}\n"],"names":["breadcrumbEntry","item","current","_jsx","Breadcrumb","Current","MenuItemContent","url","undefined","Link","href","PrimeBreadcrumb","element","items","menuItemsProperty","Root","data-scene-id","id","_jsxs","List","Item","stringProperty","aria-label","i","className","aria-hidden","map","index","Fragment","Separator","length"],"mappings":";;;;;;;;;AAWA;;;;;;;;;;;;AAYC,IACD,SAASA,eAAAA,CAAgBC,IAAc,EAAEC,OAAgB,EAAA;AACrD,IAAA,IAAIA,OAAAA,EAAS;QACT,qBACIC,cAAA,CAACC,sBAAWC,OAAO,EAAA;AACf,YAAA,QAAA,gBAAAF,cAAA,CAACG,+BAAAA,EAAAA;gBAAgBL,IAAAA,EAAMA;;;AAGnC,IAAA;AAEA,IAAA,IAAIA,IAAAA,CAAKM,GAAG,KAAKC,SAAAA,EAAW,qBAAOL,cAAA,CAACG,+BAAAA,EAAAA;QAAgBL,IAAAA,EAAMA;;IAE1D,qBACIE,cAAA,CAACC,sBAAWK,IAAI,EAAA;AAACC,QAAAA,IAAAA,EAAMT,KAAKM,GAAG;AAC3B,QAAA,QAAA,gBAAAJ,cAAA,CAACG,+BAAAA,EAAAA;YAAgBL,IAAAA,EAAMA;;;AAGnC;AAEA;;;;;;;;;;;;AAYC,IACM,SAASU,eAAAA,CAAgB,EAAEC,OAAO,EAA4B,EAAA;IACjE,MAAMC,KAAAA,GAAQC,4BAAkBF,OAAAA,EAAS,OAAA,CAAA;IAEzC,qBACIT,cAAA,CAACC,sBAAWW,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;gCACtCC,eAAA,CAACd,sBAAWe,IAAI,EAAA;;AACZ,8BAAAhB,cAAA,CAACC,sBAAWgB,IAAI,EAAA;4CACZjB,cAAA,CAACC,sBAAWK,IAAI,EAAA;wBAACC,IAAAA,EAAMW,yBAAAA,CAAeT,SAAS,SAAA,EAAW,GAAA,CAAA;wBAAMU,YAAAA,EAAW,MAAA;AACvE,wBAAA,QAAA,gBAAAnB,cAAA,CAACoB,GAAAA,EAAAA;4BAAEC,SAAAA,EAAU,YAAA;4BAAaC,aAAAA,EAAY;;;;AAG7CZ,gBAAAA,KAAAA,CAAMa,GAAG,CAAC,CAACzB,IAAAA,EAAM0B,sBACdT,eAAA,CAACU,cAAAA,EAAAA;;AACG,0CAAAzB,cAAA,CAACC,sBAAWyB,SAAS,EAAA;AACjB,gCAAA,QAAA,gBAAA1B,cAAA,CAACoB,GAAAA,EAAAA;oCAAEC,SAAAA,EAAU,mBAAA;oCAAoBC,aAAAA,EAAY;;;AAEjD,0CAAAtB,cAAA,CAACC,sBAAWgB,IAAI,EAAA;AAAEpB,gCAAAA,QAAAA,EAAAA,eAAAA,CAAgBC,IAAAA,EAAM0B,KAAAA,KAAUd,KAAAA,CAAMiB,MAAM,GAAG,CAAA;;;AAJtDH,qBAAAA,EAAAA,KAAAA,CAAAA;;;;AAUnC;;;;"}

package/dist/cjs/menu/PrimeContextMenu.js

@@ -1,29 +1,53 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var contextmenu = require('primereact/contextmenu');
 var menuItems = require('../menuItems.js');
 var properties = require('../properties.js');
+var MenuItemContent = require('./MenuItemContent.js');
 
 /**
  * The `PrimeReact:contextMenu` component - commands revealed by right-clicking a region.
  *
- * ContextMenu is opened by a caller reacting to a context-menu event, so the adapter renders the region
- * that owns that event as well. Without it the menu could never be opened and the element would render
- * as nothing at all.
+ * The adapter renders the region that owns the context-menu event as well as the menu itself. Without it
+ * the menu could never be opened and the element would render as nothing at all.
+ *
+ * What changed in PrimeReact 11 is who owns that event. In v10 the menu was one component and the caller
+ * had to hold a ref to it and call `show(event)` from its own `onContextMenu` handler. In v11
+ * `ContextMenu.Trigger` is a part that already carries the handler, the `aria-haspopup` and the expanded
+ * state, so the ref and the hand-written handler are both gone - the region is now declared as the
+ * trigger rather than wired to the menu after the fact.
+ *
+ * The overlay is spelled out as portal, positioner and popup because those are separate parts now. That is
+ * not ceremony: the positioner is what keeps the menu on screen near the pointer, and it renders nothing
+ * at all until the menu is actually open, which is what makes an unopened context menu cost nothing.
  */ function PrimeContextMenu({ element, slots }) {
-    const menu = react.useRef(null);
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+    const items = menuItems.menuItemsProperty(element, 'items');
+    return /*#__PURE__*/ jsxRuntime.jsxs(contextmenu.ContextMenu.Root, {
         "data-scene-id": element.id,
-        onContextMenu: (event)=>menu.current?.show(event),
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(contextmenu.ContextMenu, {
-                ref: menu,
-                model: menuItems.menuItemsProperty(element, 'items')
+            /*#__PURE__*/ jsxRuntime.jsx(contextmenu.ContextMenu.Trigger, {
+                children: slots.content?.length ? slots.content : /*#__PURE__*/ jsxRuntime.jsx("span", {
+                    children: properties.stringProperty(element, 'label', 'Right-click here')
+                })
             }),
-            slots.content?.length ? slots.content : /*#__PURE__*/ jsxRuntime.jsx("span", {
-                children: properties.stringProperty(element, 'label', 'Right-click here')
+            /*#__PURE__*/ jsxRuntime.jsx(contextmenu.ContextMenu.Portal, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(contextmenu.ContextMenu.Positioner, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(contextmenu.ContextMenu.Popup, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(contextmenu.ContextMenu.List, {
+                            children: items.map((item, index)=>item.separator === true ? /*#__PURE__*/ jsxRuntime.jsx(contextmenu.ContextMenu.Separator, {}, index) : /*#__PURE__*/ jsxRuntime.jsx(contextmenu.ContextMenu.Item, {
+                                    value: `${index}`,
+                                    as: item.url === undefined ? 'div' : 'a',
+                                    href: item.url,
+                                    disabled: item.disabled,
+                                    onSelect: ()=>item.command?.(),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemContent.MenuItemContent, {
+                                        item: item
+                                    })
+                                }, index))
+                        })
+                    })
+                })
             })
         ]
     });

package/dist/cjs/menu/PrimeContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeContextMenu.js","sources":["../../../menu/PrimeContextMenu.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useRef } from 'react';\nimport { ContextMenu } from 'primereact/contextmenu';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { menuItemsProperty } from '../menuItems';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:contextMenu` component - commands revealed by right-clicking a region.\n *\n * ContextMenu is opened by a caller reacting to a context-menu event, so the adapter renders the region\n * that owns that event as well. Without it the menu could never be opened and the element would render\n * as nothing at all.\n */\nexport function PrimeContextMenu({ element, slots }: RegisteredComponentProps) {\n    const menu = useRef<ContextMenu>(null);\n    return (\n        <div data-scene-id={element.id} onContextMenu={(event) => menu.current?.show(event)}>\n            <ContextMenu ref={menu} model={menuItemsProperty(element, 'items')} />\n            {slots.content?.length ? slots.content : <span>{stringProperty(element, 'label', 'Right-click here')}</span>}\n        </div>\n    );\n}\n"],"names":["PrimeContextMenu","element","slots","menu","useRef","_jsxs","div","data-scene-id","id","onContextMenu","event","current","show","_jsx","ContextMenu","ref","model","menuItemsProperty","content","length","span","stringProperty"],"mappings":";;;;;;;;AASA;;;;;;AAMC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACzE,IAAA,MAAMC,OAAOC,YAAAA,CAAoB,IAAA,CAAA;AACjC,IAAA,qBACIC,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;AAAEC,QAAAA,aAAAA,EAAe,CAACC,KAAAA,GAAUP,IAAAA,CAAKQ,OAAO,EAAEC,IAAAA,CAAKF,KAAAA,CAAAA;;0BACzEG,cAAA,CAACC,uBAAAA,EAAAA;gBAAYC,GAAAA,EAAKZ,IAAAA;AAAMa,gBAAAA,KAAAA,EAAOC,4BAAkBhB,OAAAA,EAAS,OAAA;;AACzDC,YAAAA,KAAAA,CAAMgB,OAAO,EAAEC,MAAAA,GAASjB,KAAAA,CAAMgB,OAAO,iBAAGL,cAAA,CAACO,MAAAA,EAAAA;AAAMC,gBAAAA,QAAAA,EAAAA,yBAAAA,CAAepB,SAAS,OAAA,EAAS,kBAAA;;;;AAG7F;;;;"}
+{"version":3,"file":"PrimeContextMenu.js","sources":["../../../menu/PrimeContextMenu.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ContextMenu } from 'primereact/contextmenu';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { menuItemsProperty } from '../menuItems';\nimport { stringProperty } from '../properties';\nimport { MenuItemContent } from './MenuItemContent';\n\n/**\n * The `PrimeReact:contextMenu` component - commands revealed by right-clicking a region.\n *\n * The adapter renders the region that owns the context-menu event as well as the menu itself. Without it\n * the menu could never be opened and the element would render as nothing at all.\n *\n * What changed in PrimeReact 11 is who owns that event. In v10 the menu was one component and the caller\n * had to hold a ref to it and call `show(event)` from its own `onContextMenu` handler. In v11\n * `ContextMenu.Trigger` is a part that already carries the handler, the `aria-haspopup` and the expanded\n * state, so the ref and the hand-written handler are both gone - the region is now declared as the\n * trigger rather than wired to the menu after the fact.\n *\n * The overlay is spelled out as portal, positioner and popup because those are separate parts now. That is\n * not ceremony: the positioner is what keeps the menu on screen near the pointer, and it renders nothing\n * at all until the menu is actually open, which is what makes an unopened context menu cost nothing.\n */\nexport function PrimeContextMenu({ element, slots }: RegisteredComponentProps) {\n    const items = menuItemsProperty(element, 'items');\n\n    return (\n        <ContextMenu.Root data-scene-id={element.id}>\n            <ContextMenu.Trigger>\n                {slots.content?.length ? slots.content : <span>{stringProperty(element, 'label', 'Right-click here')}</span>}\n            </ContextMenu.Trigger>\n            <ContextMenu.Portal>\n                <ContextMenu.Positioner>\n                    <ContextMenu.Popup>\n                        <ContextMenu.List>\n                            {items.map((item, index) =>\n                                item.separator === true ? (\n                                    <ContextMenu.Separator key={index} />\n                                ) : (\n                                    <ContextMenu.Item\n                                        key={index}\n                                        value={`${index}`}\n                                        as={item.url === undefined ? 'div' : 'a'}\n                                        href={item.url}\n                                        disabled={item.disabled}\n                                        onSelect={() => item.command?.()}>\n                                        <MenuItemContent item={item} />\n                                    </ContextMenu.Item>\n                                )\n                            )}\n                        </ContextMenu.List>\n                    </ContextMenu.Popup>\n                </ContextMenu.Positioner>\n            </ContextMenu.Portal>\n        </ContextMenu.Root>\n    );\n}\n"],"names":["PrimeContextMenu","element","slots","items","menuItemsProperty","_jsxs","ContextMenu","Root","data-scene-id","id","_jsx","Trigger","content","length","span","stringProperty","Portal","Positioner","Popup","List","map","item","index","separator","Separator","Item","value","as","url","undefined","href","disabled","onSelect","command","MenuItemContent"],"mappings":";;;;;;;;AASA;;;;;;;;;;;;;;;AAeC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACzE,MAAMC,KAAAA,GAAQC,4BAAkBH,OAAAA,EAAS,OAAA,CAAA;IAEzC,qBACII,eAAA,CAACC,wBAAYC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;;AACvC,0BAAAC,cAAA,CAACJ,wBAAYK,OAAO,EAAA;AACfT,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMU,OAAO,EAAEC,MAAAA,GAASX,KAAAA,CAAMU,OAAO,iBAAGF,cAAA,CAACI,MAAAA,EAAAA;AAAMC,oBAAAA,QAAAA,EAAAA,yBAAAA,CAAed,SAAS,OAAA,EAAS,kBAAA;;;AAErF,0BAAAS,cAAA,CAACJ,wBAAYU,MAAM,EAAA;wCACfN,cAAA,CAACJ,wBAAYW,UAAU,EAAA;4CACnBP,cAAA,CAACJ,wBAAYY,KAAK,EAAA;gDACdR,cAAA,CAACJ,wBAAYa,IAAI,EAAA;AACZhB,4BAAAA,QAAAA,EAAAA,KAAAA,CAAMiB,GAAG,CAAC,CAACC,IAAAA,EAAMC,KAAAA,GACdD,KAAKE,SAAS,KAAK,IAAA,iBACfb,cAAA,CAACJ,wBAAYkB,SAAS,EAAA,EAAA,EAAMF,KAAAA,CAAAA,iBAE5BZ,cAAA,CAACJ,wBAAYmB,IAAI,EAAA;AAEbC,oCAAAA,KAAAA,EAAO,GAAGJ,KAAAA,CAAAA,CAAO;AACjBK,oCAAAA,EAAAA,EAAIN,IAAAA,CAAKO,GAAG,KAAKC,SAAAA,GAAY,KAAA,GAAQ,GAAA;AACrCC,oCAAAA,IAAAA,EAAMT,KAAKO,GAAG;AACdG,oCAAAA,QAAAA,EAAUV,KAAKU,QAAQ;oCACvBC,QAAAA,EAAU,IAAMX,KAAKY,OAAO,IAAA;AAC5B,oCAAA,QAAA,gBAAAvB,cAAA,CAACwB,+BAAAA,EAAAA;wCAAgBb,IAAAA,EAAMA;;AANlBC,iCAAAA,EAAAA,KAAAA,CAAAA;;;;;;;AAgB7C;;;;"}

package/dist/cjs/menu/PrimeDock.js

@@ -1,24 +1,51 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var dock = require('primereact/dock');
 var menuItems = require('../menuItems.js');
 var properties = require('../properties.js');
+var Dock = require('./Dock.js');
+var DockPosition = require('./DockPosition.js');
 
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
 /**
- * The `PrimeReact:dock` component - a macOS-style dock of magnifying icons.
+ * Narrows an authored `position` onto the edges a dock can actually be anchored to.
  *
- * Dock positions itself absolutely against its nearest positioned ancestor, so it is wrapped in a sized
- * relative box; dropped straight into a Scene tree it would otherwise pin itself to the page.
+ * A screen's properties are authored data rather than compiler-checked values, so an unrecognized edge is
+ * an ordinary thing to encounter. Falling back to the bottom edge - the dock's own default - keeps a
+ * mistyped property behaving exactly like an absent one, which is the rule every reader in this package
+ * follows.
  *
- * In PrimeReact 11 this component is removed with no direct replacement.
+ * @param value The authored position.
+ * @returns The matching edge, or the bottom edge when the value names none.
+ */ function dockPosition(value) {
+    switch(value){
+        case DockPosition.DockPosition.Top:
+            return DockPosition.DockPosition.Top;
+        case DockPosition.DockPosition.Left:
+            return DockPosition.DockPosition.Left;
+        case DockPosition.DockPosition.Right:
+            return DockPosition.DockPosition.Right;
+        default:
+            return DockPosition.DockPosition.Bottom;
+    }
+}
+/**
+ * The `PrimeReact:dock` component - a strip of icons anchored to one edge.
+ *
+ * PrimeReact 11 removed `dock` with nothing to replace it, so what this adapts is Scene's own
+ * {@link Dock}. The magnifying effect that made v10's dock recognizable is not part of the replacement;
+ * what a screen actually depends on is a row of icon commands pinned to an edge, and that is what remains.
+ *
+ * A dock positions itself absolutely against its nearest positioned ancestor, so it is wrapped in a sized
+ * relative box here; dropped straight into a Scene tree it would otherwise pin itself to the page.
  */ function PrimeDock({ element }) {
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         "data-scene-id": element.id,
         className: "relative h-40 w-full",
-        children: /*#__PURE__*/ jsxRuntime.jsx(dock.Dock, {
-            model: menuItems.menuItemsProperty(element, 'items'),
-            position: properties.stringProperty(element, 'position', 'bottom')
+        children: /*#__PURE__*/ jsxRuntime.jsx(Dock.Dock, {
+            items: menuItems.menuItemsProperty(element, 'items'),
+            position: dockPosition(properties.stringProperty(element, 'position', DockPosition.DockPosition.Bottom))
         })
     });
 }