@fluentui/react-radio 9.0.11 → 9.0.13

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 (88) hide show
  1. package/CHANGELOG.json +87 -1
  2. package/CHANGELOG.md +28 -2
  3. package/lib/Radio.js.map +1 -1
  4. package/lib/RadioGroup.js.map +1 -1
  5. package/lib/RadioGroupField.js.map +1 -1
  6. package/lib/components/Radio/Radio.js.map +1 -1
  7. package/lib/components/Radio/Radio.types.js.map +1 -1
  8. package/lib/components/Radio/index.js.map +1 -1
  9. package/lib/components/Radio/renderRadio.js.map +1 -1
  10. package/lib/components/Radio/useRadio.js.map +1 -1
  11. package/lib/components/Radio/useRadioStyles.js +29 -29
  12. package/lib/components/Radio/useRadioStyles.js.map +1 -1
  13. package/lib/components/RadioGroup/RadioGroup.js.map +1 -1
  14. package/lib/components/RadioGroup/RadioGroup.types.js.map +1 -1
  15. package/lib/components/RadioGroup/index.js.map +1 -1
  16. package/lib/components/RadioGroup/renderRadioGroup.js.map +1 -1
  17. package/lib/components/RadioGroup/useRadioGroup.js.map +1 -1
  18. package/lib/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
  19. package/lib/components/RadioGroupField/RadioGroupField.js.map +1 -1
  20. package/lib/components/RadioGroupField/index.js.map +1 -1
  21. package/lib/contexts/RadioGroupContext.js.map +1 -1
  22. package/lib/contexts/index.js.map +1 -1
  23. package/lib/contexts/useRadioGroupContextValues.js.map +1 -1
  24. package/lib/index.js.map +1 -1
  25. package/lib-amd/Radio.js +6 -0
  26. package/lib-amd/Radio.js.map +1 -0
  27. package/lib-amd/RadioGroup.js +6 -0
  28. package/lib-amd/RadioGroup.js.map +1 -0
  29. package/lib-amd/RadioGroupField.js +6 -0
  30. package/lib-amd/RadioGroupField.js.map +1 -0
  31. package/lib-amd/components/Radio/Radio.js +15 -0
  32. package/lib-amd/components/Radio/Radio.js.map +1 -0
  33. package/lib-amd/components/Radio/Radio.types.js +5 -0
  34. package/lib-amd/components/Radio/Radio.types.js.map +1 -0
  35. package/lib-amd/components/Radio/index.js +10 -0
  36. package/lib-amd/components/Radio/index.js.map +1 -0
  37. package/lib-amd/components/Radio/renderRadio.js +17 -0
  38. package/lib-amd/components/Radio/renderRadio.js.map +1 -0
  39. package/lib-amd/components/Radio/useRadio.js +65 -0
  40. package/lib-amd/components/Radio/useRadio.js.map +1 -0
  41. package/lib-amd/components/Radio/useRadioStyles.js +120 -0
  42. package/lib-amd/components/Radio/useRadioStyles.js.map +1 -0
  43. package/lib-amd/components/RadioGroup/RadioGroup.js +16 -0
  44. package/lib-amd/components/RadioGroup/RadioGroup.js.map +1 -0
  45. package/lib-amd/components/RadioGroup/RadioGroup.types.js +5 -0
  46. package/lib-amd/components/RadioGroup/RadioGroup.types.js.map +1 -0
  47. package/lib-amd/components/RadioGroup/index.js +10 -0
  48. package/lib-amd/components/RadioGroup/index.js.map +1 -0
  49. package/lib-amd/components/RadioGroup/renderRadioGroup.js +15 -0
  50. package/lib-amd/components/RadioGroup/renderRadioGroup.js.map +1 -0
  51. package/lib-amd/components/RadioGroup/useRadioGroup.js +36 -0
  52. package/lib-amd/components/RadioGroup/useRadioGroup.js.map +1 -0
  53. package/lib-amd/components/RadioGroup/useRadioGroupStyles.js +26 -0
  54. package/lib-amd/components/RadioGroup/useRadioGroupStyles.js.map +1 -0
  55. package/lib-amd/components/RadioGroupField/RadioGroupField.js +17 -0
  56. package/lib-amd/components/RadioGroupField/RadioGroupField.js.map +1 -0
  57. package/lib-amd/components/RadioGroupField/index.js +6 -0
  58. package/lib-amd/components/RadioGroupField/index.js.map +1 -0
  59. package/lib-amd/contexts/RadioGroupContext.js +19 -0
  60. package/lib-amd/contexts/RadioGroupContext.js.map +1 -0
  61. package/lib-amd/contexts/index.js +7 -0
  62. package/lib-amd/contexts/index.js.map +1 -0
  63. package/lib-amd/contexts/useRadioGroupContextValues.js +19 -0
  64. package/lib-amd/contexts/useRadioGroupContextValues.js.map +1 -0
  65. package/lib-amd/index.js +21 -0
  66. package/lib-amd/index.js.map +1 -0
  67. package/lib-commonjs/Radio.js.map +1 -1
  68. package/lib-commonjs/RadioGroup.js.map +1 -1
  69. package/lib-commonjs/RadioGroupField.js.map +1 -1
  70. package/lib-commonjs/components/Radio/Radio.js.map +1 -1
  71. package/lib-commonjs/components/Radio/index.js.map +1 -1
  72. package/lib-commonjs/components/Radio/renderRadio.js.map +1 -1
  73. package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
  74. package/lib-commonjs/components/Radio/useRadioStyles.js +29 -29
  75. package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
  76. package/lib-commonjs/components/RadioGroup/RadioGroup.js.map +1 -1
  77. package/lib-commonjs/components/RadioGroup/index.js.map +1 -1
  78. package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map +1 -1
  79. package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map +1 -1
  80. package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
  81. package/lib-commonjs/components/RadioGroupField/RadioGroupField.js.map +1 -1
  82. package/lib-commonjs/components/RadioGroupField/index.js.map +1 -1
  83. package/lib-commonjs/contexts/RadioGroupContext.js.map +1 -1
  84. package/lib-commonjs/contexts/index.js.map +1 -1
  85. package/lib-commonjs/contexts/useRadioGroupContextValues.js.map +1 -1
  86. package/lib-commonjs/index.js.map +1 -1
  87. package/package.json +9 -10
  88. package/Spec.md +0 -292
@@ -35,37 +35,37 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
35
35
  "focusIndicator": {
36
36
  "Brovlpu": "ftqa4ok",
37
37
  "B486eqv": "f2hkw1w",
38
- "n9p9qa": "f1fu8s9w",
39
- "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
40
- "r10ruj": "f1c1apvh",
41
- "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
42
- "gjlbkn": "fyrlc8h",
43
- "B1kt0iq": "f28z38y",
44
- "Boi8ppg": "f1edqc4x",
45
- "Btfhvw2": "f19bnj08",
46
- "B55xfkk": "f17wg1r9",
47
- "i1dkbe": ["fgiioun", "fnx45sh"],
48
- "Bozs2tv": "f1ljqnps",
49
- "snkem8": ["fnx45sh", "fgiioun"],
50
- "Bjilewg": "fsacsau",
51
- "wht04d": ["flcxmxr", "f138axrn"],
52
- "vikdft": "f1f4bc3q",
53
- "Bwdhxlo": ["f138axrn", "flcxmxr"],
54
- "B167d6d": ["f5m7f7q", "f175edhc"],
55
- "Bpdw69r": ["f175edhc", "f5m7f7q"],
56
- "Bsdv7io": ["fhfahiz", "fnreirl"],
57
- "Bd353ur": ["fnreirl", "fhfahiz"],
58
- "Bcnuwmc": "fn9i64i",
59
- "dyfsa2": ["f1pylbqb", "f3dy9ja"],
60
- "Bdcx1rh": "f1v06qdr",
61
- "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
62
- "Bbretkc": "fm1yk70",
63
- "rnyfg7": "f1itvegt",
64
- "Bg18gms": ["f17e4q3j", "foxjjqz"],
65
- "Bym00rn": ["foxjjqz", "f17e4q3j"]
38
+ "Bssx7fj": "f1b1k54r",
39
+ "uh7if5": ["f4ne723", "fqqcjud"],
40
+ "clntm0": "fh7aioi",
41
+ "Dlk2r6": ["fqqcjud", "f4ne723"],
42
+ "B2j2mmj": "ffht0p2",
43
+ "wigs8": "f1p0ul1q",
44
+ "pbfy6t": "f1c901ms",
45
+ "B0v4ure": "f1alokd7",
46
+ "ghq09": "f78i1la",
47
+ "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
48
+ "Bwckmig": "f8k7e5g",
49
+ "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
50
+ "Bbgo44z": "f1pmxfrl",
51
+ "Bil7v7r": ["fszkfcr", "f1ap5ily"],
52
+ "skfxo0": "f57dp0y",
53
+ "jo1ztg": ["f1ap5ily", "fszkfcr"],
54
+ "Ba3ybja": ["f11dm2qb", "f136rfnd"],
55
+ "az1dzo": ["f136rfnd", "f11dm2qb"],
56
+ "vppk2z": ["fdsq1qd", "f1khssms"],
57
+ "B6352mv": ["f1khssms", "fdsq1qd"],
58
+ "nr063g": "fq4eyks",
59
+ "Blmvk6g": ["f1ya6x16", "ftuszwa"],
60
+ "Bsiemmq": "f1e2iu44",
61
+ "B98u21t": ["ftuszwa", "f1ya6x16"],
62
+ "B2pnrqr": "f1xkdug0",
63
+ "Bhhzhcn": "f1m1ywml",
64
+ "Bec0n69": ["f7u4kgv", "f1a36mvi"],
65
+ "B29w5g4": ["f1a36mvi", "f7u4kgv"]
66
66
  }
67
67
  }, {
68
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fm1yk70[data-fui-focus-visible]:focus-within::after{top:-2px;}", ".f1itvegt[data-fui-focus-visible]:focus-within::after{bottom:-2px;}", ".f17e4q3j[data-fui-focus-visible]:focus-within::after{left:-2px;}", ".foxjjqz[data-fui-focus-visible]:focus-within::after{right:-2px;}"],
68
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}"],
69
69
  "f": [".ftqa4ok:focus{outline-style:none;}"],
70
70
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
71
71
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n after: {\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n },\n below: {\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const { labelPosition } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputStyles.base,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n after: {\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n },\n below: {\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const { labelPosition } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputStyles.base,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,4BAAA,gBAAA,OAAA,CAAA,2CAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;EACA,MAAM,aAAa,GAAG,4BAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAtB;EAEA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;EACA,OAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,aAAjC,CAAP;AACD,CAN+D,CAAnD;AAQb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * 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';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\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 return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,4BAAA,gBAAA,OAAA,CAAA,2CAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;EACA,MAAM,aAAa,GAAG,4BAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAtB;EAEA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;EACA,OAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,aAAjC,CAAP;AACD,CAN+D,CAAnD;AAQb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * 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';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\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 return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/RadioGroup/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './RadioGroup';\nexport * from './RadioGroup.types';\nexport * from './renderRadioGroup';\nexport * from './useRadioGroup';\nexport * from './useRadioGroupStyles';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/components/RadioGroup/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './RadioGroup';\nexport * from './RadioGroup.types';\nexport * from './renderRadioGroup';\nexport * from './useRadioGroup';\nexport * from './useRadioGroupStyles';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/RadioGroup/renderRadioGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAG,CAAC,KAAD,EAAyB,aAAzB,KAAmE;EAC1G,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,mBAAA,CAAA,iBAAA,CAAkB,QAAnB,EAA2B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA3B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { RadioGroupContextValues, RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (state: RadioGroupState, contextValues: RadioGroupContextValues) => {\n const { slots, slotProps } = getSlots<RadioGroupSlots>(state);\n\n return (\n <RadioGroupContext.Provider value={contextValues.radioGroup}>\n <slots.root {...slotProps.root} />\n </RadioGroupContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/components/RadioGroup/renderRadioGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAG,CAAC,KAAD,EAAyB,aAAzB,KAAmE;EAC1G,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,mBAAA,CAAA,iBAAA,CAAkB,QAAnB,EAA2B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA3B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { RadioGroupContextValues, RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (state: RadioGroupState, contextValues: RadioGroupContextValues) => {\n const { slots, slotProps } = getSlots<RadioGroupSlots>(state);\n\n return (\n <RadioGroupContext.Provider value={contextValues.radioGroup}>\n <slots.root {...slotProps.root} />\n </RadioGroupContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/RadioGroup/useRadioGroup.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAA4E;EAChH,MAAM,aAAa,GAAG,iBAAA,CAAA,KAAA,CAAM,aAAN,CAAtB;EAEA,MAAM;IAAE,IAAI,GAAG,aAAT;IAAwB,KAAxB;IAA+B,YAA/B;IAA6C,QAA7C;IAAuD,MAAM,GAAG,UAAhE;IAA4E,QAA5E;IAAsF;EAAtF,IAAmG,KAAzG;EAEA,OAAO;IACL,MADK;IAEL,IAFK;IAGL,KAHK;IAIL,YAJK;IAKL,QALK;IAML,QANK;IAOL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CAPP;IAUL,IAAI,EAAE;MACJ,GADI;MAEJ,IAAI,EAAE,YAFF;MAGJ,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,KAA7B;MAAoC;MAAuB,CAAC,UAAD,EAAa,MAAb,CAA3D,CAHC;MAIJ,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;QAC9B,IAAI,QAAQ,IAAI,EAAE,CAAC,MAAH,YAAqB,gBAAjC,IAAqD,EAAE,CAAC,MAAH,CAAU,IAAV,KAAmB,OAA5E,EAAqF;UACnF,QAAQ,CAAC,EAAD,EAAK;YAAE,KAAK,EAAE,EAAE,CAAC,MAAH,CAAU;UAAnB,CAAL,CAAR;QACD;MACF,CAJS;IAJN;EAVD,CAAP;AAqBD,CA1BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { 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 generatedName = useId('radiogroup-');\n\n const { name = generatedName, value, defaultValue, disabled, layout = 'vertical', onChange, required } = props;\n\n return {\n layout,\n name,\n value,\n defaultValue,\n disabled,\n required,\n components: {\n root: 'div',\n },\n root: {\n ref,\n role: 'radiogroup',\n ...getNativeElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']),\n onChange: useEventCallback(ev => {\n if (onChange && ev.target instanceof HTMLInputElement && ev.target.type === 'radio') {\n onChange(ev, { value: ev.target.value });\n }\n }),\n },\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/components/RadioGroup/useRadioGroup.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAA4E;EAChH,MAAM,aAAa,GAAG,iBAAA,CAAA,KAAA,CAAM,aAAN,CAAtB;EAEA,MAAM;IAAE,IAAI,GAAG,aAAT;IAAwB,KAAxB;IAA+B,YAA/B;IAA6C,QAA7C;IAAuD,MAAM,GAAG,UAAhE;IAA4E,QAA5E;IAAsF;EAAtF,IAAmG,KAAzG;EAEA,OAAO;IACL,MADK;IAEL,IAFK;IAGL,KAHK;IAIL,YAJK;IAKL,QALK;IAML,QANK;IAOL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CAPP;IAUL,IAAI,EAAE;MACJ,GADI;MAEJ,IAAI,EAAE,YAFF;MAGJ,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,KAA7B;MAAoC;MAAuB,CAAC,UAAD,EAAa,MAAb,CAA3D,CAHC;MAIJ,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;QAC9B,IAAI,QAAQ,IAAI,EAAE,CAAC,MAAH,YAAqB,gBAAjC,IAAqD,EAAE,CAAC,MAAH,CAAU,IAAV,KAAmB,OAA5E,EAAqF;UACnF,QAAQ,CAAC,EAAD,EAAK;YAAE,KAAK,EAAE,EAAE,CAAC,MAAH,CAAU;UAAnB,CAAL,CAAR;QACD;MACF,CAJS;IAJN;EAVD,CAAP;AAqBD,CA1BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { 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 generatedName = useId('radiogroup-');\n\n const { name = generatedName, value, defaultValue, disabled, layout = 'vertical', onChange, required } = props;\n\n return {\n layout,\n name,\n value,\n defaultValue,\n disabled,\n required,\n components: {\n root: 'div',\n },\n root: {\n ref,\n role: 'radiogroup',\n ...getNativeElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']),\n onChange: useEventCallback(ev => {\n if (onChange && ev.target instanceof HTMLInputElement && ev.target.type === 'radio') {\n onChange(ev, { value: ev.target.value });\n }\n }),\n },\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,oBAAA,GAAwD;EACnE,IAAI,EAAE;AAD6D,CAAxD;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA2B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBAAA,CAAqB,IADA,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHjB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAMD,CARM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { 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) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,oBAAA,GAAwD;EACnE,IAAI,EAAE;AAD6D,CAAxD;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA2B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBAAA,CAAqB,IADA,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHjB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAMD,CARM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { 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) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,YAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAIa,OAAA,CAAA,yBAAA,gBAA4B,aAAA,CAAA,kBAAA,CAAmB,iBAAnB,CAA5B;AAEA,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,YAAA,CAAA,UAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,yBAF8B;IAG1C,eAAe,EAAE;EAHyB,CAA9B,CAAd;EAKA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CARyE,CAA7D;AAUb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroup } from '../../RadioGroup';\n\nexport type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;\n\nexport const radioGroupFieldClassNames = getFieldClassNames('RadioGroupField');\n\nexport const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: RadioGroup,\n classNames: radioGroupFieldClassNames,\n labelConnection: 'aria-labelledby',\n });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nRadioGroupField.displayName = 'RadioGroupField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,YAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAIa,OAAA,CAAA,yBAAA,gBAA4B,aAAA,CAAA,kBAAA,CAAmB,iBAAnB,CAA5B;AAEA,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,YAAA,CAAA,UAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,yBAF8B;IAG1C,eAAe,EAAE;EAHyB,CAA9B,CAAd;EAKA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CARyE,CAA7D;AAUb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroup } from '../../RadioGroup';\n\nexport type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;\n\nexport const radioGroupFieldClassNames = getFieldClassNames('RadioGroupField');\n\nexport const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: RadioGroup,\n classNames: radioGroupFieldClassNames,\n labelConnection: 'aria-labelledby',\n });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nRadioGroupField.displayName = 'RadioGroupField';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/RadioGroupField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './RadioGroupField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/components/RadioGroupField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './RadioGroupField';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,iBAAA,gBAAqD,wBAAA,CAAA,aAAA,CAChE,SADgE,CAArD;AAIb,MAAM,6BAA6B,GAA2B,EAA9D;AAEa,OAAA,CAAA,kBAAA,GAAqB,OAAA,CAAA,iBAAA,CAAkB,QAAvC;;AAEN,MAAM,6BAA6B,GAAO,QAAJ,IAC3C,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,iBAAnB,EAAsC,CAAC,GAAG,GAAG,6BAAP,KAAyC,QAAQ,CAAC,GAAD,CAAvF,CADK;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { RadioGroupContextValue } from '../RadioGroup';\n\n/**\n * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.\n */\nexport const RadioGroupContext: Context<RadioGroupContextValue> = createContext<RadioGroupContextValue | undefined>(\n undefined,\n) as Context<RadioGroupContextValue>;\n\nconst radioGroupContextDefaultValue: RadioGroupContextValue = {};\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\nexport const useRadioGroupContext_unstable = <T>(selector: ContextSelector<RadioGroupContextValue, T>): T =>\n useContextSelector(RadioGroupContext, (ctx = radioGroupContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/contexts/RadioGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,iBAAA,gBAAqD,wBAAA,CAAA,aAAA,CAChE,SADgE,CAArD;AAIb,MAAM,6BAA6B,GAA2B,EAA9D;AAEa,OAAA,CAAA,kBAAA,GAAqB,OAAA,CAAA,iBAAA,CAAkB,QAAvC;;AAEN,MAAM,6BAA6B,GAAO,QAAJ,IAC3C,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,iBAAnB,EAAsC,CAAC,GAAG,GAAG,6BAAP,KAAyC,QAAQ,CAAC,GAAD,CAAvF,CADK;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { RadioGroupContextValue } from '../RadioGroup';\n\n/**\n * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.\n */\nexport const RadioGroupContext: Context<RadioGroupContextValue> = createContext<RadioGroupContextValue | undefined>(\n undefined,\n) as Context<RadioGroupContextValue>;\n\nconst radioGroupContextDefaultValue: RadioGroupContextValue = {};\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\nexport const useRadioGroupContext_unstable = <T>(selector: ContextSelector<RadioGroupContextValue, T>): T =>\n useContextSelector(RadioGroupContext, (ctx = radioGroupContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["contexts/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,8BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './RadioGroupContext';\nexport * from './useRadioGroupContextValues';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/contexts/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,8BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './RadioGroupContext';\nexport * from './useRadioGroupContextValues';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["contexts/useRadioGroupContextValues.ts"],"names":[],"mappings":";;;;;;;AAEO,MAAM,0BAA0B,GAAI,KAAD,IAAoD;EAC5F,MAAM;IAAE,IAAF;IAAQ,KAAR;IAAe,YAAf;IAA6B,QAA7B;IAAuC,MAAvC;IAA+C;EAA/C,IAA4D,KAAlE;EAEA,MAAM,UAAU,GAA2B;IACzC,IADyC;IAEzC,KAFyC;IAGzC,YAHyC;IAIzC,QAJyC;IAKzC,MALyC;IAMzC;EANyC,CAA3C;EASA,OAAO;IAAE;EAAF,CAAP;AACD,CAbM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupState } from '../RadioGroup';\n\nexport const useRadioGroupContextValues = (state: RadioGroupState): RadioGroupContextValues => {\n const { name, value, defaultValue, disabled, layout, required } = state;\n\n const radioGroup: RadioGroupContextValue = {\n name,\n value,\n defaultValue,\n disabled,\n layout,\n required,\n };\n\n return { radioGroup };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/contexts/useRadioGroupContextValues.ts"],"names":[],"mappings":";;;;;;;AAEO,MAAM,0BAA0B,GAAI,KAAD,IAAoD;EAC5F,MAAM;IAAE,IAAF;IAAQ,KAAR;IAAe,YAAf;IAA6B,QAA7B;IAAuC,MAAvC;IAA+C;EAA/C,IAA4D,KAAlE;EAEA,MAAM,UAAU,GAA2B;IACzC,IADyC;IAEzC,KAFyC;IAGzC,YAHyC;IAIzC,QAJyC;IAKzC,MALyC;IAMzC;EANyC,CAA3C;EASA,OAAO;IAAE;EAAF,CAAP;AACD,CAbM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupState } from '../RadioGroup';\n\nexport const useRadioGroupContextValues = (state: RadioGroupState): RadioGroupContextValues => {\n const { name, value, defaultValue, disabled, layout, required } = state;\n\n const radioGroup: RadioGroupContextValue = {\n name,\n value,\n defaultValue,\n disabled,\n layout,\n required,\n };\n\n return { radioGroup };\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,4BAAA;EAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;;AAUF,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;;AAEhF,IAAA,OAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AAA4B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;;AAEzD,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAA6C,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA","sourcesContent":["export {\n RadioGroup,\n radioGroupClassNames,\n renderRadioGroup_unstable,\n useRadioGroupStyles_unstable,\n useRadioGroup_unstable,\n} from './RadioGroup';\nexport type {\n RadioGroupContextValue,\n RadioGroupContextValues,\n RadioGroupOnChangeData,\n RadioGroupProps,\n RadioGroupSlots,\n RadioGroupState,\n} from './RadioGroup';\nexport { Radio, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable } from './Radio';\nexport type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';\nexport { RadioGroupProvider, useRadioGroupContextValues, useRadioGroupContext_unstable } from './contexts/index';\n\nexport { RadioGroupField as RadioGroupField_unstable, radioGroupFieldClassNames } from './RadioGroupField';\nexport type { RadioGroupFieldProps as RadioGroupFieldProps_unstable } from './RadioGroupField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-radio/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,4BAAA;EAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;;AAUF,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;;AAEhF,IAAA,OAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AAA4B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;;AAEzD,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAA6C,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA","sourcesContent":["export {\n RadioGroup,\n radioGroupClassNames,\n renderRadioGroup_unstable,\n useRadioGroupStyles_unstable,\n useRadioGroup_unstable,\n} from './RadioGroup';\nexport type {\n RadioGroupContextValue,\n RadioGroupContextValues,\n RadioGroupOnChangeData,\n RadioGroupProps,\n RadioGroupSlots,\n RadioGroupState,\n} from './RadioGroup';\nexport { Radio, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable } from './Radio';\nexport type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';\nexport { RadioGroupProvider, useRadioGroupContextValues, useRadioGroupContext_unstable } from './contexts/index';\n\nexport { RadioGroupField as RadioGroupField_unstable, radioGroupFieldClassNames } from './RadioGroupField';\nexport type { RadioGroupFieldProps as RadioGroupFieldProps_unstable } from './RadioGroupField';\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-radio",
3
- "version": "9.0.11",
3
+ "version": "9.0.13",
4
4
  "description": "Fluent UI Radio component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -20,10 +20,9 @@
20
20
  "lint": "just-scripts lint",
21
21
  "start": "yarn storybook",
22
22
  "test": "jest --passWithNoTests",
23
- "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-radio/src && yarn docs",
25
23
  "storybook": "start-storybook",
26
- "type-check": "tsc -b tsconfig.json"
24
+ "type-check": "tsc -b tsconfig.json",
25
+ "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
27
26
  },
28
27
  "devDependencies": {
29
28
  "@fluentui/eslint-plugin": "*",
@@ -31,13 +30,13 @@
31
30
  "@fluentui/react-conformance-griffel": "9.0.0-beta.18"
32
31
  },
33
32
  "dependencies": {
34
- "@fluentui/react-context-selector": "^9.1.1",
35
- "@fluentui/react-field": "9.0.0-alpha.8",
33
+ "@fluentui/react-context-selector": "^9.1.2",
34
+ "@fluentui/react-field": "9.0.0-alpha.10",
36
35
  "@fluentui/react-icons": "^2.0.175",
37
- "@fluentui/react-label": "^9.0.10",
38
- "@fluentui/react-tabster": "^9.3.0",
39
- "@fluentui/react-theme": "^9.1.2",
40
- "@fluentui/react-utilities": "^9.2.1",
36
+ "@fluentui/react-label": "^9.0.12",
37
+ "@fluentui/react-tabster": "^9.3.2",
38
+ "@fluentui/react-theme": "^9.1.3",
39
+ "@fluentui/react-utilities": "^9.2.2",
41
40
  "@griffel/react": "^1.4.2",
42
41
  "tslib": "^2.1.0"
43
42
  },
package/Spec.md DELETED
@@ -1,292 +0,0 @@
1
- # @fluentui/react-radio Spec
2
-
3
- A Radio allows a user to select a single value from two or more options. All Radios with the same `name` are considered to be part of the same group. However, a `RadioGroup` is recommended to add a group label, formatting, and other functionality.
4
-
5
- ## Background
6
-
7
- ### Prior Art
8
-
9
- - [OpenUI research](https://open-ui.org/components/radio-button.research)
10
- - [Epic](https://github.com/microsoft/fluentui/issues/19953)
11
-
12
- ### Comparison of [Fabric ChoiceGroup](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup) and [Stardust RadioGroup](https://fluentsite.z22.web.core.windows.net/components/radio-group/definition)
13
-
14
- - All mentions of v7 or v8 refer to Fabric - `@fluentui/react` ([docsite](https://developer.microsoft.com/en-us/fluentui#/))
15
- - All mentions of v0 refer to Northstar - `@fluentui/react-northstar` ([docsite](https://fluentsite.z22.web.core.windows.net/))
16
-
17
- See Appendix for a detailed comparison of the two components.
18
-
19
- In Fabric the Radio component is represented by the [ChoiceGroup](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup) component.
20
- Fabric creates options based on data passed in via the `options` prop.
21
- It uses the option's `key` property as the input value and holds the currently selected value in the `selectedKey` prop.
22
- Fabric also allows an image to serve as a label for an option.
23
-
24
- ```tsx
25
- <ChoiceGroup
26
- defaultSelectedKey="B"
27
- options={[
28
- { key: 'A', text: 'Option A' },
29
- { key: 'B', text: 'Option B' },
30
- { key: 'C', text: 'Option C', disabled: true },
31
- { key: 'D', text: 'Option D' },
32
- ]}
33
- label="Pick one"
34
- required={true}
35
- />
36
- ```
37
-
38
- In Northstar the Radio component is represented by the [RadioGroup](https://fluentsite.z22.web.core.windows.net/components/radio-group/definition) component.
39
- Northstar creates options based on data passed in via the `items` prop.
40
- It uses the option's `value` property as the input value and holds the currently selected value in the `checkedValue` prop.
41
-
42
- ```tsx
43
- <RadioGroup
44
- onCheckedValueChange={handleChange}
45
- items={[
46
- { key: '1', label: 'Make your choice', value: '1' },
47
- { key: '2', label: 'Another option', value: '2' },
48
- ]}
49
- />
50
- ```
51
-
52
- ## Variants
53
-
54
- ### Layout
55
-
56
- #### Horizonal
57
-
58
- Inline positioning of the inputs and labels.
59
-
60
- ![Horizontal group](./etc/images/horizontal-group.png)
61
-
62
- #### Horizonal stacked
63
-
64
- Positioning the label at the bottom of the radio inputs.
65
-
66
- ![Horizontal group - stacked](./etc/images/horizontal-group-stacked.png)
67
-
68
- #### Vertical
69
-
70
- Default vertical positioning of Radio items.
71
-
72
- ![Vertical group](./etc/images/vertical-group.png)
73
-
74
- #### Vertical with input
75
-
76
- Default positioning of Radio items with an input as its last Radio item.
77
-
78
- ![Vertical group with input](./etc/images/vertical-group-with-input.png)
79
-
80
- ### Vertical with dropdown
81
-
82
- Default positioning of Radio items with a dropdown as its last Radio item.
83
-
84
- ![Vertical group with dropdown](./etc/images/vertical-group-with-dropdown.png)
85
-
86
- ## API
87
-
88
- ### Components
89
-
90
- | Component | Purpose |
91
- | ----------------- | ------------------------------------------------------------------------------- |
92
- | RadioGroup | Wraps radio inputs. Provides RadioGroupContext and layout for the radio items. |
93
- | RadioGroupContext | Provides some props like `name` to Radio items that are children of RadioGroup. |
94
- | Radio | Represents a single radio item (input and label). |
95
-
96
- ### RadioGroup
97
-
98
- Link to [RadioGroup.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-radio/src/components/RadioGroup/RadioGroup.types.ts)
99
-
100
- | Prop | Type | Default value | Purpose |
101
- | -------------- | --------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
102
- | (root) | slot: `<div role="radiogroup">` | | The root slot has the radiogroup role. |
103
- | `name` | `string` | `useId('radiogroup-')` | Name property passed to child radios. |
104
- | `value` | `string` | | Currently selected value. Used only for controlled mode. |
105
- | `defaultValue` | `string` | | Default selected value. |
106
- | `disabled` | `boolean` | `false` | Disables all radio items inside the group. |
107
- | `layout` | `"vertical" \| "horizontal" \| "horizontalStacked"` | `vertical` | Specifies the layout of the radio items. |
108
- | `onChange` | `(event, data: { value: string }) => void` | | Callback when a radio item is selected. |
109
-
110
- ### RadioGroupContext
111
-
112
- This is a context object provided by RadioGroup that allows all of the child Radio items to have the same name, and coordinate the selected item.
113
-
114
- The context contains the following props from RadioGroup:
115
-
116
- - `name`
117
- - `layout`
118
- - `defaultValue`
119
- - `value`
120
- - `disabled`
121
-
122
- ### Radio
123
-
124
- Link to [Radio.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-radio/src/components/Radio/Radio.types.ts)
125
-
126
- | Prop | Type | Purpose |
127
- | ----------- | ---------------------------- | ------------------------------------------------------------------- |
128
- | (root) | slot: `<span>` | Wrapper for the input, indicator, and label |
129
- | `input` | slot: `<input type="radio">` | Hidden input element that handles the radio's behavior. |
130
- | `indicator` | slot: `<div>` | The circular indicator to show the radio's checked/unchecked state. |
131
- | `label` | slot: `<Label>` | Label that will be rendered next to the radio indicator. |
132
- | `value` | `string` | The value of the RadioGroup when this Radio is selected |
133
- | `checked` | `boolean` | Whether the input is checked or not. |
134
- | `disabled` | `boolean` | Whether the input is disabled or not. |
135
-
136
- ## Sample Code
137
-
138
- A simple `RadioGroup`.
139
-
140
- ```jsx
141
- <RadioGroup defaultValue="one">
142
- <Radio value="one" label="Option One" />
143
- <Radio value="two" label="Option Two" />
144
- <Radio value="three" label="Option Three" />
145
- </RadioGroup>
146
- ```
147
-
148
- `Radio` can be used without a `RadioGroup`, but it is then up to the user to add the same `name` to each item:
149
-
150
- ```jsx
151
- <>
152
- <Radio name="number" value="one" label="Option One" defaultChecked />
153
- <Radio name="number" value="two" label="Option Two" />
154
- <Radio name="number" value="three" label="Option Three" />
155
- </>
156
- ```
157
-
158
- ## Structure
159
-
160
- ### Expected DOM structure
161
-
162
- ```html
163
- <div role="radiogroup" class="fui-RadioGroup" name="radiogroup-0">
164
- <span class="fui-Radio">
165
- <input type="radio" id="radio-1" name="radiogroup-0" value="one" checked />
166
- <div class="fui-Radio__indicator">
167
- <svg><circle /></svg>
168
- </div>
169
- <label class="fui-Label" for="radio-1">Option One</label>
170
- </span>
171
-
172
- <span class="fui-Radio">
173
- <input type="radio" id="radio-2" name="radiogroup-0" value="two" />
174
- <div class="fui-Radio__indicator">
175
- <svg><circle /></svg>
176
- </div>
177
- <label class="fui-Label" for="radio-2">Option Two</label>
178
- </span>
179
-
180
- <span class="fui-Radio">
181
- <input type="radio" id="radio-3" name="radiogroup-0" value="three" />
182
- <div class="fui-Radio__indicator">
183
- <svg><circle /></svg>
184
- </div>
185
- <label class="fui-Label" for="radio-3">Option Three</label>
186
- </span>
187
- </div>
188
- ```
189
-
190
- ## Behaviors
191
-
192
- ### Mouse/Touch
193
-
194
- The Radio's hit target fills the entire space around the indicator and label (including the padding).
195
-
196
- ### Keyboard
197
-
198
- RadioGroup inherits all of its mouse and keyboard behaviors from the browser's handling of `<input type="radio">`.
199
-
200
- - It has no special handling of clicks or keypresses for toggling beyond the built-in control.
201
- - The browser handles arrow key selection, and creating a single tab stop for the control.
202
-
203
- ### Disabled
204
-
205
- - Individual Radio items can be disabled, in which case they are grayed out and can't be selected or focused.
206
- - This interaction is built-into the browser by setting `disabled` on the `<input>` control.
207
- - The entire RadioGroup can be disabled, which uses RadioGroupContext to disable all of the individual Radio items.
208
-
209
- ### Group Name
210
-
211
- - All Radio items in a group must have the same `name` for the browser to handle keyboarding and selection.
212
- - The RadioGroup provides its `name` through RadioGroupContext, and each Radio inside applies the `name`.
213
- - If a `name` is not provided on RadioGroup, a unique name is automatically generated with `useId`.
214
-
215
- ## Accessibility
216
-
217
- ### RadioGroup
218
-
219
- This implementation based on the [Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/) examples of Web Accessibility Tutorials (that follow WCAG).
220
-
221
- - The RadioGroup root is a `<div role="radiogroup">` to provide the default accessibility behavior of a radiogroup.
222
- - If a group label is added, the RadioGroup needs to have `aria-labelledby` referencing the label.
223
-
224
- ### Radio
225
-
226
- - The Radio's primary slot is an `<input type="radio">`, with opacity 0, and covers the root.
227
- - This way, the Radio's hit target fills the entire space around the indicator and label (including the padding).
228
- - The Radio's label is a `<label>` element with `for={input.id}` to associate it with the input slot.
229
-
230
- <!--
231
- ## Migration
232
- TBD: Link to Migration guide
233
- -->
234
-
235
- # Appendix
236
-
237
- ## v8 vs v0 comparison
238
-
239
- ### RadioGroup (v0) vs ChoiceGroup (v8) prop mapping
240
-
241
- _⚠️ Props not included in this section are marked as deprecated and will not be considered._
242
-
243
- | Purpose | Fabric (v8) | Northstar (v0) | Matching |
244
- | ------------------------------------------------------------------------------------------------- | ------------------ | -------------------- | ------------------------------------------ |
245
- | Called after radio group value is changed. | onChange | onCheckedValueChange | Matching 🛠️ |
246
- | The options/items for the group. | options | items | Matching |
247
- | Additional CSS styles to apply to the component instance. | styles | styles | Matching |
248
- | Initial checkedValue value. | defaultSelectedKey | defaultCheckedValue | Matching functionality, not implementation |
249
- | Value of the currently checked radio item. | selectedKey | checkedValue | Matching functionality, not implementation |
250
- | Theme - Override for theme site variables to allow modifications of component styling via themes. | theme | variables | Matching |
251
- | ID of an element to use as the aria label for this ChoiceGroup. | ariaLabelledBy | - | - |
252
- | Optional callback to access the `IChoiceGroup` interface. | componentRef | - | - |
253
- | Descriptive label for the choice group. | label | - | - |
254
- | Accessibility behavior if overridden by the user. | - | accessibility | - |
255
- | An element type to render as (string or component). | - | as | - |
256
- | Additional CSS class name(s) to apply. | - | className | - |
257
- | A vertical radio group displays elements vertically. | - | vertical | - |
258
- | - | - | design | - |
259
-
260
- ### RadioItem (v0) vs ChoiceGroupOption (v8) props mapping
261
-
262
- | Purpose | Fabric (v8) | Northstar (v0) | Matching |
263
- | ------------------------------------------------------------------------------- | ------------------ | ---------------- | -------- |
264
- | A required key to uniquely identify the option. | key (required) | - | - |
265
- | The text string for the option. | text (required) ❓ | label | Matching |
266
- | Call to provide customized styling that will layer on top of the variant rules. | styles | styles | Matching |
267
- | A radio item can appear disabled and be unable to change states. | disabled | disabled | Matching |
268
- | Aria label of the option for the benefit of screen reader users. | ariaLabel | - | - |
269
- | Props for an icon to display with this option. | iconProps | - | - |
270
- | ID used on the option's input element. | id | - | - |
271
- | Alt text if the option is an image. | imageAlt | - | - |
272
- | The width and height of the image in px for choice field. | imageSize | - | - |
273
- | Image to display with this option. | imageSrc | - | - |
274
- | ID used on the option's label. | labelId | - | - |
275
- | Used to customize option rendering. | onRenderField | - | - |
276
- | Used to customize label rendering. | onRenderLabel | - | - |
277
- | The src of image for choice field which is selected. | selectedImageSrc | - | - |
278
- | Accessibility behavior if overridden by the user. | - | accessibility | - |
279
- | Whether or not radio item is checked. | - | checked | - |
280
- | The checked radio item indicator can be customized. | - | checkedIndicator | - |
281
- | Initial checked value. | - | defaultChecked | - |
282
- | The radio item indicator can be customized. | - | indicator | - |
283
- | The HTML input name. | - | name | - |
284
- | Called after radio item checked state is changed. | - | onChange | - |
285
- | Called after radio item is clicked. | - | onClick | - |
286
- | Whether should focus when checked | - | shouldFocus | - |
287
- | The HTML input value. | - | value | - |
288
- | A vertical radio group displays elements vertically. | - | vertical | - |
289
- | - | - | as | - |
290
- | - | - | className | - |
291
- | - | - | variables | - |
292
- | - | - | design | - |