@cratis/scene.primereact 1.0.0 → 2.0.0

package/dist/esm/form/PrimeChips.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeChips.js","sources":["../../../form/PrimeChips.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 { Chips } from 'primereact/chips';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringArrayProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:chips` component - free-form entry of a list of short values, each shown as a chip.\n *\n * In PrimeReact 11 this component is renamed `InputTags`.\n */\nexport function PrimeChips({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<string[]>(stringArrayProperty(element, 'value'));\n    return (\n        <Chips\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(event.value ?? [])}\n            max={undefined}\n            placeholder={stringProperty(element, 'placeholder')}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeChips","element","value","setValue","useState","stringArrayProperty","_jsx","Chips","data-scene-id","id","onChange","event","max","undefined","placeholder","stringProperty","disabled","booleanProperty"],"mappings":";;;;;AAQA;;;;AAIC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAA4B,EAAA;AAC5D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAAmBC,oBAAoBJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AAC1E,IAAA,qBACIK,GAAA,CAACC,KAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBP,KAAAA,EAAOA,KAAAA;AACPQ,QAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUR,QAAAA,CAASQ,KAAAA,CAAMT,KAAK,IAAI,EAAE,CAAA;QAC/CU,GAAAA,EAAKC,SAAAA;AACLC,QAAAA,WAAAA,EAAaC,eAAed,OAAAA,EAAS,aAAA,CAAA;QACrCe,QAAAA,EAAUC,eAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeChips.js","sources":["../../../form/PrimeChips.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 { InputTags } from 'primereact/inputtags';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, stringArrayProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:chips` component - free-form entry of a list of short values, each shown as a chip.\n * PrimeReact 11 calls it `InputTags`.\n *\n * The chips and the text field are both render-prop slots in v11 rather than markup the component\n * chooses, which is why this file draws a chip and its remove button by hand: `Items` hands over one tag\n * at a time along with the props that make it removable, and `Control` hands over the props for the\n * input. It is more code than the v10 one-liner and it is the reason the chip is stylable at all.\n *\n * A tag is committed per Enter, and pasted text arrives as one tag rather than being split. That is v11's\n * default and the adapter keeps it: v10's `separator` property is not read, because splitting on a\n * character is a data-entry policy that belongs to the screen collecting the data, not to a preview of it.\n */\nexport function PrimeChips({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<string[]>(stringArrayProperty(element, 'value'));\n    return (\n        <InputTags.Root\n            data-scene-id={element.id}\n            value={value}\n            onValueChange={(event) => setValue(event.value ?? [])}\n            max={numberProperty(element, 'max')}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            <InputTags.Items>\n                {({ item, index, remove, itemProps }) => (\n                    <span {...itemProps} key={`${item}-${index}`}>\n                        <span>{item}</span>\n                        <button type='button' aria-label={`Remove ${item}`} onClick={remove}>\n                            <i className='pi pi-times-circle' />\n                        </button>\n                    </span>\n                )}\n            </InputTags.Items>\n            <InputTags.Control>\n                {({ controlProps }) => <input {...controlProps} placeholder={stringProperty(element, 'placeholder')} />}\n            </InputTags.Control>\n        </InputTags.Root>\n    );\n}\n"],"names":["PrimeChips","element","value","setValue","useState","stringArrayProperty","_jsxs","InputTags","Root","data-scene-id","id","onValueChange","event","max","numberProperty","disabled","booleanProperty","_jsx","Items","item","index","remove","itemProps","_createElement","span","key","button","type","aria-label","onClick","i","className","Control","controlProps","input","placeholder","stringProperty"],"mappings":";;;;;AAQA;;;;;;;;;;;;AAYC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAA4B,EAAA;AAC5D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAAmBC,oBAAoBJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IAC1E,qBACIK,IAAA,CAACC,UAAUC,IAAI,EAAA;AACXC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;QACzBR,KAAAA,EAAOA,KAAAA;AACPS,QAAAA,aAAAA,EAAe,CAACC,KAAAA,GAAUT,QAAAA,CAASS,KAAAA,CAAMV,KAAK,IAAI,EAAE,CAAA;AACpDW,QAAAA,GAAAA,EAAKC,eAAeb,OAAAA,EAAS,KAAA,CAAA;QAC7Bc,QAAAA,EAAUC,eAAAA,CAAgBf,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,0BAAAgB,GAAA,CAACV,UAAUW,KAAK,EAAA;0BACX,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,EAAE,iBAChCC,aAAA,CAACC,MAAAA,EAAAA;AAAM,wBAAA,GAAGF,SAAS;AAAEG,wBAAAA,GAAAA,EAAK,CAAA,EAAGN,IAAAA,CAAK,CAAC,EAAEC,KAAAA,CAAAA,CAAO;;0CACxCH,GAAA,CAACO,MAAAA,EAAAA;AAAML,gCAAAA,QAAAA,EAAAA;;0CACPF,GAAA,CAACS,QAAAA,EAAAA;gCAAOC,IAAAA,EAAK,QAAA;gCAASC,YAAAA,EAAY,CAAC,OAAO,EAAET,IAAAA,CAAAA,CAAM;gCAAEU,OAAAA,EAASR,MAAAA;AACzD,gCAAA,QAAA,gBAAAJ,GAAA,CAACa,GAAAA,EAAAA;oCAAEC,SAAAA,EAAU;;;;;;AAK7B,0BAAAd,GAAA,CAACV,UAAUyB,OAAO,EAAA;AACb,gBAAA,QAAA,EAAA,CAAC,EAAEC,YAAY,EAAE,iBAAKhB,GAAA,CAACiB,OAAAA,EAAAA;AAAO,wBAAA,GAAGD,YAAY;AAAEE,wBAAAA,WAAAA,EAAaC,eAAenC,OAAAA,EAAS,aAAA;;;;;AAIrG;;;;"}

package/dist/esm/form/PrimeColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeColorPicker.d.ts","sourceRoot":"","sources":["../../../form/PrimeColorPicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAS/D,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAWrE"}
+{"version":3,"file":"PrimeColorPicker.d.ts","sourceRoot":"","sources":["../../../form/PrimeColorPicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AA0C/D,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAsBrE"}

package/dist/esm/form/PrimeColorPicker.js

@@ -1,21 +1,68 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { ColorPicker } from 'primereact/colorpicker';
+import { InputColor, parseColor } from 'primereact/inputcolor';
 import { stringProperty, booleanProperty } from '../properties.js';
 
 /**
- * The `PrimeReact:colorPicker` component.
+ * The color an unauthored - or unparseable - picker falls back to, so an element with no `value` and an
+ * element with a broken one look alike rather than one of them looking broken.
+ */ const fallbackColor = '6366f1';
+/**
+ * Parses a hex string with no leading `#` into the color object PrimeReact 11 works in.
+ *
+ * A Scene element's properties are authored, not validated: `value: 'red'` or a half-typed hex is an
+ * ordinary state on a screen under construction, and `parseColor` throws on both. Swallowing that here
+ * renders a picker the author can immediately correct instead of taking the surrounding screen down -
+ * and it lives in a function rather than inline because a `try` inside JSX would force the whole
+ * composition into a statement body for one expression's sake.
+ *
+ * @param hex The authored hex digits, without a leading `#`.
+ * @returns The parsed color, or {@link fallbackColor} when the string is not a color.
+ */ function toColor(hex) {
+    try {
+        return parseColor(`#${hex}`);
+    } catch  {
+        return parseColor(`#${fallbackColor}`);
+    }
+}
+/**
+ * The `PrimeReact:colorPicker` component, named `InputColor` by PrimeReact 11.
+ *
+ * The value is kept as a hex string without the leading `#`, which is what a Scene model round-trips
+ * cleanly and what the v10 component expected; a screen writing `#6366f1` therefore still works. v11
+ * models its value as a parsed color object rather than a string, so this adapter is the translation
+ * layer - {@link toColor} on the way in, `toString('hex')` on the way out - and the authored property
+ * keeps the shape it always had.
  *
- * The value is kept as a hex string without the leading `#`, which is what ColorPicker's default
- * `hex` format expects; a screen writing `#6366f1` therefore still works.
+ * v10's `inline` property is not read. It chose between a swatch that opened a panel and the panel shown
+ * in place; v11's `InputColor` is only ever the panel - saturation area, hue slider and swatch, with no
+ * overlay mode to switch to - so there is no longer a choice to express.
  */ function PrimeColorPicker({ element }) {
-    const [value, setValue] = useState(stringProperty(element, 'value', '6366f1').replace('#', ''));
-    return /*#__PURE__*/ jsx(ColorPicker, {
+    const [value, setValue] = useState(stringProperty(element, 'value', fallbackColor).replace('#', ''));
+    return /*#__PURE__*/ jsx("div", {
         "data-scene-id": element.id,
-        value: value,
-        onChange: (event)=>setValue(typeof event.value === 'string' ? event.value : value),
-        inline: booleanProperty(element, 'inline', false),
-        disabled: booleanProperty(element, 'disabled', false)
+        children: /*#__PURE__*/ jsxs(InputColor.Root, {
+            value: toColor(value),
+            onValueChange: (event)=>setValue(event.value.toString('hex').replace('#', '')),
+            disabled: booleanProperty(element, 'disabled', false),
+            children: [
+                /*#__PURE__*/ jsxs(InputColor.Area, {
+                    children: [
+                        /*#__PURE__*/ jsx(InputColor.AreaBackground, {}),
+                        /*#__PURE__*/ jsx(InputColor.AreaHandle, {})
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(InputColor.Slider, {
+                    children: [
+                        /*#__PURE__*/ jsx(InputColor.SliderTrack, {}),
+                        /*#__PURE__*/ jsx(InputColor.SliderHandle, {})
+                    ]
+                }),
+                /*#__PURE__*/ jsx(InputColor.Swatch, {
+                    children: /*#__PURE__*/ jsx(InputColor.SwatchBackground, {})
+                })
+            ]
+        })
     });
 }
 

package/dist/esm/form/PrimeColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeColorPicker.js","sources":["../../../form/PrimeColorPicker.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 { ColorPicker } from 'primereact/colorpicker';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:colorPicker` component.\n *\n * The value is kept as a hex string without the leading `#`, which is what ColorPicker's default\n * `hex` format expects; a screen writing `#6366f1` therefore still works.\n */\nexport function PrimeColorPicker({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(stringProperty(element, 'value', '6366f1').replace('#', ''));\n    return (\n        <ColorPicker\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(typeof event.value === 'string' ? event.value : value)}\n            inline={booleanProperty(element, 'inline', false)}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeColorPicker","element","value","setValue","useState","stringProperty","replace","_jsx","ColorPicker","data-scene-id","id","onChange","event","inline","booleanProperty","disabled"],"mappings":";;;;;AAQA;;;;;AAKC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;IAClE,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAASC,cAAAA,CAAeJ,OAAAA,EAAS,OAAA,EAAS,QAAA,CAAA,CAAUK,OAAO,CAAC,GAAA,EAAK,EAAA,CAAA,CAAA;AAC3F,IAAA,qBACIC,GAAA,CAACC,WAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;QACzBR,KAAAA,EAAOA,KAAAA;QACPS,QAAAA,EAAU,CAACC,KAAAA,GAAUT,QAAAA,CAAS,OAAOS,KAAAA,CAAMV,KAAK,KAAK,QAAA,GAAWU,KAAAA,CAAMV,KAAK,GAAGA,KAAAA,CAAAA;QAC9EW,MAAAA,EAAQC,eAAAA,CAAgBb,SAAS,QAAA,EAAU,KAAA,CAAA;QAC3Cc,QAAAA,EAAUD,eAAAA,CAAgBb,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeColorPicker.js","sources":["../../../form/PrimeColorPicker.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 { InputColor, parseColor } from 'primereact/inputcolor';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The color an unauthored - or unparseable - picker falls back to, so an element with no `value` and an\n * element with a broken one look alike rather than one of them looking broken.\n */\nconst fallbackColor = '6366f1';\n\n/**\n * Parses a hex string with no leading `#` into the color object PrimeReact 11 works in.\n *\n * A Scene element's properties are authored, not validated: `value: 'red'` or a half-typed hex is an\n * ordinary state on a screen under construction, and `parseColor` throws on both. Swallowing that here\n * renders a picker the author can immediately correct instead of taking the surrounding screen down -\n * and it lives in a function rather than inline because a `try` inside JSX would force the whole\n * composition into a statement body for one expression's sake.\n *\n * @param hex The authored hex digits, without a leading `#`.\n * @returns The parsed color, or {@link fallbackColor} when the string is not a color.\n */\nfunction toColor(hex: string) {\n    try {\n        return parseColor(`#${hex}`);\n    } catch {\n        return parseColor(`#${fallbackColor}`);\n    }\n}\n\n/**\n * The `PrimeReact:colorPicker` component, named `InputColor` by PrimeReact 11.\n *\n * The value is kept as a hex string without the leading `#`, which is what a Scene model round-trips\n * cleanly and what the v10 component expected; a screen writing `#6366f1` therefore still works. v11\n * models its value as a parsed color object rather than a string, so this adapter is the translation\n * layer - {@link toColor} on the way in, `toString('hex')` on the way out - and the authored property\n * keeps the shape it always had.\n *\n * v10's `inline` property is not read. It chose between a swatch that opened a panel and the panel shown\n * in place; v11's `InputColor` is only ever the panel - saturation area, hue slider and swatch, with no\n * overlay mode to switch to - so there is no longer a choice to express.\n */\nexport function PrimeColorPicker({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState(stringProperty(element, 'value', fallbackColor).replace('#', ''));\n    return (\n        <div data-scene-id={element.id}>\n            <InputColor.Root\n                value={toColor(value)}\n                onValueChange={(event) => setValue(event.value.toString('hex').replace('#', ''))}\n                disabled={booleanProperty(element, 'disabled', false)}>\n                <InputColor.Area>\n                    <InputColor.AreaBackground />\n                    <InputColor.AreaHandle />\n                </InputColor.Area>\n                <InputColor.Slider>\n                    <InputColor.SliderTrack />\n                    <InputColor.SliderHandle />\n                </InputColor.Slider>\n                <InputColor.Swatch>\n                    <InputColor.SwatchBackground />\n                </InputColor.Swatch>\n            </InputColor.Root>\n        </div>\n    );\n}\n"],"names":["fallbackColor","toColor","hex","parseColor","PrimeColorPicker","element","value","setValue","useState","stringProperty","replace","_jsx","div","data-scene-id","id","_jsxs","InputColor","Root","onValueChange","event","toString","disabled","booleanProperty","Area","AreaBackground","AreaHandle","Slider","SliderTrack","SliderHandle","Swatch","SwatchBackground"],"mappings":";;;;;AAQA;;;AAGC,IACD,MAAMA,aAAAA,GAAgB,QAAA;AAEtB;;;;;;;;;;;IAYA,SAASC,QAAQC,GAAW,EAAA;IACxB,IAAI;AACA,QAAA,OAAOC,UAAAA,CAAW,CAAC,CAAC,EAAED,GAAAA,CAAAA,CAAK,CAAA;AAC/B,IAAA,CAAA,CAAE,OAAM;AACJ,QAAA,OAAOC,UAAAA,CAAW,CAAC,CAAC,EAAEH,aAAAA,CAAAA,CAAe,CAAA;AACzC,IAAA;AACJ;AAEA;;;;;;;;;;;;AAYC,IACM,SAASI,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;IAClE,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAASC,cAAAA,CAAeJ,OAAAA,EAAS,OAAA,EAASL,aAAAA,CAAAA,CAAeU,OAAO,CAAC,GAAA,EAAK,EAAA,CAAA,CAAA;AAChG,IAAA,qBACIC,GAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;gCAC1BC,IAAA,CAACC,WAAWC,IAAI,EAAA;AACZX,YAAAA,KAAAA,EAAOL,OAAAA,CAAQK,KAAAA,CAAAA;YACfY,aAAAA,EAAe,CAACC,KAAAA,GAAUZ,QAAAA,CAASY,KAAAA,CAAMb,KAAK,CAACc,QAAQ,CAAC,KAAA,CAAA,CAAOV,OAAO,CAAC,GAAA,EAAK,EAAA,CAAA,CAAA;YAC5EW,QAAAA,EAAUC,eAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,8BAAAU,IAAA,CAACC,WAAWO,IAAI,EAAA;;AACZ,sCAAAZ,GAAA,CAACK,WAAWQ,cAAc,EAAA,EAAA,CAAA;AAC1B,sCAAAb,GAAA,CAACK,WAAWS,UAAU,EAAA,EAAA;;;AAE1B,8BAAAV,IAAA,CAACC,WAAWU,MAAM,EAAA;;AACd,sCAAAf,GAAA,CAACK,WAAWW,WAAW,EAAA,EAAA,CAAA;AACvB,sCAAAhB,GAAA,CAACK,WAAWY,YAAY,EAAA,EAAA;;;AAE5B,8BAAAjB,GAAA,CAACK,WAAWa,MAAM,EAAA;4CACdlB,GAAA,CAACK,WAAWc,gBAAgB,EAAA,EAAA;;;;;AAKhD;;;;"}

package/dist/esm/form/PrimeDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeDropdown.d.ts","sourceRoot":"","sources":["../../../form/PrimeDropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAY/D,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAgBlE"}
+{"version":3,"file":"PrimeDropdown.d.ts","sourceRoot":"","sources":["../../../form/PrimeDropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAgB/D,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BA8BlE"}

package/dist/esm/form/PrimeDropdown.js

@@ -1,6 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { Dropdown } from 'primereact/dropdown';
+import { Select } from 'primereact/select';
 import { stringProperty, booleanProperty, optionsProperty } from '../properties.js';
 
 /**
@@ -9,21 +9,49 @@ import { stringProperty, booleanProperty, optionsProperty } from '../properties.
  * Options are normalized by `optionsProperty`, so a screen may write either bare strings or
  * `{ label, value }` records and get the same result.
  *
- * In PrimeReact 11 this component is renamed `Select`; see the migration notes in the package
- * documentation.
+ * PrimeReact calls this `Select`, and it is a composition rather than one component: `Root` owns the
+ * value and the option model, `Trigger` is what the user clicks, and the list lives behind a `Portal` so
+ * it escapes any clipping ancestor. `Select.List` renders `options` itself - there is no option mapping
+ * here, and adding one would only duplicate what `optionLabel` / `optionValue` already say. The `appendTo`
+ * and z-index juggling a dropdown inside a dialog used to need is gone with it: the portal stacks
+ * correctly on its own.
  */ function PrimeDropdown({ element }) {
     const [value, setValue] = useState(stringProperty(element, 'value'));
-    return /*#__PURE__*/ jsx(Dropdown, {
+    const placeholder = stringProperty(element, 'placeholder', 'Select');
+    const filter = booleanProperty(element, 'filter', false);
+    const showClear = booleanProperty(element, 'showClear', false);
+    return /*#__PURE__*/ jsxs(Select.Root, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(event.value),
+        onValueChange: (event)=>setValue(event.value),
         options: optionsProperty(element, 'options'),
         optionLabel: "label",
         optionValue: "value",
-        placeholder: stringProperty(element, 'placeholder', 'Select'),
-        filter: booleanProperty(element, 'filter', false),
-        showClear: booleanProperty(element, 'showClear', false),
-        disabled: booleanProperty(element, 'disabled', false)
+        filter: filter,
+        disabled: booleanProperty(element, 'disabled', false),
+        children: [
+            /*#__PURE__*/ jsxs(Select.Trigger, {
+                children: [
+                    /*#__PURE__*/ jsx(Select.Value, {
+                        placeholder: placeholder
+                    }),
+                    showClear && /*#__PURE__*/ jsx(Select.Clear, {}),
+                    /*#__PURE__*/ jsx(Select.Arrow, {})
+                ]
+            }),
+            /*#__PURE__*/ jsx(Select.Portal, {
+                children: /*#__PURE__*/ jsx(Select.Positioner, {
+                    children: /*#__PURE__*/ jsxs(Select.Popup, {
+                        children: [
+                            filter && /*#__PURE__*/ jsx(Select.Filter, {
+                                placeholder: placeholder
+                            }),
+                            /*#__PURE__*/ jsx(Select.List, {})
+                        ]
+                    })
+                })
+            })
+        ]
     });
 }
 

package/dist/esm/form/PrimeDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeDropdown.js","sources":["../../../form/PrimeDropdown.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 { Dropdown } from 'primereact/dropdown';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, optionsProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:dropdown` component - a single-choice select.\n *\n * Options are normalized by `optionsProperty`, so a screen may write either bare strings or\n * `{ label, value }` records and get the same result.\n *\n * In PrimeReact 11 this component is renamed `Select`; see the migration notes in the package\n * documentation.\n */\nexport function PrimeDropdown({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));\n    return (\n        <Dropdown\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            placeholder={stringProperty(element, 'placeholder', 'Select')}\n            filter={booleanProperty(element, 'filter', false)}\n            showClear={booleanProperty(element, 'showClear', false)}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeDropdown","element","value","setValue","useState","stringProperty","_jsx","Dropdown","data-scene-id","id","onChange","event","options","optionsProperty","optionLabel","optionValue","placeholder","filter","booleanProperty","showClear","disabled"],"mappings":";;;;;AAQA;;;;;;;;AAQC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;AAC/D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAA6BC,eAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AAC/E,IAAA,qBACIK,GAAA,CAACC,QAAAA,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,gBAAgBZ,OAAAA,EAAS,SAAA,CAAA;QAClCa,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAaX,cAAAA,CAAeJ,SAAS,aAAA,EAAe,QAAA,CAAA;QACpDgB,MAAAA,EAAQC,eAAAA,CAAgBjB,SAAS,QAAA,EAAU,KAAA,CAAA;QAC3CkB,SAAAA,EAAWD,eAAAA,CAAgBjB,SAAS,WAAA,EAAa,KAAA,CAAA;QACjDmB,QAAAA,EAAUF,eAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeDropdown.js","sources":["../../../form/PrimeDropdown.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, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:dropdown` component - a single-choice select.\n *\n * Options are normalized by `optionsProperty`, so a screen may write either bare strings or\n * `{ label, value }` records and get the same result.\n *\n * PrimeReact calls this `Select`, and it is a composition rather than one component: `Root` owns the\n * value and the option model, `Trigger` is what the user clicks, and the list lives behind a `Portal` so\n * it escapes any clipping ancestor. `Select.List` renders `options` itself - there is no option mapping\n * here, and adding one would only duplicate what `optionLabel` / `optionValue` already say. The `appendTo`\n * and z-index juggling a dropdown inside a dialog used to need is gone with it: the portal stacks\n * correctly on its own.\n */\nexport function PrimeDropdown({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));\n    const placeholder = stringProperty(element, 'placeholder', 'Select');\n    const filter = booleanProperty(element, 'filter', false);\n    const showClear = booleanProperty(element, 'showClear', false);\n    return (\n        <Select.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            filter={filter}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            <Select.Trigger>\n                <Select.Value placeholder={placeholder} />\n                {showClear && <Select.Clear />}\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":["PrimeDropdown","element","value","setValue","useState","stringProperty","placeholder","filter","booleanProperty","showClear","_jsxs","Select","Root","data-scene-id","id","onValueChange","event","options","optionsProperty","optionLabel","optionValue","disabled","Trigger","_jsx","Value","Clear","Arrow","Portal","Positioner","Popup","Filter","List"],"mappings":";;;;;AAQA;;;;;;;;;;;;AAYC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;AAC/D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAAkBC,eAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IACpE,MAAMK,WAAAA,GAAcD,cAAAA,CAAeJ,OAAAA,EAAS,aAAA,EAAe,QAAA,CAAA;IAC3D,MAAMM,MAAAA,GAASC,eAAAA,CAAgBP,OAAAA,EAAS,QAAA,EAAU,KAAA,CAAA;IAClD,MAAMQ,SAAAA,GAAYD,eAAAA,CAAgBP,OAAAA,EAAS,WAAA,EAAa,KAAA,CAAA;IACxD,qBACIS,IAAA,CAACC,OAAOC,IAAI,EAAA;AACRC,QAAAA,eAAAA,EAAeZ,QAAQa,EAAE;QACzBZ,KAAAA,EAAOA,KAAAA;AACPa,QAAAA,aAAAA,EAAe,CAACC,KAAAA,GAAUb,QAAAA,CAASa,KAAAA,CAAMd,KAAK,CAAA;AAC9Ce,QAAAA,OAAAA,EAASC,gBAAgBjB,OAAAA,EAAS,SAAA,CAAA;QAClCkB,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZb,MAAAA,EAAQA,MAAAA;QACRc,QAAAA,EAAUb,eAAAA,CAAgBP,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,0BAAAS,IAAA,CAACC,OAAOW,OAAO,EAAA;;AACX,kCAAAC,GAAA,CAACZ,OAAOa,KAAK,EAAA;wBAAClB,WAAAA,EAAaA;;oBAC1BG,SAAAA,kBAAac,GAAA,CAACZ,OAAOc,KAAK,EAAA,EAAA,CAAA;AAC3B,kCAAAF,GAAA,CAACZ,OAAOe,KAAK,EAAA,EAAA;;;AAEjB,0BAAAH,GAAA,CAACZ,OAAOgB,MAAM,EAAA;wCACVJ,GAAA,CAACZ,OAAOiB,UAAU,EAAA;4CACdlB,IAAA,CAACC,OAAOkB,KAAK,EAAA;;4BACRtB,MAAAA,kBAAUgB,GAAA,CAACZ,OAAOmB,MAAM,EAAA;gCAACxB,WAAAA,EAAaA;;AACvC,0CAAAiB,GAAA,CAACZ,OAAOoB,IAAI,EAAA,EAAA;;;;;;;AAMpC;;;;"}

package/dist/esm/form/PrimeIconField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeIconField.d.ts","sourceRoot":"","sources":["../../../form/PrimeIconField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAS/D,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAO1E"}
+{"version":3,"file":"PrimeIconField.d.ts","sourceRoot":"","sources":["../../../form/PrimeIconField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAc/D,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAU1E"}

package/dist/esm/form/PrimeIconField.js

@@ -1,6 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { IconField } from 'primereact/iconfield';
-import { InputIcon } from 'primereact/inputicon';
 import { InputText } from 'primereact/inputtext';
 import { stringProperty } from '../properties.js';
 
@@ -9,17 +8,24 @@ import { stringProperty } from '../properties.js';
  *
  * Like {@link PrimeFloatLabel} this decorates a field rather than being one, so the field comes from the
  * `content` slot with a plain text input as the fallback.
+ *
+ * PrimeReact 11 has no `primereact/inputicon` module; the icon slot is `IconField.Inset`, a part of
+ * `iconfield` itself. With it went the `iconPosition` prop - v11 gives the root a single class and reads
+ * the side off the DOM instead - so `iconPosition` is honored here by placing the inset before or after
+ * the field rather than by naming a side. Same authored property, same result, decided one level up.
  */ function PrimeIconField({ element, slots }) {
-    return /*#__PURE__*/ jsxs(IconField, {
+    const icon = /*#__PURE__*/ jsx(IconField.Inset, {
+        className: stringProperty(element, 'icon', 'pi pi-search')
+    });
+    const field = slots.content?.length ? slots.content : /*#__PURE__*/ jsx(InputText, {
+        placeholder: stringProperty(element, 'placeholder')
+    });
+    const iconLast = stringProperty(element, 'iconPosition', 'left') === 'right';
+    return /*#__PURE__*/ jsxs(IconField.Root, {
         "data-scene-id": element.id,
-        iconPosition: stringProperty(element, 'iconPosition', 'left'),
         children: [
-            /*#__PURE__*/ jsx(InputIcon, {
-                className: stringProperty(element, 'icon', 'pi pi-search')
-            }),
-            slots.content?.length ? slots.content : /*#__PURE__*/ jsx(InputText, {
-                placeholder: stringProperty(element, 'placeholder')
-            })
+            iconLast ? field : icon,
+            iconLast ? icon : field
         ]
     });
 }

package/dist/esm/form/PrimeIconField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeIconField.js","sources":["../../../form/PrimeIconField.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 { IconField } from 'primereact/iconfield';\nimport { InputIcon } from 'primereact/inputicon';\nimport { InputText } from 'primereact/inputtext';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:iconField` component - a field with an icon rendered inside it.\n *\n * Like {@link PrimeFloatLabel} this decorates a field rather than being one, so the field comes from the\n * `content` slot with a plain text input as the fallback.\n */\nexport function PrimeIconField({ element, slots }: RegisteredComponentProps) {\n    return (\n        <IconField data-scene-id={element.id} iconPosition={stringProperty(element, 'iconPosition', 'left') as 'left' | 'right'}>\n            <InputIcon className={stringProperty(element, 'icon', 'pi pi-search')} />\n            {slots.content?.length ? slots.content : <InputText placeholder={stringProperty(element, 'placeholder')} />}\n        </IconField>\n    );\n}\n"],"names":["PrimeIconField","element","slots","_jsxs","IconField","data-scene-id","id","iconPosition","stringProperty","_jsx","InputIcon","className","content","length","InputText","placeholder"],"mappings":";;;;;;AASA;;;;;AAKC,IACM,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACvE,IAAA,qBACIC,IAAA,CAACC,SAAAA,EAAAA;AAAUC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;QAAEC,YAAAA,EAAcC,cAAAA,CAAeP,SAAS,cAAA,EAAgB,MAAA,CAAA;;0BACxFQ,GAAA,CAACC,SAAAA,EAAAA;gBAAUC,SAAAA,EAAWH,cAAAA,CAAeP,SAAS,MAAA,EAAQ,cAAA;;AACrDC,YAAAA,KAAAA,CAAMU,OAAO,EAAEC,MAAAA,GAASX,KAAAA,CAAMU,OAAO,iBAAGH,GAAA,CAACK,SAAAA,EAAAA;AAAUC,gBAAAA,WAAAA,EAAaP,eAAeP,OAAAA,EAAS,aAAA;;;;AAGrG;;;;"}
+{"version":3,"file":"PrimeIconField.js","sources":["../../../form/PrimeIconField.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 { IconField } from 'primereact/iconfield';\nimport { InputText } from 'primereact/inputtext';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:iconField` component - a field with an icon rendered inside it.\n *\n * Like {@link PrimeFloatLabel} this decorates a field rather than being one, so the field comes from the\n * `content` slot with a plain text input as the fallback.\n *\n * PrimeReact 11 has no `primereact/inputicon` module; the icon slot is `IconField.Inset`, a part of\n * `iconfield` itself. With it went the `iconPosition` prop - v11 gives the root a single class and reads\n * the side off the DOM instead - so `iconPosition` is honored here by placing the inset before or after\n * the field rather than by naming a side. Same authored property, same result, decided one level up.\n */\nexport function PrimeIconField({ element, slots }: RegisteredComponentProps) {\n    const icon = <IconField.Inset className={stringProperty(element, 'icon', 'pi pi-search')} />;\n    const field = slots.content?.length ? slots.content : <InputText placeholder={stringProperty(element, 'placeholder')} />;\n    const iconLast = stringProperty(element, 'iconPosition', 'left') === 'right';\n    return (\n        <IconField.Root data-scene-id={element.id}>\n            {iconLast ? field : icon}\n            {iconLast ? icon : field}\n        </IconField.Root>\n    );\n}\n"],"names":["PrimeIconField","element","slots","icon","_jsx","IconField","Inset","className","stringProperty","field","content","length","InputText","placeholder","iconLast","_jsxs","Root","data-scene-id","id"],"mappings":";;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACvE,MAAMC,IAAAA,iBAAOC,GAAA,CAACC,SAAAA,CAAUC,KAAK,EAAA;QAACC,SAAAA,EAAWC,cAAAA,CAAeP,SAAS,MAAA,EAAQ,cAAA;;IACzE,MAAMQ,KAAAA,GAAQP,MAAMQ,OAAO,EAAEC,SAAST,KAAAA,CAAMQ,OAAO,iBAAGN,GAAA,CAACQ,SAAAA,EAAAA;AAAUC,QAAAA,WAAAA,EAAaL,eAAeP,OAAAA,EAAS,aAAA;;AACtG,IAAA,MAAMa,QAAAA,GAAWN,cAAAA,CAAeP,OAAAA,EAAS,cAAA,EAAgB,MAAA,CAAA,KAAY,OAAA;IACrE,qBACIc,IAAA,CAACV,UAAUW,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAehB,QAAQiB,EAAE;;AACpCJ,YAAAA,QAAAA,GAAWL,KAAAA,GAAQN,IAAAA;AACnBW,YAAAA,QAAAA,GAAWX,IAAAA,GAAOM;;;AAG/B;;;;"}

package/dist/esm/form/PrimeInputNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeInputNumber.d.ts","sourceRoot":"","sources":["../../../form/PrimeInputNumber.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAS/D,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAiBrE"}
+{"version":3,"file":"PrimeInputNumber.d.ts","sourceRoot":"","sources":["../../../form/PrimeInputNumber.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAc/D,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BA0BrE"}

package/dist/esm/form/PrimeInputNumber.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { InputNumber } from 'primereact/inputnumber';
 import { numberProperty, stringProperty, booleanProperty } from '../properties.js';
@@ -8,10 +8,15 @@ import { numberProperty, stringProperty, booleanProperty } from '../properties.j
  *
  * `mode` and `currency` are passed straight through because that is where InputNumber earns its keep
  * over a plain text field: it formats and parses in the user's locale rather than making a screen do it.
+ *
+ * PrimeReact 11 splits the component in two: `Root` holds the number model and `Input` is the field it
+ * formats into, which is also why `placeholder` moved onto the input rather than the root. `showButtons`
+ * 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.
  */ function PrimeInputNumber({ element }) {
     const [value, setValue] = useState(numberProperty(element, 'value'));
     const currency = stringProperty(element, 'currency');
-    return /*#__PURE__*/ jsx(InputNumber, {
+    return /*#__PURE__*/ jsxs(InputNumber.Root, {
         "data-scene-id": element.id,
         value: value,
         onValueChange: (event)=>setValue(typeof event.value === 'number' ? event.value : undefined),
@@ -19,9 +24,26 @@ import { numberProperty, stringProperty, booleanProperty } from '../properties.j
         currency: currency,
         min: numberProperty(element, 'min'),
         max: numberProperty(element, 'max'),
-        showButtons: booleanProperty(element, 'showButtons', false),
-        placeholder: stringProperty(element, 'placeholder'),
-        disabled: booleanProperty(element, 'disabled', false)
+        disabled: booleanProperty(element, 'disabled', false),
+        children: [
+            /*#__PURE__*/ jsx(InputNumber.Input, {
+                placeholder: stringProperty(element, 'placeholder')
+            }),
+            booleanProperty(element, 'showButtons', false) && /*#__PURE__*/ jsxs(InputNumber.Group, {
+                children: [
+                    /*#__PURE__*/ jsx(InputNumber.Increment, {
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: "pi pi-chevron-up"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(InputNumber.Decrement, {
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: "pi pi-chevron-down"
+                        })
+                    })
+                ]
+            })
+        ]
     });
 }
 

package/dist/esm/form/PrimeInputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeInputNumber.js","sources":["../../../form/PrimeInputNumber.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 { InputNumber } from 'primereact/inputnumber';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:inputNumber` component - a numeric field with locale-aware formatting.\n *\n * `mode` and `currency` are passed straight through because that is where InputNumber earns its keep\n * over a plain text field: it formats and parses in the user's locale rather than making a screen do it.\n */\nexport function PrimeInputNumber({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<number | undefined>(numberProperty(element, 'value'));\n    const currency = stringProperty(element, 'currency');\n    return (\n        <InputNumber\n            data-scene-id={element.id}\n            value={value}\n            onValueChange={(event) => setValue(typeof event.value === 'number' ? event.value : undefined)}\n            mode={currency === undefined ? 'decimal' : 'currency'}\n            currency={currency}\n            min={numberProperty(element, 'min')}\n            max={numberProperty(element, 'max')}\n            showButtons={booleanProperty(element, 'showButtons', false)}\n            placeholder={stringProperty(element, 'placeholder')}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeInputNumber","element","value","setValue","useState","numberProperty","currency","stringProperty","_jsx","InputNumber","data-scene-id","id","onValueChange","event","undefined","mode","min","max","showButtons","booleanProperty","placeholder","disabled"],"mappings":";;;;;AAQA;;;;;AAKC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;AAClE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAA6BC,eAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IAC/E,MAAMK,QAAAA,GAAWC,eAAeN,OAAAA,EAAS,UAAA,CAAA;AACzC,IAAA,qBACIO,GAAA,CAACC,WAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeT,QAAQU,EAAE;QACzBT,KAAAA,EAAOA,KAAAA;QACPU,aAAAA,EAAe,CAACC,KAAAA,GAAUV,QAAAA,CAAS,OAAOU,KAAAA,CAAMX,KAAK,KAAK,QAAA,GAAWW,KAAAA,CAAMX,KAAK,GAAGY,SAAAA,CAAAA;QACnFC,IAAAA,EAAMT,QAAAA,KAAaQ,YAAY,SAAA,GAAY,UAAA;QAC3CR,QAAAA,EAAUA,QAAAA;AACVU,QAAAA,GAAAA,EAAKX,eAAeJ,OAAAA,EAAS,KAAA,CAAA;AAC7BgB,QAAAA,GAAAA,EAAKZ,eAAeJ,OAAAA,EAAS,KAAA,CAAA;QAC7BiB,WAAAA,EAAaC,eAAAA,CAAgBlB,SAAS,aAAA,EAAe,KAAA,CAAA;AACrDmB,QAAAA,WAAAA,EAAab,eAAeN,OAAAA,EAAS,aAAA,CAAA;QACrCoB,QAAAA,EAAUF,eAAAA,CAAgBlB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeInputNumber.js","sources":["../../../form/PrimeInputNumber.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 { InputNumber } from 'primereact/inputnumber';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:inputNumber` component - a numeric field with locale-aware formatting.\n *\n * `mode` and `currency` are passed straight through because that is where InputNumber earns its keep\n * over a plain text field: it formats and parses in the user's locale rather than making a screen do it.\n *\n * PrimeReact 11 splits the component in two: `Root` holds the number model and `Input` is the field it\n * formats into, which is also why `placeholder` moved onto the input rather than the root. `showButtons`\n * is no longer a flag the component interprets - the spinner is a `Group` of `Increment` and `Decrement`\n * you either render or do not - so the property now decides whether that group exists at all.\n */\nexport function PrimeInputNumber({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<number | undefined>(numberProperty(element, 'value'));\n    const currency = stringProperty(element, 'currency');\n    return (\n        <InputNumber.Root\n            data-scene-id={element.id}\n            value={value}\n            onValueChange={(event) => setValue(typeof event.value === 'number' ? event.value : undefined)}\n            mode={currency === undefined ? 'decimal' : 'currency'}\n            currency={currency}\n            min={numberProperty(element, 'min')}\n            max={numberProperty(element, 'max')}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            <InputNumber.Input placeholder={stringProperty(element, 'placeholder')} />\n            {booleanProperty(element, 'showButtons', false) && (\n                <InputNumber.Group>\n                    <InputNumber.Increment>\n                        <i className='pi pi-chevron-up' />\n                    </InputNumber.Increment>\n                    <InputNumber.Decrement>\n                        <i className='pi pi-chevron-down' />\n                    </InputNumber.Decrement>\n                </InputNumber.Group>\n            )}\n        </InputNumber.Root>\n    );\n}\n"],"names":["PrimeInputNumber","element","value","setValue","useState","numberProperty","currency","stringProperty","_jsxs","InputNumber","Root","data-scene-id","id","onValueChange","event","undefined","mode","min","max","disabled","booleanProperty","_jsx","Input","placeholder","Group","Increment","i","className","Decrement"],"mappings":";;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAA4B,EAAA;AAClE,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAA6BC,eAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IAC/E,MAAMK,QAAAA,GAAWC,eAAeN,OAAAA,EAAS,UAAA,CAAA;IACzC,qBACIO,IAAA,CAACC,YAAYC,IAAI,EAAA;AACbC,QAAAA,eAAAA,EAAeV,QAAQW,EAAE;QACzBV,KAAAA,EAAOA,KAAAA;QACPW,aAAAA,EAAe,CAACC,KAAAA,GAAUX,QAAAA,CAAS,OAAOW,KAAAA,CAAMZ,KAAK,KAAK,QAAA,GAAWY,KAAAA,CAAMZ,KAAK,GAAGa,SAAAA,CAAAA;QACnFC,IAAAA,EAAMV,QAAAA,KAAaS,YAAY,SAAA,GAAY,UAAA;QAC3CT,QAAAA,EAAUA,QAAAA;AACVW,QAAAA,GAAAA,EAAKZ,eAAeJ,OAAAA,EAAS,KAAA,CAAA;AAC7BiB,QAAAA,GAAAA,EAAKb,eAAeJ,OAAAA,EAAS,KAAA,CAAA;QAC7BkB,QAAAA,EAAUC,eAAAA,CAAgBnB,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,0BAAAoB,GAAA,CAACZ,YAAYa,KAAK,EAAA;AAACC,gBAAAA,WAAAA,EAAahB,eAAeN,OAAAA,EAAS,aAAA;;AACvDmB,YAAAA,eAAAA,CAAgBnB,OAAAA,EAAS,aAAA,EAAe,KAAA,CAAA,kBACrCO,IAAA,CAACC,YAAYe,KAAK,EAAA;;AACd,kCAAAH,GAAA,CAACZ,YAAYgB,SAAS,EAAA;AAClB,wBAAA,QAAA,gBAAAJ,GAAA,CAACK,GAAAA,EAAAA;4BAAEC,SAAAA,EAAU;;;AAEjB,kCAAAN,GAAA,CAACZ,YAAYmB,SAAS,EAAA;AAClB,wBAAA,QAAA,gBAAAP,GAAA,CAACK,GAAAA,EAAAA;4BAAEC,SAAAA,EAAU;;;;;;;AAMrC;;;;"}

package/dist/esm/form/PrimeInputTextarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeInputTextarea.d.ts","sourceRoot":"","sources":["../../../form/PrimeInputTextarea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAQ/D,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAcvE"}
+{"version":3,"file":"PrimeInputTextarea.d.ts","sourceRoot":"","sources":["../../../form/PrimeInputTextarea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAU/D,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAcvE"}

package/dist/esm/form/PrimeInputTextarea.js

@@ -1,15 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { InputTextarea } from 'primereact/inputtextarea';
+import { Textarea } from 'primereact/textarea';
 import { stringProperty, booleanProperty, numberProperty } from '../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] = useState(stringProperty(element, 'value', ''));
-    return /*#__PURE__*/ jsx(InputTextarea, {
+    return /*#__PURE__*/ jsx(Textarea, {
         "data-scene-id": element.id,
         value: value,
         onChange: (event)=>setValue(event.target.value),

package/dist/esm/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,QAAAA,CAASC,cAAAA,CAAeJ,SAAS,OAAA,EAAS,EAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,GAAA,CAACC,aAAAA,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,cAAAA,CAAeb,SAAS,MAAA,EAAQ,CAAA,CAAA;AACtCc,QAAAA,IAAAA,EAAMD,eAAeb,OAAAA,EAAS,MAAA,CAAA;QAC9Be,UAAAA,EAAYC,eAAAA,CAAgBhB,SAAS,YAAA,EAAc,KAAA,CAAA;AACnDiB,QAAAA,WAAAA,EAAab,eAAeJ,OAAAA,EAAS,aAAA,CAAA;QACrCkB,QAAAA,EAAUF,eAAAA,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,QAAAA,CAASC,cAAAA,CAAeJ,SAAS,OAAA,EAAS,EAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,GAAA,CAACC,QAAAA,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,cAAAA,CAAeb,SAAS,MAAA,EAAQ,CAAA,CAAA;AACtCc,QAAAA,IAAAA,EAAMD,eAAeb,OAAAA,EAAS,MAAA,CAAA;QAC9Be,UAAAA,EAAYC,eAAAA,CAAgBhB,SAAS,YAAA,EAAc,KAAA,CAAA;AACnDiB,QAAAA,WAAAA,EAAab,eAAeJ,OAAAA,EAAS,aAAA,CAAA;QACrCkB,QAAAA,EAAUF,eAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}

package/dist/esm/form/PrimeKnob.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeKnob.d.ts","sourceRoot":"","sources":["../../../form/PrimeKnob.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAM/D,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAe9D"}
+{"version":3,"file":"PrimeKnob.d.ts","sourceRoot":"","sources":["../../../form/PrimeKnob.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAW/D,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAkB9D"}

package/dist/esm/form/PrimeKnob.js

@@ -1,22 +1,32 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Knob } from 'primereact/knob';
 import { numberProperty, booleanProperty } from '../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] = useState(numberProperty(element, 'value', 0));
-    return /*#__PURE__*/ jsx(Knob, {
+    return /*#__PURE__*/ jsxs(Knob.Root, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(event.value),
+        onValueChange: (event)=>setValue(event.value ?? 0),
         min: numberProperty(element, 'min', 0),
         max: numberProperty(element, 'max', 100),
         step: numberProperty(element, 'step', 1),
         size: numberProperty(element, 'size', 100),
         readOnly: booleanProperty(element, 'readOnly', false),
-        disabled: booleanProperty(element, 'disabled', false)
+        disabled: booleanProperty(element, 'disabled', false),
+        children: [
+            /*#__PURE__*/ jsx(Knob.Range, {}),
+            /*#__PURE__*/ jsx(Knob.Value, {}),
+            /*#__PURE__*/ jsx(Knob.Text, {})
+        ]
     });
 }
 

package/dist/esm/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,QAAAA,CAASC,cAAAA,CAAeJ,SAAS,OAAA,EAAS,CAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,GAAA,CAACC,IAAAA,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,cAAAA,CAAeJ,SAAS,KAAA,EAAO,CAAA,CAAA;QACpCY,GAAAA,EAAKR,cAAAA,CAAeJ,SAAS,KAAA,EAAO,GAAA,CAAA;QACpCa,IAAAA,EAAMT,cAAAA,CAAeJ,SAAS,MAAA,EAAQ,CAAA,CAAA;QACtCc,IAAAA,EAAMV,cAAAA,CAAeJ,SAAS,MAAA,EAAQ,GAAA,CAAA;QACtCe,QAAAA,EAAUC,eAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CiB,QAAAA,EAAUD,eAAAA,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,QAAAA,CAASC,cAAAA,CAAeJ,SAAS,OAAA,EAAS,CAAA,CAAA,CAAA;IACpE,qBACIK,IAAA,CAACC,KAAKC,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,cAAAA,CAAeJ,SAAS,KAAA,EAAO,CAAA,CAAA;QACpCa,GAAAA,EAAKT,cAAAA,CAAeJ,SAAS,KAAA,EAAO,GAAA,CAAA;QACpCc,IAAAA,EAAMV,cAAAA,CAAeJ,SAAS,MAAA,EAAQ,CAAA,CAAA;QACtCe,IAAAA,EAAMX,cAAAA,CAAeJ,SAAS,MAAA,EAAQ,GAAA,CAAA;QACtCgB,QAAAA,EAAUC,eAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CkB,QAAAA,EAAUD,eAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,0BAAAmB,GAAA,CAACb,KAAKc,KAAK,EAAA,EAAA,CAAA;AACX,0BAAAD,GAAA,CAACb,KAAKe,KAAK,EAAA,EAAA,CAAA;AACX,0BAAAF,GAAA,CAACb,KAAKgB,IAAI,EAAA,EAAA;;;AAGtB;;;;"}

package/dist/esm/form/PrimeListBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeListBox.d.ts","sourceRoot":"","sources":["../../../form/PrimeListBox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAS/D,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAejE"}
+{"version":3,"file":"PrimeListBox.d.ts","sourceRoot":"","sources":["../../../form/PrimeListBox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAe/D,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAejE"}

package/dist/esm/form/PrimeListBox.js

@@ -1,25 +1,31 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { ListBox } from 'primereact/listbox';
+import { Listbox } from 'primereact/listbox';
 import { stringProperty, booleanProperty, optionsProperty } from '../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] = useState(stringProperty(element, 'value'));
-    return /*#__PURE__*/ jsx(ListBox, {
+    return /*#__PURE__*/ jsx(Listbox.Root, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(event.value),
+        onValueChange: (event)=>setValue(event.value),
         options: optionsProperty(element, 'options'),
         optionLabel: "label",
         optionValue: "value",
         multiple: booleanProperty(element, 'multiple', false),
-        filter: booleanProperty(element, 'filter', false),
-        disabled: booleanProperty(element, 'disabled', false)
+        disabled: booleanProperty(element, 'disabled', false),
+        children: /*#__PURE__*/ jsx(Listbox.List, {})
     });
 }
 

package/dist/esm/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,QAAAA,CAAkBC,eAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AACpE,IAAA,qBACIK,GAAA,CAACC,OAAAA,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,gBAAgBZ,OAAAA,EAAS,SAAA,CAAA;QAClCa,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZC,QAAAA,EAAUC,eAAAA,CAAgBhB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CiB,MAAAA,EAAQD,eAAAA,CAAgBhB,SAAS,QAAA,EAAU,KAAA,CAAA;QAC3CkB,QAAAA,EAAUF,eAAAA,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,QAAAA,CAAkBC,eAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IACpE,qBACIK,GAAA,CAACC,QAAQC,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,gBAAgBb,OAAAA,EAAS,SAAA,CAAA;QAClCc,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZC,QAAAA,EAAUC,eAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CkB,QAAAA,EAAUD,eAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;gCAC/CK,GAAA,CAACC,QAAQa,IAAI,EAAA,EAAA;;AAGzB;;;;"}

package/dist/esm/form/PrimeMultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeMultiSelect.d.ts","sourceRoot":"","sources":["../../../form/PrimeMultiSelect.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAM/D,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAgBrE"}
+{"version":3,"file":"PrimeMultiSelect.d.ts","sourceRoot":"","sources":["../../../form/PrimeMultiSelect.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAkB/D,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BA6BrE"}