@chayns-components/core 5.0.0-beta.89 → 5.0.0-beta.890

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

@@ -0,0 +1,185 @@
+import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
+import { useSite } 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';
+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 = 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 [internalColors, setInternalColors] = useState(colors ?? {});
+  const [internalTheme, setInternalTheme] = useState(theme ?? {});
+  const [internalDesignSettings, setInternalDesignSettings] = useState();
+  const [internalParagraphFormat, setInternalParagraphFormat] = useState();
+
+  // Empty object is used to prevent error if ColorSchemeProvider is rendered on server
+  const {
+    color: internalColor,
+    colorMode: internalColorMode
+  } = useSite() ?? {};
+  useEffect(() => {
+    if (designSettings) {
+      setInternalDesignSettings(designSettings);
+    } else if (!internalDesignSettings) {
+      void getDesignSettings(siteId).then(result => {
+        setInternalDesignSettings(result);
+      });
+    }
+  }, [designSettings, internalDesignSettings, siteId]);
+  useEffect(() => {
+    if (paragraphFormat) {
+      setInternalParagraphFormat(paragraphFormat);
+    } else if (!internalParagraphFormat) {
+      void getParagraphFormat(siteId).then(result => {
+        setInternalParagraphFormat(result);
+      });
+    }
+  }, [internalParagraphFormat, paragraphFormat, siteId]);
+  useEffect(() => {
+    let newColors = {};
+    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 (!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] = 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
+        } = 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 = getFontSize();
+    } else {
+      newTheme = theme;
+    }
+    setInternalTheme(newTheme);
+    setInternalColors(newColors);
+  }, [color, colorMode, colors, internalColor, internalColorMode, internalDesignSettings, internalParagraphFormat, secondaryColor, theme]);
+  const contextValue = useMemo(() => {
+    if (internalDesignSettings && internalParagraphFormat) {
+      return {
+        paragraphFormat: internalParagraphFormat,
+        designSettings: internalDesignSettings,
+        colors: internalColors,
+        theme: internalTheme
+      };
+    }
+    return undefined;
+  }, [internalColors, 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("div", {
+    className: "color-scheme-provider",
+    style: {
+      ...internalColors,
+      ...cssVariables,
+      ...style,
+      color: 'var(--chayns-color--text)'
+    }
+  }, 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","useSite","React","createContext","useContext","useEffect","useMemo","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","ColorMode","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalColors","setInternalColors","internalTheme","setInternalTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","then","result","newColors","newTheme","availableColors","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","colorResult","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 { 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":"AAAA,SAASA,qBAAqB,EAAEC,mBAAmB,EAAEC,WAAW,QAAQ,gBAAgB;AACxF,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,IACRC,aAAa,EAGbC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,MAAM,QAAQ,cAAc;AACrC,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,iBAAiB,EAAEC,kBAAkB,QAAQ,qBAAqB;AAE3E,SAASC,gBAAgB,EAAEC,WAAW,EAAEC,wBAAwB,QAAQ,kBAAkB;AAAC,IAEtFC,SAAS,0BAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAAA,OAATA,SAAS;AAAA,EAATA,SAAS,SA6Dd;AAGA,MAAMC,WAAW,GAAGR,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMS,kBAAkB,gBAAGf,aAAa,CAAsCgB,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMhB,UAAU,CAACc,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGC,IAAA,IAYpD;EAAA,IAZqD;IACvDC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,MAAM;IACNC,KAAK,GAAG,CAAC,CAAC;IACVC,eAAe;IACfC,cAAc;IACdC,KAAK;IACLC;EACJ,CAAC,GAAAX,IAAA;EACG,MAAM,CAACY,cAAc,EAAEC,iBAAiB,CAAC,GAAG5B,QAAQ,CAAQ0B,MAAM,IAAI,CAAC,CAAC,CAAC;EACzE,MAAM,CAACG,aAAa,EAAEC,gBAAgB,CAAC,GAAG9B,QAAQ,CAAQyB,KAAK,IAAI,CAAC,CAAC,CAAC;EACtE,MAAM,CAACM,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGhC,QAAQ,CAAiB,CAAC;EACtF,MAAM,CAACiC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGlC,QAAQ,CAAoB,CAAC;;EAE3F;EACA,MAAM;IAAEiB,KAAK,EAAEkB,aAAa;IAAEjB,SAAS,EAAEkB;EAAkB,CAAC,GAAG1C,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;EAE9EI,SAAS,CAAC,MAAM;IACZ,IAAI0B,cAAc,EAAE;MAChBQ,yBAAyB,CAACR,cAAc,CAAC;IAC7C,CAAC,MAAM,IAAI,CAACO,sBAAsB,EAAE;MAChC,KAAK3B,iBAAiB,CAACiB,MAAM,CAAC,CAACgB,IAAI,CAAEC,MAAM,IAAK;QAC5CN,yBAAyB,CAACM,MAAM,CAAC;MACrC,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACd,cAAc,EAAEO,sBAAsB,EAAEV,MAAM,CAAC,CAAC;EAEpDvB,SAAS,CAAC,MAAM;IACZ,IAAIyB,eAAe,EAAE;MACjBW,0BAA0B,CAACX,eAAe,CAAC;IAC/C,CAAC,MAAM,IAAI,CAACU,uBAAuB,EAAE;MACjC,KAAK5B,kBAAkB,CAACgB,MAAM,CAAC,CAACgB,IAAI,CAAEC,MAAM,IAAK;QAC7CJ,0BAA0B,CAACI,MAAM,CAAC;MACtC,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACL,uBAAuB,EAAEV,eAAe,EAAEF,MAAM,CAAC,CAAC;EAEtDvB,SAAS,CAAC,MAAM;IACZ,IAAIyC,SAAgB,GAAG,CAAC,CAAC;IACzB,IAAIC,QAAe,GAAG,CAAC,CAAC;IAExB,MAAMC,eAAe,GAAGlD,qBAAqB,CAAC,CAAC;IAE/C,IAAI,CAACmC,MAAM,IAAI,CAACD,KAAK,EAAE;MACnBgB,eAAe,CAACC,OAAO,CAAEC,SAAiB,IAAK;QAC3C,MAAMC,QAAQ,GAAGpD,mBAAmB,CAACmD,SAAS,EAAE;UAC5C1B,KAAK,EAAEA,KAAK,IAAIkB,aAAa;UAC7BjB,SAAS,EAAEA,SAAS,IAAIkB,iBAAiB;UACzChB;QACJ,CAAC,CAAC;QAEF,IAAIwB,QAAQ,EAAE;UACV,MAAMC,QAAQ,GAAGpD,WAAW,CAACmD,QAAQ,CAAC;UAEtC,IAAI,CAACnB,KAAK,EAAE;YACRe,QAAQ,CAACG,SAAS,CAAC,GAAGC,QAAQ;UAClC;UAEA,IAAI,CAAClB,MAAM,EAAE;YACTa,SAAS,CAAC,mBAAmBI,SAAS,EAAE,CAAC,GAAGC,QAAQ;UACxD;UAEA,IAAIC,QAAQ,EAAE;YACV,IAAI,CAACpB,KAAK,EAAE;cACRe,QAAQ,CAAC,GAAGG,SAAS,MAAM,CAAC,GACxB,GAAGE,QAAQ,CAACC,CAAC,KAAKD,QAAQ,CAACE,CAAC,KAAKF,QAAQ,CAACG,CAAC,EAAE;YACrD;YAEA,IAAI,CAACtB,MAAM,EAAE;cACTa,SAAS,CAAC,uBAAuBI,SAAS,EAAE,CAAC,GACzC,GAAGE,QAAQ,CAACC,CAAC,KAAKD,QAAQ,CAACE,CAAC,KAAKF,QAAQ,CAACG,CAAC,EAAE;YACrD;UACJ;QACJ;MACJ,CAAC,CAAC;IACN;IAEA,IAAItB,MAAM,EAAE;MACRa,SAAS,GAAGb,MAAM;IACtB;IAEA,IAAI,CAACD,KAAK,EAAE;MACR,QAAQP,SAAS,IAAIkB,iBAAiB;QAClC,KAAK3B,SAAS,CAACwC,KAAK;UAChBT,QAAQ,CAACtB,SAAS,GAAG,OAAO;UAC5B;QACJ,KAAKT,SAAS,CAACyC,IAAI;UACfV,QAAQ,CAACtB,SAAS,GAAG,MAAM;UAC3B;QACJ;UACIsB,QAAQ,CAACtB,SAAS,GAAG,SAAS;UAC9B;MACR;MAEA,IAAIa,sBAAsB,EAAE;QACxBoB,MAAM,CAACC,IAAI,CAACrB,sBAAsB,CAAC,CAACW,OAAO,CAAEW,GAAG,IAAK;UACjD,IAAIA,GAAG,KAAK,WAAW,EAAE;YACrBb,QAAQ,CAACa,GAAG,CAAC,GAAG/C,gBAAgB,CAACyB,sBAAsB,CAACuB,SAAS,CAAC;YAElE;UACJ;;UAEA;UACA;UACA;UACA;UACAd,QAAQ,CAACa,GAAG,CAAC,GAAGtB,sBAAsB,CAACsB,GAAG,CAAC;QAC/C,CAAC,CAAC;MACN;MAEA,IAAIpB,uBAAuB,EAAE;QACzB,MAAM;UAAEsB,WAAW;UAAEC;QAAY,CAAC,GAC9BhD,wBAAwB,CAACyB,uBAAuB,CAAC;;QAErD;QACAkB,MAAM,CAACC,IAAI,CAACG,WAAW,CAAC,CAACb,OAAO,CAAEW,GAAG,IAAK;UACtC;UACA;UACA;UACA;UACAd,SAAS,CAACc,GAAG,CAAC,GAAGE,WAAW,CAACF,GAAG,CAAC;QACrC,CAAC,CAAC;;QAEF;QACAF,MAAM,CAACC,IAAI,CAACI,WAAW,CAAC,CAACd,OAAO,CAAEW,GAAG,IAAK;UACtC;UACA;UACA;UACA;UACAb,QAAQ,CAACa,GAAG,CAAC,GAAGG,WAAW,CAACH,GAAG,CAAC;QACpC,CAAC,CAAC;MACN;MAEAb,QAAQ,CAACiB,QAAQ,GAAGlD,WAAW,CAAC,CAAC;IACrC,CAAC,MAAM;MACHiC,QAAQ,GAAGf,KAAK;IACpB;IAEAK,gBAAgB,CAACU,QAAQ,CAAC;IAC1BZ,iBAAiB,CAACW,SAAS,CAAC;EAChC,CAAC,EAAE,CACCtB,KAAK,EACLC,SAAS,EACTQ,MAAM,EACNS,aAAa,EACbC,iBAAiB,EACjBL,sBAAsB,EACtBE,uBAAuB,EACvBb,cAAc,EACdK,KAAK,CACR,CAAC;EAEF,MAAMiC,YAAiD,GAAG3D,OAAO,CAAC,MAAM;IACpE,IAAIgC,sBAAsB,IAAIE,uBAAuB,EAAE;MACnD,OAAO;QACHV,eAAe,EAAEU,uBAAuB;QACxCT,cAAc,EAAEO,sBAAsB;QACtCL,MAAM,EAAEC,cAAc;QACtBF,KAAK,EAAEI;MACX,CAAC;IACL;IAEA,OAAOjB,SAAS;EACpB,CAAC,EAAE,CAACe,cAAc,EAAEI,sBAAsB,EAAEE,uBAAuB,EAAEJ,aAAa,CAAC,CAAC;EAEpF,oBACIlC,KAAA,CAAAgE,aAAA,CAACxD,aAAa;IAACsB,KAAK,EAAEI;EAAc,gBAChClC,KAAA,CAAAgE,aAAA,CAAChD,kBAAkB,CAACiD,QAAQ;IAACC,KAAK,EAAEH;EAAa,gBAC7C/D,KAAA,CAAAgE,aAAA,CAAC1D,MAAM,qBACHN,KAAA,CAAAgE,aAAA;IACIG,GAAG,EAAC,YAAY;IAChBC,IAAI,EAAC;EAAiE,CACzE,CACG,CAAC,eACTpE,KAAA,CAAAgE,aAAA;IACIK,SAAS,EAAC,uBAAuB;IACjC1C,KAAK,EAAE;MACH,GAAGK,cAAc;MACjB,GAAGR,YAAY;MACf,GAAGG,KAAK;MACRL,KAAK,EAAE;IACX;EAAE,GAEDD,QACA,CAAC,eACNrB,KAAA,CAAAgE,aAAA,CAACjD,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAACmD,WAAW,GAAG,qBAAqB;AAEvD,eAAenD,mBAAmB","ignoreList":[]}

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

@@ -0,0 +1,351 @@
+import { useDevice } from 'chayns-api';
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, 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 Icon from '../icon/Icon';
+import ComboBoxItem from './combobox-item/ComboBoxItem';
+import { StyledComboBox, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxInput, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledComboBoxTopic, StyledMotionComboBoxBody } from './ComboBox.styles';
+const ComboBox = _ref => {
+  let {
+    direction = ComboBoxDirection.BOTTOM,
+    isDisabled = false,
+    lists,
+    maxHeight = '280px',
+    onSelect,
+    placeholder,
+    container = document.body,
+    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(0);
+  const [bodyMinWidth, setBodyMinWidth] = useState(0);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const [overflowY, setOverflowY] = useState('hidden');
+  const [portal, setPortal] = useState();
+  const [internalCoordinates, setInternalCoordinates] = useState({
+    x: 0,
+    y: 0
+  });
+  const styledComboBoxElementRef = useRef(null);
+  const contentRef = useRef(null);
+  const {
+    browser
+  } = useDevice();
+  const isTouch = getIsTouch();
+  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) {
+      const {
+        left: comboBoxLeft,
+        top: comboBoxTop,
+        height
+      } = styledComboBoxElementRef.current.getBoundingClientRect();
+      const {
+        left: containerLeft,
+        top: containerTop
+      } = container.getBoundingClientRect();
+      const x = comboBoxLeft - containerLeft + container.scrollLeft;
+      const y = comboBoxTop - containerTop + container.scrollTop;
+      setInternalCoordinates({
+        x,
+        y: direction === ComboBoxDirection.TOP ? y : y + height
+      });
+      setIsAnimating(true);
+    }
+  }, [container, 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 shouldPreventSelection = onSelect(itemToSelect) === false;
+      if (shouldPreventSelection) 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 = allItems.some(_ref3 => {
+      let {
+        imageUrl
+      } = _ref3;
+      return imageUrl;
+    });
+    const hasIcon = allItems.some(_ref4 => {
+      let {
+        icons
+      } = _ref4;
+      return 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
+
+    const baseWidth = 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 = 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
+   */
+  useEffect(() => {
+    setIsAnimating(false);
+    setInternalSelectedItem(selectedItem);
+  }, [selectedItem]);
+  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]);
+
+  /**
+   * This function opens the content of the combobox
+   */
+  const handleHeaderClick = useCallback(() => {
+    if (!isDisabled) {
+      if (isAnimating) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
+    }
+  }, [handleClose, handleOpen, isAnimating, isDisabled]);
+  const comboBoxGroups = useMemo(() => lists.map(_ref5 => {
+    let {
+      groupName,
+      list
+    } = _ref5;
+    return /*#__PURE__*/React.createElement("div", {
+      key: groupName ?? 'default-group'
+    }, groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, groupName), 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,
+      imageUrl: item.imageUrl,
+      isDisabled: item.isDisabled,
+      isSelected: selectedItem ? item.value === selectedItem.value : false,
+      key: item.value,
+      onSelect: handleSetSelectedItem,
+      rightElement: item.rightElement,
+      shouldShowBigImage: shouldShowBigImage,
+      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(() => {
+    let styles = {
+      left: internalCoordinates.x,
+      top: internalCoordinates.y
+    };
+    if (direction === ComboBoxDirection.TOP) {
+      styles = {
+        ...styles,
+        transform: 'translateY(-100%)'
+      };
+    }
+    return styles;
+  }, [direction, internalCoordinates.x, internalCoordinates.y]);
+  useEffect(() => {
+    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,
+      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)), container));
+  }, [bodyMinWidth, bodyStyles, browser?.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
+    ref: styledComboBoxElementRef,
+    $shouldUseFullWidth: shouldUseFullWidth,
+    $minWidth: minWidth
+  }, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
+    $direction: direction,
+    onClick: handleHeaderClick,
+    $isOpen: isAnimating,
+    $isTouch: isTouch,
+    $isDisabled: isDisabled
+  }, typeof inputValue === 'string' ? /*#__PURE__*/React.createElement(StyledComboBoxInput, {
+    disabled: isDisabled,
+    value: inputValue,
+    onChange: onInputChange,
+    onBlur: onInputBlur,
+    onFocus: onInputFocus,
+    placeholder: placeholderText
+  }) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
+    $shouldReduceOpacity: !selectedItem && !internalSelectedItem
+  }, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
+    src: placeholderImageUrl,
+    shouldShowRoundImage: shouldShowRoundImage
+  }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
+    icons: placeholderIcon
+  }), placeholderText, internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-chevron-down']
+  }))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, onInputFocus, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
+};
+ComboBox.displayName = 'ComboBox';
+export default ComboBox;
+//# sourceMappingURL=ComboBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","_ref3","imageUrl","hasIcon","_ref4","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","baseWidth","text","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","item","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","disabled","onChange","onBlur","onFocus","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + container.scrollLeft;\n            const y = comboBoxTop - containerTop + container.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [container, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = allItems.some(({ imageUrl }) => imageUrl);\n        const hasIcon = allItems.some(({ icons }) => icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n        ]);\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        container,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    {typeof inputValue === 'string' ? (\n                        <StyledComboBoxInput\n                            disabled={isDisabled}\n                            value={inputValue}\n                            onChange={onInputChange}\n                            onBlur={onInputBlur}\n                            onFocus={onInputFocus}\n                            placeholder={placeholderText}\n                        />\n                    ) : (\n                        <StyledComboBoxPlaceholder\n                            $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                        >\n                            {placeholderImageUrl && (\n                                <StyledComboBoxPlaceholderImage\n                                    src={placeholderImageUrl}\n                                    shouldShowRoundImage={shouldShowRoundImage}\n                                />\n                            )}\n                            {placeholderIcon && <Icon icons={placeholderIcon} />}\n                            {placeholderText}\n                            {internalSelectedItem &&\n                                internalSelectedItem.suffixElement &&\n                                internalSelectedItem.suffixElement}\n                        </StyledComboBoxPlaceholder>\n                    )}\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            shouldUseFullWidth,\n            minWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}