@gravity-ui/dynamic-forms 2.8.2 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/build/cjs/lib/core/components/Form/Controller.js +1 -5
  2. package/build/cjs/lib/core/components/Form/hooks/useRender.js +10 -8
  3. package/build/cjs/lib/core/components/Form/hooks/useSearch/useSearch.js +1 -1
  4. package/build/cjs/lib/core/components/View/ViewController.js +1 -4
  5. package/build/cjs/lib/core/components/View/hooks/useRender.js +12 -10
  6. package/build/cjs/lib/kit/components/Inputs/ArrayBase/ArrayBase.css +3 -0
  7. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css +0 -3
  8. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.js +1 -1
  9. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css +0 -3
  10. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.js +5 -7
  11. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.js +2 -2
  12. package/build/cjs/lib/kit/components/Inputs/index.js +0 -1
  13. package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.css +3 -1
  14. package/build/cjs/lib/kit/components/Layouts/index.js +0 -3
  15. package/build/cjs/lib/kit/components/ViewLayouts/index.js +0 -3
  16. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css +0 -3
  17. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.js +5 -7
  18. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.js +2 -2
  19. package/build/cjs/lib/kit/components/Views/index.js +0 -1
  20. package/build/cjs/lib/kit/constants/config.js +1 -179
  21. package/build/esm/lib/core/components/Form/Controller.js +1 -5
  22. package/build/esm/lib/core/components/Form/hooks/useRender.js +10 -8
  23. package/build/esm/lib/core/components/Form/hooks/useSearch/useSearch.d.ts +1 -1
  24. package/build/esm/lib/core/components/Form/hooks/useSearch/useSearch.js +1 -1
  25. package/build/esm/lib/core/components/View/ViewController.d.ts +1 -1
  26. package/build/esm/lib/core/components/View/ViewController.js +1 -4
  27. package/build/esm/lib/core/components/View/hooks/useRender.js +12 -10
  28. package/build/esm/lib/kit/components/Inputs/ArrayBase/ArrayBase.css +3 -0
  29. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css +0 -3
  30. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.d.ts +0 -1
  31. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.js +1 -1
  32. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css +0 -3
  33. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.d.ts +0 -2
  34. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.js +4 -5
  35. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.d.ts +0 -1
  36. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.js +2 -2
  37. package/build/esm/lib/kit/components/Inputs/index.d.ts +0 -1
  38. package/build/esm/lib/kit/components/Inputs/index.js +0 -1
  39. package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.css +3 -1
  40. package/build/esm/lib/kit/components/Layouts/index.d.ts +0 -3
  41. package/build/esm/lib/kit/components/Layouts/index.js +0 -3
  42. package/build/esm/lib/kit/components/ViewLayouts/index.d.ts +0 -3
  43. package/build/esm/lib/kit/components/ViewLayouts/index.js +0 -3
  44. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css +0 -3
  45. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.d.ts +0 -1
  46. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.js +4 -5
  47. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.d.ts +0 -1
  48. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.js +2 -2
  49. package/build/esm/lib/kit/components/Views/index.d.ts +0 -1
  50. package/build/esm/lib/kit/components/Views/index.js +0 -1
  51. package/build/esm/lib/kit/constants/config.d.ts +0 -2
  52. package/build/esm/lib/kit/constants/config.js +1 -179
  53. package/package.json +1 -1
  54. package/build/cjs/lib/kit/components/Inputs/OneOfCard/OneOfCard.css +0 -6
  55. package/build/cjs/lib/kit/components/Inputs/OneOfCard/OneOfCard.js +0 -43
  56. package/build/cjs/lib/kit/components/Inputs/OneOfCard/index.js +0 -4
  57. package/build/cjs/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.css +0 -3
  58. package/build/cjs/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.js +0 -30
  59. package/build/cjs/lib/kit/components/Layouts/AccordeonCardLayout/index.js +0 -4
  60. package/build/cjs/lib/kit/components/Layouts/Row2/Row2.css +0 -51
  61. package/build/cjs/lib/kit/components/Layouts/Row2/Row2.js +0 -30
  62. package/build/cjs/lib/kit/components/Layouts/Row2/index.js +0 -4
  63. package/build/cjs/lib/kit/components/Layouts/SectionCard/SectionCard.css +0 -3
  64. package/build/cjs/lib/kit/components/Layouts/SectionCard/SectionCard.js +0 -24
  65. package/build/cjs/lib/kit/components/Layouts/SectionCard/index.js +0 -4
  66. package/build/cjs/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.js +0 -16
  67. package/build/cjs/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.js +0 -4
  68. package/build/cjs/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.css +0 -42
  69. package/build/cjs/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.js +0 -30
  70. package/build/cjs/lib/kit/components/ViewLayouts/ViewRow2/index.js +0 -4
  71. package/build/cjs/lib/kit/components/ViewLayouts/ViewSectionCard/ViewSectionCard.js +0 -11
  72. package/build/cjs/lib/kit/components/ViewLayouts/ViewSectionCard/index.js +0 -4
  73. package/build/cjs/lib/kit/components/Views/OneOfCardView.js +0 -33
  74. package/build/esm/lib/kit/components/Inputs/OneOfCard/OneOfCard.css +0 -6
  75. package/build/esm/lib/kit/components/Inputs/OneOfCard/OneOfCard.d.ts +0 -3
  76. package/build/esm/lib/kit/components/Inputs/OneOfCard/OneOfCard.js +0 -39
  77. package/build/esm/lib/kit/components/Inputs/OneOfCard/index.d.ts +0 -1
  78. package/build/esm/lib/kit/components/Inputs/OneOfCard/index.js +0 -1
  79. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.css +0 -3
  80. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.d.ts +0 -3
  81. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.js +0 -26
  82. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/index.d.ts +0 -1
  83. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/index.js +0 -1
  84. package/build/esm/lib/kit/components/Layouts/Row2/Row2.css +0 -51
  85. package/build/esm/lib/kit/components/Layouts/Row2/Row2.d.ts +0 -3
  86. package/build/esm/lib/kit/components/Layouts/Row2/Row2.js +0 -26
  87. package/build/esm/lib/kit/components/Layouts/Row2/index.d.ts +0 -1
  88. package/build/esm/lib/kit/components/Layouts/Row2/index.js +0 -1
  89. package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.css +0 -3
  90. package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.d.ts +0 -8
  91. package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.js +0 -20
  92. package/build/esm/lib/kit/components/Layouts/SectionCard/index.d.ts +0 -1
  93. package/build/esm/lib/kit/components/Layouts/SectionCard/index.js +0 -1
  94. package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.d.ts +0 -2
  95. package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.js +0 -11
  96. package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.d.ts +0 -1
  97. package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.js +0 -1
  98. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.css +0 -42
  99. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.d.ts +0 -3
  100. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.js +0 -26
  101. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/index.d.ts +0 -1
  102. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/index.js +0 -1
  103. package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/ViewSectionCard.d.ts +0 -3
  104. package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/ViewSectionCard.js +0 -5
  105. package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/index.d.ts +0 -1
  106. package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/index.js +0 -1
  107. package/build/esm/lib/kit/components/Views/OneOfCardView.d.ts +0 -2
  108. package/build/esm/lib/kit/components/Views/OneOfCardView.js +0 -28
@@ -2,6 +2,9 @@
2
2
  display: flex;
3
3
  align-items: flex-end;
4
4
  }
5
+ .df-array-base_add-button-right .df-transparent {
6
+ align-items: flex-end;
7
+ }
5
8
  .df-array-base__items-wrapper_add-button-down {
6
9
  margin-bottom: 15px;
7
10
  }
@@ -6,9 +6,6 @@
6
6
  align-items: center;
7
7
  background-color: var(--yc-color-base-float-hover);
8
8
  }
9
- .df-monaco-header_card {
10
- border-bottom: 1px solid var(--yc-color-line-generic);
11
- }
12
9
  .df-monaco-header__language {
13
10
  margin-top: 2px;
14
11
  margin-left: 10px;
@@ -3,7 +3,6 @@ import './MonacoHeader.css';
3
3
  interface MonacoHeaderProps {
4
4
  language?: string;
5
5
  editButton?: React.ReactNode;
6
- card?: boolean | undefined;
7
6
  }
8
7
  export declare const MonacoHeader: React.FC<MonacoHeaderProps>;
9
8
  export {};
@@ -4,7 +4,7 @@ import { Icon } from '@gravity-ui/uikit';
4
4
  import { block } from '../../../utils';
5
5
  import './MonacoHeader.css';
6
6
  const b = block('monaco-header');
7
- export const MonacoHeader = ({ language, editButton, card }) => (React.createElement("div", { className: b({ card }) },
7
+ export const MonacoHeader = ({ language, editButton }) => (React.createElement("div", { className: b() },
8
8
  React.createElement("div", null,
9
9
  React.createElement(Icon, { data: File, size: 18 }),
10
10
  React.createElement("span", { className: b('language') }, language)), editButton !== null && editButton !== void 0 ? editButton : null));
@@ -1,9 +1,6 @@
1
1
  .df-monaco-input {
2
2
  width: 550px;
3
3
  }
4
- .df-monaco-input_card {
5
- width: auto;
6
- }
7
4
  .df-monaco-input__container {
8
5
  border: 1px solid var(--yc-color-line-generic);
9
6
  }
@@ -3,10 +3,8 @@ import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
3
3
  import { StringInputProps } from '../../../../core/';
4
4
  import './MonacoInputBase.css';
5
5
  export interface MonacoInputBaseProps extends StringInputProps {
6
- card?: boolean;
7
6
  MonacoComponent?: React.ComponentType<MonacoEditorProps>;
8
7
  withoutDialog?: boolean;
9
8
  }
10
9
  export declare const MonacoInputBase: React.FC<MonacoInputBaseProps>;
11
10
  export declare const MonacoInput: React.FC<MonacoInputBaseProps>;
12
- export declare const MonacoInputCard: React.FC<MonacoInputBaseProps>;
@@ -8,7 +8,7 @@ import { MonacoInputDialog } from './MonacoInputDialog';
8
8
  import { useMonacoOptions } from './useMonacoOptions';
9
9
  import './MonacoInputBase.css';
10
10
  const b = block('monaco-input');
11
- export const MonacoInputBase = ({ name, input, spec, card, MonacoComponent, withoutDialog, }) => {
11
+ export const MonacoInputBase = ({ name, input, spec, MonacoComponent, withoutDialog, }) => {
12
12
  const { value, onChange } = input;
13
13
  const MonacoEditor = useMonaco() || MonacoComponent;
14
14
  const { monacoParams, disabled, layoutTitle } = spec.viewSpec;
@@ -28,11 +28,10 @@ export const MonacoInputBase = ({ name, input, spec, card, MonacoComponent, with
28
28
  if (!MonacoEditor) {
29
29
  return null;
30
30
  }
31
- return (React.createElement("div", { className: b({ card }) },
31
+ return (React.createElement("div", { className: b() },
32
32
  React.createElement("div", { className: b('container'), "data-qa": name },
33
- React.createElement(MonacoHeader, { language: language, card: card, editButton: dialogButton }),
33
+ React.createElement(MonacoHeader, { language: language, editButton: dialogButton }),
34
34
  React.createElement(MonacoEditor, { language: language, value: monacoValue, height: "300", onChange: setMonacoValue, options: options })),
35
- React.createElement(MonacoInputDialog, { name: name, title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, card: card, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
35
+ React.createElement(MonacoInputDialog, { name: name, title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
36
36
  };
37
37
  export const MonacoInput = (props) => (React.createElement(MonacoInputBase, Object.assign({}, props)));
38
- export const MonacoInputCard = (props) => (React.createElement(MonacoInputBase, Object.assign({}, props, { card: true })));
@@ -8,7 +8,6 @@ interface MonacoInputDialogProps {
8
8
  language?: string;
9
9
  title: string | undefined;
10
10
  fontSize: number | undefined;
11
- card: boolean | undefined;
12
11
  onChange: (value: string) => void;
13
12
  onClose: () => void;
14
13
  changeMonacoValue: (value: string) => void;
@@ -7,7 +7,7 @@ import { MonacoHeader } from './MonacoHeader';
7
7
  import { useMonacoOptions } from './useMonacoOptions';
8
8
  import './MonacoInputDialog.css';
9
9
  const b = block('monaco-input-dialog');
10
- export const MonacoInputDialog = ({ name, value, title, visible, language, card, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
10
+ export const MonacoInputDialog = ({ name, value, title, visible, language, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
11
11
  const MonacoEditor = useMonaco() || MonacoComponent;
12
12
  const handleClose = React.useCallback(() => {
13
13
  onChange(value);
@@ -21,7 +21,7 @@ export const MonacoInputDialog = ({ name, value, title, visible, language, card,
21
21
  React.createElement(Dialog.Header, { caption: title, className: b('dialog-header') }),
22
22
  React.createElement(Dialog.Body, null,
23
23
  React.createElement("div", { className: b('container'), "data-qa": `${name}-dialog` },
24
- React.createElement(MonacoHeader, { language: language, card: card }),
24
+ React.createElement(MonacoHeader, { language: language }),
25
25
  React.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, onChange: changeMonacoValue, options: options }))),
26
26
  React.createElement(Dialog.Footer, { textButtonApply: i18n('button_cancel'), onClickButtonApply: handleClose })));
27
27
  };
@@ -9,7 +9,6 @@ export * from './NumberWithScale';
9
9
  export * from './ObjectBase';
10
10
  export * from './ObjectValueInput';
11
11
  export * from './OneOf';
12
- export * from './OneOfCard';
13
12
  export * from './Secret';
14
13
  export * from './Select';
15
14
  export * from './Switch';
@@ -9,7 +9,6 @@ export * from './NumberWithScale';
9
9
  export * from './ObjectBase';
10
10
  export * from './ObjectValueInput';
11
11
  export * from './OneOf';
12
- export * from './OneOfCard';
13
12
  export * from './Secret';
14
13
  export * from './Select';
15
14
  export * from './Switch';
@@ -1,7 +1,6 @@
1
1
  .df-transparent {
2
2
  display: flex;
3
3
  margin-bottom: 15px;
4
- align-items: flex-end;
5
4
  }
6
5
  .df-transparent:last-child {
7
6
  margin-bottom: 0;
@@ -12,6 +11,9 @@
12
11
  .df-transparent_without-max-width {
13
12
  max-width: unset;
14
13
  }
14
+ .df-transparent_without-max-width > .df-error-wrapper {
15
+ width: auto;
16
+ }
15
17
  .df-transparent__remove-button {
16
18
  margin-left: 5px;
17
19
  }
@@ -1,10 +1,7 @@
1
1
  export * from './Accordeon';
2
- export * from './AccordeonCardLayout';
3
2
  export * from './CardAccordeon';
4
3
  export * from './CardSection';
5
4
  export * from './Row';
6
- export * from './Row2';
7
5
  export * from './Section';
8
- export * from './SectionCard';
9
6
  export * from './TableCell';
10
7
  export * from './Transparent';
@@ -1,10 +1,7 @@
1
1
  export * from './Accordeon';
2
- export * from './AccordeonCardLayout';
3
2
  export * from './CardAccordeon';
4
3
  export * from './CardSection';
5
4
  export * from './Row';
6
- export * from './Row2';
7
5
  export * from './Section';
8
- export * from './SectionCard';
9
6
  export * from './TableCell';
10
7
  export * from './Transparent';
@@ -1,10 +1,7 @@
1
1
  export * from './ViewAccordeon';
2
- export * from './ViewAccordeonCard';
3
2
  export * from './ViewCardAccordeon';
4
3
  export * from './ViewCardSection';
5
4
  export * from './ViewRow';
6
- export * from './ViewRow2';
7
5
  export * from './ViewSection';
8
- export * from './ViewSectionCard';
9
6
  export * from './ViewTableCell';
10
7
  export * from './ViewTransparent';
@@ -1,10 +1,7 @@
1
1
  export * from './ViewAccordeon';
2
- export * from './ViewAccordeonCard';
3
2
  export * from './ViewCardAccordeon';
4
3
  export * from './ViewCardSection';
5
4
  export * from './ViewRow';
6
- export * from './ViewRow2';
7
5
  export * from './ViewSection';
8
- export * from './ViewSectionCard';
9
6
  export * from './ViewTableCell';
10
7
  export * from './ViewTransparent';
@@ -1,7 +1,4 @@
1
1
  .df-monaco-base-view {
2
2
  border: 1px solid var(--yc-color-line-generic);
3
3
  width: 550px;
4
- }
5
- .df-monaco-base-view_card {
6
- width: auto;
7
4
  }
@@ -2,4 +2,3 @@ import React from 'react';
2
2
  import { StringViewProps } from '../../../../core';
3
3
  import './MonacoBaseView.css';
4
4
  export declare const MonacoView: React.FC<StringViewProps>;
5
- export declare const MonacoViewCard: React.FC<StringViewProps>;
@@ -8,7 +8,7 @@ import { useMonacoOptions } from '../../Inputs/MonacoInput/useMonacoOptions';
8
8
  import { MonacoViewDialog } from './MonacoViewDialog';
9
9
  import './MonacoBaseView.css';
10
10
  const b = block('monaco-base-view');
11
- const MonacoBaseView = ({ value, spec, card }) => {
11
+ const MonacoBaseView = ({ value, spec }) => {
12
12
  const { monacoParams, layoutTitle } = spec.viewSpec;
13
13
  const MonacoEditor = useMonaco();
14
14
  const { language, fontSize } = monacoParams !== null && monacoParams !== void 0 ? monacoParams : { language: 'plaintext', fontSize: 12 };
@@ -18,11 +18,10 @@ const MonacoBaseView = ({ value, spec, card }) => {
18
18
  if (!value || !MonacoEditor) {
19
19
  return null;
20
20
  }
21
- return (React.createElement("div", { className: b({ card }) },
22
- React.createElement(MonacoHeader, { language: language, card: card, editButton: React.createElement(Button, { onClick: () => setMonacoEditorDialog(true) },
21
+ return (React.createElement("div", { className: b() },
22
+ React.createElement(MonacoHeader, { language: language, editButton: React.createElement(Button, { onClick: () => setMonacoEditorDialog(true) },
23
23
  React.createElement(Icon, { data: ChevronsExpandUpRight, size: 16 })) }),
24
24
  React.createElement(MonacoEditor, { language: language, value: value, height: '250', options: options }),
25
- React.createElement(MonacoViewDialog, { title: layoutTitle, fontSize: fontSize, card: card, value: value, visible: monacoEditorDialog, language: language, onClose: handleMonacoEditorDialogClose })));
25
+ React.createElement(MonacoViewDialog, { title: layoutTitle, fontSize: fontSize, value: value, visible: monacoEditorDialog, language: language, onClose: handleMonacoEditorDialogClose })));
26
26
  };
27
27
  export const MonacoView = (props) => React.createElement(MonacoBaseView, Object.assign({}, props));
28
- export const MonacoViewCard = (props) => (React.createElement(MonacoBaseView, Object.assign({}, props, { card: true })));
@@ -6,7 +6,6 @@ interface MonacoViewDialogProps {
6
6
  language?: string;
7
7
  title: string | undefined;
8
8
  fontSize: number | undefined;
9
- card: boolean | undefined;
10
9
  onClose: () => void;
11
10
  }
12
11
  export declare const MonacoViewDialog: React.FC<MonacoViewDialogProps>;
@@ -7,7 +7,7 @@ import { MonacoHeader } from '../../Inputs/MonacoInput/MonacoHeader';
7
7
  import { useMonacoOptions } from '../../Inputs/MonacoInput/useMonacoOptions';
8
8
  import './MonacoViewDialog.css';
9
9
  const b = block('monaco-view-dialog');
10
- export const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize, card, }) => {
10
+ export const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize, }) => {
11
11
  const MonacoEditor = useMonaco();
12
12
  const handleClose = React.useCallback(() => {
13
13
  onClose();
@@ -20,7 +20,7 @@ export const MonacoViewDialog = ({ value, title, visible, language, onClose, fon
20
20
  React.createElement(Dialog.Header, { caption: title, className: b('dialog-header') }),
21
21
  React.createElement(Dialog.Body, null,
22
22
  React.createElement("div", { className: b('container') },
23
- React.createElement(MonacoHeader, { language: language, card: card }),
23
+ React.createElement(MonacoHeader, { language: language }),
24
24
  React.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, options: options }))),
25
25
  React.createElement(Dialog.Footer, { textButtonApply: i18n('button_cancel'), onClickButtonApply: handleClose })));
26
26
  };
@@ -8,7 +8,6 @@ export * from './MultiSelectView';
8
8
  export * from './NumberWithScaleView';
9
9
  export * from './ObjectBaseView';
10
10
  export * from './ObjectValueInputView';
11
- export * from './OneOfCardView';
12
11
  export * from './OneOfView';
13
12
  export * from './TableArrayView';
14
13
  export * from './TextAreaView';
@@ -8,7 +8,6 @@ export * from './MultiSelectView';
8
8
  export * from './NumberWithScaleView';
9
9
  export * from './ObjectBaseView';
10
10
  export * from './ObjectValueInputView';
11
- export * from './OneOfCardView';
12
11
  export * from './OneOfView';
13
12
  export * from './TableArrayView';
14
13
  export * from './TextAreaView';
@@ -1,5 +1,3 @@
1
1
  import { DynamicFormConfig, DynamicViewConfig } from '../../core';
2
2
  export declare const dynamicConfig: DynamicFormConfig;
3
- export declare const dynamicCardConfig: DynamicFormConfig;
4
3
  export declare const dynamicViewConfig: DynamicViewConfig;
5
- export declare const dynamicViewCardConfig: DynamicViewConfig;
@@ -1,4 +1,4 @@
1
- import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfCard, OneOfCardView, OneOfFlat, OneOfFlatView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
1
+ import { Accordeon, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, 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, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
2
2
  import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
3
3
  export const dynamicConfig = {
4
4
  array: {
@@ -109,103 +109,6 @@ export const dynamicConfig = {
109
109
  },
110
110
  },
111
111
  };
112
- export const dynamicCardConfig = {
113
- array: {
114
- inputs: {
115
- select: { Component: MultiSelect },
116
- table: { Component: TableArrayInput },
117
- base: { Component: ArrayBase },
118
- },
119
- layouts: {
120
- row: Row2,
121
- accordeon: AccordeonCardLayout,
122
- section: SectionWithSubtitle,
123
- section2: SectionWithSubtitle2,
124
- group: SectionCard,
125
- group2: SectionCard2,
126
- table_item: TableCell,
127
- transparent: Transparent,
128
- },
129
- validators: {
130
- base: getArrayValidator(),
131
- },
132
- },
133
- boolean: {
134
- inputs: {
135
- base: { Component: Checkbox },
136
- switch: { Component: Switch },
137
- },
138
- layouts: {
139
- row: Row2,
140
- table_item: TableCell,
141
- },
142
- validators: {
143
- base: getBooleanValidator(),
144
- },
145
- },
146
- number: {
147
- inputs: {
148
- base: { Component: Text },
149
- },
150
- layouts: {
151
- row: Row2,
152
- table_item: TableCell,
153
- transparent: Transparent,
154
- },
155
- validators: {
156
- base: getNumberValidator(),
157
- },
158
- },
159
- object: {
160
- inputs: {
161
- oneof: { Component: OneOfCard, independent: true },
162
- secret: { Component: Secret, independent: true },
163
- base: { Component: ObjectBase, independent: true },
164
- text_link: { Component: TextLink, independent: true },
165
- object_value: { Component: ObjectValueInput, independent: true },
166
- multi_oneof: { Component: MultiOneOf, independent: true },
167
- multi_oneof_flat: { Component: MultiOneOfFlat, independent: true },
168
- inline: { Component: ObjectInline, independent: true },
169
- },
170
- layouts: {
171
- row: Row2,
172
- accordeon: AccordeonCardLayout,
173
- section: SectionWithSubtitle,
174
- section2: SectionWithSubtitle2,
175
- group: SectionCard,
176
- group2: SectionCard2,
177
- transparent: Transparent,
178
- },
179
- validators: {
180
- base: getObjectValidator(),
181
- },
182
- },
183
- string: {
184
- inputs: {
185
- password: { Component: Text },
186
- textarea: { Component: TextArea },
187
- select: { Component: Select },
188
- base: { Component: Text },
189
- file_input: { Component: FileInput },
190
- number_with_scale: { Component: NumberWithScale },
191
- monaco_input: { Component: MonacoInputCard },
192
- text_content: { Component: TextContent, independent: true },
193
- },
194
- layouts: {
195
- row: Row2,
196
- table_item: TableCell,
197
- transparent: Transparent,
198
- section: SectionWithSubtitle,
199
- section2: SectionWithSubtitle2,
200
- group: SectionCard,
201
- group2: SectionCard2,
202
- },
203
- validators: {
204
- base: getStringValidator(),
205
- number: getNumberValidator(),
206
- },
207
- },
208
- };
209
112
  export const dynamicViewConfig = {
210
113
  array: {
211
114
  views: {
@@ -299,84 +202,3 @@ export const dynamicViewConfig = {
299
202
  },
300
203
  },
301
204
  };
302
- export const dynamicViewCardConfig = {
303
- array: {
304
- views: {
305
- select: { Component: MultiSelectView },
306
- table: { Component: TableArrayView },
307
- base: { Component: ArrayBaseView },
308
- },
309
- layouts: {
310
- row: ViewRow2,
311
- accordeon: ViewAccordeonCard,
312
- section: ViewSection,
313
- section2: ViewSection2,
314
- group: ViewSectionCard,
315
- group2: ViewSectionCard2,
316
- table_item: ViewTableCell,
317
- transparent: ViewTransparent,
318
- },
319
- },
320
- boolean: {
321
- views: {
322
- base: { Component: BaseView },
323
- switch: { Component: BaseView },
324
- },
325
- layouts: {
326
- row: ViewRow2,
327
- table_item: ViewTableCell,
328
- },
329
- },
330
- number: {
331
- views: {
332
- base: { Component: BaseView },
333
- },
334
- layouts: {
335
- row: ViewRow2,
336
- table_item: ViewTableCell,
337
- transparent: ViewTransparent,
338
- },
339
- },
340
- object: {
341
- views: {
342
- oneof: { Component: OneOfCardView, independent: true },
343
- secret: undefined,
344
- base: { Component: ObjectBaseView, independent: true },
345
- text_link: { Component: TextLinkView, independent: true },
346
- object_value: { Component: ObjectValueInputView, independent: true },
347
- multi_oneof: { Component: MultiOneOfView, independent: true },
348
- multi_oneof_flat: { Component: MultiOneOfFlatView, independent: true },
349
- inline: { Component: ObjectInlineView, independent: true },
350
- },
351
- layouts: {
352
- row: ViewRow2,
353
- accordeon: ViewAccordeonCard,
354
- section: ViewSection,
355
- section2: ViewSection2,
356
- group: ViewSectionCard,
357
- group2: ViewSectionCard2,
358
- transparent: ViewTransparent,
359
- },
360
- },
361
- string: {
362
- views: {
363
- password: undefined,
364
- textarea: { Component: TextAreaView },
365
- select: { Component: BaseView },
366
- base: { Component: BaseView },
367
- file_input: { Component: FileInputView },
368
- number_with_scale: { Component: NumberWithScaleView },
369
- monaco_input: { Component: MonacoViewCard },
370
- text_content: undefined,
371
- },
372
- layouts: {
373
- row: ViewRow2,
374
- table_item: ViewTableCell,
375
- transparent: ViewTransparent,
376
- section: ViewSection,
377
- section2: ViewSection2,
378
- group: ViewSectionCard,
379
- group2: ViewSectionCard2,
380
- },
381
- },
382
- };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dynamic-forms",
3
- "version": "2.8.2",
3
+ "version": "3.0.1",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "main": "build/cjs/index.js",
@@ -1,6 +0,0 @@
1
- .df-oneof-card {
2
- margin-bottom: 20px;
3
- }
4
- .df-oneof-card .df-accordeon-card__header-toggle-btn {
5
- margin-left: 5px;
6
- }
@@ -1,43 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.OneOfCard = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const lodash_1 = tslib_1.__importDefault(require("lodash"));
7
- const __1 = require("../../");
8
- const core_1 = require("../../../../core");
9
- const hooks_1 = require("../../../hooks");
10
- const utils_1 = require("../../../utils");
11
- const Layouts_1 = require("../../Layouts");
12
- const RemoveButton_1 = require("../../Layouts/Accordeon/RemoveButton");
13
- const b = (0, utils_1.block)('oneof-card');
14
- const OneOfCard = (props) => {
15
- var _a;
16
- const { input, meta, spec, name } = props;
17
- const [open, setOpen] = react_1.default.useState(true);
18
- const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
19
- const onOpen = react_1.default.useCallback(() => setOpen(true), [setOpen]);
20
- const { oneOfValue, specProperties, togglerInput } = (0, hooks_1.useOneOf)({
21
- props,
22
- onTogglerChange: onOpen,
23
- });
24
- const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
25
- const toggler = react_1.default.useMemo(() => {
26
- const specWithoutDescription = Object.assign(Object.assign({}, props.spec), { viewSpec: Object.assign(Object.assign({}, props.spec.viewSpec), { layoutDescription: '' }) });
27
- const name = arrayItem ? '' : props.name;
28
- return (react_1.default.createElement(Layouts_1.Row2, Object.assign({}, props, { spec: specWithoutDescription, name: name }), togglerInput));
29
- }, [togglerInput, props, arrayItem]);
30
- const headerActionsTemplate = react_1.default.useMemo(() => {
31
- if (arrayItem) {
32
- return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop, name: name });
33
- }
34
- return null;
35
- }, [arrayItem, input.onDrop, name]);
36
- const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => {
37
- const value = lodash_1.default.set({}, childName.split(`${input.name}.`).join(''), childValue);
38
- input.onChange(value, childErrors);
39
- }, [input.onChange, input.name]);
40
- (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
41
- return (react_1.default.createElement(__1.AccordeonCard, { className: b(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
42
- };
43
- exports.OneOfCard = OneOfCard;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./OneOfCard"), exports);
@@ -1,3 +0,0 @@
1
- .df-accordeon-card-layout {
2
- margin-bottom: 20px;
3
- }
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.AccordeonCardLayout = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const __1 = require("../../");
7
- const components_1 = require("../../../components");
8
- const hooks_1 = require("../../../hooks");
9
- const utils_1 = require("../../../utils");
10
- const RemoveButton_1 = require("../Accordeon/RemoveButton");
11
- const b = (0, utils_1.block)('accordeon-card-layout');
12
- const AccordeonCardLayout = ({ name, spec, input, meta, children, }) => {
13
- var _a;
14
- const [open, setOpen] = react_1.default.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
15
- const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
16
- const onDrop = react_1.default.useCallback(() => {
17
- setOpen(false);
18
- input.onDrop();
19
- }, [input.onDrop, setOpen]);
20
- const removeButton = react_1.default.useMemo(() => {
21
- if (spec.required || !input.value) {
22
- return null;
23
- }
24
- return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop, name: name });
25
- }, [spec.required, input.value, onDrop, name]);
26
- (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
27
- return (react_1.default.createElement(__1.AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
28
- react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
29
- };
30
- exports.AccordeonCardLayout = AccordeonCardLayout;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./AccordeonCardLayout"), exports);
@@ -1,51 +0,0 @@
1
- .df-row2 {
2
- width: 100%;
3
- display: flex;
4
- margin-bottom: 15px;
5
- }
6
- .df-row2:last-child {
7
- margin-bottom: 0;
8
- }
9
- .df-row2__left {
10
- width: 180px;
11
- min-width: 180px;
12
- display: flex;
13
- flex-direction: column;
14
- font-weight: bold;
15
- }
16
- .df-row2__left::after {
17
- content: "";
18
- width: 100%;
19
- flex-shrink: 1;
20
- }
21
- .df-row2__title {
22
- padding-right: 5px;
23
- min-height: 28px;
24
- display: flex;
25
- align-items: center;
26
- font-weight: 700;
27
- }
28
- .df-row2__right {
29
- display: flex;
30
- flex-direction: column;
31
- flex-grow: 1;
32
- }
33
- .df-row2__right-inner {
34
- display: flex;
35
- }
36
- .df-row2__right .df-select,
37
- .df-row2__right .df-multi-select,
38
- .df-row2__right .df-transparent_array-item {
39
- max-width: unset;
40
- }
41
- .df-row2__description {
42
- margin-top: 10px;
43
- color: var(--yc-color-text-secondary);
44
- }
45
- .df-row2__remove-button {
46
- margin-left: 5px;
47
- }
48
- .df-row2__required-mark {
49
- margin-left: 2px;
50
- color: var(--yc-color-text-danger);
51
- }