@chayns-components/core 5.0.0-beta.355 → 5.0.0-beta.359
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/components/checkbox/Checkbox.js +2 -0
- package/lib/components/checkbox/Checkbox.js.map +1 -1
- package/lib/components/combobox/ComboBox.styles.js +1 -1
- package/lib/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/components/combobox/combobox-item/ComboBoxItem.js +1 -1
- package/lib/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
- package/lib/components/combobox/combobox-item/ComboBoxItem.styles.d.ts +0 -3
- package/lib/components/combobox/combobox-item/ComboBoxItem.styles.js +9 -10
- package/lib/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -22,6 +22,8 @@ const Checkbox = _ref => {
|
|
|
22
22
|
const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
|
|
23
23
|
const handleChange = (0, _react.useCallback)(event => {
|
|
24
24
|
setIsActive(event.target.checked);
|
|
25
|
+
event.preventDefault();
|
|
26
|
+
event.stopPropagation();
|
|
25
27
|
if (typeof onChange === 'function') {
|
|
26
28
|
onChange(event);
|
|
27
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Checkbox","_ref","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","htmlFor","displayName","_default","exports"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n ReactElement,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n /**\n * Text for checkbox or switch\n */\n children?: ReactElement;\n /**\n * Indicates whether the checkbox or switch is selected\n */\n isChecked?: boolean;\n /**\n * Disables the checkbox or switch so it cannot be toggled\n */\n isDisabled?: boolean;\n /**\n * Function to be executed if the checked value changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Changes the design to use switch instead of checkbox\n */\n shouldShowAsSwitch?: boolean;\n /**\n * Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n const lineHeight = useMemo(\n () => (shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n [shouldShowCentered],\n );\n\n return (\n <StyledCheckbox>\n <StyledCheckboxInput\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n <StyledCheckboxLabel\n htmlFor={uuid}\n isChecked={isChecked ?? isActive}\n isDisabled={isDisabled}\n shouldShowAsSwitch={shouldShowAsSwitch}\n lineHeight={lineHeight}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AASA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAA6F,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,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AA6B7F,MAAMY,QAA2B,GAAGC,IAAA,IAO9B;EAAA,IAP+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,QAAQ;IACRC,kBAAkB;IAClBC,kBAAkB,GAAG;EACzB,CAAC,GAAAN,IAAA;EACG,MAAM,CAACO,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAACP,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMQ,YAAY,GAAG,IAAAC,kBAAW,EAC3BC,KAAoC,IAAK;IACtCJ,WAAW,CAACI,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Checkbox","_ref","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","preventDefault","stopPropagation","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","htmlFor","displayName","_default","exports"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n ReactElement,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n /**\n * Text for checkbox or switch\n */\n children?: ReactElement;\n /**\n * Indicates whether the checkbox or switch is selected\n */\n isChecked?: boolean;\n /**\n * Disables the checkbox or switch so it cannot be toggled\n */\n isDisabled?: boolean;\n /**\n * Function to be executed if the checked value changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Changes the design to use switch instead of checkbox\n */\n shouldShowAsSwitch?: boolean;\n /**\n * Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n onChange,\n shouldShowAsSwitch,\n shouldShowCentered = false,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n event.preventDefault();\n event.stopPropagation();\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n const lineHeight = useMemo(\n () => (shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n [shouldShowCentered],\n );\n\n return (\n <StyledCheckbox>\n <StyledCheckboxInput\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n <StyledCheckboxLabel\n htmlFor={uuid}\n isChecked={isChecked ?? isActive}\n isDisabled={isDisabled}\n shouldShowAsSwitch={shouldShowAsSwitch}\n lineHeight={lineHeight}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
|
|
|
15
15
|
display: flex;
|
|
16
16
|
justify-content: space-between;
|
|
17
17
|
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
18
|
-
padding:
|
|
18
|
+
padding: 4px 10px;
|
|
19
19
|
cursor: pointer;
|
|
20
20
|
background: ${_ref => {
|
|
21
21
|
let {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","_ref","theme","_ref2","minWidth","_ref3","_ref4","isOpen","css","_ref5","StyledComboBoxPlaceholder","p","_ref6","text","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref7","_ref8","_ref9","_ref10","height","_ref11"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledComboBox = styled.div`\n width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n isOpen: boolean;\n minWidth: number;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding:
|
|
1
|
+
{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","_ref","theme","_ref2","minWidth","_ref3","_ref4","isOpen","css","_ref5","StyledComboBoxPlaceholder","p","_ref6","text","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref7","_ref8","_ref9","_ref10","height","_ref11"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledComboBox = styled.div`\n width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n isOpen: boolean;\n minWidth: number;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: pointer;\n background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n min-width: ${({ minWidth }) => minWidth}px;\n max-width: ${({ minWidth }) => minWidth}px;\n\n ${({ isOpen }) =>\n isOpen\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-radius: 3px;\n `}\n\n &:hover {\n background: ${({ theme }: StyledComboBoxHeaderProps) => theme['secondary-103']};\n }\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.p<StyledComboBoxPlaceholderProps>`\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n margin: 0;\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n height: number;\n minWidth: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['001']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n cursor: pointer;\n min-width: ${({ minWidth }) => minWidth}px;\n max-width: ${({ minWidth }) => minWidth}px;\n max-height: 300px;\n overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledComboBoxBodyProps) => theme['009-rgb']}, 0.08)\n inset;\n\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(160, 160, 160, 1);\n }\n`;\n"],"mappings":"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"}
|
|
@@ -22,7 +22,7 @@ const ComboBoxItem = _ref => {
|
|
|
22
22
|
}, [onSelect, text, value]);
|
|
23
23
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItem, {
|
|
24
24
|
onClick: handleItemClick
|
|
25
|
-
},
|
|
25
|
+
}, text), [handleItemClick, text]);
|
|
26
26
|
};
|
|
27
27
|
ComboBoxItem.displayName = 'ComboBoxItem';
|
|
28
28
|
var _default = exports.default = ComboBoxItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_ComboBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ComboBoxItem","_ref","onSelect","text","value","handleItemClick","useCallback","useMemo","createElement","StyledComboBoxItem","onClick","
|
|
1
|
+
{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_ComboBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ComboBoxItem","_ref","onSelect","text","value","handleItemClick","useCallback","useMemo","createElement","StyledComboBoxItem","onClick","displayName","_default","exports"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { IComboBoxItem } from '../ComboBox';\nimport { StyledComboBoxItem } from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n /**\n * Function to be executed when an item is selected.\n */\n onSelect: (itemToSelect: IComboBoxItem) => void;\n /**\n * The text of the item.\n */\n text: IComboBoxItem['text'];\n /**\n * The value of the item.\n */\n value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({ onSelect, text, value }) => {\n const handleItemClick = useCallback(() => {\n onSelect({ text, value });\n }, [onSelect, text, value]);\n\n return useMemo(\n () => <StyledComboBoxItem onClick={handleItemClick}>{text}</StyledComboBoxItem>,\n [handleItemClick, text],\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAA2D,SAAAE,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,SAAAJ,wBAAAI,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,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAiB3D,MAAMY,YAAmC,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAClE,MAAMI,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtCJ,QAAQ,CAAC;MAAEC,IAAI;MAAEC;IAAM,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACF,QAAQ,EAAEC,IAAI,EAAEC,KAAK,CAAC,CAAC;EAE3B,OAAO,IAAAG,cAAO,EACV,mBAAMhC,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,aAAA,CAAA+B,kBAAkB;IAACC,OAAO,EAAEL;EAAgB,GAAEF,IAAyB,CAAC,EAC/E,CAACE,eAAe,EAAEF,IAAI,CAC1B,CAAC;AACL,CAAC;AAEDH,YAAY,CAACW,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA5B,OAAA,GAE3Be,YAAY"}
|
|
@@ -2,6 +2,3 @@
|
|
|
2
2
|
export declare const StyledComboBoxItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
3
3
|
theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
4
4
|
}>>;
|
|
5
|
-
export declare const StyledComboBoxItemText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
|
|
6
|
-
theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
7
|
-
}>>;
|
|
@@ -3,26 +3,25 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.StyledComboBoxItem = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
9
|
const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.default.div`
|
|
10
|
-
|
|
11
|
-
background: ${_ref => {
|
|
10
|
+
color: ${_ref => {
|
|
12
11
|
let {
|
|
13
12
|
theme
|
|
14
13
|
} = _ref;
|
|
15
|
-
return theme
|
|
14
|
+
return theme.text;
|
|
16
15
|
}};
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
padding: 4px 10px;
|
|
17
|
+
|
|
18
|
+
&:hover {
|
|
19
|
+
background: ${_ref2 => {
|
|
21
20
|
let {
|
|
22
21
|
theme
|
|
23
22
|
} = _ref2;
|
|
24
|
-
return theme
|
|
23
|
+
return theme['secondary-103'];
|
|
25
24
|
}};
|
|
26
|
-
|
|
25
|
+
}
|
|
27
26
|
`;
|
|
28
27
|
//# sourceMappingURL=ComboBoxItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledComboBoxItem","exports","styled","div","_ref","theme","
|
|
1
|
+
{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledComboBoxItem","exports","styled","div","_ref","theme","text","_ref2"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<unknown>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n padding: 4px 10px;\n\n &:hover {\n background: ${({ theme }: StyledComboBoxItemProps) => theme['secondary-103']};\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACtE,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA,sBAAsBC,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACrF;AACA,CAAC"}
|
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.359",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "4f353e7d3ea305d4c439df428368019732228e0d"
|
|
74
74
|
}
|