@chayns-components/core 5.0.0-beta.41 → 5.0.0-beta.412

package/lib/components/opening-times/opening-inputs/opening-input/OpeningInput.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _openingTimes = require("../../../../types/openingTimes");
+var _OpeningInput = require("./OpeningInput.styles");
+var _NumberInput = _interopRequireDefault(require("../../../number-input/NumberInput"));
+var _Icon = _interopRequireDefault(require("../../../icon/Icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const OpeningInput = _ref => {
+  let {
+    end,
+    start,
+    isDisabled,
+    buttonType,
+    onRemove,
+    onAdd,
+    onChange
+  } = _ref;
+  const [startTime, setStartTime] = (0, _react.useState)(start);
+  const [endTime, setEndTime] = (0, _react.useState)(end);
+  (0, _react.useEffect)(() => {
+    onChange({
+      start: startTime,
+      end: endTime
+    });
+  }, [endTime, onChange, startTime]);
+  const button = (0, _react.useMemo)(() => {
+    switch (buttonType) {
+      case _openingTimes.OpeningTimesButtonType.ADD:
+        return /*#__PURE__*/_react.default.createElement(_OpeningInput.StyledOpeningInputButtonWrapper, {
+          onClick: onAdd
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          icons: ['fa fa-plus'],
+          size: 15,
+          color: "white"
+        }));
+      case _openingTimes.OpeningTimesButtonType.REMOVE:
+        return /*#__PURE__*/_react.default.createElement(_OpeningInput.StyledOpeningInputButtonWrapper, {
+          onClick: onRemove
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          icons: ['fa fa-x'],
+          size: 10,
+          color: "white"
+        }));
+      default:
+        return null;
+    }
+  }, [buttonType, onAdd, onRemove]);
+  const handleStartTimeChange = (0, _react.useCallback)(value => {
+    setStartTime(value);
+  }, []);
+  const handleEndTimeChange = (0, _react.useCallback)(value => {
+    setEndTime(value);
+  }, []);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_OpeningInput.StyledOpeningInput, null, /*#__PURE__*/_react.default.createElement(_OpeningInput.StyledOpeningInputWrapper, null, /*#__PURE__*/_react.default.createElement(_NumberInput.default, {
+    isTimeInput: true,
+    value: startTime,
+    onChange: handleStartTimeChange,
+    isDisabled: isDisabled
+  })), /*#__PURE__*/_react.default.createElement(_OpeningInput.StyledOpeningInputText, {
+    isDisabled: isDisabled
+  }, "-"), /*#__PURE__*/_react.default.createElement(_OpeningInput.StyledOpeningInputWrapper, null, /*#__PURE__*/_react.default.createElement(_NumberInput.default, {
+    isTimeInput: true,
+    value: endTime,
+    onChange: handleEndTimeChange,
+    isDisabled: isDisabled
+  })), button), [button, endTime, handleEndTimeChange, handleStartTimeChange, isDisabled, startTime]);
+};
+OpeningInput.displayName = 'OpeningInput';
+var _default = exports.default = OpeningInput;
+//# sourceMappingURL=OpeningInput.js.map

package/lib/components/opening-times/opening-inputs/opening-input/OpeningInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpeningInput.js","names":["_react","_interopRequireWildcard","require","_openingTimes","_OpeningInput","_NumberInput","_interopRequireDefault","_Icon","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","OpeningInput","_ref","end","start","isDisabled","buttonType","onRemove","onAdd","onChange","startTime","setStartTime","useState","endTime","setEndTime","useEffect","button","useMemo","OpeningTimesButtonType","ADD","createElement","StyledOpeningInputButtonWrapper","onClick","icons","size","color","REMOVE","handleStartTimeChange","useCallback","value","handleEndTimeChange","StyledOpeningInput","StyledOpeningInputWrapper","isTimeInput","StyledOpeningInputText","displayName","_default","exports"],"sources":["../../../../../src/components/opening-times/opening-inputs/opening-input/OpeningInput.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { OpeningTimesButtonType, type Time } from '../../../../types/openingTimes';\nimport {\n    StyledOpeningInput,\n    StyledOpeningInputButtonWrapper,\n    StyledOpeningInputText,\n    StyledOpeningInputWrapper,\n} from './OpeningInput.styles';\nimport NumberInput from '../../../number-input/NumberInput';\nimport Icon from '../../../icon/Icon';\n\nexport type OpeningInputProps = {\n    start: Time['start'];\n    end: Time['end'];\n    isDisabled?: boolean;\n    buttonType: OpeningTimesButtonType;\n    onAdd: () => void;\n    onRemove: () => void;\n    onChange: (time: Time) => void;\n};\n\nconst OpeningInput: FC<OpeningInputProps> = ({\n    end,\n    start,\n    isDisabled,\n    buttonType,\n    onRemove,\n    onAdd,\n    onChange,\n}) => {\n    const [startTime, setStartTime] = useState(start);\n    const [endTime, setEndTime] = useState(end);\n\n    useEffect(() => {\n        onChange({ start: startTime, end: endTime });\n    }, [endTime, onChange, startTime]);\n\n    const button = useMemo(() => {\n        switch (buttonType) {\n            case OpeningTimesButtonType.ADD:\n                return (\n                    <StyledOpeningInputButtonWrapper onClick={onAdd}>\n                        <Icon icons={['fa fa-plus']} size={15} color=\"white\" />\n                    </StyledOpeningInputButtonWrapper>\n                );\n            case OpeningTimesButtonType.REMOVE:\n                return (\n                    <StyledOpeningInputButtonWrapper onClick={onRemove}>\n                        <Icon icons={['fa fa-x']} size={10} color=\"white\" />\n                    </StyledOpeningInputButtonWrapper>\n                );\n            default:\n                return null;\n        }\n    }, [buttonType, onAdd, onRemove]);\n\n    const handleStartTimeChange = useCallback((value: string) => {\n        setStartTime(value);\n    }, []);\n\n    const handleEndTimeChange = useCallback((value: string) => {\n        setEndTime(value);\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledOpeningInput>\n                <StyledOpeningInputWrapper>\n                    <NumberInput\n                        isTimeInput\n                        value={startTime}\n                        onChange={handleStartTimeChange}\n                        isDisabled={isDisabled}\n                    />\n                </StyledOpeningInputWrapper>\n                <StyledOpeningInputText isDisabled={isDisabled}>-</StyledOpeningInputText>\n                <StyledOpeningInputWrapper>\n                    <NumberInput\n                        isTimeInput\n                        value={endTime}\n                        onChange={handleEndTimeChange}\n                        isDisabled={isDisabled}\n                    />\n                </StyledOpeningInputWrapper>\n                {button}\n            </StyledOpeningInput>\n        ),\n        [button, endTime, handleEndTimeChange, handleStartTimeChange, isDisabled, startTime],\n    );\n};\n\nOpeningInput.displayName = 'OpeningInput';\n\nexport default OpeningInput;\n"],"mappings":"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"}

package/lib/components/opening-times/opening-inputs/opening-input/OpeningInput.styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledOpeningInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledOpeningInputWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledOpeningInputTextProps = WithTheme<{
+    isDisabled?: boolean;
+}>;
+export declare const StyledOpeningInputText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOpeningInputTextProps>>;
+export declare const StyledOpeningInputButtonWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export {};

package/lib/components/opening-times/opening-inputs/opening-input/OpeningInput.styles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledOpeningInputWrapper = exports.StyledOpeningInputText = exports.StyledOpeningInputButtonWrapper = exports.StyledOpeningInput = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledOpeningInput = exports.StyledOpeningInput = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+`;
+const StyledOpeningInputWrapper = exports.StyledOpeningInputWrapper = _styledComponents.default.div`
+    width: 60px;
+`;
+const StyledOpeningInputText = exports.StyledOpeningInputText = _styledComponents.default.div`
+    opacity: ${_ref => {
+  let {
+    isDisabled
+  } = _ref;
+  return isDisabled ? 0.5 : 1;
+}};
+`;
+const StyledOpeningInputButtonWrapper = exports.StyledOpeningInputButtonWrapper = _styledComponents.default.div`
+    width: 20px;
+    height: 20px;
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['408'];
+}};
+    border-radius: 3px;
+    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+//# sourceMappingURL=OpeningInput.styles.js.map

package/lib/components/opening-times/opening-inputs/opening-input/OpeningInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpeningInput.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledOpeningInput","exports","styled","div","StyledOpeningInputWrapper","StyledOpeningInputText","_ref","isDisabled","StyledOpeningInputButtonWrapper","_ref2","theme"],"sources":["../../../../../src/components/opening-times/opening-inputs/opening-input/OpeningInput.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledOpeningInput = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 6px;\n`;\n\nexport const StyledOpeningInputWrapper = styled.div`\n    width: 60px;\n`;\n\ntype StyledOpeningInputTextProps = WithTheme<{ isDisabled?: boolean }>;\n\nexport const StyledOpeningInputText = styled.div<StyledOpeningInputTextProps>`\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledOpeningInputButtonWrapperProps = WithTheme<unknown>;\n\nexport const StyledOpeningInputButtonWrapper = styled.div`\n    width: 20px;\n    height: 20px;\n    background-color: ${({ theme }: StyledOpeningInputButtonWrapperProps) => theme['408']};\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    border: none;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\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;AAGhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA,CAAC;AAEM,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAGF,yBAAM,CAACC,GAAI;AACpD;AACA,CAAC;AAIM,MAAME,sBAAsB,GAAAJ,OAAA,CAAAI,sBAAA,GAAGH,yBAAM,CAACC,GAAiC;AAC9E,eAAeG,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D,CAAC;AAIM,MAAMC,+BAA+B,GAAAP,OAAA,CAAAO,+BAAA,GAAGN,yBAAM,CAACC,GAAI;AAC1D;AACA;AACA,wBAAwBM,KAAA;EAAA,IAAC;IAAEC;EAA4C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}

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

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { PopupRef } from './types';
+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,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _uuid = require("../../hooks/uuid");
+var _PopupContent = _interopRequireDefault(require("./popup-content/PopupContent"));
+var _Popup = require("./Popup.styles");
+var _types = require("./types");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Popup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    content,
+    onShow,
+    onHide,
+    children,
+    shouldShowOnHover = false,
+    yOffset = 0
+  } = _ref;
+  const [coordinates, setCoordinates] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const container = document.querySelector('.tapp') || document.body;
+  const [alignment, setAlignment] = (0, _react.useState)(_types.PopupAlignment.TopLeft);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [portal, setPortal] = (0, _react.useState)();
+  const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
+  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 {
+        height: childrenHeight,
+        left: childrenLeft,
+        top: childrenTop,
+        width: childrenWidth
+      } = popupRef.current.getBoundingClientRect();
+      if (pseudoHeight > childrenTop - 25) {
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(_types.PopupAlignment.BottomRight);
+        } else {
+          setAlignment(_types.PopupAlignment.BottomLeft);
+        }
+        setCoordinates({
+          x: childrenLeft + childrenWidth / 2,
+          y: childrenTop + childrenHeight + yOffset
+        });
+      } else {
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(_types.PopupAlignment.TopRight);
+        } else {
+          setAlignment(_types.PopupAlignment.TopLeft);
+        }
+        setCoordinates({
+          x: childrenLeft + childrenWidth / 2,
+          y: childrenTop - yOffset
+        });
+      }
+      setIsOpen(true);
+    }
+  }, [yOffset]);
+  const handleChildrenClick = () => {
+    if (!shouldShowOnHover) {
+      handleShow();
+    }
+  };
+  const handleHide = (0, _react.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  const handleMouseEnter = () => {
+    if (shouldShowOnHover) {
+      handleShow();
+    }
+  };
+  const handleMouseLeave = (0, _react.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 = (0, _react.useCallback)(event => {
+    if (!popupContentRef.current?.contains(event.target)) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!shouldShowOnHover) {
+        handleHide();
+      }
+    }
+  }, [handleHide, shouldShowOnHover]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+  (0, _react.useEffect)(() => {
+    void (0, _chaynsApi.getWindowMetrics)().then(result => {
+      if (result.topBarHeight) {
+        setMenuHeight(result.topBarHeight);
+      }
+    });
+  }, []);
+  (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,
+      onMouseLeave: handleMouseLeave
+    })), container));
+  }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
+    ref: popupPseudoContentRef,
+    menuHeight: menuHeight
+  }, content), /*#__PURE__*/_react.default.createElement(_Popup.StyledPopup, {
+    ref: popupRef,
+    onClick: handleChildrenClick,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter
+  }, children), portal);
+});
+Popup.displayName = 'Popup';
+var _default = exports.default = Popup;
+//# sourceMappingURL=Popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_PopupContent","_interopRequireDefault","_Popup","_types","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Popup","forwardRef","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","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","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","Fragment","StyledPopupPseudo","StyledPopup","onClick","onMouseEnter","displayName","_default","exports"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    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 PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from './types';\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 (!popupContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    if (!shouldShowOnHover) {\n                        handleHide();\n                    }\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":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AAWA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AAAqE,SAAAO,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AA6BrE,MAAMY,KAAK,gBAAG,IAAAC,iBAAU,EACpB,CAAAC,IAAA,EAAgFC,GAAG,KAAK;EAAA,IAAvF;IAAEC,OAAO;IAAEC,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,iBAAiB,GAAG,KAAK;IAAEC,OAAO,GAAG;EAAE,CAAC,GAAAP,IAAA;EAC1E,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAmB;IAC7DC,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,IAAID,QAAQ,CAACE,IAAI;EAElE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAR,eAAQ,EAAiBS,qBAAc,CAACC,OAAO,CAAC;EAClF,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAZ,eAAQ,EAAC,KAAK,CAAC;EAC3C,MAAM,CAACa,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAd,eAAQ,EAAc,CAAC;EACnD,MAAM,CAACe,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAhB,eAAQ,EAAC,CAAC,CAAC;EAE/C,MAAMiB,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;;EAEtB;EACA,MAAMC,eAAe,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACpD,MAAMC,qBAAqB,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EAC1D,MAAME,QAAQ,GAAG,IAAAF,aAAM,EAAiB,IAAI,CAAC;EAE7C,MAAMG,UAAU,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjC,IAAIF,QAAQ,CAACG,OAAO,IAAIJ,qBAAqB,CAACI,OAAO,EAAE;MACnD,MAAM;QAAEC,MAAM,EAAEC,YAAY;QAAEC,KAAK,EAAEC;MAAY,CAAC,GAC9CR,qBAAqB,CAACI,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAEzD,MAAM;QACFJ,MAAM,EAAEK,cAAc;QACtBC,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBP,KAAK,EAAEQ;MACX,CAAC,GAAGd,QAAQ,CAACG,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAE5C,IAAIH,YAAY,GAAGQ,WAAW,GAAG,EAAE,EAAE;QACjC,IAAIN,WAAW,GAAGI,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrD5B,YAAY,CAACC,qBAAc,CAAC4B,WAAW,CAAC;QAC5C,CAAC,MAAM;UACH7B,YAAY,CAACC,qBAAc,CAAC6B,UAAU,CAAC;QAC3C;QAEAvC,cAAc,CAAC;UACXE,CAAC,EAAEgC,YAAY,GAAGG,aAAa,GAAG,CAAC;UACnClC,CAAC,EAAEiC,WAAW,GAAGJ,cAAc,GAAGlC;QACtC,CAAC,CAAC;MACN,CAAC,MAAM;QACH,IAAIgC,WAAW,GAAGI,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrD5B,YAAY,CAACC,qBAAc,CAAC8B,QAAQ,CAAC;QACzC,CAAC,MAAM;UACH/B,YAAY,CAACC,qBAAc,CAACC,OAAO,CAAC;QACxC;QAEAX,cAAc,CAAC;UACXE,CAAC,EAAEgC,YAAY,GAAGG,aAAa,GAAG,CAAC;UACnClC,CAAC,EAAEiC,WAAW,GAAGtC;QACrB,CAAC,CAAC;MACN;MAEAe,SAAS,CAAC,IAAI,CAAC;IACnB;EACJ,CAAC,EAAE,CAACf,OAAO,CAAC,CAAC;EAEb,MAAM2C,mBAAmB,GAAGA,CAAA,KAAM;IAC9B,IAAI,CAAC5C,iBAAiB,EAAE;MACpB2B,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC;EAED,MAAMkB,UAAU,GAAG,IAAAjB,kBAAW,EAAC,MAAM;IACjCZ,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM8B,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAI9C,iBAAiB,EAAE;MACnB2B,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC;EAED,MAAMoB,gBAAgB,GAAG,IAAAnB,kBAAW,EAC/BoB,KAAiB,IAAK;IACnB,IAAIhD,iBAAiB,EAAE;MACnB,IAAKgD,KAAK,CAACC,aAAa,CAAiBC,OAAO,CAACC,OAAO,KAAK,MAAM,EAAE;QACjEN,UAAU,CAAC,CAAC;MAChB;MAEA,IACIG,KAAK,CAACI,aAAa,KAClBJ,KAAK,CAACI,aAAa,KAAK7B,eAAe,CAACM,OAAO,IAC5CN,eAAe,CAACM,OAAO,EAAEwB,QAAQ,CAACL,KAAK,CAACI,aAAqB,CAAC,CAAC,EACrE;QACE;MACJ;MAEAP,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EACD,CAACA,UAAU,EAAE7C,iBAAiB,CAClC,CAAC;EAED,MAAMsD,mBAAmB,GAAG,IAAA1B,kBAAW,EAClCoB,KAAK,IAAK;IACP,IAAI,CAACzB,eAAe,CAACM,OAAO,EAAEwB,QAAQ,CAACL,KAAK,CAACO,MAAc,CAAC,EAAE;MAC1DP,KAAK,CAACQ,cAAc,CAAC,CAAC;MACtBR,KAAK,CAACS,eAAe,CAAC,CAAC;MAEvB,IAAI,CAACzD,iBAAiB,EAAE;QACpB6C,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EACD,CAACA,UAAU,EAAE7C,iBAAiB,CAClC,CAAC;EAED,IAAA0D,0BAAmB,EACf/D,GAAG,EACH,OAAO;IACHgE,IAAI,EAAEd,UAAU;IAChBe,IAAI,EAAEjC;EACV,CAAC,CAAC,EACF,CAACkB,UAAU,EAAElB,UAAU,CAC3B,CAAC;EAED,IAAAkC,gBAAS,EAAC,MAAM;IACZ,KAAK,IAAAC,2BAAgB,EAAC,CAAC,CAACC,IAAI,CAAEC,MAAM,IAAK;MACrC,IAAIA,MAAM,CAACC,YAAY,EAAE;QACrB7C,aAAa,CAAC4C,MAAM,CAACC,YAAY,CAAC;MACtC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAJ,gBAAS,EAAC,MAAM;IACZ,IAAI9C,MAAM,EAAE;MACRP,QAAQ,CAAC0D,gBAAgB,CAAC,OAAO,EAAEZ,mBAAmB,EAAE,IAAI,CAAC;MAC7Da,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAErB,UAAU,CAAC;MAE3C,IAAI,OAAOhD,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACTU,QAAQ,CAAC4D,mBAAmB,CAAC,OAAO,EAAEd,mBAAmB,EAAE,IAAI,CAAC;MAChEa,MAAM,CAACC,mBAAmB,CAAC,MAAM,EAAEvB,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACS,mBAAmB,EAAET,UAAU,EAAE9B,MAAM,EAAEjB,MAAM,EAAED,MAAM,CAAC,CAAC;EAE7D,IAAAgE,gBAAS,EAAC,MAAM;IACZ3C,SAAS,CAAC,mBACN,IAAAmD,sBAAY,gBACR3G,MAAA,CAAAU,OAAA,CAAAkG,aAAA,CAAC7G,aAAA,CAAA8G,eAAe;MAACC,OAAO,EAAE;IAAM,GAC3BzD,MAAM,iBACHrD,MAAA,CAAAU,OAAA,CAAAkG,aAAA,CAACxG,aAAA,CAAAM,OAAY;MACT8B,WAAW,EAAEA,WAAY;MACzBN,OAAO,EAAEA,OAAQ;MACjB6E,GAAG,EAAG,WAAUpD,IAAK,EAAE;MACvBV,SAAS,EAAEA,SAAU;MACrBhB,GAAG,EAAE4B,eAAgB;MACrBmD,YAAY,EAAE3B;IAAiB,CAClC,CAEQ,CAAC,EAClBxC,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAACI,SAAS,EAAEJ,SAAS,EAAEX,OAAO,EAAEM,WAAW,EAAE6C,gBAAgB,EAAEhC,MAAM,EAAEM,IAAI,CAAC,CAAC;EAEhF,oBACI3D,MAAA,CAAAU,OAAA,CAAAkG,aAAA,CAAA5G,MAAA,CAAAU,OAAA,CAAAuG,QAAA,qBACIjH,MAAA,CAAAU,OAAA,CAAAkG,aAAA,CAACtG,MAAA,CAAA4G,iBAAiB;IAACjF,GAAG,EAAE8B,qBAAsB;IAACN,UAAU,EAAEA;EAAW,GACjEvB,OACc,CAAC,eACpBlC,MAAA,CAAAU,OAAA,CAAAkG,aAAA,CAACtG,MAAA,CAAA6G,WAAW;IACRlF,GAAG,EAAE+B,QAAS;IACdoD,OAAO,EAAElC,mBAAoB;IAC7B8B,YAAY,EAAE3B,gBAAiB;IAC/BgC,YAAY,EAAEjC;EAAiB,GAE9B/C,QACQ,CAAC,EACbkB,MACH,CAAC;AAEX,CACJ,CAAC;AAEDzB,KAAK,CAACwF,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9G,OAAA,GAEboB,KAAK"}

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,28 @@
+"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 = exports.StyledPopup = _styledComponents.default.span`
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    width: fit-content;
+    height: fit-content;
+`;
+const StyledPopupPseudo = exports.StyledPopupPseudo = _styledComponents.default.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":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledPopup","exports","styled","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,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,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,IAAK;AACvC;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAGF,yBAAM,CAACG,GAErC;AACH,WAAWC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAM,GAAEC,UAAU,GAAG,CAAE,IAAG;AAAA,CAAC;AACrD;AACA;AACA;AACA;AACA,CAAC"}

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

@@ -0,0 +1,10 @@
+import React, { type MouseEventHandler, ReactNode } from 'react';
+import { PopupAlignment, PopupCoordinates } from '../types';
+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,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _colorMode = require("../../../hooks/colorMode");
+var _types = require("../types");
+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,
+    onMouseLeave
+  } = _ref;
+  const colorMode = (0, _colorMode.useColorMode)();
+  const isBottomLeftAlignment = alignment === _types.PopupAlignment.BottomLeft;
+  const isTopLeftAlignment = alignment === _types.PopupAlignment.TopLeft;
+  const isTopRightAlignment = alignment === _types.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
+    },
+    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.default.createElement(_PopupContent.StyledPopupContentInner, null, content));
+});
+PopupContent.displayName = 'PopupContent';
+var _default = exports.default = PopupContent;
+//# 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","_colorMode","_types","_PopupContent","obj","__esModule","default","PopupContent","React","forwardRef","_ref","ref","alignment","coordinates","content","onMouseLeave","colorMode","useColorMode","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","StyledPopupContentInner","displayName","_default","exports"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import React, { type MouseEventHandler, ReactNode } from 'react';\nimport { useColorMode } from '../../../hooks/colorMode';\nimport { PopupAlignment, PopupCoordinates } from '../types';\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 = useColorMode();\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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAA0F,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAS1F,MAAMG,YAAY,gBAAGC,cAAK,CAACC,UAAU,CACjC,CAAAC,IAAA,EAAoDC,GAAG,KAAK;EAAA,IAA3D;IAAEC,SAAS;IAAEC,WAAW;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAL,IAAA;EAC9C,MAAMM,SAAS,GAAG,IAAAC,uBAAY,EAAC,CAAC;EAEhC,MAAMC,qBAAqB,GAAGN,SAAS,KAAKO,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGT,SAAS,KAAKO,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGX,SAAS,KAAKO,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIzB,MAAA,CAAAQ,OAAA,CAAAwB,aAAA,CAAC3B,aAAA,CAAA4B,wBAAwB;IACrBC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BlB,SAAS,EAAEA,SAAU;IACrBmB,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,EAAEzB,SAAU;IACpBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBI,YAAY,EAAEA,YAAa;IAC3BuB,KAAK,EAAE;MAAEC,IAAI,EAAE1B,WAAW,CAAC2B,CAAC;MAAEC,GAAG,EAAE5B,WAAW,CAACqB;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,gBAEFpC,MAAA,CAAAQ,OAAA,CAAAwB,aAAA,CAAC3B,aAAA,CAAA2C,uBAAuB,QAAEhC,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDP,YAAY,CAACwC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3C,OAAA,GAE3BC,YAAY"}