@chayns-components/core 5.0.0-beta.13 → 5.0.0-beta.1301

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","internalColor","internalColorMode","overrideParagraphFormat","paragraphFormat","contextValue","createElement","theme","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? internalColor;\n    const colorMode = colorModeProp ?? internalColorMode;\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA6CvD,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMK,kBAAkB,gBAAGR,aAAa,CAAsCS,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMT,UAAU,CAACO,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAER,KAAK,EAAES,aAAa;IAAEP,SAAS,EAAEQ;EAAkB,CAAC,GAAGzB,OAAO,CAAC,CAAC;EAExE,MAAMe,KAAK,GAAGC,SAAS,IAAIQ,aAAa;EACxC,MAAMP,SAAS,GAAGC,aAAa,IAAIO,iBAAiB;EACpD,MAAMC,uBAAuB,GACxBX,KAAK,IAAIA,KAAK,KAAKS,aAAa,IAAKP,SAAS,KAAKQ,iBAAiB;EACzE,MAAME,eAAe,GAAGvB,OAAO,CAC3B,MAAOsB,uBAAuB,GAAG,EAAE,GAAGf,SAAU,EAChD,CAACe,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGpB,cAAc,CAAC;IAChCO,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAI;EACJ,CAAC,CAAC;EAEF,oBACI1B,KAAA,CAAA4B,aAAA,CAACvB,aAAa;IAACwB,KAAK,EAAEF,YAAY,CAACE;EAAM,gBACrC7B,KAAA,CAAA4B,aAAA,CAACnB,kBAAkB,CAACqB,QAAQ;IAACC,KAAK,EAAEJ;EAAa,gBAC7C3B,KAAA,CAAA4B,aAAA,CAACtB,yBAAyB;IAAC0B,SAAS,EAAC,uBAAuB;IAACZ,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5Bb,KAAA,CAAA4B,aAAA,CAACpB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAACqB,WAAW,GAAG,qBAAqB;AAEvD,eAAerB,mBAAmB","ignoreList":[]}

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

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

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

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

package/lib/esm/components/color-scheme-provider/hooks/useChaynsTheme.js

@@ -0,0 +1,129 @@
+import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
+import { ColorMode } from 'chayns-api';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';
+import { useDesignSettings } from './useDesignSettings';
+import { useParagraphFormat } from './useParagraphFormat';
+const createTheme = ({
+  colors,
+  colorMode,
+  color,
+  secondaryColor,
+  designSettings,
+  paragraphFormat,
+  theme,
+  iconColor,
+  customVariables
+}) => {
+  if (theme) {
+    return theme;
+  }
+  const result = {};
+  if (customVariables) {
+    Object.keys(customVariables).forEach(key => {
+      result[key] = customVariables[key];
+    });
+  }
+  const availableColors = getAvailableColorList();
+  if (!colors) {
+    availableColors.forEach(colorName => {
+      const hexColor = getColorFromPalette(colorName, {
+        color,
+        colorMode,
+        secondaryColor
+      });
+      if (hexColor) {
+        const rgbColor = hexToRgb255(hexColor);
+        result[colorName] = hexColor;
+        if (rgbColor) {
+          result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+        }
+      }
+    });
+  }
+  if (designSettings) {
+    Object.keys(designSettings).forEach(key => {
+      if (key === 'iconStyle') {
+        result[key] = convertIconStyle(designSettings.iconStyle);
+        return;
+      }
+      result[key] = designSettings[key];
+    });
+  }
+  if (paragraphFormat) {
+    const {
+      themeResult
+    } = getHeadlineColorSelector(paragraphFormat);
+
+    // Update Theme
+    Object.keys(themeResult).forEach(key => {
+      result[key] = themeResult[key];
+    });
+  }
+  switch (colorMode) {
+    case ColorMode.Light:
+      result.colorMode = 'light';
+      break;
+    case ColorMode.Dark:
+      result.colorMode = 'dark';
+      break;
+    default:
+      result.colorMode = 'classic';
+      break;
+  }
+  if (iconColor) {
+    result.iconColor = iconColor;
+  }
+  result.fontSize = designSettings?.fontSizePx || 15;
+  return result;
+};
+export const useChaynsTheme = ({
+  colors,
+  colorMode,
+  color,
+  secondaryColor,
+  designSettings: designSettingsProp,
+  paragraphFormat: paragraphFormatProp,
+  siteId,
+  iconColor,
+  theme,
+  customVariables
+}) => {
+  const designSettings = useDesignSettings(siteId, designSettingsProp);
+  const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);
+  const isMountedRef = useRef(false);
+  const [internalTheme, setInternalTheme] = useState(() => createTheme({
+    colors,
+    colorMode,
+    color,
+    secondaryColor,
+    designSettings,
+    paragraphFormat,
+    theme,
+    iconColor,
+    customVariables
+  }));
+  useEffect(() => {
+    if (!isMountedRef.current) {
+      isMountedRef.current = true;
+      return;
+    }
+    setInternalTheme(createTheme({
+      colors,
+      colorMode,
+      color,
+      secondaryColor,
+      designSettings,
+      paragraphFormat,
+      theme,
+      iconColor,
+      customVariables
+    }));
+  }, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables]);
+  return useMemo(() => ({
+    theme: internalTheme,
+    designSettings,
+    paragraphFormat
+  }), [internalTheme, designSettings, paragraphFormat]);
+};
+//# sourceMappingURL=useChaynsTheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChaynsTheme.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useEffect","useMemo","useRef","useState","convertIconStyle","getHeadlineColorSelector","useDesignSettings","useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","colorName","hexColor","rgbColor","r","g","b","iconStyle","themeResult","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","isMountedRef","internalTheme","setInternalTheme","current"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n    colors?: Theme;\n    colorMode: ColorMode;\n    iconColor?: string;\n    color: string;\n    secondaryColor?: string;\n    designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n    paragraphFormat?: ChaynsParagraphFormat[];\n    siteId?: string;\n    theme?: Theme;\n    customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n    colors,\n    colorMode,\n    color,\n    secondaryColor,\n    designSettings,\n    paragraphFormat,\n    theme,\n    iconColor,\n    customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n    if (theme) {\n        return theme;\n    }\n\n    const result: Theme = {};\n\n    if (customVariables) {\n        Object.keys(customVariables).forEach((key) => {\n            result[key] = customVariables[key] as string;\n        });\n    }\n\n    const availableColors = getAvailableColorList();\n\n    if (!colors) {\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color,\n                colorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                result[colorName] = hexColor;\n\n                if (rgbColor) {\n                    result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n    }\n\n    if (designSettings) {\n        Object.keys(designSettings).forEach((key) => {\n            if (key === 'iconStyle') {\n                result[key] = convertIconStyle(designSettings.iconStyle);\n\n                return;\n            }\n            result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n        });\n    }\n\n    if (paragraphFormat) {\n        const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n        // Update Theme\n        Object.keys(themeResult).forEach((key) => {\n            result[key] = themeResult[key] as string;\n        });\n    }\n\n    switch (colorMode) {\n        case ColorMode.Light:\n            result.colorMode = 'light';\n            break;\n        case ColorMode.Dark:\n            result.colorMode = 'dark';\n            break;\n        default:\n            result.colorMode = 'classic';\n            break;\n    }\n\n    if (iconColor) {\n        result.iconColor = iconColor;\n    }\n\n    result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n    return result;\n};\n\nexport const useChaynsTheme = ({\n    colors,\n    colorMode,\n    color,\n    secondaryColor,\n    designSettings: designSettingsProp,\n    paragraphFormat: paragraphFormatProp,\n    siteId,\n    iconColor,\n    theme,\n    customVariables,\n}: ThemeOptions) => {\n    const designSettings = useDesignSettings(siteId, designSettingsProp);\n    const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);\n    const isMountedRef = useRef<boolean>(false);\n\n    const [internalTheme, setInternalTheme] = useState<Theme>(() =>\n        createTheme({\n            colors,\n            colorMode,\n            color,\n            secondaryColor,\n            designSettings,\n            paragraphFormat,\n            theme,\n            iconColor,\n            customVariables,\n        }),\n    );\n\n    useEffect(() => {\n        if (!isMountedRef.current) {\n            isMountedRef.current = true;\n            return;\n        }\n        setInternalTheme(\n            createTheme({\n                colors,\n                colorMode,\n                color,\n                secondaryColor,\n                designSettings,\n                paragraphFormat,\n                theme,\n                iconColor,\n                customVariables,\n            }),\n        );\n    }, [\n        color,\n        colorMode,\n        colors,\n        designSettings,\n        paragraphFormat,\n        secondaryColor,\n        theme,\n        customVariables,\n    ]);\n\n    return useMemo(\n        () => ({\n            theme: internalTheme,\n            designSettings,\n            paragraphFormat,\n        }),\n        [internalTheme, designSettings, paragraphFormat],\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/hooks/useDesignSettings.js

@@ -0,0 +1,17 @@
+import { useStyleSettings } from 'chayns-api';
+import { useEffect, useState } from 'react';
+import { getDesignSettings } from '../../../api/theme/get';
+export const useDesignSettings = (siteId, designSettings) => {
+  const styleSettings = useStyleSettings();
+  const [value, setValue] = useState(undefined);
+  const shouldLoad = !designSettings && !styleSettings?.designSettings;
+  useEffect(() => {
+    if (shouldLoad) {
+      void getDesignSettings(siteId).then(result => {
+        setValue(result);
+      });
+    }
+  }, [shouldLoad, siteId]);
+  return designSettings ?? styleSettings?.designSettings ?? value;
+};
+//# sourceMappingURL=useDesignSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDesignSettings.js","names":["useStyleSettings","useEffect","useState","getDesignSettings","useDesignSettings","siteId","designSettings","styleSettings","value","setValue","undefined","shouldLoad","then","result"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useDesignSettings.ts"],"sourcesContent":["import { ChaynsDesignSettings, useStyleSettings } from 'chayns-api';\nimport { useEffect, useState } from 'react';\nimport { getDesignSettings } from '../../../api/theme/get';\n\nexport const useDesignSettings = (siteId?: string, designSettings?: ChaynsDesignSettings) => {\n    const styleSettings = useStyleSettings();\n    const [value, setValue] = useState<ChaynsDesignSettings | undefined>(undefined);\n    const shouldLoad = !designSettings && !styleSettings?.designSettings;\n\n    useEffect(() => {\n        if (shouldLoad) {\n            void getDesignSettings(siteId).then((result) => {\n                setValue(result);\n            });\n        }\n    }, [shouldLoad, siteId]);\n\n    return designSettings ?? styleSettings?.designSettings ?? value;\n};\n"],"mappings":"AAAA,SAA+BA,gBAAgB,QAAQ,YAAY;AACnE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,MAAe,EAAEC,cAAqC,KAAK;EACzF,MAAMC,aAAa,GAAGP,gBAAgB,CAAC,CAAC;EACxC,MAAM,CAACQ,KAAK,EAAEC,QAAQ,CAAC,GAAGP,QAAQ,CAAmCQ,SAAS,CAAC;EAC/E,MAAMC,UAAU,GAAG,CAACL,cAAc,IAAI,CAACC,aAAa,EAAED,cAAc;EAEpEL,SAAS,CAAC,MAAM;IACZ,IAAIU,UAAU,EAAE;MACZ,KAAKR,iBAAiB,CAACE,MAAM,CAAC,CAACO,IAAI,CAAEC,MAAM,IAAK;QAC5CJ,QAAQ,CAACI,MAAM,CAAC;MACpB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACF,UAAU,EAAEN,MAAM,CAAC,CAAC;EAExB,OAAOC,cAAc,IAAIC,aAAa,EAAED,cAAc,IAAIE,KAAK;AACnE,CAAC","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/hooks/useParagraphFormat.js

@@ -0,0 +1,17 @@
+import { useStyleSettings } from 'chayns-api';
+import { useEffect, useState } from 'react';
+import { getParagraphFormat } from '../../../api/theme/get';
+export const useParagraphFormat = (siteId, paragraphFormat) => {
+  const styleSettings = useStyleSettings();
+  const [value, setValue] = useState([]);
+  const shouldLoad = !paragraphFormat && !styleSettings?.paragraphFormats;
+  useEffect(() => {
+    if (shouldLoad) {
+      void getParagraphFormat(siteId).then(result => {
+        setValue(result ?? []);
+      });
+    }
+  }, [shouldLoad, siteId]);
+  return paragraphFormat ?? styleSettings?.paragraphFormats ?? value;
+};
+//# sourceMappingURL=useParagraphFormat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useParagraphFormat.js","names":["useStyleSettings","useEffect","useState","getParagraphFormat","useParagraphFormat","siteId","paragraphFormat","styleSettings","value","setValue","shouldLoad","paragraphFormats","then","result"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useParagraphFormat.ts"],"sourcesContent":["import { ChaynsParagraphFormat, useStyleSettings } from 'chayns-api';\nimport { useEffect, useState } from 'react';\nimport { getParagraphFormat } from '../../../api/theme/get';\n\nexport const useParagraphFormat = (siteId?: string, paragraphFormat?: ChaynsParagraphFormat[]) => {\n    const styleSettings = useStyleSettings();\n    const [value, setValue] = useState<ChaynsParagraphFormat[]>([]);\n    const shouldLoad = !paragraphFormat && !styleSettings?.paragraphFormats;\n\n    useEffect(() => {\n        if (shouldLoad) {\n            void getParagraphFormat(siteId).then((result) => {\n                setValue(result ?? []);\n            });\n        }\n    }, [shouldLoad, siteId]);\n\n    return paragraphFormat ?? styleSettings?.paragraphFormats ?? value;\n};\n"],"mappings":"AAAA,SAAgCA,gBAAgB,QAAQ,YAAY;AACpE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,OAAO,MAAMC,kBAAkB,GAAGA,CAACC,MAAe,EAAEC,eAAyC,KAAK;EAC9F,MAAMC,aAAa,GAAGP,gBAAgB,CAAC,CAAC;EACxC,MAAM,CAACQ,KAAK,EAAEC,QAAQ,CAAC,GAAGP,QAAQ,CAA0B,EAAE,CAAC;EAC/D,MAAMQ,UAAU,GAAG,CAACJ,eAAe,IAAI,CAACC,aAAa,EAAEI,gBAAgB;EAEvEV,SAAS,CAAC,MAAM;IACZ,IAAIS,UAAU,EAAE;MACZ,KAAKP,kBAAkB,CAACE,MAAM,CAAC,CAACO,IAAI,CAAEC,MAAM,IAAK;QAC7CJ,QAAQ,CAACI,MAAM,IAAI,EAAE,CAAC;MAC1B,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACH,UAAU,EAAEL,MAAM,CAAC,CAAC;EAExB,OAAOC,eAAe,IAAIC,aAAa,EAAEI,gBAAgB,IAAIH,KAAK;AACtE,CAAC","ignoreList":[]}

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

@@ -0,0 +1,354 @@
+import { useDevice, useFunctions, useValues } from 'chayns-api';
+import React, { forwardRef, Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { calculateContentWidth } from '../../utils/calculate';
+import { getIsTouch } from '../../utils/environment';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import Icon from '../icon/Icon';
+import ComboBoxItem from './combobox-item/ComboBoxItem';
+import { StyledComboBox, StyledComboBoxBody, StyledComboBoxClearIconWrapper, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxInput, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledComboBoxPlaceholderText, StyledComboBoxPrefix, StyledComboBoxPrefixAndPlaceholderWrapper, StyledComboBoxTopic } from './ComboBox.styles';
+import DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';
+import { DropdownDirection } from '../../types/dropdown';
+import { useElementSize } from '../../hooks/element';
+const ComboBox = /*#__PURE__*/forwardRef(({
+  bodyWidth,
+  direction = DropdownDirection.RIGHT,
+  isDisabled = false,
+  lists,
+  maxHeight = 280,
+  onSelect,
+  placeholder,
+  prefix,
+  container,
+  selectedItem,
+  shouldShowBigImage,
+  shouldShowClearIcon,
+  shouldShowRoundImage,
+  onInputFocus,
+  shouldUseFullWidth = false,
+  onInputChange,
+  shouldUseCurrentItemWidth = false,
+  onInputBlur,
+  shouldShowTransparentBackground = false,
+  inputValue,
+  shouldDropDownUseMaxItemWidth = false
+}, ref) => {
+  const [internalSelectedItem, setInternalSelectedItem] = useState();
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [minWidth, setMinWidth] = useState(undefined);
+  const [bodyMinWidth, setBodyMinWidth] = useState(0);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const isInputFocused = useRef(false);
+  const styledComboBoxElementRef = useRef(null);
+  const contentRef = useRef(null);
+  const parentSize = useElementSize(styledComboBoxElementRef, {
+    shouldUseParentElement: true
+  });
+  const functions = useFunctions();
+  const values = useValues();
+  const isTouch = getIsTouch();
+  const {
+    browser
+  } = useDevice();
+  const areaProvider = useContext(AreaContext);
+  useEffect(() => {
+    if (shouldUseFullWidth && parentSize) {
+      setMinWidth(parentSize.width);
+    }
+  }, [parentSize, shouldUseFullWidth]);
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const shouldDisableActions = useMemo(() => {
+    if (!selectedItem) {
+      return false;
+    }
+    const combinedLists = lists.flatMap(list => list.list);
+    return combinedLists.length === 1 && combinedLists.some(item => item.value === selectedItem.value);
+  }, [lists, selectedItem]);
+  const contentHeight = useMemo(() => {
+    const flatItems = lists.flatMap(list => list.list);
+    let result = flatItems.length * 36;
+    if (lists.length > 1) {
+      result += lists.length * 36;
+    }
+    if (maxHeight < result) {
+      result = maxHeight;
+    }
+    return result;
+  }, [lists, maxHeight]);
+  const handleInputFocus = useCallback(event => {
+    isInputFocused.current = true;
+    onInputFocus?.(event);
+  }, [onInputFocus]);
+  const handleInputBlur = useCallback(event => {
+    isInputFocused.current = false;
+    onInputBlur?.(event);
+  }, [onInputBlur]);
+  const handleOpen = useCallback(() => {
+    setIsAnimating(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+
+  /**
+   * This function sets the selected item
+   */
+  const handleSetSelectedItem = useCallback(itemToSelect => {
+    if (typeof onSelect === 'function') {
+      const onSelectResult = onSelect(itemToSelect);
+      if (onSelectResult === false) {
+        return;
+      }
+      if (onSelectResult instanceof Promise) {
+        void onSelectResult.then(shouldPreventSelection => {
+          if (shouldPreventSelection) return;
+          setInternalSelectedItem(itemToSelect);
+          setIsAnimating(false);
+        });
+        return;
+      }
+    }
+    setInternalSelectedItem(itemToSelect);
+    setIsAnimating(false);
+  }, [onSelect]);
+  const handleClear = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    handleSetSelectedItem(undefined);
+  }, [handleSetSelectedItem]);
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (!isAnimating) return;
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        const children = contentRef.current?.children;
+        if (!children || children.length === 0) return;
+        const stepDirection = e.key === 'ArrowUp' ? -1 : 1;
+        let newIndex = focusedIndex ?? -1;
+        let attempts = 0;
+        do {
+          newIndex = (newIndex + stepDirection + children.length) % children.length;
+          const newElement = children[newIndex];
+          let shouldSkip = false;
+          if (newElement.id.startsWith('combobox-group--') || newElement.id.endsWith('--disabled-item')) {
+            shouldSkip = true;
+          }
+          if (!shouldSkip) break;
+          attempts++;
+        } while (attempts < children.length);
+        if (focusedIndex !== null) {
+          const prevElement = children[focusedIndex];
+          prevElement.tabIndex = -1;
+        }
+        setFocusedIndex(newIndex);
+        const focusedElement = children[newIndex];
+        focusedElement.tabIndex = 0;
+        focusedElement.focus();
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
+        const element = contentRef.current?.children[focusedIndex];
+        if (!element) return;
+        const {
+          id
+        } = element;
+        let newSelectedItem;
+        lists.some(list => {
+          newSelectedItem = list.list.find(({
+            value
+          }) => String(value) === id.replace('combobox-item__', ''));
+          return !!newSelectedItem;
+        });
+        if (newSelectedItem) {
+          handleSetSelectedItem(newSelectedItem);
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
+
+  /**
+   * This function calculates the greatest width
+   */
+  useEffect(() => {
+    const allItems = lists.flatMap(list => list.list);
+    let baseWidth = calculateContentWidth([...allItems, {
+      text: placeholder,
+      value: 'placeholder'
+    }, ...(selectedItem ? [selectedItem] : [])], functions, values);
+    if (shouldDropDownUseMaxItemWidth) {
+      baseWidth += 20 + 2; // 20px padding left and right and 2px border
+      setBodyMinWidth(baseWidth);
+      setMinWidth(baseWidth);
+      return;
+    }
+    const hasImage = [selectedItem, ...allItems].some(item => item?.imageUrl);
+    const hasIcon = [selectedItem, ...allItems].some(item => item?.icons);
+    const parentWidth = styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;
+    const paddingWidth = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear icon
+    const imageWidth = hasImage ? 32 : 0; // image width + gap if images present
+    const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present
+
+    let prefixWidth = 0;
+    if (prefix) {
+      const prefixTextWidth = calculateContentWidth([{
+        text: prefix,
+        value: 'prefix'
+      }], functions, values) + 5;
+      prefixWidth = Math.max(prefixTextWidth, 32);
+    }
+    const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;
+    let tmpMinWidth = calculatedWidth;
+    let tmpBodyMinWidth = calculatedWidth;
+
+    // Full width settings
+    if (shouldUseFullWidth) {
+      tmpMinWidth = parentWidth;
+      tmpBodyMinWidth = parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;
+    }
+    // Current item width settings
+    else if (shouldUseCurrentItemWidth && internalSelectedItem) {
+      const itemWidth = calculateContentWidth([internalSelectedItem], functions, values) + paddingWidth + imageWidth + iconWidth + prefixWidth;
+      tmpMinWidth = itemWidth;
+      tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
+    }
+    if (tmpMinWidth > parentWidth) {
+      tmpMinWidth = parentWidth;
+    }
+    if (tmpBodyMinWidth > parentWidth) {
+      tmpBodyMinWidth = parentWidth;
+    }
+    setMinWidth(tmpMinWidth);
+    setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);
+  }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem, functions, values, shouldDropDownUseMaxItemWidth]);
+
+  /**
+   * This function sets the external selected item
+   */
+  useEffect(() => {
+    setIsAnimating(false);
+    setInternalSelectedItem(selectedItem);
+  }, [selectedItem]);
+  const placeholderImageUrl = useMemo(() => {
+    if (selectedItem) {
+      return selectedItem.imageUrl;
+    }
+    if (internalSelectedItem) {
+      return internalSelectedItem.imageUrl;
+    }
+    return undefined;
+  }, [internalSelectedItem, selectedItem]);
+  const placeholderIcon = useMemo(() => {
+    if (selectedItem) {
+      return selectedItem.icons;
+    }
+    if (internalSelectedItem) {
+      return internalSelectedItem.icons;
+    }
+    return undefined;
+  }, [internalSelectedItem, selectedItem]);
+
+  /**
+   * This function resets the placeholder
+   */
+  const placeholderText = useMemo(() => {
+    let text = placeholder;
+    if (selectedItem) {
+      text = selectedItem.text;
+    } else if (internalSelectedItem) {
+      text = internalSelectedItem.text;
+    }
+    return text;
+  }, [internalSelectedItem, placeholder, selectedItem]);
+  const shouldShowRoundPlaceholderImage = useMemo(() => {
+    const selectedItemList = lists.find(list => list.list.some(({
+      value
+    }) => value === (selectedItem?.value ?? internalSelectedItem?.value)));
+    return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;
+  }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);
+
+  /**
+   * This function opens the content of the combobox
+   */
+  const handleHeaderClick = useCallback(() => {
+    if (!isDisabled && !isInputFocused.current) {
+      if (isAnimating) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
+    }
+  }, [handleClose, handleOpen, isAnimating, isDisabled]);
+  useImperativeHandle(ref, () => ({
+    hide: handleClose,
+    show: handleOpen
+  }), [handleClose, handleOpen]);
+  const comboBoxGroups = useMemo(() => lists.map(list => /*#__PURE__*/React.createElement(Fragment, {
+    key: list.groupName ?? 'default-group'
+  }, list.groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, {
+    id: `combobox-group--${list.groupName}`
+  }, list.groupName), list.list.map(item => /*#__PURE__*/React.createElement(ComboBoxItem, {
+    key: `item-${item.text}`,
+    item: item,
+    isSelected: selectedItem ? item.value === selectedItem.value : false,
+    onSelect: handleSetSelectedItem,
+    shouldShowBigImage: shouldShowBigImage,
+    shouldShowRoundImage: list.shouldShowRoundImage ?? shouldShowRoundImage
+  })))), [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
+    ref: styledComboBoxElementRef,
+    $minWidth: minWidth,
+    $shouldUseFullWidth: shouldUseFullWidth,
+    $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth
+  }, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
+    $direction: direction,
+    onClick: handleHeaderClick,
+    $isOpen: isAnimating,
+    $isTouch: isTouch,
+    $shouldShowTransparentBackground: shouldShowTransparentBackground,
+    $isDisabled: isDisabled,
+    $shouldChangeColor: shouldChangeColor,
+    $shouldShowBigImage: shouldShowBigImage
+  }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, null, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
+    $shouldReduceOpacity: !selectedItem && !internalSelectedItem
+  }, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
+    src: placeholderImageUrl,
+    $shouldShowBigImage: shouldShowBigImage,
+    $shouldShowRoundImage: shouldShowRoundPlaceholderImage
+  }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
+    icons: placeholderIcon
+  }), typeof inputValue === 'string' ? /*#__PURE__*/React.createElement(StyledComboBoxInput, {
+    disabled: isDisabled,
+    value: inputValue,
+    onChange: onInputChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    placeholder: placeholderText
+  }) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), shouldShowClearIcon && internalSelectedItem && /*#__PURE__*/React.createElement(StyledComboBoxClearIconWrapper, {
+    onClick: handleClear
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-times']
+  })), !shouldDisableActions && /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, {
+    $shouldShowBorderLeft: shouldShowClearIcon === true && internalSelectedItem !== undefined
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-chevron-down']
+  }))), styledComboBoxElementRef.current && /*#__PURE__*/React.createElement(DropdownBodyWrapper, {
+    anchorElement: styledComboBoxElementRef.current,
+    bodyWidth: bodyWidth,
+    contentHeight: contentHeight,
+    onClose: handleClose,
+    direction: direction,
+    container: container,
+    shouldShowDropdown: isAnimating,
+    minBodyWidth: bodyWidth ?? bodyMinWidth,
+    maxHeight: maxHeight
+  }, /*#__PURE__*/React.createElement(StyledComboBoxBody, {
+    $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
+    $maxHeight: maxHeight,
+    $minWidth: bodyWidth ?? bodyMinWidth,
+    $browser: browser?.name,
+    ref: contentRef,
+    tabIndex: 0
+  }, comboBoxGroups))), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, shouldShowTransparentBackground, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, bodyWidth, contentHeight, handleClose, container, bodyMinWidth, maxHeight, browser?.name, comboBoxGroups]);
+});
+ComboBox.displayName = 'ComboBox';
+export default ComboBox;
+//# sourceMappingURL=ComboBox.js.map