@cratis/scene.primereact 4.15.0 → 4.16.0

package/form/PrimeCalendar.tsx

@@ -4,7 +4,7 @@
 import { useState } from 'react';
 import { DatePicker } from 'primereact/datepicker';
 import { InputText } from 'primereact/inputtext';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
@@ -21,13 +21,14 @@ import { booleanProperty, stringProperty } from '../properties';
  * prop: either inside a `Panel`, which simply renders where it stands, or behind a `Portal` and a
  * `Positioner`, which anchors it to the field and escapes any clipping ancestor.
  */
-export function PrimeCalendar({ element }: RegisteredComponentProps) {
+export function PrimeCalendar({ element, bindingOutputs }: RegisteredComponentProps) {
     const [value, setValue] = useState<Date | undefined>(() => {
         const seed = stringProperty(element, 'value');
         if (seed === undefined) return undefined;
         const parsed = new Date(seed);
         return Number.isNaN(parsed.getTime()) ? undefined : parsed;
     });
+    useValueOutput(bindingOutputs, value);
 
     const inline = booleanProperty(element, 'inline', false);
     const showTime = booleanProperty(element, 'showTime', false);

package/form/PrimeCheckbox.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { Checkbox } from 'primereact/checkbox';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
@@ -17,14 +17,15 @@ import { booleanProperty, stringProperty } from '../properties';
  * now arrives as `onCheckedChange` with a boolean rather than a change event whose `checked` might be
  * `undefined`, so the defensive `=== true` the v10 adapter needed is gone.
  */
-export function PrimeCheckbox({ element }: RegisteredComponentProps) {
+export function PrimeCheckbox({ element, bindingOutputs }: RegisteredComponentProps) {
     const [checked, setChecked] = useState(booleanProperty(element, 'checked', false));
+    useValueOutput(bindingOutputs, checked);
     const label = stringProperty(element, 'label');
     return (
         <div data-scene-id={element.id} className='flex items-center gap-2'>
             <Checkbox.Root
                 inputId={element.id}
-                aria-label={label === undefined ? stringProperty(element, 'ariaLabel') : undefined}
+                ariaLabel={label === undefined ? stringProperty(element, 'ariaLabel') : undefined}
                 checked={checked}
                 onCheckedChange={(event) => setChecked(event.checked)}
                 disabled={booleanProperty(element, 'disabled', false)}>

package/form/PrimeDropdown.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { Select } from 'primereact/select';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, optionsProperty, stringProperty } from '../properties';
 
 /**
@@ -19,8 +19,9 @@ import { booleanProperty, optionsProperty, stringProperty } from '../properties'
  * and z-index juggling a dropdown inside a dialog used to need is gone with it: the portal stacks
  * correctly on its own.
  */
-export function PrimeDropdown({ element }: RegisteredComponentProps) {
+export function PrimeDropdown({ element, bindingOutputs }: RegisteredComponentProps) {
     const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));
+    useValueOutput(bindingOutputs, value);
     const placeholder = stringProperty(element, 'placeholder', 'Select');
     const filter = booleanProperty(element, 'filter', false);
     const showClear = booleanProperty(element, 'showClear', false);

package/form/PrimeInputNumber.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { InputNumber } from 'primereact/inputnumber';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, numberProperty, stringProperty } from '../properties';
 
 /**
@@ -17,8 +17,9 @@ import { booleanProperty, numberProperty, stringProperty } from '../properties';
  * is no longer a flag the component interprets - the spinner is a `Group` of `Increment` and `Decrement`
  * you either render or do not - so the property now decides whether that group exists at all.
  */
-export function PrimeInputNumber({ element }: RegisteredComponentProps) {
+export function PrimeInputNumber({ element, bindingOutputs }: RegisteredComponentProps) {
     const [value, setValue] = useState<number | undefined>(numberProperty(element, 'value'));
+    useValueOutput(bindingOutputs, value);
     const currency = stringProperty(element, 'currency');
     return (
         <InputNumber.Root

package/form/PrimeInputText.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { InputText } from 'primereact/inputtext';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
@@ -15,8 +15,9 @@ import { booleanProperty, stringProperty } from '../properties';
  * a preview is genuinely typeable instead of frozen, and the typed value is local to the rendered
  * component rather than pushed back into the model.
  */
-export function PrimeInputText({ element }: RegisteredComponentProps) {
+export function PrimeInputText({ element, bindingOutputs }: RegisteredComponentProps) {
     const [value, setValue] = useState(stringProperty(element, 'value', ''));
+    useValueOutput(bindingOutputs, value);
     return (
         <InputText
             data-scene-id={element.id}

package/form/PrimeInputTextarea.tsx

@@ -3,7 +3,7 @@
 
 import { ChangeEvent, useState } from 'react';
 import { Textarea } from 'primereact/textarea';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, numberProperty, stringProperty } from '../properties';
 
 /**
@@ -13,8 +13,9 @@ import { booleanProperty, numberProperty, stringProperty } from '../properties';
  * rather than a composition, and `rows`, `cols` and `placeholder` still reach the underlying `<textarea>`
  * untouched. Holds the typed value locally for the same reason {@link PrimeInputText} does.
  */
-export function PrimeInputTextarea({ element }: RegisteredComponentProps) {
+export function PrimeInputTextarea({ element, bindingOutputs }: RegisteredComponentProps) {
     const [value, setValue] = useState(stringProperty(element, 'value', ''));
+    useValueOutput(bindingOutputs, value);
     return (
         <Textarea
             data-scene-id={element.id}

package/form/PrimeMultiSelect.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { Select } from 'primereact/select';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, optionsProperty, stringArrayProperty, stringProperty } from '../properties';
 
 /**
@@ -21,8 +21,9 @@ import { booleanProperty, optionsProperty, stringArrayProperty, stringProperty }
  * offers no chip mode and no collapse threshold, so honoring either property would mean reimplementing
  * the value slot rather than configuring it.
  */
-export function PrimeMultiSelect({ element }: RegisteredComponentProps) {
+export function PrimeMultiSelect({ element, bindingOutputs }: RegisteredComponentProps) {
     const [value, setValue] = useState<unknown>(stringArrayProperty(element, 'value'));
+    useValueOutput(bindingOutputs, value);
     const placeholder = stringProperty(element, 'placeholder', 'Select');
     const filter = booleanProperty(element, 'filter', false);
     return (

package/form/PrimePassword.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { InputPassword } from 'primereact/inputpassword';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
@@ -16,8 +16,9 @@ import { booleanProperty, stringProperty } from '../properties';
  * knob that survived and the one an authored screen can actually mean: a preview that starts revealed.
  * A screen that needs a reveal button now owns that button, because only the screen knows where it goes.
  */
-export function PrimePassword({ element }: RegisteredComponentProps) {
+export function PrimePassword({ element, bindingOutputs }: RegisteredComponentProps) {
     const [value, setValue] = useState(stringProperty(element, 'value', ''));
+    useValueOutput(bindingOutputs, value);
     return (
         <InputPassword
             data-scene-id={element.id}

package/form/PrimeRadioButton.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { RadioButton } from 'primereact/radiobutton';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, optionsProperty, stringProperty } from '../properties';
 
 /**
@@ -19,8 +19,9 @@ import { booleanProperty, optionsProperty, stringProperty } from '../properties'
  * on: the browser also fires the sibling losing its check, and treating that as a selection would clear
  * the value a moment after the user set it.
  */
-export function PrimeRadioButton({ element }: RegisteredComponentProps) {
+export function PrimeRadioButton({ element, bindingOutputs }: RegisteredComponentProps) {
     const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));
+    useValueOutput(bindingOutputs, value);
     const options = optionsProperty(element, 'options');
     const choices = options.length > 0 ? options : [{ label: stringProperty(element, 'label', 'Option'), value: element.id }];
     const disabled = booleanProperty(element, 'disabled', false);

package/form/PrimeToggleSwitch.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { ToggleSwitch } from 'primereact/toggleswitch';
-import { RegisteredComponentProps } from '@cratis/scene.react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
@@ -18,14 +18,16 @@ import { booleanProperty, stringProperty } from '../properties';
  * switch is `Control` plus the `Handle` that slides inside it. That is why `inputId` and not `id` is what
  * the label points at: the label has to reach the input, not the wrapper.
  */
-export function PrimeToggleSwitch({ element }: RegisteredComponentProps) {
+export function PrimeToggleSwitch({ element, bindingOutputs }: RegisteredComponentProps) {
     const [checked, setChecked] = useState(booleanProperty(element, 'checked', false));
+    useValueOutput(bindingOutputs, checked);
     const label = stringProperty(element, 'label');
     return (
         <div data-scene-id={element.id} className='flex items-center gap-2'>
             <ToggleSwitch.Root
                 inputId={element.id}
                 checked={checked}
+                ariaLabel={stringProperty(element, 'ariaLabel')}
                 onCheckedChange={(event) => setChecked(event.checked)}
                 disabled={booleanProperty(element, 'disabled', false)}>
                 <ToggleSwitch.Control>

package/inputDescriptors.ts

@@ -0,0 +1,38 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ComponentDescriptor, PropertyDescriptor, PropertyValueType } from '@cratis/scene.model';
+import { componentRegistryKey, valueOutputProperty } from '@cratis/scene.react';
+
+const key = (name: string) => componentRegistryKey('PrimeReact', name);
+
+const common: PropertyDescriptor[] = [
+    { path: 'ariaLabel', label: 'Accessible name', group: 'Accessibility', valueType: PropertyValueType.String },
+    { path: 'disabled', label: 'Disabled', group: 'Behavior', valueType: PropertyValueType.Boolean, default: false },
+];
+const placeholder: PropertyDescriptor = { path: 'placeholder', label: 'Placeholder', group: 'Content', valueType: PropertyValueType.String };
+const checked: PropertyDescriptor = { path: 'checked', label: 'Initially checked', group: 'Content', valueType: PropertyValueType.Boolean, default: false };
+
+function input(name: string, displayName: string, valueType: PropertyValueType, properties: PropertyDescriptor[] = [placeholder]): ComponentDescriptor {
+    const output = valueOutputProperty(valueType);
+    // A selection publishes the chosen option values; the item descriptor names them for a binding picker.
+    const value = valueType === PropertyValueType.Collection ? { ...output, item: { label: 'option value', properties: [] } } : output;
+    return { component: key(name), displayName, properties: [...properties, ...common, value] };
+}
+
+/**
+ * The input widgets that publish what the user entered as their `value` output (Cratis/StudioIssues#156).
+ * A designer offers the output as a binding source; a command action maps it as `component.<id>.value`.
+ */
+export const primeReactInputDescriptors: ComponentDescriptor[] = [
+    input('inputText', 'Text input', PropertyValueType.String),
+    input('inputTextarea', 'Text area', PropertyValueType.String),
+    input('password', 'Password', PropertyValueType.String),
+    input('inputNumber', 'Number input', PropertyValueType.Number),
+    input('calendar', 'Date picker', PropertyValueType.String),
+    input('dropdown', 'Dropdown', PropertyValueType.String),
+    input('multiSelect', 'Multi-select', PropertyValueType.Collection),
+    input('radioButton', 'Radio group', PropertyValueType.String, []),
+    input('checkbox', 'Checkbox', PropertyValueType.Boolean, [checked, { path: 'label', label: 'Label', group: 'Content', valueType: PropertyValueType.String }]),
+    input('toggleSwitch', 'Toggle switch', PropertyValueType.Boolean, [checked]),
+];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.primereact",
-    "version": "4.15.0",
+    "version": "4.16.0",
     "description": "The PrimeReact component package: maps Scene's abstract component names onto real PrimeReact components, and PrimeReact's free themes onto Scene themes.",
     "keywords": [
         "cratis",
@@ -59,15 +59,15 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "4.15.0",
-        "@cratis/scene.model": "4.15.0",
-        "@cratis/scene.react": "4.15.0",
+        "@cratis/scene.engine": "4.16.0",
+        "@cratis/scene.model": "4.16.0",
+        "@cratis/scene.react": "4.16.0",
         "@primeuix/themes": "^3.0.1"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "4.15.0",
-        "@cratis/scene.model": "4.15.0",
-        "@cratis/scene.react": "4.15.0",
+        "@cratis/scene.engine": "4.16.0",
+        "@cratis/scene.model": "4.16.0",
+        "@cratis/scene.react": "4.16.0",
         "@primereact/core": "11.2.0",
         "@primereact/headless": "11.2.0",
         "@primereact/types": "11.2.0",

package/primeReactDescriptors.ts

@@ -8,11 +8,13 @@ import { legacyEnumerationChoices } from './legacyEnumerationChoices';
 import { ChartType } from './chart';
 import { TreeTableSelectionMode } from './data';
 import { FileUploadMode } from './file';
+import { primeReactInputDescriptors } from './inputDescriptors';
 
 const key = (name: string) => componentRegistryKey('PrimeReact', name);
 
 /** Design-time descriptors for PrimeReact controls whose authored data has structured configuration. */
 export const primeReactDescriptors: ComponentDescriptor[] = [
+    ...primeReactInputDescriptors,
     {
         component: key('chart'),
         displayName: 'Chart',