@fluentui/react-radio 9.6.0 → 9.6.2
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/CHANGELOG.md +25 -2
- package/dist/index.d.ts +1 -1
- package/lib/components/Radio/Radio.types.js +1 -1
- package/lib/components/Radio/Radio.types.js.map +1 -1
- package/lib/components/Radio/useRadio.js +0 -1
- package/lib/components/Radio/useRadio.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.types.js +1 -1
- package/lib/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroup.js +0 -1
- package/lib/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.types.js +0 -2
- package/lib-commonjs/components/Radio/Radio.types.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadio.js +0 -2
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.js +0 -2
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js +0 -2
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.raw.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 23 Apr 2026 11:59:30 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.6.2)
|
|
8
|
+
|
|
9
|
+
Thu, 23 Apr 2026 11:59:30 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.6.1..@fluentui/react-radio_v9.6.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v9.4.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.6.1)
|
|
21
|
+
|
|
22
|
+
Wed, 01 Apr 2026 15:52:43 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.6.0..@fluentui/react-radio_v9.6.1)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
|
|
28
|
+
- Bump @fluentui/react-label to v9.4.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
|
|
29
|
+
|
|
7
30
|
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.6.0)
|
|
8
31
|
|
|
9
|
-
Mon, 30 Mar 2026 14:
|
|
32
|
+
Mon, 30 Mar 2026 14:37:41 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.5.16..@fluentui/react-radio_v9.6.0)
|
|
11
34
|
|
|
12
35
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
|
|
|
2
2
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
3
3
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
4
4
|
import type { JSXElement } from '@fluentui/react-utilities';
|
|
5
|
-
import { Label } from '@fluentui/react-label';
|
|
5
|
+
import type { Label } from '@fluentui/react-label';
|
|
6
6
|
import * as React_2 from 'react';
|
|
7
7
|
import type { Slot } from '@fluentui/react-utilities';
|
|
8
8
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Radio/Radio.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n /**\n * The root element of the Radio.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Radio's label.\n */\n label: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the radio's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * A circle outline, with a filled circle icon inside when the Radio is checked.\n */\n indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {\n /**\n * The value of the RadioGroup when this Radio item is selected.\n */\n value?: string;\n\n /**\n * The position of the label relative to the radio indicator.\n *\n * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n * in which case it defaults to `below`.\n *\n * @defaultvalue after\n */\n labelPosition?: 'after' | 'below';\n\n /**\n * Disable this Radio item.\n */\n disabled?: boolean;\n\n /**\n * Callback when this Radio is selected in its group.\n *\n * **Note:** `onChange` is NOT called when this Radio is deselected.\n * Use RadioGroup's `onChange` event to determine when the selection in the group changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;\n};\n\nexport type RadioBaseProps = RadioProps;\n\n/**\n * Data for the onChange event for Radio.\n */\nexport type RadioOnChangeData = {\n /**\n * The value prop of this Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n\nexport type RadioBaseState = RadioState;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/Radio/Radio.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n /**\n * The root element of the Radio.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Radio's label.\n */\n label: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the radio's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * A circle outline, with a filled circle icon inside when the Radio is checked.\n */\n indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {\n /**\n * The value of the RadioGroup when this Radio item is selected.\n */\n value?: string;\n\n /**\n * The position of the label relative to the radio indicator.\n *\n * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n * in which case it defaults to `below`.\n *\n * @defaultvalue after\n */\n labelPosition?: 'after' | 'below';\n\n /**\n * Disable this Radio item.\n */\n disabled?: boolean;\n\n /**\n * Callback when this Radio is selected in its group.\n *\n * **Note:** `onChange` is NOT called when this Radio is deselected.\n * Use RadioGroup's `onChange` event to determine when the selection in the group changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;\n};\n\nexport type RadioBaseProps = RadioProps;\n\n/**\n * Data for the onChange event for Radio.\n */\nexport type RadioOnChangeData = {\n /**\n * The value prop of this Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n\nexport type RadioBaseState = RadioState;\n"],"names":[],"mappings":"AAmFA,WAAwC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from 'react';
|
|
3
2
|
import { Label } from '@fluentui/react-label';
|
|
4
3
|
import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
|
|
5
4
|
import { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Radio/useRadio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RadioBaseProps, RadioBaseState, RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const state = useRadioBase_unstable(props, ref);\n\n return {\n ...state,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components: { ...state.components, label: Label },\n label: slot.optional(props.label, {\n defaultProps: { ...state.label },\n elementType: Label,\n }),\n };\n};\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadioBase_unstable = (props: RadioBaseProps, ref: React.Ref<HTMLInputElement>): RadioBaseState => {\n const group = useRadioGroupContextValue_unstable();\n\n const {\n name = group.name,\n checked = group.value !== undefined ? group.value === props.value : undefined,\n defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after',\n disabled = group.disabled,\n required = group.required,\n 'aria-describedby': ariaDescribedBy = group['aria-describedby'],\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n });\n const input = slot.always(props.input, {\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n required,\n 'aria-describedby': ariaDescribedBy,\n ...nativeProps.primary,\n },\n elementType: 'input',\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n const label = slot.optional(props.label, {\n defaultProps: { htmlFor: input.id, disabled: input.disabled },\n elementType: 'label',\n });\n const indicator = slot.always(props.indicator, {\n defaultProps: { 'aria-hidden': true },\n elementType: 'div',\n });\n return {\n labelPosition,\n components: { root: 'span', input: 'input', label: 'label', indicator: 'div' },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Radio/useRadio.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RadioBaseProps, RadioBaseState, RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const state = useRadioBase_unstable(props, ref);\n\n return {\n ...state,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components: { ...state.components, label: Label },\n label: slot.optional(props.label, {\n defaultProps: { ...state.label },\n elementType: Label,\n }),\n };\n};\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadioBase_unstable = (props: RadioBaseProps, ref: React.Ref<HTMLInputElement>): RadioBaseState => {\n const group = useRadioGroupContextValue_unstable();\n\n const {\n name = group.name,\n checked = group.value !== undefined ? group.value === props.value : undefined,\n defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after',\n disabled = group.disabled,\n required = group.required,\n 'aria-describedby': ariaDescribedBy = group['aria-describedby'],\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n });\n const input = slot.always(props.input, {\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n required,\n 'aria-describedby': ariaDescribedBy,\n ...nativeProps.primary,\n },\n elementType: 'input',\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n const label = slot.optional(props.label, {\n defaultProps: { htmlFor: input.id, disabled: input.disabled },\n elementType: 'label',\n });\n const indicator = slot.always(props.indicator, {\n defaultProps: { 'aria-hidden': true },\n elementType: 'div',\n });\n return {\n labelPosition,\n components: { root: 'span', input: 'input', label: 'label', indicator: 'div' },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"names":["Label","getPartitionedNativeProps","mergeCallbacks","useId","slot","useRadioGroupContextValue_unstable","useFocusWithin","useRadio_unstable","props","ref","state","useRadioBase_unstable","components","label","optional","defaultProps","elementType","group","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","primarySlotTagName","excludedPropNames","root","always","input","type","id","primary","ev","currentTarget","htmlFor","indicator"],"mappings":"AAAA;AAGA,SAASA,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACnG,SAASC,kCAAkC,QAAQ,mCAAmC;AACtF,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAMC,QAAQC,sBAAsBH,OAAOC;IAE3C,OAAO;QACL,GAAGC,KAAK;QACR,4DAA4D;QAC5DE,YAAY;YAAE,GAAGF,MAAME,UAAU;YAAEC,OAAOb;QAAM;QAChDa,OAAOT,KAAKU,QAAQ,CAACN,MAAMK,KAAK,EAAE;YAChCE,cAAc;gBAAE,GAAGL,MAAMG,KAAK;YAAC;YAC/BG,aAAahB;QACf;IACF;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMW,wBAAwB,CAACH,OAAuBC;IAC3D,MAAMQ,QAAQZ;IAEd,MAAM,EACJa,OAAOD,MAAMC,IAAI,EACjBC,UAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKZ,MAAMY,KAAK,GAAGC,SAAS,EAC7EC,iBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKf,MAAMY,KAAK,GAAGC,SAAS,EAClGG,gBAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,EACzEC,WAAWT,MAAMS,QAAQ,EACzBC,WAAWV,MAAMU,QAAQ,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,EAC/DY,QAAQ,EACT,GAAGrB;IAEJ,MAAMsB,cAAc7B,0BAA0B;QAC5CO;QACAuB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,OAAO7B,KAAK8B,MAAM,CAAC1B,MAAMyB,IAAI,EAAE;QACnClB,cAAc;YACZN,KAAKH;YACL,GAAGwB,YAAYG,IAAI;QACrB;QACAjB,aAAa;IACf;IACA,MAAMmB,QAAQ/B,KAAK8B,MAAM,CAAC1B,MAAM2B,KAAK,EAAE;QACrCpB,cAAc;YACZN;YACA2B,MAAM;YACNC,IAAIlC,MAAM,UAAU2B,YAAYQ,OAAO,CAACD,EAAE;YAC1CnB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYQ,OAAO;QACxB;QACAtB,aAAa;IACf;IACAmB,MAAMN,QAAQ,GAAG3B,eAAeiC,MAAMN,QAAQ,EAAEU,CAAAA,KAAMV,qBAAAA,+BAAAA,SAAWU,IAAI;YAAEnB,OAAOmB,GAAGC,aAAa,CAACpB,KAAK;QAAC;IACrG,MAAMP,QAAQT,KAAKU,QAAQ,CAACN,MAAMK,KAAK,EAAE;QACvCE,cAAc;YAAE0B,SAASN,MAAME,EAAE;YAAEX,UAAUS,MAAMT,QAAQ;QAAC;QAC5DV,aAAa;IACf;IACA,MAAM0B,YAAYtC,KAAK8B,MAAM,CAAC1B,MAAMkC,SAAS,EAAE;QAC7C3B,cAAc;YAAE,eAAe;QAAK;QACpCC,aAAa;IACf;IACA,OAAO;QACLQ;QACAZ,YAAY;YAAEqB,MAAM;YAAQE,OAAO;YAAStB,OAAO;YAAS6B,WAAW;QAAM;QAC7ET;QACAE;QACAtB;QACA6B;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAC5E,SAASC,0BAA0B,QAAQ,4CAA4C;AACvF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAC5C,MAAME,gBAAgBP,2BAA2BM;IAEjDP,6BAA6BO;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOT,0BAA0BS,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAC5E,SAASC,0BAA0B,QAAQ,4CAA4C;AACvF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAC5C,MAAME,gBAAgBP,2BAA2BM;IAEjDP,6BAA6BO;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOT,0BAA0BS,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/RadioGroup.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioGroupSlots = {\n /**\n * The radio group root.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n /**\n * The name of this radio group. This name is applied to all Radio items inside this group.\n *\n * If no name is provided, one will be generated so that all of the Radio items have the same name.\n */\n name?: string;\n\n /**\n * The selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n value?: string;\n\n /**\n * The default selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n defaultValue?: string;\n\n /**\n * Callback when the selected Radio item changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n /**\n * How the radio items are laid out in the group.\n *\n * @default vertical\n */\n layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n\n /**\n * Require a selection in this group. Adds the `required` prop to all child Radio items.\n */\n required?: boolean;\n};\n\nexport type RadioGroupBaseProps = Omit<RadioGroupProps, 'layout'>;\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n /**\n * The value of the newly selected Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n Required<Pick<RadioGroupProps, 'layout'>> &\n Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;\n\nexport type RadioGroupBaseState = Omit<RadioGroupState, 'layout'>;\n\nexport type RadioGroupContextValue = Pick<\n RadioGroupProps,\n 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required' | 'aria-describedby'\n>;\n\nexport type RadioGroupContextValues = {\n radioGroup: RadioGroupContextValue;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/RadioGroup.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioGroupSlots = {\n /**\n * The radio group root.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n /**\n * The name of this radio group. This name is applied to all Radio items inside this group.\n *\n * If no name is provided, one will be generated so that all of the Radio items have the same name.\n */\n name?: string;\n\n /**\n * The selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n value?: string;\n\n /**\n * The default selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n defaultValue?: string;\n\n /**\n * Callback when the selected Radio item changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n /**\n * How the radio items are laid out in the group.\n *\n * @default vertical\n */\n layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n\n /**\n * Require a selection in this group. Adds the `required` prop to all child Radio items.\n */\n required?: boolean;\n};\n\nexport type RadioGroupBaseProps = Omit<RadioGroupProps, 'layout'>;\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n /**\n * The value of the newly selected Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n Required<Pick<RadioGroupProps, 'layout'>> &\n Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;\n\nexport type RadioGroupBaseState = Omit<RadioGroupState, 'layout'>;\n\nexport type RadioGroupContextValue = Pick<\n RadioGroupProps,\n 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required' | 'aria-describedby'\n>;\n\nexport type RadioGroupContextValues = {\n radioGroup: RadioGroupContextValue;\n};\n"],"names":[],"mappings":"AAkFA,WAEE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/renderRadioGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { RadioGroupContextValues, RadioGroupSlots, RadioGroupBaseState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (\n state: RadioGroupBaseState,\n contextValues: RadioGroupContextValues,\n): JSXElement => {\n assertSlots<RadioGroupSlots>(state);\n\n return (\n <RadioGroupContext.Provider value={contextValues.radioGroup}>\n <state.root />\n </RadioGroupContext.Provider>\n );\n};\n"],"names":["assertSlots","RadioGroupContext","renderRadioGroup_unstable","state","contextValues","Provider","value","radioGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,iBAAiB,QAAQ,mCAAmC;AAGrE;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEAJ,YAA6BG;IAE7B,qBACE,KAACF,kBAAkBI,QAAQ;QAACC,OAAOF,cAAcG,UAAU;kBACzD,cAAA,KAACJ,MAAMK,IAAI;;AAGjB,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/renderRadioGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport type { RadioGroupContextValues, RadioGroupSlots, RadioGroupBaseState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (\n state: RadioGroupBaseState,\n contextValues: RadioGroupContextValues,\n): JSXElement => {\n assertSlots<RadioGroupSlots>(state);\n\n return (\n <RadioGroupContext.Provider value={contextValues.radioGroup}>\n <state.root />\n </RadioGroupContext.Provider>\n );\n};\n"],"names":["assertSlots","RadioGroupContext","renderRadioGroup_unstable","state","contextValues","Provider","value","radioGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,iBAAiB,QAAQ,mCAAmC;AAGrE;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEAJ,YAA6BG;IAE7B,qBACE,KAACF,kBAAkBI,QAAQ;QAACC,OAAOF,cAAcG,UAAU;kBACzD,cAAA,KAACJ,MAAMK,IAAI;;AAGjB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { RadioGroupBaseProps, RadioGroupBaseState, RadioGroupProps, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */\nexport const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>): RadioGroupState => {\n const { layout = 'vertical', ...baseProps } = props;\n const state = useRadioGroupBase_unstable(baseProps, ref);\n\n return {\n layout,\n ...state,\n };\n};\n\n/**\n * Create the base state required to render RadioGroup, without design-related properties such as `layout`.\n */\nexport const useRadioGroupBase_unstable = (\n props: RadioGroupBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): RadioGroupBaseState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props);\n\n const generatedName = useId('radiogroup-');\n\n const { name = generatedName, value, defaultValue, disabled, onChange, required } = props;\n\n return {\n name,\n value,\n defaultValue,\n disabled,\n required,\n components: {\n root: 'div',\n },\n root: {\n ref,\n role: 'radiogroup',\n ...slot.always(getIntrinsicElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']), {\n elementType: 'div',\n }),\n onChange: useEventCallback(ev => {\n if (\n onChange &&\n isHTMLElement(ev.target, { constructorName: 'HTMLInputElement' }) &&\n ev.target.type === 'radio'\n ) {\n onChange(ev, { value: ev.target.value });\n }\n }),\n },\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport type { RadioGroupBaseProps, RadioGroupBaseState, RadioGroupProps, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */\nexport const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>): RadioGroupState => {\n const { layout = 'vertical', ...baseProps } = props;\n const state = useRadioGroupBase_unstable(baseProps, ref);\n\n return {\n layout,\n ...state,\n };\n};\n\n/**\n * Create the base state required to render RadioGroup, without design-related properties such as `layout`.\n */\nexport const useRadioGroupBase_unstable = (\n props: RadioGroupBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): RadioGroupBaseState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props);\n\n const generatedName = useId('radiogroup-');\n\n const { name = generatedName, value, defaultValue, disabled, onChange, required } = props;\n\n return {\n name,\n value,\n defaultValue,\n disabled,\n required,\n components: {\n root: 'div',\n },\n root: {\n ref,\n role: 'radiogroup',\n ...slot.always(getIntrinsicElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']), {\n elementType: 'div',\n }),\n onChange: useEventCallback(ev => {\n if (\n onChange &&\n isHTMLElement(ev.target, { constructorName: 'HTMLInputElement' }) &&\n ev.target.type === 'radio'\n ) {\n onChange(ev, { value: ev.target.value });\n }\n }),\n },\n };\n};\n"],"names":["useFieldControlProps_unstable","getIntrinsicElementProps","isHTMLElement","useEventCallback","useId","slot","useRadioGroup_unstable","props","ref","layout","baseProps","state","useRadioGroupBase_unstable","generatedName","name","value","defaultValue","disabled","onChange","required","components","root","role","always","elementType","ev","target","constructorName","type"],"mappings":"AAAA;AAGA,SAASA,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGnH;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,UAAU,EAAE,GAAGC,WAAW,GAAGH;IAC9C,MAAMI,QAAQC,2BAA2BF,WAAWF;IAEpD,OAAO;QACLC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CACxCL,OACAC;IAEA,+CAA+C;IAC/CD,QAAQP,8BAA8BO;IAEtC,MAAMM,gBAAgBT,MAAM;IAE5B,MAAM,EAAEU,OAAOD,aAAa,EAAEE,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGZ;IAEpF,OAAO;QACLO;QACAC;QACAC;QACAC;QACAE;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM;YACJb;YACAc,MAAM;YACN,GAAGjB,KAAKkB,MAAM,CAACtB,yBAAyB,OAAOM,OAAO,oBAAoB,GAAG;gBAAC;gBAAY;aAAO,GAAG;gBAClGiB,aAAa;YACf,EAAE;YACFN,UAAUf,iBAAiBsB,CAAAA;gBACzB,IACEP,YACAhB,cAAcuB,GAAGC,MAAM,EAAE;oBAAEC,iBAAiB;gBAAmB,MAC/DF,GAAGC,MAAM,CAACE,IAAI,KAAK,SACnB;oBACAV,SAASO,IAAI;wBAAEV,OAAOU,GAAGC,MAAM,CAACX,KAAK;oBAAC;gBACxC;YACF;QACF;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","radioGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASP;IAEfM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aACrBC,qBAAqBC,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMG,MAAM,KAAK,cAAcF,OAAOJ,QAAQ,EAC9CG,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","radioGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASP;IAEfM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aACrBC,qBAAqBC,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMG,MAAM,KAAK,cAAcF,OAAOJ,QAAQ,EAC9CG,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Radio/Radio.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n /**\n * The root element of the Radio.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Radio's label.\n */\n label: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the radio's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * A circle outline, with a filled circle icon inside when the Radio is checked.\n */\n indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {\n /**\n * The value of the RadioGroup when this Radio item is selected.\n */\n value?: string;\n\n /**\n * The position of the label relative to the radio indicator.\n *\n * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n * in which case it defaults to `below`.\n *\n * @defaultvalue after\n */\n labelPosition?: 'after' | 'below';\n\n /**\n * Disable this Radio item.\n */\n disabled?: boolean;\n\n /**\n * Callback when this Radio is selected in its group.\n *\n * **Note:** `onChange` is NOT called when this Radio is deselected.\n * Use RadioGroup's `onChange` event to determine when the selection in the group changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;\n};\n\nexport type RadioBaseProps = RadioProps;\n\n/**\n * Data for the onChange event for Radio.\n */\nexport type RadioOnChangeData = {\n /**\n * The value prop of this Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n\nexport type RadioBaseState = RadioState;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/Radio/Radio.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n /**\n * The root element of the Radio.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Radio's label.\n */\n label: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the radio's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * A circle outline, with a filled circle icon inside when the Radio is checked.\n */\n indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {\n /**\n * The value of the RadioGroup when this Radio item is selected.\n */\n value?: string;\n\n /**\n * The position of the label relative to the radio indicator.\n *\n * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n * in which case it defaults to `below`.\n *\n * @defaultvalue after\n */\n labelPosition?: 'after' | 'below';\n\n /**\n * Disable this Radio item.\n */\n disabled?: boolean;\n\n /**\n * Callback when this Radio is selected in its group.\n *\n * **Note:** `onChange` is NOT called when this Radio is deselected.\n * Use RadioGroup's `onChange` event to determine when the selection in the group changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;\n};\n\nexport type RadioBaseProps = RadioProps;\n\n/**\n * Data for the onChange event for Radio.\n */\nexport type RadioOnChangeData = {\n /**\n * The value prop of this Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n\nexport type RadioBaseState = RadioState;\n"],"names":[],"mappings":""}
|
|
@@ -17,8 +17,6 @@ _export(exports, {
|
|
|
17
17
|
return useRadio_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
21
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
20
|
const _reactlabel = require("@fluentui/react-label");
|
|
23
21
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
24
22
|
const _RadioGroupContext = require("../../contexts/RadioGroupContext");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Radio/useRadio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RadioBaseProps, RadioBaseState, RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const state = useRadioBase_unstable(props, ref);\n\n return {\n ...state,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components: { ...state.components, label: Label },\n label: slot.optional(props.label, {\n defaultProps: { ...state.label },\n elementType: Label,\n }),\n };\n};\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadioBase_unstable = (props: RadioBaseProps, ref: React.Ref<HTMLInputElement>): RadioBaseState => {\n const group = useRadioGroupContextValue_unstable();\n\n const {\n name = group.name,\n checked = group.value !== undefined ? group.value === props.value : undefined,\n defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after',\n disabled = group.disabled,\n required = group.required,\n 'aria-describedby': ariaDescribedBy = group['aria-describedby'],\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n });\n const input = slot.always(props.input, {\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n required,\n 'aria-describedby': ariaDescribedBy,\n ...nativeProps.primary,\n },\n elementType: 'input',\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n const label = slot.optional(props.label, {\n defaultProps: { htmlFor: input.id, disabled: input.disabled },\n elementType: 'label',\n });\n const indicator = slot.always(props.indicator, {\n defaultProps: { 'aria-hidden': true },\n elementType: 'div',\n });\n return {\n labelPosition,\n components: { root: 'span', input: 'input', label: 'label', indicator: 'div' },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Radio/useRadio.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RadioBaseProps, RadioBaseState, RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const state = useRadioBase_unstable(props, ref);\n\n return {\n ...state,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components: { ...state.components, label: Label },\n label: slot.optional(props.label, {\n defaultProps: { ...state.label },\n elementType: Label,\n }),\n };\n};\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadioBase_unstable = (props: RadioBaseProps, ref: React.Ref<HTMLInputElement>): RadioBaseState => {\n const group = useRadioGroupContextValue_unstable();\n\n const {\n name = group.name,\n checked = group.value !== undefined ? group.value === props.value : undefined,\n defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after',\n disabled = group.disabled,\n required = group.required,\n 'aria-describedby': ariaDescribedBy = group['aria-describedby'],\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n });\n const input = slot.always(props.input, {\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n required,\n 'aria-describedby': ariaDescribedBy,\n ...nativeProps.primary,\n },\n elementType: 'input',\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n const label = slot.optional(props.label, {\n defaultProps: { htmlFor: input.id, disabled: input.disabled },\n elementType: 'label',\n });\n const indicator = slot.always(props.indicator, {\n defaultProps: { 'aria-hidden': true },\n elementType: 'div',\n });\n return {\n labelPosition,\n components: { root: 'span', input: 'input', label: 'label', indicator: 'div' },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"names":["Label","getPartitionedNativeProps","mergeCallbacks","useId","slot","useRadioGroupContextValue_unstable","useFocusWithin","useRadio_unstable","props","ref","state","useRadioBase_unstable","components","label","optional","defaultProps","elementType","group","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","primarySlotTagName","excludedPropNames","root","always","input","type","id","primary","ev","currentTarget","htmlFor","indicator"],"mappings":"AAAA;;;;;;;;;;;;IAyCaW,qBAAAA;;;qBAvBAJ;;;;4BAfS,wBAAwB;gCACyB,4BAA4B;mCAChD,mCAAmC;8BACvD,0BAA0B;AAYlD,MAAMA,oBAAoB,CAACC,OAAmBC;IACnD,MAAMC,QAAQC,sBAAsBH,OAAOC;IAE3C,OAAO;QACL,GAAGC,KAAK;QACR,4DAA4D;QAC5DE,YAAY;YAAE,GAAGF,MAAME,UAAU;YAAEC,OAAOb,iBAAAA;QAAM;QAChDa,OAAOT,oBAAAA,CAAKU,QAAQ,CAACN,MAAMK,KAAK,EAAE;YAChCE,cAAc;gBAAE,GAAGL,MAAMG,KAAK;YAAC;YAC/BG,aAAahB,iBAAAA;QACf;IACF;AACF,EAAE;AAWK,8BAA8B,CAACQ,OAAuBC;IAC3D,MAAMQ,YAAQZ,qDAAAA;IAEd,MAAM,EACJa,OAAOD,MAAMC,IAAI,EACjBC,UAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKZ,MAAMY,KAAK,GAAGC,SAAS,EAC7EC,iBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKf,MAAMY,KAAK,GAAGC,SAAS,EAClGG,gBAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,EACzEC,WAAWT,MAAMS,QAAQ,EACzBC,WAAWV,MAAMU,QAAQ,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,EAC/DY,QAAQ,EACT,GAAGrB;IAEJ,MAAMsB,cAAc7B,6CAAAA,EAA0B;QAC5CO;QACAuB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,OAAO7B,oBAAAA,CAAK8B,MAAM,CAAC1B,MAAMyB,IAAI,EAAE;QACnClB,cAAc;YACZN,SAAKH,4BAAAA;YACL,GAAGwB,YAAYG,IAAI;QACrB;QACAjB,aAAa;IACf;IACA,MAAMmB,QAAQ/B,oBAAAA,CAAK8B,MAAM,CAAC1B,MAAM2B,KAAK,EAAE;QACrCpB,cAAc;YACZN;YACA2B,MAAM;YACNC,QAAIlC,qBAAAA,EAAM,UAAU2B,YAAYQ,OAAO,CAACD,EAAE;YAC1CnB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYQ,OAAO;QACxB;QACAtB,aAAa;IACf;IACAmB,MAAMN,QAAQ,OAAG3B,8BAAAA,EAAeiC,MAAMN,QAAQ,EAAEU,CAAAA,KAAMV,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWU,IAAI;YAAEnB,OAAOmB,GAAGC,aAAa,CAACpB,KAAK;QAAC;IACrG,MAAMP,QAAQT,oBAAAA,CAAKU,QAAQ,CAACN,MAAMK,KAAK,EAAE;QACvCE,cAAc;YAAE0B,SAASN,MAAME,EAAE;YAAEX,UAAUS,MAAMT,QAAQ;QAAC;QAC5DV,aAAa;IACf;IACA,MAAM0B,YAAYtC,oBAAAA,CAAK8B,MAAM,CAAC1B,MAAMkC,SAAS,EAAE;QAC7C3B,cAAc;YAAE,eAAe;QAAK;QACpCC,aAAa;IACf;IACA,OAAO;QACLQ;QACAZ,YAAY;YAAEqB,MAAM;YAAQE,OAAO;YAAStB,OAAO;YAAS6B,WAAW;QAAM;QAC7ET;QACAE;QACAtB;QACA6B;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCAGW,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;4CACjC,4CAA4C;qCAC3C,kCAAkC;AAKvE,MAAMM,aAAAA,WAAAA,GAAmDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;IAC5C,MAAME,oBAAgBP,sDAAAA,EAA2BM;QAEjDP,uDAAAA,EAA6BO;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOT,2CAAAA,EAA0BS,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCAGW,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;4CACjC,4CAA4C;qCAC3C,kCAAkC;AAKvE,MAAMM,aAAAA,WAAAA,GAAmDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;IAC5C,MAAME,oBAAgBP,sDAAAA,EAA2BM;QAEjDP,uDAAAA,EAA6BO;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOT,2CAAAA,EAA0BS,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/RadioGroup.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioGroupSlots = {\n /**\n * The radio group root.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n /**\n * The name of this radio group. This name is applied to all Radio items inside this group.\n *\n * If no name is provided, one will be generated so that all of the Radio items have the same name.\n */\n name?: string;\n\n /**\n * The selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n value?: string;\n\n /**\n * The default selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n defaultValue?: string;\n\n /**\n * Callback when the selected Radio item changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n /**\n * How the radio items are laid out in the group.\n *\n * @default vertical\n */\n layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n\n /**\n * Require a selection in this group. Adds the `required` prop to all child Radio items.\n */\n required?: boolean;\n};\n\nexport type RadioGroupBaseProps = Omit<RadioGroupProps, 'layout'>;\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n /**\n * The value of the newly selected Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n Required<Pick<RadioGroupProps, 'layout'>> &\n Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;\n\nexport type RadioGroupBaseState = Omit<RadioGroupState, 'layout'>;\n\nexport type RadioGroupContextValue = Pick<\n RadioGroupProps,\n 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required' | 'aria-describedby'\n>;\n\nexport type RadioGroupContextValues = {\n radioGroup: RadioGroupContextValue;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/RadioGroup.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioGroupSlots = {\n /**\n * The radio group root.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n /**\n * The name of this radio group. This name is applied to all Radio items inside this group.\n *\n * If no name is provided, one will be generated so that all of the Radio items have the same name.\n */\n name?: string;\n\n /**\n * The selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n value?: string;\n\n /**\n * The default selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n defaultValue?: string;\n\n /**\n * Callback when the selected Radio item changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n /**\n * How the radio items are laid out in the group.\n *\n * @default vertical\n */\n layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n\n /**\n * Require a selection in this group. Adds the `required` prop to all child Radio items.\n */\n required?: boolean;\n};\n\nexport type RadioGroupBaseProps = Omit<RadioGroupProps, 'layout'>;\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n /**\n * The value of the newly selected Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n Required<Pick<RadioGroupProps, 'layout'>> &\n Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;\n\nexport type RadioGroupBaseState = Omit<RadioGroupState, 'layout'>;\n\nexport type RadioGroupContextValue = Pick<\n RadioGroupProps,\n 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required' | 'aria-describedby'\n>;\n\nexport type RadioGroupContextValues = {\n radioGroup: RadioGroupContextValue;\n};\n"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/renderRadioGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { RadioGroupContextValues, RadioGroupSlots, RadioGroupBaseState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (\n state: RadioGroupBaseState,\n contextValues: RadioGroupContextValues,\n): JSXElement => {\n assertSlots<RadioGroupSlots>(state);\n\n return (\n <RadioGroupContext.Provider value={contextValues.radioGroup}>\n <state.root />\n </RadioGroupContext.Provider>\n );\n};\n"],"names":["assertSlots","RadioGroupContext","renderRadioGroup_unstable","state","contextValues","Provider","value","radioGroup","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;mCAEtB,mCAAmC;AAM9D,kCAAkC,CACvCC,OACAC;QAEAJ,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,eAAA,EAACF,oCAAAA,CAAkBI,QAAQ,EAAA;QAACC,OAAOF,cAAcG,UAAU;kBACzD,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/renderRadioGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport type { RadioGroupContextValues, RadioGroupSlots, RadioGroupBaseState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (\n state: RadioGroupBaseState,\n contextValues: RadioGroupContextValues,\n): JSXElement => {\n assertSlots<RadioGroupSlots>(state);\n\n return (\n <RadioGroupContext.Provider value={contextValues.radioGroup}>\n <state.root />\n </RadioGroupContext.Provider>\n );\n};\n"],"names":["assertSlots","RadioGroupContext","renderRadioGroup_unstable","state","contextValues","Provider","value","radioGroup","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;mCAEtB,mCAAmC;AAM9D,kCAAkC,CACvCC,OACAC;QAEAJ,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,eAAA,EAACF,oCAAAA,CAAkBI,QAAQ,EAAA;QAACC,OAAOF,cAAcG,UAAU;kBACzD,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
|
|
@@ -17,8 +17,6 @@ _export(exports, {
|
|
|
17
17
|
return useRadioGroup_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
21
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
20
|
const _reactfield = require("@fluentui/react-field");
|
|
23
21
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
24
22
|
const useRadioGroup_unstable = (props, ref)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { RadioGroupBaseProps, RadioGroupBaseState, RadioGroupProps, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */\nexport const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>): RadioGroupState => {\n const { layout = 'vertical', ...baseProps } = props;\n const state = useRadioGroupBase_unstable(baseProps, ref);\n\n return {\n layout,\n ...state,\n };\n};\n\n/**\n * Create the base state required to render RadioGroup, without design-related properties such as `layout`.\n */\nexport const useRadioGroupBase_unstable = (\n props: RadioGroupBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): RadioGroupBaseState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props);\n\n const generatedName = useId('radiogroup-');\n\n const { name = generatedName, value, defaultValue, disabled, onChange, required } = props;\n\n return {\n name,\n value,\n defaultValue,\n disabled,\n required,\n components: {\n root: 'div',\n },\n root: {\n ref,\n role: 'radiogroup',\n ...slot.always(getIntrinsicElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']), {\n elementType: 'div',\n }),\n onChange: useEventCallback(ev => {\n if (\n onChange &&\n isHTMLElement(ev.target, { constructorName: 'HTMLInputElement' }) &&\n ev.target.type === 'radio'\n ) {\n onChange(ev, { value: ev.target.value });\n }\n }),\n },\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport type { RadioGroupBaseProps, RadioGroupBaseState, RadioGroupProps, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */\nexport const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>): RadioGroupState => {\n const { layout = 'vertical', ...baseProps } = props;\n const state = useRadioGroupBase_unstable(baseProps, ref);\n\n return {\n layout,\n ...state,\n };\n};\n\n/**\n * Create the base state required to render RadioGroup, without design-related properties such as `layout`.\n */\nexport const useRadioGroupBase_unstable = (\n props: RadioGroupBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): RadioGroupBaseState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props);\n\n const generatedName = useId('radiogroup-');\n\n const { name = generatedName, value, defaultValue, disabled, onChange, required } = props;\n\n return {\n name,\n value,\n defaultValue,\n disabled,\n required,\n components: {\n root: 'div',\n },\n root: {\n ref,\n role: 'radiogroup',\n ...slot.always(getIntrinsicElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']), {\n elementType: 'div',\n }),\n onChange: useEventCallback(ev => {\n if (\n onChange &&\n isHTMLElement(ev.target, { constructorName: 'HTMLInputElement' }) &&\n ev.target.type === 'radio'\n ) {\n onChange(ev, { value: ev.target.value });\n }\n }),\n },\n };\n};\n"],"names":["useFieldControlProps_unstable","getIntrinsicElementProps","isHTMLElement","useEventCallback","useId","slot","useRadioGroup_unstable","props","ref","layout","baseProps","state","useRadioGroupBase_unstable","generatedName","name","value","defaultValue","disabled","onChange","required","components","root","role","always","elementType","ev","target","constructorName","type"],"mappings":"AAAA;;;;;;;;;;;;IA6BaY,0BAAAA;;;0BAbAN;;;;4BAbiC,wBAAwB;gCACiB,4BAA4B;AAY5G,MAAMA,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,UAAU,EAAE,GAAGC,WAAW,GAAGH;IAC9C,MAAMI,QAAQC,2BAA2BF,WAAWF;IAEpD,OAAO;QACLC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAKK,mCAAmC,CACxCJ,OACAC;IAEA,+CAA+C;IAC/CD,QAAQP,6CAAAA,EAA8BO;IAEtC,MAAMM,oBAAgBT,qBAAAA,EAAM;IAE5B,MAAM,EAAEU,OAAOD,aAAa,EAAEE,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGZ;IAEpF,OAAO;QACLO;QACAC;QACAC;QACAC;QACAE;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM;YACJb;YACAc,MAAM;YACN,GAAGjB,oBAAAA,CAAKkB,MAAM,KAACtB,wCAAAA,EAAyB,OAAOM,OAAO,oBAAoB,GAAG;gBAAC;gBAAY;aAAO,GAAG;gBAClGiB,aAAa;YACf,EAAE;YACFN,cAAUf,gCAAAA,EAAiBsB,CAAAA;gBACzB,IACEP,gBACAhB,6BAAAA,EAAcuB,GAAGC,MAAM,EAAE;oBAAEC,iBAAiB;gBAAmB,MAC/DF,GAAGC,MAAM,CAACE,IAAI,KAAK,SACnB;oBACAV,SAASO,IAAI;wBAAEV,OAAOU,GAAGC,MAAM,CAACX,KAAK;oBAAC;gBACxC;YACF;QACF;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","radioGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,oBAAAA;;;gCAkBAO;;;;uBAtB4B,iBAAiB;AAInD,6BAA8D;IACnEN,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,qBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAKO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASP;IAEfM,MAAMP,IAAI,CAACS,SAAS,OAAGX,mBAAAA,EACrBC,qBAAqBC,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMG,MAAM,KAAK,cAAcF,OAAOJ,QAAQ,EAC9CG,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","radioGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,oBAAAA;;;gCAkBAO;;;;uBAtB4B,iBAAiB;AAInD,6BAA8D;IACnEN,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,qBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAKO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASP;IAEfM,MAAMP,IAAI,CAACS,SAAS,OAAGX,mBAAAA,EACrBC,qBAAqBC,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMG,MAAM,KAAK,cAAcF,OAAOJ,QAAQ,EAC9CG,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.2",
|
|
4
4
|
"description": "Fluent UI Radio component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,13 +12,13 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/react-field": "^9.
|
|
16
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
17
|
-
"@fluentui/react-label": "^9.
|
|
15
|
+
"@fluentui/react-field": "^9.5.1",
|
|
16
|
+
"@fluentui/react-jsx-runtime": "^9.4.2",
|
|
17
|
+
"@fluentui/react-label": "^9.4.1",
|
|
18
18
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
19
|
-
"@fluentui/react-tabster": "^9.26.
|
|
19
|
+
"@fluentui/react-tabster": "^9.26.14",
|
|
20
20
|
"@fluentui/react-theme": "^9.2.1",
|
|
21
|
-
"@fluentui/react-utilities": "^9.26.
|
|
21
|
+
"@fluentui/react-utilities": "^9.26.3",
|
|
22
22
|
"@griffel/react": "^1.5.32",
|
|
23
23
|
"@swc/helpers": "^0.5.1"
|
|
24
24
|
},
|