@entur/tooltip 2.6.0 → 2.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +19 -19
- package/dist/tooltip.cjs.development.js +1 -44
- 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 +2 -45
- package/dist/tooltip.esm.js.map +1 -1
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -2,25 +2,6 @@
|
|
|
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. */
|
|
24
5
|
.eds-tooltip-wrapper {
|
|
25
6
|
display: inline-block;
|
|
26
7
|
position: relative;
|
|
@@ -136,4 +117,23 @@
|
|
|
136
117
|
.eds-tooltip--bottom-end::after {
|
|
137
118
|
bottom: calc(100% - 0.25rem);
|
|
138
119
|
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
|
}
|
|
@@ -247,7 +247,7 @@ var Popover = function Popover(_ref) {
|
|
|
247
247
|
};
|
|
248
248
|
return controlled ? buttonProps : _extends({}, buttonProps, buttonOnClick);
|
|
249
249
|
}, [triggerElement, showPopover, setShowPopover, controlled]);
|
|
250
|
-
useOnClickOutside(contentElement, triggerElement, function () {
|
|
250
|
+
utils.useOnClickOutside([contentElement, triggerElement], function () {
|
|
251
251
|
return setShowPopover(false);
|
|
252
252
|
});
|
|
253
253
|
var closeButtonProps = {
|
|
@@ -331,54 +331,11 @@ var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
331
331
|
}, attributes.styles, props), children);
|
|
332
332
|
});
|
|
333
333
|
|
|
334
|
-
function elementContainsEventTarget(element, event) {
|
|
335
|
-
if (!element) {
|
|
336
|
-
return false;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
if (element.contains(event.target)) {
|
|
340
|
-
return true;
|
|
341
|
-
} // For elements inside a Shadow DOM we need to check the composedPath
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
if (event.composed && event.composedPath) {
|
|
345
|
-
var contains = event.composedPath().find(function (target) {
|
|
346
|
-
if (target === window) {
|
|
347
|
-
return false;
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
return element.contains(target);
|
|
351
|
-
});
|
|
352
|
-
return contains ? true : false;
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
return false;
|
|
356
|
-
}
|
|
357
|
-
|
|
358
334
|
function elementContainsElement(parent, child) {
|
|
359
335
|
if (!parent) return false;
|
|
360
336
|
return parent === child || parent.contains(child);
|
|
361
337
|
}
|
|
362
338
|
|
|
363
|
-
function useOnClickOutside(ref, buttonRef, handler) {
|
|
364
|
-
React__default["default"].useEffect(function () {
|
|
365
|
-
var listener = function listener(event) {
|
|
366
|
-
if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
|
|
367
|
-
return;
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
handler();
|
|
371
|
-
};
|
|
372
|
-
|
|
373
|
-
document.addEventListener('mousedown', listener);
|
|
374
|
-
document.addEventListener('touchstart', listener);
|
|
375
|
-
return function () {
|
|
376
|
-
document.removeEventListener('mousedown', listener);
|
|
377
|
-
document.removeEventListener('touchstart', listener);
|
|
378
|
-
};
|
|
379
|
-
}, [ref, buttonRef, handler]);
|
|
380
|
-
}
|
|
381
|
-
|
|
382
339
|
utils.warnAboutMissingStyles('tooltip');
|
|
383
340
|
|
|
384
341
|
exports.Popover = Popover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.cjs.development.js","sources":["../src/Tooltip.tsx","../src/Popover.tsx","../src/index.tsx"],"sourcesContent":["import React, { cloneElement, useState } from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport classNames from 'classnames';\nimport { useRandomId } from '@entur/utils';\nimport { Placement as PopperPlacementProps } from '@popperjs/core';\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './Tooltip.scss';\n\ntype Modifier = {\n name: string;\n enabled?: boolean;\n requires?: Array<string>;\n requiresIfExists?: Array<string>;\n options?: Record<string, unknown>;\n data?: Record<string, unknown>;\n [key: string]: any;\n};\n\nexport type TooltipProps = {\n /** Plassering av tooltip-en */\n placement:\n | 'top'\n | 'top-left'\n | 'top-right'\n | 'left'\n | 'right'\n | 'bottom-left' // bottom-start\n | 'bottom'\n | 'bottom-right'; // bottom-end\n /** Innholdet i tooltip-boksen */\n content: React.ReactNode;\n /** Elementet som skal ha tooltip-funksjonalitet */\n children: React.ReactElement;\n /** Om tooltipen skal vises */\n isOpen?: boolean;\n /** Ekstra klassenavn for tooltip */\n className?: string;\n /** Åpner ikke tooltip ved hover-events\n * @default false\n */\n disableHoverListener?: boolean;\n /** Åpner ikke tooltip ved focus-events\n * @default false\n */\n disableFocusListener?: boolean;\n /** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`\n * @default true\n */\n showCloseButton?: boolean;\n /** Valideringsvariant for Tooltip */\n variant?: 'error';\n /** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip\n * @default [{ name: 'offset', options: { offset: [0, 10]} }]\n */\n popperModifiers?: Modifier[];\n [key: string]: any;\n};\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n placement,\n content,\n children,\n className,\n isOpen = false,\n disableHoverListener = false,\n disableFocusListener = false,\n showCloseButton = true,\n variant,\n popperModifiers = [\n {\n name: 'offset',\n options: { offset: [0, 10] },\n },\n ],\n ...rest\n}) => {\n const [showTooltip, setShowTooltip] = useState(isOpen || false);\n let hoverTimer: ReturnType<typeof setTimeout>;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = tooltipId;\n if (!disableFocusListener) {\n childProps.onFocus = () => setShowTooltip(true);\n childProps.onBlur = () => setShowTooltip(false);\n }\n if (!disableHoverListener) {\n childProps.onMouseEnter = e => handleOpen(e);\n childProps.onMouseLeave = () => onMouseExit();\n }\n\n return (\n <Manager>\n <Reference>\n {({ ref }) =>\n cloneElement(children, {\n ref: ref,\n ...childProps,\n })\n }\n </Reference>\n {showTooltip && (\n <Popper\n modifiers={[{ name: 'arrow', enabled: false }, ...popperModifiers]}\n placement={popperPlacement}\n >\n {({ ref, style, placement: popperPlacement }) => (\n <div\n className={classNames(\n 'eds-tooltip',\n className,\n `eds-tooltip--${popperPlacement}`,\n { 'eds-tooltip--error': variant === 'error' },\n )}\n ref={ref}\n style={style}\n role=\"tooltip\"\n id={tooltipId}\n data-placement={popperPlacement}\n {...rest}\n >\n {content}\n {isOpen && showCloseButton && (\n <IconButton\n className=\"eds-tooltip__close-button\"\n onClick={() => setShowTooltip(false)}\n >\n <CloseIcon />\n </IconButton>\n )}\n </div>\n )}\n </Popper>\n )}\n </Manager>\n );\n};\n","import React, { cloneElement, createContext, useContext } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport { Contrast } from '@entur/layout';\nimport './Popover.scss';\n\ntype PopoverContentCallbackProps = {\n ref: React.Ref<HTMLDivElement>;\n};\n\ntype PopoverContextProps = {\n showPopover: boolean;\n triggerElement?: React.RefObject<HTMLButtonElement>;\n contentElement: React.RefObject<HTMLDivElement>;\n styles: { [key: string]: React.CSSProperties };\n attributes: { [key: string]: { [key: string]: string } | undefined };\n closeButtonProps: Record<string, unknown>;\n popoverContentProps: (\n e: PopoverContentCallbackProps,\n ) => Record<string, unknown>;\n triggerProps: () => Record<string, unknown>;\n [key: string]: any;\n};\n\nconst PopoverContext = createContext<PopoverContextProps | undefined>(\n undefined,\n);\nconst usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (context == null) {\n throw Error('usePopoverContext must be used within <Popover/>');\n }\n return context;\n};\n\nconst useCustomState = (\n state?: boolean,\n setState?: React.Dispatch<React.SetStateAction<boolean>>,\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>, boolean] => {\n const [internalState, setInternalState] = React.useState<boolean>(false);\n const controlled = state !== undefined && setState !== undefined;\n if (controlled) return [state, setState, controlled];\n return [internalState, setInternalState, controlled];\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n /** Hvis du ønsker å styre state selv kan du sende inn state her */\n showPopover?: boolean;\n /** Hvis du ønsker å styre state selv kan du sende inn setState her */\n setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n showPopover: controlledState,\n setShowPopover: setControlledState,\n}) => {\n const [showPopover, setShowPopover, controlled] = useCustomState(\n controlledState,\n setControlledState,\n );\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n const buttonOnClick = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n };\n return controlled ? buttonProps : { ...buttonProps, ...buttonOnClick };\n }, [triggerElement, showPopover, setShowPopover, controlled]);\n\n useOnClickOutside(contentElement, triggerElement, () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover, setShowPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsEventTarget(element: HTMLElement | null, event: Event) {\n if (!element) {\n return false;\n }\n\n if (element.contains(event.target as Node)) {\n return true;\n }\n\n // For elements inside a Shadow DOM we need to check the composedPath\n if (event.composed && event.composedPath) {\n const contains = event.composedPath().find(target => {\n if (target === window) {\n return false;\n }\n return element.contains(target as Node);\n });\n return contains ? true : false;\n }\n\n return false;\n}\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\nfunction useOnClickOutside(\n ref: React.RefObject<HTMLDivElement>,\n buttonRef: React.RefObject<HTMLButtonElement>,\n handler: () => void,\n) {\n React.useEffect(() => {\n const listener = (event: Event) => {\n if (\n elementContainsEventTarget(ref.current, event) ||\n elementContainsEventTarget(buttonRef.current, event)\n ) {\n return;\n }\n\n handler();\n };\n\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, buttonRef, handler]);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n"],"names":["Tooltip","placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers","name","options","offset","rest","useState","showTooltip","setShowTooltip","hoverTimer","handleOpen","event","persist","setTimeout","onMouseExit","clearTimeout","React","useEffect","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onBlur","onMouseEnter","e","onMouseLeave","Manager","Reference","ref","cloneElement","Popper","modifiers","enabled","style","classNames","role","id","IconButton","onClick","CloseIcon","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","useCustomState","state","setState","internalState","setInternalState","controlled","Popover","controlledState","showPopover","setControlledState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","styles","attributes","forceUpdate","triggerProps","useCallback","buttonProps","buttonOnClick","preventDefault","prev","useOnClickOutside","closeButtonProps","popoverContentProps","contentProps","onKeyDown","key","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","elementContainsElement","focusElementIsTrigger","isValidBlur","contextValue","Provider","value","PopoverTrigger","child","Children","only","PopoverCloseButton","PopoverContent","forwardRef","props","Contrast","popper","elementContainsEventTarget","element","contains","target","composed","composedPath","find","window","parent","buttonRef","handler","listener","document","addEventListener","removeEventListener","warnAboutMissingStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.cjs.development.js","sources":["../src/Tooltip.tsx","../src/Popover.tsx","../src/index.tsx"],"sourcesContent":["import React, { cloneElement, useState } from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport classNames from 'classnames';\nimport { useRandomId } from '@entur/utils';\nimport { Placement as PopperPlacementProps } from '@popperjs/core';\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './Tooltip.scss';\n\ntype Modifier = {\n name: string;\n enabled?: boolean;\n requires?: Array<string>;\n requiresIfExists?: Array<string>;\n options?: Record<string, unknown>;\n data?: Record<string, unknown>;\n [key: string]: any;\n};\n\nexport type TooltipProps = {\n /** Plassering av tooltip-en */\n placement:\n | 'top'\n | 'top-left'\n | 'top-right'\n | 'left'\n | 'right'\n | 'bottom-left' // bottom-start\n | 'bottom'\n | 'bottom-right'; // bottom-end\n /** Innholdet i tooltip-boksen */\n content: React.ReactNode;\n /** Elementet som skal ha tooltip-funksjonalitet */\n children: React.ReactElement;\n /** Om tooltipen skal vises */\n isOpen?: boolean;\n /** Ekstra klassenavn for tooltip */\n className?: string;\n /** Åpner ikke tooltip ved hover-events\n * @default false\n */\n disableHoverListener?: boolean;\n /** Åpner ikke tooltip ved focus-events\n * @default false\n */\n disableFocusListener?: boolean;\n /** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`\n * @default true\n */\n showCloseButton?: boolean;\n /** Valideringsvariant for Tooltip */\n variant?: 'error';\n /** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip\n * @default [{ name: 'offset', options: { offset: [0, 10]} }]\n */\n popperModifiers?: Modifier[];\n [key: string]: any;\n};\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n placement,\n content,\n children,\n className,\n isOpen = false,\n disableHoverListener = false,\n disableFocusListener = false,\n showCloseButton = true,\n variant,\n popperModifiers = [\n {\n name: 'offset',\n options: { offset: [0, 10] },\n },\n ],\n ...rest\n}) => {\n const [showTooltip, setShowTooltip] = useState(isOpen || false);\n let hoverTimer: ReturnType<typeof setTimeout>;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = tooltipId;\n if (!disableFocusListener) {\n childProps.onFocus = () => setShowTooltip(true);\n childProps.onBlur = () => setShowTooltip(false);\n }\n if (!disableHoverListener) {\n childProps.onMouseEnter = e => handleOpen(e);\n childProps.onMouseLeave = () => onMouseExit();\n }\n\n return (\n <Manager>\n <Reference>\n {({ ref }) =>\n cloneElement(children, {\n ref: ref,\n ...childProps,\n })\n }\n </Reference>\n {showTooltip && (\n <Popper\n modifiers={[{ name: 'arrow', enabled: false }, ...popperModifiers]}\n placement={popperPlacement}\n >\n {({ ref, style, placement: popperPlacement }) => (\n <div\n className={classNames(\n 'eds-tooltip',\n className,\n `eds-tooltip--${popperPlacement}`,\n { 'eds-tooltip--error': variant === 'error' },\n )}\n ref={ref}\n style={style}\n role=\"tooltip\"\n id={tooltipId}\n data-placement={popperPlacement}\n {...rest}\n >\n {content}\n {isOpen && showCloseButton && (\n <IconButton\n className=\"eds-tooltip__close-button\"\n onClick={() => setShowTooltip(false)}\n >\n <CloseIcon />\n </IconButton>\n )}\n </div>\n )}\n </Popper>\n )}\n </Manager>\n );\n};\n","import React, { cloneElement, createContext, useContext } from 'react';\n\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\n\nimport { Contrast } from '@entur/layout';\nimport { useOnClickOutside } from '@entur/utils';\n\nimport './Popover.scss';\n\ntype PopoverContentCallbackProps = {\n ref: React.Ref<HTMLDivElement>;\n};\n\ntype PopoverContextProps = {\n showPopover: boolean;\n triggerElement?: React.RefObject<HTMLButtonElement>;\n contentElement: React.RefObject<HTMLDivElement>;\n styles: { [key: string]: React.CSSProperties };\n attributes: { [key: string]: { [key: string]: string } | undefined };\n closeButtonProps: Record<string, unknown>;\n popoverContentProps: (\n e: PopoverContentCallbackProps,\n ) => Record<string, unknown>;\n triggerProps: () => Record<string, unknown>;\n [key: string]: any;\n};\n\nconst PopoverContext = createContext<PopoverContextProps | undefined>(\n undefined,\n);\nconst usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (context == null) {\n throw Error('usePopoverContext must be used within <Popover/>');\n }\n return context;\n};\n\nconst useCustomState = (\n state?: boolean,\n setState?: React.Dispatch<React.SetStateAction<boolean>>,\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>, boolean] => {\n const [internalState, setInternalState] = React.useState<boolean>(false);\n const controlled = state !== undefined && setState !== undefined;\n if (controlled) return [state, setState, controlled];\n return [internalState, setInternalState, controlled];\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n /** Hvis du ønsker å styre state selv kan du sende inn state her */\n showPopover?: boolean;\n /** Hvis du ønsker å styre state selv kan du sende inn setState her */\n setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n showPopover: controlledState,\n setShowPopover: setControlledState,\n}) => {\n const [showPopover, setShowPopover, controlled] = useCustomState(\n controlledState,\n setControlledState,\n );\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n const buttonOnClick = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n };\n return controlled ? buttonProps : { ...buttonProps, ...buttonOnClick };\n }, [triggerElement, showPopover, setShowPopover, controlled]);\n\n useOnClickOutside([contentElement, triggerElement], () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover, setShowPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n"],"names":["Tooltip","placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers","name","options","offset","rest","useState","showTooltip","setShowTooltip","hoverTimer","handleOpen","event","persist","setTimeout","onMouseExit","clearTimeout","React","useEffect","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onBlur","onMouseEnter","e","onMouseLeave","Manager","Reference","ref","cloneElement","Popper","modifiers","enabled","style","classNames","role","id","IconButton","onClick","CloseIcon","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","useCustomState","state","setState","internalState","setInternalState","controlled","Popover","controlledState","showPopover","setControlledState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","styles","attributes","forceUpdate","triggerProps","useCallback","buttonProps","buttonOnClick","preventDefault","prev","useOnClickOutside","closeButtonProps","popoverContentProps","contentProps","onKeyDown","key","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","elementContainsElement","focusElementIsTrigger","isValidBlur","contextValue","Provider","value","PopoverTrigger","child","Children","only","PopoverCloseButton","PopoverContent","forwardRef","props","Contrast","popper","parent","contains","warnAboutMissingStyles"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),r=require("react-popper"),n=require("classnames"),o=require("@entur/icons"),u=require("@entur/button"),a=require("@entur/layout");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),r=require("react-popper"),n=require("classnames"),o=require("@entur/icons"),u=require("@entur/button"),a=require("@entur/layout");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(t),s=i(n);function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(this,arguments)}function f(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)t.indexOf(r=u[n])>=0||(o[r]=e[r]);return o}var d=["placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers"],p=["children"],v=t.createContext(void 0),m=function(){var e=t.useContext(v);if(null==e)throw Error("usePopoverContext must be used within <Popover/>");return e},b=l.default.forwardRef((function(e,t){var r=e.children,n=m(),o=n.showPopover,u=n.attributes,i=n.styles,f=(0,n.popoverContentProps)({ref:t});return 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),r)}));function h(e,t){return!!e&&(e===t||e.contains(t))}e.warnAboutMissingStyles("tooltip"),exports.Popover=function(t){var n=t.children,o=t.placement,u=void 0===o?"bottom-start":o,a=function(e,t){var r=l.default.useState(!1),n=void 0!==e&&void 0!==t;return n?[e,t,n]:[r[0],r[1],n]}(t.showPopover,t.setShowPopover),i=a[0],s=a[1],f=a[2],d=l.default.useRef(null),p=l.default.useRef(null),m=r.usePopper(d.current,p.current,{modifiers:[{name:"arrow",enabled:!1},{name:"offset",options:{offset:[0,8]}}],placement:u}),b=m.styles,P=m.attributes,E=m.forceUpdate;l.default.useEffect((function(){E&&E()}),[i,E]);var g=l.default.useCallback((function(){var e={"aria-haspopup":"dialog","aria-expanded":i,ref:d};return f?e:c({},e,{onClick:function(e){e.preventDefault(),s((function(e){return!e}))}})}),[d,i,s,f]);e.useOnClickOutside([p,d],(function(){return s(!1)}));var y={onClick:function(e){e.preventDefault(),s(!1)}},C=l.default.useCallback((function(){return{role:"dialog","aria-modal":"false",ref:p,onKeyDown:function(e){"Escape"===e.key&&i&&s(!1)},onBlur:function(e){var t=e.relatedTarget;if(t&&"-1"!==t.getAttribute("tabindex")){var r=h(p.current,t),n=h(d.current,t);i&&!r&&!n&&s(!1)}}}}),[p,i,s]);return l.default.createElement(v.Provider,{value:{showPopover:i,triggerElement:d,contentElement:p,styles:b,attributes:P,popoverContentProps:C,closeButtonProps:y,triggerProps:g}},n)},exports.PopoverCloseButton=function(e){var r=e.children,n=f(e,p),o=m();return t.cloneElement(r,c({},o.closeButtonProps,n))},exports.PopoverContent=b,exports.PopoverTrigger=function(e){var r=e.children,n=m().triggerProps,o=l.default.Children.only(r);return t.cloneElement(o,n())},exports.Tooltip=function(n){var a,i=n.placement,p=n.content,v=n.children,m=n.className,b=n.isOpen,h=void 0!==b&&b,P=n.disableHoverListener,E=void 0!==P&&P,g=n.disableFocusListener,y=void 0!==g&&g,C=n.showCloseButton,w=void 0===C||C,x=n.variant,O=n.popperModifiers,k=void 0===O?[{name:"offset",options:{offset:[0,10]}}]:O,B=f(n,d),q=t.useState(h||!1),M=q[0],T=q[1];l.default.useEffect((function(){return function(){clearTimeout(a)}}));var j=e.useRandomId("eds-tooltip");l.default.useEffect((function(){T(h)}),[h]),l.default.useEffect((function(){p||T(!1)}),[p]);var L=i;i.includes("-")&&(i.includes("right")&&(L=i.replace("right","end")),i.includes("left")&&(L=i.replace("left","start")));var N={};return N["aria-describedby"]=j,y||(N.onFocus=function(){return T(!0)},N.onBlur=function(){return T(!1)}),E||(N.onMouseEnter=function(e){return e.persist(),void(a=setTimeout((function(){T(!0)}),150))},N.onMouseLeave=function(){return T(!1),void clearTimeout(a)}),l.default.createElement(r.Manager,null,l.default.createElement(r.Reference,null,(function(e){return t.cloneElement(v,c({ref:e.ref},N))})),M&&l.default.createElement(r.Popper,{modifiers:[{name:"arrow",enabled:!1}].concat(k),placement:L},(function(e){var t=e.ref,r=e.style,n=e.placement;return l.default.createElement("div",c({className:s.default("eds-tooltip",m,"eds-tooltip--"+n,{"eds-tooltip--error":"error"===x}),ref:t,style:r,role:"tooltip",id:j,"data-placement":n},B),p,h&&w&&l.default.createElement(u.IconButton,{className:"eds-tooltip__close-button",onClick:function(){return T(!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\nconst useCustomState = (\n state?: boolean,\n setState?: React.Dispatch<React.SetStateAction<boolean>>,\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>, boolean] => {\n const [internalState, setInternalState] = React.useState<boolean>(false);\n const controlled = state !== undefined && setState !== undefined;\n if (controlled) return [state, setState, controlled];\n return [internalState, setInternalState, controlled];\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n /** Hvis du ønsker å styre state selv kan du sende inn state her */\n showPopover?: boolean;\n /** Hvis du ønsker å styre state selv kan du sende inn setState her */\n setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n showPopover: controlledState,\n setShowPopover: setControlledState,\n}) => {\n const [showPopover, setShowPopover, controlled] = useCustomState(\n controlledState,\n setControlledState,\n );\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n const buttonOnClick = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n };\n return controlled ? buttonProps : { ...buttonProps, ...buttonOnClick };\n }, [triggerElement, showPopover, setShowPopover, controlled]);\n\n useOnClickOutside(contentElement, triggerElement, () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover, setShowPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsEventTarget(element: HTMLElement | null, event: Event) {\n if (!element) {\n return false;\n }\n\n if (element.contains(event.target as Node)) {\n return true;\n }\n\n // For elements inside a Shadow DOM we need to check the composedPath\n if (event.composed && event.composedPath) {\n const contains = event.composedPath().find(target => {\n if (target === window) {\n return false;\n }\n return element.contains(target as Node);\n });\n return contains ? true : false;\n }\n\n return false;\n}\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\nfunction useOnClickOutside(\n ref: React.RefObject<HTMLDivElement>,\n buttonRef: React.RefObject<HTMLButtonElement>,\n handler: () => void,\n) {\n React.useEffect(() => {\n const listener = (event: Event) => {\n if (\n elementContainsEventTarget(ref.current, event) ||\n elementContainsEventTarget(buttonRef.current, event)\n ) {\n return;\n }\n\n handler();\n };\n\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, buttonRef, handler]);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n","import React, { cloneElement, useState } from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport classNames from 'classnames';\nimport { useRandomId } from '@entur/utils';\nimport { Placement as PopperPlacementProps } from '@popperjs/core';\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './Tooltip.scss';\n\ntype Modifier = {\n name: string;\n enabled?: boolean;\n requires?: Array<string>;\n requiresIfExists?: Array<string>;\n options?: Record<string, unknown>;\n data?: Record<string, unknown>;\n [key: string]: any;\n};\n\nexport type TooltipProps = {\n /** Plassering av tooltip-en */\n placement:\n | 'top'\n | 'top-left'\n | 'top-right'\n | 'left'\n | 'right'\n | 'bottom-left' // bottom-start\n | 'bottom'\n | 'bottom-right'; // bottom-end\n /** Innholdet i tooltip-boksen */\n content: React.ReactNode;\n /** Elementet som skal ha tooltip-funksjonalitet */\n children: React.ReactElement;\n /** Om tooltipen skal vises */\n isOpen?: boolean;\n /** Ekstra klassenavn for tooltip */\n className?: string;\n /** Åpner ikke tooltip ved hover-events\n * @default false\n */\n disableHoverListener?: boolean;\n /** Åpner ikke tooltip ved focus-events\n * @default false\n */\n disableFocusListener?: boolean;\n /** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`\n * @default true\n */\n showCloseButton?: boolean;\n /** Valideringsvariant for Tooltip */\n variant?: 'error';\n /** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip\n * @default [{ name: 'offset', options: { offset: [0, 10]} }]\n */\n popperModifiers?: Modifier[];\n [key: string]: any;\n};\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n placement,\n content,\n children,\n className,\n isOpen = false,\n disableHoverListener = false,\n disableFocusListener = false,\n showCloseButton = true,\n variant,\n popperModifiers = [\n {\n name: 'offset',\n options: { offset: [0, 10] },\n },\n ],\n ...rest\n}) => {\n const [showTooltip, setShowTooltip] = useState(isOpen || false);\n let hoverTimer: ReturnType<typeof setTimeout>;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = tooltipId;\n if (!disableFocusListener) {\n childProps.onFocus = () => setShowTooltip(true);\n childProps.onBlur = () => setShowTooltip(false);\n }\n if (!disableHoverListener) {\n childProps.onMouseEnter = e => handleOpen(e);\n childProps.onMouseLeave = () => onMouseExit();\n }\n\n return (\n <Manager>\n <Reference>\n {({ ref }) =>\n cloneElement(children, {\n ref: ref,\n ...childProps,\n })\n }\n </Reference>\n {showTooltip && (\n <Popper\n modifiers={[{ name: 'arrow', enabled: false }, ...popperModifiers]}\n placement={popperPlacement}\n >\n {({ ref, style, placement: popperPlacement }) => (\n <div\n className={classNames(\n 'eds-tooltip',\n className,\n `eds-tooltip--${popperPlacement}`,\n { 'eds-tooltip--error': variant === 'error' },\n )}\n ref={ref}\n style={style}\n role=\"tooltip\"\n id={tooltipId}\n data-placement={popperPlacement}\n {...rest}\n >\n {content}\n {isOpen && showCloseButton && (\n <IconButton\n className=\"eds-tooltip__close-button\"\n onClick={() => setShowTooltip(false)}\n >\n <CloseIcon />\n </IconButton>\n )}\n </div>\n )}\n </Popper>\n )}\n </Manager>\n );\n};\n"],"names":["PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","PopoverContent","React","forwardRef","ref","children","showPopover","attributes","styles","props","popoverContentProps","Contrast","className","classNames","style","popper","elementContainsEventTarget","element","event","contains","target","composed","composedPath","find","window","elementContainsElement","parent","child","warnAboutMissingStyles","placement","state","setState","useState","controlled","useCustomState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","modifiers","name","enabled","options","offset","forceUpdate","useEffect","buttonRef","handler","triggerProps","useCallback","buttonProps","onClick","e","preventDefault","prev","listener","document","addEventListener","removeEventListener","closeButtonProps","role","onKeyDown","key","onBlur","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","focusElementIsTrigger","Provider","value","rest","cloneElement","Children","only","hoverTimer","content","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers","showTooltip","setShowTooltip","clearTimeout","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onMouseEnter","persist","setTimeout","onMouseLeave","Manager","Reference","Popper","id","IconButton","CloseIcon"],"mappings":"80BAyBMA,EAAiBC,qBACrBC,GAEIC,EAAoB,eAClBC,EAAUC,aAAWL,MACZ,MAAXI,QACIE,MAAM,2DAEPF,GAoKIG,EAAiBC,UAAMC,YAGlC,WAAeC,OAAZC,IAAAA,WAEDR,IADMS,IAAAA,YAAaC,IAAAA,WAAYC,IAAAA,OAE3BC,GAAQC,IAF2BA,qBAEP,CAAEN,IAAAA,WAElCF,wBAACS,cACCC,UAAWC,UACT,cACA,wBAC0BP,GAE1B,gBAEFQ,MAAON,EAAOO,sBACAT,GACVC,EAAWC,OACXC,GAEHJ,MAKP,SAASW,EAA2BC,EAA6BC,YAC1DD,KAIDA,EAAQE,SAASD,EAAME,SAKvBF,EAAMG,UAAYH,EAAMI,cACTJ,EAAMI,eAAeC,MAAK,SAAAH,UACrCA,IAAWI,QAGRP,EAAQE,SAASC,QAQ9B,SAASK,EACPC,EACAC,WAEKD,IACEA,IAAWC,GAASD,EAAOP,SAASQ,ICxP7CC,yBAAuB,2BDwDwB,gBAC7CvB,IAAAA,aACAwB,UAAAA,aAAY,mBAzBS,SACrBC,EACAC,SAE0C7B,UAAM8B,UAAkB,GAC5DC,OAAuBrC,IAAVkC,QAAoClC,IAAbmC,SACtCE,EAAmB,CAACH,EAAOC,EAAUE,GAClC,WAAkCA,GAsBSC,GAHlD5B,cACA6B,gBAEO7B,OAAa6B,OAAgBF,OAI9BG,EAAiBlC,UAAMmC,OAAO,MAC9BC,EAAiBpC,UAAMmC,OAAO,QAEQE,YAC1CH,EAAeI,QACfF,EAAeE,QACf,CACEC,UAAW,CACT,CAAEC,KAAM,QAASC,SAAS,GAC1B,CACED,KAAM,SACNE,QAAS,CACPC,OAAQ,CAAC,EAAG,MAIlBhB,UAAWA,IAbPrB,IAAAA,OAAQD,IAAAA,WAAYuC,IAAAA,YAiB5B5C,UAAM6C,WAAU,WACVD,GACFA,MAED,CAACxC,EAAawC,QAkKjB1C,EACA4C,EACAC,EAlKMC,EAAehD,UAAMiD,aAAY,eAC/BC,EAAc,iBACD,yBACA9C,EACjBF,IAAKgC,UAQAH,EAAamB,OAAmBA,EANjB,CACpBC,QAAS,SAACC,GACRA,EAAEC,iBACFpB,GAAe,SAAAqB,UAASA,UAI3B,CAACpB,EAAgB9B,EAAa6B,EAAgBF,IAuJjD/B,UAAM6C,WAAU,eACRU,EAAW,SAACvC,GAEdF,EAA2BZ,EAAIoC,QAAStB,IACxCF,EAA2BgC,EAAUR,QAAStB,IAKhD+B,YAGFS,SAASC,iBAAiB,YAAaF,GACvCC,SAASC,iBAAiB,aAAcF,GAEjC,WACLC,SAASE,oBAAoB,YAAaH,GAC1CC,SAASE,oBAAoB,aAAcH,MAE5C,CAvBHrD,EAjJkBkC,EAkJlBU,EAlJkCZ,EAmJlCa,EAnJkD,kBAChDd,GAAe,UAEX0B,EAAmB,CACvBR,QAAS,SAACC,GACRA,EAAEC,iBACFpB,GAAe,KAGbzB,EAAsBR,UAAMiD,aAAY,iBACvB,CACnBW,KAAM,sBACQ,QACd1D,IAAKkC,EACLyB,UAAW,SAAC7C,GACQ,WAAdA,EAAM8C,KACR1D,GAAe6B,GAAe,IAGlC8B,OAAQ,SAAC/C,OACDgD,EAAwBhD,EAAMiD,iBAGjCD,GACkD,OAAnDA,EAAsBE,aAAa,iBAG/BC,EAAwB5C,EAC5Ba,EAAeE,QACf0B,GAEII,EAAwB7C,EAC5BW,EAAeI,QACf0B,GAGE5D,IADiB+D,IAA0BC,GACfnC,GAAe,QAIlD,CAACG,EAAgBhC,EAAa6B,WAY/BjC,wBAACR,EAAe6E,UAASC,MAXe,CACxClE,YAAAA,EACA8B,eAAAA,EACAE,eAAAA,EACA9B,OAAAA,EACAD,WAAAA,EACAG,oBAAAA,EACAmD,iBAAAA,EACAX,aAAAA,IAIG7C,+BAqB8D,gBACnEA,IAAAA,SACGoE,WAE0B5E,WACtB6E,eAAarE,SADZwD,iBACgDY,qDAhBG,gBAAGpE,IAAAA,SACtD6C,EAAiBrD,IAAjBqD,aACFvB,EAAQzB,UAAMyE,SAASC,KAAKvE,UAC3BqE,eAAa/C,EAAOuB,sBErHkB,gBAmBzC2B,EAlBJhD,IAAAA,UACAiD,IAAAA,QACAzE,IAAAA,SACAO,IAAAA,cACAmE,OAAAA,oBACAC,qBAAAA,oBACAC,qBAAAA,oBACAC,gBAAAA,gBACAC,IAAAA,YACAC,gBAAAA,aAAkB,CAChB,CACE1C,KAAM,SACNE,QAAS,CAAEC,OAAQ,CAAC,EAAG,SAGxB4B,WAEmCzC,WAAS+C,IAAU,GAAlDM,OAAaC,OAapBpF,UAAM6C,WAAU,kBACP,WACLwC,aAAaV,WAIXW,EAAYC,cAAY,eAC9BvF,UAAM6C,WAAU,WACduC,EAAeP,KACd,CAACA,IAEJ7E,UAAM6C,WAAU,WACT+B,GACHQ,GAAe,KAEhB,CAACR,QAEAY,EAAkB7D,EAClBA,EAAU8D,SAAS,OACjB9D,EAAU8D,SAAS,WACrBD,EAAkB7D,EAAU+D,QAC1B,QACA,QAGA/D,EAAU8D,SAAS,UACrBD,EAAkB7D,EAAU+D,QAC1B,OACA,eAKAC,EAMF,UACJA,EAAW,oBAAsBL,EAC5BP,IACHY,EAAWC,QAAU,kBAAMR,GAAe,IAC1CO,EAAW5B,OAAS,kBAAMqB,GAAe,KAEtCN,IACHa,EAAWE,aAAe,SAAAzC,UAAgBA,EAvDpC0C,eACNnB,EAAaoB,YAAW,WACtBX,GAAe,KACd,OAqDHO,EAAWK,aAAe,kBAlD1BZ,GAAe,QACfC,aAAaV,KAqDb3E,wBAACiG,eACCjG,wBAACkG,kBACE,mBACC1B,eAAarE,KACXD,MAFAA,KAGGyF,OAIRR,GACCnF,wBAACmG,UACC5D,WAAY,CAAEC,KAAM,QAASC,SAAS,WAAYyC,GAClDvD,UAAW6D,IAEV,gBAAGtF,IAAAA,IAAKU,IAAAA,MAAkB4E,IAAX7D,iBACd3B,iCACEU,UAAWC,UACT,cACAD,kBACgB8E,EAChB,sBAAoC,UAAZP,IAE1B/E,IAAKA,EACLU,MAAOA,EACPgD,KAAK,UACLwC,GAAId,mBACYE,GACZjB,GAEHK,EACAC,GAAUG,GACThF,wBAACqG,cACC3F,UAAU,4BACVyC,QAAS,kBAAMiC,GAAe,KAE9BpF,wBAACsG"}
|
|
1
|
+
{"version":3,"file":"tooltip.cjs.production.min.js","sources":["../src/Popover.tsx","../src/index.tsx","../src/Tooltip.tsx"],"sourcesContent":["import React, { cloneElement, createContext, useContext } from 'react';\n\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\n\nimport { Contrast } from '@entur/layout';\nimport { useOnClickOutside } from '@entur/utils';\n\nimport './Popover.scss';\n\ntype PopoverContentCallbackProps = {\n ref: React.Ref<HTMLDivElement>;\n};\n\ntype PopoverContextProps = {\n showPopover: boolean;\n triggerElement?: React.RefObject<HTMLButtonElement>;\n contentElement: React.RefObject<HTMLDivElement>;\n styles: { [key: string]: React.CSSProperties };\n attributes: { [key: string]: { [key: string]: string } | undefined };\n closeButtonProps: Record<string, unknown>;\n popoverContentProps: (\n e: PopoverContentCallbackProps,\n ) => Record<string, unknown>;\n triggerProps: () => Record<string, unknown>;\n [key: string]: any;\n};\n\nconst PopoverContext = createContext<PopoverContextProps | undefined>(\n undefined,\n);\nconst usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (context == null) {\n throw Error('usePopoverContext must be used within <Popover/>');\n }\n return context;\n};\n\nconst useCustomState = (\n state?: boolean,\n setState?: React.Dispatch<React.SetStateAction<boolean>>,\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>, boolean] => {\n const [internalState, setInternalState] = React.useState<boolean>(false);\n const controlled = state !== undefined && setState !== undefined;\n if (controlled) return [state, setState, controlled];\n return [internalState, setInternalState, controlled];\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n /** Hvis du ønsker å styre state selv kan du sende inn state her */\n showPopover?: boolean;\n /** Hvis du ønsker å styre state selv kan du sende inn setState her */\n setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n showPopover: controlledState,\n setShowPopover: setControlledState,\n}) => {\n const [showPopover, setShowPopover, controlled] = useCustomState(\n controlledState,\n setControlledState,\n );\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n const buttonOnClick = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n };\n return controlled ? buttonProps : { ...buttonProps, ...buttonOnClick };\n }, [triggerElement, showPopover, setShowPopover, controlled]);\n\n useOnClickOutside([contentElement, triggerElement], () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover, setShowPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n","import React, { cloneElement, useState } from 'react';\nimport { Manager, Reference, Popper } from 'react-popper';\nimport classNames from 'classnames';\nimport { useRandomId } from '@entur/utils';\nimport { Placement as PopperPlacementProps } from '@popperjs/core';\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './Tooltip.scss';\n\ntype Modifier = {\n name: string;\n enabled?: boolean;\n requires?: Array<string>;\n requiresIfExists?: Array<string>;\n options?: Record<string, unknown>;\n data?: Record<string, unknown>;\n [key: string]: any;\n};\n\nexport type TooltipProps = {\n /** Plassering av tooltip-en */\n placement:\n | 'top'\n | 'top-left'\n | 'top-right'\n | 'left'\n | 'right'\n | 'bottom-left' // bottom-start\n | 'bottom'\n | 'bottom-right'; // bottom-end\n /** Innholdet i tooltip-boksen */\n content: React.ReactNode;\n /** Elementet som skal ha tooltip-funksjonalitet */\n children: React.ReactElement;\n /** Om tooltipen skal vises */\n isOpen?: boolean;\n /** Ekstra klassenavn for tooltip */\n className?: string;\n /** Åpner ikke tooltip ved hover-events\n * @default false\n */\n disableHoverListener?: boolean;\n /** Åpner ikke tooltip ved focus-events\n * @default false\n */\n disableFocusListener?: boolean;\n /** Viser en lukkeknapp om man kontrollerer åpningen av Tooltip vha `isOpen`\n * @default true\n */\n showCloseButton?: boolean;\n /** Valideringsvariant for Tooltip */\n variant?: 'error';\n /** En array av modifiers som sendes til Popper, rammeverket som brukes til plassering av Tooltip\n * @default [{ name: 'offset', options: { offset: [0, 10]} }]\n */\n popperModifiers?: Modifier[];\n [key: string]: any;\n};\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n placement,\n content,\n children,\n className,\n isOpen = false,\n disableHoverListener = false,\n disableFocusListener = false,\n showCloseButton = true,\n variant,\n popperModifiers = [\n {\n name: 'offset',\n options: { offset: [0, 10] },\n },\n ],\n ...rest\n}) => {\n const [showTooltip, setShowTooltip] = useState(isOpen || false);\n let hoverTimer: ReturnType<typeof setTimeout>;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = 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","elementContainsElement","parent","child","contains","warnAboutMissingStyles","placement","state","setState","useState","controlled","useCustomState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","modifiers","name","enabled","options","offset","forceUpdate","useEffect","triggerProps","useCallback","buttonProps","onClick","e","preventDefault","prev","useOnClickOutside","closeButtonProps","role","onKeyDown","event","key","onBlur","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","focusElementIsTrigger","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":"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"}
|
package/dist/tooltip.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useRandomId, warnAboutMissingStyles } from '@entur/utils';
|
|
1
|
+
import { useRandomId, useOnClickOutside, warnAboutMissingStyles } from '@entur/utils';
|
|
2
2
|
import React, { useState, cloneElement, createContext, useContext } from 'react';
|
|
3
3
|
import { Manager, Reference, Popper, usePopper } from 'react-popper';
|
|
4
4
|
import classNames from 'classnames';
|
|
@@ -238,7 +238,7 @@ var Popover = function Popover(_ref) {
|
|
|
238
238
|
};
|
|
239
239
|
return controlled ? buttonProps : _extends({}, buttonProps, buttonOnClick);
|
|
240
240
|
}, [triggerElement, showPopover, setShowPopover, controlled]);
|
|
241
|
-
useOnClickOutside(contentElement, triggerElement, function () {
|
|
241
|
+
useOnClickOutside([contentElement, triggerElement], function () {
|
|
242
242
|
return setShowPopover(false);
|
|
243
243
|
});
|
|
244
244
|
var closeButtonProps = {
|
|
@@ -322,54 +322,11 @@ var PopoverContent = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
|
|
|
322
322
|
}, attributes.styles, props), children);
|
|
323
323
|
});
|
|
324
324
|
|
|
325
|
-
function elementContainsEventTarget(element, event) {
|
|
326
|
-
if (!element) {
|
|
327
|
-
return false;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
if (element.contains(event.target)) {
|
|
331
|
-
return true;
|
|
332
|
-
} // For elements inside a Shadow DOM we need to check the composedPath
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
if (event.composed && event.composedPath) {
|
|
336
|
-
var contains = event.composedPath().find(function (target) {
|
|
337
|
-
if (target === window) {
|
|
338
|
-
return false;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
return element.contains(target);
|
|
342
|
-
});
|
|
343
|
-
return contains ? true : false;
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
return false;
|
|
347
|
-
}
|
|
348
|
-
|
|
349
325
|
function elementContainsElement(parent, child) {
|
|
350
326
|
if (!parent) return false;
|
|
351
327
|
return parent === child || parent.contains(child);
|
|
352
328
|
}
|
|
353
329
|
|
|
354
|
-
function useOnClickOutside(ref, buttonRef, handler) {
|
|
355
|
-
React.useEffect(function () {
|
|
356
|
-
var listener = function listener(event) {
|
|
357
|
-
if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
|
|
358
|
-
return;
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
handler();
|
|
362
|
-
};
|
|
363
|
-
|
|
364
|
-
document.addEventListener('mousedown', listener);
|
|
365
|
-
document.addEventListener('touchstart', listener);
|
|
366
|
-
return function () {
|
|
367
|
-
document.removeEventListener('mousedown', listener);
|
|
368
|
-
document.removeEventListener('touchstart', listener);
|
|
369
|
-
};
|
|
370
|
-
}, [ref, buttonRef, handler]);
|
|
371
|
-
}
|
|
372
|
-
|
|
373
330
|
warnAboutMissingStyles('tooltip');
|
|
374
331
|
|
|
375
332
|
export { Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, Tooltip };
|
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: ReturnType<typeof setTimeout>;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = tooltipId;\n if (!disableFocusListener) {\n childProps.onFocus = () => setShowTooltip(true);\n childProps.onBlur = () => setShowTooltip(false);\n }\n if (!disableHoverListener) {\n childProps.onMouseEnter = e => handleOpen(e);\n childProps.onMouseLeave = () => onMouseExit();\n }\n\n return (\n <Manager>\n <Reference>\n {({ ref }) =>\n cloneElement(children, {\n ref: ref,\n ...childProps,\n })\n }\n </Reference>\n {showTooltip && (\n <Popper\n modifiers={[{ name: 'arrow', enabled: false }, ...popperModifiers]}\n placement={popperPlacement}\n >\n {({ ref, style, placement: popperPlacement }) => (\n <div\n className={classNames(\n 'eds-tooltip',\n className,\n `eds-tooltip--${popperPlacement}`,\n { 'eds-tooltip--error': variant === 'error' },\n )}\n ref={ref}\n style={style}\n role=\"tooltip\"\n id={tooltipId}\n data-placement={popperPlacement}\n {...rest}\n >\n {content}\n {isOpen && showCloseButton && (\n <IconButton\n className=\"eds-tooltip__close-button\"\n onClick={() => setShowTooltip(false)}\n >\n <CloseIcon />\n </IconButton>\n )}\n </div>\n )}\n </Popper>\n )}\n </Manager>\n );\n};\n","import React, { cloneElement, createContext, useContext } from 'react';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport { Contrast } from '@entur/layout';\nimport './Popover.scss';\n\ntype PopoverContentCallbackProps = {\n ref: React.Ref<HTMLDivElement>;\n};\n\ntype PopoverContextProps = {\n showPopover: boolean;\n triggerElement?: React.RefObject<HTMLButtonElement>;\n contentElement: React.RefObject<HTMLDivElement>;\n styles: { [key: string]: React.CSSProperties };\n attributes: { [key: string]: { [key: string]: string } | undefined };\n closeButtonProps: Record<string, unknown>;\n popoverContentProps: (\n e: PopoverContentCallbackProps,\n ) => Record<string, unknown>;\n triggerProps: () => Record<string, unknown>;\n [key: string]: any;\n};\n\nconst PopoverContext = createContext<PopoverContextProps | undefined>(\n undefined,\n);\nconst usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (context == null) {\n throw Error('usePopoverContext must be used within <Popover/>');\n }\n return context;\n};\n\nconst useCustomState = (\n state?: boolean,\n setState?: React.Dispatch<React.SetStateAction<boolean>>,\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>, boolean] => {\n const [internalState, setInternalState] = React.useState<boolean>(false);\n const controlled = state !== undefined && setState !== undefined;\n if (controlled) return [state, setState, controlled];\n return [internalState, setInternalState, controlled];\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n /** Hvis du ønsker å styre state selv kan du sende inn state her */\n showPopover?: boolean;\n /** Hvis du ønsker å styre state selv kan du sende inn setState her */\n setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n showPopover: controlledState,\n setShowPopover: setControlledState,\n}) => {\n const [showPopover, setShowPopover, controlled] = useCustomState(\n controlledState,\n setControlledState,\n );\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n const buttonOnClick = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n };\n return controlled ? buttonProps : { ...buttonProps, ...buttonOnClick };\n }, [triggerElement, showPopover, setShowPopover, controlled]);\n\n useOnClickOutside(contentElement, triggerElement, () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover, setShowPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsEventTarget(element: HTMLElement | null, event: Event) {\n if (!element) {\n return false;\n }\n\n if (element.contains(event.target as Node)) {\n return true;\n }\n\n // For elements inside a Shadow DOM we need to check the composedPath\n if (event.composed && event.composedPath) {\n const contains = event.composedPath().find(target => {\n if (target === window) {\n return false;\n }\n return element.contains(target as Node);\n });\n return contains ? true : false;\n }\n\n return false;\n}\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\nfunction useOnClickOutside(\n ref: React.RefObject<HTMLDivElement>,\n buttonRef: React.RefObject<HTMLButtonElement>,\n handler: () => void,\n) {\n React.useEffect(() => {\n const listener = (event: Event) => {\n if (\n elementContainsEventTarget(ref.current, event) ||\n elementContainsEventTarget(buttonRef.current, event)\n ) {\n return;\n }\n\n handler();\n };\n\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, buttonRef, handler]);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n"],"names":["Tooltip","placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers","name","options","offset","rest","useState","showTooltip","setShowTooltip","hoverTimer","handleOpen","event","persist","setTimeout","onMouseExit","clearTimeout","React","useEffect","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onBlur","onMouseEnter","e","onMouseLeave","Manager","Reference","ref","cloneElement","Popper","modifiers","enabled","style","classNames","role","id","IconButton","onClick","CloseIcon","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","useCustomState","state","setState","internalState","setInternalState","controlled","Popover","controlledState","showPopover","setControlledState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","styles","attributes","forceUpdate","triggerProps","useCallback","buttonProps","buttonOnClick","preventDefault","prev","useOnClickOutside","closeButtonProps","popoverContentProps","contentProps","onKeyDown","key","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","elementContainsElement","focusElementIsTrigger","isValidBlur","contextValue","Provider","value","PopoverTrigger","child","Children","only","PopoverCloseButton","PopoverContent","forwardRef","props","Contrast","popper","elementContainsEventTarget","element","contains","target","composed","composedPath","find","window","parent","buttonRef","handler","listener","document","addEventListener","removeEventListener","warnAboutMissingStyles"],"mappings":"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"}
|
|
1
|
+
{"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: ReturnType<typeof setTimeout>;\n\n const handleOpen: (event: React.MouseEvent) => void = event => {\n event.persist();\n hoverTimer = setTimeout(() => {\n setShowTooltip(true);\n }, 150);\n };\n const onMouseExit: () => void = () => {\n setShowTooltip(false);\n clearTimeout(hoverTimer);\n };\n React.useEffect(() => {\n return () => {\n clearTimeout(hoverTimer);\n };\n });\n\n const tooltipId = useRandomId('eds-tooltip');\n React.useEffect(() => {\n setShowTooltip(isOpen);\n }, [isOpen]);\n\n React.useEffect(() => {\n if (!content) {\n setShowTooltip(false);\n }\n }, [content]);\n\n let popperPlacement = placement as PopperPlacementProps;\n if (placement.includes('-')) {\n if (placement.includes('right')) {\n popperPlacement = placement.replace(\n 'right',\n 'end',\n ) as PopperPlacementProps;\n }\n if (placement.includes('left')) {\n popperPlacement = placement.replace(\n 'left',\n 'start',\n ) as PopperPlacementProps;\n }\n }\n\n const childProps: {\n 'aria-describedby'?: string;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseLeave?: () => void;\n } = {};\n childProps['aria-describedby'] = tooltipId;\n if (!disableFocusListener) {\n childProps.onFocus = () => setShowTooltip(true);\n childProps.onBlur = () => setShowTooltip(false);\n }\n if (!disableHoverListener) {\n childProps.onMouseEnter = e => handleOpen(e);\n childProps.onMouseLeave = () => onMouseExit();\n }\n\n return (\n <Manager>\n <Reference>\n {({ ref }) =>\n cloneElement(children, {\n ref: ref,\n ...childProps,\n })\n }\n </Reference>\n {showTooltip && (\n <Popper\n modifiers={[{ name: 'arrow', enabled: false }, ...popperModifiers]}\n placement={popperPlacement}\n >\n {({ ref, style, placement: popperPlacement }) => (\n <div\n className={classNames(\n 'eds-tooltip',\n className,\n `eds-tooltip--${popperPlacement}`,\n { 'eds-tooltip--error': variant === 'error' },\n )}\n ref={ref}\n style={style}\n role=\"tooltip\"\n id={tooltipId}\n data-placement={popperPlacement}\n {...rest}\n >\n {content}\n {isOpen && showCloseButton && (\n <IconButton\n className=\"eds-tooltip__close-button\"\n onClick={() => setShowTooltip(false)}\n >\n <CloseIcon />\n </IconButton>\n )}\n </div>\n )}\n </Popper>\n )}\n </Manager>\n );\n};\n","import React, { cloneElement, createContext, useContext } from 'react';\n\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\n\nimport { Contrast } from '@entur/layout';\nimport { useOnClickOutside } from '@entur/utils';\n\nimport './Popover.scss';\n\ntype PopoverContentCallbackProps = {\n ref: React.Ref<HTMLDivElement>;\n};\n\ntype PopoverContextProps = {\n showPopover: boolean;\n triggerElement?: React.RefObject<HTMLButtonElement>;\n contentElement: React.RefObject<HTMLDivElement>;\n styles: { [key: string]: React.CSSProperties };\n attributes: { [key: string]: { [key: string]: string } | undefined };\n closeButtonProps: Record<string, unknown>;\n popoverContentProps: (\n e: PopoverContentCallbackProps,\n ) => Record<string, unknown>;\n triggerProps: () => Record<string, unknown>;\n [key: string]: any;\n};\n\nconst PopoverContext = createContext<PopoverContextProps | undefined>(\n undefined,\n);\nconst usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (context == null) {\n throw Error('usePopoverContext must be used within <Popover/>');\n }\n return context;\n};\n\nconst useCustomState = (\n state?: boolean,\n setState?: React.Dispatch<React.SetStateAction<boolean>>,\n): [boolean, React.Dispatch<React.SetStateAction<boolean>>, boolean] => {\n const [internalState, setInternalState] = React.useState<boolean>(false);\n const controlled = state !== undefined && setState !== undefined;\n if (controlled) return [state, setState, controlled];\n return [internalState, setInternalState, controlled];\n};\n\nexport type PopoverProps = {\n /** Innholdet i Popover */\n children: React.ReactNode;\n /** Plasseringen av Popover\n * @default \"bottom-start\"\n */\n placement?: Placement;\n /** Hvis du ønsker å styre state selv kan du sende inn state her */\n showPopover?: boolean;\n /** Hvis du ønsker å styre state selv kan du sende inn setState her */\n setShowPopover?: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n placement = 'bottom-start',\n showPopover: controlledState,\n setShowPopover: setControlledState,\n}) => {\n const [showPopover, setShowPopover, controlled] = useCustomState(\n controlledState,\n setControlledState,\n );\n const triggerElement = React.useRef(null);\n const contentElement = React.useRef(null);\n\n const { styles, attributes, forceUpdate } = usePopper(\n triggerElement.current,\n contentElement.current,\n {\n modifiers: [\n { name: 'arrow', enabled: false },\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n ],\n placement: placement,\n },\n );\n\n React.useEffect(() => {\n if (forceUpdate) {\n forceUpdate();\n }\n }, [showPopover, forceUpdate]);\n\n const triggerProps = React.useCallback(() => {\n const buttonProps = {\n 'aria-haspopup': 'dialog',\n 'aria-expanded': showPopover,\n ref: triggerElement,\n };\n const buttonOnClick = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(prev => !prev);\n },\n };\n return controlled ? buttonProps : { ...buttonProps, ...buttonOnClick };\n }, [triggerElement, showPopover, setShowPopover, controlled]);\n\n useOnClickOutside([contentElement, triggerElement], () =>\n setShowPopover(false),\n );\n const closeButtonProps = {\n onClick: (e: React.MouseEvent) => {\n e.preventDefault();\n setShowPopover(false);\n },\n };\n const popoverContentProps = React.useCallback(() => {\n const contentProps = {\n role: 'dialog',\n 'aria-modal': 'false',\n ref: contentElement,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n showPopover && setShowPopover(false);\n }\n },\n onBlur: (event: React.FocusEvent) => {\n const elementReceivingFocus = event.relatedTarget as HTMLElement;\n // The check for 'tabindex=-1' is a special case for focus handling in Docz\n if (\n !elementReceivingFocus ||\n elementReceivingFocus.getAttribute('tabindex') === '-1'\n )\n return;\n const focusElementIsPopover = elementContainsElement(\n contentElement.current,\n elementReceivingFocus,\n );\n const focusElementIsTrigger = elementContainsElement(\n triggerElement.current,\n elementReceivingFocus,\n );\n const isValidBlur = !focusElementIsPopover && !focusElementIsTrigger;\n if (showPopover && isValidBlur) setShowPopover(false);\n },\n };\n return contentProps;\n }, [contentElement, showPopover, setShowPopover]);\n const contextValue: PopoverContextProps = {\n showPopover,\n triggerElement,\n contentElement,\n styles,\n attributes,\n popoverContentProps,\n closeButtonProps,\n triggerProps,\n };\n return (\n <PopoverContext.Provider value={contextValue}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\nexport type PopoverTriggerProps = {\n /** Knapp som skal brukes for å åpne Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ children }) => {\n const { triggerProps } = usePopoverContext();\n const child = React.Children.only(children) as React.ReactElement<any>;\n return cloneElement(child, triggerProps());\n};\n\nexport type PopoverCloseButtonProps = {\n /** En valgfri knapp som kan legges inn for å lukke Popover */\n children: React.ReactElement;\n};\n\nexport const PopoverCloseButton: React.FC<PopoverCloseButtonProps> = ({\n children,\n ...rest\n}) => {\n const { closeButtonProps } = usePopoverContext();\n return cloneElement(children, { ...closeButtonProps, ...rest });\n};\n\nexport type PopoverContentProps = {\n /**Innholdet til Popover */\n children: React.ReactNode;\n};\n\nexport const PopoverContent = React.forwardRef<\n HTMLDivElement,\n PopoverContentProps\n>(({ children }, ref: React.Ref<HTMLDivElement>) => {\n const { showPopover, attributes, styles, popoverContentProps } =\n usePopoverContext();\n const props = popoverContentProps({ ref });\n return (\n <Contrast\n className={classNames(\n 'eds-popover',\n {\n 'eds-popover--hidden': !showPopover,\n },\n 'eds-contrast',\n )}\n style={styles.popper}\n aria-hidden={!showPopover}\n {...attributes.styles}\n {...props}\n >\n {children}\n </Contrast>\n );\n});\n\nfunction elementContainsElement(\n parent: HTMLElement | null,\n child: HTMLElement,\n) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tooltip');\n\nexport * from './Tooltip';\nexport * from './Popover';\n"],"names":["Tooltip","placement","content","children","className","isOpen","disableHoverListener","disableFocusListener","showCloseButton","variant","popperModifiers","name","options","offset","rest","useState","showTooltip","setShowTooltip","hoverTimer","handleOpen","event","persist","setTimeout","onMouseExit","clearTimeout","React","useEffect","tooltipId","useRandomId","popperPlacement","includes","replace","childProps","onFocus","onBlur","onMouseEnter","e","onMouseLeave","Manager","Reference","ref","cloneElement","Popper","modifiers","enabled","style","classNames","role","id","IconButton","onClick","CloseIcon","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","useCustomState","state","setState","internalState","setInternalState","controlled","Popover","controlledState","showPopover","setControlledState","setShowPopover","triggerElement","useRef","contentElement","usePopper","current","styles","attributes","forceUpdate","triggerProps","useCallback","buttonProps","buttonOnClick","preventDefault","prev","useOnClickOutside","closeButtonProps","popoverContentProps","contentProps","onKeyDown","key","elementReceivingFocus","relatedTarget","getAttribute","focusElementIsPopover","elementContainsElement","focusElementIsTrigger","isValidBlur","contextValue","Provider","value","PopoverTrigger","child","Children","only","PopoverCloseButton","PopoverContent","forwardRef","props","Contrast","popper","parent","contains","warnAboutMissingStyles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/tooltip",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.1",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/tooltip.esm.js",
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/button": "^2.10.
|
|
31
|
-
"@entur/icons": "^5.4.
|
|
32
|
-
"@entur/layout": "^2.1.
|
|
30
|
+
"@entur/button": "^2.10.9",
|
|
31
|
+
"@entur/icons": "^5.4.2",
|
|
32
|
+
"@entur/layout": "^2.1.16",
|
|
33
33
|
"@entur/tokens": "^3.4.4",
|
|
34
|
-
"@entur/utils": "^0.
|
|
34
|
+
"@entur/utils": "^0.5.0",
|
|
35
35
|
"@popperjs/core": "^2.10.1",
|
|
36
36
|
"react-popper": "^2.2.5"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "36772ae4f2d8375622acff19736c07d15435cb95"
|
|
39
39
|
}
|