@chayns-components/core 5.0.0-beta.1155 → 5.0.0-beta.1159

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","$isWrapped","css","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","$isSearchActive","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\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\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\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    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-items: center;\n        `}\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    flex: 1 1 auto;\n    margin-left: 8px;\n    min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n    $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n\n    width: ${({ $isSearchActive }) => ($isSearchActive ? '40%' : undefined)};\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    justify-content: end;\n    position: relative;\n    display: flex;\n    width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\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":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","$isWrapped","css","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","$isSearchActive","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } 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)`\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\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\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    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-items: center;\n        `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\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)`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    margin-left: 8px;\n    min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n    $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n\n    width: ${({ $isSearchActive }) => ($isSearchActive ? '40%' : undefined)};\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n    align-items: center;\n    justify-content: end;\n    position: relative;\n    display: flex;\n    width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\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)`\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/button/Button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionButton","exports","styled","motion","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","css","$isSecondary","theme","text","buttonDesign","buttonColor","buttonBackgroundColor","$isDisabled","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = WithTheme<{\n    $hasIcon: boolean;\n    $hasChildren: boolean;\n    $isDisabled?: boolean;\n    $isSecondary?: boolean;\n    $shouldShowTextAsRobotoMedium: boolean;\n    $shouldShowAsSelectButton: boolean;\n    $shouldShowWaitCursor?: boolean;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n    ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n        $shouldShowTextAsRobotoMedium &&\n        !$shouldShowAsSelectButton &&\n        css`\n            font-size: 110%;\n            font-family: 'Roboto Medium', serif;\n        `}\n\n    align-items: center;\n\n    ${({ $isSecondary, $shouldShowAsSelectButton, theme }: StyledButtonProps) => {\n        if ($isSecondary || $shouldShowAsSelectButton) {\n            return css`\n                color: ${theme.text};\n            `;\n        }\n\n        return css`\n            color: ${theme.buttonDesign === '2'\n                ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n                : (theme.buttonColor ?? 'white')};\n        `;\n    }}\n\n    ${({ theme, $isSecondary, $shouldShowAsSelectButton }: StyledButtonProps) => {\n        if (theme.buttonDesign === '2' && !$shouldShowAsSelectButton) {\n            return css`\n                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n                box-shadow: none;\n            `;\n        }\n\n        return css`\n            border: none;\n            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    border-radius: 3px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: inline-flex;\n    line-height: 22px;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n\n    ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n        if ($shouldShowWaitCursor) {\n            return css`\n                padding: 4px 12px;\n            `;\n        }\n\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 6px 12px 6px 42px;\n                `;\n            }\n            return css`\n                padding: 6px 12px 6px 18px;\n            `;\n        }\n        return css`\n            padding: 6px 12px 6px 12px;\n        `;\n    }}\n`;\n//\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)<FramerMotionBugFix>`\n    will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionButton","exports","styled","motion","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","css","$isSecondary","theme","text","buttonDesign","buttonColor","buttonBackgroundColor","$isDisabled","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = WithTheme<{\n    $hasIcon: boolean;\n    $hasChildren: boolean;\n    $isDisabled?: boolean;\n    $isSecondary?: boolean;\n    $shouldShowTextAsRobotoMedium: boolean;\n    $shouldShowAsSelectButton: boolean;\n    $shouldShowWaitCursor?: boolean;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n    ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n        $shouldShowTextAsRobotoMedium &&\n        !$shouldShowAsSelectButton &&\n        css`\n            font-size: 110%;\n            font-family: 'Roboto Medium', serif;\n        `}\n\n    align-items: center;\n\n    ${({ $isSecondary, $shouldShowAsSelectButton, theme }: StyledButtonProps) => {\n        if ($isSecondary || $shouldShowAsSelectButton) {\n            return css`\n                color: ${theme.text};\n            `;\n        }\n\n        return css`\n            color: ${theme.buttonDesign === '2'\n                ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n                : (theme.buttonColor ?? 'white')};\n        `;\n    }}\n\n    ${({ theme, $isSecondary, $shouldShowAsSelectButton }: StyledButtonProps) => {\n        if (theme.buttonDesign === '2' && !$shouldShowAsSelectButton) {\n            return css`\n                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n                box-shadow: none;\n            `;\n        }\n\n        return css`\n            border: none;\n            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    border-radius: 3px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: inline-flex;\n    line-height: 22px;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n\n    ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n        if ($shouldShowWaitCursor) {\n            return css`\n                padding: 4px 12px;\n            `;\n        }\n\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 6px 12px 6px 42px;\n                `;\n            }\n            return css`\n                padding: 6px 12px 6px 18px;\n            `;\n        }\n        return css`\n            padding: 6px 12px 6px 12px;\n        `;\n    }}\n`;\n//\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)`\n    will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js

@@ -10,8 +10,6 @@ var _styledComponents = require("styled-components");
 var _ColorSchemeProvider = require("./ColorSchemeProvider.styles");
 var _useChaynsTheme = require("./hooks/useChaynsTheme");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-// ToDo remove type after the framer-motion bug is Fixed
-
 const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
     .ellipsis {
         overflow: hidden;

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_ColorSchemeProvider","_useChaynsTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","customVariables","internalColor","internalColorMode","useSite","overrideParagraphFormat","paragraphFormat","useMemo","contextValue","useChaynsTheme","createElement","ThemeProvider","theme","Provider","value","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    customVariables,\n}) => {\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? internalColor;\n    const colorMode = colorModeProp ?? internalColorMode;\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_ColorSchemeProvider","_useChaynsTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","customVariables","internalColor","internalColorMode","useSite","overrideParagraphFormat","paragraphFormat","useMemo","contextValue","useChaynsTheme","createElement","ThemeProvider","theme","Provider","value","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    customVariables,\n}) => {\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? internalColor;\n    const colorMode = colorModeProp ?? internalColorMode;\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/combobox/ComboBox.js

@@ -5,24 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _chaynsApi = require("chayns-api");
-var _react = require("motion/react");
-var _react2 = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
-var _comboBox = require("../../types/comboBox");
+var _react = _interopRequireWildcard(require("react"));
 var _calculate = require("../../utils/calculate");
 var _environment = require("../../utils/environment");
 var _AreaContextProvider = require("../area-provider/AreaContextProvider");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _ComboBoxItem = _interopRequireDefault(require("./combobox-item/ComboBoxItem"));
 var _ComboBox = require("./ComboBox.styles");
+var _DropdownBodyWrapper = _interopRequireDefault(require("../dropdown-body-wrapper/DropdownBodyWrapper"));
+var _dropdown = require("../../types/dropdown");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ComboBox = ({
   bodyWidth,
-  direction = _comboBox.ComboBoxDirection.RIGHT,
+  direction = _dropdown.DropdownDirection.RIGHT,
   isDisabled = false,
   lists,
-  maxHeight = '280px',
+  maxHeight = 280,
   onSelect,
   placeholder,
   prefix,
@@ -38,130 +37,59 @@ const ComboBox = ({
   onInputBlur,
   inputValue
 }) => {
-  const [internalSelectedItem, setInternalSelectedItem] = (0, _react2.useState)();
-  const [isAnimating, setIsAnimating] = (0, _react2.useState)(false);
-  const [minWidth, setMinWidth] = (0, _react2.useState)(undefined);
-  const [bodyMinWidth, setBodyMinWidth] = (0, _react2.useState)(0);
-  const [focusedIndex, setFocusedIndex] = (0, _react2.useState)(null);
-  const [overflowY, setOverflowY] = (0, _react2.useState)('hidden');
-  const [translateX, setTranslateX] = (0, _react2.useState)('0px');
-  const [translateY, setTranslateY] = (0, _react2.useState)('0px');
-  const [portal, setPortal] = (0, _react2.useState)();
-  const [internalCoordinates, setInternalCoordinates] = (0, _react2.useState)({
-    x: 0,
-    y: 0
-  });
-  const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
-  const [shouldUseTopAlignment, setShouldUseTopAlignment] = (0, _react2.useState)(false);
-  const isInputFocused = (0, _react2.useRef)(false);
-  const styledComboBoxElementRef = (0, _react2.useRef)(null);
-  const contentRef = (0, _react2.useRef)(null);
+  const [internalSelectedItem, setInternalSelectedItem] = (0, _react.useState)();
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [minWidth, setMinWidth] = (0, _react.useState)(undefined);
+  const [bodyMinWidth, setBodyMinWidth] = (0, _react.useState)(0);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
+  const isInputFocused = (0, _react.useRef)(false);
+  const styledComboBoxElementRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
   const functions = (0, _chaynsApi.useFunctions)();
   const values = (0, _chaynsApi.useValues)();
+  const isTouch = (0, _environment.getIsTouch)();
   const {
     browser
   } = (0, _chaynsApi.useDevice)();
-  const isTouch = (0, _environment.getIsTouch)();
-  const areaProvider = (0, _react2.useContext)(_AreaContextProvider.AreaContext);
-  const shouldChangeColor = (0, _react2.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
-  const shouldDisableActions = (0, _react2.useMemo)(() => {
+  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const shouldDisableActions = (0, _react.useMemo)(() => {
     if (!selectedItem) {
       return false;
     }
     const combinedLists = lists.flatMap(list => list.list);
     return combinedLists.length === 1 && combinedLists.some(item => item.value === selectedItem.value);
   }, [lists, selectedItem]);
-  const contentHeight = (0, _react2.useMemo)(() => {
+  const contentHeight = (0, _react.useMemo)(() => {
     const flatItems = lists.flatMap(list => list.list);
     let result = flatItems.length * 36;
     if (lists.length > 1) {
       result += lists.length * 36;
     }
-
-    // ToDo: Implement a better solution to also work with percentage values or other units
-    if (maxHeight.toString().includes('px')) {
-      const maxHeightValue = parseInt(maxHeight.toString().replace('px', ''), 10);
-      if (maxHeightValue < result) {
-        result = maxHeightValue;
-      }
+    if (maxHeight < result) {
+      result = maxHeight;
     }
     return result;
   }, [lists, maxHeight]);
-  (0, _react2.useEffect)(() => {
-    if (styledComboBoxElementRef.current && !container) {
-      const el = styledComboBoxElementRef.current;
-      const element = el.closest('.dialog-inner') || el.closest('.page-provider') || el.closest('body');
-      setNewContainer(element);
-    }
-  }, [container]);
-  (0, _react2.useEffect)(() => {
-    if (container instanceof Element) {
-      setNewContainer(container);
-    }
-  }, [container]);
-  const handleInputFocus = (0, _react2.useCallback)(event => {
+  const handleInputFocus = (0, _react.useCallback)(event => {
     isInputFocused.current = true;
     onInputFocus === null || onInputFocus === void 0 || onInputFocus(event);
   }, [onInputFocus]);
-  const handleInputBlur = (0, _react2.useCallback)(event => {
+  const handleInputBlur = (0, _react.useCallback)(event => {
     isInputFocused.current = false;
     onInputBlur === null || onInputBlur === void 0 || onInputBlur(event);
   }, [onInputBlur]);
-  const handleClick = (0, _react2.useCallback)(event => {
-    if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
-      setIsAnimating(false);
-    }
-  }, [styledComboBoxElementRef]);
-  const handleOpen = (0, _react2.useCallback)(() => {
-    if (shouldDisableActions) {
-      return;
-    }
-    if (styledComboBoxElementRef.current && newContainer) {
-      const {
-        left: comboBoxLeft,
-        top: comboBoxTop,
-        height
-      } = styledComboBoxElementRef.current.getBoundingClientRect();
-      const {
-        left,
-        top,
-        height: containerHeight
-      } = newContainer.getBoundingClientRect();
-      const x = comboBoxLeft - left + newContainer.scrollLeft;
-      const y = comboBoxTop - top + newContainer.scrollTop;
-      let useTopAlignment = [_comboBox.ComboBoxDirection.TOP, _comboBox.ComboBoxDirection.TOP_LEFT, _comboBox.ComboBoxDirection.TOP_RIGHT].includes(direction);
-      const hasBottomAlignment = [_comboBox.ComboBoxDirection.BOTTOM, _comboBox.ComboBoxDirection.BOTTOM_LEFT, _comboBox.ComboBoxDirection.BOTTOM_RIGHT].includes(direction);
-      if (!hasBottomAlignment && y + height + contentHeight > containerHeight) {
-        useTopAlignment = true;
-        setShouldUseTopAlignment(true);
-      } else {
-        setShouldUseTopAlignment(false);
-      }
-      setInternalCoordinates({
-        x,
-        y: useTopAlignment ? y : y + height
-      });
-      setIsAnimating(true);
-    }
-  }, [shouldDisableActions, newContainer, contentHeight, direction]);
-  const handleClose = (0, _react2.useCallback)(() => {
+  const handleOpen = (0, _react.useCallback)(() => {
+    setIsAnimating(true);
+  }, []);
+  const handleClose = (0, _react.useCallback)(() => {
     setIsAnimating(false);
   }, []);
 
-  /**
-   * This function adds an event listener to the document to close the combobox when the user clicks outside of it
-   */
-  (0, _react2.useEffect)(() => {
-    document.addEventListener('click', handleClick);
-    return () => {
-      document.removeEventListener('click', handleClick);
-    };
-  }, [handleClick, styledComboBoxElementRef]);
-
   /**
    * This function sets the selected item
    */
-  const handleSetSelectedItem = (0, _react2.useCallback)(itemToSelect => {
+  const handleSetSelectedItem = (0, _react.useCallback)(itemToSelect => {
     if (typeof onSelect === 'function') {
       const onSelectResult = onSelect(itemToSelect);
       if (onSelectResult === false) {
@@ -179,45 +107,44 @@ const ComboBox = ({
     setInternalSelectedItem(itemToSelect);
     setIsAnimating(false);
   }, [onSelect]);
-  const handleClear = (0, _react2.useCallback)(event => {
+  const handleClear = (0, _react.useCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
     handleSetSelectedItem(undefined);
   }, [handleSetSelectedItem]);
-  (0, _react2.useEffect)(() => {
-    const currentContent = contentRef.current;
-    if (portal && isAnimating && currentContent) {
-      const scrollHeight = currentContent.scrollHeight ?? 0;
-      const maxHeightInPixels = (0, _calculate.getMaxHeightInPixels)(maxHeight, styledComboBoxElementRef.current ?? document.body);
-      setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');
-    }
-  }, [isAnimating, maxHeight, portal]);
-  (0, _react2.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     const handleKeyDown = e => {
-      if (!isAnimating) {
-        return;
-      }
+      if (!isAnimating) return;
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         var _contentRef$current;
         e.preventDefault();
         const children = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.children;
-        if (children && children.length > 0) {
-          const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
-          if (focusedIndex !== null) {
-            const prevElement = children[focusedIndex];
-            prevElement.tabIndex = -1;
-          }
-          setFocusedIndex(newIndex);
+        if (!children || children.length === 0) return;
+        const stepDirection = e.key === 'ArrowUp' ? -1 : 1;
+        let newIndex = focusedIndex ?? -1;
+        let attempts = 0;
+        do {
+          newIndex = (newIndex + stepDirection + children.length) % children.length;
           const newElement = children[newIndex];
-          newElement.tabIndex = 0;
-          newElement.focus();
+          let shouldSkip = false;
+          if (newElement.id.startsWith('combobox-group--') || newElement.id.endsWith('--disabled-item')) {
+            shouldSkip = true;
+          }
+          if (!shouldSkip) break;
+          attempts++;
+        } while (attempts < children.length);
+        if (focusedIndex !== null) {
+          const prevElement = children[focusedIndex];
+          prevElement.tabIndex = -1;
         }
+        setFocusedIndex(newIndex);
+        const focusedElement = children[newIndex];
+        focusedElement.tabIndex = 0;
+        focusedElement.focus();
       } else if (e.key === 'Enter' && focusedIndex !== null) {
         var _contentRef$current2;
         const element = (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.children[focusedIndex];
-        if (!element) {
-          return;
-        }
+        if (!element) return;
         const {
           id
         } = element;
@@ -228,22 +155,19 @@ const ComboBox = ({
           }) => String(value) === id.replace('combobox-item__', ''));
           return !!newSelectedItem;
         });
-        if (!newSelectedItem) {
-          return;
+        if (newSelectedItem) {
+          handleSetSelectedItem(newSelectedItem);
         }
-        handleSetSelectedItem(newSelectedItem);
       }
     };
     document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
+    return () => document.removeEventListener('keydown', handleKeyDown);
   }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
 
   /**
    * This function calculates the greatest width
    */
-  (0, _react2.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     var _styledComboBoxElemen;
     const allItems = lists.flatMap(list => list.list);
     const hasImage = [selectedItem, ...allItems].some(item => item === null || item === void 0 ? void 0 : item.imageUrl);
@@ -294,19 +218,11 @@ const ComboBox = ({
   /**
    * This function sets the external selected item
    */
-  (0, _react2.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     setIsAnimating(false);
     setInternalSelectedItem(selectedItem);
   }, [selectedItem]);
-  (0, _react2.useEffect)(() => {
-    if ([_comboBox.ComboBoxDirection.BOTTOM_LEFT, _comboBox.ComboBoxDirection.TOP_LEFT, _comboBox.ComboBoxDirection.LEFT].includes(direction) && typeof bodyWidth === 'number' && typeof minWidth === 'number') {
-      const difference = minWidth - bodyWidth;
-      setTranslateX(`${difference}px`);
-    } else {
-      setTranslateX('0px');
-    }
-  }, [bodyWidth, direction, minWidth]);
-  const placeholderImageUrl = (0, _react2.useMemo)(() => {
+  const placeholderImageUrl = (0, _react.useMemo)(() => {
     if (selectedItem) {
       return selectedItem.imageUrl;
     }
@@ -315,7 +231,7 @@ const ComboBox = ({
     }
     return undefined;
   }, [internalSelectedItem, selectedItem]);
-  const placeholderIcon = (0, _react2.useMemo)(() => {
+  const placeholderIcon = (0, _react.useMemo)(() => {
     if (selectedItem) {
       return selectedItem.icons;
     }
@@ -328,7 +244,7 @@ const ComboBox = ({
   /**
    * This function resets the placeholder
    */
-  const placeholderText = (0, _react2.useMemo)(() => {
+  const placeholderText = (0, _react.useMemo)(() => {
     let text = placeholder;
     if (selectedItem) {
       text = selectedItem.text;
@@ -337,7 +253,7 @@ const ComboBox = ({
     }
     return text;
   }, [internalSelectedItem, placeholder, selectedItem]);
-  const shouldShowRoundPlaceholderImage = (0, _react2.useMemo)(() => {
+  const shouldShowRoundPlaceholderImage = (0, _react.useMemo)(() => {
     const selectedItemList = lists.find(list => list.list.some(({
       value
     }) => value === ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) ?? (internalSelectedItem === null || internalSelectedItem === void 0 ? void 0 : internalSelectedItem.value))));
@@ -347,7 +263,7 @@ const ComboBox = ({
   /**
    * This function opens the content of the combobox
    */
-  const handleHeaderClick = (0, _react2.useCallback)(() => {
+  const handleHeaderClick = (0, _react.useCallback)(() => {
     if (!isDisabled && !isInputFocused.current) {
       if (isAnimating) {
         handleClose();
@@ -356,82 +272,23 @@ const ComboBox = ({
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const comboBoxGroups = (0, _react2.useMemo)(() => lists.map(list => /*#__PURE__*/_react2.default.createElement("div", {
+  const comboBoxGroups = (0, _react.useMemo)(() => lists.map(list => /*#__PURE__*/_react.default.createElement(_react.Fragment, {
     key: list.groupName ?? 'default-group'
-  }, list.groupName && lists.length > 1 && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxTopic, null, list.groupName), list.list.map(item =>
-  /*#__PURE__*/
-  // ToDo: Cleanup this - item should be given as a prop to avoid full spreading
-  _react2.default.createElement(_ComboBoxItem.default, {
-    icons: item.icons,
-    id: item.value,
-    imageBackground: item.imageBackground,
-    imageUrl: item.imageUrl,
-    isDisabled: item.isDisabled,
+  }, list.groupName && lists.length > 1 && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxTopic, {
+    id: `combobox-group--${list.groupName}`
+  }, list.groupName), list.list.map(item => /*#__PURE__*/_react.default.createElement(_ComboBoxItem.default, {
+    item: item,
     isSelected: selectedItem ? item.value === selectedItem.value : false,
-    key: item.value,
     onSelect: handleSetSelectedItem,
-    rightElement: item.rightElement,
     shouldShowBigImage: shouldShowBigImage,
-    shouldShowRoundImage: list.shouldShowRoundImage ?? shouldShowRoundImage,
-    subtext: item.subtext,
-    suffixElement: item.suffixElement,
-    text: item.text,
-    value: item.value,
-    textStyles: item.textStyles
+    shouldShowRoundImage: list.shouldShowRoundImage ?? shouldShowRoundImage
   })))), [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage]);
-  const bodyStyles = (0, _react2.useMemo)(() => ({
-    left: internalCoordinates.x,
-    top: internalCoordinates.y
-  }), [internalCoordinates.x, internalCoordinates.y]);
-  (0, _react2.useEffect)(() => {
-    const useTopAlignment = shouldUseTopAlignment || [_comboBox.ComboBoxDirection.TOP, _comboBox.ComboBoxDirection.TOP_LEFT, _comboBox.ComboBoxDirection.TOP_RIGHT].includes(direction);
-    if (useTopAlignment) {
-      setTranslateY('-100%');
-    } else {
-      setTranslateY('0px');
-    }
-  }, [direction, shouldUseTopAlignment]);
-  (0, _react2.useEffect)(() => {
-    if (!newContainer) {
-      return;
-    }
-    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
-      initial: false
-    }, isAnimating && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
-      $browser: browser === null || browser === void 0 ? void 0 : browser.name,
-      animate: {
-        height: 'fit-content',
-        opacity: 1
-      },
-      $overflowY: overflowY,
-      $translateX: translateX,
-      $translateY: translateY,
-      initial: {
-        height: 0,
-        opacity: 0
-      },
-      exit: {
-        height: 0,
-        opacity: 0
-      },
-      $maxHeight: maxHeight,
-      $minWidth: bodyWidth ?? bodyMinWidth,
-      style: bodyStyles,
-      $direction: direction,
-      $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
-      transition: {
-        duration: 0.2
-      },
-      tabIndex: 0,
-      ref: contentRef
-    }, comboBoxGroups)), newContainer));
-  }, [bodyWidth, bodyMinWidth, bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth, translateX, translateY]);
-  return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBox, {
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,
     $shouldUseFullWidth: shouldUseFullWidth,
     $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth
-  }, /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxHeader, {
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
     $direction: direction,
     onClick: handleHeaderClick,
     $isOpen: isAnimating,
@@ -439,30 +296,47 @@ const ComboBox = ({
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
     $shouldShowBigImage: shouldShowBigImage
-  }, /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPrefix, null, prefix), /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefix, null, prefix), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
     $shouldReduceOpacity: !selectedItem && !internalSelectedItem
-  }, placeholderImageUrl && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
+  }, placeholderImageUrl && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
     src: placeholderImageUrl,
     $shouldShowBigImage: shouldShowBigImage,
     $shouldShowRoundImage: shouldShowRoundPlaceholderImage
-  }), placeholderIcon && /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+  }), placeholderIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: placeholderIcon
-  }), typeof inputValue === 'string' ? /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxInput, {
+  }), typeof inputValue === 'string' ? /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxInput, {
     disabled: isDisabled,
     value: inputValue,
     onChange: onInputChange,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     placeholder: placeholderText
-  }) : /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), shouldShowClearIcon && internalSelectedItem && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxClearIconWrapper, {
+  }) : /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), shouldShowClearIcon && internalSelectedItem && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxClearIconWrapper, {
     onClick: handleClear
-  }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-times']
-  })), !shouldDisableActions && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxIconWrapper, {
+  })), !shouldDisableActions && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, {
     $shouldShowBorderLeft: shouldShowClearIcon === true && internalSelectedItem !== undefined
-  }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-chevron-down']
-  }))), portal), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, portal]);
+  }))), styledComboBoxElementRef.current && /*#__PURE__*/_react.default.createElement(_DropdownBodyWrapper.default, {
+    anchorElement: styledComboBoxElementRef.current,
+    bodyWidth: bodyWidth,
+    contentHeight: contentHeight,
+    onClose: handleClose,
+    direction: direction,
+    container: container,
+    shouldShowDropdown: isAnimating,
+    minBodyWidth: bodyWidth ?? bodyMinWidth,
+    maxHeight: maxHeight
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxBody, {
+    $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
+    $maxHeight: maxHeight,
+    $minWidth: bodyWidth ?? bodyMinWidth,
+    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    ref: contentRef,
+    tabIndex: 0
+  }, comboBoxGroups))), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, bodyWidth, contentHeight, handleClose, container, bodyMinWidth, maxHeight, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups]);
 };
 ComboBox.displayName = 'ComboBox';
 var _default = exports.default = ComboBox;