@chayns-components/core 5.0.0-beta.7 → 5.0.0-beta.700

package/lib/esm/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useMemo","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","handleChange","event","target","checked","uuid","lineHeight","undefined","createElement","disabled","id","type","className","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [children, shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SAASC,cAAc,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAiC5F,MAAMC,QAA2B,GAAGC,IAAA,IAQ9B;EAAA,IAR+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,cAAc;IACdC,QAAQ;IACRC,kBAAkB;IAClBC,kBAAkB,GAAG;EACzB,CAAC,GAAAP,IAAA;EACG,MAAM,CAACQ,QAAQ,EAAEC,WAAW,CAAC,GAAGhB,QAAQ,CAACS,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMQ,YAAY,GAAGnB,WAAW,CAC3BoB,KAAoC,IAAK;IACtCF,WAAW,CAACE,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOR,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACM,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACN,QAAQ,CACb,CAAC;EAED,MAAMS,IAAI,GAAGpB,OAAO,CAAC,CAAC;EAEtB,MAAMqB,UAAU,GAAGvB,OAAO,CACtB,MAAO,CAACS,QAAQ,IAAIM,kBAAkB,GAAGS,SAAS,GAAGrB,yBAAyB,CAAC,CAAE,EACjF,CAACM,QAAQ,EAAEM,kBAAkB,CACjC,CAAC;EAED,oBACIjB,KAAA,CAAA2B,aAAA,CAACrB,cAAc,qBACXN,KAAA,CAAA2B,aAAA,CAACpB,mBAAmB;IAChBgB,OAAO,EAAEX,SAAU;IACnBgB,QAAQ,EAAEf,UAAW;IACrBgB,EAAE,EAAEL,IAAK;IACTT,QAAQ,EAAEK,YAAa;IACvBU,IAAI,EAAC;EAAU,CAClB,CAAC,eACF9B,KAAA,CAAA2B,aAAA,CAACnB,mBAAmB;IAChBuB,SAAS,EAAEjB,cAAe;IAC1BkB,OAAO,EAAER,IAAK;IACdS,UAAU,EAAErB,SAAS,IAAIM,QAAS;IAClCgB,WAAW,EAAErB,UAAW;IACxBsB,mBAAmB,EAAEnB,kBAAmB;IACxCoB,WAAW,EAAEX;EAAW,GAEvBd,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDF,QAAQ,CAAC4B,WAAW,GAAG,UAAU;AAEjC,eAAe5B,QAAQ","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.styles.js

@@ -0,0 +1,142 @@
+import styled, { css } from 'styled-components';
+import { getCheckBoxPosition } from '../../utils/checkBox';
+export const StyledCheckbox = styled.div`
+    align-items: center;
+    display: flex;
+    position: relative;
+    width: 100%;
+`;
+export const StyledCheckboxInput = styled.input`
+    display: none;
+`;
+export const StyledCheckboxLabel = styled.label`
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    cursor: ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return $isDisabled ? 'default' : 'pointer';
+}};
+    opacity: ${_ref3 => {
+  let {
+    $isDisabled
+  } = _ref3;
+  return $isDisabled ? 0.5 : 1;
+}};
+    padding-left: ${_ref4 => {
+  let {
+    $shouldShowAsSwitch
+  } = _ref4;
+  return $shouldShowAsSwitch ? '48px' : '20px';
+}};
+    transition: opacity 0.2s ease;
+    user-select: none;
+    width: 100%;
+
+    &:after {
+        ${_ref5 => {
+  let {
+    $isChecked,
+    $shouldShowAsSwitch,
+    $lineHeight,
+    theme
+  } = _ref5;
+  return $shouldShowAsSwitch ? css`
+                      background-color: white;
+                      border-radius: 50%;
+                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
+                      height: 16px;
+                      left: 7px;
+                      top: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px` : '50%'};
+                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
+                      transition: transform 0.2s ease;
+                      width: 16px;
+                  ` : css`
+                      border-right: 2px solid #fff;
+                      border-bottom: 2px solid #fff;
+                      height: 10px;
+                      left: 2px;
+                      opacity: ${$isChecked ? 1 : 0};
+                      top: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
+                      transform: rotateZ(37deg) translateY(-50%);
+                      transition: opacity 0.2s ease;
+                      width: 5.5px;
+                  `;
+}}
+
+        content: ' ';
+        position: absolute;
+    }
+
+    &:before {
+        background-color: ${_ref6 => {
+  let {
+    $isChecked,
+    $shouldShowAsSwitch,
+    theme
+  } = _ref6;
+  if ($shouldShowAsSwitch) {
+    return $isChecked ? theme.green : theme.red;
+  }
+  return $isChecked ? theme['408'] : theme['403'];
+}};
+        
+        ${_ref7 => {
+  let {
+    $shouldShowAsSwitch,
+    theme
+  } = _ref7;
+  return !$shouldShowAsSwitch && css`
+                border: 1px solid rgba(${theme['409-rgb']}, 0.5);
+            `;
+}}
+        
+        border-radius: ${_ref8 => {
+  let {
+    $shouldShowAsSwitch
+  } = _ref8;
+  return $shouldShowAsSwitch ? '100px' : 0;
+}};
+        content: ' ';
+        height: ${_ref9 => {
+  let {
+    $shouldShowAsSwitch
+  } = _ref9;
+  return $shouldShowAsSwitch ? '13px' : '15px';
+}};
+        left: ${_ref10 => {
+  let {
+    $shouldShowAsSwitch
+  } = _ref10;
+  return $shouldShowAsSwitch ? '10px' : 0;
+}};
+        position: absolute;
+        transition: background-color 0.2s ease;
+        width: ${_ref11 => {
+  let {
+    $shouldShowAsSwitch
+  } = _ref11;
+  return $shouldShowAsSwitch ? '28px' : '15px';
+}};
+        ${_ref12 => {
+  let {
+    $lineHeight,
+    theme,
+    $shouldShowAsSwitch
+  } = _ref12;
+  return $lineHeight ? css`
+                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
+                  ` : css`
+                      top: 50%;
+                      transform: translateY(-50%);
+                  `;
+}}
+        }
+    }
+`;
+//# sourceMappingURL=Checkbox.styles.js.map

package/lib/esm/components/checkbox/Checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    width: 100%;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxLabelProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxLabelProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n        \n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n        \n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxLabelProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n        }\n    }\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,141 @@
+import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
+import { useSite } from 'chayns-api';
+import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import { getDesignSettings, getParagraphFormat } from '../../api/theme/get';
+import { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';
+var ColorMode = /*#__PURE__*/function (ColorMode) {
+  ColorMode[ColorMode["Classic"] = 0] = "Classic";
+  ColorMode[ColorMode["Dark"] = 1] = "Dark";
+  ColorMode[ColorMode["Light"] = 2] = "Light";
+  return ColorMode;
+}(ColorMode || {}); // ToDo remove type after the framer-motion bug is Fixed
+const GlobalStyle = createGlobalStyle`
+    .ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+const ColorSchemeProvider = _ref => {
+  let {
+    children,
+    color,
+    colorMode,
+    cssVariables = {},
+    secondaryColor,
+    style = {},
+    designSettings
+  } = _ref;
+  const [colors, setColors] = useState({});
+  const [theme, setTheme] = useState({});
+  const [internalDesignSettings, setInternalDesignSettings] = useState();
+  const [internalParagraphFormat, setInternalParagraphFormat] = useState();
+
+  // Empty object is used to prevent error if ColorSchemeProvider is rendered on server
+  const {
+    color: internalColor,
+    colorMode: internalColorMode
+  } = useSite() ?? {};
+  useEffect(() => {
+    if (designSettings) {
+      setInternalDesignSettings(designSettings);
+      return;
+    }
+    void getDesignSettings().then(result => {
+      setInternalDesignSettings(result);
+    });
+    void getParagraphFormat().then(result => {
+      setInternalParagraphFormat(result);
+    });
+  }, [designSettings]);
+  useEffect(() => {
+    const availableColors = getAvailableColorList();
+    const newColors = {};
+    const newTheme = {};
+    availableColors.forEach(colorName => {
+      const hexColor = getColorFromPalette(colorName, {
+        color: color ?? internalColor,
+        colorMode: colorMode ?? internalColorMode,
+        secondaryColor
+      });
+      if (hexColor) {
+        const rgbColor = hexToRgb255(hexColor);
+        newColors[`--chayns-color--${colorName}`] = hexColor;
+        newTheme[colorName] = hexColor;
+        if (rgbColor) {
+          newColors[`--chayns-color-rgb--${colorName}`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+          newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+        }
+      }
+    });
+    switch (colorMode ?? internalColorMode) {
+      case ColorMode.Light:
+        newTheme.colorMode = 'light';
+        break;
+      case ColorMode.Dark:
+        newTheme.colorMode = 'dark';
+        break;
+      default:
+        newTheme.colorMode = 'classic';
+        break;
+    }
+    if (internalDesignSettings) {
+      Object.keys(internalDesignSettings).forEach(key => {
+        if (key === 'iconStyle') {
+          newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);
+          return;
+        }
+
+        // ToDo: Find better solution
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        newTheme[key] = internalDesignSettings[key];
+      });
+    }
+    if (internalParagraphFormat) {
+      const {
+        colorResult,
+        themeResult
+      } = getHeadlineColorSelector(internalParagraphFormat);
+
+      // Update chayns-colors
+      Object.keys(colorResult).forEach(key => {
+        // ToDo: Find better solution
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        newColors[key] = colorResult[key];
+      });
+
+      // Update Theme
+      Object.keys(themeResult).forEach(key => {
+        // ToDo: Find better solution
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        newTheme[key] = themeResult[key];
+      });
+    }
+    newTheme.fontSize = getFontSize();
+    setTheme(newTheme);
+    setColors(newColors);
+  }, [color, colorMode, internalColor, internalColorMode, internalDesignSettings, internalParagraphFormat, secondaryColor]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("link", {
+    rel: "stylesheet",
+    href: "https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...colors,
+      ...cssVariables,
+      ...style
+    }
+  }, children), /*#__PURE__*/React.createElement(GlobalStyle, null));
+};
+ColorSchemeProvider.displayName = 'ColorSchemeProvider';
+export default ColorSchemeProvider;
+//# sourceMappingURL=ColorSchemeProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","useSite","React","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":"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","ignoreList":[]}

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

@@ -0,0 +1,300 @@
+import { getDevice } from 'chayns-api';
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ComboBoxDirection } from '../../types/comboBox';
+import { calculateContentHeight, calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';
+import { getIsTouch } from '../../utils/environment';
+import Icon from '../icon/Icon';
+import ComboBoxItem from './combobox-item/ComboBoxItem';
+import { StyledComboBox, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledMotionComboBoxBody } from './ComboBox.styles';
+const ComboBox = _ref => {
+  let {
+    direction = ComboBoxDirection.BOTTOM,
+    isDisabled = false,
+    list,
+    maxHeight = '280px',
+    onSelect,
+    placeholder,
+    container = document.body,
+    selectedItem,
+    shouldShowRoundImage,
+    shouldUseFullWidth = false
+  } = _ref;
+  const [item, setItem] = useState();
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [minWidth, setMinWidth] = useState(0);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const [overflowY, setOverflowY] = useState('hidden');
+  const [portal, setPortal] = useState();
+  const [internalCoordinates, setInternalCoordinates] = useState({
+    x: 0,
+    y: 0
+  });
+  const styledComboBoxElementRef = useRef(null);
+  const contentRef = useRef(null);
+  const {
+    browser
+  } = getDevice();
+  const isTouch = getIsTouch();
+  const handleClick = useCallback(event => {
+    if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target)) {
+      setIsAnimating(false);
+    }
+  }, [styledComboBoxElementRef]);
+  const handleOpen = useCallback(() => {
+    if (styledComboBoxElementRef.current) {
+      const {
+        x,
+        y,
+        height
+      } = styledComboBoxElementRef.current.getBoundingClientRect();
+      setInternalCoordinates({
+        x,
+        y: direction === ComboBoxDirection.TOP ? y : y + height
+      });
+      setIsAnimating(true);
+    }
+  }, [direction]);
+  const handleClose = useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+
+  /**
+   * This function adds an event listener to the document to close the combobox when the user clicks outside of it
+   */
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [handleClick, styledComboBoxElementRef]);
+
+  /**
+   * This function sets the selected item
+   */
+  const handleSetSelectedItem = useCallback(itemToSelect => {
+    setItem(itemToSelect);
+    setIsAnimating(false);
+    if (onSelect) {
+      onSelect(itemToSelect);
+    }
+  }, [onSelect]);
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (!isAnimating) {
+        return;
+      }
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        const children = contentRef.current?.children;
+        if (children && children.length > 0) {
+          const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          setFocusedIndex(newIndex);
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+        }
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
+        const element = contentRef.current?.children[focusedIndex];
+        if (!element) {
+          return;
+        }
+        const {
+          id
+        } = element;
+        const newSelectedItem = list.find(_ref2 => {
+          let {
+            value
+          } = _ref2;
+          return String(value) === id.replace('combobox-item__', '');
+        });
+        if (!newSelectedItem) {
+          return;
+        }
+        handleSetSelectedItem(newSelectedItem);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSetSelectedItem, isAnimating, list]);
+
+  /**
+   * This function calculates the greatest width
+   */
+  useEffect(() => {
+    const isAtLeastOneItemWithImageGiven = list.some(_ref3 => {
+      let {
+        imageUrl
+      } = _ref3;
+      return imageUrl;
+    });
+    const isAtLeastOneItemWithIconGiven = list.some(_ref4 => {
+      let {
+        icons
+      } = _ref4;
+      return icons;
+    });
+    const textArray = list.map(_ref5 => {
+      let {
+        text
+      } = _ref5;
+      return text;
+    });
+    const contentHeight = calculateContentHeight(textArray);
+    const maxHeightInPixels = getMaxHeightInPixels(maxHeight, styledComboBoxElementRef.current ?? document.body);
+    setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');
+    textArray.push(placeholder);
+    const width = styledComboBoxElementRef.current?.getBoundingClientRect().width ?? 0;
+
+    // 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, {
+      text: placeholder,
+      value: 'placeholder'
+    }]) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0) + (isAtLeastOneItemWithIconGiven ? 40 : 0));
+  }, [list, maxHeight, placeholder, shouldUseFullWidth]);
+
+  /**
+   * This function sets the external selected item
+   */
+  useEffect(() => {
+    setIsAnimating(false);
+    setItem(selectedItem);
+  }, [selectedItem]);
+  const placeholderImageUrl = useMemo(() => {
+    if (selectedItem) {
+      return selectedItem.imageUrl;
+    }
+    if (item) {
+      return item.imageUrl;
+    }
+    return undefined;
+  }, [item, selectedItem]);
+  const placeholderIcon = useMemo(() => {
+    if (selectedItem) {
+      return selectedItem.icons;
+    }
+    if (item) {
+      return item.icons;
+    }
+    return undefined;
+  }, [item, selectedItem]);
+
+  /**
+   * This function resets the placeholder
+   */
+  const placeholderText = useMemo(() => {
+    let text = placeholder;
+    if (selectedItem) {
+      text = selectedItem.text;
+    } else if (item) {
+      text = item.text;
+    }
+    return text;
+  }, [item, placeholder, selectedItem]);
+
+  /**
+   * This function opens the content of the combobox
+   */
+  const handleHeaderClick = useCallback(() => {
+    if (!isDisabled) {
+      if (isAnimating) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
+    }
+  }, [handleClose, handleOpen, isAnimating, isDisabled]);
+  const comboBoxItems = useMemo(() => list.map(_ref6 => {
+    let {
+      imageUrl,
+      icons,
+      suffixElement,
+      text,
+      value
+    } = _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]);
+  const bodyStyles = useMemo(() => {
+    let styles = {
+      left: internalCoordinates.x,
+      top: internalCoordinates.y
+    };
+    if (direction === ComboBoxDirection.TOP) {
+      styles = {
+        ...styles,
+        transform: 'translateY(-100%)'
+      };
+    }
+    return styles;
+  }, [direction, internalCoordinates.x, internalCoordinates.y]);
+  useEffect(() => {
+    setPortal(() => /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AnimatePresence, {
+      initial: false
+    }, isAnimating && /*#__PURE__*/React.createElement(StyledMotionComboBoxBody, {
+      $browser: browser?.name,
+      animate: {
+        height: 'fit-content',
+        opacity: 1
+      },
+      $overflowY: overflowY,
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      $maxHeight: maxHeight,
+      $minWidth: minWidth,
+      style: bodyStyles,
+      $direction: direction,
+      transition: {
+        duration: 0.2
+      },
+      tabIndex: 0,
+      ref: contentRef
+    }, comboBoxItems)), container));
+  }, [bodyStyles, browser?.name, comboBoxItems, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
+    ref: styledComboBoxElementRef,
+    $shouldUseFullWidth: shouldUseFullWidth,
+    $minWidth: minWidth
+  }, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
+    $direction: direction,
+    onClick: handleHeaderClick,
+    $isOpen: isAnimating,
+    $isTouch: isTouch,
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, null, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
+    src: placeholderImageUrl,
+    shouldShowRoundImage: shouldShowRoundImage
+  }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
+    icons: placeholderIcon
+  }), placeholderText, item && item.suffixElement && item.suffixElement), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-chevron-down']
+  }))), portal), [direction, handleHeaderClick, isAnimating, isDisabled, isTouch, item, minWidth, placeholderIcon, placeholderImageUrl, placeholderText, portal, shouldShowRoundImage, shouldUseFullWidth]);
+};
+ComboBox.displayName = 'ComboBox';
+export default ComboBox;
+//# sourceMappingURL=ComboBox.js.map