@entur/tooltip 2.5.0 → 2.5.3
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 +14 -0
- package/dist/styles.css +19 -19
- package/dist/tooltip.cjs.development.js +45 -27
- 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 +20 -4
- package/dist/tooltip.esm.js.map +1 -1
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,20 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.5.3](https://bitbucket.org/enturas/design-system/compare/@entur/tooltip@2.5.2...@entur/tooltip@2.5.3) (2022-03-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @entur/tooltip
|
|
9
|
+
|
|
10
|
+
## [2.5.2](https://bitbucket.org/enturas/design-system/compare/@entur/tooltip@2.5.1...@entur/tooltip@2.5.2) (2022-02-09)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @entur/tooltip
|
|
13
|
+
|
|
14
|
+
## [2.5.1](https://bitbucket.org/enturas/design-system/compare/@entur/tooltip@2.5.0...@entur/tooltip@2.5.1) (2022-01-05)
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
|
|
18
|
+
- **popover:** popover will now close if focus is lost from a tab event ([d6991e3](https://bitbucket.org/enturas/design-system/commits/d6991e37a1d129df84851d6634f8751cddea7aec))
|
|
19
|
+
|
|
6
20
|
# [2.5.0](https://bitbucket.org/enturas/design-system/compare/@entur/tooltip@2.4.27...@entur/tooltip@2.5.0) (2021-12-10)
|
|
7
21
|
|
|
8
22
|
### Features
|
package/dist/styles.css
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
--eds-tooltip: 1;
|
|
3
3
|
}/* DO NOT CHANGE!*/
|
|
4
4
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
|
+
.eds-popover {
|
|
6
|
+
background: #181c56;
|
|
7
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
8
|
+
border-radius: 0.0625rem;
|
|
9
|
+
border: 0.0625rem solid #d1d3d3;
|
|
10
|
+
font-family: inherit;
|
|
11
|
+
z-index: 20;
|
|
12
|
+
}
|
|
13
|
+
.eds-contrast .eds-popover {
|
|
14
|
+
background: #292b6a;
|
|
15
|
+
box-shadow: 0 0.0625rem 0.1875rem #393d79;
|
|
16
|
+
}
|
|
17
|
+
.eds-popover--hidden {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
.eds-popover:focus {
|
|
21
|
+
outline: 5px solid red;
|
|
22
|
+
}/* DO NOT CHANGE!*/
|
|
23
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
24
|
.eds-tooltip-wrapper {
|
|
6
25
|
display: inline-block;
|
|
7
26
|
position: relative;
|
|
@@ -117,23 +136,4 @@
|
|
|
117
136
|
.eds-tooltip--bottom-end::after {
|
|
118
137
|
bottom: calc(100% - 0.25rem);
|
|
119
138
|
left: calc(100% - 1rem);
|
|
120
|
-
}/* DO NOT CHANGE!*/
|
|
121
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
122
|
-
.eds-popover {
|
|
123
|
-
background: #181c56;
|
|
124
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
125
|
-
border-radius: 0.0625rem;
|
|
126
|
-
border: 0.0625rem solid #d1d3d3;
|
|
127
|
-
font-family: inherit;
|
|
128
|
-
z-index: 20;
|
|
129
|
-
}
|
|
130
|
-
.eds-contrast .eds-popover {
|
|
131
|
-
background: #292b6a;
|
|
132
|
-
box-shadow: 0 0.0625rem 0.1875rem #393d79;
|
|
133
|
-
}
|
|
134
|
-
.eds-popover--hidden {
|
|
135
|
-
display: none;
|
|
136
|
-
}
|
|
137
|
-
.eds-popover:focus {
|
|
138
|
-
outline: 5px solid red;
|
|
139
139
|
}
|
|
@@ -2,17 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
|
-
|
|
7
5
|
var utils = require('@entur/utils');
|
|
8
6
|
var React = require('react');
|
|
9
|
-
var React__default = _interopDefault(React);
|
|
10
7
|
var reactPopper = require('react-popper');
|
|
11
|
-
var classNames =
|
|
8
|
+
var classNames = require('classnames');
|
|
12
9
|
var icons = require('@entur/icons');
|
|
13
10
|
var button = require('@entur/button');
|
|
14
11
|
var layout = require('@entur/layout');
|
|
15
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
|
+
|
|
16
18
|
function _extends() {
|
|
17
19
|
_extends = Object.assign || function (target) {
|
|
18
20
|
for (var i = 1; i < arguments.length; i++) {
|
|
@@ -46,6 +48,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
46
48
|
return target;
|
|
47
49
|
}
|
|
48
50
|
|
|
51
|
+
var _excluded$1 = ["placement", "content", "children", "className", "isOpen", "disableHoverListener", "disableFocusListener", "showCloseButton", "variant", "popperModifiers"];
|
|
49
52
|
var Tooltip = function Tooltip(_ref) {
|
|
50
53
|
var placement = _ref.placement,
|
|
51
54
|
content = _ref.content,
|
|
@@ -67,7 +70,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
67
70
|
offset: [0, 10]
|
|
68
71
|
}
|
|
69
72
|
}] : _ref$popperModifiers,
|
|
70
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
73
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
71
74
|
|
|
72
75
|
var _useState = React.useState(isOpen || false),
|
|
73
76
|
showTooltip = _useState[0],
|
|
@@ -87,16 +90,16 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
87
90
|
clearTimeout(hoverTimer);
|
|
88
91
|
};
|
|
89
92
|
|
|
90
|
-
React__default.useEffect(function () {
|
|
93
|
+
React__default["default"].useEffect(function () {
|
|
91
94
|
return function () {
|
|
92
95
|
clearTimeout(hoverTimer);
|
|
93
96
|
};
|
|
94
97
|
});
|
|
95
98
|
var tooltipId = utils.useRandomId('eds-tooltip');
|
|
96
|
-
React__default.useEffect(function () {
|
|
99
|
+
React__default["default"].useEffect(function () {
|
|
97
100
|
setShowTooltip(isOpen);
|
|
98
101
|
}, [isOpen]);
|
|
99
|
-
React__default.useEffect(function () {
|
|
102
|
+
React__default["default"].useEffect(function () {
|
|
100
103
|
if (!content) {
|
|
101
104
|
setShowTooltip(false);
|
|
102
105
|
}
|
|
@@ -136,12 +139,12 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
136
139
|
};
|
|
137
140
|
}
|
|
138
141
|
|
|
139
|
-
return React__default.createElement(reactPopper.Manager, null, React__default.createElement(reactPopper.Reference, null, function (_ref2) {
|
|
142
|
+
return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
|
|
140
143
|
var ref = _ref2.ref;
|
|
141
144
|
return React.cloneElement(children, _extends({
|
|
142
145
|
ref: ref
|
|
143
146
|
}, childProps));
|
|
144
|
-
}), showTooltip && React__default.createElement(reactPopper.Popper, {
|
|
147
|
+
}), showTooltip && React__default["default"].createElement(reactPopper.Popper, {
|
|
145
148
|
modifiers: [{
|
|
146
149
|
name: 'arrow',
|
|
147
150
|
enabled: false
|
|
@@ -151,8 +154,8 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
151
154
|
var ref = _ref3.ref,
|
|
152
155
|
style = _ref3.style,
|
|
153
156
|
popperPlacement = _ref3.placement;
|
|
154
|
-
return React__default.createElement("div",
|
|
155
|
-
className:
|
|
157
|
+
return React__default["default"].createElement("div", _extends({
|
|
158
|
+
className: classNames__default["default"]('eds-tooltip', className, "eds-tooltip--" + popperPlacement, {
|
|
156
159
|
'eds-tooltip--error': variant === 'error'
|
|
157
160
|
}),
|
|
158
161
|
ref: ref,
|
|
@@ -160,15 +163,16 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
160
163
|
role: "tooltip",
|
|
161
164
|
id: tooltipId,
|
|
162
165
|
"data-placement": popperPlacement
|
|
163
|
-
}, rest), content, isOpen && showCloseButton && React__default.createElement(button.IconButton, {
|
|
166
|
+
}, rest), content, isOpen && showCloseButton && React__default["default"].createElement(button.IconButton, {
|
|
164
167
|
className: "eds-tooltip__close-button",
|
|
165
168
|
onClick: function onClick() {
|
|
166
169
|
return setShowTooltip(false);
|
|
167
170
|
}
|
|
168
|
-
}, React__default.createElement(icons.CloseIcon, null)));
|
|
171
|
+
}, React__default["default"].createElement(icons.CloseIcon, null)));
|
|
169
172
|
}));
|
|
170
173
|
};
|
|
171
174
|
|
|
175
|
+
var _excluded = ["children"];
|
|
172
176
|
var PopoverContext = /*#__PURE__*/React.createContext(undefined);
|
|
173
177
|
|
|
174
178
|
var usePopoverContext = function usePopoverContext() {
|
|
@@ -186,12 +190,12 @@ var Popover = function Popover(_ref) {
|
|
|
186
190
|
_ref$placement = _ref.placement,
|
|
187
191
|
placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement;
|
|
188
192
|
|
|
189
|
-
var _React$useState = React__default.useState(false),
|
|
193
|
+
var _React$useState = React__default["default"].useState(false),
|
|
190
194
|
showPopover = _React$useState[0],
|
|
191
195
|
setShowPopover = _React$useState[1];
|
|
192
196
|
|
|
193
|
-
var triggerElement = React__default.useRef(null);
|
|
194
|
-
var contentElement = React__default.useRef(null);
|
|
197
|
+
var triggerElement = React__default["default"].useRef(null);
|
|
198
|
+
var contentElement = React__default["default"].useRef(null);
|
|
195
199
|
|
|
196
200
|
var _usePopper = reactPopper.usePopper(triggerElement.current, contentElement.current, {
|
|
197
201
|
modifiers: [{
|
|
@@ -209,12 +213,12 @@ var Popover = function Popover(_ref) {
|
|
|
209
213
|
attributes = _usePopper.attributes,
|
|
210
214
|
forceUpdate = _usePopper.forceUpdate;
|
|
211
215
|
|
|
212
|
-
React__default.useEffect(function () {
|
|
216
|
+
React__default["default"].useEffect(function () {
|
|
213
217
|
if (forceUpdate) {
|
|
214
218
|
forceUpdate();
|
|
215
219
|
}
|
|
216
220
|
}, [showPopover, forceUpdate]);
|
|
217
|
-
var triggerProps = React__default.useCallback(function () {
|
|
221
|
+
var triggerProps = React__default["default"].useCallback(function () {
|
|
218
222
|
var buttonProps = {
|
|
219
223
|
onClick: function onClick(e) {
|
|
220
224
|
e.preventDefault();
|
|
@@ -237,7 +241,7 @@ var Popover = function Popover(_ref) {
|
|
|
237
241
|
setShowPopover(false);
|
|
238
242
|
}
|
|
239
243
|
};
|
|
240
|
-
var popoverContentProps = React__default.useCallback(function () {
|
|
244
|
+
var popoverContentProps = React__default["default"].useCallback(function () {
|
|
241
245
|
var contentProps = {
|
|
242
246
|
role: 'dialog',
|
|
243
247
|
'aria-modal': 'false',
|
|
@@ -246,6 +250,15 @@ var Popover = function Popover(_ref) {
|
|
|
246
250
|
if (event.key === 'Escape') {
|
|
247
251
|
showPopover && setShowPopover(false);
|
|
248
252
|
}
|
|
253
|
+
},
|
|
254
|
+
onBlur: function onBlur(event) {
|
|
255
|
+
var elementReceivingFocus = event.relatedTarget; // The check for 'tabindex=-1' is a special case for focus handling in Docz
|
|
256
|
+
|
|
257
|
+
if (!elementReceivingFocus || elementReceivingFocus.getAttribute('tabindex') === '-1') return;
|
|
258
|
+
var focusElementIsPopover = elementContainsElement(contentElement.current, elementReceivingFocus);
|
|
259
|
+
var focusElementIsTrigger = elementContainsElement(triggerElement.current, elementReceivingFocus);
|
|
260
|
+
var isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;
|
|
261
|
+
if (showPopover && isValidBlur) setShowPopover(false);
|
|
249
262
|
}
|
|
250
263
|
};
|
|
251
264
|
return contentProps;
|
|
@@ -260,7 +273,7 @@ var Popover = function Popover(_ref) {
|
|
|
260
273
|
closeButtonProps: closeButtonProps,
|
|
261
274
|
triggerProps: triggerProps
|
|
262
275
|
};
|
|
263
|
-
return React__default.createElement(PopoverContext.Provider, {
|
|
276
|
+
return React__default["default"].createElement(PopoverContext.Provider, {
|
|
264
277
|
value: contextValue
|
|
265
278
|
}, children);
|
|
266
279
|
};
|
|
@@ -270,19 +283,19 @@ var PopoverTrigger = function PopoverTrigger(_ref2) {
|
|
|
270
283
|
var _usePopoverContext = usePopoverContext(),
|
|
271
284
|
triggerProps = _usePopoverContext.triggerProps;
|
|
272
285
|
|
|
273
|
-
var child = React__default.Children.only(children);
|
|
286
|
+
var child = React__default["default"].Children.only(children);
|
|
274
287
|
return React.cloneElement(child, triggerProps());
|
|
275
288
|
};
|
|
276
289
|
var PopoverCloseButton = function PopoverCloseButton(_ref3) {
|
|
277
290
|
var children = _ref3.children,
|
|
278
|
-
rest = _objectWithoutPropertiesLoose(_ref3,
|
|
291
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
|
|
279
292
|
|
|
280
293
|
var _usePopoverContext2 = usePopoverContext(),
|
|
281
294
|
closeButtonProps = _usePopoverContext2.closeButtonProps;
|
|
282
295
|
|
|
283
296
|
return React.cloneElement(children, _extends({}, closeButtonProps, rest));
|
|
284
297
|
};
|
|
285
|
-
var PopoverContent = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
|
|
298
|
+
var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function (_ref4, ref) {
|
|
286
299
|
var children = _ref4.children;
|
|
287
300
|
|
|
288
301
|
var _usePopoverContext3 = usePopoverContext(),
|
|
@@ -294,8 +307,8 @@ var PopoverContent = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref
|
|
|
294
307
|
var props = popoverContentProps({
|
|
295
308
|
ref: ref
|
|
296
309
|
});
|
|
297
|
-
return React__default.createElement(layout.Contrast,
|
|
298
|
-
className:
|
|
310
|
+
return React__default["default"].createElement(layout.Contrast, _extends({
|
|
311
|
+
className: classNames__default["default"]('eds-popover', {
|
|
299
312
|
'eds-popover--hidden': !showPopover
|
|
300
313
|
}, 'eds-contrast'),
|
|
301
314
|
style: styles.popper,
|
|
@@ -327,8 +340,13 @@ function elementContainsEventTarget(element, event) {
|
|
|
327
340
|
return false;
|
|
328
341
|
}
|
|
329
342
|
|
|
343
|
+
function elementContainsElement(parent, child) {
|
|
344
|
+
if (!parent) return false;
|
|
345
|
+
return parent === child || parent.contains(child);
|
|
346
|
+
}
|
|
347
|
+
|
|
330
348
|
function useOnClickOutside(ref, buttonRef, handler) {
|
|
331
|
-
React__default.useEffect(function () {
|
|
349
|
+
React__default["default"].useEffect(function () {
|
|
332
350
|
var listener = function listener(event) {
|
|
333
351
|
if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
|
|
334
352
|
return;
|
|
@@ -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: NodeJS.Timeout;\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\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 };\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 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","contextValue","Provider","value","PopoverTrigger","child","Children","only","PopoverCloseButton","PopoverContent","forwardRef","props","Contrast","popper","elementContainsEventTarget","element","contains","target","composed","composedPath","find","window","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: NodeJS.Timeout;\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\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,2 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),n=require("react-popper"),r=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 l=i(t),s=i(r);function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.apply(this,arguments)}function f(e,t){if(null==e)return{};var n,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)t.indexOf(n=u[r])>=0||(o[n]=e[n]);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=l.default.forwardRef((function(e,t){var n=e.children,r=m(),o=r.showPopover,u=r.attributes,i=r.styles,f=(0,r.popoverContentProps)({ref:t});return l.default.createElement(a.Contrast,c({className:s.default("eds-popover",{"eds-popover--hidden":!o},"eds-contrast"),style:i.popper,"aria-hidden":!o},u.styles,f),n)}));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,r=e.placement,o=void 0===r?"bottom-start":r,u=l.default.useState(!1),a=u[0],i=u[1],s=l.default.useRef(null),c=l.default.useRef(null),f=n.usePopper(s.current,c.current,{modifiers:[{name:"arrow",enabled:!1},{name:"offset",options:{offset:[0,8]}}],placement:o}),d=f.styles,p=f.attributes,m=f.forceUpdate;l.default.useEffect((function(){m&&m()}),[a,m]);var h,P,g,y=l.default.useCallback((function(){return{onClick:function(e){e.preventDefault(),i((function(e){return!e}))},"aria-haspopup":"dialog","aria-expanded":a,ref:s}}),[s,a]);l.default.useEffect((function(){var e=function(e){b(h.current,e)||b(P.current,e)||g()};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[h=c,P=s,g=function(){return i(!1)}]);var C={onClick:function(e){e.preventDefault(),i(!1)}},w=l.default.useCallback((function(){return{role:"dialog","aria-modal":"false",ref:c,onKeyDown:function(e){"Escape"===e.key&&a&&i(!1)},onBlur:function(e){var t=e.relatedTarget;if(t&&"-1"!==t.getAttribute("tabindex")){var n=E(c.current,t),r=E(s.current,t);a&&!n&&!r&&i(!1)}}}}),[c,a]);return l.default.createElement(v.Provider,{value:{showPopover:a,triggerElement:s,contentElement:c,styles:d,attributes:p,popoverContentProps:w,closeButtonProps:C,triggerProps:y}},t)},exports.PopoverCloseButton=function(e){var n=e.children,r=f(e,p),o=m();return t.cloneElement(n,c({},o.closeButtonProps,r))},exports.PopoverContent=h,exports.PopoverTrigger=function(e){var n=e.children,r=m().triggerProps,o=l.default.Children.only(n);return t.cloneElement(o,r())},exports.Tooltip=function(r){var a,i=r.placement,p=r.content,v=r.children,m=r.className,h=r.isOpen,b=void 0!==h&&h,E=r.disableHoverListener,P=void 0!==E&&E,g=r.disableFocusListener,y=void 0!==g&&g,C=r.showCloseButton,w=void 0===C||C,x=r.variant,L=r.popperModifiers,B=void 0===L?[{name:"offset",options:{offset:[0,10]}}]:L,O=f(r,d),k=t.useState(b||!1),q=k[0],M=k[1];l.default.useEffect((function(){return function(){clearTimeout(a)}}));var T=e.useRandomId("eds-tooltip");l.default.useEffect((function(){M(b)}),[b]),l.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)}),l.default.createElement(n.Manager,null,l.default.createElement(n.Reference,null,(function(e){return t.cloneElement(v,c({ref:e.ref},N))})),q&&l.default.createElement(n.Popper,{modifiers:[{name:"arrow",enabled:!1}].concat(B),placement:j},(function(e){var t=e.ref,n=e.style,r=e.placement;return l.default.createElement("div",c({className:s.default("eds-tooltip",m,"eds-tooltip--"+r,{"eds-tooltip--error":"error"===x}),ref:t,style:n,role:"tooltip",id:T,"data-placement":r},O),p,b&&w&&l.default.createElement(u.IconButton,{className:"eds-tooltip__close-button",onClick:function(){return M(!1)}},l.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 };\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 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: NodeJS.Timeout;\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","warnAboutMissingStyles","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","Provider","value","rest","cloneElement","child","Children","only","hoverTimer","content","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers","showTooltip","setShowTooltip","clearTimeout","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onBlur","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\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: NodeJS.Timeout;\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","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","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,GA+IIG,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,ICnO7CC,yBAAuB,2BD0CwB,gBAC7CvB,IAAAA,aACAwB,UAAAA,aAAY,mBAE0B3B,UAAM4B,UAAS,GAA9CxB,OAAayB,OACdC,EAAiB9B,UAAM+B,OAAO,MAC9BC,EAAiBhC,UAAM+B,OAAO,QAEQE,YAC1CH,EAAeI,QACfF,EAAeE,QACf,CACEC,UAAW,CACT,CAAEC,KAAM,QAASC,SAAS,GAC1B,CACED,KAAM,SACNE,QAAS,CACPC,OAAQ,CAAC,EAAG,MAIlBZ,UAAWA,IAbPrB,IAAAA,OAAQD,IAAAA,WAAYmC,IAAAA,YAiB5BxC,UAAMyC,WAAU,WACVD,GACFA,MAED,CAACpC,EAAaoC,QAgKjBtC,EACAwC,EACAC,EAhKMC,EAAe5C,UAAM6C,aAAY,iBACjB,CAClBC,QAAS,SAACC,GACRA,EAAEC,iBACFnB,GAAe,SAAAoB,UAASA,sBAET,yBACA7C,EACjBF,IAAK4B,KAGN,CAACA,EAAgB1B,IAuJpBJ,UAAMyC,WAAU,eACRS,EAAW,SAAClC,GAEdF,EAA2BZ,EAAIgC,QAASlB,IACxCF,EAA2B4B,EAAUR,QAASlB,IAKhD2B,YAGFQ,SAASC,iBAAiB,YAAaF,GACvCC,SAASC,iBAAiB,aAAcF,GAEjC,WACLC,SAASE,oBAAoB,YAAaH,GAC1CC,SAASE,oBAAoB,aAAcH,MAE5C,CAvBHhD,EAjJkB8B,EAkJlBU,EAlJkCZ,EAmJlCa,EAnJkD,kBAChDd,GAAe,UAEXyB,EAAmB,CACvBR,QAAS,SAACC,GACRA,EAAEC,iBACFnB,GAAe,KAGbrB,EAAsBR,UAAM6C,aAAY,iBACvB,CACnBU,KAAM,sBACQ,QACdrD,IAAK8B,EACLwB,UAAW,SAACxC,GACQ,WAAdA,EAAMyC,KACRrD,GAAeyB,GAAe,IAGlC6B,OAAQ,SAAC1C,OACD2C,EAAwB3C,EAAM4C,iBAGjCD,GACkD,OAAnDA,EAAsBE,aAAa,iBAG/BC,EAAwBvC,EAC5BS,EAAeE,QACfyB,GAEII,EAAwBxC,EAC5BO,EAAeI,QACfyB,GAGEvD,IADiB0D,IAA0BC,GACflC,GAAe,QAIlD,CAACG,EAAgB5B,WAYlBJ,wBAACR,EAAewE,UAASC,MAXe,CACxC7D,YAAAA,EACA0B,eAAAA,EACAE,eAAAA,EACA1B,OAAAA,EACAD,WAAAA,EACAG,oBAAAA,EACA8C,iBAAAA,EACAV,aAAAA,IAIGzC,+BAqB8D,gBACnEA,IAAAA,SACG+D,WAE0BvE,WACtBwE,eAAahE,SADZmD,iBACgDY,qDAhBG,gBAAG/D,IAAAA,SACtDyC,EAAiBjD,IAAjBiD,aACFnB,EAAQzB,UAAMoE,SAASC,KAAKlE,UAC3BgE,eAAa1C,EAAOmB,sBEhGkB,gBAmBzC0B,EAlBJ3C,IAAAA,UACA4C,IAAAA,QACApE,IAAAA,SACAO,IAAAA,cACA8D,OAAAA,oBACAC,qBAAAA,oBACAC,qBAAAA,oBACAC,gBAAAA,gBACAC,IAAAA,YACAC,gBAAAA,aAAkB,CAChB,CACEzC,KAAM,SACNE,QAAS,CAAEC,OAAQ,CAAC,EAAG,SAGxB2B,WAEmCtC,WAAS4C,IAAU,GAAlDM,OAAaC,OAapB/E,UAAMyC,WAAU,kBACP,WACLuC,aAAaV,WAIXW,EAAYC,cAAY,eAC9BlF,UAAMyC,WAAU,WACdsC,EAAeP,KACd,CAACA,IAEJxE,UAAMyC,WAAU,WACT8B,GACHQ,GAAe,KAEhB,CAACR,QAEAY,EAAkBxD,EAClBA,EAAUyD,SAAS,OACjBzD,EAAUyD,SAAS,WACrBD,EAAkBxD,EAAU0D,QAC1B,QACA,QAGA1D,EAAUyD,SAAS,UACrBD,EAAkBxD,EAAU0D,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,KAqDbtE,wBAAC4F,eACC5F,wBAAC6F,kBACE,mBACC1B,eAAahE,KACXD,MAFAA,KAGGoF,OAIRR,GACC9E,wBAAC8F,UACC3D,WAAY,CAAEC,KAAM,QAASC,SAAS,WAAYwC,GAClDlD,UAAWwD,IAEV,gBAAGjF,IAAAA,IAAKU,IAAAA,MAAkBuE,IAAXxD,iBACd3B,iCACEU,UAAWC,UACT,cACAD,kBACgByE,EAChB,sBAAoC,UAAZP,IAE1B1E,IAAKA,EACLU,MAAOA,EACP2C,KAAK,UACLwC,GAAId,mBACYE,GACZjB,GAEHK,EACAC,GAAUG,GACT3E,wBAACgG,cACCtF,UAAU,4BACVoC,QAAS,kBAAMiC,GAAe,KAE9B/E,wBAACiG"}
|
package/dist/tooltip.esm.js
CHANGED
|
@@ -39,6 +39,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
39
39
|
return target;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
var _excluded$1 = ["placement", "content", "children", "className", "isOpen", "disableHoverListener", "disableFocusListener", "showCloseButton", "variant", "popperModifiers"];
|
|
42
43
|
var Tooltip = function Tooltip(_ref) {
|
|
43
44
|
var placement = _ref.placement,
|
|
44
45
|
content = _ref.content,
|
|
@@ -60,7 +61,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
60
61
|
offset: [0, 10]
|
|
61
62
|
}
|
|
62
63
|
}] : _ref$popperModifiers,
|
|
63
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
64
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
64
65
|
|
|
65
66
|
var _useState = useState(isOpen || false),
|
|
66
67
|
showTooltip = _useState[0],
|
|
@@ -144,7 +145,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
144
145
|
var ref = _ref3.ref,
|
|
145
146
|
style = _ref3.style,
|
|
146
147
|
popperPlacement = _ref3.placement;
|
|
147
|
-
return React.createElement("div",
|
|
148
|
+
return React.createElement("div", _extends({
|
|
148
149
|
className: classNames('eds-tooltip', className, "eds-tooltip--" + popperPlacement, {
|
|
149
150
|
'eds-tooltip--error': variant === 'error'
|
|
150
151
|
}),
|
|
@@ -162,6 +163,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
162
163
|
}));
|
|
163
164
|
};
|
|
164
165
|
|
|
166
|
+
var _excluded = ["children"];
|
|
165
167
|
var PopoverContext = /*#__PURE__*/createContext(undefined);
|
|
166
168
|
|
|
167
169
|
var usePopoverContext = function usePopoverContext() {
|
|
@@ -239,6 +241,15 @@ var Popover = function Popover(_ref) {
|
|
|
239
241
|
if (event.key === 'Escape') {
|
|
240
242
|
showPopover && setShowPopover(false);
|
|
241
243
|
}
|
|
244
|
+
},
|
|
245
|
+
onBlur: function onBlur(event) {
|
|
246
|
+
var elementReceivingFocus = event.relatedTarget; // The check for 'tabindex=-1' is a special case for focus handling in Docz
|
|
247
|
+
|
|
248
|
+
if (!elementReceivingFocus || elementReceivingFocus.getAttribute('tabindex') === '-1') return;
|
|
249
|
+
var focusElementIsPopover = elementContainsElement(contentElement.current, elementReceivingFocus);
|
|
250
|
+
var focusElementIsTrigger = elementContainsElement(triggerElement.current, elementReceivingFocus);
|
|
251
|
+
var isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;
|
|
252
|
+
if (showPopover && isValidBlur) setShowPopover(false);
|
|
242
253
|
}
|
|
243
254
|
};
|
|
244
255
|
return contentProps;
|
|
@@ -268,7 +279,7 @@ var PopoverTrigger = function PopoverTrigger(_ref2) {
|
|
|
268
279
|
};
|
|
269
280
|
var PopoverCloseButton = function PopoverCloseButton(_ref3) {
|
|
270
281
|
var children = _ref3.children,
|
|
271
|
-
rest = _objectWithoutPropertiesLoose(_ref3,
|
|
282
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
|
|
272
283
|
|
|
273
284
|
var _usePopoverContext2 = usePopoverContext(),
|
|
274
285
|
closeButtonProps = _usePopoverContext2.closeButtonProps;
|
|
@@ -287,7 +298,7 @@ var PopoverContent = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
|
|
|
287
298
|
var props = popoverContentProps({
|
|
288
299
|
ref: ref
|
|
289
300
|
});
|
|
290
|
-
return React.createElement(Contrast,
|
|
301
|
+
return React.createElement(Contrast, _extends({
|
|
291
302
|
className: classNames('eds-popover', {
|
|
292
303
|
'eds-popover--hidden': !showPopover
|
|
293
304
|
}, 'eds-contrast'),
|
|
@@ -320,6 +331,11 @@ function elementContainsEventTarget(element, event) {
|
|
|
320
331
|
return false;
|
|
321
332
|
}
|
|
322
333
|
|
|
334
|
+
function elementContainsElement(parent, child) {
|
|
335
|
+
if (!parent) return false;
|
|
336
|
+
return parent === child || parent.contains(child);
|
|
337
|
+
}
|
|
338
|
+
|
|
323
339
|
function useOnClickOutside(ref, buttonRef, handler) {
|
|
324
340
|
React.useEffect(function () {
|
|
325
341
|
var listener = function listener(event) {
|
package/dist/tooltip.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.esm.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: NodeJS.Timeout;\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\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 };\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 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","contextValue","Provider","value","PopoverTrigger","child","Children","only","PopoverCloseButton","PopoverContent","forwardRef","props","Contrast","popper","elementContainsEventTarget","element","contains","target","composed","composedPath","find","window","buttonRef","handler","listener","document","addEventListener","removeEventListener","warnAboutMissingStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.esm.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: NodeJS.Timeout;\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\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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/tooltip",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.3",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/tooltip.esm.js",
|
|
@@ -17,25 +17,25 @@
|
|
|
17
17
|
"access": "public"
|
|
18
18
|
},
|
|
19
19
|
"scripts": {
|
|
20
|
-
"start": "
|
|
21
|
-
"build": "
|
|
22
|
-
"test": "
|
|
23
|
-
"lint": "
|
|
20
|
+
"start": "dts watch --noClean",
|
|
21
|
+
"build": "dts build",
|
|
22
|
+
"test": "dts test --env=jsdom",
|
|
23
|
+
"lint": "dts lint"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"react": ">=16.8.0",
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@entur/tokens": "^3.3.
|
|
30
|
+
"@entur/tokens": "^3.3.1"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@entur/button": "^2.
|
|
34
|
-
"@entur/icons": "^3.
|
|
35
|
-
"@entur/layout": "^2.1.
|
|
36
|
-
"@entur/utils": "^0.4.
|
|
33
|
+
"@entur/button": "^2.8.0",
|
|
34
|
+
"@entur/icons": "^3.5.0",
|
|
35
|
+
"@entur/layout": "^2.1.4",
|
|
36
|
+
"@entur/utils": "^0.4.3",
|
|
37
37
|
"@popperjs/core": "^2.10.1",
|
|
38
38
|
"react-popper": "^2.2.5"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "bf06a9d451cb7f978946c05ce04bb4e6f63379af"
|
|
41
41
|
}
|