@fluentui/react-checkbox 9.0.0-alpha.7 → 9.0.0-beta.2

package/dist/react-checkbox.d.ts

@@ -1,46 +1,107 @@
-import { ComponentPropsCompat } from '@fluentui/react-utilities';
-import { ComponentStateCompat } from '@fluentui/react-utilities';
+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 * as React_2 from 'react';
 
 /**
  * A Checkbox component provides a way to represent options that can be selected
  */
-export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLElement>>;
+export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
 
 /**
- * Names of CheckboxProps that have a default value in useCheckbox
+ * 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 type CheckboxDefaultedProps = never;
+export declare interface CheckboxCommons {
+    /**
+     * A checkbox can be rendered with a circular shape.
+     */
+    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
+     */
+    checked: 'mixed' | boolean;
+    /**
+     * Checkbox supports two different checkbox sizes.
+     * @defaultvalue 'medium'
+     */
+    size: 'medium' | 'large';
+    /**
+     * Determines whether the label should be positioned before or after the checkbox.
+     * @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;
+}
 
 /**
- * Checkbox Props
+ * Data for the onChange event for checkbox.
  */
-export declare interface CheckboxProps extends ComponentPropsCompat, React_2.HTMLAttributes<HTMLElement> {
+export declare interface CheckboxOnChangeData {
+    checked: 'mixed' | boolean;
 }
 
 /**
- * Names of the shorthand properties in CheckboxProps
+ * Checkbox Props
  */
-export declare type CheckboxShorthandProps = never;
+export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots>, 'defaultChecked'> & Partial<CheckboxCommons> & {
+    /**
+     * ID of the native element that represents the checkbox.
+     */
+    id?: string;
+    /**
+     * Callback to be called when the checked state value changes.
+     */
+    onChange?: (ev: React_2.FormEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
+    /**
+     * Whether the checkbox should be rendered as checked by default.
+     */
+    defaultChecked?: 'mixed' | boolean;
+    /**
+     * Required state of the checkbox.
+     */
+    required?: boolean;
+    /**
+     * Disabled
+     */
+    disabled?: boolean;
+};
 
 /**
- * Array of all shorthand properties listed in CheckboxShorthandProps
+ * Array of all shorthand properties listed as the keys of CheckboxSlots
  */
-export declare const checkboxShorthandProps: CheckboxShorthandProps[];
+export declare const checkboxShorthandProps: Array<keyof CheckboxSlots>;
 
-/**
- * State used in rendering Checkbox
- */
-export declare interface CheckboxState extends ComponentStateCompat<CheckboxProps, CheckboxShorthandProps, CheckboxDefaultedProps> {
+export declare type CheckboxSlots = {
+    root: ObjectShorthandProps<LabelProps> | IntrinsicShorthandProps<'span'>;
     /**
-     * Ref to the root element
+     * Hidden input that handles the checkbox's functionality.
      */
-    ref: React_2.Ref<HTMLElement>;
-}
+    input: IntrinsicShorthandProps<'input'>;
+    /**
+     * Renders the checkbox, with the checkmark icon as its child when checked.
+     */
+    indicator: IntrinsicShorthandProps<'div'>;
+};
 
 /**
- * Render the final JSX of Checkbox
+ * State used in rendering Checkbox
  */
+export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;
+
 export declare const renderCheckbox: (state: CheckboxState) => JSX.Element;
 
 /**
@@ -51,9 +112,8 @@ export declare const renderCheckbox: (state: CheckboxState) => JSX.Element;
  *
  * @param props - props from this instance of Checkbox
  * @param ref - reference to root HTMLElement of Checkbox
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCheckbox: (props: CheckboxProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CheckboxProps | undefined) => CheckboxState;
+export declare const useCheckbox: (props: CheckboxProps, ref: React_2.Ref<HTMLElement>) => CheckboxState;
 
 /**
  * Apply styling to the Checkbox slots based on the state

package/lib/Checkbox.js.map

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

package/lib/common/isConformant.js

@@ -1,8 +1,11 @@
 import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
+import makeStylesTests from '@fluentui/react-conformance-make-styles';
 export function isConformant(testInfo) {
     var defaultOptions = {
         asPropHandlesRef: true,
         componentPath: module.parent.filename.replace('.test', ''),
+        extraTests: makeStylesTests,
+        skipAsPropTests: true,
     };
     baseIsConformant(defaultOptions, testInfo);
 }

package/lib/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAuB,MAAM,6BAA6B,CAAC;AAEpG,MAAM,UAAU,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"version":3,"file":"isConformant.js","sourceRoot":"","sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAmC,MAAM,6BAA6B,CAAC;AAChH,OAAO,eAAe,MAAM,yCAAyC,CAAC;AAEtE,MAAM,UAAU,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;QAC5D,UAAU,EAAE,eAAqC;QACjD,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC"}

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { CheckboxProps } from './Checkbox.types';
+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
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLElement>>;
+export declare const Checkbox: ForwardRefComponent<CheckboxProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"../src/","sources":["components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD;;GAEG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAA6B,UAAC,KAAK,EAAE,GAAG;IAC9E,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","sourcesContent":["import * as React from 'react';\nimport { useCheckbox } from './useCheckbox';\nimport { CheckboxProps } from './Checkbox.types';\nimport { renderCheckbox } from './renderCheckbox';\nimport { useCheckboxStyles } from './useCheckboxStyles';\n\n/**\n * A Checkbox component provides a way to represent options that can be selected\n */\nexport const Checkbox = React.forwardRef<HTMLElement, CheckboxProps>((props, ref) => {\n  const state = useCheckbox(props, ref);\n\n  useCheckboxStyles(state);\n  return renderCheckbox(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"]}
+{"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"}

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

@@ -1,24 +1,84 @@
 import * as React from 'react';
-import { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';
+import { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
+import { LabelProps } from '@fluentui/react-label';
 /**
- * Checkbox Props
+ * 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 CheckboxProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
+export interface CheckboxCommons {
+    /**
+     * A checkbox can be rendered with a circular shape.
+     */
+    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
+     */
+    checked: 'mixed' | boolean;
+    /**
+     * Checkbox supports two different checkbox sizes.
+     * @defaultvalue 'medium'
+     */
+    size: 'medium' | 'large';
+    /**
+     * Determines whether the label should be positioned before or after the checkbox.
+     * @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;
 }
 /**
- * Names of the shorthand properties in CheckboxProps
+ * Data for the onChange event for checkbox.
  */
-export declare type CheckboxShorthandProps = never;
+export interface CheckboxOnChangeData {
+    checked: 'mixed' | boolean;
+}
+export declare type CheckboxSlots = {
+    root: ObjectShorthandProps<LabelProps> | IntrinsicShorthandProps<'span'>;
+    /**
+     * Hidden input that handles the checkbox's functionality.
+     */
+    input: IntrinsicShorthandProps<'input'>;
+    /**
+     * Renders the checkbox, with the checkmark icon as its child when checked.
+     */
+    indicator: IntrinsicShorthandProps<'div'>;
+};
 /**
- * Names of CheckboxProps that have a default value in useCheckbox
+ * Checkbox Props
  */
-export declare type CheckboxDefaultedProps = never;
+export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots>, 'defaultChecked'> & Partial<CheckboxCommons> & {
+    /**
+     * ID of the native element that represents the checkbox.
+     */
+    id?: string;
+    /**
+     * Callback to be called when the checked state value changes.
+     */
+    onChange?: (ev: React.FormEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
+    /**
+     * 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 interface CheckboxState extends ComponentStateCompat<CheckboxProps, CheckboxShorthandProps, CheckboxDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.js","sourceRoot":"../src/","sources":["components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';\n\n/**\n * Checkbox Props\n */\nexport interface CheckboxProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {\n  /*\n   * TODO Add props and slots here\n   * Any slot property should be listed in the checkboxShorthandProps array below\n   * Any property that has a default value should be listed in CheckboxDefaultedProps as e.g. 'size' | 'icon'\n   */\n}\n\n/**\n * Names of the shorthand properties in CheckboxProps\n */\nexport type CheckboxShorthandProps = never; // TODO add shorthand property names\n\n/**\n * Names of CheckboxProps that have a default value in useCheckbox\n */\nexport type CheckboxDefaultedProps = never; // TODO add names of properties with default values\n\n/**\n * State used in rendering Checkbox\n */\nexport interface CheckboxState\n  extends ComponentStateCompat<CheckboxProps, CheckboxShorthandProps, CheckboxDefaultedProps> {\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n}\n"]}
+{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,4 @@
+export declare const Mixed12Regular: () => JSX.Element;
+export declare const Mixed16Regular: () => JSX.Element;
+export declare const Checkmark12Regular: () => JSX.Element;
+export declare const Checkmark16Regular: () => JSX.Element;

package/lib/components/Checkbox/DefaultIcons.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export var Mixed12Regular = function () { return (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", focusable: "false" },
+    React.createElement("rect", { width: "8", height: "8", x: "2", y: "2" }))); };
+export var Mixed16Regular = function () { return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false" },
+    React.createElement("rect", { width: "10", height: "10", x: "3", y: "3" }))); };
+export var Checkmark12Regular = function () { return (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z" }))); };
+export var Checkmark16Regular = function () { return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M13.8639 3.65609C14.0533 3.85704 14.0439 4.17348 13.8429 4.36288L5.91309 11.8368C5.67573 12.0605 5.30311 12.0536 5.07417 11.8213L2.39384 9.10093C2.20003 8.90422 2.20237 8.58765 2.39907 8.39384C2.59578 8.20003 2.91235 8.20237 3.10616 8.39908L5.51192 10.8407L13.1571 3.63517C13.358 3.44577 13.6745 3.45513 13.8639 3.65609Z" }))); };
+//# sourceMappingURL=DefaultIcons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultIcons.js","sourceRoot":"","sources":["../../../src/components/Checkbox/DefaultIcons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,IAAM,cAAc,GAAG,cAAM,OAAA,CAClC,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,OAAO;IAClG,8BAAM,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG,CACrC,CACP,EAJmC,CAInC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,cAAM,OAAA,CAClC,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,OAAO;IAClG,8BAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG,CACvC,CACP,EAJmC,CAInC,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAG,cAAM,OAAA,CACtC,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;IAChF,8BAAM,CAAC,EAAC,6TAA6T,GAAG,CACpU,CACP,EAJuC,CAIvC,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAG,cAAM,OAAA,CACtC,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;IAChF,8BAAM,CAAC,EAAC,kUAAkU,GAAG,CACzU,CACP,EAJuC,CAIvC,CAAC"}

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

@@ -1 +1 @@
-{"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"]}
+{"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"}

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

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

package/lib/components/Checkbox/renderCheckbox.js

@@ -1,12 +1,14 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
+import { getSlots } from '@fluentui/react-utilities';
 import { checkboxShorthandProps } from './useCheckbox';
-/**
- * Render the final JSX of Checkbox
- */
 export var renderCheckbox = function (state) {
-    var _a = getSlotsCompat(state, checkboxShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    return (React.createElement(slots.root, __assign({}, slotProps.root), state.children));
+    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));
 };
 //# sourceMappingURL=renderCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderCheckbox.js","sourceRoot":"../src/","sources":["components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD;;GAEG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,KAAoB;IAC3C,IAAA,KAAuB,cAAc,CAAC,KAAK,EAAE,sBAAsB,CAAC,EAAlE,KAAK,WAAA,EAAE,SAAS,eAAkD,CAAC;IAE3E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI,GAE3B,KAAK,CAAC,QAAQ,CACJ,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { CheckboxState } from './Checkbox.types';\nimport { checkboxShorthandProps } from './useCheckbox';\n\n/**\n * Render the final JSX of Checkbox\n */\nexport const renderCheckbox = (state: CheckboxState) => {\n  const { slots, slotProps } = getSlotsCompat(state, checkboxShorthandProps);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/* TODO Add additional slots in the appropriate place */}\n      {state.children}\n    </slots.root>\n  );\n};\n"]}
+{"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"}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { CheckboxProps, CheckboxShorthandProps, CheckboxState } from './Checkbox.types';
+import { CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox.types';
 /**
- * Array of all shorthand properties listed in CheckboxShorthandProps
+ * Array of all shorthand properties listed as the keys of CheckboxSlots
  */
-export declare const checkboxShorthandProps: CheckboxShorthandProps[];
+export declare const checkboxShorthandProps: Array<keyof CheckboxSlots>;
 /**
  * Create the state required to render Checkbox.
  *
@@ -12,6 +12,5 @@ export declare const checkboxShorthandProps: CheckboxShorthandProps[];
  *
  * @param props - props from this instance of Checkbox
  * @param ref - reference to root HTMLElement of Checkbox
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCheckbox: (props: CheckboxProps, ref: React.Ref<HTMLElement>, defaultProps?: CheckboxProps | undefined) => CheckboxState;
+export declare const useCheckbox: (props: CheckboxProps, ref: React.Ref<HTMLElement>) => CheckboxState;

package/lib/components/Checkbox/useCheckbox.js

@@ -1,11 +1,12 @@
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
+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 { Label } from '@fluentui/react-label';
 /**
- * Array of all shorthand properties listed in CheckboxShorthandProps
+ * Array of all shorthand properties listed as the keys of CheckboxSlots
  */
-export var checkboxShorthandProps = [
-/* TODO add shorthand property names */
-];
-var mergeProps = makeMergeProps({ deepMerge: checkboxShorthandProps });
+export var checkboxShorthandProps = ['root', 'indicator', 'input'];
 /**
  * Create the state required to render Checkbox.
  *
@@ -14,12 +15,66 @@ var mergeProps = makeMergeProps({ deepMerge: checkboxShorthandProps });
  *
  * @param props - props from this instance of Checkbox
  * @param ref - reference to root HTMLElement of Checkbox
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export var useCheckbox = function (props, ref, defaultProps) {
-    var state = mergeProps({
-        ref: ref,
-    }, defaultProps && resolveShorthandProps(defaultProps, checkboxShorthandProps), resolveShorthandProps(props, checkboxShorthandProps));
+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);
+        }
+    }
+    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);
+    });
+    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;
 };
 //# sourceMappingURL=useCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCheckbox.js","sourceRoot":"../src/","sources":["components/Checkbox/useCheckbox.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGlF;;GAEG;AACH,MAAM,CAAC,IAAM,sBAAsB,GAA6B;AAC9D,uCAAuC;CACxC,CAAC;AAEF,IAAM,UAAU,GAAG,cAAc,CAAgB,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC,CAAC;AAExF;;;;;;;;;GASG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UACzB,KAAoB,EACpB,GAA2B,EAC3B,YAA4B;IAE5B,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,KAAA;KACJ,EACD,YAAY,IAAI,qBAAqB,CAAC,YAAY,EAAE,sBAAsB,CAAC,EAC3E,qBAAqB,CAAC,KAAK,EAAE,sBAAsB,CAAC,CACrD,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxShorthandProps, CheckboxState } from './Checkbox.types';\n\n/**\n * Array of all shorthand properties listed in CheckboxShorthandProps\n */\nexport const checkboxShorthandProps: CheckboxShorthandProps[] = [\n  /* TODO add shorthand property names */\n];\n\nconst mergeProps = makeMergeProps<CheckboxState>({ deepMerge: checkboxShorthandProps });\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles,\n * before being passed to renderCheckbox.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to root HTMLElement of Checkbox\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const useCheckbox = (\n  props: CheckboxProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: CheckboxProps,\n): CheckboxState => {\n  const state = mergeProps(\n    {\n      ref,\n    },\n    defaultProps && resolveShorthandProps(defaultProps, checkboxShorthandProps),\n    resolveShorthandProps(props, checkboxShorthandProps),\n  );\n\n  return state;\n};\n"]}
+{"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"}