@fluentui/react-checkbox 9.0.0-beta.5 → 9.0.0-beta.9

package/dist/react-checkbox.d.ts

@@ -1,43 +1,46 @@
 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>;
 
 export declare const checkboxClassName = "fui-Checkbox";
 
-export declare interface CheckboxCommons {
+declare interface CheckboxCommons {
     /**
-     * A checkbox can be rendered with a circular shape.
+     * The shape of the checkbox indicator.
+     *
+     * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),
+     * since it otherwise could be confused for a `RadioItem`.
+     *
+     * @defaultvalue square
      */
-    circular: boolean | undefined;
+    shape: 'square' | 'circular';
     /**
-     * A checkbox's state can be controlled.
+     * The controlled value for the checkbox.
+     *
      * @defaultvalue false
      */
     checked: 'mixed' | boolean;
     /**
-     * Checkbox supports two different checkbox sizes.
-     * @defaultvalue 'medium'
+     * The size of the checkbox indicator.
+     *
+     * @defaultvalue medium
      */
     size: 'medium' | 'large';
     /**
-     * Determines whether the label should be positioned before or after the checkbox.
-     * @defaultvalue 'after'
+     * The position of the label relative to the checkbox indicator.
+     *
+     * @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;
 }
 
 /**
@@ -50,7 +53,11 @@ export declare interface CheckboxOnChangeData {
 /**
  * Checkbox Props
  */
-export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots, 'input'>, 'size' | 'checked' | 'defaultChecked'> & Partial<CheckboxCommons> & {
+export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>, 'input'>, 'size' | 'checked' | 'defaultChecked' | 'onChange'> & Partial<CheckboxCommons> & {
+    /**
+     * Checkboxes don't support children. To add a label, use the `label` prop.
+     */
+    children?: never;
     /**
      * Callback to be called when the checked state value changes.
      */
@@ -63,48 +70,50 @@ export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots, 'input'>,
 
 export declare type CheckboxSlots = {
     /**
-     * The root element of the checkbox is its `<label>`.
+     * 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: ObjectShorthandProps<LabelProps> | IntrinsicShorthandProps<'span'>;
+    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.
+     * The checkbox, with the checkmark icon as its child when checked.
      */
-    indicator: IntrinsicShorthandProps<'div'>;
+    indicator: Slot<'div'>;
 };
 
 /**
  * State used in rendering Checkbox
  */
-export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons & {
-    hasLabel: boolean;
-};
+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 `<input>` element of Checkbox
  */
-export declare const useCheckbox: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => 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/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"../src/","sources":["Checkbox.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Checkbox/index';\n"]}

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 const Checkbox = React.forwardRef((props, ref) => {
-    const 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,MAAM,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1F,MAAM,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":["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","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/components/Checkbox/Checkbox.types.d.ts

@@ -1,31 +1,34 @@
 import * as React from 'react';
-import { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
-import { LabelProps } from '@fluentui/react-label';
-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.
+     * The shape of the checkbox indicator.
+     *
+     * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),
+     * since it otherwise could be confused for a `RadioItem`.
+     *
+     * @defaultvalue square
      */
-    circular: boolean | undefined;
+    shape: 'square' | 'circular';
     /**
-     * A checkbox's state can be controlled.
+     * The controlled value for the checkbox.
+     *
      * @defaultvalue false
      */
     checked: 'mixed' | boolean;
     /**
-     * Checkbox supports two different checkbox sizes.
-     * @defaultvalue 'medium'
+     * The size of the checkbox indicator.
+     *
+     * @defaultvalue medium
      */
     size: 'medium' | 'large';
     /**
-     * Determines whether the label should be positioned before or after the checkbox.
-     * @defaultvalue 'after'
+     * The position of the label relative to the checkbox indicator.
+     *
+     * @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.
@@ -35,28 +38,36 @@ export interface CheckboxOnChangeData {
 }
 export declare type CheckboxSlots = {
     /**
-     * The root element of the checkbox is its `<label>`.
+     * 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: ObjectShorthandProps<LabelProps> | IntrinsicShorthandProps<'span'>;
+    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.
+     * 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, 'input'>, 'size' | 'checked' | 'defaultChecked'> & Partial<CheckboxCommons> & {
+export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>, 'input'>, 'size' | 'checked' | 'defaultChecked' | 'onChange'> & Partial<CheckboxCommons> & {
+    /**
+     * Checkboxes don't support children. To add a label, use the `label` prop.
+     */
+    children?: never;
     /**
      * Callback to be called when the checked state value changes.
      */
@@ -69,6 +80,5 @@ export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots, 'input'>,
 /**
  * State used in rendering Checkbox
  */
-export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons & {
-    hasLabel: boolean;
-};
+export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;
+export {};

package/lib/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,"file":"Checkbox.types.js","sourceRoot":"../src/","sources":["components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\ninterface CheckboxCommons {\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @defaultvalue square\n   */\n  shape: 'square' | 'circular';\n\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @defaultvalue false\n   */\n  checked: 'mixed' | boolean;\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @defaultvalue medium\n   */\n  size: 'medium' | 'large';\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @defaultvalue after\n   */\n  labelPosition: 'before' | 'after';\n}\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  indicator: Slot<'div'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'size' | 'checked' | 'defaultChecked' | 'onChange'\n> &\n  Partial<CheckboxCommons> & {\n    /**\n     * Checkboxes don't support children. To add a label, use the `label` prop.\n     */\n    children?: never;\n\n    /**\n     * Callback to be called when the checked state value changes.\n     */\n    onChange?: (ev: React.FormEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n    /**\n     * Whether the checkbox should be rendered as checked by default.\n     */\n    defaultChecked?: 'mixed' | boolean;\n  };\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"]}

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,12 +1,15 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-export const renderCheckbox = (state) => {
-    const { slots, slotProps } = getSlots(state, ['root', 'indicator', 'input']);
-    return (React.createElement(slots.root, Object.assign({}, slotProps.root),
-        state.labelPosition === 'before' && slotProps.root.children,
-        React.createElement("div", { className: state.containerClassName },
-            React.createElement(slots.indicator, Object.assign({}, slotProps.indicator)),
-            React.createElement(slots.input, Object.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
+  }, /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
+  }), state.labelPosition === 'before' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  }), /*#__PURE__*/React.createElement(slots.indicator, { ...slotProps.indicator
+  }), 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;AAGrD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;IACrD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAgB,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,oBAAK,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,oBAAK,SAAS,CAAC,SAAS,EAAI;YAC5C,oBAAC,KAAK,CAAC,KAAK,oBAAK,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":["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,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,iBAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAFtD,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,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","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/components/Checkbox/useCheckbox.d.ts

@@ -3,10 +3,10 @@ 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 `<input>` element of Checkbox
  */
-export declare const useCheckbox: (props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => CheckboxState;
+export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => CheckboxState;

package/lib/components/Checkbox/useCheckbox.js

@@ -1,88 +1,111 @@
 import * as React from 'react';
-import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs, } 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, CircleFilled } from '@fluentui/react-icons';
 import { Label } from '@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 `<input>` element of Checkbox
  */
-export const useCheckbox = (props, ref) => {
-    const { circular, size = 'medium', labelPosition = 'after' } = props;
-    const [checked, setChecked] = useControllableState({
-        defaultState: props.defaultChecked,
-        state: props.checked,
-        initialState: false,
-    });
-    const nativeProps = getPartitionedNativeProps({
-        props,
-        primarySlotTagName: 'input',
-        excludedPropNames: ['checked', 'defaultChecked', 'children'],
-    });
-    const state = {
-        circular,
-        checked,
-        size,
-        labelPosition,
-        hasLabel: !!props.children,
-        components: {
-            root: props.children !== undefined ? Label : 'span',
-            indicator: 'div',
-            input: 'input',
-        },
-        root: resolveShorthand(props.root, {
-            required: true,
-            defaultProps: {
-                children: props.children,
-                ...nativeProps.root,
-            },
-        }),
-        input: resolveShorthand(props.input, {
-            required: true,
-            defaultProps: {
-                type: 'checkbox',
-                id: useId('checkbox-', nativeProps.primary.id),
-                ref,
-                checked: checked === true,
-                ...nativeProps.primary,
-            },
-        }),
-        indicator: resolveShorthand(props.indicator, {
-            required: true,
-        }),
-    };
-    // Add the default checkmark icon if none was provided
-    if (!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,
+    shape = 'square',
+    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 (shape === 'circular') {
+      checkmarkIcon = /*#__PURE__*/React.createElement(CircleFilled, null);
+    } else {
+      checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Square16Filled, null) : /*#__PURE__*/React.createElement(Square12Filled, null);
     }
-    const onChange = state.input.onChange;
-    state.input.onChange = useEventCallback(ev => {
-        ev.stopPropagation();
-        const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
-        onChange === null || onChange === void 0 ? void 0 : onChange(ev, { checked: val });
-        setChecked(val);
+  } else {
+    checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Checkmark16Filled, null) : /*#__PURE__*/React.createElement(Checkmark12Filled, null);
+  }
+
+  const state = {
+    shape,
+    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
     });
-    // 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.
-    const indeterminate = checked === 'mixed';
-    useIsomorphicLayoutEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.indeterminate = indeterminate;
-        }
-    }, [inputRef, indeterminate]);
-    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":"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"}
+{"version":3,"sources":["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,YALF,QAMO,uBANP;AAOA,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,KAAK,GAAG,QAA9B;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,KAAK,KAAK,UAAd,EAA0B;AACxB,MAAA,aAAa,gBAAG,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,IAAb,CAAhB;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,KAD2B;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","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';\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: 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/components/Checkbox/useCheckboxStyles.d.ts

@@ -3,4 +3,4 @@ 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;