@fluentui/react-checkbox 9.0.0-beta.10 → 9.0.0-beta.11
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 +84 -1
- package/CHANGELOG.md +20 -2
- package/dist/react-checkbox.d.ts +7 -1
- package/lib/components/Checkbox/Checkbox.types.d.ts +1 -1
- package/lib/components/Checkbox/Checkbox.types.js.map +1 -1
- package/lib/components/Checkbox/useCheckboxStyles.d.ts +6 -1
- package/lib/components/Checkbox/useCheckboxStyles.js +35 -13
- package/lib/components/Checkbox/useCheckboxStyles.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Checkbox/Checkbox.types.d.ts +1 -1
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.d.ts +6 -1
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.js +36 -14
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +2 -1
- package/lib-commonjs/index.js +39 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -19
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,90 @@
|
|
|
2
2
|
"name": "@fluentui/react-checkbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 19 Apr 2022 19:14:26 GMT",
|
|
6
|
+
"tag": "@fluentui/react-checkbox_v9.0.0-beta.11",
|
|
7
|
+
"version": "9.0.0-beta.11",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-checkbox",
|
|
13
|
+
"commit": "086a675fd0c648944ff4048450190a0a13467de3",
|
|
14
|
+
"comment": "Add static classnames to Checkbox"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "seanmonahan@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-checkbox",
|
|
19
|
+
"commit": "80746a7f3462c2fa4ff15a92d6e196c67d652f6a",
|
|
20
|
+
"comment": "Remove star exports from react-checkbox"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "olfedias@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-checkbox",
|
|
25
|
+
"commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
|
|
26
|
+
"comment": "chore: Update Griffel to latest version"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "seanmonahan@microsoft.com",
|
|
30
|
+
"package": "@fluentui/react-checkbox",
|
|
31
|
+
"commit": "477b45728732361e02047be15de5113d1e6d01ac",
|
|
32
|
+
"comment": "Update Checkbox onChange event parameter to be of type ChangeEvent instead of type FormEvent."
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "seanmonahan@microsoft.com",
|
|
36
|
+
"package": "@fluentui/react-checkbox",
|
|
37
|
+
"commit": "bea6aecfed8612f7b0664ab8bac77c5fccee1efb",
|
|
38
|
+
"comment": "update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-checkbox",
|
|
43
|
+
"comment": "Bump @fluentui/react-label to v9.0.0-beta.10",
|
|
44
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-checkbox",
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
|
|
50
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-checkbox",
|
|
55
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
56
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-checkbox",
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
62
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-checkbox",
|
|
67
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
|
|
68
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
"none": [
|
|
72
|
+
{
|
|
73
|
+
"author": "mgodbolt@microsoft.com",
|
|
74
|
+
"package": "@fluentui/react-checkbox",
|
|
75
|
+
"commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
|
|
76
|
+
"comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"author": "elcraig@microsoft.com",
|
|
80
|
+
"package": "@fluentui/react-checkbox",
|
|
81
|
+
"commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
|
|
82
|
+
"comment": "Update React dev deps and hoist them to the repo root"
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"date": "Fri, 04 Mar 2022 05:17:35 GMT",
|
|
6
89
|
"tag": "@fluentui/react-checkbox_v9.0.0-beta.10",
|
|
7
90
|
"version": "9.0.0-beta.10",
|
|
8
91
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-checkbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 19 Apr 2022 19:14:26 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.11)
|
|
8
|
+
|
|
9
|
+
Tue, 19 Apr 2022 19:14:26 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.0-beta.10..@fluentui/react-checkbox_v9.0.0-beta.11)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Add static classnames to Checkbox ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
|
|
15
|
+
- Remove star exports from react-checkbox ([PR #22108](https://github.com/microsoft/fluentui/pull/22108) by seanmonahan@microsoft.com)
|
|
16
|
+
- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
|
|
17
|
+
- Update Checkbox onChange event parameter to be of type ChangeEvent instead of type FormEvent. ([PR #22057](https://github.com/microsoft/fluentui/pull/22057) by seanmonahan@microsoft.com)
|
|
18
|
+
- update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10 ([PR #22512](https://github.com/microsoft/fluentui/pull/22512) by seanmonahan@microsoft.com)
|
|
19
|
+
- Bump @fluentui/react-label to v9.0.0-beta.10 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
24
|
+
|
|
7
25
|
## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.10)
|
|
8
26
|
|
|
9
|
-
Fri, 04 Mar 2022 05:
|
|
27
|
+
Fri, 04 Mar 2022 05:17:35 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.0-beta.9..@fluentui/react-checkbox_v9.0.0-beta.10)
|
|
11
29
|
|
|
12
30
|
### Changes
|
package/dist/react-checkbox.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
|
4
4
|
import { Label } from '@fluentui/react-label';
|
|
5
5
|
import * as React_2 from 'react';
|
|
6
6
|
import { Slot } from '@fluentui/react-utilities';
|
|
7
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* Checkboxes give people a way to select one or more items from a group,
|
|
@@ -11,8 +12,13 @@ import { Slot } from '@fluentui/react-utilities';
|
|
|
11
12
|
*/
|
|
12
13
|
export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
|
|
13
14
|
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated Use `checkboxClassNames.root` instead.
|
|
17
|
+
*/
|
|
14
18
|
export declare const checkboxClassName = "fui-Checkbox";
|
|
15
19
|
|
|
20
|
+
export declare const checkboxClassNames: SlotClassNames<CheckboxSlots>;
|
|
21
|
+
|
|
16
22
|
declare interface CheckboxCommons {
|
|
17
23
|
/**
|
|
18
24
|
* The shape of the checkbox indicator.
|
|
@@ -61,7 +67,7 @@ export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>,
|
|
|
61
67
|
/**
|
|
62
68
|
* Callback to be called when the checked state value changes.
|
|
63
69
|
*/
|
|
64
|
-
onChange?: (ev: React_2.
|
|
70
|
+
onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
|
|
65
71
|
/**
|
|
66
72
|
* Whether the checkbox should be rendered as checked by default.
|
|
67
73
|
*/
|
|
@@ -71,7 +71,7 @@ export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>,
|
|
|
71
71
|
/**
|
|
72
72
|
* Callback to be called when the checked state value changes.
|
|
73
73
|
*/
|
|
74
|
-
onChange?: (ev: React.
|
|
74
|
+
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
|
|
75
75
|
/**
|
|
76
76
|
* Whether the checkbox should be rendered as checked by default.
|
|
77
77
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.js","sourceRoot":"../src/","sources":["components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\ninterface CheckboxCommons {\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 * @defaultvalue square\n */\n shape: 'square' | 'circular';\n\n /**\n * The controlled value for the checkbox.\n *\n * @defaultvalue false\n */\n checked: 'mixed' | boolean;\n\n /**\n * The size of the checkbox indicator.\n *\n * @defaultvalue medium\n */\n size: 'medium' | 'large';\n\n /**\n * The position of the label relative to the checkbox indicator.\n *\n * @defaultvalue after\n */\n labelPosition: 'before' | 'after';\n}\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n checked: 'mixed' | boolean;\n}\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 indicator: Slot<'div'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n ComponentProps<Partial<CheckboxSlots>, 'input'>,\n 'size' | 'checked' | 'defaultChecked' | 'onChange'\n> &\n Partial<CheckboxCommons> & {\n /**\n * Checkboxes don't support children. To add a label, use the `label` prop.\n */\n children?: never;\n\n /**\n * Callback to be called when the checked state value changes.\n */\n onChange?: (ev: React.
|
|
1
|
+
{"version":3,"file":"Checkbox.types.js","sourceRoot":"../src/","sources":["components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\ninterface CheckboxCommons {\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 * @defaultvalue square\n */\n shape: 'square' | 'circular';\n\n /**\n * The controlled value for the checkbox.\n *\n * @defaultvalue false\n */\n checked: 'mixed' | boolean;\n\n /**\n * The size of the checkbox indicator.\n *\n * @defaultvalue medium\n */\n size: 'medium' | 'large';\n\n /**\n * The position of the label relative to the checkbox indicator.\n *\n * @defaultvalue after\n */\n labelPosition: 'before' | 'after';\n}\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n checked: 'mixed' | boolean;\n}\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 indicator: Slot<'div'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n ComponentProps<Partial<CheckboxSlots>, 'input'>,\n 'size' | 'checked' | 'defaultChecked' | 'onChange'\n> &\n Partial<CheckboxCommons> & {\n /**\n * Checkboxes don't support children. To add a label, use the `label` prop.\n */\n children?: never;\n\n /**\n * Callback to be called when the checked state value changes.\n */\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n /**\n * Whether the checkbox should be rendered as checked by default.\n */\n defaultChecked?: 'mixed' | boolean;\n };\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;\n"]}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import { CheckboxState } from './Checkbox.types';
|
|
1
|
+
import { CheckboxSlots, CheckboxState } from './Checkbox.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `checkboxClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const checkboxClassName = "fui-Checkbox";
|
|
7
|
+
export declare const checkboxClassNames: SlotClassNames<CheckboxSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the Checkbox slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { shorthands, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
3
3
|
import { tokens } from '@fluentui/react-theme';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `checkboxClassNames.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
|
|
4
8
|
export const checkboxClassName = 'fui-Checkbox';
|
|
5
|
-
const
|
|
6
|
-
|
|
9
|
+
export const checkboxClassNames = {
|
|
10
|
+
root: 'fui-Checkbox',
|
|
11
|
+
label: 'fui-Checkbox__label',
|
|
12
|
+
input: 'fui-Checkbox__input',
|
|
13
|
+
indicator: 'fui-Checkbox__indicator'
|
|
14
|
+
}; // TODO replace these spacing constants with theme values once they're on the theme
|
|
7
15
|
|
|
8
16
|
const spacingHorizontalS = '8px';
|
|
9
17
|
const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
|
|
@@ -21,23 +29,37 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
21
29
|
"Byoj8tv": "f150uoa4",
|
|
22
30
|
"uwmqm3": ["f177v4lu", "f19lj068"],
|
|
23
31
|
"B486eqv": "f2hkw1w",
|
|
24
|
-
"
|
|
32
|
+
"vchsgm": "fbiesyy",
|
|
33
|
+
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
34
|
+
"B7lelfh": "f1il7mou",
|
|
35
|
+
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
25
36
|
"B8vm7ur": "f12sql3b",
|
|
26
37
|
"f4hv8x": "f1i4q40k",
|
|
27
38
|
"Gpan81": "fcrbge9",
|
|
28
|
-
"z7afg": "ft464mn",
|
|
29
39
|
"rsjj6t": "fskqmiq",
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
40
|
+
"E86f5s": "f1kbdjx9",
|
|
41
|
+
"f5nhos": ["fw1d893", "fpuz8dn"],
|
|
42
|
+
"Bhtq6h7": "f14hlsw1",
|
|
43
|
+
"Bubk9yy": ["fpuz8dn", "fw1d893"],
|
|
44
|
+
"dzajus": "f1bkt4b4",
|
|
45
|
+
"B8gmrwi": ["f16hf5f2", "f1qhqcal"],
|
|
46
|
+
"Byq6oy9": "fyyqeim",
|
|
47
|
+
"Bdy2j38": ["f1qhqcal", "f16hf5f2"],
|
|
48
|
+
"Bi8bqab": ["f1aneyfs", "f15nmyc0"],
|
|
49
|
+
"kq6z4e": ["f15nmyc0", "f1aneyfs"],
|
|
50
|
+
"l5tc3q": ["f3cpy5b", "f13v6kgv"],
|
|
51
|
+
"d1z3ck": ["f13v6kgv", "f3cpy5b"],
|
|
52
|
+
"epcuuz": "filx0we",
|
|
53
|
+
"Ba33l6n": ["f1horip2", "fgnx9ah"],
|
|
54
|
+
"va7z1g": "fkii2tb",
|
|
55
|
+
"Bmi6mq9": ["fgnx9ah", "f1horip2"],
|
|
34
56
|
"Bjkpy09": "f1unftzx",
|
|
35
57
|
"Jxg1p8": "f8rjbh6",
|
|
36
58
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
37
59
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
38
60
|
}
|
|
39
61
|
}, {
|
|
40
|
-
"d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .
|
|
62
|
+
"d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
|
|
41
63
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
42
64
|
});
|
|
43
65
|
|
|
@@ -190,19 +212,19 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
190
212
|
|
|
191
213
|
export const useCheckboxStyles_unstable = state => {
|
|
192
214
|
const rootStyles = useRootStyles();
|
|
193
|
-
state.root.className = mergeClasses(
|
|
215
|
+
state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);
|
|
194
216
|
const inputStyles = useInputStyles();
|
|
195
|
-
state.input.className = mergeClasses(inputStyles.base, state.input.className);
|
|
217
|
+
state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);
|
|
196
218
|
const indicatorStyles = useIndicatorStyles();
|
|
197
219
|
|
|
198
220
|
if (state.indicator) {
|
|
199
|
-
state.indicator.className = mergeClasses(
|
|
221
|
+
state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
|
|
200
222
|
}
|
|
201
223
|
|
|
202
224
|
const labelStyles = useLabelStyles();
|
|
203
225
|
|
|
204
226
|
if (state.label) {
|
|
205
|
-
state.label.className = mergeClasses(
|
|
227
|
+
state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[state.size], state.label.className);
|
|
206
228
|
}
|
|
207
229
|
|
|
208
230
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;
|
|
1
|
+
{"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `checkboxClassNames.root` instead.\n */\nexport const checkboxClassName = 'fui-Checkbox';\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n base: {\n position: 'relative',\n display: 'inline-flex',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n cursor: 'pointer',\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n width: indicatorSizeMedium,\n height: indicatorSizeMedium,\n fontSize: '12px',\n },\n\n large: {\n width: indicatorSizeLarge,\n height: indicatorSizeLarge,\n fontSize: '16px',\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n cursor: 'inherit',\n color: 'inherit',\n },\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 Checkbox, but preserves line height if the label wraps.\n medium: {\n ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n large: {\n ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[state.size],\n state.shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[state.size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { Checkbox, checkboxClassName, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable, } from './Checkbox';
|
|
2
|
+
export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE;AACA,iBAHF,EAIE,kBAJF,EAKE,uBALF,EAME,0BANF,EAOE,oBAPF,QAQO,YARP","sourcesContent":["export {\n Checkbox,\n // eslint-disable-next-line deprecation/deprecation\n checkboxClassName,\n checkboxClassNames,\n renderCheckbox_unstable,\n useCheckboxStyles_unstable,\n useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n"],"sourceRoot":"../src/"}
|
|
@@ -71,7 +71,7 @@ export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>,
|
|
|
71
71
|
/**
|
|
72
72
|
* Callback to be called when the checked state value changes.
|
|
73
73
|
*/
|
|
74
|
-
onChange?: (ev: React.
|
|
74
|
+
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
|
|
75
75
|
/**
|
|
76
76
|
* Whether the checkbox should be rendered as checked by default.
|
|
77
77
|
*/
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import { CheckboxState } from './Checkbox.types';
|
|
1
|
+
import { CheckboxSlots, CheckboxState } from './Checkbox.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `checkboxClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const checkboxClassName = "fui-Checkbox";
|
|
7
|
+
export declare const checkboxClassNames: SlotClassNames<CheckboxSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the Checkbox slots based on the state
|
|
5
10
|
*/
|
|
@@ -3,17 +3,25 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCheckboxStyles_unstable = exports.checkboxClassName = void 0;
|
|
6
|
+
exports.useCheckboxStyles_unstable = exports.checkboxClassNames = exports.checkboxClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
11
|
|
|
12
12
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `checkboxClassNames.root` instead.
|
|
15
|
+
*/
|
|
16
|
+
|
|
13
17
|
|
|
14
18
|
exports.checkboxClassName = 'fui-Checkbox';
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
exports.checkboxClassNames = {
|
|
20
|
+
root: 'fui-Checkbox',
|
|
21
|
+
label: 'fui-Checkbox__label',
|
|
22
|
+
input: 'fui-Checkbox__input',
|
|
23
|
+
indicator: 'fui-Checkbox__indicator'
|
|
24
|
+
}; // TODO replace these spacing constants with theme values once they're on the theme
|
|
17
25
|
|
|
18
26
|
const spacingHorizontalS = '8px';
|
|
19
27
|
const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
|
|
@@ -31,23 +39,37 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
31
39
|
"Byoj8tv": "f150uoa4",
|
|
32
40
|
"uwmqm3": ["f177v4lu", "f19lj068"],
|
|
33
41
|
"B486eqv": "f2hkw1w",
|
|
34
|
-
"
|
|
42
|
+
"vchsgm": "fbiesyy",
|
|
43
|
+
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
44
|
+
"B7lelfh": "f1il7mou",
|
|
45
|
+
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
35
46
|
"B8vm7ur": "f12sql3b",
|
|
36
47
|
"f4hv8x": "f1i4q40k",
|
|
37
48
|
"Gpan81": "fcrbge9",
|
|
38
|
-
"z7afg": "ft464mn",
|
|
39
49
|
"rsjj6t": "fskqmiq",
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
50
|
+
"E86f5s": "f1kbdjx9",
|
|
51
|
+
"f5nhos": ["fw1d893", "fpuz8dn"],
|
|
52
|
+
"Bhtq6h7": "f14hlsw1",
|
|
53
|
+
"Bubk9yy": ["fpuz8dn", "fw1d893"],
|
|
54
|
+
"dzajus": "f1bkt4b4",
|
|
55
|
+
"B8gmrwi": ["f16hf5f2", "f1qhqcal"],
|
|
56
|
+
"Byq6oy9": "fyyqeim",
|
|
57
|
+
"Bdy2j38": ["f1qhqcal", "f16hf5f2"],
|
|
58
|
+
"Bi8bqab": ["f1aneyfs", "f15nmyc0"],
|
|
59
|
+
"kq6z4e": ["f15nmyc0", "f1aneyfs"],
|
|
60
|
+
"l5tc3q": ["f3cpy5b", "f13v6kgv"],
|
|
61
|
+
"d1z3ck": ["f13v6kgv", "f3cpy5b"],
|
|
62
|
+
"epcuuz": "filx0we",
|
|
63
|
+
"Ba33l6n": ["f1horip2", "fgnx9ah"],
|
|
64
|
+
"va7z1g": "fkii2tb",
|
|
65
|
+
"Bmi6mq9": ["fgnx9ah", "f1horip2"],
|
|
44
66
|
"Bjkpy09": "f1unftzx",
|
|
45
67
|
"Jxg1p8": "f8rjbh6",
|
|
46
68
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
47
69
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
48
70
|
}
|
|
49
71
|
}, {
|
|
50
|
-
"d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .
|
|
72
|
+
"d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
|
|
51
73
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
52
74
|
});
|
|
53
75
|
|
|
@@ -200,19 +222,19 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
|
200
222
|
|
|
201
223
|
const useCheckboxStyles_unstable = state => {
|
|
202
224
|
const rootStyles = useRootStyles();
|
|
203
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
225
|
+
state.root.className = react_1.mergeClasses(exports.checkboxClassNames.root, rootStyles.base, state.root.className);
|
|
204
226
|
const inputStyles = useInputStyles();
|
|
205
|
-
state.input.className = react_1.mergeClasses(inputStyles.base, state.input.className);
|
|
227
|
+
state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputStyles.base, state.input.className);
|
|
206
228
|
const indicatorStyles = useIndicatorStyles();
|
|
207
229
|
|
|
208
230
|
if (state.indicator) {
|
|
209
|
-
state.indicator.className = react_1.mergeClasses(
|
|
231
|
+
state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
|
|
210
232
|
}
|
|
211
233
|
|
|
212
234
|
const labelStyles = useLabelStyles();
|
|
213
235
|
|
|
214
236
|
if (state.label) {
|
|
215
|
-
state.label.className = react_1.mergeClasses(
|
|
237
|
+
state.label.className = react_1.mergeClasses(exports.checkboxClassNames.label, labelStyles.base, labelStyles[state.size], state.label.className);
|
|
216
238
|
}
|
|
217
239
|
|
|
218
240
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `checkboxClassNames.root` instead.\n */\nexport const checkboxClassName = 'fui-Checkbox';\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n base: {\n position: 'relative',\n display: 'inline-flex',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n cursor: 'pointer',\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n width: indicatorSizeMedium,\n height: indicatorSizeMedium,\n fontSize: '12px',\n },\n\n large: {\n width: indicatorSizeLarge,\n height: indicatorSizeLarge,\n fontSize: '16px',\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n cursor: 'inherit',\n color: 'inherit',\n },\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 Checkbox, but preserves line height if the label wraps.\n medium: {\n ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n large: {\n ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[state.size],\n state.shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[state.size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { Checkbox, checkboxClassName, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable, } from './Checkbox';
|
|
2
|
+
export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,8 +3,45 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.useCheckbox_unstable = exports.useCheckboxStyles_unstable = exports.renderCheckbox_unstable = exports.checkboxClassNames = exports.checkboxClassName = exports.Checkbox = void 0;
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
var Checkbox_1 = /*#__PURE__*/require("./Checkbox");
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
Object.defineProperty(exports, "Checkbox", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return Checkbox_1.Checkbox;
|
|
14
|
+
}
|
|
15
|
+
}); // eslint-disable-next-line deprecation/deprecation
|
|
16
|
+
|
|
17
|
+
Object.defineProperty(exports, "checkboxClassName", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () {
|
|
20
|
+
return Checkbox_1.checkboxClassName;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
Object.defineProperty(exports, "checkboxClassNames", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () {
|
|
26
|
+
return Checkbox_1.checkboxClassNames;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, "renderCheckbox_unstable", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () {
|
|
32
|
+
return Checkbox_1.renderCheckbox_unstable;
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
Object.defineProperty(exports, "useCheckboxStyles_unstable", {
|
|
36
|
+
enumerable: true,
|
|
37
|
+
get: function () {
|
|
38
|
+
return Checkbox_1.useCheckboxStyles_unstable;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
Object.defineProperty(exports, "useCheckbox_unstable", {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () {
|
|
44
|
+
return Checkbox_1.useCheckbox_unstable;
|
|
45
|
+
}
|
|
46
|
+
});
|
|
10
47
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,QAAA;AAAQ;AAAR,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,0BAAA;AAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA","sourcesContent":["export {\n Checkbox,\n // eslint-disable-next-line deprecation/deprecation\n checkboxClassName,\n checkboxClassNames,\n renderCheckbox_unstable,\n useCheckboxStyles_unstable,\n useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-checkbox",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.11",
|
|
4
4
|
"description": "Fluent UI checkbox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,26 +27,16 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
-
"@fluentui/scripts": "^1.0.0"
|
|
32
|
-
"@types/enzyme": "3.10.3",
|
|
33
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
34
|
-
"@types/react": "16.9.42",
|
|
35
|
-
"@types/react-dom": "16.9.10",
|
|
36
|
-
"@types/react-test-renderer": "^16.0.0",
|
|
37
|
-
"enzyme": "~3.10.0",
|
|
38
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
|
39
|
-
"react": "16.8.6",
|
|
40
|
-
"react-dom": "16.8.6",
|
|
41
|
-
"react-test-renderer": "^16.3.0"
|
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.4",
|
|
31
|
+
"@fluentui/scripts": "^1.0.0"
|
|
42
32
|
},
|
|
43
33
|
"dependencies": {
|
|
44
|
-
"@fluentui/react-icons": "^2.0.
|
|
45
|
-
"@fluentui/react-label": "9.0.0-beta.
|
|
46
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
47
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
48
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
49
|
-
"@griffel/react": "1.0.
|
|
34
|
+
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
35
|
+
"@fluentui/react-label": "9.0.0-beta.10",
|
|
36
|
+
"@fluentui/react-tabster": "9.0.0-rc.6",
|
|
37
|
+
"@fluentui/react-theme": "9.0.0-rc.5",
|
|
38
|
+
"@fluentui/react-utilities": "9.0.0-rc.6",
|
|
39
|
+
"@griffel/react": "1.0.3",
|
|
50
40
|
"tslib": "^2.1.0"
|
|
51
41
|
},
|
|
52
42
|
"peerDependencies": {
|