@cratis/scene.primereact 4.17.0 → 4.18.1

package/data/PrimeDataTable.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { ReactElement, ReactNode, isValidElement } from 'react';
-import { DataTable, type DataTableFilterInstance, type DataTablePaginationInstance, type DataTableTBodyItemOptions } from 'primereact/datatable';
+import { DataTable, useDataTableContext, type DataTableFilterInstance, type DataTablePaginationInstance, type DataTableTBodyItemOptions } from 'primereact/datatable';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, numberProperty, recordArrayProperty, stringProperty } from '../properties';
 import { Column, ColumnProps } from './Column';
@@ -52,9 +52,9 @@ export function PrimeDataTable({ element, slots }: RegisteredComponentProps) {
                     <DataTable.THead>
                         <DataTable.THeadRow>
                             {columns.map((column, index) => (
-                                <DataTable.THeadCell key={column.field ?? index}>
+                                <SortAwareHeadCell key={column.field ?? index} sortField={column.sortable ? column.field : undefined}>
                                     {column.sortable && column.field ? (
-                                        <DataTable.Sort field={column.field}>
+                                        <DataTable.Sort field={column.field} aria-sort={undefined} aria-label={`Sort by ${headerOf(column)}`}>
                                             {headerOf(column)}
                                             <DataTable.SortIndicator match='asc'> ▲</DataTable.SortIndicator>
                                             <DataTable.SortIndicator match='desc'> ▼</DataTable.SortIndicator>
@@ -74,7 +74,7 @@ export function PrimeDataTable({ element, slots }: RegisteredComponentProps) {
                                             )}
                                         </DataTable.Filter>
                                     )}
-                                </DataTable.THeadCell>
+                                </SortAwareHeadCell>
                             ))}
                         </DataTable.THeadRow>
                     </DataTable.THead>
@@ -140,3 +140,17 @@ function cellOf(column: ColumnProps, row: Record<string, unknown>): ReactNode {
     if (column.field === undefined) return '';
     return String(row[column.field] ?? '');
 }
+
+/**
+ * A header cell that carries the table's sort state for assistive technology.
+ *
+ * `aria-sort` is a property of a column header, not of the button inside it - PrimeReact's sort trigger puts it
+ * on the button, where WAI-ARIA does not allow it and a screen reader never reads it as the column's order. So
+ * the trigger is rendered without it and the cell, which owns the `columnheader` role, states the order here.
+ */
+function SortAwareHeadCell({ sortField, children }: { sortField?: string; children: ReactNode }) {
+    const table = useDataTableContext() as { getSortOrder?: (field: string) => number } | undefined;
+    const order = sortField === undefined ? undefined : table?.getSortOrder?.(sortField) ?? 0;
+    const ariaSort = order === undefined ? undefined : order > 0 ? 'ascending' : order < 0 ? 'descending' : 'none';
+    return <DataTable.THeadCell aria-sort={ariaSort}>{children}</DataTable.THeadCell>;
+}

package/dist/cjs/data/PrimeDataTable.js

@@ -49,10 +49,13 @@ var columnDefinitions = require('./columnDefinitions.js');
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(datatable.DataTable.THead, {
                             children: /*#__PURE__*/ jsxRuntime.jsx(datatable.DataTable.THeadRow, {
-                                children: columns.map((column, index)=>/*#__PURE__*/ jsxRuntime.jsxs(datatable.DataTable.THeadCell, {
+                                children: columns.map((column, index)=>/*#__PURE__*/ jsxRuntime.jsxs(SortAwareHeadCell, {
+                                        sortField: column.sortable ? column.field : undefined,
                                         children: [
                                             column.sortable && column.field ? /*#__PURE__*/ jsxRuntime.jsxs(datatable.DataTable.Sort, {
                                                 field: column.field,
+                                                "aria-sort": undefined,
+                                                "aria-label": `Sort by ${headerOf(column)}`,
                                                 children: [
                                                     headerOf(column),
                                                     /*#__PURE__*/ jsxRuntime.jsx(datatable.DataTable.SortIndicator, {
@@ -150,6 +153,21 @@ function cellOf(column, row) {
     if (column.field === undefined) return '';
     return String(row[column.field] ?? '');
 }
+/**
+ * A header cell that carries the table's sort state for assistive technology.
+ *
+ * `aria-sort` is a property of a column header, not of the button inside it - PrimeReact's sort trigger puts it
+ * on the button, where WAI-ARIA does not allow it and a screen reader never reads it as the column's order. So
+ * the trigger is rendered without it and the cell, which owns the `columnheader` role, states the order here.
+ */ function SortAwareHeadCell({ sortField, children }) {
+    const table = datatable.useDataTableContext();
+    const order = sortField === undefined ? undefined : table?.getSortOrder?.(sortField) ?? 0;
+    const ariaSort = order === undefined ? undefined : order > 0 ? 'ascending' : order < 0 ? 'descending' : 'none';
+    return /*#__PURE__*/ jsxRuntime.jsx(datatable.DataTable.THeadCell, {
+        "aria-sort": ariaSort,
+        children: children
+    });
+}
 
 exports.PrimeDataTable = PrimeDataTable;
 //# sourceMappingURL=PrimeDataTable.js.map

package/dist/cjs/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 { 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 *\n * A host that is still loading the rows sets `loading`, and one whose query failed sets `error` to the\n * message to show. Both replace the rows with one announced row - a status while loading, an alert on\n * error - and keep the column headers, so the table keeps its shape and the reader knows why it is empty.\n */\nexport function PrimeDataTable({ element, slots }: RegisteredComponentProps) {\n    const loading = booleanProperty(element, 'loading', false);\n    const error = stringProperty(element, 'error');\n    const rows = loading || error !== undefined ? [] : 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            aria-busy={loading}\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                                {error !== undefined\n                                    ? <span role='alert'>{error}</span>\n                                    : loading\n                                        ? <span role='status'>{stringProperty(element, 'loadingMessage', 'Loading…')}</span>\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","loading","booleanProperty","error","stringProperty","rows","undefined","recordArrayProperty","declared","declaredColumns","columns","length","columnDefinitions","pageSize","numberProperty","size","_jsxs","DataTable","Root","data-scene-id","id","aria-busy","data","removableSort","paginator","stripedRows","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","role","Pagination","pagination","div","button","type","disabled","canPrev","onClick","onPageChange","page","pageCount","canNext","content","node","isValidElement","Column","props","header","row","body","String"],"mappings":"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"}
+{"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, useDataTableContext, 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 *\n * A host that is still loading the rows sets `loading`, and one whose query failed sets `error` to the\n * message to show. Both replace the rows with one announced row - a status while loading, an alert on\n * error - and keep the column headers, so the table keeps its shape and the reader knows why it is empty.\n */\nexport function PrimeDataTable({ element, slots }: RegisteredComponentProps) {\n    const loading = booleanProperty(element, 'loading', false);\n    const error = stringProperty(element, 'error');\n    const rows = loading || error !== undefined ? [] : 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            aria-busy={loading}\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                                <SortAwareHeadCell key={column.field ?? index} sortField={column.sortable ? column.field : undefined}>\n                                    {column.sortable && column.field ? (\n                                        <DataTable.Sort field={column.field} aria-sort={undefined} aria-label={`Sort by ${headerOf(column)}`}>\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                                </SortAwareHeadCell>\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                                {error !== undefined\n                                    ? <span role='alert'>{error}</span>\n                                    : loading\n                                        ? <span role='status'>{stringProperty(element, 'loadingMessage', 'Loading…')}</span>\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\n/**\n * A header cell that carries the table's sort state for assistive technology.\n *\n * `aria-sort` is a property of a column header, not of the button inside it - PrimeReact's sort trigger puts it\n * on the button, where WAI-ARIA does not allow it and a screen reader never reads it as the column's order. So\n * the trigger is rendered without it and the cell, which owns the `columnheader` role, states the order here.\n */\nfunction SortAwareHeadCell({ sortField, children }: { sortField?: string; children: ReactNode }) {\n    const table = useDataTableContext() as { getSortOrder?: (field: string) => number } | undefined;\n    const order = sortField === undefined ? undefined : table?.getSortOrder?.(sortField) ?? 0;\n    const ariaSort = order === undefined ? undefined : order > 0 ? 'ascending' : order < 0 ? 'descending' : 'none';\n    return <DataTable.THeadCell aria-sort={ariaSort}>{children}</DataTable.THeadCell>;\n}\n"],"names":["PrimeDataTable","element","slots","loading","booleanProperty","error","stringProperty","rows","undefined","recordArrayProperty","declared","declaredColumns","columns","length","columnDefinitions","pageSize","numberProperty","size","_jsxs","DataTable","Root","data-scene-id","id","aria-busy","data","removableSort","paginator","stripedRows","showGridlines","_jsx","TableContainer","Table","THead","THeadRow","map","column","index","SortAwareHeadCell","sortField","sortable","field","Sort","aria-sort","aria-label","headerOf","SortIndicator","match","span","filter","Filter","display","input","className","value","onChange","event","target","TBody","item","Row","columnIndex","Cell","cellOf","EmptyTBody","colSpan","Math","max","role","Pagination","pagination","div","button","type","disabled","canPrev","onClick","onPageChange","page","pageCount","canNext","content","node","isValidElement","Column","props","header","row","body","String","children","table","useDataTableContext","order","getSortOrder","ariaSort","THeadCell"],"mappings":"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"}

package/dist/cjs/misc/PrimeProgressBar.js

@@ -15,6 +15,9 @@ var properties = require('../properties.js');
  * height belong there rather than on `Root`. `Indicator` renders its children only in determinate mode,
  * which is why the value label can be handed to it unconditionally: an indeterminate bar has no
  * percentage to print and drops it on its own.
+ *
+ * A progress bar with no accessible name is announced as just "progress bar", so the element's `label` names
+ * what is progressing (`Progress` when it says nothing), and screen readers read it with the value.
  */ function PrimeProgressBar({ element }) {
     const value = properties.numberProperty(element, 'value');
     return /*#__PURE__*/ jsxRuntime.jsx(progressbar.ProgressBar.Root, {
@@ -22,6 +25,7 @@ var properties = require('../properties.js');
         mode: value === undefined ? 'indeterminate' : 'determinate',
         children: /*#__PURE__*/ jsxRuntime.jsx(progressbar.ProgressBar.Track, {
             "data-scene-id": element.id,
+            "aria-label": properties.stringProperty(element, 'label', 'Progress'),
             style: {
                 height: '1rem'
             },

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

@@ -1 +1 @@
-{"version":3,"file":"PrimeProgressBar.js","sources":["../../../misc/PrimeProgressBar.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 { ProgressBar } from 'primereact/progressbar';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:progressBar` component - determinate or indeterminate progress.\n *\n * The mode follows whether a `value` was given at all: progress you cannot measure is exactly what\n * indeterminate mode is for, so an element with no value animates rather than sitting at zero.\n *\n * In PrimeReact 11 the root is a headless wrapper that renders no element of its own - `Track` is the\n * first real DOM node and the one carrying the ARIA `progressbar` role - so `data-scene-id` and the bar's\n * height belong there rather than on `Root`. `Indicator` renders its children only in determinate mode,\n * which is why the value label can be handed to it unconditionally: an indeterminate bar has no\n * percentage to print and drops it on its own.\n */\nexport function PrimeProgressBar({ element }: RegisteredComponentProps) {\n    const value = numberProperty(element, 'value');\n    return (\n        <ProgressBar.Root value={value} mode={value === undefined ? 'indeterminate' : 'determinate'}>\n            <ProgressBar.Track data-scene-id={element.id} style={{ height: '1rem' }}>\n                <ProgressBar.Indicator>{booleanProperty(element, 'showValue', true) && <ProgressBar.Value />}</ProgressBar.Indicator>\n            </ProgressBar.Track>\n        </ProgressBar.Root>\n    );\n}\n"],"names":["PrimeProgressBar","element","value","numberProperty","_jsx","ProgressBar","Root","mode","undefined","Track","data-scene-id","id","style","height","Indicator","booleanProperty","Value"],"mappings":";;;;;;AAOA;;;;;;;;;;;AAWC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;IAClE,MAAMC,KAAAA,GAAQC,0BAAeF,OAAAA,EAAS,OAAA,CAAA;IACtC,qBACIG,cAAA,CAACC,wBAAYC,IAAI,EAAA;QAACJ,KAAAA,EAAOA,KAAAA;QAAOK,IAAAA,EAAML,KAAAA,KAAUM,YAAY,eAAA,GAAkB,aAAA;gCAC1EJ,cAAA,CAACC,wBAAYI,KAAK,EAAA;AAACC,YAAAA,eAAAA,EAAeT,QAAQU,EAAE;YAAEC,KAAAA,EAAO;gBAAEC,MAAAA,EAAQ;AAAO,aAAA;oCAClET,cAAA,CAACC,wBAAYS,SAAS,EAAA;AAAEC,gBAAAA,QAAAA,EAAAA,0BAAAA,CAAgBd,OAAAA,EAAS,WAAA,EAAa,IAAA,CAAA,kBAASG,cAAA,CAACC,wBAAYW,KAAK,EAAA,EAAA;;;;AAIzG;;"}
+{"version":3,"file":"PrimeProgressBar.js","sources":["../../../misc/PrimeProgressBar.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 { ProgressBar } from 'primereact/progressbar';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:progressBar` component - determinate or indeterminate progress.\n *\n * The mode follows whether a `value` was given at all: progress you cannot measure is exactly what\n * indeterminate mode is for, so an element with no value animates rather than sitting at zero.\n *\n * In PrimeReact 11 the root is a headless wrapper that renders no element of its own - `Track` is the\n * first real DOM node and the one carrying the ARIA `progressbar` role - so `data-scene-id` and the bar's\n * height belong there rather than on `Root`. `Indicator` renders its children only in determinate mode,\n * which is why the value label can be handed to it unconditionally: an indeterminate bar has no\n * percentage to print and drops it on its own.\n *\n * A progress bar with no accessible name is announced as just \"progress bar\", so the element's `label` names\n * what is progressing (`Progress` when it says nothing), and screen readers read it with the value.\n */\nexport function PrimeProgressBar({ element }: RegisteredComponentProps) {\n    const value = numberProperty(element, 'value');\n    return (\n        <ProgressBar.Root value={value} mode={value === undefined ? 'indeterminate' : 'determinate'}>\n            <ProgressBar.Track data-scene-id={element.id} aria-label={stringProperty(element, 'label', 'Progress')} style={{ height: '1rem' }}>\n                <ProgressBar.Indicator>{booleanProperty(element, 'showValue', true) && <ProgressBar.Value />}</ProgressBar.Indicator>\n            </ProgressBar.Track>\n        </ProgressBar.Root>\n    );\n}\n"],"names":["PrimeProgressBar","element","value","numberProperty","_jsx","ProgressBar","Root","mode","undefined","Track","data-scene-id","id","aria-label","stringProperty","style","height","Indicator","booleanProperty","Value"],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;AAcC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;IAClE,MAAMC,KAAAA,GAAQC,0BAAeF,OAAAA,EAAS,OAAA,CAAA;IACtC,qBACIG,cAAA,CAACC,wBAAYC,IAAI,EAAA;QAACJ,KAAAA,EAAOA,KAAAA;QAAOK,IAAAA,EAAML,KAAAA,KAAUM,YAAY,eAAA,GAAkB,aAAA;gCAC1EJ,cAAA,CAACC,wBAAYI,KAAK,EAAA;AAACC,YAAAA,eAAAA,EAAeT,QAAQU,EAAE;YAAEC,YAAAA,EAAYC,yBAAAA,CAAeZ,SAAS,OAAA,EAAS,UAAA,CAAA;YAAaa,KAAAA,EAAO;gBAAEC,MAAAA,EAAQ;AAAO,aAAA;oCAC5HX,cAAA,CAACC,wBAAYW,SAAS,EAAA;AAAEC,gBAAAA,QAAAA,EAAAA,0BAAAA,CAAgBhB,OAAAA,EAAS,WAAA,EAAa,IAAA,CAAA,kBAASG,cAAA,CAACC,wBAAYa,KAAK,EAAA,EAAA;;;;AAIzG;;"}

package/dist/esm/data/PrimeDataTable.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isValidElement } from 'react';
-import { DataTable } from 'primereact/datatable';
+import { DataTable, useDataTableContext } from 'primereact/datatable';
 import { booleanProperty, stringProperty, recordArrayProperty, numberProperty } from '../properties.js';
 import { Column } from './Column.js';
 import { columnDefinitions } from './columnDefinitions.js';
@@ -47,10 +47,13 @@ import { columnDefinitions } from './columnDefinitions.js';
                     children: [
                         /*#__PURE__*/ jsx(DataTable.THead, {
                             children: /*#__PURE__*/ jsx(DataTable.THeadRow, {
-                                children: columns.map((column, index)=>/*#__PURE__*/ jsxs(DataTable.THeadCell, {
+                                children: columns.map((column, index)=>/*#__PURE__*/ jsxs(SortAwareHeadCell, {
+                                        sortField: column.sortable ? column.field : undefined,
                                         children: [
                                             column.sortable && column.field ? /*#__PURE__*/ jsxs(DataTable.Sort, {
                                                 field: column.field,
+                                                "aria-sort": undefined,
+                                                "aria-label": `Sort by ${headerOf(column)}`,
                                                 children: [
                                                     headerOf(column),
                                                     /*#__PURE__*/ jsx(DataTable.SortIndicator, {
@@ -148,6 +151,21 @@ function cellOf(column, row) {
     if (column.field === undefined) return '';
     return String(row[column.field] ?? '');
 }
+/**
+ * A header cell that carries the table's sort state for assistive technology.
+ *
+ * `aria-sort` is a property of a column header, not of the button inside it - PrimeReact's sort trigger puts it
+ * on the button, where WAI-ARIA does not allow it and a screen reader never reads it as the column's order. So
+ * the trigger is rendered without it and the cell, which owns the `columnheader` role, states the order here.
+ */ function SortAwareHeadCell({ sortField, children }) {
+    const table = useDataTableContext();
+    const order = sortField === undefined ? undefined : table?.getSortOrder?.(sortField) ?? 0;
+    const ariaSort = order === undefined ? undefined : order > 0 ? 'ascending' : order < 0 ? 'descending' : 'none';
+    return /*#__PURE__*/ jsx(DataTable.THeadCell, {
+        "aria-sort": ariaSort,
+        children: children
+    });
+}
 
 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 { 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 *\n * A host that is still loading the rows sets `loading`, and one whose query failed sets `error` to the\n * message to show. Both replace the rows with one announced row - a status while loading, an alert on\n * error - and keep the column headers, so the table keeps its shape and the reader knows why it is empty.\n */\nexport function PrimeDataTable({ element, slots }: RegisteredComponentProps) {\n    const loading = booleanProperty(element, 'loading', false);\n    const error = stringProperty(element, 'error');\n    const rows = loading || error !== undefined ? [] : 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            aria-busy={loading}\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                                {error !== undefined\n                                    ? <span role='alert'>{error}</span>\n                                    : loading\n                                        ? <span role='status'>{stringProperty(element, 'loadingMessage', 'Loading…')}</span>\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","loading","booleanProperty","error","stringProperty","rows","undefined","recordArrayProperty","declared","declaredColumns","columns","length","columnDefinitions","pageSize","numberProperty","size","_jsxs","DataTable","Root","data-scene-id","id","aria-busy","data","removableSort","paginator","stripedRows","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","role","Pagination","pagination","div","button","type","disabled","canPrev","onClick","onPageChange","page","pageCount","canNext","content","node","isValidElement","Column","props","header","row","body","String"],"mappings":"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"}
+{"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, useDataTableContext, 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 *\n * A host that is still loading the rows sets `loading`, and one whose query failed sets `error` to the\n * message to show. Both replace the rows with one announced row - a status while loading, an alert on\n * error - and keep the column headers, so the table keeps its shape and the reader knows why it is empty.\n */\nexport function PrimeDataTable({ element, slots }: RegisteredComponentProps) {\n    const loading = booleanProperty(element, 'loading', false);\n    const error = stringProperty(element, 'error');\n    const rows = loading || error !== undefined ? [] : 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            aria-busy={loading}\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                                <SortAwareHeadCell key={column.field ?? index} sortField={column.sortable ? column.field : undefined}>\n                                    {column.sortable && column.field ? (\n                                        <DataTable.Sort field={column.field} aria-sort={undefined} aria-label={`Sort by ${headerOf(column)}`}>\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                                </SortAwareHeadCell>\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                                {error !== undefined\n                                    ? <span role='alert'>{error}</span>\n                                    : loading\n                                        ? <span role='status'>{stringProperty(element, 'loadingMessage', 'Loading…')}</span>\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\n/**\n * A header cell that carries the table's sort state for assistive technology.\n *\n * `aria-sort` is a property of a column header, not of the button inside it - PrimeReact's sort trigger puts it\n * on the button, where WAI-ARIA does not allow it and a screen reader never reads it as the column's order. So\n * the trigger is rendered without it and the cell, which owns the `columnheader` role, states the order here.\n */\nfunction SortAwareHeadCell({ sortField, children }: { sortField?: string; children: ReactNode }) {\n    const table = useDataTableContext() as { getSortOrder?: (field: string) => number } | undefined;\n    const order = sortField === undefined ? undefined : table?.getSortOrder?.(sortField) ?? 0;\n    const ariaSort = order === undefined ? undefined : order > 0 ? 'ascending' : order < 0 ? 'descending' : 'none';\n    return <DataTable.THeadCell aria-sort={ariaSort}>{children}</DataTable.THeadCell>;\n}\n"],"names":["PrimeDataTable","element","slots","loading","booleanProperty","error","stringProperty","rows","undefined","recordArrayProperty","declared","declaredColumns","columns","length","columnDefinitions","pageSize","numberProperty","size","_jsxs","DataTable","Root","data-scene-id","id","aria-busy","data","removableSort","paginator","stripedRows","showGridlines","_jsx","TableContainer","Table","THead","THeadRow","map","column","index","SortAwareHeadCell","sortField","sortable","field","Sort","aria-sort","aria-label","headerOf","SortIndicator","match","span","filter","Filter","display","input","className","value","onChange","event","target","TBody","item","Row","columnIndex","Cell","cellOf","EmptyTBody","colSpan","Math","max","role","Pagination","pagination","div","button","type","disabled","canPrev","onClick","onPageChange","page","pageCount","canNext","content","node","isValidElement","Column","props","header","row","body","String","children","table","useDataTableContext","order","getSortOrder","ariaSort","THeadCell"],"mappings":"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"}

package/dist/esm/misc/PrimeProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeProgressBar.d.ts","sourceRoot":"","sources":["../../../misc/PrimeProgressBar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAe/D,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BASrE"}
+{"version":3,"file":"PrimeProgressBar.d.ts","sourceRoot":"","sources":["../../../misc/PrimeProgressBar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAkB/D,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BASrE"}

package/dist/esm/misc/PrimeProgressBar.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { ProgressBar } from 'primereact/progressbar';
-import { numberProperty, booleanProperty } from '../properties.js';
+import { numberProperty, booleanProperty, stringProperty } from '../properties.js';
 
 /**
  * The `PrimeReact:progressBar` component - determinate or indeterminate progress.
@@ -13,6 +13,9 @@ import { numberProperty, booleanProperty } from '../properties.js';
  * height belong there rather than on `Root`. `Indicator` renders its children only in determinate mode,
  * which is why the value label can be handed to it unconditionally: an indeterminate bar has no
  * percentage to print and drops it on its own.
+ *
+ * A progress bar with no accessible name is announced as just "progress bar", so the element's `label` names
+ * what is progressing (`Progress` when it says nothing), and screen readers read it with the value.
  */ function PrimeProgressBar({ element }) {
     const value = numberProperty(element, 'value');
     return /*#__PURE__*/ jsx(ProgressBar.Root, {
@@ -20,6 +23,7 @@ import { numberProperty, booleanProperty } from '../properties.js';
         mode: value === undefined ? 'indeterminate' : 'determinate',
         children: /*#__PURE__*/ jsx(ProgressBar.Track, {
             "data-scene-id": element.id,
+            "aria-label": stringProperty(element, 'label', 'Progress'),
             style: {
                 height: '1rem'
             },

package/dist/esm/misc/PrimeProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeProgressBar.js","sources":["../../../misc/PrimeProgressBar.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 { ProgressBar } from 'primereact/progressbar';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:progressBar` component - determinate or indeterminate progress.\n *\n * The mode follows whether a `value` was given at all: progress you cannot measure is exactly what\n * indeterminate mode is for, so an element with no value animates rather than sitting at zero.\n *\n * In PrimeReact 11 the root is a headless wrapper that renders no element of its own - `Track` is the\n * first real DOM node and the one carrying the ARIA `progressbar` role - so `data-scene-id` and the bar's\n * height belong there rather than on `Root`. `Indicator` renders its children only in determinate mode,\n * which is why the value label can be handed to it unconditionally: an indeterminate bar has no\n * percentage to print and drops it on its own.\n */\nexport function PrimeProgressBar({ element }: RegisteredComponentProps) {\n    const value = numberProperty(element, 'value');\n    return (\n        <ProgressBar.Root value={value} mode={value === undefined ? 'indeterminate' : 'determinate'}>\n            <ProgressBar.Track data-scene-id={element.id} style={{ height: '1rem' }}>\n                <ProgressBar.Indicator>{booleanProperty(element, 'showValue', true) && <ProgressBar.Value />}</ProgressBar.Indicator>\n            </ProgressBar.Track>\n        </ProgressBar.Root>\n    );\n}\n"],"names":["PrimeProgressBar","element","value","numberProperty","_jsx","ProgressBar","Root","mode","undefined","Track","data-scene-id","id","style","height","Indicator","booleanProperty","Value"],"mappings":";;;;AAOA;;;;;;;;;;;AAWC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;IAClE,MAAMC,KAAAA,GAAQC,eAAeF,OAAAA,EAAS,OAAA,CAAA;IACtC,qBACIG,GAAA,CAACC,YAAYC,IAAI,EAAA;QAACJ,KAAAA,EAAOA,KAAAA;QAAOK,IAAAA,EAAML,KAAAA,KAAUM,YAAY,eAAA,GAAkB,aAAA;gCAC1EJ,GAAA,CAACC,YAAYI,KAAK,EAAA;AAACC,YAAAA,eAAAA,EAAeT,QAAQU,EAAE;YAAEC,KAAAA,EAAO;gBAAEC,MAAAA,EAAQ;AAAO,aAAA;oCAClET,GAAA,CAACC,YAAYS,SAAS,EAAA;AAAEC,gBAAAA,QAAAA,EAAAA,eAAAA,CAAgBd,OAAAA,EAAS,WAAA,EAAa,IAAA,CAAA,kBAASG,GAAA,CAACC,YAAYW,KAAK,EAAA,EAAA;;;;AAIzG;;"}
+{"version":3,"file":"PrimeProgressBar.js","sources":["../../../misc/PrimeProgressBar.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 { ProgressBar } from 'primereact/progressbar';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:progressBar` component - determinate or indeterminate progress.\n *\n * The mode follows whether a `value` was given at all: progress you cannot measure is exactly what\n * indeterminate mode is for, so an element with no value animates rather than sitting at zero.\n *\n * In PrimeReact 11 the root is a headless wrapper that renders no element of its own - `Track` is the\n * first real DOM node and the one carrying the ARIA `progressbar` role - so `data-scene-id` and the bar's\n * height belong there rather than on `Root`. `Indicator` renders its children only in determinate mode,\n * which is why the value label can be handed to it unconditionally: an indeterminate bar has no\n * percentage to print and drops it on its own.\n *\n * A progress bar with no accessible name is announced as just \"progress bar\", so the element's `label` names\n * what is progressing (`Progress` when it says nothing), and screen readers read it with the value.\n */\nexport function PrimeProgressBar({ element }: RegisteredComponentProps) {\n    const value = numberProperty(element, 'value');\n    return (\n        <ProgressBar.Root value={value} mode={value === undefined ? 'indeterminate' : 'determinate'}>\n            <ProgressBar.Track data-scene-id={element.id} aria-label={stringProperty(element, 'label', 'Progress')} style={{ height: '1rem' }}>\n                <ProgressBar.Indicator>{booleanProperty(element, 'showValue', true) && <ProgressBar.Value />}</ProgressBar.Indicator>\n            </ProgressBar.Track>\n        </ProgressBar.Root>\n    );\n}\n"],"names":["PrimeProgressBar","element","value","numberProperty","_jsx","ProgressBar","Root","mode","undefined","Track","data-scene-id","id","aria-label","stringProperty","style","height","Indicator","booleanProperty","Value"],"mappings":";;;;AAOA;;;;;;;;;;;;;;AAcC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;IAClE,MAAMC,KAAAA,GAAQC,eAAeF,OAAAA,EAAS,OAAA,CAAA;IACtC,qBACIG,GAAA,CAACC,YAAYC,IAAI,EAAA;QAACJ,KAAAA,EAAOA,KAAAA;QAAOK,IAAAA,EAAML,KAAAA,KAAUM,YAAY,eAAA,GAAkB,aAAA;gCAC1EJ,GAAA,CAACC,YAAYI,KAAK,EAAA;AAACC,YAAAA,eAAAA,EAAeT,QAAQU,EAAE;YAAEC,YAAAA,EAAYC,cAAAA,CAAeZ,SAAS,OAAA,EAAS,UAAA,CAAA;YAAaa,KAAAA,EAAO;gBAAEC,MAAAA,EAAQ;AAAO,aAAA;oCAC5HX,GAAA,CAACC,YAAYW,SAAS,EAAA;AAAEC,gBAAAA,QAAAA,EAAAA,eAAAA,CAAgBhB,OAAAA,EAAS,WAAA,EAAa,IAAA,CAAA,kBAASG,GAAA,CAACC,YAAYa,KAAK,EAAA,EAAA;;;;AAIzG;;"}