@fluentui/react-checkbox 9.0.11 → 9.0.13

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

@@ -0,0 +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 {\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

@@ -0,0 +1,154 @@
+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;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCheckboxStyles_unstable = exports.checkboxClassNames = void 0;
+    exports.checkboxClassNames = {
+        root: 'fui-Checkbox',
+        label: 'fui-Checkbox__label',
+        input: 'fui-Checkbox__input',
+        indicator: 'fui-Checkbox__indicator',
+    };
+    // The indicator size is used by the indicator and label styles
+    var indicatorSizeMedium = '16px';
+    var indicatorSizeLarge = '20px';
+    var useRootStyles = react_1.makeStyles({
+        base: tslib_1.__assign({ position: 'relative', display: 'inline-flex' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })),
+    });
+    var useInputStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', cursor: 'pointer', height: '100%' }, react_1.shorthands.margin(0)), (_a = { opacity: 0, position: 'absolute', top: 0 }, _a[":not(:checked):not(:indeterminate) ~ ." + exports.checkboxClassNames.indicator + " > *"] = {
+            opacity: 0,
+        }, 
+        // Colors for the unchecked state
+        _a[':enabled:not(:checked):not(:indeterminate)'] = (_b = {},
+            _b["& ~ ." + exports.checkboxClassNames.label] = {
+                color: react_theme_1.tokens.colorNeutralForeground3,
+            },
+            _b["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessible)),
+            _b[':hover'] = (_c = {},
+                _c["& ~ ." + exports.checkboxClassNames.label] = {
+                    color: react_theme_1.tokens.colorNeutralForeground2,
+                },
+                _c["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessibleHover)),
+                _c),
+            _b[':active:hover'] = (_d = {},
+                _d["& ~ ." + exports.checkboxClassNames.label] = {
+                    color: react_theme_1.tokens.colorNeutralForeground1,
+                },
+                _d["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessiblePressed)),
+                _d),
+            _b), 
+        // Colors for the checked state
+        _a[':enabled:checked:not(:indeterminate)'] = (_e = {},
+            _e["& ~ ." + exports.checkboxClassNames.label] = {
+                color: react_theme_1.tokens.colorNeutralForeground1,
+            },
+            _e["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground, color: react_theme_1.tokens.colorNeutralForegroundInverted }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackground)),
+            _e[':hover'] = (_f = {},
+                _f["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackgroundHover)),
+                _f),
+            _e[':active:hover'] = (_g = {},
+                _g["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackgroundPressed)),
+                _g),
+            _e), 
+        // Colors for the mixed state
+        _a[':enabled:indeterminate'] = (_h = {},
+            _h["& ~ ." + exports.checkboxClassNames.label] = {
+                color: react_theme_1.tokens.colorNeutralForeground1,
+            },
+            _h["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStroke)), { color: react_theme_1.tokens.colorCompoundBrandForeground1 }),
+            _h[':hover'] = (_j = {},
+                _j["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokeHover)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Hover }),
+                _j),
+            _h[':active:hover'] = (_k = {},
+                _k["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokePressed)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed }),
+                _k),
+            _h), _a[':disabled'] = (_l = {
+                cursor: 'default'
+            },
+            _l["& ~ ." + exports.checkboxClassNames.label] = {
+                cursor: 'default',
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                '@media (forced-colors: active)': {
+                    color: 'GrayText',
+                },
+            },
+            _l["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, '@media (forced-colors: active)': {
+                    color: 'GrayText',
+                } }),
+            _l["& ~ ." + exports.checkboxClassNames.indicator + " svg"] = {
+                '@media (forced-colors: active)': {
+                    color: 'GrayText',
+                },
+            },
+            _l), _a)),
+        before: {
+            right: 0,
+        },
+        after: {
+            left: 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.
+        medium: {
+            width: "calc(" + indicatorSizeMedium + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
+        },
+        large: {
+            width: "calc(" + indicatorSizeLarge + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
+        },
+    });
+    var useIndicatorStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ alignSelf: 'flex-start', boxSizing: 'border-box', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }, react_1.shorthands.overflow('hidden')), react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall)), react_1.shorthands.margin(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)), { fill: 'currentColor', pointerEvents: 'none' }),
+        medium: {
+            fontSize: '12px',
+            height: indicatorSizeMedium,
+            width: indicatorSizeMedium,
+        },
+        large: {
+            fontSize: '16px',
+            height: indicatorSizeLarge,
+            width: indicatorSizeLarge,
+        },
+        circular: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
+    });
+    var useLabelStyles = react_1.makeStyles({
+        base: tslib_1.__assign({ alignSelf: 'center', color: 'inherit', cursor: 'pointer' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)),
+        before: {
+            paddingRight: react_theme_1.tokens.spacingHorizontalXS,
+        },
+        after: {
+            paddingLeft: react_theme_1.tokens.spacingHorizontalXS,
+        },
+        // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
+        // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.
+        medium: {
+            marginTop: "calc((" + indicatorSizeMedium + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
+            marginBottom: "calc((" + indicatorSizeMedium + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
+        },
+        large: {
+            marginTop: "calc((" + indicatorSizeLarge + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
+            marginBottom: "calc((" + indicatorSizeLarge + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
+        },
+    });
+    /**
+     * Apply styling to the Checkbox slots based on the state
+     */
+    var useCheckboxStyles_unstable = function (state) {
+        var rootStyles = useRootStyles();
+        state.root.className = react_1.mergeClasses(exports.checkboxClassNames.root, rootStyles.base, state.root.className);
+        var labelPosition = state.labelPosition, shape = state.shape, size = state.size;
+        var inputStyles = useInputStyles();
+        state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputStyles.base, inputStyles[size], inputStyles[labelPosition], state.input.className);
+        var indicatorStyles = useIndicatorStyles();
+        if (state.indicator) {
+            state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[size], shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+        }
+        var labelStyles = useLabelStyles();
+        if (state.label) {
+            state.label.className = react_1.mergeClasses(exports.checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
+        }
+        return state;
+    };
+    exports.useCheckboxStyles_unstable = useCheckboxStyles_unstable;
+});
+//# sourceMappingURL=useCheckboxStyles.js.map

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

@@ -0,0 +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 { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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 useRootStyles = makeStyles({\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    ...shorthands.margin(0),\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n\n    // When unchecked, hide the the checkmark icon (child of the indicator slot)\n    [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n      opacity: 0,\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked):not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked:not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n        },\n      },\n    },\n\n    // Colors for the mixed state\n    ':enabled:indeterminate': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${checkboxClassNames.label}`]: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.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\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\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  medium: {\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n\n  medium: {\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium,\n  },\n\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\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 rootStyles = useRootStyles();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n  const { labelPosition, shape, size } = state;\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorStyles.base,\n      indicatorStyles[size],\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/CheckboxField/CheckboxField.js

@@ -0,0 +1,19 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-field", "../../Checkbox"], function (require, exports, tslib_1, React, react_field_1, Checkbox_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CheckboxField = exports.checkboxFieldClassNames = void 0;
+    exports.checkboxFieldClassNames = react_field_1.getFieldClassNames('CheckboxField');
+    exports.CheckboxField = React.forwardRef(function (props, ref) {
+        var fieldLabel = props.fieldLabel, required = props.required, label = props.label, control = props.control, restOfProps = tslib_1.__rest(props, ["fieldLabel", "required", "label", "control"]);
+        props = tslib_1.__assign({ 
+            // Use the fieldLabel prop as the Field's label
+            label: fieldLabel, 
+            // Use the label prop as the Checkbox's label
+            control: tslib_1.__assign({ label: label, required: required }, control) }, restOfProps);
+        var state = react_field_1.useField_unstable(props, ref, { component: Checkbox_1.Checkbox, classNames: exports.checkboxFieldClassNames });
+        react_field_1.useFieldStyles_unstable(state);
+        return react_field_1.renderField_unstable(state);
+    });
+    exports.CheckboxField.displayName = 'CheckboxField';
+});
+//# sourceMappingURL=CheckboxField.js.map

package/lib-amd/components/CheckboxField/CheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":";;;;IAyBa,QAAA,uBAAuB,GAAG,gCAAkB,CAAC,eAAe,CAAC,CAAC;IAE9D,QAAA,aAAa,GAA4C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACxF,IAAA,UAAU,GAA+C,KAAK,WAApD,EAAE,QAAQ,GAAqC,KAAK,SAA1C,EAAE,KAAK,GAA8B,KAAK,MAAnC,EAAE,OAAO,GAAqB,KAAK,QAA1B,EAAK,WAAW,kBAAK,KAAK,EAAhE,8CAAwD,CAAF,CAAW;QAEvE,KAAK;YACH,+CAA+C;YAC/C,KAAK,EAAE,UAAU;YACjB,6CAA6C;YAC7C,OAAO,qBAAI,KAAK,OAAA,EAAE,QAAQ,UAAA,IAAK,OAAO,KACnC,WAAW,CACf,CAAC;QAEF,IAAM,KAAK,GAAG,+BAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,mBAAQ,EAAE,UAAU,EAAE,+BAAuB,EAAE,CAAC,CAAC;QAC1G,qCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"]}

package/lib-amd/components/CheckboxField/index.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./CheckboxField"], function (require, exports, tslib_1, CheckboxField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(CheckboxField_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/CheckboxField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/CheckboxField/index.ts"],"names":[],"mappings":";;;IAAA,+CAAgC","sourcesContent":["export * from './CheckboxField';\n"]}

package/lib-amd/index.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "./Checkbox", "./CheckboxField"], function (require, exports, Checkbox_1, CheckboxField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.checkboxFieldClassNames = exports.CheckboxField_unstable = exports.useCheckbox_unstable = exports.useCheckboxStyles_unstable = exports.renderCheckbox_unstable = exports.checkboxClassNames = exports.Checkbox = void 0;
+    Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+    Object.defineProperty(exports, "checkboxClassNames", { enumerable: true, get: function () { return Checkbox_1.checkboxClassNames; } });
+    Object.defineProperty(exports, "renderCheckbox_unstable", { enumerable: true, get: function () { return Checkbox_1.renderCheckbox_unstable; } });
+    Object.defineProperty(exports, "useCheckboxStyles_unstable", { enumerable: true, get: function () { return Checkbox_1.useCheckboxStyles_unstable; } });
+    Object.defineProperty(exports, "useCheckbox_unstable", { enumerable: true, get: function () { return Checkbox_1.useCheckbox_unstable; } });
+    Object.defineProperty(exports, "CheckboxField_unstable", { enumerable: true, get: function () { return CheckboxField_1.CheckboxField; } });
+    Object.defineProperty(exports, "checkboxFieldClassNames", { enumerable: true, get: function () { return CheckboxField_1.checkboxFieldClassNames; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-checkbox/src/index.ts"],"names":[],"mappings":";;;;IACE,oGAAA,QAAQ,OAAA;IACR,8GAAA,kBAAkB,OAAA;IAClB,mHAAA,uBAAuB,OAAA;IACvB,sHAAA,0BAA0B,OAAA;IAC1B,gHAAA,oBAAoB,OAAA;IAIb,uHAAA,aAAa,OAA0B;IAAE,wHAAA,uBAAuB,OAAA","sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"]}

package/lib-commonjs/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Checkbox/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/Checkbox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Checkbox/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/CheckboxField.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/CheckboxField/index"), exports);
+//# sourceMappingURL=CheckboxField.js.map

package/lib-commonjs/CheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-checkbox/src/CheckboxField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CheckboxField/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/renderCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,IAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFtD,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJrD,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,IAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFtD,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJrD,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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 {\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"],"sourceRoot":"../src/"}
+{"version":3,"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 {\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"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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 useRootStyles = makeStyles({\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    ...shorthands.margin(0),\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n\n    // When unchecked, hide the the checkmark icon (child of the indicator slot)\n    [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n      opacity: 0,\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked):not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked:not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n        },\n      },\n    },\n\n    // Colors for the mixed state\n    ':enabled:indeterminate': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${checkboxClassNames.label}`]: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.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\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\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  medium: {\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n\n  medium: {\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium,\n  },\n\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\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 rootStyles = useRootStyles();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n  const { labelPosition, shape, size } = state;\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorStyles.base,\n      indicatorStyles[size],\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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 useRootStyles = makeStyles({\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    ...shorthands.margin(0),\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n\n    // When unchecked, hide the the checkmark icon (child of the indicator slot)\n    [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n      opacity: 0,\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked):not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked:not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n        },\n      },\n    },\n\n    // Colors for the mixed state\n    ':enabled:indeterminate': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${checkboxClassNames.label}`]: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.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\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\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  medium: {\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n\n  medium: {\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium,\n  },\n\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\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 rootStyles = useRootStyles();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n  const { labelPosition, shape, size } = state;\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorStyles.base,\n      indicatorStyles[size],\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"],"sourceRoot":"../src/"}

package/lib-commonjs/components/CheckboxField/CheckboxField.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxField = exports.checkboxFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
+
+const Checkbox_1 = /*#__PURE__*/require("../../Checkbox");
+
+exports.checkboxFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('CheckboxField');
+exports.CheckboxField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    fieldLabel,
+    required,
+    label,
+    control,
+    ...restOfProps
+  } = props;
+  props = {
+    // Use the fieldLabel prop as the Field's label
+    label: fieldLabel,
+    // Use the label prop as the Checkbox's label
+    control: {
+      label,
+      required,
+      ...control
+    },
+    ...restOfProps
+  };
+  const state = react_field_1.useField_unstable(props, ref, {
+    component: Checkbox_1.Checkbox,
+    classNames: exports.checkboxFieldClassNames
+  });
+  react_field_1.useFieldStyles_unstable(state);
+  return react_field_1.renderField_unstable(state);
+});
+exports.CheckboxField.displayName = 'CheckboxField';
+//# sourceMappingURL=CheckboxField.js.map

package/lib-commonjs/components/CheckboxField/CheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAQA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAea,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,KAAxB;IAA+B,OAA/B;IAAwC,GAAG;EAA3C,IAA2D,KAAjE;EAEA,KAAK,GAAG;IACN;IACA,KAAK,EAAE,UAFD;IAGN;IACA,OAAO,EAAE;MAAE,KAAF;MAAS,QAAT;MAAmB,GAAG;IAAtB,CAJH;IAKN,GAAG;EALG,CAAR;EAQA,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,UAAA,CAAA,QAAb;IAAuB,UAAU,EAAE,OAAA,CAAA;EAAnC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAdqE,CAAzD;AAgBb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/CheckboxField/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./CheckboxField"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/CheckboxField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/CheckboxField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CheckboxField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCheckbox_unstable = exports.useCheckboxStyles_unstable = exports.renderCheckbox_unstable = exports.checkboxClassNames = exports.Checkbox = void 0;
+exports.checkboxFieldClassNames = exports.CheckboxField_unstable = exports.useCheckbox_unstable = exports.useCheckboxStyles_unstable = exports.renderCheckbox_unstable = exports.checkboxClassNames = exports.Checkbox = void 0;
 
 var Checkbox_1 = /*#__PURE__*/require("./Checkbox");
 
@@ -37,4 +37,19 @@ Object.defineProperty(exports, "useCheckbox_unstable", {
     return Checkbox_1.useCheckbox_unstable;
   }
 });
+
+var CheckboxField_1 = /*#__PURE__*/require("./CheckboxField");
+
+Object.defineProperty(exports, "CheckboxField_unstable", {
+  enumerable: true,
+  get: function () {
+    return CheckboxField_1.CheckboxField;
+  }
+});
+Object.defineProperty(exports, "checkboxFieldClassNames", {
+  enumerable: true,
+  get: function () {
+    return CheckboxField_1.checkboxFieldClassNames;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA","sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AAIF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.0.11",
+  "version": "9.0.13",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -19,23 +19,23 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-checkbox/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.17",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@fluentui/react-field": "9.0.0-alpha.9",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.9",
-    "@fluentui/react-tabster": "^9.2.1",
-    "@fluentui/react-theme": "^9.1.1",
-    "@fluentui/react-utilities": "^9.2.0",
+    "@fluentui/react-label": "^9.0.11",
+    "@fluentui/react-tabster": "^9.3.1",
+    "@fluentui/react-theme": "^9.1.2",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },
@@ -53,9 +53,10 @@
   },
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }