@chayns-components/core 5.0.0-beta.997 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBoxItem","icons","id","imageBackground","imageUrl","isDisabled","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","textStyles","text","value","handleItemClick","useCallback","isTouch","getIsTouch","useMemo","createElement","StyledComboBoxItem","String","onClick","$isDisabled","$isSelected","$isTouch","StyledComboBoxItemImage","src","$background","$shouldShowBigImage","trim","$shouldShowRoundImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","$text","$subtext","StyledComboBoxItemContentHeaderWrapper","as","tagName","style","styles","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext","displayName","_default","exports"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n    StyledComboBoxItem,\n    StyledComboBoxItemContent,\n    StyledComboBoxItemContentHeader,\n    StyledComboBoxItemContentHeaderRightElement,\n    StyledComboBoxItemContentHeaderWrapper,\n    StyledComboBoxItemContentHeaderWrapperText,\n    StyledComboBoxItemContentSubtext,\n    StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    icons?: IComboBoxItem['icons'];\n    id: IComboBoxItem['value'];\n    imageBackground?: IComboBoxItem['imageBackground'];\n    imageUrl: IComboBoxItem['imageUrl'];\n    isDisabled?: IComboBoxItem['isDisabled'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    rightElement: IComboBoxItem['rightElement'];\n    shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    subtext: IComboBoxItem['subtext'];\n    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n    textStyles?: IComboBoxItem['textStyles'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    icons,\n    id,\n    imageBackground,\n    imageUrl,\n    isDisabled,\n    isSelected,\n    onSelect,\n    rightElement,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    subtext,\n    suffixElement,\n    textStyles,\n    text,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        if (!isDisabled) {\n            onSelect({ text, value, suffixElement, imageUrl, icons });\n        }\n    }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);\n\n    const isTouch = getIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n                onClick={handleItemClick}\n                $isDisabled={isDisabled}\n                $isSelected={isSelected}\n                $isTouch={isTouch}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $background={imageBackground}\n                        $shouldShowBigImage={\n                            shouldShowBigImage ||\n                            (typeof subtext === 'string' && subtext.trim() !== '')\n                        }\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                <StyledComboBoxItemContent>\n                    <StyledComboBoxItemContentHeader $text={text} $subtext={subtext}>\n                        <StyledComboBoxItemContentHeaderWrapper\n                            as={textStyles?.tagName}\n                            style={textStyles?.styles}\n                        >\n                            <StyledComboBoxItemContentHeaderWrapperText>\n                                {text}\n                            </StyledComboBoxItemContentHeaderWrapperText>\n                            {suffixElement}\n                        </StyledComboBoxItemContentHeaderWrapper>\n                        {rightElement && (\n                            <StyledComboBoxItemContentHeaderRightElement>\n                                {rightElement}\n                            </StyledComboBoxItemContentHeaderRightElement>\n                        )}\n                    </StyledComboBoxItemContentHeader>\n                    {subtext && (\n                        <StyledComboBoxItemContentSubtext>\n                            {subtext}\n                        </StyledComboBoxItemContentSubtext>\n                    )}\n                </StyledComboBoxItemContent>\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageBackground,\n            imageUrl,\n            isDisabled,\n            isSelected,\n            isTouch,\n            rightElement,\n            shouldShowBigImage,\n            shouldShowRoundImage,\n            subtext,\n            suffixElement,\n            text,\n            textStyles?.styles,\n            textStyles?.tagName,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBoxItem","item","isSelected","onSelect","shouldShowBigImage","shouldShowRoundImage","icons","imageUrl","isDisabled","imageBackground","suffixElement","textStyles","rightElement","text","value","subtext","id","handleItemClick","useCallback","isTouch","useIsTouch","useMemo","createElement","StyledComboBoxItem","String","onClick","$isDisabled","$isSelected","$isTouch","StyledComboBoxItemImage","src","$background","$shouldShowBigImage","trim","$shouldShowRoundImage","StyledComboBoxItemIconsWrapper","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","$text","$subtext","StyledComboBoxItemContentHeaderWrapper","as","tagName","style","styles","className","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext","displayName","_default","exports"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { useIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n    StyledComboBoxItem,\n    StyledComboBoxItemContent,\n    StyledComboBoxItemContentHeader,\n    StyledComboBoxItemContentHeaderRightElement,\n    StyledComboBoxItemContentHeaderWrapper,\n    StyledComboBoxItemContentHeaderWrapperText,\n    StyledComboBoxItemContentSubtext,\n    StyledComboBoxItemIconsWrapper,\n    StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    item: IComboBoxItem;\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    item,\n    isSelected,\n    onSelect,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n}) => {\n    const {\n        icons,\n        imageUrl,\n        isDisabled,\n        imageBackground,\n        suffixElement,\n        textStyles,\n        rightElement,\n        text,\n        value,\n        subtext,\n    } = item;\n    const id = value;\n\n    const handleItemClick = useCallback(() => {\n        if (!isDisabled) {\n            onSelect({ text, value, suffixElement, imageUrl, icons });\n        }\n    }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);\n\n    const isTouch = useIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}${isDisabled ? '--disabled-item' : ''}`}\n                onClick={handleItemClick}\n                $isDisabled={isDisabled}\n                $isSelected={isSelected}\n                $isTouch={isTouch}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $background={imageBackground}\n                        $shouldShowBigImage={\n                            shouldShowBigImage ||\n                            (typeof subtext === 'string' && subtext.trim() !== '')\n                        }\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && (\n                    <StyledComboBoxItemIconsWrapper>\n                        <Icon icons={icons} />\n                    </StyledComboBoxItemIconsWrapper>\n                )}\n                <StyledComboBoxItemContent>\n                    <StyledComboBoxItemContentHeader $text={text} $subtext={subtext}>\n                        <StyledComboBoxItemContentHeaderWrapper\n                            as={textStyles?.tagName}\n                            style={textStyles?.styles}\n                            className={textStyles?.className}\n                        >\n                            <StyledComboBoxItemContentHeaderWrapperText>\n                                {text}\n                            </StyledComboBoxItemContentHeaderWrapperText>\n                            {suffixElement}\n                        </StyledComboBoxItemContentHeaderWrapper>\n                        {rightElement && (\n                            <StyledComboBoxItemContentHeaderRightElement>\n                                {rightElement}\n                            </StyledComboBoxItemContentHeaderRightElement>\n                        )}\n                    </StyledComboBoxItemContentHeader>\n                    {subtext && (\n                        <StyledComboBoxItemContentSubtext>\n                            {subtext}\n                        </StyledComboBoxItemContentSubtext>\n                    )}\n                </StyledComboBoxItemContent>\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageBackground,\n            imageUrl,\n            isDisabled,\n            isSelected,\n            isTouch,\n            rightElement,\n            shouldShowBigImage,\n            shouldShowRoundImage,\n            subtext,\n            suffixElement,\n            text,\n            textStyles?.styles,\n            textStyles?.tagName,\n            textStyles?.className,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledComboBoxItemImage = exports.StyledComboBoxItemContentSubtext = exports.StyledComboBoxItemContentHeaderWrapperText = exports.StyledComboBoxItemContentHeaderWrapper = exports.StyledComboBoxItemContentHeaderRightElement = exports.StyledComboBoxItemContentHeader = exports.StyledComboBoxItemContent = exports.StyledComboBoxItem = void 0;
+exports.StyledComboBoxItemImage = exports.StyledComboBoxItemIconsWrapper = exports.StyledComboBoxItemContentSubtext = exports.StyledComboBoxItemContentHeaderWrapperText = exports.StyledComboBoxItemContentHeaderWrapper = exports.StyledComboBoxItemContentHeaderRightElement = exports.StyledComboBoxItemContentHeader = exports.StyledComboBoxItemContent = 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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.default.div`
     align-items: center;
     background-color: ${({
@@ -17,8 +16,10 @@ const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.defaul
   theme
 }) => theme.text};
     display: flex;
+    flex: 0 0 auto;
     gap: 10px;
-    padding: 4px 10px;
+    min-height: 38px;
+    padding: 8px 10px;
     transition: background-color 0.2s ease-in-out;
 
     ${({
@@ -61,10 +62,19 @@ const StyledComboBoxItemImage = exports.StyledComboBoxItemImage = _styledCompone
     height: ${({
   $shouldShowBigImage
 }) => $shouldShowBigImage ? '40px' : '22px'};
+    object-fit: cover;
     width: ${({
   $shouldShowBigImage
 }) => $shouldShowBigImage ? '40px' : '22px'};
 `;
+const StyledComboBoxItemIconsWrapper = exports.StyledComboBoxItemIconsWrapper = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    height: 100%;
+    justify-content: center;
+    width: 20px;
+`;
 const StyledComboBoxItemContent = exports.StyledComboBoxItemContent = _styledComponents.default.div`
     display: flex;
     flex: 1 1 auto;
@@ -77,14 +87,6 @@ const StyledComboBoxItemContentHeader = exports.StyledComboBoxItemContentHeader
     align-items: center;
     display: flex;
     justify-content: space-between;
-    font-weight: ${({
-  $text,
-  $subtext
-}) => $text && $subtext ? 'bold' : 'normal'};
-    font-size: ${({
-  $text,
-  $subtext
-}) => $text && $subtext && '17px'};
 `;
 const StyledComboBoxItemContentHeaderWrapper = exports.StyledComboBoxItemContentHeaderWrapper = _styledComponents.default.div`
     display: flex;
@@ -102,7 +104,7 @@ const StyledComboBoxItemContentHeaderRightElement = exports.StyledComboBoxItemCo
     display: flex;
 `;
 const StyledComboBoxItemContentSubtext = exports.StyledComboBoxItemContentSubtext = _styledComponents.default.div`
-    font-size: 90%;
+    font-size: 85%;
     margin-top: 2px;
 `;
 //# sourceMappingURL=ComboBoxItem.styles.js.map

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

@@ -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","$isDisabled","css","$isTouch","StyledComboBoxItemImage","img","$shouldShowRoundImage","$background","$shouldShowBigImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","$text","$subtext","StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    $isDisabled?: boolean;\n    $isSelected: boolean;\n    $isTouch: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n        $isSelected && theme['secondary-102']};\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    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n\n    ${({ $isDisabled, $isTouch, theme }: StyledComboBoxItemProps) =>\n        !$isDisabled &&\n        !$isTouch &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-101']};\n            }\n\n            &:focus {\n                background-color: ${theme['secondary-101']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowBigImage?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n\n    background: ${({ $background, theme }: StyledComboBoxItemImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    flex: 0 0 auto;\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n`;\n\nexport const StyledComboBoxItemContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    line-height: normal;\n    min-width: 0;\n    width: 100%;\n`;\n\ntype StyledComboBoxItemContentHeaderProps = {\n    $text?: string;\n    $subtext?: string;\n};\nexport const StyledComboBoxItemContentHeader = styled.div<StyledComboBoxItemContentHeaderProps>`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    font-weight: ${({ $text, $subtext }) => ($text && $subtext ? 'bold' : 'normal')};\n    font-size: ${({ $text, $subtext }) => $text && $subtext && '17px'};\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapper = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    gap: 4px;\n    min-width: 0;\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapperText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxItemContentHeaderRightElement = styled.div`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledComboBoxItemContentSubtext = styled.div`\n    font-size: 90%;\n    margin-top: 2px;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledComboBoxItem","exports","styled","div","theme","$isSelected","text","$isDisabled","css","$isTouch","StyledComboBoxItemImage","img","$shouldShowRoundImage","$background","$shouldShowBigImage","StyledComboBoxItemIconsWrapper","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    $isDisabled?: boolean;\n    $isSelected: boolean;\n    $isTouch: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n        $isSelected && theme['secondary-102']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    flex: 0 0 auto;\n    gap: 10px;\n    min-height: 38px;\n    padding: 8px 10px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n\n    ${({ $isDisabled, $isTouch, theme }: StyledComboBoxItemProps) =>\n        !$isDisabled &&\n        !$isTouch &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-101']};\n            }\n\n            &:focus {\n                background-color: ${theme['secondary-101']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowBigImage?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n\n    background: ${({ $background, theme }: StyledComboBoxItemImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    flex: 0 0 auto;\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n    object-fit: cover;\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n`;\n\nexport const StyledComboBoxItemIconsWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 100%;\n    justify-content: center;\n    width: 20px;\n`;\n\nexport const StyledComboBoxItemContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    line-height: normal;\n    min-width: 0;\n    width: 100%;\n`;\n\ntype StyledComboBoxItemContentHeaderProps = {\n    $text?: string;\n    $subtext?: string;\n};\n\nexport const StyledComboBoxItemContentHeader = styled.div<StyledComboBoxItemContentHeaderProps>`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapper = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    gap: 4px;\n    min-width: 0;\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapperText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxItemContentHeaderRightElement = styled.div`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledComboBoxItemContentSubtext = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/content-card/ContentCard.js

@@ -8,8 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _contentCard = require("../../types/contentCard");
 var _AreaContextProvider = _interopRequireWildcard(require("../area-provider/AreaContextProvider"));
 var _ContentCard = require("./ContentCard.styles");
-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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ContentCard = ({
   children,
   onClick,
@@ -22,6 +21,7 @@ const ContentCard = ({
     $type: type,
     $shouldChangeColor: shouldChangeColor
   }, /*#__PURE__*/_react.default.createElement(_AreaContextProvider.default, {
+    contentCardType: type,
     shouldChangeColor: !shouldChangeColor
   }, children));
 };

package/lib/cjs/components/content-card/ContentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.js","names":["_react","_interopRequireWildcard","require","_contentCard","_AreaContextProvider","_ContentCard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContentCard","children","onClick","type","ContentCardType","Default","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","createElement","StyledContentCard","$type","$shouldChangeColor","displayName","_default","exports"],"sources":["../../../../src/components/content-card/ContentCard.tsx"],"sourcesContent":["import React, { FC, ReactNode, useContext, useMemo } from 'react';\nimport { ContentCardType } from '../../types/contentCard';\nimport AreaContextProvider, { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledContentCard } from './ContentCard.styles';\n\nexport type ContentCardProps = {\n    /**\n     * The content of the content card\n     */\n    children?: ReactNode;\n    /**\n     * The onClick event handler\n     */\n    onClick?: () => void;\n    /**\n     * The type of the content card\n     */\n    type?: ContentCardType;\n};\n\nconst ContentCard: FC<ContentCardProps> = ({\n    children,\n    onClick,\n    type = ContentCardType.Default,\n}) => {\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    return (\n        <StyledContentCard onClick={onClick} $type={type} $shouldChangeColor={shouldChangeColor}>\n            <AreaContextProvider shouldChangeColor={!shouldChangeColor}>\n                {children}\n            </AreaContextProvider>\n        </StyledContentCard>\n    );\n};\n\nContentCard.displayName = 'ContentCard';\n\nexport default ContentCard;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAH,uBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAAyD,SAAAI,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;AAiBzD,MAAMW,WAAiC,GAAGA,CAAC;EACvCC,QAAQ;EACRC,OAAO;EACPC,IAAI,GAAGC,4BAAe,CAACC;AAC3B,CAAC,KAAK;EACF,MAAMC,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAC7B,MAAMJ,YAAY,CAACG,iBAAiB,IAAI,KAAK,EAC7C,CAACH,YAAY,CAACG,iBAAiB,CACnC,CAAC;EAED,oBACInC,MAAA,CAAAY,OAAA,CAAAyB,aAAA,CAAChC,YAAA,CAAAiC,iBAAiB;IAACV,OAAO,EAAEA,OAAQ;IAACW,KAAK,EAAEV,IAAK;IAACW,kBAAkB,EAAEL;EAAkB,gBACpFnC,MAAA,CAAAY,OAAA,CAAAyB,aAAA,CAACjC,oBAAA,CAAAQ,OAAmB;IAACuB,iBAAiB,EAAE,CAACA;EAAkB,GACtDR,QACgB,CACN,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAACe,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,GAEzBc,WAAW","ignoreList":[]}
+{"version":3,"file":"ContentCard.js","names":["_react","_interopRequireWildcard","require","_contentCard","_AreaContextProvider","_ContentCard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ContentCard","children","onClick","type","ContentCardType","Default","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","createElement","StyledContentCard","$type","$shouldChangeColor","contentCardType","displayName","_default","exports"],"sources":["../../../../src/components/content-card/ContentCard.tsx"],"sourcesContent":["import React, { FC, ReactNode, useContext, useMemo } from 'react';\nimport { ContentCardType } from '../../types/contentCard';\nimport AreaContextProvider, { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledContentCard } from './ContentCard.styles';\n\nexport type ContentCardProps = {\n    /**\n     * The content of the content card\n     */\n    children?: ReactNode;\n    /**\n     * The onClick event handler\n     */\n    onClick?: () => void;\n    /**\n     * The type of the content card\n     */\n    type?: ContentCardType;\n};\n\nconst ContentCard: FC<ContentCardProps> = ({\n    children,\n    onClick,\n    type = ContentCardType.Default,\n}) => {\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    return (\n        <StyledContentCard onClick={onClick} $type={type} $shouldChangeColor={shouldChangeColor}>\n            <AreaContextProvider contentCardType={type} shouldChangeColor={!shouldChangeColor}>\n                {children}\n            </AreaContextProvider>\n        </StyledContentCard>\n    );\n};\n\nContentCard.displayName = 'ContentCard';\n\nexport default ContentCard;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAH,uBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAAyD,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAiBzD,MAAMkB,WAAiC,GAAGA,CAAC;EACvCC,QAAQ;EACRC,OAAO;EACPC,IAAI,GAAGC,4BAAe,CAACC;AAC3B,CAAC,KAAK;EACF,MAAMC,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAC7B,MAAMJ,YAAY,CAACG,iBAAiB,IAAI,KAAK,EAC7C,CAACH,YAAY,CAACG,iBAAiB,CACnC,CAAC;EAED,oBACIlC,MAAA,CAAAgB,OAAA,CAAAoB,aAAA,CAAC/B,YAAA,CAAAgC,iBAAiB;IAACV,OAAO,EAAEA,OAAQ;IAACW,KAAK,EAAEV,IAAK;IAACW,kBAAkB,EAAEL;EAAkB,gBACpFlC,MAAA,CAAAgB,OAAA,CAAAoB,aAAA,CAAChC,oBAAA,CAAAY,OAAmB;IAACwB,eAAe,EAAEZ,IAAK;IAACM,iBAAiB,EAAE,CAACA;EAAkB,GAC7ER,QACgB,CACN,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAACgB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEzBS,WAAW","ignoreList":[]}

package/lib/cjs/components/content-card/ContentCard.styles.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledContentCard = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _contentCard = require("../../types/contentCard");
-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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledContentCard = exports.StyledContentCard = _styledComponents.default.div`
     border-radius: ${({
   theme
@@ -27,7 +26,7 @@ const StyledContentCard = exports.StyledContentCard = _styledComponents.default.
 }) => theme.text};
 
     &:not(:last-child) {
-        margin-bottom: 8px;
+        margin-bottom: 10px;
     }
 
     ${({
@@ -37,7 +36,10 @@ const StyledContentCard = exports.StyledContentCard = _styledComponents.default.
 }) => {
   if ($type === _contentCard.ContentCardType.Default && $shouldChangeColor) {
     return (0, _styledComponents.css)`
-                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});
+                background-color: rgba(
+                    ${theme.colorMode === 'classic' ? theme['101-rgb'] : theme['000-rgb']},
+                    ${theme.cardBackgroundOpacity}
+                );
             `;
   }
   switch ($type) {
@@ -49,6 +51,10 @@ const StyledContentCard = exports.StyledContentCard = _styledComponents.default.
 
                     --chayns-color--text: #222;
                     --chayns-color-rgb--text: rgb(34, 34, 34);
+
+                    label {
+                        color: #555 !important;
+                    }
                 `;
     case _contentCard.ContentCardType.Success:
       return (0, _styledComponents.css)`
@@ -58,6 +64,10 @@ const StyledContentCard = exports.StyledContentCard = _styledComponents.default.
 
                     --chayns-color--text: #222;
                     --chayns-color-rgb--text: rgb(34, 34, 34);
+
+                    label {
+                        color: #555 !important;
+                    }
                 `;
     case _contentCard.ContentCardType.Warning:
       return (0, _styledComponents.css)`
@@ -67,6 +77,23 @@ const StyledContentCard = exports.StyledContentCard = _styledComponents.default.
 
                     --chayns-color--text: #222;
                     --chayns-color-rgb--text: rgb(34, 34, 34);
+
+                    label {
+                        color: #555 !important;
+                    }
+                `;
+    case _contentCard.ContentCardType.SiteColor:
+      return (0, _styledComponents.css)`
+                    background-color: ${theme['103']};
+                    border: 1px solid ${theme['104']};
+                    color: ${theme['text-rgb']};
+
+                    --chayns-color--text: ${theme['text-rgb']};
+                    --chayns-color-rgb--text: ${theme['text-rgb']};
+
+                    label {
+                        color: ${theme['text-rgb']} !important;
+                    }
                 `;
     default:
       return (0, _styledComponents.css)`

package/lib/cjs/components/content-card/ContentCard.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_contentCard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledContentCard","exports","styled","div","theme","cardBorderRadius","$shouldChangeColor","css","cardShadow","text","$type","ContentCardType","Default","cardBackgroundOpacity","Error","Success","Warning"],"sources":["../../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ContentCardType } from '../../types/contentCard';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<{\n    $type: ContentCardType;\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledContentCard = styled.div<StyledContentCardProps>`\n    border-radius: ${({ theme }: StyledContentCardProps) => theme.cardBorderRadius}px;\n\n    ${({ theme, $shouldChangeColor }: StyledContentCardProps) =>\n        !$shouldChangeColor &&\n        css`\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n        `};\n\n    padding: 8px 12px;\n\n    color: ${({ theme }: StyledContentCardProps) => theme.text};\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n\n    ${({ $type, theme, $shouldChangeColor }: StyledContentCardProps) => {\n        if ($type === ContentCardType.Default && $shouldChangeColor) {\n            return css`\n                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});\n            `;\n        }\n\n        switch ($type) {\n            case ContentCardType.Error:\n                return css`\n                    background-color: ${theme['red-4']};\n                    border: 1px solid ${theme['red-1']};\n                    color: #222;\n\n                    --chayns-color--text: #222;\n                    --chayns-color-rgb--text: rgb(34, 34, 34);\n                `;\n            case ContentCardType.Success:\n                return css`\n                    background-color: ${theme['green-4']};\n                    border: 1px solid ${theme['green-1']};\n                    color: #222;\n\n                    --chayns-color--text: #222;\n                    --chayns-color-rgb--text: rgb(34, 34, 34);\n                `;\n            case ContentCardType.Warning:\n                return css`\n                    background-color: ${theme['yellow-4']};\n                    border: 1px solid ${theme['yellow-1']};\n                    color: #222;\n\n                    --chayns-color--text: #222;\n                    --chayns-color-rgb--text: rgb(34, 34, 34);\n                `;\n            default:\n                return css`\n                    background-color: rgba(\n                        ${theme['secondary-100-rgb']},\n                        ${theme.cardBackgroundOpacity}\n                    );\n                `;\n        }\n    }}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContentCard.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_contentCard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledContentCard","exports","styled","div","theme","cardBorderRadius","$shouldChangeColor","css","cardShadow","text","$type","ContentCardType","Default","colorMode","cardBackgroundOpacity","Error","Success","Warning","SiteColor"],"sources":["../../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ContentCardType } from '../../types/contentCard';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<{\n    $type: ContentCardType;\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledContentCard = styled.div<StyledContentCardProps>`\n    border-radius: ${({ theme }: StyledContentCardProps) => theme.cardBorderRadius}px;\n\n    ${({ theme, $shouldChangeColor }: StyledContentCardProps) =>\n        !$shouldChangeColor &&\n        css`\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n        `};\n\n    padding: 8px 12px;\n\n    color: ${({ theme }: StyledContentCardProps) => theme.text};\n\n    &:not(:last-child) {\n        margin-bottom: 10px;\n    }\n\n    ${({ $type, theme, $shouldChangeColor }: StyledContentCardProps) => {\n        if ($type === ContentCardType.Default && $shouldChangeColor) {\n            return css`\n                background-color: rgba(\n                    ${theme.colorMode === 'classic' ? theme['101-rgb'] : theme['000-rgb']},\n                    ${theme.cardBackgroundOpacity}\n                );\n            `;\n        }\n\n        switch ($type) {\n            case ContentCardType.Error:\n                return css`\n                    background-color: ${theme['red-4']};\n                    border: 1px solid ${theme['red-1']};\n                    color: #222;\n\n                    --chayns-color--text: #222;\n                    --chayns-color-rgb--text: rgb(34, 34, 34);\n\n                    label {\n                        color: #555 !important;\n                    }\n                `;\n            case ContentCardType.Success:\n                return css`\n                    background-color: ${theme['green-4']};\n                    border: 1px solid ${theme['green-1']};\n                    color: #222;\n\n                    --chayns-color--text: #222;\n                    --chayns-color-rgb--text: rgb(34, 34, 34);\n\n                    label {\n                        color: #555 !important;\n                    }\n                `;\n            case ContentCardType.Warning:\n                return css`\n                    background-color: ${theme['yellow-4']};\n                    border: 1px solid ${theme['yellow-1']};\n                    color: #222;\n\n                    --chayns-color--text: #222;\n                    --chayns-color-rgb--text: rgb(34, 34, 34);\n\n                    label {\n                        color: #555 !important;\n                    }\n                `;\n            case ContentCardType.SiteColor:\n                return css`\n                    background-color: ${theme['103']};\n                    border: 1px solid ${theme['104']};\n                    color: ${theme['text-rgb']};\n\n                    --chayns-color--text: ${theme['text-rgb']};\n                    --chayns-color-rgb--text: ${theme['text-rgb']};\n\n                    label {\n                        color: ${theme['text-rgb']} !important;\n                    }\n                `;\n            default:\n                return css`\n                    background-color: rgba(\n                        ${theme['secondary-100-rgb']},\n                        ${theme.cardBackgroundOpacity}\n                    );\n                `;\n        }\n    }}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/context-menu/ContextMenu.js

@@ -5,62 +5,100 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _chaynsApi = require("chayns-api");
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _uuid = require("../../hooks/uuid");
-var _contextMenu = require("../../types/contextMenu");
 var _environment = require("../../utils/environment");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _ContextMenuContent = _interopRequireDefault(require("./context-menu-content/ContextMenuContent"));
 var _ContextMenu = require("./ContextMenu.styles");
+var _ContextMenu2 = require("./ContextMenu.types");
+var _ContextMenu3 = require("./ContextMenu.utils");
 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); }
-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; }
-const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ContextMenu = /*#__PURE__*/(0, _react2.forwardRef)(({
   alignment,
-  children = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  children = /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     icons: ['ts-ellipsis_v'],
     size: 18
   }),
   container,
   coordinates,
-  isInDialog = false,
+  headline,
   items,
   onHide,
   onShow,
-  shouldCloseOnPopupClick = true
+  shouldCloseOnPopupClick = true,
+  shouldDisableClick = false,
+  shouldHidePopupArrow = false,
+  shouldShowHoverEffect = false,
+  zIndex = 20
 }, ref) => {
-  const [internalCoordinates, setInternalCoordinates] = (0, _react.useState)({
+  const [internalCoordinates, setInternalCoordinates] = (0, _react2.useState)({
     x: 0,
     y: 0
   });
-  const [newContainer, setNewContainer] = (0, _react.useState)(container ?? null);
-  const [internalAlignment, setInternalAlignment] = (0, _react.useState)(_contextMenu.ContextMenuAlignment.TopLeft);
-  const [isContentShown, setIsContentShown] = (0, _react.useState)(false);
-  const [portal, setPortal] = (0, _react.useState)();
+  const [internalAlignment, setInternalAlignment] = (0, _react2.useState)(_ContextMenu2.ContextMenuAlignment.TopLeft);
+  const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
+  const [focusedIndex, setFocusedIndex] = (0, _react2.useState)((0, _ContextMenu3.getDefaultFocusedIndex)(items));
+  const [isContentShown, setIsContentShown] = (0, _react2.useState)(false);
+  const [portal, setPortal] = (0, _react2.useState)();
+  const [isHovered, setIsHovered] = (0, _react2.useState)(false);
   const uuid = (0, _uuid.useUuid)();
-
-  // ToDo: Replace with hook if new chayns api is ready
-  const contextMenuContentRef = (0, _react.useRef)(null);
-  const contextMenuRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
+  const contextMenuContentRef = (0, _react2.useRef)(null);
+  const contextMenuRef = (0, _react2.useRef)(null);
+  const isTouch = (0, _environment.useIsTouch)();
+  (0, _react2.useEffect)(() => {
+    if (isContentShown) {
+      setFocusedIndex((0, _ContextMenu3.getDefaultFocusedIndex)(items));
+    }
+  }, [isContentShown, items]);
+  (0, _react2.useEffect)(() => {
     if (contextMenuRef.current && !container) {
       const el = contextMenuRef.current;
       const element = el.closest('.dialog-inner, .page-provider, .tapp, body');
       setNewContainer(element);
     }
   }, [container]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (container instanceof Element) {
       setNewContainer(container);
     }
   }, [container]);
-  const handleHide = (0, _react.useCallback)(() => {
+  const handleHide = (0, _react2.useCallback)(() => {
     setIsContentShown(false);
   }, []);
-  const handleShow = (0, _react.useCallback)(async () => {
-    const isTouch = (0, _environment.getIsTouch)();
+  (0, _react2.useEffect)(() => {
+    if (!isContentShown) return () => {};
+    const handleKey = e => {
+      if (items.length === 0 || isHovered) return;
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setFocusedIndex(prev => prev >= items.length - 1 ? 0 : prev + 1);
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setFocusedIndex(prev => prev <= 0 ? items.length - 1 : prev - 1);
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        const item = items[focusedIndex];
+        if (item) {
+          void item.onClick();
+          if (shouldCloseOnPopupClick) {
+            handleHide();
+          }
+        }
+      }
+      if (e.key === 'Escape') {
+        handleHide();
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [isContentShown, items, focusedIndex, handleHide, shouldCloseOnPopupClick, isHovered]);
+  const handleShow = (0, _react2.useCallback)(async () => {
     if (isTouch) {
       const {
         result
@@ -69,11 +107,13 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
         buttons: [],
         list: items.map(({
           icons,
-          text
+          text,
+          isSelected
         }, index) => ({
           name: text,
           id: index,
-          icon: icons[0]
+          isSelected,
+          icon: /*#__PURE__*/(0, _react2.isValidElement)(icons) ? undefined : icons === null || icons === void 0 ? void 0 : icons[0]
         }))
       }).open();
       if (result && typeof result[0] === 'number') {
@@ -106,35 +146,38 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
       });
       if (x < width / 2) {
         if (y < height / 2) {
-          setInternalAlignment(_contextMenu.ContextMenuAlignment.BottomRight);
+          setInternalAlignment(_ContextMenu2.ContextMenuAlignment.BottomRight);
         } else {
-          setInternalAlignment(_contextMenu.ContextMenuAlignment.TopRight);
+          setInternalAlignment(_ContextMenu2.ContextMenuAlignment.TopRight);
         }
       } else if (y < height / 2) {
-        setInternalAlignment(_contextMenu.ContextMenuAlignment.BottomLeft);
+        setInternalAlignment(_ContextMenu2.ContextMenuAlignment.BottomLeft);
       } else {
-        setInternalAlignment(_contextMenu.ContextMenuAlignment.TopLeft);
+        setInternalAlignment(_ContextMenu2.ContextMenuAlignment.TopLeft);
       }
       setIsContentShown(true);
     }
-  }, [items, newContainer]);
-  const handleClick = (0, _react.useCallback)(event => {
+  }, [isTouch, items, newContainer]);
+  const handleClick = (0, _react2.useCallback)(event => {
+    if (shouldDisableClick) {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
     void handleShow();
-  }, [handleShow]);
-  const handleDocumentClick = (0, _react.useCallback)(event => {
+  }, [handleShow, shouldDisableClick]);
+  const handleDocumentClick = (0, _react2.useCallback)(event => {
     var _contextMenuContentRe;
     if (!shouldCloseOnPopupClick && (_contextMenuContentRe = contextMenuContentRef.current) !== null && _contextMenuContentRe !== void 0 && _contextMenuContentRe.contains(event.target)) {
       return;
     }
     handleHide();
   }, [handleHide, shouldCloseOnPopupClick]);
-  (0, _react.useImperativeHandle)(ref, () => ({
+  (0, _react2.useImperativeHandle)(ref, () => ({
     hide: handleHide,
     show: handleShow
   }), [handleHide, handleShow]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (isContentShown) {
       document.addEventListener('click', handleDocumentClick, true);
       window.addEventListener('blur', handleHide);
@@ -149,22 +192,42 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
       window.removeEventListener('blur', handleHide);
     };
   }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (!newContainer) {
       return;
     }
-    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
       initial: false
-    }, isContentShown && /*#__PURE__*/_react.default.createElement(_ContextMenuContent.default, {
+    }, isContentShown && /*#__PURE__*/_react2.default.createElement(_ContextMenuContent.default, {
       coordinates: coordinates ?? internalCoordinates,
       items: items,
+      zIndex: zIndex,
+      headline: headline,
+      shouldHidePopupArrow: shouldHidePopupArrow,
       key: `contextMenu_${uuid}`,
       alignment: alignment ?? internalAlignment,
-      ref: contextMenuContentRef
+      ref: contextMenuContentRef,
+      focusedIndex: focusedIndex,
+      onKeySelect: index => {
+        const item = items[index];
+        if (item) {
+          void item.onClick();
+          handleHide();
+        }
+      },
+      onMouseEnter: () => {
+        setIsHovered(true);
+        setFocusedIndex(-1);
+      },
+      onMouseLeave: () => {
+        setIsHovered(false);
+      }
     })), newContainer));
-  }, [alignment, newContainer, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ContextMenu.StyledContextMenu, {
+  }, [alignment, newContainer, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid, zIndex, shouldHidePopupArrow, headline, focusedIndex, handleHide]);
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_ContextMenu.StyledContextMenu, {
     className: "beta-chayns-context-menu",
+    $isActive: isContentShown && shouldShowHoverEffect,
+    $shouldAddHoverEffect: !isTouch && shouldShowHoverEffect,
     onClick: handleClick,
     ref: contextMenuRef
   }, children), portal);