@fluentui/react-radio 9.0.11 → 9.0.13

Sign up to get free protection for your applications and to get access to all the features.
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
package/lib-commonjs/components/Radio/useRadioStyles.js CHANGED
@@ -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
  });
package/lib-commonjs/components/Radio/useRadioStyles.js.map CHANGED
@@ -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/"}
package/lib-commonjs/components/RadioGroup/RadioGroup.js.map CHANGED
@@ -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/"}
package/lib-commonjs/components/RadioGroup/index.js.map CHANGED
@@ -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/"}
package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map CHANGED
@@ -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/"}
package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map CHANGED
@@ -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/"}
package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map CHANGED
@@ -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/"}
package/lib-commonjs/components/RadioGroupField/RadioGroupField.js.map CHANGED
@@ -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/"}
package/lib-commonjs/components/RadioGroupField/index.js.map CHANGED
@@ -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/"}
package/lib-commonjs/contexts/RadioGroupContext.js.map CHANGED
@@ -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/"}
package/lib-commonjs/contexts/index.js.map CHANGED
@@ -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/"}
package/lib-commonjs/contexts/useRadioGroupContextValues.js.map CHANGED
@@ -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/"}
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":"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","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 | - |