220 lines
7.0 KiB
TypeScript
220 lines
7.0 KiB
TypeScript
/// <reference types="react" />
|
|
|
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
import type { 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 type { Slot } from '@fluentui/react-utilities';
|
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
|
/**
|
|
* Radio component is a wrapper for a radio button with a label.
|
|
*/
|
|
export declare const Radio: ForwardRefComponent<RadioProps>;
|
|
|
|
export declare const radioClassNames: SlotClassNames<RadioSlots>;
|
|
|
|
/**
|
|
* A RadioGroup component presents a set of options where only one option can be selected.
|
|
*/
|
|
export declare const RadioGroup: ForwardRefComponent<RadioGroupProps>;
|
|
|
|
export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
|
|
|
|
export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required' | 'aria-describedby'>;
|
|
|
|
export declare type RadioGroupContextValues = {
|
|
radioGroup: RadioGroupContextValue;
|
|
};
|
|
|
|
/**
|
|
* Data for the onChange event for RadioGroup.
|
|
*/
|
|
export declare type RadioGroupOnChangeData = {
|
|
/**
|
|
* The value of the newly selected Radio item.
|
|
*/
|
|
value: string;
|
|
};
|
|
|
|
export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {
|
|
/**
|
|
* The name of this radio group. This name is applied to all Radio items inside this group.
|
|
*
|
|
* If no name is provided, one will be generated so that all of the Radio items have the same name.
|
|
*/
|
|
name?: string;
|
|
/**
|
|
* The selected Radio item in this group.
|
|
*
|
|
* This should be the `value` prop of one of the Radio items inside this group.
|
|
*/
|
|
value?: string;
|
|
/**
|
|
* The default selected Radio item in this group.
|
|
*
|
|
* This should be the `value` prop of one of the Radio items inside this group.
|
|
*/
|
|
defaultValue?: string;
|
|
/**
|
|
* Callback when the selected Radio item changes.
|
|
*/
|
|
onChange?: (ev: React_2.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;
|
|
/**
|
|
* How the radio items are laid out in the group.
|
|
*
|
|
* @default vertical
|
|
*/
|
|
layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';
|
|
/**
|
|
* Disable all Radio items in this group.
|
|
*/
|
|
disabled?: boolean;
|
|
/**
|
|
* Require a selection in this group. Adds the `required` prop to all child Radio items.
|
|
*/
|
|
required?: boolean;
|
|
};
|
|
|
|
export declare const RadioGroupProvider: React_2.Provider<RadioGroupContextValue | undefined>;
|
|
|
|
export declare type RadioGroupSlots = {
|
|
/**
|
|
* The radio group root.
|
|
*/
|
|
root: NonNullable<Slot<'div'>>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering RadioGroup
|
|
*/
|
|
export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
|
|
|
|
/**
|
|
* Data for the onChange event for Radio.
|
|
*/
|
|
export declare type RadioOnChangeData = {
|
|
/**
|
|
* The value prop of this Radio item.
|
|
*/
|
|
value: string;
|
|
};
|
|
|
|
/**
|
|
* Radio Props
|
|
*/
|
|
export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {
|
|
/**
|
|
* The value of the RadioGroup when this Radio item is selected.
|
|
*/
|
|
value?: string;
|
|
/**
|
|
* The position of the label relative to the radio indicator.
|
|
*
|
|
* This defaults to `after` unless the Radio is inside a RadioGroup with `layout="horizontalStacked"`,
|
|
* in which case it defaults to `below`.
|
|
*
|
|
* @defaultvalue after
|
|
*/
|
|
labelPosition?: 'after' | 'below';
|
|
/**
|
|
* Disable this Radio item.
|
|
*/
|
|
disabled?: boolean;
|
|
/**
|
|
* Callback when this Radio is selected in its group.
|
|
*
|
|
* **Note:** `onChange` is NOT called when this Radio is deselected.
|
|
* Use RadioGroup's `onChange` event to determine when the selection in the group changes.
|
|
*/
|
|
onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
|
|
};
|
|
|
|
export declare type RadioSlots = {
|
|
/**
|
|
* The root element of the Radio.
|
|
*
|
|
* The root slot receives the `className` and `style` specified directly on the `<Radio>`.
|
|
* All other native props will be applied to the primary slot: `input`
|
|
*/
|
|
root: NonNullable<Slot<'span'>>;
|
|
/**
|
|
* The Radio's label.
|
|
*/
|
|
label: Slot<typeof Label>;
|
|
/**
|
|
* Hidden input that handles the radio's functionality.
|
|
*
|
|
* This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,
|
|
* except `className` and `style`, which remain on the root slot.
|
|
*/
|
|
input: NonNullable<Slot<'input'>>;
|
|
/**
|
|
* A circle outline, with a filled circle icon inside when the Radio is checked.
|
|
*/
|
|
indicator: NonNullable<Slot<'div'>>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering Radio
|
|
*/
|
|
export declare type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;
|
|
|
|
/**
|
|
* Render the final JSX of Radio
|
|
*/
|
|
export declare const renderRadio_unstable: (state: RadioState) => JSX.Element;
|
|
|
|
/**
|
|
* Render the final JSX of RadioGroup
|
|
*/
|
|
export declare const renderRadioGroup_unstable: (state: RadioGroupState, contextValues: RadioGroupContextValues) => JSX.Element;
|
|
|
|
/**
|
|
* Create the state required to render Radio.
|
|
*
|
|
* The returned state can be modified with hooks such as useRadioStyles_unstable,
|
|
* before being passed to renderRadio_unstable.
|
|
*
|
|
* @param props - props from this instance of Radio
|
|
* @param ref - reference to `<input>` element of Radio
|
|
*/
|
|
export declare const useRadio_unstable: (props: RadioProps, ref: React_2.Ref<HTMLInputElement>) => RadioState;
|
|
|
|
/**
|
|
* Create the state required to render RadioGroup.
|
|
*
|
|
* The returned state can be modified with hooks such as useRadioGroupStyles_unstable,
|
|
* before being passed to renderRadioGroup_unstable.
|
|
*
|
|
* @param props - props from this instance of RadioGroup
|
|
* @param ref - reference to root HTMLElement of RadioGroup
|
|
*/
|
|
export declare const useRadioGroup_unstable: (props: RadioGroupProps, ref: React_2.Ref<HTMLDivElement>) => RadioGroupState;
|
|
|
|
/**
|
|
* @deprecated Use useRadioGroupContextValue_unstable instead.
|
|
* RadioGroupContext is no longer a selector context, and no longer benefits from having a selector.
|
|
*/
|
|
export declare const useRadioGroupContext_unstable: <T>(selector: (ctx: RadioGroupContextValue) => T) => T;
|
|
|
|
/**
|
|
* Get the value of the RadioGroupContext.
|
|
*/
|
|
export declare const useRadioGroupContextValue_unstable: () => RadioGroupContextValue;
|
|
|
|
export declare const useRadioGroupContextValues: (state: RadioGroupState) => RadioGroupContextValues;
|
|
|
|
/**
|
|
* Apply styling to the RadioGroup slots based on the state
|
|
*/
|
|
export declare const useRadioGroupStyles_unstable: (state: RadioGroupState) => RadioGroupState;
|
|
|
|
/**
|
|
* Apply styling to the Radio slots based on the state
|
|
*/
|
|
export declare const useRadioStyles_unstable: (state: RadioState) => RadioState;
|
|
|
|
export { }
|