@moysklad/uikit 30.4.0 → 31.20.0

package/dist/components/LabelValueDate/LabelValueDate.js

@@ -6,8 +6,8 @@ import { Datepicker } from "../Datepicker/Datepicker.js";
 import { dateFormatter, parseSelectedDate } from "../Datepicker/utils/index.js";
 import { useLocaleContext } from "../../context/contexts/LocaleContext.js";
 import { Date12Icon } from "../../icon/index.js";
+import { CustomDatepickerDropdownContent } from "../_shared/CustomDatepickerDropdownContent/CustomDatepickerDropdownContent.js";
 import { LabelValue } from "../LabelValue/LabelValue.js";
-import { DropdownContent } from "./DropdownContent/index.js";
 import LabelValueDate_module from "./LabelValueDate.module.js";
 const BasicLabelValueDate = /*#__PURE__*/ forwardRef(({ value, label, emptyText = 'Не указано', dateTimeFormatOptions, defaultTime, helperText, icon, iconPosition, id, inputClassName, isTimeRequired, placeholder, presets, setInitialDateIntoInput, presetsLabel, showIcon, showTime, showTimeText, onCalendarClose, onChange, onPick, onEnterPress, onTimeToggleChange, onDayClick, ...props }, ref)=>{
     const { lang, locale } = useLocaleContext();
@@ -114,7 +114,7 @@ const BasicLabelValueDate = /*#__PURE__*/ forwardRef(({ value, label, emptyText
                                 tabIndex: 0,
                                 onFocus: focusOnLastElement
                             }),
-                            /*#__PURE__*/ jsx(DropdownContent, {
+                            /*#__PURE__*/ jsx(CustomDatepickerDropdownContent, {
                                 testId: calendarTestId,
                                 label: label,
                                 error: props.error,

package/dist/components/LabelValueFile/DeleteButton/DeleteButton.d.ts

@@ -0,0 +1,9 @@
+import type { KeyboardEventHandler, MouseEventHandler } from 'react';
+interface DeleteButtonProps {
+    testId?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    onKeyUp?: KeyboardEventHandler<HTMLButtonElement>;
+}
+export declare const DeleteButton: (props: DeleteButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LabelValueFile/DeleteButton/DeleteButton.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "../../Button/Button.js";
+import { Delete12Icon } from "../../../icon/components/Delete12Icon.js";
+import LabelValueFile_module from "../LabelValueFile.module.js";
+const DeleteButton = (props)=>/*#__PURE__*/ jsx(Button, {
+        testId: props.testId,
+        className: LabelValueFile_module.independentButton,
+        type: "button",
+        variant: "filled",
+        size: "m",
+        isIconButton: true,
+        onClick: props.onClick,
+        onKeyDown: props.onKeyDown,
+        onKeyUp: props.onKeyUp,
+        children: /*#__PURE__*/ jsx(Delete12Icon, {})
+    });
+export { DeleteButton };

package/dist/components/LabelValueFile/FilePreviewIcon/FilePreviewIcon.d.ts

@@ -0,0 +1,7 @@
+import type { IFile } from '../../FileUploader/FileUploader';
+interface FilePreviewIconProps {
+    testId?: string;
+    file?: IFile;
+}
+export declare const FilePreviewIcon: (props: FilePreviewIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/LabelValueFile/FilePreviewIcon/FilePreviewIcon.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { getOptionalTestId } from "../../../common/index.js";
+import { EmptyFile16Icon } from "../../../icon/components/EmptyFile16Icon.js";
+import FilePreviewIcon_module from "./FilePreviewIcon.module.js";
+const FilePreviewIcon = (props)=>{
+    if (!props.file) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: FilePreviewIcon_module.container,
+        "data-test-id": getOptionalTestId(props.testId, 'container'),
+        children: /*#__PURE__*/ jsx(EmptyFile16Icon, {
+            className: FilePreviewIcon_module.icon
+        })
+    });
+};
+export { FilePreviewIcon };

package/dist/components/LabelValueFile/FilePreviewIcon/FilePreviewIcon.module.js

@@ -0,0 +1,6 @@
+import "./FilePreviewIcon_module.css";
+const FilePreviewIcon_module = {
+    container: "container-r7ATlI",
+    icon: "icon-i1oJmM"
+};
+export default FilePreviewIcon_module;

package/dist/components/LabelValueFile/FilePreviewIcon/FilePreviewIcon_module.css

@@ -0,0 +1,10 @@
+.container-r7ATlI {
+  color: var(--elements-normal, #5f6d79);
+  align-items: center;
+  display: flex;
+}
+
+.icon-i1oJmM {
+  cursor: pointer;
+}
+

package/dist/components/LabelValueFile/ImagePreview/ImagePreview.d.ts

@@ -0,0 +1,8 @@
+import type { IFile } from '../../FileUploader/FileUploader';
+interface ImagePreviewProps {
+    testId?: string;
+    file: IFile;
+    onVisibilityChange?: (visible: boolean) => void;
+}
+export declare const ImagePreview: (props: ImagePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LabelValueFile/ImagePreview/ImagePreview.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cn, getOptionalTestId } from "../../../common/index.js";
+import { FileUploaderImagePreviewModal } from "../../FileUploader/components/index.js";
+import LabelValueFile_module from "../LabelValueFile.module.js";
+import ImagePreview_module from "./ImagePreview.module.js";
+const ImagePreview = (props)=>{
+    const buttonRef = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const changeVisibility = (visible)=>{
+        setIsVisible(visible);
+        props.onVisibilityChange?.(visible);
+    };
+    const handleError = ()=>{
+        setIsError(true);
+    };
+    const handleLoad = ()=>{
+        setIsError(false);
+    };
+    return /*#__PURE__*/ jsxs("button", {
+        ref: buttonRef,
+        className: cn(LabelValueFile_module.button, LabelValueFile_module.independentButton, ImagePreview_module.imagePreviewButton),
+        onClick: (event)=>{
+            event.stopPropagation();
+            event.preventDefault();
+            changeVisibility(true);
+        },
+        "data-test-id": getOptionalTestId(props.testId, 'button'),
+        children: [
+            /*#__PURE__*/ jsx("img", {
+                "data-test-id": props.testId,
+                src: props.file.tinyImage ?? props.file.preview,
+                className: isError ? void 0 : ImagePreview_module.image,
+                onError: handleError,
+                onLoad: handleLoad
+            }),
+            /*#__PURE__*/ jsx("div", {
+                onClick: (event)=>event.stopPropagation(),
+                children: /*#__PURE__*/ jsx(FileUploaderImagePreviewModal, {
+                    testId: getOptionalTestId(props.testId, 'modal'),
+                    isVisible: isVisible,
+                    onClose: ()=>{
+                        changeVisibility(false);
+                        buttonRef.current?.focus();
+                    },
+                    imgSrc: props.file.preview
+                })
+            })
+        ]
+    });
+};
+export { ImagePreview };

package/dist/components/LabelValueFile/ImagePreview/ImagePreview.module.js

@@ -0,0 +1,6 @@
+import "./ImagePreview_module.css";
+const ImagePreview_module = {
+    image: "image-TUjHkb",
+    imagePreviewButton: "imagePreviewButton-zVgbzJ"
+};
+export default ImagePreview_module;

package/dist/components/LabelValueFile/ImagePreview/ImagePreview_module.css

@@ -0,0 +1,13 @@
+.image-TUjHkb {
+  all: unset;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+}
+
+.imagePreviewButton-zVgbzJ {
+  all: unset;
+  align-items: center;
+  display: flex;
+}
+

package/dist/components/LabelValueFile/LabelValueFile.d.ts

@@ -0,0 +1,7 @@
+import { type IUseFileUploaderResult } from '../FileUploader/FileUploader';
+import { type SharedLabelValueProps } from '../LabelValue/LabelValue';
+export interface LabelValueFileProps extends Omit<SharedLabelValueProps, 'valueBlockContent' | 'dropdownClassName' | 'dropdownStyles' | 'onDropdownClose' | 'onChange'> {
+    fileUploader: IUseFileUploaderResult;
+    emptyText?: string;
+}
+export declare const LabelValueFile: ({ fileUploader, emptyText, ...props }: LabelValueFileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LabelValueFile/LabelValueFile.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
+import { getOptionalTestId } from "../../common/index.js";
+import { FileUploader } from "../FileUploader/FileUploader.js";
+import { LabelValue } from "../LabelValue/LabelValue.js";
+import { ValueBlock } from "./ValueBlock/ValueBlock.js";
+import LabelValueFile_module from "./LabelValueFile.module.js";
+const LabelValueFile = ({ fileUploader, emptyText = 'Загрузить', ...props })=>{
+    const uploadedFile = useMemo(()=>fileUploader.files[0], [
+        fileUploader.files
+    ]);
+    const isEmpty = !uploadedFile;
+    const needOpenFileLoaderOnClick = isEmpty && !props.disabled;
+    const handleClick = (event)=>{
+        props.onClick?.(event);
+        if (needOpenFileLoaderOnClick) return void fileUploader.open();
+        downloadAnchorRef.current?.click();
+    };
+    const downloadAnchorRef = useRef(null);
+    return /*#__PURE__*/ jsx(LabelValue, {
+        ...props,
+        className: LabelValueFile_module.labelValueContainer,
+        value: uploadedFile?.preview ?? emptyText,
+        onClick: handleClick,
+        renderCustomValueBlock: (valueBlockProps)=>/*#__PURE__*/ jsx(FileUploader.Trigger, {
+                ...fileUploader.getInputProps(),
+                multiple: false,
+                children: /*#__PURE__*/ jsx(ValueBlock, {
+                    testId: getOptionalTestId(props.testId, 'value-block'),
+                    label: valueBlockProps.label,
+                    fileUploader: fileUploader,
+                    emptyText: emptyText,
+                    file: uploadedFile,
+                    disabled: valueBlockProps.disabled,
+                    error: valueBlockProps.error,
+                    downloadAnchorRef: downloadAnchorRef,
+                    needShowLabelTooltip: valueBlockProps.isNeedShowLabelTooltip
+                })
+            })
+    });
+};
+export { LabelValueFile };

package/dist/components/LabelValueFile/LabelValueFile.module.js

@@ -0,0 +1,12 @@
+import "./LabelValueFile_module.css";
+const LabelValueFile_module = {
+    button: "button-Zc4UKH",
+    empty: "empty-8Hb4FL",
+    disabled: "disabled-zkmcEm",
+    default: "default-Hmk1zy",
+    labelValueContainer: "labelValueContainer-dC8M8n",
+    independentButton: "independentButton-rhTGKT",
+    error: "error-Bl2Ors",
+    buttonText: "buttonText-tgGQM3"
+};
+export default LabelValueFile_module;

package/dist/components/LabelValueFile/LabelValueFile_module.css

@@ -0,0 +1,57 @@
+.button-Zc4UKH {
+  all: unset;
+  cursor: pointer;
+  align-items: center;
+  gap: 4px;
+  max-width: fit-content;
+  display: flex;
+  overflow: hidden;
+}
+
+.empty-8Hb4FL {
+  flex: 1;
+  max-width: 100%;
+}
+
+.disabled-zkmcEm.empty-8Hb4FL {
+  cursor: default;
+}
+
+.default-Hmk1zy, .labelValueContainer-dC8M8n:active:has(.independentButton-rhTGKT:active) .default-Hmk1zy {
+  color: var(--button-primary-normal);
+}
+
+.button-Zc4UKH:focus-visible {
+  outline: 1px solid var(--elements-hover);
+  outline-offset: -1px;
+}
+
+.default-Hmk1zy:hover {
+  color: var(--button-primary-hover);
+}
+
+.labelValueContainer-dC8M8n:active .default-Hmk1zy {
+  color: var(--button-primary-pressed);
+}
+
+.error-Bl2Ors {
+  color: var(--text-critical);
+}
+
+.disabled-zkmcEm {
+  color: var(--text-primary);
+}
+
+.buttonText-tgGQM3 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.buttonText-tgGQM3:after {
+  content: "";
+  display: block;
+}
+

package/dist/components/LabelValueFile/ValueBlock/ValueBlock.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'react';
+import type { IFile, IUseFileUploaderResult } from '../../FileUploader/FileUploader';
+interface ValueBlockProps {
+    fileUploader: IUseFileUploaderResult;
+    label: string;
+    emptyText: string;
+    testId?: string;
+    file?: IFile;
+    downloadAnchorRef?: Ref<HTMLAnchorElement>;
+    disabled?: boolean;
+    error?: boolean;
+    needShowLabelTooltip?: () => boolean;
+}
+export declare const ValueBlock: (props: ValueBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LabelValueFile/ValueBlock/ValueBlock.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { getOptionalTestId } from "../../../common/index.js";
+import { cn } from "../../../common/css/index.js";
+import { mergeRefs } from "../../../common/react/mergeRefs.js";
+import { useValueBlock } from "../../LabelValue/hooks/useValueBlock.js";
+import { ValueBlockWrapper } from "../../LabelValue/ValueBlockWrapper.js";
+import { ValueTextWithHint } from "../../LabelValue/ValueTextWithHint.js";
+import { Text } from "../../Text/Text.js";
+import { DeleteButton } from "../DeleteButton/DeleteButton.js";
+import { FilePreviewIcon } from "../FilePreviewIcon/FilePreviewIcon.js";
+import { ImagePreview } from "../ImagePreview/ImagePreview.js";
+import LabelValueFile_module from "../LabelValueFile.module.js";
+import ValueBlock_module from "./ValueBlock.module.js";
+const isImage = (file)=>file.type.startsWith('image/');
+const ValueBlock = (props)=>{
+    const mainButtonRef = useRef(null);
+    const valueBlock = useValueBlock({
+        value: props.file ? props.file?.name : props.emptyText
+    });
+    const isEmpty = !props.file;
+    const showDeleteButton = !props.disabled && !isEmpty;
+    const getButtonColorStyle = ()=>{
+        if (props.disabled && isEmpty) return LabelValueFile_module.disabled;
+        if (props.error) return LabelValueFile_module.error;
+        return LabelValueFile_module["default"];
+    };
+    const deleteFile = ()=>{
+        if (props.file) props.fileUploader.removeFile(props.file);
+    };
+    const deleteByKeyboard = (event)=>{
+        event.preventDefault();
+        deleteFile();
+        mainButtonRef.current?.focus();
+    };
+    const handleDeleteButtonClick = (event)=>{
+        event.stopPropagation();
+        deleteFile();
+    };
+    const handleDeleteButtonKeyUp = (event)=>{
+        if (' ' === event.key) deleteByKeyboard(event);
+    };
+    const handleDeleteButtonKeyDown = (event)=>{
+        if ('Enter' === event.key) deleteByKeyboard(event);
+    };
+    const isShowLabelTooltip = ()=>(props.needShowLabelTooltip?.() && valueBlock.isValueHintForceDisplayed) ?? false;
+    return /*#__PURE__*/ jsxs(ValueBlockWrapper, {
+        testId: props.testId,
+        className: ValueBlock_module.container,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: cn(ValueBlock_module.buttonsContainer, isEmpty && LabelValueFile_module.empty),
+                children: [
+                    props.file && isImage(props.file) && /*#__PURE__*/ jsx(ImagePreview, {
+                        testId: getOptionalTestId(props.testId, 'image-preview'),
+                        file: props.file,
+                        onVisibilityChange: ()=>{
+                            valueBlock.onHintVisibilityChange(false);
+                        }
+                    }),
+                    /*#__PURE__*/ jsx(ValueTextWithHint, {
+                        isHintVisible: valueBlock.isHintVisible || valueBlock.isValueHintForceDisplayed,
+                        onHintVisibilityChange: valueBlock.onHintVisibilityChange,
+                        value: props.file ? props.file?.name : props.emptyText,
+                        isShowLabelTooltip: isShowLabelTooltip,
+                        label: props.label,
+                        children: /*#__PURE__*/ jsxs("button", {
+                            "data-test-id": getOptionalTestId(props.testId, 'button'),
+                            ref: mergeRefs([
+                                mainButtonRef,
+                                valueBlock.valueBlockInnerRef
+                            ]),
+                            className: cn(LabelValueFile_module.button, getButtonColorStyle(), isEmpty && LabelValueFile_module.empty),
+                            disabled: props.disabled && isEmpty,
+                            onFocus: valueBlock.handleFocus,
+                            onBlur: valueBlock.handleBlur,
+                            onClick: ()=>{
+                                valueBlock.onHintVisibilityChange(false);
+                            },
+                            children: [
+                                props.file && !isImage(props.file) && /*#__PURE__*/ jsx(FilePreviewIcon, {
+                                    file: props.file,
+                                    testId: getOptionalTestId(props.testId, 'file-icon')
+                                }),
+                                props.file ? /*#__PURE__*/ jsx(Text.Body, {
+                                    testId: getOptionalTestId(props.testId, 'anchor'),
+                                    ref: mergeRefs([
+                                        props.downloadAnchorRef,
+                                        valueBlock.valueTooltip.ref
+                                    ]),
+                                    as: "a",
+                                    tabIndex: -1,
+                                    className: LabelValueFile_module.buttonText,
+                                    href: props.file?.preview,
+                                    download: props.file?.name,
+                                    onClick: (event)=>{
+                                        event.stopPropagation();
+                                    },
+                                    children: props.file?.name
+                                }) : /*#__PURE__*/ jsx(Text.Body, {
+                                    as: "span",
+                                    ref: mergeRefs([
+                                        valueBlock.valueTooltip.ref
+                                    ]),
+                                    className: LabelValueFile_module.buttonText,
+                                    testId: getOptionalTestId(props.testId, 'empty-text'),
+                                    children: props.emptyText
+                                })
+                            ]
+                        })
+                    }),
+                    showDeleteButton && /*#__PURE__*/ jsx(DeleteButton, {
+                        testId: getOptionalTestId(props.testId, 'delete-button'),
+                        onClick: handleDeleteButtonClick,
+                        onKeyUp: handleDeleteButtonKeyUp,
+                        onKeyDown: handleDeleteButtonKeyDown
+                    })
+                ]
+            }),
+            showDeleteButton && /*#__PURE__*/ jsx("div", {
+                "data-test-id": getOptionalTestId(props.testId, 'click-preventer'),
+                className: ValueBlock_module.clickPreventer,
+                onClick: (event)=>{
+                    event.stopPropagation();
+                }
+            })
+        ]
+    });
+};
+export { ValueBlock };

package/dist/components/LabelValueFile/ValueBlock/ValueBlock.module.js

@@ -0,0 +1,7 @@
+import "./ValueBlock_module.css";
+const ValueBlock_module = {
+    container: "container-iEy0s2",
+    buttonsContainer: "buttonsContainer-xf1Ur5",
+    clickPreventer: "clickPreventer-EuiJqA"
+};
+export default ValueBlock_module;

package/dist/components/LabelValueFile/ValueBlock/ValueBlock_module.css

@@ -0,0 +1,17 @@
+.container-iEy0s2 {
+  gap: 0;
+}
+
+.buttonsContainer-xf1Ur5 {
+  gap: 4px;
+  width: fit-content;
+  max-width: 100%;
+  display: flex;
+}
+
+.clickPreventer-EuiJqA {
+  cursor: default;
+  flex: 1;
+  height: 20px;
+}
+

package/dist/components/LabelValueInput/DropdownConnent/DropdownContent.d.ts

@@ -11,9 +11,11 @@ export interface DropdownContentProps {
     error?: boolean;
     info?: string;
     placeholder?: string;
+    clearable?: boolean;
     inputProps?: ComponentPropsWithoutRef<typeof Input>;
     onChange?: ChangeEventHandler<HTMLInputElement>;
     onCloseByKeyboard: (event: KeyboardEvent | FocusEvent) => void;
     renderActions?: (args: RenderActionsParams) => ReactNode;
+    isSelectInputValueAfterOpen?: boolean;
 }
 export declare const DropdownContent: import("react").ForwardRefExoticComponent<DropdownContentProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/LabelValueInput/DropdownConnent/DropdownContent.js

@@ -7,6 +7,7 @@ const DropdownContent = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const ref = useRef(null);
     useEffect(()=>{
         ref.current?.focus();
+        if (props.isSelectInputValueAfterOpen) return void ref.current?.setSelectionRange(0, -1);
         ref.current?.setSelectionRange(-1, -1);
     }, []);
     const handleInputKeyDown = (event)=>{
@@ -35,6 +36,7 @@ const DropdownContent = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
                         value: props.value,
                         onChange: props.onChange,
                         error: props.error,
+                        clearable: props.clearable,
                         info: props.info,
                         placeholder: props.placeholder,
                         onKeyDown: handleInputKeyDown,

package/dist/components/LabelValueLink/LabelValueLink.d.ts

@@ -0,0 +1,2 @@
+import type { LabelValueInputProps } from '../LabelValueInput/LabelValueInput';
+export declare const LabelValueLink: import("react").ForwardRefExoticComponent<LabelValueInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LabelValueLink/LabelValueLink.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { LabelValue, LabelValueVariant } from "../LabelValue/LabelValue.js";
+import { useIsElementOverflowing } from "../../hooks/index.js";
+import { Edit12Icon } from "../../icon/index.js";
+import { removeZeroWithSpace } from "../../utils/index.js";
+import { Button, ButtonSize, ButtonVariants } from "../Button/Button.js";
+import { DropdownContent } from "../LabelValueInput/DropdownConnent/DropdownContent.js";
+import { LabelValueLinkValueBlock } from "./ValueBlock/LabelValueLinkValueBlock.js";
+import { normalizeLinkValue } from "./normalizeLinkValue.js";
+import { useLinkDropdownValue } from "./useLinkDropdownValue.js";
+import LabelValueLink_module from "./LabelValueLink.module.js";
+const LabelValueLink = /*#__PURE__*/ forwardRef(({ emptyText = 'Не указано', value: valueProp, label, disabled, className, error, required, name, info, inputProps, inputRef, testId, placeholder, onChange, ...props }, ref)=>{
+    const trimmedValueProp = removeZeroWithSpace(valueProp)?.trim();
+    const { dropdownValue, handleChange, submitNormalized, synchronize } = useLinkDropdownValue({
+        value: trimmedValueProp,
+        onChange
+    });
+    const labelOverflowing = useIsElementOverflowing([
+        label
+    ]);
+    const value = normalizeLinkValue(trimmedValueProp) || emptyText;
+    const isEmpty = !trimmedValueProp;
+    return /*#__PURE__*/ jsx(LabelValue, {
+        ...props,
+        testId: testId,
+        ref: ref,
+        label: label,
+        renderIcon: disabled || isEmpty || error ? void 0 : ()=>/*#__PURE__*/ jsx(Button, {
+                isIconButton: true,
+                size: ButtonSize.M,
+                variant: ButtonVariants.FILLED,
+                className: LabelValueLink_module.icon,
+                children: /*#__PURE__*/ jsx(Edit12Icon, {})
+            }),
+        value: value,
+        isEmpty: isEmpty,
+        className: className,
+        error: error,
+        required: required,
+        disabled: disabled,
+        iconFollowsValueHover: false,
+        valueVariant: LabelValueVariant.LINK,
+        labelRef: labelOverflowing.ref,
+        onDropdownOpen: synchronize,
+        onDropdownClose: submitNormalized,
+        renderCustomValueBlock: (props)=>/*#__PURE__*/ jsx(LabelValueLinkValueBlock, {
+                ...props,
+                isDefaultValue: value === emptyText,
+                isNeedShowLabelTooltip: labelOverflowing.getIsOverflowing
+            }),
+        dropdownContent: ({ closeByKeyboardHandler })=>/*#__PURE__*/ jsx("div", {
+                className: LabelValueLink_module.dropdownContent,
+                children: /*#__PURE__*/ jsx(DropdownContent, {
+                    testId: testId,
+                    label: label,
+                    name: name,
+                    value: dropdownValue,
+                    onChange: handleChange,
+                    error: error,
+                    info: info,
+                    clearable: true,
+                    inputProps: inputProps,
+                    ref: inputRef,
+                    placeholder: placeholder,
+                    onCloseByKeyboard: (e)=>{
+                        closeByKeyboardHandler(e);
+                        submitNormalized();
+                    },
+                    isSelectInputValueAfterOpen: true
+                })
+            })
+    });
+});
+LabelValueLink.displayName = 'LabelValueLink';
+export { LabelValueLink };

package/dist/components/LabelValueLink/LabelValueLink.module.js

@@ -0,0 +1,6 @@
+import "./LabelValueLink_module.css";
+const LabelValueLink_module = {
+    dropdownContent: "dropdownContent-lMhQ9d",
+    icon: "icon-bV_lt1"
+};
+export default LabelValueLink_module;

package/dist/components/LabelValueLink/LabelValueLink_module.css

@@ -0,0 +1,11 @@
+.dropdownContent-lMhQ9d {
+  box-sizing: border-box;
+  width: 445px;
+  padding: 12px 16px;
+}
+
+.icon-bV_lt1:focus-visible {
+  outline: 1px solid var(--elements-hover, #091739);
+  box-shadow: none;
+}
+

package/dist/components/LabelValueLink/ValueBlock/LabelValueLinkValueBlock.d.ts

@@ -0,0 +1,2 @@
+import type { ValueBlockProps } from '../../LabelValue/types';
+export declare const LabelValueLinkValueBlock: import("react").ForwardRefExoticComponent<ValueBlockProps & import("react").RefAttributes<HTMLDivElement>>;