@chayns-components/core 5.0.0-beta.174 → 5.0.0-beta.176

package/lib/components/combobox/ComboBox.js

@@ -91,40 +91,50 @@ const ComboBox = _ref => {
     return items;
   }, [handleSetSelectedItem, list]);
 
+  /**
+   * This function resets the placeholder
+   */
+  const placeholderText = (0, _react.useMemo)(() => {
+    let text = placeholder;
+    if (!selectedItem) {
+      text = placeholder;
+    } else if (item !== null && item !== void 0 && item.text) {
+      text = item.text;
+    }
+    return text;
+  }, [item === null || item === void 0 ? void 0 : item.text, placeholder, selectedItem]);
+
   /**
    * This function opens the content of the combobox
    */
   const handleHeaderClick = () => {
     setIsAnimating(prevState => !prevState);
   };
-  return (0, _react.useMemo)(() => {
-    var _item$text;
-    return /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
-      ref: ref
-    }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
-      minWidth: minWidth,
-      onClick: handleHeaderClick,
-      isOpen: isAnimating
-    }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, null, (_item$text = item === null || item === void 0 ? void 0 : item.text) !== null && _item$text !== void 0 ? _item$text : placeholder), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      icons: ['fa fa-chevron-down']
-    }))), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
-      height: height,
-      initial: {
-        height: 0,
-        opacity: 0
-      },
-      animate: isAnimating ? {
-        height: 'fit-content',
-        opacity: 1
-      } : {
-        height: 0,
-        opacity: 0
-      },
-      transition: {
-        duration: 0.2
-      }
-    }, content));
-  }, [content, height, isAnimating, item === null || item === void 0 ? void 0 : item.text, minWidth, placeholder]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
+    minWidth: minWidth,
+    onClick: handleHeaderClick,
+    isOpen: isAnimating
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, null, placeholderText), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-chevron-down']
+  }))), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
+    height: height,
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    animate: isAnimating ? {
+      height: 'fit-content',
+      opacity: 1
+    } : {
+      height: 0,
+      opacity: 0
+    },
+    transition: {
+      duration: 0.2
+    }
+  }, content)), [content, height, isAnimating, item === null || item === void 0 ? void 0 : item.text, minWidth, placeholder]);
 };
 ComboBox.displayName = 'ComboBox';
 var _default = ComboBox;

package/lib/components/combobox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_calculate","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ComboBox","_ref","placeholder","list","onSelect","selectedItem","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","useRef","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","textArray","map","_ref2","text","calculateContentHeight","push","calculateContentWidth","content","useMemo","items","forEach","_ref3","value","createElement","handleHeaderClick","prevState","_item$text","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxIconWrapper","icons","StyledMotionComboBoxBody","initial","opacity","animate","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({ placeholder, list, onSelect, selectedItem }) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref]\n    );\n\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, ref]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect]\n    );\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n\n        textArray.push(placeholder);\n\n        setMinWidth(calculateContentWidth(textArray) + 45);\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        if (selectedItem) {\n            handleSetSelectedItem(selectedItem);\n        }\n    }, [handleSetSelectedItem, selectedItem]);\n\n    /**\n     * Function that renders the combobox items\n     */\n    const content = useMemo(() => {\n        const items: ReactNode[] = [];\n\n        list.forEach(({ text, value }) => {\n            items.push(\n                <ComboBoxItem\n                    key={value}\n                    value={value}\n                    text={text}\n                    onSelect={handleSetSelectedItem}\n                />\n            );\n        });\n\n        return items;\n    }, [handleSetSelectedItem, list]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = () => {\n        setIsAnimating((prevState) => !prevState);\n    };\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                <StyledComboBoxHeader\n                    minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    isOpen={isAnimating}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {item?.text ?? placeholder}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                <StyledMotionComboBoxBody\n                    height={height}\n                    initial={{ height: 0, opacity: 0 }}\n                    animate={\n                        isAnimating\n                            ? { height: 'fit-content', opacity: 1 }\n                            : { height: 0, opacity: 0 }\n                    }\n                    transition={{\n                        duration: 0.2,\n                    }}\n                >\n                    {content}\n                </StyledMotionComboBoxBody>\n            </StyledComboBox>\n        ),\n        [content, height, isAnimating, item?.text, minWidth, placeholder]\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_calculate","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ComboBox","_ref","placeholder","list","onSelect","selectedItem","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","useRef","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","textArray","map","_ref2","text","calculateContentHeight","push","calculateContentWidth","content","useMemo","items","forEach","_ref3","value","createElement","placeholderText","handleHeaderClick","prevState","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxIconWrapper","icons","StyledMotionComboBoxBody","initial","opacity","animate","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({ placeholder, list, onSelect, selectedItem }) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref]\n    );\n\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, ref]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect]\n    );\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n\n        textArray.push(placeholder);\n\n        setMinWidth(calculateContentWidth(textArray) + 45);\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        if (selectedItem) {\n            handleSetSelectedItem(selectedItem);\n        }\n    }, [handleSetSelectedItem, selectedItem]);\n\n    /**\n     * Function that renders the combobox items\n     */\n    const content = useMemo(() => {\n        const items: ReactNode[] = [];\n\n        list.forEach(({ text, value }) => {\n            items.push(\n                <ComboBoxItem\n                    key={value}\n                    value={value}\n                    text={text}\n                    onSelect={handleSetSelectedItem}\n                />\n            );\n        });\n\n        return items;\n    }, [handleSetSelectedItem, list]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (!selectedItem) {\n            text = placeholder;\n        } else if (item?.text) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item?.text, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = () => {\n        setIsAnimating((prevState) => !prevState);\n    };\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                <StyledComboBoxHeader\n                    minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    isOpen={isAnimating}\n                >\n                    <StyledComboBoxPlaceholder>{placeholderText}</StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                <StyledMotionComboBoxBody\n                    height={height}\n                    initial={{ height: 0, opacity: 0 }}\n                    animate={\n                        isAnimating\n                            ? { height: 'fit-content', opacity: 1 }\n                            : { height: 0, opacity: 0 }\n                    }\n                    transition={{\n                        duration: 0.2,\n                    }}\n                >\n                    {content}\n                </StyledMotionComboBoxBody>\n            </StyledComboBox>\n        ),\n        [content, height, isAnimating, item?.text, minWidth, placeholder]\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { PopupRef } from './interface';
+export type PopupProps = {
+    /**
+     * 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;
+};
+declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupRef>>;
+export default Popup;

package/lib/components/popup/Popup.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _uuid = require("../../hooks/uuid");
+var _interface = require("./interface");
+var _PopupContent = _interopRequireDefault(require("./popup-content/PopupContent"));
+var _Popup = require("./Popup.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const Popup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    content,
+    onShow,
+    onHide,
+    children
+  } = _ref;
+  const [coordinates, setCoordinates] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const container = document.body;
+  const [alignment, setAlignment] = (0, _react.useState)(_interface.PopupAlignment.TopLeft);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [portal, setPortal] = (0, _react.useState)();
+  const uuid = (0, _uuid.useUuid)();
+
+  // ToDo: Replace with hook if new chayns api is ready
+  const popupContentRef = (0, _react.useRef)(null);
+  const popupPseudoContentRef = (0, _react.useRef)(null);
+  const popupRef = (0, _react.useRef)(null);
+  const handleShow = (0, _react.useCallback)(() => {
+    if (popupRef.current && popupPseudoContentRef.current) {
+      const {
+        height: pseudoHeight,
+        width: pseudoWidth
+      } = popupPseudoContentRef.current.getBoundingClientRect();
+      const {
+        x: childrenX,
+        y: childrenY,
+        height: childrenHeight,
+        width: childrenWidth
+      } = popupRef.current.getBoundingClientRect();
+      if (pseudoHeight > childrenY - 25) {
+        if (pseudoWidth > childrenX + childrenWidth / 2 - 25) {
+          setAlignment(_interface.PopupAlignment.BottomRight);
+        } else {
+          setAlignment(_interface.PopupAlignment.BottomLeft);
+        }
+        setCoordinates({
+          x: childrenX + childrenWidth / 2,
+          y: childrenY + childrenHeight - 15
+        });
+      } else if (pseudoWidth > childrenX + childrenWidth / 2 - 25) {
+        setAlignment(_interface.PopupAlignment.TopRight);
+        setCoordinates({
+          x: childrenX + childrenWidth / 2,
+          y: childrenY
+        });
+      } else {
+        setAlignment(_interface.PopupAlignment.TopLeft);
+        setCoordinates({
+          x: childrenX + childrenWidth / 2,
+          y: childrenY + 15
+        });
+      }
+      setIsOpen(true);
+    }
+  }, []);
+  const handleChildrenClick = () => {
+    handleShow();
+  };
+  const handleHide = (0, _react.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  const handleDocumentClick = (0, _react.useCallback)(event => {
+    var _popupContentRef$curr;
+    if (!((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(event.target))) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    handleHide();
+  }, [handleHide]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+  (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+      initial: false
+    }, isOpen && /*#__PURE__*/_react.default.createElement(_PopupContent.default, {
+      coordinates: coordinates,
+      content: content,
+      key: `tooltip_${uuid}`,
+      alignment: alignment,
+      ref: popupContentRef
+    })), container));
+  }, [alignment, container, content, coordinates, isOpen, uuid]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
+    ref: popupPseudoContentRef
+  }, content), /*#__PURE__*/_react.default.createElement(_Popup.StyledPopup, {
+    ref: popupRef,
+    onClick: handleChildrenClick
+  }, children), portal);
+});
+Popup.displayName = 'Popup';
+var _default = Popup;
+exports.default = _default;
+//# sourceMappingURL=Popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_reactDom","_uuid","_interface","_PopupContent","_interopRequireDefault","_Popup","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Popup","forwardRef","_ref","ref","content","onShow","onHide","children","coordinates","setCoordinates","useState","x","y","container","document","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenX","childrenY","childrenHeight","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","Fragment","StyledPopupPseudo","StyledPopup","onClick","displayName","_default","exports"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from './interface';\nimport PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\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\nconst Popup = forwardRef<PopupRef, PopupProps>(({ content, onShow, onHide, children }, ref) => {\n    const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n        x: 0,\n        y: 0,\n    });\n    const container = document.body;\n\n    const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n    const [isOpen, setIsOpen] = useState(false);\n    const [portal, setPortal] = useState<ReactPortal>();\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                x: childrenX,\n                y: childrenY,\n                height: childrenHeight,\n                width: childrenWidth,\n            } = popupRef.current.getBoundingClientRect();\n\n            if (pseudoHeight > childrenY - 25) {\n                if (pseudoWidth > childrenX + childrenWidth / 2 - 25) {\n                    setAlignment(PopupAlignment.BottomRight);\n                } else {\n                    setAlignment(PopupAlignment.BottomLeft);\n                }\n\n                setCoordinates({\n                    x: childrenX + childrenWidth / 2,\n                    y: childrenY + childrenHeight - 15,\n                });\n            } else if (pseudoWidth > childrenX + childrenWidth / 2 - 25) {\n                setAlignment(PopupAlignment.TopRight);\n                setCoordinates({\n                    x: childrenX + childrenWidth / 2,\n                    y: childrenY,\n                });\n            } else {\n                setAlignment(PopupAlignment.TopLeft);\n                setCoordinates({\n                    x: childrenX + childrenWidth / 2,\n                    y: childrenY + 15,\n                });\n            }\n\n            setIsOpen(true);\n        }\n    }, []);\n\n    const handleChildrenClick = () => {\n        handleShow();\n    };\n\n    const handleHide = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n\n    const handleDocumentClick = useCallback<EventListener>(\n        (event) => {\n            if (!popupContentRef.current?.contains(event.target as Node)) {\n                event.preventDefault();\n                event.stopPropagation();\n            }\n\n            handleHide();\n        },\n        [handleHide]\n    );\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            hide: handleHide,\n            show: handleShow,\n        }),\n        [handleHide, handleShow]\n    );\n\n    useEffect(() => {\n        if (isOpen) {\n            document.addEventListener('click', handleDocumentClick, true);\n            window.addEventListener('blur', handleHide);\n\n            if (typeof onShow === 'function') {\n                onShow();\n            }\n        } else if (typeof onHide === 'function') {\n            onHide();\n        }\n\n        return () => {\n            document.removeEventListener('click', handleDocumentClick, true);\n            window.removeEventListener('blur', handleHide);\n        };\n    }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n    useEffect(() => {\n        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                        />\n                    )}\n                </AnimatePresence>,\n                container\n            )\n        );\n    }, [alignment, container, content, coordinates, isOpen, uuid]);\n\n    return (\n        <>\n            <StyledPopupPseudo ref={popupPseudoContentRef}>{content}</StyledPopupPseudo>\n            <StyledPopup ref={popupRef} onClick={handleChildrenClick}>\n                {children}\n            </StyledPopup>\n            {portal}\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,2 @@
+export declare const StyledPopup: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPopupPseudo: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPopupPseudo = exports.StyledPopup = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledPopup = _styledComponents.default.span`
+    cursor: pointer;
+    position: relative;
+`;
+exports.StyledPopup = StyledPopup;
+const StyledPopupPseudo = _styledComponents.default.div`
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    visibility: hidden;
+    position: absolute;
+`;
+exports.StyledPopupPseudo = StyledPopupPseudo;
+//# sourceMappingURL=Popup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledPopup","styled","span","exports","StyledPopupPseudo","div"],"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`;\n\nexport const StyledPopupPseudo = styled.div`\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    visibility: hidden;\n    position: absolute;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,IAAK;AACvC;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,WAAA,GAAAA,WAAA;AAEK,MAAMI,iBAAiB,GAAGH,yBAAM,CAACI,GAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,CAAC;AAACF,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}

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

@@ -0,0 +1,16 @@
+export declare enum PopupAlignment {
+    TopLeft = 0,
+    TopCenter = 1,
+    TopRight = 2,
+    BottomLeft = 3,
+    BottomCenter = 4,
+    BottomRight = 5
+}
+export type PopupCoordinates = {
+    x: number;
+    y: number;
+};
+export type PopupRef = {
+    hide: VoidFunction;
+    show: VoidFunction;
+};

package/lib/components/popup/interface.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopupAlignment = void 0;
+let PopupAlignment = /*#__PURE__*/function (PopupAlignment) {
+  PopupAlignment[PopupAlignment["TopLeft"] = 0] = "TopLeft";
+  PopupAlignment[PopupAlignment["TopCenter"] = 1] = "TopCenter";
+  PopupAlignment[PopupAlignment["TopRight"] = 2] = "TopRight";
+  PopupAlignment[PopupAlignment["BottomLeft"] = 3] = "BottomLeft";
+  PopupAlignment[PopupAlignment["BottomCenter"] = 4] = "BottomCenter";
+  PopupAlignment[PopupAlignment["BottomRight"] = 5] = "BottomRight";
+  return PopupAlignment;
+}({});
+exports.PopupAlignment = PopupAlignment;
+//# sourceMappingURL=interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","names":["PopupAlignment","exports"],"sources":["../../../src/components/popup/interface.ts"],"sourcesContent":["export enum PopupAlignment {\n    TopLeft,\n    TopCenter,\n    TopRight,\n    BottomLeft,\n    BottomCenter,\n    BottomRight,\n}\n\nexport type PopupCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type PopupRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n"],"mappings":";;;;;;IAAYA,cAAc,0BAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA;AAAAC,OAAA,CAAAD,cAAA,GAAAA,cAAA"}

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

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

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

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _interface = require("../interface");
+var _PopupContent = require("./PopupContent.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const PopupContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    alignment,
+    coordinates,
+    content
+  } = _ref;
+  const isBottomLeftAlignment = alignment === _interface.PopupAlignment.BottomLeft;
+  const isTopLeftAlignment = alignment === _interface.PopupAlignment.TopLeft;
+  const isTopRightAlignment = alignment === _interface.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.default.createElement(_PopupContent.StyledMotionPopupContent, {
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    exit: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    initial: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    position: alignment,
+    ref: ref,
+    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})
+                `;
+    }
+  }, content);
+});
+PopupContent.displayName = 'PopupContent';
+var _default = PopupContent;
+exports.default = _default;
+//# sourceMappingURL=PopupContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.js","names":["_react","_interopRequireDefault","require","_interface","_PopupContent","obj","__esModule","default","PopupContent","React","forwardRef","_ref","ref","alignment","coordinates","content","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContent","animate","opacity","y","exit","initial","position","style","left","x","top","transition","type","transformTemplate","_ref2","displayName","_default","exports"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../interface';\nimport { StyledMotionPopupContent } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    coordinates: PopupCoordinates;\n    content: ReactNode;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, coordinates, content }, ref) => {\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                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                position={alignment}\n                ref={ref}\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                {content}\n            </StyledMotionPopupContent>\n        );\n    }\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAAiE,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQjE,MAAMG,YAAY,gBAAGC,cAAK,CAACC,UAAU,CACjC,CAAAC,IAAA,EAAsCC,GAAG,KAAK;EAAA,IAA7C;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EAChC,MAAMK,qBAAqB,GAAGH,SAAS,KAAKI,yBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGN,SAAS,KAAKI,yBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGR,SAAS,KAAKI,yBAAc,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,oBACIrB,MAAA,CAAAO,OAAA,CAAAqB,aAAA,CAACxB,aAAA,CAAAyB,wBAAwB;IACrBC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CQ,QAAQ,EAAEtB,SAAU;IACpBD,GAAG,EAAEA,GAAI;IACTwB,KAAK,EAAE;MAAEC,IAAI,EAAEvB,WAAW,CAACwB,CAAC;MAAEC,GAAG,EAAEzB,WAAW,CAACkB;IAAE,CAAE;IACnDQ,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEX,CAAC,GAAG;MAAM,CAAC,GAAAW,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC,iBAAiB;IAAA;EAAC,GAEDjB,OACqB,CAAC;AAEnC,CACJ,CAAC;AAEDP,YAAY,CAACoC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAE3BrC,YAAY;AAAAsC,OAAA,CAAAvC,OAAA,GAAAsC,QAAA"}

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

@@ -0,0 +1,6 @@
+import { PopupAlignment } from '../interface';
+export declare const StyledMotionPopupContent: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
+    position: PopupAlignment;
+} & {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionPopupContent = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _interface = require("../interface");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledMotionPopupContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['001'];
+}};
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    position: absolute;
+    z-index: 0;
+
+    ::after {
+        background-color: inherit;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        border-bottom-right-radius: 3px;
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
+        content: '';
+        height: 14px;
+        position: absolute;
+        width: 14px;
+        z-index: -2;
+
+        ${_ref3 => {
+  let {
+    position
+  } = _ref3;
+  switch (position) {
+    case _interface.PopupAlignment.TopLeft:
+      return (0, _styledComponents.css)`
+                        bottom: -8px;
+                        right: 13px;
+                        transform: rotate(45deg);
+                    `;
+    case _interface.PopupAlignment.BottomLeft:
+      return (0, _styledComponents.css)`
+                        top: -8px;
+                        right: 13px;
+                        transform: rotate(225deg);
+                    `;
+    case _interface.PopupAlignment.TopRight:
+      return (0, _styledComponents.css)`
+                        transform: rotate(45deg);
+                        bottom: -8px;
+                        left: 13px;
+                    `;
+    case _interface.PopupAlignment.BottomRight:
+      return (0, _styledComponents.css)`
+                        transform: rotate(225deg);
+                        top: -8px;
+                        left: 13px;
+                    `;
+    default:
+      return undefined;
+  }
+}}
+    }
+
+    ::before {
+        background-color: inherit;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+    }
+`;
+exports.StyledMotionPopupContent = StyledMotionPopupContent;
+//# sourceMappingURL=PopupContent.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_interface","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMotionPopupContent","styled","motion","div","_ref","theme","_ref2","text","_ref3","position","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","exports"],"sources":["../../../../src/components/popup/popup-content/PopupContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { PopupAlignment } from '../interface';\n\ntype StyledMotionPopupContentProps = WithTheme<{\n    position: PopupAlignment;\n}>;\n\nexport const StyledMotionPopupContent = styled(motion.div)<StyledMotionPopupContentProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentProps) => theme.text};\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 3px;\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 }) => {\n            switch (position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -8px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -8px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -8px;\n                        left: 13px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -8px;\n                        left: 13px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,UAAA,GAAAH,OAAA;AAA8C,SAAAI,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAMvC,MAAMW,wBAAwB,GAAG,IAAAC,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAiC;AAC1F,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAqC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA,CAAC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC,GAAAD,KAAA;EACX,QAAQC,QAAQ;IACZ,KAAKC,yBAAc,CAACC,OAAO;MACvB,OAAO,IAAAC,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,yBAAc,CAACG,UAAU;MAC1B,OAAO,IAAAD,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,yBAAc,CAACI,QAAQ;MACxB,OAAO,IAAAF,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,yBAAc,CAACK,WAAW;MAC3B,OAAO,IAAAH,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOI,SAAS;EACxB;AACJ,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAjB,wBAAA,GAAAA,wBAAA"}

package/lib/components/slider/Slider.js

@@ -21,7 +21,7 @@ const Slider = _ref => {
    * This function sets the value
    */
   (0, _react.useEffect)(() => {
-    if (!value) {
+    if (typeof value !== 'number') {
       return;
     }
     if (value >= minValue && value <= maxValue) {

package/lib/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["_react","_interopRequireWildcard","require","_Slider","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Slider","_ref","maxValue","minValue","value","onChange","editedValue","setEditedValue","useState","useEffect","handleInputChange","useCallback","event","Number","target","useMemo","createElement","StyledSlider","StyledSliderInput","type","max","min","displayName","_default","exports"],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { StyledSlider, StyledSliderInput } from './Slider.styles';\n\nexport type SliderProps = {\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value: number) => void;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({ maxValue, minValue, value, onChange }) => {\n    const [editedValue, setEditedValue] = useState(0);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (!value) {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setEditedValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            if (onChange) {\n                onChange(Number(event.target.value));\n            }\n        },\n        [onChange]\n    );\n\n    return useMemo(\n        () => (\n            <StyledSlider>\n                <StyledSliderInput\n                    type=\"range\"\n                    value={editedValue}\n                    max={maxValue}\n                    min={minValue}\n                    onChange={handleInputChange}\n                />\n            </StyledSlider>\n        ),\n        [editedValue, handleInputChange, maxValue, minValue]\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["_react","_interopRequireWildcard","require","_Slider","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Slider","_ref","maxValue","minValue","value","onChange","editedValue","setEditedValue","useState","useEffect","handleInputChange","useCallback","event","Number","target","useMemo","createElement","StyledSlider","StyledSliderInput","type","max","min","displayName","_default","exports"],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { StyledSlider, StyledSliderInput } from './Slider.styles';\n\nexport type SliderProps = {\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value: number) => void;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({ maxValue, minValue, value, onChange }) => {\n    const [editedValue, setEditedValue] = useState(0);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setEditedValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            if (onChange) {\n                onChange(Number(event.target.value));\n            }\n        },\n        [onChange]\n    );\n\n    return useMemo(\n        () => (\n            <StyledSlider>\n                <StyledSliderInput\n                    type=\"range\"\n                    value={editedValue}\n                    max={maxValue}\n                    min={minValue}\n                    onChange={handleInputChange}\n                />\n            </StyledSlider>\n        ),\n        [editedValue, handleInputChange, maxValue, minValue]\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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"}

package/lib/utils/calculate.d.ts

@@ -1,2 +1,2 @@
 export declare const calculateContentWidth: (texts: string[]) => number;
-export declare const calculateContentHeight: (texts: string[]) => number;
+export declare const calculateContentHeight: (elements: string[]) => number;

package/lib/utils/calculate.js

@@ -20,17 +20,17 @@ const calculateContentWidth = texts => {
   return Math.max.apply(null, length);
 };
 exports.calculateContentWidth = calculateContentWidth;
-const calculateContentHeight = texts => {
+const calculateContentHeight = elements => {
   const length = [];
-  texts.forEach(text => {
-    const div = document.createElement('p');
-    div.style.visibility = 'hidden';
-    div.style.position = 'absolute';
-    div.style.width = 'auto';
-    div.style.margin = '5px';
-    div.style.whiteSpace = 'nowrap';
-    document.body.appendChild(div);
-    div.innerText = text;
+  const div = document.createElement('p');
+  div.style.visibility = 'hidden';
+  div.style.position = 'absolute';
+  div.style.width = 'auto';
+  div.style.margin = '5px';
+  div.style.whiteSpace = 'nowrap';
+  document.body.appendChild(div);
+  elements.forEach(element => {
+    div.innerText = element;
     length.push(div.offsetHeight);
     document.body.removeChild(div);
   });

package/lib/utils/calculate.js.map

@@ -1 +1 @@
-{"version":3,"file":"calculate.js","names":["calculateContentWidth","texts","length","forEach","text","div","document","createElement","style","visibility","position","width","whiteSpace","body","appendChild","innerText","push","offsetWidth","removeChild","Math","max","apply","exports","calculateContentHeight","margin","offsetHeight","reduce","partialSum","a"],"sources":["../../src/utils/calculate.ts"],"sourcesContent":["export const calculateContentWidth = (texts: string[]) => {\n    const length: number[] = [];\n\n    texts.forEach((text) => {\n        const div = document.createElement('div');\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.whiteSpace = 'nowrap';\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateContentHeight = (texts: string[]) => {\n    const length: number[] = [];\n\n    texts.forEach((text) => {\n        const div = document.createElement('p');\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.margin = '5px';\n        div.style.whiteSpace = 'nowrap';\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        length.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return length.reduce((partialSum, a) => partialSum + a, 0);\n};\n"],"mappings":";;;;;;AAAO,MAAMA,qBAAqB,GAAIC,KAAe,IAAK;EACtD,MAAMC,MAAgB,GAAG,EAAE;EAE3BD,KAAK,CAACE,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IACzCF,GAAG,CAACG,KAAK,CAACC,UAAU,GAAG,QAAQ;IAC/BJ,GAAG,CAACG,KAAK,CAACE,QAAQ,GAAG,UAAU;IAC/BL,GAAG,CAACG,KAAK,CAACG,KAAK,GAAG,MAAM;IACxBN,GAAG,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;IAC/BN,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,GAAG,CAAC;IAE9BA,GAAG,CAACU,SAAS,GAAGX,IAAI;IAEpBF,MAAM,CAACc,IAAI,CAACX,GAAG,CAACY,WAAW,CAAC;IAE5BX,QAAQ,CAACO,IAAI,CAACK,WAAW,CAACb,GAAG,CAAC;EAClC,CAAC,CAAC;EAEF,OAAOc,IAAI,CAACC,GAAG,CAACC,KAAK,CAAC,IAAI,EAAEnB,MAAM,CAAC;AACvC,CAAC;AAACoB,OAAA,CAAAtB,qBAAA,GAAAA,qBAAA;AAEK,MAAMuB,sBAAsB,GAAItB,KAAe,IAAK;EACvD,MAAMC,MAAgB,GAAG,EAAE;EAE3BD,KAAK,CAACE,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,GAAG,CAAC;IACvCF,GAAG,CAACG,KAAK,CAACC,UAAU,GAAG,QAAQ;IAC/BJ,GAAG,CAACG,KAAK,CAACE,QAAQ,GAAG,UAAU;IAC/BL,GAAG,CAACG,KAAK,CAACG,KAAK,GAAG,MAAM;IACxBN,GAAG,CAACG,KAAK,CAACgB,MAAM,GAAG,KAAK;IACxBnB,GAAG,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;IAC/BN,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,GAAG,CAAC;IAE9BA,GAAG,CAACU,SAAS,GAAGX,IAAI;IAEpBF,MAAM,CAACc,IAAI,CAACX,GAAG,CAACoB,YAAY,CAAC;IAE7BnB,QAAQ,CAACO,IAAI,CAACK,WAAW,CAACb,GAAG,CAAC;EAClC,CAAC,CAAC;EAEF,OAAOH,MAAM,CAACwB,MAAM,CAAC,CAACC,UAAU,EAAEC,CAAC,KAAKD,UAAU,GAAGC,CAAC,EAAE,CAAC,CAAC;AAC9D,CAAC;AAACN,OAAA,CAAAC,sBAAA,GAAAA,sBAAA"}
+{"version":3,"file":"calculate.js","names":["calculateContentWidth","texts","length","forEach","text","div","document","createElement","style","visibility","position","width","whiteSpace","body","appendChild","innerText","push","offsetWidth","removeChild","Math","max","apply","exports","calculateContentHeight","elements","margin","element","offsetHeight","reduce","partialSum","a"],"sources":["../../src/utils/calculate.ts"],"sourcesContent":["export const calculateContentWidth = (texts: string[]) => {\n    const length: number[] = [];\n\n    texts.forEach((text) => {\n        const div = document.createElement('div');\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.whiteSpace = 'nowrap';\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n    const length: number[] = [];\n\n    const div = document.createElement('p');\n    div.style.visibility = 'hidden';\n    div.style.position = 'absolute';\n    div.style.width = 'auto';\n    div.style.margin = '5px';\n    div.style.whiteSpace = 'nowrap';\n    document.body.appendChild(div);\n\n    elements.forEach((element: string) => {\n        div.innerText = element;\n\n        length.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return length.reduce((partialSum, a) => partialSum + a, 0);\n};\n"],"mappings":";;;;;;AAAO,MAAMA,qBAAqB,GAAIC,KAAe,IAAK;EACtD,MAAMC,MAAgB,GAAG,EAAE;EAE3BD,KAAK,CAACE,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IACzCF,GAAG,CAACG,KAAK,CAACC,UAAU,GAAG,QAAQ;IAC/BJ,GAAG,CAACG,KAAK,CAACE,QAAQ,GAAG,UAAU;IAC/BL,GAAG,CAACG,KAAK,CAACG,KAAK,GAAG,MAAM;IACxBN,GAAG,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;IAC/BN,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,GAAG,CAAC;IAE9BA,GAAG,CAACU,SAAS,GAAGX,IAAI;IAEpBF,MAAM,CAACc,IAAI,CAACX,GAAG,CAACY,WAAW,CAAC;IAE5BX,QAAQ,CAACO,IAAI,CAACK,WAAW,CAACb,GAAG,CAAC;EAClC,CAAC,CAAC;EAEF,OAAOc,IAAI,CAACC,GAAG,CAACC,KAAK,CAAC,IAAI,EAAEnB,MAAM,CAAC;AACvC,CAAC;AAACoB,OAAA,CAAAtB,qBAAA,GAAAA,qBAAA;AAEK,MAAMuB,sBAAsB,GAAIC,QAAkB,IAAK;EAC1D,MAAMtB,MAAgB,GAAG,EAAE;EAE3B,MAAMG,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,GAAG,CAAC;EACvCF,GAAG,CAACG,KAAK,CAACC,UAAU,GAAG,QAAQ;EAC/BJ,GAAG,CAACG,KAAK,CAACE,QAAQ,GAAG,UAAU;EAC/BL,GAAG,CAACG,KAAK,CAACG,KAAK,GAAG,MAAM;EACxBN,GAAG,CAACG,KAAK,CAACiB,MAAM,GAAG,KAAK;EACxBpB,GAAG,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EAC/BN,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,GAAG,CAAC;EAE9BmB,QAAQ,CAACrB,OAAO,CAAEuB,OAAe,IAAK;IAClCrB,GAAG,CAACU,SAAS,GAAGW,OAAO;IAEvBxB,MAAM,CAACc,IAAI,CAACX,GAAG,CAACsB,YAAY,CAAC;IAE7BrB,QAAQ,CAACO,IAAI,CAACK,WAAW,CAACb,GAAG,CAAC;EAClC,CAAC,CAAC;EAEF,OAAOH,MAAM,CAAC0B,MAAM,CAAC,CAACC,UAAU,EAAEC,CAAC,KAAKD,UAAU,GAAGC,CAAC,EAAE,CAAC,CAAC;AAC9D,CAAC;AAACR,OAAA,CAAAC,sBAAA,GAAAA,sBAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.174",
+    "version": "5.0.0-beta.176",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -63,5 +63,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "364604da7330bc187a2f8c49136fd1f46c2b1224"
+    "gitHead": "ba18e5c342ffb57fd61a98a8e223a768d0595e5d"
 }