@cratis/scene.primereact 1.1.0 → 3.0.0

package/dist/esm/media/PrimeGalleria.js

@@ -1,36 +1,76 @@
-import { jsx } from 'react/jsx-runtime';
-import { Galleria } from 'primereact/galleria';
-import { recordArrayProperty, numberProperty, booleanProperty } from '../properties.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Gallery } from 'primereact/gallery';
+import { recordArrayProperty, booleanProperty, numberProperty } from '../properties.js';
 
 /**
  * The `PrimeReact:galleria` component - a gallery with thumbnails and a large view.
  *
- * Galleria ships no default templates, so the adapter supplies both; each item is read as
- * `{ src, thumbnail, alt }` with the thumbnail falling back to the full image, which is the common case
- * for a small gallery that has no separately generated thumbnails.
+ * PrimeReact 11 renamed the module to `gallery` and turned it into a composition, which removes the
+ * awkwardness the v10 adapter had to work around: there are no `item` and `thumbnail` render-prop
+ * templates to supply, only two lists the adapter writes out itself. Each entry is still read as
+ * `{ src, thumbnail, alt }`, with the thumbnail falling back to the full image - the common case for a
+ * small gallery that has no separately generated thumbnails.
  *
- * In PrimeReact 11 this component is renamed `Gallery`.
+ * The abstract name stays `galleria`. Renaming it would be renaming Scene's vocabulary because PrimeReact
+ * renamed a module, and every screen that says `galleria` today would have to be edited to say the same
+ * thing.
+ *
+ * Navigation and the thumbnail rail are rendered only when there is something to navigate: a single image
+ * needs no previous and next, and no items at all leave a bare, empty gallery rather than a frame of
+ * chrome around nothing.
  */ function PrimeGalleria({ element }) {
     const items = recordArrayProperty(element, 'items');
-    return /*#__PURE__*/ jsx(Galleria, {
+    const showThumbnails = booleanProperty(element, 'showThumbnails', true);
+    return /*#__PURE__*/ jsxs(Gallery.Root, {
         "data-scene-id": element.id,
-        value: items,
-        numVisible: numberProperty(element, 'numVisible', 5),
-        circular: booleanProperty(element, 'circular', true),
-        showThumbnails: booleanProperty(element, 'showThumbnails', true),
         style: {
             maxWidth: `${numberProperty(element, 'maxWidth', 480)}px`
         },
-        item: (item)=>/*#__PURE__*/ jsx("img", {
-                src: String(item.src ?? ''),
-                alt: String(item.alt ?? ''),
-                className: "block w-full"
+        children: [
+            /*#__PURE__*/ jsxs(Gallery.Content, {
+                children: [
+                    items.map((item, index)=>/*#__PURE__*/ jsx(Gallery.Item, {
+                            children: /*#__PURE__*/ jsx("img", {
+                                src: String(item.src ?? ''),
+                                alt: String(item.alt ?? ''),
+                                className: "block w-full"
+                            })
+                        }, index)),
+                    items.length > 1 && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Gallery.Prev, {
+                                "aria-label": "Previous image",
+                                children: /*#__PURE__*/ jsx("i", {
+                                    className: "pi pi-chevron-left",
+                                    "aria-hidden": "true"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Gallery.Next, {
+                                "aria-label": "Next image",
+                                children: /*#__PURE__*/ jsx("i", {
+                                    className: "pi pi-chevron-right",
+                                    "aria-hidden": "true"
+                                })
+                            })
+                        ]
+                    })
+                ]
             }),
-        thumbnail: (item)=>/*#__PURE__*/ jsx("img", {
-                src: String(item.thumbnail ?? item.src ?? ''),
-                alt: String(item.alt ?? ''),
-                className: "block h-12"
+            showThumbnails && items.length > 1 && /*#__PURE__*/ jsx(Gallery.Thumbnail, {
+                slidesPerPage: numberProperty(element, 'numVisible', 5),
+                loop: booleanProperty(element, 'circular', true),
+                children: /*#__PURE__*/ jsx(Gallery.ThumbnailContent, {
+                    children: items.map((item, index)=>/*#__PURE__*/ jsx(Gallery.ThumbnailItem, {
+                            index: index,
+                            children: /*#__PURE__*/ jsx("img", {
+                                src: String(item.thumbnail ?? item.src ?? ''),
+                                alt: String(item.alt ?? ''),
+                                className: "block h-12"
+                            })
+                        }, index))
+                })
             })
+        ]
     });
 }
 

package/dist/esm/media/PrimeGalleria.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeGalleria.js","sources":["../../../media/PrimeGalleria.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 { Galleria } from 'primereact/galleria';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, recordArrayProperty } from '../properties';\n\n/**\n * The `PrimeReact:galleria` component - a gallery with thumbnails and a large view.\n *\n * Galleria ships no default templates, so the adapter supplies both; each item is read as\n * `{ src, thumbnail, alt }` with the thumbnail falling back to the full image, which is the common case\n * for a small gallery that has no separately generated thumbnails.\n *\n * In PrimeReact 11 this component is renamed `Gallery`.\n */\nexport function PrimeGalleria({ element }: RegisteredComponentProps) {\n    const items = recordArrayProperty(element, 'items');\n    return (\n        <Galleria\n            data-scene-id={element.id}\n            value={items}\n            numVisible={numberProperty(element, 'numVisible', 5)}\n            circular={booleanProperty(element, 'circular', true)}\n            showThumbnails={booleanProperty(element, 'showThumbnails', true)}\n            style={{ maxWidth: `${numberProperty(element, 'maxWidth', 480)}px` }}\n            item={(item: Record<string, unknown>) => (\n                <img src={String(item.src ?? '')} alt={String(item.alt ?? '')} className='block w-full' />\n            )}\n            thumbnail={(item: Record<string, unknown>) => (\n                <img src={String(item.thumbnail ?? item.src ?? '')} alt={String(item.alt ?? '')} className='block h-12' />\n            )}\n        />\n    );\n}\n"],"names":["PrimeGalleria","element","items","recordArrayProperty","_jsx","Galleria","data-scene-id","id","value","numVisible","numberProperty","circular","booleanProperty","showThumbnails","style","maxWidth","item","img","src","String","alt","className","thumbnail"],"mappings":";;;;AAOA;;;;;;;;AAQC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;IAC/D,MAAMC,KAAAA,GAAQC,oBAAoBF,OAAAA,EAAS,OAAA,CAAA;AAC3C,IAAA,qBACIG,GAAA,CAACC,QAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeL,QAAQM,EAAE;QACzBC,KAAAA,EAAON,KAAAA;QACPO,UAAAA,EAAYC,cAAAA,CAAeT,SAAS,YAAA,EAAc,CAAA,CAAA;QAClDU,QAAAA,EAAUC,eAAAA,CAAgBX,SAAS,UAAA,EAAY,IAAA,CAAA;QAC/CY,cAAAA,EAAgBD,eAAAA,CAAgBX,SAAS,gBAAA,EAAkB,IAAA,CAAA;QAC3Da,KAAAA,EAAO;AAAEC,YAAAA,QAAAA,EAAU,GAAGL,cAAAA,CAAeT,OAAAA,EAAS,UAAA,EAAY,GAAA,CAAA,CAAK,EAAE;AAAE,SAAA;QACnEe,IAAAA,EAAM,CAACA,qBACHZ,GAAA,CAACa,KAAAA,EAAAA;gBAAIC,GAAAA,EAAKC,MAAAA,CAAOH,IAAAA,CAAKE,GAAG,IAAI,EAAA,CAAA;gBAAKE,GAAAA,EAAKD,MAAAA,CAAOH,IAAAA,CAAKI,GAAG,IAAI,EAAA,CAAA;gBAAKC,SAAAA,EAAU;;QAE7EC,SAAAA,EAAW,CAACN,qBACRZ,GAAA,CAACa,KAAAA,EAAAA;AAAIC,gBAAAA,GAAAA,EAAKC,OAAOH,IAAAA,CAAKM,SAAS,IAAIN,IAAAA,CAAKE,GAAG,IAAI,EAAA,CAAA;gBAAKE,GAAAA,EAAKD,MAAAA,CAAOH,IAAAA,CAAKI,GAAG,IAAI,EAAA,CAAA;gBAAKC,SAAAA,EAAU;;;AAI3G;;;;"}
+{"version":3,"file":"PrimeGalleria.js","sources":["../../../media/PrimeGalleria.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 { Gallery } from 'primereact/gallery';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, recordArrayProperty } from '../properties';\n\n/**\n * The `PrimeReact:galleria` component - a gallery with thumbnails and a large view.\n *\n * PrimeReact 11 renamed the module to `gallery` and turned it into a composition, which removes the\n * awkwardness the v10 adapter had to work around: there are no `item` and `thumbnail` render-prop\n * templates to supply, only two lists the adapter writes out itself. Each entry is still read as\n * `{ src, thumbnail, alt }`, with the thumbnail falling back to the full image - the common case for a\n * small gallery that has no separately generated thumbnails.\n *\n * The abstract name stays `galleria`. Renaming it would be renaming Scene's vocabulary because PrimeReact\n * renamed a module, and every screen that says `galleria` today would have to be edited to say the same\n * thing.\n *\n * Navigation and the thumbnail rail are rendered only when there is something to navigate: a single image\n * needs no previous and next, and no items at all leave a bare, empty gallery rather than a frame of\n * chrome around nothing.\n */\nexport function PrimeGalleria({ element }: RegisteredComponentProps) {\n    const items = recordArrayProperty(element, 'items');\n    const showThumbnails = booleanProperty(element, 'showThumbnails', true);\n    return (\n        <Gallery.Root data-scene-id={element.id} style={{ maxWidth: `${numberProperty(element, 'maxWidth', 480)}px` }}>\n            <Gallery.Content>\n                {items.map((item, index) => (\n                    <Gallery.Item key={index}>\n                        <img src={String(item.src ?? '')} alt={String(item.alt ?? '')} className='block w-full' />\n                    </Gallery.Item>\n                ))}\n                {items.length > 1 && (\n                    <>\n                        <Gallery.Prev aria-label='Previous image'>\n                            <i className='pi pi-chevron-left' aria-hidden='true' />\n                        </Gallery.Prev>\n                        <Gallery.Next aria-label='Next image'>\n                            <i className='pi pi-chevron-right' aria-hidden='true' />\n                        </Gallery.Next>\n                    </>\n                )}\n            </Gallery.Content>\n            {showThumbnails && items.length > 1 && (\n                <Gallery.Thumbnail slidesPerPage={numberProperty(element, 'numVisible', 5)} loop={booleanProperty(element, 'circular', true)}>\n                    <Gallery.ThumbnailContent>\n                        {items.map((item, index) => (\n                            <Gallery.ThumbnailItem key={index} index={index}>\n                                <img src={String(item.thumbnail ?? item.src ?? '')} alt={String(item.alt ?? '')} className='block h-12' />\n                            </Gallery.ThumbnailItem>\n                        ))}\n                    </Gallery.ThumbnailContent>\n                </Gallery.Thumbnail>\n            )}\n        </Gallery.Root>\n    );\n}\n"],"names":["PrimeGalleria","element","items","recordArrayProperty","showThumbnails","booleanProperty","_jsxs","Gallery","Root","data-scene-id","id","style","maxWidth","numberProperty","Content","map","item","index","_jsx","Item","img","src","String","alt","className","length","_Fragment","Prev","aria-label","i","aria-hidden","Next","Thumbnail","slidesPerPage","loop","ThumbnailContent","ThumbnailItem","thumbnail"],"mappings":";;;;AAOA;;;;;;;;;;;;;;;;AAgBC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;IAC/D,MAAMC,KAAAA,GAAQC,oBAAoBF,OAAAA,EAAS,OAAA,CAAA;IAC3C,MAAMG,cAAAA,GAAiBC,eAAAA,CAAgBJ,OAAAA,EAAS,gBAAA,EAAkB,IAAA,CAAA;IAClE,qBACIK,IAAA,CAACC,QAAQC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;QAAEC,KAAAA,EAAO;AAAEC,YAAAA,QAAAA,EAAU,GAAGC,cAAAA,CAAeZ,OAAAA,EAAS,UAAA,EAAY,GAAA,CAAA,CAAK,EAAE;AAAE,SAAA;;AACxG,0BAAAK,IAAA,CAACC,QAAQO,OAAO,EAAA;;AACXZ,oBAAAA,KAAAA,CAAMa,GAAG,CAAC,CAACC,MAAMC,KAAAA,iBACdC,GAAA,CAACX,QAAQY,IAAI,EAAA;AACT,4BAAA,QAAA,gBAAAD,GAAA,CAACE,KAAAA,EAAAA;gCAAIC,GAAAA,EAAKC,MAAAA,CAAON,IAAAA,CAAKK,GAAG,IAAI,EAAA,CAAA;gCAAKE,GAAAA,EAAKD,MAAAA,CAAON,IAAAA,CAAKO,GAAG,IAAI,EAAA,CAAA;gCAAKC,SAAAA,EAAU;;AAD1DP,yBAAAA,EAAAA,KAAAA,CAAAA,CAAAA;oBAItBf,KAAAA,CAAMuB,MAAM,GAAG,CAAA,kBACZnB,IAAA,CAAAoB,QAAA,EAAA;;AACI,0CAAAR,GAAA,CAACX,QAAQoB,IAAI,EAAA;gCAACC,YAAAA,EAAW,gBAAA;AACrB,gCAAA,QAAA,gBAAAV,GAAA,CAACW,GAAAA,EAAAA;oCAAEL,SAAAA,EAAU,oBAAA;oCAAqBM,aAAAA,EAAY;;;AAElD,0CAAAZ,GAAA,CAACX,QAAQwB,IAAI,EAAA;gCAACH,YAAAA,EAAW,YAAA;AACrB,gCAAA,QAAA,gBAAAV,GAAA,CAACW,GAAAA,EAAAA;oCAAEL,SAAAA,EAAU,qBAAA;oCAAsBM,aAAAA,EAAY;;;;;;;AAK9D1B,YAAAA,cAAAA,IAAkBF,MAAMuB,MAAM,GAAG,CAAA,kBAC9BP,GAAA,CAACX,QAAQyB,SAAS,EAAA;gBAACC,aAAAA,EAAepB,cAAAA,CAAeZ,SAAS,YAAA,EAAc,CAAA,CAAA;gBAAIiC,IAAAA,EAAM7B,eAAAA,CAAgBJ,SAAS,UAAA,EAAY,IAAA,CAAA;wCACnHiB,GAAA,CAACX,QAAQ4B,gBAAgB,EAAA;AACpBjC,oBAAAA,QAAAA,EAAAA,KAAAA,CAAMa,GAAG,CAAC,CAACC,MAAMC,KAAAA,iBACdC,GAAA,CAACX,QAAQ6B,aAAa,EAAA;4BAAanB,KAAAA,EAAOA,KAAAA;AACtC,4BAAA,QAAA,gBAAAC,GAAA,CAACE,KAAAA,EAAAA;AAAIC,gCAAAA,GAAAA,EAAKC,OAAON,IAAAA,CAAKqB,SAAS,IAAIrB,IAAAA,CAAKK,GAAG,IAAI,EAAA,CAAA;gCAAKE,GAAAA,EAAKD,MAAAA,CAAON,IAAAA,CAAKO,GAAG,IAAI,EAAA,CAAA;gCAAKC,SAAAA,EAAU;;AADnEP,yBAAAA,EAAAA,KAAAA,CAAAA;;;;;AASxD;;;;"}

package/dist/esm/media/PrimeImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeImage.d.ts","sourceRoot":"","sources":["../../../media/PrimeImage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAU/D,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAW/D"}
+{"version":3,"file":"PrimeImage.d.ts","sourceRoot":"","sources":["../../../media/PrimeImage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAe/D,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAW/D"}

package/dist/esm/media/PrimeImage.js

@@ -1,17 +1,23 @@
 import { jsx } from 'react/jsx-runtime';
-import { Image } from 'primereact/image';
+import { Image } from './Image.js';
 import { booleanProperty, stringProperty } from '../properties.js';
 
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
 /**
  * The `PrimeReact:image` component - an image with an optional full-screen preview.
  *
+ * PrimeReact 11 removed `Image` with no replacement and no headless hook, so the adapter renders Cratis's
+ * own {@link Image}. The element's authored contract is unchanged, which is the point: which library
+ * happens to draw an `img` is not something a screen should have to be rewritten over.
+ *
  * `alt` defaults to an empty string rather than to the file name: an image with no authored alternative
  * text is decorative until someone says otherwise, and inventing one would put a URL fragment in front of
  * a screen reader.
  */ function PrimeImage({ element }) {
     return /*#__PURE__*/ jsx(Image, {
         "data-scene-id": element.id,
-        src: stringProperty(element, 'src', ''),
+        src: stringProperty(element, 'src'),
         alt: stringProperty(element, 'alt', ''),
         width: stringProperty(element, 'width'),
         height: stringProperty(element, 'height'),

package/dist/esm/media/PrimeImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeImage.js","sources":["../../../media/PrimeImage.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 { Image } from 'primereact/image';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:image` component - an image with an optional full-screen preview.\n *\n * `alt` defaults to an empty string rather than to the file name: an image with no authored alternative\n * text is decorative until someone says otherwise, and inventing one would put a URL fragment in front of\n * a screen reader.\n */\nexport function PrimeImage({ element }: RegisteredComponentProps) {\n    return (\n        <Image\n            data-scene-id={element.id}\n            src={stringProperty(element, 'src', '')}\n            alt={stringProperty(element, 'alt', '')}\n            width={stringProperty(element, 'width')}\n            height={stringProperty(element, 'height')}\n            preview={booleanProperty(element, 'preview', false)}\n        />\n    );\n}\n"],"names":["PrimeImage","element","_jsx","Image","data-scene-id","id","src","stringProperty","alt","width","height","preview","booleanProperty"],"mappings":";;;;AAOA;;;;;;AAMC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAA4B,EAAA;AAC5D,IAAA,qBACIC,GAAA,CAACC,KAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;QACzBC,GAAAA,EAAKC,cAAAA,CAAeN,SAAS,KAAA,EAAO,EAAA,CAAA;QACpCO,GAAAA,EAAKD,cAAAA,CAAeN,SAAS,KAAA,EAAO,EAAA,CAAA;AACpCQ,QAAAA,KAAAA,EAAOF,eAAeN,OAAAA,EAAS,OAAA,CAAA;AAC/BS,QAAAA,MAAAA,EAAQH,eAAeN,OAAAA,EAAS,QAAA,CAAA;QAChCU,OAAAA,EAASC,eAAAA,CAAgBX,SAAS,SAAA,EAAW,KAAA;;AAGzD;;;;"}
+{"version":3,"file":"PrimeImage.js","sources":["../../../media/PrimeImage.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 { RegisteredComponentProps } from '@cratis/scene.react';\nimport { Image } from './Image';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:image` component - an image with an optional full-screen preview.\n *\n * PrimeReact 11 removed `Image` with no replacement and no headless hook, so the adapter renders Cratis's\n * own {@link Image}. The element's authored contract is unchanged, which is the point: which library\n * happens to draw an `img` is not something a screen should have to be rewritten over.\n *\n * `alt` defaults to an empty string rather than to the file name: an image with no authored alternative\n * text is decorative until someone says otherwise, and inventing one would put a URL fragment in front of\n * a screen reader.\n */\nexport function PrimeImage({ element }: RegisteredComponentProps) {\n    return (\n        <Image\n            data-scene-id={element.id}\n            src={stringProperty(element, 'src')}\n            alt={stringProperty(element, 'alt', '')}\n            width={stringProperty(element, 'width')}\n            height={stringProperty(element, 'height')}\n            preview={booleanProperty(element, 'preview', false)}\n        />\n    );\n}\n"],"names":["PrimeImage","element","_jsx","Image","data-scene-id","id","src","stringProperty","alt","width","height","preview","booleanProperty"],"mappings":";;;;AAAA;AACA;AAMA;;;;;;;;;;AAUC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAA4B,EAAA;AAC5D,IAAA,qBACIC,GAAA,CAACC,KAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;AACzBC,QAAAA,GAAAA,EAAKC,eAAeN,OAAAA,EAAS,KAAA,CAAA;QAC7BO,GAAAA,EAAKD,cAAAA,CAAeN,SAAS,KAAA,EAAO,EAAA,CAAA;AACpCQ,QAAAA,KAAAA,EAAOF,eAAeN,OAAAA,EAAS,OAAA,CAAA;AAC/BS,QAAAA,MAAAA,EAAQH,eAAeN,OAAAA,EAAS,QAAA,CAAA;QAChCU,OAAAA,EAASC,eAAAA,CAAgBX,SAAS,SAAA,EAAW,KAAA;;AAGzD;;;;"}

package/dist/esm/media/index.d.ts

@@ -1,4 +1,5 @@
 export * from './PrimeImage';
 export * from './PrimeGalleria';
 export * from './PrimeCarousel';
+export * from './Image';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/media/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../media/index.ts"],"names":[],"mappings":"AAGA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../media/index.ts"],"names":[],"mappings":"AAGA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/esm/media/index.js

@@ -1,4 +1,5 @@
 export * from './PrimeImage';
 export * from './PrimeGalleria';
 export * from './PrimeCarousel';
+export * from './Image';
 //# sourceMappingURL=index.js.map

package/dist/esm/media/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../media/index.ts"],"names":[],"mappings":"AAGA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../media/index.ts"],"names":[],"mappings":"AAGA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/esm/menu/Dock.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { MenuItem } from '../MenuItem';
+import { DockPosition } from './DockPosition';
+export interface DockProps extends HTMLAttributes<HTMLDivElement> {
+    items?: MenuItem[];
+    position?: DockPosition;
+}
+export declare function Dock({ items, position, ...rest }: DockProps): import("react").JSX.Element;
+//# sourceMappingURL=Dock.d.ts.map

package/dist/esm/menu/Dock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dock.d.ts","sourceRoot":"","sources":["../../../menu/Dock.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA4C9C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAI7D,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAKnB,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B;AAmBD,wBAAgB,IAAI,CAAC,EAAE,KAAU,EAAE,QAA8B,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BA8BtF"}

package/dist/esm/menu/Dock.js

@@ -0,0 +1,109 @@
+import { jsx } from 'react/jsx-runtime';
+import { DockPosition } from './DockPosition.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+const dockStyle = {
+    position: 'absolute',
+    background: 'var(--scene-surface-overlay)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+    color: 'var(--scene-text-color)'
+};
+const entryStyle = {
+    background: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    fontSize: '1.5rem',
+    lineHeight: 1,
+    textDecoration: 'none'
+};
+/**
+ * Where the dock sits within its container, for one edge.
+ *
+ * The offset lives here rather than in four CSS classes because this package ships no component
+ * stylesheets, and because the two axes are genuinely coupled: an edge decides both which side is pinned
+ * and which axis is centered, so writing them together is what keeps them consistent.
+ */ function anchor(position) {
+    switch(position){
+        case DockPosition.Top:
+            return {
+                top: 0,
+                left: '50%',
+                transform: 'translateX(-50%)'
+            };
+        case DockPosition.Left:
+            return {
+                left: 0,
+                top: '50%',
+                transform: 'translateY(-50%)'
+            };
+        case DockPosition.Right:
+            return {
+                right: 0,
+                top: '50%',
+                transform: 'translateY(-50%)'
+            };
+        default:
+            return {
+                bottom: 0,
+                left: '50%',
+                transform: 'translateX(-50%)'
+            };
+    }
+}
+/**
+ * A small strip of icons anchored to one edge of its container. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/dock` outright, with no successor and no headless
+ * hook. It positions itself absolutely, so it expects a positioned container to sit in - dropped straight
+ * into a page it would pin itself to the page, which is why the Scene adapter wraps it in a sized relative
+ * box.
+ *
+ * Entries are icon-only, and that is precisely why each one carries its label as `aria-label` and as a
+ * `title`: a control whose only content is a decorative glyph has no accessible name at all otherwise, and
+ * a dock is exactly the shape of component where that gets forgotten. An entry with no icon still renders,
+ * as a neutral placeholder glyph, so a half-authored screen shows a gap rather than an invisible control.
+ *
+ * What it deliberately does not carry over from the v10 `Dock`: there is no magnification of the icon under
+ * the pointer, which was the component's signature effect and is pure decoration; there are no tooltips
+ * beyond the browser's own `title`; and item templates are not supported.
+ */ function Dock({ items = [], position = DockPosition.Bottom, ...rest }) {
+    const vertical = position === DockPosition.Left || position === DockPosition.Right;
+    return /*#__PURE__*/ jsx("div", {
+        ...rest,
+        role: "toolbar",
+        "aria-orientation": vertical ? 'vertical' : 'horizontal',
+        className: vertical ? 'flex flex-col items-center gap-2 p-3' : 'flex items-center gap-2 p-3',
+        style: {
+            ...dockStyle,
+            ...anchor(position)
+        },
+        children: items.map((item, index)=>item.url === undefined ? /*#__PURE__*/ jsx("button", {
+                type: "button",
+                style: entryStyle,
+                disabled: item.disabled,
+                title: item.label,
+                "aria-label": item.label,
+                onClick: ()=>item.command?.(),
+                children: /*#__PURE__*/ jsx("i", {
+                    className: item.icon ?? 'pi pi-circle',
+                    "aria-hidden": "true"
+                })
+            }, index) : /*#__PURE__*/ jsx("a", {
+                href: item.url,
+                style: entryStyle,
+                title: item.label,
+                "aria-label": item.label,
+                children: /*#__PURE__*/ jsx("i", {
+                    className: item.icon ?? 'pi pi-circle',
+                    "aria-hidden": "true"
+                })
+            }, index))
+    });
+}
+
+export { Dock };
+//# sourceMappingURL=Dock.js.map

package/dist/esm/menu/Dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dock.js","sources":["../../../menu/Dock.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { CSSProperties, HTMLAttributes } from 'react';\nimport { MenuItem } from '../MenuItem';\nimport { DockPosition } from './DockPosition';\n\nconst dockStyle: CSSProperties = {\n    position: 'absolute',\n    background: 'var(--scene-surface-overlay)',\n    border: '1px solid var(--scene-surface-border)',\n    borderRadius: 'var(--scene-content-border-radius)',\n    color: 'var(--scene-text-color)',\n};\n\nconst entryStyle: CSSProperties = {\n    background: 'transparent',\n    border: 'none',\n    color: 'inherit',\n    cursor: 'pointer',\n    font: 'inherit',\n    fontSize: '1.5rem',\n    lineHeight: 1,\n    textDecoration: 'none',\n};\n\n/**\n * Where the dock sits within its container, for one edge.\n *\n * The offset lives here rather than in four CSS classes because this package ships no component\n * stylesheets, and because the two axes are genuinely coupled: an edge decides both which side is pinned\n * and which axis is centered, so writing them together is what keeps them consistent.\n */\nfunction anchor(position: DockPosition): CSSProperties {\n    switch (position) {\n        case DockPosition.Top:\n            return { top: 0, left: '50%', transform: 'translateX(-50%)' };\n        case DockPosition.Left:\n            return { left: 0, top: '50%', transform: 'translateY(-50%)' };\n        case DockPosition.Right:\n            return { right: 0, top: '50%', transform: 'translateY(-50%)' };\n        default:\n            return { bottom: 0, left: '50%', transform: 'translateX(-50%)' };\n    }\n}\n\n/**\n * The configuration {@link Dock} takes.\n */\nexport interface DockProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * The entries to show. Each is shown as its icon alone, with its label as the accessible name.\n     */\n    items?: MenuItem[];\n\n    /**\n     * The edge of the containing box to anchor against.\n     */\n    position?: DockPosition;\n}\n\n/**\n * A small strip of icons anchored to one edge of its container. Cratis-owned.\n *\n * This exists because PrimeReact 11 removed `primereact/dock` outright, with no successor and no headless\n * hook. It positions itself absolutely, so it expects a positioned container to sit in - dropped straight\n * into a page it would pin itself to the page, which is why the Scene adapter wraps it in a sized relative\n * box.\n *\n * Entries are icon-only, and that is precisely why each one carries its label as `aria-label` and as a\n * `title`: a control whose only content is a decorative glyph has no accessible name at all otherwise, and\n * a dock is exactly the shape of component where that gets forgotten. An entry with no icon still renders,\n * as a neutral placeholder glyph, so a half-authored screen shows a gap rather than an invisible control.\n *\n * What it deliberately does not carry over from the v10 `Dock`: there is no magnification of the icon under\n * the pointer, which was the component's signature effect and is pure decoration; there are no tooltips\n * beyond the browser's own `title`; and item templates are not supported.\n */\nexport function Dock({ items = [], position = DockPosition.Bottom, ...rest }: DockProps) {\n    const vertical = position === DockPosition.Left || position === DockPosition.Right;\n\n    return (\n        <div\n            {...rest}\n            role='toolbar'\n            aria-orientation={vertical ? 'vertical' : 'horizontal'}\n            className={vertical ? 'flex flex-col items-center gap-2 p-3' : 'flex items-center gap-2 p-3'}\n            style={{ ...dockStyle, ...anchor(position) }}>\n            {items.map((item, index) =>\n                item.url === undefined ? (\n                    <button\n                        key={index}\n                        type='button'\n                        style={entryStyle}\n                        disabled={item.disabled}\n                        title={item.label}\n                        aria-label={item.label}\n                        onClick={() => item.command?.()}>\n                        <i className={item.icon ?? 'pi pi-circle'} aria-hidden='true' />\n                    </button>\n                ) : (\n                    <a key={index} href={item.url} style={entryStyle} title={item.label} aria-label={item.label}>\n                        <i className={item.icon ?? 'pi pi-circle'} aria-hidden='true' />\n                    </a>\n                )\n            )}\n        </div>\n    );\n}\n"],"names":["dockStyle","position","background","border","borderRadius","color","entryStyle","cursor","font","fontSize","lineHeight","textDecoration","anchor","DockPosition","Top","top","left","transform","Left","Right","right","bottom","Dock","items","Bottom","rest","vertical","_jsx","div","role","aria-orientation","className","style","map","item","index","url","undefined","button","type","disabled","title","label","aria-label","onClick","command","i","icon","aria-hidden","a","href"],"mappings":"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"}

package/dist/esm/menu/DockPosition.d.ts

@@ -0,0 +1,7 @@
+export declare enum DockPosition {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+//# sourceMappingURL=DockPosition.d.ts.map

package/dist/esm/menu/DockPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPosition.d.ts","sourceRoot":"","sources":["../../../menu/DockPosition.ts"],"names":[],"mappings":"AAWA,oBAAY,YAAY;IAIpB,GAAG,QAAQ;IAKX,MAAM,WAAW;IAKjB,IAAI,SAAS;IAKb,KAAK,UAAU;CAClB"}

package/dist/esm/menu/DockPosition.js

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The edge a {@link Dock} is anchored to.
+ *
+ * This is an enum rather than a union of string literals so the four edges are discoverable from the type
+ * itself and a `switch` over them stays exhaustive: adding a fifth edge becomes a compile error at every
+ * place that maps an edge onto a position, instead of a silently missing case. The values are the same
+ * lowercase words a screen authors, so an authored `position` maps straight onto a member.
+ */ var DockPosition = /*#__PURE__*/ function(DockPosition) {
+    /**
+     * Anchored to the top edge, laid out across.
+     */ DockPosition["Top"] = "top";
+    /**
+     * Anchored to the bottom edge, laid out across. The macOS-style default.
+     */ DockPosition["Bottom"] = "bottom";
+    /**
+     * Anchored to the left edge, laid out down.
+     */ DockPosition["Left"] = "left";
+    /**
+     * Anchored to the right edge, laid out down.
+     */ DockPosition["Right"] = "right";
+    return DockPosition;
+}({});
+
+export { DockPosition };
+//# sourceMappingURL=DockPosition.js.map

package/dist/esm/menu/DockPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPosition.js","sources":["../../../menu/DockPosition.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\n/**\n * The edge a {@link Dock} is anchored to.\n *\n * This is an enum rather than a union of string literals so the four edges are discoverable from the type\n * itself and a `switch` over them stays exhaustive: adding a fifth edge becomes a compile error at every\n * place that maps an edge onto a position, instead of a silently missing case. The values are the same\n * lowercase words a screen authors, so an authored `position` maps straight onto a member.\n */\nexport enum DockPosition {\n    /**\n     * Anchored to the top edge, laid out across.\n     */\n    Top = 'top',\n\n    /**\n     * Anchored to the bottom edge, laid out across. The macOS-style default.\n     */\n    Bottom = 'bottom',\n\n    /**\n     * Anchored to the left edge, laid out down.\n     */\n    Left = 'left',\n\n    /**\n     * Anchored to the right edge, laid out down.\n     */\n    Right = 'right',\n}\n"],"names":["DockPosition"],"mappings":"AAAA;AACA;AAEA;;;;;;;IAQO,IAAKA,YAAAA,iBAAAA,SAAAA,YAAAA,EAAAA;AACR;;AAEC,QAAA,YAAA,CAAA,KAAA,CAAA,GAAA,KAAA;AAGD;;AAEC,QAAA,YAAA,CAAA,QAAA,CAAA,GAAA,QAAA;AAGD;;AAEC,QAAA,YAAA,CAAA,MAAA,CAAA,GAAA,MAAA;AAGD;;AAEC,QAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAA;AAlBOA,IAAAA,OAAAA,YAAAA;AAoBX,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/menu/MegaMenu.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { MenuItem } from '../MenuItem';
+export interface MegaMenuProps extends HTMLAttributes<HTMLDivElement> {
+    items?: MenuItem[];
+}
+export declare function MegaMenu({ items, ...rest }: MegaMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=MegaMenu.d.ts.map

package/dist/esm/menu/MegaMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenu.d.ts","sourceRoot":"","sources":["../../../menu/MegaMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,cAAc,EAAuB,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAqCvC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IAKjE,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;CACtB;AAqBD,wBAAgB,QAAQ,CAAC,EAAE,KAAU,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BAqE9D"}

package/dist/esm/menu/MegaMenu.js

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

package/dist/esm/menu/MegaMenu.js.map

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

package/dist/esm/menu/MenuGallery.stories.d.ts

@@ -16,4 +16,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Gallery: Story;
+export declare const Unconfigured: Story;
 //# sourceMappingURL=MenuGallery.stories.d.ts.map

package/dist/esm/menu/MenuGallery.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuGallery.stories.d.ts","sourceRoot":"","sources":["../../../menu/MenuGallery.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;QAKF,MAAM;QACN,IAAI;YAAI,WAAW;gBAAI,SAAS;;;;CAEC,CAAC;eAE3B,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC"}
+{"version":3,"file":"MenuGallery.stories.d.ts","sourceRoot":"","sources":["../../../menu/MenuGallery.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;QAKF,MAAM;QACN,IAAI;YACA,WAAW;gBACP,SAAS;;;;CAKgB,CAAC;eAE3B,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC"}