@chayns-components/core 5.0.0-beta.9 → 5.0.0-beta.900

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

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorScheme = exports.default = exports.ColorSchemeContext = void 0;
+var _colors = require("@chayns/colors");
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireWildcard(require("react"));
+var _reactHelmet = require("react-helmet");
+var _styledComponents = require("styled-components");
+var _get = require("../../api/theme/get");
+var _font = require("../../utils/font");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var ColorMode = /*#__PURE__*/function (ColorMode) {
+  ColorMode[ColorMode["Classic"] = 0] = "Classic";
+  ColorMode[ColorMode["Dark"] = 1] = "Dark";
+  ColorMode[ColorMode["Light"] = 2] = "Light";
+  return ColorMode;
+}(ColorMode || {}); // ToDo remove type after the framer-motion bug is Fixed
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+    .ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+const ColorSchemeContext = exports.ColorSchemeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const useColorScheme = () => (0, _react.useContext)(ColorSchemeContext);
+exports.useColorScheme = useColorScheme;
+const ColorSchemeProvider = ({
+  children,
+  color,
+  colorMode,
+  cssVariables = {},
+  secondaryColor,
+  siteId,
+  style = {},
+  paragraphFormat,
+  designSettings,
+  theme,
+  colors
+}) => {
+  const [internalColors, setInternalColors] = (0, _react.useState)(colors ?? {});
+  const [internalTheme, setInternalTheme] = (0, _react.useState)(theme ?? {});
+  const [internalDesignSettings, setInternalDesignSettings] = (0, _react.useState)();
+  const [internalParagraphFormat, setInternalParagraphFormat] = (0, _react.useState)();
+
+  // Empty object is used to prevent error if ColorSchemeProvider is rendered on server
+  const {
+    color: internalColor,
+    colorMode: internalColorMode
+  } = (0, _chaynsApi.useSite)() ?? {};
+  (0, _react.useEffect)(() => {
+    if (designSettings) {
+      setInternalDesignSettings(designSettings);
+    } else if (!internalDesignSettings) {
+      void (0, _get.getDesignSettings)(siteId).then(result => {
+        setInternalDesignSettings(result);
+      });
+    }
+  }, [designSettings, internalDesignSettings, siteId]);
+  (0, _react.useEffect)(() => {
+    if (paragraphFormat) {
+      setInternalParagraphFormat(paragraphFormat);
+    } else if (!internalParagraphFormat) {
+      void (0, _get.getParagraphFormat)(siteId).then(result => {
+        setInternalParagraphFormat(result);
+      });
+    }
+  }, [internalParagraphFormat, paragraphFormat, siteId]);
+  (0, _react.useEffect)(() => {
+    let newColors = {};
+    let newTheme = {};
+    const availableColors = (0, _colors.getAvailableColorList)();
+    if (!colors || !theme) {
+      availableColors.forEach(colorName => {
+        const hexColor = (0, _colors.getColorFromPalette)(colorName, {
+          color: color ?? internalColor,
+          colorMode: colorMode ?? internalColorMode,
+          secondaryColor
+        });
+        if (hexColor) {
+          const rgbColor = (0, _colors.hexToRgb255)(hexColor);
+          if (!theme) {
+            newTheme[colorName] = hexColor;
+          }
+          if (!colors) {
+            newColors[`--chayns-color--${colorName}`] = hexColor;
+          }
+          if (rgbColor) {
+            if (!theme) {
+              newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+            }
+            if (!colors) {
+              newColors[`--chayns-color-rgb--${colorName}`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+            }
+          }
+        }
+      });
+    }
+    if (colors) {
+      newColors = colors;
+    }
+    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] = (0, _font.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 {
+          colorResult,
+          themeResult
+        } = (0, _font.getHeadlineColorSelector)(internalParagraphFormat);
+
+        // Update chayns-colors
+        Object.keys(colorResult).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
+          newColors[key] = colorResult[key];
+        });
+
+        // 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 = (0, _font.getFontSize)();
+    } else {
+      newTheme = theme;
+    }
+    setInternalTheme(newTheme);
+    setInternalColors(newColors);
+  }, [color, colorMode, colors, internalColor, internalColorMode, internalDesignSettings, internalParagraphFormat, secondaryColor, theme]);
+  const contextValue = (0, _react.useMemo)(() => {
+    if (internalDesignSettings && internalParagraphFormat) {
+      return {
+        paragraphFormat: internalParagraphFormat,
+        designSettings: internalDesignSettings,
+        colors: internalColors,
+        theme: internalTheme
+      };
+    }
+    return undefined;
+  }, [internalColors, internalDesignSettings, internalParagraphFormat, internalTheme]);
+  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    theme: internalTheme
+  }, /*#__PURE__*/_react.default.createElement(ColorSchemeContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_reactHelmet.Helmet, null, /*#__PURE__*/_react.default.createElement("link", {
+    rel: "stylesheet",
+    href: "https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "color-scheme-provider",
+    style: {
+      ...internalColors,
+      ...cssVariables,
+      ...style,
+      color: 'var(--chayns-color--text)'
+    }
+  }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null)));
+};
+ColorSchemeProvider.displayName = 'ColorSchemeProvider';
+var _default = exports.default = ColorSchemeProvider;
+//# sourceMappingURL=ColorSchemeProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalColors","setInternalColors","useState","internalTheme","setInternalTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","useEffect","getDesignSettings","then","result","getParagraphFormat","newColors","newTheme","availableColors","getAvailableColorList","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","Light","Dark","keys","key","convertIconStyle","iconStyle","colorResult","themeResult","getHeadlineColorSelector","fontSize","getFontSize","contextValue","useMemo","createElement","ThemeProvider","Provider","value","Helmet","rel","href","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } 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';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\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    colors: Theme;\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 [internalColors, setInternalColors] = useState<Theme>(colors ?? {});\n    const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n    const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n    // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n    const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n        } else if (!internalDesignSettings) {\n            void getDesignSettings(siteId).then((result) => {\n                setInternalDesignSettings(result);\n            });\n        }\n    }, [designSettings, internalDesignSettings, siteId]);\n\n    useEffect(() => {\n        if (paragraphFormat) {\n            setInternalParagraphFormat(paragraphFormat);\n        } else if (!internalParagraphFormat) {\n            void getParagraphFormat(siteId).then((result) => {\n                setInternalParagraphFormat(result);\n            });\n        }\n    }, [internalParagraphFormat, paragraphFormat, siteId]);\n\n    useEffect(() => {\n        let newColors: Theme = {};\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 (!colors) {\n                        newColors[`--chayns-color--${colorName}`] = hexColor;\n                    }\n\n                    if (rgbColor) {\n                        if (!theme) {\n                            newTheme[`${colorName}-rgb`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n\n                        if (!colors) {\n                            newColors[`--chayns-color-rgb--${colorName}`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n                    }\n                }\n            });\n        }\n\n        if (colors) {\n            newColors = colors;\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 { colorResult, themeResult } =\n                    getHeadlineColorSelector(internalParagraphFormat);\n\n                // Update chayns-colors\n                Object.keys(colorResult).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                    newColors[key] = colorResult[key];\n                });\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        setInternalColors(newColors);\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                colors: internalColors,\n                theme: internalTheme,\n            };\n        }\n\n        return undefined;\n    }, [internalColors, 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                <div\n                    className=\"color-scheme-provider\"\n                    style={{\n                        ...internalColors,\n                        ...cssVariables,\n                        ...style,\n                        color: 'var(--chayns-color--text)',\n                    }}\n                >\n                    {children}\n                </div>\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

@@ -0,0 +1,370 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _comboBox = require("../../types/comboBox");
+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");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ComboBox = ({
+  direction = _comboBox.ComboBoxDirection.BOTTOM,
+  isDisabled = false,
+  lists,
+  maxHeight = '280px',
+  onSelect,
+  placeholder,
+  container,
+  selectedItem,
+  shouldShowBigImage,
+  shouldShowRoundImage,
+  onInputFocus,
+  shouldUseFullWidth = false,
+  onInputChange,
+  shouldUseCurrentItemWidth = false,
+  onInputBlur,
+  inputValue
+}) => {
+  const [internalSelectedItem, setInternalSelectedItem] = (0, _react.useState)();
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [minWidth, setMinWidth] = (0, _react.useState)(0);
+  const [bodyMinWidth, setBodyMinWidth] = (0, _react.useState)(0);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
+  const [overflowY, setOverflowY] = (0, _react.useState)('hidden');
+  const [portal, setPortal] = (0, _react.useState)();
+  const [internalCoordinates, setInternalCoordinates] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const [newContainer, setNewContainer] = (0, _react.useState)(container ?? null);
+  const styledComboBoxElementRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const {
+    browser
+  } = (0, _chaynsApi.useDevice)();
+  const isTouch = (0, _environment.getIsTouch)();
+  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  (0, _react.useEffect)(() => {
+    if (styledComboBoxElementRef.current && !container) {
+      const el = styledComboBoxElementRef.current;
+      const element = el.closest('.dialog-inner') || el.closest('body');
+      setNewContainer(element);
+    }
+  }, [container]);
+  const handleClick = (0, _react.useCallback)(event => {
+    if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
+      setIsAnimating(false);
+    }
+  }, [styledComboBoxElementRef]);
+  const handleOpen = (0, _react.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: direction === _comboBox.ComboBoxDirection.TOP ? y : y + height
+      });
+      setIsAnimating(true);
+    }
+  }, [newContainer, direction]);
+  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, _react.useEffect)(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [handleClick, styledComboBoxElementRef]);
+
+  /**
+   * This function sets the selected item
+   */
+  const handleSetSelectedItem = (0, _react.useCallback)(itemToSelect => {
+    if (typeof onSelect === 'function') {
+      const shouldPreventSelection = onSelect(itemToSelect) === false;
+      if (shouldPreventSelection) return;
+    }
+    setInternalSelectedItem(itemToSelect);
+    setIsAnimating(false);
+  }, [onSelect]);
+  (0, _react.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, _react.useEffect)(() => {
+    const handleKeyDown = e => {
+      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);
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.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;
+        }
+        const {
+          id
+        } = element;
+        let newSelectedItem;
+        lists.some(list => {
+          newSelectedItem = list.list.find(({
+            value
+          }) => 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
+   */
+  (0, _react.useEffect)(() => {
+    var _styledComboBoxElemen;
+    const allItems = lists.flatMap(list => list.list);
+    const hasImage = allItems.some(({
+      imageUrl
+    }) => imageUrl);
+    const hasIcon = allItems.some(({
+      icons
+    }) => icons);
+    const parentWidth = ((_styledComboBoxElemen = styledComboBoxElementRef.current) === null || _styledComboBoxElemen === void 0 || (_styledComboBoxElemen = _styledComboBoxElemen.parentElement) === null || _styledComboBoxElemen === void 0 ? void 0 : _styledComboBoxElemen.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
+
+    const baseWidth = (0, _calculate.calculateContentWidth)([...allItems, {
+      text: placeholder,
+      value: 'placeholder'
+    }]);
+    const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;
+    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 = (0, _calculate.calculateContentWidth)([internalSelectedItem]) + paddingWidth + imageWidth + iconWidth;
+      tmpMinWidth = itemWidth;
+      tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
+    }
+    setMinWidth(tmpMinWidth);
+    setBodyMinWidth(tmpBodyMinWidth);
+  }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);
+
+  /**
+   * This function sets the external selected item
+   */
+  (0, _react.useEffect)(() => {
+    setIsAnimating(false);
+    setInternalSelectedItem(selectedItem);
+  }, [selectedItem]);
+  const placeholderImageUrl = (0, _react.useMemo)(() => {
+    if (selectedItem) {
+      return selectedItem.imageUrl;
+    }
+    if (internalSelectedItem) {
+      return internalSelectedItem.imageUrl;
+    }
+    return undefined;
+  }, [internalSelectedItem, selectedItem]);
+  const placeholderIcon = (0, _react.useMemo)(() => {
+    if (selectedItem) {
+      return selectedItem.icons;
+    }
+    if (internalSelectedItem) {
+      return internalSelectedItem.icons;
+    }
+    return undefined;
+  }, [internalSelectedItem, selectedItem]);
+
+  /**
+   * This function resets the placeholder
+   */
+  const placeholderText = (0, _react.useMemo)(() => {
+    let text = placeholder;
+    if (selectedItem) {
+      text = selectedItem.text;
+    } else if (internalSelectedItem) {
+      text = internalSelectedItem.text;
+    }
+    return text;
+  }, [internalSelectedItem, placeholder, selectedItem]);
+  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))));
+    return (selectedItemList === null || selectedItemList === void 0 ? void 0 : selectedItemList.shouldShowRoundImage) ?? shouldShowRoundImage;
+  }, [internalSelectedItem === null || internalSelectedItem === void 0 ? void 0 : internalSelectedItem.value, lists, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value, shouldShowRoundImage]);
+
+  /**
+   * This function opens the content of the combobox
+   */
+  const handleHeaderClick = (0, _react.useCallback)(() => {
+    if (!isDisabled) {
+      if (isAnimating) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
+    }
+  }, [handleClose, handleOpen, isAnimating, isDisabled]);
+  const comboBoxGroups = (0, _react.useMemo)(() => lists.map(list => /*#__PURE__*/_react.default.createElement("div", {
+    key: list.groupName ?? 'default-group'
+  }, list.groupName && lists.length > 1 && /*#__PURE__*/_react.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
+  _react.default.createElement(_ComboBoxItem.default, {
+    icons: item.icons,
+    id: item.value,
+    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 = (0, _react.useMemo)(() => {
+    let styles = {
+      left: internalCoordinates.x,
+      top: internalCoordinates.y
+    };
+    if (direction === _comboBox.ComboBoxDirection.TOP) {
+      styles = {
+        ...styles,
+        transform: 'translateY(-100%)'
+      };
+    }
+    return styles;
+  }, [direction, internalCoordinates.x, internalCoordinates.y]);
+  (0, _react.useEffect)(() => {
+    if (!newContainer) {
+      return;
+    }
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+      initial: false
+    }, isAnimating && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
+      $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+      animate: {
+        height: 'fit-content',
+        opacity: 1
+      },
+      $overflowY: overflowY,
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      $maxHeight: maxHeight,
+      $minWidth: bodyMinWidth,
+      style: bodyStyles,
+      $direction: direction,
+      transition: {
+        duration: 0.2
+      },
+      tabIndex: 0,
+      ref: contentRef
+    }, comboBoxGroups)), newContainer));
+  }, [bodyMinWidth, bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
+    ref: styledComboBoxElementRef,
+    $minWidth: minWidth,
+    $shouldUseFullWidth: shouldUseFullWidth
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
+    $direction: direction,
+    onClick: handleHeaderClick,
+    $isOpen: isAnimating,
+    $isTouch: isTouch,
+    $isDisabled: isDisabled,
+    $shouldChangeColor: shouldChangeColor,
+    $shouldShowBigImage: shouldShowBigImage
+  }, typeof inputValue === 'string' ? /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxInput, {
+    disabled: isDisabled,
+    value: inputValue,
+    onChange: onInputChange,
+    onBlur: onInputBlur,
+    onFocus: onInputFocus,
+    placeholder: placeholderText
+  }) : /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
+    $shouldReduceOpacity: !selectedItem && !internalSelectedItem
+  }, placeholderImageUrl && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
+    src: placeholderImageUrl,
+    $shouldShowBigImage: shouldShowBigImage,
+    $shouldShowRoundImage: shouldShowRoundPlaceholderImage
+  }), placeholderIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: placeholderIcon
+  }), placeholderText, internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-chevron-down']
+  }))), portal), [minWidth, shouldUseFullWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, inputValue, onInputChange, onInputBlur, onInputFocus, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, portal]);
+};
+ComboBox.displayName = 'ComboBox';
+var _default = exports.default = ComboBox;
+//# sourceMappingURL=ComboBox.js.map