347 lines
11 KiB
TypeScript
347 lines
11 KiB
TypeScript
/// <reference types="react" />
|
|
|
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
import type { ContextSelector } from '@fluentui/react-context-selector';
|
|
import type { EventData } from '@fluentui/react-utilities';
|
|
import type { EventHandler } from '@fluentui/react-utilities';
|
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
import * as React_2 from 'react';
|
|
import type { Slot } from '@fluentui/react-utilities';
|
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
|
/**
|
|
* ColorSwatch component is used to render a colors, icons and gradients.
|
|
*/
|
|
export declare const ColorSwatch: ForwardRefComponent<ColorSwatchProps>;
|
|
|
|
export declare const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots>;
|
|
|
|
/**
|
|
* ColorSwatch Props
|
|
*/
|
|
export declare type ColorSwatchProps = ComponentProps<ColorSwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'> & {
|
|
/**
|
|
* Border color when contrast is low
|
|
*/
|
|
borderColor?: string;
|
|
/**
|
|
* Swatch color
|
|
*/
|
|
color: string;
|
|
/**
|
|
* Whether the swatch is disabled
|
|
*/
|
|
disabled?: boolean;
|
|
/**
|
|
* Swatch value
|
|
*/
|
|
value: string;
|
|
};
|
|
|
|
export declare type ColorSwatchSlots = {
|
|
root: NonNullable<Slot<'button'>>;
|
|
icon?: Slot<'span'>;
|
|
disabledIcon?: Slot<'span'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering ColorSwatch
|
|
*/
|
|
export declare type ColorSwatchState = ComponentState<ColorSwatchSlots> & Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {
|
|
selected: boolean;
|
|
};
|
|
|
|
/**
|
|
* EmptySwatch component is used for adding new color swatches.
|
|
*/
|
|
export declare const EmptySwatch: ForwardRefComponent<EmptySwatchProps>;
|
|
|
|
export declare const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots>;
|
|
|
|
/**
|
|
* EmptySwatch Props
|
|
*/
|
|
export declare type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;
|
|
|
|
export declare type EmptySwatchSlots = {
|
|
root: Slot<'button'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering EmptySwatch
|
|
*/
|
|
export declare type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;
|
|
|
|
/**
|
|
* ImageSwatch component is used to render an images, patterns and textures.
|
|
*/
|
|
export declare const ImageSwatch: ForwardRefComponent<ImageSwatchProps>;
|
|
|
|
export declare const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots>;
|
|
|
|
/**
|
|
* ImageSwatch Props
|
|
*/
|
|
export declare type ImageSwatchProps = ComponentProps<ImageSwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'> & {
|
|
/**
|
|
* Swatch color
|
|
*/
|
|
src: string;
|
|
/**
|
|
* Swatch value
|
|
*/
|
|
value: string;
|
|
};
|
|
|
|
export declare type ImageSwatchSlots = {
|
|
root: Slot<'button'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering ImageSwatch
|
|
*/
|
|
export declare type ImageSwatchState = ComponentState<ImageSwatchSlots> & Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {
|
|
selected: boolean;
|
|
};
|
|
|
|
/**
|
|
* Render the final JSX of ColorSwatch
|
|
*/
|
|
export declare const renderColorSwatch_unstable: (state: ColorSwatchState) => JSX.Element;
|
|
|
|
/**
|
|
* Render the final JSX of EmptySwatch
|
|
*/
|
|
export declare const renderEmptySwatch_unstable: (state: EmptySwatchState) => JSX.Element;
|
|
|
|
/**
|
|
* Render the final JSX of ImageSwatch
|
|
*/
|
|
export declare const renderImageSwatch_unstable: (state: ImageSwatchState) => JSX.Element;
|
|
|
|
/**
|
|
* Render the final JSX of SwatchPicker
|
|
*/
|
|
export declare const renderSwatchPicker_unstable: (state: SwatchPickerState, contextValues: SwatchPickerContextValues) => JSX.Element;
|
|
|
|
export declare const renderSwatchPickerGrid: (props: SwatchPickerGridProps) => JSX.Element[];
|
|
|
|
/**
|
|
* Render the final JSX of SwatchPickerRow
|
|
*/
|
|
export declare const renderSwatchPickerRow_unstable: (state: SwatchPickerRowState) => JSX.Element;
|
|
|
|
export declare const swatchCSSVars: {
|
|
color: string;
|
|
borderColor: string;
|
|
};
|
|
|
|
/**
|
|
* SwatchPicker component - TODO: add more docs
|
|
*/
|
|
export declare const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
|
|
|
|
export declare const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots>;
|
|
|
|
export declare const swatchPickerContextDefaultValue: SwatchPickerContextValue;
|
|
|
|
/**
|
|
* The context through which individual color controls communicate with the picker.
|
|
*/
|
|
export declare type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {
|
|
/**
|
|
* Whether layout is grid.
|
|
*/
|
|
isGrid: boolean;
|
|
/**
|
|
* @internal
|
|
* Callback used by ColorSwatch to request a change on it's selected state
|
|
* Should be used to select ColorSwatch
|
|
*/
|
|
requestSelectionChange: (event: React_2.MouseEvent<HTMLButtonElement>, data: {
|
|
selectedValue: string;
|
|
selectedSwatch: string;
|
|
}) => void;
|
|
};
|
|
|
|
export declare type SwatchPickerContextValues = {
|
|
swatchPicker: SwatchPickerContextValue;
|
|
};
|
|
|
|
export declare type SwatchPickerGridProps = {
|
|
items: SwatchProps[];
|
|
columnCount: number;
|
|
renderRow?: (props: {
|
|
children: JSX.Element[];
|
|
rowId: string | number;
|
|
}) => JSX.Element;
|
|
renderSwatch?: (item: SwatchProps) => JSX.Element;
|
|
};
|
|
|
|
export declare type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;
|
|
|
|
export declare type SwatchPickerOnSelectionChangeData = EventData<'click', React_2.MouseEvent<HTMLButtonElement>> & {
|
|
selectedValue: string;
|
|
selectedSwatch: string;
|
|
};
|
|
|
|
/**
|
|
* SwatchPicker Props
|
|
*/
|
|
export declare type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {
|
|
/**
|
|
* Default selected value
|
|
*/
|
|
defaultSelectedValue?: string;
|
|
/**
|
|
* Whether SwatchPicker is row or grid
|
|
*/
|
|
layout?: 'row' | 'grid';
|
|
/**
|
|
* Triggers a callback when the value has been changed
|
|
*/
|
|
onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;
|
|
/**
|
|
* Controlled selected value
|
|
*/
|
|
selectedValue?: string;
|
|
/**
|
|
* Swatch size
|
|
* @defaultvalue 'medium'
|
|
*/
|
|
size?: 'extra-small' | 'small' | 'medium' | 'large';
|
|
/**
|
|
* Swatch shape
|
|
* @defaultvalue 'square'
|
|
*/
|
|
shape?: 'rounded' | 'square' | 'circular';
|
|
/**
|
|
* Spacing between swatches
|
|
* @defaultvalue 'medium'
|
|
*/
|
|
spacing?: 'small' | 'medium';
|
|
};
|
|
|
|
export declare const SwatchPickerProvider: React_2.Provider<SwatchPickerContextValue> & React_2.FC<React_2.ProviderProps<SwatchPickerContextValue>>;
|
|
|
|
/**
|
|
* SwatchPickerRow component is used to render a row of swatches.
|
|
*/
|
|
export declare const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps>;
|
|
|
|
export declare const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots>;
|
|
|
|
/**
|
|
* SwatchPickerRow Props
|
|
*/
|
|
export declare type SwatchPickerRowProps = ComponentProps<SwatchPickerRowSlots>;
|
|
|
|
export declare type SwatchPickerRowSlots = {
|
|
root: Slot<'div'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering SwatchPickerRow
|
|
*/
|
|
export declare type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;
|
|
|
|
export declare type SwatchPickerSlots = {
|
|
root: Slot<'div'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering SwatchPicker
|
|
*/
|
|
export declare type SwatchPickerState = ComponentState<SwatchPickerSlots> & SwatchPickerContextValue & Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {
|
|
isGrid: boolean;
|
|
};
|
|
|
|
export declare type SwatchProps = ImageSwatchProps | ColorSwatchProps;
|
|
|
|
/**
|
|
* Create the state required to render ColorSwatch.
|
|
*
|
|
* The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
|
|
* before being passed to renderColorSwatch_unstable.
|
|
*
|
|
* @param props - props from this instance of ColorSwatch
|
|
* @param ref - reference to root HTMLButtonElement of ColorSwatch
|
|
*/
|
|
export declare const useColorSwatch_unstable: (props: ColorSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchState;
|
|
|
|
/**
|
|
* Apply styling to the ColorSwatch slots based on the state
|
|
*/
|
|
export declare const useColorSwatchStyles_unstable: (state: ColorSwatchState) => ColorSwatchState;
|
|
|
|
/**
|
|
* Create the state required to render EmptySwatch.
|
|
*
|
|
* The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,
|
|
* before being passed to renderEmptySwatch_unstable.
|
|
*
|
|
* @param props - props from this instance of EmptySwatch
|
|
* @param ref - reference to root HTMLDivElement of EmptySwatch
|
|
*/
|
|
export declare const useEmptySwatch_unstable: (props: EmptySwatchProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchState;
|
|
|
|
/**
|
|
* Apply styling to the EmptySwatch slots based on the state
|
|
*/
|
|
export declare const useEmptySwatchStyles_unstable: (state: EmptySwatchState) => EmptySwatchState;
|
|
|
|
/**
|
|
* Create the state required to render ImageSwatch.
|
|
*
|
|
* The returned state can be modified with hooks such as useImageSwatchStyles_unstable,
|
|
* before being passed to renderImageSwatch_unstable.
|
|
*
|
|
* @param props - props from this instance of ImageSwatch
|
|
* @param ref - reference to root HTMLDivElement of ImageSwatch
|
|
*/
|
|
export declare const useImageSwatch_unstable: (props: ImageSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchState;
|
|
|
|
/**
|
|
* Apply styling to the ImageSwatch slots based on the state
|
|
*/
|
|
export declare const useImageSwatchStyles_unstable: (state: ImageSwatchState) => ImageSwatchState;
|
|
|
|
/**
|
|
* Create the state required to render SwatchPicker.
|
|
*
|
|
* The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,
|
|
* before being passed to renderSwatchPicker_unstable.
|
|
*
|
|
* @param props - props from this instance of SwatchPicker
|
|
* @param ref - reference to root HTMLElement of SwatchPicker
|
|
*/
|
|
export declare const useSwatchPicker_unstable: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;
|
|
|
|
export declare const useSwatchPickerContextValue_unstable: <T>(selector: ContextSelector<SwatchPickerContextValue, T>) => T;
|
|
|
|
export declare const useSwatchPickerContextValues: (state: SwatchPickerState) => SwatchPickerContextValues;
|
|
|
|
/**
|
|
* Create the state required to render SwatchPickerRow.
|
|
*
|
|
* The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,
|
|
* before being passed to renderSwatchPickerRow_unstable.
|
|
*
|
|
* @param props - props from this instance of SwatchPickerRow
|
|
* @param ref - reference to root HTMLDivElement of SwatchPickerRow
|
|
*/
|
|
export declare const useSwatchPickerRow_unstable: (props: SwatchPickerRowProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowState;
|
|
|
|
/**
|
|
* Apply styling to the SwatchPickerRow slots based on the state
|
|
*/
|
|
export declare const useSwatchPickerRowStyles_unstable: (state: SwatchPickerRowState) => SwatchPickerRowState;
|
|
|
|
/**
|
|
* Apply styling to the SwatchPicker slots based on the state
|
|
*/
|
|
export declare const useSwatchPickerStyles_unstable: (state: SwatchPickerState) => SwatchPickerState;
|
|
|
|
export { }
|