@cratis/scene.primereact 1.1.0 → 3.0.0

package/dist/esm/data/PrimeDataTable.js

@@ -1,35 +1,140 @@
-import { jsx } from 'react/jsx-runtime';
-import { Column } from 'primereact/column';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
 import { DataTable } from 'primereact/datatable';
 import { recordArrayProperty, numberProperty, stringProperty, booleanProperty } from '../properties.js';
+import { Column } from './Column.js';
 import { columnDefinitions } from './columnDefinitions.js';
 
 /**
  * The `PrimeReact:dataTable` component, also registered under Screenplay's `table` name so a screen
  * compiled from a `.play` file renders through this package without a translation step.
  *
- * Rows come from a `rows` property; columns come from nested `column` children, a `columns` property, or
- * are inferred from the first row - see `columnDefinitions`.
- */ function PrimeDataTable({ element }) {
+ * PrimeReact 11 turned the table inside out. Where PrimeReact 10 took `value` and a set of `Column`
+ * children and produced the whole table, PrimeReact 11 gives back a root that owns sorting, filtering and
+ * paging and a set of parts - container, table, head, rows, cells - that the caller arranges. So this
+ * adapter now writes out the table's structure itself, and the column concept it renders from is
+ * {@link Column}, which is Cratis-owned because PrimeReact 11 removed `primereact/column` entirely.
+ *
+ * Columns are taken from `Column` declarations when a React caller composed some into a slot, and
+ * otherwise from the element's model - nested `column` children, a `columns` property, or the shape of
+ * the first row; see `columnDefinitions`. The model is the path a screen takes, and it is checked second
+ * only because an explicitly composed declaration is the more specific statement of the two.
+ */ function PrimeDataTable({ element, slots }) {
     const rows = recordArrayProperty(element, 'rows');
-    const columns = columnDefinitions(element, rows);
+    const declared = declaredColumns(slots);
+    const columns = declared.length > 0 ? declared : columnDefinitions(element, rows);
     const pageSize = numberProperty(element, 'pageSize');
-    return /*#__PURE__*/ jsx(DataTable, {
+    const size = stringProperty(element, 'size');
+    return /*#__PURE__*/ jsxs(DataTable.Root, {
         "data-scene-id": element.id,
-        value: rows,
-        emptyMessage: stringProperty(element, 'emptyMessage', 'No records found'),
-        stripedRows: booleanProperty(element, 'stripedRows', false),
-        showGridlines: booleanProperty(element, 'showGridlines', false),
-        size: stringProperty(element, 'size'),
+        data: rows,
+        removableSort: true,
         paginator: pageSize !== undefined,
         rows: pageSize,
-        children: columns.map((column)=>/*#__PURE__*/ jsx(Column, {
-                field: column.field,
-                header: column.header,
-                sortable: column.sortable
-            }, column.field))
+        stripedRows: booleanProperty(element, 'stripedRows', false),
+        showGridlines: booleanProperty(element, 'showGridlines', false),
+        size: size === 'small' || size === 'large' ? size : undefined,
+        children: [
+            /*#__PURE__*/ jsx(DataTable.TableContainer, {
+                children: /*#__PURE__*/ jsxs(DataTable.Table, {
+                    children: [
+                        /*#__PURE__*/ jsx(DataTable.THead, {
+                            children: /*#__PURE__*/ jsx(DataTable.THeadRow, {
+                                children: columns.map((column, index)=>/*#__PURE__*/ jsxs(DataTable.THeadCell, {
+                                        children: [
+                                            column.sortable && column.field ? /*#__PURE__*/ jsxs(DataTable.Sort, {
+                                                field: column.field,
+                                                children: [
+                                                    headerOf(column),
+                                                    /*#__PURE__*/ jsx(DataTable.SortIndicator, {
+                                                        match: "asc",
+                                                        children: " ▲"
+                                                    }),
+                                                    /*#__PURE__*/ jsx(DataTable.SortIndicator, {
+                                                        match: "desc",
+                                                        children: " ▼"
+                                                    })
+                                                ]
+                                            }) : /*#__PURE__*/ jsx("span", {
+                                                children: headerOf(column)
+                                            }),
+                                            column.filter && column.field && /*#__PURE__*/ jsx(DataTable.Filter, {
+                                                field: column.field,
+                                                display: "row",
+                                                children: (filter)=>/*#__PURE__*/ jsx("input", {
+                                                        className: "w-full",
+                                                        "aria-label": `Filter by ${headerOf(column)}`,
+                                                        value: typeof filter.value === 'string' ? filter.value : '',
+                                                        onChange: (event)=>filter.onChange(event, event.target.value)
+                                                    })
+                                            })
+                                        ]
+                                    }, column.field ?? index))
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(DataTable.TBody, {
+                            children: ({ item, index })=>/*#__PURE__*/ jsx(DataTable.Row, {
+                                    index: index,
+                                    children: columns.map((column, columnIndex)=>/*#__PURE__*/ jsx(DataTable.Cell, {
+                                            children: cellOf(column, item)
+                                        }, column.field ?? columnIndex))
+                                })
+                        }),
+                        /*#__PURE__*/ jsx(DataTable.EmptyTBody, {
+                            children: /*#__PURE__*/ jsx(DataTable.Row, {
+                                children: /*#__PURE__*/ jsx(DataTable.Cell, {
+                                    colSpan: Math.max(columns.length, 1),
+                                    children: stringProperty(element, 'emptyMessage', 'No records found')
+                                })
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(DataTable.Pagination, {
+                children: (pagination)=>/*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2 p-2",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !pagination.canPrev,
+                                onClick: (event)=>pagination.onPageChange(event, pagination.page - 1),
+                                children: "‹"
+                            }),
+                            /*#__PURE__*/ jsxs("span", {
+                                className: "text-sm opacity-75",
+                                children: [
+                                    pagination.page + 1,
+                                    " / ",
+                                    Math.max(pagination.pageCount, 1)
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !pagination.canNext,
+                                onClick: (event)=>pagination.onPageChange(event, pagination.page + 1),
+                                children: "›"
+                            })
+                        ]
+                    })
+            })
+        ]
     });
 }
+function declaredColumns(slots) {
+    return [
+        ...slots.columns ?? [],
+        ...slots.content ?? []
+    ].filter((node)=>/*#__PURE__*/ isValidElement(node) && node.type === Column).map((node)=>node.props);
+}
+function headerOf(column) {
+    return column.header ?? column.field ?? '';
+}
+function cellOf(column, row) {
+    if (column.body !== undefined) return column.body(row);
+    if (column.field === undefined) return '';
+    return String(row[column.field] ?? '');
+}
 
 export { PrimeDataTable };
 //# sourceMappingURL=PrimeDataTable.js.map

package/dist/esm/data/PrimeDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeDataTable.js","sources":["../../../data/PrimeDataTable.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 { Column } from 'primereact/column';\nimport { DataTable } from 'primereact/datatable';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, recordArrayProperty, stringProperty } from '../properties';\nimport { columnDefinitions } from './columnDefinitions';\n\n/**\n * The `PrimeReact:dataTable` component, also registered under Screenplay's `table` name so a screen\n * compiled from a `.play` file renders through this package without a translation step.\n *\n * Rows come from a `rows` property; columns come from nested `column` children, a `columns` property, or\n * are inferred from the first row - see `columnDefinitions`.\n */\nexport function PrimeDataTable({ element }: RegisteredComponentProps) {\n    const rows = recordArrayProperty(element, 'rows');\n    const columns = columnDefinitions(element, rows);\n    const pageSize = numberProperty(element, 'pageSize');\n    return (\n        <DataTable\n            data-scene-id={element.id}\n            value={rows}\n            emptyMessage={stringProperty(element, 'emptyMessage', 'No records found')}\n            stripedRows={booleanProperty(element, 'stripedRows', false)}\n            showGridlines={booleanProperty(element, 'showGridlines', false)}\n            size={stringProperty(element, 'size') as 'small' | 'normal' | 'large' | undefined}\n            paginator={pageSize !== undefined}\n            rows={pageSize}>\n            {columns.map((column) => (\n                <Column key={column.field} field={column.field} header={column.header} sortable={column.sortable} />\n            ))}\n        </DataTable>\n    );\n}\n"],"names":["PrimeDataTable","element","rows","recordArrayProperty","columns","columnDefinitions","pageSize","numberProperty","_jsx","DataTable","data-scene-id","id","value","emptyMessage","stringProperty","stripedRows","booleanProperty","showGridlines","size","paginator","undefined","map","column","Column","field","header","sortable"],"mappings":";;;;;;AASA;;;;;;AAMC,IACM,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAA4B,EAAA;IAChE,MAAMC,IAAAA,GAAOC,oBAAoBF,OAAAA,EAAS,MAAA,CAAA;IAC1C,MAAMG,OAAAA,GAAUC,kBAAkBJ,OAAAA,EAASC,IAAAA,CAAAA;IAC3C,MAAMI,QAAAA,GAAWC,eAAeN,OAAAA,EAAS,UAAA,CAAA;AACzC,IAAA,qBACIO,GAAA,CAACC,SAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeT,QAAQU,EAAE;QACzBC,KAAAA,EAAOV,IAAAA;QACPW,YAAAA,EAAcC,cAAAA,CAAeb,SAAS,cAAA,EAAgB,kBAAA,CAAA;QACtDc,WAAAA,EAAaC,eAAAA,CAAgBf,SAAS,aAAA,EAAe,KAAA,CAAA;QACrDgB,aAAAA,EAAeD,eAAAA,CAAgBf,SAAS,eAAA,EAAiB,KAAA,CAAA;AACzDiB,QAAAA,IAAAA,EAAMJ,eAAeb,OAAAA,EAAS,MAAA,CAAA;AAC9BkB,QAAAA,SAAAA,EAAWb,QAAAA,KAAac,SAAAA;QACxBlB,IAAAA,EAAMI,QAAAA;AACLF,QAAAA,QAAAA,EAAAA,OAAAA,CAAQiB,GAAG,CAAC,CAACC,MAAAA,iBACVd,GAAA,CAACe,MAAAA,EAAAA;AAA0BC,gBAAAA,KAAAA,EAAOF,OAAOE,KAAK;AAAEC,gBAAAA,MAAAA,EAAQH,OAAOG,MAAM;AAAEC,gBAAAA,QAAAA,EAAUJ,OAAOI;AAA3EJ,aAAAA,EAAAA,MAAAA,CAAOE,KAAK,CAAA;;AAIzC;;;;"}
+{"version":3,"file":"PrimeDataTable.js","sources":["../../../data/PrimeDataTable.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 { ReactElement, ReactNode, isValidElement } from 'react';\nimport { DataTable, type DataTableFilterInstance, type DataTablePaginationInstance, type DataTableTBodyItemOptions } from 'primereact/datatable';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, recordArrayProperty, stringProperty } from '../properties';\nimport { Column, ColumnProps } from './Column';\nimport { columnDefinitions } from './columnDefinitions';\n\n/**\n * The `PrimeReact:dataTable` component, also registered under Screenplay's `table` name so a screen\n * compiled from a `.play` file renders through this package without a translation step.\n *\n * PrimeReact 11 turned the table inside out. Where PrimeReact 10 took `value` and a set of `Column`\n * children and produced the whole table, PrimeReact 11 gives back a root that owns sorting, filtering and\n * paging and a set of parts - container, table, head, rows, cells - that the caller arranges. So this\n * adapter now writes out the table's structure itself, and the column concept it renders from is\n * {@link Column}, which is Cratis-owned because PrimeReact 11 removed `primereact/column` entirely.\n *\n * Columns are taken from `Column` declarations when a React caller composed some into a slot, and\n * otherwise from the element's model - nested `column` children, a `columns` property, or the shape of\n * the first row; see `columnDefinitions`. The model is the path a screen takes, and it is checked second\n * only because an explicitly composed declaration is the more specific statement of the two.\n */\nexport function PrimeDataTable({ element, slots }: RegisteredComponentProps) {\n    const rows = recordArrayProperty(element, 'rows');\n    const declared = declaredColumns(slots);\n    const columns: ColumnProps[] = declared.length > 0 ? declared : columnDefinitions(element, rows);\n    const pageSize = numberProperty(element, 'pageSize');\n    const size = stringProperty(element, 'size');\n\n    return (\n        <DataTable.Root\n            data-scene-id={element.id}\n            data={rows}\n            removableSort\n            paginator={pageSize !== undefined}\n            rows={pageSize}\n            stripedRows={booleanProperty(element, 'stripedRows', false)}\n            showGridlines={booleanProperty(element, 'showGridlines', false)}\n            size={size === 'small' || size === 'large' ? size : undefined}>\n            <DataTable.TableContainer>\n                <DataTable.Table>\n                    <DataTable.THead>\n                        <DataTable.THeadRow>\n                            {columns.map((column, index) => (\n                                <DataTable.THeadCell key={column.field ?? index}>\n                                    {column.sortable && column.field ? (\n                                        <DataTable.Sort field={column.field}>\n                                            {headerOf(column)}\n                                            <DataTable.SortIndicator match='asc'> ▲</DataTable.SortIndicator>\n                                            <DataTable.SortIndicator match='desc'> ▼</DataTable.SortIndicator>\n                                        </DataTable.Sort>\n                                    ) : (\n                                        <span>{headerOf(column)}</span>\n                                    )}\n                                    {column.filter && column.field && (\n                                        <DataTable.Filter field={column.field} display='row'>\n                                            {(filter: DataTableFilterInstance) => (\n                                                <input\n                                                    className='w-full'\n                                                    aria-label={`Filter by ${headerOf(column)}`}\n                                                    value={typeof filter.value === 'string' ? filter.value : ''}\n                                                    onChange={(event) => filter.onChange(event, event.target.value)}\n                                                />\n                                            )}\n                                        </DataTable.Filter>\n                                    )}\n                                </DataTable.THeadCell>\n                            ))}\n                        </DataTable.THeadRow>\n                    </DataTable.THead>\n                    <DataTable.TBody>\n                        {({ item, index }: DataTableTBodyItemOptions) => (\n                            <DataTable.Row index={index}>\n                                {columns.map((column, columnIndex) => (\n                                    <DataTable.Cell key={column.field ?? columnIndex}>{cellOf(column, item)}</DataTable.Cell>\n                                ))}\n                            </DataTable.Row>\n                        )}\n                    </DataTable.TBody>\n                    <DataTable.EmptyTBody>\n                        <DataTable.Row>\n                            <DataTable.Cell colSpan={Math.max(columns.length, 1)}>\n                                {stringProperty(element, 'emptyMessage', 'No records found')}\n                            </DataTable.Cell>\n                        </DataTable.Row>\n                    </DataTable.EmptyTBody>\n                </DataTable.Table>\n            </DataTable.TableContainer>\n            <DataTable.Pagination>\n                {(pagination: DataTablePaginationInstance) => (\n                    <div className='flex items-center gap-2 p-2'>\n                        <button\n                            type='button'\n                            disabled={!pagination.canPrev}\n                            onClick={(event) => pagination.onPageChange(event, pagination.page - 1)}>\n                            ‹\n                        </button>\n                        <span className='text-sm opacity-75'>\n                            {pagination.page + 1} / {Math.max(pagination.pageCount, 1)}\n                        </span>\n                        <button\n                            type='button'\n                            disabled={!pagination.canNext}\n                            onClick={(event) => pagination.onPageChange(event, pagination.page + 1)}>\n                            ›\n                        </button>\n                    </div>\n                )}\n            </DataTable.Pagination>\n        </DataTable.Root>\n    );\n}\n\nfunction declaredColumns(slots: Record<string, ReactNode[]>): ColumnProps[] {\n    return [...(slots.columns ?? []), ...(slots.content ?? [])]\n        .filter((node): node is ReactElement<ColumnProps> => isValidElement(node) && node.type === Column)\n        .map((node) => node.props);\n}\n\nfunction headerOf(column: ColumnProps): string {\n    return column.header ?? column.field ?? '';\n}\n\nfunction cellOf(column: ColumnProps, row: Record<string, unknown>): ReactNode {\n    if (column.body !== undefined) return column.body(row);\n    if (column.field === undefined) return '';\n    return String(row[column.field] ?? '');\n}\n"],"names":["PrimeDataTable","element","slots","rows","recordArrayProperty","declared","declaredColumns","columns","length","columnDefinitions","pageSize","numberProperty","size","stringProperty","_jsxs","DataTable","Root","data-scene-id","id","data","removableSort","paginator","undefined","stripedRows","booleanProperty","showGridlines","_jsx","TableContainer","Table","THead","THeadRow","map","column","index","THeadCell","sortable","field","Sort","headerOf","SortIndicator","match","span","filter","Filter","display","input","className","aria-label","value","onChange","event","target","TBody","item","Row","columnIndex","Cell","cellOf","EmptyTBody","colSpan","Math","max","Pagination","pagination","div","button","type","disabled","canPrev","onClick","onPageChange","page","pageCount","canNext","content","node","isValidElement","Column","props","header","row","body","String"],"mappings":";;;;;;;AAUA;;;;;;;;;;;;;;AAcC,IACM,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACvE,MAAMC,IAAAA,GAAOC,oBAAoBH,OAAAA,EAAS,MAAA,CAAA;AAC1C,IAAA,MAAMI,WAAWC,eAAAA,CAAgBJ,KAAAA,CAAAA;AACjC,IAAA,MAAMK,UAAyBF,QAAAA,CAASG,MAAM,GAAG,CAAA,GAAIH,QAAAA,GAAWI,kBAAkBR,OAAAA,EAASE,IAAAA,CAAAA;IAC3F,MAAMO,QAAAA,GAAWC,eAAeV,OAAAA,EAAS,UAAA,CAAA;IACzC,MAAMW,IAAAA,GAAOC,eAAeZ,OAAAA,EAAS,MAAA,CAAA;IAErC,qBACIa,IAAA,CAACC,UAAUC,IAAI,EAAA;AACXC,QAAAA,eAAAA,EAAehB,QAAQiB,EAAE;QACzBC,IAAAA,EAAMhB,IAAAA;QACNiB,aAAa,EAAA,IAAA;AACbC,QAAAA,SAAAA,EAAWX,QAAAA,KAAaY,SAAAA;QACxBnB,IAAAA,EAAMO,QAAAA;QACNa,WAAAA,EAAaC,eAAAA,CAAgBvB,SAAS,aAAA,EAAe,KAAA,CAAA;QACrDwB,aAAAA,EAAeD,eAAAA,CAAgBvB,SAAS,eAAA,EAAiB,KAAA,CAAA;AACzDW,QAAAA,IAAAA,EAAMA,IAAAA,KAAS,OAAA,IAAWA,IAAAA,KAAS,OAAA,GAAUA,IAAAA,GAAOU,SAAAA;;AACpD,0BAAAI,GAAA,CAACX,UAAUY,cAAc,EAAA;wCACrBb,IAAA,CAACC,UAAUa,KAAK,EAAA;;AACZ,sCAAAF,GAAA,CAACX,UAAUc,KAAK,EAAA;oDACZH,GAAA,CAACX,UAAUe,QAAQ,EAAA;AACdvB,gCAAAA,QAAAA,EAAAA,OAAAA,CAAQwB,GAAG,CAAC,CAACC,QAAQC,KAAAA,iBAClBnB,IAAA,CAACC,UAAUmB,SAAS,EAAA;;AACfF,4CAAAA,MAAAA,CAAOG,QAAQ,IAAIH,MAAAA,CAAOI,KAAK,iBAC5BtB,IAAA,CAACC,UAAUsB,IAAI,EAAA;AAACD,gDAAAA,KAAAA,EAAOJ,OAAOI,KAAK;;oDAC9BE,QAAAA,CAASN,MAAAA,CAAAA;AACV,kEAAAN,GAAA,CAACX,UAAUwB,aAAa,EAAA;wDAACC,KAAAA,EAAM,KAAA;AAAM,wDAAA,QAAA,EAAA;;AACrC,kEAAAd,GAAA,CAACX,UAAUwB,aAAa,EAAA;wDAACC,KAAAA,EAAM,MAAA;AAAO,wDAAA,QAAA,EAAA;;;+DAG1Cd,GAAA,CAACe,MAAAA,EAAAA;0DAAMH,QAAAA,CAASN,MAAAA;;AAEnBA,4CAAAA,MAAAA,CAAOU,MAAM,IAAIV,MAAAA,CAAOI,KAAK,kBAC1BV,GAAA,CAACX,UAAU4B,MAAM,EAAA;AAACP,gDAAAA,KAAAA,EAAOJ,OAAOI,KAAK;gDAAEQ,OAAAA,EAAQ,KAAA;AAC1C,gDAAA,QAAA,EAAA,CAACF,uBACEhB,GAAA,CAACmB,OAAAA,EAAAA;wDACGC,SAAAA,EAAU,QAAA;AACVC,wDAAAA,YAAAA,EAAY,CAAC,UAAU,EAAET,QAAAA,CAASN,MAAAA,CAAAA,CAAAA,CAAS;AAC3CgB,wDAAAA,KAAAA,EAAO,OAAON,MAAAA,CAAOM,KAAK,KAAK,QAAA,GAAWN,MAAAA,CAAOM,KAAK,GAAG,EAAA;wDACzDC,QAAAA,EAAU,CAACC,QAAUR,MAAAA,CAAOO,QAAQ,CAACC,KAAAA,EAAOA,KAAAA,CAAMC,MAAM,CAACH,KAAK;;;;AAjBxDhB,qCAAAA,EAAAA,MAAAA,CAAOI,KAAK,IAAIH,KAAAA,CAAAA;;;AA0BtD,sCAAAP,GAAA,CAACX,UAAUqC,KAAK,EAAA;sCACX,CAAC,EAAEC,IAAI,EAAEpB,KAAK,EAA6B,iBACxCP,GAAA,CAACX,UAAUuC,GAAG,EAAA;oCAACrB,KAAAA,EAAOA,KAAAA;AACjB1B,oCAAAA,QAAAA,EAAAA,OAAAA,CAAQwB,GAAG,CAAC,CAACC,QAAQuB,WAAAA,iBAClB7B,GAAA,CAACX,UAAUyC,IAAI,EAAA;AAAoCC,4CAAAA,QAAAA,EAAAA,MAAAA,CAAOzB,MAAAA,EAAQqB,IAAAA;AAA7CrB,yCAAAA,EAAAA,MAAAA,CAAOI,KAAK,IAAImB,WAAAA,CAAAA;;;AAKrD,sCAAA7B,GAAA,CAACX,UAAU2C,UAAU,EAAA;oDACjBhC,GAAA,CAACX,UAAUuC,GAAG,EAAA;wDACV5B,GAAA,CAACX,UAAUyC,IAAI,EAAA;AAACG,oCAAAA,OAAAA,EAASC,IAAAA,CAAKC,GAAG,CAACtD,OAAAA,CAAQC,MAAM,EAAE,CAAA,CAAA;AAC7CK,oCAAAA,QAAAA,EAAAA,cAAAA,CAAeZ,SAAS,cAAA,EAAgB,kBAAA;;;;;;;AAM7D,0BAAAyB,GAAA,CAACX,UAAU+C,UAAU,EAAA;AAChB,gBAAA,QAAA,EAAA,CAACC,2BACEjD,IAAA,CAACkD,KAAAA,EAAAA;wBAAIlB,SAAAA,EAAU,6BAAA;;0CACXpB,GAAA,CAACuC,QAAAA,EAAAA;gCACGC,IAAAA,EAAK,QAAA;gCACLC,QAAAA,EAAU,CAACJ,WAAWK,OAAO;gCAC7BC,OAAAA,EAAS,CAACnB,QAAUa,UAAAA,CAAWO,YAAY,CAACpB,KAAAA,EAAOa,UAAAA,CAAWQ,IAAI,GAAG,CAAA,CAAA;AAAI,gCAAA,QAAA,EAAA;;0CAG7EzD,IAAA,CAAC2B,MAAAA,EAAAA;gCAAKK,SAAAA,EAAU,oBAAA;;AACXiB,oCAAAA,UAAAA,CAAWQ,IAAI,GAAG,CAAA;AAAE,oCAAA,KAAA;AAAIX,oCAAAA,IAAAA,CAAKC,GAAG,CAACE,UAAAA,CAAWS,SAAS,EAAE,CAAA;;;0CAE5D9C,GAAA,CAACuC,QAAAA,EAAAA;gCACGC,IAAAA,EAAK,QAAA;gCACLC,QAAAA,EAAU,CAACJ,WAAWU,OAAO;gCAC7BJ,OAAAA,EAAS,CAACnB,QAAUa,UAAAA,CAAWO,YAAY,CAACpB,KAAAA,EAAOa,UAAAA,CAAWQ,IAAI,GAAG,CAAA,CAAA;AAAI,gCAAA,QAAA,EAAA;;;;;;;AAQrG;AAEA,SAASjE,gBAAgBJ,KAAkC,EAAA;IACvD,OAAO;WAAKA,KAAAA,CAAMK,OAAO,IAAI,EAAE;WAAOL,KAAAA,CAAMwE,OAAO,IAAI;AAAI,KAAA,CACtDhC,MAAM,CAAC,CAACiC,IAAAA,iBAA4CC,eAAeD,IAAAA,CAAAA,IAASA,IAAAA,CAAKT,IAAI,KAAKW,QAC1F9C,GAAG,CAAC,CAAC4C,IAAAA,GAASA,KAAKG,KAAK,CAAA;AACjC;AAEA,SAASxC,SAASN,MAAmB,EAAA;AACjC,IAAA,OAAOA,MAAAA,CAAO+C,MAAM,IAAI/C,MAAAA,CAAOI,KAAK,IAAI,EAAA;AAC5C;AAEA,SAASqB,MAAAA,CAAOzB,MAAmB,EAAEgD,GAA4B,EAAA;AAC7D,IAAA,IAAIhD,OAAOiD,IAAI,KAAK3D,WAAW,OAAOU,MAAAA,CAAOiD,IAAI,CAACD,GAAAA,CAAAA;AAClD,IAAA,IAAIhD,MAAAA,CAAOI,KAAK,KAAKd,SAAAA,EAAW,OAAO,EAAA;AACvC,IAAA,OAAO4D,OAAOF,GAAG,CAAChD,MAAAA,CAAOI,KAAK,CAAC,IAAI,EAAA,CAAA;AACvC;;;;"}

package/dist/esm/data/PrimeDataView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeDataView.d.ts","sourceRoot":"","sources":["../../../data/PrimeDataView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAU/D,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAmBlE"}
+{"version":3,"file":"PrimeDataView.d.ts","sourceRoot":"","sources":["../../../data/PrimeDataView.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAiB/D,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BA0BlE"}

package/dist/esm/data/PrimeDataView.js

@@ -1,36 +1,58 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { DataView } from 'primereact/dataview';
-import { stringProperty, numberProperty, recordArrayProperty } from '../properties.js';
+import { recordArrayProperty, stringProperty, numberProperty } from '../properties.js';
+import { Pagination } from './Pagination.js';
 
 /**
  * The `PrimeReact:dataView` component - the same rows a table would show, laid out as a list of cards.
  *
- * DataView has no default item template, so the adapter supplies one built from the `titleField` and
- * `descriptionField` properties. Without it every row would render empty and the component would look
- * broken rather than unconfigured.
+ * PrimeReact 11 reduced `DataView` to a layout shell: a root that tracks nothing but the list/grid
+ * layout, and header, content, empty and footer slots. It no longer takes the rows, so it can no longer
+ * template them, page them, or decide when the list is empty - all three now belong to the caller. The
+ * adapter therefore renders the cards itself from the `titleField` and `descriptionField` properties,
+ * shows the empty slot when there are no rows, and slices the rows for the page the user is on.
+ *
+ * Owning the page locally is the same trade {@link PrimePaginator} makes: a Scene element has nowhere to
+ * record which page is showing, and a preview where paging does nothing would be worse than one where it
+ * works but is forgotten on reload.
  */ function PrimeDataView({ element }) {
+    const rows = recordArrayProperty(element, 'rows');
     const titleField = stringProperty(element, 'titleField', 'title');
     const descriptionField = stringProperty(element, 'descriptionField', 'description');
     const pageSize = numberProperty(element, 'pageSize');
-    return /*#__PURE__*/ jsx(DataView, {
+    const [page, setPage] = useState(1);
+    const visible = pageSize === undefined ? rows : rows.slice((page - 1) * pageSize, page * pageSize);
+    return /*#__PURE__*/ jsxs(DataView.Root, {
         "data-scene-id": element.id,
-        value: recordArrayProperty(element, 'rows'),
-        emptyMessage: stringProperty(element, 'emptyMessage', 'No records found'),
-        paginator: pageSize !== undefined,
-        rows: pageSize,
-        itemTemplate: (row)=>/*#__PURE__*/ jsxs("div", {
-                className: "flex flex-col gap-1 p-3",
-                children: [
-                    /*#__PURE__*/ jsx("span", {
-                        className: "font-semibold",
-                        children: String(row[titleField] ?? '')
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        className: "text-sm opacity-75",
-                        children: String(row[descriptionField] ?? '')
-                    })
-                ]
+        children: [
+            /*#__PURE__*/ jsx(DataView.Content, {
+                children: visible.map((row, index)=>/*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-col gap-1 p-3",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "font-semibold",
+                                children: String(row[titleField] ?? '')
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-sm opacity-75",
+                                children: String(row[descriptionField] ?? '')
+                            })
+                        ]
+                    }, index))
+            }),
+            rows.length === 0 && /*#__PURE__*/ jsx(DataView.Empty, {
+                children: stringProperty(element, 'emptyMessage', 'No records found')
+            }),
+            pageSize !== undefined && /*#__PURE__*/ jsx(DataView.Footer, {
+                children: /*#__PURE__*/ jsx(Pagination, {
+                    page: page,
+                    total: rows.length,
+                    itemsPerPage: pageSize,
+                    onPageChange: setPage
+                })
             })
+        ]
     });
 }
 

package/dist/esm/data/PrimeDataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeDataView.js","sources":["../../../data/PrimeDataView.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 { DataView } from 'primereact/dataview';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, recordArrayProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:dataView` component - the same rows a table would show, laid out as a list of cards.\n *\n * DataView has no default item template, so the adapter supplies one built from the `titleField` and\n * `descriptionField` properties. Without it every row would render empty and the component would look\n * broken rather than unconfigured.\n */\nexport function PrimeDataView({ element }: RegisteredComponentProps) {\n    const titleField = stringProperty(element, 'titleField', 'title');\n    const descriptionField = stringProperty(element, 'descriptionField', 'description');\n    const pageSize = numberProperty(element, 'pageSize');\n    return (\n        <DataView\n            data-scene-id={element.id}\n            value={recordArrayProperty(element, 'rows')}\n            emptyMessage={stringProperty(element, 'emptyMessage', 'No records found')}\n            paginator={pageSize !== undefined}\n            rows={pageSize}\n            itemTemplate={(row: Record<string, unknown>) => (\n                <div className='flex flex-col gap-1 p-3'>\n                    <span className='font-semibold'>{String(row[titleField] ?? '')}</span>\n                    <span className='text-sm opacity-75'>{String(row[descriptionField] ?? '')}</span>\n                </div>\n            )}\n        />\n    );\n}\n"],"names":["PrimeDataView","element","titleField","stringProperty","descriptionField","pageSize","numberProperty","_jsx","DataView","data-scene-id","id","value","recordArrayProperty","emptyMessage","paginator","undefined","rows","itemTemplate","row","_jsxs","div","className","span","String"],"mappings":";;;;AAOA;;;;;;AAMC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;IAC/D,MAAMC,UAAAA,GAAaC,cAAAA,CAAeF,OAAAA,EAAS,YAAA,EAAc,OAAA,CAAA;IACzD,MAAMG,gBAAAA,GAAmBD,cAAAA,CAAeF,OAAAA,EAAS,kBAAA,EAAoB,aAAA,CAAA;IACrE,MAAMI,QAAAA,GAAWC,eAAeL,OAAAA,EAAS,UAAA,CAAA;AACzC,IAAA,qBACIM,GAAA,CAACC,QAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;AACzBC,QAAAA,KAAAA,EAAOC,oBAAoBX,OAAAA,EAAS,MAAA,CAAA;QACpCY,YAAAA,EAAcV,cAAAA,CAAeF,SAAS,cAAA,EAAgB,kBAAA,CAAA;AACtDa,QAAAA,SAAAA,EAAWT,QAAAA,KAAaU,SAAAA;QACxBC,IAAAA,EAAMX,QAAAA;QACNY,YAAAA,EAAc,CAACC,oBACXC,IAAA,CAACC,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,yBAAA;;kCACXd,GAAA,CAACe,MAAAA,EAAAA;wBAAKD,SAAAA,EAAU,eAAA;kCAAiBE,MAAAA,CAAOL,GAAG,CAAChB,UAAAA,CAAW,IAAI,EAAA;;kCAC3DK,GAAA,CAACe,MAAAA,EAAAA;wBAAKD,SAAAA,EAAU,oBAAA;kCAAsBE,MAAAA,CAAOL,GAAG,CAACd,gBAAAA,CAAiB,IAAI,EAAA;;;;;AAK1F;;;;"}
+{"version":3,"file":"PrimeDataView.js","sources":["../../../data/PrimeDataView.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 { DataView } from 'primereact/dataview';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, recordArrayProperty, stringProperty } from '../properties';\nimport { Pagination } from './Pagination';\n\n/**\n * The `PrimeReact:dataView` component - the same rows a table would show, laid out as a list of cards.\n *\n * PrimeReact 11 reduced `DataView` to a layout shell: a root that tracks nothing but the list/grid\n * layout, and header, content, empty and footer slots. It no longer takes the rows, so it can no longer\n * template them, page them, or decide when the list is empty - all three now belong to the caller. The\n * adapter therefore renders the cards itself from the `titleField` and `descriptionField` properties,\n * shows the empty slot when there are no rows, and slices the rows for the page the user is on.\n *\n * Owning the page locally is the same trade {@link PrimePaginator} makes: a Scene element has nowhere to\n * record which page is showing, and a preview where paging does nothing would be worse than one where it\n * works but is forgotten on reload.\n */\nexport function PrimeDataView({ element }: RegisteredComponentProps) {\n    const rows = recordArrayProperty(element, 'rows');\n    const titleField = stringProperty(element, 'titleField', 'title');\n    const descriptionField = stringProperty(element, 'descriptionField', 'description');\n    const pageSize = numberProperty(element, 'pageSize');\n    const [page, setPage] = useState(1);\n    const visible = pageSize === undefined ? rows : rows.slice((page - 1) * pageSize, page * pageSize);\n\n    return (\n        <DataView.Root data-scene-id={element.id}>\n            <DataView.Content>\n                {visible.map((row, index) => (\n                    <div key={index} className='flex flex-col gap-1 p-3'>\n                        <span className='font-semibold'>{String(row[titleField] ?? '')}</span>\n                        <span className='text-sm opacity-75'>{String(row[descriptionField] ?? '')}</span>\n                    </div>\n                ))}\n            </DataView.Content>\n            {rows.length === 0 && <DataView.Empty>{stringProperty(element, 'emptyMessage', 'No records found')}</DataView.Empty>}\n            {pageSize !== undefined && (\n                <DataView.Footer>\n                    <Pagination page={page} total={rows.length} itemsPerPage={pageSize} onPageChange={setPage} />\n                </DataView.Footer>\n            )}\n        </DataView.Root>\n    );\n}\n"],"names":["PrimeDataView","element","rows","recordArrayProperty","titleField","stringProperty","descriptionField","pageSize","numberProperty","page","setPage","useState","visible","undefined","slice","_jsxs","DataView","Root","data-scene-id","id","_jsx","Content","map","row","index","div","className","span","String","length","Empty","Footer","Pagination","total","itemsPerPage","onPageChange"],"mappings":";;;;;;AASA;;;;;;;;;;;;AAYC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;IAC/D,MAAMC,IAAAA,GAAOC,oBAAoBF,OAAAA,EAAS,MAAA,CAAA;IAC1C,MAAMG,UAAAA,GAAaC,cAAAA,CAAeJ,OAAAA,EAAS,YAAA,EAAc,OAAA,CAAA;IACzD,MAAMK,gBAAAA,GAAmBD,cAAAA,CAAeJ,OAAAA,EAAS,kBAAA,EAAoB,aAAA,CAAA;IACrE,MAAMM,QAAAA,GAAWC,eAAeP,OAAAA,EAAS,UAAA,CAAA;AACzC,IAAA,MAAM,CAACQ,IAAAA,EAAMC,OAAAA,CAAQ,GAAGC,QAAAA,CAAS,CAAA,CAAA;AACjC,IAAA,MAAMC,OAAAA,GAAUL,QAAAA,KAAaM,SAAAA,GAAYX,IAAAA,GAAOA,IAAAA,CAAKY,KAAK,CAAEL,CAAAA,IAAAA,GAAO,CAAA,IAAKF,UAAUE,IAAAA,GAAOF,QAAAA,CAAAA;IAEzF,qBACIQ,IAAA,CAACC,SAASC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAejB,QAAQkB,EAAE;;AACpC,0BAAAC,GAAA,CAACJ,SAASK,OAAO,EAAA;AACZT,gBAAAA,QAAAA,EAAAA,OAAAA,CAAQU,GAAG,CAAC,CAACC,GAAAA,EAAKC,sBACfT,IAAA,CAACU,KAAAA,EAAAA;wBAAgBC,SAAAA,EAAU,yBAAA;;0CACvBN,GAAA,CAACO,MAAAA,EAAAA;gCAAKD,SAAAA,EAAU,eAAA;0CAAiBE,MAAAA,CAAOL,GAAG,CAACnB,UAAAA,CAAW,IAAI,EAAA;;0CAC3DgB,GAAA,CAACO,MAAAA,EAAAA;gCAAKD,SAAAA,EAAU,oBAAA;0CAAsBE,MAAAA,CAAOL,GAAG,CAACjB,gBAAAA,CAAiB,IAAI,EAAA;;;AAFhEkB,qBAAAA,EAAAA,KAAAA,CAAAA;;AAMjBtB,YAAAA,IAAAA,CAAK2B,MAAM,KAAK,CAAA,kBAAKT,GAAA,CAACJ,SAASc,KAAK,EAAA;AAAEzB,gBAAAA,QAAAA,EAAAA,cAAAA,CAAeJ,SAAS,cAAA,EAAgB,kBAAA;;YAC9EM,QAAAA,KAAaM,SAAAA,kBACVO,GAAA,CAACJ,QAAAA,CAASe,MAAM,EAAA;AACZ,gBAAA,QAAA,gBAAAX,GAAA,CAACY,UAAAA,EAAAA;oBAAWvB,IAAAA,EAAMA,IAAAA;AAAMwB,oBAAAA,KAAAA,EAAO/B,KAAK2B,MAAM;oBAAEK,YAAAA,EAAc3B,QAAAA;oBAAU4B,YAAAA,EAAczB;;;;;AAKtG;;;;"}

package/dist/esm/data/PrimeOrderList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeOrderList.d.ts","sourceRoot":"","sources":["../../../data/PrimeOrderList.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAY/D,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAYnE"}
+{"version":3,"file":"PrimeOrderList.d.ts","sourceRoot":"","sources":["../../../data/PrimeOrderList.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAkB/D,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BA+CnE"}

package/dist/esm/data/PrimeOrderList.js

@@ -1,26 +1,89 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { OrderList } from 'primereact/orderlist';
+import { useOrderList } from '@primereact/headless/orderlist';
 import { optionsProperty, stringProperty } from '../properties.js';
+import { toSelectOptions } from './selectOptions.js';
 
 /**
  * The `PrimeReact:orderList` component - a list the user reorders with the supplied controls.
  *
- * Reordering is the component's entire purpose, so the order has to live somewhere that survives a
- * re-render; the adapter keeps it locally, seeded from `items`.
+ * PrimeReact 11 ships no styled order list at all: what survives is `useOrderList`, a headless hook that
+ * owns the ordering, works out which moves are legal, and hands back ready-made props for the move
+ * buttons - but renders nothing. The presentation below is therefore this package's, not PrimeReact's,
+ * which is why it is written out in full rather than configured.
  *
- * In PrimeReact 11 this component becomes a hook rather than a component.
+ * Selection is the one piece the hook does not own. It reads `selection` and never writes it, and it
+ * compares entries by identity, so the adapter holds the selected options and the very same object
+ * references it passed in as the list. Reordering is the component's entire purpose, so the order has to
+ * survive a re-render too; it is seeded from `items` once and kept from there on.
  */ function PrimeOrderList({ element }) {
-    const [items, setItems] = useState(optionsProperty(element, 'items'));
-    return /*#__PURE__*/ jsx(OrderList, {
-        "data-scene-id": element.id,
+    const [items, setItems] = useState(()=>optionsProperty(element, 'items'));
+    const [selection, setSelection] = useState([]);
+    const orderListProps = {
         value: items,
-        onChange: (event)=>setItems(event.value),
-        dataKey: "value",
-        header: stringProperty(element, 'header'),
-        itemTemplate: (item)=>/*#__PURE__*/ jsx("span", {
-                children: item.label
+        selection,
+        onValueChange: (event)=>setItems(toSelectOptions(event.value))
+    };
+    const orderList = useOrderList(orderListProps);
+    const header = stringProperty(element, 'header');
+    const toggle = (item)=>setSelection((current)=>current.includes(item) ? current.filter((entry)=>entry !== item) : [
+                ...current,
+                item
+            ]);
+    return /*#__PURE__*/ jsxs("div", {
+        "data-scene-id": element.id,
+        className: "flex gap-2",
+        ...orderList.rootProps,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-1",
+                ...orderList.controlsProps,
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        ...orderList.firstProps,
+                        children: "⤒"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        ...orderList.prevProps,
+                        children: "↑"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        ...orderList.nextProps,
+                        children: "↓"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        ...orderList.lastProps,
+                        children: "⤓"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-1",
+                children: [
+                    header !== undefined && /*#__PURE__*/ jsx("span", {
+                        className: "font-semibold",
+                        children: header
+                    }),
+                    /*#__PURE__*/ jsx("ul", {
+                        className: "flex flex-col border",
+                        role: "listbox",
+                        "aria-multiselectable": true,
+                        ref: (node)=>{
+                            orderList.listRef.current = node;
+                        },
+                        ...orderList.listProps,
+                        children: items.map((item, index)=>/*#__PURE__*/ jsx("li", {
+                                role: "option",
+                                "aria-selected": selection.includes(item),
+                                className: "cursor-pointer px-3 py-1",
+                                onClick: ()=>toggle(item),
+                                ...orderList.getOptionProps(item, index),
+                                children: item.label
+                            }, item.value))
+                    })
+                ]
             })
+        ]
     });
 }
 

package/dist/esm/data/PrimeOrderList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeOrderList.js","sources":["../../../data/PrimeOrderList.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 { OrderList } from 'primereact/orderlist';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { optionsProperty, stringProperty } from '../properties';\nimport { SelectOption } from '../SelectOption';\n\n/**\n * The `PrimeReact:orderList` component - a list the user reorders with the supplied controls.\n *\n * Reordering is the component's entire purpose, so the order has to live somewhere that survives a\n * re-render; the adapter keeps it locally, seeded from `items`.\n *\n * In PrimeReact 11 this component becomes a hook rather than a component.\n */\nexport function PrimeOrderList({ element }: RegisteredComponentProps) {\n    const [items, setItems] = useState<SelectOption[]>(optionsProperty(element, 'items'));\n    return (\n        <OrderList\n            data-scene-id={element.id}\n            value={items}\n            onChange={(event) => setItems(event.value)}\n            dataKey='value'\n            header={stringProperty(element, 'header')}\n            itemTemplate={(item: SelectOption) => <span>{item.label}</span>}\n        />\n    );\n}\n"],"names":["PrimeOrderList","element","items","setItems","useState","optionsProperty","_jsx","OrderList","data-scene-id","id","value","onChange","event","dataKey","header","stringProperty","itemTemplate","item","span","label"],"mappings":";;;;;AASA;;;;;;;AAOC,IACM,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAA4B,EAAA;AAChE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAAyBC,gBAAgBJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AAC5E,IAAA,qBACIK,GAAA,CAACC,SAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBC,KAAAA,EAAOR,KAAAA;AACPS,QAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUT,QAAAA,CAASS,KAAAA,CAAMF,KAAK,CAAA;QACzCG,OAAAA,EAAQ,OAAA;AACRC,QAAAA,MAAAA,EAAQC,eAAed,OAAAA,EAAS,QAAA,CAAA;QAChCe,YAAAA,EAAc,CAACC,qBAAuBX,GAAA,CAACY,MAAAA,EAAAA;AAAMD,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKE;;;AAG9D;;;;"}
+{"version":3,"file":"PrimeOrderList.js","sources":["../../../data/PrimeOrderList.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 { type UseOrderListProps, useOrderList } from '@primereact/headless/orderlist';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { optionsProperty, stringProperty } from '../properties';\nimport { SelectOption } from '../SelectOption';\nimport { toSelectOptions } from './selectOptions';\n\n/**\n * The `PrimeReact:orderList` component - a list the user reorders with the supplied controls.\n *\n * PrimeReact 11 ships no styled order list at all: what survives is `useOrderList`, a headless hook that\n * owns the ordering, works out which moves are legal, and hands back ready-made props for the move\n * buttons - but renders nothing. The presentation below is therefore this package's, not PrimeReact's,\n * which is why it is written out in full rather than configured.\n *\n * Selection is the one piece the hook does not own. It reads `selection` and never writes it, and it\n * compares entries by identity, so the adapter holds the selected options and the very same object\n * references it passed in as the list. Reordering is the component's entire purpose, so the order has to\n * survive a re-render too; it is seeded from `items` once and kept from there on.\n */\nexport function PrimeOrderList({ element }: RegisteredComponentProps) {\n    const [items, setItems] = useState<SelectOption[]>(() => optionsProperty(element, 'items'));\n    const [selection, setSelection] = useState<SelectOption[]>([]);\n    const orderListProps: UseOrderListProps<SelectOption> = {\n        value: items,\n        selection,\n        onValueChange: (event) => setItems(toSelectOptions(event.value)),\n    };\n    const orderList = useOrderList(orderListProps);\n    const header = stringProperty(element, 'header');\n\n    const toggle = (item: SelectOption) =>\n        setSelection((current) => (current.includes(item) ? current.filter((entry) => entry !== item) : [...current, item]));\n\n    return (\n        <div data-scene-id={element.id} className='flex gap-2' {...orderList.rootProps}>\n            <div className='flex flex-col gap-1' {...orderList.controlsProps}>\n                <button {...orderList.firstProps}>⤒</button>\n                <button {...orderList.prevProps}>↑</button>\n                <button {...orderList.nextProps}>↓</button>\n                <button {...orderList.lastProps}>⤓</button>\n            </div>\n            <div className='flex flex-col gap-1'>\n                {header !== undefined && <span className='font-semibold'>{header}</span>}\n                <ul\n                    className='flex flex-col border'\n                    role='listbox'\n                    aria-multiselectable\n                    ref={(node) => {\n                        orderList.listRef.current = node;\n                    }}\n                    {...orderList.listProps}>\n                    {items.map((item, index) => (\n                        <li\n                            key={item.value}\n                            role='option'\n                            aria-selected={selection.includes(item)}\n                            className='cursor-pointer px-3 py-1'\n                            onClick={() => toggle(item)}\n                            {...orderList.getOptionProps(item, index)}>\n                            {item.label}\n                        </li>\n                    ))}\n                </ul>\n            </div>\n        </div>\n    );\n}\n"],"names":["PrimeOrderList","element","items","setItems","useState","optionsProperty","selection","setSelection","orderListProps","value","onValueChange","event","toSelectOptions","orderList","useOrderList","header","stringProperty","toggle","item","current","includes","filter","entry","_jsxs","div","data-scene-id","id","className","rootProps","controlsProps","_jsx","button","firstProps","prevProps","nextProps","lastProps","undefined","span","ul","role","aria-multiselectable","ref","node","listRef","listProps","map","index","li","aria-selected","onClick","getOptionProps","label"],"mappings":"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"}

package/dist/esm/data/PrimeOrganizationChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeOrganizationChart.d.ts","sourceRoot":"","sources":["../../../data/PrimeOrganizationChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAc/D,wBAAgB,sBAAsB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAI3E"}
+{"version":3,"file":"PrimeOrganizationChart.d.ts","sourceRoot":"","sources":["../../../data/PrimeOrganizationChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAoB/D,wBAAgB,sBAAsB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAkB3E"}

package/dist/esm/data/PrimeOrganizationChart.js

@@ -1,6 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { OrganizationChart } from 'primereact/organizationchart';
 import { treeNodesProperty } from '../treeNodes.js';
+import { toPrimeTreeNodes } from './primeTreeNodes.js';
 
 /**
  * The `PrimeReact:organizationChart` component - a hierarchy drawn top-down as connected boxes.
@@ -8,18 +9,41 @@ import { treeNodesProperty } from '../treeNodes.js';
  * Takes the same node model as `tree` and `treeSelect`, so one authored hierarchy can be shown three
  * different ways without being restructured.
  *
- * The empty case is guarded because PrimeReact's OrganizationChart reads the root node's `expanded` flag
- * without checking there is a root, and throws on an empty `value`. An element whose nodes have not been
- * authored yet is an ordinary state on a screen under construction; taking the whole screen down for it
- * would be the wrong failure.
+ * PrimeReact 10 threw on an empty `value`: it read the root node's `expanded` flag without checking there
+ * was a root, so an element whose nodes had not been authored yet took the whole screen down with it, and
+ * this adapter had to guard against its own empty case. PrimeReact 11 defaults the node list everywhere
+ * it reads it, and `OrganizationChart.Nodes` simply renders an empty subtree, so the guard is gone and
+ * an unconfigured chart renders as nothing rather than as an exception.
+ *
+ * The node body is declared once and applied to every node by the root's own recursion - `Nodes` invokes
+ * this child for each root node and each expanded node hands the same function down to its children, so
+ * there is no depth to walk here.
  */ function PrimeOrganizationChart({ element }) {
-    const nodes = treeNodesProperty(element, 'nodes');
-    if (nodes.length === 0) return /*#__PURE__*/ jsx("div", {
-        "data-scene-id": element.id
-    });
-    return /*#__PURE__*/ jsx(OrganizationChart, {
+    return /*#__PURE__*/ jsx(OrganizationChart.Root, {
         "data-scene-id": element.id,
-        value: nodes
+        value: toPrimeTreeNodes(treeNodesProperty(element, 'nodes')),
+        children: /*#__PURE__*/ jsx(OrganizationChart.Nodes, {
+            children: (row)=>/*#__PURE__*/ jsxs(OrganizationChart.Node, {
+                    uKey: row.node.key,
+                    children: [
+                        /*#__PURE__*/ jsx(OrganizationChart.Content, {
+                            children: /*#__PURE__*/ jsx(OrganizationChart.Label, {})
+                        }),
+                        /*#__PURE__*/ jsxs(OrganizationChart.Toggle, {
+                            children: [
+                                /*#__PURE__*/ jsx(OrganizationChart.ToggleIndicator, {
+                                    match: "collapsed",
+                                    children: "▾"
+                                }),
+                                /*#__PURE__*/ jsx(OrganizationChart.ToggleIndicator, {
+                                    match: "expanded",
+                                    children: "▴"
+                                })
+                            ]
+                        })
+                    ]
+                })
+        })
     });
 }
 

package/dist/esm/data/PrimeOrganizationChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeOrganizationChart.js","sources":["../../../data/PrimeOrganizationChart.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 { OrganizationChart } from 'primereact/organizationchart';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { treeNodesProperty } from '../treeNodes';\n\n/**\n * The `PrimeReact:organizationChart` component - a hierarchy drawn top-down as connected boxes.\n *\n * Takes the same node model as `tree` and `treeSelect`, so one authored hierarchy can be shown three\n * different ways without being restructured.\n *\n * The empty case is guarded because PrimeReact's OrganizationChart reads the root node's `expanded` flag\n * without checking there is a root, and throws on an empty `value`. An element whose nodes have not been\n * authored yet is an ordinary state on a screen under construction; taking the whole screen down for it\n * would be the wrong failure.\n */\nexport function PrimeOrganizationChart({ element }: RegisteredComponentProps) {\n    const nodes = treeNodesProperty(element, 'nodes');\n    if (nodes.length === 0) return <div data-scene-id={element.id} />;\n    return <OrganizationChart data-scene-id={element.id} value={nodes} />;\n}\n"],"names":["PrimeOrganizationChart","element","nodes","treeNodesProperty","length","_jsx","div","data-scene-id","id","OrganizationChart","value"],"mappings":";;;;AAOA;;;;;;;;;;AAUC,IACM,SAASA,sBAAAA,CAAuB,EAAEC,OAAO,EAA4B,EAAA;IACxE,MAAMC,KAAAA,GAAQC,kBAAkBF,OAAAA,EAAS,OAAA,CAAA;AACzC,IAAA,IAAIC,KAAAA,CAAME,MAAM,KAAK,CAAA,EAAG,qBAAOC,GAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeN,QAAQO;;AAC3D,IAAA,qBAAOH,GAAA,CAACI,iBAAAA,EAAAA;AAAkBF,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;QAAEE,KAAAA,EAAOR;;AAChE;;;;"}
+{"version":3,"file":"PrimeOrganizationChart.js","sources":["../../../data/PrimeOrganizationChart.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 { OrganizationChart, type OrganizationChartNodeRow } from 'primereact/organizationchart';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { treeNodesProperty } from '../treeNodes';\nimport { toPrimeTreeNodes } from './primeTreeNodes';\n\n/**\n * The `PrimeReact:organizationChart` component - a hierarchy drawn top-down as connected boxes.\n *\n * Takes the same node model as `tree` and `treeSelect`, so one authored hierarchy can be shown three\n * different ways without being restructured.\n *\n * PrimeReact 10 threw on an empty `value`: it read the root node's `expanded` flag without checking there\n * was a root, so an element whose nodes had not been authored yet took the whole screen down with it, and\n * this adapter had to guard against its own empty case. PrimeReact 11 defaults the node list everywhere\n * it reads it, and `OrganizationChart.Nodes` simply renders an empty subtree, so the guard is gone and\n * an unconfigured chart renders as nothing rather than as an exception.\n *\n * The node body is declared once and applied to every node by the root's own recursion - `Nodes` invokes\n * this child for each root node and each expanded node hands the same function down to its children, so\n * there is no depth to walk here.\n */\nexport function PrimeOrganizationChart({ element }: RegisteredComponentProps) {\n    return (\n        <OrganizationChart.Root data-scene-id={element.id} value={toPrimeTreeNodes(treeNodesProperty(element, 'nodes'))}>\n            <OrganizationChart.Nodes>\n                {(row: OrganizationChartNodeRow) => (\n                    <OrganizationChart.Node uKey={row.node.key}>\n                        <OrganizationChart.Content>\n                            <OrganizationChart.Label />\n                        </OrganizationChart.Content>\n                        <OrganizationChart.Toggle>\n                            <OrganizationChart.ToggleIndicator match='collapsed'>▾</OrganizationChart.ToggleIndicator>\n                            <OrganizationChart.ToggleIndicator match='expanded'>▴</OrganizationChart.ToggleIndicator>\n                        </OrganizationChart.Toggle>\n                    </OrganizationChart.Node>\n                )}\n            </OrganizationChart.Nodes>\n        </OrganizationChart.Root>\n    );\n}\n"],"names":["PrimeOrganizationChart","element","_jsx","OrganizationChart","Root","data-scene-id","id","value","toPrimeTreeNodes","treeNodesProperty","Nodes","row","_jsxs","Node","uKey","node","key","Content","Label","Toggle","ToggleIndicator","match"],"mappings":";;;;;AAQA;;;;;;;;;;;;;;;AAeC,IACM,SAASA,sBAAAA,CAAuB,EAAEC,OAAO,EAA4B,EAAA;IACxE,qBACIC,GAAA,CAACC,kBAAkBC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;QAAEC,KAAAA,EAAOC,gBAAAA,CAAiBC,kBAAkBR,OAAAA,EAAS,OAAA,CAAA,CAAA;gCAClGC,GAAA,CAACC,kBAAkBO,KAAK,EAAA;sBACnB,CAACC,GAAAA,iBACEC,IAAA,CAACT,iBAAAA,CAAkBU,IAAI,EAAA;oBAACC,IAAAA,EAAMH,GAAAA,CAAII,IAAI,CAACC,GAAG;;AACtC,sCAAAd,GAAA,CAACC,kBAAkBc,OAAO,EAAA;oDACtBf,GAAA,CAACC,kBAAkBe,KAAK,EAAA,EAAA;;AAE5B,sCAAAN,IAAA,CAACT,kBAAkBgB,MAAM,EAAA;;AACrB,8CAAAjB,GAAA,CAACC,kBAAkBiB,eAAe,EAAA;oCAACC,KAAAA,EAAM,WAAA;AAAY,oCAAA,QAAA,EAAA;;AACrD,8CAAAnB,GAAA,CAACC,kBAAkBiB,eAAe,EAAA;oCAACC,KAAAA,EAAM,UAAA;AAAW,oCAAA,QAAA,EAAA;;;;;;;;AAOhF;;;;"}

package/dist/esm/data/PrimePaginator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimePaginator.d.ts","sourceRoot":"","sources":["../../../data/PrimePaginator.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAS/D,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAiBnE"}
+{"version":3,"file":"PrimePaginator.d.ts","sourceRoot":"","sources":["../../../data/PrimePaginator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAiB/D,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAYnE"}

package/dist/esm/data/PrimePaginator.js

@@ -1,31 +1,29 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { Paginator } from 'primereact/paginator';
 import { numberProperty } from '../properties.js';
+import { Pagination } from './Pagination.js';
 
 /**
  * The `PrimeReact:paginator` component - page navigation for a list a screen paginates itself.
  *
  * Owns the current page locally so the control is operable in a preview; a Scene element has no place to
  * record which page the user is on.
+ *
+ * The authored `first` property still names a record offset, as it did in PrimeReact 10, but PrimeReact
+ * 11's paginator counts pages rather than records - so the offset is divided into a page number here,
+ * with the page size floored at one so an authored zero cannot turn that division into a NaN page.
+ * Keeping the property in record terms means a screen written for the previous version still lands on the
+ * page it asked for. `rowsPerPageOptions` has no counterpart in PrimeReact 11 and is not carried over:
+ * the new paginator has no rows-per-page control to put the options in.
  */ function PrimePaginator({ element }) {
-    const pageSize = numberProperty(element, 'pageSize', 10);
-    const [first, setFirst] = useState(numberProperty(element, 'first', 0));
-    const [rows, setRows] = useState(pageSize);
-    return /*#__PURE__*/ jsx(Paginator, {
-        "data-scene-id": element.id,
-        first: first,
-        rows: rows,
-        totalRecords: numberProperty(element, 'totalRecords', 0),
-        rowsPerPageOptions: [
-            pageSize,
-            pageSize * 2,
-            pageSize * 5
-        ],
-        onPageChange: (event)=>{
-            setFirst(event.first);
-            setRows(event.rows);
-        }
+    const pageSize = Math.max(numberProperty(element, 'pageSize', 10), 1);
+    const [page, setPage] = useState(()=>Math.floor(numberProperty(element, 'first', 0) / pageSize) + 1);
+    return /*#__PURE__*/ jsx(Pagination, {
+        sceneId: element.id,
+        page: page,
+        total: numberProperty(element, 'totalRecords', 0),
+        itemsPerPage: pageSize,
+        onPageChange: setPage
     });
 }