🚨 Latest Research:Tanstack npm Packages Compromised in Ongoing Mini Shai-Hulud Supply-Chain Attack.Learn More →
@fluentui/react-checkbox
Advanced tools
@fluentui/react-checkbox - npm Package Compare versions
+4
-4
@@ -1,8 +0,8 @@ | ||
| import { ComponentProps } from '@fluentui/react-utilities'; | ||
| import { ComponentState } from '@fluentui/react-utilities'; | ||
| import type { ComponentProps } from '@fluentui/react-utilities'; | ||
| import type { ComponentState } from '@fluentui/react-utilities'; | ||
| import type { ForwardRefComponent } from '@fluentui/react-utilities'; | ||
| import type { JSXElement } from '@fluentui/react-utilities'; | ||
| import { Label } from '@fluentui/react-label'; | ||
| import type { Label } from '@fluentui/react-label'; | ||
| import * as React_2 from 'react'; | ||
| import { Slot } from '@fluentui/react-utilities'; | ||
| import type { Slot } from '@fluentui/react-utilities'; | ||
| import type { SlotClassNames } from '@fluentui/react-utilities'; | ||
@@ -9,0 +9,0 @@ |
@@ -5,3 +5,1 @@ "use strict"; | ||
| }); | ||
| const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard"); | ||
| const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react")); |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n /**\n * The root element of the Checkbox.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Checkbox's label.\n */\n label?: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the checkbox's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * The checkbox, with the checkmark icon as its child when checked.\n */\n // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n // but changing the signature would be a breaking change\n // TODO: change the default value to 'span' in the next major\n indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n ComponentProps<Partial<CheckboxSlots>, 'input'>,\n 'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n /**\n * The controlled value for the checkbox.\n *\n * @default false\n */\n checked?: 'mixed' | boolean;\n\n /**\n * Checkboxes don't support children. To add a label, use the `label` prop.\n */\n children?: never;\n\n /**\n * Whether the checkbox should be rendered as checked by default.\n */\n defaultChecked?: 'mixed' | boolean;\n\n /**\n * The position of the label relative to the checkbox indicator.\n *\n * @default after\n */\n labelPosition?: 'before' | 'after';\n\n /**\n * Callback to be called when the checked state value changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n /**\n * The shape of the checkbox indicator.\n *\n * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n * since it otherwise could be confused for a `RadioItem`.\n *\n * @default square\n */\n shape?: 'square' | 'circular';\n\n /**\n * The size of the checkbox indicator.\n *\n * @default medium\n */\n size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n\nexport type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;\n\nexport type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"} | ||
| {"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n /**\n * The root element of the Checkbox.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Checkbox's label.\n */\n label?: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the checkbox's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * The checkbox, with the checkmark icon as its child when checked.\n */\n // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n // but changing the signature would be a breaking change\n // TODO: change the default value to 'span' in the next major\n indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n ComponentProps<Partial<CheckboxSlots>, 'input'>,\n 'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n /**\n * The controlled value for the checkbox.\n *\n * @default false\n */\n checked?: 'mixed' | boolean;\n\n /**\n * Checkboxes don't support children. To add a label, use the `label` prop.\n */\n children?: never;\n\n /**\n * Whether the checkbox should be rendered as checked by default.\n */\n defaultChecked?: 'mixed' | boolean;\n\n /**\n * The position of the label relative to the checkbox indicator.\n *\n * @default after\n */\n labelPosition?: 'before' | 'after';\n\n /**\n * Callback to be called when the checked state value changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n /**\n * The shape of the checkbox indicator.\n *\n * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n * since it otherwise could be confused for a `RadioItem`.\n *\n * @default square\n */\n shape?: 'square' | 'circular';\n\n /**\n * The size of the checkbox indicator.\n *\n * @default medium\n */\n size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n\nexport type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;\n\nexport type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;\n"],"names":[],"mappings":""} |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxBaseState): JSXElement => {\n assertSlots<CheckboxSlots>(state);\n\n return (\n <state.root>\n <state.input />\n {state.labelPosition === 'before' && state.label && <state.label />}\n {state.indicator && <state.indicator />}\n {state.labelPosition === 'after' && state.label && <state.label />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":";;;;+BAOaC;;;;;;4BANb,iCAAiD;gCAErB,4BAA4B;AAIjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;YAC/DJ,MAAMK,SAAS,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,SAAS,EAAA,CAAA;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAGrE,EAAE"} | ||
| {"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxBaseState): JSXElement => {\n assertSlots<CheckboxSlots>(state);\n\n return (\n <state.root>\n <state.input />\n {state.labelPosition === 'before' && state.label && <state.label />}\n {state.indicator && <state.indicator />}\n {state.labelPosition === 'after' && state.label && <state.label />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":";;;;+BAOaC;;;;;;4BANb,iCAAiD;gCAErB,4BAA4B;AAIjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;YAC/DJ,MAAMK,SAAS,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,SAAS,EAAA,CAAA;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAGrE,EAAE"} |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n mergeCallbacks,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n Checkmark12Filled,\n Checkmark16Filled,\n Square12Filled,\n Square16Filled,\n CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n 'use no memo';\n\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n const { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n // Override indicator children with size+shape-appropriate icon\n const mixed = state.checked === 'mixed';\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = <CircleFilled />;\n } else {\n checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n }\n } else if (state.checked) {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n if (state.indicator) {\n state.indicator.children ??= checkmarkIcon;\n }\n\n return {\n shape,\n size,\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n label: Label,\n },\n label: slot.optional(props.label, {\n defaultProps: {\n ...state.label,\n size: 'medium',\n },\n elementType: Label,\n }),\n };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n props: CheckboxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n 'use no memo';\n\n const { disabled = false, required, labelPosition = 'after', onChange } = props;\n\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\n const state: CheckboxBaseState = {\n checked,\n disabled,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: 'label',\n },\n root: slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n }),\n input: slot.always(props.input, {\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n label: slot.optional(props.label, {\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n },\n elementType: 'label',\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n },\n elementType: 'div',\n }),\n };\n\n state.input.onChange = mergeCallbacks(state.input.onChange, ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange?.(ev, { checked: val });\n setChecked(val);\n });\n\n // Create a ref object for the input element so we can use it to set the indeterminate prop.\n // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n const inputRef = useMergedRefs(state.input.ref);\n state.input.ref = inputRef;\n\n // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = mixed;\n }\n }, [inputRef, mixed]);\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"AAAA;;;;;;;;;;;;4BAsFayB;eAAAA;;IArDAT,oBAAAA;;;;;iEA/BU,QAAQ;4BACe,wBAAwB;gCAS/D,4BAA4B;4BAQ5B,wBAAwB;4BACT,wBAAwB;8BACf,0BAA0B;AAWlD,6BAA6B,CAACC,OAAsBC;IACzD;IAEA,+CAA+C;IAC/CD,YAAQhB,yCAAAA,EAA8BgB,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,QAAQ,QAAQ,EAAEC,OAAO,QAAQ,EAAE,GAAGC,eAAe,GAAGN;IAEhE,MAAMO,QAAQC,yBAAyBF,eAAeL;IAEtD,+DAA+D;IAC/D,MAAMQ,QAAQF,MAAMG,OAAO,KAAK;IAChC,IAAIC;IACJ,IAAIF,OAAO;QACT,IAAIL,UAAU,YAAY;YACxBO,gBAAAA,WAAAA,GAAgB,OAAA,aAAA,CAACf,wBAAAA,EAAAA;QACnB,OAAO;YACLe,gBAAgBN,SAAS,UAAA,WAAA,GAAU,OAAA,aAAA,CAACV,0BAAAA,EAAAA,QAAAA,WAAAA,GAAoB,OAAA,aAAA,CAACD,0BAAAA,EAAAA;QAC3D;IACF,OAAO,IAAIa,MAAMG,OAAO,EAAE;QACxBC,gBAAgBN,SAAS,UAAA,WAAA,GAAU,OAAA,aAAA,CAACZ,6BAAAA,EAAAA,QAAAA,WAAAA,GAAuB,OAAA,aAAA,CAACD,6BAAAA,EAAAA;IAC9D;IAEA,IAAIe,MAAMK,SAAS,EAAE;YACnBL;;QAAAA,CAAAA,YAAAA,CAAAA,mBAAAA,MAAMK,SAAAA,AAAS,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAhBN,iBAAgBM,QAAAA,GAAaF;IAC/B;IAEA,OAAO;QACLP;QACAC;QACA,GAAGE,KAAK;QACRO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,MAAMO,UAAU;YACnBC,OAAOlB,iBAAAA;QACT;QACAkB,OAAOxB,oBAAAA,CAAKyB,QAAQ,CAAChB,MAAMe,KAAK,EAAE;YAChCE,cAAc;gBACZ,GAAGV,MAAMQ,KAAK;gBACdV,MAAM;YACR;YACAa,aAAarB,iBAAAA;QACf;IACF;AACF,EAAE;AASK,iCAAiC,CACtCG,OACAC;IAEA;IAEA,MAAM,EAAEkB,WAAW,KAAK,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAE,GAAGtB;IAE1E,MAAM,CAACU,SAASa,WAAW,OAAGrC,oCAAAA,EAAqB;QACjDsC,cAAcxB,MAAMyB,cAAc;QAClClB,OAAOP,MAAMU,OAAO;QACpBgB,cAAc;IAChB;IAEA,MAAMC,kBAAc1C,yCAAAA,EAA0B;QAC5Ce;QACA4B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMpB,QAAQC,YAAY;IAC1B,MAAMoB,KAAK1C,yBAAAA,EAAM,aAAauC,YAAYI,OAAO,CAACD,EAAE;IAEpD,MAAMvB,QAA2B;QAC/BG;QACAS;QACAE;QACAP,YAAY;YACVkB,MAAM;YACNC,OAAO;YACPrB,WAAW;YACXG,OAAO;QACT;QACAiB,MAAMzC,oBAAAA,CAAK2C,MAAM,CAAClC,MAAMgC,IAAI,EAAE;YAC5Bf,cAAc;gBACZhB,SAAKH,4BAAAA;gBACL,GAAG6B,YAAYK,IAAI;YACrB;YACAd,aAAa;QACf;QACAe,OAAO1C,oBAAAA,CAAK2C,MAAM,CAAClC,MAAMiC,KAAK,EAAE;YAC9BhB,cAAc;gBACZkB,MAAM;gBACNL;gBACA7B;gBACAS,SAASA,YAAY;gBACrB,GAAGiB,YAAYI,OAAO;YACxB;YACAb,aAAa;QACf;QACAH,OAAOxB,oBAAAA,CAAKyB,QAAQ,CAAChB,MAAMe,KAAK,EAAE;YAChCE,cAAc;gBACZmB,SAASN;gBACTX;gBACAC;YACF;YACAF,aAAa;QACf;QACAN,WAAWrB,oBAAAA,CAAKyB,QAAQ,CAAChB,MAAMY,SAAS,EAAE;YACxCyB,iBAAiB;YACjBpB,cAAc;gBACZ,eAAe;YACjB;YACAC,aAAa;QACf;IACF;IAEAX,MAAM0B,KAAK,CAACX,QAAQ,OAAGnC,8BAAAA,EAAeoB,MAAM0B,KAAK,CAACX,QAAQ,EAAEgB,CAAAA;QAC1D,MAAMC,MAAMD,GAAGE,aAAa,CAACC,aAAa,GAAG,UAAUH,GAAGE,aAAa,CAAC9B,OAAO;QAC/EY,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWgB,IAAI;YAAE5B,SAAS6B;QAAI;QAC9BhB,WAAWgB;IACb;IAEA,4FAA4F;IAC5F,sFAAsF;IACtF,MAAMG,eAAWpD,6BAAAA,EAAciB,MAAM0B,KAAK,CAAChC,GAAG;IAC9CM,MAAM0B,KAAK,CAAChC,GAAG,GAAGyC;IAElB,kGAAkG;IAClG,4FAA4F;IAC5FrD,6CAAAA,EAA0B;QACxB,IAAIqD,SAASC,OAAO,EAAE;YACpBD,SAASC,OAAO,CAACF,aAAa,GAAGhC;QACnC;IACF,GAAG;QAACiC;QAAUjC;KAAM;IAEpB,OAAOF;AACT,EAAE"} | ||
| {"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n mergeCallbacks,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n Checkmark12Filled,\n Checkmark16Filled,\n Square12Filled,\n Square16Filled,\n CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n 'use no memo';\n\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n const { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n // Override indicator children with size+shape-appropriate icon\n const mixed = state.checked === 'mixed';\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = <CircleFilled />;\n } else {\n checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n }\n } else if (state.checked) {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n if (state.indicator) {\n state.indicator.children ??= checkmarkIcon;\n }\n\n return {\n shape,\n size,\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n label: Label,\n },\n label: slot.optional(props.label, {\n defaultProps: {\n ...state.label,\n size: 'medium',\n },\n elementType: Label,\n }),\n };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n props: CheckboxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n 'use no memo';\n\n const { disabled = false, required, labelPosition = 'after', onChange } = props;\n\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\n const state: CheckboxBaseState = {\n checked,\n disabled,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: 'label',\n },\n root: slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n }),\n input: slot.always(props.input, {\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n label: slot.optional(props.label, {\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n },\n elementType: 'label',\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n },\n elementType: 'div',\n }),\n };\n\n state.input.onChange = mergeCallbacks(state.input.onChange, ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange?.(ev, { checked: val });\n setChecked(val);\n });\n\n // Create a ref object for the input element so we can use it to set the indeterminate prop.\n // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n const inputRef = useMergedRefs(state.input.ref);\n state.input.ref = inputRef;\n\n // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = mixed;\n }\n }, [inputRef, mixed]);\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"AAAA;;;;;;;;;;;;4BAsFayB;eAAAA;;IArDAT,oBAAAA;;;;;iEA/BU,QAAQ;4BACe,wBAAwB;gCAS/D,4BAA4B;4BAQ5B,wBAAwB;4BACT,wBAAwB;8BACf,0BAA0B;AAWlD,6BAA6B,CAACC,OAAsBC;IACzD;IAEA,+CAA+C;IAC/CD,YAAQhB,yCAAAA,EAA8BgB,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,QAAQ,QAAQ,EAAEC,OAAO,QAAQ,EAAE,GAAGC,eAAe,GAAGN;IAEhE,MAAMO,QAAQC,yBAAyBF,eAAeL;IAEtD,+DAA+D;IAC/D,MAAMQ,QAAQF,MAAMG,OAAO,KAAK;IAChC,IAAIC;IACJ,IAAIF,OAAO;QACT,IAAIL,UAAU,YAAY;YACxBO,gBAAAA,WAAAA,GAAgB,OAAA,aAAA,CAACf,wBAAAA,EAAAA;QACnB,OAAO;YACLe,gBAAgBN,SAAS,UAAA,WAAA,GAAU,OAAA,aAAA,CAACV,0BAAAA,EAAAA,QAAAA,WAAAA,GAAoB,OAAA,aAAA,CAACD,0BAAAA,EAAAA;QAC3D;IACF,OAAO,IAAIa,MAAMG,OAAO,EAAE;QACxBC,gBAAgBN,SAAS,UAAA,WAAA,GAAU,OAAA,aAAA,CAACZ,6BAAAA,EAAAA,QAAAA,WAAAA,GAAuB,OAAA,aAAA,CAACD,6BAAAA,EAAAA;IAC9D;IAEA,IAAIe,MAAMK,SAAS,EAAE;YACnBL;;QAAAA,CAAAA,YAAAA,CAAAA,mBAAAA,MAAMK,SAAAA,AAAS,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAhBN,iBAAgBM,QAAAA,GAAaF;IAC/B;IAEA,OAAO;QACLP;QACAC;QACA,GAAGE,KAAK;QACRO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,MAAMO,UAAU;YACnBC,OAAOlB,iBAAAA;QACT;QACAkB,OAAOxB,oBAAAA,CAAKyB,QAAQ,CAAChB,MAAMe,KAAK,EAAE;YAChCE,cAAc;gBACZ,GAAGV,MAAMQ,KAAK;gBACdV,MAAM;YACR;YACAa,aAAarB,iBAAAA;QACf;IACF;AACF,EAAE;AASK,iCAAiC,CACtCG,OACAC;IAEA;IAEA,MAAM,EAAEkB,WAAW,KAAK,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAE,GAAGtB;IAE1E,MAAM,CAACU,SAASa,WAAW,OAAGrC,oCAAAA,EAAqB;QACjDsC,cAAcxB,MAAMyB,cAAc;QAClClB,OAAOP,MAAMU,OAAO;QACpBgB,cAAc;IAChB;IAEA,MAAMC,kBAAc1C,yCAAAA,EAA0B;QAC5Ce;QACA4B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMpB,QAAQC,YAAY;IAC1B,MAAMoB,KAAK1C,yBAAAA,EAAM,aAAauC,YAAYI,OAAO,CAACD,EAAE;IAEpD,MAAMvB,QAA2B;QAC/BG;QACAS;QACAE;QACAP,YAAY;YACVkB,MAAM;YACNC,OAAO;YACPrB,WAAW;YACXG,OAAO;QACT;QACAiB,MAAMzC,oBAAAA,CAAK2C,MAAM,CAAClC,MAAMgC,IAAI,EAAE;YAC5Bf,cAAc;gBACZhB,SAAKH,4BAAAA;gBACL,GAAG6B,YAAYK,IAAI;YACrB;YACAd,aAAa;QACf;QACAe,OAAO1C,oBAAAA,CAAK2C,MAAM,CAAClC,MAAMiC,KAAK,EAAE;YAC9BhB,cAAc;gBACZkB,MAAM;gBACNL;gBACA7B;gBACAS,SAASA,YAAY;gBACrB,GAAGiB,YAAYI,OAAO;YACxB;YACAb,aAAa;QACf;QACAH,OAAOxB,oBAAAA,CAAKyB,QAAQ,CAAChB,MAAMe,KAAK,EAAE;YAChCE,cAAc;gBACZmB,SAASN;gBACTX;gBACAC;YACF;YACAF,aAAa;QACf;QACAN,WAAWrB,oBAAAA,CAAKyB,QAAQ,CAAChB,MAAMY,SAAS,EAAE;YACxCyB,iBAAiB;YACjBpB,cAAc;gBACZ,eAAe;YACjB;YACAC,aAAa;QACf;IACF;IAEAX,MAAM0B,KAAK,CAACX,QAAQ,OAAGnC,8BAAAA,EAAeoB,MAAM0B,KAAK,CAACX,QAAQ,EAAEgB,CAAAA;QAC1D,MAAMC,MAAMD,GAAGE,aAAa,CAACC,aAAa,GAAG,UAAUH,GAAGE,aAAa,CAAC9B,OAAO;QAC/EY,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWgB,IAAI;YAAE5B,SAAS6B;QAAI;QAC9BhB,WAAWgB;IACb;IAEA,4FAA4F;IAC5F,sFAAsF;IACtF,MAAMG,eAAWpD,6BAAAA,EAAciB,MAAM0B,KAAK,CAAChC,GAAG;IAC9CM,MAAM0B,KAAK,CAAChC,GAAG,GAAGyC;IAElB,kGAAkG;IAClG,4FAA4F;IAC5FrD,6CAAAA,EAA0B;QACxB,IAAIqD,SAASC,OAAO,EAAE;YACpBD,SAASC,OAAO,CAACF,aAAa,GAAGhC;QACnC;IACF,GAAG;QAACiC;QAAUjC;KAAM;IAEpB,OAAOF;AACT,EAAE"} |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\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 cursor: 'pointer',\n maxWidth: 'fit-content',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n\n checked: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n ':hover': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n },\n\n ':active': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n\n mixed: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n ':hover': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n },\n\n ':active': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n\n disabled: {\n cursor: 'default',\n\n color: tokens.colorNeutralForegroundDisabled,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [vars.indicatorColor]: 'GrayText',\n },\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\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 color: `var(${vars.indicatorColor})`,\n backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n borderStyle: 'solid',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\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: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'inherit',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n },\n\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 'use no memo';\n\n const { checked, disabled, labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n checkboxClassNames.root,\n rootBaseClassName,\n disabled\n ? rootStyles.disabled\n : checked === 'mixed'\n ? rootStyles.mixed\n : checked\n ? rootStyles.checked\n : rootStyles.unchecked,\n state.root.className,\n );\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"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","maxWidth","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"} | ||
| {"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { 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// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\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 cursor: 'pointer',\n maxWidth: 'fit-content',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n\n checked: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n ':hover': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n },\n\n ':active': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n\n mixed: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n ':hover': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n },\n\n ':active': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n\n disabled: {\n cursor: 'default',\n\n color: tokens.colorNeutralForegroundDisabled,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [vars.indicatorColor]: 'GrayText',\n },\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\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 color: `var(${vars.indicatorColor})`,\n backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n borderStyle: 'solid',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\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: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'inherit',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n },\n\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 'use no memo';\n\n const { checked, disabled, labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n checkboxClassNames.root,\n rootBaseClassName,\n disabled\n ? rootStyles.disabled\n : checked === 'mixed'\n ? rootStyles.mixed\n : checked\n ? rootStyles.checked\n : rootStyles.unchecked,\n state.root.className,\n );\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"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","maxWidth","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"} |
@@ -1,1 +0,1 @@ | ||
| import * as React from 'react'; | ||
| export { }; |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n /**\n * The root element of the Checkbox.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Checkbox's label.\n */\n label?: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the checkbox's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * The checkbox, with the checkmark icon as its child when checked.\n */\n // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n // but changing the signature would be a breaking change\n // TODO: change the default value to 'span' in the next major\n indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n ComponentProps<Partial<CheckboxSlots>, 'input'>,\n 'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n /**\n * The controlled value for the checkbox.\n *\n * @default false\n */\n checked?: 'mixed' | boolean;\n\n /**\n * Checkboxes don't support children. To add a label, use the `label` prop.\n */\n children?: never;\n\n /**\n * Whether the checkbox should be rendered as checked by default.\n */\n defaultChecked?: 'mixed' | boolean;\n\n /**\n * The position of the label relative to the checkbox indicator.\n *\n * @default after\n */\n labelPosition?: 'before' | 'after';\n\n /**\n * Callback to be called when the checked state value changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n /**\n * The shape of the checkbox indicator.\n *\n * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n * since it otherwise could be confused for a `RadioItem`.\n *\n * @default square\n */\n shape?: 'square' | 'circular';\n\n /**\n * The size of the checkbox indicator.\n *\n * @default medium\n */\n size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n\nexport type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;\n\nexport type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"} | ||
| {"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n /**\n * The root element of the Checkbox.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n * All other native props will be applied to the primary slot: `input`\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The Checkbox's label.\n */\n label?: Slot<typeof Label>;\n\n /**\n * Hidden input that handles the checkbox's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * The checkbox, with the checkmark icon as its child when checked.\n */\n // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n // but changing the signature would be a breaking change\n // TODO: change the default value to 'span' in the next major\n indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n ComponentProps<Partial<CheckboxSlots>, 'input'>,\n 'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n /**\n * The controlled value for the checkbox.\n *\n * @default false\n */\n checked?: 'mixed' | boolean;\n\n /**\n * Checkboxes don't support children. To add a label, use the `label` prop.\n */\n children?: never;\n\n /**\n * Whether the checkbox should be rendered as checked by default.\n */\n defaultChecked?: 'mixed' | boolean;\n\n /**\n * The position of the label relative to the checkbox indicator.\n *\n * @default after\n */\n labelPosition?: 'before' | 'after';\n\n /**\n * Callback to be called when the checked state value changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n /**\n * The shape of the checkbox indicator.\n *\n * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n * since it otherwise could be confused for a `RadioItem`.\n *\n * @default square\n */\n shape?: 'square' | 'circular';\n\n /**\n * The size of the checkbox indicator.\n *\n * @default medium\n */\n size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n\nexport type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;\n\nexport type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;\n"],"names":[],"mappings":"AAyGA,WAAsE"} |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxBaseState): JSXElement => {\n assertSlots<CheckboxSlots>(state);\n\n return (\n <state.root>\n <state.input />\n {state.labelPosition === 'before' && state.label && <state.label />}\n {state.indicator && <state.indicator />}\n {state.labelPosition === 'after' && state.label && <state.label />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC/DJ,MAAMK,SAAS,kBAAI,KAACL,MAAMK,SAAS;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAGrE,EAAE"} | ||
| {"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxBaseState): JSXElement => {\n assertSlots<CheckboxSlots>(state);\n\n return (\n <state.root>\n <state.input />\n {state.labelPosition === 'before' && state.label && <state.label />}\n {state.indicator && <state.indicator />}\n {state.labelPosition === 'after' && state.label && <state.label />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC/DJ,MAAMK,SAAS,kBAAI,KAACL,MAAMK,SAAS;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAGrE,EAAE"} |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n mergeCallbacks,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n Checkmark12Filled,\n Checkmark16Filled,\n Square12Filled,\n Square16Filled,\n CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n 'use no memo';\n\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n const { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n // Override indicator children with size+shape-appropriate icon\n const mixed = state.checked === 'mixed';\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = <CircleFilled />;\n } else {\n checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n }\n } else if (state.checked) {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n if (state.indicator) {\n state.indicator.children ??= checkmarkIcon;\n }\n\n return {\n shape,\n size,\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n label: Label,\n },\n label: slot.optional(props.label, {\n defaultProps: {\n ...state.label,\n size: 'medium',\n },\n elementType: Label,\n }),\n };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n props: CheckboxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n 'use no memo';\n\n const { disabled = false, required, labelPosition = 'after', onChange } = props;\n\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\n const state: CheckboxBaseState = {\n checked,\n disabled,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: 'label',\n },\n root: slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n }),\n input: slot.always(props.input, {\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n label: slot.optional(props.label, {\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n },\n elementType: 'label',\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n },\n elementType: 'div',\n }),\n };\n\n state.input.onChange = mergeCallbacks(state.input.onChange, ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange?.(ev, { checked: val });\n setChecked(val);\n });\n\n // Create a ref object for the input element so we can use it to set the indeterminate prop.\n // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n const inputRef = useMergedRefs(state.input.ref);\n state.input.ref = inputRef;\n\n // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = mixed;\n }\n }, [inputRef, mixed]);\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"} | ||
| {"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n mergeCallbacks,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n Checkmark12Filled,\n Checkmark16Filled,\n Square12Filled,\n Square16Filled,\n CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n 'use no memo';\n\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n const { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n // Override indicator children with size+shape-appropriate icon\n const mixed = state.checked === 'mixed';\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = <CircleFilled />;\n } else {\n checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n }\n } else if (state.checked) {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n if (state.indicator) {\n state.indicator.children ??= checkmarkIcon;\n }\n\n return {\n shape,\n size,\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n label: Label,\n },\n label: slot.optional(props.label, {\n defaultProps: {\n ...state.label,\n size: 'medium',\n },\n elementType: Label,\n }),\n };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n props: CheckboxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n 'use no memo';\n\n const { disabled = false, required, labelPosition = 'after', onChange } = props;\n\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\n const state: CheckboxBaseState = {\n checked,\n disabled,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: 'label',\n },\n root: slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n }),\n input: slot.always(props.input, {\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n label: slot.optional(props.label, {\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n },\n elementType: 'label',\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n },\n elementType: 'div',\n }),\n };\n\n state.input.onChange = mergeCallbacks(state.input.onChange, ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange?.(ev, { checked: val });\n setChecked(val);\n });\n\n // Create a ref object for the input element so we can use it to set the indeterminate prop.\n // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n const inputRef = useMergedRefs(state.input.ref);\n state.input.ref = inputRef;\n\n // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = mixed;\n }\n }, [inputRef, mixed]);\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"} |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\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 cursor: 'pointer',\n maxWidth: 'fit-content',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n\n checked: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n ':hover': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n },\n\n ':active': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n\n mixed: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n ':hover': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n },\n\n ':active': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n\n disabled: {\n cursor: 'default',\n\n color: tokens.colorNeutralForegroundDisabled,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [vars.indicatorColor]: 'GrayText',\n },\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\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 color: `var(${vars.indicatorColor})`,\n backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n borderStyle: 'solid',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\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: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'inherit',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n },\n\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 'use no memo';\n\n const { checked, disabled, labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n checkboxClassNames.root,\n rootBaseClassName,\n disabled\n ? rootStyles.disabled\n : checked === 'mixed'\n ? rootStyles.mixed\n : checked\n ? rootStyles.checked\n : rootStyles.unchecked,\n state.root.className,\n );\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"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","maxWidth","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"} | ||
| {"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { 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// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\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 cursor: 'pointer',\n maxWidth: 'fit-content',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n\n checked: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n ':hover': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n },\n\n ':active': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n },\n },\n\n mixed: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n ':hover': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n },\n\n ':active': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n\n disabled: {\n cursor: 'default',\n\n color: tokens.colorNeutralForegroundDisabled,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [vars.indicatorColor]: 'GrayText',\n },\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\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 color: `var(${vars.indicatorColor})`,\n backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n borderStyle: 'solid',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\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: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n color: 'inherit',\n cursor: 'inherit',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n },\n\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 'use no memo';\n\n const { checked, disabled, labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n checkboxClassNames.root,\n rootBaseClassName,\n disabled\n ? rootStyles.disabled\n : checked === 'mixed'\n ? rootStyles.mixed\n : checked\n ? rootStyles.checked\n : rootStyles.unchecked,\n state.root.className,\n );\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"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","maxWidth","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"} |
+6
-6
| { | ||
| "name": "@fluentui/react-checkbox", | ||
| "version": "9.6.0", | ||
| "version": "9.6.1", | ||
| "description": "Fluent UI checkbox component", | ||
@@ -15,10 +15,10 @@ "main": "lib-commonjs/index.js", | ||
| "dependencies": { | ||
| "@fluentui/react-field": "^9.5.0", | ||
| "@fluentui/react-field": "^9.5.1", | ||
| "@fluentui/react-icons": "^2.0.245", | ||
| "@fluentui/react-jsx-runtime": "^9.4.1", | ||
| "@fluentui/react-label": "^9.4.0", | ||
| "@fluentui/react-jsx-runtime": "^9.4.2", | ||
| "@fluentui/react-label": "^9.4.1", | ||
| "@fluentui/react-shared-contexts": "^9.26.2", | ||
| "@fluentui/react-tabster": "^9.26.13", | ||
| "@fluentui/react-tabster": "^9.26.14", | ||
| "@fluentui/react-theme": "^9.2.1", | ||
| "@fluentui/react-utilities": "^9.26.2", | ||
| "@fluentui/react-utilities": "^9.26.3", | ||
| "@griffel/react": "^1.5.32", | ||
@@ -25,0 +25,0 @@ "@swc/helpers": "^0.5.1" |
Sorry, the diff of this file is too big to display
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
341763
0.21%Worsened metrics
- Lines of code
1419
-0.14%