npm - @chayns-components/core - Versions diffs - 5.0.0-beta.710 → 5.0.0-beta.713 - Mend

@chayns-components/core 5.0.0-beta.710 → 5.0.0-beta.713

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

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

@@ -139,7 +139,8 @@ const ColorSchemeProvider = ({
     style: {
       ...colors,
       ...cssVariables,
-      ...style
+      ...style,
+      color: 'var(--chayns-color--text)'
     }
   }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","useState","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","useEffect","getDesignSettings","then","result","getParagraphFormat","availableColors","getAvailableColorList","newColors","newTheme","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","Light","Dark","keys","key","convertIconStyle","iconStyle","colorResult","themeResult","getHeadlineColorSelector","fontSize","getFontSize","createElement","ThemeProvider","Helmet","rel","href","displayName","_default","exports"],"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 { 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\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 .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 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\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n\n void getParagraphFormat().then((result) => {\n setInternalParagraphFormat(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 if (internalParagraphFormat) {\n const { colorResult, themeResult } = 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\n setTheme(newTheme);\n setColors(newColors);\n }, [\n color,\n colorMode,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n ]);\n\n return (\n <ThemeProvider theme={theme}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\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,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AACA,IAAAM,IAAA,GAAAN,OAAA;AAEA,IAAAO,KAAA,GAAAP,OAAA;AAA2F,SAAAQ,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,IAEtFW,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,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,YAAY,GAAG,CAAC,CAAC;EACjBC,cAAc;EACdC,KAAK,GAAG,CAAC,CAAC;EACVC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAQ,CAAC,CAAC,CAAC;EAC/C,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAF,eAAQ,EAAQ,CAAC,CAAC,CAAC;EAC7C,MAAM,CAACG,sBAAsB,EAAEC,yBAAyB,CAAC,GAAG,IAAAJ,eAAQ,EAAiB,CAAC;EACtF,MAAM,CAACK,uBAAuB,EAAEC,0BAA0B,CAAC,GAAG,IAAAN,eAAQ,EAAoB,CAAC;;EAE3F;EACA,MAAM;IAAER,KAAK,EAAEe,aAAa;IAAEd,SAAS,EAAEe;EAAkB,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC,IAAI,CAAC,CAAC;EAE9E,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIb,cAAc,EAAE;MAChBO,yBAAyB,CAACP,cAAc,CAAC;MAEzC;IACJ;IAEA,KAAK,IAAAc,sBAAiB,EAAC,CAAC,CAACC,IAAI,CAAEC,MAAM,IAAK;MACtCT,yBAAyB,CAACS,MAAM,CAAC;IACrC,CAAC,CAAC;IAEF,KAAK,IAAAC,uBAAkB,EAAC,CAAC,CAACF,IAAI,CAAEC,MAAM,IAAK;MACvCP,0BAA0B,CAACO,MAAM,CAAC;IACtC,CAAC,CAAC;EACN,CAAC,EAAE,CAAChB,cAAc,CAAC,CAAC;EAEpB,IAAAa,gBAAS,EAAC,MAAM;IACZ,MAAMK,eAAe,GAAG,IAAAC,6BAAqB,EAAC,CAAC;IAE/C,MAAMC,SAAgB,GAAG,CAAC,CAAC;IAC3B,MAAMC,QAAe,GAAG,CAAC,CAAC;IAE1BH,eAAe,CAACI,OAAO,CAAEC,SAAiB,IAAK;MAC3C,MAAMC,QAAQ,GAAG,IAAAC,2BAAmB,EAACF,SAAS,EAAE;QAC5C5B,KAAK,EAAEA,KAAK,IAAIe,aAAa;QAC7Bd,SAAS,EAAEA,SAAS,IAAIe,iBAAiB;QACzCb;MACJ,CAAC,CAAC;MAEF,IAAI0B,QAAQ,EAAE;QACV,MAAME,QAAQ,GAAG,IAAAC,mBAAW,EAACH,QAAQ,CAAC;QAEtCJ,SAAS,CAAC,mBAAmBG,SAAS,EAAE,CAAC,GAAGC,QAAQ;QACpDH,QAAQ,CAACE,SAAS,CAAC,GAAGC,QAAQ;QAE9B,IAAIE,QAAQ,EAAE;UACVN,SAAS,CAAC,uBAAuBG,SAAS,EAAE,CAAC,GACzC,GAAGG,QAAQ,CAACrD,CAAC,KAAKqD,QAAQ,CAACE,CAAC,KAAKF,QAAQ,CAACG,CAAC,EAAE;UACjDR,QAAQ,CAAC,GAAGE,SAAS,MAAM,CAAC,GAAG,GAAGG,QAAQ,CAACrD,CAAC,KAAKqD,QAAQ,CAACE,CAAC,KAAKF,QAAQ,CAACG,CAAC,EAAE;QAChF;MACJ;IACJ,CAAC,CAAC;IAEF,QAAQjC,SAAS,IAAIe,iBAAiB;MAClC,KAAKrB,SAAS,CAACwC,KAAK;QAChBT,QAAQ,CAACzB,SAAS,GAAG,OAAO;QAC5B;MACJ,KAAKN,SAAS,CAACyC,IAAI;QACfV,QAAQ,CAACzB,SAAS,GAAG,MAAM;QAC3B;MACJ;QACIyB,QAAQ,CAACzB,SAAS,GAAG,SAAS;QAC9B;IACR;IAEA,IAAIU,sBAAsB,EAAE;MACxBxB,MAAM,CAACkD,IAAI,CAAC1B,sBAAsB,CAAC,CAACgB,OAAO,CAAEW,GAAG,IAAK;QACjD,IAAIA,GAAG,KAAK,WAAW,EAAE;UACrBZ,QAAQ,CAACY,GAAG,CAAC,GAAG,IAAAC,sBAAgB,EAAC5B,sBAAsB,CAAC6B,SAAS,CAAC;UAElE;QACJ;;QAEA;QACA;QACA;QACA;QACAd,QAAQ,CAACY,GAAG,CAAC,GAAG3B,sBAAsB,CAAC2B,GAAG,CAAC;MAC/C,CAAC,CAAC;IACN;IAEA,IAAIzB,uBAAuB,EAAE;MACzB,MAAM;QAAE4B,WAAW;QAAEC;MAAY,CAAC,GAAG,IAAAC,8BAAwB,EAAC9B,uBAAuB,CAAC;;MAEtF;MACA1B,MAAM,CAACkD,IAAI,CAACI,WAAW,CAAC,CAACd,OAAO,CAAEW,GAAG,IAAK;QACtC;QACA;QACA;QACA;QACAb,SAAS,CAACa,GAAG,CAAC,GAAGG,WAAW,CAACH,GAAG,CAAC;MACrC,CAAC,CAAC;;MAEF;MACAnD,MAAM,CAACkD,IAAI,CAACK,WAAW,CAAC,CAACf,OAAO,CAAEW,GAAG,IAAK;QACtC;QACA;QACA;QACA;QACAZ,QAAQ,CAACY,GAAG,CAAC,GAAGI,WAAW,CAACJ,GAAG,CAAC;MACpC,CAAC,CAAC;IACN;IAEAZ,QAAQ,CAACkB,QAAQ,GAAG,IAAAC,iBAAW,EAAC,CAAC;IAEjCnC,QAAQ,CAACgB,QAAQ,CAAC;IAClBnB,SAAS,CAACkB,SAAS,CAAC;EACxB,CAAC,EAAE,CACCzB,KAAK,EACLC,SAAS,EACTc,aAAa,EACbC,iBAAiB,EACjBL,sBAAsB,EACtBE,uBAAuB,EACvBV,cAAc,CACjB,CAAC;EAEF,oBACIlC,MAAA,CAAAY,OAAA,CAAAiE,aAAA,CAAC1E,iBAAA,CAAA2E,aAAa;IAACtC,KAAK,EAAEA;EAAM,gBACxBxC,MAAA,CAAAY,OAAA,CAAAiE,aAAA,CAAC3E,YAAA,CAAA6E,MAAM,qBACH/E,MAAA,CAAAY,OAAA,CAAAiE,aAAA;IACIG,GAAG,EAAC,YAAY;IAChBC,IAAI,EAAC;EAAiE,CACzE,CACG,CAAC,eACTjF,MAAA,CAAAY,OAAA,CAAAiE,aAAA;IAAK1C,KAAK,EAAE;MAAE,GAAGE,MAAM;MAAE,GAAGJ,YAAY;MAAE,GAAGE;IAAM;EAAE,GAAEL,QAAc,CAAC,eACtE9B,MAAA,CAAAY,OAAA,CAAAiE,aAAA,CAAClD,WAAW,MAAE,CACH,CAAC;AAExB,CAAC;AAEDE,mBAAmB,CAACqD,WAAW,GAAG,qBAAqB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxE,OAAA,GAEzCiB,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","useState","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","useEffect","getDesignSettings","then","result","getParagraphFormat","availableColors","getAvailableColorList","newColors","newTheme","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","Light","Dark","keys","key","convertIconStyle","iconStyle","colorResult","themeResult","getHeadlineColorSelector","fontSize","getFontSize","createElement","ThemeProvider","Helmet","rel","href","displayName","_default","exports"],"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 { 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\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 .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 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\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n\n void getParagraphFormat().then((result) => {\n setInternalParagraphFormat(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 if (internalParagraphFormat) {\n const { colorResult, themeResult } = 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\n setTheme(newTheme);\n setColors(newColors);\n }, [\n color,\n colorMode,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n ]);\n\n return (\n <ThemeProvider theme={theme}>\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 style={{ ...colors, ...cssVariables, ...style, color: 'var(--chayns-color--text)' }}\n >\n {children}\n </div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

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

@@ -13,6 +13,7 @@ var _calculate = require("../../utils/calculate");
 var _environment = require("../../utils/environment");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _ComboBoxItem = _interopRequireDefault(require("./combobox-item/ComboBoxItem"));
+var _ComboBoxItem2 = require("./combobox-item/ComboBoxItem.styles");
 var _ComboBox = require("./ComboBox.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -20,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const ComboBox = ({
   direction = _comboBox.ComboBoxDirection.BOTTOM,
   isDisabled = false,
-  list,
+  lists,
   maxHeight = '280px',
   onSelect,
   placeholder,
@@ -43,7 +44,7 @@ const ComboBox = ({
   const contentRef = (0, _react.useRef)(null);
   const {
     browser
-  } = (0, _chaynsApi.getDevice)();
+  } = (0, _chaynsApi.useDevice)();
   const isTouch = (0, _environment.getIsTouch)();
   const handleClick = (0, _react.useCallback)(event => {
     if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target)) {
@@ -117,9 +118,13 @@ const ComboBox = ({
         const {
           id
         } = element;
-        const newSelectedItem = list.find(({
-          value
-        }) => String(value) === id.replace('combobox-item__', ''));
+        let newSelectedItem;
+        lists.some(list => {
+          newSelectedItem = list.list.find(({
+            value
+          }) => String(value) === id.replace('combobox-item__', ''));
+          return !!newSelectedItem;
+        });
         if (!newSelectedItem) {
           return;
         }
@@ -130,20 +135,21 @@ const ComboBox = ({
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [focusedIndex, handleSetSelectedItem, isAnimating, list]);
+  }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
   /**
    * This function calculates the greatest width
    */
   (0, _react.useEffect)(() => {
     var _styledComboBoxElemen;
-    const isAtLeastOneItemWithImageGiven = list.some(({
+    const allItems = lists.flatMap(list => list.list);
+    const isAtLeastOneItemWithImageGiven = allItems.some(({
       imageUrl
     }) => imageUrl);
-    const isAtLeastOneItemWithIconGiven = list.some(({
+    const isAtLeastOneItemWithIconGiven = allItems.some(({
       icons
     }) => icons);
-    const textArray = list.map(({
+    const textArray = allItems === null || allItems === void 0 ? void 0 : allItems.map(({
       text
     }) => text);
     const contentHeight = (0, _calculate.calculateContentHeight)(textArray);
@@ -155,11 +161,11 @@ const ComboBox = ({
     // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left
     // 32px = image width + flex gap
     // 40px = icon width + flex gap
-    setMinWidth(shouldUseFullWidth ? width : (0, _calculate.calculateContentWidth)([...list, {
+    setMinWidth(shouldUseFullWidth ? width : (0, _calculate.calculateContentWidth)([...allItems, {
       text: placeholder,
       value: 'placeholder'
     }]) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0) + (isAtLeastOneItemWithIconGiven ? 40 : 0));
-  }, [list, maxHeight, placeholder, shouldUseFullWidth]);
+  }, [lists, maxHeight, placeholder, shouldUseFullWidth]);
   /**
    * This function sets the external selected item
@@ -212,7 +218,12 @@ const ComboBox = ({
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const comboBoxItems = (0, _react.useMemo)(() => list.map(({
+  const comboBoxGroups = (0, _react.useMemo)(() => lists.map(({
+    groupName,
+    list
+  }) => /*#__PURE__*/_react.default.createElement("div", {
+    key: groupName ?? 'default-group'
+  }, groupName && lists.length > 1 && /*#__PURE__*/_react.default.createElement(_ComboBoxItem2.StyledComboBoxTopic, null, groupName), list.map(({
     imageUrl,
     icons,
     suffixElement,
@@ -229,7 +240,7 @@ const ComboBox = ({
     suffixElement: suffixElement,
     text: text,
     value: value
-  })), [handleSetSelectedItem, list, selectedItem, shouldShowRoundImage]);
+  })))), [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage]);
   const bodyStyles = (0, _react.useMemo)(() => {
     let styles = {
       left: internalCoordinates.x,
@@ -270,8 +281,8 @@ const ComboBox = ({
       },
       tabIndex: 0,
       ref: contentRef
-    }, comboBoxItems)), container));
-  }, [bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxItems, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
+    }, comboBoxGroups)), container));
+  }, [bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
     ref: styledComboBoxElementRef,
     $shouldUseFullWidth: shouldUseFullWidth,

package/lib/cjs/components/combobox/ComboBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","useRef","contentRef","browser","getDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","handleOpen","height","getBoundingClientRect","TOP","handleClose","useEffect","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","find","value","String","replace","_styledComboBoxElemen","isAtLeastOneItemWithImageGiven","some","imageUrl","isAtLeastOneItemWithIconGiven","icons","textArray","map","text","contentHeight","calculateContentHeight","maxHeightInPixels","getMaxHeightInPixels","push","width","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxItems","suffixElement","createElement","isSelected","bodyStyles","styles","left","top","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\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 {\n calculateContentHeight,\n calculateContentWidth,\n getMaxHeightInPixels,\n} 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 StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\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 Whether the combobox should be disabled.\n /\n isDisabled?: boolean;\n /\n The list of the items that should be displayed.\n /\n list: IComboBoxItem[];\n /\n The maximum height of the combobox content.\n /\n maxHeight?: CSSProperties['maxHeight'];\n /\n Function that should be executed when an item is selected.\n /\n onSelect?: (comboboxItem: IComboBoxItem) => 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 round shape.\n /\n shouldShowRoundImage?: 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 list,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = 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 } = getDevice();\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 ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const { x, y, height } = styledComboBoxElementRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [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 setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\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 const newSelectedItem = list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\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, list]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = list.some(({ icons }) => icons);\n\n const textArray = list.map(({ text }) => text);\n\n const contentHeight = calculateContentHeight(textArray);\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n\n textArray.push(placeholder);\n\n const width = styledComboBoxElementRef.current?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([...list, { text: placeholder, value: 'placeholder' }]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [list, maxHeight, placeholder, shouldUseFullWidth]);\n\n /\n This function sets the external selected item\n /\n useEffect(() => {\n setIsAnimating(false);\n setItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (item) {\n return item.icons;\n }\n\n return undefined;\n }, [item, 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 (item) {\n text = item.text;\n }\n\n return text;\n }, [item, 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 comboBoxItems = useMemo(\n () =>\n list.map(({ imageUrl, icons, suffixElement, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n icons={icons}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n id={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n suffixElement={suffixElement}\n text={text}\n value={value}\n />\n )),\n [handleSetSelectedItem, list, selectedItem, 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={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxItems}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyStyles,\n browser?.name,\n comboBoxItems,\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 <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {item && item.suffixElement && item.suffixElement}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isTouch,\n item,\n minWidth,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n portal,\n shouldShowRoundImage,\n shouldUseFullWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBoxItem2","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","useRef","contentRef","browser","useDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","handleOpen","height","getBoundingClientRect","TOP","handleClose","useEffect","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","isAtLeastOneItemWithImageGiven","imageUrl","isAtLeastOneItemWithIconGiven","icons","textArray","map","text","contentHeight","calculateContentHeight","maxHeightInPixels","getMaxHeightInPixels","push","width","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","groupName","createElement","StyledComboBoxTopic","suffixElement","isSelected","bodyStyles","styles","left","top","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\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 {\n calculateContentHeight,\n calculateContentWidth,\n getMaxHeightInPixels,\n} 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 { StyledComboBoxTopic } from './combobox-item/ComboBoxItem.styles';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\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 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 that should be executed when an item is selected.\n /\n onSelect?: (comboboxItem: IComboBoxItem) => 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 round shape.\n /\n shouldShowRoundImage?: 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 shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = 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 ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const { x, y, height } = styledComboBoxElementRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [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 setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\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\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const textArray = allItems?.map(({ text }) => text);\n\n const contentHeight = calculateContentHeight(textArray);\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n\n textArray.push(placeholder);\n\n const width = styledComboBoxElementRef.current?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /\n This function sets the external selected item\n /\n useEffect(() => {\n setIsAnimating(false);\n setItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (item) {\n return item.icons;\n }\n\n return undefined;\n }, [item, 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 (item) {\n text = item.text;\n }\n\n return text;\n }, [item, 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(({ imageUrl, icons, suffixElement, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n icons={icons}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n id={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n suffixElement={suffixElement}\n text={text}\n value={value}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, 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={minWidth}\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 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 <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {item && item.suffixElement && item.suffixElement}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isTouch,\n item,\n minWidth,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n portal,\n shouldShowRoundImage,\n shouldUseFullWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledComboBoxItemImage = exports.StyledComboBoxItem = void 0;
+exports.StyledComboBoxTopic = exports.StyledComboBoxItemImage = exports.StyledComboBoxItem = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -34,6 +34,22 @@ const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.defaul
             }
         `}
 `;
+const StyledComboBoxTopic = exports.StyledComboBoxTopic = _styledComponents.default.div`
+    align-items: center;
+    color: ${({
+  theme
+}) => theme.text};
+    position: sticky;
+    top: 0;
+    border: black 5px;
+    cursor: default;
+    font-weight: bold;
+    display: flex;
+    gap: 10px;
+    padding: 4px 10px;
+    transition: background-color 0.2s ease-in-out;
+    backdrop-filter: blur(1000px);
+`;
 const StyledComboBoxItemImage = exports.StyledComboBoxItemImage = _styledComponents.default.img`
     box-shadow: 0 0 0 1px
         rgba(${({

package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBoxItem","exports","styled","div","theme","$isSelected","text","$isTouch","css","StyledComboBoxItemImage","img","$shouldShowRoundImage"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isTouch: boolean;\n $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n height: 22px;\n width: 22px;\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQzC,MAAMW,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAqC,CAAC,KAChEA,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAC7C,aAAa,CAAC;EAAEA;AAA+B,CAAC,KAAKA,KAAK,CAACE,IAAI;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEH;AAA+B,CAAC,KAC3C,CAACG,QAAQ,IACT,IAAAC,qBAAG;AACX;AACA,oCAAoCJ,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AACT,CAAC;~~AAIM~~,MAAMK,~~uBAAuB~~,GAAAR,OAAA,CAAAQ,~~uBAAA~~,GAAGP,yBAAM,~~CAACQ~~,GAAiC;AAC/E;AACA,eAAe,CAAC;~~EAAEN~~;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA,MAAM,CAAC;~~EAAEO~~;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,~~IAAAH~~,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBoxItem","exports","styled","div","theme","$isSelected","text","$isTouch","css","StyledComboBoxTopic","StyledComboBoxItemImage","img","$shouldShowRoundImage"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isTouch: boolean;\n $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: ${({ theme }) => theme.text};\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n backdrop-filter: blur(1000px);\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n height: 22px;\n width: 22px;\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQzC,MAAMW,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAqC,CAAC,KAChEA,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAC7C,aAAa,CAAC;EAAEA;AAA+B,CAAC,KAAKA,KAAK,CAACE,IAAI;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEH;AAA+B,CAAC,KAC3C,CAACG,QAAQ,IACT,IAAAC,qBAAG;AACX;AACA,oCAAoCJ,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AACT,CAAC;AAEM,MAAMK,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAGP,yBAAM,CAACC,GAAG;AAC7C;AACA,aAAa,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAACE,IAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMI,uBAAuB,GAAAT,OAAA,CAAAS,uBAAA,GAAGR,yBAAM,CAACS,GAAiC;AAC/E;AACA,eAAe,CAAC;EAAEP;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA,MAAM,CAAC;EAAEQ;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}

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

@@ -132,7 +132,8 @@ const ColorSchemeProvider = _ref => {
     style: {
       ...colors,
       ...cssVariables,
-      ...style
+      ...style,
+      color: 'var(--chayns-color--text)'
     }
   }, children), /*#__PURE__*/React.createElement(GlobalStyle, null));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","useSite","React","useEffect","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","then","result","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","colorResult","themeResult","fontSize","createElement","rel","href","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 { 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\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 .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 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\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n\n void getParagraphFormat().then((result) => {\n setInternalParagraphFormat(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 if (internalParagraphFormat) {\n const { colorResult, themeResult } = 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\n setTheme(newTheme);\n setColors(newColors);\n }, [\n color,\n colorMode,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n ]);\n\n return (\n <ThemeProvider theme={theme}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\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,QAAQ,QAAQ,OAAO;AACjE,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,SA6Cd;AAGA,MAAMC,WAAW,GAAGR,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMS,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,GAAGrB,QAAQ,CAAQ,CAAC,CAAC,CAAC;EAC/C,MAAM,CAACsB,KAAK,EAAEC,QAAQ,CAAC,GAAGvB,QAAQ,CAAQ,CAAC,CAAC,CAAC;EAC7C,MAAM,CAACwB,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGzB,QAAQ,CAAiB,CAAC;EACtF,MAAM,CAAC0B,uBAAuB,EAAEC,0BAA0B,CAAC,GAAG3B,QAAQ,CAAoB,CAAC;;EAE3F;EACA,MAAM;IAAEc,KAAK,EAAEc,aAAa;IAAEb,SAAS,EAAEc;EAAkB,CAAC,GAAGhC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;EAE9EE,SAAS,CAAC,MAAM;IACZ,IAAIoB,cAAc,EAAE;MAChBM,yBAAyB,CAACN,cAAc,CAAC;MAEzC;IACJ;IAEA,KAAKf,iBAAiB,CAAC,CAAC,CAAC0B,IAAI,CAAEC,MAAM,IAAK;MACtCN,yBAAyB,CAACM,MAAM,CAAC;IACrC,CAAC,CAAC;IAEF,KAAK1B,kBAAkB,CAAC,CAAC,CAACyB,IAAI,CAAEC,MAAM,IAAK;MACvCJ,0BAA0B,CAACI,MAAM,CAAC;IACtC,CAAC,CAAC;EACN,CAAC,EAAE,CAACZ,cAAc,CAAC,CAAC;EAEpBpB,SAAS,CAAC,MAAM;IACZ,MAAMiC,eAAe,GAAGtC,qBAAqB,CAAC,CAAC;IAE/C,MAAMuC,SAAgB,GAAG,CAAC,CAAC;IAC3B,MAAMC,QAAe,GAAG,CAAC,CAAC;IAE1BF,eAAe,CAACG,OAAO,CAAEC,SAAiB,IAAK;MAC3C,MAAMC,QAAQ,GAAG1C,mBAAmB,CAACyC,SAAS,EAAE;QAC5CtB,KAAK,EAAEA,KAAK,IAAIc,aAAa;QAC7Bb,SAAS,EAAEA,SAAS,IAAIc,iBAAiB;QACzCZ;MACJ,CAAC,CAAC;MAEF,IAAIoB,QAAQ,EAAE;QACV,MAAMC,QAAQ,GAAG1C,WAAW,CAACyC,QAAQ,CAAC;QAEtCJ,SAAS,CAAC,mBAAmBG,SAAS,EAAE,CAAC,GAAGC,QAAQ;QACpDH,QAAQ,CAACE,SAAS,CAAC,GAAGC,QAAQ;QAE9B,IAAIC,QAAQ,EAAE;UACVL,SAAS,CAAC,uBAAuBG,SAAS,EAAE,CAAC,GACzC,GAAGE,QAAQ,CAACC,CAAC,KAAKD,QAAQ,CAACE,CAAC,KAAKF,QAAQ,CAACG,CAAC,EAAE;UACjDP,QAAQ,CAAC,GAAGE,SAAS,MAAM,CAAC,GAAG,GAAGE,QAAQ,CAACC,CAAC,KAAKD,QAAQ,CAACE,CAAC,KAAKF,QAAQ,CAACG,CAAC,EAAE;QAChF;MACJ;IACJ,CAAC,CAAC;IAEF,QAAQ1B,SAAS,IAAIc,iBAAiB;MAClC,KAAKpB,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,GAAGxC,gBAAgB,CAACkB,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;IAEA,IAAIpB,uBAAuB,EAAE;MACzB,MAAM;QAAEsB,WAAW;QAAEC;MAAY,CAAC,GAAGzC,wBAAwB,CAACkB,uBAAuB,CAAC;;MAEtF;MACAkB,MAAM,CAACC,IAAI,CAACG,WAAW,CAAC,CAACb,OAAO,CAAEW,GAAG,IAAK;QACtC;QACA;QACA;QACA;QACAb,SAAS,CAACa,GAAG,CAAC,GAAGE,WAAW,CAACF,GAAG,CAAC;MACrC,CAAC,CAAC;;MAEF;MACAF,MAAM,CAACC,IAAI,CAACI,WAAW,CAAC,CAACd,OAAO,CAAEW,GAAG,IAAK;QACtC;QACA;QACA;QACA;QACAZ,QAAQ,CAACY,GAAG,CAAC,GAAGG,WAAW,CAACH,GAAG,CAAC;MACpC,CAAC,CAAC;IACN;IAEAZ,QAAQ,CAACgB,QAAQ,GAAG3C,WAAW,CAAC,CAAC;IAEjCgB,QAAQ,CAACW,QAAQ,CAAC;IAClBb,SAAS,CAACY,SAAS,CAAC;EACxB,CAAC,EAAE,CACCnB,KAAK,EACLC,SAAS,EACTa,aAAa,EACbC,iBAAiB,EACjBL,sBAAsB,EACtBE,uBAAuB,EACvBT,cAAc,CACjB,CAAC;EAEF,oBACInB,KAAA,CAAAqD,aAAA,CAAChD,aAAa;IAACmB,KAAK,EAAEA;EAAM,gBACxBxB,KAAA,CAAAqD,aAAA,CAAClD,MAAM,qBACHH,KAAA,CAAAqD,aAAA;IACIC,GAAG,EAAC,YAAY;IAChBC,IAAI,EAAC;EAAiE,CACzE,CACG,CAAC,eACTvD,KAAA,CAAAqD,aAAA;IAAKjC,KAAK,EAAE;MAAE,GAAGE,MAAM;MAAE,GAAGJ,YAAY;MAAE,GAAGE;IAAM;EAAE,GAAEL,QAAc,CAAC,eACtEf,KAAA,CAAAqD,aAAA,CAACzC,WAAW,MAAE,CACH,CAAC;AAExB,CAAC;AAEDC,mBAAmB,CAAC2C,WAAW,GAAG,qBAAqB;AAEvD,eAAe3C,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","useSite","React","useEffect","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","then","result","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","colorResult","themeResult","fontSize","createElement","rel","href","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 { 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\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 .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 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\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n\n void getParagraphFormat().then((result) => {\n setInternalParagraphFormat(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 if (internalParagraphFormat) {\n const { colorResult, themeResult } = 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\n setTheme(newTheme);\n setColors(newColors);\n }, [\n color,\n colorMode,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n ]);\n\n return (\n <ThemeProvider theme={theme}>\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 style={{ ...colors, ...cssVariables, ...style, color: 'var(--chayns-color--text)' }}\n >\n {children}\n </div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import { getDevice } from 'chayns-api';
+import { useDevice } from 'chayns-api';
 import { AnimatePresence } from 'framer-motion';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -7,12 +7,13 @@ import { calculateContentHeight, calculateContentWidth, getMaxHeightInPixels } f
 import { getIsTouch } from '../../utils/environment';
 import Icon from '../icon/Icon';
 import ComboBoxItem from './combobox-item/ComboBoxItem';
+import { StyledComboBoxTopic } from './combobox-item/ComboBoxItem.styles';
 import { StyledComboBox, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledMotionComboBoxBody } from './ComboBox.styles';
 const ComboBox = _ref => {
   let {
     direction = ComboBoxDirection.BOTTOM,
     isDisabled = false,
-    list,
+    lists,
     maxHeight = '280px',
     onSelect,
     placeholder,
@@ -35,7 +36,7 @@ const ComboBox = _ref => {
   const contentRef = useRef(null);
   const {
     browser
-  } = getDevice();
+  } = useDevice();
   const isTouch = getIsTouch();
   const handleClick = useCallback(event => {
     if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target)) {
@@ -107,11 +108,15 @@ const ComboBox = _ref => {
         const {
           id
         } = element;
-        const newSelectedItem = list.find(_ref2 => {
-          let {
-            value
-          } = _ref2;
-          return String(value) === id.replace('combobox-item__', '');
+        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;
@@ -123,25 +128,26 @@ const ComboBox = _ref => {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [focusedIndex, handleSetSelectedItem, isAnimating, list]);
+  }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
   /**
    * This function calculates the greatest width
    */
   useEffect(() => {
-    const isAtLeastOneItemWithImageGiven = list.some(_ref3 => {
+    const allItems = lists.flatMap(list => list.list);
+    const isAtLeastOneItemWithImageGiven = allItems.some(_ref3 => {
       let {
         imageUrl
       } = _ref3;
       return imageUrl;
     });
-    const isAtLeastOneItemWithIconGiven = list.some(_ref4 => {
+    const isAtLeastOneItemWithIconGiven = allItems.some(_ref4 => {
       let {
         icons
       } = _ref4;
       return icons;
     });
-    const textArray = list.map(_ref5 => {
+    const textArray = allItems?.map(_ref5 => {
       let {
         text
       } = _ref5;
@@ -156,11 +162,11 @@ const ComboBox = _ref => {
     // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left
     // 32px = image width + flex gap
     // 40px = icon width + flex gap
-    setMinWidth(shouldUseFullWidth ? width : calculateContentWidth([...list, {
+    setMinWidth(shouldUseFullWidth ? width : calculateContentWidth([...allItems, {
       text: placeholder,
       value: 'placeholder'
     }]) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0) + (isAtLeastOneItemWithIconGiven ? 40 : 0));
-  }, [list, maxHeight, placeholder, shouldUseFullWidth]);
+  }, [lists, maxHeight, placeholder, shouldUseFullWidth]);
   /**
    * This function sets the external selected item
@@ -213,27 +219,35 @@ const ComboBox = _ref => {
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const comboBoxItems = useMemo(() => list.map(_ref6 => {
+  const comboBoxGroups = useMemo(() => lists.map(_ref6 => {
     let {
-      imageUrl,
-      icons,
-      suffixElement,
-      text,
-      value
+      groupName,
+      list
     } = _ref6;
-    return /*#__PURE__*/React.createElement(ComboBoxItem, {
-      imageUrl: imageUrl,
-      icons: icons,
-      isSelected: selectedItem ? value === selectedItem.value : false,
-      key: value,
-      id: value,
-      onSelect: handleSetSelectedItem,
-      shouldShowRoundImage: shouldShowRoundImage,
-      suffixElement: suffixElement,
-      text: text,
-      value: value
-    });
-  }), [handleSetSelectedItem, list, selectedItem, shouldShowRoundImage]);
+    return /*#__PURE__*/React.createElement("div", {
+      key: groupName ?? 'default-group'
+    }, groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, groupName), list.map(_ref7 => {
+      let {
+        imageUrl,
+        icons,
+        suffixElement,
+        text,
+        value
+      } = _ref7;
+      return /*#__PURE__*/React.createElement(ComboBoxItem, {
+        imageUrl: imageUrl,
+        icons: icons,
+        isSelected: selectedItem ? value === selectedItem.value : false,
+        key: value,
+        id: value,
+        onSelect: handleSetSelectedItem,
+        shouldShowRoundImage: shouldShowRoundImage,
+        suffixElement: suffixElement,
+        text: text,
+        value: value
+      });
+    }));
+  }), [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage]);
   const bodyStyles = useMemo(() => {
     let styles = {
       left: internalCoordinates.x,
@@ -274,8 +288,8 @@ const ComboBox = _ref => {
       },
       tabIndex: 0,
       ref: contentRef
-    }, comboBoxItems)), container));
-  }, [bodyStyles, browser?.name, comboBoxItems, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
+    }, comboBoxGroups)), container));
+  }, [bodyStyles, browser?.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
     ref: styledComboBoxElementRef,
     $shouldUseFullWidth: shouldUseFullWidth,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.js","names":["getDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentHeight","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","height","getBoundingClientRect","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","find","_ref2","value","String","replace","isAtLeastOneItemWithImageGiven","some","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","textArray","map","_ref5","text","contentHeight","maxHeightInPixels","push","width","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxItems","_ref6","suffixElement","createElement","isSelected","bodyStyles","styles","left","top","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\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 {\n calculateContentHeight,\n calculateContentWidth,\n getMaxHeightInPixels,\n} 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 StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\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 Whether the combobox should be disabled.\n /\n isDisabled?: boolean;\n /\n The list of the items that should be displayed.\n /\n list: IComboBoxItem[];\n /\n The maximum height of the combobox content.\n /\n maxHeight?: CSSProperties['maxHeight'];\n /\n Function that should be executed when an item is selected.\n /\n onSelect?: (comboboxItem: IComboBoxItem) => 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 round shape.\n /\n shouldShowRoundImage?: 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 list,\n maxHeight = '280px',\n onSelect,\n placeholder,\n container = document.body,\n selectedItem,\n shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = 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 } = getDevice();\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 ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const { x, y, height } = styledComboBoxElementRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [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 setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\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 const newSelectedItem = list.find(\n ({ value }) => String(value) === id.replace('combobox-item__', ''),\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, list]);\n\n /\n This function calculates the greatest width\n /\n useEffect(() => {\n const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = list.some(({ icons }) => icons);\n\n const textArray = list.map(({ text }) => text);\n\n const contentHeight = calculateContentHeight(textArray);\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n\n textArray.push(placeholder);\n\n const width = styledComboBoxElementRef.current?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([...list, { text: placeholder, value: 'placeholder' }]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [list, maxHeight, placeholder, shouldUseFullWidth]);\n\n /\n This function sets the external selected item\n /\n useEffect(() => {\n setIsAnimating(false);\n setItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (item) {\n return item.icons;\n }\n\n return undefined;\n }, [item, 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 (item) {\n text = item.text;\n }\n\n return text;\n }, [item, 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 comboBoxItems = useMemo(\n () =>\n list.map(({ imageUrl, icons, suffixElement, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n icons={icons}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n id={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n suffixElement={suffixElement}\n text={text}\n value={value}\n />\n )),\n [handleSetSelectedItem, list, selectedItem, 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={minWidth}\n style={bodyStyles}\n $direction={direction}\n transition={{ duration: 0.2 }}\n tabIndex={0}\n ref={contentRef}\n >\n {comboBoxItems}\n </StyledMotionComboBoxBody>\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n bodyStyles,\n browser?.name,\n comboBoxItems,\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 <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {item && item.suffixElement && item.suffixElement}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isTouch,\n item,\n minWidth,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n portal,\n shouldShowRoundImage,\n shouldUseFullWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentHeight","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBoxTopic","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","height","getBoundingClientRect","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","textArray","map","_ref5","text","contentHeight","maxHeightInPixels","push","width","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","_ref6","groupName","createElement","_ref7","suffixElement","isSelected","bodyStyles","styles","left","top","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\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 {\n calculateContentHeight,\n calculateContentWidth,\n getMaxHeightInPixels,\n} 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 { StyledComboBoxTopic } from './combobox-item/ComboBoxItem.styles';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n groupName?: string;\n list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n icons?: string[];\n imageUrl?: string;\n suffixElement?: ReactNode;\n text: string;\n value: string \| number;\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 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 that should be executed when an item is selected.\n /\n onSelect?: (comboboxItem: IComboBoxItem) => 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 round shape.\n /\n shouldShowRoundImage?: 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 shouldShowRoundImage,\n shouldUseFullWidth = false,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = 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 ) {\n setIsAnimating(false);\n }\n },\n [styledComboBoxElementRef],\n );\n\n const handleOpen = useCallback(() => {\n if (styledComboBoxElementRef.current) {\n const { x, y, height } = styledComboBoxElementRef.current.getBoundingClientRect();\n\n setInternalCoordinates({\n x,\n y: direction === ComboBoxDirection.TOP ? y : y + height,\n });\n\n setIsAnimating(true);\n }\n }, [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 setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\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\n const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n const textArray = allItems?.map(({ text }) => text);\n\n const contentHeight = calculateContentHeight(textArray);\n\n const maxHeightInPixels = getMaxHeightInPixels(\n maxHeight,\n styledComboBoxElementRef.current ?? document.body,\n );\n\n setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n\n textArray.push(placeholder);\n\n const width = styledComboBoxElementRef.current?.getBoundingClientRect().width ?? 0;\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n // 40px = icon width + flex gap\n setMinWidth(\n shouldUseFullWidth\n ? width\n : calculateContentWidth([\n ...allItems,\n { text: placeholder, value: 'placeholder' },\n ]) +\n 45 +\n (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n (isAtLeastOneItemWithIconGiven ? 40 : 0),\n );\n }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n /\n This function sets the external selected item\n /\n useEffect(() => {\n setIsAnimating(false);\n setItem(selectedItem);\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n const placeholderIcon = useMemo(() => {\n if (selectedItem) {\n return selectedItem.icons;\n }\n\n if (item) {\n return item.icons;\n }\n\n return undefined;\n }, [item, 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 (item) {\n text = item.text;\n }\n\n return text;\n }, [item, 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(({ imageUrl, icons, suffixElement, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n icons={icons}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n id={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n suffixElement={suffixElement}\n text={text}\n value={value}\n />\n ))}\n </div>\n )),\n [handleSetSelectedItem, lists, selectedItem, 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={minWidth}\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 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 <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderIcon && <Icon icons={placeholderIcon} />}\n {placeholderText}\n {item && item.suffixElement && item.suffixElement}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {portal}\n </StyledComboBox>\n ),\n [\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isTouch,\n item,\n minWidth,\n placeholderIcon,\n placeholderImageUrl,\n placeholderText,\n portal,\n shouldShowRoundImage,\n shouldUseFullWidth,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js CHANGED Viewed

@@ -35,21 +35,40 @@ export const StyledComboBoxItem = styled.div`
         `;
 }}
 `;
+export const StyledComboBoxTopic = styled.div`
+    align-items: center;
+    color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.text;
+}};
+    position: sticky;
+    top: 0;
+    border: black 5px;
+    cursor: default;
+    font-weight: bold;
+    display: flex;
+    gap: 10px;
+    padding: 4px 10px;
+    transition: background-color 0.2s ease-in-out;
+    backdrop-filter: blur(1000px);
+`;
 export const StyledComboBoxItemImage = styled.img`
     box-shadow: 0 0 0 1px
-        rgba(${_ref4 => {
+        rgba(${_ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme['009-rgb'];
 }}, 0.15);
     height: 22px;
     width: 22px;
-    ${_ref5 => {
+    ${_ref6 => {
   let {
     $shouldShowRoundImage
-  } = _ref5;
+  } = _ref6;
   return $shouldShowRoundImage && css`
             border-radius: 50%;
         `;

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isTouch","StyledComboBoxItemImage","img","~~_ref4~~","~~_ref5~~","$shouldShowRoundImage"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isTouch: boolean;\n $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n height: 22px;\n width: 22px;\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC3C,CAACC,QAAQ,IACTT,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;~~AAID~~,OAAO,MAAMM,~~uBAAuB~~,GAAGX,MAAM,~~CAACY~~,GAAiC;AAC/E;AACA,eAAeC,KAAA;EAAA,IAAC;~~IAAER~~;EAAoC,CAAC,~~GAAAQ~~,KAAA;EAAA,~~OAAKR~~,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA;AACA;AACA,~~MAAMS~~,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,~~IACrBd~~,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isTouch","StyledComboBoxTopic","_ref4","StyledComboBoxItemImage","img","_ref5","_ref6","$shouldShowRoundImage"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isTouch: boolean;\n $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: ${({ theme }) => theme.text};\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n backdrop-filter: blur(1000px);\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n height: 22px;\n width: 22px;\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC3C,CAACC,QAAQ,IACTT,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMM,mBAAmB,GAAGX,MAAM,CAACG,GAAG;AAC7C;AACA,aAAaS,KAAA;EAAA,IAAC;IAAEP;EAAM,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAACG,IAAI;AAAA;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMK,uBAAuB,GAAGb,MAAM,CAACc,GAAiC;AAC/E;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEV;EAAoC,CAAC,GAAAU,KAAA;EAAA,OAAKV,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA;AACA;AACA,MAAMW,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBhB,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/types/components/combobox/ComboBox.d.ts CHANGED Viewed

@@ -1,5 +1,9 @@
 import { FC, type CSSProperties, type ReactNode } from 'react';
 import { ComboBoxDirection } from '../../types/comboBox';
+export interface IComboBoxItems {
+    groupName?: string;
+    list: Array<IComboBoxItem>;
+}
 export interface IComboBoxItem {
     icons?: string[];
     imageUrl?: string;
@@ -23,7 +27,7 @@ export type ComboBoxProps = {
     /**
      * The list of the items that should be displayed.
      */
-    list: IComboBoxItem[];
+    lists: IComboBoxItems[];
     /**
      * The maximum height of the combobox content.
      */

package/lib/types/components/combobox/combobox-item/ComboBoxItem.styles.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ type StyledComboBoxItemProps = WithTheme<{
     $isSelected: boolean;
 }>;
 export declare const StyledComboBoxItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemProps>> & string;
+export declare const StyledComboBoxTopic: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type StyledComboBoxItemImageProps = WithTheme<{
     $shouldShowRoundImage?: boolean;
 }>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.710",
+    "version": "5.0.0-beta.713",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -50,8 +50,8 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.24.8",
-        "@babel/core": "^7.24.9",
-        "@babel/preset-env": "^7.24.8",
+        "@babel/core": "^7.25.2",
+        "@babel/preset-env": "^7.25.3",
         "@babel/preset-react": "^7.24.7",
         "@babel/preset-typescript": "^7.24.7",
         "@types/react": "^18.3.3",
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "13e7ba2adb59c398719b8ad9a6abc920eee278eb"
+    "gitHead": "9c0ee4fb2864da9437697d4accf29d5a69f77eb8"
 }