@cratis/scene.primereact 1.1.0 → 3.0.0

package/dist/cjs/form/PrimeTreeSelect.js

@@ -2,22 +2,31 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var treeselect = require('primereact/treeselect');
+var TreeSelect = require('./TreeSelect.js');
 var properties = require('../properties.js');
 var treeNodes = require('../treeNodes.js');
 
 /**
  * The `PrimeReact:treeSelect` component - a dropdown whose choices are a hierarchy.
+ *
+ * The abstract name outlived the component: PrimeReact 11 removed `TreeSelect` with no replacement and no
+ * headless hook, so what this adapts is {@link TreeSelect}, this package's own, built from v11's
+ * `Popover` and `Tree`. Keeping the name is the point - a screen that already says `treeSelect` neither
+ * knows nor needs to know that the thing behind it changed owner.
+ *
+ * v10's `filter` property is not read, because the replacement does not filter; see {@link TreeSelect}
+ * for what else was left out and why.
  */ function PrimeTreeSelect({ element }) {
     const [value, setValue] = react.useState(properties.stringProperty(element, 'value'));
-    return /*#__PURE__*/ jsxRuntime.jsx(treeselect.TreeSelect, {
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
         "data-scene-id": element.id,
-        value: value,
-        onChange: (event)=>setValue(typeof event.value === 'string' ? event.value : undefined),
-        options: treeNodes.treeNodesProperty(element, 'options'),
-        placeholder: properties.stringProperty(element, 'placeholder', 'Select'),
-        filter: properties.booleanProperty(element, 'filter', false),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        children: /*#__PURE__*/ jsxRuntime.jsx(TreeSelect.TreeSelect, {
+            value: value,
+            onChange: setValue,
+            options: treeNodes.treeNodesProperty(element, 'options'),
+            placeholder: properties.stringProperty(element, 'placeholder', 'Select'),
+            disabled: properties.booleanProperty(element, 'disabled', false)
+        })
     });
 }
 

package/dist/cjs/form/PrimeTreeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeTreeSelect.js","sources":["../../../form/PrimeTreeSelect.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 { TreeSelect } from 'primereact/treeselect';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\nimport { treeNodesProperty } from '../treeNodes';\n\n/**\n * The `PrimeReact:treeSelect` component - a dropdown whose choices are a hierarchy.\n */\nexport function PrimeTreeSelect({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));\n    return (\n        <TreeSelect\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(typeof event.value === 'string' ? event.value : undefined)}\n            options={treeNodesProperty(element, 'options')}\n            placeholder={stringProperty(element, 'placeholder', 'Select')}\n            filter={booleanProperty(element, 'filter', false)}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeTreeSelect","element","value","setValue","useState","stringProperty","_jsx","TreeSelect","data-scene-id","id","onChange","event","undefined","options","treeNodesProperty","placeholder","filter","booleanProperty","disabled"],"mappings":";;;;;;;;AASA;;AAEC,IACM,SAASA,eAAAA,CAAgB,EAAEC,OAAO,EAA4B,EAAA;AACjE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA6BC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AAC/E,IAAA,qBACIK,cAAA,CAACC,qBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;QACPQ,QAAAA,EAAU,CAACC,KAAAA,GAAUR,QAAAA,CAAS,OAAOQ,KAAAA,CAAMT,KAAK,KAAK,QAAA,GAAWS,KAAAA,CAAMT,KAAK,GAAGU,SAAAA,CAAAA;AAC9EC,QAAAA,OAAAA,EAASC,4BAAkBb,OAAAA,EAAS,SAAA,CAAA;QACpCc,WAAAA,EAAaV,yBAAAA,CAAeJ,SAAS,aAAA,EAAe,QAAA,CAAA;QACpDe,MAAAA,EAAQC,0BAAAA,CAAgBhB,SAAS,QAAA,EAAU,KAAA,CAAA;QAC3CiB,QAAAA,EAAUD,0BAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeTreeSelect.js","sources":["../../../form/PrimeTreeSelect.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 { RegisteredComponentProps } from '@cratis/scene.react';\nimport { TreeSelect } from './TreeSelect';\nimport { booleanProperty, stringProperty } from '../properties';\nimport { treeNodesProperty } from '../treeNodes';\n\n/**\n * The `PrimeReact:treeSelect` component - a dropdown whose choices are a hierarchy.\n *\n * The abstract name outlived the component: PrimeReact 11 removed `TreeSelect` with no replacement and no\n * headless hook, so what this adapts is {@link TreeSelect}, this package's own, built from v11's\n * `Popover` and `Tree`. Keeping the name is the point - a screen that already says `treeSelect` neither\n * knows nor needs to know that the thing behind it changed owner.\n *\n * v10's `filter` property is not read, because the replacement does not filter; see {@link TreeSelect}\n * for what else was left out and why.\n */\nexport function PrimeTreeSelect({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));\n    return (\n        <div data-scene-id={element.id}>\n            <TreeSelect\n                value={value}\n                onChange={setValue}\n                options={treeNodesProperty(element, 'options')}\n                placeholder={stringProperty(element, 'placeholder', 'Select')}\n                disabled={booleanProperty(element, 'disabled', false)}\n            />\n        </div>\n    );\n}\n"],"names":["PrimeTreeSelect","element","value","setValue","useState","stringProperty","_jsx","div","data-scene-id","id","TreeSelect","onChange","options","treeNodesProperty","placeholder","disabled","booleanProperty"],"mappings":";;;;;;;;AASA;;;;;;;;;;AAUC,IACM,SAASA,eAAAA,CAAgB,EAAEC,OAAO,EAA4B,EAAA;AACjE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA6BC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AAC/E,IAAA,qBACIK,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;AAC1B,QAAA,QAAA,gBAAAH,cAAA,CAACI,qBAAAA,EAAAA;YACGR,KAAAA,EAAOA,KAAAA;YACPS,QAAAA,EAAUR,QAAAA;AACVS,YAAAA,OAAAA,EAASC,4BAAkBZ,OAAAA,EAAS,SAAA,CAAA;YACpCa,WAAAA,EAAaT,yBAAAA,CAAeJ,SAAS,aAAA,EAAe,QAAA,CAAA;YACpDc,QAAAA,EAAUC,0BAAAA,CAAgBf,SAAS,UAAA,EAAY,KAAA;;;AAI/D;;;;"}

package/dist/cjs/form/TreeSelect.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var popover = require('primereact/popover');
+var tree = require('primereact/tree');
+
+/**
+ * A dropdown whose choices are a hierarchy - Cratis-owned, because PrimeReact 11 removed `TreeSelect`
+ * outright and left neither a replacement component nor a headless hook to build one from.
+ *
+ * It is assembled from the two v11 pieces that did survive and together cover the behavior: `Popover`
+ * provides the trigger, the portal and the outside-click and Escape handling, and `Tree` provides the
+ * node list, the expand/collapse state and keyboard navigation. Nothing here re-implements either - the
+ * component is the seam between them, plus the translation from Scene's {@link TreeNode} to the
+ * `TreeNodeData` the tree wants.
+ *
+ * What it deliberately does not carry over from v10, so that no caller is misled into expecting it:
+ * **checkbox multi-select** - selection is single, `onChange` yields one key, and there is no partial or
+ * "n selected" state to reason about; and **filtering** - v10's `filter` prop searched the node labels
+ * and rebuilt the visible tree around the matches, which is a real amount of behavior (match, keep
+ * ancestors, force-expand, restore on clear) and belongs in the component only once something actually
+ * needs it.
+ */ function TreeSelect({ value, options, placeholder, disabled, onChange }) {
+    const [open, setOpen] = react.useState(false);
+    const nodes = react.useMemo(()=>toTreeNodeData(options), [
+        options
+    ]);
+    const label = findLabel(nodes, value);
+    return /*#__PURE__*/ jsxRuntime.jsxs(popover.Popover.Root, {
+        open: open,
+        onOpenChange: (event)=>setOpen(event.value === true),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(popover.Popover.Trigger, {
+                disabled: disabled,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        children: label ?? placeholder
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("i", {
+                        className: "pi pi-chevron-down"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(popover.Popover.Portal, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(popover.Popover.Positioner, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(popover.Popover.Popup, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(popover.Popover.Content, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(tree.Tree.Root, {
+                                value: nodes,
+                                selectionMode: "single",
+                                selectionKeys: value === undefined ? {} : {
+                                    [value]: true
+                                },
+                                onSelectionChange: (event)=>{
+                                    const selected = Object.keys(event.value).find((key)=>event.value[key] === true);
+                                    if (selected === undefined) return;
+                                    onChange?.(selected);
+                                    setOpen(false);
+                                },
+                                children: /*#__PURE__*/ jsxRuntime.jsx(tree.Tree.Nodes, {
+                                    children: (row)=>/*#__PURE__*/ jsxRuntime.jsx(tree.Tree.Node, {
+                                            uKey: row.node.key,
+                                            children: /*#__PURE__*/ jsxRuntime.jsxs(tree.Tree.Content, {
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx(tree.Tree.Toggle, {
+                                                        children: /*#__PURE__*/ jsxRuntime.jsx(tree.Tree.ToggleIndicator, {
+                                                            children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                                                className: row.expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'
+                                                            })
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx(tree.Tree.Label, {
+                                                        children: row.node.label
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                })
+                            })
+                        })
+                    })
+                })
+            })
+        ]
+    });
+}
+/**
+ * Converts Scene's {@link TreeNode} model into the one PrimeReact 11's `Tree` reads.
+ *
+ * The two shapes agree on everything that matters except one thing: `key` is optional on a Scene node and
+ * required on a PrimeReact one, because the tree keys expansion and selection off it. A missing key is
+ * synthesized from the node's position, which is unique and stable across re-renders - the same rule
+ * `toTreeNodes` applies, repeated here so this component is correct even when handed nodes that did not
+ * come through it.
+ *
+ * @param nodes The Scene nodes to convert.
+ * @param parentKey The key of the node these belong to, used to build unique child keys.
+ * @returns The converted nodes, in order.
+ */ function toTreeNodeData(nodes, parentKey = '') {
+    return nodes.map((node, index)=>{
+        const key = node.key ?? (parentKey === '' ? `${index}` : `${parentKey}-${index}`);
+        return {
+            key,
+            label: node.label,
+            icon: node.icon,
+            children: node.children === undefined ? undefined : toTreeNodeData(node.children, key)
+        };
+    });
+}
+/**
+ * Finds the label to show on the trigger for a selected key.
+ *
+ * The selection is a key rather than a node because that is all the tree reports, so the label has to be
+ * looked back up - and it has to search the whole hierarchy, since the selected node is very rarely a
+ * root one.
+ *
+ * @param nodes The converted nodes to search.
+ * @param key The selected key, or `undefined` when nothing is selected.
+ * @returns The node's label, or `undefined` when nothing is selected or the key matches no node.
+ */ function findLabel(nodes, key) {
+    if (key === undefined) return undefined;
+    for (const node of nodes){
+        if (node.key === key) return node.label;
+        const found = node.children === undefined ? undefined : findLabel(node.children, key);
+        if (found !== undefined) return found;
+    }
+    return undefined;
+}
+
+exports.TreeSelect = TreeSelect;
+//# sourceMappingURL=TreeSelect.js.map

package/dist/cjs/form/TreeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSelect.js","sources":["../../../form/TreeSelect.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, useMemo, useState } from 'react';\nimport { Popover } from 'primereact/popover';\nimport { Tree, type TreeNodeData } from 'primereact/tree';\nimport { TreeNode } from '../TreeNode';\n\n/**\n * What a {@link TreeSelect} needs from its host.\n *\n * Deliberately the small subset of PrimeReact 10's `TreeSelect` that a Scene element can actually author.\n * The component is Cratis-owned (see {@link TreeSelect}), so this is a promise this package has to keep\n * on its own - every prop added here is one more thing to implement, and a hierarchy picker earns its\n * keep long before it grows options.\n */\nexport interface TreeSelectProps {\n    /**\n     * The key of the selected node. Controlled, because the only thing worth selecting from a tree is a\n     * node's identity and the host is what knows what to do with it.\n     */\n    value?: string;\n\n    /**\n     * The hierarchy to choose from, in Scene's own {@link TreeNode} shape rather than PrimeReact's -\n     * `TreeNode` is this package's type since v11 removed `primereact/treenode`, and translating it is\n     * this component's job rather than every caller's.\n     */\n    options: TreeNode[];\n\n    /**\n     * What the trigger shows when nothing is selected.\n     */\n    placeholder?: string;\n\n    /**\n     * Whether the trigger refuses to open.\n     */\n    disabled?: boolean;\n\n    /**\n     * Called with the newly selected node's key. Selecting also closes the panel, because a single-select\n     * picker has nothing left to ask once it has an answer.\n     */\n    onChange?: (value: string) => void;\n}\n\n/**\n * A dropdown whose choices are a hierarchy - Cratis-owned, because PrimeReact 11 removed `TreeSelect`\n * outright and left neither a replacement component nor a headless hook to build one from.\n *\n * It is assembled from the two v11 pieces that did survive and together cover the behavior: `Popover`\n * provides the trigger, the portal and the outside-click and Escape handling, and `Tree` provides the\n * node list, the expand/collapse state and keyboard navigation. Nothing here re-implements either - the\n * component is the seam between them, plus the translation from Scene's {@link TreeNode} to the\n * `TreeNodeData` the tree wants.\n *\n * What it deliberately does not carry over from v10, so that no caller is misled into expecting it:\n * **checkbox multi-select** - selection is single, `onChange` yields one key, and there is no partial or\n * \"n selected\" state to reason about; and **filtering** - v10's `filter` prop searched the node labels\n * and rebuilt the visible tree around the matches, which is a real amount of behavior (match, keep\n * ancestors, force-expand, restore on clear) and belongs in the component only once something actually\n * needs it.\n */\nexport function TreeSelect({ value, options, placeholder, disabled, onChange }: TreeSelectProps) {\n    const [open, setOpen] = useState(false);\n    const nodes = useMemo(() => toTreeNodeData(options), [options]);\n    const label = findLabel(nodes, value);\n\n    return (\n        <Popover.Root open={open} onOpenChange={(event) => setOpen(event.value === true)}>\n            <Popover.Trigger disabled={disabled}>\n                <span>{label ?? placeholder}</span>\n                <i className='pi pi-chevron-down' />\n            </Popover.Trigger>\n            <Popover.Portal>\n                <Popover.Positioner>\n                    <Popover.Popup>\n                        <Popover.Content>\n                            <Tree.Root\n                                value={nodes}\n                                selectionMode='single'\n                                selectionKeys={value === undefined ? {} : { [value]: true }}\n                                onSelectionChange={(event) => {\n                                    const selected = Object.keys(event.value).find((key) => event.value[key] === true);\n                                    if (selected === undefined) return;\n                                    onChange?.(selected);\n                                    setOpen(false);\n                                }}>\n                                <Tree.Nodes>\n                                    {(row) => (\n                                        <Tree.Node uKey={row.node.key}>\n                                            <Tree.Content>\n                                                <Tree.Toggle>\n                                                    <Tree.ToggleIndicator>\n                                                        <i className={row.expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'} />\n                                                    </Tree.ToggleIndicator>\n                                                </Tree.Toggle>\n                                                <Tree.Label>{row.node.label}</Tree.Label>\n                                            </Tree.Content>\n                                        </Tree.Node>\n                                    )}\n                                </Tree.Nodes>\n                            </Tree.Root>\n                        </Popover.Content>\n                    </Popover.Popup>\n                </Popover.Positioner>\n            </Popover.Portal>\n        </Popover.Root>\n    );\n}\n\n/**\n * Converts Scene's {@link TreeNode} model into the one PrimeReact 11's `Tree` reads.\n *\n * The two shapes agree on everything that matters except one thing: `key` is optional on a Scene node and\n * required on a PrimeReact one, because the tree keys expansion and selection off it. A missing key is\n * synthesized from the node's position, which is unique and stable across re-renders - the same rule\n * `toTreeNodes` applies, repeated here so this component is correct even when handed nodes that did not\n * come through it.\n *\n * @param nodes The Scene nodes to convert.\n * @param parentKey The key of the node these belong to, used to build unique child keys.\n * @returns The converted nodes, in order.\n */\nfunction toTreeNodeData(nodes: TreeNode[], parentKey = ''): TreeNodeData[] {\n    return nodes.map((node, index) => {\n        const key = node.key ?? (parentKey === '' ? `${index}` : `${parentKey}-${index}`);\n        return {\n            key,\n            label: node.label,\n            icon: node.icon,\n            children: node.children === undefined ? undefined : toTreeNodeData(node.children, key),\n        };\n    });\n}\n\n/**\n * Finds the label to show on the trigger for a selected key.\n *\n * The selection is a key rather than a node because that is all the tree reports, so the label has to be\n * looked back up - and it has to search the whole hierarchy, since the selected node is very rarely a\n * root one.\n *\n * @param nodes The converted nodes to search.\n * @param key The selected key, or `undefined` when nothing is selected.\n * @returns The node's label, or `undefined` when nothing is selected or the key matches no node.\n */\nfunction findLabel(nodes: TreeNodeData[], key: string | undefined): ReactNode {\n    if (key === undefined) return undefined;\n    for (const node of nodes) {\n        if (node.key === key) return node.label;\n        const found = node.children === undefined ? undefined : findLabel(node.children, key);\n        if (found !== undefined) return found;\n    }\n\n    return undefined;\n}\n"],"names":["TreeSelect","value","options","placeholder","disabled","onChange","open","setOpen","useState","nodes","useMemo","toTreeNodeData","label","findLabel","_jsxs","Popover","Root","onOpenChange","event","Trigger","_jsx","span","i","className","Portal","Positioner","Popup","Content","Tree","selectionMode","selectionKeys","undefined","onSelectionChange","selected","Object","keys","find","key","Nodes","row","Node","uKey","node","Toggle","ToggleIndicator","expanded","Label","parentKey","map","index","icon","children","found"],"mappings":"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"}

package/dist/cjs/index.js

@@ -7,11 +7,11 @@ var PrimeButton = require('./button/PrimeButton.js');
 var PrimeSplitButton = require('./button/PrimeSplitButton.js');
 var PrimeSpeedDial = require('./button/PrimeSpeedDial.js');
 var PrimeButtonGroup = require('./button/PrimeButtonGroup.js');
+var SplitButton = require('./button/SplitButton.js');
 var PrimeInputText = require('./form/PrimeInputText.js');
 var PrimeInputTextarea = require('./form/PrimeInputTextarea.js');
 var PrimeInputNumber = require('./form/PrimeInputNumber.js');
 var PrimePassword = require('./form/PrimePassword.js');
-var PrimeInputMask = require('./form/PrimeInputMask.js');
 var PrimeFloatLabel = require('./form/PrimeFloatLabel.js');
 var PrimeIconField = require('./form/PrimeIconField.js');
 var PrimeDropdown = require('./form/PrimeDropdown.js');
@@ -28,20 +28,19 @@ var PrimeCalendar = require('./form/PrimeCalendar.js');
 var PrimeColorPicker = require('./form/PrimeColorPicker.js');
 var PrimeChips = require('./form/PrimeChips.js');
 var PrimeAutoComplete = require('./form/PrimeAutoComplete.js');
+var TreeSelect = require('./form/TreeSelect.js');
 var PrimeTreeSelect = require('./form/PrimeTreeSelect.js');
-var PrimeCascadeSelect = require('./form/PrimeCascadeSelect.js');
+var Column = require('./data/Column.js');
 var columnDefinitions = require('./data/columnDefinitions.js');
 var PrimeColumn = require('./data/PrimeColumn.js');
 var PrimeDataTable = require('./data/PrimeDataTable.js');
 var PrimeDataView = require('./data/PrimeDataView.js');
 var PrimeTree = require('./data/PrimeTree.js');
-var PrimeTreeTable = require('./data/PrimeTreeTable.js');
 var PrimeTimeline = require('./data/PrimeTimeline.js');
 var PrimePaginator = require('./data/PrimePaginator.js');
 var PrimeOrderList = require('./data/PrimeOrderList.js');
 var PrimePickList = require('./data/PrimePickList.js');
 var PrimeOrganizationChart = require('./data/PrimeOrganizationChart.js');
-var PrimeVirtualScroller = require('./data/PrimeVirtualScroller.js');
 var PrimeCard = require('./panel/PrimeCard.js');
 var PrimePanel = require('./panel/PrimePanel.js');
 var PrimeFieldset = require('./panel/PrimeFieldset.js');
@@ -52,11 +51,22 @@ var PrimeAccordion = require('./panel/PrimeAccordion.js');
 var PrimeTabView = require('./panel/PrimeTabView.js');
 var PrimeSplitter = require('./panel/PrimeSplitter.js');
 var PrimeStepper = require('./panel/PrimeStepper.js');
+var ConfirmDialog = require('./overlay/ConfirmDialog.js');
 var PrimeDialog = require('./overlay/PrimeDialog.js');
 var PrimeConfirmDialog = require('./overlay/PrimeConfirmDialog.js');
 var PrimeOverlayPanel = require('./overlay/PrimeOverlayPanel.js');
 var PrimeSidebar = require('./overlay/PrimeSidebar.js');
 var PrimeTooltip = require('./overlay/PrimeTooltip.js');
+var MenuItemContent = require('./menu/MenuItemContent.js');
+var MenuItemAction = require('./menu/MenuItemAction.js');
+var DockPosition = require('./menu/DockPosition.js');
+var Menubar = require('./menu/Menubar.js');
+var MegaMenu = require('./menu/MegaMenu.js');
+var TieredMenu = require('./menu/TieredMenu.js');
+var Steps = require('./menu/Steps.js');
+var TabMenu = require('./menu/TabMenu.js');
+var PanelMenu = require('./menu/PanelMenu.js');
+var Dock = require('./menu/Dock.js');
 var PrimeMenu = require('./menu/PrimeMenu.js');
 var PrimeMenubar = require('./menu/PrimeMenubar.js');
 var PrimeBreadcrumb = require('./menu/PrimeBreadcrumb.js');
@@ -73,6 +83,7 @@ var PrimeToast = require('./messages/PrimeToast.js');
 var PrimeImage = require('./media/PrimeImage.js');
 var PrimeGalleria = require('./media/PrimeGalleria.js');
 var PrimeCarousel = require('./media/PrimeCarousel.js');
+var Image = require('./media/Image.js');
 var PrimeAvatar = require('./misc/PrimeAvatar.js');
 var PrimeBadge = require('./misc/PrimeBadge.js');
 var PrimeChip = require('./misc/PrimeChip.js');
@@ -84,16 +95,18 @@ var PrimeScrollTop = require('./misc/PrimeScrollTop.js');
 var PrimeBlockUI = require('./misc/PrimeBlockUI.js');
 var PrimeInplace = require('./misc/PrimeInplace.js');
 var PrimeTerminal = require('./misc/PrimeTerminal.js');
+var BlockUI = require('./misc/BlockUI.js');
+var ScrollTop = require('./misc/ScrollTop.js');
 var PrimeText = require('./screen/PrimeText.js');
 var PrimeTitle = require('./screen/PrimeTitle.js');
 var PrimeField = require('./screen/PrimeField.js');
 var PrimeSection = require('./screen/PrimeSection.js');
 var PrimeSummary = require('./screen/PrimeSummary.js');
 var PrimeAction = require('./screen/PrimeAction.js');
+var PrimeReactThemeFamily = require('./theme/PrimeReactThemeFamily.js');
 var themePresets = require('./theme/themePresets.js');
 var primeReactThemes = require('./theme/primeReactThemes.js');
-var primeReactThemeStylesheet = require('./theme/primeReactThemeStylesheet.js');
-var applyPrimeReactTheme = require('./theme/applyPrimeReactTheme.js');
+var primeReactThemePreset = require('./theme/primeReactThemePreset.js');
 var usePrimeReactTheme = require('./theme/usePrimeReactTheme.js');
 var primeReactComponents = require('./primeReactComponents.js');
 var primeReactPackage = require('./primeReactPackage.js');
@@ -105,6 +118,7 @@ exports.booleanProperty = properties.booleanProperty;
 exports.numberProperty = properties.numberProperty;
 exports.optionsProperty = properties.optionsProperty;
 exports.recordArrayProperty = properties.recordArrayProperty;
+exports.severityProperty = properties.severityProperty;
 exports.stringArrayProperty = properties.stringArrayProperty;
 exports.stringProperty = properties.stringProperty;
 exports.menuItemsProperty = menuItems.menuItemsProperty;
@@ -115,11 +129,11 @@ exports.PrimeButton = PrimeButton.PrimeButton;
 exports.PrimeSplitButton = PrimeSplitButton.PrimeSplitButton;
 exports.PrimeSpeedDial = PrimeSpeedDial.PrimeSpeedDial;
 exports.PrimeButtonGroup = PrimeButtonGroup.PrimeButtonGroup;
+exports.SplitButton = SplitButton.SplitButton;
 exports.PrimeInputText = PrimeInputText.PrimeInputText;
 exports.PrimeInputTextarea = PrimeInputTextarea.PrimeInputTextarea;
 exports.PrimeInputNumber = PrimeInputNumber.PrimeInputNumber;
 exports.PrimePassword = PrimePassword.PrimePassword;
-exports.PrimeInputMask = PrimeInputMask.PrimeInputMask;
 exports.PrimeFloatLabel = PrimeFloatLabel.PrimeFloatLabel;
 exports.PrimeIconField = PrimeIconField.PrimeIconField;
 exports.PrimeDropdown = PrimeDropdown.PrimeDropdown;
@@ -136,20 +150,19 @@ exports.PrimeCalendar = PrimeCalendar.PrimeCalendar;
 exports.PrimeColorPicker = PrimeColorPicker.PrimeColorPicker;
 exports.PrimeChips = PrimeChips.PrimeChips;
 exports.PrimeAutoComplete = PrimeAutoComplete.PrimeAutoComplete;
+exports.TreeSelect = TreeSelect.TreeSelect;
 exports.PrimeTreeSelect = PrimeTreeSelect.PrimeTreeSelect;
-exports.PrimeCascadeSelect = PrimeCascadeSelect.PrimeCascadeSelect;
+exports.Column = Column.Column;
 exports.columnDefinitions = columnDefinitions.columnDefinitions;
 exports.PrimeColumn = PrimeColumn.PrimeColumn;
 exports.PrimeDataTable = PrimeDataTable.PrimeDataTable;
 exports.PrimeDataView = PrimeDataView.PrimeDataView;
 exports.PrimeTree = PrimeTree.PrimeTree;
-exports.PrimeTreeTable = PrimeTreeTable.PrimeTreeTable;
 exports.PrimeTimeline = PrimeTimeline.PrimeTimeline;
 exports.PrimePaginator = PrimePaginator.PrimePaginator;
 exports.PrimeOrderList = PrimeOrderList.PrimeOrderList;
 exports.PrimePickList = PrimePickList.PrimePickList;
 exports.PrimeOrganizationChart = PrimeOrganizationChart.PrimeOrganizationChart;
-exports.PrimeVirtualScroller = PrimeVirtualScroller.PrimeVirtualScroller;
 exports.PrimeCard = PrimeCard.PrimeCard;
 exports.PrimePanel = PrimePanel.PrimePanel;
 exports.PrimeFieldset = PrimeFieldset.PrimeFieldset;
@@ -160,11 +173,22 @@ exports.PrimeAccordion = PrimeAccordion.PrimeAccordion;
 exports.PrimeTabView = PrimeTabView.PrimeTabView;
 exports.PrimeSplitter = PrimeSplitter.PrimeSplitter;
 exports.PrimeStepper = PrimeStepper.PrimeStepper;
+exports.ConfirmDialog = ConfirmDialog.ConfirmDialog;
 exports.PrimeDialog = PrimeDialog.PrimeDialog;
 exports.PrimeConfirmDialog = PrimeConfirmDialog.PrimeConfirmDialog;
 exports.PrimeOverlayPanel = PrimeOverlayPanel.PrimeOverlayPanel;
 exports.PrimeSidebar = PrimeSidebar.PrimeSidebar;
 exports.PrimeTooltip = PrimeTooltip.PrimeTooltip;
+exports.MenuItemContent = MenuItemContent.MenuItemContent;
+exports.MenuItemAction = MenuItemAction.MenuItemAction;
+exports.DockPosition = DockPosition.DockPosition;
+exports.Menubar = Menubar.Menubar;
+exports.MegaMenu = MegaMenu.MegaMenu;
+exports.TieredMenu = TieredMenu.TieredMenu;
+exports.Steps = Steps.Steps;
+exports.TabMenu = TabMenu.TabMenu;
+exports.PanelMenu = PanelMenu.PanelMenu;
+exports.Dock = Dock.Dock;
 exports.PrimeMenu = PrimeMenu.PrimeMenu;
 exports.PrimeMenubar = PrimeMenubar.PrimeMenubar;
 exports.PrimeBreadcrumb = PrimeBreadcrumb.PrimeBreadcrumb;
@@ -181,6 +205,7 @@ exports.PrimeToast = PrimeToast.PrimeToast;
 exports.PrimeImage = PrimeImage.PrimeImage;
 exports.PrimeGalleria = PrimeGalleria.PrimeGalleria;
 exports.PrimeCarousel = PrimeCarousel.PrimeCarousel;
+exports.Image = Image.Image;
 exports.PrimeAvatar = PrimeAvatar.PrimeAvatar;
 exports.PrimeBadge = PrimeBadge.PrimeBadge;
 exports.PrimeChip = PrimeChip.PrimeChip;
@@ -192,20 +217,23 @@ exports.PrimeScrollTop = PrimeScrollTop.PrimeScrollTop;
 exports.PrimeBlockUI = PrimeBlockUI.PrimeBlockUI;
 exports.PrimeInplace = PrimeInplace.PrimeInplace;
 exports.PrimeTerminal = PrimeTerminal.PrimeTerminal;
+exports.BlockUI = BlockUI.BlockUI;
+exports.ScrollTop = ScrollTop.ScrollTop;
 exports.PrimeText = PrimeText.PrimeText;
 exports.PrimeTitle = PrimeTitle.PrimeTitle;
 exports.PrimeField = PrimeField.PrimeField;
 exports.PrimeSection = PrimeSection.PrimeSection;
 exports.PrimeSummary = PrimeSummary.PrimeSummary;
 exports.PrimeAction = PrimeAction.PrimeAction;
+exports.PrimeReactThemeFamily = PrimeReactThemeFamily.PrimeReactThemeFamily;
 exports.themePresets = themePresets.themePresets;
 exports.primeReactTheme = primeReactThemes.primeReactTheme;
 exports.primeReactThemeCompatibility = primeReactThemes.primeReactThemeCompatibility;
+exports.primeReactThemeLicense = primeReactThemes.primeReactThemeLicense;
 exports.primeReactThemeNames = primeReactThemes.primeReactThemeNames;
 exports.primeReactThemes = primeReactThemes.primeReactThemes;
-exports.primeReactThemeStylesheet = primeReactThemeStylesheet.primeReactThemeStylesheet;
-exports.themeLinkElementId = primeReactThemeStylesheet.themeLinkElementId;
-exports.applyPrimeReactTheme = applyPrimeReactTheme.applyPrimeReactTheme;
+exports.primeReactThemePreset = primeReactThemePreset.primeReactThemePreset;
+exports.primeReactDarkModeClass = usePrimeReactTheme.primeReactDarkModeClass;
 exports.usePrimeReactTheme = usePrimeReactTheme.usePrimeReactTheme;
 exports.primeReactComponents = primeReactComponents.primeReactComponents;
 exports.primeReactPackage = primeReactPackage.primeReactPackage;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/media/Image.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var dialog = require('primereact/dialog');
+
+/**
+ * A picture, optionally openable full size in an overlay.
+ *
+ * Cratis owns this component. PrimeReact 10 had `Image`; PrimeReact 11 removed it with no replacement and
+ * no headless hook, while `image` remains a name this package's manifest publishes. The plain case is a
+ * plain `img` - there was never much to a themed image - and the preview reuses PrimeReact 11's `Dialog`,
+ * which survived, so the overlay keeps the application's focus trapping, escape handling and stacking
+ * rather than growing a second, worse implementation of all three here.
+ *
+ * With no `src`, an empty element is rendered rather than a broken `img`. That keeps whatever identifying
+ * attributes the caller passed in the document, which is what lets a design-time tool still find and
+ * select the element it has not finished authoring.
+ *
+ * What it deliberately does not carry over from v10: the preview toolbar - zoom in and out, rotate, flip,
+ * download - which is a viewer rather than an image and is exactly what the `galleria` component is for;
+ * `indicatorIcon` and the hover indicator overlay; the `imageStyle` / `previewStyle` prop pairs, since
+ * `className` and `style` already reach the element; and `zoomInDisabled` / `zoomOutDisabled`, which only
+ * ever meant anything to that toolbar.
+ */ function Image({ src, alt = '', width, height, preview = false, className, ...rest }) {
+    const [open, setOpen] = react.useState(false);
+    if (src === undefined || src === '') return /*#__PURE__*/ jsxRuntime.jsx("span", {
+        ...rest,
+        className: className
+    });
+    const image = /*#__PURE__*/ jsxRuntime.jsx("img", {
+        src: src,
+        alt: alt,
+        width: width,
+        height: height,
+        className: "max-w-full"
+    });
+    if (!preview) {
+        return /*#__PURE__*/ jsxRuntime.jsx("span", {
+            ...rest,
+            className: className,
+            children: image
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs("span", {
+        ...rest,
+        className: className,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                type: "button",
+                className: "cursor-zoom-in border-0 bg-transparent p-0",
+                "aria-label": alt === '' ? 'Open image preview' : `Open preview of ${alt}`,
+                onClick: ()=>setOpen(true),
+                children: image
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Root, {
+                open: open,
+                onOpenChange: (event)=>setOpen(event.value === true),
+                modal: true,
+                dismissable: true,
+                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, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsxs(dialog.Dialog.Header, {
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Title, {
+                                                children: alt === '' ? 'Preview' : alt
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Close, {
+                                                "aria-label": "Close preview",
+                                                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                                    className: "pi pi-times",
+                                                    "aria-hidden": "true"
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(dialog.Dialog.Content, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx("img", {
+                                            src: src,
+                                            alt: alt,
+                                            className: "max-h-[80vh] max-w-[80vw]"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+exports.Image = Image;
+//# sourceMappingURL=Image.js.map

package/dist/cjs/media/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sources":["../../../media/Image.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { HTMLAttributes, useState } from 'react';\nimport { Dialog } from 'primereact/dialog';\n\n/**\n * Configuration for {@link Image}.\n */\nexport interface ImageProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {\n    /**\n     * Where the picture comes from. Optional because a screen under construction routinely names an image\n     * before it has one, and that is not a failure worth taking a page down for.\n     */\n    src?: string;\n\n    /**\n     * The alternative text. Defaults to empty, which marks the image decorative - an image with no\n     * authored alternative is decorative until someone says otherwise, and inventing text from the file\n     * name would put a URL fragment in front of a screen reader.\n     */\n    alt?: string;\n\n    /**\n     * The rendered width, as any CSS length or a bare pixel count.\n     */\n    width?: string;\n\n    /**\n     * The rendered height, as any CSS length or a bare pixel count.\n     */\n    height?: string;\n\n    /**\n     * Whether clicking the image opens it full size in an overlay. Off by default: a picture that grows\n     * when clicked is a promise, and one made on every thumbnail in a layout is usually a mistake.\n     */\n    preview?: boolean;\n}\n\n/**\n * A picture, optionally openable full size in an overlay.\n *\n * Cratis owns this component. PrimeReact 10 had `Image`; PrimeReact 11 removed it with no replacement and\n * no headless hook, while `image` remains a name this package's manifest publishes. The plain case is a\n * plain `img` - there was never much to a themed image - and the preview reuses PrimeReact 11's `Dialog`,\n * which survived, so the overlay keeps the application's focus trapping, escape handling and stacking\n * rather than growing a second, worse implementation of all three here.\n *\n * With no `src`, an empty element is rendered rather than a broken `img`. That keeps whatever identifying\n * attributes the caller passed in the document, which is what lets a design-time tool still find and\n * select the element it has not finished authoring.\n *\n * What it deliberately does not carry over from v10: the preview toolbar - zoom in and out, rotate, flip,\n * download - which is a viewer rather than an image and is exactly what the `galleria` component is for;\n * `indicatorIcon` and the hover indicator overlay; the `imageStyle` / `previewStyle` prop pairs, since\n * `className` and `style` already reach the element; and `zoomInDisabled` / `zoomOutDisabled`, which only\n * ever meant anything to that toolbar.\n */\nexport function Image({ src, alt = '', width, height, preview = false, className, ...rest }: ImageProps) {\n    const [open, setOpen] = useState(false);\n\n    if (src === undefined || src === '') return <span {...rest} className={className} />;\n\n    const image = <img src={src} alt={alt} width={width} height={height} className='max-w-full' />;\n\n    if (!preview) {\n        return (\n            <span {...rest} className={className}>\n                {image}\n            </span>\n        );\n    }\n\n    return (\n        <span {...rest} className={className}>\n            <button\n                type='button'\n                className='cursor-zoom-in border-0 bg-transparent p-0'\n                aria-label={alt === '' ? 'Open image preview' : `Open preview of ${alt}`}\n                onClick={() => setOpen(true)}>\n                {image}\n            </button>\n            <Dialog.Root open={open} onOpenChange={(event) => setOpen(event.value === true)} modal dismissable>\n                <Dialog.Portal>\n                    <Dialog.Backdrop />\n                    <Dialog.Positioner>\n                        <Dialog.Popup>\n                            <Dialog.Header>\n                                <Dialog.Title>{alt === '' ? 'Preview' : alt}</Dialog.Title>\n                                <Dialog.Close aria-label='Close preview'>\n                                    <i className='pi pi-times' aria-hidden='true' />\n                                </Dialog.Close>\n                            </Dialog.Header>\n                            <Dialog.Content>\n                                <img src={src} alt={alt} className='max-h-[80vh] max-w-[80vw]' />\n                            </Dialog.Content>\n                        </Dialog.Popup>\n                    </Dialog.Positioner>\n                </Dialog.Portal>\n            </Dialog.Root>\n        </span>\n    );\n}\n"],"names":["Image","src","alt","width","height","preview","className","rest","open","setOpen","useState","undefined","_jsx","span","image","img","_jsxs","button","type","aria-label","onClick","Dialog","Root","onOpenChange","event","value","modal","dismissable","Portal","Backdrop","Positioner","Popup","Header","Title","Close","i","aria-hidden","Content"],"mappings":";;;;;;AAwCA;;;;;;;;;;;;;;;;;;AAkBC,IACM,SAASA,KAAAA,CAAM,EAAEC,GAAG,EAAEC,MAAM,EAAE,EAAEC,KAAK,EAAEC,MAAM,EAAEC,OAAAA,GAAU,KAAK,EAAEC,SAAS,EAAE,GAAGC,IAAAA,EAAkB,EAAA;AACnG,IAAA,MAAM,CAACC,IAAAA,EAAMC,OAAAA,CAAQ,GAAGC,cAAAA,CAAS,KAAA,CAAA;AAEjC,IAAA,IAAIT,GAAAA,KAAQU,SAAAA,IAAaV,GAAAA,KAAQ,EAAA,EAAI,qBAAOW,cAAA,CAACC,MAAAA,EAAAA;AAAM,QAAA,GAAGN,IAAI;QAAED,SAAAA,EAAWA;;AAEvE,IAAA,MAAMQ,sBAAQF,cAAA,CAACG,KAAAA,EAAAA;QAAId,GAAAA,EAAKA,GAAAA;QAAKC,GAAAA,EAAKA,GAAAA;QAAKC,KAAAA,EAAOA,KAAAA;QAAOC,MAAAA,EAAQA,MAAAA;QAAQE,SAAAA,EAAU;;AAE/E,IAAA,IAAI,CAACD,OAAAA,EAAS;AACV,QAAA,qBACIO,cAAA,CAACC,MAAAA,EAAAA;AAAM,YAAA,GAAGN,IAAI;YAAED,SAAAA,EAAWA,SAAAA;AACtBQ,YAAAA,QAAAA,EAAAA;;AAGb,IAAA;AAEA,IAAA,qBACIE,eAAA,CAACH,MAAAA,EAAAA;AAAM,QAAA,GAAGN,IAAI;QAAED,SAAAA,EAAWA,SAAAA;;0BACvBM,cAAA,CAACK,QAAAA,EAAAA;gBACGC,IAAAA,EAAK,QAAA;gBACLZ,SAAAA,EAAU,4CAAA;AACVa,gBAAAA,YAAAA,EAAYjB,QAAQ,EAAA,GAAK,oBAAA,GAAuB,CAAC,gBAAgB,EAAEA,GAAAA,CAAAA,CAAK;AACxEkB,gBAAAA,OAAAA,EAAS,IAAMX,OAAAA,CAAQ,IAAA,CAAA;AACtBK,gBAAAA,QAAAA,EAAAA;;AAEL,0BAAAF,cAAA,CAACS,cAAOC,IAAI,EAAA;gBAACd,IAAAA,EAAMA,IAAAA;AAAMe,gBAAAA,YAAAA,EAAc,CAACC,KAAAA,GAAUf,OAAAA,CAAQe,KAAAA,CAAMC,KAAK,KAAK,IAAA,CAAA;gBAAOC,KAAK,EAAA,IAAA;gBAACC,WAAW,EAAA,IAAA;wCAC9FX,eAAA,CAACK,cAAOO,MAAM,EAAA;;AACV,sCAAAhB,cAAA,CAACS,cAAOQ,QAAQ,EAAA,EAAA,CAAA;AAChB,sCAAAjB,cAAA,CAACS,cAAOS,UAAU,EAAA;oDACdd,eAAA,CAACK,cAAOU,KAAK,EAAA;;AACT,kDAAAf,eAAA,CAACK,cAAOW,MAAM,EAAA;;AACV,0DAAApB,cAAA,CAACS,cAAOY,KAAK,EAAA;AAAE/B,gDAAAA,QAAAA,EAAAA,GAAAA,KAAQ,KAAK,SAAA,GAAYA;;AACxC,0DAAAU,cAAA,CAACS,cAAOa,KAAK,EAAA;gDAACf,YAAAA,EAAW,eAAA;AACrB,gDAAA,QAAA,gBAAAP,cAAA,CAACuB,GAAAA,EAAAA;oDAAE7B,SAAAA,EAAU,aAAA;oDAAc8B,aAAAA,EAAY;;;;;AAG/C,kDAAAxB,cAAA,CAACS,cAAOgB,OAAO,EAAA;AACX,wCAAA,QAAA,gBAAAzB,cAAA,CAACG,KAAAA,EAAAA;4CAAId,GAAAA,EAAKA,GAAAA;4CAAKC,GAAAA,EAAKA,GAAAA;4CAAKI,SAAAA,EAAU;;;;;;;;;;;AAQnE;;;;"}

package/dist/cjs/media/PrimeCarousel.js

@@ -7,30 +7,64 @@ var properties = require('../properties.js');
 /**
  * The `PrimeReact:carousel` component - a row of items paged through horizontally.
  *
- * Supplies an item template from the `titleField` and `descriptionField` properties, for the same reason
- * `dataView` does: without one, every item renders empty.
+ * The item body is built from the `titleField` and `descriptionField` properties, for the same reason
+ * `dataView` does it: the element carries records, not markup, and something has to decide which two
+ * fields a reader sees. PrimeReact 11 takes that as children rather than as an `itemTemplate` callback,
+ * which is why the mapping is written out here instead of passed in.
+ *
+ * v10's `numScroll` has no v11 counterpart and is not read: the new carousel scrolls by a page, and a page
+ * is `numVisible` items. Honoring a `numScroll` that differs from it would mean re-implementing paging
+ * against a component that has its own.
+ *
+ * Navigation and page indicators appear only when there is more than one page's worth of items. A control
+ * that cannot do anything is worse than an absent one - it invites a click and answers with nothing.
  */ function PrimeCarousel({ element }) {
+    const items = properties.recordArrayProperty(element, 'items');
     const titleField = properties.stringProperty(element, 'titleField', 'title');
     const descriptionField = properties.stringProperty(element, 'descriptionField', 'description');
-    return /*#__PURE__*/ jsxRuntime.jsx(carousel.Carousel, {
+    const numVisible = properties.numberProperty(element, 'numVisible', 3);
+    return /*#__PURE__*/ jsxRuntime.jsxs(carousel.Carousel.Root, {
         "data-scene-id": element.id,
-        value: properties.recordArrayProperty(element, 'items'),
-        numVisible: properties.numberProperty(element, 'numVisible', 3),
-        numScroll: properties.numberProperty(element, 'numScroll', 1),
-        circular: properties.booleanProperty(element, 'circular', false),
-        itemTemplate: (item)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "m-2 flex flex-col gap-1 border p-3",
+        slidesPerPage: numVisible,
+        loop: properties.booleanProperty(element, 'circular', false),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(carousel.Carousel.Content, {
+                children: items.map((item, index)=>/*#__PURE__*/ jsxRuntime.jsx(carousel.Carousel.Item, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "m-2 flex flex-col gap-1 border p-3",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "font-semibold",
+                                    children: String(item[titleField] ?? '')
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "text-sm opacity-75",
+                                    children: String(item[descriptionField] ?? '')
+                                })
+                            ]
+                        })
+                    }, index))
+            }),
+            items.length > numVisible && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("span", {
-                        className: "font-semibold",
-                        children: String(item[titleField] ?? '')
+                    /*#__PURE__*/ jsxRuntime.jsx(carousel.Carousel.Prev, {
+                        "aria-label": "Previous items",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-chevron-left",
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(carousel.Carousel.Next, {
+                        "aria-label": "Next items",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-chevron-right",
+                            "aria-hidden": "true"
+                        })
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsx("span", {
-                        className: "text-sm opacity-75",
-                        children: String(item[descriptionField] ?? '')
-                    })
+                    /*#__PURE__*/ jsxRuntime.jsx(carousel.Carousel.Indicators, {})
                 ]
             })
+        ]
     });
 }