@gravity-ui/dynamic-forms 1.0.0 → 1.0.1

package/build/esm/lib/kit/components/AccordeonCard/AccordeonCard.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './AccordeonCard.css';
+export interface AccordeonCardProps {
+    children: React.ReactNode;
+    header: React.ReactNode;
+    description?: string;
+    className?: string;
+    open?: boolean;
+    onToggle?: (value: boolean) => void;
+    headerActionsTemplate?: React.ReactNode;
+    ignoreHeaderToggle?: boolean;
+    titleSize?: 's' | 'm';
+    alwaysOpen?: boolean;
+}
+export declare const AccordeonCard: React.FC<AccordeonCardProps>;

package/build/esm/lib/kit/components/AccordeonCard/AccordeonCard.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ChevronDown } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { block } from '../../utils';
+import './AccordeonCard.css';
+const b = block('accordeon-card');
+export const AccordeonCard = ({ className, header, description, open: propsOpen, onToggle, headerActionsTemplate, ignoreHeaderToggle, titleSize = 'm', alwaysOpen, children, }) => {
+    const accordeonRef = React.useRef(null);
+    const bodyRef = React.useRef(null);
+    const [open, setOpen] = React.useState(alwaysOpen || propsOpen || false);
+    const handleToggle = React.useCallback(() => {
+        setOpen(!open);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+    }, [open, setOpen, onToggle]);
+    const preventEvent = React.useCallback((e) => e.stopPropagation(), []);
+    const emptyBody = bodyRef.current && !bodyRef.current.childElementCount;
+    React.useEffect(() => {
+        if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) {
+            setOpen(propsOpen);
+        }
+    }, [propsOpen]);
+    React.useEffect(() => {
+        if (bodyRef.current &&
+            !bodyRef.current.childElementCount &&
+            accordeonRef.current &&
+            !accordeonRef.current.className.includes('df-accordeon-card_empty')) {
+            accordeonRef.current.classList.add('df-accordeon-card_empty');
+        }
+    });
+    return (React.createElement("div", { ref: accordeonRef, className: b({ empty: Boolean(emptyBody) }, className) },
+        React.createElement("div", { className: b('header', {
+                open: open && !emptyBody,
+                'without-action': ignoreHeaderToggle || alwaysOpen,
+            }), onClick: !ignoreHeaderToggle && !alwaysOpen ? handleToggle : undefined },
+            React.createElement("div", { className: b('header-content') },
+                React.createElement("span", { className: _.isString(header)
+                        ? b('header-content-title', { size: titleSize })
+                        : undefined }, header),
+                description ? (React.createElement("span", { className: b('header-content-description'), dangerouslySetInnerHTML: { __html: description } })) : null),
+            !emptyBody && !alwaysOpen ? (React.createElement("div", { className: b('header-toggle-btn'), onClick: preventEvent },
+                headerActionsTemplate ? (React.createElement("div", { className: b('interal-actions') }, headerActionsTemplate)) : null,
+                React.createElement(Button, { view: "flat", onClick: handleToggle },
+                    React.createElement(Icon, { className: b('toggle-icon', { open }), data: ChevronDown, size: 16 })))) : null),
+        React.createElement("div", { ref: bodyRef, className: b('body', { open: open && !emptyBody }) }, children)));
+};

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

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

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

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

package/build/esm/lib/kit/components/Card/Card.css

@@ -0,0 +1,72 @@
+.df-card {
+  margin-bottom: 20px;
+}
+.df-card:last-child {
+  margin-bottom: 0;
+}
+.df-card .df-row {
+  width: 100%;
+  max-width: unset;
+}
+.df-card .df-row .df-select,
+.df-card .df-row .df-multi-select,
+.df-card .df-row .df-transparent_array-item {
+  max-width: unset;
+}
+.df-card .df-monaco-input,
+.df-card .df-monaco-base-view {
+  width: 100%;
+}
+.df-card_empty-body .df-card__header {
+  cursor: default;
+}
+.df-card_empty-body .df-card__header-right {
+  display: none;
+}
+.df-card_empty-body .df-card__body {
+  display: none;
+}
+.df-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+}
+.df-card__header_interactive {
+  cursor: pointer;
+}
+.df-card__header-left {
+  display: flex;
+  align-items: center;
+}
+.df-card__header-right {
+  display: flex;
+  align-items: center;
+}
+.df-card__header-right > * {
+  margin-left: 5px;
+}
+.df-card__title {
+  font-size: var(--yc-text-subheader-2-font-size);
+  font-weight: var(--yc-text-subheader-font-weight);
+  line-height: var(--yc-text-subheader-2-line-height);
+}
+.df-card__note {
+  margin-left: 5px;
+}
+.df-card__note .yc-help-popover {
+  display: flex;
+}
+.df-card__note .yc-help-popover > span {
+  display: flex;
+}
+.df-card__toggler-icon_open {
+  transform: rotate(180deg);
+}
+.df-card__body {
+  display: none;
+  padding: 0 20px 20px;
+}
+.df-card__body_open {
+  display: block;
+}

package/build/esm/lib/kit/components/Card/Card.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './Card.css';
+export interface CardProps {
+    children: React.ReactNode;
+    title?: string | React.ReactNode;
+    description?: string;
+    actions?: React.ReactNode;
+    open?: boolean;
+    onToggle?: (value: boolean) => void;
+    alwaysOpen?: boolean;
+    disableHeaderToggle?: boolean;
+    checkEmptyBody?: boolean;
+}
+export declare const Card: React.FC<CardProps>;

package/build/esm/lib/kit/components/Card/Card.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ChevronDown } from '@gravity-ui/icons';
+import { Button, Card as CardBase, HelpPopover, Icon } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { block } from '../../utils';
+import './Card.css';
+const b = block('card');
+export const Card = ({ title: propsTitle, description, actions, open: propsOpen, onToggle, alwaysOpen, disableHeaderToggle, checkEmptyBody, children, }) => {
+    const containerRef = React.useRef(null);
+    const bodyRef = React.useRef(null);
+    const [open, setOpen] = React.useState(alwaysOpen || propsOpen || false);
+    const emptyBody = Boolean(bodyRef.current && !bodyRef.current.childElementCount);
+    const handleToggle = React.useMemo(() => {
+        if (!alwaysOpen) {
+            return () => {
+                setOpen(!open);
+                onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+            };
+        }
+        return;
+    }, [alwaysOpen, open, setOpen, onToggle]);
+    const handleHeaderToggle = React.useMemo(() => {
+        if (!disableHeaderToggle && handleToggle) {
+            return handleToggle;
+        }
+        return;
+    }, [disableHeaderToggle, handleToggle]);
+    const preventEvent = React.useCallback((e) => e.stopPropagation(), []);
+    const title = React.useMemo(() => {
+        if (_.isString(propsTitle)) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: b('title') }, propsTitle),
+                description ? (React.createElement("div", { className: b('note') },
+                    React.createElement(HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] }))) : null));
+        }
+        return propsTitle;
+    }, [propsTitle, description]);
+    React.useEffect(() => {
+        if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) {
+            setOpen(propsOpen);
+        }
+    }, [propsOpen]);
+    React.useEffect(() => {
+        if (checkEmptyBody &&
+            bodyRef.current &&
+            !bodyRef.current.childElementCount &&
+            containerRef.current &&
+            !containerRef.current.className.includes('df-card_empty-body')) {
+            containerRef.current.classList.add('df-card_empty-body');
+        }
+    });
+    return (React.createElement(CardBase, { ref: containerRef, className: b({ 'empty-body': emptyBody }), type: "container", theme: "normal" },
+        React.createElement("div", { className: b('header', { interactive: Boolean(handleHeaderToggle) }), onClick: handleHeaderToggle },
+            React.createElement("div", { className: b('header-left') }, title),
+            React.createElement("div", { className: b('header-right'), onClick: preventEvent },
+                actions ? React.createElement("div", { className: b('actions') }, actions) : null,
+                alwaysOpen ? null : (React.createElement("div", { className: b('toggler') },
+                    React.createElement(Button, { view: "flat", onClick: handleToggle },
+                        React.createElement(Icon, { className: b('toggler-icon', { open }), data: ChevronDown, size: 16 })))))),
+        React.createElement("div", { ref: bodyRef, className: b('body', { open }) }, children)));
+};

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

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

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

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

package/build/esm/lib/kit/components/ErrorWrapper/ErrorWrapper.css

@@ -0,0 +1,23 @@
+.df-error-wrapper {
+  width: 100%;
+}
+.df-error-wrapper_error .yc-select-control:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select-control:focus:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select-control.yc-select-control_focused:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select-control.yc-select-control_focused:hover:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .yc-select:focus:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .g-select:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .g-select:focus:not(.df-error-wrapper-ignore),
+.df-error-wrapper_error .g-select:not(.df-error-wrapper-ignore) .g-select-control::before,
+.df-error-wrapper_error .g-select:hover:not(.df-error-wrapper-ignore) .g-select-control_open::before,
+.df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__control,
+.df-error-wrapper_error .yc-checkbox__indicator:not(.df-error-wrapper-ignore)::before {
+  border-color: var(--yc-color-text-danger);
+}
+.df-error-wrapper__error-text {
+  color: var(--yc-color-text-danger);
+  margin-top: 2px;
+  font-size: var(--yc-text-body-font-size);
+  line-height: var(--yc-text-body-line-height);
+}

package/build/esm/lib/kit/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FieldRenderProps, FieldValue } from '../../../core';
+import './ErrorWrapper.css';
+export interface ErrorWrapperProps {
+    children: React.ReactNode;
+    name: string;
+    meta: FieldRenderProps<FieldValue>['meta'];
+    withoutChildErrorStyles?: boolean;
+}
+export declare const ErrorWrapper: React.FC<ErrorWrapperProps>;

package/build/esm/lib/kit/components/ErrorWrapper/ErrorWrapper.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { block } from '../../utils';
+import './ErrorWrapper.css';
+const b = block('error-wrapper');
+export const ErrorWrapper = ({ name, meta, withoutChildErrorStyles, children, }) => {
+    const error = React.useMemo(() => {
+        if ((meta.touched || meta.submitFailed) && meta.error) {
+            return meta.error;
+        }
+        return;
+    }, [meta.touched, meta.submitFailed, meta.error]);
+    const props = React.useMemo(() => (meta.error ? { 'data-form-error': true, 'data-form-error-name': name } : {}), [meta.error, name]);
+    return (React.createElement("span", Object.assign({ className: b({ error: !withoutChildErrorStyles && Boolean(error) }) }, props),
+        children,
+        error && typeof error === 'string' ? (React.createElement("div", { className: b('error-text') }, error)) : null));
+};

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

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

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

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

package/build/esm/lib/kit/components/GroupIndent/GroupIndent.css

@@ -0,0 +1,17 @@
+.df-group-indent {
+  padding-top: 11px;
+  padding-left: 20px;
+  margin-top: -11px;
+  margin-bottom: 20px;
+  margin-left: 5px;
+  border-left: 1px solid var(--yc-color-line-generic-accent);
+}
+.df-group-indent:last-child {
+  margin-bottom: 0;
+}
+.df-group-indent:empty {
+  display: none;
+}
+.df-group-indent > .df-simple-vertical-accordeon_view {
+  margin-top: -10px;
+}

package/build/esm/lib/kit/components/GroupIndent/GroupIndent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './GroupIndent.css';
+export interface GroupIndentProps {
+    children: React.ReactNode;
+}
+export declare const GroupIndent: React.FC<GroupIndentProps>;

package/build/esm/lib/kit/components/GroupIndent/GroupIndent.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { block } from '../../utils';
+import './GroupIndent.css';
+const b = block('group-indent');
+export const GroupIndent = ({ children }) => (React.createElement("div", { className: b() }, children));

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

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

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

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

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

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

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Plus } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM, isArraySpec, isCorrectSpec, isObjectSpec, transformArrIn, } from '../../../../core';
+export const ArrayBase = ({ spec, name, arrayInput, input }) => {
+    const keys = React.useMemo(() => Object.keys(arrayInput.value || {})
+        .filter((k) => k !== OBJECT_ARRAY_FLAG &&
+        k !== OBJECT_ARRAY_CNT &&
+        arrayInput.value[k] !== REMOVED_ITEM)
+        .map((k) => k.split('<').join('').split('>').join(''))
+        .sort((a, b) => Number(a) - Number(b)), [arrayInput.value]);
+    const itemSpecCorrect = React.useMemo(() => isCorrectSpec(spec.items), [spec.items]);
+    const onItemAdd = React.useCallback(() => {
+        var _a;
+        let item;
+        if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
+            if (isArraySpec(spec.items)) {
+                item = { OBJECT_ARRAY_FLAG: true, OBJECT_ARRAY_CNT: 0 };
+            }
+            else if (isObjectSpec(spec.items)) {
+                item = {};
+            }
+        }
+        arrayInput.onItemAdd(item);
+    }, [arrayInput.onItemAdd, spec.items]);
+    const getItemSpec = React.useCallback((idx) => {
+        if (!itemSpecCorrect) {
+            return null;
+        }
+        const itemSpec = Object.assign({}, spec.items);
+        itemSpec.viewSpec = Object.assign(Object.assign({}, itemSpec.viewSpec), { layoutTitle: itemSpec.viewSpec.layoutTitle
+                ? `${itemSpec.viewSpec.layoutTitle} ${idx + 1}`
+                : `${idx + 1}` });
+        return itemSpec;
+    }, [spec.items, itemSpecCorrect]);
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const items = React.useMemo(() => keys.map((key, idx) => {
+        var _a;
+        const itemSpec = getItemSpec(idx);
+        if (!itemSpec) {
+            return null;
+        }
+        return (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
+    }), [keys.join(''), name, getItemSpec, parentOnChange, input.value]);
+    if (!itemSpecCorrect) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        items,
+        !arrayInput.value && spec.defaultValue ? (React.createElement(Button, { onClick: () => input.onChange(transformArrIn(spec.defaultValue)), disabled: spec.viewSpec.disabled },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            spec.viewSpec.layoutTitle || null)) : (React.createElement(Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            spec.viewSpec.itemLabel || null))));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import _ from 'lodash';
+import { Card } from '../../';
+import { Controller, isArrayItem, } from '../../../../core';
+import { useErrorChecker, useOneOf } from '../../../hooks';
+import { Row } from '../../Layouts';
+import { RemoveButton } from '../../Layouts/Accordeon/RemoveButton';
+export const CardOneOf = (props) => {
+    var _a;
+    const { input, meta, spec, name } = props;
+    const [open, setOpen] = React.useState(true);
+    const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const onOpen = React.useCallback(() => setOpen(true), [setOpen]);
+    const { oneOfValue, specProperties, togglerInput } = useOneOf({
+        props,
+        onTogglerChange: onOpen,
+    });
+    const toggler = React.useMemo(() => (React.createElement(Row, Object.assign({}, props, { name: "__stub-name" }), togglerInput)), [togglerInput, props]);
+    const actions = React.useMemo(() => {
+        if (isArrayItem(name)) {
+            return React.createElement(RemoveButton, { onDrop: input.onDrop });
+        }
+        return;
+    }, [name, input.onDrop]);
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => {
+        const value = _.set({}, childName.split(`${input.name}.`).join(''), childValue);
+        input.onChange(value, childErrors);
+    }, [input.onChange, input.name]);
+    useErrorChecker({ name, meta, open, setOpen });
+    return (React.createElement(Card, { title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, key: `${name}.${oneOfValue}` })) : null));
+};

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

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

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

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

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

@@ -0,0 +1,5 @@
+.df-checkbox {
+  height: 28px;
+  display: flex;
+  align-items: center;
+}

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Checkbox as CheckboxBase } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import './Checkbox.css';
+const b = block('checkbox');
+export const Checkbox = ({ input, spec }) => {
+    const { value, onBlur, onChange, onFocus } = input;
+    const handleChange = React.useCallback((e) => onChange(e.target.checked), [onChange]);
+    return (React.createElement("div", { className: b() },
+        React.createElement(CheckboxBase, { checked: value, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, disabled: spec.viewSpec.disabled })));
+};

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

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

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

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

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css

@@ -0,0 +1,16 @@
+.df-monaco-header {
+  height: 52px;
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  align-items: center;
+  background-color: var(--yc-color-private-black-50-solid);
+}
+.df-monaco-header_card {
+  border-bottom: 1px solid var(--yc-color-line-generic);
+}
+.df-monaco-header__language {
+  margin-top: 2px;
+  margin-left: 10px;
+  font-size: 16px;
+}

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './MonacoHeader.css';
+interface MonacoHeaderProps {
+    language?: string;
+    editButton?: React.ReactNode;
+    card?: boolean | undefined;
+}
+export declare const MonacoHeader: React.FC<MonacoHeaderProps>;
+export {};

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { File } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import './MonacoHeader.css';
+const b = block('monaco-header');
+export const MonacoHeader = ({ language, editButton, card }) => (React.createElement("div", { className: b({ card }) },
+    React.createElement("div", null,
+        React.createElement(Icon, { data: File, size: 18 }),
+        React.createElement("span", { className: b('language') }, language)), editButton !== null && editButton !== void 0 ? editButton : null));

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css

@@ -0,0 +1,9 @@
+.df-monaco-input {
+  width: 550px;
+}
+.df-monaco-input_card {
+  width: auto;
+}
+.df-monaco-input__container {
+  border: 1px solid var(--yc-color-line-generic);
+}

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
+import { StringInputProps } from '../../../../core/';
+import './MonacoInputBase.css';
+export interface MonacoInputBaseProps extends StringInputProps {
+    card?: boolean;
+    MonacoComponent?: React.ComponentType<MonacoEditorProps>;
+    withoutDialog?: boolean;
+}
+export declare const MonacoInputBase: React.FC<MonacoInputBaseProps>;
+export declare const MonacoInput: React.FC<MonacoInputBaseProps>;
+export declare const MonacoInputCard: React.FC<MonacoInputBaseProps>;

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ChevronsExpandUpRight } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { useMonaco } from '../../../../core/components/Form/hooks';
+import { block } from '../../../utils';
+import { MonacoHeader } from './MonacoHeader';
+import { MonacoInputDialog } from './MonacoInputDialog';
+import { useMonacoOptions } from './useMonacoOptions';
+import './MonacoInputBase.css';
+const b = block('monaco-input');
+export const MonacoInputBase = ({ input, spec, card, MonacoComponent, withoutDialog, }) => {
+    const { value, onChange } = input;
+    const MonacoEditor = useMonaco() || MonacoComponent;
+    const { monacoParams, disabled, layoutTitle } = spec.viewSpec;
+    const { language, fontSize } = monacoParams !== null && monacoParams !== void 0 ? monacoParams : { language: 'plaintext', fontSize: 11 };
+    const [monacoEditorDialog, setMonacoEditorDialog] = React.useState(false);
+    const [monacoValue, setMonacoValue] = React.useState(value);
+    const handleMonacoEditorDialogClose = React.useCallback(() => setMonacoEditorDialog(false), []);
+    const dialogButton = React.useMemo(() => {
+        if (!withoutDialog) {
+            return (React.createElement(Button, { onClick: () => setMonacoEditorDialog(true) },
+                React.createElement(Icon, { data: ChevronsExpandUpRight, size: 16 })));
+        }
+        return;
+    }, [withoutDialog, setMonacoEditorDialog]);
+    React.useEffect(() => onChange(monacoValue), [monacoValue]);
+    const options = useMonacoOptions(fontSize, disabled !== null && disabled !== void 0 ? disabled : false);
+    if (!MonacoEditor) {
+        return null;
+    }
+    return (React.createElement("div", { className: b({ card }) },
+        React.createElement("div", { className: b('container') },
+            React.createElement(MonacoHeader, { language: language, card: card, editButton: dialogButton }),
+            React.createElement(MonacoEditor, { language: language, value: monacoValue, height: "300", onChange: setMonacoValue, options: options })),
+        React.createElement(MonacoInputDialog, { title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, card: card, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
+};
+export const MonacoInput = (props) => (React.createElement(MonacoInputBase, Object.assign({}, props)));
+export const MonacoInputCard = (props) => (React.createElement(MonacoInputBase, Object.assign({}, props, { card: true })));

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.css

@@ -0,0 +1,9 @@
+.df-monaco-input-dialog .yc-dialog-footer {
+  padding: 10px 32px 32px;
+}
+.df-monaco-input-dialog__container {
+  border: 1px solid var(--yc-color-line-generic);
+}
+.df-monaco-input-dialog__dialog-header .yc-dialog-header__caption {
+  min-height: 24px;
+}

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
+import './MonacoInputDialog.css';
+interface MonacoInputDialogProps {
+    visible: boolean;
+    value: string;
+    language?: string;
+    title: string | undefined;
+    fontSize: number | undefined;
+    card: boolean | undefined;
+    onChange: (value: string) => void;
+    onClose: () => void;
+    changeMonacoValue: (value: string) => void;
+    MonacoComponent?: React.ComponentType<MonacoEditorProps>;
+}
+export declare const MonacoInputDialog: React.FC<MonacoInputDialogProps>;
+export {};

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Dialog } from '@gravity-ui/uikit';
+import { useMonaco } from '../../../../core/components/Form/hooks';
+import i18n from '../../../i18n';
+import { block } from '../../../utils';
+import { MonacoHeader } from './MonacoHeader';
+import { useMonacoOptions } from './useMonacoOptions';
+import './MonacoInputDialog.css';
+const b = block('monaco-input-dialog');
+export const MonacoInputDialog = ({ value, title, visible, language, card, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
+    const MonacoEditor = useMonaco() || MonacoComponent;
+    const handleClose = React.useCallback(() => {
+        onChange(value);
+        onClose();
+    }, [onChange, onClose]);
+    const options = useMonacoOptions(fontSize, false);
+    if (!MonacoEditor) {
+        return null;
+    }
+    return (React.createElement(Dialog, { open: visible, onClose: handleClose, className: b() },
+        React.createElement(Dialog.Header, { caption: title, className: b('dialog-header') }),
+        React.createElement(Dialog.Body, null,
+            React.createElement("div", { className: b('container') },
+                React.createElement(MonacoHeader, { language: language, card: card }),
+                React.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, onChange: changeMonacoValue, options: options }))),
+        React.createElement(Dialog.Footer, { textButtonApply: i18n('button_cancel'), onClickButtonApply: handleClose })));
+};

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

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

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

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