@cratis/scene.primereact 1.1.0 → 2.0.0

package/for_menuItems/when_converting_entries.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import type { MenuItem } from 'primereact/menuitem';
+import { MenuItem } from '../MenuItem';
 import { toMenuItems } from '../menuItems';
 
 describe('when converting entries', () => {

package/for_primeReactPackage/when_rendering_every_declared_component.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { render } from '@testing-library/react';
+import { PrimeReactProvider } from '@primereact/core';
 import { SceneElementView } from '@cratis/scene.react';
 import { primeReactComponents } from '../primeReactComponents';
 import { primeReactPackageManifest } from '../primeReactPackage';
@@ -19,12 +20,51 @@ import { sceneComponent } from '../storyElements';
  * component whose data has not been authored yet is an ordinary state on a screen under construction, and
  * it must render empty rather than take the whole screen down with it. This is how PrimeReact's
  * OrganizationChart was found to throw on an empty node list.
+ *
+ * The `PrimeReactProvider` is not decoration and is new with PrimeReact 11. Every v11 component and
+ * headless hook bottoms out in `useBase` -> `usePrimeReact()`, which *throws* when the context is absent
+ * rather than falling back to a default configuration - so on v11 this spec fails at `render` for every
+ * adapter that touches a PrimeReact component, with an error about the provider rather than about the
+ * component. The provider is deliberately given no preset: what is being specified here is that the names
+ * resolve and the components survive being unconfigured, not how they look.
  */
 describe('when rendering every declared component', () => {
     let unresolved: string[];
     let threw: string[];
 
     beforeEach(() => {
+        // jsdom implements neither `ResizeObserver` nor `IntersectionObserver`. PrimeReact 11's ScrollArea
+        // and Carousel observe their own box to size a scrollbar thumb and a page, and the Carousel watches
+        // its slides to know which page is on screen. As with `matchMedia` below, these fill an environment
+        // gap rather than papering over a defect - every real browser has had both for years, and a
+        // component is entitled to assume them.
+        //
+        // Both stubs observe nothing, which is the right answer here rather than a shortcut: jsdom has no
+        // layout to report, and this spec renders each component once and never resizes or scrolls it.
+        // Casting through `unknown` avoids spelling out `root`, `rootMargin`, `thresholds` and
+        // `takeRecords` to satisfy the real DOM interface, none of which the components read.
+        const observerStub = class {
+            observe(): void {
+                return undefined;
+            }
+            unobserve(): void {
+                return undefined;
+            }
+            disconnect(): void {
+                return undefined;
+            }
+        };
+
+        if (window.ResizeObserver === undefined) {
+            window.ResizeObserver = observerStub as unknown as typeof ResizeObserver;
+            globalThis.ResizeObserver = window.ResizeObserver;
+        }
+
+        if (window.IntersectionObserver === undefined) {
+            window.IntersectionObserver = observerStub as unknown as typeof IntersectionObserver;
+            globalThis.IntersectionObserver = window.IntersectionObserver;
+        }
+
         // jsdom implements no `matchMedia`, and PrimeReact's PickList calls it to pick a responsive
         // layout. This fills the environment gap rather than papering over a defect - a real browser
         // has always had it.
@@ -49,7 +89,9 @@ describe('when rendering every declared component', () => {
             const element = sceneComponent(`element-${name}`, name, { text: name, label: name, value: name });
             try {
                 const { container, unmount } = render(
-                    <SceneElementView element={element} registry={primeReactComponents} resolveBinding={() => undefined} />
+                    <PrimeReactProvider>
+                        <SceneElementView element={element} registry={primeReactComponents} resolveBinding={() => undefined} />
+                    </PrimeReactProvider>
                 );
                 if (container.querySelector('[data-scene-unresolved-component]') !== null) unresolved.push(name);
                 unmount();

package/for_primeReactThemePreset/when_resolving_a_preset.ts

@@ -0,0 +1,49 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { primeReactThemeNames, primeReactThemePreset } from '../theme';
+
+describe('when resolving a preset', () => {
+    describe('and the theme is one this package ships', () => {
+        it('should resolve a preset for every theme in the catalog', () => {
+            primeReactThemeNames.filter((name) => primeReactThemePreset(name) === undefined).should.deep.equal([]);
+        });
+
+        it('should bind the theme accent onto the preset primary scale', () => {
+            const preset = primeReactThemePreset('lara-light-blue')!;
+            (preset.semantic!.primary as Record<string, string>)['500'].should.equal('#3b82f6');
+        });
+
+        it('should bind a different accent for a differently tinted theme of the same family', () => {
+            const preset = primeReactThemePreset('lara-light-teal')!;
+            (preset.semantic!.primary as Record<string, string>)['500'].should.equal('#14b8a6');
+        });
+
+        /**
+         * `definePreset` deep-merges into a *new* object, but the base presets are module singletons.
+         * A merge that mutated its base would leave whichever theme resolved first tinting every later
+         * one - a bug that only appears once two themes of a family are used in the same session, which
+         * is exactly what a theme picker does.
+         */
+        it('should not tint one theme with another theme of the same family', () => {
+            primeReactThemePreset('lara-light-purple');
+            const blue = primeReactThemePreset('lara-light-blue')!;
+            (blue.semantic!.primary as Record<string, string>)['500'].should.equal('#3b82f6');
+        });
+
+        /**
+         * `PrimeReactProvider` treats a new preset identity as a theme change and re-emits every `--p-*`
+         * custom property, so handing it a freshly built object each render would repaint the page on
+         * every render.
+         */
+        it('should return the same preset instance for the same theme, so a re-render is not a theme change', () => {
+            primeReactThemePreset('aura-dark-indigo')!.should.equal(primeReactThemePreset('aura-dark-indigo')!);
+        });
+    });
+
+    describe('and the theme is unknown', () => {
+        it('should resolve nothing rather than a default that would silently theme a screen wrongly', () => {
+            (primeReactThemePreset('lara-light-chartreuse') === undefined).should.be.true;
+        });
+    });
+});

package/for_primeReactThemes/when_checking_attribution.ts

@@ -16,12 +16,18 @@ describe('when checking attribution', () => {
         primeReactThemes.filter((theme) => theme.license === undefined || theme.license === '').should.deep.equal([]);
     });
 
-    it('should credit PrimeTek, who made every one of them', () => {
+    it('should credit PrimeTek, whose presets every one of them is built on', () => {
         primeReactThemes.filter((theme) => theme.author !== 'PrimeTek').should.deep.equal([]);
     });
 
-    it('should state the license the primereact package actually ships under', () => {
-        primeReactThemes.filter((theme) => theme.license !== 'MIT').should.deep.equal([]);
+    /**
+     * The assertion this spec exists for. Until PrimeReact 11 these themes really were MIT, and the
+     * previous version of this file pinned exactly that. Relicensing is invisible to a compiler and to
+     * every other spec in this package, so without a spec that names the current license out loud, the
+     * catalog would have gone on advertising MIT indefinitely.
+     */
+    it('should state the commercial license PrimeReact 11 actually ships under, not the MIT of v10', () => {
+        primeReactThemes.filter((theme) => theme.license !== 'PrimeUI Commercial').should.deep.equal([]);
     });
 
     it('should describe every theme for a picker', () => {

package/for_primeReactThemes/when_checking_the_token_vocabulary.ts

@@ -41,11 +41,30 @@ describe('when checking the token vocabulary', () => {
         primeReactThemes.some((theme) => theme.isDark === false).should.be.true;
     });
 
-    it('should mirror the value the shipped stylesheet uses for its primary color', () => {
+    /**
+     * The token values are generated by resolving each preset's `{path}` references and `light-dark()`
+     * pairs, so the risk is not a typo but a resolver that silently gave up - leaving a raw `{emerald.500}`
+     * or an unpicked `light-dark(...)` in the catalog, which reaches CSS as a value the browser drops.
+     */
+    it('should have resolved every token to a literal value rather than leaving a preset reference behind', () => {
+        const unresolved = primeReactThemes.flatMap((theme) =>
+            Object.entries(theme.tokens ?? {})
+                .filter(([, value]) => value.includes('{') || value.includes('light-dark('))
+                .map(([token]) => `${theme.name}: ${token}`)
+        );
+        unresolved.should.deep.equal([]);
+    });
+
+    it('should mirror the accent the preset binds for a light theme', () => {
         primeReactThemes.find((theme) => theme.name === 'lara-light-blue')!.tokens!['primary.color'].should.equal('#3b82f6');
     });
 
-    it('should replace the unresolved SCSS expression PrimeReact ships for the viva-dark hover surface', () => {
-        primeReactThemes.find((theme) => theme.name === 'viva-dark')!.tokens!['surface.hover'].should.equal('rgba(158, 173, 230, 0.08)');
+    /**
+     * A dark theme takes the lighter step of the accent ramp, not the same value as its light sibling.
+     * Getting this wrong is the classic `light-dark()` resolution bug and produces a dark theme that is
+     * legible everywhere except its own accent.
+     */
+    it('should take the accent from the lighter end of the ramp for a dark theme', () => {
+        primeReactThemes.find((theme) => theme.name === 'lara-dark-blue')!.tokens!['primary.color'].should.equal('#60a5fa');
     });
 });

package/form/FormGallery.stories.tsx

@@ -28,11 +28,10 @@ export const Gallery: Story = {
             sceneComponent('inputTextarea', 'inputTextarea', { placeholder: 'Notes', rows: 3 }),
             sceneComponent('inputNumber', 'inputNumber', { value: 42, showButtons: true }),
             sceneComponent('password', 'password', { placeholder: 'Password' }),
-            sceneComponent('inputMask', 'inputMask', { mask: '99-999999' }),
             sceneComponent('floatLabel', 'floatLabel', { label: 'Project name' }),
             sceneComponent('iconField', 'iconField', { icon: 'pi pi-search', placeholder: 'Search' }),
             sceneComponent('dropdown', 'dropdown', { options: ['Draft', 'In review', 'Published'], placeholder: 'Status' }),
-            sceneComponent('multiSelect', 'multiSelect', { options: ['Design', 'Engineering', 'Support'], display: 'chip' }),
+            sceneComponent('multiSelect', 'multiSelect', { options: ['Design', 'Engineering', 'Support'], placeholder: 'Teams' }),
             sceneComponent('listBox', 'listBox', { options: ['Daily', 'Weekly', 'Monthly'] }),
             sceneComponent('selectButton', 'selectButton', { options: ['Day', 'Week', 'Month'], value: 'Week' }),
             sceneComponent('checkbox', 'checkbox', { label: 'Notify me', checked: true }),
@@ -48,9 +47,6 @@ export const Gallery: Story = {
             sceneComponent('treeSelect', 'treeSelect', {
                 options: [{ label: 'Documents', children: ['Work', 'Home'] }],
             }),
-            sceneComponent('cascadeSelect', 'cascadeSelect', {
-                options: [{ label: 'Europe', items: [{ label: 'Norway' }, { label: 'Sweden' }] }],
-            }),
         ]),
         registry: primeReactComponents,
         resolveBinding: () => undefined,

package/form/PrimeAutoComplete.tsx

@@ -4,33 +4,49 @@
 import { useState } from 'react';
 import { AutoComplete } from 'primereact/autocomplete';
 import { RegisteredComponentProps } from '@cratis/scene.react';
+import { SelectOption } from '../SelectOption';
 import { booleanProperty, optionsProperty, stringProperty } from '../properties';
 
 /**
  * The `PrimeReact:autoComplete` component - a text field that suggests from a known set as you type.
  *
- * AutoComplete has no built-in filtering: it asks the host to produce suggestions through
- * `completeMethod`, because in a real application that is a server call. A Scene element cannot express
- * a server call, so the adapter filters the authored `options` case-insensitively instead - enough for
- * the component to behave like itself in a preview, and honest about where the data came from.
+ * AutoComplete has no built-in filtering: it asks the host to narrow the list through `onComplete`,
+ * because in a real application that is a server call. A Scene element cannot express a server call, so
+ * the adapter filters the authored `options` case-insensitively instead - enough for the component to
+ * behave like itself in a preview, and honest about where the data came from.
+ *
+ * PrimeReact 11 renamed the two halves of that arrangement: the narrowed list is `options` (v10 called it
+ * `suggestions`) and the callback is `onComplete` (v10's `completeMethod`), and `AutoComplete.List`
+ * renders the list itself from `optionLabel` / `optionValue`. The v10 `dropdown` flag is gone as a prop
+ * for the same reason it is gone from every other v11 overlay: the button either exists in the
+ * composition or it does not, so the property now decides whether to render `AutoComplete.Trigger`.
  */
 export function PrimeAutoComplete({ element }: RegisteredComponentProps) {
-    const options = optionsProperty(element, 'options');
-    const [value, setValue] = useState(stringProperty(element, 'value', ''));
-    const [suggestions, setSuggestions] = useState<string[]>([]);
+    const all = optionsProperty(element, 'options');
+    const [options, setOptions] = useState<SelectOption[]>(all);
 
     return (
-        <AutoComplete
+        <AutoComplete.Root
             data-scene-id={element.id}
-            value={value}
-            onChange={(event) => setValue(typeof event.value === 'string' ? event.value : '')}
-            suggestions={suggestions}
-            completeMethod={(event) =>
-                setSuggestions(options.filter((option) => option.label.toLowerCase().includes(event.query.toLowerCase())).map((option) => option.label))
-            }
-            dropdown={booleanProperty(element, 'dropdown', false)}
-            placeholder={stringProperty(element, 'placeholder')}
-            disabled={booleanProperty(element, 'disabled', false)}
-        />
+            options={options}
+            optionLabel='label'
+            optionValue='value'
+            defaultInputValue={stringProperty(element, 'value', '')}
+            onComplete={(event) => setOptions(all.filter((option) => option.label.toLowerCase().includes(event.query.toLowerCase())))}
+            disabled={booleanProperty(element, 'disabled', false)}>
+            <AutoComplete.Input placeholder={stringProperty(element, 'placeholder')} />
+            {booleanProperty(element, 'dropdown', false) && (
+                <AutoComplete.Trigger>
+                    <i className='pi pi-chevron-down' />
+                </AutoComplete.Trigger>
+            )}
+            <AutoComplete.Portal>
+                <AutoComplete.Positioner>
+                    <AutoComplete.Popup>
+                        <AutoComplete.List />
+                    </AutoComplete.Popup>
+                </AutoComplete.Positioner>
+            </AutoComplete.Portal>
+        </AutoComplete.Root>
     );
 }

package/form/PrimeCalendar.tsx

@@ -2,18 +2,24 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { Calendar } from 'primereact/calendar';
+import { DatePicker } from 'primereact/datepicker';
+import { InputText } from 'primereact/inputtext';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
- * 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.
  */
 export function PrimeCalendar({ element }: RegisteredComponentProps) {
     const [value, setValue] = useState<Date | undefined>(() => {
@@ -23,17 +29,60 @@ export function PrimeCalendar({ element }: RegisteredComponentProps) {
         return Number.isNaN(parsed.getTime()) ? undefined : parsed;
     });
 
+    const inline = booleanProperty(element, 'inline', false);
+    const showTime = booleanProperty(element, 'showTime', false);
+    const calendar = (
+        <>
+            <DatePicker.Calendar>
+                <DatePicker.Header>
+                    <DatePicker.Prev>
+                        <i className='pi pi-chevron-left' />
+                    </DatePicker.Prev>
+                    <DatePicker.Title>
+                        <DatePicker.SelectMonth />
+                        <DatePicker.SelectYear />
+                        <DatePicker.Decade />
+                    </DatePicker.Title>
+                    <DatePicker.Next>
+                        <i className='pi pi-chevron-right' />
+                    </DatePicker.Next>
+                </DatePicker.Header>
+                <DatePicker.Table>
+                    <DatePicker.TableHead />
+                    <DatePicker.TableBody />
+                    <DatePicker.TableBody view='month' />
+                    <DatePicker.TableBody view='year' />
+                </DatePicker.Table>
+            </DatePicker.Calendar>
+            {showTime && <DatePicker.Time />}
+        </>
+    );
+
     return (
-        <Calendar
+        <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={stringProperty(element, 'dateFormat')}
-            showIcon={booleanProperty(element, 'showIcon', true)}
-            showTime={booleanProperty(element, 'showTime', false)}
-            inline={booleanProperty(element, 'inline', false)}
-            placeholder={stringProperty(element, 'placeholder')}
-            disabled={booleanProperty(element, 'disabled', false)}
-        />
+            showTime={showTime}
+            disabled={booleanProperty(element, 'disabled', false)}>
+            {inline ? (
+                <DatePicker.Panel>{calendar}</DatePicker.Panel>
+            ) : (
+                <>
+                    <DatePicker.Input as={InputText} placeholder={stringProperty(element, 'placeholder')} />
+                    {booleanProperty(element, 'showIcon', true) && (
+                        <DatePicker.Trigger>
+                            <i className='pi pi-calendar' />
+                        </DatePicker.Trigger>
+                    )}
+                    <DatePicker.Portal>
+                        <DatePicker.Positioner align='start'>
+                            <DatePicker.Popup>{calendar}</DatePicker.Popup>
+                        </DatePicker.Positioner>
+                    </DatePicker.Portal>
+                </>
+            )}
+        </DatePicker.Root>
     );
 }

package/form/PrimeCheckbox.tsx

@@ -11,18 +11,26 @@ import { booleanProperty, stringProperty } from '../properties';
  *
  * 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.
  */
 export function PrimeCheckbox({ element }: RegisteredComponentProps) {
     const [checked, setChecked] = useState(booleanProperty(element, 'checked', false));
     const label = stringProperty(element, 'label');
     return (
         <div data-scene-id={element.id} className='flex items-center gap-2'>
-            <Checkbox
+            <Checkbox.Root
                 inputId={element.id}
                 checked={checked}
-                onChange={(event) => setChecked(event.checked === true)}
-                disabled={booleanProperty(element, 'disabled', false)}
-            />
+                onCheckedChange={(event) => setChecked(event.checked)}
+                disabled={booleanProperty(element, 'disabled', false)}>
+                <Checkbox.Box>
+                    <Checkbox.Indicator />
+                </Checkbox.Box>
+            </Checkbox.Root>
             {label !== undefined && <label htmlFor={element.id}>{label}</label>}
         </div>
     );

package/form/PrimeChips.tsx

@@ -2,25 +2,45 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { Chips } from 'primereact/chips';
+import { InputTags } from 'primereact/inputtags';
 import { RegisteredComponentProps } from '@cratis/scene.react';
-import { booleanProperty, stringArrayProperty, stringProperty } from '../properties';
+import { booleanProperty, numberProperty, stringArrayProperty, stringProperty } from '../properties';
 
 /**
  * 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.
  */
 export function PrimeChips({ element }: RegisteredComponentProps) {
     const [value, setValue] = useState<string[]>(stringArrayProperty(element, 'value'));
     return (
-        <Chips
+        <InputTags.Root
             data-scene-id={element.id}
             value={value}
-            onChange={(event) => setValue(event.value ?? [])}
-            max={undefined}
-            placeholder={stringProperty(element, 'placeholder')}
-            disabled={booleanProperty(element, 'disabled', false)}
-        />
+            onValueChange={(event) => setValue(event.value ?? [])}
+            max={numberProperty(element, 'max')}
+            disabled={booleanProperty(element, 'disabled', false)}>
+            <InputTags.Items>
+                {({ item, index, remove, itemProps }) => (
+                    <span {...itemProps} key={`${item}-${index}`}>
+                        <span>{item}</span>
+                        <button type='button' aria-label={`Remove ${item}`} onClick={remove}>
+                            <i className='pi pi-times-circle' />
+                        </button>
+                    </span>
+                )}
+            </InputTags.Items>
+            <InputTags.Control>
+                {({ controlProps }) => <input {...controlProps} placeholder={stringProperty(element, 'placeholder')} />}
+            </InputTags.Control>
+        </InputTags.Root>
     );
 }

package/form/PrimeColorPicker.tsx

@@ -2,25 +2,69 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { ColorPicker } from 'primereact/colorpicker';
+import { InputColor, parseColor } from 'primereact/inputcolor';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
- * 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: string) {
+    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.
  */
 export function PrimeColorPicker({ element }: RegisteredComponentProps) {
-    const [value, setValue] = useState(stringProperty(element, 'value', '6366f1').replace('#', ''));
+    const [value, setValue] = useState(stringProperty(element, 'value', fallbackColor).replace('#', ''));
     return (
-        <ColorPicker
-            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)}
-        />
+        <div data-scene-id={element.id}>
+            <InputColor.Root
+                value={toColor(value)}
+                onValueChange={(event) => setValue(event.value.toString('hex').replace('#', ''))}
+                disabled={booleanProperty(element, 'disabled', false)}>
+                <InputColor.Area>
+                    <InputColor.AreaBackground />
+                    <InputColor.AreaHandle />
+                </InputColor.Area>
+                <InputColor.Slider>
+                    <InputColor.SliderTrack />
+                    <InputColor.SliderHandle />
+                </InputColor.Slider>
+                <InputColor.Swatch>
+                    <InputColor.SwatchBackground />
+                </InputColor.Swatch>
+            </InputColor.Root>
+        </div>
     );
 }

package/form/PrimeDropdown.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { Dropdown } from 'primereact/dropdown';
+import { Select } from 'primereact/select';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, optionsProperty, stringProperty } from '../properties';
 
@@ -12,23 +12,41 @@ import { booleanProperty, optionsProperty, stringProperty } 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.
  */
 export function PrimeDropdown({ element }: RegisteredComponentProps) {
-    const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));
+    const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));
+    const placeholder = stringProperty(element, 'placeholder', 'Select');
+    const filter = booleanProperty(element, 'filter', false);
+    const showClear = booleanProperty(element, 'showClear', false);
     return (
-        <Dropdown
+        <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)}>
+            <Select.Trigger>
+                <Select.Value placeholder={placeholder} />
+                {showClear && <Select.Clear />}
+                <Select.Arrow />
+            </Select.Trigger>
+            <Select.Portal>
+                <Select.Positioner>
+                    <Select.Popup>
+                        {filter && <Select.Filter placeholder={placeholder} />}
+                        <Select.List />
+                    </Select.Popup>
+                </Select.Positioner>
+            </Select.Portal>
+        </Select.Root>
     );
 }