@gravity-ui/dynamic-forms 5.20.0 → 5.22.0

package/build/esm/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface ArrayRemoveButtonProps {
     name: string;
+    headName: string;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 export declare const ArrayRemoveButton: React.FC<ArrayRemoveButtonProps>;

package/build/esm/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.js

@@ -3,11 +3,11 @@ import { TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { useForm } from 'react-final-form';
 import { getArrayItemIndex, getArrayItemParentName, isArrayItem, isTupleItem } from '../../utils';
-export const ArrayRemoveButton = ({ name, onClick }) => {
+export const ArrayRemoveButton = ({ name, headName, onClick }) => {
     const form = useForm();
     const [ready, setReady] = React.useState(false);
     const arrayItem = isArrayItem(name);
-    const tupleItem = isTupleItem(name, form);
+    const tupleItem = isTupleItem(name, headName, form);
     const removeItem = React.useCallback((event) => {
         var _a;
         onClick === null || onClick === void 0 ? void 0 : onClick(event);

package/build/esm/lib/unstable/kit/components/CopyButton/CopyButton.css

@@ -0,0 +1,9 @@
+.sr-copy-button {
+  width: 20px;
+  height: 20px;
+  margin-top: -1px;
+}
+.sr-copy-button .g-button {
+  margin-top: -2px;
+  margin-left: -2px;
+}

package/build/esm/lib/unstable/kit/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './CopyButton.css';
+export interface CopyButtonProps {
+    className?: string;
+    copy?: boolean;
+    value: unknown;
+}
+export declare const CopyButton: React.FC<CopyButtonProps>;

package/build/esm/lib/unstable/kit/components/CopyButton/CopyButton.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ClipboardButton } from '@gravity-ui/uikit';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
+import { block } from '../../utils';
+import './CopyButton.css';
+const b = block('copy-button');
+export const CopyButton = ({ className, copy, value }) => {
+    if (copy && (isString(value) || isNumber(value))) {
+        return (React.createElement("div", { className: b(null, className) },
+            React.createElement(ClipboardButton, { text: String(value), view: "flat", size: "s" })));
+    }
+    return null;
+};

package/build/esm/lib/unstable/kit/components/CopyButton/index.d.ts

@@ -0,0 +1 @@
+export { CopyButton, type CopyButtonProps } from './CopyButton';

package/build/esm/lib/unstable/kit/components/CopyButton/index.js

@@ -0,0 +1 @@
+export { CopyButton } from './CopyButton';

package/build/esm/lib/unstable/kit/components/EmptyEntityValue/EmptyEntityValue.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmptyEntityValue: React.FC;

package/build/esm/lib/unstable/kit/components/EmptyEntityValue/EmptyEntityValue.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DASH } from '../../constants';
+import { EntityContainer } from '../EntityContainer';
+export const EmptyEntityValue = () => {
+    return (React.createElement(EntityContainer, { stretch: "fit", fill: "empty" }, DASH));
+};

package/build/esm/lib/unstable/kit/components/EmptyEntityValue/index.d.ts

@@ -0,0 +1 @@
+export { EmptyEntityValue } from './EmptyEntityValue';

package/build/esm/lib/unstable/kit/components/EmptyEntityValue/index.js

@@ -0,0 +1 @@
+export { EmptyEntityValue } from './EmptyEntityValue';

package/build/esm/lib/unstable/kit/components/EntityContainer/EntityContainer.css

@@ -0,0 +1,22 @@
+.sr-entity-container {
+  display: flex;
+  flex-direction: column;
+}
+.sr-entity-container_stretch_max {
+  width: 100%;
+  flex: 1 0 0;
+}
+.sr-entity-container_stretch_fit {
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+  flex: 0 1 auto;
+}
+.sr-entity-container_stretch_by-child {
+  width: fit-content;
+  flex: 0 0 auto;
+}
+.sr-entity-container_stretch_by-child:has([data-stretch=max]) {
+  width: 100%;
+  flex: 1 0 0;
+}

package/build/esm/lib/unstable/kit/components/EntityContainer/EntityContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type FlexProps } from '@gravity-ui/uikit';
+import './EntityContainer.css';
+export interface EntityContainerProps extends FlexProps {
+    children: React.ReactNode;
+    fill?: 'populated' | 'empty' | 'by-child';
+    stretch: 'max' | 'fit' | 'by-child';
+}
+export declare const EntityContainer: React.FC<EntityContainerProps>;

package/build/esm/lib/unstable/kit/components/EntityContainer/EntityContainer.js

@@ -0,0 +1,11 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Flex } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './EntityContainer.css';
+const b = block('entity-container');
+export const EntityContainer = (_a) => {
+    var { children, fill, stretch } = _a, restFlexProps = __rest(_a, ["children", "fill", "stretch"]);
+    return (React.createElement("div", { className: b({ stretch }), "data-stretch": stretch, "data-fill": fill },
+        React.createElement(Flex, Object.assign({ direction: "column", minWidth: 0 }, restFlexProps, { grow: 1 }), children)));
+};

package/build/esm/lib/unstable/kit/components/EntityContainer/index.d.ts

@@ -0,0 +1 @@
+export { EntityContainer, type EntityContainerProps } from './EntityContainer';

package/build/esm/lib/unstable/kit/components/EntityContainer/index.js

@@ -0,0 +1 @@
+export { EntityContainer } from './EntityContainer';

package/build/esm/lib/unstable/kit/components/EntityError/EntityError.css

@@ -0,0 +1,3 @@
+.sr-entity-error {
+  margin-top: 2px;
+}

package/build/esm/lib/unstable/kit/components/EntityError/EntityError.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './EntityError.css';
+export interface EntityErrorProps {
+    errorMessage?: string;
+    validationState?: 'invalid';
+}
+export declare const EntityError: React.FC<EntityErrorProps>;

package/build/esm/lib/unstable/kit/components/EntityError/EntityError.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './EntityError.css';
+const b = block('entity-error');
+export const EntityError = ({ errorMessage, validationState }) => {
+    if (validationState === 'invalid' && errorMessage) {
+        return (React.createElement(Text, { className: b(), color: "danger" }, errorMessage));
+    }
+    return null;
+};

package/build/esm/lib/unstable/kit/components/EntityError/index.d.ts

@@ -0,0 +1 @@
+export { EntityError, type EntityErrorProps } from './EntityError';

package/build/esm/lib/unstable/kit/components/EntityError/index.js

@@ -0,0 +1 @@
+export { EntityError } from './EntityError';

package/build/esm/lib/unstable/kit/components/LayoutContainer/LayoutContainer.css

@@ -0,0 +1,11 @@
+.sr-layout-container {
+  width: fit-content;
+  flex: 0 0 auto;
+}
+.sr-layout-container:has([data-stretch=max]) {
+  width: 100%;
+  flex: 1 0 0;
+}
+.sr-layout-container_hide-empty:not(:has([data-fill=populated])) {
+  display: none;
+}

package/build/esm/lib/unstable/kit/components/LayoutContainer/LayoutContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type FlexProps } from '@gravity-ui/uikit';
+import './LayoutContainer.css';
+export interface LayoutContainerProps extends FlexProps {
+    children: React.ReactNode;
+    hideEmpty?: boolean;
+}
+export declare const LayoutContainer: React.FC<LayoutContainerProps>;

package/build/esm/lib/unstable/kit/components/LayoutContainer/LayoutContainer.js

@@ -0,0 +1,10 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Flex } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './LayoutContainer.css';
+const b = block('layout-container');
+export const LayoutContainer = (_a) => {
+    var { className, children, hideEmpty = false } = _a, restProps = __rest(_a, ["className", "children", "hideEmpty"]);
+    return (React.createElement(Flex, Object.assign({ className: b({ 'hide-empty': hideEmpty }, className), direction: "column" }, restProps), children));
+};

package/build/esm/lib/unstable/kit/components/LayoutContainer/index.d.ts

@@ -0,0 +1 @@
+export { LayoutContainer, type LayoutContainerProps } from './LayoutContainer';

package/build/esm/lib/unstable/kit/components/LayoutContainer/index.js

@@ -0,0 +1 @@
+export { LayoutContainer } from './LayoutContainer';

package/build/esm/lib/unstable/kit/components/LongValue/LongValue.css

@@ -0,0 +1,19 @@
+.sr-long-value {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sr-long-value_open {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+.sr-long-value_long {
+  cursor: pointer;
+}
+.sr-long-value_long:hover {
+  color: var(--g-color-text-secondary);
+}
+.sr-long-value_long.sr-long-value_secondary:hover {
+  color: var(--g-color-text-primary);
+}

package/build/esm/lib/unstable/kit/components/LongValue/LongValue.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type TextProps } from '@gravity-ui/uikit';
+import './LongValue.css';
+export interface LongValueProps extends Omit<TextProps, 'children'> {
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    value?: string | number | boolean;
+}
+export declare const LongValue: React.FC<LongValueProps>;

package/build/esm/lib/unstable/kit/components/LongValue/LongValue.js

@@ -0,0 +1,39 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './LongValue.css';
+const b = block('long-value');
+export const LongValue = (_a) => {
+    var { className, color, onClick, value } = _a, restProps = __rest(_a, ["className", "color", "onClick", "value"]);
+    const ref = React.useRef(null);
+    const openRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [long, setLong] = React.useState(false);
+    const handleClick = React.useCallback((event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        setOpen((current) => {
+            openRef.current = !current;
+            return !current;
+        });
+    }, [onClick]);
+    React.useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node) {
+            return undefined;
+        }
+        openRef.current = false;
+        setOpen(false);
+        const measure = () => {
+            if (openRef.current || (node.offsetWidth === 0 && node.scrollWidth === 0)) {
+                return;
+            }
+            setLong(node.scrollWidth > node.offsetWidth);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [value]);
+    return (React.createElement(Text, Object.assign({ as: "div" }, restProps, { ref: ref, color: color, className: b({ open, long }, className), onClick: long ? handleClick : undefined }), value));
+};

package/build/esm/lib/unstable/kit/components/LongValue/index.d.ts

@@ -0,0 +1 @@
+export { LongValue, type LongValueProps } from './LongValue';

package/build/esm/lib/unstable/kit/components/LongValue/index.js

@@ -0,0 +1 @@
+export { LongValue } from './LongValue';

package/build/esm/lib/unstable/kit/components/MonacoContainer/MonacoContainer.css

@@ -0,0 +1,21 @@
+.sr-monaco-container {
+  position: relative;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.sr-monaco-container__header {
+  padding: calc(var(--g-spacing-base) * 1.5) calc(var(--g-spacing-base) * 4);
+  border-bottom: 1px solid var(--g-color-line-generic);
+  background-color: var(--g-color-base-float-hover);
+}
+.sr-monaco-container__control {
+  position: relative;
+}
+.sr-monaco-container__control-inner {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

package/build/esm/lib/unstable/kit/components/MonacoContainer/MonacoContainer.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './MonacoContainer.css';
+export interface MonacoContainerProps {
+    children: React.ReactNode;
+    dialog?: boolean;
+    height: string | number;
+    language?: string;
+    toggleDialogVisibility?: () => void;
+    width: string | number;
+    withDialog?: boolean;
+    qa?: string;
+}
+export declare const MonacoContainer: React.FC<MonacoContainerProps>;

package/build/esm/lib/unstable/kit/components/MonacoContainer/MonacoContainer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ChevronsCollapseUpRight, ChevronsExpandUpRight, Code } from '@gravity-ui/icons';
+import { Button, Flex, Icon, Text } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './MonacoContainer.css';
+const b = block('monaco-container');
+export const MonacoContainer = ({ children, dialog, height, language, toggleDialogVisibility, width, withDialog, qa, }) => {
+    return (React.createElement("div", { className: b(), "data-qa": qa },
+        React.createElement(Flex, { alignItems: "center", justifyContent: "space-between", className: b('header') },
+            React.createElement(Flex, { alignItems: "center", gap: 1 },
+                React.createElement(Icon, { data: Code, size: 16 }),
+                React.createElement(Text, { variant: "subheader-1" }, language)),
+            withDialog ? (React.createElement(Button, { onClick: toggleDialogVisibility, view: "flat-secondary", qa: `${qa}-dialog-toggler` },
+                React.createElement(Icon, { data: dialog ? ChevronsCollapseUpRight : ChevronsExpandUpRight, size: 16 }))) : null),
+        React.createElement("div", { className: b('control'), style: { width, height } },
+            React.createElement("div", { className: b('control-inner') }, children))));
+};

package/build/esm/lib/unstable/kit/components/MonacoContainer/index.d.ts

@@ -0,0 +1 @@
+export { MonacoContainer, type MonacoContainerProps } from './MonacoContainer';

package/build/esm/lib/unstable/kit/components/MonacoContainer/index.js

@@ -0,0 +1 @@
+export { MonacoContainer } from './MonacoContainer';

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

@@ -1,5 +1,9 @@
 export { ArrayRemoveButton, type ArrayRemoveButtonProps } from './ArrayRemoveButton';
-export { ControlContainer, type ControlContainerProps } from './ControlContainer';
-export { ControlError, type ControlErrorProps } from './ControlError';
+export { CopyButton, type CopyButtonProps } from './CopyButton';
+export { EmptyEntityValue } from './EmptyEntityValue';
+export { EntityContainer, type EntityContainerProps } from './EntityContainer';
+export { EntityError, type EntityErrorProps } from './EntityError';
 export { HTMLContent, type HTMLContentProps } from './HTMLContent';
-export { WrapperContainer, type WrapperContainerProps } from './WrapperContainer';
+export { LayoutContainer, type LayoutContainerProps } from './LayoutContainer';
+export { LongValue, type LongValueProps } from './LongValue';
+export { MonacoContainer, type MonacoContainerProps } from './MonacoContainer';

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

@@ -1,5 +1,9 @@
 export { ArrayRemoveButton } from './ArrayRemoveButton';
-export { ControlContainer } from './ControlContainer';
-export { ControlError } from './ControlError';
+export { CopyButton } from './CopyButton';
+export { EmptyEntityValue } from './EmptyEntityValue';
+export { EntityContainer } from './EntityContainer';
+export { EntityError } from './EntityError';
 export { HTMLContent } from './HTMLContent';
-export { WrapperContainer } from './WrapperContainer';
+export { LayoutContainer } from './LayoutContainer';
+export { LongValue } from './LongValue';
+export { MonacoContainer } from './MonacoContainer';

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

@@ -0,0 +1,2 @@
+export declare const DASH = "\u2014";
+export declare const DEFAULT_DATE_FORMAT = "DD.MM.YYYY HH:mm";

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

@@ -0,0 +1,2 @@
+export const DASH = '—';
+export const DEFAULT_DATE_FORMAT = 'DD.MM.YYYY HH:mm';