@entur/tooltip 2.5.23 → 2.6.0
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.
- package/CHANGELOG.md +454 -0
- package/dist/Popover.d.ts +4 -0
- package/dist/styles.css +19 -19
- package/dist/tooltip.cjs.development.js +118 -63
- package/dist/tooltip.cjs.development.js.map +1 -1
- package/dist/tooltip.cjs.production.min.js +1 -1
- package/dist/tooltip.cjs.production.min.js.map +1 -1
- package/dist/tooltip.esm.js +118 -63
- package/dist/tooltip.esm.js.map +1 -1
- package/package.json +11 -18
|
@@ -19,68 +19,77 @@ function _extends() {
|
|
|
19
19
|
_extends = Object.assign || function (target) {
|
|
20
20
|
for (var i = 1; i < arguments.length; i++) {
|
|
21
21
|
var source = arguments[i];
|
|
22
|
+
|
|
22
23
|
for (var key in source) {
|
|
23
24
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
24
25
|
target[key] = source[key];
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
}
|
|
29
|
+
|
|
28
30
|
return target;
|
|
29
31
|
};
|
|
32
|
+
|
|
30
33
|
return _extends.apply(this, arguments);
|
|
31
34
|
}
|
|
35
|
+
|
|
32
36
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
33
37
|
if (source == null) return {};
|
|
34
38
|
var target = {};
|
|
35
39
|
var sourceKeys = Object.keys(source);
|
|
36
40
|
var key, i;
|
|
41
|
+
|
|
37
42
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
38
43
|
key = sourceKeys[i];
|
|
39
44
|
if (excluded.indexOf(key) >= 0) continue;
|
|
40
45
|
target[key] = source[key];
|
|
41
46
|
}
|
|
47
|
+
|
|
42
48
|
return target;
|
|
43
49
|
}
|
|
44
50
|
|
|
45
51
|
var _excluded$1 = ["placement", "content", "children", "className", "isOpen", "disableHoverListener", "disableFocusListener", "showCloseButton", "variant", "popperModifiers"];
|
|
46
52
|
var Tooltip = function Tooltip(_ref) {
|
|
47
53
|
var placement = _ref.placement,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
54
|
+
content = _ref.content,
|
|
55
|
+
children = _ref.children,
|
|
56
|
+
className = _ref.className,
|
|
57
|
+
_ref$isOpen = _ref.isOpen,
|
|
58
|
+
isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
|
|
59
|
+
_ref$disableHoverList = _ref.disableHoverListener,
|
|
60
|
+
disableHoverListener = _ref$disableHoverList === void 0 ? false : _ref$disableHoverList,
|
|
61
|
+
_ref$disableFocusList = _ref.disableFocusListener,
|
|
62
|
+
disableFocusListener = _ref$disableFocusList === void 0 ? false : _ref$disableFocusList,
|
|
63
|
+
_ref$showCloseButton = _ref.showCloseButton,
|
|
64
|
+
showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
|
|
65
|
+
variant = _ref.variant,
|
|
66
|
+
_ref$popperModifiers = _ref.popperModifiers,
|
|
67
|
+
popperModifiers = _ref$popperModifiers === void 0 ? [{
|
|
68
|
+
name: 'offset',
|
|
69
|
+
options: {
|
|
70
|
+
offset: [0, 10]
|
|
71
|
+
}
|
|
72
|
+
}] : _ref$popperModifiers,
|
|
73
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
74
|
+
|
|
68
75
|
var _useState = React.useState(isOpen || false),
|
|
69
|
-
|
|
70
|
-
|
|
76
|
+
showTooltip = _useState[0],
|
|
77
|
+
setShowTooltip = _useState[1];
|
|
78
|
+
|
|
71
79
|
var hoverTimer;
|
|
80
|
+
|
|
72
81
|
var handleOpen = function handleOpen(event) {
|
|
73
82
|
event.persist();
|
|
74
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Typescript interprets this differently depending on whether it's run in Jest or not
|
|
75
|
-
// @ts-ignore -- for some reason, the type checker thinks that this setTimeout is run in node; it is not, because it is run in the browser
|
|
76
83
|
hoverTimer = setTimeout(function () {
|
|
77
84
|
setShowTooltip(true);
|
|
78
85
|
}, 150);
|
|
79
86
|
};
|
|
87
|
+
|
|
80
88
|
var onMouseExit = function onMouseExit() {
|
|
81
89
|
setShowTooltip(false);
|
|
82
90
|
clearTimeout(hoverTimer);
|
|
83
91
|
};
|
|
92
|
+
|
|
84
93
|
React__default["default"].useEffect(function () {
|
|
85
94
|
return function () {
|
|
86
95
|
clearTimeout(hoverTimer);
|
|
@@ -96,32 +105,40 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
96
105
|
}
|
|
97
106
|
}, [content]);
|
|
98
107
|
var popperPlacement = placement;
|
|
108
|
+
|
|
99
109
|
if (placement.includes('-')) {
|
|
100
110
|
if (placement.includes('right')) {
|
|
101
111
|
popperPlacement = placement.replace('right', 'end');
|
|
102
112
|
}
|
|
113
|
+
|
|
103
114
|
if (placement.includes('left')) {
|
|
104
115
|
popperPlacement = placement.replace('left', 'start');
|
|
105
116
|
}
|
|
106
117
|
}
|
|
118
|
+
|
|
107
119
|
var childProps = {};
|
|
108
120
|
childProps['aria-describedby'] = tooltipId;
|
|
121
|
+
|
|
109
122
|
if (!disableFocusListener) {
|
|
110
123
|
childProps.onFocus = function () {
|
|
111
124
|
return setShowTooltip(true);
|
|
112
125
|
};
|
|
126
|
+
|
|
113
127
|
childProps.onBlur = function () {
|
|
114
128
|
return setShowTooltip(false);
|
|
115
129
|
};
|
|
116
130
|
}
|
|
131
|
+
|
|
117
132
|
if (!disableHoverListener) {
|
|
118
133
|
childProps.onMouseEnter = function (e) {
|
|
119
134
|
return handleOpen(e);
|
|
120
135
|
};
|
|
136
|
+
|
|
121
137
|
childProps.onMouseLeave = function () {
|
|
122
138
|
return onMouseExit();
|
|
123
139
|
};
|
|
124
140
|
}
|
|
141
|
+
|
|
125
142
|
return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
|
|
126
143
|
var ref = _ref2.ref;
|
|
127
144
|
return React.cloneElement(children, _extends({
|
|
@@ -135,8 +152,8 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
135
152
|
placement: popperPlacement
|
|
136
153
|
}, function (_ref3) {
|
|
137
154
|
var ref = _ref3.ref,
|
|
138
|
-
|
|
139
|
-
|
|
155
|
+
style = _ref3.style,
|
|
156
|
+
popperPlacement = _ref3.placement;
|
|
140
157
|
return React__default["default"].createElement("div", _extends({
|
|
141
158
|
className: classNames__default["default"]('eds-tooltip', className, "eds-tooltip--" + popperPlacement, {
|
|
142
159
|
'eds-tooltip--error': variant === 'error'
|
|
@@ -157,37 +174,58 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
157
174
|
|
|
158
175
|
var _excluded = ["children"];
|
|
159
176
|
var PopoverContext = /*#__PURE__*/React.createContext(undefined);
|
|
177
|
+
|
|
160
178
|
var usePopoverContext = function usePopoverContext() {
|
|
161
179
|
var context = React.useContext(PopoverContext);
|
|
180
|
+
|
|
162
181
|
if (context == null) {
|
|
163
182
|
throw Error('usePopoverContext must be used within <Popover/>');
|
|
164
183
|
}
|
|
184
|
+
|
|
165
185
|
return context;
|
|
166
186
|
};
|
|
187
|
+
|
|
188
|
+
var useCustomState = function useCustomState(state, setState) {
|
|
189
|
+
var _React$useState = React__default["default"].useState(false),
|
|
190
|
+
internalState = _React$useState[0],
|
|
191
|
+
setInternalState = _React$useState[1];
|
|
192
|
+
|
|
193
|
+
var controlled = state !== undefined && setState !== undefined;
|
|
194
|
+
if (controlled) return [state, setState, controlled];
|
|
195
|
+
return [internalState, setInternalState, controlled];
|
|
196
|
+
};
|
|
197
|
+
|
|
167
198
|
var Popover = function Popover(_ref) {
|
|
168
199
|
var children = _ref.children,
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
200
|
+
_ref$placement = _ref.placement,
|
|
201
|
+
placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
|
|
202
|
+
controlledState = _ref.showPopover,
|
|
203
|
+
setControlledState = _ref.setShowPopover;
|
|
204
|
+
|
|
205
|
+
var _useCustomState = useCustomState(controlledState, setControlledState),
|
|
206
|
+
showPopover = _useCustomState[0],
|
|
207
|
+
setShowPopover = _useCustomState[1],
|
|
208
|
+
controlled = _useCustomState[2];
|
|
209
|
+
|
|
174
210
|
var triggerElement = React__default["default"].useRef(null);
|
|
175
211
|
var contentElement = React__default["default"].useRef(null);
|
|
212
|
+
|
|
176
213
|
var _usePopper = reactPopper.usePopper(triggerElement.current, contentElement.current, {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
214
|
+
modifiers: [{
|
|
215
|
+
name: 'arrow',
|
|
216
|
+
enabled: false
|
|
217
|
+
}, {
|
|
218
|
+
name: 'offset',
|
|
219
|
+
options: {
|
|
220
|
+
offset: [0, 8]
|
|
221
|
+
}
|
|
222
|
+
}],
|
|
223
|
+
placement: placement
|
|
224
|
+
}),
|
|
225
|
+
styles = _usePopper.styles,
|
|
226
|
+
attributes = _usePopper.attributes,
|
|
227
|
+
forceUpdate = _usePopper.forceUpdate;
|
|
228
|
+
|
|
191
229
|
React__default["default"].useEffect(function () {
|
|
192
230
|
if (forceUpdate) {
|
|
193
231
|
forceUpdate();
|
|
@@ -195,18 +233,20 @@ var Popover = function Popover(_ref) {
|
|
|
195
233
|
}, [showPopover, forceUpdate]);
|
|
196
234
|
var triggerProps = React__default["default"].useCallback(function () {
|
|
197
235
|
var buttonProps = {
|
|
236
|
+
'aria-haspopup': 'dialog',
|
|
237
|
+
'aria-expanded': showPopover,
|
|
238
|
+
ref: triggerElement
|
|
239
|
+
};
|
|
240
|
+
var buttonOnClick = {
|
|
198
241
|
onClick: function onClick(e) {
|
|
199
242
|
e.preventDefault();
|
|
200
243
|
setShowPopover(function (prev) {
|
|
201
244
|
return !prev;
|
|
202
245
|
});
|
|
203
|
-
}
|
|
204
|
-
'aria-haspopup': 'dialog',
|
|
205
|
-
'aria-expanded': showPopover,
|
|
206
|
-
ref: triggerElement
|
|
246
|
+
}
|
|
207
247
|
};
|
|
208
|
-
return buttonProps;
|
|
209
|
-
}, [triggerElement, showPopover]);
|
|
248
|
+
return controlled ? buttonProps : _extends({}, buttonProps, buttonOnClick);
|
|
249
|
+
}, [triggerElement, showPopover, setShowPopover, controlled]);
|
|
210
250
|
useOnClickOutside(contentElement, triggerElement, function () {
|
|
211
251
|
return setShowPopover(false);
|
|
212
252
|
});
|
|
@@ -227,8 +267,8 @@ var Popover = function Popover(_ref) {
|
|
|
227
267
|
}
|
|
228
268
|
},
|
|
229
269
|
onBlur: function onBlur(event) {
|
|
230
|
-
var elementReceivingFocus = event.relatedTarget;
|
|
231
|
-
|
|
270
|
+
var elementReceivingFocus = event.relatedTarget; // The check for 'tabindex=-1' is a special case for focus handling in Docz
|
|
271
|
+
|
|
232
272
|
if (!elementReceivingFocus || elementReceivingFocus.getAttribute('tabindex') === '-1') return;
|
|
233
273
|
var focusElementIsPopover = elementContainsElement(contentElement.current, elementReceivingFocus);
|
|
234
274
|
var focusElementIsTrigger = elementContainsElement(triggerElement.current, elementReceivingFocus);
|
|
@@ -237,7 +277,7 @@ var Popover = function Popover(_ref) {
|
|
|
237
277
|
}
|
|
238
278
|
};
|
|
239
279
|
return contentProps;
|
|
240
|
-
}, [contentElement, showPopover]);
|
|
280
|
+
}, [contentElement, showPopover, setShowPopover]);
|
|
241
281
|
var contextValue = {
|
|
242
282
|
showPopover: showPopover,
|
|
243
283
|
triggerElement: triggerElement,
|
|
@@ -254,25 +294,31 @@ var Popover = function Popover(_ref) {
|
|
|
254
294
|
};
|
|
255
295
|
var PopoverTrigger = function PopoverTrigger(_ref2) {
|
|
256
296
|
var children = _ref2.children;
|
|
297
|
+
|
|
257
298
|
var _usePopoverContext = usePopoverContext(),
|
|
258
|
-
|
|
299
|
+
triggerProps = _usePopoverContext.triggerProps;
|
|
300
|
+
|
|
259
301
|
var child = React__default["default"].Children.only(children);
|
|
260
302
|
return React.cloneElement(child, triggerProps());
|
|
261
303
|
};
|
|
262
304
|
var PopoverCloseButton = function PopoverCloseButton(_ref3) {
|
|
263
305
|
var children = _ref3.children,
|
|
264
|
-
|
|
306
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
|
|
307
|
+
|
|
265
308
|
var _usePopoverContext2 = usePopoverContext(),
|
|
266
|
-
|
|
309
|
+
closeButtonProps = _usePopoverContext2.closeButtonProps;
|
|
310
|
+
|
|
267
311
|
return React.cloneElement(children, _extends({}, closeButtonProps, rest));
|
|
268
312
|
};
|
|
269
313
|
var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function (_ref4, ref) {
|
|
270
314
|
var children = _ref4.children;
|
|
315
|
+
|
|
271
316
|
var _usePopoverContext3 = usePopoverContext(),
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
317
|
+
showPopover = _usePopoverContext3.showPopover,
|
|
318
|
+
attributes = _usePopoverContext3.attributes,
|
|
319
|
+
styles = _usePopoverContext3.styles,
|
|
320
|
+
popoverContentProps = _usePopoverContext3.popoverContentProps;
|
|
321
|
+
|
|
276
322
|
var props = popoverContentProps({
|
|
277
323
|
ref: ref
|
|
278
324
|
});
|
|
@@ -284,37 +330,46 @@ var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
284
330
|
"aria-hidden": !showPopover
|
|
285
331
|
}, attributes.styles, props), children);
|
|
286
332
|
});
|
|
333
|
+
|
|
287
334
|
function elementContainsEventTarget(element, event) {
|
|
288
335
|
if (!element) {
|
|
289
336
|
return false;
|
|
290
337
|
}
|
|
338
|
+
|
|
291
339
|
if (element.contains(event.target)) {
|
|
292
340
|
return true;
|
|
293
|
-
}
|
|
294
|
-
|
|
341
|
+
} // For elements inside a Shadow DOM we need to check the composedPath
|
|
342
|
+
|
|
343
|
+
|
|
295
344
|
if (event.composed && event.composedPath) {
|
|
296
345
|
var contains = event.composedPath().find(function (target) {
|
|
297
346
|
if (target === window) {
|
|
298
347
|
return false;
|
|
299
348
|
}
|
|
349
|
+
|
|
300
350
|
return element.contains(target);
|
|
301
351
|
});
|
|
302
352
|
return contains ? true : false;
|
|
303
353
|
}
|
|
354
|
+
|
|
304
355
|
return false;
|
|
305
356
|
}
|
|
357
|
+
|
|
306
358
|
function elementContainsElement(parent, child) {
|
|
307
359
|
if (!parent) return false;
|
|
308
360
|
return parent === child || parent.contains(child);
|
|
309
361
|
}
|
|
362
|
+
|
|
310
363
|
function useOnClickOutside(ref, buttonRef, handler) {
|
|
311
364
|
React__default["default"].useEffect(function () {
|
|
312
365
|
var listener = function listener(event) {
|
|
313
366
|
if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
|
|
314
367
|
return;
|
|
315
368
|
}
|
|
369
|
+
|
|
316
370
|
handler();
|
|
317
371
|
};
|
|
372
|
+
|
|
318
373
|
document.addEventListener('mousedown', listener);
|
|
319
374
|
document.addEventListener('touchstart', listener);
|
|
320
375
|
return function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.cjs.development.js","sources":["../src/Tooltip.tsx","../src/Popover.tsx","../src/index.tsx"],"sourcesContent":["import React, { cloneElement, useState } from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport classNames from 'classnames';\nimport { useRandomId } from '@entur/utils';\nimport { Placement as PopperPlacementProps } from '@popperjs/core';\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './Tooltip.scss';\n\ntype Modifier = {\n name: string;\n enabled?: boolean;\n requires?: Array<string>;\n requiresIfExists?: Array<string>;\n options?: Record<string, unknown>;\n data?: Record<string, unknown>;\n [key: string]: any;\n};\n\nexport type TooltipProps = {\n /** Plassering av tooltip-en */\n placement:\n | 'top'\n | 'top-left'\n | 'top-right'\n | 'left'\n | 'right'\n | 'bottom-left' // bottom-start\n | 'bottom'\n | 'bottom-right'; // bottom-end\n /** Innholdet i tooltip-boksen */\n content: React.ReactNode;\n /** Elementet som skal ha tooltip-funksjonalitet */\n children: React.ReactElement;\n /** Om tooltipen skal vises */\n isOpen?: boolean;\n /** Ekstra klassenavn for tooltip */\n className?: string;\n /** Åpner ikke tooltip ved hover-events\n * @default false\n */\n disableHoverListener?: boolean;\n /** Åpner ikke tooltip ved focus-events\n * @default false\n */\n disableFocusListener?: boolean;\n /** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`\n * @default true\n */\n showCloseButton?: boolean;\n /** Valideringsvariant for Tooltip */\n variant?: 'error';\n /** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip\n * @default [{ name: 'offset', options: { offset: [0, 10]} }]\n */\n popperModifiers?: Modifier[];\n [key: string]: any;\n};\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n placement,\n content,\n children,\n className,\n isOpen = false,\n disableHoverListener = false,\n disableFocusListener = false,\n showCloseButton = true,\n variant,\n popperModifiers = [\n {\n name: 'offset',\n options: { offset: [0, 10] },\n },\n ],\n ...rest\n}) => {\n const [showTooltip, setShowTooltip] = useState(isOpen || false);\n let hoverTimer: number;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Typescript interprets this differently depending on whether it's run in Jest or not\n // @ts-ignore -- for some reason, the type checker thinks that this setTimeout is run in node; it is not, because it is run in the browser\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = tooltipId;\n if (!disableFocusListener) {\n childProps.onFocus = () => setShowTooltip(true);\n childProps.onBlur = () => setShowTooltip(false);\n }\n if (!disableHoverListener) {\n childProps.onMouseEnter = e => handleOpen(e);\n childProps.onMouseLeave = () => onMouseExit();\n }\n\n return (\n <Manager>\n <Reference>\n {({ ref }) =>\n cloneElement(children, {\n ref: ref,\n ...childProps,\n })\n }\n </Reference>\n {showTooltip && (\n <Popper\n modifiers={[{ name: 'arrow', enabled: false }, ...popperModifiers]}\n placement={popperPlacement}\n >\n {({ ref, style, placement: popperPlacement }) => (\n <div\n className={classNames(\n 'eds-tooltip',\n className,\n `eds-tooltip--${popperPlacement}`,\n { 'eds-tooltip--error': variant === 'error' },\n )}\n ref={ref}\n style={style}\n role=\"tooltip\"\n id={tooltipId}\n data-placement={popperPlacement}\n {...rest}\n >\n {content}\n {isOpen && showCloseButton && (\n <IconButton\n className=\"eds-tooltip__close-button\"\n onClick={() => setShowTooltip(false)}\n >\n <CloseIcon />\n </IconButton>\n )}\n </div>\n )}\n </Popper>\n )}\n </Manager>\n );\n};\n","import React, { cloneElement, createContext, useContext } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport { Contrast } from '@entur/layout';\nimport './Popover.scss';\n\ntype PopoverContentCallbackProps = {\n ref: React.Ref<HTMLDivElement>;\n};\n\ntype PopoverContextProps = {\n showPopover: boolean;\n triggerElement?: React.RefObject<HTMLButtonElement>;\n contentElement: React.RefObject<HTMLDivElement>;\n styles: { [key: string]: React.CSSProperties };\n attributes: { [key: string]: { [key: string]: string } | undefined };\n closeButtonProps: Record<string, unknown>;\n popoverContentProps: (\n e: PopoverContentCallbackProps,\n ) => Record<string, unknown>;\n triggerProps: () => Record<string, unknown>;\n [key: string]: any;\n};\n\nconst PopoverContext = createContext<PopoverContextProps | undefined>(\n undefined,\n);\nconst usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (context == null) {\n throw Error('usePopoverContext must be used within <Popover/>');\n }\n return context;\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n}) => {\n const [showPopover, setShowPopover] = React.useState(false);\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n return buttonProps;\n }, [triggerElement, showPopover]);\n\n useOnClickOutside(contentElement, triggerElement, () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsEventTarget(element: HTMLElement | null, event: Event) {\n if (!element) {\n return false;\n }\n\n if (element.contains(event.target as Node)) {\n return true;\n }\n\n // For elements inside a Shadow DOM we need to check the composedPath\n if (event.composed && event.composedPath) {\n const contains = event.composedPath().find(target => {\n if (target === window) {\n return false;\n }\n return element.contains(target as Node);\n });\n return contains ? true : false;\n }\n\n return false;\n}\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\nfunction useOnClickOutside(\n ref: React.RefObject<HTMLDivElement>,\n buttonRef: React.RefObject<HTMLButtonElement>,\n handler: () => void,\n) {\n React.useEffect(() => {\n const listener = (event: Event) => {\n if (\n elementContainsEventTarget(ref.current, event) ||\n elementContainsEventTarget(buttonRef.current, event)\n ) {\n return;\n }\n\n handler();\n };\n\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, buttonRef, handler]);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n"],"names":["Tooltip","placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers","name","options","offset","rest","useState","showTooltip","setShowTooltip","hoverTimer","handleOpen","event","persist","setTimeout","onMouseExit","clearTimeout","React","useEffect","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onBlur","onMouseEnter","e","onMouseLeave","Manager","Reference","ref","cloneElement","Popper","modifiers","enabled","style","classNames","role","id","IconButton","onClick","CloseIcon","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","Popover","showPopover","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","styles","attributes","forceUpdate","triggerProps","useCallback","buttonProps","preventDefault","prev","useOnClickOutside","closeButtonProps","popoverContentProps","contentProps","onKeyDown","key","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","elementContainsElement","focusElementIsTrigger","isValidBlur","contextValue","Provider","value","PopoverTrigger","child","Children","only","PopoverCloseButton","PopoverContent","forwardRef","props","Contrast","popper","elementContainsEventTarget","element","contains","target","composed","composedPath","find","window","parent","buttonRef","handler","listener","document","addEventListener","removeEventListener","warnAboutMissingStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.cjs.development.js","sources":["../src/Tooltip.tsx","../src/Popover.tsx","../src/index.tsx"],"sourcesContent":["import React, { cloneElement, useState } from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport classNames from 'classnames';\nimport { useRandomId } from '@entur/utils';\nimport { Placement as PopperPlacementProps } from '@popperjs/core';\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './Tooltip.scss';\n\ntype Modifier = {\n name: string;\n enabled?: boolean;\n requires?: Array<string>;\n requiresIfExists?: Array<string>;\n options?: Record<string, unknown>;\n data?: Record<string, unknown>;\n [key: string]: any;\n};\n\nexport type TooltipProps = {\n /** Plassering av tooltip-en */\n placement:\n | 'top'\n | 'top-left'\n | 'top-right'\n | 'left'\n | 'right'\n | 'bottom-left' // bottom-start\n | 'bottom'\n | 'bottom-right'; // bottom-end\n /** Innholdet i tooltip-boksen */\n content: React.ReactNode;\n /** Elementet som skal ha tooltip-funksjonalitet */\n children: React.ReactElement;\n /** Om tooltipen skal vises */\n isOpen?: boolean;\n /** Ekstra klassenavn for tooltip */\n className?: string;\n /** Åpner ikke tooltip ved hover-events\n * @default false\n */\n disableHoverListener?: boolean;\n /** Åpner ikke tooltip ved focus-events\n * @default false\n */\n disableFocusListener?: boolean;\n /** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`\n * @default true\n */\n showCloseButton?: boolean;\n /** Valideringsvariant for Tooltip */\n variant?: 'error';\n /** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip\n * @default [{ name: 'offset', options: { offset: [0, 10]} }]\n */\n popperModifiers?: Modifier[];\n [key: string]: any;\n};\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n placement,\n content,\n children,\n className,\n isOpen = false,\n disableHoverListener = false,\n disableFocusListener = false,\n showCloseButton = true,\n variant,\n popperModifiers = [\n {\n name: 'offset',\n options: { offset: [0, 10] },\n },\n ],\n ...rest\n}) => {\n const [showTooltip, setShowTooltip] = useState(isOpen || false);\n let hoverTimer: ReturnType<typeof setTimeout>;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = tooltipId;\n if (!disableFocusListener) {\n childProps.onFocus = () => setShowTooltip(true);\n childProps.onBlur = () => setShowTooltip(false);\n }\n if (!disableHoverListener) {\n childProps.onMouseEnter = e => handleOpen(e);\n childProps.onMouseLeave = () => onMouseExit();\n }\n\n return (\n <Manager>\n <Reference>\n {({ ref }) =>\n cloneElement(children, {\n ref: ref,\n ...childProps,\n })\n }\n </Reference>\n {showTooltip && (\n <Popper\n modifiers={[{ name: 'arrow', enabled: false }, ...popperModifiers]}\n placement={popperPlacement}\n >\n {({ ref, style, placement: popperPlacement }) => (\n <div\n className={classNames(\n 'eds-tooltip',\n className,\n `eds-tooltip--${popperPlacement}`,\n { 'eds-tooltip--error': variant === 'error' },\n )}\n ref={ref}\n style={style}\n role=\"tooltip\"\n id={tooltipId}\n data-placement={popperPlacement}\n {...rest}\n >\n {content}\n {isOpen && showCloseButton && (\n <IconButton\n className=\"eds-tooltip__close-button\"\n onClick={() => setShowTooltip(false)}\n >\n <CloseIcon />\n </IconButton>\n )}\n </div>\n )}\n </Popper>\n )}\n </Manager>\n );\n};\n","import React, { cloneElement, createContext, useContext } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport { Contrast } from '@entur/layout';\nimport './Popover.scss';\n\ntype PopoverContentCallbackProps = {\n ref: React.Ref<HTMLDivElement>;\n};\n\ntype PopoverContextProps = {\n showPopover: boolean;\n triggerElement?: React.RefObject<HTMLButtonElement>;\n contentElement: React.RefObject<HTMLDivElement>;\n styles: { [key: string]: React.CSSProperties };\n attributes: { [key: string]: { [key: string]: string } | undefined };\n closeButtonProps: Record<string, unknown>;\n popoverContentProps: (\n e: PopoverContentCallbackProps,\n ) => Record<string, unknown>;\n triggerProps: () => Record<string, unknown>;\n [key: string]: any;\n};\n\nconst PopoverContext = createContext<PopoverContextProps | undefined>(\n undefined,\n);\nconst usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (context == null) {\n throw Error('usePopoverContext must be used within <Popover/>');\n }\n return context;\n};\n\nconst useCustomState = (\n state?: boolean,\n setState?: React.Dispatch<React.SetStateAction<boolean>>,\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>, boolean] => {\n const [internalState, setInternalState] = React.useState<boolean>(false);\n const controlled = state !== undefined && setState !== undefined;\n if (controlled) return [state, setState, controlled];\n return [internalState, setInternalState, controlled];\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n /** Hvis du ønsker å styre state selv kan du sende inn state her */\n showPopover?: boolean;\n /** Hvis du ønsker å styre state selv kan du sende inn setState her */\n setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n showPopover: controlledState,\n setShowPopover: setControlledState,\n}) => {\n const [showPopover, setShowPopover, controlled] = useCustomState(\n controlledState,\n setControlledState,\n );\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n const buttonOnClick = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n };\n return controlled ? buttonProps : { ...buttonProps, ...buttonOnClick };\n }, [triggerElement, showPopover, setShowPopover, controlled]);\n\n useOnClickOutside(contentElement, triggerElement, () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover, setShowPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsEventTarget(element: HTMLElement | null, event: Event) {\n if (!element) {\n return false;\n }\n\n if (element.contains(event.target as Node)) {\n return true;\n }\n\n // For elements inside a Shadow DOM we need to check the composedPath\n if (event.composed && event.composedPath) {\n const contains = event.composedPath().find(target => {\n if (target === window) {\n return false;\n }\n return element.contains(target as Node);\n });\n return contains ? true : false;\n }\n\n return false;\n}\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\nfunction useOnClickOutside(\n ref: React.RefObject<HTMLDivElement>,\n buttonRef: React.RefObject<HTMLButtonElement>,\n handler: () => void,\n) {\n React.useEffect(() => {\n const listener = (event: Event) => {\n if (\n elementContainsEventTarget(ref.current, event) ||\n elementContainsEventTarget(buttonRef.current, event)\n ) {\n return;\n }\n\n handler();\n };\n\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, buttonRef, handler]);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n"],"names":["Tooltip","placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers","name","options","offset","rest","useState","showTooltip","setShowTooltip","hoverTimer","handleOpen","event","persist","setTimeout","onMouseExit","clearTimeout","React","useEffect","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onBlur","onMouseEnter","e","onMouseLeave","Manager","Reference","ref","cloneElement","Popper","modifiers","enabled","style","classNames","role","id","IconButton","onClick","CloseIcon","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","useCustomState","state","setState","internalState","setInternalState","controlled","Popover","controlledState","showPopover","setControlledState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","styles","attributes","forceUpdate","triggerProps","useCallback","buttonProps","buttonOnClick","preventDefault","prev","useOnClickOutside","closeButtonProps","popoverContentProps","contentProps","onKeyDown","key","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","elementContainsElement","focusElementIsTrigger","isValidBlur","contextValue","Provider","value","PopoverTrigger","child","Children","only","PopoverCloseButton","PopoverContent","forwardRef","props","Contrast","popper","elementContainsEventTarget","element","contains","target","composed","composedPath","find","window","parent","buttonRef","handler","listener","document","addEventListener","removeEventListener","warnAboutMissingStyles"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),r=require("react-popper"),n=require("classnames"),o=require("@entur/icons"),u=require("@entur/button"),a=require("@entur/layout");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t),l=i(n);function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(this,arguments)}function f(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)t.indexOf(r=u[n])>=0||(o[r]=e[r]);return o}var d=["placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers"],p=["children"],v=t.createContext(void 0),m=function(){var e=t.useContext(v);if(null==e)throw Error("usePopoverContext must be used within <Popover/>");return e},h=s.default.forwardRef((function(e,t){var r=e.children,n=m(),o=n.showPopover,u=n.attributes,i=n.styles,f=(0,n.popoverContentProps)({ref:t});return s.default.createElement(a.Contrast,c({className:l.default("eds-popover",{"eds-popover--hidden":!o},"eds-contrast"),style:i.popper,"aria-hidden":!o},u.styles,f),r)}));function b(e,t){return!(!e||!(e.contains(t.target)||t.composed&&t.composedPath&&t.composedPath().find((function(t){return t!==window&&e.contains(t)}))))}function E(e,t){return!!e&&(e===t||e.contains(t))}e.warnAboutMissingStyles("tooltip"),exports.Popover=function(e){var t=e.children,n=e.placement,o=void 0===n?"bottom-start":n,u=function(e,t){var r=s.default.useState(!1),n=void 0!==e&&void 0!==t;return n?[e,t,n]:[r[0],r[1],n]}(e.showPopover,e.setShowPopover),a=u[0],i=u[1],l=u[2],f=s.default.useRef(null),d=s.default.useRef(null),p=r.usePopper(f.current,d.current,{modifiers:[{name:"arrow",enabled:!1},{name:"offset",options:{offset:[0,8]}}],placement:o}),m=p.styles,h=p.attributes,P=p.forceUpdate;s.default.useEffect((function(){P&&P()}),[a,P]);var g,y,w,C=s.default.useCallback((function(){var e={"aria-haspopup":"dialog","aria-expanded":a,ref:f};return l?e:c({},e,{onClick:function(e){e.preventDefault(),i((function(e){return!e}))}})}),[f,a,i,l]);s.default.useEffect((function(){var e=function(e){b(g.current,e)||b(y.current,e)||w()};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[g=d,y=f,w=function(){return i(!1)}]);var x={onClick:function(e){e.preventDefault(),i(!1)}},L=s.default.useCallback((function(){return{role:"dialog","aria-modal":"false",ref:d,onKeyDown:function(e){"Escape"===e.key&&a&&i(!1)},onBlur:function(e){var t=e.relatedTarget;if(t&&"-1"!==t.getAttribute("tabindex")){var r=E(d.current,t),n=E(f.current,t);a&&!r&&!n&&i(!1)}}}}),[d,a,i]);return s.default.createElement(v.Provider,{value:{showPopover:a,triggerElement:f,contentElement:d,styles:m,attributes:h,popoverContentProps:L,closeButtonProps:x,triggerProps:C}},t)},exports.PopoverCloseButton=function(e){var r=e.children,n=f(e,p),o=m();return t.cloneElement(r,c({},o.closeButtonProps,n))},exports.PopoverContent=h,exports.PopoverTrigger=function(e){var r=e.children,n=m().triggerProps,o=s.default.Children.only(r);return t.cloneElement(o,n())},exports.Tooltip=function(n){var a,i=n.placement,p=n.content,v=n.children,m=n.className,h=n.isOpen,b=void 0!==h&&h,E=n.disableHoverListener,P=void 0!==E&&E,g=n.disableFocusListener,y=void 0!==g&&g,w=n.showCloseButton,C=void 0===w||w,x=n.variant,L=n.popperModifiers,B=void 0===L?[{name:"offset",options:{offset:[0,10]}}]:L,O=f(n,d),k=t.useState(b||!1),q=k[0],M=k[1];s.default.useEffect((function(){return function(){clearTimeout(a)}}));var T=e.useRandomId("eds-tooltip");s.default.useEffect((function(){M(b)}),[b]),s.default.useEffect((function(){p||M(!1)}),[p]);var j=i;i.includes("-")&&(i.includes("right")&&(j=i.replace("right","end")),i.includes("left")&&(j=i.replace("left","start")));var N={};return N["aria-describedby"]=T,y||(N.onFocus=function(){return M(!0)},N.onBlur=function(){return M(!1)}),P||(N.onMouseEnter=function(e){return e.persist(),void(a=setTimeout((function(){M(!0)}),150))},N.onMouseLeave=function(){return M(!1),void clearTimeout(a)}),s.default.createElement(r.Manager,null,s.default.createElement(r.Reference,null,(function(e){return t.cloneElement(v,c({ref:e.ref},N))})),q&&s.default.createElement(r.Popper,{modifiers:[{name:"arrow",enabled:!1}].concat(B),placement:j},(function(e){var t=e.ref,r=e.style,n=e.placement;return s.default.createElement("div",c({className:l.default("eds-tooltip",m,"eds-tooltip--"+n,{"eds-tooltip--error":"error"===x}),ref:t,style:r,role:"tooltip",id:T,"data-placement":n},O),p,b&&C&&s.default.createElement(u.IconButton,{className:"eds-tooltip__close-button",onClick:function(){return M(!1)}},s.default.createElement(o.CloseIcon,null)))})))};
|
|
2
2
|
//# sourceMappingURL=tooltip.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.cjs.production.min.js","sources":["../src/Popover.tsx","../src/index.tsx","../src/Tooltip.tsx"],"sourcesContent":["import React, { cloneElement, createContext, useContext } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport { Contrast } from '@entur/layout';\nimport './Popover.scss';\n\ntype PopoverContentCallbackProps = {\n ref: React.Ref<HTMLDivElement>;\n};\n\ntype PopoverContextProps = {\n showPopover: boolean;\n triggerElement?: React.RefObject<HTMLButtonElement>;\n contentElement: React.RefObject<HTMLDivElement>;\n styles: { [key: string]: React.CSSProperties };\n attributes: { [key: string]: { [key: string]: string } | undefined };\n closeButtonProps: Record<string, unknown>;\n popoverContentProps: (\n e: PopoverContentCallbackProps,\n ) => Record<string, unknown>;\n triggerProps: () => Record<string, unknown>;\n [key: string]: any;\n};\n\nconst PopoverContext = createContext<PopoverContextProps | undefined>(\n undefined,\n);\nconst usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (context == null) {\n throw Error('usePopoverContext must be used within <Popover/>');\n }\n return context;\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n}) => {\n const [showPopover, setShowPopover] = React.useState(false);\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n return buttonProps;\n }, [triggerElement, showPopover]);\n\n useOnClickOutside(contentElement, triggerElement, () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsEventTarget(element: HTMLElement | null, event: Event) {\n if (!element) {\n return false;\n }\n\n if (element.contains(event.target as Node)) {\n return true;\n }\n\n // For elements inside a Shadow DOM we need to check the composedPath\n if (event.composed && event.composedPath) {\n const contains = event.composedPath().find(target => {\n if (target === window) {\n return false;\n }\n return element.contains(target as Node);\n });\n return contains ? true : false;\n }\n\n return false;\n}\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\nfunction useOnClickOutside(\n ref: React.RefObject<HTMLDivElement>,\n buttonRef: React.RefObject<HTMLButtonElement>,\n handler: () => void,\n) {\n React.useEffect(() => {\n const listener = (event: Event) => {\n if (\n elementContainsEventTarget(ref.current, event) ||\n elementContainsEventTarget(buttonRef.current, event)\n ) {\n return;\n }\n\n handler();\n };\n\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, buttonRef, handler]);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n","import React, { cloneElement, useState } from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport classNames from 'classnames';\nimport { useRandomId } from '@entur/utils';\nimport { Placement as PopperPlacementProps } from '@popperjs/core';\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './Tooltip.scss';\n\ntype Modifier = {\n name: string;\n enabled?: boolean;\n requires?: Array<string>;\n requiresIfExists?: Array<string>;\n options?: Record<string, unknown>;\n data?: Record<string, unknown>;\n [key: string]: any;\n};\n\nexport type TooltipProps = {\n /** Plassering av tooltip-en */\n placement:\n | 'top'\n | 'top-left'\n | 'top-right'\n | 'left'\n | 'right'\n | 'bottom-left' // bottom-start\n | 'bottom'\n | 'bottom-right'; // bottom-end\n /** Innholdet i tooltip-boksen */\n content: React.ReactNode;\n /** Elementet som skal ha tooltip-funksjonalitet */\n children: React.ReactElement;\n /** Om tooltipen skal vises */\n isOpen?: boolean;\n /** Ekstra klassenavn for tooltip */\n className?: string;\n /** Åpner ikke tooltip ved hover-events\n * @default false\n */\n disableHoverListener?: boolean;\n /** Åpner ikke tooltip ved focus-events\n * @default false\n */\n disableFocusListener?: boolean;\n /** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`\n * @default true\n */\n showCloseButton?: boolean;\n /** Valideringsvariant for Tooltip */\n variant?: 'error';\n /** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip\n * @default [{ name: 'offset', options: { offset: [0, 10]} }]\n */\n popperModifiers?: Modifier[];\n [key: string]: any;\n};\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n placement,\n content,\n children,\n className,\n isOpen = false,\n disableHoverListener = false,\n disableFocusListener = false,\n showCloseButton = true,\n variant,\n popperModifiers = [\n {\n name: 'offset',\n options: { offset: [0, 10] },\n },\n ],\n ...rest\n}) => {\n const [showTooltip, setShowTooltip] = useState(isOpen || false);\n let hoverTimer: number;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Typescript interprets this differently depending on whether it's run in Jest or not\n // @ts-ignore -- for some reason, the type checker thinks that this setTimeout is run in node; it is not, because it is run in the browser\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = tooltipId;\n if (!disableFocusListener) {\n childProps.onFocus = () => setShowTooltip(true);\n childProps.onBlur = () => setShowTooltip(false);\n }\n if (!disableHoverListener) {\n childProps.onMouseEnter = e => handleOpen(e);\n childProps.onMouseLeave = () => onMouseExit();\n }\n\n return (\n <Manager>\n <Reference>\n {({ ref }) =>\n cloneElement(children, {\n ref: ref,\n ...childProps,\n })\n }\n </Reference>\n {showTooltip && (\n <Popper\n modifiers={[{ name: 'arrow', enabled: false }, ...popperModifiers]}\n placement={popperPlacement}\n >\n {({ ref, style, placement: popperPlacement }) => (\n <div\n className={classNames(\n 'eds-tooltip',\n className,\n `eds-tooltip--${popperPlacement}`,\n { 'eds-tooltip--error': variant === 'error' },\n )}\n ref={ref}\n style={style}\n role=\"tooltip\"\n id={tooltipId}\n data-placement={popperPlacement}\n {...rest}\n >\n {content}\n {isOpen && showCloseButton && (\n <IconButton\n className=\"eds-tooltip__close-button\"\n onClick={() => setShowTooltip(false)}\n >\n <CloseIcon />\n </IconButton>\n )}\n </div>\n )}\n </Popper>\n )}\n </Manager>\n );\n};\n"],"names":["PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","PopoverContent","React","forwardRef","ref","children","showPopover","attributes","styles","props","popoverContentProps","Contrast","className","classNames","style","popper","elementContainsEventTarget","element","event","contains","target","composed","composedPath","find","window","elementContainsElement","parent","child","warnAboutMissingStyles","_ref$placement","placement","useState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","modifiers","name","enabled","options","offset","forceUpdate","useEffect","buttonRef","handler","triggerProps","useCallback","onClick","e","preventDefault","prev","listener","document","addEventListener","removeEventListener","closeButtonProps","role","onKeyDown","key","onBlur","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","focusElementIsTrigger","Provider","value","rest","cloneElement","Children","only","hoverTimer","content","_ref$isOpen","isOpen","_ref$disableHoverList","disableHoverListener","_ref$disableFocusList","disableFocusListener","_ref$showCloseButton","showCloseButton","variant","_ref$popperModifiers","popperModifiers","showTooltip","setShowTooltip","clearTimeout","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onMouseEnter","persist","setTimeout","onMouseLeave","Manager","Reference","Popper","id","IconButton","CloseIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.cjs.production.min.js","sources":["../src/Popover.tsx","../src/index.tsx","../src/Tooltip.tsx"],"sourcesContent":["import React, { cloneElement, createContext, useContext } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport { Contrast } from '@entur/layout';\nimport './Popover.scss';\n\ntype PopoverContentCallbackProps = {\n ref: React.Ref<HTMLDivElement>;\n};\n\ntype PopoverContextProps = {\n showPopover: boolean;\n triggerElement?: React.RefObject<HTMLButtonElement>;\n contentElement: React.RefObject<HTMLDivElement>;\n styles: { [key: string]: React.CSSProperties };\n attributes: { [key: string]: { [key: string]: string } | undefined };\n closeButtonProps: Record<string, unknown>;\n popoverContentProps: (\n e: PopoverContentCallbackProps,\n ) => Record<string, unknown>;\n triggerProps: () => Record<string, unknown>;\n [key: string]: any;\n};\n\nconst PopoverContext = createContext<PopoverContextProps | undefined>(\n undefined,\n);\nconst usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (context == null) {\n throw Error('usePopoverContext must be used within <Popover/>');\n }\n return context;\n};\n\nconst useCustomState = (\n state?: boolean,\n setState?: React.Dispatch<React.SetStateAction<boolean>>,\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>, boolean] => {\n const [internalState, setInternalState] = React.useState<boolean>(false);\n const controlled = state !== undefined && setState !== undefined;\n if (controlled) return [state, setState, controlled];\n return [internalState, setInternalState, controlled];\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n /** Hvis du ønsker å styre state selv kan du sende inn state her */\n showPopover?: boolean;\n /** Hvis du ønsker å styre state selv kan du sende inn setState her */\n setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n showPopover: controlledState,\n setShowPopover: setControlledState,\n}) => {\n const [showPopover, setShowPopover, controlled] = useCustomState(\n controlledState,\n setControlledState,\n );\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n const buttonOnClick = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n };\n return controlled ? buttonProps : { ...buttonProps, ...buttonOnClick };\n }, [triggerElement, showPopover, setShowPopover, controlled]);\n\n useOnClickOutside(contentElement, triggerElement, () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover, setShowPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsEventTarget(element: HTMLElement | null, event: Event) {\n if (!element) {\n return false;\n }\n\n if (element.contains(event.target as Node)) {\n return true;\n }\n\n // For elements inside a Shadow DOM we need to check the composedPath\n if (event.composed && event.composedPath) {\n const contains = event.composedPath().find(target => {\n if (target === window) {\n return false;\n }\n return element.contains(target as Node);\n });\n return contains ? true : false;\n }\n\n return false;\n}\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\nfunction useOnClickOutside(\n ref: React.RefObject<HTMLDivElement>,\n buttonRef: React.RefObject<HTMLButtonElement>,\n handler: () => void,\n) {\n React.useEffect(() => {\n const listener = (event: Event) => {\n if (\n elementContainsEventTarget(ref.current, event) ||\n elementContainsEventTarget(buttonRef.current, event)\n ) {\n return;\n }\n\n handler();\n };\n\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, buttonRef, handler]);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n","import React, { cloneElement, useState } from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport classNames from 'classnames';\nimport { useRandomId } from '@entur/utils';\nimport { Placement as PopperPlacementProps } from '@popperjs/core';\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './Tooltip.scss';\n\ntype Modifier = {\n name: string;\n enabled?: boolean;\n requires?: Array<string>;\n requiresIfExists?: Array<string>;\n options?: Record<string, unknown>;\n data?: Record<string, unknown>;\n [key: string]: any;\n};\n\nexport type TooltipProps = {\n /** Plassering av tooltip-en */\n placement:\n | 'top'\n | 'top-left'\n | 'top-right'\n | 'left'\n | 'right'\n | 'bottom-left' // bottom-start\n | 'bottom'\n | 'bottom-right'; // bottom-end\n /** Innholdet i tooltip-boksen */\n content: React.ReactNode;\n /** Elementet som skal ha tooltip-funksjonalitet */\n children: React.ReactElement;\n /** Om tooltipen skal vises */\n isOpen?: boolean;\n /** Ekstra klassenavn for tooltip */\n className?: string;\n /** Åpner ikke tooltip ved hover-events\n * @default false\n */\n disableHoverListener?: boolean;\n /** Åpner ikke tooltip ved focus-events\n * @default false\n */\n disableFocusListener?: boolean;\n /** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`\n * @default true\n */\n showCloseButton?: boolean;\n /** Valideringsvariant for Tooltip */\n variant?: 'error';\n /** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip\n * @default [{ name: 'offset', options: { offset: [0, 10]} }]\n */\n popperModifiers?: Modifier[];\n [key: string]: any;\n};\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n placement,\n content,\n children,\n className,\n isOpen = false,\n disableHoverListener = false,\n disableFocusListener = false,\n showCloseButton = true,\n variant,\n popperModifiers = [\n {\n name: 'offset',\n options: { offset: [0, 10] },\n },\n ],\n ...rest\n}) => {\n const [showTooltip, setShowTooltip] = useState(isOpen || false);\n let hoverTimer: ReturnType<typeof setTimeout>;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = tooltipId;\n if (!disableFocusListener) {\n childProps.onFocus = () => setShowTooltip(true);\n childProps.onBlur = () => setShowTooltip(false);\n }\n if (!disableHoverListener) {\n childProps.onMouseEnter = e => handleOpen(e);\n childProps.onMouseLeave = () => onMouseExit();\n }\n\n return (\n <Manager>\n <Reference>\n {({ ref }) =>\n cloneElement(children, {\n ref: ref,\n ...childProps,\n })\n }\n </Reference>\n {showTooltip && (\n <Popper\n modifiers={[{ name: 'arrow', enabled: false }, ...popperModifiers]}\n placement={popperPlacement}\n >\n {({ ref, style, placement: popperPlacement }) => (\n <div\n className={classNames(\n 'eds-tooltip',\n className,\n `eds-tooltip--${popperPlacement}`,\n { 'eds-tooltip--error': variant === 'error' },\n )}\n ref={ref}\n style={style}\n role=\"tooltip\"\n id={tooltipId}\n data-placement={popperPlacement}\n {...rest}\n >\n {content}\n {isOpen && showCloseButton && (\n <IconButton\n className=\"eds-tooltip__close-button\"\n onClick={() => setShowTooltip(false)}\n >\n <CloseIcon />\n </IconButton>\n )}\n </div>\n )}\n </Popper>\n )}\n </Manager>\n );\n};\n"],"names":["PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","PopoverContent","React","forwardRef","ref","children","showPopover","attributes","styles","props","popoverContentProps","Contrast","className","classNames","style","popper","elementContainsEventTarget","element","event","contains","target","composed","composedPath","find","window","elementContainsElement","parent","child","warnAboutMissingStyles","placement","state","setState","useState","controlled","useCustomState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","modifiers","name","enabled","options","offset","forceUpdate","useEffect","buttonRef","handler","triggerProps","useCallback","buttonProps","onClick","e","preventDefault","prev","listener","document","addEventListener","removeEventListener","closeButtonProps","role","onKeyDown","key","onBlur","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","focusElementIsTrigger","Provider","value","rest","cloneElement","Children","only","hoverTimer","content","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers","showTooltip","setShowTooltip","clearTimeout","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onMouseEnter","persist","setTimeout","onMouseLeave","Manager","Reference","Popper","id","IconButton","CloseIcon"],"mappings":"80BAyBMA,EAAiBC,qBACrBC,GAEIC,EAAoB,eAClBC,EAAUC,aAAWL,MACZ,MAAXI,QACIE,MAAM,2DAEPF,GAoKIG,EAAiBC,UAAMC,YAGlC,WAAeC,OAAZC,IAAAA,WAEDR,IADMS,IAAAA,YAAaC,IAAAA,WAAYC,IAAAA,OAE3BC,GAAQC,IAF2BA,qBAEP,CAAEN,IAAAA,WAElCF,wBAACS,cACCC,UAAWC,UACT,cACA,wBAC0BP,GAE1B,gBAEFQ,MAAON,EAAOO,sBACAT,GACVC,EAAWC,OACXC,GAEHJ,MAKP,SAASW,EAA2BC,EAA6BC,YAC1DD,KAIDA,EAAQE,SAASD,EAAME,SAKvBF,EAAMG,UAAYH,EAAMI,cACTJ,EAAMI,eAAeC,MAAK,SAAAH,UACrCA,IAAWI,QAGRP,EAAQE,SAASC,QAQ9B,SAASK,EACPC,EACAC,WAEKD,IACEA,IAAWC,GAASD,EAAOP,SAASQ,ICxP7CC,yBAAuB,2BDwDwB,gBAC7CvB,IAAAA,aACAwB,UAAAA,aAAY,mBAzBS,SACrBC,EACAC,SAE0C7B,UAAM8B,UAAkB,GAC5DC,OAAuBrC,IAAVkC,QAAoClC,IAAbmC,SACtCE,EAAmB,CAACH,EAAOC,EAAUE,GAClC,WAAkCA,GAsBSC,GAHlD5B,cACA6B,gBAEO7B,OAAa6B,OAAgBF,OAI9BG,EAAiBlC,UAAMmC,OAAO,MAC9BC,EAAiBpC,UAAMmC,OAAO,QAEQE,YAC1CH,EAAeI,QACfF,EAAeE,QACf,CACEC,UAAW,CACT,CAAEC,KAAM,QAASC,SAAS,GAC1B,CACED,KAAM,SACNE,QAAS,CACPC,OAAQ,CAAC,EAAG,MAIlBhB,UAAWA,IAbPrB,IAAAA,OAAQD,IAAAA,WAAYuC,IAAAA,YAiB5B5C,UAAM6C,WAAU,WACVD,GACFA,MAED,CAACxC,EAAawC,QAkKjB1C,EACA4C,EACAC,EAlKMC,EAAehD,UAAMiD,aAAY,eAC/BC,EAAc,iBACD,yBACA9C,EACjBF,IAAKgC,UAQAH,EAAamB,OAAmBA,EANjB,CACpBC,QAAS,SAACC,GACRA,EAAEC,iBACFpB,GAAe,SAAAqB,UAASA,UAI3B,CAACpB,EAAgB9B,EAAa6B,EAAgBF,IAuJjD/B,UAAM6C,WAAU,eACRU,EAAW,SAACvC,GAEdF,EAA2BZ,EAAIoC,QAAStB,IACxCF,EAA2BgC,EAAUR,QAAStB,IAKhD+B,YAGFS,SAASC,iBAAiB,YAAaF,GACvCC,SAASC,iBAAiB,aAAcF,GAEjC,WACLC,SAASE,oBAAoB,YAAaH,GAC1CC,SAASE,oBAAoB,aAAcH,MAE5C,CAvBHrD,EAjJkBkC,EAkJlBU,EAlJkCZ,EAmJlCa,EAnJkD,kBAChDd,GAAe,UAEX0B,EAAmB,CACvBR,QAAS,SAACC,GACRA,EAAEC,iBACFpB,GAAe,KAGbzB,EAAsBR,UAAMiD,aAAY,iBACvB,CACnBW,KAAM,sBACQ,QACd1D,IAAKkC,EACLyB,UAAW,SAAC7C,GACQ,WAAdA,EAAM8C,KACR1D,GAAe6B,GAAe,IAGlC8B,OAAQ,SAAC/C,OACDgD,EAAwBhD,EAAMiD,iBAGjCD,GACkD,OAAnDA,EAAsBE,aAAa,iBAG/BC,EAAwB5C,EAC5Ba,EAAeE,QACf0B,GAEII,EAAwB7C,EAC5BW,EAAeI,QACf0B,GAGE5D,IADiB+D,IAA0BC,GACfnC,GAAe,QAIlD,CAACG,EAAgBhC,EAAa6B,WAY/BjC,wBAACR,EAAe6E,UAASC,MAXe,CACxClE,YAAAA,EACA8B,eAAAA,EACAE,eAAAA,EACA9B,OAAAA,EACAD,WAAAA,EACAG,oBAAAA,EACAmD,iBAAAA,EACAX,aAAAA,IAIG7C,+BAqB8D,gBACnEA,IAAAA,SACGoE,WAE0B5E,WACtB6E,eAAarE,SADZwD,iBACgDY,qDAhBG,gBAAGpE,IAAAA,SACtD6C,EAAiBrD,IAAjBqD,aACFvB,EAAQzB,UAAMyE,SAASC,KAAKvE,UAC3BqE,eAAa/C,EAAOuB,sBErHkB,gBAmBzC2B,EAlBJhD,IAAAA,UACAiD,IAAAA,QACAzE,IAAAA,SACAO,IAAAA,cACAmE,OAAAA,oBACAC,qBAAAA,oBACAC,qBAAAA,oBACAC,gBAAAA,gBACAC,IAAAA,YACAC,gBAAAA,aAAkB,CAChB,CACE1C,KAAM,SACNE,QAAS,CAAEC,OAAQ,CAAC,EAAG,SAGxB4B,WAEmCzC,WAAS+C,IAAU,GAAlDM,OAAaC,OAapBpF,UAAM6C,WAAU,kBACP,WACLwC,aAAaV,WAIXW,EAAYC,cAAY,eAC9BvF,UAAM6C,WAAU,WACduC,EAAeP,KACd,CAACA,IAEJ7E,UAAM6C,WAAU,WACT+B,GACHQ,GAAe,KAEhB,CAACR,QAEAY,EAAkB7D,EAClBA,EAAU8D,SAAS,OACjB9D,EAAU8D,SAAS,WACrBD,EAAkB7D,EAAU+D,QAC1B,QACA,QAGA/D,EAAU8D,SAAS,UACrBD,EAAkB7D,EAAU+D,QAC1B,OACA,eAKAC,EAMF,UACJA,EAAW,oBAAsBL,EAC5BP,IACHY,EAAWC,QAAU,kBAAMR,GAAe,IAC1CO,EAAW5B,OAAS,kBAAMqB,GAAe,KAEtCN,IACHa,EAAWE,aAAe,SAAAzC,UAAgBA,EAvDpC0C,eACNnB,EAAaoB,YAAW,WACtBX,GAAe,KACd,OAqDHO,EAAWK,aAAe,kBAlD1BZ,GAAe,QACfC,aAAaV,KAqDb3E,wBAACiG,eACCjG,wBAACkG,kBACE,mBACC1B,eAAarE,KACXD,MAFAA,KAGGyF,OAIRR,GACCnF,wBAACmG,UACC5D,WAAY,CAAEC,KAAM,QAASC,SAAS,WAAYyC,GAClDvD,UAAW6D,IAEV,gBAAGtF,IAAAA,IAAKU,IAAAA,MAAkB4E,IAAX7D,iBACd3B,iCACEU,UAAWC,UACT,cACAD,kBACgB8E,EAChB,sBAAoC,UAAZP,IAE1B/E,IAAKA,EACLU,MAAOA,EACPgD,KAAK,UACLwC,GAAId,mBACYE,GACZjB,GAEHK,EACAC,GAAUG,GACThF,wBAACqG,cACC3F,UAAU,4BACVyC,QAAS,kBAAMiC,GAAe,KAE9BpF,wBAACsG"}
|