@cratis/scene.primereact 1.1.0 → 3.0.0

package/data/PrimeOrderList.tsx

@@ -2,29 +2,70 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { OrderList } from 'primereact/orderlist';
+import { type UseOrderListProps, useOrderList } from '@primereact/headless/orderlist';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { optionsProperty, stringProperty } from '../properties';
 import { SelectOption } from '../SelectOption';
+import { toSelectOptions } from './selectOptions';
 
 /**
  * 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.
  */
 export function PrimeOrderList({ element }: RegisteredComponentProps) {
-    const [items, setItems] = useState<SelectOption[]>(optionsProperty(element, 'items'));
+    const [items, setItems] = useState<SelectOption[]>(() => optionsProperty(element, 'items'));
+    const [selection, setSelection] = useState<SelectOption[]>([]);
+    const orderListProps: UseOrderListProps<SelectOption> = {
+        value: items,
+        selection,
+        onValueChange: (event) => setItems(toSelectOptions(event.value)),
+    };
+    const orderList = useOrderList(orderListProps);
+    const header = stringProperty(element, 'header');
+
+    const toggle = (item: SelectOption) =>
+        setSelection((current) => (current.includes(item) ? current.filter((entry) => entry !== item) : [...current, item]));
+
     return (
-        <OrderList
-            data-scene-id={element.id}
-            value={items}
-            onChange={(event) => setItems(event.value)}
-            dataKey='value'
-            header={stringProperty(element, 'header')}
-            itemTemplate={(item: SelectOption) => <span>{item.label}</span>}
-        />
+        <div data-scene-id={element.id} className='flex gap-2' {...orderList.rootProps}>
+            <div className='flex flex-col gap-1' {...orderList.controlsProps}>
+                <button {...orderList.firstProps}>⤒</button>
+                <button {...orderList.prevProps}>↑</button>
+                <button {...orderList.nextProps}>↓</button>
+                <button {...orderList.lastProps}>⤓</button>
+            </div>
+            <div className='flex flex-col gap-1'>
+                {header !== undefined && <span className='font-semibold'>{header}</span>}
+                <ul
+                    className='flex flex-col border'
+                    role='listbox'
+                    aria-multiselectable
+                    ref={(node) => {
+                        orderList.listRef.current = node;
+                    }}
+                    {...orderList.listProps}>
+                    {items.map((item, index) => (
+                        <li
+                            key={item.value}
+                            role='option'
+                            aria-selected={selection.includes(item)}
+                            className='cursor-pointer px-3 py-1'
+                            onClick={() => toggle(item)}
+                            {...orderList.getOptionProps(item, index)}>
+                            {item.label}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
     );
 }

package/data/PrimeOrganizationChart.tsx

@@ -1,9 +1,10 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { OrganizationChart } from 'primereact/organizationchart';
+import { OrganizationChart, type OrganizationChartNodeRow } from 'primereact/organizationchart';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { treeNodesProperty } from '../treeNodes';
+import { toPrimeTreeNodes } from './primeTreeNodes';
 
 /**
  * The `PrimeReact:organizationChart` component - a hierarchy drawn top-down as connected boxes.
@@ -11,13 +12,32 @@ import { treeNodesProperty } from '../treeNodes';
  * 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.
  */
 export function PrimeOrganizationChart({ element }: RegisteredComponentProps) {
-    const nodes = treeNodesProperty(element, 'nodes');
-    if (nodes.length === 0) return <div data-scene-id={element.id} />;
-    return <OrganizationChart data-scene-id={element.id} value={nodes} />;
+    return (
+        <OrganizationChart.Root data-scene-id={element.id} value={toPrimeTreeNodes(treeNodesProperty(element, 'nodes'))}>
+            <OrganizationChart.Nodes>
+                {(row: OrganizationChartNodeRow) => (
+                    <OrganizationChart.Node uKey={row.node.key}>
+                        <OrganizationChart.Content>
+                            <OrganizationChart.Label />
+                        </OrganizationChart.Content>
+                        <OrganizationChart.Toggle>
+                            <OrganizationChart.ToggleIndicator match='collapsed'>▾</OrganizationChart.ToggleIndicator>
+                            <OrganizationChart.ToggleIndicator match='expanded'>▴</OrganizationChart.ToggleIndicator>
+                        </OrganizationChart.Toggle>
+                    </OrganizationChart.Node>
+                )}
+            </OrganizationChart.Nodes>
+        </OrganizationChart.Root>
+    );
 }

package/data/PrimePaginator.tsx

@@ -2,31 +2,33 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { Paginator } from 'primereact/paginator';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { numberProperty } from '../properties';
+import { Pagination } from './Pagination';
 
 /**
  * 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.
  */
 export function PrimePaginator({ element }: RegisteredComponentProps) {
-    const pageSize = numberProperty(element, 'pageSize', 10);
-    const [first, setFirst] = useState(numberProperty(element, 'first', 0));
-    const [rows, setRows] = useState(pageSize);
+    const pageSize = Math.max(numberProperty(element, 'pageSize', 10), 1);
+    const [page, setPage] = useState(() => Math.floor(numberProperty(element, 'first', 0) / pageSize) + 1);
     return (
-        <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);
-            }}
+        <Pagination
+            sceneId={element.id}
+            page={page}
+            total={numberProperty(element, 'totalRecords', 0)}
+            itemsPerPage={pageSize}
+            onPageChange={setPage}
         />
     );
 }

package/data/PrimePickList.tsx

@@ -2,35 +2,72 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { PickList } from 'primereact/picklist';
+import { type UsePickListProps, usePickList } from '@primereact/headless/picklist';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { optionsProperty, stringProperty } from '../properties';
 import { SelectOption } from '../SelectOption';
+import { toSelectOptions } from './selectOptions';
 
 /**
  * The `PrimeReact:pickList` component - two lists with items moved between them.
  *
- * Both sides are held locally for the same reason {@link PrimeOrderList} holds its order: moving items is
- * what the component does, and a Scene element cannot record the result.
+ * Like {@link PrimeOrderList}, this is built on a headless hook because PrimeReact 11 ships no styled
+ * pick list: `usePickList` decides what a move does to each side and which move buttons are live, and the
+ * markup below is this package's own.
  *
- * In PrimeReact 11 this component becomes a hook rather than a component.
+ * Both sides are held locally for the same reason the order list holds its order - moving items is what
+ * the component does, and a Scene element cannot record the result. Selection is held locally too, but
+ * for a different reason: the hook reads it and only ever *prunes* it, when a selected item leaves the
+ * side it was on, so something has to add to it when the user picks a row.
  */
 export function PrimePickList({ element }: RegisteredComponentProps) {
-    const [source, setSource] = useState<SelectOption[]>(optionsProperty(element, 'source'));
-    const [target, setTarget] = useState<SelectOption[]>(optionsProperty(element, 'target'));
+    const [source, setSource] = useState<SelectOption[]>(() => optionsProperty(element, 'source'));
+    const [target, setTarget] = useState<SelectOption[]>(() => optionsProperty(element, 'target'));
+    const [selection, setSelection] = useState<SelectOption[]>([]);
+    const pickListProps: UsePickListProps<SelectOption> = {
+        source,
+        target,
+        selection,
+        onValueChange: (event) => {
+            setSource(toSelectOptions(event.source));
+            setTarget(toSelectOptions(event.target));
+        },
+        onSelectionChange: (event) => setSelection(toSelectOptions(event.value)),
+    };
+    const pickList = usePickList(pickListProps);
+
+    const toggle = (item: SelectOption) =>
+        setSelection((current) => (current.includes(item) ? current.filter((entry) => entry !== item) : [...current, item]));
+
+    const list = (heading: string, items: SelectOption[], side: 'source' | 'target', listProps: Record<string, unknown>) => (
+        <div className='flex flex-col gap-1'>
+            <span className='font-semibold'>{heading}</span>
+            <ul className='flex flex-col border' role='listbox' aria-label={heading} aria-multiselectable {...listProps}>
+                {items.map((item, index) => (
+                    <li
+                        key={item.value}
+                        role='option'
+                        aria-selected={selection.includes(item)}
+                        className='cursor-pointer px-3 py-1'
+                        onClick={() => toggle(item)}
+                        {...pickList.getOptionProps(item, index, side)}>
+                        {item.label}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+
     return (
-        <PickList
-            data-scene-id={element.id}
-            source={source}
-            target={target}
-            onChange={(event) => {
-                setSource(event.source);
-                setTarget(event.target);
-            }}
-            dataKey='value'
-            sourceHeader={stringProperty(element, 'sourceHeader', 'Available')}
-            targetHeader={stringProperty(element, 'targetHeader', 'Selected')}
-            itemTemplate={(item: SelectOption) => <span>{item.label}</span>}
-        />
+        <div data-scene-id={element.id} className='flex gap-2' {...pickList.rootProps}>
+            {list(stringProperty(element, 'sourceHeader', 'Available'), source, 'source', pickList.sourceListProps)}
+            <div className='flex flex-col gap-1 self-center'>
+                <button {...pickList.moveToTargetProps}>›</button>
+                <button {...pickList.moveAllToTargetProps}>»</button>
+                <button {...pickList.moveToSourceProps}>‹</button>
+                <button {...pickList.moveAllToSourceProps}>«</button>
+            </div>
+            {list(stringProperty(element, 'targetHeader', 'Selected'), target, 'target', pickList.targetListProps)}
+        </div>
     );
 }

package/data/PrimeTimeline.tsx

@@ -8,26 +8,61 @@ import { recordArrayProperty, stringProperty } from '../properties';
 /**
  * The `PrimeReact:timeline` component - events laid out along an axis.
  *
- * Supplies its own content and opposite templates from the `titleField`, `descriptionField` and
- * `dateField` properties, because Timeline renders only the connector line without them.
+ * PrimeReact 11 replaced the `value` / `content` / `opposite` render props with a composition: a root
+ * that carries only alignment and orientation, and event, opposite, separator, marker, connector and
+ * content parts the caller assembles per event. The adapter walks the events itself and builds that
+ * structure from the `titleField`, `descriptionField` and `dateField` properties.
+ *
+ * The connector is left off the last event on purpose - it is the line *between* two events, and drawing
+ * one after the final marker makes the timeline look truncated rather than finished.
+ *
+ * The authored property is still called `layout`, as in PrimeReact 10, even though the prop it feeds is
+ * now `orientation`; renaming it would break every screen for no gain the author can see.
  */
 export function PrimeTimeline({ element }: RegisteredComponentProps) {
     const titleField = stringProperty(element, 'titleField', 'title');
     const descriptionField = stringProperty(element, 'descriptionField', 'description');
     const dateField = stringProperty(element, 'dateField', 'date');
+    const events = recordArrayProperty(element, 'events');
+
     return (
-        <Timeline
+        <Timeline.Root
             data-scene-id={element.id}
-            value={recordArrayProperty(element, 'events')}
-            align={stringProperty(element, 'align', 'left') as 'left' | 'right' | 'alternate' | 'top' | 'bottom'}
-            layout={stringProperty(element, 'layout', 'vertical') as 'vertical' | 'horizontal'}
-            opposite={(event: Record<string, unknown>) => <span className='text-sm opacity-75'>{String(event[dateField] ?? '')}</span>}
-            content={(event: Record<string, unknown>) => (
-                <div className='flex flex-col'>
-                    <span className='font-semibold'>{String(event[titleField] ?? '')}</span>
-                    <span className='text-sm opacity-75'>{String(event[descriptionField] ?? '')}</span>
-                </div>
-            )}
-        />
+            align={alignmentOf(stringProperty(element, 'align', 'left'))}
+            orientation={orientationOf(stringProperty(element, 'layout', 'vertical'))}>
+            {events.map((event, index) => (
+                <Timeline.Event key={index}>
+                    <Timeline.Opposite>
+                        <span className='text-sm opacity-75'>{String(event[dateField] ?? '')}</span>
+                    </Timeline.Opposite>
+                    <Timeline.Separator>
+                        <Timeline.Marker />
+                        {index < events.length - 1 && <Timeline.Connector />}
+                    </Timeline.Separator>
+                    <Timeline.Content>
+                        <div className='flex flex-col'>
+                            <span className='font-semibold'>{String(event[titleField] ?? '')}</span>
+                            <span className='text-sm opacity-75'>{String(event[descriptionField] ?? '')}</span>
+                        </div>
+                    </Timeline.Content>
+                </Timeline.Event>
+            ))}
+        </Timeline.Root>
     );
 }
+
+function alignmentOf(value: string): 'left' | 'right' | 'alternate' | 'top' | 'bottom' {
+    switch (value) {
+        case 'right':
+        case 'alternate':
+        case 'top':
+        case 'bottom':
+            return value;
+        default:
+            return 'left';
+    }
+}
+
+function orientationOf(value: string): 'horizontal' | 'vertical' {
+    return value === 'horizontal' ? 'horizontal' : 'vertical';
+}

package/data/PrimeTree.tsx

@@ -1,21 +1,44 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Tree } from 'primereact/tree';
+import { Tree, type TreeNodeRow } from 'primereact/tree';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty } from '../properties';
 import { treeNodesProperty } from '../treeNodes';
+import { toPrimeTreeNodes } from './primeTreeNodes';
 
 /**
  * The `PrimeReact:tree` component - a hierarchy the user can expand and collapse.
+ *
+ * PrimeReact 11 renders the tree through a flat iterator: `Tree.Nodes` calls its child once per *visible*
+ * node, already flattened, and the indentation comes from a level custom property rather than from
+ * nesting. That is why this looks like a list even though it draws a tree - the recursion happens in the
+ * root, which resolves each node by key, and the adapter only has to say what one row looks like.
+ *
+ * The two toggle indicators are matched on state rather than swapped in code so that the collapsed and
+ * expanded glyphs are both declared up front; `Tree.Toggle` renders a spacer instead of a button for a
+ * leaf, which keeps every row's label on the same left edge.
  */
 export function PrimeTree({ element }: RegisteredComponentProps) {
     return (
-        <Tree
+        <Tree.Root
             data-scene-id={element.id}
-            value={treeNodesProperty(element, 'nodes')}
-            filter={booleanProperty(element, 'filter', false)}
-            selectionMode={booleanProperty(element, 'selectable', false) ? 'single' : undefined}
-        />
+            value={toPrimeTreeNodes(treeNodesProperty(element, 'nodes'))}
+            selectionMode={booleanProperty(element, 'selectable', false) ? 'single' : undefined}>
+            {booleanProperty(element, 'filter', false) && <Tree.Filter as='input' placeholder='Search' />}
+            <Tree.Nodes>
+                {(row: TreeNodeRow) => (
+                    <Tree.Node uKey={row.node.key}>
+                        <Tree.Content>
+                            <Tree.Toggle>
+                                <Tree.ToggleIndicator match='collapsed'>▸</Tree.ToggleIndicator>
+                                <Tree.ToggleIndicator match='expanded'>▾</Tree.ToggleIndicator>
+                            </Tree.Toggle>
+                            <Tree.Label>{row.node.label}</Tree.Label>
+                        </Tree.Content>
+                    </Tree.Node>
+                )}
+            </Tree.Nodes>
+        </Tree.Root>
     );
 }

package/data/columnDefinitions.ts

@@ -19,9 +19,11 @@ import { ColumnDefinition } from './ColumnDefinition';
  * an empty grid they have to debug.
  *
  * Note that the children are read from `element.slots` - the *model* - and not from the rendered React
- * nodes the adapter is handed. PrimeReact's DataTable identifies its columns by React element type, so a
- * Scene adapter wrapping `Column` would not be recognized as one; reading the definitions off the model
- * and constructing real `Column` elements is what makes nested `column` children work at all.
+ * nodes the adapter is handed. Those nodes are `PrimeColumn` adapters produced by Scene's renderer, one
+ * level removed from the `Column` declarations they render, so no amount of inspecting them recovers the
+ * declaration. Reading the model instead is what makes nested `column` children work at all, and it is
+ * why this derivation survived PrimeReact 11 removing `primereact/column` unchanged: it never depended
+ * on the component in the first place.
  *
  * @param element The table element.
  * @param rows The rows the table will show, used for the inference step.

package/data/index.ts

@@ -1,16 +1,15 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+export * from './Column';
 export * from './ColumnDefinition';
 export * from './columnDefinitions';
 export * from './PrimeColumn';
 export * from './PrimeDataTable';
 export * from './PrimeDataView';
 export * from './PrimeTree';
-export * from './PrimeTreeTable';
 export * from './PrimeTimeline';
 export * from './PrimePaginator';
 export * from './PrimeOrderList';
 export * from './PrimePickList';
 export * from './PrimeOrganizationChart';
-export * from './PrimeVirtualScroller';

package/data/primeTreeNodes.ts

@@ -0,0 +1,68 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { TreeNode } from '../TreeNode';
+
+/**
+ * A node in the shape PrimeReact 11's tree and organization chart both accept.
+ *
+ * The one difference from Scene's own {@link TreeNode} is that `key` is required. PrimeReact 11 resolves
+ * every node by key - `Tree.Node` and `OrganizationChart.Node` take a `uKey` and look the node up rather
+ * than receiving it - so a node without one cannot be rendered at all, where in PrimeReact 10 it merely
+ * misbehaved. Scene's `TreeNode` keeps `key` optional because an author need not supply one; this type is
+ * where that optionality is discharged.
+ *
+ * Declared as a type alias rather than an interface on purpose: PrimeReact's node types carry an index
+ * signature for arbitrary extra data, and only a type alias is assignable to one.
+ */
+export type PrimeTreeNode = {
+    /**
+     * Identity, unique across the whole tree.
+     */
+    key: string;
+
+    /**
+     * The text shown for the node.
+     */
+    label?: string;
+
+    /**
+     * An icon class shown beside the label.
+     */
+    icon?: string;
+
+    /**
+     * Child nodes. A node with no `children` is a leaf.
+     */
+    children?: PrimeTreeNode[];
+
+    /**
+     * Whatever the author attached to the node, carried through untouched.
+     */
+    data?: unknown;
+};
+
+/**
+ * Converts Scene's tree model into the node shape PrimeReact 11 renders.
+ *
+ * Synthesizes a key from the node's path when the author did not supply one, for the same reason
+ * `toTreeNodes` does: two siblings sharing a label must not share an identity, or expanding one expands
+ * the other. The path is stable across re-renders, so expansion and selection survive them.
+ *
+ * `expanded` and `selectable` are dropped rather than carried. PrimeReact 11 moved both off the node and
+ * onto the component - expansion is `defaultExpandedKeys` / `defaultCollapsedKeys`, selectability is the
+ * component's `selectionMode` - so a per-node flag has nowhere to land and would silently do nothing.
+ *
+ * @param nodes The Scene nodes to convert.
+ * @param parentKey The key of the node these belong to, used to build stable child keys.
+ * @returns The converted nodes, in order.
+ */
+export function toPrimeTreeNodes(nodes: TreeNode[], parentKey = ''): PrimeTreeNode[] {
+    return nodes.map((node, index) => {
+        const { children, expanded, selectable, ...rest } = node;
+        const key = node.key ?? (parentKey === '' ? `${index}` : `${parentKey}-${index}`);
+        const converted: PrimeTreeNode = { ...rest, key };
+        if (children !== undefined) converted.children = toPrimeTreeNodes(children, key);
+        return converted;
+    });
+}

package/data/selectOptions.ts

@@ -0,0 +1,29 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { SelectOption } from '../SelectOption';
+
+/**
+ * Narrows the untyped item list a PrimeReact 11 headless list hook hands back into {@link SelectOption}s.
+ *
+ * The order list and pick list hooks are generic over their items but report changes as `unknown[]`,
+ * because they only ever move entries around and never look inside one. The adapters fed them
+ * `SelectOption`s and get the very same object references back, so this could have been a cast - but a
+ * cast would also sail through if a future hook ever synthesized an entry, and the failure would surface
+ * as a blank row rather than a missing one. Filtering on the shape keeps the untrusted boundary honest
+ * for the cost of one pass over a list the user is looking at.
+ *
+ * @param values The entries as the hook reported them.
+ * @returns The entries that are usable options, in order.
+ */
+export function toSelectOptions(values: unknown[]): SelectOption[] {
+    return values.filter(
+        (value): value is SelectOption =>
+            typeof value === 'object' &&
+            value !== null &&
+            'label' in value &&
+            typeof value.label === 'string' &&
+            'value' in value &&
+            typeof value.value === 'string'
+    );
+}

package/dist/cjs/button/PrimeButton.js

@@ -11,18 +11,42 @@ var properties = require('../properties.js');
  * `PrimeReact` resolves `button` to this one and records that it shadowed core's - which is the whole
  * point of override priority, and the reason a screen written against the fallback vocabulary gets a real
  * themed button the moment a component library is added to the profile, with no edit to the screen.
+ *
+ * PrimeReact 11 reshaped the props under it, and the adapter absorbs all of it so screens do not have to.
+ * `label` and `icon` are children now rather than props. The `outlined` and `text` booleans collapsed into
+ * a single `variant`, which is the better model - they were never combinable - and the authored booleans
+ * are still read and translated. `warning` became `warn`.
+ *
+ * `loading` is the one that could not simply be translated: v11 dropped it. The state still matters to a
+ * screen, so it is rebuilt from parts that exist - a spinning icon in place of the button's own, the
+ * button disabled so the action cannot be fired twice, and `aria-busy` so the state is announced rather
+ * than only drawn. The icon is marked decorative throughout because the label already names the action.
  */ function PrimeButton({ element, slots }) {
-    return /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+    const icon = properties.stringProperty(element, 'icon');
+    const severity = properties.severityProperty(element, 'severity');
+    const loading = properties.booleanProperty(element, 'loading', false);
+    let variant;
+    if (properties.booleanProperty(element, 'outlined', false)) variant = 'outlined';
+    else if (properties.booleanProperty(element, 'text', false)) variant = 'text';
+    return /*#__PURE__*/ jsxRuntime.jsxs(button.Button, {
         "data-scene-id": element.id,
-        label: properties.stringProperty(element, 'label'),
-        icon: properties.stringProperty(element, 'icon'),
-        severity: properties.stringProperty(element, 'severity'),
-        outlined: properties.booleanProperty(element, 'outlined', false),
-        text: properties.booleanProperty(element, 'text', false),
+        severity: severity,
+        variant: variant,
         rounded: properties.booleanProperty(element, 'rounded', false),
-        loading: properties.booleanProperty(element, 'loading', false),
-        disabled: properties.booleanProperty(element, 'disabled', false),
-        children: slots.content
+        disabled: loading || properties.booleanProperty(element, 'disabled', false),
+        "aria-busy": loading,
+        children: [
+            loading && /*#__PURE__*/ jsxRuntime.jsx("i", {
+                className: "pi pi-spinner pi-spin",
+                "aria-hidden": "true"
+            }),
+            !loading && icon !== undefined && /*#__PURE__*/ jsxRuntime.jsx("i", {
+                className: icon,
+                "aria-hidden": "true"
+            }),
+            properties.stringProperty(element, 'label'),
+            slots.content
+        ]
     });
 }
 

package/dist/cjs/button/PrimeButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeButton.js","sources":["../../../button/PrimeButton.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Button } from 'primereact/button';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:button` component.\n *\n * Deliberately claims the same bare name `core` already declares. A `ui profile` listing `core` and then\n * `PrimeReact` resolves `button` to this one and records that it shadowed core's - which is the whole\n * point of override priority, and the reason a screen written against the fallback vocabulary gets a real\n * themed button the moment a component library is added to the profile, with no edit to the screen.\n */\nexport function PrimeButton({ element, slots }: RegisteredComponentProps) {\n    return (\n        <Button\n            data-scene-id={element.id}\n            label={stringProperty(element, 'label')}\n            icon={stringProperty(element, 'icon')}\n            severity={stringProperty(element, 'severity') as 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | undefined}\n            outlined={booleanProperty(element, 'outlined', false)}\n            text={booleanProperty(element, 'text', false)}\n            rounded={booleanProperty(element, 'rounded', false)}\n            loading={booleanProperty(element, 'loading', false)}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            {slots.content}\n        </Button>\n    );\n}\n"],"names":["PrimeButton","element","slots","_jsx","Button","data-scene-id","id","label","stringProperty","icon","severity","outlined","booleanProperty","text","rounded","loading","disabled","content"],"mappings":";;;;;;AAOA;;;;;;;AAOC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACpE,IAAA,qBACIC,cAAA,CAACC,aAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;AACzBC,QAAAA,KAAAA,EAAOC,0BAAeP,OAAAA,EAAS,OAAA,CAAA;AAC/BQ,QAAAA,IAAAA,EAAMD,0BAAeP,OAAAA,EAAS,MAAA,CAAA;AAC9BS,QAAAA,QAAAA,EAAUF,0BAAeP,OAAAA,EAAS,UAAA,CAAA;QAClCU,QAAAA,EAAUC,0BAAAA,CAAgBX,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CY,IAAAA,EAAMD,0BAAAA,CAAgBX,SAAS,MAAA,EAAQ,KAAA,CAAA;QACvCa,OAAAA,EAASF,0BAAAA,CAAgBX,SAAS,SAAA,EAAW,KAAA,CAAA;QAC7Cc,OAAAA,EAASH,0BAAAA,CAAgBX,SAAS,SAAA,EAAW,KAAA,CAAA;QAC7Ce,QAAAA,EAAUJ,0BAAAA,CAAgBX,SAAS,UAAA,EAAY,KAAA,CAAA;AAC9CC,QAAAA,QAAAA,EAAAA,KAAAA,CAAMe;;AAGnB;;;;"}
+{"version":3,"file":"PrimeButton.js","sources":["../../../button/PrimeButton.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Button } from 'primereact/button';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport {booleanProperty, severityProperty, stringProperty} from '../properties';\n\n/**\n * The `PrimeReact:button` component.\n *\n * Deliberately claims the same bare name `core` already declares. A `ui profile` listing `core` and then\n * `PrimeReact` resolves `button` to this one and records that it shadowed core's - which is the whole\n * point of override priority, and the reason a screen written against the fallback vocabulary gets a real\n * themed button the moment a component library is added to the profile, with no edit to the screen.\n *\n * PrimeReact 11 reshaped the props under it, and the adapter absorbs all of it so screens do not have to.\n * `label` and `icon` are children now rather than props. The `outlined` and `text` booleans collapsed into\n * a single `variant`, which is the better model - they were never combinable - and the authored booleans\n * are still read and translated. `warning` became `warn`.\n *\n * `loading` is the one that could not simply be translated: v11 dropped it. The state still matters to a\n * screen, so it is rebuilt from parts that exist - a spinning icon in place of the button's own, the\n * button disabled so the action cannot be fired twice, and `aria-busy` so the state is announced rather\n * than only drawn. The icon is marked decorative throughout because the label already names the action.\n */\nexport function PrimeButton({ element, slots }: RegisteredComponentProps) {\n    const icon = stringProperty(element, 'icon');\n    const severity = severityProperty(element, 'severity');\n    const loading = booleanProperty(element, 'loading', false);\n\n    let variant: 'link' | 'text' | 'outlined' | undefined;\n    if (booleanProperty(element, 'outlined', false)) variant = 'outlined';\n    else if (booleanProperty(element, 'text', false)) variant = 'text';\n\n    return (\n        <Button\n            data-scene-id={element.id}\n            severity={severity}\n            variant={variant}\n            rounded={booleanProperty(element, 'rounded', false)}\n            disabled={loading || booleanProperty(element, 'disabled', false)}\n            aria-busy={loading}>\n            {loading && <i className='pi pi-spinner pi-spin' aria-hidden='true' />}\n            {!loading && icon !== undefined && <i className={icon} aria-hidden='true' />}\n            {stringProperty(element, 'label')}\n            {slots.content}\n        </Button>\n    );\n}\n"],"names":["PrimeButton","element","slots","icon","stringProperty","severity","severityProperty","loading","booleanProperty","variant","_jsxs","Button","data-scene-id","id","rounded","disabled","aria-busy","_jsx","i","className","aria-hidden","undefined","content"],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;;;;AAiBC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACpE,MAAMC,IAAAA,GAAOC,0BAAeH,OAAAA,EAAS,MAAA,CAAA;IACrC,MAAMI,QAAAA,GAAWC,4BAAiBL,OAAAA,EAAS,UAAA,CAAA;IAC3C,MAAMM,OAAAA,GAAUC,0BAAAA,CAAgBP,OAAAA,EAAS,SAAA,EAAW,KAAA,CAAA;IAEpD,IAAIQ,OAAAA;AACJ,IAAA,IAAID,0BAAAA,CAAgBP,OAAAA,EAAS,UAAA,EAAY,KAAA,CAAA,EAAQQ,OAAAA,GAAU,UAAA;AACtD,SAAA,IAAID,0BAAAA,CAAgBP,OAAAA,EAAS,MAAA,EAAQ,KAAA,CAAA,EAAQQ,OAAAA,GAAU,MAAA;AAE5D,IAAA,qBACIC,eAAA,CAACC,aAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeX,QAAQY,EAAE;QACzBR,QAAAA,EAAUA,QAAAA;QACVI,OAAAA,EAASA,OAAAA;QACTK,OAAAA,EAASN,0BAAAA,CAAgBP,SAAS,SAAA,EAAW,KAAA,CAAA;QAC7Cc,QAAAA,EAAUR,OAAAA,IAAWC,0BAAAA,CAAgBP,OAAAA,EAAS,UAAA,EAAY,KAAA,CAAA;QAC1De,WAAAA,EAAWT,OAAAA;;AACVA,YAAAA,OAAAA,kBAAWU,cAAA,CAACC,GAAAA,EAAAA;gBAAEC,SAAAA,EAAU,uBAAA;gBAAwBC,aAAAA,EAAY;;YAC5D,CAACb,OAAAA,IAAWJ,IAAAA,KAASkB,SAAAA,kBAAaJ,cAAA,CAACC,GAAAA,EAAAA;gBAAEC,SAAAA,EAAWhB,IAAAA;gBAAMiB,aAAAA,EAAY;;AAClEhB,YAAAA,yBAAAA,CAAeH,OAAAA,EAAS,OAAA,CAAA;AACxBC,YAAAA,KAAAA,CAAMoB;;;AAGnB;;;;"}