@cratis/scene.primereact 1.1.0 → 3.0.0

package/form/PrimeIconField.tsx

@@ -2,7 +2,6 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { IconField } from 'primereact/iconfield';
-import { InputIcon } from 'primereact/inputicon';
 import { InputText } from 'primereact/inputtext';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { stringProperty } from '../properties';
@@ -12,12 +11,20 @@ import { stringProperty } from '../properties';
  *
  * 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.
  */
 export function PrimeIconField({ element, slots }: RegisteredComponentProps) {
+    const icon = <IconField.Inset className={stringProperty(element, 'icon', 'pi pi-search')} />;
+    const field = slots.content?.length ? slots.content : <InputText placeholder={stringProperty(element, 'placeholder')} />;
+    const iconLast = stringProperty(element, 'iconPosition', 'left') === 'right';
     return (
-        <IconField data-scene-id={element.id} iconPosition={stringProperty(element, 'iconPosition', 'left') as 'left' | 'right'}>
-            <InputIcon className={stringProperty(element, 'icon', 'pi pi-search')} />
-            {slots.content?.length ? slots.content : <InputText placeholder={stringProperty(element, 'placeholder')} />}
-        </IconField>
+        <IconField.Root data-scene-id={element.id}>
+            {iconLast ? field : icon}
+            {iconLast ? icon : field}
+        </IconField.Root>
     );
 }

package/form/PrimeInputNumber.tsx

@@ -11,12 +11,17 @@ import { booleanProperty, numberProperty, stringProperty } from '../properties';
  *
  * `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.
  */
 export function PrimeInputNumber({ element }: RegisteredComponentProps) {
     const [value, setValue] = useState<number | undefined>(numberProperty(element, 'value'));
     const currency = stringProperty(element, 'currency');
     return (
-        <InputNumber
+        <InputNumber.Root
             data-scene-id={element.id}
             value={value}
             onValueChange={(event) => setValue(typeof event.value === 'number' ? event.value : undefined)}
@@ -24,9 +29,18 @@ export function PrimeInputNumber({ element }: RegisteredComponentProps) {
             currency={currency}
             min={numberProperty(element, 'min')}
             max={numberProperty(element, 'max')}
-            showButtons={booleanProperty(element, 'showButtons', false)}
-            placeholder={stringProperty(element, 'placeholder')}
-            disabled={booleanProperty(element, 'disabled', false)}
-        />
+            disabled={booleanProperty(element, 'disabled', false)}>
+            <InputNumber.Input placeholder={stringProperty(element, 'placeholder')} />
+            {booleanProperty(element, 'showButtons', false) && (
+                <InputNumber.Group>
+                    <InputNumber.Increment>
+                        <i className='pi pi-chevron-up' />
+                    </InputNumber.Increment>
+                    <InputNumber.Decrement>
+                        <i className='pi pi-chevron-down' />
+                    </InputNumber.Decrement>
+                </InputNumber.Group>
+            )}
+        </InputNumber.Root>
     );
 }

package/form/PrimeInputTextarea.tsx

@@ -1,23 +1,25 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useState } from 'react';
-import { InputTextarea } from 'primereact/inputtextarea';
+import { ChangeEvent, useState } from 'react';
+import { Textarea } from 'primereact/textarea';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, numberProperty, stringProperty } from '../properties';
 
 /**
- * The `PrimeReact:inputTextarea` component - a multi-line text field.
+ * The `PrimeReact:inputTextarea` component - a multi-line text field, named `Textarea` by PrimeReact 11.
  *
- * Holds the typed value locally for the same reason {@link PrimeInputText} does.
+ * One of the few components the version change left alone beyond its name: it is still a single element
+ * rather than a composition, and `rows`, `cols` and `placeholder` still reach the underlying `<textarea>`
+ * untouched. Holds the typed value locally for the same reason {@link PrimeInputText} does.
  */
 export function PrimeInputTextarea({ element }: RegisteredComponentProps) {
     const [value, setValue] = useState(stringProperty(element, 'value', ''));
     return (
-        <InputTextarea
+        <Textarea
             data-scene-id={element.id}
             value={value}
-            onChange={(event) => setValue(event.target.value)}
+            onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setValue(event.target.value)}
             rows={numberProperty(element, 'rows', 4)}
             cols={numberProperty(element, 'cols')}
             autoResize={booleanProperty(element, 'autoResize', false)}

package/form/PrimeKnob.tsx

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

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

package/form/PrimeMultiSelect.tsx

@@ -2,27 +2,52 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { MultiSelect } from 'primereact/multiselect';
+import { Select } from 'primereact/select';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, optionsProperty, stringArrayProperty, stringProperty } from '../properties';
 
 /**
- * The `PrimeReact:multiSelect` component - a multiple-choice select with a checkbox list.
+ * The `PrimeReact:multiSelect` component - a multiple-choice select.
+ *
+ * There is no `MultiSelect` in PrimeReact 11; the capability moved onto `Select`, which takes a
+ * `multiple` prop. Keeping the abstract name and re-expressing it over `Select` is the whole point of
+ * having an abstract name: a screen that says `multiSelect` keeps working, and only this file knows the
+ * component behind it changed.
+ *
+ * Two v10 properties have nowhere to go and are deliberately dropped rather than silently ignored.
+ * `display` chose between a comma-separated summary and a row of chips, and `maxSelectedLabels` collapsed
+ * a long selection into an "n items selected" label - both were features of v10's own selection renderer.
+ * v11 renders the selection through `Select.Value`, which joins the selected labels with commas and
+ * offers no chip mode and no collapse threshold, so honoring either property would mean reimplementing
+ * the value slot rather than configuring it.
  */
 export function PrimeMultiSelect({ element }: RegisteredComponentProps) {
-    const [value, setValue] = useState<string[]>(stringArrayProperty(element, 'value'));
+    const [value, setValue] = useState<unknown>(stringArrayProperty(element, 'value'));
+    const placeholder = stringProperty(element, 'placeholder', 'Select');
+    const filter = booleanProperty(element, 'filter', false);
     return (
-        <MultiSelect
+        <Select.Root
             data-scene-id={element.id}
+            multiple
             value={value}
-            onChange={(event) => setValue(event.value)}
+            onValueChange={(event) => setValue(event.value)}
             options={optionsProperty(element, 'options')}
             optionLabel='label'
             optionValue='value'
-            display={stringProperty(element, 'display', 'comma') as 'comma' | 'chip'}
-            placeholder={stringProperty(element, 'placeholder', 'Select')}
-            filter={booleanProperty(element, 'filter', false)}
-            disabled={booleanProperty(element, 'disabled', false)}
-        />
+            filter={filter}
+            disabled={booleanProperty(element, 'disabled', false)}>
+            <Select.Trigger>
+                <Select.Value placeholder={placeholder} />
+                <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>
     );
 }

package/form/PrimePassword.tsx

@@ -2,22 +2,28 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { Password } from 'primereact/password';
+import { InputPassword } from 'primereact/inputpassword';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
- * The `PrimeReact:password` component - a masked field with an optional strength meter.
+ * The `PrimeReact:password` component - a masked field, named `InputPassword` by PrimeReact 11.
+ *
+ * v11 pared this back to what a password field actually is: an input that renders as `type="password"`
+ * until something flips `mask`. The v10 `feedback` strength meter and the `toggleMask` eye button are
+ * both gone from the component - there is no prompt/weak/medium/strong panel and no built-in reveal
+ * control to switch on - so neither property is read here. `mask` is exposed instead, which is the one
+ * knob that survived and the one an authored screen can actually mean: a preview that starts revealed.
+ * A screen that needs a reveal button now owns that button, because only the screen knows where it goes.
  */
 export function PrimePassword({ element }: RegisteredComponentProps) {
     const [value, setValue] = useState(stringProperty(element, 'value', ''));
     return (
-        <Password
+        <InputPassword
             data-scene-id={element.id}
             value={value}
-            onChange={(event) => setValue(event.target.value)}
-            feedback={booleanProperty(element, 'feedback', true)}
-            toggleMask={booleanProperty(element, 'toggleMask', true)}
+            onValueChange={(event) => setValue(event.value ?? '')}
+            mask={booleanProperty(element, 'mask', true)}
             placeholder={stringProperty(element, 'placeholder')}
             disabled={booleanProperty(element, 'disabled', false)}
         />

package/form/PrimeRadioButton.tsx

@@ -13,6 +13,11 @@ import { booleanProperty, optionsProperty, stringProperty } from '../properties'
  * choice is the group. The adapter therefore renders the whole group from `options`, sharing one
  * `name` so the browser enforces exclusivity, and falls back to a single button when only a `label` was
  * given.
+ *
+ * PrimeReact 11 splits each button into `Root` (the real radio input and its state), `Box` and
+ * `Indicator`, and reports selection as `onCheckedChange`. Only the transition *into* checked is acted
+ * on: the browser also fires the sibling losing its check, and treating that as a selection would clear
+ * the value a moment after the user set it.
  */
 export function PrimeRadioButton({ element }: RegisteredComponentProps) {
     const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));
@@ -23,14 +28,19 @@ export function PrimeRadioButton({ element }: RegisteredComponentProps) {
         <div data-scene-id={element.id} className='flex flex-col gap-2'>
             {choices.map((choice) => (
                 <div key={choice.value} className='flex items-center gap-2'>
-                    <RadioButton
+                    <RadioButton.Root
                         inputId={`${element.id}-${choice.value}`}
                         name={element.id}
                         value={choice.value}
                         checked={value === choice.value}
-                        onChange={(event) => setValue(event.value)}
-                        disabled={disabled}
-                    />
+                        onCheckedChange={(event) => {
+                            if (event.checked) setValue(choice.value);
+                        }}
+                        disabled={disabled}>
+                        <RadioButton.Box>
+                            <RadioButton.Indicator />
+                        </RadioButton.Box>
+                    </RadioButton.Root>
                     <label htmlFor={`${element.id}-${choice.value}`}>{choice.label}</label>
                 </div>
             ))}

package/form/PrimeRating.tsx

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

package/form/PrimeSelectButton.tsx

@@ -2,27 +2,35 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { SelectButton } from 'primereact/selectbutton';
+import { ToggleButton } from 'primereact/togglebutton';
+import { ToggleButtonGroup } from 'primereact/togglebuttongroup';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, optionsProperty, stringProperty } from '../properties';
 
 /**
  * The `PrimeReact:selectButton` component - a small set of choices shown as joined toggle buttons.
+ * PrimeReact 11 calls it `ToggleButtonGroup`.
  *
- * In PrimeReact 11 this component is renamed `ToggleButtonGroup`.
+ * v10 took the choices as an `options` array and rendered the buttons itself; v11 takes them as children,
+ * so the mapping that used to be `optionLabel` / `optionValue` is a `map` here. The group still owns the
+ * selection - each `ToggleButton` only declares its `value` and reads its pressed state from the group's
+ * context - which is what keeps `multiple` a single prop on the group rather than a rule every button
+ * would otherwise have to agree on.
  */
 export function PrimeSelectButton({ element }: RegisteredComponentProps) {
     const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));
     return (
-        <SelectButton
+        <ToggleButtonGroup
             data-scene-id={element.id}
             value={value}
-            onChange={(event) => setValue(event.value)}
-            options={optionsProperty(element, 'options')}
-            optionLabel='label'
-            optionValue='value'
+            onValueChange={(event) => setValue(event.value)}
             multiple={booleanProperty(element, 'multiple', false)}
-            disabled={booleanProperty(element, 'disabled', false)}
-        />
+            disabled={booleanProperty(element, 'disabled', false)}>
+            {optionsProperty(element, 'options').map((option) => (
+                <ToggleButton.Root key={option.value} value={option.value}>
+                    {option.label}
+                </ToggleButton.Root>
+            ))}
+        </ToggleButtonGroup>
     );
 }

package/form/PrimeSlider.tsx

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

package/form/PrimeToggleSwitch.tsx

@@ -2,29 +2,36 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { InputSwitch } from 'primereact/inputswitch';
+import { ToggleSwitch } from 'primereact/toggleswitch';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
  * The `PrimeReact:toggleSwitch` component.
  *
- * The abstract name is `toggleSwitch` while PrimeReact 10 calls the component `InputSwitch` - the Scene
- * name follows what the thing is rather than what one library happens to call it this major version.
- * PrimeReact 11 renames it `ToggleSwitch`, so the abstract name already matches where the library is
- * going and the port changes only this file's import.
+ * The abstract name has always been `toggleSwitch` even while PrimeReact 10 called the component
+ * `InputSwitch` - a Scene name follows what the thing is rather than what one library happens to call it
+ * this major version - and v11 renaming it `ToggleSwitch` is the library catching up rather than the
+ * package moving.
+ *
+ * `Root` renders the hidden checkbox that carries the state and the accessible name, and the visible
+ * switch is `Control` plus the `Handle` that slides inside it. That is why `inputId` and not `id` is what
+ * the label points at: the label has to reach the input, not the wrapper.
  */
 export function PrimeToggleSwitch({ 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'>
-            <InputSwitch
+            <ToggleSwitch.Root
                 inputId={element.id}
                 checked={checked}
-                onChange={(event) => setChecked(event.value)}
-                disabled={booleanProperty(element, 'disabled', false)}
-            />
+                onCheckedChange={(event) => setChecked(event.checked)}
+                disabled={booleanProperty(element, 'disabled', false)}>
+                <ToggleSwitch.Control>
+                    <ToggleSwitch.Handle />
+                </ToggleSwitch.Control>
+            </ToggleSwitch.Root>
             {label !== undefined && <label htmlFor={element.id}>{label}</label>}
         </div>
     );

package/form/PrimeTreeSelect.tsx

@@ -2,25 +2,33 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useState } from 'react';
-import { TreeSelect } from 'primereact/treeselect';
 import { RegisteredComponentProps } from '@cratis/scene.react';
+import { TreeSelect } from './TreeSelect';
 import { booleanProperty, stringProperty } from '../properties';
 import { treeNodesProperty } from '../treeNodes';
 
 /**
  * The `PrimeReact:treeSelect` component - a dropdown whose choices are a hierarchy.
+ *
+ * The abstract name outlived the component: PrimeReact 11 removed `TreeSelect` with no replacement and no
+ * headless hook, so what this adapts is {@link TreeSelect}, this package's own, built from v11's
+ * `Popover` and `Tree`. Keeping the name is the point - a screen that already says `treeSelect` neither
+ * knows nor needs to know that the thing behind it changed owner.
+ *
+ * v10's `filter` property is not read, because the replacement does not filter; see {@link TreeSelect}
+ * for what else was left out and why.
  */
 export function PrimeTreeSelect({ element }: RegisteredComponentProps) {
     const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));
     return (
-        <TreeSelect
-            data-scene-id={element.id}
-            value={value}
-            onChange={(event) => setValue(typeof event.value === 'string' ? event.value : undefined)}
-            options={treeNodesProperty(element, 'options')}
-            placeholder={stringProperty(element, 'placeholder', 'Select')}
-            filter={booleanProperty(element, 'filter', false)}
-            disabled={booleanProperty(element, 'disabled', false)}
-        />
+        <div data-scene-id={element.id}>
+            <TreeSelect
+                value={value}
+                onChange={setValue}
+                options={treeNodesProperty(element, 'options')}
+                placeholder={stringProperty(element, 'placeholder', 'Select')}
+                disabled={booleanProperty(element, 'disabled', false)}
+            />
+        </div>
     );
 }