@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.06 kB
Source Map (JSON)
{"version":3,"file":"RadioGroup.cjs","names":["genericFactory","useProps","Input","InputsGroupFieldset"],"sources":["../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport { DataAttributes, Factory, genericFactory, MantineSize, useProps } from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface RadioGroupContextValue<Value extends string = string> {\n size: MantineSize | undefined;\n value: Value | null;\n onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n name: string;\n disabled: boolean | undefined;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport type RadioGroupStylesNames = InputWrapperStylesNames;\n\nexport interface RadioGroupProps<Value extends string = string> extends Omit<\n InputWrapperProps,\n 'onChange' | 'value' | 'defaultValue'\n> {\n /** `Radio` components and any other elements */\n children: React.ReactNode;\n\n /** Controlled component value */\n value?: Value | null;\n\n /** Uncontrolled component default value */\n defaultValue?: Value | null;\n\n /** Called when value changes */\n onChange?: (value: Value) => void;\n\n /** Props passed down to the `Input.Wrapper` */\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /** Controls size of the `Input.Wrapper` @default 'sm' */\n size?: MantineSize;\n\n /** `name` attribute of child radio inputs. By default, `name` is generated randomly. */\n name?: string;\n\n /** If set, value cannot be changed */\n readOnly?: boolean;\n\n /** Sets `disabled` attribute, prevents interactions */\n disabled?: boolean;\n}\n\nexport type RadioGroupFactory = Factory<{\n props: RadioGroupProps;\n ref: HTMLDivElement;\n stylesNames: RadioGroupStylesNames;\n signature: <Value extends string = string>(props: RadioGroupProps<Value>) => React.JSX.Element;\n}>;\n\nexport const RadioGroup = genericFactory<RadioGroupFactory>(((props: RadioGroupProps<string>) => {\n const {\n value,\n defaultValue,\n onChange,\n size,\n wrapperProps,\n children,\n name,\n readOnly,\n disabled,\n ...others\n } = useProps('RadioGroup', null, props);\n\n const _name = useId(name);\n\n const [_value, setValue] = useUncontrolled<string | null>({\n value,\n defaultValue,\n finalValue: '',\n onChange: onChange as any,\n });\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) =>\n !readOnly && setValue(typeof event === 'string' ? event : event.currentTarget.value);\n\n return (\n <RadioGroupContext\n value={{ value: _value, onChange: handleChange, size, name: _name, disabled }}\n >\n <Input.Wrapper\n size={size}\n {...wrapperProps}\n {...others}\n labelElement=\"div\"\n __staticSelector=\"RadioGroup\"\n >\n <InputsGroupFieldset role=\"radiogroup\">{children}</InputsGroupFieldset>\n </Input.Wrapper>\n </RadioGroupContext>\n );\n}) as any);\n\nRadioGroup.classes = Input.Wrapper.classes;\nRadioGroup.displayName = '@mantine/core/RadioGroup';\n"],"mappings":";;;;;;;;;;AAcA,MAAa,qBAAA,GAAA,MAAA,eAAiE,KAAK;AA2CnF,MAAa,aAAaA,gBAAAA,iBAAoC,UAAmC;CAC/F,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,MACA,UACA,UACA,GAAG,WACDC,kBAAAA,SAAS,cAAc,MAAM,MAAM;CAEvC,MAAM,SAAA,GAAA,eAAA,OAAc,KAAK;CAEzB,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA2C;EACxD;EACA;EACA,YAAY;EACF;EACX,CAAC;CAEF,MAAM,gBAAgB,UACpB,CAAC,YAAY,SAAS,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc,MAAM;AAEtF,QACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD;EACE,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM,MAAM;GAAO;GAAU;YAE7E,iBAAA,GAAA,kBAAA,KAACC,cAAAA,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aAEjB,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,qBAAD;IAAqB,MAAK;IAAc;IAA+B,CAAA;GACzD,CAAA;EACE,CAAA;GAEd;AAEV,WAAW,UAAUD,cAAAA,MAAM,QAAQ;AACnC,WAAW,cAAc"}