@gravity-ui/dynamic-forms 4.5.0 → 4.7.0

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,
@@ -94,6 +96,7 @@ exports.dynamicConfig = {
             select: { Component: components_1.Select },
             base: { Component: components_1.Text },
             file_input: { Component: components_1.FileInput },
+            date_input: { Component: components_1.DateInput },
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInput },
             text_content: { Component: components_1.TextContent, independent: true },
@@ -121,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,
@@ -172,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,
@@ -193,6 +198,7 @@ exports.dynamicViewConfig = {
             textarea: { Component: components_1.TextAreaView },
             select: { Component: components_1.BaseView },
             base: { Component: components_1.BaseView },
+            date_input: { Component: components_1.DateView },
             file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },

package/build/esm/lib/core/components/View/DynamicView.d.ts

@@ -11,5 +11,6 @@ export interface DynamicViewProps {
         link: Spec['viewSpec']['link'];
     }>;
     Monaco?: React.ComponentType<MonacoEditorProps>;
+    showLayoutDescription?: boolean;
 }
-export declare const DynamicView: ({ value, spec, config, Link, Monaco }: DynamicViewProps) => JSX.Element | null;
+export declare const DynamicView: ({ value, spec, config, Link, Monaco, showLayoutDescription, }: DynamicViewProps) => JSX.Element | null;

package/build/esm/lib/core/components/View/DynamicView.js

@@ -4,9 +4,15 @@ import { isCorrectSpec } from '../../helpers';
 import { ViewController } from './ViewController';
 import { isCorrectViewConfig } from './helpers';
 import { useCreateContext } from './hooks';
-export const DynamicView = ({ value, spec, config, Link, Monaco }) => {
+export const DynamicView = ({ value, spec, config, Link, Monaco, showLayoutDescription, }) => {
     const DynamicFormsCtx = useCreateContext();
-    const context = React.useMemo(() => ({ config, value, Link, Monaco: isValidElementType(Monaco) ? Monaco : undefined }), [config, value, Link, Monaco]);
+    const context = React.useMemo(() => ({
+        config,
+        value,
+        showLayoutDescription,
+        Link,
+        Monaco: isValidElementType(Monaco) ? Monaco : undefined,
+    }), [config, value, Link, Monaco, showLayoutDescription]);
     if (isCorrectSpec(spec) && isCorrectViewConfig(config)) {
         return (React.createElement(DynamicFormsCtx.Provider, { value: context },
             React.createElement(ViewController, { spec: spec, name: "" })));

package/build/esm/lib/core/components/View/index.d.ts

@@ -2,3 +2,4 @@ export * from './DynamicView';
 export * from './ViewController';
 export * from './helpers';
 export * from './types';
+export { useDynamicFormsCtx } from './hooks';

package/build/esm/lib/core/components/View/index.js

@@ -2,3 +2,4 @@ export * from './DynamicView';
 export * from './ViewController';
 export * from './helpers';
 export * from './types';
+export { useDynamicFormsCtx } from './hooks';

package/build/esm/lib/core/components/View/types/context.d.ts

@@ -5,6 +5,7 @@ import { DynamicViewConfig } from './';
 export interface DynamicViewContext {
     config: DynamicViewConfig;
     value: FormValue;
+    showLayoutDescription?: boolean;
     Link?: React.ComponentType<{
         value: FormValue;
         link: Spec['viewSpec']['link'];

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

@@ -24,6 +24,7 @@ export interface ArraySpec<LinkType = any, InputComponentProps extends Record<st
         table?: {
             label: string;
             property: string;
+            description?: string;
         }[];
         link?: LinkType;
         placeholder?: string;
@@ -35,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> {
@@ -150,6 +155,10 @@ export interface StringSpec<LinkType = any, InputComponentProps extends Record<s
             readAsMethod?: ReadAsMethod;
             ignoreText?: boolean;
         };
+        dateInput?: {
+            outputFormat?: string;
+            printFormat?: string;
+        };
         copy?: boolean;
         selectParams?: {
             filterPlaceholder?: string;

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/DateInput/DateInput.css

@@ -0,0 +1,3 @@
+.df-date-input {
+  width: 100%;
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DatePickerProps } from '@gravity-ui/date-components';
+import { StringInputProps } from '../../../../core';
+import './DateInput.css';
+export declare const DEFAULT_DATE_FORMAT = "DD-MM-YYYY";
+export interface DateProps extends Omit<DatePickerProps, 'value' | 'disabled' | 'placeholder' | 'qa'> {
+}
+export declare const DateInput: React.FC<StringInputProps<DateProps>>;
+export default DateInput;

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

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { DatePicker } from '@gravity-ui/date-components';
+import { dateTimeParse } from '@gravity-ui/date-utils';
+import { block } from '../../../utils';
+import './DateInput.css';
+export const DEFAULT_DATE_FORMAT = 'DD-MM-YYYY';
+const b = block('date-input');
+export const DateInput = ({ name, input, spec, inputProps, }) => {
+    const { value, onChange, onBlur, onFocus } = input;
+    const dateInput = spec.viewSpec.dateInput;
+    const outputFormat = dateInput === null || dateInput === void 0 ? void 0 : dateInput.outputFormat;
+    const onUpdate = useCallback((date) => {
+        if (!date) {
+            onChange(undefined);
+        }
+        else {
+            switch (outputFormat) {
+                case 'date_time':
+                    onChange(date);
+                    break;
+                case 'date':
+                    onChange(date.toDate());
+                    break;
+                case 'timestamp':
+                    onChange({
+                        seconds: Math.floor((date === null || date === void 0 ? void 0 : date.toDate().getTime()) / 1000),
+                        nanos: 0,
+                    });
+                    break;
+                case 'string':
+                case undefined:
+                case '':
+                    onChange(date.toISOString());
+                    break;
+                default:
+                    onChange(date.format(outputFormat));
+                    break;
+            }
+        }
+    }, [outputFormat]);
+    const props = Object.assign(Object.assign({ hasClear: true, format: (dateInput === null || dateInput === void 0 ? void 0 : dateInput.printFormat) || DEFAULT_DATE_FORMAT }, inputProps), { onBlur: onBlur, onFocus: onFocus, value: value
+            ? dateTimeParse(value.seconds ? value.seconds * 1000 : value) || null
+            : null, onUpdate, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder });
+    return React.createElement(DatePicker, Object.assign({ className: b(), "data-qa": name }, props));
+};
+export default DateInput;

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

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

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

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Plus, TrashBin } from '@gravity-ui/icons';
-import { Button, Icon, Table } from '@gravity-ui/uikit';
+import { Button, Flex, Icon, Table } from '@gravity-ui/uikit';
+import { HelpPopover } from '@gravity-ui/components';
 import noop from 'lodash/noop';
 import set from 'lodash/set';
 import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isArraySpec, isBooleanSpec, isObjectSpec, transformArrIn, } from '../../../../core';
@@ -42,9 +43,13 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             template: ({ key }) => (React.createElement(Button, { view: "flat-secondary", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
                 React.createElement(Icon, { data: TrashBin, size: 16 }))),
         };
-        const columns = table.map(({ property, label }) => ({
+        const columns = table.map(({ property, label, description }) => ({
             id: property,
-            name: label,
+            name: !description
+                ? label
+                : () => (React.createElement(Flex, { gap: 0.5, alignItems: "center" },
+                    label,
+                    React.createElement(HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] }))),
             template: ({ key, }, idx) => {
                 var _a, _b, _c;
                 const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];

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,7 +1,9 @@
 export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
+export * from './CheckboxGroup';
 export * from './FileInput';
+export * from './DateInput';
 export * from './MonacoInput';
 export * from './MultiOneOf';
 export * from './MultiSelect';
@@ -17,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,7 +1,9 @@
 export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
+export * from './CheckboxGroup';
 export * from './FileInput';
+export * from './DateInput';
 export * from './MonacoInput';
 export * from './MultiOneOf';
 export * from './MultiSelect';
@@ -17,3 +19,4 @@ export * from './Text';
 export * from './TextArea';
 export * from './TextContent';
 export * from './TextLink';
+export * from './TimeRangeSelector';

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import isBoolean from 'lodash/isBoolean';
+import { useDynamicFormsCtx } from '../../../../core';
 import { isNotEmptyValue } from '../../../utils';
 import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
 export const ViewAccordeon = ({ name, value, spec, children, }) => {
+    const { showLayoutDescription } = useDynamicFormsCtx();
     const [open, setOpen] = React.useState(isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
+    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: showLayoutDescription && spec.viewSpec.layoutDescription
+            ? spec.viewSpec.layoutDescription
+            : undefined, open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
 };

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -14,6 +14,9 @@
   align-items: baseline;
   overflow: hidden;
 }
+.df-view-row__note {
+  margin-inline-start: var(--g-spacing-half);
+}
 .df-view-row__dots {
   min-width: 40px;
   flex-grow: 1;

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import { Text } from '@gravity-ui/uikit';
+import { HelpPopover } from '@gravity-ui/components';
+import { useDynamicFormsCtx } from '../../../../core';
 import { CopyButton } from '../../../../kit';
 import { block, isNotEmptyValue } from '../../../utils';
 import './ViewRow.css';
 const b = block('view-row');
 export const ViewRow = ({ value, spec, children, }) => {
+    const { showLayoutDescription } = useDynamicFormsCtx();
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
             React.createElement(Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
+            showLayoutDescription && spec.viewSpec.layoutDescription ? (React.createElement(HelpPopover, { className: b('note'), htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })) : null,
             React.createElement("div", { className: b('dots') })),
         React.createElement("div", { className: b('right') }, children),
         React.createElement(CopyButton, { spec: spec, value: value })));

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/DateView/DateView.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { StringViewProps } from '../../../../core';
+export declare const DateView: React.FC<StringViewProps>;