@homecode/ui 4.27.11 → 4.27.13
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.
|
@@ -112,7 +112,10 @@ const Input = forwardRef((props, ref) => {
|
|
|
112
112
|
}
|
|
113
113
|
};
|
|
114
114
|
const handleChange = (e) => {
|
|
115
|
-
|
|
115
|
+
let val = getValue(e.target.value);
|
|
116
|
+
if (isTextArea && !val.trim()) {
|
|
117
|
+
val = '';
|
|
118
|
+
}
|
|
116
119
|
onChangeValue(val, e);
|
|
117
120
|
};
|
|
118
121
|
const onChangeValue = (value, e) => {
|
|
@@ -3,7 +3,18 @@ import { useRef, useEffect } from 'react';
|
|
|
3
3
|
import S from './Tooltip.styl.js';
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
/**
|
|
7
|
+
* TooltipBase component contains the core tooltip functionality including:
|
|
8
|
+
* - Positioning logic that calculates optimal tooltip placement based on direction
|
|
9
|
+
* - Event handlers for mouse and keyboard interactions (hover, focus)
|
|
10
|
+
* - Viewport boundary detection to keep tooltips visible
|
|
11
|
+
* - Delay handling for show/hide animations
|
|
12
|
+
* - Popover API integration for native browser tooltip behavior
|
|
13
|
+
*
|
|
14
|
+
* This component should only be used when the tooltip is enabled and has content.
|
|
15
|
+
* For disabled tooltips, use the main Tooltip component which returns early.
|
|
16
|
+
*/
|
|
17
|
+
const TooltipBase = ({ className, contentClassName, children, content, delay = 0, direction = 'top', blur = false, }) => {
|
|
7
18
|
const triggerRef = useRef(null);
|
|
8
19
|
const tooltipRef = useRef(null);
|
|
9
20
|
const timeoutRef = useRef();
|
|
@@ -64,9 +75,12 @@ const Tooltip = ({ className, contentClassName, children, content, delay = 0, di
|
|
|
64
75
|
trigger.removeEventListener('blur', hideTooltip);
|
|
65
76
|
};
|
|
66
77
|
}, [content, delay, direction]);
|
|
67
|
-
if (!content)
|
|
68
|
-
return jsx(Fragment, { children: children });
|
|
69
78
|
return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, className: cn(S.trigger, className), children: children }), jsx("div", { ref: tooltipRef, popover: "manual", className: cn(S.tooltip, blur && S.blur, contentClassName), "data-direction": direction, children: content })] }));
|
|
79
|
+
};
|
|
80
|
+
const Tooltip = ({ className, contentClassName, children, content, delay = 0, direction = 'top', blur = false, disabled = false, }) => {
|
|
81
|
+
if (disabled || !content)
|
|
82
|
+
return jsx(Fragment, { children: children });
|
|
83
|
+
return (jsx(TooltipBase, { className: className, contentClassName: contentClassName, children: children, content: content, delay: delay, direction: direction, blur: blur }));
|
|
70
84
|
};
|
|
71
85
|
|
|
72
86
|
export { Tooltip };
|
|
@@ -7,10 +7,11 @@ export interface TooltipProps {
|
|
|
7
7
|
delay?: number;
|
|
8
8
|
direction?: 'top' | 'bottom' | 'left' | 'right';
|
|
9
9
|
blur?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
10
11
|
}
|
|
11
12
|
declare module 'react' {
|
|
12
13
|
interface HTMLAttributes<T> {
|
|
13
14
|
popover?: string;
|
|
14
15
|
}
|
|
15
16
|
}
|
|
16
|
-
export declare const Tooltip: ({ className, contentClassName, children, content, delay, direction, blur, }: TooltipProps) => JSX.Element;
|
|
17
|
+
export declare const Tooltip: ({ className, contentClassName, children, content, delay, direction, blur, disabled, }: TooltipProps) => JSX.Element;
|