@chayns-components/core 5.0.0-beta.12 → 5.0.0-beta.1200

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

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _numberInput = require("../../constants/numberInput");
+var _numberInput2 = require("../../utils/numberInput");
+var _Input = _interopRequireDefault(require("../input/Input"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const NumberInput = ({
+  isDecimalInput,
+  isMoneyInput,
+  isTimeInput,
+  isInvalid,
+  maxNumber = Infinity,
+  value,
+  shouldTriggerChangeOnFormat = true,
+  placeholder,
+  onBlur,
+  isDisabled,
+  onChange,
+  shouldShowOnlyBottomBorder,
+  minNumber = -Infinity
+}) => {
+  // the plainText will be shown in the input, when it is in focus
+  const [plainText, setPlainText] = (0, _react.useState)('');
+  // the formattedValue will be shown in the input, when it is not in focus
+  const [formattedValue, setFormattedValue] = (0, _react.useState)('');
+  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
+  const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = (0, _react.useState)(false);
+  const [isValueInvalid, setIsValueInvalid] = (0, _react.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(_numberInput.NUMBER_CLEAR_REGEX, '');
+    if (isTimeInput && (sanitizedValueString.includes(':') && sanitizedValueString.length > 5 || !sanitizedValueString.includes(':') && sanitizedValueString.length > 4)) {
+      return;
+    }
+    const valueToCheck = sanitizedValueString.replaceAll(',', '.');
+    if (!(0, _numberInput2.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 = (0, _numberInput2.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 ? '' : (0, _numberInput2.formateNumber)({
+      number: isTimeInput ? sanitizedValue : parsedNumber,
+      isMoneyInput,
+      isTimeInput
+    });
+    setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);
+    setPlainText(newStringValue.replaceAll('.', ''));
+    setHasFocus(false);
+    if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {
+      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' && shouldTriggerChangeOnFormat) {
+      onChange(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));
+    }
+    setIsValueInvalid(false);
+    setHasFocus(true);
+  };
+
+  // updates the formattedValue, when the value changes
+  (0, _react.useEffect)(() => {
+    let parsedNumber = null;
+    if (!isTimeInput) {
+      parsedNumber = (0, _numberInput2.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 ? '' : `${(0, _numberInput2.formateNumber)({
+      number: isTimeInput ? plainText : parsedNumber,
+      isMoneyInput,
+      isTimeInput
+    })}${isMoneyInput ? ' €' : ''}`);
+  }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);
+  (0, _react.useEffect)(() => {
+    if (typeof value === 'string') {
+      setPlainText(value.replace('€', '').replaceAll(' ', ''));
+    }
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(_Input.default, {
+    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';
+var _default = exports.default = NumberInput;
+//# sourceMappingURL=NumberInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","shouldTriggerChangeOnFormat","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName","_default","exports"],"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     * Whether the onChange function should be triggert when the value is formatted on the focus or blur\n     */\n    shouldTriggerChangeOnFormat?: 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    shouldTriggerChangeOnFormat = true,\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' && shouldTriggerChangeOnFormat) {\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' && shouldTriggerChangeOnFormat) {\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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAmC,SAAAI,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AA8DnC,MAAMgB,WAAiC,GAAGA,CAAC;EACvCC,cAAc;EACdC,YAAY;EACZC,WAAW;EACXC,SAAS;EACTC,SAAS,GAAGC,QAAQ;EACpBC,KAAK;EACLC,2BAA2B,GAAG,IAAI;EAClCC,WAAW;EACXC,MAAM;EACNC,UAAU;EACVC,QAAQ;EACRC,0BAA0B;EAC1BC,SAAS,GAAG,CAACR;AACjB,CAAC,KAAK;EACF;EACA,MAAM,CAACS,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAS,EAAE,CAAC;EACtD;EACA,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAF,eAAQ,EAAS,EAAE,CAAC;EAChE,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAJ,eAAQ,EAAU,KAAK,CAAC;EACxD,MAAM,CAACK,uBAAuB,EAAEC,0BAA0B,CAAC,GAAG,IAAAN,eAAQ,EAAU,KAAK,CAAC;EAEtF,MAAM,CAACO,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAR,eAAQ,EAAC,KAAK,CAAC;EAC3D,MAAMS,gBAAgB,GAAGjB,WAAW,KAAKP,YAAY,GAAG,GAAG,GAAGyB,SAAS,CAAC;EAExE,MAAMC,aAAmD,GAAIC,KAAK,IAAK;IACnE,MAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAACxB,KAAK;IAEnC,MAAMyB,oBAAoB,GAAGF;IACzB;IAAA,CACCG,OAAO,CAACC,+BAAkB,EAAE,EAAE,CAAC;IAEpC,IACI/B,WAAW,KACT6B,oBAAoB,CAACG,QAAQ,CAAC,GAAG,CAAC,IAAIH,oBAAoB,CAACI,MAAM,GAAG,CAAC,IAClE,CAACJ,oBAAoB,CAACG,QAAQ,CAAC,GAAG,CAAC,IAAIH,oBAAoB,CAACI,MAAM,GAAG,CAAE,CAAC,EAC/E;MACE;IACJ;IAEA,MAAMC,YAAY,GAAGL,oBAAoB,CAACM,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;IAE9D,IAAI,CAAC,IAAAC,2BAAa,EAAC;MAAEC,MAAM,EAAEH,YAAY;MAAEnC,YAAY;MAAED,cAAc;MAAEE;IAAY,CAAC,CAAC,EAAE;MACrF;IACJ;IAEA,IACKE,SAAS,IAAIoC,MAAM,CAACJ,YAAY,CAAC,GAAGhC,SAAS,IAC7CS,SAAS,IAAI2B,MAAM,CAACJ,YAAY,CAAC,GAAGvB,SAAU,EACjD;MACE;IACJ;IAEA,IAAIgB,QAAQ,CAACM,MAAM,KAAK,CAAC,IAAIN,QAAQ,CAACY,KAAK,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE;MAC9DnB,0BAA0B,CAAC,IAAI,CAAC;IACpC,CAAC,MAAM;MACHA,0BAA0B,CAAC,KAAK,CAAC;IACrC;IAEAP,YAAY,CAACgB,oBAAoB,CAACM,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAEvD,IAAI,OAAO1B,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACoB,oBAAoB,CAACM,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACvD;EACJ,CAAC;EAED,MAAMK,WAAW,GAAGA,CAAA,KAAM;IACtB,MAAMC,cAAc,GAAG7B,SAAS,CAACqB,MAAM,KAAK,CAAC,GAAG,GAAG,GAAGrB,SAAS;IAC/D,IAAI8B,YAAY,GAAG,KAAK;IACxB,IAAIC,YAAY,GAAG,IAAI;IAEvB,IAAI,CAAC3C,WAAW,EAAE;MACd2C,YAAY,GAAG,IAAAC,oCAAsB,EAAC;QAClCC,WAAW,EAAEJ,cAAc,CAACX,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAACK,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAACL,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;QAClFgB,QAAQ,EAAE/C,YAAY,GAAG,CAAC,GAAGyB;MACjC,CAAC,CAAC;MAEF,IAAImB,YAAY,KAAK,CAAC,KAAKA,YAAY,GAAGzC,SAAS,IAAIyC,YAAY,GAAGhC,SAAS,CAAC,EAAE;QAC9E+B,YAAY,GAAG,IAAI;MACvB;MAEApB,iBAAiB,CAACoB,YAAY,CAAC;IACnC;IAEA,MAAMK,cAAc,GAChBnC,SAAS,CAACqB,MAAM,KAAK,CAAC,GAChB,EAAE,GACF,IAAAe,2BAAa,EAAC;MACVC,MAAM,EAAEjD,WAAW,GAAGyC,cAAc,GAAGE,YAAY;MACnD5C,YAAY;MACZC;IACJ,CAAC,CAAC;IAEZgB,iBAAiB,CAAC,GAAG+B,cAAc,IAAIhD,YAAY,GAAG,GAAG,GAAG,EAAE,EAAE,CAAC;IACjEc,YAAY,CAACkC,cAAc,CAACZ,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAChDjB,WAAW,CAAC,KAAK,CAAC;IAElB,IAAI,OAAOT,QAAQ,KAAK,UAAU,IAAIJ,2BAA2B,EAAE;MAC/DI,QAAQ,CAACsC,cAAc,CAACZ,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAChD;IAEA,IAAI,OAAO5B,MAAM,KAAK,UAAU,EAAE;MAC9B,IAAIP,WAAW,EAAE;QACbO,MAAM,CAACwC,cAAc,EAAEL,YAAY,CAAC;MACxC,CAAC,MAAM;QACHnC,MAAM,CAACoC,YAAY,KAAK,CAAC,GAAG,IAAI,GAAGA,YAAY,EAAED,YAAY,CAAC;MAClE;IACJ;EACJ,CAAC;EAED,MAAMQ,YAAY,GAAGA,CAAA,KAAM;IACvB;IACA;IACArC,YAAY,CAACE,cAAc,CAACoB,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAACL,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACK,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;;IAErF;IACA,IAAI,OAAO1B,QAAQ,KAAK,UAAU,IAAIJ,2BAA2B,EAAE;MAC/DI,QAAQ,CAACM,cAAc,CAACoB,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAACL,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACK,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IACrF;IAEAb,iBAAiB,CAAC,KAAK,CAAC;IACxBJ,WAAW,CAAC,IAAI,CAAC;EACrB,CAAC;;EAED;EACA,IAAAiC,gBAAS,EAAC,MAAM;IACZ,IAAIR,YAAY,GAAG,IAAI;IAEvB,IAAI,CAAC3C,WAAW,EAAE;MACd2C,YAAY,GAAG,IAAAC,oCAAsB,EAAC;QAClCC,WAAW,EAAEjC,SAAS,CACjBkB,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CACjBK,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CACnBL,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAChBK,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC;QACxBW,QAAQ,EAAE/C,YAAY,GAAG,CAAC,GAAGyB;MACjC,CAAC,CAAC;;MAEF;MACA,IAAI,CAACP,QAAQ,EAAE;QACXK,iBAAiB,CAACqB,YAAY,GAAGzC,SAAS,IAAIyC,YAAY,GAAGhC,SAAS,CAAC;MAC3E;IACJ;IAEAK,iBAAiB,CACbJ,SAAS,CAACqB,MAAM,KAAK,CAAC,GAChB,EAAE,GACF,GAAG,IAAAe,2BAAa,EAAC;MACbC,MAAM,EAAEjD,WAAW,GAAGY,SAAS,GAAG+B,YAAY;MAC9C5C,YAAY;MACZC;IACJ,CAAC,CAAC,GAAGD,YAAY,GAAG,IAAI,GAAG,EAAE,EACvC,CAAC;EACL,CAAC,EAAE,CAACkB,QAAQ,EAAElB,YAAY,EAAEC,WAAW,EAAEE,SAAS,EAAES,SAAS,EAAEC,SAAS,CAAC,CAAC;EAE1E,IAAAuC,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO/C,KAAK,KAAK,QAAQ,EAAE;MAC3BS,YAAY,CAACT,KAAK,CAAC0B,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACK,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAC5D;EACJ,CAAC,EAAE,CAAC/B,KAAK,CAAC,CAAC;EAEX,oBACIjC,MAAA,CAAAS,OAAA,CAAAwE,aAAA,CAAC5E,MAAA,CAAAI,OAAK;IACFuC,uBAAuB,EAAEA,uBAAwB;IACjDT,0BAA0B,EAAEA,0BAA2B;IACvD2C,SAAS,EAAC,SAAS;IACnB5C,QAAQ,EAAEgB,aAAc;IACxBrB,KAAK,EAAEa,QAAQ,GAAGL,SAAS,GAAGG,cAAe;IAC7CT,WAAW,EAAEiB,gBAAiB;IAC9BhB,MAAM,EAAEiC,WAAY;IACpBc,OAAO,EAAEJ,YAAa;IACtB1C,UAAU,EAAEA,UAAW;IACvBP,SAAS,EAAE,OAAOA,SAAS,KAAK,SAAS,GAAGA,SAAS,GAAGoB,cAAe;IACvEkC,yBAAyB,EAAE7C;EAA2B,CACzD,CAAC;AAEV,CAAC;AAEDb,WAAW,CAAC2D,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9E,OAAA,GAEzBiB,WAAW","ignoreList":[]}

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = require("styled-components");
+var _pageProvider = require("../../utils/pageProvider");
+var _ColorSchemeProvider = _interopRequireDefault(require("../color-scheme-provider/ColorSchemeProvider"));
+var _PageProvider = require("./PageProvider.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+`;
+const PageProvider = ({
+  children,
+  color,
+  colorMode,
+  secondaryColor,
+  siteId,
+  style = {},
+  shouldRemovePadding,
+  shouldUseUsableHeight,
+  customVariables
+}) => {
+  const {
+    runtimeEnvironment
+  } = (0, _chaynsApi.useEnvironment)();
+  const usableHeight = (0, _pageProvider.useUsableHeight)();
+  const shouldUsePadding = !shouldRemovePadding && ![_chaynsApi.RuntimeEnviroment.IntercomPlugin, _chaynsApi.RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
+  return /*#__PURE__*/_react.default.createElement(_PageProvider.StyledPageProvider, {
+    className: "page-provider",
+    $shouldUsePadding: shouldUsePadding,
+    $usableHeight: shouldUseUsableHeight ? usableHeight : undefined
+  }, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
+    color: color,
+    secondaryColor: secondaryColor,
+    colorMode: colorMode,
+    siteId: siteId,
+    style: shouldUseUsableHeight ? {
+      ...style,
+      height: '100%'
+    } : style,
+    customVariables: customVariables
+  }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
+};
+PageProvider.displayName = 'PageProvider';
+var _default = exports.default = PageProvider;
+//# sourceMappingURL=PageProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_styledComponents","_pageProvider","_ColorSchemeProvider","_PageProvider","e","__esModule","default","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldRemovePadding","shouldUseUsableHeight","customVariables","runtimeEnvironment","useEnvironment","usableHeight","useUsableHeight","shouldUsePadding","RuntimeEnviroment","IntercomPlugin","PagemakerPlugin","includes","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","height","displayName","_default","exports"],"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    secondaryColor,\n    siteId,\n    style = {},\n    shouldRemovePadding,\n    shouldUseUsableHeight,\n    customVariables,\n}) => {\n    const { runtimeEnvironment } = useEnvironment();\n\n    const usableHeight = useUsableHeight();\n\n    const shouldUsePadding =\n        !shouldRemovePadding &&\n        ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n            runtimeEnvironment as number,\n        );\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                customVariables={customVariables}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAH,sBAAA,CAAAF,OAAA;AAGA,IAAAM,aAAA,GAAAN,OAAA;AAA2D,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAa3D,MAAMG,WAAW,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,mBAAmB;EACnBC,qBAAqB;EACrBC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,yBAAc,EAAC,CAAC;EAE/C,MAAMC,YAAY,GAAG,IAAAC,6BAAe,EAAC,CAAC;EAEtC,MAAMC,gBAAgB,GAClB,CAACP,mBAAmB,IACpB,CAAC,CAACQ,4BAAiB,CAACC,cAAc,EAAED,4BAAiB,CAACE,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9ER,kBACJ,CAAC;EAEL,oBACIrB,MAAA,CAAAQ,OAAA,CAAAsB,aAAA,CAACzB,aAAA,CAAA0B,kBAAkB;IACfC,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAER,gBAAiB;IACpCS,aAAa,EAAEf,qBAAqB,GAAGI,YAAY,GAAGY;EAAU,gBAEhEnC,MAAA,CAAAQ,OAAA,CAAAsB,aAAA,CAAC1B,oBAAA,CAAAI,OAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEE,qBAAqB,GAAG;MAAE,GAAGF,KAAK;MAAEmB,MAAM,EAAE;IAAO,CAAC,GAAGnB,KAAM;IACpEG,eAAe,EAAEA;EAAgB,GAEhCR,QACgB,CAAC,eACtBZ,MAAA,CAAAQ,OAAA,CAAAsB,aAAA,CAACrB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDE,YAAY,CAAC0B,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,GAE3BG,YAAY","ignoreList":[]}

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPageProvider = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledPageProvider = exports.StyledPageProvider = _styledComponents.default.div`
+    height: ${({
+  $usableHeight
+}) => $usableHeight ? `${$usableHeight}px` : undefined};
+    position: relative;
+    ${({
+  $shouldUsePadding
+}) => $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/cjs/components/page-provider/PageProvider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageProvider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPageProvider","exports","styled","div","$usableHeight","undefined","$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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,cAAc,CAAC;EAAEC;AAAc,CAAC,KAAMA,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAU;AACvF;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,GACX;AACd;AACA;AACA;AACA;AACA,KAAK,GACS,eAAe;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,241 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _uuid = require("../../hooks/uuid");
+var _popup = require("../../types/popup");
+var _AreaContextProvider = _interopRequireWildcard(require("../area-provider/AreaContextProvider"));
+var _PopupContentWrapper = _interopRequireDefault(require("./popup-content-wrapper/PopupContentWrapper"));
+var _Popup = require("./Popup.styles");
+var _element = require("../../hooks/element");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
+  alignment,
+  content,
+  onShow,
+  container,
+  onHide,
+  children,
+  shouldHideOnChildrenLeave,
+  shouldShowOnHover = false,
+  shouldUseChildrenWidth = true,
+  shouldScrollWithContent = false,
+  shouldUseFullWidth = false,
+  yOffset = 0
+}, ref) => {
+  const [coordinates, setCoordinates] = (0, _react2.useState)({
+    x: 0,
+    y: 0
+  });
+  const [internalAlignment, setInternalAlignment] = (0, _react2.useState)(_popup.PopupAlignment.TopLeft);
+  const [offset, setOffset] = (0, _react2.useState)(0);
+  const [isOpen, setIsOpen] = (0, _react2.useState)(false);
+  const [portal, setPortal] = (0, _react2.useState)();
+  const [pseudoSize, setPseudoSize] = (0, _react2.useState)();
+  const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
+  const timeout = (0, _react2.useRef)();
+  const uuid = (0, _uuid.useUuid)();
+  const {
+    height,
+    width,
+    measuredElement
+  } = (0, _element.useMeasuredClone)({
+    content
+  });
+  const popupContentRef = (0, _react2.useRef)(null);
+  const popupRef = (0, _react2.useRef)(null);
+  (0, _react2.useEffect)(() => {
+    if (popupRef.current && !container) {
+      const el = popupRef.current;
+      const element = el.closest('.dialog-inner, .page-provider, .tapp, body');
+      setNewContainer(element);
+    }
+  }, [container]);
+  (0, _react2.useEffect)(() => {
+    if (container instanceof Element) {
+      setNewContainer(container);
+    }
+  }, [container]);
+  (0, _react2.useEffect)(() => {
+    setPseudoSize({
+      height,
+      width
+    });
+  }, [height, width]);
+  const handleShow = (0, _react2.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: containerHeight,
+        width: containerWidth,
+        top,
+        left
+      } = newContainer.getBoundingClientRect();
+      const zoomX = containerWidth / newContainer.offsetWidth;
+      const zoomY = containerHeight / newContainer.offsetHeight;
+      if (pseudoHeight > childrenTop - 25 || alignment === _popup.PopupAlignment.BottomLeft || alignment === _popup.PopupAlignment.BottomRight) {
+        let isRight = false;
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25 || alignment === _popup.PopupAlignment.BottomRight) {
+          setInternalAlignment(_popup.PopupAlignment.BottomRight);
+          isRight = true;
+        } else {
+          setInternalAlignment(_popup.PopupAlignment.BottomLeft);
+        }
+        const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + 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 || alignment === _popup.PopupAlignment.TopRight) {
+          setInternalAlignment(_popup.PopupAlignment.TopRight);
+          isRight = true;
+        } else {
+          setInternalAlignment(_popup.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);
+    }
+  }, [alignment, newContainer, pseudoSize, yOffset]);
+  const handleChildrenClick = () => {
+    handleShow();
+  };
+  const handleHide = (0, _react2.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  const handleMouseEnter = (0, _react2.useCallback)(() => {
+    if (shouldShowOnHover) {
+      window.clearTimeout(timeout.current);
+      handleShow();
+    }
+  }, [handleShow, shouldShowOnHover]);
+  const handleMouseLeave = (0, _react2.useCallback)(() => {
+    if (!shouldShowOnHover) {
+      return;
+    }
+    if (shouldHideOnChildrenLeave) {
+      handleHide();
+      return;
+    }
+    timeout.current = window.setTimeout(() => {
+      handleHide();
+    }, 500);
+  }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);
+  const handleDocumentClick = (0, _react2.useCallback)(event => {
+    var _popupContentRef$curr;
+    if (!((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(event.target))) {
+      handleHide();
+    }
+  }, [handleHide]);
+  (0, _react2.useImperativeHandle)(ref, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+
+  // useEffect(() => {
+  //     void getWindowMetrics().then((result) => {
+  //         if (result.topBarHeight) {
+  //             setMenuHeight(result.topBarHeight);
+  //         }
+  //     });
+  // }, []);
+
+  (0, _react2.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, _react2.useEffect)(() => {
+    if (!newContainer) {
+      return;
+    }
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+      initial: false
+    }, isOpen && /*#__PURE__*/_react2.default.createElement(_PopupContentWrapper.default, {
+      width: (pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width) ?? 0,
+      offset: offset,
+      shouldScrollWithContent: shouldScrollWithContent,
+      coordinates: coordinates,
+      key: `tooltip_${uuid}`,
+      alignment: internalAlignment,
+      ref: popupContentRef,
+      onMouseLeave: handleMouseLeave,
+      onMouseEnter: handleMouseEnter
+    }, /*#__PURE__*/_react2.default.createElement(_AreaContextProvider.default, {
+      shouldChangeColor: false
+    }, content))), newContainer));
+  }, [internalAlignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width, uuid, shouldScrollWithContent]);
+  const areaContextProviderValue = (0, _react2.useMemo)(() => ({
+    shouldChangeColor: true
+  }), []);
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, measuredElement, /*#__PURE__*/_react2.default.createElement(_Popup.StyledPopup, {
+    className: "beta-chayns-popup",
+    ref: popupRef,
+    onClick: handleChildrenClick,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter,
+    $shouldUseChildrenWidth: shouldUseChildrenWidth,
+    $shouldUseFullWidth: shouldUseFullWidth
+  }, /*#__PURE__*/_react2.default.createElement(_AreaContextProvider.AreaContext.Provider, {
+    value: areaContextProviderValue
+  }, children)), portal);
+});
+Popup.displayName = 'Popup';
+var _default = exports.default = Popup;
+//# sourceMappingURL=Popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["_react","require","_react2","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_PopupContentWrapper","_interopRequireDefault","_Popup","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Popup","forwardRef","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","internalAlignment","setInternalAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","useRef","uuid","useUuid","height","width","measuredElement","useMeasuredClone","popupContentRef","popupRef","useEffect","current","el","element","closest","Element","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","document","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","areaContextProviderValue","useMemo","Fragment","StyledPopup","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","AreaContext","Provider","value","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\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, { AreaContext } from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n    /**\n     * The alignment of the popup. By default, the popup will calculate the best alignment.\n     */\n    alignment?: PopupAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the tooltip should be hidden after the children is not hovered.\n     */\n    shouldHideOnChildrenLeave?: boolean;\n    /**\n     * Whether the popup should scroll with the content.\n     */\n    shouldScrollWithContent?: boolean;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n    /**\n     * Whether the popup children should use the full width.\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            alignment,\n            content,\n            onShow,\n            container,\n            onHide,\n            children,\n            shouldHideOnChildrenLeave,\n            shouldShowOnHover = false,\n            shouldUseChildrenWidth = true,\n            shouldScrollWithContent = false,\n            shouldUseFullWidth = false,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n            PopupAlignment.TopLeft,\n        );\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        const { height, width, measuredElement } = useMeasuredClone({ content });\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupRef.current && !container) {\n                const el = popupRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            setPseudoSize({ height, width });\n        }, [height, width]);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                const {\n                    height: containerHeight,\n                    width: containerWidth,\n                    top,\n                    left,\n                } = newContainer.getBoundingClientRect();\n\n                const zoomX = containerWidth / (newContainer as HTMLElement).offsetWidth;\n                const zoomY = containerHeight / (newContainer as HTMLElement).offsetHeight;\n\n                if (\n                    pseudoHeight > childrenTop - 25 ||\n                    alignment === PopupAlignment.BottomLeft ||\n                    alignment === PopupAlignment.BottomRight\n                ) {\n                    let isRight = false;\n\n                    if (\n                        pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n                        alignment === PopupAlignment.BottomRight\n                    ) {\n                        setInternalAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setInternalAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x =\n                        (childrenLeft + childrenWidth / 2 - left) / zoomX + 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 (\n                        pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n                        alignment === PopupAlignment.TopRight\n                    ) {\n                        setInternalAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setInternalAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x =\n                        (childrenLeft + childrenWidth / 2 - left) / zoomX + 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        }, [alignment, 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={internalAlignment}\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            internalAlignment,\n            newContainer,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            pseudoSize?.width,\n            uuid,\n            shouldScrollWithContent,\n        ]);\n\n        const areaContextProviderValue = useMemo(\n            () => ({ shouldChangeColor: true }),\n            [],\n        );\n\n        return (\n            <>\n                {measuredElement}\n                <StyledPopup\n                    className=\"beta-chayns-popup\"\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                    $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    $shouldUseFullWidth={shouldUseFullWidth}\n                >\n                    <AreaContext.Provider value={areaContextProviderValue}>\n                        {children}\n                    </AreaContext.Provider>\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPopupPseudo = exports.StyledPopup = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledPopup = exports.StyledPopup = _styledComponents.default.span`
+    cursor: pointer;
+    position: relative;
+
+    ${({
+  $shouldUseFullWidth
+}) => $shouldUseFullWidth && (0, _styledComponents.css)`
+            width: 100%;
+        `};
+
+    ${({
+  $shouldUseChildrenWidth
+}) => $shouldUseChildrenWidth && (0, _styledComponents.css)`
+            display: flex;
+            width: fit-content;
+            height: fit-content;
+        `}
+`;
+const StyledPopupPseudo = exports.StyledPopupPseudo = _styledComponents.default.div`
+    top: ${({
+  $menuHeight
+}) => `${$menuHeight - 0}px`};
+    left: 0;
+    margin: 2px;
+    pointer-events: none;
+    opacity: 0;
+    position: absolute;
+`;
+//# sourceMappingURL=Popup.styles.js.map