@chayns-components/core 5.0.0-beta.104 → 5.0.0-beta.1040

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinderItem.styles.js","names":["styled","css","StyledMentionFinderItem","div","_ref","theme","_ref2","$isActive","StyledMentionFinderItemImage","img","_ref3","_ref4","$shouldShowRoundImage","_ref5","StyledMentionFinderItemContent","_ref6","text","StyledMentionFinderItemContentName","StyledMentionFinderItemContentInfo"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMentionFinderItemProps = WithTheme<{ $isActive: boolean }>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    padding: 10px 8px;\n\n    &:not(:last-child) {\n        border-bottom: 1px solid\n            rgba(${({ theme }: StyledMentionFinderItemProps) => theme['text-rgb']}, 0.15);\n    }\n\n    ${({ $isActive, theme }) =>\n        $isActive &&\n        css`\n            background-color: ${theme['102']} !important;\n        `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<{\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledMentionFinderItemImage = styled.img<StyledMentionFinderItemImageProps>`\n    background-color: rgba(\n        ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : 'initial')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMentionFinderItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledMentionFinderItemContentProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemContent = styled.div`\n    color: ${({ theme }: StyledMentionFinderItemContentProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    justify-content: center;\n    line-height: normal;\n    margin-left: 10px;\n    min-width: 0;\n`;\n\nexport const StyledMentionFinderItemContentName = styled.div``;\n\nexport const StyledMentionFinderItemContentInfo = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmBC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA;AACjF;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEF;EAAM,CAAC,GAAAC,KAAA;EAAA,OACnBC,SAAS,IACTN,GAAG;AACX,gCAAgCI,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMG,4BAA4B,GAAGR,MAAM,CAACS,GAAsC;AACzF;AACA,UAAUC,KAAA;EAAA,IAAC;IAAEL;EAAyC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,UAAU,CAAC;AAAA;AAC7E;AACA;AACA,qBAAqBM,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAG,SAAS;AAAA,CAAC;AAC/F;AACA,eAAeC,KAAA;EAAA,IAAC;IAAER;EAAyC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,SAAS,CAAC;AAAA;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMS,8BAA8B,GAAGd,MAAM,CAACG,GAAG;AACxD,aAAaY,KAAA;EAAA,IAAC;IAAEV;EAA2C,CAAC,GAAAU,KAAA;EAAA,OAAKV,KAAK,CAACW,IAAI;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGjB,MAAM,CAACG,GAAG,EAAE;AAE9D,OAAO,MAAMe,kCAAkC,GAAGlB,MAAM,CAACG,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

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

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

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

package/lib/esm/components/page-provider/PageProvider.js

@@ -0,0 +1,49 @@
+import { RuntimeEnviroment, useEnvironment } from 'chayns-api';
+import React from 'react';
+import { createGlobalStyle } from 'styled-components';
+import { useUsableHeight } from '../../utils/pageProvider';
+import ColorSchemeProvider from '../color-scheme-provider/ColorSchemeProvider';
+import { StyledPageProvider } from './PageProvider.styles';
+const GlobalStyle = createGlobalStyle`
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+`;
+const PageProvider = _ref => {
+  let {
+    children,
+    color,
+    colorMode,
+    cssVariables = {},
+    secondaryColor,
+    siteId,
+    style = {},
+    designSettings,
+    shouldRemovePadding,
+    shouldUseUsableHeight
+  } = _ref;
+  const {
+    runtimeEnvironment
+  } = useEnvironment();
+  const shouldUsePadding = !shouldRemovePadding && ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
+  const usableHeight = useUsableHeight();
+  return /*#__PURE__*/React.createElement(StyledPageProvider, {
+    className: "page-provider",
+    $shouldUsePadding: shouldUsePadding,
+    $usableHeight: shouldUseUsableHeight ? usableHeight : undefined
+  }, /*#__PURE__*/React.createElement(ColorSchemeProvider, {
+    color: color,
+    secondaryColor: secondaryColor,
+    colorMode: colorMode,
+    siteId: siteId,
+    style: shouldUseUsableHeight ? {
+      ...style,
+      height: '100%'
+    } : style,
+    designSettings: designSettings,
+    cssVariables: cssVariables
+  }, children), /*#__PURE__*/React.createElement(GlobalStyle, null));
+};
+PageProvider.displayName = 'PageProvider';
+export default PageProvider;
+//# sourceMappingURL=PageProvider.js.map

package/lib/esm/components/page-provider/PageProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","runtimeEnvironment","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","usableHeight","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Whether the padding should be removed.\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Whether the usable height should be used.\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    designSettings,\n    shouldRemovePadding,\n    shouldUseUsableHeight,\n}) => {\n    const { runtimeEnvironment } = useEnvironment();\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n            runtimeEnvironment as number,\n        );\n\n    const usableHeight = useUsableHeight();\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $shouldUsePadding={shouldUsePadding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                siteId={siteId}\n                style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n                designSettings={designSettings}\n                cssVariables={cssVariables}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;AAa1D,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGC,IAAA,IAWtC;EAAA,IAXuC;IACzCC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,MAAM;IACNC,KAAK,GAAG,CAAC,CAAC;IACVC,cAAc;IACdC,mBAAmB;IACnBC;EACJ,CAAC,GAAAV,IAAA;EACG,MAAM;IAAEW;EAAmB,CAAC,GAAGnB,cAAc,CAAC,CAAC;EAC/C,MAAMoB,gBAAgB,GAClB,CAACH,mBAAmB,IACpB,CAAC,CAAClB,iBAAiB,CAACsB,cAAc,EAAEtB,iBAAiB,CAACuB,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EJ,kBACJ,CAAC;EAEL,MAAMK,YAAY,GAAGrB,eAAe,CAAC,CAAC;EAEtC,oBACIF,KAAA,CAAAwB,aAAA,CAACpB,kBAAkB;IACfqB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEP,gBAAiB;IACpCQ,aAAa,EAAEV,qBAAqB,GAAGM,YAAY,GAAGK;EAAU,gBAEhE5B,KAAA,CAAAwB,aAAA,CAACrB,mBAAmB;IAChBM,KAAK,EAAEA,KAAM;IACbG,cAAc,EAAEA,cAAe;IAC/BF,SAAS,EAAEA,SAAU;IACrBG,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEe,MAAM,EAAE;IAAO,CAAC,GAAGf,KAAM;IACpEC,cAAc,EAAEA,cAAe;IAC/BJ,YAAY,EAAEA;EAAa,GAE1BH,QACgB,CAAC,eACtBR,KAAA,CAAAwB,aAAA,CAACnB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACwB,WAAW,GAAG,cAAc;AAEzC,eAAexB,YAAY","ignoreList":[]}

package/lib/esm/components/page-provider/PageProvider.styles.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+export const StyledPageProvider = styled.div`
+    height: ${_ref => {
+  let {
+    $usableHeight
+  } = _ref;
+  return $usableHeight ? `${$usableHeight}px` : undefined;
+}};
+    position: relative;
+    ${_ref2 => {
+  let {
+    $shouldUsePadding
+  } = _ref2;
+  return $shouldUsePadding ? `
+        padding: 15px 10px 20px;
+        @media screen and (min-width: 33.5em) {
+            padding: 35px 43px 30px;
+        }
+    ` : 'padding: 0px;';
+}}
+
+    .color-scheme-provider:first-child:not(td) {
+        & > h1,
+        & > .h1,
+        & > h2,
+        & > .h2,
+        & > h3,
+        & > .h3,
+        & > h4,
+        & > .h4,
+        & > h5,
+        & > .h5 {
+            &:first-of-type:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+`;
+//# sourceMappingURL=PageProvider.styles.js.map

package/lib/esm/components/page-provider/PageProvider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageProvider.styles.js","names":["styled","StyledPageProvider","div","_ref","$usableHeight","undefined","_ref2","$shouldUsePadding"],"sources":["../../../../src/components/page-provider/PageProvider.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\ntype StyledPageProviderProps = {\n    $shouldUsePadding?: boolean;\n    $usableHeight?: CSSProperties['height'];\n};\n\nexport const StyledPageProvider = styled.div<StyledPageProviderProps>`\n    height: ${({ $usableHeight }) => ($usableHeight ? `${$usableHeight}px` : undefined)};\n    position: relative;\n    ${({ $shouldUsePadding }) =>\n        $shouldUsePadding\n            ? `\n        padding: 15px 10px 20px;\n        @media screen and (min-width: 33.5em) {\n            padding: 35px 43px 30px;\n        }\n    `\n            : 'padding: 0px;'}\n\n    .color-scheme-provider:first-child:not(td) {\n        & > h1,\n        & > .h1,\n        & > h2,\n        & > .h2,\n        & > h3,\n        & > .h3,\n        & > h4,\n        & > .h4,\n        & > h5,\n        & > .h5 {\n            &:first-of-type:first-child {\n                margin-top: 0;\n            }\n        }\n    }\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAOtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,IAAA;EAAA,OAAMC,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAS;AAAA,CAAC;AACvF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,KAAA;EAAA,OACpBC,iBAAiB,GACX;AACd;AACA;AACA;AACA;AACA,KAAK,GACS,eAAe;AAAA;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,245 @@
+import { getWindowMetrics } from 'chayns-api';
+import { AnimatePresence } from 'motion/react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useUuid } from '../../hooks/uuid';
+import { PopupAlignment } from '../../types/popup';
+import AreaContextProvider from '../area-provider/AreaContextProvider';
+import PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';
+import { StyledPopup, StyledPopupPseudo } from './Popup.styles';
+const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    content,
+    onShow,
+    container,
+    onHide,
+    children,
+    shouldHideOnChildrenLeave,
+    shouldShowOnHover = false,
+    shouldUseChildrenWidth = true,
+    shouldScrollWithContent = false,
+    yOffset = 0
+  } = _ref;
+  const [coordinates, setCoordinates] = useState({
+    x: 0,
+    y: 0
+  });
+  const [alignment, setAlignment] = useState(PopupAlignment.TopLeft);
+  const [offset, setOffset] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [portal, setPortal] = useState();
+  const [menuHeight, setMenuHeight] = useState(0);
+  const [isMeasuring, setIsMeasuring] = useState(true);
+  const [pseudoSize, setPseudoSize] = useState();
+  const [newContainer, setNewContainer] = useState(container ?? null);
+  const timeout = useRef();
+  const uuid = useUuid();
+
+  // ToDo: Replace with hook if new chayns api is ready
+
+  const popupContentRef = useRef(null);
+  const popupPseudoContentRef = useRef(null);
+  const popupRef = useRef(null);
+  useEffect(() => {
+    if (popupRef.current && !container) {
+      const el = popupRef.current;
+      const element = el.closest('.dialog-inner, .page-provider, .tapp, body');
+      setNewContainer(element);
+    }
+  }, [container]);
+  useEffect(() => {
+    if (container instanceof Element) {
+      setNewContainer(container);
+    }
+  }, [container]);
+  const measureHeight = () => {
+    if (popupPseudoContentRef.current) {
+      const height = popupPseudoContentRef.current.offsetHeight;
+      const width = popupPseudoContentRef.current.offsetWidth + 1;
+      setPseudoSize({
+        height,
+        width
+      });
+    }
+  };
+  useEffect(() => {
+    measureHeight();
+    setIsMeasuring(false);
+  }, []);
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMeasuring(true);
+      setTimeout(() => {
+        measureHeight();
+        setIsMeasuring(false);
+      }, 0);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  const handleShow = useCallback(() => {
+    if (popupRef.current && pseudoSize) {
+      if (!newContainer) {
+        return;
+      }
+      const {
+        height: pseudoHeight,
+        width: pseudoWidth
+      } = pseudoSize;
+      const {
+        height: childrenHeight,
+        left: childrenLeft,
+        top: childrenTop,
+        width: childrenWidth
+      } = popupRef.current.getBoundingClientRect();
+      const {
+        height,
+        width,
+        top,
+        left
+      } = newContainer.getBoundingClientRect();
+      const zoomX = width / newContainer.offsetWidth;
+      const zoomY = height / newContainer.offsetHeight;
+      if (pseudoHeight > childrenTop - 25) {
+        let isRight = false;
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(PopupAlignment.BottomRight);
+          isRight = true;
+        } else {
+          setAlignment(PopupAlignment.BottomLeft);
+        }
+        const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;
+        const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop - yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
+        setCoordinates({
+          x: newX < 23 ? 23 : newX,
+          y
+        });
+      } else {
+        let isRight = false;
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(PopupAlignment.TopRight);
+          isRight = true;
+        } else {
+          setAlignment(PopupAlignment.TopLeft);
+        }
+        const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;
+        const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop - yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
+        setCoordinates({
+          x: newX < 23 ? 23 : newX,
+          y
+        });
+      }
+      setIsOpen(true);
+    }
+  }, [newContainer, pseudoSize, yOffset]);
+  const handleChildrenClick = () => {
+    handleShow();
+  };
+  const handleHide = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleMouseEnter = useCallback(() => {
+    if (shouldShowOnHover) {
+      window.clearTimeout(timeout.current);
+      handleShow();
+    }
+  }, [handleShow, shouldShowOnHover]);
+  const handleMouseLeave = useCallback(() => {
+    if (!shouldShowOnHover) {
+      return;
+    }
+    if (shouldHideOnChildrenLeave) {
+      handleHide();
+      return;
+    }
+    timeout.current = window.setTimeout(() => {
+      handleHide();
+    }, 500);
+  }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);
+  const handleDocumentClick = useCallback(event => {
+    if (!popupContentRef.current?.contains(event.target)) {
+      handleHide();
+    }
+  }, [handleHide]);
+  useImperativeHandle(ref, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+  useEffect(() => {
+    void getWindowMetrics().then(result => {
+      if (result.topBarHeight) {
+        setMenuHeight(result.topBarHeight);
+      }
+    });
+  }, []);
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('click', handleDocumentClick, true);
+      window.addEventListener('blur', handleHide);
+      if (typeof onShow === 'function') {
+        onShow();
+      }
+    } else if (typeof onHide === 'function') {
+      onHide();
+    }
+    return () => {
+      document.removeEventListener('click', handleDocumentClick, true);
+      window.removeEventListener('blur', handleHide);
+    };
+  }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);
+  useEffect(() => {
+    if (!newContainer) {
+      return;
+    }
+    setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
+      initial: false
+    }, isOpen && /*#__PURE__*/React.createElement(PopupContentWrapper, {
+      width: pseudoSize?.width ?? 0,
+      offset: offset,
+      shouldScrollWithContent: shouldScrollWithContent,
+      coordinates: coordinates,
+      key: `tooltip_${uuid}`,
+      alignment: alignment,
+      ref: popupContentRef,
+      onMouseLeave: handleMouseLeave,
+      onMouseEnter: handleMouseEnter
+    }, /*#__PURE__*/React.createElement(AreaContextProvider, {
+      shouldChangeColor: false
+    }, content))), newContainer));
+  }, [alignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize?.width, uuid, shouldScrollWithContent]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isMeasuring && /*#__PURE__*/React.createElement(StyledPopupPseudo, {
+    ref: popupPseudoContentRef,
+    $menuHeight: menuHeight
+  }, content), /*#__PURE__*/React.createElement(StyledPopup, {
+    ref: popupRef,
+    onClick: handleChildrenClick,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter,
+    $shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, children), portal);
+});
+Popup.displayName = 'Popup';
+export default Popup;
+//# sourceMappingURL=Popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","el","element","closest","Element","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","zoomX","zoomY","isRight","BottomRight","BottomLeft","scrollLeft","scrollTop","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","document","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the tooltip should be hidden after the children is not hovered.\n     */\n    shouldHideOnChildrenLeave?: boolean;\n    /**\n     * Whether the popup should scroll with the content.\n     */\n    shouldScrollWithContent?: boolean;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container,\n            onHide,\n            children,\n            shouldHideOnChildrenLeave,\n            shouldShowOnHover = false,\n            shouldUseChildrenWidth = true,\n            shouldScrollWithContent = false,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n        const [isMeasuring, setIsMeasuring] = useState(true);\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupRef.current && !container) {\n                const el = popupRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        const measureHeight = () => {\n            if (popupPseudoContentRef.current) {\n                const height = popupPseudoContentRef.current.offsetHeight;\n                const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n                setPseudoSize({ height, width });\n            }\n        };\n\n        useEffect(() => {\n            measureHeight();\n\n            setIsMeasuring(false);\n        }, []);\n\n        useEffect(() => {\n            const handleResize = () => {\n                setIsMeasuring(true);\n\n                setTimeout(() => {\n                    measureHeight();\n                    setIsMeasuring(false);\n                }, 0);\n            };\n\n            window.addEventListener('resize', handleResize);\n\n            return () => {\n                window.removeEventListener('resize', handleResize);\n            };\n        }, []);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n                const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n                const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x =\n                        (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n                    const y =\n                        (childrenTop + childrenHeight / 2 - top) / zoomY +\n                        newContainer.scrollTop -\n                        yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x =\n                        (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n                    const y =\n                        (childrenTop + childrenHeight / 2 - top) / zoomY +\n                        newContainer.scrollTop -\n                        yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [newContainer, pseudoSize, yOffset]);\n\n        const handleChildrenClick = () => {\n            handleShow();\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            if (shouldHideOnChildrenLeave) {\n                handleHide();\n\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    handleHide();\n                }\n            },\n            [handleHide],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            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            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                width={pseudoSize?.width ?? 0}\n                                offset={offset}\n                                shouldScrollWithContent={shouldScrollWithContent}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            pseudoSize?.width,\n            uuid,\n            shouldScrollWithContent,\n        ]);\n\n        return (\n            <>\n                {isMeasuring && (\n                    <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                        {content}\n                    </StyledPopupPseudo>\n                )}\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                    $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.styles.js","names":["styled","css","StyledPopup","span","_ref","$shouldUseChildrenWidth","StyledPopupPseudo","div","_ref2","$menuHeight"],"sources":["../../../../src/components/popup/Popup.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledPopupProps = WithTheme<{\n    $shouldUseChildrenWidth: boolean;\n}>;\n\nexport const StyledPopup = styled.span<StyledPopupProps>`\n    cursor: pointer;\n    position: relative;\n\n    ${({ $shouldUseChildrenWidth }) =>\n        $shouldUseChildrenWidth &&\n        css`\n            display: flex;\n            width: fit-content;\n            height: fit-content;\n        `}\n`;\n\nexport const StyledPopupPseudo = styled.div<{\n    $menuHeight: number;\n}>`\n    top: ${({ $menuHeight }) => `${$menuHeight - 0}px`};\n    left: 0;\n    margin: 2px;\n    pointer-events: none;\n    opacity: 0;\n    position: absolute;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,WAAW,GAAGF,MAAM,CAACG,IAAsB;AACxD;AACA;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAC1BC,uBAAuB,IACvBJ,GAAG;AACX;AACA;AACA;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMK,iBAAiB,GAAGN,MAAM,CAACO,GAEtC;AACF,WAAWC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAGC,WAAW,GAAG,CAAC,IAAI;AAAA;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyledPopupContent } from './PopupContent.styles';
+const PopupContent = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledPopupContent, null, children);
+};
+PopupContent.displayName = 'PopupContent';
+export default PopupContent;
+//# sourceMappingURL=PopupContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.js","names":["React","StyledPopupContent","PopupContent","_ref","children","createElement","displayName"],"sources":["../../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport { StyledPopupContent } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    /**\n     * The elements that should be displayed inside the popup content.\n     */\n    children?: ReactNode;\n};\n\nconst PopupContent = ({ children }: PopupContentProps) => (\n    <StyledPopupContent>{children}</StyledPopupContent>\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":"AAAA,OAAOA,KAAK,MAA0B,OAAO;AAC7C,SAASC,kBAAkB,QAAQ,uBAAuB;AAS1D,MAAMC,YAAY,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAA4B,CAAC,GAAAD,IAAA;EAAA,oBACjDH,KAAA,CAAAK,aAAA,CAACJ,kBAAkB,QAAEG,QAA6B,CAAC;AAAA,CACtD;AAEDF,YAAY,CAACI,WAAW,GAAG,cAAc;AAEzC,eAAeJ,YAAY","ignoreList":[]}