@fluentui/react-checkbox 9.0.0-beta.2 → 9.0.0-beta.6

package/dist/react-checkbox.d.ts

@@ -1,30 +1,26 @@
 import { ComponentProps } from '@fluentui/react-utilities';
 import { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import { LabelProps } from '@fluentui/react-label';
-import { ObjectShorthandProps } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
+import { Slot } from '@fluentui/react-utilities';
 
 /**
- * A Checkbox component provides a way to represent options that can be selected
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
  */
 export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
 
-/**
- * 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 declare interface CheckboxCommons {
+export declare const checkboxClassName = "fui-Checkbox";
+
+declare 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
@@ -32,19 +28,14 @@ export declare 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;
 }
 
 /**
@@ -57,11 +48,11 @@ export declare interface CheckboxOnChangeData {
 /**
  * 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.
      */
@@ -70,31 +61,31 @@ export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots>, 'default
      * Whether the checkbox should be rendered as checked by default.
      */
     defaultChecked?: 'mixed' | boolean;
+};
+
+export declare type CheckboxSlots = {
     /**
-     * Required state of the checkbox.
+     * 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`
      */
-    required?: boolean;
+    root: NonNullable<Slot<'span'>>;
     /**
-     * Disabled
+     * The Checkbox's label.
      */
-    disabled?: boolean;
-};
-
-/**
- * Array of all shorthand properties listed as the keys of CheckboxSlots
- */
-export declare const checkboxShorthandProps: Array<keyof CheckboxSlots>;
-
-export declare type CheckboxSlots = {
-    root: ObjectShorthandProps<LabelProps> | IntrinsicShorthandProps<'span'>;
+    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'>;
 };
 
 /**
@@ -102,22 +93,22 @@ export declare type CheckboxSlots = {
  */
 export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;
 
-export declare const renderCheckbox: (state: CheckboxState) => JSX.Element;
+export declare const renderCheckbox_unstable: (state: CheckboxState) => JSX.Element;
 
 /**
  * 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_2.Ref<HTMLElement>) => CheckboxState;
+export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
 
 /**
  * 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;
 
 export { }

package/lib/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import type { CheckboxProps } from './Checkbox.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * A Checkbox component provides a way to represent options that can be selected
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
  */
 export declare const Checkbox: ForwardRefComponent<CheckboxProps>;

package/lib/components/Checkbox/Checkbox.js

@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { useCheckbox } from './useCheckbox';
-import { renderCheckbox } from './renderCheckbox';
-import { useCheckboxStyles } from './useCheckboxStyles';
+import { useCheckbox_unstable } from './useCheckbox';
+import { renderCheckbox_unstable } from './renderCheckbox';
+import { useCheckboxStyles_unstable } from './useCheckboxStyles';
 /**
- * A Checkbox component provides a way to represent options that can be selected
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
  */
-export var Checkbox = React.forwardRef(function (props, ref) {
-    var state = useCheckbox(props, ref);
-    useCheckboxStyles(state);
-    return renderCheckbox(state);
+
+export const Checkbox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCheckbox_unstable(props, ref);
+  useCheckboxStyles_unstable(state);
+  return renderCheckbox_unstable(state);
 });
 Checkbox.displayName = 'Checkbox';
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;GAEG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;IACtF,IAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEtC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzB,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;;AAGG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;AAEA,EAAA,0BAA0B,CAAC,KAAD,CAA1B;AACA,SAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourceRoot":""}

package/lib/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/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/components/Checkbox/renderCheckbox.js

@@ -1,14 +1,15 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { checkboxShorthandProps } from './useCheckbox';
-export var renderCheckbox = function (state) {
-    var _a = getSlots(state, checkboxShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    return (React.createElement(slots.root, __assign({}, slotProps.root),
-        state.labelPosition === 'before' && slotProps.root.children,
-        React.createElement("div", { className: state.containerClassName },
-            React.createElement(slots.indicator, __assign({}, slotProps.indicator)),
-            React.createElement(slots.input, __assign({}, slotProps.input))),
-        state.labelPosition === 'after' && slotProps.root.children));
+export const renderCheckbox_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, state.labelPosition === 'before' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  }), /*#__PURE__*/React.createElement(slots.indicator, { ...slotProps.indicator
+  }), /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
+  }), state.labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  }));
 };
 //# sourceMappingURL=renderCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderCheckbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,KAAoB;IAC3C,IAAA,KAAuB,QAAQ,CAAgB,KAAK,EAAE,sBAAsB,CAAC,EAA3E,KAAK,WAAA,EAAE,SAAS,eAA2D,CAAC;IAEpF,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,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,eAAK,SAAS,CAAC,SAAS,EAAI;YAC5C,oBAAC,KAAK,CAAC,KAAK,eAAK,SAAS,CAAC,KAAK,EAAI,CAChC;QACL,KAAK,CAAC,aAAa,KAAK,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAChD,CACd,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,iBAAmD,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,iBAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJrD,CADF;AAQD,CAXM","sourceRoot":""}

package/lib/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/components/Checkbox/useCheckbox.js

@@ -1,80 +1,111 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand, useControllableState, useId, useIsomorphicLayoutEffect, useMergedRefs, useEventCallback, } from '@fluentui/react-utilities';
-import { Mixed12Regular, Mixed16Regular, Checkmark12Regular, Checkmark16Regular } from './DefaultIcons';
+import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, Circle12Filled, Circle16Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
-/**
- * Array of all shorthand properties listed as the keys of CheckboxSlots
- */
-export var checkboxShorthandProps = ['root', 'indicator', 'input'];
 /**
  * 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 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 = useControllableState({
-        defaultState: props.defaultChecked,
-        state: props.checked,
-        initialState: false,
-    }), checked = _d[0], setChecked = _d[1];
-    var inputInternalRef = React.useRef(null);
-    var inputShorthand = 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 ? Label : 'span',
-            indicator: 'div',
-            input: 'input',
-        },
-        input: __assign(__assign({}, inputShorthand), { ref: useMergedRefs(inputShorthand.ref, inputInternalRef) }),
-        indicator: resolveShorthand(props.indicator, {
-            required: true,
-        }),
-        root: getNativeElementProps('div', __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(Mixed12Regular, null) : React.createElement(Checkmark12Regular, null);
-        }
-        else {
-            state.indicator.children = checked === 'mixed' ? React.createElement(Mixed16Regular, null) : React.createElement(Checkmark16Regular, null);
-        }
+
+export const useCheckbox_unstable = (props, ref) => {
+  const {
+    disabled,
+    required,
+    circular = false,
+    size = 'medium',
+    labelPosition = 'after',
+    onChange
+  } = props;
+  const [checked, setChecked] = useControllableState({
+    defaultState: props.defaultChecked,
+    state: props.checked,
+    initialState: false
+  });
+  const nativeProps = getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange']
+  });
+  const mixed = checked === 'mixed';
+  const id = useId('checkbox-', nativeProps.primary.id);
+  let checkmarkIcon;
+
+  if (mixed) {
+    if (circular) {
+      checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Circle16Filled, null) : /*#__PURE__*/React.createElement(Circle12Filled, null);
+    } else {
+      checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Square16Filled, null) : /*#__PURE__*/React.createElement(Square12Filled, null);
     }
-    var inputOnChange = state.input.onChange;
-    state.input.onChange = 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' ? /*#__PURE__*/React.createElement(Checkmark16Filled, null) : /*#__PURE__*/React.createElement(Checkmark12Filled, null);
+  }
+
+  const state = {
+    circular,
+    checked,
+    size,
+    labelPosition,
+    components: {
+      root: 'span',
+      input: 'input',
+      indicator: 'div',
+      label: Label
+    },
+    root: resolveShorthand(props.root, {
+      required: true,
+      defaultProps: nativeProps.root
+    }),
+    input: resolveShorthand(props.input, {
+      required: true,
+      defaultProps: {
+        type: 'checkbox',
+        id,
+        ref,
+        checked: checked === true,
+        ...nativeProps.primary
+      }
+    }),
+    label: resolveShorthand(props.label, {
+      required: false,
+      defaultProps: {
+        htmlFor: id,
+        disabled,
+        required,
+        size: 'medium' // Even if the checkbox itself is large
+
+      }
+    }),
+    indicator: resolveShorthand(props.indicator, {
+      required: true,
+      defaultProps: {
+        'aria-hidden': true,
+        children: checkmarkIcon
+      }
+    })
+  };
+  state.input.onChange = 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 = useId('checkbox-', id);
-    state.root.id = state.rootId;
-    var isMixed = checked === 'mixed';
-    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 = 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.
+
+  useIsomorphicLayoutEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = mixed;
+    }
+  }, [inputRef, mixed]);
+  return state;
 };
 //# sourceMappingURL=useCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCheckbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,oBAAoB,EACpB,KAAK,EACL,yBAAyB,EACzB,aAAa,EACb,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACxG,OAAO,EAAE,KAAK,EAAc,MAAM,uBAAuB,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,IAAM,sBAAsB,GAA+B,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;AAEjG;;;;;;;;GAQG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAoB,EAAE,GAA2B;IACnE,IAAA,KAA6F,KAAK,SAAlF,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,KAA2E,KAAK,SAAhE,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,KAAyD,KAAK,SAA9C,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,EAAE,GAAqC,KAAK,GAA1C,EAAE,MAAM,GAA6B,KAAK,OAAlC,EAAY,YAAY,GAAK,KAAK,SAAV,CAAW;IACrG,IAAA,KAAwB,oBAAoB,CAAC;QACjD,YAAY,EAAE,KAAK,CAAC,cAAc;QAClC,KAAK,EAAE,KAAK,CAAC,OAAO;QACpB,YAAY,EAAE,KAAK;KACpB,CAAC,EAJK,OAAO,QAAA,EAAE,UAAU,QAIxB,CAAC;IAEH,IAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9D,IAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAK,EAAE;QACnD,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE;YACZ,QAAQ,UAAA;YACR,IAAI,EAAE,UAAU;YAChB,QAAQ,UAAA;SACT;KACF,CAAC,CAAC;IAEH,IAAM,KAAK,GAAkB;QAC3B,QAAQ,UAAA;QACR,OAAO,SAAA;QACP,IAAI,EAAE,QAAQ;QACd,aAAa,EAAE,OAAO;QACtB,MAAM,QAAA;QACN,UAAU,EAAE;YACV,IAAI,EAAE,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAE,KAAyC,CAAC,CAAC,CAAC,MAAM;YACxF,SAAS,EAAE,KAAK;YAChB,KAAK,EAAE,OAAO;SACf;QACD,KAAK,wBACA,cAAc,KACjB,GAAG,EAAE,aAAa,CAAC,cAAc,CAAC,GAAG,EAAE,gBAAgB,CAAC,GACzD;QACD,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE;YAC3C,QAAQ,EAAE,IAAI;SACf,CAAC;QACF,IAAI,EAAE,qBAAqB,CAAC,KAAK,aAAI,GAAG,KAAA,IAAK,KAAK,EAAG;KACtD,CAAC;IAEF,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;IAE1C,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,EAAE;QAChD,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC3B,KAAK,CAAC,SAAS,CAAC,QAAQ,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CAAC,CAAC,CAAC,oBAAC,kBAAkB,OAAG,CAAC;SAC9F;aAAM;YACL,KAAK,CAAC,SAAS,CAAC,QAAQ,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CAAC,CAAC,CAAC,oBAAC,kBAAkB,OAAG,CAAC;SAC9F;KACF;IAED,IAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC3C,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC,UAAA,EAAE;QACxC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,EAAE,EAAE;QAEpB,IAAM,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC;QAEhF,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE;QACrC,UAAU,CAAC,GAAG,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IACxC,KAAK,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAE7B,IAAM,OAAO,GAAG,OAAO,KAAK,OAAO,CAAC;IACpC,yBAAyB,CAAC;QACxB,IAAI,gBAAgB,CAAC,OAAO,EAAE;YAC5B,gBAAgB,CAAC,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC;SAClD;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,KAAK,CAAC;AACf,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,gBAJF,EAKE,KALF,EAME,yBANF,EAOE,aAPF,QAQO,2BARP;AAUA,SACE,iBADF,EAEE,iBAFF,EAGE,cAHF,EAIE,cAJF,EAKE,cALF,EAME,cANF,QAOO,uBAPP;AAQA,SAAS,KAAT,QAAsB,uBAAtB;AAEA;;;;;;;;AAQG;;AACH,OAAO,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,oBAAoB,CAAC;AACjD,IAAA,YAAY,EAAE,KAAK,CAAC,cAD6B;AAEjD,IAAA,KAAK,EAAE,KAAK,CAAC,OAFoC;AAGjD,IAAA,YAAY,EAAE;AAHmC,GAAD,CAAlD;AAMA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,MAA9B,EAAsC,UAAtC;AAHyB,GAAD,CAA7C;AAMA,QAAM,KAAK,GAAG,OAAO,KAAK,OAA1B;AACA,QAAM,EAAE,GAAG,KAAK,CAAC,WAAD,EAAc,WAAW,CAAC,OAAZ,CAAoB,EAAlC,CAAhB;AAEA,MAAI,aAAJ;;AACA,MAAI,KAAJ,EAAW;AACT,QAAI,QAAJ,EAAc;AACZ,MAAA,aAAa,GAAG,IAAI,KAAK,OAAT,gBAAmB,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,CAAnB,gBAAwC,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,CAAxD;AACD,KAFD,MAEO;AACL,MAAA,aAAa,GAAG,IAAI,KAAK,OAAT,gBAAmB,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,CAAnB,gBAAwC,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,CAAxD;AACD;AACF,GAND,MAMO;AACL,IAAA,aAAa,GAAG,IAAI,KAAK,OAAT,gBAAmB,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB,CAAnB,gBAA2C,KAAA,CAAA,aAAA,CAAC,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;AAJG,KALe;AAW3B,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE,WAAW,CAAC;AAFO,KAAb,CAXK;AAe3B,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;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,KAAd,CAfI;AAyB3B,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;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,KAAd,CAzBI;AAkC3B,IAAA,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAC3C,MAAA,QAAQ,EAAE,IADiC;AAE3C,MAAA,YAAY,EAAE;AACZ,uBAAe,IADH;AAEZ,QAAA,QAAQ,EAAE;AAFE;AAF6B,KAAlB;AAlCA,GAA7B;AA2CA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,gBAAgB,CAAC,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,GAJsC,CAAvC,CAxE4G,CA8E5G;AACA;;AACA,QAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,KAAN,CAAY,GAAb,CAA9B;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,GAAZ,GAAkB,QAAlB,CAjF4G,CAmF5G;AACA;;AACA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,QAAI,QAAQ,CAAC,OAAb,EAAsB;AACpB,MAAA,QAAQ,CAAC,OAAT,CAAiB,aAAjB,GAAiC,KAAjC;AACD;AACF,GAJwB,EAItB,CAAC,QAAD,EAAW,KAAX,CAJsB,CAAzB;AAMA,SAAO,KAAP;AACD,CA5FM","sourceRoot":""}

package/lib/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;