120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
/// <reference types="react" />
|
|
|
|
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';
|
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
|
/**
|
|
* Checkboxes give people a way to select one or more items from a group,
|
|
* or switch between two mutually exclusive options (checked or unchecked).
|
|
*/
|
|
export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
|
|
|
|
export declare const checkboxClassNames: SlotClassNames<CheckboxSlots>;
|
|
|
|
/**
|
|
* Data for the onChange event for checkbox.
|
|
*/
|
|
export declare interface CheckboxOnChangeData {
|
|
checked: 'mixed' | boolean;
|
|
}
|
|
|
|
/**
|
|
* Checkbox Props
|
|
*/
|
|
export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>, 'input'>, 'checked' | 'defaultChecked' | 'onChange' | 'size'> & {
|
|
/**
|
|
* The controlled value for the checkbox.
|
|
*
|
|
* @default false
|
|
*/
|
|
checked?: 'mixed' | boolean;
|
|
/**
|
|
* Checkboxes don't support children. To add a label, use the `label` prop.
|
|
*/
|
|
children?: never;
|
|
/**
|
|
* Whether the checkbox should be rendered as checked by default.
|
|
*/
|
|
defaultChecked?: 'mixed' | boolean;
|
|
/**
|
|
* The position of the label relative to the checkbox indicator.
|
|
*
|
|
* @default after
|
|
*/
|
|
labelPosition?: 'before' | 'after';
|
|
/**
|
|
* Callback to be called when the checked state value changes.
|
|
*/
|
|
onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
|
|
/**
|
|
* 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`.
|
|
*
|
|
* @default square
|
|
*/
|
|
shape?: 'square' | 'circular';
|
|
/**
|
|
* The size of the checkbox indicator.
|
|
*
|
|
* @default medium
|
|
*/
|
|
size?: 'medium' | 'large';
|
|
};
|
|
|
|
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', 'span'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering Checkbox
|
|
*/
|
|
export declare type CheckboxState = ComponentState<CheckboxSlots> & Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;
|
|
|
|
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_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_unstable: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
|
|
|
|
/**
|
|
* Apply styling to the Checkbox slots based on the state
|
|
*/
|
|
export declare const useCheckboxStyles_unstable: (state: CheckboxState) => CheckboxState;
|
|
|
|
export { }
|