@fluentui/react-checkbox 9.2.26 → 9.2.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -2
- package/lib/components/Checkbox/useCheckboxStyles.styles.js +20 -14
- package/lib/components/Checkbox/useCheckboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js +35 -47
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-checkbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 23 May 2024 07:57:53 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.2.27)
|
|
8
|
+
|
|
9
|
+
Thu, 23 May 2024 07:57:53 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.2.26..@fluentui/react-checkbox_v9.2.27)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: replace usage of .shorthands() in styles ([PR #31449](https://github.com/microsoft/fluentui/pull/31449) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.2.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.2.26)
|
|
8
18
|
|
|
9
|
-
Mon, 20 May 2024 12:
|
|
19
|
+
Mon, 20 May 2024 12:44:53 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.2.25..@fluentui/react-checkbox_v9.2.26)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
3
3
|
import { tokens } from '@fluentui/react-theme';
|
|
4
4
|
export const checkboxClassNames = {
|
|
@@ -16,9 +16,9 @@ const vars = {
|
|
|
16
16
|
// The indicator size is used by the indicator and label styles
|
|
17
17
|
const indicatorSizeMedium = '16px';
|
|
18
18
|
const indicatorSizeLarge = '20px';
|
|
19
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
20
|
-
r: [".
|
|
21
|
-
s: ["@media (forced-colors: active){.
|
|
19
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1q22k1j", "r18ze4k2", {
|
|
20
|
+
r: [".r1q22k1j{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}", ".r1q22k1j:focus{outline-style:none;}", ".r1q22k1j:focus-visible{outline-style:none;}", ".r1q22k1j[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1q22k1j[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r18ze4k2{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}", ".r18ze4k2:focus{outline-style:none;}", ".r18ze4k2:focus-visible{outline-style:none;}", ".r18ze4k2[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r18ze4k2[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
|
|
21
|
+
s: ["@media (forced-colors: active){.r1q22k1j[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r18ze4k2[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
|
|
22
22
|
});
|
|
23
23
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
24
24
|
unchecked: {
|
|
@@ -86,13 +86,16 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
86
86
|
a9b677: "f64fuq3"
|
|
87
87
|
},
|
|
88
88
|
circular: {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
Beyfa6y: 0,
|
|
90
|
+
Bbmb7ep: 0,
|
|
91
|
+
Btl43ni: 0,
|
|
92
|
+
B7oj6ja: 0,
|
|
93
|
+
Dimara: "f44lkw9"
|
|
93
94
|
}
|
|
94
95
|
}, {
|
|
95
|
-
d: [".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".
|
|
96
|
+
d: [".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
|
|
97
|
+
p: -1
|
|
98
|
+
}]]
|
|
96
99
|
});
|
|
97
100
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
98
101
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
@@ -100,10 +103,11 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
100
103
|
qb2dma: "f7nlbp4",
|
|
101
104
|
sj55zd: "f1ym3bx4",
|
|
102
105
|
Bceei9c: "fpo1scq",
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
106
|
+
Byoj8tv: 0,
|
|
107
|
+
uwmqm3: 0,
|
|
108
|
+
z189sj: 0,
|
|
109
|
+
z8tnut: 0,
|
|
110
|
+
B0ocmuz: "f1f5q0n8"
|
|
107
111
|
},
|
|
108
112
|
before: {
|
|
109
113
|
z189sj: ["f7x41pl", "fruq291"]
|
|
@@ -120,7 +124,9 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
120
124
|
jrapky: "f49ad5g"
|
|
121
125
|
}
|
|
122
126
|
}, {
|
|
123
|
-
d: [".f7nlbp4{align-self:center;}", ".f1ym3bx4{color:inherit;}", ".fpo1scq{cursor:inherit;}", ".
|
|
127
|
+
d: [".f7nlbp4{align-self:center;}", ".f1ym3bx4{color:inherit;}", ".fpo1scq{cursor:inherit;}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
|
|
128
|
+
p: -1
|
|
129
|
+
}], ".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);}"]
|
|
124
130
|
});
|
|
125
131
|
/**
|
|
126
132
|
* Apply styling to the Checkbox slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","r","s","useRootStyles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","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// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\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 [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n checked: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n }\n },\n mixed: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n ':hover': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n disabled: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [vars.indicatorColor]: 'GrayText'\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 color: `var(${vars.indicatorColor})`,\n backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n borderStyle: 'solid',\n borderWidth: tokens.strokeWidthThin,\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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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","r","s","useRootStyles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","p","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","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 } 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// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\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 [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n checked: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n }\n },\n mixed: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n ':hover': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n disabled: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [vars.indicatorColor]: 'GrayText'\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 color: `var(${vars.indicatorColor})`,\n backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n borderStyle: 'solid',\n borderWidth: tokens.strokeWidthThin,\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 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 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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","ignoreList":[]}
|
|
@@ -32,22 +32,22 @@ const vars = {
|
|
|
32
32
|
// The indicator size is used by the indicator and label styles
|
|
33
33
|
const indicatorSizeMedium = '16px';
|
|
34
34
|
const indicatorSizeLarge = '20px';
|
|
35
|
-
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
35
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1q22k1j", "r18ze4k2", {
|
|
36
36
|
r: [
|
|
37
|
-
".
|
|
38
|
-
".
|
|
39
|
-
".
|
|
40
|
-
".
|
|
41
|
-
".
|
|
42
|
-
".
|
|
43
|
-
".
|
|
44
|
-
".
|
|
45
|
-
".
|
|
46
|
-
".
|
|
37
|
+
".r1q22k1j{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}",
|
|
38
|
+
".r1q22k1j:focus{outline-style:none;}",
|
|
39
|
+
".r1q22k1j:focus-visible{outline-style:none;}",
|
|
40
|
+
".r1q22k1j[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
41
|
+
".r1q22k1j[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
|
42
|
+
".r18ze4k2{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}",
|
|
43
|
+
".r18ze4k2:focus{outline-style:none;}",
|
|
44
|
+
".r18ze4k2:focus-visible{outline-style:none;}",
|
|
45
|
+
".r18ze4k2[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
46
|
+
".r18ze4k2[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
|
|
47
47
|
],
|
|
48
48
|
s: [
|
|
49
|
-
"@media (forced-colors: active){.
|
|
50
|
-
"@media (forced-colors: active){.
|
|
49
|
+
"@media (forced-colors: active){.r1q22k1j[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
|
|
50
|
+
"@media (forced-colors: active){.r18ze4k2[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
|
|
51
51
|
]
|
|
52
52
|
});
|
|
53
53
|
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -164,32 +164,23 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
164
164
|
a9b677: "f64fuq3"
|
|
165
165
|
},
|
|
166
166
|
circular: {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
"f1nfllo7",
|
|
173
|
-
"f8fbkgy"
|
|
174
|
-
],
|
|
175
|
-
B7oj6ja: [
|
|
176
|
-
"f1djnp8u",
|
|
177
|
-
"f1s8kh49"
|
|
178
|
-
],
|
|
179
|
-
Btl43ni: [
|
|
180
|
-
"f1s8kh49",
|
|
181
|
-
"f1djnp8u"
|
|
182
|
-
]
|
|
167
|
+
Beyfa6y: 0,
|
|
168
|
+
Bbmb7ep: 0,
|
|
169
|
+
Btl43ni: 0,
|
|
170
|
+
B7oj6ja: 0,
|
|
171
|
+
Dimara: "f44lkw9"
|
|
183
172
|
}
|
|
184
173
|
}, {
|
|
185
174
|
d: [
|
|
186
175
|
".f4ybsrx{font-size:16px;}",
|
|
187
176
|
".fjamq6b{height:20px;}",
|
|
188
177
|
".f64fuq3{width:20px;}",
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
178
|
+
[
|
|
179
|
+
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
|
|
180
|
+
{
|
|
181
|
+
p: -1
|
|
182
|
+
}
|
|
183
|
+
]
|
|
193
184
|
]
|
|
194
185
|
});
|
|
195
186
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
@@ -198,16 +189,11 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
198
189
|
qb2dma: "f7nlbp4",
|
|
199
190
|
sj55zd: "f1ym3bx4",
|
|
200
191
|
Bceei9c: "fpo1scq",
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
Byoj8tv: "f5b47ha",
|
|
207
|
-
uwmqm3: [
|
|
208
|
-
"f1f5gg8d",
|
|
209
|
-
"f1vdfbxk"
|
|
210
|
-
]
|
|
192
|
+
Byoj8tv: 0,
|
|
193
|
+
uwmqm3: 0,
|
|
194
|
+
z189sj: 0,
|
|
195
|
+
z8tnut: 0,
|
|
196
|
+
B0ocmuz: "f1f5q0n8"
|
|
211
197
|
},
|
|
212
198
|
before: {
|
|
213
199
|
z189sj: [
|
|
@@ -234,10 +220,12 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
234
220
|
".f7nlbp4{align-self:center;}",
|
|
235
221
|
".f1ym3bx4{color:inherit;}",
|
|
236
222
|
".fpo1scq{cursor:inherit;}",
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
223
|
+
[
|
|
224
|
+
".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}",
|
|
225
|
+
{
|
|
226
|
+
p: -1
|
|
227
|
+
}
|
|
228
|
+
],
|
|
241
229
|
".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
|
|
242
230
|
".fruq291{padding-left:var(--spacingHorizontalXS);}",
|
|
243
231
|
".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}",
|
|
@@ -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// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r10zo65y\", \"rpa3v06\", {\n r: [\".r10zo65y{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r10zo65y:focus{outline-style:none;}\", \".r10zo65y:focus-visible{outline-style:none;}\", \".r10zo65y[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r10zo65y[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);}\", \".rpa3v06{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".rpa3v06:focus{outline-style:none;}\", \".rpa3v06:focus-visible{outline-style:none;}\", \".rpa3v06[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rpa3v06[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);}\"],\n s: [\"@media (forced-colors: active){.r10zo65y[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rpa3v06[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n unchecked: {\n Bi91k9c: \"f3p8bqa\",\n pv5h1i: \"fium13f\",\n lj723h: \"f1r2dosr\",\n Hnthvo: \"f1729es6\"\n },\n checked: {\n sj55zd: \"f19n0e5\",\n wkncrt: \"f35ds98\",\n zxk7z7: \"f12mnkne\",\n Hmsnfy: \"fei9a8h\",\n e6czan: \"fix56y3\",\n pv5h1i: \"f1bcv2js\",\n qbydtz: \"f7dr4go\",\n Hnthvo: \"f1r5cpua\"\n },\n mixed: {\n sj55zd: \"f19n0e5\",\n Hmsnfy: \"f1l27tf0\",\n zxk7z7: \"fcilktj\",\n pv5h1i: \"f1lphd54\",\n Bunfa6h: \"f1obkvq7\",\n Hnthvo: \"f2gmbuh\",\n B15ykmv: \"f1oy4fa1\"\n },\n disabled: {\n Bceei9c: \"f158kwzp\",\n sj55zd: \"f1s2aq7o\",\n Hmsnfy: \"f1w7mfl5\",\n zxk7z7: \"fcoafq6\",\n Bbusuzp: \"f1dcs8yz\",\n mrqfp9: \"fxb3eh3\"\n }\n}, {\n h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".fium13f:hover{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessibleHover);}\", \".fix56y3:hover{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundHover);}\", \".f1bcv2js:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundHover);}\", \".f1lphd54:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokeHover);}\", \".f1obkvq7:hover{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Hover);}\"],\n a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1729es6:active{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessiblePressed);}\", \".f7dr4go:active{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundPressed);}\", \".f1r5cpua:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundPressed);}\", \".f2gmbuh:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokePressed);}\", \".f1oy4fa1:active{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Pressed);}\"],\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f35ds98{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackground);}\", \".f12mnkne{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundInverted);}\", \".fei9a8h{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackground);}\", \".f1l27tf0{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStroke);}\", \".fcilktj{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f1w7mfl5{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeDisabled);}\", \".fcoafq6{--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){.fxb3eh3{--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(\"rl7ci6d\", null, [\".rl7ci6d{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--fui-Checkbox__indicator--color);background-color:var(--fui-Checkbox__indicator--backgroundColor);border-color:var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible));border-style:solid;border-width:var(--strokeWidthThin);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","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","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 } 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// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1q22k1j\", \"r18ze4k2\", {\n r: [\".r1q22k1j{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r1q22k1j:focus{outline-style:none;}\", \".r1q22k1j:focus-visible{outline-style:none;}\", \".r1q22k1j[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1q22k1j[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r18ze4k2{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r18ze4k2:focus{outline-style:none;}\", \".r18ze4k2:focus-visible{outline-style:none;}\", \".r18ze4k2[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r18ze4k2[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.r1q22k1j[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.r18ze4k2[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n unchecked: {\n Bi91k9c: \"f3p8bqa\",\n pv5h1i: \"fium13f\",\n lj723h: \"f1r2dosr\",\n Hnthvo: \"f1729es6\"\n },\n checked: {\n sj55zd: \"f19n0e5\",\n wkncrt: \"f35ds98\",\n zxk7z7: \"f12mnkne\",\n Hmsnfy: \"fei9a8h\",\n e6czan: \"fix56y3\",\n pv5h1i: \"f1bcv2js\",\n qbydtz: \"f7dr4go\",\n Hnthvo: \"f1r5cpua\"\n },\n mixed: {\n sj55zd: \"f19n0e5\",\n Hmsnfy: \"f1l27tf0\",\n zxk7z7: \"fcilktj\",\n pv5h1i: \"f1lphd54\",\n Bunfa6h: \"f1obkvq7\",\n Hnthvo: \"f2gmbuh\",\n B15ykmv: \"f1oy4fa1\"\n },\n disabled: {\n Bceei9c: \"f158kwzp\",\n sj55zd: \"f1s2aq7o\",\n Hmsnfy: \"f1w7mfl5\",\n zxk7z7: \"fcoafq6\",\n Bbusuzp: \"f1dcs8yz\",\n mrqfp9: \"fxb3eh3\"\n }\n}, {\n h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".fium13f:hover{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessibleHover);}\", \".fix56y3:hover{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundHover);}\", \".f1bcv2js:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundHover);}\", \".f1lphd54:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokeHover);}\", \".f1obkvq7:hover{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Hover);}\"],\n a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1729es6:active{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessiblePressed);}\", \".f7dr4go:active{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundPressed);}\", \".f1r5cpua:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundPressed);}\", \".f2gmbuh:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokePressed);}\", \".f1oy4fa1:active{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Pressed);}\"],\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f35ds98{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackground);}\", \".f12mnkne{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundInverted);}\", \".fei9a8h{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackground);}\", \".f1l27tf0{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStroke);}\", \".fcilktj{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f1w7mfl5{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeDisabled);}\", \".fcoafq6{--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){.fxb3eh3{--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(\"rl7ci6d\", null, [\".rl7ci6d{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--fui-Checkbox__indicator--color);background-color:var(--fui-Checkbox__indicator--backgroundColor);border-color:var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible));border-style:solid;border-width:var(--strokeWidthThin);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 Beyfa6y: 0,\n Bbmb7ep: 0,\n Btl43ni: 0,\n B7oj6ja: 0,\n Dimara: \"f44lkw9\"\n }\n}, {\n d: [\".f4ybsrx{font-size:16px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", [\".f44lkw9{border-radius:var(--borderRadiusCircular);}\", {\n p: -1\n }]]\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 Byoj8tv: 0,\n uwmqm3: 0,\n z189sj: 0,\n z8tnut: 0,\n B0ocmuz: \"f1f5q0n8\"\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;}\", [\".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}\", {\n p: -1\n }], \".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","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","p","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-checkbox",
|
|
3
|
-
"version": "9.2.
|
|
3
|
+
"version": "9.2.27",
|
|
4
4
|
"description": "Fluent UI checkbox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@fluentui/react-jsx-runtime": "^9.0.38",
|
|
39
39
|
"@fluentui/react-label": "^9.1.70",
|
|
40
40
|
"@fluentui/react-shared-contexts": "^9.19.0",
|
|
41
|
-
"@fluentui/react-tabster": "^9.21.
|
|
41
|
+
"@fluentui/react-tabster": "^9.21.4",
|
|
42
42
|
"@fluentui/react-theme": "^9.1.19",
|
|
43
43
|
"@fluentui/react-utilities": "^9.18.9",
|
|
44
44
|
"@griffel/react": "^1.5.22",
|