@fluentui/react-checkbox 9.0.0-alpha.8 → 9.0.0-beta.10

package/Spec.md

@@ -2,7 +2,8 @@
 
 ## Background
 
-Checkboxes are used to represent one or more options, giving the user a way to select one or more of these options.
+Checkboxes give people a way to select one or more items from a group, or switch between
+two mutually exclusive options (checked or unchecked).
 
 ## Prior Art
 
@@ -101,19 +102,17 @@ Component props:
 ## Sample Code
 
 ```tsx
-<Checkbox>Example Checkbox</Checkbox>
+<Checkbox label="Example Checkbox" />
 
-<Checkbox>
-  <>Example Checkbox with <a href="https://www.microsoft.com">link</a></>
-</Checkbox>
+<Checkbox label={<>Example Checkbox with <a href="https://www.microsoft.com">link</a></>} />
 
-<Checkbox circular size="large">Circular Checkbox</Checkbox>
+<Checkbox label="Circular Checkbox" circular size="large" />
 
-<Checkbox onChange={onChangeFunction}>Controlled Checkbox</Checkbox>
+<Checkbox label="Controlled Checkbox" onChange={onChangeFunction} />
 
-<Checkbox checked="mixed">Mixed Checkbox</Checkbox>
+<Checkbox label="Mixed Checkbox" checked="mixed" />
 
-<Checkbox>{{ children: 'Custom Label', style: { color: 'red' }, required: true }}</Chekbox>
+<Checkbox label={{ children: 'Custom Label', style: { color: 'red' }, required: true }} />
 ```
 
 ## Variants
@@ -126,132 +125,45 @@ Component props:
 
 ### Checkbox Props
 
-```tsx
-/**
- * Checkbox Props
- */
-export interface CheckboxProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-  /**
-   * Children to be rendered as a Label.
-   */
-  children?: ShorthandProps<LabelProps>;
-
-  /**
-   * Icon to be displayed when the checkbox is in the checked state.
-   */
-  checkmarkIcon?: React.ReactElement;
-
-  /**
-   * Icon to be displayed when the checkbox is in the mixed state.
-   */
-  mixedIcon?: React.ReactElement;
-
-  /**
-   * Disabled state of the checkbox.
-   */
-  disabled?: boolean;
-
-  /**
-   * Required state of the checkbox.
-   */
-  required?: boolean;
-
-  /**
-   * A checkbox can be rendered with a circular shape.
-   */
-  circular?: boolean;
-
-  /**
-   * A checkbox's state can be controlled.
-   * @defaultvalue false
-   */
-  checked?: 'mixed' | boolean;
-
-  /**
-   * Whether the checkbox should be rendered as checked by default.
-   */
-  defaultChecked?: 'mixed' | boolean;
-
-  /**
-   * Checkbox supports two different checkbox sizes.
-   * @defaultvalue 'medium'
-   */
-  size?: 'medium' | 'large';
-
-  /**
-   * Determines whether the label should be positioned before (start) or after (end) the checkbox.
-   * @defaultvalue 'end'
-   */
-  labelPosition?: 'start' | 'end';
-
-  /**
-   * ID of the root element that wraps the checkbox and label.
-   */
-  rootId?: string;
-
-  /**
-   * 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<HTMLElement | HTMLInputElement>, data?: CheckboxOnChangeData) => void;
-}
-
-/**
- * Data for the onChange event for checkbox.
- */
-export interface CheckboxOnChangeData {
-  checked?: 'mixed' | boolean;
-}
-```
+See [Checkbox.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-checkbox/src/components/Checkbox/Checkbox.types.ts)
 
-Some feedback needed for props are:
+## Structure
 
-- `checked` will work similar to `aria-checked` and have `true`, `false`, and `mixed` options.
-- A `rootId` is needed since the input and label will share an id and `rootId` will be used for the root element.
-- To initially make the checkbox simple, both mixed and checked icons will be a `ReactElement` instead of a slot.
-- Based on feedback, `Checkbox` will now use children for the `Label`.
+### Slots
 
-## Structure
+- `root`: Outermost `<span>` that contains the rest of the slots
+- `input`: The HTML `<input type="checkbox">`. This is the **primary** slot: it receives all of the native props passed to the
+  Checkbox component. It has opacity 0 and overlaps the entire `root` slot, for hit testing.
+- `indicator`: A `<div>` that is the visual representation of the check "box". Its child is the checkmark icon.
+- `label`: (optional) The `<label>` describing this checkbox.
 
 ### **Public**
 
-```tsx
-<Checkbox>Example Checkbox</Checkbox>
+```jsx
+<Checkbox label="Example Checkbox" />
 ```
 
 ### **Internal**
 
 ```tsx
 <slots.root {...slotProps.root}>
-  {state.labelPosition === 'start' && <slots.label {...slotProps.label} />}
-  <div className={state.checkboxClassName}>
-    <div className={state.iconClassName}>{icon}</div>
-    <input {...inputProps} />
-  </div>
-  {state.labelPosition === 'end' && <slots.label {...slotProps.label} />}
+  {state.labelPosition === 'before' && <slots.label {...slotProps.label} />}
+  <slots.indicator {...slotProps.indicator} />
+  <slots.input {...slotProps.input} />
+  {state.labelPosition === 'after' && <slots.label {...slotProps.label} />}
 </slots.root>
 ```
 
 ### **DOM**
 
-In this case, the label position is set to end as per default.
-
-```tsx
-<div {/* Root Element */}>
-  <div {/* Checkbox */}>
-    <div {/* Icon */}>
-      ...Icon
-    </div>
-    <input id="cbox-1" type="checkbox" aria-checked="..." aria-label="..." aria-labelledby="..." aria-disabled="..." aria-posinset="..." aria-setsize="..." />
+```html
+<span class="fui-Checkbox root">
+  <div aria-hidden="true" class="indicator">
+    <CheckmarkRegular />
   </div>
-  <label for="cbox-1">
-    Example Checkbox
-  </label>
-</div>
+  <input type="checkbox" id="checkbox-1" class="input" />
+  <label for="checkbox-1" className="label">Example Checkbox</label>
+</span>
 ```
 
 ## Migration
@@ -260,17 +172,11 @@ See [MIGRATION.md](MIGRATION.md)
 
 ## Behaviors
 
-- Keyboard
-  - When checkbox is focused, if `space` is pressed the checkbox's state is toggled.
-- Cursor
-  - When clicked the checkbox's state is toggled.
-- Focus
-  - A checkbox can be focused to interact with it using `space`.
-  - In case of a label having a link or information button, items inside the label may be focused.
+- Checkbox inherits all of its mouse and keyboard behaviors from the native `<input type="checkbox">`. It has no special handling of clicks or keypresses for toggling beyond the native control.
+- In case of a label having a link or information button, items inside the label may be focused.
 
 ## Accessibility
 
 - Aria design pattern: [Checkbox](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox).
-- If a label is used with the checkbox, an `aria-label` will be set on the `input` element.
-- Checkbox will have a tri-state `aria-checked`.
-- Elements inside the checkbox's label can be focused if there are elements such as links and info buttons.
+- Checkbox uses a standard HTML `<input type="checkbox">` and does not require any additional aria attributes on the input element.
+- The checkmark indicator has `aria-hidden="true"`, as it is purely a visual representation of the state of the underlying input.

package/dist/react-checkbox.d.ts

@@ -1,63 +1,119 @@
-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 { 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: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLElement>>;
+export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
 
-/**
- * Names of CheckboxProps that have a default value in useCheckbox
- */
-export declare type CheckboxDefaultedProps = never;
+export declare const checkboxClassName = "fui-Checkbox";
 
-/**
- * Checkbox Props
- */
-export declare interface CheckboxProps extends ComponentPropsCompat, React_2.HTMLAttributes<HTMLElement> {
+declare interface CheckboxCommons {
+    /**
+     * 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
+     */
+    shape: 'square' | 'circular';
+    /**
+     * The controlled value for the checkbox.
+     *
+     * @defaultvalue false
+     */
+    checked: 'mixed' | boolean;
+    /**
+     * The size of the checkbox indicator.
+     *
+     * @defaultvalue medium
+     */
+    size: 'medium' | 'large';
+    /**
+     * The position of the label relative to the checkbox indicator.
+     *
+     * @defaultvalue after
+     */
+    labelPosition: 'before' | 'after';
 }
 
 /**
- * Names of the shorthand properties in CheckboxProps
+ * Data for the onChange event for checkbox.
  */
-export declare type CheckboxShorthandProps = never;
+export declare interface CheckboxOnChangeData {
+    checked: 'mixed' | boolean;
+}
 
 /**
- * Array of all shorthand properties listed in CheckboxShorthandProps
+ * Checkbox Props
  */
-export declare const checkboxShorthandProps: CheckboxShorthandProps[];
+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.
+     */
+    onChange?: (ev: React_2.FormEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
+    /**
+     * Whether the checkbox should be rendered as checked by default.
+     */
+    defaultChecked?: 'mixed' | boolean;
+};
 
-/**
- * State used in rendering Checkbox
- */
-export declare interface CheckboxState extends ComponentStateCompat<CheckboxProps, CheckboxShorthandProps, CheckboxDefaultedProps> {
+export declare type CheckboxSlots = {
     /**
-     * Ref to the root element
+     * 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`
      */
-    ref: React_2.Ref<HTMLElement>;
-}
+    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: NonNullable<Slot<'input'>>;
+    /**
+     * The checkbox, with the checkmark icon as its child when checked.
+     */
+    indicator: Slot<'div'>;
+};
 
 /**
- * Render the final JSX of Checkbox
+ * State used in rendering Checkbox
  */
-export declare const renderCheckbox: (state: CheckboxState) => JSX.Element;
+export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;
+
+export declare const renderCheckbox_unstable: (state: CheckboxState) => JSX.Element;
 
 /**
  * Create the state required to render Checkbox.
  *
- * The returned state can be modified with hooks such as useCheckboxStyles,
- * before being passed to renderCheckbox.
+ * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+ * before being passed to renderCheckbox_unstable.
  *
  * @param props - props from this instance of Checkbox
- * @param ref - reference to root HTMLElement of Checkbox
- * @param defaultProps - (optional) default prop values provided by the implementing type
+ * @param ref - reference to `<input>` element of Checkbox
  */
-export declare const useCheckbox: (props: CheckboxProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CheckboxProps | undefined) => CheckboxState;
+export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
 
 /**
  * Apply styling to the Checkbox slots based on the state
  */
-export declare const useCheckboxStyles: (state: CheckboxState) => CheckboxState;
+export declare const useCheckboxStyles_unstable: (state: CheckboxState) => CheckboxState;
 
 export { }

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

@@ -1,6 +1,7 @@
-import * 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
+ * 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: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLElement>>;
+export declare const Checkbox: ForwardRefComponent<CheckboxProps>;

package/lib/components/Checkbox/Checkbox.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"../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,"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,24 +1,84 @@
 import * as React from 'react';
-import { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';
-/**
- * Checkbox Props
- */
-export interface CheckboxProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
+import { Label } from '@fluentui/react-label';
+import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+interface CheckboxCommons {
+    /**
+     * 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
+     */
+    shape: 'square' | 'circular';
+    /**
+     * The controlled value for the checkbox.
+     *
+     * @defaultvalue false
+     */
+    checked: 'mixed' | boolean;
+    /**
+     * The size of the checkbox indicator.
+     *
+     * @defaultvalue medium
+     */
+    size: 'medium' | 'large';
+    /**
+     * The position of the label relative to the checkbox indicator.
+     *
+     * @defaultvalue after
+     */
+    labelPosition: 'before' | 'after';
 }
 /**
- * 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 = {
+    /**
+     * The root element of the Checkbox.
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.
+     * All other native props will be applied to the primary slot: `input`
+     */
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The Checkbox's label.
+     */
+    label?: Slot<typeof Label>;
+    /**
+     * Hidden input that handles the checkbox's functionality.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,
+     * except `className` and `style`, which remain on the root slot.
+     */
+    input: NonNullable<Slot<'input'>>;
+    /**
+     * The checkbox, with the checkmark icon as its child when checked.
+     */
+    indicator: Slot<'div'>;
+};
 /**
- * Names of CheckboxProps that have a default value in useCheckbox
+ * Checkbox Props
  */
-export declare type CheckboxDefaultedProps = never;
+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.
+     */
+    onChange?: (ev: React.FormEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
+    /**
+     * Whether the checkbox should be rendered as checked by default.
+     */
+    defaultChecked?: 'mixed' | 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;
+export {};

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":"../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/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;
+export declare const renderCheckbox_unstable: (state: CheckboxState) => JSX.Element;

package/lib/components/Checkbox/renderCheckbox.js

@@ -1,12 +1,15 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } 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));
+import { getSlots } from '@fluentui/react-utilities';
+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":"../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,"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

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import { CheckboxProps, CheckboxShorthandProps, CheckboxState } from './Checkbox.types';
-/**
- * Array of all shorthand properties listed in CheckboxShorthandProps
- */
-export declare const checkboxShorthandProps: CheckboxShorthandProps[];
+import { CheckboxProps, CheckboxState } from './Checkbox.types';
 /**
  * Create the state required to render Checkbox.
  *
- * The returned state can be modified with hooks such as useCheckboxStyles,
- * before being passed to renderCheckbox.
+ * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+ * before being passed to renderCheckbox_unstable.
  *
  * @param props - props from this instance of Checkbox
- * @param ref - reference to root HTMLElement of Checkbox
- * @param defaultProps - (optional) default prop values provided by the implementing type
+ * @param ref - reference to `<input>` element of Checkbox
  */
-export declare const useCheckbox: (props: CheckboxProps, ref: React.Ref<HTMLElement>, defaultProps?: CheckboxProps | undefined) => CheckboxState;
+export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => CheckboxState;