@chayns-components/core 5.0.0-beta.474 → 5.0.0-beta.477

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

@@ -2141,7 +2141,7 @@ export declare const StyledMotionRightInput: import("styled-components").IStyled
     width?: string | number | undefined;
     accept?: string | undefined;
     alt?: string | undefined;
-    autoComplete?: string | undefined;
+    autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     checked?: boolean | undefined;
     enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;

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

@@ -1,6 +1,6 @@
 import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
-import { getSite } from 'chayns-api';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useSite } from 'chayns-api';
+import React, { useEffect, useState } from 'react';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { getDesignSettings } from '../../api/theme/get';
 import { convertIconStyle, generateFontFaces } from '../../utils/font';
@@ -11,13 +11,12 @@ var ColorMode = /*#__PURE__*/function (ColorMode) {
   return ColorMode;
 }(ColorMode || {}); // ToDo remove type after the framer-motion bug is Fixed
 const GlobalStyle = createGlobalStyle`
-  ${generateFontFaces}
-
-  .ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    ${generateFontFaces}
+    .ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 `;
 const ColorSchemeProvider = _ref => {
   let {
@@ -32,6 +31,10 @@ const ColorSchemeProvider = _ref => {
   const [colors, setColors] = useState({});
   const [theme, setTheme] = useState({});
   const [internalDesignSettings, setInternalDesignSettings] = useState();
+  const {
+    color: internalColor,
+    colorMode: internalColorMode
+  } = useSite();
   useEffect(() => {
     if (designSettings) {
       setInternalDesignSettings(designSettings);
@@ -41,33 +44,14 @@ const ColorSchemeProvider = _ref => {
       setInternalDesignSettings(result);
     });
   }, [designSettings]);
-  const site = getSite();
-  const internalColorMode = useMemo(() => {
-    if (colorMode) {
-      return colorMode;
-    }
-    if (!site || !site.colorMode) {
-      return ColorMode.Classic;
-    }
-    return site.colorMode;
-  }, [colorMode, site]);
-  const internalColor = useMemo(() => {
-    if (color) {
-      return color;
-    }
-    if (!site || !site.color) {
-      return '#005EB8';
-    }
-    return site.color;
-  }, [color, site]);
   useEffect(() => {
     const availableColors = getAvailableColorList();
     const newColors = {};
     const newTheme = {};
     availableColors.forEach(colorName => {
       const hexColor = getColorFromPalette(colorName, {
-        color: internalColor,
-        colorMode: internalColorMode,
+        color: color ?? internalColor,
+        colorMode: colorMode ?? internalColorMode,
         secondaryColor
       });
       if (hexColor) {
@@ -80,7 +64,7 @@ const ColorSchemeProvider = _ref => {
         }
       }
     });
-    switch (colorMode) {
+    switch (colorMode ?? internalColorMode) {
       case ColorMode.Light:
         newTheme.colorMode = 'light';
         break;
@@ -107,7 +91,7 @@ const ColorSchemeProvider = _ref => {
     }
     setTheme(newTheme);
     setColors(newColors);
-  }, [colorMode, internalColor, internalColorMode, internalDesignSettings, secondaryColor]);
+  }, [color, colorMode, internalColor, internalColorMode, internalDesignSettings, secondaryColor]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","getSite","React","useEffect","useMemo","useState","createGlobalStyle","ThemeProvider","getDesignSettings","convertIconStyle","generateFontFaces","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","then","result","site","internalColorMode","Classic","internalColor","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","createElement","displayName"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { getSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useMemo, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings } from '../../api/theme/get';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, generateFontFaces } from '../../utils/font';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * 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 secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\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  ${generateFontFaces}\n\n  .ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n    designSettings,\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [theme, setTheme] = useState<Theme>({});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n\n            return;\n        }\n\n        void getDesignSettings().then((result) => {\n            setInternalDesignSettings(result);\n        });\n    }, [designSettings]);\n\n    const site = getSite();\n\n    const internalColorMode = useMemo(() => {\n        if (colorMode) {\n            return colorMode;\n        }\n\n        if (!site || !site.colorMode) {\n            return ColorMode.Classic;\n        }\n\n        return site.colorMode;\n    }, [colorMode, site]);\n\n    const internalColor = useMemo(() => {\n        if (color) {\n            return color;\n        }\n\n        if (!site || !site.color) {\n            return '#005EB8';\n        }\n\n        return site.color;\n    }, [color, site]);\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newTheme: Theme = {};\n\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color: internalColor,\n                colorMode: internalColorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newTheme[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[`--chayns-color-rgb--${colorName}`] =\n                        `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\n        switch (colorMode) {\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        setTheme(newTheme);\n        setColors(newColors);\n    }, [colorMode, internalColor, internalColorMode, internalDesignSettings, secondaryColor]);\n\n    return (\n        <ThemeProvider theme={theme}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\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,IAAmBC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC1E,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,kBAAkB;AAAC,IAElEC,SAAS,0BAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAAA,OAATA,SAAS;AAAA,EAATA,SAAS,SA6Cd;AAGA,MAAMC,WAAW,GAAGN,iBAAkB;AACtC,IAAII,iBAAkB;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMG,mBAAiD,GAAGC,IAAA,IAQpD;EAAA,IARqD;IACvDC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,KAAK,GAAG,CAAC,CAAC;IACVC;EACJ,CAAC,GAAAP,IAAA;EACG,MAAM,CAACQ,MAAM,EAAEC,SAAS,CAAC,GAAGlB,QAAQ,CAAQ,CAAC,CAAC,CAAC;EAC/C,MAAM,CAACmB,KAAK,EAAEC,QAAQ,CAAC,GAAGpB,QAAQ,CAAQ,CAAC,CAAC,CAAC;EAC7C,MAAM,CAACqB,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGtB,QAAQ,CAAiB,CAAC;EAEtFF,SAAS,CAAC,MAAM;IACZ,IAAIkB,cAAc,EAAE;MAChBM,yBAAyB,CAACN,cAAc,CAAC;MAEzC;IACJ;IAEA,KAAKb,iBAAiB,CAAC,CAAC,CAACoB,IAAI,CAAEC,MAAM,IAAK;MACtCF,yBAAyB,CAACE,MAAM,CAAC;IACrC,CAAC,CAAC;EACN,CAAC,EAAE,CAACR,cAAc,CAAC,CAAC;EAEpB,MAAMS,IAAI,GAAG7B,OAAO,CAAC,CAAC;EAEtB,MAAM8B,iBAAiB,GAAG3B,OAAO,CAAC,MAAM;IACpC,IAAIa,SAAS,EAAE;MACX,OAAOA,SAAS;IACpB;IAEA,IAAI,CAACa,IAAI,IAAI,CAACA,IAAI,CAACb,SAAS,EAAE;MAC1B,OAAON,SAAS,CAACqB,OAAO;IAC5B;IAEA,OAAOF,IAAI,CAACb,SAAS;EACzB,CAAC,EAAE,CAACA,SAAS,EAAEa,IAAI,CAAC,CAAC;EAErB,MAAMG,aAAa,GAAG7B,OAAO,CAAC,MAAM;IAChC,IAAIY,KAAK,EAAE;MACP,OAAOA,KAAK;IAChB;IAEA,IAAI,CAACc,IAAI,IAAI,CAACA,IAAI,CAACd,KAAK,EAAE;MACtB,OAAO,SAAS;IACpB;IAEA,OAAOc,IAAI,CAACd,KAAK;EACrB,CAAC,EAAE,CAACA,KAAK,EAAEc,IAAI,CAAC,CAAC;EAEjB3B,SAAS,CAAC,MAAM;IACZ,MAAM+B,eAAe,GAAGpC,qBAAqB,CAAC,CAAC;IAE/C,MAAMqC,SAAgB,GAAG,CAAC,CAAC;IAC3B,MAAMC,QAAe,GAAG,CAAC,CAAC;IAE1BF,eAAe,CAACG,OAAO,CAAEC,SAAiB,IAAK;MAC3C,MAAMC,QAAQ,GAAGxC,mBAAmB,CAACuC,SAAS,EAAE;QAC5CtB,KAAK,EAAEiB,aAAa;QACpBhB,SAAS,EAAEc,iBAAiB;QAC5BZ;MACJ,CAAC,CAAC;MAEF,IAAIoB,QAAQ,EAAE;QACV,MAAMC,QAAQ,GAAGxC,WAAW,CAACuC,QAAQ,CAAC;QAEtCJ,SAAS,CAAE,mBAAkBG,SAAU,EAAC,CAAC,GAAGC,QAAQ;QACpDH,QAAQ,CAACE,SAAS,CAAC,GAAGC,QAAQ;QAE9B,IAAIC,QAAQ,EAAE;UACVL,SAAS,CAAE,uBAAsBG,SAAU,EAAC,CAAC,GACxC,GAAEE,QAAQ,CAACC,CAAE,KAAID,QAAQ,CAACE,CAAE,KAAIF,QAAQ,CAACG,CAAE,EAAC;UACjDP,QAAQ,CAAE,GAAEE,SAAU,MAAK,CAAC,GAAI,GAAEE,QAAQ,CAACC,CAAE,KAAID,QAAQ,CAACE,CAAE,KAAIF,QAAQ,CAACG,CAAE,EAAC;QAChF;MACJ;IACJ,CAAC,CAAC;IAEF,QAAQ1B,SAAS;MACb,KAAKN,SAAS,CAACiC,KAAK;QAChBR,QAAQ,CAACnB,SAAS,GAAG,OAAO;QAC5B;MACJ,KAAKN,SAAS,CAACkC,IAAI;QACfT,QAAQ,CAACnB,SAAS,GAAG,MAAM;QAC3B;MACJ;QACImB,QAAQ,CAACnB,SAAS,GAAG,SAAS;QAC9B;IACR;IAEA,IAAIS,sBAAsB,EAAE;MACxBoB,MAAM,CAACC,IAAI,CAACrB,sBAAsB,CAAC,CAACW,OAAO,CAAEW,GAAG,IAAK;QACjD,IAAIA,GAAG,KAAK,WAAW,EAAE;UACrBZ,QAAQ,CAACY,GAAG,CAAC,GAAGvC,gBAAgB,CAACiB,sBAAsB,CAACuB,SAAS,CAAC;UAElE;QACJ;;QAEA;QACA;QACA;QACA;QACAb,QAAQ,CAACY,GAAG,CAAC,GAAGtB,sBAAsB,CAACsB,GAAG,CAAC;MAC/C,CAAC,CAAC;IACN;IAEAvB,QAAQ,CAACW,QAAQ,CAAC;IAClBb,SAAS,CAACY,SAAS,CAAC;EACxB,CAAC,EAAE,CAAClB,SAAS,EAAEgB,aAAa,EAAEF,iBAAiB,EAAEL,sBAAsB,EAAEP,cAAc,CAAC,CAAC;EAEzF,oBACIjB,KAAA,CAAAgD,aAAA,CAAC3C,aAAa;IAACiB,KAAK,EAAEA;EAAM,gBACxBtB,KAAA,CAAAgD,aAAA;IAAK9B,KAAK,EAAE;MAAE,GAAGE,MAAM;MAAE,GAAGJ,YAAY;MAAE,GAAGE;IAAM;EAAE,GAAEL,QAAc,CAAC,eACtEb,KAAA,CAAAgD,aAAA,CAACtC,WAAW,MAAE,CACH,CAAC;AAExB,CAAC;AAEDC,mBAAmB,CAACsC,WAAW,GAAG,qBAAqB;AAEvD,eAAetC,mBAAmB"}
+{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","useSite","React","useEffect","useState","createGlobalStyle","ThemeProvider","getDesignSettings","convertIconStyle","generateFontFaces","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalColor","internalColorMode","then","result","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","createElement","displayName"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings } from '../../api/theme/get';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, generateFontFaces } from '../../utils/font';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * 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 secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\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    ${generateFontFaces}\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n    designSettings,\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [theme, setTheme] = useState<Theme>({});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n\n            return;\n        }\n\n        void getDesignSettings().then((result) => {\n            setInternalDesignSettings(result);\n        });\n    }, [designSettings]);\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newTheme: Theme = {};\n\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                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newTheme[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[`--chayns-color-rgb--${colorName}`] =\n                        `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\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        setTheme(newTheme);\n        setColors(newColors);\n    }, [\n        color,\n        colorMode,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        secondaryColor,\n    ]);\n\n    return (\n        <ThemeProvider theme={theme}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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"}

package/lib/components/popup/popup-content/PopupContent.js

@@ -1,5 +1,5 @@
+import { useSite } from 'chayns-api';
 import React from 'react';
-import { useColorMode } from '../../../hooks/colorMode';
 import { PopupAlignment } from '../../../types/popup';
 import { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';
 const PopupContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -9,7 +9,9 @@ const PopupContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     content,
     onMouseLeave
   } = _ref;
-  const colorMode = useColorMode();
+  const {
+    colorMode
+  } = useSite();
   const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;
   const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;
   const isTopRightAlignment = alignment === PopupAlignment.TopRight;

package/lib/components/popup/popup-content/PopupContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContent.js","names":["React","useColorMode","PopupAlignment","StyledMotionPopupContent","StyledPopupContentInner","PopupContent","forwardRef","_ref","ref","alignment","coordinates","content","onMouseLeave","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","displayName"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import React, { ReactNode, type MouseEventHandler } from 'react';\nimport { useColorMode } from '../../../hooks/colorMode';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    coordinates: PopupCoordinates;\n    content: ReactNode;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, coordinates, content, onMouseLeave }, ref) => {\n        const colorMode = useColorMode();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContent\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentInner>{content}</StyledPopupContentInner>\n            </StyledMotionPopupContent>\n        );\n    },\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":"AAAA,OAAOA,KAAK,MAA6C,OAAO;AAChE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SAASC,wBAAwB,EAAEC,uBAAuB,QAAQ,uBAAuB;AASzF,MAAMC,YAAY,gBAAGL,KAAK,CAACM,UAAU,CACjC,CAAAC,IAAA,EAAoDC,GAAG,KAAK;EAAA,IAA3D;IAAEC,SAAS;IAAEC,WAAW;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAL,IAAA;EAC9C,MAAMM,SAAS,GAAGZ,YAAY,CAAC,CAAC;EAEhC,MAAMa,qBAAqB,GAAGL,SAAS,KAAKP,cAAc,CAACa,UAAU;EACrE,MAAMC,kBAAkB,GAAGP,SAAS,KAAKP,cAAc,CAACe,OAAO;EAC/D,MAAMC,mBAAmB,GAAGT,SAAS,KAAKP,cAAc,CAACiB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIlB,KAAA,CAAAyB,aAAA,CAACtB,wBAAwB;IACrBuB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CQ,SAAS,EAAEvB,SAAU;IACrBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBI,YAAY,EAAEA,YAAa;IAC3BqB,KAAK,EAAE;MAAEC,IAAI,EAAExB,WAAW,CAACyB,CAAC;MAAEC,GAAG,EAAE1B,WAAW,CAACkB;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEZ,CAAC,GAAG;MAAM,CAAC,GAAAY,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCK,CAAE;AACnC,iBAAiB;IAAA;EAAC,gBAEF5B,KAAA,CAAAyB,aAAA,CAACrB,uBAAuB,QAAEO,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDN,YAAY,CAACoC,WAAW,GAAG,cAAc;AAEzC,eAAepC,YAAY"}
+{"version":3,"file":"PopupContent.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContent","StyledPopupContentInner","PopupContent","forwardRef","_ref","ref","alignment","coordinates","content","onMouseLeave","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","displayName"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    coordinates: PopupCoordinates;\n    content: ReactNode;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, coordinates, content, onMouseLeave }, ref) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContent\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentInner>{content}</StyledPopupContentInner>\n            </StyledMotionPopupContent>\n        );\n    },\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SAASC,wBAAwB,EAAEC,uBAAuB,QAAQ,uBAAuB;AASzF,MAAMC,YAAY,gBAAGJ,KAAK,CAACK,UAAU,CACjC,CAAAC,IAAA,EAAoDC,GAAG,KAAK;EAAA,IAA3D;IAAEC,SAAS;IAAEC,WAAW;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAL,IAAA;EAC9C,MAAM;IAAEM;EAAU,CAAC,GAAGb,OAAO,CAAC,CAAC;EAE/B,MAAMc,qBAAqB,GAAGL,SAAS,KAAKP,cAAc,CAACa,UAAU;EACrE,MAAMC,kBAAkB,GAAGP,SAAS,KAAKP,cAAc,CAACe,OAAO;EAC/D,MAAMC,mBAAmB,GAAGT,SAAS,KAAKP,cAAc,CAACiB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIjB,KAAA,CAAAwB,aAAA,CAACtB,wBAAwB;IACrBuB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CQ,SAAS,EAAEvB,SAAU;IACrBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBI,YAAY,EAAEA,YAAa;IAC3BqB,KAAK,EAAE;MAAEC,IAAI,EAAExB,WAAW,CAACyB,CAAC;MAAEC,GAAG,EAAE1B,WAAW,CAACkB;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEZ,CAAC,GAAG;MAAM,CAAC,GAAAY,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCK,CAAE;AACnC,iBAAiB;IAAA;EAAC,gBAEF3B,KAAA,CAAAwB,aAAA,CAACrB,uBAAuB,QAAEO,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDN,YAAY,CAACoC,WAAW,GAAG,cAAc;AAEzC,eAAepC,YAAY"}

package/lib/components/search-box/SearchBox.d.ts

@@ -1,5 +1,8 @@
 import { ChangeEventHandler, FC, FocusEventHandler } from 'react';
 import type { ISearchBoxItem } from '../../types/searchBox';
+export type SearchBoxRef = {
+    clear: VoidFunction;
+};
 export type SearchBoxProps = {
     /**
      * A list of items that can be searched.

package/lib/components/search-box/SearchBox.js

@@ -1,12 +1,12 @@
 import { getDevice } from 'chayns-api';
 import { AnimatePresence } from 'framer-motion';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { calculateContentHeight } from '../../utils/calculate';
 import { searchList } from '../../utils/searchBox';
 import Input from '../input/Input';
 import SearchBoxItem from './search-box-item/SearchBoxItem';
 import { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';
-const SearchBox = _ref => {
+const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     placeholder,
     list,
@@ -85,6 +85,16 @@ const SearchBox = _ref => {
     }
   }, [list, selectedId]);
 
+  /**
+   * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value
+   * should not be reset if the list changes and the selectedId is still undefined.
+   */
+  useEffect(() => {
+    if (!selectedId) {
+      setValue('');
+    }
+  }, [selectedId]);
+
   /**
    * This function sets the items on focus if shouldShowContentOnEmptyInput
    */
@@ -206,6 +216,9 @@ const SearchBox = _ref => {
       setMatchingItems([]);
     }
   }, []);
+  useImperativeHandle(ref, () => ({
+    clear: () => setValue('')
+  }), []);
   useEffect(() => {
     document.addEventListener('keydown', handleKeyPress);
     return () => {
@@ -248,7 +261,7 @@ const SearchBox = _ref => {
   }, /*#__PURE__*/React.createElement("div", {
     ref: contentRef
   }, content)))), [browser?.name, content, handleBlur, handleChange, handleFocus, height, isAnimating, placeholder, value, width]);
-};
+});
 SearchBox.displayName = 'SearchBox';
 export default SearchBox;
 //# sourceMappingURL=SearchBox.js.map

package/lib/components/search-box/SearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","items","searchString","handleChange","searchedItems","length","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","ref","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = ({\n    placeholder,\n    list,\n    onChange,\n    onBlur,\n    onSelect,\n    selectedId,\n    shouldShowRoundImage,\n    shouldShowContentOnEmptyInput = true,\n}) => {\n    const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n    const [value, setValue] = useState('');\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [height, setHeight] = useState<number>(0);\n    const [width, setWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n    const boxRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const { browser } = getDevice();\n\n    /**\n     * This function closes the list of items\n     */\n    const handleOutsideClick = useCallback(\n        (event: MouseEvent) => {\n            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [boxRef],\n    );\n\n    /**\n     * This hook listens for clicks\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleOutsideClick);\n\n        return () => {\n            document.removeEventListener('click', handleOutsideClick);\n        };\n    }, [handleOutsideClick, boxRef]);\n\n    /**\n     * This hook calculates the height\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n    }, [list, placeholder]);\n\n    /**\n     * This hook calculates the width\n     */\n    useEffect(() => {\n        const input = document.getElementById('search_box_input');\n\n        if (input) {\n            setWidth(input.offsetWidth);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (selectedId) {\n            const selectedItem = list.find(({ id }) => id === selectedId);\n\n            if (selectedItem) {\n                setValue(selectedItem.text);\n            }\n        }\n    }, [list, selectedId]);\n\n    /**\n     * This function sets the items on focus if shouldShowContentOnEmptyInput\n     */\n    const handleFocus = useCallback(() => {\n        if (shouldShowContentOnEmptyInput) {\n            setMatchingItems(searchList({ items: list, searchString: value }));\n            setIsAnimating(true);\n        }\n    }, [list, shouldShowContentOnEmptyInput, value]);\n\n    useEffect(() => {\n        if (list) {\n            setMatchingItems(searchList({ items: list, searchString: value }));\n        }\n    }, [list, value]);\n\n    /**\n     * This function handles changes of the input\n     */\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n            if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                setMatchingItems([]);\n            } else {\n                setMatchingItems(searchedItems);\n                setIsAnimating(searchedItems.length !== 0);\n            }\n\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange, shouldShowContentOnEmptyInput],\n    );\n\n    /**\n     * This function handles the blur event of the input\n     */\n    const handleBlur = useCallback(\n        (event: FocusEvent<HTMLInputElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n        },\n        [onBlur],\n    );\n\n    /**\n     * This function handles the item selection\n     */\n    const handleSelect = useCallback(\n        (item: ISearchBoxItem) => {\n            setValue(item.text);\n            setIsAnimating(false);\n\n            if (typeof onSelect === 'function') {\n                onSelect(item);\n            }\n        },\n        [onSelect],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n        matchingItems.forEach(({ id, text, imageUrl }) => {\n            items.push(\n                <SearchBoxItem\n                    key={id}\n                    text={text}\n                    imageUrl={imageUrl}\n                    id={id}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                    onSelect={handleSelect}\n                />,\n            );\n        });\n\n        return items;\n    }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\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, textContent } = element;\n\n                handleSelect({ id: id.replace('search-box-item__', ''), text: textContent ?? '' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.keyCode === 27) {\n            setMatchingItems([]);\n        }\n    }, []);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyPress);\n\n        return () => {\n            document.addEventListener('keydown', handleKeyPress);\n        };\n    }, [handleKeyPress]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBox ref={boxRef}>\n                <div id=\"search_box_input\">\n                    <Input\n                        ref={inputRef}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        placeholder={placeholder}\n                        value={value}\n                    />\n                </div>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchBoxBody\n                        $browser={browser?.name}\n                        key=\"content\"\n                        $height={height}\n                        $width={width}\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={\n                            isAnimating\n                                ? { height: 'fit-content', opacity: 1 }\n                                : { height: 0, opacity: 0 }\n                        }\n                        transition={{\n                            duration: 0.2,\n                            type: 'tween',\n                        }}\n                    >\n                        <div ref={contentRef}>{content}</div>\n                    </StyledMotionSearchBoxBody>\n                </AnimatePresence>\n            </StyledSearchBox>\n        ),\n        [\n            browser?.name,\n            content,\n            handleBlur,\n            handleChange,\n            handleFocus,\n            height,\n            isAnimating,\n            placeholder,\n            value,\n            width,\n        ],\n    );\n};\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","items","searchString","handleChange","searchedItems","length","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            list,\n            onChange,\n            onBlur,\n            onSelect,\n            selectedId,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n        },\n        ref,\n    ) => {\n        const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n        const [value, setValue] = useState('');\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [height, setHeight] = useState<number>(0);\n        const [width, setWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const { browser } = getDevice();\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                    setIsAnimating(false);\n                }\n            },\n            [boxRef],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n            };\n        }, [handleOutsideClick, boxRef]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray = list.map(({ text }) => text);\n\n            setHeight(calculateContentHeight(textArray));\n        }, [list, placeholder]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            if (input) {\n                setWidth(input.offsetWidth);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                const selectedItem = list.find(({ id }) => id === selectedId);\n\n                if (selectedItem) {\n                    setValue(selectedItem.text);\n                }\n            }\n        }, [list, selectedId]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\n                setValue('');\n            }\n        }, [selectedId]);\n\n        /**\n         * This function sets the items on focus if shouldShowContentOnEmptyInput\n         */\n        const handleFocus = useCallback(() => {\n            if (shouldShowContentOnEmptyInput) {\n                setMatchingItems(searchList({ items: list, searchString: value }));\n                setIsAnimating(true);\n            }\n        }, [list, shouldShowContentOnEmptyInput, value]);\n\n        useEffect(() => {\n            if (list) {\n                setMatchingItems(searchList({ items: list, searchString: value }));\n            }\n        }, [list, value]);\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n                if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                    setMatchingItems([]);\n                } else {\n                    setMatchingItems(searchedItems);\n                    setIsAnimating(searchedItems.length !== 0);\n                }\n\n                setValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [list, onChange, shouldShowContentOnEmptyInput],\n        );\n\n        /**\n         * This function handles the blur event of the input\n         */\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                if (typeof onBlur === 'function') {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        /**\n         * This function handles the item selection\n         */\n        const handleSelect = useCallback(\n            (item: ISearchBoxItem) => {\n                setValue(item.text);\n                setIsAnimating(false);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(item);\n                }\n            },\n            [onSelect],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n            matchingItems.forEach(({ id, text, imageUrl }) => {\n                items.push(\n                    <SearchBoxItem\n                        key={id}\n                        text={text}\n                        imageUrl={imageUrl}\n                        id={id}\n                        shouldShowRoundImage={shouldShowRoundImage}\n                        onSelect={handleSelect}\n                    />,\n                );\n            });\n\n            return items;\n        }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\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 +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      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, textContent } = element;\n\n                    handleSelect({\n                        id: id.replace('search-box-item__', ''),\n                        text: textContent ?? '',\n                    });\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [focusedIndex, handleSelect]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        return useMemo(\n            () => (\n                <StyledSearchBox ref={boxRef}>\n                    <div id=\"search_box_input\">\n                        <Input\n                            ref={inputRef}\n                            onChange={handleChange}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            placeholder={placeholder}\n                            value={value}\n                        />\n                    </div>\n                    <AnimatePresence initial={false}>\n                        <StyledMotionSearchBoxBody\n                            $browser={browser?.name}\n                            key=\"content\"\n                            $height={height}\n                            $width={width}\n                            initial={{ height: 0, opacity: 0 }}\n                            animate={\n                                isAnimating\n                                    ? { height: 'fit-content', opacity: 1 }\n                                    : { height: 0, opacity: 0 }\n                            }\n                            transition={{\n                                duration: 0.2,\n                                type: 'tween',\n                            }}\n                        >\n                            <div ref={contentRef}>{content}</div>\n                        </StyledMotionSearchBoxBody>\n                    </AnimatePresence>\n                </StyledSearchBox>\n            ),\n            [\n                browser?.name,\n                content,\n                handleBlur,\n                handleChange,\n                handleFocus,\n                height,\n                isAnimating,\n                placeholder,\n                value,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.474",
+    "version": "5.0.0-beta.477",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -45,7 +45,7 @@
         "@babel/preset-env": "^7.23.9",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
-        "@types/react": "^18.2.55",
+        "@types/react": "^18.2.57",
         "@types/react-dom": "^18.2.19",
         "@types/styled-components": "^5.1.34",
         "@types/uuid": "^9.0.8",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b8c5e95f8481b60e57a52351def0ab8d877dfd7d"
+    "gitHead": "b79b3a0bf23958a78779edcf4c398639c7a12727"
 }

package/lib/hooks/colorMode.d.ts

@@ -1,2 +0,0 @@
-import { type ColorMode } from 'chayns-api';
-export declare const useColorMode: () => ColorMode;

package/lib/hooks/colorMode.js

@@ -1,13 +0,0 @@
-import { useSite } from 'chayns-api';
-import { useEffect, useState } from 'react';
-export const useColorMode = () => {
-  const [colorMode, setColorMode] = useState(0);
-  const site = useSite();
-  useEffect(() => {
-    if (site.colorMode) {
-      setColorMode(site.colorMode);
-    }
-  }, [site.colorMode]);
-  return colorMode;
-};
-//# sourceMappingURL=colorMode.js.map

package/lib/hooks/colorMode.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colorMode.js","names":["useSite","useEffect","useState","useColorMode","colorMode","setColorMode","site"],"sources":["../../src/hooks/colorMode.ts"],"sourcesContent":["import { useSite, type ColorMode } from 'chayns-api';\nimport { useEffect, useState } from 'react';\n\nexport const useColorMode = (): ColorMode => {\n    const [colorMode, setColorMode] = useState<ColorMode>(0);\n\n    const site = useSite();\n\n    useEffect(() => {\n        if (site.colorMode) {\n            setColorMode(site.colorMode);\n        }\n    }, [site.colorMode]);\n\n    return colorMode;\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAwB,YAAY;AACpD,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAiB;EACzC,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGH,QAAQ,CAAY,CAAC,CAAC;EAExD,MAAMI,IAAI,GAAGN,OAAO,CAAC,CAAC;EAEtBC,SAAS,CAAC,MAAM;IACZ,IAAIK,IAAI,CAACF,SAAS,EAAE;MAChBC,YAAY,CAACC,IAAI,CAACF,SAAS,CAAC;IAChC;EACJ,CAAC,EAAE,CAACE,IAAI,CAACF,SAAS,CAAC,CAAC;EAEpB,OAAOA,SAAS;AACpB,CAAC"}