@moysklad/uikit 30.4.0 → 31.20.0

package/dist/components/LabelValue/LabelValue.d.ts

@@ -1,14 +1,7 @@
-import { type ComponentPropsWithoutRef, type CSSProperties, type FocusEventHandler, type HTMLAttributes, type KeyboardEventHandler, type ReactNode, type Ref } from 'react';
+import { type ComponentPropsWithoutRef, type CSSProperties, type HTMLAttributes, type KeyboardEventHandler, type ReactNode, type Ref } from 'react';
+import { type ValueOf } from '../../common';
 import { Help } from '../Help/Help';
-export interface ValueBlockContentArgs {
-    valueNode: ReactNode;
-    isLabelOverflow: boolean;
-    valueBlockRef?: Ref<HTMLDivElement> | null;
-    onFocus: FocusEventHandler<HTMLDivElement>;
-    onBlur: FocusEventHandler<HTMLDivElement>;
-    onKeyDown: KeyboardEventHandler<HTMLDivElement>;
-    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
-}
+import type { ValueBlockContentArgs, ValueBlockProps } from './types';
 export interface SharedLabelValueProps extends HTMLAttributes<HTMLDivElement> {
     label: string;
     className?: string;
@@ -19,9 +12,15 @@ export interface SharedLabelValueProps extends HTMLAttributes<HTMLDivElement> {
     helpPopupContent?: ComponentPropsWithoutRef<typeof Help>['popup'];
     dropdownClassName?: string;
     dropdownStyles?: CSSProperties;
+    labelRef?: Ref<HTMLElement>;
     valueBlockContent?: (args: ValueBlockContentArgs) => ReactNode;
     onDropdownClose?: () => void;
 }
+export declare const LabelValueVariant: {
+    readonly DEFAULT: "default";
+    readonly LINK: "link";
+};
+export type LabelValueVariantType = ValueOf<typeof LabelValueVariant>;
 export interface LabelValueProps extends SharedLabelValueProps {
     renderIcon?: (params: {
         stroke?: string;
@@ -31,12 +30,17 @@ export interface LabelValueProps extends SharedLabelValueProps {
     valueBlockRef?: Ref<HTMLDivElement>;
     customDropdown?: boolean;
     isCustomDropdownOpen?: boolean;
+    valueVariant?: LabelValueVariantType;
     dropdownContent?: (args: {
         closeHandler: () => void;
         closeByKeyboardHandler: (event: KeyboardEvent | FocusEvent) => void;
     }) => ReactNode;
     customDropdownTrigger?: ReactNode;
     onValueKeyUp?: KeyboardEventHandler;
+    renderCustomValueBlock?: (props: ValueBlockProps & {
+        ref?: Ref<HTMLDivElement>;
+    }) => ReactNode;
+    iconFollowsValueHover?: boolean;
     onDropdownClose?: () => void;
     onDropdownOpen?: () => void;
 }

package/dist/components/LabelValue/LabelValue.js

@@ -2,16 +2,27 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useState } from "react";
 import { cn } from "../../common/index.js";
 import { mergeRefs } from "../../common/react/mergeRefs.js";
+import { FieldLabel } from "../_shared/FieldLabel/FieldLabel.js";
 import { Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
-import { FieldLabel } from "../FieldLabel/FieldLabel.js";
 import { HelpSize } from "../Help/Help.js";
 import { TextColor, TextVariant } from "../Text/Text.js";
+import { useIsElementOverflowing } from "../../hooks/index.js";
+import { ValueBlock } from "./ValueBlock/ValueBlock.js";
 import { OPEN_BUTTONS } from "./consts.js";
-import { ValueBlock } from "./ValueBlock/index.js";
 import LabelValue_module from "./LabelValue.module.js";
-const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value, disabled, error, className, required = false, testId, helpPopupContent, valueBlockRef = null, customDropdown, isCustomDropdownOpen = false, customDropdownTrigger, valueBlockContent, dropdownContent, onFocus, onBlur, onValueKeyUp, onDropdownClose, onDropdownOpen, ...props }, forwardedRef)=>{
+const LabelValueVariant = {
+    DEFAULT: 'default',
+    LINK: 'link'
+};
+const variantClassNameMap = {
+    [LabelValueVariant.LINK]: LabelValue_module.containerLink
+};
+const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value, disabled, error, className, required = false, testId, helpPopupContent, valueBlockRef = null, customDropdown, isCustomDropdownOpen = false, customDropdownTrigger, labelRef, valueBlockContent, dropdownContent, onFocus, onBlur, onValueKeyUp, onDropdownClose, renderCustomValueBlock, iconFollowsValueHover = true, valueVariant = LabelValueVariant.DEFAULT, onDropdownOpen, ...props }, forwardedRef)=>{
     const valueBlockInnerRef = useRef(null);
     const labelValueDropdown = useDropdown();
+    const labelOverflowing = useIsElementOverflowing([
+        label
+    ]);
     const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);
     const isDropdownOpen = customDropdown ? isCustomDropdownOpen : labelValueDropdown.open;
     const openDropdown = ()=>{
@@ -44,11 +55,33 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
         props.onClick?.(event);
         openDropdown();
     };
+    const valueBlockMergedRef = mergeRefs([
+        valueBlockRef,
+        valueBlockInnerRef
+    ]);
+    const valueBlockProps = {
+        ref: valueBlockMergedRef,
+        testId,
+        value,
+        label,
+        disabled,
+        error,
+        isEmpty,
+        needShowLabelTooltip: isLabelOverflowing,
+        forceHideTooltip: isDropdownOpen,
+        onBlur,
+        onFocus,
+        onValueKeyDown: handleValueKeyDown,
+        onValueKeyUp: handleValueKeyUp,
+        renderIcon,
+        valueBlockContent,
+        isNeedShowLabelTooltip: labelOverflowing.getIsOverflowing
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs("div", {
                 ...props,
-                className: cn(LabelValue_module.container, className, isEmpty && LabelValue_module.empty, error && LabelValue_module.error, disabled && LabelValue_module.disabled),
+                className: cn(LabelValue_module.container, variantClassNameMap[valueVariant], iconFollowsValueHover && LabelValue_module.iconFollowsValueHover, className, isEmpty && LabelValue_module.empty, error && LabelValue_module.error, disabled && LabelValue_module.disabled),
                 ref: mergeRefs([
                     labelValueDropdown.triggerRef,
                     forwardedRef
@@ -62,7 +95,11 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
                         children: [
                             /*#__PURE__*/ jsx(FieldLabel, {
                                 label: label,
-                                required: required,
+                                labelRef: mergeRefs([
+                                    labelOverflowing.ref,
+                                    labelRef
+                                ]),
+                                required: required && !disabled,
                                 testId: testId,
                                 variant: TextVariant.caption,
                                 colorToken: TextColor.secondary,
@@ -70,28 +107,12 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
                                 helpProps: helpPopupContent ? {
                                     popup: helpPopupContent
                                 } : void 0,
+                                className: LabelValue_module.fieldLabel,
                                 helpButtonClassName: LabelValue_module.helpButtonContainer,
                                 helpSize: HelpSize.S
                             }),
-                            /*#__PURE__*/ jsx(ValueBlock, {
-                                ref: mergeRefs([
-                                    valueBlockRef,
-                                    valueBlockInnerRef
-                                ]),
-                                testId: testId,
-                                value: value,
-                                label: label,
-                                disabled: disabled,
-                                error: error,
-                                isEmpty: isEmpty,
-                                needShowLabelTooltip: isLabelOverflowing,
-                                forceHideTooltip: isDropdownOpen,
-                                onBlur: onBlur,
-                                onFocus: onFocus,
-                                onValueKeyDown: handleValueKeyDown,
-                                onValueKeyUp: handleValueKeyUp,
-                                renderIcon: renderIcon,
-                                valueBlockContent: valueBlockContent
+                            renderCustomValueBlock ? renderCustomValueBlock(valueBlockProps) : /*#__PURE__*/ jsx(ValueBlock, {
+                                ...valueBlockProps
                             })
                         ]
                     })
@@ -124,4 +145,4 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
     });
 });
 LabelValue.displayName = 'LabelValue';
-export { LabelValue };
+export { LabelValue, LabelValueVariant };

package/dist/components/LabelValue/LabelValue.module.js

@@ -1,18 +1,24 @@
 import "./LabelValue_module.css";
 const LabelValue_module = {
     container: "container-JJ318U",
+    valueBlock: "valueBlock-UgP3Nr",
     disabled: "disabled-OM6bi0",
+    containerLink: "containerLink-AscQ6D",
     error: "error-3roRLg",
-    valueBlock: "valueBlock-UgP3Nr",
     valueText: "valueText-JIWgmB",
-    iconContainer: "iconContainer-ZsK9qp",
     helpButtonContainer: "helpButtonContainer-C1lSsU",
+    iconContainer: "iconContainer-ZsK9qp",
+    fieldLabel: "fieldLabel-lu3Dux",
+    iconFollowsValueHover: "iconFollowsValueHover-mUM_uO",
     labelValueBlock: "labelValueBlock-pbU3kQ",
     empty: "empty-VyYkn0",
+    labelBlock: "labelBlock-p9nrQ3",
+    textWithRequiredMark: "textWithRequiredMark-j_8oxd",
+    labelText: "labelText-g0yIDb",
     overflowText: "overflowText-NCe0S_",
-    hint: "hint-qf0pZB",
-    hintText: "hintText-kzd4VM",
     hintTextWrapper: "hintTextWrapper-Hna0Tg",
+    hintText: "hintText-kzd4VM",
+    hint: "hint-qf0pZB",
     dropdown: "dropdown-vNmAaD",
     dropdownContent: "dropdownContent-To8e0l"
 };

package/dist/components/LabelValue/LabelValue_module.css

@@ -1,15 +1,7 @@
-.container-JJ318U:not(.disabled-OM6bi0, .error-3roRLg, :active) .valueBlock-UgP3Nr:hover .valueText-JIWgmB, .container-JJ318U:not(.disabled-OM6bi0, .error-3roRLg, :active) .valueBlock-UgP3Nr:hover .iconContainer-ZsK9qp {
-  color: var(--button-primary-hover, #0b7cff);
-}
-
 .container-JJ318U:active .valueBlock-UgP3Nr:focus {
   outline: none;
 }
 
-.container-JJ318U:active:not(.disabled-OM6bi0, .error-3roRLg, :has(.helpButtonContainer-C1lSsU:active)) .valueBlock-UgP3Nr .valueText-JIWgmB, .container-JJ318U:active:not(.disabled-OM6bi0, .error-3roRLg, :has(.helpButtonContainer-C1lSsU:active)) .valueBlock-UgP3Nr .iconContainer-ZsK9qp {
-  color: var(--button-primary-pressed, #005dc9);
-}
-
 .container-JJ318U.disabled-OM6bi0 {
   cursor: default;
 }
@@ -19,6 +11,26 @@
   box-shadow: none;
 }
 
+.container-JJ318U:not(.containerLink-AscQ6D):not(.disabled-OM6bi0, .error-3roRLg, :active) .valueBlock-UgP3Nr:hover .valueText-JIWgmB {
+  color: var(--button-primary-hover, #0b7cff);
+}
+
+.container-JJ318U:not(.containerLink-AscQ6D):active:not(.disabled-OM6bi0, .error-3roRLg, :has(.helpButtonContainer-C1lSsU:active)) .valueBlock-UgP3Nr .valueText-JIWgmB, .container-JJ318U:not(.containerLink-AscQ6D):active:not(.disabled-OM6bi0, .error-3roRLg, :has(.helpButtonContainer-C1lSsU:active)) .valueBlock-UgP3Nr .iconContainer-ZsK9qp {
+  color: var(--button-primary-pressed, #005dc9);
+}
+
+.container-JJ318U.containerLink-AscQ6D:not(.disabled-OM6bi0, .error-3roRLg, :active) .valueText-JIWgmB:hover {
+  color: var(--button-primary-hover, #0b7cff);
+}
+
+.container-JJ318U.containerLink-AscQ6D:not(.disabled-OM6bi0, .error-3roRLg) .valueText-JIWgmB:active, .container-JJ318U.containerLink-AscQ6D .fieldLabel-lu3Dux:active .valueText-JIWgmB, .container-JJ318U.containerLink-AscQ6D:not(.disabled-OM6bi0, .error-3roRLg):has(.fieldLabel-lu3Dux:active) .valueText-JIWgmB {
+  color: var(--button-primary-pressed, #005dc9);
+}
+
+.container-JJ318U.iconFollowsValueHover-mUM_uO:not(.disabled-OM6bi0, .error-3roRLg, :active) .valueBlock-UgP3Nr:hover .iconContainer-ZsK9qp {
+  color: var(--button-primary-hover, #0b7cff);
+}
+
 .labelValueBlock-pbU3kQ {
   flex-direction: column;
   gap: 2px;
@@ -29,9 +41,10 @@
   color: var(--button-primary-normal, #036ce5);
 }
 
-.valueBlock-UgP3Nr:focus {
+.valueBlock-UgP3Nr:focus-visible {
   outline: 1px solid var(--elements-hover, #091739);
-  border-radius: 1px;
+  outline-offset: -1px;
+  border-radius: 2px;
 }
 
 .valueText-JIWgmB {
@@ -48,6 +61,27 @@
   line-height: 20px;
 }
 
+.valueText-JIWgmB:focus-visible {
+  outline: 1px solid var(--elements-hover, #091739);
+}
+
+.labelBlock-p9nrQ3 {
+  justify-content: flex-start;
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.textWithRequiredMark-j_8oxd {
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+}
+
+.labelText-g0yIDb {
+  flex: 1;
+}
+
 .valueBlock-UgP3Nr {
   cursor: pointer;
   justify-content: flex-start;
@@ -77,25 +111,25 @@
   display: block;
 }
 
-.iconContainer-ZsK9qp {
-  justify-content: center;
-  align-items: center;
+.hintTextWrapper-Hna0Tg {
+  flex-direction: column;
   gap: 4px;
   display: flex;
 }
 
-.hint-qf0pZB {
-  box-sizing: border-box;
+.hintText-kzd4VM {
   overflow-wrap: break-word;
-  max-width: 300px;
 }
 
-.hintText-kzd4VM {
+.hint-qf0pZB {
+  box-sizing: border-box;
   overflow-wrap: break-word;
+  max-width: 300px;
 }
 
-.hintTextWrapper-Hna0Tg {
-  flex-direction: column;
+.iconContainer-ZsK9qp {
+  justify-content: center;
+  align-items: center;
   gap: 4px;
   display: flex;
 }

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

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

package/dist/components/LabelValue/ValueBlock/ValueBlock.js

@@ -0,0 +1,82 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getOptionalTestId } from "../../../common/index.js";
+import { mergeRefs } from "../../../common/react/mergeRefs.js";
+import { useValueBlock } from "../hooks/useValueBlock.js";
+import { ValueBlockWrapper } from "../ValueBlockWrapper.js";
+import { ValueIcon } from "../ValueIcon.js";
+import { ValueText } from "../ValueText.js";
+import { ValueTextWithHint } from "../ValueTextWithHint.js";
+const getValueTextVariant = (args)=>{
+    if (args.error) return 'critical';
+    if (args.isEmpty && !args.disabled) return 'buttonPrimary';
+    return 'primary';
+};
+const ValueBlock = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { isValueHintForceDisplayed, valueBlockInnerRef, valueTooltip, handleBlur, handleFocus, onHintVisibilityChange, icon, isHintVisible } = useValueBlock({
+        value: props.value,
+        forceHideTooltip: props.forceHideTooltip,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        error: props.error,
+        isCustomValueBlock: !!props.valueBlockContent,
+        renderIcon: props.renderIcon,
+        disabled: props.disabled
+    });
+    const valueIcon = /*#__PURE__*/ jsx(ValueIcon, {
+        children: icon ?? null
+    });
+    const valueText = /*#__PURE__*/ jsx(ValueText, {
+        as: "span",
+        ref: valueTooltip.ref,
+        colorVariant: getValueTextVariant({
+            disabled: props.disabled,
+            error: props.error,
+            isEmpty: props.isEmpty
+        }),
+        testId: props.testId,
+        value: props.value
+    });
+    const isShowLabelTooltip = ()=>(props.isNeedShowLabelTooltip?.() && isValueHintForceDisplayed) ?? false;
+    if (props.valueBlockContent) return props.valueBlockContent({
+        valueNode: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                valueText,
+                valueIcon
+            ]
+        }),
+        isLabelOverflow: props.needShowLabelTooltip ?? false,
+        valueBlockRef: forwardedRef,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: (event)=>props.onValueKeyDown?.(event),
+        onKeyUp: (event)=>props.onValueKeyUp?.(event),
+        getIsLabelOverflow: isShowLabelTooltip
+    });
+    return /*#__PURE__*/ jsxs(ValueBlockWrapper, {
+        testId: getOptionalTestId(props.testId, 'value-block'),
+        ref: mergeRefs([
+            forwardedRef,
+            valueBlockInnerRef
+        ]),
+        tabIndex: props.disabled ? void 0 : 0,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyUp: props.onValueKeyUp,
+        onKeyDown: props.onValueKeyDown,
+        children: [
+            /*#__PURE__*/ jsx(ValueTextWithHint, {
+                isHintVisible: isHintVisible,
+                label: props.label,
+                value: props.value,
+                onHintVisibilityChange: onHintVisibilityChange,
+                testId: props.testId,
+                isShowLabelTooltip: isShowLabelTooltip,
+                children: valueText
+            }),
+            valueIcon
+        ]
+    });
+});
+ValueBlock.displayName = 'ValueBlock';
+export { ValueBlock };

package/dist/components/LabelValue/ValueBlockWrapper.d.ts

@@ -0,0 +1,5 @@
+import { type HTMLAttributes } from 'react';
+import { type IHasTestId } from '../../common';
+export declare const ValueBlockWrapper: import("react").ForwardRefExoticComponent<IHasTestId & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LabelValue/ValueBlockWrapper.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/index.js";
+import LabelValue_module from "./LabelValue.module.js";
+const ValueBlockWrapper = /*#__PURE__*/ forwardRef(({ children, testId, className, ...rest }, ref)=>/*#__PURE__*/ jsx("div", {
+        ...rest,
+        ref: ref,
+        "data-test-id": testId,
+        className: cn(LabelValue_module.valueBlock, className),
+        children: children
+    }));
+ValueBlockWrapper.displayName = 'ValueBlockWrapper';
+export { ValueBlockWrapper };

package/dist/components/LabelValue/ValueIcon.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+type Props = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const ValueIcon: ({ children, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LabelValue/ValueIcon.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../common/index.js";
+import LabelValue_module from "./LabelValue.module.js";
+const ValueIcon = ({ children, className, ...rest })=>/*#__PURE__*/ jsx("div", {
+        ...rest,
+        className: cn(LabelValue_module.iconContainer, className),
+        children: children
+    });
+export { ValueIcon };

package/dist/components/LabelValue/ValueText.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { type ColorVariant } from '../Typography/utils';
+type Props<T extends ElementType = ElementType> = {
+    value: string | number;
+    testId?: string;
+    colorVariant?: ColorVariant;
+    as?: T;
+} & ComponentPropsWithoutRef<T>;
+export declare const ValueText: import("react").ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/LabelValue/ValueText.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/index.js";
+import { getTypographyStyle } from "../Typography/utils.js";
+import LabelValue_module from "./LabelValue.module.js";
+const ValueText = /*#__PURE__*/ forwardRef(({ value, testId, colorVariant, as: Component = 'span', className, style, ...restProps }, ref)=>{
+    const ComponentTag = Component;
+    return /*#__PURE__*/ jsx(ComponentTag, {
+        ref: ref,
+        className: cn(LabelValue_module.valueText, LabelValue_module.overflowText, className),
+        style: {
+            ...getTypographyStyle({
+                colorVariableName: '--value-text-color',
+                colorVariant
+            }),
+            ...style
+        },
+        "data-test-id": testId ? `${testId}-value` : void 0,
+        ...restProps,
+        children: value
+    });
+});
+ValueText.displayName = 'ValueText';
+export { ValueText };

package/dist/components/LabelValue/ValueTextWithHint.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    isHintVisible: boolean;
+    onHintVisibilityChange: (isVisible: boolean) => void;
+    value: string;
+    isShowLabelTooltip?: () => boolean;
+    label: string;
+    testId?: string;
+    hintTextClassName?: string;
+    children: JSX.Element;
+};
+export declare const ValueTextWithHint: ({ children, isHintVisible, onHintVisibilityChange, isShowLabelTooltip, label, testId, value, hintTextClassName, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LabelValue/ValueTextWithHint.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../common/css/cn.js";
+import { Hint } from "../Hint/Hint.js";
+import { Text, TextColor } from "../Text/Text.js";
+import LabelValue_module from "./LabelValue.module.js";
+const ValueTextWithHint = ({ children, isHintVisible, onHintVisibilityChange, isShowLabelTooltip, label, testId, value, hintTextClassName })=>/*#__PURE__*/ jsx(Hint, {
+        visible: isHintVisible,
+        onVisibleChange: onHintVisibilityChange,
+        overlay: /*#__PURE__*/ jsxs("div", {
+            className: LabelValue_module.hintTextWrapper,
+            children: [
+                isShowLabelTooltip?.() && /*#__PURE__*/ jsx(Text.H4, {
+                    className: LabelValue_module.hintText,
+                    colorToken: TextColor.invert,
+                    children: label
+                }),
+                /*#__PURE__*/ jsx(Text.Body, {
+                    testId: testId ? `${testId}-value-hint-text` : void 0,
+                    className: cn(LabelValue_module.hintText, hintTextClassName),
+                    colorToken: TextColor.invert,
+                    children: value
+                })
+            ]
+        }),
+        overlayClassName: LabelValue_module.hint,
+        placement: "bottom",
+        children: children
+    });
+export { ValueTextWithHint };

package/dist/components/LabelValue/hooks/useValueBlock.d.ts

@@ -0,0 +1,29 @@
+import { type FocusEventHandler, type ReactNode, type RefObject } from 'react';
+type Props<T extends HTMLElement> = {
+    value: string;
+    forceHideTooltip?: boolean;
+    onBlur?: FocusEventHandler<T>;
+    onFocus?: FocusEventHandler<T>;
+    renderIcon?: (params: {
+        stroke?: string;
+    }) => ReactNode;
+    error?: boolean;
+    isCustomValueBlock?: boolean;
+    disabled?: boolean;
+    forceHintShowRef?: RefObject<Element>;
+};
+export declare const useValueBlock: <T extends HTMLElement>({ value, forceHideTooltip, onBlur, onFocus, renderIcon, isCustomValueBlock, error, disabled, forceHintShowRef, }: Props<T>) => {
+    valueBlockInnerRef: RefObject<HTMLElement>;
+    valueTooltip: {
+        ref: RefObject<HTMLElement>;
+        isOverflowing: boolean;
+        getIsOverflowing: () => boolean;
+    };
+    isValueHintForceDisplayed: boolean;
+    handleBlur: FocusEventHandler<T>;
+    handleFocus: FocusEventHandler<T>;
+    onHintVisibilityChange: (isVisible: boolean) => void;
+    icon: ReactNode;
+    isHintVisible: boolean;
+};
+export {};

package/dist/components/LabelValue/hooks/useValueBlock.js

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from "react";
+import { useIsElementOverflowing } from "../../../hooks/useIsElementOverflowing/index.js";
+const ERROR_ICON_STROKE = 'var(--elements-critical, rgba(229, 3, 71, 1))';
+const DISABLED_ICON_STROKE = 'var(--elements-hover, rgb(9, 23, 57, 100%))';
+const getIconStroke = (args)=>{
+    if (args.isCustomValueBlock) return;
+    if (args.disabled) return DISABLED_ICON_STROKE;
+    if (args.error) return ERROR_ICON_STROKE;
+};
+const useValueBlock = ({ value, forceHideTooltip, onBlur, onFocus, renderIcon, isCustomValueBlock = false, error = false, disabled = false, forceHintShowRef })=>{
+    const focusTooltipTimeout = useRef();
+    const valueBlockInnerRef = useRef(null);
+    const valueOverflowing = useIsElementOverflowing([
+        value
+    ]);
+    const [isValueHintForceDisplayed, setIsValueHintForceDisplayed] = useState(false);
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    useEffect(()=>{
+        if (forceHideTooltip) setIsTooltipVisible(false);
+    }, [
+        forceHideTooltip
+    ]);
+    useEffect(()=>{
+        if (!valueOverflowing.isOverflowing) setIsTooltipVisible(false);
+    }, [
+        valueOverflowing.isOverflowing
+    ]);
+    const showValueTooltipOnFocus = (options = {})=>{
+        const { isForceShow = false } = options;
+        const isValueFocused = valueBlockInnerRef.current?.matches(':focus-visible') || isForceShow;
+        if (isValueFocused && valueOverflowing.getIsOverflowing()) setIsValueHintForceDisplayed(true);
+    };
+    const handleBlur = (event)=>{
+        onBlur?.(event);
+        setIsValueHintForceDisplayed(false);
+    };
+    const handleFocus = (event)=>{
+        onFocus?.(event);
+        focusTooltipTimeout.current = setTimeout(()=>{
+            const forceShow = forceHintShowRef?.current?.matches?.(':focus-visible');
+            showValueTooltipOnFocus({
+                isForceShow: forceShow
+            });
+        }, 800);
+    };
+    useEffect(()=>()=>{
+            if (focusTooltipTimeout.current) clearTimeout(focusTooltipTimeout.current);
+        }, []);
+    const onHintVisibilityChange = (isVisible)=>{
+        if (isValueHintForceDisplayed) return void setIsTooltipVisible(false);
+        setIsTooltipVisible(valueOverflowing.getIsOverflowing() && isVisible);
+    };
+    const icon = renderIcon ? renderIcon({
+        stroke: getIconStroke({
+            error,
+            isCustomValueBlock,
+            disabled
+        })
+    }) : null;
+    const isHintVisible = isTooltipVisible || isValueHintForceDisplayed;
+    return {
+        valueBlockInnerRef,
+        valueTooltip: valueOverflowing,
+        isValueHintForceDisplayed,
+        handleBlur,
+        handleFocus,
+        onHintVisibilityChange,
+        icon,
+        isHintVisible
+    };
+};
+export { useValueBlock };

package/dist/components/LabelValue/{ValueBlock/index.d.ts → types.d.ts}

@@ -1,4 +1,4 @@
-import { type FocusEventHandler, type KeyboardEventHandler, type ReactNode, type Ref } from 'react';
+import type { FocusEventHandler, KeyboardEventHandler, ReactNode, Ref } from 'react';
 export interface ValueBlockContentArgs {
     valueNode: ReactNode;
     isLabelOverflow: boolean;
@@ -7,15 +7,20 @@ export interface ValueBlockContentArgs {
     onBlur: FocusEventHandler<HTMLDivElement>;
     onKeyDown: KeyboardEventHandler<HTMLDivElement>;
     onKeyUp: KeyboardEventHandler<HTMLDivElement>;
+    getIsLabelOverflow: () => boolean;
 }
-interface ValueBlockProps {
+export interface ValueBlockProps {
     value: string;
     error?: boolean;
     isEmpty?: boolean;
     disabled?: boolean;
     testId?: string;
     label: string;
+    /**
+     * @deprecated use isNeedShowLabelTooltip
+     */
     needShowLabelTooltip?: boolean;
+    isNeedShowLabelTooltip?: () => boolean;
     forceHideTooltip: boolean;
     onFocus?: FocusEventHandler<HTMLDivElement>;
     onBlur?: FocusEventHandler<HTMLDivElement>;
@@ -25,6 +30,5 @@ interface ValueBlockProps {
     valueBlockContent?: (args: ValueBlockContentArgs) => ReactNode;
     onValueKeyUp?: KeyboardEventHandler<HTMLDivElement>;
     onValueKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    isDefaultValue?: boolean;
 }
-export declare const ValueBlock: import("react").ForwardRefExoticComponent<ValueBlockProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};