@cratis/scene.primereact 1.1.0 → 2.0.0

package/dist/cjs/overlay/ConfirmDialog.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('primereact/button');
+var dialog = require('primereact/dialog');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * A Cratis-owned confirmation dialog - a question, an accepting answer and a rejecting one.
+ *
+ * This component is owned by Cratis because PrimeReact 11 removed `primereact/confirmdialog` outright.
+ * There is no renamed successor to adapt to: what v11 ships instead is the compositional `Dialog` this is
+ * built from, on the reasoning that a confirmation is a dialog with a known footer rather than a distinct
+ * component. That is a fair reading, but it would otherwise push the same header/message/two-buttons
+ * assembly into every caller, so this package assembles it once here and keeps the shape v10 callers
+ * already expect.
+ *
+ * Two v10 capabilities are deliberately **not** carried over:
+ *
+ * - **The imperative `confirmDialog()` service API.** v10 let any code open a confirmation by calling a
+ *   module-level function that reached a singleton mounted elsewhere. That needs a caller and a global
+ *   mount point; this component is rendered and controlled by whoever owns the answer, which is the only
+ *   form a Scene element - configuration, not a caller - can use anyway.
+ * - **`appendTo`.** v10 needed it to escape stacking contexts. v11 renders through `Dialog.Portal` under
+ *   an overlay manager that handles layering, so the prop existed only to work around a problem that is
+ *   now gone.
+ *
+ * @param props - {@link ConfirmDialogProps}.
+ */ function ConfirmDialog({ visible, message, header, icon, acceptLabel, rejectLabel, onAccept, onReject, onHide }) {
+    const accept = ()=>{
+        onAccept?.();
+        onHide?.();
+    };
+    const reject = ()=>{
+        onReject?.();
+        onHide?.();
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Root, {
+        open: visible,
+        modal: true,
+        dismissable: true,
+        closeOnEscape: true,
+        onOpenChange: (event)=>{
+            if (!event.value) onHide?.();
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsxs(dialog.Dialog.Portal, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Backdrop, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Positioner, {
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(dialog.Dialog.Popup, {
+                        style: {
+                            width: '30rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(dialog.Dialog.Header, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Title, {
+                                        children: header
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Close, {
+                                        "aria-label": "Close",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                            className: "pi pi-times"
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Content, {
+                                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "flex items-center gap-3",
+                                    children: [
+                                        icon !== undefined && /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                            className: icon
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                            children: message
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Footer, {
+                                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "flex justify-end gap-2",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+                                            variant: "outlined",
+                                            onClick: reject,
+                                            children: rejectLabel
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+                                            onClick: accept,
+                                            children: acceptLabel
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+
+exports.ConfirmDialog = ConfirmDialog;
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/cjs/overlay/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sources":["../../../overlay/ConfirmDialog.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 { ReactNode } from 'react';\nimport { Button } from 'primereact/button';\nimport { Dialog } from 'primereact/dialog';\n\n/**\n * Configuration for {@link ConfirmDialog}.\n */\nexport interface ConfirmDialogProps {\n    /**\n     * Whether the dialog is showing. The dialog is a controlled overlay - it never hides itself - so the\n     * owner keeps this in state and lowers it from {@link ConfirmDialogProps.onHide}.\n     */\n    visible: boolean;\n\n    /**\n     * The question being asked. Typed as a node rather than a string so a caller can pose a question that\n     * needs emphasis or a name in it, which is exactly the kind of question worth confirming.\n     */\n    message?: ReactNode;\n\n    /**\n     * The dialog's title.\n     */\n    header?: string;\n\n    /**\n     * A PrimeIcons class shown beside the message. Omitted entirely when absent rather than defaulted,\n     * because the icon on a confirmation carries tone - a warning triangle on a harmless question is\n     * misleading - and only the caller knows which is right.\n     */\n    icon?: string;\n\n    /**\n     * Label for the accepting button.\n     */\n    acceptLabel?: string;\n\n    /**\n     * Label for the rejecting button.\n     */\n    rejectLabel?: string;\n\n    /**\n     * Called when the user accepts. Always followed by {@link ConfirmDialogProps.onHide}.\n     */\n    onAccept?: () => void;\n\n    /**\n     * Called when the user rejects. Always followed by {@link ConfirmDialogProps.onHide}.\n     */\n    onReject?: () => void;\n\n    /**\n     * Called whenever the dialog should close - after either answer, and on every dismissal gesture\n     * (the close button, `Escape`, a click on the backdrop). Answering and closing are reported\n     * separately so a caller can lower `visible` in one place instead of in three.\n     */\n    onHide?: () => void;\n}\n\n/**\n * A Cratis-owned confirmation dialog - a question, an accepting answer and a rejecting one.\n *\n * This component is owned by Cratis because PrimeReact 11 removed `primereact/confirmdialog` outright.\n * There is no renamed successor to adapt to: what v11 ships instead is the compositional `Dialog` this is\n * built from, on the reasoning that a confirmation is a dialog with a known footer rather than a distinct\n * component. That is a fair reading, but it would otherwise push the same header/message/two-buttons\n * assembly into every caller, so this package assembles it once here and keeps the shape v10 callers\n * already expect.\n *\n * Two v10 capabilities are deliberately **not** carried over:\n *\n * - **The imperative `confirmDialog()` service API.** v10 let any code open a confirmation by calling a\n *   module-level function that reached a singleton mounted elsewhere. That needs a caller and a global\n *   mount point; this component is rendered and controlled by whoever owns the answer, which is the only\n *   form a Scene element - configuration, not a caller - can use anyway.\n * - **`appendTo`.** v10 needed it to escape stacking contexts. v11 renders through `Dialog.Portal` under\n *   an overlay manager that handles layering, so the prop existed only to work around a problem that is\n *   now gone.\n *\n * @param props - {@link ConfirmDialogProps}.\n */\nexport function ConfirmDialog({ visible, message, header, icon, acceptLabel, rejectLabel, onAccept, onReject, onHide }: ConfirmDialogProps) {\n    const accept = () => {\n        onAccept?.();\n        onHide?.();\n    };\n\n    const reject = () => {\n        onReject?.();\n        onHide?.();\n    };\n\n    return (\n        <Dialog.Root\n            open={visible}\n            modal\n            dismissable\n            closeOnEscape\n            onOpenChange={(event) => {\n                if (!event.value) onHide?.();\n            }}>\n            <Dialog.Portal>\n                <Dialog.Backdrop />\n                <Dialog.Positioner>\n                    <Dialog.Popup style={{ width: '30rem' }}>\n                        <Dialog.Header>\n                            <Dialog.Title>{header}</Dialog.Title>\n                            <Dialog.Close aria-label='Close'>\n                                <i className='pi pi-times' />\n                            </Dialog.Close>\n                        </Dialog.Header>\n                        <Dialog.Content>\n                            <div className='flex items-center gap-3'>\n                                {icon !== undefined && <i className={icon} />}\n                                <span>{message}</span>\n                            </div>\n                        </Dialog.Content>\n                        <Dialog.Footer>\n                            <div className='flex justify-end gap-2'>\n                                <Button variant='outlined' onClick={reject}>\n                                    {rejectLabel}\n                                </Button>\n                                <Button onClick={accept}>{acceptLabel}</Button>\n                            </div>\n                        </Dialog.Footer>\n                    </Dialog.Popup>\n                </Dialog.Positioner>\n            </Dialog.Portal>\n        </Dialog.Root>\n    );\n}\n"],"names":["ConfirmDialog","visible","message","header","icon","acceptLabel","rejectLabel","onAccept","onReject","onHide","accept","reject","_jsx","Dialog","Root","open","modal","dismissable","closeOnEscape","onOpenChange","event","value","_jsxs","Portal","Backdrop","Positioner","Popup","style","width","Header","Title","Close","aria-label","i","className","Content","div","undefined","span","Footer","Button","variant","onClick"],"mappings":";;;;;;AAAA;AACA;AA8DA;;;;;;;;;;;;;;;;;;;;;IAsBO,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAAEC,OAAO,EAAEC,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAsB,EAAA;AACtI,IAAA,MAAMC,MAAAA,GAAS,IAAA;AACXH,QAAAA,QAAAA,IAAAA;AACAE,QAAAA,MAAAA,IAAAA;AACJ,IAAA,CAAA;AAEA,IAAA,MAAME,MAAAA,GAAS,IAAA;AACXH,QAAAA,QAAAA,IAAAA;AACAC,QAAAA,MAAAA,IAAAA;AACJ,IAAA,CAAA;IAEA,qBACIG,cAAA,CAACC,cAAOC,IAAI,EAAA;QACRC,IAAAA,EAAMd,OAAAA;QACNe,KAAK,EAAA,IAAA;QACLC,WAAW,EAAA,IAAA;QACXC,aAAa,EAAA,IAAA;AACbC,QAAAA,YAAAA,EAAc,CAACC,KAAAA,GAAAA;YACX,IAAI,CAACA,KAAAA,CAAMC,KAAK,EAAEZ,MAAAA,IAAAA;AACtB,QAAA,CAAA;gCACAa,eAAA,CAACT,cAAOU,MAAM,EAAA;;AACV,8BAAAX,cAAA,CAACC,cAAOW,QAAQ,EAAA,EAAA,CAAA;AAChB,8BAAAZ,cAAA,CAACC,cAAOY,UAAU,EAAA;4CACdH,eAAA,CAACT,cAAOa,KAAK,EAAA;wBAACC,KAAAA,EAAO;4BAAEC,KAAAA,EAAO;AAAQ,yBAAA;;AAClC,0CAAAN,eAAA,CAACT,cAAOgB,MAAM,EAAA;;AACV,kDAAAjB,cAAA,CAACC,cAAOiB,KAAK,EAAA;AAAE3B,wCAAAA,QAAAA,EAAAA;;AACf,kDAAAS,cAAA,CAACC,cAAOkB,KAAK,EAAA;wCAACC,YAAAA,EAAW,OAAA;AACrB,wCAAA,QAAA,gBAAApB,cAAA,CAACqB,GAAAA,EAAAA;4CAAEC,SAAAA,EAAU;;;;;AAGrB,0CAAAtB,cAAA,CAACC,cAAOsB,OAAO,EAAA;AACX,gCAAA,QAAA,gBAAAb,eAAA,CAACc,KAAAA,EAAAA;oCAAIF,SAAAA,EAAU,yBAAA;;AACV9B,wCAAAA,IAAAA,KAASiC,2BAAazB,cAAA,CAACqB,GAAAA,EAAAA;4CAAEC,SAAAA,EAAW9B;;sDACrCQ,cAAA,CAAC0B,MAAAA,EAAAA;AAAMpC,4CAAAA,QAAAA,EAAAA;;;;;AAGf,0CAAAU,cAAA,CAACC,cAAO0B,MAAM,EAAA;AACV,gCAAA,QAAA,gBAAAjB,eAAA,CAACc,KAAAA,EAAAA;oCAAIF,SAAAA,EAAU,wBAAA;;sDACXtB,cAAA,CAAC4B,aAAAA,EAAAA;4CAAOC,OAAAA,EAAQ,UAAA;4CAAWC,OAAAA,EAAS/B,MAAAA;AAC/BL,4CAAAA,QAAAA,EAAAA;;sDAELM,cAAA,CAAC4B,aAAAA,EAAAA;4CAAOE,OAAAA,EAAShC,MAAAA;AAASL,4CAAAA,QAAAA,EAAAA;;;;;;;;;;;AAQ1D;;;;"}

package/dist/cjs/overlay/PrimeConfirmDialog.js

@@ -3,28 +3,35 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var button = require('primereact/button');
-var confirmdialog = require('primereact/confirmdialog');
 var properties = require('../properties.js');
+var ConfirmDialog = require('./ConfirmDialog.js');
 
 /**
  * The `PrimeReact:confirmDialog` component - a yes/no question before a consequential action.
  *
- * Uses ConfirmDialog's declarative form rather than the imperative `confirmDialog()` call, because the
- * imperative one needs a caller and a Scene element is configuration, not a caller. Visibility is owned
- * locally for the reason described on {@link PrimeDialog}.
+ * Adapts {@link ConfirmDialog}, which this package owns because PrimeReact 11 removed
+ * `primereact/confirmdialog` and shipped no successor - see that component for what the replacement
+ * deliberately leaves behind. The adapter itself is unchanged in spirit from the v10 one: it was already
+ * using the declarative form rather than the imperative `confirmDialog()` call, because that call needs a
+ * caller and a Scene element is configuration, not a caller. That choice is what made this the one
+ * removal in the family that cost nothing at the adapter boundary.
  *
- * In PrimeReact 11 the sibling `ConfirmPopup` is removed; `ConfirmDialog` remains.
+ * Visibility is owned locally for the reason described on {@link PrimeDialog}.
+ *
+ * A Scene element has nowhere to send an answer - there is no handler to bind to - so accepting and
+ * rejecting differ only in closing the dialog. The two callbacks are still wired rather than omitted, so
+ * the seam is here the moment Scene grows a way to express an action.
  */ function PrimeConfirmDialog({ element }) {
     const [visible, setVisible] = react.useState(false);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         "data-scene-id": element.id,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
-                label: properties.stringProperty(element, 'triggerLabel', 'Confirm'),
                 severity: properties.stringProperty(element, 'severity', 'danger'),
-                onClick: ()=>setVisible(true)
+                onClick: ()=>setVisible(true),
+                children: properties.stringProperty(element, 'triggerLabel', 'Confirm')
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(confirmdialog.ConfirmDialog, {
+            /*#__PURE__*/ jsxRuntime.jsx(ConfirmDialog.ConfirmDialog, {
                 visible: visible,
                 onHide: ()=>setVisible(false),
                 header: properties.stringProperty(element, 'header', 'Are you sure?'),

package/dist/cjs/overlay/PrimeConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeConfirmDialog.js","sources":["../../../overlay/PrimeConfirmDialog.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 { useState } from 'react';\nimport { Button } from 'primereact/button';\nimport { ConfirmDialog } from 'primereact/confirmdialog';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:confirmDialog` component - a yes/no question before a consequential action.\n *\n * Uses ConfirmDialog's declarative form rather than the imperative `confirmDialog()` call, because the\n * imperative one needs a caller and a Scene element is configuration, not a caller. Visibility is owned\n * locally for the reason described on {@link PrimeDialog}.\n *\n * In PrimeReact 11 the sibling `ConfirmPopup` is removed; `ConfirmDialog` remains.\n */\nexport function PrimeConfirmDialog({ element }: RegisteredComponentProps) {\n    const [visible, setVisible] = useState(false);\n    return (\n        <div data-scene-id={element.id}>\n            <Button\n                label={stringProperty(element, 'triggerLabel', 'Confirm')}\n                severity={stringProperty(element, 'severity', 'danger') as 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help'}\n                onClick={() => setVisible(true)}\n            />\n            <ConfirmDialog\n                visible={visible}\n                onHide={() => setVisible(false)}\n                header={stringProperty(element, 'header', 'Are you sure?')}\n                message={stringProperty(element, 'message', 'This action cannot be undone.')}\n                icon={stringProperty(element, 'icon', 'pi pi-exclamation-triangle')}\n                acceptLabel={stringProperty(element, 'acceptLabel', 'Yes')}\n                rejectLabel={stringProperty(element, 'rejectLabel', 'No')}\n            />\n        </div>\n    );\n}\n"],"names":["PrimeConfirmDialog","element","visible","setVisible","useState","_jsxs","div","data-scene-id","id","_jsx","Button","label","stringProperty","severity","onClick","ConfirmDialog","onHide","header","message","icon","acceptLabel","rejectLabel"],"mappings":";;;;;;;;AASA;;;;;;;;AAQC,IACM,SAASA,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAAS,KAAA,CAAA;AACvC,IAAA,qBACIC,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;;0BAC1BC,cAAA,CAACC,aAAAA,EAAAA;gBACGC,KAAAA,EAAOC,yBAAAA,CAAeX,SAAS,cAAA,EAAgB,SAAA,CAAA;gBAC/CY,QAAAA,EAAUD,yBAAAA,CAAeX,SAAS,UAAA,EAAY,QAAA,CAAA;AAC9Ca,gBAAAA,OAAAA,EAAS,IAAMX,UAAAA,CAAW,IAAA;;0BAE9BM,cAAA,CAACM,2BAAAA,EAAAA;gBACGb,OAAAA,EAASA,OAAAA;AACTc,gBAAAA,MAAAA,EAAQ,IAAMb,UAAAA,CAAW,KAAA,CAAA;gBACzBc,MAAAA,EAAQL,yBAAAA,CAAeX,SAAS,QAAA,EAAU,eAAA,CAAA;gBAC1CiB,OAAAA,EAASN,yBAAAA,CAAeX,SAAS,SAAA,EAAW,+BAAA,CAAA;gBAC5CkB,IAAAA,EAAMP,yBAAAA,CAAeX,SAAS,MAAA,EAAQ,4BAAA,CAAA;gBACtCmB,WAAAA,EAAaR,yBAAAA,CAAeX,SAAS,aAAA,EAAe,KAAA,CAAA;gBACpDoB,WAAAA,EAAaT,yBAAAA,CAAeX,SAAS,aAAA,EAAe,IAAA;;;;AAIpE;;;;"}
+{"version":3,"file":"PrimeConfirmDialog.js","sources":["../../../overlay/PrimeConfirmDialog.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 { useState } from 'react';\nimport { Button } from 'primereact/button';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\nimport { ConfirmDialog } from './ConfirmDialog';\n\n/**\n * The `PrimeReact:confirmDialog` component - a yes/no question before a consequential action.\n *\n * Adapts {@link ConfirmDialog}, which this package owns because PrimeReact 11 removed\n * `primereact/confirmdialog` and shipped no successor - see that component for what the replacement\n * deliberately leaves behind. The adapter itself is unchanged in spirit from the v10 one: it was already\n * using the declarative form rather than the imperative `confirmDialog()` call, because that call needs a\n * caller and a Scene element is configuration, not a caller. That choice is what made this the one\n * removal in the family that cost nothing at the adapter boundary.\n *\n * Visibility is owned locally for the reason described on {@link PrimeDialog}.\n *\n * A Scene element has nowhere to send an answer - there is no handler to bind to - so accepting and\n * rejecting differ only in closing the dialog. The two callbacks are still wired rather than omitted, so\n * the seam is here the moment Scene grows a way to express an action.\n */\nexport function PrimeConfirmDialog({ element }: RegisteredComponentProps) {\n    const [visible, setVisible] = useState(false);\n    return (\n        <div data-scene-id={element.id}>\n            <Button severity={stringProperty(element, 'severity', 'danger')} onClick={() => setVisible(true)}>\n                {stringProperty(element, 'triggerLabel', 'Confirm')}\n            </Button>\n            <ConfirmDialog\n                visible={visible}\n                onHide={() => setVisible(false)}\n                header={stringProperty(element, 'header', 'Are you sure?')}\n                message={stringProperty(element, 'message', 'This action cannot be undone.')}\n                icon={stringProperty(element, 'icon', 'pi pi-exclamation-triangle')}\n                acceptLabel={stringProperty(element, 'acceptLabel', 'Yes')}\n                rejectLabel={stringProperty(element, 'rejectLabel', 'No')}\n            />\n        </div>\n    );\n}\n"],"names":["PrimeConfirmDialog","element","visible","setVisible","useState","_jsxs","div","data-scene-id","id","_jsx","Button","severity","stringProperty","onClick","ConfirmDialog","onHide","header","message","icon","acceptLabel","rejectLabel"],"mappings":";;;;;;;;AASA;;;;;;;;;;;;;;;AAeC,IACM,SAASA,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAAS,KAAA,CAAA;AACvC,IAAA,qBACIC,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;;0BAC1BC,cAAA,CAACC,aAAAA,EAAAA;gBAAOC,QAAAA,EAAUC,yBAAAA,CAAeX,SAAS,UAAA,EAAY,QAAA,CAAA;AAAWY,gBAAAA,OAAAA,EAAS,IAAMV,UAAAA,CAAW,IAAA,CAAA;AACtFS,gBAAAA,QAAAA,EAAAA,yBAAAA,CAAeX,SAAS,cAAA,EAAgB,SAAA;;0BAE7CQ,cAAA,CAACK,2BAAAA,EAAAA;gBACGZ,OAAAA,EAASA,OAAAA;AACTa,gBAAAA,MAAAA,EAAQ,IAAMZ,UAAAA,CAAW,KAAA,CAAA;gBACzBa,MAAAA,EAAQJ,yBAAAA,CAAeX,SAAS,QAAA,EAAU,eAAA,CAAA;gBAC1CgB,OAAAA,EAASL,yBAAAA,CAAeX,SAAS,SAAA,EAAW,+BAAA,CAAA;gBAC5CiB,IAAAA,EAAMN,yBAAAA,CAAeX,SAAS,MAAA,EAAQ,4BAAA,CAAA;gBACtCkB,WAAAA,EAAaP,yBAAAA,CAAeX,SAAS,aAAA,EAAe,KAAA,CAAA;gBACpDmB,WAAAA,EAAaR,yBAAAA,CAAeX,SAAS,aAAA,EAAe,IAAA;;;;AAIpE;;;;"}

package/dist/cjs/overlay/PrimeDialog.js

@@ -14,6 +14,18 @@ var properties = require('../properties.js');
  * property, and always renders a trigger button beside it. That keeps a dialog reachable again after it
  * is dismissed - without the trigger, closing a previewed dialog would leave a permanently blank spot on
  * the screen with no way back.
+ *
+ * PrimeReact 11 made `Dialog` compositional, which turns that local visibility into a two-way
+ * arrangement: `open` pushes the state down, and every dismissal gesture - the close button, `Escape`, a
+ * click on the backdrop - comes back as `onOpenChange`. Both have to be wired, because a v11 dialog never
+ * hides itself; ignoring the callback would leave a dialog that opens once and can never be closed.
+ *
+ * The parts are assembled here rather than by the component: `Dialog.Portal` and `Dialog.Backdrop` are
+ * what make it modal, and `Dialog.Close` is the only reason the header gets an X.
+ *
+ * **Not available in v11:** the headless dialog has no resize handle, so a dialog cannot be made
+ * user-resizable. No Scene property is lost to this - this adapter never exposed one - but `draggable`,
+ * which v11 does still support, is the only direct-manipulation affordance left.
  */ function PrimeDialog({ element, slots }) {
     const [visible, setVisible] = react.useState(properties.booleanProperty(element, 'visible', false));
     const header = properties.stringProperty(element, 'header', 'Dialog');
@@ -21,19 +33,48 @@ var properties = require('../properties.js');
         "data-scene-id": element.id,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
-                label: properties.stringProperty(element, 'triggerLabel', header),
-                onClick: ()=>setVisible(true)
+                onClick: ()=>setVisible(true),
+                children: properties.stringProperty(element, 'triggerLabel', header)
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog, {
-                header: header,
-                visible: visible,
-                onHide: ()=>setVisible(false),
+            /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Root, {
+                open: visible,
                 modal: properties.booleanProperty(element, 'modal', true),
                 draggable: properties.booleanProperty(element, 'draggable', false),
-                style: {
-                    width: properties.stringProperty(element, 'width', '32rem')
+                dismissable: true,
+                closeOnEscape: true,
+                onOpenChange: (event)=>{
+                    if (!event.value) setVisible(false);
                 },
-                children: slots.content
+                children: /*#__PURE__*/ jsxRuntime.jsxs(dialog.Dialog.Portal, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Backdrop, {}),
+                        /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Positioner, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(dialog.Dialog.Popup, {
+                                style: {
+                                    width: properties.stringProperty(element, 'width', '32rem')
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsxs(dialog.Dialog.Header, {
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Title, {
+                                                children: header
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Close, {
+                                                "aria-label": "Close",
+                                                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                                    className: "pi pi-times"
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Content, {
+                                        children: slots.content
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
             })
         ]
     });

package/dist/cjs/overlay/PrimeDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeDialog.js","sources":["../../../overlay/PrimeDialog.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 { useState } from 'react';\nimport { Button } from 'primereact/button';\nimport { Dialog } from 'primereact/dialog';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:dialog` component - a modal window.\n *\n * A dialog is only ever interesting while it is open, and \"the user closed it\" is state a Scene element\n * has no place to record. The adapter therefore owns visibility locally, seeded from the `visible`\n * property, and always renders a trigger button beside it. That keeps a dialog reachable again after it\n * is dismissed - without the trigger, closing a previewed dialog would leave a permanently blank spot on\n * the screen with no way back.\n */\nexport function PrimeDialog({ element, slots }: RegisteredComponentProps) {\n    const [visible, setVisible] = useState(booleanProperty(element, 'visible', false));\n    const header = stringProperty(element, 'header', 'Dialog');\n    return (\n        <div data-scene-id={element.id}>\n            <Button label={stringProperty(element, 'triggerLabel', header)} onClick={() => setVisible(true)} />\n            <Dialog\n                header={header}\n                visible={visible}\n                onHide={() => setVisible(false)}\n                modal={booleanProperty(element, 'modal', true)}\n                draggable={booleanProperty(element, 'draggable', false)}\n                style={{ width: stringProperty(element, 'width', '32rem') }}>\n                {slots.content}\n            </Dialog>\n        </div>\n    );\n}\n"],"names":["PrimeDialog","element","slots","visible","setVisible","useState","booleanProperty","header","stringProperty","_jsxs","div","data-scene-id","id","_jsx","Button","label","onClick","Dialog","onHide","modal","draggable","style","width","content"],"mappings":";;;;;;;;AASA;;;;;;;;AAQC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACpE,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAASC,0BAAAA,CAAgBL,SAAS,SAAA,EAAW,KAAA,CAAA,CAAA;IAC3E,MAAMM,MAAAA,GAASC,yBAAAA,CAAeP,OAAAA,EAAS,QAAA,EAAU,QAAA,CAAA;AACjD,IAAA,qBACIQ,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeV,QAAQW,EAAE;;0BAC1BC,cAAA,CAACC,aAAAA,EAAAA;gBAAOC,KAAAA,EAAOP,yBAAAA,CAAeP,SAAS,cAAA,EAAgBM,MAAAA,CAAAA;AAASS,gBAAAA,OAAAA,EAAS,IAAMZ,UAAAA,CAAW,IAAA;;0BAC1FS,cAAA,CAACI,aAAAA,EAAAA;gBACGV,MAAAA,EAAQA,MAAAA;gBACRJ,OAAAA,EAASA,OAAAA;AACTe,gBAAAA,MAAAA,EAAQ,IAAMd,UAAAA,CAAW,KAAA,CAAA;gBACzBe,KAAAA,EAAOb,0BAAAA,CAAgBL,SAAS,OAAA,EAAS,IAAA,CAAA;gBACzCmB,SAAAA,EAAWd,0BAAAA,CAAgBL,SAAS,WAAA,EAAa,KAAA,CAAA;gBACjDoB,KAAAA,EAAO;oBAAEC,KAAAA,EAAOd,yBAAAA,CAAeP,SAAS,OAAA,EAAS,OAAA;AAAS,iBAAA;AACzDC,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMqB;;;;AAIvB;;;;"}
+{"version":3,"file":"PrimeDialog.js","sources":["../../../overlay/PrimeDialog.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 { useState } from 'react';\nimport { Button } from 'primereact/button';\nimport { Dialog } from 'primereact/dialog';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:dialog` component - a modal window.\n *\n * A dialog is only ever interesting while it is open, and \"the user closed it\" is state a Scene element\n * has no place to record. The adapter therefore owns visibility locally, seeded from the `visible`\n * property, and always renders a trigger button beside it. That keeps a dialog reachable again after it\n * is dismissed - without the trigger, closing a previewed dialog would leave a permanently blank spot on\n * the screen with no way back.\n *\n * PrimeReact 11 made `Dialog` compositional, which turns that local visibility into a two-way\n * arrangement: `open` pushes the state down, and every dismissal gesture - the close button, `Escape`, a\n * click on the backdrop - comes back as `onOpenChange`. Both have to be wired, because a v11 dialog never\n * hides itself; ignoring the callback would leave a dialog that opens once and can never be closed.\n *\n * The parts are assembled here rather than by the component: `Dialog.Portal` and `Dialog.Backdrop` are\n * what make it modal, and `Dialog.Close` is the only reason the header gets an X.\n *\n * **Not available in v11:** the headless dialog has no resize handle, so a dialog cannot be made\n * user-resizable. No Scene property is lost to this - this adapter never exposed one - but `draggable`,\n * which v11 does still support, is the only direct-manipulation affordance left.\n */\nexport function PrimeDialog({ element, slots }: RegisteredComponentProps) {\n    const [visible, setVisible] = useState(booleanProperty(element, 'visible', false));\n    const header = stringProperty(element, 'header', 'Dialog');\n    return (\n        <div data-scene-id={element.id}>\n            <Button onClick={() => setVisible(true)}>{stringProperty(element, 'triggerLabel', header)}</Button>\n            <Dialog.Root\n                open={visible}\n                modal={booleanProperty(element, 'modal', true)}\n                draggable={booleanProperty(element, 'draggable', false)}\n                dismissable\n                closeOnEscape\n                onOpenChange={(event) => {\n                    if (!event.value) setVisible(false);\n                }}>\n                <Dialog.Portal>\n                    <Dialog.Backdrop />\n                    <Dialog.Positioner>\n                        <Dialog.Popup style={{ width: stringProperty(element, 'width', '32rem') }}>\n                            <Dialog.Header>\n                                <Dialog.Title>{header}</Dialog.Title>\n                                <Dialog.Close aria-label='Close'>\n                                    <i className='pi pi-times' />\n                                </Dialog.Close>\n                            </Dialog.Header>\n                            <Dialog.Content>{slots.content}</Dialog.Content>\n                        </Dialog.Popup>\n                    </Dialog.Positioner>\n                </Dialog.Portal>\n            </Dialog.Root>\n        </div>\n    );\n}\n"],"names":["PrimeDialog","element","slots","visible","setVisible","useState","booleanProperty","header","stringProperty","_jsxs","div","data-scene-id","id","_jsx","Button","onClick","Dialog","Root","open","modal","draggable","dismissable","closeOnEscape","onOpenChange","event","value","Portal","Backdrop","Positioner","Popup","style","width","Header","Title","Close","aria-label","i","className","Content","content"],"mappings":";;;;;;;;AASA;;;;;;;;;;;;;;;;;;;;AAoBC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACpE,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAASC,0BAAAA,CAAgBL,SAAS,SAAA,EAAW,KAAA,CAAA,CAAA;IAC3E,MAAMM,MAAAA,GAASC,yBAAAA,CAAeP,OAAAA,EAAS,QAAA,EAAU,QAAA,CAAA;AACjD,IAAA,qBACIQ,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeV,QAAQW,EAAE;;0BAC1BC,cAAA,CAACC,aAAAA,EAAAA;AAAOC,gBAAAA,OAAAA,EAAS,IAAMX,UAAAA,CAAW,IAAA,CAAA;AAAQI,gBAAAA,QAAAA,EAAAA,yBAAAA,CAAeP,SAAS,cAAA,EAAgBM,MAAAA;;AAClF,0BAAAM,cAAA,CAACG,cAAOC,IAAI,EAAA;gBACRC,IAAAA,EAAMf,OAAAA;gBACNgB,KAAAA,EAAOb,0BAAAA,CAAgBL,SAAS,OAAA,EAAS,IAAA,CAAA;gBACzCmB,SAAAA,EAAWd,0BAAAA,CAAgBL,SAAS,WAAA,EAAa,KAAA,CAAA;gBACjDoB,WAAW,EAAA,IAAA;gBACXC,aAAa,EAAA,IAAA;AACbC,gBAAAA,YAAAA,EAAc,CAACC,KAAAA,GAAAA;AACX,oBAAA,IAAI,CAACA,KAAAA,CAAMC,KAAK,EAAErB,UAAAA,CAAW,KAAA,CAAA;AACjC,gBAAA,CAAA;wCACAK,eAAA,CAACO,cAAOU,MAAM,EAAA;;AACV,sCAAAb,cAAA,CAACG,cAAOW,QAAQ,EAAA,EAAA,CAAA;AAChB,sCAAAd,cAAA,CAACG,cAAOY,UAAU,EAAA;oDACdnB,eAAA,CAACO,cAAOa,KAAK,EAAA;gCAACC,KAAAA,EAAO;oCAAEC,KAAAA,EAAOvB,yBAAAA,CAAeP,SAAS,OAAA,EAAS,OAAA;AAAS,iCAAA;;AACpE,kDAAAQ,eAAA,CAACO,cAAOgB,MAAM,EAAA;;AACV,0DAAAnB,cAAA,CAACG,cAAOiB,KAAK,EAAA;AAAE1B,gDAAAA,QAAAA,EAAAA;;AACf,0DAAAM,cAAA,CAACG,cAAOkB,KAAK,EAAA;gDAACC,YAAAA,EAAW,OAAA;AACrB,gDAAA,QAAA,gBAAAtB,cAAA,CAACuB,GAAAA,EAAAA;oDAAEC,SAAAA,EAAU;;;;;AAGrB,kDAAAxB,cAAA,CAACG,cAAOsB,OAAO,EAAA;AAAEpC,wCAAAA,QAAAA,EAAAA,KAAAA,CAAMqC;;;;;;;;;;AAOnD;;;;"}

package/dist/cjs/overlay/PrimeOverlayPanel.js

@@ -1,32 +1,44 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var button = require('primereact/button');
-var overlaypanel = require('primereact/overlaypanel');
+var popover = require('primereact/popover');
 var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:overlayPanel` component - content revealed next to whatever opened it.
  *
- * OverlayPanel positions itself against the event that toggled it, so it is meaningless without a
- * trigger; the adapter renders one and wires `toggle` to it.
+ * A popover positions itself against the thing that opened it, so it is meaningless without a trigger;
+ * the adapter renders one.
  *
- * In PrimeReact 11 this component is renamed `Popover`.
+ * PrimeReact 11 renamed `OverlayPanel` to `Popover` and changed how that trigger is wired. v10 needed a
+ * ref and a `toggle(event)` call because it positioned against the *event*; v11 positions against the
+ * trigger *element*, which `Popover.Trigger` registers itself. That removes the ref, the click handler
+ * and the local visibility state in one go - the composition owns all three - so the trigger here is a
+ * real `Button` supplied as `Popover.Trigger`'s `as`, rather than a separate button wired to a ref.
+ *
+ * The abstract Scene name stays `overlayPanel` so existing screens keep resolving.
  */ function PrimeOverlayPanel({ element, slots }) {
-    const overlay = react.useRef(null);
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
         "data-scene-id": element.id,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
-                label: properties.stringProperty(element, 'triggerLabel', 'Show'),
-                onClick: (event)=>overlay.current?.toggle(event)
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(overlaypanel.OverlayPanel, {
-                ref: overlay,
-                children: slots.content
-            })
-        ]
+        children: /*#__PURE__*/ jsxRuntime.jsxs(popover.Popover.Root, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(popover.Popover.Trigger, {
+                    as: button.Button,
+                    children: properties.stringProperty(element, 'triggerLabel', 'Show')
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(popover.Popover.Portal, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(popover.Popover.Positioner, {
+                        side: "bottom",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(popover.Popover.Popup, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(popover.Popover.Content, {
+                                children: slots.content
+                            })
+                        })
+                    })
+                })
+            ]
+        })
     });
 }
 

package/dist/cjs/overlay/PrimeOverlayPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeOverlayPanel.js","sources":["../../../overlay/PrimeOverlayPanel.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 { Button } from 'primereact/button';\nimport { OverlayPanel } from 'primereact/overlaypanel';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:overlayPanel` component - content revealed next to whatever opened it.\n *\n * OverlayPanel positions itself against the event that toggled it, so it is meaningless without a\n * trigger; the adapter renders one and wires `toggle` to it.\n *\n * In PrimeReact 11 this component is renamed `Popover`.\n */\nexport function PrimeOverlayPanel({ element, slots }: RegisteredComponentProps) {\n    const overlay = useRef<OverlayPanel>(null);\n    return (\n        <div data-scene-id={element.id}>\n            <Button label={stringProperty(element, 'triggerLabel', 'Show')} onClick={(event) => overlay.current?.toggle(event)} />\n            <OverlayPanel ref={overlay}>{slots.content}</OverlayPanel>\n        </div>\n    );\n}\n"],"names":["PrimeOverlayPanel","element","slots","overlay","useRef","_jsxs","div","data-scene-id","id","_jsx","Button","label","stringProperty","onClick","event","current","toggle","OverlayPanel","ref","content"],"mappings":";;;;;;;;AASA;;;;;;;AAOC,IACM,SAASA,iBAAAA,CAAkB,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAC1E,IAAA,MAAMC,UAAUC,YAAAA,CAAqB,IAAA,CAAA;AACrC,IAAA,qBACIC,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;;0BAC1BC,cAAA,CAACC,aAAAA,EAAAA;gBAAOC,KAAAA,EAAOC,yBAAAA,CAAeX,SAAS,cAAA,EAAgB,MAAA,CAAA;AAASY,gBAAAA,OAAAA,EAAS,CAACC,KAAAA,GAAUX,OAAAA,CAAQY,OAAO,EAAEC,MAAAA,CAAOF,KAAAA;;0BAC5GL,cAAA,CAACQ,yBAAAA,EAAAA;gBAAaC,GAAAA,EAAKf,OAAAA;AAAUD,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMiB;;;;AAG/C;;;;"}
+{"version":3,"file":"PrimeOverlayPanel.js","sources":["../../../overlay/PrimeOverlayPanel.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 { Button } from 'primereact/button';\nimport { Popover } from 'primereact/popover';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:overlayPanel` component - content revealed next to whatever opened it.\n *\n * A popover positions itself against the thing that opened it, so it is meaningless without a trigger;\n * the adapter renders one.\n *\n * PrimeReact 11 renamed `OverlayPanel` to `Popover` and changed how that trigger is wired. v10 needed a\n * ref and a `toggle(event)` call because it positioned against the *event*; v11 positions against the\n * trigger *element*, which `Popover.Trigger` registers itself. That removes the ref, the click handler\n * and the local visibility state in one go - the composition owns all three - so the trigger here is a\n * real `Button` supplied as `Popover.Trigger`'s `as`, rather than a separate button wired to a ref.\n *\n * The abstract Scene name stays `overlayPanel` so existing screens keep resolving.\n */\nexport function PrimeOverlayPanel({ element, slots }: RegisteredComponentProps) {\n    return (\n        <div data-scene-id={element.id}>\n            <Popover.Root>\n                <Popover.Trigger as={Button}>{stringProperty(element, 'triggerLabel', 'Show')}</Popover.Trigger>\n                <Popover.Portal>\n                    <Popover.Positioner side='bottom'>\n                        <Popover.Popup>\n                            <Popover.Content>{slots.content}</Popover.Content>\n                        </Popover.Popup>\n                    </Popover.Positioner>\n                </Popover.Portal>\n            </Popover.Root>\n        </div>\n    );\n}\n"],"names":["PrimeOverlayPanel","element","slots","_jsx","div","data-scene-id","id","_jsxs","Popover","Root","Trigger","as","Button","stringProperty","Portal","Positioner","side","Popup","Content","content"],"mappings":";;;;;;;AAQA;;;;;;;;;;;;;AAaC,IACM,SAASA,iBAAAA,CAAkB,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAC1E,IAAA,qBACIC,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;gCAC1BC,eAAA,CAACC,gBAAQC,IAAI,EAAA;;AACT,8BAAAN,cAAA,CAACK,gBAAQE,OAAO,EAAA;oBAACC,EAAAA,EAAIC,aAAAA;AAASC,oBAAAA,QAAAA,EAAAA,yBAAAA,CAAeZ,SAAS,cAAA,EAAgB,MAAA;;AACtE,8BAAAE,cAAA,CAACK,gBAAQM,MAAM,EAAA;4CACXX,cAAA,CAACK,gBAAQO,UAAU,EAAA;wBAACC,IAAAA,EAAK,QAAA;gDACrBb,cAAA,CAACK,gBAAQS,KAAK,EAAA;oDACVd,cAAA,CAACK,gBAAQU,OAAO,EAAA;AAAEhB,gCAAAA,QAAAA,EAAAA,KAAAA,CAAMiB;;;;;;;;AAOpD;;;;"}

package/dist/cjs/overlay/PrimeSidebar.js

@@ -3,30 +3,69 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var button = require('primereact/button');
-var sidebar = require('primereact/sidebar');
+var drawer = require('primereact/drawer');
 var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:sidebar` component - a panel that slides in from an edge of the viewport.
  *
- * Worth knowing before a PrimeReact 11 port: v11 renames this component to `Drawer` *and* introduces an
- * unrelated new component called `Sidebar` for application-shell navigation. A port that follows the
- * name rather than the behavior silently swaps a slide-in overlay for a static shell element.
+ * **This is built on `primereact/drawer`, and that is not a mistake.** PrimeReact 11 renamed this
+ * component to `Drawer` *and* introduced an unrelated new component under the name `Sidebar` -
+ * `primereact/sidebar` in v11 is an application-shell primitive (`SidebarLayout`, `SidebarAside`,
+ * `SidebarPanel`, `SidebarMenu` and friends) for persistent navigation, with no slide-in overlay
+ * behavior anywhere in it. Importing `Sidebar` from v11 to port a v10 `Sidebar` compiles perfectly and
+ * silently replaces a dismissable overlay with a static shell element, which is why the module here is
+ * the one that does not match the name. The abstract Scene name stays `sidebar` so existing screens keep
+ * resolving; only the implementation moved.
+ *
+ * Visibility is owned locally and a trigger is always rendered, for the reason described on
+ * {@link PrimeDialog}, and v11's controlled `open` / `onOpenChange` pair is wired for the reason
+ * described there too.
+ *
+ * v10's `fullScreen` flag became a fifth `position` value rather than a separate prop, so the two Scene
+ * properties collapse into one: `fullScreen` wins when set, since a drawer covering the viewport has no
+ * edge left to slide in from.
  */ function PrimeSidebar({ element, slots }) {
     const [visible, setVisible] = react.useState(properties.booleanProperty(element, 'visible', false));
+    const position = properties.booleanProperty(element, 'fullScreen', false) ? 'full' : properties.stringProperty(element, 'position', 'left');
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         "data-scene-id": element.id,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
-                label: properties.stringProperty(element, 'triggerLabel', 'Open'),
-                onClick: ()=>setVisible(true)
+                onClick: ()=>setVisible(true),
+                children: properties.stringProperty(element, 'triggerLabel', 'Open')
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(sidebar.Sidebar, {
-                visible: visible,
-                onHide: ()=>setVisible(false),
-                position: properties.stringProperty(element, 'position', 'left'),
-                fullScreen: properties.booleanProperty(element, 'fullScreen', false),
-                children: slots.content
+            /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Root, {
+                open: visible,
+                position: position,
+                onOpenChange: (event)=>{
+                    if (!event.value) setVisible(false);
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsxs(drawer.Drawer.Portal, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Backdrop, {}),
+                        /*#__PURE__*/ jsxRuntime.jsxs(drawer.Drawer.Popup, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs(drawer.Drawer.Header, {
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Title, {
+                                            children: properties.stringProperty(element, 'header')
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Close, {
+                                            "aria-label": "Close",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                                className: "pi pi-times"
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Content, {
+                                    children: slots.content
+                                })
+                            ]
+                        })
+                    ]
+                })
             })
         ]
     });

package/dist/cjs/overlay/PrimeSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeSidebar.js","sources":["../../../overlay/PrimeSidebar.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 { useState } from 'react';\nimport { Button } from 'primereact/button';\nimport { Sidebar } from 'primereact/sidebar';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:sidebar` component - a panel that slides in from an edge of the viewport.\n *\n * Worth knowing before a PrimeReact 11 port: v11 renames this component to `Drawer` *and* introduces an\n * unrelated new component called `Sidebar` for application-shell navigation. A port that follows the\n * name rather than the behavior silently swaps a slide-in overlay for a static shell element.\n */\nexport function PrimeSidebar({ element, slots }: RegisteredComponentProps) {\n    const [visible, setVisible] = useState(booleanProperty(element, 'visible', false));\n    return (\n        <div data-scene-id={element.id}>\n            <Button label={stringProperty(element, 'triggerLabel', 'Open')} onClick={() => setVisible(true)} />\n            <Sidebar\n                visible={visible}\n                onHide={() => setVisible(false)}\n                position={stringProperty(element, 'position', 'left') as 'left' | 'right' | 'top' | 'bottom'}\n                fullScreen={booleanProperty(element, 'fullScreen', false)}>\n                {slots.content}\n            </Sidebar>\n        </div>\n    );\n}\n"],"names":["PrimeSidebar","element","slots","visible","setVisible","useState","booleanProperty","_jsxs","div","data-scene-id","id","_jsx","Button","label","stringProperty","onClick","Sidebar","onHide","position","fullScreen","content"],"mappings":";;;;;;;;AASA;;;;;;AAMC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACrE,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAASC,0BAAAA,CAAgBL,SAAS,SAAA,EAAW,KAAA,CAAA,CAAA;AAC3E,IAAA,qBACIM,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;;0BAC1BC,cAAA,CAACC,aAAAA,EAAAA;gBAAOC,KAAAA,EAAOC,yBAAAA,CAAeb,SAAS,cAAA,EAAgB,MAAA,CAAA;AAASc,gBAAAA,OAAAA,EAAS,IAAMX,UAAAA,CAAW,IAAA;;0BAC1FO,cAAA,CAACK,eAAAA,EAAAA;gBACGb,OAAAA,EAASA,OAAAA;AACTc,gBAAAA,MAAAA,EAAQ,IAAMb,UAAAA,CAAW,KAAA,CAAA;gBACzBc,QAAAA,EAAUJ,yBAAAA,CAAeb,SAAS,UAAA,EAAY,MAAA,CAAA;gBAC9CkB,UAAAA,EAAYb,0BAAAA,CAAgBL,SAAS,YAAA,EAAc,KAAA,CAAA;AAClDC,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMkB;;;;AAIvB;;;;"}
+{"version":3,"file":"PrimeSidebar.js","sources":["../../../overlay/PrimeSidebar.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 { useState } from 'react';\nimport { Button } from 'primereact/button';\nimport { Drawer } from 'primereact/drawer';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:sidebar` component - a panel that slides in from an edge of the viewport.\n *\n * **This is built on `primereact/drawer`, and that is not a mistake.** PrimeReact 11 renamed this\n * component to `Drawer` *and* introduced an unrelated new component under the name `Sidebar` -\n * `primereact/sidebar` in v11 is an application-shell primitive (`SidebarLayout`, `SidebarAside`,\n * `SidebarPanel`, `SidebarMenu` and friends) for persistent navigation, with no slide-in overlay\n * behavior anywhere in it. Importing `Sidebar` from v11 to port a v10 `Sidebar` compiles perfectly and\n * silently replaces a dismissable overlay with a static shell element, which is why the module here is\n * the one that does not match the name. The abstract Scene name stays `sidebar` so existing screens keep\n * resolving; only the implementation moved.\n *\n * Visibility is owned locally and a trigger is always rendered, for the reason described on\n * {@link PrimeDialog}, and v11's controlled `open` / `onOpenChange` pair is wired for the reason\n * described there too.\n *\n * v10's `fullScreen` flag became a fifth `position` value rather than a separate prop, so the two Scene\n * properties collapse into one: `fullScreen` wins when set, since a drawer covering the viewport has no\n * edge left to slide in from.\n */\nexport function PrimeSidebar({ element, slots }: RegisteredComponentProps) {\n    const [visible, setVisible] = useState(booleanProperty(element, 'visible', false));\n    const position = booleanProperty(element, 'fullScreen', false) ? 'full' : stringProperty(element, 'position', 'left');\n    return (\n        <div data-scene-id={element.id}>\n            <Button onClick={() => setVisible(true)}>{stringProperty(element, 'triggerLabel', 'Open')}</Button>\n            <Drawer.Root\n                open={visible}\n                position={position as 'left' | 'right' | 'top' | 'bottom' | 'full'}\n                onOpenChange={(event) => {\n                    if (!event.value) setVisible(false);\n                }}>\n                <Drawer.Portal>\n                    <Drawer.Backdrop />\n                    <Drawer.Popup>\n                        <Drawer.Header>\n                            <Drawer.Title>{stringProperty(element, 'header')}</Drawer.Title>\n                            <Drawer.Close aria-label='Close'>\n                                <i className='pi pi-times' />\n                            </Drawer.Close>\n                        </Drawer.Header>\n                        <Drawer.Content>{slots.content}</Drawer.Content>\n                    </Drawer.Popup>\n                </Drawer.Portal>\n            </Drawer.Root>\n        </div>\n    );\n}\n"],"names":["PrimeSidebar","element","slots","visible","setVisible","useState","booleanProperty","position","stringProperty","_jsxs","div","data-scene-id","id","_jsx","Button","onClick","Drawer","Root","open","onOpenChange","event","value","Portal","Backdrop","Popup","Header","Title","Close","aria-label","i","className","Content","content"],"mappings":";;;;;;;;AASA;;;;;;;;;;;;;;;;;;;AAmBC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACrE,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAASC,0BAAAA,CAAgBL,SAAS,SAAA,EAAW,KAAA,CAAA,CAAA;IAC3E,MAAMM,QAAAA,GAAWD,2BAAgBL,OAAAA,EAAS,YAAA,EAAc,SAAS,MAAA,GAASO,yBAAAA,CAAeP,SAAS,UAAA,EAAY,MAAA,CAAA;AAC9G,IAAA,qBACIQ,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeV,QAAQW,EAAE;;0BAC1BC,cAAA,CAACC,aAAAA,EAAAA;AAAOC,gBAAAA,OAAAA,EAAS,IAAMX,UAAAA,CAAW,IAAA,CAAA;AAAQI,gBAAAA,QAAAA,EAAAA,yBAAAA,CAAeP,SAAS,cAAA,EAAgB,MAAA;;AAClF,0BAAAY,cAAA,CAACG,cAAOC,IAAI,EAAA;gBACRC,IAAAA,EAAMf,OAAAA;gBACNI,QAAAA,EAAUA,QAAAA;AACVY,gBAAAA,YAAAA,EAAc,CAACC,KAAAA,GAAAA;AACX,oBAAA,IAAI,CAACA,KAAAA,CAAMC,KAAK,EAAEjB,UAAAA,CAAW,KAAA,CAAA;AACjC,gBAAA,CAAA;wCACAK,eAAA,CAACO,cAAOM,MAAM,EAAA;;AACV,sCAAAT,cAAA,CAACG,cAAOO,QAAQ,EAAA,EAAA,CAAA;AAChB,sCAAAd,eAAA,CAACO,cAAOQ,KAAK,EAAA;;AACT,8CAAAf,eAAA,CAACO,cAAOS,MAAM,EAAA;;AACV,sDAAAZ,cAAA,CAACG,cAAOU,KAAK,EAAA;AAAElB,4CAAAA,QAAAA,EAAAA,yBAAAA,CAAeP,OAAAA,EAAS,QAAA;;AACvC,sDAAAY,cAAA,CAACG,cAAOW,KAAK,EAAA;4CAACC,YAAAA,EAAW,OAAA;AACrB,4CAAA,QAAA,gBAAAf,cAAA,CAACgB,GAAAA,EAAAA;gDAAEC,SAAAA,EAAU;;;;;AAGrB,8CAAAjB,cAAA,CAACG,cAAOe,OAAO,EAAA;AAAE7B,oCAAAA,QAAAA,EAAAA,KAAAA,CAAM8B;;;;;;;;;AAM/C;;;;"}

package/dist/cjs/overlay/PrimeTooltip.js

@@ -7,23 +7,36 @@ var properties = require('../properties.js');
 /**
  * The `PrimeReact:tooltip` component - explanatory text shown on hover.
  *
- * Tooltip attaches itself to a CSS selector rather than wrapping anything, so the adapter renders the
- * hover target too and points the tooltip at it with a `data-` attribute selector. An attribute selector
- * is used rather than a class because a Scene element id is free-form and may legally start with a digit,
- * which is not a valid class selector.
+ * The adapter renders the hover target as well as the tooltip, because a tooltip with nothing to point
+ * at has nothing to do.
+ *
+ * PrimeReact 11 replaced the v10 mechanism entirely and this adapter got simpler for it. v10's `Tooltip`
+ * attached itself to a CSS selector and read its text from a `data-pr-tooltip` attribute on whatever it
+ * found, which forced this adapter to invent a unique attribute selector - and to use an attribute rather
+ * than a class, because a Scene element id is free-form and may legally start with a digit, which is not
+ * a valid class selector. v11 wraps the target instead: `Tooltip.Trigger` *is* the target, so the
+ * selector, the generated attribute and the whole indirection are gone.
+ *
+ * The trigger is rendered as a `span` rather than v11's default `button`, because the `content` slot may
+ * hold any Scene children at all - including a button, which nested inside another button is invalid
+ * markup that browsers silently restructure. The cost is that a bare label is not keyboard focusable and
+ * so shows on hover only; when a screen puts a real control in the slot, that control brings its own
+ * focus behavior.
  */ function PrimeTooltip({ element, slots }) {
-    const target = `[data-scene-tooltip-target="${element.id}"]`;
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(tooltip.Tooltip.Root, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(tooltip.Tooltip, {
-                target: target,
-                position: properties.stringProperty(element, 'position', 'top')
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx("span", {
+            /*#__PURE__*/ jsxRuntime.jsx(tooltip.Tooltip.Trigger, {
+                as: "span",
                 "data-scene-id": element.id,
-                "data-scene-tooltip-target": element.id,
-                "data-pr-tooltip": properties.stringProperty(element, 'text', ''),
                 children: slots.content?.length ? slots.content : properties.stringProperty(element, 'label', 'Hover me')
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(tooltip.Tooltip.Portal, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(tooltip.Tooltip.Positioner, {
+                    side: properties.stringProperty(element, 'position', 'top'),
+                    children: /*#__PURE__*/ jsxRuntime.jsx(tooltip.Tooltip.Popup, {
+                        children: properties.stringProperty(element, 'text', '')
+                    })
+                })
             })
         ]
     });

package/dist/cjs/overlay/PrimeTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeTooltip.js","sources":["../../../overlay/PrimeTooltip.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 { Tooltip } from 'primereact/tooltip';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:tooltip` component - explanatory text shown on hover.\n *\n * Tooltip attaches itself to a CSS selector rather than wrapping anything, so the adapter renders the\n * hover target too and points the tooltip at it with a `data-` attribute selector. An attribute selector\n * is used rather than a class because a Scene element id is free-form and may legally start with a digit,\n * which is not a valid class selector.\n */\nexport function PrimeTooltip({ element, slots }: RegisteredComponentProps) {\n    const target = `[data-scene-tooltip-target=\"${element.id}\"]`;\n    return (\n        <>\n            <Tooltip target={target} position={stringProperty(element, 'position', 'top') as 'top' | 'bottom' | 'left' | 'right'} />\n            <span data-scene-id={element.id} data-scene-tooltip-target={element.id} data-pr-tooltip={stringProperty(element, 'text', '')}>\n                {slots.content?.length ? slots.content : stringProperty(element, 'label', 'Hover me')}\n            </span>\n        </>\n    );\n}\n"],"names":["PrimeTooltip","element","slots","target","id","_jsxs","_Fragment","_jsx","Tooltip","position","stringProperty","span","data-scene-id","data-scene-tooltip-target","data-pr-tooltip","content","length"],"mappings":";;;;;;AAOA;;;;;;;AAOC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACrE,MAAMC,MAAAA,GAAS,CAAC,4BAA4B,EAAEF,QAAQG,EAAE,CAAC,EAAE,CAAC;IAC5D,qBACIC,eAAA,CAAAC,mBAAA,EAAA;;0BACIC,cAAA,CAACC,eAAAA,EAAAA;gBAAQL,MAAAA,EAAQA,MAAAA;gBAAQM,QAAAA,EAAUC,yBAAAA,CAAeT,SAAS,UAAA,EAAY,KAAA;;0BACvEM,cAAA,CAACI,MAAAA,EAAAA;AAAKC,gBAAAA,eAAAA,EAAeX,QAAQG,EAAE;AAAES,gBAAAA,2BAAAA,EAA2BZ,QAAQG,EAAE;gBAAEU,iBAAAA,EAAiBJ,yBAAAA,CAAeT,SAAS,MAAA,EAAQ,EAAA,CAAA;0BACpHC,KAAAA,CAAMa,OAAO,EAAEC,MAAAA,GAASd,KAAAA,CAAMa,OAAO,GAAGL,yBAAAA,CAAeT,SAAS,OAAA,EAAS,UAAA;;;;AAI1F;;;;"}
+{"version":3,"file":"PrimeTooltip.js","sources":["../../../overlay/PrimeTooltip.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 { Tooltip } from 'primereact/tooltip';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:tooltip` component - explanatory text shown on hover.\n *\n * The adapter renders the hover target as well as the tooltip, because a tooltip with nothing to point\n * at has nothing to do.\n *\n * PrimeReact 11 replaced the v10 mechanism entirely and this adapter got simpler for it. v10's `Tooltip`\n * attached itself to a CSS selector and read its text from a `data-pr-tooltip` attribute on whatever it\n * found, which forced this adapter to invent a unique attribute selector - and to use an attribute rather\n * than a class, because a Scene element id is free-form and may legally start with a digit, which is not\n * a valid class selector. v11 wraps the target instead: `Tooltip.Trigger` *is* the target, so the\n * selector, the generated attribute and the whole indirection are gone.\n *\n * The trigger is rendered as a `span` rather than v11's default `button`, because the `content` slot may\n * hold any Scene children at all - including a button, which nested inside another button is invalid\n * markup that browsers silently restructure. The cost is that a bare label is not keyboard focusable and\n * so shows on hover only; when a screen puts a real control in the slot, that control brings its own\n * focus behavior.\n */\nexport function PrimeTooltip({ element, slots }: RegisteredComponentProps) {\n    return (\n        <Tooltip.Root>\n            <Tooltip.Trigger as='span' data-scene-id={element.id}>\n                {slots.content?.length ? slots.content : stringProperty(element, 'label', 'Hover me')}\n            </Tooltip.Trigger>\n            <Tooltip.Portal>\n                <Tooltip.Positioner side={stringProperty(element, 'position', 'top') as 'top' | 'bottom' | 'left' | 'right'}>\n                    <Tooltip.Popup>{stringProperty(element, 'text', '')}</Tooltip.Popup>\n                </Tooltip.Positioner>\n            </Tooltip.Portal>\n        </Tooltip.Root>\n    );\n}\n"],"names":["PrimeTooltip","element","slots","_jsxs","Tooltip","Root","_jsx","Trigger","as","data-scene-id","id","content","length","stringProperty","Portal","Positioner","side","Popup"],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;;;;;AAkBC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACrE,qBACIC,eAAA,CAACC,gBAAQC,IAAI,EAAA;;AACT,0BAAAC,cAAA,CAACF,gBAAQG,OAAO,EAAA;gBAACC,EAAAA,EAAG,MAAA;AAAOC,gBAAAA,eAAAA,EAAeR,QAAQS,EAAE;0BAC/CR,KAAAA,CAAMS,OAAO,EAAEC,MAAAA,GAASV,KAAAA,CAAMS,OAAO,GAAGE,yBAAAA,CAAeZ,SAAS,OAAA,EAAS,UAAA;;AAE9E,0BAAAK,cAAA,CAACF,gBAAQU,MAAM,EAAA;wCACXR,cAAA,CAACF,gBAAQW,UAAU,EAAA;oBAACC,IAAAA,EAAMH,yBAAAA,CAAeZ,SAAS,UAAA,EAAY,KAAA,CAAA;4CAC1DK,cAAA,CAACF,gBAAQa,KAAK,EAAA;AAAEJ,wBAAAA,QAAAA,EAAAA,yBAAAA,CAAeZ,SAAS,MAAA,EAAQ,EAAA;;;;;;AAKpE;;;;"}