@chayns-components/core 5.0.24 → 5.0.26

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

@@ -4,155 +4,236 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _reactCompilerRuntime = require("react-compiler-runtime");
 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 NumberInput = t0 => {
+  "use memo";
+
+  const $ = (0, _reactCompilerRuntime.c)(41);
+  const {
+    isDecimalInput,
+    isMoneyInput,
+    isTimeInput,
+    isInvalid,
+    maxNumber: t1,
+    value,
+    shouldTriggerChangeOnFormat: t2,
+    placeholder,
+    onBlur,
+    isDisabled,
+    onChange,
+    shouldShowOnlyBottomBorder,
+    minNumber: t3
+  } = t0;
+  const maxNumber = t1 === undefined ? Infinity : t1;
+  const shouldTriggerChangeOnFormat = t2 === undefined ? true : t2;
+  const minNumber = t3 === undefined ? -Infinity : t3;
+  const [plainText, setPlainText] = (0, _react.useState)("");
+  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 localPlaceholder = placeholder ?? (isMoneyInput ? "\u20AC" : undefined);
   const initialInputRef = (0, _react.useRef)(true);
-  const onLocalChange = event => {
-    const newValue = event.target.value;
-    initialInputRef.current = false;
-    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;
-    let newIsInvalid = false;
-    let parsedNumber = null;
-    if (!isTimeInput) {
-      parsedNumber = (0, _numberInput2.parseFloatWithDecimals)({
-        stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),
-        decimals: isMoneyInput ? 2 : undefined
-      });
-      if (parsedNumber && parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
-        newIsInvalid = true;
+  let t4;
+  if ($[0] !== isDecimalInput || $[1] !== isMoneyInput || $[2] !== isTimeInput || $[3] !== maxNumber || $[4] !== minNumber || $[5] !== onChange) {
+    t4 = event => {
+      const newValue = event.target.value;
+      initialInputRef.current = false;
+      const sanitizedValueString = newValue.replace(_numberInput.NUMBER_CLEAR_REGEX, "");
+      if (isTimeInput && (sanitizedValueString.includes(":") && sanitizedValueString.length > 5 || !sanitizedValueString.includes(":") && sanitizedValueString.length > 4)) {
+        return;
       }
-      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);
+      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 {
-        onBlur(parsedNumber, newIsInvalid);
+        setShouldRemainPlaceholder(false);
       }
-    }
-  };
-  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
+      setPlainText(sanitizedValueString.replaceAll(".", ","));
+      if (typeof onChange === "function") {
+        onChange(sanitizedValueString.replaceAll(".", ","));
+      }
+    };
+    $[0] = isDecimalInput;
+    $[1] = isMoneyInput;
+    $[2] = isTimeInput;
+    $[3] = maxNumber;
+    $[4] = minNumber;
+    $[5] = onChange;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const onLocalChange = t4;
+  let t5;
+  if ($[7] !== isMoneyInput || $[8] !== isTimeInput || $[9] !== maxNumber || $[10] !== minNumber || $[11] !== onBlur || $[12] !== onChange || $[13] !== plainText || $[14] !== shouldTriggerChangeOnFormat) {
+    t5 = () => {
+      const sanitizedValue = plainText;
+      let newIsInvalid = false;
+      let parsedNumber = null;
+      if (!isTimeInput) {
+        parsedNumber = (0, _numberInput2.parseFloatWithDecimals)({
+          stringValue: sanitizedValue.replace(",", ".").replaceAll(":", "").replace("\u20AC", ""),
+          decimals: isMoneyInput ? 2 : undefined
+        });
+        if (parsedNumber && parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
+          newIsInvalid = true;
+        }
+        setIsValueInvalid(newIsInvalid);
+      }
+      const newStringValue = plainText.length === 0 ? "" : (0, _numberInput2.formateNumber)({
+        number: isTimeInput ? sanitizedValue : parsedNumber,
+        isMoneyInput,
+        isTimeInput
       });
-
-      // checks, if a given number is invalid, if the input is not in focus
-      if (!hasFocus) {
-        if (parsedNumber === null && initialInputRef.current) {
-          setIsValueInvalid(false);
+      setFormattedValue(`${newStringValue} ${isMoneyInput ? "\u20AC" : ""}`);
+      setPlainText(newStringValue.replaceAll(".", ""));
+      setHasFocus(false);
+      if (typeof onChange === "function" && shouldTriggerChangeOnFormat) {
+        onChange(newStringValue.replaceAll(".", ""));
+      }
+      if (typeof onBlur === "function") {
+        if (isTimeInput) {
+          onBlur(newStringValue, newIsInvalid);
         } else {
-          setIsValueInvalid(parsedNumber === null || parsedNumber > maxNumber || parsedNumber < minNumber);
+          onBlur(parsedNumber, newIsInvalid);
+        }
+      }
+    };
+    $[7] = isMoneyInput;
+    $[8] = isTimeInput;
+    $[9] = maxNumber;
+    $[10] = minNumber;
+    $[11] = onBlur;
+    $[12] = onChange;
+    $[13] = plainText;
+    $[14] = shouldTriggerChangeOnFormat;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  const onLocalBlur = t5;
+  let t6;
+  if ($[16] !== formattedValue || $[17] !== onChange || $[18] !== shouldTriggerChangeOnFormat) {
+    t6 = () => {
+      setPlainText(formattedValue.replaceAll(".", "").replace("\u20AC", "").replaceAll(" ", ""));
+      if (typeof onChange === "function" && shouldTriggerChangeOnFormat) {
+        onChange(formattedValue.replaceAll(".", "").replace("\u20AC", "").replaceAll(" ", ""));
+      }
+      setIsValueInvalid(false);
+      setHasFocus(true);
+    };
+    $[16] = formattedValue;
+    $[17] = onChange;
+    $[18] = shouldTriggerChangeOnFormat;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  const onLocalFocus = t6;
+  let t7;
+  let t8;
+  if ($[20] !== hasFocus || $[21] !== isMoneyInput || $[22] !== isTimeInput || $[23] !== maxNumber || $[24] !== minNumber || $[25] !== plainText) {
+    t7 = () => {
+      let parsedNumber_0 = null;
+      if (!isTimeInput) {
+        parsedNumber_0 = (0, _numberInput2.parseFloatWithDecimals)({
+          stringValue: plainText.replace(",", ".").replaceAll(":", "").replace("\u20AC", "").replaceAll(" ", ""),
+          decimals: isMoneyInput ? 2 : undefined
+        });
+        if (!hasFocus) {
+          if (parsedNumber_0 === null && initialInputRef.current) {
+            setIsValueInvalid(false);
+          } else {
+            setIsValueInvalid(parsedNumber_0 === null || parsedNumber_0 > maxNumber || parsedNumber_0 < 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
-  });
+      setFormattedValue(plainText.length === 0 ? "" : `${(0, _numberInput2.formateNumber)({
+        number: isTimeInput ? plainText : parsedNumber_0,
+        isMoneyInput,
+        isTimeInput
+      })}${isMoneyInput ? " \u20AC" : ""}`);
+    };
+    t8 = [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText];
+    $[20] = hasFocus;
+    $[21] = isMoneyInput;
+    $[22] = isTimeInput;
+    $[23] = maxNumber;
+    $[24] = minNumber;
+    $[25] = plainText;
+    $[26] = t7;
+    $[27] = t8;
+  } else {
+    t7 = $[26];
+    t8 = $[27];
+  }
+  (0, _react.useEffect)(t7, t8);
+  let t10;
+  let t9;
+  if ($[28] !== value) {
+    t9 = () => {
+      if (typeof value === "string") {
+        setPlainText(value.replace("\u20AC", "").replaceAll(" ", ""));
+      }
+    };
+    t10 = [value];
+    $[28] = value;
+    $[29] = t10;
+    $[30] = t9;
+  } else {
+    t10 = $[29];
+    t9 = $[30];
+  }
+  (0, _react.useEffect)(t9, t10);
+  const t11 = hasFocus ? plainText : formattedValue;
+  const t12 = typeof isInvalid === "boolean" ? isInvalid : isValueInvalid;
+  let t13;
+  if ($[31] !== isDisabled || $[32] !== localPlaceholder || $[33] !== onLocalBlur || $[34] !== onLocalChange || $[35] !== onLocalFocus || $[36] !== shouldRemainPlaceholder || $[37] !== shouldShowOnlyBottomBorder || $[38] !== t11 || $[39] !== t12) {
+    t13 = /*#__PURE__*/_react.default.createElement(_Input.default, {
+      shouldRemainPlaceholder: shouldRemainPlaceholder,
+      shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+      inputMode: "decimal",
+      onChange: onLocalChange,
+      value: t11,
+      placeholder: localPlaceholder,
+      onBlur: onLocalBlur,
+      onFocus: onLocalFocus,
+      isDisabled: isDisabled,
+      isInvalid: t12,
+      shouldShowCenteredContent: shouldShowOnlyBottomBorder
+    });
+    $[31] = isDisabled;
+    $[32] = localPlaceholder;
+    $[33] = onLocalBlur;
+    $[34] = onLocalChange;
+    $[35] = onLocalFocus;
+    $[36] = shouldRemainPlaceholder;
+    $[37] = shouldShowOnlyBottomBorder;
+    $[38] = t11;
+    $[39] = t12;
+    $[40] = t13;
+  } else {
+    t13 = $[40];
+  }
+  return t13;
 };
 NumberInput.displayName = 'NumberInput';
 var _default = exports.default = NumberInput;

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

@@ -1 +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","initialInputRef","useRef","onLocalChange","event","newValue","target","current","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, useRef, 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 initialInputRef = useRef(true);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        initialInputRef.current = false;\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;\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 (\n                parsedNumber &&\n                parsedNumber !== 0 &&\n                (parsedNumber > maxNumber || parsedNumber < minNumber)\n            ) {\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, 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                if (parsedNumber === null && initialInputRef.current) {\n                    setIsValueInvalid(false);\n                } else {\n                    setIsValueInvalid(\n                        parsedNumber === null ||\n                            parsedNumber > maxNumber ||\n                            parsedNumber < minNumber,\n                    );\n                }\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":[]}
+{"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","t0","$","_reactCompilerRuntime","c","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","t1","value","shouldTriggerChangeOnFormat","t2","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","t3","undefined","Infinity","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","initialInputRef","useRef","t4","event","newValue","target","current","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalChange","t5","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalBlur","t6","onLocalFocus","t7","t8","parsedNumber_0","useEffect","t10","t9","t11","t12","t13","createElement","inputMode","displayName","_default","exports"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useRef, 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    'use memo';\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 initialInputRef = useRef(true);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        initialInputRef.current = false;\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;\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 (\n                parsedNumber &&\n                parsedNumber !== 0 &&\n                (parsedNumber > maxNumber || parsedNumber < minNumber)\n            ) {\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, 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                if (parsedNumber === null && initialInputRef.current) {\n                    setIsValueInvalid(false);\n                } else {\n                    setIsValueInvalid(\n                        parsedNumber === null ||\n                            parsedNumber > maxNumber ||\n                            parsedNumber < minNumber,\n                    );\n                }\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/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.js

@@ -23,9 +23,6 @@ const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
   const {
     colorMode
   } = (0, _chaynsApi.useSite)();
-  const {
-    browser
-  } = (0, _chaynsApi.getDevice)();
   const isBottomLeftAlignment = alignment === _popup.PopupAlignment.BottomLeft;
   const isTopLeftAlignment = alignment === _popup.PopupAlignment.TopLeft;
   const isTopRightAlignment = alignment === _popup.PopupAlignment.TopRight;
@@ -74,7 +71,7 @@ const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
                     translateY(${y})
                 `
   }, /*#__PURE__*/_react.default.createElement(_PopupContentWrapper.StyledPopupContentWrapperContent, {
-    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    className: "chayns-scrollbar",
     $maxHeight: maxHeight
   }, children));
 });

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","e","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","useSite","browser","getDevice","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","duration","transformTemplate","StyledPopupContentWrapperContent","$browser","name","$maxHeight","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { getDevice, useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n    StyledMotionPopupContentWrapper,\n    StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\nimport { BrowserName } from '../../../types/chayns';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    shouldScrollWithContent: boolean;\n    width: number;\n    maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    (\n        {\n            alignment,\n            children,\n            coordinates,\n            offset,\n            width,\n            onMouseLeave,\n            shouldScrollWithContent,\n            onMouseEnter,\n            maxHeight,\n        },\n        ref,\n    ) => {\n        const { colorMode } = useSite();\n\n        const { browser } = getDevice();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldScrollWithContent={shouldScrollWithContent}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween', duration: 0.15 }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentWrapperContent\n                    $browser={browser?.name as BrowserName}\n                    $maxHeight={maxHeight}\n                >\n                    {children}\n                </StyledPopupContentWrapperContent>\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","e","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","useSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","duration","transformTemplate","StyledPopupContentWrapperContent","className","$maxHeight","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n    StyledMotionPopupContentWrapper,\n    StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    shouldScrollWithContent: boolean;\n    width: number;\n    maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    (\n        {\n            alignment,\n            children,\n            coordinates,\n            offset,\n            width,\n            onMouseLeave,\n            shouldScrollWithContent,\n            onMouseEnter,\n            maxHeight,\n        },\n        ref,\n    ) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldScrollWithContent={shouldScrollWithContent}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween', duration: 0.15 }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentWrapperContent\n                    className=\"chayns-scrollbar\"\n                    $maxHeight={maxHeight}\n                >\n                    {children}\n                </StyledPopupContentWrapperContent>\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAGsC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AActC,MAAMG,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CACxC,CACI;EACIC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,uBAAuB;EACvBC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,GAAGZ,SAAS,KAAKa,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGf,SAAS,KAAKa,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGjB,SAAS,KAAKa,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACI3B,MAAA,CAAAM,OAAA,CAAA4B,aAAA,CAAC/B,oBAAA,CAAAgC,+BAA+B;IAC5BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEnB,SAAU;IACtBoB,OAAO,EAAE3B,MAAO;IAChB4B,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCS,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CU,SAAS,EAAEjC,SAAU;IACrBkC,wBAAwB,EAAE5B,uBAAwB;IAClDG,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBF,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;IAC3B8B,KAAK,EAAE;MAAEC,IAAI,EAAElC,WAAW,CAACmC,CAAC;MAAEC,GAAG,EAAEpC,WAAW,CAAC0B,CAAC;MAAExB;IAAM,CAAE;IAC1DmC,UAAU,EAAE;MAAEC,IAAI,EAAE,OAAO;MAAEC,QAAQ,EAAE;IAAK,CAAE;IAC9CC,iBAAiB,EAAEA,CAAC;MAAEd,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCT,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCM,CAAC;AAClC;EAAkB,gBAEFtC,MAAA,CAAAM,OAAA,CAAA4B,aAAA,CAAC/B,oBAAA,CAAAkD,gCAAgC;IAC7BC,SAAS,EAAC,kBAAkB;IAC5BC,UAAU,EAAErC;EAAU,GAErBP,QAC6B,CACL,CAAC;AAE1C,CACJ,CAAC;AAEDJ,mBAAmB,CAACiD,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApD,OAAA,GAElCC,mBAAmB","ignoreList":[]}

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

@@ -92,39 +92,5 @@ const StyledPopupContentWrapperContent = exports.StyledPopupContentWrapperConten
             overflow-y: auto;
             overflow-x: hidden;
         `}
-
-    ${({
-  $browser,
-  theme
-}) => $browser === 'firefox' ? (0, _styledComponents.css)`
-                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
-                  scrollbar-width: thin;
-              ` : (0, _styledComponents.css)`
-                  &::-webkit-scrollbar {
-                      width: 10px;
-                      height: 10px;
-                  }
-
-                  &::-webkit-scrollbar-track {
-                      background-color: transparent;
-                  }
-
-                  &::-webkit-scrollbar-button {
-                      background-color: transparent;
-                      height: 5px;
-                      width: 5px;
-                  }
-
-                  &::-webkit-scrollbar-thumb {
-                      background-color: rgba(${theme['text-rgb']}, 0.15);
-                      border-radius: 20px;
-                      background-clip: padding-box;
-                      border: solid 3px transparent;
-                  }
-
-                  &::-webkit-scrollbar-corner {
-                      background-color: transparent;
-                  }
-              `}
 `;
 //# sourceMappingURL=PopupContentWrapper.styles.js.map

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_popup","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","text","$shouldScrollWithContent","$position","$offset","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight","$browser"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { BrowserName } from '../../../types/chayns';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n    $browser: BrowserName;\n    $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n    height: 100%;\n    width: 100%;\n\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: auto;\n            overflow-x: hidden;\n        `}\n\n    ${({ $browser, theme }: StyledPopupContentWrapperContentProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_popup","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","text","$shouldScrollWithContent","$position","$offset","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n    $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n    height: 100%;\n    width: 100%;\n\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: auto;\n            overflow-x: hidden;\n        `}\n`;\n"],"mappings":"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","ignoreList":[]}