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

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

@@ -1,11 +1,14 @@
 import * as React from 'react';
-import { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
-import { LabelProps } from '@fluentui/react-label';
-export interface CheckboxCommons {
+import { Label } from '@fluentui/react-label';
+import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+interface CheckboxCommons {
     /**
-     * A checkbox can be rendered with a circular shape.
+     * Whether to render the checkbox in a circular shape instead of square.
+     * This variant is only recommended to be used in a tasks-style UI (checklist),
+     * since it otherwise could be confused for a `RadioItem`.
+     * @defaultvalue false
      */
-    circular: boolean | undefined;
+    circular: boolean;
     /**
      * A checkbox's state can be controlled.
      * @defaultvalue false
@@ -13,19 +16,14 @@ export interface CheckboxCommons {
     checked: 'mixed' | boolean;
     /**
      * Checkbox supports two different checkbox sizes.
-     * @defaultvalue 'medium'
+     * @defaultvalue medium
      */
     size: 'medium' | 'large';
     /**
      * Determines whether the label should be positioned before or after the checkbox.
-     * @defaultvalue 'after'
+     * @defaultvalue after
      */
     labelPosition: 'before' | 'after';
-    /**
-     * Field required to pass className to container instead of input
-     * this will be solved by https://github.com/microsoft/fluentui/pull/18983
-     */
-    containerClassName?: string;
 }
 /**
  * Data for the onChange event for checkbox.
@@ -35,28 +33,36 @@ export interface CheckboxOnChangeData {
 }
 export declare type CheckboxSlots = {
     /**
-     * The root element of the checkbox is its `<label>`.
+     * The root element of the Checkbox.
      *
      * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.
      * All other native props will be applied to the primary slot: `input`
      */
-    root: ObjectShorthandProps<LabelProps> | IntrinsicShorthandProps<'span'>;
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The Checkbox's label.
+     */
+    label?: Slot<typeof Label>;
     /**
      * Hidden input that handles the checkbox's functionality.
      *
      * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,
      * except `className` and `style`, which remain on the root slot.
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>>;
     /**
      * Renders the checkbox, with the checkmark icon as its child when checked.
      */
-    indicator: IntrinsicShorthandProps<'div'>;
+    indicator: Slot<'div'>;
 };
 /**
  * Checkbox Props
  */
-export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots, 'input'>, 'size' | 'checked' | 'defaultChecked'> & Partial<CheckboxCommons> & {
+export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>, 'input'>, 'size' | 'checked' | 'defaultChecked' | 'onChange'> & Partial<CheckboxCommons> & {
+    /**
+     * Checkboxes don't support children. To add a label, use the `label` prop.
+     */
+    children?: never;
     /**
      * Callback to be called when the checked state value changes.
      */
@@ -69,6 +75,5 @@ export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots, 'input'>,
 /**
  * State used in rendering Checkbox
  */
-export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons & {
-    hasLabel: boolean;
-};
+export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;
+export {};

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

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

package/lib/components/Checkbox/renderCheckbox.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"renderCheckbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGrD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;IACrD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAgB,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,oBAAK,SAAS,CAAC,IAAI;QAC3B,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ;QAC5D,6BAAK,SAAS,EAAE,KAAK,CAAC,kBAAkB;YACtC,oBAAC,KAAK,CAAC,SAAS,oBAAK,SAAS,CAAC,SAAS,EAAI;YAC5C,oBAAC,KAAK,CAAC,KAAK,oBAAK,SAAS,CAAC,KAAK,EAAI,CAChC;QACL,KAAK,CAAC,aAAa,KAAK,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAChD,CACd,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,iBAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADtD,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,iBAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJrD,CADF;AAQD,CAXM","sourceRoot":""}

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

@@ -3,10 +3,10 @@ import { CheckboxProps, CheckboxState } from './Checkbox.types';
 /**
  * Create the state required to render Checkbox.
  *
- * The returned state can be modified with hooks such as useCheckboxStyles,
- * before being passed to renderCheckbox.
+ * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+ * before being passed to renderCheckbox_unstable.
  *
  * @param props - props from this instance of Checkbox
  * @param ref - reference to `<input>` element of Checkbox
  */
-export declare const useCheckbox: (props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => CheckboxState;
+export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => CheckboxState;

package/lib/components/Checkbox/useCheckbox.js

@@ -1,88 +1,111 @@
 import * as React from 'react';
-import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs, } from '@fluentui/react-utilities';
-import { Mixed12Regular, Mixed16Regular, Checkmark12Regular, Checkmark16Regular } from './DefaultIcons';
+import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, Circle12Filled, Circle16Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
 /**
  * Create the state required to render Checkbox.
  *
- * The returned state can be modified with hooks such as useCheckboxStyles,
- * before being passed to renderCheckbox.
+ * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+ * before being passed to renderCheckbox_unstable.
  *
  * @param props - props from this instance of Checkbox
  * @param ref - reference to `<input>` element of Checkbox
  */
-export const useCheckbox = (props, ref) => {
-    const { circular, size = 'medium', labelPosition = 'after' } = props;
-    const [checked, setChecked] = useControllableState({
-        defaultState: props.defaultChecked,
-        state: props.checked,
-        initialState: false,
-    });
-    const nativeProps = getPartitionedNativeProps({
-        props,
-        primarySlotTagName: 'input',
-        excludedPropNames: ['checked', 'defaultChecked', 'children'],
-    });
-    const state = {
-        circular,
-        checked,
-        size,
-        labelPosition,
-        hasLabel: !!props.children,
-        components: {
-            root: props.children !== undefined ? Label : 'span',
-            indicator: 'div',
-            input: 'input',
-        },
-        root: resolveShorthand(props.root, {
-            required: true,
-            defaultProps: {
-                children: props.children,
-                ...nativeProps.root,
-            },
-        }),
-        input: resolveShorthand(props.input, {
-            required: true,
-            defaultProps: {
-                type: 'checkbox',
-                id: useId('checkbox-', nativeProps.primary.id),
-                ref,
-                checked: checked === true,
-                ...nativeProps.primary,
-            },
-        }),
-        indicator: resolveShorthand(props.indicator, {
-            required: true,
-        }),
-    };
-    // Add the default checkmark icon if none was provided
-    if (!state.indicator.children) {
-        if (state.size === 'medium') {
-            state.indicator.children = checked === 'mixed' ? React.createElement(Mixed12Regular, null) : React.createElement(Checkmark12Regular, null);
-        }
-        else {
-            state.indicator.children = checked === 'mixed' ? React.createElement(Mixed16Regular, null) : React.createElement(Checkmark16Regular, null);
-        }
+
+export const useCheckbox_unstable = (props, ref) => {
+  const {
+    disabled,
+    required,
+    circular = false,
+    size = 'medium',
+    labelPosition = 'after',
+    onChange
+  } = props;
+  const [checked, setChecked] = useControllableState({
+    defaultState: props.defaultChecked,
+    state: props.checked,
+    initialState: false
+  });
+  const nativeProps = getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange']
+  });
+  const mixed = checked === 'mixed';
+  const id = useId('checkbox-', nativeProps.primary.id);
+  let checkmarkIcon;
+
+  if (mixed) {
+    if (circular) {
+      checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Circle16Filled, null) : /*#__PURE__*/React.createElement(Circle12Filled, null);
+    } else {
+      checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Square16Filled, null) : /*#__PURE__*/React.createElement(Square12Filled, null);
     }
-    const onChange = state.input.onChange;
-    state.input.onChange = useEventCallback(ev => {
-        ev.stopPropagation();
-        const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
-        onChange === null || onChange === void 0 ? void 0 : onChange(ev, { checked: val });
-        setChecked(val);
+  } else {
+    checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Checkmark16Filled, null) : /*#__PURE__*/React.createElement(Checkmark12Filled, null);
+  }
+
+  const state = {
+    circular,
+    checked,
+    size,
+    labelPosition,
+    components: {
+      root: 'span',
+      input: 'input',
+      indicator: 'div',
+      label: Label
+    },
+    root: resolveShorthand(props.root, {
+      required: true,
+      defaultProps: nativeProps.root
+    }),
+    input: resolveShorthand(props.input, {
+      required: true,
+      defaultProps: {
+        type: 'checkbox',
+        id,
+        ref,
+        checked: checked === true,
+        ...nativeProps.primary
+      }
+    }),
+    label: resolveShorthand(props.label, {
+      required: false,
+      defaultProps: {
+        htmlFor: id,
+        disabled,
+        required,
+        size: 'medium' // Even if the checkbox itself is large
+
+      }
+    }),
+    indicator: resolveShorthand(props.indicator, {
+      required: true,
+      defaultProps: {
+        'aria-hidden': true,
+        children: checkmarkIcon
+      }
+    })
+  };
+  state.input.onChange = useEventCallback(ev => {
+    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
+    onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+      checked: val
     });
-    // Create a ref object for the input element so we can use it to set the indeterminate prop.
-    // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
-    const inputRef = useMergedRefs(state.input.ref);
-    state.input.ref = inputRef;
-    // Set the <input> element's checked and indeterminate properties based on our tri-state property.
-    // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
-    const indeterminate = checked === 'mixed';
-    useIsomorphicLayoutEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.indeterminate = indeterminate;
-        }
-    }, [inputRef, indeterminate]);
-    return state;
+    setChecked(val);
+  }); // Create a ref object for the input element so we can use it to set the indeterminate prop.
+  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
+
+  const inputRef = useMergedRefs(state.input.ref);
+  state.input.ref = inputRef; // Set the <input> element's checked and indeterminate properties based on our tri-state property.
+  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
+
+  useIsomorphicLayoutEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = mixed;
+    }
+  }, [inputRef, mixed]);
+  return state;
 };
 //# sourceMappingURL=useCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCheckbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":"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","sourceRoot":""}

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

@@ -3,4 +3,4 @@ export declare const checkboxClassName = "fui-Checkbox";
 /**
  * Apply styling to the Checkbox slots based on the state
  */
-export declare const useCheckboxStyles: (state: CheckboxState) => CheckboxState;
+export declare const useCheckboxStyles_unstable: (state: CheckboxState) => CheckboxState;