@chayns-components/core 5.0.0-beta.1226 → 5.0.0-beta.1228

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.
Files changed (9) hide show
  1. package/lib/cjs/components/popup/Popup.js +13 -11
  2. package/lib/cjs/components/popup/Popup.js.map +1 -1
  3. package/lib/cjs/hooks/element.js +1 -1
  4. package/lib/cjs/hooks/element.js.map +1 -1
  5. package/lib/esm/components/popup/Popup.js +13 -11
  6. package/lib/esm/components/popup/Popup.js.map +1 -1
  7. package/lib/esm/hooks/element.js +1 -1
  8. package/lib/esm/hooks/element.js.map +1 -1
  9. package/package.json +2 -2
package/lib/cjs/components/popup/Popup.js CHANGED
@@ -25,7 +25,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
25
25
  shouldHideOnChildrenLeave,
26
26
  shouldShowOnHover = false,
27
27
  shouldUseChildrenWidth = true,
28
- shouldScrollWithContent = false,
28
+ shouldScrollWithContent = true,
29
29
  shouldUseFullWidth = false,
30
30
  yOffset = 0
31
31
  }, ref) => {
@@ -84,14 +84,15 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
84
84
  top: childrenTop,
85
85
  width: childrenWidth
86
86
  } = popupRef.current.getBoundingClientRect();
87
+ const element = shouldScrollWithContent ? newContainer : document.body;
87
88
  const {
88
89
  height: containerHeight,
89
90
  width: containerWidth,
90
91
  top,
91
92
  left
92
- } = newContainer.getBoundingClientRect();
93
- const zoomX = containerWidth / newContainer.offsetWidth;
94
- const zoomY = containerHeight / newContainer.offsetHeight;
93
+ } = element.getBoundingClientRect();
94
+ const zoomX = containerWidth / element.offsetWidth;
95
+ const zoomY = containerHeight / element.offsetHeight;
95
96
  if (pseudoHeight > childrenTop - 25 || alignment === _popup.PopupAlignment.BottomLeft || alignment === _popup.PopupAlignment.BottomRight) {
96
97
  let isRight = false;
97
98
  if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25 || alignment === _popup.PopupAlignment.BottomRight) {
@@ -100,8 +101,8 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
100
101
  } else {
101
102
  setInternalAlignment(_popup.PopupAlignment.BottomLeft);
102
103
  }
103
- const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;
104
- const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop - yOffset;
104
+ const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;
105
+ const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
105
106
  let newOffset;
106
107
  if (isRight) {
107
108
  newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
@@ -124,8 +125,8 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
124
125
  } else {
125
126
  setInternalAlignment(_popup.PopupAlignment.TopLeft);
126
127
  }
127
- const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;
128
- const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop - yOffset;
128
+ const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;
129
+ const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
129
130
  let newOffset;
130
131
  if (isRight) {
131
132
  newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
@@ -143,14 +144,15 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
143
144
  }
144
145
  setIsOpen(true);
145
146
  }
146
- }, [alignment, newContainer, pseudoSize, yOffset]);
147
+ }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);
147
148
  (0, _react2.useEffect)(() => {
148
- if (!newContainer) return;
149
+ if (!newContainer || !popupRef.current) return;
149
150
  const viewHeight = newContainer.clientHeight;
151
+ const childrenHeight = popupRef.current.getBoundingClientRect().height;
150
152
  if ([_popup.PopupAlignment.TopLeft, _popup.PopupAlignment.TopRight, _popup.PopupAlignment.TopCenter].includes(internalAlignment)) {
151
153
  setContentMaxHeight(coordinates.y - 20);
152
154
  } else {
153
- setContentMaxHeight(viewHeight - coordinates.y - 20);
155
+ setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);
154
156
  }
155
157
  }, [coordinates.y, internalAlignment, newContainer]);
156
158
  const handleChildrenClick = () => {
package/lib/cjs/components/popup/Popup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.js","names":["_react","require","_react2","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Popup","forwardRef","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","internalAlignment","setInternalAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","useRef","uuid","useUuid","height","width","measuredElement","useMeasuredClone","popupContentRef","popupRef","useEffect","current","el","element","closest","Element","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","document","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopup","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\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 } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\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 scroll with the content.\n */\n shouldScrollWithContent?: 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 * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: 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 alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = false,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n const { height, width, measuredElement } = useMeasuredClone({ content });\n\n const popupContentRef = 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 = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n setPseudoSize({ height, width });\n }, [height, width]);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\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 {\n height: containerHeight,\n width: containerWidth,\n top,\n left,\n } = newContainer.getBoundingClientRect();\n\n const zoomX = containerWidth / (newContainer as HTMLElement).offsetWidth;\n const zoomY = containerHeight / (newContainer as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n 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,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n 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,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, yOffset]);\n\n useEffect(() => {\n if (!newContainer) return;\n\n const viewHeight = newContainer.clientHeight;\n\n if (\n [\n PopupAlignment.TopLeft,\n PopupAlignment.TopRight,\n PopupAlignment.TopCenter,\n ].includes(internalAlignment)\n ) {\n setContentMaxHeight(coordinates.y - 20);\n } else {\n setContentMaxHeight(viewHeight - coordinates.y - 20);\n }\n }, [coordinates.y, internalAlignment, newContainer]);\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 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 shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n maxHeight={contentMaxHeight}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n contentMaxHeight,\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {measuredElement}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\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":["_react","require","_react2","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Popup","forwardRef","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","internalAlignment","setInternalAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","useRef","uuid","useUuid","height","width","measuredElement","useMeasuredClone","popupContentRef","popupRef","useEffect","current","el","element","closest","Element","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","document","body","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopup","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\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 } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\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 scroll with the content.\n */\n shouldScrollWithContent?: 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 * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: 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 alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = true,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n const { height, width, measuredElement } = useMeasuredClone({ content });\n\n const popupContentRef = 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 = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n setPseudoSize({ height, width });\n }, [height, width]);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\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 element = shouldScrollWithContent ? newContainer : document.body;\n\n const {\n height: containerHeight,\n width: containerWidth,\n top,\n left,\n } = element.getBoundingClientRect();\n\n const zoomX = containerWidth / (element as HTMLElement).offsetWidth;\n const zoomY = containerHeight / (element as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n 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,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n 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,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);\n\n useEffect(() => {\n if (!newContainer || !popupRef.current) return;\n\n const viewHeight = newContainer.clientHeight;\n const childrenHeight = popupRef.current.getBoundingClientRect().height;\n\n if (\n [\n PopupAlignment.TopLeft,\n PopupAlignment.TopRight,\n PopupAlignment.TopCenter,\n ].includes(internalAlignment)\n ) {\n setContentMaxHeight(coordinates.y - 20);\n } else {\n setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);\n }\n }, [coordinates.y, internalAlignment, newContainer]);\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 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 shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n maxHeight={contentMaxHeight}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n contentMaxHeight,\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {measuredElement}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\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":[]}
package/lib/cjs/hooks/element.js CHANGED
@@ -69,7 +69,7 @@ const useMeasuredClone = ({
69
69
  offsetHeight: height
70
70
  } = ref.current;
71
71
  setSize({
72
- width,
72
+ width: width + 6,
73
73
  height
74
74
  });
75
75
  };
package/lib/cjs/hooks/element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"element.js","names":["_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useElementSize","ref","shouldUseChildElement","size","setSize","useState","useEffect","_ref$current","target","current","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","exports","getClonedElement","content","preventEvents","onClick","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","isValidElement","cloneElement","createElement","useMeasuredClone","useRef","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute","parentElement"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly | undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n const target = (\n shouldUseChildElement ? ref.current?.firstElementChild : ref.current\n ) as HTMLElement | null;\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({ content }: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n setSize({ width, height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, []);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T | null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement | null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"element.js","names":["_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useElementSize","ref","shouldUseChildElement","size","setSize","useState","useEffect","_ref$current","target","current","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","exports","getClonedElement","content","preventEvents","onClick","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","isValidElement","cloneElement","createElement","useMeasuredClone","useRef","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute","parentElement"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly | undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n const target = (\n shouldUseChildElement ? ref.current?.firstElementChild : ref.current\n ) as HTMLElement | null;\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({ content }: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n setSize({ width: width + 6, height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, []);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T | null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement | null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/popup/Popup.js CHANGED
@@ -17,7 +17,7 @@ const Popup = /*#__PURE__*/forwardRef(({
17
17
  shouldHideOnChildrenLeave,
18
18
  shouldShowOnHover = false,
19
19
  shouldUseChildrenWidth = true,
20
- shouldScrollWithContent = false,
20
+ shouldScrollWithContent = true,
21
21
  shouldUseFullWidth = false,
22
22
  yOffset = 0
23
23
  }, ref) => {
@@ -76,14 +76,15 @@ const Popup = /*#__PURE__*/forwardRef(({
76
76
  top: childrenTop,
77
77
  width: childrenWidth
78
78
  } = popupRef.current.getBoundingClientRect();
79
+ const element = shouldScrollWithContent ? newContainer : document.body;
79
80
  const {
80
81
  height: containerHeight,
81
82
  width: containerWidth,
82
83
  top,
83
84
  left
84
- } = newContainer.getBoundingClientRect();
85
- const zoomX = containerWidth / newContainer.offsetWidth;
86
- const zoomY = containerHeight / newContainer.offsetHeight;
85
+ } = element.getBoundingClientRect();
86
+ const zoomX = containerWidth / element.offsetWidth;
87
+ const zoomY = containerHeight / element.offsetHeight;
87
88
  if (pseudoHeight > childrenTop - 25 || alignment === PopupAlignment.BottomLeft || alignment === PopupAlignment.BottomRight) {
88
89
  let isRight = false;
89
90
  if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25 || alignment === PopupAlignment.BottomRight) {
@@ -92,8 +93,8 @@ const Popup = /*#__PURE__*/forwardRef(({
92
93
  } else {
93
94
  setInternalAlignment(PopupAlignment.BottomLeft);
94
95
  }
95
- const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;
96
- const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop - yOffset;
96
+ const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;
97
+ const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
97
98
  let newOffset;
98
99
  if (isRight) {
99
100
  newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
@@ -116,8 +117,8 @@ const Popup = /*#__PURE__*/forwardRef(({
116
117
  } else {
117
118
  setInternalAlignment(PopupAlignment.TopLeft);
118
119
  }
119
- const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;
120
- const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop - yOffset;
120
+ const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;
121
+ const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
121
122
  let newOffset;
122
123
  if (isRight) {
123
124
  newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
@@ -135,14 +136,15 @@ const Popup = /*#__PURE__*/forwardRef(({
135
136
  }
136
137
  setIsOpen(true);
137
138
  }
138
- }, [alignment, newContainer, pseudoSize, yOffset]);
139
+ }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);
139
140
  useEffect(() => {
140
- if (!newContainer) return;
141
+ if (!newContainer || !popupRef.current) return;
141
142
  const viewHeight = newContainer.clientHeight;
143
+ const childrenHeight = popupRef.current.getBoundingClientRect().height;
142
144
  if ([PopupAlignment.TopLeft, PopupAlignment.TopRight, PopupAlignment.TopCenter].includes(internalAlignment)) {
143
145
  setContentMaxHeight(coordinates.y - 20);
144
146
  } else {
145
- setContentMaxHeight(viewHeight - coordinates.y - 20);
147
+ setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);
146
148
  }
147
149
  }, [coordinates.y, internalAlignment, newContainer]);
148
150
  const handleChildrenClick = () => {
package/lib/esm/components/popup/Popup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","useMeasuredClone","Popup","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","uuid","height","width","measuredElement","popupContentRef","popupRef","current","el","element","closest","Element","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","hide","show","document","addEventListener","removeEventListener","createElement","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\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 } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\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 scroll with the content.\n */\n shouldScrollWithContent?: 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 * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: 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 alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = false,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n const { height, width, measuredElement } = useMeasuredClone({ content });\n\n const popupContentRef = 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 = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n setPseudoSize({ height, width });\n }, [height, width]);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\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 {\n height: containerHeight,\n width: containerWidth,\n top,\n left,\n } = newContainer.getBoundingClientRect();\n\n const zoomX = containerWidth / (newContainer as HTMLElement).offsetWidth;\n const zoomY = containerHeight / (newContainer as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n 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,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n 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,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, yOffset]);\n\n useEffect(() => {\n if (!newContainer) return;\n\n const viewHeight = newContainer.clientHeight;\n\n if (\n [\n PopupAlignment.TopLeft,\n PopupAlignment.TopRight,\n PopupAlignment.TopCenter,\n ].includes(internalAlignment)\n ) {\n setContentMaxHeight(coordinates.y - 20);\n } else {\n setContentMaxHeight(viewHeight - coordinates.y - 20);\n }\n }, [coordinates.y, internalAlignment, newContainer]);\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 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 shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n maxHeight={contentMaxHeight}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n contentMaxHeight,\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {measuredElement}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\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":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","useMeasuredClone","Popup","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","uuid","height","width","measuredElement","popupContentRef","popupRef","current","el","element","closest","Element","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","document","body","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","hide","show","addEventListener","removeEventListener","createElement","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\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 } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\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 scroll with the content.\n */\n shouldScrollWithContent?: 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 * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: 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 alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = true,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n const { height, width, measuredElement } = useMeasuredClone({ content });\n\n const popupContentRef = 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 = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n setPseudoSize({ height, width });\n }, [height, width]);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\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 element = shouldScrollWithContent ? newContainer : document.body;\n\n const {\n height: containerHeight,\n width: containerWidth,\n top,\n left,\n } = element.getBoundingClientRect();\n\n const zoomX = containerWidth / (element as HTMLElement).offsetWidth;\n const zoomY = containerHeight / (element as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n 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,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n element.scrollTop -\n 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,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);\n\n useEffect(() => {\n if (!newContainer || !popupRef.current) return;\n\n const viewHeight = newContainer.clientHeight;\n const childrenHeight = popupRef.current.getBoundingClientRect().height;\n\n if (\n [\n PopupAlignment.TopLeft,\n PopupAlignment.TopRight,\n PopupAlignment.TopCenter,\n ].includes(internalAlignment)\n ) {\n setContentMaxHeight(coordinates.y - 20);\n } else {\n setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);\n }\n }, [coordinates.y, internalAlignment, newContainer]);\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 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 shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n maxHeight={contentMaxHeight}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n contentMaxHeight,\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {measuredElement}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IACRC,UAAU,EAGVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,cAAc,QAAoC,mBAAmB;AAC9E,OAAOC,mBAAmB,MAAM,sCAAsC;AACtE,OAAOC,mBAAmB,MAAM,6CAA6C;AAC7E,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,gBAAgB,QAAQ,qBAAqB;AAqDtD,MAAMC,KAAK,gBAAGb,UAAU,CACpB,CACI;EACIc,SAAS;EACTC,OAAO;EACPC,MAAM;EACNC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,yBAAyB;EACzBC,iBAAiB,GAAG,KAAK;EACzBC,sBAAsB,GAAG,IAAI;EAC7BC,uBAAuB,GAAG,IAAI;EAC9BC,kBAAkB,GAAG,KAAK;EAC1BC,OAAO,GAAG;AACd,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGvB,QAAQ,CAAmB;IAC7DwB,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG3B,QAAQ,CACtDG,cAAc,CAACyB,OACnB,CAAC;EACD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG9B,QAAQ,CAAS,CAAC,CAAC;EAC/C,MAAM,CAAC+B,MAAM,EAAEC,SAAS,CAAC,GAAGhC,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAACiC,MAAM,EAAEC,SAAS,CAAC,GAAGlC,QAAQ,CAAc,CAAC;EACnD,MAAM,CAACmC,UAAU,EAAEC,aAAa,CAAC,GAAGpC,QAAQ,CAAoC,CAAC;EACjF,MAAM,CAACqC,YAAY,EAAEC,eAAe,CAAC,GAAGtC,QAAQ,CAAiBY,SAAS,IAAI,IAAI,CAAC;EACnF,MAAM,CAAC2B,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGxC,QAAQ,CAAqByC,SAAS,CAAC;EAEvF,MAAMC,OAAO,GAAG3C,MAAM,CAAS,CAAC;EAEhC,MAAM4C,IAAI,GAAGzC,OAAO,CAAC,CAAC;EAEtB,MAAM;IAAE0C,MAAM;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAGvC,gBAAgB,CAAC;IAAEG;EAAQ,CAAC,CAAC;EAExE,MAAMqC,eAAe,GAAGhD,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAMiD,QAAQ,GAAGjD,MAAM,CAAiB,IAAI,CAAC;EAE7CF,SAAS,CAAC,MAAM;IACZ,IAAImD,QAAQ,CAACC,OAAO,IAAI,CAACrC,SAAS,EAAE;MAChC,MAAMsC,EAAE,GAAGF,QAAQ,CAACC,OAAsB;MAE1C,MAAME,OAAO,GAAGD,EAAE,CAACE,OAAO,CAAC,4CAA4C,CAAC;MAExEd,eAAe,CAACa,OAAO,CAAC;IAC5B;EACJ,CAAC,EAAE,CAACvC,SAAS,CAAC,CAAC;EAEff,SAAS,CAAC,MAAM;IACZ,IAAIe,SAAS,YAAYyC,OAAO,EAAE;MAC9Bf,eAAe,CAAC1B,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEff,SAAS,CAAC,MAAM;IACZuC,aAAa,CAAC;MAAEQ,MAAM;MAAEC;IAAM,CAAC,CAAC;EACpC,CAAC,EAAE,CAACD,MAAM,EAAEC,KAAK,CAAC,CAAC;EAEnB,MAAMS,UAAU,GAAG1D,WAAW,CAAC,MAAM;IACjC,IAAIoD,QAAQ,CAACC,OAAO,IAAId,UAAU,EAAE;MAChC,IAAI,CAACE,YAAY,EAAE;QACf;MACJ;MAEA,MAAM;QAAEO,MAAM,EAAEW,YAAY;QAAEV,KAAK,EAAEW;MAAY,CAAC,GAAGrB,UAAU;MAE/D,MAAM;QACFS,MAAM,EAAEa,cAAc;QACtBC,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBhB,KAAK,EAAEiB;MACX,CAAC,GAAGd,QAAQ,CAACC,OAAO,CAACc,qBAAqB,CAAC,CAAC;MAE5C,MAAMZ,OAAO,GAAGjC,uBAAuB,GAAGmB,YAAY,GAAG2B,QAAQ,CAACC,IAAI;MAEtE,MAAM;QACFrB,MAAM,EAAEsB,eAAe;QACvBrB,KAAK,EAAEsB,cAAc;QACrBP,GAAG;QACHF;MACJ,CAAC,GAAGP,OAAO,CAACY,qBAAqB,CAAC,CAAC;MAEnC,MAAMK,KAAK,GAAGD,cAAc,GAAIhB,OAAO,CAAiBkB,WAAW;MACnE,MAAMC,KAAK,GAAGJ,eAAe,GAAIf,OAAO,CAAiBoB,YAAY;MAErE,IACIhB,YAAY,GAAGM,WAAW,GAAG,EAAE,IAC/BpD,SAAS,KAAKN,cAAc,CAACqE,UAAU,IACvC/D,SAAS,KAAKN,cAAc,CAACsE,WAAW,EAC1C;QACE,IAAIC,OAAO,GAAG,KAAK;QAEnB,IACIlB,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,IACnDrD,SAAS,KAAKN,cAAc,CAACsE,WAAW,EAC1C;UACE9C,oBAAoB,CAACxB,cAAc,CAACsE,WAAW,CAAC;UAEhDC,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACH/C,oBAAoB,CAACxB,cAAc,CAACqE,UAAU,CAAC;QACnD;QAEA,MAAMhD,CAAC,GACH,CAACmC,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAGJ,IAAI,IAAIU,KAAK,GAAGjB,OAAO,CAACwB,UAAU;QAC1E,MAAMlD,CAAC,GACH,CAACoC,WAAW,GAAGJ,cAAc,GAAG,CAAC,GAAGG,GAAG,IAAIU,KAAK,GAChDnB,OAAO,CAACyB,SAAS,GACjBxD,OAAO;QAEX,IAAIyD,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACLrD,CAAC,GAAGgC,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAC9BvD,CAAC,GAAGgC,WAAW,GAAGsB,MAAM,CAACC,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHF,SAAS,GAAG,CAAC;UAEb,MAAMG,KAAK,GAAGF,MAAM,CAACC,UAAU,IAAIpB,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEe,SAAS,GACLG,KAAK,GAAGxB,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAClCC,KAAK,GAAGxB,WAAW,GAAGsB,MAAM,CAACC,UAAU,GACvC,CAAC;QACf;QAEAjD,SAAS,CAAC+C,SAAS,CAAC;QAEpB,MAAMI,IAAI,GAAGzD,CAAC,GAAGqD,SAAS;QAE1BtD,cAAc,CAAC;UACXC,CAAC,EAAEyD,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBxD;QACJ,CAAC,CAAC;MACN,CAAC,MAAM;QACH,IAAIiD,OAAO,GAAG,KAAK;QAEnB,IACIlB,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,IACnDrD,SAAS,KAAKN,cAAc,CAAC+E,QAAQ,EACvC;UACEvD,oBAAoB,CAACxB,cAAc,CAAC+E,QAAQ,CAAC;UAE7CR,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACH/C,oBAAoB,CAACxB,cAAc,CAACyB,OAAO,CAAC;QAChD;QAEA,MAAMJ,CAAC,GACH,CAACmC,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAGJ,IAAI,IAAIU,KAAK,GAAGjB,OAAO,CAACwB,UAAU;QAC1E,MAAMlD,CAAC,GACH,CAACoC,WAAW,GAAGJ,cAAc,GAAG,CAAC,GAAGG,GAAG,IAAIU,KAAK,GAChDnB,OAAO,CAACyB,SAAS,GACjBxD,OAAO;QAEX,IAAIyD,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACLrD,CAAC,GAAGgC,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAC9BvD,CAAC,GAAGgC,WAAW,GAAGsB,MAAM,CAACC,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHF,SAAS,GAAG,CAAC;UAEb,MAAMG,KAAK,GAAGF,MAAM,CAACC,UAAU,IAAIpB,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEe,SAAS,GACLG,KAAK,GAAGxB,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAClCC,KAAK,GAAGxB,WAAW,GAAGsB,MAAM,CAACC,UAAU,GACvC,CAAC;QACf;QAEAjD,SAAS,CAAC+C,SAAS,CAAC;QAEpB,MAAMI,IAAI,GAAGzD,CAAC,GAAGqD,SAAS;QAE1BtD,cAAc,CAAC;UACXC,CAAC,EAAEyD,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBxD;QACJ,CAAC,CAAC;MACN;MAEAO,SAAS,CAAC,IAAI,CAAC;IACnB;EACJ,CAAC,EAAE,CAACvB,SAAS,EAAE4B,YAAY,EAAEF,UAAU,EAAEjB,uBAAuB,EAAEE,OAAO,CAAC,CAAC;EAE3EvB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACwC,YAAY,IAAI,CAACW,QAAQ,CAACC,OAAO,EAAE;IAExC,MAAMkC,UAAU,GAAG9C,YAAY,CAAC+C,YAAY;IAC5C,MAAM3B,cAAc,GAAGT,QAAQ,CAACC,OAAO,CAACc,qBAAqB,CAAC,CAAC,CAACnB,MAAM;IAEtE,IACI,CACIzC,cAAc,CAACyB,OAAO,EACtBzB,cAAc,CAAC+E,QAAQ,EACvB/E,cAAc,CAACkF,SAAS,CAC3B,CAACC,QAAQ,CAAC5D,iBAAiB,CAAC,EAC/B;MACEc,mBAAmB,CAAClB,WAAW,CAACG,CAAC,GAAG,EAAE,CAAC;IAC3C,CAAC,MAAM;MACHe,mBAAmB,CAAC2C,UAAU,GAAG1B,cAAc,GAAGnC,WAAW,CAACG,CAAC,GAAG,EAAE,CAAC;IACzE;EACJ,CAAC,EAAE,CAACH,WAAW,CAACG,CAAC,EAAEC,iBAAiB,EAAEW,YAAY,CAAC,CAAC;EAEpD,MAAMkD,mBAAmB,GAAGA,CAAA,KAAM;IAC9BjC,UAAU,CAAC,CAAC;EAChB,CAAC;EAED,MAAMkC,UAAU,GAAG5F,WAAW,CAAC,MAAM;IACjCoC,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMyD,gBAAgB,GAAG7F,WAAW,CAAC,MAAM;IACvC,IAAIoB,iBAAiB,EAAE;MACnB8D,MAAM,CAACY,YAAY,CAAChD,OAAO,CAACO,OAAO,CAAC;MACpCK,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACA,UAAU,EAAEtC,iBAAiB,CAAC,CAAC;EAEnC,MAAM2E,gBAAgB,GAAG/F,WAAW,CAAC,MAAM;IACvC,IAAI,CAACoB,iBAAiB,EAAE;MACpB;IACJ;IAEA,IAAID,yBAAyB,EAAE;MAC3ByE,UAAU,CAAC,CAAC;MAEZ;IACJ;IAEA9C,OAAO,CAACO,OAAO,GAAG6B,MAAM,CAACc,UAAU,CAAC,MAAM;MACtCJ,UAAU,CAAC,CAAC;IAChB,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,CAACA,UAAU,EAAEzE,yBAAyB,EAAEC,iBAAiB,CAAC,CAAC;EAE9D,MAAM6E,mBAAmB,GAAGjG,WAAW,CAClCkG,KAAK,IAAK;IACP,IAAI,CAAC/C,eAAe,CAACE,OAAO,EAAE8C,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,EAAE;MAC1DR,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EACD,CAACA,UAAU,CACf,CAAC;EAED1F,mBAAmB,CACfuB,GAAG,EACH,OAAO;IACH4E,IAAI,EAAET,UAAU;IAChBU,IAAI,EAAE5C;EACV,CAAC,CAAC,EACF,CAACkC,UAAU,EAAElC,UAAU,CAC3B,CAAC;EAEDzD,SAAS,CAAC,MAAM;IACZ,IAAIkC,MAAM,EAAE;MACRiC,QAAQ,CAACmC,gBAAgB,CAAC,OAAO,EAAEN,mBAAmB,EAAE,IAAI,CAAC;MAC7Df,MAAM,CAACqB,gBAAgB,CAAC,MAAM,EAAEX,UAAU,CAAC;MAE3C,IAAI,OAAO7E,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOE,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACTmD,QAAQ,CAACoC,mBAAmB,CAAC,OAAO,EAAEP,mBAAmB,EAAE,IAAI,CAAC;MAChEf,MAAM,CAACsB,mBAAmB,CAAC,MAAM,EAAEZ,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACK,mBAAmB,EAAEL,UAAU,EAAEzD,MAAM,EAAElB,MAAM,EAAEF,MAAM,CAAC,CAAC;EAE7Dd,SAAS,CAAC,MAAM;IACZ,IAAI,CAACwC,YAAY,EAAE;MACf;IACJ;IAEAH,SAAS,CAAC,mBACNjC,YAAY,cACRP,KAAA,CAAA2G,aAAA,CAAC5G,eAAe;MAAC6G,OAAO,EAAE;IAAM,GAC3BvE,MAAM,iBACHrC,KAAA,CAAA2G,aAAA,CAAChG,mBAAmB;MAChBwC,KAAK,EAAEV,UAAU,EAAEU,KAAK,IAAI,CAAE;MAC9BhB,MAAM,EAAEA,MAAO;MACfX,uBAAuB,EAAEA,uBAAwB;MACjDI,WAAW,EAAEA,WAAY;MACzBiF,GAAG,EAAE,WAAW5D,IAAI,EAAG;MACvB6D,SAAS,EAAEjE,gBAAiB;MAC5B9B,SAAS,EAAEiB,iBAAkB;MAC7BL,GAAG,EAAE0B,eAAgB;MACrB0D,YAAY,EAAEd,gBAAiB;MAC/Be,YAAY,EAAEjB;IAAiB,gBAE/B/F,KAAA,CAAA2G,aAAA,CAACjG,mBAAmB;MAACuG,iBAAiB;IAAA,GACjCjG,OACgB,CACJ,CAEZ,CAAC,EAClB2B,YACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCE,gBAAgB,EAChBb,iBAAiB,EACjBW,YAAY,EACZ3B,OAAO,EACPY,WAAW,EACXmE,gBAAgB,EAChBE,gBAAgB,EAChB5D,MAAM,EACNF,MAAM,EACNM,UAAU,EAAEU,KAAK,EACjBF,IAAI,EACJzB,uBAAuB,CAC1B,CAAC;EAEF,oBACIxB,KAAA,CAAA2G,aAAA,CAAA3G,KAAA,CAAAkH,QAAA,QACK9D,eAAe,eAChBpD,KAAA,CAAA2G,aAAA,CAAC/F,WAAW;IACRuG,SAAS,EAAC,mBAAmB;IAC7BxF,GAAG,EAAE2B,QAAS;IACd8D,OAAO,EAAEvB,mBAAoB;IAC7BkB,YAAY,EAAEd,gBAAiB;IAC/Be,YAAY,EAAEjB,gBAAiB;IAC/BsB,uBAAuB,EAAE9F,sBAAuB;IAChD+F,mBAAmB,EAAE7F;EAAmB,GAEvCL,QACQ,CAAC,EACbmB,MACH,CAAC;AAEX,CACJ,CAAC;AAEDzB,KAAK,CAACyG,WAAW,GAAG,OAAO;AAE3B,eAAezG,KAAK","ignoreList":[]}
package/lib/esm/hooks/element.js CHANGED
@@ -60,7 +60,7 @@ export const useMeasuredClone = ({
60
60
  offsetHeight: height
61
61
  } = ref.current;
62
62
  setSize({
63
- width,
63
+ width: width + 6,
64
64
  height
65
65
  });
66
66
  };
package/lib/esm/hooks/element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"element.js","names":["React","cloneElement","isValidElement","useEffect","useRef","useState","useElementSize","ref","shouldUseChildElement","size","setSize","target","current","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","getClonedElement","content","preventEvents","onClick","e","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","createElement","useMeasuredClone","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute","parentElement"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly | undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n const target = (\n shouldUseChildElement ? ref.current?.firstElementChild : ref.current\n ) as HTMLElement | null;\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({ content }: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n setSize({ width, height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, []);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T | null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement | null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"element.js","names":["React","cloneElement","isValidElement","useEffect","useRef","useState","useElementSize","ref","shouldUseChildElement","size","setSize","target","current","firstElementChild","updateSize","getBoundingClientRect","observer","ResizeObserver","entries","forEach","entry","contentRect","observe","disconnect","getClonedElement","content","preventEvents","onClick","e","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","props","createElement","useMeasuredClone","width","height","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","zIndex","visibility","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute","parentElement"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement | HTMLLabelElement | null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly | undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n const target = (\n shouldUseChildElement ? ref.current?.firstElementChild : ref.current\n ) as HTMLElement | null;\n\n if (!target) return () => {};\n\n const updateSize = () => setSize(target.getBoundingClientRect());\n\n updateSize();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === target) {\n setSize(entry.contentRect);\n }\n });\n });\n\n observer.observe(target);\n\n return () => observer.disconnect();\n }, [ref, shouldUseChildElement]);\n\n return size;\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<any>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n const props = {\n ...preventEvents,\n 'data-measured-clone': true,\n };\n\n if (isValidElement(content)) {\n return cloneElement(content as unknown as ReactElement, props);\n }\n\n if (typeof content === 'string') {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <span {...props}>{content}</span>;\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n}\n\nexport const useMeasuredClone = ({ content }: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n setSize({ width: width + 6, height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, []);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T | null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement | null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,YAAY,EAEZC,cAAc,EAIdC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACL,OAAO;AAMd,OAAO,MAAMC,cAAc,GAAGA,CAC1BC,GAA+D,EAC/D;EAAEC,qBAAqB,GAAG;AAA6B,CAAC,GAAG,CAAC,CAAC,KAC/B;EAC9B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGL,QAAQ,CAAkB,CAAC;EAEnDF,SAAS,CAAC,MAAM;IACZ,MAAMQ,MAAM,GACRH,qBAAqB,GAAGD,GAAG,CAACK,OAAO,EAAEC,iBAAiB,GAAGN,GAAG,CAACK,OAC1C;IAEvB,IAAI,CAACD,MAAM,EAAE,OAAO,MAAM,CAAC,CAAC;IAE5B,MAAMG,UAAU,GAAGA,CAAA,KAAMJ,OAAO,CAACC,MAAM,CAACI,qBAAqB,CAAC,CAAC,CAAC;IAEhED,UAAU,CAAC,CAAC;IAEZ,MAAME,QAAQ,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;MAC7CA,OAAO,CAACC,OAAO,CAAEC,KAAK,IAAK;QACvB,IAAIA,KAAK,CAACT,MAAM,KAAKA,MAAM,EAAE;UACzBD,OAAO,CAACU,KAAK,CAACC,WAAW,CAAC;QAC9B;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;IAEFL,QAAQ,CAACM,OAAO,CAACX,MAAM,CAAC;IAExB,OAAO,MAAMK,QAAQ,CAACO,UAAU,CAAC,CAAC;EACtC,CAAC,EAAE,CAAChB,GAAG,EAAEC,qBAAqB,CAAC,CAAC;EAEhC,OAAOC,IAAI;AACf,CAAC;AAED,MAAMe,gBAAgB,GAAIC,OAAkB,IAAK;EAC7C,MAAMC,aAA2C,GAAG;IAChDC,OAAO,EAAGC,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnCC,WAAW,EAAGF,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACvCE,SAAS,EAAGH,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACrCG,SAAS,EAAGJ,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACrCI,OAAO,EAAGL,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnCK,OAAO,EAAGN,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnCM,MAAM,EAAGP,CAAC,IAAKA,CAAC,CAACC,eAAe,CAAC;EACrC,CAAC;EAED,MAAMO,KAAK,GAAG;IACV,GAAGV,aAAa;IAChB,qBAAqB,EAAE;EAC3B,CAAC;EAED,iBAAIxB,cAAc,CAACuB,OAAO,CAAC,EAAE;IACzB,oBAAOxB,YAAY,CAACwB,OAAO,EAA6BW,KAAK,CAAC;EAClE;EAEA,IAAI,OAAOX,OAAO,KAAK,QAAQ,EAAE;IAC7B;IACA,oBAAOzB,KAAA,CAAAqC,aAAA,SAAUD,KAAK,EAAGX,OAAc,CAAC;EAC5C;EAEA,OAAOA,OAAO;AAClB,CAAC;AAMD,OAAO,MAAMa,gBAAgB,GAAGA,CAAC;EAAEb;AAAiC,CAAC,KAAK;EACtE,MAAMlB,GAAG,GAAGH,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAM,CAACK,IAAI,EAAEC,OAAO,CAAC,GAAGL,QAAQ,CAAC;IAAEkC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC,CAAC;EAEzD,MAAMC,aAAa,GAAGjB,gBAAgB,CAACC,OAAO,CAAC;EAE/CtB,SAAS,CAAC,MAAM;IACZ,MAAMuC,OAAO,GAAGA,CAAA,KAAM;MAClB,IAAI,CAACnC,GAAG,CAACK,OAAO,EAAE;MAClB,MAAM;QAAE+B,WAAW,EAAEJ,KAAK;QAAEK,YAAY,EAAEJ;MAAO,CAAC,GAAGjC,GAAG,CAACK,OAAO;MAChEF,OAAO,CAAC;QAAE6B,KAAK,EAAEA,KAAK,GAAG,CAAC;QAAEC;MAAO,CAAC,CAAC;IACzC,CAAC;IAEDE,OAAO,CAAC,CAAC;IAET,MAAM1B,QAAQ,GAAG,IAAIC,cAAc,CAACyB,OAAO,CAAC;IAE5C,IAAInC,GAAG,CAACK,OAAO,EAAEI,QAAQ,CAACM,OAAO,CAACf,GAAG,CAACK,OAAO,CAAC;IAE9C,OAAO,MAAMI,QAAQ,CAACO,UAAU,CAAC,CAAC;EACtC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMsB,eAAe,gBACjB7C,KAAA,CAAAqC,aAAA;IACI,uBAAoB,MAAM;IAC1B9B,GAAG,EAAEA,GAAI;IACTuC,KAAK,EAAE;MACHC,QAAQ,EAAE,OAAO;MACjBC,OAAO,EAAE,CAAC;MACVC,aAAa,EAAE,MAAM;MACrBC,MAAM,EAAE,CAAC,CAAC;MACVV,MAAM,EAAE,MAAM;MACdD,KAAK,EAAE,MAAM;MACbY,UAAU,EAAE;IAChB;EAAE,GAEDV,aACA,CACR;EAED,OAAO;IACHI,eAAe;IACfN,KAAK,EAAE9B,IAAI,CAAC8B,KAAK;IACjBC,MAAM,EAAE/B,IAAI,CAAC+B;EACjB,CAAC;AACL,CAAC;AAED,OAAO,MAAMY,kBAAkB,GAAGA,CAAA,KAA6B;EAC3D,MAAM7C,GAAG,GAAGH,MAAM,CAAW,IAAI,CAAC;EAElC,MAAM,CAACiD,OAAO,EAAEC,UAAU,CAAC,GAAGjD,QAAQ,CAAC,KAAK,CAAC;EAE7CF,SAAS,CAAC,MAAM;IACZ,IAAI,CAACI,GAAG,CAACK,OAAO,EAAE;IAElB,IAAI2C,EAAsB,GAAGhD,GAAG,CAACK,OAAO;IAExC,OAAO2C,EAAE,EAAE;MACP,IAAIA,EAAE,CAACC,YAAY,CAAC,qBAAqB,CAAC,EAAE;QACxCF,UAAU,CAAC,IAAI,CAAC;QAEhB;MACJ;MAEAC,EAAE,GAAGA,EAAE,CAACE,aAAa;IACzB;IAEAH,UAAU,CAAC,KAAK,CAAC;EACrB,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,CAACD,OAAO,EAAE9C,GAAG,CAAC;AACzB,CAAC","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.1226",
3
+ "version": "5.0.0-beta.1228",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -85,5 +85,5 @@
85
85
  "publishConfig": {
86
86
  "access": "public"
87
87
  },
88
- "gitHead": "fbc247a34773d88f754e8e612fa6f9aa5c04c794"
88
+ "gitHead": "bbe3f356659a8fa245ce1108eba6f6c9c0438be1"
89
89
  }