@chayns-components/core 5.0.0-beta.705 → 5.0.0-beta.707

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.
Files changed (15) hide show
  1. package/lib/cjs/components/number-input/NumberInput.js +3 -3
  2. package/lib/cjs/components/number-input/NumberInput.js.map +1 -1
  3. package/lib/cjs/components/radio-button/RadioButton.js +13 -3
  4. package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
  5. package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js +7 -4
  6. package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
  7. package/lib/esm/components/number-input/NumberInput.js +3 -3
  8. package/lib/esm/components/number-input/NumberInput.js.map +1 -1
  9. package/lib/esm/components/radio-button/RadioButton.js +13 -3
  10. package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
  11. package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js +7 -4
  12. package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
  13. package/lib/types/components/radio-button/RadioButton.d.ts +1 -0
  14. package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts +3 -1
  15. package/package.json +2 -2
package/lib/cjs/components/number-input/NumberInput.js CHANGED
@@ -82,7 +82,7 @@ const NumberInput = ({
82
82
  isMoneyInput,
83
83
  isTimeInput
84
84
  });
85
- setFormattedValue(newStringValue);
85
+ setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);
86
86
  setPlainText(newStringValue.replaceAll('.', ''));
87
87
  setHasFocus(false);
88
88
  if (typeof onChange === 'function') {
@@ -123,11 +123,11 @@ const NumberInput = ({
123
123
  setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);
124
124
  }
125
125
  }
126
- setFormattedValue(plainText.length === 0 ? '' : (0, _numberInput2.formateNumber)({
126
+ setFormattedValue(plainText.length === 0 ? '' : `${(0, _numberInput2.formateNumber)({
127
127
  number: isTimeInput ? plainText : parsedNumber,
128
128
  isMoneyInput,
129
129
  isTimeInput
130
- }));
130
+ })}${isMoneyInput ? ' €' : ''}`);
131
131
  }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);
132
132
  (0, _react.useEffect)(() => {
133
133
  if (typeof value === 'string') {
package/lib/cjs/components/number-input/NumberInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName","_default","exports"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /**\n * Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n */\n isDecimalInput?: boolean;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n /**\n * Whether the value is invalid.\n */\n isInvalid?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n */\n isMoneyInput?: boolean;\n /**\n * Whether the value should be formatted as a time.\n */\n isTimeInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * Limits the number to this value\n */\n minNumber?: number;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n /**\n * Callback function that is called when the input changes\n * It will pass the text from the input\n */\n onChange?: (newValue: string) => void;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) ||\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(newStringValue);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n }),\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName","_default","exports"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /**\n * Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n */\n isDecimalInput?: boolean;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n /**\n * Whether the value is invalid.\n */\n isInvalid?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n */\n isMoneyInput?: boolean;\n /**\n * Whether the value should be formatted as a time.\n */\n isTimeInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * Limits the number to this value\n */\n minNumber?: number;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n /**\n * Callback function that is called when the input changes\n * It will pass the text from the input\n */\n onChange?: (newValue: string) => void;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) ||\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : `${formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n })}${isMoneyInput ? ' €' : ''}`,\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
package/lib/cjs/components/radio-button/RadioButton.js CHANGED
@@ -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);
package/lib/cjs/components/radio-button/RadioButton.js.map CHANGED
@@ -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":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAWA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AAQ8B,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AA6B9B,MAAMW,WAAiC,GAAGA,CAAC;EACvCC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,EAAE;EACFC,UAAU,GAAG;AACjB,CAAC,KAAK;EACF,MAAM;IAAEC,qBAAqB;IAAEC;EAA4B,CAAC,GACxD,IAAAC,iBAAU,EAACC,yCAAuB,CAAC;EAEvC,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACjE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAEjD,MAAMG,SAAS,GAAG,OAAOR,2BAA2B,KAAK,UAAU;EAEnE,MAAMS,QAAQ,GAAGD,SAAS,GAAGT,qBAAqB,KAAKF,EAAE,GAAGM,iBAAiB;EAE7E,MAAMO,kBAAkB,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAEvC,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOlB,SAAS,KAAK,SAAS,IAAIA,SAAS,EAAE;MAC7C,IAAI,OAAOM,2BAA2B,KAAK,UAAU,EAAE;QACnDA,2BAA2B,CAACH,EAAE,CAAC;MACnC,CAAC,MAAM;QACHO,oBAAoB,CAACV,SAAS,CAAC;MACnC;IACJ;EACJ,CAAC,EAAE,CAACG,EAAE,EAAEH,SAAS,EAAEM,2BAA2B,CAAC,CAAC;EAEhD,IAAAY,gBAAS,EAAC,MAAM;IACZ,IAAIF,kBAAkB,CAACG,OAAO,EAAE;MAC5BH,kBAAkB,CAACG,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAI,OAAOjB,QAAQ,KAAK,UAAU,EAAE;MACvCA,QAAQ,CAAC;QAAEF,SAAS,EAAEe,QAAQ;QAAEZ;MAAG,CAAC,CAAC;IACzC;EACJ,CAAC,EAAE,CAACA,EAAE,EAAEY,QAAQ,EAAEb,QAAQ,CAAC,CAAC;EAE5B,MAAMkB,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClC,IAAIjB,UAAU,EAAE;MACZ;IACJ;IAEA,IAAI,OAAOE,2BAA2B,KAAK,UAAU,EAAE;MACnDA,2BAA2B,CAACH,EAAE,CAAC;IACnC;IAEAO,oBAAoB,CAAC,IAAI,CAAC;EAC9B,CAAC,EAAE,CAACP,EAAE,EAAEC,UAAU,EAAEE,2BAA2B,CAAC,CAAC;EAEjD,MAAMgB,gBAAgB,GAAG,IAAAD,kBAAW,EAAC,MAAM;IACvC,IAAI,CAACjB,UAAU,EAAE;MACbS,YAAY,CAAC,IAAI,CAAC;IACtB;EACJ,CAAC,EAAE,CAACT,UAAU,CAAC,CAAC;EAEhB,MAAMmB,gBAAgB,GAAGA,CAAA,KAAM;IAC3BV,YAAY,CAAC,KAAK,CAAC;EACvB,CAAC;EAED,OAAO,IAAAW,cAAO,EACV,mBACIlD,MAAA,CAAAU,OAAA,CAAAyC,aAAA,CAAChD,YAAA,CAAAiD,iBAAiB;IACdC,WAAW,EAAEvB,UAAW;IACxBwB,YAAY,EAAEN,gBAAiB;IAC/BO,YAAY,EAAEN;EAAiB,gBAE/BjD,MAAA,CAAAU,OAAA,CAAAyC,aAAA,CAAChD,YAAA,CAAAqD,wBAAwB;IAACH,WAAW,EAAEvB,UAAW;IAAC2B,OAAO,EAAEX;EAAY,gBACpE9C,MAAA,CAAAU,OAAA,CAAAyC,aAAA,CAAChD,YAAA,CAAAuD,+BAA+B;IAACL,WAAW,EAAEvB,UAAW;IAAC6B,UAAU,EAAElB;EAAS,gBAC3EzC,MAAA,CAAAU,OAAA,CAAAyC,aAAA,CAAChD,YAAA,CAAAyD,6BAA6B;IAC1BC,UAAU,EAAEvB,SAAU;IACtBwB,WAAW,EAAErB,QAAS;IACtBY,WAAW,EAAEvB;EAAW,CAC3B,CAC4B,CAAC,eAClC9B,MAAA,CAAAU,OAAA,CAAAyC,aAAA,CAAChD,YAAA,CAAA4D,yBAAyB;IACtBC,QAAQ,EAAElC,UAAW;IACrBuB,WAAW,EAAEvB,UAAW;IACxBmC,IAAI,EAAC,OAAO;IACZC,OAAO,EAAEzB,QAAS;IAClBb,QAAQ,EAAEA,CAAA,KAAM,CAAC;EAAE,CACtB,CAAC,EACDD,KAAK,iBAAI3B,MAAA,CAAAU,OAAA,CAAAyC,aAAA,CAAChD,YAAA,CAAAgE,sBAAsB,QAAExC,KAA8B,CAC3C,CAAC,EAC1BF,QAAQ,iBACLzB,MAAA,CAAAU,OAAA,CAAAyC,aAAA,CAACrD,aAAA,CAAAsE,eAAe;IAACC,OAAO,EAAE;EAAM,gBAC5BrE,MAAA,CAAAU,OAAA,CAAAyC,aAAA,CAAChD,YAAA,CAAAmE,+BAA+B;IAC5BC,OAAO,EACH9B,QAAQ,GACF;MAAE+B,OAAO,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAO,CAAC,GAC9B;MAAED,OAAO,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CACjC;IACDC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BlD,QAC4B,CACpB,CAEN,CACtB,EACD,CAACA,QAAQ,EAAEqB,WAAW,EAAEE,gBAAgB,EAAElB,UAAU,EAAEQ,SAAS,EAAEG,QAAQ,EAAEd,KAAK,CACpF,CAAC;AACL,CAAC;AAEDH,WAAW,CAACoD,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApE,OAAA,GAEzBc,WAAW","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":[]}
package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js CHANGED
@@ -9,11 +9,13 @@ 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);
19
21
  const isInitialRenderRef = (0, _react.useRef)(true);
@@ -30,8 +32,9 @@ const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
30
32
  }, [selectedRadioButtonId]);
31
33
  const providerValue = (0, _react.useMemo)(() => ({
32
34
  selectedRadioButtonId,
33
- updateSelectedRadioButtonId
34
- }), [selectedRadioButtonId, updateSelectedRadioButtonId]);
35
+ updateSelectedRadioButtonId,
36
+ radioButtonsCanBeUnchecked
37
+ }), [radioButtonsCanBeUnchecked, selectedRadioButtonId, updateSelectedRadioButtonId]);
35
38
  return /*#__PURE__*/_react.default.createElement(RadioButtonGroupContext.Provider, {
36
39
  value: providerValue
37
40
  }, children);
package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map CHANGED
@@ -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\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 }),\n [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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AASe,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASR,MAAMW,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,gBAAGE,cAAK,CAACC,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED;AACjC,CAAC,CAAC;AAEFL,uBAAuB,CAACO,WAAW,GAAG,yBAAyB;AAc/D,MAAMC,gBAAgB,gBAAG,IAAAC,iBAAU,EAC/B,CAAC;EAAEC;AAAS,CAAC,EAAEC,GAAG,KAAK;EACnB,MAAM,CAACP,qBAAqB,EAAEQ,wBAAwB,CAAC,GACnD,IAAAC,eAAQ,EAAoDR,SAAS,CAAC;EAE1E,MAAMS,kBAAkB,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAEvC,MAAMT,2BAA2B,GAAG,IAAAU,kBAAW,EAAgCC,EAAE,IAAK;IAClFL,wBAAwB,CAACK,EAAE,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,0BAAmB,EACfP,GAAG,EACH,OAAO;IACHL;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAED,IAAAa,gBAAS,EAAC,MAAM;IACZ,IAAIL,kBAAkB,CAACM,OAAO,EAAE;MAC5BN,kBAAkB,CAACM,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,CAAChB,qBAAqB,CAAC,CAAC;EAE3B,MAAMiB,aAAa,GAAG,IAAAC,cAAO,EACzB,OAAO;IACHlB,qBAAqB;IACrBE;EACJ,CAAC,CAAC,EACF,CAACF,qBAAqB,EAAEE,2BAA2B,CACvD,CAAC;EAED,oBACI7B,MAAA,CAAAS,OAAA,CAAAqC,aAAA,CAACvB,uBAAuB,CAACwB,QAAQ;IAACC,KAAK,EAAEJ;EAAc,GAClDX,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDF,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAAC,IAAAmB,QAAA,GAAAzB,OAAA,CAAAf,OAAA,GAEnCsB,gBAAgB","ignoreList":[]}
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","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\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":[]}
package/lib/esm/components/number-input/NumberInput.js CHANGED
@@ -74,7 +74,7 @@ const NumberInput = _ref => {
74
74
  isMoneyInput,
75
75
  isTimeInput
76
76
  });
77
- setFormattedValue(newStringValue);
77
+ setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);
78
78
  setPlainText(newStringValue.replaceAll('.', ''));
79
79
  setHasFocus(false);
80
80
  if (typeof onChange === 'function') {
@@ -115,11 +115,11 @@ const NumberInput = _ref => {
115
115
  setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);
116
116
  }
117
117
  }
118
- setFormattedValue(plainText.length === 0 ? '' : formateNumber({
118
+ setFormattedValue(plainText.length === 0 ? '' : `${formateNumber({
119
119
  number: isTimeInput ? plainText : parsedNumber,
120
120
  isMoneyInput,
121
121
  isTimeInput
122
- }));
122
+ })}${isMoneyInput ? ' €' : ''}`);
123
123
  }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);
124
124
  useEffect(() => {
125
125
  if (typeof value === 'string') {
package/lib/esm/components/number-input/NumberInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /**\n * Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n */\n isDecimalInput?: boolean;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n /**\n * Whether the value is invalid.\n */\n isInvalid?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n */\n isMoneyInput?: boolean;\n /**\n * Whether the value should be formatted as a time.\n */\n isTimeInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * Limits the number to this value\n */\n minNumber?: number;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n /**\n * Callback function that is called when the input changes\n * It will pass the text from the input\n */\n onChange?: (newValue: string) => void;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) ||\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(newStringValue);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n }),\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /**\n * Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n */\n isDecimalInput?: boolean;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n /**\n * Whether the value is invalid.\n */\n isInvalid?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n */\n isMoneyInput?: boolean;\n /**\n * Whether the value should be formatted as a time.\n */\n isTimeInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * Limits the number to this value\n */\n minNumber?: number;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n /**\n * Callback function that is called when the input changes\n * It will pass the text from the input\n */\n onChange?: (newValue: string) => void;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) ||\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);\n\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : `${formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n })}${isMoneyInput ? ' €' : ''}`,\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/radio-button/RadioButton.js CHANGED
@@ -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);
package/lib/esm/components/radio-button/RadioButton.js.map CHANGED
@@ -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\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":["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":[]}
package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js CHANGED
@@ -1,12 +1,14 @@
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);
12
14
  const isInitialRenderRef = useRef(true);
@@ -23,8 +25,9 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
23
25
  }, [selectedRadioButtonId]);
24
26
  const providerValue = useMemo(() => ({
25
27
  selectedRadioButtonId,
26
- updateSelectedRadioButtonId
27
- }), [selectedRadioButtonId, updateSelectedRadioButtonId]);
28
+ updateSelectedRadioButtonId,
29
+ radioButtonsCanBeUnchecked
30
+ }), [radioButtonsCanBeUnchecked, selectedRadioButtonId, updateSelectedRadioButtonId]);
28
31
  return /*#__PURE__*/React.createElement(RadioButtonGroupContext.Provider, {
29
32
  value: providerValue
30
33
  }, children);
package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map CHANGED
@@ -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\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 }),\n [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;AASd,OAAO,MAAMC,uBAAuB,gBAAGR,KAAK,CAACS,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED;AACjC,CAAC,CAAC;AAEFH,uBAAuB,CAACK,WAAW,GAAG,yBAAyB;AAc/D,MAAMC,gBAAgB,gBAAGb,UAAU,CAC/B,CAAAc,IAAA,EAAeC,GAAG,KAAK;EAAA,IAAtB;IAAEC;EAAS,CAAC,GAAAF,IAAA;EACT,MAAM,CAACL,qBAAqB,EAAEQ,wBAAwB,CAAC,GACnDX,QAAQ,CAAoDI,SAAS,CAAC;EAE1E,MAAMQ,kBAAkB,GAAGb,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAMM,2BAA2B,GAAGV,WAAW,CAAgCkB,EAAE,IAAK;IAClFF,wBAAwB,CAACE,EAAE,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAENhB,mBAAmB,CACfY,GAAG,EACH,OAAO;IACHJ;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAEDT,SAAS,CAAC,MAAM;IACZ,IAAIgB,kBAAkB,CAACE,OAAO,EAAE;MAC5BF,kBAAkB,CAACE,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,CAACX,qBAAqB,CAAC,CAAC;EAE3B,MAAMY,aAAa,GAAGjB,OAAO,CACzB,OAAO;IACHK,qBAAqB;IACrBE;EACJ,CAAC,CAAC,EACF,CAACF,qBAAqB,EAAEE,2BAA2B,CACvD,CAAC;EAED,oBACIZ,KAAA,CAAAuB,aAAA,CAACf,uBAAuB,CAACgB,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAClDL,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}
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 radioButtonsCanBeUnchecked?: boolean;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, radioButtonsCanBeUnchecked }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\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;EAE1E,MAAMS,kBAAkB,GAAGd,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAMM,2BAA2B,GAAGV,WAAW,CAAgCmB,EAAE,IAAK;IAClFF,wBAAwB,CAACE,EAAE,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAENjB,mBAAmB,CACfa,GAAG,EACH,OAAO;IACHL;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAEDT,SAAS,CAAC,MAAM;IACZ,IAAIiB,kBAAkB,CAACE,OAAO,EAAE;MAC5BF,kBAAkB,CAACE,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,CAACZ,qBAAqB,CAAC,CAAC;EAE3B,MAAMa,aAAa,GAAGlB,OAAO,CACzB,OAAO;IACHK,qBAAqB;IACrBE,2BAA2B;IAC3BC;EACJ,CAAC,CAAC,EACF,CAACA,0BAA0B,EAAEH,qBAAqB,EAAEE,2BAA2B,CACnF,CAAC;EAED,oBACIZ,KAAA,CAAAwB,aAAA,CAAChB,uBAAuB,CAACiB,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAClDL,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}
package/lib/types/components/radio-button/RadioButton.d.ts CHANGED
@@ -25,6 +25,7 @@ export type RadioButtonProps = {
25
25
  * Function to be executed when a button is checked.
26
26
  */
27
27
  onChange?: (item: RadioButtonItem) => void;
28
+ canBeUnchecked?: boolean;
28
29
  };
29
30
  declare const RadioButton: FC<RadioButtonProps>;
30
31
  export default RadioButton;
package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts CHANGED
@@ -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.705",
3
+ "version": "5.0.0-beta.707",
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": "84bd689dd66815820ab9b2b7c25a4f9411afa685"
88
+ "gitHead": "3a51b9aff2dc04f0068dceb90bdc286d6ae0db9a"
89
89
  }