@dbcdk/react-components 0.0.84 → 0.0.86
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.
|
@@ -45,6 +45,7 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
|
|
|
45
45
|
offset: 8,
|
|
46
46
|
delayOpenMs: 0,
|
|
47
47
|
focusOpenMode: tooltipOpenOnFocus ? 'any' : 'focus-visible',
|
|
48
|
+
closeOnPointerDown: false,
|
|
48
49
|
});
|
|
49
50
|
const trailingButtonVariant = variant === 'outlined' || variant === 'standalone' ? 'outlined' : 'default';
|
|
50
51
|
return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: _jsxs("div", { style: rootStyle, className: [
|
|
@@ -40,6 +40,7 @@ className, ...rest }) {
|
|
|
40
40
|
offset: 8,
|
|
41
41
|
delayOpenMs: 0,
|
|
42
42
|
focusOpenMode: 'any',
|
|
43
|
+
closeOnPointerDown: false,
|
|
43
44
|
});
|
|
44
45
|
return (_jsx(InputContainer, { modified: modified, label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: [styles.container, modified ? styles.modified : ''].filter(Boolean).join(' '), children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
|
|
45
46
|
};
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
|
|
2
|
-
import { MOTION_MS } from '../../../styles/animation';
|
|
3
2
|
import { TooltipContext } from './TooltipProvider';
|
|
4
3
|
export function useTooltipTrigger(options) {
|
|
5
4
|
const ctx = useContext(TooltipContext);
|
|
6
5
|
if (!ctx)
|
|
7
6
|
throw new Error('useTooltipTrigger must be used within <TooltipProvider>.');
|
|
8
|
-
const { content, placement = 'top', offset = 8, open, defaultOpen = false, delayOpenMs = 150, delayCloseMs = 50, focusOpenMode = 'focus-visible', } = options;
|
|
7
|
+
const { content, placement = 'top', offset = 8, open, defaultOpen = false, delayOpenMs = 150, delayCloseMs = 50, focusOpenMode = 'focus-visible', closeOnPointerDown = true, } = options;
|
|
9
8
|
const id = useId();
|
|
10
9
|
const triggerElRef = useRef(null);
|
|
11
10
|
const isControlled = open !== undefined;
|
|
@@ -83,7 +82,7 @@ export function useTooltipTrigger(options) {
|
|
|
83
82
|
};
|
|
84
83
|
const onPointerDown = () => {
|
|
85
84
|
clearTimers();
|
|
86
|
-
if (!isControlled)
|
|
85
|
+
if (!isControlled && closeOnPointerDown)
|
|
87
86
|
setOpen(false);
|
|
88
87
|
};
|
|
89
88
|
const onFocus = (e) => {
|
|
@@ -92,10 +91,9 @@ export function useTooltipTrigger(options) {
|
|
|
92
91
|
return;
|
|
93
92
|
const shouldOpen = focusOpenMode === 'any' || e.currentTarget.matches(':focus-visible');
|
|
94
93
|
// By default we only show for keyboard focus. Callers can opt into opening on any focus.
|
|
95
|
-
if (!isControlled && shouldOpen)
|
|
96
|
-
setTimeout(() =>
|
|
97
|
-
|
|
98
|
-
}, MOTION_MS.tooltipOpen);
|
|
94
|
+
if (!isControlled && shouldOpen) {
|
|
95
|
+
openTimer.current = window.setTimeout(() => setOpen(true), delayOpenMs);
|
|
96
|
+
}
|
|
99
97
|
};
|
|
100
98
|
const onBlur = () => {
|
|
101
99
|
clearTimers();
|