@chayns-components/core 5.0.0-beta.48 → 5.0.0-beta.482

package/lib/components/number-input/NumberInput.js

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react';
+import Input from '../input/Input';
+import { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';
+import { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';
+const NumberInput = _ref => {
+  let {
+    isDecimalInput,
+    isMoneyInput,
+    isTimeInput,
+    maxNumber = Infinity,
+    value,
+    placeholder,
+    onBlur,
+    isDisabled,
+    onChange,
+    shouldShowOnlyBottomBorder,
+    minNumber = -Infinity
+  } = _ref;
+  // the plainText will be shown in the input, when it is in focus
+  const [plainText, setPlainText] = useState('');
+  // the formattedValue will be shown in the input, when it is not in focus
+  const [formattedValue, setFormattedValue] = useState('');
+  const [hasFocus, setHasFocus] = useState(false);
+  const [isValueInvalid, setIsValueInvalid] = useState(false);
+  const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);
+  const onLocalChange = event => {
+    const newValue = event.target.value;
+    if (newValue.replaceAll(':', '').length > 4) {
+      return;
+    }
+    const sanitizedValueString = newValue
+    // Removes everything except numbers, commas and points
+    .replace(NUMBER_CLEAR_REGEX, '');
+    const valueToCheck = sanitizedValueString.replaceAll(',', '.');
+    if (!isValidString({
+      string: valueToCheck,
+      isMoneyInput,
+      isDecimalInput,
+      isTimeInput
+    })) {
+      return;
+    }
+    setPlainText(sanitizedValueString.replaceAll('.', ','));
+    if (typeof onChange === 'function') {
+      onChange(sanitizedValueString.replaceAll('.', ','));
+    }
+  };
+  const onLocalBlur = () => {
+    const sanitizedValue = plainText.length === 0 ? '0' : plainText;
+    let isInvalid = false;
+    let parsedNumber = null;
+    if (!isTimeInput) {
+      parsedNumber = parseFloatWithDecimals({
+        stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),
+        decimals: isMoneyInput ? 2 : undefined
+      });
+      if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
+        isInvalid = true;
+      }
+      setIsValueInvalid(isInvalid);
+    }
+    const newStringValue = plainText.length === 0 ? '' : formateNumber({
+      number: isTimeInput ? sanitizedValue : parsedNumber,
+      isMoneyInput,
+      isTimeInput
+    });
+    setFormattedValue(newStringValue);
+    setPlainText(newStringValue.replaceAll('.', ''));
+    setHasFocus(false);
+    if (typeof onChange === 'function') {
+      onChange(newStringValue.replaceAll('.', ''));
+    }
+    if (typeof onBlur === 'function') {
+      if (isTimeInput) {
+        onBlur(newStringValue, isInvalid);
+      } else {
+        onBlur(parsedNumber === 0 ? null : parsedNumber, isInvalid);
+      }
+    }
+  };
+  const onLocalFocus = () => {
+    // formattedValue will be a number string with german number format (e.g. 1.000,00)
+    // It will remove all dots, so that the user can type in the number
+    setPlainText(formattedValue.replaceAll('.', ''));
+
+    // This will update the external state
+    if (typeof onChange === 'function') {
+      onChange(formattedValue.replaceAll('.', ''));
+    }
+    setIsValueInvalid(false);
+    setHasFocus(true);
+  };
+
+  // updates the formattedValue, when the value changes
+  useEffect(() => {
+    let parsedNumber = null;
+    if (!isTimeInput) {
+      parsedNumber = parseFloatWithDecimals({
+        stringValue: plainText.replace(',', '.').replaceAll(':', ''),
+        decimals: isMoneyInput ? 2 : undefined
+      });
+
+      // checks, if a given number is invalid, if the input is not in focus
+      if (!hasFocus) {
+        setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);
+      }
+    }
+    setFormattedValue(plainText.length === 0 ? '' : formateNumber({
+      number: isTimeInput ? plainText : parsedNumber,
+      isMoneyInput,
+      isTimeInput
+    }));
+  }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);
+  useEffect(() => {
+    if (typeof value === 'string') {
+      setPlainText(value);
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement(Input, {
+    shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    inputMode: "decimal",
+    onChange: onLocalChange,
+    value: hasFocus ? plainText : formattedValue,
+    placeholder: localPlaceholder,
+    onBlur: onLocalBlur,
+    onFocus: onLocalFocus,
+    isDisabled: isDisabled,
+    isInvalid: isValueInvalid
+  });
+};
+NumberInput.displayName = 'NumberInput';
+export default NumberInput;
+//# sourceMappingURL=NumberInput.js.map

package/lib/components/number-input/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","Input","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","replaceAll","length","sanitizedValueString","replace","valueToCheck","string","onLocalBlur","sanitizedValue","isInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","displayName"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\n\nexport type NumberInputProps = {\n    /**\n     * Applies rules for decimal input.\n     * Enables the user to input one zero as number before the comma\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one zero before the comma\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Whether the value should be formatted as a time.\n     */\n    isTimeInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * Limits the number to this value\n     */\n    minNumber?: number;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n    /**\n     * Callback function that is called when the input changes\n     * It will pass the text from the input\n     */\n    onChange?: (newValue: string) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * The value, that should be displayed in the input, when it is in focus.\n     * You can also pass a stringified number as default value.\n     * NOTE: If you pass a stringified number, it will be formatted to the selected format\n     */\n    value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    maxNumber = Infinity,\n    value,\n    placeholder,\n    onBlur,\n    isDisabled,\n    onChange,\n    shouldShowOnlyBottomBorder,\n    minNumber = -Infinity,\n}) => {\n    // the plainText will be shown in the input, when it is in focus\n    const [plainText, setPlainText] = useState<string>('');\n    // the formattedValue will be shown in the input, when it is not in focus\n    const [formattedValue, setFormattedValue] = useState<string>('');\n    const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        if (newValue.replaceAll(':', '').length > 4) {\n            return;\n        }\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n        if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n            return;\n        }\n\n        setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n        if (typeof onChange === 'function') {\n            onChange(sanitizedValueString.replaceAll('.', ','));\n        }\n    };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n        let isInvalid = false;\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n                isInvalid = true;\n            }\n\n            setIsValueInvalid(isInvalid);\n        }\n\n        const newStringValue =\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? sanitizedValue : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  });\n\n        setFormattedValue(newStringValue);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function') {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            if (isTimeInput) {\n                onBlur(newStringValue, isInvalid);\n            } else {\n                onBlur(parsedNumber === 0 ? null : parsedNumber, isInvalid);\n            }\n        }\n    };\n\n    const onLocalFocus = () => {\n        // formattedValue will be a number string with german number format (e.g. 1.000,00)\n        // It will remove all dots, so that the user can type in the number\n        setPlainText(formattedValue.replaceAll('.', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function') {\n            onChange(formattedValue.replaceAll('.', ''));\n        }\n\n        setIsValueInvalid(false);\n        setHasFocus(true);\n    };\n\n    // updates the formattedValue, when the value changes\n    useEffect(() => {\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            // checks, if a given number is invalid, if the input is not in focus\n            if (!hasFocus) {\n                setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n            }\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? plainText : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  }),\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value);\n        }\n    }, [value]);\n\n    return (\n        <Input\n            shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={hasFocus ? plainText : formattedValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onLocalFocus}\n            isDisabled={isDisabled}\n            isInvalid={isValueInvalid}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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"}

package/lib/components/popup/Popup.d.ts

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { PopupRef } from '../../types/popup';
+export type PopupProps = {
+    /**
+     * The element over which the content of the `ContextMenu` should be displayed.
+     */
+    children?: ReactNode;
+    /**
+     * The content that should be displayed inside the popup.
+     */
+    content: ReactNode;
+    /**
+     * Function to be executed when the content of the Context menu has been hidden.
+     */
+    onHide?: VoidFunction;
+    /**
+     * Function to be executed when the content of the Context menu has been shown.
+     */
+    onShow?: VoidFunction;
+    /**
+     * Whether the popup should be opened on hover. If not, the popup will be opened on click.
+     */
+    shouldShowOnHover?: boolean;
+    /**
+     * The Y offset of the popup to the children.
+     */
+    yOffset?: number;
+};
+declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupRef>>;
+export default Popup;

package/lib/components/popup/Popup.js

@@ -0,0 +1,150 @@
+import { getWindowMetrics } from 'chayns-api';
+import { AnimatePresence } from 'framer-motion';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useUuid } from '../../hooks/uuid';
+import { PopupAlignment } from '../../types/popup';
+import PopupContent from './popup-content/PopupContent';
+import { StyledPopup, StyledPopupPseudo } from './Popup.styles';
+const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    content,
+    onShow,
+    onHide,
+    children,
+    shouldShowOnHover = false,
+    yOffset = 0
+  } = _ref;
+  const [coordinates, setCoordinates] = useState({
+    x: 0,
+    y: 0
+  });
+  const container = document.querySelector('.tapp') || document.body;
+  const [alignment, setAlignment] = useState(PopupAlignment.TopLeft);
+  const [isOpen, setIsOpen] = useState(false);
+  const [portal, setPortal] = useState();
+  const [menuHeight, setMenuHeight] = useState(0);
+  const uuid = useUuid();
+
+  // ToDo: Replace with hook if new chayns api is ready
+  const popupContentRef = useRef(null);
+  const popupPseudoContentRef = useRef(null);
+  const popupRef = useRef(null);
+  const handleShow = useCallback(() => {
+    if (popupRef.current && popupPseudoContentRef.current) {
+      const {
+        height: pseudoHeight,
+        width: pseudoWidth
+      } = popupPseudoContentRef.current.getBoundingClientRect();
+      const {
+        height: childrenHeight,
+        left: childrenLeft,
+        top: childrenTop,
+        width: childrenWidth
+      } = popupRef.current.getBoundingClientRect();
+      if (pseudoHeight > childrenTop - 25) {
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(PopupAlignment.BottomRight);
+        } else {
+          setAlignment(PopupAlignment.BottomLeft);
+        }
+        setCoordinates({
+          x: childrenLeft + childrenWidth / 2,
+          y: childrenTop + childrenHeight + yOffset
+        });
+      } else {
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(PopupAlignment.TopRight);
+        } else {
+          setAlignment(PopupAlignment.TopLeft);
+        }
+        setCoordinates({
+          x: childrenLeft + childrenWidth / 2,
+          y: childrenTop - yOffset
+        });
+      }
+      setIsOpen(true);
+    }
+  }, [yOffset]);
+  const handleChildrenClick = () => {
+    if (!shouldShowOnHover) {
+      handleShow();
+    }
+  };
+  const handleHide = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleMouseEnter = () => {
+    if (shouldShowOnHover) {
+      handleShow();
+    }
+  };
+  const handleMouseLeave = useCallback(event => {
+    if (shouldShowOnHover) {
+      if (event.currentTarget.dataset.ispopup === 'true') {
+        handleHide();
+      }
+      if (event.relatedTarget && (event.relatedTarget === popupContentRef.current || popupContentRef.current?.contains(event.relatedTarget))) {
+        return;
+      }
+      handleHide();
+    }
+  }, [handleHide, shouldShowOnHover]);
+  const handleDocumentClick = useCallback(event => {
+    if (!popupContentRef.current?.contains(event.target) && !shouldShowOnHover) {
+      event.preventDefault();
+      event.stopPropagation();
+      handleHide();
+    }
+  }, [handleHide, shouldShowOnHover]);
+  useImperativeHandle(ref, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+  useEffect(() => {
+    void getWindowMetrics().then(result => {
+      if (result.topBarHeight) {
+        setMenuHeight(result.topBarHeight);
+      }
+    });
+  }, []);
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('click', handleDocumentClick, true);
+      window.addEventListener('blur', handleHide);
+      if (typeof onShow === 'function') {
+        onShow();
+      }
+    } else if (typeof onHide === 'function') {
+      onHide();
+    }
+    return () => {
+      document.removeEventListener('click', handleDocumentClick, true);
+      window.removeEventListener('blur', handleHide);
+    };
+  }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);
+  useEffect(() => {
+    setPortal(() => /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AnimatePresence, {
+      initial: false
+    }, isOpen && /*#__PURE__*/React.createElement(PopupContent, {
+      coordinates: coordinates,
+      content: content,
+      key: `tooltip_${uuid}`,
+      alignment: alignment,
+      ref: popupContentRef,
+      onMouseLeave: handleMouseLeave
+    })), container));
+  }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopupPseudo, {
+    ref: popupPseudoContentRef,
+    $menuHeight: menuHeight
+  }, content), /*#__PURE__*/React.createElement(StyledPopup, {
+    ref: popupRef,
+    onClick: handleChildrenClick,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter
+  }, children), portal);
+});
+Popup.displayName = 'Popup';
+export default Popup;
+//# sourceMappingURL=Popup.js.map

package/lib/components/popup/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","PopupContent","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","container","document","querySelector","body","alignment","setAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","event","currentTarget","dataset","ispopup","relatedTarget","contains","handleDocumentClick","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","window","removeEventListener","createElement","initial","key","onMouseLeave","Fragment","$menuHeight","onClick","onMouseEnter","displayName"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\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 PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const container = document.querySelector('.tapp') || document.body;\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop + childrenHeight + yOffset,\n                    });\n                } else {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = () => {\n            if (shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleMouseLeave = useCallback(\n            (event: MouseEvent) => {\n                if (shouldShowOnHover) {\n                    if ((event.currentTarget as HTMLElement).dataset.ispopup === 'true') {\n                        handleHide();\n                    }\n\n                    if (\n                        event.relatedTarget &&\n                        (event.relatedTarget === popupContentRef.current ||\n                            popupContentRef.current?.contains(event.relatedTarget as Node))\n                    ) {\n                        return;\n                    }\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContent\n                                coordinates={coordinates}\n                                content={content}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);\n\n        return (\n            <>\n                <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                    {content}\n                </StyledPopupPseudo>\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\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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"}

package/lib/components/popup/Popup.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledPopup: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const StyledPopupPseudo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $menuHeight: number;
+}>>;

package/lib/components/popup/Popup.styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const StyledPopup = styled.span`
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    width: fit-content;
+    height: fit-content;
+`;
+export const StyledPopupPseudo = styled.div`
+    top: ${_ref => {
+  let {
+    $menuHeight
+  } = _ref;
+  return `${$menuHeight - 0}px`;
+}};
+    left: 0;
+    pointer-events: none;
+    visibility: hidden;
+    position: absolute;
+`;
+//# sourceMappingURL=Popup.styles.js.map

package/lib/components/popup/Popup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.styles.js","names":["styled","StyledPopup","span","StyledPopupPseudo","div","_ref","$menuHeight"],"sources":["../../../src/components/popup/Popup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledPopup = styled.span`\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    width: fit-content;\n    height: fit-content;\n`;\n\nexport const StyledPopupPseudo = styled.div<{\n    $menuHeight: number;\n}>`\n    top: ${({ $menuHeight }) => `${$menuHeight - 0}px`};\n    left: 0;\n    pointer-events: none;\n    visibility: hidden;\n    position: absolute;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAK;AACvC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAErC;AACH,WAAWC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAM,GAAEC,WAAW,GAAG,CAAE,IAAG;AAAA,CAAC;AACvD;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/popup/popup-content/PopupContent.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode, type MouseEventHandler } from 'react';
+import { PopupAlignment, PopupCoordinates } from '../../../types/popup';
+type PopupContentProps = {
+    alignment: PopupAlignment;
+    coordinates: PopupCoordinates;
+    content: ReactNode;
+    onMouseLeave: MouseEventHandler<HTMLSpanElement>;
+};
+declare const PopupContent: React.ForwardRefExoticComponent<PopupContentProps & React.RefAttributes<HTMLDivElement>>;
+export default PopupContent;

package/lib/components/popup/popup-content/PopupContent.js

@@ -0,0 +1,64 @@
+import { useSite } from 'chayns-api';
+import React from 'react';
+import { PopupAlignment } from '../../../types/popup';
+import { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';
+const PopupContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    alignment,
+    coordinates,
+    content,
+    onMouseLeave
+  } = _ref;
+  const {
+    colorMode
+  } = useSite();
+  const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;
+  const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;
+  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;
+  return /*#__PURE__*/React.createElement(StyledMotionPopupContent, {
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    $colorMode: colorMode,
+    exit: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    initial: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    $position: alignment,
+    ref: ref,
+    "data-ispopup": "true",
+    onMouseLeave: onMouseLeave,
+    style: {
+      left: coordinates.x,
+      top: coordinates.y
+    },
+    transition: {
+      type: 'tween'
+    },
+    transformTemplate: _ref2 => {
+      let {
+        y = '0px'
+      } = _ref2;
+      return `
+                    translateX(${percentageOffsetX}%)
+                    translateY(${percentageOffsetY}%)
+                    translateX(${anchorOffsetX}px)
+                    translateY(${anchorOffsetY}px)
+                    translateY(${y})
+                `;
+    }
+  }, /*#__PURE__*/React.createElement(StyledPopupContentInner, null, content));
+});
+PopupContent.displayName = 'PopupContent';
+export default PopupContent;
+//# sourceMappingURL=PopupContent.js.map

package/lib/components/popup/popup-content/PopupContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContent","StyledPopupContentInner","PopupContent","forwardRef","_ref","ref","alignment","coordinates","content","onMouseLeave","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","displayName"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    coordinates: PopupCoordinates;\n    content: ReactNode;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, coordinates, content, onMouseLeave }, ref) => {\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            <StyledMotionPopupContent\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentInner>{content}</StyledPopupContentInner>\n            </StyledMotionPopupContent>\n        );\n    },\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SAASC,wBAAwB,EAAEC,uBAAuB,QAAQ,uBAAuB;AASzF,MAAMC,YAAY,gBAAGJ,KAAK,CAACK,UAAU,CACjC,CAAAC,IAAA,EAAoDC,GAAG,KAAK;EAAA,IAA3D;IAAEC,SAAS;IAAEC,WAAW;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAL,IAAA;EAC9C,MAAM;IAAEM;EAAU,CAAC,GAAGb,OAAO,CAAC,CAAC;EAE/B,MAAMc,qBAAqB,GAAGL,SAAS,KAAKP,cAAc,CAACa,UAAU;EACrE,MAAMC,kBAAkB,GAAGP,SAAS,KAAKP,cAAc,CAACe,OAAO;EAC/D,MAAMC,mBAAmB,GAAGT,SAAS,KAAKP,cAAc,CAACiB,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,oBACIjB,KAAA,CAAAwB,aAAA,CAACtB,wBAAwB;IACrBuB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CQ,SAAS,EAAEvB,SAAU;IACrBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBI,YAAY,EAAEA,YAAa;IAC3BqB,KAAK,EAAE;MAAEC,IAAI,EAAExB,WAAW,CAACyB,CAAC;MAAEC,GAAG,EAAE1B,WAAW,CAACkB;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEZ,CAAC,GAAG;MAAM,CAAC,GAAAY,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCK,CAAE;AACnC,iBAAiB;IAAA;EAAC,gBAEF3B,KAAA,CAAAwB,aAAA,CAACrB,uBAAuB,QAAEO,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDN,YAAY,CAACoC,WAAW,GAAG,cAAc;AAEzC,eAAepC,YAAY"}