@chayns-components/core 5.0.0-beta.705 → 5.0.0-beta.706
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/radio-button/RadioButton.js +13 -3
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js +8 -4
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js +13 -3
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js +8 -4
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/types/components/radio-button/RadioButton.d.ts +1 -0
- package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts +3 -1
- package/package.json +2 -2
|
@@ -16,16 +16,19 @@ const RadioButton = ({
|
|
|
16
16
|
label,
|
|
17
17
|
onChange,
|
|
18
18
|
id,
|
|
19
|
-
isDisabled = false
|
|
19
|
+
isDisabled = false,
|
|
20
|
+
canBeUnchecked
|
|
20
21
|
}) => {
|
|
21
22
|
const {
|
|
22
23
|
selectedRadioButtonId,
|
|
23
|
-
updateSelectedRadioButtonId
|
|
24
|
+
updateSelectedRadioButtonId,
|
|
25
|
+
radioButtonsCanBeUnchecked
|
|
24
26
|
} = (0, _react.useContext)(_RadioButtonGroup.RadioButtonGroupContext);
|
|
25
27
|
const [internalIsChecked, setInternalIsChecked] = (0, _react.useState)(false);
|
|
26
28
|
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
27
29
|
const isInGroup = typeof updateSelectedRadioButtonId === 'function';
|
|
28
30
|
const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
|
|
31
|
+
const uncheckable = isInGroup ? radioButtonsCanBeUnchecked : canBeUnchecked;
|
|
29
32
|
const isInitialRenderRef = (0, _react.useRef)(true);
|
|
30
33
|
(0, _react.useEffect)(() => {
|
|
31
34
|
if (typeof isChecked === 'boolean' && isChecked) {
|
|
@@ -50,11 +53,18 @@ const RadioButton = ({
|
|
|
50
53
|
if (isDisabled) {
|
|
51
54
|
return;
|
|
52
55
|
}
|
|
56
|
+
if (uncheckable) {
|
|
57
|
+
if (updateSelectedRadioButtonId) {
|
|
58
|
+
updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);
|
|
59
|
+
}
|
|
60
|
+
setInternalIsChecked(prev => !prev);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
53
63
|
if (typeof updateSelectedRadioButtonId === 'function') {
|
|
54
64
|
updateSelectedRadioButtonId(id);
|
|
55
65
|
}
|
|
56
66
|
setInternalIsChecked(true);
|
|
57
|
-
}, [id, isDisabled, updateSelectedRadioButtonId]);
|
|
67
|
+
}, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
58
68
|
const handleMouseEnter = (0, _react.useCallback)(() => {
|
|
59
69
|
if (!isDisabled) {
|
|
60
70
|
setIsHovered(true);
|
|
@@ -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","selectedRadioButtonId","updateSelectedRadioButtonId","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","isInitialRenderRef","useRef","useEffect","current","handleClick","useCallback","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\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n isChecked,\n label,\n onChange,\n id,\n isDisabled = false,\n}) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId } =\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 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\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n\n setInternalIsChecked(true);\n }, [id, isDisabled, 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","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":[]}
|
|
@@ -9,13 +9,16 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
9
9
|
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; }
|
|
10
10
|
const RadioButtonGroupContext = exports.RadioButtonGroupContext = /*#__PURE__*/_react.default.createContext({
|
|
11
11
|
selectedRadioButtonId: undefined,
|
|
12
|
-
updateSelectedRadioButtonId: undefined
|
|
12
|
+
updateSelectedRadioButtonId: undefined,
|
|
13
|
+
radioButtonsCanBeUnchecked: false
|
|
13
14
|
});
|
|
14
15
|
RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
|
|
15
16
|
const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
16
|
-
children
|
|
17
|
+
children,
|
|
18
|
+
radioButtonsCanBeUnchecked
|
|
17
19
|
}, ref) => {
|
|
18
20
|
const [selectedRadioButtonId, setSelectedRadioButtonId] = (0, _react.useState)(undefined);
|
|
21
|
+
console.log('selectedRadioButtonId', selectedRadioButtonId);
|
|
19
22
|
const isInitialRenderRef = (0, _react.useRef)(true);
|
|
20
23
|
const updateSelectedRadioButtonId = (0, _react.useCallback)(id => {
|
|
21
24
|
setSelectedRadioButtonId(id);
|
|
@@ -30,8 +33,9 @@ const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
30
33
|
}, [selectedRadioButtonId]);
|
|
31
34
|
const providerValue = (0, _react.useMemo)(() => ({
|
|
32
35
|
selectedRadioButtonId,
|
|
33
|
-
updateSelectedRadioButtonId
|
|
34
|
-
|
|
36
|
+
updateSelectedRadioButtonId,
|
|
37
|
+
radioButtonsCanBeUnchecked
|
|
38
|
+
}), [radioButtonsCanBeUnchecked, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
35
39
|
return /*#__PURE__*/_react.default.createElement(RadioButtonGroupContext.Provider, {
|
|
36
40
|
value: providerValue
|
|
37
41
|
}, 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","displayName","RadioButtonGroup","forwardRef","children","ref","setSelectedRadioButtonId","useState","isInitialRenderRef","useRef","useCallback","id","useImperativeHandle","useEffect","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) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\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};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n
|
|
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","console","log","isInitialRenderRef","useRef","useCallback","id","useImperativeHandle","useEffect","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 * 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 radioButtonsCanBeUnchecked?: boolean;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, radioButtonsCanBeUnchecked }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n console.log('selectedRadioButtonId', selectedRadioButtonId);\n const isInitialRenderRef = useRef(true);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>((id) => {\n setSelectedRadioButtonId(id);\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 radioButtonsCanBeUnchecked,\n }),\n [radioButtonsCanBeUnchecked, 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":[]}
|
|
@@ -9,16 +9,19 @@ const RadioButton = _ref => {
|
|
|
9
9
|
label,
|
|
10
10
|
onChange,
|
|
11
11
|
id,
|
|
12
|
-
isDisabled = false
|
|
12
|
+
isDisabled = false,
|
|
13
|
+
canBeUnchecked
|
|
13
14
|
} = _ref;
|
|
14
15
|
const {
|
|
15
16
|
selectedRadioButtonId,
|
|
16
|
-
updateSelectedRadioButtonId
|
|
17
|
+
updateSelectedRadioButtonId,
|
|
18
|
+
radioButtonsCanBeUnchecked
|
|
17
19
|
} = useContext(RadioButtonGroupContext);
|
|
18
20
|
const [internalIsChecked, setInternalIsChecked] = useState(false);
|
|
19
21
|
const [isHovered, setIsHovered] = useState(false);
|
|
20
22
|
const isInGroup = typeof updateSelectedRadioButtonId === 'function';
|
|
21
23
|
const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
|
|
24
|
+
const uncheckable = isInGroup ? radioButtonsCanBeUnchecked : canBeUnchecked;
|
|
22
25
|
const isInitialRenderRef = useRef(true);
|
|
23
26
|
useEffect(() => {
|
|
24
27
|
if (typeof isChecked === 'boolean' && isChecked) {
|
|
@@ -43,11 +46,18 @@ const RadioButton = _ref => {
|
|
|
43
46
|
if (isDisabled) {
|
|
44
47
|
return;
|
|
45
48
|
}
|
|
49
|
+
if (uncheckable) {
|
|
50
|
+
if (updateSelectedRadioButtonId) {
|
|
51
|
+
updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);
|
|
52
|
+
}
|
|
53
|
+
setInternalIsChecked(prev => !prev);
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
46
56
|
if (typeof updateSelectedRadioButtonId === 'function') {
|
|
47
57
|
updateSelectedRadioButtonId(id);
|
|
48
58
|
}
|
|
49
59
|
setInternalIsChecked(true);
|
|
50
|
-
}, [id, isDisabled, updateSelectedRadioButtonId]);
|
|
60
|
+
}, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
51
61
|
const handleMouseEnter = useCallback(() => {
|
|
52
62
|
if (!isDisabled) {
|
|
53
63
|
setIsHovered(true);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","RadioButtonGroupContext","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","isChecked","label","onChange","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","isInitialRenderRef","current","handleClick","handleMouseEnter","handleMouseLeave","createElement","$isDisabled","onMouseEnter","onMouseLeave","onClick","$isChecked","$isHovered","$isSelected","disabled","type","checked","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 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\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n isChecked,\n label,\n onChange,\n id,\n isDisabled = false,\n}) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId } =\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 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\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","RadioButtonGroupContext","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","isChecked","label","onChange","id","isDisabled","canBeUnchecked","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","isInitialRenderRef","current","handleClick","undefined","prev","handleMouseEnter","handleMouseLeave","createElement","$isDisabled","onMouseEnter","onMouseLeave","onClick","$isChecked","$isHovered","$isSelected","disabled","type","checked","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 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,14 +1,17 @@
|
|
|
1
1
|
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
2
2
|
export const RadioButtonGroupContext = /*#__PURE__*/React.createContext({
|
|
3
3
|
selectedRadioButtonId: undefined,
|
|
4
|
-
updateSelectedRadioButtonId: undefined
|
|
4
|
+
updateSelectedRadioButtonId: undefined,
|
|
5
|
+
radioButtonsCanBeUnchecked: false
|
|
5
6
|
});
|
|
6
7
|
RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
|
|
7
8
|
const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
8
9
|
let {
|
|
9
|
-
children
|
|
10
|
+
children,
|
|
11
|
+
radioButtonsCanBeUnchecked
|
|
10
12
|
} = _ref;
|
|
11
13
|
const [selectedRadioButtonId, setSelectedRadioButtonId] = useState(undefined);
|
|
14
|
+
console.log('selectedRadioButtonId', selectedRadioButtonId);
|
|
12
15
|
const isInitialRenderRef = useRef(true);
|
|
13
16
|
const updateSelectedRadioButtonId = useCallback(id => {
|
|
14
17
|
setSelectedRadioButtonId(id);
|
|
@@ -23,8 +26,9 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
23
26
|
}, [selectedRadioButtonId]);
|
|
24
27
|
const providerValue = useMemo(() => ({
|
|
25
28
|
selectedRadioButtonId,
|
|
26
|
-
updateSelectedRadioButtonId
|
|
27
|
-
|
|
29
|
+
updateSelectedRadioButtonId,
|
|
30
|
+
radioButtonsCanBeUnchecked
|
|
31
|
+
}), [radioButtonsCanBeUnchecked, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
28
32
|
return /*#__PURE__*/React.createElement(RadioButtonGroupContext.Provider, {
|
|
29
33
|
value: providerValue
|
|
30
34
|
}, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","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) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\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};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\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","setSelectedRadioButtonId","console","log","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 radioButtonsCanBeUnchecked?: boolean;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, radioButtonsCanBeUnchecked }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n console.log('selectedRadioButtonId', selectedRadioButtonId);\n const isInitialRenderRef = useRef(true);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>((id) => {\n setSelectedRadioButtonId(id);\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 radioButtonsCanBeUnchecked,\n }),\n [radioButtonsCanBeUnchecked, 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;AAe/D,MAAMC,gBAAgB,gBAAGd,UAAU,CAC/B,CAAAe,IAAA,EAA2CC,GAAG,KAAK;EAAA,IAAlD;IAAEC,QAAQ;IAAEL;EAA2B,CAAC,GAAAG,IAAA;EACrC,MAAM,CAACN,qBAAqB,EAAES,wBAAwB,CAAC,GACnDZ,QAAQ,CAAoDI,SAAS,CAAC;EAC1ES,OAAO,CAACC,GAAG,CAAC,uBAAuB,EAAEX,qBAAqB,CAAC;EAC3D,MAAMY,kBAAkB,GAAGhB,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAMM,2BAA2B,GAAGV,WAAW,CAAgCqB,EAAE,IAAK;IAClFJ,wBAAwB,CAACI,EAAE,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAENnB,mBAAmB,CACfa,GAAG,EACH,OAAO;IACHL;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAEDT,SAAS,CAAC,MAAM;IACZ,IAAImB,kBAAkB,CAACE,OAAO,EAAE;MAC5BF,kBAAkB,CAACE,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,CAACd,qBAAqB,CAAC,CAAC;EAE3B,MAAMe,aAAa,GAAGpB,OAAO,CACzB,OAAO;IACHK,qBAAqB;IACrBE,2BAA2B;IAC3BC;EACJ,CAAC,CAAC,EACF,CAACA,0BAA0B,EAAEH,qBAAqB,EAAEE,2BAA2B,CACnF,CAAC;EAED,oBACIZ,KAAA,CAAA0B,aAAA,CAAClB,uBAAuB,CAACmB,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAClDP,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
type IUpdateSelectedRadioButtonId = (id: string) => void;
|
|
2
|
+
type IUpdateSelectedRadioButtonId = (id: string | undefined) => void;
|
|
3
3
|
interface IRadioButtonGroupContext {
|
|
4
4
|
selectedRadioButtonId: string | undefined;
|
|
5
5
|
updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;
|
|
6
|
+
radioButtonsCanBeUnchecked?: boolean;
|
|
6
7
|
}
|
|
7
8
|
export declare const RadioButtonGroupContext: React.Context<IRadioButtonGroupContext>;
|
|
8
9
|
export type RadioButtonGroupRef = {
|
|
@@ -14,6 +15,7 @@ export type RadioButtonGroupProps = {
|
|
|
14
15
|
* automatically unchecked when an `RadioButton` of the group is checked.
|
|
15
16
|
*/
|
|
16
17
|
children: ReactNode;
|
|
18
|
+
radioButtonsCanBeUnchecked?: boolean;
|
|
17
19
|
};
|
|
18
20
|
declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<RadioButtonGroupRef>>;
|
|
19
21
|
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.706",
|
|
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": "ef2916a57342cd4ca602ef0545fea2a4f5298f81"
|
|
89
89
|
}
|