@chayns-components/core 5.0.0-beta.974 → 5.0.0-beta.975
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/lib/cjs/components/popup/Popup.js +11 -5
- package/lib/cjs/components/popup/Popup.js.map +1 -1
- package/lib/cjs/components/tooltip/Tooltip.js +5 -1
- package/lib/cjs/components/tooltip/Tooltip.js.map +1 -1
- package/lib/esm/components/popup/Popup.js +11 -5
- package/lib/esm/components/popup/Popup.js.map +1 -1
- package/lib/esm/components/tooltip/Tooltip.js +5 -1
- package/lib/esm/components/tooltip/Tooltip.js.map +1 -1
- package/lib/types/components/popup/Popup.d.ts +4 -0
- package/lib/types/components/tooltip/Tooltip.d.ts +8 -0
- package/package.json +2 -2
|
@@ -22,6 +22,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
22
22
|
container,
|
|
23
23
|
onHide,
|
|
24
24
|
children,
|
|
25
|
+
shouldHideOnChildrenLeave,
|
|
25
26
|
shouldShowOnHover = false,
|
|
26
27
|
shouldUseChildrenWidth = true,
|
|
27
28
|
yOffset = 0
|
|
@@ -97,6 +98,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
97
98
|
top: childrenTop,
|
|
98
99
|
width: childrenWidth
|
|
99
100
|
} = popupRef.current.getBoundingClientRect();
|
|
101
|
+
const containerRect = newContainer === null || newContainer === void 0 ? void 0 : newContainer.getBoundingClientRect();
|
|
100
102
|
if (pseudoHeight > childrenTop - 25) {
|
|
101
103
|
let isRight = false;
|
|
102
104
|
if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
|
|
@@ -105,8 +107,8 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
105
107
|
} else {
|
|
106
108
|
setAlignment(_popup.PopupAlignment.BottomLeft);
|
|
107
109
|
}
|
|
108
|
-
const x = childrenLeft + childrenWidth / 2;
|
|
109
|
-
const y = childrenTop + childrenHeight + yOffset;
|
|
110
|
+
const x = childrenLeft - ((containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) ?? 0) + childrenWidth / 2;
|
|
111
|
+
const y = childrenTop - ((containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) ?? 0) + childrenHeight + yOffset;
|
|
110
112
|
let newOffset;
|
|
111
113
|
if (isRight) {
|
|
112
114
|
newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
|
|
@@ -129,8 +131,8 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
129
131
|
} else {
|
|
130
132
|
setAlignment(_popup.PopupAlignment.TopLeft);
|
|
131
133
|
}
|
|
132
|
-
const x = childrenLeft + childrenWidth / 2;
|
|
133
|
-
const y = childrenTop - yOffset;
|
|
134
|
+
const x = childrenLeft - ((containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) ?? 0) + childrenWidth / 2;
|
|
135
|
+
const y = childrenTop - ((containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) ?? 0) - yOffset;
|
|
134
136
|
let newOffset;
|
|
135
137
|
if (isRight) {
|
|
136
138
|
newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
|
|
@@ -165,10 +167,14 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
165
167
|
if (!shouldShowOnHover) {
|
|
166
168
|
return;
|
|
167
169
|
}
|
|
170
|
+
if (shouldHideOnChildrenLeave) {
|
|
171
|
+
handleHide();
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
168
174
|
timeout.current = window.setTimeout(() => {
|
|
169
175
|
handleHide();
|
|
170
176
|
}, 500);
|
|
171
|
-
}, [handleHide, shouldShowOnHover]);
|
|
177
|
+
}, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);
|
|
172
178
|
const handleDocumentClick = (0, _react.useCallback)(event => {
|
|
173
179
|
var _popupContentRef$curr;
|
|
174
180
|
if (!((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(event.target))) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","container","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","useEffect","current","el","element","closest","Element","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","getWindowMetrics","then","result","topBarHeight","document","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","$shouldUseChildrenWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container,\n onHide,\n children,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element =\n el.closest('.dialog-inner') ||\n el.closest('.page-provider') ||\n el.closest('.tapp') ||\n el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if(container instanceof Element){\n setNewContainer(container)\n }\n }, [container]);\n\n const measureHeight = () => {\n if (popupPseudoContentRef.current) {\n const height = popupPseudoContentRef.current.offsetHeight;\n const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n setPseudoSize({ height, width });\n }\n };\n\n useEffect(() => {\n measureHeight();\n\n setIsMeasuring(false);\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMeasuring(true);\n\n setTimeout(() => {\n measureHeight();\n setIsMeasuring(false);\n }, 0);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n ]);\n\n return (\n <>\n {isMeasuring && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","useEffect","current","el","element","closest","Element","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","containerRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","getWindowMetrics","then","result","topBarHeight","document","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","$shouldUseChildrenWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element =\n el.closest('.dialog-inner') ||\n el.closest('.page-provider') ||\n el.closest('.tapp') ||\n el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const measureHeight = () => {\n if (popupPseudoContentRef.current) {\n const height = popupPseudoContentRef.current.offsetHeight;\n const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n setPseudoSize({ height, width });\n }\n };\n\n useEffect(() => {\n measureHeight();\n\n setIsMeasuring(false);\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMeasuring(true);\n\n setTimeout(() => {\n measureHeight();\n setIsMeasuring(false);\n }, 0);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const containerRect = newContainer?.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;\n const y = childrenTop - (containerRect?.top ?? 0) + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;\n const y = childrenTop - (containerRect?.top ?? 0) - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n ]);\n\n return (\n <>\n {isMeasuring && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,6 +17,8 @@ const Tooltip = ({
|
|
|
17
17
|
children,
|
|
18
18
|
container,
|
|
19
19
|
isDisabled,
|
|
20
|
+
shouldHideOnChildrenLeave,
|
|
21
|
+
yOffset,
|
|
20
22
|
itemWidth,
|
|
21
23
|
shouldUseChildrenWidth = true
|
|
22
24
|
}) => {
|
|
@@ -38,14 +40,16 @@ const Tooltip = ({
|
|
|
38
40
|
$shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
39
41
|
}, children) : /*#__PURE__*/_react.default.createElement(_Popup.default, {
|
|
40
42
|
shouldShowOnHover: true,
|
|
43
|
+
shouldHideOnChildrenLeave: shouldHideOnChildrenLeave,
|
|
41
44
|
content: content,
|
|
42
45
|
ref: tooltipRef,
|
|
43
46
|
container: container,
|
|
47
|
+
yOffset: yOffset,
|
|
44
48
|
shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
45
49
|
}, /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
|
|
46
50
|
$isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
|
|
47
51
|
$shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
48
|
-
}, children))), [isDisabled, children, shouldUseChildrenWidth, content, container]);
|
|
52
|
+
}, children))), [isDisabled, children, shouldUseChildrenWidth, shouldHideOnChildrenLeave, content, container, yOffset]);
|
|
49
53
|
};
|
|
50
54
|
Tooltip.displayName = 'Tooltip';
|
|
51
55
|
var _default = exports.default = Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n content={content}\n ref={tooltipRef}\n container={container}\n shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [isDisabled
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","shouldHideOnChildrenLeave","yOffset","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the tooltip to the children.\n */\n yOffset?: number;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n shouldHideOnChildrenLeave,\n yOffset,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n shouldHideOnChildrenLeave={shouldHideOnChildrenLeave}\n content={content}\n ref={tooltipRef}\n container={container}\n yOffset={yOffset}\n shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [\n isDisabled,\n children,\n shouldUseChildrenWidth,\n shouldHideOnChildrenLeave,\n content,\n container,\n yOffset,\n ],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -14,6 +14,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
14
14
|
container,
|
|
15
15
|
onHide,
|
|
16
16
|
children,
|
|
17
|
+
shouldHideOnChildrenLeave,
|
|
17
18
|
shouldShowOnHover = false,
|
|
18
19
|
shouldUseChildrenWidth = true,
|
|
19
20
|
yOffset = 0
|
|
@@ -89,6 +90,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
89
90
|
top: childrenTop,
|
|
90
91
|
width: childrenWidth
|
|
91
92
|
} = popupRef.current.getBoundingClientRect();
|
|
93
|
+
const containerRect = newContainer?.getBoundingClientRect();
|
|
92
94
|
if (pseudoHeight > childrenTop - 25) {
|
|
93
95
|
let isRight = false;
|
|
94
96
|
if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
|
|
@@ -97,8 +99,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
97
99
|
} else {
|
|
98
100
|
setAlignment(PopupAlignment.BottomLeft);
|
|
99
101
|
}
|
|
100
|
-
const x = childrenLeft + childrenWidth / 2;
|
|
101
|
-
const y = childrenTop + childrenHeight + yOffset;
|
|
102
|
+
const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;
|
|
103
|
+
const y = childrenTop - (containerRect?.top ?? 0) + childrenHeight + yOffset;
|
|
102
104
|
let newOffset;
|
|
103
105
|
if (isRight) {
|
|
104
106
|
newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
|
|
@@ -121,8 +123,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
121
123
|
} else {
|
|
122
124
|
setAlignment(PopupAlignment.TopLeft);
|
|
123
125
|
}
|
|
124
|
-
const x = childrenLeft + childrenWidth / 2;
|
|
125
|
-
const y = childrenTop - yOffset;
|
|
126
|
+
const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;
|
|
127
|
+
const y = childrenTop - (containerRect?.top ?? 0) - yOffset;
|
|
126
128
|
let newOffset;
|
|
127
129
|
if (isRight) {
|
|
128
130
|
newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
|
|
@@ -157,10 +159,14 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
157
159
|
if (!shouldShowOnHover) {
|
|
158
160
|
return;
|
|
159
161
|
}
|
|
162
|
+
if (shouldHideOnChildrenLeave) {
|
|
163
|
+
handleHide();
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
160
166
|
timeout.current = window.setTimeout(() => {
|
|
161
167
|
handleHide();
|
|
162
168
|
}, 500);
|
|
163
|
-
}, [handleHide, shouldShowOnHover]);
|
|
169
|
+
}, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);
|
|
164
170
|
const handleDocumentClick = useCallback(event => {
|
|
165
171
|
if (!popupContentRef.current?.contains(event.target)) {
|
|
166
172
|
handleHide();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","el","element","closest","Element","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","document","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container,\n onHide,\n children,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element =\n el.closest('.dialog-inner') ||\n el.closest('.page-provider') ||\n el.closest('.tapp') ||\n el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if(container instanceof Element){\n setNewContainer(container)\n }\n }, [container]);\n\n const measureHeight = () => {\n if (popupPseudoContentRef.current) {\n const height = popupPseudoContentRef.current.offsetHeight;\n const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n setPseudoSize({ height, width });\n }\n };\n\n useEffect(() => {\n measureHeight();\n\n setIsMeasuring(false);\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMeasuring(true);\n\n setTimeout(() => {\n measureHeight();\n setIsMeasuring(false);\n }, 0);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft + childrenWidth / 2;\n const y = childrenTop - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n ]);\n\n return (\n <>\n {isMeasuring && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","el","element","closest","Element","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","containerRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","document","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element =\n el.closest('.dialog-inner') ||\n el.closest('.page-provider') ||\n el.closest('.tapp') ||\n el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const measureHeight = () => {\n if (popupPseudoContentRef.current) {\n const height = popupPseudoContentRef.current.offsetHeight;\n const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n setPseudoSize({ height, width });\n }\n };\n\n useEffect(() => {\n measureHeight();\n\n setIsMeasuring(false);\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMeasuring(true);\n\n setTimeout(() => {\n measureHeight();\n setIsMeasuring(false);\n }, 0);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const containerRect = newContainer?.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;\n const y = childrenTop - (containerRect?.top ?? 0) + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;\n const y = childrenTop - (containerRect?.top ?? 0) - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n ]);\n\n return (\n <>\n {isMeasuring && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,6 +9,8 @@ const Tooltip = _ref => {
|
|
|
9
9
|
children,
|
|
10
10
|
container,
|
|
11
11
|
isDisabled,
|
|
12
|
+
shouldHideOnChildrenLeave,
|
|
13
|
+
yOffset,
|
|
12
14
|
itemWidth,
|
|
13
15
|
shouldUseChildrenWidth = true
|
|
14
16
|
} = _ref;
|
|
@@ -30,14 +32,16 @@ const Tooltip = _ref => {
|
|
|
30
32
|
$shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
31
33
|
}, children) : /*#__PURE__*/React.createElement(Popup, {
|
|
32
34
|
shouldShowOnHover: true,
|
|
35
|
+
shouldHideOnChildrenLeave: shouldHideOnChildrenLeave,
|
|
33
36
|
content: content,
|
|
34
37
|
ref: tooltipRef,
|
|
35
38
|
container: container,
|
|
39
|
+
yOffset: yOffset,
|
|
36
40
|
shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
37
41
|
}, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
|
|
38
42
|
$isOnlyText: isTextOnlyElement(children),
|
|
39
43
|
$shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
40
|
-
}, children))), [isDisabled, children, shouldUseChildrenWidth, content, container]);
|
|
44
|
+
}, children))), [isDisabled, children, shouldUseChildrenWidth, shouldHideOnChildrenLeave, content, container, yOffset]);
|
|
41
45
|
};
|
|
42
46
|
Tooltip.displayName = 'Tooltip';
|
|
43
47
|
export default Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n content={content}\n ref={tooltipRef}\n container={container}\n shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [isDisabled
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","shouldHideOnChildrenLeave","yOffset","itemWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * The Y offset of the tooltip to the children.\n */\n yOffset?: number;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n shouldHideOnChildrenLeave,\n yOffset,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n shouldHideOnChildrenLeave={shouldHideOnChildrenLeave}\n content={content}\n ref={tooltipRef}\n container={container}\n yOffset={yOffset}\n shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [\n isDisabled,\n children,\n shouldUseChildrenWidth,\n shouldHideOnChildrenLeave,\n content,\n container,\n yOffset,\n ],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AAqCvE,MAAMC,OAAyB,GAAGC,IAAA,IAS5B;EAAA,IAT6B;IAC/BC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,yBAAyB;IACzBC,OAAO;IACPC,SAAS;IACTC,sBAAsB,GAAG;EAC7B,CAAC,GAAAR,IAAA;EACG,MAAMS,UAAU,GAAGhB,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMiB,OAAO,GAAGlB,OAAO,CAAC,MAAM;IAC1B,iBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAqB,aAAA,CAACf,WAAW;MACRgB,KAAK,EAAEL,SAAU;MACjBM,IAAI,EAAGZ,IAAI,CAAkBY,IAAK;MAClCC,QAAQ,EAAGb,IAAI,CAAkBa,QAAS;MAC1CC,QAAQ,EAAGd,IAAI,CAAkBc,QAAS;MAC1CC,MAAM,EAAGf,IAAI,CAAkBe;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAACf,IAAI,EAAEM,SAAS,CAAC,CAAC;EAErB,OAAOf,OAAO,CACV,mBACIF,KAAA,CAAAqB,aAAA,CAACd,aAAa,QACTO,UAAU,gBACPd,KAAA,CAAAqB,aAAA,CAACb,qBAAqB;IAClBmB,WAAW,EAAEvB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCgB,uBAAuB,EAAEV;EAAuB,GAE/CN,QACkB,CAAC,gBAExBZ,KAAA,CAAAqB,aAAA,CAAChB,KAAK;IACFwB,iBAAiB;IACjBd,yBAAyB,EAAEA,yBAA0B;IACrDK,OAAO,EAAEA,OAAQ;IACjBU,GAAG,EAAEX,UAAW;IAChBN,SAAS,EAAEA,SAAU;IACrBG,OAAO,EAAEA,OAAQ;IACjBE,sBAAsB,EAAEA;EAAuB,gBAE/ClB,KAAA,CAAAqB,aAAA,CAACb,qBAAqB;IAClBmB,WAAW,EAAEvB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCgB,uBAAuB,EAAEV;EAAuB,GAE/CN,QACkB,CACpB,CAEA,CAClB,EACD,CACIE,UAAU,EACVF,QAAQ,EACRM,sBAAsB,EACtBH,yBAAyB,EACzBK,OAAO,EACPP,SAAS,EACTG,OAAO,CAEf,CAAC;AACL,CAAC;AAEDP,OAAO,CAACsB,WAAW,GAAG,SAAS;AAE/B,eAAetB,OAAO","ignoreList":[]}
|
|
@@ -21,6 +21,10 @@ export type PopupProps = {
|
|
|
21
21
|
* Function to be executed when the content of the Context menu has been shown.
|
|
22
22
|
*/
|
|
23
23
|
onShow?: VoidFunction;
|
|
24
|
+
/**
|
|
25
|
+
* Whether the tooltip should be hidden after the children is not hovered.
|
|
26
|
+
*/
|
|
27
|
+
shouldHideOnChildrenLeave?: boolean;
|
|
24
28
|
/**
|
|
25
29
|
* Whether the popup should be opened on hover. If not, the popup will be opened on click.
|
|
26
30
|
*/
|
|
@@ -21,10 +21,18 @@ export type TooltipProps = {
|
|
|
21
21
|
* whether the tooltip should be shown.
|
|
22
22
|
*/
|
|
23
23
|
isDisabled?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Whether the tooltip should be hidden after the children is not hovered.
|
|
26
|
+
*/
|
|
27
|
+
shouldHideOnChildrenLeave?: boolean;
|
|
24
28
|
/**
|
|
25
29
|
* Whether the width of the children should be used.
|
|
26
30
|
*/
|
|
27
31
|
shouldUseChildrenWidth?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* The Y offset of the tooltip to the children.
|
|
34
|
+
*/
|
|
35
|
+
yOffset?: number;
|
|
28
36
|
};
|
|
29
37
|
declare const Tooltip: FC<TooltipProps>;
|
|
30
38
|
export default Tooltip;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.975",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "8c8b51baf1cac9a865beb89cb920232523b932e3"
|
|
91
91
|
}
|