@cratis/scene.primereact 0.1.0

package/data/PrimeOrderList.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) Cratis. All rights reserved.
+// 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 { RegisteredComponentProps } from '@cratis/scene.react';
+import { optionsProperty, stringProperty } from '../properties';
+import { SelectOption } from '../SelectOption';
+
+/**
+ * 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`.
+ *
+ * In PrimeReact 11 this component becomes a hook rather than a component.
+ */
+export function PrimeOrderList({ element }: RegisteredComponentProps) {
+    const [items, setItems] = useState<SelectOption[]>(optionsProperty(element, 'items'));
+    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>}
+        />
+    );
+}

package/data/PrimeOrganizationChart.tsx

@@ -0,0 +1,23 @@
+// 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 { RegisteredComponentProps } from '@cratis/scene.react';
+import { treeNodesProperty } from '../treeNodes';
+
+/**
+ * The `PrimeReact:organizationChart` component - a hierarchy drawn top-down as connected boxes.
+ *
+ * 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.
+ */
+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} />;
+}

package/data/PrimePaginator.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// 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';
+
+/**
+ * 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.
+ */
+export function PrimePaginator({ element }: RegisteredComponentProps) {
+    const pageSize = numberProperty(element, 'pageSize', 10);
+    const [first, setFirst] = useState(numberProperty(element, 'first', 0));
+    const [rows, setRows] = useState(pageSize);
+    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);
+            }}
+        />
+    );
+}

package/data/PrimePickList.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// 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 { RegisteredComponentProps } from '@cratis/scene.react';
+import { optionsProperty, stringProperty } from '../properties';
+import { SelectOption } from '../SelectOption';
+
+/**
+ * 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.
+ *
+ * In PrimeReact 11 this component becomes a hook rather than a component.
+ */
+export function PrimePickList({ element }: RegisteredComponentProps) {
+    const [source, setSource] = useState<SelectOption[]>(optionsProperty(element, 'source'));
+    const [target, setTarget] = useState<SelectOption[]>(optionsProperty(element, 'target'));
+    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>}
+        />
+    );
+}

package/data/PrimeTimeline.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Timeline } from 'primereact/timeline';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+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.
+ */
+export function PrimeTimeline({ element }: RegisteredComponentProps) {
+    const titleField = stringProperty(element, 'titleField', 'title');
+    const descriptionField = stringProperty(element, 'descriptionField', 'description');
+    const dateField = stringProperty(element, 'dateField', 'date');
+    return (
+        <Timeline
+            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>
+            )}
+        />
+    );
+}

package/data/PrimeTree.tsx

@@ -0,0 +1,21 @@
+// 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 { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty } from '../properties';
+import { treeNodesProperty } from '../treeNodes';
+
+/**
+ * The `PrimeReact:tree` component - a hierarchy the user can expand and collapse.
+ */
+export function PrimeTree({ element }: RegisteredComponentProps) {
+    return (
+        <Tree
+            data-scene-id={element.id}
+            value={treeNodesProperty(element, 'nodes')}
+            filter={booleanProperty(element, 'filter', false)}
+            selectionMode={booleanProperty(element, 'selectable', false) ? 'single' : undefined}
+        />
+    );
+}

package/data/PrimeTreeTable.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Column } from 'primereact/column';
+import { TreeTable } from 'primereact/treetable';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { recordArrayProperty, stringArrayProperty } from '../properties';
+import { treeNodesProperty } from '../treeNodes';
+
+/**
+ * The `PrimeReact:treeTable` component - a table whose rows nest.
+ *
+ * Columns address the node's `data` object, so they are read from a `columns` property here rather than
+ * inferred: a tree node's own shape (key, label, children) is structure, not data, and inferring columns
+ * from it would produce a table of the tree's plumbing.
+ */
+export function PrimeTreeTable({ element }: RegisteredComponentProps) {
+    const nodes = treeNodesProperty(element, 'nodes');
+    const named = recordArrayProperty(element, 'columns')
+        .map((column) => ({ field: column.field, header: column.header ?? column.field }))
+        .filter((column): column is { field: string; header: unknown } => typeof column.field === 'string')
+        .map((column) => ({ field: column.field, header: typeof column.header === 'string' ? column.header : column.field }));
+    const columns = named.length > 0 ? named : stringArrayProperty(element, 'columns').map((field) => ({ field, header: field }));
+
+    return (
+        <TreeTable data-scene-id={element.id} value={nodes}>
+            {columns.map((column, index) => (
+                <Column key={column.field} field={column.field} header={column.header} expander={index === 0} />
+            ))}
+        </TreeTable>
+    );
+}

package/data/PrimeVirtualScroller.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, stringArrayProperty } from '../properties';
+
+/**
+ * The `PrimeReact:virtualScroller` component - a long list that renders only the visible window.
+ *
+ * VirtualScroller needs a fixed `itemSize` and an explicitly sized viewport to know what to render; both
+ * are supplied with defaults so an element authored with only `items` still scrolls rather than
+ * collapsing to zero height.
+ */
+export function PrimeVirtualScroller({ element }: RegisteredComponentProps) {
+    const itemSize = numberProperty(element, 'itemSize', 40);
+    return (
+        <VirtualScroller
+            data-scene-id={element.id}
+            items={stringArrayProperty(element, 'items')}
+            itemSize={itemSize}
+            className='w-64 border'
+            style={{ height: `${numberProperty(element, 'height', 200)}px` }}
+            itemTemplate={(item: string) => (
+                <div className='flex items-center px-3' style={{ height: `${itemSize}px` }}>
+                    {item}
+                </div>
+            )}
+        />
+    );
+}

package/data/columnDefinitions.ts

@@ -0,0 +1,55 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ExternalComponent, SceneElement } from '@cratis/scene.model';
+import { recordArrayProperty, stringArrayProperty } from '../properties';
+import { ColumnDefinition } from './ColumnDefinition';
+
+/**
+ * Works out a table's columns, preferring what the screen said most explicitly.
+ *
+ * There are three ways a screen can express columns, and this walks them in order of intent:
+ *
+ * 1. Nested `column` children. Screenplay's screen vocabulary produces these, so they come first.
+ * 2. A `columns` property, for a screen that would rather configure the table than nest elements.
+ * 3. Nothing at all - in which case the keys of the first row are used.
+ *
+ * The third step matters more than it looks: a table given rows and no column configuration is the most
+ * common thing an author writes first, and inferring the columns means it renders their data instead of
+ * 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.
+ *
+ * @param element The table element.
+ * @param rows The rows the table will show, used for the inference step.
+ * @returns The column definitions, in order.
+ */
+export function columnDefinitions(element: ExternalComponent, rows: Record<string, unknown>[]): ColumnDefinition[] {
+    const children = [...(element.slots.columns ?? []), ...(element.slots.content ?? [])];
+    const fromChildren = children.map(toColumnDefinition).filter((column): column is ColumnDefinition => column !== undefined);
+    if (fromChildren.length > 0) return fromChildren;
+
+    const fromProperty = recordArrayProperty(element, 'columns')
+        .map((column) => toColumnDefinition({ id: '', properties: column }))
+        .filter((column): column is ColumnDefinition => column !== undefined);
+    if (fromProperty.length > 0) return fromProperty;
+
+    const fromNames = stringArrayProperty(element, 'columns').map((field) => ({ field, header: field, sortable: false }));
+    if (fromNames.length > 0) return fromNames;
+
+    return Object.keys(rows[0] ?? {}).map((field) => ({ field, header: field, sortable: false }));
+}
+
+function toColumnDefinition(element: SceneElement): ColumnDefinition | undefined {
+    const field = element.properties.field;
+    const header = element.properties.header ?? element.properties.label;
+    if (typeof field !== 'string') return undefined;
+    return {
+        field,
+        header: typeof header === 'string' ? header : field,
+        sortable: element.properties.sortable === true,
+    };
+}

package/data/index.ts

@@ -0,0 +1,16 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+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/dist/cjs/button/PrimeButton.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('primereact/button');
+var properties = require('../properties.js');
+
+/**
+ * The `PrimeReact:button` component.
+ *
+ * Deliberately claims the same bare name `core` already declares. A `ui profile` listing `core` and then
+ * `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.
+ */ function PrimeButton({ element, slots }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(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),
+        rounded: properties.booleanProperty(element, 'rounded', false),
+        loading: properties.booleanProperty(element, 'loading', false),
+        disabled: properties.booleanProperty(element, 'disabled', false),
+        children: slots.content
+    });
+}
+
+exports.PrimeButton = PrimeButton;
+//# sourceMappingURL=PrimeButton.js.map

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

@@ -0,0 +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;;;;"}

package/dist/cjs/button/PrimeButtonGroup.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var buttongroup = require('primereact/buttongroup');
+var button = require('primereact/button');
+var properties = require('../properties.js');
+
+/**
+ * The `PrimeReact:buttonGroup` component - buttons joined into one visually continuous control.
+ *
+ * ButtonGroup styles its children by position, so it needs real `Button` elements as children. Slot
+ * content is therefore rendered when a screen supplies it, and otherwise the group is built from a
+ * `buttons` property - which is what lets a generated screen produce a group without having to nest
+ * elements it does not otherwise need.
+ */ function PrimeButtonGroup({ element, slots }) {
+    const buttons = properties.optionsProperty(element, 'buttons');
+    return /*#__PURE__*/ jsxRuntime.jsx(buttongroup.ButtonGroup, {
+        "data-scene-id": element.id,
+        children: slots.content?.length ? slots.content : buttons.map((button$1)=>/*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+                label: button$1.label
+            }, button$1.value))
+    });
+}
+
+exports.PrimeButtonGroup = PrimeButtonGroup;
+//# sourceMappingURL=PrimeButtonGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeButtonGroup.js","sources":["../../../button/PrimeButtonGroup.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 { ButtonGroup } from 'primereact/buttongroup';\nimport { Button } from 'primereact/button';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { optionsProperty } from '../properties';\n\n/**\n * The `PrimeReact:buttonGroup` component - buttons joined into one visually continuous control.\n *\n * ButtonGroup styles its children by position, so it needs real `Button` elements as children. Slot\n * content is therefore rendered when a screen supplies it, and otherwise the group is built from a\n * `buttons` property - which is what lets a generated screen produce a group without having to nest\n * elements it does not otherwise need.\n */\nexport function PrimeButtonGroup({ element, slots }: RegisteredComponentProps) {\n    const buttons = optionsProperty(element, 'buttons');\n    return (\n        <ButtonGroup data-scene-id={element.id}>\n            {slots.content?.length ? slots.content : buttons.map((button) => <Button key={button.value} label={button.label} />)}\n        </ButtonGroup>\n    );\n}\n"],"names":["PrimeButtonGroup","element","slots","buttons","optionsProperty","_jsx","ButtonGroup","data-scene-id","id","content","length","map","button","Button","label","value"],"mappings":";;;;;;;AAQA;;;;;;;AAOC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACzE,MAAMC,OAAAA,GAAUC,2BAAgBH,OAAAA,EAAS,SAAA,CAAA;AACzC,IAAA,qBACII,cAAA,CAACC,uBAAAA,EAAAA;AAAYC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;kBACjCN,KAAAA,CAAMO,OAAO,EAAEC,MAAAA,GAASR,KAAAA,CAAMO,OAAO,GAAGN,OAAAA,CAAQQ,GAAG,CAAC,CAACC,QAAAA,iBAAWP,cAAA,CAACQ,aAAAA,EAAAA;AAA0BC,gBAAAA,KAAAA,EAAOF,SAAOE;AAA5BF,aAAAA,EAAAA,QAAAA,CAAOG,KAAK,CAAA;;AAGtG;;;;"}

package/dist/cjs/button/PrimeSpeedDial.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var speeddial = require('primereact/speeddial');
+var properties = require('../properties.js');
+var menuItems = require('../menuItems.js');
+
+/**
+ * The `PrimeReact:speedDial` component - a floating action button that fans its actions out on hover.
+ *
+ * Rendered inside a sized, relatively positioned box because SpeedDial positions itself absolutely
+ * against its nearest positioned ancestor; dropped straight into a Scene tree it would otherwise anchor
+ * itself to the page and float over unrelated content.
+ */ function PrimeSpeedDial({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        "data-scene-id": element.id,
+        className: "relative h-40 w-40",
+        children: /*#__PURE__*/ jsxRuntime.jsx(speeddial.SpeedDial, {
+            model: menuItems.menuItemsProperty(element, 'items'),
+            direction: properties.stringProperty(element, 'direction', 'up'),
+            type: properties.stringProperty(element, 'type', 'linear')
+        })
+    });
+}
+
+exports.PrimeSpeedDial = PrimeSpeedDial;
+//# sourceMappingURL=PrimeSpeedDial.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeSpeedDial.js","sources":["../../../button/PrimeSpeedDial.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 { SpeedDial } from 'primereact/speeddial';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\nimport { menuItemsProperty } from '../menuItems';\n\n/**\n * The `PrimeReact:speedDial` component - a floating action button that fans its actions out on hover.\n *\n * Rendered inside a sized, relatively positioned box because SpeedDial positions itself absolutely\n * against its nearest positioned ancestor; dropped straight into a Scene tree it would otherwise anchor\n * itself to the page and float over unrelated content.\n */\nexport function PrimeSpeedDial({ element }: RegisteredComponentProps) {\n    return (\n        <div data-scene-id={element.id} className='relative h-40 w-40'>\n            <SpeedDial\n                model={menuItemsProperty(element, 'items')}\n                direction={stringProperty(element, 'direction', 'up') as 'up' | 'down' | 'left' | 'right'}\n                type={stringProperty(element, 'type', 'linear') as 'linear' | 'circle' | 'semi-circle' | 'quarter-circle'}\n            />\n        </div>\n    );\n}\n"],"names":["PrimeSpeedDial","element","_jsx","div","data-scene-id","id","className","SpeedDial","model","menuItemsProperty","direction","stringProperty","type"],"mappings":";;;;;;;AAQA;;;;;;AAMC,IACM,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAA4B,EAAA;AAChE,IAAA,qBACIC,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;QAAEC,SAAAA,EAAU,oBAAA;AACtC,QAAA,QAAA,gBAAAJ,cAAA,CAACK,mBAAAA,EAAAA;AACGC,YAAAA,KAAAA,EAAOC,4BAAkBR,OAAAA,EAAS,OAAA,CAAA;YAClCS,SAAAA,EAAWC,yBAAAA,CAAeV,SAAS,WAAA,EAAa,IAAA,CAAA;YAChDW,IAAAA,EAAMD,yBAAAA,CAAeV,SAAS,MAAA,EAAQ,QAAA;;;AAItD;;;;"}

package/dist/cjs/button/PrimeSplitButton.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var splitbutton = require('primereact/splitbutton');
+var properties = require('../properties.js');
+var menuItems = require('../menuItems.js');
+
+/**
+ * The `PrimeReact:splitButton` component - a primary action with a dropdown of related ones.
+ *
+ * The secondary actions come from an `items` property rather than from slots, because PrimeReact drives
+ * them from a data model and not from children; feeding it rendered React nodes would give it no labels
+ * to show.
+ */ function PrimeSplitButton({ element }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(splitbutton.SplitButton, {
+        "data-scene-id": element.id,
+        label: properties.stringProperty(element, 'label'),
+        icon: properties.stringProperty(element, 'icon'),
+        model: menuItems.menuItemsProperty(element, 'items'),
+        disabled: properties.booleanProperty(element, 'disabled', false)
+    });
+}
+
+exports.PrimeSplitButton = PrimeSplitButton;
+//# sourceMappingURL=PrimeSplitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeSplitButton.js","sources":["../../../button/PrimeSplitButton.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 { SplitButton } from 'primereact/splitbutton';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\nimport { menuItemsProperty } from '../menuItems';\n\n/**\n * The `PrimeReact:splitButton` component - a primary action with a dropdown of related ones.\n *\n * The secondary actions come from an `items` property rather than from slots, because PrimeReact drives\n * them from a data model and not from children; feeding it rendered React nodes would give it no labels\n * to show.\n */\nexport function PrimeSplitButton({ element }: RegisteredComponentProps) {\n    return (\n        <SplitButton\n            data-scene-id={element.id}\n            label={stringProperty(element, 'label')}\n            icon={stringProperty(element, 'icon')}\n            model={menuItemsProperty(element, 'items')}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeSplitButton","element","_jsx","SplitButton","data-scene-id","id","label","stringProperty","icon","model","menuItemsProperty","disabled","booleanProperty"],"mappings":";;;;;;;AAQA;;;;;;AAMC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;AAClE,IAAA,qBACIC,cAAA,CAACC,uBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;AACzBC,QAAAA,KAAAA,EAAOC,0BAAeN,OAAAA,EAAS,OAAA,CAAA;AAC/BO,QAAAA,IAAAA,EAAMD,0BAAeN,OAAAA,EAAS,MAAA,CAAA;AAC9BQ,QAAAA,KAAAA,EAAOC,4BAAkBT,OAAAA,EAAS,OAAA,CAAA;QAClCU,QAAAA,EAAUC,0BAAAA,CAAgBX,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}

package/dist/cjs/data/PrimeColumn.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var column = require('primereact/column');
+var properties = require('../properties.js');
+
+/**
+ * The `PrimeReact:column` component - one column of a table.
+ *
+ * Like PrimeReact's own `Column`, this is configuration rather than output: it renders nothing on its
+ * own and only means something inside a table. That is not a Scene quirk - a bare `<Column/>` in
+ * PrimeReact renders nothing either. When a `column` element is nested under `dataTable` or `table`,
+ * the table reads its `field`, `header` and `sortable` properties off the model rather than using this
+ * rendered output; see `columnDefinitions` for why.
+ */ function PrimeColumn({ element }) {
+    const field = properties.stringProperty(element, 'field', '');
+    return /*#__PURE__*/ jsxRuntime.jsx(column.Column, {
+        field: field,
+        header: properties.stringProperty(element, 'header', field),
+        sortable: properties.booleanProperty(element, 'sortable', false)
+    });
+}
+
+exports.PrimeColumn = PrimeColumn;
+//# sourceMappingURL=PrimeColumn.js.map

package/dist/cjs/data/PrimeColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeColumn.js","sources":["../../../data/PrimeColumn.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Column } from 'primereact/column';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:column` component - one column of a table.\n *\n * Like PrimeReact's own `Column`, this is configuration rather than output: it renders nothing on its\n * own and only means something inside a table. That is not a Scene quirk - a bare `<Column/>` in\n * PrimeReact renders nothing either. When a `column` element is nested under `dataTable` or `table`,\n * the table reads its `field`, `header` and `sortable` properties off the model rather than using this\n * rendered output; see `columnDefinitions` for why.\n */\nexport function PrimeColumn({ element }: RegisteredComponentProps) {\n    const field = stringProperty(element, 'field', '');\n    return <Column field={field} header={stringProperty(element, 'header', field)} sortable={booleanProperty(element, 'sortable', false)} />;\n}\n"],"names":["PrimeColumn","element","field","stringProperty","_jsx","Column","header","sortable","booleanProperty"],"mappings":";;;;;;AAOA;;;;;;;;AAQC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAA4B,EAAA;IAC7D,MAAMC,KAAAA,GAAQC,yBAAAA,CAAeF,OAAAA,EAAS,OAAA,EAAS,EAAA,CAAA;AAC/C,IAAA,qBAAOG,cAAA,CAACC,aAAAA,EAAAA;QAAOH,KAAAA,EAAOA,KAAAA;QAAOI,MAAAA,EAAQH,yBAAAA,CAAeF,SAAS,QAAA,EAAUC,KAAAA,CAAAA;QAAQK,QAAAA,EAAUC,0BAAAA,CAAgBP,SAAS,UAAA,EAAY,KAAA;;AAClI;;;;"}

package/dist/cjs/data/PrimeDataTable.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var column = require('primereact/column');
+var datatable = require('primereact/datatable');
+var properties = require('../properties.js');
+var columnDefinitions = require('./columnDefinitions.js');
+
+/**
+ * The `PrimeReact:dataTable` component, also registered under Screenplay's `table` name so a screen
+ * compiled from a `.play` file renders through this package without a translation step.
+ *
+ * Rows come from a `rows` property; columns come from nested `column` children, a `columns` property, or
+ * are inferred from the first row - see `columnDefinitions`.
+ */ function PrimeDataTable({ element }) {
+    const rows = properties.recordArrayProperty(element, 'rows');
+    const columns = columnDefinitions.columnDefinitions(element, rows);
+    const pageSize = properties.numberProperty(element, 'pageSize');
+    return /*#__PURE__*/ jsxRuntime.jsx(datatable.DataTable, {
+        "data-scene-id": element.id,
+        value: rows,
+        emptyMessage: properties.stringProperty(element, 'emptyMessage', 'No records found'),
+        stripedRows: properties.booleanProperty(element, 'stripedRows', false),
+        showGridlines: properties.booleanProperty(element, 'showGridlines', false),
+        size: properties.stringProperty(element, 'size'),
+        paginator: pageSize !== undefined,
+        rows: pageSize,
+        children: columns.map((column$1)=>/*#__PURE__*/ jsxRuntime.jsx(column.Column, {
+                field: column$1.field,
+                header: column$1.header,
+                sortable: column$1.sortable
+            }, column$1.field))
+    });
+}
+
+exports.PrimeDataTable = PrimeDataTable;
+//# sourceMappingURL=PrimeDataTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeDataTable.js","sources":["../../../data/PrimeDataTable.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Column } from 'primereact/column';\nimport { DataTable } from 'primereact/datatable';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, recordArrayProperty, stringProperty } from '../properties';\nimport { columnDefinitions } from './columnDefinitions';\n\n/**\n * The `PrimeReact:dataTable` component, also registered under Screenplay's `table` name so a screen\n * compiled from a `.play` file renders through this package without a translation step.\n *\n * Rows come from a `rows` property; columns come from nested `column` children, a `columns` property, or\n * are inferred from the first row - see `columnDefinitions`.\n */\nexport function PrimeDataTable({ element }: RegisteredComponentProps) {\n    const rows = recordArrayProperty(element, 'rows');\n    const columns = columnDefinitions(element, rows);\n    const pageSize = numberProperty(element, 'pageSize');\n    return (\n        <DataTable\n            data-scene-id={element.id}\n            value={rows}\n            emptyMessage={stringProperty(element, 'emptyMessage', 'No records found')}\n            stripedRows={booleanProperty(element, 'stripedRows', false)}\n            showGridlines={booleanProperty(element, 'showGridlines', false)}\n            size={stringProperty(element, 'size') as 'small' | 'normal' | 'large' | undefined}\n            paginator={pageSize !== undefined}\n            rows={pageSize}>\n            {columns.map((column) => (\n                <Column key={column.field} field={column.field} header={column.header} sortable={column.sortable} />\n            ))}\n        </DataTable>\n    );\n}\n"],"names":["PrimeDataTable","element","rows","recordArrayProperty","columns","columnDefinitions","pageSize","numberProperty","_jsx","DataTable","data-scene-id","id","value","emptyMessage","stringProperty","stripedRows","booleanProperty","showGridlines","size","paginator","undefined","map","column","Column","field","header","sortable"],"mappings":";;;;;;;;AASA;;;;;;AAMC,IACM,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAA4B,EAAA;IAChE,MAAMC,IAAAA,GAAOC,+BAAoBF,OAAAA,EAAS,MAAA,CAAA;IAC1C,MAAMG,OAAAA,GAAUC,oCAAkBJ,OAAAA,EAASC,IAAAA,CAAAA;IAC3C,MAAMI,QAAAA,GAAWC,0BAAeN,OAAAA,EAAS,UAAA,CAAA;AACzC,IAAA,qBACIO,cAAA,CAACC,mBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeT,QAAQU,EAAE;QACzBC,KAAAA,EAAOV,IAAAA;QACPW,YAAAA,EAAcC,yBAAAA,CAAeb,SAAS,cAAA,EAAgB,kBAAA,CAAA;QACtDc,WAAAA,EAAaC,0BAAAA,CAAgBf,SAAS,aAAA,EAAe,KAAA,CAAA;QACrDgB,aAAAA,EAAeD,0BAAAA,CAAgBf,SAAS,eAAA,EAAiB,KAAA,CAAA;AACzDiB,QAAAA,IAAAA,EAAMJ,0BAAeb,OAAAA,EAAS,MAAA,CAAA;AAC9BkB,QAAAA,SAAAA,EAAWb,QAAAA,KAAac,SAAAA;QACxBlB,IAAAA,EAAMI,QAAAA;AACLF,QAAAA,QAAAA,EAAAA,OAAAA,CAAQiB,GAAG,CAAC,CAACC,QAAAA,iBACVd,cAAA,CAACe,aAAAA,EAAAA;AAA0BC,gBAAAA,KAAAA,EAAOF,SAAOE,KAAK;AAAEC,gBAAAA,MAAAA,EAAQH,SAAOG,MAAM;AAAEC,gBAAAA,QAAAA,EAAUJ,SAAOI;AAA3EJ,aAAAA,EAAAA,QAAAA,CAAOE,KAAK,CAAA;;AAIzC;;;;"}

package/dist/cjs/data/PrimeDataView.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dataview = require('primereact/dataview');
+var properties = require('../properties.js');
+
+/**
+ * The `PrimeReact:dataView` component - the same rows a table would show, laid out as a list of cards.
+ *
+ * DataView has no default item template, so the adapter supplies one built from the `titleField` and
+ * `descriptionField` properties. Without it every row would render empty and the component would look
+ * broken rather than unconfigured.
+ */ function PrimeDataView({ element }) {
+    const titleField = properties.stringProperty(element, 'titleField', 'title');
+    const descriptionField = properties.stringProperty(element, 'descriptionField', 'description');
+    const pageSize = properties.numberProperty(element, 'pageSize');
+    return /*#__PURE__*/ jsxRuntime.jsx(dataview.DataView, {
+        "data-scene-id": element.id,
+        value: properties.recordArrayProperty(element, 'rows'),
+        emptyMessage: properties.stringProperty(element, 'emptyMessage', 'No records found'),
+        paginator: pageSize !== undefined,
+        rows: pageSize,
+        itemTemplate: (row)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex flex-col gap-1 p-3",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "font-semibold",
+                        children: String(row[titleField] ?? '')
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "text-sm opacity-75",
+                        children: String(row[descriptionField] ?? '')
+                    })
+                ]
+            })
+    });
+}
+
+exports.PrimeDataView = PrimeDataView;
+//# sourceMappingURL=PrimeDataView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeDataView.js","sources":["../../../data/PrimeDataView.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DataView } from 'primereact/dataview';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, recordArrayProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:dataView` component - the same rows a table would show, laid out as a list of cards.\n *\n * DataView has no default item template, so the adapter supplies one built from the `titleField` and\n * `descriptionField` properties. Without it every row would render empty and the component would look\n * broken rather than unconfigured.\n */\nexport function PrimeDataView({ element }: RegisteredComponentProps) {\n    const titleField = stringProperty(element, 'titleField', 'title');\n    const descriptionField = stringProperty(element, 'descriptionField', 'description');\n    const pageSize = numberProperty(element, 'pageSize');\n    return (\n        <DataView\n            data-scene-id={element.id}\n            value={recordArrayProperty(element, 'rows')}\n            emptyMessage={stringProperty(element, 'emptyMessage', 'No records found')}\n            paginator={pageSize !== undefined}\n            rows={pageSize}\n            itemTemplate={(row: Record<string, unknown>) => (\n                <div className='flex flex-col gap-1 p-3'>\n                    <span className='font-semibold'>{String(row[titleField] ?? '')}</span>\n                    <span className='text-sm opacity-75'>{String(row[descriptionField] ?? '')}</span>\n                </div>\n            )}\n        />\n    );\n}\n"],"names":["PrimeDataView","element","titleField","stringProperty","descriptionField","pageSize","numberProperty","_jsx","DataView","data-scene-id","id","value","recordArrayProperty","emptyMessage","paginator","undefined","rows","itemTemplate","row","_jsxs","div","className","span","String"],"mappings":";;;;;;AAOA;;;;;;AAMC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;IAC/D,MAAMC,UAAAA,GAAaC,yBAAAA,CAAeF,OAAAA,EAAS,YAAA,EAAc,OAAA,CAAA;IACzD,MAAMG,gBAAAA,GAAmBD,yBAAAA,CAAeF,OAAAA,EAAS,kBAAA,EAAoB,aAAA,CAAA;IACrE,MAAMI,QAAAA,GAAWC,0BAAeL,OAAAA,EAAS,UAAA,CAAA;AACzC,IAAA,qBACIM,cAAA,CAACC,iBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;AACzBC,QAAAA,KAAAA,EAAOC,+BAAoBX,OAAAA,EAAS,MAAA,CAAA;QACpCY,YAAAA,EAAcV,yBAAAA,CAAeF,SAAS,cAAA,EAAgB,kBAAA,CAAA;AACtDa,QAAAA,SAAAA,EAAWT,QAAAA,KAAaU,SAAAA;QACxBC,IAAAA,EAAMX,QAAAA;QACNY,YAAAA,EAAc,CAACC,oBACXC,eAAA,CAACC,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,yBAAA;;kCACXd,cAAA,CAACe,MAAAA,EAAAA;wBAAKD,SAAAA,EAAU,eAAA;kCAAiBE,MAAAA,CAAOL,GAAG,CAAChB,UAAAA,CAAW,IAAI,EAAA;;kCAC3DK,cAAA,CAACe,MAAAA,EAAAA;wBAAKD,SAAAA,EAAU,oBAAA;kCAAsBE,MAAAA,CAAOL,GAAG,CAACd,gBAAAA,CAAiB,IAAI,EAAA;;;;;AAK1F;;;;"}

package/dist/cjs/data/PrimeOrderList.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var orderlist = require('primereact/orderlist');
+var properties = require('../properties.js');
+
+/**
+ * The `PrimeReact:orderList` component - a list the user reorders with the supplied controls.
+ *
+ * Reordering is the component's entire purpose, so the order has to live somewhere that survives a
+ * re-render; the adapter keeps it locally, seeded from `items`.
+ *
+ * In PrimeReact 11 this component becomes a hook rather than a component.
+ */ function PrimeOrderList({ element }) {
+    const [items, setItems] = react.useState(properties.optionsProperty(element, 'items'));
+    return /*#__PURE__*/ jsxRuntime.jsx(orderlist.OrderList, {
+        "data-scene-id": element.id,
+        value: items,
+        onChange: (event)=>setItems(event.value),
+        dataKey: "value",
+        header: properties.stringProperty(element, 'header'),
+        itemTemplate: (item)=>/*#__PURE__*/ jsxRuntime.jsx("span", {
+                children: item.label
+            })
+    });
+}
+
+exports.PrimeOrderList = PrimeOrderList;
+//# sourceMappingURL=PrimeOrderList.js.map