@fluentui/react-checkbox 9.0.0-beta.3 → 9.0.0-beta.8

package/lib-commonjs/components/Checkbox/Checkbox.types.d.ts

@@ -1,20 +1,14 @@
 import * as React from 'react';
-import { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
-import { LabelProps } from '@fluentui/react-label';
-/**
- * TODO:
- *  - Remove as from Omit. Currently it's needed since checkbox Commons shouldn't have as.
- *  - Instead of extending LabelProps, extend LabelCommons once it's added.
- */
-export interface CheckboxCommons {
+import { Label } from '@fluentui/react-label';
+import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+interface CheckboxCommons {
     /**
-     * A checkbox can be rendered with a circular shape.
+     * Whether to render the checkbox in a circular shape instead of square.
+     * This variant is only recommended to be used in a tasks-style UI (checklist),
+     * since it otherwise could be confused for a `RadioItem`.
+     * @defaultvalue false
      */
     circular: boolean;
-    /**
-     * ID of the root element that wraps the checkbox and label.
-     */
-    rootId: string | undefined;
     /**
      * A checkbox's state can be controlled.
      * @defaultvalue false
@@ -22,19 +16,14 @@ export interface CheckboxCommons {
     checked: 'mixed' | boolean;
     /**
      * Checkbox supports two different checkbox sizes.
-     * @defaultvalue 'medium'
+     * @defaultvalue medium
      */
     size: 'medium' | 'large';
     /**
      * Determines whether the label should be positioned before or after the checkbox.
-     * @defaultvalue 'after'
+     * @defaultvalue after
      */
     labelPosition: 'before' | 'after';
-    /**
-     * Field required to pass className to container instead of input
-     * this will be solved by https://github.com/microsoft/fluentui/pull/18983
-     */
-    containerClassName?: string;
 }
 /**
  * Data for the onChange event for checkbox.
@@ -43,24 +32,37 @@ export interface CheckboxOnChangeData {
     checked: 'mixed' | boolean;
 }
 export declare type CheckboxSlots = {
-    root: ObjectShorthandProps<LabelProps> | IntrinsicShorthandProps<'span'>;
+    /**
+     * The root element of the Checkbox.
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.
+     * All other native props will be applied to the primary slot: `input`
+     */
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The Checkbox's label.
+     */
+    label?: Slot<typeof Label>;
     /**
      * Hidden input that handles the checkbox's functionality.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,
+     * except `className` and `style`, which remain on the root slot.
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>>;
     /**
      * Renders the checkbox, with the checkmark icon as its child when checked.
      */
-    indicator: IntrinsicShorthandProps<'div'>;
+    indicator: Slot<'div'>;
 };
 /**
  * Checkbox Props
  */
-export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots>, 'defaultChecked'> & Partial<CheckboxCommons> & {
+export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>, 'input'>, 'size' | 'checked' | 'defaultChecked' | 'onChange'> & Partial<CheckboxCommons> & {
     /**
-     * ID of the native element that represents the checkbox.
+     * Checkboxes don't support children. To add a label, use the `label` prop.
      */
-    id?: string;
+    children?: never;
     /**
      * Callback to be called when the checked state value changes.
      */
@@ -69,16 +71,9 @@ export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots>, 'default
      * Whether the checkbox should be rendered as checked by default.
      */
     defaultChecked?: 'mixed' | boolean;
-    /**
-     * Required state of the checkbox.
-     */
-    required?: boolean;
-    /**
-     * Disabled
-     */
-    disabled?: boolean;
 };
 /**
  * State used in rendering Checkbox
  */
 export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;
+export {};

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

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=Checkbox.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

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

@@ -1,9 +1,18 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./Checkbox"), exports);
+
 tslib_1.__exportStar(require("./Checkbox.types"), exports);
+
 tslib_1.__exportStar(require("./renderCheckbox"), exports);
+
 tslib_1.__exportStar(require("./useCheckbox"), exports);
+
 tslib_1.__exportStar(require("./useCheckboxStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":";;;AAAA,qDAA2B;AAC3B,2DAAiC;AACjC,2DAAiC;AACjC,wDAA8B;AAC9B,8DAAoC"}
+{"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/"}

package/lib-commonjs/components/Checkbox/renderCheckbox.d.ts

@@ -1,2 +1,2 @@
 import { CheckboxState } from './Checkbox.types';
-export declare const renderCheckbox: (state: CheckboxState) => JSX.Element;
+export declare const renderCheckbox_unstable: (state: CheckboxState) => JSX.Element;

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

@@ -1,18 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderCheckbox = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var useCheckbox_1 = require("./useCheckbox");
-var renderCheckbox = function (state) {
-    var _a = react_utilities_1.getSlots(state, useCheckbox_1.checkboxShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
-        state.labelPosition === 'before' && slotProps.root.children,
-        React.createElement("div", { className: state.containerClassName },
-            React.createElement(slots.indicator, tslib_1.__assign({}, slotProps.indicator)),
-            React.createElement(slots.input, tslib_1.__assign({}, slotProps.input))),
-        state.labelPosition === 'after' && slotProps.root.children));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderCheckbox_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const renderCheckbox_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, state.labelPosition === 'before' && slots.label && React.createElement(slots.label, { ...slotProps.label
+  }), React.createElement(slots.indicator, { ...slotProps.indicator
+  }), React.createElement(slots.input, { ...slotProps.input
+  }), state.labelPosition === 'after' && slots.label && React.createElement(slots.label, { ...slotProps.label
+  }));
 };
-exports.renderCheckbox = renderCheckbox;
+
+exports.renderCheckbox_unstable = renderCheckbox_unstable;
 //# sourceMappingURL=renderCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderCheckbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,6DAAqD;AAErD,6CAAuD;AAEhD,IAAM,cAAc,GAAG,UAAC,KAAoB;IAC3C,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,EAAE,oCAAsB,CAAC,EAA3E,KAAK,WAAA,EAAE,SAAS,eAA2D,CAAC;IAEpF,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;QAC3B,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ;QAC5D,6BAAK,SAAS,EAAE,KAAK,CAAC,kBAAkB;YACtC,oBAAC,KAAK,CAAC,SAAS,uBAAK,SAAS,CAAC,SAAS,EAAI;YAC5C,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CAChC;QACL,KAAK,CAAC,aAAa,KAAK,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAChD,CACd,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,cAAc,kBAazB"}
+{"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;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,IAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADtD,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,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      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/useCheckbox.d.ts

@@ -1,16 +1,12 @@
 import * as React from 'react';
-import { CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox.types';
-/**
- * Array of all shorthand properties listed as the keys of CheckboxSlots
- */
-export declare const checkboxShorthandProps: Array<keyof CheckboxSlots>;
+import { CheckboxProps, CheckboxState } from './Checkbox.types';
 /**
  * Create the state required to render Checkbox.
  *
- * The returned state can be modified with hooks such as useCheckboxStyles,
- * before being passed to renderCheckbox.
+ * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+ * before being passed to renderCheckbox_unstable.
  *
  * @param props - props from this instance of Checkbox
- * @param ref - reference to root HTMLElement of Checkbox
+ * @param ref - reference to `<input>` element of Checkbox
  */
-export declare const useCheckbox: (props: CheckboxProps, ref: React.Ref<HTMLElement>) => CheckboxState;
+export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => CheckboxState;

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

@@ -1,84 +1,124 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCheckbox = exports.checkboxShorthandProps = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var DefaultIcons_1 = require("./DefaultIcons");
-var react_label_1 = require("@fluentui/react-label");
-/**
- * Array of all shorthand properties listed as the keys of CheckboxSlots
- */
-exports.checkboxShorthandProps = ['root', 'indicator', 'input'];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCheckbox_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+
+const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
 /**
  * Create the state required to render Checkbox.
  *
- * The returned state can be modified with hooks such as useCheckboxStyles,
- * before being passed to renderCheckbox.
+ * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+ * before being passed to renderCheckbox_unstable.
  *
  * @param props - props from this instance of Checkbox
- * @param ref - reference to root HTMLElement of Checkbox
+ * @param ref - reference to `<input>` element of Checkbox
  */
-var useCheckbox = function (props, ref) {
-    var _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.circular, circular = _b === void 0 ? false : _b, _c = props.required, required = _c === void 0 ? false : _c, id = props.id, rootId = props.rootId, userOnChange = props.onChange;
-    var _d = react_utilities_1.useControllableState({
-        defaultState: props.defaultChecked,
-        state: props.checked,
-        initialState: false,
-    }), checked = _d[0], setChecked = _d[1];
-    var inputInternalRef = React.useRef(null);
-    var inputShorthand = react_utilities_1.resolveShorthand(props.input, {
-        required: true,
-        defaultProps: {
-            disabled: disabled,
-            type: 'checkbox',
-            required: required,
-        },
-    });
-    var state = {
-        circular: circular,
-        checked: checked,
-        size: 'medium',
-        labelPosition: 'after',
-        rootId: rootId,
-        components: {
-            root: props.children !== undefined ? react_label_1.Label : 'span',
-            indicator: 'div',
-            input: 'input',
-        },
-        input: tslib_1.__assign(tslib_1.__assign({}, inputShorthand), { ref: react_utilities_1.useMergedRefs(inputShorthand.ref, inputInternalRef) }),
-        indicator: react_utilities_1.resolveShorthand(props.indicator, {
-            required: true,
-        }),
-        root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref }, props)),
-    };
-    state.input.checked = checked === true;
-    state.checked = checked ? checked : false;
-    if (state.indicator && !state.indicator.children) {
-        if (state.size === 'medium') {
-            state.indicator.children = checked === 'mixed' ? React.createElement(DefaultIcons_1.Mixed12Regular, null) : React.createElement(DefaultIcons_1.Checkmark12Regular, null);
-        }
-        else {
-            state.indicator.children = checked === 'mixed' ? React.createElement(DefaultIcons_1.Mixed16Regular, null) : React.createElement(DefaultIcons_1.Checkmark16Regular, null);
-        }
+
+
+const useCheckbox_unstable = (props, ref) => {
+  const {
+    disabled,
+    required,
+    circular = false,
+    size = 'medium',
+    labelPosition = 'after',
+    onChange
+  } = props;
+  const [checked, setChecked] = react_utilities_1.useControllableState({
+    defaultState: props.defaultChecked,
+    state: props.checked,
+    initialState: false
+  });
+  const nativeProps = react_utilities_1.getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange']
+  });
+  const mixed = checked === 'mixed';
+  const id = react_utilities_1.useId('checkbox-', nativeProps.primary.id);
+  let checkmarkIcon;
+
+  if (mixed) {
+    if (circular) {
+      checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Circle16Filled, null) : React.createElement(react_icons_1.Circle12Filled, null);
+    } else {
+      checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Square16Filled, null) : React.createElement(react_icons_1.Square12Filled, null);
     }
-    var inputOnChange = state.input.onChange;
-    state.input.onChange = react_utilities_1.useEventCallback(function (ev) {
-        ev.stopPropagation();
-        inputOnChange === null || inputOnChange === void 0 ? void 0 : inputOnChange(ev);
-        var val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
-        userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(ev, { checked: val });
-        setChecked(val);
+  } else {
+    checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Checkmark16Filled, null) : React.createElement(react_icons_1.Checkmark12Filled, null);
+  }
+
+  const state = {
+    circular,
+    checked,
+    size,
+    labelPosition,
+    components: {
+      root: 'span',
+      input: 'input',
+      indicator: 'div',
+      label: react_label_1.Label
+    },
+    root: react_utilities_1.resolveShorthand(props.root, {
+      required: true,
+      defaultProps: nativeProps.root
+    }),
+    input: react_utilities_1.resolveShorthand(props.input, {
+      required: true,
+      defaultProps: {
+        type: 'checkbox',
+        id,
+        ref,
+        checked: checked === true,
+        ...nativeProps.primary
+      }
+    }),
+    label: react_utilities_1.resolveShorthand(props.label, {
+      required: false,
+      defaultProps: {
+        htmlFor: id,
+        disabled,
+        required,
+        size: 'medium' // Even if the checkbox itself is large
+
+      }
+    }),
+    indicator: react_utilities_1.resolveShorthand(props.indicator, {
+      required: true,
+      defaultProps: {
+        'aria-hidden': true,
+        children: checkmarkIcon
+      }
+    })
+  };
+  state.input.onChange = react_utilities_1.useEventCallback(ev => {
+    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
+    onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+      checked: val
     });
-    state.input.id = react_utilities_1.useId('checkbox-', id);
-    state.root.id = state.rootId;
-    var isMixed = checked === 'mixed';
-    react_utilities_1.useIsomorphicLayoutEffect(function () {
-        if (inputInternalRef.current) {
-            inputInternalRef.current.indeterminate = isMixed;
-        }
-    }, [isMixed]);
-    return state;
+    setChecked(val);
+  }); // Create a ref object for the input element so we can use it to set the indeterminate prop.
+  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
+
+  const inputRef = react_utilities_1.useMergedRefs(state.input.ref);
+  state.input.ref = inputRef; // Set the <input> element's checked and indeterminate properties based on our tri-state property.
+  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
+
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = mixed;
+    }
+  }, [inputRef, mixed]);
+  return state;
 };
-exports.useCheckbox = useCheckbox;
+
+exports.useCheckbox_unstable = useCheckbox_unstable;
 //# sourceMappingURL=useCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCheckbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAUA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAQA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA0E;AAC5G,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,QAAZ;AAAsB,IAAA,QAAQ,GAAG,KAAjC;AAAwC,IAAA,IAAI,GAAG,QAA/C;AAAyD,IAAA,aAAa,GAAG,OAAzE;AAAkF,IAAA;AAAlF,MAA+F,KAArG;AAEA,QAAM,CAAC,OAAD,EAAU,UAAV,IAAwB,iBAAA,CAAA,oBAAA,CAAqB;AACjD,IAAA,YAAY,EAAE,KAAK,CAAC,cAD6B;AAEjD,IAAA,KAAK,EAAE,KAAK,CAAC,OAFoC;AAGjD,IAAA,YAAY,EAAE;AAHmC,GAArB,CAA9B;AAMA,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,MAA9B,EAAsC,UAAtC;AAHyB,GAA1B,CAApB;AAMA,QAAM,KAAK,GAAG,OAAO,KAAK,OAA1B;AACA,QAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,WAAN,EAAmB,WAAW,CAAC,OAAZ,CAAoB,EAAvC,CAAX;AAEA,MAAI,aAAJ;;AACA,MAAI,KAAJ,EAAW;AACT,QAAI,QAAJ,EAAc;AACZ,MAAA,aAAa,GAAG,IAAI,KAAK,OAAT,GAAmB,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,cAAD,EAAe,IAAf,CAAnB,GAAwC,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,cAAD,EAAe,IAAf,CAAxD;AACD,KAFD,MAEO;AACL,MAAA,aAAa,GAAG,IAAI,KAAK,OAAT,GAAmB,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,cAAD,EAAe,IAAf,CAAnB,GAAwC,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,cAAD,EAAe,IAAf,CAAxD;AACD;AACF,GAND,MAMO;AACL,IAAA,aAAa,GAAG,IAAI,KAAK,OAAT,GAAmB,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,iBAAD,EAAkB,IAAlB,CAAnB,GAA2C,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,iBAAD,EAAkB,IAAlB,CAA3D;AACD;;AAED,QAAM,KAAK,GAAkB;AAC3B,IAAA,QAD2B;AAE3B,IAAA,OAF2B;AAG3B,IAAA,IAH2B;AAI3B,IAAA,aAJ2B;AAK3B,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,SAAS,EAAE,KAHD;AAIV,MAAA,KAAK,EAAE,aAAA,CAAA;AAJG,KALe;AAW3B,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE,WAAW,CAAC;AAFO,KAA7B,CAXqB;AAe3B,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AACnC,MAAA,QAAQ,EAAE,IADyB;AAEnC,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE,UADM;AAEZ,QAAA,EAFY;AAGZ,QAAA,GAHY;AAIZ,QAAA,OAAO,EAAE,OAAO,KAAK,IAJT;AAKZ,WAAG,WAAW,CAAC;AALH;AAFqB,KAA9B,CAfoB;AAyB3B,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AACnC,MAAA,QAAQ,EAAE,KADyB;AAEnC,MAAA,YAAY,EAAE;AACZ,QAAA,OAAO,EAAE,EADG;AAEZ,QAAA,QAFY;AAGZ,QAAA,QAHY;AAIZ,QAAA,IAAI,EAAE,QAJM,CAII;;AAJJ;AAFqB,KAA9B,CAzBoB;AAkC3B,IAAA,SAAS,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;AAC3C,MAAA,QAAQ,EAAE,IADiC;AAE3C,MAAA,YAAY,EAAE;AACZ,uBAAe,IADH;AAEZ,QAAA,QAAQ,EAAE;AAFE;AAF6B,KAAlC;AAlCgB,GAA7B;AA2CA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;AAC3C,UAAM,GAAG,GAAG,EAAE,CAAC,aAAH,CAAiB,aAAjB,GAAiC,OAAjC,GAA2C,EAAE,CAAC,aAAH,CAAiB,OAAxE;AACA,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,MAAA,OAAO,EAAE;AAAX,KAAP,CAAR;AACA,IAAA,UAAU,CAAC,GAAD,CAAV;AACD,GAJsB,CAAvB,CAxE4G,CA8E5G;AACA;;AACA,QAAM,QAAQ,GAAG,iBAAA,CAAA,aAAA,CAAc,KAAK,CAAC,KAAN,CAAY,GAA1B,CAAjB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,GAAZ,GAAkB,QAAlB,CAjF4G,CAmF5G;AACA;;AACA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;AAC7B,QAAI,QAAQ,CAAC,OAAb,EAAsB;AACpB,MAAA,QAAQ,CAAC,OAAT,CAAiB,aAAjB,GAAiC,KAAjC;AACD;AACF,GAJD,EAIG,CAAC,QAAD,EAAW,KAAX,CAJH;AAMA,SAAO,KAAP;AACD,CA5FM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","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  Circle12Filled,\n  Circle16Filled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\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, circular = false, 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 (circular) {\n      checkmarkIcon = size === 'large' ? <Circle16Filled /> : <Circle12Filled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    circular,\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: nativeProps.root,\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.d.ts

@@ -1,5 +1,6 @@
 import { CheckboxState } from './Checkbox.types';
+export declare const checkboxClassName = "fui-Checkbox";
 /**
  * Apply styling to the Checkbox slots based on the state
  */
-export declare const useCheckboxStyles: (state: CheckboxState) => CheckboxState;
+export declare const useCheckboxStyles_unstable: (state: CheckboxState) => CheckboxState;