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

package/lib/components/Checkbox/useCheckboxStyles.js

@@ -1,20 +1,172 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 /**
  * Styles for the root slot
  */
 var useStyles = makeStyles({
     root: function (theme) { return ({
-    // TODO Add default styles for the root element
+        display: 'inline-flex',
+        position: 'relative',
+        alignSelf: 'flex-start',
+        alignItems: 'center',
+        padding: '4px',
+        userSelect: 'none',
+        cursor: 'pointer',
+    }); },
+    disabled: function (theme) { return ({
+        color: theme.colorNeutralForegroundDisabled,
+        cursor: 'default',
+        '& .ms-checkbox-indicator': {
+            borderColor: theme.colorNeutralStrokeDisabled,
+            color: theme.colorNeutralForegroundDisabled,
+            backgroundColor: theme.colorNeutralBackground1,
+        },
+        ':hover': {
+            '& .ms-checkbox-indicator': {
+                borderColor: theme.colorNeutralStrokeDisabled,
+                color: theme.colorNeutralForegroundDisabled,
+                backgroundColor: theme.colorNeutralBackground1,
+            },
+        },
+        ':active': {
+            '& .ms-checkbox-indicator': {
+                borderColor: theme.colorNeutralStrokeDisabled,
+                color: theme.colorNeutralForegroundDisabled,
+                backgroundColor: theme.colorNeutralBackground1,
+            },
+        },
+    }); },
+    unchecked: function (theme) { return ({
+        color: theme.colorNeutralForeground3,
+        '& .ms-checkbox-indicator': {
+            borderColor: theme.colorNeutralStrokeAccessible,
+            '& > *': {
+                opacity: 0,
+            },
+        },
+        ':hover': {
+            color: theme.colorNeutralForeground2,
+            '& .ms-checkbox-indicator': {
+                borderColor: theme.colorNeutralStrokeAccessibleHover,
+            },
+        },
+        ':active': {
+            color: theme.colorNeutralForeground1,
+            '& .ms-checkbox-indicator': {
+                borderColor: theme.colorNeutralStrokeAccessiblePressed,
+            },
+        },
+    }); },
+    checked: function (theme) { return ({
+        color: theme.colorNeutralForeground1,
+        // TODO: neutralForegroundInverted change to NeutralForegroundOnBrand once it's added
+        '& .ms-checkbox-indicator': {
+            backgroundColor: theme.colorCompoundBrandBackground,
+            color: theme.colorNeutralForegroundInverted,
+            borderColor: theme.colorBrandBackground,
+        },
+        ':active': {
+            '& .ms-checkbox-indicator': {
+                backgroundColor: theme.colorCompoundBrandBackgroundPressed,
+            },
+        },
+        ':hover': {
+            '& .ms-checkbox-indicator': {
+                backgroundColor: theme.colorCompoundBrandBackgroundHover,
+            },
+        },
+    }); },
+    mixed: function (theme) { return ({
+        color: theme.colorNeutralForeground1,
+        '& .ms-checkbox-indicator': {
+            borderColor: theme.colorCompoundBrandStroke,
+            color: theme.colorCompoundBrandForeground1,
+        },
+        ':active': {
+            '& .ms-checkbox-indicator': {
+                borderColor: theme.colorCompoundBrandStrokePressed,
+                color: theme.colorCompoundBrandForeground1Pressed,
+            },
+        },
+        ':hover': {
+            '& .ms-checkbox-indicator': {
+                borderColor: theme.colorCompoundBrandStrokeHover,
+                color: theme.colorCompoundBrandForeground1Hover,
+            },
+        },
+    }); },
+    focusIndicator: function (theme) {
+        return createFocusOutlineStyle(theme, { style: { outlineOffset: '2px' }, selector: 'focus-within' });
+    },
+});
+var useContainerStyles = makeStyles({
+    container: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    medium: {
+        width: '16px',
+        height: '16px',
+    },
+    large: {
+        width: '20px',
+        height: '20px',
+    },
+    // TODO: change marginLeft to Spacing horizontal M once it's added
+    before: function (theme) { return ({
+        marginLeft: '12px',
+    }); },
+    // TODO: change marginRight to Spacing horizontal M once it's added
+    after: function (theme) { return ({
+        marginRight: '12px',
+    }); },
+});
+var useInputStyles = makeStyles({
+    input: {
+        opacity: 0,
+        position: 'absolute',
+        margin: 0,
+        padding: 0,
+        cursor: 'pointer',
+    },
+    disabled: {
+        cursor: 'not-allowed',
+    },
+});
+var useIndicatorStyles = makeStyles({
+    box: function (theme) { return ({
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        boxSizing: 'border-box',
+        borderStyle: 'solid',
+        borderRadius: theme.borderRadiusSmall,
+        borderWidth: theme.strokeWidthThin,
+    }); },
+    circular: function (theme) { return ({
+        borderRadius: theme.borderRadiusCircular,
     }); },
 });
 /**
  * Apply styling to the Checkbox slots based on the state
  */
 export var useCheckboxStyles = function (state) {
+    var checkedState = state.checked === 'mixed' ? 'mixed' : state.checked ? 'checked' : 'unchecked';
+    var indicatorStyles = useIndicatorStyles();
+    var inputStyles = useInputStyles();
+    var containerStyles = useContainerStyles();
     var styles = useStyles();
-    state.className = mergeClasses(styles.root, state.className);
-    // TODO Add class names to slots, for example:
-    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+    state.root.className = mergeClasses(styles.root, styles.focusIndicator, styles[checkedState], state.input.disabled && styles.disabled, state.root.className);
+    state.input.className = mergeClasses(containerStyles[state.size], inputStyles.input, state.input.disabled && inputStyles.disabled, state.input.className);
+    state.containerClassName = mergeClasses(containerStyles.container, containerStyles[state.size], !!state.root.children && containerStyles[state.labelPosition]);
+    state.indicator.className = mergeClasses(indicatorStyles.box, containerStyles[state.size], state.circular && indicatorStyles.circular, 'ms-checkbox-indicator', state.indicator.className);
     return state;
 };
 //# sourceMappingURL=useCheckboxStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCheckboxStyles.js","sourceRoot":"../src/","sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAGvE;;GAEG;AACH,IAAM,SAAS,GAAG,UAAU,CAAC;IAC3B,IAAI,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;IACd,+CAA+C;KAChD,CAAC,EAFa,CAEb;CAGH,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,KAAoB;IACpD,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE7D,8CAA8C;IAC9C,gFAAgF;IAEhF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { CheckboxState } from './Checkbox.types';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: theme => ({\n    // TODO Add default styles for the root element\n  }),\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles = (state: CheckboxState): CheckboxState => {\n  const styles = useStyles();\n  state.className = mergeClasses(styles.root, state.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useCheckboxStyles.js","sourceRoot":"","sources":["../../../src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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"}

package/lib/index.js.map

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

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.13.0"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib-commonjs/Checkbox.js.map

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

package/lib-commonjs/common/isConformant.js

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isConformant = void 0;
 var react_conformance_1 = require("@fluentui/react-conformance");
+var react_conformance_make_styles_1 = require("@fluentui/react-conformance-make-styles");
 function isConformant(testInfo) {
     var defaultOptions = {
         asPropHandlesRef: true,
         componentPath: module.parent.filename.replace('.test', ''),
+        extraTests: react_conformance_make_styles_1.default,
+        skipAsPropTests: true,
     };
     react_conformance_1.isConformant(defaultOptions, testInfo);
 }

package/lib-commonjs/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;AAAA,iEAAoG;AAEpG,SAAgB,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,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AATD,oCASC","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,iEAAgH;AAChH,yFAAsE;AAEtE,SAAgB,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,uCAAqC;QACjD,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AAXD,oCAWC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"../src/","sources":["components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,6CAA4C;AAE5C,mDAAkD;AAClD,yDAAwD;AAExD;;GAEG;AACU,QAAA,QAAQ,GAAG,KAAK,CAAC,UAAU,CAA6B,UAAC,KAAK,EAAE,GAAG;IAC9E,IAAM,KAAK,GAAG,yBAAW,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEtC,qCAAiB,CAAC,KAAK,CAAC,CAAC;IACzB,OAAO,+BAAc,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEH,gBAAQ,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,6BAA+B;AAC/B,6CAA4C;AAC5C,mDAAkD;AAClD,yDAAwD;AAIxD;;GAEG;AACU,QAAA,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;IACtF,IAAM,KAAK,GAAG,yBAAW,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEtC,qCAAiB,CAAC,KAAK,CAAC,CAAC;IACzB,OAAO,+BAAc,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEH,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkmark16Regular = exports.Checkmark12Regular = exports.Mixed16Regular = exports.Mixed12Regular = void 0;
+var React = require("react");
+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" }))); };
+exports.Mixed12Regular = Mixed12Regular;
+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" }))); };
+exports.Mixed16Regular = Mixed16Regular;
+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" }))); };
+exports.Checkmark12Regular = Checkmark12Regular;
+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" }))); };
+exports.Checkmark16Regular = Checkmark16Regular;
+//# sourceMappingURL=DefaultIcons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultIcons.js","sourceRoot":"","sources":["../../../src/components/Checkbox/DefaultIcons.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAExB,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;AAJW,QAAA,cAAc,kBAIzB;AAEK,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;AAJW,QAAA,cAAc,kBAIzB;AAEK,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;AAJW,QAAA,kBAAkB,sBAI7B;AAEK,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;AAJW,QAAA,kBAAkB,sBAI7B"}

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

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

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

@@ -5,12 +5,14 @@ var tslib_1 = require("tslib");
 var React = require("react");
 var react_utilities_1 = require("@fluentui/react-utilities");
 var useCheckbox_1 = require("./useCheckbox");
-/**
- * Render the final JSX of Checkbox
- */
 var renderCheckbox = function (state) {
-    var _a = react_utilities_1.getSlotsCompat(state, useCheckbox_1.checkboxShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.children));
+    var _a = react_utilities_1.getSlots(state, useCheckbox_1.checkboxShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
+    return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+        state.labelPosition === 'before' && slotProps.root.children,
+        React.createElement("div", { className: state.containerClassName },
+            React.createElement(slots.indicator, tslib_1.__assign({}, slotProps.indicator)),
+            React.createElement(slots.input, tslib_1.__assign({}, slotProps.input))),
+        state.labelPosition === 'after' && slotProps.root.children));
 };
 exports.renderCheckbox = renderCheckbox;
 //# sourceMappingURL=renderCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderCheckbox.js","sourceRoot":"../src/","sources":["components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,6DAA2D;AAE3D,6CAAuD;AAEvD;;GAEG;AACI,IAAM,cAAc,GAAG,UAAC,KAAoB;IAC3C,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,oCAAsB,CAAC,EAAlE,KAAK,WAAA,EAAE,SAAS,eAAkD,CAAC;IAE3E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,GAE3B,KAAK,CAAC,QAAQ,CACJ,CACd,CAAC;AACJ,CAAC,CAAC;AATW,QAAA,cAAc,kBASzB","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,6BAA+B;AAC/B,6DAAqD;AAErD,6CAAuD;AAEhD,IAAM,cAAc,GAAG,UAAC,KAAoB;IAC3C,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,EAAE,oCAAsB,CAAC,EAA3E,KAAK,WAAA,EAAE,SAAS,eAA2D,CAAC;IAEpF,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;QAC3B,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ;QAC5D,6BAAK,SAAS,EAAE,KAAK,CAAC,kBAAkB;YACtC,oBAAC,KAAK,CAAC,SAAS,uBAAK,SAAS,CAAC,SAAS,EAAI;YAC5C,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CAChC;QACL,KAAK,CAAC,aAAa,KAAK,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAChD,CACd,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,cAAc,kBAazB"}

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

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCheckbox = exports.checkboxShorthandProps = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
 var react_utilities_1 = require("@fluentui/react-utilities");
+var DefaultIcons_1 = require("./DefaultIcons");
+var react_label_1 = require("@fluentui/react-label");
 /**
- * Array of all shorthand properties listed in CheckboxShorthandProps
+ * Array of all shorthand properties listed as the keys of CheckboxSlots
  */
-exports.checkboxShorthandProps = [
-/* TODO add shorthand property names */
-];
-var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.checkboxShorthandProps });
+exports.checkboxShorthandProps = ['root', 'indicator', 'input'];
 /**
  * Create the state required to render Checkbox.
  *
@@ -17,12 +18,66 @@ var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.checkboxS
  *
  * @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
  */
-var useCheckbox = function (props, ref, defaultProps) {
-    var state = mergeProps({
-        ref: ref,
-    }, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.checkboxShorthandProps), react_utilities_1.resolveShorthandProps(props, exports.checkboxShorthandProps));
+var useCheckbox = function (props, ref) {
+    var _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.circular, circular = _b === void 0 ? false : _b, _c = props.required, required = _c === void 0 ? false : _c, id = props.id, rootId = props.rootId, userOnChange = props.onChange;
+    var _d = react_utilities_1.useControllableState({
+        defaultState: props.defaultChecked,
+        state: props.checked,
+        initialState: false,
+    }), checked = _d[0], setChecked = _d[1];
+    var inputInternalRef = React.useRef(null);
+    var inputShorthand = react_utilities_1.resolveShorthand(props.input, {
+        required: true,
+        defaultProps: {
+            disabled: disabled,
+            type: 'checkbox',
+            required: required,
+        },
+    });
+    var state = {
+        circular: circular,
+        checked: checked,
+        size: 'medium',
+        labelPosition: 'after',
+        rootId: rootId,
+        components: {
+            root: props.children !== undefined ? react_label_1.Label : 'span',
+            indicator: 'div',
+            input: 'input',
+        },
+        input: tslib_1.__assign(tslib_1.__assign({}, inputShorthand), { ref: react_utilities_1.useMergedRefs(inputShorthand.ref, inputInternalRef) }),
+        indicator: react_utilities_1.resolveShorthand(props.indicator, {
+            required: true,
+        }),
+        root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref }, props)),
+    };
+    state.input.checked = checked === true;
+    state.checked = checked ? checked : false;
+    if (state.indicator && !state.indicator.children) {
+        if (state.size === 'medium') {
+            state.indicator.children = checked === 'mixed' ? React.createElement(DefaultIcons_1.Mixed12Regular, null) : React.createElement(DefaultIcons_1.Checkmark12Regular, null);
+        }
+        else {
+            state.indicator.children = checked === 'mixed' ? React.createElement(DefaultIcons_1.Mixed16Regular, null) : React.createElement(DefaultIcons_1.Checkmark16Regular, null);
+        }
+    }
+    var inputOnChange = state.input.onChange;
+    state.input.onChange = react_utilities_1.useEventCallback(function (ev) {
+        ev.stopPropagation();
+        inputOnChange === null || inputOnChange === void 0 ? void 0 : inputOnChange(ev);
+        var val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
+        userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(ev, { checked: val });
+        setChecked(val);
+    });
+    state.input.id = react_utilities_1.useId('checkbox-', id);
+    state.root.id = state.rootId;
+    var isMixed = checked === 'mixed';
+    react_utilities_1.useIsomorphicLayoutEffect(function () {
+        if (inputInternalRef.current) {
+            inputInternalRef.current.indeterminate = isMixed;
+        }
+    }, [isMixed]);
     return state;
 };
 exports.useCheckbox = useCheckbox;

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

@@ -1 +1 @@
-{"version":3,"file":"useCheckbox.js","sourceRoot":"../src/","sources":["components/Checkbox/useCheckbox.ts"],"names":[],"mappings":";;;AACA,6DAAkF;AAGlF;;GAEG;AACU,QAAA,sBAAsB,GAA6B;AAC9D,uCAAuC;CACxC,CAAC;AAEF,IAAM,UAAU,GAAG,gCAAc,CAAgB,EAAE,SAAS,EAAE,8BAAsB,EAAE,CAAC,CAAC;AAExF;;;;;;;;;GASG;AACI,IAAM,WAAW,GAAG,UACzB,KAAoB,EACpB,GAA2B,EAC3B,YAA4B;IAE5B,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,KAAA;KACJ,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,8BAAsB,CAAC,EAC3E,uCAAqB,CAAC,KAAK,EAAE,8BAAsB,CAAC,CACrD,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAdW,QAAA,WAAW,eActB","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":"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"}