@cratis/scene.primereact 1.1.0 → 2.0.0

package/dist/cjs/menu/TieredMenu.js

@@ -0,0 +1,131 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var MenuItemAction = require('./MenuItemAction.js');
+var MenuItemContent = require('./MenuItemContent.js');
+
+const rootStyle = {
+    background: 'var(--scene-surface-card)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+    color: 'var(--scene-text-color)',
+    width: 'fit-content'
+};
+const listStyle = {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    minWidth: '12rem'
+};
+const entryStyle = {
+    background: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    textAlign: 'left',
+    textDecoration: 'none',
+    width: '100%'
+};
+const submenuStyle = {
+    position: 'absolute',
+    top: 0,
+    left: '100%',
+    zIndex: 1,
+    background: 'var(--scene-surface-overlay)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)'
+};
+const separatorStyle = {
+    borderTop: '1px solid var(--scene-surface-border)',
+    margin: 0
+};
+/**
+ * A vertical menu whose submenus open to the side, to any depth. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/tieredmenu` outright, with no successor and no
+ * headless hook. The surviving `primereact/menu` parts can nest through `Menu.Submenu`, but only inside a
+ * popup anchored to a trigger; a tiered menu is an *inline* control that is already open, which those
+ * parts have no shape for. Rebuilding it as plain markup is both smaller and more honest than bending an
+ * overlay into standing still.
+ *
+ * Depth is the one thing this keeps unrestricted, because depth is the whole point of the component: each
+ * level renders the same way and holds its own open child, so an authored model nests as far as its
+ * author took it.
+ *
+ * What it deliberately does not carry over from the v10 `TieredMenu`: submenus open on click, never on
+ * hover; there is no roving-focus keyboard model with arrow keys walking levels, only the tab order the
+ * browser gives; the popup form (`popup` plus an imperative `toggle`) is gone entirely, since Scene only
+ * ever rendered the inline one; opening a deep branch does not flip the level to the other side when it
+ * would run off the viewport; and item templates are not supported.
+ */ function TieredMenu({ items = [], ...rest }) {
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        ...rest,
+        style: rootStyle,
+        children: /*#__PURE__*/ jsxRuntime.jsx(TieredMenuLevel, {
+            items: items
+        })
+    });
+}
+/**
+ * One level of a tiered menu, holding which of its own entries is currently expanded.
+ *
+ * Keeping the open entry per level rather than as one path in the root is what makes the recursion
+ * trivial: a level knows only about its own children, so it can render another of itself for them without
+ * threading an index path down and back.
+ */ function TieredMenuLevel({ items }) {
+    const [openIndex, setOpenIndex] = react.useState(undefined);
+    return /*#__PURE__*/ jsxRuntime.jsx("ul", {
+        role: "menu",
+        style: listStyle,
+        children: items.map((item, index)=>{
+            if (item.separator === true) return /*#__PURE__*/ jsxRuntime.jsx("li", {
+                role: "separator",
+                style: separatorStyle
+            }, index);
+            const children = item.items ?? [];
+            return /*#__PURE__*/ jsxRuntime.jsx("li", {
+                role: "none",
+                className: "relative",
+                children: children.length > 0 ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                            type: "button",
+                            role: "menuitem",
+                            className: "flex items-center gap-2 p-3",
+                            style: entryStyle,
+                            disabled: item.disabled,
+                            "aria-haspopup": "true",
+                            "aria-expanded": openIndex === index,
+                            onClick: ()=>setOpenIndex(openIndex === index ? undefined : index),
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(MenuItemContent.MenuItemContent, {
+                                    item: item
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                    className: "pi pi-angle-right",
+                                    "aria-hidden": "true"
+                                })
+                            ]
+                        }),
+                        openIndex === index && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            style: submenuStyle,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(TieredMenuLevel, {
+                                items: children
+                            })
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsxRuntime.jsx(MenuItemAction.MenuItemAction, {
+                    item: item,
+                    role: "menuitem",
+                    className: "flex items-center gap-2 p-3",
+                    style: entryStyle
+                })
+            }, index);
+        })
+    });
+}
+
+exports.TieredMenu = TieredMenu;
+//# sourceMappingURL=TieredMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TieredMenu.js","sources":["../../../menu/TieredMenu.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, useState } from 'react';\nimport { MenuItem } from '../MenuItem';\nimport { MenuItemAction } from './MenuItemAction';\nimport { MenuItemContent } from './MenuItemContent';\n\nconst rootStyle: 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    width: 'fit-content',\n};\n\nconst listStyle: CSSProperties = { listStyle: 'none', margin: 0, padding: 0, minWidth: '12rem' };\n\nconst entryStyle: 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\nconst submenuStyle: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: '100%',\n    zIndex: 1,\n    background: 'var(--scene-surface-overlay)',\n    border: '1px solid var(--scene-surface-border)',\n    borderRadius: 'var(--scene-content-border-radius)',\n};\n\nconst separatorStyle: CSSProperties = { borderTop: '1px solid var(--scene-surface-border)', margin: 0 };\n\n/**\n * The configuration {@link TieredMenu} takes.\n */\nexport interface TieredMenuProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * The commands to show. Nesting is followed to any depth - each level opens beside its parent.\n     */\n    items?: MenuItem[];\n}\n\n/**\n * A vertical menu whose submenus open to the side, to any depth. Cratis-owned.\n *\n * This exists because PrimeReact 11 removed `primereact/tieredmenu` outright, with no successor and no\n * headless hook. The surviving `primereact/menu` parts can nest through `Menu.Submenu`, but only inside a\n * popup anchored to a trigger; a tiered menu is an *inline* control that is already open, which those\n * parts have no shape for. Rebuilding it as plain markup is both smaller and more honest than bending an\n * overlay into standing still.\n *\n * Depth is the one thing this keeps unrestricted, because depth is the whole point of the component: each\n * level renders the same way and holds its own open child, so an authored model nests as far as its\n * author took it.\n *\n * What it deliberately does not carry over from the v10 `TieredMenu`: submenus open on click, never on\n * hover; there is no roving-focus keyboard model with arrow keys walking levels, only the tab order the\n * browser gives; the popup form (`popup` plus an imperative `toggle`) is gone entirely, since Scene only\n * ever rendered the inline one; opening a deep branch does not flip the level to the other side when it\n * would run off the viewport; and item templates are not supported.\n */\nexport function TieredMenu({ items = [], ...rest }: TieredMenuProps) {\n    return (\n        <div {...rest} style={rootStyle}>\n            <TieredMenuLevel items={items} />\n        </div>\n    );\n}\n\n/**\n * The configuration one level of a tiered menu takes.\n */\ninterface TieredMenuLevelProps {\n    /**\n     * The entries at this level.\n     */\n    items: MenuItem[];\n}\n\n/**\n * One level of a tiered menu, holding which of its own entries is currently expanded.\n *\n * Keeping the open entry per level rather than as one path in the root is what makes the recursion\n * trivial: a level knows only about its own children, so it can render another of itself for them without\n * threading an index path down and back.\n */\nfunction TieredMenuLevel({ items }: TieredMenuLevelProps) {\n    const [openIndex, setOpenIndex] = useState<number | undefined>(undefined);\n\n    return (\n        <ul role='menu' style={listStyle}>\n            {items.map((item, index) => {\n                if (item.separator === true) return <li key={index} role='separator' style={separatorStyle} />;\n\n                const children = item.items ?? [];\n\n                return (\n                    <li key={index} role='none' className='relative'>\n                        {children.length > 0 ? (\n                            <>\n                                <button\n                                    type='button'\n                                    role='menuitem'\n                                    className='flex items-center gap-2 p-3'\n                                    style={entryStyle}\n                                    disabled={item.disabled}\n                                    aria-haspopup='true'\n                                    aria-expanded={openIndex === index}\n                                    onClick={() => setOpenIndex(openIndex === index ? undefined : index)}>\n                                    <MenuItemContent item={item} />\n                                    <i className='pi pi-angle-right' aria-hidden='true' />\n                                </button>\n                                {openIndex === index && (\n                                    <div style={submenuStyle}>\n                                        <TieredMenuLevel items={children} />\n                                    </div>\n                                )}\n                            </>\n                        ) : (\n                            <MenuItemAction item={item} role='menuitem' className='flex items-center gap-2 p-3' style={entryStyle} />\n                        )}\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"names":["rootStyle","background","border","borderRadius","color","width","listStyle","margin","padding","minWidth","entryStyle","cursor","font","textAlign","textDecoration","submenuStyle","position","top","left","zIndex","separatorStyle","borderTop","TieredMenu","items","rest","_jsx","div","style","TieredMenuLevel","openIndex","setOpenIndex","useState","undefined","ul","role","map","item","index","separator","li","children","className","length","_jsxs","_Fragment","button","type","disabled","aria-haspopup","aria-expanded","onClick","MenuItemContent","i","aria-hidden","MenuItemAction"],"mappings":"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"}

package/dist/cjs/menuItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuItems.js","sources":["../../menuItems.ts"],"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 type { MenuItem } from 'primereact/menuitem';\nimport { SceneElement } from '@cratis/scene.model';\nimport { arrayProperty } from './properties';\n\n/**\n * Turns raw authored entries into the `MenuItem` model every PrimeReact menu, menubar, breadcrumb,\n * split button and dock takes.\n *\n * Ten different components in this package all want the same nested `{ label, icon, items }` shape, so\n * reading it lives here once rather than in each of them. Nesting is followed to any depth because a\n * menubar and a tiered menu differ only in how deep an author actually goes - the reader should not be\n * the thing that decides.\n *\n * Entries with no usable label are dropped rather than rendered blank, and a `separator: true` entry is\n * kept without one, because that is PrimeReact's own way of spelling a divider.\n *\n * @param entries The raw entries to convert.\n * @returns The converted menu items, in order.\n */\nexport function toMenuItems(entries: unknown[]): MenuItem[] {\n    const items: MenuItem[] = [];\n    for (const entry of entries) {\n        if (typeof entry === 'string') {\n            items.push({ label: entry });\n            continue;\n        }\n\n        if (typeof entry !== 'object' || entry === undefined || entry === null || Array.isArray(entry)) continue;\n\n        const record = entry as Record<string, unknown>;\n        const item: MenuItem = {};\n        if (typeof record.label === 'string') item.label = record.label;\n        if (typeof record.icon === 'string') item.icon = record.icon;\n        if (typeof record.url === 'string') item.url = record.url;\n        if (typeof record.disabled === 'boolean') item.disabled = record.disabled;\n        if (record.separator === true) item.separator = true;\n        if (Array.isArray(record.items)) item.items = toMenuItems(record.items);\n        if (item.label === undefined && item.separator !== true) continue;\n        items.push(item);\n    }\n\n    return items;\n}\n\n/**\n * Reads a menu model off a Scene element's properties.\n *\n * @param element The element whose properties to read.\n * @param name The property name holding the entries.\n * @returns The converted menu items, empty when the property is missing or is not an array.\n */\nexport function menuItemsProperty(element: SceneElement, name: string): MenuItem[] {\n    return toMenuItems(arrayProperty(element, name));\n}\n"],"names":["toMenuItems","entries","items","entry","push","label","undefined","Array","isArray","record","item","icon","url","disabled","separator","menuItemsProperty","element","name","arrayProperty"],"mappings":";;;;AAAA;AACA;AAMA;;;;;;;;;;;;;;IAeO,SAASA,WAAAA,CAAYC,OAAkB,EAAA;AAC1C,IAAA,MAAMC,QAAoB,EAAE;IAC5B,KAAK,MAAMC,SAASF,OAAAA,CAAS;QACzB,IAAI,OAAOE,UAAU,QAAA,EAAU;AAC3BD,YAAAA,KAAAA,CAAME,IAAI,CAAC;gBAAEC,KAAAA,EAAOF;AAAM,aAAA,CAAA;AAC1B,YAAA;AACJ,QAAA;QAEA,IAAI,OAAOA,KAAAA,KAAU,QAAA,IAAYA,KAAAA,KAAUG,SAAAA,IAAaH,UAAU,IAAA,IAAQI,KAAAA,CAAMC,OAAO,CAACL,KAAAA,CAAAA,EAAQ;AAEhG,QAAA,MAAMM,MAAAA,GAASN,KAAAA;AACf,QAAA,MAAMO,OAAiB,EAAC;QACxB,IAAI,OAAOD,OAAOJ,KAAK,KAAK,UAAUK,IAAAA,CAAKL,KAAK,GAAGI,MAAAA,CAAOJ,KAAK;QAC/D,IAAI,OAAOI,OAAOE,IAAI,KAAK,UAAUD,IAAAA,CAAKC,IAAI,GAAGF,MAAAA,CAAOE,IAAI;QAC5D,IAAI,OAAOF,OAAOG,GAAG,KAAK,UAAUF,IAAAA,CAAKE,GAAG,GAAGH,MAAAA,CAAOG,GAAG;QACzD,IAAI,OAAOH,OAAOI,QAAQ,KAAK,WAAWH,IAAAA,CAAKG,QAAQ,GAAGJ,MAAAA,CAAOI,QAAQ;AACzE,QAAA,IAAIJ,OAAOK,SAAS,KAAK,IAAA,EAAMJ,IAAAA,CAAKI,SAAS,GAAG,IAAA;QAChD,IAAIP,KAAAA,CAAMC,OAAO,CAACC,MAAAA,CAAOP,KAAK,CAAA,EAAGQ,IAAAA,CAAKR,KAAK,GAAGF,WAAAA,CAAYS,MAAAA,CAAOP,KAAK,CAAA;AACtE,QAAA,IAAIQ,KAAKL,KAAK,KAAKC,aAAaI,IAAAA,CAAKI,SAAS,KAAK,IAAA,EAAM;AACzDZ,QAAAA,KAAAA,CAAME,IAAI,CAACM,IAAAA,CAAAA;AACf,IAAA;IAEA,OAAOR,KAAAA;AACX;AAEA;;;;;;AAMC,IACM,SAASa,iBAAAA,CAAkBC,OAAqB,EAAEC,IAAY,EAAA;IACjE,OAAOjB,WAAAA,CAAYkB,yBAAcF,OAAAA,EAASC,IAAAA,CAAAA,CAAAA;AAC9C;;;;;"}
+{"version":3,"file":"menuItems.js","sources":["../../menuItems.ts"],"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';\nimport { SceneElement } from '@cratis/scene.model';\nimport { arrayProperty } from './properties';\n\n/**\n * Turns raw authored entries into the `MenuItem` model every PrimeReact menu, menubar, breadcrumb,\n * split button and dock takes.\n *\n * Ten different components in this package all want the same nested `{ label, icon, items }` shape, so\n * reading it lives here once rather than in each of them. Nesting is followed to any depth because a\n * menubar and a tiered menu differ only in how deep an author actually goes - the reader should not be\n * the thing that decides.\n *\n * Entries with no usable label are dropped rather than rendered blank, and a `separator: true` entry is\n * kept without one, because that is PrimeReact's own way of spelling a divider.\n *\n * @param entries The raw entries to convert.\n * @returns The converted menu items, in order.\n */\nexport function toMenuItems(entries: unknown[]): MenuItem[] {\n    const items: MenuItem[] = [];\n    for (const entry of entries) {\n        if (typeof entry === 'string') {\n            items.push({ label: entry });\n            continue;\n        }\n\n        if (typeof entry !== 'object' || entry === undefined || entry === null || Array.isArray(entry)) continue;\n\n        const record = entry as Record<string, unknown>;\n        const item: MenuItem = {};\n        if (typeof record.label === 'string') item.label = record.label;\n        if (typeof record.icon === 'string') item.icon = record.icon;\n        if (typeof record.url === 'string') item.url = record.url;\n        if (typeof record.disabled === 'boolean') item.disabled = record.disabled;\n        if (record.separator === true) item.separator = true;\n        if (Array.isArray(record.items)) item.items = toMenuItems(record.items);\n        if (item.label === undefined && item.separator !== true) continue;\n        items.push(item);\n    }\n\n    return items;\n}\n\n/**\n * Reads a menu model off a Scene element's properties.\n *\n * @param element The element whose properties to read.\n * @param name The property name holding the entries.\n * @returns The converted menu items, empty when the property is missing or is not an array.\n */\nexport function menuItemsProperty(element: SceneElement, name: string): MenuItem[] {\n    return toMenuItems(arrayProperty(element, name));\n}\n"],"names":["toMenuItems","entries","items","entry","push","label","undefined","Array","isArray","record","item","icon","url","disabled","separator","menuItemsProperty","element","name","arrayProperty"],"mappings":";;;;AAAA;AACA;AAMA;;;;;;;;;;;;;;IAeO,SAASA,WAAAA,CAAYC,OAAkB,EAAA;AAC1C,IAAA,MAAMC,QAAoB,EAAE;IAC5B,KAAK,MAAMC,SAASF,OAAAA,CAAS;QACzB,IAAI,OAAOE,UAAU,QAAA,EAAU;AAC3BD,YAAAA,KAAAA,CAAME,IAAI,CAAC;gBAAEC,KAAAA,EAAOF;AAAM,aAAA,CAAA;AAC1B,YAAA;AACJ,QAAA;QAEA,IAAI,OAAOA,KAAAA,KAAU,QAAA,IAAYA,KAAAA,KAAUG,SAAAA,IAAaH,UAAU,IAAA,IAAQI,KAAAA,CAAMC,OAAO,CAACL,KAAAA,CAAAA,EAAQ;AAEhG,QAAA,MAAMM,MAAAA,GAASN,KAAAA;AACf,QAAA,MAAMO,OAAiB,EAAC;QACxB,IAAI,OAAOD,OAAOJ,KAAK,KAAK,UAAUK,IAAAA,CAAKL,KAAK,GAAGI,MAAAA,CAAOJ,KAAK;QAC/D,IAAI,OAAOI,OAAOE,IAAI,KAAK,UAAUD,IAAAA,CAAKC,IAAI,GAAGF,MAAAA,CAAOE,IAAI;QAC5D,IAAI,OAAOF,OAAOG,GAAG,KAAK,UAAUF,IAAAA,CAAKE,GAAG,GAAGH,MAAAA,CAAOG,GAAG;QACzD,IAAI,OAAOH,OAAOI,QAAQ,KAAK,WAAWH,IAAAA,CAAKG,QAAQ,GAAGJ,MAAAA,CAAOI,QAAQ;AACzE,QAAA,IAAIJ,OAAOK,SAAS,KAAK,IAAA,EAAMJ,IAAAA,CAAKI,SAAS,GAAG,IAAA;QAChD,IAAIP,KAAAA,CAAMC,OAAO,CAACC,MAAAA,CAAOP,KAAK,CAAA,EAAGQ,IAAAA,CAAKR,KAAK,GAAGF,WAAAA,CAAYS,MAAAA,CAAOP,KAAK,CAAA;AACtE,QAAA,IAAIQ,KAAKL,KAAK,KAAKC,aAAaI,IAAAA,CAAKI,SAAS,KAAK,IAAA,EAAM;AACzDZ,QAAAA,KAAAA,CAAME,IAAI,CAACM,IAAAA,CAAAA;AACf,IAAA;IAEA,OAAOR,KAAAA;AACX;AAEA;;;;;;AAMC,IACM,SAASa,iBAAAA,CAAkBC,OAAqB,EAAEC,IAAY,EAAA;IACjE,OAAOjB,WAAAA,CAAYkB,yBAAcF,OAAAA,EAASC,IAAAA,CAAAA,CAAAA;AAC9C;;;;;"}

package/dist/cjs/messages/PrimeInlineMessage.js

@@ -4,17 +4,53 @@ var jsxRuntime = require('react/jsx-runtime');
 var message = require('primereact/message');
 var properties = require('../properties.js');
 
+/**
+ * The `primeicons` class that stands for each severity.
+ *
+ * Deliberately duplicated from `PrimeMessage` rather than shared. Both adapters need it and neither needs
+ * the other, and lifting six lines into a module would put a helper nobody outside this folder wants into
+ * the package's public surface - `index.ts` re-exports everything a file exports.
+ *
+ * The icon is kept even for the compact variant, because severity is otherwise carried by color alone,
+ * and "the red one means you have to fix it" is not information a reader who cannot see the color gets.
+ */ const severityIcons = {
+    success: 'pi pi-check-circle',
+    info: 'pi pi-info-circle',
+    warn: 'pi pi-exclamation-triangle',
+    error: 'pi pi-times-circle'
+};
 /**
  * The `PrimeReact:inlineMessage` component - a short notice sitting beside the field it is about.
  *
  * The same PrimeReact `Message` as `message`, sized to its content instead of the row, so a validation
- * hint reads as belonging to one field rather than to the whole form.
+ * hint reads as belonging to one field rather than to the whole form. PrimeReact 11 gives that intent a
+ * name of its own - `variant='simple'` drops the panel and leaves the icon and the words - which is
+ * exactly what the v10 adapter was approximating with a width class, so the distinction survives the
+ * migration and lands on a real prop rather than on CSS.
+ *
+ * The v11 module is `primereact/message`, singular. The plural `messages` module - a list of notices
+ * driven imperatively - was removed with no replacement, but this package never declared a name for it,
+ * so nothing here is lost with it.
  */ function PrimeInlineMessage({ element }) {
-    return /*#__PURE__*/ jsxRuntime.jsx(message.Message, {
+    const severity = properties.severityProperty(element, 'severity', 'info');
+    return /*#__PURE__*/ jsxRuntime.jsxs(message.Message.Root, {
         "data-scene-id": element.id,
         className: "inline-flex",
-        severity: properties.stringProperty(element, 'severity', 'info'),
-        text: properties.stringProperty(element, 'text', '')
+        variant: "simple",
+        severity: severity,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(message.Message.Icon, {
+                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                    className: severityIcons[severity] ?? severityIcons.info,
+                    "aria-hidden": "true"
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(message.Message.Content, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(message.Message.Text, {
+                    children: properties.stringProperty(element, 'text', '')
+                })
+            })
+        ]
     });
 }
 

package/dist/cjs/messages/PrimeInlineMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeInlineMessage.js","sources":["../../../messages/PrimeInlineMessage.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 { Message } from 'primereact/message';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:inlineMessage` component - a short notice sitting beside the field it is about.\n *\n * The same PrimeReact `Message` as `message`, sized to its content instead of the row, so a validation\n * hint reads as belonging to one field rather than to the whole form.\n */\nexport function PrimeInlineMessage({ element }: RegisteredComponentProps) {\n    return (\n        <Message\n            data-scene-id={element.id}\n            className='inline-flex'\n            severity={stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error'}\n            text={stringProperty(element, 'text', '')}\n        />\n    );\n}\n"],"names":["PrimeInlineMessage","element","_jsx","Message","data-scene-id","id","className","severity","stringProperty","text"],"mappings":";;;;;;AAOA;;;;;AAKC,IACM,SAASA,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,qBACIC,cAAA,CAACC,eAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;QACzBC,SAAAA,EAAU,aAAA;QACVC,QAAAA,EAAUC,yBAAAA,CAAeP,SAAS,UAAA,EAAY,MAAA,CAAA;QAC9CQ,IAAAA,EAAMD,yBAAAA,CAAeP,SAAS,MAAA,EAAQ,EAAA;;AAGlD;;;;"}
+{"version":3,"file":"PrimeInlineMessage.js","sources":["../../../messages/PrimeInlineMessage.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 { Message } from 'primereact/message';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport {severityProperty, stringProperty} from '../properties';\n\n/**\n * The `primeicons` class that stands for each severity.\n *\n * Deliberately duplicated from `PrimeMessage` rather than shared. Both adapters need it and neither needs\n * the other, and lifting six lines into a module would put a helper nobody outside this folder wants into\n * the package's public surface - `index.ts` re-exports everything a file exports.\n *\n * The icon is kept even for the compact variant, because severity is otherwise carried by color alone,\n * and \"the red one means you have to fix it\" is not information a reader who cannot see the color gets.\n */\nconst severityIcons: Record<string, string> = {\n    success: 'pi pi-check-circle',\n    info: 'pi pi-info-circle',\n    warn: 'pi pi-exclamation-triangle',\n    error: 'pi pi-times-circle',\n};\n\n/**\n * The `PrimeReact:inlineMessage` component - a short notice sitting beside the field it is about.\n *\n * The same PrimeReact `Message` as `message`, sized to its content instead of the row, so a validation\n * hint reads as belonging to one field rather than to the whole form. PrimeReact 11 gives that intent a\n * name of its own - `variant='simple'` drops the panel and leaves the icon and the words - which is\n * exactly what the v10 adapter was approximating with a width class, so the distinction survives the\n * migration and lands on a real prop rather than on CSS.\n *\n * The v11 module is `primereact/message`, singular. The plural `messages` module - a list of notices\n * driven imperatively - was removed with no replacement, but this package never declared a name for it,\n * so nothing here is lost with it.\n */\nexport function PrimeInlineMessage({ element }: RegisteredComponentProps) {\n    const severity = severityProperty(element, 'severity', 'info');\n    return (\n        <Message.Root\n            data-scene-id={element.id}\n            className='inline-flex'\n            variant='simple'\n            severity={severity as 'success' | 'info' | 'warn' | 'error'}>\n            <Message.Icon>\n                <i className={severityIcons[severity] ?? severityIcons.info} aria-hidden='true' />\n            </Message.Icon>\n            <Message.Content>\n                <Message.Text>{stringProperty(element, 'text', '')}</Message.Text>\n            </Message.Content>\n        </Message.Root>\n    );\n}\n"],"names":["severityIcons","success","info","warn","error","PrimeInlineMessage","element","severity","severityProperty","_jsxs","Message","Root","data-scene-id","id","className","variant","_jsx","Icon","i","aria-hidden","Content","Text","stringProperty"],"mappings":";;;;;;AAOA;;;;;;;;;AASC,IACD,MAAMA,aAAAA,GAAwC;IAC1CC,OAAAA,EAAS,oBAAA;IACTC,IAAAA,EAAM,mBAAA;IACNC,IAAAA,EAAM,4BAAA;IACNC,KAAAA,EAAO;AACX,CAAA;AAEA;;;;;;;;;;;;AAYC,IACM,SAASC,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;IACpE,MAAMC,QAAAA,GAAWC,2BAAAA,CAAiBF,OAAAA,EAAS,UAAA,EAAY,MAAA,CAAA;IACvD,qBACIG,eAAA,CAACC,gBAAQC,IAAI,EAAA;AACTC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;QACzBC,SAAAA,EAAU,aAAA;QACVC,OAAAA,EAAQ,QAAA;QACRR,QAAAA,EAAUA,QAAAA;;AACV,0BAAAS,cAAA,CAACN,gBAAQO,IAAI,EAAA;AACT,gBAAA,QAAA,gBAAAD,cAAA,CAACE,GAAAA,EAAAA;AAAEJ,oBAAAA,SAAAA,EAAWd,aAAa,CAACO,QAAAA,CAAS,IAAIP,cAAcE,IAAI;oBAAEiB,aAAAA,EAAY;;;AAE7E,0BAAAH,cAAA,CAACN,gBAAQU,OAAO,EAAA;wCACZJ,cAAA,CAACN,gBAAQW,IAAI,EAAA;AAAEC,oBAAAA,QAAAA,EAAAA,yBAAAA,CAAehB,SAAS,MAAA,EAAQ,EAAA;;;;;AAI/D;;;;"}

package/dist/cjs/messages/PrimeMessage.js

@@ -4,18 +4,53 @@ var jsxRuntime = require('react/jsx-runtime');
 var message = require('primereact/message');
 var properties = require('../properties.js');
 
+/**
+ * The `primeicons` class that stands for each severity.
+ *
+ * PrimeReact 10 chose this icon for you; PrimeReact 11 made the icon a part you compose, which is right
+ * for an application - it can use its own icon set - and wrong for a Scene element, which has no way to
+ * name one. The mapping is restored here so a notice still reads at a glance rather than as an
+ * undifferentiated colored box.
+ */ const severityIcons = {
+    success: 'pi pi-check-circle',
+    info: 'pi pi-info-circle',
+    warn: 'pi pi-exclamation-triangle',
+    error: 'pi pi-times-circle'
+};
 /**
  * The `PrimeReact:message` component - a block-level notice attached to a region of a screen.
  *
  * Rendered full width, which is what separates it from `inlineMessage`: the two share PrimeReact's
  * `Message` component but mean different things on a screen, and the width is the difference a reader
- * actually sees.
+ * actually sees. PrimeReact 11 adds a second axis for the same distinction - `variant` - and this one is
+ * the default, bordered variant, because a region-level notice is meant to be a block you notice.
+ *
+ * The v11 module is `primereact/message`, singular, which is the one that survived; the plural `messages`
+ * module - a list of notices with its own imperative API - was removed outright, and this package never
+ * declared a name for it.
+ *
+ * v10's `warning` is translated to v11's `warn` so screens written against the old vocabulary keep their
+ * color; `error` was and still is spelled the same here, unlike everywhere else in PrimeReact where the
+ * danger severity is called `danger`.
  */ function PrimeMessage({ element }) {
-    return /*#__PURE__*/ jsxRuntime.jsx(message.Message, {
+    const severity = properties.severityProperty(element, 'severity', 'info');
+    return /*#__PURE__*/ jsxRuntime.jsxs(message.Message.Root, {
         "data-scene-id": element.id,
         className: "w-full",
-        severity: properties.stringProperty(element, 'severity', 'info'),
-        text: properties.stringProperty(element, 'text', '')
+        severity: severity,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(message.Message.Icon, {
+                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                    className: severityIcons[severity] ?? severityIcons.info,
+                    "aria-hidden": "true"
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(message.Message.Content, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(message.Message.Text, {
+                    children: properties.stringProperty(element, 'text', '')
+                })
+            })
+        ]
     });
 }
 

package/dist/cjs/messages/PrimeMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeMessage.js","sources":["../../../messages/PrimeMessage.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 { Message } from 'primereact/message';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:message` component - a block-level notice attached to a region of a screen.\n *\n * Rendered full width, which is what separates it from `inlineMessage`: the two share PrimeReact's\n * `Message` component but mean different things on a screen, and the width is the difference a reader\n * actually sees.\n */\nexport function PrimeMessage({ element }: RegisteredComponentProps) {\n    return (\n        <Message\n            data-scene-id={element.id}\n            className='w-full'\n            severity={stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error'}\n            text={stringProperty(element, 'text', '')}\n        />\n    );\n}\n"],"names":["PrimeMessage","element","_jsx","Message","data-scene-id","id","className","severity","stringProperty","text"],"mappings":";;;;;;AAOA;;;;;;AAMC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAA4B,EAAA;AAC9D,IAAA,qBACIC,cAAA,CAACC,eAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;QACzBC,SAAAA,EAAU,QAAA;QACVC,QAAAA,EAAUC,yBAAAA,CAAeP,SAAS,UAAA,EAAY,MAAA,CAAA;QAC9CQ,IAAAA,EAAMD,yBAAAA,CAAeP,SAAS,MAAA,EAAQ,EAAA;;AAGlD;;;;"}
+{"version":3,"file":"PrimeMessage.js","sources":["../../../messages/PrimeMessage.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 { Message } from 'primereact/message';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport {severityProperty, stringProperty} from '../properties';\n\n/**\n * The `primeicons` class that stands for each severity.\n *\n * PrimeReact 10 chose this icon for you; PrimeReact 11 made the icon a part you compose, which is right\n * for an application - it can use its own icon set - and wrong for a Scene element, which has no way to\n * name one. The mapping is restored here so a notice still reads at a glance rather than as an\n * undifferentiated colored box.\n */\nconst severityIcons: Record<string, string> = {\n    success: 'pi pi-check-circle',\n    info: 'pi pi-info-circle',\n    warn: 'pi pi-exclamation-triangle',\n    error: 'pi pi-times-circle',\n};\n\n/**\n * The `PrimeReact:message` component - a block-level notice attached to a region of a screen.\n *\n * Rendered full width, which is what separates it from `inlineMessage`: the two share PrimeReact's\n * `Message` component but mean different things on a screen, and the width is the difference a reader\n * actually sees. PrimeReact 11 adds a second axis for the same distinction - `variant` - and this one is\n * the default, bordered variant, because a region-level notice is meant to be a block you notice.\n *\n * The v11 module is `primereact/message`, singular, which is the one that survived; the plural `messages`\n * module - a list of notices with its own imperative API - was removed outright, and this package never\n * declared a name for it.\n *\n * v10's `warning` is translated to v11's `warn` so screens written against the old vocabulary keep their\n * color; `error` was and still is spelled the same here, unlike everywhere else in PrimeReact where the\n * danger severity is called `danger`.\n */\nexport function PrimeMessage({ element }: RegisteredComponentProps) {\n    const severity = severityProperty(element, 'severity', 'info');\n    return (\n        <Message.Root data-scene-id={element.id} className='w-full' severity={severity as 'success' | 'info' | 'warn' | 'error'}>\n            <Message.Icon>\n                <i className={severityIcons[severity] ?? severityIcons.info} aria-hidden='true' />\n            </Message.Icon>\n            <Message.Content>\n                <Message.Text>{stringProperty(element, 'text', '')}</Message.Text>\n            </Message.Content>\n        </Message.Root>\n    );\n}\n"],"names":["severityIcons","success","info","warn","error","PrimeMessage","element","severity","severityProperty","_jsxs","Message","Root","data-scene-id","id","className","_jsx","Icon","i","aria-hidden","Content","Text","stringProperty"],"mappings":";;;;;;AAOA;;;;;;;AAOC,IACD,MAAMA,aAAAA,GAAwC;IAC1CC,OAAAA,EAAS,oBAAA;IACTC,IAAAA,EAAM,mBAAA;IACNC,IAAAA,EAAM,4BAAA;IACNC,KAAAA,EAAO;AACX,CAAA;AAEA;;;;;;;;;;;;;;;AAeC,IACM,SAASC,YAAAA,CAAa,EAAEC,OAAO,EAA4B,EAAA;IAC9D,MAAMC,QAAAA,GAAWC,2BAAAA,CAAiBF,OAAAA,EAAS,UAAA,EAAY,MAAA,CAAA;IACvD,qBACIG,eAAA,CAACC,gBAAQC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;QAAEC,SAAAA,EAAU,QAAA;QAASP,QAAAA,EAAUA,QAAAA;;AAClE,0BAAAQ,cAAA,CAACL,gBAAQM,IAAI,EAAA;AACT,gBAAA,QAAA,gBAAAD,cAAA,CAACE,GAAAA,EAAAA;AAAEH,oBAAAA,SAAAA,EAAWd,aAAa,CAACO,QAAAA,CAAS,IAAIP,cAAcE,IAAI;oBAAEgB,aAAAA,EAAY;;;AAE7E,0BAAAH,cAAA,CAACL,gBAAQS,OAAO,EAAA;wCACZJ,cAAA,CAACL,gBAAQU,IAAI,EAAA;AAAEC,oBAAAA,QAAAA,EAAAA,yBAAAA,CAAef,SAAS,MAAA,EAAQ,EAAA;;;;;AAI/D;;;;"}

package/dist/cjs/messages/PrimeToast.js

@@ -3,38 +3,122 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var toast = require('primereact/toast');
+var toaster = require('primereact/toaster');
 var properties = require('../properties.js');
 
+/**
+ * Renders whatever notifications are currently queued for the surrounding toaster.
+ *
+ * PrimeReact 11 splits a toast in two: a `Toaster` owns the queue, the position and the timers, and the
+ * caller decides what one notification looks like. Nothing renders until someone maps the queue, which is
+ * what this does - it has to be its own component because reading the queue means reading the toaster's
+ * context, and that context is only available below the `Toaster.Root` that provides it.
+ *
+ * The severity icons are chosen here rather than left out because `Toast.Icon` renders only when its
+ * `match` equals the toast's severity, so the four are alternatives, not four icons at once.
+ */ function ToastList() {
+    const toaster$1 = toaster.useToasterContext();
+    if (toaster$1 === undefined) return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: toaster$1.toasts.map((item)=>/*#__PURE__*/ jsxRuntime.jsxs(toast.Toast.Root, {
+                toast: item,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(toast.Toast.Icon, {
+                        match: "success",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-check-circle",
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(toast.Toast.Icon, {
+                        match: "info",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-info-circle",
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(toast.Toast.Icon, {
+                        match: "warn",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-exclamation-triangle",
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(toast.Toast.Icon, {
+                        match: "error",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-times-circle",
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(toast.Toast.Content, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(toast.Toast.Title, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(toast.Toast.Description, {})
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(toast.Toast.Close, {
+                        "aria-label": "Dismiss",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-times",
+                            "aria-hidden": "true"
+                        })
+                    })
+                ]
+            }, item.id))
+    });
+}
 /**
  * The `PrimeReact:toast` component - a transient notification in a corner of the screen.
  *
- * Toast is purely imperative: it renders nothing until someone calls `show`. A Scene element cannot make
- * that call, so the adapter makes it once on mount from the element's own properties. The element
+ * A toast is purely imperative: nothing renders until someone announces something. A Scene element cannot
+ * make that call, so the adapter makes it once on mount from the element's own properties. The element
  * therefore reads as "this screen announces this" rather than as a component that happens to render
  * nothing, which is what a literal wrapper would produce.
+ *
+ * PrimeReact 11 replaced v10's per-component ref and `show()` with a module-level queue and a free
+ * `toast()` function - a better arrangement for an application, since anything can announce without
+ * holding a ref, but a shared one. The element's own id is used as the toast's group so this toaster shows
+ * only what this element announced, and the announcement is withdrawn on unmount; without both, several
+ * `toast` elements on one screen would each show all of each other's notifications and leave them behind.
+ *
+ * `data-scene-id` sits on a wrapper rather than on the toaster, because the toaster renders through a
+ * portal to the end of the document: the identifying attribute would leave the position in the tree where
+ * the element was actually authored, which is where a design-time tool looks for it.
  */ function PrimeToast({ element }) {
-    const toast$1 = react.useRef(null);
-    const severity = properties.stringProperty(element, 'severity', 'info');
+    const severity = properties.severityProperty(element, 'severity', 'info');
     const summary = properties.stringProperty(element, 'summary', '');
     const detail = properties.stringProperty(element, 'detail', '');
     const life = properties.numberProperty(element, 'life', 3000);
+    const group = element.id;
     react.useEffect(()=>{
-        toast$1.current?.show({
-            severity,
-            summary,
-            detail,
-            life
+        const id = toaster.toast({
+            group,
+            severity: severity,
+            title: summary,
+            description: detail,
+            duration: life
         });
+        return ()=>toaster.toast.dismiss(id);
     }, [
+        group,
         severity,
         summary,
         detail,
         life
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsx(toast.Toast, {
-        ref: toast$1,
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
         "data-scene-id": element.id,
-        position: properties.stringProperty(element, 'position', 'top-right')
+        children: /*#__PURE__*/ jsxRuntime.jsx(toaster.Toaster.Root, {
+            group: group,
+            timeout: life,
+            position: properties.stringProperty(element, 'position', 'top-right'),
+            children: /*#__PURE__*/ jsxRuntime.jsx(toaster.Toaster.Portal, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(toaster.Toaster.Region, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(ToastList, {})
+                })
+            })
+        })
     });
 }
 

package/dist/cjs/messages/PrimeToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeToast.js","sources":["../../../messages/PrimeToast.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 { useEffect, useRef } from 'react';\nimport { Toast } from 'primereact/toast';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:toast` component - a transient notification in a corner of the screen.\n *\n * Toast is purely imperative: it renders nothing until someone calls `show`. A Scene element cannot make\n * that call, so the adapter makes it once on mount from the element's own properties. The element\n * therefore reads as \"this screen announces this\" rather than as a component that happens to render\n * nothing, which is what a literal wrapper would produce.\n */\nexport function PrimeToast({ element }: RegisteredComponentProps) {\n    const toast = useRef<Toast>(null);\n    const severity = stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error';\n    const summary = stringProperty(element, 'summary', '');\n    const detail = stringProperty(element, 'detail', '');\n    const life = numberProperty(element, 'life', 3000);\n\n    useEffect(() => {\n        toast.current?.show({ severity, summary, detail, life });\n    }, [severity, summary, detail, life]);\n\n    return <Toast ref={toast} data-scene-id={element.id} position={stringProperty(element, 'position', 'top-right') as 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' | 'center'} />;\n}\n"],"names":["PrimeToast","element","toast","useRef","severity","stringProperty","summary","detail","life","numberProperty","useEffect","current","show","_jsx","Toast","ref","data-scene-id","id","position"],"mappings":";;;;;;;AAQA;;;;;;;AAOC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAA4B,EAAA;AAC5D,IAAA,MAAMC,UAAQC,YAAAA,CAAc,IAAA,CAAA;IAC5B,MAAMC,QAAAA,GAAWC,yBAAAA,CAAeJ,OAAAA,EAAS,UAAA,EAAY,MAAA,CAAA;IACrD,MAAMK,OAAAA,GAAUD,yBAAAA,CAAeJ,OAAAA,EAAS,SAAA,EAAW,EAAA,CAAA;IACnD,MAAMM,MAAAA,GAASF,yBAAAA,CAAeJ,OAAAA,EAAS,QAAA,EAAU,EAAA,CAAA;IACjD,MAAMO,IAAAA,GAAOC,yBAAAA,CAAeR,OAAAA,EAAS,MAAA,EAAQ,IAAA,CAAA;IAE7CS,eAAAA,CAAU,IAAA;QACNR,OAAAA,CAAMS,OAAO,EAAEC,IAAAA,CAAK;AAAER,YAAAA,QAAAA;AAAUE,YAAAA,OAAAA;AAASC,YAAAA,MAAAA;AAAQC,YAAAA;AAAK,SAAA,CAAA;IAC1D,CAAA,EAAG;AAACJ,QAAAA,QAAAA;AAAUE,QAAAA,OAAAA;AAASC,QAAAA,MAAAA;AAAQC,QAAAA;AAAK,KAAA,CAAA;AAEpC,IAAA,qBAAOK,cAAA,CAACC,WAAAA,EAAAA;QAAMC,GAAAA,EAAKb,OAAAA;AAAOc,QAAAA,eAAAA,EAAef,QAAQgB,EAAE;QAAEC,QAAAA,EAAUb,yBAAAA,CAAeJ,SAAS,UAAA,EAAY,WAAA;;AACvG;;;;"}
+{"version":3,"file":"PrimeToast.js","sources":["../../../messages/PrimeToast.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 { useEffect } from 'react';\nimport { Toast } from 'primereact/toast';\nimport { Toaster, toast, useToasterContext } from 'primereact/toaster';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport {numberProperty, severityProperty, stringProperty} from '../properties';\n\n/**\n * Renders whatever notifications are currently queued for the surrounding toaster.\n *\n * PrimeReact 11 splits a toast in two: a `Toaster` owns the queue, the position and the timers, and the\n * caller decides what one notification looks like. Nothing renders until someone maps the queue, which is\n * what this does - it has to be its own component because reading the queue means reading the toaster's\n * context, and that context is only available below the `Toaster.Root` that provides it.\n *\n * The severity icons are chosen here rather than left out because `Toast.Icon` renders only when its\n * `match` equals the toast's severity, so the four are alternatives, not four icons at once.\n */\nfunction ToastList() {\n    const toaster = useToasterContext();\n    if (toaster === undefined) return null;\n\n    return (\n        <>\n            {toaster.toasts.map((item) => (\n                <Toast.Root key={item.id} toast={item}>\n                    <Toast.Icon match='success'>\n                        <i className='pi pi-check-circle' aria-hidden='true' />\n                    </Toast.Icon>\n                    <Toast.Icon match='info'>\n                        <i className='pi pi-info-circle' aria-hidden='true' />\n                    </Toast.Icon>\n                    <Toast.Icon match='warn'>\n                        <i className='pi pi-exclamation-triangle' aria-hidden='true' />\n                    </Toast.Icon>\n                    <Toast.Icon match='error'>\n                        <i className='pi pi-times-circle' aria-hidden='true' />\n                    </Toast.Icon>\n                    <Toast.Content>\n                        <Toast.Title />\n                        <Toast.Description />\n                    </Toast.Content>\n                    <Toast.Close aria-label='Dismiss'>\n                        <i className='pi pi-times' aria-hidden='true' />\n                    </Toast.Close>\n                </Toast.Root>\n            ))}\n        </>\n    );\n}\n\n/**\n * The `PrimeReact:toast` component - a transient notification in a corner of the screen.\n *\n * A toast is purely imperative: nothing renders until someone announces something. A Scene element cannot\n * make that call, so the adapter makes it once on mount from the element's own properties. The element\n * therefore reads as \"this screen announces this\" rather than as a component that happens to render\n * nothing, which is what a literal wrapper would produce.\n *\n * PrimeReact 11 replaced v10's per-component ref and `show()` with a module-level queue and a free\n * `toast()` function - a better arrangement for an application, since anything can announce without\n * holding a ref, but a shared one. The element's own id is used as the toast's group so this toaster shows\n * only what this element announced, and the announcement is withdrawn on unmount; without both, several\n * `toast` elements on one screen would each show all of each other's notifications and leave them behind.\n *\n * `data-scene-id` sits on a wrapper rather than on the toaster, because the toaster renders through a\n * portal to the end of the document: the identifying attribute would leave the position in the tree where\n * the element was actually authored, which is where a design-time tool looks for it.\n */\nexport function PrimeToast({ element }: RegisteredComponentProps) {\n    const severity = severityProperty(element, 'severity', 'info');\n    const summary = stringProperty(element, 'summary', '');\n    const detail = stringProperty(element, 'detail', '');\n    const life = numberProperty(element, 'life', 3000);\n    const group = element.id;\n\n    useEffect(() => {\n        const id = toast({\n            group,\n            severity: severity as 'success' | 'info' | 'warn' | 'error',\n            title: summary,\n            description: detail,\n            duration: life,\n        });\n        return () => toast.dismiss(id);\n    }, [group, severity, summary, detail, life]);\n\n    return (\n        <div data-scene-id={element.id}>\n            <Toaster.Root\n                group={group}\n                timeout={life}\n                position={stringProperty(element, 'position', 'top-right') as 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' | 'center'}>\n                <Toaster.Portal>\n                    <Toaster.Region>\n                        <ToastList />\n                    </Toaster.Region>\n                </Toaster.Portal>\n            </Toaster.Root>\n        </div>\n    );\n}\n"],"names":["ToastList","toaster","useToasterContext","undefined","_jsx","_Fragment","toasts","map","item","_jsxs","Toast","Root","toast","Icon","match","i","className","aria-hidden","Content","Title","Description","Close","aria-label","id","PrimeToast","element","severity","severityProperty","summary","stringProperty","detail","life","numberProperty","group","useEffect","title","description","duration","dismiss","div","data-scene-id","Toaster","timeout","position","Portal","Region"],"mappings":"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"}

package/dist/cjs/misc/BlockUI.js

@@ -0,0 +1,47 @@
+'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.
+/**
+ * A region that greys itself out and stops accepting input while something is in flight.
+ *
+ * Cratis owns this component. PrimeReact 10 had `BlockUI`; PrimeReact 11 removed it with no replacement
+ * and no headless hook, and the `blockUI` name is one this package's manifest already publishes - screens
+ * are written against it. Rebuilding it here is what keeps that promise, and it turns out to be a small
+ * thing to own: the whole component is a positioned wrapper, an `inert` subtree and a translucent mask.
+ *
+ * Blocking is expressed twice on purpose, because the two audiences need different things. `aria-busy`
+ * tells assistive technology that the region's content is being updated and should not be announced as
+ * final. `inert` on the wrapped subtree takes it out of the tab order and stops it responding to clicks -
+ * without that, a mask is only a visual suggestion and a keyboard user tabs straight through it into
+ * controls the screen believes are unavailable.
+ *
+ * What it deliberately does not carry over from v10: the `template` and `containerTemplate` props (a
+ * screen that wants a spinner or a message over the mask composes one into the blocked content itself),
+ * the enter/leave transitions, `baseZIndex` / `autoZIndex` layering (the mask uses one fixed stacking
+ * level and does not negotiate with dialogs), and the `onBlock` / `onUnblock` callbacks - a Scene element
+ * has nowhere to route a callback to, and the blocked state is authored rather than discovered.
+ */ function BlockUI({ blocked = false, fullScreen = false, className, children, ...rest }) {
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        ...rest,
+        className: [
+            'relative',
+            className
+        ].filter(Boolean).join(' '),
+        "aria-busy": blocked,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                inert: blocked,
+                children: children
+            }),
+            blocked && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: fullScreen ? 'fixed inset-0 z-50 bg-black/40' : 'absolute inset-0 z-10 bg-black/40'
+            })
+        ]
+    });
+}
+
+exports.BlockUI = BlockUI;
+//# sourceMappingURL=BlockUI.js.map

package/dist/cjs/misc/BlockUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockUI.js","sources":["../../../misc/BlockUI.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 { HTMLAttributes } from 'react';\n\n/**\n * Configuration for {@link BlockUI}.\n */\nexport interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Whether the region is currently blocked. While this is `false` the component adds nothing but a\n     * positioned wrapper, so it is safe to leave mounted around content that is only occasionally busy.\n     */\n    blocked?: boolean;\n\n    /**\n     * Whether the mask covers the whole viewport rather than only the wrapped content. A long-running\n     * action that would leave the rest of the screen misleadingly usable wants the page; a panel\n     * refreshing its own data does not.\n     */\n    fullScreen?: boolean;\n}\n\n/**\n * A region that greys itself out and stops accepting input while something is in flight.\n *\n * Cratis owns this component. PrimeReact 10 had `BlockUI`; PrimeReact 11 removed it with no replacement\n * and no headless hook, and the `blockUI` name is one this package's manifest already publishes - screens\n * are written against it. Rebuilding it here is what keeps that promise, and it turns out to be a small\n * thing to own: the whole component is a positioned wrapper, an `inert` subtree and a translucent mask.\n *\n * Blocking is expressed twice on purpose, because the two audiences need different things. `aria-busy`\n * tells assistive technology that the region's content is being updated and should not be announced as\n * final. `inert` on the wrapped subtree takes it out of the tab order and stops it responding to clicks -\n * without that, a mask is only a visual suggestion and a keyboard user tabs straight through it into\n * controls the screen believes are unavailable.\n *\n * What it deliberately does not carry over from v10: the `template` and `containerTemplate` props (a\n * screen that wants a spinner or a message over the mask composes one into the blocked content itself),\n * the enter/leave transitions, `baseZIndex` / `autoZIndex` layering (the mask uses one fixed stacking\n * level and does not negotiate with dialogs), and the `onBlock` / `onUnblock` callbacks - a Scene element\n * has nowhere to route a callback to, and the blocked state is authored rather than discovered.\n */\nexport function BlockUI({ blocked = false, fullScreen = false, className, children, ...rest }: BlockUIProps) {\n    return (\n        <div {...rest} className={['relative', className].filter(Boolean).join(' ')} aria-busy={blocked}>\n            <div inert={blocked}>{children}</div>\n            {blocked && <div className={fullScreen ? 'fixed inset-0 z-50 bg-black/40' : 'absolute inset-0 z-10 bg-black/40'} />}\n        </div>\n    );\n}\n"],"names":["BlockUI","blocked","fullScreen","className","children","rest","_jsxs","div","filter","Boolean","join","aria-busy","_jsx","inert"],"mappings":";;;;AAAA;AACA;AAsBA;;;;;;;;;;;;;;;;;;;AAmBC,IACM,SAASA,OAAAA,CAAQ,EAAEC,UAAU,KAAK,EAAEC,UAAAA,GAAa,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,EAAoB,EAAA;AACvG,IAAA,qBACIC,eAAA,CAACC,KAAAA,EAAAA;AAAK,QAAA,GAAGF,IAAI;QAAEF,SAAAA,EAAW;AAAC,YAAA,UAAA;AAAYA,YAAAA;AAAU,SAAA,CAACK,MAAM,CAACC,OAAAA,CAAAA,CAASC,IAAI,CAAC,GAAA,CAAA;QAAMC,WAAAA,EAAWV,OAAAA;;0BACpFW,cAAA,CAACL,KAAAA,EAAAA;gBAAIM,KAAAA,EAAOZ,OAAAA;AAAUG,gBAAAA,QAAAA,EAAAA;;AACrBH,YAAAA,OAAAA,kBAAWW,cAAA,CAACL,KAAAA,EAAAA;AAAIJ,gBAAAA,SAAAA,EAAWD,aAAa,gCAAA,GAAmC;;;;AAGxF;;;;"}

package/dist/cjs/misc/PrimeAvatar.js

@@ -6,14 +6,35 @@ var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:avatar` component - a person or entity shown as initials, an icon or a picture.
+ *
+ * PrimeReact 11 turned Avatar into a composition, and the split is the interesting part: `Avatar.Image`
+ * renders only once the browser has actually loaded the source, and `Avatar.Fallback` renders only while
+ * it has not. That is exactly the behavior a screen wants and could not previously express - a picture
+ * that 404s now degrades to the initials instead of leaving a broken image icon in a list of faces.
+ *
+ * The image part is left out entirely when no `image` was authored, rather than mounted with an empty
+ * source: it would spend an effect on a load that can never happen, and the fallback is what shows either
+ * way.
  */ function PrimeAvatar({ element }) {
-    return /*#__PURE__*/ jsxRuntime.jsx(avatar.Avatar, {
+    const label = properties.stringProperty(element, 'label');
+    const icon = properties.stringProperty(element, 'icon');
+    const image = properties.stringProperty(element, 'image');
+    return /*#__PURE__*/ jsxRuntime.jsxs(avatar.Avatar.Root, {
         "data-scene-id": element.id,
-        label: properties.stringProperty(element, 'label'),
-        icon: properties.stringProperty(element, 'icon'),
-        image: properties.stringProperty(element, 'image'),
         size: properties.stringProperty(element, 'size', 'normal'),
-        shape: properties.stringProperty(element, 'shape', 'square')
+        shape: properties.stringProperty(element, 'shape', 'square'),
+        children: [
+            image !== undefined && /*#__PURE__*/ jsxRuntime.jsx(avatar.Avatar.Image, {
+                src: image,
+                alt: label ?? ''
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(avatar.Avatar.Fallback, {
+                children: icon !== undefined ? /*#__PURE__*/ jsxRuntime.jsx("i", {
+                    className: icon,
+                    "aria-hidden": "true"
+                }) : label
+            })
+        ]
     });
 }
 

package/dist/cjs/misc/PrimeAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeAvatar.js","sources":["../../../misc/PrimeAvatar.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 { Avatar } from 'primereact/avatar';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:avatar` component - a person or entity shown as initials, an icon or a picture.\n */\nexport function PrimeAvatar({ element }: RegisteredComponentProps) {\n    return (\n        <Avatar\n            data-scene-id={element.id}\n            label={stringProperty(element, 'label')}\n            icon={stringProperty(element, 'icon')}\n            image={stringProperty(element, 'image')}\n            size={stringProperty(element, 'size', 'normal') as 'normal' | 'large' | 'xlarge'}\n            shape={stringProperty(element, 'shape', 'square') as 'square' | 'circle'}\n        />\n    );\n}\n"],"names":["PrimeAvatar","element","_jsx","Avatar","data-scene-id","id","label","stringProperty","icon","image","size","shape"],"mappings":";;;;;;AAOA;;AAEC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAA4B,EAAA;AAC7D,IAAA,qBACIC,cAAA,CAACC,aAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;AACzBC,QAAAA,KAAAA,EAAOC,0BAAeN,OAAAA,EAAS,OAAA,CAAA;AAC/BO,QAAAA,IAAAA,EAAMD,0BAAeN,OAAAA,EAAS,MAAA,CAAA;AAC9BQ,QAAAA,KAAAA,EAAOF,0BAAeN,OAAAA,EAAS,OAAA,CAAA;QAC/BS,IAAAA,EAAMH,yBAAAA,CAAeN,SAAS,MAAA,EAAQ,QAAA,CAAA;QACtCU,KAAAA,EAAOJ,yBAAAA,CAAeN,SAAS,OAAA,EAAS,QAAA;;AAGpD;;;;"}
+{"version":3,"file":"PrimeAvatar.js","sources":["../../../misc/PrimeAvatar.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 { Avatar } from 'primereact/avatar';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:avatar` component - a person or entity shown as initials, an icon or a picture.\n *\n * PrimeReact 11 turned Avatar into a composition, and the split is the interesting part: `Avatar.Image`\n * renders only once the browser has actually loaded the source, and `Avatar.Fallback` renders only while\n * it has not. That is exactly the behavior a screen wants and could not previously express - a picture\n * that 404s now degrades to the initials instead of leaving a broken image icon in a list of faces.\n *\n * The image part is left out entirely when no `image` was authored, rather than mounted with an empty\n * source: it would spend an effect on a load that can never happen, and the fallback is what shows either\n * way.\n */\nexport function PrimeAvatar({ element }: RegisteredComponentProps) {\n    const label = stringProperty(element, 'label');\n    const icon = stringProperty(element, 'icon');\n    const image = stringProperty(element, 'image');\n    return (\n        <Avatar.Root\n            data-scene-id={element.id}\n            size={stringProperty(element, 'size', 'normal') as 'normal' | 'large' | 'xlarge'}\n            shape={stringProperty(element, 'shape', 'square') as 'square' | 'circle'}>\n            {image !== undefined && <Avatar.Image src={image} alt={label ?? ''} />}\n            <Avatar.Fallback>{icon !== undefined ? <i className={icon} aria-hidden='true' /> : label}</Avatar.Fallback>\n        </Avatar.Root>\n    );\n}\n"],"names":["PrimeAvatar","element","label","stringProperty","icon","image","_jsxs","Avatar","Root","data-scene-id","id","size","shape","undefined","_jsx","Image","src","alt","Fallback","i","className","aria-hidden"],"mappings":";;;;;;AAOA;;;;;;;;;;;AAWC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAA4B,EAAA;IAC7D,MAAMC,KAAAA,GAAQC,0BAAeF,OAAAA,EAAS,OAAA,CAAA;IACtC,MAAMG,IAAAA,GAAOD,0BAAeF,OAAAA,EAAS,MAAA,CAAA;IACrC,MAAMI,KAAAA,GAAQF,0BAAeF,OAAAA,EAAS,OAAA,CAAA;IACtC,qBACIK,eAAA,CAACC,cAAOC,IAAI,EAAA;AACRC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;QACzBC,IAAAA,EAAMR,yBAAAA,CAAeF,SAAS,MAAA,EAAQ,QAAA,CAAA;QACtCW,KAAAA,EAAOT,yBAAAA,CAAeF,SAAS,OAAA,EAAS,QAAA,CAAA;;YACvCI,KAAAA,KAAUQ,SAAAA,kBAAaC,cAAA,CAACP,aAAAA,CAAOQ,KAAK,EAAA;gBAACC,GAAAA,EAAKX,KAAAA;AAAOY,gBAAAA,GAAAA,EAAKf,KAAAA,IAAS;;AAChE,0BAAAY,cAAA,CAACP,cAAOW,QAAQ,EAAA;AAAEd,gBAAAA,QAAAA,EAAAA,IAAAA,KAASS,0BAAYC,cAAA,CAACK,GAAAA,EAAAA;oBAAEC,SAAAA,EAAWhB,IAAAA;oBAAMiB,aAAAA,EAAY;AAAYnB,iBAAAA,CAAAA,GAAAA;;;;AAG/F;;;;"}