@gravity-ui/dynamic-forms 5.20.0 → 5.22.0

package/build/esm/lib/unstable/kit/constants/config.js

@@ -1,96 +1,218 @@
-import { EntityType } from '../../core';
-import { Alert, ArrayBase, ArrayTable, Checkbox, CheckboxGroup, ColorPicker, DateInput, DotValue, FewOfNested, FileInput, Label, MultiSelect, NumberBase, ObjectBase, ObjectInline, OneOfNested, Password, RadioGroup, RangeSlider, SegmentedRadioGroup, Select, Slider, StringBase, Switch, TextArea, TextContent, } from '../controls';
-import { Accordeon, Row, Section, Transparent } from '../wrappers';
+import { NodeType } from '../../core';
+import { Alert, ArrayEntity, ArrayTable, DotValue, FewOfNested, Label, Monaco, ObjectEntity, ObjectInline, OneOfNested, TextContent, } from '../entities';
+import { CheckboxGroupInput, CheckboxInput, ColorPickerInput, DateInput, FileInput, MultiSelectInput, NumberInput, NumberWithScaleInput, PasswordInput, RadioGroupInput, RangeInput, RangeSliderInput, SegmentedRadioGroupInput, SelectInput, SliderInput, StringInput, StringNumberWithScaleInput, SwitchInput, TextAreaInput, } from '../form-entities';
+import { FormColumn, FormRow } from '../form-layouts';
+import { Accordeon, Card, Section, Transparent } from '../layouts';
+import { BooleanValue, ColorPickerValue, DateValue, NumberValue, NumberWithScaleValue, PrimitiveArrayValue, RangeValue, StringNumberWithScaleValue, StringValue, } from '../overview-entities';
+import { OverviewColumn, OverviewRow } from '../overview-layouts';
 export const untypedConfig = {
-    [EntityType.Any]: {
-        controls: { date_input: { Component: DateInput } },
-        views: {},
-        wrappers: {
-            row: Row,
-            section: Section,
-            transparent: Transparent,
-            accordeon: Accordeon,
+    [NodeType.Any]: {
+        formEntities: {
+            date: { Component: DateInput },
+        },
+        formLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent },
+            column: { Component: FormColumn },
+            row: { Component: FormRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
+        },
+        overviewEntities: {
+            date: { Component: DateValue },
+        },
+        overviewLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent, defaultProps: { hideEmpty: false } },
+            column: { Component: OverviewColumn },
+            row: { Component: OverviewRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
         },
         validators: {},
     },
-    [EntityType.Array]: {
-        controls: {
-            base: { Component: ArrayBase },
-            checkbox_group: { Component: CheckboxGroup },
-            select: { Component: MultiSelect },
-            array_table: { Component: ArrayTable },
-        },
-        views: {},
-        wrappers: {
-            row: Row,
-            section: Section,
-            transparent: Transparent,
-            accordeon: Accordeon,
+    [NodeType.Array]: {
+        formEntities: {
+            base: { Component: ArrayEntity },
+            checkbox_group: { Component: CheckboxGroupInput },
+            select: { Component: MultiSelectInput },
+            table: { Component: ArrayTable },
+        },
+        formLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent },
+            column: { Component: FormColumn },
+            row: { Component: FormRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
+        },
+        overviewEntities: {
+            base: { Component: ArrayEntity },
+            checkbox_group: { Component: PrimitiveArrayValue },
+            select: { Component: PrimitiveArrayValue },
+            table: { Component: ArrayTable },
+        },
+        overviewLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent, defaultProps: { hideEmpty: false } },
+            column: { Component: OverviewColumn },
+            row: { Component: OverviewRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
         },
         validators: {},
     },
-    [EntityType.Boolean]: {
-        controls: { base: { Component: Checkbox }, switch: { Component: Switch } },
-        views: {},
-        wrappers: {
-            row: Row,
-            section: Section,
-            transparent: Transparent,
+    [NodeType.Boolean]: {
+        formEntities: {
+            base: { Component: CheckboxInput },
+            switch: { Component: SwitchInput },
+        },
+        formLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent },
+            column: { Component: FormColumn },
+            row: { Component: FormRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
+        },
+        overviewEntities: {
+            base: { Component: BooleanValue },
+            switch: { Component: BooleanValue },
+        },
+        overviewLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent, defaultProps: { hideEmpty: false } },
+            column: { Component: OverviewColumn },
+            row: { Component: OverviewRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
         },
         validators: {},
     },
-    [EntityType.Number]: {
-        controls: {
-            base: { Component: NumberBase },
-            slider: { Component: Slider },
-        },
-        views: {},
-        wrappers: {
-            row: Row,
-            section: Section,
-            transparent: Transparent,
-            accordeon: Accordeon,
+    [NodeType.Number]: {
+        formEntities: {
+            base: { Component: NumberInput },
+            number_with_scale: { Component: NumberWithScaleInput },
+            slider: { Component: SliderInput },
+        },
+        formLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent },
+            column: { Component: FormColumn },
+            row: { Component: FormRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
+        },
+        overviewEntities: {
+            base: { Component: NumberValue },
+            number_with_scale: { Component: NumberWithScaleValue },
+            slider: { Component: NumberValue },
+        },
+        overviewLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent, defaultProps: { hideEmpty: false } },
+            column: { Component: OverviewColumn },
+            row: { Component: OverviewRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
         },
         validators: {},
     },
-    [EntityType.Object]: {
-        controls: {
-            base: { Component: ObjectBase },
-            inline: { Component: ObjectInline },
+    [NodeType.Object]: {
+        formEntities: {
+            base: { Component: ObjectEntity },
             dot_value: { Component: DotValue },
-            range_slider: { Component: RangeSlider },
+            few_of_nested: { Component: FewOfNested, independent: true },
+            inline: { Component: ObjectInline },
             one_of_nested: { Component: OneOfNested, independent: true },
+            range_input: { Component: RangeInput },
+            range_slider: { Component: RangeSliderInput },
+        },
+        formLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent },
+            column: { Component: FormColumn },
+            row: { Component: FormRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
+        },
+        overviewEntities: {
+            base: { Component: ObjectEntity },
+            dot_value: { Component: DotValue },
             few_of_nested: { Component: FewOfNested, independent: true },
+            inline: { Component: ObjectInline },
+            one_of_nested: { Component: OneOfNested, independent: true },
+            range_input: { Component: RangeValue },
+            range_slider: { Component: RangeValue },
         },
-        views: {},
-        wrappers: {
-            row: Row,
-            section: Section,
-            transparent: Transparent,
-            accordeon: Accordeon,
+        overviewLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent, defaultProps: { hideEmpty: false } },
+            column: { Component: OverviewColumn },
+            row: { Component: OverviewRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
         },
         validators: {},
     },
-    [EntityType.String]: {
-        controls: {
-            base: { Component: StringBase },
-            color_picker: { Component: ColorPicker },
+    [NodeType.String]: {
+        formEntities: {
+            alert: { Component: Alert },
+            base: { Component: StringInput },
+            color_picker: { Component: ColorPickerInput },
             file: { Component: FileInput },
-            password: { Component: Password },
-            radio_group: { Component: RadioGroup },
-            segmented_radio_group: { Component: SegmentedRadioGroup },
-            select: { Component: Select },
-            textarea: { Component: TextArea },
-            text_content: { Component: TextContent },
             label: { Component: Label },
+            monaco: { Component: Monaco },
+            password: { Component: PasswordInput },
+            radio_group: { Component: RadioGroupInput },
+            segmented_radio_group: { Component: SegmentedRadioGroupInput },
+            select: { Component: SelectInput },
+            string_number_with_scale: { Component: StringNumberWithScaleInput },
+            text_content: { Component: TextContent },
+            textarea: { Component: TextAreaInput },
+        },
+        formLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent },
+            column: { Component: FormColumn },
+            row: { Component: FormRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
+        },
+        overviewEntities: {
             alert: { Component: Alert },
+            base: { Component: StringValue },
+            color_picker: { Component: ColorPickerValue },
+            file: { Component: StringValue },
+            label: { Component: Label },
+            monaco: { Component: Monaco },
+            password: { Component: StringValue },
+            radio_group: { Component: StringValue },
+            segmented_radio_group: { Component: StringValue },
+            select: { Component: StringValue },
+            string_number_with_scale: { Component: StringNumberWithScaleValue },
+            textarea: { Component: StringValue },
+            text_content: { Component: TextContent },
         },
-        views: {},
-        wrappers: {
-            row: Row,
-            section: Section,
-            transparent: Transparent,
-            accordeon: Accordeon,
+        overviewLayouts: {
+            accordeon: { Component: Accordeon },
+            card: { Component: Card },
+            cell: { Component: Transparent, defaultProps: { hideEmpty: false } },
+            column: { Component: OverviewColumn },
+            row: { Component: OverviewRow },
+            section: { Component: Section },
+            transparent: { Component: Transparent },
         },
         validators: {},
     },

package/build/esm/lib/unstable/kit/constants/index.d.ts

@@ -1 +1,2 @@
+export { DASH, DEFAULT_DATE_FORMAT } from './common';
 export { config, untypedConfig } from './config';

package/build/esm/lib/unstable/kit/constants/index.js

@@ -1 +1,2 @@
+export { DASH, DEFAULT_DATE_FORMAT } from './common';
 export { config, untypedConfig } from './config';

package/build/esm/lib/unstable/kit/entities/Alert/Alert.d.ts

@@ -0,0 +1,8 @@
+import * as icons from '@gravity-ui/icons';
+import { type IconProps, type AlertProps as UIKitAlertProps } from '@gravity-ui/uikit';
+import type { JsonSchemaString, NodeEntity } from '../../../core';
+export interface AlertProps extends UIKitAlertProps {
+    iconName?: keyof typeof icons;
+    iconProps?: Partial<IconProps>;
+}
+export declare const Alert: NodeEntity<JsonSchemaString, AlertProps>;

package/build/esm/lib/unstable/kit/entities/Alert/Alert.js

@@ -0,0 +1,23 @@
+import { __rest } from "tslib";
+import React from 'react';
+import * as icons from '@gravity-ui/icons';
+import { Icon, Alert as UIKitAlert, } from '@gravity-ui/uikit';
+import { EntityContainer } from '../../components';
+export const Alert = ({ props, schema }) => {
+    const { iconName, iconProps, message } = props, entityRestProps = __rest(props, ["iconName", "iconProps", "message"]);
+    const icon = React.useMemo(() => iconName && icons[iconName] ? (React.createElement(Icon, Object.assign({ data: icons[iconName] }, iconProps))) : undefined, [iconName, iconProps]);
+    const msg = React.useMemo(() => {
+        if (message) {
+            if (typeof message === 'string') {
+                return React.createElement("span", { dangerouslySetInnerHTML: { __html: message } });
+            }
+            return message;
+        }
+        if (schema.description) {
+            return React.createElement("span", { dangerouslySetInnerHTML: { __html: schema.description } });
+        }
+        return undefined;
+    }, [message, schema.description]);
+    return (React.createElement(EntityContainer, { stretch: "fit", fill: "populated" },
+        React.createElement(UIKitAlert, Object.assign({ icon: icon, message: msg }, entityRestProps))));
+};

package/build/esm/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.css

@@ -0,0 +1,3 @@
+.sr-array-entity__add-button {
+  align-self: flex-start;
+}

package/build/esm/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.d.ts

@@ -0,0 +1,7 @@
+import { type JsonSchemaArray, type NodeEntity } from '../../../core';
+import './ArrayEntity.css';
+export interface ArrayEntityProps {
+    addButtonText?: string;
+    disabled?: boolean;
+}
+export declare const ArrayEntity: NodeEntity<JsonSchemaArray, ArrayEntityProps>;

package/build/esm/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Plus } from '@gravity-ui/icons';
+import { Button, Flex, Icon } from '@gravity-ui/uikit';
+import { SchemaRendererMode, SchemaRendererNode, } from '../../../core';
+import { EmptyEntityValue, EntityContainer } from '../../components';
+import { block } from '../../utils';
+import './ArrayEntity.css';
+const b = block('array-entity');
+export const ArrayEntity = ({ headName, input, mode, props, schema, schemaPath, }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const overviewFlag = mode === SchemaRendererMode.Overview;
+    const addButton = React.useMemo(() => {
+        const itemsSchema = schema.items;
+        if (Array.isArray(itemsSchema) || overviewFlag) {
+            return null;
+        }
+        const onClick = () => {
+            onFocus();
+            onChange([...(value || []), itemsSchema === null || itemsSchema === void 0 ? void 0 : itemsSchema.default]);
+            onBlur();
+        };
+        return (React.createElement(Button, { className: b('add-button'), onClick: onClick, disabled: props.disabled || schema.readOnly, qa: `${name}-add-button` },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            props.addButtonText || null));
+    }, [
+        props.addButtonText,
+        props.disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        overviewFlag,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
+    const items = React.useMemo(() => {
+        var _a;
+        const itemsSchema = schema.items;
+        if (Array.isArray(itemsSchema)) {
+            return itemsSchema.map((_item, index) => (React.createElement(SchemaRendererNode, { headName: headName, name: `${name}[${index}]`, schemaPath: `${schemaPath}/items/${index}`, key: index })));
+        }
+        return new Array((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0)
+            .fill(null)
+            .map((_, index) => (React.createElement(SchemaRendererNode, { headName: headName, name: `${name}[${index}]`, schemaPath: `${schemaPath}/items`, key: index })));
+    }, [headName, name, schema.items, schemaPath, value === null || value === void 0 ? void 0 : value.length]);
+    if (overviewFlag && !(value === null || value === void 0 ? void 0 : value.length)) {
+        return React.createElement(EmptyEntityValue, null);
+    }
+    return (React.createElement(EntityContainer, { stretch: "by-child", gap: 4, fill: "by-child" },
+        (items === null || items === void 0 ? void 0 : items.length) ? React.createElement(Flex, { direction: "column" }, items) : null,
+        addButton));
+};

package/build/esm/lib/unstable/kit/entities/ArrayEntity/index.d.ts

@@ -0,0 +1 @@
+export { ArrayEntity, type ArrayEntityProps } from './ArrayEntity';

package/build/esm/lib/unstable/kit/entities/ArrayEntity/index.js

@@ -0,0 +1 @@
+export { ArrayEntity } from './ArrayEntity';

package/build/esm/lib/unstable/kit/entities/ArrayTable/ArrayTable.css

@@ -0,0 +1,45 @@
+.sr-array-table__row {
+  width: 100%;
+  display: grid;
+  align-items: start;
+  grid-template-columns: 28px repeat(var(--columns-count), 1fr);
+  gap: calc(var(--g-spacing-base) * 3);
+  padding: calc(var(--g-spacing-base) * 2) 0;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.sr-array-table__row_head {
+  align-items: center;
+}
+.sr-array-table__row_with-remove-button {
+  grid-template-columns: 28px repeat(var(--columns-count), 1fr) 28px;
+}
+.sr-array-table__row:last-of-type {
+  border-bottom: none;
+}
+.sr-array-table__cell {
+  width: 100%;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+}
+.sr-array-table__cell_head {
+  min-height: unset;
+}
+.sr-array-table__index {
+  margin: 0 auto;
+}
+.sr-array-table__column-title {
+  display: flex;
+  align-items: center;
+  gap: 0 calc(var(--g-spacing-base) * 0.5);
+  flex-wrap: wrap;
+}
+.sr-array-table__column-title-word {
+  display: flex;
+  align-items: center;
+  gap: 0 calc(var(--g-spacing-base) * 1);
+  flex-wrap: wrap;
+}
+.sr-array-table__add-button {
+  align-self: flex-start;
+}

package/build/esm/lib/unstable/kit/entities/ArrayTable/ArrayTable.d.ts

@@ -0,0 +1,8 @@
+import { type JsonSchemaArray, type NodeEntity } from '../../../core';
+import './ArrayTable.css';
+export interface ArrayTableProps {
+    order?: string[];
+    addButtonText?: string;
+    disabled?: boolean;
+}
+export declare const ArrayTable: NodeEntity<JsonSchemaArray, ArrayTableProps>;

package/build/esm/lib/unstable/kit/entities/ArrayTable/ArrayTable.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Plus } from '@gravity-ui/icons';
+import { Button, HelpMark, Icon, Text } from '@gravity-ui/uikit';
+import { SchemaRendererMode, SchemaRendererNode, } from '../../../core';
+import { ArrayRemoveButton, EmptyEntityValue, EntityContainer, HTMLContent } from '../../components';
+import { block } from '../../utils';
+import './ArrayTable.css';
+const b = block('array-table');
+export const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const overviewFlag = mode === SchemaRendererMode.Overview;
+    const addButton = React.useMemo(() => {
+        const itemsSchema = schema.items;
+        if (Array.isArray(itemsSchema) || overviewFlag) {
+            return null;
+        }
+        const onClick = () => {
+            onFocus();
+            onChange([...(value || []), itemsSchema === null || itemsSchema === void 0 ? void 0 : itemsSchema.default]);
+            onBlur();
+        };
+        return (React.createElement(Button, { className: b('add-button'), onClick: onClick, disabled: props.disabled || schema.readOnly, qa: `${name}-add-button` },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            props.addButtonText || null));
+    }, [
+        props.addButtonText,
+        props.disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        overviewFlag,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
+    const columns = React.useMemo(() => {
+        const columns = [];
+        const itemsSchema = schema.items;
+        if (itemsSchema) {
+            const itemSchema = Array.isArray(itemsSchema) ? itemsSchema[0] : itemsSchema;
+            if ('properties' in itemSchema &&
+                itemSchema.properties &&
+                Object.keys(itemSchema.properties).length > 0) {
+                const properties = itemSchema.properties;
+                (props.order || Object.keys(properties)).forEach((columnKey) => {
+                    columns.push({ name: columnKey, schema: properties[columnKey] || {} });
+                });
+            }
+            else {
+                columns.push({ name: undefined, schema: itemSchema });
+            }
+        }
+        return columns;
+    }, [props.order, schema.items]);
+    const { head, rows } = React.useMemo(() => {
+        let tupleItems = false;
+        let rowsCount = value === null || value === void 0 ? void 0 : value.length;
+        let withRemoveButton = true;
+        const getItemName = (index, property) => `${name}[${index}]${property === undefined ? '' : `.${property}`}`;
+        const getItemSchemaPath = (index, property) => `${schemaPath}/items${tupleItems ? `/${index}` : ''}${property === undefined ? '' : `/properties/${property}`}`;
+        if (Array.isArray(schema.items)) {
+            tupleItems = true;
+            rowsCount = schema.items.length;
+            withRemoveButton = false;
+        }
+        if (overviewFlag) {
+            withRemoveButton = false;
+        }
+        const head = (React.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton, head: true }), style: { '--columns-count': columns.length } },
+            React.createElement("div", { className: b('cell', { head: true }) },
+                React.createElement(Text, { className: b('index'), variant: "subheader-1" }, "#")),
+            columns.map((column, cIndex) => {
+                var _a;
+                return (React.createElement("div", { className: b('cell', { head: true }), key: cIndex },
+                    React.createElement("div", { className: b('column-title') }, (_a = column.schema.title) === null || _a === void 0 ? void 0 : _a.split(' ').map((word, wIndex, array) => (React.createElement("div", { className: b('column-title-word'), key: word },
+                        React.createElement(Text, { variant: "subheader-1" }, word),
+                        wIndex + 1 === array.length && column.schema.description ? (React.createElement(HelpMark, null,
+                            React.createElement(HTMLContent, { html: column.schema.description }))) : null))))));
+            })));
+        const rows = new Array(rowsCount).fill(null).map((_, rIndex) => (React.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length }, key: rIndex },
+            React.createElement("div", { className: b('cell') },
+                React.createElement(Text, { className: b('index'), variant: "subheader-1" }, rIndex + 1)),
+            columns.map((column, cIndex) => (React.createElement("div", { className: b('cell'), key: cIndex },
+                React.createElement(SchemaRendererNode, { headName: headName, name: getItemName(rIndex, column.name), schemaPath: getItemSchemaPath(rIndex, column.name) })))),
+            withRemoveButton ? (React.createElement("div", { className: b('cell') },
+                React.createElement(ArrayRemoveButton, { name: `${name}[${rIndex}]`, headName: headName }))) : null)));
+        return { head, rows };
+    }, [columns, headName, name, overviewFlag, schema.items, schemaPath, value === null || value === void 0 ? void 0 : value.length]);
+    if (overviewFlag && !(value === null || value === void 0 ? void 0 : value.length)) {
+        return React.createElement(EmptyEntityValue, null);
+    }
+    return (React.createElement(EntityContainer, { stretch: "by-child", gap: 2, fill: "by-child" },
+        React.createElement("div", null,
+            head,
+            rows),
+        addButton));
+};

package/build/esm/lib/unstable/kit/entities/DotValue/DotValue.d.ts

@@ -0,0 +1,4 @@
+import { type JsonSchemaObject, type NodeEntity } from '../../../core';
+export interface DotValueProps {
+}
+export declare const DotValue: NodeEntity<JsonSchemaObject, DotValueProps>;

package/build/esm/lib/unstable/kit/entities/DotValue/DotValue.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import get from 'lodash/get';
+import isString from 'lodash/isString';
+import { SchemaRendererMode, SchemaRendererNode, } from '../../../core';
+import { EmptyEntityValue, EntityContainer } from '../../components';
+export const DotValue = ({ headName, input, mode, schemaPath, }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const childKey = 'value';
+    const overviewFlag = mode === SchemaRendererMode.Overview;
+    React.useLayoutEffect(() => {
+        if (value && !overviewFlag) {
+            const childValue = get(value, childKey);
+            if (childValue === null ||
+                childValue === undefined ||
+                childValue === '' ||
+                (isString(childValue) && childValue.endsWith('_UNSPECIFIED'))) {
+                onFocus();
+                onChange(undefined);
+                onBlur();
+            }
+        }
+    }, [value]);
+    if (overviewFlag && Object.keys(value || {}).length === 0) {
+        return React.createElement(EmptyEntityValue, null);
+    }
+    return (React.createElement(EntityContainer, { stretch: "by-child", fill: "by-child" },
+        React.createElement(SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${childKey}`, schemaPath: `${schemaPath}/properties/${childKey}` })));
+};

package/build/esm/lib/unstable/kit/entities/FewOfNested/FewOfNested.css

@@ -0,0 +1,17 @@
+.sr-few-of-nested__content {
+  margin-top: calc(var(--g-spacing-base) * 4);
+}
+.sr-few-of-nested__content_with-indent {
+  position: relative;
+  padding-left: calc(var(--g-spacing-base) * 7);
+}
+.sr-few-of-nested__content_with-indent:before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: calc(100% + var(--g-spacing-base) * 2);
+  background-color: var(--g-color-line-generic);
+  position: absolute;
+  left: calc(var(--g-spacing-base) * 3 + 1.5px);
+  bottom: 0;
+}

package/build/esm/lib/unstable/kit/entities/FewOfNested/FewOfNested.d.ts

@@ -0,0 +1,8 @@
+import { type JsonSchema, type JsonSchemaObject, type NodeEntity } from '../../../core';
+import './FewOfNested.css';
+export interface FewOfNestedProps {
+    toggler: JsonSchema;
+    withIndent?: boolean;
+    togglerArrayRemoveButton?: boolean;
+}
+export declare const FewOfNested: NodeEntity<JsonSchemaObject, FewOfNestedProps>;