@chayns-components/core 5.0.0-beta.801 → 5.0.0-beta.803

package/lib/cjs/components/accordion/accordion-head/AccordionHead.js

@@ -68,12 +68,13 @@ const AccordionHead = ({
       setHeadHeight((0, _accordion.getAccordionHeadHeight)({
         isWrapped,
         title,
-        width: (((_titleWrapperRef$curr = titleWrapperRef.current) === null || _titleWrapperRef$curr === void 0 ? void 0 : _titleWrapperRef$curr.clientWidth) ?? 0) - 10
+        width: (((_titleWrapperRef$curr = titleWrapperRef.current) === null || _titleWrapperRef$curr === void 0 ? void 0 : _titleWrapperRef$curr.clientWidth) ?? 0) - 10,
+        hasSearch: typeof onSearchChange === 'function'
       }));
     }
     // The fontSize need to be included to trigger a new calculation.
     // After the size is increased, the Title is cut at the bottom.
-  }, [isWrapped, onTitleInputChange, theme.fontSize, title]);
+  }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);
   const iconElement = (0, _react.useMemo)(() => {
     if (icon || isFixed) {
       return /*#__PURE__*/_react.default.createElement(_Icon.default, {
@@ -161,6 +162,7 @@ const AccordionHead = ({
     $isOpen: isOpen,
     $isWrapped: isWrapped,
     $color: titleColor,
+    $hasSearch: typeof onSearchChange === 'function',
     transition: {
       opacity: {
         duration: 0

package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","fontSize","iconElement","useMemo","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","tmp","setTmp","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","AreaContext","Provider","shouldChangeColor","onFocus","onBlur","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$isWrapped","$color","transition","duration","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","StyledMotionSearchWrapper","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n    titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n    titleColor,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n    useEffect(() => {\n        setInternalSearchValue(searchValue);\n    }, [searchValue]);\n\n    const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n        setInternalSearchValue(event.target.value);\n        if (typeof onSearchChange === 'function') {\n            onSearchChange(event);\n        }\n    };\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    $color={titleColor}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={handleOnSearchChance}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={internalSearchValue}\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","useMemo","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","tmp","setTmp","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","AreaContext","Provider","shouldChangeColor","onFocus","onBlur","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$isWrapped","$color","$hasSearch","transition","duration","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","StyledMotionSearchWrapper","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n    titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n    titleColor,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n    useEffect(() => {\n        setInternalSearchValue(searchValue);\n    }, [searchValue]);\n\n    const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n        setInternalSearchValue(event.target.value);\n        if (typeof onSearchChange === 'function') {\n            onSearchChange(event);\n        }\n    };\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                    hasSearch: typeof onSearchChange === 'function',\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    $color={titleColor}\n                                    $hasSearch={typeof onSearchChange === 'function'}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={handleOnSearchChance}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={internalSearchValue}\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js

@@ -70,8 +70,9 @@ const StyledMotionTitle = exports.StyledMotionTitle = (0, _styledComponents.defa
 }) => $isOpen && $isWrapped ? 700 : 'normal'};
     grid-area: header;
     height: ${({
-  $isWrapped
-}) => $isWrapped ? '100%' : undefined};
+  $isWrapped,
+  $hasSearch
+}) => $isWrapped || $hasSearch ? '100%' : undefined};
     overflow: hidden;
     text-overflow: ellipsis;
     transform-origin: top left;
@@ -82,8 +83,9 @@ const StyledMotionTitle = exports.StyledMotionTitle = (0, _styledComponents.defa
 }) => $color ?? theme.text};
     white-space: ${({
   $isOpen,
-  $isWrapped
-}) => $isOpen && !$isWrapped ? 'normal' : 'nowrap'};
+  $isWrapped,
+  $hasSearch
+}) => $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};
 
     will-change: unset !important;
 

package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.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","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","$isWrapped","undefined","$color","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $color?: CSSProperties['color'];\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped }) => ($isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n    white-space: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? 'normal' : 'nowrap')};\n\n    will-change: unset !important;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n\n    will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.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","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","$isWrapped","undefined","$hasSearch","$color","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $color?: CSSProperties['color'];\n    $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n    white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n        $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n    will-change: unset !important;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n\n    will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -19,13 +19,13 @@ const AmountControl = ({
   label,
   iconColor,
   maxAmount,
+  minAmount = 0,
   onChange,
   shouldShowWideInput = false
 }) => {
-  const [amountValue, setAmountValue] = (0, _react.useState)(0);
-  const [inputValue, setInputValue] = (0, _react.useState)('0');
+  const [amountValue, setAmountValue] = (0, _react.useState)(minAmount);
+  const [inputValue, setInputValue] = (0, _react.useState)(minAmount.toString());
   const [displayState, setDisplayState] = (0, _react.useState)('default');
-  const minAmount = 0;
   const inputRef = (0, _react.useRef)(null);
 
   /**
@@ -39,13 +39,13 @@ const AmountControl = ({
       case maxAmount && amountValue >= maxAmount:
         setDisplayState('maxAmount');
         return;
-      case amountValue > 0:
+      case amountValue > minAmount:
         setDisplayState('normal');
         return;
       default:
         setDisplayState('default');
     }
-  }, [amountValue, maxAmount]);
+  }, [amountValue, maxAmount, minAmount]);
   const hasFocus = (0, _react.useMemo)(() => displayState !== 'default', [displayState]);
 
   /**
@@ -77,6 +77,9 @@ const AmountControl = ({
     setInputValue(prevState => (Number(prevState) + 1).toString());
   }, [onChange]);
   const handleAmountRemove = (0, _react.useCallback)(() => {
+    if (displayState === 'default') {
+      return;
+    }
     setAmountValue(prevState => {
       const newAmount = prevState - 1;
       if (typeof onChange === 'function') {
@@ -85,17 +88,17 @@ const AmountControl = ({
       return newAmount;
     });
     setInputValue(prevState => (Number(prevState) - 1).toString());
-  }, [onChange]);
+  }, [displayState, onChange]);
   const handleFirstAmount = (0, _react.useCallback)(() => {
-    if (amountValue !== 0) {
+    if (amountValue !== minAmount) {
       return;
     }
     if (typeof onChange === 'function') {
-      onChange(1);
+      onChange(minAmount + 1);
     }
-    setAmountValue(1);
-    setInputValue('1');
-  }, [amountValue, onChange]);
+    setAmountValue(minAmount + 1);
+    setInputValue((minAmount + 1).toString());
+  }, [amountValue, minAmount, onChange]);
   const handleDeleteIconClick = (0, _react.useCallback)(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
@@ -107,14 +110,14 @@ const AmountControl = ({
     }
   }, [handleAmountRemove, inputValue]);
   const handleInputBlur = (0, _react.useCallback)(() => {
-    setAmountValue(inputValue === '' ? 0 : Number(inputValue));
+    setAmountValue(inputValue === '' ? minAmount : Number(inputValue));
     if (typeof onChange === 'function') {
-      onChange(inputValue === '' ? 0 : Number(inputValue));
+      onChange(inputValue === '' ? minAmount : Number(inputValue));
     }
     if (inputValue === '') {
-      setInputValue('0');
+      setInputValue(minAmount.toString());
     }
-  }, [inputValue, onChange]);
+  }, [inputValue, minAmount, onChange]);
   const handleInputChange = (0, _react.useCallback)(event => {
     const {
       value

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

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

package/lib/cjs/utils/accordion.js

@@ -7,7 +7,8 @@ exports.getAccordionHeadHeight = void 0;
 const getAccordionHeadHeight = ({
   isWrapped,
   title,
-  width
+  width,
+  hasSearch
 }) => {
   const element = document.createElement('div');
   element.style.fontSize = '1rem';
@@ -23,7 +24,7 @@ const getAccordionHeadHeight = ({
     element.style.whiteSpace = 'nowrap';
   } else {
     element.style.fontSize = '1.3rem';
-    element.style.whiteSpace = 'normal';
+    element.style.whiteSpace = hasSearch ? 'nowrap' : 'normal';
   }
   const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
   document.body.removeChild(element);

package/lib/cjs/utils/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["getAccordionHeadHeight","isWrapped","title","width","element","document","createElement","style","fontSize","opacity","pointerEvents","whiteSpace","innerText","body","appendChild","closedHeight","Math","max","clientHeight","fontWeight","openHeight","removeChild","closed","open","exports"],"sources":["../../../src/utils/accordion.ts"],"sourcesContent":["import type { AccordionHeadProps } from '../components/accordion/accordion-head/AccordionHead';\n\ntype GetAccordionHeadHeightOptions = Pick<AccordionHeadProps, 'isWrapped' | 'title'> & {\n    width: number;\n};\n\ninterface GetAccordionHeadHeightResult {\n    closed: number;\n    open: number;\n}\n\nexport const getAccordionHeadHeight = ({\n    isWrapped,\n    title,\n    width,\n}: GetAccordionHeadHeightOptions): GetAccordionHeadHeightResult => {\n    const element = document.createElement('div');\n\n    element.style.fontSize = '1rem';\n    element.style.opacity = '0';\n    element.style.pointerEvents = 'none';\n    element.style.whiteSpace = 'nowrap';\n    element.style.width = `${width}px`;\n\n    element.innerText = title;\n\n    document.body.appendChild(element);\n\n    const closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    if (isWrapped) {\n        element.style.fontWeight = 'bold';\n        element.style.whiteSpace = 'nowrap';\n    } else {\n        element.style.fontSize = '1.3rem';\n        element.style.whiteSpace = 'normal';\n    }\n\n    const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    document.body.removeChild(element);\n\n    return { closed: closedHeight, open: openHeight };\n};\n"],"mappings":";;;;;;AAWO,MAAMA,sBAAsB,GAAGA,CAAC;EACnCC,SAAS;EACTC,KAAK;EACLC;AAC2B,CAAC,KAAmC;EAC/D,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,MAAM;EAC/BJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAC3BL,OAAO,CAACG,KAAK,CAACG,aAAa,GAAG,MAAM;EACpCN,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACnCP,OAAO,CAACG,KAAK,CAACJ,KAAK,GAAG,GAAGA,KAAK,IAAI;EAElCC,OAAO,CAACQ,SAAS,GAAGV,KAAK;EAEzBG,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,OAAO,CAAC;EAElC,MAAMW,YAAY,GAAGC,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAEjB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE5E,IAAIA,SAAS,EAAE;IACXG,OAAO,CAACG,KAAK,CAACY,UAAU,GAAG,MAAM;IACjCf,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACvC,CAAC,MAAM;IACHP,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,QAAQ;IACjCJ,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACvC;EAEA,MAAMS,UAAU,GAAGJ,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAEjB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE1EI,QAAQ,CAACQ,IAAI,CAACQ,WAAW,CAACjB,OAAO,CAAC;EAElC,OAAO;IAAEkB,MAAM,EAAEP,YAAY;IAAEQ,IAAI,EAAEH;EAAW,CAAC;AACrD,CAAC;AAACI,OAAA,CAAAxB,sBAAA,GAAAA,sBAAA","ignoreList":[]}
+{"version":3,"file":"accordion.js","names":["getAccordionHeadHeight","isWrapped","title","width","hasSearch","element","document","createElement","style","fontSize","opacity","pointerEvents","whiteSpace","innerText","body","appendChild","closedHeight","Math","max","clientHeight","fontWeight","openHeight","removeChild","closed","open","exports"],"sources":["../../../src/utils/accordion.ts"],"sourcesContent":["import type { AccordionHeadProps } from '../components/accordion/accordion-head/AccordionHead';\n\ntype GetAccordionHeadHeightOptions = Pick<AccordionHeadProps, 'isWrapped' | 'title'> & {\n    width: number;\n    hasSearch: boolean;\n};\n\ninterface GetAccordionHeadHeightResult {\n    closed: number;\n    open: number;\n}\n\nexport const getAccordionHeadHeight = ({\n    isWrapped,\n    title,\n    width,\n    hasSearch,\n}: GetAccordionHeadHeightOptions): GetAccordionHeadHeightResult => {\n    const element = document.createElement('div');\n\n    element.style.fontSize = '1rem';\n    element.style.opacity = '0';\n    element.style.pointerEvents = 'none';\n    element.style.whiteSpace = 'nowrap';\n    element.style.width = `${width}px`;\n\n    element.innerText = title;\n\n    document.body.appendChild(element);\n\n    const closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    if (isWrapped) {\n        element.style.fontWeight = 'bold';\n        element.style.whiteSpace = 'nowrap';\n    } else {\n        element.style.fontSize = '1.3rem';\n        element.style.whiteSpace = hasSearch ? 'nowrap' : 'normal';\n    }\n\n    const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    document.body.removeChild(element);\n\n    return { closed: closedHeight, open: openHeight };\n};\n"],"mappings":";;;;;;AAYO,MAAMA,sBAAsB,GAAGA,CAAC;EACnCC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC;AAC2B,CAAC,KAAmC;EAC/D,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,MAAM;EAC/BJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAC3BL,OAAO,CAACG,KAAK,CAACG,aAAa,GAAG,MAAM;EACpCN,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACnCP,OAAO,CAACG,KAAK,CAACL,KAAK,GAAG,GAAGA,KAAK,IAAI;EAElCE,OAAO,CAACQ,SAAS,GAAGX,KAAK;EAEzBI,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,OAAO,CAAC;EAElC,MAAMW,YAAY,GAAGC,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAElB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE5E,IAAIA,SAAS,EAAE;IACXI,OAAO,CAACG,KAAK,CAACY,UAAU,GAAG,MAAM;IACjCf,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACvC,CAAC,MAAM;IACHP,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,QAAQ;IACjCJ,OAAO,CAACG,KAAK,CAACI,UAAU,GAAGR,SAAS,GAAG,QAAQ,GAAG,QAAQ;EAC9D;EAEA,MAAMiB,UAAU,GAAGJ,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAElB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE1EK,QAAQ,CAACQ,IAAI,CAACQ,WAAW,CAACjB,OAAO,CAAC;EAElC,OAAO;IAAEkB,MAAM,EAAEP,YAAY;IAAEQ,IAAI,EAAEH;EAAW,CAAC;AACrD,CAAC;AAACI,OAAA,CAAAzB,sBAAA,GAAAA,sBAAA","ignoreList":[]}

package/lib/esm/components/accordion/accordion-head/AccordionHead.js

@@ -59,12 +59,13 @@ const AccordionHead = _ref => {
       setHeadHeight(getAccordionHeadHeight({
         isWrapped,
         title,
-        width: (titleWrapperRef.current?.clientWidth ?? 0) - 10
+        width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,
+        hasSearch: typeof onSearchChange === 'function'
       }));
     }
     // The fontSize need to be included to trigger a new calculation.
     // After the size is increased, the Title is cut at the bottom.
-  }, [isWrapped, onTitleInputChange, theme.fontSize, title]);
+  }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);
   const iconElement = useMemo(() => {
     if (icon || isFixed) {
       return /*#__PURE__*/React.createElement(Icon, {
@@ -152,6 +153,7 @@ const AccordionHead = _ref => {
     $isOpen: isOpen,
     $isWrapped: isWrapped,
     $color: titleColor,
+    $hasSearch: typeof onSearchChange === 'function',
     transition: {
       opacity: {
         duration: 0

package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","width","current","clientWidth","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","tmp","setTmp","animate","initial","key","rotate","undefined","opacity","ref","Provider","shouldChangeColor","_extends","onFocus","onBlur","onChange","scale","exit","$isOpen","$isWrapped","$color","transition","duration","layout","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n    titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n    titleColor,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n    useEffect(() => {\n        setInternalSearchValue(searchValue);\n    }, [searchValue]);\n\n    const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n        setInternalSearchValue(event.target.value);\n        if (typeof onSearchChange === 'function') {\n            onSearchChange(event);\n        }\n    };\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    $color={titleColor}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={handleOnSearchChance}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={internalSearchValue}\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","tmp","setTmp","animate","initial","key","rotate","undefined","opacity","ref","Provider","shouldChangeColor","_extends","onFocus","onBlur","onChange","scale","exit","$isOpen","$isWrapped","$color","$hasSearch","transition","duration","layout","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n    titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n    titleColor,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n    useEffect(() => {\n        setInternalSearchValue(searchValue);\n    }, [searchValue]);\n\n    const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n        setInternalSearchValue(event.target.value);\n        if (typeof onSearchChange === 'function') {\n            onSearchChange(event);\n        }\n    };\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                    hasSearch: typeof onSearchChange === 'function',\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    $color={titleColor}\n                                    $hasSearch={typeof onSearchChange === 'function'}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={handleOnSearchChance}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={internalSearchValue}\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js

@@ -84,9 +84,10 @@ export const StyledMotionTitle = styled(motion.div)`
     grid-area: header;
     height: ${_ref8 => {
   let {
-    $isWrapped
+    $isWrapped,
+    $hasSearch
   } = _ref8;
-  return $isWrapped ? '100%' : undefined;
+  return $isWrapped || $hasSearch ? '100%' : undefined;
 }};
     overflow: hidden;
     text-overflow: ellipsis;
@@ -102,9 +103,10 @@ export const StyledMotionTitle = styled(motion.div)`
     white-space: ${_ref10 => {
   let {
     $isOpen,
-    $isWrapped
+    $isWrapped,
+    $hasSearch
   } = _ref10;
-  return $isOpen && !$isWrapped ? 'normal' : 'nowrap';
+  return $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap';
 }};
 
     will-change: unset !important;

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledAccordionIcon","i","_ref3","headline","_ref4","$icon","StyledMotionContentWrapper","_ref5","StyledMotionTitleWrapper","StyledMotionTitle","_ref6","$isOpen","$isWrapped","undefined","_ref7","_ref8","_ref9","$color","_ref10","_ref11","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref12","_ref13","_ref14","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $color?: CSSProperties['color'];\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped }) => ($isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n    white-space: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? 'normal' : 'nowrap')};\n\n    will-change: unset !important;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n\n    will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledAccordionIcon","i","_ref3","headline","_ref4","$icon","StyledMotionContentWrapper","_ref5","StyledMotionTitleWrapper","StyledMotionTitle","_ref6","$isOpen","$isWrapped","undefined","_ref7","_ref8","$hasSearch","_ref9","$color","_ref10","_ref11","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref12","_ref13","_ref14","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $color?: CSSProperties['color'];\n    $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n    white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n        $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n    will-change: unset !important;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n\n    will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -11,13 +11,13 @@ const AmountControl = _ref => {
     label,
     iconColor,
     maxAmount,
+    minAmount = 0,
     onChange,
     shouldShowWideInput = false
   } = _ref;
-  const [amountValue, setAmountValue] = useState(0);
-  const [inputValue, setInputValue] = useState('0');
+  const [amountValue, setAmountValue] = useState(minAmount);
+  const [inputValue, setInputValue] = useState(minAmount.toString());
   const [displayState, setDisplayState] = useState('default');
-  const minAmount = 0;
   const inputRef = useRef(null);
 
   /**
@@ -31,13 +31,13 @@ const AmountControl = _ref => {
       case maxAmount && amountValue >= maxAmount:
         setDisplayState('maxAmount');
         return;
-      case amountValue > 0:
+      case amountValue > minAmount:
         setDisplayState('normal');
         return;
       default:
         setDisplayState('default');
     }
-  }, [amountValue, maxAmount]);
+  }, [amountValue, maxAmount, minAmount]);
   const hasFocus = useMemo(() => displayState !== 'default', [displayState]);
 
   /**
@@ -69,6 +69,9 @@ const AmountControl = _ref => {
     setInputValue(prevState => (Number(prevState) + 1).toString());
   }, [onChange]);
   const handleAmountRemove = useCallback(() => {
+    if (displayState === 'default') {
+      return;
+    }
     setAmountValue(prevState => {
       const newAmount = prevState - 1;
       if (typeof onChange === 'function') {
@@ -77,17 +80,17 @@ const AmountControl = _ref => {
       return newAmount;
     });
     setInputValue(prevState => (Number(prevState) - 1).toString());
-  }, [onChange]);
+  }, [displayState, onChange]);
   const handleFirstAmount = useCallback(() => {
-    if (amountValue !== 0) {
+    if (amountValue !== minAmount) {
       return;
     }
     if (typeof onChange === 'function') {
-      onChange(1);
+      onChange(minAmount + 1);
     }
-    setAmountValue(1);
-    setInputValue('1');
-  }, [amountValue, onChange]);
+    setAmountValue(minAmount + 1);
+    setInputValue((minAmount + 1).toString());
+  }, [amountValue, minAmount, onChange]);
   const handleDeleteIconClick = useCallback(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
@@ -98,14 +101,14 @@ const AmountControl = _ref => {
     }
   }, [handleAmountRemove, inputValue]);
   const handleInputBlur = useCallback(() => {
-    setAmountValue(inputValue === '' ? 0 : Number(inputValue));
+    setAmountValue(inputValue === '' ? minAmount : Number(inputValue));
     if (typeof onChange === 'function') {
-      onChange(inputValue === '' ? 0 : Number(inputValue));
+      onChange(inputValue === '' ? minAmount : Number(inputValue));
     }
     if (inputValue === '') {
-      setInputValue('0');
+      setInputValue(minAmount.toString());
     }
-  }, [inputValue, onChange]);
+  }, [inputValue, minAmount, onChange]);
   const handleInputChange = useCallback(event => {
     const {
       value

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","inputRef","hasFocus","toString","handleAmountAdd","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$shouldShowWideInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * A Text that should be displayed, if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    onChange,\n    shouldShowWideInput = false,\n}) => {\n    const [amountValue, setAmountValue] = useState(0);\n    const [inputValue, setInputValue] = useState('0');\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const minAmount = 0;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 1 && amountValue === 1:\n                setDisplayState('delete');\n                return;\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > 0:\n                setDisplayState('normal');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (!amount) {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = prevState + 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    }, [onChange]);\n\n    const handleAmountRemove = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = prevState - 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    }, [onChange]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== 0) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(1);\n        }\n\n        setAmountValue(1);\n        setInputValue('1');\n    }, [amountValue, onChange]);\n\n    const handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [handleAmountRemove, inputValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n        if (typeof onChange === 'function') {\n            onChange(inputValue === '' ? 0 : Number(inputValue));\n        }\n\n        if (inputValue === '') {\n            setInputValue('0');\n        }\n    }, [inputValue, onChange]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n            const checkedValue = checkForValidAmount({\n                minAmount,\n                maxAmount,\n                amount: valueBeforeCheck,\n            });\n\n            if (valueBeforeCheck < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n        },\n        [maxAmount, minAmount],\n    );\n\n    const leftIcon = useMemo(() => {\n        let item: ReactElement | null = null;\n\n        switch (displayState) {\n            case 'default':\n                item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-check']} size={20} color=\"white\" />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            case 'maxAmount':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState, icon, iconColor]);\n\n    const shouldShowLeftIcon = useMemo(() => {\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !(displayState === 'default' && !shouldShowIcon);\n    }, [displayState, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <AnimatePresence initial={false}>\n                    {shouldShowLeftIcon && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                {displayState === 'delete' || inputValue === '0' ? (\n                    <StyledAmountControlPseudoInput\n                        onClick={handleDeleteIconClick}\n                        $shouldShowWideInput={shouldShowWideInput}\n                    >\n                        {displayState === 'default' && label ? label : inputValue}\n                    </StyledAmountControlPseudoInput>\n                ) : (\n                    <StyledAmountControlInput\n                        ref={inputRef}\n                        $displayState={displayState}\n                        $shouldShowIcon={shouldShowIcon}\n                        $shouldShowWideInput={shouldShowWideInput}\n                        $hasFocus={hasFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        value={displayState === 'default' && label ? label : inputValue}\n                    />\n                )}\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleAmountAdd,\n            handleAmountRemove,\n            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$shouldShowWideInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * A Text that should be displayed, if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * 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 icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldShowWideInput = false,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\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            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (!amount) {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = prevState + 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    }, [onChange]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = prevState - 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    }, [displayState, onChange]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + 1);\n        }\n\n        setAmountValue(minAmount + 1);\n        setInputValue((minAmount + 1).toString());\n    }, [amountValue, minAmount, onChange]);\n\n    const handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [handleAmountRemove, inputValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? minAmount : Number(inputValue));\n\n        if (typeof onChange === 'function') {\n            onChange(inputValue === '' ? minAmount : Number(inputValue));\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, minAmount, onChange]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n            const checkedValue = checkForValidAmount({\n                minAmount,\n                maxAmount,\n                amount: valueBeforeCheck,\n            });\n\n            if (valueBeforeCheck < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n        },\n        [maxAmount, minAmount],\n    );\n\n    const leftIcon = useMemo(() => {\n        let item: ReactElement | null = null;\n\n        switch (displayState) {\n            case 'default':\n                item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-check']} size={20} color=\"white\" />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            case 'maxAmount':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState, icon, iconColor]);\n\n    const shouldShowLeftIcon = useMemo(() => {\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !(displayState === 'default' && !shouldShowIcon);\n    }, [displayState, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <AnimatePresence initial={false}>\n                    {shouldShowLeftIcon && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                {displayState === 'delete' || inputValue === '0' ? (\n                    <StyledAmountControlPseudoInput\n                        onClick={handleDeleteIconClick}\n                        $shouldShowWideInput={shouldShowWideInput}\n                    >\n                        {displayState === 'default' && label ? label : inputValue}\n                    </StyledAmountControlPseudoInput>\n                ) : (\n                    <StyledAmountControlInput\n                        ref={inputRef}\n                        $displayState={displayState}\n                        $shouldShowIcon={shouldShowIcon}\n                        $shouldShowWideInput={shouldShowWideInput}\n                        $hasFocus={hasFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        value={displayState === 'default' && label ? label : inputValue}\n                    />\n                )}\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleAmountAdd,\n            handleAmountRemove,\n            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/utils/accordion.js

@@ -2,7 +2,8 @@ export const getAccordionHeadHeight = _ref => {
   let {
     isWrapped,
     title,
-    width
+    width,
+    hasSearch
   } = _ref;
   const element = document.createElement('div');
   element.style.fontSize = '1rem';
@@ -18,7 +19,7 @@ export const getAccordionHeadHeight = _ref => {
     element.style.whiteSpace = 'nowrap';
   } else {
     element.style.fontSize = '1.3rem';
-    element.style.whiteSpace = 'normal';
+    element.style.whiteSpace = hasSearch ? 'nowrap' : 'normal';
   }
   const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
   document.body.removeChild(element);

package/lib/esm/utils/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["getAccordionHeadHeight","_ref","isWrapped","title","width","element","document","createElement","style","fontSize","opacity","pointerEvents","whiteSpace","innerText","body","appendChild","closedHeight","Math","max","clientHeight","fontWeight","openHeight","removeChild","closed","open"],"sources":["../../../src/utils/accordion.ts"],"sourcesContent":["import type { AccordionHeadProps } from '../components/accordion/accordion-head/AccordionHead';\n\ntype GetAccordionHeadHeightOptions = Pick<AccordionHeadProps, 'isWrapped' | 'title'> & {\n    width: number;\n};\n\ninterface GetAccordionHeadHeightResult {\n    closed: number;\n    open: number;\n}\n\nexport const getAccordionHeadHeight = ({\n    isWrapped,\n    title,\n    width,\n}: GetAccordionHeadHeightOptions): GetAccordionHeadHeightResult => {\n    const element = document.createElement('div');\n\n    element.style.fontSize = '1rem';\n    element.style.opacity = '0';\n    element.style.pointerEvents = 'none';\n    element.style.whiteSpace = 'nowrap';\n    element.style.width = `${width}px`;\n\n    element.innerText = title;\n\n    document.body.appendChild(element);\n\n    const closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    if (isWrapped) {\n        element.style.fontWeight = 'bold';\n        element.style.whiteSpace = 'nowrap';\n    } else {\n        element.style.fontSize = '1.3rem';\n        element.style.whiteSpace = 'normal';\n    }\n\n    const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    document.body.removeChild(element);\n\n    return { closed: closedHeight, open: openHeight };\n};\n"],"mappings":"AAWA,OAAO,MAAMA,sBAAsB,GAAGC,IAAA,IAI6B;EAAA,IAJ5B;IACnCC,SAAS;IACTC,KAAK;IACLC;EAC2B,CAAC,GAAAH,IAAA;EAC5B,MAAMI,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,MAAM;EAC/BJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAC3BL,OAAO,CAACG,KAAK,CAACG,aAAa,GAAG,MAAM;EACpCN,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACnCP,OAAO,CAACG,KAAK,CAACJ,KAAK,GAAG,GAAGA,KAAK,IAAI;EAElCC,OAAO,CAACQ,SAAS,GAAGV,KAAK;EAEzBG,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,OAAO,CAAC;EAElC,MAAMW,YAAY,GAAGC,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAEjB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE5E,IAAIA,SAAS,EAAE;IACXG,OAAO,CAACG,KAAK,CAACY,UAAU,GAAG,MAAM;IACjCf,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACvC,CAAC,MAAM;IACHP,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,QAAQ;IACjCJ,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACvC;EAEA,MAAMS,UAAU,GAAGJ,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAEjB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE1EI,QAAQ,CAACQ,IAAI,CAACQ,WAAW,CAACjB,OAAO,CAAC;EAElC,OAAO;IAAEkB,MAAM,EAAEP,YAAY;IAAEQ,IAAI,EAAEH;EAAW,CAAC;AACrD,CAAC","ignoreList":[]}
+{"version":3,"file":"accordion.js","names":["getAccordionHeadHeight","_ref","isWrapped","title","width","hasSearch","element","document","createElement","style","fontSize","opacity","pointerEvents","whiteSpace","innerText","body","appendChild","closedHeight","Math","max","clientHeight","fontWeight","openHeight","removeChild","closed","open"],"sources":["../../../src/utils/accordion.ts"],"sourcesContent":["import type { AccordionHeadProps } from '../components/accordion/accordion-head/AccordionHead';\n\ntype GetAccordionHeadHeightOptions = Pick<AccordionHeadProps, 'isWrapped' | 'title'> & {\n    width: number;\n    hasSearch: boolean;\n};\n\ninterface GetAccordionHeadHeightResult {\n    closed: number;\n    open: number;\n}\n\nexport const getAccordionHeadHeight = ({\n    isWrapped,\n    title,\n    width,\n    hasSearch,\n}: GetAccordionHeadHeightOptions): GetAccordionHeadHeightResult => {\n    const element = document.createElement('div');\n\n    element.style.fontSize = '1rem';\n    element.style.opacity = '0';\n    element.style.pointerEvents = 'none';\n    element.style.whiteSpace = 'nowrap';\n    element.style.width = `${width}px`;\n\n    element.innerText = title;\n\n    document.body.appendChild(element);\n\n    const closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    if (isWrapped) {\n        element.style.fontWeight = 'bold';\n        element.style.whiteSpace = 'nowrap';\n    } else {\n        element.style.fontSize = '1.3rem';\n        element.style.whiteSpace = hasSearch ? 'nowrap' : 'normal';\n    }\n\n    const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    document.body.removeChild(element);\n\n    return { closed: closedHeight, open: openHeight };\n};\n"],"mappings":"AAYA,OAAO,MAAMA,sBAAsB,GAAGC,IAAA,IAK6B;EAAA,IAL5B;IACnCC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC;EAC2B,CAAC,GAAAJ,IAAA;EAC5B,MAAMK,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,MAAM;EAC/BJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAC3BL,OAAO,CAACG,KAAK,CAACG,aAAa,GAAG,MAAM;EACpCN,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACnCP,OAAO,CAACG,KAAK,CAACL,KAAK,GAAG,GAAGA,KAAK,IAAI;EAElCE,OAAO,CAACQ,SAAS,GAAGX,KAAK;EAEzBI,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,OAAO,CAAC;EAElC,MAAMW,YAAY,GAAGC,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAElB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE5E,IAAIA,SAAS,EAAE;IACXI,OAAO,CAACG,KAAK,CAACY,UAAU,GAAG,MAAM;IACjCf,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACvC,CAAC,MAAM;IACHP,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,QAAQ;IACjCJ,OAAO,CAACG,KAAK,CAACI,UAAU,GAAGR,SAAS,GAAG,QAAQ,GAAG,QAAQ;EAC9D;EAEA,MAAMiB,UAAU,GAAGJ,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAElB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE1EK,QAAQ,CAACQ,IAAI,CAACQ,WAAW,CAACjB,OAAO,CAAC;EAElC,OAAO;IAAEkB,MAAM,EAAEP,YAAY;IAAEQ,IAAI,EAAEH;EAAW,CAAC;AACrD,CAAC","ignoreList":[]}

package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts

@@ -1068,6 +1068,7 @@ type StyledMotionTitleProps = WithTheme<{
     $isOpen: boolean;
     $isWrapped: boolean;
     $color?: CSSProperties['color'];
+    $hasSearch: boolean;
 }>;
 export declare const StyledMotionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;

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

@@ -21,6 +21,10 @@ export type AmountControlProps = {
      * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.
      */
     maxAmount?: number;
+    /**
+     * The minimum allowed amount.
+     */
+    minAmount?: number;
     /**
      * A Function that is executed when the amount is changed
      */

package/lib/types/utils/accordion.d.ts

@@ -1,10 +1,11 @@
 import type { AccordionHeadProps } from '../components/accordion/accordion-head/AccordionHead';
 type GetAccordionHeadHeightOptions = Pick<AccordionHeadProps, 'isWrapped' | 'title'> & {
     width: number;
+    hasSearch: boolean;
 };
 interface GetAccordionHeadHeightResult {
     closed: number;
     open: number;
 }
-export declare const getAccordionHeadHeight: ({ isWrapped, title, width, }: GetAccordionHeadHeightOptions) => GetAccordionHeadHeightResult;
+export declare const getAccordionHeadHeight: ({ isWrapped, title, width, hasSearch, }: GetAccordionHeadHeightOptions) => GetAccordionHeadHeightResult;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.801",
+    "version": "5.0.0-beta.803",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3abc7d8fc25b3c26738c071ef9174ccdb1973844"
+    "gitHead": "79d11d059583a60b15ec393b8ba6438efa6a2233"
 }