npm - @chayns-components/core - Versions diffs - 5.0.0-beta.588 → 5.0.0-beta.590 - Mend

@chayns-components/core 5.0.0-beta.588 → 5.0.0-beta.590

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/lib/cjs/components/amount-control/AmountControl.js CHANGED Viewed

@@ -17,6 +17,7 @@ const AmountControl = ({
   icon,
   shouldShowIcon = true,
   label,
+  iconColor,
   maxAmount,
   onChange
 }) => {
@@ -94,11 +95,14 @@ const AmountControl = ({
     }
   }, [inputValue]);
   const handleInputChange = (0, _react.useCallback)(event => {
-    const valueBeforeCheck = Number(event.target.value);
+    const {
+      value
+    } = event.target;
+    const valueBeforeCheck = Number(value.replace(/\D/g, ''));
     const checkedValue = (0, _amountControl.checkForValidAmount)({
       minAmount,
       maxAmount,
-      amount: Number(event.target.value)
+      amount: valueBeforeCheck
     });
     if (valueBeforeCheck < minAmount && minAmount === 0) {
       setInputValue('0');
@@ -112,7 +116,8 @@ const AmountControl = ({
       case 'default':
         item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
           icons: [icon ?? 'fa fa-cart-shopping'],
-          size: 15
+          size: 15,
+          color: iconColor
         });
         break;
       case 'delete':
@@ -139,7 +144,7 @@ const AmountControl = ({
         break;
     }
     return item;
-  }, [displayState, icon]);
+  }, [displayState, icon, iconColor]);
   const shouldShowLeftIcon = (0, _react.useMemo)(() => {
     if (shouldShowIcon) {
       return true;
@@ -180,8 +185,7 @@ const AmountControl = ({
     $hasFocus: hasFocus,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
-    value: displayState === 'default' && label ? label : inputValue,
-    type: amountValue === 0 ? 'text' : 'number'
+    value: displayState === 'default' && label ? label : inputValue
   }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
   }, displayState === 'normal' && /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
@@ -212,7 +216,7 @@ const AmountControl = ({
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon]);
+  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon]);
 };
 AmountControl.displayName = 'AmountControl';
 var _default = exports.default = AmountControl;

package/lib/cjs/components/amount-control/AmountControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","maxAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","useEffect","hasFocus","useMemo","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","StyledAmountControl","onClick","AnimatePresence","initial","StyledMotionAmountControlButton","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","$isDisabled","StyledAmountControlInput","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'delete' \| 'normal' \| 'maxAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n A Text that should be displayed, if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n /\n maxAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n maxAmount,\n onChange,\n}) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const minAmount = 0;\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > 0:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n /\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n /\n Function that updates the onChange event\n */\n useEffect(() => {\n if (onChange) {\n onChange(amountValue);\n }\n }, [amountValue, onChange]);\n\n const handleAmountAdd = () => {\n setAmountValue((prevState) => prevState + 1);\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n };\n\n const handleAmountRemove = () => {\n setAmountValue((prevState) => prevState - 1);\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n };\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== 0) {\n return;\n }\n\n setAmountValue(1);\n setInputValue('1');\n }, [amountValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const valueBeforeCheck = Number(event.target.value);\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Number(event.target.value),\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount],\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement \| null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-trash']} size={25} />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState, icon]);\n\n const shouldShowLeftIcon = useMemo(() => {\n if (shouldShowIcon) {\n return true;\n }\n\n return !(displayState === 'default' && !shouldShowIcon);\n }, [displayState, shouldShowIcon]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <AnimatePresence initial={false}>\n {shouldShowLeftIcon && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledAmountControlInput\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n type={amountValue === 0 ? 'text' : 'number'}\n />\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","useEffect","hasFocus","useMemo","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","StyledAmountControl","onClick","AnimatePresence","initial","StyledMotionAmountControlButton","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","$isDisabled","StyledAmountControlInput","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'delete' \| 'normal' \| 'maxAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n The color of the icon.\n /\n iconColor?: string;\n /\n A Text that should be displayed, if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n /\n maxAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n iconColor,\n maxAmount,\n onChange,\n}) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const minAmount = 0;\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > 0:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n /\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n /\n Function that updates the onChange event\n */\n useEffect(() => {\n if (onChange) {\n onChange(amountValue);\n }\n }, [amountValue, onChange]);\n\n const handleAmountAdd = () => {\n setAmountValue((prevState) => prevState + 1);\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n };\n\n const handleAmountRemove = () => {\n setAmountValue((prevState) => prevState - 1);\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n };\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== 0) {\n return;\n }\n\n setAmountValue(1);\n setInputValue('1');\n }, [amountValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: valueBeforeCheck,\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount],\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement \| null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-trash']} size={25} />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState, icon, iconColor]);\n\n const shouldShowLeftIcon = useMemo(() => {\n if (shouldShowIcon) {\n return true;\n }\n\n return !(displayState === 'default' && !shouldShowIcon);\n }, [displayState, shouldShowIcon]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <AnimatePresence initial={false}>\n {shouldShowLeftIcon && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledAmountControlInput\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n />\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/checkbox/Checkbox.js CHANGED Viewed

@@ -27,7 +27,7 @@ const Checkbox = ({
     }
   }, [onChange]);
   const uuid = (0, _uuid.useUuid)();
-  const lineHeight = (0, _react.useMemo)(() => shouldShowCentered ? undefined : (0, _calculate.getHeightOfSingleTextLine)(), [shouldShowCentered]);
+  const lineHeight = (0, _react.useMemo)(() => !children || shouldShowCentered ? undefined : (0, _calculate.getHeightOfSingleTextLine)(), [children, shouldShowCentered]);
   return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, null, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
     checked: isChecked,
     disabled: isDisabled,

package/lib/cjs/components/checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","className","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n ReactElement,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n /*\n Text for checkbox or switch\n /\n children?: ReactElement \| string;\n /\n Indicates whether the checkbox or switch is selected\n /\n isChecked?: boolean;\n /\n Disables the checkbox or switch so it cannot be toggled\n /\n isDisabled?: boolean;\n /\n Classname for the label\n /\n labelClassName?: string;\n /\n Function to be executed if the checked value changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Changes the design to use switch instead of checkbox\n /\n shouldShowAsSwitch?: boolean;\n /\n Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n const lineHeight = useMemo(\n () => (shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n [shouldShowCentered],\n );\n\n return (\n <StyledCheckbox>\n <StyledCheckboxInput\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n <StyledCheckboxLabel\n className={labelClassName}\n htmlFor={uuid}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $lineHeight={lineHeight}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AASA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAA6F,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAiC7F,MAAMW,QAA2B,GAAGA,CAAC;EACjCC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,kBAAkB;EAClBC,kBAAkB,GAAG;AACzB,CAAC,KAAK;EACF,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAACR,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMS,YAAY,GAAG,IAAAC,kBAAW,EAC3BC,KAAoC,IAAK;IACtCJ,WAAW,CAACI,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOV,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACQ,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACR,QAAQ,CACb,CAAC;EAED,MAAMW,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EAEtB,MAAMC,UAAU,GAAG,IAAAC,cAAO,EACtB,~~MAAOZ~~,kBAAkB,GAAGa,SAAS,GAAG,IAAAC,oCAAyB,EAAC,CAAE,~~EACpE~~,~~CAACd~~,kBAAkB,~~CACvB~~,CAAC;EAED,oBACIjC,MAAA,CAAAY,OAAA,CAAAoC,aAAA,CAAC3C,SAAA,CAAA4C,cAAc,qBACXjD,MAAA,CAAAY,OAAA,CAAAoC,aAAA,CAAC3C,SAAA,CAAA6C,mBAAmB;IAChBT,OAAO,EAAEb,SAAU;IACnBuB,QAAQ,EAAEtB,UAAW;IACrBuB,EAAE,EAAEV,IAAK;IACTX,QAAQ,EAAEM,YAAa;IACvBgB,IAAI,EAAC;EAAU,CAClB,CAAC,eACFrD,MAAA,CAAAY,OAAA,CAAAoC,aAAA,CAAC3C,SAAA,CAAAiD,mBAAmB;IAChBC,SAAS,EAAEzB,cAAe;IAC1B0B,OAAO,EAAEd,IAAK;IACde,UAAU,EAAE7B,SAAS,IAAIM,QAAS;IAClCwB,WAAW,EAAE7B,UAAW;IACxB8B,mBAAmB,EAAE3B,kBAAmB;IACxC4B,WAAW,EAAEhB;EAAW,GAEvBjB,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDD,QAAQ,CAACmC,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnD,OAAA,GAEnBc,QAAQ","ignoreList":[]}
1	+ {"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","className","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n ReactElement,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n /*\n Text for checkbox or switch\n /\n children?: ReactElement \| string;\n /\n Indicates whether the checkbox or switch is selected\n /\n isChecked?: boolean;\n /\n Disables the checkbox or switch so it cannot be toggled\n /\n isDisabled?: boolean;\n /\n Classname for the label\n /\n labelClassName?: string;\n /\n Function to be executed if the checked value changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Changes the design to use switch instead of checkbox\n /\n shouldShowAsSwitch?: boolean;\n /\n Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n const lineHeight = useMemo(\n () => (!children \|\| shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n [children, shouldShowCentered],\n );\n\n return (\n <StyledCheckbox>\n <StyledCheckboxInput\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n <StyledCheckboxLabel\n className={labelClassName}\n htmlFor={uuid}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $lineHeight={lineHeight}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/checkbox/Checkbox.styles.js CHANGED Viewed

@@ -76,12 +76,10 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
 }};
         ${({
-  $shouldShowAsSwitch
-}) => !$shouldShowAsSwitch && (0, _styledComponents.css)`
-                border: 1px solid
-                    rgba(${({
+  $shouldShowAsSwitch,
   theme
-}) => theme['409-rgb']}, 0.5);
+}) => !$shouldShowAsSwitch && (0, _styledComponents.css)`
+                border: 1px solid rgba(${theme['409-rgb']}, 0.5);
             `}
         border-radius: ${({

package/lib/cjs/components/checkbox/Checkbox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","Number","fontSize","green","red"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n transition: opacity 0.2s ease;\n user-select: none;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: ${$lineHeight ? `${Number(theme.fontSize) - 2}px` : '50%'};\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: ${$lineHeight ? `${Number(theme.fontSize) - 4}px` : 'calc(50% - 2px)'};\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5.5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n theme,\n }: StyledCheckboxLabelProps) => {\n if ($shouldShowAsSwitch) {\n return $isChecked ? theme.green : theme.red;\n }\n\n return $isChecked ? theme['408'] : theme['403'];\n }};\n \n ${({ $shouldShowAsSwitch }) =>\n !$shouldShowAsSwitch &&\n css`\n border: 1px solid\n rgba(${({ theme ~~}: StyledCheckboxLabelProps) => theme~~['409-rgb']}, 0.5);\n `}\n \n border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n ${({ $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $lineHeight\n ? css`\n top: ${Number(theme.fontSize) - 2}px;\n transform: translateY(-50%);\n `\n : css`\n top: 50%;\n transform: translateY(-50%);\n `}\n }\n }\n`;\n"],"mappings":"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~~AAAoB~~,CAAC,~~KACtB~~,~~CAACA~~,mBAAmB,IACpB,IAAAG,qBAAG,CAAC;AAChB~~;AACA~~,~~2BAA2B~~,~~CAAC;EAAEN;AAAgC,CAAC,KAAKA,~~KAAK,CAAC,SAAS,CAAE;~~AACrF~~,aAAc;AACd;AACA,yBAAyB,CAAC;EAAEG;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,OAAO,GAAG,CAAG;AAC1F;AACA,kBAAkB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAQ;AACvF,gBAAgB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,CAAG;AAChF;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAQ;AACtF,UAAU,CAAC;EAAEE,WAAW;EAAEL;AAAgC,CAAC,KAC/CK,WAAW,GACL,IAAAC,qBAAG,CAAC;AACtB,6BAA6BC,MAAM,CAACP,KAAK,CAACQ,QAAQ,CAAC,GAAG,CAAE;AACxD;AACA,mBAAmB,GACD,IAAAF,qBAAG,CAAC;AACtB;AACA;AACA,mBAAoB;AACpB;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","Number","fontSize","green","red"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n transition: opacity 0.2s ease;\n user-select: none;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: ${$lineHeight ? `${Number(theme.fontSize) - 2}px` : '50%'};\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: ${$lineHeight ? `${Number(theme.fontSize) - 4}px` : 'calc(50% - 2px)'};\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5.5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n theme,\n }: StyledCheckboxLabelProps) => {\n if ($shouldShowAsSwitch) {\n return $isChecked ? theme.green : theme.red;\n }\n\n return $isChecked ? theme['408'] : theme['403'];\n }};\n \n ${({ $shouldShowAsSwitch, theme }) =>\n !$shouldShowAsSwitch &&\n css`\n border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n `}\n \n border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n ${({ $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $lineHeight\n ? css`\n top: ${Number(theme.fontSize) - 2}px;\n transform: translateY(-50%);\n `\n : css`\n top: 50%;\n transform: translateY(-50%);\n `}\n }\n }\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -34,6 +34,9 @@ const NumberInput = ({
   const [isValueInvalid, setIsValueInvalid] = (0, _react.useState)(false);
   const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);
   const onLocalChange = event => {
+    if (isValueInvalid || isInvalid) {
+      return;
+    }
     const newValue = event.target.value;
     const sanitizedValueString = newValue
     // Removes everything except numbers, commas and points
@@ -42,6 +45,7 @@ const NumberInput = ({
       return;
     }
     const valueToCheck = sanitizedValueString.replaceAll(',', '.');
+    console.log(valueToCheck);
     if (!(0, _numberInput2.isValidString)({
       string: valueToCheck,
       isMoneyInput,
@@ -50,6 +54,10 @@ const NumberInput = ({
     })) {
       return;
     }
+    console.log(minNumber && Number(valueToCheck) < minNumber);
+    if (maxNumber && Number(valueToCheck) > maxNumber || minNumber && Number(valueToCheck) < minNumber) {
+      return;
+    }
     if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {
       setShouldRemainPlaceholder(true);
     } else {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","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","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 The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) \|\|\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (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(':', ''),\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);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.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.replace(',', '.').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 }),\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\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":[]}
1	+ {"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","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","console","log","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 The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (isValueInvalid \|\| isInvalid) {\n return;\n }\n\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 console.log(valueToCheck);\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n console.log(minNumber && Number(valueToCheck) < minNumber);\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(':', ''),\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);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.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.replace(',', '.').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 }),\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\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.js CHANGED Viewed

@@ -33,6 +33,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [portal, setPortal] = (0, _react.useState)();
   const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
+  const timeout = (0, _react.useRef)();
   const uuid = (0, _uuid.useUuid)();
   // ToDo: Replace with hook if new chayns api is ready
@@ -83,26 +84,23 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
   const handleHide = (0, _react.useCallback)(() => {
     setIsOpen(false);
   }, []);
-  const handleMouseEnter = () => {
+  const handleMouseEnter = (0, _react.useCallback)(() => {
     if (shouldShowOnHover) {
+      window.clearTimeout(timeout.current);
       handleShow();
     }
-  };
-  const handleMouseLeave = (0, _react.useCallback)(event => {
-    if (shouldShowOnHover) {
-      var _popupContentRef$curr;
-      if (event.currentTarget.dataset.ispopup === 'true') {
-        handleHide();
-      }
-      if (event.relatedTarget && (event.relatedTarget === popupContentRef.current || (_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(event.relatedTarget))) {
-        return;
-      }
-      handleHide();
+  }, [handleShow, shouldShowOnHover]);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    if (!shouldShowOnHover) {
+      return;
     }
+    timeout.current = window.setTimeout(() => {
+      handleHide();
+    }, 500);
   }, [handleHide, shouldShowOnHover]);
   const handleDocumentClick = (0, _react.useCallback)(event => {
-    var _popupContentRef$curr2;
-    if (!((_popupContentRef$curr2 = popupContentRef.current) !== null && _popupContentRef$curr2 !== void 0 && _popupContentRef$curr2.contains(event.target)) && !shouldShowOnHover) {
+    var _popupContentRef$curr;
+    if (!((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(event.target)) && !shouldShowOnHover) {
       event.preventDefault();
       event.stopPropagation();
       handleHide();
@@ -142,11 +140,12 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
       key: `tooltip_${uuid}`,
       alignment: alignment,
       ref: popupContentRef,
-      onMouseLeave: handleMouseLeave
+      onMouseLeave: handleMouseLeave,
+      onMouseEnter: handleMouseEnter
     }, /*#__PURE__*/_react.default.createElement(_AreaContextProvider.default, {
       shouldChangeColor: false
     }, content))), container));
-  }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);
+  }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, uuid]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
     ref: popupPseudoContentRef,
     $menuHeight: menuHeight

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","onHide","children","shouldShowOnHover","yOffset","ref","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","event","_popupContentRef$curr","currentTarget","dataset","ispopup","relatedTarget","contains","handleDocumentClick","_popupContentRef$curr2","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","onMouseEnter","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /*\n The element over which the content of the `ContextMenu` should be displayed.\n /\n children?: ReactNode;\n /\n The content that should be displayed inside the popup.\n /\n content: ReactNode;\n /\n Function to be executed when the content of the Context menu has been hidden.\n /\n onHide?: VoidFunction;\n /\n Function to be executed when the content of the Context menu has been shown.\n /\n onShow?: VoidFunction;\n /\n Whether the popup should be opened on hover. If not, the popup will be opened on click.\n /\n shouldShowOnHover?: boolean;\n /\n The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n const container = document.querySelector('.tapp') \|\| document.body;\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && popupPseudoContentRef.current) {\n const { height: pseudoHeight, width: pseudoWidth } =\n popupPseudoContentRef.current.getBoundingClientRect();\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop + childrenHeight + yOffset,\n });\n } else {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = () => {\n if (shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n if (shouldShowOnHover) {\n if ((event.currentTarget as HTMLElement).dataset.ispopup === 'true') {\n handleHide();\n }\n\n if (\n event.relatedTarget &&\n (event.relatedTarget === popupContentRef.current \|\|\n popupContentRef.current?.contains(event.relatedTarget as Node))\n ) {\n return;\n }\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !popupContentRef.current?.contains(event.target as Node) &&\n !shouldShowOnHover\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);\n\n return (\n <>\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","onHide","children","shouldShowOnHover","yOffset","ref","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","window","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /*\n The element over which the content of the `ContextMenu` should be displayed.\n /\n children?: ReactNode;\n /\n The content that should be displayed inside the popup.\n /\n content: ReactNode;\n /\n Function to be executed when the content of the Context menu has been hidden.\n /\n onHide?: VoidFunction;\n /\n Function to be executed when the content of the Context menu has been shown.\n /\n onShow?: VoidFunction;\n /\n Whether the popup should be opened on hover. If not, the popup will be opened on click.\n /\n shouldShowOnHover?: boolean;\n /\n The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n const container = document.querySelector('.tapp') \|\| document.body;\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && popupPseudoContentRef.current) {\n const { height: pseudoHeight, width: pseudoWidth } =\n popupPseudoContentRef.current.getBoundingClientRect();\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop + childrenHeight + yOffset,\n });\n } else {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = 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 timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !popupContentRef.current?.contains(event.target as Node) &&\n !shouldShowOnHover\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n uuid,\n ]);\n\n return (\n <>\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}

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

@@ -13,7 +13,8 @@ const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
   alignment,
   children,
   coordinates,
-  onMouseLeave
+  onMouseLeave,
+  onMouseEnter
 }, ref) => {
   const {
     colorMode
@@ -43,6 +44,7 @@ const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
     $position: alignment,
     ref: ref,
     "data-ispopup": "true",
+    onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     style: {
       left: coordinates.x,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","obj","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","onMouseLeave","ref","colorMode","useSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","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 { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n alignment: PopupAlignment;\n children: ReactNode;\n coordinates: PopupCoordinates;\n onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n ({ alignment, children, coordinates, onMouseLeave }, ref) => {\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 exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n data-ispopup=\"true\"\n onMouseLeave={onMouseLeave}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {children}\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;AAA+E,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;~~AAS~~/E,MAAMG,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CACxC,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,WAAW;EAAEC;AAAa,CAAC,EAAEC,GAAG,KAAK;~~EACzD~~,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,~~GAAGP~~,SAAS,~~KAAKQ~~,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,~~GAAGV~~,SAAS,~~KAAKQ~~,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,~~GAAGZ~~,SAAS,~~KAAKQ~~,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,~~oBACItB~~,MAAA,CAAAM,OAAA,~~CAAAuB~~,aAAA,~~CAAC1B~~,oBAAA,~~CAAA2B~~,+BAA+B;IAC5BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEnB,SAAU;IACtBoB,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CS,SAAS,~~EAAE3B~~,SAAU;~~IACrBI~~,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBD,YAAY,EAAEA,YAAa;~~IAC3ByB~~,KAAK,EAAE;MAAEC,IAAI,~~EAAE3B~~,WAAW,~~CAAC4B~~,CAAC;MAAEC,GAAG,~~EAAE7B~~,WAAW,~~CAACqB~~;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEX,CAAC,GAAG;IAAM,CAAC,KAAM;AACvD,iCAAiCT,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC;EAAkB,~~GAEDtB~~,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDJ,mBAAmB,~~CAACsC~~,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAAzC~~,OAAA,GAElCC,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","obj","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","onMouseLeave","onMouseEnter","ref","colorMode","useSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","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 { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n alignment: PopupAlignment;\n children: ReactNode;\n coordinates: PopupCoordinates;\n onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n ({ alignment, children, coordinates, onMouseLeave, onMouseEnter }, ref) => {\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 exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n data-ispopup=\"true\"\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {children}\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;AAA+E,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAU/E,MAAMG,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CACxC,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,WAAW;EAAEC,YAAY;EAAEC;AAAa,CAAC,EAAEC,GAAG,KAAK;EACvE,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,GAAGR,SAAS,KAAKS,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGX,SAAS,KAAKS,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGb,SAAS,KAAKS,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,oBACIvB,MAAA,CAAAM,OAAA,CAAAwB,aAAA,CAAC3B,oBAAA,CAAA4B,+BAA+B;IAC5BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEnB,SAAU;IACtBoB,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CS,SAAS,EAAE5B,SAAU;IACrBK,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBD,YAAY,EAAEA,YAAa;IAC3BD,YAAY,EAAEA,YAAa;IAC3B0B,KAAK,EAAE;MAAEC,IAAI,EAAE5B,WAAW,CAAC6B,CAAC;MAAEC,GAAG,EAAE9B,WAAW,CAACsB;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEX,CAAC,GAAG;IAAM,CAAC,KAAM;AACvD,iCAAiCT,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC;EAAkB,GAEDvB,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDJ,mBAAmB,CAACuC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAElCC,mBAAmB","ignoreList":[]}

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

@@ -23,6 +23,10 @@ const StyledMotionPopupContentWrapper = exports.StyledMotionPopupContentWrapper
     z-index: 100;
     position: fixed;
+    & img {
+        width: 100%;
+    }
     &::after {
         background-color: inherit;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupContentWrapper.styles.js","names":["_chaynsApi","require","_framerMotion","_styledComponents","_interopRequireWildcard","_popup","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","$colorMode","ColorMode","Dark","text","$position","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\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}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n background-color: ${({ theme, $colorMode }: StyledMotionPopupContentWrapperProps) =>\n $colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\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: fixed;\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 }) => {\n switch ($position) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 13px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 13px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 13px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 13px;\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"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAAsD,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQ/C,MAAMW,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,IAAAE,yBAAM,EACjDC,oBAAM,CAACC,GACX,CAAwC;AACxC,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAiD,CAAC,KAC5EA,UAAU,KAAKC,oBAAS,CAACC,IAAI,GAAGH,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAE;AACpE;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACI,IAAK;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,qBAAc,CAACC,OAAO;MACvB,OAAO,IAAAC,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACG,UAAU;MAC1B,OAAO,IAAAD,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACI,QAAQ;MACxB,OAAO,IAAAF,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACK,WAAW;MAC3B,OAAO,IAAAH,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOI,SAAS;EACxB;AACJ,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"PopupContentWrapper.styles.js","names":["_chaynsApi","require","_framerMotion","_styledComponents","_interopRequireWildcard","_popup","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","$colorMode","ColorMode","Dark","text","$position","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\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}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n background-color: ${({ theme, $colorMode }: StyledMotionPopupContentWrapperProps) =>\n $colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\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: fixed;\n\n & img {\n width: 100%;\n }\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 }) => {\n switch ($position) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 13px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 13px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 13px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 13px;\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"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAAsD,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQ/C,MAAMW,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,IAAAE,yBAAM,EACjDC,oBAAM,CAACC,GACX,CAAwC;AACxC,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAiD,CAAC,KAC5EA,UAAU,KAAKC,oBAAS,CAACC,IAAI,GAAGH,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAE;AACpE;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACI,IAAK;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,qBAAc,CAACC,OAAO;MACvB,OAAO,IAAAC,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACG,UAAU;MAC1B,OAAO,IAAAD,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACI,QAAQ;MACxB,OAAO,IAAAF,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACK,WAAW;MAC3B,OAAO,IAAAH,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOI,SAAS;EACxB;AACJ,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}