@entur/tooltip 2.6.25 → 2.6.27
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/dist/Popover.d.ts +31 -31
- package/dist/Tooltip.d.ts +44 -44
- package/dist/index.d.ts +3 -3
- package/dist/styles.css +3 -3
- package/dist/tooltip.cjs.development.js +20 -25
- 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/package.json +6 -6
package/dist/Popover.d.ts
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Placement } from '@popperjs/core';
|
|
3
|
-
import './Popover.scss';
|
|
4
|
-
export type PopoverProps = {
|
|
5
|
-
/** Innholdet i Popover */
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
/** Plasseringen av Popover
|
|
8
|
-
* @default "bottom-start"
|
|
9
|
-
*/
|
|
10
|
-
placement?: Placement;
|
|
11
|
-
/** Hvis du ønsker å styre state selv kan du sende inn state her */
|
|
12
|
-
showPopover?: boolean;
|
|
13
|
-
/** Hvis du ønsker å styre state selv kan du sende inn setState her */
|
|
14
|
-
setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
15
|
-
};
|
|
16
|
-
export declare const Popover: React.FC<PopoverProps>;
|
|
17
|
-
export type PopoverTriggerProps = {
|
|
18
|
-
/** Knapp som skal brukes for å åpne Popover */
|
|
19
|
-
children: React.ReactElement;
|
|
20
|
-
};
|
|
21
|
-
export declare const PopoverTrigger: React.FC<PopoverTriggerProps>;
|
|
22
|
-
export type PopoverCloseButtonProps = {
|
|
23
|
-
/** En valgfri knapp som kan legges inn for å lukke Popover */
|
|
24
|
-
children: React.ReactElement;
|
|
25
|
-
};
|
|
26
|
-
export declare const PopoverCloseButton: React.FC<PopoverCloseButtonProps>;
|
|
27
|
-
export type PopoverContentProps = {
|
|
28
|
-
/**Innholdet til Popover */
|
|
29
|
-
children: React.ReactNode;
|
|
30
|
-
};
|
|
31
|
-
export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Placement } from '@popperjs/core';
|
|
3
|
+
import './Popover.scss';
|
|
4
|
+
export type PopoverProps = {
|
|
5
|
+
/** Innholdet i Popover */
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
/** Plasseringen av Popover
|
|
8
|
+
* @default "bottom-start"
|
|
9
|
+
*/
|
|
10
|
+
placement?: Placement;
|
|
11
|
+
/** Hvis du ønsker å styre state selv kan du sende inn state her */
|
|
12
|
+
showPopover?: boolean;
|
|
13
|
+
/** Hvis du ønsker å styre state selv kan du sende inn setState her */
|
|
14
|
+
setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
15
|
+
};
|
|
16
|
+
export declare const Popover: React.FC<PopoverProps>;
|
|
17
|
+
export type PopoverTriggerProps = {
|
|
18
|
+
/** Knapp som skal brukes for å åpne Popover */
|
|
19
|
+
children: React.ReactElement;
|
|
20
|
+
};
|
|
21
|
+
export declare const PopoverTrigger: React.FC<PopoverTriggerProps>;
|
|
22
|
+
export type PopoverCloseButtonProps = {
|
|
23
|
+
/** En valgfri knapp som kan legges inn for å lukke Popover */
|
|
24
|
+
children: React.ReactElement;
|
|
25
|
+
};
|
|
26
|
+
export declare const PopoverCloseButton: React.FC<PopoverCloseButtonProps>;
|
|
27
|
+
export type PopoverContentProps = {
|
|
28
|
+
/**Innholdet til Popover */
|
|
29
|
+
children: React.ReactNode;
|
|
30
|
+
};
|
|
31
|
+
export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/Tooltip.d.ts
CHANGED
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './Tooltip.scss';
|
|
3
|
-
type Modifier = {
|
|
4
|
-
name: string;
|
|
5
|
-
enabled?: boolean;
|
|
6
|
-
requires?: Array<string>;
|
|
7
|
-
requiresIfExists?: Array<string>;
|
|
8
|
-
options?: Record<string, unknown>;
|
|
9
|
-
data?: Record<string, unknown>;
|
|
10
|
-
[key: string]: any;
|
|
11
|
-
};
|
|
12
|
-
export type TooltipProps = {
|
|
13
|
-
/** Plassering av tooltip-en */
|
|
14
|
-
placement: 'top' | 'top-left' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
|
|
15
|
-
/** Innholdet i tooltip-boksen */
|
|
16
|
-
content: React.ReactNode;
|
|
17
|
-
/** Elementet som skal ha tooltip-funksjonalitet */
|
|
18
|
-
children: React.ReactElement;
|
|
19
|
-
/** Om tooltipen skal vises */
|
|
20
|
-
isOpen?: boolean;
|
|
21
|
-
/** Ekstra klassenavn for tooltip */
|
|
22
|
-
className?: string;
|
|
23
|
-
/** Åpner ikke tooltip ved hover-events
|
|
24
|
-
* @default false
|
|
25
|
-
*/
|
|
26
|
-
disableHoverListener?: boolean;
|
|
27
|
-
/** Åpner ikke tooltip ved focus-events
|
|
28
|
-
* @default false
|
|
29
|
-
*/
|
|
30
|
-
disableFocusListener?: boolean;
|
|
31
|
-
/** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`
|
|
32
|
-
* @default true
|
|
33
|
-
*/
|
|
34
|
-
showCloseButton?: boolean;
|
|
35
|
-
/** Valideringsvariant for Tooltip */
|
|
36
|
-
variant?: 'error';
|
|
37
|
-
/** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip
|
|
38
|
-
* @default [{ name: 'offset', options: { offset: [0, 10]} }]
|
|
39
|
-
*/
|
|
40
|
-
popperModifiers?: Modifier[];
|
|
41
|
-
[key: string]: any;
|
|
42
|
-
};
|
|
43
|
-
export declare const Tooltip: React.FC<TooltipProps>;
|
|
44
|
-
export {};
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Tooltip.scss';
|
|
3
|
+
type Modifier = {
|
|
4
|
+
name: string;
|
|
5
|
+
enabled?: boolean;
|
|
6
|
+
requires?: Array<string>;
|
|
7
|
+
requiresIfExists?: Array<string>;
|
|
8
|
+
options?: Record<string, unknown>;
|
|
9
|
+
data?: Record<string, unknown>;
|
|
10
|
+
[key: string]: any;
|
|
11
|
+
};
|
|
12
|
+
export type TooltipProps = {
|
|
13
|
+
/** Plassering av tooltip-en */
|
|
14
|
+
placement: 'top' | 'top-left' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
|
|
15
|
+
/** Innholdet i tooltip-boksen */
|
|
16
|
+
content: React.ReactNode;
|
|
17
|
+
/** Elementet som skal ha tooltip-funksjonalitet */
|
|
18
|
+
children: React.ReactElement;
|
|
19
|
+
/** Om tooltipen skal vises */
|
|
20
|
+
isOpen?: boolean;
|
|
21
|
+
/** Ekstra klassenavn for tooltip */
|
|
22
|
+
className?: string;
|
|
23
|
+
/** Åpner ikke tooltip ved hover-events
|
|
24
|
+
* @default false
|
|
25
|
+
*/
|
|
26
|
+
disableHoverListener?: boolean;
|
|
27
|
+
/** Åpner ikke tooltip ved focus-events
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
30
|
+
disableFocusListener?: boolean;
|
|
31
|
+
/** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`
|
|
32
|
+
* @default true
|
|
33
|
+
*/
|
|
34
|
+
showCloseButton?: boolean;
|
|
35
|
+
/** Valideringsvariant for Tooltip */
|
|
36
|
+
variant?: 'error';
|
|
37
|
+
/** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip
|
|
38
|
+
* @default [{ name: 'offset', options: { offset: [0, 10]} }]
|
|
39
|
+
*/
|
|
40
|
+
popperModifiers?: Modifier[];
|
|
41
|
+
[key: string]: any;
|
|
42
|
+
};
|
|
43
|
+
export declare const Tooltip: React.FC<TooltipProps>;
|
|
44
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import './index.scss';
|
|
2
|
-
export * from './Tooltip';
|
|
3
|
-
export * from './Popover';
|
|
1
|
+
import './index.scss';
|
|
2
|
+
export * from './Tooltip';
|
|
3
|
+
export * from './Popover';
|
package/dist/styles.css
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--eds-tooltip: 1;
|
|
3
|
-
}
|
|
4
1
|
/* DO NOT CHANGE!*/
|
|
5
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
6
3
|
.eds-popover {
|
|
@@ -139,3 +136,6 @@
|
|
|
139
136
|
bottom: calc(100% - 0.25rem);
|
|
140
137
|
left: calc(100% - 1rem);
|
|
141
138
|
}
|
|
139
|
+
:root {
|
|
140
|
+
--eds-tooltip: 1;
|
|
141
|
+
}
|
|
@@ -10,11 +10,6 @@ var icons = require('@entur/icons');
|
|
|
10
10
|
var button = require('@entur/button');
|
|
11
11
|
var layout = require('@entur/layout');
|
|
12
12
|
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
-
|
|
15
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
16
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
17
|
-
|
|
18
13
|
function _extends() {
|
|
19
14
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
20
15
|
for (var i = 1; i < arguments.length; i++) {
|
|
@@ -79,16 +74,16 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
79
74
|
setShowTooltip(false);
|
|
80
75
|
clearTimeout(hoverTimer);
|
|
81
76
|
};
|
|
82
|
-
|
|
77
|
+
React.useEffect(function () {
|
|
83
78
|
return function () {
|
|
84
79
|
clearTimeout(hoverTimer);
|
|
85
80
|
};
|
|
86
81
|
});
|
|
87
82
|
var tooltipId = utils.useRandomId('eds-tooltip');
|
|
88
|
-
|
|
83
|
+
React.useEffect(function () {
|
|
89
84
|
setShowTooltip(isOpen);
|
|
90
85
|
}, [isOpen]);
|
|
91
|
-
|
|
86
|
+
React.useEffect(function () {
|
|
92
87
|
if (!content) {
|
|
93
88
|
setShowTooltip(false);
|
|
94
89
|
}
|
|
@@ -120,12 +115,12 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
120
115
|
return onMouseExit();
|
|
121
116
|
};
|
|
122
117
|
}
|
|
123
|
-
return
|
|
118
|
+
return React.createElement(reactPopper.Manager, null, React.createElement(reactPopper.Reference, null, function (_ref2) {
|
|
124
119
|
var ref = _ref2.ref;
|
|
125
120
|
return React.cloneElement(children, _extends({
|
|
126
121
|
ref: ref
|
|
127
122
|
}, childProps));
|
|
128
|
-
}), showTooltip &&
|
|
123
|
+
}), showTooltip && React.createElement(reactPopper.Popper, {
|
|
129
124
|
modifiers: [{
|
|
130
125
|
name: 'arrow',
|
|
131
126
|
enabled: false
|
|
@@ -135,8 +130,8 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
135
130
|
var ref = _ref3.ref,
|
|
136
131
|
style = _ref3.style,
|
|
137
132
|
popperPlacement = _ref3.placement;
|
|
138
|
-
return
|
|
139
|
-
className:
|
|
133
|
+
return React.createElement("div", _extends({
|
|
134
|
+
className: classNames('eds-tooltip', className, "eds-tooltip--" + popperPlacement, {
|
|
140
135
|
'eds-tooltip--error': variant === 'error'
|
|
141
136
|
}),
|
|
142
137
|
ref: ref,
|
|
@@ -144,12 +139,12 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
144
139
|
role: "tooltip",
|
|
145
140
|
id: tooltipId,
|
|
146
141
|
"data-placement": popperPlacement
|
|
147
|
-
}, rest), content, isOpen && showCloseButton &&
|
|
142
|
+
}, rest), content, isOpen && showCloseButton && React.createElement(button.IconButton, {
|
|
148
143
|
className: "eds-tooltip__close-button",
|
|
149
144
|
onClick: function onClick() {
|
|
150
145
|
return setShowTooltip(false);
|
|
151
146
|
}
|
|
152
|
-
},
|
|
147
|
+
}, React.createElement(icons.CloseIcon, null)));
|
|
153
148
|
}));
|
|
154
149
|
};
|
|
155
150
|
|
|
@@ -163,7 +158,7 @@ var usePopoverContext = function usePopoverContext() {
|
|
|
163
158
|
return context;
|
|
164
159
|
};
|
|
165
160
|
var useCustomState = function useCustomState(state, setState) {
|
|
166
|
-
var _React$useState =
|
|
161
|
+
var _React$useState = React.useState(false),
|
|
167
162
|
internalState = _React$useState[0],
|
|
168
163
|
setInternalState = _React$useState[1];
|
|
169
164
|
var controlled = state !== undefined && setState !== undefined;
|
|
@@ -180,8 +175,8 @@ var Popover = function Popover(_ref) {
|
|
|
180
175
|
showPopover = _useCustomState[0],
|
|
181
176
|
setShowPopover = _useCustomState[1],
|
|
182
177
|
controlled = _useCustomState[2];
|
|
183
|
-
var triggerElement =
|
|
184
|
-
var contentElement =
|
|
178
|
+
var triggerElement = React.useRef(null);
|
|
179
|
+
var contentElement = React.useRef(null);
|
|
185
180
|
var _usePopper = reactPopper.usePopper(triggerElement.current, contentElement.current, {
|
|
186
181
|
modifiers: [{
|
|
187
182
|
name: 'arrow',
|
|
@@ -197,12 +192,12 @@ var Popover = function Popover(_ref) {
|
|
|
197
192
|
styles = _usePopper.styles,
|
|
198
193
|
attributes = _usePopper.attributes,
|
|
199
194
|
forceUpdate = _usePopper.forceUpdate;
|
|
200
|
-
|
|
195
|
+
React.useEffect(function () {
|
|
201
196
|
if (forceUpdate) {
|
|
202
197
|
forceUpdate();
|
|
203
198
|
}
|
|
204
199
|
}, [showPopover, forceUpdate]);
|
|
205
|
-
var triggerProps =
|
|
200
|
+
var triggerProps = React.useCallback(function () {
|
|
206
201
|
var buttonProps = {
|
|
207
202
|
'aria-haspopup': 'dialog',
|
|
208
203
|
'aria-expanded': showPopover,
|
|
@@ -227,7 +222,7 @@ var Popover = function Popover(_ref) {
|
|
|
227
222
|
setShowPopover(false);
|
|
228
223
|
}
|
|
229
224
|
};
|
|
230
|
-
var popoverContentProps =
|
|
225
|
+
var popoverContentProps = React.useCallback(function () {
|
|
231
226
|
var contentProps = {
|
|
232
227
|
role: 'dialog',
|
|
233
228
|
'aria-modal': 'false',
|
|
@@ -259,7 +254,7 @@ var Popover = function Popover(_ref) {
|
|
|
259
254
|
closeButtonProps: closeButtonProps,
|
|
260
255
|
triggerProps: triggerProps
|
|
261
256
|
};
|
|
262
|
-
return
|
|
257
|
+
return React.createElement(PopoverContext.Provider, {
|
|
263
258
|
value: contextValue
|
|
264
259
|
}, children);
|
|
265
260
|
};
|
|
@@ -267,7 +262,7 @@ var PopoverTrigger = function PopoverTrigger(_ref2) {
|
|
|
267
262
|
var children = _ref2.children;
|
|
268
263
|
var _usePopoverContext = usePopoverContext(),
|
|
269
264
|
triggerProps = _usePopoverContext.triggerProps;
|
|
270
|
-
var child =
|
|
265
|
+
var child = React.Children.only(children);
|
|
271
266
|
return React.cloneElement(child, triggerProps());
|
|
272
267
|
};
|
|
273
268
|
var PopoverCloseButton = function PopoverCloseButton(_ref3) {
|
|
@@ -277,7 +272,7 @@ var PopoverCloseButton = function PopoverCloseButton(_ref3) {
|
|
|
277
272
|
closeButtonProps = _usePopoverContext2.closeButtonProps;
|
|
278
273
|
return React.cloneElement(children, _extends({}, closeButtonProps, rest));
|
|
279
274
|
};
|
|
280
|
-
var PopoverContent = /*#__PURE__*/
|
|
275
|
+
var PopoverContent = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
|
|
281
276
|
var children = _ref4.children;
|
|
282
277
|
var _usePopoverContext3 = usePopoverContext(),
|
|
283
278
|
showPopover = _usePopoverContext3.showPopover,
|
|
@@ -287,8 +282,8 @@ var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
287
282
|
var props = popoverContentProps({
|
|
288
283
|
ref: ref
|
|
289
284
|
});
|
|
290
|
-
return
|
|
291
|
-
className:
|
|
285
|
+
return React.createElement(layout.Contrast, _extends({
|
|
286
|
+
className: classNames('eds-popover', {
|
|
292
287
|
'eds-popover--hidden': !showPopover
|
|
293
288
|
}, 'eds-contrast'),
|
|
294
289
|
style: styles.popper,
|
|
@@ -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: 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'] = showTooltip ? tooltipId : undefined;\n\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';\n\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\n\nimport { Contrast } from '@entur/layout';\nimport { useOnClickOutside } from '@entur/utils';\n\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 elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\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","_excluded","useState","showTooltip","setShowTooltip","hoverTimer","handleOpen","event","persist","setTimeout","onMouseExit","clearTimeout","React","useEffect","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","undefined","onFocus","onBlur","onMouseEnter","e","onMouseLeave","Manager","createElement","Reference","ref","cloneElement","Popper","modifiers","enabled","style","classNames","role","id","IconButton","onClick","CloseIcon","PopoverContext","createContext","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","parent","contains","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'] = showTooltip ? tooltipId : undefined;\n\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';\n\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\n\nimport { Contrast } from '@entur/layout';\nimport { useOnClickOutside } from '@entur/utils';\n\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 elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\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","_excluded","useState","showTooltip","setShowTooltip","hoverTimer","handleOpen","event","persist","setTimeout","onMouseExit","clearTimeout","React","useEffect","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","undefined","onFocus","onBlur","onMouseEnter","e","onMouseLeave","Manager","createElement","Reference","ref","cloneElement","Popper","modifiers","enabled","style","classNames","role","id","IconButton","onClick","CloseIcon","PopoverContext","createContext","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","parent","contains","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"),r=require("react-popper"),n=require("classnames"),o=require("@entur/icons"),
|
|
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"),i=require("@entur/button"),s=require("@entur/layout");function u(){return u=Object.assign?Object.assign.bind():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},u.apply(this,arguments)}function a(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t.indexOf(r=i[n])>=0||(o[r]=e[r]);return o}var l=["placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers"],c=["children"],p=t.createContext(void 0),f=function(){var e=t.useContext(p);if(null==e)throw Error("usePopoverContext must be used within <Popover/>");return e},d=t.forwardRef((function(e,r){var o=e.children,i=f(),a=i.showPopover,l=i.attributes,c=i.styles,p=(0,i.popoverContentProps)({ref:r});return t.createElement(s.Contrast,u({className:n("eds-popover",{"eds-popover--hidden":!a},"eds-contrast"),style:c.popper,"aria-hidden":!a},l.styles,p),o)}));function v(e,t){return!!e&&(e===t||e.contains(t))}e.warnAboutMissingStyles("tooltip"),exports.Popover=function(n){var o=n.children,i=n.placement,s=void 0===i?"bottom-start":i,a=function(e,r){var n=t.useState(!1),o=void 0!==e&&void 0!==r;return o?[e,r,o]:[n[0],n[1],o]}(n.showPopover,n.setShowPopover),l=a[0],c=a[1],f=a[2],d=t.useRef(null),m=t.useRef(null),b=r.usePopper(d.current,m.current,{modifiers:[{name:"arrow",enabled:!1},{name:"offset",options:{offset:[0,8]}}],placement:s}),h=b.styles,P=b.attributes,g=b.forceUpdate;t.useEffect((function(){g&&g()}),[l,g]);var E=t.useCallback((function(){var e={"aria-haspopup":"dialog","aria-expanded":l,ref:d};return f?e:u({},e,{onClick:function(e){e.preventDefault(),c((function(e){return!e}))}})}),[d,l,c,f]);e.useOnClickOutside([m,d],(function(){return c(!1)}));var y={onClick:function(e){e.preventDefault(),c(!1)}},C=t.useCallback((function(){return{role:"dialog","aria-modal":"false",ref:m,onKeyDown:function(e){"Escape"===e.key&&l&&c(!1)},onBlur:function(e){var t=e.relatedTarget;if(t&&"-1"!==t.getAttribute("tabindex")){var r=v(m.current,t),n=v(d.current,t);l&&!r&&!n&&c(!1)}}}}),[m,l,c]);return t.createElement(p.Provider,{value:{showPopover:l,triggerElement:d,contentElement:m,styles:h,attributes:P,popoverContentProps:C,closeButtonProps:y,triggerProps:E}},o)},exports.PopoverCloseButton=function(e){var r=e.children,n=a(e,c),o=f();return t.cloneElement(r,u({},o.closeButtonProps,n))},exports.PopoverContent=d,exports.PopoverTrigger=function(e){var r=e.children,n=f().triggerProps,o=t.Children.only(r);return t.cloneElement(o,n())},exports.Tooltip=function(s){var c,p=s.placement,f=s.content,d=s.children,v=s.className,m=s.isOpen,b=void 0!==m&&m,h=s.disableHoverListener,P=void 0!==h&&h,g=s.disableFocusListener,E=void 0!==g&&g,y=s.showCloseButton,C=void 0===y||y,w=s.variant,x=s.popperModifiers,O=void 0===x?[{name:"offset",options:{offset:[0,10]}}]:x,k=a(s,l),B=t.useState(b||!1),q=B[0],M=B[1];t.useEffect((function(){return function(){clearTimeout(c)}}));var T=e.useRandomId("eds-tooltip");t.useEffect((function(){M(b)}),[b]),t.useEffect((function(){f||M(!1)}),[f]);var j=p;p.includes("-")&&(p.includes("right")&&(j=p.replace("right","end")),p.includes("left")&&(j=p.replace("left","start")));var L={};return L["aria-describedby"]=q?T:void 0,E||(L.onFocus=function(){return M(!0)},L.onBlur=function(){return M(!1)}),P||(L.onMouseEnter=function(e){return e.persist(),void(c=setTimeout((function(){M(!0)}),150))},L.onMouseLeave=function(){return M(!1),void clearTimeout(c)}),t.createElement(r.Manager,null,t.createElement(r.Reference,null,(function(e){return t.cloneElement(d,u({ref:e.ref},L))})),q&&t.createElement(r.Popper,{modifiers:[{name:"arrow",enabled:!1}].concat(O),placement:j},(function(e){var r=e.ref,s=e.style,a=e.placement;return t.createElement("div",u({className:n("eds-tooltip",v,"eds-tooltip--"+a,{"eds-tooltip--error":"error"===w}),ref:r,style:s,role:"tooltip",id:T,"data-placement":a},k),f,b&&C&&t.createElement(i.IconButton,{className:"eds-tooltip__close-button",onClick:function(){return M(!1)}},t.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';\n\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\n\nimport { Contrast } from '@entur/layout';\nimport { useOnClickOutside } from '@entur/utils';\n\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 elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\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'] = showTooltip ? tooltipId : undefined;\n\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","_usePopoverContext3","showPopover","attributes","styles","props","popoverContentProps","Contrast","_extends","className","classNames","style","popper","elementContainsElement","parent","child","contains","warnAboutMissingStyles","_ref","_ref$placement","placement","_useCustomState","state","setState","_React$useState","useState","controlled","useCustomState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","modifiers","name","enabled","options","offset","forceUpdate","useEffect","triggerProps","useCallback","buttonProps","onClick","e","preventDefault","prev","useOnClickOutside","closeButtonProps","role","onKeyDown","event","key","onBlur","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","focusElementIsTrigger","createElement","Provider","value","_ref3","rest","_objectWithoutPropertiesLoose","_excluded","_usePopoverContext2","cloneElement","_ref2","Children","only","hoverTimer","content","_ref$isOpen","isOpen","_ref$disableHoverList","disableHoverListener","_ref$disableFocusList","disableFocusListener","_ref$showCloseButton","showCloseButton","variant","_ref$popperModifiers","popperModifiers","_useState","showTooltip","setShowTooltip","clearTimeout","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onMouseEnter","persist","setTimeout","onMouseLeave","Manager","Reference","Popper","concat","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';\n\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\n\nimport { Contrast } from '@entur/layout';\nimport { useOnClickOutside } from '@entur/utils';\n\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 elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\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'] = showTooltip ? tooltipId : undefined;\n\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","_usePopoverContext3","showPopover","attributes","styles","props","popoverContentProps","Contrast","_extends","className","classNames","style","popper","elementContainsElement","parent","child","contains","warnAboutMissingStyles","_ref","_ref$placement","placement","_useCustomState","state","setState","_React$useState","useState","controlled","useCustomState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","modifiers","name","enabled","options","offset","forceUpdate","useEffect","triggerProps","useCallback","buttonProps","onClick","e","preventDefault","prev","useOnClickOutside","closeButtonProps","role","onKeyDown","event","key","onBlur","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","focusElementIsTrigger","createElement","Provider","value","_ref3","rest","_objectWithoutPropertiesLoose","_excluded","_usePopoverContext2","cloneElement","_ref2","Children","only","hoverTimer","content","_ref$isOpen","isOpen","_ref$disableHoverList","disableHoverListener","_ref$disableFocusList","disableFocusListener","_ref$showCloseButton","showCloseButton","variant","_ref$popperModifiers","popperModifiers","_useState","showTooltip","setShowTooltip","clearTimeout","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onMouseEnter","persist","setTimeout","onMouseLeave","Manager","Reference","Popper","concat","id","IconButton","CloseIcon"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/tooltip",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.27",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/tooltip.esm.js",
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/button": "^3.1.
|
|
31
|
-
"@entur/icons": "^6.
|
|
32
|
-
"@entur/layout": "^2.1.
|
|
30
|
+
"@entur/button": "^3.1.2",
|
|
31
|
+
"@entur/icons": "^6.5.0",
|
|
32
|
+
"@entur/layout": "^2.1.41",
|
|
33
33
|
"@entur/tokens": "^3.10.0",
|
|
34
|
-
"@entur/utils": "^0.9.
|
|
34
|
+
"@entur/utils": "^0.9.5",
|
|
35
35
|
"@popperjs/core": "^2.10.1",
|
|
36
36
|
"classnames": "^2.3.1",
|
|
37
37
|
"react-popper": "~2.2.5"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "9b8d4e5d2e6f7a74256371e30ebef43e046c9338"
|
|
40
40
|
}
|