npm - @chayns-components/core - Versions diffs - 5.0.31 → 5.0.33 - Mend

@chayns-components/core 5.0.31 → 5.0.33

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 (22) hide show

package/lib/cjs/components/popup/Popup.js CHANGED Viewed

@@ -95,46 +95,33 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
       } = element.getBoundingClientRect();
       const zoomX = containerWidth / element.offsetWidth;
       const zoomY = containerHeight / element.offsetHeight;
-      if (pseudoHeight > childrenTop - 25 || alignment === _popup.PopupAlignment.BottomLeft || alignment === _popup.PopupAlignment.BottomRight) {
-        let isRight = false;
-        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25 || alignment === _popup.PopupAlignment.BottomRight) {
-          setInternalAlignment(_popup.PopupAlignment.BottomRight);
-          isRight = true;
-        } else {
-          setInternalAlignment(_popup.PopupAlignment.BottomLeft);
-        }
-        const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;
-        const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
-        let newOffset;
-        if (isRight) {
-          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
-        } else {
-          newOffset = 0;
-          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
-          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
-        }
-        setOffset(newOffset);
-        const newX = x - newOffset;
+      const childrenCenterX = childrenLeft + childrenWidth / 2;
+      const x = (childrenCenterX - left) / zoomX + element.scrollLeft;
+      const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
+      const shouldShowBottom = pseudoHeight > childrenTop - 25 || alignment === _popup.PopupAlignment.BottomLeft || alignment === _popup.PopupAlignment.BottomRight || alignment === _popup.PopupAlignment.BottomCenter;
+      const shouldForceRight = shouldShowBottom ? alignment === _popup.PopupAlignment.BottomRight : alignment === _popup.PopupAlignment.TopRight;
+      const shouldUseCenterAlignment = shouldShowBottom ? alignment === _popup.PopupAlignment.BottomCenter : alignment === _popup.PopupAlignment.TopCenter;
+      const hasEnoughSpaceForCenter = pseudoWidth / 2 <= childrenCenterX - 25 && pseudoWidth / 2 <= window.innerWidth - childrenCenterX - 25;
+      if (shouldUseCenterAlignment && hasEnoughSpaceForCenter) {
+        setInternalAlignment(shouldShowBottom ? _popup.PopupAlignment.BottomCenter : _popup.PopupAlignment.TopCenter);
+        setOffset(0);
         setCoordinates({
-          x: newX < 23 ? 23 : newX,
+          x: x < 23 ? 23 : x,
           y
         });
       } else {
         let isRight = false;
-        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25 || alignment === _popup.PopupAlignment.TopRight) {
-          setInternalAlignment(_popup.PopupAlignment.TopRight);
+        if (pseudoWidth > childrenCenterX - 25 || shouldForceRight) {
+          setInternalAlignment(shouldShowBottom ? _popup.PopupAlignment.BottomRight : _popup.PopupAlignment.TopRight);
           isRight = true;
         } else {
-          setInternalAlignment(_popup.PopupAlignment.TopLeft);
+          setInternalAlignment(shouldShowBottom ? _popup.PopupAlignment.BottomLeft : _popup.PopupAlignment.TopLeft);
         }
-        const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;
-        const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
         let newOffset;
         if (isRight) {
           newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
         } else {
-          newOffset = 0;
-          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          const right = window.innerWidth - childrenCenterX;
           newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
         }
         setOffset(newOffset);
@@ -152,6 +139,22 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
       handleShow();
     }
   }, [handleShow, shouldBeOpen]);
+  const handleReposition = (0, _react2.useCallback)(() => {
+    if (isOpen) {
+      handleShow();
+    }
+  }, [handleShow, isOpen]);
+  (0, _react2.useEffect)(() => {
+    if (!isOpen) {
+      return;
+    }
+    window.addEventListener('resize', handleReposition);
+    window.addEventListener('scroll', handleReposition, true);
+    return () => {
+      window.removeEventListener('resize', handleReposition);
+      window.removeEventListener('scroll', handleReposition, true);
+    };
+  }, [handleReposition, isOpen]);
   (0, _react2.useEffect)(() => {
     if (!newContainer || !popupRef.current) return;
     const viewHeight = newContainer.clientHeight;

package/lib/cjs/components/popup/Popup.js.map CHANGED Viewed

	@@ -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","shouldBeOpen","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","shouldPreventTextWrapping","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 Whether the popup should be open. This can be used to control the popup from outside.\n */\n shouldBeOpen?: boolean;\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 shouldBeOpen = false,\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(shouldBeOpen);\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({\n content,\n shouldPreventTextWrapping: !shouldUseChildrenWidth,\n });\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 (shouldBeOpen) {\n handleShow();\n }\n }, [handleShow, shouldBeOpen]);\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 && !shouldBeOpen) {\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, shouldBeOpen]);\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","shouldBeOpen","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","shouldPreventTextWrapping","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","childrenCenterX","scrollLeft","scrollTop","shouldShowBottom","BottomLeft","BottomRight","BottomCenter","shouldForceRight","TopRight","shouldUseCenterAlignment","TopCenter","hasEnoughSpaceForCenter","window","innerWidth","isRight","newOffset","right","newX","handleReposition","addEventListener","removeEventListener","viewHeight","clientHeight","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","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 Whether the popup should be open. This can be used to control the popup from outside.\n */\n shouldBeOpen?: boolean;\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 shouldBeOpen = false,\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(shouldBeOpen);\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({\n content,\n shouldPreventTextWrapping: !shouldUseChildrenWidth,\n });\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 const childrenCenterX = childrenLeft + childrenWidth / 2;\n const x = (childrenCenterX - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;\n\n const shouldShowBottom =\n pseudoHeight > childrenTop - 25 \|\|\n alignment === PopupAlignment.BottomLeft \|\|\n alignment === PopupAlignment.BottomRight \|\|\n alignment === PopupAlignment.BottomCenter;\n\n const shouldForceRight = shouldShowBottom\n ? alignment === PopupAlignment.BottomRight\n : alignment === PopupAlignment.TopRight;\n\n const shouldUseCenterAlignment = shouldShowBottom\n ? alignment === PopupAlignment.BottomCenter\n : alignment === PopupAlignment.TopCenter;\n\n const hasEnoughSpaceForCenter =\n pseudoWidth / 2 <= childrenCenterX - 25 &&\n pseudoWidth / 2 <= window.innerWidth - childrenCenterX - 25;\n\n if (shouldUseCenterAlignment && hasEnoughSpaceForCenter) {\n setInternalAlignment(\n shouldShowBottom ? PopupAlignment.BottomCenter : PopupAlignment.TopCenter,\n );\n setOffset(0);\n setCoordinates({\n x: x < 23 ? 23 : x,\n y,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenCenterX - 25 \|\| shouldForceRight) {\n setInternalAlignment(\n shouldShowBottom ? PopupAlignment.BottomRight : PopupAlignment.TopRight,\n );\n isRight = true;\n } else {\n setInternalAlignment(\n shouldShowBottom ? PopupAlignment.BottomLeft : PopupAlignment.TopLeft,\n );\n }\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 const right = window.innerWidth - childrenCenterX;\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 (shouldBeOpen) {\n handleShow();\n }\n }, [handleShow, shouldBeOpen]);\n\n const handleReposition = useCallback(() => {\n if (isOpen) {\n handleShow();\n }\n }, [handleShow, isOpen]);\n\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n\n window.addEventListener('resize', handleReposition);\n window.addEventListener('scroll', handleReposition, true);\n\n return () => {\n window.removeEventListener('resize', handleReposition);\n window.removeEventListener('scroll', handleReposition, true);\n };\n }, [handleReposition, isOpen]);\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 && !shouldBeOpen) {\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, shouldBeOpen]);\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/components/popup/popup-content-wrapper/PopupContentWrapper.js CHANGED Viewed

@@ -24,13 +24,27 @@ const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
     colorMode
   } = (0, _chaynsApi.useSite)();
   const isBottomLeftAlignment = alignment === _popup.PopupAlignment.BottomLeft;
+  const isBottomCenterAlignment = alignment === _popup.PopupAlignment.BottomCenter;
   const isTopLeftAlignment = alignment === _popup.PopupAlignment.TopLeft;
+  const isTopCenterAlignment = alignment === _popup.PopupAlignment.TopCenter;
   const isTopRightAlignment = alignment === _popup.PopupAlignment.TopRight;
-  const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;
-  const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;
-  const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;
-  const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;
-  const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
+  const isCenterAlignment = isBottomCenterAlignment || isTopCenterAlignment;
+  const isTopAlignment = isTopLeftAlignment || isTopCenterAlignment || isTopRightAlignment;
+  let percentageOffsetX = 0;
+  if (isCenterAlignment) {
+    percentageOffsetX = -50;
+  } else if (isBottomLeftAlignment || isTopLeftAlignment) {
+    percentageOffsetX = -100;
+  }
+  const percentageOffsetY = isTopAlignment ? -100 : 0;
+  let anchorOffsetX = -21;
+  if (isCenterAlignment) {
+    anchorOffsetX = 0;
+  } else if (isBottomLeftAlignment || isTopLeftAlignment) {
+    anchorOffsetX = 21;
+  }
+  const anchorOffsetY = isTopAlignment ? -21 : 21;
+  const exitAndInitialY = isTopAlignment ? -16 : 16;
   return /*#__PURE__*/_react.default.createElement(_PopupContentWrapper.StyledMotionPopupContentWrapper, {
     animate: {
       opacity: 1,

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","e","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","useSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","duration","transformTemplate","StyledPopupContentWrapperContent","className","$maxHeight","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ~~ReactNode,~~ type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n StyledMotionPopupContentWrapper,\n StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n alignment: PopupAlignment;\n children: ReactNode;\n offset: number;\n coordinates: PopupCoordinates;\n onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n shouldScrollWithContent: boolean;\n width: number;\n maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n (\n {\n alignment,\n children,\n coordinates,\n offset,\n width,\n onMouseLeave,\n shouldScrollWithContent,\n onMouseEnter,\n maxHeight,\n },\n ref,\n ) => {\n const { colorMode } = useSite();\n\n const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n const percentageOffsetX = isBottomLeftAlignment \|\| isTopLeftAlignment ? -100 ~~: 0~~;\n const percentageOffsetY = ~~isTopRightAlignment~~ ~~\|\| isTopLeftAlignment~~ ? -100 : 0;\n\n ~~const~~ anchorOffsetX = isBottomLeftAlignment \|\| isTopLeftAlignment ? 21 ~~: -~~21;\n const anchorOffsetY = ~~isTopRightAlignment~~ ~~\|\| isTopLeftAlignment~~ ? -21 : 21;\n\n const exitAndInitialY = ~~isTopLeftAlignment~~ ~~\|\| isTopRightAlignment~~ ? -16 : 16;\n\n return (\n <StyledMotionPopupContentWrapper\n animate={{ opacity: 1, y: 0 }}\n $colorMode={colorMode}\n $offset={offset}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n $shouldScrollWithContent={shouldScrollWithContent}\n ref={ref}\n data-ispopup=\"true\"\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={{ left: coordinates.x, top: coordinates.y, width }}\n transition={{ type: 'tween', duration: 0.15 }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n <StyledPopupContentWrapperContent\n className=\"chayns-scrollbar\"\n $maxHeight={maxHeight}\n >\n {children}\n </StyledPopupContentWrapperContent>\n </StyledMotionPopupContentWrapper>\n );\n },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAGsC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AActC,MAAMG,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CACxC,CACI;EACIC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,uBAAuB;EACvBC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,GAAGZ,SAAS,KAAKa,qBAAc,CAACC,UAAU;EACrE,MAAMC,~~kBAAkB~~,GAAGf,SAAS,KAAKa,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,~~GAAGjB~~,SAAS,KAAKa,qBAAc,~~CAACK~~,QAAQ;~~EAEjE~~,MAAMC,iBAAiB,~~GAAGP~~,~~qBAAqB~~,~~IAAIG~~,kBAAkB,GAAG,CAAC,~~GAAG~~,GAAG,CAAC;~~EAChF~~,~~MAAMK~~,~~iBAAiB~~,~~GAAGH~~,~~mBAAmB~~,~~IAAIF~~,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;~~EAE9E~~,~~MAAMM~~,aAAa,~~GAAGT~~,~~qBAAqB~~,~~IAAIG~~,~~kBAAkB~~,~~GAAG~~,EAAE,GAAG,CAAC,EAAE;~~EAC5E~~,~~MAAMO,~~aAAa,~~GAAGL~~,~~mBAAmB~~,~~IAAIF~~,~~kBAAkB~~,GAAG,CAAC,EAAE,GAAG,EAAE;~~EAE1E~~,~~MAAMQ~~,eAAe,~~GAAGR~~,~~kBAAkB~~,~~IAAIE,mBAAmB,~~GAAG,CAAC,EAAE,GAAG,EAAE;~~EAE5E~~,~~oBACI3B~~,MAAA,CAAAM,OAAA,~~CAAA4B~~,aAAA,~~CAAC/B~~,oBAAA,~~CAAAgC~~,+BAA+B;IAC5BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,~~EAAEnB~~,SAAU;~~IACtBoB~~,OAAO,~~EAAE3B~~,MAAO;~~IAChB4B~~,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCS,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CU,SAAS,~~EAAEjC~~,SAAU;~~IACrBkC~~,wBAAwB,~~EAAE5B~~,uBAAwB;IAClDG,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBF,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;~~IAC3B8B~~,KAAK,EAAE;MAAEC,IAAI,~~EAAElC~~,WAAW,~~CAACmC~~,CAAC;MAAEC,GAAG,~~EAAEpC~~,WAAW,~~CAAC0B~~,CAAC;~~MAAExB~~;IAAM,CAAE;~~IAC1DmC~~,UAAU,EAAE;MAAEC,IAAI,EAAE,OAAO;MAAEC,QAAQ,EAAE;IAAK,CAAE;IAC9CC,iBAAiB,EAAEA,CAAC;MAAEd,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCT,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCM,CAAC;AAClC;EAAkB,~~gBAEFtC~~,MAAA,CAAAM,OAAA,~~CAAA4B~~,aAAA,~~CAAC/B~~,oBAAA,~~CAAAkD~~,gCAAgC;IAC7BC,SAAS,EAAC,kBAAkB;IAC5BC,UAAU,~~EAAErC~~;EAAU,GAErBP,QAC6B,CACL,CAAC;AAE1C,CACJ,CAAC;AAEDJ,mBAAmB,~~CAACiD~~,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAApD~~,OAAA,GAElCC,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","e","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","useSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isBottomCenterAlignment","BottomCenter","isTopLeftAlignment","TopLeft","isTopCenterAlignment","TopCenter","isTopRightAlignment","TopRight","isCenterAlignment","isTopAlignment","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","duration","transformTemplate","StyledPopupContentWrapperContent","className","$maxHeight","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { type MouseEventHandler, ReactNode } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n StyledMotionPopupContentWrapper,\n StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n alignment: PopupAlignment;\n children: ReactNode;\n offset: number;\n coordinates: PopupCoordinates;\n onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n shouldScrollWithContent: boolean;\n width: number;\n maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n (\n {\n alignment,\n children,\n coordinates,\n offset,\n width,\n onMouseLeave,\n shouldScrollWithContent,\n onMouseEnter,\n maxHeight,\n },\n ref,\n ) => {\n const { colorMode } = useSite();\n\n const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n const isBottomCenterAlignment = alignment === PopupAlignment.BottomCenter;\n const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n const isTopCenterAlignment = alignment === PopupAlignment.TopCenter;\n const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n const isCenterAlignment = isBottomCenterAlignment \|\| isTopCenterAlignment;\n const isTopAlignment = isTopLeftAlignment \|\| isTopCenterAlignment \|\| isTopRightAlignment;\n\n let percentageOffsetX = 0;\n\n if (isCenterAlignment) {\n percentageOffsetX = -50;\n } else if (isBottomLeftAlignment \|\| isTopLeftAlignment) {\n percentageOffsetX = -100;\n }\n\n const percentageOffsetY = isTopAlignment ? -100 : 0;\n\n let anchorOffsetX = -21;\n\n if (isCenterAlignment) {\n anchorOffsetX = 0;\n } else if (isBottomLeftAlignment \|\| isTopLeftAlignment) {\n anchorOffsetX = 21;\n }\n\n const anchorOffsetY = isTopAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopAlignment ? -16 : 16;\n\n return (\n <StyledMotionPopupContentWrapper\n animate={{ opacity: 1, y: 0 }}\n $colorMode={colorMode}\n $offset={offset}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n $shouldScrollWithContent={shouldScrollWithContent}\n ref={ref}\n data-ispopup=\"true\"\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={{ left: coordinates.x, top: coordinates.y, width }}\n transition={{ type: 'tween', duration: 0.15 }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n <StyledPopupContentWrapperContent\n className=\"chayns-scrollbar\"\n $maxHeight={maxHeight}\n >\n {children}\n </StyledPopupContentWrapperContent>\n </StyledMotionPopupContentWrapper>\n );\n },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js CHANGED Viewed

@@ -51,6 +51,18 @@ const StyledMotionPopupContentWrapper = exports.StyledMotionPopupContentWrapper
                         right: ${13 + $offset}px;
                         transform: rotate(225deg);
                     `;
+    case _popup.PopupAlignment.TopCenter:
+      return (0, _styledComponents.css)`
+                        bottom: -7px;
+                        left: calc(50% - 7px);
+                        transform: rotate(45deg);
+                    `;
+    case _popup.PopupAlignment.BottomCenter:
+      return (0, _styledComponents.css)`
+                        top: -7px;
+                        left: calc(50% - 7px);
+                        transform: rotate(225deg);
+                    `;
     case _popup.PopupAlignment.TopRight:
       return (0, _styledComponents.css)`
                         transform: rotate(45deg);

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupContentWrapper.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_popup","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","text","$shouldScrollWithContent","$position","$offset","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n $position: PopupAlignment;\n $colorMode: ColorMode;\n $offset: number;\n $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n z-index: 100;\n position: ${({ $shouldScrollWithContent }) =>\n $shouldScrollWithContent ? 'absolute' : 'fixed'};\n pointer-events: all;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position, $offset }) => {\n switch ($position) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: ${13 + $offset}px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: ${13 + $offset}px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: ${13 + $offset}px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: ${13 + $offset}px;\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n border-radius: 3px;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n height: 100%;\n width: 100%;\n\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${$maxHeight}px;\n overflow-y: auto;\n overflow-x: hidden;\n `}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAAsD,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAU/C,MAAMkB,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,IAAAE,yBAAM,EACjDC,aAAM,CAACC,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKE,qBAAc,CAACC,OAAO;MACvB,OAAO,IAAAC,qBAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGH,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKC,qBAAc,CAACG,UAAU;MAC1B,OAAO,IAAAD,qBAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGH,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKC,qBAAc,CAACI,QAAQ;MACxB,OAAO,~~IAAAF~~,qBAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGH,OAAO;AAC5C,qBAAqB;IACL,KAAKC,qBAAc,~~CAACK~~,WAAW;MAC3B,OAAO,~~IAAAH~~,qBAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGH,OAAO;AAC5C,qBAAqB;IACL;MACI,~~OAAOO~~,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,gCAAgC,~~GAAAhB~~,OAAA,~~CAAAgB~~,gCAAA,~~GAAGf~~,yBAAM,CAACE,GAA0C;AACjG;AACA;AACA;AACA,MAAM,CAAC;~~EAAEc~~;AAAW,CAAC,KACbA,UAAU,IACV,~~IAAAN~~,qBAAG;AACX,~~0BAA0BM~~,UAAU;AACpC;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"PopupContentWrapper.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_popup","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","text","$shouldScrollWithContent","$position","$offset","PopupAlignment","TopLeft","css","BottomLeft","TopCenter","BottomCenter","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n $position: PopupAlignment;\n $colorMode: ColorMode;\n $offset: number;\n $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n z-index: 100;\n position: ${({ $shouldScrollWithContent }) =>\n $shouldScrollWithContent ? 'absolute' : 'fixed'};\n pointer-events: all;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position, $offset }) => {\n switch ($position) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: ${13 + $offset}px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: ${13 + $offset}px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopCenter:\n return css`\n bottom: -7px;\n left: calc(50% - 7px);\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomCenter:\n return css`\n top: -7px;\n left: calc(50% - 7px);\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: ${13 + $offset}px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: ${13 + $offset}px;\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n border-radius: 3px;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n height: 100%;\n width: 100%;\n\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${$maxHeight}px;\n overflow-y: auto;\n overflow-x: hidden;\n `}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAAsD,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAU/C,MAAMkB,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,IAAAE,yBAAM,EACjDC,aAAM,CAACC,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKE,qBAAc,CAACC,OAAO;MACvB,OAAO,IAAAC,qBAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGH,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKC,qBAAc,CAACG,UAAU;MAC1B,OAAO,IAAAD,qBAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGH,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKC,qBAAc,CAACI,SAAS;MACzB,OAAO,IAAAF,qBAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACK,YAAY;MAC5B,OAAO,IAAAH,qBAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACM,QAAQ;MACxB,OAAO,IAAAJ,qBAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGH,OAAO;AAC5C,qBAAqB;IACL,KAAKC,qBAAc,CAACO,WAAW;MAC3B,OAAO,IAAAL,qBAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGH,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOS,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,gCAAgC,GAAAlB,OAAA,CAAAkB,gCAAA,GAAGjB,yBAAM,CAACE,GAA0C;AACjG;AACA;AACA;AACA,MAAM,CAAC;EAAEgB;AAAW,CAAC,KACbA,UAAU,IACV,IAAAR,qBAAG;AACX,0BAA0BQ,UAAU;AACpC;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/cjs/components/progress-bar/ProgressBar.js CHANGED Viewed

@@ -199,7 +199,8 @@ const ProgressBar = t0 => {
         },
         container: hostContainer ?? undefined,
         shouldUseChildrenWidth: true,
-        shouldBeOpen: true
+        shouldBeOpen: true,
+        yOffset: -12
       })))), shouldShowLabelInline && label && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
         $shouldShowLabelInline: shouldShowLabelInline,
         $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor,

package/lib/cjs/components/progress-bar/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","_popup","_styledComponents","_Popup","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","t0","$","_reactCompilerRuntime","c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","useUuid","coordinates","setCoordinates","useState","popupRef","useRef","hostContainer","setHostContainer","theme","useContext","ThemeContext","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","StyledProgressBarShine","key","$delay","shineEffect","getBoundingClientRect","useEffect","t7","t8","_popupRef$current","current","show","t9","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","thumbLabelColor","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","ref","instance","style","border","StyledProgressBarStepWrapper","step","StyledProgressBarStep","onUpdate","_popupRef$current2","onAnimationComplete","_popupRef$current3","StyledProgressBarThumbLabel","onClick","_temp","ThemeProvider","text","alignment","PopupAlignment","TopCenter","onHide","_popupRef$current4","container","shouldUseChildrenWidth","shouldBeOpen","StyledProgressBarLabel","$primaryColor","$secondaryColor","progressBar","t10","t11","StyledProgressBar","displayName","_default","exports","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n thumbLabelColor?: string;\n}\n\nexport type ProgressBarProps = {\n /*\n The colors of the ProgressBar.\n /\n colors?: Colors;\n /\n The label that should be displayed under the progressbar.\n /\n label?: string;\n /\n The percentage of the progress. Number between 0 and 100.\n /\n percentage?: Range<0, 101>;\n /\n Whether the progress should be hide and just display the label.\n /\n shouldHideProgress?: boolean;\n /\n Whether the label should be displayed inside the ProgressBar.\n /\n shouldShowLabelInline?: boolean;\n /\n Visual marked steps.\n /\n steps?: Range<0, 101>[];\n /\n The label that should be displayed on the thumb of the progress bar.\n /\n thumbLabel?: React.ReactNode;\n /\n Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n /\n showShine?: boolean;\n /\n The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n /\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef \| null>(null);\n const [hostContainer, setHostContainer] = useState<HTMLDivElement \| null>(null);\n\n const theme = useContext(ThemeContext) as Theme \| undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine \|\| percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key /\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) index}\n />\n ));\n }, [percentage, showShine]);\n\n useEffect(() => {\n if (thumbLabel) setCoordinates(hostContainer?.getBoundingClientRect());\n }, [hostContainer, thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div ref={(instance) => setHostContainer(instance)} style={{ border: 0 }}>\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $height={height}\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.thumbLabelColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainer ?? undefined}\n shouldUseChildrenWidth\n shouldBeOpen\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n colors?.thumbLabelColor,\n height,\n hostContainer,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","_popup","_styledComponents","_Popup","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","t0","$","_reactCompilerRuntime","c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","useUuid","coordinates","setCoordinates","useState","popupRef","useRef","hostContainer","setHostContainer","theme","useContext","ThemeContext","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","StyledProgressBarShine","key","$delay","shineEffect","getBoundingClientRect","useEffect","t7","t8","_popupRef$current","current","show","t9","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","thumbLabelColor","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","ref","instance","style","border","StyledProgressBarStepWrapper","step","StyledProgressBarStep","onUpdate","_popupRef$current2","onAnimationComplete","_popupRef$current3","StyledProgressBarThumbLabel","onClick","_temp","ThemeProvider","text","alignment","PopupAlignment","TopCenter","onHide","_popupRef$current4","container","shouldUseChildrenWidth","shouldBeOpen","yOffset","StyledProgressBarLabel","$primaryColor","$secondaryColor","progressBar","t10","t11","StyledProgressBar","displayName","_default","exports","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n thumbLabelColor?: string;\n}\n\nexport type ProgressBarProps = {\n /*\n The colors of the ProgressBar.\n /\n colors?: Colors;\n /\n The label that should be displayed under the progressbar.\n /\n label?: string;\n /\n The percentage of the progress. Number between 0 and 100.\n /\n percentage?: Range<0, 101>;\n /\n Whether the progress should be hide and just display the label.\n /\n shouldHideProgress?: boolean;\n /\n Whether the label should be displayed inside the ProgressBar.\n /\n shouldShowLabelInline?: boolean;\n /\n Visual marked steps.\n /\n steps?: Range<0, 101>[];\n /\n The label that should be displayed on the thumb of the progress bar.\n /\n thumbLabel?: React.ReactNode;\n /\n Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n /\n showShine?: boolean;\n /\n The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n /\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef \| null>(null);\n const [hostContainer, setHostContainer] = useState<HTMLDivElement \| null>(null);\n\n const theme = useContext(ThemeContext) as Theme \| undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine \|\| percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key /\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) index}\n />\n ));\n }, [percentage, showShine]);\n\n useEffect(() => {\n if (thumbLabel) setCoordinates(hostContainer?.getBoundingClientRect());\n }, [hostContainer, thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div ref={(instance) => setHostContainer(instance)} style={{ border: 0 }}>\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $height={height}\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.thumbLabelColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainer ?? undefined}\n shouldUseChildrenWidth\n shouldBeOpen\n yOffset={-12}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n colors?.thumbLabelColor,\n height,\n hostContainer,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/progress-bar/ProgressBar.styles.js CHANGED Viewed

@@ -137,6 +137,7 @@ const StyledProgressBarStep = exports.StyledProgressBarStep = _styledComponents.
 const StyledProgressBarThumbLabel = exports.StyledProgressBarThumbLabel = _styledComponents.default.div`
     position: absolute;
     right: 0;
+    top: 0;
     // revert till POPUPALIGNMENT respect if top or bottom
     // height: 100%;
 `;

package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledProgressBar","exports","styled","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","keyframes","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }> & {\n $height?: number;\n $isBig?: boolean;\n};\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n // revert till POPUPALIGNMENT respect if top or bottom\n // height: 100%;\n`;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledProgressBar","exports","styled","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","keyframes","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }> & {\n $height?: number;\n $isBig?: boolean;\n};\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n top: 0;\n // revert till POPUPALIGNMENT respect if top or bottom\n // height: 100%;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/popup/Popup.js CHANGED Viewed

@@ -87,46 +87,33 @@ const Popup = /*#__PURE__*/forwardRef(({
       } = element.getBoundingClientRect();
       const zoomX = containerWidth / element.offsetWidth;
       const zoomY = containerHeight / element.offsetHeight;
-      if (pseudoHeight > childrenTop - 25 || alignment === PopupAlignment.BottomLeft || alignment === PopupAlignment.BottomRight) {
-        let isRight = false;
-        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25 || alignment === PopupAlignment.BottomRight) {
-          setInternalAlignment(PopupAlignment.BottomRight);
-          isRight = true;
-        } else {
-          setInternalAlignment(PopupAlignment.BottomLeft);
-        }
-        const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;
-        const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
-        let newOffset;
-        if (isRight) {
-          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
-        } else {
-          newOffset = 0;
-          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
-          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
-        }
-        setOffset(newOffset);
-        const newX = x - newOffset;
+      const childrenCenterX = childrenLeft + childrenWidth / 2;
+      const x = (childrenCenterX - left) / zoomX + element.scrollLeft;
+      const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
+      const shouldShowBottom = pseudoHeight > childrenTop - 25 || alignment === PopupAlignment.BottomLeft || alignment === PopupAlignment.BottomRight || alignment === PopupAlignment.BottomCenter;
+      const shouldForceRight = shouldShowBottom ? alignment === PopupAlignment.BottomRight : alignment === PopupAlignment.TopRight;
+      const shouldUseCenterAlignment = shouldShowBottom ? alignment === PopupAlignment.BottomCenter : alignment === PopupAlignment.TopCenter;
+      const hasEnoughSpaceForCenter = pseudoWidth / 2 <= childrenCenterX - 25 && pseudoWidth / 2 <= window.innerWidth - childrenCenterX - 25;
+      if (shouldUseCenterAlignment && hasEnoughSpaceForCenter) {
+        setInternalAlignment(shouldShowBottom ? PopupAlignment.BottomCenter : PopupAlignment.TopCenter);
+        setOffset(0);
         setCoordinates({
-          x: newX < 23 ? 23 : newX,
+          x: x < 23 ? 23 : x,
           y
         });
       } else {
         let isRight = false;
-        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25 || alignment === PopupAlignment.TopRight) {
-          setInternalAlignment(PopupAlignment.TopRight);
+        if (pseudoWidth > childrenCenterX - 25 || shouldForceRight) {
+          setInternalAlignment(shouldShowBottom ? PopupAlignment.BottomRight : PopupAlignment.TopRight);
           isRight = true;
         } else {
-          setInternalAlignment(PopupAlignment.TopLeft);
+          setInternalAlignment(shouldShowBottom ? PopupAlignment.BottomLeft : PopupAlignment.TopLeft);
         }
-        const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;
-        const y = (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;
         let newOffset;
         if (isRight) {
           newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
         } else {
-          newOffset = 0;
-          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          const right = window.innerWidth - childrenCenterX;
           newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
         }
         setOffset(newOffset);
@@ -144,6 +131,22 @@ const Popup = /*#__PURE__*/forwardRef(({
       handleShow();
     }
   }, [handleShow, shouldBeOpen]);
+  const handleReposition = useCallback(() => {
+    if (isOpen) {
+      handleShow();
+    }
+  }, [handleShow, isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    window.addEventListener('resize', handleReposition);
+    window.addEventListener('scroll', handleReposition, true);
+    return () => {
+      window.removeEventListener('resize', handleReposition);
+      window.removeEventListener('scroll', handleReposition, true);
+    };
+  }, [handleReposition, isOpen]);
   useEffect(() => {
     if (!newContainer || !popupRef.current) return;
     const viewHeight = newContainer.clientHeight;

package/lib/esm/components/popup/Popup.js.map CHANGED Viewed

	@@ -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","shouldBeOpen","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","shouldPreventTextWrapping","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 Whether the popup should be open. This can be used to control the popup from outside.\n */\n shouldBeOpen?: boolean;\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 shouldBeOpen = false,\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(shouldBeOpen);\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({\n content,\n shouldPreventTextWrapping: !shouldUseChildrenWidth,\n });\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 (shouldBeOpen) {\n handleShow();\n }\n }, [handleShow, shouldBeOpen]);\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 && !shouldBeOpen) {\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, shouldBeOpen]);\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;AAyDtD,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,CAAC;EACXC,YAAY,GAAG;AACnB,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGxB,QAAQ,CAAmB;IAC7DyB,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG5B,QAAQ,CACtDG,cAAc,CAAC0B,OACnB,CAAC;EACD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG/B,QAAQ,CAAS,CAAC,CAAC;EAC/C,MAAM,CAACgC,MAAM,EAAEC,SAAS,CAAC,GAAGjC,QAAQ,CAACqB,YAAY,CAAC;EAClD,MAAM,CAACa,MAAM,EAAEC,SAAS,CAAC,GAAGnC,QAAQ,CAAc,CAAC;EACnD,MAAM,CAACoC,UAAU,EAAEC,aAAa,CAAC,GAAGrC,QAAQ,CAAoC,CAAC;EACjF,MAAM,CAACsC,YAAY,EAAEC,eAAe,CAAC,GAAGvC,QAAQ,CAAiBY,SAAS,IAAI,IAAI,CAAC;EACnF,MAAM,CAAC4B,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGzC,QAAQ,CAAqB0C,SAAS,CAAC;EAEvF,MAAMC,OAAO,GAAG5C,MAAM,CAAS,CAAC;EAEhC,MAAM6C,IAAI,GAAG1C,OAAO,CAAC,CAAC;EAEtB,MAAM;IAAE2C,MAAM;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAGxC,gBAAgB,CAAC;IACxDG,OAAO;IACPsC,yBAAyB,EAAE,CAAC/B;EAChC,CAAC,CAAC;EAEF,MAAMgC,eAAe,GAAGlD,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAMmD,QAAQ,GAAGnD,MAAM,CAAiB,IAAI,CAAC;EAE7CF,SAAS,CAAC,MAAM;IACZ,IAAIqD,QAAQ,CAACC,OAAO,IAAI,CAACvC,SAAS,EAAE;MAChC,MAAMwC,EAAE,GAAGF,QAAQ,CAACC,OAAsB;MAE1C,MAAME,OAAO,GAAGD,EAAE,CAACE,OAAO,CAAC,4CAA4C,CAAC;MAExEf,eAAe,CAACc,OAAO,CAAC;IAC5B;EACJ,CAAC,EAAE,CAACzC,SAAS,CAAC,CAAC;EAEff,SAAS,CAAC,MAAM;IACZ,IAAIe,SAAS,YAAY2C,OAAO,EAAE;MAC9BhB,eAAe,CAAC3B,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEff,SAAS,CAAC,MAAM;IACZwC,aAAa,CAAC;MAAEQ,MAAM;MAAEC;IAAM,CAAC,CAAC;EACpC,CAAC,EAAE,CAACD,MAAM,EAAEC,KAAK,CAAC,CAAC;EAEnB,MAAMU,UAAU,GAAG5D,WAAW,CAAC,MAAM;IACjC,IAAIsD,QAAQ,CAACC,OAAO,IAAIf,UAAU,EAAE;MAChC,IAAI,CAACE,YAAY,EAAE;QACf;MACJ;MAEA,MAAM;QAAEO,MAAM,EAAEY,YAAY;QAAEX,KAAK,EAAEY;MAAY,CAAC,GAAGtB,UAAU;MAE/D,MAAM;QACFS,MAAM,EAAEc,cAAc;QACtBC,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBjB,KAAK,EAAEkB;MACX,CAAC,GAAGd,QAAQ,CAACC,OAAO,CAACc,qBAAqB,CAAC,CAAC;MAE5C,MAAMZ,OAAO,GAAGnC,uBAAuB,GAAGoB,YAAY,GAAG4B,QAAQ,CAACC,IAAI;MAEtE,MAAM;QACFtB,MAAM,EAAEuB,eAAe;QACvBtB,KAAK,EAAEuB,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/BtD,SAAS,KAAKN,cAAc,CAACuE,UAAU,IACvCjE,SAAS,KAAKN,cAAc,CAACwE,WAAW,EAC1C;QACE,IAAIC,OAAO,GAAG,KAAK;QAEnB,IACIlB,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,IACnDvD,SAAS,KAAKN,cAAc,CAACwE,WAAW,EAC1C;UACE/C,oBAAoB,CAACzB,cAAc,CAACwE,WAAW,CAAC;UAEhDC,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACHhD,oBAAoB,CAACzB,cAAc,CAACuE,UAAU,CAAC;QACnD;QAEA,MAAMjD,CAAC,GACH,CAACoC,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAGJ,IAAI,IAAIU,KAAK,GAAGjB,OAAO,CAACwB,UAAU;QAC1E,MAAMnD,CAAC,GACH,CAACqC,WAAW,GAAGJ,cAAc,GAAG,CAAC,GAAGG,GAAG,IAAIU,KAAK,GAChDnB,OAAO,CAACyB,SAAS,GACjB1D,OAAO;QAEX,IAAI2D,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACLtD,CAAC,GAAGiC,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAC9BxD,CAAC,GAAGiC,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;QAEAlD,SAAS,CAACgD,SAAS,CAAC;QAEpB,MAAMI,IAAI,GAAG1D,CAAC,GAAGsD,SAAS;QAE1BvD,cAAc,CAAC;UACXC,CAAC,EAAE0D,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBzD;QACJ,CAAC,CAAC;MACN,CAAC,MAAM;QACH,IAAIkD,OAAO,GAAG,KAAK;QAEnB,IACIlB,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,IACnDvD,SAAS,KAAKN,cAAc,CAACiF,QAAQ,EACvC;UACExD,oBAAoB,CAACzB,cAAc,CAACiF,QAAQ,CAAC;UAE7CR,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACHhD,oBAAoB,CAACzB,cAAc,CAAC0B,OAAO,CAAC;QAChD;QAEA,MAAMJ,CAAC,GACH,CAACoC,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAGJ,IAAI,IAAIU,KAAK,GAAGjB,OAAO,CAACwB,UAAU;QAC1E,MAAMnD,CAAC,GACH,CAACqC,WAAW,GAAGJ,cAAc,GAAG,CAAC,GAAGG,GAAG,IAAIU,KAAK,GAChDnB,OAAO,CAACyB,SAAS,GACjB1D,OAAO;QAEX,IAAI2D,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACLtD,CAAC,GAAGiC,WAAW,IAAIsB,MAAM,CAACC,UAAU,GAC9BxD,CAAC,GAAGiC,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;QAEAlD,SAAS,CAACgD,SAAS,CAAC;QAEpB,MAAMI,IAAI,GAAG1D,CAAC,GAAGsD,SAAS;QAE1BvD,cAAc,CAAC;UACXC,CAAC,EAAE0D,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBzD;QACJ,CAAC,CAAC;MACN;MAEAO,SAAS,CAAC,IAAI,CAAC;IACnB;EACJ,CAAC,EAAE,CAACxB,SAAS,EAAE6B,YAAY,EAAEF,UAAU,EAAElB,uBAAuB,EAAEE,OAAO,CAAC,CAAC;EAE3EvB,SAAS,CAAC,MAAM;IACZ,IAAIwB,YAAY,EAAE;MACdmC,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACA,UAAU,EAAEnC,YAAY,CAAC,CAAC;EAE9BxB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACyC,YAAY,IAAI,CAACY,QAAQ,CAACC,OAAO,EAAE;IAExC,MAAMkC,UAAU,GAAG/C,YAAY,CAACgD,YAAY;IAC5C,MAAM3B,cAAc,GAAGT,QAAQ,CAACC,OAAO,CAACc,qBAAqB,CAAC,CAAC,CAACpB,MAAM;IAEtE,IACI,CACI1C,cAAc,CAAC0B,OAAO,EACtB1B,cAAc,CAACiF,QAAQ,EACvBjF,cAAc,CAACoF,SAAS,CAC3B,CAACC,QAAQ,CAAC7D,iBAAiB,CAAC,EAC/B;MACEc,mBAAmB,CAAClB,WAAW,CAACG,CAAC,GAAG,EAAE,CAAC;IAC3C,CAAC,MAAM;MACHe,mBAAmB,CAAC4C,UAAU,GAAG1B,cAAc,GAAGpC,WAAW,CAACG,CAAC,GAAG,EAAE,CAAC;IACzE;EACJ,CAAC,EAAE,CAACH,WAAW,CAACG,CAAC,EAAEC,iBAAiB,EAAEW,YAAY,CAAC,CAAC;EAEpD,MAAMmD,mBAAmB,GAAGA,CAAA,KAAM;IAC9BjC,UAAU,CAAC,CAAC;EAChB,CAAC;EAED,MAAMkC,UAAU,GAAG9F,WAAW,CAAC,MAAM;IACjCqC,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM0D,gBAAgB,GAAG/F,WAAW,CAAC,MAAM;IACvC,IAAIoB,iBAAiB,EAAE;MACnBgE,MAAM,CAACY,YAAY,CAACjD,OAAO,CAACQ,OAAO,CAAC;MACpCK,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACA,UAAU,EAAExC,iBAAiB,CAAC,CAAC;EAEnC,MAAM6E,gBAAgB,GAAGjG,WAAW,CAAC,MAAM;IACvC,IAAI,CAACoB,iBAAiB,EAAE;MACpB;IACJ;IAEA,IAAID,yBAAyB,EAAE;MAC3B2E,UAAU,CAAC,CAAC;MAEZ;IACJ;IAEA/C,OAAO,CAACQ,OAAO,GAAG6B,MAAM,CAACc,UAAU,CAAC,MAAM;MACtCJ,UAAU,CAAC,CAAC;IAChB,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,CAACA,UAAU,EAAE3E,yBAAyB,EAAEC,iBAAiB,CAAC,CAAC;EAE9D,MAAM+E,mBAAmB,GAAGnG,WAAW,CAClCoG,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;EAED5F,mBAAmB,CACfwB,GAAG,EACH,OAAO;IACH6E,IAAI,EAAET,UAAU;IAChBU,IAAI,EAAE5C;EACV,CAAC,CAAC,EACF,CAACkC,UAAU,EAAElC,UAAU,CAC3B,CAAC;EAED3D,SAAS,CAAC,MAAM;IACZ,IAAImC,MAAM,IAAI,CAACX,YAAY,EAAE;MACzB6C,QAAQ,CAACmC,gBAAgB,CAAC,OAAO,EAAEN,mBAAmB,EAAE,IAAI,CAAC;MAC7Df,MAAM,CAACqB,gBAAgB,CAAC,MAAM,EAAEX,UAAU,CAAC;MAE3C,IAAI,OAAO/E,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;MACTqD,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,EAAE1D,MAAM,EAAEnB,MAAM,EAAEF,MAAM,EAAEU,YAAY,CAAC,CAAC;EAE3ExB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACyC,YAAY,EAAE;MACf;IACJ;IAEAH,SAAS,CAAC,mBACNlC,YAAY,cACRP,KAAA,CAAA6G,aAAA,CAAC9G,eAAe;MAAC+G,OAAO,EAAE;IAAM,GAC3BxE,MAAM,iBACHtC,KAAA,CAAA6G,aAAA,CAAClG,mBAAmB;MAChByC,KAAK,EAAEV,UAAU,EAAEU,KAAK,IAAI,CAAE;MAC9BhB,MAAM,EAAEA,MAAO;MACfZ,uBAAuB,EAAEA,uBAAwB;MACjDK,WAAW,EAAEA,WAAY;MACzBkF,GAAG,EAAE,WAAW7D,IAAI,EAAG;MACvB8D,SAAS,EAAElE,gBAAiB;MAC5B/B,SAAS,EAAEkB,iBAAkB;MAC7BL,GAAG,EAAE2B,eAAgB;MACrB0D,YAAY,EAAEd,gBAAiB;MAC/Be,YAAY,EAAEjB;IAAiB,gBAE/BjG,KAAA,CAAA6G,aAAA,CAACnG,mBAAmB;MAACyG,iBAAiB;IAAA,GACjCnG,OACgB,CACJ,CAEZ,CAAC,EAClB4B,YACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCE,gBAAgB,EAChBb,iBAAiB,EACjBW,YAAY,EACZ5B,OAAO,EACPa,WAAW,EACXoE,gBAAgB,EAChBE,gBAAgB,EAChB7D,MAAM,EACNF,MAAM,EACNM,UAAU,EAAEU,KAAK,EACjBF,IAAI,EACJ1B,uBAAuB,CAC1B,CAAC;EAEF,oBACIxB,KAAA,CAAA6G,aAAA,CAAA7G,KAAA,CAAAoH,QAAA,QACK/D,eAAe,eAChBrD,KAAA,CAAA6G,aAAA,CAACjG,WAAW;IACRyG,SAAS,EAAC,mBAAmB;IAC7BzF,GAAG,EAAE4B,QAAS;IACd8D,OAAO,EAAEvB,mBAAoB;IAC7BkB,YAAY,EAAEd,gBAAiB;IAC/Be,YAAY,EAAEjB,gBAAiB;IAC/BsB,uBAAuB,EAAEhG,sBAAuB;IAChDiG,mBAAmB,EAAE/F;EAAmB,GAEvCL,QACQ,CAAC,EACboB,MACH,CAAC;AAEX,CACJ,CAAC;AAED1B,KAAK,CAAC2G,WAAW,GAAG,OAAO;AAE3B,eAAe3G,KAAK","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","shouldBeOpen","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","shouldPreventTextWrapping","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","childrenCenterX","scrollLeft","scrollTop","shouldShowBottom","BottomLeft","BottomRight","BottomCenter","shouldForceRight","TopRight","shouldUseCenterAlignment","TopCenter","hasEnoughSpaceForCenter","window","innerWidth","isRight","newOffset","right","newX","handleReposition","addEventListener","removeEventListener","viewHeight","clientHeight","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","hide","show","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 Whether the popup should be open. This can be used to control the popup from outside.\n */\n shouldBeOpen?: boolean;\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 shouldBeOpen = false,\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(shouldBeOpen);\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({\n content,\n shouldPreventTextWrapping: !shouldUseChildrenWidth,\n });\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 const childrenCenterX = childrenLeft + childrenWidth / 2;\n const x = (childrenCenterX - left) / zoomX + element.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY + element.scrollTop - yOffset;\n\n const shouldShowBottom =\n pseudoHeight > childrenTop - 25 \|\|\n alignment === PopupAlignment.BottomLeft \|\|\n alignment === PopupAlignment.BottomRight \|\|\n alignment === PopupAlignment.BottomCenter;\n\n const shouldForceRight = shouldShowBottom\n ? alignment === PopupAlignment.BottomRight\n : alignment === PopupAlignment.TopRight;\n\n const shouldUseCenterAlignment = shouldShowBottom\n ? alignment === PopupAlignment.BottomCenter\n : alignment === PopupAlignment.TopCenter;\n\n const hasEnoughSpaceForCenter =\n pseudoWidth / 2 <= childrenCenterX - 25 &&\n pseudoWidth / 2 <= window.innerWidth - childrenCenterX - 25;\n\n if (shouldUseCenterAlignment && hasEnoughSpaceForCenter) {\n setInternalAlignment(\n shouldShowBottom ? PopupAlignment.BottomCenter : PopupAlignment.TopCenter,\n );\n setOffset(0);\n setCoordinates({\n x: x < 23 ? 23 : x,\n y,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenCenterX - 25 \|\| shouldForceRight) {\n setInternalAlignment(\n shouldShowBottom ? PopupAlignment.BottomRight : PopupAlignment.TopRight,\n );\n isRight = true;\n } else {\n setInternalAlignment(\n shouldShowBottom ? PopupAlignment.BottomLeft : PopupAlignment.TopLeft,\n );\n }\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 const right = window.innerWidth - childrenCenterX;\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 (shouldBeOpen) {\n handleShow();\n }\n }, [handleShow, shouldBeOpen]);\n\n const handleReposition = useCallback(() => {\n if (isOpen) {\n handleShow();\n }\n }, [handleShow, isOpen]);\n\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n\n window.addEventListener('resize', handleReposition);\n window.addEventListener('scroll', handleReposition, true);\n\n return () => {\n window.removeEventListener('resize', handleReposition);\n window.removeEventListener('scroll', handleReposition, true);\n };\n }, [handleReposition, isOpen]);\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 && !shouldBeOpen) {\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, shouldBeOpen]);\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/esm/components/popup/popup-content-wrapper/PopupContentWrapper.js CHANGED Viewed

@@ -17,13 +17,27 @@ const PopupContentWrapper = /*#__PURE__*/React.forwardRef(({
     colorMode
   } = useSite();
   const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;
+  const isBottomCenterAlignment = alignment === PopupAlignment.BottomCenter;
   const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;
+  const isTopCenterAlignment = alignment === PopupAlignment.TopCenter;
   const isTopRightAlignment = alignment === PopupAlignment.TopRight;
-  const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;
-  const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;
-  const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;
-  const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;
-  const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
+  const isCenterAlignment = isBottomCenterAlignment || isTopCenterAlignment;
+  const isTopAlignment = isTopLeftAlignment || isTopCenterAlignment || isTopRightAlignment;
+  let percentageOffsetX = 0;
+  if (isCenterAlignment) {
+    percentageOffsetX = -50;
+  } else if (isBottomLeftAlignment || isTopLeftAlignment) {
+    percentageOffsetX = -100;
+  }
+  const percentageOffsetY = isTopAlignment ? -100 : 0;
+  let anchorOffsetX = -21;
+  if (isCenterAlignment) {
+    anchorOffsetX = 0;
+  } else if (isBottomLeftAlignment || isTopLeftAlignment) {
+    anchorOffsetX = 21;
+  }
+  const anchorOffsetY = isTopAlignment ? -21 : 21;
+  const exitAndInitialY = isTopAlignment ? -16 : 16;
   return /*#__PURE__*/React.createElement(StyledMotionPopupContentWrapper, {
     animate: {
       opacity: 1,

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupContentWrapper.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","StyledPopupContentWrapperContent","PopupContentWrapper","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","duration","transformTemplate","className","$maxHeight","displayName"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ~~ReactNode,~~ type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n StyledMotionPopupContentWrapper,\n StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n alignment: PopupAlignment;\n children: ReactNode;\n offset: number;\n coordinates: PopupCoordinates;\n onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n shouldScrollWithContent: boolean;\n width: number;\n maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n (\n {\n alignment,\n children,\n coordinates,\n offset,\n width,\n onMouseLeave,\n shouldScrollWithContent,\n onMouseEnter,\n maxHeight,\n },\n ref,\n ) => {\n const { colorMode } = useSite();\n\n const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n const percentageOffsetX = isBottomLeftAlignment \|\| isTopLeftAlignment ? -100 ~~: 0~~;\n const percentageOffsetY = ~~isTopRightAlignment~~ ~~\|\| isTopLeftAlignment~~ ? -100 : 0;\n\n ~~const~~ anchorOffsetX = isBottomLeftAlignment \|\| isTopLeftAlignment ? 21 ~~: -~~21;\n const anchorOffsetY = ~~isTopRightAlignment~~ ~~\|\| isTopLeftAlignment~~ ? -21 : 21;\n\n const exitAndInitialY = ~~isTopLeftAlignment~~ ~~\|\| isTopRightAlignment~~ ? -16 : 16;\n\n return (\n <StyledMotionPopupContentWrapper\n animate={{ opacity: 1, y: 0 }}\n $colorMode={colorMode}\n $offset={offset}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n $shouldScrollWithContent={shouldScrollWithContent}\n ref={ref}\n data-ispopup=\"true\"\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={{ left: coordinates.x, top: coordinates.y, width }}\n transition={{ type: 'tween', duration: 0.15 }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n <StyledPopupContentWrapperContent\n className=\"chayns-scrollbar\"\n $maxHeight={maxHeight}\n >\n {children}\n </StyledPopupContentWrapperContent>\n </StyledMotionPopupContentWrapper>\n );\n },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SACIC,+BAA+B,EAC/BC,gCAAgC,QAC7B,8BAA8B;AAcrC,MAAMC,mBAAmB,gBAAGJ,KAAK,CAACK,UAAU,CACxC,CACI;EACIC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,uBAAuB;EACvBC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAU,CAAC,GAAGjB,OAAO,CAAC,CAAC;EAE/B,MAAMkB,qBAAqB,GAAGX,SAAS,KAAKL,cAAc,CAACiB,UAAU;EACrE,MAAMC,~~kBAAkB~~,GAAGb,SAAS,KAAKL,cAAc,CAACmB,OAAO;EAC/D,MAAMC,mBAAmB,~~GAAGf~~,SAAS,KAAKL,cAAc,~~CAACqB~~,QAAQ;~~EAEjE~~,MAAMC,iBAAiB,~~GAAGN~~,~~qBAAqB~~,~~IAAIE~~,kBAAkB,GAAG,CAAC,~~GAAG~~,GAAG,CAAC;~~EAChF~~,~~MAAMK~~,~~iBAAiB~~,~~GAAGH~~,~~mBAAmB~~,~~IAAIF~~,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;~~EAE9E~~,~~MAAMM~~,aAAa,~~GAAGR~~,~~qBAAqB~~,~~IAAIE~~,~~kBAAkB~~,~~GAAG~~,EAAE,GAAG,CAAC,EAAE;~~EAC5E~~,~~MAAMO,~~aAAa,~~GAAGL~~,~~mBAAmB~~,~~IAAIF~~,~~kBAAkB~~,GAAG,CAAC,EAAE,GAAG,EAAE;~~EAE1E~~,~~MAAMQ~~,eAAe,~~GAAGR~~,~~kBAAkB~~,~~IAAIE,mBAAmB,~~GAAG,CAAC,EAAE,GAAG,EAAE;~~EAE5E~~,~~oBACIrB~~,KAAA,~~CAAA4B~~,aAAA,~~CAAC1B~~,+BAA+B;~~IAC5B2B~~,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,~~EAAEhB~~,SAAU;~~IACtBiB~~,OAAO,~~EAAExB~~,MAAO;~~IAChByB~~,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CS,SAAS,~~EAAE9B~~,SAAU;~~IACrB+B~~,wBAAwB,~~EAAEzB~~,uBAAwB;IAClDG,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBF,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;~~IAC3B2B~~,KAAK,EAAE;MAAEC,IAAI,~~EAAE/B~~,WAAW,~~CAACgC~~,CAAC;MAAEC,GAAG,~~EAAEjC~~,WAAW,~~CAACuB~~,CAAC;~~MAAErB~~;IAAM,CAAE;~~IAC1DgC~~,UAAU,EAAE;MAAEC,IAAI,EAAE,OAAO;MAAEC,QAAQ,EAAE;IAAK,CAAE;IAC9CC,iBAAiB,EAAEA,CAAC;MAAEd,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCR,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCK,CAAC;AAClC;EAAkB,~~gBAEF/B~~,KAAA,~~CAAA4B~~,aAAA,~~CAACzB~~,gCAAgC;~~IAC7B2C~~,SAAS,EAAC,kBAAkB;IAC5BC,UAAU,~~EAAEjC~~;EAAU,GAErBP,QAC6B,CACL,CAAC;AAE1C,CACJ,CAAC;AAEDH,mBAAmB,~~CAAC4C~~,WAAW,GAAG,cAAc;AAEhD,~~eAAe5C~~,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"PopupContentWrapper.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","StyledPopupContentWrapperContent","PopupContentWrapper","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","isBottomLeftAlignment","BottomLeft","isBottomCenterAlignment","BottomCenter","isTopLeftAlignment","TopLeft","isTopCenterAlignment","TopCenter","isTopRightAlignment","TopRight","isCenterAlignment","isTopAlignment","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","duration","transformTemplate","className","$maxHeight","displayName"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { type MouseEventHandler, ReactNode } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n StyledMotionPopupContentWrapper,\n StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n alignment: PopupAlignment;\n children: ReactNode;\n offset: number;\n coordinates: PopupCoordinates;\n onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n shouldScrollWithContent: boolean;\n width: number;\n maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n (\n {\n alignment,\n children,\n coordinates,\n offset,\n width,\n onMouseLeave,\n shouldScrollWithContent,\n onMouseEnter,\n maxHeight,\n },\n ref,\n ) => {\n const { colorMode } = useSite();\n\n const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n const isBottomCenterAlignment = alignment === PopupAlignment.BottomCenter;\n const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n const isTopCenterAlignment = alignment === PopupAlignment.TopCenter;\n const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n const isCenterAlignment = isBottomCenterAlignment \|\| isTopCenterAlignment;\n const isTopAlignment = isTopLeftAlignment \|\| isTopCenterAlignment \|\| isTopRightAlignment;\n\n let percentageOffsetX = 0;\n\n if (isCenterAlignment) {\n percentageOffsetX = -50;\n } else if (isBottomLeftAlignment \|\| isTopLeftAlignment) {\n percentageOffsetX = -100;\n }\n\n const percentageOffsetY = isTopAlignment ? -100 : 0;\n\n let anchorOffsetX = -21;\n\n if (isCenterAlignment) {\n anchorOffsetX = 0;\n } else if (isBottomLeftAlignment \|\| isTopLeftAlignment) {\n anchorOffsetX = 21;\n }\n\n const anchorOffsetY = isTopAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopAlignment ? -16 : 16;\n\n return (\n <StyledMotionPopupContentWrapper\n animate={{ opacity: 1, y: 0 }}\n $colorMode={colorMode}\n $offset={offset}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n $shouldScrollWithContent={shouldScrollWithContent}\n ref={ref}\n data-ispopup=\"true\"\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={{ left: coordinates.x, top: coordinates.y, width }}\n transition={{ type: 'tween', duration: 0.15 }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n <StyledPopupContentWrapperContent\n className=\"chayns-scrollbar\"\n $maxHeight={maxHeight}\n >\n {children}\n </StyledPopupContentWrapperContent>\n </StyledMotionPopupContentWrapper>\n );\n },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js CHANGED Viewed

@@ -44,6 +44,18 @@ export const StyledMotionPopupContentWrapper = styled(motion.div)`
                         right: ${13 + $offset}px;
                         transform: rotate(225deg);
                     `;
+    case PopupAlignment.TopCenter:
+      return css`
+                        bottom: -7px;
+                        left: calc(50% - 7px);
+                        transform: rotate(45deg);
+                    `;
+    case PopupAlignment.BottomCenter:
+      return css`
+                        top: -7px;
+                        left: calc(50% - 7px);
+                        transform: rotate(225deg);
+                    `;
     case PopupAlignment.TopRight:
       return css`
                         transform: rotate(45deg);

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupContentWrapper.styles.js","names":["motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","theme","text","$shouldScrollWithContent","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n $position: PopupAlignment;\n $colorMode: ColorMode;\n $offset: number;\n $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n z-index: 100;\n position: ${({ $shouldScrollWithContent }) =>\n $shouldScrollWithContent ? 'absolute' : 'fixed'};\n pointer-events: all;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position, $offset }) => {\n switch ($position) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: ${13 + $offset}px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: ${13 + $offset}px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: ${13 + $offset}px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: ${13 + $offset}px;\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n border-radius: 3px;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n height: 100%;\n width: 100%;\n\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${$maxHeight}px;\n overflow-y: auto;\n overflow-x: hidden;\n `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AAUrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKN,cAAc,CAACQ,OAAO;MACvB,OAAOT,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACS,UAAU;MAC1B,OAAOV,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACU,QAAQ;MACxB,~~OAAOX~~,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL,KAAKP,cAAc,~~CAACW~~,WAAW;MAC3B,~~OAAOZ~~,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL;MACI,~~OAAOK~~,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,gCAAgC,~~GAAGf~~,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,MAAM,CAAC;~~EAAEY~~;AAAW,CAAC,KACbA,UAAU,~~IACVf~~,GAAG;AACX,~~0BAA0Be~~,UAAU;AACpC;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"PopupContentWrapper.styles.js","names":["motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","theme","text","$shouldScrollWithContent","$position","$offset","TopLeft","BottomLeft","TopCenter","BottomCenter","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n $position: PopupAlignment;\n $colorMode: ColorMode;\n $offset: number;\n $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n z-index: 100;\n position: ${({ $shouldScrollWithContent }) =>\n $shouldScrollWithContent ? 'absolute' : 'fixed'};\n pointer-events: all;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position, $offset }) => {\n switch ($position) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: ${13 + $offset}px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: ${13 + $offset}px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopCenter:\n return css`\n bottom: -7px;\n left: calc(50% - 7px);\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomCenter:\n return css`\n top: -7px;\n left: calc(50% - 7px);\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: ${13 + $offset}px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: ${13 + $offset}px;\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n border-radius: 3px;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n height: 100%;\n width: 100%;\n\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${$maxHeight}px;\n overflow-y: auto;\n overflow-x: hidden;\n `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AAUrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKN,cAAc,CAACQ,OAAO;MACvB,OAAOT,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACS,UAAU;MAC1B,OAAOV,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACU,SAAS;MACzB,OAAOX,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACW,YAAY;MAC5B,OAAOZ,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACY,QAAQ;MACxB,OAAOb,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL,KAAKP,cAAc,CAACa,WAAW;MAC3B,OAAOd,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOO,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,gCAAgC,GAAGjB,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,MAAM,CAAC;EAAEc;AAAW,CAAC,KACbA,UAAU,IACVjB,GAAG;AACX,0BAA0BiB,UAAU;AACpC;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.js CHANGED Viewed

@@ -181,7 +181,8 @@ const ProgressBar = t0 => {
         onHide: () => popupRef.current?.show(),
         container: hostContainer ?? undefined,
         shouldUseChildrenWidth: true,
-        shouldBeOpen: true
+        shouldBeOpen: true,
+        yOffset: -12
       })))), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
         $shouldShowLabelInline: shouldShowLabelInline,
         $primaryColor: colors?.primaryTextColor,

package/lib/esm/components/progress-bar/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","names":["React","useContext","useEffect","useMemo","useRef","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","coordinates","setCoordinates","popupRef","hostContainer","setHostContainer","theme","t4","bb0","t","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","getBoundingClientRect","t7","t8","current","show","t9","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","thumbLabelColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","ref","instance","style","border","step","onUpdate","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","container","shouldUseChildrenWidth","shouldBeOpen","$primaryColor","$secondaryColor","progressBar","t10","t11","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n thumbLabelColor?: string;\n}\n\nexport type ProgressBarProps = {\n /*\n The colors of the ProgressBar.\n /\n colors?: Colors;\n /\n The label that should be displayed under the progressbar.\n /\n label?: string;\n /\n The percentage of the progress. Number between 0 and 100.\n /\n percentage?: Range<0, 101>;\n /\n Whether the progress should be hide and just display the label.\n /\n shouldHideProgress?: boolean;\n /\n Whether the label should be displayed inside the ProgressBar.\n /\n shouldShowLabelInline?: boolean;\n /\n Visual marked steps.\n /\n steps?: Range<0, 101>[];\n /\n The label that should be displayed on the thumb of the progress bar.\n /\n thumbLabel?: React.ReactNode;\n /\n Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n /\n showShine?: boolean;\n /\n The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n /\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef \| null>(null);\n const [hostContainer, setHostContainer] = useState<HTMLDivElement \| null>(null);\n\n const theme = useContext(ThemeContext) as Theme \| undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine \|\| percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key /\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) index}\n />\n ));\n }, [percentage, showShine]);\n\n useEffect(() => {\n if (thumbLabel) setCoordinates(hostContainer?.getBoundingClientRect());\n }, [hostContainer, thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div ref={(instance) => setHostContainer(instance)} style={{ border: 0 }}>\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $height={height}\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.thumbLabelColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainer ?? undefined}\n shouldUseChildrenWidth\n shouldBeOpen\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n colors?.thumbLabelColor,\n height,\n hostContainer,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ProgressBar.js","names":["React","useContext","useEffect","useMemo","useRef","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","coordinates","setCoordinates","popupRef","hostContainer","setHostContainer","theme","t4","bb0","t","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","getBoundingClientRect","t7","t8","current","show","t9","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","thumbLabelColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","ref","instance","style","border","step","onUpdate","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","container","shouldUseChildrenWidth","shouldBeOpen","yOffset","$primaryColor","$secondaryColor","progressBar","t10","t11","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n thumbLabelColor?: string;\n}\n\nexport type ProgressBarProps = {\n /*\n The colors of the ProgressBar.\n /\n colors?: Colors;\n /\n The label that should be displayed under the progressbar.\n /\n label?: string;\n /\n The percentage of the progress. Number between 0 and 100.\n /\n percentage?: Range<0, 101>;\n /\n Whether the progress should be hide and just display the label.\n /\n shouldHideProgress?: boolean;\n /\n Whether the label should be displayed inside the ProgressBar.\n /\n shouldShowLabelInline?: boolean;\n /\n Visual marked steps.\n /\n steps?: Range<0, 101>[];\n /\n The label that should be displayed on the thumb of the progress bar.\n /\n thumbLabel?: React.ReactNode;\n /\n Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n /\n showShine?: boolean;\n /\n The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n /\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef \| null>(null);\n const [hostContainer, setHostContainer] = useState<HTMLDivElement \| null>(null);\n\n const theme = useContext(ThemeContext) as Theme \| undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine \|\| percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key /\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) index}\n />\n ));\n }, [percentage, showShine]);\n\n useEffect(() => {\n if (thumbLabel) setCoordinates(hostContainer?.getBoundingClientRect());\n }, [hostContainer, thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div ref={(instance) => setHostContainer(instance)} style={{ border: 0 }}>\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $height={height}\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.thumbLabelColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainer ?? undefined}\n shouldUseChildrenWidth\n shouldBeOpen\n yOffset={-12}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n colors?.thumbLabelColor,\n height,\n hostContainer,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.styles.js CHANGED Viewed

@@ -130,6 +130,7 @@ export const StyledProgressBarStep = styled.div`
 export const StyledProgressBarThumbLabel = styled.div`
     position: absolute;
     right: 0;
+    top: 0;
     // revert till POPUPALIGNMENT respect if top or bottom
     // height: 100%;
 `;

package/lib/esm/components/progress-bar/ProgressBar.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }> & {\n $height?: number;\n $isBig?: boolean;\n};\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n // revert till POPUPALIGNMENT respect if top or bottom\n // height: 100%;\n`;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }> & {\n $height?: number;\n $isBig?: boolean;\n};\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n top: 0;\n // revert till POPUPALIGNMENT respect if top or bottom\n // height: 100%;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { ReactNode, type MouseEventHandler } from 'react';
+import React, { type MouseEventHandler, ReactNode } from 'react';
 import { PopupAlignment, PopupCoordinates } from '../../../types/popup';
 type PopupContentProps = {
     alignment: PopupAlignment;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.31",
+    "version": "5.0.33",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b149134c58e8b48366e64465b44fb0fa4033c819"
+    "gitHead": "5e41d9af042b3c272c8c08b67a9c9bf4911902f6"
 }