@cratis/scene.primereact 1.1.0 → 3.0.0

package/dist/cjs/form/PrimeInputTextarea.js

@@ -2,16 +2,18 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var inputtextarea = require('primereact/inputtextarea');
+var textarea = require('primereact/textarea');
 var properties = require('../properties.js');
 
 /**
- * The `PrimeReact:inputTextarea` component - a multi-line text field.
+ * The `PrimeReact:inputTextarea` component - a multi-line text field, named `Textarea` by PrimeReact 11.
  *
- * Holds the typed value locally for the same reason {@link PrimeInputText} does.
+ * One of the few components the version change left alone beyond its name: it is still a single element
+ * 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.
  */ function PrimeInputTextarea({ element }) {
     const [value, setValue] = react.useState(properties.stringProperty(element, 'value', ''));
-    return /*#__PURE__*/ jsxRuntime.jsx(inputtextarea.InputTextarea, {
+    return /*#__PURE__*/ jsxRuntime.jsx(textarea.Textarea, {
         "data-scene-id": element.id,
         value: value,
         onChange: (event)=>setValue(event.target.value),

package/dist/cjs/form/PrimeInputTextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeInputTextarea.js","sources":["../../../form/PrimeInputTextarea.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { InputTextarea } from 'primereact/inputtextarea';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:inputTextarea` component - a multi-line text field.\n *\n * Holds the typed value locally for the same reason {@link PrimeInputText} does.\n */\nexport function PrimeInputTextarea({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(stringProperty(element, 'value', ''));\n    return (\n        <InputTextarea\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(event.target.value)}\n            rows={numberProperty(element, 'rows', 4)}\n            cols={numberProperty(element, 'cols')}\n            autoResize={booleanProperty(element, 'autoResize', false)}\n            placeholder={stringProperty(element, 'placeholder')}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeInputTextarea","element","value","setValue","useState","stringProperty","_jsx","InputTextarea","data-scene-id","id","onChange","event","target","rows","numberProperty","cols","autoResize","booleanProperty","placeholder","disabled"],"mappings":";;;;;;;AAQA;;;;AAIC,IACM,SAASA,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAASC,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,EAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,2BAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUR,QAAAA,CAASQ,KAAAA,CAAMC,MAAM,CAACV,KAAK,CAAA;QAChDW,IAAAA,EAAMC,yBAAAA,CAAeb,SAAS,MAAA,EAAQ,CAAA,CAAA;AACtCc,QAAAA,IAAAA,EAAMD,0BAAeb,OAAAA,EAAS,MAAA,CAAA;QAC9Be,UAAAA,EAAYC,0BAAAA,CAAgBhB,SAAS,YAAA,EAAc,KAAA,CAAA;AACnDiB,QAAAA,WAAAA,EAAab,0BAAeJ,OAAAA,EAAS,aAAA,CAAA;QACrCkB,QAAAA,EAAUF,0BAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeInputTextarea.js","sources":["../../../form/PrimeInputTextarea.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 { ChangeEvent, useState } from 'react';\nimport { Textarea } from 'primereact/textarea';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:inputTextarea` component - a multi-line text field, named `Textarea` by PrimeReact 11.\n *\n * One of the few components the version change left alone beyond its name: it is still a single element\n * rather than a composition, and `rows`, `cols` and `placeholder` still reach the underlying `<textarea>`\n * untouched. Holds the typed value locally for the same reason {@link PrimeInputText} does.\n */\nexport function PrimeInputTextarea({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(stringProperty(element, 'value', ''));\n    return (\n        <Textarea\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setValue(event.target.value)}\n            rows={numberProperty(element, 'rows', 4)}\n            cols={numberProperty(element, 'cols')}\n            autoResize={booleanProperty(element, 'autoResize', false)}\n            placeholder={stringProperty(element, 'placeholder')}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeInputTextarea","element","value","setValue","useState","stringProperty","_jsx","Textarea","data-scene-id","id","onChange","event","target","rows","numberProperty","cols","autoResize","booleanProperty","placeholder","disabled"],"mappings":";;;;;;;AAQA;;;;;;AAMC,IACM,SAASA,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAASC,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,EAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,iBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,QAAAA,EAAU,CAACC,KAAAA,GAA4CR,QAAAA,CAASQ,KAAAA,CAAMC,MAAM,CAACV,KAAK,CAAA;QAClFW,IAAAA,EAAMC,yBAAAA,CAAeb,SAAS,MAAA,EAAQ,CAAA,CAAA;AACtCc,QAAAA,IAAAA,EAAMD,0BAAeb,OAAAA,EAAS,MAAA,CAAA;QAC9Be,UAAAA,EAAYC,0BAAAA,CAAgBhB,SAAS,YAAA,EAAc,KAAA,CAAA;AACnDiB,QAAAA,WAAAA,EAAab,0BAAeJ,OAAAA,EAAS,aAAA,CAAA;QACrCkB,QAAAA,EAAUF,0BAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}

package/dist/cjs/form/PrimeKnob.js

@@ -7,18 +7,28 @@ var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:knob` component - a circular value picker that doubles as a readout.
+ *
+ * `Knob.Root` draws the `<svg>` and its children are what goes inside it: `Range` is the full arc,
+ * `Value` the filled portion of it, and `Text` the number in the middle. All three are required for the
+ * knob to look like one - the root contributes only the canvas and the pointer handling - and `Text`
+ * prints the current value when given no children, which is exactly what a readout wants.
  */ function PrimeKnob({ element }) {
     const [value, setValue] = react.useState(properties.numberProperty(element, 'value', 0));
-    return /*#__PURE__*/ jsxRuntime.jsx(knob.Knob, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(knob.Knob.Root, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(event.value),
+        onValueChange: (event)=>setValue(event.value ?? 0),
         min: properties.numberProperty(element, 'min', 0),
         max: properties.numberProperty(element, 'max', 100),
         step: properties.numberProperty(element, 'step', 1),
         size: properties.numberProperty(element, 'size', 100),
         readOnly: properties.booleanProperty(element, 'readOnly', false),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        disabled: properties.booleanProperty(element, 'disabled', false),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(knob.Knob.Range, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(knob.Knob.Value, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(knob.Knob.Text, {})
+        ]
     });
 }
 

package/dist/cjs/form/PrimeKnob.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeKnob.js","sources":["../../../form/PrimeKnob.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { Knob } from 'primereact/knob';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:knob` component - a circular value picker that doubles as a readout.\n */\nexport function PrimeKnob({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(numberProperty(element, 'value', 0));\n    return (\n        <Knob\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(event.value)}\n            min={numberProperty(element, 'min', 0)}\n            max={numberProperty(element, 'max', 100)}\n            step={numberProperty(element, 'step', 1)}\n            size={numberProperty(element, 'size', 100)}\n            readOnly={booleanProperty(element, 'readOnly', false)}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeKnob","element","value","setValue","useState","numberProperty","_jsx","Knob","data-scene-id","id","onChange","event","min","max","step","size","readOnly","booleanProperty","disabled"],"mappings":";;;;;;;AAQA;;AAEC,IACM,SAASA,SAAAA,CAAU,EAAEC,OAAO,EAA4B,EAAA;AAC3D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAASC,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,CAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,SAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUR,QAAAA,CAASQ,KAAAA,CAAMT,KAAK,CAAA;QACzCU,GAAAA,EAAKP,yBAAAA,CAAeJ,SAAS,KAAA,EAAO,CAAA,CAAA;QACpCY,GAAAA,EAAKR,yBAAAA,CAAeJ,SAAS,KAAA,EAAO,GAAA,CAAA;QACpCa,IAAAA,EAAMT,yBAAAA,CAAeJ,SAAS,MAAA,EAAQ,CAAA,CAAA;QACtCc,IAAAA,EAAMV,yBAAAA,CAAeJ,SAAS,MAAA,EAAQ,GAAA,CAAA;QACtCe,QAAAA,EAAUC,0BAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CiB,QAAAA,EAAUD,0BAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeKnob.js","sources":["../../../form/PrimeKnob.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { Knob } from 'primereact/knob';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:knob` component - a circular value picker that doubles as a readout.\n *\n * `Knob.Root` draws the `<svg>` and its children are what goes inside it: `Range` is the full arc,\n * `Value` the filled portion of it, and `Text` the number in the middle. All three are required for the\n * knob to look like one - the root contributes only the canvas and the pointer handling - and `Text`\n * prints the current value when given no children, which is exactly what a readout wants.\n */\nexport function PrimeKnob({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(numberProperty(element, 'value', 0));\n    return (\n        <Knob.Root\n            data-scene-id={element.id}\n            value={value}\n            onValueChange={(event) => setValue(event.value ?? 0)}\n            min={numberProperty(element, 'min', 0)}\n            max={numberProperty(element, 'max', 100)}\n            step={numberProperty(element, 'step', 1)}\n            size={numberProperty(element, 'size', 100)}\n            readOnly={booleanProperty(element, 'readOnly', false)}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            <Knob.Range />\n            <Knob.Value />\n            <Knob.Text />\n        </Knob.Root>\n    );\n}\n"],"names":["PrimeKnob","element","value","setValue","useState","numberProperty","_jsxs","Knob","Root","data-scene-id","id","onValueChange","event","min","max","step","size","readOnly","booleanProperty","disabled","_jsx","Range","Value","Text"],"mappings":";;;;;;;AAQA;;;;;;;AAOC,IACM,SAASA,SAAAA,CAAU,EAAEC,OAAO,EAA4B,EAAA;AAC3D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAASC,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,CAAA,CAAA,CAAA;IACpE,qBACIK,eAAA,CAACC,UAAKC,IAAI,EAAA;AACNC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;QACzBR,KAAAA,EAAOA,KAAAA;AACPS,QAAAA,aAAAA,EAAe,CAACC,KAAAA,GAAUT,QAAAA,CAASS,KAAAA,CAAMV,KAAK,IAAI,CAAA,CAAA;QAClDW,GAAAA,EAAKR,yBAAAA,CAAeJ,SAAS,KAAA,EAAO,CAAA,CAAA;QACpCa,GAAAA,EAAKT,yBAAAA,CAAeJ,SAAS,KAAA,EAAO,GAAA,CAAA;QACpCc,IAAAA,EAAMV,yBAAAA,CAAeJ,SAAS,MAAA,EAAQ,CAAA,CAAA;QACtCe,IAAAA,EAAMX,yBAAAA,CAAeJ,SAAS,MAAA,EAAQ,GAAA,CAAA;QACtCgB,QAAAA,EAAUC,0BAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CkB,QAAAA,EAAUD,0BAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,0BAAAmB,cAAA,CAACb,UAAKc,KAAK,EAAA,EAAA,CAAA;AACX,0BAAAD,cAAA,CAACb,UAAKe,KAAK,EAAA,EAAA,CAAA;AACX,0BAAAF,cAAA,CAACb,UAAKgB,IAAI,EAAA,EAAA;;;AAGtB;;;;"}

package/dist/cjs/form/PrimeListBox.js

@@ -9,19 +9,25 @@ var properties = require('../properties.js');
  * The `PrimeReact:listBox` component - an always-visible list of choices.
  *
  * The alternative to a dropdown when the choices matter enough to stay on screen; `multiple` switches it
- * between one and many.
+ * between one and many. `Listbox.List` renders `options` itself, so `optionLabel` / `optionValue` remain
+ * the whole of the mapping and there is no per-option markup here.
+ *
+ * v10's `filter` property is not read. PrimeReact 11 ships a `Listbox.Filter` part, but it is only an
+ * input wired for keyboard navigation - the root does no filtering of `options` at all, so switching it
+ * on would render a search box that searches nothing. Filtering a list is the caller's to do, and a
+ * design-time preview has no list long enough to need it.
  */ function PrimeListBox({ element }) {
     const [value, setValue] = react.useState(properties.stringProperty(element, 'value'));
-    return /*#__PURE__*/ jsxRuntime.jsx(listbox.ListBox, {
+    return /*#__PURE__*/ jsxRuntime.jsx(listbox.Listbox.Root, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(event.value),
+        onValueChange: (event)=>setValue(event.value),
         options: properties.optionsProperty(element, 'options'),
         optionLabel: "label",
         optionValue: "value",
         multiple: properties.booleanProperty(element, 'multiple', false),
-        filter: properties.booleanProperty(element, 'filter', false),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        disabled: properties.booleanProperty(element, 'disabled', false),
+        children: /*#__PURE__*/ jsxRuntime.jsx(listbox.Listbox.List, {})
     });
 }
 

package/dist/cjs/form/PrimeListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeListBox.js","sources":["../../../form/PrimeListBox.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { ListBox } from 'primereact/listbox';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, optionsProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:listBox` component - an always-visible list of choices.\n *\n * The alternative to a dropdown when the choices matter enough to stay on screen; `multiple` switches it\n * between one and many.\n */\nexport function PrimeListBox({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));\n    return (\n        <ListBox\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(event.value)}\n            options={optionsProperty(element, 'options')}\n            optionLabel='label'\n            optionValue='value'\n            multiple={booleanProperty(element, 'multiple', false)}\n            filter={booleanProperty(element, 'filter', false)}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeListBox","element","value","setValue","useState","stringProperty","_jsx","ListBox","data-scene-id","id","onChange","event","options","optionsProperty","optionLabel","optionValue","multiple","booleanProperty","filter","disabled"],"mappings":";;;;;;;AAQA;;;;;AAKC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAA4B,EAAA;AAC9D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAAkBC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,eAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUR,QAAAA,CAASQ,KAAAA,CAAMT,KAAK,CAAA;AACzCU,QAAAA,OAAAA,EAASC,2BAAgBZ,OAAAA,EAAS,SAAA,CAAA;QAClCa,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZC,QAAAA,EAAUC,0BAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CiB,MAAAA,EAAQD,0BAAAA,CAAgBhB,SAAS,QAAA,EAAU,KAAA,CAAA;QAC3CkB,QAAAA,EAAUF,0BAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeListBox.js","sources":["../../../form/PrimeListBox.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { Listbox } from 'primereact/listbox';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, optionsProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:listBox` component - an always-visible list of choices.\n *\n * The alternative to a dropdown when the choices matter enough to stay on screen; `multiple` switches it\n * between one and many. `Listbox.List` renders `options` itself, so `optionLabel` / `optionValue` remain\n * the whole of the mapping and there is no per-option markup here.\n *\n * v10's `filter` property is not read. PrimeReact 11 ships a `Listbox.Filter` part, but it is only an\n * input wired for keyboard navigation - the root does no filtering of `options` at all, so switching it\n * on would render a search box that searches nothing. Filtering a list is the caller's to do, and a\n * design-time preview has no list long enough to need it.\n */\nexport function PrimeListBox({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));\n    return (\n        <Listbox.Root\n            data-scene-id={element.id}\n            value={value}\n            onValueChange={(event) => setValue(event.value)}\n            options={optionsProperty(element, 'options')}\n            optionLabel='label'\n            optionValue='value'\n            multiple={booleanProperty(element, 'multiple', false)}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            <Listbox.List />\n        </Listbox.Root>\n    );\n}\n"],"names":["PrimeListBox","element","value","setValue","useState","stringProperty","_jsx","Listbox","Root","data-scene-id","id","onValueChange","event","options","optionsProperty","optionLabel","optionValue","multiple","booleanProperty","disabled","List"],"mappings":";;;;;;;AAQA;;;;;;;;;;;AAWC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAA4B,EAAA;AAC9D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAAkBC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IACpE,qBACIK,cAAA,CAACC,gBAAQC,IAAI,EAAA;AACTC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;QACzBR,KAAAA,EAAOA,KAAAA;AACPS,QAAAA,aAAAA,EAAe,CAACC,KAAAA,GAAUT,QAAAA,CAASS,KAAAA,CAAMV,KAAK,CAAA;AAC9CW,QAAAA,OAAAA,EAASC,2BAAgBb,OAAAA,EAAS,SAAA,CAAA;QAClCc,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZC,QAAAA,EAAUC,0BAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CkB,QAAAA,EAAUD,0BAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;gCAC/CK,cAAA,CAACC,gBAAQa,IAAI,EAAA,EAAA;;AAGzB;;;;"}

package/dist/cjs/form/PrimeMultiSelect.js

@@ -2,24 +2,59 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var multiselect = require('primereact/multiselect');
+var select = require('primereact/select');
 var properties = require('../properties.js');
 
 /**
- * The `PrimeReact:multiSelect` component - a multiple-choice select with a checkbox list.
+ * The `PrimeReact:multiSelect` component - a multiple-choice select.
+ *
+ * There is no `MultiSelect` in PrimeReact 11; the capability moved onto `Select`, which takes a
+ * `multiple` prop. Keeping the abstract name and re-expressing it over `Select` is the whole point of
+ * having an abstract name: a screen that says `multiSelect` keeps working, and only this file knows the
+ * component behind it changed.
+ *
+ * Two v10 properties have nowhere to go and are deliberately dropped rather than silently ignored.
+ * `display` chose between a comma-separated summary and a row of chips, and `maxSelectedLabels` collapsed
+ * a long selection into an "n items selected" label - both were features of v10's own selection renderer.
+ * v11 renders the selection through `Select.Value`, which joins the selected labels with commas and
+ * offers no chip mode and no collapse threshold, so honoring either property would mean reimplementing
+ * the value slot rather than configuring it.
  */ function PrimeMultiSelect({ element }) {
     const [value, setValue] = react.useState(properties.stringArrayProperty(element, 'value'));
-    return /*#__PURE__*/ jsxRuntime.jsx(multiselect.MultiSelect, {
+    const placeholder = properties.stringProperty(element, 'placeholder', 'Select');
+    const filter = properties.booleanProperty(element, 'filter', false);
+    return /*#__PURE__*/ jsxRuntime.jsxs(select.Select.Root, {
         "data-scene-id": element.id,
+        multiple: true,
         value: value,
-        onChange: (event)=>setValue(event.value),
+        onValueChange: (event)=>setValue(event.value),
         options: properties.optionsProperty(element, 'options'),
         optionLabel: "label",
         optionValue: "value",
-        display: properties.stringProperty(element, 'display', 'comma'),
-        placeholder: properties.stringProperty(element, 'placeholder', 'Select'),
-        filter: properties.booleanProperty(element, 'filter', false),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        filter: filter,
+        disabled: properties.booleanProperty(element, 'disabled', false),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(select.Select.Trigger, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(select.Select.Value, {
+                        placeholder: placeholder
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(select.Select.Arrow, {})
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(select.Select.Portal, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(select.Select.Positioner, {
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(select.Select.Popup, {
+                        children: [
+                            filter && /*#__PURE__*/ jsxRuntime.jsx(select.Select.Filter, {
+                                placeholder: placeholder
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(select.Select.List, {})
+                        ]
+                    })
+                })
+            })
+        ]
     });
 }
 

package/dist/cjs/form/PrimeMultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeMultiSelect.js","sources":["../../../form/PrimeMultiSelect.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { MultiSelect } from 'primereact/multiselect';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, optionsProperty, stringArrayProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:multiSelect` component - a multiple-choice select with a checkbox list.\n */\nexport function PrimeMultiSelect({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<string[]>(stringArrayProperty(element, 'value'));\n    return (\n        <MultiSelect\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(event.value)}\n            options={optionsProperty(element, 'options')}\n            optionLabel='label'\n            optionValue='value'\n            display={stringProperty(element, 'display', 'comma') as 'comma' | 'chip'}\n            placeholder={stringProperty(element, 'placeholder', 'Select')}\n            filter={booleanProperty(element, 'filter', false)}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeMultiSelect","element","value","setValue","useState","stringArrayProperty","_jsx","MultiSelect","data-scene-id","id","onChange","event","options","optionsProperty","optionLabel","optionValue","display","stringProperty","placeholder","filter","booleanProperty","disabled"],"mappings":";;;;;;;AAQA;;AAEC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;AAClE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAAmBC,+BAAoBJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AAC1E,IAAA,qBACIK,cAAA,CAACC,uBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUR,QAAAA,CAASQ,KAAAA,CAAMT,KAAK,CAAA;AACzCU,QAAAA,OAAAA,EAASC,2BAAgBZ,OAAAA,EAAS,SAAA,CAAA;QAClCa,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZC,OAAAA,EAASC,yBAAAA,CAAehB,SAAS,SAAA,EAAW,OAAA,CAAA;QAC5CiB,WAAAA,EAAaD,yBAAAA,CAAehB,SAAS,aAAA,EAAe,QAAA,CAAA;QACpDkB,MAAAA,EAAQC,0BAAAA,CAAgBnB,SAAS,QAAA,EAAU,KAAA,CAAA;QAC3CoB,QAAAA,EAAUD,0BAAAA,CAAgBnB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeMultiSelect.js","sources":["../../../form/PrimeMultiSelect.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { Select } from 'primereact/select';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, optionsProperty, stringArrayProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:multiSelect` component - a multiple-choice select.\n *\n * There is no `MultiSelect` in PrimeReact 11; the capability moved onto `Select`, which takes a\n * `multiple` prop. Keeping the abstract name and re-expressing it over `Select` is the whole point of\n * having an abstract name: a screen that says `multiSelect` keeps working, and only this file knows the\n * component behind it changed.\n *\n * Two v10 properties have nowhere to go and are deliberately dropped rather than silently ignored.\n * `display` chose between a comma-separated summary and a row of chips, and `maxSelectedLabels` collapsed\n * a long selection into an \"n items selected\" label - both were features of v10's own selection renderer.\n * v11 renders the selection through `Select.Value`, which joins the selected labels with commas and\n * offers no chip mode and no collapse threshold, so honoring either property would mean reimplementing\n * the value slot rather than configuring it.\n */\nexport function PrimeMultiSelect({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<unknown>(stringArrayProperty(element, 'value'));\n    const placeholder = stringProperty(element, 'placeholder', 'Select');\n    const filter = booleanProperty(element, 'filter', false);\n    return (\n        <Select.Root\n            data-scene-id={element.id}\n            multiple\n            value={value}\n            onValueChange={(event) => setValue(event.value)}\n            options={optionsProperty(element, 'options')}\n            optionLabel='label'\n            optionValue='value'\n            filter={filter}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            <Select.Trigger>\n                <Select.Value placeholder={placeholder} />\n                <Select.Arrow />\n            </Select.Trigger>\n            <Select.Portal>\n                <Select.Positioner>\n                    <Select.Popup>\n                        {filter && <Select.Filter placeholder={placeholder} />}\n                        <Select.List />\n                    </Select.Popup>\n                </Select.Positioner>\n            </Select.Portal>\n        </Select.Root>\n    );\n}\n"],"names":["PrimeMultiSelect","element","value","setValue","useState","stringArrayProperty","placeholder","stringProperty","filter","booleanProperty","_jsxs","Select","Root","data-scene-id","id","multiple","onValueChange","event","options","optionsProperty","optionLabel","optionValue","disabled","Trigger","_jsx","Value","Arrow","Portal","Positioner","Popup","Filter","List"],"mappings":";;;;;;;AAQA;;;;;;;;;;;;;;AAcC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;AAClE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAAkBC,+BAAoBJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IACzE,MAAMK,WAAAA,GAAcC,yBAAAA,CAAeN,OAAAA,EAAS,aAAA,EAAe,QAAA,CAAA;IAC3D,MAAMO,MAAAA,GAASC,0BAAAA,CAAgBR,OAAAA,EAAS,QAAA,EAAU,KAAA,CAAA;IAClD,qBACIS,eAAA,CAACC,cAAOC,IAAI,EAAA;AACRC,QAAAA,eAAAA,EAAeZ,QAAQa,EAAE;QACzBC,QAAQ,EAAA,IAAA;QACRb,KAAAA,EAAOA,KAAAA;AACPc,QAAAA,aAAAA,EAAe,CAACC,KAAAA,GAAUd,QAAAA,CAASc,KAAAA,CAAMf,KAAK,CAAA;AAC9CgB,QAAAA,OAAAA,EAASC,2BAAgBlB,OAAAA,EAAS,SAAA,CAAA;QAClCmB,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZb,MAAAA,EAAQA,MAAAA;QACRc,QAAAA,EAAUb,0BAAAA,CAAgBR,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,0BAAAS,eAAA,CAACC,cAAOY,OAAO,EAAA;;AACX,kCAAAC,cAAA,CAACb,cAAOc,KAAK,EAAA;wBAACnB,WAAAA,EAAaA;;AAC3B,kCAAAkB,cAAA,CAACb,cAAOe,KAAK,EAAA,EAAA;;;AAEjB,0BAAAF,cAAA,CAACb,cAAOgB,MAAM,EAAA;wCACVH,cAAA,CAACb,cAAOiB,UAAU,EAAA;4CACdlB,eAAA,CAACC,cAAOkB,KAAK,EAAA;;4BACRrB,MAAAA,kBAAUgB,cAAA,CAACb,cAAOmB,MAAM,EAAA;gCAACxB,WAAAA,EAAaA;;AACvC,0CAAAkB,cAAA,CAACb,cAAOoB,IAAI,EAAA,EAAA;;;;;;;AAMpC;;;;"}

package/dist/cjs/form/PrimePassword.js

@@ -2,19 +2,25 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var password = require('primereact/password');
+var inputpassword = require('primereact/inputpassword');
 var properties = require('../properties.js');
 
 /**
- * The `PrimeReact:password` component - a masked field with an optional strength meter.
+ * The `PrimeReact:password` component - a masked field, named `InputPassword` by PrimeReact 11.
+ *
+ * v11 pared this back to what a password field actually is: an input that renders as `type="password"`
+ * until something flips `mask`. The v10 `feedback` strength meter and the `toggleMask` eye button are
+ * both gone from the component - there is no prompt/weak/medium/strong panel and no built-in reveal
+ * control to switch on - so neither property is read here. `mask` is exposed instead, which is the one
+ * 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.
  */ function PrimePassword({ element }) {
     const [value, setValue] = react.useState(properties.stringProperty(element, 'value', ''));
-    return /*#__PURE__*/ jsxRuntime.jsx(password.Password, {
+    return /*#__PURE__*/ jsxRuntime.jsx(inputpassword.InputPassword, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(event.target.value),
-        feedback: properties.booleanProperty(element, 'feedback', true),
-        toggleMask: properties.booleanProperty(element, 'toggleMask', true),
+        onValueChange: (event)=>setValue(event.value ?? ''),
+        mask: properties.booleanProperty(element, 'mask', true),
         placeholder: properties.stringProperty(element, 'placeholder'),
         disabled: properties.booleanProperty(element, 'disabled', false)
     });

package/dist/cjs/form/PrimePassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimePassword.js","sources":["../../../form/PrimePassword.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { Password } from 'primereact/password';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:password` component - a masked field with an optional strength meter.\n */\nexport function PrimePassword({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(stringProperty(element, 'value', ''));\n    return (\n        <Password\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(event.target.value)}\n            feedback={booleanProperty(element, 'feedback', true)}\n            toggleMask={booleanProperty(element, 'toggleMask', true)}\n            placeholder={stringProperty(element, 'placeholder')}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimePassword","element","value","setValue","useState","stringProperty","_jsx","Password","data-scene-id","id","onChange","event","target","feedback","booleanProperty","toggleMask","placeholder","disabled"],"mappings":";;;;;;;AAQA;;AAEC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;AAC/D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAASC,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,EAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,iBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUR,QAAAA,CAASQ,KAAAA,CAAMC,MAAM,CAACV,KAAK,CAAA;QAChDW,QAAAA,EAAUC,0BAAAA,CAAgBb,SAAS,UAAA,EAAY,IAAA,CAAA;QAC/Cc,UAAAA,EAAYD,0BAAAA,CAAgBb,SAAS,YAAA,EAAc,IAAA,CAAA;AACnDe,QAAAA,WAAAA,EAAaX,0BAAeJ,OAAAA,EAAS,aAAA,CAAA;QACrCgB,QAAAA,EAAUH,0BAAAA,CAAgBb,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimePassword.js","sources":["../../../form/PrimePassword.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { InputPassword } from 'primereact/inputpassword';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:password` component - a masked field, named `InputPassword` by PrimeReact 11.\n *\n * v11 pared this back to what a password field actually is: an input that renders as `type=\"password\"`\n * until something flips `mask`. The v10 `feedback` strength meter and the `toggleMask` eye button are\n * both gone from the component - there is no prompt/weak/medium/strong panel and no built-in reveal\n * control to switch on - so neither property is read here. `mask` is exposed instead, which is the one\n * knob that survived and the one an authored screen can actually mean: a preview that starts revealed.\n * A screen that needs a reveal button now owns that button, because only the screen knows where it goes.\n */\nexport function PrimePassword({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(stringProperty(element, 'value', ''));\n    return (\n        <InputPassword\n            data-scene-id={element.id}\n            value={value}\n            onValueChange={(event) => setValue(event.value ?? '')}\n            mask={booleanProperty(element, 'mask', true)}\n            placeholder={stringProperty(element, 'placeholder')}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimePassword","element","value","setValue","useState","stringProperty","_jsx","InputPassword","data-scene-id","id","onValueChange","event","mask","booleanProperty","placeholder","disabled"],"mappings":";;;;;;;AAQA;;;;;;;;;AASC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;AAC/D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAASC,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,EAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,2BAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,aAAAA,EAAe,CAACC,KAAAA,GAAUR,QAAAA,CAASQ,KAAAA,CAAMT,KAAK,IAAI,EAAA,CAAA;QAClDU,IAAAA,EAAMC,0BAAAA,CAAgBZ,SAAS,MAAA,EAAQ,IAAA,CAAA;AACvCa,QAAAA,WAAAA,EAAaT,0BAAeJ,OAAAA,EAAS,aAAA,CAAA;QACrCc,QAAAA,EAAUF,0BAAAA,CAAgBZ,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}

package/dist/cjs/form/PrimeRadioButton.js

@@ -12,6 +12,11 @@ var properties = require('../properties.js');
  * choice is the group. The adapter therefore renders the whole group from `options`, sharing one
  * `name` so the browser enforces exclusivity, and falls back to a single button when only a `label` was
  * given.
+ *
+ * PrimeReact 11 splits each button into `Root` (the real radio input and its state), `Box` and
+ * `Indicator`, and reports selection as `onCheckedChange`. Only the transition *into* checked is acted
+ * 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.
  */ function PrimeRadioButton({ element }) {
     const [value, setValue] = react.useState(properties.stringProperty(element, 'value'));
     const options = properties.optionsProperty(element, 'options');
@@ -28,13 +33,18 @@ var properties = require('../properties.js');
         children: choices.map((choice)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
                 className: "flex items-center gap-2",
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(radiobutton.RadioButton, {
+                    /*#__PURE__*/ jsxRuntime.jsx(radiobutton.RadioButton.Root, {
                         inputId: `${element.id}-${choice.value}`,
                         name: element.id,
                         value: choice.value,
                         checked: value === choice.value,
-                        onChange: (event)=>setValue(event.value),
-                        disabled: disabled
+                        onCheckedChange: (event)=>{
+                            if (event.checked) setValue(choice.value);
+                        },
+                        disabled: disabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(radiobutton.RadioButton.Box, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(radiobutton.RadioButton.Indicator, {})
+                        })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("label", {
                         htmlFor: `${element.id}-${choice.value}`,

package/dist/cjs/form/PrimeRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeRadioButton.js","sources":["../../../form/PrimeRadioButton.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, optionsProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:radioButton` component - one exclusive choice out of several.\n *\n * PrimeReact's RadioButton is a single button, but a lone radio button is never what a screen means: the\n * choice is the group. The adapter therefore renders the whole group from `options`, sharing one\n * `name` so the browser enforces exclusivity, and falls back to a single button when only a `label` was\n * given.\n */\nexport function PrimeRadioButton({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));\n    const options = optionsProperty(element, 'options');\n    const choices = options.length > 0 ? options : [{ label: stringProperty(element, 'label', 'Option'), value: element.id }];\n    const disabled = booleanProperty(element, 'disabled', false);\n    return (\n        <div data-scene-id={element.id} className='flex flex-col gap-2'>\n            {choices.map((choice) => (\n                <div key={choice.value} className='flex items-center gap-2'>\n                    <RadioButton\n                        inputId={`${element.id}-${choice.value}`}\n                        name={element.id}\n                        value={choice.value}\n                        checked={value === choice.value}\n                        onChange={(event) => setValue(event.value)}\n                        disabled={disabled}\n                    />\n                    <label htmlFor={`${element.id}-${choice.value}`}>{choice.label}</label>\n                </div>\n            ))}\n        </div>\n    );\n}\n"],"names":["PrimeRadioButton","element","value","setValue","useState","stringProperty","options","optionsProperty","choices","length","label","id","disabled","booleanProperty","_jsx","div","data-scene-id","className","map","choice","_jsxs","RadioButton","inputId","name","checked","onChange","event","htmlFor"],"mappings":";;;;;;;AAQA;;;;;;;AAOC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;AAClE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA6BC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IAC/E,MAAMK,OAAAA,GAAUC,2BAAgBN,OAAAA,EAAS,SAAA,CAAA;AACzC,IAAA,MAAMO,OAAAA,GAAUF,OAAAA,CAAQG,MAAM,GAAG,IAAIH,OAAAA,GAAU;AAAC,QAAA;YAAEI,KAAAA,EAAOL,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,QAAA,CAAA;AAAWC,YAAAA,KAAAA,EAAOD,QAAQU;AAAG;AAAE,KAAA;IACzH,MAAMC,QAAAA,GAAWC,0BAAAA,CAAgBZ,OAAAA,EAAS,UAAA,EAAY,KAAA,CAAA;AACtD,IAAA,qBACIa,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAef,QAAQU,EAAE;QAAEM,SAAAA,EAAU,qBAAA;AACrCT,QAAAA,QAAAA,EAAAA,OAAAA,CAAQU,GAAG,CAAC,CAACC,MAAAA,iBACVC,eAAA,CAACL,KAAAA,EAAAA;gBAAuBE,SAAAA,EAAU,yBAAA;;kCAC9BH,cAAA,CAACO,uBAAAA,EAAAA;wBACGC,OAAAA,EAAS,CAAA,EAAGrB,QAAQU,EAAE,CAAC,CAAC,EAAEQ,MAAAA,CAAOjB,KAAK,CAAA,CAAE;AACxCqB,wBAAAA,IAAAA,EAAMtB,QAAQU,EAAE;AAChBT,wBAAAA,KAAAA,EAAOiB,OAAOjB,KAAK;wBACnBsB,OAAAA,EAAStB,KAAAA,KAAUiB,OAAOjB,KAAK;AAC/BuB,wBAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUvB,QAAAA,CAASuB,KAAAA,CAAMxB,KAAK,CAAA;wBACzCU,QAAAA,EAAUA;;kCAEdE,cAAA,CAACJ,OAAAA,EAAAA;wBAAMiB,OAAAA,EAAS,CAAA,EAAG1B,QAAQU,EAAE,CAAC,CAAC,EAAEQ,MAAAA,CAAOjB,KAAK,CAAA,CAAE;AAAGiB,wBAAAA,QAAAA,EAAAA,MAAAA,CAAOT;;;AATnDS,aAAAA,EAAAA,MAAAA,CAAOjB,KAAK,CAAA;;AActC;;;;"}
+{"version":3,"file":"PrimeRadioButton.js","sources":["../../../form/PrimeRadioButton.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, optionsProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:radioButton` component - one exclusive choice out of several.\n *\n * PrimeReact's RadioButton is a single button, but a lone radio button is never what a screen means: the\n * choice is the group. The adapter therefore renders the whole group from `options`, sharing one\n * `name` so the browser enforces exclusivity, and falls back to a single button when only a `label` was\n * given.\n *\n * PrimeReact 11 splits each button into `Root` (the real radio input and its state), `Box` and\n * `Indicator`, and reports selection as `onCheckedChange`. Only the transition *into* checked is acted\n * on: the browser also fires the sibling losing its check, and treating that as a selection would clear\n * the value a moment after the user set it.\n */\nexport function PrimeRadioButton({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));\n    const options = optionsProperty(element, 'options');\n    const choices = options.length > 0 ? options : [{ label: stringProperty(element, 'label', 'Option'), value: element.id }];\n    const disabled = booleanProperty(element, 'disabled', false);\n    return (\n        <div data-scene-id={element.id} className='flex flex-col gap-2'>\n            {choices.map((choice) => (\n                <div key={choice.value} className='flex items-center gap-2'>\n                    <RadioButton.Root\n                        inputId={`${element.id}-${choice.value}`}\n                        name={element.id}\n                        value={choice.value}\n                        checked={value === choice.value}\n                        onCheckedChange={(event) => {\n                            if (event.checked) setValue(choice.value);\n                        }}\n                        disabled={disabled}>\n                        <RadioButton.Box>\n                            <RadioButton.Indicator />\n                        </RadioButton.Box>\n                    </RadioButton.Root>\n                    <label htmlFor={`${element.id}-${choice.value}`}>{choice.label}</label>\n                </div>\n            ))}\n        </div>\n    );\n}\n"],"names":["PrimeRadioButton","element","value","setValue","useState","stringProperty","options","optionsProperty","choices","length","label","id","disabled","booleanProperty","_jsx","div","data-scene-id","className","map","choice","_jsxs","RadioButton","Root","inputId","name","checked","onCheckedChange","event","Box","Indicator","htmlFor"],"mappings":";;;;;;;AAQA;;;;;;;;;;;;AAYC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;AAClE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA6BC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IAC/E,MAAMK,OAAAA,GAAUC,2BAAgBN,OAAAA,EAAS,SAAA,CAAA;AACzC,IAAA,MAAMO,OAAAA,GAAUF,OAAAA,CAAQG,MAAM,GAAG,IAAIH,OAAAA,GAAU;AAAC,QAAA;YAAEI,KAAAA,EAAOL,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,QAAA,CAAA;AAAWC,YAAAA,KAAAA,EAAOD,QAAQU;AAAG;AAAE,KAAA;IACzH,MAAMC,QAAAA,GAAWC,0BAAAA,CAAgBZ,OAAAA,EAAS,UAAA,EAAY,KAAA,CAAA;AACtD,IAAA,qBACIa,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAef,QAAQU,EAAE;QAAEM,SAAAA,EAAU,qBAAA;AACrCT,QAAAA,QAAAA,EAAAA,OAAAA,CAAQU,GAAG,CAAC,CAACC,MAAAA,iBACVC,eAAA,CAACL,KAAAA,EAAAA;gBAAuBE,SAAAA,EAAU,yBAAA;;AAC9B,kCAAAH,cAAA,CAACO,wBAAYC,IAAI,EAAA;wBACbC,OAAAA,EAAS,CAAA,EAAGtB,QAAQU,EAAE,CAAC,CAAC,EAAEQ,MAAAA,CAAOjB,KAAK,CAAA,CAAE;AACxCsB,wBAAAA,IAAAA,EAAMvB,QAAQU,EAAE;AAChBT,wBAAAA,KAAAA,EAAOiB,OAAOjB,KAAK;wBACnBuB,OAAAA,EAASvB,KAAAA,KAAUiB,OAAOjB,KAAK;AAC/BwB,wBAAAA,eAAAA,EAAiB,CAACC,KAAAA,GAAAA;AACd,4BAAA,IAAIA,KAAAA,CAAMF,OAAO,EAAEtB,QAAAA,CAASgB,OAAOjB,KAAK,CAAA;AAC5C,wBAAA,CAAA;wBACAU,QAAAA,EAAUA,QAAAA;gDACVE,cAAA,CAACO,wBAAYO,GAAG,EAAA;oDACZd,cAAA,CAACO,wBAAYQ,SAAS,EAAA,EAAA;;;kCAG9Bf,cAAA,CAACJ,OAAAA,EAAAA;wBAAMoB,OAAAA,EAAS,CAAA,EAAG7B,QAAQU,EAAE,CAAC,CAAC,EAAEQ,MAAAA,CAAOjB,KAAK,CAAA,CAAE;AAAGiB,wBAAAA,QAAAA,EAAAA,MAAAA,CAAOT;;;AAdnDS,aAAAA,EAAAA,MAAAA,CAAOjB,KAAK,CAAA;;AAmBtC;;;;"}

package/dist/cjs/form/PrimeRating.js

@@ -7,16 +7,41 @@ var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:rating` component - a star rating.
+ *
+ * `stars` is no longer a prop the component reads: PrimeReact 11 takes the stars as children, so the
+ * count is what this adapter builds the `Rating.Option` list from, and the icons are ours to name -
+ * `On` and `Off` are the filled and empty faces of one star. The upside of the change is that a rating
+ * of hearts or flames is now a different icon class rather than a different component.
+ *
+ * v10's `cancel` property is not read. It rendered an extra leading icon that reset the rating to none;
+ * v11 has no such part and no "clear" affordance, so there is nothing left to switch on.
  */ function PrimeRating({ element }) {
     const [value, setValue] = react.useState(properties.numberProperty(element, 'value'));
-    return /*#__PURE__*/ jsxRuntime.jsx(rating.Rating, {
+    const stars = properties.numberProperty(element, 'stars', 5);
+    return /*#__PURE__*/ jsxRuntime.jsx(rating.Rating.Root, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(typeof event.value === 'number' ? event.value : undefined),
-        stars: properties.numberProperty(element, 'stars', 5),
-        cancel: properties.booleanProperty(element, 'cancel', true),
+        onValueChange: (event)=>setValue(event.value),
         readOnly: properties.booleanProperty(element, 'readOnly', false),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        disabled: properties.booleanProperty(element, 'disabled', false),
+        children: Array.from({
+            length: stars
+        }, (_, index)=>/*#__PURE__*/ jsxRuntime.jsxs(rating.Rating.Option, {
+                index: index,
+                "aria-label": `${index + 1} of ${stars}`,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(rating.Rating.On, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-star-fill"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(rating.Rating.Off, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-star"
+                        })
+                    })
+                ]
+            }, index))
     });
 }
 

package/dist/cjs/form/PrimeRating.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeRating.js","sources":["../../../form/PrimeRating.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { Rating } from 'primereact/rating';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:rating` component - a star rating.\n */\nexport function PrimeRating({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<number | undefined>(numberProperty(element, 'value'));\n    return (\n        <Rating\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(typeof event.value === 'number' ? event.value : undefined)}\n            stars={numberProperty(element, 'stars', 5)}\n            cancel={booleanProperty(element, 'cancel', true)}\n            readOnly={booleanProperty(element, 'readOnly', false)}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeRating","element","value","setValue","useState","numberProperty","_jsx","Rating","data-scene-id","id","onChange","event","undefined","stars","cancel","booleanProperty","readOnly","disabled"],"mappings":";;;;;;;AAQA;;AAEC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAA4B,EAAA;AAC7D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA6BC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AAC/E,IAAA,qBACIK,cAAA,CAACC,aAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;QACPQ,QAAAA,EAAU,CAACC,KAAAA,GAAUR,QAAAA,CAAS,OAAOQ,KAAAA,CAAMT,KAAK,KAAK,QAAA,GAAWS,KAAAA,CAAMT,KAAK,GAAGU,SAAAA,CAAAA;QAC9EC,KAAAA,EAAOR,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,CAAA,CAAA;QACxCa,MAAAA,EAAQC,0BAAAA,CAAgBd,SAAS,QAAA,EAAU,IAAA,CAAA;QAC3Ce,QAAAA,EAAUD,0BAAAA,CAAgBd,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CgB,QAAAA,EAAUF,0BAAAA,CAAgBd,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeRating.js","sources":["../../../form/PrimeRating.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { Rating } from 'primereact/rating';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:rating` component - a star rating.\n *\n * `stars` is no longer a prop the component reads: PrimeReact 11 takes the stars as children, so the\n * count is what this adapter builds the `Rating.Option` list from, and the icons are ours to name -\n * `On` and `Off` are the filled and empty faces of one star. The upside of the change is that a rating\n * of hearts or flames is now a different icon class rather than a different component.\n *\n * v10's `cancel` property is not read. It rendered an extra leading icon that reset the rating to none;\n * v11 has no such part and no \"clear\" affordance, so there is nothing left to switch on.\n */\nexport function PrimeRating({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<number | undefined>(numberProperty(element, 'value'));\n    const stars = numberProperty(element, 'stars', 5);\n    return (\n        <Rating.Root\n            data-scene-id={element.id}\n            value={value}\n            onValueChange={(event) => setValue(event.value)}\n            readOnly={booleanProperty(element, 'readOnly', false)}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            {Array.from({ length: stars }, (_, index) => (\n                <Rating.Option key={index} index={index} aria-label={`${index + 1} of ${stars}`}>\n                    <Rating.On>\n                        <i className='pi pi-star-fill' />\n                    </Rating.On>\n                    <Rating.Off>\n                        <i className='pi pi-star' />\n                    </Rating.Off>\n                </Rating.Option>\n            ))}\n        </Rating.Root>\n    );\n}\n"],"names":["PrimeRating","element","value","setValue","useState","numberProperty","stars","_jsx","Rating","Root","data-scene-id","id","onValueChange","event","readOnly","booleanProperty","disabled","Array","from","length","_","index","_jsxs","Option","aria-label","On","i","className","Off"],"mappings":";;;;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAA4B,EAAA;AAC7D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA6BC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IAC/E,MAAMK,KAAAA,GAAQD,yBAAAA,CAAeJ,OAAAA,EAAS,OAAA,EAAS,CAAA,CAAA;IAC/C,qBACIM,cAAA,CAACC,cAAOC,IAAI,EAAA;AACRC,QAAAA,eAAAA,EAAeT,QAAQU,EAAE;QACzBT,KAAAA,EAAOA,KAAAA;AACPU,QAAAA,aAAAA,EAAe,CAACC,KAAAA,GAAUV,QAAAA,CAASU,KAAAA,CAAMX,KAAK,CAAA;QAC9CY,QAAAA,EAAUC,0BAAAA,CAAgBd,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/Ce,QAAAA,EAAUD,0BAAAA,CAAgBd,SAAS,UAAA,EAAY,KAAA,CAAA;AAC9CgB,QAAAA,QAAAA,EAAAA,KAAAA,CAAMC,IAAI,CAAC;YAAEC,MAAAA,EAAQb;AAAM,SAAA,EAAG,CAACc,CAAAA,EAAGC,KAAAA,iBAC/BC,eAAA,CAACd,cAAOe,MAAM,EAAA;gBAAaF,KAAAA,EAAOA,KAAAA;AAAOG,gBAAAA,YAAAA,EAAY,CAAA,EAAGH,KAAAA,GAAQ,CAAA,CAAE,IAAI,EAAEf,KAAAA,CAAAA,CAAO;;AAC3E,kCAAAC,cAAA,CAACC,cAAOiB,EAAE,EAAA;AACN,wBAAA,QAAA,gBAAAlB,cAAA,CAACmB,GAAAA,EAAAA;4BAAEC,SAAAA,EAAU;;;AAEjB,kCAAApB,cAAA,CAACC,cAAOoB,GAAG,EAAA;AACP,wBAAA,QAAA,gBAAArB,cAAA,CAACmB,GAAAA,EAAAA;4BAAEC,SAAAA,EAAU;;;;AALDN,aAAAA,EAAAA,KAAAA,CAAAA;;AAWpC;;;;"}

package/dist/cjs/form/PrimeSelectButton.js

@@ -2,24 +2,31 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var selectbutton = require('primereact/selectbutton');
+var togglebutton = require('primereact/togglebutton');
+var togglebuttongroup = require('primereact/togglebuttongroup');
 var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:selectButton` component - a small set of choices shown as joined toggle buttons.
+ * PrimeReact 11 calls it `ToggleButtonGroup`.
  *
- * In PrimeReact 11 this component is renamed `ToggleButtonGroup`.
+ * v10 took the choices as an `options` array and rendered the buttons itself; v11 takes them as children,
+ * so the mapping that used to be `optionLabel` / `optionValue` is a `map` here. The group still owns the
+ * selection - each `ToggleButton` only declares its `value` and reads its pressed state from the group's
+ * context - which is what keeps `multiple` a single prop on the group rather than a rule every button
+ * would otherwise have to agree on.
  */ function PrimeSelectButton({ element }) {
     const [value, setValue] = react.useState(properties.stringProperty(element, 'value'));
-    return /*#__PURE__*/ jsxRuntime.jsx(selectbutton.SelectButton, {
+    return /*#__PURE__*/ jsxRuntime.jsx(togglebuttongroup.ToggleButtonGroup, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(event.value),
-        options: properties.optionsProperty(element, 'options'),
-        optionLabel: "label",
-        optionValue: "value",
+        onValueChange: (event)=>setValue(event.value),
         multiple: properties.booleanProperty(element, 'multiple', false),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        disabled: properties.booleanProperty(element, 'disabled', false),
+        children: properties.optionsProperty(element, 'options').map((option)=>/*#__PURE__*/ jsxRuntime.jsx(togglebutton.ToggleButton.Root, {
+                value: option.value,
+                children: option.label
+            }, option.value))
     });
 }
 

package/dist/cjs/form/PrimeSelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeSelectButton.js","sources":["../../../form/PrimeSelectButton.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { SelectButton } from 'primereact/selectbutton';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, optionsProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:selectButton` component - a small set of choices shown as joined toggle buttons.\n *\n * In PrimeReact 11 this component is renamed `ToggleButtonGroup`.\n */\nexport function PrimeSelectButton({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));\n    return (\n        <SelectButton\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(event.value)}\n            options={optionsProperty(element, 'options')}\n            optionLabel='label'\n            optionValue='value'\n            multiple={booleanProperty(element, 'multiple', false)}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeSelectButton","element","value","setValue","useState","stringProperty","_jsx","SelectButton","data-scene-id","id","onChange","event","options","optionsProperty","optionLabel","optionValue","multiple","booleanProperty","disabled"],"mappings":";;;;;;;AAQA;;;;AAIC,IACM,SAASA,iBAAAA,CAAkB,EAAEC,OAAO,EAA4B,EAAA;AACnE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAAkBC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,yBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUR,QAAAA,CAASQ,KAAAA,CAAMT,KAAK,CAAA;AACzCU,QAAAA,OAAAA,EAASC,2BAAgBZ,OAAAA,EAAS,SAAA,CAAA;QAClCa,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZC,QAAAA,EAAUC,0BAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CiB,QAAAA,EAAUD,0BAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeSelectButton.js","sources":["../../../form/PrimeSelectButton.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { ToggleButton } from 'primereact/togglebutton';\nimport { ToggleButtonGroup } from 'primereact/togglebuttongroup';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, optionsProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:selectButton` component - a small set of choices shown as joined toggle buttons.\n * PrimeReact 11 calls it `ToggleButtonGroup`.\n *\n * v10 took the choices as an `options` array and rendered the buttons itself; v11 takes them as children,\n * so the mapping that used to be `optionLabel` / `optionValue` is a `map` here. The group still owns the\n * selection - each `ToggleButton` only declares its `value` and reads its pressed state from the group's\n * context - which is what keeps `multiple` a single prop on the group rather than a rule every button\n * would otherwise have to agree on.\n */\nexport function PrimeSelectButton({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));\n    return (\n        <ToggleButtonGroup\n            data-scene-id={element.id}\n            value={value}\n            onValueChange={(event) => setValue(event.value)}\n            multiple={booleanProperty(element, 'multiple', false)}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            {optionsProperty(element, 'options').map((option) => (\n                <ToggleButton.Root key={option.value} value={option.value}>\n                    {option.label}\n                </ToggleButton.Root>\n            ))}\n        </ToggleButtonGroup>\n    );\n}\n"],"names":["PrimeSelectButton","element","value","setValue","useState","stringProperty","_jsx","ToggleButtonGroup","data-scene-id","id","onValueChange","event","multiple","booleanProperty","disabled","optionsProperty","map","option","ToggleButton","Root","label"],"mappings":";;;;;;;;AASA;;;;;;;;;AASC,IACM,SAASA,iBAAAA,CAAkB,EAAEC,OAAO,EAA4B,EAAA;AACnE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAAkBC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,mCAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,aAAAA,EAAe,CAACC,KAAAA,GAAUR,QAAAA,CAASQ,KAAAA,CAAMT,KAAK,CAAA;QAC9CU,QAAAA,EAAUC,0BAAAA,CAAgBZ,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/Ca,QAAAA,EAAUD,0BAAAA,CAAgBZ,SAAS,UAAA,EAAY,KAAA,CAAA;kBAC9Cc,0BAAAA,CAAgBd,OAAAA,EAAS,WAAWe,GAAG,CAAC,CAACC,MAAAA,iBACtCX,cAAA,CAACY,0BAAaC,IAAI,EAAA;AAAoBjB,gBAAAA,KAAAA,EAAOe,OAAOf,KAAK;AACpDe,gBAAAA,QAAAA,EAAAA,MAAAA,CAAOG;AADYH,aAAAA,EAAAA,MAAAA,CAAOf,KAAK,CAAA;;AAMpD;;;;"}

package/dist/cjs/form/PrimeSlider.js

@@ -10,18 +10,29 @@ var properties = require('../properties.js');
  *
  * Given a width because Slider renders as a zero-height track that collapses to nothing in an
  * auto-sized container - the one piece of layout it cannot supply for itself.
+ *
+ * PrimeReact 11 exposes the track, the filled range and the handle as separate parts, which is what makes
+ * a range slider a matter of rendering a second `Handle` rather than a `range` prop. This adapter renders
+ * one, so the value stays a single number; `onValueChange` still reports `number[]` for the range case,
+ * hence the narrowing on the way back in.
  */ function PrimeSlider({ element }) {
     const [value, setValue] = react.useState(properties.numberProperty(element, 'value', 50));
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         "data-scene-id": element.id,
         className: "w-64",
-        children: /*#__PURE__*/ jsxRuntime.jsx(slider.Slider, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(slider.Slider.Root, {
             value: value,
-            onChange: (event)=>setValue(typeof event.value === 'number' ? event.value : value),
+            onValueChange: (event)=>setValue(typeof event.value === 'number' ? event.value : value),
             min: properties.numberProperty(element, 'min', 0),
             max: properties.numberProperty(element, 'max', 100),
             step: properties.numberProperty(element, 'step', 1),
-            disabled: properties.booleanProperty(element, 'disabled', false)
+            disabled: properties.booleanProperty(element, 'disabled', false),
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(slider.Slider.Track, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(slider.Slider.Range, {})
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(slider.Slider.Handle, {})
+            ]
         })
     });
 }

package/dist/cjs/form/PrimeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeSlider.js","sources":["../../../form/PrimeSlider.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { Slider } from 'primereact/slider';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:slider` component - a value picked along a track.\n *\n * Given a width because Slider renders as a zero-height track that collapses to nothing in an\n * auto-sized container - the one piece of layout it cannot supply for itself.\n */\nexport function PrimeSlider({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(numberProperty(element, 'value', 50));\n    return (\n        <div data-scene-id={element.id} className='w-64'>\n            <Slider\n                value={value}\n                onChange={(event) => setValue(typeof event.value === 'number' ? event.value : value)}\n                min={numberProperty(element, 'min', 0)}\n                max={numberProperty(element, 'max', 100)}\n                step={numberProperty(element, 'step', 1)}\n                disabled={booleanProperty(element, 'disabled', false)}\n            />\n        </div>\n    );\n}\n"],"names":["PrimeSlider","element","value","setValue","useState","numberProperty","_jsx","div","data-scene-id","id","className","Slider","onChange","event","min","max","step","disabled","booleanProperty"],"mappings":";;;;;;;AAQA;;;;;AAKC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAA4B,EAAA;AAC7D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAASC,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,EAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QAAEC,SAAAA,EAAU,MAAA;AACtC,QAAA,QAAA,gBAAAJ,cAAA,CAACK,aAAAA,EAAAA;YACGT,KAAAA,EAAOA,KAAAA;YACPU,QAAAA,EAAU,CAACC,KAAAA,GAAUV,QAAAA,CAAS,OAAOU,KAAAA,CAAMX,KAAK,KAAK,QAAA,GAAWW,KAAAA,CAAMX,KAAK,GAAGA,KAAAA,CAAAA;YAC9EY,GAAAA,EAAKT,yBAAAA,CAAeJ,SAAS,KAAA,EAAO,CAAA,CAAA;YACpCc,GAAAA,EAAKV,yBAAAA,CAAeJ,SAAS,KAAA,EAAO,GAAA,CAAA;YACpCe,IAAAA,EAAMX,yBAAAA,CAAeJ,SAAS,MAAA,EAAQ,CAAA,CAAA;YACtCgB,QAAAA,EAAUC,0BAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA;;;AAI/D;;;;"}
+{"version":3,"file":"PrimeSlider.js","sources":["../../../form/PrimeSlider.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { Slider } from 'primereact/slider';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:slider` component - a value picked along a track.\n *\n * Given a width because Slider renders as a zero-height track that collapses to nothing in an\n * auto-sized container - the one piece of layout it cannot supply for itself.\n *\n * PrimeReact 11 exposes the track, the filled range and the handle as separate parts, which is what makes\n * a range slider a matter of rendering a second `Handle` rather than a `range` prop. This adapter renders\n * one, so the value stays a single number; `onValueChange` still reports `number[]` for the range case,\n * hence the narrowing on the way back in.\n */\nexport function PrimeSlider({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(numberProperty(element, 'value', 50));\n    return (\n        <div data-scene-id={element.id} className='w-64'>\n            <Slider.Root\n                value={value}\n                onValueChange={(event) => setValue(typeof event.value === 'number' ? event.value : value)}\n                min={numberProperty(element, 'min', 0)}\n                max={numberProperty(element, 'max', 100)}\n                step={numberProperty(element, 'step', 1)}\n                disabled={booleanProperty(element, 'disabled', false)}>\n                <Slider.Track>\n                    <Slider.Range />\n                </Slider.Track>\n                <Slider.Handle />\n            </Slider.Root>\n        </div>\n    );\n}\n"],"names":["PrimeSlider","element","value","setValue","useState","numberProperty","_jsx","div","data-scene-id","id","className","_jsxs","Slider","Root","onValueChange","event","min","max","step","disabled","booleanProperty","Track","Range","Handle"],"mappings":";;;;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAA4B,EAAA;AAC7D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAASC,yBAAAA,CAAeJ,SAAS,OAAA,EAAS,EAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QAAEC,SAAAA,EAAU,MAAA;gCACtCC,eAAA,CAACC,cAAOC,IAAI,EAAA;YACRX,KAAAA,EAAOA,KAAAA;YACPY,aAAAA,EAAe,CAACC,KAAAA,GAAUZ,QAAAA,CAAS,OAAOY,KAAAA,CAAMb,KAAK,KAAK,QAAA,GAAWa,KAAAA,CAAMb,KAAK,GAAGA,KAAAA,CAAAA;YACnFc,GAAAA,EAAKX,yBAAAA,CAAeJ,SAAS,KAAA,EAAO,CAAA,CAAA;YACpCgB,GAAAA,EAAKZ,yBAAAA,CAAeJ,SAAS,KAAA,EAAO,GAAA,CAAA;YACpCiB,IAAAA,EAAMb,yBAAAA,CAAeJ,SAAS,MAAA,EAAQ,CAAA,CAAA;YACtCkB,QAAAA,EAAUC,0BAAAA,CAAgBnB,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,8BAAAK,cAAA,CAACM,cAAOS,KAAK,EAAA;4CACTf,cAAA,CAACM,cAAOU,KAAK,EAAA,EAAA;;AAEjB,8BAAAhB,cAAA,CAACM,cAAOW,MAAM,EAAA,EAAA;;;;AAI9B;;;;"}

package/dist/cjs/form/PrimeToggleSwitch.js

@@ -2,16 +2,20 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var inputswitch = require('primereact/inputswitch');
+var toggleswitch = require('primereact/toggleswitch');
 var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:toggleSwitch` component.
  *
- * The abstract name is `toggleSwitch` while PrimeReact 10 calls the component `InputSwitch` - the Scene
- * name follows what the thing is rather than what one library happens to call it this major version.
- * PrimeReact 11 renames it `ToggleSwitch`, so the abstract name already matches where the library is
- * going and the port changes only this file's import.
+ * The abstract name has always been `toggleSwitch` even while PrimeReact 10 called the component
+ * `InputSwitch` - a Scene name follows what the thing is rather than what one library happens to call it
+ * this major version - and v11 renaming it `ToggleSwitch` is the library catching up rather than the
+ * package moving.
+ *
+ * `Root` renders the hidden checkbox that carries the state and the accessible name, and the visible
+ * 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.
  */ function PrimeToggleSwitch({ element }) {
     const [checked, setChecked] = react.useState(properties.booleanProperty(element, 'checked', false));
     const label = properties.stringProperty(element, 'label');
@@ -19,11 +23,14 @@ var properties = require('../properties.js');
         "data-scene-id": element.id,
         className: "flex items-center gap-2",
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(inputswitch.InputSwitch, {
+            /*#__PURE__*/ jsxRuntime.jsx(toggleswitch.ToggleSwitch.Root, {
                 inputId: element.id,
                 checked: checked,
-                onChange: (event)=>setChecked(event.value),
-                disabled: properties.booleanProperty(element, 'disabled', false)
+                onCheckedChange: (event)=>setChecked(event.checked),
+                disabled: properties.booleanProperty(element, 'disabled', false),
+                children: /*#__PURE__*/ jsxRuntime.jsx(toggleswitch.ToggleSwitch.Control, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(toggleswitch.ToggleSwitch.Handle, {})
+                })
             }),
             label !== undefined && /*#__PURE__*/ jsxRuntime.jsx("label", {
                 htmlFor: element.id,

package/dist/cjs/form/PrimeToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeToggleSwitch.js","sources":["../../../form/PrimeToggleSwitch.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { InputSwitch } from 'primereact/inputswitch';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:toggleSwitch` component.\n *\n * The abstract name is `toggleSwitch` while PrimeReact 10 calls the component `InputSwitch` - the Scene\n * name follows what the thing is rather than what one library happens to call it this major version.\n * PrimeReact 11 renames it `ToggleSwitch`, so the abstract name already matches where the library is\n * going and the port changes only this file's import.\n */\nexport function PrimeToggleSwitch({ element }: RegisteredComponentProps) {\n    const [checked, setChecked] = useState(booleanProperty(element, 'checked', false));\n    const label = stringProperty(element, 'label');\n    return (\n        <div data-scene-id={element.id} className='flex items-center gap-2'>\n            <InputSwitch\n                inputId={element.id}\n                checked={checked}\n                onChange={(event) => setChecked(event.value)}\n                disabled={booleanProperty(element, 'disabled', false)}\n            />\n            {label !== undefined && <label htmlFor={element.id}>{label}</label>}\n        </div>\n    );\n}\n"],"names":["PrimeToggleSwitch","element","checked","setChecked","useState","booleanProperty","label","stringProperty","_jsxs","div","data-scene-id","id","className","_jsx","InputSwitch","inputId","onChange","event","value","disabled","undefined","htmlFor"],"mappings":";;;;;;;AAQA;;;;;;;AAOC,IACM,SAASA,iBAAAA,CAAkB,EAAEC,OAAO,EAA4B,EAAA;AACnE,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAASC,0BAAAA,CAAgBJ,SAAS,SAAA,EAAW,KAAA,CAAA,CAAA;IAC3E,MAAMK,KAAAA,GAAQC,0BAAeN,OAAAA,EAAS,OAAA,CAAA;AACtC,IAAA,qBACIO,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeT,QAAQU,EAAE;QAAEC,SAAAA,EAAU,yBAAA;;0BACtCC,cAAA,CAACC,uBAAAA,EAAAA;AACGC,gBAAAA,OAAAA,EAASd,QAAQU,EAAE;gBACnBT,OAAAA,EAASA,OAAAA;AACTc,gBAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUd,UAAAA,CAAWc,KAAAA,CAAMC,KAAK,CAAA;gBAC3CC,QAAAA,EAAUd,0BAAAA,CAAgBJ,SAAS,UAAA,EAAY,KAAA;;AAElDK,YAAAA,KAAAA,KAAUc,2BAAaP,cAAA,CAACP,OAAAA,EAAAA;AAAMe,gBAAAA,OAAAA,EAASpB,QAAQU,EAAE;AAAGL,gBAAAA,QAAAA,EAAAA;;;;AAGjE;;;;"}
+{"version":3,"file":"PrimeToggleSwitch.js","sources":["../../../form/PrimeToggleSwitch.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useState } from 'react';\nimport { ToggleSwitch } from 'primereact/toggleswitch';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:toggleSwitch` component.\n *\n * The abstract name has always been `toggleSwitch` even while PrimeReact 10 called the component\n * `InputSwitch` - a Scene name follows what the thing is rather than what one library happens to call it\n * this major version - and v11 renaming it `ToggleSwitch` is the library catching up rather than the\n * package moving.\n *\n * `Root` renders the hidden checkbox that carries the state and the accessible name, and the visible\n * switch is `Control` plus the `Handle` that slides inside it. That is why `inputId` and not `id` is what\n * the label points at: the label has to reach the input, not the wrapper.\n */\nexport function PrimeToggleSwitch({ element }: RegisteredComponentProps) {\n    const [checked, setChecked] = useState(booleanProperty(element, 'checked', false));\n    const label = stringProperty(element, 'label');\n    return (\n        <div data-scene-id={element.id} className='flex items-center gap-2'>\n            <ToggleSwitch.Root\n                inputId={element.id}\n                checked={checked}\n                onCheckedChange={(event) => setChecked(event.checked)}\n                disabled={booleanProperty(element, 'disabled', false)}>\n                <ToggleSwitch.Control>\n                    <ToggleSwitch.Handle />\n                </ToggleSwitch.Control>\n            </ToggleSwitch.Root>\n            {label !== undefined && <label htmlFor={element.id}>{label}</label>}\n        </div>\n    );\n}\n"],"names":["PrimeToggleSwitch","element","checked","setChecked","useState","booleanProperty","label","stringProperty","_jsxs","div","data-scene-id","id","className","_jsx","ToggleSwitch","Root","inputId","onCheckedChange","event","disabled","Control","Handle","undefined","htmlFor"],"mappings":";;;;;;;AAQA;;;;;;;;;;;AAWC,IACM,SAASA,iBAAAA,CAAkB,EAAEC,OAAO,EAA4B,EAAA;AACnE,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAASC,0BAAAA,CAAgBJ,SAAS,SAAA,EAAW,KAAA,CAAA,CAAA;IAC3E,MAAMK,KAAAA,GAAQC,0BAAeN,OAAAA,EAAS,OAAA,CAAA;AACtC,IAAA,qBACIO,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeT,QAAQU,EAAE;QAAEC,SAAAA,EAAU,yBAAA;;AACtC,0BAAAC,cAAA,CAACC,0BAAaC,IAAI,EAAA;AACdC,gBAAAA,OAAAA,EAASf,QAAQU,EAAE;gBACnBT,OAAAA,EAASA,OAAAA;AACTe,gBAAAA,eAAAA,EAAiB,CAACC,KAAAA,GAAUf,UAAAA,CAAWe,KAAAA,CAAMhB,OAAO,CAAA;gBACpDiB,QAAAA,EAAUd,0BAAAA,CAAgBJ,SAAS,UAAA,EAAY,KAAA,CAAA;wCAC/CY,cAAA,CAACC,0BAAaM,OAAO,EAAA;4CACjBP,cAAA,CAACC,0BAAaO,MAAM,EAAA,EAAA;;;AAG3Bf,YAAAA,KAAAA,KAAUgB,2BAAaT,cAAA,CAACP,OAAAA,EAAAA;AAAMiB,gBAAAA,OAAAA,EAAStB,QAAQU,EAAE;AAAGL,gBAAAA,QAAAA,EAAAA;;;;AAGjE;;;;"}