@fluentui/react-radio 0.0.0-nightly-20221228-0425.1 → 0.0.0-nightly-20221230-0421.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +17 -17
- package/CHANGELOG.md +11 -11
- package/lib/components/Radio/Radio.js +0 -1
- package/lib/components/Radio/Radio.js.map +1 -1
- package/lib/components/Radio/renderRadio.js +8 -5
- package/lib/components/Radio/renderRadio.js.map +1 -1
- package/lib/components/Radio/useRadio.js +0 -1
- package/lib/components/Radio/useRadio.js.map +1 -1
- package/lib/components/Radio/useRadioStyles.js +4 -13
- package/lib/components/Radio/useRadioStyles.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.js +0 -1
- package/lib/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/renderRadioGroup.js +2 -2
- package/lib/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroup.js +1 -4
- package/lib/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.js +0 -3
- package/lib/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib/components/RadioGroupField/RadioGroupField.js.map +1 -1
- package/lib/contexts/RadioGroupContext.js +0 -1
- package/lib/contexts/RadioGroupContext.js.map +1 -1
- package/lib/contexts/useRadioGroupContextValues.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Radio.js +0 -2
- package/lib-commonjs/Radio.js.map +1 -1
- package/lib-commonjs/RadioGroup.js +0 -2
- package/lib-commonjs/RadioGroup.js.map +1 -1
- package/lib-commonjs/RadioGroupField.js +0 -2
- package/lib-commonjs/RadioGroupField.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.js +0 -6
- package/lib-commonjs/components/Radio/Radio.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.types.js.map +1 -1
- package/lib-commonjs/components/Radio/index.js +0 -6
- package/lib-commonjs/components/Radio/index.js.map +1 -1
- package/lib-commonjs/components/Radio/renderRadio.js +8 -9
- package/lib-commonjs/components/Radio/renderRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadio.js +0 -9
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js +4 -18
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.js +0 -7
- package/lib-commonjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/index.js +0 -6
- package/lib-commonjs/components/RadioGroup/index.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js +2 -7
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js +1 -7
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js +0 -6
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js +0 -4
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js.map +1 -1
- package/lib-commonjs/components/RadioGroupField/index.js +0 -2
- package/lib-commonjs/components/RadioGroupField/index.js.map +1 -1
- package/lib-commonjs/contexts/RadioGroupContext.js +0 -5
- package/lib-commonjs/contexts/RadioGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js +0 -3
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/useRadioGroupContextValues.js +0 -2
- package/lib-commonjs/contexts/useRadioGroupContextValues.js.map +1 -1
- package/lib-commonjs/index.js +0 -8
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.Radio = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const renderRadio_1 = /*#__PURE__*/require("./renderRadio");
|
11
|
-
|
12
9
|
const useRadio_1 = /*#__PURE__*/require("./useRadio");
|
13
|
-
|
14
10
|
const useRadioStyles_1 = /*#__PURE__*/require("./useRadioStyles");
|
15
11
|
/**
|
16
12
|
* Radio component is a wrapper for a radio button with a label.
|
17
13
|
*/
|
18
|
-
|
19
|
-
|
20
14
|
exports.Radio = /*#__PURE__*/React.forwardRef((props, ref) => {
|
21
15
|
const state = useRadio_1.useRadio_unstable(props, ref);
|
22
16
|
useRadioStyles_1.useRadioStyles_unstable(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AACA;AAEA;;;AAGaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3CG,wCAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOG,kCAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,aAAK,CAACS,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useRadio_1","useRadioStyles_1","renderRadio_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles';\n\n/**\n * Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}
|
@@ -3,16 +3,10 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
-
|
9
7
|
tslib_1.__exportStar(require("./Radio"), exports);
|
10
|
-
|
11
8
|
tslib_1.__exportStar(require("./Radio.types"), exports);
|
12
|
-
|
13
9
|
tslib_1.__exportStar(require("./renderRadio"), exports);
|
14
|
-
|
15
10
|
tslib_1.__exportStar(require("./useRadio"), exports);
|
16
|
-
|
17
11
|
tslib_1.__exportStar(require("./useRadioStyles"), exports);
|
18
12
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/index.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/index.ts"],"sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles';\n"]}
|
@@ -4,26 +4,25 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.renderRadio_unstable = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
9
|
/**
|
12
10
|
* Render the final JSX of Radio
|
13
11
|
*/
|
14
|
-
|
15
|
-
|
16
12
|
const renderRadio_unstable = state => {
|
17
13
|
const {
|
18
14
|
slots,
|
19
15
|
slotProps
|
20
16
|
} = react_utilities_1.getSlots(state);
|
21
|
-
return React.createElement(slots.root, {
|
22
|
-
|
23
|
-
}
|
24
|
-
|
17
|
+
return React.createElement(slots.root, {
|
18
|
+
...slotProps.root
|
19
|
+
}, React.createElement(slots.input, {
|
20
|
+
...slotProps.input
|
21
|
+
}), React.createElement(slots.indicator, {
|
22
|
+
...slotProps.indicator
|
23
|
+
}), slots.label && React.createElement(slots.label, {
|
24
|
+
...slotProps.label
|
25
25
|
}));
|
26
26
|
};
|
27
|
-
|
28
27
|
exports.renderRadio_unstable = renderRadio_unstable;
|
29
28
|
//# sourceMappingURL=renderRadio.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaH,KAAK,CAAC;EAExD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACpCF,oBAACH,KAAK,CAACM,SAAS;IAAA,GAAKL,SAAS,CAACK;EAAS,EAAI,EAC3CN,KAAK,CAACO,KAAK,IAAIJ,oBAACH,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,CACzC;AAEjB,CAAC;AAVYC,4BAAoB","names":["renderRadio_unstable","state","slots","slotProps","react_utilities_1","React","root","input","indicator","label","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/renderRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { RadioSlots, RadioState } from './Radio.types';\n\n/**\n * Render the final JSX of Radio\n */\nexport const renderRadio_unstable = (state: RadioState) => {\n const { slots, slotProps } = getSlots<RadioSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.indicator {...slotProps.indicator} />\n {slots.label && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"]}
|
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useRadio_unstable = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
11
|
-
|
12
9
|
const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
|
13
|
-
|
14
10
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
15
|
-
|
16
11
|
const RadioGroupContext_1 = /*#__PURE__*/require("../../contexts/RadioGroupContext");
|
17
|
-
|
18
12
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
19
13
|
/**
|
20
14
|
* Create the state required to render Radio.
|
@@ -25,8 +19,6 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
25
19
|
* @param props - props from this instance of Radio
|
26
20
|
* @param ref - reference to `<input>` element of Radio
|
27
21
|
*/
|
28
|
-
|
29
|
-
|
30
22
|
const useRadio_unstable = (props, ref) => {
|
31
23
|
const nameGroup = RadioGroupContext_1.useRadioGroupContext_unstable(ctx => ctx.name);
|
32
24
|
const value = RadioGroupContext_1.useRadioGroupContext_unstable(ctx => ctx.value);
|
@@ -99,6 +91,5 @@ const useRadio_unstable = (props, ref) => {
|
|
99
91
|
indicator
|
100
92
|
};
|
101
93
|
};
|
102
|
-
|
103
94
|
exports.useRadio_unstable = useRadio_unstable;
|
104
95
|
//# sourceMappingURL=useRadio.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"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","names":["useRadio_unstable","props","ref","nameGroup","RadioGroupContext_1","ctx","name","value","defaultValue","disabledGroup","disabled","layout","requiredGroup","required","checked","undefined","defaultChecked","labelPosition","onChange","nativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","root","defaultProps","react_tabster_1","input","type","id","primary","ev","currentTarget","label","htmlFor","indicator","children","React","react_icons_1","components","react_label_1","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/useRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useRadioGroupContext_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const nameGroup = useRadioGroupContext_unstable(ctx => ctx.name);\n const value = useRadioGroupContext_unstable(ctx => ctx.value);\n const defaultValue = useRadioGroupContext_unstable(ctx => ctx.defaultValue);\n const disabledGroup = useRadioGroupContext_unstable(ctx => ctx.disabled);\n const layout = useRadioGroupContext_unstable(ctx => ctx.layout);\n const requiredGroup = useRadioGroupContext_unstable(ctx => ctx.required);\n\n const {\n name = nameGroup,\n checked = value !== undefined ? value === props.value : undefined,\n defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,\n labelPosition = layout === 'horizontal-stacked' ? 'below' : 'after',\n disabled = disabledGroup,\n required = requiredGroup,\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n });\n\n const input = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n required,\n ...nativeProps.primary,\n },\n });\n\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled,\n },\n });\n\n const indicator = resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n });\n\n return {\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n label: Label,\n indicator: 'div',\n },\n root,\n input,\n label,\n indicator,\n };\n};\n"]}
|
@@ -4,24 +4,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useRadioStyles_unstable = exports.radioClassNames = void 0;
|
7
|
-
|
8
7
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
9
|
-
|
10
8
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
|
-
|
12
9
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
13
|
-
|
14
10
|
exports.radioClassNames = {
|
15
11
|
root: 'fui-Radio',
|
16
12
|
indicator: 'fui-Radio__indicator',
|
17
13
|
input: 'fui-Radio__input',
|
18
14
|
label: 'fui-Radio__label'
|
19
|
-
};
|
20
|
-
|
15
|
+
};
|
16
|
+
// The indicator size is used by the indicator and label styles
|
21
17
|
const indicatorSize = '16px';
|
22
|
-
|
23
18
|
const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("r18vxbm9", "r1631i6s", [".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r18vxbm9:focus{outline-style:none;}", ".r18vxbm9:focus-visible{outline-style:none;}", ".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1631i6s:focus{outline-style:none;}", ".r1631i6s:focus-visible{outline-style:none;}", ".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1631i6s[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
|
24
|
-
|
25
19
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
26
20
|
"vertical": {
|
27
21
|
"Beiy3e4": "f1vx9l62",
|
@@ -30,9 +24,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
30
24
|
}, {
|
31
25
|
"d": [".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;}"]
|
32
26
|
});
|
33
|
-
|
34
27
|
const useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("r9gx1vl", "r1uk1i2c", [".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r9gx1vl:enabled{cursor:pointer;}", ".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}", ".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", ".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r1uk1i2c:enabled{cursor:pointer;}", ".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}", ".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"]);
|
35
|
-
|
36
28
|
const useInputStyles = /*#__PURE__*/react_1.__styles({
|
37
29
|
"below": {
|
38
30
|
"a9b677": "fly5x3f",
|
@@ -41,10 +33,8 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
41
33
|
}, {
|
42
34
|
"d": [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
|
43
35
|
});
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
36
|
+
const useIndicatorBaseClassName = /*#__PURE__*/react_1.__resetStyles("rid4516", null, [".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}"]);
|
37
|
+
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
48
38
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
49
39
|
"base": {
|
50
40
|
"qb2dma": "f7nlbp4",
|
@@ -68,8 +58,6 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
68
58
|
/**
|
69
59
|
* Apply styling to the Radio slots based on the state
|
70
60
|
*/
|
71
|
-
|
72
|
-
|
73
61
|
const useRadioStyles_unstable = state => {
|
74
62
|
const {
|
75
63
|
labelPosition
|
@@ -83,11 +71,9 @@ const useRadioStyles_unstable = state => {
|
|
83
71
|
const indicatorBaseClassName = useIndicatorBaseClassName();
|
84
72
|
state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
|
85
73
|
const labelStyles = useLabelStyles();
|
86
|
-
|
87
74
|
if (state.label) {
|
88
75
|
state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
89
76
|
}
|
90
77
|
};
|
91
|
-
|
92
78
|
exports.useRadioStyles_unstable = useRadioStyles_unstable;
|
93
79
|
//# sourceMappingURL=useRadioStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,uBAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,SAAS,EAAE,sBAAsB;EACjCC,KAAK,EAAE,kBAAkB;EACzBC,KAAK,EAAE;CACR;AAED;AACA,MAAMC,aAAa,GAAG,MAAM;AAE5B,MAAMC,oBAAoB,gBAAGC,qBAAe,guEAI1C;AAEF,MAAMC,aAAa,gBAAGD,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK9B;AAEF,MAAME,qBAAqB,gBAAGF,qBAAe,46GAsF3C;AAEF,MAAMG,cAAc,gBAAGH,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK/B;AAEF,MAAMI,yBAAyB,gBAAGJ,qBAAe,4lBAiB/C;AAEF;AACA,MAAMK,cAAc,gBAAGL,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAmB/B;AAEF;;;AAGO,MAAMM,uBAAuB,GAAIC,KAAiB,IAAI;EAC3D,MAAM;IAAEC;EAAa,CAAE,GAAGD,KAAK;EAE/B,MAAME,iBAAiB,GAAGV,oBAAoB,EAAE;EAChD,MAAMW,UAAU,GAAGT,aAAa,EAAE;EAClCM,KAAK,CAACb,IAAI,CAACiB,SAAS,GAAGX,oBAAY,CACjCP,uBAAe,CAACC,IAAI,EACpBe,iBAAiB,EACjBD,aAAa,KAAK,OAAO,IAAIE,UAAU,CAACE,QAAQ,EAChDL,KAAK,CAACb,IAAI,CAACiB,SAAS,CACrB;EAED,MAAME,kBAAkB,GAAGX,qBAAqB,EAAE;EAClD,MAAMY,WAAW,GAAGX,cAAc,EAAE;EACpCI,KAAK,CAACX,KAAK,CAACe,SAAS,GAAGX,oBAAY,CAClCP,uBAAe,CAACG,KAAK,EACrBiB,kBAAkB,EAClBL,aAAa,KAAK,OAAO,IAAIM,WAAW,CAACC,KAAK,EAC9CR,KAAK,CAACX,KAAK,CAACe,SAAS,CACtB;EAED,MAAMK,sBAAsB,GAAGZ,yBAAyB,EAAE;EAC1DG,KAAK,CAACZ,SAAS,CAACgB,SAAS,GAAGX,oBAAY,CACtCP,uBAAe,CAACE,SAAS,EACzBqB,sBAAsB,EACtBT,KAAK,CAACZ,SAAS,CAACgB,SAAS,CAC1B;EAED,MAAMM,WAAW,GAAGZ,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACV,KAAK,EAAE;IACfU,KAAK,CAACV,KAAK,CAACc,SAAS,GAAGX,oBAAY,CAClCP,uBAAe,CAACI,KAAK,EACrBoB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,aAAa,CAAC,EAC1BD,KAAK,CAACV,KAAK,CAACc,SAAS,CACtB;;AAEL,CAAC;AArCYlB,+BAAuB","names":["exports","root","indicator","input","label","indicatorSize","useRootBaseClassName","react_1","useRootStyles","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useLabelStyles","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","vertical","inputBaseClassName","inputStyles","below","indicatorBaseClassName","labelStyles","base"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, 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\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n height: '100%',\n boxSizing: 'border-box',\n 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 borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n 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 borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n 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 borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\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 overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusCircular,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\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 rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootBaseClassName,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputBaseClassName,\n labelPosition === 'below' && inputStyles.below,\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(\n radioClassNames.indicator,\n indicatorBaseClassName,\n state.indicator.className,\n );\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"]}
|
@@ -4,21 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.RadioGroup = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const renderRadioGroup_1 = /*#__PURE__*/require("./renderRadioGroup");
|
11
|
-
|
12
9
|
const useRadioGroup_1 = /*#__PURE__*/require("./useRadioGroup");
|
13
|
-
|
14
10
|
const useRadioGroupStyles_1 = /*#__PURE__*/require("./useRadioGroupStyles");
|
15
|
-
|
16
11
|
const useRadioGroupContextValues_1 = /*#__PURE__*/require("../../contexts/useRadioGroupContextValues");
|
17
12
|
/**
|
18
13
|
* A RadioGroup component presents a set of options where only one option can be selected.
|
19
14
|
*/
|
20
|
-
|
21
|
-
|
22
15
|
exports.RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
|
23
16
|
const state = useRadioGroup_1.useRadioGroup_unstable(props, ref);
|
24
17
|
const contextValues = useRadioGroupContextValues_1.useRadioGroupContextValues(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AACA;AACA;AAEA;;;AAGaA,kBAAU,gBAAyCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGC,sCAAsB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAChD,MAAMG,aAAa,GAAGC,uDAA0B,CAACH,KAAK,CAAC;EAEvDI,kDAA4B,CAACJ,KAAK,CAAC;EACnC,OAAOK,4CAAyB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACxD,CAAC,CAAC;AAEFP,kBAAU,CAACW,WAAW,GAAG,YAAY","names":["exports","React","forwardRef","props","ref","state","useRadioGroup_1","contextValues","useRadioGroupContextValues_1","useRadioGroupStyles_1","renderRadioGroup_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx"],"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"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}
|
@@ -3,16 +3,10 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
-
|
9
7
|
tslib_1.__exportStar(require("./RadioGroup"), exports);
|
10
|
-
|
11
8
|
tslib_1.__exportStar(require("./RadioGroup.types"), exports);
|
12
|
-
|
13
9
|
tslib_1.__exportStar(require("./renderRadioGroup"), exports);
|
14
|
-
|
15
10
|
tslib_1.__exportStar(require("./useRadioGroup"), exports);
|
16
|
-
|
17
11
|
tslib_1.__exportStar(require("./useRadioGroupStyles"), exports);
|
18
12
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/index.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/index.ts"],"sourcesContent":["export * from './RadioGroup';\nexport * from './RadioGroup.types';\nexport * from './renderRadioGroup';\nexport * from './useRadioGroup';\nexport * from './useRadioGroupStyles';\n"]}
|
@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.renderRadioGroup_unstable = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
|
-
|
12
9
|
const RadioGroupContext_1 = /*#__PURE__*/require("../../contexts/RadioGroupContext");
|
13
10
|
/**
|
14
11
|
* Render the final JSX of RadioGroup
|
15
12
|
*/
|
16
|
-
|
17
|
-
|
18
13
|
const renderRadioGroup_unstable = (state, contextValues) => {
|
19
14
|
const {
|
20
15
|
slots,
|
@@ -22,9 +17,9 @@ const renderRadioGroup_unstable = (state, contextValues) => {
|
|
22
17
|
} = react_utilities_1.getSlots(state);
|
23
18
|
return React.createElement(RadioGroupContext_1.RadioGroupContext.Provider, {
|
24
19
|
value: contextValues.radioGroup
|
25
|
-
}, React.createElement(slots.root, {
|
20
|
+
}, React.createElement(slots.root, {
|
21
|
+
...slotProps.root
|
26
22
|
}));
|
27
23
|
};
|
28
|
-
|
29
24
|
exports.renderRadioGroup_unstable = renderRadioGroup_unstable;
|
30
25
|
//# sourceMappingURL=renderRadioGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;AAGO,MAAMA,yBAAyB,GAAG,CAACC,KAAsB,EAAEC,aAAsC,KAAI;EAC1G,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAkBJ,KAAK,CAAC;EAE7D,OACEK,oBAACC,qCAAiB,CAACC,QAAQ;IAACC,KAAK,EAAEP,aAAa,CAACQ;EAAU,GACzDJ,oBAACH,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,EAAI,CACP;AAEjC,CAAC;AARYC,iCAAyB","names":["renderRadioGroup_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","RadioGroupContext_1","Provider","value","radioGroup","root","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/renderRadioGroup.tsx"],"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"]}
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useRadioGroup_unstable = void 0;
|
7
|
-
|
8
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
8
|
/**
|
10
9
|
* Create the state required to render RadioGroup.
|
@@ -15,8 +14,6 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
15
14
|
* @param props - props from this instance of RadioGroup
|
16
15
|
* @param ref - reference to root HTMLElement of RadioGroup
|
17
16
|
*/
|
18
|
-
|
19
|
-
|
20
17
|
const useRadioGroup_unstable = (props, ref) => {
|
21
18
|
const generatedName = react_utilities_1.useId('radiogroup-');
|
22
19
|
const {
|
@@ -41,9 +38,7 @@ const useRadioGroup_unstable = (props, ref) => {
|
|
41
38
|
root: {
|
42
39
|
ref,
|
43
40
|
role: 'radiogroup',
|
44
|
-
...react_utilities_1.getNativeElementProps('div', props,
|
45
|
-
/*excludedPropNames:*/
|
46
|
-
['onChange', 'name']),
|
41
|
+
...react_utilities_1.getNativeElementProps('div', props, /*excludedPropNames:*/['onChange', 'name']),
|
47
42
|
onChange: react_utilities_1.useEventCallback(ev => {
|
48
43
|
if (onChange && ev.target instanceof HTMLInputElement && ev.target.type === 'radio') {
|
49
44
|
onChange(ev, {
|
@@ -54,6 +49,5 @@ const useRadioGroup_unstable = (props, ref) => {
|
|
54
49
|
}
|
55
50
|
};
|
56
51
|
};
|
57
|
-
|
58
52
|
exports.useRadioGroup_unstable = useRadioGroup_unstable;
|
59
53
|
//# sourceMappingURL=useRadioGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA8B,KAAqB;EAChH,MAAMC,aAAa,GAAGC,uBAAK,CAAC,aAAa,CAAC;EAE1C,MAAM;IAAEC,IAAI,GAAGF,aAAa;IAAEG,KAAK;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,MAAM,GAAG,UAAU;IAAEC,QAAQ;IAAEC;EAAQ,CAAE,GAAGV,KAAK;EAE9G,OAAO;IACLQ,MAAM;IACNJ,IAAI;IACJC,KAAK;IACLC,YAAY;IACZC,QAAQ;IACRG,QAAQ;IACRC,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAE;MACJX,GAAG;MACHY,IAAI,EAAE,YAAY;MAClB,GAAGV,uCAAqB,CAAC,KAAK,EAAEH,KAAK,EAAE,sBAAuB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;MACnFS,QAAQ,EAAEN,kCAAgB,CAACW,EAAE,IAAG;QAC9B,IAAIL,QAAQ,IAAIK,EAAE,CAACC,MAAM,YAAYC,gBAAgB,IAAIF,EAAE,CAACC,MAAM,CAACE,IAAI,KAAK,OAAO,EAAE;UACnFR,QAAQ,CAACK,EAAE,EAAE;YAAET,KAAK,EAAES,EAAE,CAACC,MAAM,CAACV;UAAK,CAAE,CAAC;;MAE5C,CAAC;;GAEJ;AACH,CAAC;AA1BYa,8BAAsB","names":["useRadioGroup_unstable","props","ref","generatedName","react_utilities_1","name","value","defaultValue","disabled","layout","onChange","required","components","root","role","ev","target","HTMLInputElement","type","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/useRadioGroup.ts"],"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"]}
|
@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useRadioGroupStyles_unstable = exports.radioGroupClassNames = void 0;
|
7
|
-
|
8
7
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
-
|
10
8
|
exports.radioGroupClassNames = {
|
11
9
|
root: 'fui-RadioGroup'
|
12
10
|
};
|
13
|
-
|
14
11
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
15
12
|
"root": {
|
16
13
|
"mc9l5x": "f22iagw",
|
@@ -25,12 +22,9 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
25
22
|
/**
|
26
23
|
* Apply styling to the RadioGroup slots based on the state
|
27
24
|
*/
|
28
|
-
|
29
|
-
|
30
25
|
const useRadioGroupStyles_unstable = state => {
|
31
26
|
const styles = useStyles();
|
32
27
|
state.root.className = react_1.mergeClasses(exports.radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
|
33
28
|
};
|
34
|
-
|
35
29
|
exports.useRadioGroupStyles_unstable = useRadioGroupStyles_unstable;
|
36
30
|
//# sourceMappingURL=useRadioGroupStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAIaA,4BAAoB,GAAoC;EACnEC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAS1B;AAEF;;;AAGO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAI;EACrE,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGJ,oBAAY,CACjCH,4BAAoB,CAACC,IAAI,EACzBK,MAAM,CAACL,IAAI,EACXI,KAAK,CAACG,MAAM,KAAK,UAAU,IAAIF,MAAM,CAACG,QAAQ,EAC9CJ,KAAK,CAACJ,IAAI,CAACM,SAAS,CACrB;AACH,CAAC;AARYP,oCAA4B","names":["exports","root","useStyles","react_1","useRadioGroupStyles_unstable","state","styles","className","layout","vertical"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts"],"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"]}
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.RadioGroupField = exports.radioGroupFieldClassNames = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
|
11
|
-
|
12
9
|
const RadioGroup_1 = /*#__PURE__*/require("../../RadioGroup");
|
13
|
-
|
14
10
|
exports.radioGroupFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('RadioGroupField');
|
15
11
|
exports.RadioGroupField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
16
12
|
const state = react_field_1.useField_unstable(props, ref, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAOA;AAIaA,iCAAyB,gBAAGC,gCAAkB,CAAC,iBAAiB,CAAC;AAEjED,uBAAe,gBAA8CE,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGL,+BAAiB,CAACG,KAAK,EAAEC,GAAG,EAAE;IAC1CE,SAAS,EAAEC,uBAAU;IACrBC,UAAU,EAAET,iCAAyB;IACrCU,eAAe,EAAE;GAClB,CAAC;EACFT,qCAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOL,kCAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFN,uBAAe,CAACW,WAAW,GAAG,iBAAiB","names":["exports","react_field_1","React","forwardRef","props","ref","state","component","RadioGroup_1","classNames","labelConnection","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.tsx"],"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"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroupField/index.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroupField/index.ts"],"sourcesContent":["export * from './RadioGroupField';\n"]}
|
@@ -4,18 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useRadioGroupContext_unstable = exports.RadioGroupProvider = exports.RadioGroupContext = void 0;
|
7
|
-
|
8
7
|
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
9
8
|
/**
|
10
9
|
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
11
10
|
*/
|
12
|
-
|
13
|
-
|
14
11
|
exports.RadioGroupContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
|
15
12
|
const radioGroupContextDefaultValue = {};
|
16
13
|
exports.RadioGroupProvider = exports.RadioGroupContext.Provider;
|
17
|
-
|
18
14
|
const useRadioGroupContext_unstable = selector => react_context_selector_1.useContextSelector(exports.RadioGroupContext, (ctx = radioGroupContextDefaultValue) => selector(ctx));
|
19
|
-
|
20
15
|
exports.useRadioGroupContext_unstable = useRadioGroupContext_unstable;
|
21
16
|
//# sourceMappingURL=RadioGroupContext.js.map
|