@cratis/scene.primereact 1.1.0 → 3.0.0

package/dist/cjs/form/PrimeCalendar.js

@@ -2,17 +2,23 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var calendar = require('primereact/calendar');
+var datepicker = require('primereact/datepicker');
+var inputtext = require('primereact/inputtext');
 var properties = require('../properties.js');
 
 /**
- * The `PrimeReact:calendar` component - a date picker.
+ * The `PrimeReact:calendar` component - a date picker, named `DatePicker` by PrimeReact 11.
  *
  * The seed value is parsed from an ISO date string because that is what survives a round trip through a
  * Scene model's JSON properties; an unparseable one leaves the field empty rather than showing
  * "Invalid Date".
  *
- * In PrimeReact 11 this component is renamed `DatePicker`.
+ * v11's `DatePicker` is a composition, and the grid is the bulk of it: `Calendar` holds a `Header` (the
+ * month/year title flanked by the two navigation buttons) and a `Table` whose three `TableBody` views are
+ * what makes clicking the title drill from days to months to years. That whole calendar is built once
+ * here and then placed one of two ways, which is how `inline` survives a version that has no `inline`
+ * prop: either inside a `Panel`, which simply renders where it stands, or behind a `Portal` and a
+ * `Positioner`, which anchors it to the field and escapes any clipping ancestor.
  */ function PrimeCalendar({ element }) {
     const [value, setValue] = react.useState(()=>{
         const seed = properties.stringProperty(element, 'value');
@@ -20,16 +26,80 @@ var properties = require('../properties.js');
         const parsed = new Date(seed);
         return Number.isNaN(parsed.getTime()) ? undefined : parsed;
     });
-    return /*#__PURE__*/ jsxRuntime.jsx(calendar.Calendar, {
+    const inline = properties.booleanProperty(element, 'inline', false);
+    const showTime = properties.booleanProperty(element, 'showTime', false);
+    const calendar = /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(datepicker.DatePicker.Calendar, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(datepicker.DatePicker.Header, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Prev, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                    className: "pi pi-chevron-left"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(datepicker.DatePicker.Title, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.SelectMonth, {}),
+                                    /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.SelectYear, {}),
+                                    /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Decade, {})
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Next, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                    className: "pi pi-chevron-right"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(datepicker.DatePicker.Table, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.TableHead, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.TableBody, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.TableBody, {
+                                view: "month"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.TableBody, {
+                                view: "year"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            showTime && /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Time, {})
+        ]
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Root, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(event.value instanceof Date ? event.value : undefined),
+        onValueChange: (event)=>setValue(event.value instanceof Date ? event.value : undefined),
         dateFormat: properties.stringProperty(element, 'dateFormat'),
-        showIcon: properties.booleanProperty(element, 'showIcon', true),
-        showTime: properties.booleanProperty(element, 'showTime', false),
-        inline: properties.booleanProperty(element, 'inline', false),
-        placeholder: properties.stringProperty(element, 'placeholder'),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        showTime: showTime,
+        disabled: properties.booleanProperty(element, 'disabled', false),
+        children: inline ? /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Panel, {
+            children: calendar
+        }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Input, {
+                    as: inputtext.InputText,
+                    placeholder: properties.stringProperty(element, 'placeholder')
+                }),
+                properties.booleanProperty(element, 'showIcon', true) && /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Trigger, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                        className: "pi pi-calendar"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Portal, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Positioner, {
+                        align: "start",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(datepicker.DatePicker.Popup, {
+                            children: calendar
+                        })
+                    })
+                })
+            ]
+        })
     });
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"PrimeCalendar.js","sources":["../../../form/PrimeCalendar.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 { Calendar } from 'primereact/calendar';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:calendar` component - a date picker.\n *\n * The seed value is parsed from an ISO date string because that is what survives a round trip through a\n * Scene model's JSON properties; an unparseable one leaves the field empty rather than showing\n * \"Invalid Date\".\n *\n * In PrimeReact 11 this component is renamed `DatePicker`.\n */\nexport function PrimeCalendar({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<Date | undefined>(() => {\n        const seed = stringProperty(element, 'value');\n        if (seed === undefined) return undefined;\n        const parsed = new Date(seed);\n        return Number.isNaN(parsed.getTime()) ? undefined : parsed;\n    });\n\n    return (\n        <Calendar\n            data-scene-id={element.id}\n            value={value}\n            onChange={(event) => setValue(event.value instanceof Date ? event.value : undefined)}\n            dateFormat={stringProperty(element, 'dateFormat')}\n            showIcon={booleanProperty(element, 'showIcon', true)}\n            showTime={booleanProperty(element, 'showTime', false)}\n            inline={booleanProperty(element, 'inline', false)}\n            placeholder={stringProperty(element, 'placeholder')}\n            disabled={booleanProperty(element, 'disabled', false)}\n        />\n    );\n}\n"],"names":["PrimeCalendar","element","value","setValue","useState","seed","stringProperty","undefined","parsed","Date","Number","isNaN","getTime","_jsx","Calendar","data-scene-id","id","onChange","event","dateFormat","showIcon","booleanProperty","showTime","inline","placeholder","disabled"],"mappings":";;;;;;;AAQA;;;;;;;;AAQC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;AAC/D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA2B,IAAA;QACjD,MAAMC,IAAAA,GAAOC,0BAAeL,OAAAA,EAAS,OAAA,CAAA;QACrC,IAAII,IAAAA,KAASE,WAAW,OAAOA,SAAAA;QAC/B,MAAMC,MAAAA,GAAS,IAAIC,IAAAA,CAAKJ,IAAAA,CAAAA;AACxB,QAAA,OAAOK,OAAOC,KAAK,CAACH,MAAAA,CAAOI,OAAO,MAAML,SAAAA,GAAYC,MAAAA;AACxD,IAAA,CAAA,CAAA;AAEA,IAAA,qBACIK,cAAA,CAACC,iBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAed,QAAQe,EAAE;QACzBd,KAAAA,EAAOA,KAAAA;QACPe,QAAAA,EAAU,CAACC,QAAUf,QAAAA,CAASe,KAAAA,CAAMhB,KAAK,YAAYO,IAAAA,GAAOS,KAAAA,CAAMhB,KAAK,GAAGK,SAAAA,CAAAA;AAC1EY,QAAAA,UAAAA,EAAYb,0BAAeL,OAAAA,EAAS,YAAA,CAAA;QACpCmB,QAAAA,EAAUC,0BAAAA,CAAgBpB,SAAS,UAAA,EAAY,IAAA,CAAA;QAC/CqB,QAAAA,EAAUD,0BAAAA,CAAgBpB,SAAS,UAAA,EAAY,KAAA,CAAA;QAC/CsB,MAAAA,EAAQF,0BAAAA,CAAgBpB,SAAS,QAAA,EAAU,KAAA,CAAA;AAC3CuB,QAAAA,WAAAA,EAAalB,0BAAeL,OAAAA,EAAS,aAAA,CAAA;QACrCwB,QAAAA,EAAUJ,0BAAAA,CAAgBpB,SAAS,UAAA,EAAY,KAAA;;AAG3D;;;;"}
+{"version":3,"file":"PrimeCalendar.js","sources":["../../../form/PrimeCalendar.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 { DatePicker } from 'primereact/datepicker';\nimport { InputText } from 'primereact/inputtext';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:calendar` component - a date picker, named `DatePicker` by PrimeReact 11.\n *\n * The seed value is parsed from an ISO date string because that is what survives a round trip through a\n * Scene model's JSON properties; an unparseable one leaves the field empty rather than showing\n * \"Invalid Date\".\n *\n * v11's `DatePicker` is a composition, and the grid is the bulk of it: `Calendar` holds a `Header` (the\n * month/year title flanked by the two navigation buttons) and a `Table` whose three `TableBody` views are\n * what makes clicking the title drill from days to months to years. That whole calendar is built once\n * here and then placed one of two ways, which is how `inline` survives a version that has no `inline`\n * prop: either inside a `Panel`, which simply renders where it stands, or behind a `Portal` and a\n * `Positioner`, which anchors it to the field and escapes any clipping ancestor.\n */\nexport function PrimeCalendar({ element }: RegisteredComponentProps) {\n    const [value, setValue] = useState<Date | undefined>(() => {\n        const seed = stringProperty(element, 'value');\n        if (seed === undefined) return undefined;\n        const parsed = new Date(seed);\n        return Number.isNaN(parsed.getTime()) ? undefined : parsed;\n    });\n\n    const inline = booleanProperty(element, 'inline', false);\n    const showTime = booleanProperty(element, 'showTime', false);\n    const calendar = (\n        <>\n            <DatePicker.Calendar>\n                <DatePicker.Header>\n                    <DatePicker.Prev>\n                        <i className='pi pi-chevron-left' />\n                    </DatePicker.Prev>\n                    <DatePicker.Title>\n                        <DatePicker.SelectMonth />\n                        <DatePicker.SelectYear />\n                        <DatePicker.Decade />\n                    </DatePicker.Title>\n                    <DatePicker.Next>\n                        <i className='pi pi-chevron-right' />\n                    </DatePicker.Next>\n                </DatePicker.Header>\n                <DatePicker.Table>\n                    <DatePicker.TableHead />\n                    <DatePicker.TableBody />\n                    <DatePicker.TableBody view='month' />\n                    <DatePicker.TableBody view='year' />\n                </DatePicker.Table>\n            </DatePicker.Calendar>\n            {showTime && <DatePicker.Time />}\n        </>\n    );\n\n    return (\n        <DatePicker.Root\n            data-scene-id={element.id}\n            value={value}\n            onValueChange={(event) => setValue(event.value instanceof Date ? event.value : undefined)}\n            dateFormat={stringProperty(element, 'dateFormat')}\n            showTime={showTime}\n            disabled={booleanProperty(element, 'disabled', false)}>\n            {inline ? (\n                <DatePicker.Panel>{calendar}</DatePicker.Panel>\n            ) : (\n                <>\n                    <DatePicker.Input as={InputText} placeholder={stringProperty(element, 'placeholder')} />\n                    {booleanProperty(element, 'showIcon', true) && (\n                        <DatePicker.Trigger>\n                            <i className='pi pi-calendar' />\n                        </DatePicker.Trigger>\n                    )}\n                    <DatePicker.Portal>\n                        <DatePicker.Positioner align='start'>\n                            <DatePicker.Popup>{calendar}</DatePicker.Popup>\n                        </DatePicker.Positioner>\n                    </DatePicker.Portal>\n                </>\n            )}\n        </DatePicker.Root>\n    );\n}\n"],"names":["PrimeCalendar","element","value","setValue","useState","seed","stringProperty","undefined","parsed","Date","Number","isNaN","getTime","inline","booleanProperty","showTime","calendar","_jsxs","_Fragment","DatePicker","Calendar","Header","_jsx","Prev","i","className","Title","SelectMonth","SelectYear","Decade","Next","Table","TableHead","TableBody","view","Time","Root","data-scene-id","id","onValueChange","event","dateFormat","disabled","Panel","Input","as","InputText","placeholder","Trigger","Portal","Positioner","align","Popup"],"mappings":";;;;;;;;AASA;;;;;;;;;;;;;AAaC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;AAC/D,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA2B,IAAA;QACjD,MAAMC,IAAAA,GAAOC,0BAAeL,OAAAA,EAAS,OAAA,CAAA;QACrC,IAAII,IAAAA,KAASE,WAAW,OAAOA,SAAAA;QAC/B,MAAMC,MAAAA,GAAS,IAAIC,IAAAA,CAAKJ,IAAAA,CAAAA;AACxB,QAAA,OAAOK,OAAOC,KAAK,CAACH,MAAAA,CAAOI,OAAO,MAAML,SAAAA,GAAYC,MAAAA;AACxD,IAAA,CAAA,CAAA;IAEA,MAAMK,MAAAA,GAASC,0BAAAA,CAAgBb,OAAAA,EAAS,QAAA,EAAU,KAAA,CAAA;IAClD,MAAMc,QAAAA,GAAWD,0BAAAA,CAAgBb,OAAAA,EAAS,UAAA,EAAY,KAAA,CAAA;AACtD,IAAA,MAAMe,QAAAA,iBACFC,eAAA,CAAAC,mBAAA,EAAA;;AACI,0BAAAD,eAAA,CAACE,sBAAWC,QAAQ,EAAA;;AAChB,kCAAAH,eAAA,CAACE,sBAAWE,MAAM,EAAA;;AACd,0CAAAC,cAAA,CAACH,sBAAWI,IAAI,EAAA;AACZ,gCAAA,QAAA,gBAAAD,cAAA,CAACE,GAAAA,EAAAA;oCAAEC,SAAAA,EAAU;;;AAEjB,0CAAAR,eAAA,CAACE,sBAAWO,KAAK,EAAA;;AACb,kDAAAJ,cAAA,CAACH,sBAAWQ,WAAW,EAAA,EAAA,CAAA;AACvB,kDAAAL,cAAA,CAACH,sBAAWS,UAAU,EAAA,EAAA,CAAA;AACtB,kDAAAN,cAAA,CAACH,sBAAWU,MAAM,EAAA,EAAA;;;AAEtB,0CAAAP,cAAA,CAACH,sBAAWW,IAAI,EAAA;AACZ,gCAAA,QAAA,gBAAAR,cAAA,CAACE,GAAAA,EAAAA;oCAAEC,SAAAA,EAAU;;;;;AAGrB,kCAAAR,eAAA,CAACE,sBAAWY,KAAK,EAAA;;AACb,0CAAAT,cAAA,CAACH,sBAAWa,SAAS,EAAA,EAAA,CAAA;AACrB,0CAAAV,cAAA,CAACH,sBAAWc,SAAS,EAAA,EAAA,CAAA;AACrB,0CAAAX,cAAA,CAACH,sBAAWc,SAAS,EAAA;gCAACC,IAAAA,EAAK;;AAC3B,0CAAAZ,cAAA,CAACH,sBAAWc,SAAS,EAAA;gCAACC,IAAAA,EAAK;;;;;;YAGlCnB,QAAAA,kBAAYO,cAAA,CAACH,sBAAWgB,IAAI,EAAA,EAAA;;;IAIrC,qBACIb,cAAA,CAACH,sBAAWiB,IAAI,EAAA;AACZC,QAAAA,eAAAA,EAAepC,QAAQqC,EAAE;QACzBpC,KAAAA,EAAOA,KAAAA;QACPqC,aAAAA,EAAe,CAACC,QAAUrC,QAAAA,CAASqC,KAAAA,CAAMtC,KAAK,YAAYO,IAAAA,GAAO+B,KAAAA,CAAMtC,KAAK,GAAGK,SAAAA,CAAAA;AAC/EkC,QAAAA,UAAAA,EAAYnC,0BAAeL,OAAAA,EAAS,YAAA,CAAA;QACpCc,QAAAA,EAAUA,QAAAA;QACV2B,QAAAA,EAAU5B,0BAAAA,CAAgBb,SAAS,UAAA,EAAY,KAAA,CAAA;kBAC9CY,MAAAA,iBACGS,cAAA,CAACH,sBAAWwB,KAAK,EAAA;AAAE3B,YAAAA,QAAAA,EAAAA;AAEnB,SAAA,CAAA,iBAAAC,eAAA,CAAAC,mBAAA,EAAA;;AACI,8BAAAI,cAAA,CAACH,sBAAWyB,KAAK,EAAA;oBAACC,EAAAA,EAAIC,mBAAAA;AAAWC,oBAAAA,WAAAA,EAAazC,0BAAeL,OAAAA,EAAS,aAAA;;AACrEa,gBAAAA,0BAAAA,CAAgBb,OAAAA,EAAS,UAAA,EAAY,IAAA,CAAA,kBAClCqB,cAAA,CAACH,sBAAW6B,OAAO,EAAA;AACf,oBAAA,QAAA,gBAAA1B,cAAA,CAACE,GAAAA,EAAAA;wBAAEC,SAAAA,EAAU;;;AAGrB,8BAAAH,cAAA,CAACH,sBAAW8B,MAAM,EAAA;4CACd3B,cAAA,CAACH,sBAAW+B,UAAU,EAAA;wBAACC,KAAAA,EAAM,OAAA;gDACzB7B,cAAA,CAACH,sBAAWiC,KAAK,EAAA;AAAEpC,4BAAAA,QAAAA,EAAAA;;;;;;;AAO/C;;;;"}

package/dist/cjs/form/PrimeCheckbox.js

@@ -10,6 +10,11 @@ var properties = require('../properties.js');
  *
  * Rendered with its label rather than bare: an unlabeled checkbox has no accessible name and nothing to
  * click but a 20-pixel box, which is a defect in every screen that would ever use one.
+ *
+ * PrimeReact 11 makes the tick its own part: `Root` renders the real (visually hidden) input and owns the
+ * state, `Box` is the square, and `Indicator` is what appears inside it when checked. The `checked` state
+ * now arrives as `onCheckedChange` with a boolean rather than a change event whose `checked` might be
+ * `undefined`, so the defensive `=== true` the v10 adapter needed is gone.
  */ function PrimeCheckbox({ element }) {
     const [checked, setChecked] = react.useState(properties.booleanProperty(element, 'checked', false));
     const label = properties.stringProperty(element, 'label');
@@ -17,11 +22,14 @@ var properties = require('../properties.js');
         "data-scene-id": element.id,
         className: "flex items-center gap-2",
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(checkbox.Checkbox, {
+            /*#__PURE__*/ jsxRuntime.jsx(checkbox.Checkbox.Root, {
                 inputId: element.id,
                 checked: checked,
-                onChange: (event)=>setChecked(event.checked === true),
-                disabled: properties.booleanProperty(element, 'disabled', false)
+                onCheckedChange: (event)=>setChecked(event.checked),
+                disabled: properties.booleanProperty(element, 'disabled', false),
+                children: /*#__PURE__*/ jsxRuntime.jsx(checkbox.Checkbox.Box, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(checkbox.Checkbox.Indicator, {})
+                })
             }),
             label !== undefined && /*#__PURE__*/ jsxRuntime.jsx("label", {
                 htmlFor: element.id,

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

@@ -1 +1 @@
-{"version":3,"file":"PrimeCheckbox.js","sources":["../../../form/PrimeCheckbox.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 { Checkbox } from 'primereact/checkbox';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:checkbox` component.\n *\n * Rendered with its label rather than bare: an unlabeled checkbox has no accessible name and nothing to\n * click but a 20-pixel box, which is a defect in every screen that would ever use one.\n */\nexport function PrimeCheckbox({ 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            <Checkbox\n                inputId={element.id}\n                checked={checked}\n                onChange={(event) => setChecked(event.checked === true)}\n                disabled={booleanProperty(element, 'disabled', false)}\n            />\n            {label !== undefined && <label htmlFor={element.id}>{label}</label>}\n        </div>\n    );\n}\n"],"names":["PrimeCheckbox","element","checked","setChecked","useState","booleanProperty","label","stringProperty","_jsxs","div","data-scene-id","id","className","_jsx","Checkbox","inputId","onChange","event","disabled","undefined","htmlFor"],"mappings":";;;;;;;AAQA;;;;;AAKC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;AAC/D,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,iBAAAA,EAAAA;AACGC,gBAAAA,OAAAA,EAASd,QAAQU,EAAE;gBACnBT,OAAAA,EAASA,OAAAA;AACTc,gBAAAA,QAAAA,EAAU,CAACC,KAAAA,GAAUd,UAAAA,CAAWc,KAAAA,CAAMf,OAAO,KAAK,IAAA,CAAA;gBAClDgB,QAAAA,EAAUb,0BAAAA,CAAgBJ,SAAS,UAAA,EAAY,KAAA;;AAElDK,YAAAA,KAAAA,KAAUa,2BAAaN,cAAA,CAACP,OAAAA,EAAAA;AAAMc,gBAAAA,OAAAA,EAASnB,QAAQU,EAAE;AAAGL,gBAAAA,QAAAA,EAAAA;;;;AAGjE;;;;"}
+{"version":3,"file":"PrimeCheckbox.js","sources":["../../../form/PrimeCheckbox.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 { Checkbox } from 'primereact/checkbox';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:checkbox` component.\n *\n * Rendered with its label rather than bare: an unlabeled checkbox has no accessible name and nothing to\n * click but a 20-pixel box, which is a defect in every screen that would ever use one.\n *\n * PrimeReact 11 makes the tick its own part: `Root` renders the real (visually hidden) input and owns the\n * state, `Box` is the square, and `Indicator` is what appears inside it when checked. The `checked` state\n * now arrives as `onCheckedChange` with a boolean rather than a change event whose `checked` might be\n * `undefined`, so the defensive `=== true` the v10 adapter needed is gone.\n */\nexport function PrimeCheckbox({ 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            <Checkbox.Root\n                inputId={element.id}\n                checked={checked}\n                onCheckedChange={(event) => setChecked(event.checked)}\n                disabled={booleanProperty(element, 'disabled', false)}>\n                <Checkbox.Box>\n                    <Checkbox.Indicator />\n                </Checkbox.Box>\n            </Checkbox.Root>\n            {label !== undefined && <label htmlFor={element.id}>{label}</label>}\n        </div>\n    );\n}\n"],"names":["PrimeCheckbox","element","checked","setChecked","useState","booleanProperty","label","stringProperty","_jsxs","div","data-scene-id","id","className","_jsx","Checkbox","Root","inputId","onCheckedChange","event","disabled","Box","Indicator","undefined","htmlFor"],"mappings":";;;;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;AAC/D,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,kBAASC,IAAI,EAAA;AACVC,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,kBAASM,GAAG,EAAA;4CACTP,cAAA,CAACC,kBAASO,SAAS,EAAA,EAAA;;;AAG1Bf,YAAAA,KAAAA,KAAUgB,2BAAaT,cAAA,CAACP,OAAAA,EAAAA;AAAMiB,gBAAAA,OAAAA,EAAStB,QAAQU,EAAE;AAAGL,gBAAAA,QAAAA,EAAAA;;;;AAGjE;;;;"}

package/dist/cjs/form/PrimeChips.js

@@ -2,22 +2,56 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var chips = require('primereact/chips');
+var inputtags = require('primereact/inputtags');
 var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:chips` component - free-form entry of a list of short values, each shown as a chip.
+ * PrimeReact 11 calls it `InputTags`.
  *
- * In PrimeReact 11 this component is renamed `InputTags`.
+ * The chips and the text field are both render-prop slots in v11 rather than markup the component
+ * chooses, which is why this file draws a chip and its remove button by hand: `Items` hands over one tag
+ * at a time along with the props that make it removable, and `Control` hands over the props for the
+ * input. It is more code than the v10 one-liner and it is the reason the chip is stylable at all.
+ *
+ * A tag is committed per Enter, and pasted text arrives as one tag rather than being split. That is v11's
+ * default and the adapter keeps it: v10's `separator` property is not read, because splitting on a
+ * character is a data-entry policy that belongs to the screen collecting the data, not to a preview of it.
  */ function PrimeChips({ element }) {
     const [value, setValue] = react.useState(properties.stringArrayProperty(element, 'value'));
-    return /*#__PURE__*/ jsxRuntime.jsx(chips.Chips, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(inputtags.InputTags.Root, {
         "data-scene-id": element.id,
         value: value,
-        onChange: (event)=>setValue(event.value ?? []),
-        max: undefined,
-        placeholder: properties.stringProperty(element, 'placeholder'),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        onValueChange: (event)=>setValue(event.value ?? []),
+        max: properties.numberProperty(element, 'max'),
+        disabled: properties.booleanProperty(element, 'disabled', false),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(inputtags.InputTags.Items, {
+                children: ({ item, index, remove, itemProps })=>/*#__PURE__*/ react.createElement("span", {
+                        ...itemProps,
+                        key: `${item}-${index}`,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                children: item
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                type: "button",
+                                "aria-label": `Remove ${item}`,
+                                onClick: remove,
+                                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                    className: "pi pi-times-circle"
+                                })
+                            })
+                        ]
+                    })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(inputtags.InputTags.Control, {
+                children: ({ controlProps })=>/*#__PURE__*/ jsxRuntime.jsx("input", {
+                        ...controlProps,
+                        placeholder: properties.stringProperty(element, 'placeholder')
+                    })
+            })
+        ]
     });
 }
 

package/dist/cjs/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,cAAAA,CAAmBC,+BAAoBJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AAC1E,IAAA,qBACIK,cAAA,CAACC,WAAAA,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,0BAAed,OAAAA,EAAS,aAAA,CAAA;QACrCe,QAAAA,EAAUC,0BAAAA,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,cAAAA,CAAmBC,+BAAoBJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IAC1E,qBACIK,eAAA,CAACC,oBAAUC,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,0BAAeb,OAAAA,EAAS,KAAA,CAAA;QAC7Bc,QAAAA,EAAUC,0BAAAA,CAAgBf,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,0BAAAgB,cAAA,CAACV,oBAAUW,KAAK,EAAA;0BACX,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,EAAE,iBAChCC,mBAAA,CAACC,MAAAA,EAAAA;AAAM,wBAAA,GAAGF,SAAS;AAAEG,wBAAAA,GAAAA,EAAK,CAAA,EAAGN,IAAAA,CAAK,CAAC,EAAEC,KAAAA,CAAAA,CAAO;;0CACxCH,cAAA,CAACO,MAAAA,EAAAA;AAAML,gCAAAA,QAAAA,EAAAA;;0CACPF,cAAA,CAACS,QAAAA,EAAAA;gCAAOC,IAAAA,EAAK,QAAA;gCAASC,YAAAA,EAAY,CAAC,OAAO,EAAET,IAAAA,CAAAA,CAAM;gCAAEU,OAAAA,EAASR,MAAAA;AACzD,gCAAA,QAAA,gBAAAJ,cAAA,CAACa,GAAAA,EAAAA;oCAAEC,SAAAA,EAAU;;;;;;AAK7B,0BAAAd,cAAA,CAACV,oBAAUyB,OAAO,EAAA;AACb,gBAAA,QAAA,EAAA,CAAC,EAAEC,YAAY,EAAE,iBAAKhB,cAAA,CAACiB,OAAAA,EAAAA;AAAO,wBAAA,GAAGD,YAAY;AAAEE,wBAAAA,WAAAA,EAAaC,0BAAenC,OAAAA,EAAS,aAAA;;;;;AAIrG;;;;"}

package/dist/cjs/form/PrimeColorPicker.js

@@ -2,22 +2,69 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var colorpicker = require('primereact/colorpicker');
+var inputcolor = require('primereact/inputcolor');
 var properties = require('../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 inputcolor.parseColor(`#${hex}`);
+    } catch  {
+        return inputcolor.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] = react.useState(properties.stringProperty(element, 'value', '6366f1').replace('#', ''));
-    return /*#__PURE__*/ jsxRuntime.jsx(colorpicker.ColorPicker, {
+    const [value, setValue] = react.useState(properties.stringProperty(element, 'value', fallbackColor).replace('#', ''));
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
         "data-scene-id": element.id,
-        value: value,
-        onChange: (event)=>setValue(typeof event.value === 'string' ? event.value : value),
-        inline: properties.booleanProperty(element, 'inline', false),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        children: /*#__PURE__*/ jsxRuntime.jsxs(inputcolor.InputColor.Root, {
+            value: toColor(value),
+            onValueChange: (event)=>setValue(event.value.toString('hex').replace('#', '')),
+            disabled: properties.booleanProperty(element, 'disabled', false),
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(inputcolor.InputColor.Area, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(inputcolor.InputColor.AreaBackground, {}),
+                        /*#__PURE__*/ jsxRuntime.jsx(inputcolor.InputColor.AreaHandle, {})
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(inputcolor.InputColor.Slider, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(inputcolor.InputColor.SliderTrack, {}),
+                        /*#__PURE__*/ jsxRuntime.jsx(inputcolor.InputColor.SliderHandle, {})
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(inputcolor.InputColor.Swatch, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(inputcolor.InputColor.SwatchBackground, {})
+                })
+            ]
+        })
     });
 }
 

package/dist/cjs/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,cAAAA,CAASC,yBAAAA,CAAeJ,OAAAA,EAAS,OAAA,EAAS,QAAA,CAAA,CAAUK,OAAO,CAAC,GAAA,EAAK,EAAA,CAAA,CAAA;AAC3F,IAAA,qBACIC,cAAA,CAACC,uBAAAA,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,0BAAAA,CAAgBb,SAAS,QAAA,EAAU,KAAA,CAAA;QAC3Cc,QAAAA,EAAUD,0BAAAA,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,qBAAAA,CAAW,CAAC,CAAC,EAAED,GAAAA,CAAAA,CAAK,CAAA;AAC/B,IAAA,CAAA,CAAE,OAAM;AACJ,QAAA,OAAOC,qBAAAA,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,cAAAA,CAASC,yBAAAA,CAAeJ,OAAAA,EAAS,OAAA,EAASL,aAAAA,CAAAA,CAAeU,OAAO,CAAC,GAAA,EAAK,EAAA,CAAA,CAAA;AAChG,IAAA,qBACIC,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;gCAC1BC,eAAA,CAACC,sBAAWC,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,0BAAAA,CAAgBjB,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,8BAAAU,eAAA,CAACC,sBAAWO,IAAI,EAAA;;AACZ,sCAAAZ,cAAA,CAACK,sBAAWQ,cAAc,EAAA,EAAA,CAAA;AAC1B,sCAAAb,cAAA,CAACK,sBAAWS,UAAU,EAAA,EAAA;;;AAE1B,8BAAAV,eAAA,CAACC,sBAAWU,MAAM,EAAA;;AACd,sCAAAf,cAAA,CAACK,sBAAWW,WAAW,EAAA,EAAA,CAAA;AACvB,sCAAAhB,cAAA,CAACK,sBAAWY,YAAY,EAAA,EAAA;;;AAE5B,8BAAAjB,cAAA,CAACK,sBAAWa,MAAM,EAAA;4CACdlB,cAAA,CAACK,sBAAWc,gBAAgB,EAAA,EAAA;;;;;AAKhD;;;;"}

package/dist/cjs/form/PrimeDropdown.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var dropdown = require('primereact/dropdown');
+var select = require('primereact/select');
 var properties = require('../properties.js');
 
 /**
@@ -11,21 +11,49 @@ var properties = require('../properties.js');
  * 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] = react.useState(properties.stringProperty(element, 'value'));
-    return /*#__PURE__*/ jsxRuntime.jsx(dropdown.Dropdown, {
+    const placeholder = properties.stringProperty(element, 'placeholder', 'Select');
+    const filter = properties.booleanProperty(element, 'filter', false);
+    const showClear = properties.booleanProperty(element, 'showClear', false);
+    return /*#__PURE__*/ jsxRuntime.jsxs(select.Select.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",
-        placeholder: properties.stringProperty(element, 'placeholder', 'Select'),
-        filter: properties.booleanProperty(element, 'filter', false),
-        showClear: properties.booleanProperty(element, 'showClear', 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
+                    }),
+                    showClear && /*#__PURE__*/ jsxRuntime.jsx(select.Select.Clear, {}),
+                    /*#__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/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,cAAAA,CAA6BC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;AAC/E,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,CAAMT,KAAK,CAAA;AACzCU,QAAAA,OAAAA,EAASC,2BAAgBZ,OAAAA,EAAS,SAAA,CAAA;QAClCa,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAaX,yBAAAA,CAAeJ,SAAS,aAAA,EAAe,QAAA,CAAA;QACpDgB,MAAAA,EAAQC,0BAAAA,CAAgBjB,SAAS,QAAA,EAAU,KAAA,CAAA;QAC3CkB,SAAAA,EAAWD,0BAAAA,CAAgBjB,SAAS,WAAA,EAAa,KAAA,CAAA;QACjDmB,QAAAA,EAAUF,0BAAAA,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,cAAAA,CAAkBC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IACpE,MAAMK,WAAAA,GAAcD,yBAAAA,CAAeJ,OAAAA,EAAS,aAAA,EAAe,QAAA,CAAA;IAC3D,MAAMM,MAAAA,GAASC,0BAAAA,CAAgBP,OAAAA,EAAS,QAAA,EAAU,KAAA,CAAA;IAClD,MAAMQ,SAAAA,GAAYD,0BAAAA,CAAgBP,OAAAA,EAAS,WAAA,EAAa,KAAA,CAAA;IACxD,qBACIS,eAAA,CAACC,cAAOC,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,2BAAgBjB,OAAAA,EAAS,SAAA,CAAA;QAClCkB,WAAAA,EAAY,OAAA;QACZC,WAAAA,EAAY,OAAA;QACZb,MAAAA,EAAQA,MAAAA;QACRc,QAAAA,EAAUb,0BAAAA,CAAgBP,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,0BAAAS,eAAA,CAACC,cAAOW,OAAO,EAAA;;AACX,kCAAAC,cAAA,CAACZ,cAAOa,KAAK,EAAA;wBAAClB,WAAAA,EAAaA;;oBAC1BG,SAAAA,kBAAac,cAAA,CAACZ,cAAOc,KAAK,EAAA,EAAA,CAAA;AAC3B,kCAAAF,cAAA,CAACZ,cAAOe,KAAK,EAAA,EAAA;;;AAEjB,0BAAAH,cAAA,CAACZ,cAAOgB,MAAM,EAAA;wCACVJ,cAAA,CAACZ,cAAOiB,UAAU,EAAA;4CACdlB,eAAA,CAACC,cAAOkB,KAAK,EAAA;;4BACRtB,MAAAA,kBAAUgB,cAAA,CAACZ,cAAOmB,MAAM,EAAA;gCAACxB,WAAAA,EAAaA;;AACvC,0CAAAiB,cAAA,CAACZ,cAAOoB,IAAI,EAAA,EAAA;;;;;;;AAMpC;;;;"}

package/dist/cjs/form/PrimeIconField.js

@@ -2,7 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var iconfield = require('primereact/iconfield');
-var inputicon = require('primereact/inputicon');
 var inputtext = require('primereact/inputtext');
 var properties = require('../properties.js');
 
@@ -11,17 +10,24 @@ var properties = require('../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__*/ jsxRuntime.jsxs(iconfield.IconField, {
+    const icon = /*#__PURE__*/ jsxRuntime.jsx(iconfield.IconField.Inset, {
+        className: properties.stringProperty(element, 'icon', 'pi pi-search')
+    });
+    const field = slots.content?.length ? slots.content : /*#__PURE__*/ jsxRuntime.jsx(inputtext.InputText, {
+        placeholder: properties.stringProperty(element, 'placeholder')
+    });
+    const iconLast = properties.stringProperty(element, 'iconPosition', 'left') === 'right';
+    return /*#__PURE__*/ jsxRuntime.jsxs(iconfield.IconField.Root, {
         "data-scene-id": element.id,
-        iconPosition: properties.stringProperty(element, 'iconPosition', 'left'),
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(inputicon.InputIcon, {
-                className: properties.stringProperty(element, 'icon', 'pi pi-search')
-            }),
-            slots.content?.length ? slots.content : /*#__PURE__*/ jsxRuntime.jsx(inputtext.InputText, {
-                placeholder: properties.stringProperty(element, 'placeholder')
-            })
+            iconLast ? field : icon,
+            iconLast ? icon : field
         ]
     });
 }

package/dist/cjs/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,eAAA,CAACC,mBAAAA,EAAAA;AAAUC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;QAAEC,YAAAA,EAAcC,yBAAAA,CAAeP,SAAS,cAAA,EAAgB,MAAA,CAAA;;0BACxFQ,cAAA,CAACC,mBAAAA,EAAAA;gBAAUC,SAAAA,EAAWH,yBAAAA,CAAeP,SAAS,MAAA,EAAQ,cAAA;;AACrDC,YAAAA,KAAAA,CAAMU,OAAO,EAAEC,MAAAA,GAASX,KAAAA,CAAMU,OAAO,iBAAGH,cAAA,CAACK,mBAAAA,EAAAA;AAAUC,gBAAAA,WAAAA,EAAaP,0BAAeP,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,cAAA,CAACC,mBAAAA,CAAUC,KAAK,EAAA;QAACC,SAAAA,EAAWC,yBAAAA,CAAeP,SAAS,MAAA,EAAQ,cAAA;;IACzE,MAAMQ,KAAAA,GAAQP,MAAMQ,OAAO,EAAEC,SAAST,KAAAA,CAAMQ,OAAO,iBAAGN,cAAA,CAACQ,mBAAAA,EAAAA;AAAUC,QAAAA,WAAAA,EAAaL,0BAAeP,OAAAA,EAAS,aAAA;;AACtG,IAAA,MAAMa,QAAAA,GAAWN,yBAAAA,CAAeP,OAAAA,EAAS,cAAA,EAAgB,MAAA,CAAA,KAAY,OAAA;IACrE,qBACIc,eAAA,CAACV,oBAAUW,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/cjs/form/PrimeInputNumber.js

@@ -10,10 +10,15 @@ var properties = require('../properties.js');
  *
  * `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] = react.useState(properties.numberProperty(element, 'value'));
     const currency = properties.stringProperty(element, 'currency');
-    return /*#__PURE__*/ jsxRuntime.jsx(inputnumber.InputNumber, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(inputnumber.InputNumber.Root, {
         "data-scene-id": element.id,
         value: value,
         onValueChange: (event)=>setValue(typeof event.value === 'number' ? event.value : undefined),
@@ -21,9 +26,26 @@ var properties = require('../properties.js');
         currency: currency,
         min: properties.numberProperty(element, 'min'),
         max: properties.numberProperty(element, 'max'),
-        showButtons: properties.booleanProperty(element, 'showButtons', false),
-        placeholder: properties.stringProperty(element, 'placeholder'),
-        disabled: properties.booleanProperty(element, 'disabled', false)
+        disabled: properties.booleanProperty(element, 'disabled', false),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(inputnumber.InputNumber.Input, {
+                placeholder: properties.stringProperty(element, 'placeholder')
+            }),
+            properties.booleanProperty(element, 'showButtons', false) && /*#__PURE__*/ jsxRuntime.jsxs(inputnumber.InputNumber.Group, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(inputnumber.InputNumber.Increment, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-chevron-up"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(inputnumber.InputNumber.Decrement, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-chevron-down"
+                        })
+                    })
+                ]
+            })
+        ]
     });
 }
 

package/dist/cjs/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,cAAAA,CAA6BC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IAC/E,MAAMK,QAAAA,GAAWC,0BAAeN,OAAAA,EAAS,UAAA,CAAA;AACzC,IAAA,qBACIO,cAAA,CAACC,uBAAAA,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,0BAAeJ,OAAAA,EAAS,KAAA,CAAA;AAC7BgB,QAAAA,GAAAA,EAAKZ,0BAAeJ,OAAAA,EAAS,KAAA,CAAA;QAC7BiB,WAAAA,EAAaC,0BAAAA,CAAgBlB,SAAS,aAAA,EAAe,KAAA,CAAA;AACrDmB,QAAAA,WAAAA,EAAab,0BAAeN,OAAAA,EAAS,aAAA,CAAA;QACrCoB,QAAAA,EAAUF,0BAAAA,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,cAAAA,CAA6BC,0BAAeJ,OAAAA,EAAS,OAAA,CAAA,CAAA;IAC/E,MAAMK,QAAAA,GAAWC,0BAAeN,OAAAA,EAAS,UAAA,CAAA;IACzC,qBACIO,eAAA,CAACC,wBAAYC,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,0BAAeJ,OAAAA,EAAS,KAAA,CAAA;AAC7BiB,QAAAA,GAAAA,EAAKb,0BAAeJ,OAAAA,EAAS,KAAA,CAAA;QAC7BkB,QAAAA,EAAUC,0BAAAA,CAAgBnB,SAAS,UAAA,EAAY,KAAA,CAAA;;AAC/C,0BAAAoB,cAAA,CAACZ,wBAAYa,KAAK,EAAA;AAACC,gBAAAA,WAAAA,EAAahB,0BAAeN,OAAAA,EAAS,aAAA;;AACvDmB,YAAAA,0BAAAA,CAAgBnB,OAAAA,EAAS,aAAA,EAAe,KAAA,CAAA,kBACrCO,eAAA,CAACC,wBAAYe,KAAK,EAAA;;AACd,kCAAAH,cAAA,CAACZ,wBAAYgB,SAAS,EAAA;AAClB,wBAAA,QAAA,gBAAAJ,cAAA,CAACK,GAAAA,EAAAA;4BAAEC,SAAAA,EAAU;;;AAEjB,kCAAAN,cAAA,CAACZ,wBAAYmB,SAAS,EAAA;AAClB,wBAAA,QAAA,gBAAAP,cAAA,CAACK,GAAAA,EAAAA;4BAAEC,SAAAA,EAAU;;;;;;;AAMrC;;;;"}