@gravity-ui/dynamic-forms 1.0.0 → 1.0.2

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

@@ -0,0 +1,22 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Label } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import './TextContent.css';
+const b = block('text-content');
+export const TextContent = (_a) => {
+    var { spec, Layout } = _a, restProps = __rest(_a, ["spec", "Layout"]);
+    const { themeLabel, layoutDescription } = spec.viewSpec;
+    if (!layoutDescription) {
+        return null;
+    }
+    let content = React.createElement("span", { dangerouslySetInnerHTML: { __html: layoutDescription } });
+    if (themeLabel) {
+        content = (React.createElement(Label, { size: "m", theme: themeLabel, className: b() }, content));
+    }
+    if (Layout) {
+        const _spec = Object.assign(Object.assign({}, spec), { viewSpec: Object.assign(Object.assign({}, spec.viewSpec), { layoutDescription: undefined }) });
+        return (React.createElement(Layout, Object.assign({ spec: _spec }, restProps), content));
+    }
+    return content;
+};

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

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

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

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

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

@@ -0,0 +1,15 @@
+export * from './ArrayBase';
+export * from './CardOneOf';
+export * from './Checkbox';
+export * from './MultiSelect';
+export * from './ObjectBase';
+export * from './OneOf';
+export * from './OneOfCard';
+export * from './Secret';
+export * from './Select';
+export * from './TableArrayInput';
+export * from './Text';
+export * from './TextArea';
+export * from './TextContent';
+export * from './NumberWithScale';
+export * from './MonacoInput';

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

@@ -0,0 +1,15 @@
+export * from './ArrayBase';
+export * from './CardOneOf';
+export * from './Checkbox';
+export * from './MultiSelect';
+export * from './ObjectBase';
+export * from './OneOf';
+export * from './OneOfCard';
+export * from './Secret';
+export * from './Select';
+export * from './TableArrayInput';
+export * from './Text';
+export * from './TextArea';
+export * from './TextContent';
+export * from './NumberWithScale';
+export * from './MonacoInput';

package/build/esm/lib/kit/components/Layouts/Accordeon/Accordeon.d.ts

@@ -0,0 +1,2 @@
+import { ArrayLayoutProps, ObjectLayoutProps } from '../../../../core';
+export declare const Accordeon: <T extends ArrayLayoutProps | ObjectLayoutProps>({ name, spec, input, meta, children, }: T) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/Accordeon/Accordeon.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ErrorWrapper } from '../../../components';
+import { useErrorChecker } from '../../../hooks';
+import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
+import { RemoveButton } from './RemoveButton';
+export const Accordeon = ({ name, spec, input, meta, children, }) => {
+    var _a;
+    const [open, setOpen] = React.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
+    const onDrop = React.useCallback(() => {
+        setOpen(false);
+        input.onDrop();
+    }, [input.onDrop, setOpen]);
+    const removeButton = React.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+        return React.createElement(RemoveButton, { onDrop: onDrop });
+    }, [spec.required, input.value, onDrop]);
+    useErrorChecker({ name, meta, open, setOpen });
+    return (React.createElement(SimpleVerticalAccordeon, { title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
+        React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};

package/build/esm/lib/kit/components/Layouts/Accordeon/RemoveButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface RemoveButtonProps {
+    onDrop: () => void;
+}
+export declare const RemoveButton: React.FC<RemoveButtonProps>;

package/build/esm/lib/kit/components/Layouts/Accordeon/RemoveButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Ellipsis } from '@gravity-ui/icons';
+import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
+import i18n from '../../../i18n';
+export const RemoveButton = ({ onDrop }) => {
+    const items = React.useMemo(() => [{ text: i18n('label_delete'), action: onDrop, theme: 'danger' }], [onDrop]);
+    const switcher = React.useMemo(() => (React.createElement(Button, { view: "flat" },
+        React.createElement(Icon, { data: Ellipsis, size: 16 }))), []);
+    return React.createElement(DropdownMenu, { switcher: switcher, items: items });
+};

package/build/esm/lib/kit/components/Layouts/Accordeon/index.d.ts

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

package/build/esm/lib/kit/components/Layouts/Accordeon/index.js

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

package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.css

@@ -0,0 +1,3 @@
+.df-accordeon-card-layout {
+  margin-bottom: 20px;
+}

package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.d.ts

@@ -0,0 +1,3 @@
+import { ArrayLayoutProps, ObjectLayoutProps } from '../../../../core';
+import './AccordeonCardLayout.css';
+export declare const AccordeonCardLayout: <T extends ArrayLayoutProps | ObjectLayoutProps>({ name, spec, input, meta, children, }: T) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { AccordeonCard } from '../../';
+import { ErrorWrapper } from '../../../components';
+import { useErrorChecker } from '../../../hooks';
+import { block } from '../../../utils';
+import { RemoveButton } from '../Accordeon/RemoveButton';
+import './AccordeonCardLayout.css';
+const b = block('accordeon-card-layout');
+export const AccordeonCardLayout = ({ name, spec, input, meta, children, }) => {
+    var _a;
+    const [open, setOpen] = React.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
+    const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const onDrop = React.useCallback(() => {
+        setOpen(false);
+        input.onDrop();
+    }, [input.onDrop, setOpen]);
+    const removeButton = React.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+        return React.createElement(RemoveButton, { onDrop: onDrop });
+    }, [spec.required, input.value, onDrop]);
+    useErrorChecker({ name, meta, open, setOpen });
+    return (React.createElement(AccordeonCard, { header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
+        React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};

package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/index.d.ts

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

package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/index.js

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

package/build/esm/lib/kit/components/Layouts/CardAccordeon.d.ts

@@ -0,0 +1,2 @@
+import { FieldValue, LayoutProps, Spec } from '../../../core';
+export declare const CardAccordeon: <T extends FieldValue, S extends Spec>({ name, spec, input, meta, children, }: LayoutProps<T, S>) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/CardAccordeon.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Card, ErrorWrapper } from '../../components';
+import { useErrorChecker } from '../../hooks';
+import { RemoveButton } from './Accordeon/RemoveButton';
+export const CardAccordeon = ({ name, spec, input, meta, children, }) => {
+    var _a;
+    const [open, setOpen] = React.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
+    const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const onDrop = React.useCallback(() => {
+        setOpen(false);
+        input.onDrop();
+    }, [input.onDrop, setOpen]);
+    const removeButton = React.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+        return React.createElement(RemoveButton, { onDrop: onDrop });
+    }, [spec.required, input.value, onDrop]);
+    useErrorChecker({ name, meta, open, setOpen });
+    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, open: open, onToggle: onToggle },
+        React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};

package/build/esm/lib/kit/components/Layouts/CardSection.d.ts

@@ -0,0 +1,2 @@
+import { FieldValue, LayoutProps, Spec } from '../../../core';
+export declare const CardSection: <T extends FieldValue, S extends Spec>({ name, spec, input, meta, children, }: LayoutProps<T, S>) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/CardSection.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Card, ErrorWrapper } from '../../components';
+import { RemoveButton } from './Accordeon/RemoveButton';
+export const CardSection = ({ name, spec, input, meta, children, }) => {
+    const removeButton = React.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+        return React.createElement(RemoveButton, { onDrop: input.onDrop });
+    }, [spec.required, input.value, input.onDrop]);
+    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, alwaysOpen: true },
+        React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};

package/build/esm/lib/kit/components/Layouts/Row/Row.css

@@ -0,0 +1,55 @@
+.df-row {
+  display: flex;
+  width: 500px;
+  max-width: 500px;
+  margin-bottom: 15px;
+}
+.df-row:last-child {
+  margin-bottom: 0;
+}
+.df-row_extra-width {
+  width: 533px;
+  max-width: 533px;
+}
+.df-row__left {
+  width: 180px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.df-row__left-inner {
+  min-height: 28px;
+  display: flex;
+}
+.df-row__left::after {
+  content: "";
+  width: 100%;
+  flex-shrink: 1;
+}
+.df-row__title {
+  align-self: center;
+}
+.df-row__note {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
+}
+.df-row__note .yc-help-popover {
+  display: flex;
+}
+.df-row__note .yc-help-popover > span {
+  display: flex;
+}
+.df-row__right {
+  display: flex;
+  flex-grow: 1;
+  margin-left: 15px;
+}
+.df-row__remove-button {
+  margin-left: 5px;
+}
+.df-row__required-mark {
+  margin-left: 2px;
+  color: var(--yc-color-text-danger);
+}

package/build/esm/lib/kit/components/Layouts/Row/Row.d.ts

@@ -0,0 +1,3 @@
+import { FieldValue, LayoutProps, Spec } from '../../../../core';
+import './Row.css';
+export declare const Row: <T extends FieldValue, S extends Spec>({ name, spec, input, meta, children, }: LayoutProps<T, S>) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/Row/Row.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Xmark } from '@gravity-ui/icons';
+import { Button, HelpPopover, Icon } from '@gravity-ui/uikit';
+import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
+import { ErrorWrapper } from '../../../components';
+import { block } from '../../../utils';
+import './Row.css';
+const b = block('row');
+export const Row = ({ name, spec, input, meta, children, }) => {
+    const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
+    return (React.createElement("div", { className: b({ 'extra-width': isArraySpec(spec) || arrayItem }) },
+        React.createElement("div", { className: b('left') },
+            React.createElement("div", { className: b('left-inner') },
+                React.createElement("div", { className: b('title') },
+                    spec.viewSpec.layoutTitle,
+                    spec.required && React.createElement("span", { className: b('required-mark') }, "*")),
+                spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('note') },
+                    React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] }))) : null)),
+        React.createElement("div", { className: b('right') },
+            React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
+            arrayItem ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                React.createElement(Icon, { data: Xmark, size: 16 }))) : null)));
+};

package/build/esm/lib/kit/components/Layouts/Row/index.d.ts

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

package/build/esm/lib/kit/components/Layouts/Row/index.js

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

package/build/esm/lib/kit/components/Layouts/Row2/Row2.css

@@ -0,0 +1,51 @@
+.df-row2 {
+  width: 100%;
+  display: flex;
+  margin-bottom: 15px;
+}
+.df-row2:last-child {
+  margin-bottom: 0;
+}
+.df-row2__left {
+  width: 180px;
+  min-width: 180px;
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+}
+.df-row2__left::after {
+  content: "";
+  width: 100%;
+  flex-shrink: 1;
+}
+.df-row2__title {
+  padding-right: 5px;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+}
+.df-row2__right {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.df-row2__right-inner {
+  display: flex;
+}
+.df-row2__right .df-select,
+.df-row2__right .df-multi-select,
+.df-row2__right .df-transparent_array-item {
+  max-width: unset;
+}
+.df-row2__description {
+  margin-top: 10px;
+  color: var(--yc-color-text-secondary);
+}
+.df-row2__remove-button {
+  margin-left: 5px;
+}
+.df-row2__required-mark {
+  margin-left: 2px;
+  color: var(--yc-color-text-danger);
+}

package/build/esm/lib/kit/components/Layouts/Row2/Row2.d.ts

@@ -0,0 +1,3 @@
+import { FieldValue, LayoutProps, Spec } from '../../../../core';
+import './Row2.css';
+export declare const Row2: <T extends FieldValue, S extends Spec>({ name, spec, input, meta, children, }: LayoutProps<T, S>) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/Row2/Row2.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
+import { ErrorWrapper } from '../../../components';
+import { block } from '../../../utils';
+import './Row2.css';
+const b = block('row2');
+export const Row2 = ({ name, spec, input, meta, children, }) => {
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('left') },
+            React.createElement("div", { className: b('title') },
+                spec.viewSpec.layoutTitle,
+                spec.required && React.createElement("span", { className: b('required-mark') }, "*"))),
+        React.createElement("div", { className: b('right') },
+            React.createElement("div", { className: b('right-inner') },
+                React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
+                isArrayItem(name) ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                    React.createElement(Icon, { data: Xmark, size: 16 }))) : null),
+            spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
+};

package/build/esm/lib/kit/components/Layouts/Row2/index.d.ts

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

package/build/esm/lib/kit/components/Layouts/Row2/index.js

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

package/build/esm/lib/kit/components/Layouts/Section/Section.css

@@ -0,0 +1,35 @@
+.df-section {
+  margin-bottom: 20px;
+}
+.df-section:last-child {
+  margin-bottom: 0;
+}
+.df-section__header {
+  margin-bottom: 20px;
+}
+.df-section__header_with-popover {
+  display: flex;
+  align-items: center;
+}
+.df-section__title {
+  font-weight: 500;
+  margin: 0;
+}
+.df-section__title_size_s {
+  font-size: 13px;
+}
+.df-section__title_size_m {
+  font-size: 15px;
+}
+.df-section__note {
+  margin-left: 5px;
+}
+.df-section__note .yc-help-popover {
+  display: flex;
+}
+.df-section__note .yc-help-popover > span {
+  display: flex;
+}
+.df-section__description {
+  margin-top: 4px;
+}

package/build/esm/lib/kit/components/Layouts/Section/Section.d.ts

@@ -0,0 +1,15 @@
+import { FieldValue, FormValue, LayoutProps, Spec, ViewLayoutProps } from '../../../../core';
+import './Section.css';
+interface SectionProps {
+    titleSize: 's' | 'm';
+    withIndent?: boolean;
+    ignoreDescription?: boolean;
+    descriptionAsSubtitle?: boolean;
+}
+export declare const Section: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionProps, "ignoreDescription">) => JSX.Element;
+export declare const Section2: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionProps, "ignoreDescription">) => JSX.Element;
+export declare const SectionWithSubtitle: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionProps, "ignoreDescription">) => JSX.Element;
+export declare const SectionWithSubtitle2: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionProps, "ignoreDescription">) => JSX.Element;
+export declare const Group: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionProps, "ignoreDescription">) => JSX.Element;
+export declare const Group2: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionProps, "ignoreDescription">) => JSX.Element;
+export {};

package/build/esm/lib/kit/components/Layouts/Section/Section.js

@@ -0,0 +1,46 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { HelpPopover } from '@gravity-ui/uikit';
+import { GroupIndent } from '../../';
+import { ErrorWrapper } from '../../../';
+import { isArraySpec, isObjectSpec, } from '../../../../core';
+import { block } from '../../../utils';
+import './Section.css';
+const b = block('section');
+const SectionBase = (_a) => {
+    var { name, spec, titleSize, withIndent, ignoreDescription, descriptionAsSubtitle, children } = _a, restProps = __rest(_a, ["name", "spec", "titleSize", "withIndent", "ignoreDescription", "descriptionAsSubtitle", "children"]);
+    const meta = restProps.meta;
+    const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
+    let content = children;
+    if (meta) {
+        content = (React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
+    }
+    if (withIndent) {
+        content = React.createElement(GroupIndent, null, content);
+    }
+    let description;
+    if (spec.viewSpec.layoutDescription && !ignoreDescription) {
+        if (descriptionAsSubtitle) {
+            description = (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: {
+                    __html: spec.viewSpec.layoutDescription,
+                } }));
+        }
+        else {
+            description = (React.createElement("div", { className: b('note') },
+                React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })));
+        }
+    }
+    return (React.createElement("section", { className: b() },
+        spec.viewSpec.layoutTitle ? (React.createElement("div", { className: b('header', {
+                'with-popover': !descriptionAsSubtitle,
+            }) },
+            React.createElement("h2", { className: b('title', { size: titleSize }) }, spec.viewSpec.layoutTitle),
+            description)) : null,
+        React.createElement("div", { className: b('content') }, content)));
+};
+export const Section = (props) => React.createElement(SectionBase, Object.assign({ titleSize: "m" }, props));
+export const Section2 = (props) => React.createElement(SectionBase, Object.assign({ titleSize: "s" }, props));
+export const SectionWithSubtitle = (props) => React.createElement(SectionBase, Object.assign({ titleSize: "m", descriptionAsSubtitle: true }, props));
+export const SectionWithSubtitle2 = (props) => React.createElement(SectionBase, Object.assign({ titleSize: "s", descriptionAsSubtitle: true }, props));
+export const Group = (props) => React.createElement(SectionBase, Object.assign({ titleSize: "m", withIndent: true }, props));
+export const Group2 = (props) => React.createElement(SectionBase, Object.assign({ titleSize: "s", withIndent: true }, props));

package/build/esm/lib/kit/components/Layouts/Section/index.d.ts

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

package/build/esm/lib/kit/components/Layouts/Section/index.js

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

package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.css

@@ -0,0 +1,3 @@
+.df-section-card {
+  margin-bottom: 20px;
+}

package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.d.ts

@@ -0,0 +1,8 @@
+import { FieldValue, FormValue, LayoutProps, Spec, ViewLayoutProps } from '../../../../core';
+import './SectionCard.css';
+export interface SectionCardProps {
+    titleSize: 's' | 'm';
+    ignoreDescription?: boolean;
+}
+export declare const SectionCard: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionCardProps, "ignoreDescription">) => JSX.Element;
+export declare const SectionCard2: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionCardProps, "ignoreDescription">) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.js

@@ -0,0 +1,20 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { AccordeonCard } from '../../';
+import { ErrorWrapper } from '../../../';
+import { isArraySpec, isObjectSpec, } from '../../../../core';
+import { block } from '../../../utils';
+import './SectionCard.css';
+const b = block('section-card');
+const SectionCardBase = (_a) => {
+    var { name, spec, titleSize, ignoreDescription, children } = _a, restProps = __rest(_a, ["name", "spec", "titleSize", "ignoreDescription", "children"]);
+    const meta = restProps.meta;
+    const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
+    let content = children;
+    if (meta) {
+        content = (React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
+    }
+    return (React.createElement(AccordeonCard, { className: b(), header: spec.viewSpec.layoutTitle, description: ignoreDescription ? undefined : spec.viewSpec.layoutDescription, titleSize: titleSize, alwaysOpen: true }, content));
+};
+export const SectionCard = (props) => React.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "m" }));
+export const SectionCard2 = (props) => React.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "s" }));

package/build/esm/lib/kit/components/Layouts/SectionCard/index.d.ts

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

package/build/esm/lib/kit/components/Layouts/SectionCard/index.js

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

package/build/esm/lib/kit/components/Layouts/TableCell/TableCell.d.ts

@@ -0,0 +1,2 @@
+import { FieldValue, LayoutProps, Spec } from '../../../../core';
+export declare const TableCell: <T extends FieldValue, S extends Spec>({ name, meta, children, }: LayoutProps<T, S>) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/TableCell/TableCell.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ErrorWrapper } from '../../../components';
+export const TableCell = ({ name, meta, children, }) => (React.createElement(ErrorWrapper, { name: name, meta: meta }, children));

package/build/esm/lib/kit/components/Layouts/TableCell/index.d.ts

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

package/build/esm/lib/kit/components/Layouts/TableCell/index.js

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

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -0,0 +1,16 @@
+.df-transparent {
+  display: flex;
+  margin-bottom: 15px;
+}
+.df-transparent:last-child {
+  margin-bottom: 0;
+}
+.df-transparent_array-item {
+  max-width: 338px;
+}
+.df-transparent_without-max-width {
+  max-width: unset;
+}
+.df-transparent__remove-button {
+  margin-left: 5px;
+}

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.d.ts

@@ -0,0 +1,3 @@
+import { FieldValue, LayoutProps, Spec } from '../../../../core';
+import './Transparent.css';
+export declare const Transparent: <T extends FieldValue, S extends Spec>({ name, spec, input, meta, children, }: LayoutProps<T, S>) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { isArrayItem, isArraySpec, isObjectSpec, } from '../../../../core';
+import { ErrorWrapper } from '../../../components';
+import { block } from '../../../utils';
+import './Transparent.css';
+const b = block('transparent');
+export const Transparent = ({ name, spec, input, meta, children, }) => {
+    const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
+    const arrOrObjFlag = React.useMemo(() => isArraySpec(spec) || isObjectSpec(spec), [spec]);
+    const removeButton = React.useMemo(() => {
+        if (arrayItem) {
+            return (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                React.createElement(Icon, { data: Xmark, size: 16 })));
+        }
+        return null;
+    }, [input.onDrop, arrayItem]);
+    return (React.createElement("div", { className: b({
+            'array-item': arrayItem && !arrOrObjFlag,
+            'without-max-width': arrOrObjFlag,
+        }) },
+        React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, children),
+        removeButton));
+};

package/build/esm/lib/kit/components/Layouts/Transparent/index.d.ts

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

package/build/esm/lib/kit/components/Layouts/Transparent/index.js

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

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

@@ -0,0 +1,10 @@
+export * from './Accordeon';
+export * from './AccordeonCardLayout';
+export * from './CardAccordeon';
+export * from './CardSection';
+export * from './Row';
+export * from './Row2';
+export * from './Section';
+export * from './SectionCard';
+export * from './TableCell';
+export * from './Transparent';

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

@@ -0,0 +1,10 @@
+export * from './Accordeon';
+export * from './AccordeonCardLayout';
+export * from './CardAccordeon';
+export * from './CardSection';
+export * from './Row';
+export * from './Row2';
+export * from './Section';
+export * from './SectionCard';
+export * from './TableCell';
+export * from './Transparent';