@fluentui/react-checkbox 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +122 -12
- package/dist/index.d.cts +131 -0
- package/dist/index.d.ts +18 -5
- package/lib/Checkbox.js +1 -1
- package/lib/Checkbox.js.map +1 -1
- package/lib/components/Checkbox/Checkbox.js +5 -5
- package/lib/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/components/Checkbox/Checkbox.types.js +1 -1
- package/lib/components/Checkbox/Checkbox.types.js.map +1 -1
- package/lib/components/Checkbox/index.js +4 -4
- package/lib/components/Checkbox/index.js.map +1 -1
- package/lib/components/Checkbox/renderCheckbox.js +1 -1
- package/lib/components/Checkbox/renderCheckbox.js.map +1 -1
- package/lib/components/Checkbox/useCheckbox.js +57 -28
- package/lib/components/Checkbox/useCheckbox.js.map +1 -1
- package/lib/components/Checkbox/useCheckboxStyles.styles.js +7 -5
- package/lib/components/Checkbox/useCheckboxStyles.styles.js.map +1 -1
- package/lib/components/Checkbox/useCheckboxStyles.styles.raw.js +7 -4
- package/lib/components/Checkbox/useCheckboxStyles.styles.raw.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/{Checkbox.js → Checkbox.cjs} +4 -1
- package/lib-commonjs/Checkbox.cjs.map +1 -0
- package/lib-commonjs/components/Checkbox/{Checkbox.js → Checkbox.cjs} +3 -3
- package/lib-commonjs/components/Checkbox/{Checkbox.js.map → Checkbox.cjs.map} +1 -1
- package/lib-commonjs/components/Checkbox/Checkbox.types.cjs +4 -0
- package/lib-commonjs/components/Checkbox/Checkbox.types.cjs.map +1 -0
- package/lib-commonjs/components/Checkbox/{index.js → index.cjs} +7 -4
- package/lib-commonjs/components/Checkbox/index.cjs.map +1 -0
- package/lib-commonjs/components/Checkbox/renderCheckbox.cjs.map +1 -0
- package/lib-commonjs/components/Checkbox/{useCheckbox.js → useCheckbox.cjs} +56 -25
- package/lib-commonjs/components/Checkbox/useCheckbox.cjs.map +1 -0
- package/lib-commonjs/components/Checkbox/{useCheckboxStyles.styles.js → useCheckboxStyles.styles.cjs} +4 -1
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/Checkbox/{useCheckboxStyles.styles.raw.js → useCheckboxStyles.styles.raw.cjs} +4 -1
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/{index.js → index.cjs} +4 -1
- package/lib-commonjs/index.cjs.map +1 -0
- package/package.json +20 -14
- package/lib-commonjs/Checkbox.js.map +0 -1
- package/lib-commonjs/components/Checkbox/Checkbox.types.js +0 -6
- package/lib-commonjs/components/Checkbox/Checkbox.types.js.map +0 -1
- package/lib-commonjs/components/Checkbox/index.js.map +0 -1
- package/lib-commonjs/components/Checkbox/renderCheckbox.js.map +0 -1
- package/lib-commonjs/components/Checkbox/useCheckbox.js.map +0 -1
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js.map +0 -1
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/index.js.map +0 -1
- /package/lib-commonjs/components/Checkbox/{renderCheckbox.js → renderCheckbox.cjs} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,134 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-checkbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 09 Jul 2026 17:34:03 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [9.
|
|
7
|
+
## [9.74.3-experimental.esm.20260709-49ee7a20cf.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
|
|
8
8
|
|
|
9
|
-
Thu,
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.
|
|
9
|
+
Thu, 09 Jul 2026 17:34:03 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.6.3..@fluentui/react-checkbox_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
- Release 9.
|
|
15
|
-
- Bump @fluentui/react-field to v9.
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v9.
|
|
17
|
-
- Bump @fluentui/react-label to v9.
|
|
18
|
-
- Bump @fluentui/react-shared-contexts to v9.
|
|
19
|
-
- Bump @fluentui/react-tabster to v9.
|
|
20
|
-
- Bump @fluentui/react-theme to v9.
|
|
21
|
-
- Bump @fluentui/react-utilities to v9.
|
|
14
|
+
- Release 9.74.3-experimental.esm.20260709-49ee7a20cf ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
20
|
+
- Bump @fluentui/react-theme to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.6.3)
|
|
24
|
+
|
|
25
|
+
Wed, 24 Jun 2026 11:09:41 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.6.2..@fluentui/react-checkbox_v9.6.3)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
31
|
+
- fix: move Field control props to base hooks ([PR #36312](https://github.com/microsoft/fluentui/pull/36312) by dmytrokirpa@microsoft.com)
|
|
32
|
+
- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
33
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
34
|
+
- Bump @fluentui/react-label to v9.4.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
35
|
+
- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
36
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
37
|
+
|
|
38
|
+
## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.6.2)
|
|
39
|
+
|
|
40
|
+
Tue, 26 May 2026 09:39:50 GMT
|
|
41
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.6.1..@fluentui/react-checkbox_v9.6.2)
|
|
42
|
+
|
|
43
|
+
### Patches
|
|
44
|
+
|
|
45
|
+
- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
46
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
47
|
+
- Bump @fluentui/react-label to v9.4.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
48
|
+
- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
49
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
50
|
+
|
|
51
|
+
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.6.1)
|
|
52
|
+
|
|
53
|
+
Thu, 23 Apr 2026 14:21:19 GMT
|
|
54
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.6.0..@fluentui/react-checkbox_v9.6.1)
|
|
55
|
+
|
|
56
|
+
### Patches
|
|
57
|
+
|
|
58
|
+
- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
59
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
60
|
+
- Bump @fluentui/react-label to v9.4.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
61
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
62
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
63
|
+
|
|
64
|
+
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.6.0)
|
|
65
|
+
|
|
66
|
+
Wed, 01 Apr 2026 15:52:39 GMT
|
|
67
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.17..@fluentui/react-checkbox_v9.6.0)
|
|
68
|
+
|
|
69
|
+
### Minor changes
|
|
70
|
+
|
|
71
|
+
- feat: add base hooks for Checkbox ([PR #35826](https://github.com/microsoft/fluentui/pull/35826) by dmytrokirpa@microsoft.com)
|
|
72
|
+
- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
|
|
73
|
+
- Bump @fluentui/react-label to v9.4.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
|
|
74
|
+
|
|
75
|
+
## [9.5.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.17)
|
|
76
|
+
|
|
77
|
+
Thu, 26 Mar 2026 08:12:49 GMT
|
|
78
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.16..@fluentui/react-checkbox_v9.5.17)
|
|
79
|
+
|
|
80
|
+
### Patches
|
|
81
|
+
|
|
82
|
+
- fix: preserve slot onChange handler using mergeCallbacks instead of direct assignment ([PR #35877](https://github.com/microsoft/fluentui/pull/35877) by karesansui.u@gmail.com)
|
|
83
|
+
|
|
84
|
+
## [9.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.16)
|
|
85
|
+
|
|
86
|
+
Wed, 11 Mar 2026 09:22:22 GMT
|
|
87
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.15..@fluentui/react-checkbox_v9.5.16)
|
|
88
|
+
|
|
89
|
+
### Patches
|
|
90
|
+
|
|
91
|
+
- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
|
|
92
|
+
|
|
93
|
+
## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.15)
|
|
94
|
+
|
|
95
|
+
Wed, 25 Feb 2026 13:32:28 GMT
|
|
96
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.14..@fluentui/react-checkbox_v9.5.15)
|
|
97
|
+
|
|
98
|
+
### Patches
|
|
99
|
+
|
|
100
|
+
- Bump @fluentui/react-field to v9.4.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
101
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
102
|
+
- Bump @fluentui/react-label to v9.3.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
103
|
+
- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
104
|
+
- Bump @fluentui/react-tabster to v9.26.13 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
105
|
+
- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
|
|
106
|
+
|
|
107
|
+
## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.14)
|
|
108
|
+
|
|
109
|
+
Thu, 12 Feb 2026 10:46:15 GMT
|
|
110
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.13..@fluentui/react-checkbox_v9.5.14)
|
|
111
|
+
|
|
112
|
+
### Patches
|
|
113
|
+
|
|
114
|
+
- Bump @fluentui/react-field to v9.4.14 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
115
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
116
|
+
- Bump @fluentui/react-label to v9.3.14 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
117
|
+
|
|
118
|
+
## [9.5.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.13)
|
|
119
|
+
|
|
120
|
+
Thu, 22 Jan 2026 17:06:50 GMT
|
|
121
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.12..@fluentui/react-checkbox_v9.5.13)
|
|
122
|
+
|
|
123
|
+
### Patches
|
|
124
|
+
|
|
125
|
+
- Bump @fluentui/react-field to v9.4.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
126
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
127
|
+
- Bump @fluentui/react-label to v9.3.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
128
|
+
- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
129
|
+
- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
130
|
+
- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
131
|
+
- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
22
132
|
|
|
23
133
|
## [9.5.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.12)
|
|
24
134
|
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
2
|
+
import type { ComponentState } from '@fluentui/react-utilities';
|
|
3
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
4
|
+
import type { JSXElement } from '@fluentui/react-utilities';
|
|
5
|
+
import type { Label } from '@fluentui/react-label';
|
|
6
|
+
import * as React_2 from 'react';
|
|
7
|
+
import type { Slot } from '@fluentui/react-utilities';
|
|
8
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Checkboxes give people a way to select one or more items from a group,
|
|
12
|
+
* or switch between two mutually exclusive options (checked or unchecked).
|
|
13
|
+
*/
|
|
14
|
+
export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
|
|
15
|
+
|
|
16
|
+
export declare type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;
|
|
17
|
+
|
|
18
|
+
export declare type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;
|
|
19
|
+
|
|
20
|
+
export declare const checkboxClassNames: SlotClassNames<CheckboxSlots>;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Data for the onChange event for checkbox.
|
|
24
|
+
*/
|
|
25
|
+
export declare interface CheckboxOnChangeData {
|
|
26
|
+
checked: 'mixed' | boolean;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Checkbox Props
|
|
31
|
+
*/
|
|
32
|
+
export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>, 'input'>, 'checked' | 'defaultChecked' | 'onChange' | 'size'> & {
|
|
33
|
+
/**
|
|
34
|
+
* The controlled value for the checkbox.
|
|
35
|
+
*
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
checked?: 'mixed' | boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Checkboxes don't support children. To add a label, use the `label` prop.
|
|
41
|
+
*/
|
|
42
|
+
children?: never;
|
|
43
|
+
/**
|
|
44
|
+
* Whether the checkbox should be rendered as checked by default.
|
|
45
|
+
*/
|
|
46
|
+
defaultChecked?: 'mixed' | boolean;
|
|
47
|
+
/**
|
|
48
|
+
* The position of the label relative to the checkbox indicator.
|
|
49
|
+
*
|
|
50
|
+
* @default after
|
|
51
|
+
*/
|
|
52
|
+
labelPosition?: 'before' | 'after';
|
|
53
|
+
/**
|
|
54
|
+
* Callback to be called when the checked state value changes.
|
|
55
|
+
*/
|
|
56
|
+
onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
|
|
57
|
+
/**
|
|
58
|
+
* The shape of the checkbox indicator.
|
|
59
|
+
*
|
|
60
|
+
* The `circular` variant is only recommended to be used in a tasks-style UI (checklist),
|
|
61
|
+
* since it otherwise could be confused for a `RadioItem`.
|
|
62
|
+
*
|
|
63
|
+
* @default square
|
|
64
|
+
*/
|
|
65
|
+
shape?: 'square' | 'circular';
|
|
66
|
+
/**
|
|
67
|
+
* The size of the checkbox indicator.
|
|
68
|
+
*
|
|
69
|
+
* @default medium
|
|
70
|
+
*/
|
|
71
|
+
size?: 'medium' | 'large';
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export declare type CheckboxSlots = {
|
|
75
|
+
/**
|
|
76
|
+
* The root element of the Checkbox.
|
|
77
|
+
*
|
|
78
|
+
* The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.
|
|
79
|
+
* All other native props will be applied to the primary slot: `input`
|
|
80
|
+
*/
|
|
81
|
+
root: NonNullable<Slot<'span'>>;
|
|
82
|
+
/**
|
|
83
|
+
* The Checkbox's label.
|
|
84
|
+
*/
|
|
85
|
+
label?: Slot<typeof Label>;
|
|
86
|
+
/**
|
|
87
|
+
* Hidden input that handles the checkbox's functionality.
|
|
88
|
+
*
|
|
89
|
+
* This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,
|
|
90
|
+
* except `className` and `style`, which remain on the root slot.
|
|
91
|
+
*/
|
|
92
|
+
input: NonNullable<Slot<'input'>>;
|
|
93
|
+
/**
|
|
94
|
+
* The checkbox, with the checkmark icon as its child when checked.
|
|
95
|
+
*/
|
|
96
|
+
indicator: Slot<'div', 'span'>;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* State used in rendering Checkbox
|
|
101
|
+
*/
|
|
102
|
+
export declare type CheckboxState = ComponentState<CheckboxSlots> & Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;
|
|
103
|
+
|
|
104
|
+
export declare const renderCheckbox_unstable: (state: CheckboxBaseState) => JSXElement;
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* Create the state required to render Checkbox.
|
|
108
|
+
*
|
|
109
|
+
* The returned state can be modified with hooks such as useCheckboxStyles_unstable,
|
|
110
|
+
* before being passed to renderCheckbox_unstable.
|
|
111
|
+
*
|
|
112
|
+
* @param props - props from this instance of Checkbox
|
|
113
|
+
* @param ref - reference to `<input>` element of Checkbox
|
|
114
|
+
*/
|
|
115
|
+
export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,
|
|
119
|
+
* focus management, and slot structure without design props.
|
|
120
|
+
*
|
|
121
|
+
* @param props - props from this instance of Checkbox
|
|
122
|
+
* @param ref - reference to `<input>` element of Checkbox
|
|
123
|
+
*/
|
|
124
|
+
export declare const useCheckboxBase_unstable: (props: CheckboxBaseProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxBaseState;
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Apply styling to the Checkbox slots based on the state
|
|
128
|
+
*/
|
|
129
|
+
export declare const useCheckboxStyles_unstable: (state: CheckboxState) => CheckboxState;
|
|
130
|
+
|
|
131
|
+
export { }
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { ComponentProps } from '@fluentui/react-utilities';
|
|
2
|
-
import { ComponentState } from '@fluentui/react-utilities';
|
|
1
|
+
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
2
|
+
import type { ComponentState } from '@fluentui/react-utilities';
|
|
3
3
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
4
4
|
import type { JSXElement } from '@fluentui/react-utilities';
|
|
5
|
-
import { Label } from '@fluentui/react-label';
|
|
5
|
+
import type { Label } from '@fluentui/react-label';
|
|
6
6
|
import * as React_2 from 'react';
|
|
7
|
-
import { Slot } from '@fluentui/react-utilities';
|
|
7
|
+
import type { Slot } from '@fluentui/react-utilities';
|
|
8
8
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
9
9
|
|
|
10
10
|
/**
|
|
@@ -13,6 +13,10 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
13
13
|
*/
|
|
14
14
|
export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
|
|
15
15
|
|
|
16
|
+
export declare type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;
|
|
17
|
+
|
|
18
|
+
export declare type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;
|
|
19
|
+
|
|
16
20
|
export declare const checkboxClassNames: SlotClassNames<CheckboxSlots>;
|
|
17
21
|
|
|
18
22
|
/**
|
|
@@ -97,7 +101,7 @@ export declare type CheckboxSlots = {
|
|
|
97
101
|
*/
|
|
98
102
|
export declare type CheckboxState = ComponentState<CheckboxSlots> & Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;
|
|
99
103
|
|
|
100
|
-
export declare const renderCheckbox_unstable: (state:
|
|
104
|
+
export declare const renderCheckbox_unstable: (state: CheckboxBaseState) => JSXElement;
|
|
101
105
|
|
|
102
106
|
/**
|
|
103
107
|
* Create the state required to render Checkbox.
|
|
@@ -110,6 +114,15 @@ export declare const renderCheckbox_unstable: (state: CheckboxState) => JSXEleme
|
|
|
110
114
|
*/
|
|
111
115
|
export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
|
|
112
116
|
|
|
117
|
+
/**
|
|
118
|
+
* Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,
|
|
119
|
+
* focus management, and slot structure without design props.
|
|
120
|
+
*
|
|
121
|
+
* @param props - props from this instance of Checkbox
|
|
122
|
+
* @param ref - reference to `<input>` element of Checkbox
|
|
123
|
+
*/
|
|
124
|
+
export declare const useCheckboxBase_unstable: (props: CheckboxBaseProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxBaseState;
|
|
125
|
+
|
|
113
126
|
/**
|
|
114
127
|
* Apply styling to the Checkbox slots based on the state
|
|
115
128
|
*/
|
package/lib/Checkbox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable } from
|
|
1
|
+
export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable, useCheckboxBase_unstable } from "./components/Checkbox/index.js";
|
package/lib/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type {\n CheckboxOnChangeData,\n CheckboxProps,\n CheckboxSlots,\n CheckboxState,\n CheckboxBaseProps,\n CheckboxBaseState,\n} from './components/Checkbox/index';\nexport {\n Checkbox,\n checkboxClassNames,\n renderCheckbox_unstable,\n useCheckboxStyles_unstable,\n useCheckbox_unstable,\n useCheckboxBase_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","useCheckboxBase_unstable"],"mappings":"AAQA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,iCAA8B"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useCheckbox_unstable } from
|
|
4
|
-
import { renderCheckbox_unstable } from
|
|
5
|
-
import { useCheckboxStyles_unstable } from
|
|
6
|
-
import { useCustomStyleHook_unstable } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useCheckbox_unstable } from "./useCheckbox.js";
|
|
4
|
+
import { renderCheckbox_unstable } from "./renderCheckbox.js";
|
|
5
|
+
import { useCheckboxStyles_unstable } from "./useCheckboxStyles.styles.js";
|
|
6
|
+
import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
|
|
7
7
|
/**
|
|
8
8
|
* Checkboxes give people a way to select one or more items from a group,
|
|
9
9
|
* or switch between two mutually exclusive options (checked or unchecked).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n const state = useCheckbox_unstable(props, ref);\n\n useCheckboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);\n\n return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","useCheckbox_unstable","renderCheckbox_unstable","useCheckboxStyles_unstable","useCustomStyleHook_unstable","Checkbox","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n const state = useCheckbox_unstable(props, ref);\n\n useCheckboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);\n\n return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","useCheckbox_unstable","renderCheckbox_unstable","useCheckboxStyles_unstable","useCustomStyleHook_unstable","Checkbox","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,gCAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n /**\n * The root element of the Checkbox.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Checkbox's label.\n */\n label?: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the checkbox's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * The checkbox, with the checkmark icon as its child when checked.\n */\n // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n // but changing the signature would be a breaking change\n // TODO: change the default value to 'span' in the next major\n indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n ComponentProps<Partial<CheckboxSlots>, 'input'>,\n 'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n /**\n * The controlled value for the checkbox.\n *\n * @default false\n */\n checked?: 'mixed' | boolean;\n\n /**\n * Checkboxes don't support children. To add a label, use the `label` prop.\n */\n children?: never;\n\n /**\n * Whether the checkbox should be rendered as checked by default.\n */\n defaultChecked?: 'mixed' | boolean;\n\n /**\n * The position of the label relative to the checkbox indicator.\n *\n * @default after\n */\n labelPosition?: 'before' | 'after';\n\n /**\n * Callback to be called when the checked state value changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n /**\n * The shape of the checkbox indicator.\n *\n * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n * since it otherwise could be confused for a `RadioItem`.\n *\n * @default square\n */\n shape?: 'square' | 'circular';\n\n /**\n * The size of the checkbox indicator.\n *\n * @default medium\n */\n size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n /**\n * The root element of the Checkbox.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Checkbox's label.\n */\n label?: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the checkbox's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * The checkbox, with the checkmark icon as its child when checked.\n */\n // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n // but changing the signature would be a breaking change\n // TODO: change the default value to 'span' in the next major\n indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n ComponentProps<Partial<CheckboxSlots>, 'input'>,\n 'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n /**\n * The controlled value for the checkbox.\n *\n * @default false\n */\n checked?: 'mixed' | boolean;\n\n /**\n * Checkboxes don't support children. To add a label, use the `label` prop.\n */\n children?: never;\n\n /**\n * Whether the checkbox should be rendered as checked by default.\n */\n defaultChecked?: 'mixed' | boolean;\n\n /**\n * The position of the label relative to the checkbox indicator.\n *\n * @default after\n */\n labelPosition?: 'before' | 'after';\n\n /**\n * Callback to be called when the checked state value changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n /**\n * The shape of the checkbox indicator.\n *\n * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n * since it otherwise could be confused for a `RadioItem`.\n *\n * @default square\n */\n shape?: 'square' | 'circular';\n\n /**\n * The size of the checkbox indicator.\n *\n * @default medium\n */\n size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n\nexport type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;\n\nexport type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;\n"],"names":[],"mappings":"AAyGA,WAAsE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Checkbox } from
|
|
2
|
-
export { renderCheckbox_unstable } from
|
|
3
|
-
export { useCheckbox_unstable } from
|
|
4
|
-
export { checkboxClassNames, useCheckboxStyles_unstable } from
|
|
1
|
+
export { Checkbox } from "./Checkbox.js";
|
|
2
|
+
export { renderCheckbox_unstable } from "./renderCheckbox.js";
|
|
3
|
+
export { useCheckbox_unstable, useCheckboxBase_unstable } from "./useCheckbox.js";
|
|
4
|
+
export { checkboxClassNames, useCheckboxStyles_unstable } from "./useCheckboxStyles.styles.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type {\n CheckboxBaseProps,\n CheckboxBaseState,\n CheckboxOnChangeData,\n CheckboxProps,\n CheckboxSlots,\n CheckboxState,\n} from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable, useCheckboxBase_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","renderCheckbox_unstable","useCheckbox_unstable","useCheckboxBase_unstable","checkboxClassNames","useCheckboxStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAa;AAStC,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,oBAAoB,EAAEC,wBAAwB,QAAQ,mBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,gCAA6B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
-
import { assertSlots } from
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
3
|
export const renderCheckbox_unstable = (state)=>{
|
|
4
4
|
assertSlots(state);
|
|
5
5
|
return /*#__PURE__*/ _jsxs(state.root, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxBaseState): JSXElement => {\n assertSlots<CheckboxSlots>(state);\n\n return (\n <state.root>\n <state.input />\n {state.labelPosition === 'before' && state.label && <state.label />}\n {state.indicator && <state.indicator />}\n {state.labelPosition === 'after' && state.label && <state.label />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC/DJ,MAAMK,SAAS,kBAAI,KAACL,MAAMK,SAAS;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAGrE,EAAE"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useFieldControlProps_unstable } from
|
|
4
|
-
import { getPartitionedNativeProps, useControllableState,
|
|
5
|
-
import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from
|
|
6
|
-
import { Label } from
|
|
7
|
-
import { useFocusWithin } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useFieldControlProps_unstable } from "@fluentui/react-field";
|
|
4
|
+
import { getPartitionedNativeProps, useControllableState, mergeCallbacks, useId, useIsomorphicLayoutEffect, useMergedRefs, slot } from "@fluentui/react-utilities";
|
|
5
|
+
import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from "@fluentui/react-icons";
|
|
6
|
+
import { Label } from "@fluentui/react-label";
|
|
7
|
+
import { useFocusWithin } from "@fluentui/react-tabster";
|
|
8
8
|
/**
|
|
9
9
|
* Create the state required to render Checkbox.
|
|
10
10
|
*
|
|
@@ -14,13 +14,57 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
|
14
14
|
* @param props - props from this instance of Checkbox
|
|
15
15
|
* @param ref - reference to `<input>` element of Checkbox
|
|
16
16
|
*/ export const useCheckbox_unstable = (props, ref)=>{
|
|
17
|
-
'
|
|
17
|
+
const { shape = 'square', size = 'medium', ...checkboxProps } = props;
|
|
18
|
+
const state = useCheckboxBase_unstable(checkboxProps, ref);
|
|
19
|
+
// Override indicator children with size+shape-appropriate icon
|
|
20
|
+
const mixed = state.checked === 'mixed';
|
|
21
|
+
let checkmarkIcon;
|
|
22
|
+
if (mixed) {
|
|
23
|
+
if (shape === 'circular') {
|
|
24
|
+
checkmarkIcon = /*#__PURE__*/ React.createElement(CircleFilled, null);
|
|
25
|
+
} else {
|
|
26
|
+
checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Square16Filled, null) : /*#__PURE__*/ React.createElement(Square12Filled, null);
|
|
27
|
+
}
|
|
28
|
+
} else if (state.checked) {
|
|
29
|
+
checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Checkmark16Filled, null) : /*#__PURE__*/ React.createElement(Checkmark12Filled, null);
|
|
30
|
+
}
|
|
31
|
+
if (state.indicator) {
|
|
32
|
+
var _state_indicator;
|
|
33
|
+
var _children;
|
|
34
|
+
(_children = (_state_indicator = state.indicator).children) !== null && _children !== void 0 ? _children : _state_indicator.children = checkmarkIcon;
|
|
35
|
+
}
|
|
36
|
+
return {
|
|
37
|
+
shape,
|
|
38
|
+
size,
|
|
39
|
+
...state,
|
|
40
|
+
components: {
|
|
41
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
42
|
+
...state.components,
|
|
43
|
+
label: Label
|
|
44
|
+
},
|
|
45
|
+
label: slot.optional(props.label, {
|
|
46
|
+
defaultProps: {
|
|
47
|
+
...state.label,
|
|
48
|
+
size: 'medium'
|
|
49
|
+
},
|
|
50
|
+
elementType: Label
|
|
51
|
+
})
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,
|
|
56
|
+
* focus management, and slot structure without design props.
|
|
57
|
+
*
|
|
58
|
+
* @param props - props from this instance of Checkbox
|
|
59
|
+
* @param ref - reference to `<input>` element of Checkbox
|
|
60
|
+
*/ export const useCheckboxBase_unstable = (props, ref)=>{
|
|
61
|
+
'use no memo'; // justified: compiler would optimize useCheckboxBase_unstable — manual opt-out to preserve runtime behavior
|
|
18
62
|
// Merge props from surrounding <Field>, if any
|
|
19
63
|
props = useFieldControlProps_unstable(props, {
|
|
20
64
|
supportsLabelFor: true,
|
|
21
65
|
supportsRequired: true
|
|
22
66
|
});
|
|
23
|
-
const { disabled = false, required,
|
|
67
|
+
const { disabled = false, required, labelPosition = 'after', onChange } = props;
|
|
24
68
|
const [checked, setChecked] = useControllableState({
|
|
25
69
|
defaultState: props.defaultChecked,
|
|
26
70
|
state: props.checked,
|
|
@@ -32,33 +76,20 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
|
32
76
|
excludedPropNames: [
|
|
33
77
|
'checked',
|
|
34
78
|
'defaultChecked',
|
|
35
|
-
'size',
|
|
36
79
|
'onChange'
|
|
37
80
|
]
|
|
38
81
|
});
|
|
39
82
|
const mixed = checked === 'mixed';
|
|
40
83
|
const id = useId('checkbox-', nativeProps.primary.id);
|
|
41
|
-
let checkmarkIcon;
|
|
42
|
-
if (mixed) {
|
|
43
|
-
if (shape === 'circular') {
|
|
44
|
-
checkmarkIcon = /*#__PURE__*/ React.createElement(CircleFilled, null);
|
|
45
|
-
} else {
|
|
46
|
-
checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Square16Filled, null) : /*#__PURE__*/ React.createElement(Square12Filled, null);
|
|
47
|
-
}
|
|
48
|
-
} else if (checked) {
|
|
49
|
-
checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Checkmark16Filled, null) : /*#__PURE__*/ React.createElement(Checkmark12Filled, null);
|
|
50
|
-
}
|
|
51
84
|
const state = {
|
|
52
|
-
shape,
|
|
53
85
|
checked,
|
|
54
86
|
disabled,
|
|
55
|
-
size,
|
|
56
87
|
labelPosition,
|
|
57
88
|
components: {
|
|
58
89
|
root: 'span',
|
|
59
90
|
input: 'input',
|
|
60
91
|
indicator: 'div',
|
|
61
|
-
label:
|
|
92
|
+
label: 'label'
|
|
62
93
|
},
|
|
63
94
|
root: slot.always(props.root, {
|
|
64
95
|
defaultProps: {
|
|
@@ -81,21 +112,19 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
|
81
112
|
defaultProps: {
|
|
82
113
|
htmlFor: id,
|
|
83
114
|
disabled,
|
|
84
|
-
required
|
|
85
|
-
size: 'medium'
|
|
115
|
+
required
|
|
86
116
|
},
|
|
87
|
-
elementType:
|
|
117
|
+
elementType: 'label'
|
|
88
118
|
}),
|
|
89
119
|
indicator: slot.optional(props.indicator, {
|
|
90
120
|
renderByDefault: true,
|
|
91
121
|
defaultProps: {
|
|
92
|
-
'aria-hidden': true
|
|
93
|
-
children: checkmarkIcon
|
|
122
|
+
'aria-hidden': true
|
|
94
123
|
},
|
|
95
124
|
elementType: 'div'
|
|
96
125
|
})
|
|
97
126
|
};
|
|
98
|
-
state.input.onChange =
|
|
127
|
+
state.input.onChange = mergeCallbacks(state.input.onChange, (ev)=>{
|
|
99
128
|
const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
|
|
100
129
|
onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
|
101
130
|
checked: val
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n mergeCallbacks,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n Checkmark12Filled,\n Checkmark16Filled,\n Square12Filled,\n Square16Filled,\n CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n const { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n // Override indicator children with size+shape-appropriate icon\n const mixed = state.checked === 'mixed';\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = <CircleFilled />;\n } else {\n checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n }\n } else if (state.checked) {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n if (state.indicator) {\n state.indicator.children ??= checkmarkIcon;\n }\n\n return {\n shape,\n size,\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n label: Label,\n },\n label: slot.optional(props.label, {\n defaultProps: {\n ...state.label,\n size: 'medium',\n },\n elementType: Label,\n }),\n };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n props: CheckboxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n 'use no memo'; // justified: compiler would optimize useCheckboxBase_unstable — manual opt-out to preserve runtime behavior\n\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n const { disabled = false, required, labelPosition = 'after', onChange } = props;\n\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\n const state: CheckboxBaseState = {\n checked,\n disabled,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: 'label',\n },\n root: slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n }),\n input: slot.always(props.input, {\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n label: slot.optional(props.label, {\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n },\n elementType: 'label',\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n },\n elementType: 'div',\n }),\n };\n\n state.input.onChange = mergeCallbacks(state.input.onChange, ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange?.(ev, { checked: val });\n setChecked(val);\n });\n\n // Create a ref object for the input element so we can use it to set the indeterminate prop.\n // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n const inputRef = useMergedRefs(state.input.ref);\n state.input.ref = inputRef;\n\n // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = mixed;\n }\n }, [inputRef, mixed]);\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","supportsLabelFor","supportsRequired","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}
|