@gravity-ui/dynamic-forms 5.3.0 → 5.4.1

package/build/cjs/lib/core/components/Form/hooks/useMutators.js

@@ -13,7 +13,7 @@ const useMutators = (externalMutators) => {
         const mergeSpec = (a = {}, b) => {
             const result = (0, cloneDeep_1.default)(a);
             const getKeys = (parent) => {
-                if ((0, isObjectLike_1.default)(parent)) {
+                if ((0, isObjectLike_1.default)(parent) && !Array.isArray(parent)) {
                     return (0, keys_1.default)(parent).reduce((acc, parentKey) => {
                         const childKeys = getKeys(parent[parentKey]);
                         return [
@@ -31,7 +31,7 @@ const useMutators = (externalMutators) => {
             return result;
         };
         const mergeValuesOrErrors = (a = {}, b) => {
-            const result = (0, cloneDeep_1.default)(a);
+            const result = Object.assign({}, a);
             Object.keys(b).forEach((key) => {
                 (0, set_1.default)(result, [key, 'value'], b[key]);
             });

package/build/cjs/lib/kit/components/Inputs/RadioGroup/RadioGroup.css

@@ -0,0 +1,28 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
+.df-radio-group {
+  align-items: center;
+  height: var(--df-radio-group-height, 28px);
+}
+.df-radio-group_vertical {
+  align-items: flex-start;
+  margin-top: var(--df-radio-group-vertical-margin-top, var(--g-spacing-2));
+  height: auto;
+}

package/build/cjs/lib/kit/components/Inputs/RadioGroup/RadioGroup.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('radio-group');
+const RadioGroup = ({ name, input, spec, inputProps }) => {
+    var _a, _b, _c;
+    const { value, onBlur, onChange, onFocus } = input;
+    const { withCustomOptions, options: externalOptions } = inputProps || {};
+    const options = react_1.default.useMemo(() => {
+        var _a;
+        return withCustomOptions
+            ? externalOptions || []
+            : ((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+                var _a, _b, _c;
+                return ({
+                    value: id,
+                    content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                    disabled: ((_c = (_b = spec.viewSpec.radioGroupParams) === null || _b === void 0 ? void 0 : _b.disabled) === null || _c === void 0 ? void 0 : _c[id]) || false,
+                });
+            })) || [];
+    }, [
+        withCustomOptions,
+        externalOptions,
+        spec.enum,
+        spec.description,
+        (_a = spec.viewSpec.radioGroupParams) === null || _a === void 0 ? void 0 : _a.disabled,
+    ]);
+    if (options.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(uikit_1.Flex, { className: b({ vertical: ((_b = spec.viewSpec.radioGroupParams) === null || _b === void 0 ? void 0 : _b.direction) === 'vertical' }) },
+        react_1.default.createElement(uikit_1.RadioGroup, Object.assign({}, inputProps, { name: name, qa: name, disabled: spec.viewSpec.disabled, onUpdate: onChange, onBlur: onBlur, onFocus: onFocus, value: value, options: options, direction: ((_c = spec.viewSpec.radioGroupParams) === null || _c === void 0 ? void 0 : _c.direction) || 'horizontal' }))));
+};
+exports.RadioGroup = RadioGroup;

package/build/cjs/lib/kit/components/Inputs/RadioGroup/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./RadioGroup"), exports);

package/build/cjs/lib/kit/components/Inputs/index.js

@@ -14,6 +14,7 @@ tslib_1.__exportStar(require("./NumberWithScale"), exports);
 tslib_1.__exportStar(require("./ObjectBase"), exports);
 tslib_1.__exportStar(require("./ObjectValueInput"), exports);
 tslib_1.__exportStar(require("./OneOf"), exports);
+tslib_1.__exportStar(require("./RadioGroup"), exports);
 tslib_1.__exportStar(require("./Secret"), exports);
 tslib_1.__exportStar(require("./Select"), exports);
 tslib_1.__exportStar(require("./Switch"), exports);

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

@@ -104,6 +104,7 @@ exports.dynamicConfig = {
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInput },
             text_content: { Component: components_1.TextContent, independent: true },
+            radio_group: { Component: components_1.RadioGroup },
         },
         layouts: {
             row: components_1.Row,
@@ -212,6 +213,7 @@ exports.dynamicViewConfig = {
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },
             text_content: { Component: components_1.TextContentView, independent: true },
+            radio_group: { Component: components_1.BaseView },
         },
         layouts: {
             row: components_1.ViewRow,

package/build/esm/lib/core/components/Form/hooks/useMutators.js

@@ -9,7 +9,7 @@ export const useMutators = (externalMutators) => {
         const mergeSpec = (a = {}, b) => {
             const result = cloneDeep(a);
             const getKeys = (parent) => {
-                if (isObjectLike(parent)) {
+                if (isObjectLike(parent) && !Array.isArray(parent)) {
                     return keys(parent).reduce((acc, parentKey) => {
                         const childKeys = getKeys(parent[parentKey]);
                         return [
@@ -27,7 +27,7 @@ export const useMutators = (externalMutators) => {
             return result;
         };
         const mergeValuesOrErrors = (a = {}, b) => {
-            const result = cloneDeep(a);
+            const result = Object.assign({}, a);
             Object.keys(b).forEach((key) => {
                 set(result, [key, 'value'], b[key]);
             });

package/build/esm/lib/core/types/specs.d.ts

@@ -168,6 +168,10 @@ export interface StringSpec<LinkType = any, InputComponentProps extends Record<s
             filterPlaceholder?: string;
             meta?: Record<string, string>;
         };
+        radioGroupParams?: {
+            direction?: 'horizontal' | 'vertical';
+            disabled?: Record<string, boolean>;
+        };
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
         generateRandomValueButton?: boolean;

package/build/esm/lib/kit/components/Inputs/RadioGroup/RadioGroup.css

@@ -0,0 +1,28 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
+.df-radio-group {
+  align-items: center;
+  height: var(--df-radio-group-height, 28px);
+}
+.df-radio-group_vertical {
+  align-items: flex-start;
+  margin-top: var(--df-radio-group-vertical-margin-top, var(--g-spacing-2));
+  height: auto;
+}

package/build/esm/lib/kit/components/Inputs/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,7 @@
+import { type RadioGroupProps as RadioGroupBaseProps } from '@gravity-ui/uikit';
+import type { StringInput } from '../../../../core';
+import './RadioGroup.css';
+export interface RadioGroupProps extends Omit<RadioGroupBaseProps, 'direction' | 'onChange' | 'onBlur' | 'onFocus' | 'disabled' | 'qa' | 'content'> {
+    withCustomOptions?: boolean;
+}
+export declare const RadioGroup: StringInput<RadioGroupProps>;

package/build/esm/lib/kit/components/Inputs/RadioGroup/RadioGroup.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Flex, RadioGroup as RadioGroupBase, } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import './RadioGroup.css';
+const b = block('radio-group');
+export const RadioGroup = ({ name, input, spec, inputProps }) => {
+    var _a, _b, _c;
+    const { value, onBlur, onChange, onFocus } = input;
+    const { withCustomOptions, options: externalOptions } = inputProps || {};
+    const options = React.useMemo(() => {
+        var _a;
+        return withCustomOptions
+            ? externalOptions || []
+            : ((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+                var _a, _b, _c;
+                return ({
+                    value: id,
+                    content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                    disabled: ((_c = (_b = spec.viewSpec.radioGroupParams) === null || _b === void 0 ? void 0 : _b.disabled) === null || _c === void 0 ? void 0 : _c[id]) || false,
+                });
+            })) || [];
+    }, [
+        withCustomOptions,
+        externalOptions,
+        spec.enum,
+        spec.description,
+        (_a = spec.viewSpec.radioGroupParams) === null || _a === void 0 ? void 0 : _a.disabled,
+    ]);
+    if (options.length === 0) {
+        return null;
+    }
+    return (React.createElement(Flex, { className: b({ vertical: ((_b = spec.viewSpec.radioGroupParams) === null || _b === void 0 ? void 0 : _b.direction) === 'vertical' }) },
+        React.createElement(RadioGroupBase, Object.assign({}, inputProps, { name: name, qa: name, disabled: spec.viewSpec.disabled, onUpdate: onChange, onBlur: onBlur, onFocus: onFocus, value: value, options: options, direction: ((_c = spec.viewSpec.radioGroupParams) === null || _c === void 0 ? void 0 : _c.direction) || 'horizontal' }))));
+};

package/build/esm/lib/kit/components/Inputs/RadioGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './RadioGroup';

package/build/esm/lib/kit/components/Inputs/RadioGroup/index.js

@@ -0,0 +1 @@
+export * from './RadioGroup';

package/build/esm/lib/kit/components/Inputs/index.d.ts

@@ -11,6 +11,7 @@ export * from './NumberWithScale';
 export * from './ObjectBase';
 export * from './ObjectValueInput';
 export * from './OneOf';
+export * from './RadioGroup';
 export * from './Secret';
 export * from './Select';
 export * from './Switch';

package/build/esm/lib/kit/components/Inputs/index.js

@@ -11,6 +11,7 @@ export * from './NumberWithScale';
 export * from './ObjectBase';
 export * from './ObjectValueInput';
 export * from './OneOf';
+export * from './RadioGroup';
 export * from './Secret';
 export * from './Select';
 export * from './Switch';

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

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, RadioGroup, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -101,6 +101,7 @@ export const dynamicConfig = {
             number_with_scale: { Component: NumberWithScale },
             monaco_input: { Component: MonacoInput },
             text_content: { Component: TextContent, independent: true },
+            radio_group: { Component: RadioGroup },
         },
         layouts: {
             row: Row,
@@ -209,6 +210,7 @@ export const dynamicViewConfig = {
             number_with_scale: { Component: NumberWithScaleView },
             monaco_input: { Component: MonacoView },
             text_content: { Component: TextContentView, independent: true },
+            radio_group: { Component: BaseView },
         },
         layouts: {
             row: ViewRow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "5.3.0",
+  "version": "5.4.1",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",