@chayns-components/core 5.0.0-beta.927 → 5.0.0-beta.930

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

@@ -15,13 +15,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const AmountControl = ({
   amount,
   icon,
-  shouldShowAddIconOnMinAmount = false,
-  shouldShowIcon = true,
-  label,
   iconColor,
+  isDisabled = false,
+  label,
   maxAmount,
   minAmount = 0,
   onChange,
+  shouldShowAddIconOnMinAmount = false,
+  shouldShowIcon = true,
   shouldShowWideInput = false,
   step: stepProp = 1
 }) => {
@@ -203,7 +204,8 @@ const AmountControl = ({
     return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);
   }, [displayState, shouldShowAddIconOnMinAmount, shouldShowIcon]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControl, {
-    onClick: handleFirstAmount
+    onClick: handleFirstAmount,
+    $isDisabled: isDisabled
   }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
   }, shouldShowLeftIcon && /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
@@ -275,7 +277,7 @@ const AmountControl = ({
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, minAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, isDisabled, label, leftIcon, maxAmount, minAmount, 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","shouldShowAddIconOnMinAmount","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","useState","inputValue","setInputValue","toString","displayState","setDisplayState","useMemo","Number","isSafeInteger","inputRef","useRef","useEffect","hasFocus","checkForValidAmount","handleAmountAdd","useCallback","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","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' | 'minAmount';\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     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the add icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\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     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\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 > minAmount:\n                setDisplayState('normal');\n                return;\n            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\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 = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, minAmount, onChange, step]);\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        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [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 (shouldShowAddIconOnMinAmount && displayState === 'minAmount') {\n            return false;\n        }\n\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);\n    }, [displayState, shouldShowAddIconOnMinAmount, 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' || displayState === 'minAmount') && (\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\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            minAmount,\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":["_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","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","useState","inputValue","setInputValue","toString","displayState","setDisplayState","useMemo","Number","isSafeInteger","inputRef","useRef","useEffect","hasFocus","checkForValidAmount","handleAmountAdd","useCallback","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","StyledAmountControl","onClick","$isDisabled","AnimatePresence","initial","StyledMotionAmountControlButton","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","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' | 'minAmount';\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     * Whether the control should be disabled\n     */\n    isDisabled?: boolean;\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     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the add icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\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     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    iconColor,\n    isDisabled = false,\n    label,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\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 > minAmount:\n                setDisplayState('normal');\n                return;\n            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\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 = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, minAmount, onChange, step]);\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        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [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 (shouldShowAddIconOnMinAmount && displayState === 'minAmount') {\n            return false;\n        }\n\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);\n    }, [displayState, shouldShowAddIconOnMinAmount, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\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' || displayState === 'minAmount') && (\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\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            isDisabled,\n            label,\n            leftIcon,\n            maxAmount,\n            minAmount,\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/amount-control/AmountControl.styles.js

@@ -16,6 +16,14 @@ const StyledAmountControl = exports.StyledAmountControl = _styledComponents.defa
     width: fit-content;
     border-radius: 3px;
     overflow: hidden;
+    transition: opacity 0.2s ease;
+
+    ${({
+  $isDisabled
+}) => $isDisabled && (0, _styledComponents.css)`
+            opacity: 0.5;
+            pointer-events: none;
+        `}
 `;
 const StyledAmountControlInput = exports.StyledAmountControlInput = _styledComponents.default.input`
     background-color: ${({
@@ -57,11 +65,13 @@ const StyledAmountControlPseudoInput = exports.StyledAmountControlPseudoInput =
 }) => theme.text};
     border: none;
     height: 28px;
-    width: ${({
+    min-width: ${({
   $shouldShowWideInput
 }) => $shouldShowWideInput ? 90 : 55}px;
+    padding: 0 8px;
     text-align: center;
     cursor: pointer;
+    user-select: none;
 
     display: flex;
     justify-content: center;

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledAmountControl","exports","styled","div","theme","StyledAmountControlInput","input","text","$shouldShowWideInput","$hasFocus","$displayState","css","$shouldShowIcon","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","motion","button","$color","$isWide","$isDisabled"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: pointer;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n    $isWide?: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: ${({ $color }) => $color ?? 'rgba(255, 255, 255, 0.2)'};\n    transition: background-color 0.2s ease-in-out;\n    height: 28px;\n    width: ${({ $isWide }) => ($isWide ? 40 : 28)}px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AmountControl.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledAmountControl","exports","styled","div","theme","$isDisabled","css","StyledAmountControlInput","input","text","$shouldShowWideInput","$hasFocus","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","motion","button","$color","$isWide"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n    transition: opacity 0.2s ease;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 0 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n    $isWide?: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: ${({ $color }) => $color ?? 'rgba(255, 255, 255, 0.2)'};\n    transition: background-color 0.2s ease-in-out;\n    height: 28px;\n    width: ${({ $isWide }) => ($isWide ? 40 : 28)}px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/list-item/ListItem.js

@@ -26,6 +26,7 @@ const ListItem = ({
   onClick,
   onLongPress,
   leftElements,
+  isTitleGreyed: isDisabledButNotReallyDisabled,
   rightElements,
   shouldHideImageOrIconBackground,
   shouldHideIndicator = false,
@@ -98,6 +99,7 @@ const ListItem = ({
     icons: icons,
     images: images,
     isAnyItemExpandable: isAnyItemExpandable,
+    isDisabledButNotReallyDisabled: isDisabledButNotReallyDisabled,
     isExpandable: isExpandable,
     isOpen: isItemOpen,
     leftElements: leftElements,

package/lib/cjs/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isInAccordion","$isWrapped","$shouldHideIndicator","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isWrapped={isWrapped}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","isTitleGreyed","isDisabledButNotReallyDisabled","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isInAccordion","$isWrapped","$shouldHideIndicator","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n                              isTitleGreyed :           isDisabledButNotReallyDisabled,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isWrapped={isWrapped}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isDisabledButNotReallyDisabled={isDisabledButNotReallyDisabled}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js

@@ -28,6 +28,7 @@ const ListItemHead = ({
   shouldHideImageOrIconBackground,
   shouldHideIndicator,
   subtitle,
+  isDisabledButNotReallyDisabled,
   shouldShowRoundImageOrIcon,
   title,
   titleElement
@@ -99,7 +100,8 @@ const ListItemHead = ({
   }, [icons, images, shouldHideImageOrIconBackground, shouldShowRoundImageOrIcon]);
   return /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHead, {
     animate: {
-      height: isOpen ? headHeight.open : headHeight.closed
+      height: isOpen ? headHeight.open : headHeight.closed,
+      opacity: isDisabledButNotReallyDisabled ? .5 : 1
     },
     initial: false,
     transition: {

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","StyledListItemHead","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItem","marginLeft","opacity","width","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    subtitle?: ReactNode;\n    shouldShowRoundImageOrIcon?: boolean;\n    title: ReactNode;\n    titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    title,\n    titleElement,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: 40,\n        open: 40,\n    });\n    const [isFirstRender, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const closedTitle = useElementSize(pseudoTitleClosedRef);\n    const openedTitle = useElementSize(pseudoTitleOpenRef);\n    const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n    const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    shouldShowSubtitleRow && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    shouldShowSubtitleRow && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\n    useEffect(() => {\n        setIsFirstRender(true);\n    }, []);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    images={images}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [icons, images, shouldHideImageOrIconBackground, shouldShowRoundImageOrIcon]);\n\n    return (\n        <StyledListItemHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleTextPseudo\n                            ref={pseudoTitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleText $isOpen={isOpen}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleTextPseudo\n                            ref={pseudoSubtitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","isDisabledButNotReallyDisabled","shouldShowRoundImageOrIcon","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","StyledListItemHead","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItem","marginLeft","width","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    subtitle?: ReactNode;\n    shouldShowRoundImageOrIcon?: boolean;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    isDisabledButNotReallyDisabled?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    subtitle,\n    isDisabledButNotReallyDisabled,\n    shouldShowRoundImageOrIcon,\n    title,\n    titleElement,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: 40,\n        open: 40,\n    });\n    const [isFirstRender, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const closedTitle = useElementSize(pseudoTitleClosedRef);\n    const openedTitle = useElementSize(pseudoTitleOpenRef);\n    const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n    const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    shouldShowSubtitleRow && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    shouldShowSubtitleRow && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\n    useEffect(() => {\n        setIsFirstRender(true);\n    }, []);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    images={images}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [icons, images, shouldHideImageOrIconBackground, shouldShowRoundImageOrIcon]);\n\n    return (\n        <StyledListItemHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed, opacity: isDisabledButNotReallyDisabled ? .5:1 }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleTextPseudo\n                            ref={pseudoTitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleText $isOpen={isOpen}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleTextPseudo\n                            ref={pseudoSubtitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

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

@@ -7,13 +7,14 @@ const AmountControl = _ref => {
   let {
     amount,
     icon,
-    shouldShowAddIconOnMinAmount = false,
-    shouldShowIcon = true,
-    label,
     iconColor,
+    isDisabled = false,
+    label,
     maxAmount,
     minAmount = 0,
     onChange,
+    shouldShowAddIconOnMinAmount = false,
+    shouldShowIcon = true,
     shouldShowWideInput = false,
     step: stepProp = 1
   } = _ref;
@@ -194,7 +195,8 @@ const AmountControl = _ref => {
     return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);
   }, [displayState, shouldShowAddIconOnMinAmount, shouldShowIcon]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledAmountControl, {
-    onClick: handleFirstAmount
+    onClick: handleFirstAmount,
+    $isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, shouldShowLeftIcon && /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
@@ -266,7 +268,7 @@ const AmountControl = _ref => {
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, minAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, isDisabled, label, leftIcon, maxAmount, minAmount, 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","shouldShowAddIconOnMinAmount","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","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' | 'minAmount';\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     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the add icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\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     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\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 > minAmount:\n                setDisplayState('normal');\n                return;\n            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\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 = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, minAmount, onChange, step]);\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        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [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 (shouldShowAddIconOnMinAmount && displayState === 'minAmount') {\n            return false;\n        }\n\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);\n    }, [displayState, shouldShowAddIconOnMinAmount, 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' || displayState === 'minAmount') && (\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\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            minAmount,\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","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","$isDisabled","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$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' | 'minAmount';\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     * Whether the control should be disabled\n     */\n    isDisabled?: boolean;\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     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the add icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\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     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    iconColor,\n    isDisabled = false,\n    label,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\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 > minAmount:\n                setDisplayState('normal');\n                return;\n            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\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 = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, minAmount, onChange, step]);\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        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [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 (shouldShowAddIconOnMinAmount && displayState === 'minAmount') {\n            return false;\n        }\n\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);\n    }, [displayState, shouldShowAddIconOnMinAmount, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\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' || displayState === 'minAmount') && (\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\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            isDisabled,\n            label,\n            leftIcon,\n            maxAmount,\n            minAmount,\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/amount-control/AmountControl.styles.js

@@ -11,50 +11,61 @@ export const StyledAmountControl = styled.div`
     width: fit-content;
     border-radius: 3px;
     overflow: hidden;
+    transition: opacity 0.2s ease;
+
+    ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return $isDisabled && css`
+            opacity: 0.5;
+            pointer-events: none;
+        `;
+}}
 `;
 export const StyledAmountControlInput = styled.input`
-    background-color: ${_ref2 => {
+    background-color: ${_ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   return theme['202'];
 }};
-    color: ${_ref3 => {
+    color: ${_ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _ref4;
   return theme.text;
 }};
     border: none;
     height: 28px;
-    width: ${_ref4 => {
+    width: ${_ref5 => {
   let {
     $shouldShowWideInput
-  } = _ref4;
+  } = _ref5;
   return $shouldShowWideInput ? 90 : 55;
 }}px;
     text-align: center;
-    cursor: ${_ref5 => {
+    cursor: ${_ref6 => {
   let {
     $hasFocus
-  } = _ref5;
+  } = _ref6;
   return $hasFocus ? 'text' : 'pointer';
 }};
 
-    ${_ref6 => {
+    ${_ref7 => {
   let {
     $displayState
-  } = _ref6;
+  } = _ref7;
   return $displayState !== 'normal' && css`
             border-bottom-right-radius: 3px;
             border-top-right-radius: 3px;
         `;
 }}
-    ${_ref7 => {
+    ${_ref8 => {
   let {
     $displayState,
     $shouldShowIcon
-  } = _ref7;
+  } = _ref8;
   return $displayState === 'default' && !$shouldShowIcon && css`
             border-bottom-left-radius: 3px;
             border-top-left-radius: 3px;
@@ -62,28 +73,30 @@ export const StyledAmountControlInput = styled.input`
 }};
 `;
 export const StyledAmountControlPseudoInput = styled.div`
-    background-color: ${_ref8 => {
+    background-color: ${_ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme['202'];
 }};
-    color: ${_ref9 => {
+    color: ${_ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.text;
 }};
     border: none;
     height: 28px;
-    width: ${_ref10 => {
+    min-width: ${_ref11 => {
   let {
     $shouldShowWideInput
-  } = _ref10;
+  } = _ref11;
   return $shouldShowWideInput ? 90 : 55;
 }}px;
+    padding: 0 8px;
     text-align: center;
     cursor: pointer;
+    user-select: none;
 
     display: flex;
     justify-content: center;
@@ -94,25 +107,25 @@ export const StyledAmountControlPseudoInput = styled.div`
 `;
 export const StyledMotionAmountControlButton = styled(motion.button)`
     overflow: hidden;
-    background-color: ${_ref11 => {
+    background-color: ${_ref12 => {
   let {
     $color
-  } = _ref11;
+  } = _ref12;
   return $color ?? 'rgba(255, 255, 255, 0.2)';
 }};
     transition: background-color 0.2s ease-in-out;
     height: 28px;
-    width: ${_ref12 => {
+    width: ${_ref13 => {
   let {
     $isWide
-  } = _ref12;
+  } = _ref13;
   return $isWide ? 40 : 28;
 }}px;
 
-    ${_ref13 => {
+    ${_ref14 => {
   let {
     $isDisabled
-  } = _ref13;
+  } = _ref14;
   return $isDisabled && css`
             opacity: 0.5;
         `;

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","text","_ref4","$shouldShowWideInput","_ref5","$hasFocus","_ref6","$displayState","_ref7","$shouldShowIcon","StyledAmountControlPseudoInput","_ref8","_ref9","_ref10","StyledMotionAmountControlButton","button","_ref11","$color","_ref12","$isWide","_ref13","$isDisabled"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: pointer;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n    $isWide?: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: ${({ $color }) => $color ?? 'rgba(255, 255, 255, 0.2)'};\n    transition: background-color 0.2s ease-in-out;\n    height: 28px;\n    width: ${({ $isWide }) => ($isWide ? 40 : 28)}px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAoC;AACnF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA;AAClF,aAAaI,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAACK,IAAI;AAAA;AACrE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC3E;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,SAAS;AAAA,CAAC;AACjE;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1Bf,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,MAAMgB,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBjB,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMkB,8BAA8B,GAAGnB,MAAM,CAACG,GAAwC;AAC7F,wBAAwBiB,KAAA;EAAA,IAAC;IAAEf;EAA2C,CAAC,GAAAe,KAAA;EAAA,OAAKf,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF,aAAagB,KAAA;EAAA,IAAC;IAAEhB;EAA2C,CAAC,GAAAgB,KAAA;EAAA,OAAKhB,KAAK,CAACK,IAAI;AAAA;AAC3E;AACA;AACA,aAAaY,MAAA;EAAA,IAAC;IAAEV;EAAqB,CAAC,GAAAU,MAAA;EAAA,OAAMV,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMW,+BAA+B,GAAGvB,MAAM,CACjDD,MAAM,CAACyB,MACX,CAAiC;AACjC;AACA,wBAAwBC,MAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,MAAA;EAAA,OAAKC,MAAM,IAAI,0BAA0B;AAAA;AAC5E;AACA;AACA,aAAaC,MAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,MAAA;EAAA,OAAMC,OAAO,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AACjD;AACA,MAAMC,MAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,MAAA;EAAA,OACdC,WAAW,IACX7B,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","_ref2","$isDisabled","StyledAmountControlInput","input","_ref3","_ref4","text","_ref5","$shouldShowWideInput","_ref6","$hasFocus","_ref7","$displayState","_ref8","$shouldShowIcon","StyledAmountControlPseudoInput","_ref9","_ref10","_ref11","StyledMotionAmountControlButton","button","_ref12","$color","_ref13","$isWide","_ref14"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n    transition: opacity 0.2s ease;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 0 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n    $isWide?: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: ${({ $color }) => $color ?? 'rgba(255, 255, 255, 0.2)'};\n    transition: background-color 0.2s ease-in-out;\n    height: 28px;\n    width: ${({ $isWide }) => ($isWide ? 40 : 28)}px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXN,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC;AASD,OAAO,MAAMO,wBAAwB,GAAGR,MAAM,CAACS,KAAoC;AACnF,wBAAwBC,KAAA;EAAA,IAAC;IAAEL;EAAqC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA;AAClF,aAAaM,KAAA;EAAA,IAAC;IAAEN;EAAqC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA;AACrE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC3E;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,SAAS;AAAA,CAAC;AACjE;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1BjB,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,MAAMkB,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBnB,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMoB,8BAA8B,GAAGrB,MAAM,CAACG,GAAwC;AAC7F,wBAAwBmB,KAAA;EAAA,IAAC;IAAEjB;EAA2C,CAAC,GAAAiB,KAAA;EAAA,OAAKjB,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF,aAAakB,MAAA;EAAA,IAAC;IAAElB;EAA2C,CAAC,GAAAkB,MAAA;EAAA,OAAKlB,KAAK,CAACO,IAAI;AAAA;AAC3E;AACA;AACA,iBAAiBY,MAAA;EAAA,IAAC;IAAEV;EAAqB,CAAC,GAAAU,MAAA;EAAA,OAAMV,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMW,+BAA+B,GAAGzB,MAAM,CACjDD,MAAM,CAAC2B,MACX,CAAiC;AACjC;AACA,wBAAwBC,MAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,MAAA;EAAA,OAAKC,MAAM,IAAI,0BAA0B;AAAA;AAC5E;AACA;AACA,aAAaC,MAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,MAAA;EAAA,OAAMC,OAAO,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AACjD;AACA,MAAMC,MAAA;EAAA,IAAC;IAAExB;EAAY,CAAC,GAAAwB,MAAA;EAAA,OACdxB,WAAW,IACXN,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.js

@@ -18,6 +18,7 @@ const ListItem = _ref => {
     onClick,
     onLongPress,
     leftElements,
+    isTitleGreyed: isDisabledButNotReallyDisabled,
     rightElements,
     shouldHideImageOrIconBackground,
     shouldHideIndicator = false,
@@ -90,6 +91,7 @@ const ListItem = _ref => {
     icons: icons,
     images: images,
     isAnyItemExpandable: isAnyItemExpandable,
+    isDisabledButNotReallyDisabled: isDisabledButNotReallyDisabled,
     isExpandable: isExpandable,
     isOpen: isItemOpen,
     leftElements: leftElements,

package/lib/esm/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isInAccordion","$isWrapped","$shouldHideIndicator","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isWrapped={isWrapped}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","isTitleGreyed","isDisabledButNotReallyDisabled","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isInAccordion","$isWrapped","$shouldHideIndicator","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n                              isTitleGreyed :           isDisabledButNotReallyDisabled,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isWrapped={isWrapped}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isDisabledButNotReallyDisabled={isDisabledButNotReallyDisabled}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js

@@ -20,6 +20,7 @@ const ListItemHead = _ref => {
     shouldHideImageOrIconBackground,
     shouldHideIndicator,
     subtitle,
+    isDisabledButNotReallyDisabled,
     shouldShowRoundImageOrIcon,
     title,
     titleElement
@@ -91,7 +92,8 @@ const ListItemHead = _ref => {
   }, [icons, images, shouldHideImageOrIconBackground, shouldShowRoundImageOrIcon]);
   return /*#__PURE__*/React.createElement(StyledListItemHead, {
     animate: {
-      height: isOpen ? headHeight.open : headHeight.closed
+      height: isOpen ? headHeight.open : headHeight.closed,
+      opacity: isDisabledButNotReallyDisabled ? .5 : 1
     },
     initial: false,
     transition: {

package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","height","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","marginLeft","opacity","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    subtitle?: ReactNode;\n    shouldShowRoundImageOrIcon?: boolean;\n    title: ReactNode;\n    titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    title,\n    titleElement,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: 40,\n        open: 40,\n    });\n    const [isFirstRender, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const closedTitle = useElementSize(pseudoTitleClosedRef);\n    const openedTitle = useElementSize(pseudoTitleOpenRef);\n    const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n    const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    shouldShowSubtitleRow && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    shouldShowSubtitleRow && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\n    useEffect(() => {\n        setIsFirstRender(true);\n    }, []);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    images={images}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [icons, images, shouldHideImageOrIconBackground, shouldShowRoundImageOrIcon]);\n\n    return (\n        <StyledListItemHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleTextPseudo\n                            ref={pseudoTitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleText $isOpen={isOpen}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleTextPseudo\n                            ref={pseudoSubtitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","isDisabledButNotReallyDisabled","shouldShowRoundImageOrIcon","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","height","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","marginLeft","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    subtitle?: ReactNode;\n    shouldShowRoundImageOrIcon?: boolean;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    isDisabledButNotReallyDisabled?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    subtitle,\n    isDisabledButNotReallyDisabled,\n    shouldShowRoundImageOrIcon,\n    title,\n    titleElement,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: 40,\n        open: 40,\n    });\n    const [isFirstRender, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const closedTitle = useElementSize(pseudoTitleClosedRef);\n    const openedTitle = useElementSize(pseudoTitleOpenRef);\n    const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n    const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    shouldShowSubtitleRow && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    shouldShowSubtitleRow && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\n    useEffect(() => {\n        setIsFirstRender(true);\n    }, []);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    images={images}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [icons, images, shouldHideImageOrIconBackground, shouldShowRoundImageOrIcon]);\n\n    return (\n        <StyledListItemHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed, opacity: isDisabledButNotReallyDisabled ? .5:1 }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleTextPseudo\n                            ref={pseudoTitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleText $isOpen={isOpen}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleTextPseudo\n                            ref={pseudoSubtitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/amount-control/AmountControl.d.ts

@@ -13,6 +13,10 @@ export type AmountControlProps = {
      * The color of the icon.
      */
     iconColor?: string;
+    /**
+     * Whether the control should be disabled
+     */
+    isDisabled?: boolean;
     /**
      * A Text that should be displayed, if no amount is selected;
      */

package/lib/types/components/amount-control/AmountControl.styles.d.ts

@@ -1,8 +1,9 @@
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { DisplayState } from './AmountControl';
-export declare const StyledAmountControl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
-}>> & string;
+type StyledAmountControlProps = WithTheme<{
+    $isDisabled: boolean;
+}>;
+export declare const StyledAmountControl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAmountControlProps>> & string;
 type StyledAmountControlInputProps = WithTheme<{
     $displayState: DisplayState;
     $shouldShowIcon: boolean;

package/lib/types/components/list/list-item/ListItem.d.ts

@@ -28,6 +28,10 @@ export type ListItemProps = {
      * This can be used to automatically expand the `ListItem` during the first render.
      */
     isDefaultOpen?: boolean;
+    /**
+     * Whether the ListItem locks disabled but has full functionality.
+     */
+    isTitleGreyed?: boolean;
     /**
      * This overrides the internal opening state of the item and makes it controlled.
      */

package/lib/types/components/list/list-item/list-item-head/ListItemHead.d.ts

@@ -17,6 +17,7 @@ type ListItemHeadProps = {
     shouldShowRoundImageOrIcon?: boolean;
     title: ReactNode;
     titleElement?: ReactNode;
+    isDisabledButNotReallyDisabled?: boolean;
 };
 declare const ListItemHead: FC<ListItemHeadProps>;
 export default ListItemHead;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.927",
+    "version": "5.0.0-beta.930",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -51,13 +51,13 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.25.9",
+        "@babel/cli": "^7.26.4",
         "@babel/core": "^7.26.0",
         "@babel/preset-env": "^7.26.0",
-        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.26.0",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
+        "@types/react": "^18.3.16",
+        "@types/react-dom": "^18.3.5",
         "@types/react-helmet": "^6.1.11",
         "@types/styled-components": "^5.1.34",
         "@types/uuid": "^10.0.0",
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2f16bf6ab61c58b702d54a3d2fb9edf898c50c46"
+    "gitHead": "840189fdaed3a8765f82867ffde6b344769b7db3"
 }