@fluentui/react-checkbox 9.1.35 → 9.1.37
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 +103 -1
- package/CHANGELOG.md +32 -2
- package/lib/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/components/Checkbox/renderCheckbox.js +9 -2
- package/lib/components/Checkbox/renderCheckbox.js.map +1 -1
- package/lib/components/Checkbox/useCheckbox.js +3 -2
- package/lib/components/Checkbox/useCheckbox.js.map +1 -1
- package/lib/components/Checkbox/useCheckboxStyles.styles.js.map +1 -1
- package/lib-commonjs/Checkbox.js +2 -2
- package/lib-commonjs/Checkbox.js.map +1 -1
- package/lib-commonjs/components/Checkbox/Checkbox.js +9 -7
- package/lib-commonjs/components/Checkbox/Checkbox.js.map +1 -1
- package/lib-commonjs/components/Checkbox/Checkbox.types.js +2 -2
- package/lib-commonjs/components/Checkbox/Checkbox.types.js.map +1 -1
- package/lib-commonjs/components/Checkbox/index.js +6 -6
- package/lib-commonjs/components/Checkbox/index.js.map +1 -1
- package/lib-commonjs/components/Checkbox/renderCheckbox.js +15 -6
- package/lib-commonjs/components/Checkbox/renderCheckbox.js.map +1 -1
- package/lib-commonjs/components/Checkbox/useCheckbox.js +30 -27
- package/lib-commonjs/components/Checkbox/useCheckbox.js.map +1 -1
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js +14 -10
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js.map +1 -1
- package/lib-commonjs/index.js +16 -6
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +13 -13
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,109 @@
|
|
|
2
2
|
"name": "@fluentui/react-checkbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue,
|
|
5
|
+
"date": "Tue, 05 Sep 2023 15:35:07 GMT",
|
|
6
|
+
"tag": "@fluentui/react-checkbox_v9.1.37",
|
|
7
|
+
"version": "9.1.37",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-checkbox",
|
|
13
|
+
"comment": "Bump @fluentui/react-field to v9.1.24",
|
|
14
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-checkbox",
|
|
19
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.5",
|
|
20
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-checkbox",
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v9.1.32",
|
|
26
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-checkbox",
|
|
31
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.7",
|
|
32
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-checkbox",
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.2",
|
|
38
|
+
"commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Tue, 05 Sep 2023 13:29:18 GMT",
|
|
45
|
+
"tag": "@fluentui/react-checkbox_v9.1.36",
|
|
46
|
+
"version": "9.1.36",
|
|
47
|
+
"comments": {
|
|
48
|
+
"patch": [
|
|
49
|
+
{
|
|
50
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
51
|
+
"package": "@fluentui/react-checkbox",
|
|
52
|
+
"commit": "eea6d93a62249ba4fba3347fb291c67ee1a3fb24",
|
|
53
|
+
"comment": "chore: migrate package to use JSX importSource"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
57
|
+
"package": "@fluentui/react-checkbox",
|
|
58
|
+
"commit": "b93c2ac22355b6cb6f33dd509c6cd9c21f4fffc8",
|
|
59
|
+
"comment": "bumps @swc/helpers version to 0.5.1"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-checkbox",
|
|
64
|
+
"comment": "Bump @fluentui/react-field to v9.1.23",
|
|
65
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-checkbox",
|
|
70
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.4",
|
|
71
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-checkbox",
|
|
76
|
+
"comment": "Bump @fluentui/react-label to v9.1.31",
|
|
77
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-checkbox",
|
|
82
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.7.3",
|
|
83
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-checkbox",
|
|
88
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.6",
|
|
89
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-checkbox",
|
|
94
|
+
"comment": "Bump @fluentui/react-theme to v9.1.12",
|
|
95
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-checkbox",
|
|
100
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.1",
|
|
101
|
+
"commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"date": "Tue, 29 Aug 2023 12:57:36 GMT",
|
|
6
108
|
"tag": "@fluentui/react-checkbox_v9.1.35",
|
|
7
109
|
"version": "9.1.35",
|
|
8
110
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,42 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-checkbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 05 Sep 2023 15:35:07 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.37)
|
|
8
|
+
|
|
9
|
+
Tue, 05 Sep 2023 15:35:07 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.36..@fluentui/react-checkbox_v9.1.37)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-field to v9.1.24 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.5 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v9.1.32 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.12.7 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.13.2 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.1.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.36)
|
|
21
|
+
|
|
22
|
+
Tue, 05 Sep 2023 13:29:18 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.35..@fluentui/react-checkbox_v9.1.36)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- chore: migrate package to use JSX importSource ([PR #28959](https://github.com/microsoft/fluentui/pull/28959) by bernardo.sunderhus@gmail.com)
|
|
28
|
+
- bumps @swc/helpers version to 0.5.1 ([PR #28989](https://github.com/microsoft/fluentui/pull/28989) by bernardo.sunderhus@gmail.com)
|
|
29
|
+
- Bump @fluentui/react-field to v9.1.23 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
30
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.4 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
31
|
+
- Bump @fluentui/react-label to v9.1.31 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
32
|
+
- Bump @fluentui/react-shared-contexts to v9.7.3 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.12.6 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
34
|
+
- Bump @fluentui/react-theme to v9.1.12 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
35
|
+
- Bump @fluentui/react-utilities to v9.13.1 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
|
|
36
|
+
|
|
7
37
|
## [9.1.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.35)
|
|
8
38
|
|
|
9
|
-
Tue, 29 Aug 2023 12:
|
|
39
|
+
Tue, 29 Aug 2023 12:57:36 GMT
|
|
10
40
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.34..@fluentui/react-checkbox_v9.1.35)
|
|
11
41
|
|
|
12
42
|
### Patches
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.tsx"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC
|
|
1
|
+
{"version":3,"sources":["Checkbox.tsx"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;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,6 +1,13 @@
|
|
|
1
|
-
/** @jsxRuntime
|
|
1
|
+
/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots } from '@fluentui/react-utilities';
|
|
3
3
|
export const renderCheckbox_unstable = (state)=>{
|
|
4
4
|
assertSlots(state);
|
|
5
|
-
return /*#__PURE__*/
|
|
5
|
+
return /*#__PURE__*/ _jsxs(state.root, {
|
|
6
|
+
children: [
|
|
7
|
+
/*#__PURE__*/ _jsx(state.input, {}),
|
|
8
|
+
state.labelPosition === 'before' && state.label && /*#__PURE__*/ _jsx(state.label, {}),
|
|
9
|
+
/*#__PURE__*/ _jsx(state.indicator, {}),
|
|
10
|
+
state.labelPosition === 'after' && state.label && /*#__PURE__*/ _jsx(state.label, {})
|
|
11
|
+
]
|
|
12
|
+
});
|
|
6
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime
|
|
1
|
+
{"version":3,"sources":["renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n assertSlots<CheckboxSlots>(state);\n\n return (\n <state.root>\n <state.input />\n {state.labelPosition === 'before' && state.label && <state.label />}\n <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;AAGxD,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;0BAChE,KAACJ,MAAMK,SAAS;YACfL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAGrE,EAAE"}
|
|
@@ -18,7 +18,7 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
|
18
18
|
supportsLabelFor: true,
|
|
19
19
|
supportsRequired: true
|
|
20
20
|
});
|
|
21
|
-
const { disabled =false
|
|
21
|
+
const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;
|
|
22
22
|
const [checked, setChecked] = useControllableState({
|
|
23
23
|
defaultState: props.defaultChecked,
|
|
24
24
|
state: props.checked,
|
|
@@ -94,8 +94,9 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
|
94
94
|
})
|
|
95
95
|
};
|
|
96
96
|
state.input.onChange = useEventCallback((ev)=>{
|
|
97
|
+
var _onChange;
|
|
97
98
|
const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
|
|
98
|
-
onChange === null ||
|
|
99
|
+
(_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(ev, {
|
|
99
100
|
checked: val
|
|
100
101
|
});
|
|
101
102
|
setChecked(val);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { 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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n const { disabled = false, required, shape = 'square', size = 'medium', 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', 'size', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\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 (checked) {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n disabled,\n size,\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 size: 'medium', // Even if the checkbox itself is large\n },\n elementType: Label,\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n elementType: 'div',\n }),\n };\n\n state.input.onChange = useEventCallback(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","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","components","root","input","indicator","label","always","defaultProps","elementType","type","optional","htmlFor","renderByDefault","children","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SACEC,yBAAyB,EACzBC,oBAAoB,EACpBC,gBAAgB,EAChBC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AAEnC,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACdC,YAAY,QACP,wBAAwB;AAC/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,QAAQ,0BAA0B;AAEzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC
|
|
1
|
+
{"version":3,"sources":["useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { 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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n const { disabled = false, required, shape = 'square', size = 'medium', 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', 'size', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\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 (checked) {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n disabled,\n size,\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 size: 'medium', // Even if the checkbox itself is large\n },\n elementType: Label,\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n elementType: 'div',\n }),\n };\n\n state.input.onChange = useEventCallback(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","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","components","root","input","indicator","label","always","defaultProps","elementType","type","optional","htmlFor","renderByDefault","children","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useRootStyles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n cursor: 'pointer',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover)\n }\n },\n ':active': {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed)\n }\n }\n },\n checked: {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n ':hover': {\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover)\n }\n },\n ':active': {\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed)\n }\n }\n },\n mixed: {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1\n },\n ':hover': {\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover\n }\n },\n ':active': {\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n }\n },\n disabled: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [`> .${checkboxClassNames.indicator}`]: {\n color: 'GrayText'\n }\n }\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0\n },\n after: {\n left: 0\n },\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n border: tokens.strokeWidthThin + ' solid ' + tokens.colorNeutralStrokeAccessible,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'inherit',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS)\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n const { checked , disabled , labelPosition , shape , size } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useRootStyles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n cursor: 'pointer',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover)\n }\n },\n ':active': {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed)\n }\n }\n },\n checked: {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n ':hover': {\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover)\n }\n },\n ':active': {\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed)\n }\n }\n },\n mixed: {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1\n },\n ':hover': {\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover\n }\n },\n ':active': {\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n }\n },\n disabled: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [`> .${checkboxClassNames.indicator}`]: {\n color: 'GrayText'\n }\n }\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0\n },\n after: {\n left: 0\n },\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n border: tokens.strokeWidthThin + ' solid ' + tokens.colorNeutralStrokeAccessible,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'inherit',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS)\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n const { checked, disabled, labelPosition, shape, size } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"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"}
|
package/lib-commonjs/Checkbox.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
const
|
|
6
|
-
|
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
|
6
|
+
_export_star._(require("./components/Checkbox/index"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.js"],"sourcesContent":["export * from './components/Checkbox/index';\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["Checkbox.js"],"sourcesContent":["export * from './components/Checkbox/index';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
|
@@ -4,18 +4,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
Object.defineProperty(exports, "Checkbox", {
|
|
6
6
|
enumerable: true,
|
|
7
|
-
get: ()
|
|
7
|
+
get: function() {
|
|
8
|
+
return Checkbox;
|
|
9
|
+
}
|
|
8
10
|
});
|
|
9
|
-
const
|
|
10
|
-
const _react = /*#__PURE__*/
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
11
13
|
const _useCheckbox = require("./useCheckbox");
|
|
12
14
|
const _renderCheckbox = require("./renderCheckbox");
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
+
const _useCheckboxStylesstyles = require("./useCheckboxStyles.styles");
|
|
16
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
15
17
|
const Checkbox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
16
18
|
const state = (0, _useCheckbox.useCheckbox_unstable)(props, ref);
|
|
17
|
-
(0,
|
|
18
|
-
(0,
|
|
19
|
+
(0, _useCheckboxStylesstyles.useCheckboxStyles_unstable)(state);
|
|
20
|
+
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCheckboxStyles_unstable')(state);
|
|
19
21
|
return (0, _renderCheckbox.renderCheckbox_unstable)(state);
|
|
20
22
|
});
|
|
21
23
|
Checkbox.displayName = 'Checkbox';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.js"],"sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 */ export const Checkbox = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useCheckbox_unstable(props, ref);\n useCheckboxStyles_unstable(state);\n useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);\n return renderCheckbox_unstable(state);\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","forwardRef","props","ref","state","useCheckbox_unstable","useCheckboxStyles_unstable","useCustomStyleHook_unstable","renderCheckbox_unstable","displayName"],"mappings":";;;;+BAQiBA
|
|
1
|
+
{"version":3,"sources":["Checkbox.js"],"sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 */ export const Checkbox = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useCheckbox_unstable(props, ref);\n useCheckboxStyles_unstable(state);\n useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);\n return renderCheckbox_unstable(state);\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","forwardRef","props","ref","state","useCheckbox_unstable","useCheckboxStyles_unstable","useCustomStyleHook_unstable","renderCheckbox_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;6BACc;gCACG;yCACG;qCACC;AAIjC,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/D,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1CG,IAAAA,mDAA0B,EAACF;IAC3BG,IAAAA,gDAA2B,EAAC,8BAA8BH;IAC1D,OAAOI,IAAAA,uCAAuB,EAACJ;AACnC;AACAL,SAASU,WAAW,GAAG"}
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
const
|
|
6
|
-
const _react = /*#__PURE__*/
|
|
5
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
6
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["Checkbox.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
|
6
|
+
_export_star._(require("./Checkbox"), exports);
|
|
7
|
+
_export_star._(require("./Checkbox.types"), exports);
|
|
8
|
+
_export_star._(require("./renderCheckbox"), exports);
|
|
9
|
+
_export_star._(require("./useCheckbox"), exports);
|
|
10
|
+
_export_star._(require("./useCheckboxStyles.styles"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles.styles';\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -1,14 +1,23 @@
|
|
|
1
|
-
/** @jsxRuntime
|
|
1
|
+
/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ "use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
5
|
Object.defineProperty(exports, "renderCheckbox_unstable", {
|
|
6
6
|
enumerable: true,
|
|
7
|
-
get: ()
|
|
7
|
+
get: function() {
|
|
8
|
+
return renderCheckbox_unstable;
|
|
9
|
+
}
|
|
8
10
|
});
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
+
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
11
13
|
const renderCheckbox_unstable = (state)=>{
|
|
12
|
-
(0,
|
|
13
|
-
return /*#__PURE__*/ (0,
|
|
14
|
+
(0, _reactutilities.assertSlots)(state);
|
|
15
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
|
|
16
|
+
children: [
|
|
17
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
|
|
18
|
+
state.labelPosition === 'before' && state.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {}),
|
|
19
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.indicator, {}),
|
|
20
|
+
state.labelPosition === 'after' && state.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {})
|
|
21
|
+
]
|
|
22
|
+
});
|
|
14
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderCheckbox.js"],"sourcesContent":["/** @jsxRuntime
|
|
1
|
+
{"version":3,"sources":["renderCheckbox.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nexport const renderCheckbox_unstable = (state)=>{\n assertSlots(state);\n return /*#__PURE__*/ _jsxs(state.root, {\n children: [\n /*#__PURE__*/ _jsx(state.input, {}),\n state.labelPosition === 'before' && state.label && /*#__PURE__*/ _jsx(state.label, {}),\n /*#__PURE__*/ _jsx(state.indicator, {}),\n state.labelPosition === 'after' && state.label && /*#__PURE__*/ _jsx(state.label, {})\n ]\n });\n};\n"],"names":["renderCheckbox_unstable","state","assertSlots","_jsxs","root","children","_jsx","input","labelPosition","label","indicator"],"mappings":"AAAA,0BAA0B,GAAG,iDAAiD;;;;+BAEjEA;;;eAAAA;;;4BAF+G;gCAChG;AACrB,MAAMA,0BAA0B,CAACC;IACpCC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACnCC,UAAU;YACN,WAAW,GAAGC,IAAAA,eAAI,EAACL,MAAMM,KAAK,EAAE,CAAC;YACjCN,MAAMO,aAAa,KAAK,YAAYP,MAAMQ,KAAK,IAAI,WAAW,GAAGH,IAAAA,eAAI,EAACL,MAAMQ,KAAK,EAAE,CAAC;YACpF,WAAW,GAAGH,IAAAA,eAAI,EAACL,MAAMS,SAAS,EAAE,CAAC;YACrCT,MAAMO,aAAa,KAAK,WAAWP,MAAMQ,KAAK,IAAI,WAAW,GAAGH,IAAAA,eAAI,EAACL,MAAMQ,KAAK,EAAE,CAAC;SACtF;IACL;AACJ"}
|
|
@@ -4,28 +4,30 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
Object.defineProperty(exports, "useCheckbox_unstable", {
|
|
6
6
|
enumerable: true,
|
|
7
|
-
get: ()
|
|
7
|
+
get: function() {
|
|
8
|
+
return useCheckbox_unstable;
|
|
9
|
+
}
|
|
8
10
|
});
|
|
9
|
-
const
|
|
10
|
-
const _react = /*#__PURE__*/
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
+
const _reactfield = require("@fluentui/react-field");
|
|
14
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
+
const _reacticons = require("@fluentui/react-icons");
|
|
16
|
+
const _reactlabel = require("@fluentui/react-label");
|
|
17
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
|
16
18
|
const useCheckbox_unstable = (props, ref)=>{
|
|
17
19
|
// Merge props from surrounding <Field>, if any
|
|
18
|
-
props = (0,
|
|
20
|
+
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
|
|
19
21
|
supportsLabelFor: true,
|
|
20
22
|
supportsRequired: true
|
|
21
23
|
});
|
|
22
|
-
const { disabled =false
|
|
23
|
-
const [checked, setChecked] = (0,
|
|
24
|
+
const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;
|
|
25
|
+
const [checked, setChecked] = (0, _reactutilities.useControllableState)({
|
|
24
26
|
defaultState: props.defaultChecked,
|
|
25
27
|
state: props.checked,
|
|
26
28
|
initialState: false
|
|
27
29
|
});
|
|
28
|
-
const nativeProps = (0,
|
|
30
|
+
const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
|
|
29
31
|
props,
|
|
30
32
|
primarySlotTagName: 'input',
|
|
31
33
|
excludedPropNames: [
|
|
@@ -36,16 +38,16 @@ const useCheckbox_unstable = (props, ref)=>{
|
|
|
36
38
|
]
|
|
37
39
|
});
|
|
38
40
|
const mixed = checked === 'mixed';
|
|
39
|
-
const id = (0,
|
|
41
|
+
const id = (0, _reactutilities.useId)('checkbox-', nativeProps.primary.id);
|
|
40
42
|
let checkmarkIcon;
|
|
41
43
|
if (mixed) {
|
|
42
44
|
if (shape === 'circular') {
|
|
43
|
-
checkmarkIcon = /*#__PURE__*/ _react.createElement(
|
|
45
|
+
checkmarkIcon = /*#__PURE__*/ _react.createElement(_reacticons.CircleFilled, null);
|
|
44
46
|
} else {
|
|
45
|
-
checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(
|
|
47
|
+
checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reacticons.Square16Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Square12Filled, null);
|
|
46
48
|
}
|
|
47
49
|
} else if (checked) {
|
|
48
|
-
checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(
|
|
50
|
+
checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reacticons.Checkmark16Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Checkmark12Filled, null);
|
|
49
51
|
}
|
|
50
52
|
const state = {
|
|
51
53
|
shape,
|
|
@@ -57,16 +59,16 @@ const useCheckbox_unstable = (props, ref)=>{
|
|
|
57
59
|
root: 'span',
|
|
58
60
|
input: 'input',
|
|
59
61
|
indicator: 'div',
|
|
60
|
-
label:
|
|
62
|
+
label: _reactlabel.Label
|
|
61
63
|
},
|
|
62
|
-
root:
|
|
64
|
+
root: _reactutilities.slot.always(props.root, {
|
|
63
65
|
defaultProps: {
|
|
64
|
-
ref: (0,
|
|
66
|
+
ref: (0, _reacttabster.useFocusWithin)(),
|
|
65
67
|
...nativeProps.root
|
|
66
68
|
},
|
|
67
69
|
elementType: 'span'
|
|
68
70
|
}),
|
|
69
|
-
input:
|
|
71
|
+
input: _reactutilities.slot.always(props.input, {
|
|
70
72
|
defaultProps: {
|
|
71
73
|
type: 'checkbox',
|
|
72
74
|
id,
|
|
@@ -76,16 +78,16 @@ const useCheckbox_unstable = (props, ref)=>{
|
|
|
76
78
|
},
|
|
77
79
|
elementType: 'input'
|
|
78
80
|
}),
|
|
79
|
-
label:
|
|
81
|
+
label: _reactutilities.slot.optional(props.label, {
|
|
80
82
|
defaultProps: {
|
|
81
83
|
htmlFor: id,
|
|
82
84
|
disabled,
|
|
83
85
|
required,
|
|
84
86
|
size: 'medium'
|
|
85
87
|
},
|
|
86
|
-
elementType:
|
|
88
|
+
elementType: _reactlabel.Label
|
|
87
89
|
}),
|
|
88
|
-
indicator:
|
|
90
|
+
indicator: _reactutilities.slot.optional(props.indicator, {
|
|
89
91
|
renderByDefault: true,
|
|
90
92
|
defaultProps: {
|
|
91
93
|
'aria-hidden': true,
|
|
@@ -94,20 +96,21 @@ const useCheckbox_unstable = (props, ref)=>{
|
|
|
94
96
|
elementType: 'div'
|
|
95
97
|
})
|
|
96
98
|
};
|
|
97
|
-
state.input.onChange = (0,
|
|
99
|
+
state.input.onChange = (0, _reactutilities.useEventCallback)((ev)=>{
|
|
100
|
+
var _onChange;
|
|
98
101
|
const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
|
|
99
|
-
onChange === null ||
|
|
102
|
+
(_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(ev, {
|
|
100
103
|
checked: val
|
|
101
104
|
});
|
|
102
105
|
setChecked(val);
|
|
103
106
|
});
|
|
104
107
|
// Create a ref object for the input element so we can use it to set the indeterminate prop.
|
|
105
108
|
// Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
|
|
106
|
-
const inputRef = (0,
|
|
109
|
+
const inputRef = (0, _reactutilities.useMergedRefs)(state.input.ref);
|
|
107
110
|
state.input.ref = inputRef;
|
|
108
111
|
// Set the <input> element's checked and indeterminate properties based on our tri-state property.
|
|
109
112
|
// Since indeterminate can only be set via javascript, it has to be done in a layout effect.
|
|
110
|
-
(0,
|
|
113
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
111
114
|
if (inputRef.current) {
|
|
112
115
|
inputRef.current.indeterminate = mixed;
|
|
113
116
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCheckbox.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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 */ export const useCheckbox_unstable = (props, ref)=>{\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true\n });\n const { disabled =false
|
|
1
|
+
{"version":3,"sources":["useCheckbox.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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 */ export const useCheckbox_unstable = (props, ref)=>{\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true\n });\n const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false\n });\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: [\n 'checked',\n 'defaultChecked',\n 'size',\n 'onChange'\n ]\n });\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = /*#__PURE__*/ React.createElement(CircleFilled, null);\n } else {\n checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Square16Filled, null) : /*#__PURE__*/ React.createElement(Square12Filled, null);\n }\n } else if (checked) {\n checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Checkmark16Filled, null) : /*#__PURE__*/ React.createElement(Checkmark12Filled, null);\n }\n const state = {\n shape,\n checked,\n disabled,\n size,\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(),\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 size: 'medium'\n },\n elementType: Label\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon\n },\n elementType: 'div'\n })\n };\n state.input.onChange = useEventCallback((ev)=>{\n var _onChange;\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(ev, {\n checked: val\n });\n setChecked(val);\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 // 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 }, [\n inputRef,\n mixed\n ]);\n return state;\n};\n"],"names":["useCheckbox_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","useControllableState","defaultState","defaultChecked","state","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","mixed","id","useId","primary","checkmarkIcon","React","createElement","CircleFilled","Square16Filled","Square12Filled","Checkmark16Filled","Checkmark12Filled","components","root","input","indicator","label","Label","slot","always","defaultProps","useFocusWithin","elementType","type","optional","htmlFor","renderByDefault","children","useEventCallback","ev","_onChange","val","currentTarget","indeterminate","inputRef","useMergedRefs","useIsomorphicLayoutEffect","current"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;4BACuB;gCAC2F;4BACtC;4BAC7E;8BACS;AASpB,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAA6B,EAACF,OAAO;QACzCG,kBAAkB;QAClBC,kBAAkB;IACtB;IACA,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAE,GAAGV;IAC7G,MAAM,CAACW,SAASC,WAAW,GAAGC,IAAAA,oCAAoB,EAAC;QAC/CC,cAAcd,MAAMe,cAAc;QAClCC,OAAOhB,MAAMW,OAAO;QACpBM,cAAc;IAClB;IACA,MAAMC,cAAcC,IAAAA,yCAAyB,EAAC;QAC1CnB;QACAoB,oBAAoB;QACpBC,mBAAmB;YACf;YACA;YACA;YACA;SACH;IACL;IACA,MAAMC,QAAQX,YAAY;IAC1B,MAAMY,KAAKC,IAAAA,qBAAK,EAAC,aAAaN,YAAYO,OAAO,CAACF,EAAE;IACpD,IAAIG;IACJ,IAAIJ,OAAO;QACP,IAAIf,UAAU,YAAY;YACtBmB,gBAAgB,WAAW,GAAGC,OAAMC,aAAa,CAACC,wBAAY,EAAE;QACpE,OAAO;YACHH,gBAAgBlB,SAAS,UAAU,WAAW,GAAGmB,OAAMC,aAAa,CAACE,0BAAc,EAAE,QAAQ,WAAW,GAAGH,OAAMC,aAAa,CAACG,0BAAc,EAAE;QACnJ;IACJ,OAAO,IAAIpB,SAAS;QAChBe,gBAAgBlB,SAAS,UAAU,WAAW,GAAGmB,OAAMC,aAAa,CAACI,6BAAiB,EAAE,QAAQ,WAAW,GAAGL,OAAMC,aAAa,CAACK,6BAAiB,EAAE;IACzJ;IACA,MAAMjB,QAAQ;QACVT;QACAI;QACAN;QACAG;QACAC;QACAyB,YAAY;YACRC,MAAM;YACNC,OAAO;YACPC,WAAW;YACXC,OAAOC,iBAAK;QAChB;QACAJ,MAAMK,oBAAI,CAACC,MAAM,CAACzC,MAAMmC,IAAI,EAAE;YAC1BO,cAAc;gBACVzC,KAAK0C,IAAAA,4BAAc;gBACnB,GAAGzB,YAAYiB,IAAI;YACvB;YACAS,aAAa;QACjB;QACAR,OAAOI,oBAAI,CAACC,MAAM,CAACzC,MAAMoC,KAAK,EAAE;YAC5BM,cAAc;gBACVG,MAAM;gBACNtB;gBACAtB;gBACAU,SAASA,YAAY;gBACrB,GAAGO,YAAYO,OAAO;YAC1B;YACAmB,aAAa;QACjB;QACAN,OAAOE,oBAAI,CAACM,QAAQ,CAAC9C,MAAMsC,KAAK,EAAE;YAC9BI,cAAc;gBACVK,SAASxB;gBACTlB;gBACAC;gBACAE,MAAM;YACV;YACAoC,aAAaL,iBAAK;QACtB;QACAF,WAAWG,oBAAI,CAACM,QAAQ,CAAC9C,MAAMqC,SAAS,EAAE;YACtCW,iBAAiB;YACjBN,cAAc;gBACV,eAAe;gBACfO,UAAUvB;YACd;YACAkB,aAAa;QACjB;IACJ;IACA5B,MAAMoB,KAAK,CAAC1B,QAAQ,GAAGwC,IAAAA,gCAAgB,EAAC,CAACC;QACrC,IAAIC;QACJ,MAAMC,MAAMF,GAAGG,aAAa,CAACC,aAAa,GAAG,UAAUJ,GAAGG,aAAa,CAAC3C,OAAO;QAC9EyC,CAAAA,YAAY1C,QAAO,MAAO,QAAQ0C,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUD,IAAI;YAC7ExC,SAAS0C;QACb;QACAzC,WAAWyC;IACf;IACA,4FAA4F;IAC5F,sFAAsF;IACtF,MAAMG,WAAWC,IAAAA,6BAAa,EAACzC,MAAMoB,KAAK,CAACnC,GAAG;IAC9Ce,MAAMoB,KAAK,CAACnC,GAAG,GAAGuD;IAClB,kGAAkG;IAClG,4FAA4F;IAC5FE,IAAAA,yCAAyB,EAAC;QACtB,IAAIF,SAASG,OAAO,EAAE;YAClBH,SAASG,OAAO,CAACJ,aAAa,GAAGjC;QACrC;IACJ,GAAG;QACCkC;QACAlC;KACH;IACD,OAAON;AACX"}
|
|
@@ -9,8 +9,12 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
checkboxClassNames: ()
|
|
13
|
-
|
|
12
|
+
checkboxClassNames: function() {
|
|
13
|
+
return checkboxClassNames;
|
|
14
|
+
},
|
|
15
|
+
useCheckboxStyles_unstable: function() {
|
|
16
|
+
return useCheckboxStyles_unstable;
|
|
17
|
+
}
|
|
14
18
|
});
|
|
15
19
|
const _react = require("@griffel/react");
|
|
16
20
|
const checkboxClassNames = {
|
|
@@ -22,7 +26,7 @@ const checkboxClassNames = {
|
|
|
22
26
|
// The indicator size is used by the indicator and label styles
|
|
23
27
|
const indicatorSizeMedium = '16px';
|
|
24
28
|
const indicatorSizeLarge = '20px';
|
|
25
|
-
const useRootBaseClassName = /*#__PURE__*/ (0, _react
|
|
29
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1qaeuiq", "rm0k3vm", [
|
|
26
30
|
".r1qaeuiq{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}",
|
|
27
31
|
".r1qaeuiq:focus{outline-style:none;}",
|
|
28
32
|
".r1qaeuiq:focus-visible{outline-style:none;}",
|
|
@@ -34,7 +38,7 @@ const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r1qaeui
|
|
|
34
38
|
".rm0k3vm[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
35
39
|
".rm0k3vm[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
|
|
36
40
|
]);
|
|
37
|
-
const useRootStyles = /*#__PURE__*/ (0, _react
|
|
41
|
+
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
38
42
|
unchecked: {
|
|
39
43
|
Bi91k9c: "f3p8bqa",
|
|
40
44
|
ns3gzv: "ffqb913",
|
|
@@ -220,10 +224,10 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
|
220
224
|
]
|
|
221
225
|
]
|
|
222
226
|
});
|
|
223
|
-
const useInputBaseClassName = /*#__PURE__*/ (0, _react
|
|
227
|
+
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("ruo9svu", null, [
|
|
224
228
|
".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}"
|
|
225
229
|
]);
|
|
226
|
-
const useInputStyles = /*#__PURE__*/ (0, _react
|
|
230
|
+
const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
227
231
|
before: {
|
|
228
232
|
j35jbq: [
|
|
229
233
|
"f1e31b4d",
|
|
@@ -246,10 +250,10 @@ const useInputStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
|
246
250
|
".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"
|
|
247
251
|
]
|
|
248
252
|
});
|
|
249
|
-
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react
|
|
253
|
+
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rrh91wr", null, [
|
|
250
254
|
".rrh91wr{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"
|
|
251
255
|
]);
|
|
252
|
-
const useIndicatorStyles = /*#__PURE__*/ (0, _react
|
|
256
|
+
const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
253
257
|
large: {
|
|
254
258
|
Be2twd7: "f4ybsrx",
|
|
255
259
|
Bqenvij: "fjamq6b",
|
|
@@ -285,7 +289,7 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
|
285
289
|
]
|
|
286
290
|
});
|
|
287
291
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
288
|
-
const useLabelStyles = /*#__PURE__*/ (0, _react
|
|
292
|
+
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
289
293
|
base: {
|
|
290
294
|
qb2dma: "f7nlbp4",
|
|
291
295
|
sj55zd: "f1ym3bx4",
|
|
@@ -339,7 +343,7 @@ const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
|
339
343
|
]
|
|
340
344
|
});
|
|
341
345
|
const useCheckboxStyles_unstable = (state)=>{
|
|
342
|
-
const { checked
|
|
346
|
+
const { checked, disabled, labelPosition, shape, size } = state;
|
|
343
347
|
const rootBaseClassName = useRootBaseClassName();
|
|
344
348
|
const rootStyles = useRootStyles();
|
|
345
349
|
state.root.className = (0, _react.mergeClasses)(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1qaeuiq\", \"rm0k3vm\", [\".r1qaeuiq{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r1qaeuiq:focus{outline-style:none;}\", \".r1qaeuiq:focus-visible{outline-style:none;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rm0k3vm{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".rm0k3vm:focus{outline-style:none;}\", \".rm0k3vm:focus-visible{outline-style:none;}\", \".rm0k3vm[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rm0k3vm[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n unchecked: {\n Bi91k9c: \"f3p8bqa\",\n ns3gzv: \"ffqb913\",\n n5iecx: [\"f42z0vd\", \"f1j37kh1\"],\n Bq2lx2j: \"f10v6cc1\",\n Bv7p3up: [\"f1j37kh1\", \"f42z0vd\"],\n lj723h: \"f1r2dosr\",\n B6u2zzw: \"f1oarbgq\",\n Be5wueo: [\"fo8gord\", \"f18ci1af\"],\n Cgwcxn: \"fviagcr\",\n Btnvhkj: [\"f18ci1af\", \"fo8gord\"]\n },\n checked: {\n sj55zd: \"f19n0e5\",\n Bvs3sgl: \"f5opsb9\",\n opw9sb: \"fpaw01r\",\n C5wppx: \"f1gqj827\",\n B32epof: [\"fub94a2\", \"f13mj44e\"],\n Bphahg7: \"f1qq5vh1\",\n Jctw66: [\"f13mj44e\", \"fub94a2\"],\n Bq0zqd5: \"f5x9vvn\",\n ns3gzv: \"fub8hyy\",\n n5iecx: [\"fffzknn\", \"f172bh4s\"],\n Bq2lx2j: \"f6tipb1\",\n Bv7p3up: [\"f172bh4s\", \"fffzknn\"],\n Bgesukf: \"f8adco2\",\n B6u2zzw: \"f1lepnt8\",\n Be5wueo: [\"f80ygm0\", \"frrkusm\"],\n Cgwcxn: \"f1gg953z\",\n Btnvhkj: [\"frrkusm\", \"f80ygm0\"]\n },\n mixed: {\n sj55zd: \"f19n0e5\",\n C5wppx: \"f12fgbth\",\n B32epof: [\"f171e6fm\", \"fttsnhr\"],\n Bphahg7: \"f1fyk1ks\",\n Jctw66: [\"fttsnhr\", \"f171e6fm\"],\n opw9sb: \"fvvg2h8\",\n ns3gzv: \"f1nlwys0\",\n n5iecx: [\"f1bhstg2\", \"f6tsdgz\"],\n Bq2lx2j: \"fqxbw9v\",\n Bv7p3up: [\"f6tsdgz\", \"f1bhstg2\"],\n cc1l3s: \"f1r38qqt\",\n B6u2zzw: \"f12q3i2l\",\n Be5wueo: [\"f9g1hxu\", \"f1o4ic5t\"],\n Cgwcxn: \"f1c3thm1\",\n Btnvhkj: [\"f1o4ic5t\", \"f9g1hxu\"],\n km5s60: \"ffd07pq\"\n },\n disabled: {\n Bceei9c: \"f158kwzp\",\n sj55zd: \"f1s2aq7o\",\n C5wppx: \"fgiuqeu\",\n B32epof: [\"f1q4sfkt\", \"f71co73\"],\n Bphahg7: \"f1u7lsiy\",\n Jctw66: [\"f71co73\", \"f1q4sfkt\"],\n opw9sb: \"f3vxa14\",\n Bbusuzp: \"f1dcs8yz\",\n B7bxudy: \"f1lmtjkn\"\n }\n}, {\n h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".ffqb913:hover>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f42z0vd:hover>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f1j37kh1:hover>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f10v6cc1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f5x9vvn:hover>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}\", \".fub8hyy:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}\", \".fffzknn:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}\", \".f172bh4s:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}\", \".f6tipb1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}\", \".f1nlwys0:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}\", \".f1bhstg2:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}\", \".f6tsdgz:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}\", \".fqxbw9v:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}\", \".f1r38qqt:hover>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}\"],\n a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1oarbgq:active>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fo8gord:active>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f18ci1af:active>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fviagcr:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f8adco2:active>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1lepnt8:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f80ygm0:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}\", \".frrkusm:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1gg953z:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f12q3i2l:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}\", \".f9g1hxu:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}\", \".f1o4ic5t:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}\", \".f1c3thm1:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".ffd07pq:active>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}\"],\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f5opsb9>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}\", \".fpaw01r>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}\", \".f1gqj827>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}\", \".fub94a2>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}\", \".f13mj44e>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}\", \".f1qq5vh1>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}\", \".f12fgbth>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}\", \".f171e6fm>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}\", \".fttsnhr>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}\", \".f1fyk1ks>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}\", \".fvvg2h8>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fgiuqeu>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f1q4sfkt>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".f71co73>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f1u7lsiy>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}\", \".f3vxa14>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1lmtjkn>.fui-Checkbox__indicator{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"ruo9svu\", null, [\".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n before: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"]\n },\n after: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"]\n },\n large: {\n a9b677: \"f1mq5jt6\"\n }\n}, {\n d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rrh91wr\", null, [\".rrh91wr{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n large: {\n Be2twd7: \"f4ybsrx\",\n Bqenvij: \"fjamq6b\",\n a9b677: \"f64fuq3\"\n },\n circular: {\n Bbmb7ep: [\"f8fbkgy\", \"f1nfllo7\"],\n Beyfa6y: [\"f1nfllo7\", \"f8fbkgy\"],\n B7oj6ja: [\"f1djnp8u\", \"f1s8kh49\"],\n Btl43ni: [\"f1s8kh49\", \"f1djnp8u\"]\n }\n}, {\n d: [\".f4ybsrx{font-size:16px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n qb2dma: \"f7nlbp4\",\n sj55zd: \"f1ym3bx4\",\n Bceei9c: \"fpo1scq\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n before: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n medium: {\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n large: {\n B6of3ja: \"f1xlvstr\",\n jrapky: \"f49ad5g\"\n }\n}, {\n d: [\".f7nlbp4{align-self:center;}\", \".f1ym3bx4{color:inherit;}\", \".fpo1scq{cursor:inherit;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}\"]\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = state => {\n const {\n checked,\n disabled,\n labelPosition,\n shape,\n size\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useCheckboxStyles.styles.js.map"],"names":["checkboxClassNames","useCheckboxStyles_unstable","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","useRootStyles","__styles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1qaeuiq\", \"rm0k3vm\", [\".r1qaeuiq{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r1qaeuiq:focus{outline-style:none;}\", \".r1qaeuiq:focus-visible{outline-style:none;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rm0k3vm{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".rm0k3vm:focus{outline-style:none;}\", \".rm0k3vm:focus-visible{outline-style:none;}\", \".rm0k3vm[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rm0k3vm[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n unchecked: {\n Bi91k9c: \"f3p8bqa\",\n ns3gzv: \"ffqb913\",\n n5iecx: [\"f42z0vd\", \"f1j37kh1\"],\n Bq2lx2j: \"f10v6cc1\",\n Bv7p3up: [\"f1j37kh1\", \"f42z0vd\"],\n lj723h: \"f1r2dosr\",\n B6u2zzw: \"f1oarbgq\",\n Be5wueo: [\"fo8gord\", \"f18ci1af\"],\n Cgwcxn: \"fviagcr\",\n Btnvhkj: [\"f18ci1af\", \"fo8gord\"]\n },\n checked: {\n sj55zd: \"f19n0e5\",\n Bvs3sgl: \"f5opsb9\",\n opw9sb: \"fpaw01r\",\n C5wppx: \"f1gqj827\",\n B32epof: [\"fub94a2\", \"f13mj44e\"],\n Bphahg7: \"f1qq5vh1\",\n Jctw66: [\"f13mj44e\", \"fub94a2\"],\n Bq0zqd5: \"f5x9vvn\",\n ns3gzv: \"fub8hyy\",\n n5iecx: [\"fffzknn\", \"f172bh4s\"],\n Bq2lx2j: \"f6tipb1\",\n Bv7p3up: [\"f172bh4s\", \"fffzknn\"],\n Bgesukf: \"f8adco2\",\n B6u2zzw: \"f1lepnt8\",\n Be5wueo: [\"f80ygm0\", \"frrkusm\"],\n Cgwcxn: \"f1gg953z\",\n Btnvhkj: [\"frrkusm\", \"f80ygm0\"]\n },\n mixed: {\n sj55zd: \"f19n0e5\",\n C5wppx: \"f12fgbth\",\n B32epof: [\"f171e6fm\", \"fttsnhr\"],\n Bphahg7: \"f1fyk1ks\",\n Jctw66: [\"fttsnhr\", \"f171e6fm\"],\n opw9sb: \"fvvg2h8\",\n ns3gzv: \"f1nlwys0\",\n n5iecx: [\"f1bhstg2\", \"f6tsdgz\"],\n Bq2lx2j: \"fqxbw9v\",\n Bv7p3up: [\"f6tsdgz\", \"f1bhstg2\"],\n cc1l3s: \"f1r38qqt\",\n B6u2zzw: \"f12q3i2l\",\n Be5wueo: [\"f9g1hxu\", \"f1o4ic5t\"],\n Cgwcxn: \"f1c3thm1\",\n Btnvhkj: [\"f1o4ic5t\", \"f9g1hxu\"],\n km5s60: \"ffd07pq\"\n },\n disabled: {\n Bceei9c: \"f158kwzp\",\n sj55zd: \"f1s2aq7o\",\n C5wppx: \"fgiuqeu\",\n B32epof: [\"f1q4sfkt\", \"f71co73\"],\n Bphahg7: \"f1u7lsiy\",\n Jctw66: [\"f71co73\", \"f1q4sfkt\"],\n opw9sb: \"f3vxa14\",\n Bbusuzp: \"f1dcs8yz\",\n B7bxudy: \"f1lmtjkn\"\n }\n}, {\n h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".ffqb913:hover>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f42z0vd:hover>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f1j37kh1:hover>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f10v6cc1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f5x9vvn:hover>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}\", \".fub8hyy:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}\", \".fffzknn:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}\", \".f172bh4s:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}\", \".f6tipb1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}\", \".f1nlwys0:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}\", \".f1bhstg2:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}\", \".f6tsdgz:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}\", \".fqxbw9v:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}\", \".f1r38qqt:hover>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}\"],\n a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1oarbgq:active>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fo8gord:active>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f18ci1af:active>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fviagcr:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f8adco2:active>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1lepnt8:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f80ygm0:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}\", \".frrkusm:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1gg953z:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f12q3i2l:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}\", \".f9g1hxu:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}\", \".f1o4ic5t:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}\", \".f1c3thm1:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".ffd07pq:active>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}\"],\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f5opsb9>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}\", \".fpaw01r>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}\", \".f1gqj827>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}\", \".fub94a2>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}\", \".f13mj44e>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}\", \".f1qq5vh1>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}\", \".f12fgbth>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}\", \".f171e6fm>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}\", \".fttsnhr>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}\", \".f1fyk1ks>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}\", \".fvvg2h8>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fgiuqeu>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f1q4sfkt>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".f71co73>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f1u7lsiy>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}\", \".f3vxa14>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1lmtjkn>.fui-Checkbox__indicator{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"ruo9svu\", null, [\".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n before: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"]\n },\n after: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"]\n },\n large: {\n a9b677: \"f1mq5jt6\"\n }\n}, {\n d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rrh91wr\", null, [\".rrh91wr{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n large: {\n Be2twd7: \"f4ybsrx\",\n Bqenvij: \"fjamq6b\",\n a9b677: \"f64fuq3\"\n },\n circular: {\n Bbmb7ep: [\"f8fbkgy\", \"f1nfllo7\"],\n Beyfa6y: [\"f1nfllo7\", \"f8fbkgy\"],\n B7oj6ja: [\"f1djnp8u\", \"f1s8kh49\"],\n Btl43ni: [\"f1s8kh49\", \"f1djnp8u\"]\n }\n}, {\n d: [\".f4ybsrx{font-size:16px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n qb2dma: \"f7nlbp4\",\n sj55zd: \"f1ym3bx4\",\n Bceei9c: \"fpo1scq\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n before: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n medium: {\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n large: {\n B6of3ja: \"f1xlvstr\",\n jrapky: \"f49ad5g\"\n }\n}, {\n d: [\".f7nlbp4{align-self:center;}\", \".f1ym3bx4{color:inherit;}\", \".fpo1scq{cursor:inherit;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}\"]\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = state => {\n const {\n checked,\n disabled,\n labelPosition,\n shape,\n size\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useCheckboxStyles.styles.js.map"],"names":["checkboxClassNames","useCheckboxStyles_unstable","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","useRootStyles","__styles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -9,10 +9,20 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
Checkbox: ()
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
Checkbox: function() {
|
|
13
|
+
return _Checkbox.Checkbox;
|
|
14
|
+
},
|
|
15
|
+
checkboxClassNames: function() {
|
|
16
|
+
return _Checkbox.checkboxClassNames;
|
|
17
|
+
},
|
|
18
|
+
renderCheckbox_unstable: function() {
|
|
19
|
+
return _Checkbox.renderCheckbox_unstable;
|
|
20
|
+
},
|
|
21
|
+
useCheckboxStyles_unstable: function() {
|
|
22
|
+
return _Checkbox.useCheckboxStyles_unstable;
|
|
23
|
+
},
|
|
24
|
+
useCheckbox_unstable: function() {
|
|
25
|
+
return _Checkbox.useCheckbox_unstable;
|
|
26
|
+
}
|
|
17
27
|
});
|
|
18
|
-
const
|
|
28
|
+
const _Checkbox = require("./Checkbox");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable } from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":";;;;;;;;;;;IAASA,QAAQ,
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable } from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;;0BAAQ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-checkbox",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.37",
|
|
4
4
|
"description": "Fluent UI checkbox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -33,22 +33,22 @@
|
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-field": "^9.1.
|
|
36
|
+
"@fluentui/react-field": "^9.1.24",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.207",
|
|
38
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
39
|
-
"@fluentui/react-label": "^9.1.
|
|
40
|
-
"@fluentui/react-shared-contexts": "^9.7.
|
|
41
|
-
"@fluentui/react-tabster": "^9.12.
|
|
42
|
-
"@fluentui/react-theme": "^9.1.
|
|
43
|
-
"@fluentui/react-utilities": "^9.13.
|
|
38
|
+
"@fluentui/react-jsx-runtime": "^9.0.5",
|
|
39
|
+
"@fluentui/react-label": "^9.1.32",
|
|
40
|
+
"@fluentui/react-shared-contexts": "^9.7.3",
|
|
41
|
+
"@fluentui/react-tabster": "^9.12.7",
|
|
42
|
+
"@fluentui/react-theme": "^9.1.12",
|
|
43
|
+
"@fluentui/react-utilities": "^9.13.2",
|
|
44
44
|
"@griffel/react": "^1.5.14",
|
|
45
|
-
"@swc/helpers": "^0.
|
|
45
|
+
"@swc/helpers": "^0.5.1"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
|
-
"@types/react": ">=16.
|
|
49
|
-
"@types/react-dom": ">=16.
|
|
50
|
-
"react": ">=16.
|
|
51
|
-
"react-dom": ">=16.
|
|
48
|
+
"@types/react": ">=16.14.0 <19.0.0",
|
|
49
|
+
"@types/react-dom": ">=16.14.0 <19.0.0",
|
|
50
|
+
"react": ">=16.14.0 <19.0.0",
|
|
51
|
+
"react-dom": ">=16.14.0 <19.0.0"
|
|
52
52
|
},
|
|
53
53
|
"beachball": {
|
|
54
54
|
"disallowedChangeTypes": [
|