@gravity-ui/dynamic-forms 5.20.0 → 5.21.0

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

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

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

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

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

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.untypedConfig = exports.config = void 0;
+exports.untypedConfig = exports.config = exports.DEFAULT_DATE_FORMAT = exports.DASH = void 0;
+var common_1 = require("./common");
+Object.defineProperty(exports, "DASH", { enumerable: true, get: function () { return common_1.DASH; } });
+Object.defineProperty(exports, "DEFAULT_DATE_FORMAT", { enumerable: true, get: function () { return common_1.DEFAULT_DATE_FORMAT; } });
 var config_1 = require("./config");
 Object.defineProperty(exports, "config", { enumerable: true, get: function () { return config_1.config; } });
 Object.defineProperty(exports, "untypedConfig", { enumerable: true, get: function () { return config_1.untypedConfig; } });

package/build/cjs/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/cjs/lib/unstable/kit/entities/Alert/Alert.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons = tslib_1.__importStar(require("@gravity-ui/icons"));
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../components");
+const Alert = ({ props, schema }) => {
+    const { iconName, iconProps, message } = props, entityRestProps = tslib_1.__rest(props, ["iconName", "iconProps", "message"]);
+    const icon = react_1.default.useMemo(() => iconName && icons[iconName] ? (react_1.default.createElement(uikit_1.Icon, Object.assign({ data: icons[iconName] }, iconProps))) : undefined, [iconName, iconProps]);
+    const msg = react_1.default.useMemo(() => {
+        if (message) {
+            if (typeof message === 'string') {
+                return react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: message } });
+            }
+            return message;
+        }
+        if (schema.description) {
+            return react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: schema.description } });
+        }
+        return undefined;
+    }, [message, schema.description]);
+    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "fit", fill: "populated" },
+        react_1.default.createElement(uikit_1.Alert, Object.assign({ icon: icon, message: msg }, entityRestProps))));
+};
+exports.Alert = Alert;

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

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

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

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

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayEntity = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const core_1 = require("../../../core");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('array-entity');
+const ArrayEntity = ({ headName, input, mode, props, schema, schemaPath, }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
+    const addButton = react_1.default.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_1.default.createElement(uikit_1.Button, { className: b('add-button'), onClick: onClick, disabled: props.disabled || schema.readOnly, qa: `${name}-add-button` },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            props.addButtonText || null));
+    }, [
+        props.addButtonText,
+        props.disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        overviewFlag,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
+    const items = react_1.default.useMemo(() => {
+        var _a;
+        const itemsSchema = schema.items;
+        if (Array.isArray(itemsSchema)) {
+            return itemsSchema.map((_item, index) => (react_1.default.createElement(core_1.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_1.default.createElement(core_1.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_1.default.createElement(components_1.EmptyEntityValue, null);
+    }
+    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", gap: 4, fill: "by-child" },
+        (items === null || items === void 0 ? void 0 : items.length) ? react_1.default.createElement(uikit_1.Flex, { direction: "column" }, items) : null,
+        addButton));
+};
+exports.ArrayEntity = ArrayEntity;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayEntity = void 0;
+var ArrayEntity_1 = require("./ArrayEntity");
+Object.defineProperty(exports, "ArrayEntity", { enumerable: true, get: function () { return ArrayEntity_1.ArrayEntity; } });

package/build/cjs/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/cjs/lib/unstable/kit/entities/ArrayTable/ArrayTable.d.ts

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

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

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayTable = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const core_1 = require("../../../core");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('array-table');
+const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
+    const addButton = react_1.default.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_1.default.createElement(uikit_1.Button, { className: b('add-button'), onClick: onClick, disabled: props.disabled || schema.readOnly, qa: `${name}-add-button` },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            props.addButtonText || null));
+    }, [
+        props.addButtonText,
+        props.disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        overviewFlag,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
+    const columns = react_1.default.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_1.default.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_1.default.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton, head: true }), style: { '--columns-count': columns.length } },
+            react_1.default.createElement("div", { className: b('cell', { head: true }) },
+                react_1.default.createElement(uikit_1.Text, { className: b('index'), variant: "subheader-1" }, "#")),
+            columns.map((column, cIndex) => {
+                var _a;
+                return (react_1.default.createElement("div", { className: b('cell', { head: true }), key: cIndex },
+                    react_1.default.createElement("div", { className: b('column-title') }, (_a = column.schema.title) === null || _a === void 0 ? void 0 : _a.split(' ').map((word, wIndex, array) => (react_1.default.createElement("div", { className: b('column-title-word'), key: word },
+                        react_1.default.createElement(uikit_1.Text, { variant: "subheader-1" }, word),
+                        wIndex + 1 === array.length && column.schema.description ? (react_1.default.createElement(uikit_1.HelpMark, null,
+                            react_1.default.createElement(components_1.HTMLContent, { html: column.schema.description }))) : null))))));
+            })));
+        const rows = new Array(rowsCount).fill(null).map((_, rIndex) => (react_1.default.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length }, key: rIndex },
+            react_1.default.createElement("div", { className: b('cell') },
+                react_1.default.createElement(uikit_1.Text, { className: b('index'), variant: "subheader-1" }, rIndex + 1)),
+            columns.map((column, cIndex) => (react_1.default.createElement("div", { className: b('cell'), key: cIndex },
+                react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: getItemName(rIndex, column.name), schemaPath: getItemSchemaPath(rIndex, column.name) })))),
+            withRemoveButton ? (react_1.default.createElement("div", { className: b('cell') },
+                react_1.default.createElement(components_1.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_1.default.createElement(components_1.EmptyEntityValue, null);
+    }
+    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", gap: 2, fill: "by-child" },
+        react_1.default.createElement("div", null,
+            head,
+            rows),
+        addButton));
+};
+exports.ArrayTable = ArrayTable;

package/build/cjs/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/cjs/lib/unstable/kit/entities/DotValue/DotValue.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DotValue = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const get_1 = tslib_1.__importDefault(require("lodash/get"));
+const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const core_1 = require("../../../core");
+const components_1 = require("../../components");
+const DotValue = ({ headName, input, mode, schemaPath, }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const childKey = 'value';
+    const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
+    react_1.default.useLayoutEffect(() => {
+        if (value && !overviewFlag) {
+            const childValue = (0, get_1.default)(value, childKey);
+            if (childValue === null ||
+                childValue === undefined ||
+                childValue === '' ||
+                ((0, isString_1.default)(childValue) && childValue.endsWith('_UNSPECIFIED'))) {
+                onFocus();
+                onChange(undefined);
+                onBlur();
+            }
+        }
+    }, [value]);
+    if (overviewFlag && Object.keys(value || {}).length === 0) {
+        return react_1.default.createElement(components_1.EmptyEntityValue, null);
+    }
+    return (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", fill: "by-child" },
+        react_1.default.createElement(core_1.SchemaRendererNode, { headName: headName, name: `${name ? name + '.' : ''}${childKey}`, schemaPath: `${schemaPath}/properties/${childKey}` })));
+};
+exports.DotValue = DotValue;

package/build/cjs/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;
+}