@chayns-components/core 5.0.0-beta.781 → 5.0.0-beta.783
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 +2 -2
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.js +4 -20
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js +12 -4
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js +2 -2
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js +5 -21
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js +12 -4
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/types/components/radio-button/RadioButton.d.ts +0 -10
- package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts +12 -1
- package/package.json +2 -2
|
@@ -40,11 +40,11 @@ const ComboBoxItem = ({
|
|
|
40
40
|
$isSelected: isSelected
|
|
41
41
|
}, imageUrl && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemImage, {
|
|
42
42
|
src: imageUrl,
|
|
43
|
-
$shouldShowBigImage: typeof subtext === 'string',
|
|
43
|
+
$shouldShowBigImage: typeof subtext === 'string' && subtext.trim() !== '',
|
|
44
44
|
$shouldShowRoundImage: shouldShowRoundImage
|
|
45
45
|
}), icons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
46
46
|
icons: icons
|
|
47
|
-
}), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContent, null, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeader, null, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderText, null, text, suffixElement), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderRightElement, null, rightElement)), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, rightElement, shouldShowRoundImage, subtext, suffixElement, text]);
|
|
47
|
+
}), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContent, null, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeader, null, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderText, null, text, suffixElement), rightElement && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, rightElement, shouldShowRoundImage, subtext, suffixElement, text]);
|
|
48
48
|
};
|
|
49
49
|
ComboBoxItem.displayName = 'ComboBoxItem';
|
|
50
50
|
var _default = exports.default = ComboBoxItem;
|
|
@@ -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","isSelected","onSelect","rightElement","shouldShowRoundImage","subtext","suffixElement","text","value","handleItemClick","useCallback","isTouch","getIsTouch","useMemo","createElement","StyledComboBoxItem","String","onClick","$isTouch","$isSelected","StyledComboBoxItemImage","src","$shouldShowBigImage","$shouldShowRoundImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","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 isSelected: boolean;\n onSelect: (itemToSelect: IComboBoxItem) => void;\n rightElement: IComboBoxItem['rightElement'];\n shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n subtext: IComboBoxItem['subtext'];\n suffixElement?: ReactNode;\n text: IComboBoxItem['text'];\n value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n icons,\n id,\n imageUrl,\n isSelected,\n onSelect,\n rightElement,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n value,\n}) => {\n const handleItemClick = useCallback(() => {\n onSelect({ text, value, suffixElement, imageUrl });\n }, [imageUrl, 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 $isTouch={isTouch}\n $isSelected={isSelected}\n >\n {imageUrl && (\n <StyledComboBoxItemImage\n src={imageUrl}\n $shouldShowBigImage={typeof subtext === 'string'}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {icons && <Icon icons={icons} />}\n <StyledComboBoxItemContent>\n <StyledComboBoxItemContentHeader>\n <StyledComboBoxItemContentHeaderText>\n {text}\n {suffixElement}\n </StyledComboBoxItemContentHeaderText>\n <StyledComboBoxItemContentHeaderRightElement>\n
|
|
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","isSelected","onSelect","rightElement","shouldShowRoundImage","subtext","suffixElement","text","value","handleItemClick","useCallback","isTouch","getIsTouch","useMemo","createElement","StyledComboBoxItem","String","onClick","$isTouch","$isSelected","StyledComboBoxItemImage","src","$shouldShowBigImage","trim","$shouldShowRoundImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","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 isSelected: boolean;\n onSelect: (itemToSelect: IComboBoxItem) => void;\n rightElement: IComboBoxItem['rightElement'];\n shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n subtext: IComboBoxItem['subtext'];\n suffixElement?: ReactNode;\n text: IComboBoxItem['text'];\n value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n icons,\n id,\n imageUrl,\n isSelected,\n onSelect,\n rightElement,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n value,\n}) => {\n const handleItemClick = useCallback(() => {\n onSelect({ text, value, suffixElement, imageUrl });\n }, [imageUrl, 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 $isTouch={isTouch}\n $isSelected={isSelected}\n >\n {imageUrl && (\n <StyledComboBoxItemImage\n src={imageUrl}\n $shouldShowBigImage={typeof subtext === 'string' && subtext.trim() !== ''}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {icons && <Icon icons={icons} />}\n <StyledComboBoxItemContent>\n <StyledComboBoxItemContentHeader>\n <StyledComboBoxItemContentHeaderText>\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 isSelected,\n isTouch,\n rightElement,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n ],\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AAEA,IAAAI,aAAA,GAAAJ,OAAA;AAQ+B,SAAAG,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,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,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAgB/B,MAAMW,YAAmC,GAAGA,CAAC;EACzCC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,YAAY;EACZC,oBAAoB;EACpBC,OAAO;EACPC,aAAa;EACbC,IAAI;EACJC;AACJ,CAAC,KAAK;EACF,MAAMC,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtCR,QAAQ,CAAC;MAAEK,IAAI;MAAEC,KAAK;MAAEF,aAAa;MAAEN;IAAS,CAAC,CAAC;EACtD,CAAC,EAAE,CAACA,QAAQ,EAAEE,QAAQ,EAAEI,aAAa,EAAEC,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEpD,MAAMG,OAAO,GAAG,IAAAC,uBAAU,EAAC,CAAC;EAE5B,OAAO,IAAAC,cAAO,EACV,mBACI3C,MAAA,CAAAS,OAAA,CAAAmC,aAAA,CAACtC,aAAA,CAAAuC,kBAAkB;IACfhB,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGiB,MAAM,CAACjB,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEkB,OAAO,EAAER,eAAgB;IACzBS,QAAQ,EAAEP,OAAQ;IAClBQ,WAAW,EAAElB;EAAW,GAEvBD,QAAQ,iBACL9B,MAAA,CAAAS,OAAA,CAAAmC,aAAA,CAACtC,aAAA,CAAA4C,uBAAuB;IACpBC,GAAG,EAAErB,QAAS;IACdsB,mBAAmB,EAAE,OAAOjB,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACkB,IAAI,CAAC,CAAC,KAAK,EAAG;IAC1EC,qBAAqB,EAAEpB;EAAqB,CAC/C,CACJ,EACAN,KAAK,iBAAI5B,MAAA,CAAAS,OAAA,CAAAmC,aAAA,CAACxC,KAAA,CAAAK,OAAI;IAACmB,KAAK,EAAEA;EAAM,CAAE,CAAC,eAChC5B,MAAA,CAAAS,OAAA,CAAAmC,aAAA,CAACtC,aAAA,CAAAiD,yBAAyB,qBACtBvD,MAAA,CAAAS,OAAA,CAAAmC,aAAA,CAACtC,aAAA,CAAAkD,+BAA+B,qBAC5BxD,MAAA,CAAAS,OAAA,CAAAmC,aAAA,CAACtC,aAAA,CAAAmD,mCAAmC,QAC/BpB,IAAI,EACJD,aACgC,CAAC,EACrCH,YAAY,iBACTjC,MAAA,CAAAS,OAAA,CAAAmC,aAAA,CAACtC,aAAA,CAAAoD,2CAA2C,QACvCzB,YACwC,CAEpB,CAAC,EACjCE,OAAO,iBACJnC,MAAA,CAAAS,OAAA,CAAAmC,aAAA,CAACtC,aAAA,CAAAqD,gCAAgC,QAC5BxB,OAC6B,CAEf,CACX,CACvB,EACD,CACII,eAAe,EACfX,KAAK,EACLC,EAAE,EACFC,QAAQ,EACRC,UAAU,EACVU,OAAO,EACPR,YAAY,EACZC,oBAAoB,EACpBC,OAAO,EACPC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDV,YAAY,CAACiC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAArD,OAAA,GAE3BkB,YAAY","ignoreList":[]}
|
|
@@ -12,12 +12,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
12
12
|
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; }
|
|
13
13
|
const RadioButton = ({
|
|
14
14
|
children,
|
|
15
|
-
isChecked,
|
|
16
15
|
label,
|
|
17
|
-
onChange,
|
|
18
16
|
id,
|
|
19
|
-
isDisabled = false
|
|
20
|
-
canBeUnchecked
|
|
17
|
+
isDisabled = false
|
|
21
18
|
}) => {
|
|
22
19
|
const {
|
|
23
20
|
selectedRadioButtonId,
|
|
@@ -28,27 +25,14 @@ const RadioButton = ({
|
|
|
28
25
|
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
29
26
|
const isInGroup = typeof updateSelectedRadioButtonId === 'function';
|
|
30
27
|
const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
|
|
31
|
-
const uncheckable =
|
|
32
|
-
const isInitialRenderRef = (0, _react.useRef)(true);
|
|
28
|
+
const uncheckable = radioButtonsCanBeUnchecked;
|
|
33
29
|
(0, _react.useEffect)(() => {
|
|
34
|
-
if (
|
|
30
|
+
if (selectedRadioButtonId === id) {
|
|
35
31
|
if (typeof updateSelectedRadioButtonId === 'function') {
|
|
36
32
|
updateSelectedRadioButtonId(id);
|
|
37
|
-
} else {
|
|
38
|
-
setInternalIsChecked(isChecked);
|
|
39
33
|
}
|
|
40
34
|
}
|
|
41
|
-
}, [id,
|
|
42
|
-
(0, _react.useEffect)(() => {
|
|
43
|
-
if (isInitialRenderRef.current) {
|
|
44
|
-
isInitialRenderRef.current = false;
|
|
45
|
-
} else if (typeof onChange === 'function') {
|
|
46
|
-
onChange({
|
|
47
|
-
isChecked: isMarked,
|
|
48
|
-
id
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
}, [id, isMarked, onChange]);
|
|
35
|
+
}, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
52
36
|
const handleClick = (0, _react.useCallback)(() => {
|
|
53
37
|
if (isDisabled) {
|
|
54
38
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButton","children","isChecked","label","onChange","id","isDisabled","canBeUnchecked","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","isInitialRenderRef","useRef","useEffect","current","handleClick","useCallback","undefined","prev","handleMouseEnter","handleMouseLeave","useMemo","createElement","StyledRadioButton","$isDisabled","onMouseEnter","onMouseLeave","StyledRadioButtonWrapper","onClick","StyledRadioButtonPseudoCheckBox","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonCheckBox","disabled","type","checked","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","height","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from 'react';\nimport type { RadioButtonItem } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * Whether the radio button should be checked.\n */\n isChecked?: boolean;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: string;\n /**\n * Function to be executed when a button is checked.\n */\n onChange?: (item: RadioButtonItem) => void;\n\n canBeUnchecked?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n isChecked,\n label,\n onChange,\n id,\n isDisabled = false,\n canBeUnchecked,\n}) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId, radioButtonsCanBeUnchecked } =\n useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = isInGroup ? radioButtonsCanBeUnchecked : canBeUnchecked;\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n if (typeof isChecked === 'boolean' && isChecked) {\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n } else {\n setInternalIsChecked(isChecked);\n }\n }\n }, [id, isChecked, updateSelectedRadioButtonId]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof onChange === 'function') {\n onChange({ isChecked: isMarked, id });\n }\n }, [id, isMarked, onChange]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <StyledRadioButtonWrapper $isDisabled={isDisabled} onClick={handleClick}>\n <StyledRadioButtonPseudoCheckBox $isDisabled={isDisabled} $isChecked={isMarked}>\n <StyledRadioButtonCheckBoxMark\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledRadioButtonCheckBox\n disabled={isDisabled}\n $isDisabled={isDisabled}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButton","children","label","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","useEffect","handleClick","useCallback","undefined","prev","handleMouseEnter","handleMouseLeave","useMemo","createElement","StyledRadioButton","$isDisabled","onMouseEnter","onMouseLeave","StyledRadioButtonWrapper","onClick","StyledRadioButtonPseudoCheckBox","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonCheckBox","disabled","type","checked","onChange","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","height","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: string;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({ children, label, id, isDisabled = false }) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId, radioButtonsCanBeUnchecked } =\n useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = radioButtonsCanBeUnchecked;\n\n useEffect(() => {\n if (selectedRadioButtonId === id) {\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n }\n }, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <StyledRadioButtonWrapper $isDisabled={isDisabled} onClick={handleClick}>\n <StyledRadioButtonPseudoCheckBox $isDisabled={isDisabled} $isChecked={isMarked}>\n <StyledRadioButtonCheckBoxMark\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledRadioButtonCheckBox\n disabled={isDisabled}\n $isDisabled={isDisabled}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -15,13 +15,21 @@ const RadioButtonGroupContext = exports.RadioButtonGroupContext = /*#__PURE__*/_
|
|
|
15
15
|
RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
|
|
16
16
|
const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
17
17
|
children,
|
|
18
|
-
|
|
18
|
+
canUncheckRadioButtons,
|
|
19
|
+
selectedId,
|
|
20
|
+
onSelect
|
|
19
21
|
}, ref) => {
|
|
20
22
|
const [selectedRadioButtonId, setSelectedRadioButtonId] = (0, _react.useState)(undefined);
|
|
21
23
|
const isInitialRenderRef = (0, _react.useRef)(true);
|
|
24
|
+
(0, _react.useEffect)(() => {
|
|
25
|
+
setSelectedRadioButtonId(selectedId);
|
|
26
|
+
}, [selectedId]);
|
|
22
27
|
const updateSelectedRadioButtonId = (0, _react.useCallback)(id => {
|
|
28
|
+
if (typeof onSelect === 'function') {
|
|
29
|
+
onSelect(id);
|
|
30
|
+
}
|
|
23
31
|
setSelectedRadioButtonId(id);
|
|
24
|
-
}, []);
|
|
32
|
+
}, [onSelect]);
|
|
25
33
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
26
34
|
updateSelectedRadioButtonId
|
|
27
35
|
}), [updateSelectedRadioButtonId]);
|
|
@@ -33,8 +41,8 @@ const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
33
41
|
const providerValue = (0, _react.useMemo)(() => ({
|
|
34
42
|
selectedRadioButtonId,
|
|
35
43
|
updateSelectedRadioButtonId,
|
|
36
|
-
|
|
37
|
-
}), [
|
|
44
|
+
canUncheckRadioButtons
|
|
45
|
+
}), [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
38
46
|
return /*#__PURE__*/_react.default.createElement(RadioButtonGroupContext.Provider, {
|
|
39
47
|
value: providerValue
|
|
40
48
|
}, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButtonGroupContext","exports","React","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","forwardRef","children","ref","setSelectedRadioButtonId","useState","isInitialRenderRef","useRef","useCallback","id","useImperativeHandle","
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButtonGroupContext","exports","React","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","forwardRef","children","canUncheckRadioButtons","selectedId","onSelect","ref","setSelectedRadioButtonId","useState","isInitialRenderRef","useRef","useEffect","useCallback","id","useImperativeHandle","current","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /**\n * Whether the RadioButtons can be unchecked.\n */\n canUncheckRadioButtons?: boolean;\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n /**\n * Function to be executed when an id is selected.\n */\n onSelect?: (id?: string) => void;\n /**\n * The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, canUncheckRadioButtons, selectedId, onSelect }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n setSelectedRadioButtonId(id);\n },\n [onSelect],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n }\n }, [selectedRadioButtonId]);\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n canUncheckRadioButtons,\n }),\n [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -32,11 +32,11 @@ const ComboBoxItem = _ref => {
|
|
|
32
32
|
$isSelected: isSelected
|
|
33
33
|
}, imageUrl && /*#__PURE__*/React.createElement(StyledComboBoxItemImage, {
|
|
34
34
|
src: imageUrl,
|
|
35
|
-
$shouldShowBigImage: typeof subtext === 'string',
|
|
35
|
+
$shouldShowBigImage: typeof subtext === 'string' && subtext.trim() !== '',
|
|
36
36
|
$shouldShowRoundImage: shouldShowRoundImage
|
|
37
37
|
}), icons && /*#__PURE__*/React.createElement(Icon, {
|
|
38
38
|
icons: icons
|
|
39
|
-
}), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderText, null, text, suffixElement), /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, rightElement, shouldShowRoundImage, subtext, suffixElement, text]);
|
|
39
|
+
}), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderText, null, text, suffixElement), rightElement && /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, rightElement, shouldShowRoundImage, subtext, suffixElement, text]);
|
|
40
40
|
};
|
|
41
41
|
ComboBoxItem.displayName = 'ComboBoxItem';
|
|
42
42
|
export default ComboBoxItem;
|
|
@@ -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","isSelected","onSelect","rightElement","shouldShowRoundImage","subtext","suffixElement","text","value","handleItemClick","isTouch","createElement","String","onClick","$isTouch","$isSelected","src","$shouldShowBigImage","$shouldShowRoundImage","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 isSelected: boolean;\n onSelect: (itemToSelect: IComboBoxItem) => void;\n rightElement: IComboBoxItem['rightElement'];\n shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n subtext: IComboBoxItem['subtext'];\n suffixElement?: ReactNode;\n text: IComboBoxItem['text'];\n value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n icons,\n id,\n imageUrl,\n isSelected,\n onSelect,\n rightElement,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n value,\n}) => {\n const handleItemClick = useCallback(() => {\n onSelect({ text, value, suffixElement, imageUrl });\n }, [imageUrl, 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 $isTouch={isTouch}\n $isSelected={isSelected}\n >\n {imageUrl && (\n <StyledComboBoxItemImage\n src={imageUrl}\n $shouldShowBigImage={typeof subtext === 'string'}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {icons && <Icon icons={icons} />}\n <StyledComboBoxItemContent>\n <StyledComboBoxItemContentHeader>\n <StyledComboBoxItemContentHeaderText>\n {text}\n {suffixElement}\n </StyledComboBoxItemContentHeaderText>\n <StyledComboBoxItemContentHeaderRightElement>\n
|
|
1
|
+
{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","_ref","icons","id","imageUrl","isSelected","onSelect","rightElement","shouldShowRoundImage","subtext","suffixElement","text","value","handleItemClick","isTouch","createElement","String","onClick","$isTouch","$isSelected","src","$shouldShowBigImage","trim","$shouldShowRoundImage","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 isSelected: boolean;\n onSelect: (itemToSelect: IComboBoxItem) => void;\n rightElement: IComboBoxItem['rightElement'];\n shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n subtext: IComboBoxItem['subtext'];\n suffixElement?: ReactNode;\n text: IComboBoxItem['text'];\n value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n icons,\n id,\n imageUrl,\n isSelected,\n onSelect,\n rightElement,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n value,\n}) => {\n const handleItemClick = useCallback(() => {\n onSelect({ text, value, suffixElement, imageUrl });\n }, [imageUrl, 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 $isTouch={isTouch}\n $isSelected={isSelected}\n >\n {imageUrl && (\n <StyledComboBoxItemImage\n src={imageUrl}\n $shouldShowBigImage={typeof subtext === 'string' && subtext.trim() !== ''}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {icons && <Icon icons={icons} />}\n <StyledComboBoxItemContent>\n <StyledComboBoxItemContentHeader>\n <StyledComboBoxItemContentHeaderText>\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 isSelected,\n isTouch,\n rightElement,\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;AAgB9B,MAAMC,YAAmC,GAAGC,IAAA,IAYtC;EAAA,IAZuC;IACzCC,KAAK;IACLC,EAAE;IACFC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,oBAAoB;IACpBC,OAAO;IACPC,aAAa;IACbC,IAAI;IACJC;EACJ,CAAC,GAAAX,IAAA;EACG,MAAMY,eAAe,GAAGxB,WAAW,CAAC,MAAM;IACtCiB,QAAQ,CAAC;MAAEK,IAAI;MAAEC,KAAK;MAAEF,aAAa;MAAEN;IAAS,CAAC,CAAC;EACtD,CAAC,EAAE,CAACA,QAAQ,EAAEE,QAAQ,EAAEI,aAAa,EAAEC,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEpD,MAAME,OAAO,GAAGvB,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAA2B,aAAA,CAACtB,kBAAkB;IACfU,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGa,MAAM,CAACb,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEc,OAAO,EAAEJ,eAAgB;IACzBK,QAAQ,EAAEJ,OAAQ;IAClBK,WAAW,EAAEd;EAAW,GAEvBD,QAAQ,iBACLhB,KAAA,CAAA2B,aAAA,CAAChB,uBAAuB;IACpBqB,GAAG,EAAEhB,QAAS;IACdiB,mBAAmB,EAAE,OAAOZ,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACa,IAAI,CAAC,CAAC,KAAK,EAAG;IAC1EC,qBAAqB,EAAEf;EAAqB,CAC/C,CACJ,EACAN,KAAK,iBAAId,KAAA,CAAA2B,aAAA,CAACvB,IAAI;IAACU,KAAK,EAAEA;EAAM,CAAE,CAAC,eAChCd,KAAA,CAAA2B,aAAA,CAACrB,yBAAyB,qBACtBN,KAAA,CAAA2B,aAAA,CAACpB,+BAA+B,qBAC5BP,KAAA,CAAA2B,aAAA,CAAClB,mCAAmC,QAC/Bc,IAAI,EACJD,aACgC,CAAC,EACrCH,YAAY,iBACTnB,KAAA,CAAA2B,aAAA,CAACnB,2CAA2C,QACvCW,YACwC,CAEpB,CAAC,EACjCE,OAAO,iBACJrB,KAAA,CAAA2B,aAAA,CAACjB,gCAAgC,QAC5BW,OAC6B,CAEf,CACX,CACvB,EACD,CACII,eAAe,EACfX,KAAK,EACLC,EAAE,EACFC,QAAQ,EACRC,UAAU,EACVS,OAAO,EACPP,YAAY,EACZC,oBAAoB,EACpBC,OAAO,EACPC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDX,YAAY,CAACwB,WAAW,GAAG,cAAc;AAEzC,eAAexB,YAAY","ignoreList":[]}
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import { AnimatePresence } from 'framer-motion';
|
|
2
|
-
import React, { useCallback, useContext, useEffect, useMemo,
|
|
2
|
+
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';
|
|
4
4
|
import { StyledMotionRadioButtonChildren, StyledRadioButton, StyledRadioButtonCheckBox, StyledRadioButtonCheckBoxMark, StyledRadioButtonLabel, StyledRadioButtonPseudoCheckBox, StyledRadioButtonWrapper } from './RadioButton.styles';
|
|
5
5
|
const RadioButton = _ref => {
|
|
6
6
|
let {
|
|
7
7
|
children,
|
|
8
|
-
isChecked,
|
|
9
8
|
label,
|
|
10
|
-
onChange,
|
|
11
9
|
id,
|
|
12
|
-
isDisabled = false
|
|
13
|
-
canBeUnchecked
|
|
10
|
+
isDisabled = false
|
|
14
11
|
} = _ref;
|
|
15
12
|
const {
|
|
16
13
|
selectedRadioButtonId,
|
|
@@ -21,27 +18,14 @@ const RadioButton = _ref => {
|
|
|
21
18
|
const [isHovered, setIsHovered] = useState(false);
|
|
22
19
|
const isInGroup = typeof updateSelectedRadioButtonId === 'function';
|
|
23
20
|
const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
|
|
24
|
-
const uncheckable =
|
|
25
|
-
const isInitialRenderRef = useRef(true);
|
|
21
|
+
const uncheckable = radioButtonsCanBeUnchecked;
|
|
26
22
|
useEffect(() => {
|
|
27
|
-
if (
|
|
23
|
+
if (selectedRadioButtonId === id) {
|
|
28
24
|
if (typeof updateSelectedRadioButtonId === 'function') {
|
|
29
25
|
updateSelectedRadioButtonId(id);
|
|
30
|
-
} else {
|
|
31
|
-
setInternalIsChecked(isChecked);
|
|
32
26
|
}
|
|
33
27
|
}
|
|
34
|
-
}, [id,
|
|
35
|
-
useEffect(() => {
|
|
36
|
-
if (isInitialRenderRef.current) {
|
|
37
|
-
isInitialRenderRef.current = false;
|
|
38
|
-
} else if (typeof onChange === 'function') {
|
|
39
|
-
onChange({
|
|
40
|
-
isChecked: isMarked,
|
|
41
|
-
id
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
}, [id, isMarked, onChange]);
|
|
28
|
+
}, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
45
29
|
const handleClick = useCallback(() => {
|
|
46
30
|
if (isDisabled) {
|
|
47
31
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useState","RadioButtonGroupContext","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","label","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","undefined","prev","handleMouseEnter","handleMouseLeave","createElement","$isDisabled","onMouseEnter","onMouseLeave","onClick","$isChecked","$isHovered","$isSelected","disabled","type","checked","onChange","initial","animate","opacity","height","transition","duration","displayName"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: string;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({ children, label, id, isDisabled = false }) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId, radioButtonsCanBeUnchecked } =\n useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = radioButtonsCanBeUnchecked;\n\n useEffect(() => {\n if (selectedRadioButtonId === id) {\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n }\n }, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <StyledRadioButtonWrapper $isDisabled={isDisabled} onClick={handleClick}>\n <StyledRadioButtonPseudoCheckBox $isDisabled={isDisabled} $isChecked={isMarked}>\n <StyledRadioButtonCheckBoxMark\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledRadioButtonCheckBox\n disabled={isDisabled}\n $isDisabled={isDisabled}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,13 +8,21 @@ RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
|
|
|
8
8
|
const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
9
9
|
let {
|
|
10
10
|
children,
|
|
11
|
-
|
|
11
|
+
canUncheckRadioButtons,
|
|
12
|
+
selectedId,
|
|
13
|
+
onSelect
|
|
12
14
|
} = _ref;
|
|
13
15
|
const [selectedRadioButtonId, setSelectedRadioButtonId] = useState(undefined);
|
|
14
16
|
const isInitialRenderRef = useRef(true);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
setSelectedRadioButtonId(selectedId);
|
|
19
|
+
}, [selectedId]);
|
|
15
20
|
const updateSelectedRadioButtonId = useCallback(id => {
|
|
21
|
+
if (typeof onSelect === 'function') {
|
|
22
|
+
onSelect(id);
|
|
23
|
+
}
|
|
16
24
|
setSelectedRadioButtonId(id);
|
|
17
|
-
}, []);
|
|
25
|
+
}, [onSelect]);
|
|
18
26
|
useImperativeHandle(ref, () => ({
|
|
19
27
|
updateSelectedRadioButtonId
|
|
20
28
|
}), [updateSelectedRadioButtonId]);
|
|
@@ -26,8 +34,8 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
26
34
|
const providerValue = useMemo(() => ({
|
|
27
35
|
selectedRadioButtonId,
|
|
28
36
|
updateSelectedRadioButtonId,
|
|
29
|
-
|
|
30
|
-
}), [
|
|
37
|
+
canUncheckRadioButtons
|
|
38
|
+
}), [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
31
39
|
return /*#__PURE__*/React.createElement(RadioButtonGroupContext.Provider, {
|
|
32
40
|
value: providerValue
|
|
33
41
|
}, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","_ref","ref","children","setSelectedRadioButtonId","isInitialRenderRef","id","current","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","_ref","ref","children","canUncheckRadioButtons","selectedId","onSelect","setSelectedRadioButtonId","isInitialRenderRef","id","current","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /**\n * Whether the RadioButtons can be unchecked.\n */\n canUncheckRadioButtons?: boolean;\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n /**\n * Function to be executed when an id is selected.\n */\n onSelect?: (id?: string) => void;\n /**\n * The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, canUncheckRadioButtons, selectedId, onSelect }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n setSelectedRadioButtonId(id);\n },\n [onSelect],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n }\n }, [selectedRadioButtonId]);\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n canUncheckRadioButtons,\n }),\n [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,UAAU,EAEVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AAUd,OAAO,MAAMC,uBAAuB,gBAAGR,KAAK,CAACS,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED,SAAS;EACtCE,0BAA0B,EAAE;AAChC,CAAC,CAAC;AAEFL,uBAAuB,CAACM,WAAW,GAAG,yBAAyB;AA0B/D,MAAMC,gBAAgB,gBAAGd,UAAU,CAC/B,CAAAe,IAAA,EAA6DC,GAAG,KAAK;EAAA,IAApE;IAAEC,QAAQ;IAAEC,sBAAsB;IAAEC,UAAU;IAAEC;EAAS,CAAC,GAAAL,IAAA;EACvD,MAAM,CAACN,qBAAqB,EAAEY,wBAAwB,CAAC,GACnDf,QAAQ,CAAoDI,SAAS,CAAC;EAE1E,MAAMY,kBAAkB,GAAGjB,MAAM,CAAC,IAAI,CAAC;EAEvCH,SAAS,CAAC,MAAM;IACZmB,wBAAwB,CAACF,UAAU,CAAC;EACxC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMR,2BAA2B,GAAGV,WAAW,CAC1CsB,EAAE,IAAK;IACJ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACG,EAAE,CAAC;IAChB;IAEAF,wBAAwB,CAACE,EAAE,CAAC;EAChC,CAAC,EACD,CAACH,QAAQ,CACb,CAAC;EAEDjB,mBAAmB,CACfa,GAAG,EACH,OAAO;IACHL;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAEDT,SAAS,CAAC,MAAM;IACZ,IAAIoB,kBAAkB,CAACE,OAAO,EAAE;MAC5BF,kBAAkB,CAACE,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,CAACf,qBAAqB,CAAC,CAAC;EAE3B,MAAMgB,aAAa,GAAGrB,OAAO,CACzB,OAAO;IACHK,qBAAqB;IACrBE,2BAA2B;IAC3BO;EACJ,CAAC,CAAC,EACF,CAACA,sBAAsB,EAAET,qBAAqB,EAAEE,2BAA2B,CAC/E,CAAC;EAED,oBACIZ,KAAA,CAAA2B,aAAA,CAACnB,uBAAuB,CAACoB,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAClDR,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}
|
|
@@ -1,14 +1,9 @@
|
|
|
1
1
|
import { FC, type ReactNode } from 'react';
|
|
2
|
-
import type { RadioButtonItem } from '../../types/radioButton';
|
|
3
2
|
export type RadioButtonProps = {
|
|
4
3
|
/**
|
|
5
4
|
* The children that should be displayed after the RadioButton is checked.
|
|
6
5
|
*/
|
|
7
6
|
children?: ReactNode;
|
|
8
|
-
/**
|
|
9
|
-
* Whether the radio button should be checked.
|
|
10
|
-
*/
|
|
11
|
-
isChecked?: boolean;
|
|
12
7
|
/**
|
|
13
8
|
* whether the RadioButton should be shown.
|
|
14
9
|
*/
|
|
@@ -21,11 +16,6 @@ export type RadioButtonProps = {
|
|
|
21
16
|
* The label that should be displayed next to the radio button.
|
|
22
17
|
*/
|
|
23
18
|
label?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Function to be executed when a button is checked.
|
|
26
|
-
*/
|
|
27
|
-
onChange?: (item: RadioButtonItem) => void;
|
|
28
|
-
canBeUnchecked?: boolean;
|
|
29
19
|
};
|
|
30
20
|
declare const RadioButton: FC<RadioButtonProps>;
|
|
31
21
|
export default RadioButton;
|
|
@@ -10,12 +10,23 @@ export type RadioButtonGroupRef = {
|
|
|
10
10
|
updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;
|
|
11
11
|
};
|
|
12
12
|
export type RadioButtonGroupProps = {
|
|
13
|
+
/**
|
|
14
|
+
* Whether the RadioButtons can be unchecked.
|
|
15
|
+
*/
|
|
16
|
+
canUncheckRadioButtons?: boolean;
|
|
13
17
|
/**
|
|
14
18
|
* The RadioButtons that should be grouped. Radio buttons with the same group are
|
|
15
19
|
* automatically unchecked when an `RadioButton` of the group is checked.
|
|
16
20
|
*/
|
|
17
21
|
children: ReactNode;
|
|
18
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Function to be executed when an id is selected.
|
|
24
|
+
*/
|
|
25
|
+
onSelect?: (id?: string) => void;
|
|
26
|
+
/**
|
|
27
|
+
* The id of the current selected RadioButton.
|
|
28
|
+
*/
|
|
29
|
+
selectedId?: string;
|
|
19
30
|
};
|
|
20
31
|
declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<RadioButtonGroupRef>>;
|
|
21
32
|
export default RadioButtonGroup;
|
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.783",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "39bd8d3f940834efdbc9fd2cd19f8148821ad86f"
|
|
89
89
|
}
|