@chayns-components/core 5.0.0-beta.968 → 5.0.0-beta.969
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js +4 -1
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js +8 -0
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js +4 -1
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js +14 -0
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
- package/lib/types/components/combobox/combobox-item/ComboBoxItem.styles.d.ts +5 -1
- package/package.json +2 -2
|
@@ -51,7 +51,10 @@ const ComboBoxItem = ({
|
|
|
51
51
|
$shouldShowRoundImage: shouldShowRoundImage
|
|
52
52
|
}), icons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
53
53
|
icons: icons
|
|
54
|
-
}), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContent, null, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeader,
|
|
54
|
+
}), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContent, null, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeader, {
|
|
55
|
+
$text: text,
|
|
56
|
+
$subtext: subtext
|
|
57
|
+
}, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderText, {
|
|
55
58
|
as: textStyles === null || textStyles === void 0 ? void 0 : textStyles.tagName,
|
|
56
59
|
style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.styles
|
|
57
60
|
}, text, suffixElement), rightElement && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isDisabled, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text]);
|
|
@@ -1 +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","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","$shouldShowBigImage","trim","$shouldShowRoundImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","as","tagName","style","styles","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 StyledComboBoxItemContentHeaderText,\n StyledComboBoxItemContentSubtext,\n StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n icons?: IComboBoxItem['icons'];\n id: IComboBoxItem['value'];\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 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 $shouldShowBigImage={\n shouldShowBigImage ||\n (typeof subtext === 'string' && subtext.trim() !== '')\n }\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {icons && <Icon icons={icons} />}\n <StyledComboBoxItemContent>\n <StyledComboBoxItemContentHeader>\n <StyledComboBoxItemContentHeaderText\n as={textStyles?.tagName}\n style={textStyles?.styles}\n >\n {text}\n {suffixElement}\n </StyledComboBoxItemContentHeaderText>\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 imageUrl,\n isDisabled,\n isSelected,\n isTouch,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n ],\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"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
|
|
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","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","$shouldShowBigImage","trim","$shouldShowRoundImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","$text","$subtext","StyledComboBoxItemContentHeaderText","as","tagName","style","styles","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 StyledComboBoxItemContentHeaderText,\n StyledComboBoxItemContentSubtext,\n StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n icons?: IComboBoxItem['icons'];\n id: IComboBoxItem['value'];\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 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 $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 <StyledComboBoxItemContentHeaderText\n as={textStyles?.tagName}\n style={textStyles?.styles}\n >\n {text}\n {suffixElement}\n </StyledComboBoxItemContentHeaderText>\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 imageUrl,\n isDisabled,\n isSelected,\n isTouch,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n ],\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -71,6 +71,14 @@ const StyledComboBoxItemContentHeader = exports.StyledComboBoxItemContentHeader
|
|
|
71
71
|
align-items: center;
|
|
72
72
|
display: flex;
|
|
73
73
|
justify-content: space-between;
|
|
74
|
+
font-weight: ${({
|
|
75
|
+
$text,
|
|
76
|
+
$subtext
|
|
77
|
+
}) => $text && $subtext ? 'bold' : 'normal'};
|
|
78
|
+
font-size: ${({
|
|
79
|
+
$text,
|
|
80
|
+
$subtext
|
|
81
|
+
}) => $text && $subtext && '17px'};
|
|
74
82
|
`;
|
|
75
83
|
const StyledComboBoxItemContentHeaderText = exports.StyledComboBoxItemContentHeaderText = _styledComponents.default.div`
|
|
76
84
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBoxItem","exports","styled","div","theme","$isSelected","text","$isDisabled","css","$isTouch","StyledComboBoxItemImage","img","$shouldShowRoundImage","$shouldShowBigImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $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-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $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-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\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 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`;\n\nexport const StyledComboBoxItemContentHeader = styled.div
|
|
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","$shouldShowBigImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","$text","$subtext","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $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-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $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-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\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 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`;\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 StyledComboBoxItemContentHeaderText = styled.div`\n display: flex;\n gap: 4px;\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":[]}
|
|
@@ -43,7 +43,10 @@ const ComboBoxItem = _ref => {
|
|
|
43
43
|
$shouldShowRoundImage: shouldShowRoundImage
|
|
44
44
|
}), icons && /*#__PURE__*/React.createElement(Icon, {
|
|
45
45
|
icons: icons
|
|
46
|
-
}), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader,
|
|
46
|
+
}), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, {
|
|
47
|
+
$text: text,
|
|
48
|
+
$subtext: subtext
|
|
49
|
+
}, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderText, {
|
|
47
50
|
as: textStyles?.tagName,
|
|
48
51
|
style: textStyles?.styles
|
|
49
52
|
}, text, suffixElement), rightElement && /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isDisabled, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","_ref","icons","id","imageUrl","isDisabled","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","textStyles","text","value","handleItemClick","isTouch","createElement","String","onClick","$isDisabled","$isSelected","$isTouch","src","$shouldShowBigImage","trim","$shouldShowRoundImage","as","tagName","style","styles","displayName"],"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 StyledComboBoxItemContentHeaderText,\n StyledComboBoxItemContentSubtext,\n StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n icons?: IComboBoxItem['icons'];\n id: IComboBoxItem['value'];\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 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 $shouldShowBigImage={\n shouldShowBigImage ||\n (typeof subtext === 'string' && subtext.trim() !== '')\n }\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {icons && <Icon icons={icons} />}\n <StyledComboBoxItemContent>\n <StyledComboBoxItemContentHeader>\n <StyledComboBoxItemContentHeaderText\n as={textStyles?.tagName}\n style={textStyles?.styles}\n >\n {text}\n {suffixElement}\n </StyledComboBoxItemContentHeaderText>\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 imageUrl,\n isDisabled,\n isSelected,\n isTouch,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n ],\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAClE,SAASC,UAAU,QAAQ,4BAA4B;AACvD,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,2CAA2C,EAC3CC,mCAAmC,EACnCC,gCAAgC,EAChCC,uBAAuB,QACpB,uBAAuB;AAmB9B,MAAMC,YAAmC,GAAGC,IAAA,IAetC;EAAA,IAfuC;IACzCC,KAAK;IACLC,EAAE;IACFC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,IAAI;IACJC;EACJ,CAAC,GAAAd,IAAA;EACG,MAAMe,eAAe,GAAG3B,WAAW,CAAC,MAAM;IACtC,IAAI,CAACgB,UAAU,EAAE;MACbE,QAAQ,CAAC;QAAEO,IAAI;QAAEC,KAAK;QAAEH,aAAa;QAAER,QAAQ;QAAEF;MAAM,CAAC,CAAC;IAC7D;EACJ,CAAC,EAAE,CAACA,KAAK,EAAEE,QAAQ,EAAEC,UAAU,EAAEE,QAAQ,EAAEK,aAAa,EAAEE,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEvE,MAAME,OAAO,GAAG1B,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAA8B,aAAA,CAACzB,kBAAkB;IACfU,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGgB,MAAM,CAAChB,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEiB,OAAO,EAAEJ,eAAgB;IACzBK,WAAW,EAAEhB,UAAW;IACxBiB,WAAW,EAAEhB,UAAW;IACxBiB,QAAQ,EAAEN;EAAQ,GAEjBb,QAAQ,iBACLhB,KAAA,CAAA8B,aAAA,CAACnB,uBAAuB;IACpByB,GAAG,EAAEpB,QAAS;IACdqB,mBAAmB,EACfhB,kBAAkB,IACjB,OAAOE,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACe,IAAI,CAAC,CAAC,KAAK,EACtD;IACDC,qBAAqB,EAAEjB;EAAqB,CAC/C,CACJ,EACAR,KAAK,iBAAId,KAAA,CAAA8B,aAAA,CAAC1B,IAAI;IAACU,KAAK,EAAEA;EAAM,CAAE,CAAC,eAChCd,KAAA,CAAA8B,aAAA,CAACxB,yBAAyB,qBACtBN,KAAA,CAAA8B,aAAA,CAACvB,+BAA+B,
|
|
1
|
+
{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","_ref","icons","id","imageUrl","isDisabled","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","textStyles","text","value","handleItemClick","isTouch","createElement","String","onClick","$isDisabled","$isSelected","$isTouch","src","$shouldShowBigImage","trim","$shouldShowRoundImage","$text","$subtext","as","tagName","style","styles","displayName"],"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 StyledComboBoxItemContentHeaderText,\n StyledComboBoxItemContentSubtext,\n StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n icons?: IComboBoxItem['icons'];\n id: IComboBoxItem['value'];\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 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 $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 <StyledComboBoxItemContentHeaderText\n as={textStyles?.tagName}\n style={textStyles?.styles}\n >\n {text}\n {suffixElement}\n </StyledComboBoxItemContentHeaderText>\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 imageUrl,\n isDisabled,\n isSelected,\n isTouch,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n ],\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAClE,SAASC,UAAU,QAAQ,4BAA4B;AACvD,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,2CAA2C,EAC3CC,mCAAmC,EACnCC,gCAAgC,EAChCC,uBAAuB,QACpB,uBAAuB;AAmB9B,MAAMC,YAAmC,GAAGC,IAAA,IAetC;EAAA,IAfuC;IACzCC,KAAK;IACLC,EAAE;IACFC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,IAAI;IACJC;EACJ,CAAC,GAAAd,IAAA;EACG,MAAMe,eAAe,GAAG3B,WAAW,CAAC,MAAM;IACtC,IAAI,CAACgB,UAAU,EAAE;MACbE,QAAQ,CAAC;QAAEO,IAAI;QAAEC,KAAK;QAAEH,aAAa;QAAER,QAAQ;QAAEF;MAAM,CAAC,CAAC;IAC7D;EACJ,CAAC,EAAE,CAACA,KAAK,EAAEE,QAAQ,EAAEC,UAAU,EAAEE,QAAQ,EAAEK,aAAa,EAAEE,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEvE,MAAME,OAAO,GAAG1B,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAA8B,aAAA,CAACzB,kBAAkB;IACfU,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGgB,MAAM,CAAChB,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEiB,OAAO,EAAEJ,eAAgB;IACzBK,WAAW,EAAEhB,UAAW;IACxBiB,WAAW,EAAEhB,UAAW;IACxBiB,QAAQ,EAAEN;EAAQ,GAEjBb,QAAQ,iBACLhB,KAAA,CAAA8B,aAAA,CAACnB,uBAAuB;IACpByB,GAAG,EAAEpB,QAAS;IACdqB,mBAAmB,EACfhB,kBAAkB,IACjB,OAAOE,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACe,IAAI,CAAC,CAAC,KAAK,EACtD;IACDC,qBAAqB,EAAEjB;EAAqB,CAC/C,CACJ,EACAR,KAAK,iBAAId,KAAA,CAAA8B,aAAA,CAAC1B,IAAI;IAACU,KAAK,EAAEA;EAAM,CAAE,CAAC,eAChCd,KAAA,CAAA8B,aAAA,CAACxB,yBAAyB,qBACtBN,KAAA,CAAA8B,aAAA,CAACvB,+BAA+B;IAACiC,KAAK,EAAEd,IAAK;IAACe,QAAQ,EAAElB;EAAQ,gBAC5DvB,KAAA,CAAA8B,aAAA,CAACrB,mCAAmC;IAChCiC,EAAE,EAAEjB,UAAU,EAAEkB,OAAQ;IACxBC,KAAK,EAAEnB,UAAU,EAAEoB;EAAO,GAEzBnB,IAAI,EACJF,aACgC,CAAC,EACrCJ,YAAY,iBACTpB,KAAA,CAAA8B,aAAA,CAACtB,2CAA2C,QACvCY,YACwC,CAEpB,CAAC,EACjCG,OAAO,iBACJvB,KAAA,CAAA8B,aAAA,CAACpB,gCAAgC,QAC5Ba,OAC6B,CAEf,CACX,CACvB,EACD,CACIK,eAAe,EACfd,KAAK,EACLC,EAAE,EACFC,QAAQ,EACRC,UAAU,EACVC,UAAU,EACVW,OAAO,EACPT,YAAY,EACZC,kBAAkB,EAClBC,oBAAoB,EACpBC,OAAO,EACPC,aAAa,EACbE,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDd,YAAY,CAACkC,WAAW,GAAG,cAAc;AAEzC,eAAelC,YAAY","ignoreList":[]}
|
|
@@ -87,6 +87,20 @@ export const StyledComboBoxItemContentHeader = styled.div`
|
|
|
87
87
|
align-items: center;
|
|
88
88
|
display: flex;
|
|
89
89
|
justify-content: space-between;
|
|
90
|
+
font-weight: ${_ref9 => {
|
|
91
|
+
let {
|
|
92
|
+
$text,
|
|
93
|
+
$subtext
|
|
94
|
+
} = _ref9;
|
|
95
|
+
return $text && $subtext ? 'bold' : 'normal';
|
|
96
|
+
}};
|
|
97
|
+
font-size: ${_ref10 => {
|
|
98
|
+
let {
|
|
99
|
+
$text,
|
|
100
|
+
$subtext
|
|
101
|
+
} = _ref10;
|
|
102
|
+
return $text && $subtext && '17px';
|
|
103
|
+
}};
|
|
90
104
|
`;
|
|
91
105
|
export const StyledComboBoxItemContentHeaderText = styled.div`
|
|
92
106
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isDisabled","_ref4","$isTouch","StyledComboBoxItemImage","img","_ref5","$shouldShowRoundImage","_ref6","_ref7","$shouldShowBigImage","_ref8","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $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-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $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-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\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 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`;\n\nexport const StyledComboBoxItemContentHeader = styled.div
|
|
1
|
+
{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isDisabled","_ref4","$isTouch","StyledComboBoxItemImage","img","_ref5","$shouldShowRoundImage","_ref6","_ref7","$shouldShowBigImage","_ref8","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","_ref9","$text","$subtext","_ref10","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $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-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $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-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\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 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`;\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 StyledComboBoxItemContentHeaderText = styled.div`\n display: flex;\n gap: 4px;\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":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXT,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT;AACA,MAAMU,KAAA;EAAA,IAAC;IAAED,WAAW;IAAEE,QAAQ;IAAEP;EAA+B,CAAC,GAAAM,KAAA;EAAA,OACxD,CAACD,WAAW,IACZ,CAACE,QAAQ,IACTX,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAOD,OAAO,MAAMQ,uBAAuB,GAAGb,MAAM,CAACc,GAAiC;AAC/E,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBf,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA;AACA,eAAegB,KAAA;EAAA,IAAC;IAAEZ;EAAoC,CAAC,GAAAY,KAAA;EAAA,OAAKZ,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA,cAAca,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClF,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAoB,CAAC,GAAAC,KAAA;EAAA,OAAMD,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACjF,CAAC;AAED,OAAO,MAAME,yBAAyB,GAAGrB,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMmB,+BAA+B,GAAGtB,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA,mBAAmBoB,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAAF,KAAA;EAAA,OAAMC,KAAK,IAAIC,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC;AACnF,iBAAiBC,MAAA;EAAA,IAAC;IAAEF,KAAK;IAAEC;EAAS,CAAC,GAAAC,MAAA;EAAA,OAAKF,KAAK,IAAIC,QAAQ,IAAI,MAAM;AAAA;AACrE,CAAC;AAED,OAAO,MAAME,mCAAmC,GAAG3B,MAAM,CAACG,GAAG;AAC7D;AACA;AACA,CAAC;AAED,OAAO,MAAMyB,2CAA2C,GAAG5B,MAAM,CAACG,GAAG;AACrE;AACA;AACA,CAAC;AAED,OAAO,MAAM0B,gCAAgC,GAAG7B,MAAM,CAACG,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -11,7 +11,11 @@ type StyledComboBoxItemImageProps = WithTheme<{
|
|
|
11
11
|
}>;
|
|
12
12
|
export declare const StyledComboBoxItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledComboBoxItemImageProps>> & string;
|
|
13
13
|
export declare const StyledComboBoxItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
14
|
-
|
|
14
|
+
type StyledComboBoxItemContentHeaderProps = {
|
|
15
|
+
$text?: string;
|
|
16
|
+
$subtext?: string;
|
|
17
|
+
};
|
|
18
|
+
export declare const StyledComboBoxItemContentHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemContentHeaderProps>> & string;
|
|
15
19
|
export declare const StyledComboBoxItemContentHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
16
20
|
export declare const StyledComboBoxItemContentHeaderRightElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
17
21
|
export declare const StyledComboBoxItemContentSubtext: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.969",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "ed99e862bd3b4909dab04543299d539655898482"
|
|
91
91
|
}
|