@gravity-ui/dynamic-forms 4.6.0 → 4.7.0

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

@@ -0,0 +1,18 @@
+.df-checkbox-group {
+  display: flex;
+  align-items: center;
+  height: 28px;
+}
+.df-checkbox-group > *:not(:last-child) {
+  margin-right: 6px;
+}
+.df-checkbox-group_vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 8px;
+  height: auto;
+}
+.df-checkbox-group_vertical > *:not(:last-child) {
+  margin-right: 0px;
+  margin-bottom: 6px;
+}

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../../core");
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('checkbox-group');
+const CheckboxGroup = ({ name, input, spec, inputProps }) => {
+    var _a;
+    const { value, onBlur, onChange, onFocus } = input;
+    const _value = react_1.default.useMemo(() => (0, core_1.transformArrOut)(value), [value]);
+    const options = react_1.default.useMemo(() => {
+        var _a;
+        return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+            var _a;
+            return ({
+                value: id,
+                text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+            });
+        });
+    }, [spec.enum, spec.description]);
+    const handleUpdate = react_1.default.useCallback((optionValue, selected) => {
+        let newValue = _value || [];
+        if (selected) {
+            newValue.push(optionValue);
+        }
+        else {
+            newValue = newValue.filter((id) => id !== optionValue);
+        }
+        onChange((0, core_1.transformArrIn)(newValue));
+    }, [_value, onChange]);
+    return (react_1.default.createElement("div", { className: b({ vertical: ((_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement) === 'vertical' }), "data-qa": name }, options === null || options === void 0 ? void 0 : options.map(({ value: optionValue, text }) => {
+        var _a, _b;
+        return (react_1.default.createElement(uikit_1.Checkbox, Object.assign({}, inputProps, { qa: name && `${name}-${optionValue}`, key: optionValue, checked: _value === null || _value === void 0 ? void 0 : _value.includes(optionValue), onUpdate: (selected) => handleUpdate(optionValue, selected), disabled: spec.viewSpec.disabled ||
+                ((_b = (_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.disabled) === null || _b === void 0 ? void 0 : _b[optionValue]), content: text, onBlur: onBlur, onFocus: onFocus })));
+    })));
+};
+exports.CheckboxGroup = CheckboxGroup;

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

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

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeSelector = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const set_1 = tslib_1.__importDefault(require("lodash/set"));
+const core_1 = require("../../../../core");
+const common_1 = require("../../../constants/common");
+const components_1 = require("./components");
+const utils_1 = require("./utils");
+const TimeRangeSelector = (props) => {
+    var _a, _b;
+    const { spec, input, name, Layout } = props;
+    const [startTimeSpec, endTimeSpec] = react_1.default.useMemo(() => [common_1.START_TIME, common_1.END_TIME].map((key) => {
+        var _a, _b;
+        return (0, core_1.isStringSpec)((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[key])
+            ? (_b = spec.properties) === null || _b === void 0 ? void 0 : _b[key]
+            : undefined;
+    }), [spec.properties]);
+    const { initialStartTimeOptions, initialEndTimeOptions, canBeFiltered } = react_1.default.useMemo(() => {
+        const [initialStartTimeOptions, initialEndTimeOptions] = [startTimeSpec, endTimeSpec].map((spec) => {
+            if (spec && spec.enum) {
+                return spec.enum.map((id) => {
+                    var _a, _b, _c, _d;
+                    return ({
+                        id,
+                        value: id,
+                        content: ((_b = (_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b[id]) ? (react_1.default.createElement("div", { key: id },
+                            react_1.default.createElement(uikit_1.Text, null, ((_c = spec.description) === null || _c === void 0 ? void 0 : _c[id]) || id),
+                            react_1.default.createElement(uikit_1.Text, { color: "secondary", as: "div" }, spec.viewSpec.selectParams.meta[id]))) : (((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                        key: id,
+                    });
+                });
+            }
+            return undefined;
+        });
+        const canBeFiltered = initialStartTimeOptions &&
+            initialEndTimeOptions &&
+            (0, utils_1.validateArray)(initialStartTimeOptions) &&
+            (0, utils_1.validateArray)(initialEndTimeOptions);
+        return {
+            initialStartTimeOptions,
+            initialEndTimeOptions,
+            canBeFiltered,
+        };
+    }, [endTimeSpec, startTimeSpec]);
+    const { startTimeOptions, endTimeOptions } = react_1.default.useMemo(() => {
+        let startTimeOptions = initialStartTimeOptions;
+        let endTimeOptions = initialEndTimeOptions;
+        [common_1.START_TIME, common_1.END_TIME].forEach((key) => {
+            var _a;
+            const time = (_a = input.value) === null || _a === void 0 ? void 0 : _a[key];
+            if ((0, isString_1.default)(time) &&
+                canBeFiltered &&
+                initialEndTimeOptions &&
+                initialStartTimeOptions) {
+                if (common_1.START_TIME === key) {
+                    endTimeOptions = (0, utils_1.filterTimeArray)(initialEndTimeOptions, time, 'greater');
+                }
+                else {
+                    startTimeOptions = (0, utils_1.filterTimeArray)(initialStartTimeOptions, time, 'less');
+                }
+            }
+        });
+        return { startTimeOptions, endTimeOptions };
+    }, [canBeFiltered, initialEndTimeOptions, initialStartTimeOptions, input.value]);
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => (0, set_1.default)(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input, name]);
+    if (!startTimeSpec || !endTimeSpec || !startTimeOptions || !endTimeOptions) {
+        return null;
+    }
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(components_1.TimeRangeSelect, { spec: startTimeSpec, name: `${name}.${common_1.START_TIME}`, options: startTimeOptions, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[common_1.START_TIME], handleChange: (value) => parentOnChange(common_1.START_TIME, value[0]), props: props }),
+        react_1.default.createElement(components_1.TimeRangeSelect, { spec: endTimeSpec, name: `${name}.${common_1.END_TIME}`, options: endTimeOptions, value: (_b = input.value) === null || _b === void 0 ? void 0 : _b[common_1.END_TIME], handleChange: (value) => parentOnChange(common_1.END_TIME, value[0]), props: props })));
+    if (Layout) {
+        return react_1.default.createElement(Layout, Object.assign({}, props), content);
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
+};
+exports.TimeRangeSelector = TimeRangeSelector;

package/build/cjs/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.css

@@ -0,0 +1,6 @@
+.df-time-range-select__select {
+  min-width: 100px;
+}
+.df-time-range-select__select-popup {
+  max-height: 250px;
+}

package/build/cjs/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeSelect = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../../utils");
+const Row_1 = require("../../../../Layouts/Row");
+const b = (0, utils_1.block)('time-range-select');
+const TimeRangeSelect = ({ name, spec, options, value, props, handleChange, }) => {
+    var _a, _b;
+    const filterable = react_1.default.useMemo(() => ((options === null || options === void 0 ? void 0 : options.length) || 0) > 9, [options === null || options === void 0 ? void 0 : options.length]);
+    const _value = react_1.default.useMemo(() => {
+        if ((0, isString_1.default)(value)) {
+            return [value];
+        }
+        return undefined;
+    }, [value]);
+    const renderOption = react_1.default.useCallback((option) => {
+        return react_1.default.createElement(react_1.default.Fragment, { key: option.value }, option.content || option.value);
+    }, []);
+    const getOptionHeight = react_1.default.useCallback(() => {
+        var _a;
+        if ((_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) {
+            return 44;
+        }
+        return 28;
+    }, [(_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta]);
+    return (react_1.default.createElement(Row_1.Row, Object.assign({}, Object.assign(Object.assign({}, props), { spec })),
+        react_1.default.createElement(uikit_1.Select, { className: b('select'), filterable: filterable, value: _value, options: options, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterPlaceholder: (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.filterPlaceholder, renderOption: renderOption, getOptionHeight: getOptionHeight, qa: name, popupClassName: b('select-popup') })));
+};
+exports.TimeRangeSelect = TimeRangeSelect;

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

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

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

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

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

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

package/build/cjs/lib/kit/components/Inputs/TimeRangeSelector/utils.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateArray = exports.filterTimeArray = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const filterTimeArray = (times, cutoff, direction) => {
+    const isTimeFormat = (value) => /^\d{1,2}:\d{2}$/.test(value);
+    const compareValues = (a, b) => {
+        if (isTimeFormat(a) && isTimeFormat(b)) {
+            return direction === 'less' ? a >= b : a <= b;
+        }
+        else {
+            const aNum = parseInt(a, 10);
+            const bNum = parseInt(b, 10);
+            return direction === 'less' ? aNum >= bNum : aNum <= bNum;
+        }
+    };
+    return times.map((time) => {
+        const disabled = compareValues(time.value, cutoff);
+        return Object.assign(Object.assign({}, time), { content: disabled ? react_1.default.createElement(uikit_1.Text, { color: "secondary" }, time.content) : time.content, disabled });
+    });
+};
+exports.filterTimeArray = filterTimeArray;
+const validateArray = (arr) => arr.every((obj) => /^(\d+|\d{1,2}:\d{1,2})$/.test(obj.value));
+exports.validateArray = validateArray;

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

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ArrayBase"), exports);
 tslib_1.__exportStar(require("./CardOneOf"), exports);
 tslib_1.__exportStar(require("./Checkbox"), exports);
+tslib_1.__exportStar(require("./CheckboxGroup"), exports);
 tslib_1.__exportStar(require("./FileInput"), exports);
 tslib_1.__exportStar(require("./DateInput"), exports);
 tslib_1.__exportStar(require("./MonacoInput"), exports);
@@ -21,3 +22,4 @@ tslib_1.__exportStar(require("./Text"), exports);
 tslib_1.__exportStar(require("./TextArea"), exports);
 tslib_1.__exportStar(require("./TextContent"), exports);
 tslib_1.__exportStar(require("./TextLink"), exports);
+tslib_1.__exportStar(require("./TimeRangeSelector"), exports);

package/build/cjs/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.css

@@ -0,0 +1,27 @@
+.df-checkbox-group-view {
+  display: flex;
+}
+.df-checkbox-group-view > *:not(:last-child) {
+  margin-right: 6px;
+}
+.df-checkbox-group-view_vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.df-checkbox-group-view_vertical > *:not(:last-child) {
+  margin-right: 0px;
+  margin-bottom: 6px;
+}
+.df-checkbox-group-view__tooltip {
+  overflow-wrap: break-word;
+}
+.df-checkbox-group-view__tooltip-container {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  margin-bottom: 6px;
+}
+.df-checkbox-group-view__tooltip-container:last-child {
+  margin-bottom: 0;
+}

package/build/cjs/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroupView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const common_1 = require("../../../constants/common");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('checkbox-group-view');
+const CheckboxGroupView = ({ spec, value = [] }) => {
+    var _a;
+    const _value = value;
+    const items = react_1.default.useMemo(() => _value.map((item) => { var _a; return ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[item]) || item; }), [spec.description, _value]);
+    const verticalPlacement = react_1.default.useMemo(() => { var _a; return ((_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement) === 'vertical'; }, [(_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement]);
+    return (react_1.default.createElement("div", { className: b({ vertical: verticalPlacement }) }, items.map((item, idx) => (react_1.default.createElement(uikit_1.Popover, { placement: common_1.COMMON_POPOVER_PLACEMENT, key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 },
+        item,
+        !verticalPlacement && idx !== items.length - 1 ? ', ' : null)))));
+};
+exports.CheckboxGroupView = CheckboxGroupView;

package/build/cjs/lib/kit/components/Views/CheckboxGroupView/index.js

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

package/build/cjs/lib/kit/components/Views/TimeRangeSelectorView/TimeRangeSelectorView.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeSelectorView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
+const core_1 = require("../../../../core");
+const common_1 = require("../../../constants/common");
+const TimeRangeSelectorView = (_a) => {
+    var { value, spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["value", "spec", "name", "Layout"]);
+    const { startTimeSpec, endTimeSpec } = react_1.default.useMemo(() => {
+        const [startTimeSpec, endTimeSpec] = [common_1.START_TIME, common_1.END_TIME].map((key) => {
+            var _a;
+            if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[key]) && (0, core_1.isStringSpec)(spec.properties[key])) {
+                const _spec = (0, cloneDeep_1.default)(spec.properties[key]);
+                _spec.viewSpec.layout = 'row';
+                return _spec;
+            }
+            return undefined;
+        });
+        return { startTimeSpec, endTimeSpec };
+    }, [spec.properties]);
+    if (!startTimeSpec || !endTimeSpec) {
+        return null;
+    }
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.ViewController, { spec: startTimeSpec, name: `${name ? name + '.' : ''}${common_1.START_TIME}` }),
+        react_1.default.createElement(core_1.ViewController, { spec: endTimeSpec, name: `${name ? name + '.' : ''}${common_1.END_TIME}` })));
+    if (Layout) {
+        return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name, value: value }, restProps), content));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
+};
+exports.TimeRangeSelectorView = TimeRangeSelectorView;

package/build/cjs/lib/kit/components/Views/TimeRangeSelectorView/index.js

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

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ArrayBaseView"), exports);
 tslib_1.__exportStar(require("./BaseView"), exports);
+tslib_1.__exportStar(require("./CheckboxGroupView"), exports);
 tslib_1.__exportStar(require("./CardOneOfView"), exports);
 tslib_1.__exportStar(require("./FileInputView"), exports);
 tslib_1.__exportStar(require("./MonacoInputView"), exports);
@@ -15,4 +16,5 @@ tslib_1.__exportStar(require("./OneOfView"), exports);
 tslib_1.__exportStar(require("./TableArrayView"), exports);
 tslib_1.__exportStar(require("./TextAreaView"), exports);
 tslib_1.__exportStar(require("./TextLinkView"), exports);
+tslib_1.__exportStar(require("./TimeRangeSelectorView"), exports);
 tslib_1.__exportStar(require("./DateView"), exports);

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OBJECT_VALUE_PROPERTY_NAME = exports.COMMON_TITLE_MAX_WIDTH = exports.COMMON_POPOVER_PLACEMENT = void 0;
+exports.END_TIME = exports.START_TIME = exports.OBJECT_VALUE_PROPERTY_NAME = exports.COMMON_TITLE_MAX_WIDTH = exports.COMMON_POPOVER_PLACEMENT = void 0;
 exports.COMMON_POPOVER_PLACEMENT = ['bottom', 'top'];
 exports.COMMON_TITLE_MAX_WIDTH = 533;
 exports.OBJECT_VALUE_PROPERTY_NAME = 'value';
+exports.START_TIME = 'start';
+exports.END_TIME = 'end';

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

@@ -9,6 +9,7 @@ exports.dynamicConfig = {
             select: { Component: components_1.MultiSelect },
             table: { Component: components_1.TableArrayInput },
             base: { Component: components_1.ArrayBase },
+            checkbox_group: { Component: components_1.CheckboxGroup },
         },
         layouts: {
             row: components_1.Row,
@@ -69,6 +70,7 @@ exports.dynamicConfig = {
             multi_oneof: { Component: components_1.MultiOneOf, independent: true },
             multi_oneof_flat: { Component: components_1.MultiOneOfFlat, independent: true },
             inline: { Component: components_1.ObjectInline, independent: true },
+            time_range_selector: { Component: components_1.TimeRangeSelector, independent: true },
         },
         layouts: {
             row: components_1.Row,
@@ -122,6 +124,7 @@ exports.dynamicViewConfig = {
             select: { Component: components_1.MultiSelectView },
             table: { Component: components_1.TableArrayView },
             base: { Component: components_1.ArrayBaseView },
+            checkbox_group: { Component: components_1.CheckboxGroupView },
         },
         layouts: {
             row: components_1.ViewRow,
@@ -173,6 +176,7 @@ exports.dynamicViewConfig = {
             multi_oneof: { Component: components_1.MultiOneOfView, independent: true },
             multi_oneof_flat: { Component: components_1.MultiOneOfFlatView, independent: true },
             inline: { Component: components_1.ObjectInlineView, independent: true },
+            time_range_selector: { Component: components_1.TimeRangeSelectorView, independent: true },
         },
         layouts: {
             row: components_1.ViewRow,

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

@@ -36,6 +36,10 @@ export interface ArraySpec<LinkType = any, InputComponentProps extends Record<st
         };
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
+        checkboxGroupParams?: {
+            placement?: 'horizontal' | 'vertical';
+            disabled?: Record<string, boolean>;
+        };
     };
 }
 export interface BooleanSpec<LinkType = any, InputComponentProps extends Record<string, any> | undefined = undefined, LayoutComponentProps extends Record<string, any> | undefined = undefined> {

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

@@ -0,0 +1,18 @@
+.df-checkbox-group {
+  display: flex;
+  align-items: center;
+  height: 28px;
+}
+.df-checkbox-group > *:not(:last-child) {
+  margin-right: 6px;
+}
+.df-checkbox-group_vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 8px;
+  height: auto;
+}
+.df-checkbox-group_vertical > *:not(:last-child) {
+  margin-right: 0px;
+  margin-bottom: 6px;
+}

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

@@ -0,0 +1,6 @@
+import { ArrayInput } from '../../../../core';
+import { type CheckboxProps as CheckboxBaseProps } from '@gravity-ui/uikit';
+import './CheckboxGroup.css';
+export interface CheckboxGroupProps extends Omit<CheckboxBaseProps, 'checked' | 'onChange' | 'onBlur' | 'onFocus' | 'disabled' | 'qa' | 'content'> {
+}
+export declare const CheckboxGroup: ArrayInput<CheckboxGroupProps>;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { transformArrIn, transformArrOut } from '../../../../core';
+import { Checkbox } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import './CheckboxGroup.css';
+const b = block('checkbox-group');
+export const CheckboxGroup = ({ name, input, spec, inputProps }) => {
+    var _a;
+    const { value, onBlur, onChange, onFocus } = input;
+    const _value = React.useMemo(() => transformArrOut(value), [value]);
+    const options = React.useMemo(() => {
+        var _a;
+        return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+            var _a;
+            return ({
+                value: id,
+                text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+            });
+        });
+    }, [spec.enum, spec.description]);
+    const handleUpdate = React.useCallback((optionValue, selected) => {
+        let newValue = _value || [];
+        if (selected) {
+            newValue.push(optionValue);
+        }
+        else {
+            newValue = newValue.filter((id) => id !== optionValue);
+        }
+        onChange(transformArrIn(newValue));
+    }, [_value, onChange]);
+    return (React.createElement("div", { className: b({ vertical: ((_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement) === 'vertical' }), "data-qa": name }, options === null || options === void 0 ? void 0 : options.map(({ value: optionValue, text }) => {
+        var _a, _b;
+        return (React.createElement(Checkbox, Object.assign({}, inputProps, { qa: name && `${name}-${optionValue}`, key: optionValue, checked: _value === null || _value === void 0 ? void 0 : _value.includes(optionValue), onUpdate: (selected) => handleUpdate(optionValue, selected), disabled: spec.viewSpec.disabled ||
+                ((_b = (_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.disabled) === null || _b === void 0 ? void 0 : _b[optionValue]), content: text, onBlur: onBlur, onFocus: onFocus })));
+    })));
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { ObjectIndependentInput } from '../../../../core';
+export declare const TimeRangeSelector: ObjectIndependentInput;

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+import isString from 'lodash/isString';
+import set from 'lodash/set';
+import { isStringSpec, } from '../../../../core';
+import { END_TIME, START_TIME } from '../../../constants/common';
+import { TimeRangeSelect } from './components';
+import { filterTimeArray, validateArray } from './utils';
+export const TimeRangeSelector = (props) => {
+    var _a, _b;
+    const { spec, input, name, Layout } = props;
+    const [startTimeSpec, endTimeSpec] = React.useMemo(() => [START_TIME, END_TIME].map((key) => {
+        var _a, _b;
+        return isStringSpec((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[key])
+            ? (_b = spec.properties) === null || _b === void 0 ? void 0 : _b[key]
+            : undefined;
+    }), [spec.properties]);
+    const { initialStartTimeOptions, initialEndTimeOptions, canBeFiltered } = React.useMemo(() => {
+        const [initialStartTimeOptions, initialEndTimeOptions] = [startTimeSpec, endTimeSpec].map((spec) => {
+            if (spec && spec.enum) {
+                return spec.enum.map((id) => {
+                    var _a, _b, _c, _d;
+                    return ({
+                        id,
+                        value: id,
+                        content: ((_b = (_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b[id]) ? (React.createElement("div", { key: id },
+                            React.createElement(Text, null, ((_c = spec.description) === null || _c === void 0 ? void 0 : _c[id]) || id),
+                            React.createElement(Text, { color: "secondary", as: "div" }, spec.viewSpec.selectParams.meta[id]))) : (((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                        key: id,
+                    });
+                });
+            }
+            return undefined;
+        });
+        const canBeFiltered = initialStartTimeOptions &&
+            initialEndTimeOptions &&
+            validateArray(initialStartTimeOptions) &&
+            validateArray(initialEndTimeOptions);
+        return {
+            initialStartTimeOptions,
+            initialEndTimeOptions,
+            canBeFiltered,
+        };
+    }, [endTimeSpec, startTimeSpec]);
+    const { startTimeOptions, endTimeOptions } = React.useMemo(() => {
+        let startTimeOptions = initialStartTimeOptions;
+        let endTimeOptions = initialEndTimeOptions;
+        [START_TIME, END_TIME].forEach((key) => {
+            var _a;
+            const time = (_a = input.value) === null || _a === void 0 ? void 0 : _a[key];
+            if (isString(time) &&
+                canBeFiltered &&
+                initialEndTimeOptions &&
+                initialStartTimeOptions) {
+                if (START_TIME === key) {
+                    endTimeOptions = filterTimeArray(initialEndTimeOptions, time, 'greater');
+                }
+                else {
+                    startTimeOptions = filterTimeArray(initialStartTimeOptions, time, 'less');
+                }
+            }
+        });
+        return { startTimeOptions, endTimeOptions };
+    }, [canBeFiltered, initialEndTimeOptions, initialStartTimeOptions, input.value]);
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input, name]);
+    if (!startTimeSpec || !endTimeSpec || !startTimeOptions || !endTimeOptions) {
+        return null;
+    }
+    const content = (React.createElement(React.Fragment, null,
+        React.createElement(TimeRangeSelect, { spec: startTimeSpec, name: `${name}.${START_TIME}`, options: startTimeOptions, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[START_TIME], handleChange: (value) => parentOnChange(START_TIME, value[0]), props: props }),
+        React.createElement(TimeRangeSelect, { spec: endTimeSpec, name: `${name}.${END_TIME}`, options: endTimeOptions, value: (_b = input.value) === null || _b === void 0 ? void 0 : _b[END_TIME], handleChange: (value) => parentOnChange(END_TIME, value[0]), props: props })));
+    if (Layout) {
+        return React.createElement(Layout, Object.assign({}, props), content);
+    }
+    return React.createElement(React.Fragment, null, content);
+};

package/build/esm/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.css

@@ -0,0 +1,6 @@
+.df-time-range-select__select {
+  min-width: 100px;
+}
+.df-time-range-select__select-popup {
+  max-height: 250px;
+}

package/build/esm/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type SelectOption } from '@gravity-ui/uikit';
+import { FieldObjectValue, FieldValue, IndependentInputProps, ObjectSpec, StringSpec } from '../../../../../../core';
+import './TimeRangeSelect.css';
+interface TimeRangeSelectProps {
+    spec: StringSpec<any, undefined, undefined>;
+    name: string;
+    options: SelectOption<string>[];
+    value?: FieldValue;
+    handleChange: (value: string[]) => void;
+    props: IndependentInputProps<FieldObjectValue, undefined, undefined, ObjectSpec<undefined, undefined, undefined>>;
+}
+export declare const TimeRangeSelect: React.FC<TimeRangeSelectProps>;
+export {};

package/build/esm/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import isString from 'lodash/isString';
+import { Select } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import { Row } from '../../../../Layouts/Row';
+import './TimeRangeSelect.css';
+const b = block('time-range-select');
+export const TimeRangeSelect = ({ name, spec, options, value, props, handleChange, }) => {
+    var _a, _b;
+    const filterable = React.useMemo(() => ((options === null || options === void 0 ? void 0 : options.length) || 0) > 9, [options === null || options === void 0 ? void 0 : options.length]);
+    const _value = React.useMemo(() => {
+        if (isString(value)) {
+            return [value];
+        }
+        return undefined;
+    }, [value]);
+    const renderOption = React.useCallback((option) => {
+        return React.createElement(React.Fragment, { key: option.value }, option.content || option.value);
+    }, []);
+    const getOptionHeight = React.useCallback(() => {
+        var _a;
+        if ((_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) {
+            return 44;
+        }
+        return 28;
+    }, [(_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta]);
+    return (React.createElement(Row, Object.assign({}, Object.assign(Object.assign({}, props), { spec })),
+        React.createElement(Select, { className: b('select'), filterable: filterable, value: _value, options: options, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterPlaceholder: (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.filterPlaceholder, renderOption: renderOption, getOptionHeight: getOptionHeight, qa: name, popupClassName: b('select-popup') })));
+};

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

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

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

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

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

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

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

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

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

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

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

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

package/build/esm/lib/kit/components/Inputs/TimeRangeSelector/utils.d.ts

@@ -0,0 +1,15 @@
+export declare const filterTimeArray: (times: {
+    id: string;
+    value: string;
+    content: string | JSX.Element;
+    key: string;
+}[], cutoff: string, direction: 'greater' | 'less') => {
+    content: string | JSX.Element;
+    disabled: boolean;
+    id: string;
+    value: string;
+    key: string;
+}[];
+export declare const validateArray: (arr: {
+    value: string;
+}[]) => boolean;

package/build/esm/lib/kit/components/Inputs/TimeRangeSelector/utils.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+export const filterTimeArray = (times, cutoff, direction) => {
+    const isTimeFormat = (value) => /^\d{1,2}:\d{2}$/.test(value);
+    const compareValues = (a, b) => {
+        if (isTimeFormat(a) && isTimeFormat(b)) {
+            return direction === 'less' ? a >= b : a <= b;
+        }
+        else {
+            const aNum = parseInt(a, 10);
+            const bNum = parseInt(b, 10);
+            return direction === 'less' ? aNum >= bNum : aNum <= bNum;
+        }
+    };
+    return times.map((time) => {
+        const disabled = compareValues(time.value, cutoff);
+        return Object.assign(Object.assign({}, time), { content: disabled ? React.createElement(Text, { color: "secondary" }, time.content) : time.content, disabled });
+    });
+};
+export const validateArray = (arr) => arr.every((obj) => /^(\d+|\d{1,2}:\d{1,2})$/.test(obj.value));

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

@@ -1,6 +1,7 @@
 export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
+export * from './CheckboxGroup';
 export * from './FileInput';
 export * from './DateInput';
 export * from './MonacoInput';
@@ -18,3 +19,4 @@ export * from './Text';
 export * from './TextArea';
 export * from './TextContent';
 export * from './TextLink';
+export * from './TimeRangeSelector';

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

@@ -1,6 +1,7 @@
 export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
+export * from './CheckboxGroup';
 export * from './FileInput';
 export * from './DateInput';
 export * from './MonacoInput';
@@ -18,3 +19,4 @@ export * from './Text';
 export * from './TextArea';
 export * from './TextContent';
 export * from './TextLink';
+export * from './TimeRangeSelector';

package/build/esm/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.css

@@ -0,0 +1,27 @@
+.df-checkbox-group-view {
+  display: flex;
+}
+.df-checkbox-group-view > *:not(:last-child) {
+  margin-right: 6px;
+}
+.df-checkbox-group-view_vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.df-checkbox-group-view_vertical > *:not(:last-child) {
+  margin-right: 0px;
+  margin-bottom: 6px;
+}
+.df-checkbox-group-view__tooltip {
+  overflow-wrap: break-word;
+}
+.df-checkbox-group-view__tooltip-container {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  margin-bottom: 6px;
+}
+.df-checkbox-group-view__tooltip-container:last-child {
+  margin-bottom: 0;
+}

package/build/esm/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.d.ts

@@ -0,0 +1,3 @@
+import { ArrayView } from '../../../../core';
+import './CheckboxGroupView.css';
+export declare const CheckboxGroupView: ArrayView;

package/build/esm/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Popover } from '@gravity-ui/uikit';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
+import { block } from '../../../utils';
+import './CheckboxGroupView.css';
+const b = block('checkbox-group-view');
+export const CheckboxGroupView = ({ spec, value = [] }) => {
+    var _a;
+    const _value = value;
+    const items = React.useMemo(() => _value.map((item) => { var _a; return ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[item]) || item; }), [spec.description, _value]);
+    const verticalPlacement = React.useMemo(() => { var _a; return ((_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement) === 'vertical'; }, [(_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement]);
+    return (React.createElement("div", { className: b({ vertical: verticalPlacement }) }, items.map((item, idx) => (React.createElement(Popover, { placement: COMMON_POPOVER_PLACEMENT, key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 },
+        item,
+        !verticalPlacement && idx !== items.length - 1 ? ', ' : null)))));
+};

package/build/esm/lib/kit/components/Views/CheckboxGroupView/index.d.ts

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

package/build/esm/lib/kit/components/Views/CheckboxGroupView/index.js

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

package/build/esm/lib/kit/components/Views/TimeRangeSelectorView/TimeRangeSelectorView.d.ts

@@ -0,0 +1,2 @@
+import { ObjectIndependentView } from '../../../../core';
+export declare const TimeRangeSelectorView: ObjectIndependentView;

package/build/esm/lib/kit/components/Views/TimeRangeSelectorView/TimeRangeSelectorView.js

@@ -0,0 +1,30 @@
+import { __rest } from "tslib";
+import React from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import { ViewController, isStringSpec } from '../../../../core';
+import { END_TIME, START_TIME } from '../../../constants/common';
+export const TimeRangeSelectorView = (_a) => {
+    var { value, spec, name, Layout } = _a, restProps = __rest(_a, ["value", "spec", "name", "Layout"]);
+    const { startTimeSpec, endTimeSpec } = React.useMemo(() => {
+        const [startTimeSpec, endTimeSpec] = [START_TIME, END_TIME].map((key) => {
+            var _a;
+            if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[key]) && isStringSpec(spec.properties[key])) {
+                const _spec = cloneDeep(spec.properties[key]);
+                _spec.viewSpec.layout = 'row';
+                return _spec;
+            }
+            return undefined;
+        });
+        return { startTimeSpec, endTimeSpec };
+    }, [spec.properties]);
+    if (!startTimeSpec || !endTimeSpec) {
+        return null;
+    }
+    const content = (React.createElement(React.Fragment, null,
+        React.createElement(ViewController, { spec: startTimeSpec, name: `${name ? name + '.' : ''}${START_TIME}` }),
+        React.createElement(ViewController, { spec: endTimeSpec, name: `${name ? name + '.' : ''}${END_TIME}` })));
+    if (Layout) {
+        return (React.createElement(Layout, Object.assign({ spec: spec, name: name, value: value }, restProps), content));
+    }
+    return React.createElement(React.Fragment, null, content);
+};

package/build/esm/lib/kit/components/Views/TimeRangeSelectorView/index.d.ts

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

package/build/esm/lib/kit/components/Views/TimeRangeSelectorView/index.js

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

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

@@ -1,5 +1,6 @@
 export * from './ArrayBaseView';
 export * from './BaseView';
+export * from './CheckboxGroupView';
 export * from './CardOneOfView';
 export * from './FileInputView';
 export * from './MonacoInputView';
@@ -12,4 +13,5 @@ export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
 export * from './TextLinkView';
+export * from './TimeRangeSelectorView';
 export * from './DateView';

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

@@ -1,5 +1,6 @@
 export * from './ArrayBaseView';
 export * from './BaseView';
+export * from './CheckboxGroupView';
 export * from './CardOneOfView';
 export * from './FileInputView';
 export * from './MonacoInputView';
@@ -12,4 +13,5 @@ export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
 export * from './TextLinkView';
+export * from './TimeRangeSelectorView';
 export * from './DateView';

package/build/esm/lib/kit/constants/common.d.ts

@@ -2,3 +2,5 @@ import type { PopoverProps } from '@gravity-ui/uikit';
 export declare const COMMON_POPOVER_PLACEMENT: PopoverProps['placement'];
 export declare const COMMON_TITLE_MAX_WIDTH = 533;
 export declare const OBJECT_VALUE_PROPERTY_NAME = "value";
+export declare const START_TIME = "start";
+export declare const END_TIME = "end";

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

@@ -1,3 +1,5 @@
 export const COMMON_POPOVER_PLACEMENT = ['bottom', 'top'];
 export const COMMON_TITLE_MAX_WIDTH = 533;
 export const OBJECT_VALUE_PROPERTY_NAME = 'value';
+export const START_TIME = 'start';
+export const END_TIME = 'end';

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

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, 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, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, 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, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -6,6 +6,7 @@ export const dynamicConfig = {
             select: { Component: MultiSelect },
             table: { Component: TableArrayInput },
             base: { Component: ArrayBase },
+            checkbox_group: { Component: CheckboxGroup },
         },
         layouts: {
             row: Row,
@@ -66,6 +67,7 @@ export const dynamicConfig = {
             multi_oneof: { Component: MultiOneOf, independent: true },
             multi_oneof_flat: { Component: MultiOneOfFlat, independent: true },
             inline: { Component: ObjectInline, independent: true },
+            time_range_selector: { Component: TimeRangeSelector, independent: true },
         },
         layouts: {
             row: Row,
@@ -119,6 +121,7 @@ export const dynamicViewConfig = {
             select: { Component: MultiSelectView },
             table: { Component: TableArrayView },
             base: { Component: ArrayBaseView },
+            checkbox_group: { Component: CheckboxGroupView },
         },
         layouts: {
             row: ViewRow,
@@ -170,6 +173,7 @@ export const dynamicViewConfig = {
             multi_oneof: { Component: MultiOneOfView, independent: true },
             multi_oneof_flat: { Component: MultiOneOfFlatView, independent: true },
             inline: { Component: ObjectInlineView, independent: true },
+            time_range_selector: { Component: TimeRangeSelectorView, independent: true },
         },
         layouts: {
             row: ViewRow,

package/package.json

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