@chayns-components/core 5.0.0-beta.104 → 5.0.0-beta.1040

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

@@ -0,0 +1,192 @@
+import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
+import { ColorMode, useSite, useStyleSettings } from 'chayns-api';
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import { getDesignSettings, getParagraphFormat } from '../../api/theme/get';
+import { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';
+import { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';
+
+// ToDo remove type after the framer-motion bug is Fixed
+
+const GlobalStyle = createGlobalStyle`
+    .ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+export const ColorSchemeContext = /*#__PURE__*/createContext(undefined);
+export const useColorScheme = () => useContext(ColorSchemeContext);
+const ColorSchemeProvider = _ref => {
+  let {
+    children,
+    color,
+    colorMode,
+    cssVariables = {},
+    secondaryColor,
+    siteId,
+    style = {},
+    paragraphFormat,
+    designSettings,
+    theme,
+    colors
+  } = _ref;
+  const {
+    color: internalColor,
+    colorMode: internalColorMode
+  } = useSite();
+  const styleSettings = useStyleSettings();
+  const [internalTheme, setInternalTheme] = useState(theme ?? {});
+  const [internalDesignSettings, setInternalDesignSettings] = useState(() => {
+    if (designSettings) {
+      return designSettings;
+    }
+    if (styleSettings?.designSettings) {
+      return styleSettings.designSettings;
+    }
+    return undefined;
+  });
+  const [internalParagraphFormat, setInternalParagraphFormat] = useState(() => {
+    if (paragraphFormat) {
+      return paragraphFormat;
+    }
+    if (styleSettings?.paragraphFormats) {
+      return styleSettings.paragraphFormats;
+    }
+    return undefined;
+  });
+  useEffect(() => {
+    if (designSettings) {
+      if (designSettings !== internalDesignSettings) {
+        setInternalDesignSettings(designSettings);
+      }
+      return;
+    }
+    if (styleSettings?.designSettings) {
+      if (styleSettings.designSettings !== internalDesignSettings) {
+        setInternalDesignSettings(styleSettings.designSettings);
+      }
+      return;
+    }
+    if (!internalDesignSettings) {
+      void getDesignSettings(siteId).then(result => {
+        setInternalDesignSettings(result);
+      });
+    }
+  }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);
+  useEffect(() => {
+    if (paragraphFormat) {
+      if (paragraphFormat !== internalParagraphFormat) {
+        setInternalParagraphFormat(paragraphFormat);
+      }
+      return;
+    }
+    if (styleSettings?.paragraphFormats) {
+      if (styleSettings.paragraphFormats !== internalParagraphFormat) {
+        setInternalParagraphFormat(styleSettings.paragraphFormats);
+      }
+    }
+    if (!internalParagraphFormat) {
+      void getParagraphFormat(siteId).then(result => {
+        setInternalParagraphFormat(result ?? []);
+      });
+    }
+  }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);
+  useEffect(() => {
+    let newTheme = {};
+    const availableColors = getAvailableColorList();
+    if (!colors || !theme) {
+      availableColors.forEach(colorName => {
+        const hexColor = getColorFromPalette(colorName, {
+          color: color ?? internalColor,
+          colorMode: colorMode ?? internalColorMode,
+          secondaryColor
+        });
+        if (hexColor) {
+          const rgbColor = hexToRgb255(hexColor);
+          if (!theme) {
+            newTheme[colorName] = hexColor;
+          }
+          if (rgbColor) {
+            if (!theme) {
+              newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+            }
+          }
+        }
+      });
+    }
+    if (!theme) {
+      switch (colorMode ?? internalColorMode) {
+        case ColorMode.Light:
+          newTheme.colorMode = 'light';
+          break;
+        case ColorMode.Dark:
+          newTheme.colorMode = 'dark';
+          break;
+        default:
+          newTheme.colorMode = 'classic';
+          break;
+      }
+      if (internalDesignSettings) {
+        Object.keys(internalDesignSettings).forEach(key => {
+          if (key === 'iconStyle') {
+            newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);
+            return;
+          }
+
+          // ToDo: Find better solution
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          newTheme[key] = internalDesignSettings[key];
+        });
+      }
+      if (internalParagraphFormat) {
+        const {
+          themeResult
+        } = getHeadlineColorSelector(internalParagraphFormat);
+
+        // Update Theme
+        Object.keys(themeResult).forEach(key => {
+          // ToDo: Find better solution
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          newTheme[key] = themeResult[key];
+        });
+      }
+      newTheme.fontSize = getFontSize();
+    } else {
+      newTheme = theme;
+    }
+    setInternalTheme(newTheme);
+  }, [color, colorMode, colors, internalColor, internalColorMode, internalDesignSettings, internalParagraphFormat, secondaryColor, theme]);
+  const contextValue = useMemo(() => {
+    if (internalDesignSettings && internalParagraphFormat) {
+      return {
+        paragraphFormat: internalParagraphFormat,
+        designSettings: internalDesignSettings,
+        theme: internalTheme
+      };
+    }
+    return undefined;
+  }, [internalDesignSettings, internalParagraphFormat, internalTheme]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: internalTheme
+  }, /*#__PURE__*/React.createElement(ColorSchemeContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("link", {
+    rel: "stylesheet",
+    href: "https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css"
+  })), /*#__PURE__*/React.createElement(StyledColorSchemeProvider, {
+    className: "color-scheme-provider",
+    style: {
+      ...cssVariables,
+      ...style
+    }
+  }, children), /*#__PURE__*/React.createElement(GlobalStyle, null)));
+};
+ColorSchemeProvider.displayName = 'ColorSchemeProvider';
+export default ColorSchemeProvider;
+//# sourceMappingURL=ColorSchemeProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useSite","useStyleSettings","React","createContext","useContext","useEffect","useMemo","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","StyledColorSchemeProvider","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalColor","internalColorMode","styleSettings","internalTheme","setInternalTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","paragraphFormats","then","result","newTheme","availableColors","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","themeResult","fontSize","contextValue","createElement","Provider","value","rel","href","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ColorMode, useSite, useStyleSettings } from 'chayns-api';\nimport React, {\n    createContext,\n    FC,\n    ReactNode,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\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 colors of the components\n     */\n    colors?: Theme;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The general format settings.\n     */\n    paragraphFormat?: ParagraphFormat[];\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     * The theme for the components\n     */\n    theme?: Theme;\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\nexport interface ColorSchemeContextProps {\n    designSettings: DesignSettings;\n    paragraphFormat: ParagraphFormat[];\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,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    paragraphFormat,\n    designSettings,\n    theme,\n    colors,\n}) => {\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n    const styleSettings = useStyleSettings();\n    const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<\n        DesignSettings | undefined\n    >(() => {\n        if (designSettings) {\n            return designSettings;\n        }\n        if (styleSettings?.designSettings) {\n            return styleSettings.designSettings;\n        }\n        return undefined;\n    });\n    const [internalParagraphFormat, setInternalParagraphFormat] = useState<\n        ParagraphFormat[] | undefined\n    >(() => {\n        if (paragraphFormat) {\n            return paragraphFormat;\n        }\n        if (styleSettings?.paragraphFormats) {\n            return styleSettings.paragraphFormats;\n        }\n        return undefined;\n    });\n\n    useEffect(() => {\n        if (designSettings) {\n            if (designSettings !== internalDesignSettings) {\n                setInternalDesignSettings(designSettings);\n            }\n            return;\n        }\n        if (styleSettings?.designSettings) {\n            if (styleSettings.designSettings !== internalDesignSettings) {\n                setInternalDesignSettings(styleSettings.designSettings);\n            }\n            return;\n        }\n        if (!internalDesignSettings) {\n            void getDesignSettings(siteId).then((result) => {\n                setInternalDesignSettings(result);\n            });\n        }\n    }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);\n\n    useEffect(() => {\n        if (paragraphFormat) {\n            if (paragraphFormat !== internalParagraphFormat) {\n                setInternalParagraphFormat(paragraphFormat);\n            }\n            return;\n        }\n        if (styleSettings?.paragraphFormats) {\n            if (styleSettings.paragraphFormats !== internalParagraphFormat) {\n                setInternalParagraphFormat(styleSettings.paragraphFormats);\n            }\n        }\n        if (!internalParagraphFormat) {\n            void getParagraphFormat(siteId).then((result) => {\n                setInternalParagraphFormat(result ?? []);\n            });\n        }\n    }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);\n\n    useEffect(() => {\n        let newTheme: Theme = {};\n\n        const availableColors = getAvailableColorList();\n\n        if (!colors || !theme) {\n            availableColors.forEach((colorName: string) => {\n                const hexColor = getColorFromPalette(colorName, {\n                    color: color ?? internalColor,\n                    colorMode: colorMode ?? internalColorMode,\n                    secondaryColor,\n                });\n\n                if (hexColor) {\n                    const rgbColor = hexToRgb255(hexColor);\n\n                    if (!theme) {\n                        newTheme[colorName] = hexColor;\n                    }\n\n                    if (rgbColor) {\n                        if (!theme) {\n                            newTheme[`${colorName}-rgb`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n                    }\n                }\n            });\n        }\n\n        if (!theme) {\n            switch (colorMode ?? internalColorMode) {\n                case ColorMode.Light:\n                    newTheme.colorMode = 'light';\n                    break;\n                case ColorMode.Dark:\n                    newTheme.colorMode = 'dark';\n                    break;\n                default:\n                    newTheme.colorMode = 'classic';\n                    break;\n            }\n\n            if (internalDesignSettings) {\n                Object.keys(internalDesignSettings).forEach((key) => {\n                    if (key === 'iconStyle') {\n                        newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                        return;\n                    }\n\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = internalDesignSettings[key];\n                });\n            }\n\n            if (internalParagraphFormat) {\n                const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n                // Update Theme\n                Object.keys(themeResult).forEach((key) => {\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = themeResult[key];\n                });\n            }\n\n            newTheme.fontSize = getFontSize();\n        } else {\n            newTheme = theme;\n        }\n\n        setInternalTheme(newTheme);\n    }, [\n        color,\n        colorMode,\n        colors,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        internalParagraphFormat,\n        secondaryColor,\n        theme,\n    ]);\n\n    const contextValue: ColorSchemeContextProps | undefined = useMemo(() => {\n        if (internalDesignSettings && internalParagraphFormat) {\n            return {\n                paragraphFormat: internalParagraphFormat,\n                designSettings: internalDesignSettings,\n                theme: internalTheme,\n            };\n        }\n\n        return undefined;\n    }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n    return (\n        <ThemeProvider theme={internalTheme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <Helmet>\n                    <link\n                        rel=\"stylesheet\"\n                        href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n                    />\n                </Helmet>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={{\n                        ...cssVariables,\n                        ...style,\n                    }}\n                >\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/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js

@@ -0,0 +1,16 @@
+import { getAvailableColorList } from '@chayns/colors';
+import { styled } from 'styled-components';
+export const StyledColorSchemeProvider = styled.div`
+    color: var(--chayns-color--text);
+
+    ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return getAvailableColorList().map(colorName => {
+    const colorNameRgb = `${colorName}-rgb`;
+    return [`--chayns-color--${colorName}: ${theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`];
+  });
+}}
+`;
+//# sourceMappingURL=ColorSchemeProvider.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","_ref","theme","map","colorName","colorNameRgb"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n    color: var(--chayns-color--text);\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${theme[colorName]};`,\n                `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n            ];\n        })}\n`;\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAK1C,OAAO,MAAMC,yBAAyB,GAAGD,MAAM,CAACE,GAA6B;AAC7E;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAClCJ,qBAAqB,CAAC,CAAC,CAACM,GAAG,CAAEC,SAAiB,IAAK;IAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;IACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKF,KAAK,CAACE,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKF,KAAK,CAACG,YAAY,CAAC,GAAG,CAC9D;EACL,CAAC,CAAC;AAAA;AACV,CAAC","ignoreList":[]}

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

@@ -0,0 +1,416 @@
+import { useDevice, useFunctions, useValues } from 'chayns-api';
+import { AnimatePresence } from 'motion/react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ComboBoxDirection } from '../../types/comboBox';
+import { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';
+import { getIsTouch } from '../../utils/environment';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import Icon from '../icon/Icon';
+import ComboBoxItem from './combobox-item/ComboBoxItem';
+import { StyledComboBox, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxInput, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledComboBoxPlaceholderText, StyledComboBoxPrefix, StyledComboBoxPrefixAndPlaceholderWrapper, StyledComboBoxTopic, StyledMotionComboBoxBody } from './ComboBox.styles';
+const ComboBox = _ref => {
+  let {
+    bodyWidth,
+    direction = ComboBoxDirection.BOTTOM,
+    isDisabled = false,
+    lists,
+    maxHeight = '280px',
+    onSelect,
+    placeholder,
+    prefix,
+    container,
+    selectedItem,
+    shouldShowBigImage,
+    shouldShowRoundImage,
+    onInputFocus,
+    shouldUseFullWidth = false,
+    onInputChange,
+    shouldUseCurrentItemWidth = false,
+    onInputBlur,
+    inputValue
+  } = _ref;
+  const [internalSelectedItem, setInternalSelectedItem] = useState();
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [minWidth, setMinWidth] = useState(undefined);
+  const [bodyMinWidth, setBodyMinWidth] = useState(0);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const [overflowY, setOverflowY] = useState('hidden');
+  const [translateX, setTranslateX] = useState('0px');
+  const [translateY, setTranslateY] = useState('0px');
+  const [portal, setPortal] = useState();
+  const [internalCoordinates, setInternalCoordinates] = useState({
+    x: 0,
+    y: 0
+  });
+  const [newContainer, setNewContainer] = useState(container ?? null);
+  const isInputFocused = useRef(false);
+  const styledComboBoxElementRef = useRef(null);
+  const contentRef = useRef(null);
+  const functions = useFunctions();
+  const values = useValues();
+  const {
+    browser
+  } = useDevice();
+  const isTouch = getIsTouch();
+  const areaProvider = useContext(AreaContext);
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  useEffect(() => {
+    if (styledComboBoxElementRef.current && !container) {
+      const el = styledComboBoxElementRef.current;
+      const element = el.closest('.dialog-inner') || el.closest('body');
+      setNewContainer(element);
+    }
+  }, [container]);
+  useEffect(() => {
+    if (container instanceof Element) {
+      setNewContainer(container);
+    }
+  }, [container]);
+  const handleInputFocus = useCallback(event => {
+    isInputFocused.current = true;
+    onInputFocus?.(event);
+  }, [onInputFocus]);
+  const handleInputBlur = useCallback(event => {
+    isInputFocused.current = false;
+    onInputBlur?.(event);
+  }, [onInputBlur]);
+  const handleClick = useCallback(event => {
+    if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
+      setIsAnimating(false);
+    }
+  }, [styledComboBoxElementRef]);
+  const handleOpen = useCallback(() => {
+    if (styledComboBoxElementRef.current && newContainer) {
+      const {
+        left: comboBoxLeft,
+        top: comboBoxTop,
+        height
+      } = styledComboBoxElementRef.current.getBoundingClientRect();
+      const {
+        left: containerLeft,
+        top: containerTop
+      } = newContainer.getBoundingClientRect();
+      const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;
+      const y = comboBoxTop - containerTop + newContainer.scrollTop;
+      setInternalCoordinates({
+        x,
+        y: [ComboBoxDirection.TOP, ComboBoxDirection.TOP_LEFT, ComboBoxDirection.TOP_RIGHT].includes(direction) ? y : y + height
+      });
+      setIsAnimating(true);
+    }
+  }, [newContainer, direction]);
+  const handleClose = useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+
+  /**
+   * This function adds an event listener to the document to close the combobox when the user clicks outside of it
+   */
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [handleClick, styledComboBoxElementRef]);
+
+  /**
+   * This function sets the selected item
+   */
+  const handleSetSelectedItem = useCallback(itemToSelect => {
+    if (typeof onSelect === 'function') {
+      const onSelectResult = onSelect(itemToSelect);
+      if (onSelectResult === false) {
+        return;
+      }
+      if (onSelectResult instanceof Promise) {
+        void onSelectResult.then(shouldPreventSelection => {
+          if (shouldPreventSelection) return;
+          setInternalSelectedItem(itemToSelect);
+          setIsAnimating(false);
+        });
+        return;
+      }
+    }
+    setInternalSelectedItem(itemToSelect);
+    setIsAnimating(false);
+  }, [onSelect]);
+  useEffect(() => {
+    const currentContent = contentRef.current;
+    if (portal && isAnimating && currentContent) {
+      const scrollHeight = currentContent.scrollHeight ?? 0;
+      const maxHeightInPixels = getMaxHeightInPixels(maxHeight, styledComboBoxElementRef.current ?? document.body);
+      setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');
+    }
+  }, [isAnimating, maxHeight, portal]);
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (!isAnimating) {
+        return;
+      }
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        const children = 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);
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+        }
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
+        const element = contentRef.current?.children[focusedIndex];
+        if (!element) {
+          return;
+        }
+        const {
+          id
+        } = element;
+        let newSelectedItem;
+        lists.some(list => {
+          newSelectedItem = list.list.find(_ref2 => {
+            let {
+              value
+            } = _ref2;
+            return String(value) === id.replace('combobox-item__', '');
+          });
+          return !!newSelectedItem;
+        });
+        if (!newSelectedItem) {
+          return;
+        }
+        handleSetSelectedItem(newSelectedItem);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
+
+  /**
+   * This function calculates the greatest width
+   */
+  useEffect(() => {
+    const allItems = lists.flatMap(list => list.list);
+    const hasImage = [selectedItem, ...allItems].some(item => item?.imageUrl);
+    const hasIcon = [selectedItem, ...allItems].some(item => item?.icons);
+    const parentWidth = styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;
+    const paddingWidth = 45; // padding + border + arrow icon
+    const imageWidth = hasImage ? 32 : 0; // image width + gap if images present
+    const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present
+
+    let prefixWidth = 0;
+    if (prefix) {
+      const prefixTextWidth = calculateContentWidth([{
+        text: prefix,
+        value: 'prefix'
+      }], functions, values) + 5;
+      prefixWidth = Math.max(prefixTextWidth, 32);
+    }
+    const baseWidth = calculateContentWidth([...allItems, {
+      text: placeholder,
+      value: 'placeholder'
+    }, ...(selectedItem ? [selectedItem] : [])], functions, values);
+    const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;
+    let tmpMinWidth = calculatedWidth;
+    let tmpBodyMinWidth = calculatedWidth;
+
+    // Full width settings
+    if (shouldUseFullWidth) {
+      tmpMinWidth = parentWidth;
+      tmpBodyMinWidth = parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;
+    }
+
+    // Current item width settings
+    else if (shouldUseCurrentItemWidth && internalSelectedItem) {
+      const itemWidth = calculateContentWidth([internalSelectedItem], functions, values) + paddingWidth + imageWidth + iconWidth + prefixWidth;
+      tmpMinWidth = itemWidth;
+      tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
+    }
+    if (tmpMinWidth > parentWidth) {
+      tmpMinWidth = parentWidth;
+    }
+    if (tmpBodyMinWidth > parentWidth) {
+      tmpBodyMinWidth = parentWidth;
+    }
+    setMinWidth(tmpMinWidth);
+    setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);
+  }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem, functions, values]);
+
+  /**
+   * This function sets the external selected item
+   */
+  useEffect(() => {
+    setIsAnimating(false);
+    setInternalSelectedItem(selectedItem);
+  }, [selectedItem]);
+  useEffect(() => {
+    if ([ComboBoxDirection.BOTTOM_LEFT, ComboBoxDirection.TOP_LEFT].includes(direction) && typeof bodyWidth === 'number' && typeof minWidth === 'number') {
+      const difference = minWidth - bodyWidth;
+      setTranslateX(`${difference}px`);
+    } else {
+      setTranslateX('0px');
+    }
+  }, [bodyWidth, direction, minWidth]);
+  const placeholderImageUrl = useMemo(() => {
+    if (selectedItem) {
+      return selectedItem.imageUrl;
+    }
+    if (internalSelectedItem) {
+      return internalSelectedItem.imageUrl;
+    }
+    return undefined;
+  }, [internalSelectedItem, selectedItem]);
+  const placeholderIcon = useMemo(() => {
+    if (selectedItem) {
+      return selectedItem.icons;
+    }
+    if (internalSelectedItem) {
+      return internalSelectedItem.icons;
+    }
+    return undefined;
+  }, [internalSelectedItem, selectedItem]);
+
+  /**
+   * This function resets the placeholder
+   */
+  const placeholderText = useMemo(() => {
+    let text = placeholder;
+    if (selectedItem) {
+      text = selectedItem.text;
+    } else if (internalSelectedItem) {
+      text = internalSelectedItem.text;
+    }
+    return text;
+  }, [internalSelectedItem, placeholder, selectedItem]);
+  const shouldShowRoundPlaceholderImage = useMemo(() => {
+    const selectedItemList = lists.find(list => list.list.some(_ref3 => {
+      let {
+        value
+      } = _ref3;
+      return value === (selectedItem?.value ?? internalSelectedItem?.value);
+    }));
+    return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;
+  }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);
+
+  /**
+   * This function opens the content of the combobox
+   */
+  const handleHeaderClick = useCallback(() => {
+    if (!isDisabled && !isInputFocused.current) {
+      if (isAnimating) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
+    }
+  }, [handleClose, handleOpen, isAnimating, isDisabled]);
+  const comboBoxGroups = useMemo(() => lists.map(list => /*#__PURE__*/React.createElement("div", {
+    key: list.groupName ?? 'default-group'
+  }, list.groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, list.groupName), list.list.map(item =>
+  /*#__PURE__*/
+  // ToDo: Cleanup this - item should be given as a prop to avoid full spreading
+  React.createElement(ComboBoxItem, {
+    icons: item.icons,
+    id: item.value,
+    imageBackground: item.imageBackground,
+    imageUrl: item.imageUrl,
+    isDisabled: item.isDisabled,
+    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
+  })))), [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage]);
+  const bodyStyles = useMemo(() => ({
+    left: internalCoordinates.x,
+    top: internalCoordinates.y
+  }), [internalCoordinates.x, internalCoordinates.y]);
+  useEffect(() => {
+    if ([ComboBoxDirection.TOP, ComboBoxDirection.TOP_LEFT, ComboBoxDirection.TOP_RIGHT].includes(direction)) {
+      setTranslateY('-100%');
+    } else {
+      setTranslateY('0px');
+    }
+  }, [direction]);
+  useEffect(() => {
+    if (!newContainer) {
+      return;
+    }
+    setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
+      initial: false
+    }, isAnimating && /*#__PURE__*/React.createElement(StyledMotionComboBoxBody, {
+      $browser: 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?.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth, translateX, translateY]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
+    ref: styledComboBoxElementRef,
+    $minWidth: minWidth,
+    $shouldUseFullWidth: shouldUseFullWidth,
+    $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth
+  }, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
+    $direction: direction,
+    onClick: handleHeaderClick,
+    $isOpen: isAnimating,
+    $isTouch: isTouch,
+    $isDisabled: isDisabled,
+    $shouldChangeColor: shouldChangeColor,
+    $shouldShowBigImage: shouldShowBigImage
+  }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, null, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
+    $shouldReduceOpacity: !selectedItem && !internalSelectedItem
+  }, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
+    src: placeholderImageUrl,
+    $shouldShowBigImage: shouldShowBigImage,
+    $shouldShowRoundImage: shouldShowRoundPlaceholderImage
+  }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
+    icons: placeholderIcon
+  }), typeof inputValue === 'string' ? /*#__PURE__*/React.createElement(StyledComboBoxInput, {
+    disabled: isDisabled,
+    value: inputValue,
+    onChange: onInputChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    placeholder: placeholderText
+  }) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-chevron-down']
+  }))), portal), [minWidth, shouldUseFullWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, inputValue, onInputChange, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, portal, handleInputFocus, handleInputBlur, shouldUseCurrentItemWidth]);
+};
+ComboBox.displayName = 'ComboBox';
+export default ComboBox;
+//# sourceMappingURL=ComboBox.js.map