npm - @fluentui/react-checkbox - Versions diffs - 9.0.17 → 9.0.19 - Mend

@fluentui/react-checkbox 9.0.17 → 9.0.19

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.

Files changed (15) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,55 @@
   "name": "@fluentui/react-checkbox",
   "entries": [
     {
-      "date": "Wed, 04 Jan 2023 01:36:16 GMT",
+      "date": "Mon, 09 Jan 2023 21:50:48 GMT",
+      "tag": "@fluentui/react-checkbox_v9.0.19",
+      "version": "9.0.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "204f1c46b7257a0bc4cc6506242f4c0c02b5b17f",
+            "comment": "perf: Don't render Checkbox icon when unchecked"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 09 Jan 2023 14:35:02 GMT",
+      "tag": "@fluentui/react-checkbox_v9.0.18",
+      "version": "9.0.18",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.14",
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-label to v9.0.16",
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.3.6",
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-utilities to v9.4.0",
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Jan 2023 01:40:55 GMT",
       "tag": "@fluentui/react-checkbox_v9.0.17",
       "version": "9.0.17",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-checkbox
-This log was last generated on Wed, 04 Jan 2023 01:36:16 GMT and should not be manually modified.
+This log was last generated on Mon, 09 Jan 2023 21:50:48 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.19)
+Mon, 09 Jan 2023 21:50:48 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.18..@fluentui/react-checkbox_v9.0.19)
+### Patches
+- perf: Don't render Checkbox icon when unchecked ([PR #26248](https://github.com/microsoft/fluentui/pull/26248) by behowell@microsoft.com)
+## [9.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.18)
+Mon, 09 Jan 2023 14:35:02 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.17..@fluentui/react-checkbox_v9.0.18)
+### Patches
+- Bump @fluentui/react-field to v9.0.0-alpha.14 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-label to v9.0.16 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-tabster to v9.3.6 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
 ## [9.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.17)
-Wed, 04 Jan 2023 01:36:16 GMT
+Wed, 04 Jan 2023 01:40:55 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.16..@fluentui/react-checkbox_v9.0.17)
 ### Patches

package/lib/components/Checkbox/useCheckbox.js CHANGED Viewed

@@ -40,7 +40,7 @@ export const useCheckbox_unstable = (props, ref) => {
     } else {
       checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Square16Filled, null) : /*#__PURE__*/React.createElement(Square12Filled, null);
     }
-  } else {
+  } else if (checked) {
     checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Checkmark16Filled, null) : /*#__PURE__*/React.createElement(Checkmark12Filled, null);
   }
   const state = {

package/lib/components/Checkbox/useCheckbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,yBAAyB,EACzBC,gBAAgB,EAChBC,oBAAoB,EACpBC,gBAAgB,EAChBC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,QACR,2BAA2B;AAElC,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACdC,YAAY,QACP,uBAAuB;AAC9B,SAASC,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,cAAc,QAAQ,yBAAyB;AAExD;;;;;;;;;AASA,OAAO,MAAMC,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAAgC,KAAmB;EAC5G,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,KAAK,GAAG,QAAQ;IAAEC,IAAI,GAAG,QAAQ;IAAEC,aAAa,GAAG,OAAO;IAAEC;EAAQ,CAAE,GAAGP,KAAK;EAE1G,MAAM,CAACQ,OAAO,EAAEC,UAAU,CAAC,GAAGtB,oBAAoB,CAAC;IACjDuB,YAAY,EAAEV,KAAK,CAACW,cAAc;IAClCC,KAAK,EAAEZ,KAAK,CAACQ,OAAO;IACpBK,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,WAAW,GAAG7B,yBAAyB,CAAC;IAC5Ce,KAAK;IACLe,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU;GACpE,CAAC;EAEF,MAAMC,KAAK,GAAGT,OAAO,KAAK,OAAO;EACjC,MAAMU,EAAE,GAAG7B,KAAK,CAAC,WAAW,EAAEyB,WAAW,CAACK,OAAO,CAACD,EAAE,CAAC;EAErD,IAAIE,aAAa;EACjB,IAAIH,KAAK,EAAE;IACT,IAAIb,KAAK,KAAK,UAAU,EAAE;MACxBgB,aAAa,gBAAGpC,oBAACY,YAAY,OAAG;KACjC,MAAM;MACLwB,aAAa,GAAGf,IAAI,KAAK,OAAO,gBAAGrB,oBAACW,cAAc,OAAG,gBAAGX,oBAACU,cAAc,OAAG;;GAE7E,MAAM;~~IACL0B~~,aAAa,GAAGf,IAAI,KAAK,OAAO,gBAAGrB,oBAACS,iBAAiB,OAAG,gBAAGT,oBAACQ,iBAAiB,OAAG;;EAGlF,MAAMoB,KAAK,GAAkB;IAC3BR,KAAK;IACLI,OAAO;IACPH,IAAI;IACJC,aAAa;IACbe,UAAU,EAAE;MACVC,IAAI,EAAE,MAAM;MACZC,KAAK,EAAE,OAAO;MACdC,SAAS,EAAE,KAAK;MAChBC,KAAK,EAAE5B;KACR;IACDyB,IAAI,EAAEpC,gBAAgB,CAACc,KAAK,CAACsB,IAAI,EAAE;MACjCnB,QAAQ,EAAE,IAAI;MACduB,YAAY,EAAE;QACZzB,GAAG,EAAEH,cAAc,EAAmB;QACtC,GAAGgB,WAAW,CAACQ;;KAElB,CAAC;IACFC,KAAK,EAAErC,gBAAgB,CAACc,KAAK,CAACuB,KAAK,EAAE;MACnCpB,QAAQ,EAAE,IAAI;MACduB,YAAY,EAAE;QACZC,IAAI,EAAE,UAAU;QAChBT,EAAE;QACFjB,GAAG;QACHO,OAAO,EAAEA,OAAO,KAAK,IAAI;QACzB,GAAGM,WAAW,CAACK;;KAElB,CAAC;IACFM,KAAK,EAAEvC,gBAAgB,CAACc,KAAK,CAACyB,KAAK,EAAE;MACnCtB,QAAQ,EAAE,KAAK;MACfuB,YAAY,EAAE;QACZE,OAAO,EAAEV,EAAE;QACXhB,QAAQ;QACRC,QAAQ;QACRE,IAAI,EAAE,QAAQ,CAAE;;KAEnB,CAAC;;IACFmB,SAAS,EAAEtC,gBAAgB,CAACc,KAAK,CAACwB,SAAS,EAAE;MAC3CrB,QAAQ,EAAE,IAAI;MACduB,YAAY,EAAE;QACZ,aAAa,EAAE,IAAI;QACnBG,QAAQ,EAAET;;KAEb;GACF;EAEDR,KAAK,CAACW,KAAK,CAAChB,QAAQ,GAAGnB,gBAAgB,CAAC0C,EAAE,IAAG;IAC3C,MAAMC,GAAG,GAAGD,EAAE,CAACE,aAAa,CAACC,aAAa,GAAG,OAAO,GAAGH,EAAE,CAACE,aAAa,CAACxB,OAAO;IAC/ED,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGuB,EAAE,EAAE;MAAEtB,OAAO,EAAEuB;IAAG,CAAE,CAAC;IAChCtB,UAAU,CAACsB,GAAG,CAAC;EACjB,CAAC,CAAC;EAEF;EACA;EACA,MAAMG,QAAQ,GAAG3C,aAAa,CAACqB,KAAK,CAACW,KAAK,CAACtB,GAAG,CAAC;EAC/CW,KAAK,CAACW,KAAK,CAACtB,GAAG,GAAGiC,QAAQ;EAE1B;EACA;EACA5C,yBAAyB,CAAC,MAAK;IAC7B,IAAI4C,QAAQ,CAACC,OAAO,EAAE;MACpBD,QAAQ,CAACC,OAAO,CAACF,aAAa,GAAGhB,KAAK;;EAE1C,CAAC,EAAE,CAACiB,QAAQ,EAAEjB,KAAK,CAAC,CAAC;EAErB,OAAOL,KAAK;AACd,CAAC","names":["React","getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","components","root","input","indicator","label","defaultProps","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\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 const { disabled, 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 {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\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"]}
1	+ {"version":3,"mappings":"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","names":["React","getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","components","root","input","indicator","label","defaultProps","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\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 const { disabled, 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 size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\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"]}

package/lib/components/Checkbox/useCheckboxStyles.js CHANGED Viewed

@@ -11,7 +11,7 @@ export const checkboxClassNames = {
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
 const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1o1qdo1", "r1niodl4", [".r1o1qdo1{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1o1qdo1:focus{outline-style:none;}", ".r1o1qdo1:focus-visible{outline-style:none;}", ".r1o1qdo1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1o1qdo1[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:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1niodl4{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1niodl4:focus{outline-style:none;}", ".r1niodl4:focus-visible{outline-style:none;}", ".r1niodl4[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1niodl4[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:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
-const useInputBaseClassName = /*#__PURE__*/__resetStyles("rfcvz6l", null, [".rfcvz6l{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".rfcvz6l:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".rfcvz6l:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".rfcvz6l:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rfcvz6l:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rfcvz6l:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rfcvz6l:disabled{cursor:default;}", ".rfcvz6l:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__label{color:GrayText;}}", ".rfcvz6l:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
+const useInputBaseClassName = /*#__PURE__*/__resetStyles("r11jo426", null, [".r11jo426{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".r11jo426:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".r11jo426:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r11jo426:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".r11jo426:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r11jo426:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".r11jo426:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r11jo426:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".r11jo426:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".r11jo426:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".r11jo426:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".r11jo426:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".r11jo426:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r11jo426:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r11jo426:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r11jo426:disabled{cursor:default;}", ".r11jo426:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.r11jo426:disabled~.fui-Checkbox__label{color:GrayText;}}", ".r11jo426:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.r11jo426:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.r11jo426:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
 const useInputStyles = /*#__PURE__*/__styles({
   before: {
     j35jbq: ["f1e31b4d", "f1vgc2s3"]

package/lib/components/Checkbox/useCheckboxStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,kCAAsCA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAE;CACZ;AAED;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AAEjC,MAAMC,oBAAoB,gBAAG,6uEAI3B;AAEF,MAAMC,qBAAqB,gBAAG,i3FAuH5B;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAWrB;AAEF,MAAMC,yBAAyB,gBAAG,2rBAmBhC;AAEF,MAAMC,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAUzB;AAEF;AACA,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwBrB;AAEF;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAE5C,MAAMI,iBAAiB,GAAGX,oBAAoB,EAAE;EAChDO,KAAK,CAACb,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAEiB,iBAAiB,EAAEJ,KAAK,CAACb,IAAI,CAACkB,SAAS,CAAC;EAErG,MAAMC,kBAAkB,GAAGZ,qBAAqB,EAAE;EAClD,MAAMa,WAAW,GAAGZ,cAAc,EAAE;EACpCK,KAAK,CAACX,KAAK,CAACgB,SAAS,GAAGvB,YAAY,CAClCI,kBAAkB,CAACG,KAAK,EACxBiB,kBAAkB,EAClBH,IAAI,KAAK,OAAO,IAAII,WAAW,CAACC,KAAK,EACrCD,WAAW,CAACN,aAAa,CAAC,EAC1BD,KAAK,CAACX,KAAK,CAACgB,SAAS,CACtB;EAED,MAAMI,sBAAsB,GAAGb,yBAAyB,EAAE;EAC1D,MAAMc,eAAe,GAAGb,kBAAkB,EAAE;EAC5C,IAAIG,KAAK,CAACV,SAAS,EAAE;IACnBU,KAAK,CAACV,SAAS,CAACe,SAAS,GAAGvB,YAAY,CACtCI,kBAAkB,CAACI,SAAS,EAC5BmB,sBAAsB,EACtBN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACF,KAAK,EACzCN,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAACC,QAAQ,EAChDX,KAAK,CAACV,SAAS,CAACe,SAAS,CAC1B;;EAGH,MAAMO,WAAW,GAAGd,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACZ,KAAK,EAAE;IACfY,KAAK,CAACZ,KAAK,CAACiB,SAAS,GAAGvB,YAAY,CAClCI,kBAAkB,CAACE,KAAK,EACxBwB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,IAAI,CAAC,EACjBS,WAAW,CAACX,aAAa,CAAC,EAC1BD,KAAK,CAACZ,KAAK,CAACiB,SAAS,CACtB;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useIndicatorStyles","useLabelStyles","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","className","inputBaseClassName","inputStyles","large","indicatorBaseClassName","indicatorStyles","circular","labelStyles","base"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\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\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > `]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\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 cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n 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/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":"AAAA,kCAAsCA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAE;CACZ;AAED;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AAEjC,MAAMC,oBAAoB,gBAAG,6uEAI3B;AAEF,MAAMC,qBAAqB,gBAAG,kzFAkH5B;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAWrB;AAEF,MAAMC,yBAAyB,gBAAG,2rBAmBhC;AAEF,MAAMC,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAUzB;AAEF;AACA,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwBrB;AAEF;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAE5C,MAAMI,iBAAiB,GAAGX,oBAAoB,EAAE;EAChDO,KAAK,CAACb,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAEiB,iBAAiB,EAAEJ,KAAK,CAACb,IAAI,CAACkB,SAAS,CAAC;EAErG,MAAMC,kBAAkB,GAAGZ,qBAAqB,EAAE;EAClD,MAAMa,WAAW,GAAGZ,cAAc,EAAE;EACpCK,KAAK,CAACX,KAAK,CAACgB,SAAS,GAAGvB,YAAY,CAClCI,kBAAkB,CAACG,KAAK,EACxBiB,kBAAkB,EAClBH,IAAI,KAAK,OAAO,IAAII,WAAW,CAACC,KAAK,EACrCD,WAAW,CAACN,aAAa,CAAC,EAC1BD,KAAK,CAACX,KAAK,CAACgB,SAAS,CACtB;EAED,MAAMI,sBAAsB,GAAGb,yBAAyB,EAAE;EAC1D,MAAMc,eAAe,GAAGb,kBAAkB,EAAE;EAC5C,IAAIG,KAAK,CAACV,SAAS,EAAE;IACnBU,KAAK,CAACV,SAAS,CAACe,SAAS,GAAGvB,YAAY,CACtCI,kBAAkB,CAACI,SAAS,EAC5BmB,sBAAsB,EACtBN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACF,KAAK,EACzCN,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAACC,QAAQ,EAChDX,KAAK,CAACV,SAAS,CAACe,SAAS,CAC1B;;EAGH,MAAMO,WAAW,GAAGd,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACZ,KAAK,EAAE;IACfY,KAAK,CAACZ,KAAK,CAACiB,SAAS,GAAGvB,YAAY,CAClCI,kBAAkB,CAACE,KAAK,EACxBwB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,IAAI,CAAC,EACjBS,WAAW,CAACX,aAAa,CAAC,EAC1BD,KAAK,CAACZ,KAAK,CAACiB,SAAS,CACtB;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useIndicatorStyles","useLabelStyles","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","className","inputBaseClassName","inputStyles","large","indicatorBaseClassName","indicatorStyles","circular","labelStyles","base"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\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\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\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 cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n 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/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}

package/lib-amd/components/Checkbox/useCheckbox.js CHANGED Viewed

@@ -34,7 +34,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
                 checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Square16Filled, null) : React.createElement(react_icons_1.Square12Filled, null);
             }
         }
-        else {
+        else if (checked) {
             checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Checkmark16Filled, null) : React.createElement(react_icons_1.Checkmark12Filled, null);
         }
         var state = {

package/lib-amd/components/Checkbox/useCheckbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCheckbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":";;;;IAqBA;;;;;;;;OAQG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAAoB,EAAE,GAAgC;QACjF,IAAA,QAAQ,GAAqF,KAAK,SAA1F,EAAE,QAAQ,GAA2E,KAAK,SAAhF,EAAE,KAAyE,KAAK,MAA9D,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAAE,KAAuD,KAAK,KAA7C,EAAf,IAAI,mBAAG,QAAQ,KAAA,EAAE,KAAsC,KAAK,cAApB,EAAvB,aAAa,mBAAG,OAAO,KAAA,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAErG,IAAA,KAAwB,sCAAoB,CAAC;YACjD,YAAY,EAAE,KAAK,CAAC,cAAc;YAClC,KAAK,EAAE,KAAK,CAAC,OAAO;YACpB,YAAY,EAAE,KAAK;SACpB,CAAC,EAJK,OAAO,QAAA,EAAE,UAAU,QAIxB,CAAC;QAEH,IAAM,WAAW,GAAG,2CAAyB,CAAC;YAC5C,KAAK,OAAA;YACL,kBAAkB,EAAE,OAAO;YAC3B,iBAAiB,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,CAAC;SACrE,CAAC,CAAC;QAEH,IAAM,KAAK,GAAG,OAAO,KAAK,OAAO,CAAC;QAClC,IAAM,EAAE,GAAG,uBAAK,CAAC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAEtD,IAAI,aAAa,CAAC;QAClB,IAAI,KAAK,EAAE;YACT,IAAI,KAAK,KAAK,UAAU,EAAE;gBACxB,aAAa,GAAG,oBAAC,0BAAY,OAAG,CAAC;aAClC;iBAAM;gBACL,aAAa,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAC,4BAAc,OAAG,CAAC,CAAC,CAAC,oBAAC,4BAAc,OAAG,CAAC;aAC5E;SACF;aAAM;~~YACL~~,aAAa,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAC,+BAAiB,OAAG,CAAC,CAAC,CAAC,oBAAC,+BAAiB,OAAG,CAAC;SAClF;QAED,IAAM,KAAK,GAAkB;YAC3B,KAAK,OAAA;YACL,OAAO,SAAA;YACP,IAAI,MAAA;YACJ,aAAa,eAAA;YACb,UAAU,EAAE;gBACV,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,OAAO;gBACd,SAAS,EAAE,KAAK;gBAChB,KAAK,EAAE,mBAAK;aACb;YACD,IAAI,EAAE,kCAAgB,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,GAAG,EAAE,8BAAc,EAAmB,IACnC,WAAW,CAAC,IAAI,CACpB;aACF,CAAC;YACF,KAAK,EAAE,kCAAgB,CAAC,KAAK,CAAC,KAAK,EAAE;gBACnC,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,IAAI,EAAE,UAAU,EAChB,EAAE,IAAA,EACF,GAAG,KAAA,EACH,OAAO,EAAE,OAAO,KAAK,IAAI,IACtB,WAAW,CAAC,OAAO,CACvB;aACF,CAAC;YACF,KAAK,EAAE,kCAAgB,CAAC,KAAK,CAAC,KAAK,EAAE;gBACnC,QAAQ,EAAE,KAAK;gBACf,YAAY,EAAE;oBACZ,OAAO,EAAE,EAAE;oBACX,QAAQ,UAAA;oBACR,QAAQ,UAAA;oBACR,IAAI,EAAE,QAAQ,EAAE,uCAAuC;iBACxD;aACF,CAAC;YACF,SAAS,EAAE,kCAAgB,CAAC,KAAK,CAAC,SAAS,EAAE;gBAC3C,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,aAAa,EAAE,IAAI;oBACnB,QAAQ,EAAE,aAAa;iBACxB;aACF,CAAC;SACH,CAAC;QAEF,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,kCAAgB,CAAC,UAAA,EAAE;YACxC,IAAM,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC;YAChF,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;YACjC,UAAU,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,4FAA4F;QAC5F,sFAAsF;QACtF,IAAM,QAAQ,GAAG,+BAAa,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChD,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;QAE3B,kGAAkG;QAClG,4FAA4F;QAC5F,2CAAyB,CAAC;YACxB,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK,CAAC;aACxC;QACH,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;QAEtB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IA/FW,QAAA,oBAAoB,wBA+F/B","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\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 const { disabled, 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 {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\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"]}
1	+ {"version":3,"file":"useCheckbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\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 const { disabled, 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 size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\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"]}

package/lib-amd/components/Checkbox/useCheckboxStyles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabster", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_tabster_1, react_theme_1) {
     "use strict";
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useCheckboxStyles_unstable = exports.checkboxClassNames = void 0;
     exports.checkboxClassNames = {
@@ -13,116 +13,111 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabste
     var indicatorSizeMedium = '16px';
     var indicatorSizeLarge = '20px';
     var useRootBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ position: 'relative', display: 'inline-flex' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })));
-    var useInputBaseClassName = react_1.makeResetStyles((_a = {
-            boxSizing: 'border-box',
-            cursor: 'pointer',
-            height: '100%',
-            margin: 0,
-            opacity: 0,
-            position: 'absolute',
-            top: 0,
-            // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
-            // This is done so that clicking on that "empty space" still toggles the checkbox.
-            width: "calc(" + indicatorSizeMedium + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")"
-        },
-        // When unchecked, hide the the checkmark icon (child of the indicator slot)
-        _a[":not(:checked):not(:indeterminate) ~ ." + exports.checkboxClassNames.indicator + " > *"] = {
-            opacity: 0,
-        },
+    var useInputBaseClassName = react_1.makeResetStyles({
+        boxSizing: 'border-box',
+        cursor: 'pointer',
+        height: '100%',
+        margin: 0,
+        opacity: 0,
+        position: 'absolute',
+        top: 0,
+        // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
+        // This is done so that clicking on that "empty space" still toggles the checkbox.
+        width: "calc(" + indicatorSizeMedium + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
         // Colors for the unchecked state
-        _a[':enabled:not(:checked):not(:indeterminate)'] = (_b = {},
-            _b["& ~ ." + exports.checkboxClassNames.label] = {
+        ':enabled:not(:checked):not(:indeterminate)': (_a = {},
+            _a["& ~ ." + exports.checkboxClassNames.label] = {
                 color: react_theme_1.tokens.colorNeutralForeground3,
             },
-            _b["& ~ ." + exports.checkboxClassNames.indicator] = {
+            _a["& ~ ." + exports.checkboxClassNames.indicator] = {
                 borderColor: react_theme_1.tokens.colorNeutralStrokeAccessible,
             },
-            _b[':hover'] = (_c = {},
-                _c["& ~ ." + exports.checkboxClassNames.label] = {
+            _a[':hover'] = (_b = {},
+                _b["& ~ ." + exports.checkboxClassNames.label] = {
                     color: react_theme_1.tokens.colorNeutralForeground2,
                 },
-                _c["& ~ ." + exports.checkboxClassNames.indicator] = {
+                _b["& ~ ." + exports.checkboxClassNames.indicator] = {
                     borderColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
                 },
-                _c),
-            _b[':active:hover'] = (_d = {},
-                _d["& ~ ." + exports.checkboxClassNames.label] = {
+                _b),
+            _a[':active:hover'] = (_c = {},
+                _c["& ~ ." + exports.checkboxClassNames.label] = {
                     color: react_theme_1.tokens.colorNeutralForeground1,
                 },
-                _d["& ~ ." + exports.checkboxClassNames.indicator] = {
+                _c["& ~ ." + exports.checkboxClassNames.indicator] = {
                     borderColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
                 },
-                _d),
-            _b),
+                _c),
+            _a),
         // Colors for the checked state
-        _a[':enabled:checked:not(:indeterminate)'] = (_e = {},
-            _e["& ~ ." + exports.checkboxClassNames.label] = {
+        ':enabled:checked:not(:indeterminate)': (_d = {},
+            _d["& ~ ." + exports.checkboxClassNames.label] = {
                 color: react_theme_1.tokens.colorNeutralForeground1,
             },
-            _e["& ~ ." + exports.checkboxClassNames.indicator] = {
+            _d["& ~ ." + exports.checkboxClassNames.indicator] = {
                 backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground,
                 color: react_theme_1.tokens.colorNeutralForegroundInverted,
                 borderColor: react_theme_1.tokens.colorCompoundBrandBackground,
             },
-            _e[':hover'] = (_f = {},
-                _f["& ~ ." + exports.checkboxClassNames.indicator] = {
+            _d[':hover'] = (_e = {},
+                _e["& ~ ." + exports.checkboxClassNames.indicator] = {
                     backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover,
                     borderColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover,
                 },
-                _f),
-            _e[':active:hover'] = (_g = {},
-                _g["& ~ ." + exports.checkboxClassNames.indicator] = {
+                _e),
+            _d[':active:hover'] = (_f = {},
+                _f["& ~ ." + exports.checkboxClassNames.indicator] = {
                     backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
                     borderColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
                 },
-                _g),
-            _e),
+                _f),
+            _d),
         // Colors for the mixed state
-        _a[':enabled:indeterminate'] = (_h = {},
-            _h["& ~ ." + exports.checkboxClassNames.label] = {
+        ':enabled:indeterminate': (_g = {},
+            _g["& ~ ." + exports.checkboxClassNames.label] = {
                 color: react_theme_1.tokens.colorNeutralForeground1,
             },
-            _h["& ~ ." + exports.checkboxClassNames.indicator] = {
+            _g["& ~ ." + exports.checkboxClassNames.indicator] = {
                 borderColor: react_theme_1.tokens.colorCompoundBrandStroke,
                 color: react_theme_1.tokens.colorCompoundBrandForeground1,
             },
-            _h[':hover'] = (_j = {},
-                _j["& ~ ." + exports.checkboxClassNames.indicator] = {
+            _g[':hover'] = (_h = {},
+                _h["& ~ ." + exports.checkboxClassNames.indicator] = {
                     borderColor: react_theme_1.tokens.colorCompoundBrandStrokeHover,
                     color: react_theme_1.tokens.colorCompoundBrandForeground1Hover,
                 },
-                _j),
-            _h[':active:hover'] = (_k = {},
-                _k["& ~ ." + exports.checkboxClassNames.indicator] = {
+                _h),
+            _g[':active:hover'] = (_j = {},
+                _j["& ~ ." + exports.checkboxClassNames.indicator] = {
                     borderColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
                     color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed,
                 },
-                _k),
-            _h),
-        _a[':disabled'] = (_l = {
+                _j),
+            _g),
+        ':disabled': (_k = {
                 cursor: 'default'
             },
-            _l["& ~ ." + exports.checkboxClassNames.label] = {
+            _k["& ~ ." + exports.checkboxClassNames.label] = {
                 cursor: 'default',
                 color: react_theme_1.tokens.colorNeutralForegroundDisabled,
                 '@media (forced-colors: active)': {
                     color: 'GrayText',
                 },
             },
-            _l["& ~ ." + exports.checkboxClassNames.indicator] = {
+            _k["& ~ ." + exports.checkboxClassNames.indicator] = {
                 borderColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
                 color: react_theme_1.tokens.colorNeutralForegroundDisabled,
                 '@media (forced-colors: active)': {
                     color: 'GrayText',
                 },
             },
-            _l["& ~ ." + exports.checkboxClassNames.indicator + " svg"] = {
+            _k["& ~ ." + exports.checkboxClassNames.indicator + " svg"] = {
                 '@media (forced-colors: active)': {
                     color: 'GrayText',
                 },
             },
-            _l),
-        _a));
+            _k),
+    });
     var useInputStyles = react_1.makeStyles({
         before: {
             right: 0,

package/lib-amd/components/Checkbox/useCheckboxStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCheckboxStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\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\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > `]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\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 cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n 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/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
1	+ {"version":3,"file":"useCheckboxStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\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\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\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 cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n 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/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}

package/lib-commonjs/components/Checkbox/useCheckbox.js CHANGED Viewed

@@ -46,7 +46,7 @@ const useCheckbox_unstable = (props, ref) => {
     } else {
       checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Square16Filled, null) : React.createElement(react_icons_1.Square12Filled, null);
     }
-  } else {
+  } else if (checked) {
     checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Checkmark16Filled, null) : React.createElement(react_icons_1.Checkmark12Filled, null);
   }
   const state = {

package/lib-commonjs/components/Checkbox/useCheckbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;AAUA;AAOA;AACA;AAEA;;;;;;;;;AASO,MAAMA,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAAgC,KAAmB;EAC5G,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,KAAK,GAAG,QAAQ;IAAEC,IAAI,GAAG,QAAQ;IAAEC,aAAa,GAAG,OAAO;IAAEC;EAAQ,CAAE,GAAGP,KAAK;EAE1G,MAAM,CAACQ,OAAO,EAAEC,UAAU,CAAC,GAAGC,sCAAoB,CAAC;IACjDC,YAAY,EAAEX,KAAK,CAACY,cAAc;IAClCC,KAAK,EAAEb,KAAK,CAACQ,OAAO;IACpBM,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,WAAW,GAAGL,2CAAyB,CAAC;IAC5CV,KAAK;IACLgB,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU;GACpE,CAAC;EAEF,MAAMC,KAAK,GAAGV,OAAO,KAAK,OAAO;EACjC,MAAMW,EAAE,GAAGT,uBAAK,CAAC,WAAW,EAAEK,WAAW,CAACK,OAAO,CAACD,EAAE,CAAC;EAErD,IAAIE,aAAa;EACjB,IAAIH,KAAK,EAAE;IACT,IAAId,KAAK,KAAK,UAAU,EAAE;MACxBiB,aAAa,GAAGC,oBAACC,0BAAY,OAAG;KACjC,MAAM;MACLF,aAAa,GAAGhB,IAAI,KAAK,OAAO,GAAGiB,oBAACC,4BAAc,OAAG,GAAGD,oBAACC,4BAAc,OAAG;;GAE7E,MAAM;~~IACLF~~,aAAa,GAAGhB,IAAI,KAAK,OAAO,GAAGiB,oBAACC,+BAAiB,OAAG,GAAGD,oBAACC,+BAAiB,OAAG;;EAGlF,MAAMV,KAAK,GAAkB;IAC3BT,KAAK;IACLI,OAAO;IACPH,IAAI;IACJC,aAAa;IACbkB,UAAU,EAAE;MACVC,IAAI,EAAE,MAAM;MACZC,KAAK,EAAE,OAAO;MACdC,SAAS,EAAE,KAAK;MAChBC,KAAK,EAAEC;KACR;IACDJ,IAAI,EAAEf,kCAAgB,CAACV,KAAK,CAACyB,IAAI,EAAE;MACjCtB,QAAQ,EAAE,IAAI;MACd2B,YAAY,EAAE;QACZ7B,GAAG,EAAE8B,8BAAc,EAAmB;QACtC,GAAGhB,WAAW,CAACU;;KAElB,CAAC;IACFC,KAAK,EAAEhB,kCAAgB,CAACV,KAAK,CAAC0B,KAAK,EAAE;MACnCvB,QAAQ,EAAE,IAAI;MACd2B,YAAY,EAAE;QACZE,IAAI,EAAE,UAAU;QAChBb,EAAE;QACFlB,GAAG;QACHO,OAAO,EAAEA,OAAO,KAAK,IAAI;QACzB,GAAGO,WAAW,CAACK;;KAElB,CAAC;IACFQ,KAAK,EAAElB,kCAAgB,CAACV,KAAK,CAAC4B,KAAK,EAAE;MACnCzB,QAAQ,EAAE,KAAK;MACf2B,YAAY,EAAE;QACZG,OAAO,EAAEd,EAAE;QACXjB,QAAQ;QACRC,QAAQ;QACRE,IAAI,EAAE,QAAQ,CAAE;;KAEnB,CAAC;;IACFsB,SAAS,EAAEjB,kCAAgB,CAACV,KAAK,CAAC2B,SAAS,EAAE;MAC3CxB,QAAQ,EAAE,IAAI;MACd2B,YAAY,EAAE;QACZ,aAAa,EAAE,IAAI;QACnBI,QAAQ,EAAEb;;KAEb;GACF;EAEDR,KAAK,CAACa,KAAK,CAACnB,QAAQ,GAAGG,kCAAgB,CAACyB,EAAE,IAAG;IAC3C,MAAMC,GAAG,GAAGD,EAAE,CAACE,aAAa,CAACC,aAAa,GAAG,OAAO,GAAGH,EAAE,CAACE,aAAa,CAAC7B,OAAO;IAC/ED,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG4B,EAAE,EAAE;MAAE3B,OAAO,EAAE4B;IAAG,CAAE,CAAC;IAChC3B,UAAU,CAAC2B,GAAG,CAAC;EACjB,CAAC,CAAC;EAEF;EACA;EACA,MAAMG,QAAQ,GAAG7B,+BAAa,CAACG,KAAK,CAACa,KAAK,CAACzB,GAAG,CAAC;EAC/CY,KAAK,CAACa,KAAK,CAACzB,GAAG,GAAGsC,QAAQ;EAE1B;EACA;EACA7B,2CAAyB,CAAC,MAAK;IAC7B,IAAI6B,QAAQ,CAACC,OAAO,EAAE;MACpBD,QAAQ,CAACC,OAAO,CAACF,aAAa,GAAGpB,KAAK;;EAE1C,CAAC,EAAE,CAACqB,QAAQ,EAAErB,KAAK,CAAC,CAAC;EAErB,OAAOL,KAAK;AACd,CAAC;AA/FY4B,4BAAoB","names":["useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","react_utilities_1","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","React","react_icons_1","components","root","input","indicator","label","react_label_1","defaultProps","react_tabster_1","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\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 const { disabled, 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 {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\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"]}
1	+ {"version":3,"mappings":"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","names":["useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","react_utilities_1","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","React","react_icons_1","components","root","input","indicator","label","react_label_1","defaultProps","react_tabster_1","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\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 const { disabled, 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 size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\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"]}

package/lib-commonjs/components/Checkbox/useCheckboxStyles.js CHANGED Viewed

@@ -17,7 +17,7 @@ exports.checkboxClassNames = {
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
 const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("r1o1qdo1", "r1niodl4", [".r1o1qdo1{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1o1qdo1:focus{outline-style:none;}", ".r1o1qdo1:focus-visible{outline-style:none;}", ".r1o1qdo1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1o1qdo1[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:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1niodl4{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1niodl4:focus{outline-style:none;}", ".r1niodl4:focus-visible{outline-style:none;}", ".r1niodl4[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1niodl4[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:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
-const useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("rfcvz6l", null, [".rfcvz6l{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".rfcvz6l:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".rfcvz6l:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".rfcvz6l:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rfcvz6l:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rfcvz6l:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rfcvz6l:disabled{cursor:default;}", ".rfcvz6l:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__label{color:GrayText;}}", ".rfcvz6l:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
+const useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("r11jo426", null, [".r11jo426{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".r11jo426:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".r11jo426:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r11jo426:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".r11jo426:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r11jo426:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".r11jo426:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r11jo426:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".r11jo426:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".r11jo426:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".r11jo426:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".r11jo426:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".r11jo426:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r11jo426:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r11jo426:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r11jo426:disabled{cursor:default;}", ".r11jo426:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.r11jo426:disabled~.fui-Checkbox__label{color:GrayText;}}", ".r11jo426:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.r11jo426:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.r11jo426:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
 const useInputStyles = /*#__PURE__*/react_1.__styles({
   before: {
     j35jbq: ["f1e31b4d", "f1vgc2s3"]

package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAE;CACZ;AAED;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AAEjC,MAAMC,oBAAoB,gBAAGC,qBAAe,guEAI1C;AAEF,MAAMC,qBAAqB,gBAAGD,qBAAe,o2FAuH3C;AAEF,MAAME,cAAc,gBAAGF,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAW/B;AAEF,MAAMG,yBAAyB,gBAAGH,qBAAe,8qBAmB/C;AAEF,MAAMI,kBAAkB,gBAAGJ,gBAAU;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAUnC;AAEF;AACA,MAAMK,cAAc,gBAAGL,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwB/B;AAEF;;;AAGO,MAAMM,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAE5C,MAAMI,iBAAiB,GAAGZ,oBAAoB,EAAE;EAChDQ,KAAK,CAACd,IAAI,CAACmB,SAAS,GAAGZ,oBAAY,CAACR,0BAAkB,CAACC,IAAI,EAAEkB,iBAAiB,EAAEJ,KAAK,CAACd,IAAI,CAACmB,SAAS,CAAC;EAErG,MAAMC,kBAAkB,GAAGZ,qBAAqB,EAAE;EAClD,MAAMa,WAAW,GAAGZ,cAAc,EAAE;EACpCK,KAAK,CAACZ,KAAK,CAACiB,SAAS,GAAGZ,oBAAY,CAClCR,0BAAkB,CAACG,KAAK,EACxBkB,kBAAkB,EAClBH,IAAI,KAAK,OAAO,IAAII,WAAW,CAACC,KAAK,EACrCD,WAAW,CAACN,aAAa,CAAC,EAC1BD,KAAK,CAACZ,KAAK,CAACiB,SAAS,CACtB;EAED,MAAMI,sBAAsB,GAAGb,yBAAyB,EAAE;EAC1D,MAAMc,eAAe,GAAGb,kBAAkB,EAAE;EAC5C,IAAIG,KAAK,CAACX,SAAS,EAAE;IACnBW,KAAK,CAACX,SAAS,CAACgB,SAAS,GAAGZ,oBAAY,CACtCR,0BAAkB,CAACI,SAAS,EAC5BoB,sBAAsB,EACtBN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACF,KAAK,EACzCN,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAACC,QAAQ,EAChDX,KAAK,CAACX,SAAS,CAACgB,SAAS,CAC1B;;EAGH,MAAMO,WAAW,GAAGd,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACb,KAAK,EAAE;IACfa,KAAK,CAACb,KAAK,CAACkB,SAAS,GAAGZ,oBAAY,CAClCR,0BAAkB,CAACE,KAAK,EACxByB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,IAAI,CAAC,EACjBS,WAAW,CAACX,aAAa,CAAC,EAC1BD,KAAK,CAACb,KAAK,CAACkB,SAAS,CACtB;;EAGH,OAAOL,KAAK;AACd,CAAC;AAxCYf,kCAA0B","names":["exports","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","react_1","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useIndicatorStyles","useLabelStyles","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","className","inputBaseClassName","inputStyles","large","indicatorBaseClassName","indicatorStyles","circular","labelStyles","base"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\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\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > `]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\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 cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n 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/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAE;CACZ;AAED;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AAEjC,MAAMC,oBAAoB,gBAAGC,qBAAe,guEAI1C;AAEF,MAAMC,qBAAqB,gBAAGD,qBAAe,qyFAkH3C;AAEF,MAAME,cAAc,gBAAGF,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAW/B;AAEF,MAAMG,yBAAyB,gBAAGH,qBAAe,8qBAmB/C;AAEF,MAAMI,kBAAkB,gBAAGJ,gBAAU;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAUnC;AAEF;AACA,MAAMK,cAAc,gBAAGL,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwB/B;AAEF;;;AAGO,MAAMM,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAE5C,MAAMI,iBAAiB,GAAGZ,oBAAoB,EAAE;EAChDQ,KAAK,CAACd,IAAI,CAACmB,SAAS,GAAGZ,oBAAY,CAACR,0BAAkB,CAACC,IAAI,EAAEkB,iBAAiB,EAAEJ,KAAK,CAACd,IAAI,CAACmB,SAAS,CAAC;EAErG,MAAMC,kBAAkB,GAAGZ,qBAAqB,EAAE;EAClD,MAAMa,WAAW,GAAGZ,cAAc,EAAE;EACpCK,KAAK,CAACZ,KAAK,CAACiB,SAAS,GAAGZ,oBAAY,CAClCR,0BAAkB,CAACG,KAAK,EACxBkB,kBAAkB,EAClBH,IAAI,KAAK,OAAO,IAAII,WAAW,CAACC,KAAK,EACrCD,WAAW,CAACN,aAAa,CAAC,EAC1BD,KAAK,CAACZ,KAAK,CAACiB,SAAS,CACtB;EAED,MAAMI,sBAAsB,GAAGb,yBAAyB,EAAE;EAC1D,MAAMc,eAAe,GAAGb,kBAAkB,EAAE;EAC5C,IAAIG,KAAK,CAACX,SAAS,EAAE;IACnBW,KAAK,CAACX,SAAS,CAACgB,SAAS,GAAGZ,oBAAY,CACtCR,0BAAkB,CAACI,SAAS,EAC5BoB,sBAAsB,EACtBN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACF,KAAK,EACzCN,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAACC,QAAQ,EAChDX,KAAK,CAACX,SAAS,CAACgB,SAAS,CAC1B;;EAGH,MAAMO,WAAW,GAAGd,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACb,KAAK,EAAE;IACfa,KAAK,CAACb,KAAK,CAACkB,SAAS,GAAGZ,oBAAY,CAClCR,0BAAkB,CAACE,KAAK,EACxByB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,IAAI,CAAC,EACjBS,WAAW,CAACX,aAAa,CAAC,EAC1BD,KAAK,CAACb,KAAK,CAACkB,SAAS,CACtB;;EAGH,OAAOL,KAAK;AACd,CAAC;AAxCYf,kCAA0B","names":["exports","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","react_1","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useIndicatorStyles","useLabelStyles","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","className","inputBaseClassName","inputStyles","large","indicatorBaseClassName","indicatorStyles","circular","labelStyles","base"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\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\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\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 cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n 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/*\n Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.0.17",
+  "version": "9.0.19",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,12 +31,12 @@
     "@fluentui/scripts": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.13",
+    "@fluentui/react-field": "9.0.0-alpha.14",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.15",
-    "@fluentui/react-tabster": "^9.3.5",
+    "@fluentui/react-label": "^9.0.16",
+    "@fluentui/react-tabster": "^9.3.6",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.3.1",
+    "@fluentui/react-utilities": "^9.4.0",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },