@chayns-components/core 5.0.0-beta.680 → 5.0.0-beta.684

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

@@ -66,30 +66,36 @@ const AmountControl = ({
       minAmount
     }).toString());
   }, [amount, maxAmount, minAmount]);
-
-  /**
-   * Function that updates the onChange event
-   */
-  (0, _react.useEffect)(() => {
-    if (onChange) {
-      onChange(amountValue);
-    }
-  }, [amountValue, onChange]);
-  const handleAmountAdd = () => {
-    setAmountValue(prevState => prevState + 1);
+  const handleAmountAdd = (0, _react.useCallback)(() => {
+    setAmountValue(prevState => {
+      const newAmount = prevState + 1;
+      if (typeof onChange === 'function') {
+        onChange(newAmount);
+      }
+      return newAmount;
+    });
     setInputValue(prevState => (Number(prevState) + 1).toString());
-  };
-  const handleAmountRemove = () => {
-    setAmountValue(prevState => prevState - 1);
+  }, [onChange]);
+  const handleAmountRemove = (0, _react.useCallback)(() => {
+    setAmountValue(prevState => {
+      const newAmount = prevState - 1;
+      if (typeof onChange === 'function') {
+        onChange(newAmount);
+      }
+      return newAmount;
+    });
     setInputValue(prevState => (Number(prevState) - 1).toString());
-  };
+  }, [onChange]);
   const handleFirstAmount = (0, _react.useCallback)(() => {
     if (amountValue !== 0) {
       return;
     }
+    if (typeof onChange === 'function') {
+      onChange(1);
+    }
     setAmountValue(1);
     setInputValue('1');
-  }, [amountValue]);
+  }, [amountValue, onChange]);
   const handleDeleteIconClick = (0, _react.useCallback)(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
@@ -99,13 +105,16 @@ const AmountControl = ({
     } else {
       handleAmountRemove();
     }
-  }, [inputValue]);
+  }, [handleAmountRemove, inputValue]);
   const handleInputBlur = (0, _react.useCallback)(() => {
     setAmountValue(inputValue === '' ? 0 : Number(inputValue));
+    if (typeof onChange === 'function') {
+      onChange(inputValue === '' ? 0 : Number(inputValue));
+    }
     if (inputValue === '') {
       setInputValue('0');
     }
-  }, [inputValue]);
+  }, [inputValue, onChange]);
   const handleInputChange = (0, _react.useCallback)(event => {
     const {
       value
@@ -237,7 +246,7 @@ const AmountControl = ({
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 var _default = exports.default = AmountControl;

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","inputRef","useRef","useEffect","hasFocus","useMemo","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","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","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","StyledAmountControlPseudoInput","$shouldShowWideInput","StyledAmountControlInput","ref","$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    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\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     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    onChange,\n    shouldShowWideInput = false,\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    const inputRef = useRef<HTMLInputElement>(null);\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 handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [inputValue]);\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-check']} size={20} color=\"white\" />;\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={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                {displayState === 'delete' || inputValue === '0' ? (\n                    <StyledAmountControlPseudoInput\n                        onClick={handleDeleteIconClick}\n                        $shouldShowWideInput={shouldShowWideInput}\n                    >\n                        {displayState === 'default' && label ? label : inputValue}\n                    </StyledAmountControlPseudoInput>\n                ) : (\n                    <StyledAmountControlInput\n                        ref={inputRef}\n                        $displayState={displayState}\n                        $shouldShowIcon={shouldShowIcon}\n                        $shouldShowWideInput={shouldShowWideInput}\n                        $hasFocus={hasFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        value={displayState === 'default' && label ? label : inputValue}\n                    />\n                )}\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\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            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAUA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AAKgC,SAAAK,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,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,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAuChC,MAAMW,aAAqC,GAAGA,CAAC;EAC3CC,MAAM;EACNC,IAAI;EACJC,cAAc,GAAG,IAAI;EACrBC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,mBAAmB,GAAG;AAC1B,CAAC,KAAK;EACF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EACjD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAF,eAAQ,EAAC,GAAG,CAAC;EACjD,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAJ,eAAQ,EAAe,SAAS,CAAC;EAEzE,MAAMK,SAAS,GAAG,CAAC;EAEnB,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;;EAE/C;AACJ;AACA;EACI,IAAAC,gBAAS,EAAC,MAAM;IACZ,QAAQ,IAAI;MACR,KAAKb,SAAS,KAAK,CAAC,IAAIG,WAAW,KAAK,CAAC;QACrCM,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ,KAAKT,SAAS,IAAIG,WAAW,IAAIH,SAAS;QACtCS,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ,KAAKN,WAAW,GAAG,CAAC;QAChBM,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ;QACIA,eAAe,CAAC,SAAS,CAAC;IAClC;EACJ,CAAC,EAAE,CAACN,WAAW,EAAEH,SAAS,CAAC,CAAC;EAE5B,MAAMc,QAAQ,GAAG,IAAAC,cAAO,EAAC,MAAMP,YAAY,KAAK,SAAS,EAAE,CAACA,YAAY,CAAC,CAAC;;EAE1E;AACJ;AACA;EACI,IAAAK,gBAAS,EAAC,MAAM;IACZ,IAAI,CAAClB,MAAM,EAAE;MACT;IACJ;IAEAS,cAAc,CAAC,IAAAY,kCAAmB,EAAC;MAAErB,MAAM;MAAEK,SAAS;MAAEU;IAAU,CAAC,CAAC,CAAC;IACrEH,aAAa,CAAC,IAAAS,kCAAmB,EAAC;MAAErB,MAAM;MAAEK,SAAS;MAAEU;IAAU,CAAC,CAAC,CAACO,QAAQ,CAAC,CAAC,CAAC;EACnF,CAAC,EAAE,CAACtB,MAAM,EAAEK,SAAS,EAAEU,SAAS,CAAC,CAAC;;EAElC;AACJ;AACA;EACI,IAAAG,gBAAS,EAAC,MAAM;IACZ,IAAIZ,QAAQ,EAAE;MACVA,QAAQ,CAACE,WAAW,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,WAAW,EAAEF,QAAQ,CAAC,CAAC;EAE3B,MAAMiB,eAAe,GAAGA,CAAA,KAAM;IAC1Bd,cAAc,CAAEe,SAAS,IAAKA,SAAS,GAAG,CAAC,CAAC;IAC5CZ,aAAa,CAAEY,SAAS,IAAK,CAACC,MAAM,CAACD,SAAS,CAAC,GAAG,CAAC,EAAEF,QAAQ,CAAC,CAAC,CAAC;EACpE,CAAC;EAED,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;IAC7BjB,cAAc,CAAEe,SAAS,IAAKA,SAAS,GAAG,CAAC,CAAC;IAC5CZ,aAAa,CAAEY,SAAS,IAAK,CAACC,MAAM,CAACD,SAAS,CAAC,GAAG,CAAC,EAAEF,QAAQ,CAAC,CAAC,CAAC;EACpE,CAAC;EAED,MAAMK,iBAAiB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACxC,IAAIpB,WAAW,KAAK,CAAC,EAAE;MACnB;IACJ;IAEAC,cAAc,CAAC,CAAC,CAAC;IACjBG,aAAa,CAAC,GAAG,CAAC;EACtB,CAAC,EAAE,CAACJ,WAAW,CAAC,CAAC;EAEjB,MAAMqB,qBAAqB,GAAG,IAAAD,kBAAW,EAAC,MAAM;IAC5C,IAAIjB,UAAU,KAAK,GAAG,EAAE;MACpBmB,MAAM,CAACC,UAAU,CAAC,MAAM;QAAA,IAAAC,iBAAA;QACpB,CAAAA,iBAAA,GAAAhB,QAAQ,CAACiB,OAAO,cAAAD,iBAAA,eAAhBA,iBAAA,CAAkBE,KAAK,CAAC,CAAC;MAC7B,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,MAAM;MACHR,kBAAkB,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACf,UAAU,CAAC,CAAC;EAEhB,MAAMwB,eAAe,GAAG,IAAAP,kBAAW,EAAC,MAAM;IACtCnB,cAAc,CAACE,UAAU,KAAK,EAAE,GAAG,CAAC,GAAGc,MAAM,CAACd,UAAU,CAAC,CAAC;IAE1D,IAAIA,UAAU,KAAK,EAAE,EAAE;MACnBC,aAAa,CAAC,GAAG,CAAC;IACtB;EACJ,CAAC,EAAE,CAACD,UAAU,CAAC,CAAC;EAEhB,MAAMyB,iBAAiB,GAAG,IAAAR,kBAAW,EAChCS,KAAoC,IAAK;IACtC,MAAM;MAAEC;IAAM,CAAC,GAAGD,KAAK,CAACE,MAAM;IAE9B,MAAMC,gBAAgB,GAAGf,MAAM,CAACa,KAAK,CAACG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAEzD,MAAMC,YAAY,GAAG,IAAArB,kCAAmB,EAAC;MACrCN,SAAS;MACTV,SAAS;MACTL,MAAM,EAAEwC;IACZ,CAAC,CAAC;IAEF,IAAIA,gBAAgB,GAAGzB,SAAS,IAAIA,SAAS,KAAK,CAAC,EAAE;MACjDH,aAAa,CAAC,GAAG,CAAC;MAElB;IACJ;IAEAA,aAAa,CAAC8B,YAAY,KAAK,CAAC,GAAG,EAAE,GAAGA,YAAY,CAACpB,QAAQ,CAAC,CAAC,CAAC;EACpE,CAAC,EACD,CAACjB,SAAS,EAAEU,SAAS,CACzB,CAAC;EAED,MAAM4B,QAAQ,GAAG,IAAAvB,cAAO,EAAC,MAAM;IAC3B,IAAIwB,IAAyB,GAAG,IAAI;IAEpC,QAAQ/B,YAAY;MAChB,KAAK,SAAS;QACV+B,IAAI,gBAAGvE,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACrE,KAAA,CAAAK,OAAI;UAACiE,KAAK,EAAE,CAAC7C,IAAI,IAAI,qBAAqB,CAAE;UAAC8C,IAAI,EAAE,EAAG;UAACC,KAAK,EAAE5C;QAAU,CAAE,CAAC;QACnF;MACJ,KAAK,QAAQ;QACTwC,IAAI,gBAAGvE,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACrE,KAAA,CAAAK,OAAI;UAACiE,KAAK,EAAE,CAAC,aAAa,CAAE;UAACC,IAAI,EAAE,EAAG;UAACC,KAAK,EAAC;QAAO,CAAE,CAAC;QAC/D;MACJ,KAAK,QAAQ;QACTJ,IAAI,gBAAGvE,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACrE,KAAA,CAAAK,OAAI;UAACiE,KAAK,EAAE,CAAC,aAAa,CAAE;UAACC,IAAI,EAAE,EAAG;UAACC,KAAK,EAAC;QAAK,CAAE,CAAC;QAC7D;MACJ,KAAK,WAAW;QACZJ,IAAI,gBAAGvE,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACrE,KAAA,CAAAK,OAAI;UAACiE,KAAK,EAAE,CAAC,aAAa,CAAE;UAACC,IAAI,EAAE,EAAG;UAACC,KAAK,EAAC;QAAK,CAAE,CAAC;QAC7D;MACJ;QACI;IACR;IAEA,OAAOJ,IAAI;EACf,CAAC,EAAE,CAAC/B,YAAY,EAAEZ,IAAI,EAAEG,SAAS,CAAC,CAAC;EAEnC,MAAM6C,kBAAkB,GAAG,IAAA7B,cAAO,EAAC,MAAM;IACrC,IAAIlB,cAAc,EAAE;MAChB,OAAO,IAAI;IACf;IAEA,OAAO,EAAEW,YAAY,KAAK,SAAS,IAAI,CAACX,cAAc,CAAC;EAC3D,CAAC,EAAE,CAACW,YAAY,EAAEX,cAAc,CAAC,CAAC;EAElC,OAAO,IAAAkB,cAAO,EACV,mBACI/C,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACnE,cAAA,CAAAwE,mBAAmB;IAACC,OAAO,EAAExB;EAAkB,gBAC5CtD,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAAC1E,aAAA,CAAAiF,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3BJ,kBAAkB,iBACf5E,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACnE,cAAA,CAAA4E,+BAA+B;IAC5BC,GAAG,EAAC,cAAc;IAClBF,OAAO,EAAE;MAAEG,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EACD3C,YAAY,KAAK,QAAQ,IAAIA,YAAY,KAAK,WAAW,GACnD,EAAE,GACF,EAAE;MACZ4C,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,OAAO,EAAEhD,YAAY,KAAK,QAAQ,IAAIA,YAAY,KAAK,WAAY;IACnEiD,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7Cb,OAAO,EAAEzB,kBAAmB;IAC5BuC,MAAM,EAAEpD,YAAY,KAAK,QAAQ,GAAG,kBAAkB,GAAGqD,SAAU;IACnEC,QAAQ,EAAE3D,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIO,SAAU;IACxDqD,WAAW,EAAE5D,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIO;EAAU,GAE1D4B,QAC4B,CAExB,CAAC,EACjB9B,YAAY,KAAK,QAAQ,IAAIF,UAAU,KAAK,GAAG,gBAC5CtC,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACnE,cAAA,CAAA2F,8BAA8B;IAC3BlB,OAAO,EAAEtB,qBAAsB;IAC/ByC,oBAAoB,EAAE/D;EAAoB,GAEzCM,YAAY,KAAK,SAAS,IAAIV,KAAK,GAAGA,KAAK,GAAGQ,UACnB,CAAC,gBAEjCtC,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACnE,cAAA,CAAA6F,wBAAwB;IACrBC,GAAG,EAAExD,QAAS;IACdyD,aAAa,EAAE5D,YAAa;IAC5B6D,eAAe,EAAExE,cAAe;IAChCoE,oBAAoB,EAAE/D,mBAAoB;IAC1CoE,SAAS,EAAExD,QAAS;IACpByD,MAAM,EAAEzC,eAAgB;IACxB7B,QAAQ,EAAE8B,iBAAkB;IAC5BE,KAAK,EAAEzB,YAAY,KAAK,SAAS,IAAIV,KAAK,GAAGA,KAAK,GAAGQ;EAAW,CACnE,CACJ,eACDtC,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAAC1E,aAAA,CAAAiF,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3BxC,YAAY,KAAK,QAAQ,iBACtBxC,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACnE,cAAA,CAAA4E,+BAA+B;IAC5BC,GAAG,EAAC,cAAc;IAClBF,OAAO,EAAE;MAAEG,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CI,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7Cb,OAAO,EAAE5B,eAAgB;IACzBsC,OAAO,EAAEhD,YAAY,KAAK,QAAQ,IAAIA,YAAY,KAAK,WAAY;IACnEsD,QAAQ,EAAE9D,SAAS,GAAGG,WAAW,IAAIH,SAAS,GAAG,KAAM;IACvD+D,WAAW,EAAE/D,SAAS,GAAGG,WAAW,IAAIH,SAAS,GAAG;EAAM,gBAE1DhC,MAAA,CAAAQ,OAAA,CAAAgE,aAAA,CAACrE,KAAA,CAAAK,OAAI;IAACiE,KAAK,EAAE,CAAC,YAAY,CAAE;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAC;EAAO,CAAE,CACzB,CAExB,CACA,CACxB,EACD,CACIxC,WAAW,EACXK,YAAY,EACZgB,qBAAqB,EACrBF,iBAAiB,EACjBQ,eAAe,EACfC,iBAAiB,EACjBjB,QAAQ,EACRR,UAAU,EACVR,KAAK,EACLwC,QAAQ,EACRtC,SAAS,EACTH,cAAc,EACd+C,kBAAkB,EAClB1C,mBAAmB,CAE3B,CAAC;AACL,CAAC;AAEDR,aAAa,CAAC8E,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlG,OAAA,GAE7BkB,aAAa","ignoreList":[]}
+{"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","inputRef","useRef","useEffect","hasFocus","useMemo","checkForValidAmount","toString","handleAmountAdd","useCallback","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","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","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","StyledAmountControlPseudoInput","$shouldShowWideInput","StyledAmountControlInput","ref","$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    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\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     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    onChange,\n    shouldShowWideInput = false,\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    const inputRef = useRef<HTMLInputElement>(null);\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    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = prevState + 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    }, [onChange]);\n\n    const handleAmountRemove = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = prevState - 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    }, [onChange]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== 0) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(1);\n        }\n\n        setAmountValue(1);\n        setInputValue('1');\n    }, [amountValue, onChange]);\n\n    const handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [handleAmountRemove, inputValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n        if (typeof onChange === 'function') {\n            onChange(inputValue === '' ? 0 : Number(inputValue));\n        }\n\n        if (inputValue === '') {\n            setInputValue('0');\n        }\n    }, [inputValue, onChange]);\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-check']} size={20} color=\"white\" />;\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={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                {displayState === 'delete' || inputValue === '0' ? (\n                    <StyledAmountControlPseudoInput\n                        onClick={handleDeleteIconClick}\n                        $shouldShowWideInput={shouldShowWideInput}\n                    >\n                        {displayState === 'default' && label ? label : inputValue}\n                    </StyledAmountControlPseudoInput>\n                ) : (\n                    <StyledAmountControlInput\n                        ref={inputRef}\n                        $displayState={displayState}\n                        $shouldShowIcon={shouldShowIcon}\n                        $shouldShowWideInput={shouldShowWideInput}\n                        $hasFocus={hasFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        value={displayState === 'default' && label ? label : inputValue}\n                    />\n                )}\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\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            handleAmountAdd,\n            handleAmountRemove,\n            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

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

@@ -12,6 +12,7 @@ const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
     align-items: center;
     display: flex;
     position: relative;
+    width: 100%;
 `;
 const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
     display: none;
@@ -31,6 +32,7 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
 }) => $shouldShowAsSwitch ? '48px' : '20px'};
     transition: opacity 0.2s ease;
     user-select: none;
+    width: 100%;
 
     &:after {
         ${({

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_checkBox","_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","getCheckBoxPosition","Number","fontSize","green","red"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\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\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '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\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : '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, $shouldShowAsSwitch }: StyledCheckboxLabelProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n        }\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_checkBox","_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","getCheckBoxPosition","Number","fontSize","green","red"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\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    width: 100%;\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    width: 100%;\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\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '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\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : '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, $shouldShowAsSwitch }: StyledCheckboxLabelProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\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/context-menu/ContextMenu.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _chaynsApi = require("chayns-api");
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
@@ -47,26 +48,23 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
   const handleShow = (0, _react.useCallback)(async () => {
     const isTouch = (0, _environment.getIsTouch)();
     if (isTouch) {
-      var _selection$;
-      // ToDo: Replace with new api function if new api is ready
       const {
-        buttonType,
-        selection
-      } = await chayns.dialog.select({
+        value
+      } = await (0, _chaynsApi.createDialog)({
+        type: _chaynsApi.DialogType.SELECT,
         buttons: [],
         list: items.map(({
           icons,
           text
         }, index) => ({
           name: text,
-          value: index,
+          id: index,
           icon: icons[0]
-        })),
-        type: 2
-      });
-      if (buttonType === 1 && typeof ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.value) === 'number') {
-        var _items$selection$0$va;
-        void ((_items$selection$0$va = items[selection[0].value]) === null || _items$selection$0$va === void 0 ? void 0 : _items$selection$0$va.onClick());
+        }))
+      }).open();
+      if (value[0] !== undefined) {
+        var _items$value$;
+        void ((_items$value$ = items[value[0]]) === null || _items$value$ === void 0 ? void 0 : _items$value$.onClick());
       }
     } else if (contextMenuRef.current) {
       const rootElement = document.querySelector('.tapp') || document.body;

package/lib/cjs/components/context-menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","document","body","coordinates","items","onHide","onShow","shouldCloseOnPopupClick","ref","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","handleHide","useCallback","handleShow","isTouch","getIsTouch","_selection$","buttonType","selection","chayns","dialog","select","buttons","list","map","text","index","name","value","icon","type","_items$selection$0$va","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\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 { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    text: string;\n};\n\nexport type ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\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 closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const isTouch = getIsTouch();\n\n            if (isTouch) {\n                // ToDo: Replace with new api function if new api is ready\n                const { buttonType, selection } = await chayns.dialog.select({\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        value: index,\n                        icon: icons[0],\n                    })),\n                    type: 2,\n                });\n\n                if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n                    void items[selection[0].value]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\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, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContextMenu.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","document","body","coordinates","items","onHide","onShow","shouldCloseOnPopupClick","ref","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","handleHide","useCallback","handleShow","isTouch","getIsTouch","value","createDialog","type","DialogType","SELECT","buttons","list","map","text","index","name","id","icon","open","undefined","_items$value$","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\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 { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    text: string;\n};\n\nexport type ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\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 closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const isTouch = getIsTouch();\n\n            if (isTouch) {\n                const { value } = await createDialog({\n                    type: DialogType.SELECT,\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        id: index,\n                        icon: icons[0],\n                    })),\n                }).open();\n\n                if (value[0] !== undefined) {\n                    void items[value[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\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, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/file-input/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_List","_FileListItem","_FileInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FileInput","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","useState","internalImages","setInternalImages","handleAddImages","useCallback","images","newImages","forEach","image","filterDuplicateFileUrls","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","isValidFileType","types","filterDuplicateFile","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","isDisabled","useMemo","handleImageSelectionClick","buttonType","result","createDialog","dialogInput","upload","buttons","text","initialView","type","DialogType","MODULE","system","scope","module","open","handleFileSelectionClick","selectFiles","multiple","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","StyledMotionFileInputList","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","id","StyledFileInput","StyledFileInputWrapper","$isDisabled","StyledFileInputContainer","onClick","onDragOver","onDrop","icons","StyledFileInputText","$isImageSelection","AnimatePresence","initial","StyledUploadedFilesList","$shouldShowBorder","displayName","_default","exports"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n    StyledFileInput,\n    StyledFileInputContainer,\n    StyledFileInputText,\n    StyledFileInputWrapper,\n    StyledMotionFileInputList,\n    StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: FileInputFileItem[];\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | string[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File | FileInputFileItem | string) => void;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    onMaxFilesReached,\n    maxFiles,\n    onRemove,\n    files,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hinzufügen',\n    imageSelectPlaceholder,\n}) => {\n    const [internalFiles, setInternalFiles] = useState<File[]>([]);\n    const [internalImages, setInternalImages] = useState<string[]>([]);\n\n    const handleAddImages = useCallback(\n        (images: string[]) => {\n            const newImages: string[] = [];\n\n            images.forEach((image) => {\n                if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n                    newImages.push(image);\n                }\n            });\n\n            let tmp = newImages;\n\n            if (maxFiles) {\n                tmp = newImages.slice(\n                    0,\n                    maxFiles -\n                        (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                );\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalImages((prevState) => [...prevState, ...tmp]);\n        },\n        [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            const newFileItems: File[] = [];\n\n            newFiles.forEach((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return;\n                }\n\n                if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                    newFileItems.push(file);\n                }\n            });\n\n            let tmp = newFileItems;\n\n            if (maxFiles) {\n                tmp = newFileItems.slice(\n                    0,\n                    maxFiles -\n                        (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                );\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalFiles((prevState) => [...prevState, ...tmp]);\n        },\n        [files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n    );\n\n    const handleDeleteFile = useCallback(\n        (fileName?: string) => {\n            let fileToDelete: File | FileInputFileItem | string | undefined;\n\n            const filteredFiles = internalFiles.filter((file) => {\n                const { name } = file;\n\n                if (name === fileName) {\n                    fileToDelete = file;\n                }\n\n                return name !== fileName;\n            });\n\n            setInternalFiles(filteredFiles);\n\n            if (!fileToDelete) {\n                const filteredImages = internalImages.filter((image) => {\n                    if (image === fileName) {\n                        fileToDelete = image;\n                    }\n\n                    return image !== fileName;\n                });\n\n                setInternalImages(filteredImages);\n            }\n\n            if (!fileToDelete) {\n                files?.forEach((file) => {\n                    if (file.url === fileName || file.name === fileName) {\n                        fileToDelete = file;\n                    }\n                });\n            }\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [files, internalFiles, internalImages, onRemove],\n    );\n\n    const isDisabled = useMemo(() => {\n        if (maxFiles) {\n            if (internalFiles.length + internalImages.length >= maxFiles) {\n                if (typeof onMaxFilesReached === 'function') {\n                    onMaxFilesReached();\n                }\n\n                return true;\n            }\n        }\n\n        return false;\n    }, [internalFiles.length, internalImages.length, maxFiles, onMaxFilesReached]);\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        const { buttonType, result } = (await createDialog({\n            dialogInput: {\n                upload: true,\n                buttons: [\n                    { text: 'hello', buttonType: 1 },\n                    { text: 'can', buttonType: -1 },\n                ],\n                initialView: 'pixabay',\n            },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) {\n            handleAddImages([result.url]);\n        }\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        const newFiles = await selectFiles({\n            multiple: true,\n            type: fileTypes,\n        });\n\n        handleAddFiles(newFiles);\n    }, [fileTypes, handleAddFiles, isDisabled]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [handleAddFiles],\n    );\n\n    const content = useMemo(() => {\n        const combinedFiles = [...internalImages, ...internalFiles];\n\n        const items: ReactElement[] = combinedFiles.map((file) => (\n            <StyledMotionFileInputList\n                animate={{ height: 'auto', opacity: 1 }}\n                exit={{ height: 0, opacity: 0 }}\n                key={typeof file === 'string' ? file : file.name}\n                transition={{ duration: 0.25, type: 'tween' }}\n            >\n                <FileListItem\n                    fileType={typeof file !== 'string' ? file.type : undefined}\n                    fileName={typeof file !== 'string' ? file.name : undefined}\n                    fileSize={typeof file !== 'string' ? file.size : undefined}\n                    url={typeof file === 'string' ? file : undefined}\n                    onRemove={handleDeleteFile}\n                />\n            </StyledMotionFileInputList>\n        ));\n\n        return items;\n    }, [handleDeleteFile, internalFiles, internalImages]);\n\n    const uploadedFiles = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n        cutFiles?.forEach(({ url, id, name }) => {\n            items.push(\n                <StyledMotionFileInputList\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    key={id}\n                    transition={{ duration: 0.25, type: 'tween' }}\n                >\n                    <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n                </StyledMotionFileInputList>,\n            );\n        });\n\n        return items;\n    }, [files, handleDeleteFile, maxFiles]);\n\n    return useMemo(\n        () => (\n            <StyledFileInput>\n                <StyledFileInputWrapper $isDisabled={isDisabled}>\n                    <StyledFileInputContainer\n                        onClick={() => void handleFileSelectionClick()}\n                        onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n                        onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n                    </StyledFileInputContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileInputContainer\n                            $isImageSelection\n                            onClick={() => void handleImageSelectionClick()}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n                        </StyledFileInputContainer>\n                    )}\n                </StyledFileInputWrapper>\n                <List>\n                    <AnimatePresence initial={false}>{content}</AnimatePresence>\n                </List>\n                {uploadedFiles.length > 0 && (\n                    <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n                        <List>\n                            <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n                        </List>\n                    </StyledUploadedFilesList>\n                )}\n            </StyledFileInput>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            content,\n            uploadedFiles,\n            handleFileSelectionClick,\n            handleDrop,\n            handleImageSelectionClick,\n        ],\n    );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileInput.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_List","_FileListItem","_FileInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FileInput","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","useState","internalImages","setInternalImages","handleAddImages","useCallback","images","newImages","forEach","image","filterDuplicateFileUrls","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","isValidFileType","types","filterDuplicateFile","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","isDisabled","useMemo","handleImageSelectionClick","buttonType","result","createDialog","dialogInput","upload","buttons","text","initialView","type","DialogType","MODULE","system","scope","module","open","handleFileSelectionClick","selectFiles","multiple","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","StyledMotionFileInputList","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","id","StyledFileInput","StyledFileInputWrapper","$isDisabled","StyledFileInputContainer","onClick","onDragOver","onDrop","icons","StyledFileInputText","$isImageSelection","AnimatePresence","initial","StyledUploadedFilesList","$shouldShowBorder","displayName","_default","exports"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n    StyledFileInput,\n    StyledFileInputContainer,\n    StyledFileInputText,\n    StyledFileInputWrapper,\n    StyledMotionFileInputList,\n    StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: FileInputFileItem[];\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | string[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File | FileInputFileItem | string) => void;\n};\n\ntype DialogInput = {\n    upload: boolean;\n    buttons: {\n        text: string;\n        buttonType: number;\n    }[];\n    initialView: string;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    onMaxFilesReached,\n    maxFiles,\n    onRemove,\n    files,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hinzufügen',\n    imageSelectPlaceholder,\n}) => {\n    const [internalFiles, setInternalFiles] = useState<File[]>([]);\n    const [internalImages, setInternalImages] = useState<string[]>([]);\n\n    const handleAddImages = useCallback(\n        (images: string[]) => {\n            const newImages: string[] = [];\n\n            images.forEach((image) => {\n                if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n                    newImages.push(image);\n                }\n            });\n\n            let tmp = newImages;\n\n            if (maxFiles) {\n                tmp = newImages.slice(\n                    0,\n                    maxFiles -\n                        (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                );\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalImages((prevState) => [...prevState, ...tmp]);\n        },\n        [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            const newFileItems: File[] = [];\n\n            newFiles.forEach((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return;\n                }\n\n                if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                    newFileItems.push(file);\n                }\n            });\n\n            let tmp = newFileItems;\n\n            if (maxFiles) {\n                tmp = newFileItems.slice(\n                    0,\n                    maxFiles -\n                        (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                );\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalFiles((prevState) => [...prevState, ...tmp]);\n        },\n        [files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n    );\n\n    const handleDeleteFile = useCallback(\n        (fileName?: string) => {\n            let fileToDelete: File | FileInputFileItem | string | undefined;\n\n            const filteredFiles = internalFiles.filter((file) => {\n                const { name } = file;\n\n                if (name === fileName) {\n                    fileToDelete = file;\n                }\n\n                return name !== fileName;\n            });\n\n            setInternalFiles(filteredFiles);\n\n            if (!fileToDelete) {\n                const filteredImages = internalImages.filter((image) => {\n                    if (image === fileName) {\n                        fileToDelete = image;\n                    }\n\n                    return image !== fileName;\n                });\n\n                setInternalImages(filteredImages);\n            }\n\n            if (!fileToDelete) {\n                files?.forEach((file) => {\n                    if (file.url === fileName || file.name === fileName) {\n                        fileToDelete = file;\n                    }\n                });\n            }\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [files, internalFiles, internalImages, onRemove],\n    );\n\n    const isDisabled = useMemo(() => {\n        if (maxFiles) {\n            if (internalFiles.length + internalImages.length >= maxFiles) {\n                if (typeof onMaxFilesReached === 'function') {\n                    onMaxFilesReached();\n                }\n\n                return true;\n            }\n        }\n\n        return false;\n    }, [internalFiles.length, internalImages.length, maxFiles, onMaxFilesReached]);\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        const { buttonType, result } = (await createDialog<DialogInput>({\n            dialogInput: {\n                upload: true,\n                buttons: [\n                    { text: 'hello', buttonType: 1 },\n                    { text: 'can', buttonType: -1 },\n                ],\n                initialView: 'pixabay',\n            },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) {\n            handleAddImages([result.url]);\n        }\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        const newFiles = await selectFiles({\n            multiple: true,\n            type: fileTypes,\n        });\n\n        handleAddFiles(newFiles);\n    }, [fileTypes, handleAddFiles, isDisabled]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [handleAddFiles],\n    );\n\n    const content = useMemo(() => {\n        const combinedFiles = [...internalImages, ...internalFiles];\n\n        const items: ReactElement[] = combinedFiles.map((file) => (\n            <StyledMotionFileInputList\n                animate={{ height: 'auto', opacity: 1 }}\n                exit={{ height: 0, opacity: 0 }}\n                key={typeof file === 'string' ? file : file.name}\n                transition={{ duration: 0.25, type: 'tween' }}\n            >\n                <FileListItem\n                    fileType={typeof file !== 'string' ? file.type : undefined}\n                    fileName={typeof file !== 'string' ? file.name : undefined}\n                    fileSize={typeof file !== 'string' ? file.size : undefined}\n                    url={typeof file === 'string' ? file : undefined}\n                    onRemove={handleDeleteFile}\n                />\n            </StyledMotionFileInputList>\n        ));\n\n        return items;\n    }, [handleDeleteFile, internalFiles, internalImages]);\n\n    const uploadedFiles = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n        cutFiles?.forEach(({ url, id, name }) => {\n            items.push(\n                <StyledMotionFileInputList\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    key={id}\n                    transition={{ duration: 0.25, type: 'tween' }}\n                >\n                    <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n                </StyledMotionFileInputList>,\n            );\n        });\n\n        return items;\n    }, [files, handleDeleteFile, maxFiles]);\n\n    return useMemo(\n        () => (\n            <StyledFileInput>\n                <StyledFileInputWrapper $isDisabled={isDisabled}>\n                    <StyledFileInputContainer\n                        onClick={() => void handleFileSelectionClick()}\n                        onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n                        onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n                    </StyledFileInputContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileInputContainer\n                            $isImageSelection\n                            onClick={() => void handleImageSelectionClick()}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n                        </StyledFileInputContainer>\n                    )}\n                </StyledFileInputWrapper>\n                <List>\n                    <AnimatePresence initial={false}>{content}</AnimatePresence>\n                </List>\n                {uploadedFiles.length > 0 && (\n                    <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n                        <List>\n                            <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n                        </List>\n                    </StyledUploadedFilesList>\n                )}\n            </StyledFileInput>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            content,\n            uploadedFiles,\n            handleFileSelectionClick,\n            handleDrop,\n            handleImageSelectionClick,\n        ],\n    );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/signature/Signature.js

@@ -37,17 +37,17 @@ const Signature = /*#__PURE__*/(0, _react.forwardRef)(({
     const dialog = await (0, _chaynsApi.createDialog)({
       type: _chaynsApi.DialogType.SIGNATURE
     }).open();
-    if (dialog.buttonType === 1 && dialog.result) {
-      await (0, _put.putUserSignature)(dialog.result).then(success => {
+    if (dialog.buttonType === 1 && dialog.value) {
+      await (0, _put.putUserSignature)(dialog.value).then(success => {
         if (success) {
-          setSignatureUrl(dialog.result);
+          setSignatureUrl(dialog.value);
           if (shouldSubscribe) {
             setHasSubscribed(true);
             if (typeof onSubscribe === 'function') {
               onSubscribe();
             }
           } else if (typeof onEdit === 'function') {
-            onEdit(dialog.result);
+            onEdit(dialog.value);
           }
         }
       });

package/lib/cjs/components/signature/Signature.js.map

@@ -1 +1 @@
-{"version":3,"file":"Signature.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_delete","_get","_put","_Button","_interopRequireDefault","_Icon","_Signature","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Signature","forwardRef","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","ref","signatureUrl","setSignatureUrl","useState","undefined","hasSubscribed","setHasSubscribed","useEffect","loadUserSignature","getUserSignature","then","signature","handleCallDialog","useCallback","shouldSubscribe","dialog","createDialog","type","DialogType","SIGNATURE","open","buttonType","result","putUserSignature","success","handleEdit","handleDelete","deleteUserSignature","handleClick","handleUnSubscribe","useImperativeHandle","edit","delete","createElement","StyledSignature","onClick","StyledSignatureImageWrapper","StyledSignatureImage","src","StyledSignatureDeleteIconWrapper","icons","size","displayName","_default","exports"],"sources":["../../../../src/components/signature/Signature.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport { putUserSignature } from '../../api/signature/put';\nimport type { SignatureDialogResult } from '../../types/signature';\nimport Button from '../button/Button';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signature: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: () => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const dialog = (await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open()) as SignatureDialogResult;\n\n                if (dialog.buttonType === 1 && dialog.result) {\n                    await putUserSignature(dialog.result).then((success) => {\n                        if (success) {\n                            setSignatureUrl(dialog.result);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe();\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(dialog.result);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setHasSubscribed(false);\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe();\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Signature.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_delete","_get","_put","_Button","_interopRequireDefault","_Icon","_Signature","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Signature","forwardRef","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","ref","signatureUrl","setSignatureUrl","useState","undefined","hasSubscribed","setHasSubscribed","useEffect","loadUserSignature","getUserSignature","then","signature","handleCallDialog","useCallback","shouldSubscribe","dialog","createDialog","type","DialogType","SIGNATURE","open","buttonType","value","putUserSignature","success","handleEdit","handleDelete","deleteUserSignature","handleClick","handleUnSubscribe","useImperativeHandle","edit","delete","createElement","StyledSignature","onClick","StyledSignatureImageWrapper","StyledSignatureImage","src","StyledSignatureDeleteIconWrapper","icons","size","displayName","_default","exports"],"sources":["../../../../src/components/signature/Signature.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport { putUserSignature } from '../../api/signature/put';\nimport Button from '../button/Button';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signature: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: () => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const dialog = await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open();\n\n                if (dialog.buttonType === 1 && dialog.value) {\n                    await putUserSignature(dialog.value).then((success) => {\n                        if (success) {\n                            setSignatureUrl(dialog.value);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe();\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(dialog.value);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setHasSubscribed(false);\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe();\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/amount-control/AmountControl.js

@@ -58,30 +58,36 @@ const AmountControl = _ref => {
       minAmount
     }).toString());
   }, [amount, maxAmount, minAmount]);
-
-  /**
-   * Function that updates the onChange event
-   */
-  useEffect(() => {
-    if (onChange) {
-      onChange(amountValue);
-    }
-  }, [amountValue, onChange]);
-  const handleAmountAdd = () => {
-    setAmountValue(prevState => prevState + 1);
+  const handleAmountAdd = useCallback(() => {
+    setAmountValue(prevState => {
+      const newAmount = prevState + 1;
+      if (typeof onChange === 'function') {
+        onChange(newAmount);
+      }
+      return newAmount;
+    });
     setInputValue(prevState => (Number(prevState) + 1).toString());
-  };
-  const handleAmountRemove = () => {
-    setAmountValue(prevState => prevState - 1);
+  }, [onChange]);
+  const handleAmountRemove = useCallback(() => {
+    setAmountValue(prevState => {
+      const newAmount = prevState - 1;
+      if (typeof onChange === 'function') {
+        onChange(newAmount);
+      }
+      return newAmount;
+    });
     setInputValue(prevState => (Number(prevState) - 1).toString());
-  };
+  }, [onChange]);
   const handleFirstAmount = useCallback(() => {
     if (amountValue !== 0) {
       return;
     }
+    if (typeof onChange === 'function') {
+      onChange(1);
+    }
     setAmountValue(1);
     setInputValue('1');
-  }, [amountValue]);
+  }, [amountValue, onChange]);
   const handleDeleteIconClick = useCallback(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
@@ -90,13 +96,16 @@ const AmountControl = _ref => {
     } else {
       handleAmountRemove();
     }
-  }, [inputValue]);
+  }, [handleAmountRemove, inputValue]);
   const handleInputBlur = useCallback(() => {
     setAmountValue(inputValue === '' ? 0 : Number(inputValue));
+    if (typeof onChange === 'function') {
+      onChange(inputValue === '' ? 0 : Number(inputValue));
+    }
     if (inputValue === '') {
       setInputValue('0');
     }
-  }, [inputValue]);
+  }, [inputValue, onChange]);
   const handleInputChange = useCallback(event => {
     const {
       value
@@ -228,7 +237,7 @@ const AmountControl = _ref => {
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 export default AmountControl;

package/lib/esm/components/amount-control/AmountControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","inputRef","hasFocus","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$shouldShowWideInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"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    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\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     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    onChange,\n    shouldShowWideInput = false,\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    const inputRef = useRef<HTMLInputElement>(null);\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 handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [inputValue]);\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-check']} size={20} color=\"white\" />;\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={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                {displayState === 'delete' || inputValue === '0' ? (\n                    <StyledAmountControlPseudoInput\n                        onClick={handleDeleteIconClick}\n                        $shouldShowWideInput={shouldShowWideInput}\n                    >\n                        {displayState === 'default' && label ? label : inputValue}\n                    </StyledAmountControlPseudoInput>\n                ) : (\n                    <StyledAmountControlInput\n                        ref={inputRef}\n                        $displayState={displayState}\n                        $shouldShowIcon={shouldShowIcon}\n                        $shouldShowWideInput={shouldShowWideInput}\n                        $hasFocus={hasFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        value={displayState === 'default' && label ? label : inputValue}\n                    />\n                )}\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\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            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","inputRef","hasFocus","toString","handleAmountAdd","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$shouldShowWideInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"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    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\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     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    onChange,\n    shouldShowWideInput = false,\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    const inputRef = useRef<HTMLInputElement>(null);\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    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = prevState + 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    }, [onChange]);\n\n    const handleAmountRemove = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = prevState - 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    }, [onChange]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== 0) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(1);\n        }\n\n        setAmountValue(1);\n        setInputValue('1');\n    }, [amountValue, onChange]);\n\n    const handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [handleAmountRemove, inputValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n        if (typeof onChange === 'function') {\n            onChange(inputValue === '' ? 0 : Number(inputValue));\n        }\n\n        if (inputValue === '') {\n            setInputValue('0');\n        }\n    }, [inputValue, onChange]);\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-check']} size={20} color=\"white\" />;\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={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                {displayState === 'delete' || inputValue === '0' ? (\n                    <StyledAmountControlPseudoInput\n                        onClick={handleDeleteIconClick}\n                        $shouldShowWideInput={shouldShowWideInput}\n                    >\n                        {displayState === 'default' && label ? label : inputValue}\n                    </StyledAmountControlPseudoInput>\n                ) : (\n                    <StyledAmountControlInput\n                        ref={inputRef}\n                        $displayState={displayState}\n                        $shouldShowIcon={shouldShowIcon}\n                        $shouldShowWideInput={shouldShowWideInput}\n                        $hasFocus={hasFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        value={displayState === 'default' && label ? label : inputValue}\n                    />\n                )}\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\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            handleAmountAdd,\n            handleAmountRemove,\n            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.styles.js

@@ -4,6 +4,7 @@ export const StyledCheckbox = styled.div`
     align-items: center;
     display: flex;
     position: relative;
+    width: 100%;
 `;
 export const StyledCheckboxInput = styled.input`
     display: none;
@@ -35,6 +36,7 @@ export const StyledCheckboxLabel = styled.label`
 }};
     transition: opacity 0.2s ease;
     user-select: none;
+    width: 100%;
 
     &:after {
         ${_ref5 => {

package/lib/esm/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\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\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '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\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : '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, $shouldShowAsSwitch }: StyledCheckboxLabelProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n        }\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\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    width: 100%;\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    width: 100%;\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\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '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\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : '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, $shouldShowAsSwitch }: StyledCheckboxLabelProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n        }\n    }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/context-menu/ContextMenu.js

@@ -1,3 +1,4 @@
+import { createDialog, DialogType } from 'chayns-api';
 import { AnimatePresence } from 'framer-motion';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -39,11 +40,10 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   const handleShow = useCallback(async () => {
     const isTouch = getIsTouch();
     if (isTouch) {
-      // ToDo: Replace with new api function if new api is ready
       const {
-        buttonType,
-        selection
-      } = await chayns.dialog.select({
+        value
+      } = await createDialog({
+        type: DialogType.SELECT,
         buttons: [],
         list: items.map((_ref2, index) => {
           let {
@@ -52,14 +52,13 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
           } = _ref2;
           return {
             name: text,
-            value: index,
+            id: index,
             icon: icons[0]
           };
-        }),
-        type: 2
-      });
-      if (buttonType === 1 && typeof selection[0]?.value === 'number') {
-        void items[selection[0].value]?.onClick();
+        })
+      }).open();
+      if (value[0] !== undefined) {
+        void items[value[0]]?.onClick();
       }
     } else if (contextMenuRef.current) {
       const rootElement = document.querySelector('.tapp') || document.body;

package/lib/esm/components/context-menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","document","body","coordinates","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","isTouch","buttonType","selection","chayns","dialog","select","buttons","list","map","_ref2","index","text","name","value","icon","type","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","window","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\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 { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    text: string;\n};\n\nexport type ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\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 closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const isTouch = getIsTouch();\n\n            if (isTouch) {\n                // ToDo: Replace with new api function if new api is ready\n                const { buttonType, selection } = await chayns.dialog.select({\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        value: index,\n                        icon: icons[0],\n                    })),\n                    type: 2,\n                });\n\n                if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n                    void items[selection[0].value]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\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, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","document","body","coordinates","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","isTouch","value","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","undefined","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","window","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\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 { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    text: string;\n};\n\nexport type ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\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 closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const isTouch = getIsTouch();\n\n            if (isTouch) {\n                const { value } = await createDialog({\n                    type: DialogType.SELECT,\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        id: index,\n                        icon: icons[0],\n                    })),\n                }).open();\n\n                if (value[0] !== undefined) {\n                    void items[value[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\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, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/file-input/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","useCallback","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","StyledUploadedFilesList","FileInput","_ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","isDisabled","handleImageSelectionClick","buttonType","result","dialogInput","upload","buttons","text","initialView","type","MODULE","system","scope","module","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","_ref2","id","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","initial","$shouldShowBorder","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n    StyledFileInput,\n    StyledFileInputContainer,\n    StyledFileInputText,\n    StyledFileInputWrapper,\n    StyledMotionFileInputList,\n    StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: FileInputFileItem[];\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | string[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File | FileInputFileItem | string) => void;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    onMaxFilesReached,\n    maxFiles,\n    onRemove,\n    files,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hinzufügen',\n    imageSelectPlaceholder,\n}) => {\n    const [internalFiles, setInternalFiles] = useState<File[]>([]);\n    const [internalImages, setInternalImages] = useState<string[]>([]);\n\n    const handleAddImages = useCallback(\n        (images: string[]) => {\n            const newImages: string[] = [];\n\n            images.forEach((image) => {\n                if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n                    newImages.push(image);\n                }\n            });\n\n            let tmp = newImages;\n\n            if (maxFiles) {\n                tmp = newImages.slice(\n                    0,\n                    maxFiles -\n                        (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                );\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalImages((prevState) => [...prevState, ...tmp]);\n        },\n        [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            const newFileItems: File[] = [];\n\n            newFiles.forEach((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return;\n                }\n\n                if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                    newFileItems.push(file);\n                }\n            });\n\n            let tmp = newFileItems;\n\n            if (maxFiles) {\n                tmp = newFileItems.slice(\n                    0,\n                    maxFiles -\n                        (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                );\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalFiles((prevState) => [...prevState, ...tmp]);\n        },\n        [files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n    );\n\n    const handleDeleteFile = useCallback(\n        (fileName?: string) => {\n            let fileToDelete: File | FileInputFileItem | string | undefined;\n\n            const filteredFiles = internalFiles.filter((file) => {\n                const { name } = file;\n\n                if (name === fileName) {\n                    fileToDelete = file;\n                }\n\n                return name !== fileName;\n            });\n\n            setInternalFiles(filteredFiles);\n\n            if (!fileToDelete) {\n                const filteredImages = internalImages.filter((image) => {\n                    if (image === fileName) {\n                        fileToDelete = image;\n                    }\n\n                    return image !== fileName;\n                });\n\n                setInternalImages(filteredImages);\n            }\n\n            if (!fileToDelete) {\n                files?.forEach((file) => {\n                    if (file.url === fileName || file.name === fileName) {\n                        fileToDelete = file;\n                    }\n                });\n            }\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [files, internalFiles, internalImages, onRemove],\n    );\n\n    const isDisabled = useMemo(() => {\n        if (maxFiles) {\n            if (internalFiles.length + internalImages.length >= maxFiles) {\n                if (typeof onMaxFilesReached === 'function') {\n                    onMaxFilesReached();\n                }\n\n                return true;\n            }\n        }\n\n        return false;\n    }, [internalFiles.length, internalImages.length, maxFiles, onMaxFilesReached]);\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        const { buttonType, result } = (await createDialog({\n            dialogInput: {\n                upload: true,\n                buttons: [\n                    { text: 'hello', buttonType: 1 },\n                    { text: 'can', buttonType: -1 },\n                ],\n                initialView: 'pixabay',\n            },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) {\n            handleAddImages([result.url]);\n        }\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        const newFiles = await selectFiles({\n            multiple: true,\n            type: fileTypes,\n        });\n\n        handleAddFiles(newFiles);\n    }, [fileTypes, handleAddFiles, isDisabled]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [handleAddFiles],\n    );\n\n    const content = useMemo(() => {\n        const combinedFiles = [...internalImages, ...internalFiles];\n\n        const items: ReactElement[] = combinedFiles.map((file) => (\n            <StyledMotionFileInputList\n                animate={{ height: 'auto', opacity: 1 }}\n                exit={{ height: 0, opacity: 0 }}\n                key={typeof file === 'string' ? file : file.name}\n                transition={{ duration: 0.25, type: 'tween' }}\n            >\n                <FileListItem\n                    fileType={typeof file !== 'string' ? file.type : undefined}\n                    fileName={typeof file !== 'string' ? file.name : undefined}\n                    fileSize={typeof file !== 'string' ? file.size : undefined}\n                    url={typeof file === 'string' ? file : undefined}\n                    onRemove={handleDeleteFile}\n                />\n            </StyledMotionFileInputList>\n        ));\n\n        return items;\n    }, [handleDeleteFile, internalFiles, internalImages]);\n\n    const uploadedFiles = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n        cutFiles?.forEach(({ url, id, name }) => {\n            items.push(\n                <StyledMotionFileInputList\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    key={id}\n                    transition={{ duration: 0.25, type: 'tween' }}\n                >\n                    <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n                </StyledMotionFileInputList>,\n            );\n        });\n\n        return items;\n    }, [files, handleDeleteFile, maxFiles]);\n\n    return useMemo(\n        () => (\n            <StyledFileInput>\n                <StyledFileInputWrapper $isDisabled={isDisabled}>\n                    <StyledFileInputContainer\n                        onClick={() => void handleFileSelectionClick()}\n                        onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n                        onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n                    </StyledFileInputContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileInputContainer\n                            $isImageSelection\n                            onClick={() => void handleImageSelectionClick()}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n                        </StyledFileInputContainer>\n                    )}\n                </StyledFileInputWrapper>\n                <List>\n                    <AnimatePresence initial={false}>{content}</AnimatePresence>\n                </List>\n                {uploadedFiles.length > 0 && (\n                    <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n                        <List>\n                            <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n                        </List>\n                    </StyledUploadedFilesList>\n                )}\n            </StyledFileInput>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            content,\n            uploadedFiles,\n            handleFileSelectionClick,\n            handleDrop,\n            handleImageSelectionClick,\n        ],\n    );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","useCallback","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","StyledUploadedFilesList","FileInput","_ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","isDisabled","handleImageSelectionClick","buttonType","result","dialogInput","upload","buttons","text","initialView","type","MODULE","system","scope","module","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","_ref2","id","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","initial","$shouldShowBorder","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n    StyledFileInput,\n    StyledFileInputContainer,\n    StyledFileInputText,\n    StyledFileInputWrapper,\n    StyledMotionFileInputList,\n    StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: FileInputFileItem[];\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | string[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File | FileInputFileItem | string) => void;\n};\n\ntype DialogInput = {\n    upload: boolean;\n    buttons: {\n        text: string;\n        buttonType: number;\n    }[];\n    initialView: string;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    onMaxFilesReached,\n    maxFiles,\n    onRemove,\n    files,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hinzufügen',\n    imageSelectPlaceholder,\n}) => {\n    const [internalFiles, setInternalFiles] = useState<File[]>([]);\n    const [internalImages, setInternalImages] = useState<string[]>([]);\n\n    const handleAddImages = useCallback(\n        (images: string[]) => {\n            const newImages: string[] = [];\n\n            images.forEach((image) => {\n                if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n                    newImages.push(image);\n                }\n            });\n\n            let tmp = newImages;\n\n            if (maxFiles) {\n                tmp = newImages.slice(\n                    0,\n                    maxFiles -\n                        (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                );\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalImages((prevState) => [...prevState, ...tmp]);\n        },\n        [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            const newFileItems: File[] = [];\n\n            newFiles.forEach((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return;\n                }\n\n                if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                    newFileItems.push(file);\n                }\n            });\n\n            let tmp = newFileItems;\n\n            if (maxFiles) {\n                tmp = newFileItems.slice(\n                    0,\n                    maxFiles -\n                        (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                );\n            }\n\n            if (tmp.length > 0 && typeof onAdd === 'function') {\n                onAdd(tmp);\n            }\n\n            setInternalFiles((prevState) => [...prevState, ...tmp]);\n        },\n        [files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n    );\n\n    const handleDeleteFile = useCallback(\n        (fileName?: string) => {\n            let fileToDelete: File | FileInputFileItem | string | undefined;\n\n            const filteredFiles = internalFiles.filter((file) => {\n                const { name } = file;\n\n                if (name === fileName) {\n                    fileToDelete = file;\n                }\n\n                return name !== fileName;\n            });\n\n            setInternalFiles(filteredFiles);\n\n            if (!fileToDelete) {\n                const filteredImages = internalImages.filter((image) => {\n                    if (image === fileName) {\n                        fileToDelete = image;\n                    }\n\n                    return image !== fileName;\n                });\n\n                setInternalImages(filteredImages);\n            }\n\n            if (!fileToDelete) {\n                files?.forEach((file) => {\n                    if (file.url === fileName || file.name === fileName) {\n                        fileToDelete = file;\n                    }\n                });\n            }\n\n            if (!fileToDelete || typeof onRemove !== 'function') {\n                return;\n            }\n\n            onRemove(fileToDelete);\n        },\n        [files, internalFiles, internalImages, onRemove],\n    );\n\n    const isDisabled = useMemo(() => {\n        if (maxFiles) {\n            if (internalFiles.length + internalImages.length >= maxFiles) {\n                if (typeof onMaxFilesReached === 'function') {\n                    onMaxFilesReached();\n                }\n\n                return true;\n            }\n        }\n\n        return false;\n    }, [internalFiles.length, internalImages.length, maxFiles, onMaxFilesReached]);\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        const { buttonType, result } = (await createDialog<DialogInput>({\n            dialogInput: {\n                upload: true,\n                buttons: [\n                    { text: 'hello', buttonType: 1 },\n                    { text: 'can', buttonType: -1 },\n                ],\n                initialView: 'pixabay',\n            },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) {\n            handleAddImages([result.url]);\n        }\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        const newFiles = await selectFiles({\n            multiple: true,\n            type: fileTypes,\n        });\n\n        handleAddFiles(newFiles);\n    }, [fileTypes, handleAddFiles, isDisabled]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            const draggedFiles = Array.from(e.dataTransfer.files);\n\n            handleAddFiles(draggedFiles);\n        },\n        [handleAddFiles],\n    );\n\n    const content = useMemo(() => {\n        const combinedFiles = [...internalImages, ...internalFiles];\n\n        const items: ReactElement[] = combinedFiles.map((file) => (\n            <StyledMotionFileInputList\n                animate={{ height: 'auto', opacity: 1 }}\n                exit={{ height: 0, opacity: 0 }}\n                key={typeof file === 'string' ? file : file.name}\n                transition={{ duration: 0.25, type: 'tween' }}\n            >\n                <FileListItem\n                    fileType={typeof file !== 'string' ? file.type : undefined}\n                    fileName={typeof file !== 'string' ? file.name : undefined}\n                    fileSize={typeof file !== 'string' ? file.size : undefined}\n                    url={typeof file === 'string' ? file : undefined}\n                    onRemove={handleDeleteFile}\n                />\n            </StyledMotionFileInputList>\n        ));\n\n        return items;\n    }, [handleDeleteFile, internalFiles, internalImages]);\n\n    const uploadedFiles = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n        cutFiles?.forEach(({ url, id, name }) => {\n            items.push(\n                <StyledMotionFileInputList\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    key={id}\n                    transition={{ duration: 0.25, type: 'tween' }}\n                >\n                    <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n                </StyledMotionFileInputList>,\n            );\n        });\n\n        return items;\n    }, [files, handleDeleteFile, maxFiles]);\n\n    return useMemo(\n        () => (\n            <StyledFileInput>\n                <StyledFileInputWrapper $isDisabled={isDisabled}>\n                    <StyledFileInputContainer\n                        onClick={() => void handleFileSelectionClick()}\n                        onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n                        onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n                    </StyledFileInputContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileInputContainer\n                            $isImageSelection\n                            onClick={() => void handleImageSelectionClick()}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n                        </StyledFileInputContainer>\n                    )}\n                </StyledFileInputWrapper>\n                <List>\n                    <AnimatePresence initial={false}>{content}</AnimatePresence>\n                </List>\n                {uploadedFiles.length > 0 && (\n                    <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n                        <List>\n                            <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n                        </List>\n                    </StyledUploadedFilesList>\n                )}\n            </StyledFileInput>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            content,\n            uploadedFiles,\n            handleFileSelectionClick,\n            handleDrop,\n            handleImageSelectionClick,\n        ],\n    );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/signature/Signature.js

@@ -29,17 +29,17 @@ const Signature = /*#__PURE__*/forwardRef((_ref, ref) => {
     const dialog = await createDialog({
       type: DialogType.SIGNATURE
     }).open();
-    if (dialog.buttonType === 1 && dialog.result) {
-      await putUserSignature(dialog.result).then(success => {
+    if (dialog.buttonType === 1 && dialog.value) {
+      await putUserSignature(dialog.value).then(success => {
         if (success) {
-          setSignatureUrl(dialog.result);
+          setSignatureUrl(dialog.value);
           if (shouldSubscribe) {
             setHasSubscribed(true);
             if (typeof onSubscribe === 'function') {
               onSubscribe();
             }
           } else if (typeof onEdit === 'function') {
-            onEdit(dialog.result);
+            onEdit(dialog.value);
           }
         }
       });

package/lib/esm/components/signature/Signature.js.map

@@ -1 +1 @@
-{"version":3,"file":"Signature.js","names":["createDialog","DialogType","React","forwardRef","useCallback","useEffect","useImperativeHandle","useState","deleteUserSignature","getUserSignature","putUserSignature","Button","Icon","StyledSignature","StyledSignatureDeleteIconWrapper","StyledSignatureImage","StyledSignatureImageWrapper","Signature","_ref","ref","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","signatureUrl","setSignatureUrl","undefined","hasSubscribed","setHasSubscribed","loadUserSignature","then","signature","handleCallDialog","shouldSubscribe","dialog","type","SIGNATURE","open","buttonType","result","success","handleEdit","handleDelete","handleClick","handleUnSubscribe","edit","delete","createElement","onClick","src","icons","size","displayName"],"sources":["../../../../src/components/signature/Signature.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport { putUserSignature } from '../../api/signature/put';\nimport type { SignatureDialogResult } from '../../types/signature';\nimport Button from '../button/Button';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signature: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: () => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const dialog = (await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open()) as SignatureDialogResult;\n\n                if (dialog.buttonType === 1 && dialog.result) {\n                    await putUserSignature(dialog.result).then((success) => {\n                        if (success) {\n                            setSignatureUrl(dialog.result);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe();\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(dialog.result);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setHasSubscribed(false);\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe();\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Signature.js","names":["createDialog","DialogType","React","forwardRef","useCallback","useEffect","useImperativeHandle","useState","deleteUserSignature","getUserSignature","putUserSignature","Button","Icon","StyledSignature","StyledSignatureDeleteIconWrapper","StyledSignatureImage","StyledSignatureImageWrapper","Signature","_ref","ref","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","signatureUrl","setSignatureUrl","undefined","hasSubscribed","setHasSubscribed","loadUserSignature","then","signature","handleCallDialog","shouldSubscribe","dialog","type","SIGNATURE","open","buttonType","value","success","handleEdit","handleDelete","handleClick","handleUnSubscribe","edit","delete","createElement","onClick","src","icons","size","displayName"],"sources":["../../../../src/components/signature/Signature.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport { putUserSignature } from '../../api/signature/put';\nimport Button from '../button/Button';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signature: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: () => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const dialog = await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open();\n\n                if (dialog.buttonType === 1 && dialog.value) {\n                    await putUserSignature(dialog.value).then((success) => {\n                        if (success) {\n                            setSignatureUrl(dialog.value);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe();\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(dialog.value);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setHasSubscribed(false);\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe();\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.680",
+    "version": "5.0.0-beta.684",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -76,7 +76,7 @@
         "uuid": "^9.0.1"
     },
     "peerDependencies": {
-        "chayns-api": ">=1.0.50",
+        "chayns-api": ">=1.0.73",
         "framer-motion": ">=10.18.0",
         "react": ">=16.14.0",
         "react-dom": ">=16.14.0",
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6adca9d8a8190b16d1cfc335a123564ea8ecedaa"
+    "gitHead": "a42b3c55ff3c666460c4b714c7eee91125f06466"
 }