@fluentui/react-switch 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10
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 +658 -29
- package/CHANGELOG.md +209 -43
- package/MIGRATION.md +89 -22
- package/Spec.md +179 -84
- package/dist/index.d.ts +107 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.js +8 -8
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.types.js.map +1 -1
- package/lib/components/Switch/index.js.map +1 -1
- package/lib/components/Switch/renderSwitch.js +15 -9
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.js +70 -54
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +156 -248
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Switch.js +1 -1
- package/lib-commonjs/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.js +9 -9
- package/lib-commonjs/components/Switch/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.types.js.map +1 -1
- package/lib-commonjs/components/Switch/index.js +1 -1
- package/lib-commonjs/components/Switch/index.js.map +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js +19 -15
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +73 -56
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +161 -252
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/index.js +39 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +21 -27
- package/dist/react-switch.d.ts +0 -92
- package/lib/Switch.d.ts +0 -1
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -12
- package/lib/common/isConformant.js.map +0 -1
- package/lib/components/Switch/Switch.d.ts +0 -6
- package/lib/components/Switch/Switch.types.d.ts +0 -58
- package/lib/components/Switch/index.d.ts +0 -5
- package/lib/components/Switch/renderSwitch.d.ts +0 -5
- package/lib/components/Switch/useSwitch.d.ts +0 -10
- package/lib/components/Switch/useSwitchState.d.ts +0 -2
- package/lib/components/Switch/useSwitchState.js +0 -152
- package/lib/components/Switch/useSwitchState.js.map +0 -1
- package/lib/components/Switch/useSwitchStyles.d.ts +0 -5
- package/lib/index.d.ts +0 -2
- package/lib-commonjs/Switch.d.ts +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -23
- package/lib-commonjs/common/isConformant.js.map +0 -1
- package/lib-commonjs/components/Switch/Switch.d.ts +0 -6
- package/lib-commonjs/components/Switch/Switch.types.d.ts +0 -58
- package/lib-commonjs/components/Switch/index.d.ts +0 -5
- package/lib-commonjs/components/Switch/renderSwitch.d.ts +0 -5
- package/lib-commonjs/components/Switch/useSwitch.d.ts +0 -10
- package/lib-commonjs/components/Switch/useSwitchState.d.ts +0 -2
- package/lib-commonjs/components/Switch/useSwitchState.js +0 -164
- package/lib-commonjs/components/Switch/useSwitchState.js.map +0 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.d.ts +0 -5
- package/lib-commonjs/index.d.ts +0 -2
@@ -1,63 +1,79 @@
|
|
1
|
-
import
|
2
|
-
import {
|
3
|
-
import {
|
1
|
+
import * as React from 'react';
|
2
|
+
import { CircleFilled } from '@fluentui/react-icons';
|
3
|
+
import { Label } from '@fluentui/react-label';
|
4
|
+
import { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';
|
4
5
|
/**
|
5
|
-
*
|
6
|
+
* Create the state required to render Switch.
|
7
|
+
*
|
8
|
+
* The returned state can be modified with hooks such as useSwitchStyles_unstable,
|
9
|
+
* before being passed to renderSwitch_unstable.
|
10
|
+
*
|
11
|
+
* @param props - props from this instance of Switch
|
12
|
+
* @param ref - reference to `<input>` element of Switch
|
6
13
|
*/
|
7
14
|
|
8
|
-
export
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
15
|
+
export const useSwitch_unstable = (props, ref) => {
|
16
|
+
const {
|
17
|
+
checked,
|
18
|
+
defaultChecked,
|
19
|
+
disabled,
|
20
|
+
labelPosition = 'after',
|
21
|
+
onChange,
|
22
|
+
required
|
23
|
+
} = props;
|
24
|
+
const nativeProps = getPartitionedNativeProps({
|
25
|
+
props,
|
26
|
+
primarySlotTagName: 'input',
|
27
|
+
excludedPropNames: ['checked', 'defaultChecked', 'onChange']
|
28
|
+
});
|
29
|
+
const id = useId('switch-', nativeProps.primary.id);
|
30
|
+
const root = resolveShorthand(props.root, {
|
31
|
+
defaultProps: nativeProps.root,
|
32
|
+
required: true
|
33
|
+
});
|
34
|
+
const indicator = resolveShorthand(props.indicator, {
|
35
|
+
defaultProps: {
|
36
|
+
'aria-hidden': true,
|
37
|
+
children: /*#__PURE__*/React.createElement(CircleFilled, null)
|
38
|
+
},
|
39
|
+
required: true
|
40
|
+
});
|
41
|
+
const input = resolveShorthand(props.input, {
|
42
|
+
defaultProps: {
|
43
|
+
checked,
|
44
|
+
defaultChecked,
|
45
|
+
id,
|
46
|
+
ref,
|
47
|
+
role: 'switch',
|
48
|
+
type: 'checkbox',
|
49
|
+
...nativeProps.primary
|
50
|
+
},
|
51
|
+
required: true
|
52
|
+
});
|
53
|
+
input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
54
|
+
checked: ev.currentTarget.checked
|
55
|
+
}));
|
56
|
+
const label = resolveShorthand(props.label, {
|
57
|
+
defaultProps: {
|
58
|
+
disabled,
|
59
|
+
htmlFor: id,
|
60
|
+
required,
|
61
|
+
size: 'medium'
|
62
|
+
}
|
63
|
+
});
|
64
|
+
return {
|
65
|
+
labelPosition,
|
66
|
+
//Slots definition
|
33
67
|
components: {
|
34
68
|
root: 'div',
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
activeRail: 'div',
|
39
|
-
input: 'input'
|
69
|
+
indicator: 'div',
|
70
|
+
input: 'input',
|
71
|
+
label: Label
|
40
72
|
},
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
required: true
|
46
|
-
}),
|
47
|
-
thumb: resolveShorthand(thumb, {
|
48
|
-
required: true
|
49
|
-
}),
|
50
|
-
activeRail: resolveShorthand(activeRail, {
|
51
|
-
required: true
|
52
|
-
}),
|
53
|
-
input: resolveShorthand(input, {
|
54
|
-
required: true,
|
55
|
-
defaultProps: {
|
56
|
-
type: 'checkbox'
|
57
|
-
}
|
58
|
-
})
|
73
|
+
root,
|
74
|
+
indicator,
|
75
|
+
input,
|
76
|
+
label
|
59
77
|
};
|
60
|
-
useSwitchState(state);
|
61
|
-
return state;
|
62
78
|
};
|
63
79
|
//# sourceMappingURL=useSwitch.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,uBAA7B;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,EAA6D,uBAA7D,QAA4F,2BAA5F;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA,cAAX;AAA2B,IAAA,QAA3B;AAAqC,IAAA,aAAa,GAAG,OAArD;AAA8D,IAAA,QAA9D;AAAwE,IAAA;AAAxE,MAAqF,KAA3F;AAEA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;AAHyB,GAAD,CAA7C;AAMA,QAAM,EAAE,GAAG,KAAK,CAAC,SAAD,EAAY,WAAW,CAAC,OAAZ,CAAoB,EAAhC,CAAhB;AAEA,QAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACxC,IAAA,YAAY,EAAE,WAAW,CAAC,IADc;AAExC,IAAA,QAAQ,EAAE;AAF8B,GAAb,CAA7B;AAKA,QAAM,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAClD,IAAA,YAAY,EAAE;AACZ,qBAAe,IADH;AAEZ,MAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,IAAb;AAFE,KADoC;AAKlD,IAAA,QAAQ,EAAE;AALwC,GAAlB,CAAlC;AAQA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,YAAY,EAAE;AACZ,MAAA,OADY;AAEZ,MAAA,cAFY;AAGZ,MAAA,EAHY;AAIZ,MAAA,GAJY;AAKZ,MAAA,IAAI,EAAE,QALM;AAMZ,MAAA,IAAI,EAAE,UANM;AAOZ,SAAG,WAAW,CAAC;AAPH,KAD4B;AAU1C,IAAA,QAAQ,EAAE;AAVgC,GAAd,CAA9B;AAYA,EAAA,KAAK,CAAC,QAAN,GAAiB,uBAAuB,CAAC,KAAK,CAAC,QAAP,EAAiB,EAAE,IAAI,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,IAAA,OAAO,EAAE,EAAE,CAAC,aAAH,CAAiB;AAA5B,GAAP,CAA/B,CAAxC;AAEA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,YAAY,EAAE;AACZ,MAAA,QADY;AAEZ,MAAA,OAAO,EAAE,EAFG;AAGZ,MAAA,QAHY;AAIZ,MAAA,IAAI,EAAE;AAJM;AAD4B,GAAd,CAA9B;AASA,SAAO;AACL,IAAA,aADK;AAGL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,SAAS,EAAE,KAFD;AAGV,MAAA,KAAK,EAAE,OAHG;AAIV,MAAA,KAAK,EAAE;AAJG,KAJP;AAWL,IAAA,IAXK;AAYL,IAAA,SAZK;AAaL,IAAA,KAbK;AAcL,IAAA;AAdK,GAAP;AAgBD,CA/DM","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const id = useId('switch-', nativeProps.primary.id);\n\n const root = resolveShorthand(props.root, {\n defaultProps: nativeProps.root,\n required: true,\n });\n\n const indicator = resolveShorthand(props.indicator, {\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n required: true,\n });\n\n const input = resolveShorthand(props.input, {\n defaultProps: {\n checked,\n defaultChecked,\n id,\n ref,\n role: 'switch',\n type: 'checkbox',\n ...nativeProps.primary,\n },\n required: true,\n });\n input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n disabled,\n htmlFor: id,\n required,\n size: 'medium',\n },\n });\n\n return {\n labelPosition,\n\n //Slots definition\n components: {\n root: 'div',\n indicator: 'div',\n input: 'input',\n label: Label,\n },\n\n root,\n indicator,\n input,\n label,\n };\n};\n"],"sourceRoot":"../src/"}
|